图形监控添加IPv4和IPv6的流量图、服务器管理列表和表单添加新字段、列表字段直接修改功能

1、服务器管理列表和表单添加新字段、列表字段直接修改功能
2、服务器管理列表添加默认选中且不可修改字段、列表增加排序功能
3、图形监控添加IPv4和IPv6的流量图
4、交换机管理和服务器管理列表设置不刷新缓存

src/components/RightToolbar/index.vue

@@ -19,7 +19,7 @@
             <div class="check-line"></div>
             <template v-for="(item, key) in columns">
               <el-dropdown-item :key="key">
-                <el-checkbox v-model="item.visible" @change="checkboxChange($event, key)" :label="item.label" />
+                <el-checkbox v-model="item.visible" @change="checkboxChange($event, key)" :disabled="item.disabled" :label="item.label" />
               </el-dropdown-item>
             </template>
           </el-dropdown-menu>
@@ -176,7 +176,10 @@ export default {
         this.columns.forEach((col) => (col.visible = newValue))
       } else {
         Object.keys(newBackup).forEach(col => {
-          newBackup[col].visible = newValue;
+          // 不修改禁用的按钮
+          if (!newBackup[col].disabled) {
+            newBackup[col].visible = newValue;
+          }
           this.$set(this.columns, col, newBackup[col]);
         });
         // Object.values(this.columns).forEach((col) => (col.visible = newValue))
@@ -224,7 +227,7 @@ export default {
           let indexNum = 0;
           if (newData && Object.keys(newData).length > 0) {
             Object.keys(newCol).forEach(keyName => {
-              if (newData[keyName]) {
+              if (newData[keyName] || (newCol[keyName].disabled && newCol[keyName].visible)) {
                 indexNum++;
                 newCol[keyName].visible = true;
               } else {

src/components/echartsList/dateTimeSelect.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="ultabs" :style="{'margin-top': dateShowType && (dateShowType === 'day' ||  dateShowType === 'month') ? '35px' : '10px'}">
+    <div class="ultabs" :style="{'margin-top': dateDataTrans.MarUltabsTop ? dateDataTrans.MarUltabsTop : dateShowType && (dateShowType === 'day' ||  dateShowType === 'month') ? '35px' : '10px'}">
       <div v-if="sideIcon" style="display: inline-block;padding-left: 1px;float: right;">
         <el-dropdown trigger="click">
           <span class="el-dropdown-link">

src/components/table/index.vue

@@ -10,7 +10,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">
+        <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">
 <!--          :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" />
             <!--      展开列内容        -->
@@ -27,7 +27,7 @@
             <template v-for="(column, key, index) of columns">
                 <!--      customTooltip:true 走  自定义tooltip 展示    -->
                 <template v-if="column.customTooltip">
-                  <el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :width="column.width" :min-width="column.minWidth || '100px'" align="left">
+                  <el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :sortable="column.sortable" :render-header="renderHeader" :width="column.width" :min-width="column.minWidth || '100px'" align="left">
                     <template #default="scope">
                       <el-tooltip
                         :disabled="!isCellOverflow(scope.row[key], `cell-${key}-${scope.row.id}`)"
@@ -44,7 +44,7 @@
                 </template>
               <!--        原tooltip展示逻辑     -->
               <template v-else>
-                <el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :width="column.width" :min-width="column.minWidth || '100px'" align="left" :show-overflow-tooltip="true">
+                <el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :sortable="column.sortable" :render-header="renderHeader" :width="column.width" :min-width="column.minWidth || '100px'" align="left" :show-overflow-tooltip="true">
                   <!--  插槽 自定义列表表头数据格式  -->
                   <template #header v-if="column && column.slotHeaderName">
                     <span>{{column.label}}</span>
@@ -419,6 +419,52 @@
           }
           this.tableKey++;
         },
+        // 排序发生变化时
+        handleSortChange({column, prop, order}) {
+          let sortType = 3;
+          if (order === 'ascending') {
+            sortType = 1;
+          } else if (order === 'descending') {
+            sortType = 2;
+          }
+          this.$emit("fnClick", {fnCode: 'sortTable'}, {sortType: sortType});
+        },
+        // 排序图标替换
+        renderHeader(h, { column, $index }) {
+          if (column && column.sortable) {
+            if (column.order === 'ascending') {
+              // 升序图标
+              return (
+                <div style="display: flex; align-items: center;">
+                <span>{column.label}</span>
+                <i class="el-icon-sort-down" style="margin-left: 2px;font-weight: 700;color: #c0c4cc;"></i>
+                <i class="el-icon-sort-up" style="color: #409EFF; margin-left: -8px;font-weight: 700;"></i>
+                </div>
+              );
+            } else if (column.order === 'descending') {
+              // 降序图标
+              return (
+                <div style="display: flex; align-items: center;">
+                <span>{column.label}</span>
+                <i class="el-icon-sort-down" style="color: #409EFF; margin-left: 2px;font-weight: 700;"></i>
+                <i class="el-icon-sort-up" style="margin-left: -8px;font-weight: 700;color: #c0c4cc;"></i>
+                </div>
+              );
+            } else {
+              // 默认状态（无序）
+              return (
+                <div style="display: flex; align-items: center;">
+                <span>{column.label}</span>
+                <i class="el-icon-sort" style="color: #C0C4CC; margin-left: 4px;font-weight: 700;"></i>
+                </div>
+              );
+            }
+          }
+          return h('div', [
+            h('span', column.label), // 标题文本
+            // h('i', { class: iconClass }) // 排序图标
+          ]);
+        },
       }
     }
 </script>
@@ -438,6 +484,9 @@
     white-space: normal; /* 允许自动换行 */
     line-height: 1.6; /* 调整行高，提升可读性 */
   }
+  ::v-deep .caret-wrapper {
+    display: none !important;
+  }
 </style>
 <style>
   .my-custom-tooltip {