生产日报 - 实现多数据多坐标对比展示

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

@@ -2841,7 +2841,7 @@
             placeholder="选择开始日期">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="结束日期" prop="endDate">
+        <el-form-item label="结束日期" prop ="endDate">
           <el-date-picker
             @change="handleAnalysisQuery"
             v-model="analysisQueryParams.endDate"
@@ -2851,6 +2851,7 @@
         </el-form-item>
         <el-form-item label="对比指标" prop="chemicalChosen">
           <el-select
+            multiple
             v-model="chemicalChosen"
             @change="handleAddChemicals"
             filterable
@@ -2865,12 +2866,12 @@
           </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="纵坐标最小值" 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>
       <div id="trendChart" style="width:1340px;height:600px;"></div>
     </el-dialog>
@@ -4071,17 +4072,6 @@ export default {
     this.getTreeselect();
     this.loading = false;
   },
-  // mounted() {
-  //   let element = document.getElementById("Nap");
-  //   let offsetHeight = element.offsetHeight;  // 页面渲染后的单元格高度
-  //   let top = 0 - offsetHeight; // 箭头元素相对定位top属性的值
-  //   let elements = document.getElementsByClassName("triangle-right"); // 箭头元素数组
-  //   Array.prototype.forEach.call(elements, function (element) { // 遍历
-  //     element.setAttribute("position", "relative"); // 相对定位
-  //     element.setAttribute("right", "-8px");  // 向右移8px
-  //     element.setAttribute("top", top + "px");  // 向上移一个单元格的高度
-  //   });
-  // },
   mixins: [echartMixins],
   methods: {
     // 选择文件改变
@@ -4105,7 +4095,6 @@ export default {
         });
       }, 5000)
     },
-
     /** 校验用户输入是否为数字 */
     isNumberInput() {
       let flag = true;
@@ -4134,19 +4123,21 @@ export default {
     /** 处理趋势图对话框对比指标change事件 */
     handleAddChemicals() {
       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 = [];
+        // 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.draw2();
+        this.disposeChart();
+        this.drawN();
       } else {  // 清空对比指标
         this.analysisQueryParams.fieldName = this.fieldNameTemp;  // 恢复当前dialog查询字段
         this.handleAnalysisQuery();
@@ -4314,8 +4305,14 @@ export default {
             trigger: "item"
           },
           grid: {
-            left: 90,
-            right: 80,
+            // 左侧
+            x: '10%',
+            // 上部
+            // y: 25,
+            // 右侧
+            x2: '40%'
+            // 下部
+            // y2: 35
           },
           xAxis: {
             data: this.dateList,
@@ -4363,6 +4360,72 @@ export default {
               scale: true,
               type: 'value',
             },
+            {
+              name: this.fieldNameTitle2,
+              nameTextStyle: {
+                fontWeight: 'bold',
+                color:"#91cc75",
+              },
+              position: 'right',
+              axisLine: {
+                show: 'true',
+              },
+              max: this.maxValue2,
+              min: this.minValue2,
+              min: function(value) {  // 取最小值向下取整为最小刻度
+                return Math.floor(value.min)
+              },
+              max: function(value) {  // 取最大值向上取整为最大刻度
+                return  Math.ceil(value.max)
+              },
+              scale: true,
+              type: 'value',
+              offset: 100,
+            },
+            {
+              name: this.fieldNameTitle2,
+              nameTextStyle: {
+                fontWeight: 'bold',
+                color:"#91cc75",
+              },
+              position: 'right',
+              axisLine: {
+                show: 'true',
+              },
+              max: this.maxValue2,
+              min: this.minValue2,
+              min: function(value) {  // 取最小值向下取整为最小刻度
+                return Math.floor(value.min)
+              },
+              max: function(value) {  // 取最大值向上取整为最大刻度
+                return  Math.ceil(value.max)
+              },
+              scale: true,
+              type: 'value',
+              offset: 200,
+            },
+            {
+              name: this.fieldNameTitle2,
+              nameTextStyle: {
+                fontWeight: 'bold',
+                color:"#91cc75",
+              },
+              position: 'right',
+              axisLine: {
+                show: 'true',
+              },
+              max: this.maxValue2,
+              min: this.minValue2,
+              min: function(value) {  // 取最小值向下取整为最小刻度
+                return Math.floor(value.min)
+              },
+              max: function(value) {  // 取最大值向上取整为最大刻度
+                return  Math.ceil(value.max)
+              },
+              scale: true,
+              type: 'value',
+              offset: 300,
+            },
           ],
           series: [
             {
@@ -4396,12 +4459,186 @@ export default {
                 width: 6
               },
               yAxisIndex: 1
-            }
+            },
+            {
+              name: this.fieldNameTitle2,
+              label: {
+                show: true,
+                position: 'top'
+              },
+              data: this.valueList2,
+              type: 'line',
+              smooth: true,
+              symbolSize: 15,
+              color:"#91cc75",
+              lineStyle: {
+                width: 6
+              },
+              yAxisIndex: 2
+            },
+            {
+              name: this.fieldNameTitle2,
+              label: {
+                show: true,
+                position: 'top'
+              },
+              data: this.valueList2,
+              type: 'line',
+              smooth: true,
+              symbolSize: 15,
+              color:"#91cc75",
+              lineStyle: {
+                width: 6
+              },
+              yAxisIndex: 3
+            },
+            {
+              name: this.fieldNameTitle2,
+              label: {
+                show: true,
+                position: 'top'
+              },
+              data: this.valueList2,
+              type: 'line',
+              smooth: true,
+              symbolSize: 15,
+              color:"#91cc75",
+              lineStyle: {
+                width: 6
+              },
+              yAxisIndex: 4
+            },
           ],
         };
         this.chart.setOption(option);
       });
     },
+    /** 绘制包含n个对比指标的趋势图 */
+    drawN() {
+      let colors = ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"];
+
+      this.chart = this.echarts.init(document.getElementById("trendChart"));
+
+      let option = {
+        tooltip: {
+          trigger: "item"
+        },
+        grid: {
+          x: '5%',
+          x2: '25%'
+        },
+        xAxis: {
+          data: this.dateList,
+        },
+      };
+
+      let yAxis = [];
+      yAxis.push({
+        name: this.fieldNameTitle,
+        nameTextStyle: {
+          fontWeight: 'bold',
+          color: colors[0],
+        },
+        position: 'left',
+        axisLine: {
+          show: 'true',
+          lineStyle: {
+            color: colors[0],
+            width: 2,
+          }
+        },
+        scale: true,
+        type: 'value',
+      });
+
+      let series = [];
+      series.push({
+        name: this.fieldNameTitle,
+        label: {
+          position: 'top'
+        },
+        data: this.valueList,
+        type: 'line',
+        smooth: true,
+        symbolSize: 10,
+        color: colors[0],
+        lineStyle: {
+          width: 4
+        },
+        yAxisIndex: 0
+      });
+
+      for (let i = 0; i < this.chemicalChosen.length; i++) {
+        this.analysisQueryParams.fieldName = this.chemicalChosen[i];
+        getAnalysisData(this.analysisQueryParams).then(response => {
+          let dictLabel = "";
+          for (let j = 0; j < this.chemicalsOptions.length; j++) {
+            if (this.chemicalsOptions[j].dictValue == this.chemicalChosen[i]) {
+              dictLabel = this.chemicalsOptions[j].dictLabel;
+            }
+          }
+
+          let data = response.data;
+          let valueList = [];
+          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;
+              }
+            }
+          }
+
+          yAxis.push({
+            name: dictLabel,
+            nameRotate: 20,
+            nameTextStyle: {
+              fontWeight: 'bold',
+              color: colors[i + 1],
+            },
+            position: 'right',
+            axisLine: {
+              show: 'true',
+              lineStyle: {
+                color: colors[i + 1],
+                width: 2,
+              }
+            },
+            scale: true,
+            type: 'value',
+            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;
+        _this.chart.setOption(option);
+      }, 3000);
+
+    },
     /** 打开趋势图对话框 */
     openDialog(fieldName, fieldNameTitle) {
       if (this.updating == true) {