能源分析

2023-09-08 16:01:54 +08:00
parent 9c59a7e715
commit df0dc6bfa0
10 changed files with 317 additions and 471 deletions
--- a/src/views/energy/analysis/contrastAnalysis/components/barChart.vue
+++ b/src/views/energy/analysis/contrastAnalysis/components/barChart.vue
@@ -48,13 +48,39 @@ export default {
      }
      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++) {
-        xData.push(this.chartData[i].time)
-        yData.push(this.chartData[i].useNum)
+        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
@@ -62,12 +88,7 @@ export default {
        yAxis: {
          type: 'value'
        },
-        series: [
-          {
-            data: yData,
-            type: 'bar'
-          }
-        ]
+        series: yData
      };

      option && this.chart.setOption(option);
--- a/src/views/energy/analysis/contrastAnalysis/components/lineChart.vue
+++ b/src/views/energy/analysis/contrastAnalysis/components/lineChart.vue
@@ -48,14 +48,41 @@ export default {
      }
      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++) {
-        xData.push(this.chartData[i].time)
-        yData.push(this.chartData[i].useNum)
+        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
@@ -63,12 +90,7 @@ export default {
        yAxis: {
          type: 'value'
        },
-        series: [
-          {
-            data: yData,
-            type: 'line'
-          }
-        ]
+        series: yData
      };

      option && this.chart.setOption(option);
--- a/src/views/energy/analysis/contrastAnalysis/components/searchArea.vue
+++ b/src/views/energy/analysis/contrastAnalysis/components/searchArea.vue
@@ -33,6 +33,7 @@
          :picker-options="pickerOptions"
          popper-class="noneMinute"
          @change="timeSelect"
+          :clearable="false"
          >
        </el-date-picker>
      </div>
@@ -45,6 +46,7 @@
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
+          :clearable="false"
          @change="timeSelect"
          >
        </el-date-picker>
@@ -57,6 +59,7 @@
          style='width:150px;'
          :picker-options="pickerOptionsWeek"
          @change="startWeek"
+          :clearable="false"
          placeholder="选择周">
        </el-date-picker>-
        <el-date-picker
@@ -66,6 +69,7 @@
          :picker-options="pickerOptionsWeek"
          style='width:150px;'
          @change="endWeek"
+          :clearable="false"
          placeholder="选择周">
        </el-date-picker>
      </div>
@@ -77,6 +81,7 @@
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
+          :clearable="false"
          :picker-options="pickerOptions"
          @change="timeSelect"
          >
@@ -91,6 +96,7 @@
          value-format="timestamp"
          placeholder="选择年"
          @change="startYear"
+          :clearable="false"
        >
        </el-date-picker>-
        <el-date-picker
@@ -101,6 +107,7 @@
          value-format="timestamp"
          placeholder="选择年"
          @change="endYear"
+          :clearable="false"
        >
        </el-date-picker>
      </div>
@@ -116,12 +123,14 @@
      </el-select>
    </el-form-item>
    <el-form-item label="对象选择">
-      <el-select v-model="queryParams.objIds" placeholder="请选择" multiple style="width: 80px;">
+      <el-select v-model="queryParams.objIds" placeholder="请选择" multiple collapse-tags style="width: 200px;">
        <el-option
          v-for="item in objectList"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
+          :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>
@@ -132,6 +141,9 @@
 </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',
@@ -268,6 +280,25 @@ export default {
    // 对象维度
    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() {
@@ -332,8 +363,17 @@ export default {
            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) {// 本月最后一天
--- a/src/views/energy/analysis/contrastAnalysis/index.vue
+++ b/src/views/energy/analysis/contrastAnalysis/index.vue
@@ -4,16 +4,16 @@
    <search-area @submit="getList"/>
    <el-tabs v-model="activeName" @tab-click="switchChart">
      <el-tab-pane label="柱状图" name="bar">
-        <bar-chart ref="contrastBarChart" :chartData="chartData" />
+        <bar-chart ref="analysisBarChart" :chartData="chartData" />
      </el-tab-pane>
      <el-tab-pane label="折线图" name="line">
-        <line-chart ref="contrastLineChart" :chartData="chartData"/>
+        <line-chart ref="analysisLineChart" :chartData="chartData"/>
      </el-tab-pane>
    </el-tabs>
  </div>
 </template>
 <script>
-import { getEnergyTrend } from "@/api/analysis/energyAnalysis"
+import { getCompare } from "@/api/analysis/energyAnalysis"
 import SearchArea from "./components/searchArea"
 import BarChart from "./components/barChart"
 import LineChart from "./components/lineChart"
@@ -30,23 +30,14 @@ export default {
  mounted() {},
  methods: {
    getList(params) {
-      getEnergyTrend({ ...params }).then((res) => {
+      getCompare({ ...params }).then((res) => {
+        console.log(res)
        if (res.code === 0) {
-          this.chartData = res.data
+          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') {