mt-qj-wms-ui/src/views/energy/gas-acquisition.vue

<!--
 * @Author: zwq
 * @Date: 2021-11-19 10:55:33
 * @LastEditors: zwq
 * @LastEditTime: 2021-12-17 16:01:13
 * @Description:
-->
<template>
  <div class="chart-container">
    <el-row>
      <el-col :span="2">
        <div class="kiln-electric-treebox">
          <el-tree
            :data="yaoluList"
            @node-click="handleNode"
            :highlight-current="true"
          />
        </div>
      </el-col>
      <el-col :span="22">
        <el-card class="base-container" style="min-height: 540px">
          <el-row style="z-index: 10;float:right;margin-right:20px">
            <el-radio-group
              style="margin: 0 20px; position:relative; bottom: 2px"
              size="small"
              v-model="eleType"
              @change="changeEleType"
            >
              <el-radio-button label="日"></el-radio-button>
              <el-radio-button label="周"></el-radio-button>
              <el-radio-button label="月"></el-radio-button>
              <el-radio-button label="年"></el-radio-button>
            </el-radio-group>
            <el-date-picker
              size="small"
              v-model="date"
              :type="datePickerType[eleType].type"
              :format="datePickerType[eleType].format"
              :placeholder="'选择' + datePickerType[eleType].placeholder"
            />
            <el-button size="small" @click="getDataList()">
              <icon-svg class="iconClass" name="sousuo"></icon-svg>
              查询
            </el-button>
          </el-row>
          <el-col style="height: 600px">
            <el-table
              :data="dataList"
              :stripe="true"
              :header-cell-style="{
                background: '#eef1f6',
                color: '#606266',
                height: '56px'
              }"
              v-loading="dataListLoading"
              style="width: 100%;padding:20px"
            >
              <el-table-column
                type="index"
                header-align="center"
                align="center"
                label="序号"
                width="50"
              >
              </el-table-column>
              <el-table-column
                prop="createTime"
                header-align="center"
                align="center"
                label="采集时间"
              >
              </el-table-column>
              <el-table-column prop="vehicleName" label="氮气流量">
              </el-table-column>
              <el-table-column prop="code" label="甲醇流量"> </el-table-column>
              <el-table-column prop="vehicleAlias" label="丙烷流量">
              </el-table-column>
              <el-table-column prop="anqi" label="氨气流量"> </el-table-column>
            </el-table>
            <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="totalPage"
              layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 日期类型
const datePickerType = {
  日: {
    type: 'date',
    format: '',
    placeholder: '日期'
  },
  周: {
    type: 'week',
    format: 'yyyy 第 WW 周',
    placeholder: '周'
  },
  月: {
    type: 'month',
    format: '',
    placeholder: '月'
  },
  年: {
    type: 'year',
    format: '',
    placeholder: '年'
  }
}

// 窑炉列表
const yaoluList = [
  {
    id: 1,
    label: '窑炉1'
  },
  {
    id: 2,
    label: '窑炉2'
  },
  {
    id: 3,
    label: '窑炉3'
  },
  {
    id: 4,
    label: '窑炉4'
  },
  {
    id: 5,
    label: '窑炉5'
  },
  {
    id: 6,
    label: '窑炉6'
  },
  {
    id: 7,
    label: '窑炉7'
  },
  {
    id: 8,
    label: '窑炉8'
  },
  {
    id: 9,
    label: '窑炉9'
  },
  {
    id: 10,
    label: '窑炉10'
  },
  {
    id: 11,
    label: '窑炉11'
  }
]

export default {
  name: 'gas-acquisition',
  data () {
    return {
      datePickerType,
      yaoluList,
      date: new Date(),
      eleType: '年',
      showId: 0,
      yaoluIndex: 0,
      yaoluName: '',
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false
    }
  },
  mounted () {
    this.showId = this.yaoluList[0].id
    this.yaoluName = this.yaoluList[0].label
  },
  activated () {
    this.getDataList()
  },
  methods: {
      // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/vehicle/page'),
        method: 'post',
        data: this.$http.adornData({
          'current': this.pageIndex,
          'size': this.pageSize
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.data.records
          this.totalPage = data.data.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    changeEleType (v) {
      switch (v) {
        case '日':
          this.date = new Date()
          break
        case '周':
          this.date = new Date()
          break
        case '月':
          this.date = new Date()
          break
        case '年':
          this.date = new Date()
          break
      }
    },
      // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
      // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    handleNode (obj, node, e) {
      if (!obj.children) {
        this.showId = obj.id
        this.yaoluName = obj.label
      }
    }
  }
}
</script>

<style lang="scss" 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>