样式修改

src/assets/main.less

@@ -44,3 +44,57 @@ a,
     padding: 0 2rem;
   }
 } */
+
+/* 整个滚动条 */
+::-webkit-scrollbar {
+  width: 10px; /* 滚动条宽度 */
+  background-color: transparent !important; /* 滚动条轨道背景色（即“背景色”） */
+}
+/* 滚动条滑块（可拖动的部分） */
+::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 5px;
+}
+/* 滚动条轨道（滑块外的区域） */
+::-webkit-scrollbar-track {
+  background-color: transparent !important; /* 这也是背景的一部分 */
+}
+
+.warnTable {
+        .el-table {
+            .el-table__header-wrapper {
+                .el-table__header {
+                    thead {
+                        color: #fff;
+                        border-bottom: #c0c0c0;
+                        tr {
+                            th {
+                                background: rgb(46, 51, 52);
+                            }
+                        }
+                    }
+                }
+            }
+
+            .el-table__body-wrapper {
+                .el-table__body {
+                    tbody {
+                        .el-table__row {
+                            .el-table__cell {
+                                background: rgb(46, 51, 52);
+                                color: #fff;
+                                border-bottom: #c0c0c0;
+                            }
+                        }
+
+                        .el-table__row--striped {
+                            .el-table__cell {
+                                background: #3c3f44;
+                                border-bottom: #c0c0c0;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }

src/components/windHome/components/barCharts.vue

@@ -118,7 +118,7 @@ export default {
             type: "value",
             name: value,
             nameTextStyle: {
-              color: "#828484",
+              color: "#fff",
               fontSize: 12,
             },
 
@@ -126,7 +126,7 @@ export default {
               formatter: "{value} ",
               fontSize: 12,
               textStyle: {
-                color: "#828484",
+                color: "#fff",
               },
             },
             //分格线
@@ -145,7 +145,7 @@ export default {
               formatter: "{value}",
               fontSize: 12,
               textStyle: {
-                color: "#828484",
+                color: "#fff",
               },
             },
             //分格线
@@ -264,8 +264,8 @@ export default {
         ],
         tooltip: {
           trigger: "axis",
-          backgroundColor: "rgba(5, 187, 76,0.35)",
-          borderColor: "#05bb4c",
+          backgroundColor: "rgba(5, 108, 187,0.35)",
+          borderColor: "#1a93cf",
           formatter: function (params) {
             var htmlStr = `<div style='margin-bottom:5px'>${params[0].axisValue}</div>`;
             for (var i = 0; i < params.length; i++) {
@@ -326,7 +326,7 @@ export default {
               interval: 0,
               fontSize: 12,
               textStyle: {
-                color: "rgb(116,124,128)",
+                color: "#fff",
               },
               hideOverlap: true,
             },

src/components/windHome/components/dash-pie-chart.vue

@@ -48,7 +48,7 @@ export default {
     // 颜色 传入 green yellow等 (partten中支持的颜色)
     color: {
       type: String,
-      default: "green",
+      default: "cyan",
     },
   },
   data() {
@@ -74,14 +74,14 @@ export default {
           subtext: this.title,
           subtextStyle: {
             fontSize: 14,
-            color: "#363b46",
+            color: "#fff",
           },
           x: "45%",
           y: "56%",
           z: 8,
           textAlign: "center",
           textStyle: {
-            color: "#999",
+            color: "#fff",
             fontSize: 12,
             fontWeight: "normal",
           },
@@ -102,15 +102,11 @@ export default {
                     new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                       {
                         offset: 0,
-                        color: this.$store.state.moreSty === 'greenSty'
-                          ? "rgb(33, 187, 76)"
-                          : "rgb(57, 54, 143)",
+                        color: "#00e5ff",
                       },
                       {
                         offset: 1,
-                        color: this.$store.state.moreSty === 'greenSty'
-                          ? "rgb(33, 187, 76)"
-                          : "rgb(57, 54, 143)",
+                        color: "#00e5ff",
                       },
                     ]),
                   ],
@@ -169,7 +165,7 @@ export default {
             ],
             itemStyle: {
               normal: {
-                color: "#000",
+                color: "#fff",
               },
             },
             pointer: {
@@ -200,9 +196,7 @@ export default {
                 color: [
                   [
                     1,
-                    this.$store.state.moreSty === 'greenSty'
-                      ? "rgb(33, 187, 76)"
-                      : "rgb(57, 54, 143)",
+                    "#00e5ff",
                   ],
                 ],
               },
@@ -217,9 +211,7 @@ export default {
               distance: 6,
               splitNumber: 2,
               lineStyle: {
-                color: this.$store.state.moreSty === 'greenSty'
-                      ? "rgb(33, 187, 76)"
-                      : "rgb(57, 54, 143)", //用颜色渐变函数不起作用
+                color: "#00e5ff", //用颜色渐变函数不起作用
                 width: 1,
               },
               length: 4,
@@ -255,9 +247,7 @@ export default {
                     formatter: function (params) {
                       return params.value;
                     },
-                    color: this.$store.state.moreSty === 'greenSty'
-                      ? "rgb(33, 187, 76)"
-                      : "rgb(57, 54, 143)",
+                    color: "#00e5ff",
                     fontSize: 12,
                     fontWeight: "bold",
                     position: "center",

src/components/windHome/components/lineCharts.vue

@@ -194,8 +194,8 @@ export default {
         color: this.color,
         tooltip: {
           trigger: "axis",
-          backgroundColor: "rgba(5, 187, 76,0.35)",
-          borderColor: "#05bb4c",
+          backgroundColor: "rgba(5, 108, 187,0.35)",
+          borderColor: "#1a93cf",
           formatter: function (params) {
             var htmlStr = `<div style='margin-bottom:5px'>${params[0].axisValue}</div>`;
             for (var i = 0; i < params.length; i++) {
@@ -226,7 +226,7 @@ export default {
           right: "2%",
           textStyle: {
             fontSize: "12",
-            color: "#A4A4A5",
+            color: "#fff",
           },
           orient: "vertical",
           icon: "roundRect",
@@ -265,7 +265,7 @@ export default {
              
               formatter: "{value}",
               textStyle: {
-                color: "#828484",
+                color: "#fff",
                 fontSize: 12,
               },
               hideOverlap: true,
@@ -278,7 +278,7 @@ export default {
           name: this.unit,
 
           nameTextStyle: {
-            color: "#828484",
+            color: "#fff",
             fontSize: 14,
             align: "right",
           },
@@ -289,12 +289,12 @@ export default {
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#606769",
+              color: "#fff",
             },
           },
           axisLine: {
             lineStyle: {
-              color: "#606769", // y轴的颜色
+              color: "#fff", // y轴的颜色
               width: 1, //y轴线的宽度
             },
           },

src/components/windHome/components/powerEcharts.vue

@@ -112,7 +112,7 @@ export default {
           right: this.orient ? "16%" : "2%",
           textStyle: {
             fontSize: "12",
-            color: "#A4A4A5",
+            color: "#fff",
           },
           orient: this.orient ? this.orient : "vertical",
           icon: "roundRect",
@@ -124,12 +124,12 @@ export default {
           boundaryGap: false, //x轴从0开始
           axisLabel: {
             textStyle: {
-              color: "#606769",
+              color: "#fff",
             },
           },
           axisLine: {
             lineStyle: {
-              color: "#606769", //x轴的颜色
+              color: "#fff", //x轴的颜色
               width: 1, //轴线的宽度
             },
           },
@@ -143,7 +143,7 @@ export default {
           type: "value",
           name: this.unit,
           nameTextStyle: {
-            color: "#828484",
+            color: "#fff",
             fontSize: 14,
             align: "right",
           },
@@ -154,12 +154,12 @@ export default {
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#606769",
+              color: "#fff",
             },
           },
           axisLine: {
             lineStyle: {
-              color: "#606769", // y轴的颜色
+              color: "#fff", // y轴的颜色
               width: 1, //y轴线的宽度
             },
           },

src/components/windHome/index.vue

@@ -4,7 +4,7 @@
       <div class="first">
         <div class="base-info">
           <div class="base-info-left">
-            <div class="top" :data-type="$store.state.moreSty">
+            <div class="top">
               日发电量
               <div class="value">
                 {{ wpInfos?.rfdl || 0 }}
@@ -87,7 +87,7 @@
           </div>
           <div
             class="echarts"
-            style="width: 100%; height: 300px; margin-top: 10px"
+            style="width: 100%; height: 400px; margin-top: 10px"
             v-if="showFlag"
           >
             <power-echarts
@@ -1050,7 +1050,7 @@ export default {
           font-size: 12px;
           font-family: Source Han Sans SC;
           font-weight: 400;
-          color: #363b46;
+          color: #fff;
           margin-left: -15px;
           margin-top: 15px;
 
@@ -1188,7 +1188,7 @@ export default {
             font-size: 14px;
             font-family: Microsoft YaHei;
             font-weight: 400;
-            color: #363b46;
+            color: #fff;
 
             .titles-num {
               font-size: 16px;
@@ -1235,14 +1235,14 @@ export default {
           font-size: 14px;
           font-family: Microsoft YaHei;
           font-weight: 400;
-          color: #363b46;
+          color: #fff;
           margin-top: 3px;
 
           .sub-value {
             font-size: 16px;
             font-family: Barlow Semi Condensed Medium;
             font-weight: 400;
-            color: #363b46;
+            color: #fff;
           }
         }
       }
@@ -1254,7 +1254,9 @@ export default {
     padding: 0 15px;
     margin-bottom: 20px;
     // height: calc(100% - 301px - 300px - 40px);
-    background: rgba(255, 255, 255, 0.3);
+    // background: rgba(255, 255, 255, 0.3);
+    // background: rgba(96, 103, 105, 0.2);
+    background-color: rgba(20, 29, 51, 0.3);
     backdrop-filter: blur(15px);
     border-radius: 5px;
     display: flex;
@@ -1271,7 +1273,9 @@ export default {
     .base-info-left {
       width: 296px;
       height: 100%;
-      background: rgba(255, 255, 255, 0.3);
+    //   background: rgba(255, 255, 255, 0.3);
+    // background: rgba(96, 103, 105, 0.2); 
+    background-color: rgba(20, 29, 51, 0.3);
       backdrop-filter: blur(15px);
       position: relative;
       padding: 20px 0px 0 20px;
@@ -1303,7 +1307,7 @@ export default {
         font-size: 24px;
         //font-family: Source Han Sans SC;
         font-weight: 400;
-        color: #363b46;
+        color: #fff;
 
         .value {
           display: flex;
@@ -1313,7 +1317,7 @@ export default {
           font-family: Arial;
           font-weight: 400;
           padding: 10px 0;
-          color: #4b55ae;
+          color: #00e5ff;
           .unit {
             font-size: 22px;
             font-family: Adobe Heiti Std;
@@ -1324,14 +1328,14 @@ export default {
       .bottom {
         .others-power {
           font-size: 15px;
-          color: #959595;
+          color: #fff;
           .others-value {
             font-size: 24px;
             padding: 5px 0;
-            color: #363b46;
+            color: #00e5ff;
             .unit {
               font-size: 16px;
-              color: #363b46;
+              color: #00e5ff;
               margin-left: 10px;
             }
           }
@@ -1366,7 +1370,9 @@ export default {
         border-bottom: 1px solid #fff;
       }
       .target {
-        background: rgba(255, 255, 255, 0.3);
+        // background: rgba(255, 255, 255, 0.3);
+        // background: rgba(96, 103, 105, 0.2);
+        background-color: rgba(20, 29, 51, 0.3);
         backdrop-filter: blur(15px);
         height: 45%;
 
@@ -1432,17 +1438,19 @@ export default {
           font-size: 14px;
           font-family: Source Han Sans SC;
           font-weight: 400;
-          color: #606769;
+          color: #fff;
           justify-content: center;
           align-items: center;
-            background: rgba(255, 255, 255, 0.3);
+            // background: rgba(255, 255, 255, 0.3);
+            // background: rgba(96, 103, 105, 0.2);
+            background-color: rgba(20, 29, 51, 0.3);
             backdrop-filter: blur(15px);
         }
         .others-value {
           font-size: 16px;
           font-family: Arial;
           font-weight: 400;
-          color: #363b46;
+          color: #00e5ff;
           padding: 8px 0;
         }
       }
@@ -1452,7 +1460,9 @@ export default {
     width: 100%;
     // height: calc(100% - 621px - 20px);
     height: 400px;
-    background: rgba(255, 255, 255, 0.3);
+    // background: rgba(255, 255, 255, 0.3);
+    // background: rgba(96, 103, 105, 0.2);
+    background-color: rgba(20, 29, 51, 0.3);
     backdrop-filter: blur(15px);
     border-radius: 5px;
     display: flex;
@@ -1473,7 +1483,9 @@ export default {
   .info {
     width: 100%;
     // height: 307px;
-    background: rgba(255, 255, 255, 0.3);
+    // background: rgba(255, 255, 255, 0.3);
+    // background: rgba(96, 103, 105, 0.2);
+    background-color: rgba(20, 29, 51, 0.3);
     backdrop-filter: blur(15px);
     border-radius: 5px;
     margin-bottom: 20px;
@@ -1491,7 +1503,7 @@ export default {
       font-size: 14px;
       font-family: Source Han Sans SC;
       font-weight: 400;
-      color: #363b46;
+      color: #fff;
 
       .last-left {
         width: 200px;
@@ -1519,7 +1531,7 @@ export default {
   font-size: 14px;
   font-family: Microsoft YaHei;
   font-weight: 400;
-  color: #363b46;
+  color: #fff;
 }
 
 .point {

src/components/windProDetail/windProblem.vue

@@ -2,7 +2,7 @@
   <div class="bodys">
     <div class="parts">
       <div class="part-top">
-        <div class="part-title" :data-type="$store.state.moreSty">
+        <div class="part-title">
           <div
             class="title-item part-left"
             :class="{ active: current === 'fdj' }"
@@ -127,7 +127,7 @@
                 <div>{{ item.name }}</div>
                 <div
                   class="table-value"
-                   :data-type="$store.state.moreSty"
+                  
                   :class="item.value == 1 ? 'round-red' : 'round'"
                 ></div>
               </div>
@@ -152,7 +152,7 @@
             >
               <div class="table-item" v-for="(item, ind) in val" :key="ind">
                 <div>{{ item.name }}</div>
-                <div class="table-value" :data-type="$store.state.moreSty">
+                <div class="table-value">
                   {{
                     item.name.includes("状态")
                       ? item.value
@@ -175,11 +175,11 @@
         <div class="problemTit">
             <div class="point point-left bottom"></div>
             <div class="point point-right bottom"></div>
-            <span style="font-size: 16px;position: relative;top: -5px;">故障分类</span>
-            <div class="problemSeach" :data-type="$store.state.moreSty">
+            <span style="font-size: 16px;position: relative;top: -5px;color:#fff">故障分类</span>
+            <div class="problemSeach">
                 <el-input v-model="inputcv" clearable placeholder="请输入" />
                 <div class="seachBtn">
-                    <el-icon :size="18" :color="color">
+                    <el-icon :size="18" color="#fff">
                         <Search />
                     </el-icon>
                 </div>
@@ -774,15 +774,16 @@ export default {
         height: 100%;
         display: flex;
         align-items: center;
-        color: #3685c5;
+        color: #fff;
         justify-content: center;
         cursor: pointer;
         background: rgba(96, 103, 105, 0.2);
-        border-left: 1px solid rgba(0, 70, 199, 0.48);
-        border-top: 1px solid rgba(0, 70, 199, 0.48);
-        border-bottom: 1px solid rgba(0, 70, 199, 0.48);
+        border-left: 1px solid rgba(0, 189, 199, 0.48);
+        border-top: 1px solid rgba(0, 189, 199, 0.48);
+        border-bottom: 1px solid rgba(0, 189, 199, 0.48);
+        // border-bottom: 1px solid rgba(0, 70, 199, 0.48);
         &.active {
-            background-color: rgba(0, 70, 199, 0.48);
+            background-color: rgba(0, 189, 199, 0.48);
             color: #ffffff;
         }
         
@@ -823,7 +824,8 @@ export default {
         width: 100%;
         padding-bottom: 20px;
         backdrop-filter: blur(15px);
-        background: rgba(255, 255, 255, 0.3);
+        // background: rgba(255, 255, 255, 0.3);
+        background: rgba(96, 103, 105, 0.2);
         // background: rgba(96, 103, 105, 0.2);
         border-radius: 5px;
         margin-top: 10px;
@@ -847,12 +849,13 @@ export default {
           font-size: 13px;
           font-family: Source Han Sans SC;
           font-weight: 400;
-          color: #959595;
+          color: #fff;
           padding: 0 10px;
 
           .table-item {
             width: 25%;
             font-size: 12px;
+            color: #fff;
 
             .table-value {
               display: flex;
@@ -863,7 +866,7 @@ export default {
                 font-size: 12px;
                 font-family: Source Han Sans SC;
                 font-weight: 400;
-                color: #817c7c;
+                color: #fff;
                 margin-left: 5px;
                 width: 40px;
               }
@@ -873,7 +876,8 @@ export default {
                 height: 8px;
                 border-radius: 50%;
                 margin-right: 90px;
-                background-color: rgba(0, 70, 199, 0.48);
+                // background-color: rgba(0, 70, 199, 0.48);
+                background: rgba(255, 255, 255, 0.2);
               }
 
               &.round-red {
@@ -887,7 +891,8 @@ export default {
           }
 
           &.active {
-            background-color: rgba(83, 89, 104, 0.15);
+            // background-color: rgba(83, 89, 104, 0.15);
+            background: rgba(96, 103, 105, 0.2);
           }
         }
       }
@@ -897,7 +902,8 @@ export default {
   .problems{
     width: 30vw;
     // background: rgba(96, 103, 105, 0.2);
-    background: rgba(255, 255, 255, 0.3);
+    // background: rgba(255, 255, 255, 0.3);
+    background: rgba(96, 103, 105, 0.2);
     backdrop-filter: blur(15px);
     border-radius: 5px;
     padding: 10px;
@@ -931,9 +937,9 @@ export default {
                 position: relative;
                 margin-left: 5px;
                 cursor: pointer;
-                background: rgba(0, 70, 199, 0.48);
+                background: rgba(0, 189, 199, 0.88);
                 &:hover {
-                    background-color: rgba(16, 81, 219, 0.5);
+                    background-color: rgba(0, 189, 199, 0.9);
                     color: #ffffff;
                 }
                 .el-icon{
@@ -944,7 +950,7 @@ export default {
                 
             }
             .buttons {
-                background-color: rgba(5, 187, 76, 0.2);
+                background-color: rgba(255,255,255, 0.2);
                 border: 1px solid #3b6c53;
                 color: #b3b3b3;
                 font-size: 14px;
@@ -1008,7 +1014,8 @@ export default {
                     }
                     .numBot{
                         font-size: 14px;
-                        color: rgb(136, 136, 136);
+                        // color: rgb(136, 136, 136);
+                        color: #fff;
                         position: absolute;
                         right: 0;
                         top: 21px;
@@ -1060,7 +1067,7 @@ export default {
             .warnItems{
                 width: 100%;
                 display: flex;
-                color: #817c7c;
+                color: #fff;
                 margin-bottom: 3px;
                 .warnItemLeft{
                     height: 32px;
@@ -1097,14 +1104,14 @@ export default {
   position: relative;
   width: 98%;
   height: 42px;
-  border-bottom: 1px solid #363b46;
+  border-bottom: 1px solid #ababab;
   display: flex;
   align-items: center;
   padding-left: 20px;
   font-size: 16px;
   font-family: Microsoft YaHei;
   font-weight: 400;
-  color: #363b46;
+  color: #fff;
 }
 
 .point {
@@ -1163,13 +1170,29 @@ export default {
   font-size: 12px;
   font-family: Microsoft YaHei;
   font-weight: 400;
-  color: #363b46;
+  color: #fff;
   padding: 0 0px;
   .table-value {
     font-family: Arial;
     font-weight: 400;
     margin-right: 25px;
-    color: rgb(15, 120, 240);
+    color: rgb(15, 225, 240);
   }
 }
 </style>
+
+<style lang="less">
+.problemSeach{
+    .el-input{
+        .el-input__wrapper{
+            background: rgba(96, 103, 105, 0.2) !important;
+            .el-input__inner{
+                color: #fff;
+            }
+        }
+        .el-input__wrapper.is-focus{
+            box-shadow: 0 0 0 1px #00e5ff inset !important;
+        }
+    }
+}
+</style>

src/components/windVideo/index.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="windVideo">
+        <div class="windVideoLeft">
+
+        </div>
+        <div class="windVideoRight">
+            <video ref="videoPlayer" controls width="90%" muted autoplay>
+              <source src="/static/windVideo.mp4" type="video/mp4" />
+            </video>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less">
+.windVideo{
+    width: 100%;
+    .windVideoLeft{
+        width: 20%;
+        height: 100%;
+        background-color: rgba(20, 29, 51, 0.3);
+    }
+    .windVideoRight{
+        width: 80%;
+        height: 100vh;
+    }
+}
+</style>
+<style lang="less" scoped>
+.panel {
+  padding: 20px;
+  border-radius: 10px;
+  background-color: rgba(20, 29, 51, 0.3);
+  backdrop-filter: blur(15px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+  color: #e0e0e0;
+}
+</style>

src/views/cesium.vue

@@ -2248,9 +2248,10 @@ export default {
 .el-overlay {
   background-color: transparent !important;
   .windModelDrawer {
-    width: 80% !important;
+    width: 100% !important;
     backdrop-filter: blur(15px) !important;
-    background: rgba(255, 255, 255, 0.8) !important;
+    // background: rgba(255, 255, 255, 0.8) !important;
+    background-color: rgba(0, 0, 0, 0.3) !important;
     border-radius: 10px 0 0 10px !important;
     .el-drawer__body {
       overflow: hidden;

src/views/cesiumComponents/windMap2D.vue

@@ -27,7 +27,7 @@
       :before-close="handleClose"
     >
       <template #header>
-        <h3 style="font-weight: bold">{{ windDrawerHeader }}</h3>
+        <h3 style="font-weight: bold;color: #fff">{{ windDrawerHeader }}</h3>
       </template>
       <template #default>
         <div class="windDrawerCla">
@@ -40,14 +40,7 @@
             <windHome :modelValItem="modelVal" />
           </div>
           <div class="spjk" v-if="showVideoMsg">
-            <!-- <iframe
-              src="/public/static/windVideo.mp4"
-              frameborder="0"
-              style="width: 100%; height: 100%"
-            ></iframe> -->
-            <video ref="videoPlayer" controls width="95%" muted autoplay>
-              <source src="/static/windVideo.mp4" type="video/mp4" />
-            </video>
+            <windVideo />
           </div>
           <div class="gzck" v-if="showProblemMsg">
             <windPro />
@@ -135,6 +128,7 @@ import benchmark from "@/assets/cesiumImg/benchmark.png";
 
 import windHome from "@/components/windHome/index.vue";
 import windPro from "@/components/windProDetail/windProblem.vue";
+import windVideo from "@/components/windVideo/index.vue";
 import ModelUnpack from "@/components/modelUnpack.vue";
 
 import { WindLayer } from "cesium-wind";
@@ -154,6 +148,7 @@ export default {
     menuCom,
     windHome,
     windPro,
+    windVideo,
     ModelUnpack,
     windView2
   },
@@ -449,7 +444,7 @@ export default {
         },
         onError: (error) => {
           console.log("❌ WebSocket 错误:", error);
-          return
+        //   return
           if (stationName === "MYFDC") {
             fjLonLatJson = JSON.parse(JSON.stringify(fjMYLonLatJson));
           } else if (stationName === "JNWHZ") {
@@ -1771,10 +1766,19 @@ export default {
 .el-overlay {
   background-color: transparent !important;
   .windModelDrawer {
-    width: 80% !important;
+    width: 100% !important;
     backdrop-filter: blur(15px) !important;
-    background: rgba(255, 255, 255, 0.8) !important;
+    // background: rgba(4, 12,11, 0.5) !important;
+    // background-color: rgba(20, 29, 51, 0.3) !important;
+    background-color: rgba(0, 0, 0, 0.3) !important;
     border-radius: 10px 0 0 10px !important;
+    .el-drawer__header{
+        .el-drawer__close-btn{
+            .el-icon{
+                color: #fff !important;
+            }
+        }
+    }
     .el-drawer__body {
       overflow: hidden;
       padding-top: 0;
@@ -1795,7 +1799,7 @@ export default {
       height: 41px;
       display: flex;
       align-items: center;
-      background: url("@/assets/cesiumImg/title_left_bg.png") no-repeat;
+      background: url("@/assets/cesiumImg/title_left_bg1.png") no-repeat;
 
       span {
         font-size: 16px;

src/views/cesiumComponents/windMap3D.vue

@@ -27,7 +27,7 @@
       :before-close="handleClose"
     >
       <template #header>
-        <h3 style="font-weight: bold">{{ windDrawerHeader }}</h3>
+        <h3 style="font-weight: bold;color: #fff">{{ windDrawerHeader }}</h3>
       </template>
       <template #default>
         <div class="windDrawerCla">
@@ -40,14 +40,7 @@
             <windHome :modelValItem="modelVal" />
           </div>
           <div class="spjk" v-if="showVideoMsg">
-            <!-- <iframe
-              src="/static/windVideo.mp4"
-              frameborder="0"
-              style="width: 100%; height: 100%"
-            ></iframe> -->
-            <video ref="videoPlayer" controls width="95%" muted autoplay>
-              <source src="/static/windVideo.mp4" type="video/mp4" />
-            </video>
+            <windVideo />
           </div>
           <div class="gzck" v-if="showProblemMsg">
             <windPro />
@@ -121,6 +114,7 @@ import gf from "@/assets/windimgs/fanSvg/gf.png";
 import benchmark from "@/assets/cesiumImg/benchmark.png";
 
 import windHome from "@/components/windHome/index.vue";
+import windVideo from "@/components/windVideo/index.vue"
 import windPro from "@/components/windProDetail/windProblem.vue";
 import ModelUnpack from "@/components/modelUnpack.vue";
 
@@ -141,6 +135,7 @@ export default {
     windView,
     menuCom,
     windHome,
+    windVideo,
     windPro,
     ModelUnpack,
     windView2
@@ -534,17 +529,17 @@ export default {
       let fjLonLatJson = [];
       this.fjLonLatJsonArr = [];
 
-      webSocketService.connect({
-        url: `ws/${this.getWsUrl(stationName)}`,
-        autoReconnect: true,
-        maxReconnectAttempts: 5,
-        reconnectInterval: 3000,
-        onOpen: (event) => {
-          console.log("✅ WebSocket 连接成功", event);
-        },
-        onError: (error) => {
-          console.log("❌ WebSocket 错误:", error);
-        //   return;
+    //   webSocketService.connect({
+    //     url: `ws/${this.getWsUrl(stationName)}`,
+    //     autoReconnect: true,
+    //     maxReconnectAttempts: 5,
+    //     reconnectInterval: 3000,
+    //     onOpen: (event) => {
+    //       console.log("✅ WebSocket 连接成功", event);
+    //     },
+    //     onError: (error) => {
+    //       console.log("❌ WebSocket 错误:", error);
+    //       return;
           if (stationName === "MYFDC") {
             fjLonLatJson = JSON.parse(JSON.stringify(fjMYLonLatJson));
           } else if (stationName === "JNWHZ") {
@@ -580,47 +575,47 @@ export default {
               this.changeZb(Object.assign({}, jwdItem, fjzbItem));
             });
           }, 1000);
-        },
-      });
-
-      webSocketService.on("message", (res) => {
-        if (stationName === "MYFDC") {
-          fjLonLatJson = JSON.parse(JSON.stringify(fjMYLonLatJson));
-        } else if (stationName === "JNWHZ") {
-          fjLonLatJson = JSON.parse(JSON.stringify(fjWHZLonLatJson));
-        } else if (stationName === "JNYPL") {
-          fjLonLatJson = JSON.parse(JSON.stringify(fjYPLLonLatJson));
-        } else if (stationName === "JNSMS") {
-          fjLonLatJson = JSON.parse(JSON.stringify(fjSMSLonLatJson));
-        }
-
-        let wtArray = JSON.parse(JSON.stringify(res.windMachineList));
-
-        if (this.isFirstAdd) {
-          fjLonLatJson.data.forEach((e) => {
-            let fjItem =
-              wtArray.find((findEle) => {
-                return findEle.fjbh === e.fjbh;
-              }) || {};
-            const fjMix = Object.assign({}, e, fjItem);
-            fjMix.status = this.getStatus(fjMix.fjzt);
-            e = fjMix;
-
-            this.showStatuswind(viewer, e);
-          });
-        }
-
-        this.fjLonLatJsonArr = fjLonLatJson;
-        this.isFirstAdd = false;
-
-        wtArray.forEach((fjzbItem) => {
-          const jwdItem =
-            fjLonLatJson.data.find((findEle) => {
-              return findEle.fjbh === fjzbItem.fjbh;
-            }) || {};
-          this.changeZb(Object.assign({}, jwdItem, fjzbItem));
-        });
-      });
+    //     },
+    //   });
+
+    //   webSocketService.on("message", (res) => {
+    //     if (stationName === "MYFDC") {
+    //       fjLonLatJson = JSON.parse(JSON.stringify(fjMYLonLatJson));
+    //     } else if (stationName === "JNWHZ") {
+    //       fjLonLatJson = JSON.parse(JSON.stringify(fjWHZLonLatJson));
+    //     } else if (stationName === "JNYPL") {
+    //       fjLonLatJson = JSON.parse(JSON.stringify(fjYPLLonLatJson));
+    //     } else if (stationName === "JNSMS") {
+    //       fjLonLatJson = JSON.parse(JSON.stringify(fjSMSLonLatJson));
+    //     }
+
+    //     let wtArray = JSON.parse(JSON.stringify(res.windMachineList));
+
+    //     if (this.isFirstAdd) {
+    //       fjLonLatJson.data.forEach((e) => {
+    //         let fjItem =
+    //           wtArray.find((findEle) => {
+    //             return findEle.fjbh === e.fjbh;
+    //           }) || {};
+    //         const fjMix = Object.assign({}, e, fjItem);
+    //         fjMix.status = this.getStatus(fjMix.fjzt);
+    //         e = fjMix;
+
+    //         this.showStatuswind(viewer, e);
+    //       });
+    //     }
+
+    //     this.fjLonLatJsonArr = fjLonLatJson;
+    //     this.isFirstAdd = false;
+
+    //     wtArray.forEach((fjzbItem) => {
+    //       const jwdItem =
+    //         fjLonLatJson.data.find((findEle) => {
+    //           return findEle.fjbh === fjzbItem.fjbh;
+    //         }) || {};
+    //       this.changeZb(Object.assign({}, jwdItem, fjzbItem));
+    //     });
+    //   });
 
       this.resetWindViewport();
     },
@@ -1498,7 +1493,7 @@ export default {
       const targetHeight = 5000;
 
       const draggableHeightTolerance = 5000; // 允许拖拽的高度范围：20,000 ~ 30,000
-      const minHeight = 500; // 最低高度
+      const minHeight = 1600; // 最低高度
       const maxHeight = 10000; // 最高高度
 
       const allowedOffsetDegrees = 2; // 允许拖拽的最大偏移（经纬度）
@@ -2005,10 +2000,19 @@ export default {
 .el-overlay {
   background-color: transparent !important;
   .windModelDrawer {
-    width: 80% !important;
+    width: 100% !important;
     backdrop-filter: blur(15px) !important;
-    background: rgba(255, 255, 255, 0.8) !important;
+    // background: rgba(255, 255, 255, 0.8) !important;
+    // background-color: rgba(20, 29, 51, 0.3) !important;
+    background-color: rgba(0, 0, 0, 0.3) !important;
     border-radius: 10px 0 0 10px !important;
+    .el-drawer__header{
+        .el-drawer__close-btn{
+            .el-icon{
+                color: #fff !important;
+            }
+        }
+    }
     .el-drawer__body {
       overflow: hidden;
       padding-top: 0;
@@ -2029,7 +2033,7 @@ export default {
       height: 41px;
       display: flex;
       align-items: center;
-      background: url("@/assets/cesiumImg/title_left_bg.png") no-repeat;
+      background: url("@/assets/cesiumImg/title_left_bg1.png") no-repeat;
 
       span {
         font-size: 16px;

src/views/cesiumComponents/windView2.vue

@@ -2075,6 +2075,28 @@ export default {
     background: transparent;
   }
 }
+
+.el-popper{
+    .el-select-dropdown{
+        .el-scrollbar{
+            .el-select-dropdown__wrap{
+                .el-scrollbar__view{
+                    .el-select-dropdown__item{
+                        color: #fff;
+                    }
+                    .el-select-dropdown__item.is-hovering{
+                        background-color: #0a5255 !important;
+                    }
+                }
+            }
+        }
+    }
+}
+.el-popper.is-light, .el-popper.is-light>.el-popper__arrow:before{
+    background-color: rgba(3, 37, 46, 0.9);
+    border: 1px solid rgba(20, 29, 51, 0.3);
+
+}
 </style>
 
 <style scoped>

src/views/weatherComponents/cesiumweatherView.vue

@@ -478,15 +478,17 @@ export default {
                 },
                 tooltip: {
                 trigger: "axis",
-                backgroundColor: "rgba(0, 0, 0, 0.8)",
+                // backgroundColor: "rgba(0, 0, 0, 0.8)",
+                backgroundColor: "rgba(5, 108, 187,0.35)",
+                borderColor: "#1a93cf",
                 formatter(params) {
                     const dom = `
                     <div class="weaterChartToolTipBox">
-                    <div class="item">${that.getWeatherChartIcon(
+                    <div class="item"style="color: #fff">${that.getWeatherChartIcon(
                         that.weatherChartActiveTab,
                         oneDayTemperatureDescList[params[0].dataIndex]
                     )}</div>
-                    <div class="item">${that.getWeatherChartUnit(
+                    <div class="item"style="color: #fff">${that.getWeatherChartUnit(
                         oneDayTemperatureDescList[params[0].dataIndex],
                         params[0].value
                     )}</div>
@@ -558,9 +560,10 @@ export default {
                     itemStyle: {
                     normal: {
                         // 折点区域颜色
+                        // color: "rgba(19, 74, 192, 0.1)",
                         color: "rgba(19, 74, 192, 0.1)",
                         // 折点的边线颜色
-                        borderColor: "#134ac0",
+                        borderColor: "rgba(0, 171, 189, 0.5)",
                         // 折点的边线宽度
                         borderWidth: 2,
                     },
@@ -568,12 +571,13 @@ export default {
                     // 设置折线颜色
                     lineStyle: {
                     normal: {
-                        color: "#134ac0",
+                        color: "#00e5ff",
                     },
                     },
                     areaStyle: {
                     normal: {
-                        color: "rgba(19, 74, 192, 0.5)",
+                        // color: "rgba(19, 74, 192, 0.5)",
+                        color: "rgba(0, 171, 189, 0.5)",
                     },
                     },
                 },
@@ -647,7 +651,9 @@ export default {
                     inside: true,
                     length: 99999,
                     lineStyle: {
-                        color: "rgba(19, 74, 192, 0.15)", // 轴线颜色
+                        // color: "rgba(19, 74, 192, 0.15)", // 轴线颜色
+                        color: "rgba(0, 171, 189, 0.15)", // 轴线颜色
+                        
                         width: 2, // 轴线宽度
                         type: "solid", // 轴线类型
                     },
@@ -753,9 +759,9 @@ export default {
                     itemStyle: {
                     normal: {
                         // 折点区域颜色
-                        color: "rgba(19, 74, 192, 0.1)",
+                        color: "rgba(0, 171, 189, 0.1)",
                         // 折点的边线颜色
-                        borderColor: "#134ac0",
+                        borderColor: "rgba(0, 171, 189, 0.8)",
                         // 折点的边线宽度
                         borderWidth: 2,
                     },
@@ -763,7 +769,7 @@ export default {
                     // 设置折线颜色
                     lineStyle: {
                     normal: {
-                        color: "#134ac0",
+                        color: "rgba(0, 171, 189, 0.9)",
                     },
                     },
                 },
@@ -779,9 +785,9 @@ export default {
                     itemStyle: {
                     normal: {
                         // 折点区域颜色
-                        color: "rgba(19, 74, 192, 0.1)",
+                        color: "rgba(0, 171, 189, 0.1)",
                         // 折点的边线颜色
-                        borderColor: "#134ac0",
+                        borderColor: "rgba(0, 171, 189, 0.8)",
                         // 折点的边线宽度
                         borderWidth: 2,
                     },
@@ -789,7 +795,7 @@ export default {
                     // 设置折线颜色
                     lineStyle: {
                     normal: {
-                        color: "#134ac0",
+                        color: "rgba(0, 171, 189, 0.9)",
                     },
                     },
                 },
@@ -805,16 +811,18 @@ export default {
                 tooltip: {
                 trigger: "axis",
                 // backgroundColor: "rgba(255,255,255, 1)",
-                backgroundColor: "rgba(0,0,0, 0.8)",
+                // backgroundColor: "rgba(0,0,0, 0.8)",
+                backgroundColor: "rgba(5, 108, 187,0.35)",
+                borderColor: "#1a93cf",
                 formatter(params) {
                     tqXData[params[0].dataIndex];
                     const dom = `
                     <div class="weaterChartToolTipBox">
-                    <div class="item">白天${tqXData[params[0].dataIndex]}</div>
-                    <div class="item" style="margin-top: 4px">夜晚${
+                    <div class="item" style="color: #fff">白天${tqXData[params[0].dataIndex]}</div>
+                    <div class="item" style="margin-top: 4px;color: #fff">夜晚${
                         tqxNightData[params[1].dataIndex]
                     }, ${params[1].value}℃</div>
-                    <div class="item" style="margin-top: 4px">早晚温差 ${
+                    <div class="item" style="margin-top: 4px;color: #fff">早晚温差 ${
                         params[0].value - params[1].value
                     }℃</div>
                     </div>`;
@@ -959,7 +967,8 @@ export default {
     // padding: 20px;
     padding: 20px;
     border-radius: 20px;
-    background-color: rgba(25, 55, 40, 0.7);
+    // background-color: rgba(25, 55, 40, 0.7);
+    background-color: rgba(20, 29, 51, 0.3);
     backdrop-filter: blur(15px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
@@ -1056,17 +1065,17 @@ display: block;border-right: 2px solid #fff; }
 .weather-temp .value { font-size: 28px; font-weight: 500; }
 .weather-temp .icon { font-size: 24px; }
 .weather-info .condition { font-size: 12px; color: #fff; }
-.market-demand { background-color: #134ac0; color: white; padding: 15px 10px; border-radius: 8px; font-size: 14px; }
+.market-demand { background-color: #00abbd; color: white; padding: 15px 10px; border-radius: 8px; font-size: 14px; }
 .info-section { font-size: 13px; }
 .info-section h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #fff; margin-bottom: 15px; }
 .info-item { display: flex; justify-content: space-between; margin-bottom: 12px; }
 .info-item .label { color: #fff; }
 .info-item .value { color: #fff; display: flex; align-items: center; gap: 5px; }
 .tag { font-size: 11px; padding: 2px 6px; border-radius: 4px; }
-.tag.blue { background-color: #e7f1ff; color: #134ac0; }
+.tag.blue { background-color: #e7f1ff; color: #00a4b6; }
 .tag.green { background-color: #e6f7f0; color: #28a745; }
 .op-progress-bar { height: 6px; background: #e9ecef; border-radius: 3px; margin-top: 5px; }
-.op-progress-bar-inner { height: 100%; background: #134ac0; border-radius: 3px; }
+.op-progress-bar-inner { height: 100%; background: #00e5ff; border-radius: 3px; }
 .devBox{
     position: relative;
     width: 100%;
@@ -1130,7 +1139,7 @@ display: block;border-right: 2px solid #fff; }
         }
 
         &.active {
-        color: #134ac0;
+        color: #0093a3;
         background-color: #f1f3f5;
         border-radius: 10px;
         transition: 0.2s;