服务器管理、图形分析

1、服务器管理列表添加告警行背景色闪烁 2、服务器管理表单和列表添加字段 3、图形监控中判断IPv4和IPv6流量图的展示 4、带宽收益图形分析的多选下拉设置超出行展示+n
2025-12-18 19:00:38 +08:00
parent 88e6c04264
commit 8381e99541
8 changed files with 333 additions and 94 deletions
@@ -752,6 +752,14 @@ export function getNetTraffic(query) {
    data: query
  })
 }
+// 查询列表前先查询该数据，用于高亮判断
+export function getAlarmFlag() {
+  return request({
+    url: '/system/registration/getAlarmFlag',
+    method: 'get'
+  })
+}
+
 export function bindBusByClient(query) {
  return request({
    url: 'system/registration/bindBusinessByClientIds',
@@ -354,3 +354,6 @@ aside {
  word-wrap: break-word!important;
  margin-left: 26px;
 }
+.my-custom-select-dropdown {
+  top: 98px!important;
+}
@@ -11,7 +11,7 @@
            <right-toolbar v-if="!(config && config.colTopHiddenIcon)" :modelIdent="this.modelIdent" :showSearch.sync="showSearch" @queryTable="renderList" @columnsChange="columnsChange" :columns="columns"></right-toolbar>
        </el-row>
        <!-- 表格数据 -->
-        <el-table v-loading="loading" :data="tableList" :ref="config && config.tableKey ? `tableRef_${config.tableKey}` : `selChangeList`" :key="tableKey" :highlight-current-row="config && config.currentSel || false" @current-change="(val) => handleClick({fnCode: 'currentData'},val)" highlight-selection-row @select-all="handleSelectAll" @select="handleSelectionChange" @sort-change="handleSortChange">
+        <el-table v-loading="loading" :data="tableList" :ref="config && config.tableKey ? `tableRef_${config.tableKey}` : `selChangeList`" :key="tableKey" :highlight-current-row="config && config.currentSel || false" @current-change="(val) => handleClick({fnCode: 'currentData'},val)" highlight-selection-row @select-all="handleSelectAll" @select="handleSelectionChange" @sort-change="handleSortChange" :row-class-name="tableRowClassName">
 <!--          :selectable="() => config && config.selectable ? false : true"  -->
            <el-table-column v-if="!(config && config.colHiddenCheck)" fixed="left" type="selection" width="55" :selectable="() => config && config.selectable ? false : true" align="center" />
            <!--      展开列内容        -->
@@ -489,6 +489,12 @@
          }
          this.$emit("fnClick", {fnCode: 'sortTable'}, {sortType: sortType});
        },
+        // 高亮展示列
+        tableRowClassName({row, rowIndex}) {
+          if (row.alarmFlag) {
+            return 'tabColBgc'
+          }
+        },
      }
    }
 </script>
@@ -514,6 +520,24 @@
  ::v-deep .handleContSty .cell{
    white-space: nowrap !important;
  }
+  /* 高亮闪烁 */
+  ::v-deep .tabColBgc {
+    /*background-color: #fa9550!important;*/
+    animation: flashing 1s infinite ease-in-out;
+  }
+  @keyframes flashing {
+    0%   { background-color: #fa9550; } /* 起始颜色 */
+    50%  { background-color: #fff; }    /* 中间颜色 */
+    100% { background-color: #fa9550; } /* 结束颜色 */
+  }
+  ::v-deep .el-table__body .tabColBgc.hover-row > td.el-table__cell,
+            .el-table__body .tabColBgc.hover-row.current-row > td.el-table__cell,
+            .el-table__body .tabColBgc.hover-row.selection-row > td.el-table__cell,
+            .el-table__body .tabColBgc.hover-row.el-table__row--striped > td.el-table__cell,
+            .el-table__body .tabColBgc.hover-row.el-table__row--striped.current-row > td.el-table__cell,
+            .el-table__body .tabColBgc.hover-row.el-table__row--striped.selection-row > td.el-table__cell {
+    background-color: #ffb98c!important;
+  }
 </style>
 <style>
  .my-custom-tooltip {
@@ -4,7 +4,7 @@
      <el-form ref="noticeRef" :model="form" label-width="100px">
        <el-form-item :label="this.resourceType === 1 ? 'ClientID' : '交换机名称'" prop="clientId">
          <!--  allow-create default-first-option： 搜索下拉框中没有的数据并展示查询 -->
-          <el-select v-model="form.clientId" multiple filterable :placeholder="this.resourceType === 1 ? '请选择ClientID' : '请选择交换机名称'" @change="handleChange">
+          <el-select ref="select" v-model="form.clientId" multiple filterable :placeholder="this.resourceType === 1 ? '请选择ClientID' : '请选择交换机名称'" popper-class="my-custom-select-dropdown" @change="handleChange">
            <el-option
              v-for="item in selectChangeList"
              :key="item.value"
@@ -127,11 +127,118 @@
          }
        ],
        lineDataParams: {chart: {}},
+        observer: '',
      }
    },
    created() {},
-    mounted() {},
+    mounted() {
+      const tagContainer = this.$refs.select.$el.querySelector('.el-select__tags > span');
+      // 确保容器有相对定位，方便计数标签定位
+      tagContainer.style.position = 'relative';
+      this.observer = new MutationObserver(() => {
+        this.calculateVisibleTags(tagContainer);
+      });
+      this.observer.observe(tagContainer, { childList: true });
+      // 初始计算一次
+      this.$nextTick(() => {
+        this.calculateVisibleTags(tagContainer);
+      });
+    },
+    beforeDestroy() {
+      if (this.observer) {
+        this.observer.disconnect();
+      }
+    },
    methods: {
+      calculateVisibleTags(tagContainer) {
+        // 断开观察器避免循环
+        this.observer.disconnect();
+        this.$nextTick(() => {
+          const container = tagContainer.parentNode;
+          const allTags = Array.from(tagContainer.children).filter(tag =>
+            !tag.classList.contains('count-node')
+          );
+          // 更精确的容器宽度计算（减去内边距和边框）
+          const containerStyle = window.getComputedStyle(container);
+          const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;
+          const paddingRight = parseFloat(containerStyle.paddingRight) || 0;
+          const borderLeft = parseFloat(containerStyle.borderLeftWidth) || 0;
+          const borderRight = parseFloat(containerStyle.borderRightWidth) || 0;
+          const availableWidth = container.offsetWidth - paddingLeft - paddingRight - borderLeft - borderRight - 10; // 预留10px余量
+          let totalWidth = 0;
+          let visibleCount = 0;
+          let lastVisibleIndex = -1;
+          // 第一轮：计算可以显示多少个标签
+          for (let i = 0; i < allTags.length; i++) {
+            const tag = allTags[i];
+            tag.style.display = 'inline-block';
+            // 更精确的标签宽度计算（包括margin、border、padding）
+            const tagStyle = window.getComputedStyle(tag);
+            const tagWidth = tag.offsetWidth +
+              parseFloat(tagStyle.marginLeft || 0) +
+              parseFloat(tagStyle.marginRight || 0);
+            if (totalWidth + tagWidth <= availableWidth) {
+              totalWidth += tagWidth;
+              lastVisibleIndex = i;
+              visibleCount++;
+            } else {
+              break;
+            }
+          }
+          // 第二轮：应用显示/隐藏
+          for (let i = 0; i < allTags.length; i++) {
+            if (i <= lastVisibleIndex) {
+              allTags[i].style.display = 'inline-block';
+              allTags[i].style.visibility = 'visible';
+            } else {
+              allTags[i].style.display = 'none';
+              allTags[i].style.visibility = 'hidden';
+            }
+          }
+          // 处理计数标签
+          this.updateCountTag(tagContainer, allTags.length, visibleCount, totalWidth, availableWidth);
+          // 重新连接观察器
+          this.$nextTick(() => {
+            this.observer.observe(tagContainer, { childList: true });
+          });
+        });
+      },
+
+      updateCountTag(tagContainer, totalCount, visibleCount, usedWidth, availableWidth) {
+        // 移除已有的计数标签
+        let existingCountTag = tagContainer.querySelector('.count-node');
+        if (existingCountTag) {
+          existingCountTag.remove();
+        }
+        // 如果有隐藏的标签，添加计数标签
+        if (totalCount > visibleCount && visibleCount > 0) {
+          const countTag = document.createElement('span');
+          countTag.className = 'count-node';
+          countTag.textContent = `+${totalCount - visibleCount}`;
+          // 先添加到DOM中获取实际宽度
+          tagContainer.appendChild(countTag);
+          const countTagWidth = countTag.offsetWidth + 10; // 加上margin
+          // 检查是否有足够空间显示计数标签
+          if (usedWidth + countTagWidth > availableWidth && visibleCount > 1) {
+            // 空间不足，需要隐藏最后一个标签来为计数标签腾出空间
+            const lastVisibleTag = tagContainer.children[visibleCount - 1];
+            if (lastVisibleTag && !lastVisibleTag.classList.contains('count-node')) {
+              lastVisibleTag.style.display = 'none';
+              lastVisibleTag.style.visibility = 'hidden';
+              visibleCount--;
+            }
+          }
+          // 更新计数标签文本
+          countTag.textContent = `+${totalCount - visibleCount}`;
+        } else if (totalCount > visibleCount && visibleCount === 0) {
+          // 没有可见标签，但需要显示计数标签的特殊情况
+          const countTag = document.createElement('span');
+          countTag.className = 'count-node';
+          countTag.textContent = `+${totalCount}`;
+          countTag.style.display = 'inline-block';
+          tagContainer.appendChild(countTag);
+        }
+      },
      initData(){
        this.storageKey = this.$route.query && this.$route.query['storageKey'];
        if (this.storageKey) {
@@ -536,4 +643,12 @@
    width: 0px!important;
    height: 0px!important;
  }
+  /* 设置下拉多选不闪烁问题 */
+  ::v-deep .el-tag {
+    margin: 1px 1px 1px 4px !important;
+  }
+  ::v-deep .el-select .el-input__inner {
+    min-height: 36px;
+    height: 100% !important; /* 强制高度为100% */
+  }
 </style>
@@ -1,72 +1,75 @@
 <template>
-  <div class="app-container home w100" style="height: calc(100vh - 85px);color: #000;overflow: scroll;">
-    <!--    header -->
-    <div class="w100" style="height: 17%;min-height: 110px;">
-      <div v-for="(item,index) of headerList" class="h100 disInlineBlock" :style="`margin-right:${index + 1 === headerList.length ? 'none' : '1.3%'}`"
-           style="width: 24%;padding: 10px 15px;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: bottom;">
-        <div style="font-size: 14px;">{{item.title}}</div>
-        <div style="margin: 15px 0 10px;">
-          <div class="disInlineBlock w50"><span style="font-size: 1.5rem;">{{item.num}}</span><span style="display: inline-block;margin-left: 5px">{{item.unit}}</span></div>
-          <img v-if="item && item.type === 'switch'" src="@/assets/images/switch.png" class="fr" width="100" height="35px" alt="">
-          <img v-else src="@/assets/images/line.png" class="fr" width="100"  alt="">
-        </div>
-        <div style="font-size: 10px;">{{item.lastVal}} <span>{{item.lastNum}}</span></div>
-      </div>
-    </div>
-    <!--  middle  -->
-    <div class="w100" style="height: 35%;margin: 1% 0;">
-      <div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">
-        <EchartsPie :dataList="dataList[0]" class="w100 h100"></EchartsPie>
-      </div>
-      <div class="disInlineBlock h100" style="width: 49.4%;border: 1px solid #d8dce6;border-radius: 10px;margin: 0 1.3%;">
-        <EchartsBar :barData="lineDataParams" :title="`当日业务的在线设备数量统计TOP`+ lineDataParams.data.length" class="w100 h100"></EchartsBar>
-      </div>
-      <div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">
-        <EchartsPie :dataList="dataList[1]" class="w100 h100"></EchartsPie>
-      </div>
-    </div>
-    <!--  footer  -->
-    <div class="w100" style="height: 44%;margin: 1% 0 0;">
-      <div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;margin-right: 1%;vertical-align: middle;">
-        <div style="font-size: 14px;height: 7%">
-          <span>服务器带宽收益</span>
-          <span @click="routerLine(1)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
-        </div>
-        <div style="height: 93%;overflow: scroll;" class="newSty w100">
-          <TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="serverColumns" :queryParams="serQueryParams" :tableList="serTableList" @fnRenderList="serverTableList"></TableList>
-        </div>
-      </div>
-      <div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: middle;">
-        <div style="font-size: 14px;height: 7%">
-          <span>资源监控</span>
-          <span @click="routerLine(2)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
-        </div>
-        <div style="height: 93%;overflow: scroll;" class="newSty w100">
-          <TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="resMonitorColumns" :queryParams="resQueryParams" :tableList="resTableList" @fnRenderList="resMonitorTableList"></TableList>
-        </div>
-      </div>
-    </div>
-<!--    <div v-if="echartList && echartList.length > 0" class="w100" style="height: 30%;margin: 1% 0 0">-->
-<!--      &lt;!&ndash; 拖拽容器 &ndash;&gt;-->
-<!--      <draggable-->
-<!--        class="w100 h100"-->
-<!--        v-model="echartList"-->
-<!--        :animation="150"-->
-<!--        :handle="'.el-collapse-item__header'"-->
-<!--        :ghost-class="'ghost-item'"-->
-<!--        :chosen-class="'chosen-item'"-->
-<!--        @start="onDragStart"-->
-<!--        @end="onDragEnd">-->
-<!--        <template v-for="(val,index) of echartList">-->
-<!--          <el-collapse v-model="activeNames" class="w100 h100">-->
-<!--            <el-collapse-item :title="val.title" name="1"  class="w100 h100">-->
-<!--              <EchartsLine class="w100 h100" :sideIcon="{iconName: [{name: '从首页删除',type: 'del'}]}" :lineData="val.dataVal" :chartData="(valData) => chartDataEvent(valData, val)"></EchartsLine>-->
-<!--            </el-collapse-item>-->
-<!--          </el-collapse>-->
-<!--        </template>-->
-<!--      </draggable>-->
-<!--    </div>-->
+  <div style="height: calc(100vh);color: #000;overflow: scroll;padding: 0;">
+    <iframe id="myIframe" src="http://172.16.15.52/grafana" frameborder="0" style="width: 100%;height: 100%;" @load="onIframeLoad"></iframe>
  </div>
+<!--  <div class="app-container home w100" style="height: calc(100vh - 85px);color: #000;overflow: scroll;">-->
+<!--    &lt;!&ndash;    header &ndash;&gt;-->
+<!--    <div class="w100" style="height: 17%;min-height: 110px;">如果20岁的康子晴考到了北京上大学，当时的我48岁，他45岁，我爸妈80岁，老二17岁，我们在北京找个工作，租个三室-->
+<!--      <div v-for="(item,index) of headerList" class="h100 disInlineBlock" :style="`margin-right:${index + 1 === headerList.length ? 'none' : '1.3%'}`"-->
+<!--           style="width: 24%;padding: 10px 15px;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: bottom;">-->
+<!--        <div style="font-size: 14px;">{{item.title}}</div>-->
+<!--        <div style="margin: 15px 0 10px;">-->
+<!--          <div class="disInlineBlock w50"><span style="font-size: 1.5rem;">{{item.num}}</span><span style="display: inline-block;margin-left: 5px">{{item.unit}}</span></div>-->
+<!--          <img v-if="item && item.type === 'switch'" src="@/assets/images/switch.png" class="fr" width="100" height="35px" alt="">-->
+<!--          <img v-else src="@/assets/images/line.png" class="fr" width="100"  alt="">-->
+<!--        </div>-->
+<!--        <div style="font-size: 10px;">{{item.lastVal}} <span>{{item.lastNum}}</span></div>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--    &lt;!&ndash;  middle  &ndash;&gt;-->
+<!--    <div class="w100" style="height: 35%;margin: 1% 0;">-->
+<!--      <div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">-->
+<!--        <EchartsPie :dataList="dataList[0]" class="w100 h100"></EchartsPie>-->
+<!--      </div>-->
+<!--      <div class="disInlineBlock h100" style="width: 49.4%;border: 1px solid #d8dce6;border-radius: 10px;margin: 0 1.3%;">-->
+<!--        <EchartsBar :barData="lineDataParams" :title="`当日业务的在线设备数量统计TOP`+ lineDataParams.data.length" class="w100 h100"></EchartsBar>-->
+<!--      </div>-->
+<!--      <div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">-->
+<!--        <EchartsPie :dataList="dataList[1]" class="w100 h100"></EchartsPie>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--    &lt;!&ndash;  footer  &ndash;&gt;-->
+<!--    <div class="w100" style="height: 44%;margin: 1% 0 0;">-->
+<!--      <div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;margin-right: 1%;vertical-align: middle;">-->
+<!--        <div style="font-size: 14px;height: 7%">-->
+<!--          <span>服务器带宽收益</span>-->
+<!--          <span @click="routerLine(1)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>-->
+<!--        </div>-->
+<!--        <div style="height: 93%;overflow: scroll;" class="newSty w100">-->
+<!--          <TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="serverColumns" :queryParams="serQueryParams" :tableList="serTableList" @fnRenderList="serverTableList"></TableList>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: middle;">-->
+<!--        <div style="font-size: 14px;height: 7%">-->
+<!--          <span>资源监控</span>-->
+<!--          <span @click="routerLine(2)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>-->
+<!--        </div>-->
+<!--        <div style="height: 93%;overflow: scroll;" class="newSty w100">-->
+<!--          <TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="resMonitorColumns" :queryParams="resQueryParams" :tableList="resTableList" @fnRenderList="resMonitorTableList"></TableList>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--&lt;!&ndash;    <div v-if="echartList && echartList.length > 0" class="w100" style="height: 30%;margin: 1% 0 0">&ndash;&gt;-->
+<!--&lt;!&ndash;      &lt;!&ndash; 拖拽容器 &ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;      <draggable&ndash;&gt;-->
+<!--&lt;!&ndash;        class="w100 h100"&ndash;&gt;-->
+<!--&lt;!&ndash;        v-model="echartList"&ndash;&gt;-->
+<!--&lt;!&ndash;        :animation="150"&ndash;&gt;-->
+<!--&lt;!&ndash;        :handle="'.el-collapse-item__header'"&ndash;&gt;-->
+<!--&lt;!&ndash;        :ghost-class="'ghost-item'"&ndash;&gt;-->
+<!--&lt;!&ndash;        :chosen-class="'chosen-item'"&ndash;&gt;-->
+<!--&lt;!&ndash;        @start="onDragStart"&ndash;&gt;-->
+<!--&lt;!&ndash;        @end="onDragEnd">&ndash;&gt;-->
+<!--&lt;!&ndash;        <template v-for="(val,index) of echartList">&ndash;&gt;-->
+<!--&lt;!&ndash;          <el-collapse v-model="activeNames" class="w100 h100">&ndash;&gt;-->
+<!--&lt;!&ndash;            <el-collapse-item :title="val.title" name="1"  class="w100 h100">&ndash;&gt;-->
+<!--&lt;!&ndash;              <EchartsLine class="w100 h100" :sideIcon="{iconName: [{name: '从首页删除',type: 'del'}]}" :lineData="val.dataVal" :chartData="(valData) => chartDataEvent(valData, val)"></EchartsLine>&ndash;&gt;-->
+<!--&lt;!&ndash;            </el-collapse-item>&ndash;&gt;-->
+<!--&lt;!&ndash;          </el-collapse>&ndash;&gt;-->
+<!--&lt;!&ndash;        </template>&ndash;&gt;-->
+<!--&lt;!&ndash;      </draggable>&ndash;&gt;-->
+<!--&lt;!&ndash;    </div>&ndash;&gt;-->
+<!--  </div>-->
 </template>

 <script>
@@ -188,16 +191,62 @@ export default {
    }
  },
  created() {
-    this.serverTableList();
-    this.resMonitorTableList();
-    this.getCountBusiness();
-    this.getSumTrafficByServer();
-    this.getSumTrafficBySwitch();
-    this.getCountSwitchNum();
-    this.getServerOnlineRate();
-    this.getCountDeviceNumTop5();
+    const iframe = document.createElement('iframe');
+    iframe.srcdoc = `<!DOCTYPE html><html><body><p>Hello</p></body></html>`;
+    document.body.appendChild(iframe); // 必须插入
+    // this.serverTableList();
+    // this.resMonitorTableList();
+    // this.getCountBusiness();
+    // this.getSumTrafficByServer();
+    // this.getSumTrafficBySwitch();
+    // this.getCountSwitchNum();
+    // this.getServerOnlineRate();
+    // this.getCountDeviceNumTop5();
+  },
+  mounted() {
+    // 隐藏项目自己的头部导航
+    const headNavSty = document.getElementsByClassName('headNavTopSty');
+    if (headNavSty) {
+      headNavSty[0].style.display = 'none';
+    }
  },
  methods: {
+    onIframeLoad() {
+      const iframe = document.getElementById('myIframe');
+      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+      // const targetElement = iframeDoc.querySelector('.css-119uihn');
+      // targetElement.style.display = 'none';
+
+      const style = iframeDoc.createElement('style');
+      style.textContent = `
+          .css-cplb2m {
+            display: none!important;
+          }
+          // 隐藏侧边菜单后，头部导航向左移动
+          .css-1ef5w88 {
+            left: 0!important;
+          }
+          // 头部导航
+          .css-119uihn {
+            display: none!important;
+          }
+          .css-1nnt5aa {
+            display: none!important;
+          }
+          .css-1v5vjvd {
+            padding-top: 40px!important;
+          }
+          .css-7g0550 {
+            top: 40px!important;
+          }
+          .css-1jmwar8-page-container {
+            padding-left: 0!important;
+          }
+       `;
+      iframeDoc.head.appendChild(style);
+    },
+
+
    getCountBusiness(){
      countBusiness().then(res => {
        this.headerList[0].num = res && res.data;
@@ -143,6 +143,8 @@
              agentVersion: {label: 'agent版本', span: 12, type: 'input'},
              machineCode: {label: '金山machineCode', span: 12, type: 'input'},
              remark: {label: '标签', span: 12, type: 'dynamicTags'},
+              cpuUtil:{ label: `CPU使用率`,span: 12, type: 'input'},
+              memUtil:{ label: `内存使用率`,span: 12, type: 'input'},
            }
          }];
        } else {
@@ -89,7 +89,7 @@
        </el-form>

        <!-- 表格数据 -->
-      <TableList ref="tabRef" :columns="columns" :config="config" :modelIdent="this.$options.name" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
+      <TableList ref="tabRef" :columns="columns" :config="config" :modelIdent="this.$options.name" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getHightLight" @value-change="handleValueChange">
        <template #tempCopy="{ row, column}">
          {{row.clientId}}<el-link :underline="false" icon="el-icon-document-copy" title="复制" v-clipboard:copy="row.clientId" v-clipboard:success="clipboardSuccess" style="margin-left: 10px;color: #409EFF;"></el-link>
        </template>
@@ -189,7 +189,7 @@

 <script setup name="Register">
    import Form from '@/components/form/index.vue';
-    import {listHandle, networkList, getScriptResultBySn, getLogicalNode, addRemark, updateRemark, repBandwidthSubmit, bindBusPublic, virNetInterfaceChild} from '@/api/disRevenue/resource';
+    import {listHandle, networkList, getScriptResultBySn, getLogicalNode, addRemark, updateRemark, repBandwidthSubmit, bindBusPublic, virNetInterfaceChild, getAlarmFlag} from '@/api/disRevenue/resource';
    import {listAllBusinessList} from "@/api/disRevenue/earnManage"
    import TableList from '@/components/table/index.vue';
    import MonitorStrategy from '../serverMonitorStrat/monitorStrategy';
@@ -271,6 +271,8 @@
            onboardTime:{ label: `上机时间`,minWidth: '160'},
            agentVersion:{ label: `agent版本`,minWidth: '90'},
            machineCode:{ label: `金山machineCode`,minWidth: '160'},
+            cpuUtil:{ label: `CPU使用率`,minWidth: '160'},
+            memUtil:{ label: `内存使用率`,minWidth: '160'},
          },
          config: {
            tableButton: {
@@ -343,10 +345,11 @@
          tagRuleForm: {},
          mtrChartOpen: false,
          virNetInterList: {},
+          alarmFlagHight: false,
        }
      },
      created() {
-        this.getList();
+        this.getHightLight();
        this.fnBusNameList();
        this.fnLogicalNode();
      },
@@ -376,12 +379,29 @@
          this.showSearch = newValue;
          // console.log('父组件拿到新值:', newValue);
        },
+        // 高亮数据查询
+        getHightLight() {
+          getAlarmFlag().then(res => {
+            if (res && res.data) {
+              this.alarmFlagHight = true;
+            } else {
+              this.alarmFlagHight = false;
+            }
+            this.getList();
+          }).catch(() => {
+            this.alarmFlagHight = false;
+            this.getList();
+          });
+        },
        /** 查询角色列表 */
        getList() {
          let params = JSON.parse(JSON.stringify(this.queryParams));
          if (params && !params.queryParam) {
            params.queryParam = null;
          }
+          if (this.alarmFlagHight && !params.bandwidthResultSort) {
+            params = Object.assign({}, params, {bandwidthResultSort: 4});
+          }
          this.$modal.loading();
          listHandle(this.addDateRange(params)).then(response => {
            this.roleList = response.rows;
@@ -396,7 +416,7 @@
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1
-          this.getList()
+          this.getHightLight();
        },

        /** 重置按钮操作 */
@@ -434,7 +454,7 @@
          this.loading = true;
          repBandwidthSubmit(rowData).then(response => {
            this.$set(rowData, 'editStatus', false);
-            this.getList();
+            this.getHightLight();
            this.$modal.msgSuccess(response.msg);
            this.loading = false;
          }).catch(() => {
@@ -677,8 +697,12 @@
                break;
              case 'sortTable':
                if (rowData && rowData.sortType) {
-                  this.queryParams['bandwidthResultSort'] = rowData.sortType;
-                  this.getList();
+                  let paramsNum = rowData.sortType;
+                  if (rowData.sortType === 3) {
+                    paramsNum = null;
+                  }
+                  this.queryParams['bandwidthResultSort'] = paramsNum;
+                  this.getHightLight();
                }
                break;
              case 'cancel':
@@ -754,7 +778,7 @@
          bindBusPublic({id: this.pubilcNetRuleForm.id, clientId: this.pubilcNetRuleForm.clientId, bindNetworkMsg: params}).then(res => {
            this.$modal.msgSuccess(res.msg);
            this.pubilcNetOpen = false;
-            this.getList();
+            this.getHightLight();
          });
        },
        // 添加标签
@@ -771,7 +795,7 @@
            this.tagOpen = false;
            this.tagRuleForm = {};
            this.$refs.tabRef.defaultSelectRows([]);
-            this.getList();
+            this.getHightLight();
          });
        },
      }
@@ -595,6 +595,7 @@
            res && res.forEach(async(item,index) => {
              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
              oneData.title = item && item.interfaceName;
+              oneData.businessFlag = item.businessFlag;
              oneData.serverIp = item && item.serverIp;
              tabNameList[item.interfaceName] = oneData;
              this.$set(this.secondChartList, item.interfaceName, oneData);
@@ -609,21 +610,30 @@
      // 基本信息
      getNetDetailsData(times, titleName) {
        this.eventDataMap[titleName] = true;
+        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
        netDetails({clientId: this.paramsData.clientId, name: titleName}).then(async res => {
          this.secondChartList[titleName].formModel = res && res.data || [];
          if (await this.getNetEcharts(times, titleName)) {
-            if (await this.getNetIPv4Echarts(times, titleName)) {
-              if (await this.getNetIPv6Echarts(times, titleName)) {
-                this.getNetDropped(times ,titleName);
+            if (mountCollect.businessFlag) {
+              if (await this.getNetIPv4Echarts(times, titleName)) {
+                if (await this.getNetIPv6Echarts(times, titleName)) {
+                  this.getNetDropped(times ,titleName);
+                }
              }
+            } else {
+              this.getNetDropped(times ,titleName);
            }
          }
        }).catch(async () => {
          if (await this.getNetEcharts(times, titleName)) {
-            if (await this.getNetIPv4Echarts(times, titleName)) {
-              if (await this.getNetIPv6Echarts(times, titleName)) {
-                this.getNetDropped(times ,titleName);
+            if (mountCollect.businessFlag) {
+              if (await this.getNetIPv4Echarts(times, titleName)) {
+                if (await this.getNetIPv6Echarts(times, titleName)) {
+                  this.getNetDropped(times ,titleName);
+                }
              }
+            } else {
+              this.getNetDropped(times ,titleName);
            }
          }
        });
@@ -766,6 +776,10 @@
      // 丢包数
      getNetDropped(times, titleName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
+        let indexNum = 1;
+        if (mountCollect.businessFlag) {
+          indexNum = 3;
+        }
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
@@ -783,7 +797,7 @@
              name: content.echartFors[3].twoName,
              data: res.data && res.data.yData['inDroppedData'] || []
            };
-            mountCollect['echartList'][3] = netEcharts;
+            mountCollect['echartList'][indexNum] = netEcharts;
            this.$set(this.secondChartList, titleName, mountCollect);
          }
          this.$modal.closeLoading();