曲线图表页重构

src/api/device/index.ts

@@ -68,6 +68,24 @@ export function getDevices(params: number): AxiosPromise<[]> {
     method: 'get'
   });
 }
+/**
+ * 获取图表详情设备筛选项
+ */
+export function getAllDevices(): AxiosPromise<[]> {
+  return request({
+    url: '/dc/dcDeviceEcharts/getAllDevices',
+    method: 'get'
+  });
+}
+/**
+ * 获取图表详情参数集
+ */
+export function getClass(): AxiosPromise<[]> {
+  return request({
+    url: '/dc/dcDeviceEcharts/getParamSet',
+    method: 'get'
+  });
+}
 /**
  * 获取图表详情参数筛选项
  */

src/api/device/types.ts

@@ -63,17 +63,24 @@ export interface partitionVo {
   updateBy: null;
   updateTime: null;
 }
+export interface classVo {
+  list: parameterVo;
+  paramSetName: string;
+  setId: string;
+}
 export interface parameterVo {
-  classType: string;
-  createTime: null;
-  deleteTime: null;
-  id: number;
-  note: null;
   paramClassCode: string;
   paramClassName: string;
-  paramUnit: string;
-  updateTime: null;
-  version: null;
+  // classType: string;
+  // createTime: null;
+  // deleteTime: null;
+  // id: number;
+  // note: null;
+  // paramClassCode: string;
+  // paramClassName: string;
+  // paramUnit: string;
+  // updateTime: null;
+  // version: null;
 }
 export interface seriesVo {
   index: number;
@@ -85,3 +92,10 @@ export interface seriesVo {
   unit: string;
   data: Array<string | number>;
 }
+export interface mainInfoVo {
+  name: string;
+  paramUnit: string;
+  index: number;
+  average: number;
+  data: [];
+}

src/assets/fonts/font.css

@@ -10,3 +10,11 @@
   font-family: 'AlibabaPuHuiTiBold';
   src: url('AlibabaPuHuiTiBold.ttf') format('truetype');
 }
+@font-face {
+  font-family: 'LixukeXingshu';
+  src: url('LixukeXingshu.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'PangMenZhengDaoBiao';
+  src: url('PangMenZhengDaoBiao.ttf') format('truetype');
+}

src/types/auto-imports.d.ts

@@ -2,6 +2,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElForm: typeof import('element-plus/es')['ElForm']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const ElNotification: typeof import('element-plus/es')['ElNotification']
@@ -272,6 +273,7 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
     readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
     readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>

src/types/components.d.ts

@@ -22,11 +22,10 @@ declare module '@vue/runtime-core' {
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
@@ -36,6 +35,7 @@ declare module '@vue/runtime-core' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     Hamburger: typeof import('./../components/Hamburger/index.vue')['default']

src/views/details/index.scss

@@ -1,3 +1,4 @@
+@import url('@/assets/fonts/font.css');
 .details {
   padding: 1.5rem 1.5rem 0 1.5rem;
   .header {
@@ -5,14 +6,27 @@
   }
   .search {
     margin-bottom: 1.5rem;
+    :deep(.el-card__header) {
+      padding: 10px;
+    }
     :deep(.el-card__body) {
       padding: 20px 20px 0 20px;
     }
     .cardHeader {
       display: flex;
-      justify-content: space-between;
+      justify-content: center;
       align-items: center;
+      line-height: 25px;
+      position: relative;
+      span {
+        font-size: 24px;
+        font-family: 'PangMenZhengDaoBiao';
+        color: var(--el-menu-active-color);
+      }
       .tooltips {
+        position: absolute;
+        top: -5px;
+        right: 10px;
         width: 36px;
         height: 36px;
         border-radius: 0px 0px 0px 0px;
@@ -22,6 +36,9 @@
     .searchForm {
       .item {
         margin-bottom: 20px;
+        .searchCheckbox {
+          margin-right: 30px;
+        }
       }
       .formBtn {
         padding: 0 20px;
@@ -31,34 +48,119 @@
   .echart {
     :deep(.el-card__body) {
       display: flex;
+      padding: 1.5rem;
       .sidebar {
-        width: 220px;
+        width: 200px;
         border: 1px solid #e8eaec;
-        margin-right: 1.5rem;
+
+        h3 {
+          height: 25px;
+          line-height: 25px;
+          margin: 15px 0;
+          font-size: 22px;
+          font-family: 'PangMenZhengDaoBiao';
+          color: var(--el-menu-active-color);
+          text-align: center;
+        }
         .deviceMenu {
+          height: calc(100vh - 205px - 7.5rem);
           border-right: none;
+          overflow: auto;
           .el-menu-item {
+            display: block;
+            width: 100%;
             height: 45px;
             line-height: 45px;
+            padding: 0 20px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            .iconfont {
+              margin-right: 6px;
             }
           }
         }
+
+        .paramList {
+          height: calc(100vh - 150px - 7.5rem);
+          padding: 20px 10px;
+          overflow: auto;
+          .item {
+            font-size: 14px;
+            padding: 10px 0;
+            line-height: 30px;
+            border-bottom: 1px dashed #cacaca;
+            .name {
+              display: flex;
+              align-items: center;
+              i {
+                width: 12px;
+                height: 12px;
+                border-radius: 10px;
+                margin-right: 5px;
+              }
+            }
+          }
+        }
+
+        /*滚动条整体部分*/
+        .deviceMenu::-webkit-scrollbar,
+        .paramList::-webkit-scrollbar {
+          width: 5px;
+          height: 8px;
+        }
+
+        /*滚动条的轨道*/
+        .deviceMenu::-webkit-scrollbar-track,
+        .paramList::-webkit-scrollbar-track {
+          background-color: transparent;
+          -webkit-border-radius: 8px;
+          -moz-border-radius: 8px;
+          border-radius: 8px;
+        }
+
+        /*滚动条里面的小方块，能向上向下移动*/
+        .deviceMenu::-webkit-scrollbar-thumb,
+        .paramList::-webkit-scrollbar-thumb {
+          background-color: rgb(147, 147, 153, 0.5);
+          -webkit-border-radius: 8px;
+          -moz-border-radius: 8px;
+          border-radius: 8px;
+        }
+
+        .deviceMenu::-webkit-scrollbar-thumb:hover,
+        .paramList::-webkit-scrollbar-thumb:hover {
+          background-color: #a8a8a8;
+        }
+
+        .deviceMenu:-webkit-scrollbar-thumb:active,
+        .paramList:-webkit-scrollbar-thumb:active {
+          background-color: #787878;
+        }
+
+        /*边角，即两个滚动条的交汇处*/
+        .deviceMenu::-webkit-scrollbar-corner,
+        .paramList::-webkit-scrollbar-corner {
+          background-color: transparent;
+        }
+      }
       .comparisonInfo {
         flex: 1;
+        margin: 0 1.5rem;
         .stackedLine {
           width: 100%;
-          height: 66vh;
+          height: calc(100vh - 150px - 7.5rem);
           font-size: 1.4rem;
           text-align: center;
           color: #606266;
-          line-height: 82vh;
+          line-height: calc(100vh - 150px - 7.5rem);
         }
       }
     }
   }
   .copyright {
-    height: 30px;
-    line-height: 30px;
+    height: 40px;
+    line-height: 40px;
     text-align: center;
     color: #9ca3af;
     font-family: Arial;
@@ -66,3 +168,24 @@
     letter-spacing: 1px;
   }
 }
+/** pc **/
+@media only screen and (min-width: 768px) and (max-width: 1680px) {
+  .details {
+    color: red;
+    .echart {
+      :deep(.el-card__body) {
+        .sidebar {
+          .deviceMenu {
+            height: calc(100vh - 266px - 7.5rem) !important;
+          }
+        }
+        .comparisonInfo {
+          .stackedLine {
+            height: calc(100vh - 211px - 7.5rem);
+            line-height: calc(100vh - 211px - 7.5rem) !important;
+          }
+        }
+      }
+    }
+  }
+}

src/views/monitoring/devicemanage/index.scss

@@ -1,3 +1,4 @@
+@import url('@/assets/fonts/font.css');
 .devicemanage {
   position: relative;
   width: 100%;

vite.config.ts

@@ -46,7 +46,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       proxy: {
         '/dev-api': {
           // target: 'http://172.1.2.132:9010/', //本地接口地址
-          // target: 'http://172.1.2.158:9010/', //本地接口地址
+          // target: 'http://172.1.2.57:9010/', //本地接口地址
           target: 'http://10.10.10.56:9010/', //线上测试接口地址
           changeOrigin: true,
           rewrite: path => path.replace(/^\/dev-api/, '')