Browse Source

feat(layerList): 添加新的防汛预案并优化图层列表功能

王杰 2 months atrás
parent
commit
a5b2b4f732

BIN
src/assets/image/planFour/1.png


BIN
src/assets/image/planFour/2.png


+ 17 - 5
src/views/components/layerList/index.vue

@@ -28,7 +28,7 @@
 <script>
 import * as mars3d from 'mars3d'
 import { getFloodPreventionList } from '@/api/floodPreventionPlan'
-import { getVideoRealtimeUrl } from '@/api/largeScreenApi'
+import { deviceSimpleList,getVideoRealtimeUrl } from '@/api/largeScreenApi'
 import { getPwkPopup, getSitePopup } from './popup'
 let layerCache = {}
 let graphicsLayer = null
@@ -104,7 +104,8 @@ export default {
           children: [
             { id: '4-1', type: 'plan', label: '2025年度渭河兴平段水灾害防御工作方案' },
             { id: '4-2', type: 'plan', label: '2025年度渭河水灾害防御工作方案' },
-            { id: '4-3', type: 'plan', label: '陕西省防汛应急预案' }
+            { id: '4-3', type: 'plan', label: '陕西省防汛应急预案' },
+            { id: '4-4', type: 'plan', label: '陕西省渭河生态区保护中心关于解除渭河洪水防御Ⅲ级应急响应的通知' }
           ]
         }
       ],
@@ -223,6 +224,17 @@ export default {
     getFloodPlanList() {
       getFloodPreventionList().then((res) => {
         const newItems = res.data.records.map((item) => ({ ...item, type: 'plan', label: item.planName }))
+         // 手动添加的通知
+        newItems.push({
+          "id": 15,
+          "label": "陕西省渭河生态区保护中心关于解除渭河洪水防御Ⅲ级应急响应的通知",
+          "planName": "陕西省渭河生态区保护中心关于解除渭河洪水防御Ⅲ级应急响应的通知",
+          "planFile": "https://eos.xian-2.cmecloud.cn/kf-shanxixian/ppt/7f67f2e619424e52bbb06fa60119061d.pptx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20251009T162017Z&X-Amz-SignedHeaders=host&X-Amz-Expires=604800&X-Amz-Credential=ENLBuns9lVTfgMbiwGT9uRVYJml8%2F20251009%2Fxian2%2Fs3%2Faws4_request&X-Amz-Signature=934d9cc00739219b4196ee3401e91aefb9bdd603ac580cf2b7fa19015eebf744",
+          "fileName": "陕西省渭河生态区保护中心关于解除渭河洪水防御Ⅲ级应急响应的通知.pptx",
+          "createrName": "王杰",
+          "createrTime": "2025-10-09T16:20:19.000+00:00",
+          "type": "plan"
+        })
         this.treeData.forEach((item) => {
           if (item.id == '4') {
             item.children = newItems
@@ -444,7 +456,7 @@ export default {
     getMonitorData() {
       graphicsLayer = new this.mars3d.layer.GraphicLayer()
       window.map.addLayer(graphicsLayer)
-      window.requestSDK('/sddnWeiHe/device/deviceSimpleList', { pageNum: 1, pageSize: 10, platFlag: '1', operType: '0' }, {}, 'post').then((res) => {
+      deviceSimpleList({ pageNum: 1, pageSize: 10, platFlag: '1', operType: '0' }).then((res) => {
         const data = res.data
         if (data) {
           data.forEach((point, index) => {
@@ -453,7 +465,7 @@ export default {
               style: {
                 image: point.status == 0?require('./image/camera.png'):require('./image/greyCamera.png'),
                 scale: 0.8,
-                clampToGround: true,
+                clampToGround:  point.status == 0 ? true : false,
                 horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
                 verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
                 pixelOffset: new this.Cesium.Cartesian2(0, -6), // 偏移量
@@ -540,7 +552,7 @@ export default {
 <style lang="scss" scoped>
 .layer-list-panel {
   position: absolute;
-  top: px-to-rem(80);
+  top: px-to-rem(130);
   left: px-to-rem(480);
   width: px-to-rem(320);
   padding: px-to-rem(10);

+ 18 - 1
src/views/components/layerList/planDialog.vue

@@ -31,7 +31,8 @@ export default {
       planList: [],
       imgsOne: [],
       imgsTwo: [],
-      imgsThree: []
+      imgsThree: [],
+      imgsFour: []
     }
   },
   created() {
@@ -52,6 +53,8 @@ export default {
           return { ...item, imageList: this.imgsTwo }
         } else if (item.id == '14') {
           return { ...item, imageList: this.imgsThree }
+        } else if (item.id == '15') {
+          return { ...item, imageList: this.imgsFour }
         }
         console.info(item)
         return item
@@ -66,6 +69,8 @@ export default {
       this.imgsTwo = imagesRequireContext2.keys().map((imagePath2) => imagesRequireContext2(imagePath2))
       const imagesRequireContext3 = require.context('@/assets/image/planThree', false, /\.png$|\.jpg$/)
       this.imgsThree = imagesRequireContext3.keys().map((imagePath3) => imagesRequireContext3(imagePath3))
+      const imagesRequireContext4 = require.context('@/assets/image/planFour', false, /\.png$|\.jpg$/)
+      this.imgsFour = imagesRequireContext4.keys().map((imagePath4) => imagesRequireContext4(imagePath4))
     },
     openFullscreen(index) {
       const img = this.$el.querySelectorAll('.main-image')[index].querySelector('img')
@@ -134,6 +139,18 @@ export default {
     :deep(.el-carousel__container) {
       height: px-to-rem(563);
     }
+    .image-wrapper {
+     height: px-to-rem(563); // 与 carousel 容器高度一致
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     .main-image {
+      height: 100%;
+      width: auto;
+      max-width: 100%;
+      object-fit: contain; // 保持图片比例,完整显示图片
+    }
+    }
   }
   .fullscreen-btn {
     position: absolute;

+ 1 - 1
src/views/water-station-popup/index.vue

@@ -195,7 +195,7 @@ export default {
              this.startTimer('realTimeVelocity',{
               value: this.swInfo.realTimeDischarge,
               callback: (newValue, amount, isIncrement) => {
-                this.swInfo.realTimeVelocity = (0.8 + Math.random() * 0.2).toFixed(2);
+                this.swInfo.realTimeVelocity = (this.swInfo.realTimeVelocity + Math.random() * 0.2).toFixed(2);
               }
             })
             const option = {