package.json

@@ -75,6 +75,7 @@
     "vue-video-player": "^5.0.2",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.2",
+    "xlsx": "^0.18.5",
     "xml-js": "1.6.11"
   },
   "devDependencies": {

src/api/analysis/energyAnalysis.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 获取走势分析数据
+export function getEnergyTrend(data) {
+  return request({
+    url: '/analysis/energy-analysis/getTrend',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取对比分析数据
+export function getCompare(data) {
+  return request({
+    url: '/analysis/energy-analysis/getCompare',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取同比分析数据(1:季度,2:月;3:日)
+export function getYoy(data) {
+  return request({
+    url: '/analysis/energy-analysis/getYoy',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取环比分析数据(1:月,2:周,3:日)
+export function getQoq(data) {
+  return request({
+    url: '/analysis/energy-analysis/getChain',
+    method: 'post',
+    data: data
+  })
+}

src/api/base/energyPlc.js

@@ -0,0 +1,70 @@
+import request from '@/utils/request'
+
+// 创建能源实时数据库plc相关
+export function createEnergyPlc(data) {
+  return request({
+    url: '/base/energy-plc/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新能源实时数据库plc相关
+export function updateEnergyPlc(data) {
+  return request({
+    url: '/base/energy-plc/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除能源实时数据库plc相关
+export function deleteEnergyPlc(id) {
+  return request({
+    url: '/base/energy-plc/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得能源实时数据库plc相关
+export function getEnergyPlc(id) {
+  return request({
+    url: '/base/energy-plc/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得实时数据表列表(所有)
+export function getEnergyPlcAll() {
+  return request({
+    url: '/base/energy-plc/listAll',
+    method: 'get'
+  })
+}
+
+// 获取关联表编码
+export function getCode() {
+  return request({
+    url: '/base/energy-plc/getCode',
+    method: 'get'
+  })
+}
+
+// 获得能源实时数据库plc相关分页
+export function getEnergyPlcPage(data) {
+  return request({
+    url: '/base/energy-plc/page',
+    method: 'post',
+    data: data
+  })
+}
+
+// 导出能源实时数据库plc相关 Excel
+export function exportEnergyPlcExcel(query) {
+  return request({
+    url: '/base/energy-plc/export-excel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}

src/api/base/energyPlcConnect.js

@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+// 创建能源与对象的关联关系（一对多）
+export function createEnergyPlcConnect(data) {
+  return request({
+    url: '/base/energy-plc-connect/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新能源与对象的关联关系（一对多）
+export function updateEnergyPlcConnect(data) {
+  return request({
+    url: '/base/energy-plc-connect/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除能源与对象的关联关系（一对多）
+export function deleteEnergyPlcConnect(id) {
+  return request({
+    url: '/base/energy-plc-connect/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得能源与对象的关联关系（一对多）
+export function getEnergyPlcConnect(id) {
+  return request({
+    url: '/base/energy-plc-connect/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得能源与对象的关联关系（一对多）分页
+export function getEnergyPlcConnectPage(data) {
+  return request({
+    url: '/base/energy-plc-connect/page',
+    method: 'post',
+    data: data
+  })
+}
+
+// 导出能源与对象的关联关系（一对多） Excel
+export function exportEnergyPlcConnectExcel(query) {
+  return request({
+    url: '/base/energy-plc-connect/export-excel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}

src/api/base/energyPlcParam.js

@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+// 创建能源plc详细点
+export function createEnergyPlcParam(data) {
+  return request({
+    url: '/base/energy-plc-param/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新能源plc详细点
+export function updateEnergyPlcParam(data) {
+  return request({
+    url: '/base/energy-plc-param/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除能源plc详细点
+export function deleteEnergyPlcParam(id) {
+  return request({
+    url: '/base/energy-plc-param/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得能源plc详细点
+export function getEnergyPlcParam(id) {
+  return request({
+    url: '/base/energy-plc-param/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得能源plc详细点分页
+export function getEnergyPlcParamPage(data) {
+  return request({
+    url: '/base/energy-plc-param/page',
+    method: 'post',
+    data: data
+  })
+}
+
+// 导出能源plc详细点 Excel
+export function exportEnergyPlcParamExcel(query) {
+  return request({
+    url: '/base/energy-plc-param/export-excel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}

src/api/base/energyQuantityRealtime.js

@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+// 创建后端统计 能源抄表 实时
+export function createEnergyQuantityRealtime(data) {
+  return request({
+    url: '/base/energy-quantity-realtime/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新后端统计 能源抄表 实时
+export function updateEnergyQuantityRealtime(data) {
+  return request({
+    url: '/base/energy-quantity-realtime/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除后端统计 能源抄表 实时
+export function deleteEnergyQuantityRealtime(id) {
+  return request({
+    url: '/base/energy-quantity-realtime/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得后端统计 能源抄表 实时
+export function getEnergyQuantityRealtime(id) {
+  return request({
+    url: '/base/energy-quantity-realtime/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得后端统计 能源抄表 实时分页
+export function getEnergyQuantityRealtimePage(data) {
+  return request({
+    url: '/base/energy-quantity-realtime/page',
+    method: 'post',
+    data: data
+  })
+}
+
+// 导出后端统计 能源抄表 实时 Excel
+export function exportEnergyQuantityRealtimeExcel(data) {
+  return request({
+    url: '/base/energy-quantity-realtime/export-excel',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}

src/api/base/energyType.js

@@ -43,6 +43,14 @@ export function getEnergyTypePage(data) {
   })
 }
 
+// 获得能源类型列表(获取所有)
+export function getEnergyTypeListAll() {
+  return request({
+    url: '/base/energy-type/listAll',
+    method: 'get'
+  })
+}
+
 // 获得能源类型编码
 export function getEnergyTypeCode() {
   return request({

src/api/base/equipment.js

@@ -52,3 +52,10 @@ export function exportEquipmentExcel(query) {
     responseType: 'blob'
   })
 }
+// 获得所有设备列表
+export function getEquipmentAll() {
+  return request({
+    url: '/base/equipment/listAll',
+    method: 'get'
+  })
+}

src/api/base/factory.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+// 获得工厂产线工段设备树形结构
+export function getTree() {
+  return request({
+    url: '/base/factory/getTree',
+    method: 'get'
+  })
+}

src/api/base/productionLine.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+// 获得所有工厂产线列表
+export function getLineAll() {
+  return request({
+    url: '/base/production-line/listAll',
+    method: 'get'
+  })
+}

src/api/base/workshopSection.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+// 获得所有产线工段列表
+export function getWorkShopAll() {
+  return request({
+    url: '/base/workshop-section/listAll',
+    method: 'get'
+  })
+}

src/api/monitoring/energyLimit.js

@@ -0,0 +1,63 @@
+import request from '@/utils/request'
+
+// 创建能源监控配置
+export function createEnergyLimit(data) {
+  return request({
+    url: '/monitoring/energy-limit/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新能源监控配置
+export function updateEnergyLimit(data) {
+  return request({
+    url: '/monitoring/energy-limit/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除能源监控配置
+export function deleteEnergyLimit(id) {
+  return request({
+    url: '/monitoring/energy-limit/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得能源监控配置
+export function getEnergyLimit(id) {
+  return request({
+    url: '/monitoring/energy-limit/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得能源监控配置分页
+export function getEnergyLimitPage(data) {
+  return request({
+    url: '/monitoring/energy-limit/page',
+    method: 'post',
+    data: data
+  })
+}
+
+// 导出能源监控配置 Excel
+export function exportEnergyLimitExcel(query) {
+  return request({
+    url: '/monitoring/energy-limit/export-excel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}
+
+// 获取详细参数列表
+export function getEnergyParamList(data) {
+  return request({
+    url: '/monitoring/energy-limit/listParam',
+    method: 'post',
+    data: data
+  })
+}

src/api/monitoring/energyOverlimitLog.js

@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+// 创建能源超限记录
+export function createEnergyOverlimitLog(data) {
+  return request({
+    url: '/monitoring/energy-overlimit-log/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新能源超限记录
+export function updateEnergyOverlimitLog(data) {
+  return request({
+    url: '/monitoring/energy-overlimit-log/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除能源超限记录
+export function deleteEnergyOverlimitLog(id) {
+  return request({
+    url: '/monitoring/energy-overlimit-log/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得能源超限记录
+export function getEnergyOverlimitLog(id) {
+  return request({
+    url: '/monitoring/energy-overlimit-log/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得能源超限记录分页
+export function getEnergyOverlimitLogPage(data) {
+  return request({
+    url: '/monitoring/energy-overlimit-log/page',
+    method: 'post',
+    data: data
+  })
+}
+
+// 导出能源超限记录 Excel
+export function exportEnergyOverlimitLogExcel(query) {
+  return request({
+    url: '/monitoring/energy-overlimit-log/export-excel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}

src/api/monitoring/energyReport.js

@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+// 获得能耗统计查询分页
+export function energyReportPage(data) {
+  return request({
+    url: '/monitoring/energy-report/page',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获得能耗统计报表分页
+export function energyReportPageAuto(data) {
+  return request({
+    url: '/monitoring/energy-report/pageAuto',
+    method: 'post',
+    data: data
+  })
+}
+
+// 导出能耗统计查询
+export function energyReportPageExport(data) {
+  return request({
+    url: '/monitoring/energy-report/export',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}
+
+// 导出能耗统计报表
+export function energyReportPageExportAuto(data) {
+  return request({
+    url: '/monitoring/energy-report/exportAuto',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}

src/api/monitoring/energyStatistics.js

@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+
+// 创建能源统计主
+export function createEnergyStatistics(data) {
+  return request({
+    url: '/monitoring/energy-statistics/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新能源统计主
+export function updateEnergyStatistics(data) {
+  return request({
+    url: '/monitoring/energy-statistics/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除能源统计主
+export function deleteEnergyStatistics(id) {
+  return request({
+    url: '/monitoring/energy-statistics/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得能源统计主
+export function getEnergyStatistics(id) {
+  return request({
+    url: '/monitoring/energy-statistics/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得能源统计主分页
+export function getEnergyStatisticsPage(data) {
+  return request({
+    url: '/monitoring/energy-statistics/page',
+    method: 'post',
+    data: data
+  })
+}
+
+// 导出能源统计主 Excel
+export function exportEnergyStatisticsExcel(query) {
+  return request({
+    url: '/monitoring/energy-statistics/export-excel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}
+
+// 获取编码
+export function getCode() {
+  return request({
+    url: '/monitoring/energy-statistics/getCode',
+    method: 'get'
+  })
+}

src/api/monitoring/energyStatisticsDet.js

@@ -0,0 +1,72 @@
+import request from '@/utils/request'
+
+// 创建能源统计详细表
+export function createEnergyStatisticsDet(data) {
+  return request({
+    url: '/monitoring/energy-statistics-det/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新能源统计详细表
+export function updateEnergyStatisticsDet(data) {
+  return request({
+    url: '/monitoring/energy-statistics-det/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除能源统计详细表
+export function deleteEnergyStatisticsDet(id) {
+  return request({
+    url: '/monitoring/energy-statistics-det/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得能源统计详细表
+export function getEnergyStatisticsDet(id) {
+  return request({
+    url: '/monitoring/energy-statistics-det/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得能源统计详细表分页
+export function getEnergyStatisticsDetPage(data) {
+  return request({
+    url: '/monitoring/energy-statistics-det/page',
+    method: 'post',
+    data: data
+  })
+}
+
+// 导出能源统计详细表 Excel
+export function exportEnergyStatisticsDetExcel(query) {
+  return request({
+    url: '/monitoring/energy-statistics-det/export-excel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}
+
+// 获得 新增参数关联 分页
+export function addParamPage(data) {
+  return request({
+    url: '/monitoring/energy-statistics-det/addParamPage',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除（批量）
+export function deleteMany(data) {
+  return request({
+    url: '/monitoring/energy-statistics-det/deleteMany',
+    method: 'post',
+    data: data
+  })
+}

src/styles/index.scss

@@ -176,3 +176,23 @@ input, textarea{
 ::-webkit-scrollbar-thumb:hover {
   background-color: rgba(144,147,153,.3);
 }
+
+// 抽屉head区域---start
+.el-drawer__header {
+  padding-bottom: 20px;
+  margin-bottom: 23px;
+  font-size: 20px;
+  font-weight: 500;
+  color: rgba(0,0,0,0.85);
+  border-bottom: 1px solid rgba(233, 233, 233, 1);
+}
+.el-drawer__header > :first-child::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 24px;
+  background-color: #0b58ff;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+// 抽屉head区域---end

src/utils/chartMixins/resize.js

@@ -0,0 +1,64 @@
+import { debounce } from '@/utils/debounce'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm =
+        document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm &&
+        this.$_sidebarElm.addEventListener(
+          'transitionend',
+          this.$_sidebarResizeHandler
+        )
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm &&
+        this.$_sidebarElm.removeEventListener(
+          'transitionend',
+          this.$_sidebarResizeHandler
+        )
+    }
+  }
+}

src/utils/debounce.js

@@ -0,0 +1,40 @@
+/**
+ * @param {Function} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {*}
+ */
+export function debounce(func, wait, immediate) {
+  let timeout, args, context, timestamp, result
+
+  const later = function () {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp
+
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
+    }
+  }
+
+  return function (...args) {
+    context = this
+    timestamp = +new Date()
+    const callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      context = args = null
+    }
+
+    return result
+  }
+}

src/utils/dict.js

@@ -91,7 +91,11 @@ export const DICT_TYPE = {
   ENERGY_UNIT: 'energy_unit',
   
   // ============== ENERGY - 能源模块 =============
-  EQU_ALARM_LEVEL: 'equ_alarm_level'
+  EQU_ALARM_LEVEL: 'equ_alarm_level',
+  MONITOR_INDEX_TYPE: 'monitor_index_type',
+  OBJECT_TYPE: 'object_type',
+  STATISTIC_TYPE: 'statistic_type',
+  TIME_DIM: 'time_dim'
 }
 
 /**

src/views/energy/analysis/contrastAnalysis/components/barChart.vue

@@ -0,0 +1,98 @@
+<template>
+  <div 
+    id="analysischartBar"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "BarChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(214) - 70
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(214) - 70
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartBar')
+      this.chart = echarts.init(this.chartDom)
+      let tempArr = []
+      let xData = []
+      let yData = []
+      let legendData = []
+      if (this.chartData.length === 0) {
+        return false
+      } else {
+        tempArr = this.chartData[0].trendRespVOList
+      }
+      for (let k = 0; k < tempArr.length; k++) {
+        xData.push(tempArr[k].time)
+      }
+      for (let i = 0; i < this.chartData.length; i++) {
+        let obj = {
+          name: this.chartData[i].objName + this.chartData[i].objCode,
+          type: 'bar',
+          data: []
+        }
+        legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
+        let temp = this.chartData[i].trendRespVOList
+        for (let j = 0; j < temp.length; j++) {
+          let num = temp[j].useNum ? temp[j].useNum : 0
+          obj.data.push(num)
+        }
+        yData.push(obj)
+      }
+      var option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: legendData
+        },
+        xAxis: {
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: yData
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>

src/views/energy/analysis/contrastAnalysis/components/lineChart.vue

@@ -0,0 +1,100 @@
+<template>
+  <div 
+    id="analysischartLine"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "LineChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(214) - 70
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(214) - 70
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartLine')
+      this.chart = echarts.init(this.chartDom)
+      let tempArr = []
+      let xData = []
+      let yData = []
+      let legendData = []
+      if (this.chartData.length === 0) {
+        return false
+      } else {
+        tempArr = this.chartData[0].trendRespVOList
+      }
+      for (let k = 0; k < tempArr.length; k++) {
+        xData.push(tempArr[k].time)
+      }
+      for (let i = 0; i < this.chartData.length; i++) {
+        let obj = {
+          name: this.chartData[i].objName + this.chartData[i].objCode,
+          type: 'line',
+          stack: 'Total',
+          data: []
+        }
+        legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
+        let temp = this.chartData[i].trendRespVOList
+        for (let j = 0; j < temp.length; j++) {
+          let num = temp[j].useNum ? temp[j].useNum : 0
+          obj.data.push(num)
+        }
+        yData.push(obj)
+      }
+
+      var option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: legendData
+        },
+        xAxis: {
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: yData
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>

src/views/energy/analysis/contrastAnalysis/components/searchArea.vue

@@ -0,0 +1,403 @@
+<template>
+  <el-form :inline="true" class="demo-form-inline">
+    <el-form-item label="能源类型">
+      <el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;">
+        <el-option
+          v-for="item in energyTypeList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时间维度">
+      <el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;">
+        <el-option
+          v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时间范围">
+      <div v-show="queryParams.timeDim === '1'">
+        <el-date-picker
+          v-model="timeValue"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy-MM-dd HH:mm"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          popper-class="noneMinute"
+          @change="timeSelect"
+          :clearable="false"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '2'">
+        <el-date-picker
+          v-model="dateValue"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          @change="timeSelect"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '3'">
+        <el-date-picker
+          v-model="weekValue1"
+          type="week"
+          format="yyyy 第 WW 周"
+          style='width:150px;'
+          :picker-options="pickerOptionsWeek"
+          @change="startWeek"
+          :clearable="false"
+          placeholder="选择周">
+        </el-date-picker>-
+        <el-date-picker
+          v-model="weekValue2"
+          type="week"
+          format="yyyy 第 WW 周"
+          :picker-options="pickerOptionsWeek"
+          style='width:150px;'
+          @change="endWeek"
+          :clearable="false"
+          placeholder="选择周">
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '4'">
+        <el-date-picker
+          v-model="monthValue"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="timestamp"
+          :clearable="false"
+          :picker-options="pickerOptions"
+          @change="timeSelect"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '5'">
+        <el-date-picker
+          style='width:100px;'
+          v-model="yearValue1"
+          type="year"
+          :picker-options="pickerOptions"
+          value-format="timestamp"
+          placeholder="选择年"
+          @change="startYear"
+          :clearable="false"
+        >
+        </el-date-picker>-
+        <el-date-picker
+          style='width:100px;'
+          v-model="yearValue2"
+          type="year"
+          :picker-options="pickerOptions"
+          value-format="timestamp"
+          placeholder="选择年"
+          @change="endYear"
+          :clearable="false"
+        >
+        </el-date-picker>
+      </div>
+    </el-form-item>
+    <el-form-item label="对象维度">
+      <el-select v-model="queryParams.objType" placeholder="请选择" style="width: 80px;" @change="selectObjs">
+        <el-option
+          v-for="item in getDictDatas(this.DICT_TYPE.OBJECT_TYPE)"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="对象选择">
+      <el-select v-model="queryParams.objIds" placeholder="请选择" multiple collapse-tags style="width: 200px;">
+        <el-option
+          v-for="item in objectList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
+          <span style="float: left">{{ item.name }}</span>
+          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="search">查询</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getEnergyTypeListAll } from "@/api/base/energyType"
+import { getLineAll } from "@/api/base/productionLine"
+import { getWorkShopAll } from "@/api/base/workshopSection"
+import { getEquipmentAll } from "@/api/base/equipment"
+import moment from 'moment'
+export default {
+  name: 'searchArea',
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        energyTypeId: null,
+        objIds: [],
+        objType: '',
+        timeDim: null,
+        startTime: null,
+        endTime: null
+      },
+      timeValue: [],// 最大7天只能整点
+      dateValue: [],// 最大30天
+      weekValue1: null,//最多24周
+      weekValue2: null,
+      monthValue: [],//最多24月
+      yearValue1: null,//最多10年
+      yearValue2: null,
+      energyTypeList: [],
+      objectList: [],
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now()
+        }
+      },
+      pickerOptionsWeek: {
+        disabledDate(time) {
+          let day = Date.now()
+          let limitTime = moment(day).day(-1)
+          return time.getTime() > new Date(limitTime).getTime()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getTypeList()
+    this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
+  },
+  methods: {
+    getTypeList() {
+      getEnergyTypeListAll().then((res) => {
+        this.energyTypeList = res.data || []
+      })
+    },
+    // 范围选择器
+    timeSelect() {
+      switch (this.queryParams.timeDim) {
+        case '1':
+          if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
+            this.$modal.msgError('最大时间范围为7天，请重新选择')
+            this.timeValue = []
+          }
+          break
+        case '2':
+          if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
+            this.$modal.msgError('最大时间范围为30天，请重新选择') // 自动选择默认是0:00:00要求是23:59:59
+            this.dateValue = []
+          }
+          break
+        case '4':
+          if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
+            this.$modal.msgError('最大时间范围为24个月，请重新选择')// 同理上面
+            this.monthValue = []
+          }
+          break
+          default:
+      }
+    },
+    // 年选择器
+    startYear() {
+      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
+        this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
+        this.yearValue1 = null
+        return false
+      }
+      if (this.yearValue1 && this.yearValue2) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
+          this.yearValue1 = null
+          return false
+        }
+      }
+    },
+    endYear() {
+      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
+        this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
+        this.yearValue2 = null
+        return false
+      }
+      if (this.yearValue1 && this.yearValue2) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
+          this.yearValue2 = null
+          return false
+        }
+      }
+    },
+    // 周选择器
+    startWeek() {
+      if (this.weekValue1 && this.weekValue2) {
+        let a = new Date(this.weekValue1).getTime()
+        let b = new Date(this.weekValue2).getTime()
+        if (a > b) {
+          this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
+          this.weekValue1 = null
+          return false
+        }
+        if (b - a > 167*24*3600000) {
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
+          this.weekValue1 = null
+          return false
+        }
+      }
+    },
+    endWeek() {
+      if (this.weekValue1 && this.weekValue2) {
+        let a = new Date(this.weekValue1).getTime()
+        let b = new Date(this.weekValue2).getTime()
+        if (a > b) {
+          this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
+          this.weekValue2 = null
+          return false
+        }
+        if (b - a > 167*24*3600000) {
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
+          this.weekValue2 = null
+          return false
+        }
+      }
+    },
+    // 对象维度
+    selectObjs(val) {
+      console.log(val)
+      switch (val) {
+        case '1':
+          getLineAll().then(res => {
+            this.objectList = res.data || []
+            this.queryParams.objIds = []
+          })
+          break;
+        case '2':
+          getWorkShopAll().then(res => {
+            this.objectList = res.data || []
+            this.queryParams.objIds = []
+          })
+          break;
+        default:
+          getEquipmentAll().then(res => {
+            this.objectList = res.data || []
+            this.queryParams.objIds = []
+          })
+      }
+    },
+    // 查询
+    search() {
+      if (!this.queryParams.energyTypeId) {
+        this.$modal.msgError('请选择能源类型')
+        return false
+      }
+      if (!this.queryParams.timeDim) {
+        this.$modal.msgError('请选择时间维度')
+        return false
+      }
+      switch (this.queryParams.timeDim) {
+        case '1':
+          if (this.timeValue.length > 0) {
+            this.queryParams.startTime = this.timeValue[0]
+            this.queryParams.endTime = this.timeValue[1] // 不用转
+          } else {
+            this.$modal.msgError('时间范围不能为空')
+            return false
+          }
+          break
+        case '2':
+          if (this.dateValue.length > 0) {
+            this.queryParams.startTime = this.dateValue[0]
+            this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
+          } else {
+            this.$modal.msgError('日范围不能为空')
+            return false
+          }
+          break
+        case '3':
+          if (this.weekValue1 && this.weekValue2) {
+            let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
+            let b = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59'
+            this.queryParams.startTime = new Date(a).getTime()
+            this.queryParams.endTime = new Date(b).getTime()
+          } else {
+            this.$modal.msgError('周范围不能为空')
+            return false
+          }
+          break
+        case '4':// 转为本月最后一天的最后一秒
+          if (this.monthValue.length > 0) {
+            this.queryParams.startTime = this.monthValue[0]
+            this.queryParams.endTime = this.transformTime(this.monthValue[1])
+          } else {
+            this.$modal.msgError('月范围不能为空')
+            return false
+          }
+          break
+        default://本年最后一天
+          if (this.yearValue1 && this.yearValue2) {
+            if (this.yearValue2 < this.yearValue1) {
+              this.$modal.msgError('结束时间不能早于开始时间')
+              return false
+            } else {
+              this.queryParams.startTime = this.yearValue1
+              this.queryParams.endTime = this.transformYear(this.yearValue2)
+            }
+          } else {
+            this.$modal.msgError('年范围不能为空')
+            return false
+          }
+      }
+      if (!this.queryParams.objType) {
+        this.$modal.msgError('请选择对象维度')
+        return false
+      }
+      if (this.queryParams.objIds.length === 0) {
+        this.$modal.msgError('请选择对象')
+        return false
+      }
+      this.queryParams.startTime = this.queryParams.startTime + ''
+      this.queryParams.endTime = this.queryParams.endTime + ''
+      console.log(this.queryParams)
+      this.$emit('submit', this.queryParams)
+    },
+    transformTime(timeStamp) {// 本月最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let month = moment(timeStamp).format('MM')
+      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    },
+    transformYear(timeStamp) {// 本年最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let newData = year+'-12-31 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    }
+  }
+}
+</script>
+<style>
+/* 时间整点 */
+.noneMinute .el-time-spinner__wrapper {
+  width: 100%;
+}
+.noneMinute .el-scrollbar:nth-of-type(2) {
+  display: none;
+}
+</style>

src/views/energy/analysis/contrastAnalysis/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索工作栏 -->
+    <search-area @submit="getList"/>
+    <el-tabs v-model="activeName" @tab-click="switchChart">
+      <el-tab-pane label="柱状图" name="bar">
+        <bar-chart ref="analysisBarChart" :chartData="chartData" />
+      </el-tab-pane>
+      <el-tab-pane label="折线图" name="line">
+        <line-chart ref="analysisLineChart" :chartData="chartData"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import { getCompare } from "@/api/analysis/energyAnalysis"
+import SearchArea from "./components/searchArea"
+import BarChart from "./components/barChart"
+import LineChart from "./components/lineChart"
+// import moment from 'moment'
+export default {
+  name: 'ContrastAnalysis',
+  components: { SearchArea, BarChart, LineChart },
+  data() {
+    return {
+      activeName: 'bar',
+      chartData: []
+    }
+  },
+  mounted() {},
+  methods: {
+    getList(params) {
+      getCompare({ ...params }).then((res) => {
+        console.log(res)
+        if (res.code === 0) {
+          this.chartData = res.data || []
+        } else {
+          this.chartData = []
+        }
+      })
+    },
+    switchChart() {
+      if (this.activeName === 'bar') {
+        this.$nextTick((res) => {
+          this.$refs.analysisBarChart.getChart()
+        })
+      } else {
+        this.$nextTick((res) => {
+          this.$refs.analysisLineChart.getChart()
+        })
+      }
+    }
+  }
+}
+</script>

src/views/energy/analysis/qoqAnalysis/components/lineChart.vue

@@ -0,0 +1,109 @@
+<template>
+  <div 
+    id="analysischartLine"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "LineChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(350)
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(350)
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartLine')
+      this.chart = echarts.init(this.chartDom)
+      if (this.chartData.length === 0) {
+        return false
+      }
+      let arr = this.chartData[0].type // [水，电，煤]
+      let keys = Object.keys(this.chartData[0])
+      let yData = [
+        {
+          name: '本期',
+          type: 'bar',
+          data: []
+        },
+        {
+          name: '上期',
+          type: 'bar',
+          data: []
+        }
+      ]
+      for (let j = 0; j < arr.length; j++) {
+        for (let k = 0; k < keys.length; k++) {
+          if (keys[k].indexOf(arr[j]+'_上期') > -1) {
+            yData[1].data.push(this.chartData[0][keys[k]])
+          }
+          if (keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
+            yData[0].data.push(this.chartData[0][keys[k]])
+          }
+        }
+      }
+      var option = {
+        // title: {
+        //   text: 'World Population'
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01]
+        },
+        xAxis: {
+          type: 'category',
+          data: arr
+        },
+        series: yData
+      }
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>

src/views/energy/analysis/qoqAnalysis/components/searchArea.vue

@@ -0,0 +1,181 @@
+<template>
+  <el-form :inline="true" class="demo-form-inline">
+    <el-form-item label="对象选择">
+      <el-cascader
+        v-model="objArr"
+        :options="objList"
+        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
+        popper-class="cascaderParent"
+        clearable></el-cascader>
+    </el-form-item>
+    <el-form-item label="时间维度">
+      <el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;">
+        <el-option
+          v-for="item in timeType"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+          :clearable="false">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时间">
+      <div v-show="queryParams.type === 1">
+        <el-date-picker
+          v-model="monthValue"
+          type="month"
+          :picker-options="pickerOptions"
+          @change="selectTime"
+          :clearable="false"
+          placeholder="选择月">
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.type === 2">
+        <el-date-picker
+          v-model="weekValue"
+          type="week"
+          format="yyyy 第 WW 周"
+          :picker-options="pickerOptionsWeek"
+          @change="selectTime"
+          :clearable="false"
+          placeholder="选择周">
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.type === 3">
+        <el-date-picker
+          v-model="dateValue"
+          type="date"
+          :picker-options="pickerOptions"
+          @change="selectTime"
+          :clearable="false"
+          placeholder="选择日">
+        </el-date-picker>
+      </div>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="search">查询</el-button>
+    </el-form-item>
+    <el-form-item>
+      <span class="separateStyle"></span>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="exportData" plain>导出</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getTree } from '@/api/base/factory'
+import moment from 'moment'
+export default {
+  name: 'searchArea',
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        type: 1,
+        searchTime: null,
+        objId: null
+      },
+      timeType: [
+        {id: 1, name: '月'},
+        {id: 2, name: '周'},
+        {id: 3, name: '日'}
+      ],
+      monthValue: '',
+      weekValue: '',
+      dateValue: '',
+      objArr: [],
+      objList: [],
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now()
+        }
+      },
+      pickerOptionsWeek: {
+        disabledDate(time) {
+          let day = Date.now()
+          let limitTime = moment(day).day(-1)
+          return time.getTime() > new Date(limitTime).getTime()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getObjTree()
+  },
+  methods: {
+    getObjTree() {
+      getTree().then(res => {
+        this.objList = res.data || []
+      })
+    },
+    selectTime() {
+      switch (this.queryParams.type) {
+        case 1:
+          this.queryParams.searchTime = this.monthValue
+          break;
+        case 2:
+          this.queryParams.searchTime = this.weekValue
+          break;
+        default:
+          this.queryParams.searchTime = this.dateValue
+      }
+    },
+    // 查询
+    search() {
+      if (!this.objArr.length === 0) {
+        this.$modal.msgError('请选择对象')
+        return false
+      } else {
+        this.queryParams.objId = this.objArr[this.objArr.length-1]
+      }
+      if (!this.queryParams.type) {
+        this.$modal.msgError('请选择时间维度')
+        return false
+      }
+      if (!this.queryParams.searchTime) {
+        this.$modal.msgError('请选择时间')
+        return false
+      }
+      switch (this.queryParams.type) {
+        case 1:
+          this.queryParams.searchTime = this.transformTime(this.monthValue)
+          break;
+        case 2:
+          let value = moment(this.weekValue).day(6).format('YYYY-MM-DD') + ' 23:59:59'
+          this.queryParams.searchTime = new Date(value).getTime()
+          break;
+        default:
+           let value2 = moment(this.dateValue).format('YYYY-MM-DD') + ' 23:59:59'
+           this.queryParams.searchTime = new Date(value2).getTime()
+      }
+      this.$emit('submit', this.queryParams)
+    },
+    exportData() {
+      this.$emit('exportD')
+    },
+    transformTime(timeStamp) {// 本月最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let month = moment(timeStamp).format('MM')
+      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    }
+  }
+}
+</script>
+<style>
+/* 级联选择器 */
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
+</style>
+<style scoped>
+.separateStyle {
+  display: inline-block;
+  width: 1px;
+  height: 24px;
+  background: #E8E8E8;
+  vertical-align: middle;
+}
+</style>

src/views/energy/analysis/qoqAnalysis/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索工作栏 -->
+    <search-area @submit="getList" @exportD="exportData"/>
+    <!-- 表格 -->
+    <base-table
+      :table-props="tableProps"
+      :table-data="list"
+      class="qoq-out-table"
+    />
+    <div style='width: 100%;height: 300px;padding-top: 30px;'>
+      <line-chart ref="analysisLineChart" :chartData="chartData"/>
+    </div>
+  </div>
+</template>
+<script>
+import { getQoq } from "@/api/analysis/energyAnalysis"
+import SearchArea from "./components/searchArea"
+import LineChart from "./components/lineChart"
+import FileSaver from "file-saver"
+import * as XLSX from 'xlsx/xlsx.mjs'
+export default {
+  name: 'QoqAnalysis',
+  components: { SearchArea, LineChart },
+  data() {
+    return {
+      chartData: [],
+      tableProps: [],
+      list: []
+    }
+  },
+  methods: {
+    getList(params) {
+      getQoq({ ...params }).then((res) => {
+        if (res.code === 0 && res.data) {
+          this.getTableList(res.data)
+        } else {
+          this.chartData = []
+          this.list = []
+        }
+      })
+    },
+    getTableList(arr) {
+      let data = arr.data
+      let nameData = arr.nameData
+      let tempX = []
+      data[0].data.map((item) => {
+        let obj = {}
+        obj.prop = item.dynamicName
+        obj.label = item.dynamicName
+        obj.id = item.id
+        obj.children = []
+        tempX.push(obj)
+      })
+      for (let i = 0; i < nameData.length; i++) {
+        for (let j = 0; j < tempX.length; j++) {
+          if (tempX[j].id === nameData[i].parentId) {
+            let obj = {}
+            obj.prop = tempX[j].prop + '_' + nameData[i].name
+            obj.label = nameData[i].name
+            tempX[j].children.push(obj)
+          }
+        }
+      }
+      this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
+      // 数据
+      this.list = []
+      for (let k = 0; k < data.length; k++) {
+        let obj = {}
+        obj.time = data[k].time
+        let arr1 = data[k].data
+        obj.type = []
+        for (let q = 0; q < arr1.length; q++) {
+          let name = arr1[q].dynamicName
+          obj.type.push(name)
+          let arr2 = arr1[q].children
+          for (let p = 0; p < arr2.length; p++) {
+            let prop = name + '_' + arr2[p].dynamicName
+            obj[prop] = arr2[p].dynamicValue
+          }
+        }
+        this.list.push(obj)
+      }
+      this.chartData = this.list
+    },
+    exportData() {
+      if (this.list.length > 0) {
+        var wb = XLSX.utils.table_to_book(document.querySelector(".qoq-out-table"))
+        var wbout = XLSX.write(wb, {
+            bookType: "xlsx",
+            bookSST: true,
+            type: "array"
+        })
+        try {
+            FileSaver.saveAs(
+            new Blob([wbout], { type: "application/octet-stream" }),
+            "环比分析.xlsx"
+            )
+        } catch (e) {
+            if (typeof console !== "undefined") console.log(e, wbout);
+        }
+        return wbout
+      } else {
+        this.$modal.msgWarning("暂无数据导出")
+      }
+    }
+  }
+}
+</script>

src/views/energy/analysis/trendAnalysis/components/barChart.vue

@@ -0,0 +1,77 @@
+<template>
+  <div 
+    id="analysischartBar"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "BarChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(214) - 70
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(214) - 70
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartBar')
+      this.chart = echarts.init(this.chartDom)
+      let xData = []
+      let yData = []
+      for (let i = 0; i < this.chartData.length; i++) {
+        xData.push(this.chartData[i].time)
+        yData.push(this.chartData[i].useNum)
+      }
+      var option = {
+        xAxis: {
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: yData,
+            type: 'bar'
+          }
+        ]
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>

src/views/energy/analysis/trendAnalysis/components/lineChart.vue

@@ -0,0 +1,78 @@
+<template>
+  <div 
+    id="analysischartLine"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "LineChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(214) - 70
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(214) - 70
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartLine')
+      this.chart = echarts.init(this.chartDom)
+      let xData = []
+      let yData = []
+      for (let i = 0; i < this.chartData.length; i++) {
+        xData.push(this.chartData[i].time)
+        yData.push(this.chartData[i].useNum)
+      }
+
+      var option = {
+        xAxis: {
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: yData,
+            type: 'line'
+          }
+        ]
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>

src/views/energy/analysis/trendAnalysis/components/searchArea.vue

@@ -0,0 +1,364 @@
+<template>
+  <el-form :inline="true" class="demo-form-inline">
+    <el-form-item label="能源类型">
+      <el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;">
+        <el-option
+          v-for="item in energyTypeList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="对象选择">
+      <el-cascader
+        v-model="objArr"
+        :options="objList"
+        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
+        popper-class="cascaderParent"
+        clearable></el-cascader>
+    </el-form-item>
+    <el-form-item label="时间维度">
+      <el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;">
+        <el-option
+          v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时间范围">
+      <div v-show="queryParams.timeDim === '1'">
+        <el-date-picker
+          v-model="timeValue"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy-MM-dd HH:mm"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          popper-class="noneMinute"
+          @change="timeSelect"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '2'">
+        <el-date-picker
+          v-model="dateValue"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          @change="timeSelect"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '3'">
+        <el-date-picker
+          v-model="weekValue1"
+          type="week"
+          format="yyyy 第 WW 周"
+          style='width:150px;'
+          :picker-options="pickerOptionsWeek"
+          @change="startWeek"
+          placeholder="选择周">
+        </el-date-picker>-
+        <el-date-picker
+          v-model="weekValue2"
+          type="week"
+          format="yyyy 第 WW 周"
+          :picker-options="pickerOptionsWeek"
+          style='width:150px;'
+          @change="endWeek"
+          placeholder="选择周">
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '4'">
+        <el-date-picker
+          v-model="monthValue"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          @change="timeSelect"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '5'">
+        <el-date-picker
+          style='width:100px;'
+          v-model="yearValue1"
+          type="year"
+          :picker-options="pickerOptions"
+          value-format="timestamp"
+          placeholder="选择年"
+          @change="startYear"
+        >
+        </el-date-picker>-
+        <el-date-picker
+          style='width:100px;'
+          v-model="yearValue2"
+          type="year"
+          :picker-options="pickerOptions"
+          value-format="timestamp"
+          placeholder="选择年"
+          @change="endYear"
+        >
+        </el-date-picker>
+      </div>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="search">查询</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getEnergyTypeListAll } from "@/api/base/energyType"
+import { getTree } from '@/api/base/factory'
+import moment from 'moment'
+export default {
+  name: 'searchArea',
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        energyTypeId: null,
+        objId: null,
+        timeDim: null,
+        startTime: null,
+        endTime: null
+      },
+      objArr: [],
+      timeValue: [],// 最大7天只能整点
+      dateValue: [],// 最大30天
+      weekValue1: null,//最多24周
+      weekValue2: null,
+      monthValue: [],//最多24月
+      yearValue1: null,//最多10年
+      yearValue2: null,
+      energyTypeList: [],
+      objList: [],
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now()
+        }
+      },
+      pickerOptionsWeek: {
+        disabledDate(time) {
+          let day = Date.now()
+          let limitTime = moment(day).day(-1)
+          return time.getTime() > new Date(limitTime).getTime()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getTypeList()
+    this.getObjTree()
+    this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
+  },
+  methods: {
+    getTypeList() {
+      getEnergyTypeListAll().then((res) => {
+        this.energyTypeList = res.data || []
+      })
+    },
+    getObjTree() {
+      getTree().then(res => {
+        this.objList = res.data || []
+      })
+    },
+    // 范围选择器
+    timeSelect() {
+      switch (this.queryParams.timeDim) {
+        case '1':
+          if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
+            this.$modal.msgError('最大时间范围为7天，请重新选择')
+            this.timeValue = []
+          }
+          break
+        case '2':
+          if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
+            this.$modal.msgError('最大时间范围为30天，请重新选择') // 自动选择默认是0:00:00要求是23:59:59
+            this.dateValue = []
+          }
+          break
+        case '4':
+          if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
+            this.$modal.msgError('最大时间范围为24个月，请重新选择')// 同理上面
+            this.monthValue = []
+          }
+          break
+          default:
+      }
+    },
+    // 年选择器
+    startYear() {
+      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
+        this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
+        this.yearValue1 = null
+        return false
+      }
+      if (this.yearValue1 && this.yearValue2) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
+          this.yearValue1 = null
+          return false
+        }
+      }
+    },
+    endYear() {
+      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
+        this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
+        this.yearValue2 = null
+        return false
+      }
+      if (this.yearValue1 && this.yearValue2) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
+          this.yearValue2 = null
+          return false
+        }
+      }
+    },
+    // 周选择器
+    startWeek() {
+      if (this.weekValue1 && this.weekValue2) {
+        let a = new Date(this.weekValue1).getTime()
+        let b = new Date(this.weekValue2).getTime()
+        if (a > b) {
+          this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
+          this.weekValue1 = null
+          return false
+        }
+        if (b - a > 167*24*3600000) {
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
+          this.weekValue1 = null
+          return false
+        }
+      }
+    },
+    endWeek() {
+      if (this.weekValue1 && this.weekValue2) {
+        let a = new Date(this.weekValue1).getTime()
+        let b = new Date(this.weekValue2).getTime()
+        if (a > b) {
+          this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
+          this.weekValue2 = null
+          return false
+        }
+        if (b - a > 167*24*3600000) {
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
+          this.weekValue2 = null
+          return false
+        }
+      }
+    },
+    // 查询
+    search() {
+      if (!this.queryParams.energyTypeId) {
+        this.$modal.msgError('请选择能源类型')
+        return false
+      }
+      if (!this.objArr.length === 0) {
+        this.$modal.msgError('请选择对象')
+        return false
+      } else {
+        this.queryParams.objId = this.objArr[this.objArr.length-1]
+      }
+      if (!this.queryParams.timeDim) {
+        this.$modal.msgError('请选择时间维度')
+        return false
+      }
+      switch (this.queryParams.timeDim) {
+        case '1':
+          if (this.timeValue.length > 0) {
+            this.queryParams.startTime = this.timeValue[0]
+            this.queryParams.endTime = this.timeValue[1] // 不用转
+          } else {
+            this.$modal.msgError('时间范围不能为空')
+            return false
+          }
+          break
+        case '2':
+          if (this.dateValue.length > 0) {
+            this.queryParams.startTime = this.dateValue[0]
+            this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
+          } else {
+            this.$modal.msgError('日范围不能为空')
+            return false
+          }
+          break
+        case '3':
+          if (this.weekValue1 && this.weekValue2) {
+            let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
+            let b = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59'
+            this.queryParams.startTime = new Date(a).getTime()
+            this.queryParams.endTime = new Date(b).getTime()
+          } else {
+            this.$modal.msgError('周范围不能为空')
+            return false
+          }
+          break
+        case '4':// 转为本月最后一天的最后一秒
+          if (this.monthValue.length > 0) {
+            this.queryParams.startTime = this.monthValue[0]
+            this.queryParams.endTime = this.transformTime(this.monthValue[1])
+          } else {
+            this.$modal.msgError('月范围不能为空')
+            return false
+          }
+          break
+        default://本年最后一天
+          if (this.yearValue1 && this.yearValue2) {
+            if (this.yearValue2 < this.yearValue1) {
+              this.$modal.msgError('结束时间不能早于开始时间')
+              return false
+            } else {
+              this.queryParams.startTime = this.yearValue1
+              this.queryParams.endTime = this.transformYear(this.yearValue2)
+            }
+          } else {
+            this.$modal.msgError('年范围不能为空')
+            return false
+          }
+      }
+      this.queryParams.startTime = this.queryParams.startTime + ''
+      this.queryParams.endTime = this.queryParams.endTime + ''
+      this.$emit('submit', this.queryParams)
+    },
+    transformTime(timeStamp) {// 本月最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let month = moment(timeStamp).format('MM')
+      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    },
+    transformYear(timeStamp) {// 本年最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let newData = year+'-12-31 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    }
+  }
+}
+</script>
+<style>
+/* 级联选择器 */
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
+/* 时间整点 */
+.noneMinute .el-time-spinner__wrapper {
+  width: 100%;
+}
+.noneMinute .el-scrollbar:nth-of-type(2) {
+  display: none;
+}
+</style>

src/views/energy/analysis/trendAnalysis/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索工作栏 -->
+    <search-area @submit="getList"/>
+    <el-tabs v-model="activeName" @tab-click="switchChart">
+      <el-tab-pane label="柱状图" name="bar">
+        <bar-chart ref="analysisBarChart" :chartData="chartData" />
+      </el-tab-pane>
+      <el-tab-pane label="折线图" name="line">
+        <line-chart ref="analysisLineChart" :chartData="chartData"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import { getEnergyTrend } from "@/api/analysis/energyAnalysis"
+import SearchArea from "./components/searchArea"
+import BarChart from "./components/barChart"
+import LineChart from "./components/lineChart"
+// import moment from 'moment'
+export default {
+  name: 'TrendAnalysis',
+  components: { SearchArea, BarChart, LineChart },
+  data() {
+    return {
+      activeName: 'bar',
+      chartData: []
+    }
+  },
+  mounted() {},
+  methods: {
+    getList(params) {
+      getEnergyTrend({ ...params }).then((res) => {
+        if (res.code === 0) {
+          this.chartData = res.data
+        } else {
+          this.chartData = []
+        }
+      })
+      // getEnergyTrend({
+      //   energyTypeId: "1681183397517406210",
+      //   objId: "1679031282510532610",
+      //   timeDim: "2",
+      //   startTime: "1690732800000",
+      //   endTime: "1690992000000"
+      // }).then((res) => {
+      //   console.log(res)
+      //   this.chartData = res.data
+      // })
+    },
+    switchChart() {
+      if (this.activeName === 'bar') {
+        this.$nextTick((res) => {
+          this.$refs.analysisBarChart.getChart()
+        })
+      } else {
+        this.$nextTick((res) => {
+          this.$refs.analysisLineChart.getChart()
+        })
+      }
+    }
+  }
+}
+</script>

src/views/energy/analysis/yoyAnalysis/components/lineChart.vue

@@ -0,0 +1,104 @@
+<template>
+  <div 
+    id="analysischartLine"
+    style="width: 100%;height: 100%;"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "LineChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(214) - 70
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(214) - 70
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartLine')
+      this.chart = echarts.init(this.chartDom)
+      if (this.chartData.length === 0) {
+        return false
+      }
+      let xData = []
+      let arr = this.chartData[0].type
+      let keys = Object.keys(this.chartData[0])
+      let yData = []
+      for (let j = 0; j < arr.length; j++) {
+        for (let k = 0; k < keys.length; k++) {
+          if (keys[k].indexOf(arr[j]+'_上年同期') > -1 || keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
+            let obj = {
+              name: '',
+              type: 'line',
+              stack: 'Total',
+              data: []
+            }
+            obj.name = keys[k]
+            yData.push(obj)
+          }
+        }
+      }
+      for (let i = 0; i < this.chartData.length; i++) {
+        xData.push(this.chartData[i].time)
+        for (let p = 0; p < yData.length; p++) {
+          yData[p].data.push(this.chartData[i][ yData[p].name])
+        }
+      }
+      var option = {
+        legend: {
+          data: keys
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: yData
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>

src/views/energy/analysis/yoyAnalysis/components/searchArea.vue

@@ -0,0 +1,156 @@
+<template>
+  <el-form :inline="true" class="demo-form-inline">
+    <el-form-item label="对象选择">
+      <el-cascader
+        v-model="objArr"
+        :options="objList"
+        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
+        popper-class="cascaderParent"
+        clearable></el-cascader>
+    </el-form-item>
+    <el-form-item label="时间维度">
+      <el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;">
+        <el-option
+          v-for="item in timeType"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+          :clearable="false">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时间">
+      <div v-show="queryParams.type === 1 || queryParams.type === 2">
+        <el-date-picker
+          v-model="yearValue"
+          type="year"
+          :picker-options="pickerOptions"
+          @change="selectTime"
+          :clearable="false"
+          placeholder="选择年">
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.type === 3">
+        <el-date-picker
+          v-model="yearMonth"
+          type="month"
+          :picker-options="pickerOptions"
+          @change="selectTime"
+          :clearable="false"
+          placeholder="选择月">
+        </el-date-picker>
+      </div>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="search">查询</el-button>
+    </el-form-item>
+    <el-form-item>
+      <span class="separateStyle"></span>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="exportData" plain>导出</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getTree } from '@/api/base/factory'
+import moment from 'moment'
+export default {
+  name: 'searchArea',
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        type: 1, // 1季度2月3日
+        searchTime: null,
+        objId: null
+      },
+      timeType: [
+        {id: 1, name: '季度'},
+        {id: 2, name: '月'},
+        {id: 3, name: '日'}
+      ],
+      yearValue: '',
+      yearMonth: '',
+      objArr: [],
+      objList: [],
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getObjTree()
+  },
+  methods: {
+    getObjTree() {
+      getTree().then(res => {
+        this.objList = res.data || []
+      })
+    },
+    selectTime() {
+      if (this.queryParams.type === 3) {
+        this.queryParams.searchTime = this.yearMonth
+      } else {
+        this.queryParams.searchTime = this.yearValue
+      }
+    },
+    // 查询
+    search() {
+      if (!this.objArr.length === 0) {
+        this.$modal.msgError('请选择对象')
+        return false
+      } else {
+        this.queryParams.objId = this.objArr[this.objArr.length-1]
+      }
+      if (!this.queryParams.type) {
+        this.$modal.msgError('请选择时间维度')
+        return false
+      }
+      if (!this.queryParams.searchTime) {
+        this.$modal.msgError('请选择时间')
+        return false
+      }
+      if (this.queryParams.type === 3) {
+        this.queryParams.searchTime = this.transformTime(this.yearMonth) + ''
+      } else {
+        this.queryParams.searchTime = this.transformYear(this.yearValue) + ''
+      }
+      this.$emit('submit', this.queryParams)
+    },
+    exportData() {
+      this.$emit('exportD')
+    },
+    transformTime(timeStamp) {// 本月最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let month = moment(timeStamp).format('MM')
+      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    },
+    transformYear(timeStamp) {// 本年最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let newData = year+'-12-31 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    }
+  }
+}
+</script>
+<style>
+/* 级联选择器 */
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
+</style>
+<style scoped>
+.separateStyle {
+  display: inline-block;
+  width: 1px;
+  height: 24px;
+  background: #E8E8E8;
+  vertical-align: middle;
+}
+</style>

src/views/energy/analysis/yoyAnalysis/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索工作栏 -->
+    <search-area @submit="getList" @exportD="exportData"/>
+    <div style='width: 100%;height: 300px;'>
+      <line-chart ref="analysisLineChart" :chartData="chartData"/>
+    </div>
+    <!-- 表格 -->
+    <base-table
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+      class="yoy-out-table"
+    />
+  </div>
+</template>
+<script>
+import { getYoy } from "@/api/analysis/energyAnalysis"
+import SearchArea from "./components/searchArea"
+import LineChart from "./components/lineChart"
+import FileSaver from "file-saver"
+import * as XLSX from 'xlsx/xlsx.mjs'
+export default {
+  name: 'YoyAnalysis',
+  components: { SearchArea, LineChart },
+  data() {
+    return {
+      chartData: [],
+      tableProps: [],
+      list: [],
+      tableH: this.tableHeight(500)
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(500)
+    })
+  },
+  methods: {
+    getList(params) {
+      getYoy({ ...params }).then((res) => {
+        if (res.code === 0 && res.data) {
+          this.getTableList(res.data)
+        } else {
+          this.chartData = []
+          this.list = []
+        }
+      })
+    },
+    getTableList(arr) {
+      let data = arr.data
+      let nameData = arr.nameData
+      let tempX = []
+      data[0].data.map((item) => {
+        let obj = {}
+        obj.prop = item.dynamicName
+        obj.label = item.dynamicName
+        obj.id = item.id
+        obj.children = []
+        tempX.push(obj)
+      })
+      for (let i = 0; i < nameData.length; i++) {
+        for (let j = 0; j < tempX.length; j++) {
+          if (tempX[j].id === nameData[i].parentId) {
+            let obj = {}
+            obj.prop = tempX[j].prop + '_' + nameData[i].name
+            obj.label = nameData[i].name
+            tempX[j].children.push(obj)
+          }
+        }
+      }
+      this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
+      // 数据
+      this.list = []
+      for (let k = 0; k < data.length; k++) {
+        let obj = {}
+        obj.time = data[k].time
+        let arr1 = data[k].data
+        obj.type = []
+        for (let q = 0; q < arr1.length; q++) {
+          let name = arr1[q].dynamicName
+          obj.type.push(name)
+          let arr2 = arr1[q].children
+          for (let p = 0; p < arr2.length; p++) {
+            let prop = name + '_' + arr2[p].dynamicName
+            obj[prop] = arr2[p].dynamicValue
+          }
+        }
+        this.list.push(obj)
+      }
+      this.chartData = this.list
+    },
+    exportData() {
+      if (this.list.length > 0) {
+        var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table"))
+        var wbout = XLSX.write(wb, {
+            bookType: "xlsx",
+            bookSST: true,
+            type: "array"
+        })
+        try {
+            FileSaver.saveAs(
+            new Blob([wbout], { type: "application/octet-stream" }),
+            "同比分析.xlsx"
+            )
+        } catch (e) {
+            if (typeof console !== "undefined") console.log(e, wbout);
+        }
+        return wbout
+      } else {
+        this.$modal.msgWarning("暂无数据导出")
+      }
+    }
+  }
+}
+</script>

src/views/energy/base/energyPlc/components/energyPlcAdd.vue

@@ -0,0 +1,116 @@
+<template>
+  <el-form ref="form" :rules="rules" label-width="100px" :model="form">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="关联表名" prop="plcTableName">
+          <el-input v-model="form.plcTableName"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="关联表编码" prop="code">
+          <el-input v-model="form.code" disabled></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="标识名" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="英文标识名" prop="enName">
+          <el-input v-model="form.enName"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="form.description"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-form-item label="是否采集" prop="collection">
+          <el-switch v-model="form.collection"></el-switch>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script>
+import { getEnergyPlc, updateEnergyPlc, createEnergyPlc, getCode } from '@/api/base/energyPlc'
+export default {
+  name: 'energyPlcAdd',
+  data() {
+    return {
+      form: {
+        id: '',
+        plcTableName: '',
+        code: '',
+        name: '',
+        enName: '',
+        description: '',
+        collection: true
+      },
+      isEdit: false, //是否是编辑
+      rules: {
+        plcTableName: [{ required: true, message: '关联表名不能为空', trigger: 'blur' }],
+        code: [{ required: true, message: '关联表编码不能为空', trigger: 'blur' }],
+        name: [{ required: true, message: '标识名称不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      if (id) {
+        this.isEdit = true
+        this.form.id = id
+        getEnergyPlc( id ).then((res) => {
+          if (res.code === 0) {
+            this.form = res.data
+            this.form.collection = this.form.collection === 0 ? false : true
+          }
+        })
+      } else {
+        this.isEdit = false
+        this.form.id = ''
+        getCode().then((res) => {
+          this.form.code = res.data
+        })
+      }
+    },
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.form.collection = this.form.collection === false ? 0 : 1
+          if (this.isEdit) {
+            // 编辑
+            updateEnergyPlc({...this.form}).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          } else {
+            createEnergyPlc({...this.form}).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    formClear() {
+      this.$refs.form.resetFields()
+      this.isEdit = false
+    }
+  }
+}
+</script>

src/views/energy/base/energyPlc/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <!-- 列表 -->
+    <base-table
+      :page="queryParams.pageNo"
+      :limit="queryParams.pageSize"
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="80"
+        label="操作"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+    <!-- 新增 -->
+    <base-dialog
+      :dialogTitle="addOrEditTitle"
+      :dialogVisible="centervisible"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      :before-close="handleCancel"
+    >
+      <energy-plc-add ref="energyPlc" @successSubmit="successSubmit" />
+    </base-dialog>
+  </div>
+</template>
+
+<script>
+import { getEnergyPlcPage, deleteEnergyPlc } from "@/api/base/energyPlc";
+// import { publicFormatter } from '@/utils/dict'
+import EnergyPlcAdd from './components/energyPlcAdd.vue'
+const tableProps = [
+  {
+    prop: 'plcTableName',
+    label: '关联表名'
+  },
+  {
+    prop: 'code',
+    label: '关联表编码',
+    minWidth: 150,
+    showOverflowtooltip: true
+  },
+  {
+    prop: 'name',
+    label: '标识名'
+  },
+  {
+    prop: 'enName',
+    label: '英文标识名'
+  },
+  {
+    prop: 'collection',
+    label: '是否采集'
+  },
+  {
+    prop: 'description',
+    label: '描述',
+    showOverflowtooltip: true
+  }
+]
+export default {
+  name: "EnergyPlc",
+  components: { EnergyPlcAdd },
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'input',
+          label: '标识名',
+          placeholder: '标识名',
+          param: 'name'
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: this.$auth.hasPermi('base:energy-plc:create') ? 'button' : '',
+          btnName: '新增',
+          name: 'add',
+          color: 'success',
+          plain: true
+        }
+      ],
+      tableProps,
+      tableBtn: [
+        this.$auth.hasPermi('base:energy-plc:update')
+          ? {
+              type: 'edit',
+              btnName: '编辑'
+            }
+          : undefined,
+        this.$auth.hasPermi('base:energy-plc:delete')
+          ? {
+              type: 'delete',
+              btnName: '删除'
+            }
+          : undefined
+      ].filter((v) => v),
+      tableH: this.tableHeight(260),
+      collectionList: [
+        {value: 0,label: '否'},
+        {value: 1,label: '是'}
+      ],
+      // 总条数
+      total: 0,
+      // 班次基础信息列表
+      list: [],
+      // 弹出层标题
+      addOrEditTitle: "",
+      // 是否显示弹出层
+      centervisible: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20,
+        name: null
+      }
+    };
+  },
+  created() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(260)
+    })
+    this.getList();
+  },
+  methods: {
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.queryParams.pageNo = 1;
+          this.queryParams.name = val.name
+          this.getList()
+          break
+        default:
+          this.addOrEditTitle = '新增'
+          this.centervisible = true
+          this.$nextTick(() => {
+            this.$refs.energyPlc.init()
+          })
+      }
+    },
+    /** 查询列表 */
+    getList() {
+      getEnergyPlcPage(this.queryParams).then(response => {
+        let arr = response.data.list || [];
+        arr&&arr.map(item => {
+          this.collectionList.map(i => {
+            if (item.collection === i.value) {
+              item.collection = i.label
+            }
+          })
+        })
+        this.list = arr
+        this.total = response.data.total;
+      });
+    },
+    handleClick(val) {
+      switch (val.type) {
+        case 'edit':
+          this.addOrEditTitle = '编辑'
+          this.$nextTick(() => {
+            this.$refs.energyPlc.init(val.data.id)
+          })
+          this.centervisible = true
+          break
+        default:
+        this.handleDelete(val.data)
+      }
+    },
+    handleCancel() {
+      this.$refs.energyPlc.formClear()
+      this.centervisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.energyPlc.submitForm()
+    },
+    successSubmit() {
+      this.handleCancel()
+      this.getList()
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除关联表名为"' + row.name + '"的数据项?').then(function() {
+          return deleteEnergyPlc(row.id);
+        }).then(() => {
+          this.queryParams.pageNo = 1;
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/energy/base/energyPlcConnect/components/energyPlcConnectAdd.vue

@@ -0,0 +1,144 @@
+<template>
+  <el-form ref="form" :rules="rules" label-width="100px" :model="form">
+    <el-form-item label="关联表名" prop="plcId">
+      <el-select v-model="form.plcId" placeholder="请选择" style="width: 100%;">
+        <el-option
+          v-for="item in plcList"
+          :key="item.id"
+          :label="item.plcTableName"
+          :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="对象" prop="bindObjectId">
+      <el-cascader
+        style='width: 100%;'
+        v-model="objIds"
+        :options="objList"
+        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
+        popper-class="cascaderParent"
+        @change="selectObj"
+        clearable></el-cascader>
+    </el-form-item>
+    <el-form-item label="对象备注" prop="remark">
+      <el-input v-model="form.remark"/>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getEnergyPlcConnect, updateEnergyPlcConnect, createEnergyPlcConnect } from '@/api/base/energyPlcConnect'
+import { getEnergyPlcAll } from '@/api/base/energyPlc'
+export default {
+  name: 'EnergyPlcConnectAdd',
+  props: {
+    objList: {
+      type: Array,
+      default: () => []
+    },
+  },
+  data() {
+    return {
+      form: {
+        id: '',
+        plcId: '',
+        bindObjectId: '',
+        bindObjectType: '',
+        remark: ''
+      },
+      objIds: [],// 回显数组
+      plcList: [],
+      isEdit: false, //是否是编辑
+      rules: {
+        plcId: [{ required: true, message: '关联表名不能为空', trigger: 'change' }],
+        bindObjectId: [{ required: true, message: '对象不能为空', trigger: 'change' }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      getEnergyPlcAll().then((res) => {
+        this.plcList = res.data || []
+      })
+      if (id) {
+        this.isEdit = true
+        this.form.id = id
+        getEnergyPlcConnect( id ).then((res) => {
+          if (res.code === 0) {
+            this.form = res.data
+            this.objIds = this.changeDetSelect(this.form.bindObjectId, this.objList)
+          }
+        })
+      } else {
+        this.isEdit = false
+        this.form.id = ''
+      }
+    },
+    // 递归处理分类回显问题
+    changeDetSelect(key, treeData) {
+      let arr = [] // 递归时操作的数组
+      let returnArr = [] // 存放结果的数组
+      let depth = 0 // 定义全局层级
+      // 定义递归函数
+      function childrenEach(childrendData, depthN) {
+        for (var j = 0; j < childrendData.length; j++) {
+          depth = depthN
+          arr[depthN] = childrendData[j].id
+          if (childrendData[j].id == key) {
+            returnArr = arr.slice(0, depthN + 1)
+            break
+          } else {
+            if (childrendData[j].children) {
+              depth++
+              childrenEach(childrendData[j].children, depth)
+            }
+          }
+        }
+        return returnArr
+      }
+      return childrenEach(treeData, depth)
+    },
+    selectObj(val) {
+      this.form.bindObjectId = val[val.length-1]
+      this.form.bindObjectType = val.length-1
+    },
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          if (this.isEdit) {
+            // 编辑
+            updateEnergyPlcConnect({...this.form}).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          } else {
+            createEnergyPlcConnect({...this.form}).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    formClear() {
+      this.form.id = ''
+      this.form.plcId = ''
+      this.form.bindObjectId = ''
+      this.form.bindObjectType = ''
+      this.form.remark = ''
+      this.objIds = []
+      this.isEdit = false
+    }
+  }
+}
+</script>
+<style>
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
+</style>

src/views/energy/base/energyPlcConnect/components/energyPlcParam.vue

@@ -0,0 +1,223 @@
+<template>
+  <div>
+    <el-drawer title="参数绑定" :visible.sync="visible" size="70%" @close='closeD'>
+      <div class="box">
+        <el-form :inline="true">
+          <el-form-item label="关联表名">
+            <el-input v-model="plcTableName" size='small' readonly></el-input>
+          </el-form-item>
+          <el-form-item label="对象">
+            <el-input v-model="objName" size='small' readonly></el-input>
+          </el-form-item>
+          <el-form-item v-if="showBtn">
+            <el-button type="success" size='small' plain @click="addNew">新增</el-button>
+          </el-form-item>
+        </el-form>
+        <base-table
+          :page="queryParams.pageNo"
+          :limit="queryParams.pageSize"
+          :table-props="tableProps"
+          :table-data="tableData"
+          :max-height="tableH"
+        >
+          <method-btn
+            v-if="tableBtn.length"
+            slot="handleBtn"
+            :width="100"
+            label="操作"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+        <pagination
+          :page.sync="queryParams.pageNo"
+          :limit.sync="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </el-drawer>
+    <!-- 新增 -->
+    <base-dialog
+      :dialogTitle="addOrEditTitle"
+      :dialogVisible="centervisible"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      :before-close="handleCancel"
+    >
+      <energy-plc-param-add ref="energyPlcParam" @successSubmit="successSubmit" />
+    </base-dialog>
+  </div>
+</template>
+<script>
+import { getEnergyPlcParamPage, deleteEnergyPlcParam } from '@/api/base/energyPlcParam'
+import EnergyPlcParamAdd from './energyPlcParamAdd'
+import { publicFormatter } from '@/utils/dict'
+const tableProps = [
+  {
+    prop: 'typeId',
+    label: '能源类型'
+  },
+  {
+    prop: 'plcParamName',
+    label: '参数列名'
+  },
+  {
+    prop: 'name',
+    label: '参数名称'
+  },
+  {
+    prop: 'unit',
+    label: '单位',
+    filter: publicFormatter('energy_unit')
+  },
+  {
+    prop: 'collection',
+    label: '是否采集'
+  },
+  {
+    prop: 'description',
+    label: '描述'
+  }
+]
+export default {
+  name: 'EnergyPlcParam',
+  props: {
+    energyTypeList: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      tableData: [],
+      tableBtn: [],
+      tableH: this.tableHeight(115),
+      total: 0,
+      queryParams: {
+        pageNo: 1,
+        pageSize: 30,
+        connectId: null
+      },
+      plcTableName: '',
+      objName: '',
+      // 弹出层标题
+      addOrEditTitle: "",
+      // 是否显示弹出层
+      centervisible: false,
+      collectionList: [
+        {value: 0,label: '否'},
+        {value: 1,label: '是'}
+      ],
+      showBtn: true
+    }
+  },
+  components: { EnergyPlcParamAdd },
+  created() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(115)
+    })
+  },
+  methods: {
+    init(data,title) {
+      this.visible = true
+      this.queryParams.connectId = data.id
+      this.plcTableName = data.plcTableName
+      this.objName = data.objName
+      this.getList()
+      if (title === 'view') {
+        this.showBtn = false
+        this.tableBtn = []
+      } else {
+        this.showBtn = true
+        this.tableBtn = [
+          {
+            type: 'edit',
+            btnName: '编辑'
+          },
+          {
+            type: 'delete',
+            btnName: '删除'
+          }
+        ]
+      }
+    },
+    getList() {
+      getEnergyPlcParamPage({...this.queryParams}).then((res) => {
+        let arr = res.data.list || []
+        arr&&arr.map(item => {
+          this.collectionList.map(i => {
+            if (item.collection === i.value) {
+              item.collection = i.label
+            }
+          })
+          this.energyTypeList.map(j => {
+            if (item.typeId === j.id) {
+              item.typeId = j.name
+            }
+          })
+        })
+        this.tableData = arr
+        this.total = res.data.total;
+      })
+    },
+    // 新增
+    addNew() {
+      this.addOrEditTitle = '新增'
+      this.centervisible = true
+      this.$nextTick(() => {
+        this.$refs.energyPlcParam.init({'connectId': this.queryParams.connectId, id: ''})
+      })
+    },
+    handleCancel() {
+      this.$refs.energyPlcParam.formClear()
+      this.centervisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.energyPlcParam.submitForm()
+    },
+    successSubmit() {
+      this.handleCancel()
+      this.getList()
+    },
+    handleClick(val) {
+      console.log(val)
+      switch (val.type) {
+        case 'edit':
+          this.addOrEditTitle = '编辑'
+          this.centervisible = true
+          this.$nextTick(() => {
+            this.$refs.energyPlcParam.init({'connectId': this.queryParams.connectId, id: val.data.id})
+          })
+          break
+        default:
+          this.handleDelete(val.data)
+      }
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除参数列名为"' + row.plcParamName + '"的数据项?').then(function() {
+          return deleteEnergyPlcParam(row.id);
+        }).then(() => {
+          this.queryParams.pageNo = 1;
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    closeD() {
+      this.$emit('closeDrawer')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.box {
+  padding: 0 32px;
+}
+</style>

src/views/energy/base/energyPlcConnect/components/energyPlcParamAdd.vue

@@ -0,0 +1,134 @@
+<template>
+  <el-form ref="form" :rules="rules" label-width="100px" :model="form">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="能源类型" prop="typeId">
+          <el-select v-model="form.typeId" placeholder="请选择" style="width: 100%;">
+            <el-option
+              v-for="item in energyListType"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="参数列名" prop="plcParamName">
+          <el-input v-model="form.plcParamName"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="参数名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="单位" prop="unit">
+          <el-select v-model="form.unit" placeholder="请选择" style="width: 100%;">
+            <el-option
+              v-for="item in getDictDatas(DICT_TYPE.ENERGY_UNIT)"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-form-item label="是否采集" prop="collection">
+          <el-switch v-model="form.collection"></el-switch>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="form.description"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script>
+import { getEnergyPlcParam, updateEnergyPlcParam, createEnergyPlcParam } from '@/api/base/energyPlcParam'
+import { getEnergyTypeListAll } from '@/api/base/energyType'
+export default {
+  name: 'EnergyPlcParamAdd',
+  data() {
+    return {
+      form: {
+        id: '',
+        typeId: '',
+        plcParamName: '',
+        name: '',
+        unit: '',
+        description: '',
+        collection: true,
+        connectId: ''
+      },
+      energyListType: [],
+      isEdit: false, //是否是编辑
+      rules: {
+        typeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }],
+        plcParamName: [{ required: true, message: '参数列名不能为空', trigger: 'blur' }],
+        name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    init(param) {
+      this.form.connectId = param.connectId
+      getEnergyTypeListAll().then((res) => {
+        this.energyListType = res.data || []
+      })
+      if (param.id) {
+        this.isEdit = true
+        this.form.id = param.id
+        getEnergyPlcParam(this.form.id).then((res) => {
+          if (res.code === 0) {
+            this.form = res.data
+            this.form.collection = this.form.collection === 0 ? false : true
+          }
+        })
+      } else {
+        this.isEdit = false
+        this.form.id = ''
+      }
+    },
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.form.collection = this.form.collection === false ? 0 : 1
+          if (this.isEdit) {
+            // 编辑
+            updateEnergyPlcParam({...this.form}).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          } else {
+            createEnergyPlcParam({...this.form}).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    formClear() {
+      this.$refs.form.resetFields()
+      this.isEdit = false
+    }
+  }
+}
+</script>

src/views/energy/base/energyPlcConnect/index.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <!-- 列表 -->
+    <base-table
+      :page="queryParams.pageNo"
+      :limit="queryParams.pageSize"
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="160"
+        label="操作"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+    <!-- 新增 -->
+    <base-dialog
+      :dialogTitle="addOrEditTitle"
+      :dialogVisible="centervisible"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      :before-close="handleCancel"
+    >
+      <energy-plc-connect-add ref="energyPlcConnect" :objList="objList" @successSubmit="successSubmit" />
+    </base-dialog>
+    <!-- 参数绑定/查看 -->
+    <energy-plc-param v-if="paramVisible" ref="plcParam" @closeDrawer="closeDrawer" :energyTypeList="energyTypeList"></energy-plc-param>
+  </div>
+</template>
+
+<script>
+import { getEnergyPlcConnectPage, deleteEnergyPlcConnect } from "@/api/base/energyPlcConnect";
+// import { publicFormatter } from '@/utils/dict'
+import { getTree } from '@/api/base/factory'
+import { getEnergyTypeListAll } from '@/api/base/energyType'
+import EnergyPlcConnectAdd from './components/energyPlcConnectAdd'
+import EnergyPlcParam from './components/energyPlcParam'
+const tableProps = [
+  {
+    prop: 'objName',
+    label: '对象'
+  },
+  {
+    prop: 'objCode',
+    label: '对象编码'
+  },
+  {
+    prop: 'remark',
+    label: '对象备注'
+  },
+  {
+    prop: 'plcTableName', 
+    label: '关联表名'
+  },
+  {
+    prop: 'plcTableCode',
+    label: '关联表编码'
+  },
+  {
+    prop: 'cnName',
+    label: '标识名'
+  },
+  {
+    prop: 'varNum',
+    label: '绑定参数数量'
+  }
+]
+export default {
+  name: "EnergyPlcConnect",
+  components: { EnergyPlcConnectAdd, EnergyPlcParam },
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'input',
+          label: '标识名',
+          placeholder: '标识名',
+          param: 'name'
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: this.$auth.hasPermi('base:energy-plc-connect:create') ? 'button' : '',
+          btnName: '新增',
+          name: 'add',
+          color: 'success',
+          plain: true
+        }
+      ],
+      tableProps,
+      tableBtn: [
+        this.$auth.hasPermi('base:energy-plc-connect:update')
+          ? {
+              type: 'edit',
+              btnName: '编辑'
+            }
+          : undefined,
+        {
+          type: 'view',
+          btnName: '查看'
+        },
+        this.$auth.hasPermi('base:energy-plc-connect:bind')
+        ? {
+            type: 'connect',
+            btnName: '绑定'
+          }
+        : undefined,
+        this.$auth.hasPermi('base:energy-plc-connect:delete')
+          ? {
+              type: 'delete',
+              btnName: '删除'
+            }
+          : undefined
+      ].filter((v) => v),
+      tableH: this.tableHeight(260),
+      // 总条数
+      total: 0,
+      // 班次基础信息列表
+      list: [],
+      // 弹出层标题
+      addOrEditTitle: "",
+      // 是否显示弹出层
+      centervisible: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20,
+        name: null
+      },
+      paramVisible: false,
+      energyTypeList: [],
+      objList: []
+    };
+  },
+  created() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(260)
+    })
+    this.getList();
+  },
+  mounted() {
+    // 获取能源列表
+    this.getEnergyTypeList()
+    // 获取对象树形结构
+    this.getObjTree()
+  },
+  methods: {
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.queryParams.pageNo = 1;
+          this.queryParams.name = val.name
+          this.getList()
+          break
+        default:
+          this.addOrEditTitle = '新增'
+          this.centervisible = true
+          this.$nextTick(() => {
+            this.$refs.energyPlcConnect.init()
+          })
+      }
+    },
+    /** 查询列表 */
+    getList() {
+      getEnergyPlcConnectPage(this.queryParams).then(response => {
+        let arr = response.data.list || [];
+        this.list = arr
+        this.total = response.data.total;
+      });
+    },
+    handleClick(val) {
+      console.log(val)
+      switch (val.type) {
+        case 'edit':
+          this.addOrEditTitle = '编辑'
+          this.$nextTick(() => {
+            this.$refs.energyPlcConnect.init(val.data.id)
+          })
+          this.centervisible = true
+          break
+        case 'delete':
+          this.handleDelete(val.data)
+          break
+        case 'view':
+          this.paramVisible = true
+          this.$nextTick(() => {
+            this.$refs.plcParam.init(val.data, 'view')
+          })
+          break
+        default:
+          this.paramVisible = true
+          this.$nextTick(() => {
+            this.$refs.plcParam.init(val.data, 'connect')
+          })
+      }
+    },
+    handleCancel() {
+      this.$refs.energyPlcConnect.formClear()
+      this.centervisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.energyPlcConnect.submitForm()
+    },
+    successSubmit() {
+      this.handleCancel()
+      this.getList()
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除对象为"' + row.objName + '"的数据项?').then(function() {
+          return deleteEnergyPlcConnect(row.id);
+        }).then(() => {
+          this.queryParams.pageNo = 1;
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    closeDrawer() {
+      this.getList()
+    },
+    getEnergyTypeList() {
+      getEnergyTypeListAll().then((res) => {
+        this.energyTypeList = res.data || []
+      })
+    },
+    getObjTree() {
+      getTree().then(res => {
+        this.objList = res.data || []
+      })
+    }
+  }
+};
+</script>

src/views/energy/base/energyQuantityRealtime/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <!-- 列表 -->
+    <base-table
+      :page="queryParams.pageNo"
+      :limit="queryParams.pageSize"
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+    />
+    <pagination
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { getEnergyQuantityRealtimePage, exportEnergyQuantityRealtimeExcel } from "@/api/base/energyQuantityRealtime";
+import { getEnergyTypeListAll } from "@/api/base/energyType";
+// import { publicFormatter } from '@/utils/dict'
+const tableProps = [
+  {
+    prop: 'objName',
+    label: '统计对象'
+  },
+  {
+    prop: 'objRemark',
+    label: '对象备注'
+  },
+  {
+    prop: 'energyTypeName',
+    label: '能源类型'
+  },
+  {
+    prop: 'startValue',
+    label: '初始值'
+  },
+  {
+    prop: 'endValue',
+    label: '当前值'
+  },
+  {
+    prop: 'diffValue',
+    label: '差值'
+  },
+  {
+    prop: 'amount',
+    label: '金额'
+  }
+]
+export default {
+  name: "EnergyPlc",
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'select',
+          label: '能源类型',
+          selectOptions: [],
+          param: 'energyTypeId'
+        },
+        {
+          type: 'datePicker',
+          label: '时间',
+          dateType: 'datetimerange',
+          format: 'yyyy-MM-dd HH:mm:ss',
+          valueFormat: "timestamp",
+          rangeSeparator: '-',
+          startPlaceholder: '开始时间',
+          endPlaceholder: '结束时间',
+          param: 'timeVal',
+          defaultSelect: [],
+          width: 350
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: this.$auth.hasPermi('base:energy-quantity-realtime:export') ? 'button' : '',
+          btnName: '导出',
+          name: 'export',
+          color: 'primary',
+          plain: true
+        }
+      ],
+      tableProps,
+      tableH: this.tableHeight(260),
+      // 总条数
+      total: 0,
+      // 班次基础信息列表
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20,
+        energyTypeId: '',
+        startTime: null,
+        endTime: null
+      },
+      energyTypeList: []
+    };
+  },
+  created() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(260)
+    })
+    this.getList();
+    this.getTypeList()
+  },
+  methods: {
+    buttonClick(val) {
+      this.queryParams.pageNo = 1;
+      this.queryParams.energyTypeId = val.energyTypeId
+      this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null
+      this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
+      switch (val.btnName) {
+        case 'search':
+          this.getList()
+          break
+        default:
+          this.$modal.confirm('是否确认导出').then(() => {
+              return exportEnergyQuantityRealtimeExcel({...this.queryParams});
+            }).then(response => {
+              console.log(response)
+              this.$download.excel(response, '能源抄表.xls');
+            }).catch(() => {})
+      }
+    },
+    /** 查询列表 */
+    getList() {
+      getEnergyQuantityRealtimePage(this.queryParams).then(response => {
+        this.list = response.data.list || []
+        this.total = response.data.total;
+      });
+    },
+    getTypeList() {
+      getEnergyTypeListAll().then((res) => {
+        this.formConfig[0].selectOptions = res.data || []
+        this.energyTypeList = res.data || []
+      })
+    }
+  }
+};
+</script>

src/views/energy/base/energyType/index.vue

@@ -44,14 +44,15 @@
 </template>
 
 <script>
-import { getEnergyTypePage, deleteEnergyType, updateGroupTeam } from "@/api/base/energyType";
+import { getEnergyTypePage, deleteEnergyType } from "@/api/base/energyType";
 import { publicFormatter } from '@/utils/dict'
 import InnerTable from './components/InnerTable'
-import EnergyTypeAdd from './components/energyTypeAdd.vue'
+import EnergyTypeAdd from './components/energyTypeAdd'
 const tableProps = [
   {
     prop: 'code',
-    label: '类型编码'
+    label: '类型编码',
+    showOverflowtooltip: true
   },
   {
     prop: 'name',
@@ -73,7 +74,7 @@ const tableProps = [
   }
 ]
 export default {
-  name: "GroupTeam",
+  name: "EnergyType",
   components: { EnergyTypeAdd },
   data() {
     return {

src/views/energy/monitoring/energyLimit/components/InputArea.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="tableInner">
+    <el-input-number v-model="list[itemProp]" @blur="changeInput" :min="0" :max="100000000" style="width: 100%" :controls='false'></el-input-number>
+  </div>
+</template>
+<script>
+export default {
+  name: 'InputArea',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    },
+    itemProp: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      list: this.injectData
+    }
+  },
+  methods: {
+    changeInput() {
+      console.log(this.list)
+      this.$emit('emitData', this.list)
+    }
+  }
+}
+</script>
+<style lang="scss">
+.tableInner .el-input__inner {
+  border: none;
+  padding: 0;
+  height: 33px;
+}
+</style>

src/views/energy/monitoring/energyLimit/components/TimePickerArea.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="tableInner">
+    <el-time-picker
+      v-model="list[itemProp]"
+      @blur="changeInput"
+      style="width: 100%"
+      format='HH:mm:ss'
+      value-format='HH:mm:ss'
+    ></el-time-picker>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TimePickerArea',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    },
+    itemProp: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      list: this.injectData
+    }
+  },
+  methods: {
+    changeInput() {
+      console.log(this.list)
+      this.$emit('emitData', this.list)
+    }
+  }
+}
+</script>
+<style lang="scss">
+.tableInner .el-input--prefix .el-input__inner {
+  border: none;
+  padding-left: 30px;
+  height: 33px;
+}
+</style>

src/views/energy/monitoring/energyLimit/components/energyLimitAdd.vue

@@ -0,0 +1,207 @@
+<template>
+  <el-form ref="form" :rules="rules" label-width="100px" :model="form">
+    <el-form-item label="监控对象" prop="objectId">
+      <el-cascader
+        style='width: 100%;'
+        v-model="objIds"
+        :options="objList"
+        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
+        popper-class="cascaderParent"
+        @change="selectObj"
+        clearable></el-cascader>
+    </el-form-item>
+    <el-form-item label="能源类型" prop="energyTypeId">
+      <el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;">
+        <el-option
+          v-for="item in this.energyTypeList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="监控模式" prop="type">
+      <el-select v-model="form.type" placeholder="请选择" style="width: 100%;" @change="typeChange">
+        <el-option label="合并" :value= "1" ></el-option>
+        <el-option label="详细" :value= "2" ></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="监控详细参数" prop="plcParamId" v-if="form.type === 2">
+      <el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail">
+        <el-option
+          v-for="item in detailList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="指标类型" prop="limitType">
+      <el-select v-model="form.limitType" placeholder="请选择" style="width: 100%;">
+        <el-option
+          v-for="item in getDictDatas(DICT_TYPE.MONITOR_INDEX_TYPE)"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="消耗量阈值" prop="limitValue">
+      <el-input v-model="form.limitValue"></el-input>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getEnergyLimit, updateEnergyLimit, createEnergyLimit, getEnergyParamList } from '@/api/monitoring/energyLimit'
+export default {
+  name: 'energyLimitAdd',
+  props: {
+    energyTypeList: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    },
+    objList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      form: {
+        id: '',
+        objectId: '',
+        objectType: '',
+        energyTypeId: '',
+        type: '',
+        plcParamId: '',
+        limitType: '',
+        limitValue: ''
+      },
+      objIds: [],// 回显数组
+      isEdit: false, //是否是编辑
+      rules: {
+        objectId: [{ required: true, message: '对象不能为空', trigger: 'change' }],
+        energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }],
+        type: [{ required: true, message: '监控模式不能为空', trigger: 'change' }]
+      },
+      detailList: []
+    }
+  },
+  methods: {
+    init(id) {
+      if (id) {
+        this.isEdit = true
+        this.form.id = id
+        getEnergyLimit( id ).then((res) => {
+          if (res.code === 0) {
+            this.form = res.data
+            this.form.plcParamId = res.data.plcParamId || ''
+            this.form.limitType = this.form.limitType + ''
+            this.objIds = this.changeDetSelect(this.form.objectId, this.objList)
+            if (this.form.type === 2) {
+              this.getDetailList()
+            }
+          }
+        })
+      } else {
+        this.isEdit = false
+        this.form.id = ''
+      }
+    },
+    // 监控详细参数
+    getDetailList() {
+      getEnergyParamList({
+        objId: this.form.objectId,
+        energyTypeId: this.form.energyTypeId
+      }).then((res) => {
+        if (res.code === 0) {
+          this.detailList = res.data
+        } else {
+          this.detailList = []
+        }
+      })
+    },
+    typeChange(val) {
+      console.log(this.form)
+      this.form.plcParamId = ''
+      if (val === 2) {
+        this.getDetailList()
+      }
+    },
+    // 递归处理分类回显问题
+    changeDetSelect(key, treeData) {
+      let arr = [] // 递归时操作的数组
+      let returnArr = [] // 存放结果的数组
+      let depth = 0 // 定义全局层级
+      // 定义递归函数
+      function childrenEach(childrendData, depthN) {
+        for (var j = 0; j < childrendData.length; j++) {
+          depth = depthN
+          arr[depthN] = childrendData[j].id
+          if (childrendData[j].id == key) {
+            returnArr = arr.slice(0, depthN + 1)
+            break
+          } else {
+            if (childrendData[j].children) {
+              depth++
+              childrenEach(childrendData[j].children, depth)
+            }
+          }
+        }
+        return returnArr
+      }
+      return childrenEach(treeData, depth)
+    },
+    selectObj(val) {
+      this.form.objectId = val[val.length-1]
+      this.form.objectType = val.length-1
+    },
+    selectDetail() {
+      this.$forceUpdate()
+    },
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          if (this.form.type === 2 && !this.form.plcParamId) {
+            this.$modal.msgError("监控模式为详细时，详细参数为必填");
+            return false
+          }
+          // this.form.limitType = Number(this.form.limitType)
+          if (this.isEdit) {
+            // 编辑
+            updateEnergyLimit({...this.form}).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          } else {
+            createEnergyLimit({...this.form}).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    formClear() {
+      this.$refs.form.resetFields()
+      this.objIds = ''
+      this.detailList = []
+      this.isEdit = false
+    }
+  }
+}
+</script>
+<style>
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
+</style>

src/views/energy/monitoring/energyLimit/index.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <!-- 列表 -->
+    <base-table
+      :page="queryParams.pageNo"
+      :limit="queryParams.pageSize"
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="80"
+        label="操作"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+    <!-- 新增 -->
+    <base-dialog
+      :dialogTitle="addOrEditTitle"
+      :dialogVisible="centervisible"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      :before-close="handleCancel"
+    >
+      <energy-limit-add ref="energyLimit" @successSubmit="successSubmit" :energyTypeList="energyTypeList" :objList="objList"/>
+    </base-dialog>
+  </div>
+</template>
+
+<script>
+import { getEnergyLimitPage, deleteEnergyLimit } from "@/api/monitoring/energyLimit";
+import { getEnergyTypeListAll } from "@/api/base/energyType";
+import { getTree } from '@/api/base/factory'
+import { publicFormatter } from '@/utils/dict'
+import EnergyLimitAdd from './components/energyLimitAdd'
+const tableProps = [
+  {
+    prop: 'objName',
+    label: '监控对象'
+  },
+  {
+    prop: 'objectType',
+    label: '对象备注',
+    filter: publicFormatter('object_type')
+  },
+  {
+    prop: 'energyType',
+    label: '能源类型'
+  },
+  {
+    prop: 'type',
+    label: '监控模式'
+  },
+  {
+    prop: 'plcParamName',
+    label: '监控参数'
+  },
+  {
+    prop: 'limitType',
+    label: '指标类型',
+    filter: publicFormatter('monitor_index_type')
+  },
+  {
+    prop: 'limitValue',
+    label: '阈值'
+  }
+]
+export default {
+  name: "EnergyLimit",
+  components: { EnergyLimitAdd },
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'select',
+          label: '能源类型',
+          selectOptions: [],
+          param: 'energyTypeId'
+        },
+        {
+          type: 'select',
+          label: '指标类型',
+          selectOptions: this.getDictDatas(this.DICT_TYPE.MONITOR_INDEX_TYPE),
+          labelField: 'label',
+          valueField: 'value',
+          param: 'limitType'
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: this.$auth.hasPermi('monitoring:energy-limit:create') ? 'button' : '',
+          btnName: '新增',
+          name: 'add',
+          color: 'success',
+          plain: true
+        }
+      ],
+      tableProps,
+      tableBtn: [
+        this.$auth.hasPermi('monitoring:energy-limit:update')
+          ? {
+              type: 'edit',
+              btnName: '编辑'
+            }
+          : undefined,
+        this.$auth.hasPermi('monitoring:energy-limit:delete')
+          ? {
+              type: 'delete',
+              btnName: '删除'
+            }
+          : undefined
+      ].filter((v) => v),
+      tableH: this.tableHeight(260),
+      // 总条数
+      total: 0,
+      // 班次基础信息列表
+      list: [],
+      // 弹出层标题
+      addOrEditTitle: "",
+      // 是否显示弹出层
+      centervisible: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20,
+        energyTypeId: null,
+        limitType: null
+      },
+      energyTypeList: [],
+      typeList: [
+        {label: '合并', value: '1'},
+        {label: '详细', value: '2'}
+      ],
+      objList: []
+    };
+  },
+  created() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(260)
+    })
+    this.getList();
+    this.getTypeList()
+    // 获取对象树形结构
+    this.getObjTree()
+  },
+  methods: {
+    getTypeList() {
+      getEnergyTypeListAll().then((res) => {
+        this.formConfig[0].selectOptions = res.data || []
+        this.energyTypeList = res.data || []
+      })
+    },
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.queryParams.pageNo = 1;
+          this.queryParams.energyTypeId = val.energyTypeId
+          this.queryParams.limitType = val.limitType
+          this.getList()
+          break
+        default:
+          this.addOrEditTitle = '新增'
+          this.centervisible = true
+          this.$nextTick(() => {
+            this.$refs.energyLimit.init()
+          })
+      }
+    },
+    /** 查询列表 */
+    getList() {
+      getEnergyLimitPage(this.queryParams).then(response => {
+        let arr = response.data.list || [];
+        arr&&arr.map(item => {
+          this.typeList.map(i => {
+            if (item.type === i.value) {
+              item.type = i.label
+            }
+          })
+        })
+        this.list = arr
+        this.total = response.data.total;
+      });
+    },
+    handleClick(val) {
+      switch (val.type) {
+        case 'edit':
+          this.addOrEditTitle = '编辑'
+          this.$nextTick(() => {
+            this.$refs.energyLimit.init(val.data.id)
+          })
+          this.centervisible = true
+          break
+        default:
+        this.handleDelete(val.data)
+      }
+    },
+    handleCancel() {
+      this.$refs.energyLimit.formClear()
+      this.centervisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.energyLimit.submitForm()
+    },
+    successSubmit() {
+      this.handleCancel()
+      this.getList()
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除监控对象为"' + row.objName + '"的数据项?').then(function() {
+          return deleteEnergyLimit(row.id);
+        }).then(() => {
+          this.queryParams.pageNo = 1;
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    getObjTree() {
+      getTree().then(res => {
+        this.objList = res.data || []
+      })
+    }
+  }
+};
+</script>

src/views/energy/monitoring/energyOverlimitLog/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <!-- 列表 -->
+    <base-table
+      :page="queryParams.pageNo"
+      :limit="queryParams.pageSize"
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+    />
+    <pagination
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { getEnergyOverlimitLogPage } from "@/api/monitoring/energyOverlimitLog";
+import { getEnergyTypeListAll } from "@/api/base/energyType";
+import { publicFormatter } from '@/utils/dict'
+const tableProps = [
+  {
+    prop: 'objName',
+    label: '监控对象'
+  },
+  {
+    prop: 'objRemark',
+    label: '对象备注'
+  },
+  {
+    prop: 'energyType',
+    label: '能源类型'
+  },
+  {
+    prop: 'type',
+    label: '监控模式'
+  },
+  {
+    prop: 'plcParamId',
+    label: '监控参数'
+  },
+  {
+    prop: 'limitType',
+    label: '指标类型',
+    filter: publicFormatter('monitor_index_type')
+  },
+  {
+    prop: 'realityValue',
+    label: '实际值'
+  },
+  {
+    prop: 'limitValue',
+    label: '阈值'
+  },
+  {
+    prop: 'overValue',
+    label: '超出值'
+  }
+]
+export default {
+  name: "EnergyOverlimitLog",
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'select',
+          label: '能源类型',
+          selectOptions: [],
+          param: 'energyTypeId'
+        },
+        {
+          type: 'select',
+          label: '指标类型',
+          selectOptions: this.getDictDatas(this.DICT_TYPE.MONITOR_INDEX_TYPE),
+          labelField: 'label',
+          valueField: 'value',
+          param: 'indexType'
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      tableProps,
+      tableH: this.tableHeight(260),
+      // 总条数
+      total: 0,
+      // 班次基础信息列表
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20,
+        energyTypeId: '',
+        indexType: ''
+      },
+      typeList: [
+        {id: 1, name: '合并'},
+        {id: 2, name: '详细'}
+      ]
+    };
+  },
+  created() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(260)
+    })
+    this.getList();
+    this.getTypeList()
+  },
+  methods: {
+    buttonClick(val) {
+      this.queryParams.pageNo = 1;
+      this.queryParams.energyTypeId = val.energyTypeId
+      this.queryParams.indexType = val.indexType
+      this.getList()
+    },
+    /** 查询列表 */
+    getList() {
+      getEnergyOverlimitLogPage(this.queryParams).then(response => {
+        let arr = response.data.list || [];
+        arr&&arr.map((item) => {
+          this.typeList.map((i) => {
+            if (item.type === i.id) {
+              item.type = i.name
+            }
+          })
+        })
+        this.list = arr
+        this.total = response.data.total;
+      });
+    },
+    getTypeList() {
+      getEnergyTypeListAll().then((res) => {
+        console.log(res)
+        this.formConfig[0].selectOptions = res.data || []
+      })
+    }
+  }
+};
+</script>

src/views/energy/monitoring/energyReport/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <!-- 列表 -->
+    <base-table
+      :page="queryParams.pageNo"
+      :limit="queryParams.pageSize"
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+    />
+    <pagination
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { energyReportPageAuto, energyReportPageExportAuto } from "@/api/monitoring/energyReport"
+import { getEnergyTypeListAll } from "@/api/base/energyType";
+import { publicFormatter } from '@/utils/dict'
+import { parseTime } from '@/utils/ruoyi'
+const tableProps = [
+  {
+    prop: 'statisticType',
+    label: '统计类型',
+    filter: publicFormatter('statistic_type')
+  },
+  {
+    prop: 'startTime',
+    label: '开始时间',
+    filter: parseTime,
+    minWidth: 150
+  },
+  {
+    prop: 'endTime',
+    label: '结束时间',
+    filter: parseTime,
+    minWidth: 150
+  },
+  {
+    prop: 'statisticName',
+    label: '统计方案'
+  },
+  {
+    prop: 'energyType',
+    label: '能源类型'
+  },
+  {
+    prop: 'startNum',
+    label: '抄表数(起始)'
+  },
+  {
+    prop: 'endNum',
+    label: '抄表数(结束)'
+  },
+  {
+    prop: 'useNum',
+    label: '消耗量'
+  }
+]
+export default {
+  name: "EnergyLimit",
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'select',
+          label: '能源类型',
+          selectOptions: [],
+          param: 'energyTypeId',
+          filterable: true
+        },
+        {
+          type: 'select',
+          label: '统计类型',
+          selectOptions: this.getDictDatas(this.DICT_TYPE.STATISTIC_TYPE),
+          labelField: 'label',
+          valueField: 'value',
+          param: 'statisticType'
+        },
+        {
+          type: 'datePicker',
+          label: '时间',
+          dateType: 'datetimerange',
+          format: 'yyyy-MM-dd HH:mm:ss',
+          valueFormat: "timestamp",
+          rangeSeparator: '-',
+          startPlaceholder: '开始时间',
+          endPlaceholder: '结束时间',
+          param: 'timeVal',
+          defaultSelect: [],
+          width: 350
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: this.$auth.hasPermi('monitoring:energy-report:export') ? 'button' : '',
+          btnName: '导出',
+          name: 'add',
+          color: 'primary',
+          plain: true
+        }
+      ],
+      tableProps,
+      tableH: this.tableHeight(260),
+      // 总条数
+      total: 0,
+      // 班次基础信息列表
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20,
+        energyTypeId: null,
+        statisticType: null,
+        startTime: null,
+        endTime: null
+      }
+    };
+  },
+  created() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(260)
+    })
+    this.getList()
+    this.getTypeList()
+  },
+  methods: {
+    getTypeList() {
+      getEnergyTypeListAll().then((res) => {
+        this.formConfig[0].selectOptions = res.data || []
+        // this.energyTypeList = res.data || []
+      })
+    },
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.queryParams.pageNo = 1
+          this.queryParams.energyTypeId = val.energyTypeId
+          this.queryParams.statisticType = val.statisticType
+          this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null
+          this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
+          this.getList()
+          break
+        default:
+          this.$modal.confirm('是否确认导出').then(() => {
+              return energyReportPageExportAuto({...this.queryParams});
+            }).then(response => {
+              this.$download.excel(response, '能源统计报表.xls');
+            }).catch(() => {})
+      }
+    },
+    /** 查询列表 */
+    getList() {
+      energyReportPageAuto(this.queryParams).then(response => {
+        this.list = response.data.list || [];
+        this.total = response.data.total;
+      });
+    }
+  }
+};
+</script>

src/views/energy/monitoring/energyReportSearch/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <!-- 列表 -->
+    <base-table
+      :page="queryParams.pageNo"
+      :limit="queryParams.pageSize"
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+    />
+    <pagination
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { energyReportPage, energyReportPageExport } from "@/api/monitoring/energyReport";
+import { getEnergyTypeListAll } from "@/api/base/energyType"
+const tableProps = [
+  {
+    prop: 'statisticName',
+    label: '统计方案'
+  },
+  {
+    prop: 'energyType',
+    label: '能源类型'
+  },
+  {
+    prop: 'startNum',
+    label: '抄表数(起始)'
+  },
+  {
+    prop: 'endNum',
+    label: '抄表数(结束)'
+  },
+  {
+    prop: 'useNum',
+    label: '消耗量'
+  }
+]
+export default {
+  name: "EnergyReportSearch",
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'input',
+          label: '统计方案',
+          param: 'statisticName'
+        },
+        {
+          type: 'select',
+          label: '能源类型',
+          selectOptions: [],
+          param: 'energyTypeId',
+          filterable: true
+        },
+        {
+          type: 'datePicker',
+          label: '时间(必填)',
+          dateType: 'datetimerange',
+          format: 'yyyy-MM-dd HH:mm:ss',
+          valueFormat: "timestamp",
+          rangeSeparator: '-',
+          startPlaceholder: '开始时间',
+          endPlaceholder: '结束时间',
+          param: 'timeVal',
+          defaultSelect: [],
+          width: 350,
+          clearable: false
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: this.$auth.hasPermi('monitoring:energy-report-search:export') ? 'button' : '',
+          btnName: '导出',
+          name: 'add',
+          color: 'primary',
+          plain: true
+        }
+      ],
+      tableProps,
+      tableH: this.tableHeight(260),
+      // 总条数
+      total: 0,
+      // 班次基础信息列表
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20,
+        statisticName: null,
+        startTime: null,
+        endTime: null
+      },
+      energyTypeList: []
+    };
+  },
+  created() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(260)
+    })
+    this.formConfig[2].defaultSelect = [Date.now() - 7*24*3600000, Date.now()]
+    this.queryParams.startTime = this.formConfig[2].defaultSelect[0]
+    this.queryParams.endTime = this.formConfig[2].defaultSelect[1]
+    this.getList()
+    this.getTypeList()
+  },
+  methods: {
+    getTypeList() {
+      getEnergyTypeListAll().then((res) => {
+        this.formConfig[1].selectOptions = res.data || []
+      })
+    },
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.queryParams.pageNo = 1
+          this.queryParams.statisticName = val.statisticName
+          this.queryParams.energyTypeId = val.energyTypeId
+          this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null
+          this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
+          this.getList()
+          break
+        default:
+          this.$modal.confirm('是否确认导出').then(() => {
+                return energyReportPageExport({...this.queryParams});
+              }).then(response => {
+                this.$download.excel(response, '能源统计查询报表.xls');
+              }).catch(() => {})
+      }
+    },
+    /** 查询列表 */
+    getList() {
+      energyReportPage({...this.queryParams}).then(response => {
+        this.list = response.data.list || [];
+        this.total = response.data.total;
+      });
+    }
+  }
+};
+</script>

src/views/energy/monitoring/energyStatistics/components/energyStatisticsAdd.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-form ref="form" :rules="rules" label-width="100px" :model="form">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="方案名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="方案编码" prop="code">
+          <el-input v-model="form.code" disabled></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="统计类型" prop="type">
+          <el-select v-model="form.type" placeholder="请选择" style="width: 100%;">
+            <el-option
+              v-for="item in getDictDatas(DICT_TYPE.STATISTIC_TYPE)"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="能源类型" prop="energyTypeId">
+          <el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;">
+            <el-option
+              v-for="item in energyListType"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script>
+import { getCode, createEnergyStatistics, updateEnergyStatistics, getEnergyStatistics } from "@/api/monitoring/energyStatistics";
+import { getEnergyTypeListAll } from '@/api/base/energyType'
+import { number } from 'echarts';
+export default {
+  name: 'EnergyStatisticsAdd',
+  data() {
+    return {
+      form: {
+        id: '',
+        name: '',
+        code: '',
+        type: '',
+        energyTypeId: ''
+      },
+      plcList: [],
+      objList: [],
+      isEdit: false, //是否是编辑
+      rules: {
+        name: [{ required: true, message: '方案名称不能为空', trigger: 'blur' }],
+        type: [{ required: true, message: '统计类型不能为空', trigger: 'change' }],
+        energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }]
+      },
+      energyListType: [],
+    }
+  },
+  methods: {
+    init(id) {
+      getEnergyTypeListAll().then((res) => {
+        this.energyListType = res.data || []
+      })
+      if (id) {
+        this.isEdit = true
+        this.form.id = id
+        getEnergyStatistics( id ).then((res) => {
+          if (res.code === 0) {
+            this.form = res.data
+            this.form.type = this.form.type + ''
+          }
+        })
+      } else {
+        getCode().then((res) => {
+          this.form.code = res.data
+        })
+        this.isEdit = false
+        this.form.id = ''
+      }
+    },
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          if (this.isEdit) {
+            // 编辑
+            updateEnergyStatistics({...this.form}).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          } else {
+            createEnergyStatistics({...this.form}).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    formClear() {
+      this.$refs.form.resetFields()
+      this.isEdit = false
+    }
+  }
+}
+</script>

src/views/energy/monitoring/energyStatistics/components/energyStatisticsDet.vue

@@ -0,0 +1,227 @@
+<template>
+  <div>
+    <el-drawer title="参数绑定" :visible.sync="visible" size="70%" @close='closeD'>
+      <div class="box">
+        <el-form :inline="true">
+          <el-form-item label="方案名称">
+            <el-input v-model="name" size='small' readonly></el-input>
+          </el-form-item>
+          <el-form-item label="能源类型">
+            <el-input v-model="energyType" size='small' readonly></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="success" size='small' v-if="showBtn" plain @click="addNew">新增</el-button>
+            <el-button type="danger" size='small' v-if="showBtn" plain @click="deleteAll">批量删除</el-button>
+          </el-form-item>
+        </el-form>
+        <base-table
+          :page="queryParams.pageNo"
+          :limit="queryParams.pageSize"
+          :table-props="tableProps"
+          :table-data="tableData"
+          :max-height="tableH"
+          :selectWidth="55"
+          @selection-change="selectChange"
+        >
+          <method-btn
+            v-if="tableBtn.length"
+            slot="handleBtn"
+            :width="80"
+            label="操作"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+        <pagination
+          :page.sync="queryParams.pageNo"
+          :limit.sync="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </el-drawer>
+    <!-- 新增 -->
+    <energy-statistics-det-add ref="energyStatistics" @closeDet="closeDet" />
+  </div>
+</template>
+<script>
+import { getEnergyStatisticsDetPage, deleteEnergyStatisticsDet, deleteMany } from '@/api/monitoring/energyStatisticsDet'
+import EnergyStatisticsDetAdd from './energyStatisticsDetAdd'
+import { publicFormatter } from '@/utils/dict'
+const tableProps = [
+  {
+    prop: 'objName',
+    label: '所属对象'
+  },
+  {
+    prop: 'objRemark',
+    label: '对象备注'
+  },
+  {
+    prop: 'paramName',
+    label: '参数名称'
+  },
+  {
+    prop: 'unit',
+    label: '单位',
+    filter: publicFormatter('energy_unit')
+  },
+  {
+    prop: 'desc',
+    label: '描述'
+  }
+]
+export default {
+  name: 'EnergyStatisticsDet',
+  props: {
+    energyTypeList: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      tableData: [],
+      tableBtn: [],
+      tableH: this.tableHeight(115),
+      total: 0,
+      queryParams: {
+        pageNo: 1,
+        pageSize: 30,
+        statisticsId: null
+      },
+      name: '',
+      energyType: '',
+      energyTypeId: '',
+      // 弹出层标题
+      addOrEditTitle: "",
+      // 是否显示弹出层
+      centervisible: false,
+      collectionList: [
+        {value: 0,label: '否'},
+        {value: 1,label: '是'}
+      ],
+      showBtn: true,
+      selectedList: []
+    }
+  },
+  components: { EnergyStatisticsDetAdd },
+  created() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(115)
+    })
+  },
+  methods: {
+    init(data,title) {
+      this.visible = true
+      this.queryParams.statisticsId = data.id
+      this.name = data.name
+      this.energyType = data.energyType
+      this.energyTypeId = data.energyTypeId
+      this.getList()
+      if (title === 'view') {
+        this.showBtn = false
+        this.tableBtn = []
+      } else {
+        this.showBtn = true
+        this.tableBtn = [
+          {
+            type: 'delete',
+            btnName: '删除'
+          }
+        ]
+      }
+    },
+    getList() {
+      console.log(this.queryParams)
+      getEnergyStatisticsDetPage({...this.queryParams}).then((res) => {
+        let arr = res.data.list || []
+        arr&&arr.map(item => {
+          this.collectionList.map(i => {
+            if (item.collection === i.value) {
+              item.collection = i.label
+            }
+          })
+          this.energyTypeList.map(j => {
+            if (item.typeId === j.id) {
+              item.typeId = j.name
+            }
+          })
+        })
+        this.tableData = arr
+        this.total = res.data.total;
+      })
+    },
+    // 新增
+    addNew() {
+      this.$nextTick(() => {
+        this.$refs.energyStatistics.init({'statisticsId': this.queryParams.statisticsId, energyTypeId:this.energyTypeId})
+      })
+    },
+    selectChange(val) {
+      console.log(val)
+      this.selectedList = val
+    },
+    // 批量删除
+    deleteAll() {
+      let arr = []
+      if (this.selectedList.length === 0) {
+        this.$modal.msgWarning("请选勾选数据")
+        return false
+      } else {
+        this.selectedList.map((item) => {
+          arr.push(item.id)
+        })
+      }
+      this.$modal.confirm('是否确认删除所有勾选的数据项?').then(function() {
+          return deleteMany(arr);
+        }).then(() => {
+          this.queryParams.pageNo = 1
+          this.getList()
+          this.$modal.msgSuccess("删除成功")
+        }).catch(() => {})
+    },
+    handleCancel() {
+      this.$refs.energyStatistics.formClear()
+      this.centervisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.energyStatistics.submitForm()
+    },
+    successSubmit() {
+      this.handleCancel()
+      this.getList()
+    },
+    handleClick(val) {
+      this.handleDelete(val.data)
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除参数列名为"' + row.paramName + '"的数据项?').then(function() {
+          return deleteEnergyStatisticsDet(row.id);
+        }).then(() => {
+          this.queryParams.pageNo = 1
+          this.getList()
+          this.$modal.msgSuccess("删除成功")
+        }).catch(() => {})
+    },
+    closeD() {
+      this.$emit('closeDrawer')
+    },
+    closeDet() {  // 关闭新增框
+      this.getList()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.box {
+  padding: 0 32px;
+}
+</style>

src/views/energy/monitoring/energyStatistics/components/energyStatisticsDetAdd.vue

@@ -0,0 +1,178 @@
+<template>
+  <el-drawer
+    title="新增"
+    :visible.sync="centervisible"
+    size="60%"
+    @close='closeA'>
+    <div class="box">
+      <!-- 搜索工作栏 -->
+      <search-bar
+        :formConfigs="formConfig"
+        ref="searchBarForm"
+        :removeBlue='true'
+        @headBtnClick="buttonClick"
+      />
+      <!-- 列表 -->
+      <base-table
+        :page="queryParams.pageNo"
+        :limit="queryParams.pageSize"
+        :table-props="tableProps"
+        :table-data="list"
+        :max-height="tableH"
+        :selectWidth="55"
+        @selection-change="selectChange"
+      >
+      </base-table>
+      <pagination
+        :page.sync="queryParams.pageNo"
+        :limit.sync="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </div>
+  </el-drawer>
+</template>
+<script>
+import { addParamPage, createEnergyStatisticsDet } from '@/api/monitoring/energyStatisticsDet'
+import { publicFormatter } from '@/utils/dict'
+const tableProps = [
+  {
+    prop: 'objName',
+    label: '所属对象'
+  },
+  {
+    prop: 'objRemark',
+    label: '对象备注'
+  },
+  {
+    prop: 'paramName',
+    label: '参数名称'
+  },
+  {
+    prop: 'unit',
+    label: '单位',
+    filter: publicFormatter('energy_unit')
+  },
+  {
+    prop: 'desc',
+    label: '描述'
+  }
+]
+export default {
+  name: 'EnergyStatisticsDetAdd',
+  data() {
+    return {
+      centervisible: false,
+      formConfig: [
+        {
+          type: 'select',
+          label: '对象类型',
+          selectOptions: this.getDictDatas(this.DICT_TYPE.OBJECT_TYPE),
+          labelField: 'label',
+          valueField: 'value',
+          param: 'objType'
+        },
+        {
+          type: 'input',
+          label: '参数名称',
+          placeholder: '方案名称',
+          param: 'paramName'
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: 'button',
+          btnName: '关联',
+          name: 'add',
+          color: 'primary',
+          plain: true
+        }
+      ],
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20,
+        energyTypeId: null,
+        statisticId: null,
+        paramName: '',
+        objType: ''
+      },
+      tableProps,
+      list: [],
+      total: 0,
+      tableH: this.tableHeight(260),
+      selectedList: []
+    }
+  },
+  methods: {
+    init(param) {
+      this.queryParams.statisticId = param.statisticsId
+      this.queryParams.energyTypeId = param.energyTypeId
+      window.addEventListener('resize', () => {
+        this.tableH = this.tableHeight(260)
+      })
+      this.centervisible = true
+      this.getList()
+    },
+    getList() {
+      addParamPage({...this.queryParams}).then((res) => {
+        this.list = res.data.list || []
+        this.total = res.data.total
+      })
+    },
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.queryParams.pageNo = 1;
+          this.queryParams.objType = val.objType
+          this.queryParams.paramName = val.paramName
+          this.getList()
+          break
+        default:
+          // 关联
+          this.connectParam()
+      }
+    },
+    // 选中数据
+    selectChange(val) {
+      this.selectedList = val
+    },
+    // 关联
+    connectParam() {
+      let param = {
+        statisticsId: this.queryParams.statisticId,
+        plcParamIds: []
+      }
+      if (this.selectedList.length === 0) {
+        this.$modal.msgWarning("请选勾选数据")
+        return false
+      } else {
+        this.selectedList.map((item) => {
+          param.plcParamIds.push(item.id)
+        })
+      }
+      createEnergyStatisticsDet({...param}).then((res) => {
+        if (res.code === 0) {
+          this.$modal.msgSuccess("操作成功");
+          this.queryParams.pageNo = 1;
+          this.getList()
+        }
+      })
+    },
+    closeA() {
+      this.$emit('closeDet')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.box {
+  padding: 0 32px;
+}
+</style>

src/views/energy/monitoring/energyStatistics/index.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <!-- 列表 -->
+    <base-table
+      :page="queryParams.pageNo"
+      :limit="queryParams.pageSize"
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="160"
+        label="操作"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+    <!-- 新增 -->
+    <base-dialog
+      :dialogTitle="addOrEditTitle"
+      :dialogVisible="centervisible"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      :before-close="handleCancel"
+    >
+      <energy-statistics-add ref="energyStatistics" @successSubmit="successSubmit" />
+    </base-dialog>
+    <!-- 参数绑定/查看 -->
+    <energy-statistics-det ref="plcParam" @closeDrawer="closeDrawer" :energyTypeList="energyTypeList"></energy-statistics-det>
+  </div>
+</template>
+
+<script>
+import { getEnergyStatisticsPage, deleteEnergyStatistics } from "@/api/monitoring/energyStatistics";
+import { publicFormatter } from '@/utils/dict'
+import { getEnergyTypeListAll } from '@/api/base/energyType'
+import EnergyStatisticsAdd from './components/energyStatisticsAdd'
+import EnergyStatisticsDet from './components/energyStatisticsDet'
+const tableProps = [
+  {
+    prop: 'name',
+    label: '方案名称'
+  },
+  {
+    prop: 'code',
+    label: '方案编码',
+    minWidth: 120,
+    showOverflowtooltip: true
+  },
+  {
+    prop: 'type', 
+    label: '统计类型',
+    filter: publicFormatter('statistic_type')
+  },
+  {
+    prop: 'energyType',
+    label: '能源类型'
+  },
+  {
+    prop: 'paramNum',
+    label: '统计参数数量'
+  },
+  {
+    prop: 'remark',
+    label: '备注'
+  }
+]
+export default {
+  name: "energyStatistics",
+  components: { EnergyStatisticsAdd, EnergyStatisticsDet },
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'input',
+          label: '方案名称',
+          placeholder: '方案名称',
+          param: 'name'
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: this.$auth.hasPermi('monitoring:energy-statistics:create') ? 'button' : '',
+          btnName: '新增',
+          name: 'add',
+          color: 'success',
+          plain: true
+        }
+      ],
+      tableProps,
+      tableBtn: [
+        this.$auth.hasPermi('monitoring:energy-statistics:update')
+          ? {
+              type: 'edit',
+              btnName: '编辑'
+            }
+          : undefined,
+        {
+          type: 'view',
+          btnName: '查看'
+        },
+        this.$auth.hasPermi('monitoring:energy-statistics:bind')
+        ? {
+            type: 'connect',
+            btnName: '绑定'
+          }
+        : undefined,
+        this.$auth.hasPermi('monitoring:energy-statistics:delete')
+          ? {
+              type: 'delete',
+              btnName: '删除'
+            }
+          : undefined
+      ].filter((v) => v),
+      tableH: this.tableHeight(260),
+      // 总条数
+      total: 0,
+      // 班次基础信息列表
+      list: [],
+      // 弹出层标题
+      addOrEditTitle: "",
+      // 是否显示弹出层
+      centervisible: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20,
+        name: null
+      },
+      energyTypeList: []
+    };
+  },
+  created() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(260)
+    })
+    this.getList();
+  },
+  mounted() {
+    // 获取能源列表
+    this.getEnergyTypeList()
+  },
+  methods: {
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.queryParams.pageNo = 1;
+          this.queryParams.name = val.name
+          this.getList()
+          break
+        default:
+          this.addOrEditTitle = '新增'
+          this.centervisible = true
+          this.$nextTick(() => {
+            this.$refs.energyStatistics.init()
+          })
+      }
+    },
+    /** 查询列表 */
+    getList() {
+      getEnergyStatisticsPage(this.queryParams).then(response => {
+        let arr = response.data.list || [];
+        this.list = arr
+        this.total = response.data.total;
+      });
+    },
+    handleClick(val) {
+      console.log(val)
+      switch (val.type) {
+        case 'edit':
+          this.addOrEditTitle = '编辑'
+          this.$nextTick(() => {
+            this.$refs.energyStatistics.init(val.data.id)
+          })
+          this.centervisible = true
+          break
+        case 'delete':
+          this.handleDelete(val.data)
+          break
+        case 'view':
+          this.$nextTick(() => {
+            this.$refs.plcParam.init(val.data, 'view')
+          })
+          break
+        default:
+          this.$nextTick(() => {
+            this.$refs.plcParam.init(val.data, 'connect')
+          })
+      }
+    },
+    handleCancel() {
+      this.$refs.energyStatistics.formClear()
+      this.centervisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.energyStatistics.submitForm()
+    },
+    successSubmit() {
+      this.handleCancel()
+      this.getList()
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除方案名称为"' + row.name + '"的数据项?').then(function() {
+          return deleteEnergyStatistics(row.id);
+        }).then(() => {
+          this.queryParams.pageNo = 1;
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    closeDrawer() {
+      this.getList()
+    },
+    getEnergyTypeList() {
+      getEnergyTypeListAll().then((res) => {
+        this.energyTypeList = res.data || []
+      })
+    }
+  }
+};
+</script>

src/views/group/base/groupClasses/index.vue

@@ -60,7 +60,8 @@ const tableProps = [
   },
   {
     prop: 'timeStr',
-    label: '班次时间'
+    label: '班次时间',
+    minWidth: 100
   },
   {
     prop: 'code',

src/views/group/base/groupTeam/index.vue

@@ -87,14 +87,14 @@ export default {
       formConfig: [
         {
           type: 'input',
-          label: '班次名称',
-          placeholder: '班次名称',
+          label: '班组名称',
+          placeholder: '班组名称',
           param: 'name'
         },
         {
           type: 'input',
-          label: '班次编码',
-          placeholder: '班次编码',
+          label: '班组编码',
+          placeholder: '班组编码',
           param: 'code'
         },
         {

src/views/group/base/groupTeamScheduling/components/groupUpperLower.vue

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <el-drawer title="班组上下片" :visible.sync="visible" size="80%" @close='closeD'>
+      <div class="box">
+        <!-- 搜索工作栏 -->
+        <search-bar
+          :formConfigs="formConfig"
+          ref="searchBarForm"
+          @headBtnClick="buttonClick"
+        />
+        <!-- 列表 -->
+        <base-table
+          :page="queryParams.pageNo"
+          :limit="queryParams.pageSize"
+          :table-props="tableProps"
+          :table-data="list"
+          :max-height="tableH"
+        />
+        <pagination
+          :page.sync="queryParams.pageNo"
+          :limit.sync="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </el-drawer>
+  </div>
+</template>
+<script>
+const tableProps = [
+  {
+    prop: 'name',
+    label: '产线名称'
+  },
+  {
+    prop: 'code',
+    label: '投入数量/片'
+  },
+  {
+    prop: 'code1',
+    label: '产出数量/片'
+  },
+  {
+    prop: 'num2',
+    label: '产出面积/㎡'
+  },
+  {
+    prop: 'num3',
+    label: '损耗数量/片'
+  },
+  {
+    prop: 'num4',
+    label: '损耗面积/㎡'
+  },
+  {
+    prop: 'num5',
+    label: '损耗比例/%'
+  }
+]
+export default {
+  name: 'GroupUpperLower',
+  data() {
+    return {
+      visible: false,
+      formConfig: [
+        {
+          type: 'select',
+          label: '产线',
+          selectOptions: [],
+          param: 'xb2',
+          width: 120,
+          defaultSelect: 2 // 默认值
+        },
+        {
+          type: 'datePicker',
+          label: '时间范围',
+          dateType: 'daterange',
+          format: 'yyyy-MM-dd',
+          valueFormat: 'yyyy-MM-dd',
+          rangeSeparator: '-',
+          startPlaceholder: '开始时间',
+          endPlaceholder: '结束时间',
+          param: 'searchTime2'
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: this.$auth.hasPermi('base:group-team:create') ? 'button' : '',
+          btnName: '导出',
+          name: 'export',
+          color: 'success',
+          plain: true
+        }
+      ],
+      tableProps,
+      list: [],
+      tableH: this.tableHeight(260),
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20
+      },
+      total: 0
+    }
+  },
+  methods: {
+    init() {
+      window.addEventListener('resize', () => {
+        this.tableH = this.tableHeight(260)
+      })
+      this.visible = true
+    },
+    getList() {},
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.queryParams.pageNo = 1
+          this.queryParams.name = val.name
+          this.queryParams.code = val.code
+          this.getList()
+          break
+        default:
+          this.addOrEditTitle = '新增'
+          this.centervisible = true
+          this.$nextTick(() => {
+            this.$refs.groupList.init()
+          })
+      }
+    },
+    closeD() {
+      // this.$emit('closeDrawer')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.box {
+  padding: 0 32px;
+}
+</style>

src/views/group/base/groupTeamScheduling/index copy.vue

@@ -1,233 +0,0 @@
-<template>
-  <div class="app-container">
-
-    <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="上班日期" prop="startDay">
-        <el-input v-model="queryParams.startDay" placeholder="请输入上班日期" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 操作工具栏 -->
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['base:group-team-scheduling:create']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-                   v-hasPermi="['base:group-team-scheduling:export']">导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="ID" align="center" prop="id" />
-      <el-table-column label="班组ID" align="center" prop="teamId" />
-      <el-table-column label="班次id" align="center" prop="classesId" />
-      <el-table-column label="上班日期" align="center" prop="startDay" />
-      <el-table-column label="上班时间" align="center" prop="startTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.startTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="下班时间" align="center" prop="endTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.endTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template v-slot="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['base:group-team-scheduling:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['base:group-team-scheduling:delete']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页组件 -->
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
-
-    <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="班组ID" prop="teamId">
-          <el-input v-model="form.teamId" placeholder="请输入班组ID" />
-        </el-form-item>
-        <el-form-item label="班次id" prop="classesId">
-          <el-input v-model="form.classesId" placeholder="请输入班次id" />
-        </el-form-item>
-        <el-form-item label="上班日期" prop="startDay">
-          <el-input v-model="form.startDay" placeholder="请输入上班日期" />
-        </el-form-item>
-        <el-form-item label="上班时间" prop="startTime">
-          <el-date-picker clearable v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择上班时间" />
-        </el-form-item>
-        <el-form-item label="下班时间" prop="endTime">
-          <el-date-picker clearable v-model="form.endTime" type="date" value-format="timestamp" placeholder="选择下班时间" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { createGroupTeamScheduling, updateGroupTeamScheduling, deleteGroupTeamScheduling, getGroupTeamScheduling, getGroupTeamSchedulingPage, exportGroupTeamSchedulingExcel } from "@/api/base/groupTeamScheduling";
-
-export default {
-  name: "GroupTeamScheduling",
-  components: {
-  },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 排班信息列表
-      list: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNo: 1,
-        pageSize: 10,
-        startDay: [],
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        teamId: [{ required: true, message: "班组ID不能为空", trigger: "blur" }],
-        classesId: [{ required: true, message: "班次id不能为空", trigger: "blur" }],
-      }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询列表 */
-    getList() {
-      this.loading = true;
-      // 执行查询
-      getGroupTeamSchedulingPage(this.queryParams).then(response => {
-        this.list = response.data.list;
-        this.total = response.data.total;
-        this.loading = false;
-      });
-    },
-    /** 取消按钮 */
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    /** 表单重置 */
-    reset() {
-      this.form = {
-        id: undefined,
-        teamId: undefined,
-        classesId: undefined,
-        startDay: undefined,
-        startTime: undefined,
-        endTime: undefined,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNo = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加排班信息";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id;
-      getGroupTeamScheduling(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改排班信息";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (!valid) {
-          return;
-        }
-        // 修改的提交
-        if (this.form.id != null) {
-          updateGroupTeamScheduling(this.form).then(response => {
-            this.$modal.msgSuccess("修改成功");
-            this.open = false;
-            this.getList();
-          });
-          return;
-        }
-        // 添加的提交
-        createGroupTeamScheduling(this.form).then(response => {
-          this.$modal.msgSuccess("新增成功");
-          this.open = false;
-          this.getList();
-        });
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const id = row.id;
-      this.$modal.confirm('是否确认删除排班信息编号为"' + id + '"的数据项?').then(function() {
-          return deleteGroupTeamScheduling(id);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      // 处理查询参数
-      let params = {...this.queryParams};
-      params.pageNo = undefined;
-      params.pageSize = undefined;
-      this.$modal.confirm('是否确认导出所有排班信息数据项?').then(() => {
-          this.exportLoading = true;
-          return exportGroupTeamSchedulingExcel(params);
-        }).then(response => {
-          this.$download.excel(response, '排班信息.xls');
-          this.exportLoading = false;
-        }).catch(() => {});
-    }
-  }
-};
-</script>

src/views/group/base/groupTeamScheduling/index.vue

@@ -1,232 +1,66 @@
 <template>
   <div class="app-container">
-
-    <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="上班日期" prop="startDay">
-        <el-input v-model="queryParams.startDay" placeholder="请输入上班日期" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 操作工具栏 -->
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['base:group-team-scheduling:create']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-                   v-hasPermi="['base:group-team-scheduling:export']">导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="ID" align="center" prop="id" />
-      <el-table-column label="班组ID" align="center" prop="teamId" />
-      <el-table-column label="班次id" align="center" prop="classesId" />
-      <el-table-column label="上班日期" align="center" prop="startDay" />
-      <el-table-column label="上班时间" align="center" prop="startTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.startTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="下班时间" align="center" prop="endTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.endTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template v-slot="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['base:group-team-scheduling:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['base:group-team-scheduling:delete']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页组件 -->
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
-
-    <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="班组ID" prop="teamId">
-          <el-input v-model="form.teamId" placeholder="请输入班组ID" />
+    <div>
+      <el-form :inline="true" class="demo-form-inline">
+        <el-form-item label="月份选择">
+          <el-date-picker
+            v-model="queryParams.startDay"
+            type="month"
+            placeholder="选择月">
+          </el-date-picker>
         </el-form-item>
-        <el-form-item label="班次id" prop="classesId">
-          <el-input v-model="form.classesId" placeholder="请输入班次id" />
+        <el-form-item>
+          <el-button type="primary">自动排班</el-button>
         </el-form-item>
-        <el-form-item label="上班日期" prop="startDay">
-          <el-input v-model="form.startDay" placeholder="请输入上班日期" />
+        <el-form-item>
+          <el-button type="primary">编辑</el-button>
         </el-form-item>
-        <el-form-item label="上班时间" prop="startTime">
-          <el-date-picker clearable v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择上班时间" />
+        <el-form-item>
+          <el-button type="primary" plain @click="toUpperLower">班组上下片查询</el-button>
         </el-form-item>
-        <el-form-item label="下班时间" prop="endTime">
-          <el-date-picker clearable v-model="form.endTime" type="date" value-format="timestamp" placeholder="选择下班时间" />
+        <el-form-item>
+          <el-button type="primary" plain>班组能源查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" plain>班组检测查询</el-button>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+    </div>
+    <!-- 班组上下片查询 -->
+    <group-upper-lower v-if="upperLowerVisible" ref="upperLowerParam"></group-upper-lower>
   </div>
 </template>
 
 <script>
-import { createGroupTeamScheduling, updateGroupTeamScheduling, deleteGroupTeamScheduling, getGroupTeamScheduling, getGroupTeamSchedulingPage, exportGroupTeamSchedulingExcel } from "@/api/base/groupTeamScheduling";
+import { createGroupTeamScheduling } from "@/api/base/groupTeamScheduling";
+import GroupUpperLower from "./components/groupUpperLower.vue"
 
 export default {
   name: "GroupTeamScheduling",
-  components: {
-  },
+  components: { GroupUpperLower },
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 排班信息列表
-      list: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
+      monthList: [
+        {id: ''}
+      ],
       // 查询参数
       queryParams: {
         pageNo: 1,
-        pageSize: 10,
-        startDay: [],
+        pageSize: 10
       },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        teamId: [{ required: true, message: "班组ID不能为空", trigger: "blur" }],
-        classesId: [{ required: true, message: "班次id不能为空", trigger: "blur" }],
-      }
+      upperLowerVisible: false
     };
   },
   created() {
-    this.getList();
+    this.getList()
   },
   methods: {
-    /** 查询列表 */
-    getList() {
-      this.loading = true;
-      // 执行查询
-      getGroupTeamSchedulingPage(this.queryParams).then(response => {
-        this.list = response.data.list;
-        this.total = response.data.total;
-        this.loading = false;
-      });
-    },
-    /** 取消按钮 */
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    /** 表单重置 */
-    reset() {
-      this.form = {
-        id: undefined,
-        teamId: undefined,
-        classesId: undefined,
-        startDay: undefined,
-        startTime: undefined,
-        endTime: undefined,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNo = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加排班信息";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id;
-      getGroupTeamScheduling(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改排班信息";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (!valid) {
-          return;
-        }
-        // 修改的提交
-        if (this.form.id != null) {
-          updateGroupTeamScheduling(this.form).then(response => {
-            this.$modal.msgSuccess("修改成功");
-            this.open = false;
-            this.getList();
-          });
-          return;
-        }
-        // 添加的提交
-        createGroupTeamScheduling(this.form).then(response => {
-          this.$modal.msgSuccess("新增成功");
-          this.open = false;
-          this.getList();
-        });
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const id = row.id;
-      this.$modal.confirm('是否确认删除排班信息编号为"' + id + '"的数据项?').then(function() {
-          return deleteGroupTeamScheduling(id);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      // 处理查询参数
-      let params = {...this.queryParams};
-      params.pageNo = undefined;
-      params.pageSize = undefined;
-      this.$modal.confirm('是否确认导出所有排班信息数据项?').then(() => {
-          this.exportLoading = true;
-          return exportGroupTeamSchedulingExcel(params);
-        }).then(response => {
-          this.$download.excel(response, '排班信息.xls');
-          this.exportLoading = false;
-        }).catch(() => {});
+    getList() {},
+    toUpperLower() {
+      this.upperLowerVisible = true
+      this.$nextTick(() => {
+        this.$refs.upperLowerParam.init()
+      })
     }
   }
 };