|
|
@@ -0,0 +1,1562 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div id="chart1"></div>
|
|
|
+ <div id="chart2"></div>
|
|
|
+ <div id="chart3"></div>
|
|
|
+ <div id="chart4"></div>
|
|
|
+ <div id="chart5"></div>
|
|
|
+ <div id="chart6"></div>
|
|
|
+ <div id="chart7"></div>
|
|
|
+ <div id="chart8"></div>
|
|
|
+ <div id="chart9"></div>
|
|
|
+ <div id="chart10"></div>
|
|
|
+ <table id="tableC2">
|
|
|
+ <tr>
|
|
|
+ <td colspan="5" class="td-transparent">BYC performance of C2 reactor</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-transparent"></td>
|
|
|
+ <td class="td-transparent">1st inlet</td>
|
|
|
+ <td class="td-transparent">2nd inlet</td>
|
|
|
+ <td class="td-transparent">3rd inlet</td>
|
|
|
+ <td class="td-transparent">3rd outlet</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-dark-blue">ethane</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.ethane1InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.ethane2InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.ethane3InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.ethane3OutAvg}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-dark-blue">ethylene</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.ethylene1InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.ethylene2InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.ethylene3InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.ethylene3OutAvg}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-dark-blue">acetylene</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.acetylene1InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.acetylene2InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.acetylene3InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.acetylene3OutAvg}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-dark-blue">propane</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.propane1InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.propane2InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.propane3InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.propane3OutAvg}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-dark-blue">propylene</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.propylene1InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.propylene2InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.propylene3InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.propylene3OutAvg}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-dark-blue">PD</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.pd1InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.pd2InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.pd3InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.pd3OutAvg}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-dark-blue">MA</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.ma1InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.ma2InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.ma3InAvg}}</td>
|
|
|
+ <td class="td-dark-blue">{{c2ReactorTableData.ma3OutAvg}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-dark-green">acetylene Conversion</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.acetyleneConversion1stIn}}%</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.acetyleneConversion2ndIn}}%</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.acetyleneConversion3rdIn}}%</td>
|
|
|
+ <td class="td-dark-green">{{c2ReactorTableData.acetyleneConversion3rdOut}}%</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-dark-green">Conversion load%</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.conversionLoad1stIn}}%</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.conversionLoad2ndIn}}%</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.conversionLoad3rdIn}}%</td>
|
|
|
+ <td class="td-dark-green"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-dark-green">Ethylene Selectivity</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.ethyleneSelectivity1stIn}}%</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.ethyleneSelectivity2ndIn}}%</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.ethyleneSelectivity3rdIn}}%</td>
|
|
|
+ <td class="td-dark-green">{{c2ReactorTableData.ethyleneSelectivity3rdOut}}%</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-dark-green">MAPD Conversion</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.mapdConversion1stIn}}%</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.mapdConversion2ndIn}}%</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.mapdConversion3rdIn}}%</td>
|
|
|
+ <td class="td-yellow">{{c2ReactorTableData.mapdConversion3rdOut}}%</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-dark-green">Propylene Selectivity</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.propyleneSelectivity1stIn}}%</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.propyleneSelectivity2ndIn}}%</td>
|
|
|
+ <td class="td-transparent">{{c2ReactorTableData.propyleneSelectivity3rdIn}}%</td>
|
|
|
+ <td class="td-yellow">{{c2ReactorTableData.propyleneSelectivity3rdOut}}%</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <div id="chart11"></div>
|
|
|
+ <table id="tableC3">
|
|
|
+ <tr>
|
|
|
+ <td colspan="2" class="td-transparent">BYC performance of C3 reactor </td>
|
|
|
+ <td class="td-transparent">R520B</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-blue"></td>
|
|
|
+ <td class="td-blue">reactor inlet</td>
|
|
|
+ <td class="td-blue">reactor outlet</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-blue">propane</td>
|
|
|
+ <td class="td-blue">{{c3ReactorTableData.propaneInAvg}}</td>
|
|
|
+ <td class="td-blue">{{c3ReactorTableData.propaneOutAvg}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-blue">propylene</td>
|
|
|
+ <td class="td-blue">{{c3ReactorTableData.propyleneInAvg}}</td>
|
|
|
+ <td class="td-blue">{{c3ReactorTableData.propyleneOutAvg}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-blue">PD</td>
|
|
|
+ <td class="td-blue">{{c3ReactorTableData.pdInAvg}}</td>
|
|
|
+ <td class="td-blue">{{c3ReactorTableData.pdOutAvg}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-blue">MA</td>
|
|
|
+ <td class="td-blue">{{c3ReactorTableData.maInAvg}}</td>
|
|
|
+ <td class="td-blue">{{c3ReactorTableData.maOutAvg}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-green">conversion</td>
|
|
|
+ <td class="td-green">{{c3ReactorTableData.conversion}}%</td>
|
|
|
+ <td class="td-transparent"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-green">Propylene Selectivity</td>
|
|
|
+ <td class="td-green">{{c3ReactorTableData.propyleneSelectivity}}%</td>
|
|
|
+ <td class="td-transparent"></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <div id="chart12"></div>
|
|
|
+ <div id="chart13"></div>
|
|
|
+ <div id="chart14"></div>
|
|
|
+ <div id="chart15"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { listS0501, listS0501Month, getS0501, delS0501, addS0501, updateS0501, exportS0501 } from "@/api/production/s0501";
|
|
|
+import { listS1301, getS1301, delS1301, addS1301, updateS1301, exportS1301 } from "@/api/production/s1301";
|
|
|
+import { listS2002, getS2002, delS2002, addS2002, updateS2002, exportS2002 } from "@/api/production/s2002";
|
|
|
+import { listS2005, getS2005, delS2005, addS2005, updateS2005, exportS2005 } from "@/api/production/s2005";
|
|
|
+import { listS2007, getS2007, delS2007, addS2007, updateS2007, exportS2007 } from "@/api/production/s2007";
|
|
|
+import { listS2011, getS2011, delS2011, addS2011, updateS2011, exportS2011 } from "@/api/production/s2011";
|
|
|
+import { listS2400, getS2400, delS2400, addS2400, updateS2400, exportS2400 } from "@/api/production/s2400";
|
|
|
+import { listS3004, getS3004, delS3004, addS3004, updateS3004, exportS3004 } from "@/api/production/s3004";
|
|
|
+import { listS3009, getS3009, delS3009, addS3009, updateS3009, exportS3009 } from "@/api/production/s3009";
|
|
|
+import { listS3010, getS3010, delS3010, addS3010, updateS3010, exportS3010 } from "@/api/production/s3010";
|
|
|
+import { listS3011, getS3011, delS3011, addS3011, updateS3011, exportS3011 } from "@/api/production/s3011";
|
|
|
+import { listS3012, getS3012, delS3012, addS3012, updateS3012, exportS3012 } from "@/api/production/s3012";
|
|
|
+import { listS3022, getS3022, delS3022, addS3022, updateS3022, exportS3022 } from "@/api/production/s3022";
|
|
|
+import { listS4012, getS4012, delS4012, addS4012, updateS4012, exportS4012 } from "@/api/production/s4012";
|
|
|
+import { listS4013, getS4013, delS4013, addS4013, updateS4013, exportS4013 } from "@/api/production/s4013";
|
|
|
+import { listS4501, getS4501, delS4501, addS4501, updateS4501, exportS4501 } from "@/api/production/s4501";
|
|
|
+import { listS5001, getS5001, delS5001, addS5001, updateS5001, exportS5001 } from "@/api/production/s5001";
|
|
|
+import { listS5003, getS5003, delS5003, addS5003, updateS5003, exportS5003 } from "@/api/production/s5003";
|
|
|
+import { listS5010, getS5010, delS5010, addS5010, updateS5010, exportS5010 } from "@/api/production/s5010";
|
|
|
+import { listS5012, getS5012, delS5012, addS5012, updateS5012, exportS5012 } from "@/api/production/s5012";
|
|
|
+import { listS6101, getS6101, delS6101, addS6101, updateS6101, exportS6101 } from "@/api/production/s6101";
|
|
|
+import { listS6107, getS6107, delS6107, addS6107, updateS6107, exportS6107 } from "@/api/production/s6107";
|
|
|
+import { listS6301, getS6301, delS6301, addS6301, updateS6301, exportS6301 } from "@/api/production/s6301";
|
|
|
+import { listZ404, getZ404, delZ404, addZ404, updateZ404, exportZ404 } from "@/api/production/z404";
|
|
|
+import { exportQuality, c3ReactorTable, c3ReactorAnalysis, c2ReactorAnalysis, c2ReactorTable } from "@/api/production/quality";
|
|
|
+import { treeselect } from "@/api/system/dept";
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
+import Treeselect from "@riophae/vue-treeselect";
|
|
|
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "report.vue",
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ sampleDate: [],
|
|
|
+ analysisQueryParams: {
|
|
|
+ startDate: null,
|
|
|
+ endDate: null
|
|
|
+ },
|
|
|
+ analysisOptions: [],
|
|
|
+ chart1: null,
|
|
|
+ chart2: null,
|
|
|
+ chart3: null,
|
|
|
+ chart4: null,
|
|
|
+ chart5: null,
|
|
|
+ chart6: null,
|
|
|
+ chart7: null,
|
|
|
+ chart8: null,
|
|
|
+ chart9: null,
|
|
|
+ chart10: null,
|
|
|
+ chart11: null,
|
|
|
+ chart12: null,
|
|
|
+ chart13: null,
|
|
|
+ chart14: null,
|
|
|
+ chart15: null,
|
|
|
+ c3ReactorTableData: {},
|
|
|
+ c2ReactorTableData: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.sampleDate = this.$route.params;
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleQuery() {
|
|
|
+ this.analysisQueryParams.startDate = this.sampleDate[0];
|
|
|
+ this.analysisQueryParams.endDate = this.sampleDate[1];
|
|
|
+ // 裂解炉进料原料质量近一年油品变化曲线
|
|
|
+ listS0501Month(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let pArray = [];
|
|
|
+ let iArray = [];
|
|
|
+ let aArray = [];
|
|
|
+ let nArray = [];
|
|
|
+ let fiftyArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ for(const key in data) {
|
|
|
+ sampleDateArray.push(key);
|
|
|
+ pArray.push(data[key].p);
|
|
|
+ iArray.push(data[key].i);
|
|
|
+ aArray.push(data[key].a);
|
|
|
+ nArray.push(data[key].n);
|
|
|
+ fiftyArray.push(data[key].fifty);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "裂解炉进料原料质量近一年油品变化曲线",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['正构烷烃', '异构烷烃', '芳烃', '烷烃', '50%BP']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '正构烷烃',
|
|
|
+ type: 'line',
|
|
|
+ data: pArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '异构烷烃',
|
|
|
+ type: 'line',
|
|
|
+ data: iArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '芳烃',
|
|
|
+ type: 'line',
|
|
|
+ data: aArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '烷烃',
|
|
|
+ type: 'line',
|
|
|
+ data: nArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '50%BP',
|
|
|
+ type: 'line',
|
|
|
+ data: fiftyArray
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart1 = this.echarts.init(document.getElementById('chart1'));
|
|
|
+ this.chart1.setOption(option);
|
|
|
+ });
|
|
|
+ // 裂解炉进料原料质量月份石脑油组分曲线
|
|
|
+ listS0501(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let pArray = [];
|
|
|
+ let iArray = [];
|
|
|
+ let aArray = [];
|
|
|
+ let nArray = [];
|
|
|
+ let fiftyArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ pArray.push(data[i].p);
|
|
|
+ iArray.push(data[i].i);
|
|
|
+ aArray.push(data[i].a);
|
|
|
+ nArray.push(data[i].n);
|
|
|
+ fiftyArray.push(data[i].fifty);
|
|
|
+ sampleDateArray.push(data[i].sampleDate);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "裂解炉进料原料质量月份石脑油组分曲线",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['正构烷烃', '异构烷烃', '芳烃', '烷烃', '50%BP']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '正构烷烃',
|
|
|
+ type: 'line',
|
|
|
+ data: pArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '异构烷烃',
|
|
|
+ type: 'line',
|
|
|
+ data: iArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '芳烃',
|
|
|
+ type: 'line',
|
|
|
+ data: aArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '烷烃',
|
|
|
+ type: 'line',
|
|
|
+ data: nArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '50%BP',
|
|
|
+ type: 'line',
|
|
|
+ data: fiftyArray
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart2 = this.echarts.init(document.getElementById('chart2'));
|
|
|
+ this.chart2.setOption(option);
|
|
|
+ });
|
|
|
+ // 乙烯/丙烯主产品质量
|
|
|
+ let ethyleneArray = [];
|
|
|
+ let ethyleneIndexArray = [];
|
|
|
+ let propyleneArray = [];
|
|
|
+ let propyleneIndexArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ listS4013(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ ethyleneArray.push(data[i].ethylene);
|
|
|
+ ethyleneIndexArray.push("99.95");
|
|
|
+ sampleDateArray.push(data[i].sampleDate);
|
|
|
+ }
|
|
|
+ listS5003(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ propyleneArray.push(data[i].propylene);
|
|
|
+ propyleneIndexArray.push("99.6");
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "乙烯/丙烯主产品质量",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['Ethylene', '乙烯指标', 'Propylene', '丙烯指标']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ min: 99.5,
|
|
|
+ max: 100,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Ethylene',
|
|
|
+ type: 'line',
|
|
|
+ data: ethyleneArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '乙烯指标',
|
|
|
+ type: 'line',
|
|
|
+ data: ethyleneIndexArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Propylene',
|
|
|
+ type: 'line',
|
|
|
+ data: propyleneArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '丙烯指标',
|
|
|
+ type: 'line',
|
|
|
+ data: propyleneIndexArray
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart3 = this.echarts.init(document.getElementById('chart3'));
|
|
|
+ this.chart3.setOption(option);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // 急冷系统关键控制指标
|
|
|
+ listS2007(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let viscosityArray = [];
|
|
|
+ let endPointArray = [];
|
|
|
+ let pressureDifferenceArray = [];
|
|
|
+ let productionArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ viscosityArray.push(data[i].viscosity);
|
|
|
+ endPointArray.push(data[i].endPoint);
|
|
|
+ pressureDifferenceArray.push(data[i].pressureDifference);
|
|
|
+ productionArray.push(data[i].production);
|
|
|
+ sampleDateArray.push(data[i].sampleDate);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "急冷系统关键控制指标",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['QO粘度', '汽油终馏点', '汽油段压差', 'HVGO产量']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'QO粘度',
|
|
|
+ type: 'line',
|
|
|
+ data: viscosityArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '汽油终馏点',
|
|
|
+ type: 'line',
|
|
|
+ data: endPointArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '汽油段压差',
|
|
|
+ type: 'line',
|
|
|
+ data: pressureDifferenceArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'HVGO产量',
|
|
|
+ type: 'line',
|
|
|
+ data: productionArray
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart4 = this.echarts.init(document.getElementById('chart4'));
|
|
|
+ this.chart4.setOption(option);
|
|
|
+ });
|
|
|
+ // DS系统关键控制指标
|
|
|
+ listS2002(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let cod2002Array = [];
|
|
|
+ let ph2002Array = [];
|
|
|
+ let cod2400Array = [];
|
|
|
+ let ph2400Array = [];
|
|
|
+ let codIndexArray = [];
|
|
|
+ let phIndexArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ cod2002Array.push(data[i].cod);
|
|
|
+ ph2002Array.push(data[i].ph);
|
|
|
+ codIndexArray .push("1400");
|
|
|
+ phIndexArray .push("8.5");
|
|
|
+ sampleDateArray.push(data[i].sampleDate);
|
|
|
+ }
|
|
|
+ listS2400(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ cod2400Array.push(data[i].cod);
|
|
|
+ ph2400Array.push(data[i].ph);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "DS系统关键控制指标",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['C270 COD', 'C290 COD', 'COD指标', 'C270 PH', 'C290 PH', 'PH指标',]
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ position: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ position: 'right'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'C270 COD',
|
|
|
+ type: 'line',
|
|
|
+ data: cod2002Array,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C290 COD',
|
|
|
+ type: 'line',
|
|
|
+ data: cod2400Array,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'COD指标',
|
|
|
+ type: 'line',
|
|
|
+ data: codIndexArray,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C270 PH',
|
|
|
+ type: 'line',
|
|
|
+ data: ph2002Array,
|
|
|
+ yAxisIndex: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C290 PH',
|
|
|
+ type: 'line',
|
|
|
+ data: ph2400Array,
|
|
|
+ yAxisIndex: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'PH指标',
|
|
|
+ type: 'line',
|
|
|
+ data: phIndexArray,
|
|
|
+ yAxisIndex: 1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart5 = this.echarts.init(document.getElementById('chart5'));
|
|
|
+ this.chart5.setOption(option);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // 碱洗处理系统关键指标
|
|
|
+ listS3004(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let naOhArray = [];
|
|
|
+ let controlArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ naOhArray.push(data[i].naOh);
|
|
|
+ controlArray.push(1);
|
|
|
+ sampleDateArray.push(data[i].sampleDate);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "碱洗处理系统关键指标",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['弱碱段NaOH浓度', 'C340排出NaOH控制']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '弱碱段NaOH浓度',
|
|
|
+ type: 'line',
|
|
|
+ data: naOhArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C340排出NaOH控制',
|
|
|
+ type: 'line',
|
|
|
+ data: controlArray
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart6 = this.echarts.init(document.getElementById('chart6'));
|
|
|
+ this.chart6.setOption(option);
|
|
|
+ });
|
|
|
+ // 废碱处理系统关键指标
|
|
|
+ listS6107(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let codArray = [];
|
|
|
+ let controlArray = [];
|
|
|
+ let phArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ codArray.push(data[i].cod);
|
|
|
+ controlArray.push(1000);
|
|
|
+ phArray.push(data[i].ph);
|
|
|
+ sampleDateArray.push(data[i].sampleDate);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "废碱处理系统关键指标",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['废碱处理pH', 'COD控制', '废碱处理COD']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ position: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ position: 'right'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '废碱处理pH',
|
|
|
+ type: 'line',
|
|
|
+ data: codArray,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'COD控制',
|
|
|
+ type: 'line',
|
|
|
+ data: controlArray,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '废碱处理COD',
|
|
|
+ type: 'line',
|
|
|
+ data: phArray,
|
|
|
+ yAxisIndex: 1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart7 = this.echarts.init(document.getElementById('chart7'));
|
|
|
+ this.chart7.setOption(option);
|
|
|
+ });
|
|
|
+ // 循环乙烷关键组份含量指标
|
|
|
+ listS4012(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let ethyleneArray = [];
|
|
|
+ let propyleneArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ ethyleneArray.push(data[i].ethylene);
|
|
|
+ propyleneArray.push(data[i].propylene);
|
|
|
+ sampleDateArray.push(data[i].sampleDate);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "循环乙烷关键组份含量指标",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['乙烯', '丙烯']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '乙烯',
|
|
|
+ type: 'line',
|
|
|
+ data: ethyleneArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '丙烯',
|
|
|
+ type: 'line',
|
|
|
+ data: propyleneArray
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart8 = this.echarts.init(document.getElementById('chart8'));
|
|
|
+ this.chart8.setOption(option);
|
|
|
+ });
|
|
|
+ // 循环丙烷关键含量指标
|
|
|
+ listS5001(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let buteneArray = [];
|
|
|
+ let propyleneArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ let mapdArray = [];
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ buteneArray.push(data[i].butene);
|
|
|
+ propyleneArray.push(data[i].propylene);
|
|
|
+ mapdArray.push(data[i].mapd);
|
|
|
+ sampleDateArray.push(data[i].sampleDate);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "循环丙烷关键含量指标",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['丁烯', '丙烯', "MAPD"]
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ position: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ position: 'right'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '丁烯',
|
|
|
+ type: 'line',
|
|
|
+ data: buteneArray,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '丙烯',
|
|
|
+ type: 'line',
|
|
|
+ data: propyleneArray,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'MAPD',
|
|
|
+ type: 'line',
|
|
|
+ data: mapdArray,
|
|
|
+ yAxisIndex: 1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart9 = this.echarts.init(document.getElementById('chart9'));
|
|
|
+ this.chart9.setOption(option);
|
|
|
+ });
|
|
|
+ // 碳二反应器性能指标
|
|
|
+ c2ReactorAnalysis(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let ethyleneSelectivity3rdOutArray = [];
|
|
|
+ let mapdConversion3rdOutArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ for(const key in data) {
|
|
|
+ sampleDateArray.push(key);
|
|
|
+ ethyleneSelectivity3rdOutArray.push(data[key].ethyleneSelectivity3rdOut);
|
|
|
+ mapdConversion3rdOutArray.push(data[key].mapdConversion3rdOut);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "碳二反应器性能指标",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['Ethylene Selectivity', 'MAPD Conversion']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Ethylene Selectivity',
|
|
|
+ type: 'line',
|
|
|
+ data: ethyleneSelectivity3rdOutArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'MAPD Conversion',
|
|
|
+ type: 'line',
|
|
|
+ data: mapdConversion3rdOutArray
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart10 = this.echarts.init(document.getElementById('chart10'));
|
|
|
+ this.chart10.setOption(option);
|
|
|
+ });
|
|
|
+ c2ReactorTable({
|
|
|
+ "startDate": this.sampleDate[0],
|
|
|
+ "endDate": this.sampleDate[1]
|
|
|
+ }).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ this.c2ReactorTableData = data;
|
|
|
+ });
|
|
|
+ // 碳三反应器性能指标
|
|
|
+ c3ReactorAnalysis(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let conversionArray = [];
|
|
|
+ let propyleneSelectivityArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ for(const key in data) {
|
|
|
+ sampleDateArray.push(key);
|
|
|
+ conversionArray.push(data[key].conversion);
|
|
|
+ propyleneSelectivityArray.push(data[key].propyleneSelectivity);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "碳三反应器性能指标",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['conversion', 'Selectivity']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'conversion',
|
|
|
+ type: 'line',
|
|
|
+ data: conversionArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Selectivity',
|
|
|
+ type: 'line',
|
|
|
+ data: propyleneSelectivityArray
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart11 = this.echarts.init(document.getElementById('chart11'));
|
|
|
+ this.chart11.setOption(option);
|
|
|
+ });
|
|
|
+ c3ReactorTable({
|
|
|
+ "startDate": this.sampleDate[0],
|
|
|
+ "endDate": this.sampleDate[1]
|
|
|
+ }).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ this.c3ReactorTableData = data;
|
|
|
+ });
|
|
|
+ // 裂解C5相关指标
|
|
|
+ listS6301(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let c5ConjugatedDienesDcpdArray = [];
|
|
|
+ let c250Array = [];
|
|
|
+ let c4Array = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ let c5ConjugatedDienesDcpd30 = data[i].c5ConjugatedDienesDcpd30;
|
|
|
+ let c5ConjugatedDienesDcpd40 = data[i].c5ConjugatedDienesDcpd40;
|
|
|
+ if (c5ConjugatedDienesDcpd30 != null) {
|
|
|
+ c5ConjugatedDienesDcpdArray.push(c5ConjugatedDienesDcpd30);
|
|
|
+ } else if (c5ConjugatedDienesDcpd40 != null) {
|
|
|
+ c5ConjugatedDienesDcpdArray.push(c5ConjugatedDienesDcpd40);
|
|
|
+ } else {
|
|
|
+ c5ConjugatedDienesDcpdArray.push("");
|
|
|
+ }
|
|
|
+ c250Array.push(data[i].c250);
|
|
|
+ let c4 = data[i].c4;
|
|
|
+ let c410 = data[i].c410;
|
|
|
+ if (c4 != null) {
|
|
|
+ c4Array.push(c4);
|
|
|
+ } else if (c410 != null) {
|
|
|
+ c4Array.push(c410);
|
|
|
+ } else {
|
|
|
+ c4Array.push("");
|
|
|
+ }
|
|
|
+ sampleDateArray.push(data[i].sampleDate);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "裂解C5相关指标",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['碳五共轭双烯烃+双环戊二烯', 'C250 灵敏板T', 'C4及C4以下组分含量']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ position: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ position: 'right'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '碳五共轭双烯烃+双环戊二烯',
|
|
|
+ type: 'line',
|
|
|
+ data: c5ConjugatedDienesDcpdArray,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C250 灵敏板T',
|
|
|
+ type: 'line',
|
|
|
+ data: c250Array,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C4及C4以下组分含量',
|
|
|
+ type: 'line',
|
|
|
+ data: c4Array,
|
|
|
+ yAxisIndex: 1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart12 = this.echarts.init(document.getElementById('chart12'));
|
|
|
+ this.chart12.setOption(option);
|
|
|
+ });
|
|
|
+ // RPG原料规格
|
|
|
+ listS6101(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let brNumberArray = [];
|
|
|
+ let totalSulfurArray = [];
|
|
|
+ let totalNitrogenArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ brNumberArray.push(data[i].brNumber);
|
|
|
+ totalSulfurArray.push(data[i].totalSulfur);
|
|
|
+ totalNitrogenArray.push(data[i].totalNitrogen);
|
|
|
+ sampleDateArray.push(data[i].sampleDate);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "RPG原料规格",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['溴价gBr/100g', '总硫mg/kg', '总氮mg/kg']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '溴价gBr/100g',
|
|
|
+ type: 'scatter',
|
|
|
+ data: brNumberArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '总硫mg/kg',
|
|
|
+ type: 'scatter',
|
|
|
+ data: totalSulfurArray
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '总氮mg/kg',
|
|
|
+ type: 'scatter',
|
|
|
+ data: totalNitrogenArray
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart13 = this.echarts.init(document.getElementById('chart13'));
|
|
|
+ this.chart13.setOption(option);
|
|
|
+ });
|
|
|
+ // 一段加氢反应器性能
|
|
|
+ listS1301(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let temperatureInArray = [];
|
|
|
+ let temperatureRaiseArray = [];
|
|
|
+ let styreneArray = [];
|
|
|
+ let dieneValueArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ temperatureInArray.push(data[i].temperatureIn);
|
|
|
+ temperatureRaiseArray.push(data[i].temperatureRaise);
|
|
|
+ styreneArray.push(data[i].styrene);
|
|
|
+ dieneValueArray.push(data[i].dieneValue);
|
|
|
+ sampleDateArray.push(data[i].sampleDate);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "一段加氢反应器性能",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['入口温度', '一段温升', '苯乙烯(0.18-0.8)', '双烯值(0.2-1.5)']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ position: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ position: 'right'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '入口温度',
|
|
|
+ type: 'line',
|
|
|
+ data: temperatureInArray,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '一段温升',
|
|
|
+ type: 'line',
|
|
|
+ data: temperatureRaiseArray,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '苯乙烯(0.18-0.8)',
|
|
|
+ type: 'line',
|
|
|
+ data: styreneArray,
|
|
|
+ yAxisIndex: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '双烯值(0.2-1.5)',
|
|
|
+ type: 'line',
|
|
|
+ data: dieneValueArray,
|
|
|
+ yAxisIndex: 1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart14 = this.echarts.init(document.getElementById('chart14'));
|
|
|
+ this.chart14.setOption(option);
|
|
|
+ });
|
|
|
+ // 二段加氢反应器性能
|
|
|
+ listS4501(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ let temperatureInArray = [];
|
|
|
+ let temperatureRaiseArray = [];
|
|
|
+ let pressureDiffArray = [];
|
|
|
+ let c6C8NaArray = [];
|
|
|
+ let brNumberArray = [];
|
|
|
+ let sampleDateArray = [];
|
|
|
+ for(let i = 0 ; i < data.length; i++){
|
|
|
+ temperatureInArray.push(data[i].temperatureIn);
|
|
|
+ temperatureRaiseArray.push(data[i].temperatureRaise);
|
|
|
+ pressureDiffArray.push(data[i].pressureDiff);
|
|
|
+ c6C8NaArray.push(data[i].c6C8Na);
|
|
|
+ brNumberArray.push(data[i].brNumber);
|
|
|
+ sampleDateArray.push(data[i].sampleDate);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "二段加氢反应器性能",
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ y: 'bottom',
|
|
|
+ data: ['入口温度', '温升', '压差 100Pa', '新鲜C6-C8', '溴价指数']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: sampleDateArray,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ position: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ position: 'right'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '入口温度',
|
|
|
+ type: 'line',
|
|
|
+ data: temperatureInArray,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '温升',
|
|
|
+ type: 'line',
|
|
|
+ data: temperatureRaiseArray,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '压差 100Pa',
|
|
|
+ type: 'line',
|
|
|
+ data: pressureDiffArray,
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '新鲜C6-C8',
|
|
|
+ type: 'line',
|
|
|
+ data: c6C8NaArray,
|
|
|
+ yAxisIndex: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '溴价指数',
|
|
|
+ type: 'line',
|
|
|
+ data: brNumberArray,
|
|
|
+ yAxisIndex: 1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart15 = this.echarts.init(document.getElementById('chart15'));
|
|
|
+ this.chart15.setOption(option);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ #chart1,#chart2,#chart3,#chart5,#chart6,#chart7,#chart8,#chart9,#chart10,#chart11,#chart12,#chart13,#chart14,#chart15{
|
|
|
+ /*display: inline-block;*/
|
|
|
+ /*float: left;*/
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ }
|
|
|
+ #chart10,#chart11{
|
|
|
+ margin-bottom: 0px;
|
|
|
+ }
|
|
|
+ #tableC2,#tableC3{
|
|
|
+ width: 80%;
|
|
|
+ margin: 0px auto;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ }
|
|
|
+ table {
|
|
|
+ border-collapse: collapse;
|
|
|
+ border-spacing: 0;
|
|
|
+ }
|
|
|
+ .td-blue{
|
|
|
+ background-color: #00CCFF;
|
|
|
+ color: black;
|
|
|
+ border: 1px solid;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ .td-green{
|
|
|
+ background-color: #00FF00;
|
|
|
+ color: black;
|
|
|
+ border: 1px solid;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ .td-yellow{
|
|
|
+ background-color: #FFFF00;
|
|
|
+ color: black;
|
|
|
+ border: 1px solid;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ .td-dark-green{
|
|
|
+ background-color: #92D050;
|
|
|
+ color: black;
|
|
|
+ border: 1px solid;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ .td-dark-blue{
|
|
|
+ background-color: #00B0F0;
|
|
|
+ color: black;
|
|
|
+ border: 1px solid;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ .td-transparent{
|
|
|
+ background-color: transparent;
|
|
|
+ color: black;
|
|
|
+ border: 1px solid;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+</style>
|
wangggziwen