背景、文字等颜色微调

.env.production

@@ -5,6 +5,6 @@ VITE_APP_PORT = 8089
 #VITE_APP_WS_API = 'ws://board.heatiot.cn:8001/prod-api' ## websocket地址
 #VITE_APP_BASE_API = 'http://board.heatiot.cn:8001/prod-api/' ## 线上接口
 #VITE_APP_WS_API = 'ws://${window.location.host}/ws' ## websocket地址 ws://10.10.10.56:9000/websocket/
-VITE_APP_BASE_API = '/prod-api/' ## 正式环境
+# VITE_APP_BASE_API = '/prod-api/' ## 正式环境
-# VITE_APP_BASE_API = '/biprod-api/' ## 测试环境
+VITE_APP_BASE_API = '/biprod-api/' ## 测试环境
 

src/assets/iconfont/demo_index.html

@@ -55,15 +55,27 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
-              <span class="icon iconfont">&#xe621;</span>
+              <span class="icon iconfont">&#xe6c5;</span>
-                <div class="name">编辑</div>
+                <div class="name">换热站</div>
-                <div class="code-name">&amp;#xe621;</div>
+                <div class="code-name">&amp;#xe6c5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6be;</span>
+                <div class="name">list</div>
+                <div class="code-name">&amp;#xe6be;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe6e7;</span>
+              <span class="icon iconfont">&#xe83d;</span>
-                <div class="name">箭头</div>
+                <div class="name">more</div>
-                <div class="code-name">&amp;#xe6e7;</div>
+                <div class="code-name">&amp;#xe83d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe621;</span>
+                <div class="name">编辑</div>
+                <div class="code-name">&amp;#xe621;</div>
               </li>
           
             <li class="dib">
@@ -408,9 +420,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1694485516205') format('woff2'),
+  src: url('iconfont.woff2?t=1699254830523') format('woff2'),
-       url('iconfont.woff?t=1694485516205') format('woff'),
+       url('iconfont.woff?t=1699254830523') format('woff'),
-       url('iconfont.ttf?t=1694485516205') format('truetype');
+       url('iconfont.ttf?t=1699254830523') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -437,20 +449,38 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
-            <span class="icon iconfont icon-edit-icon"></span>
+            <span class="icon iconfont icon-station"></span>
             <div class="name">
-              编辑
+              换热站
             </div>
-            <div class="code-name">.icon-edit-icon
+            <div class="code-name">.icon-station
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-list"></span>
+            <div class="name">
+              list
+            </div>
+            <div class="code-name">.icon-list
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-more"></span>
+            <div class="name">
+              more
+            </div>
+            <div class="code-name">.icon-more
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-jiantou"></span>
+            <span class="icon iconfont icon-edit-icon"></span>
             <div class="name">
-              箭头
+              编辑
             </div>
-            <div class="code-name">.icon-jiantou
+            <div class="code-name">.icon-edit-icon
             </div>
           </li>
           
@@ -969,18 +999,34 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-edit-icon"></use>
+                  <use xlink:href="#icon-station"></use>
                 </svg>
-                <div class="name">编辑</div>
+                <div class="name">换热站</div>
-                <div class="code-name">#icon-edit-icon</div>
+                <div class="code-name">#icon-station</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-jiantou"></use>
+                  <use xlink:href="#icon-list"></use>
                 </svg>
-                <div class="name">箭头</div>
+                <div class="name">list</div>
-                <div class="code-name">#icon-jiantou</div>
+                <div class="code-name">#icon-list</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-more"></use>
+                </svg>
+                <div class="name">more</div>
+                <div class="code-name">#icon-more</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-edit-icon"></use>
+                </svg>
+                <div class="name">编辑</div>
+                <div class="code-name">#icon-edit-icon</div>
             </li>
           
             <li class="dib">

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3987011 */
-  src: url('iconfont.woff2?t=1694485516205') format('woff2'),
+  src: url('iconfont.woff2?t=1699254830523') format('woff2'),
-       url('iconfont.woff?t=1694485516205') format('woff'),
+       url('iconfont.woff?t=1699254830523') format('woff'),
-       url('iconfont.ttf?t=1694485516205') format('truetype');
+       url('iconfont.ttf?t=1699254830523') format('truetype');
 }
 
 .iconfont {
@@ -13,12 +13,20 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-edit-icon:before {
+.icon-station:before {
-  content: "\e621";
+  content: "\e6c5";
+}
+
+.icon-list:before {
+  content: "\e6be";
 }
 
-.icon-jiantou:before {
+.icon-more:before {
-  content: "\e6e7";
+  content: "\e83d";
+}
+
+.icon-edit-icon:before {
+  content: "\e621";
 }
 
 .icon-arrow-up:before {

src/assets/iconfont/iconfont.json

@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "18911700",
+      "name": "换热站",
+      "font_class": "station",
+      "unicode": "e6c5",
+      "unicode_decimal": 59077
+    },
+    {
+      "icon_id": "8474293",
+      "name": "list",
+      "font_class": "list",
+      "unicode": "e6be",
+      "unicode_decimal": 59070
+    },
+    {
+      "icon_id": "34453016",
+      "name": "more",
+      "font_class": "more",
+      "unicode": "e83d",
+      "unicode_decimal": 59453
+    },
     {
       "icon_id": "33987167",
       "name": "编辑",
@@ -12,13 +33,6 @@
       "unicode": "e621",
       "unicode_decimal": 58913
     },
-    {
-      "icon_id": "9371505",
-      "name": "箭头",
-      "font_class": "jiantou",
-      "unicode": "e6e7",
-      "unicode_decimal": 59111
-    },
     {
       "icon_id": "34453072",
       "name": "up",

src/types/auto-imports.d.ts

@@ -4,6 +4,8 @@ declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
+  const ElNotification: typeof import('element-plus/es')['ElNotification']
+  const NEllipsis: typeof import('naive-ui')['NEllipsis']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
@@ -272,6 +274,8 @@ declare module 'vue' {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     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']>
+    readonly NEllipsis: UnwrapRef<typeof import('naive-ui')['NEllipsis']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>

src/types/components.d.ts

@@ -22,9 +22,11 @@ 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']
     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']

src/views/details/index.scss

@@ -29,14 +29,30 @@
     }
   }
   .echart {
-    .comparisonInfo {
+    :deep(.el-card__body) {
-      .stackedLine {
+      display: flex;
-        width: 100%;
+      .sidebar {
-        height: 66vh;
+        width: 220px;
-        font-size: 1.4rem;
+        border: 1px solid #e8eaec;
-        text-align: center;
+        margin-right: 1.5rem;
-        color: #606266;
+        .deviceMenu {
-        line-height: 82vh;
+          border-right: none;
+          .el-menu-item {
+            height: 45px;
+            line-height: 45px;
+          }
+        }
+      }
+      .comparisonInfo {
+        flex: 1;
+        .stackedLine {
+          width: 100%;
+          height: 66vh;
+          font-size: 1.4rem;
+          text-align: center;
+          color: #606266;
+          line-height: 82vh;
+        }
       }
     }
   }

src/views/details/index.vue

@@ -98,6 +98,19 @@
       </el-form>
     </el-card>
     <el-card class="echart" shadow="always">
+      <!-- <div class="sidebar">
+        <h3>换热站</h3>
+        <el-menu default-active="1" class="deviceMenu" @select="handleSelect" @open="handleOpen">
+          <el-menu-item index="1">
+            <el-icon><icon-menu /></el-icon>
+            <span>Navigator one</span>
+          </el-menu-item>
+          <el-menu-item index="2">
+            <el-icon><icon-menu /></el-icon>
+            <span>Navigator Two</span>
+          </el-menu-item>
+        </el-menu>
+      </div> -->
       <div class="comparisonInfo">
         <div ref="stackedRef" class="stackedLine">暂无数据</div>
       </div>
@@ -1120,6 +1133,13 @@ onMounted(() => {
   // chart.setOption(options2);
 });
 
+const handleSelect = (key: string, keyPath: string[], item: object) => {
+  console.log(key, keyPath, item);
+};
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath);
+};
+
 function lineClick() {
   //返回上一页
   router.go(-1);

src/views/monitoring/components/header.vue

@@ -342,14 +342,15 @@ function warClose() {
 
   .title {
     width: 80%;
+    height: 70px;
+    line-height: 70px;
     // background: url(@/assets/images/title-bg.png);
     // background-size: 100%;
     text-align: center;
-    padding-bottom: 38px;
+    // padding-bottom: 22px;
     margin: 0 auto;
 
     h3 {
-      height: 57px;
       font-size: 4.2rem;
       font-family: 'YouSheBiaoTiHei';
       font-weight: 400;
@@ -365,10 +366,9 @@ function warClose() {
 
 .weather {
   position: absolute;
-  top: 2.5rem;
+  top: 10px;
   left: 7rem;
-  font-size: 1.8rem;
+  font-size: 1.6rem;
-  line-height: 2.2rem;
   font-family: 'AlibabaPuHuiTiRegular';
   .timeTips {
     display: flex;
@@ -402,7 +402,7 @@ function warClose() {
 
 .seeting {
   position: absolute;
-  top: 2.5rem;
+  top: 20px;
   right: 7rem;
 
   .warningbadge {

src/views/monitoring/components/menu.vue

@@ -226,7 +226,7 @@ function menuUpdateValue(key: string, item: MenuOption) {
         }
 
         .n-menu-item-content--selected::before {
-          background: -webkit-linear-gradient(left, #c9eaff 0%, #f2f3f5 100%);
+          background: -webkit-linear-gradient(left, #91d3fd 0%, #dedede 100%);
           left: 0;
           right: 0;
         }
@@ -237,7 +237,7 @@ function menuUpdateValue(key: string, item: MenuOption) {
           bottom: 0;
           width: 100%;
           height: 2px;
-          background: -webkit-linear-gradient(left, #409eff 0%, #f2f3f5 100%);
+          background: -webkit-linear-gradient(left, #409eff 0%, #dedede 100%);
         }
       }
 

src/views/monitoring/screen/index.scss

@@ -4,7 +4,7 @@
   position: relative;
   width: 100%;
   height: 100vh;
-  background-color: #f2f3f5;
+  background-color: #dedede;
   // background: url(@/assets/images/screen.png) no-repeat;
   // background-color: var(--tableBg);
   // background-size: 100% 100%;
@@ -19,7 +19,7 @@
     position: absolute;
     top: 118px;
     left: 0;
-    color: #b1e3ff;
+    color: #1169c0;
     text-align: center;
     // border: 1px solid #0d55b0;
     // background-color: #02072e;
@@ -49,8 +49,9 @@
     left: 0;
     right: 0;
     width: 70%;
+    height: 45px;
     text-align: center;
-    color: #a2ceff;
+    color: #1169c0;
     // background: url(@/assets/images/panelBtn_bg.png) no-repeat center;
     // background-size: 100% 100%;
     transition: width 0.28s;
@@ -75,10 +76,10 @@
     }
     .copyright {
       width: 100%;
-      height: 25px;
+      // height: 25px;
-      line-height: 25px;
+      // line-height: 25px;
       text-align: center;
-      color: #9ca3af;
+      color: #acaeb1;
       font-family: Arial;
       font-size: 12px;
       letter-spacing: 1px;
@@ -172,9 +173,9 @@
 
     .sidebar {
       width: 12%;
-      height: calc(100vh - 95px - 50px); //屏幕高度-头部header高度-底部高度
+      height: calc(100vh - 70px - 45px); //屏幕高度-头部header高度-底部高度
       flex-shrink: 0;
-      border: 1px solid var(--vxe-table-border-color);
+      border: 1px solid #b7babf;
       padding: 10px 0;
       // box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 12);
       margin-right: 1vw;
@@ -321,7 +322,8 @@
       .mainTable {
         // height: calc(100vh - 8rem - 202px);
         // height: calc(100% - 162px);
-        background-color: #f2f3f5;
+        border: 1px solid #b7babf;
+        background-color: #dedede;
         transition: height 0.28s;
         overflow: hidden;
 
@@ -331,15 +333,15 @@
           // --vxe-table-footer-background-color: none;
           // --vxe-table-border-color: rgba(12, 80, 166, 0.2);
           // --vxe-table-border-color: none;
-          // --vxe-font-color: #5beff9;
+          --vxe-font-color: #000;
           // --vxe-table-header-font-color: #ffffffb3;
-          // border: 1px solid var(--vxe-font-color);
+          // border: 1px solid #b7babf;
           // box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 124);
 
           :deep(.vxe-table) {
             // height: calc(100vh - 5.7rem - 60px) !important;
             .vxe-table--body-wrapper {
-              background-color: #f2f3f5;
+              background-color: #dedede;
               // height: calc(100vh - 5.7rem - 182px) !important;
             }
 
@@ -371,10 +373,10 @@
               font-size: 18px;
               font-weight: 500;
               .tableCellClass {
-                background-color: #f2f3f5;
+                background-color: #dedede;
-                // border-bottom: 1px solid var(--vxe-font-color) !important;
+                border-bottom: 1px solid #b7babf !important;
-                // border-right: 1px solid var(--vxe-font-color) !important;
+                border-right: 1px solid #b7babf !important;
-                // border-right-color: var(--vxe-font-color) !important;
+                border-right-color: #b7babf !important;
                 .vxe-cell {
                   font-family: 'AlibabaPuHuiTiRegular';
                   // color: #b1e3ff;
@@ -473,7 +475,7 @@
           }
         }
         .tablePage {
-          background-color: #f2f3f5;
+          background-color: #dedede;
           // --vxe-pager-background-color: none;
           padding: 0 2rem;
           // color: #b1e3ff;
@@ -554,7 +556,7 @@
               display: flex;
               align-items: center;
               height: -webkit-fill-available;
-              border: 2px solid var(--vxe-table-border-color);
+              border: 2px solid #b7babf;
               border-radius: 5px;
               color: #000;
               // padding: 15px;
@@ -571,7 +573,7 @@
               .numValue {
                 flex: 1;
                 text-align: center;
-                color: #606266;
+                color: #000;
 
                 span {
                   font-size: 5rem;
@@ -595,7 +597,7 @@
                 span {
                   font-size: 1.4rem;
                   line-height: 30px;
-                  color: #606266;
+                  color: #000;
                   margin-right: 3px;
                 }
                 span:nth-child(1) {