diff --git a/src/assets/img/map8.png b/src/assets/img/map8.png index 00dbb1e..90002f8 100644 Binary files a/src/assets/img/map8.png and b/src/assets/img/map8.png differ diff --git a/src/assets/js/charts.js b/src/assets/js/charts.js index e25e234..b8ec422 100644 --- a/src/assets/js/charts.js +++ b/src/assets/js/charts.js @@ -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); diff --git a/src/components/setParams.vue b/src/components/setParams.vue index 6739272..0603955 100644 --- a/src/components/setParams.vue +++ b/src/components/setParams.vue @@ -127,6 +127,7 @@ export default { } } }) + this.$forceUpdate() }, //去首页 toHome(index) { diff --git a/src/views/page/largeScreen.vue b/src/views/page/largeScreen.vue index 8da00e7..d26dc1d 100644 --- a/src/views/page/largeScreen.vue +++ b/src/views/page/largeScreen.vue @@ -39,9 +39,9 @@
-
+
-
+
@@ -56,8 +56,9 @@
-
- +
+
实时数据
+
温室环境数据
@@ -198,7 +199,7 @@
- +
@@ -211,7 +212,7 @@
-
+
@@ -229,6 +230,10 @@
+ +
+ +
@@ -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; } diff --git a/src/views/page/largeScreen1.vue b/src/views/page/largeScreen1.vue index b229748..685d559 100644 --- a/src/views/page/largeScreen1.vue +++ b/src/views/page/largeScreen1.vue @@ -608,15 +608,7 @@
- +