生产日报 - y轴多个坐标对比展示时，动态生成输入框，重新渲染指定相应坐标轴的最大值/最小值

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

@@ -2831,11 +2831,10 @@
       </div>
     </el-dialog>
     <!-- 趋势分析对话框 -->
-    <el-dialog  :close-on-click-modal="false" @close="handleDialogClose" :title="analysis.title" :visible.sync="analysis.open" width="1400px" append-to-body>
+    <el-dialog :close-on-click-modal="false" @close="handleDialogClose" :title="analysis.title" :visible.sync="analysis.open" width="1400px" append-to-body>
       <el-form :model="analysisQueryParams" ref="queryForm" :inline="true" label-width="102px">
         <el-form-item label="开始日期" prop="startDate">
           <el-date-picker
-            @change="handleAnalysisQuery"
             v-model="analysisQueryParams.startDate"
             type="date"
             placeholder="选择开始日期">
@@ -2843,7 +2842,6 @@
         </el-form-item>
         <el-form-item label="结束日期" prop ="endDate">
           <el-date-picker
-            @change="handleAnalysisQuery"
             v-model="analysisQueryParams.endDate"
             type="date"
             placeholder="选择结束日期">
@@ -2852,7 +2850,7 @@
         <el-form-item label="对比指标" prop="chemicalChosen">
           <el-select
             multiple
-            multiple-limit="5"
+            :multiple-limit="5"
             v-model="chemicalChosen"
             @change="handleAddChemicals"
             filterable
@@ -2867,12 +2865,61 @@
           </el-select>
         </el-form-item>
         <br/>
-        <!--<el-form-item label="纵坐标最小值" prop="minY">-->
-          <!--<el-input v-model="minY" placeholder="请输入" @change="handleAnalysisQuery"></el-input>-->
-        <!--</el-form-item>-->
-        <!--<el-form-item label="纵坐标最大值" prop="maxY">-->
-          <!--<el-input v-model="maxY" placeholder="请输入" @change="handleAnalysisQuery"></el-input>-->
-        <!--</el-form-item>-->
+        <el-form-item :label="minYLabel" prop="minY">
+          <el-input v-model="minY" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item :label="maxYLabel" prop="maxY">
+          <el-input v-model="maxY" placeholder="请输入"></el-input>
+        </el-form-item>
+
+        <span v-if="showY1">
+          <el-form-item :label="minYLabel1" prop="minY1">
+            <el-input v-model="minY1" placeholder="请输入"></el-input>
+          </el-form-item>
+          <el-form-item :label="maxYLabel1" prop="maxY1">
+            <el-input v-model="maxY1" placeholder="请输入"></el-input>
+          </el-form-item>
+        </span>
+
+        <span v-if="showY2">
+          <el-form-item :label="minYLabel2" prop="minY2">
+            <el-input v-model="minY2" placeholder="请输入"></el-input>
+          </el-form-item>
+          <el-form-item :label="maxYLabel2" prop="maxY2">
+            <el-input v-model="maxY2" placeholder="请输入"></el-input>
+          </el-form-item>
+        </span>
+
+        <span v-if="showY3">
+          <el-form-item :label="minYLabel3" prop="minY3">
+            <el-input v-model="minY3" placeholder="请输入"></el-input>
+          </el-form-item>
+          <el-form-item :label="maxYLabel3" prop="maxY3">
+            <el-input v-model="maxY3" placeholder="请输入"></el-input>
+          </el-form-item>
+        </span>
+
+        <span v-if="showY4">
+          <el-form-item :label="minYLabel4" prop="minY4">
+            <el-input v-model="minY4" placeholder="请输入"></el-input>
+          </el-form-item>
+          <el-form-item :label="maxYLabel4" prop="maxY4">
+            <el-input v-model="maxY4" placeholder="请输入"></el-input>
+          </el-form-item>
+        </span>
+
+        <span v-if="showY5">
+          <el-form-item :label="minYLabel5" prop="minY5">
+            <el-input v-model="minY5" placeholder="请输入"></el-input>
+          </el-form-item>
+          <el-form-item :label="maxYLabel5" prop="maxY5">
+            <el-input v-model="maxY5" placeholder="请输入"></el-input>
+          </el-form-item>
+        </span>
+
+        <el-form-item>
+          <el-button type="primary" @click="handleAnalysisQuery">搜 索</el-button>
+        </el-form-item>
       </el-form>
       <div id="trendChart" style="width:1340px;height:600px;"></div>
     </el-dialog>
@@ -2892,6 +2939,33 @@ export default {
   components: { Treeselect },
   data() {
     return {
+      showY1: false,
+      showY2: false,
+      showY3: false,
+      showY4: false,
+      showY5: false,
+      minYLabel1: null,
+      maxYLabel1: null,
+      minYLabel2: null,
+      maxYLabel2: null,
+      minYLabel3: null,
+      maxYLabel3: null,
+      minYLabel4: null,
+      maxYLabel4: null,
+      minYLabel5: null,
+      maxYLabel5: null,
+      minY1: null,
+      maxY1: null,
+      minY2: null,
+      maxY2: null,
+      minY3: null,
+      maxY3: null,
+      minY4: null,
+      maxY4: null,
+      minY5: null,
+      maxY5: null,
+      minYLabel: null,
+      maxYLabel: null,
       // 纵坐标最小值
       minY: null,
       // 纵坐标最大值
@@ -4129,6 +4203,7 @@ export default {
         this.analysisQueryParams.endDate = endDate.getFullYear() + "-" + Number(endDate.getMonth() + 1) + "-" + endDate.getDate();
         this.analysisQueryParams.startDate = startDate.getFullYear() + "-" + Number(startDate.getMonth() + 1) + "-" + startDate.getDate();
         this.disposeChart();
+        this.clearMinMax();
         this.drawN();
       } else {  // 清空对比指标
         this.analysisQueryParams.fieldName = this.fieldNameTemp;  // 恢复当前dialog查询字段
@@ -4148,19 +4223,25 @@ export default {
     /** 处理趋势图对话框开始/结束日期change事件 */
     handleAnalysisQuery() {
       if (this.chemicalChosen != null && this.chemicalChosen != "") {
-        this.analysisQueryParams.fieldName = this.chemicalChosen;
-        for (let i = 0; i < this.chemicalsOptions.length; i++) {
-          if (this.chemicalsOptions[i].dictValue == this.chemicalChosen) {
-            this.fieldNameTitle2 = this.chemicalsOptions[i].dictLabel;
-          }
-        }
-        this.disposeChart();
-        this.valueList2 = [];
         let endDate = new Date(this.analysisQueryParams.endDate);
         let startDate = new Date(this.analysisQueryParams.startDate);
         this.analysisQueryParams.endDate = endDate.getFullYear() + "-" + Number(endDate.getMonth() + 1) + "-" + endDate.getDate();
         this.analysisQueryParams.startDate = startDate.getFullYear() + "-" + Number(startDate.getMonth() + 1) + "-" + startDate.getDate();
-        this.draw2(this.minY, this.maxY);
+        this.disposeChart();
+        this.drawN();
+        // this.analysisQueryParams.fieldName = this.chemicalChosen;
+        // for (let i = 0; i < this.chemicalsOptions.length; i++) {
+        //   if (this.chemicalsOptions[i].dictValue == this.chemicalChosen) {
+        //     this.fieldNameTitle2 = this.chemicalsOptions[i].dictLabel;
+        //   }
+        // }
+        // this.disposeChart();
+        // this.valueList2 = [];
+        // let endDate = new Date(this.analysisQueryParams.endDate);
+        // let startDate = new Date(this.analysisQueryParams.startDate);
+        // this.analysisQueryParams.endDate = endDate.getFullYear() + "-" + Number(endDate.getMonth() + 1) + "-" + endDate.getDate();
+        // this.analysisQueryParams.startDate = startDate.getFullYear() + "-" + Number(startDate.getMonth() + 1) + "-" + startDate.getDate();
+        // this.draw2(this.minY, this.maxY);
       } else {
         this.disposeChart();
         this.valueList = [];
@@ -4526,6 +4607,14 @@ export default {
 
       let yAxis = [];
       yAxis.push({
+        max: this.maxValue,
+        min: this.minValue,
+        min: function(value) {  // 取最小值向下取整为最小刻度
+          return Math.floor(value.min)
+        },
+        max: function(value) {  // 取最大值向上取整为最大刻度
+          return  Math.ceil(value.max)
+        },
         name: this.fieldNameTitle,
         nameTextStyle: {
           fontWeight: 'bold',
@@ -4560,8 +4649,12 @@ export default {
         yAxisIndex: 0
       });
 
+      this.clearMinMax();
+
       for (let i = 0; i < this.chemicalChosen.length; i++) {
         this.analysisQueryParams.fieldName = this.chemicalChosen[i];
+        let minY = null;
+        let maxY = null;
         getAnalysisData(this.analysisQueryParams).then(response => {
           let dictLabel = "";
           for (let j = 0; j < this.chemicalsOptions.length; j++) {
@@ -4570,6 +4663,38 @@ export default {
             }
           }
 
+          if (i == 0) {
+            this.showY1 = true;
+            this.minYLabel1 = dictLabel + "(min)";
+            this.maxYLabel1 = dictLabel + "(max)";
+            minY = this.minY1;
+            maxY = this.maxY1;
+          } else if (i == 1) {
+            this.showY2 = true;
+            this.minYLabel2 = dictLabel + "(min)";
+            this.maxYLabel2 = dictLabel + "(max)";
+            minY = this.minY2;
+            maxY = this.maxY2;
+          } else if (i == 2) {
+            this.showY3 = true;
+            this.minYLabel3 = dictLabel + "(min)";
+            this.maxYLabel3 = dictLabel + "(max)";
+            minY = this.minY3;
+            maxY = this.maxY3;
+          } else if (i == 3) {
+            this.showY4 = true;
+            this.minYLabel4 = dictLabel + "(min)";
+            this.maxYLabel4 = dictLabel + "(max)";
+            minY = this.minY4;
+            maxY = this.maxY4;
+          } else if (i == 4) {
+            this.showY5 = true;
+            this.minYLabel5 = dictLabel + "(min)";
+            this.maxYLabel5 = dictLabel + "(max)";
+            minY = this.minY5;
+            maxY = this.maxY5;
+          }
+
           let data = response.data;
           let valueList = [];
           for (let i = 0; i < data.length; i++) {
@@ -4582,7 +4707,69 @@ export default {
             }
           }
 
+          if (minY != null && maxY != null) {
+            let tempValueList = [];
+            // let tempDateList = [];
+            for (let i = 0; i < valueList.length; i++) {
+              if (Number(valueList[i]) >= Number(minY) && Number(valueList[i]) <= Number(maxY)) {
+                tempValueList.push(valueList[i]);
+                // tempDateList.push(this.dateList[i]);
+              } else {
+                tempValueList.push(null);
+              }
+            }
+            valueList = tempValueList;
+            // this.dateList = tempDateList;
+            console.log(valueList)
+          } else {
+            maxY = 0;
+            minY = data[0].valueData;
+            for (let i = 0; i < data.length; i++) {
+              if (data[i].valueData != null) {
+                if (data[i].valueData.toString().search("%") != -1) {
+                  valueList[i] = data[i].valueData.substr(0, data[i].valueData.length - 1);
+                } else {
+                  valueList[i] = data[i].valueData;
+                }
+                // this.dateList[i] = data[i].dateData;
+                if (data[i].valueData > this.maxY) {
+                  maxY = data[i].valueData;
+                }
+                if (data[i].valueData < this.minY) {
+                  minY = data[i].valueData;
+                }
+              }
+            }
+          }
+
+          console.log(maxY)
+          console.log(minY)
+
+          series.push({
+            name: dictLabel,
+            label: {
+              position: 'top'
+            },
+            data: valueList,
+            type: 'line',
+            smooth: true,
+            symbolSize: 10,
+            color: colors[i + 1],
+            lineStyle: {
+              width: 4
+            },
+            yAxisIndex: i + 1,
+          });
+
           yAxis.push({
+            max: maxY,
+            min: minY,
+            min: function(value) {  // 取最小值向下取整为最小刻度
+              return Math.floor(value.min)
+            },
+            max: function(value) {  // 取最大值向上取整为最大刻度
+              return  Math.ceil(value.max)
+            },
             name: dictLabel,
             nameRotate: 20,
             nameTextStyle: {
@@ -4602,28 +4789,11 @@ export default {
             offset: i * 70,
           });
 
-          series.push({
-            name: dictLabel,
-            label: {
-              position: 'top'
-            },
-            data: valueList,
-            type: 'line',
-            smooth: true,
-            symbolSize: 10,
-            color: colors[i + 1],
-            lineStyle: {
-              width: 4
-            },
-            yAxisIndex: i + 1,
-          });
-
 
         });
       }
 
       let _this = this;
-
       setTimeout(function () {
         option.yAxis = yAxis;
         option.series = series;
@@ -4631,8 +4801,28 @@ export default {
       }, 3000);
 
     },
+    clearMinMax() {
+      this.showY1 = false;
+      this.showY2 = false;
+      this.showY3 = false;
+      this.showY4 = false;
+      this.showY5 = false;
+      this.minYLabel1 = null;
+      this.maxYLabel1 = null;
+      this.minYLabel2 = null;
+      this.maxYLabel2 = null;
+      this.minYLabel3 = null;
+      this.maxYLabel3 = null;
+      this.minYLabel4 = null;
+      this.maxYLabel4 = null;
+      this.minYLabel5 = null;
+      this.maxYLabel5 = null;
+    },
     /** 打开趋势图对话框 */
     openDialog(fieldName, fieldNameTitle) {
+      this.clearMinMax();
+      this.minYLabel = fieldNameTitle + "(min)";
+      this.maxYLabel = fieldNameTitle + "(max)";
       if (this.updating == true) {
         return false;
       }