纳税服务系统七（投诉管理模块）【显示投诉信息、处理回复、我要投诉、Quartz自动受理、统计图FusionCharts】...

叁歲伎倆 2021-09-30 19:12 286阅读 0赞

# 投诉受理管理模块 #

接下来，就是来开发我们的投诉受理管理模块了…..我们来看看原型图与需求吧：

> 查询用户提交的投诉信息，可以根据投诉部门（部门A/B）、投诉时间段、状态进行查询。在列表信息中展示投诉标题、被投诉部门、被投诉人、投诉时间、状态（待受理、已受理、已失效）、操作；其中操作栏内内容为“处理”，**点击“处理”则在打开的查询页面中查看具体的投诉信息并且可以多次回复投诉信息**；一旦回复则说明已受理该投诉。
> 
> 投诉详细信息：在本页面中首先要明显地展示出当前投诉是否已经受理；然后再显示投诉人信息、被投诉信息、受理信息（历史受理信息）三部分内容，并且在页面中可以无限次的对本次受理进行回复。投诉人信息包括：是否匿名投诉、投诉人单位、投诉人姓名、投诉人手机，**如果是匿名投诉，则不显示投诉人单位、姓名并对手机号中间4位号码使用\*号代替**。被投诉信息包括：投诉时间、被投诉部门、被投诉人、投诉标题、投诉内容。**受理信息：如果有多次回复则将多次的回复信息显示，显示内容包括回复时间、回复部门、回复人、受理回复内容；可以再次回复。**

![640?wx\_fmt=png][640_wx_fmt_png] 这里写图片描述![640?wx\_fmt=png][640_wx_fmt_png 1] 这里写图片描述

根据上面两张原型图以及文字说明，我们可以发现：**一个投诉信息可对应多个回复。**

--------------------

> 在“工作主页”中点击“我要投诉”进入页面，**添加内容包括：投诉标题、被投诉部门（部门A/B）、被投诉人、投诉详情、是否匿名投诉**。

![640?wx\_fmt=png][640_wx_fmt_png 2] 这里写图片描述

关键在于匿名投诉的那一部分，我们该怎么写….

--------------------

> 统计：根据年度将相应年度的每个月的投诉数进行统计，并以图表的形式展示在页面中；在页面中可以选择查看当前年度及其前4年的投诉数。在页面中可以选择不同的年度，然后页面**展示该年度的曲线统计图。**

![640?wx\_fmt=png][640_wx_fmt_png 3] 这里写图片描述

这个统计图，大概也需要用到组件来生成出来的吧？？？

--------------------

> 自动投诉受理：**在每个月月底最后一天对本月之前的投诉进行自动处理；将投诉信息的状态改为 已失效。在后台管理中不能对该类型投诉进行回复。**

自动投诉受理？？**在每个月的最后一天判断投诉信息，程序对其自动受理。。**

--------------------

# 投诉受理开发 #

我们首先来画一个流程图看看它的大概思路是怎么样的：

![640?wx\_fmt=png][640_wx_fmt_png 4] 这里写图片描述

## Hibernate逆向工程 ##

我们经过上面的分析，知道了：**一个投诉信息可对应多个回复。是一对多的关系。**我们下面使用powerdesginer来画出它的概念数据模型图

![640?wx\_fmt=png][640_wx_fmt_png 5] 这里写图片描述

生成物理模型图：

![640?wx\_fmt=png][640_wx_fmt_png 6] 这里写图片描述

生成数据库表：

/*==============================================================*//* DBMS name:      MySQL 5.0                                    *//* Created on:     2017/6/12 19:06:20                           *//*==============================================================*/drop table if exists complain;drop table if exists complain_reply;/*==============================================================*//* Table: complain                                              *//*==============================================================*/create table complain(   comp_id              varchar(32) not null,   comp_company         varchar(100),   comp_name            varchar(20),   comp_mobile          varchar(20),   is_NM                bool,   comp_time            datetime,   comp_title           varchar(200) not null,   to_comp_name         varchar(20),   to_comp_dept         varchar(100),   comp_content         text,   state                varchar(1),   primary key (comp_id));/*==============================================================*//* Table: complain_reply                                        *//*==============================================================*/create table complain_reply(   reply_id             varchar(32) not null,   comp_id              varchar(32) not null,   replyer              varchar(20),   reply_dept           varchar(100),   reply_time           datetime,   reply_content        varchar(300),   primary key (reply_id));alter table complain_reply add constraint FK_comp_reply foreign key (comp_id)      references complain (comp_id) on delete restrict on update restrict;
    /* DBMS name:      MySQL 5.0                                    */
    /* Created on:     2017/6/12 19:06:20                           */
    /*==============================================================*/
    
    
    drop table if exists complain;
    
    drop table if exists complain_reply;
    
    /*==============================================================*/
    /* Table: complain                                              */
    /*==============================================================*/
    create table complain
    (
       comp_id              varchar(32) not null,
       comp_company         varchar(100),
       comp_name            varchar(20),
       comp_mobile          varchar(20),
       is_NM                bool,
       comp_time            datetime,
       comp_title           varchar(200) not null,
       to_comp_name         varchar(20),
       to_comp_dept         varchar(100),
       comp_content         text,
       state                varchar(1),
       primary key (comp_id)
    );
    
    /*==============================================================*/
    /* Table: complain_reply                                        */
    /*==============================================================*/
    create table complain_reply
    (
       reply_id             varchar(32) not null,
       comp_id              varchar(32) not null,
       replyer              varchar(20),
       reply_dept           varchar(100),
       reply_time           datetime,
       reply_content        varchar(300),
       primary key (reply_id)
    );
    
    alter table complain_reply add constraint FK_comp_reply foreign key (comp_id)
          references complain (comp_id) on delete restrict on update restrict;

生成实体与配置文件：

![640?wx\_fmt=png][640_wx_fmt_png 7] 这里写图片描述

Intellij idea下生成出来的映射文件是没有对应的关联关系的。也就是说**：一对多或多对多的关系，它是不会帮你自动生成的【好像是这样子的】。。。因此，需要我们自己添加Set【如果需要】**

--------------------

## 编写dao、service、action ##

编写dao、service、action都非常简单。记得要把模块的配置文件加载到总配置文件中！

ComplainAction代码如下：

public class ComplainAction extends BaseAction {    /*************注入Service************************/    @Autowired    private ComplainService complainServiceImpl;    /************数据自动封装，给出setter和getter*************************/    private Complain complain;    public Complain getComplain() {        return complain;    }    public void setComplain(Complain complain) {        this.complain = complain;    }    /************Action中7大方法*************************/    //抛出Action异常    public String listUI() throws ServiceException, UnsupportedEncodingException {        //把状态的集合带过去        QueryHelper queryHelper = new QueryHelper(Complain.class, "c");        //当前页数没有值，那么赋值为1        if (currentPageCount == 0) {            currentPageCount = 1;        }        //把状态带过去给JSP页面        ActionContext.getContext().getContextMap().put("complainStateMap", Complain.COMPLAIN_STATE_MAP);        pageResult = complainServiceImpl.getPageResult(queryHelper,currentPageCount);        return "listUI";    }}class ComplainAction extends BaseAction {
        
    
        /*************注入Service************************/
        @Autowired
        private ComplainService complainServiceImpl;
        /************数据自动封装，给出setter和getter*************************/
        private Complain complain;
        public Complain getComplain() {
        
            return complain;
        }
        public void setComplain(Complain complain) {
        
            this.complain = complain;
        }
    
        /************Action中7大方法*************************/
        //抛出Action异常
        public String listUI() throws ServiceException, UnsupportedEncodingException {
        
    
            //把状态的集合带过去
            QueryHelper queryHelper = new QueryHelper(Complain.class, "c");
    
            //当前页数没有值，那么赋值为1
            if (currentPageCount == 0) {
        
                currentPageCount = 1;
            }
            //把状态带过去给JSP页面
            ActionContext.getContext().getContextMap().put("complainStateMap", Complain.COMPLAIN_STATE_MAP);
            pageResult = complainServiceImpl.getPageResult(queryHelper,currentPageCount);
            return "listUI";
        }
    
    }

导入对应的JSP页面…..得到的效果如下：

![640?wx\_fmt=png][640_wx_fmt_png 8] 这里写图片描述

--------------------

## 条件查询 ##

我们来看一下条件查询有几个：可以**根据投诉的标题、投诉的时间、投诉的状态进行查询。**

![640?wx\_fmt=png][640_wx_fmt_png 9] 这里写图片描述

对于投诉标题和投诉的状态我们都可以很容易地拿到条件：

//根据complain标题是否为null来判断是否是条件查询。如果complain为空，那么是查询所有。        if (complain != null) {            if (org.apache.commons.lang.StringUtils.isNotBlank(complain.getCompTitle())) {                selectCondition =  URLDecoder.decode(complain.getCompTitle(),"UTF-8");                complain.setCompTitle(selectCondition);                queryHelper.addCondition(" c.compTitle like ? ", "%" + complain.getCompTitle() + "%");            }            //投诉状态并不需要编码，因为它并不是中文。            if (org.apache.commons.lang.StringUtils.isNotBlank(complain.getState())) {                queryHelper.addCondition(" c.state like ? ", "%" + complain.getState() + "%");            }        }
            if (complain != null) {
        
                if (org.apache.commons.lang.StringUtils.isNotBlank(complain.getCompTitle())) {
        
                    selectCondition =  URLDecoder.decode(complain.getCompTitle(),"UTF-8");
                    complain.setCompTitle(selectCondition);
                    queryHelper.addCondition(" c.compTitle like ? ", "%" + complain.getCompTitle() + "%");
                }
                //投诉状态并不需要编码，因为它并不是中文。
                if (org.apache.commons.lang.StringUtils.isNotBlank(complain.getState())) {
        
                    queryHelper.addCondition(" c.state like ? ", "%" + complain.getState() + "%");
                }
            }

那么根据投诉时间来进行查询，我们要怎么做呢？？？我们约定时间是这样的格式：yyyy-MM-dd HH:mm。这样的格式Struts2默认是不支持解析的，那么我们怎么获取呢？？？

有的同学可能会想到类型转换器，我们在Struts2的时候的确是学过类型转换器。。。但是呢，这种方法并不是最好的。我们可以**使用DateUtils工具类来得到日期数据！**

//先判断时间，通过时间进行筛选后，再进行like模糊查询。那么性能会好一些    if (StringUtils.isNotBlank(startTime)) {        startTime =  URLDecoder.decode(startTime,"UTF-8");        queryHelper.addCondition(" c.compTime >= ? ", DateUtils.parseDate(startTime, new String[]{"yyyy-MM-dd HH:mm"}));    }    if (StringUtils.isNotBlank(endTime)) {        endTime =  URLDecoder.decode(endTime,"UTF-8");        queryHelper.addCondition(" c.compTime <= ? ", DateUtils.parseDate(endTime, new String[]{"yyyy-MM-dd HH:mm"}));    }
        if (StringUtils.isNotBlank(startTime)) {
        
            startTime =  URLDecoder.decode(startTime,"UTF-8");
            queryHelper.addCondition(" c.compTime >= ? ", DateUtils.parseDate(startTime, new String[]{
        "yyyy-MM-dd HH:mm"}));
        }
    
        if (StringUtils.isNotBlank(endTime)) {
        
            endTime =  URLDecoder.decode(endTime,"UTF-8");
            queryHelper.addCondition(" c.compTime <= ? ", DateUtils.parseDate(endTime, new String[]{
        "yyyy-MM-dd HH:mm"}));
        }

我们在JSP页面上也**使用datepicker组件来让用户选择日期**：

投诉时间：<s:textfield id="startTime" name="startTime" cssClass="s_text"  cssStyle="width:160px;" readonly="true" onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd HH:mm'});"/>          -          <s:textfield id="endTime" name="endTime" cssClass="s_text"  cssStyle="width:160px;" readonly="true" onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd HH:mm'});"/>
              - 
             <s:textfield id="endTime" name="endTime" cssClass="s_text"  cssStyle="width:160px;" readonly="true" onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd HH:mm'});"/>

--------------------

## 受理回复 ##

提供处理受理的UI界面。根据id查找投诉的全部信息。

//提供受理的UI    public String dealUI() {        //把状态传递过去        ActionContext.getContext().getContextMap().put("complainStateMap", Complain.COMPLAIN_STATE_MAP);        //得到想要受理的记录        if (complain != null) {            complain = complainServiceImpl.findObjectById(complain.getCompId());        }        return "dealUI";    }
        public String dealUI() {
        
    
            //把状态传递过去
            ActionContext.getContext().getContextMap().put("complainStateMap", Complain.COMPLAIN_STATE_MAP);
    
            //得到想要受理的记录
            if (complain != null) {
        
                complain = complainServiceImpl.findObjectById(complain.getCompId());
            }
            return "dealUI";
        }

在处理受理的JSP页面上要把投诉的id给发送给Action处理。不然在保存信息的时候，就会把投诉信息丢失了！。**在Action中通过id重新查找回投诉的信息！**

//受理    public String deal() {        //修改投诉信息的处理状态        if (complain != null) {            //查找到信息            complain = complainServiceImpl.findObjectById(complain.getCompId());            //如果状态是已处理了，那么就不用再修改了            if (!complain.getState().equals(Complain.COMPLAIN_STATE_DONE)) {                complain.setState(Complain.COMPLAIN_STATE_DONE);            }        }        //保存回复的信息        if (reply != null) {            //更新回复的日期            reply.setReplyTime(new Timestamp(new Date().getTime()));            //把回复信息添加到投诉信息中【关联关系】            reply.setComplain(complain);            complain.getComplainReplies().add(reply);        }        //级联更新        complainServiceImpl.update(complain);        return "list";    }
        public String deal() {
        
    
            //修改投诉信息的处理状态
            if (complain != null) {
        
                //查找到信息
                complain = complainServiceImpl.findObjectById(complain.getCompId());
                //如果状态是已处理了，那么就不用再修改了
                if (!complain.getState().equals(Complain.COMPLAIN_STATE_DONE)) {
        
                    complain.setState(Complain.COMPLAIN_STATE_DONE);
                }
            }
            //保存回复的信息
            if (reply != null) {
        
                //更新回复的日期
                reply.setReplyTime(new Timestamp(new Date().getTime()));
    
                //把回复信息添加到投诉信息中【关联关系】
                reply.setComplain(complain);
                complain.getComplainReplies().add(reply);
            }
    
            //级联更新
            complainServiceImpl.update(complain);
    
            return "list";
        }

### 显示回复信息 ###

我们在处理投诉的时候，应该把回复的历史信息给处理的人看…..

**把回复的信息遍历出来。**

<s:iterator value="complain.complainReplies" status="st">        <tr>            <%--得到所有回复的信息--%>            <td colspan="2">                    <fieldset style="border: solid 1px #c0c0c0;margin-top:5px;"><legend style="color:green;font-weight:bold;">                        回复<s:property                            value="#st.count"/>  </legend>                        <div style="width:100%; text-align:center;color:#ccc;maring-top:5px;">                        回复部门：<s:property value="replyDept"/>                        回复人：<s:property value="replyer"/>                        回复时间：<s:date name="replyTime" format="yyyy-MM-dd HH:mm"/>                        </div>                        <div style="width:100%;maring-top:10px;font-size:13px;padding-left:5px;"><s:property value="replyContent"/></div>                    </fieldset>            </td>        </tr>        </s:iterator>
            <tr>
                <%--得到所有回复的信息--%>
    
                <td colspan="2">
    
                        <fieldset style="border: solid 1px #c0c0c0;margin-top:5px;"><legend style="color:green;font-weight:bold;">
                            回复<s:property                            value="#st.count"/>  </legend>
                            <div style="width:100%; text-align:center;color:#ccc;maring-top:5px;">
                            回复部门：<s:property value="replyDept"/>
                            回复人：<s:property value="replyer"/>
                            回复时间：<s:date name="replyTime" format="yyyy-MM-dd HH:mm"/>
                            </div>
                            <div style="width:100%;maring-top:10px;font-size:13px;padding-left:5px;"><s:property value="replyContent"/></div>
                        </fieldset>
    
                </td>
            </tr>
            </s:iterator>

现在有一个问题，就是我们使用的是set集合，它所有的回复信息并不是按照顺序来排列的。我们可以**在hbm配置文件中指定我们set集合的顺序**：

![640?wx\_fmt=png][640_wx_fmt_png 10] 这里写图片描述

那么在显示的时候，我们的回复顺序就不会被搞乱了。

### 匿名投诉 ###

在需求中，我们已经看到了，如果投诉的人是匿名投诉的，那么我们**不能显示该投诉人的名字、部门。他的号码应该设置成137****2342类型的**。

其实我们只要在显示对应值的前面判断该投诉人是否是匿名投诉就行了。

--------------------

## 我要投诉二级联动 ##

用户可以在首页上通过“我要投诉”超链接对工作人员进行投诉..当然了，**用户点击“我要投诉”超链接的时候，应该在新的页面上给出对应的页面，所以指定target为“\_blank”**..

我们在**指定部门的时候，下拉菜单应该在后台给出对应的的员工**。这就需要我们用到ajax进行二级菜单的二级联动了。

我们在返回JSON格式有两种方式：第一种就是没有使用Struts2框架的时候，  
使用三个开发包commons-beanutils-1.8.0，ezmorph-1.0.6，json-lib-2.3-jdk15。使用JSONObject对象来构建JSON字符串，使用流对象返回给浏览器。

我们如果使用了Struts2框架的话，直接导入：struts2-json-plugin-2.3.20这么一个开发包，并且在配置文件中指定继承json-defalut包，返回的类型是JSON的话。那么Struts2框架就会自动帮我们在该Action中所拥有getter方法的属性就生成JSON格式返回给浏览器。。。当然了，我们可能不想Struts2把全部带有getter的属性都生成JSON返回给浏览器，**我们只要在返回JSON类型上指定参数root，就可以指定生成哪一个属性自动生成JSON字符串返回给浏览器了。**

![640?wx\_fmt=png][640_wx_fmt_png 11] 这里写图片描述

当然了，无论是没有使用Struts2框架，还是有使用Struts2框架，我们都是有过Demo的。详情请参考博文：http://blog.csdn.net/hon\_3y/article/details/72468761和http://blog.csdn.net/hon\_3y/article/details/72480126

另外，我们手动访问Acttion给出对应的参数，就可以看到服务器返回的JSON是什么了。最后我们使用HiJson这样的工具，就可以把返回的JSON进行格式化。

![640?wx\_fmt=png][640_wx_fmt_png 12] 这里写图片描述

那么，我们的代码是这样的：

使用ajax返回服务器。

使用一个Map集合装载这些数据，Struts2自动把Map集合的数据转成是JSON格式的，返回给浏览器。

private Map<String, Object> return_map;    public Map<String, Object> getReturn_map() {        return return_map;    }      public String getUserJson() {            //得到带过来的dept            String dept = ServletActionContext.getRequest().getParameter("dept");            if (dept != null) {                //根据部门查询所有的员工                QueryHelper queryHelper = new QueryHelper(User.class, "u");                queryHelper.addCondition(" u.dept like ? ", "%" +dept);                //2、根据部门查询用户列表                return_map = new HashMap();                return_map.put("msg", "success");                return_map.put("userList", userServiceImpl.findObjects(queryHelper));            }            return "success";        }
    
        public Map<String, Object> getReturn_map() {
        
            return return_map;
        }
    
          public String getUserJson() {
        
                //得到带过来的dept
                String dept = ServletActionContext.getRequest().getParameter("dept");
                if (dept != null) {
        
                    //根据部门查询所有的员工
                    QueryHelper queryHelper = new QueryHelper(User.class, "u");
                    queryHelper.addCondition(" u.dept like ? ", "%" +dept);
    
                    //2、根据部门查询用户列表
                    return_map = new HashMap();
                    return_map.put("msg", "success");
                    return_map.put("userList", userServiceImpl.findObjects(queryHelper));
                }
    
                return "success";
            }

## 我要投诉保存信息 ##

我们在投诉的内容上添加上富文本框，让用户可以在文本域上传上图片….

加上一个富文本框是非常简单的，只要导入对应的js文件，在textarea上写上ueditor的id就可以完成效果了。。。

再次观察我们的投诉页面**，表单里面的值只有是被投诉人的信息，投诉人的信息是没有的**。于是我们在表单中把投诉人的信息通过隐藏域将其添加进去….

<s:hidden name="comp.compCompany" value="%{#session.SYS_USER.dept}"></s:hidden>    <s:hidden name="comp.compName" value="%{#session.SYS_USER.name}"></s:hidden>    <s:hidden name="comp.compMobile" value="%{#session.SYS_USER.mobile}"></s:hidden></s:hidden>
        <s:hidden name="comp.compName" value="%{#session.SYS_USER.name}"></s:hidden>
        <s:hidden name="comp.compMobile" value="%{#session.SYS_USER.mobile}"></s:hidden>

那我们保存“我要投诉”信息的流程应该是怎么样的呢？？？为了达到更好的用户体验，我们应该先把提示用户数据已经保存起来了，然后刷新父窗口，接着把“我要投诉”本页面给关闭了。这样用户看起来，就觉得他的操作已经是成功了！

下面是整个“我要投诉”操作的时序图：

![640?wx\_fmt=png][640_wx_fmt_png 13] 这里写图片描述

代码：

public void saveComplain() {        try {            if (comp != null) {                //把投诉的缺少的信息补全                comp.setState(Complain.COMPLAIN_STATE_UNDONE);                comp.setCompTime(new Timestamp(new Date().getTime()));                //调用service保存                complainServiceImpl.save(comp);                //告诉浏览器保存信息成功了。                ServletActionContext.getResponse().getWriter().write("success");            }        } catch (IOException e) {            e.printStackTrace();        }    }
    
            try {
        
                if (comp != null) {
        
                    //把投诉的缺少的信息补全
                    comp.setState(Complain.COMPLAIN_STATE_UNDONE);
                    comp.setCompTime(new Timestamp(new Date().getTime()));
    
                    //调用service保存
                    complainServiceImpl.save(comp);
    
                    //告诉浏览器保存信息成功了。
                    ServletActionContext.getResponse().getWriter().write("success");
                }
            } catch (IOException e) {
        
                e.printStackTrace();
            }
    
    
        }

提示用户已经投诉成功，把父窗口刷新，本页面关闭。

--------------------

## 投诉受理的三圈问题 ##

在信息管理模块的时候，我们就提出了三圈的问题了。何为三圈问题呢？？？**就是当我们使用条件查询出数据的时候，再对查询出的数据进行操作【修改、保存】，当保存完之后回到列表显示页面上的时候，查询条件就会丢失掉了**。也就是说，我们原来查询出的数据不见了。

首先，我们在Action中使用两个变量把有可能成为查询条件的变量记住：

/************三圈问题数据回显*************************/    private String compTitle;    private String state;    public String getCompTitle() {        return compTitle;    }    public void setCompTitle(String compTitle) {        this.compTitle = compTitle;    }    public String getState() {        return state;    }    public void setState(String state) {        this.state = state;    }
        private String compTitle;
        private String state;
        public String getCompTitle() {
        
            return compTitle;
        }
        public void setCompTitle(String compTitle) {
        
            this.compTitle = compTitle;
        }
        public String getState() {
        
            return state;
        }
        public void setState(String state) {
        
            this.state = state;
        }

接着，在跳转到处理投诉页面的JSP上的时候，把查询条件的数据查询出来，把它赋值给变量。然后使用request域对象把数据发给JSP页面

//把查询条件带过去给JSP页面            ActionContext.getContext().getContextMap().put("compTitle", complain.getCompTitle());            ActionContext.getContext().getContextMap().put("state", complain.getState());            ActionContext.getContext().getContextMap().put("startTime", startTime);            ActionContext.getContext().getContextMap().put("endTime", endTime);
                ActionContext.getContext().getContextMap().put("compTitle", complain.getCompTitle());
                ActionContext.getContext().getContextMap().put("state", complain.getState());
                ActionContext.getContext().getContextMap().put("startTime", startTime);
                ActionContext.getContext().getContextMap().put("endTime", endTime);

然后在处理投诉页面的JSP上，通过隐藏域把数据给回Action。。Action在重定向到listUI页面的时候，就通过配置文件，把参数带过去：

<result name="list" type="redirectAction">                <param name="actionName">complain_listUI</param>                <param name="complain.state">${state}</param>                <param name="complain.compTitle">${compTitle}</param>                <param name="endTime">${startTime}</param>                <param name="startTime">${startTime}</param>                <param name="encode">true</param>            </result>
                <result name="list" type="redirectAction">
                    <param name="actionName">complain_listUI</param>
                    <param name="complain.state">${state}</param>
                    <param name="complain.compTitle">${compTitle}</param>
                    <param name="endTime">${startTime}</param>
                    <param name="startTime">${startTime}</param>
                    <param name="encode">true</param>
                </result>

这样一来，我们的查询条件就没有丢失了。当我们操作完数据的时候，我们的查询出来的数据还是原来那部分。

--------------------

# Quartz自动受理 #

回到我们的需求：

> 自动投诉受理：在每个月月底最后一天对本月之前的投诉进行自动处理；将投诉信息的状态改为 已失效。在后台管理中不能对该类型投诉进行回复。

这个需求需求我们要怎么弄呢？？？？要在每个月底最后一天对本月之前的投诉进行自动处理。。。。

记得我们以前在学习Java基础的时候学过了一个Timer这么一个类，可以用规定的频率来执行我们的代码。。。使用起来是非常简单的：

![640?wx\_fmt=png][640_wx_fmt_png 14] 这里写图片描述![640?wx\_fmt=png][640_wx_fmt_png 15] 这里写图片描述

但是呢，**要精确到每个月的月底，这就需要我们人为去判断时间了**，这就非常不方便了。

因此，我们引入了另一个非常好用的框架：Quartz

--------------------

# Quartz #

这是一个优秀的开源任务调度框架“quartz”，可以简单理解成他是Timer的升级版….Spring集成了该框架…

## 快速入门 ##

我们要使用它，就要导入其开发包：**quartz-1.8.6.jar**，和Spring对其支持的开发包：**org.springframework.context.support-3.0.2.RELEASE**

使用它的步骤是十分简单的，可分成三个步骤：

**1、制定任务信息 bean**

**2、制定任务执行时机（执行触发器） bean**

**3、设置任务调度工厂 bean**

### jobDetail任务详细信息 ###

1、jobDetail 任务详细信息；**包括调用哪个类；类中的哪个方法；执行时是否可并行执行任务**。

<bean id="jobDetail1" class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean">                            <property name="targetObject" ref="quartzTask"></property>                            <property name="targetMethod" value="doSimpleTriggerTask"></property>                            <property name="concurrent" value="false"></property>   </bean>   <bean id="jobDetail2" class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean">                            <property name="targetObject" ref="quartzTask"></property>                            <property name="targetMethod" value="doCronTriggerTask"></property>                            <property name="concurrent" value="false"></property>   </bean>
       <bean id="jobDetail1" class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean">
                  
                  <property name="targetObject" ref="quartzTask"></property>
                  
                  <property name="targetMethod" value="doSimpleTriggerTask"></property>
                  
                  <property name="concurrent" value="false"></property>
       </bean>
       <bean id="jobDetail2" class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean">
                  
                  <property name="targetObject" ref="quartzTask"></property>
                  
                  <property name="targetMethod" value="doCronTriggerTask"></property>
                  
                  <property name="concurrent" value="false"></property>
       </bean>

![640?wx\_fmt=png][640_wx_fmt_png 16] 这里写图片描述

--------------------

### trigger任务调度触发器 ###

2、trigger 任务调度触发器；**主要用于定义jobDetail什么时候执行**。触发器最常用的有两种：简单触发器SimpleTrigger 和 任务触发器CronTrigger 。SimpleTrigger和jdk的timer类似，只能指定任务执行以什么样的频率执行，但无法制定精确的执行时间。**CronTrigger则既可以执行简单触发器所制定的以频率来执行的时间，也可以制定复杂的时间计划来执行**。

<bean id="simplerTrigger" class="org.springframework.scheduling.quartz.SimpleTriggerBean">                      <property name="jobDetail" ref="jobDetail1"></property>                      <property name="startDelay" value="2000"></property>                      <property name="repeatInterval" value="2000"></property>   </bean>   <bean id="cronTrigger" class="org.springframework.scheduling.quartz.CronTriggerBean">                   <property name="jobDetail" ref="jobDetail2"></property>                      <property name="cronExpression" value="* * * 18c * ?"></property>   </bean>
       <bean id="simplerTrigger" class="org.springframework.scheduling.quartz.SimpleTriggerBean">
               
               <property name="jobDetail" ref="jobDetail1"></property>
               
               <property name="startDelay" value="2000"></property>
               
               <property name="repeatInterval" value="2000"></property>
       </bean>
    
       <bean id="cronTrigger" class="org.springframework.scheduling.quartz.CronTriggerBean">
            
               <property name="jobDetail" ref="jobDetail2"></property>
               
               <property name="cronExpression" value="* * * 18c * ?"></property>
       </bean>

![640?wx\_fmt=png][640_wx_fmt_png 17] 这里写图片描述

这里我们着重要了解表达式怎么写：秒 分 时 日 月 周 年【日和周不能同时出现】

![640?wx\_fmt=png][640_wx_fmt_png 18] 这里写图片描述

--------------------

### schedulerFactory 任务调度工厂 ###

schedulerFactory 任务调度工厂；**用于调度各个任务触发器。**

任务调度工厂可以调度多个任务同时进行

<bean class="org.springframework.scheduling.quartz.SchedulerFactoryBean">           <property name="triggers">               <list>                                      <ref bean="cronTrigger"/>               </list>           </property>   </bean>
       <bean class="org.springframework.scheduling.quartz.SchedulerFactoryBean">
               <property name="triggers">
                   <list>
                       
                       <ref bean="cronTrigger"/>
                   </list>
               </property>
       </bean>

![640?wx\_fmt=png][640_wx_fmt_png 19] 这里写图片描述

--------------------

## 自动受理 ##

回到我们的需求，我们已经大概了解了Quartz这么一个开源框架使用了。**我们就可以在每个月的最后一天中去执行我们对应的代码就行了。**

在Spring配置文件中加入Quartz框架….

**我们在Service中执行对应的代码**：

<bean id="jobDetail1" class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean">                <property name="targetObject" ref="complainServiceImpl"></property>                <property name="targetMethod" value="doTask"></property>                <property name="concurrent" value="false"></property>    </bean>        <bean id="cronTrigger" class="org.springframework.scheduling.quartz.CronTriggerBean">                <property name="jobDetail" ref="jobDetail1"></property>                <property name="cronExpression" value="10 10 2 L * ?"></property>    </bean>        <bean class="org.springframework.scheduling.quartz.SchedulerFactoryBean">        <property name="triggers">            <list>                <ref bean="cronTrigger"/>            </list>        </property>    </bean></beans>
        <bean id="jobDetail1" class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean">
            
            <property name="targetObject" ref="complainServiceImpl"></property>
            
            <property name="targetMethod" value="doTask"></property>
            
            <property name="concurrent" value="false"></property>
        </bean>
    
        
        <bean id="cronTrigger" class="org.springframework.scheduling.quartz.CronTriggerBean">
            
            <property name="jobDetail" ref="jobDetail1"></property>
            
            <property name="cronExpression" value="10 10 2 L * ?"></property>
        </bean>
    
        
        <bean class="org.springframework.scheduling.quartz.SchedulerFactoryBean">
            <property name="triggers">
                <list>
                    <ref bean="cronTrigger"/>
                </list>
            </property>
        </bean>
    </beans>

**查询出未处理和是本月前的记录，修改成是失效的。**

@Override    public void doTask() {        //查询所有待受理的信息        QueryHelper queryHelper = new QueryHelper(Complain.class, "c");        queryHelper.addCondition("  c.state=?", Complain.COMPLAIN_STATE_UNDONE);        //只要在本月之前        Calendar calendar = Calendar.getInstance();        calendar.set(Calendar.DAY_OF_MONTH, 1);        calendar.set(Calendar.HOUR_OF_DAY, 0);        calendar.set(Calendar.MINUTE, 0);        calendar.set(Calendar.SECOND, 0);        queryHelper.addCondition(" c.compTime <?", calendar.getTime());        //拿到本月之前所有未处理的数据        List<Complain> complains = findObjects(queryHelper);        //将数据全部改成是失效的了。        for (Complain complain : complains) {            complain.setState(Complain.COMPLAIN_STATE_INVALID);        }    }}
        public void doTask() {
        
    
            //查询所有待受理的信息
            QueryHelper queryHelper = new QueryHelper(Complain.class, "c");
            queryHelper.addCondition("  c.state=?", Complain.COMPLAIN_STATE_UNDONE);
    
            //只要在本月之前
            Calendar calendar = Calendar.getInstance();
            calendar.set(Calendar.DAY_OF_MONTH, 1);
            calendar.set(Calendar.HOUR_OF_DAY, 0);
            calendar.set(Calendar.MINUTE, 0);
            calendar.set(Calendar.SECOND, 0);
            queryHelper.addCondition(" c.compTime <?", calendar.getTime());
    
            //拿到本月之前所有未处理的数据
            List<Complain> complains = findObjects(queryHelper);
    
            //将数据全部改成是失效的了。
            for (Complain complain : complains) {
        
                complain.setState(Complain.COMPLAIN_STATE_INVALID);
            }
        }
    }

如果已经失效了，那么我们就不让管理员对其进行回复了。

<s:if test="state!=2"> <a href="javascript:doDeal('<s:property value='compId'/>')">受理</a></s:if><a href="javascript:doDeal('<s:property value='compId'/>')">受理</a></s:if>

![640?wx\_fmt=png][640_wx_fmt_png 20] 这里写图片描述

# 统计图Fusionchart #

我们在投诉模块中还有一个功能没有实现：

> 统计：根据年度将相应年度的每个月的投诉数进行统计，并以图表的形式展示在页面中；在页面中可以选择查看当前年度及其前4年的投诉数。在页面中可以选择不同的年度，然后页面展示该年度的曲线统计图。

我们到目前为止是没有学过任何的统计图的工具的，那么我们要怎么解决这个功能呢？？？我们有另外的组件来把统计图显示出来：**FusionCharts**

**FusionCharts 是使用javascript 实现统计图表的js组件**；其官网地址：http://www.fusioncharts.com。

具体的是怎么操作的可以看官方文档，我们以项目的需求来完成对应的功能就行了。

--------------------

# FusionCharts使用 #

## FusionCharts安装 ##

首先，我们要把对应的JS文档加入到我们的项目中：

## 引入Demo ##

我们只要根据修改Demo的值就可以实现出我们想要的效果了。

# 需求分析 #

再次回到我们的需求原型图，我们看看是怎么样的：

![640?wx\_fmt=png][640_wx_fmt_png 21] 这里写图片描述

根据不同的年份，就显示出不同的统计图数据….**.这明显就用到了ajax技术**。  因此可以确定下来，我们的前端就是用ajax进行交互，渲染出对应的统计图的。

我们的后端就是根据不同的年份，**去获取不同的年份每个月的数据，返回给浏览器**…

## 前端分析 ##

我们的需求是得让我们显示近5年的统计图…于是下拉框是我们近5年的….

我们虽然是可以把option中的数据写死，但是呢，如果过了一年的话，那么我们的数据是不会同步的。当我在2017年写的时候，到2018年，页面显示还是2017年的数据….所以这明显是不合理的….

要想近5年是动态产生的，就不能够把数据写死….于是我们可以在JSP页面上得到当前年的值，根据当前年就非常容易推出近5年的数据了…

于是我们又可以使用到Calendar这个日历类了…

在JSP页面得到当前年的数据，并装载到list集合中

Calendar calendar = Calendar.getInstance();    //得到当前年的值    int  year = calendar.get(Calendar.YEAR);    //把年份用一个集合装载    List yearList = new ArrayList();    //获取近5年的值    for(int i =0; i<5; i++) {        yearList.add(i, year--);    }    request.setAttribute("yearList", yearList);    request.setAttribute("year", year);
        //得到当前年的值
        int  year = calendar.get(Calendar.YEAR);
    
        //把年份用一个集合装载
        List yearList = new ArrayList();
    
        //获取近5年的值
        for(int i =0; i<5; i++) {
        
            yearList.add(i, year--);
        }
        request.setAttribute("yearList", yearList);
        request.setAttribute("year", year);

在Struts的select标签中把这个集合迭代出来

<s:select id="year" list="#request.yearList" onchange="doAnnualStatistic()"></s:select></s:select>

下面是我们的效果：

![640?wx\_fmt=png][640_wx_fmt_png 22] 这里写图片描述

--------------------

接着，我们发现FusionCharts这个组件，想要把数据显示在统计图表中，我们的**JSON数据的格式是需要这样的**：

![640?wx\_fmt=png][640_wx_fmt_png 23] 这里写图片描述

还有值得注意的地方是，**一进入页面中需要加载当前年度的投诉统计数**

--------------------

## 后端分析 ##

我们的后端就是根据年份，获取对应的值，返回一个JSON格式给浏览器，那就行了…

但是呢，我们还有其他的细节需要考虑：今年是2017年7月，但是在查询年度投诉数是要把整个年的信息查询出来，8-12月的投诉数肯定是没有的。**那么我们会将还没到的时间设置成“”，如果在2016年的某月是没有投诉数的，我们应该将其替换成0，而不是“"**….

在action中，我们得获取到用户传递过来的年份，我们调用service、dao层的方法获取该年度对应每个月的投诉数，转换成JSON格式输出就行了。

我们知道前端需要的JSON格式是一个对象数组，最终目的就是数组：Struts2框架在最后解析的时候，会把集合解析成是数组。**对象数组在java编程语言就是List集合中嵌套着Map集合。**

在后端中，还有一个难点，就是我们的SQL语句该怎么写？？？？我们要从数据库查询的是**该年份每个月的投诉数**….

**通过该年而查询每个月**，我们可以很快地想到要用到分组查询。但是还有一个问题，我们在进行分组查询的时候，如果表中是没有1月或2月等数组的话，分组查询出来的数据是没有这些月份的。而我们的统计图是需要所有月份的数据的。咋看一下，我们是需要把查询出来的数据做循环判断，得看看有没有该月份，如果没有该月份还得把数据填充进去。。还得判断该月份是不是本年度的….这样想一下就觉得麻烦了……

select month(comp_time) as '月份',count(*) '总数'from complainwhere year(comp_time)=?group by month(comp_time)month(comp_time) as '月份',count(*) '总数'
    from complain
    where year(comp_time)=?
    group by month(comp_time)

![640?wx\_fmt=png][640_wx_fmt_png 24] 这里写图片描述

--------------------

再次回到前面分析的，如果本年度的月份还没有到，那么将该月的数据设置为“”，如果是其他年份的的月份查出的数据为null，那么我们应该把这些月份的投诉数设置为0而不是”“…..

但是呢，我们现在有一个办法，可以在查询的时候，不管该月份有没有数据，都得显示出来….这就是**左外连接**

于是我们自己手动生成一张拥有12个月份的数据表，跟我们的投诉表进行左外连接…

![640?wx\_fmt=png][640_wx_fmt_png 25] 这里写图片描述

select imonth, count(comp_id)    from t_month left join complain on imonth=month(comp_time)                                      and year(comp_time)=2017    group by imonth    order by imonth;count(comp_id)
        from t_month left join complain on imonth=month(comp_time)
                                          and year(comp_time)=2017
        group by imonth
        order by imonth;

![640?wx\_fmt=png][640_wx_fmt_png 26] 这里写图片描述

上面的sql语句的查询效率是有点低的，我们改造一下，改成是子查询：

select imonth,c2from t_month left join (select month(comp_time) c1, count(comp_id) c2 from complain where year(comp_time)=? group by month(comp_time)) ton imonth = c1order by imonth;
    from t_month left join (select month(comp_time) c1, count(comp_id) c2 from complain where year(comp_time)=? group by month(comp_time)) t
    on imonth = c1
    order by imonth;

--------------------

## 代码实现 ##

dao层根据年份查询出每个月份的投诉数据

/**     *     * @param year 根据年获取数据     * @return  返回的是一个列表数组     */    @Override    public List<Object[]> getAnnualStatisticByYear(int year) {        //拼接SQL语句        StringBuffer buffer = new StringBuffer();        buffer.append(" SELECT imonth,c2 ")        .append(" FROM t_month")        .append(" LEFT JOIN (SELECT month(comp_time) c1, count(comp_id) c2 FROM complain WHERE YEAR(comp_time)=? GROUP BY MONTH(comp_time)) t")        .append(" ON imonth = c1")        .append(" ORDER BY imonth;");        SQLQuery sqlQuery = getSession().createSQLQuery(buffer.toString());        sqlQuery.setParameter(0, year);        List<Object[]> list = sqlQuery.list();        return list;    }
        @Override
        public List<Object[]> getAnnualStatisticByYear(int year) {
        
    
    
            //拼接SQL语句
            StringBuffer buffer = new StringBuffer();
            buffer.append(" SELECT imonth,c2 ")
            .append(" FROM t_month")
            .append(" LEFT JOIN (SELECT month(comp_time) c1, count(comp_id) c2 FROM complain WHERE YEAR(comp_time)=? GROUP BY MONTH(comp_time)) t")
            .append(" ON imonth = c1")
            .append(" ORDER BY imonth;");
            SQLQuery sqlQuery = getSession().createSQLQuery(buffer.toString());
            sqlQuery.setParameter(0, year);
    
            List<Object[]> list = sqlQuery.list();
            return list;
        }

service层拿到Dao层的数据，判断是否是本年度的，如果是本年度的，那么还没有到的月份的数据就设置为”“，如果已经过的了月份，如果没有数据就设置为0.

**返回一个List集合嵌套着Map集合，就可以给前台解析了。**

@Override    public List getAnnualStatisticByYear(int year) {        List<Object[]> annualStatisticByYear = complainDao.getAnnualStatisticByYear(year);        List<Map> returnList = new ArrayList<>();        //得到本年度和本月份        int curYear = Calendar.getInstance().get(Calendar.YEAR);        //Calerdar月份从0开始，        int curMonth = Calendar.getInstance().get(Calendar.MONTH)+1;        //使用Map集合装载着数据        Map<String,Object> map = null;        for (Object[] objects : annualStatisticByYear) {            map = new HashedMap();            //得到月份            Integer month = Integer.valueOf(objects[0] + "");            map.put("label", month + "月");            if (curYear == year) { //是本年度，那么看看月份是否大于本月份                if (month > curMonth) {                    //将数据设置为""                    map.put("value", "");                } else {                    if (objects[1] != null) {                        map.put("value", objects[1]);                    } else {                        map.put("value", "0");                    }                }            }else {//不是本年度                if (objects[1] != null) {                    map.put("value", objects[1]);                } else {                    map.put("value", "0");                }            }            returnList.add(map);        }        return returnList;    }
        public List getAnnualStatisticByYear(int year) {
        
    
            List<Object[]> annualStatisticByYear = complainDao.getAnnualStatisticByYear(year);
    
            List<Map> returnList = new ArrayList<>();
    
            //得到本年度和本月份
            int curYear = Calendar.getInstance().get(Calendar.YEAR);
            //Calerdar月份从0开始，
            int curMonth = Calendar.getInstance().get(Calendar.MONTH)+1;
    
            //使用Map集合装载着数据
            Map<String,Object> map = null;
            for (Object[] objects : annualStatisticByYear) {
        
                map = new HashedMap();
                //得到月份
                Integer month = Integer.valueOf(objects[0] + "");
                map.put("label", month + "月");
                if (curYear == year) { //是本年度，那么看看月份是否大于本月份
                    if (month > curMonth) {
        
                        //将数据设置为""
                        map.put("value", "");
                    } else {
        
                        if (objects[1] != null) {
        
                            map.put("value", objects[1]);
                        } else {
        
                            map.put("value", "0");
                        }
                    }
                }else {
        //不是本年度
                    if (objects[1] != null) {
        
                        map.put("value", objects[1]);
                    } else {
        
                        map.put("value", "0");
                    }
                }
                returnList.add(map);
            }
            return returnList;
        }

action层把service层的数据封装到Map集合中，嵌套ajax解析Map集合，得到的就是对象数组了。

//返回JSON格式的数据，这里我们就直接用Struts2框架来返回对应的数据就行了。    public String getAnnualStatisticData() {        //获取用户传递过来的年份        String str_year = ServletActionContext.getRequest().getParameter("year");        if (str_year != null) {            int year = Integer.valueOf(str_year);            //根据年份去获取每个月的投诉数            map.put("msg", "success");            map.put("chartData", complainServiceImpl.getAnnualStatisticByYear(year));        }        return "getAnnualStatisticData";    }
        public String getAnnualStatisticData() {
        
    
            //获取用户传递过来的年份
            String str_year = ServletActionContext.getRequest().getParameter("year");
            if (str_year != null) {
        
                int year = Integer.valueOf(str_year);
                //根据年份去获取每个月的投诉数
                map.put("msg", "success");
                map.put("chartData", complainServiceImpl.getAnnualStatisticByYear(year));
            }
            return "getAnnualStatisticData";
        }

**前台把年份提交给Action，解析出后台返回的数据，渲染成折线图….**

# 总结 #

> 如果文章有错的地方欢迎指正，大家互相交流。习惯在微信看技术文章，想要获取更多的Java资源的同学，可以**关注微信公众号:Java3y**

[640_wx_fmt_png]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/2BGWl1qPxib3xhDXKwM7YVWib1wLAp8reEcicmBBp5KhUHL4ut2Ep1AudBttpJicNFflbEmweXmR3aV1CicfecxynVQ/640?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210827/12b60f1aa3cd4c28a84fe92ac65fd7aa.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210827/8508d5abba8f41ceadeac793c5366392.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210827/c0c696f6a2474260a987f2d03edb7aee.png?wx_fmt=png
[640_wx_fmt_png 4]: /images/20210827/5f8749cae9f64a189d6075fe1b3c6d6d.png?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210827/8d0219114ef44c5ca130417f1d99f5cc.png?wx_fmt=png
[640_wx_fmt_png 6]: /images/20210827/3c6005dee81b4869a93227fe0c5b1914.png?wx_fmt=png
[640_wx_fmt_png 7]: /images/20210827/e4f746d420f843af9b8eb0c7ad056b9f.png?wx_fmt=png
[640_wx_fmt_png 8]: /images/20210827/27e2fb4bf44e4787bdffc8da6de627ab.png?wx_fmt=png
[640_wx_fmt_png 9]: /images/20210827/b983c8c3cad44b279300063668519066.png?wx_fmt=png
[640_wx_fmt_png 10]: /images/20210827/b7de173cfba64fed9dceb4ddd4007c73.png?wx_fmt=png
[640_wx_fmt_png 11]: /images/20210827/6041b648ba284a86ad6faf9598d8af6f.png?wx_fmt=png
[640_wx_fmt_png 12]: /images/20210827/db06ed3873f54b09a7b4b01b627f414c.png?wx_fmt=png
[640_wx_fmt_png 13]: /images/20210827/fe79183d2e3746eeb0680e782306bb41.png?wx_fmt=png
[640_wx_fmt_png 14]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/2BGWl1qPxib3xhDXKwM7YVWib1wLAp8reEqQhPORYFVPrmAF1f9Z1pc0ibILzrtUibVgeicgBOQJKwOMQTaSykyUncQ/640?wx_fmt=png
[640_wx_fmt_png 15]: /images/20210827/0191f933e78c440baf134ecf5af57e99.png?wx_fmt=png
[640_wx_fmt_png 16]: /images/20210827/d9f71b9a8a284dd98cb14d80f9f639df.png?wx_fmt=png
[640_wx_fmt_png 17]: /images/20210827/8e818c81eb794a5fb09f942280b47da7.png?wx_fmt=png
[640_wx_fmt_png 18]: /images/20210827/a58e12ad2e794292b1474a7544b5b627.png?wx_fmt=png
[640_wx_fmt_png 19]: /images/20210827/094e43415eae4b608eb8452350081798.png?wx_fmt=png
[640_wx_fmt_png 20]: /images/20210827/51901c075c0d417da8d4d55f936c1608.png?wx_fmt=png
[640_wx_fmt_png 21]: /images/20210827/aa3d4f77bffb4fff8ab4e10b5e5c6887.png?wx_fmt=png
[640_wx_fmt_png 22]: /images/20210827/e338ab691539468f805abe9af52e97e4.png?wx_fmt=png
[640_wx_fmt_png 23]: /images/20210827/a0ad2c0b3cf742f98a8ae80a0461b87c.png?wx_fmt=png
[640_wx_fmt_png 24]: /images/20210827/1648288a1c1d48778b549a70176c5daa.png?wx_fmt=png
[640_wx_fmt_png 25]: /images/20210827/c5bd851168a649c4a0c93ebfe9f41c8d.png?wx_fmt=png
[640_wx_fmt_png 26]: /images/20210827/e83b7edaf79e42a597be95eae084f54a.png?wx_fmt=png