Skip to content

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

大屏问题初步修改

parent 11620f95
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 15 deletions
src/components/screenDisplay.vue
View file @ 9c888277
......@@ -323,7 +323,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<div style="width: 100%">
<!-- <div class="secondLeftLayer_title"><p>热源趋势曲线</p></div>-->
<div class="titleStyleTwo"><p>热源趋势曲线</p></div>
<div style="display: flex;align-items: center;justify-content: end; padding-right: 2%">
<div style="display: flex;align-items: center;justify-content: left; padding: 0 2% 0">
<ul v-for="(item,index) in heatSourceBtnList" :key="index">
<li
:class="[item.value === heatType ? 'activeBtn' : 'normalBtn']"
......@@ -379,7 +379,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<div >
<!-- <div class="secondLeftLayer_title"><p>机组排名</p></div>-->
<div class="titleStyleTwo"><p>机组排名</p></div>
<div style="display: flex;align-items: center;justify-content: end">
<div style="display: flex;align-items: center;justify-content: left;padding: 0 2%">
<ul v-for="(item,index) in rankTypeBtnList" :key="index">
<li
:class="[item.value === RankType ? 'activeBtn' : 'normalBtn']"
......@@ -429,6 +429,10 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<div class="moreInfo" @click="nextVideo()">下一个</div>
<div class="moreInfo" @click="moreVideo()">更多》</div>
</div>
<div v-if="videoLoading" class="videoLoading-overlay">
<div class="videoLoading-spinner"></div>
<p> 视频加载中，请稍后......</p>
</div>
<video-components :divWidth="divWidth" :divHeight="divHeight" :queryParams="queryParams" :stopParams="stopParams"/>
</div>
......@@ -579,6 +583,7 @@ export default defineComponent({
},
data() {
return {
videoLoading: false,
videoNum: 0,
queryParams: '',
divWidth: '',
......@@ -969,7 +974,7 @@ export default defineComponent({
supplyId: centerId,
// index: index,
};
_this.thirdLevelPageFun() // 第三级页面方法
_this.thirdLevelPageFun2() // 第三级页面方法
}
});
}, 500);
......@@ -1228,8 +1233,9 @@ export default defineComponent({
// res.data[0].latitude,
// ]);
_this.supplylistList[index].openF = true;
_this.fullscreenLoading = false;
}
_this.fullscreenLoading = false;
} else {
_this.fullscreenLoading = false;
ElMessage.error(res.message);
......@@ -2952,18 +2958,68 @@ export default defineComponent({
}
})
},
// 第三级页面方法
// 点击第二级供热站
thirdLevelPageFun() {
this.queryParams = ''
this.stopParams += 1
console.log('kkkkkkkkkkkkkkkkkkkkk')
this.handleGetGYTransferRealData() // 获取港益换热站实时能耗数据
this.handleGetGYTransferAlarmData() // 获取港益换热站报警数据
this.getGYTransferVideo() // 获取港益换热站视频数据
},
// 点击第三级换热站
thirdLevelPageFun2() {
this.handleGetGYTransferRealData() // 获取港益换热站实时能耗数据
this.handleGetGYTransferAlarmData() // 获取港益换热站报警数据
this.getGYTransferVideo2() // 获取港益换热站视频数据
},
getVideoAPI(num) {
const params = {
id: this.transferList[num].stationId
}
GYTransferVideo(params).then(res => {
if(res.success === true) {
this.showVideo = true
const list = res.data
this.VideoInfo.playVideoList = []
// 检查 list 是否为数组
if (Array.isArray(list)) {
this.VideoInfo.playVideoList = [];
list.forEach(video => {
var videoId = video.videoId.replaceAll('-', '');
this.VideoInfo.playVideoList.push(videoId);
});
}
const videoList = []
videoList.push(this.VideoInfo.playVideoList[this.videoNum])
this.getDivWidth()
this.queryParams = JSON.stringify(videoList)
setTimeout(() => {
this.videoLoading = false
}, 2000)
}else {
// ElMessage({
// message: res.data,
// type: 'warning'
// })
num += 1
this.getVideoAPI(num)
}
})
},
// 获取港益换热站视频数据
getGYTransferVideo() {
this.videoLoading = true
this.videoNum = 0
// this.markerThree.stationId = _this.transferList[0].stationId
this.getVideoAPI(0)
},
getGYTransferVideo2() {
this.videoNum = 0
const params = {
id: this.markerThree.stationId
// id: '9C9D13FA-BA07-4394-8441-55F98F160EDA'
// id: '9C9D13FA-BA07-4394-8441-55F98F160EDA'
}
GYTransferVideo(params).then(res => {
......@@ -2973,6 +3029,8 @@ export default defineComponent({
message: res.data,
type: 'warning'
});
}else {
this.videoLoading = true
}
this.showVideo = true
......@@ -2987,14 +3045,13 @@ export default defineComponent({
this.VideoInfo.playVideoList.push(videoId);
});
}
// list.forEach(video => {
// var videoId = video.videoId.replaceAll('-', '');
// this.VideoInfo.playVideoList.push(videoId);
// })
const videoList = []
videoList.push(this.VideoInfo.playVideoList[this.videoNum])
this.getDivWidth()
this.queryParams = JSON.stringify(videoList)
setTimeout(() => {
this.videoLoading = false
}, 2000)
})
},
getDivWidth() {
......@@ -3910,6 +3967,71 @@ export default defineComponent({
});
</script>
<style scoped lang="scss">
.videoLoading-overlay {
position: fixed;
top: 5px;
left: 5px;
width: 21%;
height: 32%;
background-color: rgba(230, 253, 260, 0.3);//rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1000;
p {
margin-top: 60px;
font-size: 26px;
color: #29d78b;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.videoLoading-spinner {
position: relative;
width: 106px;
height: 56px;
background-image: linear-gradient(#29d78b 50px, transparent 0),
linear-gradient(#29d78b 50px, transparent 0),
linear-gradient(#29d78b 50px, transparent 0),
linear-gradient(#29d78b 50px, transparent 0),
radial-gradient(circle 14px, #29d78b 100%, transparent 0);
background-size: 48px 15px, 15px 35px, 15px 35px, 25px 15px, 28px 28px;
background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
background-repeat: no-repeat;
transform: rotate(-45deg);
&::after,
&::before {
content: "";
position: absolute;
left: -45px;
top: -10px;
width: 56px;
height: 56px;
border: 6px solid #29d78b;
border-radius: 50%;
background-repeat: no-repeat;
background-image: linear-gradient(#29d78b 64px, transparent 0),
linear-gradient(#29d78b 66px, transparent 0),
radial-gradient(circle 4px, #29d78b 100%, transparent 0);
background-size: 40px 1px, 1px 40px, 8px 8px;
background-position: center center;
-webkit-animation: rotation 0.3s linear infinite;
animation: rotation 0.3s linear infinite;
}
&::before {
left: 25px;
top: 60px;
}
}
}
.alarmInfo{
width: 800px;
maxheight: 550px;
......@@ -3930,7 +4052,7 @@ export default defineComponent({
background: linear-gradient(318deg, rgba(29, 70, 128, 0.8) 0%, rgba(13, 23, 76, 0.8) 100%);
color: white;
position: absolute;
z-index: 9;
z-index: 11;
//left: 13%;
//top: 10%;
}
......@@ -4094,14 +4216,12 @@ export default defineComponent({
background-color: #6D6E73;
color: white;
border: 1px solid #6D6E73;
//padding: 2px 18px;
padding:2px 32px 2px 4px;
padding: 2px 18px;
}
.normalBtn{
cursor: pointer;
border: 1px solid #6D6E73;
padding:2px 32px 2px 4px;
//padding: 2px 18px;
padding: 2px 18px;
background-color: white;
color: #6D6E73;
}
......
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