【web】 设备状态监控

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

@@ -38,7 +38,7 @@
                               <span class="info-label">
                                   <i class="fas fa-tag"></i> 品牌型号
                               </span>
-                              <span class="info-value">{{cardData.manufacture || '暂无'}}</span>
+                              <span class="info-value">{{cardData.brand || '暂无'}}</span>
                           </div>
                           <div class="info-item">
                               <span class="info-label">

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

@@ -8,13 +8,32 @@
             width="60"
             type="index"
           ></el-table-column>
-          <el-table-column label="预警时间" align="center" key="occurTime" prop="occurTime"/>
-          <el-table-column label="预警等级" align="center" key="level" prop="level" :show-overflow-tooltip="true" />
-          <el-table-column label="预警信息" align="center" key="message" prop="message" :show-overflow-tooltip="true" />
+          <el-table-column label="预警时间" align="center" key="occurTime" prop="occurTime">
+            <template slot-scope="scope">
+              <span>{{ scope.row.occurTime || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="预警等级" align="center" key="level" prop="level" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.level || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="预警信息" align="center" key="message" prop="message" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.message || '--' }}</span>
+            </template>
+          </el-table-column>
           <el-table-column label="预警状态" align="center" key="status" prop="status" :show-overflow-tooltip="true">
             <template slot-scope="scope">
-              <el-tag v-if="scope.row.status === 'HANDLED'" type="success">已处理</el-tag>
-              <el-tag v-else type="danger">未处理</el-tag>
+              <template v-if="scope.row.status === 'HANDLED'">
+                <el-tag type="success">已处理</el-tag>
+              </template>
+              <template v-else-if="scope.row.status">
+                <el-tag type="danger">未处理</el-tag>
+              </template>
+              <template v-else>
+                <span>--</span>
+              </template>
             </template>
           </el-table-column>
 

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

@@ -10,16 +10,54 @@
           ></el-table-column>
           <el-table-column label="采集时间" align="center" prop="gatherTime" width="160">
             <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.gatherTime) }}</span>
+              <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">
+            <template slot-scope="scope">
+              <span>{{ scope.row.id || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="双工模式" align="center" key="commuicateMode" prop="commuicateMode" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.commuicateMode == 1 ? 'full' : scope.row.commuicateMode == 2 ? 'half' : '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="入方向流量" align="center" key="inFlow" prop="inFlow" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.inFlow || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="出方向流量" align="center" key="outFlow" prop="outFlow" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.outFlow || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="入方向宽带占用率%" align="center" key="inBandwidth" prop="inBandwidth" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.inBandwidth || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="出方向宽带占用率%" align="center" key="outBandwidth" prop="outBandwidth" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.outBandwidth || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="丢包率" align="center" key="lossRate" prop="lossRate" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.lossRate || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="错包率" align="center" key="errorRate" prop="errorRate" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.errorRate || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="传输速率" align="center" key="rate" prop="rate" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.rate || '--' }}</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>

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

@@ -8,9 +8,21 @@
             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-column label="目的地址" align="center" key="desAddress" prop="desAddress" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.desAddress || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="子网掩码" align="center" key="subnetMask" prop="subnetMask" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.subnetMask || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="下一跳地址" align="center" key="nextHop" prop="nextHop" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.nextHop || '--' }}</span>
+            </template>
+          </el-table-column>
         </el-table>
       </el-col>
     </el-row>

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

@@ -8,9 +8,21 @@
             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-column label="ManID" align="center" key="mainId" prop="mainId" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.mainId || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="IP地址" align="center" key="ipAddress" prop="ipAddress" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.ipAddress || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="子网掩码" align="center" key="subnetMask" prop="subnetMask" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.subnetMask || '--' }}</span>
+            </template>
+          </el-table-column>
         </el-table>
       </el-col>
     </el-row>