【web】 设备状态详情 UI修改

ALOps_sys_fe/alops-ui/src/api/device/deviceType.js

@@ -19,15 +19,6 @@ export function list(query) {
   })
 }
 
-// 历史预警
-export function history(query) {
-  return request({
-    url: '/inMonitoring/alertmessage/',
-    method: 'get',
-    params: query
-  })
-}
-
 // 新增
 export function add(data) {
   return request({

ALOps_sys_fe/alops-ui/src/api/inMonitoring/devicesState.js

@@ -40,7 +40,7 @@ export function historyQuery(query) {
 // 设备历史预警
 export function alertmessage(equId) {
   return request({
-    url: '/inMonitoring/alertmessage/' + parseStrEmpty(equId),
+    url: '/inMonitoring/alertMessage/' + parseStrEmpty(equId),
     method: 'get'
   })
 }

ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue

@@ -18,7 +18,7 @@
                     
                     <div class="device-box">
                       <div class="device-image">
-                          <img v-if="cardData.image" :src="baseUrl+cardData.equImage" alt="" class="device-icon">
+                          <img v-if="cardData.equImage" :src="baseUrl+cardData.equImage" alt="" class="device-icon">
                           <i v-else class="fas fa-server"></i>
                       </div>
                       <div class="device-info">
@@ -60,10 +60,10 @@
                         </div>
 
                         <div class="metric-card">
-                            <div class="metric-value cpu-usage">{{cardData.contWorkPeriod||0}}%</div>
+                            <div class="metric-value cpu-usage">{{cardData.health||0}}%</div>
-                            <div class="metric-label">内存占用</div>
+                            <div class="metric-label">健康度</div>
                             <div class="progress-bar">
-                                <div class="progress-fill" :style="{width: cardData.contWorkPeriod||0+'%'}"></div>
+                                <div class="progress-fill" :style="{width: cardData.health||0+'%'}"></div>
                             </div>
                         </div>
                         
@@ -233,7 +233,7 @@ export default {
         .body {
             color: #2d3748;
             line-height: 1.6;
-            min-height: 100vh;
+            min-height: 60vh;
         }
         
         .dashboard {

ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue

@@ -157,6 +157,7 @@
                             <i class="fas fa-chart-bar"></i>
                             设备运行数据
                         </h2>
+                        
                         <el-date-picker
                             v-model="DateValue"
                             type="datetimerange"
@@ -168,6 +169,7 @@
                         </el-date-picker>
                     </div>
                     
+                    <el-empty description="暂无预警" v-if="!this.historyQueryData.timeList.length"></el-empty>
                     <div class="chart-container" id="performanceChart"></div>
                 </div>
                 
@@ -185,6 +187,15 @@
                       <div class="bottom-item" v-if="tabIndex == 0">
                         <History :dsId="dsId"/>
                       </div>
+                      <div class="bottom-item" v-if="tabIndex == 1">
+                        <Interface :dsId="dsId"/>
+                      </div>
+                      <div class="bottom-item" v-if="tabIndex == 2">
+                        <Vlan :dsId="dsId"/>
+                      </div>
+                      <div class="bottom-item" v-if="tabIndex == 3">
+                        <Routing :dsId="dsId"/>
+                      </div>
                     </div>
                 </div>
             </div>
@@ -199,9 +210,12 @@ import * as echarts from 'echarts'
 import dayjs from 'dayjs';
 require('echarts/theme/macarons') // echarts theme
 import History from './history.vue'
+import Interface from './interface.vue'
+import Vlan from './vlan.vue'
+import Routing from './routing.vue'
 export default {
   name: "cardItem",
-  components: { History },
+  components: { History, Interface, Vlan, Routing },
   data() {
     return {
       DateValue: [dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'),dayjs().format('YYYY-MM-DD HH:mm:ss')],
@@ -213,28 +227,30 @@ export default {
         { name: '路由表信息' },
       ],
       tabIndex: 0,
-      dsId:'',
+      dsId:null,
-    details: {},
+        details: {},
-    historyQueryList: {
+        historyQueryList: {
-        maxTime:dayjs().format('YYYY-MM-DD HH:mm:ss'),
+            maxTime:dayjs().format('YYYY-MM-DD HH:mm:ss'),
-        minTime:dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'),
+            minTime:dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'),
-        pageNum: 1,
+            pageNum: 1,
-        pageSize: 1000,
+            pageSize: 1000,
-    },
+        },
-      baseUrl: process.env.VUE_APP_BASE_API
+        historyQueryData: {
+
+        },
+        baseUrl: process.env.VUE_APP_BASE_API
     }
   },
 mounted() {
     let routeList = this.$route.params;
-    let dsId = routeList.id;
+    this.dsId = routeList.id;
-    console.log("%c ⚓: mounted -> dsId ", "font-size:16px;background-color:#8f8576;color:white;", dsId)
+    this.getInfoFun(this.dsId)
-    this.getInfoFun(dsId)
+    this.gethistoryQuery(this.dsId)
-    this.gethistoryQuery(dsId)
 },
   methods: {
     initCharts() {
         // 性能图表
-        let details = this.details;
+        let details = this.historyQueryData;
         const performanceChart = echarts.init(document.getElementById('performanceChart'));
         performanceChart.setOption({
             tooltip: {
@@ -365,7 +381,7 @@ mounted() {
         // 响应窗口大小变化
         window.addEventListener('resize', function() {
             performanceChart.resize();
-            trafficChart.resize();
+            // trafficChart.resize();
         });
     },
     /** 查询设备列表 */
@@ -379,14 +395,14 @@ mounted() {
     },
     /** 设备管理基本信息（获取设备指定时间段内的历史监控信息） */
     gethistoryQuery(id) {
-      console.log("%c 🖼️: gethistoryQuery -> id ", "font-size:16px;background-color:#c07203;color:white;", id)
       this.loading = true
       let queryForm = {
         id: id,
         ...this.historyQueryList
       }
       historyQuery(queryForm).then(response => {
-        this.details = response.data
+        this.historyQueryData = response.data
+        console.log("%c 🇸🇸: gethistoryQuery -> this.historyQueryData ", "font-size:16px;background-color:#bc384b;color:white;", this.historyQueryData)
         this.loading = false
         this.initCharts();
         }
@@ -407,7 +423,7 @@ mounted() {
             color: #2d3748;
             line-height: 1.6;
             padding: 20px;
-            min-height: 100vh;
+            min-height: 60vh;
         }
         
         .dashboard {

ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue

@@ -20,12 +20,11 @@
 </template>
 
 <script>
-import { history } from "@/api/device/deviceType"
+import { alertmessage } from "@/api/inMonitoring/devicesState"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
 import "splitpanes/dist/splitpanes.css"
 
 export default {
-  name: "User",
   props: {
     dsId: {
       type: String,
@@ -53,8 +52,7 @@ export default {
   watch: {
     dsId: {
       handler(val) {
-        console.log("%c ☄️: handler -> val ", "font-size:16px;background-color:#b2181b;color:white;", val)
+        this.getList(val)
-        this.getList()
       },
       deep: true,
       immediate: true
@@ -62,15 +60,16 @@ export default {
   },
   methods: {
     /** 查询类型列表 */
-    getList() {
+    getList(id) {
-      let dsId = this.dsId || 0
       this.loading = true
-      history({equId:11}).then(response => {
+      try {
-      console.log("%c ⛓️: getList -> response ", "font-size:16px;background-color:#7f0cdd;color:white;", response)
+        alertmessage(id).then(response => {
           this.userList = response.rows
           this.loading = false
-        }
+        })
-      )
+      } catch (error) {
+        this.loading = false
+      }
     }
   }
 }

ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue

@@ -44,7 +44,7 @@
               </el-row>
             </div>
 
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :page-size="queryParams.pageSize" :limit.sync="queryParams.pageSize" @pagination="getList" />
           </el-col>
         </pane>
       </splitpanes>
@@ -216,7 +216,7 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 9,
         userName: undefined,
         phonenumber: undefined,
         status: undefined,

ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/interface.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="">
+    <el-row :gutter="20">
+      <el-col>
+        <el-table v-loading="loading" :data="userList">
+          <el-table-column
+            label="序号"
+            width="60"
+            type="index"
+          ></el-table-column>
+          <el-table-column label="采集时间" align="center" prop="gatherTime" width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.gatherTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="接口ID" align="center" key="id" prop="id" :show-overflow-tooltip="true" />
+          <el-table-column label="双工模式" align="center" key="commuicateMode" prop="commuicateMode" :show-overflow-tooltip="true" />
+          <el-table-column label="入方向流量" align="center" key="inFlow" prop="inFlow" :show-overflow-tooltip="true" />
+          <el-table-column label="出方向流量" align="center" key="outFlow" prop="outFlow" :show-overflow-tooltip="true" />
+          <el-table-column label="宽带占用率" align="center" key="outBandwidth" prop="outBandwidth" :show-overflow-tooltip="true" />
+          <el-table-column label="丢包率" align="center" key="lossRate" prop="lossRate" :show-overflow-tooltip="true" />
+          <el-table-column label="错包率" align="center" key="errorRate" prop="errorRate" :show-overflow-tooltip="true" />
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { systemInterface } from "@/api/inMonitoring/devicesState"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import "splitpanes/dist/splitpanes.css"
+
+export default {
+  props: {
+    dsId: {
+      type: String,
+      default: 'chart'
+    }
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 类型表格数据
+      userList: null,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: undefined
+      },
+    }
+  },
+  created() {
+  },
+  watch: {
+    dsId: {
+      handler(val) {
+        this.getList(val)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    /** 查询类型列表 */
+    getList(id) {
+      this.loading = true
+      systemInterface(id).then(response => {
+        this.userList = response.rows
+        this.loading = false
+      })
+    }
+  }
+}
+</script>

ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/routing.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="">
+    <el-row :gutter="20">
+      <el-col>
+        <el-table v-loading="loading" :data="userList">
+          <el-table-column
+            label="序号"
+            width="60"
+            type="index"
+          ></el-table-column>
+          <el-table-column label="目的地址" align="center" key="desAddress" prop="desAddress" :show-overflow-tooltip="true" />
+          <el-table-column label="子网掩码" align="center" key="subnetMask" prop="subnetMask" :show-overflow-tooltip="true" />
+          <el-table-column label="下一跳地址" align="center" key="nextHop" prop="nextHop" :show-overflow-tooltip="true" />
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { systemRouting } from "@/api/inMonitoring/devicesState"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import "splitpanes/dist/splitpanes.css"
+
+export default {
+  props: {
+    dsId: {
+      type: String,
+      default: 'chart'
+    }
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 类型表格数据
+      userList: null,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: undefined
+      },
+    }
+  },
+  created() {
+  },
+  watch: {
+    dsId: {
+      handler(val) {
+        this.getList(val)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    /** 查询类型列表 */
+    getList(id) {
+      this.loading = true
+      systemRouting(id).then(response => {
+          this.userList = response.rows
+          this.loading = false
+        }
+      )
+    },
+  }
+}
+</script>

ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/vlan.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="">
+    <el-row :gutter="20">
+      <el-col>
+        <el-table v-loading="loading" :data="userList">
+          <el-table-column
+            label="序号"
+            width="60"
+            type="index"
+          ></el-table-column>
+          <el-table-column label="ManID" align="center" key="mainId" prop="mainId" :show-overflow-tooltip="true" />
+          <el-table-column label="IP地址" align="center" key="ipAddress" prop="ipAddress" :show-overflow-tooltip="true" />
+          <el-table-column label="子网掩码" align="center" key="subnetMask" prop="subnetMask" :show-overflow-tooltip="true" />
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceVlan } from "@/api/inMonitoring/devicesState"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import "splitpanes/dist/splitpanes.css"
+
+export default {
+  props: {
+    dsId: {
+      type: String,
+      default: 'chart'
+    }
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 类型表格数据
+      userList: null,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: undefined
+      },
+    }
+  },
+  created() {
+  },
+  watch: {
+    dsId: {
+      handler(val) {
+        this.getList(val)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    /** 查询类型列表 */
+    getList(id) {
+      this.loading = true
+      deviceVlan(id).then(response => {
+        this.userList = response.rows
+        this.loading = false
+      })
+    }
+  }
+}
+</script>