Second Pair

This work belongs courses	Spring 2020 \| S class
Where the job requires	The second pair job
Pair Student ID	221701415/221701437
The target job	A particular disease statistics Realization of Visualization
Text of the job	Second Pair
Other references	Deal with cross-domain issues

Github repository address and code links

InfectStatisticWeb
codestyle

gallery

The front and rear ends are separated and the job is completed in the background cloud server technology uses ssm rear frame, the front-end technology employed by VUE to quickly build, using the element-ui to build and echarts view.

Back-end server start

After the background program into a server daemon, long-term access to

the database part of the data shows

Front page display

Main page 1, will one day national data show, you can learn something about the epidemic of data, while the map, intuitive understanding of the distribution of the epidemic.

Sub-page 1, data demonstrating the province (FIG Hubei), can be intuitively understood by the growing trend of each data line graph.

1 sub-page, can indicate a situation day by the mouse, you can also select the date, one day understand the data situation.

Main page 2, the cumulative data showing the country's confirmed on the map

During the discussion of discourse knot

Discussions

Mountain today: Pharaoh Pharaoh, that we work in pairs Zezheng?
Pharaoh: also zezheng, back-end rush to write.
Hill now: so what design ideas you?
Wang: Do you see yourself slightly.
Hill now: There Database Design / bitter
Pharaoh: This is part of your responsibility, not think of it.
Long, long time (probably less than 20min
Hill this: that I ssm get the
Pharaoh: can
the mountain this: give a time limit chant?
Pharaoh: within three days, began to count today.

Functional block diagram

Code Description

Back-end code Description

public class Data {
    private Integer infect;
    private Integer doubt;
    private Integer cure;
    private Integer dead;
    private String provinceName;
    private String date;
    ...//
    get/set函数
}
//Bean的编写，设计用于存储数据

public interface DataMapper {
    //查询某日所有信息
    @Select("SELECT * FROM data WHERE date=#{date}")
    List<Data> findByDate(String date);

    //查询某省所有信息
    @Select("SELECT * FROM data WHERE provincename=#{provinceName}")
    List<Data> findByProvince(String provinceName);

    //查询某省某日所有信息
    @Select("SELECT * FROM data WHERE provincename=#{provinceName} AND date=#{date} ")
    List<Data> findByDateAndProvince(@Param("provinceName") String provinceName, @Param("date") String date);
    
    ...
}
//DataMapper的实现，用于DAO层

public interface DataService {
    List<Data> findByDate(String date);
    List<Data> findByProvince(String provinceName);
    List<Data> findByProvinceAndDate(String provinceName, String date);
    String getInfectDate(String provinceName, String date);
    String getDoubtDate(String provinceName, String date);
    String getCureDate(String provinceName, String date);
    String getDeadDate(String provinceName, String date);
}
//服务层接口

public class DataImplService implements DataService {
    @Autowired
    DataMapper dataMapper;

    @Override
    public List<Data> findByDate(String date) {
        return dataMapper.findByDate(date);
    }

    @Override
    public List<Data> findByProvince(String provinceName) {
        return dataMapper.findByProvince(provinceName);
    }

    @Override
    public List<Data> findByProvinceAndDate(String provinceName, String date) {
        return dataMapper.findByDateAndProvince(provinceName,date);
    }

    ...
}
//服务层接口的实现

Distal Code Description

Front page to quickly set up by VUE, using the element-ui to build and echarts view, copy here to build a basic page model

chinaConfigure() {
    let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
    window.onresize = myChart.resize;
    myChart.setOption({
        // 进行相关配置
        backgroundColor: '#f8f8f8',
        title: {
            text: '地图趋势',
            left: 'center'
        },
        tooltip: {
            formatter(params) {
                if (params.data != null) {
                    return `
                        地区:${params.data.name}<br>确诊:${params.data.value}
                    `
                }
            }
        }, // 鼠标移到图里面的浮动提示框
        dataRange: {
            show: true,
            min: _.minBy(this.province, (o)=>{return o.value}).value,
            max: _.maxBy(this.province, (o)=>{return o.value}).value,
            // text: ["High", "Low"],
            realtime: true,
            calculable: true,
            color: ["#000066", "white"]
        },
        geo: {
        // 这个是重点配置区
            map: "china", // 表示中国地图
            roam: true,
            label: {
                normal: {
                    show: false, // 是否显示对应地名
                    textStyle: {
                        color: "rgba(0,0,0,0.4)"
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: "rgba(0, 0, 0, 0.2)"
                },
                emphasis: {
                    areaColor: null,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                }
            }
        },
        series: [
            {
                type: "scatter",
                coordinateSystem: "geo" // 对应上方配置
            },
            {
                type: "map",
                geoIndex: 0,
                data: this.province
            }
        ]
    });
    myChart.on('click', (params)=>{
        this.$store.state.title=params.name
        this.$router.push('/detail')
    })
}

This is the home page map initialization code, use echarts vue in the life cycle of mountthis phase initialize the map.

<div class="table">
    <div style="text-align:left; color:#888888">数据更新至{{current}}
        <el-tooltip class="item" effect="dark" content="趋势图与国家卫健委官网发布一致，每日更新" placement="bottom">
            <span style="float:right; color:"><span class="el-icon-warning-outline"></span>数据说明</span>
        </el-tooltip>
    </div>
    
    <el-row :gutter="24" :type="type" :justify="justify">
        <el-col :span="8" >
            <el-card shadow="always">
            <span class="content-title">现有确诊</span> <br>
            <div style="margin-top:5px;"></div>
            <span class="content-number" style="color: #FF6633;">{{tableData.infect}}</span> <br>
            <span class="content-yesterday">昨日
                <span style="color: #FF6633"><span v-if="tableData.infect-yesterday.infect>=0">+</span><span v-else>-</span>{{tableData.infect-yesterday.infect}}</span>
                </span>
            </el-card>
        </el-col>
        <el-col :span="8" >
            <el-card shadow="always" >
            <span class="content-title">现有疑似</span> <br>
            <div style="margin-top:5px;"></div>
            <span class="content-number" style="color: #FFCC00">{{tableData.doubt}}</span> <br>
            <span class="content-yesterday">昨日
                <span style="color: #FFCC00"><span v-if="tableData.infect-yesterday.infect>=0">+</span><span v-else>-</span>{{tableData.infect-yesterday.infect}}</span>
                </span>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top: 5px;">
        <el-col :span="8" >
            <el-card shadow="always" >
            <span class="content-title">累计确诊</span> <br>
            <div style="margin-top:5px;"></div>
            <span class="content-number" style="color: #FF0000">{{tableData.sumCount}}</span> <br>
            <span class="content-yesterday">昨日
                <span style="color: #FF0000"><span v-if="tableData.sumCount-yesterday.sumCount>=0">+</span><span v-else>-</span>{{tableData.sumCount-yesterday.sumCount}}</span>
                </span>
            </el-card>
        </el-col>
        <el-col :span="8" >
            <el-card shadow="always" >
            <span class="content-title">累计治愈</span> <br>
            <div style="margin-top:5px;"></div>
            <span class="content-number" style="color: #67C23A">{{tableData.cure}}</span> <br>
            <span class="content-yesterday">昨日
                <span style="color: #67C23A"><span v-if="tableData.cure-yesterday.cure>=0">+</span><span v-else>-</span>{{tableData.cure-yesterday.cure}}</span>
                </span>
            </el-card>
        </el-col>
        <el-col :span="8" >
            <el-card shadow="always" >
            <span class="content-title">累计死亡</span> <br>
            <div style="margin-top:5px;"></div>
            <span class="content-number" style="color: #000000">{{tableData.dead}}</span> <br>
            <span class="content-yesterday">昨日
                <span style="color: #000000"><span v-if="tableData.dead-yesterday.dead>=0">+</span><span v-else>-</span>{{tableData.dead-yesterday.dead}}</span>
                </span>
            </el-card>
        </el-col>
    </el-row>
</div>

Use element in card form to indicate the portion of the map, and get data axios

getTableData() {
    this.$ajax.get('/get/all', {
        params: {'date':'2020-02-02'} //数据不全，只能先这样，否则可以调用date函数
    }).then(
        (res)=>{
            var resJson = res.data
            this.tableData = resJson
            var count = 0
            count += this.tableData.infect
            count += this.tableData.cure
            count += this.tableData.dead
            this.tableData.sumCount = count
        }
    )
},
getYesterday() {
    this.$ajax.get(('/get/all'), {
        params: {'date': '2020-02-01'}
    }).then(
        (res)=> {
            this.yesterday = res.data
            var count = 0
            count += this.yesterday.infect
            count += this.yesterday.cure
            count += this.yesterday.dead
            this.yesterday.sumCount = count
        }
    )
}

& Evaluate the mentality of his teammates

Because of the separation of the front and rear end, my two brothers and Pharaoh were completed back-end and front-end, in fact, less technical exchanges, more communication before and after the docking, the so-called separation of one o'clock cool, docking crematorium. Before and after the separation so what benefit? The most intuitive impression is that while promoting the practice, according to the prototype, code while the front page and back-end interface to write, and finally docking capabilities, a document written specification is really not terribly specific coding time may be too long , listened to twenty times so you might finish the class , two more to team development model of knowledge and understanding, or else the next hair products when the punching bag? .
Two to do the back-end to do a web project, the front page we supposed to do, so that more of the nb to write chant. --- Zhang
revolution is not successful, comrades need to strive (refer to practice your hand) - Wang