This commit is contained in:
孙小云
parent
9a4307877f
commit
35111e6b95
|
|
@ -2,5 +2,5 @@
|
|||
ENV = 'production'
|
||||
|
||||
# base api
|
||||
VUE_APP_BASE_API = ''
|
||||
VUE_APP_BASE_API = 'http://114.67.89.4:9090'
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
const { run } = require('runjs')
|
||||
const chalk = require('chalk')
|
||||
const config = require('../vue.config.js')
|
||||
const rawArgv = process.argv.slice(2)
|
||||
const args = rawArgv.join(' ')
|
||||
|
||||
if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
|
||||
const report = rawArgv.includes('--report')
|
||||
|
||||
run(`vue-cli-service build ${args}`)
|
||||
|
||||
const port = 9526
|
||||
const publicPath = config.publicPath
|
||||
|
||||
var connect = require('connect')
|
||||
var serveStatic = require('serve-static')
|
||||
const app = connect()
|
||||
|
||||
app.use(
|
||||
publicPath,
|
||||
serveStatic('./src/main/resources/static', {
|
||||
index: ['index.html', '/']
|
||||
})
|
||||
)
|
||||
|
||||
app.listen(port, function () {
|
||||
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))
|
||||
if (report) {
|
||||
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))
|
||||
}
|
||||
|
||||
})
|
||||
} else {
|
||||
run(`vue-cli-service build ${args}`)
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
window.baseUrl = "http://114.67.89.4:9090"
|
||||
|
||||
// map组件全局参数, 注释此内容可以关闭地图功能
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@ import request from '@/utils/request'
|
|||
export function queryDeviceSyncStatus(deviceId) {
|
||||
return request({
|
||||
method: 'get',
|
||||
url: `/api/device/query/${deviceId}/sync_status`
|
||||
url: `/api/device/query/sync_status`,
|
||||
params: {
|
||||
deviceId: deviceId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -61,9 +61,3 @@ export function queryTree(params) {
|
|||
}
|
||||
})
|
||||
}
|
||||
export function sync() {
|
||||
return request({
|
||||
method: 'get',
|
||||
url: `/api/group/sync`,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,16 +64,6 @@ const actions = {
|
|||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
sync({ commit }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
sync().then(response => {
|
||||
const { data } = response
|
||||
resolve(data)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const actions = {
|
|||
})
|
||||
})
|
||||
},
|
||||
stop({ commit }, [deviceId, channelId]) {
|
||||
stop({ commit }, { deviceId, channelId }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
stop(deviceId, channelId).then(response => {
|
||||
const { data } = response
|
||||
|
|
|
|||
|
|
@ -46,10 +46,7 @@ service.interceptors.response.use(
|
|||
}
|
||||
const res = response.data
|
||||
if (res.code && res.code !== 0) {
|
||||
Message.error({
|
||||
message: res.msg,
|
||||
duration: 5 * 1000
|
||||
})
|
||||
throw res.msg
|
||||
} else {
|
||||
return res
|
||||
}
|
||||
|
|
|
|||
|
|
@ -316,7 +316,15 @@ export default {
|
|||
setTimeout(() => {
|
||||
this.initData()
|
||||
}, 1000)
|
||||
}).finally(() => {
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
itemData.playLoading = false
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import RegionTree from '../../common/RegionTree.vue'
|
||||
import RegionTree from '../..//common/RegionTree.vue'
|
||||
import GbChannelSelect from '../../dialog/GbChannelSelect.vue'
|
||||
import UnusualRegionChannelSelect from '../../dialog/UnusualRegionChannelSelect.vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -30,11 +30,14 @@
|
|||
</el-form-item>
|
||||
|
||||
<el-form-item label="行政区域">
|
||||
<el-input v-model="form.gbCivilCode" placeholder="请输入行政区域">
|
||||
<el-input v-model="form.gbCivilCode" placeholder="请输入行政区域" @change="getRegionPaths">
|
||||
<template v-slot:append>
|
||||
<el-button @click="chooseCivilCode()">选择</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-breadcrumb v-if="regionPath.length > 0" separator="/" style="display: block; margin-top: 8px; font-size: 14px;">
|
||||
<el-breadcrumb-item v-for="key in regionPath" :key="key">{{ key }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="安装地址">
|
||||
|
|
@ -246,11 +249,11 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import channelCode from '../dialog/channelCode'
|
||||
import channelCode from './../dialog/channelCode'
|
||||
import ChooseCivilCode from '../dialog/chooseCivilCode.vue'
|
||||
import ChooseGroup from '../dialog/chooseGroup.vue'
|
||||
import diff from '../../utils/diff'
|
||||
import ResetChannel from '../dialog/resetChannel.vue'
|
||||
import ResetChannel from './../dialog/resetChannel.vue'
|
||||
|
||||
export default {
|
||||
name: 'CommonChannelEdit',
|
||||
|
|
@ -274,6 +277,7 @@ export default {
|
|||
loading: false,
|
||||
modelList: [],
|
||||
parentPath: [],
|
||||
regionPath: [],
|
||||
form: {}
|
||||
}
|
||||
},
|
||||
|
|
@ -329,7 +333,15 @@ export default {
|
|||
message: '保存成功'
|
||||
})
|
||||
this.$emit('submitSuccess')
|
||||
}).finally(() => {
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
|
|
@ -342,7 +354,15 @@ export default {
|
|||
if (this.saveSuccess) {
|
||||
this.saveSuccess()
|
||||
}
|
||||
}).finally(() => {
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
|
|
@ -367,9 +387,15 @@ export default {
|
|||
message: '重置成功 已保存'
|
||||
})
|
||||
this.getCommonChannel(this.form.gbId)
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
}).finally(() => {
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
|
|
@ -387,6 +413,14 @@ export default {
|
|||
this.form = data
|
||||
this.$set(this.form, 'enableBroadcastForBool', this.form.enableBroadcast === 1)
|
||||
this.getPaths()
|
||||
this.getRegionPaths()
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
|
|
@ -400,6 +434,7 @@ export default {
|
|||
chooseCivilCode: function() {
|
||||
this.$refs.chooseCivilCode.openDialog(code => {
|
||||
this.form.gbCivilCode = code
|
||||
this.getRegionPaths()
|
||||
})
|
||||
},
|
||||
chooseGroup: function() {
|
||||
|
|
@ -431,6 +466,20 @@ export default {
|
|||
this.parentPath = path
|
||||
})
|
||||
}
|
||||
},
|
||||
getRegionPaths: function() {
|
||||
this.regionPath = []
|
||||
if (this.form.gbCivilCode) {
|
||||
this.$store.dispatch('region/queryPath', this.form.gbCivilCode)
|
||||
.then(data => {
|
||||
console.log(data)
|
||||
const path = []
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
path.push(data[i].name)
|
||||
}
|
||||
this.regionPath = path
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,8 @@
|
|||
type="info"
|
||||
style="text-align: left"
|
||||
/>
|
||||
<div v-if="edit" style="font-size: 14px;position: absolute;left: 270px;z-index: 100;" >
|
||||
<div v-if="edit" style="margin-top: 10px; font-size: 14px;position: absolute;left: 270px;z-index: 100;" >
|
||||
显示编号： <el-checkbox v-model="showCode" />
|
||||
<el-button type="text" style="margin-left: 10px" :loading="groupSyncLoading" @click="groupSync">同步</el-button>
|
||||
</div>
|
||||
|
||||
<vue-easy-tree
|
||||
|
|
@ -122,8 +121,8 @@
|
|||
|
||||
<script>
|
||||
import VueEasyTree from '@wchbrad/vue-easy-tree'
|
||||
import groupEdit from '../dialog/groupEdit'
|
||||
import gbDeviceSelect from '../dialog/GbDeviceSelect'
|
||||
import groupEdit from './../dialog/groupEdit'
|
||||
import gbDeviceSelect from './../dialog/GbDeviceSelect'
|
||||
import GbChannelSelect from '../dialog/GbChannelSelect.vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -149,8 +148,7 @@ export default {
|
|||
count: this.defaultCount | 15,
|
||||
total: 0,
|
||||
groupList: [],
|
||||
channelList: [],
|
||||
groupSyncLoading: false
|
||||
channelList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -375,6 +373,13 @@ export default {
|
|||
node.parent.expand()
|
||||
this.$emit('onChannelChange', node.data.deviceId)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
addChannelFormDevice: function(id, node) {
|
||||
this.$refs.gbDeviceSelect.openDialog((rows) => {
|
||||
|
|
@ -395,7 +400,15 @@ export default {
|
|||
this.$emit('onChannelChange', node.data.deviceId)
|
||||
node.loaded = false
|
||||
node.expand()
|
||||
}).finally(() => {
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
})
|
||||
|
|
@ -415,7 +428,15 @@ export default {
|
|||
this.$emit('onChannelChange', node.data.deviceId)
|
||||
node.loaded = false
|
||||
node.expand()
|
||||
}).finally(() => {
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
})
|
||||
|
|
@ -507,20 +528,6 @@ export default {
|
|||
id: data.gbId
|
||||
})
|
||||
},
|
||||
groupSync: function() {
|
||||
this.groupSyncLoading = true
|
||||
this.$store.dispatch('group/sync').then(data => {
|
||||
this.$message.success({
|
||||
showClose: true,
|
||||
message: '同步消息已经发送, 3秒后自动刷新'
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.refresh('')
|
||||
}, 3000)
|
||||
}).finally(() => {
|
||||
this.groupSyncLoading = false
|
||||
})
|
||||
},
|
||||
contextmenuEventHandlerForLi(event, data) {
|
||||
console.log(data)
|
||||
const allMenuItem = []
|
||||
|
|
|
|||
|
|
@ -73,6 +73,13 @@ export default {
|
|||
}
|
||||
this.initMap()
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
initMap(){
|
||||
let center = fromLonLat([116.41020, 39.915119])
|
||||
|
|
@ -97,8 +104,6 @@ export default {
|
|||
url: this.mapTileList[this.mapTileIndex].tilesUrl
|
||||
})
|
||||
})
|
||||
console.log(4444)
|
||||
console.log(this.mapTileList[this.mapTileIndex].tilesUrl)
|
||||
} else {
|
||||
tileLayer = new Tile({
|
||||
preload: 4,
|
||||
|
|
@ -150,11 +155,12 @@ export default {
|
|||
})
|
||||
},
|
||||
addVectorTileLayer(tileUrl, clickEvent, errorEvent){
|
||||
tileUrl += `?geoCoordSys=${this.mapTileList[this.mapTileIndex].coordinateSystem}&accessToken=${this.$store.getters.token}`
|
||||
let source = new VectorTileSource({
|
||||
format: new MVT(),
|
||||
tileSize: 256,
|
||||
url: tileUrl
|
||||
})
|
||||
|
||||
let layer = new VectorTileLayer({
|
||||
source: source,
|
||||
style: function(feature) {
|
||||
|
|
@ -624,6 +630,7 @@ export default {
|
|||
let mapTileConfig = this.mapTileList[this.mapTileIndex]
|
||||
this.mapTileIndex = index
|
||||
window.coordinateSystem = this.mapTileList[this.mapTileIndex].coordinateSystem
|
||||
tileLayer.getSource().clear()
|
||||
tileLayer.getSource().setUrl(this.mapTileList[index].tilesUrl)
|
||||
if (mapTileConfig.coordinateSystem !== this.mapTileList[this.mapTileIndex].coordinateSystem) {
|
||||
// 发送通知
|
||||
|
|
|
|||
|
|
@ -116,10 +116,9 @@
|
|||
|
||||
<script>
|
||||
import VueEasyTree from '@wchbrad/vue-easy-tree'
|
||||
import regionEdit from '../dialog/regionEdit'
|
||||
import gbDeviceSelect from '../dialog/GbDeviceSelect'
|
||||
import regionEdit from './../dialog/regionEdit'
|
||||
import gbDeviceSelect from './../dialog/GbDeviceSelect'
|
||||
import GbChannelSelect from '../dialog/GbChannelSelect.vue'
|
||||
import chooseCivilCode from '@/views/dialog/chooseCivilCode.vue'
|
||||
|
||||
export default {
|
||||
name: 'DeviceTree',
|
||||
|
|
@ -199,6 +198,7 @@ export default {
|
|||
})
|
||||
},
|
||||
loadNode: function(node, resolve) {
|
||||
console.log(22222)
|
||||
if (node.level === 0) {
|
||||
resolve([{
|
||||
treeId: '',
|
||||
|
|
@ -364,8 +364,13 @@ export default {
|
|||
this.$emit('onChannelChange', node.data.deviceId)
|
||||
node.parent.loaded = false
|
||||
node.parent.expand()
|
||||
}).catch(function(error) {
|
||||
console.log(error)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
addChannelFormDevice: function(id, node) {
|
||||
|
|
|
|||
|
|
@ -602,6 +602,13 @@ export default {
|
|||
this.startBroadcast(streamInfo.rtc)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
} else if (this.broadcastStatus === 1) {
|
||||
this.broadcastStatus = -1
|
||||
this.broadcastRtc.close()
|
||||
|
|
@ -690,6 +697,13 @@ export default {
|
|||
this.broadcastRtc.close()
|
||||
this.broadcastStatus = -1
|
||||
this.$store.dispatch('play/broadcastStop', [this.channelId])
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -422,7 +422,10 @@ export default {
|
|||
})
|
||||
},
|
||||
stopDevicePush: function(itemData) {
|
||||
this.$store.dispatch('play/stop', [this.deviceId, itemData.deviceId]).then(data => {
|
||||
this.$store.dispatch('play/stop', {
|
||||
deviceId: this.deviceId,
|
||||
channelId: itemData.deviceId
|
||||
}).then(data => {
|
||||
this.initData()
|
||||
}).catch((error) => {
|
||||
if (error.response.status === 402) { // 已经停止过
|
||||
|
|
|
|||
|
|
@ -236,7 +236,13 @@ export default {
|
|||
}).then((data) => {
|
||||
this.total = data.total
|
||||
this.deviceList = data.list
|
||||
}).finally(() => {
|
||||
}).catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
}).finally(() => {
|
||||
this.getDeviceListLoading = false
|
||||
})
|
||||
},
|
||||
|
|
@ -256,6 +262,13 @@ export default {
|
|||
.then((data) => {
|
||||
this.getDeviceList()
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
showChannelList: function(row) {
|
||||
|
|
@ -284,7 +297,15 @@ export default {
|
|||
this.$refs.syncChannelProgress.openDialog(itemData.deviceId, () => {
|
||||
this.getDeviceList()
|
||||
})
|
||||
}).finally(() => {
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.getDeviceList()
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import devicePlayer from './devicePlayer.vue'
|
||||
import devicePlayer from '../dialog/devicePlayer.vue'
|
||||
|
||||
export default {
|
||||
name: "channelMapInfobox",
|
||||
|
|
|
|||
|
|
@ -45,16 +45,16 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button v-if="hasShare !=='true'" size="mini" type="primary" @click="add()">
|
||||
<el-button v-if="hasShare !=='true'" size="mini" type="primary" :loading="addLoading" @click="add()">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button v-if="hasShare ==='true'" size="mini" type="danger" @click="remove()">
|
||||
<el-button v-if="hasShare ==='true'" size="mini" type="danger" :loading="removeLoading" @click="remove()">
|
||||
移除
|
||||
</el-button>
|
||||
<el-button v-if="hasShare !=='true'" size="mini" @click="addByDevice()">按设备添加</el-button>
|
||||
<el-button v-if="hasShare ==='true'" size="mini" @click="removeByDevice()">按设备移除</el-button>
|
||||
<el-button v-if="hasShare !=='true'" size="mini" @click="addAll()">全部添加</el-button>
|
||||
<el-button v-if="hasShare ==='true'" size="mini" @click="removeAll()">全部移除</el-button>
|
||||
<el-button v-if="hasShare !=='true'" size="mini" :loading="addByDeviceLoading" @click="addByDevice()">按设备添加</el-button>
|
||||
<el-button v-if="hasShare ==='true'" size="mini" :loading="removeByDeviceLoading" @click="removeByDevice()">按设备移除</el-button>
|
||||
<el-button v-if="hasShare !=='true'" size="mini" :loading="addAllLoading" @click="addAll()">全部添加</el-button>
|
||||
<el-button v-if="hasShare ==='true'" size="mini" :loading="removeAllLoading" @click="removeAll()">全部移除</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item style="float: right;">
|
||||
<el-button icon="el-icon-refresh-right" circle @click="getChannelList()" />
|
||||
|
|
@ -144,7 +144,13 @@ export default {
|
|||
total: 0,
|
||||
loading: false,
|
||||
loadSnap: {},
|
||||
multipleSelection: []
|
||||
multipleSelection: [],
|
||||
addLoading: false,
|
||||
addByDeviceLoading: false,
|
||||
addAllLoading: false,
|
||||
removeLoading: false,
|
||||
removeByDeviceLoading: false,
|
||||
removeAllLoading: false
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -212,7 +218,7 @@ export default {
|
|||
})
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
this.addLoading = true
|
||||
this.$store.dispatch('platform/addChannel', {
|
||||
platformId: this.platformId,
|
||||
channelIds: channels
|
||||
|
|
@ -231,7 +237,7 @@ export default {
|
|||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
this.addLoading = false
|
||||
})
|
||||
},
|
||||
addAll: function(row) {
|
||||
|
|
@ -241,7 +247,7 @@ export default {
|
|||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.loading = true
|
||||
this.addAllLoading = true
|
||||
this.$store.dispatch('platform/addChannel', {
|
||||
platformId: this.platformId,
|
||||
all: true
|
||||
|
|
@ -260,7 +266,7 @@ export default {
|
|||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
this.addAllLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
|
|
@ -272,6 +278,7 @@ export default {
|
|||
for (let i = 0; i < rows.length; i++) {
|
||||
deviceIds.push(rows[i].id)
|
||||
}
|
||||
this.addByDeviceLoading = true
|
||||
this.$store.dispatch('platform/addChannelByDevice', {
|
||||
platformId: this.platformId,
|
||||
deviceIds: deviceIds
|
||||
|
|
@ -290,7 +297,7 @@ export default {
|
|||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
this.addByDeviceLoading = false
|
||||
})
|
||||
})
|
||||
},
|
||||
|
|
@ -301,6 +308,7 @@ export default {
|
|||
for (let i = 0; i < rows.length; i++) {
|
||||
deviceIds.push(rows[i].id)
|
||||
}
|
||||
this.removeByDeviceLoading = true
|
||||
this.$store.dispatch('platform/removeChannelByDevice', {
|
||||
platformId: this.platformId,
|
||||
deviceIds: deviceIds
|
||||
|
|
@ -319,7 +327,7 @@ export default {
|
|||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
this.removeByDeviceLoading = false
|
||||
})
|
||||
})
|
||||
},
|
||||
|
|
@ -335,7 +343,7 @@ export default {
|
|||
})
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
this.removeLoading = true
|
||||
this.$store.dispatch('platform/removeChannel', {
|
||||
platformId: this.platformId,
|
||||
channelIds: channels
|
||||
|
|
@ -354,7 +362,7 @@ export default {
|
|||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
this.removeLoading = false
|
||||
})
|
||||
},
|
||||
removeAll: function(row) {
|
||||
|
|
@ -364,7 +372,7 @@ export default {
|
|||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.loading = true
|
||||
this.removeAllLoading = true
|
||||
this.$store.dispatch('platform/removeChannel', {
|
||||
platformId: this.platformId,
|
||||
all: true
|
||||
|
|
@ -383,7 +391,7 @@ export default {
|
|||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
this.removeAllLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
|
|
@ -403,6 +411,7 @@ export default {
|
|||
message: error
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
search: function() {
|
||||
this.currentPage = 1
|
||||
|
|
|
|||
|
|
@ -63,8 +63,12 @@ export default {
|
|||
})
|
||||
this.jtChannel = data
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error)
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$store.dispatch('jtDevice/addChannel', this.jtChannel)
|
||||
|
|
@ -76,8 +80,12 @@ export default {
|
|||
})
|
||||
this.jtChannel = data
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error)
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -234,8 +234,12 @@ export default {
|
|||
this.initData()
|
||||
}, 1000)
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoging = false
|
||||
|
|
@ -266,8 +270,12 @@ export default {
|
|||
.then((data) => {
|
||||
this.initData()
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.error(error)
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
getSnap: function(row) {
|
||||
|
|
@ -302,8 +310,12 @@ export default {
|
|||
},
|
||||
updateChannel: function(row) {
|
||||
this.$store.dispatch('jtDevice/updateChannel', row)
|
||||
.catch((e) => {
|
||||
console.log(e)
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
refresh: function() {
|
||||
|
|
|
|||
|
|
@ -208,7 +208,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.initData()
|
||||
this.updateLooper = setInterval(this.initData, 10000)
|
||||
this.updateLooper = setInterval(this.getList, 10000)
|
||||
},
|
||||
destroyed() {
|
||||
this.$destroy('videojs')
|
||||
|
|
@ -216,6 +216,8 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
initData: function() {
|
||||
this.currentPage = 1
|
||||
this.total = 0
|
||||
this.getList()
|
||||
},
|
||||
currentChange: function(val) {
|
||||
|
|
@ -254,6 +256,13 @@ export default {
|
|||
.then(data => {
|
||||
this.getList()
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
|
|
@ -328,6 +337,13 @@ export default {
|
|||
this.serverId = data.addOn.serverId
|
||||
this.$refs.configInfo.openDialog(data, 'jt1078Config')
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
queryAttribute: function(itemData) {
|
||||
this.$store.dispatch('jtDevice/queryAttribute', itemData.phoneNumber)
|
||||
|
|
|
|||
|
|
@ -116,9 +116,16 @@ export default {
|
|||
this.$store.dispatch('user/login', this.loginForm).then((re) => {
|
||||
this.$router.push({ path: this.redirect || '/' })
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}).catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ export default {
|
|||
longitudeStr: 'longitude',
|
||||
latitudeStr: 'latitude',
|
||||
mapTileList: [],
|
||||
diffPixels: 30,
|
||||
diffPixels: 120,
|
||||
zoomValue: 10,
|
||||
showDrawThin: false,
|
||||
quicklyDrawThinLoading: false,
|
||||
|
|
@ -168,7 +168,7 @@ export default {
|
|||
drawThinId: null,
|
||||
drawThinLayer: null,
|
||||
saveDrawThinLoading: false,
|
||||
layerType: 0,
|
||||
layerType: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -198,6 +198,7 @@ export default {
|
|||
},
|
||||
refreshLayer(){
|
||||
this.closeInfoBox()
|
||||
|
||||
// 刷新瓦片图层
|
||||
if (channelLayer) {
|
||||
this.$refs.mapComponent.refreshLayer(channelLayer)
|
||||
|
|
@ -241,6 +242,13 @@ export default {
|
|||
.then(data => {
|
||||
this.play(data)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -252,6 +260,13 @@ export default {
|
|||
.then(data => {
|
||||
this.editPosition(data)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -263,6 +278,13 @@ export default {
|
|||
.then(data => {
|
||||
this.edit(data)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -292,6 +314,7 @@ export default {
|
|||
return
|
||||
}
|
||||
this.$refs.mapComponent.changeMapTile(index)
|
||||
this.changeLayerType(this.layerType)
|
||||
},
|
||||
clientEvent(data){
|
||||
this.closeInfoBox()
|
||||
|
|
@ -304,23 +327,22 @@ export default {
|
|||
})
|
||||
},
|
||||
changeLayerType: function (index) {
|
||||
if (this.layerType === index) {
|
||||
return
|
||||
}
|
||||
this.layerType = index
|
||||
if (index === 0) {
|
||||
this.$refs.mapComponent.removeLayer(channelTileLayer)
|
||||
return
|
||||
}
|
||||
if (channelTileLayer) {
|
||||
this.$refs.mapComponent.removeLayer(channelTileLayer)
|
||||
}
|
||||
|
||||
let geoCoordSys = this.$refs.mapComponent.getCoordSys()
|
||||
const baseUrl = window.baseUrl ? window.baseUrl : ''
|
||||
let baseApi = ((process.env.NODE_ENV === 'development') ? process.env.VUE_APP_BASE_API : baseUrl)
|
||||
let tileUrl = null
|
||||
if (index === 1) {
|
||||
tileUrl = baseApi + `/api/common/channel/map/tile/{z}/{x}/{y}?geoCoordSys=${geoCoordSys}&accessToken=${this.$store.getters.token}`
|
||||
tileUrl = baseApi + '/api/common/channel/map/tile/{z}/{x}/{y}'
|
||||
}else if (index === 2) {
|
||||
tileUrl = baseApi + `/api/common/channel/map/thin/tile/{z}/{x}/{y}?geoCoordSys=${geoCoordSys}&accessToken=${this.$store.getters.token}`
|
||||
tileUrl = baseApi + '/api/common/channel/map/thin/tile/{z}/{x}/{y}'
|
||||
}
|
||||
channelTileLayer = this.$refs.mapComponent.addVectorTileLayer(tileUrl, this.clientEvent)
|
||||
},
|
||||
|
|
@ -344,7 +366,15 @@ export default {
|
|||
streamInfo: data,
|
||||
hasAudio: channel.hasAudio
|
||||
})
|
||||
}).finally(() => {
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
|
|
@ -443,23 +473,42 @@ export default {
|
|||
this.$refs.deviceTree.refresh('channel' + channel.gbId)
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
showDrawThinBox: function(show){
|
||||
this.showDrawThin = show
|
||||
setTimeout(() => {
|
||||
if (!show) {
|
||||
if (!show) {
|
||||
setTimeout(() => {
|
||||
// 关闭抽稀预览
|
||||
if (this.drawThinId !== null) {
|
||||
// 发送消息 清空抽稀结果
|
||||
this.$store.dispatch('commonChanel/clearThin', this.drawThinId)
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
this.drawThinId = null
|
||||
}
|
||||
if (this.drawThinLayer !== null) {
|
||||
this.$refs.mapComponent.removeLayer(this.drawThinLayer)
|
||||
this.drawThinLayer = null
|
||||
}
|
||||
}
|
||||
}, 1)
|
||||
// 展示图层
|
||||
if (this.layerType > 0) {
|
||||
this.changeLayerType(this.layerType)
|
||||
}
|
||||
}, 1)
|
||||
}
|
||||
|
||||
},
|
||||
quicklyDrawThin: function (){
|
||||
if (channelLayer) {
|
||||
|
|
@ -490,6 +539,13 @@ export default {
|
|||
this.showDrawThinLayer(drawThinId)
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.quicklyDrawThinLoading = false
|
||||
})
|
||||
|
|
@ -550,6 +606,13 @@ export default {
|
|||
this.showDrawThinLayer(drawThinId)
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.boxDrawThinLoading = false
|
||||
})
|
||||
|
|
@ -584,6 +647,13 @@ export default {
|
|||
})
|
||||
this.showDrawThinBox(false)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.saveDrawThinLoading = false
|
||||
})
|
||||
|
|
@ -601,6 +671,13 @@ export default {
|
|||
message: '数据还原成功'
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,989 +0,0 @@
|
|||
<template>
|
||||
<div id="devicePosition" style="height: calc(100vh - 84px);width: 100%;">
|
||||
<div style="height: 100%; display: grid; grid-template-columns: 360px auto">
|
||||
<DeviceTree ref="deviceTree" @clickEvent="treeChannelClickEvent" :showPosition="true" :contextmenu="getContextmenu()"/>
|
||||
<MapComponent ref="mapComponent" @loaded="initChannelLayer" @coordinateSystemChange="initChannelLayer" @zoomChange="zoomChange"></MapComponent>
|
||||
</div>
|
||||
<div class="map-tool-box-bottom-right">
|
||||
<div class="map-tool-btn-group">
|
||||
<div class="el-dropdown-link map-tool-btn" @click="addVectorTileLayer">
|
||||
<i class="iconfont icon-mti-jutai"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-tool-btn-group" v-if="mapTileList.length > 0">
|
||||
<el-dropdown placement="top" @command="changeLayerStyle">
|
||||
<div class="el-dropdown-link map-tool-btn">
|
||||
<i class="iconfont icon-mti-jutai"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="0" >
|
||||
<span v-if="layerStyle !== 0">图层关闭</span>
|
||||
<span v-if="layerStyle === 0" style="color: rgb(64, 158, 255);">图层关闭</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="1" >
|
||||
<span v-if="layerStyle !== 1">直接展示</span>
|
||||
<span v-if="layerStyle === 1" style="color: rgb(64, 158, 255);">直接展示</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="2">
|
||||
<span v-if="layerStyle !== 2">碰撞检测</span>
|
||||
<span v-if="layerStyle === 2" style="color: rgb(64, 158, 255);">碰撞检测</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="3">
|
||||
<span v-if="layerStyle !== 3">抽稀图层</span>
|
||||
<span v-if="layerStyle === 3" style="color: rgb(64, 158, 255);">抽稀图层</span>
|
||||
</el-dropdown-item>
|
||||
<!-- <el-dropdown-item :command="4">-->
|
||||
<!-- <span v-if="layerStyle !== 4">聚合图层</span>-->
|
||||
<!-- <span v-if="layerStyle === 4" style="color: rgb(64, 158, 255);">聚合图层</span>-->
|
||||
<!-- </el-dropdown-item>-->
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="map-tool-btn-group" v-if="mapTileList && mapTileList.length > 1">
|
||||
<el-dropdown placement="top" @command="changeMapTile">
|
||||
<div class="el-dropdown-link map-tool-btn">
|
||||
<i class="iconfont icon-tuceng"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(item,index) in mapTileList" :key="index" :command="index">{{item.name}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="map-tool-btn-group">
|
||||
<div class="map-tool-btn" @click="refreshLayer">
|
||||
<i class="iconfont icon-shuaxin3"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-tool-btn-group">
|
||||
<div class="map-tool-btn" @click="zoomIn">
|
||||
<i class="iconfont icon-plus1"></i>
|
||||
</div>
|
||||
<div class="map-tool-btn" @click="zoomOut">
|
||||
<i class="iconfont icon-minus1"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-tool-box-top-left">
|
||||
<div class="map-tool-btn-group">
|
||||
<div class="map-tool-btn" title="图层抽稀" @click="showDrawThinBox(true)">
|
||||
<i class="iconfont icon-mti-sandian"></i> <span>图层抽稀</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-show="showDrawThin" class="map-tool-draw-thin">
|
||||
<div class="map-tool-draw-thin-density">
|
||||
<span style="line-height: 36px; font-size: 15px">间隔： </span>
|
||||
<el-slider v-model="diffPixels" show-input :min="10" :max="200" input-size="mini" ></el-slider>
|
||||
<div style="margin-left: 10px; line-height: 38px;">
|
||||
<el-button :loading="quicklyDrawThinLoading" @click="quicklyDrawThin" size="mini">快速抽稀</el-button>
|
||||
<el-button size="mini" @click="boxDrawThin" >局部抽稀</el-button>
|
||||
<el-button size="mini" @click="resetDrawThinData()">数据还原</el-button>
|
||||
<el-button :loading="saveDrawThinLoading" type="primary" :disabled="!layerGroupSource" size="mini" @click="saveDrawThin()">保存</el-button>
|
||||
<el-button type="warning" size="mini" @click="showDrawThinBox(false)">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- <div class="map-tool-box-top-right">-->
|
||||
<!-- <div class="map-tool-btn-group">-->
|
||||
<!-- <div class="map-tool-btn" title="抽稀">-->
|
||||
<!-- <i class="iconfont icon-mti-sandian"></i>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="map-tool-btn" title="聚合">-->
|
||||
<!-- <i class="iconfont icon-mti-jutai"></i>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div ref="infobox">
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="infobox-content" v-if="channel">
|
||||
<el-descriptions class="margin-top" :title="channel.gbName" :column="1" :colon="true" size="mini" :labelStyle="labelStyle" >
|
||||
<el-descriptions-item label="编号" >{{channel.gbDeviceId}}</el-descriptions-item>
|
||||
<el-descriptions-item label="生产厂商">{{channel.gbManufacture}}</el-descriptions-item>
|
||||
<el-descriptions-item label="安装地址" >{{channel.gbAddress == null?'未知': channel.gbAddress}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div style="padding-top: 10px; margin: 0 auto; width: fit-content;">
|
||||
<el-button v-bind:disabled="channel.gbStatus !== 'ON'" type="primary" size="small" title="播放" icon="el-icon-video-play" @click="play(channel)">播放</el-button>
|
||||
<el-button type="primary" size="small" title="编辑" icon="el-icon-edit" @click="edit(channel)">编辑</el-button>
|
||||
<el-button type="primary" size="small" title="位置" icon="el-icon-coordinate" @click="editPosition(channel)">位置</el-button>
|
||||
<!-- <el-button type="primary" size="small" title="轨迹查询" icon="el-icon-map-location" @click="getTrace(channel)">轨迹</el-button>-->
|
||||
</div>
|
||||
<span class="infobox-close el-icon-close" @click="closeInfoBox"></span>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
|
||||
<div ref="infoboxForEdit">
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="infobox-edit-content" v-if="dragChannel">
|
||||
<div style="width: 100%; line-height: 1.5rem; font-size: 14px">{{dragChannel.gbName}} ({{dragChannel.gbDeviceId}})</div>
|
||||
<span style="font-size: 14px">经度:</span> <el-input v-model="dragChannel.gbLongitude" placeholder="请输入经度" style="width: 7rem; margin-right: 10px"></el-input>
|
||||
<span style="font-size: 14px">纬度: </span> <el-input v-model="dragChannel.gbLatitude" placeholder="请输入纬度" style="width: 7rem; "></el-input>
|
||||
<el-button icon="el-icon-close" size="medium" type="text" @click="cancelEdit(dragChannel)" style="margin-left: 1rem; font-size: 18px; color: #2b2f3a"></el-button>
|
||||
<el-button icon="el-icon-check" size="medium" type="text" @click="submitEdit(dragChannel)" style="font-size: 18px; color: #0842e2"></el-button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<devicePlayer ref="devicePlayer" ></devicePlayer>
|
||||
<queryTrace ref="queryTrace" ></queryTrace>
|
||||
<CommonChannelEditDialog ref="commonChannelEditDialog" ></CommonChannelEditDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeviceTree from '../common/DeviceTree.vue'
|
||||
import queryTrace from './queryTrace.vue'
|
||||
import MapComponent from '../common/MapComponent.vue'
|
||||
import devicePlayer from '../common/channelPlayer/index.vue'
|
||||
import CommonChannelEditDialog from "@/views/dialog/commonChannelEditDialog.vue";
|
||||
|
||||
let cameraListForSource = []
|
||||
let cameraList = []
|
||||
let cameraListForLevelMap = new Map()
|
||||
let cameraLayerExtent = []
|
||||
let channelLayer = null
|
||||
export default {
|
||||
name: 'Map',
|
||||
components: {
|
||||
CommonChannelEditDialog,
|
||||
DeviceTree,
|
||||
devicePlayer,
|
||||
queryTrace,
|
||||
MapComponent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
layer: null,
|
||||
channel: null,
|
||||
dragChannel: {},
|
||||
feature: null,
|
||||
device: null,
|
||||
infoBoxId: null,
|
||||
labelStyle: {
|
||||
width: '56px'
|
||||
},
|
||||
isLoging: false,
|
||||
longitudeStr: 'longitude',
|
||||
latitudeStr: 'latitude',
|
||||
mapTileList: [],
|
||||
diffPixels: 60,
|
||||
zoomValue: 10,
|
||||
showDrawThin: false,
|
||||
quicklyDrawThinLoading: false,
|
||||
saveDrawThinLoading: false,
|
||||
layerStyle: 0,
|
||||
drawThinLayer: null,
|
||||
layerGroupSource: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
initChannelLayer: function () {
|
||||
|
||||
this.mapTileList = this.$refs.mapComponent.mapTileList
|
||||
// 获取所有有位置的通道
|
||||
this.closeInfoBox()
|
||||
this.$store.dispatch('commonChanel/getAllForMap', {}).then(data => {
|
||||
cameraListForSource = data
|
||||
console.log(data.length)
|
||||
let minLng = data[0].gbLongitude
|
||||
let maxLng = data[0].gbLongitude
|
||||
let minLat = data[0].gbLatitude
|
||||
let maxLat = data[0].gbLatitude
|
||||
for (let i = 1; i < data.length; i++) {
|
||||
let item = data[i]
|
||||
if (item.gbLongitude < minLng) {
|
||||
minLng = item.gbLongitude
|
||||
}
|
||||
if (item.gbLongitude > maxLng) {
|
||||
maxLng = item.gbLongitude
|
||||
}
|
||||
if (item.gbLatitude < minLat) {
|
||||
minLat = item.gbLatitude
|
||||
}
|
||||
if (item.gbLatitude > maxLat) {
|
||||
maxLat = item.gbLatitude
|
||||
}
|
||||
if (item.gbLongitude && item.gbLatitude) {
|
||||
let position = [item.gbLongitude, item.gbLatitude]
|
||||
let cameraData = {
|
||||
id: item.gbId,
|
||||
position: position,
|
||||
status: item.gbStatus,
|
||||
data: item,
|
||||
image: {
|
||||
anchor: [0.5, 1],
|
||||
src: this.getImageByChannel(item)
|
||||
}
|
||||
}
|
||||
cameraList.push(cameraData)
|
||||
if (item.mapLevel) {
|
||||
if (cameraListForLevelMap.has(item.mapLevel)) {
|
||||
let list = cameraListForLevelMap.get(item.mapLevel)
|
||||
list.push(cameraData)
|
||||
}else {
|
||||
cameraListForLevelMap.set(item.mapLevel, [cameraData])
|
||||
}
|
||||
}else {
|
||||
cameraListForLevelMap.set(0, [cameraData])
|
||||
}
|
||||
}
|
||||
}
|
||||
cameraLayerExtent = [minLng, minLat, maxLng, maxLat]
|
||||
this.updateChannelLayer()
|
||||
})
|
||||
},
|
||||
refreshLayer(){
|
||||
this.closeInfoBox()
|
||||
this.$refs.mapComponent.clearLayer(channelLayer)
|
||||
this.initChannelLayer()
|
||||
},
|
||||
treeChannelClickEvent: function (id) {
|
||||
this.closeInfoBox()
|
||||
this.$store.dispatch('commonChanel/queryOne', id)
|
||||
.then(data => {
|
||||
if (!data.gbLongitude || data.gbLongitude < 0 || !data.gbLatitude || data.gbLatitude < 0) {
|
||||
this.$message.warning({
|
||||
showClose: true,
|
||||
message: '无位置信息'
|
||||
})
|
||||
return
|
||||
}
|
||||
let zoomExtent = this.$refs.mapComponent.getZoomExtent()
|
||||
this.$refs.mapComponent.panTo([data.gbLongitude, data.gbLatitude], zoomExtent[1], () => {
|
||||
this.showChannelInfo(data)
|
||||
})
|
||||
})
|
||||
},
|
||||
zoomIn: function() {
|
||||
this.$refs.mapComponent.zoomIn()
|
||||
},
|
||||
zoomOut: function() {
|
||||
this.$refs.mapComponent.zoomOut()
|
||||
},
|
||||
getContextmenu: function (event) {
|
||||
return [
|
||||
{
|
||||
label: '播放通道',
|
||||
icon: 'el-icon-video-play',
|
||||
type: 1,
|
||||
onClick: (event, data, node) => {
|
||||
console.log(data)
|
||||
this.$store.dispatch('commonChanel/queryOne', data.id)
|
||||
.then(data => {
|
||||
this.play(data)
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '编辑位置',
|
||||
icon: 'el-icon-edit',
|
||||
type: 1,
|
||||
onClick: (event, data, node) => {
|
||||
this.$store.dispatch('commonChanel/queryOne', data.id)
|
||||
.then(data => {
|
||||
this.edit(data)
|
||||
})
|
||||
}
|
||||
}
|
||||
// ,
|
||||
// {
|
||||
// label: '轨迹查询',
|
||||
// icon: 'el-icon-map-location',
|
||||
// type: 1,
|
||||
// onClick: (event, data, node) => {
|
||||
//
|
||||
// }
|
||||
// }
|
||||
]
|
||||
},
|
||||
showChannelInfo: function(data) {
|
||||
this.channel = data
|
||||
// 此时增加临时图标
|
||||
let position = [data.gbLongitude, data.gbLatitude]
|
||||
let cameraData = {
|
||||
id: data.gbId,
|
||||
position: position,
|
||||
data: data,
|
||||
status: data.gbStatus
|
||||
}
|
||||
if (!this.$refs.mapComponent.hasFeature(channelLayer, data.gbId)) {
|
||||
this.$refs.mapComponent.addFeature(channelLayer, cameraData)
|
||||
}
|
||||
this.infoBoxId = this.$refs.mapComponent.openInfoBox(position, this.$refs.infobox, [0, -50])
|
||||
},
|
||||
zoomChange: function(zoom) {},
|
||||
|
||||
changeMapTile: function (index) {
|
||||
if (this.showDrawThin) {
|
||||
this.$message.warning({
|
||||
showClose: true,
|
||||
message: '抽稀操作进行中，禁止切换图层'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$refs.mapComponent.changeMapTile(index)
|
||||
},
|
||||
changeLayerStyle: function (index) {
|
||||
if (this.layerStyle === index) {
|
||||
return
|
||||
}
|
||||
this.layerStyle = index
|
||||
this.$refs.mapComponent.removeLayer(channelLayer)
|
||||
this.channelLayer = null
|
||||
this.updateChannelLayer()
|
||||
},
|
||||
updateChannelLayer: function() {
|
||||
let clientEvent = data => {
|
||||
this.closeInfoBox()
|
||||
this.$nextTick(() => {
|
||||
if (data[0].edit) {
|
||||
this.showEditInfo(data[0])
|
||||
}else {
|
||||
this.showChannelInfo(data[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
switch (this.layerStyle) {
|
||||
case 0:
|
||||
channelLayer = this.$refs.mapComponent.addPointLayer([], clientEvent, null)
|
||||
|
||||
break
|
||||
case 1:
|
||||
console.log(22221112222)
|
||||
console.log(channelLayer)
|
||||
// 直接展示
|
||||
if (channelLayer) {
|
||||
channelLayer = this.$refs.mapComponent.updatePointLayer(channelLayer, cameraList, true)
|
||||
}else {
|
||||
console.log(cameraList.length)
|
||||
setTimeout(() => {
|
||||
channelLayer = this.$refs.mapComponent.addPointLayer(cameraList, clientEvent, null)
|
||||
})
|
||||
}
|
||||
break
|
||||
case 2:
|
||||
// 碰撞检测
|
||||
if (channelLayer) {
|
||||
channelLayer = this.$refs.mapComponent.updatePointLayer(channelLayer, cameraList, true)
|
||||
}else {
|
||||
setTimeout(() => {
|
||||
channelLayer = this.$refs.mapComponent.addPointLayer(cameraList, clientEvent, {
|
||||
declutter: true
|
||||
})
|
||||
})
|
||||
}
|
||||
break
|
||||
case 3:
|
||||
// 抽稀图层
|
||||
this.$refs.mapComponent.removeLayer(channelLayer)
|
||||
channelLayer = this.$refs.mapComponent.addPointLayerGroup(cameraListForLevelMap, clientEvent)
|
||||
break
|
||||
// case 4:
|
||||
// // 聚合图层
|
||||
//
|
||||
// break
|
||||
}
|
||||
},
|
||||
getImageByChannel: function (channel) {
|
||||
if (channel.gbStatus === 'ON') {
|
||||
return 'static/images/gis/camera1.png'
|
||||
} else {
|
||||
return 'static/images/gis/camera1-offline.png'
|
||||
}
|
||||
},
|
||||
closeInfoBox: function () {
|
||||
if (this.infoBoxId !== null) {
|
||||
this.$refs.mapComponent.closeInfoBox(this.infoBoxId)
|
||||
}
|
||||
this.channel = null
|
||||
this.dragChannel = null
|
||||
},
|
||||
play: function (channel) {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '正在请求视频',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$store.dispatch('commonChanel/playChannel', channel.gbId)
|
||||
.then((data) => {
|
||||
this.$refs.devicePlayer.openDialog('media', channel.gbId, {
|
||||
streamInfo: data,
|
||||
hasAudio: channel.hasAudio
|
||||
})
|
||||
}).finally(() => {
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
edit: function (channel) {
|
||||
this.$refs.commonChannelEditDialog.openDialog(channel.gbId)
|
||||
},
|
||||
editPosition: function (channel) {
|
||||
this.closeInfoBox()
|
||||
// 开启图标可拖动
|
||||
this.$refs.mapComponent.dragInteraction.addFeatureId(channel.gbId,
|
||||
{
|
||||
startEvent: event => {
|
||||
this.closeInfoBox()
|
||||
},
|
||||
endEvent: event => {
|
||||
channel.gbLongitude = event.lonLat[0]
|
||||
channel.gbLatitude = event.lonLat[1]
|
||||
this.showEditInfo(channel)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
let position = null
|
||||
if (!!channel.gbLongitude && !!channel.gbLatitude && channel.gbLongitude > 0 && channel.gbLatitude > 0) {
|
||||
position = [channel.gbLongitude, channel.gbLatitude]
|
||||
channel['oldLongitude'] = channel.gbLongitude
|
||||
channel['oldLatitude'] = channel.gbLatitude
|
||||
}else {
|
||||
position = this.$refs.mapComponent.getCenter()
|
||||
channel['oldLongitude'] = channel.gbLongitude
|
||||
channel['oldLatitude'] = channel.gbLatitude
|
||||
channel.gbLongitude = position[0]
|
||||
channel.gbLatitude = position[1]
|
||||
}
|
||||
|
||||
channel['edit'] = true
|
||||
if (!this.$refs.mapComponent.coordinateInView(position)) {
|
||||
this.$refs.mapComponent.panTo(position, 16, () => {
|
||||
this.showEditInfo(channel)
|
||||
})
|
||||
}else {
|
||||
this.showEditInfo(channel)
|
||||
}
|
||||
|
||||
// 标记可编辑图标为红色
|
||||
this.$refs.mapComponent.setFeaturePositionById(channelLayer, channel.gbId, {
|
||||
id: channel.gbId,
|
||||
position: position,
|
||||
data: channel,
|
||||
status: 'checked'
|
||||
})
|
||||
},
|
||||
showEditInfo: function(data) {
|
||||
this.dragChannel = data
|
||||
this.infoBoxId = this.$refs.mapComponent.openInfoBox([data.gbLongitude, data.gbLatitude], this.$refs.infoboxForEdit, [0, -50])
|
||||
},
|
||||
cancelEdit: function(channel) {
|
||||
this.closeInfoBox()
|
||||
this.$refs.mapComponent.dragInteraction.removeFeatureId(channel.gbId)
|
||||
channel.gbLongitude = channel.oldLongitude
|
||||
channel.gbLatitude = channel.oldLatitude
|
||||
channel['edit'] = false
|
||||
this.$refs.mapComponent.setFeaturePositionById(channelLayer, channel.gbId, {
|
||||
id: channel.gbId,
|
||||
position: [channel.gbLongitude, channel.gbLatitude],
|
||||
data: channel,
|
||||
status: channel.gbStatus
|
||||
})
|
||||
},
|
||||
submitEdit: function(channel) {
|
||||
let position = [channel.gbLongitude, channel.gbLatitude]
|
||||
this.$store.dispatch('commonChanel/update', channel)
|
||||
.then(data => {
|
||||
this.$message.success({
|
||||
showClose: true,
|
||||
message: '保存成功'
|
||||
})
|
||||
this.closeInfoBox()
|
||||
channel['edit'] = false
|
||||
this.$refs.mapComponent.dragInteraction.removeFeatureId(channel.gbId)
|
||||
|
||||
this.$refs.mapComponent.setFeaturePositionById(channelLayer, channel.gbId, {
|
||||
id: channel.gbId,
|
||||
position: position,
|
||||
data: channel,
|
||||
status: channel.gbStatus
|
||||
})
|
||||
// 刷星树菜单
|
||||
this.$refs.deviceTree.refresh('channel' + channel.gbId)
|
||||
|
||||
})
|
||||
},
|
||||
getTrace: function (data) {
|
||||
this.clean()
|
||||
this.$refs.queryTrace.openDialog(data, (channelPositions) => {
|
||||
if (channelPositions.length === 0) {
|
||||
this.$message.warning({
|
||||
showClose: true,
|
||||
message: '未查询到轨迹信息'
|
||||
})
|
||||
} else {
|
||||
let positions = []
|
||||
for (let i = 0; i < channelPositions.length; i++) {
|
||||
if (channelPositions[i][this.longitudeStr] * channelPositions[i][this.latitudeStr] > 0) {
|
||||
positions.push([channelPositions[i][this.longitudeStr], channelPositions[i][this.latitudeStr]])
|
||||
}
|
||||
|
||||
}
|
||||
if (positions.length === 0) {
|
||||
this.$message.warning({
|
||||
showClose: true,
|
||||
message: '未查询到轨迹信息'
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
clean: function (){
|
||||
if (this.infoBoxId !== null) {
|
||||
this.$refs.mapComponent.closeInfoBox(this.infoBoxId)
|
||||
}
|
||||
},
|
||||
testArray: function (){
|
||||
this.$store.dispatch('commonChanel/test')
|
||||
},
|
||||
showDrawThinBox: function(show){
|
||||
this.showDrawThin = show
|
||||
setTimeout(() => {
|
||||
if (!show) {
|
||||
// 关闭抽稀预览
|
||||
if (this.drawThinLayer !== null) {
|
||||
this.$refs.mapComponent.removeLayer(this.drawThinLayer)
|
||||
this.drawThinLayer = null
|
||||
}
|
||||
// 清空预览数据
|
||||
this.layerGroupSource = null
|
||||
this.updateChannelLayer()
|
||||
}else {
|
||||
//
|
||||
}
|
||||
}, 1)
|
||||
},
|
||||
quicklyDrawThin: function (){
|
||||
if (this.channelLayer) {
|
||||
this.$refs.mapComponent.removeLayer(channelLayer)
|
||||
}
|
||||
if (this.drawThinLayer !== null) {
|
||||
this.$refs.mapComponent.removeLayer(this.drawThinLayer)
|
||||
this.drawThinLayer = null
|
||||
}
|
||||
// 获取待抽稀数据
|
||||
let cameraList = cameraListForSource.slice()
|
||||
|
||||
this.quicklyDrawThinLoading = true
|
||||
setTimeout(() => {
|
||||
this.drawThin(cameraList).then((layerGroupSource) => {
|
||||
this.layerGroupSource = layerGroupSource
|
||||
this.drawThinLayer = this.$refs.mapComponent.addPointLayerGroup(layerGroupSource, data => {
|
||||
this.closeInfoBox()
|
||||
// this.$nextTick(() => {
|
||||
// if (data[0].edit) {
|
||||
// this.showEditInfo(data[0])
|
||||
// }else {
|
||||
// this.showChannelInfo(data[0])
|
||||
// }
|
||||
// })
|
||||
})
|
||||
this.quicklyDrawThinLoading = false
|
||||
this.$message.success({
|
||||
showClose: true,
|
||||
message: '抽稀完成，请预览无误后保存抽稀结果'
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
boxDrawThin: function (){
|
||||
this.$message.warning({
|
||||
showClose: true,
|
||||
message: '点击地图进行框选'
|
||||
})
|
||||
// 绘制框
|
||||
this.$refs.mapComponent.startDrawBox((extent) => {
|
||||
|
||||
// 清理默认的摄像头图层
|
||||
if (channelLayer) {
|
||||
this.$refs.mapComponent.clearLayer(channelLayer)
|
||||
}
|
||||
this.$message.warning({
|
||||
showClose: true,
|
||||
message: '正在抽稀，请稍等'
|
||||
})
|
||||
setTimeout(() => {
|
||||
let zoomExtent = this.$refs.mapComponent.getZoomExtent()
|
||||
let cameraListInExtent = []
|
||||
let cameraListOutExtent = []
|
||||
if (this.layerGroupSource !== null) {
|
||||
// 从当前预览的数据里，获取待抽稀的数据
|
||||
let sourceCameraList = this.layerGroupSource.get(0)
|
||||
console.log(sourceCameraList)
|
||||
if (!sourceCameraList) {
|
||||
this.$message.warning({
|
||||
showClose: true,
|
||||
message: '数据已经全部抽稀'
|
||||
})
|
||||
return
|
||||
}
|
||||
for (let i = 0; i < sourceCameraList.length; i++) {
|
||||
let value = sourceCameraList[i]
|
||||
if (!value.data.gbLongitude || !value.data.gbLatitude) {
|
||||
continue
|
||||
}
|
||||
if (value.data.gbLongitude >= extent[0] && value.data.gbLongitude <= extent[2]
|
||||
&& value.data.gbLatitude >= extent[1] && value.data.gbLatitude <= extent[3]) {
|
||||
cameraListInExtent.push(value.data)
|
||||
}else {
|
||||
cameraListOutExtent.push(value.data)
|
||||
}
|
||||
}
|
||||
}else {
|
||||
for (let i = 0; i < cameraListForSource.length; i++) {
|
||||
let value = cameraListForSource[i]
|
||||
if (!value.gbLongitude || !value.gbLatitude) {
|
||||
continue
|
||||
}
|
||||
if (value.gbLongitude >= extent[0] && value.gbLongitude <= extent[2]
|
||||
&& value.gbLatitude >= extent[1] && value.gbLatitude <= extent[3]) {
|
||||
cameraListInExtent.push(value)
|
||||
}else {
|
||||
cameraListOutExtent.push(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 如果已经在预览，清理预览图层
|
||||
if (this.drawThinLayer !== null) {
|
||||
this.$refs.mapComponent.removeLayer(this.drawThinLayer)
|
||||
this.drawThinLayer = null
|
||||
}
|
||||
this.drawThin(cameraListInExtent).then((layerGroupSource) => {
|
||||
if (this.layerGroupSource !== null) {
|
||||
let zoom = zoomExtent[0]
|
||||
// 按照层级合并每次的抽稀结果
|
||||
while (zoom < zoomExtent[1]) {
|
||||
Array.prototype.push.apply(layerGroupSource.get(zoom), this.layerGroupSource.get(zoom))
|
||||
zoom += 1
|
||||
}
|
||||
}
|
||||
if (cameraListOutExtent.length > 0) {
|
||||
let layerSourceForOutExtent = this.createZoomLayerSource(cameraListOutExtent, zoomExtent[0])
|
||||
layerGroupSource.set(0, layerSourceForOutExtent)
|
||||
}
|
||||
this.layerGroupSource = layerGroupSource
|
||||
this.drawThinLayer = this.$refs.mapComponent.addPointLayerGroup(layerGroupSource, data => {
|
||||
this.closeInfoBox()
|
||||
// this.$nextTick(() => {
|
||||
// if (data[0].edit) {
|
||||
// this.showEditInfo(data[0])
|
||||
// }else {
|
||||
// this.showChannelInfo(data[0])
|
||||
// }
|
||||
// })
|
||||
})
|
||||
this.$message.success({
|
||||
showClose: true,
|
||||
message: '抽稀完成，请预览无误后保存抽稀结果,如需继续，请再次点击局部抽稀按钮'
|
||||
})
|
||||
})
|
||||
}, 100)
|
||||
|
||||
|
||||
})
|
||||
},
|
||||
drawThin: function (cameraListInExtent){
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
let layerGroupSource = new Map()
|
||||
// 获取全部层级
|
||||
let zoomExtent = this.$refs.mapComponent.getZoomExtent()
|
||||
let zoom = zoomExtent[0]
|
||||
let zoomCameraMap = new Map()
|
||||
let useCameraMap = new Map()
|
||||
|
||||
while (zoom < zoomExtent[1]) {
|
||||
// 计算经纬度差值
|
||||
let diff = this.$refs.mapComponent.computeDiff(this.diffPixels, zoom)
|
||||
let cameraMapForZoom = new Map()
|
||||
let useCameraMapForZoom = new Map()
|
||||
let useCameraList = Array.from(useCameraMap.values())
|
||||
for (let i = 0; i < useCameraList.length; i++) {
|
||||
let value = useCameraList[i]
|
||||
let lngGrid = Math.trunc(value.gbLongitude / diff)
|
||||
let latGrid = Math.trunc(value.gbLatitude / diff)
|
||||
let gridKey = latGrid + ':' + lngGrid
|
||||
useCameraMapForZoom.set(gridKey, value)
|
||||
}
|
||||
|
||||
for (let i = 0; i < cameraListInExtent.length; i++) {
|
||||
let value = cameraListInExtent[i]
|
||||
if (useCameraMap.has(value.gbId) || !value.gbLongitude || !value.gbLatitude) {
|
||||
continue
|
||||
}
|
||||
let lngGrid = Math.trunc(value.gbLongitude / diff)
|
||||
let latGrid = Math.trunc(value.gbLatitude / diff)
|
||||
let gridKey = latGrid + ':' + lngGrid
|
||||
if (useCameraMapForZoom.has(gridKey)) {
|
||||
continue
|
||||
}
|
||||
if (cameraMapForZoom.has(gridKey)) {
|
||||
let oldValue = cameraMapForZoom.get(gridKey)
|
||||
if (value.gbLongitude % diff < oldValue.gbLongitude % diff) {
|
||||
cameraMapForZoom.set(gridKey, value)
|
||||
useCameraMap.set(value.gbId, value)
|
||||
useCameraMap.delete(oldValue.gbId)
|
||||
}
|
||||
}else {
|
||||
cameraMapForZoom.set(gridKey, value)
|
||||
useCameraMap.set(value.gbId, value)
|
||||
}
|
||||
}
|
||||
|
||||
let cameraArray = Array.from(cameraMapForZoom.values())
|
||||
zoomCameraMap.set(zoom, cameraArray)
|
||||
let layerSource = this.createZoomLayerSource(cameraArray)
|
||||
layerGroupSource.set(zoom - 1, layerSource)
|
||||
zoom += 1
|
||||
}
|
||||
let cameraArray = []
|
||||
for (let i = 0; i < cameraListInExtent.length; i++) {
|
||||
let value = cameraListInExtent[i]
|
||||
if (useCameraMap.has(value.gbId) || !value.gbLongitude || !value.gbLatitude) {
|
||||
continue
|
||||
}
|
||||
cameraArray.push(value)
|
||||
}
|
||||
let layerSource = this.createZoomLayerSource(cameraArray)
|
||||
layerGroupSource.set(zoomExtent[1] - 1, layerSource)
|
||||
|
||||
resolve(layerGroupSource)
|
||||
}catch (error) {
|
||||
reject(error)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
createZoomLayerSource(cameraArray) {
|
||||
let dataArray = []
|
||||
for (let i = 0; i < cameraArray.length; i++) {
|
||||
let item = cameraArray[i]
|
||||
let position = [item.gbLongitude, item.gbLatitude]
|
||||
dataArray.push({
|
||||
id: item.gbId,
|
||||
position: position,
|
||||
data: item,
|
||||
status: item.gbStatus,
|
||||
image: {
|
||||
anchor: [0.5, 1],
|
||||
src: this.getImageByChannel(item)
|
||||
}
|
||||
})
|
||||
}
|
||||
return dataArray
|
||||
},
|
||||
saveDrawThin: function(){
|
||||
if (!this.layerGroupSource) {
|
||||
return
|
||||
}
|
||||
this.saveDrawThinLoading = true
|
||||
let param = []
|
||||
let keys = Array.from(this.layerGroupSource.keys())
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
let zoom = keys[i]
|
||||
let values = this.layerGroupSource.get(zoom)
|
||||
for (let j = 0; j < values.length; j++) {
|
||||
let value = values[j]
|
||||
if (zoom === 0) {
|
||||
param.push({
|
||||
gbId: value.id
|
||||
})
|
||||
}else {
|
||||
param.push({
|
||||
gbId: value.id,
|
||||
mapLevel: zoom
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$store.dispatch('commonChanel/saveLevel', param)
|
||||
.then((data) => {
|
||||
this.$message.success({
|
||||
showClose: true,
|
||||
message: '保存成功'
|
||||
})
|
||||
this.showDrawThin = false
|
||||
})
|
||||
.finally(() => {
|
||||
this.saveDrawThinLoading = false
|
||||
})
|
||||
|
||||
},
|
||||
resetDrawThinData(){
|
||||
this.$confirm('确定移除抽稀结果?', '操作提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$store.dispatch('commonChanel/resetLevel')
|
||||
.then(() => {
|
||||
this.$message.success({
|
||||
showClose: true,
|
||||
message: '数据还原成功'
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
addVectorTileLayer() {
|
||||
let geoCoordSys = this.$refs.mapComponent.getCoordSys()
|
||||
const baseUrl = window.baseUrl ? window.baseUrl : ''
|
||||
let tileUrl = ((process.env.NODE_ENV === 'development') ? process.env.VUE_APP_BASE_API : baseUrl)
|
||||
+ `/api/common/channel/map/tile/{z}/{x}/{y}?geoCoordSys=${geoCoordSys}&accessToken=${this.$store.getters.token}`
|
||||
|
||||
let clientEvent = data => {
|
||||
this.closeInfoBox()
|
||||
this.$nextTick(() => {
|
||||
this.showChannelInfo(data[0])
|
||||
// if (data[0].edit) {
|
||||
// this.showEditInfo(data[0])
|
||||
// }else {
|
||||
// this.showChannelInfo(data[0])
|
||||
// }
|
||||
})
|
||||
}
|
||||
|
||||
let tileEvent = error => {
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
let tileLayer = this.$refs.mapComponent.addVectorTileLayer(tileUrl, clientEvent, tileEvent)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.map-tool-box-bottom-right {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
.map-tool-box-top-right {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
.map-tool-box-top-left {
|
||||
position: absolute;
|
||||
left: 380px;
|
||||
top: 20px;
|
||||
}
|
||||
.map-tool-btn-group {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.map-tool-box-top-left .map-tool-btn-group {
|
||||
display: flex;
|
||||
}
|
||||
.map-tool-box-top-right .map-tool-btn-group {
|
||||
display: flex;
|
||||
}
|
||||
.map-tool-box-top-left .map-tool-btn {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.map-tool-box-top-right .map-tool-btn {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.map-tool-btn {
|
||||
border-bottom: 1px #dfdfdf solid;
|
||||
border-right: 1px #dfdfdf solid;
|
||||
width: fit-content;
|
||||
min-width: 33px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.map-tool-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
.map-tool-btn-group:last-child {
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
}
|
||||
.map-tool-draw-thin {
|
||||
position: absolute;
|
||||
top: 63px;
|
||||
left: 380px;
|
||||
border: 1px solid #dfdfdf;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.map-tool-draw-thin-density {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 400px auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.infobox-content{
|
||||
width: 270px;
|
||||
background-color: #FFFFFF;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #868686;
|
||||
}
|
||||
|
||||
.infobox-content::after {
|
||||
position: absolute;
|
||||
bottom: -11px;
|
||||
left: calc(50% - 8px);
|
||||
display: block;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url('/static/images/arrow.png') no-repeat center;
|
||||
}
|
||||
|
||||
.infobox-edit-content{
|
||||
width: 400px;
|
||||
background-color: #FFFFFF;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #868686;
|
||||
}
|
||||
|
||||
.infobox-edit-content::after {
|
||||
position: absolute;
|
||||
bottom: -11px;
|
||||
left: calc(50% - 8px);
|
||||
display: block;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url('/static/images/arrow.png') no-repeat center;
|
||||
}
|
||||
.infobox-close {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
color: #000000;
|
||||
cursor:pointer
|
||||
}
|
||||
.el-descriptions__title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
padding: 20px 20px 0px 23px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
placeholder="关键字"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
@input="getPlatformList"
|
||||
@input="queryList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
|
@ -292,6 +292,11 @@ export default {
|
|||
this.count = val
|
||||
this.getPlatformList()
|
||||
},
|
||||
queryList: function() {
|
||||
this.currentPage = 1
|
||||
this.total = 0
|
||||
this.getPlatformList()
|
||||
},
|
||||
getPlatformList: function() {
|
||||
this.$store.dispatch('platform/query', {
|
||||
count: this.count,
|
||||
|
|
|
|||
|
|
@ -158,7 +158,11 @@ export default {
|
|||
this.initData()
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error)
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
placeholder="关键字"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
@input="getStreamProxyList"
|
||||
@input="queryList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="流媒体">
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
style="margin-right: 1rem;"
|
||||
placeholder="请选择"
|
||||
default-first-option
|
||||
@change="getStreamProxyList"
|
||||
@change="queryList"
|
||||
>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
style="margin-right: 1rem;"
|
||||
placeholder="请选择"
|
||||
default-first-option
|
||||
@change="getStreamProxyList"
|
||||
@change="queryList"
|
||||
>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="正在拉流" value="true" />
|
||||
|
|
@ -189,6 +189,11 @@ export default {
|
|||
this.count = val
|
||||
this.getStreamProxyList()
|
||||
},
|
||||
queryList: function() {
|
||||
this.currentPage = 1
|
||||
this.total = 0
|
||||
this.getStreamProxyList()
|
||||
},
|
||||
getStreamProxyList: function() {
|
||||
this.$store.dispatch('streamProxy/queryList', {
|
||||
page: this.currentPage,
|
||||
|
|
@ -238,7 +243,11 @@ export default {
|
|||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
row.playLoading = false
|
||||
|
|
@ -253,7 +262,11 @@ export default {
|
|||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
queryCloudRecords: function(row) {
|
||||
|
|
@ -273,6 +286,13 @@ export default {
|
|||
})
|
||||
this.initData()
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
placeholder="关键字"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
@input="getPushList"
|
||||
@input="queryList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="流媒体">
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
style="margin-right: 1rem;"
|
||||
placeholder="请选择"
|
||||
default-first-option
|
||||
@change="getPushList"
|
||||
@change="queryList"
|
||||
>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
style="margin-right: 1rem;"
|
||||
placeholder="请选择"
|
||||
default-first-option
|
||||
@change="getPushList"
|
||||
@change="queryList"
|
||||
>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="推流中" value="true" />
|
||||
|
|
@ -206,6 +206,11 @@ export default {
|
|||
this.count = val
|
||||
this.getPushList()
|
||||
},
|
||||
queryList: function() {
|
||||
this.currentPage = 1
|
||||
this.total = 0
|
||||
this.getPushList()
|
||||
},
|
||||
getPushList: function() {
|
||||
this.$store.dispatch('streamPush/queryList', {
|
||||
page: this.currentPage,
|
||||
|
|
@ -239,6 +244,13 @@ export default {
|
|||
hasAudio: true
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
row.playLoading = false
|
||||
})
|
||||
|
|
@ -258,6 +270,13 @@ export default {
|
|||
})
|
||||
this.initData()
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
|
|
@ -294,6 +313,13 @@ export default {
|
|||
this.initData()
|
||||
this.$refs.pushListTable.clearSelection()
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
|
|
|
|||
|
|
@ -145,7 +145,11 @@ export default {
|
|||
this.getUserList()
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error)
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue