table列表操作处按钮添加按钮样式效果、服务器管理详情

1、table列表操作处按钮添加按钮样式效果
2、服务器管理图形监控和详情按钮权限修改
3、服务器管理详情网卡信息和虚拟网卡信息的form表单改为table列表
4、服务器管理详情流量图切换单双列优化、添加定时刷新功能

src/views/resource/serverRegister/tabsChart.vue

@@ -18,12 +18,23 @@
       <el-radio-group v-model="timeModel" size="medium" class="ml20" :disabled="timeShow" @input="radioTimeChange">
         <el-radio-button v-for="item of radioTimeList" :label="item.value">{{item.name}}</el-radio-button>
       </el-radio-group>
+      <!--   定时刷新   -->
+      <div class="disInlineBlock ml10">
+        <el-select v-model="timeRefresh" placeholder="请选择" style="width: 110px;" @change="fnTimeInter">
+          <el-option
+            v-for="item in timeModelOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
       <!--   单双列切换   -->
       <el-radio-group v-model="layoutModel" size="medium" class="ml20" style="float: right;" @input="radioLayouteChange">
         <el-radio-button v-for="item of radioLayoutList" :label="item.value">{{item.name}}</el-radio-button>
       </el-radio-group>
     </div>
-    <div v-if="activeName === '网卡流量监控'">
+    <div class="mt10" v-if="activeName === '网卡流量监控'">
       <span style="display: inline-block;font-size: 14px;font-weight: 600;">网卡名称：</span>
       <el-select v-model="interCardName" @change="handleSelect">
         <el-option v-for="(item,key) of this.interCartList" :key="key" :value="key" :label="key">
@@ -33,7 +44,7 @@
     </div>
     <template v-if="echartDataList && Object.keys(echartDataList).length > 0">
       <template v-for="(val, key, index) of echartDataList">
-        <div :ref="key" v-for="(item, chartIndex) of val.echartList" class="disInlineBlock mt20 mb20 plr-10" :style="`width: calc(100% / ${layoutModel}); height:300px;position: relative;`">
+        <div v-for="(item, chartIndex) of val.echartList" class="disInlineBlock mt10 mb10 plr-10" :style="`width: calc(100% / ${layoutModel}); height:300px;position: relative;`">
           <!--  图表标题  -->
           <div style="width: 100%;position: absolute;top: 12px;left: 30px;">
             <template v-if="val && val.serverIp">
@@ -51,7 +62,7 @@
             </div>
           </div>
           <!--  图表  -->
-          <EchartsLine v-if="val && val.titleTo" :key="`chart-${key || ''}-${index}-${chartIndex}`" :lineData="item && item.dataVal || {}"
+          <EchartsLine :ref="`${key}_${chartIndex}`" v-if="val && val.title" :key="`chart-${key || ''}-${index}-${chartIndex}`" :lineData="item && item.dataVal || {}"
                        :title="undefined" class="w100 h100" style="border: 1.5px solid #cfcfcf;"
                        :chartData="(valData, unit) => chartDataEvent(valData, item.fnEvent,val.title, unit)"></EchartsLine>
           <div v-else class="w100 h100 flex-center disInlineBlock mt20 mb20 plr-10" :style="`width: calc(100% / ${layoutModel}); height:200px;background: #f5f7fa;`">
@@ -63,11 +74,11 @@
         </div>
       </template>
     </template>
-    <div v-if="activeName === '网卡流量监控'">
-      <div v-for="(item, key) of systemContent" class="disInlineBlock w50" style="font-size: 14px;line-height: 25px;vertical-align: top;">
-        <span style="color: #C0C4CC;">{{item}}：</span>{{modelVal[key]}}
-      </div>
-    </div>
+<!--    <div v-if="activeName === '网卡流量监控'">-->
+<!--      <div v-for="(item, key) of systemContent" class="disInlineBlock w50" style="font-size: 14px;line-height: 25px;vertical-align: top;">-->
+<!--        <span style="color: #C0C4CC;">{{item}}：</span>{{modelVal[key]}}-->
+<!--      </div>-->
+<!--    </div>-->
   </div>
 </template>
 
@@ -157,11 +168,38 @@
         currTimeList: {},
         indexNum: 0,
         interCardName: '',
+        timedRefresh: '',
+        timeRefresh: '300000',
+        timeModelOptions: [
+          {value: '30000', label: '30s刷新'},
+          {value: '60000', label: '1分钟刷新'},
+          {value: '300000', label: '5分钟刷新'},
+          {value: '0', label: '不刷新'},
+        ],
       }
     },
     created() {
     },
+    beforeDestroy() {
+      clearInterval(this.timedRefresh);
+      this.timedRefresh = null;
+    },
     methods: {
+      // 定时刷新下拉
+      fnTimeInter(val) {
+        clearInterval(this.timedRefresh);
+        this.timedRefresh = null;
+        if (val !== '0') {
+          this.timedRefresh = setInterval(() => {
+            this.$emit('timeChangeData', {currTimeList: this.currTimeList, interCardName: this.interCardName});
+          }, Number(val));
+        }
+      },
+      // 网卡下拉
+      handleSelect(val) {
+        this.$emit('timeChangeData', {currTimeList: this.currTimeList, interCardName: this.interCardName, onlyInterCard: true});
+        this.fnTimeInter(this.timeRefresh);
+      },
       // 时间 多选框状态
       checkChange(val) {
         this.timeModel = null;
@@ -170,6 +208,7 @@
       dateChange(val){
         this.currTimeList = {startTime: val[0], endTime: val[1]};
         this.$emit('timeChangeData', {currTimeList: this.currTimeList, interCardName: this.interCardName});
+        this.fnTimeInter(this.timeRefresh);
       },
       // 时间按钮切换
       radioTimeChange(val) {
@@ -184,14 +223,23 @@
           this.get7dayTime();
         }
         this.$emit('timeChangeData', {currTimeList: this.currTimeList, interCardName: this.interCardName});
+        this.fnTimeInter(this.timeRefresh);
       },
       // 单双列按钮切换
       radioLayouteChange(val) {
         this.layoutModel = val;
         this.$nextTick(() => {
-          const resizeEvent = new Event('resize');
-          // 派发这个事件，这会触发所有已绑定的 window resize 监听器
-          window.dispatchEvent(resizeEvent);
+          // 遍历所有图表实例，分别调用 resize
+          Object.keys(this.$refs).forEach(key => {
+            const chartRefs = this.$refs[key];
+            if (Array.isArray(chartRefs)) {
+              chartRefs.forEach(chartRef => {
+                if (chartRef.resizeChart) {
+                  chartRef.resizeChart();
+                }
+              });
+            }
+          });
         });
       },
       // 近6小时
@@ -260,7 +308,6 @@
         return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
       },
 
-
       chartDataEvent(valData, funcName, tabName, unit) {
         this.$emit("chartFnEvent", this.currTimeList, funcName, tabName, unit, this.activeName, this.interCardName);
         // // 检查函数是否存在，避免报错
@@ -287,4 +334,7 @@
     height: 100%;
     font-size: 1.1rem;
   }
+  ::v-deep .el-radio-button--medium .el-radio-button__inner {
+    padding: 10px 15px!important;
+  }
 </style>