能源分析

2023-09-05 15:45:59 +08:00
parent 01fe2da523
commit 9c59a7e715
29 changed files with 2203 additions and 100 deletions
--- a/src/views/energy/analysis/trendAnalysis/components/barChart.vue
+++ b/src/views/energy/analysis/trendAnalysis/components/barChart.vue
@@ -0,0 +1,77 @@
+<template>
+  <div 
+    id="analysischartBar"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "BarChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(214) - 70
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(214) - 70
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartBar')
+      this.chart = echarts.init(this.chartDom)
+      let xData = []
+      let yData = []
+      for (let i = 0; i < this.chartData.length; i++) {
+        xData.push(this.chartData[i].time)
+        yData.push(this.chartData[i].useNum)
+      }
+      var option = {
+        xAxis: {
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: yData,
+            type: 'bar'
+          }
+        ]
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>
--- a/src/views/energy/analysis/trendAnalysis/components/lineChart.vue
+++ b/src/views/energy/analysis/trendAnalysis/components/lineChart.vue
@@ -0,0 +1,78 @@
+<template>
+  <div 
+    id="analysischartLine"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "LineChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(214) - 70
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(214) - 70
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartLine')
+      this.chart = echarts.init(this.chartDom)
+      let xData = []
+      let yData = []
+      for (let i = 0; i < this.chartData.length; i++) {
+        xData.push(this.chartData[i].time)
+        yData.push(this.chartData[i].useNum)
+      }
+
+      var option = {
+        xAxis: {
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: yData,
+            type: 'line'
+          }
+        ]
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>
--- a/src/views/energy/analysis/trendAnalysis/components/searchArea.vue
+++ b/src/views/energy/analysis/trendAnalysis/components/searchArea.vue
@@ -0,0 +1,364 @@
+<template>
+  <el-form :inline="true" class="demo-form-inline">
+    <el-form-item label="能源类型">
+      <el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;">
+        <el-option
+          v-for="item in energyTypeList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="对象选择">
+      <el-cascader
+        v-model="objArr"
+        :options="objList"
+        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
+        popper-class="cascaderParent"
+        clearable></el-cascader>
+    </el-form-item>
+    <el-form-item label="时间维度">
+      <el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;">
+        <el-option
+          v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时间范围">
+      <div v-show="queryParams.timeDim === '1'">
+        <el-date-picker
+          v-model="timeValue"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy-MM-dd HH:mm"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          popper-class="noneMinute"
+          @change="timeSelect"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '2'">
+        <el-date-picker
+          v-model="dateValue"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          @change="timeSelect"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '3'">
+        <el-date-picker
+          v-model="weekValue1"
+          type="week"
+          format="yyyy 第 WW 周"
+          style='width:150px;'
+          :picker-options="pickerOptionsWeek"
+          @change="startWeek"
+          placeholder="选择周">
+        </el-date-picker>-
+        <el-date-picker
+          v-model="weekValue2"
+          type="week"
+          format="yyyy 第 WW 周"
+          :picker-options="pickerOptionsWeek"
+          style='width:150px;'
+          @change="endWeek"
+          placeholder="选择周">
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '4'">
+        <el-date-picker
+          v-model="monthValue"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          @change="timeSelect"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '5'">
+        <el-date-picker
+          style='width:100px;'
+          v-model="yearValue1"
+          type="year"
+          :picker-options="pickerOptions"
+          value-format="timestamp"
+          placeholder="选择年"
+          @change="startYear"
+        >
+        </el-date-picker>-
+        <el-date-picker
+          style='width:100px;'
+          v-model="yearValue2"
+          type="year"
+          :picker-options="pickerOptions"
+          value-format="timestamp"
+          placeholder="选择年"
+          @change="endYear"
+        >
+        </el-date-picker>
+      </div>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="search">查询</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getEnergyTypeListAll } from "@/api/base/energyType"
+import { getTree } from '@/api/base/factory'
+import moment from 'moment'
+export default {
+  name: 'searchArea',
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        energyTypeId: null,
+        objId: null,
+        timeDim: null,
+        startTime: null,
+        endTime: null
+      },
+      objArr: [],
+      timeValue: [],// 最大7天只能整点
+      dateValue: [],// 最大30天
+      weekValue1: null,//最多24周
+      weekValue2: null,
+      monthValue: [],//最多24月
+      yearValue1: null,//最多10年
+      yearValue2: null,
+      energyTypeList: [],
+      objList: [],
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now()
+        }
+      },
+      pickerOptionsWeek: {
+        disabledDate(time) {
+          let day = Date.now()
+          let limitTime = moment(day).day(-1)
+          return time.getTime() > new Date(limitTime).getTime()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getTypeList()
+    this.getObjTree()
+    this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
+  },
+  methods: {
+    getTypeList() {
+      getEnergyTypeListAll().then((res) => {
+        this.energyTypeList = res.data || []
+      })
+    },
+    getObjTree() {
+      getTree().then(res => {
+        this.objList = res.data || []
+      })
+    },
+    // 范围选择器
+    timeSelect() {
+      switch (this.queryParams.timeDim) {
+        case '1':
+          if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
+            this.$modal.msgError('最大时间范围为7天，请重新选择')
+            this.timeValue = []
+          }
+          break
+        case '2':
+          if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
+            this.$modal.msgError('最大时间范围为30天，请重新选择') // 自动选择默认是0:00:00要求是23:59:59
+            this.dateValue = []
+          }
+          break
+        case '4':
+          if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
+            this.$modal.msgError('最大时间范围为24个月，请重新选择')// 同理上面
+            this.monthValue = []
+          }
+          break
+          default:
+      }
+    },
+    // 年选择器
+    startYear() {
+      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
+        this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
+        this.yearValue1 = null
+        return false
+      }
+      if (this.yearValue1 && this.yearValue2) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
+          this.yearValue1 = null
+          return false
+        }
+      }
+    },
+    endYear() {
+      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
+        this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
+        this.yearValue2 = null
+        return false
+      }
+      if (this.yearValue1 && this.yearValue2) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
+          this.yearValue2 = null
+          return false
+        }
+      }
+    },
+    // 周选择器
+    startWeek() {
+      if (this.weekValue1 && this.weekValue2) {
+        let a = new Date(this.weekValue1).getTime()
+        let b = new Date(this.weekValue2).getTime()
+        if (a > b) {
+          this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
+          this.weekValue1 = null
+          return false
+        }
+        if (b - a > 167*24*3600000) {
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
+          this.weekValue1 = null
+          return false
+        }
+      }
+    },
+    endWeek() {
+      if (this.weekValue1 && this.weekValue2) {
+        let a = new Date(this.weekValue1).getTime()
+        let b = new Date(this.weekValue2).getTime()
+        if (a > b) {
+          this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
+          this.weekValue2 = null
+          return false
+        }
+        if (b - a > 167*24*3600000) {
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
+          this.weekValue2 = null
+          return false
+        }
+      }
+    },
+    // 查询
+    search() {
+      if (!this.queryParams.energyTypeId) {
+        this.$modal.msgError('请选择能源类型')
+        return false
+      }
+      if (!this.objArr.length === 0) {
+        this.$modal.msgError('请选择对象')
+        return false
+      } else {
+        this.queryParams.objId = this.objArr[this.objArr.length-1]
+      }
+      if (!this.queryParams.timeDim) {
+        this.$modal.msgError('请选择时间维度')
+        return false
+      }
+      switch (this.queryParams.timeDim) {
+        case '1':
+          if (this.timeValue.length > 0) {
+            this.queryParams.startTime = this.timeValue[0]
+            this.queryParams.endTime = this.timeValue[1] // 不用转
+          } else {
+            this.$modal.msgError('时间范围不能为空')
+            return false
+          }
+          break
+        case '2':
+          if (this.dateValue.length > 0) {
+            this.queryParams.startTime = this.dateValue[0]
+            this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
+          } else {
+            this.$modal.msgError('日范围不能为空')
+            return false
+          }
+          break
+        case '3':
+          if (this.weekValue1 && this.weekValue2) {
+            let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
+            let b = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59'
+            this.queryParams.startTime = new Date(a).getTime()
+            this.queryParams.endTime = new Date(b).getTime()
+          } else {
+            this.$modal.msgError('周范围不能为空')
+            return false
+          }
+          break
+        case '4':// 转为本月最后一天的最后一秒
+          if (this.monthValue.length > 0) {
+            this.queryParams.startTime = this.monthValue[0]
+            this.queryParams.endTime = this.transformTime(this.monthValue[1])
+          } else {
+            this.$modal.msgError('月范围不能为空')
+            return false
+          }
+          break
+        default://本年最后一天
+          if (this.yearValue1 && this.yearValue2) {
+            if (this.yearValue2 < this.yearValue1) {
+              this.$modal.msgError('结束时间不能早于开始时间')
+              return false
+            } else {
+              this.queryParams.startTime = this.yearValue1
+              this.queryParams.endTime = this.transformYear(this.yearValue2)
+            }
+          } else {
+            this.$modal.msgError('年范围不能为空')
+            return false
+          }
+      }
+      this.queryParams.startTime = this.queryParams.startTime + ''
+      this.queryParams.endTime = this.queryParams.endTime + ''
+      this.$emit('submit', this.queryParams)
+    },
+    transformTime(timeStamp) {// 本月最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let month = moment(timeStamp).format('MM')
+      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    },
+    transformYear(timeStamp) {// 本年最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let newData = year+'-12-31 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    }
+  }
+}
+</script>
+<style>
+/* 级联选择器 */
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
+/* 时间整点 */
+.noneMinute .el-time-spinner__wrapper {
+  width: 100%;
+}
+.noneMinute .el-scrollbar:nth-of-type(2) {
+  display: none;
+}
+</style>
--- a/src/views/energy/analysis/trendAnalysis/index.vue
+++ b/src/views/energy/analysis/trendAnalysis/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索工作栏 -->
+    <search-area @submit="getList"/>
+    <el-tabs v-model="activeName" @tab-click="switchChart">
+      <el-tab-pane label="柱状图" name="bar">
+        <bar-chart ref="analysisBarChart" :chartData="chartData" />
+      </el-tab-pane>
+      <el-tab-pane label="折线图" name="line">
+        <line-chart ref="analysisLineChart" :chartData="chartData"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import { getEnergyTrend } from "@/api/analysis/energyAnalysis"
+import SearchArea from "./components/searchArea"
+import BarChart from "./components/barChart"
+import LineChart from "./components/lineChart"
+// import moment from 'moment'
+export default {
+  name: 'TrendAnalysis',
+  components: { SearchArea, BarChart, LineChart },
+  data() {
+    return {
+      activeName: 'bar',
+      chartData: []
+    }
+  },
+  mounted() {},
+  methods: {
+    getList(params) {
+      getEnergyTrend({ ...params }).then((res) => {
+        if (res.code === 0) {
+          this.chartData = res.data
+        } else {
+          this.chartData = []
+        }
+      })
+      // getEnergyTrend({
+      //   energyTypeId: "1681183397517406210",
+      //   objId: "1679031282510532610",
+      //   timeDim: "2",
+      //   startTime: "1690732800000",
+      //   endTime: "1690992000000"
+      // }).then((res) => {
+      //   console.log(res)
+      //   this.chartData = res.data
+      // })
+    },
+    switchChart() {
+      if (this.activeName === 'bar') {
+        this.$nextTick((res) => {
+          this.$refs.analysisBarChart.getChart()
+        })
+      } else {
+        this.$nextTick((res) => {
+          this.$refs.analysisLineChart.getChart()
+        })
+      }
+    }
+  }
+}
+</script>