├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── App.vue
    └── components
    │   └── Baidu.vue
├── babel.config.js
├── .gitignore
├── vue.cofing.js
├── package.json
└── README.md


/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hack-fang/ncov-map/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | import BaiduMap from 'vue-baidu-map'
 4 | // import ElementUI from 'element-ui';
 5 | import {Link,Tag,Cascader}  from 'element-ui'
 6 | // import { BootstrapVue } from 'bootstrap-vue'
 7 | import { NavbarPlugin } from 'bootstrap-vue'
 8 | import 'element-ui/lib/theme-chalk/index.css';
 9 | import 'bootstrap/dist/css/bootstrap.css'
10 | import 'bootstrap-vue/dist/bootstrap-vue.css'
11 | 
12 | 
13 | import App from './App.vue'
14 | import axios from 'axios'
15 | 
16 | Vue.prototype.axios = axios
17 | 
18 | Vue.config.productionTip = false
19 | // Vue.use(ElementUI);
20 | Vue.use(Link)
21 | Vue.use(Tag)
22 | Vue.use(Cascader)
23 | // Vue.use(BootstrapVue)
24 | Vue.use(NavbarPlugin)
25 | // Vue.use(IconsPlugin)
26 | Vue.use(BaiduMap, {
27 |   // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
28 |   ak: '你的密钥'
29 | })
30 | new Vue({
31 |   render: h => h(App),
32 | }).$mount('#app')
33 | 
34 | 


--------------------------------------------------------------------------------
/vue.cofing.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const CompressionPlugin = require('compression-webpack-plugin')
 3 | const productionGzip = true
 4 | 
 5 | module.exports = {
 6 |     // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
 7 |     outputDir: 'dist',
 8 | 
 9 |     // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
10 |     assetsDir: '',
11 |     publicPath: './',
12 |     configureWebpack: config => {
13 |         if (process.env.NODE_ENV === 'production') {
14 |             return {
15 |                 plugins: [
16 |                     new CompressionPlugin({
17 |                         algorithm: 'gzip',
18 |                         test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,// 匹配文件名
19 |                         threshold: 10240, // 对超过10k的数据压缩
20 |                         deleteOriginalAssets: false, // 不删除源文件
21 |                         minRatio: 0.8 // 压缩比
22 |                     })
23 |                 ]
24 |             }
25 |         }
26 |     }
27 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ncov-maps",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.19.2",
12 |     "bootstrap-vue": "^2.4.0",
13 |     "core-js": "^3.4.4",
14 |     "element-china-area-data": "^4.1.2",
15 |     "element-ui": "^2.13.0",
16 |     "vue": "^2.6.10",
17 |     "vue-baidu-map": "^0.21.22"
18 |   },
19 |   "devDependencies": {
20 |     "@gfx/zopfli": "^1.0.14",
21 |     "@vue/cli-plugin-babel": "^4.1.0",
22 |     "@vue/cli-plugin-eslint": "^4.1.0",
23 |     "@vue/cli-service": "^4.1.0",
24 |     "babel-eslint": "^10.0.3",
25 |     "brotli-webpack-plugin": "^1.1.0",
26 |     "compression-webpack-plugin": "^3.1.0",
27 |     "eslint": "^5.16.0",
28 |     "eslint-plugin-vue": "^5.0.0",
29 |     "vue-template-compiler": "^2.6.10"
30 |   },
31 |   "eslintConfig": {
32 |     "root": true,
33 |     "env": {
34 |       "node": true
35 |     },
36 |     "extends": [
37 |       "plugin:vue/essential",
38 |       "eslint:recommended"
39 |     ],
40 |     "rules": {},
41 |     "parserOptions": {
42 |       "parser": "babel-eslint"
43 |     }
44 |   },
45 |   "browserslist": [
46 |     "> 1%",
47 |     "last 2 versions"
48 |   ]
49 | }
50 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div>
 4 |       <b-navbar toggleable="lg" type="dark" variant="info" fixed="top">
 5 |         <b-navbar-brand href="#">全国新冠病例分布图</b-navbar-brand>
 6 | 
 7 |  
 8 |  
 9 |             <el-cascader
10 |               size="small"
11 |               :options="options"
12 |               v-model="selectedOptions"
13 |               @change="handleChange"
14 |             ></el-cascader>
15 |   
16 |         <b-navbar-nav class="ml-auto">
17 |           <b-nav-form>
18 |             <el-link href="https://github.com/hack-fang/ncov-map" target="_blank" type="info">Github</el-link>
19 |           </b-nav-form>
20 |         </b-navbar-nav>
21 |       </b-navbar>
22 |     </div>
23 |     <div>
24 |       <baidu :items="data"></baidu>
25 |     </div>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | import baidu from "./components/Baidu.vue";
31 | import axios from "axios";
32 | import { provinceAndCityDataPlus, CodeToText} from "element-china-area-data";
33 | export default {
34 |   components: { baidu },
35 |   data() {
36 |     return {
37 |       options: provinceAndCityDataPlus,
38 |       selectedOptions: ["340000","340100"], // 默认是安徽省合肥市
39 |       data: []
40 |     };
41 |   },
42 | 
43 |   created: function() {
44 |     document.title = "全国新冠病例小区分布";
45 |     let p = { province: "安徽省", city: "合肥市" };
46 |     this.getData(p);
47 |   },
48 | 
49 |   methods: {
50 |     handleChange(value) {
51 | 
52 |       if (value[1] === "") {
53 |         let addr = "";
54 |         addr = CodeToText[value[0]];
55 |         let param = { province: addr };
56 |         this.getData(param);
57 |       } else {
58 |         let param = {
59 |           province: CodeToText[value[0]],
60 |           city: CodeToText[value[1]]
61 |         };
62 | 
63 |         this.getData(param);
64 |       }
65 |     },
66 |     getData(p) {
67 |       axios
68 |         .get("https://lab.ahusmart.com/nCoV/api/detail", {
69 |           params: p
70 |         })
71 |         .then(response => {
72 |           this.data = response.data.results;
73 |         });
74 |     }
75 |   }
76 | };
77 | </script>
78 | 
79 | <style scoped>
80 | .bg-info {
81 |   background-color: #409eff !important;
82 | }
83 | 
84 | .el-link {
85 |   color: #ffffff;
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/src/components/Baidu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <baidu-map class="map" :center="center" :zoom="zoom" :auto-resize="true" :scroll-wheel-zoom="true">
  3 |     <bm-navigation
  4 |       anchor="BMAP_ANCHOR_TOP_RIGHT"
  5 |       :offset="{width:0,height:100}"
  6 |       :enableGeolocation="true"
  7 |     ></bm-navigation>
  8 |     <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
  9 |     <bm-marker
 10 |       v-bind:items="items"
 11 |       v-for="(item, index) in items"
 12 |       v-bind:item="item"
 13 |       v-bind:index="index"
 14 |       v-bind:key="item.id"
 15 |       :position="{'lng':item.position[0],'lat':item.position[1]}"
 16 |       :dragging="false"
 17 |       @click="infoWindowOpen(index)"
 18 |     >
 19 |       <bm-info-window
 20 |         :autoPan="true"
 21 |         :show="item.show"
 22 |         :closeOnClick="true"
 23 |         @close="infoWindowClose(index)"
 24 |         @open="infoWindowOpen(index)"
 25 |       >
 26 |         <el-tag effect="dark">{{item.province}}</el-tag>
 27 | 
 28 |         <el-tag type="warning" effect="dark">{{item.city}}</el-tag>
 29 | 
 30 |         <el-tag type="danger" effect="dark">{{item.county}}</el-tag>
 31 | 
 32 |         <h5>{{item.detail}}</h5>
 33 | 
 34 |         <div>来源自:<el-link :href="item.sourceUrl" target="_blank" type="primary">{{item.infoSource}}</el-link></div>
 35 |         <p>发布时间:{{getExactTime(item.updateTime)}}</p>
 36 |       </bm-info-window>
 37 |     </bm-marker>
 38 |     <bm-city-list class="bm-city-list" anchor="BMAP_ANCHOR_TOP_LEFT" :offset="{width:30,height:90}"></bm-city-list>
 39 |   </baidu-map>
 40 | </template>
 41 | 
 42 | <script>
 43 | // import axios from 'axios'
 44 | export default {
 45 |   props: ["items"],
 46 |   data() {
 47 |     return {
 48 |       // items: this.data,
 49 |       center: { lng: 103.710338, lat: 31.812342 },
 50 |       zoom: 5
 51 |     };
 52 |   },
 53 |   methods: {
 54 |     infoWindowClose(index) {
 55 |       //  console.log(index)
 56 |       this.items[index].show = false;
 57 |     },
 58 |     infoWindowOpen(index) {
 59 |       // console.log(index)
 60 | 
 61 |       this.items[index].show = true;
 62 |     },
 63 |     getExactTime(time) {   
 64 |         var date = new Date(time* 1000);
 65 |         window.console.log(time)
 66 |         var year = date.getFullYear() + '-';
 67 |         var month = (date.getMonth()+1 < 10 ? '0' + (date.getMonth()+1) : date.getMonth()+1) + '-';
 68 |         var dates = (date.getDate() +1 < 10 ? '0' + date.getDate()  : date.getDate() ) ;
 69 |         // var hour = date.getHours() + ':';
 70 |         // var min = date.getMinutes() + ':';
 71 |         // var second = date.getSeconds();
 72 |         return year + month + dates  ;
 73 |     }
 74 | 
 75 |     // getData(){
 76 |     //   axios
 77 |     //   .get('https://lab.ahusmart.com/nCoV/api/detail?province=北京市')
 78 |     //   .then(response =>
 79 |     //   {this.items = response.data.results})
 80 |     // }
 81 |   }
 82 |   //   created () {
 83 |   //     this.getData()
 84 | 
 85 |   //  }
 86 | };
 87 | </script>
 88 | 
 89 | 
 90 | <style>
 91 | .map {
 92 |   width: 100%;
 93 |   height: 100%;
 94 | 
 95 |   position: absolute;
 96 | }
 97 | .el-tag {
 98 |   margin-left: 5px;
 99 | }
100 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 全国新冠病例小区分布图
  2 | 
  3 | ## 3.30 停止更新
  4 | 介于疫情有效控制，本项目数据将不再维护，特此说明
  5 | 
  6 | ## 3.16 数据更新说明 
  7 | 
  8 | 由于近期疫情得到控制，新增数量大大减少，本项目数据计划于3月底停止更新数据，届时所有数据将打包成csv格式上传。
  9 | 
 10 | | 更新日期 | 累计总数 |
 11 | | :------------: | :---------: |
 12 | |2020.3.16 | 7490 |
 13 | |2020.3.8 | 7459 |
 14 | |2020.3.4 | 7453 |
 15 | |2020.2.29 | 7355 |
 16 | |2020.2.28 | 7336 |
 17 | |2020.2.26 | 6949 |
 18 | |2020.2.25 | 6937 |
 19 | |2020.2.23 | 6934 |
 20 | |2020.2.22 | 6917 |
 21 | |2020.2.20 | 6828 |
 22 | |2020.2.18 | 6748 |
 23 | |2020.2.17 | 6688 |
 24 | |2020.2.16 | 6592 |
 25 | 
 26 | 
 27 | ## UPDATE 2020.2.20
 28 | 
 29 | API接口增加 `updateTime` 消息更新时间字段，全国疫情情况及新闻等相关接口请参考[完整API](https://github.com/hack-fang/nCov/blob/master/API.md)
 30 | 
 31 | 
 32 | ## UPDATE 2020.2.9
 33 | 
 34 | 网页各标记点消息来源支持跳转链接，API接口增加 `sourceUrl` 来源链接字段，全国疫情情况及新闻等相关接口请参考[完整API](https://github.com/hack-fang/nCov/blob/master/API.md)
 35 | 
 36 | 
 37 | 提供全国范围内的详细数据及来源，同时开放API接口，仅可用于学术科研用途，请勿用于商业用途。可能存在定位不准确问题，烦请告知。
 38 | 
 39 | 
 40 | 致敬那些奋斗在一线的医疗人员们！
 41 | 
 42 | 
 43 | ## 预览
 44 | 
 45 | 在线预览: https://ncov.ahusmart.com/
 46 | 
 47 | ![TIM截图20200208115710.png](https://i.loli.net/2020/02/08/WXCkU4YZtjQobsr.png)
 48 | 
 49 | 
 50 | 
 51 | ## 项目依赖
 52 | 
 53 | - vuejs
 54 | - element-ui
 55 | - vue-baidu-map
 56 | - axios
 57 | - element-china-area-data
 58 | 
 59 | ## 数据来源
 60 | 
 61 | 均来源自各大省市卫生健康委员会及官方媒体通道，不收录未经官方证实的来源消息。
 62 | 
 63 | 
 64 | ## 配置
 65 | 
 66 | 首先需要申请百度地图密钥(似乎不需要也可以运行,可以先不申请)
 67 | 
 68 | ### 百度地图AK
 69 | 
 70 | - 引用地图需要百度地图密钥，[申请链接](http://lbsyun.baidu.com/apiconsole/key)
 71 | 
 72 | - 将申请到的`ak`复制粘贴到`main.js`中相应的位置
 73 | 
 74 | ### npm安装依赖编译运行
 75 | 
 76 | ```bash
 77 | # 安装依赖
 78 | npm install
 79 | # 开发环境编译
 80 | npm run serve
 81 | # 生产环境编译
 82 | npm run build
 83 | ```
 84 | 
 85 | 
 86 | ## API 接口
 87 | 
 88 | 目前带宽为10Mbps,不针对IP进行限速，请不要滥用接口。
 89 | 
 90 | 
 91 | ### 请求接口 https://lab.ahusmart.com/nCoV/api/detail
 92 | 
 93 | 返回指定区域的详细信息
 94 | 
 95 | 提供三种组合方式，分别查询:
 96 | -  全国所有数据
 97 |     - https://lab.ahusmart.com/nCoV/api/detail
 98 | -  指定省份或直辖市所有的数据
 99 |     - https://lab.ahusmart.com/nCoV/api/detail?province=上海市
100 | -  指定城市所有的数据
101 |     - https://lab.ahusmart.com/nCoV/api/detail?city=武汉市
102 | -  指定三级行政机构(即xx省xx市xx区)所有的数据
103 |     - https://lab.ahusmart.com/nCoV/api/detail?city=合肥市&county=蜀山区
104 | 
105 | 
106 | |  变量名 |  注释 |
107 | | :------------: | :------------: |
108 | | province  | 省份名或直辖市名如: 上海市 西藏自治区 湖北省 |
109 | | city  | 二级行政区域，如 武汉市 浦东新区  |
110 | | county  | 三级行政区域 如 蜀山区(合肥市) |
111 | 
112 | ### 返回数据 
113 | 
114 | 
115 | |  变量名 |  注释 |
116 | | :------------: | :------------: |
117 | |  country |  中国 |
118 | |  province | 省份名  |
119 | | city  |  城市名 |
120 | |  county |  	三级行政区域名  |
121 | | detail |  详细地址 |
122 | | position  | 百度地图经纬度坐标  |
123 | | infoSource  | 数据来源  |
124 | | sourceUrl  | 数据来源链接  |
125 | | updateTime  | 更新时间，unxi秒形式  |
126 | |  show |   	可忽略 |
127 | 
128 | 
129 | 
130 | ### 实例 
131 | 
132 | #### 请求
133 | 
134 | - Method: **GET**
135 | - URL:```https://lab.ahusmart.com/nCoV/api/detail?city=合肥市&county=庐阳区```
136 | 
137 | 
138 | #### 响应
139 | 
140 | - Body
141 | 
142 | ```json
143 | {
144 |     "results": [
145 |         {
146 |             "country": "中国",
147 |             "province": "安徽省",
148 |             "city": "合肥市",
149 |             "county": "庐阳区",
150 |             "detail": "庐阳区古城新村",
151 |             "position": [
152 |                 117.26218089149292,
153 |                 31.88207377533681
154 |             ],
155 |             "infoSource": "合肥市卫生健康委员会",
156 |             "sourceUrl": "http://wjw.hefei.gov.cn/ztzl/xxgzbdgrdfyyqfk/xxfb/17723463.html",
157 |             "updateTime": 1580832000,
158 |             "show": false
159 |         },
160 |         {
161 |             "country": "中国",
162 |             "province": "安徽省",
163 |             "city": "合肥市",
164 |             "county": "庐阳区",
165 |             "detail": "庐阳区探矿厂宿舍",
166 |             "position": [
167 |                 117.29257592382478,
168 |                 31.9112576875506
169 |             ],
170 |             "infoSource": "合肥市卫生健康委员会",
171 |             "sourceUrl": "http://wjw.hefei.gov.cn/ztzl/xxgzbdgrdfyyqfk/xxfb/17723463.html",
172 |             "updateTime": 1580832000,
173 |             "show": false
174 |         },
175 |         {
176 |             "country": "中国",
177 |             "province": "安徽省",
178 |             "city": "合肥市",
179 |             "county": "庐阳区",
180 |             "detail": "庐阳区杏林花园南区",
181 |             "position": [
182 |                 117.29385649526486,
183 |                 31.900067994996597
184 |             ],
185 |             "infoSource": "合肥市卫生健康委员会",
186 |             "sourceUrl": "http://wjw.hefei.gov.cn/ztzl/xxgzbdgrdfyyqfk/xxfb/17723463.html",
187 |             "updateTime": 1580832000,
188 |             "show": false
189 |         },
190 |         ....
191 |     ],
192 |     "success": true
193 | }
194 | ```
195 | 
196 | 
197 | 
198 | 
199 | 
200 | 
201 | 


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