王子文 生产月报 前端

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

@@ -16,9 +16,389 @@
         >导出</el-button>
         </el-form-item>
     </el-form>
-    <el-table border :data="tableData" style="width: 100%">
-      <el-table-column prop="title" label=""></el-table-column>
-      <el-table-column prop="unit" label=""></el-table-column>
+    <el-table border :data="tableCrackerRawMaterial" style="width: 100%;">
+      <el-table-column label="Cracker Raw Material">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableCrackerOutputProduct" style="width: 100%;">
+      <el-table-column label="Cracker Output Product">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableAromaticsRawMaterial" style="width: 100%;">
+      <el-table-column label="Aromatics Raw Material">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableAromaticsOutputProduct" style="width: 100%;">
+      <el-table-column label="Aromatics Output Product">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableEligibleProductRate" style="width: 100%;">
+      <el-table-column label="Eligible Product rate">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableProductYield" style="width: 100%;">
+      <el-table-column label="Product yield">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableCrackerUtilityConsumption" style="width: 100%;">
+      <el-table-column label="Cracker Utility Consumption">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableCrackerEnergyConsumption" style="width: 100%;">
+      <el-table-column label="Cracker Energy Consumption">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableAromaticsUtilityConsumption" style="width: 100%;">
+      <el-table-column label="Aromatics Utility Consumption">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableAromaticsEnergyConsumption" style="width: 100%;">
+      <el-table-column label="Cracker Aromatics Consumption">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tablePlantLoad" style="width: 100%;">
+      <el-table-column label="Plant load">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableCostFrEthylene" style="width: 100%;">
+      <el-table-column label="Cost fr Ethylene">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableRuningRate" style="width: 100%;">
+      <el-table-column label="Runing Rate">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableShoudownHour" style="width: 100%;">
+      <el-table-column label="Shoudown Hour">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableOtherside" style="width: 100%;">
+      <el-table-column label="Otherside">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableChemicalConsume" style="width: 100%;">
+      <el-table-column label="chemical consume">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableSCTUUtilityConsumption" style="width: 100%;">
+      <el-table-column label="SCTU Utility Consumption">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableSUBUtilityConsumption" style="width: 100%;">
+      <el-table-column label="SUB Utility Consumption">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableSCTFUtilityConsumption" style="width: 100%;">
+      <el-table-column label="SCTF Utility Consumption">
+        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column prop="unit" label="unit"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <el-table border :data="tableKBI" style="width: 100%;">
+      <el-table-column prop="kbi" label="KBI"></el-table-column>
+      <el-table-column prop="target" label="target"></el-table-column>
       <el-table-column prop="currently" label="currently"></el-table-column>
       <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
       <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
@@ -34,6 +414,26 @@
       <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
       <el-table-column prop="total" label="total"></el-table-column>
     </el-table>
+    <el-table border :data="tableSummary" style="width: 100%;">
+      <el-table-column label="BCC装置主要原材料及公用工程消耗">
+        <el-table-column prop="item" label="项目"></el-table-column>
+        <el-table-column prop="usage" label="年耗量"></el-table-column>
+        <el-table-column prop="currently" label="currently"></el-table-column>
+        <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
+        <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
+        <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
+        <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
+        <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
+        <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
+        <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
+        <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
+        <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
+        <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
+        <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
+        <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
+        <el-table-column prop="total" label="total"></el-table-column>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
@@ -42,35 +442,334 @@
     name: "Monthly",
       data() {
         return {
+          tableCrackerRawMaterial: [
+            {title: "Cracker Raw Material"},
+            {title: "NAP"},
+            {title: "C5"},
+            {title: "NA"},
+            {title: "Wison Ethane"},
+            {title: "LPG to Furnace"},
+            {title: "C4 Raff3  fr bd and 2ph"},
+            {title: "C2 fr LDPE"},
+            {title: "C3 fr OXO"},
+            {title: "Mixed C3/C4 fr BD"},
+            {title: "HC9"},
+            {title: "Offgas fr AEU"},
+            {title: "wash oil"},
+            {title: "toluene"},
+            {title: "C4 Recycle(ton)"},
+            {title: "input total"},
+            {title: "Total feed"},
+          ],
+          tableCrackerOutputProduct: [
+            {title: "Cracker Output Product"},
+            {title: "H2"},
+            {title: "C2="},
+            {title: "C3="},
+            {title: "C3/C4 LPG"},
+            {title: "C4'S"},
+            {title: "RPG"},
+            {title: "PO"},
+            {title: "Naphthalene"},
+            {title: "EBO"},
+            {title: "Cracker Residue "},
+            {title: "Methane"},
+            {title: "OFFAGE"},
+            {title: "output total"},
+          ],
+          tableAromaticsRawMaterial: [
+            {title: "Aromatics Raw Material"},
+            {title: "RPG fr EU"},
+            {title: "H2 to PGU"},
+            {title: "Mix BTX Product"},
+            {title: "Mix BTX to AEU"},
+            {title: "input total"},
+          ],
+          tableAromaticsOutputProduct: [
+            {title:"Aromatics Output Product"},
+            {title:"Benzene"},
+            {title:"Toluene"},
+            {title:"Xylene"},
+            {title:"C6-C8 NA"},
+            {title:"C5"},
+            {title:"C9"},
+            {title:"Wash oil"},
+            {title:"offags"},
+            {title:"MIX BTX change"},
+            {title:"BTX Product"},
+            {title:"Toluene Product(- EU)"},
+            {title:"output total"},
+          ],
+          tableEligibleProductRate: [
+            {title: "C2="},
+            {title: "C3="},
+            {title: "C4's"},
+          ],
+          tableProductYield: [
+            {title: "gaseity"},
+            {title: "tatal"},
+            {title: "C3/C2"},
+            {title: "H2"},
+            {title: "ethylene"},
+            {title: "propylene"},
+            {title: "C3/C4 LPG"},
+            {title: "C4'S"},
+            {title: "PO"},
+            {title: "Naphthalene"},
+            {title: "EBO"},
+            {title: "WS"},
+            {title: "Methane"},
+            {title: "OFFAGE"},
+            {title: "RPG"},
+            {title: "Benzene"},
+            {title: "Toluene"},
+            {title: "Xylene"},
+            {title: "C6-C8 NA"},
+            {title: "C5"},
+            {title: "C9"},
+          ],
+          tableCrackerUtilityConsumption: [
+            {title: "FG(include NG+Offage)"},
+            {title: "SS"},
+            {title: "HS"},
+            {title: "MS"},
+            {title: "LS"},
+            {title: "Electricity"},
+            {title: "coiling water"},
+            {title: "Instru. Air"},
+            {title: "Plant Air"},
+            {title: "N2"},
+            {title: "BFW"},
+            {title: "Polished Condensate"},
+            {title: "P. W. Water"},
+            {title: "TC"},
+            {title: "CNWW"},
+            {title: "DWW"},
+            {title: "waste oil"},
+            {title: "Potable Water"},
+            {title: "Production Water"},
+            {title: "NG to furnace or offags to SUB"},
+            {title: "offage product"},
+          ],
+          tableCrackerEnergyConsumption: [
+            {title: "total energy"},
+            {title: "total energy"},
+            {title: "Energy/ethylene"},
+            {title: "Energy/ethylene"},
+          ],
+          tableAromaticsUtilityConsumption: [
+            {title: "SS"},
+            {title: "HS"},
+            {title: "MS"},
+            {title: "LS"},
+            {title: "Electricity"},
+            {title: "coiling water"},
+            {title: "Potable Water"},
+            {title: "Production Water"},
+            {title: "BFW"},
+            {title: "N2"},
+            {title: "PA&IA"},
+            {title: "Turbine Condensate"},
+            {title: "Contaminated WW"},
+            {title: "Production WW"},
+            {title: "DWW"},
+            {title: "Waste Liquid"},
+          ],
+          tableAromaticsEnergyConsumption: [
+            {title: "total energy"},
+            {title: "total energy"},
+            {title: "Energy/ethylene"},
+            {title: "Energy/ethylene"},
+          ],
+          tablePlantLoad: [
+            {title: "Cracker load"},
+            {title: "C2+C3 Capacity"},
+            {title: "Ethylene load"},
+            {title: "Ethylene Capacity"},
+            {title: "AEU load"},
+            {title: "BTX Capacity"},
+          ],
+          tableCostFrEthylene: [
+            {title: "the cost"},
+          ],
+          tableRuningRate: [
+            {title: "run hour"},
+            {title: "run rate"},
+            {title: "calendar hour"},
+          ],
+          tableShoudownHour: [
+            {title: "operation time"},
+            {title: "hour"},
+            {title: "equipment time"},
+            {title: "hour"},
+            {title: "instrument time"},
+            {title: "hour"},
+            {title: "electric time"},
+            {title: "hour"},
+            {title: "otherwise time"},
+            {title: "hour"},
+            {title: "total time"},
+            {title: "total hour"},
+          ],
+          tableOtherside: [
+            {title: "EU loss"},
+            {title: "EU loss rate"},
+            {title: "AEU loss"},
+            {title: "AEU loss rate"},
+            {title: "Total loss"},
+            {title: "Total loss rate"},
+          ],
+          tableChemicalConsume: [
+            {title: "Cracker and PGU"},
+            {title: "PT-3000"},
+            {title: "NAOH"},
+            {title: "PT-4000"},
+            {title: "EC3392A"},
+            {title: "2W906"},
+            {title: "EC1489A"},
+            {title: "EC1486A"},
+            {title: "20Y3483"},
+            {title: "8Q202"},
+            {title: "20Y97A"},
+            {title: "EC3269A"},
+            {title: "20Y25"},
+            {title: "20Y77"},
+            {title: "510WS"},
+            {title: "N130"},
+            {title: "H2SO4"},
+            {title: "NaOH"},
+            {title: "CH3OH"},
+            {title: ""},
+            {title: "PT-3000"},
+            {title: ""},
+            {title: ""},
+          ],
+          tableSCTUUtilityConsumption: [
+            {title: "FG ( NG+Offage)"},
+            {title: "MP"},
+            {title: "LP"},
+            {title: "Electric"},
+            {title: "CW"},
+            {title: "PA&IA"},
+            {title: "SUB"},
+          ],
+          tableSUBUtilityConsumption: [
+            {title: "Electric"},
+            {title: "NG"},
+            {title: "FG fr EU"},
+            {title: "LPG"},
+            {title: "HHP Steam"},
+            {title: "MP Steam"},
+            {title: "LP Steam"},
+            {title: "P. Condensate"},
+            {title: "CW"},
+            {title: "N2"},
+            {title: "IA&PA"},
+            {title: "HPPA"},
+            {title: "Production Water"},
+            {title: "HP Steam fr SuB-net"},
+            {title: "BFW"},
+            {title: "EO/EG purge gas"},
+            {title: "H2 fr Syngas as fule"},
+            {title: "HP product"},
+            {title: "SUB1# FG FIC1302"},
+            {title: "SUB2#FG  FIC2302"},
+            {title: "total NG FC3702"},
+            {title: "COST(output)"},
+            {title: "总费用"},
+            {title: "锅炉净产量"},
+            {title: "产汽"},
+            {title: "输出"},
+          ],
+          tableSCTFUtilityConsumption: [
+            {title: "Electric"},
+            {title: "NG"},
+            {title: "FG fr EU"},
+            {title: "LPG"},
+            {title: "HHP Steam"},
+            {title: "MP Steam"},
+            {title: "LP Steam"},
+            {title: "P. Condensate"},
+            {title: "CW"},
+            {title: "N2"},
+            {title: "IA&PA"},
+            {title: "HPPA"},
+            {title: "Production Water"},
+            {title: "HP Steam fr SuB-net"},
+            {title: "BFW"},
+            {title: "Contaminated WW"},
+            {title: "Production WW"},
+          ],
+          tableKBI: [
+            {kbi: "Plant capacity utilization rate"},
+            {kbi: "Energy Consumption"},
+            {kbi: "Product of Ethylene and Propylene and C4's base FEED"},
+            {kbi: "C2+C3 Production"},
+            {kbi: "C2+C3 target"},
+            {kbi: "C2+C3 target"},
+            {kbi: "C2 target"},
+            {kbi: "C2 target"},
+            {kbi: "LTI"},
+            {kbi: "Yields of Ethylene and propylene base on furnace feeds"},
+            {kbi: "Yields of Ethylene  base on furnace feeds"},
+            {kbi: "AEU Energy Consumption"},
+            {kbi: "BTX Production"},
+            {kbi: "BTX target"},
+            {kbi: "BTX target"},
+          ],
+          tableSummary: [
+            {item: "乙丙产量"},
+            {item: "石脑油"},
+            {item: "C5 raff"},
+            {item: "乙烷"},
+            {item: "加氢碳九"},
+            {item: "乙烯焦油"},
+            {item: "混合C4"},
+            {item: "三苯"},
+            {item: "裂解碳五"},
+            {item: "裂解碳九"},
+            {item: "重整石脑油"},
+            {item: "蒸汽综合"},
+            {item: "冷却水"},
+            {item: "电"},
+            {item: "燃料气"},
+            {item: "精制水"},
+            {item: "透平凝液"},
+            {item: "乙丙收率"},
+            {item: "石脑油"},
+            {item: "C5 raff"},
+            {item: "乙烷"},
+            {item: "加氢碳九"},
+            {item: "乙烯焦油"},
+            {item: "混合C4"},
+            {item: "三苯"},
+            {item: "裂解碳五"},
+            {item: "裂解碳九"},
+            {item: "非芳"},
+            {item: "蒸汽综合"},
+            {item: "冷却水"},
+            {item: "电"},
+            {item: "燃料气"},
+            {item: "精制水"},
+            {item: "透平凝液"},
+          ],
+          year: null,
           monthList: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-          tableData: [
-            {title: "NAP", unit: ""},
-            {title: "C5", unit: "t"},
-            {title: "NA", unit: "t"},
-            {title: "Wison Ethane", unit: "t"},
-            {title: "LPG to Furnace", unit: "t"},
-            {title: "C4 Raff3  fr bd and 2ph", unit: "t"},
-            {title: "C2 fr LDPE", unit: "t"},
-            {title: "C3 fr OXO", unit: "t"},
-            {title: "Mixed C3/C4 fr BD", unit: "t"},
-            {title: "HC9", unit: "t"},
-            {title: "Offgas fr AEU", unit: "t"},
-            {title: "wash oil", unit: "t"},
-            {title: "toluene", unit: "t"},
-            {title: "C4 Recycle(ton)", unit: "t"},
-            {title: "input total", unit: "t"},
-            {title: "Total feed", unit: ""},
-          ]
         }
       },
       created() {
-        this.year = new Date().getFullYear();
-        let monthListTemp = [];
-        for (let i = 0; i < this.monthList.length; i++) {
-          monthListTemp.push(this.monthList[i] + "-" + this.year);
-        }
-        this.monthList = monthListTemp;
+        this.initTableTitle();
       },
+      methods: {
+        initTableTitle() {
+          this.year = new Date().getFullYear();
+          let monthListTemp = [];
+          for (let i = 0; i < this.monthList.length; i++) {
+            monthListTemp.push(this.monthList[i] + "-" + this.year);
+          }
+          this.monthList = monthListTemp;
+        }
+      }
     }
 </script>