金山吕港草莓大数据修改 #242
Binary file not shown.
|
Before Width: | Height: | Size: 22 MiB After Width: | Height: | Size: 1.2 MiB |
@ -736,6 +736,350 @@ export function realTimeLine1(id, data,pageId) {
|
||||
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) {
|
||||
var chartDom = document.getElementById(id);
|
||||
|
||||
|
||||
@ -127,6 +127,7 @@ export default {
|
||||
}
|
||||
}
|
||||
})
|
||||
this.$forceUpdate()
|
||||
},
|
||||
//去首页
|
||||
toHome(index) {
|
||||
|
||||
@ -39,9 +39,9 @@
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left" v-show="limitUserId != 5">
|
||||
<div class="weatherStation"></div>
|
||||
<div class="weatherStation" v-show="limitUserId != 12"></div>
|
||||
|
||||
<div class="weather">
|
||||
<div class="weather" v-show="limitUserId != 12">
|
||||
<div>
|
||||
<marquee behavior="" direction="" scrollamount="3">
|
||||
<div class="item" v-for="(item, index) in weatherDataList" :key="index">
|
||||
@ -56,8 +56,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="weather_echart" id="weather_echart" v-show="limitUserId != 11"></div>
|
||||
|
||||
<div class="weather_echart" id="weather_echart" v-show="limitUserId != 11&&limitUserId != 12"></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="e_title">温室环境数据</div>
|
||||
<div class="detail">
|
||||
@ -198,7 +199,7 @@
|
||||
<img class="drag_img" src="../../assets/img/map7.png" alt="" />
|
||||
<img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||||
</div>
|
||||
<!-- 镇海欣丰农场 -->
|
||||
<!-- 金山吕港草莓 -->
|
||||
<div class="drag_box12" ref="drag_box12" v-show="limitUserId == 12">
|
||||
<img class="drag_img" src="../../assets/img/map8.png" alt="" />
|
||||
<img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||||
@ -211,7 +212,7 @@
|
||||
<div class="right">
|
||||
<div class="liveVideo"></div>
|
||||
|
||||
<div class="liveVideo_content">
|
||||
<div class="liveVideo_content" v-show="limitUserId != 12">
|
||||
<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">
|
||||
@ -229,6 +230,10 @@
|
||||
</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>
|
||||
|
||||
@ -414,8 +419,9 @@ import Swiper from "@/assets/js/swiper.min.js";
|
||||
import "@/assets/js/swiper.min.css";
|
||||
import {
|
||||
weather_echart,
|
||||
thisWeekTemperature_echart,
|
||||
thisWeekTemperature_echart
|
||||
} from "@/assets/js/echarts";
|
||||
import { realTimeLine2 } from '@/assets/js/charts'
|
||||
|
||||
import EZUIKit from "ezuikit-js";
|
||||
import videojs from "video.js";
|
||||
@ -549,6 +555,9 @@ export default {
|
||||
close_btn: false,
|
||||
},
|
||||
],
|
||||
|
||||
// 金山吕港草莓数据
|
||||
imgUrl: '',
|
||||
};
|
||||
},
|
||||
beforeMount() {
|
||||
@ -660,6 +669,24 @@ export default {
|
||||
this.get_environmentData(list[0].deviceId);
|
||||
this.get_readControl_getState(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) {
|
||||
|
||||
// 左侧上部气象站charts
|
||||
@ -1866,7 +1893,10 @@ export default {
|
||||
top: 0.56rem;
|
||||
left: 0.66rem;
|
||||
z-index: 999;
|
||||
|
||||
.realTime-line{
|
||||
width: 100%;
|
||||
height: calc((100% - 3.5rem) / 2);
|
||||
}
|
||||
.weatherStation {
|
||||
width: 4rem;
|
||||
height: 0.43rem;
|
||||
@ -2281,7 +2311,7 @@ export default {
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 44%;
|
||||
left: 24%;
|
||||
left:31%;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -2289,8 +2319,8 @@ export default {
|
||||
width: 0.3rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 34%;
|
||||
left: 48%;
|
||||
top: 38%;
|
||||
left: 50%;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -2298,8 +2328,8 @@ export default {
|
||||
width: 0.3rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 44%;
|
||||
left: 75%;
|
||||
top: 42%;
|
||||
left: 72%;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -608,15 +608,7 @@
|
||||
<div class="map1">
|
||||
<div class="drag_box11" ref="drag_box11">
|
||||
<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">
|
||||
<template>
|
||||
@ -682,17 +674,8 @@
|
||||
<div class="map1">
|
||||
<div class="drag_box12" ref="drag_box12">
|
||||
<img class="drag_img" src="../../assets/img/map8.png" alt="" />
|
||||
<div class="popBox">
|
||||
<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">
|
||||
<div class="pole_item" style="top:26.5%;left:46.5%;z-index:1;">
|
||||
<div class="popBox">
|
||||
<div class="pole_item" style="top:33.5%;left:48.5%;z-index:1;">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi.png" alt="" />
|
||||
<span>控制中心</span>
|
||||
@ -700,15 +683,79 @@
|
||||
<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">
|
||||
<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="pole_item" style="top:37.5%;left:70%;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> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1355,6 +1402,20 @@ export default {
|
||||
} else if (id == 10) {
|
||||
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) {
|
||||
if (id == 1) {
|
||||
@ -2856,9 +2917,7 @@ export default {
|
||||
// blue 97%,
|
||||
// transparent 99%
|
||||
// );
|
||||
&.drag_box12{
|
||||
top: 13%;
|
||||
}
|
||||
|
||||
.drag_img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@ -2916,7 +2975,7 @@ export default {
|
||||
|
||||
.pop_content1 {
|
||||
width: 3.5rem;
|
||||
height: 4.55rem;
|
||||
height: 4.8rem;
|
||||
background: url("../../assets/img/pop_bg.png") center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user