feat :采砂区弹窗

src/api/floodPreventionPlan.js

@@ -35,4 +35,11 @@ export function convertPptToImagesByPlanId(data){
     url: '/api/sddnWeiHe/floodPreventionPlan/convertPptToImagesByPlanId/'+data.id,
     method: 'get'
   })
+}
+export function downloadPptFileByUrl(data){
+    return request({
+    url: '/api/sddnWeiHe/floodPreventionPlan/downloadPptFileByUrl',
+    data,
+    method: 'post'
+  })
 }

src/views/announcement-management/index.vue

@@ -496,6 +496,9 @@ export default {
   :deep(.el-pagination__sizes .el-input .el-input__inner:hover) {
     border-color: #a9a9a9;
   }
+  :deep(.el-pagination__sizes .el-select){
+    margin-top: px-to-rem(-5);
+  }
   :deep(.el-table th.el-table__cell) {
     background-color: #f5f7fa;
   }

src/views/components/layerList/index.vue

@@ -158,7 +158,7 @@ export default {
       // ================== 选中 ==================
       if (isChecked) {
         if (node.type === 'plan') {
-          this.$globalEventBus.$emit('showPlanDialog',{ list: this.checkedNodes })
+          this.$globalEventBus.$emit('showPlanDialog', { list: this.checkedNodes })
           return
         }
         if (node.type === 'monitor') {
@@ -227,9 +227,9 @@ export default {
     },
     getFloodPlanList() {
       getFloodPreventionList().then((res) => {
-        const newItems = res.data.records.map((item)=>({...item,type:"plan",label:item.planName}))
-        this.treeData.forEach((item)=>{
-          if(item.id == '4'){
+        const newItems = res.data.records.map((item) => ({ ...item, type: 'plan', label: item.planName }))
+        this.treeData.forEach((item) => {
+          if (item.id == '4') {
             item.children = newItems
           }
         })
@@ -433,6 +433,17 @@ export default {
           },
           { template: false, offsetY: 0 }
         )
+      } else if (['3-1', '3-2', '3-3'].includes(layer.id)) {
+        // layer.bindPopup(
+        //   function (event) {
+        //     window.closePopupA = function () {
+        //       event.graphic.closePopup()
+        //     }
+        //     const popupHtml = getSitePopup(layer.id)
+        //     return popupHtml
+        //   },
+        //   { template: false, offsetY: 0 }
+        // )
       }
     },
     getMonitorData() {
@@ -537,19 +548,20 @@ export default {
         window.map.addLayer(csqGraphicsLayer)
       }
       const position = coorList[name]
-      const graphic = new this.mars3d.graphic.CylinderEntity({
-        id: name,
-        position,
+      const graphic = new this.mars3d.graphic.BillboardEntity({
+        position: position,
         style: {
-          length: lengthList[name],
-          topRadius: 20.0,
-          bottomRadius: 20.0,
-          color: '#85bc68',
-          opacity: 0.45,
-          clampToGround: true
+          image: require('@/assets/image/common/camera.png'),
+          scale: 0.8,
+          horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
+          verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM
         }
       })
       csqGraphicsLayer.addGraphic(graphic)
+      let that = this
+      graphic.on(this.mars3d.EventType.click, function () {
+        that.$globalEventBus.$emit('clickCsqModal', { title: name, position: position })
+      })
     },
     removeCsqLayer(name) {
       if (csqGraphicsLayer) {

src/views/csq-popup/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="csq-container" v-if="visible">
+    <div class="csq-popup-title">
+      <span class="title-text">{{ title }}</span>
+      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="closeModal" />
+    </div>
+    <div class="csq-popup-content">
+      <PieChart style="height: 2.4rem"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import PieChart from './pie-chart/index.vue'
+export default {
+  components: {
+    PieChart
+  },
+  data() {
+    return {
+      title: '采砂区',
+      visible: false,
+      popupStyle: {
+        position: 'absolute',
+        top: '0',
+        left: '0'
+      }
+    }
+  },
+  mounted() {
+    this.$globalEventBus.$on('clickCsqModal', (data) => {
+      this.visible = true
+      this.title = data.title
+    })
+  },
+  methods: {
+    showPopup(data) {
+      // 将笛卡尔坐标转换为屏幕坐标
+      const scene = window.map.scene
+      const cartesian = data.position
+      console.info(cartesian)
+       const cartesian3 = this.mars3d.LatLngPoint.fromArray([data.position.lng, data.position.lat, data.position.alt]).toCartesian();
+          const canvasPosition = this.mars3d.SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian3);
+      // const canvasPosition = this.mars3d.PointTrans.toWindowCoordinates(scene, cartesian)
+      console.info(canvasPosition)
+      if (canvasPosition) {
+        this.popupStyle = {
+          position: 'absolute',
+          left: `${canvasPosition.x}px`,
+          top: `${canvasPosition.y - 100}px`, // 向上偏移，避免遮挡点位
+          'z-index': 1000
+        }
+
+        this.visible = true
+      }
+    },
+    closeModal() {
+      this.visible = false
+    }
+  },
+  destroyed() {
+    this.$globalEventBus.$off('clickCsqModal')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.csq-container {
+  position: absolute;
+  top: 8%;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  width: px-to-rem(430);
+  z-index: 9999;
+  .csq-popup-title {
+    background: url('@/assets/image/common/popup_title_bg.png') no-repeat;
+    background-size: 100% 100%;
+    height: px-to-rem(39);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 px-to-rem(20);
+    font-size: px-to-rem(16);
+    color: #fff;
+    .title-text {
+      font-weight: bold;
+      margin-left: px-to-rem(20);
+    }
+  }
+  .csq-popup-content {
+    height: px-to-rem(262);
+    background: rgba(#233d6c, 0.8);
+    padding: px-to-rem(10);
+  }
+}
+</style>

src/views/csq-popup/pie-chart/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div ref="chart" class="pie-chart-container"></div>
+</template>
+
+<script>
+import { echartMixin } from '@/mixins'
+export default {
+  name: 'PieChart',
+  mixins: [echartMixin],
+  data() {
+    return {
+    }
+  },
+  methods: {
+    initChart() {
+      const option = {
+        backgroundColor: 'transparent',
+        legend: {
+          top: '4%',
+          itemGap: 80
+        },
+        color: ['#FFEEB1', '#0DC985'],
+        series: [
+          {
+            type: 'pie',
+            radius: '60%',
+            label: {
+              color:"#fff",
+              formatter: '{b} :{d}%'
+            },
+            center: ['50%', '58%'],
+            data: [
+              { value: 40, name: '已采砂总量' },
+              { value: 100, name: '采砂总量' }
+            ]
+          }
+        ]
+      }
+      this.chartObj.setOption(option)
+    },
+    pxToRem(px) {
+      return `${px / 100}rem`
+    }
+  }
+}
+</script>
+<style lang="scss">
+.pie-chart-container {
+}
+</style>

src/views/flood-prevention-plan/index.vue

@@ -26,9 +26,9 @@
     <el-table :data="tableData" border style="width: 100%" height="620">
       <el-table-column prop="planName" label="预案名称" align="center"> </el-table-column>
       <el-table-column prop="createrName" label="创建人" align="center"> </el-table-column>
-      <el-table-column prop="createTime" label="创建时间" align="center">
+      <el-table-column prop="createrTime" label="创建时间" align="center">
         <template slot-scope="scope">
-          {{ formatDate(scope.row.createTime) }}
+          {{ formatDate(scope.row.createrTime) }}
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
@@ -69,7 +69,7 @@
             :limit="1"
             :on-change="handleChange"
             :on-success="uploadSuccess"
-            :before-upload="beforeUpload"
+            :on-exceed="handleExceed"
             :file-list="fileList"
           >
             <el-button size="small" type="primary" class="primaryBtn">上传</el-button>
@@ -87,7 +87,7 @@
 
 <script>
 import moment from 'moment'
-import { getFloodPreventionList, toAddFloodPrevention, toUpdateFloodPrevention, toDelete } from '@/api/floodPreventionPlan'
+import { getFloodPreventionList, toAddFloodPrevention, toUpdateFloodPrevention, toDelete, downloadPptFileByUrl } from '@/api/floodPreventionPlan'
 export default {
   data() {
     return {
@@ -135,9 +135,11 @@ export default {
         pageSize: 10,
         pageNum: 1
       }
+      this.fetchData()
     },
-    beforeUpload(file){
-      return 
+    handleExceed(files, fileList) {
+      this.$message.warning('只能上传一个文件');
+      return
     },
     formatDate(date) {
       return moment(date).format('YYYY-MM-DD HH:mm:ss')
@@ -210,17 +212,32 @@ export default {
       this.dialogVisible = false
       this.isEditing = false
     },
-    handleDownLoad(item) {
-      const link = document.createElement('a')
-      const blob = new Blob([item.planFile],{type:'application/vnd.openxmlformats-officedocument.presentationml.presentation'})
-      const url = window.URL.createObjectURL(blob)
-      link.href = url
-      link.download = item.fileName
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
-      window.URL.revokeObjectURL(url)
-      this.$message.success('文件下载成功')
+    async handleDownLoad(item) {
+      try {
+        const response = await fetch(item.planFile)
+        if (!response.ok) throw new Error('网络响应不正常')
+
+        const blob = await response.blob()
+        const url = window.URL.createObjectURL(blob)
+
+        const link = document.createElement('a')
+        link.href = url
+        link.download = item.fileName
+        link.style.display = 'none'
+
+        document.body.appendChild(link)
+        link.click()
+
+        // 清理
+        setTimeout(() => {
+          document.body.removeChild(link)
+          window.URL.revokeObjectURL(url)
+        }, 100)
+
+        this.$message.success('文件下载成功')
+      } catch (error) {
+        console.error('下载失败:', error)
+      }
     },
     handleDelete(row) {
       this.$confirm('是否删除防汛预案？', '警告', {
@@ -293,6 +310,9 @@ export default {
   :deep(.el-pagination__sizes .el-input .el-input__inner:hover) {
     border-color: #a9a9a9;
   }
+  :deep(.el-pagination__sizes .el-select) {
+    margin-top: px-to-rem(-5);
+  }
   :deep(.el-table th.el-table__cell) {
     background-color: #f5f7fa;
   }

src/views/hydrological-station/hyInfo.vue

@@ -293,4 +293,7 @@ export default {
 :deep(.el-pager li.active) {
   background-color: rgba(240, 105, 106, 1) !important;
 }
+ :deep(.el-pagination__sizes .el-select){
+    margin-top: px-to-rem(-5);
+  }
 </style>

src/views/hydrological-station/jcInfo.vue

@@ -359,4 +359,7 @@ export default {
 :deep(.el-pager li.active) {
   background-color: rgba(240, 105, 106, 1) !important;
 }
+ :deep(.el-pagination__sizes .el-select){
+    margin-top: px-to-rem(-5);
+  }
 </style>

src/views/index.vue

@@ -22,6 +22,7 @@
           <InspectVideoPlay />
           <PlanDialog />
           <AnnounceDetailPopup />
+          <CsqPopup/>
         </div>
       </el-main>
     </el-container>
@@ -38,7 +39,7 @@ import SafetyInspection from './safety-inspection/index.vue'
 import ComprehensiveOverview from '@/views/comprehensive-overview/index'
 import HydrologicInfo from '@/views/hydrologic-info/index'
 import WaterStationPopup from '@/views/water-station-popup'
-
+import CsqPopup from './csq-popup/index.vue'
 import SmartEarlyWarning from '@/views/smart-early-warning/index'
 import PlanDialog from './components/layerList/planDialog.vue'
 import VideoPlay from './video-play-popup/index.vue'
@@ -61,7 +62,8 @@ export default {
     PlanDialog,
     VideoPlay,
     InspectVideoPlay,
-    AnnounceDetailPopup
+    AnnounceDetailPopup,
+    CsqPopup
   },
   data() {
     return {