Skip to content

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

大屏问题部分修改

parent 7cec21c3
Hide whitespace changes
Inline Side-by-side
Showing with 106 additions and 17 deletions
src/components/screenDisplay.vue
View file @ c7b07a06
......@@ -456,7 +456,10 @@ import AMapLoader from "@amap/amap-jsapi-loader";
</div>
<div class="thirdLeftLayer_one">
<div class="titleStyleTwo"><p>电气柜监视</p></div>
<div class="carousel_content" v-if="alarmsImgList.length > 0">
<div v-if="alarmsLoading===true" class="loading-overlay21">
<div class="loader"></div>
</div>
<div class="carousel_content" v-else-if="alarmsImgList.length > 0">
<el-carousel>
<el-carousel-item v-for="(item,index) in alarmsImgList" :key="index">
<div class="eventTime_class">报警时间:{{item.eventTime}}</div>
......@@ -467,14 +470,19 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<div v-else class="noVideoData">暂无电气柜信息......</div>
</div>
<div class="thirdLeftLayer_two">
<div v-loading="loading">
<div class="title_row">
<div class="titleStyleTwoVideo"><p>循环泵听诊</p></div>
<div class="moreInfo" v-show="hasAudio" @click="PreviousAudio()">上一个</div>
<div class="moreInfo" v-show="hasAudio" @click="nextAudio()">下一个</div>
<!-- <div class="moreInfo" v-show="hasVideo" @click="moreVideo()">更多》</div>-->
<div class="title_row">
<div class="titleStyleTwoVideo"><p>循环泵听诊</p></div>
<div class="btn_row">
<div class="moreInfo" v-show="hasAudio" @click="PreviousAudio()">上一个</div>
<div class="moreInfo" v-show="hasAudio" @click="nextAudio()">下一个</div>
</div>
<div v-if="showAudio === true">
<!-- <div class="moreInfo" v-show="hasVideo" @click="moreVideo()">更多》</div>-->
</div>
<div v-if="audioLoading===true" class="loading-overlay25">
<div class="loader"></div>
</div>
<div v-else-if="showAudio === true" class="audio_content">
<div>
<div>
<div class="audio_title">{{audioTitle}}</div>
<div ref="waveform" style="width: 800px; height: 140px;"></div>
......@@ -489,14 +497,17 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<button @click="stopPlayAudioRegion">暂停播放区域</button>
</div>
</div>
<div v-else class="noVideoData">暂无循环泵听诊信息......</div>
</div>
<div v-else class="noVideoData">暂无循环泵听诊信息......</div>
</div>
</div>
<div class="thirdRightLayer">
<div class="thirdLeftLayer_one">
<div class="titleStyleTwo"><p>当日实时能耗数据</p></div>
<div class="secondLeftLayer_fourContent">
<div v-if="energyLoading===true" class="loading-overlay24">
<div class="loader"></div>
</div>
<div v-else class="secondLeftLayer_fourContent">
<div class="fourRow">
<div class="fourRow_title">{{stationName}}</div>
</div>
......@@ -523,12 +534,18 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<div class="fourRow">
<div class="fourRow_title2">{{stationName}}</div>
</div>
<div v-if="temStatisList.length > 0" class="secondLeftLayerP2" id="secondLeftLayerP2"></div>
<div v-else class="noVideoData">暂无管道光纤测漏温度信息......</div>
<div v-if="temLoading===true" class="loading-overlay23">
<div class="loader"></div>
</div>
<div v-else-if="!temStatisList || temStatisList.length < 1" class="noVideoData">暂无管道光纤测漏温度信息......</div>
<div class="secondLeftLayerP2" id="secondLeftLayerP2"></div>
</div>
<div class="thirdLeftLayer_one">
<div class="titleStyleTwo"><p>灭火器仪表监视</p></div>
<div v-if="fireList.length > 0" class="carousel_content">
<div v-if="fireLoading===true" class="loading-overlay22">
<div class="loader"></div>
</div>
<div v-else-if="fireList.length > 0" class="carousel_content">
<el-carousel>
<el-carousel-item v-for="(item,index) in fireList" :key="index">
<img :src="item.picUrl" class="carousel_img">
......@@ -774,8 +791,12 @@ export default defineComponent({
temList:[],
alarmsImgList: [],
audioStatus: false,
alarmsLoading: false,
temLoading: false,
fireLoading: false,
energyLoading: false,
wavesurfer: null,
loading: false,
audioLoading: false,
audioNum: 0,
hasAudio: false,
audioTitle: '',
......@@ -3232,34 +3253,40 @@ export default defineComponent({
},
// 获取港益换热站实时能耗数据
handleGetGYTransferRealData() {
this.energyLoading = true
const params = {
id: this.markerThree.stationId
}
getGYTransferRealData(params).then(res => {
this.thirdDayEnergyForm = res.data[0]
this.energyLoading = false
})
},
// 查询换热站灭火器卡片机照片轮
getFireExtinguisher() {
this.fireLoading = true
const params = {
stationId: this.markerThree.stationId
}
getFireExtinguisherApi(params).then(res => {
this.fireList = res.data
this.fireLoading = false
})
},
// 查询换电气柜监视数据
getElectricalCabinet() {
this.alarmsLoading = true
const params = {
stationId: this.markerThree.stationId
}
queryAlarmsImgList(params).then(res => {
this.alarmsImgList = res.data
this.alarmsLoading = false
})
},
// 查询循环泵听诊数据
queryAudioUrlList() {
this.loading = false
this.audioLoading = true
const params = {
stationId: this.markerThree.stationId
}
......@@ -3274,9 +3301,11 @@ export default defineComponent({
}else {
this.hasAudio = false
}
this.audioLoading = false
this.playAudio(this.AudioUrlIdList[this.audioNum])
}else {
this.showAudio = false
this.audioLoading = false
}
})
......@@ -3290,7 +3319,6 @@ export default defineComponent({
return
}
this.audioStatus = true
this.loading = true
// 如果有波形图，则摧毁现有波形图，渲染新的波形图
console.log('wavesurfer.value',this.wavesurfer)
if (this.wavesurfer) {
......@@ -3352,7 +3380,6 @@ export default defineComponent({
});
// 使用 WaveSurfer 加载音频流
this.wavesurfer.load(audioSrc);
this.loading = false
this.audioStatus = false
})
},
......@@ -3367,11 +3394,13 @@ export default defineComponent({
},
// 查询管道光纤测漏温度曲线统计图
getTemperatureStatistics() {
this.temLoading = true
const params = {
stationId: this.markerThree.stationId
}
getTemperatureStatisticsApi(params).then(res => {
if(res.code === 200){
this.temLoading = false
this.temStatisList = res.data
if(this.temStatisList && this.temStatisList.length > 0) {
this.temStaX = this.temStatisList[0].map(item => item.hour + '时')
......@@ -3384,6 +3413,7 @@ export default defineComponent({
this.temList.push({name: name, data: data})
})
console.log('this.temList',this.temList)
console.log('444444444444444444444',document.querySelector("#secondLeftLayerP2"))
if (document.querySelector("#secondLeftLayerP2")) {
var chartDom = document.getElementById("secondLeftLayerP2");
var myChart = echarts.init(chartDom);
......@@ -3681,6 +3711,7 @@ export default defineComponent({
var chartDom = document.getElementById("secondLeftLayerP2");
var myChart = echarts.init(chartDom);
var option;
console.log('333333333333333333333333333333',this.temList)
option = {
tooltip: {
trigger: "axis",
......@@ -4314,6 +4345,51 @@ export default defineComponent({
align-items: center;
z-index: 9999; /* 确保覆盖其他内容 */
}
.loading-overlay21 {
position: fixed;
top: 45%;
left: 9%;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* 确保覆盖其他内容 */
}
.loading-overlay22 {
position: fixed;
top: 81%;
left: 88%;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* 确保覆盖其他内容 */
}
.loading-overlay23 {
position: fixed;
top: 47%;
left: 88%;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* 确保覆盖其他内容 */
}
.loading-overlay24 {
position: fixed;
top: 13%;
left: 88%;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* 确保覆盖其他内容 */
}
.loading-overlay25 {
position: fixed;
top: 81%;
left: 9%;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* 确保覆盖其他内容 */
}
.loading-overlay3 {
position: fixed;
top: 72%;
......@@ -4661,6 +4737,19 @@ export default defineComponent({
border: rgba(129, 210, 230, 0.5) solid 1px;
//padding: 0 0 0 10px;
background: linear-gradient(318deg, rgba(29, 70, 128, 0.8) 0%, rgba(13, 23, 76, 0.8) 100%);
.title_row{
position: absolute;
width: 100%;
.btn_row{
display: flex;
justify-content: space-between;
padding-right: 10px;
width: 110px;
}
}
.audio_content{
padding-top: 35px;
}
}
.thirdLeftLayer_one{
width: 100%;
......
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