newcpms/ui/src/views/production/monthly/index.vue

<template>
  <div class="app-container" style="overflow-x: auto;">
    <el-form :inline="true" label-width="68px">
      <el-form-item label="报告年份" prop="reportDate">
        <el-date-picker
          v-model="year"
          @change="handleQueryYear()"
          size="small"
          style="width: 200px"
          type="year"
          placeholder="选择报告年份"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
        type="warning"
        icon="el-icon-download"
        size="mini"
        v-hasPermi="['production:monthly:export']"
        >导出</el-button>
        </el-form-item>
    </el-form>
    <el-table border :data="tableCrackerRawMaterial" style="width: 100%;">
      <el-table-column label="Cracker Raw Material">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableCrackerOutputProduct" style="width: 100%;">
      <el-table-column label="Cracker Output Product">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableAromaticsRawMaterial" style="width: 100%;">
      <el-table-column label="Aromatics Raw Material">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableAromaticsOutputProduct" style="width: 100%;">
      <el-table-column label="Aromatics Output Product">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableEligibleProductRate" style="width: 100%;">
      <el-table-column label="Eligible Product rate">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableProductYield" style="width: 100%;">
      <el-table-column label="Product yield">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableCrackerUtilityConsumption" style="width: 100%;">
      <el-table-column label="Cracker Utility Consumption">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableCrackerEnergyConsumption" style="width: 100%;">
      <el-table-column label="Cracker Energy Consumption">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableAromaticsUtilityConsumption" style="width: 100%;">
      <el-table-column label="Aromatics Utility Consumption">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableAromaticsEnergyConsumption" style="width: 100%;">
      <el-table-column label="Cracker Aromatics Consumption">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tablePlantLoad" style="width: 100%;">
      <el-table-column label="Plant load">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableCostFrEthylene" style="width: 100%;">
      <el-table-column label="Cost fr Ethylene">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableRuningRate" style="width: 100%;">
      <el-table-column label="Runing Rate">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableShoudownHour" style="width: 100%;">
      <el-table-column label="Shoudown Hour">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableOtherside" style="width: 100%;">
      <el-table-column label="Otherside">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableChemicalConsume" style="width: 100%;">
      <el-table-column label="chemical consume">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableSCTUUtilityConsumption" style="width: 100%;">
      <el-table-column label="SCTU Utility Consumption">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableSUBUtilityConsumption" style="width: 100%;">
      <el-table-column label="SUB Utility Consumption">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableSCTFUtilityConsumption" style="width: 100%;">
      <el-table-column label="SCTF Utility Consumption">
        <el-table-column prop="title" label=""></el-table-column>
        <el-table-column prop="unit" label="unit"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <el-table border :data="tableKBI" style="width: 100%;">
      <el-table-column prop="kbi" label="KBI"></el-table-column>
      <el-table-column prop="target" label="target"></el-table-column>
      <el-table-column prop="currently" label="currently"></el-table-column>
      <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
      <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
      <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
      <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
      <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
      <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
      <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
      <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
      <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
      <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
      <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
      <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
      <el-table-column prop="total" label="total"></el-table-column>
    </el-table>
    <el-table border :data="tableSummary" style="width: 100%;">
      <el-table-column label="BCC装置主要原材料及公用工程消耗">
        <el-table-column prop="item" label="项目"></el-table-column>
        <el-table-column prop="usage" label="年耗量"></el-table-column>
        <el-table-column prop="currently" label="currently"></el-table-column>
        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "Monthly",
      data() {
        return {
          // 年份
          year: null,
          // 月份的固定表示
          monthList: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          tableCrackerRawMaterial: [
            {title: "Cracker Raw Material"},
            {title: "NAP"},
            {title: "C5"},
            {title: "NA"},
            {title: "Wison Ethane"},
            {title: "LPG to Furnace"},
            {title: "C4 Raff3  fr bd and 2ph"},
            {title: "C2 fr LDPE"},
            {title: "C3 fr OXO"},
            {title: "Mixed C3/C4 fr BD"},
            {title: "HC9"},
            {title: "Offgas fr AEU"},
            {title: "wash oil"},
            {title: "toluene"},
            {title: "C4 Recycle(ton)"},
            {title: "input total"},
            {title: "Total feed"},
          ],
          tableCrackerOutputProduct: [
            {title: "Cracker Output Product"},
            {title: "H2"},
            {title: "C2="},
            {title: "C3="},
            {title: "C3/C4 LPG"},
            {title: "C4'S"},
            {title: "RPG"},
            {title: "PO"},
            {title: "Naphthalene"},
            {title: "EBO"},
            {title: "Cracker Residue "},
            {title: "Methane"},
            {title: "OFFAGE"},
            {title: "output total"},
          ],
          tableAromaticsRawMaterial: [
            {title: "Aromatics Raw Material"},
            {title: "RPG fr EU"},
            {title: "H2 to PGU"},
            {title: "Mix BTX Product"},
            {title: "Mix BTX to AEU"},
            {title: "input total"},
          ],
          tableAromaticsOutputProduct: [
            {title:"Aromatics Output Product"},
            {title:"Benzene"},
            {title:"Toluene"},
            {title:"Xylene"},
            {title:"C6-C8 NA"},
            {title:"C5"},
            {title:"C9"},
            {title:"Wash oil"},
            {title:"offags"},
            {title:"MIX BTX change"},
            {title:"BTX Product"},
            {title:"Toluene Product(- EU)"},
            {title:"output total"},
          ],
          tableEligibleProductRate: [
            {title: "C2="},
            {title: "C3="},
            {title: "C4's"},
          ],
          tableProductYield: [
            {title: "gaseity"},
            {title: "tatal"},
            {title: "C3/C2"},
            {title: "H2"},
            {title: "ethylene"},
            {title: "propylene"},
            {title: "C3/C4 LPG"},
            {title: "C4'S"},
            {title: "PO"},
            {title: "Naphthalene"},
            {title: "EBO"},
            {title: "WS"},
            {title: "Methane"},
            {title: "OFFAGE"},
            {title: "RPG"},
            {title: "Benzene"},
            {title: "Toluene"},
            {title: "Xylene"},
            {title: "C6-C8 NA"},
            {title: "C5"},
            {title: "C9"},
          ],
          tableCrackerUtilityConsumption: [
            {title: "FG(include NG+Offage)"},
            {title: "SS"},
            {title: "HS"},
            {title: "MS"},
            {title: "LS"},
            {title: "Electricity"},
            {title: "coiling water"},
            {title: "Instru. Air"},
            {title: "Plant Air"},
            {title: "N2"},
            {title: "BFW"},
            {title: "Polished Condensate"},
            {title: "P. W. Water"},
            {title: "TC"},
            {title: "CNWW"},
            {title: "DWW"},
            {title: "waste oil"},
            {title: "Potable Water"},
            {title: "Production Water"},
            {title: "NG to furnace or offags to SUB"},
            {title: "offage product"},
          ],
          tableCrackerEnergyConsumption: [
            {title: "total energy"},
            {title: "total energy"},
            {title: "Energy/ethylene"},
            {title: "Energy/ethylene"},
          ],
          tableAromaticsUtilityConsumption: [
            {title: "SS"},
            {title: "HS"},
            {title: "MS"},
            {title: "LS"},
            {title: "Electricity"},
            {title: "coiling water"},
            {title: "Potable Water"},
            {title: "Production Water"},
            {title: "BFW"},
            {title: "N2"},
            {title: "PA&IA"},
            {title: "Turbine Condensate"},
            {title: "Contaminated WW"},
            {title: "Production WW"},
            {title: "DWW"},
            {title: "Waste Liquid"},
          ],
          tableAromaticsEnergyConsumption: [
            {title: "total energy"},
            {title: "total energy"},
            {title: "Energy/ethylene"},
            {title: "Energy/ethylene"},
          ],
          tablePlantLoad: [
            {title: "Cracker load"},
            {title: "C2+C3 Capacity"},
            {title: "Ethylene load"},
            {title: "Ethylene Capacity"},
            {title: "AEU load"},
            {title: "BTX Capacity"},
          ],
          tableCostFrEthylene: [
            {title: "the cost"},
          ],
          tableRuningRate: [
            {title: "run hour"},
            {title: "run rate"},
            {title: "calendar hour"},
          ],
          tableShoudownHour: [
            {title: "operation time"},
            {title: "hour"},
            {title: "equipment time"},
            {title: "hour"},
            {title: "instrument time"},
            {title: "hour"},
            {title: "electric time"},
            {title: "hour"},
            {title: "otherwise time"},
            {title: "hour"},
            {title: "total time"},
            {title: "total hour"},
          ],
          tableOtherside: [
            {title: "EU loss"},
            {title: "EU loss rate"},
            {title: "AEU loss"},
            {title: "AEU loss rate"},
            {title: "Total loss"},
            {title: "Total loss rate"},
          ],
          tableChemicalConsume: [
            {title: "Cracker and PGU"},
            {title: "PT-3000"},
            {title: "NAOH"},
            {title: "PT-4000"},
            {title: "EC3392A"},
            {title: "2W906"},
            {title: "EC1489A"},
            {title: "EC1486A"},
            {title: "20Y3483"},
            {title: "8Q202"},
            {title: "20Y97A"},
            {title: "EC3269A"},
            {title: "20Y25"},
            {title: "20Y77"},
            {title: "510WS"},
            {title: "N130"},
            {title: "H2SO4"},
            {title: "NaOH"},
            {title: "CH3OH"},
            {title: ""},
            {title: "PT-3000"},
            {title: ""},
            {title: ""},
          ],
          tableSCTUUtilityConsumption: [
            {title: "FG ( NG+Offage)"},
            {title: "MP"},
            {title: "LP"},
            {title: "Electric"},
            {title: "CW"},
            {title: "PA&IA"},
            {title: "SUB"},
          ],
          tableSUBUtilityConsumption: [
            {title: "Electric"},
            {title: "NG"},
            {title: "FG fr EU"},
            {title: "LPG"},
            {title: "HHP Steam"},
            {title: "MP Steam"},
            {title: "LP Steam"},
            {title: "P. Condensate"},
            {title: "CW"},
            {title: "N2"},
            {title: "IA&PA"},
            {title: "HPPA"},
            {title: "Production Water"},
            {title: "HP Steam fr SuB-net"},
            {title: "BFW"},
            {title: "EO/EG purge gas"},
            {title: "H2 fr Syngas as fule"},
            {title: "HP product"},
            {title: "SUB1# FG FIC1302"},
            {title: "SUB2#FG  FIC2302"},
            {title: "total NG FC3702"},
            {title: "COST(output)"},
            {title: "总费用"},
            {title: "锅炉净产量"},
            {title: "产汽"},
            {title: "输出"},
          ],
          tableSCTFUtilityConsumption: [
            {title: "Electric"},
            {title: "NG"},
            {title: "FG fr EU"},
            {title: "LPG"},
            {title: "HHP Steam"},
            {title: "MP Steam"},
            {title: "LP Steam"},
            {title: "P. Condensate"},
            {title: "CW"},
            {title: "N2"},
            {title: "IA&PA"},
            {title: "HPPA"},
            {title: "Production Water"},
            {title: "HP Steam fr SuB-net"},
            {title: "BFW"},
            {title: "Contaminated WW"},
            {title: "Production WW"},
          ],
          tableKBI: [
            {kbi: "Plant capacity utilization rate"},
            {kbi: "Energy Consumption"},
            {kbi: "Product of Ethylene and Propylene and C4's base FEED"},
            {kbi: "C2+C3 Production"},
            {kbi: "C2+C3 target"},
            {kbi: "C2+C3 target"},
            {kbi: "C2 target"},
            {kbi: "C2 target"},
            {kbi: "LTI"},
            {kbi: "Yields of Ethylene and propylene base on furnace feeds"},
            {kbi: "Yields of Ethylene  base on furnace feeds"},
            {kbi: "AEU Energy Consumption"},
            {kbi: "BTX Production"},
            {kbi: "BTX target"},
            {kbi: "BTX target"},
          ],
          tableSummary: [
            {item: "乙丙产量"},
            {item: "石脑油"},
            {item: "C5 raff"},
            {item: "乙烷"},
            {item: "加氢碳九"},
            {item: "乙烯焦油"},
            {item: "混合C4"},
            {item: "三苯"},
            {item: "裂解碳五"},
            {item: "裂解碳九"},
            {item: "重整石脑油"},
            {item: "蒸汽综合"},
            {item: "冷却水"},
            {item: "电"},
            {item: "燃料气"},
            {item: "精制水"},
            {item: "透平凝液"},
            {item: "乙丙收率"},
            {item: "石脑油"},
            {item: "C5 raff"},
            {item: "乙烷"},
            {item: "加氢碳九"},
            {item: "乙烯焦油"},
            {item: "混合C4"},
            {item: "三苯"},
            {item: "裂解碳五"},
            {item: "裂解碳九"},
            {item: "非芳"},
            {item: "蒸汽综合"},
            {item: "冷却水"},
            {item: "电"},
            {item: "燃料气"},
            {item: "精制水"},
            {item: "透平凝液"},
          ],
        }
      },
      created() {
        this.year = new Date();
        this.getMonthlyReport();
      },
    methods: {
      /** 设置表头 */
      setTableTitle() {
        let monthListTemp = [];
        for (let i = 0; i < this.monthList.length; i++) {
          // 拼接后的格式：月份-年份，如Feb-2022
          monthListTemp.push(this.monthList[i] + "-" + this.year.getFullYear());
        }
        this.monthList = monthListTemp;
      },
      /** 处理年份控件change事件 */
      handleQueryYear() {
        this.getMonthlyReport();
      },
      /** 获取月度报告 */
      getMonthlyReport() {
        this.setTableTitle();
        console.log(this.year.getFullYear());
      },
    }
   }
</script>

<style scoped>

</style>