质量月报

- 裂解炉进料原料质量月份石脑油组分曲线
- 碱洗处理系统关键指标
- 废碱处理系统关键指标
- 循环乙烷关键组份含量指标
- RPG原料规格

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

@@ -13,7 +13,6 @@
       </el-form-item>
       <el-form-item>
         <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -32,9 +31,9 @@
           type="warning"
           icon="el-icon-download"
           size="mini"
-          @click="handleExport"
-          v-hasPermi="['production:quality:export']"
-        >导出当前页数据</el-button>
+          @click="handleAnalysis"
+          v-hasPermi="['production:quality:list']"
+        >趋势分析</el-button>
       </el-col>
 	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -2129,7 +2128,7 @@
       </div>
     </el-dialog>
 
-    <!-- 用户导入对话框 -->
+    <!-- 批量导入对话框 -->
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
           <el-upload
                   ref="upload"
@@ -2161,6 +2160,36 @@
               <el-button @click="upload.open = false">取 消</el-button>
           </div>
       </el-dialog>
+
+    <!-- 趋势分析对话框 -->
+    <el-dialog :title="analysis.title" :visible.sync="analysis.open" width="1000px" append-to-body @close="disposeChart">
+      <el-form :model="analysisQueryParams" ref="analysisQueryParams" :inline="true" label-width="68px">
+        <el-form-item label="采样日期" prop="sampleDate">
+          <el-date-picker
+            v-model="analysisSampleDate"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="内容" prop="analysisValue">
+          <el-select v-model="analysisValue" placeholder="请选择内容">
+            <el-option
+              v-for="item in analysisOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleAnalysisQuery">搜索</el-button>
+        </el-form-item>
+      </el-form>
+      <div id="chart" :style="{width:width,height:height}"></div>
+    </el-dialog>
   </div>
 </template>
 
@@ -2196,10 +2225,25 @@ import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
+  props: {
+    timeliness: null,
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '400px'
+    },
+  },
   name: "MonthlyQualityReport",
   components: { Treeselect },
   data() {
     return {
+      chart: null,
+      chartData : [],
+      analysisOptions: [],
+      analysisValue: '',
       // 遮罩层
       loadingS0501: true,
       loadingS1301: true,
@@ -2300,12 +2344,22 @@ export default {
           // 上传的地址
           url: process.env.VUE_APP_BASE_API + "/production/quality/importData"
       },
+      // 趋势分析参数
+      analysis: {
+        open: false,
+        title: "",
+      },
       // 查询参数
       queryParams: {
         startDate: null,
         endDate: null,
       },
+      analysisQueryParams: {
+        startDate: null,
+        endDate: null,
+      },
       sampleDate: [],
+      analysisSampleDate: [],
       samplePoint: null,
       // 表单参数
       formS0501: {},
@@ -2342,33 +2396,48 @@ export default {
    },
   created() {
     this.setDefaultSampleDate();
+    this.setAnalysisDefaultSampleDate();
     //设置表格高度对应屏幕高度
     this.$nextTick(() => {
         this.clientHeight = document.body.clientHeight -250
     })
     this.getList();
     this.getTreeselect();
+    // 加载质量月报趋势分析内容字典
+    this.getDicts("quality_analysis_content").then(response => {
+      this.analysisOptions = response.data;
+    });
   },
   methods: {
+    /** 销毁趋势图 */
+    disposeChart() {
+      if(this.chart != null) {
+        this.echarts.dispose(this.chart);
+      }
+    },
     /** 设置默认时间范围 */
     setDefaultSampleDate() {
       let startDate = new Date();
       startDate.setMonth(startDate.getMonth() - 1);
       startDate.setDate(1);
       this.sampleDate[0] = startDate.getFullYear() + "-" + Number(startDate.getMonth() + 1) + "-" + startDate.getDate();
-
       let endDate = new Date();
       endDate.setDate(0);
       this.sampleDate[1] = endDate.getFullYear() + "-" + Number(endDate.getMonth() + 1) + "-" + endDate.getDate();
     },
+    setAnalysisDefaultSampleDate() {
+      let startDate = new Date();
+      startDate.setMonth(startDate.getMonth() - 1);
+      startDate.setDate(1);
+      this.analysisSampleDate[0] = startDate.getFullYear() + "-" + Number(startDate.getMonth() + 1) + "-" + startDate.getDate();
+      let endDate = new Date();
+      endDate.setDate(0);
+      this.analysisSampleDate[1] = endDate.getFullYear() + "-" + Number(endDate.getMonth() + 1) + "-" + endDate.getDate();
+    },
     /** 查询质量月报列表 */
     getList() {
       this.queryParams.startDate = this.sampleDate[0];
       this.queryParams.endDate = this.sampleDate[1];
-      console.log(this.sampleDate[0])
-      console.log(this.sampleDate[1])
-      console.log(this.queryParams.startDate)
-      console.log(this.queryParams.endDate)
       this.getListS0501();
       this.getListS1301();
       this.getListS2002();
@@ -3208,15 +3277,445 @@ export default {
       };
       this.resetForm("formZ404");
     },
+    handleAnalysisQuery() {
+      this.analysisQueryParams.startDate = this.analysisSampleDate[0];
+      this.analysisQueryParams.endDate = this.analysisSampleDate[1];
+
+      let dictLabel = "";
+      for(let i = 0; i < this.analysisOptions.length; i++) {
+        if (this.analysisOptions[i].dictValue == this.analysisValue) {
+          dictLabel = this.analysisOptions[i].dictLabel;
+        }
+      }
+
+      switch (this.analysisValue) {
+        case "1":
+          listS0501(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          break;
+        case "2":
+          this.disposeChart();
+          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: dictLabel,
+                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
+              },
+              xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: sampleDateArray
+              },
+              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.chart = this.echarts.init(document.getElementById('chart'));
+            this.chart.setOption(option);
+          });
+          break;
+        case "3":
+          listS4013(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          break;
+        case "4":
+          listS2007(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          break;
+        case "5":
+          listS2400(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          break;
+        case "6":
+          this.disposeChart();
+          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: dictLabel,
+                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
+              },
+              xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: sampleDateArray
+              },
+              yAxis: {
+                type: 'value'
+              },
+              series: [
+                {
+                  name: '弱碱段NaOH浓度',
+                  type: 'line',
+                  data: naOhArray
+                },
+                {
+                  name: 'C340排出NaOH控制',
+                  type: 'line',
+                  data: controlArray
+                }
+              ]
+            };
+            this.chart = this.echarts.init(document.getElementById('chart'));
+            this.chart.setOption(option);
+          });
+          break;
+        case "7":
+          this.disposeChart();
+          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: dictLabel,
+                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
+              },
+              xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: sampleDateArray
+              },
+              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.chart = this.echarts.init(document.getElementById('chart'));
+            this.chart.setOption(option);
+          });
+          break;
+        case "8":
+          this.disposeChart();
+          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: dictLabel,
+                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
+              },
+              xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: sampleDateArray
+              },
+              yAxis: {
+                type: 'value'
+              },
+              series: [
+                {
+                  name: '乙烯',
+                  type: 'line',
+                  data: ethyleneArray
+                },
+                {
+                  name: '丙烯',
+                  type: 'line',
+                  data: propyleneArray
+                }
+              ]
+            };
+            this.chart = this.echarts.init(document.getElementById('chart'));
+            this.chart.setOption(option);
+          });
+          break;
+        case "9":
+          listS5001(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          break;
+        case "10":
+          listS3009(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          listS3010(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          listS3011(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          listS3012(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          break;
+        case "11":
+          listS5010(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          listS5012(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          break;
+        case "12":
+          listS6301(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          break;
+        case "13":
+          this.disposeChart();
+          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: dictLabel,
+                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
+              },
+              xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: sampleDateArray
+              },
+              yAxis: {
+                type: 'value'
+              },
+              series: [
+                {
+                  name: '溴价gBr/100g',
+                  type: 'line',
+                  data: brNumberArray
+                },
+                {
+                  name: '总硫mg/kg',
+                  type: 'line',
+                  data: totalSulfurArray
+                },
+                {
+                  name: '总氮mg/kg',
+                  type: 'line',
+                  data: totalNitrogenArray
+                }
+              ]
+            };
+            this.chart = this.echarts.init(document.getElementById('chart'));
+            this.chart.setOption(option);
+          });
+          break;
+        case "14":
+          listS1301(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          break;
+        case "15":
+          listS4501(this.analysisQueryParams).then(response => {
+            let data = response.data;
+            console.log(data)
+          });
+          break;
+      }
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.getList();
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.sampleDate = [];
-      this.handleQuery();
-    },
     /** 修改按钮操作 */
     handleUpdate(row) {
       if (row.samplePoint == 'S0501') {
@@ -3790,6 +4289,14 @@ export default {
           this.msgSuccess("删除成功");
         })
     },
+    /** 趋势分析 */
+    handleAnalysis() {
+      this.analysis.open = true;
+      this.analysis.title = "趋势分析";
+      this.setAnalysisDefaultSampleDate();
+      this.analysisValue = "2";
+      this.handleAnalysisQuery();
+    },
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
@@ -3805,7 +4312,7 @@ export default {
     },
     /** 导入按钮操作 */
     handleImport() {
-        this.upload.title = "批量导入质量月报";
+        this.upload.title = "批量导入";
         this.upload.open = true;
     },
     /** 下载模板操作 */