王子文 生产日报 趋势图中添加对比指标

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

@@ -2819,11 +2819,10 @@
       </div>
     </el-dialog>
     <!-- 趋势分析对话框 -->
-    <el-dialog @close="disposeChart" :title="analysis.title" :visible.sync="analysis.open" width="1000px" append-to-body>
+    <el-dialog @close="disposeChart" :title="analysis.title" :visible.sync="analysis.open" width="1400px" append-to-body>
       <el-form :model="analysisQueryParams" ref="queryForm" :inline="true" label-width="68px">
         <el-form-item label="开始日期" prop="startDate">
           <el-date-picker
-            style="width: 200px;"
             @change="handleAnalysisQuery"
             v-model="analysisQueryParams.startDate"
             type="date"
@@ -2832,17 +2831,20 @@
         </el-form-item>
         <el-form-item label="结束日期" prop="endDate">
           <el-date-picker
-            style="width: 200px;"
             @change="handleAnalysisQuery"
             v-model="analysisQueryParams.endDate"
             type="date"
             placeholder="选择结束日期">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="对比指标" prop="">
-          <el-select filterable clearable placeholder="请选择对比指标">
+        <el-form-item label="对比指标" prop="chemicalChosen">
+          <el-select
+            v-model="chemicalChosen"
+            @change="handleAddChemicals"
+            filterable
+            clearable
+            placeholder="请选择对比指标">
             <el-option
-              style="width: 260px;"
               v-for="dict in chemicalsOptions"
               :key="dict.dictValue"
               :label="dict.dictLabel"
@@ -2851,7 +2853,7 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <div id="bottomRightChartDialog" style="width:940px;height:400px;"></div>
+      <div id="trendChart" style="width:1340px;height:600px;"></div>
     </el-dialog>
   </div>
 </template>
@@ -2869,46 +2871,16 @@ export default {
   components: { Treeselect },
   data() {
     return {
+      // 选中的对比指标
+      chemicalChosen: null,
+      // 对比指标下拉框
       chemicalsOptions: [],
+      // y轴最大值
       maxValue: null,
+      // y轴最小值
       minValue: null,
+      // 趋势图
       chart: null,
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 每日生产报告表格数据
-      reportList: [],
-      // 弹出层标题
-      title: "",
-      // 部门树选项
-      deptOptions: undefined,
-      clientHeight:300,
-      // 是否显示弹出层
-      open: false,
-      // 用户导入参数
-      upload: {
-        // 是否显示弹出层（用户导入）
-        open: false,
-        // 弹出层标题（用户导入）
-        title: "",
-        // 是否禁用上传
-        isUploading: false,
-        // 是否更新已经存在的用户数据
-        updateSupport: 0,
-        // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/production/report/importData"
-      },
       // 趋势分析参数
       analysis: {
         // 是否显示弹出层
@@ -2922,16 +2894,22 @@ export default {
         startDate: null,
         endDate: null
       },
+      fieldNameTemp: null,
+      fieldNameTitle: null,
+      fieldNameTitle2: null,
+      // 趋势图y轴数值
       valueList: [],
+      // 趋势图y轴数值（对比）
+      valueList2: [],
+      // 趋势图x轴日期
       dateList: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 20,
+      // 每日生产报告数据
+      reportData: {
+        id: null,
+        pguC5RaffInput: null,
         fromDate: null,
         toDate: null,
         reportDate: null,
-        reportCode: null,
         nap: null,
         c5: null,
         c6C8Na: null,
@@ -3462,18 +3440,57 @@ export default {
         pguAeuLossPercentage: null,
         pguAeuFeedLoadPercentage: null
       },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
+      // 上次选中日期
+      lastSelectedDate: null,
+      // 修改中
+      updating: false,
+
+
+
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 每日生产报告表格数据
+      reportList: [],
+      // 弹出层标题
+      title: "",
+      // 部门树选项
+      deptOptions: undefined,
+      clientHeight:300,
+      // 是否显示弹出层
+      open: false,
+      // 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/production/report/importData"
       },
-      // 每日生产报告数据
-      reportData: {
-        id: null,
-        pguC5RaffInput: null,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
         fromDate: null,
         toDate: null,
         reportDate: null,
+        reportCode: null,
         nap: null,
         c5: null,
         c6C8Na: null,
@@ -4004,10 +4021,11 @@ export default {
         pguAeuLossPercentage: null,
         pguAeuFeedLoadPercentage: null
       },
-      // 上次选中日期
-      lastSelectedDate: null,
-      // 修改中
-      updating: false
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      },
     };
   },
   watch: {
@@ -4041,11 +4059,34 @@ export default {
   // },
   mixins: [echartMixins],
   methods: {
+    /** 处理趋势图对话框对比指标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 = [];
+        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();
+      } else {  // 清空对比指标
+        this.analysisQueryParams.fieldName = this.fieldNameTemp;  // 恢复当前dialog查询字段
+        this.handleAnalysisQuery();
+      }
+    },
+    /** 销毁趋势图 */
     disposeChart() {
       this.echarts.dispose(this.chart);
     },
+    /** 处理趋势图对话框开始/结束日期change事件 */
     handleAnalysisQuery() {
-      this.echarts.dispose(this.chart);
+      this.disposeChart();
       this.valueList = [];
       this.dateList = [];
       let endDate = new Date(this.analysisQueryParams.endDate);
@@ -4054,6 +4095,7 @@ export default {
       this.analysisQueryParams.startDate = startDate.getFullYear() + "-" + Number(startDate.getMonth() + 1) + "-" + startDate.getDate();
       this.draw();
     },
+    /** 绘制趋势图 */
     draw() {
       getAnalysisData(this.analysisQueryParams).then(response => {
         let data = response.data;
@@ -4075,7 +4117,71 @@ export default {
             }
           }
         }
-        this.chart = this.echarts.init(document.getElementById("bottomRightChartDialog"));
+        this.chart = this.echarts.init(document.getElementById("trendChart"));
+        let option = {
+          tooltip: {
+            trigger: "item"
+          },
+          grid: {
+            left: 90,
+            right: 80,
+          },
+          xAxis: {
+            data: this.dateList,
+          },
+          yAxis: {
+            max: this.maxValue,
+            min: this.minValue,
+            min: function(value) {  // 取最小值向下取整为最小刻度
+              return Math.floor(value.min)
+            },
+            max: function(value) {  // 取最大值向上取整为最大刻度
+              return  Math.ceil(value.max)
+            },
+            scale: true,
+            type: 'value',
+          },
+          series: [
+            {
+              name: this.fieldNameTitle,
+              label: {
+                show: true,
+                position: 'top'
+              },
+              data: this.valueList,
+              type: 'line',
+              smooth: true,
+              symbolSize: 15,
+              color:"#5470c6",
+              lineStyle: {
+                width: 6
+              }
+            }
+          ],
+        };
+        this.chart.setOption(option);
+      });
+    },
+    /** 绘制包含对比指标的趋势图 */
+    draw2() {
+      getAnalysisData(this.analysisQueryParams).then(response => {
+        let data = response.data;
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].valueData != null) {
+            if (data[i].valueData.toString().search("%") != -1) {
+              this.valueList2[i] = data[i].valueData.substr(0, data[i].valueData.length - 1);
+            } else {
+              this.valueList2[i] = data[i].valueData;
+            }
+            if (data[i].valueData > this.maxValue) {
+              this.maxValue = data[i].valueData;
+            }
+            if (data[i].valueData < this.minValue) {
+              this.minValue = data[i].valueData;
+            }
+          }
+        }
+        this.chart = this.echarts.init(document.getElementById("trendChart"));
         let option = {
           tooltip: {
             trigger: "item"
@@ -4091,18 +4197,18 @@ export default {
           yAxis: {
             max: this.maxValue,
             min: this.minValue,
-            min: function(value) {//取最小值向下取整为最小刻度
+            min: function(value) {  // 取最小值向下取整为最小刻度
               return Math.floor(value.min)
             },
-            max: function(value) {//取最大值向上取整为最大刻度
+            max: function(value) {  // 取最大值向上取整为最大刻度
               return  Math.ceil(value.max)
             },
             scale: true,
             type: 'value',
-            name: '值'
           },
           series: [
             {
+              name: this.fieldNameTitle,
               label: {
                 show: true,
                 position: 'top'
@@ -4111,18 +4217,33 @@ export default {
               type: 'line',
               smooth: true,
               symbolSize: 15,
-              color:"#1f9f90",
+              color:"#5470c6",
+              lineStyle: {
+                width: 6
+              }
+            },
+            {
+              name: this.fieldNameTitle2,
+              label: {
+                show: true,
+                position: 'top'
+              },
+              data: this.valueList2,
+              type: 'line',
+              smooth: true,
+              symbolSize: 15,
+              color:"#91cc75",
               lineStyle: {
                 width: 6
               }
             }
-          ]
+          ],
         };
         this.chart.setOption(option);
       });
     },
-    // 打开趋势分析对话框
-    openDialog(fieldName, title) {
+    /** 打开趋势图对话框 */
+    openDialog(fieldName, fieldNameTitle) {
       // 设置开始日期和结束日期，默认范围为一个月
       let today = new Date(this.reportData.reportDate);
       let monthBefore = new Date();
@@ -4140,7 +4261,9 @@ export default {
       this.analysisQueryParams.endDate = today.getFullYear() + "-" + Number(today.getMonth() + 1) + "-" + today.getDate();
       this.analysisQueryParams.startDate = monthBefore.getFullYear() + "-" + Number(monthBefore.getMonth() + 1) + "-" + monthBefore.getDate();
       this.analysisQueryParams.fieldName = fieldName;
-      this.analysis.title = title + "趋势分析";
+      this.fieldNameTemp = fieldName;
+      this.analysis.title = fieldNameTitle + "趋势分析";
+      this.fieldNameTitle = fieldNameTitle;
       this.analysis.open = true;
       this.valueList = [];
       this.dateList = [];
@@ -4194,6 +4317,9 @@ export default {
         }
       });
     },
+
+
+
     /** 查询每日生产报告列表 */
     getList() {
       this.loading = true;