mt-qj-wms-ui/src/views/report/components/task-ele.vue

<!--
 * @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>