大屏模块修改

src/api/screenDisplay.js

 //import {axios, base} from './request'
 import http from './http'
+import httpTwo from './httpTwo'
 
 //登录获取token
 // export const getToken = params => {
@@ -43,6 +44,30 @@ export const getForecast = params => {
     console.log(error);
   })
 }
+//查询换热站灭火器卡片机照片轮播
+export const getFireExtinguisherApi = item => {
+  return httpTwo.get(`/busFireExtinguisher/queryImgList?stationId=${item.stationId}`).then(res => res).catch(function (error) {
+    console.log(error);
+  })
+}
+//查询换热站温度告警数据
+export const queryAlarmsImgList = item => {
+  return httpTwo.get(`/bustransfertemperaturealarm/queryAlarmsImgList?stationId=${item.stationId}`).then(res => res).catch(function (error) {
+    console.log(error);
+  })
+}
+//查询管道光纤测漏温度曲线统计图
+export const getTemperatureStatisticsApi = item => {
+  return httpTwo.get(`/buspipelinetemperature/getTemperatureStatistics?stationId=${item.stationId}`).then(res => res).catch(function (error) {
+    console.log(error);
+  })
+}
+//查询换热站音频声波轮播
+export const queryAudioUrlListApi = item => {
+  return httpTwo.get(`/buscirculatingpump/queryAudioUrlList?stationId=${item.stationId}`).then(res => res).catch(function (error) {
+    console.log(error);
+  })
+}
 
 export const getPlanIdApi = params => {
   return http.post(`/api/HIK/getPlanId`,params).then(res => res).catch(function (error) {

src/components/screenDisplay.vue

@@ -456,11 +456,31 @@ import AMapLoader from "@amap/amap-jsapi-loader";
         </div>
         <div class="thirdLeftLayer_one">
           <div class="titleStyleTwo"><p>电气柜监视</p></div>
-          <div class="noVideoData">暂无监控信息......</div>
+          <div class="carousel_content">
+            <el-carousel>
+              <el-carousel-item v-for="(item,index) in alarmsImgList" :key="index">
+                <img :src="item.imageUrl" class="carousel_img">
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+<!--          <div class="noVideoData">暂无监控信息......</div>-->
         </div>
         <div class="thirdLeftLayer_one">
           <div class="titleStyleTwo"><p>循环泵听诊</p></div>
-          <div class="noVideoData">暂无监控信息......</div>
+          <div v-loading="loading">
+
+            <div ref="waveform" style="width: 800px; height: 149px;"></div>
+            <!-- 时间轴容器 -->
+            <div ref="timeline" style="width: 100%; height: 30px;"></div>
+          </div>
+          <div class="details-item">
+            <span>音频:</span>
+            <audio ref="audioPlayer" controls></audio>
+            <!--          <button @click="playAudio">获取音频</button>-->
+            <button @click="playAudioRegion">播放区域</button>
+            <button @click="stopPlayAudioRegion">暂停播放区域</button>
+          </div>
+<!--          <div class="noVideoData">暂无监控信息......</div>-->
         </div>
       </div>
       <div class="thirdRightLayer">
@@ -494,7 +514,14 @@ import AMapLoader from "@amap/amap-jsapi-loader";
         </div>
         <div class="thirdLeftLayer_one">
           <div class="titleStyleTwo"><p>灭火器仪表监视</p></div>
-          <div class="noVideoData">暂无监控信息......</div>
+          <div class="carousel_content">
+            <el-carousel>
+              <el-carousel-item v-for="(item,index) in fireList" :key="index">
+                <img :src="item.picUrl" class="carousel_img">
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+<!--          <div class="noVideoData">暂无监控信息......</div>-->
         </div>
       </div>
       <div class="bottomLayerTwo">
@@ -586,11 +613,16 @@ import {
   getGYTransferRealData,
   getGYTransferAlarmData,
   GYTransferVideo,
-  getPlanIdApi,
+  getPlanIdApi, getFireExtinguisherApi, queryAlarmsImgList, getTemperatureStatisticsApi, queryAudioUrlListApi,
 } from "../api/screenDisplay";
 import moment from 'moment'
-import {defineComponent} from "vue";
+import {defineComponent, watch} from "vue";
 import store from "@/store/index.js";
+import {handleGetAIToken} from "@/views/AIStation/AItoken.js";
+import {getAudio} from "@/api/AIStation/RecyclePump.js";
+import WaveSurfer from "wavesurfer.js";
+import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.js";
+import TimelinePlugin from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
 export default defineComponent({
   components: {
     videoComponents,
@@ -606,7 +638,6 @@ export default defineComponent({
         this.secondPageData()
 
       }else if(newV === 3) {
-        this.handleGetPipingTrend();
       }
     },
   },
@@ -724,6 +755,13 @@ export default defineComponent({
       rightLayer4Nodata: true,
       mapBack: null,
       markerThree: {},
+      fireList: [],
+      temStatisList: [],
+      temList:[],
+      alarmsImgList: [],
+      audioStatus: false,
+      wavesurfer: null,
+      loading: false,
       mapBackPostion: [{ lan: "38.854713", lon: "117.481685" }],
       fullscreenLoading: false,
     };
@@ -748,6 +786,7 @@ export default defineComponent({
         timeOff = true;
       }
     }, 1000); // 每秒更新一次时间
+    this.performActions()
   },
   mounted: function mounted() {
     this.login();
@@ -756,6 +795,13 @@ export default defineComponent({
     };
   },
   methods: {
+    async performActions() {
+      try {
+        await handleGetAIToken(); // 等待 handleGetAIToken 完成
+      } catch (error) {
+        console.error('处理 Token 时出错:', error);
+      }
+    },
     thirdLevelDblclick(stationId) {
       console.log('stationId',stationId)
       const params = {
@@ -2289,101 +2335,6 @@ export default defineComponent({
       const hours = String(date.getHours()).padStart(2, '0');
       return `${hours}时`;
     },
-    handleGetPipingTrend() {
-      const nowDate = moment(new Date()).format('YYYY-MM-DD')
-      const StartTime = nowDate + ' 00:00:00'
-      const EndTime = nowDate + ' 23:59:59'
-      const params = {
-        StartTime: StartTime,
-        EndTime: EndTime,
-        CenterId: this.mapBack.centerId,
-      }
-      getGYSupplyWaterTrend(params).then(res => {
-        if(res.data && res.data.length > 0) {
-          this.trendList = res.data
-          const params = [
-            [
-              {
-                supplyName: "数据1",
-                waterRecord: 0,
-                gatherTime: "2024/9/25 1:00:00"
-              },
-              {
-                supplyName: "数据1",
-                waterRecord: 0,
-                gatherTime: "2024/9/25 2:00:00"
-              },
-              {
-                supplyName: "数据1",
-                waterRecord: 0,
-                gatherTime: "2024/9/25 3:00:00"
-              },
-              {
-                supplyName: "数据1",
-                waterRecord: 0,
-                gatherTime: "2024/9/25 4:00:00"
-              },
-              {
-                supplyName: "数据1",
-                waterRecord: 0,
-                gatherTime: "2024/9/25 5:00:00"
-              },
-              {
-                supplyName: "数据1",
-                waterRecord: 0,
-                gatherTime: "2024/9/25 6:00:00"
-              },
-            ],
-            [
-              {
-                supplyName: "数据2",
-                waterRecord: 0,
-                gatherTime: "2024/9/25 1:00:00"
-              },
-              {
-                supplyName: "数据2",
-                waterRecord: 0,
-                gatherTime: "2024/9/25 2:00:00"
-              },
-              {
-                supplyName: "数据2",
-                waterRecord: 0,
-                gatherTime: "2024/9/25 3:00:00"
-              },
-              {
-                supplyName: "数据2",
-                waterRecord: 0,
-                gatherTime: "2024/9/25 4:00:00"
-              },
-              {
-                supplyName: "数据2",
-                waterRecord: 0,
-                gatherTime: "2024/9/25 5:00:00"
-              },
-              {
-                supplyName: "数据2",
-                waterRecord: 0,
-                gatherTime: "2024/9/25 6:00:00"
-              },
-            ]
-          ]
-          this.trendList = params
-          this.trendY = []
-          for (let i = 0; i < this.trendList.length; i++) {
-            const name = this.trendList[i][0].supplyName
-            const data = this.trendList[i].map(item => item.waterRecord)
-            const yItem = {name: name, data:data}
-            this.trendY.push(yItem)
-          }
-          if (document.querySelector("#secondLeftLayerP2")) {
-            var chartDom = document.getElementById("secondLeftLayerP2");
-            var myChart = echarts.init(chartDom);
-            myChart.dispose()
-            this.echartInitPiping();
-          }
-        }
-      })
-    },
     // 一次侧补水量曲线
     async handleGetGYSupplyWaterTrend() {
       const nowDate = moment(new Date()).format('YYYY-MM-DD')
@@ -3071,11 +3022,19 @@ export default defineComponent({
       this.handleGetGYTransferRealData() // 获取港益换热站实时能耗数据
       this.handleGetGYTransferAlarmData()  // 获取港益换热站报警数据
       this.getGYTransferVideo() // 获取港益换热站视频数据
+      this.getFireExtinguisher() // 查询换热站灭火器卡片机照片轮
+      this.getElectricalCabinet() // 查询换电气柜监视数据
+      this.queryAudioUrlList() // 查询循环泵听诊数据
+      this.getTemperatureStatistics() // 查询管道光纤测漏温度曲线统计图
     },
     // 点击第三级换热站
     thirdLevelPageFun2() {
       this.handleGetGYTransferRealData() // 获取港益换热站实时能耗数据
       this.handleGetGYTransferAlarmData()  // 获取港益换热站报警数据
+      this.getFireExtinguisher() // 查询换热站灭火器卡片机照片轮
+      this.getElectricalCabinet() // 查询换电气柜监视数据
+      this.queryAudioUrlList() // 查询循环泵听诊数据
+      this.getTemperatureStatistics() // 查询管道光纤测漏温度曲线统计图
       this.getGYTransferVideo2() // 获取港益换热站视频数据
     },
     getVideoAPI(num) {
@@ -3242,6 +3201,150 @@ export default defineComponent({
         this.thirdDayEnergyForm = res.data[0]
       })
     },
+    // 查询换热站灭火器卡片机照片轮
+    getFireExtinguisher() {
+      const params = {
+        stationId: this.markerThree.stationId
+      }
+      getFireExtinguisherApi(params).then(res => {
+        this.fireList = res.data
+      })
+    },
+    // 查询换电气柜监视数据
+    getElectricalCabinet() {
+      const params = {
+        stationId: this.markerThree.stationId
+      }
+      queryAlarmsImgList(params).then(res => {
+        this.alarmsImgList = res.data
+      })
+    },
+    // 查询循环泵听诊数据
+    queryAudioUrlList() {
+      const params = {
+        stationId: this.markerThree.stationId
+      }
+      queryAudioUrlListApi(params).then(res => {
+        if(res.code === 200 && res.data.length > 0){
+          this.AudioUrlIdList = res.data.map(item => item.businessId)
+          this.playAudio(this.AudioUrlIdList[0])
+        }
+
+      })
+
+    },
+    /** 获取音频*/
+    playAudio(item) {
+      if(this.audioStatus !== false){
+        console.log("当前播放的音频zt",this.audioStatus)
+        console.log("-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-")
+        return
+      }
+      this.audioStatus = true
+      this.loading = true
+  // 如果有波形图，则摧毁现有波形图，渲染新的波形图
+  console.log('wavesurfer.value',this.wavesurfer)
+  if (this.wavesurfer) {
+    this.wavesurfer.destroy();
+  }
+  getAudio(item).then(async res => {
+    const audioSrc = URL.createObjectURL(new Blob([res]));
+    // 播放器和波形图赋值
+    this.$refs.audioPlayer.src = audioSrc;
+    // 创建 WaveSurfer 实例
+    this.wavesurfer = WaveSurfer.create({
+      container: this.$refs.waveform,
+      // 未播放波形的颜色
+      waveColor: 'violet',
+      // 已播放波形的颜色
+      progressColor: 'purple',
+      // 波形图的高度，单位为px
+      height: 150,
+      // 波形条的宽度
+      barWidth: 2,
+      responsive: true,
+      normalize: true,
+      plugins: [
+        // 区域选择插件
+        RegionsPlugin.create(
+            {
+              regionsMinLength: 2,
+              regions: [
+                {
+                  start: 5,
+                  end: 15,
+                  loop: false,
+                  color: 'hsla(200, 50%, 70%, 0.4)',
+                  minLength: 1,
+
+                }
+              ],
+              // 拖动选择
+              dragSelection: {
+                slop: 5
+              }
+            }
+        ),
+        // 时间轴插件
+        TimelinePlugin.create({
+          container: this.$refs.timeline,
+          fontSize: 14,
+          //主要时间标签颜色
+          primaryColor: "#9191a5",
+          //主要时间文字颜色
+          primaryFontColor: "#9191a5",
+          //次要时间标签颜色
+          secondaryColor: "#9191a5",
+          //次要时间文字颜色
+          secondaryFontColor: "#9191a5",
+        })
+      ]
+    });
+    // 使用 WaveSurfer 加载音频流
+    this.wavesurfer.load(audioSrc);
+    this.loading = false
+    this.audioStatus = false
+  })
+},
+    /** 播放区域*/
+    playAudioRegion() {
+      let region = Object.values(this.wavesurfer.regions.list)[0];
+      region.play();
+    },
+    /** 停止播放区域*/
+    stopPlayAudioRegion() {
+      this.wavesurfer.pause();
+      },
+      // 查询管道光纤测漏温度曲线统计图
+    getTemperatureStatistics() {
+      const params = {
+        stationId: this.markerThree.stationId
+      }
+      getTemperatureStatisticsApi(params).then(res => {
+        if(res.code === 200){
+          this.temStatisList = res.data
+          if(this.temStatisList && this.temStatisList.length > 0) {
+            this.temStaX = this.temStatisList[0].map(item => item.hour + '时')
+            // this.temStaX = this.temStatisList[0].map(item => this.formatTime(item.time))
+            console.log('this.temStaX',this.temStaX)
+            this.temList = []
+            this.temStatisList.forEach(item => {
+              const name = item[0].name
+              const data = item.map(child => child.temperature)
+              this.temList.push({name: name, data: data})
+            })
+            console.log('this.temList',this.temList)
+            if (document.querySelector("#secondLeftLayerP2")) {
+              var chartDom = document.getElementById("secondLeftLayerP2");
+              var myChart = echarts.init(chartDom);
+              myChart.dispose()
+              this.echartInitPiping();
+            }
+          }
+        }
+      })
+
+    },
     // 获取港益换热站报警数据
     handleGetGYTransferAlarmData(){
       const params = {
@@ -3534,7 +3637,7 @@ export default defineComponent({
         },
         xAxis: {
           type: 'category',
-          data: this.trendXP,
+          data: this.temStaX,
           axisLabel: {
             color: "#ffffff",
             fontSize: "10px",
@@ -3573,7 +3676,7 @@ export default defineComponent({
         //     type: 'line'
         //   }
         // ]
-        series: this.trendY.map(series => ({
+        series: this.temList.map(series => ({
           name: series.name,
           type: 'line',
           data: series.data
@@ -4109,6 +4212,26 @@ export default defineComponent({
 });
 </script>
 <style scoped lang="scss">
+.details-item {
+  width: 600px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+.carousel_content{
+  ::v-deep .el-carousel__container{
+    height: 270px!important;
+  }
+  ::v-deep .el-carousel__indicators--horizontal{
+    width: 100%;
+    text-align: center;
+  }
+  .carousel_img{
+    width: 100%;
+    height: 100%;
+  }
+}
 .loading-overlay {
   position: fixed;
   top: 12%;
@@ -4467,6 +4590,7 @@ export default defineComponent({
   font-size: 20px;
 }
 .thirdLeftLayer_one{
+  overflow: auto;
   width: 100%;
   margin-bottom: 11px;
   height: 32%;