<template>
  <div class="app-container">
    <div style="margin-bottom: 50px;">
      <el-button
        type="info"
        icon="el-icon-download"
        size="mini"
        @click="handelDownloadReport"
      >报告下载</el-button>
    </div>
    <div id="chart1"></div>
    <div class="description">{{comment1}}</div>
    <div id="chart2"></div>
    <div class="description">{{comment2}}</div>
    <div id="chart3"></div>
    <div class="description">{{comment3}}</div>
    <div id="chart4"></div>
    <div class="description">{{comment4}}</div>
    <div id="chart5"></div>
    <div class="description">{{comment5}}</div>
    <div id="chart6"></div>
    <div class="description">{{comment6}}</div>
    <div id="chart7"></div>
    <div class="description">{{comment7}}</div>
    <div id="chart8"></div>
    <div class="description">{{comment8}}</div>
    <div id="chart9"></div>
    <div class="description">{{comment9}}</div>
    <div id="chart10"></div>
    <div class="description">{{comment10}}</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>
    <div class="description">{{comment11}}</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 class="description">{{comment12}}</div>
    <div id="chart13"></div>
    <div class="description">{{comment13}}</div>
    <div id="chart14"></div>
    <div class="description">{{comment14}}</div>
    <div id="chart15"></div>
    <div class="description">{{comment15}}</div>
  </div>
</template>

<script>
  import axios from 'axios';
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";
import { getCommentInfo } from "@/api/production/comment";

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,
      analysisDescription1: null,
      analysisDescription2: null,
      analysisDescription3: null,
      analysisDescription4: null,
      analysisDescription5: null,
      analysisDescription6: null,
      analysisDescription7: null,
      analysisDescription8: null,
      analysisDescription9: null,
      analysisDescription10: null,
      analysisDescription11: null,
      analysisDescription12: null,
      analysisDescription13: null,
      analysisDescription14: null,
      analysisDescription15: null,
      comment1: null,
      comment2: null,
      comment3: null,
      comment4: null,
      comment5: null,
      comment6: null,
      comment7: null,
      comment8: null,
      comment9: null,
      comment10: null,
      comment11: null,
      comment12: null,
      comment13: null,
      comment14: null,
      comment15: null,
      c3ReactorTableData: {},
      c2ReactorTableData: {},
    }
  },
  created() {
    this.sampleDate = this.$route.params;
    this.handleQuery();
  },
  methods: {
    handelDownloadReport() {
      function btof(data, fileName) {
        const dataArr = data.split(',')
        const byteString = atob(dataArr[1])
        const options = {
          type: 'image/jpeg',
          endings: 'native'
        }
        const u8Arr = new Uint8Array(byteString.length)
        for (let i = 0; i < byteString.length; i++) {
          u8Arr[i] = byteString.charCodeAt(i)
        }
        return new File([u8Arr], fileName + '.jpg', options)
      }
      // 调用函数btof  base64是图片的64数据格式  后面是文件名字
      const image1 = btof(this.chart1.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart1');
      const image2 = btof(this.chart2.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart2');
      const image3 = btof(this.chart3.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart3');
      const image4 = btof(this.chart4.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart4');
      const image5 = btof(this.chart5.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart5');
      const image6 = btof(this.chart6.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart6');
      const image7 = btof(this.chart7.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart7');
      const image8 = btof(this.chart8.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart8');
      const image9 = btof(this.chart9.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart9');
      const image10 = btof(this.chart10.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart10');
      const image11 = btof(this.chart11.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart11');
      const image12 = btof(this.chart12.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart12');
      const image13 = btof(this.chart13.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart13');
      const image14 = btof(this.chart14.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart14');
      const image15 = btof(this.chart15.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }), 'chart15');
      // 利用FormData传参
      const formData = new FormData();
      // file 是后端接受图片的字段
      formData.append('files', image1);
      formData.append('files', image2);
      formData.append('files', image3);
      formData.append('files', image4);
      formData.append('files', image5);
      formData.append('files', image6);
      formData.append('files', image7);
      formData.append('files', image8);
      formData.append('files', image9);
      formData.append('files', image10);
      formData.append('files', image11);
      formData.append('files', image12);
      formData.append('files', image13);
      formData.append('files', image14);
      formData.append('files', image15);
      formData.append("startDate", this.sampleDate[0]);
      formData.append("endDate", this.sampleDate[1]);
      // formData.append("c2ReactorTableData", this.c2ReactorTableData,);
      // formData.append("c3ReactorTableData", this.c3ReactorTableData);
      // 调用接口 把MultipartFile 传给后端
      axios.post(process.env.VUE_APP_BASE_API + '/production/quality/export', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then(response => {
        this.download(response.data.msg);
      });
    },
    handleQuery() {
      this.analysisQueryParams.startDate = this.sampleDate[0];
      this.analysisQueryParams.endDate = this.sampleDate[1];
      // 裂解炉进料原料质量近一年油品变化曲线
      listS0501Month(this.analysisQueryParams).then(response => {
        let data = response.data.dataMap;
        this.analysisDescription1 = response.data.description;
        let pArray = [];
        let iArray = [];
        let oArray = [];
        let nArray = [];
        let fiftyArray = [];
        let sampleDateArray = [];
        for(const key in data) {
          sampleDateArray.push(key);
          pArray.push(data[key].p);
          iArray.push(data[key].i);
          oArray.push(data[key].o);
          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: oArray
            },
            {
              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.dataList;
        this.analysisDescription2 = response.data.description;
        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);
      });
      // 乙烯/丙烯主产品质量
      listS4013(this.analysisQueryParams).then(response => {
        let data = response.data.dataList;
        let description4013 = response.data.description;
        let ethyleneArray = [];
        let ethyleneIndexArray = [];
        let propyleneArray = [];
        let propyleneIndexArray = [];
        let sampleDateArray = [];
        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.dataList;
          let description5003 = response.data.description;
          this.analysisDescription3 = description4013 + description5003;
          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.dataList;
        this.analysisDescription4 = response.data.description;
        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.dataList;
        let description2002 = response.data.description;
        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.dataList;
          let description2400 = response.data.description;
          this.analysisDescription5 = description2002 + description2400;
          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.dataList;
        this.analysisDescription6 = response.data.description;
        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.dataList;
        this.analysisDescription7 = response.data.description;
        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.dataList;
        this.analysisDescription8 = response.data.description;
        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.dataList;
        this.analysisDescription9 = response.data.description;
        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.dataMap;
        this.analysisDescription10 = response.data.description;
        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.dataMap;
        this.analysisDescription11 = response.data.description;
        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.dataList;
        this.analysisDescription12 = response.data.description;
        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.dataList;
        this.analysisDescription13 = response.data.description;
        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.dataList;
        this.analysisDescription14 = response.data.description;
        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.dataList;
        this.analysisDescription15 = response.data.description;
        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);
      });

      getCommentInfo({ "commentType": 1, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment1 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 2, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment2 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 3, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment3 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 4, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment4 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 5, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment5 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 6, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment6 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 7, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment7 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 8, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment8 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 9, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment9 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 10, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment10 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 11, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment11 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 12, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment12 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 13, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment13 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 14, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment14 = response.data.qualityComment;
      });
      getCommentInfo({ "commentType": 15, "startDate": this.sampleDate[0], "endDate": this.sampleDate[1] }).then(response => {
        this.comment15 = response.data.qualityComment;
      });
    }
  }
}
</script>

<style scoped>
  #chart1,#chart2,#chart3,#chart4,#chart5,#chart6,#chart7,#chart8,#chart9,#chart10,#chart11,#chart12,#chart13,#chart14,#chart15{
    width: 100%;
    height: 600px;
    margin-bottom: 50px;
  }
  #chart10,#chart11{
    margin-bottom: 0px;
  }
  #tableC2,#tableC3{
    width: 800px;
    /*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;
  }
  .description{
    white-space: pre-wrap;
    margin-bottom: 50px;
    text-align: left;
    width: 800px;
  }
</style>
