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

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

@ -21,122 +21,126 @@
<div class="map1">
<div class="drag_box" ref="drag_box">
<img class="drag_img" src="../../assets/img/map.png" alt="" />
<div class="pole_item pole_item1" @click="handlerPop(2)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>2#温室</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">
<img src="../../assets/img/wenshi.png" alt="" />
<span>1#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
<div class="pole_item pole_item3" @click="handlerPop(4)">
<div class="p_title">
<img src="../../assets/img/wenshi1.png" alt="" />
<span>3#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole.png" alt="" />
</div>
<div class="pole_item pole_item4">
<div class="p_title">
<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">
<img src="../../assets/img/wenshi.png" alt="" />
<span>4#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
<div class="pole_item pole_item6" @click="handlerPop(6)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>5#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
<div class="pole_item pole_item7" @click="handlerPop(7)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>6#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
<div class="pole_item pole_item_4">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>控制中心</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
<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">
<img src="../../assets/img/wenshi.png" alt="" />
<span>1#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
<div class="pole_item pole_item3" @click="handlerPop(4)">
<div class="p_title">
<img src="../../assets/img/wenshi1.png" alt="" />
<span>3#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole.png" alt="" />
</div> -->
<!-- <div class="pole_item pole_item5" @click="handlerPop(5)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>4#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
<div class="pole_item pole_item6" @click="handlerPop(6)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>5#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
<div class="pole_item pole_item7" @click="handlerPop(7)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>6#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div> -->
</template>
<!-- 弹框 -->
<template v-for="(item, index) in popContentList">
<!-- <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
v-if="popContentCurrent == index ? true : false"> -->
<div
class="pop_content"
:style="getTopOrLeft(item.greenhouseName)"
:key="index"
v-if="popContentCurrent == item.id ? true : false"
>
<img
class="close_img"
src="../../assets/img/close.png"
alt=""
@click="cancelHandler"
/>
<div class="p_video">
<img :src="item.greenhouseImage" alt="" />
</div>
<div class="text">温室{{ item.greenhouseName }}#</div>
<div class="line"></div>
<div class="detail">
<!-- <div class="d_item">
<img src="../../assets/img/detail_img.png" alt="" />
<span>面积：{{ item.greenhouseArea }}㎡</span>
</div> -->
<div class="d_item">
<img src="../../assets/img/detail_img.png" alt="" />
<span>品种：{{ item.greenhouseVariety }}</span>
<!-- 弹框 -->
<template>
<!-- <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
v-if="popContentCurrent == index ? true : false"> -->
<div
class="pop_content"
:style="getTopOrLeft()"
v-show="popContentCurrent == item.id ? true : false"
>
<img
class="close_img"
src="../../assets/img/close.png"
alt=""
@click="cancelHandler"
/>
<div class="p_video">
<img :src="item.greenhouseImage" alt="" />
</div>
<div class="d_item">
<img src="../../assets/img/detail_img.png" alt="" />
<span>数量：{{ item.greenhouseNums }}株</span>
<div class="text">温室{{ item.greenhouseName }}#</div>
<div class="line"></div>
<div class="detail">
<!-- <div class="d_item">
<img src="../../assets/img/detail_img.png" alt="" />
<span>面积：{{ item.greenhouseArea }}㎡</span>
</div> -->
<div class="d_item">
<img src="../../assets/img/detail_img.png" alt="" />
<span>品种：{{ item.greenhouseVariety }}</span>
</div>
<div class="d_item">
<img src="../../assets/img/detail_img.png" alt="" />
<span>数量：{{ item.greenhouseNums }}株</span>
</div>
</div>
</div>
<div class="grow">
<img src="../../assets/img/grow_img.png" alt="" />
<span>生长阶段：</span>
<span>{{ item.growthStageName }}</span>
</div>
<div class="line" style="margin-top: 0.2rem"></div>
<div class="icon_item scroll">
<div
class="icon_item_child"
v-for="(item1, index1) in item.childList"
:key="index1"
>
<!-- <img :src="item.formula" alt=""> -->
<img
:src="
require('../../assets/image/real-time-' +
item1.formula +
'.png')
"
alt=""
/>
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList(item1.formula)
}}</span>
<div class="grow">
<img src="../../assets/img/grow_img.png" alt="" />
<span>生长阶段：</span>
<span>{{ item.growthStageName }}</span>
</div>
<div class="line" style="margin-top: 0.2rem"></div>
<div class="icon_item scroll">
<div
class="icon_item_child"
v-for="(item1, index1) in item.childList"
:key="index1"
>
<!-- <img :src="item.formula" alt=""> -->
<img
:src="
require('../../assets/image/real-time-' +
item1.formula +
'.png')
"
alt=""
/>
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList(item1.formula)
}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
</template>
</div>
</div>
</div>
</div>
@ -229,7 +233,7 @@ export default {
left_: 2,
popContentList: [],
popContentCurrent: -1,
popContentCurrent: 0,
// 自动跳转和手动跳转切换
autoPlay: false, //false 手动切换 true 自动切换
@ -611,7 +615,7 @@ export default {
// 根据用户id查询对应的设备大数据信息
dataInit(userid) {
this.api.Bigdata_getAllControl(userid).then((res) => {
// console.log("根据用户id查询对应的设备大数据信息", res);
console.log("根据用户id查询对应的设备大数据信息", res);
this.popContentList = res.data.data;
this.popContentList = this.popContentList.map((item) => {
return {
@ -632,26 +636,27 @@ export default {
});
},
getTopOrLeft(name) {
if (name == "二号") {
// return "top:1rem;left:6.2rem";
return "top:50%;left:50%;transform: translate(-50%,-50%);";
} else if (name == "一号") {
// return "top:3.5rem;left:3.8rem";
return "top:50%;left:50%;transform: translate(-50%,-50%);";
} else if (name == "3号") {
// return "top:2rem;left:9rem";
return "top:50%;left:50%;transform: translate(-50%,-50%);";
} else if (name == "4号") {
// return "top:2rem;left:9.3rem";
return "top:50%;left:50%;transform: translate(-50%,-50%);";
} else if (name == "5") {
// return "top:3.5rem;left:6.5rem";
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%);";
}
getTopOrLeft() {
return "top:50%;left:50%;transform: translate(-50%,-50%);";
// if (name == "二号") {
// // return "top:1rem;left:6.2rem";
// return "top:50%;left:50%;transform: translate(-50%,-50%);";
// } else if (name == "一号") {
// // return "top:3.5rem;left:3.8rem";
// return "top:50%;left:50%;transform: translate(-50%,-50%);";
// } else if (name == "3号") {
// // return "top:2rem;left:9rem";
// return "top:50%;left:50%;transform: translate(-50%,-50%);";
// } else if (name == "4号") {
// // return "top:2rem;left:9.3rem";
// return "top:50%;left:50%;transform: translate(-50%,-50%);";
// } else if (name == "5") {
// // return "top:3.5rem;left:6.5rem";
// 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;
this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
this.popContentCurrent = 0;
// this.popContentCurrent = 0;
if (this.autoPlay == false) {
clearInterval(that.timer2) && this.timer2;
} else {
this.timer2 = setInterval(() => {
this.popContentCurrent++;
console.log('this.popContentCurrent',this.popContentCurrent);
if (this.popContentCurrent > 7) {
this.popContentCurrent = 0;
this.$router.push({ path: "/largeScreen" });
@ -728,6 +734,7 @@ export default {
// },
handlerPop(id) {
console.log(id);
this.popContentCurrent = id;
},
@ -964,6 +971,12 @@ export default {
);
}
.pole_item_4 {
position: absolute;
top: 43%;
left: 42%;
}
.pole_item {
width: 1.45rem;
height: 1.8rem;
@ -1024,24 +1037,18 @@ export default {
}
.pole_item4 {
position: absolute;
top: 43%;
left: 42%;
}
.pole_item5 {
position: absolute;
top: 29%;
left: 76%;
}
.pole_item6 {
.pole_item5 {
position: absolute;
top: 61%;
left: 62%;
}
.pole_item7 {
.pole_item6 {
position: absolute;
top: 1%;
left: 62%;