Compare commits
No commits in common. "52f16783c238b968146ddc9a103eb878c204593e" and "83f351fdcf6f580a54d483d30afa32ef6d9d458c" have entirely different histories.
52f16783c2
...
83f351fdcf
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 22 MiB |
@ -736,350 +736,6 @@ export function realTimeLine1(id, data,pageId) {
|
|||||||
myChart.resize();
|
myChart.resize();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// 大数据页面金山吕港草莓显示
|
|
||||||
export function realTimeLine2(id, data,pageId) {
|
|
||||||
var chartDom = document.getElementById(id);
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
chartDom.removeAttribute('_echarts_instance_')//解决切换页面echarts不显示的问题
|
|
||||||
var Xdata = []
|
|
||||||
var colorList1 = ['rgba(0, 187, 136, 1)', 'rgba(252, 125, 106, 1)', 'rgba(252, 223, 39, 1)', 'rgba(68, 214, 232, 1)',
|
|
||||||
'rgba(69, 224, 155, 1)', 'rgba(82, 188, 255, 1)', 'rgba(214, 162, 255, 1)', 'rgba(255, 192, 111, 1)', 'rgba(255, 156, 154, 1)', 'rgba(255, 156, 154, 1)']
|
|
||||||
var colorList = [new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(0, 187, 136, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(0, 187, 136, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(252, 125, 106, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(252, 125, 106, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(252, 223, 39, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(252, 223, 39, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(68, 214, 232, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(68, 214, 232, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(69, 224, 155, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(69, 224, 155, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(82, 188, 255, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(82, 188, 255, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(214, 162, 255, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(214, 162, 255, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(255, 192, 111, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(255, 192, 111, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(255, 156, 154, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(255, 156, 154, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(255, 156, 154, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(255, 156, 154, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
|
|
||||||
]
|
|
||||||
// var equipmentList=store.state.equipmentSelList
|
|
||||||
var equipmentList=JSON.parse(localStorage.getItem('equipmentSelList'))
|
|
||||||
|
|
||||||
var list = []
|
|
||||||
var selList={}
|
|
||||||
var selTure=false
|
|
||||||
var dataList = []
|
|
||||||
equipmentList.forEach(obj => {
|
|
||||||
if (obj.deviceId == pageId) {
|
|
||||||
// 在找到的对象中添加参数
|
|
||||||
if(obj.selList){
|
|
||||||
selList = obj.selList;
|
|
||||||
selTure=true
|
|
||||||
}else{
|
|
||||||
selList ={}
|
|
||||||
selTure=false
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
data.forEach((el, index) => {
|
|
||||||
Xdata.push(el.time)
|
|
||||||
|
|
||||||
el.value.forEach((el1, index1) => {
|
|
||||||
var containsIndex = dataList.findIndex(function (item) {
|
|
||||||
return item.name === el1.name;
|
|
||||||
});
|
|
||||||
if (containsIndex == -1) {
|
|
||||||
dataList.push({ name: el1.name, value: [el1.value] })
|
|
||||||
} else {
|
|
||||||
dataList[containsIndex].value.push(el1.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
if(!selTure){
|
|
||||||
dataList.forEach((el, index) => {
|
|
||||||
selList[el.name]=(index==0?true:false)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
dataList.forEach((el, index) => {
|
|
||||||
list.push({
|
|
||||||
name: el.name,
|
|
||||||
data: el.value,
|
|
||||||
type: "line",
|
|
||||||
symbol: "circle",
|
|
||||||
smooth: true,
|
|
||||||
symbolSize: 5,
|
|
||||||
showSymbol: false,
|
|
||||||
lineStyle: {
|
|
||||||
normal: {
|
|
||||||
width: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
normal: {
|
|
||||||
color: colorList[index],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: colorList1[index],
|
|
||||||
borderColor: colorList1[index],
|
|
||||||
borderWidth: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
|
||||||
var option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#57617B",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
extraCssText: 'z-index: 9999;', // 设置 z-index
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
icon: "circle",
|
|
||||||
itemWidth: 10,
|
|
||||||
itemHeight: 10,
|
|
||||||
type: 'scroll', // 启用翻页
|
|
||||||
data: list,
|
|
||||||
selected: selList,
|
|
||||||
right: "center",
|
|
||||||
top:10,
|
|
||||||
itemGap: 10,
|
|
||||||
width:'90%',
|
|
||||||
height:20,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: "#fff",
|
|
||||||
lineHeight: 30,
|
|
||||||
},
|
|
||||||
pageTextStyle: {
|
|
||||||
color: '#fff', // 设置翻页文字颜色
|
|
||||||
},
|
|
||||||
pageIconColor: '#fff', // 设置翻页按钮颜色
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: "8%",
|
|
||||||
right: "10%",
|
|
||||||
bottom: "13%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
boundaryGap: false,
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
|
|
||||||
lineStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
type: 'dashed'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: Xdata,
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: "value",
|
|
||||||
name: "",
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
type: 'dashed'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
margin: 10,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "rgba(104, 168, 205, 1)",
|
|
||||||
type: 'dashed'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: list,
|
|
||||||
};
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
myChart.resize();
|
|
||||||
|
|
||||||
myChart.on('legendselectchanged', function (params) {
|
|
||||||
equipmentList.forEach((obj,index) => {
|
|
||||||
if (obj.deviceId== pageId) {
|
|
||||||
// 在找到的对象中添加参数
|
|
||||||
obj.selList=params.selected
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
localStorage.setItem('equipmentSelList', JSON.stringify(equipmentList))
|
|
||||||
});
|
|
||||||
window.addEventListener("resize", function () {
|
|
||||||
myChart.resize();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
export function statusCharts(id, data) {
|
export function statusCharts(id, data) {
|
||||||
var chartDom = document.getElementById(id);
|
var chartDom = document.getElementById(id);
|
||||||
|
|
||||||
|
|||||||
@ -127,7 +127,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.$forceUpdate()
|
|
||||||
},
|
},
|
||||||
//去首页
|
//去首页
|
||||||
toHome(index) {
|
toHome(index) {
|
||||||
|
|||||||
@ -39,9 +39,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="left" v-show="limitUserId != 5">
|
<div class="left" v-show="limitUserId != 5">
|
||||||
<div class="weatherStation" v-show="limitUserId != 12"></div>
|
<div class="weatherStation"></div>
|
||||||
|
|
||||||
<div class="weather" v-show="limitUserId != 12">
|
<div class="weather">
|
||||||
<div>
|
<div>
|
||||||
<marquee behavior="" direction="" scrollamount="3">
|
<marquee behavior="" direction="" scrollamount="3">
|
||||||
<div class="item" v-for="(item, index) in weatherDataList" :key="index">
|
<div class="item" v-for="(item, index) in weatherDataList" :key="index">
|
||||||
@ -56,9 +56,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="weather_echart" id="weather_echart" v-show="limitUserId != 11&&limitUserId != 12"></div>
|
<div class="weather_echart" id="weather_echart" v-show="limitUserId != 11"></div>
|
||||||
<div class="e_title" v-show="limitUserId == 12">实时数据</div>
|
|
||||||
<div class="realTime-line" id="realTime-line" v-show="limitUserId == 12"></div>
|
|
||||||
<div class="environmentData" :class="`environmentData-${limitUserId}`">
|
<div class="environmentData" :class="`environmentData-${limitUserId}`">
|
||||||
<div class="e_title">温室环境数据</div>
|
<div class="e_title">温室环境数据</div>
|
||||||
<div class="detail">
|
<div class="detail">
|
||||||
@ -199,7 +198,7 @@
|
|||||||
<img class="drag_img" src="../../assets/img/map7.png" alt="" />
|
<img class="drag_img" src="../../assets/img/map7.png" alt="" />
|
||||||
<img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
<img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||||||
</div>
|
</div>
|
||||||
<!-- 金山吕港草莓 -->
|
<!-- 镇海欣丰农场 -->
|
||||||
<div class="drag_box12" ref="drag_box12" v-show="limitUserId == 12">
|
<div class="drag_box12" ref="drag_box12" v-show="limitUserId == 12">
|
||||||
<img class="drag_img" src="../../assets/img/map8.png" alt="" />
|
<img class="drag_img" src="../../assets/img/map8.png" alt="" />
|
||||||
<img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
<img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||||||
@ -212,7 +211,7 @@
|
|||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="liveVideo"></div>
|
<div class="liveVideo"></div>
|
||||||
|
|
||||||
<div class="liveVideo_content" v-show="limitUserId != 12">
|
<div class="liveVideo_content">
|
||||||
<div class="swiper-container mySwiper_video">
|
<div class="swiper-container mySwiper_video">
|
||||||
<div class="swiper-wrapper">
|
<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">
|
||||||
@ -230,10 +229,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 金山吕港草莓单独显示控制器南图片 -->
|
|
||||||
<div class="liveVideo_content" style="padding:10px;" v-show="limitUserId == 12">
|
|
||||||
<img style="width: 100%;height: 100%;" :src="imgUrl" alt="">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="deviceState"></div>
|
<div class="deviceState"></div>
|
||||||
|
|
||||||
@ -419,9 +414,8 @@ import Swiper from "@/assets/js/swiper.min.js";
|
|||||||
import "@/assets/js/swiper.min.css";
|
import "@/assets/js/swiper.min.css";
|
||||||
import {
|
import {
|
||||||
weather_echart,
|
weather_echart,
|
||||||
thisWeekTemperature_echart
|
thisWeekTemperature_echart,
|
||||||
} from "@/assets/js/echarts";
|
} from "@/assets/js/echarts";
|
||||||
import { realTimeLine2 } from '@/assets/js/charts'
|
|
||||||
|
|
||||||
import EZUIKit from "ezuikit-js";
|
import EZUIKit from "ezuikit-js";
|
||||||
import videojs from "video.js";
|
import videojs from "video.js";
|
||||||
@ -555,9 +549,6 @@ export default {
|
|||||||
close_btn: false,
|
close_btn: false,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
// 金山吕港草莓数据
|
|
||||||
imgUrl: '',
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
@ -669,24 +660,6 @@ export default {
|
|||||||
this.get_environmentData(list[0].deviceId);
|
this.get_environmentData(list[0].deviceId);
|
||||||
this.get_readControl_getState(list[0].deviceId);
|
this.get_readControl_getState(list[0].deviceId);
|
||||||
this.getWeatherData(list[0].deviceId);
|
this.getWeatherData(list[0].deviceId);
|
||||||
// 金山吕港草莓数据单独显示
|
|
||||||
if(limitUserId == 12){
|
|
||||||
const store=this.$store.state
|
|
||||||
var data1 ='2024111816300001'
|
|
||||||
var nowDevice = store.equipmentList.find(item => item.deviceId == data1);
|
|
||||||
this.imgUrl =nowDevice? nowDevice.hls:null
|
|
||||||
|
|
||||||
this.api.getControlFsdata(data1).then(res => {
|
|
||||||
if (res.data.code == 200) {
|
|
||||||
var chartsData = res.data.data
|
|
||||||
realTimeLine2('realTime-line', chartsData, data1)
|
|
||||||
} else {
|
|
||||||
// this.$message.error(res.data.msg);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
} else if (limitUserId == 9) {
|
} else if (limitUserId == 9) {
|
||||||
|
|
||||||
// 左侧上部气象站charts
|
// 左侧上部气象站charts
|
||||||
@ -1893,10 +1866,7 @@ export default {
|
|||||||
top: 0.56rem;
|
top: 0.56rem;
|
||||||
left: 0.66rem;
|
left: 0.66rem;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
.realTime-line{
|
|
||||||
width: 100%;
|
|
||||||
height: calc((100% - 3.5rem) / 2);
|
|
||||||
}
|
|
||||||
.weatherStation {
|
.weatherStation {
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
height: 0.43rem;
|
height: 0.43rem;
|
||||||
@ -2311,7 +2281,7 @@ export default {
|
|||||||
height: auto;
|
height: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 44%;
|
top: 44%;
|
||||||
left:31%;
|
left: 24%;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@ -2319,8 +2289,8 @@ export default {
|
|||||||
width: 0.3rem;
|
width: 0.3rem;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 38%;
|
top: 34%;
|
||||||
left: 50%;
|
left: 48%;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@ -2328,8 +2298,8 @@ export default {
|
|||||||
width: 0.3rem;
|
width: 0.3rem;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 42%;
|
top: 44%;
|
||||||
left: 72%;
|
left: 75%;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -608,7 +608,15 @@
|
|||||||
<div class="map1">
|
<div class="map1">
|
||||||
<div class="drag_box11" ref="drag_box11">
|
<div class="drag_box11" ref="drag_box11">
|
||||||
<img class="drag_img" src="../../assets/img/map7.png" alt="" />
|
<img class="drag_img" src="../../assets/img/map7.png" alt="" />
|
||||||
|
<!-- <div class="popBox">
|
||||||
|
<div class="pole_item" style="top:78.5%;left:40.5%;z-index:1;" @click="toHttp">
|
||||||
|
<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> -->
|
||||||
|
|
||||||
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
|
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
|
||||||
<template>
|
<template>
|
||||||
@ -674,71 +682,8 @@
|
|||||||
<div class="map1">
|
<div class="map1">
|
||||||
<div class="drag_box12" ref="drag_box12">
|
<div class="drag_box12" ref="drag_box12">
|
||||||
<img class="drag_img" src="../../assets/img/map8.png" alt="" />
|
<img class="drag_img" src="../../assets/img/map8.png" alt="" />
|
||||||
<div class="popBox">
|
<div class="popBox">
|
||||||
<div class="pole_item" style="top:33.5%;left:48.5%;z-index:1;">
|
<div class="pole_item" style="top:36.5%;left:22.5%;z-index:1;">
|
||||||
<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>
|
|
||||||
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
|
|
||||||
<template>
|
|
||||||
<div class="pole_item" :style="getTopOrLeft12(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="" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 弹框 -->
|
|
||||||
<template>
|
|
||||||
<div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
|
|
||||||
:style="getTopOrLeft12_12(item.id)">
|
|
||||||
<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.greenhouseVariety }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="d_item">
|
|
||||||
<img src="../../assets/img/detail_img.png" alt="" />
|
|
||||||
<span>数量：{{ item.greenhouseNums }}株</span>
|
|
||||||
</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.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>
|
|
||||||
<span>{{ item1.environmentDataId }}</span>
|
|
||||||
<span>{{
|
|
||||||
item1.environmentData + getTypeList(item1.formula)
|
|
||||||
}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="popBox">
|
|
||||||
<div class="pole_item" style="top:37.5%;left:29.5%;z-index:1;">
|
|
||||||
<div class="p_title">
|
<div class="p_title">
|
||||||
<img src="../../assets/img/wenshi.png" alt="" />
|
<img src="../../assets/img/wenshi.png" alt="" />
|
||||||
<span>控制器南</span>
|
<span>控制器南</span>
|
||||||
@ -746,16 +691,24 @@
|
|||||||
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
|
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="popBox">
|
<div class="popBox">
|
||||||
<div class="pole_item" style="top:37.5%;left:70%;z-index:1;">
|
<div class="pole_item" style="top:26.5%;left:46.5%;z-index:1;">
|
||||||
|
<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>
|
||||||
|
<div class="popBox">
|
||||||
|
<div class="pole_item" style="top:32.5%;left:75%;z-index:1;">
|
||||||
<div class="p_title">
|
<div class="p_title">
|
||||||
<img src="../../assets/img/wenshi.png" alt="" />
|
<img src="../../assets/img/wenshi.png" alt="" />
|
||||||
<span>控制器北</span>
|
<span>控制器北</span>
|
||||||
</div>
|
</div>
|
||||||
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
|
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1402,20 +1355,6 @@ export default {
|
|||||||
} else if (id == 10) {
|
} else if (id == 10) {
|
||||||
return 'top:16.5%;left:75.5%;transform: translate(54%,0);'
|
return 'top:16.5%;left:75.5%;transform: translate(54%,0);'
|
||||||
}
|
}
|
||||||
},
|
|
||||||
getTopOrLeft12(id) {
|
|
||||||
if (id == 1) {
|
|
||||||
return 'top:37.5%;left:29.5%;z-index:10;'
|
|
||||||
} else if (id == 2) {
|
|
||||||
return 'top:37.5%;left:70%;z-index:9;'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getTopOrLeft12_12(id) {
|
|
||||||
if (id == 1) {
|
|
||||||
return 'top:37.5%;left:26.5%;transform: translate(54%,0);'
|
|
||||||
} else if (id == 2) {
|
|
||||||
return 'top:37.5%;left:67%;transform: translate(54%,0);'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
getTopOrLeft10(id) {
|
getTopOrLeft10(id) {
|
||||||
if (id == 1) {
|
if (id == 1) {
|
||||||
@ -2917,7 +2856,9 @@ export default {
|
|||||||
// blue 97%,
|
// blue 97%,
|
||||||
// transparent 99%
|
// transparent 99%
|
||||||
// );
|
// );
|
||||||
|
&.drag_box12{
|
||||||
|
top: 13%;
|
||||||
|
}
|
||||||
.drag_img {
|
.drag_img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
@ -2975,7 +2916,7 @@ export default {
|
|||||||
|
|
||||||
.pop_content1 {
|
.pop_content1 {
|
||||||
width: 3.5rem;
|
width: 3.5rem;
|
||||||
height: 4.8rem;
|
height: 4.55rem;
|
||||||
background: url("../../assets/img/pop_bg.png") center no-repeat;
|
background: url("../../assets/img/pop_bg.png") center no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user