优化

src/router/index.ts

@@ -93,12 +93,12 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: 'Index',
         meta: { title: '首页', icon: 'sy', affix: true }
       },
-      {
-        path: '/topicPage',
-        component: () => import('@/views/globalMap/topicPage.vue'),
-        name: 'Index22222',
-        meta: { title: 'topicPage', icon: 'sy', affix: true }
-      }
+      // {
+      //   path: '/topicPage',
+      //   component: () => import('@/views/globalMap/topicPage.vue'),
+      //   name: 'Index22222',
+      //   meta: { title: 'topicPage', icon: 'sy', affix: true }
+      // }
     ]
   },
   {

src/types/components.d.ts

@@ -26,6 +26,8 @@ declare module 'vue' {
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -40,6 +42,7 @@ declare module 'vue' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
@@ -52,13 +55,19 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
@@ -72,8 +81,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/routineCommandMap/RightSection/index.vue

@@ -44,8 +44,8 @@
     <div class="chart-box">
       <Chart :option="chartOption1" style="width: 192px; height: 147px" />
       <div class="data-box2">
-        <div class="table">
-          <div class="tr" style="background: none;margin-top: 0;">
+        <div class="table-container">
+          <div class="table-header">
             <div class="th"></div>
             <div class="th">事件类型</div>
             <div class="th">数量</div>
@@ -269,31 +269,26 @@ onMounted(() => {
     background: url('@/assets/images/routineCommandMap/dataBox2.png') no-repeat;
     background-size: 100% 100%;
     margin-top: 29px;
-    .table {
-      display: block;
+
+    .table-container {
+      display: flex;
+      flex-direction: column;
       height: 107px;
-      overflow-x: hidden;
-      overflow-y: auto;
-      .tr {
+      width: 100%;
+      overflow: hidden;
+
+      .table-header {
         display: flex;
         align-items: center;
         padding-right: 21px;
         width: 352px;
         height: 30px;
-        background: url('@/assets/images/routineCommandMap/eventReport/tr.png') no-repeat;
-        background-size: 100% 100%;
-        margin-top: 8px;
-        .td {
-          &:nth-child(2) {
-            color: #ffffff;
-          }
-          &:nth-child(4) {
-            font-size: 16px;
-            color: #00e8ff;
-            font-family: BEBAS-1;
-          }
-        }
-        .td,
+        background: none;
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        background-color: transparent;
+
         .th {
           font-size: 14px;
           color: #a7ccdf;
@@ -313,38 +308,52 @@ onMounted(() => {
             text-align: right;
           }
         }
-        .td-icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          background-color: #247dff;
-        }
-        .td-icon2 {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          background-color: #00fde7;
-        }
-        .td-text1 {
-          font-size: 16px;
-          color: transparent;
-          background-image: linear-gradient(to bottom, #ffffff 25%, #2b72d6 100%);
-          -webkit-background-clip: text;
-          background-clip: text;
-          display: inline-block;
-          font-family: BEBAS-1;
-        }
-        .td-text2 {
-          font-size: 16px;
-          color: transparent;
-          background-image: linear-gradient(to bottom, #ffffff 25%, #21c8d4 100%);
-          -webkit-background-clip: text;
-          background-clip: text;
-          display: inline-block;
-          font-family: BEBAS-1;
+      }
+
+      .table-content {
+        overflow-y: auto;
+        height: calc(100% - 30px);
+
+        .tr {
+          display: flex;
+          align-items: center;
+          padding-right: 21px;
+          width: 352px;
+          height: 30px;
+          background: url('@/assets/images/routineCommandMap/eventReport/tr.png') no-repeat;
+          background-size: 100% 100%;
+          margin-top: 8px;
+
+          .td {
+            &:nth-child(2) {
+              color: #ffffff;
+            }
+            &:nth-child(4) {
+              font-size: 16px;
+              color: #00e8ff;
+              font-family: BEBAS-1;
+            }
+
+            &:nth-child(1) {
+              width: 30px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+            &:nth-child(2) {
+              flex: 1;
+              text-align: left;
+            }
+            &:nth-child(3),
+            &:nth-child(4) {
+              width: 72px;
+              text-align: right;
+            }
+          }
         }
       }
     }
   }
+
 }
 </style>