diff --git a/public/index.html b/public/index.html index 9284847..0ef2ae7 100644 --- a/public/index.html +++ b/public/index.html @@ -1,18 +1,28 @@ - - - - - - <%= htmlWebpackPlugin.options.title %> - - - - -
- - - + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/src/api/address.js b/src/api/address.js new file mode 100644 index 0000000..5d91319 --- /dev/null +++ b/src/api/address.js @@ -0,0 +1,36 @@ +import http from '@/utils/http' + +// * 获取实有地址 +/** + * + * @param {*} params 实有地址分页参数 + * @returns 服务器响应数据 + */ +export const getRealAddressAPI = (params) => { + return http.get('/sheyang/page', { params }) +} + +// * 获取人口 +export const getPeopleAPI = (params) => { + return http.get(`/sheyang/rkdz`, { params }) +} + +// * 获取单位 +export const getUnitsAPI = (params) => { + return http.get(`/sheyang/dwdz`, { params }) +} + +// * 获取接警地信息 +export const getAlarmAddressAPI = (params) => { + return http.get('JJxx/page', { params }) +} + +// * 根据接警编号获取接警信息 +export const getAlarmInfoAPI = (params) => { + return http.get('JJxx/jjdbh', { params }) +} + +// * 获取感知设备 +export const getPerceptionDeviceAPI = (params) => { + return http.get('sheBei/page', { params }) +} diff --git a/src/utils/facility.js b/src/api/facility.js similarity index 76% rename from src/utils/facility.js rename to src/api/facility.js index 1b9b706..bb594a6 100644 --- a/src/utils/facility.js +++ b/src/api/facility.js @@ -1,5 +1,6 @@ -import request from './request' +import request from '../utils/request' import { getToken } from '@/utils/token' +import axios from 'axios' const token = getToken() @@ -24,7 +25,7 @@ export const getDeviceListAPI = (params) => { // * 获取视频列表 export const getVideoListAPI = (channel) => { return request.get( - `/api/v1/stream/start?serial=${'32092400002005063063'}&channel=${channel}&timeout=${500}&token=${token}` + `/api/v1/stream/start?serial=${'32092400002005063063'}&channel=${channel}&timeout=${500}&check_channel_status=${true}&token=${token}` ) } @@ -32,12 +33,6 @@ export const getVideoListAPI = (channel) => { export const logoutAPI = () => { return request.get('/api/v1/logout') } -// // * 获取视频列表 -// export const getVideoChannelAPI = () => { -// return request.get( -// `/api/v1/stream/start?serial=${'32092400002005063063'}&code=${'32092400001310088291'}&token=${getToken()}` -// ) -// } // * 关闭视频流 export const getCloseVideoAPI = (channel) => { @@ -45,3 +40,8 @@ export const getCloseVideoAPI = (channel) => { `/api/v1/stream/stop?serial=${'32092400002005063063'}&channel=${channel}&token=${token}` ) } + +// * gbs数据发送 +export const postGbsDataAPI = (data) => { + return axios.post('http://50.146.63.43:12000/live', data) +} diff --git a/src/api/resource.js b/src/api/resource.js new file mode 100644 index 0000000..729f8de --- /dev/null +++ b/src/api/resource.js @@ -0,0 +1,6 @@ +import server from '@/utils/server' + +// * 点聚合数据懒加载 +export const postResources = (params) => { + return server.post('/bigscreen/overviewResources', params) +} diff --git a/src/assets/background-img/icon_address_blue.png b/src/assets/background-img/icon_address_blue.png new file mode 100644 index 0000000..c2156d2 Binary files /dev/null and b/src/assets/background-img/icon_address_blue.png differ diff --git a/src/assets/background-img/icon_address_red.png b/src/assets/background-img/icon_address_red.png new file mode 100644 index 0000000..eb8503a Binary files /dev/null and b/src/assets/background-img/icon_address_red.png differ diff --git a/src/assets/background-img/icon_alarm_red.png b/src/assets/background-img/icon_alarm_red.png new file mode 100644 index 0000000..0e454e2 Binary files /dev/null and b/src/assets/background-img/icon_alarm_red.png differ diff --git a/src/assets/background-img/icon_company_blue.png b/src/assets/background-img/icon_company_blue.png new file mode 100644 index 0000000..794d9c0 Binary files /dev/null and b/src/assets/background-img/icon_company_blue.png differ diff --git a/src/assets/background-img/icon_company_red.png b/src/assets/background-img/icon_company_red.png new file mode 100644 index 0000000..41053ae Binary files /dev/null and b/src/assets/background-img/icon_company_red.png differ diff --git a/src/assets/background-img/icon_company_yellow.png b/src/assets/background-img/icon_company_yellow.png new file mode 100644 index 0000000..4c8f9a8 Binary files /dev/null and b/src/assets/background-img/icon_company_yellow.png differ diff --git a/src/assets/background-img/icon_device_yellow.png b/src/assets/background-img/icon_device_yellow.png new file mode 100644 index 0000000..adebf6e Binary files /dev/null and b/src/assets/background-img/icon_device_yellow.png differ diff --git a/src/assets/background-img/icon_top1.png b/src/assets/background-img/icon_top1.png new file mode 100644 index 0000000..bc74061 Binary files /dev/null and b/src/assets/background-img/icon_top1.png differ diff --git a/src/assets/background-img/icon_top3.png b/src/assets/background-img/icon_top3.png new file mode 100644 index 0000000..21888b2 Binary files /dev/null and b/src/assets/background-img/icon_top3.png differ diff --git a/src/assets/logo.png b/src/assets/logo.png deleted file mode 100644 index f3d2503..0000000 Binary files a/src/assets/logo.png and /dev/null differ diff --git a/src/assets/main.scss b/src/assets/main.scss index 56712d6..ae90676 100644 --- a/src/assets/main.scss +++ b/src/assets/main.scss @@ -2,4 +2,34 @@ html,body { margin: 0; padding: 0; box-sizing: border-box; + font-size: 12px; +} +// * 房屋地址相关样式 +.house{ + display: flex; + flex-direction: column; + justify-content: space-around; + width: 15vw; + height: 30vh; + font-size: 1rem; + color: #fff; + + .house-item { + padding: 5px; + display: flex; + flex: 1; + justify-content: space-between; + align-items: center; + } + .state-a{ + border-radius: 5px 5px 0 0; + background-color: rgb(240, 156, 156); + } + .state-b{ + background-color: rgb(250, 114, 3); + } + .state-c{ + border-radius: 0 0 5px 5px; + background-color: rgb(0, 119, 255); + } } \ No newline at end of file diff --git a/src/assets/首页_slices/bg_1.png b/src/assets/首页_slices/bg_1.png new file mode 100644 index 0000000..d4fc8f9 Binary files /dev/null and b/src/assets/首页_slices/bg_1.png differ diff --git a/src/assets/首页_slices/bg_1@2x.png b/src/assets/首页_slices/bg_1@2x.png new file mode 100644 index 0000000..9877d1c Binary files /dev/null and b/src/assets/首页_slices/bg_1@2x.png differ diff --git a/src/assets/首页_slices/bg_4.png b/src/assets/首页_slices/bg_4.png new file mode 100644 index 0000000..d1b97d9 Binary files /dev/null and b/src/assets/首页_slices/bg_4.png differ diff --git a/src/assets/首页_slices/bg_4@2x.png b/src/assets/首页_slices/bg_4@2x.png new file mode 100644 index 0000000..512e273 Binary files /dev/null and b/src/assets/首页_slices/bg_4@2x.png differ diff --git a/src/assets/首页_slices/bg_5.png b/src/assets/首页_slices/bg_5.png new file mode 100644 index 0000000..5d353b8 Binary files /dev/null and b/src/assets/首页_slices/bg_5.png differ diff --git a/src/assets/首页_slices/bg_5@2x.png b/src/assets/首页_slices/bg_5@2x.png new file mode 100644 index 0000000..6c875c7 Binary files /dev/null and b/src/assets/首页_slices/bg_5@2x.png differ diff --git a/src/assets/首页_slices/bg_人员_hover.png b/src/assets/首页_slices/bg_人员_hover.png new file mode 100644 index 0000000..2a35145 Binary files /dev/null and b/src/assets/首页_slices/bg_人员_hover.png differ diff --git a/src/assets/首页_slices/bg_人员_hover@2x.png b/src/assets/首页_slices/bg_人员_hover@2x.png new file mode 100644 index 0000000..35ff13d Binary files /dev/null and b/src/assets/首页_slices/bg_人员_hover@2x.png differ diff --git a/src/assets/首页_slices/bg_人员_nor.png b/src/assets/首页_slices/bg_人员_nor.png new file mode 100644 index 0000000..f4508f7 Binary files /dev/null and b/src/assets/首页_slices/bg_人员_nor.png differ diff --git a/src/assets/首页_slices/bg_人员_nor@2x.png b/src/assets/首页_slices/bg_人员_nor@2x.png new file mode 100644 index 0000000..e993937 Binary files /dev/null and b/src/assets/首页_slices/bg_人员_nor@2x.png differ diff --git a/src/assets/首页_slices/bg_信息.png b/src/assets/首页_slices/bg_信息.png new file mode 100644 index 0000000..e05904c Binary files /dev/null and b/src/assets/首页_slices/bg_信息.png differ diff --git a/src/assets/首页_slices/bg_信息@2x.png b/src/assets/首页_slices/bg_信息@2x.png new file mode 100644 index 0000000..4f448f9 Binary files /dev/null and b/src/assets/首页_slices/bg_信息@2x.png differ diff --git a/src/assets/首页_slices/bg_实有人口.png b/src/assets/首页_slices/bg_实有人口.png new file mode 100644 index 0000000..2c4c4b5 Binary files /dev/null and b/src/assets/首页_slices/bg_实有人口.png differ diff --git a/src/assets/首页_slices/bg_实有人口@2x.png b/src/assets/首页_slices/bg_实有人口@2x.png new file mode 100644 index 0000000..027f15a Binary files /dev/null and b/src/assets/首页_slices/bg_实有人口@2x.png differ diff --git a/src/assets/首页_slices/bg_实有单位.png b/src/assets/首页_slices/bg_实有单位.png new file mode 100644 index 0000000..ef25a46 Binary files /dev/null and b/src/assets/首页_slices/bg_实有单位.png differ diff --git a/src/assets/首页_slices/bg_实有单位@2x.png b/src/assets/首页_slices/bg_实有单位@2x.png new file mode 100644 index 0000000..877a002 Binary files /dev/null and b/src/assets/首页_slices/bg_实有单位@2x.png differ diff --git a/src/assets/首页_slices/bg_实有房屋.png b/src/assets/首页_slices/bg_实有房屋.png new file mode 100644 index 0000000..d3ead3b Binary files /dev/null and b/src/assets/首页_slices/bg_实有房屋.png differ diff --git a/src/assets/首页_slices/bg_实有房屋@2x.png b/src/assets/首页_slices/bg_实有房屋@2x.png new file mode 100644 index 0000000..b45b6d5 Binary files /dev/null and b/src/assets/首页_slices/bg_实有房屋@2x.png differ diff --git a/src/assets/首页_slices/bg_导航.png b/src/assets/首页_slices/bg_导航.png new file mode 100644 index 0000000..e3b4d2b Binary files /dev/null and b/src/assets/首页_slices/bg_导航.png differ diff --git a/src/assets/首页_slices/bg_导航@2x.png b/src/assets/首页_slices/bg_导航@2x.png new file mode 100644 index 0000000..5e7684d Binary files /dev/null and b/src/assets/首页_slices/bg_导航@2x.png differ diff --git a/src/assets/首页_slices/bg_流动人口.png b/src/assets/首页_slices/bg_流动人口.png new file mode 100644 index 0000000..6ddb9ae Binary files /dev/null and b/src/assets/首页_slices/bg_流动人口.png differ diff --git a/src/assets/首页_slices/bg_流动人口@2x.png b/src/assets/首页_slices/bg_流动人口@2x.png new file mode 100644 index 0000000..546edb2 Binary files /dev/null and b/src/assets/首页_slices/bg_流动人口@2x.png differ diff --git a/src/assets/首页_slices/bg_涉海_1.png b/src/assets/首页_slices/bg_涉海_1.png new file mode 100644 index 0000000..41ea24a Binary files /dev/null and b/src/assets/首页_slices/bg_涉海_1.png differ diff --git a/src/assets/首页_slices/bg_涉海_1@2x.png b/src/assets/首页_slices/bg_涉海_1@2x.png new file mode 100644 index 0000000..fc30770 Binary files /dev/null and b/src/assets/首页_slices/bg_涉海_1@2x.png differ diff --git a/src/assets/首页_slices/bg_涉海_2.png b/src/assets/首页_slices/bg_涉海_2.png new file mode 100644 index 0000000..df85d62 Binary files /dev/null and b/src/assets/首页_slices/bg_涉海_2.png differ diff --git a/src/assets/首页_slices/bg_涉海_2@2x.png b/src/assets/首页_slices/bg_涉海_2@2x.png new file mode 100644 index 0000000..5e2fa01 Binary files /dev/null and b/src/assets/首页_slices/bg_涉海_2@2x.png differ diff --git a/src/assets/首页_slices/bg_涉海_3.png b/src/assets/首页_slices/bg_涉海_3.png new file mode 100644 index 0000000..268170c Binary files /dev/null and b/src/assets/首页_slices/bg_涉海_3.png differ diff --git a/src/assets/首页_slices/bg_涉海_3@2x.png b/src/assets/首页_slices/bg_涉海_3@2x.png new file mode 100644 index 0000000..cf445be Binary files /dev/null and b/src/assets/首页_slices/bg_涉海_3@2x.png differ diff --git a/src/assets/首页_slices/bg_涉海_4.png b/src/assets/首页_slices/bg_涉海_4.png new file mode 100644 index 0000000..32d557b Binary files /dev/null and b/src/assets/首页_slices/bg_涉海_4.png differ diff --git a/src/assets/首页_slices/bg_涉海_4@2x.png b/src/assets/首页_slices/bg_涉海_4@2x.png new file mode 100644 index 0000000..096a531 Binary files /dev/null and b/src/assets/首页_slices/bg_涉海_4@2x.png differ diff --git a/src/assets/首页_slices/bg_警力分布_hover.png b/src/assets/首页_slices/bg_警力分布_hover.png new file mode 100644 index 0000000..4fef261 Binary files /dev/null and b/src/assets/首页_slices/bg_警力分布_hover.png differ diff --git a/src/assets/首页_slices/bg_警力分布_hover@2x.png b/src/assets/首页_slices/bg_警力分布_hover@2x.png new file mode 100644 index 0000000..4718a7a Binary files /dev/null and b/src/assets/首页_slices/bg_警力分布_hover@2x.png differ diff --git a/src/assets/首页_slices/bg_警力分布_nor.png b/src/assets/首页_slices/bg_警力分布_nor.png new file mode 100644 index 0000000..e73747d Binary files /dev/null and b/src/assets/首页_slices/bg_警力分布_nor.png differ diff --git a/src/assets/首页_slices/bg_警力分布_nor@2x.png b/src/assets/首页_slices/bg_警力分布_nor@2x.png new file mode 100644 index 0000000..787e793 Binary files /dev/null and b/src/assets/首页_slices/bg_警力分布_nor@2x.png differ diff --git a/src/assets/首页_slices/bg_重点人员.png b/src/assets/首页_slices/bg_重点人员.png new file mode 100644 index 0000000..a41df72 Binary files /dev/null and b/src/assets/首页_slices/bg_重点人员.png differ diff --git a/src/assets/首页_slices/bg_重点人员@2x.png b/src/assets/首页_slices/bg_重点人员@2x.png new file mode 100644 index 0000000..d145e2d Binary files /dev/null and b/src/assets/首页_slices/bg_重点人员@2x.png differ diff --git a/src/assets/首页_slices/icon_close.png b/src/assets/首页_slices/icon_close.png new file mode 100644 index 0000000..d3b078d Binary files /dev/null and b/src/assets/首页_slices/icon_close.png differ diff --git a/src/assets/首页_slices/icon_close@2x.png b/src/assets/首页_slices/icon_close@2x.png new file mode 100644 index 0000000..62f8007 Binary files /dev/null and b/src/assets/首页_slices/icon_close@2x.png differ diff --git a/src/assets/首页_slices/icon_company_blue(1).png b/src/assets/首页_slices/icon_company_blue(1).png new file mode 100644 index 0000000..a1ad01a Binary files /dev/null and b/src/assets/首页_slices/icon_company_blue(1).png differ diff --git a/src/assets/首页_slices/icon_company_blue.png b/src/assets/首页_slices/icon_company_blue.png new file mode 100644 index 0000000..3eea667 Binary files /dev/null and b/src/assets/首页_slices/icon_company_blue.png differ diff --git a/src/assets/首页_slices/icon_company_blue@2x(1).png b/src/assets/首页_slices/icon_company_blue@2x(1).png new file mode 100644 index 0000000..696ee87 Binary files /dev/null and b/src/assets/首页_slices/icon_company_blue@2x(1).png differ diff --git a/src/assets/首页_slices/icon_company_blue@2x.png b/src/assets/首页_slices/icon_company_blue@2x.png new file mode 100644 index 0000000..f5822c1 Binary files /dev/null and b/src/assets/首页_slices/icon_company_blue@2x.png differ diff --git a/src/assets/首页_slices/icon_company_green(1).png b/src/assets/首页_slices/icon_company_green(1).png new file mode 100644 index 0000000..12fe036 Binary files /dev/null and b/src/assets/首页_slices/icon_company_green(1).png differ diff --git a/src/assets/首页_slices/icon_company_green.png b/src/assets/首页_slices/icon_company_green.png new file mode 100644 index 0000000..c774be2 Binary files /dev/null and b/src/assets/首页_slices/icon_company_green.png differ diff --git a/src/assets/首页_slices/icon_company_green@2x(1).png b/src/assets/首页_slices/icon_company_green@2x(1).png new file mode 100644 index 0000000..35c3210 Binary files /dev/null and b/src/assets/首页_slices/icon_company_green@2x(1).png differ diff --git a/src/assets/首页_slices/icon_company_green@2x.png b/src/assets/首页_slices/icon_company_green@2x.png new file mode 100644 index 0000000..1429571 Binary files /dev/null and b/src/assets/首页_slices/icon_company_green@2x.png differ diff --git a/src/assets/首页_slices/icon_company_red(1).png b/src/assets/首页_slices/icon_company_red(1).png new file mode 100644 index 0000000..b69851b Binary files /dev/null and b/src/assets/首页_slices/icon_company_red(1).png differ diff --git a/src/assets/首页_slices/icon_company_red.png b/src/assets/首页_slices/icon_company_red.png new file mode 100644 index 0000000..82f89e6 Binary files /dev/null and b/src/assets/首页_slices/icon_company_red.png differ diff --git a/src/assets/首页_slices/icon_company_red@2x(1).png b/src/assets/首页_slices/icon_company_red@2x(1).png new file mode 100644 index 0000000..a61ba25 Binary files /dev/null and b/src/assets/首页_slices/icon_company_red@2x(1).png differ diff --git a/src/assets/首页_slices/icon_company_red@2x.png b/src/assets/首页_slices/icon_company_red@2x.png new file mode 100644 index 0000000..c8fc59d Binary files /dev/null and b/src/assets/首页_slices/icon_company_red@2x.png differ diff --git a/src/assets/首页_slices/icon_company_yellow(1).png b/src/assets/首页_slices/icon_company_yellow(1).png new file mode 100644 index 0000000..e88feb3 Binary files /dev/null and b/src/assets/首页_slices/icon_company_yellow(1).png differ diff --git a/src/assets/首页_slices/icon_company_yellow.png b/src/assets/首页_slices/icon_company_yellow.png new file mode 100644 index 0000000..fd312f0 Binary files /dev/null and b/src/assets/首页_slices/icon_company_yellow.png differ diff --git a/src/assets/首页_slices/icon_company_yellow@2x(1).png b/src/assets/首页_slices/icon_company_yellow@2x(1).png new file mode 100644 index 0000000..f90e1c0 Binary files /dev/null and b/src/assets/首页_slices/icon_company_yellow@2x(1).png differ diff --git a/src/assets/首页_slices/icon_company_yellow@2x.png b/src/assets/首页_slices/icon_company_yellow@2x.png new file mode 100644 index 0000000..76d4ca4 Binary files /dev/null and b/src/assets/首页_slices/icon_company_yellow@2x.png differ diff --git a/src/assets/首页_slices/icon_home_nor.png b/src/assets/首页_slices/icon_home_nor.png new file mode 100644 index 0000000..bce3b53 Binary files /dev/null and b/src/assets/首页_slices/icon_home_nor.png differ diff --git a/src/assets/首页_slices/icon_home_nor@2x.png b/src/assets/首页_slices/icon_home_nor@2x.png new file mode 100644 index 0000000..2f384ff Binary files /dev/null and b/src/assets/首页_slices/icon_home_nor@2x.png differ diff --git a/src/assets/首页_slices/icon_home_sel.png b/src/assets/首页_slices/icon_home_sel.png new file mode 100644 index 0000000..17980db Binary files /dev/null and b/src/assets/首页_slices/icon_home_sel.png differ diff --git a/src/assets/首页_slices/icon_home_sel@2x.png b/src/assets/首页_slices/icon_home_sel@2x.png new file mode 100644 index 0000000..c04a645 Binary files /dev/null and b/src/assets/首页_slices/icon_home_sel@2x.png differ diff --git a/src/assets/首页_slices/logo.png b/src/assets/首页_slices/logo.png new file mode 100644 index 0000000..01ea1cb Binary files /dev/null and b/src/assets/首页_slices/logo.png differ diff --git a/src/assets/首页_slices/logo@2x.png b/src/assets/首页_slices/logo@2x.png new file mode 100644 index 0000000..e1bb562 Binary files /dev/null and b/src/assets/首页_slices/logo@2x.png differ diff --git a/src/assets/首页_slices/num_1.png b/src/assets/首页_slices/num_1.png new file mode 100644 index 0000000..fe314b3 Binary files /dev/null and b/src/assets/首页_slices/num_1.png differ diff --git a/src/assets/首页_slices/num_1@2x.png b/src/assets/首页_slices/num_1@2x.png new file mode 100644 index 0000000..da3b1e3 Binary files /dev/null and b/src/assets/首页_slices/num_1@2x.png differ diff --git a/src/assets/首页_slices/num_2.png b/src/assets/首页_slices/num_2.png new file mode 100644 index 0000000..c7f6a69 Binary files /dev/null and b/src/assets/首页_slices/num_2.png differ diff --git a/src/assets/首页_slices/num_2@2x.png b/src/assets/首页_slices/num_2@2x.png new file mode 100644 index 0000000..29ed20d Binary files /dev/null and b/src/assets/首页_slices/num_2@2x.png differ diff --git a/src/assets/首页_slices/num_3.png b/src/assets/首页_slices/num_3.png new file mode 100644 index 0000000..01b9f34 Binary files /dev/null and b/src/assets/首页_slices/num_3.png differ diff --git a/src/assets/首页_slices/num_3@2x.png b/src/assets/首页_slices/num_3@2x.png new file mode 100644 index 0000000..da1c323 Binary files /dev/null and b/src/assets/首页_slices/num_3@2x.png differ diff --git a/src/assets/首页_slices/分组备份.png b/src/assets/首页_slices/分组备份.png new file mode 100644 index 0000000..ef9f4e2 Binary files /dev/null and b/src/assets/首页_slices/分组备份.png differ diff --git a/src/assets/首页_slices/分组备份@2x.png b/src/assets/首页_slices/分组备份@2x.png new file mode 100644 index 0000000..c04a645 Binary files /dev/null and b/src/assets/首页_slices/分组备份@2x.png differ diff --git a/src/assets/首页_slices/底座.png b/src/assets/首页_slices/底座.png new file mode 100644 index 0000000..829a4e3 Binary files /dev/null and b/src/assets/首页_slices/底座.png differ diff --git a/src/assets/首页_slices/底座@2x.png b/src/assets/首页_slices/底座@2x.png new file mode 100644 index 0000000..fe439d7 Binary files /dev/null and b/src/assets/首页_slices/底座@2x.png differ diff --git a/src/assets/首页_slices/撒点_线路.png b/src/assets/首页_slices/撒点_线路.png new file mode 100644 index 0000000..409b5d3 Binary files /dev/null and b/src/assets/首页_slices/撒点_线路.png differ diff --git a/src/assets/首页_slices/撒点_线路@2x.png b/src/assets/首页_slices/撒点_线路@2x.png new file mode 100644 index 0000000..3e50187 Binary files /dev/null and b/src/assets/首页_slices/撒点_线路@2x.png differ diff --git a/src/assets/首页_slices/撒点_起点.png b/src/assets/首页_slices/撒点_起点.png new file mode 100644 index 0000000..0764d7e Binary files /dev/null and b/src/assets/首页_slices/撒点_起点.png differ diff --git a/src/assets/首页_slices/撒点_起点@2x.png b/src/assets/首页_slices/撒点_起点@2x.png new file mode 100644 index 0000000..0247d63 Binary files /dev/null and b/src/assets/首页_slices/撒点_起点@2x.png differ diff --git a/src/assets/首页_slices/编组 20.png b/src/assets/首页_slices/编组 20.png new file mode 100644 index 0000000..278839f Binary files /dev/null and b/src/assets/首页_slices/编组 20.png differ diff --git a/src/assets/首页_slices/编组 20@2x.png b/src/assets/首页_slices/编组 20@2x.png new file mode 100644 index 0000000..611ef67 Binary files /dev/null and b/src/assets/首页_slices/编组 20@2x.png differ diff --git a/src/components/PopupContainer.vue b/src/components/PopupContainer.vue new file mode 100644 index 0000000..02c8df8 --- /dev/null +++ b/src/components/PopupContainer.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/src/main.js b/src/main.js index 7537c80..be0ccb2 100644 --- a/src/main.js +++ b/src/main.js @@ -2,9 +2,12 @@ import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' +import ElementUI from 'element-ui' import '../src/assets/main.scss' +import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false +Vue.use(ElementUI) new Vue({ router, diff --git a/src/router/index.js b/src/router/index.js index 1d688b8..8e67419 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -6,8 +6,36 @@ Vue.use(VueRouter) const routes = [ { path: '/', - name: 'map', - component: () => import('@/views/MinedataMap.vue') + name: 'layout', + redirect: '/home/coastalMap', + component: () => import('@/views/coastalMap/index.vue') + // { + // path: '/map', + // name: 'map', + // component: () => import('@/views/map/MapMain.vue') + // }, + }, + { + path: '/home', + name: 'home', + component: () => import('@/views/home/index.vue'), + children: [ + { + path: 'coastalMap', + name: 'coastalMap', + component: () => import('@/views/coastalMap/index.vue') + }, + { + path: 'videoMonitor', + name: 'videoMonitor', + component: () => import('@/views/videoMonitor/index.vue') + }, + { + path: 'sensingDevice', + name: 'sensingDevice', + component: () => import('@/views/sensingDevice/index.vue') + } + ] } ] diff --git a/src/store/index.js b/src/store/index.js index a82f3e1..aeae612 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,12 +1,11 @@ -import Vue from "vue"; -import Vuex from "vuex"; +import Vue from 'vue' +import Vuex from 'vuex' +import device from './modules/device' -Vue.use(Vuex); +Vue.use(Vuex) export default new Vuex.Store({ - state: {}, - getters: {}, - mutations: {}, - actions: {}, - modules: {}, -}); + modules: { + device + } +}) diff --git a/src/store/modules/device.js b/src/store/modules/device.js new file mode 100644 index 0000000..735449f --- /dev/null +++ b/src/store/modules/device.js @@ -0,0 +1,37 @@ +// +import { getDeviceListAPI } from '@/api/facility' +import { setDeviceLatlng } from '@/utils/latlng' +export default { + namespaced: true, + state() { + return { + // * 监控视频数据 + channelData: [], + // * 监控视频数量 + channelCount: 0 + } + }, + mutations: { + // * 存储地址经纬度信息 + setVideoData(state, newValue) { + state.channelData = newValue.channelData + state.channelCount = newValue.channelCount + console.log(newValue, 'store 中的监控数据') + } + }, + actions: { + // * 获取设备列表 + async getVideoData(context, params) { + const res = await getDeviceListAPI(params) + const channels = res.ChannelList.filter((item) => item.Latitude !== 0) + const channel = { + channelData: channels, + channelCount: res.ChannelCount + } + // * 存储监控设备列表 + setDeviceLatlng(channel) + context.commit('setVideoData', channel) + } + }, + getters: {} +} diff --git a/src/utils/bus.js b/src/utils/bus.js new file mode 100644 index 0000000..1725d81 --- /dev/null +++ b/src/utils/bus.js @@ -0,0 +1,4 @@ +// * 事件总线 +import Vue from 'vue' +const bus = new Vue() +export default bus diff --git a/src/utils/controlLayer.js b/src/utils/controlLayer.js new file mode 100644 index 0000000..a25f56e --- /dev/null +++ b/src/utils/controlLayer.js @@ -0,0 +1,61 @@ +// TODO 封装控制图层的方法 +export const onShowLayer = (minemap, value, label) => { + console.log(minemap, value, label) + if (minemap && value) { + // * 监控设备图层显示 + if (minemap.getLayer('device-points') && label === '监控') { + minemap.setLayoutProperty('device-points', 'visibility', 'visible') + } + // * 地址相关图层显示 + if (minemap.getLayer('address-points') && label === '房屋') { + minemap.setLayoutProperty('address-points', 'visibility', 'visible') + } + // * 接警相关图层显示 + if (minemap.getLayer('alarm-points') && label === '接警') { + minemap.setLayoutProperty('alarm-points', 'visibility', 'visible') + } + // * 感知设备图层显示 + if (minemap.getLayer('perception-points') && label === '感知') { + minemap.setLayoutProperty('perception-points', 'visibility', 'visible') + } + } +} + +export const onHideLayer = (minemap, value, label) => { + if (minemap && !value) { + // * 监控设备图层隐藏 + if (minemap.getLayer('device-points') && label === '监控') { + minemap.setLayoutProperty('device-points', 'visibility', 'none') + } + // * 地址相关图层隐藏 + if (minemap.getLayer('address-points') && label === '房屋') { + minemap.setLayoutProperty('address-points', 'visibility', 'none') + } + // * 接警相关图层隐藏 + if (minemap.getLayer('alarm-points') && label === '接警') { + minemap.setLayoutProperty('alarm-points', 'visibility', 'none') + } + // * 感知设备图层隐藏 + if (minemap.getLayer('perception-points') && label === '感知') { + minemap.setLayoutProperty('perception-points', 'visibility', 'none') + } + } +} +// * 地图加载时将 其余图层隐藏 +export const onLoadHideLayer = (minemap) => { + if (minemap) { + console.log(minemap.getLayer('address-points'), '图层') + // * 地址相关图层隐藏 + if (minemap.getLayer('address-points')) { + minemap.setLayoutProperty('address-points', 'visibility', 'none') + } + // * 接警相关图层隐藏 + if (minemap.getLayer('alarm-points')) { + minemap.setLayoutProperty('alarm-points', 'visibility', 'none') + } + // * 感知设备图层隐藏 + if (minemap.getLayer('perception-points')) { + minemap.setLayoutProperty('perception-points', 'visibility', 'none') + } + } +} diff --git a/src/utils/coordinate.js b/src/utils/coordinate.js new file mode 100644 index 0000000..34262d6 --- /dev/null +++ b/src/utils/coordinate.js @@ -0,0 +1,70 @@ +// TODO 坐标转换 +const x_PI = (3.14159265358979324 * 3000.0) / 180.0 +const PI = 3.1415926535897932384626 +const a = 6378245.0 +const ee = 0.00669342162296594323 + +/** + * 判断是否在国内，不在国内则不偏移 + * @param {*} lng 经度 + * @param {*} lat 纬度 + */ +const outOfChina = (lng, lat) => { + return ( + lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271 || false + ) +} + +/** + * 经度转换 + * @param {Number} lng + * @param {Number} lat + */ +function transformlat(lng, lat) { + let ret = + -100.0 + + 2.0 * lng + + 3.0 * lat + + 0.2 * lat * lat + + 0.1 * lng * lat + + 0.2 * Math.sqrt(Math.abs(lng)) + ret += + ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * + 2.0) / + 3.0 + ret += + ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / + 3.0 + ret += + ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * + 2.0) / + 3.0 + return ret +} + +/** + * 纬度转换 + * @param {Number} lng 经度 + * @param {Number} lat 纬度 + */ +function transformlng(lng, lat) { + let ret = + 300.0 + + lng + + 2.0 * lat + + 0.1 * lng * lng + + 0.1 * lng * lat + + 0.1 * Math.sqrt(Math.abs(lng)) + ret += + ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * + 2.0) / + 3.0 + ret += + ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / + 3.0 + ret += + ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * + 2.0) / + 3.0 + return ret +} diff --git a/src/utils/date.js b/src/utils/date.js new file mode 100644 index 0000000..1885ca4 --- /dev/null +++ b/src/utils/date.js @@ -0,0 +1,92 @@ +// * 封装时间函数 +export const dateFormat = (date) => { + let year = date.getFullYear() + let month = date.getMonth() + 1 + let day = date.getDate() + let hours = date.getHours() + let min = date.getMinutes() + let seconds = date.getSeconds() + // * 数字补 0 + function check(num) { + if (num < 10) { + return '0' + num + } else { + return num + } + } + // * 创建时间集合 + let timeArr = {} + let timeText = `${check(year)}年${check(month)}月${check(day)}日 ${check( + hours + )}:${check(min)}:${check(seconds)}` + let nowDate = date.getDay() + let weeks = new Array( + '星期日', + '星期一', + '星期二', + '星期三', + '星期四', + '星期五', + '星期六' + ) + let week = weeks[nowDate] + // * 判断时间段 + class TimePeriod { + constructor(hours) { + this.hours = hours + } + getState() { + return this.strategy.getState() + } + setStrategy(strategy) { + this.strategy = strategy + } + } + // * 定义策略对象 + const strategies = { + morning: { + getState() { + return '早上' + } + }, + midday: { + getState() { + return '中午' + } + }, + afternoon: { + getState() { + return '下午' + } + }, + evening: { + getState() { + return '晚上' + } + } + } + // * 定义时间分区 + const timeIntervals = { + morning: [0, 10], + midday: [11, 14], + afternoon: [15, 18], + evening: [19, 24] + } + // * 获取当前策略 + const getStrategy = (hours) => { + for (let key in timeIntervals) { + if (hours >= timeIntervals[key][0] && hours <= timeIntervals[key][1]) { + return strategies[key] + } + } + } + // * 实例化 + const timePeriod = new TimePeriod(hours) + // * 设置策略 + timePeriod.setStrategy(getStrategy(hours)) + const state = timePeriod.getState() + timeArr.timeText = timeText + timeArr.week = week + timeArr.state = state + return timeArr +} diff --git a/src/utils/http.js b/src/utils/http.js new file mode 100644 index 0000000..143f9fd --- /dev/null +++ b/src/utils/http.js @@ -0,0 +1,41 @@ +import axios from 'axios' +// import { getToken } from '@/utils/token' + +const baseURL = 'http://50.146.63.43:15000/' +// const baseURL = '' +// axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' +const http = axios.create({ + baseURL, + timeout: 30000 +}) +// todo 封装基本拦截 +// * 请求拦截器 +http.interceptors.request.use( + (config) => { + if (config) { + // config.headers['Authorization'] = 'Bearer ' + getToken() + return config + } + }, + (error) => { + return Promise.reject(error) + } +) + +// * 响应拦截器 +http.interceptors.response.use( + (response) => { + if (response.status !== 200) { + return Promise.reject(response.message) + } + return response.data + }, + (error) => { + if (axios.isCancel(error)) { + console.log(error) + } + return Promise.reject(error) + } +) + +export default http diff --git a/src/utils/latlng.js b/src/utils/latlng.js new file mode 100644 index 0000000..bbc7d41 --- /dev/null +++ b/src/utils/latlng.js @@ -0,0 +1,33 @@ +// * 定义地址经纬度 token +const ADDRESS_TOKEN = 'address_latlng' +// * 定义监控经纬度 token +const DEVICE_TOKEN = 'device_latlng' +// * 定义接警经纬度 token +const ALARM_TOKEN = 'alarm_latlng' +// TODO 存储地址经纬度信息 +export const setAddressLatlng = (latlngData) => { + localStorage.setItem(ADDRESS_TOKEN, JSON.stringify(latlngData)) +} +// TODO 获取地址经纬度信息 +export const getAddressLatlng = () => { + const result = localStorage.getItem(ADDRESS_TOKEN) + return result ? JSON.parse(result) : [] +} +// TODO 存储监控经纬度信息 +export const setDeviceLatlng = (latlngData) => { + localStorage.setItem(DEVICE_TOKEN, JSON.stringify(latlngData)) +} +// TODO 获取监控经纬度信息 +export const getDeviceLatlng = () => { + const result = localStorage.getItem(DEVICE_TOKEN) + return result ? JSON.parse(result) : [] +} +// TODO 存储接警经纬度信息 +export const setAlarmLatlng = (latlngData) => { + localStorage.setItem(ALARM_TOKEN, JSON.stringify(latlngData)) +} +// TODO 获取接警经纬度信息 +export const getAlarmLatlng = () => { + const result = localStorage.getItem(ALARM_TOKEN) + return result ? JSON.parse(result) : [] +} diff --git a/src/utils/lazy.js b/src/utils/lazy.js new file mode 100644 index 0000000..d56b142 --- /dev/null +++ b/src/utils/lazy.js @@ -0,0 +1,34 @@ +// TODO 封装懒加载方法 + +export const getGridRanges = (minemap) => { + // * 获取地图视口范围 + const bounds = minemap.getBounds() + // * 将视口范围网格化 + const gridSize = 0.01 + + const sw = bounds.getSouthWest() + const ne = bounds.getSouthEast() + + const minX = Math.floor(sw.lng / gridSize) * gridSize + const minY = Math.floor(sw.lat / gridSize) * gridSize + const maxX = Math.floor(ne.lng / gridSize) * gridSize + const maxY = Math.floor(ne.lat / gridSize) * gridSize + + const gridRanges = [] + for (let x = minX; x <= maxX; x += gridSize) { + for (let y = minY; y <= maxY; y += gridSize) { + gridRanges.push({ + minX: x, + minY: y, + maxX: x + gridSize, + maxY: y + gridSize + }) + } + } + return gridRanges +} + +// * 懒加载数据 +function lazyLoadData(){ + +} diff --git a/src/utils/point.js b/src/utils/point.js new file mode 100644 index 0000000..ae22a1a --- /dev/null +++ b/src/utils/point.js @@ -0,0 +1,407 @@ +// todo 封装点聚合图层 +import { + getAddressLatlng, + getDeviceLatlng, + getAlarmLatlng +} from '@/utils/latlng' +import bus from './bus' +// * 获取本地存储中的地址经纬度信息 +const addressData = getAddressLatlng() +// * 获取本地存储中的监控经纬度信息 +const deviceData = getDeviceLatlng() +// * 获取本地存储中的接警经纬度信息 +const alarmData = getAlarmLatlng() +// TODO 筛选地址经纬度 +const address = addressData.map((item) => ({ + type: 'Feature', + geometry: { type: 'Point', coordinates: [item.jdzb, item.cjsj] }, + properties: { + addressName: item.dzdxmc + } +})) +// TODO 筛选监控经纬度 +const device = deviceData.map((item) => ({ + type: 'Feature', + geometry: { + type: 'Point', + coordinates: [item.Longitude, item.Latitude] + }, + properties: { + channel: item.Channel, + // title: item.Name.toString() + title: item.Name, + deviceName: item.Name + } +})) +// TODO 筛选接警经纬度 +const alarm = alarmData.map((item) => ({ + geometry: { type: 'Point', coordinates: [item.xzb, item.yzb] }, + type: 'Feature' +})) +// * 监控点聚合图层数据源 +const devicePointData = { + type: 'FeatureCollection', + features: device +} +// * 地址点聚合图层数据源 +const addressPointData = { + type: 'FeatureCollection', + features: address +} +// * 接警点聚合图层数据源 +const alarmPointData = { + type: 'FeatureCollection', + features: alarm +} +// * 自定义图片 +export const addImages = (minemap) => { + // TODO 自定义监控设备图片 + minemap.loadImage( + require('@/assets/background-img/icon_company_blue.png'), + (error, image) => { + if (error) throw error + minemap.addImage('device_image', image) + } + ) + // TODO 自定义地址相关图片 + minemap.loadImage( + require('@/assets/background-img/icon_address_blue.png'), + (error, image) => { + if (error) throw error + minemap.addImage('address_image', image) + } + ) + // TODO 自定义接警相关图片 + minemap.loadImage( + require('@/assets/background-img/icon_alarm_red.png'), + (error, image) => { + if (error) throw error + minemap.addImage('alarm_image', image) + } + ) + // TODO 自定义感知设备图片 + minemap.loadImage( + require('@/assets/background-img/icon_device_yellow.png'), + (error, image) => { + if (error) throw error + minemap.addImage('perception_image', image) + } + ) +} + +// * 添加感知设备数据源 +export const addDeviceSource = (minemap, data) => { + // bus.$on('postPerception', (perception) => { + if (!data) { + return + } else { + const perceptions = data.map((item) => ({ + type: 'Feature', + geometry: { type: 'Point', coordinates: [item.sbjd, item.sbwd] }, + properties: {} + })) + // * 感知设备点聚合图层数据源 + const perceptionPointData = { + type: 'FeatureCollection', + features: perceptions + } + // * 感知设备数据源 + minemap.addSource('perception-point', { + type: 'geojson', + data: perceptionPointData, + cluster: true, + clusterMaxZoom: 15 /* 最大聚合层级 */, + clusterRadius: 50 /* 聚合半径 */ + }) + } + // }) +} + +// TODO 自定义数据源，图层引用的是这个 +export const addSources = (minemap) => { + // * 监控数据源 + minemap.addSource('device-point', { + type: 'geojson', + data: devicePointData, + cluster: true, + clusterMaxZoom: 15 /* 最大聚合层级 */, + clusterRadius: 50 /* 聚合半径 */ + }) + // * 地址数据源 + minemap.addSource('address-point', { + type: 'geojson', + data: addressPointData, + cluster: true, + clusterMaxZoom: 15 /* 最大聚合层级 */, + clusterRadius: 50 /* 聚合半径 */ + }) + // * 接警数据源 + minemap.addSource('alarm-point', { + type: 'geojson', + data: alarmPointData, + cluster: true, + clusterMaxZoom: 15 /* 最大聚合层级 */, + clusterRadius: 50 /* 聚合半径 */ + }) +} + +// * 添加非聚合图层 +export const addLayers = (minemap) => { + // TODO 监控设备非聚合图层 + minemap.addLayer({ + id: 'device-points', + type: 'symbol', + // * 图层数据源 - 可以更改数据 + source: 'device-point', + // * 图层过滤器 + filter: ['!has', 'point_count'], + // * 图层布局样式 + layout: { + 'icon-image': 'device_image', + 'icon-size': 0.5, + 'text-field': ['get', 'title'], + 'text-offset': [0, 0.6], + 'text-anchor': 'top', + 'text-size': 10, + // 'icon-allow-overlap': true, //图标允许压盖 + 'text-allow-overlap': true //图标覆盖文字允许压盖 + } + }) + // TODO 地址相关非聚合图层 + minemap.addLayer({ + id: 'address-points', + type: 'symbol', + source: 'address-point', + filter: ['!has', 'point_count'], + layout: { + 'icon-image': 'address_image', + 'icon-size': 0.5 + } + }) + // TODO 接警相关非聚合图层 + minemap.addLayer({ + id: 'alarm-points', + type: 'symbol', + source: 'alarm-point', + filter: ['!has', 'point_count'], + layout: { + 'icon-image': 'alarm_image', + 'icon-size': 0.5 + } + }) + // TODO 感知设备非聚合图层 + minemap.addLayer({ + id: 'perception-points', + type: 'symbol', + source: 'perception-point', + filter: ['!has', 'point_count'], + layout: { + 'icon-image': 'perception_image', + 'icon-size': 0.5 + } + }) + // // * 添加聚合图层 + // const outerColors = [ + // [1000, 'rgba(253, 156, 115, 0.6)'], + // [100, 'rgba(241, 211, 87, 0.6)'], + // [0, 'rgba(181, 226, 140, 0.6)'] + // ] + // outerColors.forEach(function (color, index) { + // // * 监控聚合图层 + // minemap.addLayer({ + // id: 'device-outer-cluster-' + index, + // type: 'circle', + // source: 'device-point', + // // * 图层绘制样式 + // paint: { + // // * 圆形样式 + // 'circle-color': color[1], + // // * 圆形边角 + // 'circle-radius': 18 + // }, + // filter: + // index === 0 + // ? ['>=', 'point_count', color[0]] + // : [ + // 'all', + // ['>=', 'point_count', color[0]], + // ['<', 'point_count', outerColors[index - 1][0]] + // ] + // }) + // }) + // outerColors.forEach(function (color, index) { + // // * 监控聚合图层 + // minemap.addLayer({ + // id: 'address-outer-cluster-' + index, + // type: 'circle', + // source: 'address-point', + // // * 图层绘制样式 + // paint: { + // // * 圆形样式 + // 'circle-color': color[1], + // // * 圆形边角 + // 'circle-radius': 18 + // }, + // filter: + // index === 0 + // ? ['>=', 'point_count', color[0]] + // : [ + // 'all', + // ['>=', 'point_count', color[0]], + // ['<', 'point_count', outerColors[index - 1][0]] + // ] + // }) + // }) + // outerColors.forEach(function (color, index) { + // // * 监控聚合图层 + // minemap.addLayer({ + // id: 'alarm-outer-cluster-' + index, + // type: 'circle', + // source: 'alarm-point', + // // * 图层绘制样式 + // paint: { + // // * 圆形样式 + // 'circle-color': color[1], + // // * 圆形边角 + // 'circle-radius': 18 + // }, + // filter: + // index === 0 + // ? ['>=', 'point_count', color[0]] + // : [ + // 'all', + // ['>=', 'point_count', color[0]], + // ['<', 'point_count', outerColors[index - 1][0]] + // ] + // }) + // }) + // const innerColors = [ + // [1000, 'rgba(241, 128, 23, 0.6)'], + // [100, 'rgba(240, 194, 12, 0.6)'], + // [0, 'rgba(110, 204, 57, 0.6)'] + // ] + // innerColors.forEach(function (color, index) { + // // * 监控聚合图层 + // minemap.addLayer({ + // id: 'device-inner-cluster-' + index, + // type: 'circle', + // source: 'device-point', + // paint: { + // 'circle-color': color[1], + // 'circle-radius': 15 + // }, + // filter: + // index === 0 + // ? ['>=', 'point_count', color[0]] + // : [ + // 'all', + // ['>=', 'point_count', color[0]], + // ['<', 'point_count', innerColors[index - 1][0]] + // ] + // }) + // }) + // innerColors.forEach(function (color, index) { + // // * 监控聚合图层 + // minemap.addLayer({ + // id: 'address-inner-cluster-' + index, + // type: 'circle', + // source: 'address-point', + // paint: { + // 'circle-color': color[1], + // 'circle-radius': 15 + // }, + // filter: + // index === 0 + // ? ['>=', 'point_count', color[0]] + // : [ + // 'all', + // ['>=', 'point_count', color[0]], + // ['<', 'point_count', innerColors[index - 1][0]] + // ] + // }) + // }) + // innerColors.forEach(function (color, index) { + // // * 监控聚合图层 + // minemap.addLayer({ + // id: 'alarm-inner-cluster-' + index, + // type: 'circle', + // source: 'alarm-point', + // paint: { + // 'circle-color': color[1], + // 'circle-radius': 15 + // }, + // filter: + // index === 0 + // ? ['>=', 'point_count', color[0]] + // : [ + // 'all', + // ['>=', 'point_count', color[0]], + // ['<', 'point_count', innerColors[index - 1][0]] + // ] + // }) + // }) + // // * 添加监控数量图层 + // minemap.addLayer({ + // id: 'device-count', + // type: 'symbol', + // source: 'device-point', + // layout: { + // 'text-field': '{point_count}', + // 'text-size': 8 + // }, + // paint: { + // 'text-color': 'rgba(0,0,0,.75)' + // }, + // filter: ['has', 'point_count'] + // }) + // // * 添加地址数量图层 + // minemap.addLayer({ + // id: 'address-count', + // type: 'symbol', + // source: 'address-point', + // layout: { + // 'text-field': '{point_count}', + // 'text-size': 8 + // }, + // paint: { + // 'text-color': 'rgba(0,0,0,.75)' + // }, + // filter: ['has', 'point_count'] + // }) + // // * 添加接警数量图层 + // minemap.addLayer({ + // id: 'alarm-count', + // type: 'symbol', + // source: 'alarm-point', + // layout: { + // 'text-field': '{point_count}', + // 'text-size': 8 + // }, + // paint: { + // 'text-color': 'rgba(0,0,0,.75)' + // }, + // filter: ['has', 'point_count'] + // }) +} + +// TODO 图层点击事件 +export const onClickDevice = (minemap) => { + // * 监控设备点击事件 + minemap.on('click', 'device-points', (e) => { + var features = minemap.queryRenderedFeatures(e.point, { + layers: ['device-points'] + }) + var feature = features.length > 0 ? features[0] : null + bus.$emit('deviceChannel', feature.properties) + console.log(feature.properties.channel) + }) + // * 一标三实图层点击事件 + minemap.on('click', 'address-points', (e) => { + const features = minemap.queryRenderedFeatures(e.point, { + layers: ['address-points'] + }) + const feature = features.length > 0 ? features[0] : null + // console.log(feature.properties.addressName) + bus.$emit('addressName', feature.properties.addressName) + }) +} diff --git a/src/utils/request.js b/src/utils/request.js index d4d1122..ec17d60 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -6,7 +6,7 @@ const baseURL = 'http://50.146.63.43:20000/' // axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' const request = axios.create({ baseURL, - timeout: 1000 + timeout: 5000 }) // todo 封装基本拦截 // * 请求拦截器 diff --git a/src/utils/server.js b/src/utils/server.js new file mode 100644 index 0000000..a5b54d5 --- /dev/null +++ b/src/utils/server.js @@ -0,0 +1,41 @@ +import axios from 'axios' +// import { getToken } from '@/utils/token' + +const baseURL = 'http://121.41.91.94:12524/hjapi/base' +// const baseURL = '' +// axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' +const request = axios.create({ + baseURL, + timeout: 5000 +}) +// todo 封装基本拦截 +// * 请求拦截器 +request.interceptors.request.use( + (config) => { + if (config) { + // config.headers['Authorization'] = 'Bearer ' + getToken() + return config + } + }, + (error) => { + return Promise.reject(error) + } +) + +// * 响应拦截器 +request.interceptors.response.use( + (response) => { + if (response.status !== 200) { + return Promise.reject(response.message) + } + return response.data + }, + (error) => { + if (axios.isCancel(error)) { + console.log(error) + } + return Promise.reject(error) + } +) + +export default request diff --git a/src/views/Layout/index.vue b/src/views/Layout/index.vue new file mode 100644 index 0000000..3903648 --- /dev/null +++ b/src/views/Layout/index.vue @@ -0,0 +1,101 @@ + + + + + diff --git a/src/views/MinedataMap.vue b/src/views/MinedataMap.vue deleted file mode 100644 index ac9bc2c..0000000 --- a/src/views/MinedataMap.vue +++ /dev/null @@ -1,159 +0,0 @@ - - - - - diff --git a/src/views/coastalMap/components/mapBody.vue b/src/views/coastalMap/components/mapBody.vue new file mode 100644 index 0000000..933d5b0 --- /dev/null +++ b/src/views/coastalMap/components/mapBody.vue @@ -0,0 +1,65 @@ + + + diff --git a/src/views/coastalMap/components/policeSpread.vue b/src/views/coastalMap/components/policeSpread.vue new file mode 100644 index 0000000..f7f98c7 --- /dev/null +++ b/src/views/coastalMap/components/policeSpread.vue @@ -0,0 +1,21 @@ + + + + + + diff --git a/src/views/coastalMap/components/policeStatu.vue b/src/views/coastalMap/components/policeStatu.vue new file mode 100644 index 0000000..3b7da25 --- /dev/null +++ b/src/views/coastalMap/components/policeStatu.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/coastalMap/components/priority.vue b/src/views/coastalMap/components/priority.vue new file mode 100644 index 0000000..15f4f64 --- /dev/null +++ b/src/views/coastalMap/components/priority.vue @@ -0,0 +1,47 @@ + + + + + + diff --git a/src/views/coastalMap/components/resource.vue b/src/views/coastalMap/components/resource.vue new file mode 100644 index 0000000..4759565 --- /dev/null +++ b/src/views/coastalMap/components/resource.vue @@ -0,0 +1,21 @@ + + + + diff --git a/src/views/coastalMap/components/seaElement.vue b/src/views/coastalMap/components/seaElement.vue new file mode 100644 index 0000000..bff27a0 --- /dev/null +++ b/src/views/coastalMap/components/seaElement.vue @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/views/coastalMap/index.vue b/src/views/coastalMap/index.vue new file mode 100644 index 0000000..4ba559c --- /dev/null +++ b/src/views/coastalMap/index.vue @@ -0,0 +1,171 @@ + + + diff --git a/src/views/home/index.vue b/src/views/home/index.vue new file mode 100644 index 0000000..eb7a7c2 --- /dev/null +++ b/src/views/home/index.vue @@ -0,0 +1,99 @@ + + + diff --git a/src/views/map/MapMain.vue b/src/views/map/MapMain.vue new file mode 100644 index 0000000..36c9e3e --- /dev/null +++ b/src/views/map/MapMain.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/views/map/components/MapCheck.vue b/src/views/map/components/MapCheck.vue new file mode 100644 index 0000000..1eee48d --- /dev/null +++ b/src/views/map/components/MapCheck.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/src/views/map/components/MapContainer.vue b/src/views/map/components/MapContainer.vue new file mode 100644 index 0000000..b4cc07d --- /dev/null +++ b/src/views/map/components/MapContainer.vue @@ -0,0 +1,169 @@ + + + + + diff --git a/src/views/map/components/MapLivePlayer.vue b/src/views/map/components/MapLivePlayer.vue new file mode 100644 index 0000000..685ed44 --- /dev/null +++ b/src/views/map/components/MapLivePlayer.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/src/views/map/components/MapScroll.vue b/src/views/map/components/MapScroll.vue new file mode 100644 index 0000000..59f5e31 --- /dev/null +++ b/src/views/map/components/MapScroll.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/src/views/sensingDevice/components/DeviceMap.vue b/src/views/sensingDevice/components/DeviceMap.vue new file mode 100644 index 0000000..cf6fb05 --- /dev/null +++ b/src/views/sensingDevice/components/DeviceMap.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/src/views/sensingDevice/index.vue b/src/views/sensingDevice/index.vue new file mode 100644 index 0000000..9c22222 --- /dev/null +++ b/src/views/sensingDevice/index.vue @@ -0,0 +1,162 @@ + + + + + diff --git a/src/views/sensingDevice/utils/layer.js b/src/views/sensingDevice/utils/layer.js new file mode 100644 index 0000000..ddd593d --- /dev/null +++ b/src/views/sensingDevice/utils/layer.js @@ -0,0 +1,63 @@ +// TODO 封装监控点聚合图层 +import { getDeviceLatlng } from '@/utils/latlng' +const device = getDeviceLatlng() +const devices = device.map((item) => ({ + type: 'Feature', + geometry: { + type: 'Point', + coordinates: [item.Longitude, item.Latitude] + }, + properties: { + channel: item.Channel, + title: item.Name, + deviceName: item.Name + } +})) +// * 监控点聚合图层数据源 +const devicePointData = { + type: 'FeatureCollection', + features: devices +} +export const addDeviceLayers = (minemap) => { + // TODO 监控设备非聚合图层 + minemap.addLayer({ + id: 'device-points', + type: 'symbol', + // * 图层数据源 - 可以更改数据 + source: 'devicePoint', + // * 图层过滤器 + filter: ['!has', 'point_count'], + // * 图层布局样式 + layout: { + 'icon-image': 'device_image', + 'icon-size': 0.5, + 'text-field': ['get', 'title'], + 'text-offset': [0, 0.6], + 'text-anchor': 'top', + 'text-size': 10, + 'text-allow-overlap': true //图标覆盖文字允许压盖 + } + }) +} + +export const addDeviceImages = (minemap) => { + // TODO 自定义监控设备图片 + minemap.loadImage( + require('@/assets/background-img/icon_company_blue.png'), + (error, image) => { + if (error) throw error + minemap.addImage('device_image', image) + } + ) +} + +export const addSources = (minemap) => { + // * 监控数据源 + minemap.addSource('devicePoint', { + type: 'geojson', + data: devicePointData, + cluster: true, + clusterMaxZoom: 15 /* 最大聚合层级 */, + clusterRadius: 50 /* 聚合半径 */ + }) +} diff --git a/src/views/videoMonitor/components/mapVideo.vue b/src/views/videoMonitor/components/mapVideo.vue new file mode 100644 index 0000000..fd8bb6a --- /dev/null +++ b/src/views/videoMonitor/components/mapVideo.vue @@ -0,0 +1,67 @@ + + + \ No newline at end of file diff --git a/src/views/videoMonitor/index.vue b/src/views/videoMonitor/index.vue new file mode 100644 index 0000000..6bf3b38 --- /dev/null +++ b/src/views/videoMonitor/index.vue @@ -0,0 +1,98 @@ + + + + + \ No newline at end of file