.env.dev

@@ -18,9 +18,9 @@ VUE_APP_TITLE = MES系统
 # VUE_APP_BASE_API = 'http://192.168.2.173:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.49:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.8:48082'
-VUE_APP_BASE_API = 'http://192.168.4.173:48082'
+# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.104:48082'
-# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
+VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.62:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.78:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.47:48082'

src/api/analysis/energyAnalysis.js

@@ -35,21 +35,3 @@ export function getQoq(data) {
     data: data
   })
 }
-
-// 获取能源设备树
-export function getTree() {
-  return request({
-    url: '/analysis/energy-analysis/getTree',
-    method: 'get'
-  })
-}
-
-// 导出（走势分析）
-export function exportTrend(data) {
-  return request({
-    url: '/analysis/energy-analysis/exportTrend',
-    method: 'post',
-    responseType: 'blob',
-    data: data
-  })
-}

src/api/base/energyType.js

@@ -68,4 +68,3 @@ export function exportEnergyTypeExcel(query) {
     responseType: 'blob'
   })
 }
-

src/utils/dict.js

@@ -97,8 +97,6 @@ export const DICT_TYPE = {
   TABLE_NAME: 'table_name',
   METHOD: 'method',
   PUSH: 'push',
-  ENERGY_TYPE: 'energy_type',
-
 
   // ============== ORDER - 订单模块 =============
   ORDER_STATUS: 'order_status',

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

@@ -2,43 +2,44 @@
   <div 
     id="analysischartBar"
     style="width: 100%"
-		:style="{ height: chartHeight + 'px' }"></div>
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
 </template>
 <script>
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
-import resize from '@/utils/chartMixins/resize';
+import resize from '@/utils/chartMixins/resize'
 export default {
-	name: 'BarChart',
+  name: "BarChart",
   mixins: [resize],
   data() {
     return {
       chartDom: '',
       chart: '',
-			chartHeight: this.tableHeight(250) / 2,
+      chartHeight: this.tableHeight(214) - 70
-		};
+    }
   },
   props: {
     chartData: {
       type: Array,
       required: true,
       default: () => {
-				return [];
+        return []
-			},
+      }
     },
     timeDim: {
       type: String,
-			default: '',
+      default: ''
-		},
+    }
   },
   watch: {
     chartData: function () {
-			this.getChart();
+      this.getChart()
-		},
+    }
   },
   mounted() {
     window.addEventListener('resize', () => {
-			this.chartHeight = this.tableHeight(250) / 2;
+      this.chartHeight = this.tableHeight(214) - 70
-		});
+    })
   },
   methods: {
     getChart() {
@@ -47,29 +48,29 @@ export default {
         this.chart !== '' &&
         this.chart !== undefined
       ) {
-				this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
       }
-			this.chartDom = document.getElementById('analysischartBar');
+      this.chartDom = document.getElementById('analysischartBar')
-			this.chart = echarts.init(this.chartDom);
+      this.chart = echarts.init(this.chartDom)
-			let tempArr = [];
+      let tempArr = []
-			let xData = [];
+      let xData = []
-			let yData = [];
+      let yData = []
-			let legendData = [];
+      let legendData = []
       if (this.chartData.length === 0) {
-				return false;
+        return false
       } else {
-				tempArr = this.chartData[0].trendRespVOList;
+        tempArr = this.chartData[0].trendRespVOList
       }
       for (let k = 0; k < tempArr.length; k++) {
-				let time = '';
+        let time = ''
         if (this.timeDim === '3') {
-					let year = tempArr[k].time.slice(0, 4);
+          let year = tempArr[k].time.slice(0,4)
-					let weak = tempArr[k].time.slice(4, 6);
+          let weak = tempArr[k].time.slice(4,6)
-					time = year + ' 第 ' + weak + ' 周';
+          time = year+' 第 '+weak+' 周'
         } else {
-					time = tempArr[k].time;
+          time = tempArr[k].time
         }
-				xData.push(time);
+        xData.push(time)
       }
       for (let i = 0; i < this.chartData.length; i++) {
         let obj = {
@@ -78,72 +79,70 @@ export default {
           barMaxWidth: 20,
           label: {
             show: true,
-						position: 'top',
+            position: 'top'
           },
-					data: [],
+          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.toFixed(2) : '';
-					obj.data.push(num);
         }
-				yData.push(obj);
+        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 : ''
+          obj.data.push(num)
+        }
+        yData.push(obj)
       }
       var option = {
-				color: ['#FFDC94', '#8EF0AB', '#63BDFF', '#288AFF', '#7164FF'],
+        color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF'],
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-						type: 'shadow',
+            type: 'shadow'
           },
-					formatter: function (params) {
+          formatter: function(params) {
             return (
               params[0].axisValue + 
               `<br>` +
-							params
+              params.map((item) => {
-								.map((item) => {
+                let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
-									let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`;
+                let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
-									let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`;
+						let value = item.value ? item.value : '-'
-									let value = item.value ? item.value : '-';
+						let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`
-									let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`;
 						return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
 									<span>${str}${seriesNameStr}</span>
 									<span>${valueStr}</span>
-								</span>`;
+								</span>`
-								})
+              }).join(``)
-								.join(``)
+            )
-						);
+          }
-					},
         },
         grid: {
           left: '4%',
           right: '1%',
           bottom: '1%',
-					containLabel: true,
+          containLabel: true
         },
         legend: {
           data: legendData,
           right: '1%',
           icon: 'rect',
           itemHeight: 8,
-					itemWidth: 8,
+          itemWidth: 8
         },
         xAxis: {
           type: 'category',
           data: xData,
           axisLabel: {
-						rotate: '45',
+            rotate: "45"
-					},
+          }
         },
         yAxis: {
-					type: 'value',
+          type: 'value'
         },
-				series: yData,
+        series: yData
       };
 
       option && this.chart.setOption(option);
-		},
+    }
-	},
+  }
-};
+}
 </script>

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

@@ -0,0 +1,126 @@
+<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 []
+      }
+    },
+    timeDim: {
+      type: String,
+      default: ''
+    }
+  },
+  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++) {
+        let time = ''
+        if (this.timeDim === '3') {
+          let year = tempArr[k].time.slice(0,4)
+          let weak = tempArr[k].time.slice(4,6)
+          time = year+' 第 '+weak+' 周'
+        } else {
+          time = tempArr[k].time
+        }
+        xData.push(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 : ''
+          obj.data.push(num)
+        }
+        yData.push(obj)
+      }
+
+      var option = {
+        color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        grid: {
+          left: '4%',
+          right: '1%',
+          bottom: '1%',
+          containLabel: true
+        },
+        legend: {
+          data: legendData,
+          right: '1%'
+        },
+        xAxis: {
+          type: 'category',
+          data: xData,
+          axisLabel: {
+            rotate: "45"
+          }
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: yData
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>

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

@@ -1,47 +1,28 @@
 <template>
-	<div
+  <div class="searchBarBox divHeight" ref="searchBarRef" :style="{ paddingRight: isFold ? '55px' : '0px' }">
-		class="searchBarBox divHeight"
+    <el-form :inline="true" class="demo-form-inline">
-		ref="searchBarRef"
-		:style="{ paddingRight: isFold ? '55px' : '0px' }">
-		<el-form
-			:inline="true"
-			class="demo-form-inline">
       <span class="blue-block"></span>
-			<el-form-item
+      <el-form-item label="能源类型" required>
-				label="能源类型"
+        <el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;" size="small">
-				required>
-				<el-select
-					v-model="queryParams.energyTypeId"
-					placeholder="请选择"
-					style="width: 150px"
-					@change="chooseType"
-					filterable
-					size="small">
           <el-option
             v-for="item in energyTypeList"
             :key="item.id"
-						:label="item.labelName"
+            :label="item.name"
-						:value="item.id"></el-option>
+            :value="item.id">
+          </el-option>
         </el-select>
       </el-form-item>
-			<el-form-item
+      <el-form-item label="时间维度" required>
-				label="时间维度"
+        <el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;" size="small">
-				required>
-				<el-select
-					v-model="queryParams.timeDim"
-					placeholder="请选择"
-					style="width: 80px"
-					size="small">
           <el-option
             v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
             :key="item.value"
             :label="item.label"
-						:value="item.value"></el-option>
+            :value="item.value">
+          </el-option>
         </el-select>
       </el-form-item>
-			<el-form-item
+      <el-form-item label="时间范围" required>
-				label="时间范围"
-				required>
         <div v-show="queryParams.timeDim === '1'">
           <el-date-picker
             v-model="timeValue"
@@ -55,8 +36,10 @@
             popper-class="noneMinute"
             @change="timeSelect"
             size="small"
-						style="width: 350px"
+            style='width:350px;'
-						:clearable="false"></el-date-picker>
+            :clearable="false"
+            >
+          </el-date-picker>
         </div>
         <div v-show="queryParams.timeDim === '2'">
           <el-date-picker
@@ -69,31 +52,34 @@
             :picker-options="pickerOptions"
             :clearable="false"
             size="small"
-						style="width: 350px"
+            style='width:350px;'
-						@change="timeSelect"></el-date-picker>
+            @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: 170px"
+            style='width:170px;'
             :picker-options="pickerOptionsWeek"
             @change="startWeek"
             :clearable="false"
             size="small"
-						placeholder="选择周"></el-date-picker>
+            placeholder="选择周">
-					-
+          </el-date-picker>-
           <el-date-picker
             v-model="weekValue2"
             type="week"
             format="yyyy 第 WW 周"
             :picker-options="pickerOptionsWeek"
-						style="width: 170px"
+            style='width:170px;'
             @change="endWeek"
             :clearable="false"
             size="small"
-						placeholder="选择周"></el-date-picker>
+            placeholder="选择周">
+          </el-date-picker>
         </div>
         <div v-show="queryParams.timeDim === '4'">
           <el-date-picker
@@ -106,12 +92,14 @@
             :clearable="false"
             :picker-options="pickerOptions"
             size="small"
-						style="width: 350px"
+            style='width:350px;'
-						@change="timeSelect"></el-date-picker>
+            @change="timeSelect"
+            >
+          </el-date-picker>
         </div>
         <div v-show="queryParams.timeDim === '5'">
           <el-date-picker
-						style="width: 170px"
+            style='width:170px;'
             v-model="yearValue1"
             type="year"
             :picker-options="pickerOptions"
@@ -119,10 +107,11 @@
             placeholder="选择年"
             @change="startYear"
             size="small"
-						:clearable="false"></el-date-picker>
+            :clearable="false"
-					-
+          >
+          </el-date-picker>-
           <el-date-picker
-						style="width: 170px"
+            style='width:170px;'
             v-model="yearValue2"
             type="year"
             :picker-options="pickerOptions"
@@ -130,96 +119,58 @@
             placeholder="选择年"
             @change="endYear"
             size="small"
-						:clearable="false"></el-date-picker>
+            :clearable="false"
+          >
+          </el-date-picker>
         </div>
       </el-form-item>
-			<el-form-item
+      <el-form-item label="对象维度" required>
-				v-if="energyType !== 0"
+        <el-select v-model="queryParams.objType" placeholder="请选择" style="width: 80px;" @change="selectObjs" size="small">
-				label="对象维度"
-				required>
-				<el-select
-					v-model="queryParams.objType"
-					placeholder="请选择"
-					style="width: 80px"
-					@change="selectObjs"
-					:disabled="energyType === 2"
-					size="small">
           <el-option
             v-for="item in getDictDatas(this.DICT_TYPE.OBJECT_TYPE)"
             :key="item.value"
             :label="item.label"
-						:value="item.value"></el-option>
+            :value="item.value">
+          </el-option>
         </el-select>
       </el-form-item>
-			<el-form-item
+      <el-form-item label="对象选择" required>
-				label="对象选择"
+        <el-select v-model="queryParams.objIds" placeholder="请选择" multiple :multiple-limit='5' collapse-tags style="width: 200px;" size="small">
-				required>
-				<el-select
-					v-model="queryParams.objIds"
-					placeholder="请选择"
-					multiple
-					:multiple-limit="5"
-					collapse-tags
-					filterable
-					style="width: 200px"
-					size="small">
           <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">
+            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
-							{{ item.code }}
-						</span>
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
-				<el-button
+        <el-button type="primary" size="small" @click="search">查询</el-button>
-					type="primary"
-					size="small"
-					@click="search">
-					查询
-				</el-button>
-				<el-button
-					size="small"
-					@click="resetBtn">
-					重置
-				</el-button>
         <span class="separateStyle"></span>
-				<el-button
+        <el-button size="small" @click="resetBtn">重置</el-button>
-					type="primary"
-					size="small"
-					plain
-					@click="exportBtn">
-					导出
-				</el-button>
       </el-form-item>
     </el-form>
-		<span
+    <span v-if="isFold" class="foldClass" @click='switchMode'>
-			v-if="isFold"
-			class="foldClass"
-			@click="switchMode">
       {{ isExpand ? '收起' : '展开' }}
       <svg-icon :icon-class="isExpand ? 'upward' : 'downward'" />
     </span>
   </div>
 </template>
 <script>
-import { getEnergyTypeListAll } from '@/api/base/energyType';
+import { getEnergyTypeListAll } from "@/api/base/energyType"
-import { getLineAll } from '@/api/base/productionLine';
+import { getLineAll } from "@/api/base/productionLine"
-import { getWorkShopAll } from '@/api/base/workshopSection';
+import { getWorkShopAll } from "@/api/base/workshopSection"
-import { getFactoryList } from '@/api/core/base/factory';
+import { getEquipmentAll } from "@/api/base/equipment"
-import moment from 'moment';
+import moment from 'moment'
 export default {
   name: 'searchArea',
   props: {
-		isFold: {
+    isFold: {// 多行模式（默认否）
-			// 多行模式（默认否）
       type: Boolean,
-			default: false,
+      default: false
-		},
+    }
   },
   data() {
     return {
@@ -231,309 +182,275 @@ export default {
         objType: '',
         timeDim: null,
         startTime: null,
-				endTime: null,
+        endTime: null
       },
-			energyType: 0, //1电2非电
+      timeValue: [],// 最大7天只能整点
-			timeValue: [], // 最大7天只能整点
+      dateValue: [],// 最大30天
-			dateValue: [], // 最大30天
+      weekValue1: null,//最多24周
-			weekValue1: null, //最多24周
       weekValue2: null,
-			monthValue: [], //最多24月
+      monthValue: [],//最多24月
-			yearValue1: null, //最多10年
+      yearValue1: null,//最多10年
       yearValue2: null,
       energyTypeList: [],
       objectList: [],
       pickerOptions: {
         disabledDate(date) {
-					return date.getTime() > Date.now();
+          return date.getTime() > Date.now()
-				},
+        }
       },
       pickerOptionsWeek: {
         disabledDate(time) {
-					let day = Date.now();
+          let day = Date.now()
-					let limitTime = moment(day).day(-1);
+          let limitTime = moment(day).day(-1)
-					return time.getTime() > new Date(limitTime).getTime();
+          return time.getTime() > new Date(limitTime).getTime()
-				},
+        }
-			},
+      }
-		};
+    }
   },
   mounted() {
-		this.getTypeList();
+    this.getTypeList()
-		this.queryParams.timeDim = this.getDictDatas(
+    this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
-			this.DICT_TYPE.TIME_DIM
-		)[0].value; // 默认时
   },
   methods: {
     getTypeList() {
       getEnergyTypeListAll().then((res) => {
-				this.energyTypeList = res.data || [];
+        this.energyTypeList = res.data || []
-			});
+      })
-		},
-		// 切换能源类型
-		chooseType(id) {
-			let val;
-			this.energyTypeList.map((item) => {
-				if (item.id === id) {
-					val = item.name;
-				}
-			});
-			if (val == 1 || val == 2) {
-				this.energyType = 1;
-				this.queryParams.objType = null;
-			} else {
-				this.energyType = 2;
-				this.queryParams.objType = this.getDictDatas(
-					this.DICT_TYPE.OBJECT_TYPE
-				)[0].value;
-			}
-			this.selectObjs(this.queryParams.objType);
     },
     // 范围选择器
     timeSelect() {
       switch (this.queryParams.timeDim) {
         case '1':
           if (!this.timeValue) {
-						this.$modal.msgError('时间范围不能为空');
+            this.$modal.msgError('时间范围不能为空')
-						return false;
+            return false
           }
-					if (this.timeValue[1] - this.timeValue[0] > 7 * 24 * 3600000) {
+          if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
-						this.$modal.msgError('最大时间范围为7天，请重新选择');
+            this.$modal.msgError('最大时间范围为7天，请重新选择')
-						this.timeValue = [];
+            this.timeValue = []
           }
-					break;
+          break
         case '2':
           if (!this.dateValue) {
-						this.$modal.msgError('时间范围不能为空');
+            this.$modal.msgError('时间范围不能为空')
-						return false;
+            return false
           }
-					if (this.dateValue[1] - this.dateValue[0] > 29 * 24 * 3600000) {
+          if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
-						this.$modal.msgError('最大时间范围为30天，请重新选择'); // 自动选择默认是0:00:00要求是23:59:59
+            this.$modal.msgError('最大时间范围为30天，请重新选择') // 自动选择默认是0:00:00要求是23:59:59
-						this.dateValue = [];
+            this.dateValue = []
           }
-					break;
+          break
         case '4':
           if (!this.monthValue) {
-						this.$modal.msgError('时间范围不能为空');
+            this.$modal.msgError('时间范围不能为空')
-						return false;
+            return false
           }
-					if (this.monthValue[1] - this.monthValue[0] > 729 * 24 * 3600000) {
+          if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
-						this.$modal.msgError('最大时间范围为24个月，请重新选择'); // 同理上面
+            this.$modal.msgError('最大时间范围为24个月，请重新选择')// 同理上面
-						this.monthValue = [];
+            this.monthValue = []
           }
-					break;
+          break
           default:
       }
     },
     // 年选择器
     startYear() {
       if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
-				this.$modal.msgError('开始时间不能晚于结束时间，请重新选择');
+        this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
-				this.yearValue1 = null;
+        this.yearValue1 = null
-				return false;
+        return false
       }
       if (this.yearValue1 && this.yearValue2) {
-				if (this.yearValue2 - this.yearValue1 > 10 * 365 * 24 * 3600000) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
-					this.$modal.msgError('最大时间范围为10年，请重新选择');
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
-					this.yearValue1 = null;
+          this.yearValue1 = null
-					return false;
+          return false
         }
       }
     },
     endYear() {
       if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
-				this.$modal.msgError('结束时间不能早于开始时间，请重新选择');
+        this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
-				this.yearValue2 = null;
+        this.yearValue2 = null
-				return false;
+        return false
       }
       if (this.yearValue1 && this.yearValue2) {
-				if (this.yearValue2 - this.yearValue1 > 10 * 365 * 24 * 3600000) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
-					this.$modal.msgError('最大时间范围为10年，请重新选择');
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
-					this.yearValue2 = null;
+          this.yearValue2 = null
-					return false;
+          return false
         }
       }
     },
     // 周选择器
     startWeek() {
       if (this.weekValue1 && this.weekValue2) {
-				let a = new Date(this.weekValue1).getTime();
+        let a = new Date(this.weekValue1).getTime()
-				let b = new Date(this.weekValue2).getTime();
+        let b = new Date(this.weekValue2).getTime()
         if (a > b) {
-					this.$modal.msgError('开始时间不能晚于结束时间，请重新选择');
+          this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
-					this.weekValue1 = null;
+          this.weekValue1 = null
-					return false;
+          return false
         }
-				if (b - a > 167 * 24 * 3600000) {
+        if (b - a > 167*24*3600000) {
-					this.$modal.msgError('最大时间范围为24周，请重新选择');
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
-					this.weekValue1 = null;
+          this.weekValue1 = null
-					return false;
+          return false
         }
       }
     },
     endWeek() {
       if (this.weekValue1 && this.weekValue2) {
-				let a = new Date(this.weekValue1).getTime();
+        let a = new Date(this.weekValue1).getTime()
-				let b = new Date(this.weekValue2).getTime();
+        let b = new Date(this.weekValue2).getTime()
         if (a > b) {
-					this.$modal.msgError('结束时间不能早于开始时间，请重新选择');
+          this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
-					this.weekValue2 = null;
+          this.weekValue2 = null
-					return false;
+          return false
         }
-				if (b - a > 167 * 24 * 3600000) {
+        if (b - a > 167*24*3600000) {
-					this.$modal.msgError('最大时间范围为24周，请重新选择');
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
-					this.weekValue2 = null;
+          this.weekValue2 = null
-					return false;
+          return false
         }
       }
     },
     // 对象维度
     selectObjs(val) {
-			console.log(val);
+      console.log(val)
       switch (val) {
         case '1':
-					getFactoryList().then((res) => {
+          getLineAll().then(res => {
-						this.objectList = res.data || [];
+            this.objectList = res.data || []
-						this.queryParams.objIds = [];
+            this.queryParams.objIds = []
-					});
+          })
           break;
         case '2':
-					getLineAll().then((res) => {
+          getWorkShopAll().then(res => {
-						this.objectList = res.data || [];
+            this.objectList = res.data || []
-						this.queryParams.objIds = [];
+            this.queryParams.objIds = []
-					});
+          })
           break;
         default:
-					getWorkShopAll().then((res) => {
+          getEquipmentAll().then(res => {
-						this.objectList = res.data || [];
+            this.objectList = res.data || []
-						this.queryParams.objIds = [];
+            this.queryParams.objIds = []
-					});
+          })
       }
     },
     // 查询
     search() {
       if (!this.queryParams.energyTypeId) {
-				this.$modal.msgError('请选择能源类型');
+        this.$modal.msgError('请选择能源类型')
-				return false;
+        return false
       }
       if (!this.queryParams.timeDim) {
-				this.$modal.msgError('请选择时间维度');
+        this.$modal.msgError('请选择时间维度')
-				return false;
+        return false
       }
       switch (this.queryParams.timeDim) {
         case '1':
           if (this.timeValue && this.timeValue.length > 0) {
-						this.queryParams.startTime = this.timeValue[0];
+            this.queryParams.startTime = this.timeValue[0]
-						this.queryParams.endTime = this.timeValue[1]; // 不用转
+            this.queryParams.endTime = this.timeValue[1] // 不用转
           } else {
-						this.$modal.msgError('时间范围不能为空');
+            this.$modal.msgError('时间范围不能为空')
-						return false;
+            return false
           }
-					break;
+          break
         case '2':
           if (this.dateValue.length > 0) {
-						this.queryParams.startTime = this.dateValue[0];
+            this.queryParams.startTime = this.dateValue[0]
-						this.queryParams.endTime = this.dateValue[1] + 86399000; // 转为23:59:59
+            this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
           } else {
-						this.$modal.msgError('日范围不能为空');
+            this.$modal.msgError('日范围不能为空')
-						return false;
+            return false
           }
-					break;
+          break
         case '3':
           if (this.weekValue1 && this.weekValue2) {
-						let a =
+            let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
-							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'
-						let b =
+            this.queryParams.startTime = new Date(a).getTime()
-							moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59';
+            this.queryParams.endTime = new Date(b).getTime()
-						this.queryParams.startTime = new Date(a).getTime();
-						this.queryParams.endTime = new Date(b).getTime();
           } else {
-						this.$modal.msgError('周范围不能为空');
+            this.$modal.msgError('周范围不能为空')
-						return false;
+            return false
           }
-					break;
+          break
-				case '4': // 转为本月最后一天的最后一秒
+        case '4':// 转为本月最后一天的最后一秒
           if (this.monthValue.length > 0) {
-						this.queryParams.startTime = this.monthValue[0];
+            this.queryParams.startTime = this.monthValue[0]
-						this.queryParams.endTime = this.transformTime(this.monthValue[1]);
+            this.queryParams.endTime = this.transformTime(this.monthValue[1])
           } else {
-						this.$modal.msgError('月范围不能为空');
+            this.$modal.msgError('月范围不能为空')
-						return false;
+            return false
           }
-					break;
+          break
-				default: //本年最后一天
+        default://本年最后一天
           if (this.yearValue1 && this.yearValue2) {
             if (this.yearValue2 < this.yearValue1) {
-							this.$modal.msgError('结束时间不能早于开始时间');
+              this.$modal.msgError('结束时间不能早于开始时间')
-							return false;
+              return false
             } else {
-							this.queryParams.startTime = this.yearValue1;
+              this.queryParams.startTime = this.yearValue1
-							this.queryParams.endTime = this.transformYear(this.yearValue2);
+              this.queryParams.endTime = this.transformYear(this.yearValue2)
             }
           } else {
-						this.$modal.msgError('年范围不能为空');
+            this.$modal.msgError('年范围不能为空')
-						return false;
+            return false
           }
       }
       if (!this.queryParams.objType) {
-				this.$modal.msgError('请选择对象维度');
+        this.$modal.msgError('请选择对象维度')
-				return false;
+        return false
       }
       if (this.queryParams.objIds.length === 0) {
-				this.$modal.msgError('请选择对象');
+        this.$modal.msgError('请选择对象')
-				return false;
+        return false
       }
-			this.queryParams.startTime = this.queryParams.startTime + '';
+      this.queryParams.startTime = this.queryParams.startTime + ''
-			this.queryParams.endTime = this.queryParams.endTime + '';
+      this.queryParams.endTime = this.queryParams.endTime + ''
-			console.log(this.queryParams);
+      console.log(this.queryParams)
-			this.$emit('submit', this.queryParams);
+      this.$emit('submit', this.queryParams)
     },
     resetBtn() {
-			this.queryParams.energyTypeId = null;
+      this.queryParams.energyTypeId = null
-			this.queryParams.timeDim = this.getDictDatas(
+      this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
-				this.DICT_TYPE.TIME_DIM
+      this.queryParams.objIds = []
-			)[0].value; // 默认时
+      this.queryParams.objType = ''
-			this.queryParams.objIds = [];
+      this.timeValue = []
-			this.queryParams.objType = '';
+      this.dateValue = []
-			this.timeValue = [];
+      this.weekValue1 = null
-			this.dateValue = [];
+      this.weekValue2 = null
-			this.weekValue1 = null;
+      this.monthValue = []
-			this.weekValue2 = null;
+      this.yearValue1 = null
-			this.monthValue = [];
+      this.yearValue2 = null
-			this.yearValue1 = null;
-			this.yearValue2 = null;
     },
-		// 导出
+    transformTime(timeStamp) {// 本月最后一天
-		exportBtn() {
+      let year = moment(timeStamp).format('YYYY')
-			this.$emit('export');
+      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
     },
-		transformTime(timeStamp) {
+    transformYear(timeStamp) {// 本年最后一天
-			// 本月最后一天
+      let year = moment(timeStamp).format('YYYY')
-			let year = moment(timeStamp).format('YYYY');
+      let newData = year+'-12-31 23:59:59'
-			let month = moment(timeStamp).format('MM');
+      let value = new Date(newData).getTime()
-			let newData =
+      return value
-				moment(new Date(year, month, 0)).format('YYYY-MM-DD') + ' 23:59:59';
-			let value = new Date(newData).getTime();
-			return value;
     },
-		transformYear(timeStamp) {
+    switchMode() {// 展开和收起切换
-			// 本年最后一天
+      this.isExpand = !this.isExpand
-			let year = moment(timeStamp).format('YYYY');
+      const element = this.$refs.searchBarRef
-			let newData = year + '-12-31 23:59:59';
-			let value = new Date(newData).getTime();
-			return value;
-		},
-		switchMode() {
-			// 展开和收起切换
-			this.isExpand = !this.isExpand;
-			const element = this.$refs.searchBarRef;
       if (this.isExpand) {
-				element.classList.remove('divHeight');
+        element.classList.remove('divHeight')
       } else {
-				element.classList.add('divHeight');
+        element.classList.add('divHeight')
       }
-		},
+    }
-	},
+  }
-};
+}
 </script>
 <style lang='scss'>
 /* 时间整点 */
@@ -546,11 +463,11 @@ export default {
 .demo-form-inline {
   .el-date-editor .el-range__icon {
     font-size: 16px;
-		color: #0b58ff;
+    color: #0B58FF;
   }
   .el-input__prefix .el-icon-date {
     font-size: 16px;
-		color: #0b58ff;
+    color: #0B58FF;
   }
 }
 </style>
@@ -560,15 +477,11 @@ export default {
     display: inline-block;
     width: 4px;
     height: 16px;
-		background-color: #0b58ff;
+    background-color: #0B58FF;
     border-radius: 1px;
     margin-right: 8px;
     margin-top: 12px;
   }
-	.el-form-item {
-		margin-right: 10px;
-		margin-bottom: 4px;
-	}
 }
 .searchBarBox .foldClass {
   position: absolute;
@@ -576,7 +489,7 @@ export default {
   right: 0;
   cursor: pointer;
   font-size: 12px;
-	color: #0b58ff;
+  color:#0B58FF;
 }
 .searchBarBox .foldClass .iconfont {
   font-size: 14px;
@@ -589,7 +502,7 @@ export default {
   display: inline-block;
   width: 1px;
   height: 24px;
-	background: #e8e8e8;
+  background: #E8E8E8;
   vertical-align: middle;
   margin: 0 10px;
 }

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

@@ -1,129 +1,96 @@
 <template>
-	<div
+  <div class="app-container contrastAnalysisBox" id="contrastAnalysisBox">
-		class="app-container contrastAnalysisBox"
-		id="contrastAnalysisBox">
     <!-- 搜索工作栏 -->
-		<search-area
+    <search-area  :isFold="isFold" @submit="getList"/>
-			:isFold="isFold"
+    <el-tabs v-model="activeName" @tab-click="switchChart" v-show='chartData.length'>
-			@submit="getList"
+      <el-tab-pane label="柱状图" name="bar">
-			@export="exportExl" />
+        <bar-chart ref="analysisBarChart" :chartData="chartData" :timeDim="timeDim" />
-		<div v-show="chartData.length">
+      </el-tab-pane>
-			<bar-chart
+      <el-tab-pane label="折线图" name="line">
-				ref="analysisBarChart"
+        <line-chart ref="analysisLineChart" :chartData="chartData" :timeDim="timeDim"/>
-				:chartData="chartData"
+      </el-tab-pane>
-				:timeDim="timeDim" />
+    </el-tabs>
-			<base-table
-				:table-props="tableProps"
-				:table-data="list"
-				:max-height="tableH"
-				class="contrast-out-table" />
-		</div>
     <!-- 没有数据 -->
-		<div
+    <div class="no-data-bg" v-show='!chartData.length'></div>
-			class="no-data-bg"
-			v-show="!chartData.length"></div>
   </div>
 </template>
 <script>
-import { getCompare } from '@/api/analysis/energyAnalysis';
+import { getCompare } from "@/api/analysis/energyAnalysis"
-import SearchArea from './components/searchArea';
+import SearchArea from "./components/searchArea"
-import BarChart from './components/barChart';
+import BarChart from "./components/barChart"
-import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
+import LineChart from "./components/lineChart"
-import FileSaver from 'file-saver';
-import * as XLSX from 'xlsx/xlsx.mjs';
 // import moment from 'moment'
 export default {
   name: 'ContrastAnalysis',
-	components: { SearchArea, BarChart },
+  components: { SearchArea, BarChart, LineChart },
-	mixins: [tableHeightMixin],
   data() {
     return {
       isFold: false,
+      activeName: 'bar',
       chartData: [],
-			timeDim: '',
+      timeDim: ''
-			tableProps: [],
+    }
-			list: [],
-			tableH: this.tableHeight(250) / 2,
-		};
   },
   mounted() {
     window.addEventListener('resize', () => {
-			this.isFold = this.searchBarWidth('contrastAnalysisBox', 1437);
+      this.tableH = this.tableHeight(260)
+      this.isFold = this.searchBarWidth('contrastAnalysisBox', 1437)
       // console.log(document.getElementById("contrastAnalysisBox").offsetWidth)
-		});
+    })
-		this.isFold = this.searchBarWidth('contrastAnalysisBox', 1437);
+    this.isFold = this.searchBarWidth('contrastAnalysisBox', 1437)
   },
   methods: {
-		_setTableHeight() {
-			this.tableH = this.tableHeight(250) / 2;
-		},
     getList(params) {
-			this.timeDim = params.timeDim;
+      this.timeDim = params.timeDim
       getCompare({ ...params }).then((res) => {
+        console.log(res)
         if (res.code === 0) {
-					this.getTableList(res.data || []);
+          this.chartData = res.data || []
-					this.chartData = res.data || [];
         } else {
-					this.chartData = [];
+          this.chartData = []
         }
-			});
+      })
     },
-		getTableList(arr) {
+    switchChart() {
-			this.tableProps = [];
+      if (this.activeName === 'bar') {
-			this.list = [];
+        this.$nextTick((res) => {
-			let tempX = [];
+          this.$refs.analysisBarChart.getChart()
-			let timeArr = arr[0].trendRespVOList || [];
+        })
-			this.list = timeArr.map((item) => {
-				return { time: item.time };
-			});
-			for (let i = 0; i < arr.length; i++) {
-				let obj = {};
-				obj.prop = arr[i].objId;
-				obj.label = arr[i].objName;
-				obj.minWidth = 100;
-				tempX.push(obj);
-				let tiemList = arr[i].trendRespVOList;
-				for (let j = 0; j < tiemList.length; j++) {
-					this.list[j][arr[i].objId] = tiemList[j].useNum
-						? tiemList[j].useNum.toFixed(2)
-						: null;
-				}
-			}
-			this.tableProps = [{ prop: 'time', label: '时间' }].concat(tempX);
-		},
-		// 导出
-		exportExl() {
-			if (this.list.length > 0) {
-				var wb = XLSX.utils.table_to_book(
-					document.querySelector('.contrast-out-table')
-				);
-				let fileName = '对比分析.xlsx';
-				var wbout = XLSX.write(wb, {
-					bookType: 'xlsx',
-					bookSST: true,
-					type: 'array',
-				});
-				try {
-					FileSaver.saveAs(
-						new Blob([wbout], { type: 'application/octet-stream' }),
-						fileName
-					);
-					this.$message.success('导出成功');
-				} catch (e) {
-					if (typeof console !== 'undefined') console.log(e, wbout);
-				}
-				return wbout;
       } else {
-				this.$modal.msgWarning('暂无数据导出');
+        this.$nextTick((res) => {
+          this.$refs.analysisLineChart.getChart()
+        })
       }
-		},
+    }
-	},
+  }
-};
+}
 </script>
 <style lang='scss'>
 .contrastAnalysisBox {
-	.contrast-out-table {
+  .el-tabs__nav::after {
-		margin-top: 20px;
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #e4e7ed;
+    /* z-index: 1; */
+  }
+  .el-tabs__nav-wrap::after {
+    width: 0;
+  }
+  .el-tabs__item {
+    padding: 0 10px;
+  }
+  .el-tabs__item:hover {
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .el-tabs__item.is-active {
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .el-tabs__item {
+    color: rgba(0, 0, 0, 0.45);
   }
 }
 </style>

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

@@ -1,44 +1,28 @@
 <template>
-	<el-form
+  <el-form :inline="true" class="demo-form-inline">
-		:inline="true"
-		class="demo-form-inline">
     <span class="blue-block"></span>
-		<el-form-item
+    <el-form-item label="对象选择" required>
-			label="对象选择"
+      <el-cascader
-			required>
+        v-model="objArr"
-			<el-select
+        :options="objList"
-				v-model="queryParams.objId"
+        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
-				placeholder="请选择"
+        popper-class="cascaderParent"
-				style="width: 250px"
+        size="small"
-				filterable
+        style="width: 250px;"
-				size="small">
+        clearable></el-cascader>
-				<el-option
-					v-for="item in objList"
-					:key="item.id"
-					:label="item.name"
-					:value="item.id"
-					:clearable="false"></el-option>
-			</el-select>
     </el-form-item>
-		<el-form-item
+    <el-form-item label="时间维度" required>
-			label="时间维度"
+      <el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;" size="small">
-			required>
-			<el-select
-				v-model="queryParams.type"
-				placeholder="请选择"
-				style="width: 80px"
-				size="small">
         <el-option
           v-for="item in timeType"
           :key="item.id"
           :label="item.name"
           :value="item.id"
-					:clearable="false"></el-option>
+          :clearable="false">
+        </el-option>
       </el-select>
     </el-form-item>
-		<el-form-item
+    <el-form-item label="时间" required>
-			label="时间"
-			required>
       <div v-show="queryParams.type === 1">
         <el-date-picker
           v-model="monthValue"
@@ -47,7 +31,8 @@
           @change="selectTime"
           :clearable="false"
           size="small"
-					placeholder="选择月"></el-date-picker>
+          placeholder="选择月">
+        </el-date-picker>
       </div>
       <div v-show="queryParams.type === 2">
         <el-date-picker
@@ -58,7 +43,8 @@
           @change="selectTime"
           :clearable="false"
           size="small"
-					placeholder="选择周"></el-date-picker>
+          placeholder="选择周">
+        </el-date-picker>
       </div>
       <div v-show="queryParams.type === 3">
         <el-date-picker
@@ -68,34 +54,24 @@
           @change="selectTime"
           :clearable="false"
           size="small"
-					placeholder="选择日"></el-date-picker>
+          placeholder="选择日">
+        </el-date-picker>
       </div>
     </el-form-item>
     <el-form-item>
-			<el-button
+      <el-button type="primary" size="small" @click="search">查询</el-button>
-				type="primary"
-				size="small"
-				@click="search">
-				查询
-			</el-button>
     </el-form-item>
     <el-form-item>
       <span class="separateStyle"></span>
     </el-form-item>
     <el-form-item>
-			<el-button
+      <el-button type="primary" size="small" @click="exportData" plain>导出</el-button>
-				type="primary"
-				size="small"
-				@click="exportData"
-				plain>
-				导出
-			</el-button>
     </el-form-item>
   </el-form>
 </template>
 <script>
-import { getTree } from '@/api/analysis/energyAnalysis';
+import { getTree } from '@/api/base/factory'
-import moment from 'moment';
+import moment from 'moment'
 export default {
   name: 'searchArea',
   data() {
@@ -104,126 +80,133 @@ export default {
       queryParams: {
         type: 1,
         searchTime: null,
-				objId: null,
+        objId: null
-				objType: 1,
       },
       timeType: [
-				{ id: 1, name: '月' },
+        {id: 1, name: '月'},
-				{ id: 2, name: '周' },
+        {id: 2, name: '周'},
-				{ id: 3, name: '日' },
+        {id: 3, name: '日'}
       ],
       monthValue: '',
       weekValue: '',
       dateValue: '',
+      objArr: [],
       objList: [],
       pickerOptions: {
         disabledDate(date) {
-					return date.getTime() > Date.now();
+          return date.getTime() > Date.now()
-				},
+        }
       },
       pickerOptionsWeek: {
         disabledDate(time) {
-					let day = Date.now();
+          let day = Date.now()
-					let limitTime = moment(day).day(-1);
+          let limitTime = moment(day).day(-1)
-					return time.getTime() > new Date(limitTime).getTime();
+          return time.getTime() > new Date(limitTime).getTime()
-				},
+        }
-			},
+      }
-		};
+    }
   },
   mounted() {
-		this.getObjTree();
+    this.getObjTree()
   },
   methods: {
     getObjTree() {
-			getTree().then((res) => {
+      getTree().then(res => {
-				this.objList = res.data || [];
+        this.objList = res.data || []
-				if (this.objList.length > 0) {
+      })
-					this.queryParams.objId = this.objList[0].id;
-				}
-			});
     },
     selectTime() {
       switch (this.queryParams.type) {
         case 1:
-					this.queryParams.searchTime = this.monthValue;
+          this.queryParams.searchTime = this.monthValue
           break;
         case 2:
-					this.queryParams.searchTime = this.weekValue;
+          this.queryParams.searchTime = this.weekValue
           break;
         default:
-					this.queryParams.searchTime = this.dateValue;
+          this.queryParams.searchTime = this.dateValue
       }
     },
     // 查询
     search() {
-			if (!this.queryParams.objId) {
+      if (this.objArr.length === 0) {
-				this.$modal.msgError('请选择对象');
+        this.$modal.msgError('请选择对象')
-				return false;
+        return false
+      } else {
+        this.queryParams.objId = this.objArr[this.objArr.length-1]
       }
       if (!this.queryParams.type) {
-				this.$modal.msgError('请选择时间维度');
+        this.$modal.msgError('请选择时间维度')
-				return false;
+        return false
       }
       if (!this.queryParams.searchTime) {
-				this.$modal.msgError('请选择时间');
+        this.$modal.msgError('请选择时间')
-				return false;
+        return false
       }
       switch (this.queryParams.type) {
         case 1:
-					this.queryParams.searchTime = this.transformTime(this.monthValue);
+          this.queryParams.searchTime = this.transformTime(this.monthValue)
           break;
         case 2:
-					let value =
+          let value = moment(this.weekValue).day(6).format('YYYY-MM-DD') + ' 23:59:59'
-						moment(this.weekValue).day(6).format('YYYY-MM-DD') + ' 23:59:59';
+          this.queryParams.searchTime = new Date(value).getTime()
-					this.queryParams.searchTime = new Date(value).getTime();
           break;
         default:
-					let value2 =
+           let value2 = moment(this.dateValue).format('YYYY-MM-DD') + ' 23:59:59'
-						moment(this.dateValue).format('YYYY-MM-DD') + ' 23:59:59';
+           this.queryParams.searchTime = new Date(value2).getTime()
-					this.queryParams.searchTime = new Date(value2).getTime();
       }
-			this.$emit('submit', this.queryParams);
+      this.$emit('submit', this.queryParams)
     },
     exportData() {
-			let name;
+      let name
       if (this.queryParams.objId) {
-				name = this.getObjName(this.objList, this.queryParams.objId);
+        name = this.getObjName(this.objList, this.queryParams.objId)
       } else {
-				this.$modal.msgWarning('对象不能为空');
+        this.$modal.msgWarning("对象不能为空")
-				return false;
+        return false
       }
-			this.$emit('exportD', { name: name });
+      this.$emit('exportD', {name: name})
     },
     // 递归取对象name
     getObjName(list, id) {
+      let _this = this
       for (let i = 0; i < list.length; i++) {
-				let a = list[i];
+        let a = list[i]
         if (a.id === id) {
-					return a.name;
+          return a.name
+        } else {
+          if (a.children && a.children.length > 0) {
+            let res = _this.getObjName(a.children, id)
+            if (res) {
+              return res
+            }
+          }
         }
       }
     },
-		transformTime(timeStamp) {
+    transformTime(timeStamp) {// 本月最后一天
-			// 本月最后一天
+      let year = moment(timeStamp).format('YYYY')
-			let year = moment(timeStamp).format('YYYY');
+      let month = moment(timeStamp).format('MM')
-			let month = moment(timeStamp).format('MM');
+      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
-			let newData =
+      let value = new Date(newData).getTime()
-				moment(new Date(year, month, 0)).format('YYYY-MM-DD') + ' 23:59:59';
+      return value
-			let value = new Date(newData).getTime();
+    }
-			return value;
+  }
-		},
+}
-	},
-};
 </script>
 <style lang='scss'>
+/* 级联选择器 */
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
 .demo-form-inline {
   .el-date-editor .el-range__icon {
     font-size: 16px;
-		color: #0b58ff;
+    color: #0B58FF;
   }
   .el-input__prefix .el-icon-date {
     font-size: 16px;
-		color: #0b58ff;
+    color: #0B58FF;
   }
 }
 </style>
@@ -232,7 +215,7 @@ export default {
   display: inline-block;
   width: 1px;
   height: 24px;
-	background: #e8e8e8;
+  background: #E8E8E8;
   vertical-align: middle;
 }
 .demo-form-inline {
@@ -240,14 +223,10 @@ export default {
     display: inline-block;
     width: 4px;
     height: 16px;
-		background-color: #0b58ff;
+    background-color: #0B58FF;
     border-radius: 1px;
     margin-right: 8px;
     margin-top: 10px;
   }
-	.el-form-item {
-		margin-right: 10px;
-		margin-bottom: 4px;
-	}
 }
 </style>

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

@@ -1,34 +1,29 @@
 <template>
   <div class="app-container">
     <!-- 搜索工作栏 -->
-		<search-area
+    <search-area @submit="getList" @exportD="exportData"/>
-			@submit="getList"
-			@exportD="exportData" />
     <!-- 表格 -->
     <div v-show="chartData.length">
       <base-table
         :table-props="tableProps"
         :table-data="list"
-				class="qoq-out-table" />
+        class="qoq-out-table"
+      />
       <div class="chartTitle">环比分析图</div>
-			<div style="width: 100%">
+      <div style='width: 100%'>
-				<line-chart
+        <line-chart ref="analysisLineChart" :chartData="chartData"/>
-					ref="analysisLineChart"
-					:chartData="chartData" />
       </div>
     </div>
     <!-- 没有数据 -->
-		<div
+    <div class="no-data-bg" v-show='!chartData.length'></div>
-			class="no-data-bg"
-			v-show="!chartData.length"></div>
   </div>
 </template>
 <script>
-import { getQoq } from '@/api/analysis/energyAnalysis';
+import { getQoq } from "@/api/analysis/energyAnalysis"
-import SearchArea from './components/searchArea';
+import SearchArea from "./components/searchArea"
-import LineChart from './components/lineChart';
+import LineChart from "./components/lineChart"
-import FileSaver from 'file-saver';
+import FileSaver from "file-saver"
-import * as XLSX from 'xlsx/xlsx.mjs';
+import * as XLSX from 'xlsx/xlsx.mjs'
 export default {
   name: 'QoqAnalysis',
   components: { SearchArea, LineChart },
@@ -36,90 +31,87 @@ export default {
     return {
       chartData: [],
       tableProps: [],
-			list: [],
+      list: []
-		};
+    }
   },
   methods: {
     getList(params) {
       getQoq({ ...params }).then((res) => {
         if (res.code === 0 && res.data) {
-					this.getTableList(res.data);
+          this.getTableList(res.data)
         } else {
-					this.chartData = [];
+          this.chartData = []
-					this.list = [];
+          this.list = []
         }
-			});
+      })
     },
     getTableList(arr) {
-			let data = arr.data;
+      let data = arr.data
-			let nameData = arr.nameData;
+      let nameData = arr.nameData
-			let tempX = [];
+      let tempX = []
       data[0].data.map((item) => {
-				let obj = {};
+        let obj = {}
-				obj.prop = item.dynamicName;
+        obj.prop = item.dynamicName
-				obj.label = item.dynamicName;
+        obj.label = item.dynamicName
-				obj.id = item.id;
+        obj.id = item.id
-				obj.children = [];
+        obj.children = []
-				tempX.push(obj);
+        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 = {};
+            let obj = {}
-						obj.prop = tempX[j].prop + '_' + nameData[i].name;
+            obj.prop = tempX[j].prop + '_' + nameData[i].name
-						obj.label = nameData[i].name;
+            obj.label = nameData[i].name
-						tempX[j].children.push(obj);
+            tempX[j].children.push(obj)
           }
         }
       }
-			this.tableProps = [{ prop: 'time', label: '时间' }].concat(tempX);
+      this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
       // 数据
-			this.list = [];
+      this.list = []
       for (let k = 0; k < data.length; k++) {
-				let obj = {};
+        let obj = {}
-				obj.time = data[k].time;
+        obj.time = data[k].time
-				let arr1 = data[k].data;
+        let arr1 = data[k].data
-				obj.type = [];
+        obj.type = []
         for (let q = 0; q < arr1.length; q++) {
-					let name = arr1[q].dynamicName;
+          let name = arr1[q].dynamicName
-					obj.type.push(name);
+          obj.type.push(name)
-					let arr2 = arr1[q].children;
+          let arr2 = arr1[q].children
           for (let p = 0; p < arr2.length; p++) {
-						let prop = name + '_' + arr2[p].dynamicName;
+            let prop = name + '_' + arr2[p].dynamicName
-						obj[prop] = arr2[p].dynamicValue;
+            obj[prop] = arr2[p].dynamicValue
           }
         }
-				this.list.push(obj);
+        this.list.push(obj)
       }
-			this.chartData = this.list;
+      this.chartData = this.list
     },
     exportData(val) {
       if (this.list.length > 0) {
-				var wb = XLSX.utils.table_to_book(
+        var wb = XLSX.utils.table_to_book(document.querySelector(".qoq-out-table"))
-					document.querySelector('.qoq-out-table')
+        let fileName = val.name + "环比分析.xlsx"
-				);
-				let fileName = val.name + '环比分析.xlsx';
         var wbout = XLSX.write(wb, {
-					bookType: 'xlsx',
+            bookType: "xlsx",
             bookSST: true,
-					type: 'array',
+            type: "array"
-				});
+        })
         try {
             FileSaver.saveAs(
-						new Blob([wbout], { type: 'application/octet-stream' }),
+            new Blob([wbout], { type: "application/octet-stream" }),
             fileName
-					);
+            )
-					this.$message.success('导出成功');
         } catch (e) {
-					if (typeof console !== 'undefined') console.log(e, wbout);
+            if (typeof console !== "undefined") console.log(e, wbout);
         }
-				return wbout;
+        return wbout
       } else {
-				this.$modal.msgWarning('暂无数据导出');
+        this.$modal.msgWarning("暂无数据导出")
       }
-		},
+    }
-	},
+  }
-};
+}
 </script>
 <style lang='scss' scoped>
 .chartTitle {
@@ -132,7 +124,7 @@ export default {
   display: inline-block;
   width: 4px;
   height: 18px;
-	background-color: #0b58ff;
+  background-color: #0B58FF;
   border-radius: 1px;
   margin-right: 8px;
   vertical-align: bottom;

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

@@ -2,43 +2,44 @@
   <div 
     id="analysischartLine"
     style="width: 100%"
-		:style="{ height: chartHeight + 'px' }"></div>
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
 </template>
 <script>
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
-import resize from '@/utils/chartMixins/resize';
+import resize from '@/utils/chartMixins/resize'
 export default {
-	name: 'LineChart',
+  name: "LineChart",
   mixins: [resize],
   data() {
     return {
       chartDom: '',
       chart: '',
-			chartHeight: this.tableHeight(214) - 100,
+      chartHeight: this.tableHeight(214) - 70
-		};
+    }
   },
   props: {
     chartData: {
       type: Array,
       required: true,
       default: () => {
-				return [];
+        return []
-			},
+      }
     },
     timeDim: {
       type: String,
-			default: '',
+      default: ''
-		},
+    }
   },
   watch: {
     chartData: function () {
-			this.getChart();
+      this.getChart()
-		},
+    }
   },
   mounted() {
     window.addEventListener('resize', () => {
-			this.chartHeight = this.tableHeight(214) - 70;
+      this.chartHeight = this.tableHeight(214) - 70
-		});
+    })
   },
   methods: {
     getChart() {
@@ -47,27 +48,27 @@ export default {
         this.chart !== '' &&
         this.chart !== undefined
       ) {
-				this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
       }
-			this.chartDom = document.getElementById('analysischartLine');
+      this.chartDom = document.getElementById('analysischartLine')
-			this.chart = echarts.init(this.chartDom);
+      this.chart = echarts.init(this.chartDom)
-			let xData = [];
+      let xData = []
-			let yData = [];
+      let yData = []
       for (let i = 0; i < this.chartData.length; i++) {
-				let time = '';
+        let time = ""
         if (this.timeDim === '3') {
-					let year = this.chartData[i].time.slice(0, 4);
+          let year = this.chartData[i].time.slice(0,4)
-					let weak = this.chartData[i].time.slice(4, 6);
+          let weak = this.chartData[i].time.slice(4,6)
-					time = year + ' 第 ' + weak + ' 周';
+          time = year+' 第 '+weak+' 周'
         } else {
-					time = this.chartData[i].time;
+          time = this.chartData[i].time
         }
-				xData.push(time);
+        xData.push(time)
-				yData.push(this.chartData[i].useNum);
+        yData.push(this.chartData[i].useNum)
       }
 
       var option = {
-				color: ['#288AFF'],
+        color:['#288AFF'],
         // tooltip: {
         //   trigger: 'axis'
         // },
@@ -75,28 +76,28 @@ export default {
           left: '4%',
           right: '1%',
           bottom: '1%',
-					containLabel: true,
+          containLabel: true
         },
         xAxis: {
           type: 'category',
           data: xData,
           axisLabel: {
-						rotate: '45',
+            rotate: "45"
-					},
+          }
         },
         yAxis: {
-					type: 'value',
+          type: 'value'
         },
         series: [
           {
             data: yData,
-						type: 'line',
+            type: 'line'
-					},
+          }
-				],
+        ]
       };
 
       option && this.chart.setOption(option);
-		},
+    }
-	},
+  }
-};
+}
 </script>

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

@@ -1,79 +1,38 @@
 <template>
-	<div
+  <div class="searchBarBox divHeight" ref="searchBarRef" :style="{ paddingRight: isFold ? '55px' : '0px' }">
-		class="searchBarBox divHeight"
+    <el-form :inline="true" class="demo-form-inline">
-		ref="searchBarRef"
-		:style="{ paddingRight: isFold ? '55px' : '0px' }">
-		<el-form
-			:inline="true"
-			class="demo-form-inline">
       <span class="blue-block"></span>
-			<el-form-item
+      <el-form-item label="能源类型" required>
-				label="能源类型"
+        <el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;" size="small">
-				required>
-				<el-select
-					v-model="queryParams.energyTypeId"
-					placeholder="请选择"
-					size="small"
-					@change="chooseType"
-					filterable
-					style="width: 100%">
           <el-option
             v-for="item in energyTypeList"
             :key="item.id"
-						:label="item.labelName"
+            :label="item.name"
-						:value="item.id"></el-option>
+            :value="item.id">
+          </el-option>
         </el-select>
       </el-form-item>
-			<el-form-item
+      <el-form-item label="对象选择" required>
-				v-if="energyType === 1"
-				label="对象选择"
-				required>
         <el-cascader
           v-model="objArr"
           :options="objList"
-					:show-all-levels="false"
           :props="{ checkStrictly: true, value: 'id', label: 'name' }"
+          popper-class="cascaderParent"
           size="small"
-					@change="changeLine"
           clearable></el-cascader>
       </el-form-item>
-			<el-form-item
+      <el-form-item label="时间维度" required>
-				v-if="energyType === 2"
+        <el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;" size="small">
-				label="对象选择"
-				required>
-				<el-select
-					v-model="objId"
-					placeholder="请选择"
-					style="width: 250px"
-					filterable
-					size="small">
-					<el-option
-						v-for="item in objList"
-						:key="item.id"
-						:label="item.name"
-						:value="item.id"
-						:clearable="false"></el-option>
-				</el-select>
-			</el-form-item>
-			<el-form-item
-				label="时间维度"
-				required>
-				<el-select
-					v-model="queryParams.timeDim"
-					placeholder="请选择"
-					style="width: 80px"
-					size="small">
           <el-option
             v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
             :key="item.value"
             :label="item.label"
             :value="item.value"
-						size="small"></el-option>
+            size="small">
+          </el-option>
         </el-select>
       </el-form-item>
-			<el-form-item
+      <el-form-item label="时间范围" required>
-				label="时间范围"
-				required>
         <div v-show="queryParams.timeDim === '1'">
           <el-date-picker
             v-model="timeValue"
@@ -87,7 +46,9 @@
             popper-class="noneMinute"
             @change="timeSelect"
             size="small"
-						style="width: 350px"></el-date-picker>
+            style='width:350px;'
+            >
+          </el-date-picker>
         </div>
         <div v-show="queryParams.timeDim === '2'">
           <el-date-picker
@@ -100,28 +61,31 @@
             :picker-options="pickerOptions"
             @change="timeSelect"
             size="small"
-						style="width: 350px"></el-date-picker>
+            style='width:350px;'
+            >
+          </el-date-picker>
         </div>
         <div v-show="queryParams.timeDim === '3'">
           <el-date-picker
             v-model="weekValue1"
             type="week"
             format="yyyy 第 WW 周"
-						style="width: 170px"
+            style='width:170px;'
             :picker-options="pickerOptionsWeek"
             @change="startWeek"
             size="small"
-						placeholder="选择周"></el-date-picker>
+            placeholder="选择周">
-					-
+          </el-date-picker>-
           <el-date-picker
             v-model="weekValue2"
             type="week"
             format="yyyy 第 WW 周"
             :picker-options="pickerOptionsWeek"
-						style="width: 170px"
+            style='width:170px;'
             @change="endWeek"
             size="small"
-						placeholder="选择周"></el-date-picker>
+            placeholder="选择周">
+          </el-date-picker>
         </div>
         <div v-show="queryParams.timeDim === '4'">
           <el-date-picker
@@ -133,74 +97,59 @@
             value-format="timestamp"
             :picker-options="pickerOptions"
             size="small"
-						style="width: 350px"
+            style='width:350px;'
-						@change="timeSelect"></el-date-picker>
+            @change="timeSelect"
+            >
+          </el-date-picker>
         </div>
         <div v-show="queryParams.timeDim === '5'">
           <el-date-picker
-						style="width: 170px"
+            style='width:170px;'
             v-model="yearValue1"
             type="year"
             :picker-options="pickerOptions"
             value-format="timestamp"
             placeholder="选择年"
             size="small"
-						@change="startYear"></el-date-picker>
+            @change="startYear"
-					-
+          >
+          </el-date-picker>-
           <el-date-picker
-						style="width: 170px"
+            style='width:170px;'
             v-model="yearValue2"
             type="year"
             :picker-options="pickerOptions"
             value-format="timestamp"
             placeholder="选择年"
             size="small"
-						@change="endYear"></el-date-picker>
+            @change="endYear"
+          >
+          </el-date-picker>
         </div>
       </el-form-item>
       <el-form-item>
-				<el-button
+        <el-button type="primary" size="small" @click="search">查询</el-button>
-					type="primary"
-					size="small"
-					@click="handBtn('search')">
-					查询
-				</el-button>
-				<el-button
-					size="small"
-					@click="resetBtn">
-					重置
-				</el-button>
         <span class="separateStyle"></span>
-				<el-button
+        <el-button size="small" @click="resetBtn">重置</el-button>
-					type="primary"
-					size="small"
-					plain
-					@click="handBtn('exportBtn')">
-					导出
-				</el-button>
       </el-form-item>
     </el-form>
-		<span
+    <span v-if="isFold" class="foldClass" @click='switchMode'>
-			v-if="isFold"
-			class="foldClass"
-			@click="switchMode">
       {{ isExpand ? '收起' : '展开' }}
       <svg-icon :icon-class="isExpand ? 'upward' : 'downward'" />
     </span>
   </div>
 </template>
 <script>
-import { getTree } from '@/api/analysis/energyAnalysis';
+import { getEnergyTypeListAll } from "@/api/base/energyType"
-import { getEnergyTypeListAll } from '@/api/base/energyType';
+import { getTree } from '@/api/base/factory'
-import moment from 'moment';
+import moment from 'moment'
 export default {
   name: 'searchArea',
   props: {
-		isFold: {
+    isFold: {// 多行模式（默认否）
-			// 多行模式（默认否）
       type: Boolean,
-			default: false,
+      default: false
-		},
+    }
   },
   data() {
     return {
@@ -211,315 +160,258 @@ export default {
         objId: null,
         timeDim: null,
         startTime: null,
-				endTime: null,
+        endTime: null
-				objType: 1, //1工厂2产线3工段
       },
-			objId: null,
-			objType: 1, //1工厂2产线3工段,非电使用
-			energyTypeList: [],
-			energyType: 0, //1电2非电
       objArr: [],
-			timeValue: [], // 最大7天只能整点
+      timeValue: [],// 最大7天只能整点
-			dateValue: [], // 最大30天
+      dateValue: [],// 最大30天
-			weekValue1: null, //最多24周
+      weekValue1: null,//最多24周
       weekValue2: null,
-			monthValue: [], //最多24月
+      monthValue: [],//最多24月
-			yearValue1: null, //最多10年
+      yearValue1: null,//最多10年
       yearValue2: null,
+      energyTypeList: [],
       objList: [],
       pickerOptions: {
         disabledDate(date) {
-					return date.getTime() > Date.now();
+          return date.getTime() > Date.now()
-				},
+        }
       },
       pickerOptionsWeek: {
         disabledDate(time) {
-					let day = Date.now();
+          let day = Date.now()
-					let limitTime = moment(day).day(-1);
+          let limitTime = moment(day).day(-1)
-					return time.getTime() > new Date(limitTime).getTime();
+          return time.getTime() > new Date(limitTime).getTime()
-				},
+        }
-			},
+      }
-		};
+    }
   },
   mounted() {
-		this.getEnergyList();
+    this.getTypeList()
-		this.getObjTree();
+    this.getObjTree()
-		this.queryParams.timeDim = this.getDictDatas(
+    this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
-			this.DICT_TYPE.TIME_DIM
+    this.timeValue = [moment().startOf('day'), moment().endOf('day')-59*61*1000]
-		)[0].value; // 默认时
-		this.timeValue = [
-			moment().startOf('day'),
-			moment().endOf('day') - 59 * 61 * 1000,
-		];
   },
   methods: {
-		getObjTree() {
+    getTypeList() {
-			getTree().then((res) => {
-				this.objList = res.data || [];
-				if (this.objList.length > 0) {
-					this.objId = this.objList[0].id;
-				}
-			});
-		},
-		// 获取能源类型
-		getEnergyList() {
       getEnergyTypeListAll().then((res) => {
-				this.energyTypeList = res.data || [];
+        this.energyTypeList = res.data || []
-			});
+      })
     },
-		// 切换能源类型
+    getObjTree() {
-		chooseType(id) {
+      getTree().then(res => {
-			let val;
+        this.objList = res.data || []
-			this.energyTypeList.map((item) => {
+      })
-				if (item.id === id) {
-					val = item.name;
-				}
-			});
-			if (val == 1 || val == 2) {
-				this.energyType = 1;
-			} else {
-				this.energyType = 2;
-			}
-		},
-		// 选择工厂/产线/单元
-		changeLine(val) {
-			this.objType = val.length || 0;
     },
     // 范围选择器
     timeSelect() {
       switch (this.queryParams.timeDim) {
         case '1':
           if (!this.timeValue) {
-						this.$modal.msgError('时间范围不能为空');
+            this.$modal.msgError('时间范围不能为空')
-						return false;
+            return false
           }
-					if (this.timeValue[1] - this.timeValue[0] > 7 * 24 * 3600000) {
+          if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
-						this.$modal.msgError('最大时间范围为7天，请重新选择');
+            this.$modal.msgError('最大时间范围为7天，请重新选择')
-						this.timeValue = [];
+            this.timeValue = []
           }
-					break;
+          break
         case '2':
           if (!this.dateValue) {
-						this.$modal.msgError('时间范围不能为空');
+            this.$modal.msgError('时间范围不能为空')
-						return false;
+            return false
           }
-					if (this.dateValue[1] - this.dateValue[0] > 29 * 24 * 3600000) {
+          if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
-						this.$modal.msgError('最大时间范围为30天，请重新选择'); // 自动选择默认是0:00:00要求是23:59:59
+            this.$modal.msgError('最大时间范围为30天，请重新选择') // 自动选择默认是0:00:00要求是23:59:59
-						this.dateValue = [];
+            this.dateValue = []
           }
-					break;
+          break
         case '4':
           if (!this.monthValue) {
-						this.$modal.msgError('时间范围不能为空');
+            this.$modal.msgError('时间范围不能为空')
-						return false;
+            return false
           }
-					if (this.monthValue[1] - this.monthValue[0] > 729 * 24 * 3600000) {
+          if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
-						this.$modal.msgError('最大时间范围为24个月，请重新选择'); // 同理上面
+            this.$modal.msgError('最大时间范围为24个月，请重新选择')// 同理上面
-						this.monthValue = [];
+            this.monthValue = []
           }
-					break;
+          break
           default:
       }
     },
     // 年选择器
     startYear() {
       if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
-				this.$modal.msgError('开始时间不能晚于结束时间，请重新选择');
+        this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
-				this.yearValue1 = null;
+        this.yearValue1 = null
-				return false;
+        return false
       }
       if (this.yearValue1 && this.yearValue2) {
-				if (this.yearValue2 - this.yearValue1 > 10 * 365 * 24 * 3600000) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
-					this.$modal.msgError('最大时间范围为10年，请重新选择');
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
-					this.yearValue1 = null;
+          this.yearValue1 = null
-					return false;
+          return false
         }
       }
     },
     endYear() {
       if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
-				this.$modal.msgError('结束时间不能早于开始时间，请重新选择');
+        this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
-				this.yearValue2 = null;
+        this.yearValue2 = null
-				return false;
+        return false
       }
       if (this.yearValue1 && this.yearValue2) {
-				if (this.yearValue2 - this.yearValue1 > 10 * 365 * 24 * 3600000) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
-					this.$modal.msgError('最大时间范围为10年，请重新选择');
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
-					this.yearValue2 = null;
+          this.yearValue2 = null
-					return false;
+          return false
         }
       }
     },
     // 周选择器
     startWeek() {
       if (this.weekValue1 && this.weekValue2) {
-				let a = new Date(this.weekValue1).getTime();
+        let a = new Date(this.weekValue1).getTime()
-				let b = new Date(this.weekValue2).getTime();
+        let b = new Date(this.weekValue2).getTime()
         if (a > b) {
-					this.$modal.msgError('开始时间不能晚于结束时间，请重新选择');
+          this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
-					this.weekValue1 = null;
+          this.weekValue1 = null
-					return false;
+          return false
         }
-				if (b - a > 167 * 24 * 3600000) {
+        if (b - a > 167*24*3600000) {
-					this.$modal.msgError('最大时间范围为24周，请重新选择');
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
-					this.weekValue1 = null;
+          this.weekValue1 = null
-					return false;
+          return false
         }
       }
     },
     endWeek() {
       if (this.weekValue1 && this.weekValue2) {
-				let a = new Date(this.weekValue1).getTime();
+        let a = new Date(this.weekValue1).getTime()
-				let b = new Date(this.weekValue2).getTime();
+        let b = new Date(this.weekValue2).getTime()
         if (a > b) {
-					this.$modal.msgError('结束时间不能早于开始时间，请重新选择');
+          this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
-					this.weekValue2 = null;
+          this.weekValue2 = null
-					return false;
+          return false
         }
-				if (b - a > 167 * 24 * 3600000) {
+        if (b - a > 167*24*3600000) {
-					this.$modal.msgError('最大时间范围为24周，请重新选择');
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
-					this.weekValue2 = null;
+          this.weekValue2 = null
-					return false;
+          return false
         }
       }
     },
     // 查询
-		handBtn(val) {
+    search() {
       if (!this.queryParams.energyTypeId) {
-				this.$modal.msgError('请选择能源类型');
+        this.$modal.msgError('请选择能源类型')
-				return false;
+        return false
       }
-			if (this.energyType == 1) {
       if (this.objArr.length === 0) {
-					this.$modal.msgError('请选择对象');
+        this.$modal.msgError('请选择对象')
-					return false;
+        return false
       } else {
-					this.queryParams.objId = this.objArr[this.objArr.length - 1];
+        this.queryParams.objId = this.objArr[this.objArr.length-1]
-					this.queryParams.objType = this.objType;
       }
-			} else if (this.energyType == 2) {
-				if (!this.objId) {
-					this.$modal.msgError('请选择对象');
-					return false;
-				} else {
-					this.queryParams.objId = this.objId;
-					this.queryParams.objType = 1;
-				}
-			}
-
       if (!this.queryParams.timeDim) {
-				this.$modal.msgError('请选择时间维度');
+        this.$modal.msgError('请选择时间维度')
-				return false;
+        return false
       }
       switch (this.queryParams.timeDim) {
         case '1':
           if (this.timeValue && this.timeValue.length > 0) {
-						this.queryParams.startTime = this.timeValue[0];
+            this.queryParams.startTime = this.timeValue[0]
-						this.queryParams.endTime = this.timeValue[1]; // 不用转
+            this.queryParams.endTime = this.timeValue[1] // 不用转
           } else {
-						this.$modal.msgError('时间范围不能为空');
+            this.$modal.msgError('时间范围不能为空')
-						return false;
+            return false
           }
-					break;
+          break
         case '2':
           if (this.dateValue && this.dateValue.length > 0) {
-						this.queryParams.startTime = this.dateValue[0];
+            this.queryParams.startTime = this.dateValue[0]
-						this.queryParams.endTime = this.dateValue[1] + 86399000; // 转为23:59:59
+            this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
           } else {
-						this.$modal.msgError('日范围不能为空');
+            this.$modal.msgError('日范围不能为空')
-						return false;
+            return false
           }
-					break;
+          break
         case '3':
           if (this.weekValue1 && this.weekValue2) {
-						let a =
+            let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
-							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'
-						let b =
+            this.queryParams.startTime = new Date(a).getTime()
-							moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59';
+            this.queryParams.endTime = new Date(b).getTime()
-						this.queryParams.startTime = new Date(a).getTime();
-						this.queryParams.endTime = new Date(b).getTime();
           } else {
-						this.$modal.msgError('周范围不能为空');
+            this.$modal.msgError('周范围不能为空')
-						return false;
+            return false
           }
-					break;
+          break
-				case '4': // 转为本月最后一天的最后一秒
+        case '4':// 转为本月最后一天的最后一秒
           if (this.monthValue && this.monthValue.length > 0) {
-						this.queryParams.startTime = this.monthValue[0];
+            this.queryParams.startTime = this.monthValue[0]
-						this.queryParams.endTime = this.transformTime(this.monthValue[1]);
+            this.queryParams.endTime = this.transformTime(this.monthValue[1])
           } else {
-						this.$modal.msgError('月范围不能为空');
+            this.$modal.msgError('月范围不能为空')
-						return false;
+            return false
           }
-					break;
+          break
-				default: //本年最后一天
+        default://本年最后一天
           if (this.yearValue1 && this.yearValue2) {
             if (this.yearValue2 < this.yearValue1) {
-							this.$modal.msgError('结束时间不能早于开始时间');
+              this.$modal.msgError('结束时间不能早于开始时间')
-							return false;
+              return false
             } else {
-							this.queryParams.startTime = this.yearValue1;
+              this.queryParams.startTime = this.yearValue1
-							this.queryParams.endTime = this.transformYear(this.yearValue2);
+              this.queryParams.endTime = this.transformYear(this.yearValue2)
             }
           } else {
-						this.$modal.msgError('年范围不能为空');
+            this.$modal.msgError('年范围不能为空')
-						return false;
+            return false
           }
       }
-			this.queryParams.startTime = this.queryParams.startTime + '';
+      this.queryParams.startTime = this.queryParams.startTime + ''
-			this.queryParams.endTime = this.queryParams.endTime + '';
+      this.queryParams.endTime = this.queryParams.endTime + ''
-			if (val === 'search') {
+      this.$emit('submit', this.queryParams)
-				this.$emit('submit', this.queryParams);
-			} else {
-				this.$emit('export', this.queryParams);
-			}
     },
     // 重置
     resetBtn() {
-			this.queryParams.energyTypeId = null;
+      this.queryParams.energyTypeId = null
-			this.energyType = 0;
+      this.queryParams.objId = null
-			this.queryParams.objId = null;
+      this.objArr = []
-			this.objId = null;
+      this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
-			this.objType = 1;
+      this.timeValue = [moment().startOf('day'), moment().endOf('day')-59*61*1000]
-			this.objArr = [];
-			this.queryParams.timeDim = this.getDictDatas(
-				this.DICT_TYPE.TIME_DIM
-			)[0].value; // 默认时
-			this.timeValue = [
-				moment().startOf('day'),
-				moment().endOf('day') - 59 * 61 * 1000,
-			];
     },
-		transformTime(timeStamp) {
+    transformTime(timeStamp) {// 本月最后一天
-			// 本月最后一天
+      let year = moment(timeStamp).format('YYYY')
-			let year = moment(timeStamp).format('YYYY');
+      let month = moment(timeStamp).format('MM')
-			let month = moment(timeStamp).format('MM');
+      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
-			let newData =
+      let value = new Date(newData).getTime()
-				moment(new Date(year, month, 0)).format('YYYY-MM-DD') + ' 23:59:59';
+      return value
-			let value = new Date(newData).getTime();
-			return value;
     },
-		transformYear(timeStamp) {
+    transformYear(timeStamp) {// 本年最后一天
-			// 本年最后一天
+      let year = moment(timeStamp).format('YYYY')
-			let year = moment(timeStamp).format('YYYY');
+      let newData = year+'-12-31 23:59:59'
-			let newData = year + '-12-31 23:59:59';
+      let value = new Date(newData).getTime()
-			let value = new Date(newData).getTime();
+      return value
-			return value;
     },
-		switchMode() {
+    switchMode() {// 展开和收起切换
-			// 展开和收起切换
+      this.isExpand = !this.isExpand
-			this.isExpand = !this.isExpand;
+      const element = this.$refs.searchBarRef
-			const element = this.$refs.searchBarRef;
       if (this.isExpand) {
-				element.classList.remove('divHeight');
+        element.classList.remove('divHeight')
       } else {
-				element.classList.add('divHeight');
+        element.classList.add('divHeight')
       }
-		},
+    }
-	},
+  }
-};
+}
 </script>
 <style lang='scss'>
+/* 级联选择器 */
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
 /* 时间整点 */
 .noneMinute .el-time-spinner__wrapper {
   width: 100%;
@@ -530,11 +422,11 @@ export default {
 .demo-form-inline {
   .el-date-editor .el-range__icon {
     font-size: 16px;
-		color: #0b58ff;
+    color: #0B58FF;
   }
   .el-input__prefix .el-icon-date {
     font-size: 16px;
-		color: #0b58ff;
+    color: #0B58FF;
   }
 }
 </style>
@@ -544,15 +436,11 @@ export default {
     display: inline-block;
     width: 4px;
     height: 16px;
-		background-color: #0b58ff;
+    background-color: #0B58FF;
     border-radius: 1px;
     margin-right: 8px;
     margin-top: 12px;
   }
-	.el-form-item {
-		margin-right: 10px;
-		margin-bottom: 4px;
-	}
 }
 .searchBarBox .foldClass {
   position: absolute;
@@ -560,7 +448,7 @@ export default {
   right: 0;
   cursor: pointer;
   font-size: 12px;
-	color: #0b58ff;
+  color:#0B58FF;
 }
 .searchBarBox .foldClass .iconfont {
   font-size: 14px;
@@ -573,7 +461,7 @@ export default {
   display: inline-block;
   width: 1px;
   height: 24px;
-	background: #e8e8e8;
+  background: #E8E8E8;
   vertical-align: middle;
   margin: 0 10px;
 }

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

@@ -1,113 +1,94 @@
 <template>
-	<div
+  <div class="app-container trendAnalysisBox" id="trendAnalysisBox">
-		class="app-container trendAnalysisBox"
-		id="trendAnalysisBox">
     <!-- 搜索工作栏 -->
-		<search-area
+    <search-area :isFold="isFold" @submit="getList"/>
-			:isFold="isFold"
+    <el-tabs v-model="activeName" @tab-click="switchChart" v-show='chartData.length'>
-			@submit="getList"
+      <el-tab-pane label="柱状图" name="bar">
-			@export="exportExl" />
+        <bar-chart ref="analysisBarChart" :chartData="chartData" :timeDim="timeDim"/>
-		<div v-show="chartData.length">
+      </el-tab-pane>
-			<base-table
+      <el-tab-pane label="折线图" name="line">
-				:table-props="tableProps"
+        <line-chart ref="analysisLineChart" :chartData="chartData" :timeDim="timeDim"/>
-				:table-data="list"
+      </el-tab-pane>
-				class="trend-out-table" />
+    </el-tabs>
-			<line-chart
-				ref="analysisLineChart"
-				:chartData="chartData"
-				:timeDim="timeDim" />
-		</div>
     <!-- 没有数据 -->
-		<div
+    <div class="no-data-bg" v-show='!chartData.length'></div>
-			class="no-data-bg"
-			v-show="!chartData.length"></div>
   </div>
 </template>
 <script>
-import { getEnergyTrend, exportTrend } from '@/api/analysis/energyAnalysis';
+import { getEnergyTrend } from "@/api/analysis/energyAnalysis"
-import SearchArea from './components/searchArea';
+import SearchArea from "./components/searchArea"
-import LineChart from './components/lineChart';
+import BarChart from "./components/barChart"
+import LineChart from "./components/lineChart"
 // import moment from 'moment'
 export default {
   name: 'TrendAnalysis',
-	components: { SearchArea, LineChart },
+  components: { SearchArea, BarChart, LineChart },
   data() {
     return {
       isFold: false,
+      activeName: 'bar',
       chartData: [],
-			timeDim: '',
+      timeDim: ''
-			tableProps: [],
+    }
-			list: [],
-		};
   },
   mounted() {
     window.addEventListener('resize', () => {
-			this.tableH = this.tableHeight(260);
+      this.tableH = this.tableHeight(260)
-			this.isFold = this.searchBarWidth('trendAnalysisBox', 1480);
+      this.isFold = this.searchBarWidth('trendAnalysisBox', 1263)
-		});
+    })
-		this.isFold = this.searchBarWidth('trendAnalysisBox', 1480);
+    this.isFold = this.searchBarWidth('trendAnalysisBox', 1263)
   },
   methods: {
     getList(params) {
-			this.timeDim = params.timeDim;
+      this.timeDim = params.timeDim
       getEnergyTrend({ ...params }).then((res) => {
         if (res.code === 0) {
-					this.getTableList(res.data || []);
+          this.chartData = res.data
-					this.chartData = res.data || [];
         } else {
-					this.chartData = [];
+          this.chartData = []
         }
-			});
+      })
     },
-		getTableList(arr) {
+    switchChart() {
-			this.tableProps = [];
+      if (this.activeName === 'bar') {
-			this.list = [];
+        this.$nextTick((res) => {
-			let tempX = [];
+          this.$refs.analysisBarChart.getChart()
-			let listObj = { useNum: '消耗量' }; // 数据
+        })
-			for (let i = 0; i < arr.length; i++) {
+      } else {
-				let obj = {};
+        this.$nextTick((res) => {
-				obj.prop = arr[i].time;
+          this.$refs.analysisLineChart.getChart()
-				obj.label = arr[i].time;
+        })
-				obj.minWidth = 100;
-				tempX.push(obj);
-				listObj[arr[i].time] = arr[i].useNum || null;
       }
-			this.tableProps = [{ prop: 'useNum', label: '时间' }].concat(tempX);
+    }
-			this.list.push(listObj);
+  }
-		},
+}
-		// 导出excel
-		exportExl(params) {
-			exportTrend({ ...params }).then((res) => {
-				// let fileName = '';
-				// const contentDisposition = res.headers['content-disposition'];
-				// if (contentDisposition) {
-				// 	fileName = decodeURIComponent(
-				// 		contentDisposition.slice(
-				// 			contentDisposition.indexOf('filename=') + 9
-				// 		)
-				// 	);
-				// }
-				const blob = new Blob([res.data]);
-				const reader = new FileReader();
-				reader.readAsDataURL(blob);
-				reader.onload = (e) => {
-					const a = document.createElement('a');
-					a.download = '走势分析';
-					a.href = e.target.result;
-					document.body.appendChild(a);
-					a.click();
-					document.body.removeChild(a);
-					this.$message.success('导出成功');
-				};
-			});
-		},
-	},
-};
 </script>
 <style lang='scss'>
 .trendAnalysisBox {
-	.trend-out-table {
+  .el-tabs__nav::after {
-		margin-bottom: 15px;
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #e4e7ed;
+    /* z-index: 1; */
+  }
+  .el-tabs__nav-wrap::after {
+    width: 0;
+  }
+  .el-tabs__item {
+    padding: 0 10px;
+  }
+  .el-tabs__item:hover {
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .el-tabs__item.is-active {
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .el-tabs__item {
+    color: rgba(0, 0, 0, 0.45);
   }
 }
 </style>

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

@@ -1,44 +1,27 @@
 <template>
-	<el-form
+  <el-form :inline="true" class="demo-form-inline">
-		:inline="true"
-		class="demo-form-inline">
     <span class="blue-block"></span>
-		<el-form-item
+    <el-form-item label="对象选择" required>
-			label="对象选择"
+      <el-cascader
-			required>
+        v-model="objArr"
-			<el-select
+        :options="objList"
-				v-model="queryParams.objId"
+        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
-				placeholder="请选择"
+        popper-class="cascaderParent"
-				style="width: 250px"
+        size="small"
-				filterable
+        clearable></el-cascader>
-				size="small">
-				<el-option
-					v-for="item in objList"
-					:key="item.id"
-					:label="item.name"
-					:value="item.id"
-					:clearable="false"></el-option>
-			</el-select>
     </el-form-item>
-		<el-form-item
+    <el-form-item label="时间维度" required>
-			label="时间维度"
+      <el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;" size="small">
-			required>
-			<el-select
-				v-model="queryParams.type"
-				placeholder="请选择"
-				style="width: 80px"
-				size="small">
         <el-option
           v-for="item in timeType"
           :key="item.id"
           :label="item.name"
           :value="item.id"
-					:clearable="false"></el-option>
+          :clearable="false">
+        </el-option>
       </el-select>
     </el-form-item>
-		<el-form-item
+    <el-form-item label="时间" required>
-			label="时间"
-			required>
       <div v-show="queryParams.type === 1 || queryParams.type === 2">
         <el-date-picker
           v-model="yearValue"
@@ -47,7 +30,8 @@
           @change="selectTime"
           :clearable="false"
           size="small"
-					placeholder="选择年"></el-date-picker>
+          placeholder="选择年">
+        </el-date-picker>
       </div>
       <div v-show="queryParams.type === 3">
         <el-date-picker
@@ -57,34 +41,24 @@
           @change="selectTime"
           :clearable="false"
           size="small"
-					placeholder="选择月"></el-date-picker>
+          placeholder="选择月">
+        </el-date-picker>
       </div>
     </el-form-item>
     <el-form-item>
-			<el-button
+      <el-button type="primary" size="small" @click="search">查询</el-button>
-				type="primary"
-				size="small"
-				@click="search">
-				查询
-			</el-button>
     </el-form-item>
     <el-form-item>
       <span class="separateStyle"></span>
     </el-form-item>
     <el-form-item>
-			<el-button
+      <el-button type="primary" size="small" @click="exportData" plain>导出</el-button>
-				type="primary"
-				size="small"
-				@click="exportData"
-				plain>
-				导出
-			</el-button>
     </el-form-item>
   </el-form>
 </template>
 <script>
-import { getTree } from '@/api/analysis/energyAnalysis';
+import { getTree } from '@/api/base/factory'
-import moment from 'moment';
+import moment from 'moment'
 export default {
   name: 'searchArea',
   data() {
@@ -93,111 +67,119 @@ export default {
       queryParams: {
         type: 1, // 1季度2月3日
         searchTime: null,
-				objId: null,
+        objId: null
-				objType: 1,
       },
       timeType: [
-				{ id: 1, name: '季度' },
+        {id: 1, name: '季度'},
-				{ id: 2, name: '月' },
+        {id: 2, name: '月'},
-				{ id: 3, name: '日' },
+        {id: 3, name: '日'}
       ],
       yearValue: '',
       yearMonth: '',
+      objArr: [],
       objList: [],
       pickerOptions: {
         disabledDate(date) {
-					return date.getTime() > Date.now();
+          return date.getTime() > Date.now()
-				},
+        }
-			},
+      }
-		};
+    }
   },
   mounted() {
-		this.getObjTree();
+    this.getObjTree()
   },
   methods: {
     getObjTree() {
-			getTree().then((res) => {
+      getTree().then(res => {
-				this.objList = res.data || [];
+        this.objList = res.data || []
-				if (this.objList.length > 0) {
+      })
-					this.queryParams.objId = this.objList[0].id;
-				}
-			});
     },
     selectTime() {
       if (this.queryParams.type === 3) {
-				this.queryParams.searchTime = this.yearMonth;
+        this.queryParams.searchTime = this.yearMonth
       } else {
-				this.queryParams.searchTime = this.yearValue;
+        this.queryParams.searchTime = this.yearValue
       }
     },
     // 查询
     search() {
-			if (!this.queryParams.objId) {
+      if (this.objArr.length === 0) {
-				this.$modal.msgError('请选择对象');
+        this.$modal.msgError('请选择对象')
-				return false;
+        return false
+      } else {
+        this.queryParams.objId = this.objArr[this.objArr.length-1]
       }
       if (!this.queryParams.type) {
-				this.$modal.msgError('请选择时间维度');
+        this.$modal.msgError('请选择时间维度')
-				return false;
+        return false
       }
       if (!this.queryParams.searchTime) {
-				this.$modal.msgError('请选择时间');
+        this.$modal.msgError('请选择时间')
-				return false;
+        return false
       }
       if (this.queryParams.type === 3) {
-				this.queryParams.searchTime = this.transformTime(this.yearMonth) + '';
+        this.queryParams.searchTime = this.transformTime(this.yearMonth) + ''
       } else {
-				this.queryParams.searchTime = this.transformYear(this.yearValue) + '';
+        this.queryParams.searchTime = this.transformYear(this.yearValue) + ''
       }
-			this.$emit('submit', this.queryParams);
+      this.$emit('submit', this.queryParams)
     },
     exportData() {
-			let name;
+      let name
       if (this.queryParams.objId) {
-				name = this.getObjName(this.objList, this.queryParams.objId);
+        name = this.getObjName(this.objList, this.queryParams.objId)
       } else {
-				this.$modal.msgWarning('对象不能为空');
+        this.$modal.msgWarning("对象不能为空")
-				return false;
+        return false
       }
-			this.$emit('exportD', { name: name });
+      this.$emit('exportD', {name: name})
     },
     // 递归取对象name
     getObjName(list, id) {
+      let _this = this
       for (let i = 0; i < list.length; i++) {
-				let a = list[i];
+        let a = list[i]
         if (a.id === id) {
-					return a.name;
+          return a.name
+        } else {
+          if (a.children && a.children.length > 0) {
+            let res = _this.getObjName(a.children, id)
+            if (res) {
+              return res
+            }
+          }
         }
       }
     },
-		transformTime(timeStamp) {
+    transformTime(timeStamp) {// 本月最后一天
-			// 本月最后一天
+      let year = moment(timeStamp).format('YYYY')
-			let year = moment(timeStamp).format('YYYY');
+      let month = moment(timeStamp).format('MM')
-			let month = moment(timeStamp).format('MM');
+      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
-			let newData =
+      let value = new Date(newData).getTime()
-				moment(new Date(year, month, 0)).format('YYYY-MM-DD') + ' 23:59:59';
+      return value
-			let value = new Date(newData).getTime();
-			return value;
     },
-		transformYear(timeStamp) {
+    transformYear(timeStamp) {// 本年最后一天
-			// 本年最后一天
+      let year = moment(timeStamp).format('YYYY')
-			let year = moment(timeStamp).format('YYYY');
+      let newData = year+'-12-31 23:59:59'
-			let newData = year + '-12-31 23:59:59';
+      let value = new Date(newData).getTime()
-			let value = new Date(newData).getTime();
+      return value
-			return value;
+    }
-		},
+  }
-	},
+}
-};
 </script>
 <style lang='scss'>
+/* 级联选择器 */
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
 .demo-form-inline {
   .el-date-editor .el-range__icon {
     font-size: 16px;
-		color: #0b58ff;
+    color: #0B58FF;
   }
   .el-input__prefix .el-icon-date {
     font-size: 16px;
-		color: #0b58ff;
+    color: #0B58FF;
   }
 }
 </style>
@@ -207,21 +189,17 @@ export default {
     display: inline-block;
     width: 4px;
     height: 16px;
-		background-color: #0b58ff;
+    background-color: #0B58FF;
     border-radius: 1px;
     margin-right: 8px;
     margin-top: 10px;
   }
-	.el-form-item {
-		margin-right: 10px;
-		margin-bottom: 4px;
-	}
 }
 .separateStyle {
   display: inline-block;
   width: 1px;
   height: 24px;
-	background: #e8e8e8;
+  background: #E8E8E8;
   vertical-align: middle;
 }
 </style>

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

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

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

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

src/views/energy/base/energyType/components/energyTypeAdd.vue

@@ -1,161 +1,79 @@
 <template>
-	<el-form
+  <el-form ref="form" :rules="rules" label-width="100px" :model="form">
-		ref="form"
-		:rules="rules"
-		label-width="100px"
-		:model="form">
     <el-row>
       <el-col :span="12">
-				<el-form-item
+        <el-form-item label="能源类型" prop="name">
-					label="能源类型"
+          <el-input v-model="form.name"></el-input>
-					prop="name">
-					<el-select
-						v-model="form.name"
-						placeholder="请选择"
-						style="width: 100%">
-						<el-option
-							v-for="item in getDictDatas(DICT_TYPE.ENERGY_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
+        <el-form-item label="类型编码" prop="code">
-					label="类型编码"
+          <el-input v-model="form.code" disabled></el-input>
-					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
+        <el-form-item label="单位" prop="unit">
-					label="单位"
+          <el-select v-model="form.unit" placeholder="请选择" style="width: 100%;">
-					prop="unit">
+            <el-option v-for="item in getDictDatas(DICT_TYPE.ENERGY_UNIT)" :key="item.value" :label="item.label"
-					<el-select
+              :value="item.value">
-						v-model="form.unit"
+            </el-option>
-						placeholder="请选择"
-						filterable
-						style="width: 100%">
-						<el-option
-							v-for="item in getDictDatas(DICT_TYPE.UNIT_DICT)"
-							: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
+        <el-form-item label="计价方式" prop="pricingMethod">
-					label="计价方式"
+          <el-select v-model="form.pricingMethod" placeholder="请选择" style="width: 100%;">
-					prop="pricingMethod">
+            <el-option label="时间段" :value='0'></el-option>
-					<el-select
+            <el-option label="使用量" :value='1'></el-option>
-						v-model="form.pricingMethod"
+            <el-option label="固定价位" :value='2'></el-option>
-						placeholder="请选择"
-						style="width: 100%">
-						<el-option
-							label="时间段"
-							:value="0"></el-option>
-						<el-option
-							label="使用量"
-							:value="1"></el-option>
-						<el-option
-							label="固定价位"
-							:value="2"></el-option>
           </el-select>
         </el-form-item>
       </el-col>
     </el-row>
     <el-row>
-			<el-col
+      <el-col :span="12" v-show="form.pricingMethod === 2">
-				:span="12"
+        <el-form-item label="单价(元)" prop="pricingMethod">
-				v-show="form.pricingMethod === 2">
+          <el-input-number v-model="form.singlePrice" :precision="2" :min="0" :max="999999999"
-				<el-form-item
+            style="width: 100%;"></el-input-number>
-					label="单价(元)"
-					prop="pricingMethod">
-					<el-input-number
-						v-model="form.singlePrice"
-						:precision="2"
-						:min="0"
-						:max="999999999"
-						style="width: 100%"></el-input-number>
         </el-form-item>
       </el-col>
-			<el-col
+      <el-col :span="12" v-show="form.pricingMethod === 1">
-				:span="12"
+        <el-form-item label="计量维度" prop="dim">
-				v-show="form.pricingMethod === 1">
+          <el-select v-model="form.dim" placeholder="请选择" style="width: 100%;">
-				<el-form-item
+            <el-option label="月" :value='4'></el-option>
-					label="计量维度"
+            <el-option label="年" :value='5'></el-option>
-					prop="dim">
-					<el-select
-						v-model="form.dim"
-						placeholder="请选择"
-						style="width: 100%">
-						<el-option
-							label="月"
-							:value="4"></el-option>
-						<el-option
-							label="年"
-							:value="5"></el-option>
           </el-select>
         </el-form-item>
       </el-col>
-			<el-col
+      <el-col :span="24" v-show="form.pricingMethod === 0">
-				:span="24"
+        <el-form-item label="时间段" prop="pricingMethod">
-				v-show="form.pricingMethod === 0">
+          <base-table :key='timeKye' :table-props="tableProps1" :table-data="tableData1"
-				<el-form-item
+            :add-button-show="addButtonShow" @emitButtonClick="emitButtonClick1" @emitFun="inputChange1">
-					label="时间段"
+            <method-btn v-if="tableBtn.length" slot="handleBtn" :width="80" label="操作" :method-list="tableBtn"
-					prop="pricingMethod">
-					<base-table
-						:key="timeKye"
-						:table-props="tableProps1"
-						:table-data="tableData1"
-						:add-button-show="addButtonShow"
-						@emitButtonClick="emitButtonClick1"
-						@emitFun="inputChange1">
-						<method-btn
-							v-if="tableBtn.length"
-							slot="handleBtn"
-							:width="80"
-							label="操作"
-							:method-list="tableBtn"
               @clickBtn="handleClick1" />
           </base-table>
         </el-form-item>
       </el-col>
-			<el-col
+      <el-col :span="24" v-show="form.pricingMethod === 1">
-				:span="24"
+        <el-form-item label="使用量" prop="pricingMethod">
-				v-show="form.pricingMethod === 1">
+          <base-table :key='usedKye' :table-props="tableProps2" :table-data="tableData2"
-				<el-form-item
+            :add-button-show="addButtonShow" @emitButtonClick="emitButtonClick2" @emitFun="inputChange2">
-					label="使用量"
+            <method-btn v-if="tableBtn.length" slot="handleBtn" :width="80" label="操作" :method-list="tableBtn"
-					prop="pricingMethod">
-					<base-table
-						:key="usedKye"
-						:table-props="tableProps2"
-						:table-data="tableData2"
-						:add-button-show="addButtonShow"
-						@emitButtonClick="emitButtonClick2"
-						@emitFun="inputChange2">
-						<method-btn
-							v-if="tableBtn.length"
-							slot="handleBtn"
-							:width="80"
-							label="操作"
-							:method-list="tableBtn"
               @clickBtn="handleClick2" />
           </base-table>
         </el-form-item>
       </el-col>
     </el-row>
     <el-row>
-			<el-col :span="24">
+      <el-col :span="12">
-				<el-form-item
+        <el-form-item label="是否推送" prop="push">
-					label="描述"
+          <el-switch v-model="form.push"></el-switch>
-					prop="description">
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="描述" prop="description">
           <el-input v-model="form.description"></el-input>
         </el-form-item>
       </el-col>
@@ -163,31 +81,26 @@
   </el-form>
 </template>
 <script>
-import {
+import { getEnergyType, updateEnergyType, createEnergyType, getEnergyTypeCode } from '@/api/base/energyType'
-	getEnergyType,
+import inputArea from './InputArea.vue'
-	updateEnergyType,
+import timePickerArea from './TimePickerArea.vue'
-	createEnergyType,
-	getEnergyTypeCode,
-} from '@/api/base/energyType';
-import inputArea from './InputArea.vue';
-import timePickerArea from './TimePickerArea.vue';
 const tableProps1 = [
   {
     prop: 'startTime',
     label: '开始时间',
-		subcomponent: timePickerArea,
+    subcomponent: timePickerArea
   },
   {
     prop: 'endTime',
     label: '结束时间',
-		subcomponent: timePickerArea,
+    subcomponent: timePickerArea
   },
   {
     prop: 'price',
     label: '单价(元)',
-		subcomponent: inputArea,
+    subcomponent: inputArea
-	},
+  }
-];
+]
 const tableProps2 = [
   {
     prop: 'startUsed',
@@ -197,14 +110,14 @@ const tableProps2 = [
   {
     prop: 'endUsed',
     label: '上限量',
-		subcomponent: inputArea,
+    subcomponent: inputArea
   },
   {
     prop: 'price',
     label: '单价(元)',
-		subcomponent: inputArea,
+    subcomponent: inputArea
-	},
+  }
-];
+]
 export default {
   name: 'energyTypeAdd',
   data() {
@@ -217,16 +130,13 @@ export default {
         singlePrice: 0,
         pricingMethod: 2,
         dim: '',
-				description: '',
+        push: false,
+        description: ''
       },
       isEdit: false, //是否是编辑
       rules: {
-				name: [
+        name: [{ required: true, message: '能源类型不能为空', trigger: 'blur' }],
-					{ required: true, message: '能源类型不能为空', trigger: 'blur' },
+        pricingMethod: [{ required: true, message: '计价方式不能为空', trigger: 'change' }]
-				],
-				pricingMethod: [
-					{ required: true, message: '计价方式不能为空', trigger: 'change' },
-				],
       },
       timeKye: 0,
       usedKye: 0,
@@ -237,129 +147,130 @@ export default {
       tableBtn: [
         {
           type: 'delete',
-					name: '删除',
+          name: '删除'
-				},
+        }
       ],
-			addButtonShow: '新增',
+      addButtonShow: '新增'
-		};
+    }
   },
   methods: {
     init(id) {
       if (id) {
-				this.isEdit = true;
+        this.isEdit = true
-				this.form.id = id;
+        this.form.id = id
         getEnergyType(id).then((res) => {
           if (res.code === 0) {
-						this.form.name = res.data.name;
+            this.form.name = res.data.name
-						this.form.code = res.data.code;
+            this.form.code = res.data.code
-						this.form.unit = res.data.unit;
+            this.form.unit = res.data.unit
-						this.form.pricingMethod = res.data.pricingMethod;
+            this.form.pricingMethod = res.data.pricingMethod
-						this.form.description = res.data.description;
+            this.form.push = res.data.push ? true : false
+            this.form.description = res.data.description
             switch (this.form.pricingMethod) {
               case 0:
-								this.tableData1 = res.data.segPriceList || [];
+                this.tableData1 = res.data.segPriceList || []
                 break;
               case 1:
-								this.tableData2 = res.data.usedPriceList || [];
+                this.tableData2 = res.data.usedPriceList || []
-								this.form.dim = res.data.dim;
+                this.form.dim = res.data.dim
                 break;
               default:
-								this.form.singlePrice = res.data.singlePrice || 0;
+                this.form.singlePrice = res.data.singlePrice || 0
             }
           }
-				});
+        })
-				console.log(this.form);
+        console.log(this.form)
       } else {
-				this.isEdit = false;
+        this.isEdit = false
-				this.form.id = '';
+        this.form.id = ''
         getEnergyTypeCode().then((res) => {
-					this.form.code = res.data;
+          this.form.code = res.data
-				});
+        })
       }
     },
     // 输入框失去焦点
     inputChange1(val) {
-			this.tableData1[val._pageIndex - 1][val.prop] = val[val.prop];
+      this.tableData1[val._pageIndex - 1][val.prop] = val[val.prop]
-			if (this.tableData1.length > val._pageIndex && val.prop === 'endTime') {
+      if ((this.tableData1.length > val._pageIndex) && val.prop === 'endTime') {
-				this.tableData1[val._pageIndex].startTime = val[val.prop];
+        this.tableData1[val._pageIndex].startTime = val[val.prop]
       }
-			this.timeKye++;
+      this.timeKye++
     },
     inputChange2(val) {
       // 上限值必须大于下限值
-			if (!!val.endUsed && val.endUsed <= val.startUsed) {
+      if (!!val.endUsed && (val.endUsed <= val.startUsed)) {
-				this.$modal.msgError('上限值不能等于或者小于下限值');
+        this.$modal.msgError('上限值不能等于或者小于下限值')
-				return false;
+        return false
       }
-			this.tableData2[val._pageIndex - 1][val.prop] = val[val.prop];
+      this.tableData2[val._pageIndex - 1][val.prop] = val[val.prop]
-			if (this.tableData2.length > val._pageIndex && val.prop === 'endUsed') {
+      if ((this.tableData2.length > val._pageIndex) && val.prop === 'endUsed') {
-				this.tableData2[val._pageIndex].startUsed = val[val.prop];
+        this.tableData2[val._pageIndex].startUsed = val[val.prop]
       }
-			this.usedKye++;
+      this.usedKye++
     },
     // 增加
     emitButtonClick1() {
-			let n = this.tableData1.length;
+      let n = this.tableData1.length
-			let obj = {};
+      let obj = {}
-			obj.startTime = n === 0 ? '' : this.tableData1[n - 1].endTime;
+      obj.startTime = n === 0 ? '' : this.tableData1[n - 1].endTime
-			obj.endTime = '';
+      obj.endTime = ''
-			obj.price = 0;
+      obj.price = 0
-			this.tableData1.push(obj);
+      this.tableData1.push(obj)
     },
     emitButtonClick2() {
-			let n = this.tableData2.length;
+      let n = this.tableData2.length
-			let obj = {};
+      let obj = {}
-			obj.startUsed = n === 0 ? 0 : this.tableData2[n - 1].endUsed;
+      obj.startUsed = n === 0 ? 0 : this.tableData2[n - 1].endUsed
-			obj.endUsed = 0;
+      obj.endUsed = 0
-			obj.price = 0;
+      obj.price = 0
-			this.tableData2.push(obj);
+      this.tableData2.push(obj)
     },
     // 删除
     handleClick1(val) {
-			this.tableData1.splice(val.data._pageIndex - 1, 1);
+      this.tableData1.splice(val.data._pageIndex - 1, 1)
-			this.timeKye++;
+      this.timeKye++
     },
     handleClick2(val) {
-			this.tableData2.splice(val.data._pageIndex - 1, 1);
+      this.tableData2.splice(val.data._pageIndex - 1, 1)
-			this.usedKye++;
+      this.usedKye++
     },
     submitForm() {
       this.$refs['form'].validate((valid) => {
         if (valid) {
           switch (this.form.pricingMethod) {
-						case 0: // 时间段
+            case 0:// 时间段
               if (this.tableData1.length === 0) {
-								this.$modal.msgError('时间段表格数据不能为空');
+                this.$modal.msgError('时间段表格数据不能为空')
-								return false;
+                return false
               } else {
-								this.tableData1.map((item) => {
+                this.tableData1.map(item => {
                   if (item.price <= 0) {
-										this.$modal.msgError('单价有误请检查，请检查');
+                    this.$modal.msgError('单价有误请检查，请检查')
-										return false;
+                    return false
                   }
-								});
+                })
               }
               break;
-						case 1: // 使用量
+            case 1:// 使用量
               if (this.tableData2.length === 0) {
-								this.$modal.msgError('使用量表格数据不能为空');
+                this.$modal.msgError('使用量表格数据不能为空')
-								return false;
+                return false
               } else {
-								this.tableData1.map((item) => {
+                this.tableData1.map(item => {
                   if (item.price <= 0) {
-										this.$modal.msgError('单价有误请检查，请检查');
+                    this.$modal.msgError('单价有误请检查，请检查')
-										return false;
+                    return false
                   }
-								});
+                })
               }
               break;
-						default: // 固定单价
+            default:// 固定单价
               if (!this.form.singlePrice) {
-								this.$modal.msgError('单价有误请检查，请检查');
+                this.$modal.msgError('单价有误请检查，请检查')
-								return false;
+                return false
               }
           }
-					console.log(this.form);
+          console.log(this.form)
           if (this.isEdit) {
             // 编辑
             updateEnergyType({
@@ -370,18 +281,16 @@ export default {
               pricingMethod: this.form.pricingMethod,
               description: this.form.description,
               dim: this.form.pricingMethod === 1 ? this.form.dim : '',
-							singlePrice:
+              singlePrice: this.form.pricingMethod === 2 ? this.form.singlePrice : '',
-								this.form.pricingMethod === 2 ? this.form.singlePrice : '',
+              segPriceList: this.form.pricingMethod === 0 ? this.tableData1 : [],
-							segPriceList:
+              usedPriceList: this.form.pricingMethod === 1 ? this.tableData2 : [],
-								this.form.pricingMethod === 0 ? this.tableData1 : [],
+              push: this.form.push ? 1 : 0
-							usedPriceList:
-								this.form.pricingMethod === 1 ? this.tableData2 : [],
             }).then((res) => {
               if (res.code === 0) {
-								this.$modal.msgSuccess('操作成功');
+                this.$modal.msgSuccess("操作成功");
-								this.$emit('successSubmit');
+                this.$emit('successSubmit')
               }
-						});
+            })
           } else {
             createEnergyType({
               code: this.form.code,
@@ -390,33 +299,31 @@ export default {
               pricingMethod: this.form.pricingMethod,
               description: this.form.description,
               dim: this.form.pricingMethod === 1 ? this.form.dim : '',
-							singlePrice:
+              singlePrice: this.form.pricingMethod === 2 ? this.form.singlePrice : '',
-								this.form.pricingMethod === 2 ? this.form.singlePrice : '',
+              segPriceList: this.form.pricingMethod === 0 ? this.tableData1 : [],
-							segPriceList:
+              usedPriceList: this.form.pricingMethod === 1 ? this.tableData2 : [],
-								this.form.pricingMethod === 0 ? this.tableData1 : [],
+              push: this.form.push ? 1 : 0
-							usedPriceList:
-								this.form.pricingMethod === 1 ? this.tableData2 : [],
             }).then((res) => {
               if (res.code === 0) {
-								this.$modal.msgSuccess('操作成功');
+                this.$modal.msgSuccess("操作成功");
-								this.$emit('successSubmit');
+                this.$emit('successSubmit')
               }
-						});
+            })
           }
         } else {
-					return false;
+          return false
         }
-			});
+      })
     },
     formClear() {
-			this.$refs.form.resetFields();
+      this.$refs.form.resetFields()
-			this.form.singlePrice = 0;
+      this.form.singlePrice = 0
-			this.isEdit = false;
+      this.isEdit = false
-			this.timeKye = 0;
+      this.timeKye = 0
-			this.usedKye = 0;
+      this.usedKye = 0
-			this.tableData1 = [];
+      this.tableData1 = []
-			this.tableData2 = [];
+      this.tableData2 = []
-		},
+    }
-	},
+  }
-};
+}
 </script>

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

@@ -1,191 +1,224 @@
 <template>
   <div class="app-container">
+
     <!-- 搜索工作栏 -->
     <search-bar
       :formConfigs="formConfig"
       ref="searchBarForm"
-			:removeBlue="true"
+      @headBtnClick="buttonClick"
-			@headBtnClick="buttonClick" />
+    />
     <!-- 列表 -->
     <base-table
       :page="queryParams.pageNo"
       :limit="queryParams.pageSize"
       :table-props="tableProps"
       :table-data="list"
-			:max-height="tableH">
+      :max-height="tableH"
+    >
       <method-btn
         v-if="tableBtn.length"
         slot="handleBtn"
         :width="80"
         label="操作"
         :method-list="tableBtn"
-				@clickBtn="handleClick" />
+        @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">
+      :before-close="handleCancel"
-			<energy-type-add
+    >
-				ref="energyType"
+      <energy-type-add ref="energyType" @successSubmit="successSubmit" />
-				@successSubmit="successSubmit" />
     </base-dialog>
   </div>
 </template>
 
 <script>
-import { getEnergyTypePage, deleteEnergyType } from '@/api/base/energyType';
+import { getEnergyTypePage, deleteEnergyType } from "@/api/base/energyType";
-import { publicFormatter } from '@/utils/dict';
+import { publicFormatter } from '@/utils/dict'
-import InnerTable from './components/InnerTable';
+import InnerTable from './components/InnerTable'
-import EnergyTypeAdd from './components/energyTypeAdd';
+import EnergyTypeAdd from './components/energyTypeAdd'
 const tableProps = [
   {
     prop: 'code',
     label: '类型编码',
     showOverflowtooltip: true,
-		minWidth: 150,
+    minWidth: 150
   },
   {
     prop: 'name',
-		label: '能源类型',
+    label: '能源类型'
-		filter: publicFormatter('energy_type'),
   },
   {
     prop: 'unit',
     label: '单位',
-		filter: publicFormatter('unit_dict'),
+    filter: publicFormatter('energy_unit')
   },
   {
     prop: 'pricingMethod',
-		label: '计价方式',
+    label: '计价方式'
+  },
+  {
+    prop: 'push',
+    label: '是否推送',
+    filter: publicFormatter('push')
   },
   {
     prop: 'price',
     label: '价格(元)',
-		subcomponent: InnerTable,
+    subcomponent: InnerTable
-	},
+  }
-];
+]
 export default {
-	name: 'EnergyType',
+  name: "EnergyType",
   components: { EnergyTypeAdd },
   data() {
     return {
       formConfig: [
+        {
+          type: 'input',
+          label: '能源类型',
+          placeholder: '能源类型',
+          param: 'name'
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: this.$auth.hasPermi('base:energy-type:create') ? 'separate' : '',
+        },
         {
           type: this.$auth.hasPermi('base:energy-type:create') ? 'button' : '',
           btnName: '新增',
           name: 'add',
           color: 'success',
-					plain: true,
+          plain: true
-				},
+        }
       ],
       tableProps,
       tableBtn: [
         this.$auth.hasPermi('base:energy-type:update')
           ? {
               type: 'edit',
-							btnName: '编辑',
+              btnName: '编辑'
             }
           : undefined,
         this.$auth.hasPermi('base:energy-type:delete')
           ? {
               type: 'delete',
-							btnName: '删除',
+              btnName: '删除'
             }
-					: undefined,
+          : undefined
       ].filter((v) => v),
-			tableH: this.tableHeight(220),
+      tableH: this.tableHeight(260),
       pricingMethodList: [
-				{ value: 0, label: '分时间段计价' },
+        {value: 0,label: '分时间段计价'},
-				{ value: 1, label: '分使用量计价' },
+        {value: 1,label: '分使用量计价'},
-				{ value: 2, label: '单一计价' },
+        {value: 2,label: '单一计价'}
       ],
       // 总条数
       total: 0,
       // 班次基础信息列表
       list: [],
       // 弹出层标题
-			addOrEditTitle: '',
+      addOrEditTitle: "",
       // 是否显示弹出层
       centervisible: false,
       // 查询参数
       queryParams: {
         pageNo: 1,
-				pageSize: 100,
+        pageSize: 20,
-			},
+        name: null,
+        code: null
+      }
     };
   },
   created() {
     window.addEventListener('resize', () => {
-			this.tableH = this.tableHeight(220);
+      this.tableH = this.tableHeight(260)
-		});
+    })
     this.getList();
   },
   methods: {
-		buttonClick() {
+    buttonClick(val) {
-			this.addOrEditTitle = '新增';
+      switch (val.btnName) {
-			this.centervisible = true;
+        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.energyType.init();
+            this.$refs.energyType.init()
-			});
+          })
+      }
     },
     /** 查询列表 */
     getList() {
-			getEnergyTypePage(this.queryParams).then((response) => {
+      getEnergyTypePage(this.queryParams).then(response => {
         let arr = response.data.list || [];
-				arr &&
+        arr&&arr.map(item => {
-					arr.map((item) => {
+          this.pricingMethodList.map(i => {
-						this.pricingMethodList.map((i) => {
             if (item.pricingMethod === i.value) {
-								item.pricingMethod = i.label;
+              item.pricingMethod = i.label
             }
-						});
+          })
-					});
+        })
-				this.list = arr;
+        this.list = arr
         this.total = response.data.total;
       });
     },
     handleClick(val) {
       switch (val.type) {
         case 'edit':
-					this.addOrEditTitle = '编辑';
+          this.addOrEditTitle = '编辑'
           this.$nextTick(() => {
-						this.$refs.energyType.init(val.data.id);
+            this.$refs.energyType.init(val.data.id)
-					});
+          })
-					this.centervisible = true;
+          this.centervisible = true
-					break;
+          break
         default:
-					this.handleDelete(val.data);
+        this.handleDelete(val.data)
       }
     },
     handleCancel() {
-			this.$refs.energyType.formClear();
+      this.$refs.energyType.formClear()
-			this.centervisible = false;
+      this.centervisible = false
-			this.addOrEditTitle = '';
+      this.addOrEditTitle = ''
     },
     handleConfirm() {
-			this.$refs.energyType.submitForm();
+      this.$refs.energyType.submitForm()
     },
     successSubmit() {
-			this.handleCancel();
+      this.handleCancel()
-			this.getList();
+      this.getList()
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-			this.$modal
+      this.$modal.confirm('是否确认删除能源类型为"' + row.name + '"的数据项?').then(function() {
-				.confirm('是否确认删除能源类型为"' + row.name + '"的数据项?')
-				.then(function () {
           return deleteEnergyType(row.id);
-				})
+        }).then(() => {
-				.then(() => {
           this.queryParams.pageNo = 1;
           this.getList();
-					this.$modal.msgSuccess('删除成功');
+          this.$modal.msgSuccess("删除成功");
-				})
+        }).catch(() => {});
-				.catch(() => {});
+    }
-		},
+  }
-	},
 };
 </script>

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

@@ -1,35 +1,22 @@
 <template>
-	<el-form
+  <el-form ref="form" :rules="rules" label-width="110px" :model="form">
-		ref="form"
-		:rules="rules"
-		label-width="110px"
-		:model="form">
     <el-row>
       <el-col :span="12">
-				<el-form-item
+        <el-form-item label="抄表方式" prop="method">
-					label="抄表方式"
+          <el-select v-model="form.method" placeholder="请选择" style="width: 100%;" @change="changeMethod">
-					prop="method">
-					<el-select
-						v-model="form.method"
-						placeholder="请选择"
-						style="width: 100%"
-						@change="changeMethod">
             <el-option
               v-for="item in getDictDatas(DICT_TYPE.METHOD)"
               :key="item.value"
               :label="item.label"
-							:value="item.value"></el-option>
+              :value="item.value">
+            </el-option>
           </el-select>
         </el-form-item>
       </el-col>
-			<el-col
+      <el-col :span="12" v-if='form.method == 1'>
-				:span="12"
+        <el-form-item label="监控对象" prop="objectId">
-				v-if="form.method == 1">
-				<el-form-item
-					label="监控对象"
-					prop="objectId">
           <el-cascader
-						style="width: 100%"
+            style='width: 100%;'
             v-model="objIds"
             :options="objList"
             :props="{ checkStrictly: true, value: 'id', label: 'name' }"
@@ -38,123 +25,73 @@
             clearable></el-cascader>
         </el-form-item>
       </el-col>
-			<el-col
+      <el-col :span="12" v-if='form.method == 2'>
-				:span="12"
+        <el-form-item label="水/气表名" prop="tableName">
-				v-if="form.method == 2">
+          <el-select v-model="form.tableName" placeholder="请选择" style="width: 100%;">
-				<el-form-item
-					label="能源表名"
-					prop="tableName">
-					<el-select
-						v-model="form.tableName"
-						placeholder="请选择"
-						style="width: 100%">
             <el-option
               v-for="item in getDictDatas(DICT_TYPE.TABLE_NAME)"
               :key="item.value"
               :label="item.label"
-							:value="item.value"></el-option>
+              :value="item.value">
+            </el-option>
           </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-				<el-form-item
+        <el-form-item label="监控能源类型" prop="energyTypeId">
-					label="监控能源类型"
+          <el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;" filterable @change="toggleType">
-					prop="energyTypeId">
-					<el-select
-						v-model="form.energyTypeId"
-						placeholder="请选择"
-						style="width: 100%"
-						filterable
-						@change="toggleType">
             <el-option
               v-for="item in this.energyTypeList"
               :key="item.id"
               :label="item.name"
-							:value="item.id"></el-option>
+              :value="item.id">
+            </el-option>
           </el-select>
         </el-form-item>
       </el-col>
-			<el-col
+      <el-col :span="12" v-if='form.method == 1'>
-				:span="12"
+        <el-form-item label="监控模式" prop="type">
-				v-if="form.method == 1">
+          <el-select v-model="form.type" placeholder="请选择" style="width: 100%;" @change="typeChange">
-				<el-form-item
+            <el-option label="合并" :value= "1" ></el-option>
-					label="监控模式"
+            <el-option label="详细" :value= "2" ></el-option>
-					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-col>
-			<el-col
+      <el-col :span="12" v-if='form.method == 1'>
-				:span="12"
+        <el-form-item label="监控详细参数" prop="type" v-if="form.type === 2">
-				v-if="form.method == 1">
+          <el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail">
-				<el-form-item
-					label="监控详细参数"
-					prop="type"
-					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>
+              :value="item.id">
+            </el-option>
           </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-				<el-form-item
+        <el-form-item label="指标类型" prop="limitType">
-					label="指标类型"
+          <el-select v-model="form.limitType" placeholder="请选择" style="width: 100%;" :disabled='form.method == 2'>
-					prop="limitType">
-					<el-select
-						v-model="form.limitType"
-						placeholder="请选择"
-						style="width: 100%"
-						:disabled="form.method == 2">
             <el-option
               v-for="item in getDictDatas(DICT_TYPE.MONITOR_INDEX_TYPE)"
               :key="item.value"
               :label="item.label"
-							:value="item.value"></el-option>
+              :value="item.value">
+            </el-option>
           </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="消耗量阈值">
-					<el-input-number
+          <el-input-number v-model="form.minValue" placeholder="最小值" :max="9999999" style="width: 50%;"></el-input-number>
-						v-model="form.minValue"
+          <el-input-number v-model="form.maxValue" placeholder="最大值" :max="9999999" style="width: 50%;"></el-input-number>
-						placeholder="最小值"
-						:max="9999999"
-						style="width: 50%"></el-input-number>
-					<el-input-number
-						v-model="form.maxValue"
-						placeholder="最大值"
-						:max="9999999"
-						style="width: 50%"></el-input-number>
         </el-form-item>
       </el-col>
     </el-row>
   </el-form>
 </template>
 <script>
-import {
+import { getEnergyLimit, updateEnergyLimit, createEnergyLimit, getEnergyParamList } from '@/api/monitoring/energyLimit'
-	getEnergyLimit,
-	updateEnergyLimit,
-	createEnergyLimit,
-	getEnergyParamList,
-} from '@/api/monitoring/energyLimit';
 export default {
   name: 'energyLimitAdd',
   props: {
@@ -162,13 +99,13 @@ export default {
       type: Array,
       required: true,
       default: () => {
-				return [];
+        return []
-			},
+      }
     },
     objList: {
       type: Array,
-			default: () => [],
+      default: () => []
-		},
+    }
   },
   data() {
     return {
@@ -182,176 +119,161 @@ export default {
         plcParamId: '',
         limitType: '',
         minValue: 0,
-				maxValue: 0,
+        maxValue: 0
       },
-			objIds: [], // 回显数组
+      objIds: [],// 回显数组
       isEdit: false, //是否是编辑
       rules: {
-				method: [
+        method: [{ required: true, message: '抄表方式不能为空', trigger: 'change' }],
-					{ required: true, message: '抄表方式不能为空', trigger: 'change' },
+        objectId: [{ required: true, message: '监控对象不能为空', trigger: 'change' }],
-				],
+        energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }],
-				objectId: [
+        type: [{ required: true, message: '监控模式不能为空', trigger: 'change' }],
-					{ required: true, message: '监控对象不能为空', trigger: 'change' },
+        limitType: [{ required: true, message: '指标类型不能为空', trigger: 'change' }]
-				],
-				energyTypeId: [
-					{ required: true, message: '能源类型不能为空', trigger: 'change' },
-				],
-				type: [
-					{ required: true, message: '监控模式不能为空', trigger: 'change' },
-				],
-				limitType: [
-					{ required: true, message: '指标类型不能为空', trigger: 'change' },
-				],
       },
-			detailList: [],
+      detailList: []
-		};
+    }
   },
   methods: {
     init(id) {
       if (id) {
-				this.isEdit = true;
+        this.isEdit = true
-				this.form.id = id;
+        this.form.id = id
-				getEnergyLimit(id).then((res) => {
+        getEnergyLimit( id ).then((res) => {
           if (res.code === 0) {
-						this.form = res.data;
+            this.form = res.data
-						this.form.plcParamId = res.data.plcParamId || '';
+            this.form.plcParamId = res.data.plcParamId || ''
-						this.form.method = this.form.method ? this.form.method + '' : '';
+            this.form.method = this.form.method ? this.form.method + '' : ''
-						this.form.limitType = this.form.limitType
+            this.form.limitType = this.form.limitType ? this.form.limitType + '' : ''
-							? this.form.limitType + ''
+            this.objIds = this.changeDetSelect(this.form.objectId, this.objList)
-							: '';
-						this.objIds = this.changeDetSelect(
-							this.form.objectId,
-							this.objList
-						);
             if (this.form.type === 2) {
-							this.getDetailList();
+              this.getDetailList()
             }
           }
-				});
+        })
       } else {
-				this.isEdit = false;
+        this.isEdit = false
-				this.form.id = '';
+        this.form.id = ''
       }
     },
     // 切换方式
     changeMethod() {
-			if (this.form.method === '2') {
+      if(this.form.method === '2'){
-				this.form.limitType = '2';
+        this.form.limitType = "2"
-			} else {
+      }else{
-				this.form.limitType = '';
+        this.form.limitType = ''
       }
     },
     // 监控详细参数
     getDetailList() {
       getEnergyParamList({
         objId: this.form.objectId,
-				energyTypeId: this.form.energyTypeId,
+        energyTypeId: this.form.energyTypeId
       }).then((res) => {
         if (res.code === 0) {
-					this.detailList = res.data;
+          this.detailList = res.data
         } else {
-					this.detailList = [];
+          this.detailList = []
         }
-			});
+      })
     },
     typeChange(val) {
-			console.log(this.form);
+      console.log(this.form)
-			this.form.plcParamId = '';
+      this.form.plcParamId = ''
       if (val === 2) {
         if (this.form.objectId && this.form.energyTypeId) {
-					this.getDetailList();
+          this.getDetailList()
         }
       }
     },
     toggleType() {
       if (this.form.energyTypeId && this.form.type) {
-				this.getDetailList();
+        this.getDetailList()
-				this.form.plcParamId = '';
+        this.form.plcParamId = ''
       }
     },
     // 递归处理分类回显问题
     changeDetSelect(key, treeData) {
-			let arr = []; // 递归时操作的数组
+      let arr = [] // 递归时操作的数组
-			let returnArr = []; // 存放结果的数组
+      let returnArr = [] // 存放结果的数组
-			let depth = 0; // 定义全局层级
+      let depth = 0 // 定义全局层级
       // 定义递归函数
       function childrenEach(childrendData, depthN) {
         for (var j = 0; j < childrendData.length; j++) {
-					depth = depthN;
+          depth = depthN
-					arr[depthN] = childrendData[j].id;
+          arr[depthN] = childrendData[j].id
           if (childrendData[j].id == key) {
-						returnArr = arr.slice(0, depthN + 1);
+            returnArr = arr.slice(0, depthN + 1)
-						break;
+            break
           } else {
             if (childrendData[j].children) {
-							depth++;
+              depth++
-							childrenEach(childrendData[j].children, depth);
+              childrenEach(childrendData[j].children, depth)
             }
           }
         }
-				return returnArr;
+        return returnArr
       }
-			return childrenEach(treeData, depth);
+      return childrenEach(treeData, depth)
     },
     selectObj(val) {
-			this.form.objectId = val[val.length - 1];
+      this.form.objectId = val[val.length-1]
-			this.form.objectType = val.length - 1;
+      this.form.objectType = val.length-1
       if (this.form.energyTypeId && this.form.type) {
-				this.getDetailList();
+        this.getDetailList()
-				this.form.plcParamId = '';
+        this.form.plcParamId = ''
       }
     },
     selectDetail() {
-			this.$forceUpdate();
+      this.$forceUpdate()
     },
     submitForm() {
       this.$refs['form'].validate((valid) => {
         if (valid) {
           if (this.form.type === 2 && !this.form.plcParamId) {
-						this.$modal.msgError('监控模式为详细时，详细参数为必填');
+            this.$modal.msgError("监控模式为详细时，详细参数为必填");
-						return false;
+            return false
           }
           if (this.form.minValue && this.form.maxValue) {
             if (this.form.minValue > this.form.maxValue) {
-							this.$modal.msgError('消耗量阈值，最小值不能大于最大值');
+              this.$modal.msgError("消耗量阈值，最小值不能大于最大值");
-							return false;
+              return false
             }
           }
-					this.form.minValue = this.form.minValue || 0;
+          this.form.minValue = this.form.minValue || 0
-					this.form.maxValue = this.form.maxValue || 0;
+          this.form.maxValue = this.form.maxValue || 0
           if (this.isEdit) {
             // 编辑
-						updateEnergyLimit({ ...this.form }).then((res) => {
+            updateEnergyLimit({...this.form}).then((res) => {
               if (res.code === 0) {
-								this.$modal.msgSuccess('操作成功');
+                this.$modal.msgSuccess("操作成功");
-								this.$emit('successSubmit');
+                this.$emit('successSubmit')
               }
-						});
+            })
           } else {
-						createEnergyLimit({ ...this.form }).then((res) => {
+            createEnergyLimit({...this.form}).then((res) => {
               if (res.code === 0) {
-								this.$modal.msgSuccess('操作成功');
+                this.$modal.msgSuccess("操作成功");
-								this.$emit('successSubmit');
+                this.$emit('successSubmit')
               }
-						});
+            })
           }
         } else {
-					return false;
+          return false
         }
-			});
+      })
     },
     formClear() {
-			this.$refs.form.resetFields();
+      this.$refs.form.resetFields()
-			this.form.type = '';
+      this.form.type = ''
-			this.form.plcParamId = '';
+      this.form.plcParamId = ''
-			this.form.minValue = null;
+      this.form.minValue = null
-			this.form.maxValue = null;
+      this.form.maxValue = null
-			this.objIds = '';
+      this.objIds = ''
-			this.detailList = [];
+      this.detailList = []
-			this.isEdit = false;
+      this.isEdit = false
-		},
+    }
-	},
+  }
-};
+}
 </script>
 <style>
 .cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {

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

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