能耗监测分析右侧图

5 months ago · 4fcdae08de
4 changed files with 389 additions and 29 deletions
--- 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 {
--- 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 @@
 <template>
  <a-row type="flex" style="height: 92%">
    <a-col :span="8">
-      <a-radio-group
-        v-model:value="mode"
-        @change="changeMode"
-        style="padding-bottom: 10px; width: 40%; height: 4%; padding-left: 30px; padding-top: 10px">
-        <a-radio-button value="1" style="width: 50%; text-align: center"> 同比 </a-radio-button>
-        <a-radio-button value="2" style="width: 50%; text-align: center"> 环比 </a-radio-button>
-      </a-radio-group>
-      <div ref="analysisGraphchart" style="width: 100%; height: 95%"></div>
+      <div
+        style="
+          box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); /* 灰色阴影 */
+          width: 98%;
+          height: 96%;
+          margin: 2%;
+        ">
+        <a-radio-group
+          v-model:value="mode"
+          @change="changeMode"
+          style="
+            padding-bottom: 10px;
+            width: 40%;
+            height: 4%;
+            padding-left: 30px;
+            padding-top: 10px;
+          ">
+          <a-radio-button value="1" style="width: 50%; text-align: center"> 同比 </a-radio-button>
+          <a-radio-button value="2" style="width: 50%; text-align: center"> 环比 </a-radio-button>
+        </a-radio-group>
+        <div ref="analysisGraphchart" style="width: 100%; height: 95%"></div>
+      </div>
+    </a-col>
+    <a-col :span="16">
+      <div
+        ref="analysisGraphRingchart"
+        style="
+          width: 98%;
+          height: 38%;
+          box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
+          margin: 1%;
+        "></div>
+      <div
+        ref="analysisGraphBarchart"
+        style="
+          width: 98%;
+          height: 58%;
+          box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
+          margin: 1%;
+        "></div>
    </a-col>
-    <a-col :span="16" />
  </a-row>
 </template>

@ -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 `<tr>
-            //               <td>${param.marker}${param.seriesName}</td>
-            //               <td style="text-align: right;">${param.value} ${unit}</td>
-            //             </tr>`;
-            //       })
-            //       .join('');
-            //     return `<div>${date}</div><table style="width: 100%;">${values}</table>`;
-            //   },
-            // },
+            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,
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
@ -24,7 +24,7 @@
          <environment-table ref="tableRef" v-else />
        </div>
        <div v-else style="height: 90%">
-          <analysis-graph ref="graphRef" v-if="isGraph" />
+          <analysis-graph ref="analysisGraphRef" v-if="isGraph" />
          <analysis-table ref="analysisTableRef" v-else />
        </div>
      </div>
@ -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();
+      }
    }
  };

--- 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<SelectProps['options']>([]);
      const mode = ref<String>('1');
      // 能耗类型
-      const selectedValue = ref<string | undefined>();
+      const selectedValue = ref<string | number | null | undefined>();
      // 采集频率
      const frequencyValue = ref<string | undefined>();
      // 时间
@ -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 {