Skip to content

W
web-project
Commit 9beb28fd authored by 张伯涛's avatar 张伯涛
Browse files
Options

大屏模块修改

parent 49f5cb9a
Show whitespace changes
Inline Side-by-side
Showing with 252 additions and 103 deletions
src/api/screenDisplay.js
View file @ 9beb28fd
//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
View file @ 9beb28fd
......@@ -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%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment