<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']"
          @click="handleExport"
        >导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-download"
          size="mini"
          v-hasPermi="['production:monthly:edit']"
          @click="handleQueryPrice()"
        >开工锅炉公用工程单价维护</el-button>
      </el-form-item>
    </el-form>
    <!-- Cracker Raw Material -->
    <el-divider content-position="left">Cracker Raw Material</el-divider>
    <div class="editDiv">
      <el-button
        :disabled="crackerRawMaterialUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleCrackerRawMaterialUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Cracker Raw Material') }}</el-button>
      <el-button
        :disabled="!crackerRawMaterialUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmCrackerRawMaterialUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!crackerRawMaterialUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelCrackerRawMaterialUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableCrackerRawMaterial" style="width: 100%;">
      <el-table-column width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!crackerRawMaterialUpdating">{{row.jan}}</div>
          <div v-if="crackerRawMaterialUpdating && row.title != 'Cracker Raw Material'">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
          <div v-if="crackerRawMaterialUpdating && row.title == 'Cracker Raw Material'">{{row.jan}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!crackerRawMaterialUpdating">{{row.feb}}</div>
          <div v-if="crackerRawMaterialUpdating && row.title != 'Cracker Raw Material'">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
          <div v-if="crackerRawMaterialUpdating && row.title == 'Cracker Raw Material'">{{row.feb}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!crackerRawMaterialUpdating">{{row.mar}}</div>
          <div v-if="crackerRawMaterialUpdating && row.title != 'Cracker Raw Material'">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
          <div v-if="crackerRawMaterialUpdating && row.title == 'Cracker Raw Material'">{{row.mar}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!crackerRawMaterialUpdating">{{row.apr}}</div>
          <div v-if="crackerRawMaterialUpdating && row.title != 'Cracker Raw Material'">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
          <div v-if="crackerRawMaterialUpdating && row.title == 'Cracker Raw Material'">{{row.apr}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!crackerRawMaterialUpdating">{{row.may}}</div>
          <div v-if="crackerRawMaterialUpdating && row.title != 'Cracker Raw Material'">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
          <div v-if="crackerRawMaterialUpdating && row.title == 'Cracker Raw Material'">{{row.may}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!crackerRawMaterialUpdating">{{row.jun}}</div>
          <div v-if="crackerRawMaterialUpdating && row.title != 'Cracker Raw Material'">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
          <div v-if="crackerRawMaterialUpdating && row.title == 'Cracker Raw Material'">{{row.jun}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!crackerRawMaterialUpdating">{{row.jul}}</div>
          <div v-if="crackerRawMaterialUpdating && row.title != 'Cracker Raw Material'">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
          <div v-if="crackerRawMaterialUpdating && row.title == 'Cracker Raw Material'">{{row.jul}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!crackerRawMaterialUpdating">{{row.aug}}</div>
          <div v-if="crackerRawMaterialUpdating && row.title != 'Cracker Raw Material'">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
          <div v-if="crackerRawMaterialUpdating && row.title == 'Cracker Raw Material'">{{row.aug}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!crackerRawMaterialUpdating">{{row.sep}}</div>
          <div v-if="crackerRawMaterialUpdating && row.title != 'Cracker Raw Material'">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
          <div v-if="crackerRawMaterialUpdating && row.title == 'Cracker Raw Material'">{{row.sep}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!crackerRawMaterialUpdating">{{row.oct}}</div>
          <div v-if="crackerRawMaterialUpdating && row.title != 'Cracker Raw Material'">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
          <div v-if="crackerRawMaterialUpdating && row.title == 'Cracker Raw Material'">{{row.oct}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!crackerRawMaterialUpdating">{{row.nov}}</div>
          <div v-if="crackerRawMaterialUpdating && row.title != 'Cracker Raw Material'">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
          <div v-if="crackerRawMaterialUpdating && row.title == 'Cracker Raw Material'">{{row.nov}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!crackerRawMaterialUpdating">{{row.dec}}</div>
          <div v-if="crackerRawMaterialUpdating && row.title != 'Cracker Raw Material'">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
          <div v-if="crackerRawMaterialUpdating && row.title == 'Cracker Raw Material'">{{row.dec}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
    </el-table>
    <!-- Cracker Output Product -->
    <el-divider content-position="left">Cracker Output Product</el-divider>
    <div class="editDiv">
      <el-button
        :disabled="crackerOutputProductUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleCrackerOutputProductUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Cracker Output Product') }}</el-button>
      <el-button
        :disabled="!crackerOutputProductUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmCrackerOutputProductUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!crackerOutputProductUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelCrackerOutputProductUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableCrackerOutputProduct" style="width: 100%;">
      <el-table-column width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!crackerOutputProductUpdating">{{row.jan}}</div>
          <div v-if="crackerOutputProductUpdating && row.title != 'Cracker Output Product'">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
          <div v-if="crackerOutputProductUpdating && row.title == 'Cracker Output Product'">{{row.jan}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!crackerOutputProductUpdating">{{row.feb}}</div>
          <div v-if="crackerOutputProductUpdating && row.title != 'Cracker Output Product'">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
          <div v-if="crackerOutputProductUpdating && row.title == 'Cracker Output Product'">{{row.feb}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!crackerOutputProductUpdating">{{row.mar}}</div>
          <div v-if="crackerOutputProductUpdating && row.title != 'Cracker Output Product'">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
          <div v-if="crackerOutputProductUpdating && row.title == 'Cracker Output Product'">{{row.mar}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!crackerOutputProductUpdating">{{row.apr}}</div>
          <div v-if="crackerOutputProductUpdating && row.title != 'Cracker Output Product'">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
          <div v-if="crackerOutputProductUpdating && row.title == 'Cracker Output Product'">{{row.apr}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!crackerOutputProductUpdating">{{row.may}}</div>
          <div v-if="crackerOutputProductUpdating && row.title != 'Cracker Output Product'">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
          <div v-if="crackerOutputProductUpdating && row.title == 'Cracker Output Product'">{{row.may}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!crackerOutputProductUpdating">{{row.jun}}</div>
          <div v-if="crackerOutputProductUpdating && row.title != 'Cracker Output Product'">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
          <div v-if="crackerOutputProductUpdating && row.title == 'Cracker Output Product'">{{row.jun}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!crackerOutputProductUpdating">{{row.jul}}</div>
          <div v-if="crackerOutputProductUpdating && row.title != 'Cracker Output Product'">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
          <div v-if="crackerOutputProductUpdating && row.title == 'Cracker Output Product'">{{row.jul}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!crackerOutputProductUpdating">{{row.aug}}</div>
          <div v-if="crackerOutputProductUpdating && row.title != 'Cracker Output Product'">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
          <div v-if="crackerOutputProductUpdating && row.title == 'Cracker Output Product'">{{row.aug}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!crackerOutputProductUpdating">{{row.sep}}</div>
          <div v-if="crackerOutputProductUpdating && row.title != 'Cracker Output Product'">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
          <div v-if="crackerOutputProductUpdating && row.title == 'Cracker Output Product'">{{row.sep}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!crackerOutputProductUpdating">{{row.oct}}</div>
          <div v-if="crackerOutputProductUpdating && row.title != 'Cracker Output Product'">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
          <div v-if="crackerOutputProductUpdating && row.title == 'Cracker Output Product'">{{row.oct}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!crackerOutputProductUpdating">{{row.nov}}</div>
          <div v-if="crackerOutputProductUpdating && row.title != 'Cracker Output Product'">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
          <div v-if="crackerOutputProductUpdating && row.title == 'Cracker Output Product'">{{row.nov}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!crackerOutputProductUpdating">{{row.dec}}</div>
          <div v-if="crackerOutputProductUpdating && row.title != 'Cracker Output Product'">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
          <div v-if="crackerOutputProductUpdating && row.title == 'Cracker Output Product'">{{row.dec}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
    </el-table>
    <!-- Aromatics Raw Material -->
    <el-divider content-position="left">Aromatics Raw Material</el-divider>
    <div class="editDiv">
      <el-button
        :disabled="aromaticsRawMaterialUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleAromaticsRawMaterialUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Aromatics Raw Material') }}</el-button>
      <el-button
        :disabled="!aromaticsRawMaterialUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmAromaticsRawMaterialUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!aromaticsRawMaterialUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelAromaticsRawMaterialUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableAromaticsRawMaterial" style="width: 100%;">
      <el-table-column width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsRawMaterialUpdating">{{row.jan}}</div>
          <div v-if="aromaticsRawMaterialUpdating && row.title != 'Aromatics Raw Material'">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
          <div v-if="aromaticsRawMaterialUpdating && row.title == 'Aromatics Raw Material'">{{row.jan}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsRawMaterialUpdating">{{row.feb}}</div>
          <div v-if="aromaticsRawMaterialUpdating && row.title != 'Aromatics Raw Material'">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
          <div v-if="aromaticsRawMaterialUpdating && row.title == 'Aromatics Raw Material'">{{row.feb}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsRawMaterialUpdating">{{row.mar}}</div>
          <div v-if="aromaticsRawMaterialUpdating && row.title != 'Aromatics Raw Material'">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
          <div v-if="aromaticsRawMaterialUpdating && row.title == 'Aromatics Raw Material'">{{row.mar}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsRawMaterialUpdating">{{row.apr}}</div>
          <div v-if="aromaticsRawMaterialUpdating && row.title != 'Aromatics Raw Material'">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
          <div v-if="aromaticsRawMaterialUpdating && row.title == 'Aromatics Raw Material'">{{row.apr}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsRawMaterialUpdating">{{row.may}}</div>
          <div v-if="aromaticsRawMaterialUpdating && row.title != 'Aromatics Raw Material'">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
          <div v-if="aromaticsRawMaterialUpdating && row.title == 'Aromatics Raw Material'">{{row.may}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsRawMaterialUpdating">{{row.jun}}</div>
          <div v-if="aromaticsRawMaterialUpdating && row.title != 'Aromatics Raw Material'">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
          <div v-if="aromaticsRawMaterialUpdating && row.title == 'Aromatics Raw Material'">{{row.jun}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsRawMaterialUpdating">{{row.jul}}</div>
          <div v-if="aromaticsRawMaterialUpdating && row.title != 'Aromatics Raw Material'">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
          <div v-if="aromaticsRawMaterialUpdating && row.title == 'Aromatics Raw Material'">{{row.jul}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsRawMaterialUpdating">{{row.aug}}</div>
          <div v-if="aromaticsRawMaterialUpdating && row.title != 'Aromatics Raw Material'">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
          <div v-if="aromaticsRawMaterialUpdating && row.title == 'Aromatics Raw Material'">{{row.aug}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsRawMaterialUpdating">{{row.sep}}</div>
          <div v-if="aromaticsRawMaterialUpdating && row.title != 'Aromatics Raw Material'">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
          <div v-if="aromaticsRawMaterialUpdating && row.title == 'Aromatics Raw Material'">{{row.sep}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsRawMaterialUpdating">{{row.oct}}</div>
          <div v-if="aromaticsRawMaterialUpdating && row.title != 'Aromatics Raw Material'">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
          <div v-if="aromaticsRawMaterialUpdating && row.title == 'Aromatics Raw Material'">{{row.oct}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsRawMaterialUpdating">{{row.nov}}</div>
          <div v-if="aromaticsRawMaterialUpdating && row.title != 'Aromatics Raw Material'">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
          <div v-if="aromaticsRawMaterialUpdating && row.title == 'Aromatics Raw Material'">{{row.nov}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsRawMaterialUpdating">{{row.dec}}</div>
          <div v-if="aromaticsRawMaterialUpdating && row.title != 'Aromatics Raw Material'">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
          <div v-if="aromaticsRawMaterialUpdating && row.title == 'Aromatics Raw Material'">{{row.dec}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
    </el-table>
    <!-- Aromatics Output Product -->
    <el-divider content-position="left">Aromatics Output Product</el-divider>
    <div class="editDiv">
      <el-button
        :disabled="aromaticsOutputProductUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleAromaticsOutputProductUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Aromatics Output Product') }}</el-button>
      <el-button
        :disabled="!aromaticsOutputProductUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmAromaticsOutputProductUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!aromaticsOutputProductUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelAromaticsOutputProductUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableAromaticsOutputProduct" style="width: 100%;">
      <el-table-column width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsOutputProductUpdating">{{row.jan}}</div>
          <div v-if="aromaticsOutputProductUpdating && row.title != 'Aromatics Output Product'">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
          <div v-if="aromaticsOutputProductUpdating && row.title == 'Aromatics Output Product'">{{row.jan}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsOutputProductUpdating">{{row.feb}}</div>
          <div v-if="aromaticsOutputProductUpdating && row.title != 'Aromatics Output Product'">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
          <div v-if="aromaticsOutputProductUpdating && row.title == 'Aromatics Output Product'">{{row.feb}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsOutputProductUpdating">{{row.mar}}</div>
          <div v-if="aromaticsOutputProductUpdating && row.title != 'Aromatics Output Product'">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
          <div v-if="aromaticsOutputProductUpdating && row.title == 'Aromatics Output Product'">{{row.mar}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsOutputProductUpdating">{{row.apr}}</div>
          <div v-if="aromaticsOutputProductUpdating && row.title != 'Aromatics Output Product'">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
          <div v-if="aromaticsOutputProductUpdating && row.title == 'Aromatics Output Product'">{{row.apr}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsOutputProductUpdating">{{row.may}}</div>
          <div v-if="aromaticsOutputProductUpdating && row.title != 'Aromatics Output Product'">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
          <div v-if="aromaticsOutputProductUpdating && row.title == 'Aromatics Output Product'">{{row.may}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsOutputProductUpdating">{{row.jun}}</div>
          <div v-if="aromaticsOutputProductUpdating && row.title != 'Aromatics Output Product'">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
          <div v-if="aromaticsOutputProductUpdating && row.title == 'Aromatics Output Product'">{{row.jun}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsOutputProductUpdating">{{row.jul}}</div>
          <div v-if="aromaticsOutputProductUpdating && row.title != 'Aromatics Output Product'">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
          <div v-if="aromaticsOutputProductUpdating && row.title == 'Aromatics Output Product'">{{row.jul}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsOutputProductUpdating">{{row.aug}}</div>
          <div v-if="aromaticsOutputProductUpdating && row.title != 'Aromatics Output Product'">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
          <div v-if="aromaticsOutputProductUpdating && row.title == 'Aromatics Output Product'">{{row.aug}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsOutputProductUpdating">{{row.sep}}</div>
          <div v-if="aromaticsOutputProductUpdating && row.title != 'Aromatics Output Product'">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
          <div v-if="aromaticsOutputProductUpdating && row.title == 'Aromatics Output Product'">{{row.sep}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsOutputProductUpdating">{{row.oct}}</div>
          <div v-if="aromaticsOutputProductUpdating && row.title != 'Aromatics Output Product'">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
          <div v-if="aromaticsOutputProductUpdating && row.title == 'Aromatics Output Product'">{{row.oct}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsOutputProductUpdating">{{row.nov}}</div>
          <div v-if="aromaticsOutputProductUpdating && row.title != 'Aromatics Output Product'">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
          <div v-if="aromaticsOutputProductUpdating && row.title == 'Aromatics Output Product'">{{row.nov}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsOutputProductUpdating">{{row.dec}}</div>
          <div v-if="aromaticsOutputProductUpdating && row.title != 'Aromatics Output Product'">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
          <div v-if="aromaticsOutputProductUpdating && row.title == 'Aromatics Output Product'">{{row.dec}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
    </el-table>
    <!-- Eligible Product Rate -->
    <el-divider content-position="left">Eligible Product Rate</el-divider>
    <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 width="150" prop="title" label="" fixed="left">
        <template slot-scope="{row}">
          <div @click="columnOnclick(row)">{{row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!eligibleProductRateUpdating">{{row.jan}}</div>
          <div v-if="eligibleProductRateUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!eligibleProductRateUpdating">{{row.feb}}</div>
          <div v-if="eligibleProductRateUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!eligibleProductRateUpdating">{{row.mar}}</div>
          <div v-if="eligibleProductRateUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!eligibleProductRateUpdating">{{row.apr}}</div>
          <div v-if="eligibleProductRateUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!eligibleProductRateUpdating">{{row.may}}</div>
          <div v-if="eligibleProductRateUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!eligibleProductRateUpdating">{{row.jun}}</div>
          <div v-if="eligibleProductRateUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!eligibleProductRateUpdating">{{row.jul}}</div>
          <div v-if="eligibleProductRateUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!eligibleProductRateUpdating">{{row.aug}}</div>
          <div v-if="eligibleProductRateUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!eligibleProductRateUpdating">{{row.sep}}</div>
          <div v-if="eligibleProductRateUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!eligibleProductRateUpdating">{{row.oct}}</div>
          <div v-if="eligibleProductRateUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!eligibleProductRateUpdating">{{row.nov}}</div>
          <div v-if="eligibleProductRateUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!eligibleProductRateUpdating">{{row.dec}}</div>
          <div v-if="eligibleProductRateUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="avg" label="avg"></el-table-column>
    </el-table>
    <!-- Product Yield -->
    <el-divider content-position="left">Product Yield</el-divider>
    <div class="editDiv">
      <el-button
        :disabled="productYieldUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleProductYieldUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Product Yield') }}</el-button>
      <el-button
        :disabled="!productYieldUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmProductYieldUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!productYieldUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelProductYieldUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableProductYield" style="width: 100%;">
      <el-table-column width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!productYieldUpdating">{{row.jan}}</div>
          <div v-if="productYieldUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!productYieldUpdating">{{row.feb}}</div>
          <div v-if="productYieldUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!productYieldUpdating">{{row.mar}}</div>
          <div v-if="productYieldUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!productYieldUpdating">{{row.apr}}</div>
          <div v-if="productYieldUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!productYieldUpdating">{{row.may}}</div>
          <div v-if="productYieldUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!productYieldUpdating">{{row.jun}}</div>
          <div v-if="productYieldUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!productYieldUpdating">{{row.jul}}</div>
          <div v-if="productYieldUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!productYieldUpdating">{{row.aug}}</div>
          <div v-if="productYieldUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!productYieldUpdating">{{row.sep}}</div>
          <div v-if="productYieldUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!productYieldUpdating">{{row.oct}}</div>
          <div v-if="productYieldUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!productYieldUpdating">{{row.nov}}</div>
          <div v-if="productYieldUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!productYieldUpdating">{{row.dec}}</div>
          <div v-if="productYieldUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="avg" label="avg"></el-table-column>
    </el-table>
    <!-- Cracker Utility Consumption -->
    <el-divider content-position="left">Cracker Utility Consumption</el-divider>
    <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 width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!crackerUtilityConsumptionUpdating">{{row.jan}}</div>
          <div v-if="crackerUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!crackerUtilityConsumptionUpdating">{{row.feb}}</div>
          <div v-if="crackerUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!crackerUtilityConsumptionUpdating">{{row.mar}}</div>
          <div v-if="crackerUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!crackerUtilityConsumptionUpdating">{{row.apr}}</div>
          <div v-if="crackerUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!crackerUtilityConsumptionUpdating">{{row.may}}</div>
          <div v-if="crackerUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!crackerUtilityConsumptionUpdating">{{row.jun}}</div>
          <div v-if="crackerUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!crackerUtilityConsumptionUpdating">{{row.jul}}</div>
          <div v-if="crackerUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!crackerUtilityConsumptionUpdating">{{row.aug}}</div>
          <div v-if="crackerUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!crackerUtilityConsumptionUpdating">{{row.sep}}</div>
          <div v-if="crackerUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!crackerUtilityConsumptionUpdating">{{row.oct}}</div>
          <div v-if="crackerUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!crackerUtilityConsumptionUpdating">{{row.nov}}</div>
          <div v-if="crackerUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!crackerUtilityConsumptionUpdating">{{row.dec}}</div>
          <div v-if="crackerUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
    </el-table>
    <!-- Cracker Energy Consumption -->
    <el-divider content-position="left">Cracker Energy Consumption</el-divider>
    <div class="editDiv">
      <el-button
        :disabled="crackerEnergyConsumptionUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleCrackerEnergyConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Cracker Energy Consumption') }}</el-button>
      <el-button
        :disabled="!crackerEnergyConsumptionUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmCrackerEnergyConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!crackerEnergyConsumptionUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelCrackerEnergyConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableCrackerEnergyConsumption" style="width: 100%;">
      <el-table-column width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!crackerEnergyConsumptionUpdating">{{row.jan}}</div>
          <div v-if="crackerEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!crackerEnergyConsumptionUpdating">{{row.feb}}</div>
          <div v-if="crackerEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!crackerEnergyConsumptionUpdating">{{row.mar}}</div>
          <div v-if="crackerEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!crackerEnergyConsumptionUpdating">{{row.apr}}</div>
          <div v-if="crackerEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!crackerEnergyConsumptionUpdating">{{row.may}}</div>
          <div v-if="crackerEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!crackerEnergyConsumptionUpdating">{{row.jun}}</div>
          <div v-if="crackerEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!crackerEnergyConsumptionUpdating">{{row.jul}}</div>
          <div v-if="crackerEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!crackerEnergyConsumptionUpdating">{{row.aug}}</div>
          <div v-if="crackerEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!crackerEnergyConsumptionUpdating">{{row.sep}}</div>
          <div v-if="crackerEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!crackerEnergyConsumptionUpdating">{{row.oct}}</div>
          <div v-if="crackerEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!crackerEnergyConsumptionUpdating">{{row.nov}}</div>
          <div v-if="crackerEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!crackerEnergyConsumptionUpdating">{{row.dec}}</div>
          <div v-if="crackerEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
      <el-table-column width="100" prop="avg" label="avg"></el-table-column>
    </el-table>
    <!-- Aromatics Utility Consumption -->
    <el-divider content-position="left">Aromatics Utility Consumption</el-divider>
    <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 width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.jan}}</div>
          <div v-if="aromaticsUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.feb}}</div>
          <div v-if="aromaticsUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.mar}}</div>
          <div v-if="aromaticsUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.apr}}</div>
          <div v-if="aromaticsUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.may}}</div>
          <div v-if="aromaticsUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.jun}}</div>
          <div v-if="aromaticsUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.jul}}</div>
          <div v-if="aromaticsUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.aug}}</div>
          <div v-if="aromaticsUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.sep}}</div>
          <div v-if="aromaticsUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.oct}}</div>
          <div v-if="aromaticsUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.nov}}</div>
          <div v-if="aromaticsUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsUtilityConsumptionUpdating">{{row.dec}}</div>
          <div v-if="aromaticsUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
    </el-table>
    <!-- Aromatics Energy Consumption -->
    <el-divider content-position="left">Aromatics Energy Consumption</el-divider>
    <div class="editDiv">
      <el-button
        :disabled="aromaticsEnergyConsumptionUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleAromaticsEnergyConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Aromatics Energy Consumption') }}</el-button>
      <el-button
        :disabled="!aromaticsEnergyConsumptionUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmAromaticsEnergyConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!aromaticsEnergyConsumptionUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelAromaticsEnergyConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableAromaticsEnergyConsumption" style="width: 100%;">
      <el-table-column width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsEnergyConsumptionUpdating">{{row.jan}}</div>
          <div v-if="aromaticsEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsEnergyConsumptionUpdating">{{row.feb}}</div>
          <div v-if="aromaticsEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsEnergyConsumptionUpdating">{{row.mar}}</div>
          <div v-if="aromaticsEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsEnergyConsumptionUpdating">{{row.apr}}</div>
          <div v-if="aromaticsEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsEnergyConsumptionUpdating">{{row.may}}</div>
          <div v-if="aromaticsEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsEnergyConsumptionUpdating">{{row.jun}}</div>
          <div v-if="aromaticsEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsEnergyConsumptionUpdating">{{row.jul}}</div>
          <div v-if="aromaticsEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsEnergyConsumptionUpdating">{{row.aug}}</div>
          <div v-if="aromaticsEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsEnergyConsumptionUpdating">{{row.sep}}</div>
          <div v-if="aromaticsEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsEnergyConsumptionUpdating">{{row.oct}}</div>
          <div v-if="aromaticsEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsEnergyConsumptionUpdating">{{row.nov}}</div>
          <div v-if="aromaticsEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!aromaticsEnergyConsumptionUpdating">{{row.dec}}</div>
          <div v-if="aromaticsEnergyConsumptionUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
      <el-table-column width="100" prop="avg" label="avg"></el-table-column>
    </el-table>
    <!-- Plant Load -->
    <el-divider content-position="left">Plant Load</el-divider>
    <div class="editDiv">
      <el-button
        :disabled="plantLoadUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handlePlantLoadUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Plant Load') }}</el-button>
      <el-button
        :disabled="!plantLoadUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmPlantLoadUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!plantLoadUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelPlantLoadUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tablePlantLoad" style="width: 100%;">
      <el-table-column width="150" prop="title" label="" fixed="left">
      <template slot-scope="scope">
        <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
      </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!plantLoadUpdating">{{row.jan}}</div>
          <div v-if="plantLoadUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!plantLoadUpdating">{{row.feb}}</div>
          <div v-if="plantLoadUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!plantLoadUpdating">{{row.mar}}</div>
          <div v-if="plantLoadUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!plantLoadUpdating">{{row.apr}}</div>
          <div v-if="plantLoadUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!plantLoadUpdating">{{row.may}}</div>
          <div v-if="plantLoadUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!plantLoadUpdating">{{row.jun}}</div>
          <div v-if="plantLoadUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!plantLoadUpdating">{{row.jul}}</div>
          <div v-if="plantLoadUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!plantLoadUpdating">{{row.aug}}</div>
          <div v-if="plantLoadUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!plantLoadUpdating">{{row.sep}}</div>
          <div v-if="plantLoadUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!plantLoadUpdating">{{row.oct}}</div>
          <div v-if="plantLoadUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!plantLoadUpdating">{{row.nov}}</div>
          <div v-if="plantLoadUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!plantLoadUpdating">{{row.dec}}</div>
          <div v-if="plantLoadUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
      <el-table-column width="100" prop="avg" label="avg"></el-table-column>
    </el-table>
    <!-- Cost Fr Ethylene -->
    <el-divider content-position="left">Cost Fr Ethylene</el-divider>
    <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 width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!costFrEthyleneUpdating">{{row.jan}}</div>
          <div v-if="costFrEthyleneUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!costFrEthyleneUpdating">{{row.feb}}</div>
          <div v-if="costFrEthyleneUpdating">
            <el-input class="input-element" v-model="row.feb" ></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!costFrEthyleneUpdating">{{row.mar}}</div>
          <div v-if="costFrEthyleneUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!costFrEthyleneUpdating">{{row.apr}}</div>
          <div v-if="costFrEthyleneUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!costFrEthyleneUpdating">{{row.may}}</div>
          <div v-if="costFrEthyleneUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!costFrEthyleneUpdating">{{row.jun}}</div>
          <div v-if="costFrEthyleneUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!costFrEthyleneUpdating">{{row.jul}}</div>
          <div v-if="costFrEthyleneUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!costFrEthyleneUpdating">{{row.aug}}</div>
          <div v-if="costFrEthyleneUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!costFrEthyleneUpdating">{{row.sep}}</div>
          <div v-if="costFrEthyleneUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!costFrEthyleneUpdating">{{row.oct}}</div>
          <div v-if="costFrEthyleneUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!costFrEthyleneUpdating">{{row.nov}}</div>
          <div v-if="costFrEthyleneUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!costFrEthyleneUpdating">{{row.dec}}</div>
          <div v-if="costFrEthyleneUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
    </el-table>
    <!-- Runing Rate -->
    <el-divider content-position="left">Runing Rate</el-divider>
    <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 width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!runingRateUpdating">{{row.jan}}</div>
          <div v-if="runingRateUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!runingRateUpdating">{{row.feb}}</div>
          <div v-if="runingRateUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!runingRateUpdating">{{row.mar}}</div>
          <div v-if="runingRateUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!runingRateUpdating">{{row.apr}}</div>
          <div v-if="runingRateUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!runingRateUpdating">{{row.may}}</div>
          <div v-if="runingRateUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!runingRateUpdating">{{row.jun}}</div>
          <div v-if="runingRateUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!runingRateUpdating">{{row.jul}}</div>
          <div v-if="runingRateUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!runingRateUpdating">{{row.aug}}</div>
          <div v-if="runingRateUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!runingRateUpdating">{{row.sep}}</div>
          <div v-if="runingRateUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!runingRateUpdating">{{row.oct}}</div>
          <div v-if="runingRateUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!runingRateUpdating">{{row.nov}}</div>
          <div v-if="runingRateUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!runingRateUpdating">{{row.dec}}</div>
          <div v-if="runingRateUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
      <el-table-column width="100" prop="avg" label="avg"></el-table-column>
    </el-table>
    <!-- Shoudown Hour -->
    <el-divider content-position="left">Shoudown Hour</el-divider>
    <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 width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!shoudownHourUpdating">{{row.jan}}</div>
          <div v-if="shoudownHourUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!shoudownHourUpdating">{{row.feb}}</div>
          <div v-if="shoudownHourUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!shoudownHourUpdating">{{row.mar}}</div>
          <div v-if="shoudownHourUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!shoudownHourUpdating">{{row.apr}}</div>
          <div v-if="shoudownHourUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!shoudownHourUpdating">{{row.may}}</div>
          <div v-if="shoudownHourUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!shoudownHourUpdating">{{row.jun}}</div>
          <div v-if="shoudownHourUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!shoudownHourUpdating">{{row.jul}}</div>
          <div v-if="shoudownHourUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!shoudownHourUpdating">{{row.aug}}</div>
          <div v-if="shoudownHourUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!shoudownHourUpdating">{{row.sep}}</div>
          <div v-if="shoudownHourUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!shoudownHourUpdating">{{row.oct}}</div>
          <div v-if="shoudownHourUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!shoudownHourUpdating">{{row.nov}}</div>
          <div v-if="shoudownHourUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!shoudownHourUpdating">{{row.dec}}</div>
          <div v-if="shoudownHourUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
    </el-table>
    <!-- Otherside -->
    <el-divider content-position="left">Otherside</el-divider>
    <div class="editDiv">
      <el-button
        :disabled="othersideUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleOthersideUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑Otherside') }}</el-button>
      <el-button
        :disabled="!othersideUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmOthersideUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!othersideUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelOthersideUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableOtherside" style="width: 100%;">
      <el-table-column width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!othersideUpdating">{{row.jan}}</div>
          <div v-if="othersideUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!othersideUpdating">{{row.feb}}</div>
          <div v-if="othersideUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!othersideUpdating">{{row.mar}}</div>
          <div v-if="othersideUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!othersideUpdating">{{row.apr}}</div>
          <div v-if="othersideUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!othersideUpdating">{{row.may}}</div>
          <div v-if="othersideUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!othersideUpdating">{{row.jun}}</div>
          <div v-if="othersideUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!othersideUpdating">{{row.jul}}</div>
          <div v-if="othersideUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!othersideUpdating">{{row.aug}}</div>
          <div v-if="othersideUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!othersideUpdating">{{row.sep}}</div>
          <div v-if="othersideUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!othersideUpdating">{{row.oct}}</div>
          <div v-if="othersideUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!othersideUpdating">{{row.nov}}</div>
          <div v-if="othersideUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!othersideUpdating">{{row.dec}}</div>
          <div v-if="othersideUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
      <el-table-column width="100" prop="avg" label="avg"></el-table-column>
    </el-table>
    <!-- Chemical Consume -->
    <el-divider content-position="left">Chemical Consume</el-divider>
    <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 width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!chemicalConsumeUpdating">{{row.jan}}</div>
          <div v-if="chemicalConsumeUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!chemicalConsumeUpdating">{{row.feb}}</div>
          <div v-if="chemicalConsumeUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!chemicalConsumeUpdating">{{row.mar}}</div>
          <div v-if="chemicalConsumeUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!chemicalConsumeUpdating">{{row.apr}}</div>
          <div v-if="chemicalConsumeUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!chemicalConsumeUpdating">{{row.may}}</div>
          <div v-if="chemicalConsumeUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!chemicalConsumeUpdating">{{row.jun}}</div>
          <div v-if="chemicalConsumeUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!chemicalConsumeUpdating">{{row.jul}}</div>
          <div v-if="chemicalConsumeUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!chemicalConsumeUpdating">{{row.aug}}</div>
          <div v-if="chemicalConsumeUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!chemicalConsumeUpdating">{{row.sep}}</div>
          <div v-if="chemicalConsumeUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!chemicalConsumeUpdating">{{row.oct}}</div>
          <div v-if="chemicalConsumeUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!chemicalConsumeUpdating">{{row.nov}}</div>
          <div v-if="chemicalConsumeUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!chemicalConsumeUpdating">{{row.dec}}</div>
          <div v-if="chemicalConsumeUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
    </el-table>
    <!-- SCTU Utility Consumption -->
    <el-divider content-position="left">SCTU Utility Consumption</el-divider>
    <div class="editDiv">
      <el-button
        :disabled="sctuUtilityConsumptionUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleSCTUUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑SCTU Utility Consumption') }}</el-button>
      <el-button
        :disabled="!sctuUtilityConsumptionUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmSctuUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!sctuUtilityConsumptionUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelSctuUtilityConsumptionUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableSCTUUtilityConsumption" style="width: 100%;">
      <el-table-column width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!sctuUtilityConsumptionUpdating">{{row.jan}}</div>
          <div v-if="sctuUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!sctuUtilityConsumptionUpdating">{{row.feb}}</div>
          <div v-if="sctuUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!sctuUtilityConsumptionUpdating">{{row.mar}}</div>
          <div v-if="sctuUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!sctuUtilityConsumptionUpdating">{{row.apr}}</div>
          <div v-if="sctuUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!sctuUtilityConsumptionUpdating">{{row.may}}</div>
          <div v-if="sctuUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!sctuUtilityConsumptionUpdating">{{row.jun}}</div>
          <div v-if="sctuUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!sctuUtilityConsumptionUpdating">{{row.jul}}</div>
          <div v-if="sctuUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!sctuUtilityConsumptionUpdating">{{row.aug}}</div>
          <div v-if="sctuUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!sctuUtilityConsumptionUpdating">{{row.sep}}</div>
          <div v-if="sctuUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!sctuUtilityConsumptionUpdating">{{row.oct}}</div>
          <div v-if="sctuUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!sctuUtilityConsumptionUpdating">{{row.nov}}</div>
          <div v-if="sctuUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!sctuUtilityConsumptionUpdating">{{row.dec}}</div>
          <div v-if="sctuUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
    </el-table>
    <!-- SUB Utility Consumption -->
    <el-divider content-position="left">SUB Utility Consumption</el-divider>
    <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 width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!subUtilityConsumptionUpdating">{{row.jan}}</div>
          <div v-if="subUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!subUtilityConsumptionUpdating">{{row.feb}}</div>
          <div v-if="subUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!subUtilityConsumptionUpdating">{{row.mar}}</div>
          <div v-if="subUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!subUtilityConsumptionUpdating">{{row.apr}}</div>
          <div v-if="subUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!subUtilityConsumptionUpdating">{{row.may}}</div>
          <div v-if="subUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!subUtilityConsumptionUpdating">{{row.jun}}</div>
          <div v-if="subUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!subUtilityConsumptionUpdating">{{row.jul}}</div>
          <div v-if="subUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!subUtilityConsumptionUpdating">{{row.aug}}</div>
          <div v-if="subUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!subUtilityConsumptionUpdating">{{row.sep}}</div>
          <div v-if="subUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!subUtilityConsumptionUpdating">{{row.oct}}</div>
          <div v-if="subUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!subUtilityConsumptionUpdating">{{row.nov}}</div>
          <div v-if="subUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!subUtilityConsumptionUpdating">{{row.dec}}</div>
          <div v-if="subUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
    </el-table>
    <!-- SCTF Utility Consumption -->
    <el-divider content-position="left">SCTF Utility Consumption</el-divider>
    <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 width="150" prop="title" label="" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!sctfUtilityConsumptionUpdating">{{row.jan}}</div>
          <div v-if="sctfUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!sctfUtilityConsumptionUpdating">{{row.feb}}</div>
          <div v-if="sctfUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!sctfUtilityConsumptionUpdating">{{row.mar}}</div>
          <div v-if="sctfUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!sctfUtilityConsumptionUpdating">{{row.apr}}</div>
          <div v-if="sctfUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!sctfUtilityConsumptionUpdating">{{row.may}}</div>
          <div v-if="sctfUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!sctfUtilityConsumptionUpdating">{{row.jun}}</div>
          <div v-if="sctfUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!sctfUtilityConsumptionUpdating">{{row.jul}}</div>
          <div v-if="sctfUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!sctfUtilityConsumptionUpdating">{{row.aug}}</div>
          <div v-if="sctfUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!sctfUtilityConsumptionUpdating">{{row.sep}}</div>
          <div v-if="sctfUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!sctfUtilityConsumptionUpdating">{{row.oct}}</div>
          <div v-if="sctfUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!sctfUtilityConsumptionUpdating">{{row.nov}}</div>
          <div v-if="sctfUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!sctfUtilityConsumptionUpdating">{{row.dec}}</div>
          <div v-if="sctfUtilityConsumptionUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
    </el-table>
    <!-- KBI -->
    <el-divider content-position="left">KBI</el-divider>
    <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 width="150" prop="title" label="KBI" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.jan}}</div>
          <div v-if="kbiUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.feb}}</div>
          <div v-if="kbiUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.mar}}</div>
          <div v-if="kbiUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.apr}}</div>
          <div v-if="kbiUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.may}}</div>
          <div v-if="kbiUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.jun}}</div>
          <div v-if="kbiUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.jul}}</div>
          <div v-if="kbiUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.aug}}</div>
          <div v-if="kbiUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.sep}}</div>
          <div v-if="kbiUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.oct}}</div>
          <div v-if="kbiUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.nov}}</div>
          <div v-if="kbiUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!kbiUpdating">{{row.dec}}</div>
          <div v-if="kbiUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
      <el-table-column width="100" prop="avg" label="avg"></el-table-column>
    </el-table>
    <!-- Summary -->
    <el-divider content-position="left">BCC装置主要原材料及公用工程消耗</el-divider>
    <div class="editDiv">
      <el-button
        :disabled="summaryUpdating"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="handleSummaryUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('编辑BCC装置主要原材料及公用工程消耗') }}</el-button>
      <el-button
        :disabled="!summaryUpdating"
        type="success"
        icon="el-icon-check"
        size="mini"
        @click="handleConfirmSummaryUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('保存') }}</el-button>
      <el-button
        :disabled="!summaryUpdating"
        type="info"
        icon="el-icon-close"
        size="mini"
        @click="handleCancelSummaryUpdate"
        v-hasPermi="['production:monthly:edit']"
      >{{ $t('取消') }}</el-button>
    </div>
    <el-table border :data="tableSummary" style="width: 100%;">
      <el-table-column width="150" prop="title" label="项目" fixed="left">
        <template slot-scope="scope">
          <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
      <el-table-column width="100" prop="currently" label="currently"></el-table-column>
      <el-table-column width="100" prop="jan" :label="this.monthList[0]">
        <template slot-scope="{row}">
          <div v-if="!summaryUpdating">{{row.jan}}</div>
          <div v-if="summaryUpdating">
            <el-input class="input-element" v-model="row.jan" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="feb" :label="this.monthList[1]">
        <template slot-scope="{row}">
          <div v-if="!summaryUpdating">{{row.feb}}</div>
          <div v-if="summaryUpdating">
            <el-input class="input-element" v-model="row.feb" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="mar" :label="this.monthList[2]">
        <template slot-scope="{row}">
          <div v-if="!summaryUpdating">{{row.mar}}</div>
          <div v-if="summaryUpdating">
            <el-input class="input-element" v-model="row.mar" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="apr" :label="this.monthList[3]">
        <template slot-scope="{row}">
          <div v-if="!summaryUpdating">{{row.apr}}</div>
          <div v-if="summaryUpdating">
            <el-input class="input-element" v-model="row.apr" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="may" :label="this.monthList[4]">
        <template slot-scope="{row}">
          <div v-if="!summaryUpdating">{{row.may}}</div>
          <div v-if="summaryUpdating">
            <el-input class="input-element" v-model="row.may" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jun" :label="this.monthList[5]">
        <template slot-scope="{row}">
          <div v-if="!summaryUpdating">{{row.jun}}</div>
          <div v-if="summaryUpdating">
            <el-input class="input-element" v-model="row.jun" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="jul" :label="this.monthList[6]">
        <template slot-scope="{row}">
          <div v-if="!summaryUpdating">{{row.jul}}</div>
          <div v-if="summaryUpdating">
            <el-input class="input-element" v-model="row.jul" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="aug" :label="this.monthList[7]">
        <template slot-scope="{row}">
          <div v-if="!summaryUpdating">{{row.aug}}</div>
          <div v-if="summaryUpdating">
            <el-input class="input-element" v-model="row.aug" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="sep" :label="this.monthList[8]">
        <template slot-scope="{row}">
          <div v-if="!summaryUpdating">{{row.sep}}</div>
          <div v-if="summaryUpdating">
            <el-input class="input-element" v-model="row.sep" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="oct" :label="this.monthList[9]">
        <template slot-scope="{row}">
          <div v-if="!summaryUpdating">{{row.oct}}</div>
          <div v-if="summaryUpdating">
            <el-input class="input-element" v-model="row.oct" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="nov" :label="this.monthList[10]">
        <template slot-scope="{row}">
          <div v-if="!summaryUpdating">{{row.nov}}</div>
          <div v-if="summaryUpdating">
            <el-input class="input-element" v-model="row.nov" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="dec" :label="this.monthList[11]">
        <template slot-scope="{row}">
          <div v-if="!summaryUpdating">{{row.dec}}</div>
          <div v-if="summaryUpdating">
            <el-input class="input-element" v-model="row.dec" clearable></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="total" label="total"></el-table-column>
    </el-table>
    <!-- 趋势分析对话框 -->
    <el-dialog  :close-on-click-modal="false" @close="disposeChart" :title="analysis.title" :visible.sync="analysis.open" width="80%" 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:100%; height: 600px;"></div>
    </el-dialog>
    <!-- 开工锅炉公用工程单价维护对话框 -->
    <el-dialog  :close-on-click-modal="false" :title="priceMgmt.title" :visible.sync="priceMgmt.open" width="80%" append-to-body>
      <div class="editDiv">
        <el-button
          :disabled="priceUpdating"
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="handlePriceUpdate"
          v-hasPermi="['production:price:edit']"
        >{{ $t('编辑') }}</el-button>
        <el-button
          :disabled="!priceUpdating"
          type="success"
          icon="el-icon-check"
          size="mini"
          @click="handleConfirmPriceUpdate"
          v-hasPermi="['production:price:edit']"
        >{{ $t('保存') }}</el-button>
        <el-button
          :disabled="!priceUpdating"
          type="info"
          icon="el-icon-close"
          size="mini"
          @click="handleCancelPriceUpdate"
          v-hasPermi="['production:price:edit']"
        >{{ $t('取消') }}</el-button>
      </div>
      <el-table border :data="tablePrice" style="width: 100%; margin-bottom: 20px;">
        <el-table-column width="150" prop="title" label="" fixed="left"></el-table-column>
        <el-table-column width="80" prop="unit" label="unit" fixed="left"></el-table-column>
        <el-table-column width="100" prop="currently" label="currently"></el-table-column>
        <el-table-column width="100" prop="jan" :label="this.monthList[0]">
          <template slot-scope="{row}">
            <div v-if="!priceUpdating">{{row.jan}}</div>
            <div v-if="priceUpdating">
              <el-input v-model="row.jan" clearable></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="feb" :label="this.monthList[1]">
          <template slot-scope="{row}">
            <div v-if="!priceUpdating">{{row.feb}}</div>
            <div v-if="priceUpdating">
              <el-input v-model="row.feb" clearable></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="mar" :label="this.monthList[2]">
          <template slot-scope="{row}">
            <div v-if="!priceUpdating">{{row.mar}}</div>
            <div v-if="priceUpdating">
              <el-input v-model="row.mar" clearable></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="apr" :label="this.monthList[3]">
          <template slot-scope="{row}">
            <div v-if="!priceUpdating">{{row.apr}}</div>
            <div v-if="priceUpdating">
              <el-input v-model="row.apr" clearable></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="may" :label="this.monthList[4]">
          <template slot-scope="{row}">
            <div v-if="!priceUpdating">{{row.may}}</div>
            <div v-if="priceUpdating">
              <el-input v-model="row.may" clearable></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="jun" :label="this.monthList[5]">
          <template slot-scope="{row}">
            <div v-if="!priceUpdating">{{row.jun}}</div>
            <div v-if="priceUpdating">
              <el-input v-model="row.jun" clearable></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="jul" :label="this.monthList[6]">
          <template slot-scope="{row}">
            <div v-if="!priceUpdating">{{row.jul}}</div>
            <div v-if="priceUpdating">
              <el-input v-model="row.jul" clearable></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="aug" :label="this.monthList[7]">
          <template slot-scope="{row}">
            <div v-if="!priceUpdating">{{row.aug}}</div>
            <div v-if="priceUpdating">
              <el-input v-model="row.aug" clearable></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="sep" :label="this.monthList[8]">
          <template slot-scope="{row}">
            <div v-if="!priceUpdating">{{row.sep}}</div>
            <div v-if="priceUpdating">
              <el-input v-model="row.sep" clearable></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="oct" :label="this.monthList[9]">
          <template slot-scope="{row}">
            <div v-if="!priceUpdating">{{row.oct}}</div>
            <div v-if="priceUpdating">
              <el-input v-model="row.oct" clearable></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="nov" :label="this.monthList[10]">
          <template slot-scope="{row}">
            <div v-if="!priceUpdating">{{row.nov}}</div>
            <div v-if="priceUpdating">
              <el-input v-model="row.nov" clearable></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="dec" :label="this.monthList[11]">
          <template slot-scope="{row}">
            <div v-if="!priceUpdating">{{row.dec}}</div>
            <div v-if="priceUpdating">
              <el-input v-model="row.dec" clearable></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="avg" label="avg"></el-table-column>
      </el-table>
    </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,
  updateCrackerRawMaterial,
  updateCrackerOutputProduct,
  updateAromaticsRawMaterial,
  updateAromaticsOutputProduct,
  updateProductYield,
  updateCrackerEnergyConsumption,
  updateAromaticsEnergyConsumption,
  updatePlantLoad,
  updateOtherside,
  updateSctuUtilityConsumption,
  updateSummary,
  exportMonthlyReport
} from "@/api/production/monthly";
import {
  getPriceByYear,
  updatePriceList
} from "@/api/production/price";

export default {
  name: "Monthly",
  data() {
    return {
      // 修改中
      priceUpdating: false,
      subUtilityConsumptionUpdating: false,
      sctfUtilityConsumptionUpdating: false,
      kbiUpdating: false,
      costFrEthyleneUpdating: false,
      chemicalConsumeUpdating: false,
      runingRateUpdating: false,
      shoudownHourUpdating: false,
      aromaticsUtilityConsumptionUpdating: false,
      crackerUtilityConsumptionUpdating: false,
      eligibleProductRateUpdating: false,
      crackerRawMaterialUpdating: false,
      crackerOutputProductUpdating: false,
      aromaticsRawMaterialUpdating: false,
      aromaticsOutputProductUpdating: false,
      productYieldUpdating: false,
      crackerEnergyConsumptionUpdating: false,
      aromaticsEnergyConsumptionUpdating: false,
      plantLoadUpdating: false,
      othersideUpdating: false,
      sctuUtilityConsumptionUpdating: false,
      summaryUpdating: false,
      // 趋势图y轴数值
      valueList: [],
      // 趋势图x轴日期
      dateList: [],
      // y轴最大值
      maxValue: null,
      // y轴最小值
      minValue: null,
      // 趋势图
      chart: null,
      // 趋势分析参数
      analysis: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
      },
      // 价格管理参数
      priceMgmt: {
        // 是否显示弹出层
        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: [],
      tablePrice: [],
    }
  },
  created() {
    // 加载时设置year为今年
    this.year = new Date();
    // 加载月报数据
    this.getMonthlyReport();
  },
  methods: {
    /** 导出按钮操作 */
    handleExport() {
      // 获取选中的年份
      let year = this.year.getFullYear();
      this.$confirm("是否确认导出" + year + "年全部月报数据？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return exportMonthlyReport(year);
      }).then(response => {
        this.download(response.msg);
      })
    },
    /** 点击开工锅炉公用工程单价维护事件处理 */
    handleQueryPrice() {
      let year = this.year.getFullYear();
      this.priceMgmt.title = year + "年开工锅炉公用工程单价维护";
      this.priceMgmt.open = true;
      getPriceByYear(year).then(response => {
        this.tablePrice = response.data;
      });
    },
    /** 编辑按钮操作 */
    handleCrackerRawMaterialUpdate(row) {
      this.crackerRawMaterialUpdating = true;
    },
    handleCrackerOutputProductUpdate(row) {
      this.crackerOutputProductUpdating = true;
    },
    handleAromaticsRawMaterialUpdate(row) {
      this.aromaticsRawMaterialUpdating = true;
    },
    handleAromaticsOutputProductUpdate(row) {
      this.aromaticsOutputProductUpdating = true;
    },
    handleProductYieldUpdate(row) {
      this.productYieldUpdating = true;
    },
    handleCrackerEnergyConsumptionUpdate(row) {
      this.crackerEnergyConsumptionUpdating = true;
    },
    handleAromaticsEnergyConsumptionUpdate(row) {
      this.aromaticsEnergyConsumptionUpdating = true;
    },
    handlePlantLoadUpdate(row) {
      this.plantLoadUpdating = true;
    },
    handleOthersideUpdate(row) {
      this.othersideUpdating = true;
    },
    handleSCTUUtilityConsumptionUpdate(row) {
      this.sctuUtilityConsumptionUpdating = true;
    },
    handleSummaryUpdate(row) {
      this.summaryUpdating = true;
    },
    handlePriceUpdate(row) {
      this.priceUpdating = true;
    },
    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;
    },
    /** 校验用户输入是否为数字 */
    isNumberInput() {
      let flag = true;
      let inputNodes = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < inputNodes.length; i++) {
        let value = inputNodes[i].value;
        if (value != this.year.getFullYear() &&
          value != this.analysisDialogElement.startDate &&
          value != this.analysisDialogElement.endDate
        ) {
          if (isNaN(Number(value)) == true) {
            flag = false;
          }
        }
      }
      if (flag == true) {
        return true;
      } else {
        this.$message.info("输入值不合法，必须为数值类型。");
        return false;
      }
    },
    /** 确定修改按钮操作 */
    handleConfirmCrackerRawMaterialUpdate(row) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.crackerRawMaterialUpdating = false;
      updateCrackerRawMaterial({
        tableData: this.tableCrackerRawMaterial,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getCrackerRawMaterial(year).then(response => {
          this.tableCrackerRawMaterial = response.data;
        });
      });
    },
    handleConfirmCrackerOutputProductUpdate(row) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.crackerOutputProductUpdating = false;
      updateCrackerOutputProduct({
        tableData: this.tableCrackerOutputProduct,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getCrackerOutputProduct(year).then(response => {
          this.tableCrackerOutputProduct = response.data;
        });
      });
    },
    handleConfirmAromaticsRawMaterialUpdate(row) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.aromaticsRawMaterialUpdating = false;
      updateAromaticsRawMaterial({
        tableData: this.tableAromaticsRawMaterial,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getAromaticsRawMaterial(year).then(response => {
          this.tableAromaticsRawMaterial = response.data;
        });
      });
    },
    handleConfirmAromaticsOutputProductUpdate(row) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.aromaticsOutputProductUpdating = false;
      updateAromaticsOutputProduct({
        tableData: this.tableAromaticsOutputProduct,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getAromaticsOutputProduct(year).then(response => {
          this.tableAromaticsOutputProduct = response.data;
        });
      });
    },
    handleConfirmProductYieldUpdate(row) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.productYieldUpdating = false;
      updateProductYield({
        tableData: this.tableProductYield,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getProductYield(year).then(response => {
          this.tableProductYield = response.data;
        });
      });
    },
    handleConfirmCrackerEnergyConsumptionUpdate(row) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.crackerEnergyConsumptionUpdating = false;
      updateCrackerEnergyConsumption({
        tableData: this.tableCrackerEnergyConsumption,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getCrackerEnergyConsumption(year).then(response => {
          this.tableCrackerEnergyConsumption = response.data;
        });
      });
    },
    handleConfirmAromaticsEnergyConsumptionUpdate(row) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.aromaticsEnergyConsumptionUpdating = false;
      updateAromaticsEnergyConsumption({
        tableData: this.tableAromaticsEnergyConsumption,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getAromaticsEnergyConsumption(year).then(response => {
          this.tableAromaticsEnergyConsumption = response.data;
        });
      });
    },
    handleConfirmPlantLoadUpdate(row) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.plantLoadUpdating = false;
      updatePlantLoad({
        tableData: this.tablePlantLoad,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getPlantLoad(year).then(response => {
          this.tablePlantLoad = response.data;
        });
      });
    },
    handleConfirmOthersideUpdate(row) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.othersideUpdating = false;
      updateOtherside({
        tableData: this.tableOtherside,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getOtherside(year).then(response => {
          this.tableOtherside = response.data;
        });
      });
    },
    handleConfirmSctuUtilityConsumptionUpdate(row) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.sctuUtilityConsumptionUpdating = false;
      updateSctuUtilityConsumption({
        tableData: this.tableSCTUUtilityConsumption,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getSCTUUtilityConsumption(year).then(response => {
          this.tableSCTUUtilityConsumption = response.data;
        });
      });
    },
    handleConfirmSummaryUpdate(row) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.summaryUpdating = false;
      updateSummary({
        tableData: this.tableSummary,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getSummary(year).then(response => {
          this.tableSummary = response.data;
        });
      });
    },
    handleConfirmPriceUpdate(row) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.priceUpdating = false;
      updatePriceList({
        tableData: this.tablePrice,
        year: this.year.getFullYear()
      }).then(response => {
        if (response.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("未知错误，请联系管理员。");
        }
        getPriceByYear(year).then(response => {
          this.tablePrice = response.data;
        });
      });
    },
    handleConfirmSubUtilityConsumptionUpdate(row) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.subUtilityConsumptionUpdating = false;
      updateSUBUtilityConsumption({
        tableData: this.tableSUBUtilityConsumption,
        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) {
      if (this.isNumberInput() == false) {
        return false;
      }
      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) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.kbiUpdating = false;
      updateKbi({
        tableData: this.tableKBI,
        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) {
      if (this.isNumberInput() == false) {
        return false;
      }
      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) {
      if (this.isNumberInput() == false) {
        return false;
      }
      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) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.runingRateUpdating = false;
      updateRuningRate({
        tableData: this.tableRuningRate,
        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) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.shoudownHourUpdating = false;
      updateShoudownHour({
        tableData: this.tableShoudownHour,
        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) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.aromaticsUtilityConsumptionUpdating = false;
      updateAromaticsUtilityConsumption({
        tableData: this.tableAromaticsUtilityConsumption,
        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) {
      if (this.isNumberInput() == false) {
        return false;
      }
      this.crackerUtilityConsumptionUpdating = false;
      updateCrackerUtilityConsumption({
        tableData: this.tableCrackerUtilityConsumption,
        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) {
      if (this.isNumberInput() == false) {
        return false;
      }
      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;
        });
      });
    },
    /** 取消修改按钮操作 */
    handleCancelCrackerRawMaterialUpdate(row) {
      this.crackerRawMaterialUpdating = false;
      getCrackerRawMaterial(year).then(response => {
        this.tableCrackerRawMaterial = response.data;
      });
    },
    handleCancelCrackerOutputProductUpdate(row) {
      this.crackerOutputProductUpdating = false;
      getCrackerOutputProduct(year).then(response => {
        this.tableCrackerOutputProduct = response.data;
      });
    },
    handleCancelAromaticsRawMaterialUpdate(row) {
      this.aromaticsRawMaterialUpdating = false;
      getAromaticsRawMaterial(year).then(response => {
        this.tableAromaticsRawMaterial = response.data;
      });
    },
    handleCancelAromaticsOutputProductUpdate(row) {
      this.aromaticsOutputProductUpdating = false;
      getAromaticsOutputProduct(year).then(response => {
        this.tableAromaticsOutputProduct = response.data;
      });
    },
    handleCancelProductYieldUpdate(row) {
      this.productYieldUpdating = false;
      getProductYield(year).then(response => {
        this.tableProductYield = response.data;
      });
    },
    handleCancelCrackerEnergyConsumptionUpdate(row) {
      this.crackerEnergyConsumptionUpdating = false;
      getCrackerEnergyConsumption(year).then(response => {
        this.tableCrackerEnergyConsumption = response.data;
      });
    },
    handleCancelAromaticsEnergyConsumptionUpdate(row) {
      this.aromaticsEnergyConsumptionUpdating = false;
      getAromaticsEnergyConsumption(year).then(response => {
        this.tableAromaticsEnergyConsumption = response.data;
      });
    },
    handleCancelPlantLoadUpdate(row) {
      this.plantLoadUpdating = false;
      getPlantLoad(year).then(response => {
        this.tablePlantLoad = response.data;
      });
    },
    handleCancelOthersideUpdate(row) {
      this.othersideUpdating = false;
      getOtherside(year).then(response => {
        this.tableOtherside = response.data;
      });
    },
    handleCancelSctuUtilityConsumptionUpdate(row) {
      this.sctuUtilityConsumptionUpdating = false;
      getSCTUUtilityConsumption(year).then(response => {
        this.tableSCTUUtilityConsumption = response.data;
      });
    },
    handleCancelSummaryUpdate(row) {
      this.summaryUpdating = false;
      getSummary(year).then(response => {
        this.tableSummary = response.data;
      });
    },
    handleCancelPriceUpdate(row) {
      this.priceUpdating = false;
      getPriceByYear(year).then(response => {
        this.tablePrice = 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>
  @import url("css/monthly.css");
  .editDiv{
    margin-bottom: 10px;
  }
</style>
