feat: 驾驶舱深色版本

src/router/index.js

@@ -17,6 +17,14 @@ const constantRouterMap = [
       title: "智慧总控"
     }
   },
+  {
+    path: '/screen-light',
+    name: 'ScreenLight',
+    component: () => import('@/views/screen/ScreenView.vue'),
+    meta: {
+      title: "智慧总控"
+    }
+  },
   {
     path: '/carbon',
     name: 'carbon',

src/views/screen/ScreenViewBlack/components/ContinueData.vue

@@ -218,7 +218,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .main-container {
   width: 100%;
-  height: 236px;
+  height: 222px;
 
   .echart-card {
     display: flex;

src/views/screen/ScreenViewBlack/components/LayoutCard.vue

@@ -24,9 +24,11 @@ const xx = computed(() => {
 
 <template>
   <section class="layout-card">
-    <div :class="['header', 'header-' + name]" :style="{ width: width }">
-      <div class="header-right">
-        <slot name="headerRight"></slot>
+    <div class="pl-[18px]">
+      <div :class="['header', 'header-' + name]" :style="{ width: width }">
+        <div class="header-right">
+          <slot name="headerRight"></slot>
+        </div>
       </div>
     </div>
     <div class="layout-main">
@@ -41,6 +43,7 @@ const xx = computed(() => {
   .header {
     width: 482px;
     height: 48px;
+    padding-left: 20px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
@@ -73,7 +76,7 @@ const xx = computed(() => {
   }
   
   .layout-main {
-    padding: 18px 12px 12px 12px;
+    padding: 10px 32px 10px 28px;
   }
 }
 </style>

src/views/screen/ScreenViewBlack/components/WaterQuality.vue

@@ -59,7 +59,7 @@ const createEchart = ({ xAxisData, seriesData, chart, title }) => {
       bottom: "14%",
       top: "26%",
       left: '10%',
-      right: "2%",
+      right: "6%",
       // containLabel: true,
     },
     tooltip: {
@@ -263,19 +263,18 @@ onUnmounted(() => {
   .count-card {
     width: 100%;
     height: 62px;
-    padding: 4px;
-    
     background-size: 100% 100%;
 
     .count-num_inner {
       width: 100%;
       height: 100%;
-      padding: 6px 6px;
+      padding: 6px 6px 6px 10px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       border-radius: 8px;
       background: url('@/assets/images/screenViewBlack/bg-qualty-item.png') center center no-repeat;
+      backdrop-filter: blur(4px);
       background-size: 100% 100%;
 
       .title {
@@ -283,8 +282,8 @@ onUnmounted(() => {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 48px;
-        height: 100%;
+        width: 42px;
+        height: 42px;
         text-align: center;
         font-size: 12px;
         letter-spacing: 0.12px;
@@ -324,8 +323,8 @@ onUnmounted(() => {
           }
 
           &:hover {
-            border-radius: 2px;
-            background: rgba(0, 0, 0, 0.8);
+            border-radius: 4px;
+            background: rgba(0, 0, 0, 0.4);
           }
         }
       }
@@ -383,7 +382,15 @@ onUnmounted(() => {
     }
 
     .echart-inner {
-      height: 160px;
+      height: 140px;
+    }
+  }
+}
+
+@media (min-height: 1070px) {
+  .echart-card {
+    .echart-inner {
+      height: 160px !important;
     }
   }
 }

src/views/screen/ScreenViewBlack/components/WaterYield.vue

@@ -213,7 +213,6 @@ onUnmounted(() => {
     width: 100%;
     height: 62px;
     padding: 4px;
-    background: yellow;
     background: url('@/assets/images/screenViewBlack/bg-title-first.png') center center no-repeat;
     background-size: 100% 100%;
 
@@ -224,7 +223,6 @@ onUnmounted(() => {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      
 
       .count-title {
         color: #FFF;
@@ -321,8 +319,7 @@ onUnmounted(() => {
       }
     }
     .echart-inner {
-      height: 130px;
-      // flex: 1;
+      height: 116px;
     }
   }
 }

src/views/screen/ScreenViewBlack/components/dataBox.vue

@@ -35,6 +35,7 @@ defineProps({
 }
 .data-box {
   &-main {
+    height: 210px;
     padding: 18px 25px 16px 40px;
     display: flex;
     align-items: center;
@@ -85,6 +86,14 @@ defineProps({
     }
   }
 }
+
+@media (min-height: 1070px) {
+  .data-box {
+    .data-box-main {
+      height: 230px !important;
+    }
+  }
+}
 </style>
 
 <style>

src/views/screen/ScreenViewBlack/components/gongyi.vue

@@ -47,10 +47,10 @@ const toGongyi = (item) => {
   width: 50px;
   height: 20px;
 }
+
 .gongyi-wrap {
   padding: 12px;
 
-
   &-list {
     height: 100px;
     overflow-y: auto;
@@ -108,4 +108,13 @@ const toGongyi = (item) => {
     color: #fff;
   }
 }
+
+@media (min-height: 1070px) {
+  .gongyi-wrap {
+    padding: 12px 12px 0 12px;
+    .gongyi-wrap-list {
+      height: 134px;
+    }
+  }
+}
 </style>

src/views/screen/ScreenViewBlack/config/echartOption.js

@@ -70,11 +70,14 @@ export const getBarOptions = (currentData = []) => {
     ],
     series: [
       {
-        name: 'maxdata',
+        name: 'custom',
         type: 'custom',
         itemStyle: {
           color: 'rgba(216, 230, 255, .1)'
         },
+        tooltip: {
+          show: false // 禁用该系列的 tooltip
+      },
         renderItem: function (params, api) {
           //获取对应类目的axisTick中心点坐标
           var start = api.coord([api.value(0)])
@@ -152,7 +155,7 @@ export const getBarOptions = (currentData = []) => {
         type: 'pictorialBar',
         itemStyle: {
           normal: {
-            color: '#FF6737'
+            color: '#fff'
           }
         },
         tooltip: {
@@ -164,7 +167,7 @@ export const getBarOptions = (currentData = []) => {
         symbolClip: false,
         symbolSize: [7, 2],
         symbolPosition: 'end',
-        symbolOffset: [-5, 0],
+        symbolOffset: [-5, -3],
         data: currentData,
         width: 1,
         z: 0,
@@ -176,7 +179,7 @@ export const getBarOptions = (currentData = []) => {
         type: 'pictorialBar',
         itemStyle: {
           normal: {
-            color: '#00AB84'
+            color: '#fff'
           }
         },
         tooltip: {
@@ -188,7 +191,7 @@ export const getBarOptions = (currentData = []) => {
         symbolClip: false,
         symbolSize: [7, 2],
         symbolPosition: 'end',
-        symbolOffset: [5, 0],
+        symbolOffset: [5, -3],
         data: rangeData,
         width: 1,
         z: 0,

src/views/screen/ScreenViewBlack/index.vue

@@ -9,19 +9,18 @@ import ContinueData from "./components/ContinueData";
 import DataBox from "./components/dataBox";
 import GongYi from "./components/gongyi";
 
-
 import { editPassword } from '@/components';
 import TheUserAvatar from '@/components/Layout/TheUserAvatar.vue';
 import { screenApi } from "@/api/screen"
 
 let timer = "";
+let dataTimer = "";
 
+const updateTime = ref();
 const gongyiData = ref([])
 const screenData = ref({});
 const reportData = ref({})
 
-const updateTime = ref();
-
 const currentTime = ref({
   time: '',
   weekday: '',
@@ -41,7 +40,7 @@ const getCurrentWeekDay = () => {
 // 获取大屏分析数据
 const getRealTimeData = () => {
   screenApi.realTimeData().then(res => {
-    screenData.value = res.data
+    screenData.value = res.data;
     updateTime.value = `更新时间：${res.data.testHour}`
   })
 }
@@ -73,15 +72,22 @@ onMounted(() => {
   autofit.init({
     dw: 1920,
     dh: 1080,
-    el:"#screen-view-black",
+    el: "#screen-view-black",
     resize: true,
   })
 
-  timer = setInterval(getCurrentWeekDay , 1 * 1000);
+  timer = setInterval(getCurrentWeekDay, 1 * 1000);
+
+  dataTimer = setInterval(() => {
+    getRealTimeData();
+    getLeastShortReport();
+    getWarningList();
+  }, 60 * 60 * 1000);
 })
 
 onUnmounted(() => {
   clearInterval(timer);
+  clearInterval(dataTimer);
 })
 
 </script>
@@ -104,28 +110,40 @@ onUnmounted(() => {
       </div>
     </header>
     <main class="main">
+      <!-- 导航菜单 -->
       <div class="menu-container">
         <ul class="menu-list justify-end">
-          <li class="item mr-[20px]"><RouterLink to="/"><span>智慧总控</span></RouterLink></li>
-          <li class="item"><RouterLink to="/"><span>专家问答</span></RouterLink></li>
+          <li class="item mr-[20px] active">
+            <RouterLink to="/"><span>智慧总控</span></RouterLink>
+          </li>
+          <li class="item">
+            <RouterLink to="/answer"><span>专家问答</span></RouterLink>
+          </li>
         </ul>
         <ul class="menu-list justify-start">
-          <li class="item mr-[20px]"><RouterLink to="/"><span>智能分析</span></RouterLink></li>
-          <li class="item"><RouterLink to="/"><span>智能助手</span></RouterLink></li>
+          <li class="item mr-[20px]">
+            <RouterLink to="/water-warn"><span>智能分析</span></RouterLink>
+          </li>
+          <li class="item">
+            <RouterLink to="/work"><span>智能助手</span></RouterLink>
+          </li>
         </ul>
       </div>
       <div class="screen-container">
         <div class="factory">
           <img class="w-full h-full" src="@/assets/images/screenViewBlack/img-factory.png" alt="">
+          <img class="coord img-a" src="@/assets/images/screenViewBlack/img-coord-a.png" alt="">
+          <img class="coord img-b" src="@/assets/images/screenViewBlack/img-coord-b.png" alt="">
+          <img class="coord img-c" src="@/assets/images/screenViewBlack/img-coord-c.png" alt="">
         </div>
         <div class="content">
           <div class="left">
             <WaterYield :screenData="screenData"></WaterYield>
-            <WaterQuality :screenData="screenData"></WaterQuality>
+            <WaterQuality :screenData="screenData" class="pt-[20px]"></WaterQuality>
           </div>
           <div class="middle">
             <div class="middle-wrap">
-              <span class="text-[#9E9E9E]">更新时间：05-07 08:00</span>
+              <span class="text-[#9E9E9E] pb-[8px] text-[12px]">{{ updateTime }}</span>
               <RouterLink to="/answer" class="inp-box">
                 <span>输入您的问题或需求</span>
                 <img src="@/assets/images/screenViewBlack/img-start.png" alt="">
@@ -134,7 +152,7 @@ onUnmounted(() => {
           </div>
           <div class="right">
             <ContinueData :screenData="screenData"></ContinueData>
-            <DataBox :reportData="reportData"></DataBox>
+            <DataBox :reportData="reportData" class="pt-[20px]"></DataBox>
             <GongYi :gongyiData="gongyiData"></GongYi>
           </div>
         </div>
@@ -165,15 +183,15 @@ $primary-bg-color: #040d1c;
   align-items: start;
   justify-content: space-between;
   flex-shrink: 0;
-  height: 100px;
+  height: 98px;
   padding: 20px 50px 0 50px;
-  background: palegreen;
   background: url(@/assets/images/screenViewBlack/bg-header.png) center center no-repeat;
   background-size: 100% 100%;
 
   .header-left {
     display: flex;
     align-items: center;
+
     .time {
       width: 160px;
       color: #FFF;
@@ -185,12 +203,14 @@ $primary-bg-color: #040d1c;
       line-height: normal;
       letter-spacing: 4.32px;
     }
+
     .line {
       width: 1px;
       height: 28px;
       margin: 0 20px 0 15px;
       background: rgba(157, 197, 232, 0.36);
     }
+
     .date {
       color: #CDD6E3;
       text-align: center;
@@ -203,6 +223,7 @@ $primary-bg-color: #040d1c;
       li:nth-child(1) {
         color: #CDD6E3;
       }
+
       li:nth-child(2) {
         color: #CDD6E3;
         font-family: D-DIN-PRO-700-Bold;
@@ -223,20 +244,24 @@ $primary-bg-color: #040d1c;
     }
   }
 }
+
 .main {
   flex: 1;
   display: flex;
   flex-flow: column;
-  padding: 0 30px 30px 30px;
+  padding: 0 30px 14px 30px;
+
   .menu-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
+
     .menu-list {
       display: flex;
       align-items: center;
       width: 540px;
       height: 86px;
+
       .item {
         width: 172px;
         height: 46px;
@@ -249,6 +274,7 @@ $primary-bg-color: #040d1c;
         letter-spacing: 1px;
         cursor: pointer;
         transition: all 0.8s;
+
         span {
           transition: all 0.3s;
           background: linear-gradient(182deg, #02A3F8 11.72%, #83D2FB 38.89%, #FFF 98.7%);
@@ -258,37 +284,72 @@ $primary-bg-color: #040d1c;
         }
       }
     }
+
     .menu-list:nth-child(1) {
       .item {
         background: url(@/assets/images/screenViewBlack/bg-left.png) center center no-repeat;
         background-size: 100% 100%;
+
         &:hover {
           background: url(@/assets/images/screenViewBlack/bg-left-active.png) center center no-repeat;
           background-size: 100% 100%;
+
           span {
             background: linear-gradient(182deg, #00FFE4, #FFF 78.7%);
             background-clip: text;
           }
         }
       }
+
+      .active {
+        background: url(@/assets/images/screenViewBlack/bg-left-active.png) center center no-repeat;
+        background-size: 100% 100%;
+
+        span {
+          background: linear-gradient(182deg, #00FFE4, #FFF 78.7%);
+          background-clip: text;
+        }
+      }
     }
+
     .menu-list:nth-child(2) {
       .item {
         background: url(@/assets/images/screenViewBlack/bg-right.png) center center no-repeat;
         background-size: 100% 100%;
+
         &:hover {
           background: url(@/assets/images/screenViewBlack/bg-right-active.png) center center no-repeat;
           background-size: 100% 100%;
+
           span {
             background: linear-gradient(182deg, #00FFE4, #FFF 78.7%);
             background-clip: text;
           }
         }
       }
+
+      .active {
+        background: url(@/assets/images/screenViewBlack/bg-right-active.png) center center no-repeat;
+        background-size: 100% 100%;
+
+        span {
+          background: linear-gradient(182deg, #00FFE4, #FFF 78.7%);
+          background-clip: text;
+        }
+      }
+    }
+  }
+
+  @keyframes jump {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-20px); /* 调整这个值来控制跳跃的高度 */
     }
   }
+
   .screen-container {
-    flex: 1;
     position: relative;
     background: $primary-bg-color;
 
@@ -296,19 +357,47 @@ $primary-bg-color: #040d1c;
       position: absolute;
       top: 50%;
       left: 50%;
-      transform: translate(-50%,-50%);
+      transform: translate(-50%, -50%);
       width: 1408px;
       height: 792px;
+
+      .coord {
+        position: absolute;
+        width: 108px;
+        height: 82px;
+      }
+
+      .img-a {
+        top: 370px;
+        left: 320px;
+        animation: jump 1.5s ease-in-out infinite;
+        animation-delay: 0.2s;
+      }
+      .img-b {
+        top: 280px;
+        left: 650px;
+        animation: jump 1.5s ease-in-out infinite;
+        animation-delay: 0.6s;
+      }
+      .img-c {
+        top: 226px;
+        right: 330px;
+        animation: jump 1.5s ease-in-out infinite;
+        animation-delay: 0.4s;
+      }
     }
 
     .content {
       position: relative;
-      display: flex;;
+      display: flex;
+      ;
       justify-content: space-between;
 
-      .left, .right {
+      .left,
+      .right {
         width: 540px;
       }
+
       .middle {
         flex-shrink: 0;
         flex: 1;
@@ -331,6 +420,7 @@ $primary-bg-color: #040d1c;
             padding: 0 14px;
             background: url(@/assets/images/screenViewBlack/bg-input.png) center center no-repeat;
             background-size: 100% 100%;
+
             span {
               color: rgba(255, 255, 255, 0.80);
               text-shadow: 0px 0px 8px rgba(201, 253, 243, 0.50);
@@ -338,6 +428,7 @@ $primary-bg-color: #040d1c;
               font-weight: 400;
               line-height: 22px;
             }
+
             img {
               width: 56px;
               height: 36px;