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

~

pull/44/head
pangdundun 2023-11-20 10:46:32 +08:00
parent ba1b7594fc
commit 9db095d1e1
1 changed files with 148 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,14 +21,23 @@
<div class="map1"> <div class="map1">
<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_item1" @click="handlerPop(2)"> <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>2#温室</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="pole_item pole_item2" @click="handlerPop(3)"> <div class="popBox" v-for="(item, index) in popContentList" :key="index">
<template>
<div class="pole_item" :class="'pole_item' + (index+1)" @click="handlerPop(item.id)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
<!-- <div class="pole_item pole_item2" @click="handlerPop(3)">
<div class="p_title"> <div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" /> <img src="../../assets/img/wenshi.png" alt="" />
<span>1#温室</span> <span>1#温室</span>
@ -41,15 +50,9 @@
<span>3#温室</span> <span>3#温室</span>
</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_item4">
<div class="p_title"> <!-- <div class="pole_item pole_item5" @click="handlerPop(5)">
<img src="../../assets/img/wenshi.png" alt="" />
<span>控制中心</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
<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="" />
<span>4#温室</span> <span>4#温室</span>
@ -69,17 +72,17 @@
<span>6#温室</span> <span>6#温室</span>
</div> </div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" /> <img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div> </div> -->
</template>
<!-- 弹框 --> <!-- 弹框 -->
<template v-for="(item, index) in popContentList"> <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" class="pop_content"
:style="getTopOrLeft(item.greenhouseName)" :style="getTopOrLeft()"
:key="index" v-show="popContentCurrent == item.id ? true : false"
v-if="popContentCurrent == item.id ? true : false"
> >
<img <img
class="close_img" class="close_img"
@ -141,6 +144,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <!-- <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<div class="pop_content"> <div class="pop_content">
<div class="p_video"> <div class="p_video">
@ -229,7 +233,7 @@ export default {
left_: 2, left_: 2,
popContentList: [], popContentList: [],
popContentCurrent: -1, popContentCurrent: 0,
// 自动跳转和手动跳转切换 // 自动跳转和手动跳转切换
autoPlay: false, //false 手动切换 true 自动切换 autoPlay: false, //false 手动切换 true 自动切换
@ -611,7 +615,7 @@ export default {
// 根据用户id查询对应的设备大数据信息 // 根据用户id查询对应的设备大数据信息
dataInit(userid) { dataInit(userid) {
this.api.Bigdata_getAllControl(userid).then((res) => { this.api.Bigdata_getAllControl(userid).then((res) => {
// console.log("根据用户id查询对应的设备大数据信息", res); console.log("根据用户id查询对应的设备大数据信息", res);
this.popContentList = res.data.data; this.popContentList = res.data.data;
this.popContentList = this.popContentList.map((item) => { this.popContentList = this.popContentList.map((item) => {
return { return {
@ -632,26 +636,27 @@ export default {
}); });
}, },
getTopOrLeft(name) { getTopOrLeft() {
if (name == "二号") {
// return "top:1rem;left:6.2rem";
return "top:50%;left:50%;transform: translate(-50%,-50%);"; return "top:50%;left:50%;transform: translate(-50%,-50%);";
} else if (name == "一号") { // if (name == "二号") {
// return "top:3.5rem;left:3.8rem"; // // return "top:1rem;left:6.2rem";
return "top:50%;left:50%;transform: translate(-50%,-50%);"; // return "top:50%;left:50%;transform: translate(-50%,-50%);";
} else if (name == "3号") { // } else if (name == "一号") {
// return "top:2rem;left:9rem"; // // return "top:3.5rem;left:3.8rem";
return "top:50%;left:50%;transform: translate(-50%,-50%);"; // return "top:50%;left:50%;transform: translate(-50%,-50%);";
} else if (name == "4号") { // } else if (name == "3号") {
// return "top:2rem;left:9.3rem"; // // return "top:2rem;left:9rem";
return "top:50%;left:50%;transform: translate(-50%,-50%);"; // return "top:50%;left:50%;transform: translate(-50%,-50%);";
} else if (name == "5") { // } else if (name == "4号") {
// return "top:3.5rem;left:6.5rem"; // // return "top:2rem;left:9.3rem";
return "top:50%;left:50%;transform: translate(-50%,-50%);"; // return "top:50%;left:50%;transform: translate(-50%,-50%);";
} else if (name == "6") { // } else if (name == "5") {
// return "top:0.8rem;left:7.2rem"; // // return "top:3.5rem;left:6.5rem";
return "top:50%;left:50%;transform: translate(-50%,-50%);"; // return "top:50%;left:50%;transform: translate(-50%,-50%);";
} // } else if (name == "6") {
// // return "top:0.8rem;left:7.2rem";
// return "top:50%;left:50%;transform: translate(-50%,-50%);";
// }
}, },
// 数据单位 // 数据单位
@ -685,12 +690,13 @@ export default {
let that = this; let that = this;
this.autoPlay = JSON.parse(localStorage.getItem("autoPlay")); this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
this.popContentCurrent = 0; // this.popContentCurrent = 0;
if (this.autoPlay == false) { if (this.autoPlay == false) {
clearInterval(that.timer2) && this.timer2; clearInterval(that.timer2) && this.timer2;
} else { } else {
this.timer2 = setInterval(() => { this.timer2 = setInterval(() => {
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" });
@ -728,6 +734,7 @@ export default {
// }, // },
handlerPop(id) { handlerPop(id) {
console.log(id);
this.popContentCurrent = id; this.popContentCurrent = id;
}, },
@ -964,6 +971,12 @@ export default {
); );
} }
.pole_item_4 {
position: absolute;
top: 43%;
left: 42%;
}
.pole_item { .pole_item {
width: 1.45rem; width: 1.45rem;
height: 1.8rem; height: 1.8rem;
@ -1024,24 +1037,18 @@ export default {
} }
.pole_item4 { .pole_item4 {
position: absolute;
top: 43%;
left: 42%;
}
.pole_item5 {
position: absolute; position: absolute;
top: 29%; top: 29%;
left: 76%; left: 76%;
} }
.pole_item6 { .pole_item5 {
position: absolute; position: absolute;
top: 61%; top: 61%;
left: 62%; left: 62%;
} }
.pole_item7 { .pole_item6 {
position: absolute; position: absolute;
top: 1%; top: 1%;
left: 62%; left: 62%;