















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