From 8023ed1000b07a9ccfbefdfd4575b1d4ff4e1e48 Mon Sep 17 00:00:00 2001
From: zhangjunwen <zhangjunwen@inspur.com>
Date: Wed, 17 Apr 2024 17:55:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E9=A6=96=E9=A1=B5=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 zfipc-ui/src/views/zf/bigscreen/bigscreen.vue | 6485 +++++++++++++++++
 zfipc-ui/src/views/zf/zgdgBottom/index.vue    |    2 +-
 zfipc-ui/src/views/zf/zgdgTop/index.vue       |    2 +-
 3 files changed, 6487 insertions(+), 2 deletions(-)
 create mode 100644 zfipc-ui/src/views/zf/bigscreen/bigscreen.vue

diff --git a/zfipc-ui/src/views/zf/bigscreen/bigscreen.vue b/zfipc-ui/src/views/zf/bigscreen/bigscreen.vue
new file mode 100644
index 0000000..23bf283
--- /dev/null
+++ b/zfipc-ui/src/views/zf/bigscreen/bigscreen.vue
@@ -0,0 +1,6485 @@
+<template>
+  <el-tabs
+    v-model="activeName"
+    type="border-card"
+    @tab-click="handleTabsClick"
+  >
+    <el-tab-pane
+      label="超压底缸加压液压系统"
+      name="bottomCyl"
+    >
+      <div class="test-screen-wrapper background-frame">
+        <el-row class="first-row">
+          <el-col
+            :span="11"
+            class="second-col"
+            style="height: 100%;"
+          >
+            <el-container
+              class="container"
+              style="height: 100%;"
+            >
+              <el-header class="header">ZFSC4超压平衡缸P/Q特性</el-header>
+              <el-main class="main">
+                <el-row style="height: 50%">
+                  <el-col
+                    :span="8"
+                    id="cdcjyylqx"
+                    style="height: 100%"
+                  ></el-col>
+                  <el-col
+                    :span="4"
+                    class="dataCol"
+                  >
+                    <div class="dataDiv">
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('driven_soft_bond_press'
+                        ,'传动侧软辊合辊压力','bar')"
+                        >软辊合辊压力</span><span class="font-size-16">{{dsrghgyl}}</span><span class="font-size-8">bar</span></div>
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('driven_soft_act_press'
+                        ,'传动侧软辊加压压力','bar')"
+                        >软辊加压压力</span><span class="font-size-16">{{dsrgjyyl}}</span><span class="font-size-8">bar</span></div>
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('driven_soft_real_press'
+                        ,'传动侧软辊实际压力','bar')"
+                        >软辊实际压力</span><span class="font-size-16">{{dsrgsjyl}}</span><span class="font-size-8">bar</span></div>
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('driven_hot_bond_press'
+                        ,'传动侧热辊合辊压力','bar')"
+                        >热辊合辊压力</span><span class="font-size-16">{{dsreghgyl}}</span><span class="font-size-8">bar</span></div>
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('driven_hot_act_press'
+                        ,'传动侧热辊加压压力','bar')"
+                        >热辊加压压力</span><span class="font-size-16">{{dsregjyyl}}</span><span class="font-size-8">bar</span></div>
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('driven_hot_real_press'
+                        ,'传动侧热辊实际压力','bar')"
+                        >热辊实际压力</span><span class="font-size-16">{{dsregsjyl}}</span><span class="font-size-8">bar</span></div>
+                    </div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    id="cdcllbhqx"
+                    style="height: 100%"
+                  ></el-col>
+                  <el-col
+                    :span="4"
+                    class="dataCol"
+                  >
+                    <div class="dataDiv">
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('driven_soft_flw'
+                        ,'传动侧软辊流量','L/min')"
+                        >软辊</span><span class="font-size-16">{{cdcrgll}}</span><span class="font-size-8">L/min</span></div>
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('driven_hot_flw'
+                        ,'传动侧热辊流量','L/min')"
+                        >热辊</span><span class="font-size-16">{{cdcregll}}</span><span class="font-size-8">L/min</span></div>
+                    </div>
+                  </el-col>
+                </el-row>
+                <el-row style="height: 50%">
+                  <el-col
+                    :span="8"
+                    id="czcjyylqx"
+                    style="height: 100%"
+                  ></el-col>
+                  <el-col
+                    :span="4"
+                    class="dataCol"
+                  >
+                    <div class="dataDiv">
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('opr_soft_bond_press'
+                        ,'操作侧软辊合辊压力','bar')"
+                        >软辊合辊压力</span><span class="font-size-16">{{tsrghgyl}}</span><span class="font-size-8">bar</span></div>
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('opr_soft_act_press'
+                        ,'操作侧软辊加压压力','bar')"
+                        >软辊加压压力</span><span class="font-size-16">{{tsrgjyyl}}</span><span class="font-size-8">bar</span></div>
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('opr_soft_real_press'
+                        ,'操作侧软辊实际压力','bar')"
+                        >软辊实际压力</span><span class="font-size-16">{{tsrgsjyl}}</span><span class="font-size-8">bar</span></div>
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('opr_hot_bond_press'
+                        ,'操作侧热辊合辊压力','bar')"
+                        >热辊合辊压力</span><span class="font-size-16">{{tsreghgyl}}</span><span class="font-size-8">bar</span></div>
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('opr_hot_act_press'
+                        ,'操作侧热辊加压压力','bar')"
+                        >热辊加压压力</span><span class="font-size-16">{{tsregjyyl}}</span><span class="font-size-8">bar</span></div>
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('opr_hot_real_press'
+                        ,'操作侧热辊实际压力','bar')"
+                        >热辊实际压力</span><span class="font-size-16">{{tsregsjyl}}</span><span class="font-size-8">bar</span></div>
+                    </div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    id="czcllbhqx"
+                    style="height: 100%"
+                  ></el-col>
+                  <el-col
+                    :span="4"
+                    class="dataCol"
+                  >
+                    <div class="dataDiv">
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('opr_soft_flw'
+                        ,'操作侧软辊流量','L/min')"
+                        >软辊</span><span class="font-size-16">{{czcrgll}}</span><span class="font-size-8">L/min</span></div>
+                      <div><span
+                          class="font-size-10"
+                          @click="trendClick('opr_hot_flw'
+                        ,'操作侧热辊流量','L/min')"
+                        >热辊</span><span class="font-size-16">{{czcregll}}</span><span class="font-size-8">L/min</span></div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="sjyltxWarning"></lbCompents> -->
+                <div
+                  v-if="sjyltxWarning.length > 0"
+                  class="warn"
+                > <router-link to="/detection/alarm/record">{{sjyltxWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+          <el-col
+            :span="7"
+            class="first-col"
+            style="height: 100%;"
+          >
+            <el-container
+              class="container"
+              style="height: 100%;"
+            >
+              <el-header class="header">ZFSC4超压底缸加压液压系统主参数</el-header>
+              <el-main class="main">
+                <el-row style="height: 50%">
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="cylxtyl"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#26DE86"><span
+                        @click="trendClick('sys_press'
+                        ,'系统压力','bar')"
+                        style='cursor:pointer;'
+                      >系统压力</span></div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="cylxtyw"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#109CFB"><span
+                        @click="trendClick('sys_temp'
+                        ,'系统液温','℃')"
+                        style='cursor:pointer;'
+                      >系统液温</span></div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    style="height: 100%;"
+                  >
+                    <el-col
+                      :span="10"
+                      style="height: 90%;"
+                    >
+                      <div
+                        id="cylxtywei"
+                        style="height: 100%;width: 100%;margin-left:40%"
+                      ></div>
+                    </el-col>
+                    <el-col
+                      :span="14"
+                      style="height: 90%;"
+                    >
+                      <!--                  <div
+                      class="dataCol1"
+                    >-->
+                      <div style="position: absolute;top: 12%;">
+                        <div class="font-size-10">当前值<span class="yeweiSpan font-size-16">{{ cylxtywei }}</span></div>
+                        <div class="font-size-10">初始值<span class="yeweiSpan font-size-16">{{ cylxtyweicsz }}</span></div>
+                        <div class="font-size-10">最小值<span class="yeweiSpan font-size-16">{{ cylxtyweimin }}</span></div>
+                        <div class="font-size-10">最大值<span class="yeweiSpan font-size-16">{{ cylxtyweimax }}</span></div>
+                      </div>
+                      <!--                  </div>-->
+                    </el-col>
+
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#109CFB;position:revert;z-index: 999;top:-110%;"><span
+                        @click="trendClick('sys_level'
+                        ,'系统液位','cP')"
+                        style='cursor:pointer;'
+                      >系统液位(CP)</span></div>
+                  </el-col>
+
+                </el-row>
+                <el-row style="height: 50%">
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="bscll"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#2ACDDE"><span
+                        @click="trendClick('sys_flw'
+                        ,'泵输出流量','L/min')"
+                        style='cursor:pointer;'
+                      >泵输出流量</span></div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="cylscxl"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#C010FB">输出效率</div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="cylzdjsjgl"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#844AFF">主电机实际功率</div>
+                  </el-col>
+                </el-row>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="mainWarning"></lbCompents> -->
+                <div
+                  v-if="mainWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{mainWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+          <el-col
+            :span="6"
+            class="third-col"
+            style="height: 100%;"
+          >
+            <el-container
+              class="container"
+              style="height: 100%;"
+            >
+              <el-header class="header">系统状态信息</el-header>
+              <el-main class="main">
+                <div style="text-align: center;height: 10%;padding-top: 2%;">
+                  <!-- <el-col
+                  :span="12"
+                  style="height: 100%"
+                >电机总耗电量<span class="numSpan">{{powerConsumption}}</span>度</el-col> -->
+                  <div
+                    :span="24"
+                    style="height: 100%;cursor:pointer;"
+                    @click="trendClick('sys_cur'
+                        ,'电机电流','A')"
+                  >电机实时电流<span class="numSpan">{{cylzdjdl}}</span>A</div>
+                </div>
+                <div
+                  id="cylzdjdl"
+                  style="height: 90%"
+                ></div>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="sysecWarning"></lbCompents> -->
+                <div
+                  v-if="sysecWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{sysecWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+        </el-row>
+        <el-row class="second-row">
+          <el-col
+            :span="11"
+            class="first-col"
+            style="height: 100%;"
+          >
+            <el-container
+              class="container"
+              style="height: 100%;"
+            >
+              <el-header class="header">ZFSC4超压底缸加压压区P/Q特性</el-header>
+              <el-main class="main">
+                <el-row style="height: 50%">
+                  <el-col
+                    :span="8"
+                    id="cdcylbhqx"
+                    style="height: 100%"
+                  ></el-col>
+                  <el-col
+                    :span="4"
+                    class="dataCol"
+                  >
+                    <div class="dataDiv">
+                      <div
+                        @click="trendClick('driven_bottom_set_press'
+                        ,'传动侧底缸加压设定压力','bar')"
+                        class="font-size-10"
+                      >底缸加压设定压力</div>
+                      <div><span class="font-size-16">{{dgcdcblsff}}</span><span class="font-size-8">bar</span>
+                      </div>
+                      <div
+                        @click="trendClick('driven_bottom_press'
+                        ,'传动侧底缸加压实际压力','bar')"
+                        class="font-size-10"
+                      >底缸加压实际压力</div>
+                      <div><span class="font-size-16">{{dgcdcbljyf}}</span><span class="font-size-8">bar</span>
+                      </div>
+                    </div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    id="czcylbhqx"
+                    style="height: 100%"
+                  ></el-col>
+                  <el-col
+                    :span="4"
+                    class="dataCol"
+                  >
+                    <div class="dataDiv">
+                      <div
+                        @click="trendClick('opr_bottom_set_press'
+                        ,'操作侧底缸加压设定压力','bar')"
+                        class="font-size-10"
+                      >底缸加压设定压力</div>
+                      <div><span class="font-size-16">{{dgczcblsff}}</span><span class="font-size-8">bar</span>
+                      </div>
+                      <div
+                        @click="trendClick('opr_bottom_press'
+                        ,'操作侧底缸加压实际压力','bar')"
+                        class="font-size-10"
+                      >底缸加压实际压力</div>
+                      <div><span class="font-size-16">{{dgczcbljyf}}</span><span class="font-size-8">bar</span></div>
+                    </div>
+                  </el-col>
+                </el-row>
+                <el-row style="height: 50%">
+                  <el-col
+                    :span="8"
+                    id="cdcdgwytx"
+                    style="height: 100%"
+                  ></el-col>
+                  <el-col
+                    :span="4"
+                    class="dataCol"
+                  >
+                    <div class="dataDiv">
+                      <div
+                        @click="trendClick('driven_bottom_dis'
+                        ,'传动侧底缸位移','mm')"
+                        class="font-size-10"
+                      >底缸实际位置</div>
+                      <div><span class="font-size-16">{{dgcdcygwy}}</span><span class="font-size-8">mm</span></div>
+                    </div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    id="czcdgwytx"
+                    style="height: 100%"
+                  ></el-col>
+                  <el-col
+                    :span="4"
+                    class="dataCol"
+                  >
+                    <div class="dataDiv">
+                      <div
+                        @click="trendClick('opr_bottom_dis'
+                        ,'操作侧侧底缸位移','mm')"
+                        class="font-size-10"
+                      >底缸实际位置</div>
+                      <div><span class="font-size-16">{{dgczcygwy}}</span><span class="font-size-8">mm</span></div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="llyltxWarning"></lbCompents> -->
+                <div
+                  v-if="llyltxWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{llyltxWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+          <el-col
+            :span="7"
+            class="second-col"
+            style="height: 100%;"
+          >
+            <el-container
+              class="container"
+              style="height: 100%;"
+            >
+              <el-header class="header">ZFSC4超压底缸加压系统油品特性</el-header>
+              <el-main class="main">
+                <el-row style="height: 40%">
+                  <el-col
+                    :span="12"
+                    style="height: 100%;"
+                  >
+                    <div
+                      id="cyldlnd"
+                      style="width: 100%;height: 100%;cursor:pointer;"
+                      @click="trendClick('visc'
+                        ,'油品粘度','')"
+                    ></div>
+                  </el-col>
+                  <el-col
+                    :span="12"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="cylxdsd"
+                      style="width: 100%;height: 100%;cursor:pointer;"
+                      @click="trendClick('oil_water'
+                          ,'油品湿度','%')"
+                    ></div>
+                  </el-col>
+                </el-row>
+                <el-row style="height: 10%;padding-top: 3%;">
+                  <el-col
+                    :span="3"
+                    style="text-align: right;;height: 100%"
+                  ><span
+                      @click="trendClick('gran4'
+                        ,'油液颗粒度（4um）','PM')"
+                      style="cursor:pointer;"
+                    >4um</span></el-col>
+                  <el-col :span="3">
+                    <span class="numCol">{{ cylyykld4 }}</span>
+                  </el-col>
+                  <el-col
+                    :span="3"
+                    style="text-align: right;height: 100%"
+                  ><span
+                      @click="trendClick('gran6'
+                        ,'油液颗粒度（6um）','PM')"
+                      style="cursor:pointer;"
+                    >6um</span></el-col><el-col :span="3">
+                    <span class="numCol">{{ cylyykld6 }}</span>
+                  </el-col>
+                  <el-col
+                    :span="3"
+                    style="text-align: right;height: 100%"
+                  ><span
+                      @click="trendClick('gran14'
+                        ,'油液颗粒度（14um）','PM')"
+                      style="cursor:pointer;"
+                    >14um</span></el-col><el-col :span="3">
+                    <span class="numCol">{{ cylyykld14 }}</span>
+                  </el-col>
+                  <el-col
+                    :span="3"
+                    style="text-align: right;height: 100%"
+                  ><span
+                      @click="trendClick('gran21'
+                        ,'油液颗粒度（21um）','PM')"
+                      style="cursor:pointer;"
+                    >21um</span></el-col><el-col :span="3">
+                    <span class="numCol">{{ cylyykld21 }}</span>
+                  </el-col>
+                </el-row>
+
+                <el-row style="height: 50%">
+                  <el-col
+                    :span="24"
+                    id="cylyykldtx"
+                    style="height: 100%"
+                  ></el-col>
+
+                </el-row>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="ylkldWarning"></lbCompents> -->
+                <div
+                  v-if="ylkldWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{ylkldWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+          <el-col
+            :span="6"
+            class="third-col"
+            style="height: 100%;"
+          >
+            <el-container
+              class="container"
+              style="height: 100%;"
+            >
+              <el-header class="header">系统状态</el-header>
+              <el-main class="main">
+                <div class="device-card-content">
+                  <el-row class="device-card-content-item">
+                    <el-col
+                      :span="8"
+                      style="height:100%"
+                    >
+                      <div class="device-card-content-label">
+                        <span style="color: #ccc">停机维护</span>
+                      </div>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="15"
+                      class="device-card-content-value"
+                    >
+                      <span style="color: #80D1FF;margin:auto">{{this.sysStatus.shutdownTime}}</span></el-col>
+                  </el-row>
+                  <el-row class="device-card-content-item">
+                    <el-col
+                      :span="8"
+                      style="height:100%"
+                    >
+                      <div class="device-card-content-label">
+                        <span style="color: #ccc">待机</span>
+                      </div>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="15"
+                      class="device-card-content-value"
+                    > <span style="color: #80D1FF;margin:auto">{{this.sysStatus.standbyTime}}</span></el-col>
+                  </el-row>
+                  <el-row class="device-card-content-item">
+                    <el-col
+                      :span="8"
+                      style="height:100%"
+                    >
+                      <div class="device-card-content-label">
+                        <span style="color: #ccc">试运行</span>
+                      </div>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="15"
+                      class="device-card-content-value"
+                    > <span style="color: #80D1FF;margin:auto">{{this.sysStatus.trialTime}}</span></el-col>
+                  </el-row>
+                  <el-row class="device-card-content-item">
+                    <el-col
+                      :span="8"
+                      style="height:100%"
+                    >
+                      <div class="device-card-content-label">
+                        <span style="color: #ccc">正常生产</span>
+                      </div>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="15"
+                      class="device-card-content-value"
+                    > <span style="color: #80D1FF;margin:auto">{{this.sysStatus.normalTime}}</span></el-col>
+                  </el-row>
+                  <el-row class="device-card-content-item ">
+                    <div style="background-color: #0b2d57;height: 70%;">
+                      <el-col
+                        :span="9"
+                        class="middle-class"
+                      >
+                        <div style="padding-left: 20%;">
+                          <span style="color: #ccc;">有效开机率</span>
+                        </div>
+                      </el-col>
+                      <el-col
+                        :span="12"
+                        class="middle-class"
+                      >
+                        <div class="my-progress-background">
+                          <div
+                            class="my-progress"
+                            :style="{width:percentage+'%'}"
+                          ></div>
+                        </div>
+                      </el-col>
+                      <el-col
+                        :span="3"
+                        class="middle-class"
+                      ><span class="my-percentage">{{ percentage }}%</span></el-col>
+                    </div>
+                  </el-row>
+                </div>
+                <div class="device-card-bottom">
+                  <el-row style="height:5%;width:100%"></el-row>
+                  <el-row class="device-bottom-row">
+                    <el-col
+                      :span="3"
+                      style="height:100%"
+                    >
+                      <div class="device-icon"></div>
+                    </el-col>
+                    <el-col
+                      :span="21"
+                      style="height:100%;display: flex;"
+                    >
+                      <span style="font-size: 18px;font-family: PingFang SC-Bold, PingFang SC;font-weight: 400;color: #FFFFFF;margin:auto 0">监测信息</span>
+                    </el-col>
+                  </el-row>
+                  <el-row class="device-bottom-row">
+                    <el-col
+                      :span="12"
+                      style="height:100%"
+                      class="bottom-line-solid"
+                    >
+                      <el-col
+                        :span="9"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-label">名称</span>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-value">{{ this.monitorInfo.equipName }}</span>
+                      </el-col>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="11"
+                      style="height:100%"
+                      class="bottom-line-solid"
+                    >
+                      <el-col
+                        :span="9"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-label">型号</span>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-value">{{ this.monitorInfo.equipNum }}</span>
+                      </el-col>
+                    </el-col>
+                  </el-row>
+                  <el-row class="device-bottom-row">
+                    <el-col
+                      :span="12"
+                      style="height:100%"
+                      class="bottom-line-solid"
+                    >
+                      <el-col
+                        :span="9"
+                        style="height:100%"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-label">时间</span>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        style="height:100%"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-value">{{ this.monitorInfo.nowTime }}</span>
+                      </el-col>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="11"
+                      style="height:100%"
+                      class="bottom-line-solid"
+                    >
+                      <el-col
+                        :span="9"
+                        style="height:100%"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-label">在线时间</span>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        style="height:100%"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-value">{{ this.monitorInfo.onlineTime }}</span>
+                      </el-col>
+                    </el-col>
+                  </el-row>
+                  <el-row class="device-bottom-row">
+                    <el-col
+                      :span="4"
+                      style="height:100%"
+                      class="bottom-line-solid col-flex"
+                    >
+                      <span class="device-bottom-label">起始时间</span>
+                    </el-col>
+                    <el-col
+                      :span="20"
+                      style="height:100%"
+                      class="bottom-line-solid col-flex"
+                    >
+                      <span
+                        class="device-bottom-value"
+                        style="padding-left:2%"
+                      >{{ this.monitorInfo.startTime }}</span>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+              </el-footer>
+            </el-container>
+          </el-col>
+        </el-row>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane
+      label="可控中高辊顶辊液压系统"
+      name="topScoller"
+    >
+      <div class="test-screen-wrapper background-frame">
+        <el-row class="first-row">
+          <el-col
+            :span="10"
+            class="first-col"
+            style="height:100%"
+          >
+            <el-container
+              class="container"
+              style="height:100%"
+            >
+              <el-header class="header">ZFSC4中高顶辊液压压区P/Q特性</el-header>
+              <el-main class="main">
+                <el-row style="height: 20%;margin:0 3%;">
+                  <el-row style="height: 50%">
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        class="font-size-14"
+                        @click="trendClick('press1'
+                      ,'一压区压力','bar')"
+                      >一压区</span>
+                      <span class="numDiv font-size-18">{{sjylData[0]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press2'
+                      ,'二压区压力','bar')"
+                        class="font-size-14"
+                      >二压区</span>
+                      <span class="numDiv font-size-18">{{sjylData[1]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press3'
+                      ,'三压区压力','bar')"
+                        class="font-size-14"
+                      >三压区</span>
+                      <span class="numDiv font-size-18">{{sjylData[2]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press4'
+                      ,'四压区压力','bar')"
+                        class="font-size-14"
+                      >四压区</span>
+                      <span class="numDiv font-size-18">{{sjylData[2]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press5'
+                      ,'五压区压力','bar')"
+                        class="font-size-14"
+                      >五压区</span>
+                      <span class="numDiv font-size-18">{{sjylData[4]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press6'
+                      ,'六压区压力','bar')"
+                        class="font-size-14"
+                      >六压区</span>
+                      <span class="numDiv font-size-18">{{sjylData[5]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                  </el-row>
+                  <el-row style="height: 50%">
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press7'
+                      ,'七压区压力','bar')"
+                        class="font-size-14"
+                      >七压区</span>
+                      <span class="numDiv font-size-18">{{sjylData[6]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press8'
+                      ,'八压区压力','bar')"
+                        class="font-size-14"
+                      >八压区</span>
+                      <span class="numDiv font-size-18">{{sjylData[7]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press9'
+                      ,'九压区压力','bar')"
+                        class="font-size-14"
+                      >九压区</span>
+                      <span class="numDiv font-size-18">{{sjylData[8]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="text-align: center;height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press10'
+                      ,'十压区压力','bar')"
+                        class="font-size-14"
+                      >十压区</span>
+                      <span class="numDiv font-size-18">{{sjylData[9]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="8"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press11'
+                      ,'十一压区压力','bar')"
+                        class="font-size-14"
+                      >十一压区</span>
+                      <span class="numDiv font-size-18">{{sjylData[10]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                  </el-row>
+                </el-row>
+                <el-row style="height: 80%">
+                  <el-col
+                    :span="24"
+                    id="sjyltx"
+                    style="height: 100%"
+                  ></el-col>
+                </el-row>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="sjyltxWarning"></lbCompents> -->
+                <div
+                  v-if="sjyltxWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{sjyltxWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+          <el-col
+            :span="7"
+            class="second-col"
+            style="height:100%"
+          >
+            <el-container
+              class="container"
+              style="height:100%"
+            >
+              <el-header class="header">ZFSC4中高顶辊液压系统主参数</el-header>
+              <el-main class="main">
+                <el-row style="height: 50%">
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="xtyl"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#26DE86"><span
+                        @click="trendClick('sys_press'
+                      ,'系统压力','bar')"
+                        style='cursor:pointer;'
+                      >系统压力</span></div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="xtyw"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#109CFB"><span
+                        @click="trendClick('sys_temp'
+                      ,'系统液温','℃')"
+                        style='cursor:pointer;'
+                      >系统液温</span></div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    style="height: 100%;"
+                  >
+                    <div
+                      id="xtywei"
+                      style="height: 100%;position:relative;z-index: 99;"
+                    ></div>
+                    <div
+                      class="dataCol1"
+                      style="font-size:12px;height:100%;position:relative;z-index: 999;top:-100%;left:20%;width: 80%;"
+                    >
+                      <div>
+                        <div>当前值<span class="yeweiSpan">{{ xtywei }}</span></div>
+                        <div>初始值<span class="yeweiSpan">{{ xtyweicsz }}</span></div>
+                        <div>最小值<span class="yeweiSpan">{{ xtyweimin }}</span></div>
+                        <div>最大值<span class="yeweiSpan">{{ xtyweimax }}</span></div>
+                      </div>
+                    </div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#109CFB;position:relative;z-index: 999;top:-110%;"><span
+                        @click="trendClick('sys_level'
+                      ,'系统液位','cP')"
+                        style='cursor:pointer;'
+                      >系统液位(CP)</span></div>
+                  </el-col>
+
+                </el-row>
+                <el-row style="height: 50%">
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="zbscll"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#2ACDDE"><span
+                        @click="trendClick('sys_flw'
+                      ,'泵输出流量','L/min')"
+                        style='cursor:pointer;'
+                      >泵输出流量</span></div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="scxl"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#C010FB">输出效率</div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="zdjsjgl"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#844AFF">主电机实际功率</div>
+                  </el-col>
+                </el-row>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="mainWarning"></lbCompents> -->
+                <div
+                  v-if="mainWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{mainWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+          <el-col
+            :span="7"
+            class="third-col"
+            style="height:100%"
+          >
+            <el-container
+              class="container"
+              style="height:100%"
+            >
+              <el-header class="header">系统状态信息</el-header>
+              <el-main class="main">
+                <div style="text-align: center;height: 10%;padding-top: 2%;">
+                  <div
+                    :span="12"
+                    style="height: 100%;cursor:pointer;"
+                    @click="trendClick('sys_cur'
+                      ,'电机电流','A')"
+                  >电机实时电流<span class="numSpan">{{zdjdl}}</span>A</div>
+                </div>
+                <div
+                  id="zdjdl"
+                  style="height: 90%"
+                ></div>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="sysecWarning"></lbCompents> -->
+                <div
+                  v-if="sysecWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{sysecWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+        </el-row>
+        <el-row class="second-row">
+          <el-col
+            :span="10"
+            class="first-col"
+            style="height:100%"
+          >
+            <el-container
+              class="container"
+              style="height:100%"
+            >
+              <el-header class="header">ZFSC4中高顶辊液压压区P/Q特性</el-header>
+              <el-main class="main">
+                <el-row style="height: 20%;margin:0 3%;">
+                  <el-row style="height: 50%">
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw1'
+                      ,'一压区流量','L/min')"
+                        class="font-size-14"
+                      >一压区</span>
+                      <span class="numDiv font-size-18">{{llylData[0]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw2'
+                      ,'二压区流量','L/min')"
+                        class="font-size-14"
+                      >二压区</span>
+                      <span class="numDiv font-size-18">{{llylData[1]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw3'
+                      ,'三压区流量','L/min')"
+                        class="font-size-14"
+                      >三压区</span>
+                      <span class="numDiv font-size-18">{{llylData[2]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw4'
+                      ,'四压区流量','L/min')"
+                        class="font-size-14"
+                      >四压区</span>
+                      <span class="numDiv font-size-18">{{llylData[3]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw5'
+                      ,'五压区流量','L/min')"
+                        class="font-size-14"
+                      >五压区</span>
+                      <span class="numDiv font-size-18">{{llylData[4]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw6'
+                      ,'六压区流量','L/min')"
+                        class="font-size-14"
+                      >六压区</span>
+                      <span class="numDiv font-size-18">{{llylData[5]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                  </el-row>
+                  <el-row style="height: 50%">
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw7'
+                      ,'七压区流量','L/min')"
+                        class="font-size-14"
+                      >七压区</span>
+                      <span class="numDiv font-size-18">{{llylData[6]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw8'
+                      ,'八压区流量','L/min')"
+                        class="font-size-14"
+                      >八压区</span>
+                      <span class="numDiv font-size-18">{{llylData[7]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw9'
+                      ,'九压区流量','L/min')"
+                        class="font-size-14"
+                      >九压区</span>
+                      <span class="numDiv font-size-18">{{llylData[8]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw10'
+                      ,'十压区流量','L/min')"
+                        class="font-size-14"
+                      >十压区</span>
+                      <span class="numDiv font-size-18">{{llylData[9]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="8"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw11'
+                      ,'十一压区流量','L/min')"
+                        class="font-size-14"
+                      >十一压区</span>
+                      <span class="numDiv font-size-18">{{llylData[10]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                  </el-row>
+                </el-row>
+                <el-row style="height: 80%">
+                  <el-col
+                    :span="24"
+                    id="llyltx"
+                    style="height: 100%"
+                  ></el-col>
+                </el-row>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="llyltxWarning"></lbCompents> -->
+                <div
+                  v-if="llyltxWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{llyltxWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+          <el-col
+            :span="7"
+            class="second-col"
+            style="height:100%"
+          >
+            <el-container
+              class="container"
+              style="height:100%"
+            >
+              <el-header class="header">ZFSC4超压底缸加压系统油品特性</el-header>
+              <el-main class="main">
+                <el-row style="height: 40%">
+                  <el-col
+                    :span="12"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="dlnd"
+                      style="width: 100%;height: 100%;cursor:pointer"
+                      @click="trendClick('visc'
+                      ,'油品粘度','')"
+                    ></div>
+                  </el-col>
+                  <el-col
+                    :span="12"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="xdsd"
+                      style="width: 100%;height: 100%;cursor:pointer"
+                      @click="trendClick('oil_water'
+                        ,'油品湿度','%')"
+                    ></div>
+                  </el-col>
+                </el-row>
+                <el-row style="height: 10%;padding-top: 3%;">
+                  <el-col
+                    :span="3"
+                    style="text-align: right;height: 100%"
+                  ><span
+                      @click="trendClick('gran4'
+                      ,'油液颗粒度（4um）','PM')"
+                      style="cursor:pointer;"
+                    >4um</span></el-col>
+                  <el-col :span="3">
+                    <span class="numCol">{{ yykld4 }}</span>
+                  </el-col>
+                  <el-col
+                    :span="3"
+                    style="text-align: right;height: 100%"
+                  ><span
+                      @click="trendClick('gran6'
+                      ,'油液颗粒度（6um）','PM')"
+                      style="cursor:pointer;"
+                    >6um</span></el-col><el-col :span="3">
+                    <span class="numCol">{{ yykld6 }}</span>
+                  </el-col>
+                  <el-col
+                    :span="3"
+                    style="text-align: right;height: 100%"
+                  ><span
+                      @click="trendClick('gran14'
+                      ,'油液颗粒度（14um）','PM')"
+                      style="cursor:pointer;"
+                    >14um</span></el-col><el-col :span="3">
+                    <span class="numCol">{{ yykld14 }}</span>
+                  </el-col>
+                  <el-col
+                    :span="3"
+                    style="text-align: right;height: 100%"
+                  ><span
+                      @click="trendClick('gran21'
+                      ,'油液颗粒度（21um）','PM')"
+                      style="cursor:pointer;"
+                    >21um</span></el-col><el-col :span="3">
+                    <span class="numCol">{{ yykld21 }}</span>
+                  </el-col>
+                </el-row>
+
+                <el-row style="height: 50%">
+                  <el-col
+                    :span="24"
+                    id="yykldtx"
+                    style="height: 100%"
+                  ></el-col>
+
+                </el-row>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="ylkldWarning"></lbCompents> -->
+                <div
+                  v-if="ylkldWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{ylkldWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+          <el-col
+            :span="7"
+            class="third-col"
+            style="height:100%"
+          >
+            <el-container
+              class="container"
+              style="height:100%"
+            >
+              <el-header class="header">系统状态</el-header>
+              <el-main class="main">
+                <div class="device-card-content">
+                  <el-row class="device-card-content-item">
+                    <el-col
+                      :span="8"
+                      style="height:100%"
+                    >
+                      <div class="device-card-content-label">
+                        <div class="device-image1"></div>
+                        <span style="color: #ccc">停机维护</span>
+                      </div>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="15"
+                      class="device-card-content-value"
+                    >
+                      <span style="color: #80D1FF;margin:auto">{{this.sysStatus.shutdownTime}}</span></el-col>
+                  </el-row>
+                  <el-row class="device-card-content-item">
+                    <el-col
+                      :span="8"
+                      style="height:100%"
+                    >
+                      <div class="device-card-content-label">
+                        <div class="device-image2"></div>
+                        <span style="color: #ccc">待机</span>
+                      </div>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="15"
+                      class="device-card-content-value"
+                    > <span style="color: #80D1FF;margin:auto">{{this.sysStatus.standbyTime}}</span></el-col>
+                  </el-row>
+                  <el-row class="device-card-content-item">
+                    <el-col
+                      :span="8"
+                      style="height:100%"
+                    >
+                      <div class="device-card-content-label">
+                        <div class="device-image3"></div>
+                        <span style="color: #ccc">试运行</span>
+                      </div>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="15"
+                      class="device-card-content-value"
+                    > <span style="color: #80D1FF;margin:auto">{{this.sysStatus.trialTime}}</span></el-col>
+                  </el-row>
+                  <el-row class="device-card-content-item">
+
+                    <el-col
+                      :span="8"
+                      style="height:100%"
+                    >
+                      <div class="device-card-content-label">
+                        <div class="device-image4"></div>
+                        <span style="color: #ccc">正常生产</span>
+                      </div>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="15"
+                      class="device-card-content-value"
+                    > <span style="color: #80D1FF;margin:auto">{{this.sysStatus.normalTime}}</span></el-col>
+                  </el-row>
+                  <el-row class="device-card-content-item ">
+                    <div style="background-color: #0b2d57;height: 70%;">
+                      <el-col
+                        :span="6"
+                        class="middle-class"
+                      >
+                        <div style="padding-left: 33%;">
+                          <span style="color: #ccc;">有效开机率</span>
+                        </div>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        class="middle-class"
+                      >
+                        <div class="my-progress-background">
+                          <div
+                            class="my-progress"
+                            :style="{width:percentage+'%'}"
+                          ></div>
+                        </div>
+                      </el-col>
+                      <el-col
+                        :span="3"
+                        class="middle-class"
+                      ><span class="my-percentage">{{ percentage }}%</span></el-col>
+                    </div>
+                  </el-row>
+                </div>
+                <div class="device-card-bottom">
+                  <el-row style="height:5%;width:100%"></el-row>
+                  <el-row class="device-bottom-row">
+                    <el-col
+                      :span="3"
+                      style="height:100%"
+                    >
+                      <div class="device-icon"></div>
+                    </el-col>
+                    <el-col
+                      :span="21"
+                      style="height:100%;display: flex;"
+                    >
+                      <span style="font-size: 18px;font-family: PingFang SC-Bold, PingFang SC;font-weight: 400;color: #FFFFFF;margin:auto 0">监测信息</span>
+                    </el-col>
+                  </el-row>
+                  <el-row class="device-bottom-row">
+                    <el-col
+                      :span="12"
+                      style="height:100%"
+                      class="bottom-line-solid"
+                    >
+                      <el-col
+                        :span="9"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-label">名称</span>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-value">{{ this.monitorInfo.equipName }}</span>
+                      </el-col>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="11"
+                      style="height:100%"
+                      class="bottom-line-solid"
+                    >
+                      <el-col
+                        :span="9"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-label">型号</span>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-value">{{ this.monitorInfo.equipNum }}</span>
+                      </el-col>
+                    </el-col>
+                  </el-row>
+                  <el-row class="device-bottom-row">
+                    <el-col
+                      :span="12"
+                      style="height:100%"
+                      class="bottom-line-solid"
+                    >
+                      <el-col
+                        :span="9"
+                        style="height:100%"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-label">时间</span>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        style="height:100%"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-value">{{ this.monitorInfo.nowTime }}</span>
+                      </el-col>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="11"
+                      style="height:100%"
+                      class="bottom-line-solid"
+                    >
+                      <el-col
+                        :span="9"
+                        style="height:100%"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-label">在线时间</span>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        style="height:100%"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-value">{{ this.monitorInfo.onlineTime }}</span>
+                      </el-col>
+                    </el-col>
+                  </el-row>
+                  <el-row class="device-bottom-row">
+                    <el-col
+                      :span="4"
+                      style="height:100%"
+                      class="bottom-line-solid col-flex"
+                    >
+                      <span class="device-bottom-label">起始时间</span>
+                    </el-col>
+                    <el-col
+                      :span="20"
+                      style="height:100%"
+                      class="bottom-line-solid col-flex"
+                    >
+                      <span
+                        class="device-bottom-value"
+                        style="padding-left:2%"
+                      >{{ this.monitorInfo.startTime }}</span>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-main>
+            </el-container>
+          </el-col>
+        </el-row>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane
+      label="可控中高辊底辊液压系统"
+      name="bottomScoller"
+    >
+      <div class="test-screen-wrapper background-frame">
+        <el-row class="first-row">
+          <el-col
+            :span="10"
+            class="first-col"
+            style="height:100%"
+          >
+            <el-container
+              class="container"
+              style="height:100%"
+            >
+              <el-header class="header">ZFSC4中高底辊液压压区P/Q特性</el-header>
+              <el-main class="main">
+                <el-row style="height: 20%;margin:0 3%;">
+                  <el-row style="height: 50%">
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        class="font-size-14"
+                        @click="trendClick('press1'
+                      ,'一压区压力','bar')"
+                      >一压区</span>
+                      <span class="numDiv font-size-18">{{bssjylData[0]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press2'
+                      ,'二压区压力','bar')"
+                        class="font-size-14"
+                      >二压区</span>
+                      <span class="numDiv font-size-18">{{bssjylData[1]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press3'
+                      ,'三压区压力','bar')"
+                        class="font-size-14"
+                      >三压区</span>
+                      <span class="numDiv font-size-18">{{bssjylData[2]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press4'
+                      ,'四压区压力','bar')"
+                        class="font-size-14"
+                      >四压区</span>
+                      <span class="numDiv font-size-18">{{bssjylData[2]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press5'
+                      ,'五压区压力','bar')"
+                        class="font-size-14"
+                      >五压区</span>
+                      <span class="numDiv font-size-18">{{bssjylData[4]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press6'
+                      ,'六压区压力','bar')"
+                        class="font-size-14"
+                      >六压区</span>
+                      <span class="numDiv font-size-18">{{bssjylData[5]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                  </el-row>
+                  <el-row style="height: 50%">
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press7'
+                      ,'七压区压力','bar')"
+                        class="font-size-14"
+                      >七压区</span>
+                      <span class="numDiv font-size-18">{{bssjylData[6]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press8'
+                      ,'八压区压力','bar')"
+                        class="font-size-14"
+                      >八压区</span>
+                      <span class="numDiv font-size-18">{{bssjylData[7]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press9'
+                      ,'九压区压力','bar')"
+                        class="font-size-14"
+                      >九压区</span>
+                      <span class="numDiv font-size-18">{{bssjylData[8]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="text-align: center;height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press10'
+                      ,'十压区压力','bar')"
+                        class="font-size-14"
+                      >十压区</span>
+                      <span class="numDiv font-size-18">{{bssjylData[9]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                    <el-col
+                      :span="8"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('press11'
+                      ,'十一压区压力','bar')"
+                        class="font-size-14"
+                      >十一压区</span>
+                      <span class="numDiv font-size-18">{{bssjylData[10]}}</span>
+                      <span class="font-size-12">bar</span>
+                    </el-col>
+                  </el-row>
+                </el-row>
+                <el-row style="height: 80%">
+                  <el-col
+                    :span="24"
+                    id="bssjyltx"
+                    style="height: 100%"
+                  ></el-col>
+                </el-row>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="sjyltxWarning"></lbCompents> -->
+                <div
+                  v-if="sjyltxWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{sjyltxWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+          <el-col
+            :span="7"
+            class="second-col"
+            style="height:100%"
+          >
+            <el-container
+              class="container"
+              style="height:100%"
+            >
+              <el-header class="header">ZFSC4中高底辊液压系统主参数</el-header>
+              <el-main class="main">
+                <el-row style="height: 50%">
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="bsxtyl"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#26DE86"><span
+                        @click="trendClick('sys_press'
+                      ,'系统压力','bar')"
+                        style='cursor:pointer;'
+                      >系统压力</span></div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="bsxtyw"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#109CFB"><span
+                        @click="trendClick('sys_temp'
+                      ,'系统液温','℃')"
+                        style='cursor:pointer;'
+                      >系统液温</span></div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    style="height: 100%;"
+                  >
+                    <div
+                      id="bsxtywei"
+                      style="height: 100%;position:relative;z-index: 99;"
+                    ></div>
+                    <div
+                      class="dataCol1"
+                      style="font-size:12px;height:100%;position:relative;z-index: 999;top:-100%;left:20%;width: 80%;"
+                    >
+                      <div>
+                        <div>当前值<span class="yeweiSpan">{{ bsxtywei }}</span></div>
+                        <div>初始值<span class="yeweiSpan">{{ bsxtyweicsz }}</span></div>
+                        <div>最小值<span class="yeweiSpan">{{ bsxtyweimin }}</span></div>
+                        <div>最大值<span class="yeweiSpan">{{ bsxtyweimax }}</span></div>
+                      </div>
+                    </div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#109CFB;position:relative;z-index: 999;top:-110%;"><span
+                        @click="trendClick('sys_level'
+                      ,'系统液位','cP')"
+                        style='cursor:pointer;'
+                      >系统液位(CP)</span></div>
+                  </el-col>
+
+                </el-row>
+                <el-row style="height: 50%">
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="bszbscll"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#2ACDDE"><span
+                        @click="trendClick('sys_flw'
+                      ,'泵输出流量','L/min')"
+                        style='cursor:pointer;'
+                      >泵输出流量</span></div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="bsscxl"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#C010FB">输出效率</div>
+                  </el-col>
+                  <el-col
+                    :span="8"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="bszdjsjgl"
+                      style="height: 90%"
+                    ></div>
+                    <div style="height:10%;text-align: center;font-size: 16px;color:#844AFF">主电机实际功率</div>
+                  </el-col>
+                </el-row>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="mainWarning"></lbCompents> -->
+                <div
+                  v-if="mainWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{mainWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+          <el-col
+            :span="7"
+            class="third-col"
+            style="height:100%"
+          >
+            <el-container
+              class="container"
+              style="height:100%"
+            >
+              <el-header class="header">系统状态信息</el-header>
+              <el-main class="main">
+                <div style="text-align: center;height: 10%;padding-top: 2%;">
+                  <div
+                    :span="12"
+                    style="height: 100%;cursor:pointer;"
+                    @click="trendClick('sys_cur'
+                      ,'电机电流','A')"
+                  >电机实时电流<span class="numSpan">{{bszdjdl}}</span>A</div>
+                </div>
+                <div
+                  id="bszdjdl"
+                  style="height: 90%"
+                ></div>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="sysecWarning"></lbCompents> -->
+                <div
+                  v-if="sysecWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{sysecWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+        </el-row>
+        <el-row class="second-row">
+          <el-col
+            :span="10"
+            class="first-col"
+          >
+            <el-container class="container">
+              <el-header class="header">ZFSC4中高底辊液压压区P/Q特性</el-header>
+              <el-main class="main">
+                <el-row style="height: 20%;margin:0 3%;">
+                  <el-row style="height: 50%">
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw1'
+                      ,'一压区流量','L/min')"
+                        class="font-size-14"
+                      >一压区</span>
+                      <span class="numDiv font-size-18">{{bsllylData[0]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw2'
+                      ,'二压区流量','L/min')"
+                        class="font-size-14"
+                      >二压区</span>
+                      <span class="numDiv font-size-18">{{bsllylData[1]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw3'
+                      ,'三压区流量','L/min')"
+                        class="font-size-14"
+                      >三压区</span>
+                      <span class="numDiv font-size-18">{{bsllylData[2]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw4'
+                      ,'四压区流量','L/min')"
+                        class="font-size-14"
+                      >四压区</span>
+                      <span class="numDiv font-size-18">{{bsllylData[3]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw5'
+                      ,'五压区流量','L/min')"
+                        class="font-size-14"
+                      >五压区</span>
+                      <span class="numDiv font-size-18">{{bsllylData[4]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw6'
+                      ,'六压区流量','L/min')"
+                        class="font-size-14"
+                      >六压区</span>
+                      <span class="numDiv font-size-18">{{bsllylData[5]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                  </el-row>
+                  <el-row style="height: 50%">
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw7'
+                      ,'七压区流量','L/min')"
+                        class="font-size-14"
+                      >七压区</span>
+                      <span class="numDiv font-size-18">{{bsllylData[6]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw8'
+                      ,'八压区流量','L/min')"
+                        class="font-size-14"
+                      >八压区</span>
+                      <span class="numDiv font-size-18">{{bsllylData[7]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw9'
+                      ,'九压区流量','L/min')"
+                        class="font-size-14"
+                      >九压区</span>
+                      <span class="numDiv font-size-18">{{bsllylData[8]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="4"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw10'
+                      ,'十压区流量','L/min')"
+                        class="font-size-14"
+                      >十压区</span>
+                      <span class="numDiv font-size-18">{{bsllylData[9]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                    <el-col
+                      :span="8"
+                      style="height: 100%"
+                    >
+                      <span
+                        @click="trendClick('flw11'
+                      ,'十一压区流量','L/min')"
+                        class="font-size-14"
+                      >十一压区</span>
+                      <span class="numDiv font-size-18">{{bsllylData[10]}}</span>
+                      <span class="font-size-12">L/min</span>
+                    </el-col>
+                  </el-row>
+                </el-row>
+                <el-row style="height: 80%">
+                  <el-col
+                    :span="24"
+                    id="bsllyltx"
+                    style="height: 100%"
+                  ></el-col>
+                </el-row>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="llyltxWarning"></lbCompents> -->
+                <div
+                  v-if="llyltxWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{llyltxWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+          <el-col
+            :span="7"
+            class="second-col"
+            style="height:100%"
+          >
+            <el-container
+              class="container"
+              style="height:100%"
+            >
+              <el-header class="header">ZFSC4超压底缸加压系统油品特性</el-header>
+              <el-main class="main">
+                <el-row style="height: 40%">
+                  <el-col
+                    :span="12"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="bsdlnd"
+                      style="width: 100%;height: 100%;cursor:pointer;"
+                      @click="trendClick('visc'
+                      ,'油品粘度','')"
+                    ></div>
+                  </el-col>
+                  <el-col
+                    :span="12"
+                    style="height: 100%"
+                  >
+                    <div
+                      id="bsxdsd"
+                      style="width: 100%;height: 100%;cursor:pointer;"
+                      @click="trendClick('oil_water'
+                        ,'油品湿度','%')"
+                    ></div>
+                  </el-col>
+                </el-row>
+                <el-row style="height: 10%;padding-top: 3%;">
+                  <el-col
+                    :span="3"
+                    style="text-align: right;height: 100%"
+                  ><span
+                      @click="trendClick('gran4'
+                      ,'油液颗粒度（4um）','PM')"
+                      style="cursor:pointer;"
+                    >4um</span></el-col>
+                  <el-col :span="3">
+                    <span class="numCol">{{ bsyykld4 }}</span>
+                  </el-col>
+                  <el-col
+                    :span="3"
+                    style="text-align: right;height: 100%"
+                  ><span
+                      @click="trendClick('gran6'
+                      ,'油液颗粒度（6um）','PM')"
+                      style="cursor:pointer;"
+                    >6um</span></el-col><el-col :span="3">
+                    <span class="numCol">{{ bsyykld6 }}</span>
+                  </el-col>
+                  <el-col
+                    :span="3"
+                    style="text-align: right;height: 100%"
+                  ><span
+                      @click="trendClick('gran14'
+                      ,'油液颗粒度（14um）','PM')"
+                      style="cursor:pointer;"
+                    >14um</span></el-col><el-col :span="3">
+                    <span class="numCol">{{ bsyykld14 }}</span>
+                  </el-col>
+                  <el-col
+                    :span="3"
+                    style="text-align: right;height: 100%"
+                  ><span
+                      @click="trendClick('gran21'
+                      ,'油液颗粒度（21um）','PM')"
+                      style="cursor:pointer;"
+                    >21um</span></el-col><el-col :span="3">
+                    <span class="numCol">{{ bsyykld21 }}</span>
+                  </el-col>
+                </el-row>
+
+                <el-row style="height: 50%">
+                  <el-col
+                    :span="24"
+                    id="bsyykldtx"
+                    style="height: 100%"
+                  ></el-col>
+
+                </el-row>
+              </el-main>
+              <el-footer class="footer">
+                <div class="bottom-line"></div>
+                <!-- <lbCompents :showData="ylkldWarning"></lbCompents> -->
+                <div
+                  v-if="ylkldWarning.length > 0"
+                  class="warn"
+                ><router-link to="/detection/alarm/record">{{ylkldWarning}}</router-link></div>
+                <div v-else />
+              </el-footer>
+            </el-container>
+          </el-col>
+          <el-col
+            :span="7"
+            class="third-col"
+            style="height:100%"
+          >
+            <el-container
+              class="container"
+              style="height:100%"
+            >
+              <el-header class="header">系统状态</el-header>
+              <el-main class="main">
+                <div class="device-card-content">
+                  <el-row class="device-card-content-item">
+                    <el-col
+                      :span="8"
+                      style="height:100%"
+                    >
+                      <div class="device-card-content-label">
+                        <div class="device-image1"></div>
+                        <span style="color: #ccc">停机维护</span>
+                      </div>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="15"
+                      class="device-card-content-value"
+                    >
+                      <span style="color: #80D1FF;margin:auto">{{this.sysStatus.shutdownTime}}</span></el-col>
+                  </el-row>
+                  <el-row class="device-card-content-item">
+                    <el-col
+                      :span="8"
+                      style="height:100%"
+                    >
+                      <div class="device-card-content-label">
+                        <div class="device-image2"></div>
+                        <span style="color: #ccc">待机</span>
+                      </div>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="15"
+                      class="device-card-content-value"
+                    > <span style="color: #80D1FF;margin:auto">{{this.sysStatus.standbyTime}}</span></el-col>
+                  </el-row>
+                  <el-row class="device-card-content-item">
+                    <el-col
+                      :span="8"
+                      style="height:100%"
+                    >
+                      <div class="device-card-content-label">
+                        <div class="device-image3"></div>
+                        <span style="color: #ccc">试运行</span>
+                      </div>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="15"
+                      class="device-card-content-value"
+                    > <span style="color: #80D1FF;margin:auto">{{this.sysStatus.trialTime}}</span></el-col>
+                  </el-row>
+                  <el-row class="device-card-content-item">
+
+                    <el-col
+                      :span="8"
+                      style="height:100%"
+                    >
+                      <div class="device-card-content-label">
+                        <div class="device-image4"></div>
+                        <span style="color: #ccc">正常生产</span>
+                      </div>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="15"
+                      class="device-card-content-value"
+                    > <span style="color: #80D1FF;margin:auto">{{this.sysStatus.normalTime}}</span></el-col>
+                  </el-row>
+                  <el-row class="device-card-content-item ">
+                    <div style="background-color: #0b2d57;height: 70%;">
+                      <el-col
+                        :span="6"
+                        class="middle-class"
+                      >
+                        <div style="padding-left: 33%;">
+                          <span style="color: #ccc;">有效开机率</span>
+                        </div>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        class="middle-class"
+                      >
+                        <div class="my-progress-background">
+                          <div
+                            class="my-progress"
+                            :style="{width:percentage+'%'}"
+                          ></div>
+                        </div>
+                      </el-col>
+                      <el-col
+                        :span="3"
+                        class="middle-class"
+                      ><span class="my-percentage">{{ percentage }}%</span></el-col>
+                    </div>
+                  </el-row>
+                </div>
+                <div class="device-card-bottom">
+                  <el-row style="height:5%;width:100%"></el-row>
+                  <el-row class="device-bottom-row">
+                    <el-col
+                      :span="3"
+                      style="height:100%"
+                    >
+                      <div class="device-icon"></div>
+                    </el-col>
+                    <el-col
+                      :span="21"
+                      style="height:100%;display: flex;"
+                    >
+                      <span style="font-size: 18px;font-family: PingFang SC-Bold, PingFang SC;font-weight: 400;color: #FFFFFF;margin:auto 0">监测信息</span>
+                    </el-col>
+                  </el-row>
+                  <el-row class="device-bottom-row">
+                    <el-col
+                      :span="12"
+                      style="height:100%"
+                      class="bottom-line-solid"
+                    >
+                      <el-col
+                        :span="9"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-label">名称</span>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-value">{{ this.monitorInfo.equipName }}</span>
+                      </el-col>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="11"
+                      style="height:100%"
+                      class="bottom-line-solid"
+                    >
+                      <el-col
+                        :span="9"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-label">型号</span>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-value">{{ this.monitorInfo.equipNum }}</span>
+                      </el-col>
+                    </el-col>
+                  </el-row>
+                  <el-row class="device-bottom-row">
+                    <el-col
+                      :span="12"
+                      style="height:100%"
+                      class="bottom-line-solid"
+                    >
+                      <el-col
+                        :span="9"
+                        style="height:100%"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-label">时间</span>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        style="height:100%"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-value">{{ this.monitorInfo.nowTime }}</span>
+                      </el-col>
+                    </el-col>
+                    <el-col
+                      :span="1"
+                      style="height:100%"
+                    ></el-col>
+                    <el-col
+                      :span="11"
+                      style="height:100%"
+                      class="bottom-line-solid"
+                    >
+                      <el-col
+                        :span="9"
+                        style="height:100%"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-label">在线时间</span>
+                      </el-col>
+                      <el-col
+                        :span="15"
+                        style="height:100%"
+                        class="col-flex"
+                      >
+                        <span class="device-bottom-value">{{ this.monitorInfo.onlineTime }}</span>
+                      </el-col>
+                    </el-col>
+                  </el-row>
+                  <el-row class="device-bottom-row">
+                    <el-col
+                      :span="4"
+                      style="height:100%"
+                      class="bottom-line-solid col-flex"
+                    >
+                      <span class="device-bottom-label">起始时间</span>
+                    </el-col>
+                    <el-col
+                      :span="20"
+                      style="height:100%"
+                      class="bottom-line-solid col-flex"
+                    >
+                      <span
+                        class="device-bottom-value"
+                        style="padding-left:2%"
+                      >{{ this.monitorInfo.startTime }}</span>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-main>
+            </el-container>
+          </el-col>
+        </el-row>
+      </div>
+    </el-tab-pane>
+
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="isOpen"
+      :close-on-click-modal="false"
+      width="1000px"
+      center
+      :before-close="beforeClose"
+    >
+      <div
+        class="block"
+        style="text-align:center;"
+      >
+        <!-- <span
+          class="demonstration"
+          style="margin-right:5%"
+        >时间</span> -->
+        <el-date-picker
+          v-model="datetime"
+          type="datetimerange"
+          :picker-options="pickerOptions"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          align="right"
+          style="margin-right:10px"
+        >
+        </el-date-picker>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+        >查 询</el-button>
+        <el-button
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetQuery"
+        >重置</el-button>
+      </div>
+      <!-- <div
+        element-loading-text="加载中..."
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      > -->
+      <div
+        v-loading="loading"
+        ref="chart"
+        :style="{ height: height }"
+      ></div>
+      <!-- </div> -->
+    </el-dialog>
+  </el-tabs>
+</template>
+
+  <script>
+import * as echarts from "echarts";
+import { isArray, merge } from "lodash";
+import lbCompents from "../lb";
+import {
+  listBottomCylData,
+  listTopScollerData,
+  listBottomScollerData,
+  getBottomCylDataByDate,
+  getTopScollerDataByDate,
+  getBottomScollerDataByDate,
+} from "@/api/data/query.js";
+import {
+  getStatusByEquipName,
+  getMonitorInfoByEquipName,
+} from "@/api/industrial/sysStatus.js";
+import { listAllRecord } from "@/api/industrial/record";
+
+export default {
+  name: "yxjk",
+  components: { lbCompents },
+  data() {
+    return {
+      // 主参数报警
+      mainWarning: [], //"故障报警(开机检测内容放在此界面下)",
+      // ZFSC4超压平衡缸P/Q特性报警
+      sjyltxWarning: [], // "压区P/Q运行情况预警及分析(此处做出P/Q与车速及纸的关系曲线)",
+      // 系统能耗及预警
+      sysecWarning: [], //"系统能耗及预警",
+      // ZFSC4超压底缸加压压区P/Q特性报警
+      llyltxWarning: [], //"压区P/Q运行情况预警及分析(此处做出P/Q与车速及纸的关系曲线)",
+      // ZFSC4超压底缸加压系统油品特性报警
+      ylkldWarning: [], //"油液颖粒度预警值《此处颖粒度采取一表多采)",
+      powerConsumption: 10000,
+      // 压区实际压力特性实时数据
+      sjylData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      // 压区实际压力特性echarts
+      sjylChart: null,
+      // 压区流量压力特性实时数据
+      llylData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      // 压区流量压力特性echarts
+      llylChart: null,
+      // 油液颗粒度特性echarts
+      yykldtxCharts: null,
+      xtyl: 0,
+      xtylCharts: null,
+      xtyw: 0,
+      xtywCharts: null,
+      xtywei: 0,
+      xtyweicsz: 0,
+      xtyweimin: 0,
+      xtyweimax: 0,
+      xtyweiCharts: null,
+      bscll: 0,
+      bscllCharts: null,
+      scxl: 0,
+      scxlCharts: null,
+      zdjsjgl: 0,
+      zdjsjglCharts: null,
+      showdata: null,
+      XDATA: [],
+      zdjdl: 0,
+      yykld4: 0,
+      yykld6: 0,
+      yykld14: 0,
+      yykld21: 0,
+      // 粘度，湿度
+      dlndCharts: null,
+      xdsdCharts: null,
+      //底缸数据
+      cylyykldtxCharts: null,
+      cylxtyl: 0,
+      cylxtylCharts: null,
+      cylxtyw: 0,
+      cylxtywCharts: null,
+      cylxtywei: 0,
+      cylxtyweicsz: 0,
+      cylxtyweimin: 0,
+      cylxtyweimax: 0,
+      cylxtyweiCharts: null,
+      cylscxl: 0,
+      cylscxlCharts: null,
+      cylzdjsjgl: 0,
+      cylzdjsjglCharts: null,
+      cylzdjdlCharts: null,
+      cylzdjdl: 0,
+      cylyykld4: 0,
+      cylyykld6: 0,
+      cylyykld14: 0,
+      cylyykld21: 0,
+      // 粘度，湿度
+      cyldlndCharts: null,
+      cylxdsdCharts: null,
+      // 定时任务
+      intervalTask: null,
+      historyIntervalTask: null,
+
+      cdcjyylqxCharts: null,
+      cdcllbhqxCharts: null,
+      czcjyylqxCharts: null,
+      czcllbhqxCharts: null,
+      zdjdlCharts: null,
+      cdcylbhqxCharts: null,
+      czcylbhqxCharts: null,
+      cdcdgwytxCharts: null,
+      czcdgwytxCharts: null,
+      dlndCharts: null,
+      yykldtxCharts: null,
+      xdsdCharts: null,
+      // 显示数据
+      // 平衡缸
+      tsrgsjyl: 0,
+      tsregsjyl: 0,
+      tsreghgyl: 0,
+      tsregjyyl: 0,
+      tsrghgyl: 0,
+      tsrgjyyl: 0,
+      dsrgsjyl: 0,
+      dsregsjyl: 0,
+      dsreghgyl: 0,
+      dsregjyyl: 0,
+      dsrghgyl: 0,
+      dsrgjyyl: 0,
+      cdcrgll: 0,
+      cdcregll: 0,
+      czcrgll: 0,
+      czcregll: 0,
+      // 加压压区
+      dgcdcblsff: 0,
+      dgcdcbljyf: 0,
+      dgcdcygwy: 0,
+      dgczcblsff: 0,
+      dgczcbljyf: 0,
+      dgczcygwy: 0,
+      //中高底辊参数
+      // 压区实际压力特性实时数据
+      bssjylData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      // 压区实际压力特性echarts
+      bssjylChart: null,
+      // 实时电流echarts
+      bszdjdlCharts: null,
+      // 压区流量压力特性实时数据
+      bsllylData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      // 压区流量压力特性echarts
+      bsllylChart: null,
+      // 油液颗粒度特性echarts
+      bsyykldtxCharts: null,
+      // 时间
+      XDATA: [],
+      showdata: null,
+      // 主要参数及echarts
+      bsxtyl: 0,
+      bsxtylCharts: null,
+      bsxtyw: 0,
+      bsxtywCharts: null,
+      bsxtywei: 0,
+      bsxtyweicsz: 0,
+      bsxtyweimin: 0,
+      bsxtyweimax: 0,
+      bsxtyweiCharts: null,
+      bszbscll: 0,
+      bszbscllCharts: null,
+      bsscxl: 0,
+      bsscxlCharts: null,
+      bszdjsjgl: 0,
+      bszdjsjglCharts: null,
+      bsyykld4: 0,
+      bsyykld6: 0,
+      bsyykld14: 0,
+      bsyykld21: 0,
+      bszdjdl: 0,
+      // 粘度，湿度
+      bsdlndCharts: null,
+      bsxdsdCharts: null,
+
+      // 有效开机率
+      percentage: 80,
+      dialogTitle: "",
+      isOpen: false,
+      chartLoading: false,
+      loading: true,
+      isNoData: false,
+      height: "500px",
+      queryParams: {
+        columnName: null,
+        startTime: null,
+        endTime: null,
+      },
+      datetime: this.getDefaultTimeRange(),
+      name: "",
+      unit: "",
+      sysStatus: {},
+      monitorInfo: {},
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      activeName: "bottomCyl",
+    };
+  },
+  beforeDestroy() {
+    clearInterval(this.intervalTask);
+    clearInterval(this.historyIntervalTask);
+  },
+  mounted() {
+    let query = {
+      equipName: "超压底缸",
+    };
+    this.getSysStatusData(query);
+    this.getMonitorData(query);
+    this.queryBottomCylDataInit();
+    this.intervalTask = setInterval(() => {
+      // 查询数据
+      this.queryBottomCylData();
+    }, 1000);
+  },
+  methods: {
+    beforeClose(done) {
+      this.chart && this.chart.dispose();
+      done();
+      this.loading = false;
+    },
+    handleTabsClick() {
+      clearInterval(this.intervalTask);
+      if (this.activeName == "bottomCyl") {
+        let query = {
+          equipName: "超压底缸",
+        };
+        this.getSysStatusData(query);
+        this.getMonitorData(query);
+        this.queryBottomCylDataInit();
+        this.intervalTask = setInterval(() => {
+          // 查询数据
+          this.queryBottomCylData();
+        }, 1000);
+      } else if (this.activeName == "topScoller") {
+        let query = {
+          equipName: "可控中高辊顶辊",
+        };
+        this.getSysStatusData(query);
+        this.getMonitorData(query);
+        this.queryTopScollerDataInit();
+        this.intervalTask = setInterval(() => {
+          // 查询数据
+          this.queryTopScollerData();
+        }, 1000);
+      } else {
+        let query = {
+          equipName: "可控中高辊底辊",
+        };
+        this.getSysStatusData(query);
+        this.getMonitorData(query);
+        this.queryBottomScollerDataInit();
+        this.intervalTask = setInterval(() => {
+          // 查询数据
+          this.queryBottomScollerData();
+        }, 1000);
+      }
+    },
+    getSysStatusData(query) {
+      getStatusByEquipName(query).then((response) => {
+        this.sysStatus = response.data;
+        this.queryAlarmRecordData(this.sysStatus.equipId);
+      });
+    },
+    getMonitorData(query) {
+      getMonitorInfoByEquipName(query).then((response) => {
+        this.monitorInfo = response.data;
+      });
+    },
+    getDefaultTimeRange() {
+      const now = new Date();
+      const oneHoursAgo = new Date(now.getTime() - 1 * 60 * 60 * 1000);
+      return [this.formatDateTime(oneHoursAgo), this.formatDateTime(now)];
+    },
+    formatDateTime(date) {
+      return (
+        date.getFullYear() +
+        "-" +
+        this.padZero(date.getMonth() + 1) +
+        "-" +
+        this.padZero(date.getDate()) +
+        "T" +
+        this.padZero(date.getHours()) +
+        ":" +
+        this.padZero(date.getMinutes()) +
+        ":" +
+        this.padZero(date.getSeconds())
+      );
+    },
+    padZero(num) {
+      return num < 10 ? "0" + num : num;
+    },
+    handleQuery() {
+      this.loading = true;
+      if (this.datetime == null) {
+        this.datetime = this.getDefaultTimeRange();
+      }
+      let startTime = new Date(this.datetime[0]);
+      this.queryParams.startTime = this.formatDateTime(startTime);
+      let endTime = new Date(this.datetime[1]);
+      this.queryParams.endTime = this.formatDateTime(endTime);
+      this.getData(this.queryParams);
+    },
+    resetQuery() {
+      this.datetime = this.getDefaultTimeRange();
+      this.handleQuery();
+    },
+    getData(queryObj) {
+      this.chartLoading = true;
+      if (this.activeName == "bottomCyl") {
+        getBottomCylDataByDate(queryObj).then((response) => {
+          this.loading = false;
+          if (response.data == null) {
+            this.initchart([], [], "", "");
+          } else {
+            this.initchart(
+              response.data.x,
+              response.data.y,
+              this.name,
+              this.unit
+            );
+          }
+        });
+      } else if (this.activeName == "topScoller") {
+        getTopScollerDataByDate(queryObj).then((response) => {
+          this.loading = false;
+          if (response.data == null) {
+            this.initchart([], [], "", "");
+          } else {
+            this.initchart(
+              response.data.x,
+              response.data.y,
+              this.name,
+              this.unit
+            );
+          }
+        });
+      } else {
+        getBottomScollerDataByDate(queryObj).then((response) => {
+          this.loading = false;
+          if (response.data == null) {
+            this.initchart([], [], "", "");
+          } else {
+            this.loading = false;
+            this.initchart(
+              response.data.x,
+              response.data.y,
+              this.name,
+              this.unit
+            );
+          }
+        });
+      }
+    },
+    initchart(xData, yData, name, unit) {
+      let p = new Promise((resolve) => {
+        resolve();
+      });
+      p.then(() => {
+        this.chart = echarts.init(this.$refs.chart);
+        let option = {
+          color: ["#637DCB"],
+          title: {
+            text: "",
+            right: "100",
+            textStyle: { fontWeight: "normal", color: "#637DCB" },
+          },
+          toolbox: {
+            top: 0,
+            itemSize: 13, //工具栏 icon 的大小
+            iconStyle: {
+              color: "transparent",
+              borderColor: "#fff",
+            },
+            feature: {
+              dataZoom: {
+                yAxisIndex: "none",
+              },
+              restore: { show: false },
+              saveAsImage: { show: false },
+            },
+          },
+          tooltip: {
+            //提示框
+            trigger: "axis",
+            axisPointer: {
+              type: "line", //显示提示框的时候的背景 line是一条线 shadow是个背景框
+            },
+            backgroundColor: "#fff",
+            extraCssText: "box-shadow: 4px 4px 4px 2px rgba(0, 0, 0, 0.2)", //提示框加阴影效果
+            textStyle: {
+              color: "#4E5969", //设置文字颜色
+            },
+            formatter: (prams) => {
+              let name = parseFloat(_.get(prams, [0, "name"])).toFixed(4);
+              let value = parseFloat(_.get(prams, [0, "value"])).toFixed(4);
+              return (
+                "<span style='color:#6D85CE'>" +
+                `（${name}` +
+                "," +
+                `${value}）` +
+                "</span>"
+              );
+            },
+          },
+          xAxis: [
+            {
+              type: "category",
+              name: "时间",
+              data: xData,
+              nameTextStyle: { fontSize: "9" },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: "#fff",
+                  width: 0, //这里是为了突出显示加上的
+                },
+              },
+              axisLabel: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "9",
+                },
+                showMaxLabel: true,
+                showMinLabel: true,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              name: "单位: " + unit,
+              type: "value",
+              nameLocation: "end",
+              nameTextStyle: {
+                color: "#fff",
+                fontSize: "9",
+              },
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                interval: 0,
+                textStyle: {
+                  fontSize: "9",
+                  color: "#fff",
+                },
+              },
+              splitLine: {
+                //修改背景线条样式
+                show: true, //是否展示
+                lineStyle: {
+                  color: "#3C506B", //线条颜色
+                  type: "dashed", //线条样式，默认是实现，dashed是虚线
+                },
+              },
+            },
+          ],
+          grid: {
+            left: "3%",
+            right: "8%",
+            bottom: "18%",
+            top: "14%",
+            containLabel: true,
+          },
+          dataZoom: [
+            {
+              show: true,
+              type: "slider",
+              xAxisIndex: 0,
+              filterMode: "none",
+              start: 0,
+              end: xData.length,
+              bottom: "1%",
+              fillerColor: "rgba(167,183,204,0.4)", //选中范围的填充颜色。
+              borderColor: "#3C506B",
+            },
+            {
+              show: true,
+              type: "inside",
+              xAxisIndex: 0,
+              filterMode: "none",
+              start: 0,
+              end: 10,
+              bottom: "1%",
+              fillerColor: "rgba(167,183,204,0.4)", //选中范围的填充颜色。
+              borderColor: "#E0E6F3",
+            },
+          ],
+          series: [
+            {
+              name: name,
+              type: "line",
+              data: yData,
+              symbol: "none",
+            },
+          ],
+        };
+        this.chart.setOption(option);
+        this.chartLoading = false;
+      });
+    },
+    trendClick(key, name, unit) {
+      this.dialogTitle = name + "历史趋势记录查询";
+      this.isOpen = true;
+      this.name = name;
+      this.unit = unit;
+      this.queryParams.columnName = key;
+      // this.initchart([], [], "", "");
+      this.handleQuery();
+    },
+    queryAlarmRecordData(equipId) {
+      let query = {
+        equipId: equipId,
+      };
+      listAllRecord(query).then((response) => {
+        if (this.activeName == "bottomCyl") {
+          this.setBottomCylAlarmRecord(response.data);
+        } else {
+          this.setScollerAlarmRecord(response.data);
+        }
+      });
+    },
+    setBottomCylAlarmRecord(data) {
+      // 主参数报警
+      this.mainWarning = data
+        .filter(
+          (item) =>
+            item.nameKey == "sys_press" ||
+            item.nameKey == "sys_flw" ||
+            item.nameKey == "sys_level" ||
+            item.nameKey == "sys_temp"
+        )
+        .slice(0, 10)
+        .map(
+          (obj) =>
+            "报警内容：" + obj.content + "     报警时间：" + obj.alarmTime
+        );
+      // .join("，");
+      // ZFSC4超压平衡缸P/Q特性报警
+      this.sjyltxWarning = data
+        .filter(
+          (item) =>
+            item.nameKey == "opr_soft_real_press" ||
+            item.nameKey == "opr_soft_bond_press" ||
+            item.nameKey == "opr_soft_act_press" ||
+            item.nameKey == "opr_hot_real_press" ||
+            item.nameKey == "opr_hot_bond_press" ||
+            item.nameKey == "opr_hot_act_press" ||
+            item.nameKey == "driven_soft_real_press" ||
+            item.nameKey == "driven_soft_bond_press" ||
+            item.nameKey == "driven_soft_act_press" ||
+            item.nameKey == "driven_hot_real_press" ||
+            item.nameKey == "driven_hot_bond_press" ||
+            item.nameKey == "driven_hot_act_press" ||
+            item.nameKey == "opr_soft_flw" ||
+            item.nameKey == "opr_hot_flw" ||
+            item.nameKey == "driven_soft_flw" ||
+            item.nameKey == "driven_hot_flw"
+        )
+        .slice(0, 10)
+        .map(
+          (obj) =>
+            "报警内容：" + obj.content + "     报警时间：" + obj.alarmTime
+        );
+      // .map((obj) => obj.alarmDetail)
+      // .join("，");
+      // 系统能耗及预警
+      this.sysecWarning = data
+        .filter((item) => item.nameKey == "sys_cur")
+        .slice(0, 10)
+        .map(
+          (obj) =>
+            "报警内容：" + obj.content + "     报警时间：" + obj.alarmTime
+        );
+      // .join("，");
+      // .join("，");
+      // ZFSC4超压底缸加压压区P/Q特性报警
+      this.llyltxWarning = data
+        .filter(
+          (item) =>
+            item.nameKey == "opr_bottom_press" ||
+            item.nameKey == "driven_bottom_press" ||
+            item.nameKey == "opr_bottom_set_press" ||
+            item.nameKey == "driven_bottom_set_press"
+        )
+        .slice(0, 10)
+        .map(
+          (obj) =>
+            "报警内容：" + obj.content + "     报警时间：" + obj.alarmTime
+        );
+      // .join("，");
+      // ZFSC4超压底缸加压系统油品特性报警
+      this.ylkldWarning = data
+        .filter(
+          (item) =>
+            item.nameKey == "oil_water" ||
+            item.nameKey == "visc" ||
+            item.nameKey == "gran4" ||
+            item.nameKey == "gran6" ||
+            item.nameKey == "gran14" ||
+            item.nameKey == "gran21"
+        )
+        .slice(0, 10)
+        .map(
+          (obj) =>
+            "报警内容：" + obj.content + "     报警时间：" + obj.alarmTime
+        );
+      // .join("，");
+    },
+    setScollerAlarmRecord(data) {
+      // 主参数报警
+      this.mainWarning = data
+        .filter(
+          (item) =>
+            item.nameKey == "sys_press" ||
+            item.nameKey == "sys_flw" ||
+            item.nameKey == "sys_level" ||
+            item.nameKey == "sys_temp"
+        )
+        .slice(0, 10)
+        .map(
+          (obj) =>
+            "报警内容：" + obj.content + "     报警时间：" + obj.alarmTime
+        );
+      // .join("，");
+      // ZFSC4超压平衡缸P/Q特性报警
+      this.sjyltxWarning = data
+        .filter(
+          (item) =>
+            item.nameKey == "press1" ||
+            item.nameKey == "press2" ||
+            item.nameKey == "press3" ||
+            item.nameKey == "press4" ||
+            item.nameKey == "press5" ||
+            item.nameKey == "press6" ||
+            item.nameKey == "press7" ||
+            item.nameKey == "press8" ||
+            item.nameKey == "press9" ||
+            item.nameKey == "press10" ||
+            item.nameKey == "press11"
+        )
+        .slice(0, 10)
+        .map(
+          (obj) =>
+            "报警内容：" + obj.content + "     报警时间：" + obj.alarmTime
+        );
+      // .map((obj) => obj.alarmDetail)
+      // .join("，");
+      // 系统能耗及预警
+      this.sysecWarning = data
+        .filter((item) => item.nameKey == "sys_cur")
+        .slice(0, 10)
+        .map(
+          (obj) =>
+            "报警内容：" + obj.content + "     报警时间：" + obj.alarmTime
+        );
+      // .map((obj) => obj.alarmDetail)
+      // .join("，");
+      // ZFSC4超压底缸加压压区P/Q特性报警
+      this.llyltxWarning = data
+        .filter(
+          (item) =>
+            item.nameKey == "flw1" ||
+            item.nameKey == "flw2" ||
+            item.nameKey == "flw3" ||
+            item.nameKey == "flw4" ||
+            item.nameKey == "flw5" ||
+            item.nameKey == "flw6" ||
+            item.nameKey == "flw7" ||
+            item.nameKey == "flw8" ||
+            item.nameKey == "flw9" ||
+            item.nameKey == "flw10" ||
+            item.nameKey == "flw11"
+        )
+        .slice(0, 10)
+        .map((obj) => obj.alarmDetail);
+      // .join("，");
+      // ZFSC4超压底缸加压系统油品特性报警
+      this.ylkldWarning = data
+        .filter(
+          (item) =>
+            item.nameKey == "oil_water" ||
+            item.nameKey == "visc" ||
+            item.nameKey == "gran4" ||
+            item.nameKey == "gran6" ||
+            item.nameKey == "gran14" ||
+            item.nameKey == "gran21"
+        )
+        .slice(0, 10)
+        .map(
+          (obj) =>
+            "报警内容：" + obj.content + "     报警时间：" + obj.alarmTime
+        );
+      // .join("，");
+    },
+    async queryBottomScollerDataInit() {
+      const { data } = await listBottomScollerData();
+      this.XDATA = data.timelist;
+      this.showdata = data;
+      this.bsxtyl = parseFloat(data.sysprs).toFixed(2);
+      this.bsxtyw = parseFloat(data.systemp).toFixed(2);
+      this.bsxtywei = parseFloat(data.syslevel).toFixed(2);
+      this.bsxtyweicsz = parseFloat(data.syslevelinit).toFixed(2);
+      this.bsxtyweimin = parseFloat(data.levelmin).toFixed(2);
+      this.bsxtyweimax = parseFloat(data.levelmax).toFixed(2);
+      this.bszbscll = parseFloat(data.sysflw).toFixed(2);
+      this.bsscxl = parseFloat(data.syseff).toFixed(2);
+      this.bszdjsjgl = parseFloat(data.syspower).toFixed(2);
+      this.bszdjdl = parseFloat(data.syscur.slice(-1)[0]).toFixed(2);
+      this.bsyykld4 = parseFloat(data.sysgran4).toFixed(2);
+      this.bsyykld6 = parseFloat(data.sysgran6).toFixed(2);
+      this.bsyykld14 = parseFloat(data.sysgran14).toFixed(2);
+      this.bsyykld21 = parseFloat(data.sysgran21).toFixed(2);
+      this.bssjylData = [
+        parseFloat(data.prs1.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs2.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs3.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs4.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs5.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs6.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs7.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs8.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs9.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs10.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs11.slice(-1)[0]).toFixed(2),
+      ];
+      this.bsllylData = [
+        parseFloat(data.flw1.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw2.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw3.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw4.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw5.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw6.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw7.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw8.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw9.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw10.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw11.slice(-1)[0]).toFixed(2),
+      ];
+      this.initBottomScollerCharts();
+    },
+    async queryBottomScollerData() {
+      const { data } = await listBottomScollerData();
+      this.XDATA = data.timelist;
+      this.bsxtyl = parseFloat(data.sysprs).toFixed(2);
+      this.bsxtyw = parseFloat(data.systemp).toFixed(2);
+      this.bsxtywei = parseFloat(data.syslevel).toFixed(2);
+      this.bsxtyweicsz = parseFloat(data.syslevelinit).toFixed(2);
+      this.bsxtyweimin = parseFloat(data.levelmin).toFixed(2);
+      this.bsxtyweimax = parseFloat(data.levelmax).toFixed(2);
+      this.bszbscll = parseFloat(data.sysflw).toFixed(2);
+      this.bsscxl = parseFloat(data.syseff).toFixed(2);
+      this.bszdjsjgl = parseFloat(data.syspower).toFixed(2);
+      this.showdata = data;
+      this.bszdjdl = parseFloat(data.syscur.slice(-1)[0]).toFixed(2);
+      this.bsyykld4 = parseFloat(data.sysgran4).toFixed(2);
+      this.bsyykld6 = parseFloat(data.sysgran6).toFixed(2);
+      this.bsyykld14 = parseFloat(data.sysgran14).toFixed(2);
+      this.bsyykld21 = parseFloat(data.sysgran21).toFixed(2);
+      this.bssjylData = [
+        parseFloat(data.prs1.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs2.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs3.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs4.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs5.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs6.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs7.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs8.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs9.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs10.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs11.slice(-1)[0]).toFixed(2),
+      ];
+      this.bsllylData = [
+        parseFloat(data.flw1.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw2.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw3.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw4.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw5.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw6.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw7.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw8.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw9.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw10.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw11.slice(-1)[0]).toFixed(2),
+      ];
+      this.refreshBottomScollerCharts();
+    },
+    refreshBottomScollerCharts() {
+      // 压区实际压力特性echarts
+      let sjylOption = this.bssjylChart.getOption();
+      sjylOption.xAxis[0].data = this.XDATA;
+      sjylOption.series[0].data = this.showdata.prs1;
+      sjylOption.series[1].data = this.showdata.prs2;
+      sjylOption.series[2].data = this.showdata.prs3;
+      sjylOption.series[3].data = this.showdata.prs4;
+      sjylOption.series[4].data = this.showdata.prs5;
+      sjylOption.series[5].data = this.showdata.prs6;
+      sjylOption.series[6].data = this.showdata.prs7;
+      sjylOption.series[7].data = this.showdata.prs8;
+      sjylOption.series[8].data = this.showdata.prs9;
+      sjylOption.series[9].data = this.showdata.prs10;
+      sjylOption.series[10].data = this.showdata.prs11;
+      this.bssjylChart.setOption(sjylOption);
+      // 实时电流echarts
+      let zdjdlOption = this.bszdjdlCharts.getOption();
+      zdjdlOption.xAxis[0].data = this.XDATA;
+      zdjdlOption.series[0].data = this.showdata.syscur;
+      this.bszdjdlCharts.setOption(zdjdlOption);
+      // 压区流量压力特性echarts
+      let llylOption = this.bsllylChart.getOption();
+      llylOption.xAxis[0].data = this.XDATA;
+      llylOption.series[0].data = this.showdata.flw1;
+      llylOption.series[1].data = this.showdata.flw2;
+      llylOption.series[2].data = this.showdata.flw3;
+      llylOption.series[3].data = this.showdata.flw4;
+      llylOption.series[4].data = this.showdata.flw5;
+      llylOption.series[5].data = this.showdata.flw6;
+      llylOption.series[6].data = this.showdata.flw7;
+      llylOption.series[7].data = this.showdata.flw8;
+      llylOption.series[8].data = this.showdata.flw9;
+      llylOption.series[9].data = this.showdata.flw10;
+      llylOption.series[10].data = this.showdata.flw11;
+      this.bsllylChart.setOption(llylOption);
+      // 油液颗粒度特性echarts
+      let yykldOption = this.bsyykldtxCharts.getOption();
+      yykldOption.series[0].data = [
+        this.bsyykld4,
+        this.bsyykld6,
+        this.bsyykld14,
+        this.bsyykld21,
+      ];
+      this.bsyykldtxCharts.setOption(yykldOption);
+      let dlndOption = this.bsdlndCharts.getOption();
+      dlndOption.series[0].data[0].value = parseFloat(
+        this.showdata.sysvisc
+      ).toFixed(2);
+      this.bsdlndCharts.setOption(dlndOption);
+      let xdsdOption = this.bsxdsdCharts.getOption();
+      xdsdOption.series[0].data[0].value = parseFloat(
+        this.showdata.syshumid
+      ).toFixed(2);
+      this.bsxdsdCharts.setOption(xdsdOption);
+      // 主要参数及echarts
+      let xtylOption = this.bsxtylCharts.getOption();
+      xtylOption.series[0].data[0].value = this.bsxtyl;
+      this.bsxtylCharts.setOption(xtylOption);
+      let xtywOption = this.bsxtywCharts.getOption();
+      xtywOption.series[0].data[0].value = this.bsxtyw;
+      this.bsxtywCharts.setOption(xtywOption);
+      let xtyweiOption = this.bsxtyweiCharts.getOption();
+      xtyweiOption.series[0].data = [this.bsxtywei];
+      this.bsxtyweiCharts.setOption(xtyweiOption);
+      let zbscllOption = this.bszbscllCharts.getOption();
+      zbscllOption.series[0].data[0].value = this.bszbscll;
+      this.bszbscllCharts.setOption(zbscllOption);
+      let scxlOption = this.bsscxlCharts.getOption();
+      scxlOption.series[0].data[0].value = this.bsscxl;
+      this.bsscxlCharts.setOption(scxlOption);
+      let zdjsjglOption = this.bszdjsjglCharts.getOption();
+      zdjsjglOption.series[0].data[0].value = this.bszdjdl;
+      this.bszdjsjglCharts.setOption(zdjsjglOption);
+    },
+    initBottomScollerCharts() {
+      const xtyl = document.getElementById("bsxtyl"); //系统压力
+      this.bsxtylCharts = echarts.init(xtyl);
+      this.bsxtylCharts.setOption(
+        this.generateGaugeOption({
+          color: ["26DE86", "93DDBA"],
+          bgColor: "023E44",
+          name: "系统压力",
+          value: this.bsxtyl,
+          limit: 0.8,
+          unit: "bar",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.bsxtylCharts && this.bsxtylCharts.resize();
+      });
+
+      const xtyw = document.getElementById("bsxtyw"); //系统液温
+      this.bsxtywCharts = echarts.init(xtyw);
+      this.bsxtywCharts.setOption(
+        this.generateGaugeOption({
+          color: ["109CFB", "98DAFF"],
+          bgColor: "0D3F62",
+          name: "系统液温",
+          value: this.xtyw,
+          limit: 0.8,
+          unit: "℃",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.bsxtywCharts && this.bsxtywCharts.resize();
+      });
+
+      const xtywei = document.getElementById("bsxtywei"); //系统液位
+      this.bsxtyweiCharts = echarts.init(xtywei);
+      let yMax = 1;
+      let option = {
+        grid: {
+          bottom: "20%",
+          top: "20%",
+        },
+        title: {
+          show: false,
+          left: "center",
+          bottom: "bottom",
+          text: "系统液位(CP)",
+          textStyle: {
+            //标题内容的样式
+            color: "#ffffff",
+            fontWeight: "normal",
+            fontSize: 16,
+            color: "#188df0",
+          },
+        },
+        xAxis: {
+          data: ["数据", "占位"],
+          show: false,
+        },
+        yAxis: {
+          show: false,
+          max: yMax,
+        },
+        series: [
+          {
+            type: "bar",
+            showBackground: true,
+            backgroundStyle: {
+              color: "#0D3B59",
+            },
+            barWidth: "30",
+            label: {
+              show: true,
+              position: "top",
+              fontSize: 16,
+              color: "#fff",
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#00BFFF" },
+                { offset: 0.5, color: "#00FFDD" },
+                { offset: 1, color: "#00F28D" },
+              ]),
+            },
+            data: [this.bsxtywei],
+          },
+        ],
+      };
+      this.bsxtyweiCharts.setOption(option, true, true);
+      window.addEventListener("resize", () => {
+        this.bsxtyweiCharts && this.bsxtyweiCharts.resize();
+      });
+
+      const zbscll = document.getElementById("bszbscll"); //泵输出流量
+      this.bszbscllCharts = echarts.init(zbscll);
+      this.bszbscllCharts.setOption(
+        this.generateGaugeOption({
+          color: ["2ACDDE", "92D8DD"],
+          bgColor: "023953",
+          name: "泵输出流量",
+          value: this.bszbscll,
+          limit: 0.8,
+          unit: "L/min",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.bszbscllCharts && this.bszbscllCharts.resize();
+      });
+
+      const scxl = document.getElementById("bsscxl"); //输出效率
+      this.bsscxlCharts = echarts.init(scxl);
+      this.bsscxlCharts.setOption(
+        this.generateGaugeOption({
+          color: ["C010FB", "C898FF"],
+          bgColor: "2C2864",
+          name: "输出效率",
+          value: this.bsscxl,
+          limit: 0.8,
+          unit: "%",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.bsscxlCharts && this.bsscxlCharts.resize();
+      });
+
+      const zdjsjgl = document.getElementById("bszdjsjgl"); //主电机实际功率
+      this.bszdjsjglCharts = echarts.init(zdjsjgl);
+      this.bszdjsjglCharts.setOption(
+        this.generateGaugeOption({
+          color: ["844AFF", "BAB9FF"],
+          bgColor: "373341",
+          name: "主电机实际功率",
+          value: this.bszdjsjgl,
+          limit: 0.8,
+          unit: "KW",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.bszdjsjglCharts && this.bszdjsjglCharts.resize();
+      });
+
+      //ZFSC4中高底辊P/Q特性压区实际压力特性
+      const sjyltx = document.getElementById("bssjyltx");
+      this.bssjylChart = echarts.init(sjyltx);
+      let sjylOption = {
+        title: {
+          left: "center",
+          text: "压区实际压力特性",
+          textStyle: {
+            //标题内容的样式
+            color: "#ffffff",
+            fontWeight: "normal",
+            fontSize: 16,
+          },
+        },
+        // grid: {
+        //   left: "3%",
+        //   right: "4%",
+        //   bottom: "3%",
+        //   containLabel: true,
+        // },
+        // xAxis: [
+        //   {
+        //     type: "category",
+        //     boundaryGap: false,
+        //     data: this.XDATA,
+        //   },
+        // ],
+        yAxis: { name: "P (bar)" },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        series: [
+          {
+            name: "一区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs1,
+          },
+          {
+            name: "二区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs2,
+          },
+          {
+            name: "三区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs3,
+          },
+          {
+            name: "四区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs4,
+          },
+          {
+            name: "五区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs5,
+          },
+          {
+            name: "六区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs6,
+          },
+          {
+            name: "七区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs7,
+          },
+          {
+            name: "八区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs8,
+          },
+          {
+            name: "九区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs9,
+          },
+          {
+            name: "十区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs10,
+          },
+          {
+            name: "十一区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            symbol: "none",
+
+            data: this.showdata.prs11,
+          },
+        ],
+      };
+
+      this.bssjylChart.setOption(this.generateOptions(sjylOption), true, true);
+      window.addEventListener("resize", () => {
+        this.bssjylChart && this.bssjylChart.resize();
+      });
+
+      //zdjdl 主电机电流
+      const zdjdl = document.getElementById("bszdjdl");
+      this.bszdjdlCharts = echarts.init(zdjdl);
+      this.bszdjdlCharts.setOption(
+        this.generateOptions({
+          yAxis: { name: "I(A)" },
+          grid: {
+            left: "10%",
+            top: "12%",
+            right: "6%",
+            bottom: "12%",
+          },
+          series: [
+            {
+              name: "电流",
+              type: "line",
+              data: this.showdata.syscur,
+              symbol: "none",
+            },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.bszdjdlCharts && this.bszdjdlCharts.resize();
+      });
+
+      //ZFSC4中高底辊P/Q特性压区流量压力特性
+      const llyltx = document.getElementById("bsllyltx");
+      this.bsllylChart = echarts.init(llyltx);
+      let llylOption = {
+        title: {
+          left: "center",
+          text: "压区流量压力特性",
+          textStyle: {
+            //标题内容的样式
+            color: "#ffffff",
+            fontWeight: "normal",
+            fontSize: 16,
+          },
+        },
+        // grid: {
+        //   left: "3%",
+        //   right: "4%",
+        //   bottom: "3%",
+        //   containLabel: true,
+        // },
+        // xAxis: [
+        //   {
+        //     type: "category",
+        //     boundaryGap: false,
+        //     data: this.XDATA,
+        //   },
+        // ],
+        yAxis: { name: "Q (L/min)" },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        series: [
+          {
+            name: "一区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw1,
+          },
+          {
+            name: "二区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw2,
+          },
+          {
+            name: "三区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw3,
+          },
+          {
+            name: "四区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw4,
+          },
+          {
+            name: "五区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw5,
+          },
+          {
+            name: "六区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw6,
+          },
+          {
+            name: "七区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw7,
+          },
+          {
+            name: "八区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw8,
+          },
+          {
+            name: "九区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw9,
+          },
+          {
+            name: "十区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw10,
+          },
+          {
+            name: "十一区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw11,
+          },
+        ],
+      };
+      this.bsllylChart.setOption(this.generateOptions(llylOption), true, true);
+      window.addEventListener("resize", () => {
+        this.bsllylChart && this.bsllylChart.resize();
+      });
+
+      //yykldtx 颗粒度特性
+      const yykldtx = document.getElementById("bsyykldtx");
+      this.bsyykldtxCharts = echarts.init(yykldtx);
+      this.bsyykldtxCharts.setOption(
+        this.generateOptions2({
+          title: {
+            left: "center",
+            text: "油液颗粒度特性",
+            textStyle: {
+              //标题内容的样式
+              color: "#ffffff",
+              fontWeight: "normal",
+              fontSize: 16,
+            },
+          },
+          xAxis: {
+            data: ["4um", "6um", "14um", "21um"],
+          },
+          yAxis: {
+            name: "PM",
+            min: 0,
+            max: 1,
+            interval: 0.2, // 指定刻度间隔
+          },
+          series: [
+            {
+              name: "颗粒度",
+              type: "bar",
+              barWidth: "30",
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#83bff6" },
+                  { offset: 0.5, color: "#188df0" },
+                  { offset: 1, color: "#188df0" },
+                ]),
+              },
+              data: [
+                this.bsyykld4,
+                this.bsyykld6,
+                this.bsyykld14,
+                this.bsyykld21,
+              ],
+              symbol: "none",
+            },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.bsyykldtxCharts && this.bsyykldtxCharts.resize();
+      });
+      //dlnd 动力粘度
+      const dlnd = document.getElementById("bsdlnd"); //系统压力
+      this.bsdlndCharts = echarts.init(dlnd);
+      this.bsdlndCharts.setOption(
+        this.generateGaugeOption2({
+          color: ["00F28D", "00FFDD", "00BFFF"],
+          bgColor: "87a6a8",
+          name: "粘度",
+          value: parseFloat(this.showdata.sysvisc).toFixed(2),
+          limit: 0.8,
+          unit: "mm2/s",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.bsdlndCharts && this.bsdlndCharts.resize();
+      });
+      //xdsd 湿度
+      const xdsd = document.getElementById("bsxdsd"); //系统压力
+      this.bsxdsdCharts = echarts.init(xdsd);
+      this.bsxdsdCharts.setOption(
+        this.generateGaugeOption2({
+          color: ["00F28D", "00FFDD", "00BFFF"],
+          bgColor: "87a6a8",
+          name: "湿度",
+          value: parseFloat(this.showdata.syshumid).toFixed(2),
+          limit: 0.8,
+          unit: "%",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.bsxdsdCharts && this.bsxdsdCharts.resize();
+      });
+    },
+    generateOptions(option = {}) {
+      return merge(
+        {
+          color: [
+            "#306fff",
+            "#30c9c9",
+            "#f7ad08",
+            "#93beff",
+            "#80FFA5",
+            "#00DDFF",
+            "#37A2FF",
+            "#FF0087",
+            "#FFBF00",
+            "#5470c6",
+            "#91cc75",
+            "#fac858",
+            "#ee6666",
+            "#73c0de",
+            "#3ba272",
+            "#fc8452",
+            "#9a60b4",
+            "#ea7ccc",
+          ],
+          tooltip: {
+            show: true,
+            trigger: "axis",
+          },
+          xAxis: {
+            show: true,
+            name: "",
+            nameLocation: "end", // 坐标轴名称及显示位置，可以时start和middle
+            nameTextStyle: {
+              // 坐标轴名称的样式
+              color: "#9b9ba4",
+            },
+            nameGap: 15, // 坐标轴名称与轴线的距离
+            inverse: false, // 是否反向坐标轴
+            axisLabel: {
+              // 刻度标签的样式
+              hideOverlap: true, // 隐藏重叠的标签
+              color: "#9b9ba4",
+            },
+            axisLine: {
+              show: false,
+            },
+            position: "bottom",
+            offset: 0, // 相对正常位置的偏移
+            type: "category", // 类目轴，也可以是time， value， 对数轴log
+            data: this.XDATA,
+          },
+          yAxis: {
+            name: "",
+            nameTextStyle: {
+              // 坐标轴名称的样式
+              color: "#9b9ba4",
+            },
+            axisLabel: {
+              // 刻度标签的样式
+              hideOverlap: true, // 隐藏重叠的标签
+              color: "#9b9ba4",
+            },
+            axisLine: {
+              show: false,
+            },
+            minorTick: {
+              // 坐标轴刻度线相关配置
+              show: false,
+            },
+            splitLine: {
+              // 坐标轴在grid区域中的分割线
+              show: true,
+              lineStyle: {
+                type: "dashed",
+                color: "rgba(255, 255, 255, 0.3)",
+              },
+            },
+          },
+          legend: {
+            show: true,
+            // 图例配置
+            orient: "horizontal", // horizontal水平布局， vertical垂直布局
+            top: "20",
+            right: "30",
+            // backgroundColor: "#000000",
+            // borderColor: "#ccc",
+            // borderWidth: 0,
+            padding: 5,
+            itemGap: 10, // 各个item之间的距离
+            itemWidth: 10, // 图例图形宽度
+            itemHeight: 10, // 图例图形高度
+            borderRadius: 10,
+            textStyle: {
+              color: "#d7d8db",
+              fontSize: 9,
+            },
+            lineStyle: {
+              type: "dotted",
+              opacity: 0,
+            },
+          },
+          grid: {
+            left: "10%",
+            top: "25%",
+            right: "6%",
+            bottom: "12%",
+          },
+        },
+        option,
+        (objVal, srcVal) => {
+          if (isArray(objVal)) return srcVal;
+        }
+      );
+    },
+    async queryTopScollerDataInit() {
+      const { data } = await listTopScollerData();
+      this.XDATA = data.timelist;
+      this.showdata = data;
+      this.xtyl = parseFloat(data.sysprs).toFixed(2);
+      this.xtyw = parseFloat(data.systemp).toFixed(2);
+      this.xtywei = parseFloat(data.syslevel).toFixed(2);
+      this.xtyweicsz = parseFloat(data.syslevelinit).toFixed(2);
+      this.xtyweimin = parseFloat(data.levelmin).toFixed(2);
+      this.xtyweimax = parseFloat(data.levelmax).toFixed(2);
+      this.zbscll = parseFloat(data.sysflw).toFixed(2);
+      this.scxl = parseFloat(data.syseff).toFixed(2);
+      this.zdjsjgl = parseFloat(data.syspower).toFixed(2);
+      this.zdjdl = parseFloat(data.syscur.slice(-1)[0]).toFixed(2);
+      this.yykld4 = parseFloat(data.sysgran4).toFixed(2);
+      this.yykld6 = parseFloat(data.sysgran6).toFixed(2);
+      this.yykld14 = parseFloat(data.sysgran14).toFixed(2);
+      this.yykld21 = parseFloat(data.sysgran21).toFixed(2);
+      this.sjylData = [
+        parseFloat(data.prs1.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs2.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs3.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs4.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs5.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs6.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs7.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs8.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs9.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs10.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs11.slice(-1)[0]).toFixed(2),
+      ];
+      this.llylData = [
+        parseFloat(data.flw1.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw2.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw3.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw4.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw5.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw6.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw7.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw8.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw9.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw10.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw11.slice(-1)[0]).toFixed(2),
+      ];
+      this.initTopScollerCharts();
+    },
+    async queryTopScollerData() {
+      const { data } = await listTopScollerData();
+      this.XDATA = data.timelist;
+      this.xtyl = parseFloat(data.sysprs).toFixed(2);
+      this.xtyw = parseFloat(data.systemp).toFixed(2);
+      this.xtywei = parseFloat(data.syslevel).toFixed(2);
+      this.xtyweicsz = parseFloat(data.syslevelinit).toFixed(2);
+      this.xtyweimin = parseFloat(data.levelmin).toFixed(2);
+      this.xtyweimax = parseFloat(data.levelmax).toFixed(2);
+      this.zbscll = parseFloat(data.sysflw).toFixed(2);
+      this.scxl = parseFloat(data.syseff).toFixed(2);
+      this.zdjsjgl = parseFloat(data.syspower).toFixed(2);
+      this.showdata = data;
+      this.zdjdl = parseFloat(data.syscur.slice(-1)[0]).toFixed(2);
+      this.yykld4 = parseFloat(data.sysgran4).toFixed(2);
+      this.yykld6 = parseFloat(data.sysgran6).toFixed(2);
+      this.yykld14 = parseFloat(data.sysgran14).toFixed(2);
+      this.yykld21 = parseFloat(data.sysgran21).toFixed(2);
+      this.sjylData = [
+        parseFloat(data.prs1.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs2.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs3.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs4.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs5.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs6.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs7.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs8.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs9.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs10.slice(-1)[0]).toFixed(2),
+        parseFloat(data.prs11.slice(-1)[0]).toFixed(2),
+      ];
+      this.llylData = [
+        parseFloat(data.flw1.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw2.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw3.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw4.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw5.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw6.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw7.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw8.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw9.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw10.slice(-1)[0]).toFixed(2),
+        parseFloat(data.flw11.slice(-1)[0]).toFixed(2),
+      ];
+      this.refreshTopScollerCharts();
+    },
+    refreshTopScollerCharts() {
+      // 压区实际压力特性echarts
+      let sjylOption = this.sjylChart.getOption();
+      sjylOption.xAxis[0].data = this.XDATA;
+      sjylOption.series[0].data = this.showdata.prs1;
+      sjylOption.series[1].data = this.showdata.prs2;
+      sjylOption.series[2].data = this.showdata.prs3;
+      sjylOption.series[3].data = this.showdata.prs4;
+      sjylOption.series[4].data = this.showdata.prs5;
+      sjylOption.series[5].data = this.showdata.prs6;
+      sjylOption.series[6].data = this.showdata.prs7;
+      sjylOption.series[7].data = this.showdata.prs8;
+      sjylOption.series[8].data = this.showdata.prs9;
+      sjylOption.series[9].data = this.showdata.prs10;
+      sjylOption.series[10].data = this.showdata.prs11;
+      this.sjylChart.setOption(sjylOption);
+      // 实时电流echarts
+      let zdjdlOption = this.zdjdlCharts.getOption();
+      zdjdlOption.xAxis[0].data = this.XDATA;
+      zdjdlOption.series[0].data = this.showdata.syscur;
+      this.zdjdlCharts.setOption(zdjdlOption);
+      // 压区流量压力特性echarts
+      let llylOption = this.llylChart.getOption();
+      llylOption.xAxis[0].data = this.XDATA;
+      llylOption.series[0].data = this.showdata.flw1;
+      llylOption.series[1].data = this.showdata.flw2;
+      llylOption.series[2].data = this.showdata.flw3;
+      llylOption.series[3].data = this.showdata.flw4;
+      llylOption.series[4].data = this.showdata.flw5;
+      llylOption.series[5].data = this.showdata.flw6;
+      llylOption.series[6].data = this.showdata.flw7;
+      llylOption.series[7].data = this.showdata.flw8;
+      llylOption.series[8].data = this.showdata.flw9;
+      llylOption.series[9].data = this.showdata.flw10;
+      llylOption.series[10].data = this.showdata.flw11;
+      this.llylChart.setOption(llylOption);
+      // 油液颗粒度特性echarts
+      let yykldOption = this.yykldtxCharts.getOption();
+      yykldOption.series[0].data = [
+        this.yykld4,
+        this.yykld6,
+        this.yykld14,
+        this.yykld21,
+      ];
+      this.yykldtxCharts.setOption(yykldOption);
+      let dlndOption = this.dlndCharts.getOption();
+      dlndOption.series[0].data[0].value = parseFloat(
+        this.showdata.sysvisc
+      ).toFixed(2);
+      this.dlndCharts.setOption(dlndOption);
+      let xdsdOption = this.xdsdCharts.getOption();
+      xdsdOption.series[0].data[0].value = parseFloat(
+        this.showdata.syshumid
+      ).toFixed(2);
+      this.xdsdCharts.setOption(xdsdOption);
+      // 主要参数及echarts
+      let xtylOption = this.xtylCharts.getOption();
+      xtylOption.series[0].data[0].value = this.xtyl;
+      this.xtylCharts.setOption(xtylOption);
+      let xtywOption = this.xtywCharts.getOption();
+      xtywOption.series[0].data[0].value = this.xtyw;
+      this.xtywCharts.setOption(xtywOption);
+      let xtyweiOption = this.xtyweiCharts.getOption();
+      xtyweiOption.series[0].data = [this.xtywei];
+      this.xtyweiCharts.setOption(xtyweiOption);
+      let zbscllOption = this.zbscllCharts.getOption();
+      zbscllOption.series[0].data[0].value = this.zbscll;
+      this.zbscllCharts.setOption(zbscllOption);
+      let scxlOption = this.scxlCharts.getOption();
+      scxlOption.series[0].data[0].value = this.scxl;
+      this.scxlCharts.setOption(scxlOption);
+      let zdjsjglOption = this.zdjsjglCharts.getOption();
+      zdjsjglOption.series[0].data[0].value = this.zdjdl;
+      this.zdjsjglCharts.setOption(zdjsjglOption);
+    },
+    initTopScollerCharts() {
+      const xtyl = document.getElementById("xtyl"); //系统压力
+      this.xtylCharts = echarts.init(xtyl);
+      this.xtylCharts.setOption(
+        this.generateGaugeOption({
+          color: ["26DE86", "93DDBA"],
+          bgColor: "023E44",
+          name: "系统压力",
+          value: this.xtyl,
+          limit: 0.8,
+          unit: "bar",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.xtylCharts && this.xtylCharts.resize();
+      });
+
+      const xtyw = document.getElementById("xtyw"); //系统液温
+      this.xtywCharts = echarts.init(xtyw);
+      this.xtywCharts.setOption(
+        this.generateGaugeOption({
+          color: ["109CFB", "98DAFF"],
+          bgColor: "0D3F62",
+          name: "系统液温",
+          value: this.xtyw,
+          limit: 0.8,
+          unit: "℃",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.xtywCharts && this.xtywCharts.resize();
+      });
+
+      const xtywei = document.getElementById("xtywei"); //系统液位
+      this.xtyweiCharts = echarts.init(xtywei);
+      let yMax = 1;
+      let option = {
+        grid: {
+          bottom: "20%",
+          top: "20%",
+        },
+        title: {
+          show: false,
+          left: "center",
+          bottom: "bottom",
+          text: "系统液位(CP)",
+          textStyle: {
+            //标题内容的样式
+            color: "#ffffff",
+            fontWeight: "normal",
+            fontSize: 16,
+            color: "#188df0",
+          },
+        },
+        xAxis: {
+          data: ["数据", "占位"],
+          show: false,
+        },
+        yAxis: {
+          show: false,
+          max: yMax,
+        },
+        series: [
+          {
+            type: "bar",
+            showBackground: true,
+            backgroundStyle: {
+              color: "#0D3B59",
+            },
+            barWidth: "30",
+            label: {
+              show: true,
+              position: "top",
+              fontSize: 16,
+              color: "#fff",
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#00BFFF" },
+                { offset: 0.5, color: "#00FFDD" },
+                { offset: 1, color: "#00F28D" },
+              ]),
+            },
+            data: [this.xtywei],
+          },
+        ],
+      };
+      this.xtyweiCharts.setOption(option, true, true);
+      window.addEventListener("resize", () => {
+        this.xtyweiCharts && this.xtyweiCharts.resize();
+      });
+
+      const zbscll = document.getElementById("zbscll"); //泵输出流量
+      this.zbscllCharts = echarts.init(zbscll);
+      this.zbscllCharts.setOption(
+        this.generateGaugeOption({
+          color: ["2ACDDE", "92D8DD"],
+          bgColor: "023953",
+          name: "泵输出流量",
+          value: this.zbscll,
+          limit: 0.8,
+          unit: "L/min",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.zbscllCharts && this.zbscllCharts.resize();
+      });
+
+      const scxl = document.getElementById("scxl"); //输出效率
+      this.scxlCharts = echarts.init(scxl);
+      this.scxlCharts.setOption(
+        this.generateGaugeOption({
+          color: ["C010FB", "C898FF"],
+          bgColor: "2C2864",
+          name: "输出效率",
+          value: this.scxl,
+          limit: 0.8,
+          unit: "%",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.scxlCharts && this.scxlCharts.resize();
+      });
+
+      const zdjsjgl = document.getElementById("zdjsjgl"); //主电机实际功率
+      this.zdjsjglCharts = echarts.init(zdjsjgl);
+      this.zdjsjglCharts.setOption(
+        this.generateGaugeOption({
+          color: ["844AFF", "BAB9FF"],
+          bgColor: "373341",
+          name: "主电机实际功率",
+          value: this.zdjsjgl,
+          limit: 0.8,
+          unit: "KW",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.zdjsjglCharts && this.zdjsjglCharts.resize();
+      });
+
+      //ZFSC4中高底辊P/Q特性压区实际压力特性
+      const sjyltx = document.getElementById("sjyltx");
+      this.sjylChart = echarts.init(sjyltx);
+      let sjylOption = {
+        title: {
+          left: "center",
+          text: "压区实际压力特性",
+          textStyle: {
+            //标题内容的样式
+            color: "#ffffff",
+            fontWeight: "normal",
+            fontSize: 16,
+          },
+        },
+        // grid: {
+        //   left: "3%",
+        //   right: "4%",
+        //   bottom: "3%",
+        //   containLabel: true,
+        // },
+        // xAxis: [
+        //   {
+        //     type: "category",
+        //     boundaryGap: false,
+        //     data: this.XDATA,
+        //   },
+        // ],
+        yAxis: { name: "P (bar)" },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        series: [
+          {
+            name: "一区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs1,
+          },
+          {
+            name: "二区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs2,
+          },
+          {
+            name: "三区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs3,
+          },
+          {
+            name: "四区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs4,
+          },
+          {
+            name: "五区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs5,
+          },
+          {
+            name: "六区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs6,
+          },
+          {
+            name: "七区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs7,
+          },
+          {
+            name: "八区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs8,
+          },
+          {
+            name: "九区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs9,
+          },
+          {
+            name: "十区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.prs10,
+          },
+          {
+            name: "十一区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            symbol: "none",
+
+            data: this.showdata.prs11,
+          },
+        ],
+      };
+
+      this.sjylChart.setOption(this.generateOptions(sjylOption), true, true);
+      window.addEventListener("resize", () => {
+        this.sjylChart && this.sjylChart.resize();
+      });
+
+      //zdjdl 主电机电流
+      const zdjdl = document.getElementById("zdjdl");
+      this.zdjdlCharts = echarts.init(zdjdl);
+      this.zdjdlCharts.setOption(
+        this.generateOptions({
+          yAxis: { name: "I(A)" },
+          grid: {
+            left: "10%",
+            top: "12%",
+            right: "6%",
+            bottom: "12%",
+          },
+          series: [
+            {
+              name: "电流",
+              type: "line",
+              data: this.showdata.syscur,
+              symbol: "none",
+            },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.zdjdlCharts && this.zdjdlCharts.resize();
+      });
+
+      //ZFSC4中高底辊P/Q特性压区流量压力特性
+      const llyltx = document.getElementById("llyltx");
+      this.llylChart = echarts.init(llyltx);
+      let llylOption = {
+        title: {
+          left: "center",
+          text: "压区流量压力特性",
+          textStyle: {
+            //标题内容的样式
+            color: "#ffffff",
+            fontWeight: "normal",
+            fontSize: 16,
+          },
+        },
+        // grid: {
+        //   left: "3%",
+        //   right: "4%",
+        //   bottom: "3%",
+        //   containLabel: true,
+        // },
+        // xAxis: [
+        //   {
+        //     type: "category",
+        //     boundaryGap: false,
+        //     data: this.XDATA,
+        //   },
+        // ],
+        yAxis: { name: "Q (L/min)" },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        series: [
+          {
+            name: "一区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw1,
+          },
+          {
+            name: "二区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw2,
+          },
+          {
+            name: "三区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw3,
+          },
+          {
+            name: "四区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw4,
+          },
+          {
+            name: "五区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw5,
+          },
+          {
+            name: "六区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw6,
+          },
+          {
+            name: "七区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw7,
+          },
+          {
+            name: "八区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw8,
+          },
+          {
+            name: "九区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw9,
+          },
+          {
+            name: "十区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw10,
+          },
+          {
+            name: "十一区",
+            type: "line",
+            // smooth: true, // 是否平滑
+            symbol: "none",
+            data: this.showdata.flw11,
+          },
+        ],
+      };
+      this.llylChart.setOption(this.generateOptions(llylOption), true, true);
+      window.addEventListener("resize", () => {
+        this.llylChart && this.llylChart.resize();
+      });
+
+      //yykldtx 颗粒度特性
+      const yykldtx = document.getElementById("yykldtx");
+      this.yykldtxCharts = echarts.init(yykldtx);
+      this.yykldtxCharts.setOption(
+        this.generateOptions2({
+          title: {
+            left: "center",
+            text: "油液颗粒度特性",
+            textStyle: {
+              //标题内容的样式
+              color: "#ffffff",
+              fontWeight: "normal",
+              fontSize: 16,
+            },
+          },
+          xAxis: {
+            data: ["4um", "6um", "14um", "21um"],
+          },
+          yAxis: {
+            name: "PM",
+            min: 0,
+            max: 1,
+            interval: 0.2, // 指定刻度间隔
+          },
+          series: [
+            {
+              name: "颗粒度",
+              type: "bar",
+              barWidth: "30",
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#83bff6" },
+                  { offset: 0.5, color: "#188df0" },
+                  { offset: 1, color: "#188df0" },
+                ]),
+              },
+              data: [this.yykld4, this.yykld6, this.yykld14, this.yykld21],
+              symbol: "none",
+            },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.yykldtxCharts && this.yykldtxCharts.resize();
+      });
+      //dlnd 动力粘度
+      const dlnd = document.getElementById("dlnd"); //系统压力
+      this.dlndCharts = echarts.init(dlnd);
+      this.dlndCharts.setOption(
+        this.generateGaugeOption2({
+          color: ["00F28D", "00FFDD", "00BFFF"],
+          bgColor: "87a6a8",
+          name: "粘度",
+          value: parseFloat(this.showdata.sysvisc).toFixed(2),
+          limit: 0.8,
+          unit: "mm2/s",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.dlndCharts && this.dlndCharts.resize();
+      });
+      //xdsd 湿度
+      const xdsd = document.getElementById("xdsd"); //系统压力
+      this.xdsdCharts = echarts.init(xdsd);
+      this.xdsdCharts.setOption(
+        this.generateGaugeOption2({
+          color: ["00F28D", "00FFDD", "00BFFF"],
+          bgColor: "87a6a8",
+          name: "湿度",
+          value: parseFloat(this.showdata.syshumid).toFixed(2),
+          limit: 0.8,
+          unit: "%",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.xdsdCharts && this.xdsdCharts.resize();
+      });
+    },
+    async queryBottomCylDataInit() {
+      const { data } = await listBottomCylData();
+      // console.log("数据：", data);
+      this.showdata = data;
+      this.XDATA = data.timelist;
+      this.cylxtyl = parseFloat(data.sysprs).toFixed(2); //压力
+      this.cylxtyw = parseFloat(data.systemp).toFixed(2); //液温
+      this.cylxtywei = parseFloat(data.syslevel).toFixed(2); //液位
+      this.cylxtyweicsz = parseFloat(data.syslevelinit).toFixed(2); //液位初始
+      this.cylxtyweimin = parseFloat(data.levelmin).toFixed(2); //液位最小
+      this.cylxtyweimax = parseFloat(data.levelmax).toFixed(2); //液位最大
+      this.bscll = parseFloat(data.sysflw).toFixed(2); //泵流量
+      this.cylscxl = parseFloat(data.syseff).toFixed(2); //效率
+      this.cylzdjsjgl = parseFloat(data.syspower).toFixed(2); //电机实机功率
+      this.cylzdjdl = parseFloat(data.syscur.slice(-1)[0]).toFixed(2); //主电机电流
+      this.cylyykld4 = parseFloat(data.sysgran4).toFixed(2); //4mm颗粒
+      this.cylyykld6 = parseFloat(data.sysgran6).toFixed(2); //6mm颗粒
+      this.cylyykld14 = parseFloat(data.sysgran14).toFixed(2); //14mm颗粒
+      this.cylyykld21 = parseFloat(data.sysgran21).toFixed(2); //21mm颗粒
+      // // 平衡缸
+      this.tsrgsjyl = parseFloat(data.oprsoftrealpress.slice(-1)[0]).toFixed(2); //操作侧软辊实际压力
+      this.tsregsjyl = parseFloat(data.oprhotrealpress.slice(-1)[0]).toFixed(2); //热辊实际
+      this.tsreghgyl = parseFloat(data.oprhotbondpress.slice(-1)[0]).toFixed(2); //热辊合辊压力
+      this.tsregjyyl = parseFloat(data.oprhotactpress.slice(-1)[0]).toFixed(2); //热辊加压压力
+      this.tsrghgyl = parseFloat(data.oprsoftbondpress.slice(-1)[0]).toFixed(2); //软辊合辊
+      this.tsrgjyyl = parseFloat(data.oprsoftactpress.slice(-1)[0]).toFixed(2); //软辊加压
+      this.dsrgsjyl = parseFloat(data.drivensoftrealpress.slice(-1)[0]).toFixed(
+        2
+      ); //传动侧软辊实际
+      this.dsregsjyl = parseFloat(data.drivenhotrealpress.slice(-1)[0]).toFixed(
+        2
+      ); //热辊实际
+      this.dsreghgyl = parseFloat(data.drivenhotbondpress.slice(-1)[0]).toFixed(
+        2
+      ); //热辊合辊压力
+      this.dsregjyyl = parseFloat(data.drivenhotactpress.slice(-1)[0]).toFixed(
+        2
+      ); //热辊加压压力
+      this.dsrghgyl = parseFloat(data.drivensoftbondpress.slice(-1)[0]).toFixed(
+        2
+      ); //软辊合辊
+      this.dsrgjyyl = parseFloat(data.drivensoftactpress.slice(-1)[0]).toFixed(
+        2
+      ); //软辊加压
+      this.cdcrgll = parseFloat(data.oprsoftflw.slice(-1)[0]).toFixed(2); //操作侧软辊流量
+      this.cdcregll = parseFloat(data.oprhotflw.slice(-1)[0]).toFixed(2); //操作侧热辊流量
+      this.czcrgll = parseFloat(data.drivensoftflw.slice(-1)[0]).toFixed(2); //传动侧软辊流量
+      this.czcregll = parseFloat(data.drivenhotflw.slice(-1)[0]).toFixed(2); //传动侧软辊流量
+      // 加压压区
+      this.dgcdcblsff = parseFloat(
+        data.drivenbottomsetpress.slice(-1)[0]
+      ).toFixed(2); //底缸传动侧设定压力
+      this.dgcdcbljyf = parseFloat(data.drivenbottompress.slice(-1)[0]).toFixed(
+        2
+      ); //底缸传动侧实际压力
+      this.dgcdcygwy = parseFloat(data.drivenbottomdis.slice(-1)[0]).toFixed(2); //底缸传动侧实际位置
+      this.dgczcblsff = parseFloat(data.oprbottomsetpress.slice(-1)[0]).toFixed(
+        2
+      ); //底缸操作侧设定压力
+      this.dgczcbljyf = parseFloat(data.oprbottompress.slice(-1)[0]).toFixed(2); //底缸操作侧实际压力
+      this.dgczcygwy = parseFloat(data.oprbottomdis.slice(-1)[0]).toFixed(2); //底缸操作侧实际位置
+      this.initBottomCylCharts();
+    },
+    async queryBottomCylData() {
+      const { data } = await listBottomCylData();
+      // console.log("数据：", data);
+      this.showdata = data;
+      this.XDATA = data.timelist;
+      this.cylxtyl = parseFloat(data.sysprs).toFixed(2); //压力
+      this.cylxtyw = parseFloat(data.systemp).toFixed(2); //液温
+      this.cylxtywei = parseFloat(data.syslevel).toFixed(2); //液位
+      this.cylxtyweicsz = parseFloat(data.syslevelinit).toFixed(2); //液位初始
+      this.cylxtyweimin = parseFloat(data.levelmin).toFixed(2); //液位最小
+      this.cylxtyweimax = parseFloat(data.levelmax).toFixed(2); //液位最大
+      this.bscll = parseFloat(data.sysflw).toFixed(2); //泵流量
+      this.cylscxl = parseFloat(data.syseff).toFixed(2); //效率
+      this.cylzdjsjgl = parseFloat(data.syspower).toFixed(2); //电机实机功率
+      this.cylzdjdl = parseFloat(data.syscur.slice(-1)[0]).toFixed(2); //主电机电流
+      this.cylyykld4 = parseFloat(data.sysgran4).toFixed(2); //4mm颗粒
+      this.cylyykld6 = parseFloat(data.sysgran6).toFixed(2); //6mm颗粒
+      this.cylyykld14 = parseFloat(data.sysgran14).toFixed(2); //14mm颗粒
+      this.cylyykld21 = parseFloat(data.sysgran21).toFixed(2); //21mm颗粒
+      // // 平衡缸
+      this.tsrgsjyl = parseFloat(data.oprsoftrealpress.slice(-1)[0]).toFixed(2); //操作侧软辊实际压力
+      this.tsregsjyl = parseFloat(data.oprhotrealpress.slice(-1)[0]).toFixed(2); //热辊实际
+      this.tsreghgyl = parseFloat(data.oprhotbondpress.slice(-1)[0]).toFixed(2); //热辊合辊压力
+      this.tsregjyyl = parseFloat(data.oprhotactpress.slice(-1)[0]).toFixed(2); //热辊加压压力
+      this.tsrghgyl = parseFloat(data.oprsoftbondpress.slice(-1)[0]).toFixed(2); //软辊合辊
+      this.tsrgjyyl = parseFloat(data.oprsoftactpress.slice(-1)[0]).toFixed(2); //软辊加压
+      this.dsrgsjyl = parseFloat(data.drivensoftrealpress.slice(-1)[0]).toFixed(
+        2
+      ); //传动侧软辊实际
+      this.dsregsjyl = parseFloat(data.drivenhotrealpress.slice(-1)[0]).toFixed(
+        2
+      ); //热辊实际
+      this.dsreghgyl = parseFloat(data.drivenhotbondpress.slice(-1)[0]).toFixed(
+        2
+      ); //热辊合辊压力
+      this.dsregjyyl = parseFloat(data.drivenhotactpress.slice(-1)[0]).toFixed(
+        2
+      ); //热辊加压压力
+      this.dsrghgyl = parseFloat(data.drivensoftbondpress.slice(-1)[0]).toFixed(
+        2
+      ); //软辊合辊
+      this.dsrgjyyl = parseFloat(data.drivensoftactpress.slice(-1)[0]).toFixed(
+        2
+      ); //软辊加压
+      this.cdcrgll = parseFloat(data.oprsoftflw.slice(-1)[0]).toFixed(2); //操作侧软辊流量
+      this.cdcregll = parseFloat(data.oprhotflw.slice(-1)[0]).toFixed(2); //操作侧热辊流量
+      this.czcrgll = parseFloat(data.drivensoftflw.slice(-1)[0]).toFixed(2); //传动侧软辊流量
+      this.czcregll = parseFloat(data.drivenhotflw.slice(-1)[0]).toFixed(2); //传动侧软辊流量
+      // 加压压区
+      this.dgcdcblsff = parseFloat(data.oprbottomsetpress.slice(-1)[0]).toFixed(
+        2
+      ); //底缸传动侧设定压力
+      this.dgcdcbljyf = parseFloat(data.drivenbottompress.slice(-1)[0]).toFixed(
+        2
+      ); //底缸传动侧实际压力
+      this.dgcdcygwy = parseFloat(data.drivenbottomdis.slice(-1)[0]).toFixed(2); //底缸传动侧实际位置
+      this.dgczcblsff = parseFloat(data.oprbottomsetpress.slice(-1)[0]).toFixed(
+        2
+      ); //底缸操作侧设定压力
+      this.dgczcbljyf = parseFloat(data.oprbottompress.slice(-1)[0]).toFixed(2); //底缸操作侧实际压力
+      this.dgczcygwy = parseFloat(data.oprbottomdis.slice(-1)[0]).toFixed(2); //底缸操作侧实际位置
+      this.refreshBottomCylCharts();
+    },
+    refreshBottomCylCharts() {
+      // 油液颗粒度特性echarts
+      let yykldOption = this.cylyykldtxCharts.getOption();
+      yykldOption.series[0].data = [
+        this.cylyykld4,
+        this.cylyykld6,
+        this.cylyykld14,
+        this.cylyykld21,
+      ];
+      this.cylyykldtxCharts.setOption(yykldOption);
+      let dlndOption = this.cyldlndCharts.getOption();
+      dlndOption.series[0].data[0].value = parseFloat(
+        this.showdata.sysvisc
+      ).toFixed(2);
+      this.cyldlndCharts.setOption(dlndOption);
+      let xdsdOption = this.cylxdsdCharts.getOption();
+      xdsdOption.series[0].data[0].value = parseFloat(
+        this.showdata.syshumid
+      ).toFixed(2);
+      this.cylxdsdCharts.setOption(xdsdOption);
+      // 主要参数及echarts
+      let xtylOption = this.cylxtylCharts.getOption();
+      xtylOption.series[0].data[0].value = this.cylxtyl;
+      this.cylxtylCharts.setOption(xtylOption);
+      let xtywOption = this.cylxtywCharts.getOption();
+      xtywOption.series[0].data[0].value = this.cylxtyw;
+      this.cylxtywCharts.setOption(xtywOption);
+      let xtyweiOption = this.cylxtyweiCharts.getOption();
+      xtyweiOption.series[0].data = [this.cylxtywei];
+      this.cylxtyweiCharts.setOption(xtyweiOption);
+      let bscllOption = this.bscllCharts.getOption();
+      bscllOption.series[0].data[0].value = this.bscll;
+      this.bscllCharts.setOption(bscllOption);
+      let scxlOption = this.cylscxlCharts.getOption();
+      scxlOption.series[0].data[0].value = this.cylscxl;
+      this.cylscxlCharts.setOption(scxlOption);
+      let zdjsjglOption = this.cylzdjsjglCharts.getOption();
+      zdjsjglOption.series[0].data[0].value = this.cylzdjsjgl;
+      this.cylzdjsjglCharts.setOption(zdjsjglOption);
+      // 实时电流echarts
+      let zdjdlOption = this.cylzdjdlCharts.getOption();
+      zdjdlOption.xAxis[0].data = this.XDATA;
+      zdjdlOption.series[0].data = this.showdata.syscur;
+      this.cylzdjdlCharts.setOption(zdjdlOption);
+      // ZFSC4超压平衡缸P/Q特性
+      let cdcjyylqxOption = this.cdcjyylqxCharts.getOption();
+      cdcjyylqxOption.xAxis[0].data = this.XDATA;
+      cdcjyylqxOption.series[0].data = this.showdata.drivensoftrealpress;
+      cdcjyylqxOption.series[1].data = this.showdata.drivenhotrealpress;
+      // cdcjyylqxOption.series[0].markLine.data[0].yAxis =
+      //   this.showdata.drivensoftbondpress.slice(-1)[0];
+      // cdcjyylqxOption.series[0].markLine.data[1].yAxis =
+      //   this.showdata.drivensoftactpress.slice(-1)[0];
+      // cdcjyylqxOption.series[1].markLine.data[0].yAxis =
+      //   this.showdata.drivenhotbondpress.slice(-1)[0];
+      // cdcjyylqxOption.series[1].markLine.data[1].yAxis =
+      //   this.showdata.drivenhotactpress.slice(-1)[0];
+      // cdcjyylqxOption.series[2].data = this.showdata.dsrghgyl;
+      // cdcjyylqxOption.series[3].data = this.showdata.dsrgjyyl;
+      // cdcjyylqxOption.series[4].data = this.showdata.dsreghgyl;
+      // cdcjyylqxOption.series[5].data = this.showdata.dsregjyyl;
+      this.cdcjyylqxCharts.setOption(cdcjyylqxOption);
+
+      let cdcllbhqxOption = this.cdcllbhqxCharts.getOption();
+      cdcllbhqxOption.xAxis[0].data = this.XDATA;
+      cdcllbhqxOption.series[0].data = this.showdata.oprsoftflw;
+      cdcllbhqxOption.series[1].data = this.showdata.oprhotflw;
+      this.cdcllbhqxCharts.setOption(cdcllbhqxOption);
+
+      let czcjyylqxOption = this.czcjyylqxCharts.getOption();
+      czcjyylqxOption.xAxis[0].data = this.XDATA;
+      czcjyylqxOption.series[0].data = this.showdata.oprsoftrealpress;
+      czcjyylqxOption.series[1].data = this.showdata.oprhotrealpress;
+      // czcjyylqxOption.series[0].markLine.data[0].yAxis =
+      //   this.showdata.oprsoftbondpress.slice(-1)[0];
+      // czcjyylqxOption.series[0].markLine.data[1].yAxis =
+      //   this.showdata.oprsoftactpress.slice(-1)[0];
+      // czcjyylqxOption.series[1].markLine.data[0].yAxis =
+      //   this.showdata.oprhotbondpress.slice(-1)[0];
+      // czcjyylqxOption.series[1].markLine.data[1].yAxis =
+      //   this.showdata.oprhotactpress.slice(-1)[0];
+      // czcjyylqxOption.series[2].data = this.showdata.tsrghgyl;
+      // czcjyylqxOption.series[3].data = this.showdata.tsrgjyyl;
+      // czcjyylqxOption.series[4].data = this.showdata.tsreghgyl;
+      // czcjyylqxOption.series[5].data = this.showdata.tsregjyyl;
+      this.czcjyylqxCharts.setOption(czcjyylqxOption);
+
+      let czcllbhqxOption = this.czcllbhqxCharts.getOption();
+      czcllbhqxOption.xAxis[0].data = this.XDATA;
+      czcllbhqxOption.series[0].data = this.showdata.drivensoftflw;
+      czcllbhqxOption.series[1].data = this.showdata.drivenhotflw;
+      this.czcllbhqxCharts.setOption(czcllbhqxOption);
+      // ZFSC4超压底缸加压压区P/Q特性
+      let cdcylbhqxOption = this.cdcylbhqxCharts.getOption();
+      cdcylbhqxOption.xAxis[0].data = this.XDATA;
+      cdcylbhqxOption.series[0].data = this.showdata.drivenbottompress;
+      // cdcylbhqxOption.series[0].markLine.data[0].yAxis =
+      //   this.showdata.oprbottomsetpress.slice(-1)[0];
+      // cdcylbhqxOption.series[1].data = this.showdata.dgcdcblsff;
+      this.cdcylbhqxCharts.setOption(cdcylbhqxOption);
+
+      let czcylbhqxOption = this.czcylbhqxCharts.getOption();
+      czcylbhqxOption.xAxis[0].data = this.XDATA;
+      czcylbhqxOption.series[0].data = this.showdata.oprbottompress;
+      // czcylbhqxOption.series[0].markLine.data[0].yAxis =
+      //   this.showdata.oprbottomsetpress.slice(-1)[0];
+      // czcylbhqxOption.series[1].data = this.showdata.dgczcblsff;
+      this.czcylbhqxCharts.setOption(czcylbhqxOption);
+
+      let cdcdgwytxOption = this.cdcdgwytxCharts.getOption();
+      cdcdgwytxOption.xAxis[0].data = this.XDATA;
+      cdcdgwytxOption.series[0].data = this.showdata.drivenbottomdis;
+      this.cdcdgwytxCharts.setOption(cdcdgwytxOption);
+
+      let czcdgwytxOption = this.czcdgwytxCharts.getOption();
+      czcdgwytxOption.xAxis[0].data = this.XDATA;
+      czcdgwytxOption.series[0].data = this.showdata.oprbottomdis;
+      this.czcdgwytxCharts.setOption(czcdgwytxOption);
+    },
+    initBottomCylCharts() {
+      const xtyl = document.getElementById("cylxtyl"); //系统压力
+      this.cylxtylCharts = echarts.init(xtyl);
+      this.cylxtylCharts.setOption(
+        this.generateGaugeOption({
+          color: ["26DE86", "93DDBA"],
+          bgColor: "023E44",
+          name: "系统压力",
+          value: this.cylxtyl,
+          limit: 0.8,
+          unit: "bar",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.cylxtylCharts && this.cylxtylCharts.resize();
+      });
+
+      const xtyw = document.getElementById("cylxtyw"); //系统液温
+      this.cylxtywCharts = echarts.init(xtyw);
+      this.cylxtywCharts.setOption(
+        this.generateGaugeOption({
+          color: ["109CFB", "98DAFF"],
+          bgColor: "0D3F62",
+          name: "系统液温",
+          value: this.cylxtyw,
+          limit: 0.8,
+          unit: "℃",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.cylxtywCharts && this.cylxtywCharts.resize();
+      });
+
+      const xtywei = document.getElementById("cylxtywei"); //系统液位
+      this.cylxtyweiCharts = echarts.init(xtywei);
+      let yMax = 1;
+      let option = {
+        grid: {
+          bottom: "10%",
+          top: "20%",
+        },
+        title: {
+          show: false,
+          left: "center",
+          bottom: "bottom",
+          text: "系统液位(CP)",
+          textStyle: {
+            //标题内容的样式
+            color: "#ffffff",
+            fontWeight: "normal",
+            fontSize: 16,
+            color: "#188df0",
+          },
+        },
+        xAxis: {
+          data: ["数据", "占位"],
+          show: false,
+        },
+        yAxis: {
+          show: false,
+          max: yMax,
+        },
+        series: [
+          {
+            type: "bar",
+            showBackground: true,
+            backgroundStyle: {
+              color: "#0D3B59",
+            },
+            barWidth: "30",
+            label: {
+              show: true,
+              position: "top",
+              fontSize: 16,
+              color: "#fff",
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#00BFFF" },
+                { offset: 0.5, color: "#00FFDD" },
+                { offset: 1, color: "#00F28D" },
+              ]),
+            },
+            data: [this.cylxtywei],
+          },
+        ],
+      };
+      this.cylxtyweiCharts.setOption(option, true, true);
+      window.addEventListener("resize", () => {
+        this.cylxtyweiCharts && this.cylxtyweiCharts.resize();
+      });
+
+      const bscll = document.getElementById("bscll"); //泵输出流量
+      this.bscllCharts = echarts.init(bscll);
+      this.bscllCharts.setOption(
+        this.generateGaugeOption({
+          color: ["2ACDDE", "92D8DD"],
+          bgColor: "023953",
+          name: "泵输出流量",
+          value: this.bscll,
+          limit: 0.8,
+          unit: "L/min",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.bscllCharts && this.bscllCharts.resize();
+      });
+
+      const scxl = document.getElementById("cylscxl"); //输出效率
+      this.cylscxlCharts = echarts.init(scxl);
+      this.cylscxlCharts.setOption(
+        this.generateGaugeOption({
+          color: ["C010FB", "C898FF"],
+          bgColor: "2C2864",
+          name: "输出效率",
+          value: this.cylscxl,
+          limit: 0.8,
+          unit: "%",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.cylscxlCharts && this.cylscxlCharts.resize();
+      });
+
+      const zdjsjgl = document.getElementById("cylzdjsjgl"); //主电机实际功率
+      this.cylzdjsjglCharts = echarts.init(zdjsjgl);
+      this.cylzdjsjglCharts.setOption(
+        this.generateGaugeOption({
+          color: ["844AFF", "BAB9FF"],
+          bgColor: "373341",
+          name: "主电机实际功率",
+          value: this.cylzdjsjgl,
+          limit: 0.8,
+          unit: "KW",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.cylzdjsjglCharts && this.cylzdjsjglCharts.resize();
+      });
+
+      //ZFSC4超压平衡缸P/Q特性
+      //传动侧加压压力变化曲线
+      const cdcjyylqx = document.getElementById("cdcjyylqx");
+      this.cdcjyylqxCharts = echarts.init(cdcjyylqx);
+      this.cdcjyylqxCharts.setOption(
+        this.generateOptions({
+          title: {
+            left: "center",
+            text: "传动侧加压压力变化曲线",
+            textStyle: {
+              //标题内容的样式
+              color: "#ffffff",
+              fontWeight: "normal",
+              fontSize: 16,
+            },
+          },
+          yAxis: { name: "P(bar)" },
+          series: [
+            {
+              name: "软辊实际压力",
+              type: "line",
+              areaStyle: {
+                opacity: 0.2,
+              },
+              data: this.showdata.drivensoftrealpress,
+              symbol: "none",
+            },
+            {
+              name: "热辊实际压力",
+              type: "line",
+              areaStyle: {
+                opacity: 0.2,
+              },
+              data: this.showdata.drivenhotrealpress,
+              symbol: "none",
+            },
+            // {
+            //   name: "软辊合辊压力",
+            //   type: "line",
+            //   areaStyle: {
+            //     opacity: 0.2,
+            //   },
+            //   data: this.showdata.dsrghgyl,
+            //   symbol: "none",
+            // },
+            // {
+            //   name: "软辊加压压力",
+            //   type: "line",
+            //   areaStyle: {
+            //     opacity: 0.2,
+            //   },
+            //   data: this.showdata.dsrgjyyl,
+            //   symbol: "none",
+            // },
+            // {
+            //   name: "热辊合辊压力",
+            //   type: "line",
+            //   areaStyle: {
+            //     opacity: 0.2,
+            //   },
+            //   data: this.showdata.dsreghgyl,
+            //   symbol: "none",
+            // },
+            // {
+            //   name: "热辊加压压力",
+            //   type: "line",
+            //   areaStyle: {
+            //     opacity: 0.2,
+            //   },
+            //   data: this.showdata.dsregjyyl,
+            //   symbol: "none",
+            // },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.cdcjyylqxCharts && this.cdcjyylqxCharts.resize();
+      });
+      //传动侧流量变化曲线
+      const cdcllbhqx = document.getElementById("cdcllbhqx");
+      this.cdcllbhqxCharts = echarts.init(cdcllbhqx);
+      this.cdcllbhqxCharts.setOption(
+        this.generateOptions({
+          title: {
+            left: "center",
+            text: "传动侧流量变化曲线",
+            textStyle: {
+              //标题内容的样式
+              color: "#ffffff",
+              fontWeight: "normal",
+              fontSize: 16,
+            },
+          },
+          yAxis: { name: "Q(L/min)" },
+          series: [
+            {
+              name: "软辊",
+              type: "line",
+              areaStyle: {
+                opacity: 0.2,
+              },
+              data: this.showdata.oprsoftflw,
+              symbol: "none",
+            },
+            {
+              name: "热辊",
+              type: "line",
+              areaStyle: {
+                opacity: 0.2,
+              },
+              data: this.showdata.oprhotflw,
+              symbol: "none",
+            },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.cdcllbhqxCharts && this.cdcllbhqxCharts.resize();
+      });
+      //操作侧加压压力变化曲线
+      const czcjyylqx = document.getElementById("czcjyylqx");
+      this.czcjyylqxCharts = echarts.init(czcjyylqx);
+      this.czcjyylqxCharts.setOption(
+        this.generateOptions({
+          title: {
+            left: "center",
+            text: "操作侧加压压力变化曲线",
+            textStyle: {
+              //标题内容的样式
+              color: "#ffffff",
+              fontWeight: "normal",
+              fontSize: 16,
+            },
+          },
+          yAxis: { name: "P(bar)" },
+          series: [
+            {
+              name: "软辊实际压力",
+              type: "line",
+              areaStyle: {
+                opacity: 0.2,
+              },
+              data: this.showdata.oprsoftrealpress,
+              symbol: "none",
+            },
+            {
+              name: "热辊实际压力",
+              type: "line",
+              areaStyle: {
+                opacity: 0.2,
+              },
+              data: this.showdata.oprhotrealpress,
+              symbol: "none",
+            },
+            // {
+            //   name: "软辊合辊压力",
+            //   type: "line",
+            //   areaStyle: {
+            //     opacity: 0.2,
+            //   },
+            //   data: this.showdata.tsrghgyl,
+            //   symbol: "none",
+            // },
+            // {
+            //   name: "软辊加压压力",
+            //   type: "line",
+            //   areaStyle: {
+            //     opacity: 0.2,
+            //   },
+            //   data: this.showdata.tsrgjyyl,
+            //   symbol: "none",
+            // },
+            // {
+            //   name: "热辊合辊压力",
+            //   type: "line",
+            //   areaStyle: {
+            //     opacity: 0.2,
+            //   },
+            //   data: this.showdata.tsreghgyl,
+            //   symbol: "none",
+            // },
+            // {
+            //   name: "热辊加压压力",
+            //   type: "line",
+            //   areaStyle: {
+            //     opacity: 0.2,
+            //   },
+            //   data: this.showdata.tsregjyyl,
+            //   symbol: "none",
+            // },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.czcjyylqxCharts && this.czcjyylqxCharts.resize();
+      });
+      //操作侧流量变化曲线
+      const czcllbhqx = document.getElementById("czcllbhqx");
+      this.czcllbhqxCharts = echarts.init(czcllbhqx);
+      this.czcllbhqxCharts.setOption(
+        this.generateOptions({
+          title: {
+            left: "center",
+            text: "操作侧流量变化曲线",
+            textStyle: {
+              //标题内容的样式
+              color: "#ffffff",
+              fontWeight: "normal",
+              fontSize: 16,
+            },
+          },
+          yAxis: { name: "Q(L/min)" },
+          series: [
+            {
+              name: "软辊",
+              type: "line",
+              areaStyle: {
+                opacity: 0.2,
+              },
+              data: this.showdata.drivensoftflw,
+              symbol: "none",
+            },
+            {
+              name: "热辊",
+              type: "line",
+              areaStyle: {
+                opacity: 0.2,
+              },
+              data: this.showdata.drivenhotflw,
+              symbol: "none",
+            },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.czcllbhqxCharts && this.czcllbhqxCharts.resize();
+      });
+
+      //zdjdl 主电机电流
+      const zdjdl = document.getElementById("cylzdjdl");
+      this.cylzdjdlCharts = echarts.init(zdjdl);
+      this.cylzdjdlCharts.setOption(
+        this.generateOptions({
+          yAxis: { name: "I(A)" },
+          grid: {
+            left: "10%",
+            top: "12%",
+            right: "6%",
+            bottom: "12%",
+          },
+          series: [
+            {
+              name: "电流",
+              type: "line",
+              areaStyle: {
+                opacity: 0.2,
+              },
+              data: this.showdata.syscur,
+              symbol: "none",
+            },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.cylzdjdlCharts && this.cylzdjdlCharts.resize();
+      });
+      //传动侧压力变化曲线
+      const cdcylbhqx = document.getElementById("cdcylbhqx");
+      this.cdcylbhqxCharts = echarts.init(cdcylbhqx);
+      this.cdcylbhqxCharts.setOption(
+        this.generateOptions({
+          title: {
+            left: "center",
+            text: "传动侧压力变化曲线",
+            textStyle: {
+              //标题内容的样式
+              color: "#ffffff",
+              fontWeight: "normal",
+              fontSize: 16,
+            },
+          },
+          yAxis: { name: "P(bar)" },
+          series: [
+            {
+              name: "底缸加压实际压力",
+              type: "line",
+              areaStyle: {
+                opacity: 0.2,
+              },
+              data: this.showdata.oprbottompress,
+              symbol: "none",
+            },
+            // {
+            //   name: "底缸加压设定压力",
+            //   type: "line",
+            //   areaStyle: {
+            //     opacity: 0.2,
+            //   },
+            //   data: this.showdata.dgcdcblsff,
+            //   symbol: "none",
+            // },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.cdcylbhqxCharts && this.cdcylbhqxCharts.resize();
+      });
+      //操作侧压力变化曲线
+      const czcylbhqx = document.getElementById("czcylbhqx");
+      this.czcylbhqxCharts = echarts.init(czcylbhqx);
+      this.czcylbhqxCharts.setOption(
+        this.generateOptions({
+          title: {
+            left: "center",
+            text: "操作侧压力变化曲线",
+            textStyle: {
+              //标题内容的样式
+              color: "#ffffff",
+              fontWeight: "normal",
+              fontSize: 16,
+            },
+          },
+          yAxis: { name: "P(bar)" },
+          series: [
+            {
+              name: "底缸加压实际压力",
+              type: "line",
+              areaStyle: {
+                opacity: 0.2,
+              },
+              data: this.showdata.drivenbottompress,
+              symbol: "none",
+            },
+            // {
+            //   name: "底缸加压设定压力",
+            //   type: "line",
+            //   areaStyle: {
+            //     opacity: 0.2,
+            //   },
+            //   data: this.showdata.dgczcblsff,
+            //   symbol: "none",
+            // },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.czcylbhqxCharts && this.czcylbhqxCharts.resize();
+      });
+      //传动侧底缸位移特性
+      const cdcdgwytx = document.getElementById("cdcdgwytx");
+      this.cdcdgwytxCharts = echarts.init(cdcdgwytx);
+      this.cdcdgwytxCharts.setOption(
+        this.generateOptions({
+          title: {
+            left: "center",
+            text: "传动侧底缸位移特性",
+            textStyle: {
+              //标题内容的样式
+              color: "#ffffff",
+              fontWeight: "normal",
+              fontSize: 16,
+            },
+          },
+          yAxis: { name: "L(mm)" },
+          series: [
+            {
+              name: "位移",
+              type: "line",
+              areaStyle: {
+                opacity: 0.2,
+              },
+              data: this.showdata.drivenbottomdis,
+              symbol: "none",
+            },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.cdcdgwytxCharts && this.cdcdgwytxCharts.resize();
+      });
+      //操作侧底缸位移特性
+      const czcdgwytx = document.getElementById("czcdgwytx");
+      this.czcdgwytxCharts = echarts.init(czcdgwytx);
+      this.czcdgwytxCharts.setOption(
+        this.generateOptions({
+          title: {
+            left: "center",
+            text: "操作侧底缸位移特性",
+            textStyle: {
+              //标题内容的样式
+              color: "#ffffff",
+              fontWeight: "normal",
+              fontSize: 16,
+            },
+          },
+          yAxis: { name: "L(mm)" },
+          series: [
+            {
+              name: "位移",
+              type: "line",
+              areaStyle: {
+                opacity: 0.2,
+              },
+              data: this.showdata.oprbottomdis,
+              symbol: "none",
+            },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.czcdgwytxCharts && this.czcdgwytxCharts.resize();
+      });
+
+      //dlnd 动力粘度
+      const dlnd = document.getElementById("cyldlnd"); //系统压力
+      this.cyldlndCharts = echarts.init(dlnd);
+      this.cyldlndCharts.setOption(
+        this.generateGaugeOption2({
+          color: ["00F28D", "00FFDD", "00BFFF"],
+          bgColor: "87a6a8",
+          name: "粘度",
+          value: parseFloat(this.showdata.sysvisc).toFixed(2),
+          limit: 0.8,
+          unit: "mm2/s",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.cyldlndCharts && this.cyldlndCharts.resize();
+      });
+      //yykldtx 颗粒度特性
+      const yykldtx = document.getElementById("cylyykldtx");
+      this.cylyykldtxCharts = echarts.init(yykldtx);
+      this.cylyykldtxCharts.setOption(
+        this.generateOptions2({
+          title: {
+            left: "center",
+            text: "油液颗粒度特性",
+            textStyle: {
+              //标题内容的样式
+              color: "#ffffff",
+              fontWeight: "normal",
+              fontSize: 16,
+            },
+          },
+          xAxis: {
+            data: ["4um", "6um", "14um", "21um"],
+          },
+          yAxis: {
+            name: "PM",
+            min: 0,
+            max: 1,
+            interval: 0.2, // 指定刻度间隔
+          },
+          series: [
+            {
+              name: "颗粒度",
+              type: "bar",
+              barWidth: "30",
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#83bff6" },
+                  { offset: 0.5, color: "#188df0" },
+                  { offset: 1, color: "#188df0" },
+                ]),
+              },
+              data: [
+                this.cylyykld4,
+                this.cylyykld6,
+                this.cylyykld14,
+                this.cylyykld21,
+              ],
+              symbol: "none",
+            },
+          ],
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.cylyykldtxCharts && this.cylyykldtxCharts.resize();
+      });
+      //xdsd 湿度
+      const xdsd = document.getElementById("cylxdsd");
+      this.cylxdsdCharts = echarts.init(xdsd);
+      this.cylxdsdCharts.setOption(
+        this.generateGaugeOption2({
+          color: ["00F28D", "00FFDD", "00BFFF"],
+          bgColor: "87a6a8",
+          name: "湿度",
+          value: parseFloat(this.showdata.syshumid).toFixed(2),
+          limit: 0.8,
+          unit: "%",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.cylxdsdCharts && this.cylxdsdCharts.resize();
+      });
+    },
+    generateOptions(option = {}) {
+      return merge(
+        {
+          color: [
+            "#306fff",
+            "#30c9c9",
+            "#f7ad08",
+            "#93beff",
+            "#80FFA5",
+            "#00DDFF",
+            "#37A2FF",
+            "#FF0087",
+            "#FFBF00",
+            "#5470c6",
+            "#91cc75",
+            "#fac858",
+            "#ee6666",
+            "#73c0de",
+            "#3ba272",
+            "#fc8452",
+            "#9a60b4",
+            "#ea7ccc",
+          ],
+          tooltip: {
+            show: true,
+            trigger: "axis",
+          },
+          xAxis: {
+            show: true,
+            name: "",
+            nameLocation: "end", // 坐标轴名称及显示位置，可以时start和middle
+            nameTextStyle: {
+              // 坐标轴名称的样式
+              color: "#9b9ba4",
+            },
+            nameGap: 15, // 坐标轴名称与轴线的距离
+            inverse: false, // 是否反向坐标轴
+            axisLabel: {
+              // 刻度标签的样式
+              hideOverlap: true, // 隐藏重叠的标签
+              color: "#9b9ba4",
+            },
+            axisLine: {
+              show: false,
+            },
+            position: "bottom",
+            offset: 0, // 相对正常位置的偏移
+            type: "category", // 类目轴，也可以是time， value， 对数轴log
+            data: this.XDATA,
+          },
+          yAxis: {
+            name: "",
+            nameTextStyle: {
+              // 坐标轴名称的样式
+              color: "#9b9ba4",
+            },
+            axisLabel: {
+              // 刻度标签的样式
+              hideOverlap: true, // 隐藏重叠的标签
+              color: "#9b9ba4",
+            },
+            axisLine: {
+              show: false,
+            },
+            minorTick: {
+              // 坐标轴刻度线相关配置
+              show: false,
+            },
+            splitLine: {
+              // 坐标轴在grid区域中的分割线
+              show: true,
+              lineStyle: {
+                type: "dashed",
+                color: "rgba(255, 255, 255, 0.3)",
+              },
+            },
+          },
+          legend: {
+            show: true,
+            // 图例配置
+            orient: "horizontal", // horizontal水平布局， vertical垂直布局
+            top: "20",
+            right: "30",
+            // backgroundColor: "#000000",
+            // borderColor: "#ccc",
+            // borderWidth: 0,
+            padding: 5,
+            itemGap: 10, // 各个item之间的距离
+            itemWidth: 10, // 图例图形宽度
+            itemHeight: 10, // 图例图形高度
+            borderRadius: 10,
+            textStyle: {
+              color: "#d7d8db",
+              fontSize: 9,
+            },
+            lineStyle: {
+              type: "dotted",
+              opacity: 0,
+            },
+          },
+          grid: {
+            left: "10%",
+            top: "25%",
+            right: "6%",
+            bottom: "12%",
+          },
+        },
+        option,
+        (objVal, srcVal) => {
+          if (isArray(objVal)) return srcVal;
+        }
+      );
+    },
+    generateOptions2(option = {}) {
+      return merge(
+        {
+          color: ["#306fff", "#30c9c9", "#f7ad08", "#93beff"],
+          tooltip: {
+            show: true,
+            trigger: "axis",
+          },
+          xAxis: {
+            show: true,
+            name: "",
+            nameLocation: "end", // 坐标轴名称及显示位置，可以时start和middle
+            nameTextStyle: {
+              // 坐标轴名称的样式
+              color: "#9b9ba4",
+            },
+            nameGap: 15, // 坐标轴名称与轴线的距离
+            inverse: false, // 是否反向坐标轴
+            axisLabel: {
+              // 刻度标签的样式
+              hideOverlap: true, // 隐藏重叠的标签
+              color: "#9b9ba4",
+            },
+            axisLine: {
+              show: false,
+            },
+            position: "bottom",
+            offset: 0, // 相对正常位置的偏移
+            type: "category", // 类目轴，也可以是time， value， 对数轴log
+          },
+          yAxis: {
+            name: "",
+            nameTextStyle: {
+              // 坐标轴名称的样式
+              color: "#9b9ba4",
+            },
+            axisLabel: {
+              // 刻度标签的样式
+              hideOverlap: true, // 隐藏重叠的标签
+              color: "#9b9ba4",
+            },
+            axisLine: {
+              show: false,
+            },
+            minorTick: {
+              // 坐标轴刻度线相关配置
+              show: false,
+            },
+            splitLine: {
+              // 坐标轴在grid区域中的分割线
+              show: true,
+              lineStyle: {
+                type: "dashed",
+                color: "rgba(255, 255, 255, 0.3)",
+              },
+            },
+          },
+          legend: {
+            show: true,
+            // 图例配置
+            orient: "horizontal", // horizontal水平布局， vertical垂直布局
+            top: "20",
+            right: "30",
+            // backgroundColor: "#000000",
+            // borderColor: "#ccc",
+            // borderWidth: 0,
+            padding: 5,
+            itemGap: 10, // 各个item之间的距离
+            itemWidth: 10, // 图例图形宽度
+            itemHeight: 10, // 图例图形高度
+            borderRadius: 10,
+            textStyle: {
+              color: "#d7d8db",
+              fontSize: 9,
+            },
+            lineStyle: {
+              type: "dotted",
+              opacity: 0,
+            },
+          },
+          grid: {
+            left: "10%",
+            top: "25%",
+            right: "6%",
+            bottom: "12%",
+          },
+        },
+        option,
+        (objVal, srcVal) => {
+          if (isArray(objVal)) return srcVal;
+        }
+      );
+    },
+    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: 0.5,
+                      //   color: "#" + option.color[1], // 50% 处的颜色
+                      // },
+                      {
+                        offset: 1,
+                        color: "#" + option.color[0], // 100% 处的颜色
+                      },
+                    ],
+
+                    global: false,
+                  },
+                },
+              },
+              pointer: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  width: 20,
+                  color: [[1, "#" + option.bgColor]],
+                  // color: [
+                  //   [0.25, "#FF6E76"],
+                  //   [0.5, "#FDDD60"],
+                  //   [0.75, "#58D9F9"],
+                  //   [1, "#7CFFB2"],
+                  // ],
+                },
+              },
+              axisTick: {
+                distance: -30,
+                splitNumber: 3,
+                lineStyle: {
+                  width: 1,
+                  color: "#" + option.color[0],
+                },
+              },
+              splitLine: {
+                distance: -40,
+                length: 10,
+                lineStyle: {
+                  width: 2,
+                  color: "#" + option.color[0],
+                },
+              },
+              axisLabel: {
+                show: false,
+              },
+              anchor: {
+                show: false,
+              },
+              title: {
+                show: false,
+                fontSize: 16,
+                color: "#" + option.color[0],
+                offsetCenter: [0, "100%"],
+              },
+              detail: {
+                valueAnimation: true,
+                width: "60%",
+                offsetCenter: [0, 0],
+                formatter: "{back| {value} }\n{unit|" + option.unit + "}",
+                rich: {
+                  back: {
+                    fontSize: 20,
+                    fontWeight: 700,
+                    color: "#" + option.color[0],
+                  },
+                  unit: {
+                    fontSize: 12,
+                    fontWeight: 400,
+                    color: "#" + option.color[0],
+                  },
+                },
+              },
+              data: [
+                {
+                  value: option.value,
+                  name: option.name,
+                },
+              ],
+            },
+          ],
+        },
+        {},
+        (objVal, srcVal) => {
+          if (isArray(objVal)) return srcVal;
+        }
+      );
+    },
+    generateGaugeOption2(
+      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[2], // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.5,
+                        color: "#" + option.color[1], // 50% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: "#" + option.color[0], // 100% 处的颜色
+                      },
+                    ],
+
+                    global: false,
+                  },
+                },
+              },
+              pointer: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  width: 20,
+                  color: [[1, "#" + option.bgColor]],
+                  // color: [
+                  //   [0.25, "#FF6E76"],
+                  //   [0.5, "#FDDD60"],
+                  //   [0.75, "#58D9F9"],
+                  //   [1, "#7CFFB2"],
+                  // ],
+                },
+              },
+              axisTick: {
+                distance: -30,
+                splitNumber: 3,
+                lineStyle: {
+                  width: 1,
+                  color: "#" + option.color[0],
+                },
+              },
+              splitLine: {
+                distance: -40,
+                length: 10,
+                lineStyle: {
+                  width: 2,
+                  color: "#" + option.color[0],
+                },
+              },
+              axisLabel: {
+                show: false,
+              },
+              anchor: {
+                show: false,
+              },
+              title: {
+                show: true,
+                fontSize: 16,
+                color: "#" + option.color[0],
+                offsetCenter: [0, "80%"],
+              },
+              detail: {
+                valueAnimation: true,
+                width: "60%",
+                offsetCenter: [0, 0],
+                formatter: "{back| {value} }\n{unit|" + option.unit + "}",
+                rich: {
+                  back: {
+                    align: "center",
+                    fontSize: 20,
+                    fontWeight: 700,
+                    color: "#" + option.color[0],
+                  },
+                  unit: {
+                    fontSize: 12,
+                    fontWeight: 400,
+                    color: "#" + option.color[0],
+                  },
+                },
+              },
+              data: [
+                {
+                  value: option.value,
+                  name: option.name,
+                },
+              ],
+            },
+          ],
+        },
+        {},
+        (objVal, srcVal) => {
+          if (isArray(objVal)) return srcVal;
+        }
+      );
+    },
+  },
+};
+</script>
+<style scoped>
+.device-card-bottom {
+  width: 90%;
+  height: 50%;
+  margin: 0 5%;
+  /* border: #80d1ff 1px solid;
+    background-color: #031e4c; */
+  background-image: url("../../../assets/images/zf/device-bottom-bg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.device-icon {
+  background-image: url("../../../assets/images/zf/device-icon.svg");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+.device-bottom-row {
+  height: 20%;
+  width: 100%;
+  padding: 0 3%;
+}
+.device-bottom-label {
+  font-size: 16px;
+  font-family: PingFang SC-Bold, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  padding-left: 10%;
+  white-space: nowrap;
+}
+.device-bottom-value {
+  font-size: 14px;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #00d7fe;
+}
+.bottom-line-solid {
+  border-bottom: 1px #6d84a1 solid;
+}
+.bottom-line-dashed {
+  border-bottom: 1px #ccc dashed;
+}
+.col-flex {
+  display: flex;
+  height: 100%;
+}
+.col-flex span {
+  margin: auto 0;
+}
+
+@font-face {
+  font-family: "DS-Digital";
+  src: url(../../../assets/DS-Digital.ttf);
+}
+.dataCol {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  overflow: auto;
+}
+.dataCol1 {
+  height: 100%;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  text-align: center;
+  overflow: auto;
+}
+.dataDiv {
+  padding: 5% 0;
+  width: 100%;
+  background: #0b2d57;
+  border: 1px solid #136db2;
+}
+.dataDiv div {
+  cursor: pointer;
+}
+.dataDiv div {
+  margin-top: 3px;
+  width: 100%;
+}
+
+/* .dataDiv span {
+  text-align: right;
+  font-family: "DS-Digital";
+  color: #0ddf7a;
+  background-color: #0a2e4b;
+  border: 1px #1482d2 dashed;
+  width: 50px;
+  margin: 0 3px;
+} */
+.font-size-10 {
+  font-size: 10px;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+}
+.font-size-16 {
+  font-size: 16px;
+  text-align: right;
+  font-family: "DS-Digital";
+  color: #0ddf7a;
+  background-color: #0a2e4b;
+  border: 1px #1482d2 dashed;
+  width: 50px;
+  margin: 0 3px;
+}
+.font-size-8 {
+  font-size: 8px;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+}
+.numSpan {
+  padding: 3px;
+  color: #0ddf7a;
+  font-family: "DS-Digital";
+  background-color: #0a2e4b;
+  border: 1px #1482d2 dashed;
+  margin: 0 5px;
+  display: inline-block;
+  width: 100px;
+}
+.yeweiSpan {
+  text-align: right;
+  padding: 3px;
+  color: #0ddf7a;
+  font-family: "DS-Digital";
+  background-color: #0a2e4b;
+  border: 1px #1482d2 dashed;
+  margin: 2px;
+  display: inline-block;
+  width: 50px;
+}
+.numCol {
+  margin-left: 20px;
+  padding: 3px;
+  text-align: right;
+  color: #0ddf7a;
+  font-family: "DS-Digital";
+  background-color: #0a2e4b;
+  border: 1px #1482d2 dashed;
+}
+.numDiv {
+  text-align: right;
+  padding: 3px;
+  color: #0ddf7a;
+  font-family: "DS-Digital";
+  background-color: #0a2e4b;
+  border: 1px #1482d2 dashed;
+  margin-right: 5px;
+  display: inline-block;
+  width: 50px;
+}
+.test-screen-wrapper {
+  color: #ffffff;
+  width: 100%;
+  height: calc(100vh - 100px);
+  font-family: "BIAOTI";
+  justify-content: space-between;
+  background-image: url("../../../assets/images/zf/bg.svg");
+  .first-row {
+    width: 100%;
+    height: 50%;
+    .first-col {
+      height: 100%;
+      .container {
+        width: 100%;
+        height: 100%;
+        .header {
+          height: 40px !important;
+          background-image: url("../../../assets/images/zf/topTitleBg.svg");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          font-size: 18px;
+          font-style: italic;
+          text-align: left;
+          padding-left: 40px;
+        }
+      }
+    }
+    .second-col {
+      height: 100%;
+      .container {
+        width: 100%;
+        height: 100%;
+        .header {
+          height: 40px !important;
+          background-image: url("../../../assets/images/zf/topTitleBg.svg");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          font-size: 18px;
+          font-style: italic;
+          text-align: left;
+          padding-left: 40px;
+        }
+      }
+    }
+    .third-col {
+      height: 100%;
+      .container {
+        width: 100%;
+        height: 100%;
+        .header {
+          height: 40px !important;
+          background-image: url("../../../assets/images/zf/topTitleBg.svg");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          font-size: 18px;
+          font-style: italic;
+          text-align: left;
+          padding-left: 40px;
+        }
+      }
+    }
+  }
+  .second-row {
+    width: 100%;
+    height: 50%;
+    .first-col {
+      height: 100%;
+      .container {
+        width: 100%;
+        height: 100%;
+        .header {
+          height: 40px !important;
+          background-image: url("../../../assets/images/zf/topTitleBg.svg");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          font-size: 18px;
+          font-style: italic;
+          text-align: left;
+          padding-left: 40px;
+        }
+      }
+    }
+    .second-col {
+      height: 100%;
+      .container {
+        width: 100%;
+        height: 100%;
+        .header {
+          height: 40px !important;
+          background-image: url("../../../assets/images/zf/topTitleBg.svg");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          font-size: 18px;
+          font-style: italic;
+          text-align: left;
+          padding-left: 40px;
+        }
+      }
+    }
+    .third-col {
+      height: 100%;
+      .container {
+        width: 100%;
+        height: 100%;
+        .header {
+          height: 40px !important;
+          background-image: url("../../../assets/images/zf/topTitleBg.svg");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          font-size: 18px;
+          font-style: italic;
+          text-align: left;
+          padding-left: 40px;
+        }
+      }
+    }
+  }
+}
+.el-main {
+  padding: 5px;
+}
+.footer {
+  height: 30px !important;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+}
+.footer .bottom-line {
+  height: 10%;
+  background-image: url("../../../assets/images/zf/bottom-line.svg");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.footer .warn {
+  height: 90%;
+  /* width: 100%; */
+  /* width: 90%; */
+  color: red;
+  display: inline-block;
+  /*padding-left: 90%;*/
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 18px;
+  /*text-overflow: unset;*/
+  /* 调整动画时长和效果 */
+  animation: marquee 300s linear infinite;
+}
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+.device-card-content {
+  width: 90%;
+  height: 50%;
+  margin: 0 5%;
+
+  .device-card-content-item {
+    height: 20%;
+    .device-card-content-label {
+      font-size: 16px;
+      background-color: #0b2d57;
+      height: 70%;
+      text-align: left;
+      display: flex;
+      justify-content: left;
+      align-items: center;
+      padding-left: 25%;
+    }
+    .device-card-content-value {
+      color: #80d1ff;
+      font-size: 18px;
+      background-color: #0b2d57;
+      height: 70%;
+      text-align: left;
+      display: flex;
+      justify-content: left;
+      align-items: center;
+    }
+    .device-image1 {
+      background-image: url("../../../assets/images/zf/device-footer.svg");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+  }
+  .my-progress-background {
+    background: #ffffff;
+    border-radius: 25px;
+    height: 20%;
+    margin-top: 0.5%;
+    margin-left: 5%;
+    margin-right: 5%;
+    width: 100%;
+  }
+  .my-progress {
+    background: linear-gradient(to right, #00f28d, #00ffdd, #00bfff);
+    height: 100%;
+    border-radius: 25px;
+  }
+  .my-percentage {
+    color: #00deff;
+  }
+  .middle-class {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    height: 100%;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 0px;
+}
+.font-size-14 {
+  font-size: 14px;
+  cursor: pointer;
+}
+.font-size-18 {
+  font-size: 18px;
+}
+.font-size-12 {
+  font-size: 12px;
+  color: #ccc;
+  font-weight: lighter;
+}
+</style>
+  
\ No newline at end of file
diff --git a/zfipc-ui/src/views/zf/zgdgBottom/index.vue b/zfipc-ui/src/views/zf/zgdgBottom/index.vue
index d66977d..2a99b8a 100644
--- a/zfipc-ui/src/views/zf/zgdgBottom/index.vue
+++ b/zfipc-ui/src/views/zf/zgdgBottom/index.vue
@@ -2540,7 +2540,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .device-card-bottom {
   width: 90%;
   height: 50%;
diff --git a/zfipc-ui/src/views/zf/zgdgTop/index.vue b/zfipc-ui/src/views/zf/zgdgTop/index.vue
index 4d0863b..ef12f28 100644
--- a/zfipc-ui/src/views/zf/zgdgTop/index.vue
+++ b/zfipc-ui/src/views/zf/zgdgTop/index.vue
@@ -2544,7 +2544,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .device-card-bottom {
   width: 90%;
   height: 50%;