Merge remote-tracking branch 'origin/master'

master/src/main/java/com/ruoyi/project/production/controller/TMonthlyProductionReportController.java

@@ -33,6 +33,16 @@ public class TMonthlyProductionReportController extends BaseController
     @Autowired
     private ITMonthlyProductionReportService tMonthlyProductionReportService;
 
+    /**
+     * 按年份查询Cracker Raw Material
+     */
+    @PreAuthorize("@ss.hasPermi('production:monthly:query')")
+    @GetMapping(value = "/CrackerRawMaterial/{year}")
+    public AjaxResult getCrackerRawMaterialByYear(@PathVariable("year") Long year)
+    {
+        return AjaxResult.success(tMonthlyProductionReportService.selectCrackerRawMaterialByYear(year));
+    }
+
     /**
      * 查询每月生产报告列表
      */

master/src/main/java/com/ruoyi/project/production/mapper/TMonthlyProductionReportMapper.java

@@ -60,4 +60,6 @@ public interface TMonthlyProductionReportMapper
      * @return 结果
      */
     public int deleteTMonthlyProductionReportByIds(Long[] ids);
+
+    public List<TMonthlyProductionReport> selectCrackerRawMaterialByYear(Long year);
 }

master/src/main/java/com/ruoyi/project/production/service/ITMonthlyProductionReportService.java

@@ -2,6 +2,7 @@ package com.ruoyi.project.production.service;
 
 import java.util.List;
 import com.ruoyi.project.production.domain.TMonthlyProductionReport;
+import com.ruoyi.project.production.service.impl.vo.CrackerRawMaterialVO;
 
 /**
  * 每月生产报告Service接口
@@ -58,4 +59,6 @@ public interface ITMonthlyProductionReportService
      * @return 结果
      */
     public int deleteTMonthlyProductionReportById(Long id);
+
+    public List<CrackerRawMaterialVO> selectCrackerRawMaterialByYear(Long year);
 }

master/src/main/java/com/ruoyi/project/production/service/impl/TMonthlyProductionReportServiceImpl.java

@@ -1,12 +1,22 @@
 package com.ruoyi.project.production.service.impl;
 
+import java.lang.reflect.Method;
+import java.math.BigDecimal;
+import java.util.ArrayList;
+import java.util.Date;
 import java.util.List;
+
+import com.alibaba.druid.sql.ast.statement.SQLForeignKeyImpl;
+import com.ruoyi.project.production.service.impl.vo.CrackerRawMaterialVO;
+import org.junit.platform.commons.JUnitException;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import com.ruoyi.project.production.mapper.TMonthlyProductionReportMapper;
 import com.ruoyi.project.production.domain.TMonthlyProductionReport;
 import com.ruoyi.project.production.service.ITMonthlyProductionReportService;
 
+import javax.sound.midi.Soundbank;
+
 /**
  * 每月生产报告Service业务层处理
  *
@@ -90,4 +100,177 @@ public class TMonthlyProductionReportServiceImpl implements ITMonthlyProductionR
     {
         return tMonthlyProductionReportMapper.deleteTMonthlyProductionReportById(id);
     }
+
+    @Override
+    public List<CrackerRawMaterialVO> selectCrackerRawMaterialByYear(Long year) {
+        // 当前日期
+        Date currentDate = new Date();
+        // 当前年份
+        Long currentYear = Long.parseLong(currentDate.getYear() + 1900 + "");
+        // 当前月份
+        Long currentMonth = Long.parseLong(currentDate.getMonth() + 1 + "");
+        // 从数据库中查出的当前year的月报数据集合，每个元素对应当前year某个月的数据
+        List<TMonthlyProductionReport> tMonthlyProductionReports = tMonthlyProductionReportMapper.selectCrackerRawMaterialByYear(year);
+        // 前端月报数据集合，每个元素对应当前某个指标的title、unit、1~12月的数据以及年度汇总数据
+        List<CrackerRawMaterialVO> crackerRawMaterialVOs = new ArrayList<>();
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("Cracker Raw Material", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("NAP", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("C5", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("NA", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("Wison Ethane", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("LPG to Furnace", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("C4 Raff3 fr bd and 2ph", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("C2 fr LDPE", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("C3 fr OXO", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("Mixed C3/C4 fr BD", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("HC9", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("Offgas fr AEU", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("wash oil", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("toluene", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("C4 Recycle(ton)", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("input total", "t"));
+        crackerRawMaterialVOs.add(new CrackerRawMaterialVO("Total feed", "t"));
+        // 遍历从数据库中查出的月报数据集合，结果为0~12条数据不等
+        for (int i = 0; i < tMonthlyProductionReports.size(); i++) {
+            TMonthlyProductionReport tMonthlyProductionReport = tMonthlyProductionReports.get(i);
+            String nap = tMonthlyProductionReport.getNap();
+            String c5 = tMonthlyProductionReport.getC5();
+            String c6C8Na = tMonthlyProductionReport.getC6C8Na();
+            String wisonEthane = tMonthlyProductionReport.getWisonEthane();
+            String lpgToFurnace = tMonthlyProductionReport.getLpgToFurnace();
+            String raff3FrBd = tMonthlyProductionReport.getRaff3FrBd();
+            String raffinate2pFr2ph = tMonthlyProductionReport.getRaffinate2pFr2ph();
+            String c2FrLdpe = tMonthlyProductionReport.getC2FrLdpe();
+            String c3FrOxo = tMonthlyProductionReport.getC3FrOxo();
+            String mixedC3C4 = tMonthlyProductionReport.getMixedC3C4();
+            String hyC9 = tMonthlyProductionReport.getHyC9();
+            String pguOffgas = tMonthlyProductionReport.getPguOffgas();
+            String washOil = tMonthlyProductionReport.getWashOil();
+            String toluene = tMonthlyProductionReport.getToluene();
+            String hyC4FrR800 = tMonthlyProductionReport.getHyC4FrR800();
+            String crackerRawInput = tMonthlyProductionReport.getCrackerRawInput();
+            String crackerRawFeed = tMonthlyProductionReport.getCrackerRawFeed();
+            Long raff3FrBdAndRaffinate2pFr2ph = Long.parseLong(raff3FrBd) + Long.parseLong(raffinate2pFr2ph);
+            String raff3FrBdAndRaffinate2pFr2phStr = raff3FrBdAndRaffinate2pFr2ph.toString();
+            // 前端数据集合的class
+            Class clazz = null;
+            // 当前元素调用的set方法
+            Method method = null;
+            try {
+                Long reportMonth = tMonthlyProductionReport.getReportMonth();   // 当前元素的所属月份
+                Long reportYear = tMonthlyProductionReport.getReportYear();     // 当前元素的所属年份
+                clazz = Class.forName("com.ruoyi.project.production.service.impl.vo.CrackerRawMaterialVO");
+                switch (reportMonth.toString()) {
+                    case "1":   // 一月
+                        method = clazz.getDeclaredMethod("setJan", String.class);
+                        break;
+                    case "2":   // 二月
+                        method = clazz.getDeclaredMethod("setFeb", String.class);
+                        break;
+                    case "3":   // 三月
+                        method = clazz.getDeclaredMethod("setMar", String.class);
+                        break;
+                    case "4":   // 四月
+                        method = clazz.getDeclaredMethod("setApr", String.class);
+                        break;
+                    case "5":   // 五月
+                        method = clazz.getDeclaredMethod("setMay", String.class);
+                        break;
+                    case "6":   // 六月
+                        method = clazz.getDeclaredMethod("setJun", String.class);
+                        break;
+                    case "7":   // 七月
+                        method = clazz.getDeclaredMethod("setJul", String.class);
+                        break;
+                    case "8":   // 八月
+                        method = clazz.getDeclaredMethod("setAug", String.class);
+                        break;
+                    case "9":   // 九月
+                        method = clazz.getDeclaredMethod("setSep", String.class);
+                        break;
+                    case "10":   // 十月
+                        method = clazz.getDeclaredMethod("setOct", String.class);
+                        break;
+                    case "11":   // 十一月
+                        method = clazz.getDeclaredMethod("setNov", String.class);
+                        break;
+                    case "12":   // 十二月
+                        method = clazz.getDeclaredMethod("setDec", String.class);
+                        break;
+                }
+                // 按照当前元素的所属月份调取相应set方法
+                method.invoke(crackerRawMaterialVOs.get(0), crackerRawInput);
+                method.invoke(crackerRawMaterialVOs.get(1), nap);
+                method.invoke(crackerRawMaterialVOs.get(2), c5);
+                method.invoke(crackerRawMaterialVOs.get(3), c6C8Na);
+                method.invoke(crackerRawMaterialVOs.get(4), wisonEthane);
+                method.invoke(crackerRawMaterialVOs.get(5), lpgToFurnace);
+                method.invoke(crackerRawMaterialVOs.get(6), raff3FrBdAndRaffinate2pFr2phStr);
+                method.invoke(crackerRawMaterialVOs.get(7), c2FrLdpe);
+                method.invoke(crackerRawMaterialVOs.get(8), c3FrOxo);
+                method.invoke(crackerRawMaterialVOs.get(9), mixedC3C4);
+                method.invoke(crackerRawMaterialVOs.get(10), hyC9);
+                method.invoke(crackerRawMaterialVOs.get(11), pguOffgas);
+                method.invoke(crackerRawMaterialVOs.get(12), washOil);
+                method.invoke(crackerRawMaterialVOs.get(13), toluene);
+                method.invoke(crackerRawMaterialVOs.get(14), hyC4FrR800);
+                method.invoke(crackerRawMaterialVOs.get(15), crackerRawInput);
+                method.invoke(crackerRawMaterialVOs.get(16), crackerRawFeed);
+                // 当前年份=所属年份，当前月份=所属月份
+                if (currentMonth.equals(reportMonth) && currentYear.equals(reportYear)) {
+                    crackerRawMaterialVOs.get(0).setCurrently(crackerRawInput);
+                    crackerRawMaterialVOs.get(1).setCurrently(nap);
+                    crackerRawMaterialVOs.get(2).setCurrently(c5);
+                    crackerRawMaterialVOs.get(3).setCurrently(c6C8Na);
+                    crackerRawMaterialVOs.get(4).setCurrently(wisonEthane);
+                    crackerRawMaterialVOs.get(5).setCurrently(lpgToFurnace);
+                    crackerRawMaterialVOs.get(6).setCurrently(raff3FrBdAndRaffinate2pFr2phStr);
+                    crackerRawMaterialVOs.get(7).setCurrently(c2FrLdpe);
+                    crackerRawMaterialVOs.get(8).setCurrently(c3FrOxo);
+                    crackerRawMaterialVOs.get(9).setCurrently(mixedC3C4);
+                    crackerRawMaterialVOs.get(10).setCurrently(hyC9);
+                    crackerRawMaterialVOs.get(11).setCurrently(pguOffgas);
+                    crackerRawMaterialVOs.get(12).setCurrently(washOil);
+                    crackerRawMaterialVOs.get(13).setCurrently(toluene);
+                    crackerRawMaterialVOs.get(14).setCurrently(hyC4FrR800);
+                    crackerRawMaterialVOs.get(15).setCurrently(crackerRawInput);
+                    crackerRawMaterialVOs.get(16).setCurrently(crackerRawFeed);
+                }
+            } catch (Exception e) {
+                e.printStackTrace();
+            }
+        }
+        // 遍历前端月报数据集合，计算total的值1~12月之和）
+        for (int i = 0; i < crackerRawMaterialVOs.size(); i++) {
+            CrackerRawMaterialVO crackerRawMaterialVO = crackerRawMaterialVOs.get(i);
+            BigDecimal total = new BigDecimal("0");
+            String janStr = crackerRawMaterialVO.getJan();
+            String febStr = crackerRawMaterialVO.getFeb();
+            String marStr = crackerRawMaterialVO.getMar();
+            String aprStr = crackerRawMaterialVO.getApr();
+            String mayStr = crackerRawMaterialVO.getMay();
+            String junStr = crackerRawMaterialVO.getJun();
+            String julStr = crackerRawMaterialVO.getJul();
+            String augStr = crackerRawMaterialVO.getAug();
+            String sepStr = crackerRawMaterialVO.getSep();
+            String octStr = crackerRawMaterialVO.getOct();
+            String novStr = crackerRawMaterialVO.getNov();
+            String decStr = crackerRawMaterialVO.getDec();
+            BigDecimal jan = new BigDecimal(janStr == null ? "0" : janStr);
+            BigDecimal feb = new BigDecimal(febStr == null ? "0" : febStr);
+            BigDecimal mar = new BigDecimal(marStr == null ? "0" : marStr);
+            BigDecimal apr = new BigDecimal(aprStr == null ? "0" : aprStr);
+            BigDecimal may = new BigDecimal(mayStr == null ? "0" : mayStr);
+            BigDecimal jun = new BigDecimal(junStr == null ? "0" : junStr);
+            BigDecimal jul = new BigDecimal(julStr == null ? "0" : julStr);
+            BigDecimal aug = new BigDecimal(augStr == null ? "0" : augStr);
+            BigDecimal sep = new BigDecimal(sepStr == null ? "0" : sepStr);
+            BigDecimal oct = new BigDecimal(octStr == null ? "0" : octStr);
+            BigDecimal nov = new BigDecimal(novStr == null ? "0" : novStr);
+            BigDecimal dec = new BigDecimal(decStr == null ? "0" : decStr);
+            total = jan.add(feb).add(mar).add(apr).add(may).add(jun).add(jul).add(aug).add(sep).add(oct).add(nov).add(dec);
+            crackerRawMaterialVO.setTotal(total.toString());
+        }
+        return crackerRawMaterialVOs;
+    }
 }

master/src/main/java/com/ruoyi/project/production/service/impl/vo/CrackerRawMaterialVO.java

@@ -0,0 +1,177 @@
+package com.ruoyi.project.production.service.impl.vo;
+
+/**
+ * @author: Wang Zi Wen
+ * @email: wangggziwen@163.com
+ * @datetime: 2022/10/31 14:16
+ */
+public class CrackerRawMaterialVO {
+
+    private String title;
+
+    private String unit;
+
+    private String currently;
+
+    private String jan;
+
+    private String feb;
+
+    private String mar;
+
+    private String apr;
+
+    private String may;
+
+    private String jun;
+
+    private String jul;
+
+    private String aug;
+
+    private String sep;
+
+    private String oct;
+
+    private String nov;
+
+    private String dec;
+
+    private String total;
+
+    public String getTitle() {
+        return title;
+    }
+
+    public void setTitle(String title) {
+        this.title = title;
+    }
+
+    public String getUnit() {
+        return unit;
+    }
+
+    public void setUnit(String unit) {
+        this.unit = unit;
+    }
+
+    public String getCurrently() {
+        return currently;
+    }
+
+    public void setCurrently(String currently) {
+        this.currently = currently;
+    }
+
+    public String getJan() {
+        return jan;
+    }
+
+    public void setJan(String jan) {
+        this.jan = jan;
+    }
+
+    public String getFeb() {
+        return feb;
+    }
+
+    public void setFeb(String feb) {
+        this.feb = feb;
+    }
+
+    public String getMar() {
+        return mar;
+    }
+
+    public void setMar(String mar) {
+        this.mar = mar;
+    }
+
+    public String getApr() {
+        return apr;
+    }
+
+    public void setApr(String apr) {
+        this.apr = apr;
+    }
+
+    public String getMay() {
+        return may;
+    }
+
+    public void setMay(String may) {
+        this.may = may;
+    }
+
+    public String getJun() {
+        return jun;
+    }
+
+    public void setJun(String jun) {
+        this.jun = jun;
+    }
+
+    public String getJul() {
+        return jul;
+    }
+
+    public void setJul(String jul) {
+        this.jul = jul;
+    }
+
+    public String getAug() {
+        return aug;
+    }
+
+    public void setAug(String aug) {
+        this.aug = aug;
+    }
+
+    public String getSep() {
+        return sep;
+    }
+
+    public void setSep(String sep) {
+        this.sep = sep;
+    }
+
+    public String getOct() {
+        return oct;
+    }
+
+    public void setOct(String oct) {
+        this.oct = oct;
+    }
+
+    public String getNov() {
+        return nov;
+    }
+
+    public void setNov(String nov) {
+        this.nov = nov;
+    }
+
+    public String getDec() {
+        return dec;
+    }
+
+    public void setDec(String dec) {
+        this.dec = dec;
+    }
+
+    public String getTotal() {
+        return total;
+    }
+
+    public void setTotal(String total) {
+        this.total = total;
+    }
+
+    public CrackerRawMaterialVO() {
+    }
+
+    public CrackerRawMaterialVO(String title, String unit) {
+        this.title = title;
+        this.unit = unit;
+    }
+}

master/src/main/resources/mybatis/production/TMonthlyProductionReportMapper.xml

@@ -5,34 +5,43 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 <mapper namespace="com.ruoyi.project.production.mapper.TMonthlyProductionReportMapper">
     
     <resultMap type="TMonthlyProductionReport" id="TMonthlyProductionReportResult">
-        <result property="id"    column="id"    />
-        <result property="reportMonth"    column="report_month"    />
-        <result property="reportYear"    column="report_year"    />
-        <result property="nap"    column="nap"    />
-        <result property="c5"    column="c5"    />
-        <result property="c6C8Na"    column="c6_c8_na"    />
-        <result property="wisonEthane"    column="wison_ethane"    />
-        <result property="lpgToFurnace"    column="lpg_to_furnace"    />
-        <result property="raff3FrBd"    column="raff3_fr_bd"    />
-        <result property="raffinate2pFr2ph"    column="raffinate2p_fr_2ph"    />
-        <result property="c2FrLdpe"    column="c2_fr_ldpe"    />
-        <result property="c3FrOxo"    column="c3_fr_oxo"    />
-        <result property="mixedC3C4"    column="mixed_c3_c4"    />
-        <result property="hyC9"    column="hy_c9"    />
-        <result property="pguOffgas"    column="pgu_offgas"    />
-        <result property="washOil"    column="wash_oil"    />
-        <result property="toluene"    column="toluene"    />
-        <result property="hyC4FrR800"    column="hy_c4_fr_r800"    />
-        <result property="crackerRawInput"    column="cracker_raw_input"    />
-        <result property="crackerRawFeed"    column="cracker_raw_feed"    />
-        <result property="deptName" column="dept_name" />
+        <result property="id"                   column="id"    />
+        <result property="reportMonth"          column="report_month"    />
+        <result property="reportYear"           column="report_year"    />
+        <result property="nap"                  column="nap"    />
+        <result property="c5"                   column="c5"    />
+        <result property="c6C8Na"               column="c6_c8_na"    />
+        <result property="wisonEthane"          column="wison_ethane"    />
+        <result property="lpgToFurnace"         column="lpg_to_furnace"    />
+        <result property="raff3FrBd"            column="raff3_fr_bd"    />
+        <result property="raffinate2pFr2ph"     column="raffinate2p_fr_2ph"    />
+        <result property="c2FrLdpe"             column="c2_fr_ldpe"    />
+        <result property="c3FrOxo"              column="c3_fr_oxo"    />
+        <result property="mixedC3C4"            column="mixed_c3_c4"    />
+        <result property="hyC9"                 column="hy_c9"    />
+        <result property="pguOffgas"            column="pgu_offgas"    />
+        <result property="washOil"              column="wash_oil"    />
+        <result property="toluene"              column="toluene"    />
+        <result property="hyC4FrR800"           column="hy_c4_fr_r800"    />
+        <result property="crackerRawInput"      column="cracker_raw_input"    />
+        <result property="crackerRawFeed"       column="cracker_raw_feed"    />
+        <result property="deptName"             column="dept_name" />
     </resultMap>
 
     <sql id="selectTMonthlyProductionReportVo">
-        select d.id, d.report_month, d.report_year, d.nap, d.c5, d.c6_c8_na, d.wison_ethane, d.lpg_to_furnace, d.raff3_fr_bd, d.raffinate2p_fr_2ph, d.c2_fr_ldpe, d.c3_fr_oxo, d.mixed_c3_c4, d.hy_c9, d.pgu_offgas, d.wash_oil, d.toluene, d.hy_c4_fr_r800, d.cracker_raw_input, d.cracker_raw_feed ,s.dept_name from t_monthly_production_report d
-      left join sys_dept s on s.dept_id = d.dept_id
+        select d.id, d.report_month, d.report_year, d.nap, d.c5, d.c6_c8_na, d.wison_ethane, d.lpg_to_furnace, d.raff3_fr_bd, d.raffinate2p_fr_2ph, d.c2_fr_ldpe, d.c3_fr_oxo, d.mixed_c3_c4, d.hy_c9, d.pgu_offgas, d.wash_oil, d.toluene, d.hy_c4_fr_r800, d.cracker_raw_input, d.cracker_raw_feed from t_monthly_production_report d
     </sql>
 
+    <select id="selectCrackerRawMaterialByYear" parameterType="Long" resultMap="TMonthlyProductionReportResult">
+        select
+          d.id, d.report_month, d.report_year, d.nap, d.c5, d.c6_c8_na, d.wison_ethane, d.lpg_to_furnace,
+          d.raff3_fr_bd, d.raffinate2p_fr_2ph, d.c2_fr_ldpe, d.c3_fr_oxo, d.mixed_c3_c4, d.hy_c9, d.pgu_offgas,
+          d.wash_oil, d.toluene, d.hy_c4_fr_r800, d.cracker_raw_input, d.cracker_raw_feed
+        from
+          t_monthly_production_report d
+        where d.report_year = #{year}
+    </select>
+
     <select id="selectTMonthlyProductionReportList" parameterType="TMonthlyProductionReport" resultMap="TMonthlyProductionReportResult">
         <include refid="selectTMonthlyProductionReportVo"/>
         <where>  
@@ -67,6 +76,9 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
     </select>
         
     <insert id="insertTMonthlyProductionReport" parameterType="TMonthlyProductionReport">
+        <selectKey keyProperty="id" resultType="long" order="BEFORE">
+            SELECT SEQ_T_MONTHLY_REPORT.NEXTVAL as id FROM DUAL
+        </selectKey>
         insert into t_monthly_production_report
         <trim prefix="(" suffix=")" suffixOverrides=",">
             <if test="id != null">id,</if>

ui/src/api/production/monthly.js

@@ -1,5 +1,13 @@
 import request from '@/utils/request'
 
+// 按年份查询Cracker Raw Material
+export function getCrackerRawMaterial(year) {
+  return request({
+    url: '/production/monthly/CrackerRawMaterial/' + year,
+    method: 'get'
+  })
+}
+
 // 查询每月生产报告列表
 export function listReport(query) {
   return request({

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

@@ -3,6 +3,7 @@
     <el-form :inline="true" label-width="68px">
       <el-form-item label="报告年份" prop="reportDate">
         <el-date-picker
+          clearable
           v-model="year"
           @change="handleQueryYear()"
           size="small"
@@ -23,7 +24,11 @@
     </el-form>
     <el-table border :data="tableCrackerRawMaterial" style="width: 100%;">
       <el-table-column label="Cracker Raw Material">
-        <el-table-column prop="title" label=""></el-table-column>
+        <el-table-column width="150" prop="title" label="">
+          <template slot-scope="scope">
+            <div @click="columnOnclick(scope.row)">{{scope.row.title}}</div>
+          </template>
+        </el-table-column>
         <el-table-column prop="unit" label="unit"></el-table-column>
         <el-table-column prop="currently" label="currently"></el-table-column>
         <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
@@ -439,356 +444,503 @@
         <el-table-column prop="total" label="total"></el-table-column>
       </el-table-column>
     </el-table>
+    <!-- 趋势分析对话框 -->
+    <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
+            v-model="analysisDialogElement.startDate"
+            type="month"
+            placeholder="选择开始时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endDate">
+          <el-date-picker
+            v-model="analysisDialogElement.endDate"
+            type="month"
+            placeholder="选择结束时间">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <div id="trendChart" style="width:1340px;height:600px;"></div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-  export default {
-    name: "Monthly",
-      data() {
-        return {
-          // 年份
-          year: null,
-          // 月份的固定表示
-          monthList: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-          tableCrackerRawMaterial: [
-            {title: "Cracker Raw Material"},
-            {title: "NAP"},
-            {title: "C5"},
-            {title: "NA"},
-            {title: "Wison Ethane"},
-            {title: "LPG to Furnace"},
-            {title: "C4 Raff3  fr bd and 2ph"},
-            {title: "C2 fr LDPE"},
-            {title: "C3 fr OXO"},
-            {title: "Mixed C3/C4 fr BD"},
-            {title: "HC9"},
-            {title: "Offgas fr AEU"},
-            {title: "wash oil"},
-            {title: "toluene"},
-            {title: "C4 Recycle(ton)"},
-            {title: "input total"},
-            {title: "Total feed"},
-          ],
-          tableCrackerOutputProduct: [
-            {title: "Cracker Output Product"},
-            {title: "H2"},
-            {title: "C2="},
-            {title: "C3="},
-            {title: "C3/C4 LPG"},
-            {title: "C4'S"},
-            {title: "RPG"},
-            {title: "PO"},
-            {title: "Naphthalene"},
-            {title: "EBO"},
-            {title: "Cracker Residue "},
-            {title: "Methane"},
-            {title: "OFFAGE"},
-            {title: "output total"},
-          ],
-          tableAromaticsRawMaterial: [
-            {title: "Aromatics Raw Material"},
-            {title: "RPG fr EU"},
-            {title: "H2 to PGU"},
-            {title: "Mix BTX Product"},
-            {title: "Mix BTX to AEU"},
-            {title: "input total"},
-          ],
-          tableAromaticsOutputProduct: [
-            {title:"Aromatics Output Product"},
-            {title:"Benzene"},
-            {title:"Toluene"},
-            {title:"Xylene"},
-            {title:"C6-C8 NA"},
-            {title:"C5"},
-            {title:"C9"},
-            {title:"Wash oil"},
-            {title:"offags"},
-            {title:"MIX BTX change"},
-            {title:"BTX Product"},
-            {title:"Toluene Product(- EU)"},
-            {title:"output total"},
-          ],
-          tableEligibleProductRate: [
-            {title: "C2="},
-            {title: "C3="},
-            {title: "C4's"},
-          ],
-          tableProductYield: [
-            {title: "gaseity"},
-            {title: "tatal"},
-            {title: "C3/C2"},
-            {title: "H2"},
-            {title: "ethylene"},
-            {title: "propylene"},
-            {title: "C3/C4 LPG"},
-            {title: "C4'S"},
-            {title: "PO"},
-            {title: "Naphthalene"},
-            {title: "EBO"},
-            {title: "WS"},
-            {title: "Methane"},
-            {title: "OFFAGE"},
-            {title: "RPG"},
-            {title: "Benzene"},
-            {title: "Toluene"},
-            {title: "Xylene"},
-            {title: "C6-C8 NA"},
-            {title: "C5"},
-            {title: "C9"},
-          ],
-          tableCrackerUtilityConsumption: [
-            {title: "FG(include NG+Offage)"},
-            {title: "SS"},
-            {title: "HS"},
-            {title: "MS"},
-            {title: "LS"},
-            {title: "Electricity"},
-            {title: "coiling water"},
-            {title: "Instru. Air"},
-            {title: "Plant Air"},
-            {title: "N2"},
-            {title: "BFW"},
-            {title: "Polished Condensate"},
-            {title: "P. W. Water"},
-            {title: "TC"},
-            {title: "CNWW"},
-            {title: "DWW"},
-            {title: "waste oil"},
-            {title: "Potable Water"},
-            {title: "Production Water"},
-            {title: "NG to furnace or offags to SUB"},
-            {title: "offage product"},
-          ],
-          tableCrackerEnergyConsumption: [
-            {title: "total energy"},
-            {title: "total energy"},
-            {title: "Energy/ethylene"},
-            {title: "Energy/ethylene"},
-          ],
-          tableAromaticsUtilityConsumption: [
-            {title: "SS"},
-            {title: "HS"},
-            {title: "MS"},
-            {title: "LS"},
-            {title: "Electricity"},
-            {title: "coiling water"},
-            {title: "Potable Water"},
-            {title: "Production Water"},
-            {title: "BFW"},
-            {title: "N2"},
-            {title: "PA&IA"},
-            {title: "Turbine Condensate"},
-            {title: "Contaminated WW"},
-            {title: "Production WW"},
-            {title: "DWW"},
-            {title: "Waste Liquid"},
-          ],
-          tableAromaticsEnergyConsumption: [
-            {title: "total energy"},
-            {title: "total energy"},
-            {title: "Energy/ethylene"},
-            {title: "Energy/ethylene"},
-          ],
-          tablePlantLoad: [
-            {title: "Cracker load"},
-            {title: "C2+C3 Capacity"},
-            {title: "Ethylene load"},
-            {title: "Ethylene Capacity"},
-            {title: "AEU load"},
-            {title: "BTX Capacity"},
-          ],
-          tableCostFrEthylene: [
-            {title: "the cost"},
-          ],
-          tableRuningRate: [
-            {title: "run hour"},
-            {title: "run rate"},
-            {title: "calendar hour"},
-          ],
-          tableShoudownHour: [
-            {title: "operation time"},
-            {title: "hour"},
-            {title: "equipment time"},
-            {title: "hour"},
-            {title: "instrument time"},
-            {title: "hour"},
-            {title: "electric time"},
-            {title: "hour"},
-            {title: "otherwise time"},
-            {title: "hour"},
-            {title: "total time"},
-            {title: "total hour"},
-          ],
-          tableOtherside: [
-            {title: "EU loss"},
-            {title: "EU loss rate"},
-            {title: "AEU loss"},
-            {title: "AEU loss rate"},
-            {title: "Total loss"},
-            {title: "Total loss rate"},
-          ],
-          tableChemicalConsume: [
-            {title: "Cracker and PGU"},
-            {title: "PT-3000"},
-            {title: "NAOH"},
-            {title: "PT-4000"},
-            {title: "EC3392A"},
-            {title: "2W906"},
-            {title: "EC1489A"},
-            {title: "EC1486A"},
-            {title: "20Y3483"},
-            {title: "8Q202"},
-            {title: "20Y97A"},
-            {title: "EC3269A"},
-            {title: "20Y25"},
-            {title: "20Y77"},
-            {title: "510WS"},
-            {title: "N130"},
-            {title: "H2SO4"},
-            {title: "NaOH"},
-            {title: "CH3OH"},
-            {title: ""},
-            {title: "PT-3000"},
-            {title: ""},
-            {title: ""},
-          ],
-          tableSCTUUtilityConsumption: [
-            {title: "FG ( NG+Offage)"},
-            {title: "MP"},
-            {title: "LP"},
-            {title: "Electric"},
-            {title: "CW"},
-            {title: "PA&IA"},
-            {title: "SUB"},
-          ],
-          tableSUBUtilityConsumption: [
-            {title: "Electric"},
-            {title: "NG"},
-            {title: "FG fr EU"},
-            {title: "LPG"},
-            {title: "HHP Steam"},
-            {title: "MP Steam"},
-            {title: "LP Steam"},
-            {title: "P. Condensate"},
-            {title: "CW"},
-            {title: "N2"},
-            {title: "IA&PA"},
-            {title: "HPPA"},
-            {title: "Production Water"},
-            {title: "HP Steam fr SuB-net"},
-            {title: "BFW"},
-            {title: "EO/EG purge gas"},
-            {title: "H2 fr Syngas as fule"},
-            {title: "HP product"},
-            {title: "SUB1# FG FIC1302"},
-            {title: "SUB2#FG  FIC2302"},
-            {title: "total NG FC3702"},
-            {title: "COST(output)"},
-            {title: "总费用"},
-            {title: "锅炉净产量"},
-            {title: "产汽"},
-            {title: "输出"},
-          ],
-          tableSCTFUtilityConsumption: [
-            {title: "Electric"},
-            {title: "NG"},
-            {title: "FG fr EU"},
-            {title: "LPG"},
-            {title: "HHP Steam"},
-            {title: "MP Steam"},
-            {title: "LP Steam"},
-            {title: "P. Condensate"},
-            {title: "CW"},
-            {title: "N2"},
-            {title: "IA&PA"},
-            {title: "HPPA"},
-            {title: "Production Water"},
-            {title: "HP Steam fr SuB-net"},
-            {title: "BFW"},
-            {title: "Contaminated WW"},
-            {title: "Production WW"},
-          ],
-          tableKBI: [
-            {kbi: "Plant capacity utilization rate"},
-            {kbi: "Energy Consumption"},
-            {kbi: "Product of Ethylene and Propylene and C4's base FEED"},
-            {kbi: "C2+C3 Production"},
-            {kbi: "C2+C3 target"},
-            {kbi: "C2+C3 target"},
-            {kbi: "C2 target"},
-            {kbi: "C2 target"},
-            {kbi: "LTI"},
-            {kbi: "Yields of Ethylene and propylene base on furnace feeds"},
-            {kbi: "Yields of Ethylene  base on furnace feeds"},
-            {kbi: "AEU Energy Consumption"},
-            {kbi: "BTX Production"},
-            {kbi: "BTX target"},
-            {kbi: "BTX target"},
-          ],
-          tableSummary: [
-            {item: "乙丙产量"},
-            {item: "石脑油"},
-            {item: "C5 raff"},
-            {item: "乙烷"},
-            {item: "加氢碳九"},
-            {item: "乙烯焦油"},
-            {item: "混合C4"},
-            {item: "三苯"},
-            {item: "裂解碳五"},
-            {item: "裂解碳九"},
-            {item: "重整石脑油"},
-            {item: "蒸汽综合"},
-            {item: "冷却水"},
-            {item: "电"},
-            {item: "燃料气"},
-            {item: "精制水"},
-            {item: "透平凝液"},
-            {item: "乙丙收率"},
-            {item: "石脑油"},
-            {item: "C5 raff"},
-            {item: "乙烷"},
-            {item: "加氢碳九"},
-            {item: "乙烯焦油"},
-            {item: "混合C4"},
-            {item: "三苯"},
-            {item: "裂解碳五"},
-            {item: "裂解碳九"},
-            {item: "非芳"},
-            {item: "蒸汽综合"},
-            {item: "冷却水"},
-            {item: "电"},
-            {item: "燃料气"},
-            {item: "精制水"},
-            {item: "透平凝液"},
-          ],
-        }
-      },
-      created() {
-        this.year = new Date();
-        this.getMonthlyReport();
-      },
-    methods: {
-      /** 设置表头 */
-      setTableTitle() {
-        let monthListTemp = [];
-        for (let i = 0; i < this.monthList.length; i++) {
-          // 拼接后的格式：月份-年份，如Feb-2022
-          monthListTemp.push(this.monthList[i] + "-" + this.year.getFullYear());
-        }
-        this.monthList = monthListTemp;
+import {
+  getCrackerRawMaterial,
+} from "@/api/production/monthly";
+
+export default {
+  name: "Monthly",
+  data() {
+    return {
+      // 趋势图y轴数值
+      valueList: [],
+      // 趋势图x轴日期
+      dateList: [],
+      // y轴最大值
+      maxValue: null,
+      // y轴最小值
+      minValue: null,
+      // 趋势图
+      chart: null,
+      // 趋势分析参数
+      analysis: {
+        // 是否显示弹出层
+        open: false,
+        // 弹出层标题
+        title: "",
       },
-      /** 处理年份控件change事件 */
-      handleQueryYear() {
-        this.getMonthlyReport();
+      // 趋势图查询参数
+      analysisQueryParams: {
+        // 指标
+        title: null,
+        // 截止年份
+        toYear: 0,
+        // 截止月份
+        toMonth: 0,
+        // 开始年份
+        fromTear: 0,
+        // 开始月份
+        fromMonth: 0,
       },
-      /** 获取月度报告 */
-      getMonthlyReport() {
-        this.setTableTitle();
-        console.log(this.year.getFullYear());
+      // 对话框控件值
+      analysisDialogElement: {
+        // 开始时间
+        startDate: null,
+        // 结束时间
+        endDate: null,
       },
+      // 年份
+      year: null,
+      // 月份的固定表示
+      monthList: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+      tableCrackerRawMaterial: [],
+      tableCrackerOutputProduct: [
+        {title: "Cracker Output Product"},
+        {title: "H2"},
+        {title: "C2="},
+        {title: "C3="},
+        {title: "C3/C4 LPG"},
+        {title: "C4'S"},
+        {title: "RPG"},
+        {title: "PO"},
+        {title: "Naphthalene"},
+        {title: "EBO"},
+        {title: "Cracker Residue "},
+        {title: "Methane"},
+        {title: "OFFAGE"},
+        {title: "output total"},
+      ],
+      tableAromaticsRawMaterial: [
+        {title: "Aromatics Raw Material"},
+        {title: "RPG fr EU"},
+        {title: "H2 to PGU"},
+        {title: "Mix BTX Product"},
+        {title: "Mix BTX to AEU"},
+        {title: "input total"},
+      ],
+      tableAromaticsOutputProduct: [
+        {title:"Aromatics Output Product"},
+        {title:"Benzene"},
+        {title:"Toluene"},
+        {title:"Xylene"},
+        {title:"C6-C8 NA"},
+        {title:"C5"},
+        {title:"C9"},
+        {title:"Wash oil"},
+        {title:"offags"},
+        {title:"MIX BTX change"},
+        {title:"BTX Product"},
+        {title:"Toluene Product(- EU)"},
+        {title:"output total"},
+      ],
+      tableEligibleProductRate: [
+        {title: "C2="},
+        {title: "C3="},
+        {title: "C4's"},
+      ],
+      tableProductYield: [
+        {title: "gaseity"},
+        {title: "tatal"},
+        {title: "C3/C2"},
+        {title: "H2"},
+        {title: "ethylene"},
+        {title: "propylene"},
+        {title: "C3/C4 LPG"},
+        {title: "C4'S"},
+        {title: "PO"},
+        {title: "Naphthalene"},
+        {title: "EBO"},
+        {title: "WS"},
+        {title: "Methane"},
+        {title: "OFFAGE"},
+        {title: "RPG"},
+        {title: "Benzene"},
+        {title: "Toluene"},
+        {title: "Xylene"},
+        {title: "C6-C8 NA"},
+        {title: "C5"},
+        {title: "C9"},
+      ],
+      tableCrackerUtilityConsumption: [
+        {title: "FG(include NG+Offage)"},
+        {title: "SS"},
+        {title: "HS"},
+        {title: "MS"},
+        {title: "LS"},
+        {title: "Electricity"},
+        {title: "coiling water"},
+        {title: "Instru. Air"},
+        {title: "Plant Air"},
+        {title: "N2"},
+        {title: "BFW"},
+        {title: "Polished Condensate"},
+        {title: "P. W. Water"},
+        {title: "TC"},
+        {title: "CNWW"},
+        {title: "DWW"},
+        {title: "waste oil"},
+        {title: "Potable Water"},
+        {title: "Production Water"},
+        {title: "NG to furnace or offags to SUB"},
+        {title: "offage product"},
+      ],
+      tableCrackerEnergyConsumption: [
+        {title: "total energy"},
+        {title: "total energy"},
+        {title: "Energy/ethylene"},
+        {title: "Energy/ethylene"},
+      ],
+      tableAromaticsUtilityConsumption: [
+        {title: "SS"},
+        {title: "HS"},
+        {title: "MS"},
+        {title: "LS"},
+        {title: "Electricity"},
+        {title: "coiling water"},
+        {title: "Potable Water"},
+        {title: "Production Water"},
+        {title: "BFW"},
+        {title: "N2"},
+        {title: "PA&IA"},
+        {title: "Turbine Condensate"},
+        {title: "Contaminated WW"},
+        {title: "Production WW"},
+        {title: "DWW"},
+        {title: "Waste Liquid"},
+      ],
+      tableAromaticsEnergyConsumption: [
+        {title: "total energy"},
+        {title: "total energy"},
+        {title: "Energy/ethylene"},
+        {title: "Energy/ethylene"},
+      ],
+      tablePlantLoad: [
+        {title: "Cracker load"},
+        {title: "C2+C3 Capacity"},
+        {title: "Ethylene load"},
+        {title: "Ethylene Capacity"},
+        {title: "AEU load"},
+        {title: "BTX Capacity"},
+      ],
+      tableCostFrEthylene: [
+        {title: "the cost"},
+      ],
+      tableRuningRate: [
+        {title: "run hour"},
+        {title: "run rate"},
+        {title: "calendar hour"},
+      ],
+      tableShoudownHour: [
+        {title: "operation time"},
+        {title: "hour"},
+        {title: "equipment time"},
+        {title: "hour"},
+        {title: "instrument time"},
+        {title: "hour"},
+        {title: "electric time"},
+        {title: "hour"},
+        {title: "otherwise time"},
+        {title: "hour"},
+        {title: "total time"},
+        {title: "total hour"},
+      ],
+      tableOtherside: [
+        {title: "EU loss"},
+        {title: "EU loss rate"},
+        {title: "AEU loss"},
+        {title: "AEU loss rate"},
+        {title: "Total loss"},
+        {title: "Total loss rate"},
+      ],
+      tableChemicalConsume: [
+        {title: "Cracker and PGU"},
+        {title: "PT-3000"},
+        {title: "NAOH"},
+        {title: "PT-4000"},
+        {title: "EC3392A"},
+        {title: "2W906"},
+        {title: "EC1489A"},
+        {title: "EC1486A"},
+        {title: "20Y3483"},
+        {title: "8Q202"},
+        {title: "20Y97A"},
+        {title: "EC3269A"},
+        {title: "20Y25"},
+        {title: "20Y77"},
+        {title: "510WS"},
+        {title: "N130"},
+        {title: "H2SO4"},
+        {title: "NaOH"},
+        {title: "CH3OH"},
+        {title: ""},
+        {title: "PT-3000"},
+        {title: ""},
+        {title: ""},
+      ],
+      tableSCTUUtilityConsumption: [
+        {title: "FG ( NG+Offage)"},
+        {title: "MP"},
+        {title: "LP"},
+        {title: "Electric"},
+        {title: "CW"},
+        {title: "PA&IA"},
+        {title: "SUB"},
+      ],
+      tableSUBUtilityConsumption: [
+        {title: "Electric"},
+        {title: "NG"},
+        {title: "FG fr EU"},
+        {title: "LPG"},
+        {title: "HHP Steam"},
+        {title: "MP Steam"},
+        {title: "LP Steam"},
+        {title: "P. Condensate"},
+        {title: "CW"},
+        {title: "N2"},
+        {title: "IA&PA"},
+        {title: "HPPA"},
+        {title: "Production Water"},
+        {title: "HP Steam fr SuB-net"},
+        {title: "BFW"},
+        {title: "EO/EG purge gas"},
+        {title: "H2 fr Syngas as fule"},
+        {title: "HP product"},
+        {title: "SUB1# FG FIC1302"},
+        {title: "SUB2#FG  FIC2302"},
+        {title: "total NG FC3702"},
+        {title: "COST(output)"},
+        {title: "总费用"},
+        {title: "锅炉净产量"},
+        {title: "产汽"},
+        {title: "输出"},
+      ],
+      tableSCTFUtilityConsumption: [
+        {title: "Electric"},
+        {title: "NG"},
+        {title: "FG fr EU"},
+        {title: "LPG"},
+        {title: "HHP Steam"},
+        {title: "MP Steam"},
+        {title: "LP Steam"},
+        {title: "P. Condensate"},
+        {title: "CW"},
+        {title: "N2"},
+        {title: "IA&PA"},
+        {title: "HPPA"},
+        {title: "Production Water"},
+        {title: "HP Steam fr SuB-net"},
+        {title: "BFW"},
+        {title: "Contaminated WW"},
+        {title: "Production WW"},
+      ],
+      tableKBI: [
+        {kbi: "Plant capacity utilization rate"},
+        {kbi: "Energy Consumption"},
+        {kbi: "Product of Ethylene and Propylene and C4's base FEED"},
+        {kbi: "C2+C3 Production"},
+        {kbi: "C2+C3 target"},
+        {kbi: "C2+C3 target"},
+        {kbi: "C2 target"},
+        {kbi: "C2 target"},
+        {kbi: "LTI"},
+        {kbi: "Yields of Ethylene and propylene base on furnace feeds"},
+        {kbi: "Yields of Ethylene  base on furnace feeds"},
+        {kbi: "AEU Energy Consumption"},
+        {kbi: "BTX Production"},
+        {kbi: "BTX target"},
+        {kbi: "BTX target"},
+      ],
+      tableSummary: [
+        {item: "乙丙产量"},
+        {item: "石脑油"},
+        {item: "C5 raff"},
+        {item: "乙烷"},
+        {item: "加氢碳九"},
+        {item: "乙烯焦油"},
+        {item: "混合C4"},
+        {item: "三苯"},
+        {item: "裂解碳五"},
+        {item: "裂解碳九"},
+        {item: "重整石脑油"},
+        {item: "蒸汽综合"},
+        {item: "冷却水"},
+        {item: "电"},
+        {item: "燃料气"},
+        {item: "精制水"},
+        {item: "透平凝液"},
+        {item: "乙丙收率"},
+        {item: "石脑油"},
+        {item: "C5 raff"},
+        {item: "乙烷"},
+        {item: "加氢碳九"},
+        {item: "乙烯焦油"},
+        {item: "混合C4"},
+        {item: "三苯"},
+        {item: "裂解碳五"},
+        {item: "裂解碳九"},
+        {item: "非芳"},
+        {item: "蒸汽综合"},
+        {item: "冷却水"},
+        {item: "电"},
+        {item: "燃料气"},
+        {item: "精制水"},
+        {item: "透平凝液"},
+      ],
     }
-   }
+  },
+  created() {
+    // 加载时设置year为今年
+    this.year = new Date();
+    // 加载月报数据
+    this.getMonthlyReport();
+  },
+  methods: {
+    /** 销毁趋势图 */
+    disposeChart() {
+      this.echarts.dispose(this.chart);
+    },
+    /** 处理最左列指标点击事件 */
+    columnOnclick(row) {
+      let title = row.title;
+      let toYear = this.year.getFullYear();
+      let toMonth = this.year.getMonth() + 1;
+      let fromTear = toYear - 1;
+      let fromMonth = toMonth;
+      this.analysisQueryParams.toYear = toYear;
+      this.analysisQueryParams.toMonth = toMonth;
+      this.analysisQueryParams.fromTear = fromTear;
+      this.analysisQueryParams.fromMonth = fromMonth;
+      let startDate = new Date();
+      let endDate = new Date();
+      startDate.setFullYear(startDate.getFullYear() - 1);
+      this.analysisDialogElement.startDate = startDate;
+      this.analysisDialogElement.endDate = endDate;
+      this.analysis.title = row.title + "趋势分析";
+      this.analysis.open = true;
+      // this.draw();
+    },
+    /** 绘制趋势图 */
+    draw() {
+      查询方法(this.analysisQueryParams).then(response => {
+        let data = response.data;
+        this.maxValue = 0;
+        this.minValue = data[0].valueData;
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].valueData != null) {
+            this.valueList[i] = data[i].valueData;
+            this.dateList[i] = data[i].dateData;
+            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"
+          },
+          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);
+      });
+    },
+    /** 设置表头 */
+    setTableTitle() {
+      // 拼接年份后的数组
+      let monthListTemp = [];
+      // 重置月份数组
+      this.monthList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+      for (let i = 0; i < this.monthList.length; i++) {
+        // 拼接后：月份-年份，如Feb-2022
+        monthListTemp.push(this.monthList[i] + "-" + this.year.getFullYear());
+      }
+      this.monthList = monthListTemp;
+    },
+    /** 处理年份控件change事件 */
+    handleQueryYear() {
+      // 点击clear按钮，设置year为今年
+      if (this.year == null) {
+        this.year = new Date();
+      }
+      this.getMonthlyReport();
+    },
+    /** 获取月报 */
+    getMonthlyReport() {
+      // 设置表头
+      this.setTableTitle();
+      // 获取选中的年份
+      let year = this.year.getFullYear();
+      // 根据年份获取月报数据
+      getCrackerRawMaterial(year).then(response => {
+        this.tableCrackerRawMaterial = response.data;
+      });
+
+
+    },
+  }
+}
 </script>
 
 <style scoped>