update 电对比分析对接接口

src/api/ems/report/reportPort.js

@@ -26,3 +26,12 @@ export function energyPreviewReportList(query) {
     params: query
   })
 }
+
+// 查询能源对比分析接口接口
+export function comparativeAnalysisReport(query) {
+  return request({
+    url: '/ems/report/comparativeAnalysisReport',
+    method: 'get',
+    params: query
+  })
+}

src/views/ems/report/comparativeAnalysisReport/index.vue

@@ -4,6 +4,15 @@
     <el-row :gutter="20">
       <el-col :span="5" :xs="24">
         <div class="head-container">
+          <!--          <el-tag-->
+          <!--            :key="item.monitorId"-->
+          <!--            v-for="item in dynamicTags"-->
+          <!--            closable-->
+          <!--            :disable-transitions="false"-->
+          <!--            @close="handleClose(item.id)"-->
+          <!--          >-->
+          <!--            {{ item.label }}-->
+          <!--          </el-tag>-->
           <el-input
             v-model="workUnitName"
             placeholder="请输入统计单元名称"
@@ -19,18 +28,22 @@
             :props="workUnitProps"
             :expand-on-click-node="false"
             :filter-node-method="filterNode"
+            :check-strictly="true"
             ref="tree"
             node-key="id"
             default-expand-all
             highlight-current
+            show-checkbox
             @node-click="handleNodeClick"
+            @check="handleTreeCheck"
           />
         </div>
       </el-col>
 
       <el-col :span="19" :xs="24">
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
-                 label-width="100px">
+                 label-width="100px"
+        >
           <el-form-item label="日期类型" prop="dateType">
             <el-select v-model="queryParams.dateType" placeholder="请选择日期类型">
               <el-option
@@ -50,6 +63,7 @@
               range-separator="-"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
+              :clearable="false"
             ></el-date-picker>
           </el-form-item>
 
@@ -59,37 +73,13 @@
           </el-form-item>
         </el-form>
 
-        <el-row :gutter="10" class="mb8">
+        <div style="margin-bottom: 24px;">
-          <el-col :span="1.5">
+          <div id="barChart" style="height: 350px; width: 100%;"></div>
-            <el-button
+        </div>
-              type="warning"
+        <div>
-              plain
+          <div id="lineChart" style="height: 350px; width: 100%;"></div>
-              icon="el-icon-download"
+        </div>
-              size="mini"
-              @click="handleExport"
-            >导出
-            </el-button>
-          </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-        </el-row>
 
-        <el-table v-loading="loading" :data="monitorWorkUnitList" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="55" align="center"/>
-          <el-table-column label="主键标识" align="center" prop="objId" v-if="columns[0].visible" />
-          <el-table-column label="统计单元编号" align="center" prop="workUnitCode" v-if="columns[1].visible" />
-          <el-table-column label="统计单元名称" align="center" prop="workUnitName" v-if="columns[2].visible" />
-          <el-table-column label="统计日期" align="center" prop="pointTime" v-if="columns[3].visible" />
-          <el-table-column label="分时类型" align="center" prop="priceType" v-if="columns[4].visible" />
-          <el-table-column label="耗量(kwh)" align="center" prop="expend" v-if="columns[5].visible" />
-          <el-table-column label="价格" align="center" prop="price" v-if="columns[6].visible" />
-        </el-table>
-        <pagination
-          v-show="total>0"
-          :total="total"
-          :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
-          @pagination="getList"
-        />
       </el-col>
     </el-row>
   </div>
@@ -98,15 +88,17 @@
 <script>
 
 import { getWorkUnitTrees } from '@/api/ems/base/baseWorkUnit'
-import Treeselect from "@riophae/vue-treeselect";
+import Treeselect from '@riophae/vue-treeselect'
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import { peaksValleysConsumptionReportList } from '@//api/ems/report/reportPort.js'
+import { comparativeAnalysisReport } from '@//api/ems/report/reportPort.js'
 import { parseTime } from '@//utils/ruoyi'
+import * as echarts from 'echarts'
 
 export default {
-  name: "ComparativeAnalysisReport",
+  name: 'ComparativeAnalysisReport',
   components: {
     Treeselect
+    // Chart 不再注册
   }, data() {
     return {
       monitorInfoOptions: [],
@@ -128,126 +120,161 @@ export default {
       monitorWorkUnitList: [],
       daterangeCollectTime: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       // 查询参数
+      dynamicTags: [],
       queryParams: {
-        pageNum: 1,
-        pageSize: 10,
         monitorCode: null,
         workUnitCode: null,
         monitorStatus: null,
         monitorType: null,
-        dateType: 10,
+        workUnitCodeList: null,
+        dateType: 10
       },
       // 表单参数
       form: {},
       workUnitProps: {
-        children: "children",
+        children: 'children',
-        label: "label"
+        label: 'label'
       },
       dateTypeList: [
-        {dateTypeCode: 10, dateTypeName: '日'},
+        { dateTypeCode: 10, dateTypeName: '日' },
-        {dateTypeCode: 7, dateTypeName: '月'},
+        { dateTypeCode: 7, dateTypeName: '月' },
-        {dateTypeCode: 4, dateTypeName: '年'},
+        { dateTypeCode: 4, dateTypeName: '年' }
       ],
       columns: [
-        {key: 0, label: `主键标识`, visible: false},
+        { key: 0, label: `主键标识`, visible: false },
-        {key: 1, label: `统计单元编号`, visible: true},
+        { key: 1, label: `统计单元编号`, visible: true },
-        {key: 2, label: `统计单元名称`, visible: true},
+        { key: 2, label: `统计单元名称`, visible: true },
-        {key: 3, label: `统计日期`, visible: true},
+        { key: 3, label: `统计日期`, visible: true },
-        {key: 4, label: `分时类型`, visible: true},
+        { key: 4, label: `分时类型`, visible: true },
-        {key: 5, label: `仪表值(kwh)`, visible: true},
+        { key: 5, label: `仪表值(kwh)`, visible: true },
-        {key: 6, label: `价格`, visible: true},
+        { key: 6, label: `价格`, visible: true }
-      ]
+      ],
-    };
+      barChartOption: {
+        title: {
+          text: '耗量柱状图'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['耗量']
+        },
+        xAxis: {
+          type: 'category',
+          data: []
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          name: '耗量',
+          type: 'bar',
+          data: []
+        }]
+      },
+      lineChartOption: {
+        title: {
+          text: '耗量折线图'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['耗量']
+        },
+        xAxis: {
+          type: 'category',
+          data: []
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          name: '耗量',
+          type: 'line',
+          data: []
+        }]
+      }
+    }
   },
   created() {
+    // 其余初始化逻辑
     const nowDate = parseTime(new Date(), '{y}-{m}-{d}')
     this.daterangeCollectTime[0] = nowDate
     this.daterangeCollectTime[1] = nowDate
-    this.getList();
+    this.getWorkUnitTrees()
-    this.getWorkUnitTrees();
+  },
+  mounted() {
+    this.initCharts()
   },
   watch: {
     // 根据名称筛选部门树
     workUnitName(val) {
-      this.$refs.tree.filter(val);
+      this.$refs.tree.filter(val)
     }
   },
   methods: {
     /** 转换统计单元信息数据结构 */
     workUnitOptionsNormalizer(node) {
       if (node.children && !node.children.length) {
-        delete node.children;
+        delete node.children
       }
       return {
         id2: node.workUnitCode,
         label2: node.workUnitName,
         children2: node.children
-      };
+      }
     },
     /** 查询计量设备下拉树结构 */
     getWorkUnitTrees() {
       getWorkUnitTrees().then(response => {
-        this.workUnitOptions = [];
+        this.workUnitOptions = []
-        this.workUnitOptions = JSON.parse(JSON.stringify(response.data).replaceAll('id','id2').replaceAll('code','id'));
+        this.workUnitOptions = JSON.parse(JSON.stringify(response.data).replaceAll('id', 'id2').replaceAll('code', 'id'))
-      });
+      })
     },
     // 筛选节点
     filterNode(value, data) {
-      if (!value) return true;
+      if (!value) return true
-      return data.label.indexOf(value) !== -1;
+      return data.label.indexOf(value) !== -1
     },
     // 节点单击事件
     handleNodeClick(data) {
-      this.queryParams.workUnitCode = data.id;
+      // this.queryParams.workUnitCode = data.id;
-      this.handleQuery();
+      //
     },
-    /** 查询统计计量信息列表 */
+    handleTreeCheck(data) {
-    getList() {
+      const isExisting = this.dynamicTags.some(item => data.id === item.value)
-      this.loading = true;
+      if (isExisting) {
-      this.queryParams.beginCollectTime = null;
+        const index = this.dynamicTags.findIndex(item => data.id === item.value)
-      this.queryParams.endCollectTime = null;
+        if (index !== -1) {
-      if (this.daterangeCollectTime != null && this.daterangeCollectTime !== '') {
+          this.dynamicTags.splice(index, 1)
-        this.queryParams.beginCollectTime = this.daterangeCollectTime[0];
+        }
-        this.queryParams.endCollectTime = this.daterangeCollectTime[1];
+      } else {
+        this.dynamicTags.push({ label: data.label, value: data.id })
       }
-      peaksValleysConsumptionReportList(this.queryParams).then(response => {
+      this.handleQuery()
-        this.monitorWorkUnitList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
     },
-    // 取消按钮
+    //删除左上头部的tag
-    cancel() {
+    handleClose(item) {
-      this.open = false;
+      this.dynamicTags.splice(this.dynamicTags.indexOf(item), 1)
-      this.reset();
+      console.log('handleClose:', this.dynamicTags)
-    },
+
-    // 表单重置
+      this.handleQuery()
-    reset() {
-      this.form = {
-        parentIds: null,
-        parentId: null,
-        objId: null,
-        monitorCode: null,
-        workUnitCode: null,
-        monitorStatus: 0,
-        monitorType: 1,
-      };
-      this.resetForm("form");
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
+      this.queryParams.pageNum = 1
-      this.getList();
+      this.getList(true)
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
+      this.resetForm('queryForm')
-      this.queryParams.workUnitCode = null;
+      this.queryParams.workUnitCode = null
-      this.handleQuery();
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -255,12 +282,77 @@ export default {
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
-    /** 导出按钮操作 */
+
-    handleExport() {
+    // 渲染柱状图
-      this.download('ems/report/peaksValleysConsumptionReportList/export', {
+    renderBarChart(option) {
-        ...this.queryParams
+      const barDom = document.getElementById('barChart')
-      }, `峰平谷耗量报表_${new Date().getTime()}.xlsx`)
+      if (barDom) {
+        const barChart = echarts.init(barDom)
+        barChart.setOption(option)
+        window.addEventListener('resize', () => barChart.resize())
+      }
+    },
+    // 渲染折线图
+    renderLineChart(option) {
+      const lineDom = document.getElementById('lineChart')
+      if (lineDom) {
+        const lineChart = echarts.init(lineDom)
+        lineChart.setOption(option)
+        window.addEventListener('resize', () => lineChart.resize())
+      }
+    },
+    getChartOption({ title, deviceNames, times, series }) {
+      return {
+        title: { text: title },
+        tooltip: { trigger: 'axis' },
+        legend: { data: deviceNames },
+        xAxis: { type: 'category', data: times },
+        yAxis: { type: 'value' },
+        series
+      }
+    },
+    /** 查询统计计量信息列表 */
+    getList(updateChart = false) {
+      this.loading = true
+      this.queryParams.beginCollectTime = null
+      this.queryParams.endCollectTime = null
+      if (this.daterangeCollectTime != null && this.daterangeCollectTime !== '') {
+        this.queryParams.beginCollectTime = this.daterangeCollectTime[0]
+        this.queryParams.endCollectTime = this.daterangeCollectTime[1]
+      }
+
+      const valueList = this.dynamicTags.map(item => item.value)
+      this.queryParams.workUnitCodeList = valueList.toString()
+
+      comparativeAnalysisReport(this.queryParams).then(response => {
+        // 表格数据
+        this.monitorWorkUnitList = response.rows || []
+        this.total = response.total || 0
+        this.loading = false
+        // 图表数据
+        if (updateChart && response.data) {
+          const { deviceNames, times, seriesBar, seriesLine } = response.data
+          const barOption = this.getChartOption({
+            title: '耗量对比分析',
+            deviceNames,
+            times,
+            series: seriesBar
+          })
+          const lineOption = this.getChartOption({
+            title: '能耗曲线',
+            deviceNames,
+            times,
+            series: seriesLine
+          })
+          this.renderBarChart(barOption)
+          this.renderLineChart(lineOption)
+        }
+      })
+    },
+    // 初始化图表
+    initCharts() {
+      this.getList(true)
     }
   }
-};
+}
 </script>