图形监控上方去掉选择时间复选框、探测策略表单的频率字段改为下拉

1、tcpdump探测策略表单的频率字段改为下拉
2、虚拟网卡信息列表添加ping丢包率字段
3、服务器管理详情图形监控上方去掉选择时间复选框
4、HDD磁盘空间去掉HDD、图表单位改为大写
5、硬盘设备监控列表的读/写速率单位KB改为MB

src/views/resource/serverRegister/details.vue

@@ -129,7 +129,7 @@
           {name: '带宽', num: 0, unit: 'Mbps', imgUrl: bandWImg},
           {name: 'CPU', num: 0, unit: '核', imgUrl: cpuImg},
           {name: '内存', num: 0, unit: 'G', imgUrl: memoryImg},
-          {name: '磁盘容量(HDD)', num: 0, unit: 'GB', imgUrl: diskSizeImg},
+          {name: '磁盘容量', num: 0, imgUrl: diskSizeImg},
         ],
         activeName: '网卡流量监控',
         echartList: {},
@@ -466,7 +466,7 @@
             '网卡信息': {title: '网卡信息', toTitle: '网卡', clientId: this.paramsData.clientId, echartList: []},
             'CPU使用率': {title: 'CPU使用率(%)', titleTo: 'CPU使用率(%)', clientId: this.paramsData.clientId},
             '内存使用率': {title: '内存使用率(%)', titleTo: '内存使用率(%)', clientId: this.paramsData.clientId},
-            'HDD磁盘空间': {title: 'HDD磁盘空间', titleTo: 'HDD磁盘空间使用情况', clientId: this.paramsData.clientId},
+            '磁盘空间': {title: '磁盘空间', titleTo: '磁盘空间使用情况', clientId: this.paramsData.clientId},
             'CPU温度': {title: 'CPU温度', titleTo: 'CPU温度(℃)', clientId: this.paramsData.clientId},
           });
         // this.getMonitorData();
@@ -575,7 +575,7 @@
               await this.getCpuLoadData(time, keyVal, keyName)
             } else if (keyName === '内存使用率') {
               await this.getMemoryUtilizationData(time, keyVal, keyName)
-            } else if (keyName === 'HDD磁盘空间') {
+            } else if (keyName === '磁盘空间') {
               await this.fnUsedSpaceCharts(time, keyVal, keyName);
             } else if (keyName === 'CPU温度') {
               this.fnCpuTemperatureCharts(time, keyVal, keyName);
@@ -866,7 +866,7 @@
           return true;
         });
       },
-      // HDD磁盘空间使用情况
+      // 磁盘空间使用情况
       fnUsedSpaceCharts(times, keyVal, titleName,interCardName, unitData) {
         let chartData = JSON.parse(JSON.stringify(this.resultData[1]));
         chartData['fnEvent'] = 'fnUsedSpaceCharts';
@@ -874,7 +874,7 @@
           if (res && res.data) {
             if (res.data.unit) {
               chartData.dataVal['unitModel'] = res.data.unit || '';
-              chartData.dataVal['unitSelList'] = [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}];
+              chartData.dataVal['unitSelList'] = [{label: 'KB', value: 'KB'},{label: 'MB', value: 'MB'}, {label: 'GB', value: 'GB'}];
             }
             chartData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
               this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
@@ -931,9 +931,10 @@
             if (this.mapDataList[this.activeName][val.key] && !(this.mapDataList[this.activeName][val.key].echartList[0] && this.mapDataList[this.activeName][val.key].echartList[0].title)) {
               if (this.activeName === '挂载文件系统监控' && !this.eventKeyName[val.key]) {
                 this.getSpaceRate(val.currTimeList, this.activeName, val.key);
-              } else if (this.activeName === '硬盘设备监控' && !this.eventKeyName[val.key]) {
-                this.getSpeedEcharts(val.currTimeList, this.activeName, val.key);
               }
+              // else if (this.activeName === '硬盘设备监控' && !this.eventKeyName[val.key]) {
+              //   this.getSpeedEcharts(val.currTimeList, this.activeName, val.key);
+              // }
             }
           }
         }

src/views/resource/serverRegister/flowForm.vue

@@ -7,12 +7,12 @@
         <el-tag
           :key="tagIndex"
           v-for="(tag,tagIndex) in formModel[field.key]"
-          :closable="!readonly"
+          :closable="readonly ? false : ruleForm.frequency === '1'"
           :disable-transitions="false"
           @close="handleClose(field.key, tagIndex)">
           {{tag}}
         </el-tag>
-        <template v-if="!readonly">
+        <template v-if="readonly ? false : ruleForm.frequency === '1'">
           <el-time-picker
             style="width: 120px!important;"
             class="input-new-tag"
@@ -31,15 +31,18 @@
       <div class="mb20" style="border: 1px solid #eee;padding: 10px;">
         <span>出省流量统计</span>
         <div style="max-height: calc(100vh - 445px);overflow: auto;">
-          <temmplate v-if="timelineList && timelineList.length > 0">
+          <template v-if="timelineList && timelineList.length > 0">
             <div v-for="item of timelineList" class="ml20">
               <pre>{{item.description}}</pre>
             </div>
-          </temmplate>
+          </template>
           <div v-else class="ml20 mt20" style="height: 100px;color: #a3a3a3;">
             暂无数据
           </div>
         </div>
+<!--        <div>-->
+<!--          <TableList ref="tabRef" :columns="columns" :config="config" :queryParams="queryParams" :tableList="roleList" @fnRenderList="getList" @fnClick="callback"></TableList>-->
+<!--        </div>-->
       </div>
     </div>
     <div style="text-align: right;" class="mr20">
@@ -50,30 +53,59 @@
 
 <script>
   import Form from '@/components/form/index.vue';
+  import TableList from '@/components/table/index.vue';
   import {getRmTcpdumpConfig, rmOutTrafficFlow, updateRmTcpdum} from "@/api/disRevenue/resource";
   export default {
     name: "flowForm",
-    dicts: ['pppoe_enabled', 'pppoe_config_mode'],
-    components: {Form},
+    dicts: ['pppoe_enabled', 'frequency'],
+    components: {Form, TableList},
     data() {
       return {
         formList: [],
         readonly: true,
         paramsData: {},
         ruleForm: {
-          // detectFlag: '1',
-          // frequency: '每天',
           detectTimes: []
         },
-        formModel: {
-          // detectFlag: '1',
-          // frequency: '每天',
+        formModelData: {
           detectTimes: []
         },
         inputVisible: false,
         inputValue: '',
         formKey: 1,
         timelineList: [],
+        roleList: [],
+        // 列显隐信息
+        columns: {
+          id: {label: `ID`, width: '50'},
+          clientId: {label: `clientID`, minWidth: '280'},
+          name: {label: `磁盘名称`, minWidth: '60', visible: true},
+          serial: {label: `序列号`, minWidth: '120', visible: true},
+          total: {label: `总大小(GB)`, minWidth: '100',visible: true},
+          type: {label: `类型`, minWidth: '60',visible: true},
+          usedSpace: {label: `已用空间(GB)`, minWidth: '100',visible: true},
+          readSpeed: {label: `读速率(KB/s)`, minWidth: '90',visible: true},
+          writeSpeed: {label: `写速率(KB/s)`, minWidth: '90',visible: true},
+          readIops: {label: `读IOPS`, minWidth: '60',visible: true},
+          writeIops: {label: `写IOPS`, minWidth: '60',visible: true},
+          status: {label: `状态`, minWidth: '50', slotName: 'tempDiskStatus', visible: true},
+          omountFlag: {label: `执行卸载`, minWidth: '60', slotName: 'tempOmountFlag', visible: true},
+        },
+        config: {
+          colHiddenCheck: true, colTopHiddenIcon: true,
+          tableButton: {
+            line: [
+              {content: '测试磁盘IOOS', fnCode: 'testIoos', type: 'primary', showName: 'status', showVal: '1'},
+              {content: '卸载', fnCode: 'uninstall', type: 'danger', showName: 'status', showVal: '0'},
+              {content: '删除记录', fnCode: 'delete', type: 'danger', showName: 'status', showVal: '0'},
+            ]
+          }
+        },
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          total: 0
+        },
       }
     },
     created() {
@@ -116,7 +148,7 @@
           if (res && res.data) {
             res.data.detectFlag = res.data && res.data.detectFlag.toString();
             res.data.detectTimes = res.data && res.data.detectTimes ? res.data.detectTimes.split(',') : [];
-            this.formModel = JSON.parse(JSON.stringify(res.data));
+            this.formModelData = JSON.parse(JSON.stringify(res.data));
             this.ruleForm = JSON.parse(JSON.stringify(res.data));
           }
         });
@@ -129,6 +161,14 @@
           }
         });
       },
+      /** 查询列表 */
+      getList() {
+        this.loading = true;
+        // listGroup(this.queryParams).then(response => {
+        //   this.roleList = response.rows;
+        //   this.queryParams.total = response.total;
+        // })
+      },
       // formList集合
       fnFormList(readonly) {
         this.formList = [{
@@ -137,8 +177,8 @@
             id: {label: 'ID', hidden: true},
             clientId: {label: 'clientId', hidden: true},
             detectFlag: {label: '开启探测', span: 12, type: 'radio', options: this.dict.type.pppoe_enabled, required: true},
-            frequency: {label: '频率', span: 12, type: 'input', disabled: true},
-            detectTimes: {label: '时间', span: 24, slotName: 'tempTimeList', required: true},
+            frequency: {label: '频率', span: 12, type: 'select', options: this.dict.type.frequency, eventName: 'change'},
+            detectTimes: {label: '时间', span: 24, slotName: 'tempTimeList', required: true, required: this.ruleForm.frequency === '1'},
           }
         }];
         this.formKey += 1;
@@ -151,15 +191,15 @@
           if (formRef && formRef.$refs.ruleForm) {
             formRef.$refs.ruleForm.clearValidate(); // 清除校验提示
           }
-          this.ruleForm = this.formModel;
-          this.readonly = true;
-          this.fnFormList(this.readonly);
-
+          this.ruleForm = JSON.parse(JSON.stringify(this.formModelData));
+          this.$nextTick(() => {
+            this.readonly = true;
+            this.fnFormList(this.readonly);
+          });
         } else {
           if (!this.readonly) {
             this.formSumbit();
           } else {
-            this.ruleForm = Object.assign({}, this.ruleForm, {frequency: '每天'});
             this.readonly = !this.readonly;
             this.fnFormList(this.readonly);
           }
@@ -197,6 +237,14 @@
       callback(result, dataVal, formVal) {
         if (result && result.fnCode) {
           switch (result.fnCode) {
+            case 'frequency':
+              this.ruleForm = Object.assign(this.ruleForm, this.$refs.formRef.$refs.ruleForm.model, {detectTimes: this.formModelData['detectTimes']});
+              if (dataVal === '1') {
+                this.formList[0].controls.detectTimes['required'] = true;
+              } else if (dataVal === '2') {
+                this.formList[0].controls.detectTimes['required'] = false;
+              }
+              break;
             case 'submit':
               break;
             case 'cancel':

src/views/resource/serverRegister/table.vue

@@ -138,6 +138,7 @@
             ipv4Address: {label: `IPv4`, minWidth: '120',visible: true},
             gateway: {label: `网关`, minWidth: '120',visible: true},
             interfaceName: {label: `接口名称`, minWidth: '100',visible: true},
+            pingDropped: {label: `ping丢包率`, minWidth: '100',visible: true},
             interfaceType: {label: `接口类型`, minWidth: '80',visible: true},
             macAddress: {label: `MAC地址`, minWidth: '150',visible: true},
             ipv6Address: {label: `IPv6`, minWidth: '100',visible: true},
@@ -175,8 +176,8 @@
             total: {label: `总大小(GB)`, minWidth: '100',visible: true},
             type: {label: `类型`, minWidth: '60',visible: true},
             usedSpace: {label: `已用空间(GB)`, minWidth: '100',visible: true},
-            readSpeed: {label: `读速率(KB/s)`, minWidth: '90',visible: true},
-            writeSpeed: {label: `写速率(KB/s)`, minWidth: '90',visible: true},
+            readSpeed: {label: `读速率(MB/s)`, minWidth: '90',visible: true},
+            writeSpeed: {label: `写速率(MB/s)`, minWidth: '90',visible: true},
             readIops: {label: `读IOPS`, minWidth: '60',visible: true},
             writeIops: {label: `写IOPS`, minWidth: '60',visible: true},
             status: {label: `状态`, minWidth: '50', slotName: 'tempDiskStatus', visible: true},

src/views/resource/serverRegister/tabsChart.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="w100 h100">
     <div class="w100" style="height: 40px;">
+<!--      :disabled="!timeShow" -->
       <el-date-picker
         v-model="timeList"
         :style="{width: '360px!important', marginRight: '10px'}"
         type="datetimerange"
-        :disabled="!timeShow"
         start-placeholder="开始时间"
         end-placeholder="结束时间"
         range-separator="至"
@@ -13,9 +13,9 @@
         value-format="yyyy-MM-dd HH:mm:ss"
         :default-time="['00:00:00', '23:59:59']"
         @change="(val) => dateChange(val)"/>
-      <el-checkbox v-model="timeShow" @change="checkChange">选择时间</el-checkbox>
-      <!--   不同条时间件切换   -->
-      <el-radio-group v-model="timeModel" size="medium" class="ml20" :disabled="timeShow" @input="radioTimeChange">
+<!--      <el-checkbox v-model="timeShow" @change="checkChange">选择时间</el-checkbox>-->
+      <!--   不同条时间件切换  :disabled="timeShow"  -->
+      <el-radio-group v-model="timeModel" size="medium" class="ml20" @input="radioTimeChange">
         <el-radio-button v-for="item of radioTimeList" :label="item.value">{{item.name}}</el-radio-button>
       </el-radio-group>
       <!--   定时刷新   -->
@@ -230,6 +230,7 @@
             } else if (this.timeModel === '7') {
               this.get7dayTime();
             }
+            this.timeList = [this.currTimeList.startTime, this.currTimeList.endTime];
             this.$emit('timeChangeData', {currTimeList: this.currTimeList, interCardName: this.interCardName});
           }, Number(val));
         }
@@ -261,6 +262,7 @@
         } else if (val === '7') {
           this.get7dayTime();
         }
+        this.timeList = [this.currTimeList.startTime, this.currTimeList.endTime];
         this.$emit('timeChangeData', {currTimeList: this.currTimeList, interCardName: this.interCardName});
         this.fnTimeInter(this.timeRefresh);
       },