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
          clearable
          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-item>
        <el-button
          type="primary"
          icon="el-icon-download"
          size="mini"
          v-hasPermi="['production:monthly:edit']"
        >开工锅炉公用工程单价维护</el-button>
      </el-form-item>
    </el-form>
    <!-- Cracker Raw Material -->
    <el-table border :data="tableCrackerRawMaterial" style="width: 100%;">
      <el-table-column label="Cracker Raw Material">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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>
    <!-- Cracker Output Product -->
    <el-table border :data="tableCrackerOutputProduct" style="width: 100%;">
      <el-table-column label="Cracker Output Product">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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>
    <!-- Aromatics Raw Material -->
    <el-table border :data="tableAromaticsRawMaterial" style="width: 100%;">
      <el-table-column label="Aromatics Raw Material">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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>
    <!-- Aromatics Output Product -->
    <el-table border :data="tableAromaticsOutputProduct" style="width: 100%;">
      <el-table-column label="Aromatics Output Product">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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>
    <!-- Eligible Product Rate -->
    <div class="editDiv">
      <el-button
        :disabled="eligibleProductRateUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleEligibleProductRateUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Eligible Product Rate') }}</el-button>
      <el-button
        :disabled="!eligibleProductRateUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmEligibleProductRateUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!eligibleProductRateUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelEligibleProductRateUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableEligibleProductRate" style="width: 100%;">
      <el-table-column label="Eligible Product rate">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="{row}">
            <div @click="columnOnclick(row)">{{row.title}}</div>
          </template>
        </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]">
          <template slot-scope="{row}">
            <div v-if="!eligibleProductRateUpdating">{{row.jan}}</div>
            <div v-if="eligibleProductRateUpdating">
              <el-input v-model="row.jan" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]">
          <template slot-scope="{row}">
            <div v-if="!eligibleProductRateUpdating">{{row.feb}}</div>
            <div v-if="eligibleProductRateUpdating">
              <el-input v-model="row.feb" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]">
          <template slot-scope="{row}">
            <div v-if="!eligibleProductRateUpdating">{{row.mar}}</div>
            <div v-if="eligibleProductRateUpdating">
              <el-input v-model="row.mar" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]">
          <template slot-scope="{row}">
            <div v-if="!eligibleProductRateUpdating">{{row.apr}}</div>
            <div v-if="eligibleProductRateUpdating">
              <el-input v-model="row.apr" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]">
          <template slot-scope="{row}">
            <div v-if="!eligibleProductRateUpdating">{{row.may}}</div>
            <div v-if="eligibleProductRateUpdating">
              <el-input v-model="row.may" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]">
          <template slot-scope="{row}">
            <div v-if="!eligibleProductRateUpdating">{{row.jun}}</div>
            <div v-if="eligibleProductRateUpdating">
              <el-input v-model="row.jun" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]">
          <template slot-scope="{row}">
            <div v-if="!eligibleProductRateUpdating">{{row.jul}}</div>
            <div v-if="eligibleProductRateUpdating">
              <el-input v-model="row.jul" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]">
          <template slot-scope="{row}">
            <div v-if="!eligibleProductRateUpdating">{{row.aug}}</div>
            <div v-if="eligibleProductRateUpdating">
              <el-input v-model="row.aug" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]">
          <template slot-scope="{row}">
            <div v-if="!eligibleProductRateUpdating">{{row.sep}}</div>
            <div v-if="eligibleProductRateUpdating">
              <el-input v-model="row.sep" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]">
          <template slot-scope="{row}">
            <div v-if="!eligibleProductRateUpdating">{{row.oct}}</div>
            <div v-if="eligibleProductRateUpdating">
              <el-input v-model="row.oct" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]">
          <template slot-scope="{row}">
            <div v-if="!eligibleProductRateUpdating">{{row.nov}}</div>
            <div v-if="eligibleProductRateUpdating">
              <el-input v-model="row.nov" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]">
          <template slot-scope="{row}">
            <div v-if="!eligibleProductRateUpdating">{{row.dec}}</div>
            <div v-if="eligibleProductRateUpdating">
              <el-input v-model="row.dec" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="avg" label="avg"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- Product Yield -->
    <el-table border :data="tableProductYield" style="width: 100%;">
      <el-table-column label="Product yield">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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="avg" label="avg"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- Cracker Utility Consumption -->
    <div class="editDiv">
      <el-button
        :disabled="crackerUtilityConsumptionUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleCrackerUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Cracker Utility Consumption') }}</el-button>
      <el-button
        :disabled="!crackerUtilityConsumptionUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmCrackerUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!crackerUtilityConsumptionUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelCrackerUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableCrackerUtilityConsumption" style="width: 100%;">
      <el-table-column label="Cracker Utility Consumption">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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]">
          <template slot-scope="{row}">
            <div v-if="!crackerUtilityConsumptionUpdating">{{row.jan}}</div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title == 'Instru. Air' ||
                row.title == 'P. W. Water' ||
                row.title == 'CNWW' ||
                row.title == 'DWW' ||
                row.title == 'waste oil' ||
                row.title == 'Potable Water' ||
                row.title == 'NG to furnace or offags to SUB'
              )
            ">
              <el-input v-model="row.jan" clearable="true"></el-input>
            </div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title != 'Instru. Air' &&
                row.title != 'P. W. Water' &&
                row.title != 'CNWW' &&
                row.title != 'DWW' &&
                row.title != 'waste oil' &&
                row.title != 'Potable Water' &&
                row.title != 'NG to furnace or offags to SUB'
              )
            ">
              {{row.jan}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]">
          <template slot-scope="{row}">
            <div v-if="!crackerUtilityConsumptionUpdating">{{row.feb}}</div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title == 'Instru. Air' ||
                row.title == 'P. W. Water' ||
                row.title == 'CNWW' ||
                row.title == 'DWW' ||
                row.title == 'waste oil' ||
                row.title == 'Potable Water' ||
                row.title == 'NG to furnace or offags to SUB'
              )
            ">
              <el-input v-model="row.feb" clearable="true"></el-input>
            </div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title != 'Instru. Air' &&
                row.title != 'P. W. Water' &&
                row.title != 'CNWW' &&
                row.title != 'DWW' &&
                row.title != 'waste oil' &&
                row.title != 'Potable Water' &&
                row.title != 'NG to furnace or offags to SUB'
              )
            ">
              {{row.feb}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]">
          <template slot-scope="{row}">
            <div v-if="!crackerUtilityConsumptionUpdating">{{row.mar}}</div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title == 'Instru. Air' ||
                row.title == 'P. W. Water' ||
                row.title == 'CNWW' ||
                row.title == 'DWW' ||
                row.title == 'waste oil' ||
                row.title == 'Potable Water' ||
                row.title == 'NG to furnace or offags to SUB'
              )
            ">
              <el-input v-model="row.mar" clearable="true"></el-input>
            </div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title != 'Instru. Air' &&
                row.title != 'P. W. Water' &&
                row.title != 'CNWW' &&
                row.title != 'DWW' &&
                row.title != 'waste oil' &&
                row.title != 'Potable Water' &&
                row.title != 'NG to furnace or offags to SUB'
              )
            ">
              {{row.mar}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]">
          <template slot-scope="{row}">
            <div v-if="!crackerUtilityConsumptionUpdating">{{row.apr}}</div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title == 'Instru. Air' ||
                row.title == 'P. W. Water' ||
                row.title == 'CNWW' ||
                row.title == 'DWW' ||
                row.title == 'waste oil' ||
                row.title == 'Potable Water' ||
                row.title == 'NG to furnace or offags to SUB'
              )
            ">
              <el-input v-model="row.apr" clearable="true"></el-input>
            </div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title != 'Instru. Air' &&
                row.title != 'P. W. Water' &&
                row.title != 'CNWW' &&
                row.title != 'DWW' &&
                row.title != 'waste oil' &&
                row.title != 'Potable Water' &&
                row.title != 'NG to furnace or offags to SUB'
              )
            ">
              {{row.apr}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]">
          <template slot-scope="{row}">
            <div v-if="!crackerUtilityConsumptionUpdating">{{row.may}}</div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title == 'Instru. Air' ||
                row.title == 'P. W. Water' ||
                row.title == 'CNWW' ||
                row.title == 'DWW' ||
                row.title == 'waste oil' ||
                row.title == 'Potable Water' ||
                row.title == 'NG to furnace or offags to SUB'
              )
            ">
              <el-input v-model="row.may" clearable="true"></el-input>
            </div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title != 'Instru. Air' &&
                row.title != 'P. W. Water' &&
                row.title != 'CNWW' &&
                row.title != 'DWW' &&
                row.title != 'waste oil' &&
                row.title != 'Potable Water' &&
                row.title != 'NG to furnace or offags to SUB'
              )
            ">
              {{row.may}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]">
          <template slot-scope="{row}">
            <div v-if="!crackerUtilityConsumptionUpdating">{{row.jun}}</div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title == 'Instru. Air' ||
                row.title == 'P. W. Water' ||
                row.title == 'CNWW' ||
                row.title == 'DWW' ||
                row.title == 'waste oil' ||
                row.title == 'Potable Water' ||
                row.title == 'NG to furnace or offags to SUB'
              )
            ">
              <el-input v-model="row.jun" clearable="true"></el-input>
            </div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title != 'Instru. Air' &&
                row.title != 'P. W. Water' &&
                row.title != 'CNWW' &&
                row.title != 'DWW' &&
                row.title != 'waste oil' &&
                row.title != 'Potable Water' &&
                row.title != 'NG to furnace or offags to SUB'
              )
            ">
              {{row.jun}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]">
          <template slot-scope="{row}">
            <div v-if="!crackerUtilityConsumptionUpdating">{{row.jul}}</div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title == 'Instru. Air' ||
                row.title == 'P. W. Water' ||
                row.title == 'CNWW' ||
                row.title == 'DWW' ||
                row.title == 'waste oil' ||
                row.title == 'Potable Water' ||
                row.title == 'NG to furnace or offags to SUB'
              )
            ">
              <el-input v-model="row.jul" clearable="true"></el-input>
            </div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title != 'Instru. Air' &&
                row.title != 'P. W. Water' &&
                row.title != 'CNWW' &&
                row.title != 'DWW' &&
                row.title != 'waste oil' &&
                row.title != 'Potable Water' &&
                row.title != 'NG to furnace or offags to SUB'
              )
            ">
              {{row.jul}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]">
          <template slot-scope="{row}">
            <div v-if="!crackerUtilityConsumptionUpdating">{{row.aug}}</div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title == 'Instru. Air' ||
                row.title == 'P. W. Water' ||
                row.title == 'CNWW' ||
                row.title == 'DWW' ||
                row.title == 'waste oil' ||
                row.title == 'Potable Water' ||
                row.title == 'NG to furnace or offags to SUB'
              )
            ">
              <el-input v-model="row.aug" clearable="true"></el-input>
            </div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title != 'Instru. Air' &&
                row.title != 'P. W. Water' &&
                row.title != 'CNWW' &&
                row.title != 'DWW' &&
                row.title != 'waste oil' &&
                row.title != 'Potable Water' &&
                row.title != 'NG to furnace or offags to SUB'
              )
            ">
              {{row.aug}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]">
          <template slot-scope="{row}">
            <div v-if="!crackerUtilityConsumptionUpdating">{{row.sep}}</div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title == 'Instru. Air' ||
                row.title == 'P. W. Water' ||
                row.title == 'CNWW' ||
                row.title == 'DWW' ||
                row.title == 'waste oil' ||
                row.title == 'Potable Water' ||
                row.title == 'NG to furnace or offags to SUB'
              )
            ">
              <el-input v-model="row.sep" clearable="true"></el-input>
            </div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title != 'Instru. Air' &&
                row.title != 'P. W. Water' &&
                row.title != 'CNWW' &&
                row.title != 'DWW' &&
                row.title != 'waste oil' &&
                row.title != 'Potable Water' &&
                row.title != 'NG to furnace or offags to SUB'
              )
            ">
              {{row.sep}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]">
          <template slot-scope="{row}">
            <div v-if="!crackerUtilityConsumptionUpdating">{{row.oct}}</div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title == 'Instru. Air' ||
                row.title == 'P. W. Water' ||
                row.title == 'CNWW' ||
                row.title == 'DWW' ||
                row.title == 'waste oil' ||
                row.title == 'Potable Water' ||
                row.title == 'NG to furnace or offags to SUB'
              )
            ">
              <el-input v-model="row.oct" clearable="true"></el-input>
            </div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title != 'Instru. Air' &&
                row.title != 'P. W. Water' &&
                row.title != 'CNWW' &&
                row.title != 'DWW' &&
                row.title != 'waste oil' &&
                row.title != 'Potable Water' &&
                row.title != 'NG to furnace or offags to SUB'
              )
            ">
              {{row.oct}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]">
          <template slot-scope="{row}">
            <div v-if="!crackerUtilityConsumptionUpdating">{{row.nov}}</div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title == 'Instru. Air' ||
                row.title == 'P. W. Water' ||
                row.title == 'CNWW' ||
                row.title == 'DWW' ||
                row.title == 'waste oil' ||
                row.title == 'Potable Water' ||
                row.title == 'NG to furnace or offags to SUB'
              )
            ">
              <el-input v-model="row.nov" clearable="true"></el-input>
            </div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title != 'Instru. Air' &&
                row.title != 'P. W. Water' &&
                row.title != 'CNWW' &&
                row.title != 'DWW' &&
                row.title != 'waste oil' &&
                row.title != 'Potable Water' &&
                row.title != 'NG to furnace or offags to SUB'
              )
            ">
              {{row.nov}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]">
          <template slot-scope="{row}">
            <div v-if="!crackerUtilityConsumptionUpdating">{{row.dec}}</div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title == 'Instru. Air' ||
                row.title == 'P. W. Water' ||
                row.title == 'CNWW' ||
                row.title == 'DWW' ||
                row.title == 'waste oil' ||
                row.title == 'Potable Water' ||
                row.title == 'NG to furnace or offags to SUB'
              )
            ">
              <el-input v-model="row.dec" clearable="true"></el-input>
            </div>
            <div v-if="crackerUtilityConsumptionUpdating &&
              (
                row.title != 'Instru. Air' &&
                row.title != 'P. W. Water' &&
                row.title != 'CNWW' &&
                row.title != 'DWW' &&
                row.title != 'waste oil' &&
                row.title != 'Potable Water' &&
                row.title != 'NG to furnace or offags to SUB'
              )
            ">
              {{row.dec}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- Cracker Energy Consumption -->
    <el-table border :data="tableCrackerEnergyConsumption" style="width: 100%;">
      <el-table-column label="Cracker Energy Consumption">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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 prop="avg" label="avg"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- Aromatics Utility Consumption -->
    <div class="editDiv">
      <el-button
        :disabled="aromaticsUtilityConsumptionUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleAromaticsUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Aromatics Utility Consumption') }}</el-button>
      <el-button
        :disabled="!aromaticsUtilityConsumptionUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmAromaticsUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!aromaticsUtilityConsumptionUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelAromaticsUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableAromaticsUtilityConsumption" style="width: 100%;">
      <el-table-column label="Aromatics Utility Consumption">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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]">
          <template slot-scope="{row}">
            <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.jan}}</div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title == 'Potable Water' ||
                row.title == 'Contaminated WW' ||
                row.title == 'Production WW' ||
                row.title == 'DWW' ||
                row.title == 'Waste Liquid'
              )
            ">
              <el-input v-model="row.jan" clearable="true"></el-input>
            </div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title != 'Potable Water' &&
                row.title != 'Contaminated WW' &&
                row.title != 'Production WW' &&
                row.title != 'DWW' &&
                row.title != 'Waste Liquid'
              )
            ">
              {{row.jan}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]">
          <template slot-scope="{row}">
            <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.feb}}</div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title == 'Potable Water' ||
                row.title == 'Contaminated WW' ||
                row.title == 'Production WW' ||
                row.title == 'DWW' ||
                row.title == 'Waste Liquid'
              )
            ">
              <el-input v-model="row.feb" clearable="true"></el-input>
            </div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title != 'Potable Water' &&
                row.title != 'Contaminated WW' &&
                row.title != 'Production WW' &&
                row.title != 'DWW' &&
                row.title != 'Waste Liquid'
              )
            ">
              {{row.feb}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]">
          <template slot-scope="{row}">
            <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.mar}}</div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title == 'Potable Water' ||
                row.title == 'Contaminated WW' ||
                row.title == 'Production WW' ||
                row.title == 'DWW' ||
                row.title == 'Waste Liquid'
              )
            ">
              <el-input v-model="row.mar" clearable="true"></el-input>
            </div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title != 'Potable Water' &&
                row.title != 'Contaminated WW' &&
                row.title != 'Production WW' &&
                row.title != 'DWW' &&
                row.title != 'Waste Liquid'
              )
            ">
              {{row.mar}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]">
          <template slot-scope="{row}">
            <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.apr}}</div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title == 'Potable Water' ||
                row.title == 'Contaminated WW' ||
                row.title == 'Production WW' ||
                row.title == 'DWW' ||
                row.title == 'Waste Liquid'
              )
            ">
              <el-input v-model="row.apr" clearable="true"></el-input>
            </div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title != 'Potable Water' &&
                row.title != 'Contaminated WW' &&
                row.title != 'Production WW' &&
                row.title != 'DWW' &&
                row.title != 'Waste Liquid'
              )
            ">
              {{row.apr}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]">
          <template slot-scope="{row}">
            <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.may}}</div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title == 'Potable Water' ||
                row.title == 'Contaminated WW' ||
                row.title == 'Production WW' ||
                row.title == 'DWW' ||
                row.title == 'Waste Liquid'
              )
            ">
              <el-input v-model="row.may" clearable="true"></el-input>
            </div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title != 'Potable Water' &&
                row.title != 'Contaminated WW' &&
                row.title != 'Production WW' &&
                row.title != 'DWW' &&
                row.title != 'Waste Liquid'
              )
            ">
              {{row.may}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]">
          <template slot-scope="{row}">
            <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.jun}}</div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title == 'Potable Water' ||
                row.title == 'Contaminated WW' ||
                row.title == 'Production WW' ||
                row.title == 'DWW' ||
                row.title == 'Waste Liquid'
              )
            ">
              <el-input v-model="row.jun" clearable="true"></el-input>
            </div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title != 'Potable Water' &&
                row.title != 'Contaminated WW' &&
                row.title != 'Production WW' &&
                row.title != 'DWW' &&
                row.title != 'Waste Liquid'
              )
            ">
              {{row.jun}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]">
          <template slot-scope="{row}">
            <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.jul}}</div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title == 'Potable Water' ||
                row.title == 'Contaminated WW' ||
                row.title == 'Production WW' ||
                row.title == 'DWW' ||
                row.title == 'Waste Liquid'
              )
            ">
              <el-input v-model="row.jul" clearable="true"></el-input>
            </div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title != 'Potable Water' &&
                row.title != 'Contaminated WW' &&
                row.title != 'Production WW' &&
                row.title != 'DWW' &&
                row.title != 'Waste Liquid'
              )
            ">
              {{row.jul}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]">
          <template slot-scope="{row}">
            <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.aug}}</div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title == 'Potable Water' ||
                row.title == 'Contaminated WW' ||
                row.title == 'Production WW' ||
                row.title == 'DWW' ||
                row.title == 'Waste Liquid'
              )
            ">
              <el-input v-model="row.aug" clearable="true"></el-input>
            </div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title != 'Potable Water' &&
                row.title != 'Contaminated WW' &&
                row.title != 'Production WW' &&
                row.title != 'DWW' &&
                row.title != 'Waste Liquid'
              )
            ">
              {{row.aug}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]">
          <template slot-scope="{row}">
            <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.sep}}</div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title == 'Potable Water' ||
                row.title == 'Contaminated WW' ||
                row.title == 'Production WW' ||
                row.title == 'DWW' ||
                row.title == 'Waste Liquid'
              )
            ">
              <el-input v-model="row.sep" clearable="true"></el-input>
            </div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title != 'Potable Water' &&
                row.title != 'Contaminated WW' &&
                row.title != 'Production WW' &&
                row.title != 'DWW' &&
                row.title != 'Waste Liquid'
              )
            ">
              {{row.sep}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]">
          <template slot-scope="{row}">
            <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.oct}}</div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title == 'Potable Water' ||
                row.title == 'Contaminated WW' ||
                row.title == 'Production WW' ||
                row.title == 'DWW' ||
                row.title == 'Waste Liquid'
              )
            ">
              <el-input v-model="row.oct" clearable="true"></el-input>
            </div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title != 'Potable Water' &&
                row.title != 'Contaminated WW' &&
                row.title != 'Production WW' &&
                row.title != 'DWW' &&
                row.title != 'Waste Liquid'
              )
            ">
              {{row.oct}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]">
          <template slot-scope="{row}">
            <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.nov}}</div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title == 'Potable Water' ||
                row.title == 'Contaminated WW' ||
                row.title == 'Production WW' ||
                row.title == 'DWW' ||
                row.title == 'Waste Liquid'
              )
            ">
              <el-input v-model="row.nov" clearable="true"></el-input>
            </div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title != 'Potable Water' &&
                row.title != 'Contaminated WW' &&
                row.title != 'Production WW' &&
                row.title != 'DWW' &&
                row.title != 'Waste Liquid'
              )
            ">
              {{row.nov}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]">
          <template slot-scope="{row}">
            <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.dec}}</div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title == 'Potable Water' ||
                row.title == 'Contaminated WW' ||
                row.title == 'Production WW' ||
                row.title == 'DWW' ||
                row.title == 'Waste Liquid'
              )
            ">
              <el-input v-model="row.dec" clearable="true"></el-input>
            </div>
            <div v-if="aromaticsUtilityConsumptionUpdating &&
              (
                row.title != 'Potable Water' &&
                row.title != 'Contaminated WW' &&
                row.title != 'Production WW' &&
                row.title != 'DWW' &&
                row.title != 'Waste Liquid'
              )
            ">
              {{row.dec}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- Aromatics Energy Consumption -->
    <el-table border :data="tableAromaticsEnergyConsumption" style="width: 100%;">
      <el-table-column label="Cracker Aromatics Consumption">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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 prop="avg" label="avg"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- Plant Load -->
    <el-table border :data="tablePlantLoad" style="width: 100%;">
      <el-table-column label="Plant load">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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 prop="avg" label="avg"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- Cost Fr Ethylene -->
    <div class="editDiv">
      <el-button
        :disabled="costFrEthyleneUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleCostFrEthyleneUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Cost Fr Ethylene') }}</el-button>
      <el-button
        :disabled="!costFrEthyleneUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmCostFrEthyleneUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!costFrEthyleneUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelCostFrEthyleneUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableCostFrEthylene" style="width: 100%;">
      <el-table-column label="Cost fr Ethylene">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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]">
          <template slot-scope="{row}">
            <div v-if="!costFrEthyleneUpdating">{{row.jan}}</div>
            <div v-if="costFrEthyleneUpdating">
              <el-input v-model="row.jan" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]">
          <template slot-scope="{row}">
            <div v-if="!costFrEthyleneUpdating">{{row.feb}}</div>
            <div v-if="costFrEthyleneUpdating">
              <el-input v-model="row.feb" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]">
          <template slot-scope="{row}">
            <div v-if="!costFrEthyleneUpdating">{{row.mar}}</div>
            <div v-if="costFrEthyleneUpdating">
              <el-input v-model="row.mar" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]">
          <template slot-scope="{row}">
            <div v-if="!costFrEthyleneUpdating">{{row.apr}}</div>
            <div v-if="costFrEthyleneUpdating">
              <el-input v-model="row.apr" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]">
          <template slot-scope="{row}">
            <div v-if="!costFrEthyleneUpdating">{{row.may}}</div>
            <div v-if="costFrEthyleneUpdating">
              <el-input v-model="row.may" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]">
          <template slot-scope="{row}">
            <div v-if="!costFrEthyleneUpdating">{{row.jun}}</div>
            <div v-if="costFrEthyleneUpdating">
              <el-input v-model="row.jun" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]">
          <template slot-scope="{row}">
            <div v-if="!costFrEthyleneUpdating">{{row.jul}}</div>
            <div v-if="costFrEthyleneUpdating">
              <el-input v-model="row.jul" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]">
          <template slot-scope="{row}">
            <div v-if="!costFrEthyleneUpdating">{{row.aug}}</div>
            <div v-if="costFrEthyleneUpdating">
              <el-input v-model="row.aug" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]">
          <template slot-scope="{row}">
            <div v-if="!costFrEthyleneUpdating">{{row.sep}}</div>
            <div v-if="costFrEthyleneUpdating">
              <el-input v-model="row.sep" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]">
          <template slot-scope="{row}">
            <div v-if="!costFrEthyleneUpdating">{{row.oct}}</div>
            <div v-if="costFrEthyleneUpdating">
              <el-input v-model="row.oct" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]">
          <template slot-scope="{row}">
            <div v-if="!costFrEthyleneUpdating">{{row.nov}}</div>
            <div v-if="costFrEthyleneUpdating">
              <el-input v-model="row.nov" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]">
          <template slot-scope="{row}">
            <div v-if="!costFrEthyleneUpdating">{{row.dec}}</div>
            <div v-if="costFrEthyleneUpdating">
              <el-input v-model="row.dec" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- Runing Rate -->
    <div class="editDiv">
      <el-button
        :disabled="runingRateUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleRuningRateUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Runing Rate') }}</el-button>
      <el-button
        :disabled="!runingRateUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmRuningRateUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!runingRateUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelRuningRateUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableRuningRate" style="width: 100%;">
      <el-table-column label="Runing Rate">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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]">
          <template slot-scope="{row}">
            <div v-if="!runingRateUpdating">{{row.jan}}</div>
            <div v-if="runingRateUpdating && row.title == 'run day'">
              <el-input v-model="row.jan" clearable="true"></el-input>
            </div>
            <div v-if="runingRateUpdating && row.title != 'run day'">
              {{row.jan}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]">
          <template slot-scope="{row}">
            <div v-if="!runingRateUpdating">{{row.feb}}</div>
            <div v-if="runingRateUpdating && row.title == 'run day'">
              <el-input v-model="row.feb" clearable="true"></el-input>
            </div>
            <div v-if="runingRateUpdating && row.title != 'run day'">
              {{row.feb}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]">
          <template slot-scope="{row}">
            <div v-if="!runingRateUpdating">{{row.mar}}</div>
            <div v-if="runingRateUpdating && row.title == 'run day'">
              <el-input v-model="row.mar" clearable="true"></el-input>
            </div>
            <div v-if="runingRateUpdating && row.title != 'run day'">
              {{row.mar}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]">
          <template slot-scope="{row}">
            <div v-if="!runingRateUpdating">{{row.apr}}</div>
            <div v-if="runingRateUpdating && row.title == 'run day'">
              <el-input v-model="row.apr" clearable="true"></el-input>
            </div>
            <div v-if="runingRateUpdating && row.title != 'run day'">
              {{row.apr}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]">
          <template slot-scope="{row}">
            <div v-if="!runingRateUpdating">{{row.may}}</div>
            <div v-if="runingRateUpdating && row.title == 'run day'">
              <el-input v-model="row.may" clearable="true"></el-input>
            </div>
            <div v-if="runingRateUpdating && row.title != 'run day'">
              {{row.may}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]">
          <template slot-scope="{row}">
            <div v-if="!runingRateUpdating">{{row.jun}}</div>
            <div v-if="runingRateUpdating && row.title == 'run day'">
              <el-input v-model="row.jun" clearable="true"></el-input>
            </div>
            <div v-if="runingRateUpdating && row.title != 'run day'">
              {{row.jun}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]">
          <template slot-scope="{row}">
            <div v-if="!runingRateUpdating">{{row.jul}}</div>
            <div v-if="runingRateUpdating && row.title == 'run day'">
              <el-input v-model="row.jul" clearable="true"></el-input>
            </div>
            <div v-if="runingRateUpdating && row.title != 'run day'">
              {{row.jul}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]">
          <template slot-scope="{row}">
            <div v-if="!runingRateUpdating">{{row.aug}}</div>
            <div v-if="runingRateUpdating && row.title == 'run day'">
              <el-input v-model="row.aug" clearable="true"></el-input>
            </div>
            <div v-if="runingRateUpdating && row.title != 'run day'">
              {{row.aug}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]">
          <template slot-scope="{row}">
            <div v-if="!runingRateUpdating">{{row.sep}}</div>
            <div v-if="runingRateUpdating && row.title == 'run day'">
              <el-input v-model="row.sep" clearable="true"></el-input>
            </div>
            <div v-if="runingRateUpdating && row.title != 'run day'">
              {{row.sep}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]">
          <template slot-scope="{row}">
            <div v-if="!runingRateUpdating">{{row.oct}}</div>
            <div v-if="runingRateUpdating && row.title == 'run day'">
              <el-input v-model="row.oct" clearable="true"></el-input>
            </div>
            <div v-if="runingRateUpdating && row.title != 'run day'">
              {{row.oct}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]">
          <template slot-scope="{row}">
            <div v-if="!runingRateUpdating">{{row.nov}}</div>
            <div v-if="runingRateUpdating && row.title == 'run day'">
              <el-input v-model="row.nov" clearable="true"></el-input>
            </div>
            <div v-if="runingRateUpdating && row.title != 'run day'">
              {{row.nov}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]">
          <template slot-scope="{row}">
            <div v-if="!runingRateUpdating">{{row.dec}}</div>
            <div v-if="runingRateUpdating && row.title == 'run day'">
              <el-input v-model="row.dec" clearable="true"></el-input>
            </div>
            <div v-if="runingRateUpdating && row.title != 'run day'">
              {{row.dec}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
        <el-table-column prop="avg" label="avg"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- Shoudown Hour -->
    <div class="editDiv">
      <el-button
        :disabled="shoudownHourUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleShoudownHourUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Shoudown Hour') }}</el-button>
      <el-button
        :disabled="!shoudownHourUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmShoudownHourUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!shoudownHourUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelShoudownHourUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableShoudownHour" style="width: 100%;">
      <el-table-column label="Shoudown Hour">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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]">
          <template slot-scope="{row}">
            <div v-if="!shoudownHourUpdating">{{row.jan}}</div>
            <div v-if="shoudownHourUpdating && (row.title != 'total time' && row.title != 'total hour')">
              <el-input v-model="row.jan" clearable="true"></el-input>
            </div>
            <div v-if="shoudownHourUpdating && (row.title == 'total time' || row.title == 'total hour')">
              {{row.jan}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]">
          <template slot-scope="{row}">
            <div v-if="!shoudownHourUpdating">{{row.feb}}</div>
            <div v-if="shoudownHourUpdating && (row.title != 'total time' && row.title != 'total hour')">
              <el-input v-model="row.feb" clearable="true"></el-input>
            </div>
            <div v-if="shoudownHourUpdating && (row.title == 'total time' || row.title == 'total hour')">
              {{row.feb}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]">
          <template slot-scope="{row}">
            <div v-if="!shoudownHourUpdating">{{row.mar}}</div>
            <div v-if="shoudownHourUpdating && (row.title != 'total time' && row.title != 'total hour')">
              <el-input v-model="row.mar" clearable="true"></el-input>
            </div>
            <div v-if="shoudownHourUpdating && (row.title == 'total time' || row.title == 'total hour')">
              {{row.mar}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]">
          <template slot-scope="{row}">
            <div v-if="!shoudownHourUpdating">{{row.apr}}</div>
            <div v-if="shoudownHourUpdating && (row.title != 'total time' && row.title != 'total hour')">
              <el-input v-model="row.apr" clearable="true"></el-input>
            </div>
            <div v-if="shoudownHourUpdating && (row.title == 'total time' || row.title == 'total hour')">
              {{row.apr}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]">
          <template slot-scope="{row}">
            <div v-if="!shoudownHourUpdating">{{row.may}}</div>
            <div v-if="shoudownHourUpdating && (row.title != 'total time' && row.title != 'total hour')">
              <el-input v-model="row.may" clearable="true"></el-input>
            </div>
            <div v-if="shoudownHourUpdating && (row.title == 'total time' || row.title == 'total hour')">
              {{row.may}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]">
          <template slot-scope="{row}">
            <div v-if="!shoudownHourUpdating">{{row.jun}}</div>
            <div v-if="shoudownHourUpdating && (row.title != 'total time' && row.title != 'total hour')">
              <el-input v-model="row.jun" clearable="true"></el-input>
            </div>
            <div v-if="shoudownHourUpdating && (row.title == 'total time' || row.title == 'total hour')">
              {{row.jun}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]">
          <template slot-scope="{row}">
            <div v-if="!shoudownHourUpdating">{{row.jul}}</div>
            <div v-if="shoudownHourUpdating && (row.title != 'total time' && row.title != 'total hour')">
              <el-input v-model="row.jul" clearable="true"></el-input>
            </div>
            <div v-if="shoudownHourUpdating && (row.title == 'total time' || row.title == 'total hour')">
              {{row.jul}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]">
          <template slot-scope="{row}">
            <div v-if="!shoudownHourUpdating">{{row.aug}}</div>
            <div v-if="shoudownHourUpdating && (row.title != 'total time' && row.title != 'total hour')">
              <el-input v-model="row.aug" clearable="true"></el-input>
            </div>
            <div v-if="shoudownHourUpdating && (row.title == 'total time' || row.title == 'total hour')">
              {{row.aug}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]">
          <template slot-scope="{row}">
            <div v-if="!shoudownHourUpdating">{{row.sep}}</div>
            <div v-if="shoudownHourUpdating && (row.title != 'total time' && row.title != 'total hour')">
              <el-input v-model="row.sep" clearable="true"></el-input>
            </div>
            <div v-if="shoudownHourUpdating && (row.title == 'total time' || row.title == 'total hour')">
              {{row.sep}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]">
          <template slot-scope="{row}">
            <div v-if="!shoudownHourUpdating">{{row.oct}}</div>
            <div v-if="shoudownHourUpdating && (row.title != 'total time' && row.title != 'total hour')">
              <el-input v-model="row.oct" clearable="true"></el-input>
            </div>
            <div v-if="shoudownHourUpdating && (row.title == 'total time' || row.title == 'total hour')">
              {{row.oct}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]">
          <template slot-scope="{row}">
            <div v-if="!shoudownHourUpdating">{{row.nov}}</div>
            <div v-if="shoudownHourUpdating && (row.title != 'total time' && row.title != 'total hour')">
              <el-input v-model="row.nov" clearable="true"></el-input>
            </div>
            <div v-if="shoudownHourUpdating && (row.title == 'total time' || row.title == 'total hour')">
              {{row.nov}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]">
          <template slot-scope="{row}">
            <div v-if="!shoudownHourUpdating">{{row.dec}}</div>
            <div v-if="shoudownHourUpdating && (row.title != 'total time' && row.title != 'total hour')">
              <el-input v-model="row.dec" clearable="true"></el-input>
            </div>
            <div v-if="shoudownHourUpdating && (row.title == 'total time' || row.title == 'total hour')">
              {{row.dec}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- Otherside -->
    <el-table border :data="tableOtherside" style="width: 100%;">
      <el-table-column label="Otherside">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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 prop="avg" label="avg"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- Chemical Consume -->
    <div class="editDiv">
      <el-button
        :disabled="chemicalConsumeUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleChemicalConsumeUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Chemical Consume') }}</el-button>
      <el-button
        :disabled="!chemicalConsumeUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmChemicalConsumeUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!chemicalConsumeUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelChemicalConsumeUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableChemicalConsume" style="width: 100%;">
      <el-table-column label="chemical consume">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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]">
          <template slot-scope="{row}">
            <div v-if="!chemicalConsumeUpdating">{{row.jan}}</div>
            <div v-if="chemicalConsumeUpdating">
              <el-input v-model="row.jan" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]">
          <template slot-scope="{row}">
            <div v-if="!chemicalConsumeUpdating">{{row.feb}}</div>
            <div v-if="chemicalConsumeUpdating">
              <el-input v-model="row.feb" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]">
          <template slot-scope="{row}">
            <div v-if="!chemicalConsumeUpdating">{{row.mar}}</div>
            <div v-if="chemicalConsumeUpdating">
              <el-input v-model="row.mar" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]">
          <template slot-scope="{row}">
            <div v-if="!chemicalConsumeUpdating">{{row.apr}}</div>
            <div v-if="chemicalConsumeUpdating">
              <el-input v-model="row.apr" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]">
          <template slot-scope="{row}">
            <div v-if="!chemicalConsumeUpdating">{{row.may}}</div>
            <div v-if="chemicalConsumeUpdating">
              <el-input v-model="row.may" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]">
          <template slot-scope="{row}">
            <div v-if="!chemicalConsumeUpdating">{{row.jun}}</div>
            <div v-if="chemicalConsumeUpdating">
              <el-input v-model="row.jun" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]">
          <template slot-scope="{row}">
            <div v-if="!chemicalConsumeUpdating">{{row.jul}}</div>
            <div v-if="chemicalConsumeUpdating">
              <el-input v-model="row.jul" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]">
          <template slot-scope="{row}">
            <div v-if="!chemicalConsumeUpdating">{{row.aug}}</div>
            <div v-if="chemicalConsumeUpdating">
              <el-input v-model="row.aug" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]">
          <template slot-scope="{row}">
            <div v-if="!chemicalConsumeUpdating">{{row.sep}}</div>
            <div v-if="chemicalConsumeUpdating">
              <el-input v-model="row.sep" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]">
          <template slot-scope="{row}">
            <div v-if="!chemicalConsumeUpdating">{{row.oct}}</div>
            <div v-if="chemicalConsumeUpdating">
              <el-input v-model="row.oct" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]">
          <template slot-scope="{row}">
            <div v-if="!chemicalConsumeUpdating">{{row.nov}}</div>
            <div v-if="chemicalConsumeUpdating">
              <el-input v-model="row.nov" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]">
          <template slot-scope="{row}">
            <div v-if="!chemicalConsumeUpdating">{{row.dec}}</div>
            <div v-if="chemicalConsumeUpdating">
              <el-input v-model="row.dec" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- SCTU Utility Consumption -->
    <el-table border :data="tableSCTUUtilityConsumption" style="width: 100%;">
      <el-table-column label="SCTU Utility Consumption">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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>
    <!-- SUB Utility Consumption -->
    <div class="editDiv">
      <el-button
        :disabled="subUtilityConsumptionUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleSubUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑SUB Utility Consumption') }}</el-button>
      <el-button
        :disabled="!subUtilityConsumptionUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmSubUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!subUtilityConsumptionUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelSUBUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableSUBUtilityConsumption" style="width: 100%;">
      <el-table-column label="SUB Utility Consumption">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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]">
          <template slot-scope="{row}">
            <div v-if="!subUtilityConsumptionUpdating">{{row.jan}}</div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title == 'LPG' ||
                row.title == 'HPPA' ||
                row.title == 'HP Steam fr SuB-net' ||
                row.title == 'EO/EG purge gas' ||
                row.title == 'H2 fr Syngas as fule' ||
                row.title == 'HP product' ||
                row.title == 'SUB1# FG FIC1302' ||
                row.title == 'SUB2# FG FIC2302'
              )
            ">
              <el-input v-model="row.jan" clearable="true"></el-input>
            </div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title != 'LPG' &&
                row.title != 'HPPA' &&
                row.title != 'HP Steam fr SuB-net' &&
                row.title != 'EO/EG purge gas' &&
                row.title != 'H2 fr Syngas as fule' &&
                row.title != 'HP product' &&
                row.title != 'SUB1# FG FIC1302' &&
                row.title != 'SUB2# FG FIC2302'
              )
            ">
              {{row.jan}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]">
          <template slot-scope="{row}">
            <div v-if="!subUtilityConsumptionUpdating">{{row.feb}}</div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title == 'LPG' ||
                row.title == 'HPPA' ||
                row.title == 'HP Steam fr SuB-net' ||
                row.title == 'EO/EG purge gas' ||
                row.title == 'H2 fr Syngas as fule' ||
                row.title == 'HP product' ||
                row.title == 'SUB1# FG FIC1302' ||
                row.title == 'SUB2# FG FIC2302'
              )
            ">
              <el-input v-model="row.feb" clearable="true"></el-input>
            </div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title != 'LPG' &&
                row.title != 'HPPA' &&
                row.title != 'HP Steam fr SuB-net' &&
                row.title != 'EO/EG purge gas' &&
                row.title != 'H2 fr Syngas as fule' &&
                row.title != 'HP product' &&
                row.title != 'SUB1# FG FIC1302' &&
                row.title != 'SUB2# FG FIC2302'
              )
            ">
              {{row.feb}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]">
          <template slot-scope="{row}">
            <div v-if="!subUtilityConsumptionUpdating">{{row.mar}}</div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title == 'LPG' ||
                row.title == 'HPPA' ||
                row.title == 'HP Steam fr SuB-net' ||
                row.title == 'EO/EG purge gas' ||
                row.title == 'H2 fr Syngas as fule' ||
                row.title == 'HP product' ||
                row.title == 'SUB1# FG FIC1302' ||
                row.title == 'SUB2# FG FIC2302'
              )
            ">
              <el-input v-model="row.mar" clearable="true"></el-input>
            </div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title != 'LPG' &&
                row.title != 'HPPA' &&
                row.title != 'HP Steam fr SuB-net' &&
                row.title != 'EO/EG purge gas' &&
                row.title != 'H2 fr Syngas as fule' &&
                row.title != 'HP product' &&
                row.title != 'SUB1# FG FIC1302' &&
                row.title != 'SUB2# FG FIC2302'
              )
            ">
              {{row.mar}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]">
          <template slot-scope="{row}">
            <div v-if="!subUtilityConsumptionUpdating">{{row.apr}}</div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title == 'LPG' ||
                row.title == 'HPPA' ||
                row.title == 'HP Steam fr SuB-net' ||
                row.title == 'EO/EG purge gas' ||
                row.title == 'H2 fr Syngas as fule' ||
                row.title == 'HP product' ||
                row.title == 'SUB1# FG FIC1302' ||
                row.title == 'SUB2# FG FIC2302'
              )
            ">
              <el-input v-model="row.apr" clearable="true"></el-input>
            </div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title != 'LPG' &&
                row.title != 'HPPA' &&
                row.title != 'HP Steam fr SuB-net' &&
                row.title != 'EO/EG purge gas' &&
                row.title != 'H2 fr Syngas as fule' &&
                row.title != 'HP product' &&
                row.title != 'SUB1# FG FIC1302' &&
                row.title != 'SUB2# FG FIC2302'
              )
            ">
              {{row.apr}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]">
          <template slot-scope="{row}">
            <div v-if="!subUtilityConsumptionUpdating">{{row.may}}</div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title == 'LPG' ||
                row.title == 'HPPA' ||
                row.title == 'HP Steam fr SuB-net' ||
                row.title == 'EO/EG purge gas' ||
                row.title == 'H2 fr Syngas as fule' ||
                row.title == 'HP product' ||
                row.title == 'SUB1# FG FIC1302' ||
                row.title == 'SUB2# FG FIC2302'
              )
            ">
              <el-input v-model="row.may" clearable="true"></el-input>
            </div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title != 'LPG' &&
                row.title != 'HPPA' &&
                row.title != 'HP Steam fr SuB-net' &&
                row.title != 'EO/EG purge gas' &&
                row.title != 'H2 fr Syngas as fule' &&
                row.title != 'HP product' &&
                row.title != 'SUB1# FG FIC1302' &&
                row.title != 'SUB2# FG FIC2302'
              )
            ">
              {{row.may}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]">
          <template slot-scope="{row}">
            <div v-if="!subUtilityConsumptionUpdating">{{row.jun}}</div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title == 'LPG' ||
                row.title == 'HPPA' ||
                row.title == 'HP Steam fr SuB-net' ||
                row.title == 'EO/EG purge gas' ||
                row.title == 'H2 fr Syngas as fule' ||
                row.title == 'HP product' ||
                row.title == 'SUB1# FG FIC1302' ||
                row.title == 'SUB2# FG FIC2302'
              )
            ">
              <el-input v-model="row.jun" clearable="true"></el-input>
            </div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title != 'LPG' &&
                row.title != 'HPPA' &&
                row.title != 'HP Steam fr SuB-net' &&
                row.title != 'EO/EG purge gas' &&
                row.title != 'H2 fr Syngas as fule' &&
                row.title != 'HP product' &&
                row.title != 'SUB1# FG FIC1302' &&
                row.title != 'SUB2# FG FIC2302'
              )
            ">
              {{row.jun}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]">
          <template slot-scope="{row}">
            <div v-if="!subUtilityConsumptionUpdating">{{row.jul}}</div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title == 'LPG' ||
                row.title == 'HPPA' ||
                row.title == 'HP Steam fr SuB-net' ||
                row.title == 'EO/EG purge gas' ||
                row.title == 'H2 fr Syngas as fule' ||
                row.title == 'HP product' ||
                row.title == 'SUB1# FG FIC1302' ||
                row.title == 'SUB2# FG FIC2302'
              )
            ">
              <el-input v-model="row.jul" clearable="true"></el-input>
            </div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title != 'LPG' &&
                row.title != 'HPPA' &&
                row.title != 'HP Steam fr SuB-net' &&
                row.title != 'EO/EG purge gas' &&
                row.title != 'H2 fr Syngas as fule' &&
                row.title != 'HP product' &&
                row.title != 'SUB1# FG FIC1302' &&
                row.title != 'SUB2# FG FIC2302'
              )
            ">
              {{row.jul}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]">
          <template slot-scope="{row}">
            <div v-if="!subUtilityConsumptionUpdating">{{row.aug}}</div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title == 'LPG' ||
                row.title == 'HPPA' ||
                row.title == 'HP Steam fr SuB-net' ||
                row.title == 'EO/EG purge gas' ||
                row.title == 'H2 fr Syngas as fule' ||
                row.title == 'HP product' ||
                row.title == 'SUB1# FG FIC1302' ||
                row.title == 'SUB2# FG FIC2302'
              )
            ">
              <el-input v-model="row.aug" clearable="true"></el-input>
            </div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title != 'LPG' &&
                row.title != 'HPPA' &&
                row.title != 'HP Steam fr SuB-net' &&
                row.title != 'EO/EG purge gas' &&
                row.title != 'H2 fr Syngas as fule' &&
                row.title != 'HP product' &&
                row.title != 'SUB1# FG FIC1302' &&
                row.title != 'SUB2# FG FIC2302'
              )
            ">
              {{row.aug}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]">
          <template slot-scope="{row}">
            <div v-if="!subUtilityConsumptionUpdating">{{row.sep}}</div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title == 'LPG' ||
                row.title == 'HPPA' ||
                row.title == 'HP Steam fr SuB-net' ||
                row.title == 'EO/EG purge gas' ||
                row.title == 'H2 fr Syngas as fule' ||
                row.title == 'HP product' ||
                row.title == 'SUB1# FG FIC1302' ||
                row.title == 'SUB2# FG FIC2302'
              )
            ">
              <el-input v-model="row.sep" clearable="true"></el-input>
            </div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title != 'LPG' &&
                row.title != 'HPPA' &&
                row.title != 'HP Steam fr SuB-net' &&
                row.title != 'EO/EG purge gas' &&
                row.title != 'H2 fr Syngas as fule' &&
                row.title != 'HP product' &&
                row.title != 'SUB1# FG FIC1302' &&
                row.title != 'SUB2# FG FIC2302'
              )
            ">
              {{row.sep}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]">
          <template slot-scope="{row}">
            <div v-if="!subUtilityConsumptionUpdating">{{row.oct}}</div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title == 'LPG' ||
                row.title == 'HPPA' ||
                row.title == 'HP Steam fr SuB-net' ||
                row.title == 'EO/EG purge gas' ||
                row.title == 'H2 fr Syngas as fule' ||
                row.title == 'HP product' ||
                row.title == 'SUB1# FG FIC1302' ||
                row.title == 'SUB2# FG FIC2302'
              )
            ">
              <el-input v-model="row.oct" clearable="true"></el-input>
            </div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title != 'LPG' &&
                row.title != 'HPPA' &&
                row.title != 'HP Steam fr SuB-net' &&
                row.title != 'EO/EG purge gas' &&
                row.title != 'H2 fr Syngas as fule' &&
                row.title != 'HP product' &&
                row.title != 'SUB1# FG FIC1302' &&
                row.title != 'SUB2# FG FIC2302'
              )
            ">
              {{row.oct}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]">
          <template slot-scope="{row}">
            <div v-if="!subUtilityConsumptionUpdating">{{row.nov}}</div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title == 'LPG' ||
                row.title == 'HPPA' ||
                row.title == 'HP Steam fr SuB-net' ||
                row.title == 'EO/EG purge gas' ||
                row.title == 'H2 fr Syngas as fule' ||
                row.title == 'HP product' ||
                row.title == 'SUB1# FG FIC1302' ||
                row.title == 'SUB2# FG FIC2302'
              )
            ">
              <el-input v-model="row.nov" clearable="true"></el-input>
            </div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title != 'LPG' &&
                row.title != 'HPPA' &&
                row.title != 'HP Steam fr SuB-net' &&
                row.title != 'EO/EG purge gas' &&
                row.title != 'H2 fr Syngas as fule' &&
                row.title != 'HP product' &&
                row.title != 'SUB1# FG FIC1302' &&
                row.title != 'SUB2# FG FIC2302'
              )
            ">
              {{row.nov}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]">
          <template slot-scope="{row}">
            <div v-if="!subUtilityConsumptionUpdating">{{row.dec}}</div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title == 'LPG' ||
                row.title == 'HPPA' ||
                row.title == 'HP Steam fr SuB-net' ||
                row.title == 'EO/EG purge gas' ||
                row.title == 'H2 fr Syngas as fule' ||
                row.title == 'HP product' ||
                row.title == 'SUB1# FG FIC1302' ||
                row.title == 'SUB2# FG FIC2302'
              )
            ">
              <el-input v-model="row.dec" clearable="true"></el-input>
            </div>
            <div v-if="subUtilityConsumptionUpdating &&
              (
                row.title != 'LPG' &&
                row.title != 'HPPA' &&
                row.title != 'HP Steam fr SuB-net' &&
                row.title != 'EO/EG purge gas' &&
                row.title != 'H2 fr Syngas as fule' &&
                row.title != 'HP product' &&
                row.title != 'SUB1# FG FIC1302' &&
                row.title != 'SUB2# FG FIC2302'
              )
            ">
              {{row.dec}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- SCTF Utility Consumption -->
    <div class="editDiv">
      <el-button
        :disabled="sctfUtilityConsumptionUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleSctfUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑SCTF Utility Consumption') }}</el-button>
      <el-button
        :disabled="!sctfUtilityConsumptionUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmSctfUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!sctfUtilityConsumptionUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelSCTFUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableSCTFUtilityConsumption" style="width: 100%;">
      <el-table-column label="SCTF Utility Consumption">
        <el-table-column width="150" prop="title" label="">
          <template slot-scope="scope">
            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
          </template>
        </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]">
          <template slot-scope="{row}">
            <div v-if="!sctfUtilityConsumptionUpdating">{{row.jan}}</div>
            <div v-if="sctfUtilityConsumptionUpdating">
              <el-input v-model="row.jan" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="feb" :label="this.monthList[1]">
          <template slot-scope="{row}">
            <div v-if="!sctfUtilityConsumptionUpdating">{{row.feb}}</div>
            <div v-if="sctfUtilityConsumptionUpdating">
              <el-input v-model="row.feb" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mar" :label="this.monthList[2]">
          <template slot-scope="{row}">
            <div v-if="!sctfUtilityConsumptionUpdating">{{row.mar}}</div>
            <div v-if="sctfUtilityConsumptionUpdating">
              <el-input v-model="row.mar" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="apr" :label="this.monthList[3]">
          <template slot-scope="{row}">
            <div v-if="!sctfUtilityConsumptionUpdating">{{row.apr}}</div>
            <div v-if="sctfUtilityConsumptionUpdating">
              <el-input v-model="row.apr" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="may" :label="this.monthList[4]">
          <template slot-scope="{row}">
            <div v-if="!sctfUtilityConsumptionUpdating">{{row.may}}</div>
            <div v-if="sctfUtilityConsumptionUpdating">
              <el-input v-model="row.may" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jun" :label="this.monthList[5]">
          <template slot-scope="{row}">
            <div v-if="!sctfUtilityConsumptionUpdating">{{row.jun}}</div>
            <div v-if="sctfUtilityConsumptionUpdating">
              <el-input v-model="row.jun" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jul" :label="this.monthList[6]">
          <template slot-scope="{row}">
            <div v-if="!sctfUtilityConsumptionUpdating">{{row.jul}}</div>
            <div v-if="sctfUtilityConsumptionUpdating">
              <el-input v-model="row.jul" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="aug" :label="this.monthList[7]">
          <template slot-scope="{row}">
            <div v-if="!sctfUtilityConsumptionUpdating">{{row.aug}}</div>
            <div v-if="sctfUtilityConsumptionUpdating">
              <el-input v-model="row.aug" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sep" :label="this.monthList[8]">
          <template slot-scope="{row}">
            <div v-if="!sctfUtilityConsumptionUpdating">{{row.sep}}</div>
            <div v-if="sctfUtilityConsumptionUpdating">
              <el-input v-model="row.sep" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="oct" :label="this.monthList[9]">
          <template slot-scope="{row}">
            <div v-if="!sctfUtilityConsumptionUpdating">{{row.oct}}</div>
            <div v-if="sctfUtilityConsumptionUpdating">
              <el-input v-model="row.oct" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nov" :label="this.monthList[10]">
          <template slot-scope="{row}">
            <div v-if="!sctfUtilityConsumptionUpdating">{{row.nov}}</div>
            <div v-if="sctfUtilityConsumptionUpdating">
              <el-input v-model="row.nov" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dec" :label="this.monthList[11]">
          <template slot-scope="{row}">
            <div v-if="!sctfUtilityConsumptionUpdating">{{row.dec}}</div>
            <div v-if="sctfUtilityConsumptionUpdating">
              <el-input v-model="row.dec" clearable="true"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="total"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- KBI -->
    <div class="editDiv">
      <el-button
        :disabled="kbiUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleKbiUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑KBI') }}</el-button>
      <el-button
        :disabled="!kbiUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmKbiUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!kbiUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelKbiUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableKBI" style="width: 100%;">
      <el-table-column prop="title" label="KBI" width="150"></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]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.jan}}</div>
          <div v-if="kbiUpdating &&
              (
                row.title == 'C2+C3 target' ||
                row.title == 'C2 target' ||
                row.title == 'BTX target' ||
                row.title == 'LTI'
              )
            ">
            <el-input v-model="row.jan" clearable="true"></el-input>
          </div>
          <div v-if="kbiUpdating &&
              (
                row.title != 'C2+C3 target' &&
                row.title != 'C2 target' &&
                row.title != 'BTX target' &&
                row.title != 'LTI'
              )
            ">
            {{row.jan}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.feb}}</div>
          <div v-if="kbiUpdating &&
              (
                row.title == 'C2+C3 target' ||
                row.title == 'C2 target' ||
                row.title == 'BTX target' ||
                row.title == 'LTI'
              )
            ">
            <el-input v-model="row.feb" clearable="true"></el-input>
          </div>
          <div v-if="kbiUpdating &&
              (
                row.title != 'C2+C3 target' &&
                row.title != 'C2 target' &&
                row.title != 'BTX target' &&
                row.title != 'LTI'
              )
            ">
            {{row.feb}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.mar}}</div>
          <div v-if="kbiUpdating &&
              (
                row.title == 'C2+C3 target' ||
                row.title == 'C2 target' ||
                row.title == 'BTX target' ||
                row.title == 'LTI'
              )
            ">
            <el-input v-model="row.mar" clearable="true"></el-input>
          </div>
          <div v-if="kbiUpdating &&
              (
                row.title != 'C2+C3 target' &&
                row.title != 'C2 target' &&
                row.title != 'BTX target' &&
                row.title != 'LTI'
              )
            ">
            {{row.mar}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.apr}}</div>
          <div v-if="kbiUpdating &&
              (
                row.title == 'C2+C3 target' ||
                row.title == 'C2 target' ||
                row.title == 'BTX target' ||
                row.title == 'LTI'
              )
            ">
            <el-input v-model="row.apr" clearable="true"></el-input>
          </div>
          <div v-if="kbiUpdating &&
              (
                row.title != 'C2+C3 target' &&
                row.title != 'C2 target' &&
                row.title != 'BTX target' &&
                row.title != 'LTI'
              )
            ">
            {{row.apr}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.may}}</div>
          <div v-if="kbiUpdating &&
              (
                row.title == 'C2+C3 target' ||
                row.title == 'C2 target' ||
                row.title == 'BTX target' ||
                row.title == 'LTI'
              )
            ">
            <el-input v-model="row.may" clearable="true"></el-input>
          </div>
          <div v-if="kbiUpdating &&
              (
                row.title != 'C2+C3 target' &&
                row.title != 'C2 target' &&
                row.title != 'BTX target' &&
                row.title != 'LTI'
              )
            ">
            {{row.may}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.jun}}</div>
          <div v-if="kbiUpdating &&
              (
                row.title == 'C2+C3 target' ||
                row.title == 'C2 target' ||
                row.title == 'BTX target' ||
                row.title == 'LTI'
              )
            ">
            <el-input v-model="row.jun" clearable="true"></el-input>
          </div>
          <div v-if="kbiUpdating &&
              (
                row.title != 'C2+C3 target' &&
                row.title != 'C2 target' &&
                row.title != 'BTX target' &&
                row.title != 'LTI'
              )
            ">
            {{row.jun}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.jul}}</div>
          <div v-if="kbiUpdating &&
              (
                row.title == 'C2+C3 target' ||
                row.title == 'C2 target' ||
                row.title == 'BTX target' ||
                row.title == 'LTI'
              )
            ">
            <el-input v-model="row.jul" clearable="true"></el-input>
          </div>
          <div v-if="kbiUpdating &&
              (
                row.title != 'C2+C3 target' &&
                row.title != 'C2 target' &&
                row.title != 'BTX target' &&
                row.title != 'LTI'
              )
            ">
            {{row.jul}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.aug}}</div>
          <div v-if="kbiUpdating &&
              (
                row.title == 'C2+C3 target' ||
                row.title == 'C2 target' ||
                row.title == 'BTX target' ||
                row.title == 'LTI'
              )
            ">
            <el-input v-model="row.aug" clearable="true"></el-input>
          </div>
          <div v-if="kbiUpdating &&
              (
                row.title != 'C2+C3 target' &&
                row.title != 'C2 target' &&
                row.title != 'BTX target' &&
                row.title != 'LTI'
              )
            ">
            {{row.aug}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.sep}}</div>
          <div v-if="kbiUpdating &&
              (
                row.title == 'C2+C3 target' ||
                row.title == 'C2 target' ||
                row.title == 'BTX target' ||
                row.title == 'LTI'
              )
            ">
            <el-input v-model="row.sep" clearable="true"></el-input>
          </div>
          <div v-if="kbiUpdating &&
              (
                row.title != 'C2+C3 target' &&
                row.title != 'C2 target' &&
                row.title != 'BTX target' &&
                row.title != 'LTI'
              )
            ">
            {{row.sep}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.oct}}</div>
          <div v-if="kbiUpdating &&
              (
                row.title == 'C2+C3 target' ||
                row.title == 'C2 target' ||
                row.title == 'BTX target' ||
                row.title == 'LTI'
              )
            ">
            <el-input v-model="row.oct" clearable="true"></el-input>
          </div>
          <div v-if="kbiUpdating &&
              (
                row.title != 'C2+C3 target' &&
                row.title != 'C2 target' &&
                row.title != 'BTX target' &&
                row.title != 'LTI'
              )
            ">
            {{row.oct}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.nov}}</div>
          <div v-if="kbiUpdating &&
              (
                row.title == 'C2+C3 target' ||
                row.title == 'C2 target' ||
                row.title == 'BTX target' ||
                row.title == 'LTI'
              )
            ">
            <el-input v-model="row.nov" clearable="true"></el-input>
          </div>
          <div v-if="kbiUpdating &&
              (
                row.title != 'C2+C3 target' &&
                row.title != 'C2 target' &&
                row.title != 'BTX target' &&
                row.title != 'LTI'
              )
            ">
            {{row.nov}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.dec}}</div>
          <div v-if="kbiUpdating &&
              (
                row.title == 'C2+C3 target' ||
                row.title == 'C2 target' ||
                row.title == 'BTX target' ||
                row.title == 'LTI'
              )
            ">
            <el-input v-model="row.dec" clearable="true"></el-input>
          </div>
          <div v-if="kbiUpdating &&
              (
                row.title != 'C2+C3 target' &&
                row.title != 'C2 target' &&
                row.title != 'BTX target' &&
                row.title != 'LTI'
              )
            ">
            {{row.dec}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="total"></el-table-column>
      <el-table-column prop="avg" label="avg"></el-table-column>
    </el-table>
    <!-- Summary -->
    <el-table border :data="tableSummary" style="width: 100%;">
      <el-table-column label="BCC装置主要原材料及公用工程消耗">
        <el-table-column prop="title" label="项目" width="150"></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-dialog @close="disposeChart" :title="analysis.title" :visible.sync="analysis.open" width="1400px" append-to-body>
      <el-form :model="analysisQueryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="开始时间" prop="startDate">
          <el-date-picker
            v-model="analysisDialogElement.startDate"
            type="month"
            placeholder="选择开始时间"
            @change="handleAnalysisTimeIntervalChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endDate">
          <el-date-picker
            v-model="analysisDialogElement.endDate"
            type="month"
            placeholder="选择结束时间"
            @change="handleAnalysisTimeIntervalChange">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div id="trendChart" style="width:1340px;height:600px;"></div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAnalysisData,
  getCrackerRawMaterial,
  getCrackerOutputProduct,
  getAromaticsRawMaterial,
  getAromaticsOutputProduct,
  getEligibleProductRate,
  getProductYield,
  getCrackerUtilityConsumption,
  getCrackerEnergyConsumption,
  getAromaticsUtilityConsumption,
  getAromaticsEnergyConsumption,
  getPlantLoad,
  getCostFrEthylene,
  getRuningRate,
  getShoudownHour,
  getOtherside,
  getChemicalConsume,
  getSCTUUtilityConsumption,
  getSUBUtilityConsumption,
  getSCTFUtilityConsumption,
  getKbi,
  getSummary,
  updateEligibleProductRate,
  updateCrackerUtilityConsumption,
  updateAromaticsUtilityConsumption,
  updateShoudownHour,
  updateRuningRate,
  updateChemicalConsume,
  updateCostFrEthylene,
  updateSUBUtilityConsumption,
  updateSctfUtilityConsumption,
  updateKbi
} from "@/api/production/monthly";

export default {
  name: "Monthly",
  data() {
    return {
      // 修改中
      subUtilityConsumptionUpdating: false,
      sctfUtilityConsumptionUpdating: false,
      kbiUpdating: false,
      costFrEthyleneUpdating: false,
      chemicalConsumeUpdating: false,
      runingRateUpdating: false,
      shoudownHourUpdating: false,
      aromaticsUtilityConsumptionUpdating: false,
      crackerUtilityConsumptionUpdating: false,
      eligibleProductRateUpdating: false,
      // 趋势图y轴数值
      valueList: [],
      // 趋势图x轴日期
      dateList: [],
      // y轴最大值
      maxValue: null,
      // y轴最小值
      minValue: null,
      // 趋势图
      chart: null,
      // 趋势分析参数
      analysis: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
      },
      // 趋势图查询参数
      analysisQueryParams: {
        // 指标
        item: null,
        // 截止年份
        toYear: 0,
        // 截止月份
        toMonth: 0,
        // 开始年份
        fromYear: 0,
        // 开始月份
        fromMonth: 0,
      },
      // 对话框控件值
      analysisDialogElement: {
        // 开始时间
        startDate: null,
        // 结束时间
        endDate: null,
      },
      // 年份
      year: null,
      // 月份的固定表示
      monthList: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      tableCrackerRawMaterial: [],
      tableCrackerOutputProduct: [],
      tableAromaticsRawMaterial: [],
      tableAromaticsOutputProduct: [],
      tableEligibleProductRate: [],
      tableProductYield: [],
      tableCrackerUtilityConsumption: [],
      tableCrackerEnergyConsumption: [],
      tableAromaticsUtilityConsumption: [],
      tableAromaticsEnergyConsumption: [],
      tablePlantLoad: [],
      tableCostFrEthylene: [],
      tableRuningRate: [],
      tableShoudownHour: [],
      tableOtherside: [],
      tableChemicalConsume: [],
      tableSCTUUtilityConsumption: [],
      tableSUBUtilityConsumption: [],
      tableSCTFUtilityConsumption: [],
      tableKBI: [],
      tableSummary: [],
    }
  },
  created() {
    // 加载时设置year为今年
    this.year = new Date();
    // 加载月报数据
    this.getMonthlyReport();
  },
  methods: {
    /** 编辑按钮操作 */
    handleSubUtilityConsumptionUpdate(row) {
      this.subUtilityConsumptionUpdating = true;
    },
    handleSctfUtilityConsumptionUpdate(row) {
      this.sctfUtilityConsumptionUpdating = true;
    },
    handleKbiUpdate(row) {
      this.kbiUpdating = true;
    },
    handleCostFrEthyleneUpdate(row) {
      this.costFrEthyleneUpdating = true;
    },
    handleChemicalConsumeUpdate(row) {
      this.chemicalConsumeUpdating = true;
    },
    handleRuningRateUpdate(row) {
      this.runingRateUpdating = true;
    },
    handleShoudownHourUpdate(row) {
      this.shoudownHourUpdating = true;
    },
    handleAromaticsUtilityConsumptionUpdate(row) {
      this.aromaticsUtilityConsumptionUpdating = true;
    },
    handleCrackerUtilityConsumptionUpdate(row) {
      this.crackerUtilityConsumptionUpdating = true;
    },
    handleEligibleProductRateUpdate(row) {
      this.eligibleProductRateUpdating = true;
    },
    /** 确定修改按钮操作 */
    handleConfirmSubUtilityConsumptionUpdate(row) {
      this.subUtilityConsumptionUpdating = false;
      updateSUBUtilityConsumption({
        tableData: [
          this.tableSUBUtilityConsumption[3],
          this.tableSUBUtilityConsumption[11],
          this.tableSUBUtilityConsumption[13],
          this.tableSUBUtilityConsumption[15],
          this.tableSUBUtilityConsumption[16],
          this.tableSUBUtilityConsumption[17],
          this.tableSUBUtilityConsumption[18],
          this.tableSUBUtilityConsumption[19],
        ],
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getSUBUtilityConsumption(year).then(response => {
          this.tableSUBUtilityConsumption = response.data;
        });
      });
    },
    handleConfirmSctfUtilityConsumptionUpdate(row) {
      this.sctfUtilityConsumptionUpdating = false;
      updateSctfUtilityConsumption({
        tableData: this.tableSCTFUtilityConsumption,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getSCTFUtilityConsumption(year).then(response => {
          this.tableSCTFUtilityConsumption = response.data;
        });
      });
    },
    handleConfirmKbiUpdate(row) {
      this.kbiUpdating = false;
      updateKbi({
        tableData: [
          this.tableKBI[4],
          this.tableKBI[5],
          this.tableKBI[6],
          this.tableKBI[7],
          this.tableKBI[8],
          this.tableKBI[13],
          this.tableKBI[14],
        ],
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getKbi(year).then(response => {
          this.tableKBI = response.data;
        });
      });
    },
    handleConfirmCostFrEthyleneUpdate(row) {
      this.costFrEthyleneUpdating = false;
      updateCostFrEthylene({
        tableData: this.tableCostFrEthylene,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getCostFrEthylene(year).then(response => {
          this.tableCostFrEthylene = response.data;
        });
      });
    },
    handleConfirmChemicalConsumeUpdate(row) {
      this.chemicalConsumeUpdating = false;
      updateChemicalConsume({
        tableData: this.tableChemicalConsume,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getChemicalConsume(year).then(response => {
          this.tableChemicalConsume = response.data;
        });
      });
    },
    handleConfirmRuningRateUpdate(row) {
      this.runingRateUpdating = false;
      updateRuningRate({
        tableData: [
          this.tableRuningRate[3]
        ],
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getRuningRate(year).then(response => {
          this.tableRuningRate = response.data;
        });
        getPlantLoad(year).then(response => {
          this.tablePlantLoad = response.data;
        });
      });
    },
    handleConfirmShoudownHourUpdate(row) {
      this.shoudownHourUpdating = false;
      updateShoudownHour({
        tableData: [
          this.tableShoudownHour[0],
          this.tableShoudownHour[1],
          this.tableShoudownHour[2],
          this.tableShoudownHour[3],
          this.tableShoudownHour[4],
          this.tableShoudownHour[5],
          this.tableShoudownHour[6],
          this.tableShoudownHour[7],
          this.tableShoudownHour[8],
          this.tableShoudownHour[9],
        ],
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getShoudownHour(year).then(response => {
          this.tableShoudownHour = response.data;
        });
        getRuningRate(year).then(response => {
          this.tableRuningRate = response.data;
        });
        getPlantLoad(year).then(response => {
          this.tablePlantLoad = response.data;
        });
      });
    },
    handleConfirmAromaticsUtilityConsumptionUpdate(row) {
      this.aromaticsUtilityConsumptionUpdating = false;
      updateAromaticsUtilityConsumption({
        tableData: [
          this.tableAromaticsUtilityConsumption[6],
          this.tableAromaticsUtilityConsumption[12],
          this.tableAromaticsUtilityConsumption[13],
          this.tableAromaticsUtilityConsumption[14],
          this.tableAromaticsUtilityConsumption[15]
        ],
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getAromaticsUtilityConsumption(year).then(response => {
          this.tableCrackerUtilityConsumption = response.data;
        });
      });
    },
    handleConfirmCrackerUtilityConsumptionUpdate(row) {
      this.crackerUtilityConsumptionUpdating = false;
      updateCrackerUtilityConsumption({
        tableData: [
          this.tableCrackerUtilityConsumption[7],
          this.tableCrackerUtilityConsumption[12],
          this.tableCrackerUtilityConsumption[14],
          this.tableCrackerUtilityConsumption[15],
          this.tableCrackerUtilityConsumption[16],
          this.tableCrackerUtilityConsumption[17],
          this.tableCrackerUtilityConsumption[19]
        ],
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getCrackerUtilityConsumption(year).then(response => {
          this.tableCrackerUtilityConsumption = response.data;
        });
        getCrackerEnergyConsumption(year).then(response => {
          this.tableCrackerEnergyConsumption = response.data;
        });
      });
    },
    handleConfirmEligibleProductRateUpdate(row) {
      this.eligibleProductRateUpdating = false;
      updateEligibleProductRate({
        tableData: this.tableEligibleProductRate,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getEligibleProductRate(year).then(response => {
          this.tableEligibleProductRate = response.data;
        });
      });
    },
    /** 取消修改按钮操作 */
    handleCancelSUBUtilityConsumptionUpdate(row) {
      this.subUtilityConsumptionUpdating = false;
      getSUBUtilityConsumption(year).then(response => {
        this.tableSUBUtilityConsumption = response.data;
      });
    },
    handleCancelSCTFUtilityConsumptionUpdate(row) {
      this.sctfUtilityConsumptionUpdating = false;
      getSCTFUtilityConsumption(year).then(response => {
        this.tableSCTFUtilityConsumption = response.data;
      });
    },
    handleCancelKbiUpdate(row) {
      this.kbiUpdating = false;
      getKbi(year).then(response => {
        this.tableKBI = response.data;
      });
    },
    handleCancelCostFrEthyleneUpdate(row) {
      this.costFrEthyleneUpdating = false;
      getCostFrEthylene(year).then(response => {
        this.tableCostFrEthylene = response.data;
      });
    },
    handleCancelChemicalConsumeUpdate(row) {
      this.chemicalConsumeUpdating = false;
      getChemicalConsume(year).then(response => {
        this.tableChemicalConsume = response.data;
      });
    },
    handleCancelRuningRateUpdate(row) {
      this.runingRateUpdating = false;
      getRuningRate(year).then(response => {
        this.runingRateUpdating = response.data;
      });
    },
    handleCancelShoudownHourUpdate(row) {
      this.shoudownHourUpdating = false;
      getShoudownHour(year).then(response => {
        this.shoudownHourUpdating = response.data;
      });
    },
    handleCancelAromaticsUtilityConsumptionUpdate(row) {
      this.aromaticsUtilityConsumptionUpdating = false;
      getAromaticsUtilityConsumption(year).then(response => {
        this.aromaticsUtilityConsumptionUpdating = response.data;
      });
    },
    handleCancelCrackerUtilityConsumptionUpdate(row) {
      this.crackerUtilityConsumptionUpdating = false;
      getCrackerUtilityConsumption(year).then(response => {
        this.tableCrackerUtilityConsumption = response.data;
      });
    },
    handleCancelEligibleProductRateUpdate(row) {
      this.eligibleProductRateUpdating = false;
      getEligibleProductRate(year).then(response => {
        this.tableEligibleProductRate = response.data;
      });
    },
    /** 销毁趋势图 */
    disposeChart() {
      this.echarts.dispose(this.chart);
    },
    /** 处理最左列指标点击事件 */
    columnOnclick(row) {
      let dictLabel = row.dictLabel;
      let toYear = this.year.getFullYear();
      let toMonth = this.year.getMonth() + 1;
      let fromYear = toYear - 1;
      let fromMonth = toMonth;
      this.analysisQueryParams.item = dictLabel;
      this.analysisQueryParams.toYear = toYear;
      this.analysisQueryParams.toMonth = toMonth;
      this.analysisQueryParams.fromYear = fromYear;
      this.analysisQueryParams.fromMonth = fromMonth;
      let startDate = new Date();
      let endDate = new Date();
      startDate.setFullYear(startDate.getFullYear() - 1);
      this.analysisDialogElement.startDate = startDate;
      this.analysisDialogElement.endDate = endDate;
      this.analysis.title = row.title + "趋势分析";
      this.analysis.open = true;
      this.draw();
    },
    /** 处理趋势分析时间区间change事件 */
    handleAnalysisTimeIntervalChange() {
      if (this.analysisDialogElement.startDate.getTime() >= this.analysisDialogElement.endDate.getTime()) {
        let startDate = new Date();
        let endDate = new Date();
        startDate.setFullYear(startDate.getFullYear() - 1);
        this.analysisDialogElement.startDate = startDate;
        this.analysisDialogElement.endDate = endDate;
        this.$message.info("开始日期不能大于等于结束日期，请重新选择日期范围。");
      } else {
        this.disposeChart();
        let startDate = this.analysisDialogElement.startDate;
        let endDate = this.analysisDialogElement.endDate;
        this.analysisQueryParams.fromYear = startDate.getFullYear();
        this.analysisQueryParams.fromMonth = startDate.getMonth() + 1;
        this.analysisQueryParams.toYear = endDate.getFullYear();
        this.analysisQueryParams.toMonth = endDate.getMonth() + 1;
        this.draw();
      }
    },
    /** 绘制趋势图 */
    draw() {
      this.valueList = [];
      this.dateList = [];
      getAnalysisData(this.analysisQueryParams).then(response => {
        let data = response.data;
        this.maxValue = 0;
        this.minValue = data[0].valueData;
        for (let i = 0; i < data.length; i++) {
          if (data[i].valueData != null) {
            this.valueList.push(data[i].valueData);
            this.dateList.push(data[i].dateData);
            if (data[i].valueData > this.maxValue) {
              this.maxValue = data[i].valueData;
            }
            if (data[i].valueData < this.minValue) {
              this.minValue = data[i].valueData;
            }
          }
        }
        this.chart = this.echarts.init(document.getElementById("trendChart"));
        let option = {
          tooltip: {
            trigger: "item"
          },
          grid: {
            left: 90,
            right: 80,
          },
          xAxis: {
            data: this.dateList,
          },
          yAxis: {
            max: this.maxValue,
            min: this.minValue,
            min: function(value) {  // 取最小值向下取整为最小刻度
              return Math.floor(value.min)
            },
            max: function(value) {  // 取最大值向上取整为最大刻度
              return  Math.ceil(value.max)
            },
            scale: true,
            type: 'value',
          },
          series: [
            {
              name: this.fieldNameTitle,
              label: {
                show: true,
                position: 'top'
              },
              data: this.valueList,
              type: 'line',
              smooth: true,
              symbolSize: 15,
              color:"#5470c6",
              lineStyle: {
                width: 6
              }
            }
          ],
        };
        this.chart.setOption(option);
      });
    },
    /** 设置表头 */
    setTableTitle() {
      // 拼接年份后的数组
      let monthListTemp = [];
      // 重置月份数组
      this.monthList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
      for (let i = 0; i < this.monthList.length; i++) {
        // 拼接后：月份-年份，如Feb-2022
        monthListTemp.push(this.monthList[i] + "-" + this.year.getFullYear());
      }
      this.monthList = monthListTemp;
    },
    /** 处理年份控件change事件 */
    handleQueryYear() {
      // 点击clear按钮，设置year为今年
      if (this.year == null) {
        this.year = new Date();
      }
      this.getMonthlyReport();
    },
    /** 获取月报 */
    getMonthlyReport() {
      // 设置表头
      this.setTableTitle();
      // 获取选中的年份
      let year = this.year.getFullYear();
      // 根据年份获取月报数据
      getCrackerRawMaterial(year).then(response => {
        this.tableCrackerRawMaterial = response.data;
      });
      getCrackerOutputProduct(year).then(response => {
        this.tableCrackerOutputProduct = response.data;
      });
      getAromaticsRawMaterial(year).then(response => {
        this.tableAromaticsRawMaterial = response.data;
      });
      getAromaticsOutputProduct(year).then(response => {
        this.tableAromaticsOutputProduct = response.data;
      });
      getEligibleProductRate(year).then(response => {
        this.tableEligibleProductRate = response.data;
      });
      getProductYield(year).then(response => {
        this.tableProductYield = response.data;
      });
      getCrackerUtilityConsumption(year).then(response => {
        this.tableCrackerUtilityConsumption = response.data;
      });
      getCrackerEnergyConsumption(year).then(response => {
        this.tableCrackerEnergyConsumption = response.data;
      });
      getAromaticsUtilityConsumption(year).then(response => {
        this.tableAromaticsUtilityConsumption = response.data;
      });
      getAromaticsEnergyConsumption(year).then(response => {
        this.tableAromaticsEnergyConsumption = response.data;
      });
      getPlantLoad(year).then(response => {
        this.tablePlantLoad = response.data;
      });
      getCostFrEthylene(year).then(response => {
        this.tableCostFrEthylene = response.data;
      });
      getRuningRate(year).then(response => {
        this.tableRuningRate = response.data;
      });
      getShoudownHour(year).then(response => {
        this.tableShoudownHour = response.data;
      });
      getOtherside(year).then(response => {
        this.tableOtherside = response.data;
      });
      getChemicalConsume(year).then(response => {
        this.tableChemicalConsume = response.data;
      });
      getSCTUUtilityConsumption(year).then(response => {
        this.tableSCTUUtilityConsumption = response.data;
      });
      getSUBUtilityConsumption(year).then(response => {
        this.tableSUBUtilityConsumption = response.data;
      });
      getSCTFUtilityConsumption(year).then(response => {
        this.tableSCTFUtilityConsumption = response.data;
      });
      getKbi(year).then(response => {
        this.tableKBI = response.data;
      });
      getSummary(year).then(response => {
        this.tableSummary = response.data;
      });
    },
  }
}
</script>

<style scoped>
  .editDiv{
    margin-top: 20px;
  }
</style>