From 4d34d7a2b53d6423ad50e34523fd0ceaf08f5e25 Mon Sep 17 00:00:00 2001
From: zhanghan11 <zhanghan11@inspur.com>
Date: Tue, 9 Apr 2024 17:01:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
 =?UTF-8?q?=E5=92=8C=E6=8A=A5=E8=AD=A6=E9=A1=B5=E9=9D=A2=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tzipc-ui/src/views/zf/bigscreen/index.vue | 1247 ++++++++++++---------
 1 file changed, 738 insertions(+), 509 deletions(-)

diff --git a/tzipc-ui/src/views/zf/bigscreen/index.vue b/tzipc-ui/src/views/zf/bigscreen/index.vue
index a206e26..d9ced00 100644
--- a/tzipc-ui/src/views/zf/bigscreen/index.vue
+++ b/tzipc-ui/src/views/zf/bigscreen/index.vue
@@ -1,148 +1,357 @@
 <template>
-    <div class="bigscreen-outer-wrappeer">
-        <div class="grid-main-wrapper" @click="$router.push('/alarm/alarmRecord')">
-            <div class="grid-item-wrapper">
-                <div class="card-item-wrapper">
-                    <div class="card-big-title">{{ title1 }}数据监控</div>
-                    <div class="card-sub-title">油膜轴承振动监测</div>
-                    <div class="card-main-item-wrapper" id="chart1" style="height:calc(100% - 8.1rem);"></div>
-                    <div class="scroll-text-wrapper" style="height: 1.7rem;">
-                        <div class="scroll-inner"></div>
-                    </div>
-                </div>
-            </div>
-            <div
-                class="grid-item-wrapper"
-                style="grid-row: span 2;grid-column: span 2;padding: 2rem;"
-                @click="(e) => { e.stopPropagation() }"
-            >
-                <div class="device-image">
-                    <div @click="handleTypeChange(['rtd', 'rto'])"></div>
-                    <div @click="handleTypeChange(['ftd', 'fto'])"></div>
-                    <div @click="handleTypeChange(['rbd', 'rbo'])"></div>
-                    <div @click="handleTypeChange(['fbd', 'fbo'])"></div>
-                </div>
-            </div>
-            <div class="grid-item-wrapper">
-                <div class="card-item-wrapper">
-                    <div class="card-big-title">{{ title2 }}数据监控</div>
-                    <div class="card-sub-title">油膜轴承振动监测</div>
-                    <div class="card-main-item-wrapper" id="chart2" style="height:calc(100% - 8.1rem);"></div>
-                    <div class="scroll-text-wrapper" style="height: 1.7rem;">
-                        <div class="scroll-inner"></div>
-                    </div>
-                </div>
-            </div>
-            <div class="grid-item-wrapper">
-                <div class="card-item-wrapper">
-                    <div class="card-sub-title">油液颗粒度特性</div>
-                    <div class="card-main-item-wrapper" id="chart3" style="height:calc(100% - 4.5rem);"></div>
-                    <div class="scroll-text-wrapper" style="height: 1.7rem;">
-                        <div class="scroll-inner"></div>
-                    </div>
-                </div>
-            </div>
-            <div class="grid-item-wrapper">
-                <div class="card-item-wrapper">
-                    <div class="card-sub-title">油液颗粒度特性</div>
-                    <div class="card-main-item-wrapper" id="chart4" style="height:calc(100% - 4.5rem);"></div>
-                    <div class="scroll-text-wrapper" style="height: 1.7rem;">
-                        <div class="scroll-inner"></div>
-                    </div>
-                </div>
-            </div>
-            <div class="grid-item-wrapper" style="grid-column: span 2;">
-                <div class="card-item-wrapper">
-                    <div class="big-car-title-bg">油膜轴承系统油品特性</div>
-                    <div class="card-main-item-wrapper" style="padding: .8rem 1.2rem;height: calc(100% - 2.4rem);">
-                        <div class="bottom-grid-wrapper">
-                            <div class="bottom-grid-item">
-                                <div id="bottomL1" style="width: 100%;aspect-ratio: 1;"></div>
-                                <div style="font-family: 'BiaoTi';">油水含量</div>
-                            </div>
-                            <div class="bottom-grid-item">
-                                <div id="bottomL2" style="width: 100%;aspect-ratio: 1;"></div>
-                                <div style="font-family: 'BiaoTi';">油品粘度</div>
-                            </div>
-                            <div class="bottom-grid-item">
-                                <div id="bottomL3" style="width: 100%;aspect-ratio: 1;"></div>
-                                <div style="font-family: 'BiaoTi';">进油压力</div>
-                            </div>
-                            <div class="bottom-grid-item">
-                                <div
-                                    style="width: 100%;aspect-ratio: 1;"
-                                    class="extra-bar-wrapper"
-                                >
-                                    <div class="extra-bar-item" :style="`height: ${parseInt(l1 * 100)}%;background-color:#6581f0;`"></div>
-                                    <div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(l1 * 100)}%);`">
-                                        {{ parseInt(l1 * 100) }}
-                                    </div>
-                                </div>
-                                <div style="font-family: 'BiaoTi';">回油温度</div>
-                            </div>
-                            <div class="bottom-grid-item">
-                                <div
-                                    style="width: 100%;aspect-ratio: 1;"
-                                    class="extra-bar-wrapper"
-                                >
-                                    <div class="extra-bar-item" :style="`height: ${parseInt(l2 * 100)}%;background-color:#19ca88;`"></div>
-                                    <div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(l2 * 100)}%);`">
-                                        {{ parseInt(l2 * 100) }}
-                                    </div>
-                                </div>
-                                <div style="font-family: 'BiaoTi';">轴套区温度</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="grid-item-wrapper" style="grid-column: span 2;">
-                <div class="card-item-wrapper">
-                    <div class="big-car-title-bg">油膜轴承系统油品特性</div>
-                    <div class="card-main-item-wrapper" style="padding: .8rem 1.2rem;height: calc(100% - 2.4rem);">
-                        <div class="bottom-grid-wrapper">
-                            <div class="bottom-grid-item">
-                                <div
-                                    style="width: 100%;aspect-ratio: 1;"
-                                    class="extra-bar-wrapper"
-                                >
-                                    <div class="extra-bar-item" :style="`height: ${parseInt(r1 * 100)}%;background-color:#19ca88;`"></div>
-                                    <div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(r1 * 100)}%);`">
-                                        {{ parseInt(r1 * 100) }}
-                                    </div>
-                                </div>
-                                <div style="font-family: 'BiaoTi';">轴套区温度</div>
-                            </div>
-                            <div class="bottom-grid-item">
-                                <div
-                                    style="width: 100%;aspect-ratio: 1;"
-                                    class="extra-bar-wrapper"
-                                >
-                                    <div class="extra-bar-item" :style="`height: ${parseInt(r2 * 100)}%;background-color:#6581f0;`"></div>
-                                    <div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(r2 * 100)}%);`">
-                                        {{ parseInt(r2 * 100) }}
-                                    </div>
-                                </div>
-                                <div style="font-family: 'BiaoTi';">回油温度</div>
-                            </div>
-                            <div class="bottom-grid-item">
-                                <div id="bottomR1" style="width: 100%;aspect-ratio: 1;"></div>
-                                <div style="font-family: 'BiaoTi';">进油压力</div>
-                            </div>
-                            <div class="bottom-grid-item">
-                                <div id="bottomR2" style="width: 100%;aspect-ratio: 1;"></div>
-                                <div style="font-family: 'BiaoTi';">油品粘度</div>
-                            </div>
-                            <div class="bottom-grid-item">
-                                <div id="bottomR3" style="width: 100%;aspect-ratio: 1;"></div>
-                                <div style="font-family: 'BiaoTi';">油水含量</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  <div class="bigscreen-outer-wrappeer">
+    <div class="grid-main-wrapper">
+      <div class="grid-item-wrapper">
+        <div class="card-item-wrapper">
+          <div class="card-big-title">{{ title1 }}数据监控</div>
+          <div
+            class="card-sub-title"
+            @click="jumpSensorDataLog"
+          >油膜轴承振动监测</div>
+          <div
+            class="card-main-item-wrapper"
+            id="chart1"
+            style="height:calc(100% - 6.4rem);"
+          ></div>
         </div>
+      </div>
+      <div
+        class="grid-item-wrapper"
+        style="grid-row: span 2;grid-column: span 2;padding: 2rem;"
+        @click="(e) => { e.stopPropagation() }"
+      >
+        <div class="device-image">
+          <div @click="handleTypeChange(['rtd', 'rto'])"></div>
+          <div @click="handleTypeChange(['ftd', 'fto'])"></div>
+          <div @click="handleTypeChange(['rbd', 'rbo'])"></div>
+          <div @click="handleTypeChange(['fbd', 'fbo'])"></div>
+        </div>
+      </div>
+      <div class="grid-item-wrapper">
+        <div class="card-item-wrapper">
+          <div class="card-big-title">{{ title2 }}数据监控</div>
+          <div
+            class="card-sub-title"
+            @click="jumpSensorDataLog"
+          >油膜轴承振动监测</div>
+          <div
+            class="card-main-item-wrapper"
+            id="chart2"
+            style="height:calc(100% - 6.4rem);"
+          ></div>
+        </div>
+      </div>
+      <div class="grid-item-wrapper">
+        <div class="card-item-wrapper">
+          <div
+            class="card-sub-title"
+            @click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'pz4', '油液颗粒度特性', 'μm')"
+          >油液颗粒度特性</div>
+          <div
+            class="card-main-item-wrapper"
+            id="chart3"
+            style="height:calc(100% - 4.5rem);"
+          ></div>
+          <div
+            class="scroll-text-wrapper"
+            style="height: 1.7rem;"
+            @click="$router.push('/alarm/alarmRecord')"
+          >
+            <div class="scroll-inner"></div>
+          </div>
+        </div>
+      </div>
+      <div class="grid-item-wrapper">
+        <div class="card-item-wrapper">
+          <div
+            class="card-sub-title"
+            @click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'pz4', '油液颗粒度特性', 'μm')"
+          >油液颗粒度特性</div>
+          <div
+            class="card-main-item-wrapper"
+            id="chart4"
+            style="height:calc(100% - 4.5rem);"
+          ></div>
+          <div
+            class="scroll-text-wrapper"
+            style="height: 1.7rem;"
+            @click="$router.push('/alarm/alarmRecord')"
+          >
+            <div class="scroll-inner"></div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="grid-item-wrapper"
+        style="grid-column: span 2;"
+      >
+        <div class="card-item-wrapper">
+          <div class="big-car-title-bg">油膜轴承系统油品特性</div>
+          <div
+            class="card-main-item-wrapper"
+            style="padding: .8rem 1.2rem;height: calc(100% - 2.4rem);"
+          >
+            <div class="bottom-grid-wrapper">
+              <div class="bottom-grid-item">
+                <div
+                  id="bottomL1"
+                  style="width: 100%;aspect-ratio: 1;"
+                ></div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'owc', '油水含量', '%')"
+                >油水含量</div>
+              </div>
+              <div class="bottom-grid-item">
+                <div
+                  id="bottomL2"
+                  style="width: 100%;aspect-ratio: 1;"
+                ></div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'ov', '油品粘度', 'Cp')"
+                >油品粘度</div>
+              </div>
+              <div class="bottom-grid-item">
+                <div
+                  id="bottomL3"
+                  style="width: 100%;aspect-ratio: 1;"
+                ></div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'oip', '进油压力', 'Bar')"
+                >进油压力</div>
+              </div>
+              <div class="bottom-grid-item">
+                <div
+                  style="width: 100%;aspect-ratio: 1;"
+                  class="extra-bar-wrapper"
+                >
+                  <div
+                    class="extra-bar-item"
+                    :style="`height: ${parseInt(l1 * 100)}%;background-color:#6581f0;`"
+                  ></div>
+                  <div
+                    class="extra-bar-text"
+                    :style="`height: calc(100% - ${parseInt(l1 * 100)}%);`"
+                  >
+                    {{ parseInt(l1 * 100) }}
+                  </div>
+                </div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'rot', '回油温度', '℃')"
+                >回油温度</div>
+              </div>
+              <div class="bottom-grid-item">
+                <div
+                  style="width: 100%;aspect-ratio: 1;"
+                  class="extra-bar-wrapper"
+                >
+                  <div
+                    class="extra-bar-item"
+                    :style="`height: ${parseInt(l2 * 100)}%;background-color:#19ca88;`"
+                  ></div>
+                  <div
+                    class="extra-bar-text"
+                    :style="`height: calc(100% - ${parseInt(l2 * 100)}%);`"
+                  >
+                    {{ parseInt(l2 * 100) }}
+                  </div>
+                </div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="jumpSensorDataLog"
+                >轴套区温度</div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="scroll-text-wrapper"
+            style="height: 1.7rem;"
+            @click="$router.push('/alarm/alarmRecord')"
+          >
+            <div class="scroll-inner"></div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="grid-item-wrapper"
+        style="grid-column: span 2;"
+      >
+        <div class="card-item-wrapper">
+          <div class="big-car-title-bg">油膜轴承系统油品特性</div>
+          <div
+            class="card-main-item-wrapper"
+            style="padding: .8rem 1.2rem;height: calc(100% - 2.4rem);"
+          >
+            <div class="bottom-grid-wrapper">
+              <div class="bottom-grid-item">
+                <div
+                  style="width: 100%;aspect-ratio: 1;"
+                  class="extra-bar-wrapper"
+                >
+                  <div
+                    class="extra-bar-item"
+                    :style="`height: ${parseInt(r1 * 100)}%;background-color:#19ca88;`"
+                  ></div>
+                  <div
+                    class="extra-bar-text"
+                    :style="`height: calc(100% - ${parseInt(r1 * 100)}%);`"
+                  >
+                    {{ parseInt(r1 * 100) }}
+                  </div>
+                </div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="jumpSensorDataLog"
+                >轴套区温度</div>
+              </div>
+              <div class="bottom-grid-item">
+                <div
+                  style="width: 100%;aspect-ratio: 1;"
+                  class="extra-bar-wrapper"
+                >
+                  <div
+                    class="extra-bar-item"
+                    :style="`height: ${parseInt(r2 * 100)}%;background-color:#6581f0;`"
+                  ></div>
+                  <div
+                    class="extra-bar-text"
+                    :style="`height: calc(100% - ${parseInt(r2 * 100)}%);`"
+                  >
+                    {{ parseInt(r2 * 100) }}
+                  </div>
+                </div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'rot', '回油温度', '℃')"
+                >回油温度</div>
+              </div>
+              <div class="bottom-grid-item">
+                <div
+                  id="bottomR1"
+                  style="width: 100%;aspect-ratio: 1;"
+                ></div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'oip', '进油压力', 'Bar')"
+                >进油压力</div>
+              </div>
+              <div class="bottom-grid-item">
+                <div
+                  id="bottomR2"
+                  style="width: 100%;aspect-ratio: 1;"
+                ></div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'ov', '油品粘度', 'Cp')"
+                >油品粘度</div>
+              </div>
+              <div class="bottom-grid-item">
+                <div
+                  id="bottomR3"
+                  style="width: 100%;aspect-ratio: 1;"
+                ></div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'owc', '油水含量', '%')"
+                >油水含量</div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="scroll-text-wrapper"
+            style="height: 1.7rem;"
+            @click="$router.push('/alarm/alarmRecord')"
+          >
+            <div class="scroll-inner"></div>
+          </div>
+        </div>
+      </div>
     </div>
+    <!-- 添加或修改报警记录对话框 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="1000px"
+      append-to-body
+    >
+      <div>
+        <el-form
+          :inline="true"
+          size="small"
+        >
+          <el-form-item
+            label="油液颗粒度"
+            v-if="isPz"
+          >
+            <el-radio
+              v-model="nameKey"
+              label="pz4"
+              @change="getData"
+            >4μm</el-radio>
+            <el-radio
+              v-model="nameKey"
+              label="pz6"
+              @change="getData"
+            >6μm</el-radio>
+            <el-radio
+              v-model="nameKey"
+              label="pz14"
+              @change="getData"
+            >14μm</el-radio>
+            <el-radio
+              v-model="nameKey"
+              label="pz21"
+              @change="getData"
+            >21μm</el-radio>
+          </el-form-item>
+          <el-form-item label="时间范围">
+            <el-date-picker
+              @change="getData"
+              class="picker"
+              v-model="datetimerange"
+              type="datetimerange"
+              :picker-options="pickerOptions"
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <!-- <el-form-item>
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="mini"
+              @click="getData"
+            >搜索</el-button>
+            <el-button
+              type="primary"
+              icon="el-icon-refresh"
+              size="mini"
+              @click="resetQuery"
+            >重置</el-button>
+          </el-form-item> -->
+        </el-form>
+      </div>
+      <div
+        v-loading="loading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        ref="tendencyChart"
+        style="height:500px;"
+      ></div>
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button @click="cancel">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 <script>
 import * as echarts from "echarts";
@@ -410,366 +619,382 @@ export default {
           const { xSensorData, vx, vy, vz } = drive;
           this.initChart2(xSensorData, vx, vy, vz);
 
-                    const { xPlcData, pz4, pz6, pz14, pz21 } = drive
-                    this.initChart4(xPlcData, pz4, pz6, pz14, pz21)
+          const { xPlcData, pz4, pz6, pz14, pz21 } = drive;
+          this.initChart4(xPlcData, pz4, pz6, pz14, pz21);
 
-                    const { ssat, rot, oip, ov, owc } = drive
+          const { ssat, rot, oip, ov, owc } = drive;
 
-                    this.initBottomR1(oip)
-                    this.initBottomR2(ov)
-                    this.initBottomR3(owc)
+          this.initBottomR1(oip);
+          this.initBottomR2(ov);
+          this.initBottomR3(owc);
 
-                    this.r1 = ssat
-                    this.r2 = rot
-                }
-                // 处理操作侧数据
-                if (operation) {
-                    const { xSensorData, vx, vy, vz } = operation;
-                    this.initChart1(xSensorData, vx, vy, vz)
+          this.r1 = ssat;
+          this.r2 = rot;
+        }
+        // 处理操作侧数据
+        if (operation) {
+          const { xSensorData, vx, vy, vz } = operation;
+          this.initChart1(xSensorData, vx, vy, vz);
 
           const { xPlcData, pz4, pz6, pz14, pz21 } = operation;
           this.initChart3(xPlcData, pz4, pz6, pz14, pz21);
 
-                    const { owc, ov, oip, rot, ssat } = operation
-                    this.initBottomL1(owc)
-                    this.initBottomL2(ov)
-                    this.initBottomL3(oip)
+          const { owc, ov, oip, rot, ssat } = operation;
+          this.initBottomL1(owc);
+          this.initBottomL2(ov);
+          this.initBottomL3(oip);
 
-                    this.l1 = rot
-                    this.l2 = ssat
-                }
-            })
-        },
-        initChart1(xAxis = [], vx, vy, vz) {
-            const chartIns = echarts.init(document.getElementById("chart1"));
-            chartIns.setOption(this.generateOptions({
-                xAxis: {
-                    data: xAxis
-                },
-                yAxis: { name: "单位: ㎛" },
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: {
-                        type: "cross",
-                        label: {
-                            backgroundColor: "#6a7985",
-                        },
-                    },
-                },
-                series: [
-                    {
-                        name: "X轴",
-                        type: "line",
-                        symbol: "none",
-                        data: vx,
-                    },
-                    {
-                        name: "Y轴",
-                        type: "line",
-                        symbol: "none",
-                        data: vy,
-                    },
-                    {
-                        name: "Z轴",
-                        type: "line",
-                        symbol: "none",
-                        data: vz,
-                    },
-                ],
-                grid: {
-                    bottom: "20%",
-                }
-            }), true, true);
-            window.addEventListener("resize", () => {
-                chartIns && chartIns.resize();
-            });
-        },
-        initChart2(xAxis = [], vx, vy, vz) {
-            const chartIns = echarts.init(document.getElementById("chart2"));
-            chartIns.setOption(this.generateOptions({
-                xAxis: {
-                    data: xAxis
-                },
-                yAxis: { name: "单位: ㎛" },
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: {
-                        type: "cross",
-                        label: {
-                            backgroundColor: "#6a7985",
-                        },
-                    },
-                },
-                series: [
-                    {
-                        name: "X轴",
-                        type: "line",
-                        symbol: "none",
-                        data: vx,
-                    },
-                    {
-                        name: "Y轴",
-                        type: "line",
-                        symbol: "none",
-                        data: vy,
-                    },
-                    {
-                        name: "Z轴",
-                        type: "line",
-                        symbol: "none",
-                        data: vz,
-                    },
-                ],
-                grid: {
-                    bottom: "20%",
-                }
-            }), true, true);
-            window.addEventListener("resize", () => {
-                chartIns && chartIns.resize();
-            });
-        },
-        initChart3(xAxis = [], pz4, pz6, pz14, pz21) {
-            const chartIns = echarts.init(document.getElementById("chart3"));
-            chartIns.setOption(this.generateOptions({
-                xAxis: {
-                    data: xAxis
-                },
-                yAxis: { name: "单位: ㎛" },
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: {
-                        type: "cross",
-                        label: {
-                            backgroundColor: "#6a7985",
-                        },
-                    },
-                },
-                series: [
-                    {
-                        name: "4㎛",
-                        type: "line",
-                        symbol: "none",
-                        data: pz4,
-                    },
-                    {
-                        name: "6㎛",
-                        type: "line",
-                        symbol: "none",
-                        data: pz6,
-                    },
-                    {
-                        name: "14㎛",
-                        type: "line",
-                        symbol: "none",
-                        data: pz14,
-                    },
-                    {
-                        name: "21㎛",
-                        type: "line",
-                        symbol: "none",
-                        data: pz21,
-                    },
-                ],
-            }), true, true);
-            window.addEventListener("resize", () => {
-                chartIns && chartIns.resize();
-            });
-        },
-        initChart4(xAxis = [], pz4, pz6, pz14, pz21) {
-            const chartIns = echarts.init(document.getElementById("chart4"));
-            chartIns.setOption(this.generateOptions({
-                xAxis: {
-                    data: xAxis
-                },
-                yAxis: { name: "单位: ㎛" },
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: {
-                        type: "cross",
-                        label: {
-                            backgroundColor: "#6a7985",
-                        },
-                    },
-                },
-                series: [
-                    {
-                        name: "4㎛",
-                        type: "line",
-                        symbol: "none",
-                        data: pz4,
-                    },
-                    {
-                        name: "6㎛",
-                        type: "line",
-                        symbol: "none",
-                        data: pz6,
-                    },
-                    {
-                        name: "14㎛",
-                        type: "line",
-                        symbol: "none",
-                        data: pz14,
-                    },
-                    {
-                        name: "21㎛",
-                        type: "line",
-                        symbol: "none",
-                        data: pz21,
-                    },
-                ],
-            }), true, true);
-            window.addEventListener("resize", () => {
-                chartIns && chartIns.resize();
-            });
-        },
-        initBottomL1(owc = 0) {
-            const chartIns = echarts.init(document.getElementById("bottomL1"));
-            chartIns.setOption(
-                this.generateGaugeOption({
-                    color: ["0ec6c4", "0ec6c4"],
-                    bgColor: "aef1f5",
-                    name: "",
-                    value: parseInt(owc * 100),
-                    limit: 100,
-                    unit: "%",
-                }),
-                true,
-                true
-            );
-            window.addEventListener("resize", () => {
-                chartIns && chartIns.resize();
-            });
-        },
-        initBottomL2(ov = 0) {
-            const chartIns = echarts.init(document.getElementById("bottomL2"));
-            chartIns.setOption(
-                this.generateGaugeOption({
-                    color: ["1860b1", "1860b1"],
-                    bgColor: "c2d6ec",
-                    name: "",
-                    value: parseInt(ov * 100),
-                    limit: 100,
-                    unit: "CP",
-                }),
-                true,
-                true
-            );
-            window.addEventListener("resize", () => {
-                chartIns && chartIns.resize();
-            });
-        },
-        initBottomL3(oip = 0) {
-            const chartIns = echarts.init(document.getElementById("bottomL3"));
-            chartIns.setOption(
-                this.generateGaugeOption({
-                    color: ["f3c128", "f3c128"],
-                    bgColor: "f0eace",
-                    name: "",
-                    value: parseInt(oip * 100),
-                    limit: 100,
-                    unit: "Bar",
-                }),
-                true,
-                true
-            );
-            window.addEventListener("resize", () => {
-                chartIns && chartIns.resize();
-            });
-        },
-        initBottomR1(oip = 0) {
-            const chartIns = echarts.init(document.getElementById("bottomR1"));
-            chartIns.setOption(
-                this.generateGaugeOption({
-                    color: ["f3c128", "f3c128"],
-                    bgColor: "f0eace",
-                    name: "",
-                    value: parseInt(oip * 100),
-                    limit: 100,
-                    unit: "Bar",
-                }),
-                true,
-                true
-            );
-            window.addEventListener("resize", () => {
-                chartIns && chartIns.resize();
-            });
-        },
-        initBottomR2(ov = 0) {
-            const chartIns = echarts.init(document.getElementById("bottomR2"));
-            chartIns.setOption(
-                this.generateGaugeOption({
-                    color: ["1860b1", "1860b1"],
-                    bgColor: "c2d6ec",
-                    name: "",
-                    value: parseInt(ov * 100),
-                    limit: 100,
-                    unit: "CP",
-                }),
-                true,
-                true
-            );
-            window.addEventListener("resize", () => {
-                chartIns && chartIns.resize();
-            });
-        },
-        initBottomR3(owc = 0) {
-            const chartIns = echarts.init(document.getElementById("bottomR3"));
-            chartIns.setOption(
-                this.generateGaugeOption({
-                    color: ["0ec6c4", "0ec6c4"],
-                    bgColor: "aef1f5",
-                    name: "",
-                    value: parseInt(owc * 100),
-                    limit: 100,
-                    unit: "%",
-                }),
-                true,
-                true
-            );
-            window.addEventListener("resize", () => {
-                chartIns && chartIns.resize();
-            });
-        },
-        generateGaugeOption(
-            option = {
-                color: ["0DDF7A"],
-                bgColor: "fff",
-                name: "",
-                value: 0,
-                limit: 1,
-            }
-        ) {
-            return merge(
-                {
-                    series: [
-                        {
-                            type: "gauge",
-                            center: ["50%", "60%"],
-                            startAngle: 220,
-                            endAngle: -40,
-                            min: 0,
-                            max: option.limit,
-                            splitNumber: 12,
-                            progress: {
-                                show: true,
-                                width: 20,
-                                itemStyle: {
-                                    color: {
-                                        type: "linear",
-                                        x: 0.8,
-                                        y: 0,
-                                        x2: 0,
-                                        y2: 1,
-                                        colorStops: [
-                                            {
-                                                offset: 0,
-                                                color: "#" + option.color[1], // 0% 处的颜色
-                                            },
-                                            {
-                                                offset: 1,
-                                                color: "#" + option.color[0], // 100% 处的颜色
-                                            },
-                                        ],
+          this.l1 = rot;
+          this.l2 = ssat;
+        }
+      });
+    },
+    initChart1(xAxis = [], vx, vy, vz) {
+      const chartIns = echarts.init(document.getElementById("chart1"));
+      chartIns.setOption(
+        this.generateOptions({
+          xAxis: {
+            data: xAxis,
+          },
+          yAxis: { name: "单位: ㎛" },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "cross",
+              label: {
+                backgroundColor: "#6a7985",
+              },
+            },
+          },
+          series: [
+            {
+              name: "X轴",
+              type: "line",
+              symbol: "none",
+              data: vx,
+            },
+            {
+              name: "Y轴",
+              type: "line",
+              symbol: "none",
+              data: vy,
+            },
+            {
+              name: "Z轴",
+              type: "line",
+              symbol: "none",
+              data: vz,
+            },
+          ],
+          grid: {
+            bottom: "20%",
+          },
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        chartIns && chartIns.resize();
+      });
+    },
+    initChart2(xAxis = [], vx, vy, vz) {
+      const chartIns = echarts.init(document.getElementById("chart2"));
+      chartIns.setOption(
+        this.generateOptions({
+          xAxis: {
+            data: xAxis,
+          },
+          yAxis: { name: "单位: ㎛" },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "cross",
+              label: {
+                backgroundColor: "#6a7985",
+              },
+            },
+          },
+          series: [
+            {
+              name: "X轴",
+              type: "line",
+              symbol: "none",
+              data: vx,
+            },
+            {
+              name: "Y轴",
+              type: "line",
+              symbol: "none",
+              data: vy,
+            },
+            {
+              name: "Z轴",
+              type: "line",
+              symbol: "none",
+              data: vz,
+            },
+          ],
+          grid: {
+            bottom: "20%",
+          },
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        chartIns && chartIns.resize();
+      });
+    },
+    initChart3(xAxis = [], pz4, pz6, pz14, pz21) {
+      const chartIns = echarts.init(document.getElementById("chart3"));
+      chartIns.setOption(
+        this.generateOptions({
+          xAxis: {
+            data: xAxis,
+          },
+          yAxis: { name: "单位: ㎛" },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "cross",
+              label: {
+                backgroundColor: "#6a7985",
+              },
+            },
+          },
+          series: [
+            {
+              name: "4㎛",
+              type: "line",
+              symbol: "none",
+              data: pz4,
+            },
+            {
+              name: "6㎛",
+              type: "line",
+              symbol: "none",
+              data: pz6,
+            },
+            {
+              name: "14㎛",
+              type: "line",
+              symbol: "none",
+              data: pz14,
+            },
+            {
+              name: "21㎛",
+              type: "line",
+              symbol: "none",
+              data: pz21,
+            },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        chartIns && chartIns.resize();
+      });
+    },
+    initChart4(xAxis = [], pz4, pz6, pz14, pz21) {
+      const chartIns = echarts.init(document.getElementById("chart4"));
+      chartIns.setOption(
+        this.generateOptions({
+          xAxis: {
+            data: xAxis,
+          },
+          yAxis: { name: "单位: ㎛" },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "cross",
+              label: {
+                backgroundColor: "#6a7985",
+              },
+            },
+          },
+          series: [
+            {
+              name: "4㎛",
+              type: "line",
+              symbol: "none",
+              data: pz4,
+            },
+            {
+              name: "6㎛",
+              type: "line",
+              symbol: "none",
+              data: pz6,
+            },
+            {
+              name: "14㎛",
+              type: "line",
+              symbol: "none",
+              data: pz14,
+            },
+            {
+              name: "21㎛",
+              type: "line",
+              symbol: "none",
+              data: pz21,
+            },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        chartIns && chartIns.resize();
+      });
+    },
+    initBottomL1(owc = 0) {
+      const chartIns = echarts.init(document.getElementById("bottomL1"));
+      chartIns.setOption(
+        this.generateGaugeOption({
+          color: ["0ec6c4", "0ec6c4"],
+          bgColor: "aef1f5",
+          name: "",
+          value: parseInt(owc * 100),
+          limit: 100,
+          unit: "%",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        chartIns && chartIns.resize();
+      });
+    },
+    initBottomL2(ov = 0) {
+      const chartIns = echarts.init(document.getElementById("bottomL2"));
+      chartIns.setOption(
+        this.generateGaugeOption({
+          color: ["1860b1", "1860b1"],
+          bgColor: "c2d6ec",
+          name: "",
+          value: parseInt(ov * 100),
+          limit: 100,
+          unit: "CP",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        chartIns && chartIns.resize();
+      });
+    },
+    initBottomL3(oip = 0) {
+      const chartIns = echarts.init(document.getElementById("bottomL3"));
+      chartIns.setOption(
+        this.generateGaugeOption({
+          color: ["f3c128", "f3c128"],
+          bgColor: "f0eace",
+          name: "",
+          value: parseInt(oip * 100),
+          limit: 100,
+          unit: "Bar",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        chartIns && chartIns.resize();
+      });
+    },
+    initBottomR1(oip = 0) {
+      const chartIns = echarts.init(document.getElementById("bottomR1"));
+      chartIns.setOption(
+        this.generateGaugeOption({
+          color: ["f3c128", "f3c128"],
+          bgColor: "f0eace",
+          name: "",
+          value: parseInt(oip * 100),
+          limit: 100,
+          unit: "Bar",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        chartIns && chartIns.resize();
+      });
+    },
+    initBottomR2(ov = 0) {
+      const chartIns = echarts.init(document.getElementById("bottomR2"));
+      chartIns.setOption(
+        this.generateGaugeOption({
+          color: ["1860b1", "1860b1"],
+          bgColor: "c2d6ec",
+          name: "",
+          value: parseInt(ov * 100),
+          limit: 100,
+          unit: "CP",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        chartIns && chartIns.resize();
+      });
+    },
+    initBottomR3(owc = 0) {
+      const chartIns = echarts.init(document.getElementById("bottomR3"));
+      chartIns.setOption(
+        this.generateGaugeOption({
+          color: ["0ec6c4", "0ec6c4"],
+          bgColor: "aef1f5",
+          name: "",
+          value: parseInt(owc * 100),
+          limit: 100,
+          unit: "%",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        chartIns && chartIns.resize();
+      });
+    },
+    generateGaugeOption(
+      option = {
+        color: ["0DDF7A"],
+        bgColor: "fff",
+        name: "",
+        value: 0,
+        limit: 1,
+      }
+    ) {
+      return merge(
+        {
+          series: [
+            {
+              type: "gauge",
+              center: ["50%", "60%"],
+              startAngle: 220,
+              endAngle: -40,
+              min: 0,
+              max: option.limit,
+              splitNumber: 12,
+              progress: {
+                show: true,
+                width: 20,
+                itemStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0.8,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "#" + option.color[1], // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: "#" + option.color[0], // 100% 处的颜色
+                      },
+                    ],
 
                     global: false,
                   },
@@ -1090,23 +1315,27 @@ export default {
 }
 
 .scroll-text-wrapper {
-    border: 1px solid #ff0000b5;
-    background-color: #eb16161a;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: .8rem;
-    position: relative;
-    overflow: hidden;
-    .scroll-inner {
-        position: absolute;
-        width: 100%;
-        animation: scrollAnimation 10s linear infinite;
-    }
+  border: 1px solid #ff0000b5;
+  background-color: #eb16161a;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.8rem;
+  position: relative;
+  overflow: hidden;
+  .scroll-inner {
+    position: absolute;
+    width: 100%;
+    animation: scrollAnimation 10s linear infinite;
+  }
 }
 
 @keyframes scrollAnimation {
-    0% { left: 100%; }
-    100% { left: -100%; }
+  0% {
+    left: 100%;
+  }
+  100% {
+    left: -100%;
+  }
 }
 </style>