全国疫情信息地图展示及表单查询

预览地址：http://117.50.96.227/EpidemicInfo/

pojo

CityData

package com.pojo;

public class CityData {
    private int id;
    private String name;
    private String confirm;
    private String suspect;
    private String heal;
    private String dead;
    private String severe;
    private String idcode;
    private String lastupdatetime;

    @Override
    public String toString() {
        return "CityDate{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", confirm='" + confirm + '\'' +
                ", suspect='" + suspect + '\'' +
                ", heal='" + heal + '\'' +
                ", dead='" + dead + '\'' +
                ", severe='" + severe + '\'' +
                ", idcode='" + idcode + '\'' +
                ", lastupdatetime='" + lastupdatetime + '\'' +
                '}';
    }

    public CityData(int id, String name, String confirm, String suspect, String heal, String dead, String severe, String idcode, String lastupdatetime) {
        this.id = id;
        this.name = name;
        this.confirm = confirm;
        this.suspect = suspect;
        this.heal = heal;
        this.dead = dead;
        this.severe = severe;
        this.idcode = idcode;
        this.lastupdatetime = lastupdatetime;
    }

    public CityData() {
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getConfirm() {
        return confirm;
    }

    public void setConfirm(String confirm) {
        this.confirm = confirm;
    }

    public String getSuspect() {
        return suspect;
    }

    public void setSuspect(String suspect) {
        this.suspect = suspect;
    }

    public String getHeal() {
        return heal;
    }

    public void setHeal(String heal) {
        this.heal = heal;
    }

    public String getDead() {
        return dead;
    }

    public void setDead(String dead) {
        this.dead = dead;
    }

    public String getSevere() {
        return severe;
    }

    public void setSevere(String severe) {
        this.severe = severe;
    }

    public String getIdcode() {
        return idcode;
    }

    public void setIdcode(String idcode) {
        this.idcode = idcode;
    }

    public String getLastupdatetime() {
        return lastupdatetime;
    }

    public void setLastupdatetime(String lastupdatetime) {
        this.lastupdatetime = lastupdatetime;
    }
}

ProvinceData

package com.pojo;

public class ProvinceData {

    private String name;
    private String value;
    private String dead;
    private String heal;

    @Override
    public String toString() {
        return "ProvinceData{" +
                "name='" + name + '\'' +
                ", value='" + value + '\'' +
                ", dead='" + dead + '\'' +
                ", heal='" + heal + '\'' +
                '}';
    }

    public ProvinceData() {
    }

    public ProvinceData(String name, String value, String dead, String heal) {
        this.name = name;
        this.value = value;
        this.dead = dead;
        this.heal = heal;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }

    public String getDead() {
        return dead;
    }

    public void setDead(String dead) {
        this.dead = dead;
    }

    public String getHeal() {
        return heal;
    }

    public void setHeal(String heal) {
        this.heal = heal;
    }
}

dao

city的dao

• CityMapper

  package com.dao;
  
  import com.pojo.CityData;
  import org.apache.ibatis.annotations.Param;
  
  import java.util.List;
  
  public interface CityMapper {
  
      //获取所有城市的信息
      public List<CityData> getAllInfo(@Param("date") String date);
  
      //根据城市名称查询城市的信息
      public List<CityData> getInfoByName(@Param("name") String name,@Param("date") String date);
  
      //根据省份名称查询城市的信息
      public List<CityData> getInfoByProvince(@Param("name") String name,@Param("date") String date);
  
      //根据国家名称查询疫情信息
      public List<CityData> getInfoByCountry(@Param("name") String countryName,@Param("date") String date);
  
  }
  

• CityMapper.xml

  <?xml version="1.0" encoding="UTF-8" ?>
  <!DOCTYPE mapper
          PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
          "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  <mapper namespace="com.dao.CityMapper">
  
      <select id="getAllInfo" resultType="CityData">
          select * from pythontest2 where lastupdatetime like #{date}
      </select>
  
      <select id="getInfoByName" resultType="CityData">
          select * from pythontest2 where name like #{name} and lastupdatetime like #{date}
      </select>
  
      <select id="getInfoByProvince" resultType="CityData">
          select * from pythontest2 where province like #{name} and lastupdatetime like #{date}
      </select>
  
      <select id="getInfoByCountry" resultType="CityData">
          select * from pythontest where name like #{name} and lastupdatetime like #{date}
      </select>
  
  </mapper>
  

province的dao

• ProvinceMapper

  package com.dao;
  
  import com.pojo.ProvinceData;
  
  import java.util.List;
  
  public interface ProvinceMapper {
  
  //    获取全国省份信息
      public List<ProvinceData> getAllProvinceData();
  }
  

• ProvinceMapper.xml

  <?xml version="1.0" encoding="UTF-8" ?>
  <!DOCTYPE mapper
          PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
          "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  <mapper namespace="com.dao.ProvinceMapper">
  
      <resultMap id="Province" type="com.pojo.ProvinceData">
          <result property="value" column="confirm"/>
      </resultMap>
  
      <select id="getAllProvinceData" resultMap="Province">
          select * from pythontest
      </select>
  
  
  </mapper>
  

Service

cityService

package com.service;

import com.pojo.CityData;

import java.util.List;

public interface CityService {
    //获取所有城市的信息
    public List<CityData> getAllInfo(String date);

    //根据城市名称查询城市的信息
    public List<CityData> getInfoByName(String name,String date);

    //根据省份名称查询城市的信息
    public List<CityData> getInfoByProvince(String name,String date);

    //根据国家名称查询疫情信息
    public List<CityData> getInfoByCountry(String countryName,String date);
}

实现类:

package com.service;

import com.dao.CityMapper;
import com.pojo.CityData;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class CityServiceImpl implements CityService {

    @Autowired
    private CityMapper cityMapperImp;

    public List<CityData> getAllInfo(String date) {
        return cityMapperImp.getAllInfo("%"+ date + "%");
    }

    public List<CityData> getInfoByName(String name,String date) {
//        这里传入拼接好的可以模糊查询
        return cityMapperImp.getInfoByName("%"+ name + "%","%"+ date + "%");
    }

    public List<CityData> getInfoByProvince(String name,String date) {
        //        这里传入拼接好的可以模糊查询
        return cityMapperImp.getInfoByProvince("%"+ name + "%","%"+ date + "%");
    }

    public List<CityData> getInfoByCountry(String countryName,String date) {
        return cityMapperImp.getInfoByCountry("%"+ countryName + "%","%"+ date + "%");
    }
}

provinceService

package com.service;

import com.pojo.ProvinceData;

import java.util.List;

public interface ProvinceService {

    //    获取全国省份信息
    public List<ProvinceData> getAllProvinceData();
}

实现类:

package com.service;

import com.dao.ProvinceMapper;
import com.pojo.ProvinceData;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ProvinceServiceImpl implements ProvinceService {

    @Autowired
    private ProvinceMapper provinceMapper;

    public List<ProvinceData> getAllProvinceData() {

        return provinceMapper.getAllProvinceData();
    }
}

Controller

CityController

package com.controller;

import com.pojo.CityData;
import com.service.CityService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
@RequestMapping("/city")
public class CityController {

    @Autowired
    private CityService cityService;

    @RequestMapping("/getAllInfo/{date}")
    @ResponseBody
    public List<CityData> getAllInfo(@PathVariable("date") String date){
        List<CityData> allInfo = cityService.getAllInfo(date);
        return allInfo;
    }

    @RequestMapping("/getInfoByName/{cityName}/{date}")
    @ResponseBody
    public List<CityData> getInfoByName(@PathVariable("cityName") String name,@PathVariable("date") String date){
        List<CityData> cityData = cityService.getInfoByName(name,date);
        return cityData;
    }

    @RequestMapping("/getInfoByProvince/{provinceName}/{date}")
    @ResponseBody
    public List<CityData> getInfoByProvince(@PathVariable("provinceName") String name,@PathVariable("date") String date){
        List<CityData> cityData = cityService.getInfoByProvince(name,date);
        return cityData;
    }

    @RequestMapping("/getInfoByCountry/{countryName}/{date}")
    @ResponseBody
    public List<CityData> getInfoByCountry(@PathVariable("countryName") String name,@PathVariable("date") String date){
        List<CityData> cityData = cityService.getInfoByCountry(name,date);
        return cityData;
    }



}

ProvinceController

package com.controller;

import com.pojo.ProvinceData;
import com.service.ProvinceService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
@RequestMapping("province")
public class ProvinceController {

    @Autowired
    private ProvinceService provinceService;

    @RequestMapping("/getAllProvince")
    @ResponseBody
    public List<ProvinceData> getAllProvince(){
        List<ProvinceData> allProvinceData = provinceService.getAllProvinceData();
        return allProvinceData;
    }


}

相关配置文件

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd">

    <import resource="classpath:spring-dao.xml"/>
    <import resource="classpath:spring-mvc.xml"/>
    <import resource="classpath:spring-service.xml"/>

</beans>

spring-dao.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

<!--    关联本地数据库文件-->
    <context:property-placeholder location="classpath:database.properties"/>

<!--    配置数据池-->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="${jdbc.driver}"/>
        <property name="jdbcUrl" value="${jdbc.url}"/>
        <property name="user" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
        <!-- c3p0连接池的私有属性 -->
        <property name="maxPoolSize" value="30"/>
        <property name="minPoolSize" value="10"/>
        <!-- 关闭连接后不自动commit -->
        <property name="autoCommitOnClose" value="false"/>
        <!-- 获取连接超时时间 -->
        <property name="checkoutTimeout" value="10000"/>
        <!-- 当获取连接失败重试次数 -->
        <property name="acquireRetryAttempts" value="2"/>
    </bean>

    <!--    配置sqlSessionFactory-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--        注入数据源-->
        <property name="dataSource" ref="dataSource"/>
        <!--        关联mybatis-->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
    </bean>

    <!--    配置dao接口包，动态实现接口的实现类-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--        注入sqlSessionFactory-->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        <!--        表明需要扫描的包-->
        <property name="basePackage" value="com.dao"/>
    </bean>

</beans>

spring-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc
        https://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/context
        https://www.springframework.org/schema/context/spring-context.xsd">

    <!--    1.注解驱动-->
    <mvc:annotation-driven/>
    <!--    2.配置静态资源过滤-->
    <mvc:default-servlet-handler/>
    <!--    3.扫描包-->
    <context:component-scan base-package="com.controller"/>
    <!--    4.视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>


</beans>

spring-service.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

<!--    自动扫描包-->
    <context:component-scan base-package="com.service"/>

    <!--    配置事务管理器-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>

</beans>

mybatis-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

    <typeAliases>
        <package name="com.pojo"/>
    </typeAliases>

    <mappers>
        <mapper class="com.dao.CityMapper"/>
        <mapper class="com.dao.ProvinceMapper"/>
    </mappers>

</configuration>

database.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/XXXX?useSSL=true&useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
jdbc.username=XXXX
jdbc.password=XXXX

页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>疫情信息</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<%--导入地图依赖--%>
    <script src="${pageContext.request.contextPath}/static/js/echarts.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.8.3.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/china.js"></script>


    <script>

        //异步查询
        function getInfoByName(){
            var way = $("#getInfoWay").val();
            var name = $("#keyName").val();
            var date = $("#queryDate").val().toString();
            var url = "";
            if (name != ""){
                if (way == "province"){
                    url += "${pageContext.request.contextPath}/city/getInfoByProvince/"+name+"/"+date;
                }else if (way == "city"){
                    url += "${pageContext.request.contextPath}/city/getInfoByName/"+name+"/"+date;
                }else if (way == "country"){
                    url += "${pageContext.request.contextPath}/city/getInfoByCountry/"+name+"/"+date;
                }
            }else if (name === ""){
                //输入为空时默认查询所有的城市
                url += "${pageContext.request.contextPath}/city/getAllInfo/"+date;
            }
            $.post(url,function (data) {
                var html = "";
                for (var i = 0; i < data.length; i++) {
                    html += "<tr>" +
                        "<td>" + (i+1) + "</td>" +
                        "<td>" + data[i].name + "</td>" +
                        "<td>" + data[i].confirm + "</td>" +
                        "<td>" + data[i].heal + "</td>" +
                        "<td>" + data[i].dead + "</td>" +
                        "<td>" + data[i].suspect + "</td>" +
                        "<td>" + data[i].severe + "</td>" +
                        "<td>" + data[i].lastupdatetime + "</td>" +
                        "/<tr>"
                }
                $("#dateShow").html(html)
            });
        }

        $(function () {
            $("#showMapDiv").css("height",document.body.clientHeight);
            $("#showTableDiv").css("height",document.body.clientHeight);
            showChart();
            var now = new Date();
            var day = now.getDay();
            var month = now.getMonth()+1;
            var year = now.getFullYear();
            var today = year + " - " + month + " - " + day;
            document.getElementById("queryDate").value=today;
            $("#query").click();
        });
    </script>

</head>
<body>

<div class="container">

    <div class="row">

<%--        这里是全国疫情地图部分--%>
        <div class="col-md-6 col-sm-12 column" id="showMapDiv">

            <div id="main" style="height: 100%;width: 100%;" >

            </div>

        </div>

        <div class="col-md-6 col-sm-12 column" style="overflow: scroll;" id="showTableDiv">

<%--            头部搜索--%>
            <div class="row" style="padding-top: 10px;padding-left: 20px;">

                <form class="form-inline" action="#" method="post">
<%--                    查询名称--%>
                    <div class="form-group" style="padding-top: 5px;padding-left: 10px;">
                        <label>请选择查询方式:</label>
                        &nbsp;&nbsp;&nbsp;
                        <select class="form-control" id="getInfoWay">
                            <option value="province">省份</option>
                            <option value="city">城市</option>
                            <option value="country">国家</option>
                        </select>
                        &nbsp;&nbsp;&nbsp;
                        <input type="text" class="form-control" id="keyName" placeholder="请输入关键字" value="河北">
                    </div>
                    <%--日期搜索框--%>
                    <div class="form-group" style="padding-top: 5px;padding-left: 10px;">
                        <label>请选择查询的日期:</label>
                        <input type="date" id="queryDate">
                    </div>
                    &nbsp;&nbsp;
                    <button type="button" id="query" class="btn btn-primary" onclick="getInfoByName()">查询</button>
                </form>
            </div>

            <table class="table table-bordered table-hover  table-striped table-condensed">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>城市名称</th>
                        <th>确诊人数</th>
                        <th>治愈人数</th>
                        <th>死亡人数</th>
                        <th>疑似人数</th>
                        <th>重症人数</th>
                        <th>更新日期</th>
                    </tr>
                </thead>
                <tbody id="dateShow">

                </tbody>
            </table>

        </div>

    </div>

</div>

<script>
    function showChart() {
        var chart = echarts.init(document.getElementById('main'));
        chart.setOption({
            title: {
                text: '中国地图',
                subtext: '该页面的数据仅供参考',
            },
            tooltip: {
                formatter:function(params){
                    return params.name+'<br />'+'确诊人数：'+params['data']['value']+'<br />'+'死亡人数：'
                        +params['data']['dead']+'<br />'+'治愈人数：'+params['data']['heal'];
                }//数据格式化
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            visualMap: {
                min: 0,
                max: 40000,
                left: 'left',
                top: 'bottom',
                text: ['多','少'],
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                },
                show:true
            },
            series: [{
                type: 'map',
                map: 'china',
                label:{
                    show: true
                }
            }
            ]
        });

        //异步加载数据
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "${pageContext.request.contextPath }/province/getAllProvince",    //请求发送到TestServlet处
            success : function(resultJson) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (resultJson) {
                    chart.setOption({        //加载数据图表
                        series: [{
                            data: resultJson
                        }]
                    });

                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
            }
        });
    }
</script>


</body>
</html>

web.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--    配置-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!--    解决乱码-->
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!--    session-->
    <session-config>
        <session-timeout>15</session-timeout>
    </session-config>



</web-app>