From 311cf315de0738b0546bf192b6977858ffe5813a Mon Sep 17 00:00:00 2001
From: home <2468489804@qq.com>
Date: Sun, 21 Aug 2022 00:24:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E7=9B=91=E6=8E=A7=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=B8=AD=E7=9A=84=E6=9C=8D=E5=8A=A1=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=98=BE=E7=A4=BA=EF=BC=8C=E7=A6=BB=E7=BA=BF?=
 =?UTF-8?q?=E5=8F=AA=E6=98=BE=E7=A4=BA=E6=9C=8D=E5=8A=A1=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=8D=E6=98=BE=E7=A4=BA=E8=AE=BE=E5=A4=87=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../edgeServer/edgeServerMonitor/index.vue    | 303 +++++++++++-------
 1 file changed, 190 insertions(+), 113 deletions(-)

diff --git a/src/views/edgeServer/edgeServerMonitor/index.vue b/src/views/edgeServer/edgeServerMonitor/index.vue
index a6d20ab..e9419bc 100644
--- a/src/views/edgeServer/edgeServerMonitor/index.vue
+++ b/src/views/edgeServer/edgeServerMonitor/index.vue
@@ -1,88 +1,156 @@
 <template>
-    <d2-container>
-        <div>
-            <el-card class="box-card" v-for="(item, index) in serverData" :key="index">
-                <div slot="header" class="device-header">
-                    <span>前置服务 {{ item.server_name }} ({{ item.url }}:{{ item.port }} )</span>
-                </div>
-                <el-row :gutter="12">
-                    <el-col :span="6" v-for="(i, k) in item.devices" :key="k">
-                        <el-popover placement="top" trigger="click">
-                            <el-menu @select="(index) => setDeviceExec(i, index, item)"
-                                :style="{ 'borderRight': 'none' }">
-                                <el-menu-item index="device_stop">
-                                    <span slot="title">暂停</span>
-                                </el-menu-item>
-                                <el-menu-item index="device_continue">
-                                    <span slot="title">启动</span>
-                                </el-menu-item>
-
-                            </el-menu>
-                            <el-card slot="reference"
-                                :class="{ 'box-card': true, 'online': i.deviceStatus, 'offline': !i.deviceStatus }">
-                                <div slot="header" class="header-title">
-                                    <span>{{ i.device_name }}</span>
-                                </div>
-                                <el-row :gutter="24">
-                                    <el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
-                                        <span>设备类型</span>
-                                    </el-col>
-                                    <el-col :span="14" style="padding-left:0px;">：{{ i.device_type }}</el-col>
-                                </el-row>
-                                <el-row :gutter="24">
-                                    <el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
-                                        <span>IP/端口</span>
-                                    </el-col>
-                                    <el-col :span="14" style="padding-left:0px;">：{{ i.config }}
-                                    </el-col>
-                                </el-row>
-                                <el-row :gutter="24">
-                                    <el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
-                                        <span>活动时间</span>
-                                    </el-col>
-                                    <el-col :span="14" style="padding-left:0px;">：{{ i.startTime }}</el-col>
-                                </el-row>
-                                <el-row :gutter="24">
-                                    <el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
-                                        <span>采集耗时</span>
-                                    </el-col>
-                                    <el-col :span="14" style="padding-left:0px;">：{{ i.captureSpendTime }}</el-col>
-                                </el-row>
-                                <el-row :gutter="24">
-                                    <el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
-                                        <span>成功次数</span>
-                                    </el-col>
-                                    <el-col :span="14" style="padding-left:0px;">：{{ i.success }}</el-col>
-                                </el-row>
-                                <el-row :gutter="24">
-                                    <el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
-                                        <span>失败次数</span>
-                                    </el-col>
-                                    <el-col :span="14" style="padding-left:0px;">：{{ i.failed }}</el-col>
-                                </el-row>
-                                <el-row :gutter="24">
-                                    <el-alert v-if="i.failedMsg" :title="i.failedMsg" type="error" :closable="false">
-                                    </el-alert>
-                                    <div v-else style="height:35px;"></div>
-                                </el-row>
-
-                            </el-card>
-                        </el-popover>
-                    </el-col>
-                </el-row>
-            </el-card>
+  <d2-container>
+    <div>
+      <el-card
+        class="box-card"
+        v-for="(item, index) in serverData"
+        :key="index"
+      >
+        <div slot="header" class="device-header">
+          <span
+            >前置服务 {{ item.server_name }} ({{ item.url }}:{{ item.port }} )
+            <el-tag
+              :color="serveStatus[item.status].backgroundColor"
+              :style="{
+                color: serveStatus[item.status].textColor,
+                borderColor: serveStatus[item.status].borderColor,
+              }"
+            >
+              {{ serveStatus[item.status].name }}
+            </el-tag>
+          </span>
         </div>
-    </d2-container>
+        <el-row :gutter="12">
+          <el-col :span="6" v-for="(i, k) in item.devices" :key="k">
+            <el-popover placement="top" trigger="click">
+              <el-menu
+                @select="(index) => setDeviceExec(i, index, item)"
+                :style="{ borderRight: 'none' }"
+              >
+                <el-menu-item index="device_stop">
+                  <span slot="title">暂停</span>
+                </el-menu-item>
+                <el-menu-item index="device_continue">
+                  <span slot="title">启动</span>
+                </el-menu-item>
+              </el-menu>
+              <el-card
+                slot="reference"
+                :class="{
+                  'box-card': true,
+                  online: i.deviceStatus,
+                  offline: !i.deviceStatus,
+                }"
+              >
+                <div slot="header" class="header-title">
+                  <span>{{ i.device_name }}</span>
+                </div>
+                <el-row :gutter="24">
+                  <el-col
+                    :span="5"
+                    style="padding-right: 0px; margin-bottom: 5px"
+                  >
+                    <span>设备类型</span>
+                  </el-col>
+                  <el-col :span="14" style="padding-left: 0px"
+                    >：{{ i.device_type }}</el-col
+                  >
+                </el-row>
+                <el-row :gutter="24">
+                  <el-col
+                    :span="5"
+                    style="padding-right: 0px; margin-bottom: 5px"
+                  >
+                    <span>IP/端口</span>
+                  </el-col>
+                  <el-col :span="14" style="padding-left: 0px"
+                    >：{{ i.config }}
+                  </el-col>
+                </el-row>
+                <el-row :gutter="24">
+                  <el-col
+                    :span="5"
+                    style="padding-right: 0px; margin-bottom: 5px"
+                  >
+                    <span>活动时间</span>
+                  </el-col>
+                  <el-col :span="14" style="padding-left: 0px"
+                    >：{{ i.startTime }}</el-col
+                  >
+                </el-row>
+                <el-row :gutter="24">
+                  <el-col
+                    :span="5"
+                    style="padding-right: 0px; margin-bottom: 5px"
+                  >
+                    <span>采集耗时</span>
+                  </el-col>
+                  <el-col :span="14" style="padding-left: 0px"
+                    >：{{ i.captureSpendTime }}</el-col
+                  >
+                </el-row>
+                <el-row :gutter="24">
+                  <el-col
+                    :span="5"
+                    style="padding-right: 0px; margin-bottom: 5px"
+                  >
+                    <span>成功次数</span>
+                  </el-col>
+                  <el-col :span="14" style="padding-left: 0px"
+                    >：{{ i.success }}</el-col
+                  >
+                </el-row>
+                <el-row :gutter="24">
+                  <el-col
+                    :span="5"
+                    style="padding-right: 0px; margin-bottom: 5px"
+                  >
+                    <span>失败次数</span>
+                  </el-col>
+                  <el-col :span="14" style="padding-left: 0px"
+                    >：{{ i.failed }}</el-col
+                  >
+                </el-row>
+                <el-row :gutter="24">
+                  <el-alert
+                    v-if="i.failedMsg"
+                    :title="i.failedMsg"
+                    type="error"
+                    :closable="false"
+                  >
+                  </el-alert>
+                  <div v-else style="height: 35px"></div>
+                </el-row>
+              </el-card>
+            </el-popover>
+          </el-col>
+        </el-row>
+      </el-card>
+    </div>
+  </d2-container>
 </template>
 <script>
-
 import { unset, map } from 'lodash'
 export default {
   data () {
     return {
       serverData: [],
       deviceData: [],
-      deviceCommand: {}
+      deviceCommand: {},
+      serveStatus: {
+        online: {
+          name: '在线',
+          textColor: '#67c23a',
+          backgroundColor: '#f0f9eb',
+          borderColor: '#e1f3d8'
+        },
+        offline: {
+          name: '离线',
+          textColor: '#67c23a',
+          backgroundColor: '#f0f9eb',
+          borderColor: '#e1f3d8'
+        }
+      }
     }
   },
 
@@ -109,33 +177,43 @@ export default {
     async getServe () {
       this.serverData = await this.$api.QUERY_SERVERS()
       this.serverData.forEach((element, index) => {
-        this.$api.GET_SERVE_DEVICE_MONITORING('http://' + element.url + ':' + element.port, 'admin', process.env.VUE_APP_HSLSERVER_PASSWORD).then((deviceStatus) => {
-          if (deviceStatus.IsSuccess) {
-            const data = deviceStatus.Content
-            unset(data, '__status')
-            const deviceData = map(data, element => {
-              const config = element.__config.split(' ')
-              return {
-                config: config.length > 0 ? config[2] : '',
-                startTime: element.__startTime,
-                captureSpendTime: element.__captureSpendTime,
-                success: element.__success,
-                failed: element.__failed,
-                failedMsg: element.__failedMsg,
-                deviceStatus: element.__requestEnable,
-                device_name: element.__name,
-                device_type: config.length > 0 ? config[0] : ''
-              }
-            })
-            this.$set(this.serverData[index], 'devices', deviceData)
-          }
-        }).catch(() => {
-          this.$message({
-            message: this.serverData[index].name + '服务请求失败',
-            type: 'error'
+        this.$api
+          .GET_SERVE_DEVICE_MONITORING(
+            'http://' + element.url + ':' + element.port,
+            'admin',
+            process.env.VUE_APP_HSLSERVER_PASSWORD
+          )
+          .then((deviceStatus) => {
+            if (deviceStatus.IsSuccess) {
+              const data = deviceStatus.Content
+              unset(data, '__status')
+              const deviceData = map(data, (element) => {
+                const config = element.__config.split(' ')
+                return {
+                  config: config.length > 0 ? config[2] : '',
+                  startTime: element.__startTime,
+                  captureSpendTime: element.__captureSpendTime,
+                  success: element.__success,
+                  failed: element.__failed,
+                  failedMsg: element.__failedMsg,
+                  deviceStatus: element.__requestEnable,
+                  device_name: element.__name,
+                  device_type: config.length > 0 ? config[0] : ''
+                }
+              })
+              this.$set(this.serverData[index], 'devices', deviceData)
+              this.$set(this.serverData[index], 'status', 'online')
+            }
+          })
+          .catch(() => {
+            this.$message({
+              message: this.serverData[index].name + '服务请求失败',
+              type: 'error'
+            })
+            this.$set(this.serverData[index], 'status', 'offline')
+
+            // this.$delete(this.serverData, index);
           })
-          this.$delete(this.serverData, index)
-        })
       })
     }
   },
@@ -146,35 +224,34 @@ export default {
 </script>
 <style scoped>
 .box-card {
-    margin: 5px 0px;
-    color: #fff;
-    font-weight: bold;
+  margin: 5px 0px;
+  color: #fff;
+  font-weight: bold;
 }
 
 .device-header {
-    color: #000;
-    font-weight: bold;
-    font-size: 18px;
+  color: #000;
+  font-weight: bold;
+  font-size: 18px;
 }
 
 .online {
-    background-color: #67c23a;
+  background-color: #67c23a;
 }
 
 .offline {
-    background-color: #666;
+  background-color: #666;
 }
 
 .text {
-    font-size: 14px;
+  font-size: 14px;
 }
 
 .item {
-    margin-bottom: 18px;
+  margin-bottom: 18px;
 }
 
 .header-title {
-
-    font-size: 18px;
+  font-size: 18px;
 }
 </style>