Merge pull request 'pc-master' (#71) from pc-master into portal

Reviewed-on: #71
portal
xiaomeng 2023-12-11 09:27:55 +00:00
commit 62c52c5ba3
9 changed files with 11356 additions and 353 deletions

10724
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -2370,6 +2370,14 @@
background: transparent;
}
.vrcode .header .header-right {
width: 500px;
}
.vrcode .header .header-center {
width: calc(100% - 500px - 373px);
}
.vrcode .el-menu {
border-right: none;
}
@ -3306,3 +3314,20 @@
.el-button span {
color: #606266;
}
.return-btn {
margin: 0 8px;
min-width: 120px;
padding: 0 20px;
border-radius: 3px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
cursor: pointer;
background: #00BB88;
}

View File

@ -2538,6 +2538,14 @@
}
.vrcode {
.header{
.header-right{
width: 500px;
}
.header-center{
width: calc(100% - 500px - 373px);
}
}
.el-menu {
border-right: none;
}
@ -3499,3 +3507,20 @@
color: #606266;
}
.return-btn {
// width: 120px;
margin: 0 8px;
min-width: 120px;
padding: 0 20px;
border-radius: 3px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
cursor: pointer;
background: #00BB88;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 26 MiB

View File

@ -115,7 +115,7 @@ export default {
min-width: 1553px;
overflow: auto;
background: url(../assets/image/background.jpg) no-repeat;
background-size: 1920px 1080px;
background-size:cover;
background-position: center top;
.return-btn {
// width: 120px;

View File

@ -72,7 +72,7 @@ export default {
{ name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
//systemManage systemManage
{ name: '管理', router: '', routerList: [''], img: require('../assets/image/header-img6.png') },
{ name: '生成二维码', router: 'setsuyuan', index: 1, routerList: ['setsuyuan'], img: require('../assets/image/header-img4.png') },
{ name: '大数据', router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
],
@ -90,7 +90,7 @@ export default {
loading: true,//
IDTimer: null,
deviceId:'',
limitUserId:''
limitUserId:[]
}
},
watch: {
@ -140,7 +140,21 @@ export default {
let userId = userInfo.userid
this.api.user_getjurisdiction(userId).then(res => {
if (res.data.code == 200) {
this.limitUserId = res.data.data[0].id;
this.limitUserId = res.data.data;
const foundObject = this.limitUserId.find(item => item.id == 3);
const foundName = this.headerList.findIndex(item => item.name == '二维码追溯');
console.log(foundObject,foundName,123456);
if(foundObject){
if(foundName==-1){
this.headerList.push({ name: '二维码追溯', router: 'setsuyuan', index: 1, routerList: ['setsuyuan'], img: require('../assets/image/header-img4.png') })
}
}else{
if(foundName!=-1){
this.headerList.splice(foundName,1)
}
}
}
})
},
@ -271,7 +285,8 @@ export default {
return
} else if (item.router != this.routerNow && !item.http) {
if(this.limitUserId == 0) return this.$message('您当前没有权限查看!')
const foundObject = this.limitUserId.find(item => item.id == 2);
if( !foundObject) return this.$message('您当前没有权限查看!')
this.$router.push({ name: item.router })
}
} else {

View File

@ -42,9 +42,17 @@
<div class="weather">
<div>
<marquee behavior="" direction="" scrollamount="3">
<div class="item" v-for="(item, index) in weatherDataList" :key="index">
<img :src="require(`../../assets/image/real-time-${item.formula}.png`)
" alt="" />
<div
class="item"
v-for="(item, index) in weatherDataList"
:key="index"
>
<img
:src="
require(`../../assets/image/real-time-${item.formula}.png`)
"
alt=""
/>
<span>{{ item.environmentDataId }} : </span>
<span>{{
item.environmentData + getTypeList(item.formula)
@ -60,7 +68,11 @@
<div class="e_title">温室环境数据</div>
<div class="detail">
<!-- <div class="title_child">一号温室</div> -->
<vue-seamless class="e_content" :data="list" :class-option="defaultOption">
<vue-seamless
class="e_content"
:data="list"
:class-option="defaultOption"
>
<div class="item" v-for="(el, index) in list" :key="index">
<!-- <img :src="el.formula" alt=""> -->
<img :src="el.img" alt="" />
@ -84,7 +96,10 @@
<div class="thisWeekTemperature">
<div class="e_title">本周温度统计</div>
<div class="thisWeekTemperature_echart" id="thisWeekTemperature_echart"></div>
<div
class="thisWeekTemperature_echart"
id="thisWeekTemperature_echart"
></div>
</div>
</div>
<div class="middle">
@ -92,23 +107,81 @@
<div class="map1">
<div class="drag_box" ref="drag_box" v-show="limitUserId == 1">
<img class="drag_img" src="../../assets/img/map.png" alt="" />
<img class="axis_1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
<img class="axis_2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
<img class="axis_3" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
<img class="axis_4" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
<img class="axis_5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
<img class="axis_6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
<img class="axis_7" src="../../assets/img/axis2.png" alt="" @click="handlerAxis_1" />
<img
class="axis_1"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_1"
/>
<img
class="axis_2"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_1"
/>
<img
class="axis_3"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_1"
/>
<img
class="axis_4"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_1"
/>
<img
class="axis_5"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_1"
/>
<img
class="axis_6"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_1"
/>
<img
class="axis_7"
src="../../assets/img/axis2.png"
alt=""
@click="handlerAxis_1"
/>
</div>
<div class="drag_box1" ref="drag_box1" v-show="limitUserId == 2">
<img class="drag_img" src="../../assets/img/map1.png" alt="" />
<img class="axis_init" :class="'axis_' + (index + 8)" src="../../assets/img/axis1.png"
:style="'left:' + (48.5 + index * 4.1) + '%'" alt="" @click="handlerAxis_2" v-for="(i, index) in 10"
:key="index + '_1'" />
<img
class="axis_init"
:class="'axis_' + (index + 8)"
src="../../assets/img/axis1.png"
:style="'left:' + (44.5 + index * 4.1) + '%'"
alt=""
@click="handlerAxis_2"
v-for="(i, index) in 10"
:key="index + '_1'"
/>
<img class="axis_init1" :class="'axis_' + (index1 + 17)" src="../../assets/img/axis1.png"
:style="'top:' + (22 + index1 * 0.105) + '%' + ';' + 'left:' + (5 + index1 * 3.3) + '%' + ';'" alt=""
@click="handlerAxis_2" v-for="(i, index1) in 25" :key="index1 + '_2'" />
<img
class="axis_init1"
:class="'axis_' + (index1 + 17)"
src="../../assets/img/axis1.png"
:style="
'top:' +
(22 + index1 * 0.105) +
'%' +
';' +
'left:' +
(8.25 + index1 * 3.3) +
'%' +
';'
"
alt=""
@click="handlerAxis_2"
v-for="(i, index1) in 24"
:key="index1 + '_2'"
/>
</div>
</div>
</div>
@ -119,9 +192,17 @@
<div class="liveVideo_content">
<div class="swiper-container mySwiper_video">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index">
<div
class="swiper-slide swiper-slide_video"
v-for="(item, index) in get_sel_eqbyid_list"
:key="index"
>
<div class="monitor" :id="'monitor' + item.number">
<div ref="videoPlayer" class="video-js" :id="'video-js' + item.number"></div>
<div
ref="videoPlayer"
class="video-js"
:id="'video-js' + item.number"
></div>
</div>
<div class="c_bottom">{{ item.deviceTypeName }}</div>
</div>
@ -140,14 +221,25 @@
<div class="device_detail">
<div class="swiper_timer">
<div>
<div class="swiper-container middle_disasterWarningAnalysis" :style="styleContainer">
<div
class="swiper-container middle_disasterWarningAnalysis"
:style="styleContainer"
>
<div class="swiper-wrapper">
<div :class="(limitUserId == 1 ? current : current1) == index
<div
:class="
(limitUserId == 1 ? current : current1) == index
? 'swiper-slide swiper-slide2'
: 'swiper-slide swiper-slide1'
" v-for="(item, index) in dataList" :key="index" :style="styleItem"
@click="getCurrent(index, item)">
{{ item.greenhouseName + (limitUserId == 1 ? "温室" : '') }}
"
v-for="(item, index) in dataList"
:key="index"
:style="styleItem"
@click="getCurrent(index, item)"
>
{{
item.greenhouseName + (limitUserId == 1 ? "温室" : "")
}}
</div>
</div>
</div>
@ -162,7 +254,6 @@
</div>
<div class="device_content scroll">
<!-- 丽水 -->
<div class="content_item" v-if="limitUserId == 1">
<div class="i_title" v-if="fanStatus.open != 0">
@ -184,32 +275,47 @@
<div class="i_content">
<div class="i_content_item">
<span>1#风机</span>
<span :style="fanStatus.status[0] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[0] == 1 ? "打开" :
"关闭" }}</span>
<span
:style="fanStatus.status[0] == 1 ? '' : 'color:#86C2FF;'"
>{{ fanStatus.status[0] == 1 ? "打开" : "关闭" }}</span
>
<span class="line"></span>
<span>2#风机</span>
<span :style="fanStatus.status[1] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[1] == 1 ? "打开" :
"关闭" }}</span>
<span
:style="fanStatus.status[1] == 1 ? '' : 'color:#86C2FF;'"
>{{ fanStatus.status[1] == 1 ? "打开" : "关闭" }}</span
>
</div>
<div class="line1"></div>
<div class="i_content_item">
<span>3#风机</span>
<span :style="fanStatus.status[2] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[2] == 1 ? "打开" :
"关闭" }}</span>
<span
:style="fanStatus.status[2] == 1 ? '' : 'color:#86C2FF;'"
>{{ fanStatus.status[2] == 1 ? "打开" : "关闭" }}</span
>
<span class="line"></span>
<span>4#风机</span>
<span :style="fanStatus.status[3] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[3] == 1 ? "打开" :
"关闭" }}</span>
<span
:style="fanStatus.status[3] == 1 ? '' : 'color:#86C2FF;'"
>{{ fanStatus.status[3] == 1 ? "打开" : "关闭" }}</span
>
</div>
<div class="line1"></div>
<div class="i_content_item" style="width: 50%">
<span>5#风机</span>
<span :style="fanStatus.status[4] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[4] == 1 ? "打开" :
"关闭" }}</span>
<span
:style="fanStatus.status[4] == 1 ? '' : 'color:#86C2FF;'"
>{{ fanStatus.status[4] == 1 ? "打开" : "关闭" }}</span
>
<span class="line"></span>
</div>
</div>
<div class="i_title_" style="margin-top: 0.2rem" v-for="(item, index) in statusList" :key="index">
<div
class="i_title_"
style="margin-top: 0.2rem"
v-for="(item, index) in statusList"
:key="index"
>
<template v-if="item.open != 0">
<img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.name }}</span>
@ -232,15 +338,27 @@
</div>
<!-- 东北 -->
<div class="content_item" v-if="limitUserId == 2" style="margin-top: 0.05rem;">
<div v-for="(item,index) in fiveControlList" :key="index" style="margin-bottom: 0.15rem;">
<div
class="content_item"
v-if="limitUserId == 2"
style="margin-top: 0.05rem"
>
<div
v-for="(item, index) in fiveControlList"
:key="index"
style="margin-bottom: 0.15rem"
>
<div class="i_title" v-if="item.controlState != 0">
<img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.title }}</span>
<span class="line"></span>
<span>{{item.controlState == 1 ? "自动控制" : "手机控制"}}</span>
<span>{{
item.controlState == 1 ? "自动控制" : "手机控制"
}}</span>
<span class="line"></span>
<i class="progress" v-if="Number(item.progress) == ''">{{ item.progress }}%</i>
<i class="progress" v-if="Number(item.progress) == ''"
>进度{{ item.progress }}%</i
>
<span>菜单</span>
</div>
<div class="i_title" v-else>
@ -253,7 +371,6 @@
</div>
</div>
</div>
</div>
</div>
</div>
@ -711,57 +828,54 @@ export default {
},
],
limitUserId: '',
limitUserId: "",
//
fiveControlList: [{
title: '加温水泵',
fiveControlList: [
{
title: "加温水泵",
controlState: 0,
num: '1000',
close_btn: false
num: "1000",
close_btn: false,
},
{
title: '地热风机',
title: "地热风机",
controlState: 0,
num: '1002',
close_btn: false
num: "1002",
close_btn: false,
},
{
title: '上风口',
title: "上风口",
controlState: 0,
num: '1004',
num: "1004",
close_btn: true,
progress_num: '1006',
progress: ''
progress_num: "1006",
progress: "",
},
{
title: '下风口',
title: "下风口",
controlState: 0,
num: '1007',
num: "1007",
close_btn: true,
progress_num: '1009',
progress: ''
progress_num: "1009",
progress: "",
},
{
title: '卷被',
title: "卷被",
controlState: 0,
num: '1010',
close_btn: true
num: "1010",
close_btn: true,
},
{
title: '除雪',
title: "除雪",
controlState: 0,
num: '1013',
close_btn: false
num: "1013",
close_btn: false,
},
]
],
};
},
mounted() {
this.login();
this.getTime();
@ -812,7 +926,6 @@ export default {
this.get_readControl_getState(2023112911050004);
this.getWeatherData(2023112911050004);
}
}
});
},
@ -994,14 +1107,15 @@ export default {
// console.log(this.statusList);
//
this.fiveControlList.forEach(el => {
this.fiveControlList.forEach((el) => {
el.controlState = res.data.data[el.num];
if (el.progress_num) {
el.progress = res.data.data[el.progress_num];
}
})
});
}
});0
});
0;
},
//
@ -1046,7 +1160,7 @@ export default {
this.get_sel_eqbyid(userInfo.userid);
// id
this.get_user_getjurisdiction(userInfo.userid)
this.get_user_getjurisdiction(userInfo.userid);
// this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
// console.log(this.autoPlay);
@ -1061,7 +1175,7 @@ export default {
// id
get_user_getjurisdiction(userId) {
this.api.user_getjurisdiction(userId).then(res => {
this.api.user_getjurisdiction(userId).then((res) => {
if (res.data.code == 200) {
this.limitUserId = res.data.data[0].id;
if (this.limitUserId == 1) {
@ -1072,7 +1186,7 @@ export default {
this.dataInit(userId, this.limitUserId);
}
}
})
});
},
// autoPlay1() {
@ -1335,10 +1449,12 @@ export default {
opacity: 0.9;
text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
background: linear-gradient(to bottom,
background: linear-gradient(
to bottom,
#ffffff 45%,
#e9f8ff 90%,
#77baff 100%);
#77baff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
@ -1369,10 +1485,12 @@ export default {
}
.act {
background: linear-gradient(-35deg,
background: linear-gradient(
-35deg,
#56a8d5 0%,
rgba(0, 55, 110, 0.75) 50%,
#56a8d5 100%);
#56a8d5 100%
);
border: 1px solid rgba(122, 225, 255, 0.75);
font-size: 0.18rem;
font-family: MicrosoftYaHei;
@ -1513,7 +1631,8 @@ export default {
.weatherStation {
width: 4rem;
height: 0.43rem;
background: url("../../assets/img/weatherStation.png") center no-repeat;
background: url("../../assets/img/weatherStation.png") center
no-repeat;
background-size: 100% 100%;
}
@ -1578,7 +1697,8 @@ export default {
.e_title {
width: 3.98rem;
height: 0.19rem;
background: url("../../assets/img/environmentData_bg.png") center no-repeat;
background: url("../../assets/img/environmentData_bg.png") center
no-repeat;
background-size: 100% 100%;
font-size: 0.18rem;
font-family: AlibabaPuHuiTiM;
@ -1672,13 +1792,15 @@ export default {
top: 0;
left: 0;
z-index: 99;
-webkit-mask-image: linear-gradient(90deg,
-webkit-mask-image: linear-gradient(
90deg,
transparent 22%,
transparent 10%,
blue 30%,
blue 70%,
transparent 75%,
transparent 100%);
transparent 100%
);
.map1 {
width: 60%;
@ -1691,10 +1813,12 @@ export default {
// blue 80%,
// transparent 100%,
// transparent 100%);
-webkit-mask-image: linear-gradient(transparent 0%,
-webkit-mask-image: linear-gradient(
transparent 0%,
blue 8%,
blue 85%,
transparent 100%);
transparent 100%
);
// transform: scale(0.6);
position: absolute;
top: 50%;
@ -1709,19 +1833,23 @@ export default {
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
-webkit-mask-image: linear-gradient(90deg,
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
blue 5%,
blue 93%,
transparent 99%);
transparent 99%
);
.drag_img {
width: 100%;
height: 100%;
-webkit-mask-image: linear-gradient(transparent 0%,
-webkit-mask-image: linear-gradient(
transparent 0%,
blue 13%,
blue 73%,
transparent 97%);
transparent 97%
);
}
.axis_init {
@ -1747,19 +1875,23 @@ export default {
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
-webkit-mask-image: linear-gradient(90deg,
-webkit-mask-image: linear-gradient(
90deg,
transparent 4%,
blue 18%,
blue 88%,
transparent 100%);
transparent 100%
);
.drag_img {
width: 100%;
height: 100%;
-webkit-mask-image: linear-gradient(transparent 0%,
-webkit-mask-image: linear-gradient(
transparent 0%,
blue 13%,
blue 73%,
transparent 97%);
transparent 97%
);
}
.axis_1 {
@ -1951,14 +2083,17 @@ export default {
width: 0.74rem !important;
}
.swiper-slide1 {}
.swiper-slide1 {
}
::v-deep .swiper-slide2 {
color: #ffffff !important;
background: linear-gradient(-35deg,
background: linear-gradient(
-35deg,
#56a8d5 0%,
rgba(0, 55, 110, 0.75) 50%,
#56a8d5 100%) !important;
#56a8d5 100%
) !important;
border: 1px solid rgba(122, 225, 255, 0.75) !important;
}
@ -2042,7 +2177,8 @@ export default {
.i_title {
// width: 4rem;
height: 0.5rem;
background: url("../../assets/img/i_title_bg.png") center no-repeat;
background: url("../../assets/img/i_title_bg.png") center
no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
@ -2094,12 +2230,15 @@ export default {
margin-right: 0.47rem;
}
>span:nth-child(6),>span:nth-child(7) {
> span:nth-child(6),
> span:nth-child(7) {
width: 0.66rem;
height: 0.3rem;
background: linear-gradient(-35deg,
background: linear-gradient(
-35deg,
rgba(122, 225, 255, 0.49) 1%,
rgba(122, 225, 255, 0.5) 100%);
rgba(122, 225, 255, 0.5) 100%
);
border: 0.01rem solid rgba(122, 225, 255, 0.5);
border-radius: 0.15rem;
font-size: 0.14rem;
@ -2114,7 +2253,8 @@ export default {
.i_title_ {
// width: 4rem;
height: 0.5rem;
background: url("../../assets/img/i_title_bg.png") center no-repeat;
background: url("../../assets/img/i_title_bg.png") center
no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
@ -2163,9 +2303,11 @@ export default {
> span:nth-child(7) {
width: 0.66rem;
height: 0.3rem;
background: linear-gradient(-35deg,
background: linear-gradient(
-35deg,
rgba(122, 225, 255, 0.49) 1%,
rgba(122, 225, 255, 0.5) 100%);
rgba(122, 225, 255, 0.5) 100%
);
border: 0.01rem solid rgba(122, 225, 255, 0.5);
border-radius: 0.15rem;
font-size: 0.14rem;
@ -2228,4 +2370,5 @@ export default {
}
}
}
}</style>
}
</style>

View File

@ -31,22 +31,42 @@
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
<div
class="popBox"
v-for="(item, index) in popContentList"
:key="index"
>
<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">
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
<img
class="pole1"
src="../../assets/img/pole1.png"
alt=""
/>
</div>
</template>
<!-- 弹框 -->
<template>
<div class="pop_content" :style="getTopOrLeft(item.id)"
v-show="popContentCurrent == item.id ? true : false">
<img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
<div
class="pop_content"
:style="getTopOrLeft(item.id)"
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>
@ -73,12 +93,20 @@
</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">
<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-' +
<img
:src="
require('../../assets/image/real-time-' +
item1.formula +
'.png')
" alt="" />
"
alt=""
/>
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
@ -100,22 +128,51 @@
<div class="map1">
<div class="drag_box1" ref="drag_box1">
<img class="drag_img" src="../../assets/img/map1.png" alt="" />
<div class="popBox" v-for="(item, index) in popContentList1" :key="index + '_1'">
<div
class="popBox"
v-for="(item, index) in popContentList1"
:key="index + '_1'"
>
<template>
<div class="pole_item"
:style="'top:' + (21 + index * .1) + '%' + ';' + 'left:' + (83 - index * 3.24) + '%' + ';'" @click="handlerPop1(item.id)">
<div
class="pole_item"
:style="
'top:' +
(21 + index * 0.1) +
'%' +
';' +
'left:' +
(82.7 - index * 3.21) +
'%' +
';'
"
@click="handlerPop1(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="" />
<img
class="pole1"
src="../../assets/img/pole1.png"
alt=""
/>
</div>
</template>
<!-- 弹框 -->
<template>
<div class="pop_content1" v-show="popContentCurrent1 == item.id ? true : false" :style="getTopOrLeft1(item.id)">
<img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler1"/>
<div
class="pop_content1"
v-show="popContentCurrent1 == item.id ? true : false"
:style="getTopOrLeft1(item.id)"
>
<img
class="close_img"
src="../../assets/img/close.png"
alt=""
@click="cancelHandler1"
/>
<div class="p_video">
<img :src="item.greenhouseImage" alt="" />
</div>
@ -138,11 +195,19 @@
</div>
<div class="line" style="margin-top: 0.06rem"></div>
<div class="icon_item scroll">
<div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
<img :src="require('../../assets/image/real-time-' +
<div
class="icon_item_child"
v-for="(item1, index1) in item.childList"
:key="index1"
>
<img
:src="
require('../../assets/image/real-time-' +
item1.formula +
'.png')
" alt="" />
"
alt=""
/>
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
@ -155,23 +220,51 @@
</template>
</div>
<div class="popBox" v-for="(item, index) in popContentList2" :key="index + '_2'">
<div
class="popBox"
v-for="(item, index) in popContentList2"
:key="index + '_2'"
>
<template>
<div class="pole_item_1"
:style="'top:' + (51 + index * .2) + '%' + ';' + 'left:' + (84 - index * 4.05) + '%' + ';'" @click="handlerPop1(item.id)">
<div
class="pole_item_1"
:style="
'top:' +
(51 + index * 0.2) +
'%' +
';' +
'left:' +
(80 - index * 3.95) +
'%' +
';'
"
@click="handlerPop1(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="" />
<img
class="pole1"
src="../../assets/img/pole1.png"
alt=""
/>
</div>
</template>
<!-- 弹框 -->
<template>
<div class="pop_content1" v-show="popContentCurrent1 == item.id ? true : false" :style="getTopOrLeft11(item.id)">
<img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler1"/>
<div
class="pop_content1"
v-show="popContentCurrent1 == item.id ? true : false"
:style="getTopOrLeft11(item.id)"
>
<img
class="close_img"
src="../../assets/img/close.png"
alt=""
@click="cancelHandler1"
/>
<div class="p_video">
<img :src="item.greenhouseImage" alt="" />
</div>
@ -194,11 +287,19 @@
</div>
<div class="line" style="margin-top: 0.06rem"></div>
<div class="icon_item scroll">
<div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
<img :src="require('../../assets/image/real-time-' +
<div
class="icon_item_child"
v-for="(item1, index1) in item.childList"
:key="index1"
>
<img
:src="
require('../../assets/image/real-time-' +
item1.formula +
'.png')
" alt="" />
"
alt=""
/>
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
@ -628,14 +729,12 @@ export default {
},
],
limitUserId: '',
limitUserId: "",
popContentList1: [],
popContentList2: [],
};
},
mounted() {
this.login();
this.getTime();
@ -668,14 +767,16 @@ export default {
}
});
});
// console.log(this.popContentList,'12121212');
// console.log(this.popContentList, "12121212");
if (this.limitUserId == 2) {
this.popContentList1 = (this.popContentList.slice(0, 25))
this.popContentList1 = this.popContentList.slice(0, 24);
// this.popContentList2 = this.popContentList.slice(-10)
if(this.popContentList.length > 25){
this.popContentList2 = (this.popContentList.slice(-(this.popContentList.length - 25)))
if (this.popContentList.length > 24) {
this.popContentList2 = this.popContentList.slice(
-(this.popContentList.length - 24)
);
}
console.log(this.popContentList1);
// console.log(this.popContentList1);
}
});
},
@ -697,9 +798,17 @@ export default {
},
getTopOrLeft1(id) {
for(let i = 0; i < 26;i++){
if(id == (i + 1)){
return `top:40%;left:${(74 - i * 3) < 15 ? 15 : (74 - i * 3)}%;transform: translate(-50%,-50%);`;
for (let i = 0; i < 25; i++) {
if (id == i + 1) {
if (i < 20) {
return `top:40%;left:${
74 - i * 3 < 15 ? 15 : 74 - i * 3
}%;transform: translate(-50%,-50%);`;
} else {
return `top:40%;left:${
74 - i * 3 < 15 ? 15 + (i - 20) * 3 : 74 - i * 3
}%;transform: translate(-50%,-50%);`;
}
}
}
// if (id == 1) {
@ -713,8 +822,8 @@ export default {
getTopOrLeft11(id) {
for (let i = 0; i < 10; i++) {
if(id == (i + 26))
return `top:65%;left:${77 - i *4}%;transform: translate(-50%,-50%);`
if (id == i + 25)
return `top:65%;left:${71 - i * 4}%;transform: translate(-50%,-50%);`;
}
// if (id == 10) {
// return "top:65%;left:57%;transform: translate(-50%,-50%);";
@ -725,28 +834,28 @@ export default {
getNamePosition(id) {
if (id == 1) {
return "position: absolute;top: 41%;left: 13%;"
return "position: absolute;top: 41%;left: 13%;";
} else if (id == 2) {
return "position: absolute;top: 10%;left: 24%;"
return "position: absolute;top: 10%;left: 24%;";
} else if (id == 3) {
return "position: absolute;top: 22%;left: 40%;"
return "position: absolute;top: 22%;left: 40%;";
} else if (id == 4) {
return "position: absolute;top: 29%;left: 76%;"
return "position: absolute;top: 29%;left: 76%;";
} else if (id == 5) {
return "position: absolute;top: 61%;left: 62%;"
return "position: absolute;top: 61%;left: 62%;";
} else if (id == 6) {
return "position: absolute;top: 1%;left: 62%;"
return "position: absolute;top: 1%;left: 62%;";
}
},
autoPlay1() {
let that = this
let that = this;
this.autoPlay = false;
clearInterval(that.timer2) && this.timer2;
localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
},
autoPlay2() {
let that = this
let that = this;
this.autoPlay = true;
localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
this.timer2 = setInterval(() => {
@ -757,11 +866,10 @@ export default {
}
} else if (that.limitUserId == 2) {
that.popContentCurrent1++;
if (that.popContentCurrent1 > 35) {
if (that.popContentCurrent1 > 34) {
that.popContentCurrent1 = 1;
}
}
}, 3000);
},
@ -794,7 +902,7 @@ export default {
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
// id
this.get_user_getjurisdiction(userInfo.userid)
this.get_user_getjurisdiction(userInfo.userid);
this.dataInit(userInfo.userid);
@ -821,7 +929,7 @@ export default {
// id
get_user_getjurisdiction(userId) {
this.api.user_getjurisdiction(userId).then(res => {
this.api.user_getjurisdiction(userId).then((res) => {
if (res.data.code == 200) {
this.limitUserId = res.data.data[0].id;
if (this.limitUserId == 1) {
@ -830,7 +938,7 @@ export default {
this.drag_boxHandler1();
}
}
})
});
},
getTime() {
@ -1041,10 +1149,12 @@ export default {
opacity: 0.89;
text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
background: linear-gradient(to bottom,
background: linear-gradient(
to bottom,
#ffffff 45%,
#e9f8ff 90%,
#77baff 100%);
#77baff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
@ -1075,10 +1185,12 @@ export default {
}
.act {
background: linear-gradient(-35deg,
background: linear-gradient(
-35deg,
#56a8d5 0%,
rgba(0, 55, 110, 0.75) 50%,
#56a8d5 100%);
#56a8d5 100%
);
border: 1px solid rgba(122, 225, 255, 0.75);
font-size: 0.18rem;
font-family: MicrosoftYaHei;
@ -1161,21 +1273,25 @@ export default {
top: 0;
left: 0;
z-index: 99;
-webkit-mask-image: linear-gradient(90deg,
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
blue 7%,
blue 87%,
transparent 97%);
transparent 97%
);
.map1 {
width: 100%;
height: 100%;
// background: url('../assets/img/map.png') center no-repeat;
// background-size: 100% 100%;
-webkit-mask-image: linear-gradient(transparent 4%,
-webkit-mask-image: linear-gradient(
transparent 4%,
blue 15%,
blue 86%,
transparent 100%);
transparent 100%
);
overflow: hidden;
position: absolute;
@ -1183,19 +1299,23 @@ export default {
width: 100%;
height: 100%;
position: absolute;
-webkit-mask-image: linear-gradient(90deg,
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
blue 5%,
blue 93%,
transparent 99%);
transparent 99%
);
.drag_img {
width: 100%;
height: 100%;
-webkit-mask-image: linear-gradient(transparent 0%,
-webkit-mask-image: linear-gradient(
transparent 0%,
blue 13%,
blue 73%,
transparent 97%);
transparent 97%
);
}
.pole_item,
@ -1219,8 +1339,6 @@ export default {
overflow: hidden;
white-space: nowrap;
> img {
width: 0.1rem;
height: 0.1rem;
@ -1256,8 +1374,8 @@ export default {
z-index: 999999;
.close_img {
width: .2rem;
height: .2rem;
width: 0.2rem;
height: 0.2rem;
position: absolute;
top: 0;
right: 0;
@ -1408,19 +1526,23 @@ export default {
width: 100%;
height: 100%;
position: absolute;
-webkit-mask-image: linear-gradient(90deg,
-webkit-mask-image: linear-gradient(
90deg,
transparent 4%,
blue 18%,
blue 88%,
transparent 100%);
transparent 100%
);
.drag_img {
width: 100%;
height: 100%;
-webkit-mask-image: linear-gradient(transparent 0%,
-webkit-mask-image: linear-gradient(
transparent 0%,
blue 13%,
blue 73%,
transparent 97%);
transparent 97%
);
}
.pole_item_4 {
@ -1662,8 +1784,6 @@ export default {
}
}
}
}
}
}
@ -1673,4 +1793,5 @@ export default {
::-webkit-scrollbar {
display: none;
}</style>
}
</style>

View File

@ -8,6 +8,7 @@
</div>
<div class="header-right" v-if="userInfo">
<div class="return-btn" @click="returnBtn"></div>
<img src="../assets/image/avatar.png" alt="">
<div class="user-data">
<div class="name">欢迎{{ userInfo.nickName }}</div>
@ -178,6 +179,9 @@ export default {
}
})
},
returnBtn(){
this.$router.push({ name: 'realTime' })
},
toHome() {
this.$router.push({ name: 'home' })
},