xiaomeng/wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request '金山吕港草莓大数据修改' (#242) from pc-master into portal

Browse Source 
Reviewed-on: #242
This commit is contained in:
xiaomeng 2025-05-12 15:01:03 +00:00
commit 52f16783c2
5 changed files with 473 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/map8.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

344
src/assets/js/charts.js
View File

@ -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);

1
src/components/setParams.vue
View File

@ -127,6 +127,7 @@ export default {
}
}
})
this.$forceUpdate()
},
//去首页
toHome(index) {

56
src/views/page/largeScreen.vue
View File

@ -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;
}

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

@ -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;