commit
62c52c5ba3
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2538,6 +2538,14 @@
|
|||
}
|
||||
|
||||
.vrcode {
|
||||
.header{
|
||||
.header-right{
|
||||
width: 500px;
|
||||
}
|
||||
.header-center{
|
||||
width: calc(100% - 500px - 373px);
|
||||
}
|
||||
}
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
}
|
||||
|
|
@ -3498,4 +3506,21 @@
|
|||
.el-button span {
|
||||
|
||||
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 |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
? '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 ? "温室" : '') }}
|
||||
<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 ? "温室" : "")
|
||||
}}
|
||||
</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: '加温水泵',
|
||||
controlState: 0,
|
||||
num: '1000',
|
||||
close_btn: false
|
||||
},
|
||||
{
|
||||
title: '地热风机',
|
||||
controlState: 0,
|
||||
num: '1002',
|
||||
close_btn: false
|
||||
},
|
||||
{
|
||||
title: '上风口',
|
||||
controlState: 0,
|
||||
num: '1004',
|
||||
close_btn: true,
|
||||
progress_num: '1006',
|
||||
progress: ''
|
||||
},
|
||||
{
|
||||
title: '下风口',
|
||||
controlState: 0,
|
||||
num: '1007',
|
||||
close_btn: true,
|
||||
progress_num: '1009',
|
||||
progress: ''
|
||||
},
|
||||
{
|
||||
title: '卷被',
|
||||
controlState: 0,
|
||||
num: '1010',
|
||||
close_btn: true
|
||||
},
|
||||
{
|
||||
title: '除雪',
|
||||
controlState: 0,
|
||||
num: '1013',
|
||||
close_btn: false
|
||||
},
|
||||
]
|
||||
fiveControlList: [
|
||||
{
|
||||
title: "加温水泵",
|
||||
controlState: 0,
|
||||
num: "1000",
|
||||
close_btn: false,
|
||||
},
|
||||
{
|
||||
title: "地热风机",
|
||||
controlState: 0,
|
||||
num: "1002",
|
||||
close_btn: false,
|
||||
},
|
||||
{
|
||||
title: "上风口",
|
||||
controlState: 0,
|
||||
num: "1004",
|
||||
close_btn: true,
|
||||
progress_num: "1006",
|
||||
progress: "",
|
||||
},
|
||||
{
|
||||
title: "下风口",
|
||||
controlState: 0,
|
||||
num: "1007",
|
||||
close_btn: true,
|
||||
progress_num: "1009",
|
||||
progress: "",
|
||||
},
|
||||
{
|
||||
title: "卷被",
|
||||
controlState: 0,
|
||||
num: "1010",
|
||||
close_btn: true,
|
||||
},
|
||||
{
|
||||
title: "除雪",
|
||||
controlState: 0,
|
||||
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){
|
||||
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() {
|
||||
|
|
@ -1290,10 +1404,10 @@ export default {
|
|||
<style lang="scss">
|
||||
.environmentData {
|
||||
.e_content {
|
||||
>div {
|
||||
> div {
|
||||
width: 100% !important;
|
||||
|
||||
>div {
|
||||
> div {
|
||||
width: 100% !important;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -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,
|
||||
#ffffff 45%,
|
||||
#e9f8ff 90%,
|
||||
#77baff 100%);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff 45%,
|
||||
#e9f8ff 90%,
|
||||
#77baff 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-align: center;
|
||||
|
|
@ -1353,7 +1469,7 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
>span {
|
||||
> span {
|
||||
width: 0.8rem;
|
||||
height: 0.3rem;
|
||||
background: rgba(14, 91, 165, 0.1);
|
||||
|
|
@ -1369,10 +1485,12 @@ export default {
|
|||
}
|
||||
|
||||
.act {
|
||||
background: linear-gradient(-35deg,
|
||||
#56a8d5 0%,
|
||||
rgba(0, 55, 110, 0.75) 50%,
|
||||
#56a8d5 100%);
|
||||
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;
|
||||
|
|
@ -1393,7 +1511,7 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
}
|
||||
|
|
@ -1409,26 +1527,26 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.28rem;
|
||||
height: 0.3rem;
|
||||
}
|
||||
|
||||
>span:nth-child(2) {
|
||||
> span:nth-child(2) {
|
||||
font-size: 0.24rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: #7abaff;
|
||||
}
|
||||
|
||||
>span:nth-child(4) {
|
||||
> span:nth-child(4) {
|
||||
font-size: 0.2rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: #7abaff;
|
||||
}
|
||||
|
||||
>span:nth-child(6) {
|
||||
> span:nth-child(6) {
|
||||
font-size: 0.3rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
|
|
@ -1459,12 +1577,12 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 1.08rem;
|
||||
height: 0.91rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
> span {
|
||||
font-size: 0.2rem;
|
||||
font-family: AlibabaPuHuiTiB;
|
||||
font-weight: bold;
|
||||
|
|
@ -1478,12 +1596,12 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 1.08rem;
|
||||
height: 0.91rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
> span {
|
||||
font-size: 0.2rem;
|
||||
font-family: AlibabaPuHuiTiB;
|
||||
font-weight: bold;
|
||||
|
|
@ -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%;
|
||||
}
|
||||
|
||||
|
|
@ -1521,7 +1640,7 @@ export default {
|
|||
width: 3.84rem;
|
||||
height: 0.34rem;
|
||||
|
||||
>div {
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -1549,7 +1668,7 @@ export default {
|
|||
margin-right: 0.1rem;
|
||||
display: inline-block;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.3rem;
|
||||
height: 0.3rem;
|
||||
position: relative;
|
||||
|
|
@ -1557,7 +1676,7 @@ export default {
|
|||
margin-right: 0.05rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
> span {
|
||||
font-size: 0.16rem;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
|
|
@ -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;
|
||||
|
|
@ -1624,7 +1744,7 @@ export default {
|
|||
box-sizing: border-box;
|
||||
padding-bottom: 0.1rem;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.62rem;
|
||||
height: 0.68rem;
|
||||
margin: 0 0.16rem 0 0.13rem;
|
||||
|
|
@ -1634,14 +1754,14 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
>span:nth-child(1) {
|
||||
> span:nth-child(1) {
|
||||
font-size: 0.16rem;
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-weight: bold;
|
||||
color: #86c2ff;
|
||||
}
|
||||
|
||||
>span:nth-child(2) {
|
||||
> span:nth-child(2) {
|
||||
font-size: 0.22rem;
|
||||
font-family: AlibabaPuHuiTiB;
|
||||
font-weight: bold;
|
||||
|
|
@ -1672,13 +1792,15 @@ export default {
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
-webkit-mask-image: linear-gradient(90deg,
|
||||
transparent 22%,
|
||||
transparent 10%,
|
||||
blue 30%,
|
||||
blue 70%,
|
||||
transparent 75%,
|
||||
transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
90deg,
|
||||
transparent 22%,
|
||||
transparent 10%,
|
||||
blue 30%,
|
||||
blue 70%,
|
||||
transparent 75%,
|
||||
transparent 100%
|
||||
);
|
||||
|
||||
.map1 {
|
||||
width: 60%;
|
||||
|
|
@ -1691,10 +1813,12 @@ export default {
|
|||
// blue 80%,
|
||||
// transparent 100%,
|
||||
// transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(transparent 0%,
|
||||
blue 8%,
|
||||
blue 85%,
|
||||
transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
transparent 0%,
|
||||
blue 8%,
|
||||
blue 85%,
|
||||
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,
|
||||
transparent 0%,
|
||||
blue 5%,
|
||||
blue 93%,
|
||||
transparent 99%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
blue 5%,
|
||||
blue 93%,
|
||||
transparent 99%
|
||||
);
|
||||
|
||||
.drag_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-mask-image: linear-gradient(transparent 0%,
|
||||
blue 13%,
|
||||
blue 73%,
|
||||
transparent 97%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
transparent 0%,
|
||||
blue 13%,
|
||||
blue 73%,
|
||||
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,
|
||||
transparent 4%,
|
||||
blue 18%,
|
||||
blue 88%,
|
||||
transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
90deg,
|
||||
transparent 4%,
|
||||
blue 18%,
|
||||
blue 88%,
|
||||
transparent 100%
|
||||
);
|
||||
|
||||
.drag_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-mask-image: linear-gradient(transparent 0%,
|
||||
blue 13%,
|
||||
blue 73%,
|
||||
transparent 97%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
transparent 0%,
|
||||
blue 13%,
|
||||
blue 73%,
|
||||
transparent 97%
|
||||
);
|
||||
}
|
||||
|
||||
.axis_1 {
|
||||
|
|
@ -1931,7 +2063,7 @@ export default {
|
|||
width: 100%;
|
||||
height: 0.54rem;
|
||||
|
||||
>div {
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 0.54rem;
|
||||
cursor: pointer;
|
||||
|
|
@ -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,
|
||||
#56a8d5 0%,
|
||||
rgba(0, 55, 110, 0.75) 50%,
|
||||
#56a8d5 100%) !important;
|
||||
background: linear-gradient(
|
||||
-35deg,
|
||||
#56a8d5 0%,
|
||||
rgba(0, 55, 110, 0.75) 50%,
|
||||
#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;
|
||||
|
|
@ -2050,12 +2186,12 @@ export default {
|
|||
box-sizing: border-box;
|
||||
padding: 0 0.1rem 0 0.05rem;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
>span:nth-child(2) {
|
||||
> span:nth-child(2) {
|
||||
font-size: 0.16rem;
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-weight: bold;
|
||||
|
|
@ -2069,7 +2205,7 @@ export default {
|
|||
opacity: 0.2;
|
||||
}
|
||||
|
||||
>span:nth-child(4) {
|
||||
> span:nth-child(4) {
|
||||
font-size: 0.14rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
|
|
@ -2084,7 +2220,7 @@ export default {
|
|||
// margin-right: 0.47rem;
|
||||
// }
|
||||
|
||||
.progress{
|
||||
.progress {
|
||||
width: 18%;
|
||||
font-size: 0.14rem;
|
||||
font-style: normal;
|
||||
|
|
@ -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,
|
||||
rgba(122, 225, 255, 0.49) 1%,
|
||||
rgba(122, 225, 255, 0.5) 100%);
|
||||
background: linear-gradient(
|
||||
-35deg,
|
||||
rgba(122, 225, 255, 0.49) 1%,
|
||||
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;
|
||||
|
|
@ -2122,12 +2262,12 @@ export default {
|
|||
box-sizing: border-box;
|
||||
padding: 0 0.1rem 0 0.05rem;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
>span:nth-child(2) {
|
||||
> span:nth-child(2) {
|
||||
width: 18%;
|
||||
font-size: 0.16rem;
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
|
|
@ -2143,7 +2283,7 @@ export default {
|
|||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
>span:nth-child(4) {
|
||||
> span:nth-child(4) {
|
||||
width: 18%;
|
||||
font-size: 0.14rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
|
|
@ -2151,7 +2291,7 @@ export default {
|
|||
color: #4effd5;
|
||||
}
|
||||
|
||||
>span:nth-child(6) {
|
||||
> span:nth-child(6) {
|
||||
width: 18%;
|
||||
font-size: 0.14rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
|
|
@ -2160,12 +2300,14 @@ export default {
|
|||
margin-right: 0.47rem;
|
||||
}
|
||||
|
||||
>span:nth-child(7) {
|
||||
> span:nth-child(7) {
|
||||
width: 0.66rem;
|
||||
height: 0.3rem;
|
||||
background: linear-gradient(-35deg,
|
||||
rgba(122, 225, 255, 0.49) 1%,
|
||||
rgba(122, 225, 255, 0.5) 100%);
|
||||
background: linear-gradient(
|
||||
-35deg,
|
||||
rgba(122, 225, 255, 0.49) 1%,
|
||||
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;
|
||||
|
|
@ -2192,16 +2334,16 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
>span:nth-child(1),
|
||||
>span:nth-child(4) {
|
||||
> span:nth-child(1),
|
||||
> span:nth-child(4) {
|
||||
font-size: 0.14rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
>span:nth-child(2),
|
||||
>span:nth-child(5) {
|
||||
> span:nth-child(2),
|
||||
> span:nth-child(5) {
|
||||
font-size: 0.14rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
|
|
@ -2228,4 +2370,5 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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-' +
|
||||
item1.formula +
|
||||
'.png')
|
||||
" alt="" />
|
||||
<img
|
||||
:src="
|
||||
require('../../assets/image/real-time-' +
|
||||
item1.formula +
|
||||
'.png')
|
||||
"
|
||||
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-' +
|
||||
item1.formula +
|
||||
'.png')
|
||||
" alt="" />
|
||||
<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=""
|
||||
/>
|
||||
<div>
|
||||
<span>{{ item1.environmentDataId }}</span>
|
||||
<span>{{
|
||||
|
|
@ -155,23 +220,51 @@
|
|||
</template>
|
||||
</div>
|
||||
|
||||
|
||||
<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="popBox"
|
||||
v-for="(item, index) in popContentList2"
|
||||
:key="index + '_2'"
|
||||
>
|
||||
<template>
|
||||
<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-' +
|
||||
item1.formula +
|
||||
'.png')
|
||||
" alt="" />
|
||||
<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=""
|
||||
/>
|
||||
<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) {
|
||||
|
|
@ -712,9 +821,9 @@ 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%);`
|
||||
for (let i = 0; i < 10; i++) {
|
||||
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,43 +834,42 @@ 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(() => {
|
||||
if(that.limitUserId == 1){
|
||||
if (that.limitUserId == 1) {
|
||||
that.popContentCurrent++;
|
||||
if (that.popContentCurrent > 6) {
|
||||
that.popContentCurrent = 1;
|
||||
}
|
||||
}else if(that.limitUserId == 2){
|
||||
} 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);
|
||||
|
||||
|
|
@ -804,12 +912,12 @@ export default {
|
|||
clearInterval(that.timer2) && this.timer2;
|
||||
} else {
|
||||
this.timer2 = setInterval(() => {
|
||||
if(that.limitUserId == 1){
|
||||
if (that.limitUserId == 1) {
|
||||
that.popContentCurrent++;
|
||||
if (that.popContentCurrent > 6) {
|
||||
that.popContentCurrent = 1;
|
||||
}
|
||||
}else if(that.limitUserId == 2){
|
||||
} else if (that.limitUserId == 2) {
|
||||
that.popContentCurrent1++;
|
||||
if (that.popContentCurrent1 > 35) {
|
||||
that.popContentCurrent1 = 1;
|
||||
|
|
@ -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() {
|
||||
|
|
@ -857,7 +965,7 @@ export default {
|
|||
clearInterval(that.timer2) && this.timer2;
|
||||
},
|
||||
|
||||
cancelHandler1(){
|
||||
cancelHandler1() {
|
||||
this.popContentCurrent1 = -1;
|
||||
},
|
||||
|
||||
|
|
@ -866,7 +974,7 @@ export default {
|
|||
this.popContentCurrent = id;
|
||||
},
|
||||
|
||||
handlerPop1(id){
|
||||
handlerPop1(id) {
|
||||
this.popContentCurrent1 = id;
|
||||
},
|
||||
|
||||
|
|
@ -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,
|
||||
#ffffff 45%,
|
||||
#e9f8ff 90%,
|
||||
#77baff 100%);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff 45%,
|
||||
#e9f8ff 90%,
|
||||
#77baff 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-align: center;
|
||||
|
|
@ -1059,7 +1169,7 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
>span {
|
||||
> span {
|
||||
width: 0.8rem;
|
||||
height: 0.3rem;
|
||||
background: rgba(14, 91, 165, 0.1);
|
||||
|
|
@ -1075,10 +1185,12 @@ export default {
|
|||
}
|
||||
|
||||
.act {
|
||||
background: linear-gradient(-35deg,
|
||||
#56a8d5 0%,
|
||||
rgba(0, 55, 110, 0.75) 50%,
|
||||
#56a8d5 100%);
|
||||
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;
|
||||
|
|
@ -1100,7 +1212,7 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
}
|
||||
|
|
@ -1116,26 +1228,26 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.28rem;
|
||||
height: 0.3rem;
|
||||
}
|
||||
|
||||
>span:nth-child(2) {
|
||||
> span:nth-child(2) {
|
||||
font-size: 0.24rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: #7abaff;
|
||||
}
|
||||
|
||||
>span:nth-child(4) {
|
||||
> span:nth-child(4) {
|
||||
font-size: 0.2rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: #7abaff;
|
||||
}
|
||||
|
||||
>span:nth-child(6) {
|
||||
> span:nth-child(6) {
|
||||
font-size: 0.3rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
|
|
@ -1161,21 +1273,25 @@ export default {
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
-webkit-mask-image: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
blue 7%,
|
||||
blue 87%,
|
||||
transparent 97%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
blue 7%,
|
||||
blue 87%,
|
||||
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%,
|
||||
blue 15%,
|
||||
blue 86%,
|
||||
transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
transparent 4%,
|
||||
blue 15%,
|
||||
blue 86%,
|
||||
transparent 100%
|
||||
);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
|
||||
|
|
@ -1183,19 +1299,23 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
-webkit-mask-image: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
blue 5%,
|
||||
blue 93%,
|
||||
transparent 99%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
blue 5%,
|
||||
blue 93%,
|
||||
transparent 99%
|
||||
);
|
||||
|
||||
.drag_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-mask-image: linear-gradient(transparent 0%,
|
||||
blue 13%,
|
||||
blue 73%,
|
||||
transparent 97%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
transparent 0%,
|
||||
blue 13%,
|
||||
blue 73%,
|
||||
transparent 97%
|
||||
);
|
||||
}
|
||||
|
||||
.pole_item,
|
||||
|
|
@ -1219,15 +1339,13 @@ export default {
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.1rem;
|
||||
height: 0.1rem;
|
||||
margin-right: 0.05rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
> span {
|
||||
font-size: 0.1rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
|
|
@ -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;
|
||||
|
|
@ -1268,7 +1386,7 @@ export default {
|
|||
height: 1.82rem;
|
||||
margin: 0.1rem auto 0;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1313,13 +1431,13 @@ export default {
|
|||
box-sizing: border-box;
|
||||
padding: 0.05rem 0.05rem;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
margin-right: 0.05rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
> span {
|
||||
font-size: 0.13rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
|
|
@ -1338,20 +1456,20 @@ export default {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.18rem;
|
||||
height: 0.18rem;
|
||||
margin-right: 0.05rem;
|
||||
}
|
||||
|
||||
>span:nth-child(2) {
|
||||
> span:nth-child(2) {
|
||||
font-size: 0.13rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
>span:nth-child(3) {
|
||||
> span:nth-child(3) {
|
||||
font-size: 0.13rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
|
|
@ -1408,19 +1526,23 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
-webkit-mask-image: linear-gradient(90deg,
|
||||
transparent 4%,
|
||||
blue 18%,
|
||||
blue 88%,
|
||||
transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
90deg,
|
||||
transparent 4%,
|
||||
blue 18%,
|
||||
blue 88%,
|
||||
transparent 100%
|
||||
);
|
||||
|
||||
.drag_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-mask-image: linear-gradient(transparent 0%,
|
||||
blue 13%,
|
||||
blue 73%,
|
||||
transparent 97%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
transparent 0%,
|
||||
blue 13%,
|
||||
blue 73%,
|
||||
transparent 97%
|
||||
);
|
||||
}
|
||||
|
||||
.pole_item_4 {
|
||||
|
|
@ -1446,13 +1568,13 @@ export default {
|
|||
top: 0;
|
||||
left: 0;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
margin-right: 0.15rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
> span {
|
||||
font-size: 0.18rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
|
|
@ -1528,7 +1650,7 @@ export default {
|
|||
height: 2.8rem;
|
||||
margin: 0.2rem auto 0;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1572,13 +1694,13 @@ export default {
|
|||
box-sizing: border-box;
|
||||
padding: 0 0.1rem 0 0.1rem;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.18rem;
|
||||
height: 0.18rem;
|
||||
margin-right: 0.05rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
> span {
|
||||
font-size: 0.16rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
|
|
@ -1597,20 +1719,20 @@ export default {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.22rem;
|
||||
height: 0.18rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
>span:nth-child(2) {
|
||||
> span:nth-child(2) {
|
||||
font-size: 0.16rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
>span:nth-child(3) {
|
||||
> span:nth-child(3) {
|
||||
font-size: 0.16rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
|
|
@ -1634,24 +1756,24 @@ export default {
|
|||
display: flex;
|
||||
margin-bottom: 0.1rem;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
width: 0.6rem;
|
||||
height: 0.53rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
>div {
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
>span:nth-child(1) {
|
||||
> span:nth-child(1) {
|
||||
font-size: 0.14rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #86d9ff;
|
||||
}
|
||||
|
||||
>span:nth-child(2) {
|
||||
> span:nth-child(2) {
|
||||
font-size: 0.2rem;
|
||||
font-family: AlibabaPuHuiTiB;
|
||||
font-weight: bold;
|
||||
|
|
@ -1662,8 +1784,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1673,4 +1793,5 @@ export default {
|
|||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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' })
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue