yudao-dev/src/views/energy/monitoring/orderEnergy/index.vue

<template>
  <div class="orderEnergyContainer">
    <div class="box1">
      <!-- 搜索工作栏 -->
      <search-bar
        :formConfigs="formConfig"
        ref="searchBarForm"
        @headBtnClick="buttonClick"
      />
    </div>
    <div class="box2">
      <div class="boxTitle">
        <span class="blueTitle"></span>
        <span>工单信息</span>
      </div>
      <el-row>
        <el-col :span='4'>
          <div class="blodTip">工单名称</div>
          <div class="lightTip">{{ orderMsg.name }}</div>
        </el-col>
        <el-col :span='4'>
          <div class="blodTip">产品名称</div>
          <div class="lightTip">{{orderMsg.productName }}</div>
        </el-col>
        <el-col :span='4'>
          <div class="blodTip">计划完成数量</div>
          <div class="lightTip">{{orderMsg.planQuantity }}</div>
        </el-col>
        <el-col :span='4'>
          <div class="blodTip">实际开始时间</div>
          <div class="lightTip">{{ parseTime(orderMsg.startProduceTime) }}</div>
        </el-col>
        <el-col :span='4'>
          <div class="blodTip">实际完成时间</div>
          <div class="lightTip">{{ parseTime(orderMsg.finishProduceTime) }}</div>
        </el-col>
        <el-col :span='4'>
          <div class="blodTip">实际加工数量</div>
          <div class="lightTip">{{orderMsg.actualQuantity }}</div>
        </el-col>
      </el-row>
    </div>
    <div class="box3">
      <div class="boxTitle">
        <span class="blueTitle"></span>
        <span>能耗信息</span>
      </div>
      <div class="toggleTabBox">
        <div :class="{ active: activeModule === 'dataList' }" @click="toggleTab('dataList')">数据列表</div>
        <div :class="{ active: activeModule === 'barChart' }" @click="toggleTab('barChart')">柱状图</div>
      </div>
      <div>
        <div  v-show="activeModule === 'dataList'">
          <!-- 表格 -->
          <base-table
            :page="queryParams.pageNo"
            :limit="queryParams.pageSize"
            :table-props="tableProps"
            :table-data="tableData"
            :max-height="tableH"
          />
        </div>
        <!-- 图形 -->
        <div v-show="activeModule === 'barChart'">
          <bar-chart ref="orderEnergyChart" :chartData="chartData"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const tableProps = [
  {
    prop: 'objName',
    label: '对象名称'
  },
  {
    prop: 'objCode',
    label: '对象编码'
  },
  {
    prop: 'energyType',
    label: '能源类型'
  },
  {
    prop: 'startNum',
    label: '工单开始值'
  },
  {
    prop: 'endNum',
    label: '工单结束值/当前值'
  },
  {
    prop: 'useNum',
    label: '使用量'
  }
]
import { getEnergyTypeListAll } from '@/api/base/energyType'
import { workOrderList } from '@/api/base/orderManage'
import { getWorkOrderMsg, getOrderEnergyData } from '@/api/monitoring/orderEnergy'
import BarChart from "./components/barChart"
export default {
  name: 'OrderEnergy',
  data() {
    return {
      formConfig: [
        {
          type: 'select',
          label: '工单',
          selectOptions: [],
          param: 'workOrderId',
          clearable: false
        },
        {
          type: 'select',
          label: '能源类型',
          selectOptions: [],
          param: 'energyTypeId',
          filterable: true,
          width: 120,
          clearable: false
        },
        {
          type: 'select',
          label: '对象维度',
          selectOptions: this.getDictDatas(this.DICT_TYPE.OBJECT_TYPE),
          labelField: 'label',
          valueField: 'value',
          param: 'objType',
          width: 100,
          clearable: false
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        }
      ],
      tableProps,
      tableData: [],
      tableH: this.tableHeight(400),
      // 查询参数
      queryParams: {
        workOrderId: '',
        objType: '',
        energyTypeId: ''
      },
      orderMsg: {},
      chartData: [],
      activeModule: 'dataList'
    }
  },
  components: { BarChart },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(400)
    })
    this.getListArr()
  },
  methods: {
    getListArr() {
      workOrderList().then(res => {
        this.formConfig[0].selectOptions = res.data || []
      })
      getEnergyTypeListAll().then(res => {
        this.formConfig[1].selectOptions = res.data || []
      })
    },
    buttonClick(val) {
      if (!val.workOrderId) {
        this.$modal.msgWarning('工单不能为空')
        return false
      }
      if (!val.energyTypeId) {
        this.$modal.msgWarning('能源类型不能为空')
        return false
      }
      if (!val.objType) {
        this.$modal.msgWarning('对象维度不能为空')
        return false
      }
      this.queryParams.workOrderId = val.workOrderId
      this.queryParams.objType = val.objType
      this.queryParams.energyTypeId = val.energyTypeId
      getWorkOrderMsg({ ...this.queryParams }).then(res => {
        this.orderMsg = res.data || {}
        getOrderEnergyData({
          ...this.queryParams,
          startProduceTime: res.data.startProduceTime	 || '',
          finishProduceTime: res.data.finishProduceTime || ''
        }).then(result => {
          this.tableData = result.data || []
          this.chartData = result.data || []
        })
      })
    },
    toggleTab(val) {
      this.activeModule = val
      if (this.activeModule === 'barChart') {
        this.$nextTick((res) => {
          this.$refs.orderEnergyChart.getChart()
        })
      }
    },
    headBtnClick() {}
  }
}
</script>
<style lang='scss' scoped>
.orderEnergyContainer {
  background-color: rgb(242, 244, 249);
  .box1, .box2, .box3 {
    background-color: #fff;
    border-radius: 9px;
  }
  .box1 {
    height: 64px;
    padding: 12px 16px 0;
  }
  .box2 {
    height: 122px;
    margin: 8px 0;
    padding: 16px;
    .blodTip {
      font-weight: 600;
      color: rgba(0,0,0,0.85);
      margin-bottom: 8px;
    }
    .lightTip {
      font-weight: 400;
      color: rgba(102,102,102,0.75);
    }
  }
  .box3 {
    padding: 16px;
    height: calc(100vh - 330px);
    .toggleTabBox {
      display: inline-block;
      div {
        display: inline-block;
        padding:0 8px 4px;
        color: rgba(102, 102, 102, 0.5);
        border-bottom: 2px solid rgba(242, 244, 249, 1);
        cursor: pointer;
      }
      .active {
        color: rgba(0,0,0,0.85);
        border-bottom-color: #0B58FF;
      }
    }
  }
  .boxTitle {
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    margin:0 10px 20px 0;
  }
  .blueTitle {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background-color: #0B58FF;
    border-radius: 1px;
    margin-right: 8px;
    vertical-align: bottom;
  }
}
</style>