@ -1,18 +1,28 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="">
|
<html lang="">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
<head>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<script type="text/javascript" src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>
|
<title>
|
||||||
</head>
|
<%= htmlWebpackPlugin.options.title %>
|
||||||
<body>
|
</title>
|
||||||
<noscript>
|
<script type="text/javascript" src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<!-- 引入MineMap API插件 -->
|
||||||
</noscript>
|
<link rel="stylesheet" href="http://50.144.11.244:21009/support/static/api/demo/js-api/zh/css/demo.css">
|
||||||
<div id="app"></div>
|
<link rel="stylesheet" href="http://50.144.11.244:21009/minemapapi/v2.1.0/minemap.css">
|
||||||
<!-- built files will be auto injected -->
|
<script src="http://50.144.11.244:21009/minemapapi/v2.1.0/minemap.js"></script>
|
||||||
</body>
|
</head>
|
||||||
</html>
|
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||||
|
Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -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 })
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import server from '@/utils/server'
|
||||||
|
|
||||||
|
// * 点聚合数据懒加载
|
||||||
|
export const postResources = (params) => {
|
||||||
|
return server.post('/bigscreen/overviewResources', params)
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 536 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 218 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 176 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 312 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 922 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 758 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 926 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 20 KiB |
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="popup">
|
||||||
|
<el-dialog
|
||||||
|
title="提示"
|
||||||
|
width="30%"
|
||||||
|
:visible="visible"
|
||||||
|
modal
|
||||||
|
:close-on-click-modal="true"
|
||||||
|
lock-scroll
|
||||||
|
:before-close="(visible = false)"
|
||||||
|
>
|
||||||
|
<span>内容展位</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'PopupContainer',
|
||||||
|
props: {
|
||||||
|
dialog: {
|
||||||
|
type: Boolean
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: this.dialog
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.popup {
|
||||||
|
width: 10vw;
|
||||||
|
height: 10vh;
|
||||||
|
|
||||||
|
.el-dialog {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,12 +1,11 @@
|
|||||||
import Vue from "vue";
|
import Vue from 'vue'
|
||||||
import Vuex from "vuex";
|
import Vuex from 'vuex'
|
||||||
|
import device from './modules/device'
|
||||||
|
|
||||||
Vue.use(Vuex);
|
Vue.use(Vuex)
|
||||||
|
|
||||||
export default new Vuex.Store({
|
export default new Vuex.Store({
|
||||||
state: {},
|
modules: {
|
||||||
getters: {},
|
device
|
||||||
mutations: {},
|
}
|
||||||
actions: {},
|
})
|
||||||
modules: {},
|
|
||||||
});
|
|
||||||
|
|||||||
@ -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: {}
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
// * 事件总线
|
||||||
|
import Vue from 'vue'
|
||||||
|
const bus = new Vue()
|
||||||
|
export default bus
|
||||||
@ -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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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
|
||||||
|
}
|
||||||