Browse Source

功能修改

sunzehao 3 months ago
parent
commit
e05b4c0239

+ 12 - 4
src/views/cesiumComponents/topographicMap.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="mapBox">
         <div id="cesiumContainer" style="width: 100%; height: 100vh"></div>
-        <div class="menuComT">
+        <div :class="!menuComTStyB ? 'menuComTSty' : 'menuComT'">
             <menuCom :showbasemap="false" :showwindspeed="false" :showcloud="false" :showrainfall="false" 
             :showtemperature="false" :showwind="false" :showexit="true" @handleInit="resetViewport" 
             @handleExit="switchLayer" />
         </div>
         <comModelDialog :showcomModelDia="showcomModelDia" :modelVal="modelVal" @showDia="showComDia" />
-        <windView />
+        <windView @showDetail="menuComTSty" />
     </div>
 </template>
 
@@ -28,7 +28,8 @@ export default {
         return {
             viewer: null,
             showcomModelDia: false,
-            modelVal: null
+            modelVal: null,
+            menuComTStyB: false
         }
     },
     mounted() {
@@ -258,11 +259,13 @@ export default {
             duration: 3,
         });
         },
-
         switchLayer() {
             this.$router.push({
                 path: '/'
             })
+        },
+        menuComTSty(val) {
+            this.menuComTStyB = val
         }
     }
 }
@@ -281,5 +284,10 @@ export default {
     bottom: 400px;
     left: 20px;
   }
+  .menuComTSty{
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+  }
 }
 </style>

+ 46 - 4
src/views/cesiumComponents/windView.vue

@@ -18,6 +18,33 @@
         </aside>
         <!-- Right Sidebar -->
         <aside class="sidebar-right panel">
+            <div class="info-section">
+                <h3>风场信息</h3>
+                <div class="info-item">
+                    <span class="label">场站名称</span><span class="value">某某风场</span>
+                </div>
+                <div class="info-item">
+                    <span class="label">场站类型</span><span class="value">风场</span>
+                </div>
+                <div class="info-item">
+                    <span class="label">安全运行天数(天)</span><span class="value">27</span>
+                </div>
+                <div class="info-item">
+                    <span class="label">接入台数</span><span class="value">29</span>
+                </div>
+                <div class="info-item">
+                    <span class="label">装机容量(MW)</span><span class="value">1245</span>
+                </div>
+                <div class="info-item">
+                    <span class="label">经纬度</span><span class="value">106.2341, 37.2343</span>
+                </div>
+                <div class="info-item">
+                    <span class="label">并网时间</span><span class="value">2025-08-28</span>
+                </div>
+                <div class="info-item">
+                    <span class="label">电量详情</span><span class="value" @click="showDetail" style="color: #4b55ae;cursor:pointer">点击查看</span>
+                </div>
+            </div>
             <!-- 实时负荷 -->
             <div class="info-section">
                 <h3 >实时负荷</h3>
@@ -202,7 +229,7 @@
                 
             </div>
             <!-- 节能减排 -->
-            <div class="model-bg">
+            <!-- <div class="model-bg">
                 <div class="titles">
                 <div class="name">节能减排</div>
                 <div class="unit">(单位: 万吨)</div>
@@ -264,10 +291,11 @@
                     <div class="save-name">二氧化硫</div>
                 </div>
                 </div>
-            </div>
+            </div> -->
         </aside>
         <!-- Bottom Bar -->
-        <div class="bottom-bar">
+        <div class="bottom-bar" v-if="showWindDetail">
+            <!-- 损失电量 -->
             <div class="panel">
                 <div class="indicator-title">
                     <div class="status-title">
@@ -307,6 +335,7 @@
                     ></PieChart>
                 </div>
             </div>
+            <!-- 风电场 -->
             <div class="panel">
                 <div class="model-bg-new-right">
                     <div class="infos">
@@ -413,6 +442,7 @@
                     </div>
                 </div>
             </div>
+            <!-- 光伏电站 -->
             <div class="panel">
                 <div class="model-bg-new-right">
                     <div class="infos">
@@ -546,6 +576,7 @@ export default {
             wpInfos: {},
             lossPower: {},
             dates: "D",
+            showWindDetail: false
         }
     },
     mounted() {
@@ -555,6 +586,11 @@ export default {
         this.findProjectPlan();
     },
     methods: {
+        showDetail() {
+            this.showWindDetail = !this.showWindDetail
+            this.findProjectPlan();
+            this.$emit("showDetail", this.showWindDetail)
+        },
         // 发电量
         findProjectPlan() {
             let data = dataJson.FindProjectplanData
@@ -749,7 +785,7 @@ export default {
 <style lang="less" scoped>
 .panel {
     backdrop-filter: blur(10px);
-    // -webkit-backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 12px;
     padding: 20px;
@@ -1246,4 +1282,10 @@ export default {
     width: 100%;
     height: calc(100% - 20px);
 }
+
+.info-section { font-size: 13px; }
+.info-section h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #6c757d; margin-bottom: 15px; }
+.info-item { display: flex; justify-content: space-between; margin-bottom: 12px; padding: 0 5px; }
+.info-item .label { color: #fff; }
+.info-item .value { color: #fff; display: flex; align-items: center; gap: 5px; }
 </style>

+ 2 - 2
src/views/weatherComponents/weatherView.vue

@@ -67,8 +67,8 @@
             </div>
         </aside>
         <!-- Bottom Bar -->
-        <div class="bottom-bar animate__animated animate__fadeInUp"
-         v-show="showWeatherDetail">
+        <div class="bottom-bar"
+         v-if="showWeatherDetail">
             <div class="panel">
                 <div class="ycTop">
                     <span class="title">