zoukankan      html  css  js  c++  java
  • 全国疫情可视化地图(第一阶段)

     第一阶段运行结果:

    查找界面:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html"charset = "UTF-8">
    <title>查找界面</title>
    
    </head>
    <body>
    
        <div align="center">
            <h1 style="color: black;">信息查询</h1>
            <form action="${pageContext.request.contextPath}/CourseServlet?method=find" method="post" onsubmit="return check()">
                <div >
                    开始时间<input class="Wdate" name="start" type="text" onfocus="WdatePicker()" >
                </div>
                <div >
                    结束时间<input class="Wdate" name="end" type="text" onfocus="WdatePicker()" >
                </div>
                <div >
                    省份<input type="text" name="province" >
                </div>
                <div >
                    <button type="submit" class="b">查&nbsp;&nbsp;&nbsp;询</button>
                </div>
            </form>
        </div>
        <script type="text/javascript">
            function check() {
            
                
                //非空
                
            }
        </script>
    </body>
    </html>

    结果界面:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
        <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" >
    <title>查询结果</title>
    </head>
    <!-- ECharts单文件引入 -->  
        <script type="text/javascript" defer="defer" src="<%=request.getContextPath() %>/My97DatePicker/WdatePicker.js"></script>
        <script src="echarts.min.js" ></script>
        </head>
        <body>
         
            <table>
                <tr>
                    <td>
                    
                        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
                        <div id="main" style=" 500px;height:400px;"></div>
                       
                        <script type="text/javascript">
                        
                            // 基于准备好的dom,初始化echarts实例
                            
                            var city1=[];
                            <c:forEach items="${list}" var="a">
                             city1.push("${a.city}");
                            </c:forEach>
                            //这里开一个数组村数据库查到的city
                            
                            var num1=[];
                            <c:forEach items="${list}" var="b">
                             num1.push("${b.confirmed}");
                            </c:forEach>
                            var myChart = echarts.init(document.getElementById('main'));
                         
                            // 指定图表的配置项和数据
                            option = {
                        title : {
                            text: '疫情确诊数据',
                            subtext: '城市和人数'
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['城市','人数']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : city1,
                                axisLabel:{
                                    interval:0,
                                    rotate:30,
                                    
                                }
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'患者数',
                                type:'bar',
                                data:num1}]
                            };
                               
                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);//这里就用option更新
                        </script>
                    </td>
                </tr>
            </table>
            
          <div align="center">
            <table class="tb">
                <tr>
                    
                    <td style=" 200px;">时间</td>
                    <td style=" 200px;">省</td>
                    <td style=" 200px;">城市</td>
                    <td style=" 200px;">确诊人数</td>
                    
                </tr>
                <!-- forEach遍历出adminBeans -->
                <c:forEach items="${list}" var="item" varStatus="status">
                    <tr>
                        
                        <td style=" 200px;">${item.start}</td>
                        <td style=" 200px;">${item.province}</td>
                        <td style=" 200px;">${item.city}</td>
                        <td style=" 200px;">${item.confirmed}</td>
                        
                    </tr>
                </c:forEach>
            </table>
        </div>
            
            
            
            
        </body>
    </html>

    com.bean

    package com.fin.bean;
    
    public class yq {
        
         private String start;
         private String end;
         private String province;
         private String confirmed;
         private String city;
    
        
        
        public String getStart() {
            return start;
        }
    
    
    
        public void setStart(String start) {
            this.start = start;
        }
    
    
    
        public String getEnd() {
            return end;
        }
    
    
    
        public void setEnd(String end) {
            this.end = end;
        }
    
    
    
        public String getProvince() {
            return province;
        }
    
    
    
        public void setProvince(String province) {
            this.province = province;
        }
    
    
    
        public String getConfirmed() {
            return confirmed;
        }
    
    
    
        public void setConfirmed(String confirmed) {
            this.confirmed = confirmed;
        }
    
    
    
        public String getCity() {
            return city;
        }
    
    
    
        public void setCity(String city) {
            this.city = city;
        }
    
    
    
        public yq( String  start,String end, String province,String city,String confirmed) {
            // TODO 自动生成的构造函数存根
            this.start =  start;
            this.end =  end;
            this.province = province;
            this.city = city;
            this.confirmed = confirmed;
        }
    
    }

    com.dao

    package com.fin.dao;
    
    import java.sql.Connection;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.sql.Statement;
    import java.util.ArrayList;
    import java.util.List;
    
    
    import com.fin.bean.yq;
    import com.fin.util.BaseConnection;
    
    public class CourseDao {
        public static List<yq> find(String start ,String end   ,String province)
        {
            
            List<yq> list = new ArrayList<yq>();
            
            String sql = "select * from city_map where provinceShortName ='"+province+"'";
            
            
            Connection conn = BaseConnection.getConnection();
            Statement state = null;
            ResultSet rs = null;
            
            try {
                state = conn.createStatement();
                rs = state.executeQuery(sql);
                yq cour = null;
                while (rs.next()) {
                    
                    
                    String startt =null; 
                    String endd = null;
                    String shengg = rs.getString("provinceShortName");
                    String city = rs.getString("cityName");
                    String number = rs.getString("confirmedCount");
                    cour = new yq( startt,endd,shengg,city,number);
                    list.add(cour);
                }
            } catch (SQLException e) {
                // TODO 自动生成的 catch 块
                e.printStackTrace();
            }finally
            {
                BaseConnection.close(rs, state, conn);
            }
            return list;
        }
        
    
    }

    Servlet:

    package com.fin.servlet;
    
    import java.io.IOException;
    import java.io.UnsupportedEncodingException;
    import java.util.ArrayList;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    
    //import javax.smartcardio.ResponseAPDU;
    import com.fin.bean.yq;
    import com.fin.dao.CourseDao;
    /**
     * Servlet implementation class CourseServlet
     */
    @WebServlet("/CourseServlet")
    public class CourseServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public CourseServlet() {
            super();
            // TODO Auto-generated constructor stub
        }
    
        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // TODO Auto-generated method stub
            //response.getWriter().append("Served at: ").append(request.getContextPath());
            
            response.setContentType("text/html;charset=UTF-8");
            request.setCharacterEncoding("UTF-8");
            
            String method = request.getParameter("method");
            if(method.equals("find"))
            {
                find(request,response);
            }
            
            
        }
    
        private void find(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // TODO 自动生成的方法存根
            //Course cour = new Course();
            response.setContentType("text/html;charset=UTF-8");
            request.setCharacterEncoding("UTF-8");
            /*response.setCharacterEncoding("UTF-8");
            response.setHeader("content-type","text/html;charset=UTF-8");*/
            String start = request.getParameter("start");
            String end = request.getParameter("end");
            String province = request.getParameter("province");
            List<yq> list =  CourseDao.find(start,end,province);
            request.setAttribute("list", list);
            //response.setHeader("refresh", "0;url=findResult.jsp");
            request.getRequestDispatcher("findResult.jsp").forward(request,response);
            
        }
    
        /**
         * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // TODO Auto-generated method stub
            doGet(request, response);
            
        }
    }
  • 相关阅读:
    Node.js连接MySQL数据库及构造JSON的正确姿势
    Lyx输入中文与代码高亮
    查看文件编码 + 查看文件扩展名 + 文件编码转换
    系统重装/装Anaconda后,Windows开始菜单缺少快捷方式解决方案
    Python动态网页爬虫-----动态网页真实地址破解原理
    多线程爬虫
    openpyxl基本操作
    BitMap原理
    Trie(前缀树/字典树)及其应用
    tensorflow和pytorch教程
  • 原文地址:https://www.cnblogs.com/studya/p/13062743.html
Copyright © 2011-2022 走看看