From f31bdefab260e7dd25b6671970c9d31f4d1c4a09 Mon Sep 17 00:00:00 2001
From: zhangjunwen <zhangjunwen@inspur.com>
Date: Tue, 30 Jul 2024 10:42:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E5=8A=9F=E8=83=BD=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bigscreen/company/index.vue     | 334 ++++++------
 .../src/views/bigscreen/factory/index.vue     | 254 ++++-----
 .../src/views/bigscreen/overall/index.vue     | 484 +++++++++---------
 3 files changed, 539 insertions(+), 533 deletions(-)

diff --git a/zfipc-ui/src/views/bigscreen/company/index.vue b/zfipc-ui/src/views/bigscreen/company/index.vue
index 414c9d1..2bf5b07 100644
--- a/zfipc-ui/src/views/bigscreen/company/index.vue
+++ b/zfipc-ui/src/views/bigscreen/company/index.vue
@@ -1,63 +1,62 @@
 <template>
-  <div>
-    <div>
-      <div class="company-header"></div>
-      <div class="company-line-wrap">
-        <div class="company-column  left-column">
-          <div class="equ-item">
-            <div class="item-title">设备运行状态</div>
-            <div class="item-content run-status">
-              <div class="equ-run-out">
-                <span style=" font-family: 'BIAOTI';font-size:25px;">{{equipTotalNum}}</span>
-                <span>{{"设备总数"}}</span>
-              </div>
-              <div class="run-status-des-container">
-                <div
-                  v-for="(item, index) in eqpLineNum"
-                  :key="index"
-                  class="run-status-des"
-                >
-                  <div :class="changeMark(item.status)">
-                    <span>{{ item.name }}</span>
-                  </div>
-                  <div :style="changeStyle(item.status)">{{ item.value }} | {{ item.rate }}</div>
+  <div class="app">
+    <div class="company-header"></div>
+    <div class="company-line-wrap">
+      <div class="company-column  left-column">
+        <div class="equ-item">
+          <div class="item-title">设备运行状态</div>
+          <div class="item-content run-status">
+            <div class="equ-run-out">
+              <span style=" font-family: 'BIAOTI';font-size:25px;">{{equipTotalNum}}</span>
+              <span>{{"设备总数"}}</span>
+            </div>
+            <div class="run-status-des-container">
+              <div
+                v-for="(item, index) in eqpLineNum"
+                :key="index"
+                class="run-status-des"
+              >
+                <div :class="changeMark(item.status)">
+                  <span>{{ item.name }}</span>
                 </div>
+                <div :style="changeStyle(item.status)">{{ item.value }} | {{ item.rate }}</div>
               </div>
             </div>
           </div>
-          <div class="equ-item">
-            <div class="item-title">各个厂区巡检工单任务变化</div>
-            <div class="item-content">
-              <div
-                ref="chart1"
-                :style="{ height: height }"
-              ></div>
-            </div>
-          </div>
-          <div class="equ-item">
-            <div class="item-title">设备运行情况</div>
-            <div class="item-content">
-              <div
-                ref="chart2"
-                :style="{ height: height }"
-              ></div>
-            </div>
-          </div>
         </div>
-        <div class="company-column">
-          <div class="main-bg">
-            <el-cascader
-              v-model="value"
-              :options="options"
-              style="border:none;width:20%"
-              @change="handleCompanyChange"
-            ></el-cascader>
+        <div class="equ-item">
+          <div class="item-title">各个厂区巡检工单任务变化</div>
+          <div class="item-content">
             <div
-              id="mapChart"
-              @click="stopClick"
-              :style="{ height: height,border:'none' }"
+              ref="chart1"
+              :style="{ height: height }"
             ></div>
-            <!-- <div
+          </div>
+        </div>
+        <div class="equ-item">
+          <div class="item-title">设备运行情况</div>
+          <div class="item-content">
+            <div
+              ref="chart2"
+              :style="{ height: height }"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div class="company-column">
+        <div class="main-bg">
+          <el-cascader
+            v-model="value"
+            :options="options"
+            style="border:none;width:20%"
+            @change="handleCompanyChange"
+          ></el-cascader>
+          <div
+            id="mapChart"
+            @click="stopClick"
+            :style="{ height: height,border:'none' }"
+          ></div>
+          <!-- <div
               id="popPanel1"
               class="mainPanel"
               v-show="showPanel"
@@ -83,133 +82,132 @@
                 </div>
               </div>
             </div> -->
+          <div
+            id="popPanel1"
+            class="mainPanel"
+            v-show="showPanel"
+          >
+            <div class="headPanel">{{ this.showProvinceName }} <el-button
+                @click="closePanel"
+                type="text"
+              >关闭</el-button></div>
             <div
-              id="popPanel1"
-              class="mainPanel"
-              v-show="showPanel"
+              v-for="(item, index) in mapTableData"
+              :key="index"
             >
-              <div class="headPanel">{{ this.showProvinceName }} <el-button
-                  @click="closePanel"
-                  type="text"
-                >关闭</el-button></div>
-              <div
-                v-for="(item, index) in mapTableData"
-                :key="index"
-              >
-                <div class="single-contentPanel">
-                  <div class="single-showdata">
-                    <div>{{ item.deptName }}</div>
-                  </div>
-                  <div class="single-showdata">
-                    <div class="item-name">{{ "产线数：" }}</div>
-                    <div
-                      class="item-value"
-                      style="font-weight:bolder;"
-                    >{{  item.deptNum + "台" }}</div>
-                  </div>
-                  <div class="single-showdata">
-                    <div class="item-name">{{ "报警数：" }}</div>
-                    <div
-                      class="item-value"
-                      style="font-weight:bolder;"
-                    >{{  item.alarmNum  + "条" }}</div>
-                  </div>
+              <div class="single-contentPanel">
+                <div class="single-showdata">
+                  <div>{{ item.deptName }}</div>
+                </div>
+                <div class="single-showdata">
+                  <div class="item-name">{{ "产线数：" }}</div>
+                  <div
+                    class="item-value"
+                    style="font-weight:bolder;"
+                  >{{  item.deptNum + "台" }}</div>
+                </div>
+                <div class="single-showdata">
+                  <div class="item-name">{{ "报警数：" }}</div>
+                  <div
+                    class="item-value"
+                    style="font-weight:bolder;"
+                  >{{  item.alarmNum  + "条" }}</div>
                 </div>
-              </div>
-            </div>
-          </div>
-          <div class="middle-wrap">
-            <div class="equ-item">
-              <div class="item-title">各厂区维修记录变化</div>
-              <div class="item-content">
-                <div
-                  ref="chart3"
-                  :style="{ height: height }"
-                ></div>
-              </div>
-            </div>
-            <div class="equ-item">
-              <div class="item-title">厂区最新报警记录</div>
-              <div class="item-content alarm-lists">
-                <el-table
-                  :data="alarmList"
-                  v-loading="loading"
-                  :row-style="{height:'50px'}"
-                  style="width: 100%; height: 100%; overflow-y: hidden"
-                >
-                  <el-table-column
-                    prop="equipInfo.equipName"
-                    label="设备名称"
-                    align="left"
-                  >
-                  </el-table-column>
-                  <el-table-column
-                    prop="status"
-                    label="状态"
-                  >
-                    <template slot-scope="scope">
-                      <dict-tag
-                        :options="dict.type.equip_status"
-                        :value="scope.row.status"
-                      />
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    prop="alarmValue"
-                    label="报警值"
-                  >
-                    <template slot-scope="scope">
-                      <span style="color:red;">{{ scope.row.alarmValue }}</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    prop="alarmTime"
-                    label="时间"
-                  > </el-table-column>
-                </el-table>
               </div>
             </div>
           </div>
         </div>
-        <div class="company-column right-column">
+        <div class="middle-wrap">
           <div class="equ-item">
-            <div class="item-title">预警信息总览</div>
-            <div class="item-content run-status">
-              <div class="alarm-list-out">
-                <span style=" font-family: 'BIAOTI';font-size:25px;">{{totalAlarmNum}}</span>
-                <span>{{"报警总数"}}</span>
-              </div>
-              <div class="alarm-status-des-container">
-                <div
-                  v-for="(item, index) in alarmNum"
-                  :key="index"
-                  class="run-status-des"
+            <div class="item-title">各厂区维修记录变化</div>
+            <div class="item-content">
+              <div
+                ref="chart3"
+                :style="{ height: height }"
+              ></div>
+            </div>
+          </div>
+          <div class="equ-item">
+            <div class="item-title">厂区最新报警记录</div>
+            <div class="item-content alarm-lists">
+              <el-table
+                :data="alarmList"
+                v-loading="loading"
+                :row-style="{height:'50px'}"
+                style="width: 100%; height: 100%; overflow-y: hidden"
+              >
+                <el-table-column
+                  prop="equipInfo.equipName"
+                  label="设备名称"
+                  align="left"
                 >
-                  <div :class="changeMark(item.status)">
-                    <span>{{ item.name }}</span>
-                  </div>
-                  <div :style="changeStyle(item.status)">{{ item.value }} | {{ item.rate }}</div>
+                </el-table-column>
+                <el-table-column
+                  prop="status"
+                  label="状态"
+                >
+                  <template slot-scope="scope">
+                    <dict-tag
+                      :options="dict.type.equip_status"
+                      :value="scope.row.status"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="alarmValue"
+                  label="报警值"
+                >
+                  <template slot-scope="scope">
+                    <span style="color:red;">{{ scope.row.alarmValue }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="alarmTime"
+                  label="时间"
+                > </el-table-column>
+              </el-table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="company-column right-column">
+        <div class="equ-item">
+          <div class="item-title">预警信息总览</div>
+          <div class="item-content run-status">
+            <div class="alarm-list-out">
+              <span style=" font-family: 'BIAOTI';font-size:25px;">{{totalAlarmNum}}</span>
+              <span>{{"报警总数"}}</span>
+            </div>
+            <div class="alarm-status-des-container">
+              <div
+                v-for="(item, index) in alarmNum"
+                :key="index"
+                class="run-status-des"
+              >
+                <div :class="changeMark(item.status)">
+                  <span>{{ item.name }}</span>
                 </div>
+                <div :style="changeStyle(item.status)">{{ item.value }} | {{ item.rate }}</div>
               </div>
             </div>
           </div>
-          <div class="equ-item">
-            <div class="item-title">厂区保养工单任务变化</div>
-            <div class="item-content">
-              <div
-                ref="chart5"
-                :style="{ height: height }"
-              ></div>
-            </div>
+        </div>
+        <div class="equ-item">
+          <div class="item-title">厂区保养工单任务变化</div>
+          <div class="item-content">
+            <div
+              ref="chart5"
+              :style="{ height: height }"
+            ></div>
           </div>
-          <div class="equ-item">
-            <div class="item-title">最近预警变化</div>
-            <div class="item-content">
-              <div
-                ref="chart6"
-                :style="{ height: height }"
-              ></div>
-            </div>
+        </div>
+        <div class="equ-item">
+          <div class="item-title">最近预警变化</div>
+          <div class="item-content">
+            <div
+              ref="chart6"
+              :style="{ height: height }"
+            ></div>
           </div>
         </div>
       </div>
@@ -1760,11 +1758,15 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.app {
+  width: 100%;
+  height: 100vh; /* 视口高度 */
+}
 .company-line-wrap {
   display: grid;
   grid-template-columns: 24% 50% 24%;
   grid-gap: 1%;
-  min-height: calc(100vh - 90px);
+  min-height: calc(100vh - 110px);
   margin: 0 8px;
   background: url(../../../assets/images/bigscreen/company/background.png)
       no-repeat center top,
diff --git a/zfipc-ui/src/views/bigscreen/factory/index.vue b/zfipc-ui/src/views/bigscreen/factory/index.vue
index cd19b5f..4975a7c 100644
--- a/zfipc-ui/src/views/bigscreen/factory/index.vue
+++ b/zfipc-ui/src/views/bigscreen/factory/index.vue
@@ -1,143 +1,141 @@
 <template>
-  <div>
-    <div>
-      <div class="factory-header"></div>
-      <div class="factory-line-wrap">
-        <div class="factory-column  left-column">
-          <div class="equ-item">
-            <div class="item-title">设备运行状态</div>
-            <div class="item-content run-status">
+  <div class="app">
+    <div class="factory-header"></div>
+    <div class="factory-line-wrap">
+      <div class="factory-column  left-column">
+        <div class="equ-item">
+          <div class="item-title">设备运行状态</div>
+          <div class="item-content run-status">
+            <div
+              id="echarts1"
+              :style="{ height: height }"
+            ></div>
+            <div class="run-status-des-container">
               <div
-                id="echarts1"
-                :style="{ height: height }"
-              ></div>
-              <div class="run-status-des-container">
-                <div
-                  v-for="(item, index) in echartList"
-                  :key="index"
-                  class="run-status-des"
-                >
-                  <div style="font-size:16px;display: flex;">
-                    <div
-                      class="line-name"
-                      :style="{ backgroundColor:lineBackgroundColor(index)}"
-                    ></div>
-                    <!-- <span class="label-icon"></span> -->
-                    <span style="margin-left:10px;font-family: BIAOTI;">{{ item.name }}</span>
-                  </div>
-                  <div style="margin-left:10%;font-size:18px;font-weight:bolder">{{ item.value }} 台</div>
+                v-for="(item, index) in echartList"
+                :key="index"
+                class="run-status-des"
+              >
+                <div style="font-size:16px;display: flex;">
+                  <div
+                    class="line-name"
+                    :style="{ backgroundColor:lineBackgroundColor(index)}"
+                  ></div>
+                  <!-- <span class="label-icon"></span> -->
+                  <span style="margin-left:10px;font-family: BIAOTI;">{{ item.name }}</span>
                 </div>
+                <div style="margin-left:10%;font-size:18px;font-weight:bolder">{{ item.value }} 台</div>
               </div>
             </div>
           </div>
-          <div class="equ-item">
-            <div class="item-title">产线设备状态分布</div>
-            <div class="item-content">
-              <div
-                ref="chart1"
-                :style="{ height: height }"
-              ></div>
-            </div>
-          </div>
-          <div class="equ-item">
-            <div class="item-title">产线传感器分布</div>
-            <div class="item-content">
-              <div
-                ref="chart2"
-                :style="{ height: height }"
-              ></div>
-            </div>
-          </div>
         </div>
-        <div class="factory-column">
-          <div class="main-bg">
-            <el-cascader
-              v-model="value"
-              :options="options"
-              style="border:1px;width:20%"
-              @change="handleFactoryChange"
-            ></el-cascader>
+        <div class="equ-item">
+          <div class="item-title">产线设备状态分布</div>
+          <div class="item-content">
+            <div
+              ref="chart1"
+              :style="{ height: height }"
+            ></div>
           </div>
-          <div class="middle-wrap">
-            <div class="equ-item">
-              <div class="item-title">各产线报警趋势</div>
-              <div class="item-content">
-                <div
-                  ref="chart3"
-                  :style="{ height: height }"
-                ></div>
-              </div>
+        </div>
+        <div class="equ-item">
+          <div class="item-title">产线传感器分布</div>
+          <div class="item-content">
+            <div
+              ref="chart2"
+              :style="{ height: height }"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div class="factory-column">
+        <div class="main-bg">
+          <el-cascader
+            v-model="value"
+            :options="options"
+            style="border:1px;width:20%"
+            @change="handleFactoryChange"
+          ></el-cascader>
+        </div>
+        <div class="middle-wrap">
+          <div class="equ-item">
+            <div class="item-title">各产线报警趋势</div>
+            <div class="item-content">
+              <div
+                ref="chart3"
+                :style="{ height: height }"
+              ></div>
             </div>
-            <div class="equ-item">
-              <div class="item-title">厂区最新报警记录</div>
-              <div class="item-content alarm-lists">
-                <el-table
-                  :data="alarmList"
-                  v-loading="loading"
-                  :row-style="{height:'50px'}"
-                  style="width: 100%; height: 100%; overflow-y: hidden"
+          </div>
+          <div class="equ-item">
+            <div class="item-title">厂区最新报警记录</div>
+            <div class="item-content alarm-lists">
+              <el-table
+                :data="alarmList"
+                v-loading="loading"
+                :row-style="{height:'50px'}"
+                style="width: 100%; height: 100%; overflow-y: hidden"
+              >
+                <el-table-column
+                  prop="equipInfo.equipName"
+                  label="设备名称"
+                  align="left"
                 >
-                  <el-table-column
-                    prop="equipInfo.equipName"
-                    label="设备名称"
-                    align="left"
-                  >
-                  </el-table-column>
-                  <el-table-column
-                    prop="status"
-                    label="状态"
-                  >
-                    <template slot-scope="scope">
-                      <dict-tag
-                        :options="dict.type.equip_status"
-                        :value="scope.row.status"
-                      />
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    prop="alarmValue"
-                    label="报警值"
-                  >
-                    <template slot-scope="scope">
-                      <span style="color:red;">{{ scope.row.alarmValue }}</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    prop="alarmTime"
-                    label="时间"
-                  > </el-table-column>
-                </el-table>
-              </div>
+                </el-table-column>
+                <el-table-column
+                  prop="status"
+                  label="状态"
+                >
+                  <template slot-scope="scope">
+                    <dict-tag
+                      :options="dict.type.equip_status"
+                      :value="scope.row.status"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="alarmValue"
+                  label="报警值"
+                >
+                  <template slot-scope="scope">
+                    <span style="color:red;">{{ scope.row.alarmValue }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="alarmTime"
+                  label="时间"
+                > </el-table-column>
+              </el-table>
             </div>
           </div>
         </div>
-        <div class="factory-column right-column">
-          <div class="equ-item">
-            <div class="item-title">各产线设备运行情况</div>
-            <div class="item-content">
-              <div
-                ref="chart4"
-                :style="{ height: height }"
-              ></div>
-            </div>
+      </div>
+      <div class="factory-column right-column">
+        <div class="equ-item">
+          <div class="item-title">各产线设备运行情况</div>
+          <div class="item-content">
+            <div
+              ref="chart4"
+              :style="{ height: height }"
+            ></div>
           </div>
-          <div class="equ-item">
-            <div class="item-title">半年内各产线维修情况</div>
-            <div class="item-content">
-              <div
-                ref="chart5"
-                :style="{ height: height }"
-              ></div>
-            </div>
+        </div>
+        <div class="equ-item">
+          <div class="item-title">半年内各产线维修情况</div>
+          <div class="item-content">
+            <div
+              ref="chart5"
+              :style="{ height: height }"
+            ></div>
           </div>
-          <div class="equ-item">
-            <div class="item-title">半年内各产线保养情况</div>
-            <div class="item-content">
-              <div
-                ref="chart6"
-                :style="{ height: height }"
-              ></div>
-            </div>
+        </div>
+        <div class="equ-item">
+          <div class="item-title">半年内各产线保养情况</div>
+          <div class="item-content">
+            <div
+              ref="chart6"
+              :style="{ height: height }"
+            ></div>
           </div>
         </div>
       </div>
@@ -1385,6 +1383,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.app {
+  width: 100%;
+  height: 100vh; /* 视口高度 */
+}
 @font-face {
   font-family: "BIAOTI";
   src: url(../../../assets/biaoti.ttf);
@@ -1393,7 +1395,7 @@ export default {
   display: grid;
   grid-template-columns: 24% 50% 24%;
   grid-gap: 1%;
-  min-height: calc(100vh - 90px);
+  min-height: calc(100vh - 110px);
   margin: 0 8px;
   background: url(../../../assets/images/bigscreen/factory/background.png)
       no-repeat center top,
diff --git a/zfipc-ui/src/views/bigscreen/overall/index.vue b/zfipc-ui/src/views/bigscreen/overall/index.vue
index e503e54..edcfd31 100644
--- a/zfipc-ui/src/views/bigscreen/overall/index.vue
+++ b/zfipc-ui/src/views/bigscreen/overall/index.vue
@@ -1,283 +1,281 @@
 <template>
-  <div>
-    <div>
-      <div class="company-header"></div>
-      <div class="company-line-wrap">
-        <div class="company-column  left-column">
+  <div class="app">
+    <div class="company-header"></div>
+    <div class="company-line-wrap">
+      <div class="company-column  left-column">
+        <div class="equ-item">
+          <div class="item-title">在线轴承运行信息</div>
+          <div class="item-content alarm-lists">
+            <el-table
+              v-loading="loading1"
+              :data="runList"
+              style="width: 100%; height: 100%; overflow-y: hidden"
+            >
+              <el-table-column
+                prop="company"
+                label="客户名称"
+                align="left"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="equNum"
+                label="轴承数量"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="status"
+                label="液压状态"
+              >
+                <template slot-scope="scope">
+                  <div
+                    v-if="scope.row.status == 0"
+                    class="table-label"
+                  >
+                    <div class="normal-label" />
+                    <div>{{ "正常" }}</div>
+                  </div>
+                  <div
+                    class="table-label"
+                    v-else
+                  >
+                    <div class="err-label" />
+                    <div>{{ "异常" }}</div>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="waveStatus"
+                label="振动状态"
+              >
+                <template slot-scope="scope">
+                  <div
+                    v-if="scope.row.waveStatus == 0"
+                    class="table-label"
+                  >
+                    <div class="normal-label" />
+                    <div>{{ "正常" }}</div>
+                  </div>
+                  <div
+                    class="table-label"
+                    v-else
+                  >
+                    <div class="err-label" />
+                    <div>{{ "异常" }}</div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <div class="equ-item">
+          <div class="item-title">故障率统计</div>
+          <div class="item-content">
+            <div
+              ref="chart1"
+              :style="{ height: height }"
+            ></div>
+          </div>
+        </div>
+        <div class="equ-item">
+          <div class="item-title">维修信息</div>
+          <div class="item-content run-status">
+            <div class="mainten-total">
+              <span style=" font-family: 'BIAOTI';font-size:25px;">{{this.maintenTotal}}</span>
+              <span>{{"维修总数"}}</span>
+            </div>
+            <div class="run-status-des-container">
+              <div
+                v-for="(item, index) in maintenList"
+                :key="index"
+                class="run-status-des"
+              >
+                <div :class="changeMark(index + 1 )">
+                  <span>{{ item.deptName }}</span>
+                </div>
+                <div>{{ item.data }} | {{ item.rate }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="company-column">
+        <div class="main-bg">
+          <div class="middle-header">
+            <div class="worldwide-overall">
+              <div class="head-value">28家</div>
+              <div class="head-info">产品全球化</div>
+            </div>
+            <div class="custom-overall">
+              <div class="head-value">28家</div>
+              <div class="head-info">客户规模</div>
+            </div>
+            <div class="line-overall">
+              <div class="head-value">129条</div>
+              <div class="head-info">产线规模</div>
+            </div>
+            <div class="equip-overall">
+              <div class="head-value">1234台</div>
+              <div class="head-info">运行轴承</div>
+            </div>
+          </div>
+          <div
+            id="mapChart"
+            :style="{ height: height }"
+          ></div>
+          <div
+            id="popPanel"
+            class="mainPanel"
+            v-show="showPanel"
+          >
+            <div class="headPanel">{{ this.provinceName + ":" + this.eqpNums + "台" }} <el-button
+                style="margin-left:20px"
+                @click="closePanel"
+                type="text"
+              >关闭</el-button></div>
+            <div
+              class="contentPanel"
+              v-for="(item, index) in cityEquNumList"
+              :key="index"
+            >
+              <div
+                class="item-name"
+                style="margin-right: 5%;"
+              >{{ item.name + ":" }}</div>
+              <div class="item-value">{{  item.value + "台"  }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="middle-wrap">
           <div class="equ-item">
-            <div class="item-title">在线轴承运行信息</div>
+            <div class="item-title">客户告警信息</div>
             <div class="item-content alarm-lists">
               <el-table
-                v-loading="loading1"
-                :data="runList"
-                style="width: 100%; height: 100%; overflow-y: hidden"
+                v-loading="loading2"
+                :data="alarmList"
+                :row-style="{height: '30px'}"
               >
                 <el-table-column
-                  prop="company"
-                  label="客户名称"
-                  align="left"
+                  prop="params.companyName"
+                  label="公司名称"
+                ></el-table-column>
+                <el-table-column
+                  prop="equipInfo.equipName"
+                  label="设备名称"
                 >
                 </el-table-column>
                 <el-table-column
-                  prop="equNum"
-                  label="轴承数量"
-                >
-                </el-table-column>
+                  prop="alarmTime"
+                  label="时间"
+                > </el-table-column>
                 <el-table-column
-                  prop="status"
-                  label="液压状态"
-                >
-                  <template slot-scope="scope">
-                    <div
-                      v-if="scope.row.status == 0"
-                      class="table-label"
-                    >
-                      <div class="normal-label" />
-                      <div>{{ "正常" }}</div>
-                    </div>
-                    <div
-                      class="table-label"
-                      v-else
-                    >
-                      <div class="err-label" />
-                      <div>{{ "异常" }}</div>
-                    </div>
+                  prop="content"
+                  label="报警内容"
+                > </el-table-column>
+                <el-table-column
+                  prop="alarmValue"
+                  label="报警值"
+                > <template slot-scope="scope">
+                    <span style="color:red">{{ scope.row.alarmValue }}</span>
                   </template>
                 </el-table-column>
                 <el-table-column
-                  prop="waveStatus"
-                  label="振动状态"
+                  prop="alarmLevel"
+                  label="严重等级"
                 >
                   <template slot-scope="scope">
-                    <div
-                      v-if="scope.row.waveStatus == 0"
-                      class="table-label"
-                    >
-                      <div class="normal-label" />
-                      <div>{{ "正常" }}</div>
-                    </div>
-                    <div
-                      class="table-label"
-                      v-else
-                    >
-                      <div class="err-label" />
-                      <div>{{ "异常" }}</div>
-                    </div>
+                    <span style="color:yellow">{{ scope.row.alarmLevel + "级" }}</span>
                   </template>
                 </el-table-column>
+
               </el-table>
             </div>
           </div>
-          <div class="equ-item">
-            <div class="item-title">故障率统计</div>
-            <div class="item-content">
-              <div
-                ref="chart1"
-                :style="{ height: height }"
-              ></div>
+        </div>
+      </div>
+      <div class="company-column right-column">
+        <div class="equ-item">
+          <div class="item-title">应用行业及占有率</div>
+          <div class="item-content run-status">
+            <div class="equ-run-out">
+              <span style=" font-family: 'BIAOTI';font-size:25px;">{{this.industryTotal}}</span>
+              <span>{{"设备总数"}}</span>
             </div>
-          </div>
-          <div class="equ-item">
-            <div class="item-title">维修信息</div>
-            <div class="item-content run-status">
-              <div class="mainten-total">
-                <span style=" font-family: 'BIAOTI';font-size:25px;">{{this.maintenTotal}}</span>
-                <span>{{"维修总数"}}</span>
-              </div>
-              <div class="run-status-des-container">
-                <div
-                  v-for="(item, index) in maintenList"
-                  :key="index"
-                  class="run-status-des"
-                >
-                  <div :class="changeMark(index + 1 )">
-                    <span>{{ item.deptName }}</span>
-                  </div>
-                  <div>{{ item.data }} | {{ item.rate }}</div>
+            <div class="industry-des-container">
+              <div
+                v-for="(item, index) in industryInfo"
+                :key="index"
+                class="industry-des"
+              >
+                <div :class="changeIndustryMark(index)">
+                  <span>{{ item.name }}</span>
                 </div>
+                <div :style="changeStyle(item.status)">{{ item.value }} | {{ item.rate }}</div>
               </div>
             </div>
           </div>
         </div>
-        <div class="company-column">
-          <div class="main-bg">
-            <div class="middle-header">
-              <div class="worldwide-overall">
-                <div class="head-value">28家</div>
-                <div class="head-info">产品全球化</div>
-              </div>
-              <div class="custom-overall">
-                <div class="head-value">28家</div>
-                <div class="head-info">客户规模</div>
-              </div>
-              <div class="line-overall">
-                <div class="head-value">129条</div>
-                <div class="head-info">产线规模</div>
-              </div>
-              <div class="equip-overall">
-                <div class="head-value">1234台</div>
-                <div class="head-info">运行轴承</div>
-              </div>
-            </div>
+        <div class="equ-item">
+          <div class="item-title">各公司维修统计</div>
+          <div class="item-content">
             <div
-              id="mapChart"
+              ref="chart5"
               :style="{ height: height }"
             ></div>
-            <div
-              id="popPanel"
-              class="mainPanel"
-              v-show="showPanel"
-            >
-              <div class="headPanel">{{ this.provinceName + ":" + this.eqpNums + "台" }} <el-button
-                  style="margin-left:20px"
-                  @click="closePanel"
-                  type="text"
-                >关闭</el-button></div>
-              <div
-                class="contentPanel"
-                v-for="(item, index) in cityEquNumList"
-                :key="index"
-              >
-                <div
-                  class="item-name"
-                  style="margin-right: 5%;"
-                >{{ item.name + ":" }}</div>
-                <div class="item-value">{{  item.value + "台"  }}</div>
-              </div>
-            </div>
-          </div>
-          <div class="middle-wrap">
-            <div class="equ-item">
-              <div class="item-title">客户告警信息</div>
-              <div class="item-content alarm-lists">
-                <el-table
-                  v-loading="loading2"
-                  :data="alarmList"
-                  :row-style="{height: '30px'}"
-                >
-                  <el-table-column
-                    prop="params.companyName"
-                    label="公司名称"
-                  ></el-table-column>
-                  <el-table-column
-                    prop="equipInfo.equipName"
-                    label="设备名称"
-                  >
-                  </el-table-column>
-                  <el-table-column
-                    prop="alarmTime"
-                    label="时间"
-                  > </el-table-column>
-                  <el-table-column
-                    prop="content"
-                    label="报警内容"
-                  > </el-table-column>
-                  <el-table-column
-                    prop="alarmValue"
-                    label="报警值"
-                  > <template slot-scope="scope">
-                      <span style="color:red">{{ scope.row.alarmValue }}</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    prop="alarmLevel"
-                    label="严重等级"
-                  >
-                    <template slot-scope="scope">
-                      <span style="color:yellow">{{ scope.row.alarmLevel + "级" }}</span>
-                    </template>
-                  </el-table-column>
-
-                </el-table>
-              </div>
-            </div>
           </div>
         </div>
-        <div class="company-column right-column">
-          <div class="equ-item">
-            <div class="item-title">应用行业及占有率</div>
-            <div class="item-content run-status">
-              <div class="equ-run-out">
-                <span style=" font-family: 'BIAOTI';font-size:25px;">{{this.industryTotal}}</span>
-                <span>{{"设备总数"}}</span>
-              </div>
-              <div class="industry-des-container">
-                <div
-                  v-for="(item, index) in industryInfo"
-                  :key="index"
-                  class="industry-des"
-                >
-                  <div :class="changeIndustryMark(index)">
-                    <span>{{ item.name }}</span>
-                  </div>
-                  <div :style="changeStyle(item.status)">{{ item.value }} | {{ item.rate }}</div>
-                </div>
-              </div>
+        <div class="equ-item">
+          <div class="item-title">设备及产线总览</div>
+          <div class="line-equ-overall">
+            <div class="line-title">
+              <div>产线</div>
+              <div>总览</div>
             </div>
-          </div>
-          <div class="equ-item">
-            <div class="item-title">各公司维修统计</div>
-            <div class="item-content">
+            <div>
               <div
-                ref="chart5"
+                id="echarts1"
                 :style="{ height: height }"
               ></div>
             </div>
-          </div>
-          <div class="equ-item">
-            <div class="item-title">设备及产线总览</div>
-            <div class="line-equ-overall">
-              <div class="line-title">
-                <div>产线</div>
-                <div>总览</div>
-              </div>
-              <div>
-                <div
-                  id="echarts1"
-                  :style="{ height: height }"
-                ></div>
-              </div>
-              <div class="lines-total">
-                <div class="line-status">
-                  <div style="display:flex">
-                    <div class="online-label" />
-                    <div style="font-size:18px;font-weight:bolder">{{ "正常" }}</div>
-                  </div>
-                  <div style="font-size:18px;margin-right: 20%;">{{ 3 }}</div>
-                </div>
-                <div class="line-status">
-                  <div style="display:flex">
-                    <div class="offline-label" />
-                    <div style="font-size:18px;font-weight:bolder">{{ "离线" }}</div>
-                  </div>
-                  <div style="font-size:18px;margin-right: 20%;">{{1}}</div>
+            <div class="lines-total">
+              <div class="line-status">
+                <div style="display:flex">
+                  <div class="online-label" />
+                  <div style="font-size:18px;font-weight:bolder">{{ "正常" }}</div>
                 </div>
+                <div style="font-size:18px;margin-right: 20%;">{{ 3 }}</div>
               </div>
-              <div class="line-title">
-                <div>设备</div>
-                <div>总数</div>
-              </div>
-              <div>
-                <div
-                  id="echarts2"
-                  :style="{ height: height }"
-                ></div>
-              </div>
-              <div class="lines-total">
-                <div class="line-status">
-                  <div style="display:flex">
-                    <div class="online-label" />
-                    <div style="font-size:18px;font-weight:bolder">{{ "正常" }}</div>
-                  </div>
-                  <div style="font-size:18px;margin-right: 20%;">{{7}}</div>
+              <div class="line-status">
+                <div style="display:flex">
+                  <div class="offline-label" />
+                  <div style="font-size:18px;font-weight:bolder">{{ "离线" }}</div>
                 </div>
-                <div class="line-status">
-                  <div style="display:flex">
-                    <div class="offline-label" />
-                    <div style="font-size:18px;font-weight:bolder">{{ "离线" }}</div>
-                  </div>
-                  <div style="font-size:18px;margin-right: 20%;">{{3}}</div>
+                <div style="font-size:18px;margin-right: 20%;">{{1}}</div>
+              </div>
+            </div>
+            <div class="line-title">
+              <div>设备</div>
+              <div>总数</div>
+            </div>
+            <div>
+              <div
+                id="echarts2"
+                :style="{ height: height }"
+              ></div>
+            </div>
+            <div class="lines-total">
+              <div class="line-status">
+                <div style="display:flex">
+                  <div class="online-label" />
+                  <div style="font-size:18px;font-weight:bolder">{{ "正常" }}</div>
                 </div>
+                <div style="font-size:18px;margin-right: 20%;">{{7}}</div>
+              </div>
+              <div class="line-status">
+                <div style="display:flex">
+                  <div class="offline-label" />
+                  <div style="font-size:18px;font-weight:bolder">{{ "离线" }}</div>
+                </div>
+                <div style="font-size:18px;margin-right: 20%;">{{3}}</div>
               </div>
             </div>
           </div>
@@ -2007,11 +2005,15 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.app {
+  width: 100%;
+  height: 100vh; /* 视口高度 */
+}
 .company-line-wrap {
   display: grid;
   grid-template-columns: 24% 50% 24%;
   grid-gap: 1%;
-  min-height: calc(100vh - 90px);
+  min-height: calc(100vh - 110px);
   margin: 0 8px;
   background: url(../../../assets/images/bigscreen/overall/background.png)
       no-repeat center center,