reactor:水文站坐标点弹窗-水文统计接口+周边监控查询接口联调加功能实现

src/views/components/layerList/index.vue

@@ -27,7 +27,6 @@
 
 <script>
 import * as mars3d from 'mars3d'
-import { getHydrologicalList } from '@/api/hydrologicalStationApi'
 let layerCache = {}
 export default {
   name: 'LayerListView',
@@ -65,7 +64,7 @@ export default {
           label: '水文监测',
           children: [
             { id: '2-1', label: '水文监测点1', meta: { type: 'point', url: '/geojson/sw1.geojson' } },
-            { id: '2-2', label: '水文监测点2', meta: { type: 'point', url: '/geojson/sw2.geojson' } }
+            { id: '2-2', label: '水文监测点2', meta: { type: 'point', url: '/geojson/sw2.geojson' }}
           ]
         },
         {
@@ -94,7 +93,6 @@ export default {
   },
   created() {
     this.mainMenu = this.$route.params.menu
-    this.getHydrologicalList()
   },
   mounted() {
     this.$globalEventBus.$on('toggleLeftPanel', (val) => {
@@ -118,11 +116,6 @@ export default {
     }
   },
   methods: {
-    getHydrologicalList() {
-      getHydrologicalList().then((res) => {
-        console.info(res)
-      })
-    },
     //关闭防汛预案弹窗后取消选中
     cancelCheckNode(ids) {
       const currentCheckedKeys = this.$refs.treeRef.getCheckedKeys(true)
@@ -315,7 +308,6 @@ export default {
     },
     // 处理水文站数据
     handleData(isShow) {
-      console.log(isShow,11111111111)
       const nodeIds = ['2-1', '2-2']
       this.$nextTick(() => {
         nodeIds.forEach((id) => {

src/views/smart-early-warning/left.vue

@@ -21,12 +21,12 @@
                   <div class="list-content">
                     <div class="item" v-for="(item, index) in item.lists" :key="index">
                       <div class="left">
-                        <img :src="item.img" alt="" />
+                        <img :src="item.imgUrl" alt="" />
                       </div>
                       <div class="right">
-                        <div class="title">{{ item.title }}</div>
+                        <div class="title">{{ item.alarmBody }}</div>
                         <div class="txt">{{ item.address }}</div>
-                        <div class="txt">{{ item.date }}</div>
+                        <div class="txt">{{ item.alarmTime }}</div>
                         <div class="jzDate">{{ item.deadline }}</div>
                       </div>
                     </div>
@@ -68,23 +68,42 @@ export default {
           name: '乱建预警',
           lists: [
             {
-              img: ImgUrl,
-              title: '乱建预警',
-              address: '咸阳兴平仪空村',
-              date: '2025-01-15 14:00:00',
-              deadline: '剩余0天 00:28:12'
+              imgUrl: ImgUrl,
+              deviceCode:'43030400831327000100',
+              deviceName:'咸宁阳兴平仪空村综合机房',
+              channelName:'咸宁阳兴平仪空村综合机房梯次LY',
+              longitude:'112.985866',
+              latitude:'27.814898',
+              address: '咸宁阳兴平仪空村综合机房',
+              confidenceLevel:'0.80615',
+              orderId:'202508251210241338766566',
+              alarmBody:'流域乱建预警',
+              warningSourceName: 'AI预警',
+              warningTypeName: '四乱预警',
+              emergencyLevelName:'一级',
+              alarmTime:'2025-08-25 09:36:31'
             }
           ]
         },
         {
           name: '乱采预警',
           lists: [
-            {
+             {
               img: ImgUrl,
-              title: '乱采预警',
-              address: '咸阳兴平仪空村',
-              date: '2025-01-15 14:00:00',
-              deadline: '剩余0天 00:28:12'
+              title: '乱建预警',
+              deviceCode:'43030400831327000100',
+              deviceName:'咸宁阳兴平仪空村综合机房',
+              channelName:'咸宁阳兴平仪空村综合机房梯次LY',
+              longitude:'112.985866',
+              latitude:'27.814898',
+              address: '咸宁阳兴平仪空村综合机房',
+              confidenceLevel:'0.80615',
+              orderId:'202508251210241338766566',
+              alarmBody:'流域乱建预警',
+              warningSourceName: 'AI预警',
+              warningTypeName: '四乱预警',
+              emergencyLevelName:'一级',
+              alarmTime:'2025-08-25 09:36:31'
             }
           ]
         },
@@ -93,22 +112,42 @@ export default {
           lists: [
             {
               img: ImgUrl,
-              title: '乱堆预警',
-              address: '咸阳兴平仪空村',
-              date: '2025-01-15 14:00:00',
-              deadline: '剩余0天 00:28:12'
+              title: '乱建预警',
+              deviceCode:'43030400831327000100',
+              deviceName:'咸宁阳兴平仪空村综合机房',
+              channelName:'咸宁阳兴平仪空村综合机房梯次LY',
+              longitude:'112.985866',
+              latitude:'27.814898',
+              address: '咸宁阳兴平仪空村综合机房',
+              confidenceLevel:'0.80615',
+              orderId:'202508251210241338766566',
+              alarmBody:'流域乱建预警',
+              warningSourceName: 'AI预警',
+              warningTypeName: '四乱预警',
+              emergencyLevelName:'一级',
+              alarmTime:'2025-08-25 09:36:31'
             }
           ]
         },
         {
           name: '乱占预警',
           lists: [
-            {
+             {
               img: ImgUrl,
-              title: '乱占预警',
-              address: '咸阳兴平仪空村',
-              date: '2025-01-15 14:00:00',
-              deadline: '剩余0天 00:28:12'
+              title: '乱建预警',
+              deviceCode:'43030400831327000100',
+              deviceName:'咸宁阳兴平仪空村综合机房',
+              channelName:'咸宁阳兴平仪空村综合机房梯次LY',
+              longitude:'112.985866',
+              latitude:'27.814898',
+              address: '咸宁阳兴平仪空村综合机房',
+              confidenceLevel:'0.80615',
+              orderId:'202508251210241338766566',
+              alarmBody:'流域乱建预警',
+              warningSourceName: 'AI预警',
+              warningTypeName: '四乱预警',
+              emergencyLevelName:'一级',
+              alarmTime:'2025-08-25 09:36:31'
             }
           ]
         }

src/views/video-play-popup/index.vue

@@ -26,7 +26,7 @@ export default {
       visible: false,
       title: '巡查点',
       option: {
-        url: 'ws://10.157.200.5:9381/live/43010000831327000019_0_0_4f0fc0b6e1a44468a1986a0e2cbfa94b.flv',
+        url: '',
         isLive: true, //使用直播模式，会隐藏进度条和播放时间
         autoplay: true,
         muted: true, //是否静音

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

@@ -14,34 +14,34 @@
           <el-row :gutter="10">
             <el-col :span="8" class="label-col">
               <div class="label">实时高程：</div>
-              <div class="value"><span>300</span><span>m</span></div>
+              <div class="value"><span>{{swInfo.realTimeElevation}}</span><span>m</span></div>
             </el-col>
             <el-col :span="8" class="label-col">
               <div class="label">1小时雨量：</div>
-              <div class="value"><span>300</span><span>mm</span></div>
+              <div class="value"><span>{{swInfo.precipitationOneH}}</span><span>mm</span></div>
             </el-col>
             <el-col :span="8" class="label-col">
               <div class="label">实时流量：</div>
-              <div class="value"><span>300</span><span>m³/s</span></div>
+              <div class="value"><span>{{swInfo.realTimeDischarge}}</span><span>m³/s</span></div>
             </el-col>
           </el-row>
           <el-row :gutter="10">
             <el-col :span="8" class="label-col">
               <div class="label">昨日最高：</div>
-              <div class="value"><span>0</span><span>m</span></div>
+              <div class="value"><span>{{swInfo.maxElevationYesterday}}</span><span>m</span></div>
             </el-col>
             <el-col :span="8" class="label-col">
               <div class="label">当天雨量：</div>
-              <div class="value"><span>300</span><span>mm</span></div>
+              <div class="value"><span>{{swInfo.precipitationToday}}</span><span>mm</span></div>
             </el-col>
             <el-col :span="8" class="label-col">
               <div class="label">实时流速：</div>
-              <div class="value"><span>0</span><span>m³/s</span></div>
+              <div class="value"><span>{{swInfo.realTimeVelocity}}</span><span>m³/s</span></div>
             </el-col>
           </el-row>
         </div>
         <div class="info-chart">
-          <LineChart style="height: 2.05rem" />
+          <LineChart style="height: 2.05rem" :options="swOption" />
         </div>
       </div>
       <div class="monitor-container" v-else>
@@ -53,52 +53,126 @@
           <span>&nbsp;km&nbsp;</span>
           <el-button type="primary" size="mini" @click="search">查询</el-button>
         </div>
-        <div class="monitor-list">
-          <ul>
-            <li v-for="(item, index) in monitorList" :key="index">
-              <span>新建18米-点位32332432{{ item }}</span>
-            </li>
-          </ul>
-        </div>
-        <div class="monitor-video">
-          <!-- <EasyPlayer
-            :ref="item.videoId"
-            :playerName="item.sources[0].camera.name"
-            :videoUrl="item.sources[0].src"
-            class="video-player screenshot"
-            live
-            speed
-            :easyStretch="easyStretch"
-            :has-audio="!item.sources[0].src.includes('.flv')"
-            :reconnection="true"
-            @click.native.stop
-          /> -->
-        </div>
+        <template v-if="monitorList.length > 0">
+          <div class="monitor-list">
+            <ul>
+              <li v-for="(item, index) in monitorList" :key="index" :class="{active:activeIndex == index}">
+                <span  @click="toLoadVideo(item,index)">{{item.name}}</span>
+              </li>
+            </ul>
+            <div class="monitor-video">
+             <Artplayer :option="videoOption" :style="style" v-if="artShow"/>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="noData">
+            <img src="@/assets/image/comprehensive/noData.png" alt="" />
+            <div class="txt">暂无摄像头</div>
+          </div>
+        </template>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts'
 import LineChart from './line-chart'
-// import { getCameraDeviceList } from '@/api/cameraApi'
+import Artplayer from '@/components/video-player/video-player.vue'
 import { warning } from '@/utils'
+import { getMonitoringStatistics } from '@/api/monitoringDataApi'
+import flvjs from 'flv.js'
+import moment from 'moment'
 let graphicsLayer = null
 export default {
   name: 'WaterStationPopup',
-  components: { LineChart },
+  components: { LineChart,Artplayer },
   data() {
     return {
+      style: {
+        width: '480px',
+        height: '270px'
+      },
+      artShow:false,
+      videoOption: {
+        url: '',
+        isLive: true, //使用直播模式，会隐藏进度条和播放时间
+        autoplay: true,
+        muted: true, //是否静音
+        type: 'flv',
+        autoSize: true,
+        customType: {
+          flv: (video, url, art) => {
+            if (flvjs.isSupported()) {
+              if (art.flv) art.flv.destroy()
+              const flv = flvjs.createPlayer({ type: 'flv', url })
+              flv.attachMediaElement(video)
+              flv.load()
+              art.flv = flv
+              art.on('destroy', () => flv.destroy())
+            }
+          }
+        }
+      },
       visible: false,
       typeVal: '1',
       radius: '',
-      monitorList: [1, 2, 3, 4, 5, 6, 7, 9, 66, 67, 67, 76],
-      stationGraphic: {}
+      activeIndex:0,
+      monitorList: [],
+      stationGraphic: {},
+      swOption: {
+        backgroundColor: 'transparent',
+        color: ['#66DC95'],
+        grid: {
+          left: 16,
+          right: 16,
+          top: 30,
+          bottom: 0,
+          containLabel: true
+        },
+        textStyle: { color: '#fff' },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'none' },
+          textStyle: { color: '#fff' },
+          extraCssText: 'background:#2F5481; border-radius: 8px;border:none ',
+          formatter: (params) => {
+            return `${params[0].axisValue} 高程${params[0].data}m`
+          }
+        },
+        xAxis: [{ type: 'category', boundaryGap: false, data: ['08/20', '08/21', '08/22', '08/23', '08/24', '08/25'] }],
+        yAxis: [{ type: 'value', name: '高程(m)', splitLine: { show: false }, min: 380, max: 420 }],
+        series: [
+          {
+            name: '高程(m)',
+            type: 'line',
+            smooth: true,
+            symbol: 'emptyCircle',
+            symbolSize: 6,
+            lineStyle: { width: 2 },
+            emphasis: { scale: 1.5 },
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(102,220,149,0)' },
+                { offset: 0, color: ' rgba(102,220,149,0.25)' }
+              ])
+            },
+            data: [401, 398, 391, 410, 395, 400, 396]
+          }
+        ]
+      },
+      swInfo: {}
     }
   },
   mounted() {
     this.$globalEventBus.$on('clickWaterStation', (data) => {
-      this.visible = true
+      if(data.layer.id == '2-2'){
+        this.getMonitoringStatistics(19)
+      }else{
+         this.getMonitoringStatistics(18)
+      }
       this.stationGraphic = data.graphic
     })
   },
@@ -112,11 +186,160 @@ export default {
         warning('请输入查询半径')
         return
       }
+      this.getAroundAnalysisOwnList()
       this.addCameraToMap()
-      // const params = { longitude: 113.07634141539151, latitude: 28.18518024316094, visualRadius: this.radius * 1000 }
-      // getCameraDeviceList(params).then((res) => {
-      //   console.log(res)
-      // })
+    },
+    getMonitoringStatistics(id) {
+      getMonitoringStatistics({ stationId: id }).then((res) => {
+        if (res.data) {
+          this.visible = true
+          this.swInfo = res.data.info 
+          const option = {
+            backgroundColor: 'transparent',
+            color: ['#66DC95'],
+            grid: {
+              left: 16,
+              right: 16,
+              top: 20,
+              bottom: 8,
+              containLabel: true
+            },
+            tooltip: {
+              trigger: 'axis',
+              backgroundColor: 'transparent',
+              borderColor: 'transparent',
+              borderWidth: 0,
+              extraCssText: 'box-shadow: none;',
+              formatter: function (params) {
+                let value = params[params.length - 1].value
+                let date = params[params.length - 1].name
+                return `<div style="background-color: #2F5481; color: white; padding: 5px; border-radius: 5px;">
+                        ${date}  高程${value}m
+                   </div>`
+              }
+            },
+            xAxis: [
+              {
+                type: 'category',
+                boundaryGap: false,
+                data: res.data.statisticalArray,
+                axisLine: {
+                  lineStyle: {
+                    color: '#374672',
+                    width: 1 //这里是为了突出显示加上的
+                  }
+                },
+                axisTick: {
+                  show: false
+                },
+                lineStyle: {
+                  color: '#374672',
+                  width: 1
+                },
+                axisLabel: {
+                  formatter: function (value) {
+                    return moment(value).format('MM/DD')
+                  }
+                }
+              }
+            ],
+            yAxis: [
+              {
+                type: 'value',
+                splitLine: { show: false },
+                // min: 380,
+                // interval: 10,
+                axisLine: {
+                  lineStyle: {
+                    color: '#374672',
+                    width: 1 //这里是为了突出显示加上的
+                  }
+                }
+              }
+            ],
+            series: [
+              {
+                type: 'line',
+                smooth: true,
+                lineStyle: { width: 1, color: '#66DC95' },
+                symbol: 'circle',
+                symbolSize: 7,
+                itemStyle: {
+                  normal: {
+                    color: '#ffff', // 点颜色
+                    borderColor: '#66DC95', // 点的边框颜色
+                    borderWidth: 2 // 点的边框宽度
+                  },
+                  emphasis: {
+                    borderWidth: 4, // 鼠标悬停时边框加粗
+                    shadowBlur: 10, // 阴影模糊大小，实现放大的效果
+                    shadowColor: 'rgba(0, 0, 0, 0.3)' // 阴影颜色
+                  }
+                },
+                areaStyle: {
+                  opacity: 0.8,
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: 'rgba(102,220,149,0)' },
+                    { offset: 0, color: 'rgba(102,220,149,0.25)' }
+                  ])
+                },
+                data: res.data.realTimeElevation
+              }
+            ]
+          }
+          this.swOption = option
+        }
+      })
+    },
+    getAroundAnalysisOwnList() {
+      window
+        .requestSDK(
+          '/ttbdm/aroundAnalysisOwn/getAroundAnalysisOwnList',
+          {
+            longitude: this.stationGraphic.coordinate[0],
+            latitude: this.stationGraphic.coordinate[1],
+            radius: this.radius,
+            type: '1',
+            pageNum: 1,
+            pageSize: 5,
+            notFilterSameLngLat: true
+          },
+          {},
+          'post'
+        )
+        .then((res) => {
+          if(res.code == 200){
+            this.monitorList = res.data
+            if(res.data.length > 0){
+              this.toLoadVideo(this.monitorList[0],0)
+            }
+          }
+        })
+    },
+    toLoadVideo(row,index){
+      this.activeIndex = index
+      this.artShow = false
+       window
+          .requestSDK(
+            '/ttvideo/video/player/getVideoRealtimeUrl',
+            {
+              deviceCode: row.id,
+              channelCode: row.channelCode,
+              netType: '1',
+              protocolType: 5,
+              streamType: 1
+            },
+            {},
+            'post'
+          )
+          .then((res) => {
+             if(res.code == 200){
+              this.artShow = true
+              this.$set(this.videoOption,'url',res.data.streamUrl)
+            }else if(res.code == 4001){
+              this.$message.warning('设备离线')
+            }
+          })
     },
     addCameraToMap() {
       if (graphicsLayer) {
@@ -237,9 +460,25 @@ export default {
             &:hover {
               background-color: #498ee3;
             }
+            &.active{
+              background-color: #498ee3;
+            }
           }
         }
       }
+      .noData {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        img {
+          margin-top: px-to-rem(70);
+          margin-bottom: px-to-rem(20);
+        }
+        .txt {
+          color: #fff;
+          font-size: px-to-rem(14);
+        }
+      }
     }
   }
 }

src/views/water-station-popup/line-chart/index.vue

@@ -4,10 +4,12 @@
 
 <script>
 import { echartMixin } from '@/mixins'
-import * as echarts from 'echarts'
 export default {
   name: 'LineChart',
   mixins: [echartMixin],
+  props:{
+    options:Object
+  },
   data() {
     return {
       seriesData: []
@@ -15,49 +17,7 @@ export default {
   },
   methods: {
     initChart() {
-      const option = {
-        backgroundColor: 'transparent',
-        color: ['#66DC95'],
-        grid: {
-          left: 16,
-          right: 16,
-          top: 30,
-          bottom: 0,
-          containLabel: true
-        },
-        textStyle: { color: '#fff' },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { type: 'none' },
-          textStyle: { color: '#fff' },
-          extraCssText: 'background:#2F5481; border-radius: 8px;border:none ',
-          formatter: (params) => {
-            return `${params[0].axisValue} 高程${params[0].data}m`
-          }
-        },
-        xAxis: [{ type: 'category', boundaryGap: false, data: ['08/20', '08/21', '08/22', '08/23', '08/24', '08/25'] }],
-        yAxis: [{ type: 'value', name: '高程(m)', splitLine: { show: false }, min: 380, max: 420 }],
-        series: [
-          {
-            name: '高程(m)',
-            type: 'line',
-            smooth: true,
-            symbol: 'emptyCircle',
-            symbolSize: 6,
-            lineStyle: { width: 2 },
-            emphasis: { scale: 1.5 },
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 1, color: 'rgba(102,220,149,0)' },
-                { offset: 0, color: ' rgba(102,220,149,0.25)' }
-              ])
-            },
-            data: [401, 398, 391, 410, 395, 400, 396]
-          }
-        ]
-      }
-      this.chartObj.setOption(option)
+      this.chartObj.setOption(this.options)
     }
   }
 }