MTR探测策略表单提交添加拦截提示、服务器管理查看MTR丢包趋势图页面，添加点击点上弹窗中的详情，展示列表

1、MTR探测策略表单提交添加未知的ClientID提示，拦截提交
2、服务器管理查看MTR丢包趋势图页面，添加点击点上弹窗中的详情，展示列表
3、表单详情中input框的内容超出自动换行
4、优化列表操作按钮展示功能以及修改bug

src/assets/styles/index.scss

@@ -341,11 +341,16 @@ aside {
   left: 53% !important;
   //transform: translate(-50%, -50%) !important;
 }
-// 提示信息--应用于Agent更新提交时
+// 提示信息--应用于Agent更新、mtr探测策略--提交时
-.el-message {
+.el-message--warning {
   max-width: 600px!important;
 }
+.el-message--warning .el-message__icon {
+  position: absolute;
+  top: 14px;
+}
 .el-message--warning .el-message__content {
   width: 95%;
   word-wrap: break-word!important;
+  margin-left: 26px;
 }

src/components/echartsList/line.vue

@@ -160,7 +160,7 @@
 
                 // 如果太靠右，向左偏移
                 if (x > size.viewSize[0] - size.contentSize[0]) {
-                  x = x - size.contentSize[0] - 20;
+                  x = x - size.contentSize[0] + 10;
                 }
 
                 // 如果太靠下，向上偏移
@@ -168,7 +168,7 @@
                   y = y - size.contentSize[1] - 20;
                 }
 
-                return [x - 10, y + 10];
+                return [x - 5, y + 18];
               },
               formatter: !dataXY.tooltipFormatter ? null : function(params) {   // 主要应对与MTRAgent丢包趋势图模块的功能
                 // 获取当前悬停的日期
@@ -180,12 +180,9 @@
                   if (dataXY.tooltipFormatter && dataXY.tooltipFormatter.customList) {
                     if (paramItem.data.content) {
                       let content = JSON.parse(paramItem.data.content);
-                      html+= `<div>最新一跳平均延迟: ${content[content.length - 1].avgLatency}(ms)</div>
+                      html+= `<div>最后一跳平均延迟: ${content[content.length - 1].avgLatency}(ms)</div>
-                                <div>最新一跳丢包率: ${content[content.length - 1].lossPercent}(%)</div>`;
+                                <div>最后一跳丢包率: ${content[content.length - 1].lossPercent}(%)</div>`;
-                      // 如果不是弹窗这显示按钮，可点击查看弹窗信息
+                        html+= `<button style="float: right;background: #409eff; border-color: #409eff;color:#fff;box-shadow:none;" onclick="window.detailsVal('${date}' ,'${paramItem.dataIndex}', '${dataXY.dialogOpen}')">详情</button>`;
-                      if (dataXY.tooltipFormatter && !dataXY.tooltipFormatter.defaultType) {
-                        html+= `<button style="float: right;background: #409eff; border-color: #409eff;color:#fff;box-shadow:none;" onclick="window.detailsVal('${date}' ,'${paramItem.dataIndex}')">详情</button>`;
-                      }
                     } else {
                       let valueparams = paramItem.value;
                       if (dataXY.tooltipFormatter && dataXY.tooltipFormatter.valueToop) {
@@ -380,11 +377,15 @@
           }
         },
         // tooltip中的按钮点击事件
-        detailsVal(xTime, content) {
+        detailsVal(xTime, content, dialogOpen) {
+          if (dialogOpen && dialogOpen !== 'null') {
+            this.$emit('showChartTabList', {value: xTime, tableVal: this.lineData.dataList[0].data[content]});
+          } else {
             this.$emit('dialogChartTabList', {value: xTime, tableVal: this.lineData.dataList[0].data[content]});
           }
         }
       }
+    }
 </script>
 <style scoped>
   /* 新增样式 */

src/components/form/index.vue

@@ -18,6 +18,10 @@
                   <span :title="formVal.label">{{formVal.label ? formVal.label + '：' : ''}}</span>
                 </template>
                 <template v-if="formVal.type === 'input'">
+                  <div v-if="toBoolean(formVal.disabled || formItem.config.readonly)">
+                    <div style="color: #606266;font-weight: 700;padding-left: 15px;word-wrap: break-word;line-height: 25px;margin-top: 5px;" v-html="ruleForm[key]"></div>
+                  </div>
+                  <template v-else>
                     <el-input
                       v-model="ruleForm[key]"
                       :clearable="formVal.clearable !== false"
@@ -27,6 +31,7 @@
                       @[formVal.eventName]="(val) => handleChange(key,val,formVal)"></el-input>
                     <br/><span v-if="!toBoolean(formVal.disabled || formItem.config.readonly)" class="warningCol">{{formVal.warningTitle}}</span>
                     </template>
+                  </template>
 
                 <template v-if="formVal.type === 'textarea'">
                   <div v-if="toBoolean(formVal.disabled || formItem.config.readonly)">

src/components/table/index.vue

@@ -73,7 +73,7 @@
             <el-table-column v-if="config && config.tableButton && config.tableButton.line" :width="calculateOperationColumnWidth(config.tableButton.line, tableList)" label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
                 <template #default="scope">
                   <template v-for="item of config.tableButton.line">
-                    <template v-if="item && item.more && item.more.length > 0">
+                    <template v-if="item && item.more && item.more.length > 0 && checkPermi(item.hasPermi)">
                       <el-dropdown size="mini" trigger="click" @command="(command) => handleClick({fnCode: command}, scope.row)">
                         <el-button size="mini" type="text" icon="el-icon-d-arrow-right"><span style="margin-left: -5px;">{{item && item.title ? item.title : '更多'}}</span></el-button>
                         <el-dropdown-menu slot="dropdown">
@@ -260,10 +260,23 @@
 
         // 判断按钮是否显示
         isButtonVisible(buttonConfig, row) {
+          if (buttonConfig && buttonConfig.more) {
+            if (!checkPermi(buttonConfig.hasPermi)) {
+              return false;
+            }
             if (buttonConfig.showName) {
               return buttonConfig.showVal.includes(row[buttonConfig.showName]);
             }
             return true;
+          } else {
+            if (!checkPermi([buttonConfig.hasPermi])) {
+              return false;
+            }
+            if (buttonConfig.showName) {
+              return buttonConfig.showVal.includes(row[buttonConfig.showName]);
+            }
+            return true;
+          }
         },
         // 所有方法都抛出到父组件里去
         handleClick(result, row) {

src/views/resource/agentUpdate/agentUpdateView.vue

@@ -142,7 +142,7 @@
                 });
               }
               if (unknownData && unknownData.length > 0) {
-                this.$modal.msgWarning(`存在未知的ClientID: ${unknownData.join(';')}`);
+                this.$modal.msgWarning(`存在未知的ClientID: ${unknownData.join('; ')}`);
                 return;
               }
               let fnType = addAgentManage;

src/views/resource/fileManage/fileManageView.vue

@@ -66,8 +66,8 @@
             groupName: {label: '名称', span: 12, type: 'input'},
             type: {label: '类型', span: 12, type: 'input', disabled: true},
             description: {label: '描述', span: 12, type: 'textarea'},
-            createTime: {label: '创建时间', span: 12, type: 'date', disabled: true},
+            createTime: {label: '创建时间', span: 12, type: 'datetime', disabled: true},
-            includedDevices: {label: '修改时间', span: 12, type: 'date', disabled: true},
+            includedDevices: {label: '修改时间', span: 12, type: 'datetime', disabled: true},
             num: {label: '大小(KB)', span: 12, type: 'input', disabled: true},
             md5: {label: 'MD5值', span: 12, type: 'input', disabled: true},
             router: {label: '路径', span: 12, type: 'input', disabled: true},

src/views/resource/mtrAgent/lossRateChart.vue

@@ -9,7 +9,7 @@
                 <div class="textAlignCenter">探测失败 <br/>{{val.mtrClientId}}</div>
               </div>
               <div v-else class="w100 h100" style="position: relative;">
-                <div style="position: absolute;">最新丢包率：{{item.dataVal.lastYDataNum || 'null'}}</div>
+                <div style="position: absolute;">最后一跳丢包率：{{item.dataVal.lastYDataNum || item.dataVal.lastYDataNum == 0 ? item.dataVal.lastYDataNum : 'null'}}</div>
                 <EchartsLine class="w100 h100" :key="`chart-${val && val.title || ''}-${item && item.title || ''}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item && item.dateDataTrans || {}" :dateShowType="item && item.dateShowType || 'datetimerange'" :title="item && item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData,val.title)" @dialogChartTabList="dialogChartTabList" @showChartTabList="showChartTabList"></EchartsLine>
               </div>
             </div>
@@ -19,7 +19,7 @@
     </el-collapse>
     <template v-if="open && roleList.length > 0">
       <div style="font-size: 1.2rem;" class="pt5 pb5">{{tagTitle}}</div>
-      <TableList :columns="columns" :config="{colTopHiddenIcon: true}" :tableList="roleList">
+      <TableList :columns="columns" :config="{colTopHiddenIcon: true, colHiddenCheck: true}" :tableList="roleList">
         <template #tempUnit="{ valueKey, row, column }">
           {{row[valueKey]}}{{column.unit}}
         </template>
@@ -30,7 +30,7 @@
     </div>
     <!--   弹窗    -->
     <el-dialog :title="tagTitle" :visible.sync="tagOpen" width="900px" append-to-body style="padding-bottom: 20px;">
-      <TableList :columns="columns" :config="{colTopHiddenIcon: true}" :tableList="roleList">
+      <TableList :columns="columns" :config="{colTopHiddenIcon: true, colHiddenCheck: true}" :tableList="roleList">
         <template #tempUnit="{ valueKey, row, column }">
           {{row[valueKey]}}{{column.unit}}
         </template>
@@ -71,6 +71,8 @@
             params[this.dialogRowData.clientId]['jointName'] = '丢包率';
             this.activeShowList.push(this.dialogRowData.clientId);
             this.chartDataLit = params;
+            this.tagTitle = '';
+            this.roleList = [];
             this.timeDefault();
             this.$nextTick(() => {
               this.getEchartList(params, 'dialog');
@@ -181,6 +183,7 @@
                     yDataList = res.data.yData.packetLossRate || [];
                   }
                 }
+                chartList.dataVal.dialogOpen = this.open ? this.open : null;
                 chartList.dataVal.tooltipFormatter['defaultType'] = type ? type : null;
                 chartList.dataVal.lineXData = res.data && res.data.xData || [];
                 chartList.dataVal.dataList[0].data = yDataList || [];

src/views/resource/mtrAgent/mtrAgent.vue

@@ -138,7 +138,7 @@
             line: [
               {content: '查看丢包率趋势', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'resource:mtrAgent:echartView'},
               {content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:mtrAgent:details'},
-              {title: '更多', more: [
+              {title: '更多', hasPermi: ['resource:mtrAgent:update', 'resource:mtrAgent:addMtrProbe'], more: [
                   {content: '配置更新策略', fnCode: 'update', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:mtrAgent:update'},
                   {content: '新建MTR探测策略', fnCode: 'addMtrProbe', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:mtrAgent:addMtrProbe'},
                 ]

src/views/resource/mtrProbe/mtrProbeView.vue

@@ -12,7 +12,7 @@
 
 <script setup name="Handle">
   import Form from '@/components/form/index.vue';
-  import {addMtrPolicy, updateMtrPolicy, getMtrPolicyt, allMtrClientIdData, networkInterList} from "@/api/disRevenue/resource"
+  import {addMtrPolicy, updateMtrPolicy, getMtrPolicyt, allMtrClientIdData, networkInterList, getRegistList} from "@/api/disRevenue/resource"
   export default {
     name: 'mtrProbe_view',
     components: {Form},
@@ -60,6 +60,7 @@
         errorMsgOpen: false,
         errorMsg: '',
         routeType: '',
+        clientIdList: {},
       }
     },
     created() {
@@ -84,6 +85,7 @@
         this.fnFormList();
         this.fnMtrClientList();
       }
+      this.getClientIDList();
       if (this.paramsData && this.paramsData.readonly) {
         this.config = {
           buttonGroup: [{title: '返回', fnCode: 'goBack'}]
@@ -154,6 +156,17 @@
           // this.$modal.msgError("操作失败")
         });
       },
+      // 所有ClientID
+      getClientIDList() {
+        this.clientIdList = {};
+        getRegistList({resourceType: 1}).then(res => {
+          if (res && res.data) {
+            res && res.data.map(item => {
+              this.clientIdList[item.clientId] = item.clientId;
+            });
+          }
+        });
+      },
       fnMtrClientList() {
         allMtrClientIdData({}).then(res => {
           this.formList[0].controls.mtrClientId['options'] = res && res.data.map(item => {
@@ -219,6 +232,20 @@
               }
               break;
             case 'submit':
+              let unknownData = [];
+              if (dataVal && dataVal.serverGroup) {
+                let deployList = JSON.parse(JSON.stringify(dataVal.serverGroup.trim())).split('\n');
+                deployList.forEach(item => {
+                  if (!this.clientIdList[item]) {
+                    unknownData.push(item);
+                  }
+                });
+              }
+              if (unknownData && unknownData.length > 0) {
+                this.$modal.msgWarning(`存在未知的ClientID: ${unknownData.join('; ')}`);
+                return;
+              }
+
               if (this.loading) return;
               this.loading = true;
               let fnType = addMtrPolicy;

src/views/resource/serverRegister/index.vue

@@ -285,7 +285,7 @@
                 {content: '选择业务IP', fnCode: 'pubilcNet', type: 'text', icon: 'el-icon-thumb', showName: 'multiPublicIpStatus', showVal: '0', hasPermi: 'resource:serverRegister:pubilcNet'},
                 {content: '图形监控', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'rocketmq:traffic'},
                 {content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:serverRegister:details'},
-                {title: '更多', more: [
+                {title: '更多', hasPermi: ['system:businessDeploy', 'rocketmq:policy', 'rocketmq:monitorPolicy', 'rocketmq:remote', 'resource:serverRegister:tagRemarkEdit', 'resource:serverRegister:mtrChartVew'], more: [
                     {content: '下发业务', fnCode: 'issueBusiness', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'system:businessDeploy'},
                     {content: '下发脚本策略', fnCode: 'issueScript', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'rocketmq:policy'},
                     {content: '下发监控策略', fnCode: 'issueMonitor', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'rocketmq:monitorPolicy'},