服务监控页面中的服务增加状态显示，离线只显示服务信息，不显示设备信息

src/views/edgeServer/edgeServerMonitor/index.vue

@@ -1,71 +1,126 @@
 <template>
   <d2-container>
     <div>
-            <el-card class="box-card" v-for="(item, index) in serverData" :key="index">
+      <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>
+          <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>
         <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)"
+              <el-menu
-                                :style="{ 'borderRight': 'none' }">
+                @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"
+              <el-card
-                                :class="{ 'box-card': true, 'online': i.deviceStatus, 'offline': !i.deviceStatus }">
+                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;">
+                  <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-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;">
+                  <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 :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;">
+                  <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-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;">
+                  <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-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;">
+                  <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-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;">
+                  <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-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
+                    v-if="i.failedMsg"
+                    :title="i.failedMsg"
+                    type="error"
+                    :closable="false"
+                  >
                   </el-alert>
-                                    <div v-else style="height:35px;"></div>
+                  <div v-else style="height: 35px"></div>
                 </el-row>
-
               </el-card>
             </el-popover>
           </el-col>
@@ -75,14 +130,27 @@
   </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,11 +177,17 @@ 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) => {
+        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 deviceData = map(data, (element) => {
                 const config = element.__config.split(' ')
                 return {
                   config: config.length > 0 ? config[2] : '',
@@ -128,13 +202,17 @@ export default {
                 }
               })
               this.$set(this.serverData[index], 'devices', deviceData)
+              this.$set(this.serverData[index], 'status', 'online')
             }
-        }).catch(() => {
+          })
+          .catch(() => {
             this.$message({
               message: this.serverData[index].name + '服务请求失败',
               type: 'error'
             })
-          this.$delete(this.serverData, index)
+            this.$set(this.serverData[index], 'status', 'offline')
+
+            // this.$delete(this.serverData, index);
           })
       })
     }
@@ -174,7 +252,6 @@ export default {
 }
 
 .header-title {
-
   font-size: 18px;
 }
 </style>