update

src/views/report/components/task-ele.vue

@@ -0,0 +1,143 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-03-05 16:06:02
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-03-05 17:59:47
+ * @Description: file content
+ * @FilePath: \mt-qj-wms-ui\src\views\report\components\task-ele.vue
+-->
+<template>
+  <div class="chart-container">
+    <el-row :gutter="20">
+      <el-col :span="12" v-for="(item, index) in dataList.ele" v-if="item.length" :key="'ele' + index">
+        <el-card class="base-container" style="height: 444px; position: relative; margin: 10px 0">
+          <el-row style="position: absolute; z-index: 10; right: 20px">
+            <el-checkbox-group size="small" :min="1" v-model="chartTypeEle[index]" style="float: left">
+              <el-checkbox-button label="折线" />
+              <el-checkbox-button label="柱状" />
+            </el-checkbox-group>
+          </el-row>
+          <el-row style="height: 400px">
+            <chart height="100%" width="100%" :title="item[0].name" :id="'ele' + index" :dataList="item" :chartType="chartTypeEle[index]" />
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="12" v-for="(item, index) in dataList.gas" v-if="item.length" :key="'gas' + index">
+        <el-card class="base-container" style="height: 444px; position: relative; margin: 10px 0">
+          <el-row style="position: absolute; z-index: 10; right: 20px">
+            <el-checkbox-group size="small" :min="1" v-model="chartTypeGas[index]" style="float: left">
+              <el-checkbox-button label="折线" />
+              <el-checkbox-button label="柱状" />
+            </el-checkbox-group>
+          </el-row>
+          <el-row style="height: 400px">
+            <chart height="100%" width="100%" :title="item[0].name" :id="'gas' + index" :dataList="item" :chartType="chartTypeGas[index]" />
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="12" v-for="(item, index) in dataList.rot" v-if="item.length" :key="'rot' + index">
+        <el-card class="base-container" style="height: 444px; position: relative; margin: 10px 0">
+          <el-row style="position: absolute; z-index: 10; right: 20px">
+            <el-checkbox-group size="small" :min="1" v-model="chartTypeRot[index]" style="float: left">
+              <el-checkbox-button label="折线" />
+              <el-checkbox-button label="柱状" />
+            </el-checkbox-group>
+          </el-row>
+          <el-row style="height: 400px">
+            <chart height="100%" width="100%" :title="item[0].name" :id="'rot' + index" :dataList="item" :chartType="chartTypeRot[index]" />
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="12" v-for="(item, index) in dataList.temp" v-if="item.length" :key="'temp' + index">
+        <el-card class="base-container" style="height: 444px; position: relative; margin: 10px 0">
+          <el-row style="position: absolute; z-index: 10; right: 20px">
+            <el-checkbox-group size="small" :min="1" v-model="chartTypeTemp[index]" style="float: left">
+              <el-checkbox-button label="折线" />
+              <el-checkbox-button label="柱状" />
+            </el-checkbox-group>
+          </el-row>
+          <el-row style="height: 400px">
+            <chart height="100%" width="100%" :title="item[0].name" :id="'temp' + index" :dataList="item" :chartType="chartTypeTemp[index]" />
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Chart from '@/components/Charts/MixChart.new'
+import lineChart from '@/components/Charts/LineChart.new'
+
+export default {
+  name: 'electric',
+  components: { Chart, lineChart },
+  data () {
+    return {
+      dataList: {
+        ele: [],
+        gas: [],
+        rot: [],
+        temp: []
+      },
+      chartTypeEle: [],
+      chartTypeGas: [],
+      chartTypeRot: [],
+      chartTypeTemp: [],
+      showId: 0
+    }
+  },
+  activated () {
+    this.getEleList()
+  },
+  mounted () {},
+  methods: {
+    // 获取能源信息
+    getEleList () {
+      this.$http({
+        url: this.$http.adornUrl('/electric/energyList'),
+        method: 'post',
+        data: this.$http.adornData({
+          'taskId': this.$route.query.taskId
+        })
+      }).then(({data}) => {
+        if (data.code === 0 && data.data) {
+          console.log(JSON.parse(data.data))
+          this.dataList = JSON.parse(data.data)
+          this.dataList.ele.map(item => {
+            this.chartTypeEle.push(['柱状'])
+          })
+          this.dataList.gas.map(item => {
+            this.chartTypeGas.push(['柱状'])
+          })
+          this.dataList.rot.map(item => {
+            this.chartTypeRot.push(['柱状'])
+          })
+          this.dataList.temp.map(item => {
+            this.chartTypeTemp.push(['柱状'])
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container {
+  position: relative;
+  width: 100%;
+  min-height: calc(100vh - 138px);
+}
+</style>
+
+<style lang="scss">
+.chart-container {
+  .el-tabs__item{
+    height: 120px;
+  }
+  .el-tabs__nav-next, .el-tabs__nav-prev {
+    line-height: 120px;
+  }
+}
+</style>

src/views/report/task-history.vue

@@ -107,6 +107,16 @@
         label="车辆名称"
       >
       </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="80"
+        label="能耗情况">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="eleHandle(scope.row.id)">详情</el-button>
+        </template>
+      </el-table-column>
       <el-table-column
         fixed="right"
         header-align="center"
@@ -208,6 +218,12 @@ export default {
     },
     LocationBtn (id) {
       this.$router.push({ name: 'report-task-history-detail', query: { id } })
+    },
+    eleHandle (taskId) {
+      this.$router.push({
+        name: 'report-task-ele',
+        query: { taskId }
+      })
     }
   }
 }