From 4fcdae08de241ac0e704e1e8d7022ad46699cd57 Mon Sep 17 00:00:00 2001 From: fks-yangshouda Date: Fri, 12 Jul 2024 17:05:41 +0800 Subject: [PATCH] =?UTF-8?q?=E8=83=BD=E8=80=97=E7=9B=91=E6=B5=8B=20?= =?UTF-8?q?=E5=88=86=E6=9E=90=20=E5=8F=B3=E4=BE=A7=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/view/monitor/deviceMonitor/tree/index.vue | 1 + .../monitor/energyMonitor/analysisGraph/index.vue | 337 +++++++++++++++++++-- .../src/view/monitor/energyMonitor/page.vue | 8 +- .../src/view/monitor/energyMonitor/tree/index.vue | 72 ++++- 4 files changed, 389 insertions(+), 29 deletions(-) diff --git a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue index a3c572f..dda707f 100644 --- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue +++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue @@ -474,6 +474,7 @@ onMounted(() => { getDianWeiList(); changeDeviceType(null, null); + getSelect(); }); return { diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue index 385fc40..b3948fa 100644 --- a/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue +++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue @@ -1,16 +1,47 @@ @@ -52,11 +83,24 @@ ); const changeMode = () => {}; const analysisGraphchart = ref(null); + const analysisGraphRingchart = ref(null); + const analysisGraphBarchart = ref(null); + // 左侧柱状图 let chartInstance: echarts.ECharts | null = null; + // 圆环图 + let chartRight1: echarts.ECharts | null = null; + + // 右下角柱状图 + let chartRight2: echarts.ECharts | null = null; const draw = () => { data.value = pageData.analysisGraphList; + // 绘制左侧图 + drawLeft(); + drawRight1(); + }; + const drawLeft = () => { if (data.value && data.value.length > 0) { if (chartInstance) { chartInstance.dispose(); @@ -65,7 +109,6 @@ var seriesdata = []; var dateX = []; - // var legendList: string | any[] = []; for (let i = 0; i < data.value.length; i++) { dateX.push(data.value[i].name); @@ -81,26 +124,39 @@ show: true, formatter: '{b}', }, + barWidth: '25%', }, ]; const option = { - // tooltip: { - // trigger: 'axis', - // formatter: (params: any) => { - // const date = params[0].name; - // const values = params - // .map((param: any) => { - // const unit = data.value.find((d) => d.name === date)?.unit || ''; - // return ` - // ${param.marker}${param.seriesName} - // ${param.value} ${unit} - // `; - // }) - // .join(''); - // return `
${date}
${values}
`; - // }, - // }, + grid: { + top: 60, + bottom: 20, + }, + dataZoom: [ + { + show: true, + type: 'slider', + zoomLock: true, + startValue: 0, // 从头开始。 + endValue: 4, + showDetail: false, + width: 5, + yAxisIndex: [0, 1], // 控制y轴滚动对象 + }, + { + show: true, + type: 'inside', + // width: 0, + startValue: 0, + endValue: 10, + minValueSpan: 10, + yAxisIndex: [0], + zoomOnMouseWheel: false, // 关闭滚轮缩放 + moveOnMouseWheel: true, // 开启滚轮平移 + moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移 + }, + ], yAxis: { type: 'category', axisLine: { show: false }, @@ -125,6 +181,233 @@ chartInstance.setOption(option); } }; + const drawRight1 = () => { + if (data.value && data.value.length > 0) { + if (chartRight1) { + chartRight1.dispose(); + } + chartRight1 = echarts.init(analysisGraphRingchart.value); + + var seriesdata = []; + var dateX = []; + // var legendList: string | any[] = []; + for (let i = 0; i < data.value.length; i++) { + dateX.push(data.value[i].name); + + seriesdata.push({ value: data.value[i].ringValue, name: data.value[i].name }); + } + var seriesList = [ + { + // name: data.value[0].energyType, + data: seriesdata, + type: 'pie', + // 圆环内径和外径 + radius: ['70%', '90%'], + center: ['30%', '50%'], // 调整环形图的位置，百分比表示相对于容器的宽高 + // 显示折线 + labelLine: { + show: true, + length: 10, // 调整第一个折线段的长度 + length2: 30, // 调整第二个折线段的长度 + }, + label: { + show: true, + // formatter: '{b}', + position: 'outside', // 确保标签在环形图外部 + // alignTo: 'edge', + formatter: '{c}' + data.value[0].energyUnit + '\n{d}%', + alignTo: 'labelLine', + distanceToLabelLine: 5, // 调整标签和引导线之间的距离 + distance: 10, // 调整标签距离图形的距离 + }, + itemStyle: { + normal: { + // 白色间距 + borderWidth: 2, + borderColor: '#ffffff', + }, + }, + }, + ]; + + const option = { + tooltip: { + trigger: 'item', + }, + + // 图例 + legend: { + top: 'center', + left: '60%', + // 排列方式 垂直 + orient: 'vertical', + }, + yAxis: { + type: 'category', + axisLine: { show: false }, + axisLabel: { show: false }, + axisTick: { show: false }, + splitLine: { show: false }, + data: dateX, + }, + xAxis: { + type: 'value', + position: 'top', + splitLine: { + lineStyle: { + type: 'dashed', + }, + }, + }, + series: seriesList, + }; + + chartRight1 = echarts.init(analysisGraphRingchart.value); + chartRight1.setOption(option); + + // 默认点击第一个 + if (seriesdata.length > 0) { + drawRight2(seriesdata[0]); + } + chartRight1.on('click', function (params) { + // 控制台输出数据的名称 + console.log(params.name + ' 被点击了'); + drawRight2(params); + }); + } + }; + // 右下角柱状图 + // chartRight2 + // analysisGraphBarchart + const drawRight2 = (auxiliary: any) => { + if (chartRight2) { + chartRight2.dispose(); + } + // 辅助线 + var compareData: any[] = []; + // 展示数据 + var showData: any[] = []; + // X轴 + var dateX: any[] = []; + data.value.forEach((item) => { + if (item.name !== auxiliary.name) { + dateX.push(item.name); + showData.push(item.ringValue); + compareData.push(auxiliary.value); + } + }); + + const option = { + // 图例 + legend: { + data: [ + { name: '对比值', icon: 'rect' }, // 对比值使用矩形图标 + { + name: '参考线', + icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z', + }, // 参考线使用自定义路径图标，只显示线条 + ], + orient: 'horizontal', + bottom: 10, + left: 60, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + lineStyle: { + color: 'red', // 设置 tooltip 的线颜色 + }, + }, + }, + grid: { + top: 20, + bottom: 60, + }, + xAxis: { + type: 'category', + axisLine: { show: false }, + axisLabel: { show: true }, + axisTick: { show: false }, + splitLine: { show: false }, + data: dateX, + }, + yAxis: { + type: 'value', + position: 'top', + splitLine: { + lineStyle: { + type: 'dashed', + }, + }, + }, + dataZoom: [ + { + show: true, + type: 'slider', + zoomLock: true, + startValue: 0, // 从头开始。 + endValue: 5, + bottom: '0%', + height: 10, + showDetail: false, + }, + { + show: true, + type: 'inside', + xAxisIndex: 0, + zoomOnMouseWheel: false, // 滚轮是否触发缩放 + moveOnMouseMove: true, // 鼠标滚轮触发滚动 + moveOnMouseWheel: true, + }, + ], + series: [ + { + name: '对比值', + type: 'bar', + stack: 'Total', + label: { + // show: true, + position: 'right', + formatter: '{b}', + }, + data: showData, + barWidth: 30, // 设置柱状图的宽度 + }, + { + name: '参考线', + type: 'line', + data: compareData, + markLine: { + symbol: 'none', + label: { + show: false, + }, + lineStyle: { + type: 'dashed', + color: 'red', + }, + }, + itemStyle: { + color: 'red', // 设置参考线的小圆点颜色 + }, + emphasis: { + itemStyle: { + opacity: 0, // 隐藏鼠标悬停时的节点 + }, + }, + showSymbol: false, // 隐藏数据点 + lineStyle: { + type: 'dashed', // 虚线样式 + color: 'red', + }, + }, + ], + }; + chartRight2 = echarts.init(analysisGraphBarchart.value); + chartRight2.setOption(option); + }; + onMounted(() => { draw(); }); @@ -145,6 +428,8 @@ return { analysisGraphchart, + analysisGraphRingchart, + analysisGraphBarchart, downloadChart, mode, changeMode, diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue index 0f8df1c..3818385 100644 --- a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue +++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue @@ -24,7 +24,7 @@
- +
@@ -44,6 +44,8 @@ const treeRef = ref(); const graphRef = ref(); + const analysisGraphRef = ref(); + const tableRef = ref(); const analysisTableRef = ref(); @@ -59,6 +61,10 @@ if (graphRef.value) { graphRef.value.downloadChart(); } + } else { + if (analysisGraphRef.value) { + analysisGraphRef.value.downloadChart(); + } } }; diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue index d776a25..f6e8062 100644 --- a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue +++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue @@ -93,7 +93,7 @@ const options2 = ref([]); const mode = ref('1'); // 能耗类型 - const selectedValue = ref(); + const selectedValue = ref(); // 采集频率 const frequencyValue = ref(); // 时间 @@ -107,6 +107,9 @@ (item.value = item.cnValue), (item.label = item.cnValue); }); options1.value = options.data.data; // 根据返回数据的结构来更新 options1.value + if (options1.value) { + selectedValue.value = options1.value[0].value; + } } catch (error) { console.error('Failed to fetch options:', error); } @@ -148,7 +151,7 @@ // 选择能耗类型 const changeEnergyType = () => { - if (selectedValue.value == '8') { + if (selectedValue.value == '碳排量') { shebei.value = true; mode.value = '2'; } else { @@ -337,7 +340,9 @@ { name: 'AC_002（暖通电表）', value: -21, + ringValue: 21, energyType: selectedValue.value, + energyUnit: 'kWh', unit: 'V', labelRight: { position: 'right', @@ -346,6 +351,7 @@ { name: 'AC_003（照明电表）', value: 36, + ringValue: 36, energyType: selectedValue.value, unit: 'V', labelRight: { @@ -355,6 +361,67 @@ { name: 'AC_004（给排水电表）', value: -5, + ringValue: 5, + energyType: selectedValue.value, + unit: 'V', + labelRight: { + position: 'right', + }, + }, + { + name: 'AC_005（给排水电表）', + value: -25, + ringValue: 15, + energyType: selectedValue.value, + unit: 'V', + labelRight: { + position: 'right', + }, + }, + { + name: 'AC_006（给排水电表）', + value: 35, + ringValue: 30, + energyType: selectedValue.value, + unit: 'V', + labelRight: { + position: 'insideLeft', + }, + }, + { + name: 'AC_007（给排水电表）', + value: 15, + ringValue: 18, + energyType: selectedValue.value, + unit: 'V', + labelRight: { + position: 'insideLeft', + }, + }, + { + name: 'AC_008（给排水电表）', + value: -25, + ringValue: 41, + energyType: selectedValue.value, + unit: 'V', + labelRight: { + position: 'right', + }, + }, + { + name: 'AC_009（给排水电表）', + value: -5, + ringValue: 55, + energyType: selectedValue.value, + unit: 'V', + labelRight: { + position: 'right', + }, + }, + { + name: 'AC_0090（给排水电表）', + value: -5, + ringValue: 55, energyType: selectedValue.value, unit: 'V', labelRight: { @@ -634,6 +701,7 @@ onMounted(() => { getOptionsList(); changeMode(); + getSelect(); }); return {