From bc0f4b91b3b348863b0e7811cb798d93e55c3698 Mon Sep 17 00:00:00 2001
From: yinq <yinq>
Date: Thu, 15 May 2025 14:17:02 +0800
Subject: [PATCH] =?UTF-8?q?add=20-=20ems=E4=B8=9A=E6=80=81=E8=83=BD?=
 =?UTF-8?q?=E8=80=97=E5=88=86=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/energy/record/statistics.js           |   8 +
 .../index.vue                                 | 709 ++++++++++++++++++
 2 files changed, 717 insertions(+)
 create mode 100644 src/views/energy/report/businessEnergyConsumptionAnalysis/index.vue

diff --git a/src/api/energy/record/statistics.js b/src/api/energy/record/statistics.js
index dc3c395..1e5eab4 100644
--- a/src/api/energy/record/statistics.js
+++ b/src/api/energy/record/statistics.js
@@ -31,3 +31,11 @@ export function getProductConsumptionComparison(query) {
     params: query
   })
 }
+
+export function getBusinessEnergyConsumptionAnalysis(query) {
+  return request({
+    url: '/energy/report/preview/businessEnergyConsumptionAnalysis',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/views/energy/report/businessEnergyConsumptionAnalysis/index.vue b/src/views/energy/report/businessEnergyConsumptionAnalysis/index.vue
new file mode 100644
index 0000000..18b2db8
--- /dev/null
+++ b/src/views/energy/report/businessEnergyConsumptionAnalysis/index.vue
@@ -0,0 +1,709 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="6" :xs="24">
+        <div class="head-container">
+          <el-tag
+            v-for="item in dynamicTags"
+            :key="item.monitorId"
+            closable
+            :disable-transitions="false"
+            @close="handleClose(item.monitorId)"
+          >
+            {{ item.label }}
+          </el-tag>
+          <el-input
+            v-model="deptName"
+            placeholder="请输入业态名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container tree">
+          <el-tree
+            ref="tree"
+            :data="deptOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            node-key="id"
+            default-expand-all
+            highlight-current
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <!--右侧数据-->
+      <el-col :span="18" :xs="24">
+        <!--头部搜索条件输入框  -->
+        <el-form
+          ref="queryForm"
+          :model="queryParams"
+          :inline="true"
+          size="small"
+          v-show="showSearch"
+          label-width="68px"
+          class="search-form"
+        >
+          <el-form-item label="采集时间">
+            <el-date-picker
+              v-model="queryParams.startTime"
+              :type="getDatePickerType"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              :placeholder="getDatePickerPlaceholder"
+              style="width: 240px"
+              @change="handleQuery"
+            />
+            <span class="mx-2">-</span>
+            <el-date-picker
+              v-model="queryParams.endTime"
+              :type="getDatePickerType"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              :placeholder="getDatePickerPlaceholder"
+              style="width: 240px"
+              @change="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="时间范围" prop="status">
+            <el-select
+              v-model="queryParams.type"
+              placeholder="请选择"
+              clearable
+              style="width: 240px"
+              @change="handleTimeRangeChange"
+            >
+              <el-option
+                v-for="dict in timeRangeOptions"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <!--图表区域 -->
+        <el-row :gutter="20" style="margin-bottom: 20px">
+          <!--左侧饼图-->
+          <el-col :span="8">
+            <el-card class="chart-card">
+              <div style="width: 100%; height: 360px" id="pieChart"></div>
+              <div class="total-expend">
+                总用电量：{{ totalExpend }} kW·h
+              </div>
+            </el-card>
+          </el-col>
+          <!--右侧曲线图-->
+          <el-col :span="16">
+            <el-card class="chart-card">
+              <div style="width: 100%; height: 360px" id="lineChart"></div>
+            </el-card>
+          </el-col>
+        </el-row>
+        <!--表格区域-->
+        <el-card>
+          <el-table
+            v-loading="loading"
+            :data="tableData"
+            style="width: 100%"
+            border
+          >
+            <el-table-column
+              v-for="col in columns"
+              :key="col.key"
+              :prop="col.key"
+              :label="col.label"
+              :width="col.width"
+              align="center"
+              v-if="col.visible"
+            />
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {getBusinessEnergyConsumptionAnalysis} from '@/api/energy/record/statistics'
+import {getToken} from "@/utils/auth";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import * as echarts from "echarts";
+import {treeDattwo} from "@/api/energy/energy/base/typeRelation";
+
+export default {
+  name: "BusinessEnergyConsumptionAnalysis",
+  dicts: ["sys_normal_disable", "sys_user_sex"],
+  components: {Treeselect},
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: null,
+      // 弹出层标题
+      title: "",
+      // 部门树选项
+      deptOptions: [],
+      // 是否显示弹出层
+      open: false,
+      // 部门名称
+      deptName: undefined,
+      // 默认密码
+      initPassword: undefined,
+      // 日期范围
+      dateRange: [],
+      dateRangeone: '',
+      dateRangetwo: '',
+      // 岗位选项
+      postOptions: [],
+      // 角色选项
+      roleOptions: [],
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: "children",
+        label: "lable",
+      },
+      // 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: {Authorization: "Bearer " + getToken()},
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/system/user/importData",
+      },
+      // 查询参数
+      queryParams: {
+        type: 'day',
+        startTime: '',
+        endTime: '',
+        energyType: 2,
+        businessId: '',
+      },
+      // 列信息
+      columns: [
+        {key: 'businessName', label: '业态名称',  visible: true},
+        {key: 'monitorId', label: '计量设备编号', visible: true},
+        {key: 'monitorName', label: '计量设备名称', visible: true},
+        {key: 'expend', label: '能耗值(kW·h)', visible: true},
+      ],
+      //柱状图+折线图
+      option: {
+        title: {
+          text: "环比分析",
+          left: "center",
+        },
+        tooltip: {
+          trigger: "axis",
+          formatter: function (params) {
+            var relvsl = '';
+            for (var i = 0, l = params.length; i < l; i++) {
+              relvsl += params[i].marker + ' ' + params[i].seriesName + "(KW-h):" + params[i].data + '<br>'
+            }
+            return params[0].name + '<br>' + relvsl
+          },
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          data: [],
+          right: "5%",
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:KW-h",
+            axisLine: {
+              show: true,
+            }
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value;
+              },
+            },
+            data: [],
+          },
+        ],
+      },
+      optionTwo: {
+        title: {
+          text: "能耗曲线",
+          left: "center",
+        },
+        tooltip: {
+          trigger: "axis",
+          formatter: function (params) {
+            var relvsl = '';
+            for (var i = 0, l = params.length; i < l; i++) {
+              relvsl += params[i].marker + ' ' + params[i].seriesName + "(KW-h):" + params[i].data + '<br>'
+            }
+            return params[0].name + '<br>' + relvsl
+          },
+        },
+        legend: {
+          data: [],
+          right: '5%',
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [],
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW-h",
+          axisLine: {
+            show: true,
+          }
+        },
+        series: [],
+      },
+      dynamicTags: [],
+      // 时间范围选项
+      timeRangeOptions: [
+        // {label: "时", value: "hour"},
+        {label: "日", value: "day"},
+        {label: "月", value: "month"},
+        {label: "年", value: "year"},
+      ],
+      // 图表配置
+      chartOptions: {
+        pieChart: {
+          title: {text: "能耗占比", left: "center"},
+          tooltip: {
+            trigger: "item",
+            formatter: "{b}<br/>用电量: {c} kW·h<br/>占比: {d}%"
+          },
+          legend: {
+            orient: "vertical",
+            top: '80%',
+            left: "center",
+            data: []
+          },
+          series: [
+            {
+              name: "能耗占比",
+              type: "pie",
+              radius: ["40%", "70%"],
+              avoidLabelOverlap: false,
+              itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+              },
+              label: {
+                show: false,
+                formatter: '{b}: {d}%'
+              },
+              labelLine: {
+                show: false
+              },
+              emphasis: {
+                label: {
+                  show: false,
+                  fontSize: '16',
+                  fontWeight: 'bold'
+                }
+              },
+              data: []
+            }
+          ]
+        },
+        lineChart: {
+          title: {text: "能耗趋势", left: "center"},
+          tooltip: {
+            trigger: "axis",
+            formatter: function(params) {
+              return params[0].name + '<br/>' +
+                     params[0].seriesName + ': ' +
+                     params[0].value.toFixed(2) + ' kW·h';
+            }
+          },
+          legend: {data: [], right: "5%"},
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: [],
+            axisLabel: {
+              rotate: 45
+            }
+          },
+          yAxis: {
+            type: "value",
+            name: "单位:kW·h",
+            axisLine: {show: true},
+            axisLabel: {
+              formatter: '{value}'
+            }
+          },
+          series: []
+        }
+      },
+      // 表格数据
+      tableData: [],
+      // 总用电量
+      totalExpend: 0,
+    };
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  created() {
+    this.initDateTime();
+    this.getDeptTree();
+  },
+  mounted() {
+    this.initCharts();
+  },
+  methods: {
+    // 初始化方法
+    initDateTime() {
+      const now = new Date();
+      const startTime = new Date(now.setHours(0, 0, 0, 0));
+      const endTime = new Date(now.setHours(23, 59, 59, 999));
+
+      this.queryParams.startTime = this.formatDateTime(startTime, this.queryParams.type);
+      this.queryParams.endTime = this.formatDateTime(endTime, this.queryParams.type);
+    },
+
+    initCharts() {
+      const pieChart = echarts.init(document.getElementById("pieChart"));
+      const lineChart = echarts.init(document.getElementById("lineChart"));
+
+      pieChart.setOption(this.chartOptions.pieChart);
+      lineChart.setOption(this.chartOptions.lineChart);
+    },
+
+    // 工具方法
+    formatDateTime(date, type) {
+      const pad = num => String(num).padStart(2, '0');
+      const year = date.getFullYear();
+      const month = pad(date.getMonth() + 1);
+      const day = pad(date.getDate());
+      const hours = pad(date.getHours());
+      const minutes = pad(date.getMinutes());
+      const seconds = pad(date.getSeconds());
+
+      switch (type) {
+        case 'year':
+          return `${year}-01-01 00:00:00`;
+        case 'month':
+          return `${year}-${month}-01 00:00:00`;
+        case 'day':
+          return `${year}-${month}-${day} 00:00:00`;
+        case 'hour':
+        default:
+          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+      }
+    },
+
+    // 获取结束时间
+    getEndDateTime(date, type) {
+      const pad = num => String(num).padStart(2, '0');
+      const year = date.getFullYear();
+      const month = pad(date.getMonth() + 1);
+      const day = pad(date.getDate());
+
+      switch (type) {
+        case 'year':
+          return `${year}-12-31 23:59:59`;
+        case 'month':
+          // 获取当月最后一天
+          const lastDay = new Date(year, date.getMonth() + 1, 0).getDate();
+          return `${year}-${month}-${pad(lastDay)} 23:59:59`;
+        case 'day':
+          return `${year}-${month}-${day} 23:59:59`;
+        case 'hour':
+        default:
+          return `${year}-${month}-${day} 23:59:59`;
+      }
+    },
+
+    // 监听时间范围变化
+    handleTimeRangeChange(type) {
+      const now = new Date();
+      const startTime = new Date(now.setHours(0, 0, 0, 0));
+      const endTime = new Date(now.setHours(23, 59, 59, 999));
+
+      this.queryParams.startTime = this.formatDateTime(startTime, type);
+      this.queryParams.endTime = this.getEndDateTime(endTime, type);
+      this.handleQuery();
+    },
+
+    //数组转树形结构
+    tranListToTreeData(list) {
+      // 最终要产出的树状数据的数组
+      const treeList = []
+      // 所有项都使用对象存储起来
+      const map = {}
+
+      // 建立一个映射关系：通过id快速找到对应的元素
+      list.forEach(item => {
+        if (!item.children) {
+          item.children = []
+        }
+        map[item.id] = item
+      })
+
+      list.forEach(item => {
+        // 对于每一个元素来说，先找它的上级
+        //    如果能找到，说明它有上级，则要把它添加到上级的children中去
+        //    如果找不到，说明它没有上级，直接添加到 treeList
+        const parent = map[item.pId]
+        // 如果存在则表示item不是最顶层的数据
+        if (parent) {
+          parent.children.push(item)
+        } else {
+          // 如果不存在 则是顶层数据
+          treeList.push(item)
+        }
+      })
+      // 返回出去
+      return treeList
+    },
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      treeDattwo().then((response) => {
+        response.map((item, index) => {
+          item,
+            item.oid = item.id,
+            item.lable = item.name
+        })
+        this.deptOptions = this.tranListToTreeData(response);
+        console.log(this.deptOptions)
+        //this.deptOptions = response.data;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.lable.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      console.log("data", data);
+      this.queryParams.businessId = data.id; //单选
+      // this.dynamicTags.push({label: data.name, value: data.id});
+      this.handleQuery();
+    },
+    //删除左上头部的tag
+    handleClose(item) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(item), 1);
+      let querydata = [];
+      this.dynamicTags.map((item) => {
+        querydata.push(item.value);
+      });
+      querydata.toString();
+      this.handleQuery();
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        userId: undefined,
+        monitorId: undefined,
+        userName: undefined,
+        nickName: undefined,
+        password: undefined,
+        phonenumber: undefined,
+        email: undefined,
+        sex: undefined,
+        status: "0",
+        remark: undefined,
+        postIds: [],
+        roleIds: [],
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    async handleQuery() {
+      this.loading = true;  // 开始加载时显示遮罩层
+      try {
+        // 获取能耗曲线数据
+        const response = await getBusinessEnergyConsumptionAnalysis({
+          type: this.queryParams.type,
+          startTime: this.queryParams.startTime,
+          endTime: this.queryParams.endTime,
+          businessId: this.queryParams.businessId,
+          energyType: 2
+        });
+
+        // 更新能耗曲线图表
+        this.updateEnergyChart(response.data);
+      } catch (error) {
+        console.error('获取数据失败:', error);
+      } finally {
+        this.loading = false;  // 无论成功失败都关闭遮罩层
+      }
+    },
+
+    // 更新能耗曲线图表
+    updateEnergyChart(data) {
+      // 更新表格数据
+      this.updateTableData(data);
+
+      // 更新总用电量
+      this.totalExpend = data.totalExpend || 0;
+
+      // 更新折线图数据
+      const lineChart = echarts.init(document.getElementById("lineChart"));
+      const xAxisData = data.lineDnbList.map(item => item.begin_time);
+      const seriesData = [{
+        name: '能耗值',
+        type: 'line',
+        data: data.lineDnbList.map(item => item.expend)
+      }];
+
+      this.chartOptions.lineChart.xAxis.data = xAxisData;
+      this.chartOptions.lineChart.series = seriesData;
+      lineChart.setOption(this.chartOptions.lineChart);
+
+      // 更新饼图数据
+      const pieChart = echarts.init(document.getElementById("pieChart"));
+      const pieData = Object.entries(data.pieMap).map(([name, value]) => ({
+        name: name,
+        value: value
+      }));
+
+      this.chartOptions.pieChart.legend.data = pieData.map(item => item.name);
+      this.chartOptions.pieChart.series[0].data = pieData;
+      pieChart.setOption(this.chartOptions.pieChart);
+    },
+
+    // 更新表格数据
+    updateTableData(data) {
+      this.tableData = data.tableList;
+      this.loading = false;
+    },
+  },
+  computed: {
+    getDatePickerType() {
+      switch (this.queryParams.type) {
+        case 'year':
+          return 'year';
+        case 'month':
+          return 'month';
+        case 'day':
+          return 'date';
+        case 'hour':
+        default:
+          return 'date';
+      }
+    },
+    getDatePickerPlaceholder() {
+      switch (this.queryParams.type) {
+        case 'year':
+          return '选择年份';
+        case 'month':
+          return '选择月份';
+        case 'day':
+          return '选择日期';
+        case 'hour':
+        default:
+          return '选择日期时间';
+      }
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.tree {
+  width: 220px;
+
+  ::v-deep .el-tree-node {
+    white-space: normal;
+    .el-tree-node__content {
+      height: 100%;
+      align-items: start;
+    }
+  }
+}
+
+.mx-2 {
+  margin: 0 8px;
+}
+
+.search-form {
+  margin-bottom: 20px;
+  padding: 20px;
+  background: #fff;
+  border-radius: 4px;
+}
+
+.chart-card {
+  height: 400px;
+  margin-bottom: 20px;
+
+  ::v-deep .el-card__body {
+    height: 100%;
+    padding: 20px;
+  }
+}
+
+.total-expend {
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #303133;
+  margin-top: 0px;
+}
+</style>