xiaomeng
/
wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'pc-master' of https://git.lihe-control.com/xiaomeng/wszhyWx into pc-master

pull/48/head
孙萌 2023-11-21 16:08:35 +08:00
parent 7075add91b ac738959dc
commit 31a3ee0da4
2 changed files with 150 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/views/page/largeScreen.vue
View File

@ -2,13 +2,13 @@
<div class="home"> <div class="home">
<div class="kuang"> <div class="kuang">
<div class="title">温室智慧云数据统计</div> <div class="title">温室智慧云数据统计</div>
<div class="auto_play"> <!-- <div class="auto_play">
<span :class="autoPlay ? '' : 'act'" @click="autoPlay1">手动播放</span> <span :class="autoPlay ? '' : 'act'" @click="autoPlay1">手动播放</span>
<span :class="autoPlay ? 'act' : ''" @click="autoPlay2">自动播放</span> <span :class="autoPlay ? 'act' : ''" @click="autoPlay2">自动播放</span>
</div> </div> -->
<div class="yuan"> <!-- <div class="yuan">
<img src="../../assets/img/big.png" alt="" /> <img src="../../assets/img/big.png" alt="" />
</div> </div> -->
<div class="calendar" v-if="time"> <div class="calendar" v-if="time">
<img src="../../assets/img/calendar.png" alt="" /> <img src="../../assets/img/calendar.png" alt="" />
<span>{{ getNowTime() }}</span> <span>{{ getNowTime() }}</span>
@ -316,7 +316,7 @@ export default {
player: null, player: null,
// 自动跳转和手动跳转切换 // 自动跳转和手动跳转切换
autoPlay: false, //false 手动切换 true 自动切换 //autoPlay: false, //false 手动切换 true 自动切换
typeList: [ typeList: [
{ {
@ -943,29 +943,29 @@ export default {
this.dataInit(userInfo.userid); this.dataInit(userInfo.userid);
this.get_sel_eqbyid(userInfo.userid); this.get_sel_eqbyid(userInfo.userid);
this.autoPlay = JSON.parse(localStorage.getItem("autoPlay")); // this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
console.log(this.autoPlay); // console.log(this.autoPlay);
if (this.autoPlay == false) { // if (this.autoPlay == false) {
clearInterval(this.timer_) && this.timer_; // clearInterval(this.timer_) && this.timer_;
} else { // } else {
this.timer_ = setTimeout(() => { // this.timer_ = setTimeout(() => {
this.$router.push({ path: "/largeScreen1" }); // this.$router.push({ path: "/largeScreen1" });
}, 20000); // }, 20000);
} // }
}, },
autoPlay1() { // autoPlay1() {
this.autoPlay = false; // this.autoPlay = false;
clearInterval(this.timer_) && this.timer_; // clearInterval(this.timer_) && this.timer_;
localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay)); // localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
}, // },
autoPlay2() { // autoPlay2() {
this.autoPlay = true; // this.autoPlay = true;
localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay)); // localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
this.timer_ = setTimeout(() => { // this.timer_ = setTimeout(() => {
this.$router.push({ path: "/largeScreen1" }); // this.$router.push({ path: "/largeScreen1" });
}, 20000); // }, 20000);
}, // },
createVideoNew(accessToken, url, index) { createVideoNew(accessToken, url, index) {
// console.log(accessToken, url, index, 111); // console.log(accessToken, url, index, 111);
@ -1309,7 +1309,7 @@ export default {
width: 4rem; width: 4rem;
height: calc(100% - 0.66rem); height: calc(100% - 0.66rem);
box-sizing: border-box; box-sizing: border-box;
padding-top: 0.56rem; // padding-top: 0.56rem;
position: absolute; position: absolute;
top: 0.56rem; top: 0.56rem;
left: 0.66rem; left: 0.66rem;

214
src/views/page/largeScreen1.vue
View File

@ -6,7 +6,10 @@
<div class="yuan" @click="toBack"> <div class="yuan" @click="toBack">
<img src="../../assets/img/small.png" alt="" /> <img src="../../assets/img/small.png" alt="" />
</div> </div>
<div class="auto_play">
<span :class="autoPlay ? '' : 'act'" @click="autoPlay1">手动播放</span>
<span :class="autoPlay ? 'act' : ''" @click="autoPlay2">自动播放</span>
</div>
<div class="calendar"> <div class="calendar">
<img src="../../assets/img/calendar.png" alt="" /> <img src="../../assets/img/calendar.png" alt="" />
<span>{{ getNowTime() }}</span> <span>{{ getNowTime() }}</span>
@ -22,15 +25,15 @@
<div class="drag_box" ref="drag_box"> <div class="drag_box" ref="drag_box">
<img class="drag_img" src="../../assets/img/map.png" alt="" /> <img class="drag_img" src="../../assets/img/map.png" alt="" />
<div class="pole_item pole_item_4"> <div class="pole_item pole_item_4">
<div class="p_title"> <div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" /> <img src="../../assets/img/wenshi.png" alt="" />
<span>控制中心</span> <span>控制中心</span>
</div> </div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" /> <img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div> </div>
<div class="popBox" v-for="(item, index) in popContentList" :key="index"> <div class="popBox" v-for="(item, index) in popContentList" :key="index">
<template> <template>
<div class="pole_item" :style="getNamePosition(item.id)" @click="handlerPop(item.id)"> <div class="pole_item" :style="getNamePosition(item.id)" @click="handlerPop(item.id)">
<div class="p_title"> <div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" /> <img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}温室</span> <span>{{ item.greenhouseName }}温室</span>
@ -51,7 +54,7 @@
</div> </div>
<img class="pole1" src="../../assets/img/pole.png" alt="" /> <img class="pole1" src="../../assets/img/pole.png" alt="" />
</div> --> </div> -->
<!-- <div class="pole_item pole_item5" @click="handlerPop(5)"> <!-- <div class="pole_item pole_item5" @click="handlerPop(5)">
<div class="p_title"> <div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" /> <img src="../../assets/img/wenshi.png" alt="" />
@ -79,17 +82,9 @@
<template> <template>
<!-- <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index" <!-- <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
v-if="popContentCurrent == index ? true : false"> --> v-if="popContentCurrent == index ? true : false"> -->
<div <div class="pop_content" :style="getTopOrLeft(item.id)"
class="pop_content" v-show="popContentCurrent == item.id ? true : false">
:style="getTopOrLeft(item.id)" <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
v-show="popContentCurrent == item.id ? true : false"
>
<img
class="close_img"
src="../../assets/img/close.png"
alt=""
@click="cancelHandler"
/>
<div class="p_video"> <div class="p_video">
<img :src="item.greenhouseImage" alt="" /> <img :src="item.greenhouseImage" alt="" />
</div> </div>
@ -116,20 +111,12 @@
</div> </div>
<div class="line" style="margin-top: 0.2rem"></div> <div class="line" style="margin-top: 0.2rem"></div>
<div class="icon_item scroll"> <div class="icon_item scroll">
<div <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
class="icon_item_child"
v-for="(item1, index1) in item.childList"
:key="index1"
>
<!-- <img :src="item.formula" alt=""> --> <!-- <img :src="item.formula" alt=""> -->
<img <img :src="require('../../assets/image/real-time-' +
:src=" item1.formula +
require('../../assets/image/real-time-' + '.png')
item1.formula + " alt="" />
'.png')
"
alt=""
/>
<div> <div>
<span>{{ item1.environmentDataId }}</span> <span>{{ item1.environmentDataId }}</span>
<span>{{ <span>{{
@ -652,22 +639,40 @@ export default {
} }
}, },
getNamePosition(id){ getNamePosition(id) {
if(id == 1){ if (id == 1) {
return "position: absolute;top: 41%;left: 13%;" return "position: absolute;top: 41%;left: 13%;"
}else if(id == 2){ } else if (id == 2) {
return "position: absolute;top: 10%;left: 24%;" return "position: absolute;top: 10%;left: 24%;"
}else if(id == 3){ } else if (id == 3) {
return "position: absolute;top: 22%;left: 40%;" return "position: absolute;top: 22%;left: 40%;"
}else if(id == 4){ } else if (id == 4) {
return "position: absolute;top: 29%;left: 76%;" return "position: absolute;top: 29%;left: 76%;"
}else if(id == 5){ } else if (id == 5) {
return "position: absolute;top: 61%;left: 62%;" return "position: absolute;top: 61%;left: 62%;"
}else if(id == 6){ } else if (id == 6) {
return "position: absolute;top: 1%;left: 62%;" return "position: absolute;top: 1%;left: 62%;"
} }
}, },
autoPlay1() {
let that = this
this.autoPlay = false;
clearInterval(that.timer2) && this.timer2;
localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
},
autoPlay2() {
this.autoPlay = true;
localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
this.timer2 = setInterval(() => {
this.popContentCurrent++;
if (this.popContentCurrent > 7) {
this.popContentCurrent = 0;
// this.$router.push({ path: "/largeScreen" });
}
}, 3000);
},
// 数据单位 // 数据单位
getTypeList(val) { getTypeList(val) {
let typeList1 = []; let typeList1 = [];
@ -705,10 +710,10 @@ export default {
} else { } else {
this.timer2 = setInterval(() => { this.timer2 = setInterval(() => {
this.popContentCurrent++; this.popContentCurrent++;
console.log('this.popContentCurrent',this.popContentCurrent); console.log('this.popContentCurrent', this.popContentCurrent);
if (this.popContentCurrent > 7) { if (this.popContentCurrent > 7) {
this.popContentCurrent = 0; this.popContentCurrent = 0;
this.$router.push({ path: "/largeScreen" }); // this.$router.push({ path: "/largeScreen" });
} }
}, 3000); }, 3000);
} }
@ -850,17 +855,52 @@ export default {
opacity: 0.89; opacity: 0.89;
text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25); text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
background: linear-gradient( background: linear-gradient(to bottom,
to bottom, #ffffff 45%,
#ffffff 45%, #e9f8ff 90%,
#e9f8ff 90%, #77baff 100%);
#77baff 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
text-align: center; text-align: center;
} }
.auto_play {
height: 0.56rem;
position: absolute;
top: 0.53rem;
left: 1.4rem;
z-index: 99999999;
display: flex;
align-items: center;
>span {
width: 0.8rem;
height: 0.3rem;
background: rgba(14, 91, 165, 0.1);
border: 1px solid rgba(97, 152, 209, 0.65);
margin-right: 0.1rem;
font-size: 0.18rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #70d0ee;
text-align: center;
line-height: 0.3rem;
cursor: pointer;
}
.act {
background: linear-gradient(-35deg,
#56a8d5 0%,
rgba(0, 55, 110, 0.75) 50%,
#56a8d5 100%);
border: 1px solid rgba(122, 225, 255, 0.75);
font-size: 0.18rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #fff;
}
}
.yuan { .yuan {
width: 0.56rem; width: 0.56rem;
height: 0.56rem; height: 0.56rem;
@ -874,7 +914,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
> img { >img {
width: 0.2rem; width: 0.2rem;
height: 0.2rem; height: 0.2rem;
} }
@ -890,26 +930,26 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
> img { >img {
width: 0.28rem; width: 0.28rem;
height: 0.3rem; height: 0.3rem;
} }
> span:nth-child(2) { >span:nth-child(2) {
font-size: 0.24rem; font-size: 0.24rem;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-weight: bold; font-weight: bold;
color: #7abaff; color: #7abaff;
} }
> span:nth-child(4) { >span:nth-child(4) {
font-size: 0.2rem; font-size: 0.2rem;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-weight: bold; font-weight: bold;
color: #7abaff; color: #7abaff;
} }
> span:nth-child(6) { >span:nth-child(6) {
font-size: 0.3rem; font-size: 0.3rem;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-weight: bold; font-weight: bold;
@ -935,25 +975,21 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
z-index: 99; z-index: 99;
-webkit-mask-image: linear-gradient( -webkit-mask-image: linear-gradient(90deg,
90deg, transparent 0%,
transparent 0%, blue 7%,
blue 7%, blue 87%,
blue 87%, transparent 97%);
transparent 97%
);
.map1 { .map1 {
width: 100%; width: 100%;
height: 100%; height: 100%;
// background: url('../assets/img/map.png') center no-repeat; // background: url('../assets/img/map.png') center no-repeat;
// background-size: 100% 100%; // background-size: 100% 100%;
-webkit-mask-image: linear-gradient( -webkit-mask-image: linear-gradient(transparent 4%,
transparent 4%, blue 15%,
blue 15%, blue 86%,
blue 86%, transparent 100%);
transparent 100%
);
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -961,23 +997,19 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
-webkit-mask-image: linear-gradient( -webkit-mask-image: linear-gradient(90deg,
90deg, transparent 4%,
transparent 4%, blue 18%,
blue 18%, blue 88%,
blue 88%, transparent 100%);
transparent 100%
);
.drag_img { .drag_img {
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-mask-image: linear-gradient( -webkit-mask-image: linear-gradient(transparent 0%,
transparent 0%, blue 13%,
blue 13%, blue 73%,
blue 73%, transparent 97%);
transparent 97%
);
} }
.pole_item_4 { .pole_item_4 {
@ -1003,13 +1035,13 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
> img { >img {
width: 0.32rem; width: 0.32rem;
height: 0.32rem; height: 0.32rem;
margin-right: 0.15rem; margin-right: 0.15rem;
} }
> span { >span {
font-size: 0.18rem; font-size: 0.18rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
@ -1085,7 +1117,7 @@ export default {
height: 2.8rem; height: 2.8rem;
margin: 0.2rem auto 0; margin: 0.2rem auto 0;
> img { >img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -1129,13 +1161,13 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding: 0 0.1rem 0 0.1rem; padding: 0 0.1rem 0 0.1rem;
> img { >img {
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
margin-right: 0.05rem; margin-right: 0.05rem;
} }
> span { >span {
font-size: 0.16rem; font-size: 0.16rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
@ -1154,20 +1186,20 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
> img { >img {
width: 0.22rem; width: 0.22rem;
height: 0.18rem; height: 0.18rem;
margin-right: 0.1rem; margin-right: 0.1rem;
} }
> span:nth-child(2) { >span:nth-child(2) {
font-size: 0.16rem; font-size: 0.16rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
} }
> span:nth-child(3) { >span:nth-child(3) {
font-size: 0.16rem; font-size: 0.16rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
@ -1191,24 +1223,24 @@ export default {
display: flex; display: flex;
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
> img { >img {
width: 0.6rem; width: 0.6rem;
height: 0.53rem; height: 0.53rem;
margin-right: 0.1rem; margin-right: 0.1rem;
} }
> div { >div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> span:nth-child(1) { >span:nth-child(1) {
font-size: 0.14rem; font-size: 0.14rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: bold; font-weight: bold;
color: #86d9ff; color: #86d9ff;
} }
> span:nth-child(2) { >span:nth-child(2) {
font-size: 0.2rem; font-size: 0.2rem;
font-family: AlibabaPuHuiTiB; font-family: AlibabaPuHuiTiB;
font-weight: bold; font-weight: bold;