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

1、MTR探测策略表单提交添加未知的ClientID提示，拦截提交 2、服务器管理查看MTR丢包趋势图页面，添加点击点上弹窗中的详情，展示列表 3、表单详情中input框的内容超出自动换行 4、优化列表操作按钮展示功能以及修改bug
2025-12-10 18:31:45 +08:00
parent b15a389df9
commit 0b66502f4d
10 changed files with 88 additions and 34 deletions
@@ -341,11 +341,16 @@ aside {
  left: 53% !important;
  //transform: translate(-50%, -50%) !important;
 }
-// 提示信息--应用于Agent更新提交时
-.el-message {
+// 提示信息--应用于Agent更新、mtr探测策略--提交时
+.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;
 }
@@ -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>
-                                <div>最新一跳丢包率: ${content[content.length - 1].lossPercent}(%)</div>`;
-                      // 如果不是弹窗这显示按钮，可点击查看弹窗信息
-                      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>`;
-                      }
+                      html+= `<div>最后一跳平均延迟: ${content[content.length - 1].avgLatency}(ms)</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>`;
                    } 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>
  /* 新增样式 */
@@ -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)">
@@ -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) {
@@ -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},
-            includedDevices: {label: '修改时间', span: 12, type: 'date', disabled: true},
+            createTime: {label: '创建时间', span: 12, type: 'datetime', 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},
@@ -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 || [];
@@ -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'},
                ]
@@ -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;
@@ -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'},