test #47
@@ -74,6 +74,7 @@
 | 
			
		||||
    "vue-video-player": "^5.0.2",
 | 
			
		||||
    "vuedraggable": "2.24.3",
 | 
			
		||||
    "vuex": "3.6.2",
 | 
			
		||||
    "xlsx": "^0.18.5",
 | 
			
		||||
    "xml-js": "1.6.11"
 | 
			
		||||
  },
 | 
			
		||||
  "devDependencies": {
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										37
									
								
								src/api/analysis/energyAnalysis.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										37
									
								
								src/api/analysis/energyAnalysis.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,37 @@
 | 
			
		||||
import request from '@/utils/request'
 | 
			
		||||
 | 
			
		||||
// 获取走势分析数据
 | 
			
		||||
export function getEnergyTrend(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/analysis/energy-analysis/getTrend',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 获取对比分析数据
 | 
			
		||||
export function getCompare(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/analysis/energy-analysis/getCompare',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 获取同比分析数据(1:季度,2:月;3:日)
 | 
			
		||||
export function getYoy(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/analysis/energy-analysis/getYoy',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 获取环比分析数据(1:月,2:周,3:日)
 | 
			
		||||
export function getQoq(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/analysis/energy-analysis/getChain',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										8
									
								
								src/api/base/equipment.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										8
									
								
								src/api/base/equipment.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,8 @@
 | 
			
		||||
import request from '@/utils/request'
 | 
			
		||||
// 获得所有设备列表
 | 
			
		||||
export function getEquipmentAll() {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/base/equipment/listAll',
 | 
			
		||||
    method: 'get'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										8
									
								
								src/api/base/productionLine.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										8
									
								
								src/api/base/productionLine.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,8 @@
 | 
			
		||||
import request from '@/utils/request'
 | 
			
		||||
// 获得所有工厂产线列表
 | 
			
		||||
export function getLineAll() {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/base/production-line/listAll',
 | 
			
		||||
    method: 'get'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										8
									
								
								src/api/base/workshopSection.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										8
									
								
								src/api/base/workshopSection.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,8 @@
 | 
			
		||||
import request from '@/utils/request'
 | 
			
		||||
// 获得所有产线工段列表
 | 
			
		||||
export function getWorkShopAll() {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/base/workshop-section/listAll',
 | 
			
		||||
    method: 'get'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
@@ -23,7 +23,8 @@ export function energyReportPageExport(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/monitoring/energy-report/export',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: data
 | 
			
		||||
    data: data,
 | 
			
		||||
    responseType: 'blob'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@@ -32,6 +33,7 @@ export function energyReportPageExportAuto(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/monitoring/energy-report/exportAuto',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: data
 | 
			
		||||
    data: data,
 | 
			
		||||
    responseType: 'blob'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										64
									
								
								src/utils/chartMixins/resize.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										64
									
								
								src/utils/chartMixins/resize.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,64 @@
 | 
			
		||||
import { debounce } from '@/utils/debounce'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      $_sidebarElm: null,
 | 
			
		||||
      $_resizeHandler: null
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.$_resizeHandler = debounce(() => {
 | 
			
		||||
      if (this.chart) {
 | 
			
		||||
        this.chart.resize()
 | 
			
		||||
      }
 | 
			
		||||
    }, 100)
 | 
			
		||||
    this.$_initResizeEvent()
 | 
			
		||||
    this.$_initSidebarResizeEvent()
 | 
			
		||||
  },
 | 
			
		||||
  beforeDestroy() {
 | 
			
		||||
    this.$_destroyResizeEvent()
 | 
			
		||||
    this.$_destroySidebarResizeEvent()
 | 
			
		||||
  },
 | 
			
		||||
  // to fixed bug when cached by keep-alive
 | 
			
		||||
  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
 | 
			
		||||
  activated() {
 | 
			
		||||
    this.$_initResizeEvent()
 | 
			
		||||
    this.$_initSidebarResizeEvent()
 | 
			
		||||
  },
 | 
			
		||||
  deactivated() {
 | 
			
		||||
    this.$_destroyResizeEvent()
 | 
			
		||||
    this.$_destroySidebarResizeEvent()
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    // use $_ for mixins properties
 | 
			
		||||
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
 | 
			
		||||
    $_initResizeEvent() {
 | 
			
		||||
      window.addEventListener('resize', this.$_resizeHandler)
 | 
			
		||||
    },
 | 
			
		||||
    $_destroyResizeEvent() {
 | 
			
		||||
      window.removeEventListener('resize', this.$_resizeHandler)
 | 
			
		||||
    },
 | 
			
		||||
    $_sidebarResizeHandler(e) {
 | 
			
		||||
      if (e.propertyName === 'width') {
 | 
			
		||||
        this.$_resizeHandler()
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    $_initSidebarResizeEvent() {
 | 
			
		||||
      this.$_sidebarElm =
 | 
			
		||||
        document.getElementsByClassName('sidebar-container')[0]
 | 
			
		||||
      this.$_sidebarElm &&
 | 
			
		||||
        this.$_sidebarElm.addEventListener(
 | 
			
		||||
          'transitionend',
 | 
			
		||||
          this.$_sidebarResizeHandler
 | 
			
		||||
        )
 | 
			
		||||
    },
 | 
			
		||||
    $_destroySidebarResizeEvent() {
 | 
			
		||||
      this.$_sidebarElm &&
 | 
			
		||||
        this.$_sidebarElm.removeEventListener(
 | 
			
		||||
          'transitionend',
 | 
			
		||||
          this.$_sidebarResizeHandler
 | 
			
		||||
        )
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										40
									
								
								src/utils/debounce.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										40
									
								
								src/utils/debounce.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,40 @@
 | 
			
		||||
/**
 | 
			
		||||
 * @param {Function} func
 | 
			
		||||
 * @param {number} wait
 | 
			
		||||
 * @param {boolean} immediate
 | 
			
		||||
 * @return {*}
 | 
			
		||||
 */
 | 
			
		||||
export function debounce(func, wait, immediate) {
 | 
			
		||||
  let timeout, args, context, timestamp, result
 | 
			
		||||
 | 
			
		||||
  const later = function () {
 | 
			
		||||
    // 据上一次触发时间间隔
 | 
			
		||||
    const last = +new Date() - timestamp
 | 
			
		||||
 | 
			
		||||
    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
 | 
			
		||||
    if (last < wait && last > 0) {
 | 
			
		||||
      timeout = setTimeout(later, wait - last)
 | 
			
		||||
    } else {
 | 
			
		||||
      timeout = null
 | 
			
		||||
      // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
 | 
			
		||||
      if (!immediate) {
 | 
			
		||||
        result = func.apply(context, args)
 | 
			
		||||
        if (!timeout) context = args = null
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  return function (...args) {
 | 
			
		||||
    context = this
 | 
			
		||||
    timestamp = +new Date()
 | 
			
		||||
    const callNow = immediate && !timeout
 | 
			
		||||
    // 如果延时不存在,重新设定延时
 | 
			
		||||
    if (!timeout) timeout = setTimeout(later, wait)
 | 
			
		||||
    if (callNow) {
 | 
			
		||||
      result = func.apply(context, args)
 | 
			
		||||
      context = args = null
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    return result
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@@ -91,7 +91,8 @@ export const DICT_TYPE = {
 | 
			
		||||
  ENERGY_UNIT: 'energy_unit',
 | 
			
		||||
  MONITOR_INDEX_TYPE: 'monitor_index_type',
 | 
			
		||||
  OBJECT_TYPE: 'object_type',
 | 
			
		||||
  STATISTIC_TYPE: 'statistic_type'
 | 
			
		||||
  STATISTIC_TYPE: 'statistic_type',
 | 
			
		||||
  TIME_DIM: 'time_dim'
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 
 | 
			
		||||
@@ -0,0 +1,98 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div 
 | 
			
		||||
    id="analysischartBar"
 | 
			
		||||
    style="width: 100%"
 | 
			
		||||
    :style="{ height: chartHeight + 'px' }"
 | 
			
		||||
  ></div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import * as echarts from 'echarts'
 | 
			
		||||
import resize from '@/utils/chartMixins/resize'
 | 
			
		||||
export default {
 | 
			
		||||
  name: "BarChart",
 | 
			
		||||
  mixins: [resize],
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      chartDom: '',
 | 
			
		||||
      chart: '',
 | 
			
		||||
      chartHeight: this.tableHeight(214) - 70
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  props: {
 | 
			
		||||
    chartData: {
 | 
			
		||||
      type: Array,
 | 
			
		||||
      required: true,
 | 
			
		||||
      default: () => {
 | 
			
		||||
        return []
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    chartData: function () {
 | 
			
		||||
      this.getChart()
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.chartHeight = this.tableHeight(214) - 70
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getChart() {
 | 
			
		||||
      if (
 | 
			
		||||
        this.chart !== null &&
 | 
			
		||||
        this.chart !== '' &&
 | 
			
		||||
        this.chart !== undefined
 | 
			
		||||
      ) {
 | 
			
		||||
        this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
 | 
			
		||||
      }
 | 
			
		||||
      this.chartDom = document.getElementById('analysischartBar')
 | 
			
		||||
      this.chart = echarts.init(this.chartDom)
 | 
			
		||||
      let tempArr = []
 | 
			
		||||
      let xData = []
 | 
			
		||||
      let yData = []
 | 
			
		||||
      let legendData = []
 | 
			
		||||
      if (this.chartData.length === 0) {
 | 
			
		||||
        return false
 | 
			
		||||
      } else {
 | 
			
		||||
        tempArr = this.chartData[0].trendRespVOList
 | 
			
		||||
      }
 | 
			
		||||
      for (let k = 0; k < tempArr.length; k++) {
 | 
			
		||||
        xData.push(tempArr[k].time)
 | 
			
		||||
      }
 | 
			
		||||
      for (let i = 0; i < this.chartData.length; i++) {
 | 
			
		||||
        let obj = {
 | 
			
		||||
          name: this.chartData[i].objName + this.chartData[i].objCode,
 | 
			
		||||
          type: 'bar',
 | 
			
		||||
          data: []
 | 
			
		||||
        }
 | 
			
		||||
        legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
 | 
			
		||||
        let temp = this.chartData[i].trendRespVOList
 | 
			
		||||
        for (let j = 0; j < temp.length; j++) {
 | 
			
		||||
          let num = temp[j].useNum ? temp[j].useNum : 0
 | 
			
		||||
          obj.data.push(num)
 | 
			
		||||
        }
 | 
			
		||||
        yData.push(obj)
 | 
			
		||||
      }
 | 
			
		||||
      var option = {
 | 
			
		||||
        tooltip: {
 | 
			
		||||
          trigger: 'axis'
 | 
			
		||||
        },
 | 
			
		||||
        legend: {
 | 
			
		||||
          data: legendData
 | 
			
		||||
        },
 | 
			
		||||
        xAxis: {
 | 
			
		||||
          type: 'category',
 | 
			
		||||
          data: xData
 | 
			
		||||
        },
 | 
			
		||||
        yAxis: {
 | 
			
		||||
          type: 'value'
 | 
			
		||||
        },
 | 
			
		||||
        series: yData
 | 
			
		||||
      };
 | 
			
		||||
 | 
			
		||||
      option && this.chart.setOption(option);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
@@ -0,0 +1,100 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div 
 | 
			
		||||
    id="analysischartLine"
 | 
			
		||||
    style="width: 100%"
 | 
			
		||||
    :style="{ height: chartHeight + 'px' }"
 | 
			
		||||
  ></div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import * as echarts from 'echarts'
 | 
			
		||||
import resize from '@/utils/chartMixins/resize'
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LineChart",
 | 
			
		||||
  mixins: [resize],
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      chartDom: '',
 | 
			
		||||
      chart: '',
 | 
			
		||||
      chartHeight: this.tableHeight(214) - 70
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  props: {
 | 
			
		||||
    chartData: {
 | 
			
		||||
      type: Array,
 | 
			
		||||
      required: true,
 | 
			
		||||
      default: () => {
 | 
			
		||||
        return []
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    chartData: function () {
 | 
			
		||||
      this.getChart()
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.chartHeight = this.tableHeight(214) - 70
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getChart() {
 | 
			
		||||
      if (
 | 
			
		||||
        this.chart !== null &&
 | 
			
		||||
        this.chart !== '' &&
 | 
			
		||||
        this.chart !== undefined
 | 
			
		||||
      ) {
 | 
			
		||||
        this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
 | 
			
		||||
      }
 | 
			
		||||
      this.chartDom = document.getElementById('analysischartLine')
 | 
			
		||||
      this.chart = echarts.init(this.chartDom)
 | 
			
		||||
      let tempArr = []
 | 
			
		||||
      let xData = []
 | 
			
		||||
      let yData = []
 | 
			
		||||
      let legendData = []
 | 
			
		||||
      if (this.chartData.length === 0) {
 | 
			
		||||
        return false
 | 
			
		||||
      } else {
 | 
			
		||||
        tempArr = this.chartData[0].trendRespVOList
 | 
			
		||||
      }
 | 
			
		||||
      for (let k = 0; k < tempArr.length; k++) {
 | 
			
		||||
        xData.push(tempArr[k].time)
 | 
			
		||||
      }
 | 
			
		||||
      for (let i = 0; i < this.chartData.length; i++) {
 | 
			
		||||
        let obj = {
 | 
			
		||||
          name: this.chartData[i].objName + this.chartData[i].objCode,
 | 
			
		||||
          type: 'line',
 | 
			
		||||
          stack: 'Total',
 | 
			
		||||
          data: []
 | 
			
		||||
        }
 | 
			
		||||
        legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
 | 
			
		||||
        let temp = this.chartData[i].trendRespVOList
 | 
			
		||||
        for (let j = 0; j < temp.length; j++) {
 | 
			
		||||
          let num = temp[j].useNum ? temp[j].useNum : 0
 | 
			
		||||
          obj.data.push(num)
 | 
			
		||||
        }
 | 
			
		||||
        yData.push(obj)
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      var option = {
 | 
			
		||||
        tooltip: {
 | 
			
		||||
          trigger: 'axis'
 | 
			
		||||
        },
 | 
			
		||||
        legend: {
 | 
			
		||||
          data: legendData
 | 
			
		||||
        },
 | 
			
		||||
        xAxis: {
 | 
			
		||||
          type: 'category',
 | 
			
		||||
          data: xData
 | 
			
		||||
        },
 | 
			
		||||
        yAxis: {
 | 
			
		||||
          type: 'value'
 | 
			
		||||
        },
 | 
			
		||||
        series: yData
 | 
			
		||||
      };
 | 
			
		||||
 | 
			
		||||
      option && this.chart.setOption(option);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
@@ -0,0 +1,403 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <el-form :inline="true" class="demo-form-inline">
 | 
			
		||||
    <el-form-item label="能源类型">
 | 
			
		||||
      <el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;">
 | 
			
		||||
        <el-option
 | 
			
		||||
          v-for="item in energyTypeList"
 | 
			
		||||
          :key="item.id"
 | 
			
		||||
          :label="item.name"
 | 
			
		||||
          :value="item.id">
 | 
			
		||||
        </el-option>
 | 
			
		||||
      </el-select>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item label="时间维度">
 | 
			
		||||
      <el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;">
 | 
			
		||||
        <el-option
 | 
			
		||||
          v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
 | 
			
		||||
          :key="item.value"
 | 
			
		||||
          :label="item.label"
 | 
			
		||||
          :value="item.value">
 | 
			
		||||
        </el-option>
 | 
			
		||||
      </el-select>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item label="时间范围">
 | 
			
		||||
      <div v-show="queryParams.timeDim === '1'">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="timeValue"
 | 
			
		||||
          type="datetimerange"
 | 
			
		||||
          range-separator="至"
 | 
			
		||||
          start-placeholder="开始日期"
 | 
			
		||||
          end-placeholder="结束日期"
 | 
			
		||||
          format="yyyy-MM-dd HH:mm"
 | 
			
		||||
          value-format="timestamp"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          popper-class="noneMinute"
 | 
			
		||||
          @change="timeSelect"
 | 
			
		||||
          :clearable="false"
 | 
			
		||||
          >
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div v-show="queryParams.timeDim === '2'">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="dateValue"
 | 
			
		||||
          type="daterange"
 | 
			
		||||
          range-separator="至"
 | 
			
		||||
          start-placeholder="开始日期"
 | 
			
		||||
          end-placeholder="结束日期"
 | 
			
		||||
          value-format="timestamp"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          :clearable="false"
 | 
			
		||||
          @change="timeSelect"
 | 
			
		||||
          >
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div v-show="queryParams.timeDim === '3'">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="weekValue1"
 | 
			
		||||
          type="week"
 | 
			
		||||
          format="yyyy 第 WW 周"
 | 
			
		||||
          style='width:150px;'
 | 
			
		||||
          :picker-options="pickerOptionsWeek"
 | 
			
		||||
          @change="startWeek"
 | 
			
		||||
          :clearable="false"
 | 
			
		||||
          placeholder="选择周">
 | 
			
		||||
        </el-date-picker>-
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="weekValue2"
 | 
			
		||||
          type="week"
 | 
			
		||||
          format="yyyy 第 WW 周"
 | 
			
		||||
          :picker-options="pickerOptionsWeek"
 | 
			
		||||
          style='width:150px;'
 | 
			
		||||
          @change="endWeek"
 | 
			
		||||
          :clearable="false"
 | 
			
		||||
          placeholder="选择周">
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div v-show="queryParams.timeDim === '4'">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="monthValue"
 | 
			
		||||
          type="monthrange"
 | 
			
		||||
          range-separator="至"
 | 
			
		||||
          start-placeholder="开始日期"
 | 
			
		||||
          end-placeholder="结束日期"
 | 
			
		||||
          value-format="timestamp"
 | 
			
		||||
          :clearable="false"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          @change="timeSelect"
 | 
			
		||||
          >
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div v-show="queryParams.timeDim === '5'">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          style='width:100px;'
 | 
			
		||||
          v-model="yearValue1"
 | 
			
		||||
          type="year"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          value-format="timestamp"
 | 
			
		||||
          placeholder="选择年"
 | 
			
		||||
          @change="startYear"
 | 
			
		||||
          :clearable="false"
 | 
			
		||||
        >
 | 
			
		||||
        </el-date-picker>-
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          style='width:100px;'
 | 
			
		||||
          v-model="yearValue2"
 | 
			
		||||
          type="year"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          value-format="timestamp"
 | 
			
		||||
          placeholder="选择年"
 | 
			
		||||
          @change="endYear"
 | 
			
		||||
          :clearable="false"
 | 
			
		||||
        >
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item label="对象维度">
 | 
			
		||||
      <el-select v-model="queryParams.objType" placeholder="请选择" style="width: 80px;" @change="selectObjs">
 | 
			
		||||
        <el-option
 | 
			
		||||
          v-for="item in getDictDatas(this.DICT_TYPE.OBJECT_TYPE)"
 | 
			
		||||
          :key="item.value"
 | 
			
		||||
          :label="item.label"
 | 
			
		||||
          :value="item.value">
 | 
			
		||||
        </el-option>
 | 
			
		||||
      </el-select>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item label="对象选择">
 | 
			
		||||
      <el-select v-model="queryParams.objIds" placeholder="请选择" multiple collapse-tags style="width: 200px;">
 | 
			
		||||
        <el-option
 | 
			
		||||
          v-for="item in objectList"
 | 
			
		||||
          :key="item.id"
 | 
			
		||||
          :label="item.name"
 | 
			
		||||
          :value="item.id">
 | 
			
		||||
          <span style="float: left">{{ item.name }}</span>
 | 
			
		||||
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
 | 
			
		||||
        </el-option>
 | 
			
		||||
      </el-select>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item>
 | 
			
		||||
      <el-button type="primary" @click="search">查询</el-button>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
  </el-form>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import { getEnergyTypeListAll } from "@/api/base/energyType"
 | 
			
		||||
import { getLineAll } from "@/api/base/productionLine"
 | 
			
		||||
import { getWorkShopAll } from "@/api/base/workshopSection"
 | 
			
		||||
import { getEquipmentAll } from "@/api/base/equipment"
 | 
			
		||||
import moment from 'moment'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'searchArea',
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      // 查询参数
 | 
			
		||||
      queryParams: {
 | 
			
		||||
        energyTypeId: null,
 | 
			
		||||
        objIds: [],
 | 
			
		||||
        objType: '',
 | 
			
		||||
        timeDim: null,
 | 
			
		||||
        startTime: null,
 | 
			
		||||
        endTime: null
 | 
			
		||||
      },
 | 
			
		||||
      timeValue: [],// 最大7天只能整点
 | 
			
		||||
      dateValue: [],// 最大30天
 | 
			
		||||
      weekValue1: null,//最多24周
 | 
			
		||||
      weekValue2: null,
 | 
			
		||||
      monthValue: [],//最多24月
 | 
			
		||||
      yearValue1: null,//最多10年
 | 
			
		||||
      yearValue2: null,
 | 
			
		||||
      energyTypeList: [],
 | 
			
		||||
      objectList: [],
 | 
			
		||||
      pickerOptions: {
 | 
			
		||||
        disabledDate(date) {
 | 
			
		||||
          return date.getTime() > Date.now()
 | 
			
		||||
        }
 | 
			
		||||
      },
 | 
			
		||||
      pickerOptionsWeek: {
 | 
			
		||||
        disabledDate(time) {
 | 
			
		||||
          let day = Date.now()
 | 
			
		||||
          let limitTime = moment(day).day(-1)
 | 
			
		||||
          return time.getTime() > new Date(limitTime).getTime()
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.getTypeList()
 | 
			
		||||
    this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getTypeList() {
 | 
			
		||||
      getEnergyTypeListAll().then((res) => {
 | 
			
		||||
        this.energyTypeList = res.data || []
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    // 范围选择器
 | 
			
		||||
    timeSelect() {
 | 
			
		||||
      switch (this.queryParams.timeDim) {
 | 
			
		||||
        case '1':
 | 
			
		||||
          if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为7天,请重新选择')
 | 
			
		||||
            this.timeValue = []
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '2':
 | 
			
		||||
          if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为30天,请重新选择') // 自动选择默认是0:00:00要求是23:59:59
 | 
			
		||||
            this.dateValue = []
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '4':
 | 
			
		||||
          if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为24个月,请重新选择')// 同理上面
 | 
			
		||||
            this.monthValue = []
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
          default:
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 年选择器
 | 
			
		||||
    startYear() {
 | 
			
		||||
      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
 | 
			
		||||
        this.$modal.msgError('开始时间不能晚于结束时间,请重新选择')
 | 
			
		||||
        this.yearValue1 = null
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      if (this.yearValue1 && this.yearValue2) {
 | 
			
		||||
        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
 | 
			
		||||
          this.$modal.msgError('最大时间范围为10年,请重新选择')
 | 
			
		||||
          this.yearValue1 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    endYear() {
 | 
			
		||||
      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
 | 
			
		||||
        this.$modal.msgError('结束时间不能早于开始时间,请重新选择')
 | 
			
		||||
        this.yearValue2 = null
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      if (this.yearValue1 && this.yearValue2) {
 | 
			
		||||
        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
 | 
			
		||||
          this.$modal.msgError('最大时间范围为10年,请重新选择')
 | 
			
		||||
          this.yearValue2 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 周选择器
 | 
			
		||||
    startWeek() {
 | 
			
		||||
      if (this.weekValue1 && this.weekValue2) {
 | 
			
		||||
        let a = new Date(this.weekValue1).getTime()
 | 
			
		||||
        let b = new Date(this.weekValue2).getTime()
 | 
			
		||||
        if (a > b) {
 | 
			
		||||
          this.$modal.msgError('开始时间不能晚于结束时间,请重新选择')
 | 
			
		||||
          this.weekValue1 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
        if (b - a > 167*24*3600000) {
 | 
			
		||||
          this.$modal.msgError('最大时间范围为24周,请重新选择')
 | 
			
		||||
          this.weekValue1 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    endWeek() {
 | 
			
		||||
      if (this.weekValue1 && this.weekValue2) {
 | 
			
		||||
        let a = new Date(this.weekValue1).getTime()
 | 
			
		||||
        let b = new Date(this.weekValue2).getTime()
 | 
			
		||||
        if (a > b) {
 | 
			
		||||
          this.$modal.msgError('结束时间不能早于开始时间,请重新选择')
 | 
			
		||||
          this.weekValue2 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
        if (b - a > 167*24*3600000) {
 | 
			
		||||
          this.$modal.msgError('最大时间范围为24周,请重新选择')
 | 
			
		||||
          this.weekValue2 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 对象维度
 | 
			
		||||
    selectObjs(val) {
 | 
			
		||||
      console.log(val)
 | 
			
		||||
      switch (val) {
 | 
			
		||||
        case '1':
 | 
			
		||||
          getLineAll().then(res => {
 | 
			
		||||
            this.objectList = res.data || []
 | 
			
		||||
            this.queryParams.objIds = []
 | 
			
		||||
          })
 | 
			
		||||
          break;
 | 
			
		||||
        case '2':
 | 
			
		||||
          getWorkShopAll().then(res => {
 | 
			
		||||
            this.objectList = res.data || []
 | 
			
		||||
            this.queryParams.objIds = []
 | 
			
		||||
          })
 | 
			
		||||
          break;
 | 
			
		||||
        default:
 | 
			
		||||
          getEquipmentAll().then(res => {
 | 
			
		||||
            this.objectList = res.data || []
 | 
			
		||||
            this.queryParams.objIds = []
 | 
			
		||||
          })
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 查询
 | 
			
		||||
    search() {
 | 
			
		||||
      if (!this.queryParams.energyTypeId) {
 | 
			
		||||
        this.$modal.msgError('请选择能源类型')
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      if (!this.queryParams.timeDim) {
 | 
			
		||||
        this.$modal.msgError('请选择时间维度')
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      switch (this.queryParams.timeDim) {
 | 
			
		||||
        case '1':
 | 
			
		||||
          if (this.timeValue.length > 0) {
 | 
			
		||||
            this.queryParams.startTime = this.timeValue[0]
 | 
			
		||||
            this.queryParams.endTime = this.timeValue[1] // 不用转
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('时间范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '2':
 | 
			
		||||
          if (this.dateValue.length > 0) {
 | 
			
		||||
            this.queryParams.startTime = this.dateValue[0]
 | 
			
		||||
            this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('日范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '3':
 | 
			
		||||
          if (this.weekValue1 && this.weekValue2) {
 | 
			
		||||
            let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
 | 
			
		||||
            let b = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59'
 | 
			
		||||
            this.queryParams.startTime = new Date(a).getTime()
 | 
			
		||||
            this.queryParams.endTime = new Date(b).getTime()
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('周范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '4':// 转为本月最后一天的最后一秒
 | 
			
		||||
          if (this.monthValue.length > 0) {
 | 
			
		||||
            this.queryParams.startTime = this.monthValue[0]
 | 
			
		||||
            this.queryParams.endTime = this.transformTime(this.monthValue[1])
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('月范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        default://本年最后一天
 | 
			
		||||
          if (this.yearValue1 && this.yearValue2) {
 | 
			
		||||
            if (this.yearValue2 < this.yearValue1) {
 | 
			
		||||
              this.$modal.msgError('结束时间不能早于开始时间')
 | 
			
		||||
              return false
 | 
			
		||||
            } else {
 | 
			
		||||
              this.queryParams.startTime = this.yearValue1
 | 
			
		||||
              this.queryParams.endTime = this.transformYear(this.yearValue2)
 | 
			
		||||
            }
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('年范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
      }
 | 
			
		||||
      if (!this.queryParams.objType) {
 | 
			
		||||
        this.$modal.msgError('请选择对象维度')
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      if (this.queryParams.objIds.length === 0) {
 | 
			
		||||
        this.$modal.msgError('请选择对象')
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      this.queryParams.startTime = this.queryParams.startTime + ''
 | 
			
		||||
      this.queryParams.endTime = this.queryParams.endTime + ''
 | 
			
		||||
      console.log(this.queryParams)
 | 
			
		||||
      this.$emit('submit', this.queryParams)
 | 
			
		||||
    },
 | 
			
		||||
    transformTime(timeStamp) {// 本月最后一天
 | 
			
		||||
      let year = moment(timeStamp).format('YYYY')
 | 
			
		||||
      let month = moment(timeStamp).format('MM')
 | 
			
		||||
      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
 | 
			
		||||
      let value = new Date(newData).getTime()
 | 
			
		||||
      return value
 | 
			
		||||
    },
 | 
			
		||||
    transformYear(timeStamp) {// 本年最后一天
 | 
			
		||||
      let year = moment(timeStamp).format('YYYY')
 | 
			
		||||
      let newData = year+'-12-31 23:59:59'
 | 
			
		||||
      let value = new Date(newData).getTime()
 | 
			
		||||
      return value
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
<style>
 | 
			
		||||
/* 时间整点 */
 | 
			
		||||
.noneMinute .el-time-spinner__wrapper {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
}
 | 
			
		||||
.noneMinute .el-scrollbar:nth-of-type(2) {
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										55
									
								
								src/views/energy/analysis/contrastAnalysis/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										55
									
								
								src/views/energy/analysis/contrastAnalysis/index.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,55 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
    <!-- 搜索工作栏 -->
 | 
			
		||||
    <search-area @submit="getList"/>
 | 
			
		||||
    <el-tabs v-model="activeName" @tab-click="switchChart">
 | 
			
		||||
      <el-tab-pane label="柱状图" name="bar">
 | 
			
		||||
        <bar-chart ref="analysisBarChart" :chartData="chartData" />
 | 
			
		||||
      </el-tab-pane>
 | 
			
		||||
      <el-tab-pane label="折线图" name="line">
 | 
			
		||||
        <line-chart ref="analysisLineChart" :chartData="chartData"/>
 | 
			
		||||
      </el-tab-pane>
 | 
			
		||||
    </el-tabs>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import { getCompare } from "@/api/analysis/energyAnalysis"
 | 
			
		||||
import SearchArea from "./components/searchArea"
 | 
			
		||||
import BarChart from "./components/barChart"
 | 
			
		||||
import LineChart from "./components/lineChart"
 | 
			
		||||
// import moment from 'moment'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'ContrastAnalysis',
 | 
			
		||||
  components: { SearchArea, BarChart, LineChart },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      activeName: 'bar',
 | 
			
		||||
      chartData: []
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {},
 | 
			
		||||
  methods: {
 | 
			
		||||
    getList(params) {
 | 
			
		||||
      getCompare({ ...params }).then((res) => {
 | 
			
		||||
        console.log(res)
 | 
			
		||||
        if (res.code === 0) {
 | 
			
		||||
          this.chartData = res.data || []
 | 
			
		||||
        } else {
 | 
			
		||||
          this.chartData = []
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    switchChart() {
 | 
			
		||||
      if (this.activeName === 'bar') {
 | 
			
		||||
        this.$nextTick((res) => {
 | 
			
		||||
          this.$refs.analysisBarChart.getChart()
 | 
			
		||||
        })
 | 
			
		||||
      } else {
 | 
			
		||||
        this.$nextTick((res) => {
 | 
			
		||||
          this.$refs.analysisLineChart.getChart()
 | 
			
		||||
        })
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
							
								
								
									
										109
									
								
								src/views/energy/analysis/qoqAnalysis/components/lineChart.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										109
									
								
								src/views/energy/analysis/qoqAnalysis/components/lineChart.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,109 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div 
 | 
			
		||||
    id="analysischartLine"
 | 
			
		||||
    style="width: 100%"
 | 
			
		||||
    :style="{ height: chartHeight + 'px' }"
 | 
			
		||||
  ></div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import * as echarts from 'echarts'
 | 
			
		||||
import resize from '@/utils/chartMixins/resize'
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LineChart",
 | 
			
		||||
  mixins: [resize],
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      chartDom: '',
 | 
			
		||||
      chart: '',
 | 
			
		||||
      chartHeight: this.tableHeight(350)
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  props: {
 | 
			
		||||
    chartData: {
 | 
			
		||||
      type: Array,
 | 
			
		||||
      required: true,
 | 
			
		||||
      default: () => {
 | 
			
		||||
        return []
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    chartData: function () {
 | 
			
		||||
      this.getChart()
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.chartHeight = this.tableHeight(350)
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getChart() {
 | 
			
		||||
      if (
 | 
			
		||||
        this.chart !== null &&
 | 
			
		||||
        this.chart !== '' &&
 | 
			
		||||
        this.chart !== undefined
 | 
			
		||||
      ) {
 | 
			
		||||
        this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
 | 
			
		||||
      }
 | 
			
		||||
      this.chartDom = document.getElementById('analysischartLine')
 | 
			
		||||
      this.chart = echarts.init(this.chartDom)
 | 
			
		||||
      if (this.chartData.length === 0) {
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      let arr = this.chartData[0].type // [水,电,煤]
 | 
			
		||||
      let keys = Object.keys(this.chartData[0])
 | 
			
		||||
      let yData = [
 | 
			
		||||
        {
 | 
			
		||||
          name: '本期',
 | 
			
		||||
          type: 'bar',
 | 
			
		||||
          data: []
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          name: '上期',
 | 
			
		||||
          type: 'bar',
 | 
			
		||||
          data: []
 | 
			
		||||
        }
 | 
			
		||||
      ]
 | 
			
		||||
      for (let j = 0; j < arr.length; j++) {
 | 
			
		||||
        for (let k = 0; k < keys.length; k++) {
 | 
			
		||||
          if (keys[k].indexOf(arr[j]+'_上期') > -1) {
 | 
			
		||||
            yData[1].data.push(this.chartData[0][keys[k]])
 | 
			
		||||
          }
 | 
			
		||||
          if (keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
 | 
			
		||||
            yData[0].data.push(this.chartData[0][keys[k]])
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      var option = {
 | 
			
		||||
        // title: {
 | 
			
		||||
        //   text: 'World Population'
 | 
			
		||||
        // },
 | 
			
		||||
        tooltip: {
 | 
			
		||||
          trigger: 'axis',
 | 
			
		||||
          axisPointer: {
 | 
			
		||||
            type: 'shadow'
 | 
			
		||||
          }
 | 
			
		||||
        },
 | 
			
		||||
        legend: {},
 | 
			
		||||
        grid: {
 | 
			
		||||
          left: '3%',
 | 
			
		||||
          right: '4%',
 | 
			
		||||
          bottom: '3%',
 | 
			
		||||
          containLabel: true
 | 
			
		||||
        },
 | 
			
		||||
        yAxis: {
 | 
			
		||||
          type: 'value',
 | 
			
		||||
          boundaryGap: [0, 0.01]
 | 
			
		||||
        },
 | 
			
		||||
        xAxis: {
 | 
			
		||||
          type: 'category',
 | 
			
		||||
          data: arr
 | 
			
		||||
        },
 | 
			
		||||
        series: yData
 | 
			
		||||
      }
 | 
			
		||||
      option && this.chart.setOption(option);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
							
								
								
									
										181
									
								
								src/views/energy/analysis/qoqAnalysis/components/searchArea.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										181
									
								
								src/views/energy/analysis/qoqAnalysis/components/searchArea.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,181 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <el-form :inline="true" class="demo-form-inline">
 | 
			
		||||
    <el-form-item label="对象选择">
 | 
			
		||||
      <el-cascader
 | 
			
		||||
        v-model="objArr"
 | 
			
		||||
        :options="objList"
 | 
			
		||||
        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
 | 
			
		||||
        popper-class="cascaderParent"
 | 
			
		||||
        clearable></el-cascader>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item label="时间维度">
 | 
			
		||||
      <el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;">
 | 
			
		||||
        <el-option
 | 
			
		||||
          v-for="item in timeType"
 | 
			
		||||
          :key="item.id"
 | 
			
		||||
          :label="item.name"
 | 
			
		||||
          :value="item.id"
 | 
			
		||||
          :clearable="false">
 | 
			
		||||
        </el-option>
 | 
			
		||||
      </el-select>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item label="时间">
 | 
			
		||||
      <div v-show="queryParams.type === 1">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="monthValue"
 | 
			
		||||
          type="month"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          @change="selectTime"
 | 
			
		||||
          :clearable="false"
 | 
			
		||||
          placeholder="选择月">
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div v-show="queryParams.type === 2">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="weekValue"
 | 
			
		||||
          type="week"
 | 
			
		||||
          format="yyyy 第 WW 周"
 | 
			
		||||
          :picker-options="pickerOptionsWeek"
 | 
			
		||||
          @change="selectTime"
 | 
			
		||||
          :clearable="false"
 | 
			
		||||
          placeholder="选择周">
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div v-show="queryParams.type === 3">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="dateValue"
 | 
			
		||||
          type="date"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          @change="selectTime"
 | 
			
		||||
          :clearable="false"
 | 
			
		||||
          placeholder="选择日">
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item>
 | 
			
		||||
      <el-button type="primary" @click="search">查询</el-button>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item>
 | 
			
		||||
      <span class="separateStyle"></span>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item>
 | 
			
		||||
      <el-button type="primary" @click="exportData" plain>导出</el-button>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
  </el-form>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import { getTree } from '@/api/base/factory'
 | 
			
		||||
import moment from 'moment'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'searchArea',
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      // 查询参数
 | 
			
		||||
      queryParams: {
 | 
			
		||||
        type: 1,
 | 
			
		||||
        searchTime: null,
 | 
			
		||||
        objId: null
 | 
			
		||||
      },
 | 
			
		||||
      timeType: [
 | 
			
		||||
        {id: 1, name: '月'},
 | 
			
		||||
        {id: 2, name: '周'},
 | 
			
		||||
        {id: 3, name: '日'}
 | 
			
		||||
      ],
 | 
			
		||||
      monthValue: '',
 | 
			
		||||
      weekValue: '',
 | 
			
		||||
      dateValue: '',
 | 
			
		||||
      objArr: [],
 | 
			
		||||
      objList: [],
 | 
			
		||||
      pickerOptions: {
 | 
			
		||||
        disabledDate(date) {
 | 
			
		||||
          return date.getTime() > Date.now()
 | 
			
		||||
        }
 | 
			
		||||
      },
 | 
			
		||||
      pickerOptionsWeek: {
 | 
			
		||||
        disabledDate(time) {
 | 
			
		||||
          let day = Date.now()
 | 
			
		||||
          let limitTime = moment(day).day(-1)
 | 
			
		||||
          return time.getTime() > new Date(limitTime).getTime()
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.getObjTree()
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getObjTree() {
 | 
			
		||||
      getTree().then(res => {
 | 
			
		||||
        this.objList = res.data || []
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    selectTime() {
 | 
			
		||||
      switch (this.queryParams.type) {
 | 
			
		||||
        case 1:
 | 
			
		||||
          this.queryParams.searchTime = this.monthValue
 | 
			
		||||
          break;
 | 
			
		||||
        case 2:
 | 
			
		||||
          this.queryParams.searchTime = this.weekValue
 | 
			
		||||
          break;
 | 
			
		||||
        default:
 | 
			
		||||
          this.queryParams.searchTime = this.dateValue
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 查询
 | 
			
		||||
    search() {
 | 
			
		||||
      if (!this.objArr.length === 0) {
 | 
			
		||||
        this.$modal.msgError('请选择对象')
 | 
			
		||||
        return false
 | 
			
		||||
      } else {
 | 
			
		||||
        this.queryParams.objId = this.objArr[this.objArr.length-1]
 | 
			
		||||
      }
 | 
			
		||||
      if (!this.queryParams.type) {
 | 
			
		||||
        this.$modal.msgError('请选择时间维度')
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      if (!this.queryParams.searchTime) {
 | 
			
		||||
        this.$modal.msgError('请选择时间')
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      switch (this.queryParams.type) {
 | 
			
		||||
        case 1:
 | 
			
		||||
          this.queryParams.searchTime = this.transformTime(this.monthValue)
 | 
			
		||||
          break;
 | 
			
		||||
        case 2:
 | 
			
		||||
          let value = moment(this.weekValue).day(6).format('YYYY-MM-DD') + ' 23:59:59'
 | 
			
		||||
          this.queryParams.searchTime = new Date(value).getTime()
 | 
			
		||||
          break;
 | 
			
		||||
        default:
 | 
			
		||||
           let value2 = moment(this.dateValue).format('YYYY-MM-DD') + ' 23:59:59'
 | 
			
		||||
           this.queryParams.searchTime = new Date(value2).getTime()
 | 
			
		||||
      }
 | 
			
		||||
      this.$emit('submit', this.queryParams)
 | 
			
		||||
    },
 | 
			
		||||
    exportData() {
 | 
			
		||||
      this.$emit('exportD')
 | 
			
		||||
    },
 | 
			
		||||
    transformTime(timeStamp) {// 本月最后一天
 | 
			
		||||
      let year = moment(timeStamp).format('YYYY')
 | 
			
		||||
      let month = moment(timeStamp).format('MM')
 | 
			
		||||
      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
 | 
			
		||||
      let value = new Date(newData).getTime()
 | 
			
		||||
      return value
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
<style>
 | 
			
		||||
/* 级联选择器 */
 | 
			
		||||
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
<style scoped>
 | 
			
		||||
.separateStyle {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  width: 1px;
 | 
			
		||||
  height: 24px;
 | 
			
		||||
  background: #E8E8E8;
 | 
			
		||||
  vertical-align: middle;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										109
									
								
								src/views/energy/analysis/qoqAnalysis/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										109
									
								
								src/views/energy/analysis/qoqAnalysis/index.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,109 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
    <!-- 搜索工作栏 -->
 | 
			
		||||
    <search-area @submit="getList" @exportD="exportData"/>
 | 
			
		||||
    <!-- 表格 -->
 | 
			
		||||
    <base-table
 | 
			
		||||
      :table-props="tableProps"
 | 
			
		||||
      :table-data="list"
 | 
			
		||||
      class="qoq-out-table"
 | 
			
		||||
    />
 | 
			
		||||
    <div style='width: 100%;height: 300px;padding-top: 30px;'>
 | 
			
		||||
      <line-chart ref="analysisLineChart" :chartData="chartData"/>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import { getQoq } from "@/api/analysis/energyAnalysis"
 | 
			
		||||
import SearchArea from "./components/searchArea"
 | 
			
		||||
import LineChart from "./components/lineChart"
 | 
			
		||||
import FileSaver from "file-saver"
 | 
			
		||||
import * as XLSX from 'xlsx/xlsx.mjs'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'QoqAnalysis',
 | 
			
		||||
  components: { SearchArea, LineChart },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      chartData: [],
 | 
			
		||||
      tableProps: [],
 | 
			
		||||
      list: []
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getList(params) {
 | 
			
		||||
      getQoq({ ...params }).then((res) => {
 | 
			
		||||
        if (res.code === 0 && res.data) {
 | 
			
		||||
          this.getTableList(res.data)
 | 
			
		||||
        } else {
 | 
			
		||||
          this.chartData = []
 | 
			
		||||
          this.list = []
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    getTableList(arr) {
 | 
			
		||||
      let data = arr.data
 | 
			
		||||
      let nameData = arr.nameData
 | 
			
		||||
      let tempX = []
 | 
			
		||||
      data[0].data.map((item) => {
 | 
			
		||||
        let obj = {}
 | 
			
		||||
        obj.prop = item.dynamicName
 | 
			
		||||
        obj.label = item.dynamicName
 | 
			
		||||
        obj.id = item.id
 | 
			
		||||
        obj.children = []
 | 
			
		||||
        tempX.push(obj)
 | 
			
		||||
      })
 | 
			
		||||
      for (let i = 0; i < nameData.length; i++) {
 | 
			
		||||
        for (let j = 0; j < tempX.length; j++) {
 | 
			
		||||
          if (tempX[j].id === nameData[i].parentId) {
 | 
			
		||||
            let obj = {}
 | 
			
		||||
            obj.prop = tempX[j].prop + '_' + nameData[i].name
 | 
			
		||||
            obj.label = nameData[i].name
 | 
			
		||||
            tempX[j].children.push(obj)
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
 | 
			
		||||
      // 数据
 | 
			
		||||
      this.list = []
 | 
			
		||||
      for (let k = 0; k < data.length; k++) {
 | 
			
		||||
        let obj = {}
 | 
			
		||||
        obj.time = data[k].time
 | 
			
		||||
        let arr1 = data[k].data
 | 
			
		||||
        obj.type = []
 | 
			
		||||
        for (let q = 0; q < arr1.length; q++) {
 | 
			
		||||
          let name = arr1[q].dynamicName
 | 
			
		||||
          obj.type.push(name)
 | 
			
		||||
          let arr2 = arr1[q].children
 | 
			
		||||
          for (let p = 0; p < arr2.length; p++) {
 | 
			
		||||
            let prop = name + '_' + arr2[p].dynamicName
 | 
			
		||||
            obj[prop] = arr2[p].dynamicValue
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
        this.list.push(obj)
 | 
			
		||||
      }
 | 
			
		||||
      this.chartData = this.list
 | 
			
		||||
    },
 | 
			
		||||
    exportData() {
 | 
			
		||||
      if (this.list.length > 0) {
 | 
			
		||||
        var wb = XLSX.utils.table_to_book(document.querySelector(".qoq-out-table"))
 | 
			
		||||
        var wbout = XLSX.write(wb, {
 | 
			
		||||
            bookType: "xlsx",
 | 
			
		||||
            bookSST: true,
 | 
			
		||||
            type: "array"
 | 
			
		||||
        })
 | 
			
		||||
        try {
 | 
			
		||||
            FileSaver.saveAs(
 | 
			
		||||
            new Blob([wbout], { type: "application/octet-stream" }),
 | 
			
		||||
            "环比分析.xlsx"
 | 
			
		||||
            )
 | 
			
		||||
        } catch (e) {
 | 
			
		||||
            if (typeof console !== "undefined") console.log(e, wbout);
 | 
			
		||||
        }
 | 
			
		||||
        return wbout
 | 
			
		||||
      } else {
 | 
			
		||||
        this.$modal.msgWarning("暂无数据导出")
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
@@ -0,0 +1,77 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div 
 | 
			
		||||
    id="analysischartBar"
 | 
			
		||||
    style="width: 100%"
 | 
			
		||||
    :style="{ height: chartHeight + 'px' }"
 | 
			
		||||
  ></div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import * as echarts from 'echarts'
 | 
			
		||||
import resize from '@/utils/chartMixins/resize'
 | 
			
		||||
export default {
 | 
			
		||||
  name: "BarChart",
 | 
			
		||||
  mixins: [resize],
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      chartDom: '',
 | 
			
		||||
      chart: '',
 | 
			
		||||
      chartHeight: this.tableHeight(214) - 70
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  props: {
 | 
			
		||||
    chartData: {
 | 
			
		||||
      type: Array,
 | 
			
		||||
      required: true,
 | 
			
		||||
      default: () => {
 | 
			
		||||
        return []
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    chartData: function () {
 | 
			
		||||
      this.getChart()
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.chartHeight = this.tableHeight(214) - 70
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getChart() {
 | 
			
		||||
      if (
 | 
			
		||||
        this.chart !== null &&
 | 
			
		||||
        this.chart !== '' &&
 | 
			
		||||
        this.chart !== undefined
 | 
			
		||||
      ) {
 | 
			
		||||
        this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
 | 
			
		||||
      }
 | 
			
		||||
      this.chartDom = document.getElementById('analysischartBar')
 | 
			
		||||
      this.chart = echarts.init(this.chartDom)
 | 
			
		||||
      let xData = []
 | 
			
		||||
      let yData = []
 | 
			
		||||
      for (let i = 0; i < this.chartData.length; i++) {
 | 
			
		||||
        xData.push(this.chartData[i].time)
 | 
			
		||||
        yData.push(this.chartData[i].useNum)
 | 
			
		||||
      }
 | 
			
		||||
      var option = {
 | 
			
		||||
        xAxis: {
 | 
			
		||||
          type: 'category',
 | 
			
		||||
          data: xData
 | 
			
		||||
        },
 | 
			
		||||
        yAxis: {
 | 
			
		||||
          type: 'value'
 | 
			
		||||
        },
 | 
			
		||||
        series: [
 | 
			
		||||
          {
 | 
			
		||||
            data: yData,
 | 
			
		||||
            type: 'bar'
 | 
			
		||||
          }
 | 
			
		||||
        ]
 | 
			
		||||
      };
 | 
			
		||||
 | 
			
		||||
      option && this.chart.setOption(option);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
@@ -0,0 +1,78 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div 
 | 
			
		||||
    id="analysischartLine"
 | 
			
		||||
    style="width: 100%"
 | 
			
		||||
    :style="{ height: chartHeight + 'px' }"
 | 
			
		||||
  ></div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import * as echarts from 'echarts'
 | 
			
		||||
import resize from '@/utils/chartMixins/resize'
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LineChart",
 | 
			
		||||
  mixins: [resize],
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      chartDom: '',
 | 
			
		||||
      chart: '',
 | 
			
		||||
      chartHeight: this.tableHeight(214) - 70
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  props: {
 | 
			
		||||
    chartData: {
 | 
			
		||||
      type: Array,
 | 
			
		||||
      required: true,
 | 
			
		||||
      default: () => {
 | 
			
		||||
        return []
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    chartData: function () {
 | 
			
		||||
      this.getChart()
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.chartHeight = this.tableHeight(214) - 70
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getChart() {
 | 
			
		||||
      if (
 | 
			
		||||
        this.chart !== null &&
 | 
			
		||||
        this.chart !== '' &&
 | 
			
		||||
        this.chart !== undefined
 | 
			
		||||
      ) {
 | 
			
		||||
        this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
 | 
			
		||||
      }
 | 
			
		||||
      this.chartDom = document.getElementById('analysischartLine')
 | 
			
		||||
      this.chart = echarts.init(this.chartDom)
 | 
			
		||||
      let xData = []
 | 
			
		||||
      let yData = []
 | 
			
		||||
      for (let i = 0; i < this.chartData.length; i++) {
 | 
			
		||||
        xData.push(this.chartData[i].time)
 | 
			
		||||
        yData.push(this.chartData[i].useNum)
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      var option = {
 | 
			
		||||
        xAxis: {
 | 
			
		||||
          type: 'category',
 | 
			
		||||
          data: xData
 | 
			
		||||
        },
 | 
			
		||||
        yAxis: {
 | 
			
		||||
          type: 'value'
 | 
			
		||||
        },
 | 
			
		||||
        series: [
 | 
			
		||||
          {
 | 
			
		||||
            data: yData,
 | 
			
		||||
            type: 'line'
 | 
			
		||||
          }
 | 
			
		||||
        ]
 | 
			
		||||
      };
 | 
			
		||||
 | 
			
		||||
      option && this.chart.setOption(option);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
@@ -0,0 +1,364 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <el-form :inline="true" class="demo-form-inline">
 | 
			
		||||
    <el-form-item label="能源类型">
 | 
			
		||||
      <el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;">
 | 
			
		||||
        <el-option
 | 
			
		||||
          v-for="item in energyTypeList"
 | 
			
		||||
          :key="item.id"
 | 
			
		||||
          :label="item.name"
 | 
			
		||||
          :value="item.id">
 | 
			
		||||
        </el-option>
 | 
			
		||||
      </el-select>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item label="对象选择">
 | 
			
		||||
      <el-cascader
 | 
			
		||||
        v-model="objArr"
 | 
			
		||||
        :options="objList"
 | 
			
		||||
        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
 | 
			
		||||
        popper-class="cascaderParent"
 | 
			
		||||
        clearable></el-cascader>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item label="时间维度">
 | 
			
		||||
      <el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;">
 | 
			
		||||
        <el-option
 | 
			
		||||
          v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
 | 
			
		||||
          :key="item.value"
 | 
			
		||||
          :label="item.label"
 | 
			
		||||
          :value="item.value">
 | 
			
		||||
        </el-option>
 | 
			
		||||
      </el-select>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item label="时间范围">
 | 
			
		||||
      <div v-show="queryParams.timeDim === '1'">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="timeValue"
 | 
			
		||||
          type="datetimerange"
 | 
			
		||||
          range-separator="至"
 | 
			
		||||
          start-placeholder="开始日期"
 | 
			
		||||
          end-placeholder="结束日期"
 | 
			
		||||
          format="yyyy-MM-dd HH:mm"
 | 
			
		||||
          value-format="timestamp"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          popper-class="noneMinute"
 | 
			
		||||
          @change="timeSelect"
 | 
			
		||||
          >
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div v-show="queryParams.timeDim === '2'">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="dateValue"
 | 
			
		||||
          type="daterange"
 | 
			
		||||
          range-separator="至"
 | 
			
		||||
          start-placeholder="开始日期"
 | 
			
		||||
          end-placeholder="结束日期"
 | 
			
		||||
          value-format="timestamp"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          @change="timeSelect"
 | 
			
		||||
          >
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div v-show="queryParams.timeDim === '3'">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="weekValue1"
 | 
			
		||||
          type="week"
 | 
			
		||||
          format="yyyy 第 WW 周"
 | 
			
		||||
          style='width:150px;'
 | 
			
		||||
          :picker-options="pickerOptionsWeek"
 | 
			
		||||
          @change="startWeek"
 | 
			
		||||
          placeholder="选择周">
 | 
			
		||||
        </el-date-picker>-
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="weekValue2"
 | 
			
		||||
          type="week"
 | 
			
		||||
          format="yyyy 第 WW 周"
 | 
			
		||||
          :picker-options="pickerOptionsWeek"
 | 
			
		||||
          style='width:150px;'
 | 
			
		||||
          @change="endWeek"
 | 
			
		||||
          placeholder="选择周">
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div v-show="queryParams.timeDim === '4'">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="monthValue"
 | 
			
		||||
          type="monthrange"
 | 
			
		||||
          range-separator="至"
 | 
			
		||||
          start-placeholder="开始日期"
 | 
			
		||||
          end-placeholder="结束日期"
 | 
			
		||||
          value-format="timestamp"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          @change="timeSelect"
 | 
			
		||||
          >
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div v-show="queryParams.timeDim === '5'">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          style='width:100px;'
 | 
			
		||||
          v-model="yearValue1"
 | 
			
		||||
          type="year"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          value-format="timestamp"
 | 
			
		||||
          placeholder="选择年"
 | 
			
		||||
          @change="startYear"
 | 
			
		||||
        >
 | 
			
		||||
        </el-date-picker>-
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          style='width:100px;'
 | 
			
		||||
          v-model="yearValue2"
 | 
			
		||||
          type="year"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          value-format="timestamp"
 | 
			
		||||
          placeholder="选择年"
 | 
			
		||||
          @change="endYear"
 | 
			
		||||
        >
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item>
 | 
			
		||||
      <el-button type="primary" @click="search">查询</el-button>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
  </el-form>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import { getEnergyTypeListAll } from "@/api/base/energyType"
 | 
			
		||||
import { getTree } from '@/api/base/factory'
 | 
			
		||||
import moment from 'moment'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'searchArea',
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      // 查询参数
 | 
			
		||||
      queryParams: {
 | 
			
		||||
        energyTypeId: null,
 | 
			
		||||
        objId: null,
 | 
			
		||||
        timeDim: null,
 | 
			
		||||
        startTime: null,
 | 
			
		||||
        endTime: null
 | 
			
		||||
      },
 | 
			
		||||
      objArr: [],
 | 
			
		||||
      timeValue: [],// 最大7天只能整点
 | 
			
		||||
      dateValue: [],// 最大30天
 | 
			
		||||
      weekValue1: null,//最多24周
 | 
			
		||||
      weekValue2: null,
 | 
			
		||||
      monthValue: [],//最多24月
 | 
			
		||||
      yearValue1: null,//最多10年
 | 
			
		||||
      yearValue2: null,
 | 
			
		||||
      energyTypeList: [],
 | 
			
		||||
      objList: [],
 | 
			
		||||
      pickerOptions: {
 | 
			
		||||
        disabledDate(date) {
 | 
			
		||||
          return date.getTime() > Date.now()
 | 
			
		||||
        }
 | 
			
		||||
      },
 | 
			
		||||
      pickerOptionsWeek: {
 | 
			
		||||
        disabledDate(time) {
 | 
			
		||||
          let day = Date.now()
 | 
			
		||||
          let limitTime = moment(day).day(-1)
 | 
			
		||||
          return time.getTime() > new Date(limitTime).getTime()
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.getTypeList()
 | 
			
		||||
    this.getObjTree()
 | 
			
		||||
    this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getTypeList() {
 | 
			
		||||
      getEnergyTypeListAll().then((res) => {
 | 
			
		||||
        this.energyTypeList = res.data || []
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    getObjTree() {
 | 
			
		||||
      getTree().then(res => {
 | 
			
		||||
        this.objList = res.data || []
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    // 范围选择器
 | 
			
		||||
    timeSelect() {
 | 
			
		||||
      switch (this.queryParams.timeDim) {
 | 
			
		||||
        case '1':
 | 
			
		||||
          if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为7天,请重新选择')
 | 
			
		||||
            this.timeValue = []
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '2':
 | 
			
		||||
          if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为30天,请重新选择') // 自动选择默认是0:00:00要求是23:59:59
 | 
			
		||||
            this.dateValue = []
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '4':
 | 
			
		||||
          if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为24个月,请重新选择')// 同理上面
 | 
			
		||||
            this.monthValue = []
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
          default:
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 年选择器
 | 
			
		||||
    startYear() {
 | 
			
		||||
      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
 | 
			
		||||
        this.$modal.msgError('开始时间不能晚于结束时间,请重新选择')
 | 
			
		||||
        this.yearValue1 = null
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      if (this.yearValue1 && this.yearValue2) {
 | 
			
		||||
        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
 | 
			
		||||
          this.$modal.msgError('最大时间范围为10年,请重新选择')
 | 
			
		||||
          this.yearValue1 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    endYear() {
 | 
			
		||||
      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
 | 
			
		||||
        this.$modal.msgError('结束时间不能早于开始时间,请重新选择')
 | 
			
		||||
        this.yearValue2 = null
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      if (this.yearValue1 && this.yearValue2) {
 | 
			
		||||
        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
 | 
			
		||||
          this.$modal.msgError('最大时间范围为10年,请重新选择')
 | 
			
		||||
          this.yearValue2 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 周选择器
 | 
			
		||||
    startWeek() {
 | 
			
		||||
      if (this.weekValue1 && this.weekValue2) {
 | 
			
		||||
        let a = new Date(this.weekValue1).getTime()
 | 
			
		||||
        let b = new Date(this.weekValue2).getTime()
 | 
			
		||||
        if (a > b) {
 | 
			
		||||
          this.$modal.msgError('开始时间不能晚于结束时间,请重新选择')
 | 
			
		||||
          this.weekValue1 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
        if (b - a > 167*24*3600000) {
 | 
			
		||||
          this.$modal.msgError('最大时间范围为24周,请重新选择')
 | 
			
		||||
          this.weekValue1 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    endWeek() {
 | 
			
		||||
      if (this.weekValue1 && this.weekValue2) {
 | 
			
		||||
        let a = new Date(this.weekValue1).getTime()
 | 
			
		||||
        let b = new Date(this.weekValue2).getTime()
 | 
			
		||||
        if (a > b) {
 | 
			
		||||
          this.$modal.msgError('结束时间不能早于开始时间,请重新选择')
 | 
			
		||||
          this.weekValue2 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
        if (b - a > 167*24*3600000) {
 | 
			
		||||
          this.$modal.msgError('最大时间范围为24周,请重新选择')
 | 
			
		||||
          this.weekValue2 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 查询
 | 
			
		||||
    search() {
 | 
			
		||||
      if (!this.queryParams.energyTypeId) {
 | 
			
		||||
        this.$modal.msgError('请选择能源类型')
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      if (!this.objArr.length === 0) {
 | 
			
		||||
        this.$modal.msgError('请选择对象')
 | 
			
		||||
        return false
 | 
			
		||||
      } else {
 | 
			
		||||
        this.queryParams.objId = this.objArr[this.objArr.length-1]
 | 
			
		||||
      }
 | 
			
		||||
      if (!this.queryParams.timeDim) {
 | 
			
		||||
        this.$modal.msgError('请选择时间维度')
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      switch (this.queryParams.timeDim) {
 | 
			
		||||
        case '1':
 | 
			
		||||
          if (this.timeValue.length > 0) {
 | 
			
		||||
            this.queryParams.startTime = this.timeValue[0]
 | 
			
		||||
            this.queryParams.endTime = this.timeValue[1] // 不用转
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('时间范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '2':
 | 
			
		||||
          if (this.dateValue.length > 0) {
 | 
			
		||||
            this.queryParams.startTime = this.dateValue[0]
 | 
			
		||||
            this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('日范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '3':
 | 
			
		||||
          if (this.weekValue1 && this.weekValue2) {
 | 
			
		||||
            let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
 | 
			
		||||
            let b = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59'
 | 
			
		||||
            this.queryParams.startTime = new Date(a).getTime()
 | 
			
		||||
            this.queryParams.endTime = new Date(b).getTime()
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('周范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '4':// 转为本月最后一天的最后一秒
 | 
			
		||||
          if (this.monthValue.length > 0) {
 | 
			
		||||
            this.queryParams.startTime = this.monthValue[0]
 | 
			
		||||
            this.queryParams.endTime = this.transformTime(this.monthValue[1])
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('月范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        default://本年最后一天
 | 
			
		||||
          if (this.yearValue1 && this.yearValue2) {
 | 
			
		||||
            if (this.yearValue2 < this.yearValue1) {
 | 
			
		||||
              this.$modal.msgError('结束时间不能早于开始时间')
 | 
			
		||||
              return false
 | 
			
		||||
            } else {
 | 
			
		||||
              this.queryParams.startTime = this.yearValue1
 | 
			
		||||
              this.queryParams.endTime = this.transformYear(this.yearValue2)
 | 
			
		||||
            }
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('年范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
      }
 | 
			
		||||
      this.queryParams.startTime = this.queryParams.startTime + ''
 | 
			
		||||
      this.queryParams.endTime = this.queryParams.endTime + ''
 | 
			
		||||
      this.$emit('submit', this.queryParams)
 | 
			
		||||
    },
 | 
			
		||||
    transformTime(timeStamp) {// 本月最后一天
 | 
			
		||||
      let year = moment(timeStamp).format('YYYY')
 | 
			
		||||
      let month = moment(timeStamp).format('MM')
 | 
			
		||||
      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
 | 
			
		||||
      let value = new Date(newData).getTime()
 | 
			
		||||
      return value
 | 
			
		||||
    },
 | 
			
		||||
    transformYear(timeStamp) {// 本年最后一天
 | 
			
		||||
      let year = moment(timeStamp).format('YYYY')
 | 
			
		||||
      let newData = year+'-12-31 23:59:59'
 | 
			
		||||
      let value = new Date(newData).getTime()
 | 
			
		||||
      return value
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
<style>
 | 
			
		||||
/* 级联选择器 */
 | 
			
		||||
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
/* 时间整点 */
 | 
			
		||||
.noneMinute .el-time-spinner__wrapper {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
}
 | 
			
		||||
.noneMinute .el-scrollbar:nth-of-type(2) {
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										64
									
								
								src/views/energy/analysis/trendAnalysis/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										64
									
								
								src/views/energy/analysis/trendAnalysis/index.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,64 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
    <!-- 搜索工作栏 -->
 | 
			
		||||
    <search-area @submit="getList"/>
 | 
			
		||||
    <el-tabs v-model="activeName" @tab-click="switchChart">
 | 
			
		||||
      <el-tab-pane label="柱状图" name="bar">
 | 
			
		||||
        <bar-chart ref="analysisBarChart" :chartData="chartData" />
 | 
			
		||||
      </el-tab-pane>
 | 
			
		||||
      <el-tab-pane label="折线图" name="line">
 | 
			
		||||
        <line-chart ref="analysisLineChart" :chartData="chartData"/>
 | 
			
		||||
      </el-tab-pane>
 | 
			
		||||
    </el-tabs>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import { getEnergyTrend } from "@/api/analysis/energyAnalysis"
 | 
			
		||||
import SearchArea from "./components/searchArea"
 | 
			
		||||
import BarChart from "./components/barChart"
 | 
			
		||||
import LineChart from "./components/lineChart"
 | 
			
		||||
// import moment from 'moment'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'TrendAnalysis',
 | 
			
		||||
  components: { SearchArea, BarChart, LineChart },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      activeName: 'bar',
 | 
			
		||||
      chartData: []
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {},
 | 
			
		||||
  methods: {
 | 
			
		||||
    getList(params) {
 | 
			
		||||
      getEnergyTrend({ ...params }).then((res) => {
 | 
			
		||||
        if (res.code === 0) {
 | 
			
		||||
          this.chartData = res.data
 | 
			
		||||
        } else {
 | 
			
		||||
          this.chartData = []
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
      // getEnergyTrend({
 | 
			
		||||
      //   energyTypeId: "1681183397517406210",
 | 
			
		||||
      //   objId: "1679031282510532610",
 | 
			
		||||
      //   timeDim: "2",
 | 
			
		||||
      //   startTime: "1690732800000",
 | 
			
		||||
      //   endTime: "1690992000000"
 | 
			
		||||
      // }).then((res) => {
 | 
			
		||||
      //   console.log(res)
 | 
			
		||||
      //   this.chartData = res.data
 | 
			
		||||
      // })
 | 
			
		||||
    },
 | 
			
		||||
    switchChart() {
 | 
			
		||||
      if (this.activeName === 'bar') {
 | 
			
		||||
        this.$nextTick((res) => {
 | 
			
		||||
          this.$refs.analysisBarChart.getChart()
 | 
			
		||||
        })
 | 
			
		||||
      } else {
 | 
			
		||||
        this.$nextTick((res) => {
 | 
			
		||||
          this.$refs.analysisLineChart.getChart()
 | 
			
		||||
        })
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
							
								
								
									
										104
									
								
								src/views/energy/analysis/yoyAnalysis/components/lineChart.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										104
									
								
								src/views/energy/analysis/yoyAnalysis/components/lineChart.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,104 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div 
 | 
			
		||||
    id="analysischartLine"
 | 
			
		||||
    style="width: 100%;height: 100%;"
 | 
			
		||||
  ></div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import * as echarts from 'echarts'
 | 
			
		||||
import resize from '@/utils/chartMixins/resize'
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LineChart",
 | 
			
		||||
  mixins: [resize],
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      chartDom: '',
 | 
			
		||||
      chart: '',
 | 
			
		||||
      chartHeight: this.tableHeight(214) - 70
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  props: {
 | 
			
		||||
    chartData: {
 | 
			
		||||
      type: Array,
 | 
			
		||||
      required: true,
 | 
			
		||||
      default: () => {
 | 
			
		||||
        return []
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    chartData: function () {
 | 
			
		||||
      this.getChart()
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.chartHeight = this.tableHeight(214) - 70
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getChart() {
 | 
			
		||||
      if (
 | 
			
		||||
        this.chart !== null &&
 | 
			
		||||
        this.chart !== '' &&
 | 
			
		||||
        this.chart !== undefined
 | 
			
		||||
      ) {
 | 
			
		||||
        this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
 | 
			
		||||
      }
 | 
			
		||||
      this.chartDom = document.getElementById('analysischartLine')
 | 
			
		||||
      this.chart = echarts.init(this.chartDom)
 | 
			
		||||
      if (this.chartData.length === 0) {
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      let xData = []
 | 
			
		||||
      let arr = this.chartData[0].type
 | 
			
		||||
      let keys = Object.keys(this.chartData[0])
 | 
			
		||||
      let yData = []
 | 
			
		||||
      for (let j = 0; j < arr.length; j++) {
 | 
			
		||||
        for (let k = 0; k < keys.length; k++) {
 | 
			
		||||
          if (keys[k].indexOf(arr[j]+'_上年同期') > -1 || keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
 | 
			
		||||
            let obj = {
 | 
			
		||||
              name: '',
 | 
			
		||||
              type: 'line',
 | 
			
		||||
              stack: 'Total',
 | 
			
		||||
              data: []
 | 
			
		||||
            }
 | 
			
		||||
            obj.name = keys[k]
 | 
			
		||||
            yData.push(obj)
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      for (let i = 0; i < this.chartData.length; i++) {
 | 
			
		||||
        xData.push(this.chartData[i].time)
 | 
			
		||||
        for (let p = 0; p < yData.length; p++) {
 | 
			
		||||
          yData[p].data.push(this.chartData[i][ yData[p].name])
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      var option = {
 | 
			
		||||
        legend: {
 | 
			
		||||
          data: keys
 | 
			
		||||
        },
 | 
			
		||||
        tooltip: {
 | 
			
		||||
          trigger: 'axis'
 | 
			
		||||
        },
 | 
			
		||||
        grid: {
 | 
			
		||||
          left: '3%',
 | 
			
		||||
          right: '4%',
 | 
			
		||||
          bottom: '3%',
 | 
			
		||||
          containLabel: true
 | 
			
		||||
        },
 | 
			
		||||
        xAxis: {
 | 
			
		||||
          type: 'category',
 | 
			
		||||
          data: xData
 | 
			
		||||
        },
 | 
			
		||||
        yAxis: {
 | 
			
		||||
          type: 'value'
 | 
			
		||||
        },
 | 
			
		||||
        series: yData
 | 
			
		||||
      };
 | 
			
		||||
 | 
			
		||||
      option && this.chart.setOption(option);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
							
								
								
									
										156
									
								
								src/views/energy/analysis/yoyAnalysis/components/searchArea.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										156
									
								
								src/views/energy/analysis/yoyAnalysis/components/searchArea.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,156 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <el-form :inline="true" class="demo-form-inline">
 | 
			
		||||
    <el-form-item label="对象选择">
 | 
			
		||||
      <el-cascader
 | 
			
		||||
        v-model="objArr"
 | 
			
		||||
        :options="objList"
 | 
			
		||||
        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
 | 
			
		||||
        popper-class="cascaderParent"
 | 
			
		||||
        clearable></el-cascader>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item label="时间维度">
 | 
			
		||||
      <el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;">
 | 
			
		||||
        <el-option
 | 
			
		||||
          v-for="item in timeType"
 | 
			
		||||
          :key="item.id"
 | 
			
		||||
          :label="item.name"
 | 
			
		||||
          :value="item.id"
 | 
			
		||||
          :clearable="false">
 | 
			
		||||
        </el-option>
 | 
			
		||||
      </el-select>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item label="时间">
 | 
			
		||||
      <div v-show="queryParams.type === 1 || queryParams.type === 2">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="yearValue"
 | 
			
		||||
          type="year"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          @change="selectTime"
 | 
			
		||||
          :clearable="false"
 | 
			
		||||
          placeholder="选择年">
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div v-show="queryParams.type === 3">
 | 
			
		||||
        <el-date-picker
 | 
			
		||||
          v-model="yearMonth"
 | 
			
		||||
          type="month"
 | 
			
		||||
          :picker-options="pickerOptions"
 | 
			
		||||
          @change="selectTime"
 | 
			
		||||
          :clearable="false"
 | 
			
		||||
          placeholder="选择月">
 | 
			
		||||
        </el-date-picker>
 | 
			
		||||
      </div>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item>
 | 
			
		||||
      <el-button type="primary" @click="search">查询</el-button>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item>
 | 
			
		||||
      <span class="separateStyle"></span>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item>
 | 
			
		||||
      <el-button type="primary" @click="exportData" plain>导出</el-button>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
  </el-form>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import { getTree } from '@/api/base/factory'
 | 
			
		||||
import moment from 'moment'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'searchArea',
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      // 查询参数
 | 
			
		||||
      queryParams: {
 | 
			
		||||
        type: 1, // 1季度2月3日
 | 
			
		||||
        searchTime: null,
 | 
			
		||||
        objId: null
 | 
			
		||||
      },
 | 
			
		||||
      timeType: [
 | 
			
		||||
        {id: 1, name: '季度'},
 | 
			
		||||
        {id: 2, name: '月'},
 | 
			
		||||
        {id: 3, name: '日'}
 | 
			
		||||
      ],
 | 
			
		||||
      yearValue: '',
 | 
			
		||||
      yearMonth: '',
 | 
			
		||||
      objArr: [],
 | 
			
		||||
      objList: [],
 | 
			
		||||
      pickerOptions: {
 | 
			
		||||
        disabledDate(date) {
 | 
			
		||||
          return date.getTime() > Date.now()
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.getObjTree()
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getObjTree() {
 | 
			
		||||
      getTree().then(res => {
 | 
			
		||||
        this.objList = res.data || []
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    selectTime() {
 | 
			
		||||
      if (this.queryParams.type === 3) {
 | 
			
		||||
        this.queryParams.searchTime = this.yearMonth
 | 
			
		||||
      } else {
 | 
			
		||||
        this.queryParams.searchTime = this.yearValue
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 查询
 | 
			
		||||
    search() {
 | 
			
		||||
      if (!this.objArr.length === 0) {
 | 
			
		||||
        this.$modal.msgError('请选择对象')
 | 
			
		||||
        return false
 | 
			
		||||
      } else {
 | 
			
		||||
        this.queryParams.objId = this.objArr[this.objArr.length-1]
 | 
			
		||||
      }
 | 
			
		||||
      if (!this.queryParams.type) {
 | 
			
		||||
        this.$modal.msgError('请选择时间维度')
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      if (!this.queryParams.searchTime) {
 | 
			
		||||
        this.$modal.msgError('请选择时间')
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      if (this.queryParams.type === 3) {
 | 
			
		||||
        this.queryParams.searchTime = this.transformTime(this.yearMonth) + ''
 | 
			
		||||
      } else {
 | 
			
		||||
        this.queryParams.searchTime = this.transformYear(this.yearValue) + ''
 | 
			
		||||
      }
 | 
			
		||||
      this.$emit('submit', this.queryParams)
 | 
			
		||||
    },
 | 
			
		||||
    exportData() {
 | 
			
		||||
      this.$emit('exportD')
 | 
			
		||||
    },
 | 
			
		||||
    transformTime(timeStamp) {// 本月最后一天
 | 
			
		||||
      let year = moment(timeStamp).format('YYYY')
 | 
			
		||||
      let month = moment(timeStamp).format('MM')
 | 
			
		||||
      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
 | 
			
		||||
      let value = new Date(newData).getTime()
 | 
			
		||||
      return value
 | 
			
		||||
    },
 | 
			
		||||
    transformYear(timeStamp) {// 本年最后一天
 | 
			
		||||
      let year = moment(timeStamp).format('YYYY')
 | 
			
		||||
      let newData = year+'-12-31 23:59:59'
 | 
			
		||||
      let value = new Date(newData).getTime()
 | 
			
		||||
      return value
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
<style>
 | 
			
		||||
/* 级联选择器 */
 | 
			
		||||
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
<style scoped>
 | 
			
		||||
.separateStyle {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  width: 1px;
 | 
			
		||||
  height: 24px;
 | 
			
		||||
  background: #E8E8E8;
 | 
			
		||||
  vertical-align: middle;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										116
									
								
								src/views/energy/analysis/yoyAnalysis/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										116
									
								
								src/views/energy/analysis/yoyAnalysis/index.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,116 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
    <!-- 搜索工作栏 -->
 | 
			
		||||
    <search-area @submit="getList" @exportD="exportData"/>
 | 
			
		||||
    <div style='width: 100%;height: 300px;'>
 | 
			
		||||
      <line-chart ref="analysisLineChart" :chartData="chartData"/>
 | 
			
		||||
    </div>
 | 
			
		||||
    <!-- 表格 -->
 | 
			
		||||
    <base-table
 | 
			
		||||
      :table-props="tableProps"
 | 
			
		||||
      :table-data="list"
 | 
			
		||||
      :max-height="tableH"
 | 
			
		||||
      class="yoy-out-table"
 | 
			
		||||
    />
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import { getYoy } from "@/api/analysis/energyAnalysis"
 | 
			
		||||
import SearchArea from "./components/searchArea"
 | 
			
		||||
import LineChart from "./components/lineChart"
 | 
			
		||||
import FileSaver from "file-saver"
 | 
			
		||||
import * as XLSX from 'xlsx/xlsx.mjs'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'YoyAnalysis',
 | 
			
		||||
  components: { SearchArea, LineChart },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      chartData: [],
 | 
			
		||||
      tableProps: [],
 | 
			
		||||
      list: [],
 | 
			
		||||
      tableH: this.tableHeight(500)
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.tableH = this.tableHeight(500)
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getList(params) {
 | 
			
		||||
      getYoy({ ...params }).then((res) => {
 | 
			
		||||
        if (res.code === 0 && res.data) {
 | 
			
		||||
          this.getTableList(res.data)
 | 
			
		||||
        } else {
 | 
			
		||||
          this.chartData = []
 | 
			
		||||
          this.list = []
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    getTableList(arr) {
 | 
			
		||||
      let data = arr.data
 | 
			
		||||
      let nameData = arr.nameData
 | 
			
		||||
      let tempX = []
 | 
			
		||||
      data[0].data.map((item) => {
 | 
			
		||||
        let obj = {}
 | 
			
		||||
        obj.prop = item.dynamicName
 | 
			
		||||
        obj.label = item.dynamicName
 | 
			
		||||
        obj.id = item.id
 | 
			
		||||
        obj.children = []
 | 
			
		||||
        tempX.push(obj)
 | 
			
		||||
      })
 | 
			
		||||
      for (let i = 0; i < nameData.length; i++) {
 | 
			
		||||
        for (let j = 0; j < tempX.length; j++) {
 | 
			
		||||
          if (tempX[j].id === nameData[i].parentId) {
 | 
			
		||||
            let obj = {}
 | 
			
		||||
            obj.prop = tempX[j].prop + '_' + nameData[i].name
 | 
			
		||||
            obj.label = nameData[i].name
 | 
			
		||||
            tempX[j].children.push(obj)
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
 | 
			
		||||
      // 数据
 | 
			
		||||
      this.list = []
 | 
			
		||||
      for (let k = 0; k < data.length; k++) {
 | 
			
		||||
        let obj = {}
 | 
			
		||||
        obj.time = data[k].time
 | 
			
		||||
        let arr1 = data[k].data
 | 
			
		||||
        obj.type = []
 | 
			
		||||
        for (let q = 0; q < arr1.length; q++) {
 | 
			
		||||
          let name = arr1[q].dynamicName
 | 
			
		||||
          obj.type.push(name)
 | 
			
		||||
          let arr2 = arr1[q].children
 | 
			
		||||
          for (let p = 0; p < arr2.length; p++) {
 | 
			
		||||
            let prop = name + '_' + arr2[p].dynamicName
 | 
			
		||||
            obj[prop] = arr2[p].dynamicValue
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
        this.list.push(obj)
 | 
			
		||||
      }
 | 
			
		||||
      this.chartData = this.list
 | 
			
		||||
    },
 | 
			
		||||
    exportData() {
 | 
			
		||||
      if (this.list.length > 0) {
 | 
			
		||||
        var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table"))
 | 
			
		||||
        var wbout = XLSX.write(wb, {
 | 
			
		||||
            bookType: "xlsx",
 | 
			
		||||
            bookSST: true,
 | 
			
		||||
            type: "array"
 | 
			
		||||
        })
 | 
			
		||||
        try {
 | 
			
		||||
            FileSaver.saveAs(
 | 
			
		||||
            new Blob([wbout], { type: "application/octet-stream" }),
 | 
			
		||||
            "同比分析.xlsx"
 | 
			
		||||
            )
 | 
			
		||||
        } catch (e) {
 | 
			
		||||
            if (typeof console !== "undefined") console.log(e, wbout);
 | 
			
		||||
        }
 | 
			
		||||
        return wbout
 | 
			
		||||
      } else {
 | 
			
		||||
        this.$modal.msgWarning("暂无数据导出")
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
@@ -50,7 +50,7 @@ import { getEnergyPlcConnectPage, deleteEnergyPlcConnect } from "@/api/base/ener
 | 
			
		||||
// import { publicFormatter } from '@/utils/dict'
 | 
			
		||||
import { getTree } from '@/api/base/factory'
 | 
			
		||||
import { getEnergyTypeListAll } from '@/api/base/energyType'
 | 
			
		||||
import EnergyPlcConnectAdd from './components/energyPlcConnectAdd.vue'
 | 
			
		||||
import EnergyPlcConnectAdd from './components/energyPlcConnectAdd'
 | 
			
		||||
import EnergyPlcParam from './components/energyPlcParam'
 | 
			
		||||
const tableProps = [
 | 
			
		||||
  {
 | 
			
		||||
@@ -61,6 +61,10 @@ const tableProps = [
 | 
			
		||||
    prop: 'objCode',
 | 
			
		||||
    label: '对象编码'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'remark',
 | 
			
		||||
    label: '对象备注'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'plcTableName', 
 | 
			
		||||
    label: '关联表名'
 | 
			
		||||
@@ -76,10 +80,6 @@ const tableProps = [
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'varNum',
 | 
			
		||||
    label: '绑定参数数量'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'remark',
 | 
			
		||||
    label: '备注'
 | 
			
		||||
  }
 | 
			
		||||
]
 | 
			
		||||
export default {
 | 
			
		||||
 
 | 
			
		||||
@@ -137,6 +137,7 @@ export default {
 | 
			
		||||
          this.$modal.confirm('是否确认导出').then(() => {
 | 
			
		||||
              return exportEnergyQuantityRealtimeExcel({...this.queryParams});
 | 
			
		||||
            }).then(response => {
 | 
			
		||||
              console.log(response)
 | 
			
		||||
              this.$download.excel(response, '能源抄表.xls');
 | 
			
		||||
            }).catch(() => {})
 | 
			
		||||
      }
 | 
			
		||||
 
 | 
			
		||||
@@ -27,12 +27,12 @@
 | 
			
		||||
      </el-select>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
    <el-form-item label="监控详细参数" prop="plcParamId" v-if="form.type === 2">
 | 
			
		||||
      <el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;">
 | 
			
		||||
      <el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail">
 | 
			
		||||
        <el-option
 | 
			
		||||
          v-for="item in getDictDatas(DICT_TYPE.ENERGY_UNIT)"
 | 
			
		||||
          :key="item.value"
 | 
			
		||||
          :label="item.label"
 | 
			
		||||
          :value="item.value">
 | 
			
		||||
          v-for="item in detailList"
 | 
			
		||||
          :key="item.id"
 | 
			
		||||
          :label="item.name"
 | 
			
		||||
          :value="item.id">
 | 
			
		||||
        </el-option>
 | 
			
		||||
      </el-select>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
@@ -52,7 +52,7 @@
 | 
			
		||||
  </el-form>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import { getEnergyLimit, updateEnergyLimit, createEnergyLimit } from '@/api/monitoring/energyLimit'
 | 
			
		||||
import { getEnergyLimit, updateEnergyLimit, createEnergyLimit, getEnergyParamList } from '@/api/monitoring/energyLimit'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'energyLimitAdd',
 | 
			
		||||
  props: {
 | 
			
		||||
@@ -73,6 +73,8 @@ export default {
 | 
			
		||||
      form: {
 | 
			
		||||
        id: '',
 | 
			
		||||
        objectId: '',
 | 
			
		||||
        objectType: '',
 | 
			
		||||
        energyTypeId: '',
 | 
			
		||||
        type: '',
 | 
			
		||||
        plcParamId: '',
 | 
			
		||||
        limitType: '',
 | 
			
		||||
@@ -84,7 +86,8 @@ export default {
 | 
			
		||||
        objectId: [{ required: true, message: '对象不能为空', trigger: 'change' }],
 | 
			
		||||
        energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }],
 | 
			
		||||
        type: [{ required: true, message: '监控模式不能为空', trigger: 'change' }]
 | 
			
		||||
      }
 | 
			
		||||
      },
 | 
			
		||||
      detailList: []
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
@@ -95,10 +98,12 @@ export default {
 | 
			
		||||
        getEnergyLimit( id ).then((res) => {
 | 
			
		||||
          if (res.code === 0) {
 | 
			
		||||
            this.form = res.data
 | 
			
		||||
            this.form.plcParamId = res.data.plcParamId || ''
 | 
			
		||||
            this.form.limitType = this.form.limitType + ''
 | 
			
		||||
            console.log(this.objList)
 | 
			
		||||
            this.objIds = this.changeDetSelect(this.form.objectId, this.objList)
 | 
			
		||||
            console.log(this.objIds)
 | 
			
		||||
            if (this.form.type === 2) {
 | 
			
		||||
              this.getDetailList()
 | 
			
		||||
            }
 | 
			
		||||
          }
 | 
			
		||||
        })
 | 
			
		||||
      } else {
 | 
			
		||||
@@ -106,8 +111,25 @@ export default {
 | 
			
		||||
        this.form.id = ''
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    typeChange() {
 | 
			
		||||
    // 监控详细参数
 | 
			
		||||
    getDetailList() {
 | 
			
		||||
      getEnergyParamList({
 | 
			
		||||
        objId: this.form.objectId,
 | 
			
		||||
        energyTypeId: this.form.energyTypeId
 | 
			
		||||
      }).then((res) => {
 | 
			
		||||
        if (res.code === 0) {
 | 
			
		||||
          this.detailList = res.data
 | 
			
		||||
        } else {
 | 
			
		||||
          this.detailList = []
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    typeChange(val) {
 | 
			
		||||
      console.log(this.form)
 | 
			
		||||
      this.form.plcParamId = ''
 | 
			
		||||
      if (val === 2) {
 | 
			
		||||
        this.getDetailList()
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 递归处理分类回显问题
 | 
			
		||||
    changeDetSelect(key, treeData) {
 | 
			
		||||
@@ -137,9 +159,16 @@ export default {
 | 
			
		||||
      this.form.objectId = val[val.length-1]
 | 
			
		||||
      this.form.objectType = val.length-1
 | 
			
		||||
    },
 | 
			
		||||
    selectDetail() {
 | 
			
		||||
      this.$forceUpdate()
 | 
			
		||||
    },
 | 
			
		||||
    submitForm() {
 | 
			
		||||
      this.$refs['form'].validate((valid) => {
 | 
			
		||||
        if (valid) {
 | 
			
		||||
          if (this.form.type === 2 && !this.form.plcParamId) {
 | 
			
		||||
            this.$modal.msgError("监控模式为详细时,详细参数为必填");
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          // this.form.limitType = Number(this.form.limitType)
 | 
			
		||||
          if (this.isEdit) {
 | 
			
		||||
            // 编辑
 | 
			
		||||
@@ -164,6 +193,8 @@ export default {
 | 
			
		||||
    },
 | 
			
		||||
    formClear() {
 | 
			
		||||
      this.$refs.form.resetFields()
 | 
			
		||||
      this.objIds = ''
 | 
			
		||||
      this.detailList = []
 | 
			
		||||
      this.isEdit = false
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 
 | 
			
		||||
@@ -231,7 +231,7 @@ export default {
 | 
			
		||||
    },
 | 
			
		||||
    /** 删除按钮操作 */
 | 
			
		||||
    handleDelete(row) {
 | 
			
		||||
      this.$modal.confirm('是否确认删除监控参数为"' + row.plcParamName + '"的数据项?').then(function() {
 | 
			
		||||
      this.$modal.confirm('是否确认删除监控对象为"' + row.objName + '"的数据项?').then(function() {
 | 
			
		||||
          return deleteEnergyLimit(row.id);
 | 
			
		||||
        }).then(() => {
 | 
			
		||||
          this.queryParams.pageNo = 1;
 | 
			
		||||
 
 | 
			
		||||
@@ -25,11 +25,10 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { energyReportPageAuto, energyReportPageExportAuto } from "@/api/monitoring/energyReport";
 | 
			
		||||
import { parseTime } from '@/utils/ruoyi'
 | 
			
		||||
import { energyReportPageAuto, energyReportPageExportAuto } from "@/api/monitoring/energyReport"
 | 
			
		||||
import { getEnergyTypeListAll } from "@/api/base/energyType";
 | 
			
		||||
// import { getTree } from '@/api/base/factory'
 | 
			
		||||
import { publicFormatter } from '@/utils/dict'
 | 
			
		||||
import { parseTime } from '@/utils/ruoyi'
 | 
			
		||||
const tableProps = [
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'statisticType',
 | 
			
		||||
@@ -70,7 +69,7 @@ const tableProps = [
 | 
			
		||||
  }
 | 
			
		||||
]
 | 
			
		||||
export default {
 | 
			
		||||
  name: "EnergyReportSearch",
 | 
			
		||||
  name: "EnergyLimit",
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      formConfig: [
 | 
			
		||||
@@ -78,7 +77,8 @@ export default {
 | 
			
		||||
          type: 'select',
 | 
			
		||||
          label: '能源类型',
 | 
			
		||||
          selectOptions: [],
 | 
			
		||||
          param: 'energyTypeId'
 | 
			
		||||
          param: 'energyTypeId',
 | 
			
		||||
          filterable: true
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: 'select',
 | 
			
		||||
@@ -93,7 +93,7 @@ export default {
 | 
			
		||||
          label: '时间',
 | 
			
		||||
          dateType: 'datetimerange',
 | 
			
		||||
          format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
          valueFormat: "yyyy-MM-ddTHH:mm:ss",
 | 
			
		||||
          valueFormat: "timestamp",
 | 
			
		||||
          rangeSeparator: '-',
 | 
			
		||||
          startPlaceholder: '开始时间',
 | 
			
		||||
          endPlaceholder: '结束时间',
 | 
			
		||||
@@ -111,7 +111,7 @@ export default {
 | 
			
		||||
          type: 'separate'
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: this.$auth.hasPermi('monitoring:energy-limit:create') ? 'button' : '',
 | 
			
		||||
          type: this.$auth.hasPermi('monitoring:energy-report:export') ? 'button' : '',
 | 
			
		||||
          btnName: '导出',
 | 
			
		||||
          name: 'add',
 | 
			
		||||
          color: 'primary',
 | 
			
		||||
@@ -129,23 +129,17 @@ export default {
 | 
			
		||||
        pageNo: 1,
 | 
			
		||||
        pageSize: 20,
 | 
			
		||||
        energyTypeId: null,
 | 
			
		||||
        statisticType: null,
 | 
			
		||||
        startTime: null,
 | 
			
		||||
        endTime: null,
 | 
			
		||||
        statisticType: null
 | 
			
		||||
      },
 | 
			
		||||
      energyTypeList: [],
 | 
			
		||||
      typeList: [
 | 
			
		||||
        {label: '合并', value: '1'},
 | 
			
		||||
        {label: '详细', value: '2'}
 | 
			
		||||
      ],
 | 
			
		||||
      objList: []
 | 
			
		||||
        endTime: null
 | 
			
		||||
      }
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
  created() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.tableH = this.tableHeight(260)
 | 
			
		||||
    })
 | 
			
		||||
    this.getList();
 | 
			
		||||
    this.getList()
 | 
			
		||||
    this.getTypeList()
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
@@ -158,33 +152,25 @@ export default {
 | 
			
		||||
    buttonClick(val) {
 | 
			
		||||
      switch (val.btnName) {
 | 
			
		||||
        case 'search':
 | 
			
		||||
          this.queryParams.pageNo = 1;
 | 
			
		||||
          this.queryParams.pageNo = 1
 | 
			
		||||
          this.queryParams.energyTypeId = val.energyTypeId
 | 
			
		||||
          this.queryParams.statisticType = val.statisticType
 | 
			
		||||
          this.queryParams.startTime = val.timeVal ? val.timeVal[0] : nul
 | 
			
		||||
          this.queryParams.endTime = val.timeVal ? val.timeVal[1] : nul
 | 
			
		||||
          this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null
 | 
			
		||||
          this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
 | 
			
		||||
          this.getList()
 | 
			
		||||
          break
 | 
			
		||||
        default:
 | 
			
		||||
          this.addOrEditTitle = '新增'
 | 
			
		||||
          this.centervisible = true
 | 
			
		||||
          this.$nextTick(() => {
 | 
			
		||||
            this.$refs.energyLimit.init()
 | 
			
		||||
          })
 | 
			
		||||
          this.$modal.confirm('是否确认导出').then(() => {
 | 
			
		||||
              return energyReportPageExportAuto({...this.queryParams});
 | 
			
		||||
            }).then(response => {
 | 
			
		||||
              this.$download.excel(response, '能源统计报表.xls');
 | 
			
		||||
            }).catch(() => {})
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    /** 查询列表 */
 | 
			
		||||
    getList() {
 | 
			
		||||
      energyReportPageAuto({...this.queryParams}).then(response => {
 | 
			
		||||
        let arr = response.data.list || [];
 | 
			
		||||
        // arr&&arr.map(item => {
 | 
			
		||||
        //   this.typeList.map(i => {
 | 
			
		||||
        //     if (item.type === i.value) {
 | 
			
		||||
        //       item.type = i.label
 | 
			
		||||
        //     }
 | 
			
		||||
        //   })
 | 
			
		||||
        // })
 | 
			
		||||
        this.list = arr
 | 
			
		||||
      energyReportPageAuto(this.queryParams).then(response => {
 | 
			
		||||
        this.list = response.data.list || [];
 | 
			
		||||
        this.total = response.data.total;
 | 
			
		||||
      });
 | 
			
		||||
    }
 | 
			
		||||
 
 | 
			
		||||
@@ -26,7 +26,7 @@
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { energyReportPage, energyReportPageExport } from "@/api/monitoring/energyReport";
 | 
			
		||||
// import { publicFormatter } from '@/utils/dict'
 | 
			
		||||
import { getEnergyTypeListAll } from "@/api/base/energyType"
 | 
			
		||||
const tableProps = [
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'statisticName',
 | 
			
		||||
@@ -59,18 +59,26 @@ export default {
 | 
			
		||||
          label: '统计方案',
 | 
			
		||||
          param: 'statisticName'
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: 'select',
 | 
			
		||||
          label: '能源类型',
 | 
			
		||||
          selectOptions: [],
 | 
			
		||||
          param: 'energyTypeId',
 | 
			
		||||
          filterable: true
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: 'datePicker',
 | 
			
		||||
          label: '时间',
 | 
			
		||||
          label: '时间(必填)',
 | 
			
		||||
          dateType: 'datetimerange',
 | 
			
		||||
          format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
          valueFormat: "yyyy-MM-ddTHH:mm:ss",
 | 
			
		||||
          valueFormat: "timestamp",
 | 
			
		||||
          rangeSeparator: '-',
 | 
			
		||||
          startPlaceholder: '开始时间',
 | 
			
		||||
          endPlaceholder: '结束时间',
 | 
			
		||||
          param: 'timeVal',
 | 
			
		||||
          defaultSelect: [],
 | 
			
		||||
          width: 350
 | 
			
		||||
          width: 350,
 | 
			
		||||
          clearable: false
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: 'button',
 | 
			
		||||
@@ -82,7 +90,7 @@ export default {
 | 
			
		||||
          type: 'separate'
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: this.$auth.hasPermi('monitoring:energy-limit:create') ? 'button' : '',
 | 
			
		||||
          type: this.$auth.hasPermi('monitoring:energy-report-search:export') ? 'button' : '',
 | 
			
		||||
          btnName: '导出',
 | 
			
		||||
          name: 'add',
 | 
			
		||||
          color: 'primary',
 | 
			
		||||
@@ -103,65 +111,49 @@ export default {
 | 
			
		||||
        startTime: null,
 | 
			
		||||
        endTime: null
 | 
			
		||||
      },
 | 
			
		||||
      energyTypeList: [],
 | 
			
		||||
      typeList: [
 | 
			
		||||
        {label: '合并', value: '1'},
 | 
			
		||||
        {label: '详细', value: '2'}
 | 
			
		||||
      ],
 | 
			
		||||
      objList: []
 | 
			
		||||
      energyTypeList: []
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
  created() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.tableH = this.tableHeight(260)
 | 
			
		||||
    })
 | 
			
		||||
    this.getList();
 | 
			
		||||
    this.formConfig[2].defaultSelect = [Date.now() - 7*24*3600000, Date.now()]
 | 
			
		||||
    this.queryParams.startTime = this.formConfig[2].defaultSelect[0]
 | 
			
		||||
    this.queryParams.endTime = this.formConfig[2].defaultSelect[1]
 | 
			
		||||
    this.getList()
 | 
			
		||||
    this.getTypeList()
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getTypeList() {
 | 
			
		||||
      getEnergyTypeListAll().then((res) => {
 | 
			
		||||
        this.formConfig[1].selectOptions = res.data || []
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    buttonClick(val) {
 | 
			
		||||
      switch (val.btnName) {
 | 
			
		||||
        case 'search':
 | 
			
		||||
          this.queryParams.pageNo = 1;
 | 
			
		||||
          this.queryParams.pageNo = 1
 | 
			
		||||
          this.queryParams.statisticName = val.statisticName
 | 
			
		||||
          this.queryParams.startTime = val.timeVal ? val.timeVal[0] : nul
 | 
			
		||||
          this.queryParams.endTime = val.timeVal ? val.timeVal[1] : nul
 | 
			
		||||
          this.queryParams.energyTypeId = val.energyTypeId
 | 
			
		||||
          this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null
 | 
			
		||||
          this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
 | 
			
		||||
          this.getList()
 | 
			
		||||
          break
 | 
			
		||||
        default:
 | 
			
		||||
          this.addOrEditTitle = '新增'
 | 
			
		||||
          this.centervisible = true
 | 
			
		||||
          this.$nextTick(() => {
 | 
			
		||||
            this.$refs.energyLimit.init()
 | 
			
		||||
          })
 | 
			
		||||
          this.$modal.confirm('是否确认导出').then(() => {
 | 
			
		||||
                return energyReportPageExport({...this.queryParams});
 | 
			
		||||
              }).then(response => {
 | 
			
		||||
                this.$download.excel(response, '能源统计查询报表.xls');
 | 
			
		||||
              }).catch(() => {})
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    /** 查询列表 */
 | 
			
		||||
    getList() {
 | 
			
		||||
      energyReportPage({...this.queryParams}).then(response => {
 | 
			
		||||
        let arr = response.data.list || [];
 | 
			
		||||
        // arr&&arr.map(item => {
 | 
			
		||||
        //   this.typeList.map(i => {
 | 
			
		||||
        //     if (item.type === i.value) {
 | 
			
		||||
        //       item.type = i.label
 | 
			
		||||
        //     }
 | 
			
		||||
        //   })
 | 
			
		||||
        // })
 | 
			
		||||
        this.list = arr
 | 
			
		||||
        this.list = response.data.list || [];
 | 
			
		||||
        this.total = response.data.total;
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    handleClick(val) {
 | 
			
		||||
      switch (val.type) {
 | 
			
		||||
        case 'edit':
 | 
			
		||||
          this.addOrEditTitle = '编辑'
 | 
			
		||||
          this.$nextTick(() => {
 | 
			
		||||
            this.$refs.energyLimit.init(val.data.id)
 | 
			
		||||
          })
 | 
			
		||||
          this.centervisible = true
 | 
			
		||||
          break
 | 
			
		||||
        default:
 | 
			
		||||
        this.handleDelete(val.data)
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
@@ -53,6 +53,10 @@ const tableProps = [
 | 
			
		||||
    prop: 'objName',
 | 
			
		||||
    label: '所属对象'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'objRemark',
 | 
			
		||||
    label: '对象备注'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'paramName',
 | 
			
		||||
    label: '参数名称'
 | 
			
		||||
 
 | 
			
		||||
@@ -40,6 +40,10 @@ const tableProps = [
 | 
			
		||||
    prop: 'objName',
 | 
			
		||||
    label: '所属对象'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'objRemark',
 | 
			
		||||
    label: '对象备注'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'paramName',
 | 
			
		||||
    label: '参数名称'
 | 
			
		||||
 
 | 
			
		||||
@@ -87,14 +87,14 @@ export default {
 | 
			
		||||
      formConfig: [
 | 
			
		||||
        {
 | 
			
		||||
          type: 'input',
 | 
			
		||||
          label: '班次名称',
 | 
			
		||||
          placeholder: '班次名称',
 | 
			
		||||
          label: '班组名称',
 | 
			
		||||
          placeholder: '班组名称',
 | 
			
		||||
          param: 'name'
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: 'input',
 | 
			
		||||
          label: '班次编码',
 | 
			
		||||
          placeholder: '班次编码',
 | 
			
		||||
          label: '班组编码',
 | 
			
		||||
          placeholder: '班组编码',
 | 
			
		||||
          param: 'code'
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
 
 | 
			
		||||
@@ -0,0 +1,147 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div>
 | 
			
		||||
    <el-drawer title="班组上下片" :visible.sync="visible" size="80%" @close='closeD'>
 | 
			
		||||
      <div class="box">
 | 
			
		||||
        <!-- 搜索工作栏 -->
 | 
			
		||||
        <search-bar
 | 
			
		||||
          :formConfigs="formConfig"
 | 
			
		||||
          ref="searchBarForm"
 | 
			
		||||
          @headBtnClick="buttonClick"
 | 
			
		||||
        />
 | 
			
		||||
        <!-- 列表 -->
 | 
			
		||||
        <base-table
 | 
			
		||||
          :page="queryParams.pageNo"
 | 
			
		||||
          :limit="queryParams.pageSize"
 | 
			
		||||
          :table-props="tableProps"
 | 
			
		||||
          :table-data="list"
 | 
			
		||||
          :max-height="tableH"
 | 
			
		||||
        />
 | 
			
		||||
        <pagination
 | 
			
		||||
          :page.sync="queryParams.pageNo"
 | 
			
		||||
          :limit.sync="queryParams.pageSize"
 | 
			
		||||
          :total="total"
 | 
			
		||||
          @pagination="getList"
 | 
			
		||||
        />
 | 
			
		||||
      </div>
 | 
			
		||||
    </el-drawer>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
const tableProps = [
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'name',
 | 
			
		||||
    label: '产线名称'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'code',
 | 
			
		||||
    label: '投入数量/片'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'code1',
 | 
			
		||||
    label: '产出数量/片'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'num2',
 | 
			
		||||
    label: '产出面积/㎡'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'num3',
 | 
			
		||||
    label: '损耗数量/片'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'num4',
 | 
			
		||||
    label: '损耗面积/㎡'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'num5',
 | 
			
		||||
    label: '损耗比例/%'
 | 
			
		||||
  }
 | 
			
		||||
]
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'GroupUpperLower',
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      visible: false,
 | 
			
		||||
      formConfig: [
 | 
			
		||||
        {
 | 
			
		||||
          type: 'select',
 | 
			
		||||
          label: '产线',
 | 
			
		||||
          selectOptions: [],
 | 
			
		||||
          param: 'xb2',
 | 
			
		||||
          width: 120,
 | 
			
		||||
          defaultSelect: 2 // 默认值
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: 'datePicker',
 | 
			
		||||
          label: '时间范围',
 | 
			
		||||
          dateType: 'daterange',
 | 
			
		||||
          format: 'yyyy-MM-dd',
 | 
			
		||||
          valueFormat: 'yyyy-MM-dd',
 | 
			
		||||
          rangeSeparator: '-',
 | 
			
		||||
          startPlaceholder: '开始时间',
 | 
			
		||||
          endPlaceholder: '结束时间',
 | 
			
		||||
          param: 'searchTime2'
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: 'button',
 | 
			
		||||
          btnName: '查询',
 | 
			
		||||
          name: 'search',
 | 
			
		||||
          color: 'primary'
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: 'separate'
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: this.$auth.hasPermi('base:group-team:create') ? 'button' : '',
 | 
			
		||||
          btnName: '导出',
 | 
			
		||||
          name: 'export',
 | 
			
		||||
          color: 'success',
 | 
			
		||||
          plain: true
 | 
			
		||||
        }
 | 
			
		||||
      ],
 | 
			
		||||
      tableProps,
 | 
			
		||||
      list: [],
 | 
			
		||||
      tableH: this.tableHeight(260),
 | 
			
		||||
      // 查询参数
 | 
			
		||||
      queryParams: {
 | 
			
		||||
        pageNo: 1,
 | 
			
		||||
        pageSize: 20
 | 
			
		||||
      },
 | 
			
		||||
      total: 0
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    init() {
 | 
			
		||||
      window.addEventListener('resize', () => {
 | 
			
		||||
        this.tableH = this.tableHeight(260)
 | 
			
		||||
      })
 | 
			
		||||
      this.visible = true
 | 
			
		||||
    },
 | 
			
		||||
    getList() {},
 | 
			
		||||
    buttonClick(val) {
 | 
			
		||||
      switch (val.btnName) {
 | 
			
		||||
        case 'search':
 | 
			
		||||
          this.queryParams.pageNo = 1
 | 
			
		||||
          this.queryParams.name = val.name
 | 
			
		||||
          this.queryParams.code = val.code
 | 
			
		||||
          this.getList()
 | 
			
		||||
          break
 | 
			
		||||
        default:
 | 
			
		||||
          this.addOrEditTitle = '新增'
 | 
			
		||||
          this.centervisible = true
 | 
			
		||||
          this.$nextTick(() => {
 | 
			
		||||
            this.$refs.groupList.init()
 | 
			
		||||
          })
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    closeD() {
 | 
			
		||||
      // this.$emit('closeDrawer')
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.box {
 | 
			
		||||
  padding: 0 32px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
@@ -1,233 +0,0 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
 | 
			
		||||
    <!-- 搜索工作栏 -->
 | 
			
		||||
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
 | 
			
		||||
      <el-form-item label="上班日期" prop="startDay">
 | 
			
		||||
        <el-input v-model="queryParams.startDay" placeholder="请输入上班日期" clearable @keyup.enter.native="handleQuery"/>
 | 
			
		||||
      </el-form-item>
 | 
			
		||||
      <el-form-item>
 | 
			
		||||
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
 | 
			
		||||
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
 | 
			
		||||
      </el-form-item>
 | 
			
		||||
    </el-form>
 | 
			
		||||
 | 
			
		||||
    <!-- 操作工具栏 -->
 | 
			
		||||
    <el-row :gutter="10" class="mb8">
 | 
			
		||||
      <el-col :span="1.5">
 | 
			
		||||
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
 | 
			
		||||
                   v-hasPermi="['base:group-team-scheduling:create']">新增</el-button>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <el-col :span="1.5">
 | 
			
		||||
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
 | 
			
		||||
                   v-hasPermi="['base:group-team-scheduling:export']">导出</el-button>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
 | 
			
		||||
    </el-row>
 | 
			
		||||
 | 
			
		||||
    <!-- 列表 -->
 | 
			
		||||
    <el-table v-loading="loading" :data="list">
 | 
			
		||||
      <el-table-column label="ID" align="center" prop="id" />
 | 
			
		||||
      <el-table-column label="班组ID" align="center" prop="teamId" />
 | 
			
		||||
      <el-table-column label="班次id" align="center" prop="classesId" />
 | 
			
		||||
      <el-table-column label="上班日期" align="center" prop="startDay" />
 | 
			
		||||
      <el-table-column label="上班时间" align="center" prop="startTime" width="180">
 | 
			
		||||
        <template v-slot="scope">
 | 
			
		||||
          <span>{{ parseTime(scope.row.startTime) }}</span>
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
      <el-table-column label="下班时间" align="center" prop="endTime" width="180">
 | 
			
		||||
        <template v-slot="scope">
 | 
			
		||||
          <span>{{ parseTime(scope.row.endTime) }}</span>
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
 | 
			
		||||
        <template v-slot="scope">
 | 
			
		||||
          <span>{{ parseTime(scope.row.createTime) }}</span>
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
 | 
			
		||||
        <template v-slot="scope">
 | 
			
		||||
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
 | 
			
		||||
                     v-hasPermi="['base:group-team-scheduling:update']">修改</el-button>
 | 
			
		||||
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
 | 
			
		||||
                     v-hasPermi="['base:group-team-scheduling:delete']">删除</el-button>
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
    </el-table>
 | 
			
		||||
    <!-- 分页组件 -->
 | 
			
		||||
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
 | 
			
		||||
                @pagination="getList"/>
 | 
			
		||||
 | 
			
		||||
    <!-- 对话框(添加 / 修改) -->
 | 
			
		||||
    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
 | 
			
		||||
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
 | 
			
		||||
        <el-form-item label="班组ID" prop="teamId">
 | 
			
		||||
          <el-input v-model="form.teamId" placeholder="请输入班组ID" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
        <el-form-item label="班次id" prop="classesId">
 | 
			
		||||
          <el-input v-model="form.classesId" placeholder="请输入班次id" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
        <el-form-item label="上班日期" prop="startDay">
 | 
			
		||||
          <el-input v-model="form.startDay" placeholder="请输入上班日期" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
        <el-form-item label="上班时间" prop="startTime">
 | 
			
		||||
          <el-date-picker clearable v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择上班时间" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
        <el-form-item label="下班时间" prop="endTime">
 | 
			
		||||
          <el-date-picker clearable v-model="form.endTime" type="date" value-format="timestamp" placeholder="选择下班时间" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-form>
 | 
			
		||||
      <div slot="footer" class="dialog-footer">
 | 
			
		||||
        <el-button type="primary" @click="submitForm">确 定</el-button>
 | 
			
		||||
        <el-button @click="cancel">取 消</el-button>
 | 
			
		||||
      </div>
 | 
			
		||||
    </el-dialog>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { createGroupTeamScheduling, updateGroupTeamScheduling, deleteGroupTeamScheduling, getGroupTeamScheduling, getGroupTeamSchedulingPage, exportGroupTeamSchedulingExcel } from "@/api/base/groupTeamScheduling";
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: "GroupTeamScheduling",
 | 
			
		||||
  components: {
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      // 遮罩层
 | 
			
		||||
      loading: true,
 | 
			
		||||
      // 导出遮罩层
 | 
			
		||||
      exportLoading: false,
 | 
			
		||||
      // 显示搜索条件
 | 
			
		||||
      showSearch: true,
 | 
			
		||||
      // 总条数
 | 
			
		||||
      total: 0,
 | 
			
		||||
      // 排班信息列表
 | 
			
		||||
      list: [],
 | 
			
		||||
      // 弹出层标题
 | 
			
		||||
      title: "",
 | 
			
		||||
      // 是否显示弹出层
 | 
			
		||||
      open: false,
 | 
			
		||||
      // 查询参数
 | 
			
		||||
      queryParams: {
 | 
			
		||||
        pageNo: 1,
 | 
			
		||||
        pageSize: 10,
 | 
			
		||||
        startDay: [],
 | 
			
		||||
      },
 | 
			
		||||
      // 表单参数
 | 
			
		||||
      form: {},
 | 
			
		||||
      // 表单校验
 | 
			
		||||
      rules: {
 | 
			
		||||
        teamId: [{ required: true, message: "班组ID不能为空", trigger: "blur" }],
 | 
			
		||||
        classesId: [{ required: true, message: "班次id不能为空", trigger: "blur" }],
 | 
			
		||||
      }
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
  created() {
 | 
			
		||||
    this.getList();
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    /** 查询列表 */
 | 
			
		||||
    getList() {
 | 
			
		||||
      this.loading = true;
 | 
			
		||||
      // 执行查询
 | 
			
		||||
      getGroupTeamSchedulingPage(this.queryParams).then(response => {
 | 
			
		||||
        this.list = response.data.list;
 | 
			
		||||
        this.total = response.data.total;
 | 
			
		||||
        this.loading = false;
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    /** 取消按钮 */
 | 
			
		||||
    cancel() {
 | 
			
		||||
      this.open = false;
 | 
			
		||||
      this.reset();
 | 
			
		||||
    },
 | 
			
		||||
    /** 表单重置 */
 | 
			
		||||
    reset() {
 | 
			
		||||
      this.form = {
 | 
			
		||||
        id: undefined,
 | 
			
		||||
        teamId: undefined,
 | 
			
		||||
        classesId: undefined,
 | 
			
		||||
        startDay: undefined,
 | 
			
		||||
        startTime: undefined,
 | 
			
		||||
        endTime: undefined,
 | 
			
		||||
      };
 | 
			
		||||
      this.resetForm("form");
 | 
			
		||||
    },
 | 
			
		||||
    /** 搜索按钮操作 */
 | 
			
		||||
    handleQuery() {
 | 
			
		||||
      this.queryParams.pageNo = 1;
 | 
			
		||||
      this.getList();
 | 
			
		||||
    },
 | 
			
		||||
    /** 重置按钮操作 */
 | 
			
		||||
    resetQuery() {
 | 
			
		||||
      this.resetForm("queryForm");
 | 
			
		||||
      this.handleQuery();
 | 
			
		||||
    },
 | 
			
		||||
    /** 新增按钮操作 */
 | 
			
		||||
    handleAdd() {
 | 
			
		||||
      this.reset();
 | 
			
		||||
      this.open = true;
 | 
			
		||||
      this.title = "添加排班信息";
 | 
			
		||||
    },
 | 
			
		||||
    /** 修改按钮操作 */
 | 
			
		||||
    handleUpdate(row) {
 | 
			
		||||
      this.reset();
 | 
			
		||||
      const id = row.id;
 | 
			
		||||
      getGroupTeamScheduling(id).then(response => {
 | 
			
		||||
        this.form = response.data;
 | 
			
		||||
        this.open = true;
 | 
			
		||||
        this.title = "修改排班信息";
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    /** 提交按钮 */
 | 
			
		||||
    submitForm() {
 | 
			
		||||
      this.$refs["form"].validate(valid => {
 | 
			
		||||
        if (!valid) {
 | 
			
		||||
          return;
 | 
			
		||||
        }
 | 
			
		||||
        // 修改的提交
 | 
			
		||||
        if (this.form.id != null) {
 | 
			
		||||
          updateGroupTeamScheduling(this.form).then(response => {
 | 
			
		||||
            this.$modal.msgSuccess("修改成功");
 | 
			
		||||
            this.open = false;
 | 
			
		||||
            this.getList();
 | 
			
		||||
          });
 | 
			
		||||
          return;
 | 
			
		||||
        }
 | 
			
		||||
        // 添加的提交
 | 
			
		||||
        createGroupTeamScheduling(this.form).then(response => {
 | 
			
		||||
          this.$modal.msgSuccess("新增成功");
 | 
			
		||||
          this.open = false;
 | 
			
		||||
          this.getList();
 | 
			
		||||
        });
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    /** 删除按钮操作 */
 | 
			
		||||
    handleDelete(row) {
 | 
			
		||||
      const id = row.id;
 | 
			
		||||
      this.$modal.confirm('是否确认删除排班信息编号为"' + id + '"的数据项?').then(function() {
 | 
			
		||||
          return deleteGroupTeamScheduling(id);
 | 
			
		||||
        }).then(() => {
 | 
			
		||||
          this.getList();
 | 
			
		||||
          this.$modal.msgSuccess("删除成功");
 | 
			
		||||
        }).catch(() => {});
 | 
			
		||||
    },
 | 
			
		||||
    /** 导出按钮操作 */
 | 
			
		||||
    handleExport() {
 | 
			
		||||
      // 处理查询参数
 | 
			
		||||
      let params = {...this.queryParams};
 | 
			
		||||
      params.pageNo = undefined;
 | 
			
		||||
      params.pageSize = undefined;
 | 
			
		||||
      this.$modal.confirm('是否确认导出所有排班信息数据项?').then(() => {
 | 
			
		||||
          this.exportLoading = true;
 | 
			
		||||
          return exportGroupTeamSchedulingExcel(params);
 | 
			
		||||
        }).then(response => {
 | 
			
		||||
          this.$download.excel(response, '排班信息.xls');
 | 
			
		||||
          this.exportLoading = false;
 | 
			
		||||
        }).catch(() => {});
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
@@ -1,232 +1,66 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
 | 
			
		||||
    <!-- 搜索工作栏 -->
 | 
			
		||||
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
 | 
			
		||||
      <el-form-item label="上班日期" prop="startDay">
 | 
			
		||||
        <el-input v-model="queryParams.startDay" placeholder="请输入上班日期" clearable @keyup.enter.native="handleQuery"/>
 | 
			
		||||
      </el-form-item>
 | 
			
		||||
      <el-form-item>
 | 
			
		||||
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
 | 
			
		||||
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
 | 
			
		||||
      </el-form-item>
 | 
			
		||||
    </el-form>
 | 
			
		||||
 | 
			
		||||
    <!-- 操作工具栏 -->
 | 
			
		||||
    <el-row :gutter="10" class="mb8">
 | 
			
		||||
      <el-col :span="1.5">
 | 
			
		||||
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
 | 
			
		||||
                   v-hasPermi="['base:group-team-scheduling:create']">新增</el-button>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <el-col :span="1.5">
 | 
			
		||||
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
 | 
			
		||||
                   v-hasPermi="['base:group-team-scheduling:export']">导出</el-button>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
 | 
			
		||||
    </el-row>
 | 
			
		||||
 | 
			
		||||
    <!-- 列表 -->
 | 
			
		||||
    <el-table v-loading="loading" :data="list">
 | 
			
		||||
      <el-table-column label="ID" align="center" prop="id" />
 | 
			
		||||
      <el-table-column label="班组ID" align="center" prop="teamId" />
 | 
			
		||||
      <el-table-column label="班次id" align="center" prop="classesId" />
 | 
			
		||||
      <el-table-column label="上班日期" align="center" prop="startDay" />
 | 
			
		||||
      <el-table-column label="上班时间" align="center" prop="startTime" width="180">
 | 
			
		||||
        <template v-slot="scope">
 | 
			
		||||
          <span>{{ parseTime(scope.row.startTime) }}</span>
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
      <el-table-column label="下班时间" align="center" prop="endTime" width="180">
 | 
			
		||||
        <template v-slot="scope">
 | 
			
		||||
          <span>{{ parseTime(scope.row.endTime) }}</span>
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
 | 
			
		||||
        <template v-slot="scope">
 | 
			
		||||
          <span>{{ parseTime(scope.row.createTime) }}</span>
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
 | 
			
		||||
        <template v-slot="scope">
 | 
			
		||||
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
 | 
			
		||||
                     v-hasPermi="['base:group-team-scheduling:update']">修改</el-button>
 | 
			
		||||
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
 | 
			
		||||
                     v-hasPermi="['base:group-team-scheduling:delete']">删除</el-button>
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
    </el-table>
 | 
			
		||||
    <!-- 分页组件 -->
 | 
			
		||||
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
 | 
			
		||||
                @pagination="getList"/>
 | 
			
		||||
 | 
			
		||||
    <!-- 对话框(添加 / 修改) -->
 | 
			
		||||
    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
 | 
			
		||||
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
 | 
			
		||||
        <el-form-item label="班组ID" prop="teamId">
 | 
			
		||||
          <el-input v-model="form.teamId" placeholder="请输入班组ID" />
 | 
			
		||||
    <div>
 | 
			
		||||
      <el-form :inline="true" class="demo-form-inline">
 | 
			
		||||
        <el-form-item label="月份选择">
 | 
			
		||||
          <el-date-picker
 | 
			
		||||
            v-model="queryParams.startDay"
 | 
			
		||||
            type="month"
 | 
			
		||||
            placeholder="选择月">
 | 
			
		||||
          </el-date-picker>
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
        <el-form-item label="班次id" prop="classesId">
 | 
			
		||||
          <el-input v-model="form.classesId" placeholder="请输入班次id" />
 | 
			
		||||
        <el-form-item>
 | 
			
		||||
          <el-button type="primary">自动排班</el-button>
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
        <el-form-item label="上班日期" prop="startDay">
 | 
			
		||||
          <el-input v-model="form.startDay" placeholder="请输入上班日期" />
 | 
			
		||||
        <el-form-item>
 | 
			
		||||
          <el-button type="primary">编辑</el-button>
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
        <el-form-item label="上班时间" prop="startTime">
 | 
			
		||||
          <el-date-picker clearable v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择上班时间" />
 | 
			
		||||
        <el-form-item>
 | 
			
		||||
          <el-button type="primary" plain @click="toUpperLower">班组上下片查询</el-button>
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
        <el-form-item label="下班时间" prop="endTime">
 | 
			
		||||
          <el-date-picker clearable v-model="form.endTime" type="date" value-format="timestamp" placeholder="选择下班时间" />
 | 
			
		||||
        <el-form-item>
 | 
			
		||||
          <el-button type="primary" plain>班组能源查询</el-button>
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
        <el-form-item>
 | 
			
		||||
          <el-button type="primary" plain>班组检测查询</el-button>
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-form>
 | 
			
		||||
      <div slot="footer" class="dialog-footer">
 | 
			
		||||
        <el-button type="primary" @click="submitForm">确 定</el-button>
 | 
			
		||||
        <el-button @click="cancel">取 消</el-button>
 | 
			
		||||
      </div>
 | 
			
		||||
    </el-dialog>
 | 
			
		||||
    </div>
 | 
			
		||||
    <!-- 班组上下片查询 -->
 | 
			
		||||
    <group-upper-lower v-if="upperLowerVisible" ref="upperLowerParam"></group-upper-lower>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { createGroupTeamScheduling, updateGroupTeamScheduling, deleteGroupTeamScheduling, getGroupTeamScheduling, getGroupTeamSchedulingPage, exportGroupTeamSchedulingExcel } from "@/api/base/groupTeamScheduling";
 | 
			
		||||
import { createGroupTeamScheduling } from "@/api/base/groupTeamScheduling";
 | 
			
		||||
import GroupUpperLower from "./components/groupUpperLower.vue"
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: "GroupTeamScheduling",
 | 
			
		||||
  components: {
 | 
			
		||||
  },
 | 
			
		||||
  components: { GroupUpperLower },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      // 遮罩层
 | 
			
		||||
      loading: true,
 | 
			
		||||
      // 导出遮罩层
 | 
			
		||||
      exportLoading: false,
 | 
			
		||||
      // 显示搜索条件
 | 
			
		||||
      showSearch: true,
 | 
			
		||||
      // 总条数
 | 
			
		||||
      total: 0,
 | 
			
		||||
      // 排班信息列表
 | 
			
		||||
      list: [],
 | 
			
		||||
      // 弹出层标题
 | 
			
		||||
      title: "",
 | 
			
		||||
      // 是否显示弹出层
 | 
			
		||||
      open: false,
 | 
			
		||||
      monthList: [
 | 
			
		||||
        {id: ''}
 | 
			
		||||
      ],
 | 
			
		||||
      // 查询参数
 | 
			
		||||
      queryParams: {
 | 
			
		||||
        pageNo: 1,
 | 
			
		||||
        pageSize: 10,
 | 
			
		||||
        startDay: [],
 | 
			
		||||
        pageSize: 10
 | 
			
		||||
      },
 | 
			
		||||
      // 表单参数
 | 
			
		||||
      form: {},
 | 
			
		||||
      // 表单校验
 | 
			
		||||
      rules: {
 | 
			
		||||
        teamId: [{ required: true, message: "班组ID不能为空", trigger: "blur" }],
 | 
			
		||||
        classesId: [{ required: true, message: "班次id不能为空", trigger: "blur" }],
 | 
			
		||||
      }
 | 
			
		||||
      upperLowerVisible: false
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
  created() {
 | 
			
		||||
    this.getList();
 | 
			
		||||
    this.getList()
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    /** 查询列表 */
 | 
			
		||||
    getList() {
 | 
			
		||||
      this.loading = true;
 | 
			
		||||
      // 执行查询
 | 
			
		||||
      getGroupTeamSchedulingPage(this.queryParams).then(response => {
 | 
			
		||||
        this.list = response.data.list;
 | 
			
		||||
        this.total = response.data.total;
 | 
			
		||||
        this.loading = false;
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    /** 取消按钮 */
 | 
			
		||||
    cancel() {
 | 
			
		||||
      this.open = false;
 | 
			
		||||
      this.reset();
 | 
			
		||||
    },
 | 
			
		||||
    /** 表单重置 */
 | 
			
		||||
    reset() {
 | 
			
		||||
      this.form = {
 | 
			
		||||
        id: undefined,
 | 
			
		||||
        teamId: undefined,
 | 
			
		||||
        classesId: undefined,
 | 
			
		||||
        startDay: undefined,
 | 
			
		||||
        startTime: undefined,
 | 
			
		||||
        endTime: undefined,
 | 
			
		||||
      };
 | 
			
		||||
      this.resetForm("form");
 | 
			
		||||
    },
 | 
			
		||||
    /** 搜索按钮操作 */
 | 
			
		||||
    handleQuery() {
 | 
			
		||||
      this.queryParams.pageNo = 1;
 | 
			
		||||
      this.getList();
 | 
			
		||||
    },
 | 
			
		||||
    /** 重置按钮操作 */
 | 
			
		||||
    resetQuery() {
 | 
			
		||||
      this.resetForm("queryForm");
 | 
			
		||||
      this.handleQuery();
 | 
			
		||||
    },
 | 
			
		||||
    /** 新增按钮操作 */
 | 
			
		||||
    handleAdd() {
 | 
			
		||||
      this.reset();
 | 
			
		||||
      this.open = true;
 | 
			
		||||
      this.title = "添加排班信息";
 | 
			
		||||
    },
 | 
			
		||||
    /** 修改按钮操作 */
 | 
			
		||||
    handleUpdate(row) {
 | 
			
		||||
      this.reset();
 | 
			
		||||
      const id = row.id;
 | 
			
		||||
      getGroupTeamScheduling(id).then(response => {
 | 
			
		||||
        this.form = response.data;
 | 
			
		||||
        this.open = true;
 | 
			
		||||
        this.title = "修改排班信息";
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    /** 提交按钮 */
 | 
			
		||||
    submitForm() {
 | 
			
		||||
      this.$refs["form"].validate(valid => {
 | 
			
		||||
        if (!valid) {
 | 
			
		||||
          return;
 | 
			
		||||
        }
 | 
			
		||||
        // 修改的提交
 | 
			
		||||
        if (this.form.id != null) {
 | 
			
		||||
          updateGroupTeamScheduling(this.form).then(response => {
 | 
			
		||||
            this.$modal.msgSuccess("修改成功");
 | 
			
		||||
            this.open = false;
 | 
			
		||||
            this.getList();
 | 
			
		||||
          });
 | 
			
		||||
          return;
 | 
			
		||||
        }
 | 
			
		||||
        // 添加的提交
 | 
			
		||||
        createGroupTeamScheduling(this.form).then(response => {
 | 
			
		||||
          this.$modal.msgSuccess("新增成功");
 | 
			
		||||
          this.open = false;
 | 
			
		||||
          this.getList();
 | 
			
		||||
        });
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    /** 删除按钮操作 */
 | 
			
		||||
    handleDelete(row) {
 | 
			
		||||
      const id = row.id;
 | 
			
		||||
      this.$modal.confirm('是否确认删除排班信息编号为"' + id + '"的数据项?').then(function() {
 | 
			
		||||
          return deleteGroupTeamScheduling(id);
 | 
			
		||||
        }).then(() => {
 | 
			
		||||
          this.getList();
 | 
			
		||||
          this.$modal.msgSuccess("删除成功");
 | 
			
		||||
        }).catch(() => {});
 | 
			
		||||
    },
 | 
			
		||||
    /** 导出按钮操作 */
 | 
			
		||||
    handleExport() {
 | 
			
		||||
      // 处理查询参数
 | 
			
		||||
      let params = {...this.queryParams};
 | 
			
		||||
      params.pageNo = undefined;
 | 
			
		||||
      params.pageSize = undefined;
 | 
			
		||||
      this.$modal.confirm('是否确认导出所有排班信息数据项?').then(() => {
 | 
			
		||||
          this.exportLoading = true;
 | 
			
		||||
          return exportGroupTeamSchedulingExcel(params);
 | 
			
		||||
        }).then(response => {
 | 
			
		||||
          this.$download.excel(response, '排班信息.xls');
 | 
			
		||||
          this.exportLoading = false;
 | 
			
		||||
        }).catch(() => {});
 | 
			
		||||
    getList() {},
 | 
			
		||||
    toUpperLower() {
 | 
			
		||||
      this.upperLowerVisible = true
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        this.$refs.upperLowerParam.init()
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user