Compare commits
2 Commits
d7855eee36
...
ae75d36598
| Author | SHA1 | Date |
|---|---|---|
 石超
|
ae75d36598 | |
|
石超
|
cc602de49d |
|
|
@ -1,77 +0,0 @@
|
|||
{
|
||||
"method":"pingyixian",
|
||||
"gaodeApi": "4f992c089f9496201f6e4ea39ff3ab60",
|
||||
|
||||
"pingyixian":{
|
||||
"appname":"平邑应急决策指挥平台",
|
||||
"area":"平邑县",
|
||||
"baseUrl":"http://123.132.248.154:9210",
|
||||
"layerurl":"http://123.132.248.154:9236/applicationMars/getApplicationInfo/pingyixian",
|
||||
"uavWebSocketUrl":"ws://123.132.248.154:9211/",
|
||||
"map":{
|
||||
"center":[],
|
||||
"zoom":null
|
||||
},
|
||||
"waterUrl":"http://123.132.248.154:9235/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1692064004&maxFeatures=5000&outputFormat=application%2Fjson",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":true,
|
||||
"goodsbox":true,
|
||||
"griderbox":false
|
||||
}
|
||||
},
|
||||
"feixian":{
|
||||
"appname":"费县森林防火电子沙盘",
|
||||
"area":"费县",
|
||||
"baseUrl":"http://223.99.16.253:9001",
|
||||
"layerurl":"http://223.99.16.253:9006/applicationMars/getApplicationInfo",
|
||||
"uavWebSocketUrl":"ws://123.132.248.154:9211/",
|
||||
"map":{
|
||||
"center":[],
|
||||
"zoom":null
|
||||
},
|
||||
"waterUrl":"http://123.132.248.154:9235/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1691142509&maxFeatures=5000&outputFormat=application%2Fjson",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":false,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":true,
|
||||
"goodsbox":true,
|
||||
"griderbox":true
|
||||
}
|
||||
},
|
||||
"gaoxinqu":{
|
||||
"appname":"高新区森林防火电子沙盘",
|
||||
"area":"高新区",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
},
|
||||
"lanlingxian":{
|
||||
"appname":"兰陵县森林防火电子沙盘",
|
||||
"area":"兰陵县",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
{
|
||||
"method":"pingyixian",
|
||||
"gaodeApi": "4f992c089f9496201f6e4ea39ff3ab60",
|
||||
|
||||
"pingyixian":{
|
||||
"appname":"平邑县森林防火指挥调度系统",
|
||||
"area":"平邑县",
|
||||
"baseUrl":"http://123.132.248.154:9210",
|
||||
"layerurl":"http://123.132.248.154:9236/applicationMars/getApplicationInfo/pingyixian",
|
||||
"uavWebSocketUrl":"ws://123.132.248.154:9211/",
|
||||
"map":{
|
||||
"center":[],
|
||||
"zoom":null
|
||||
},
|
||||
"waterUrl":"http://123.132.248.154:9235/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1692064004&maxFeatures=5000&outputFormat=application%2Fjson",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":true,
|
||||
"goodsbox":true,
|
||||
"griderbox":false
|
||||
}
|
||||
},
|
||||
"feixian":{
|
||||
"appname":"费县森林防火电子沙盘",
|
||||
"area":"费县",
|
||||
"baseUrl":"http://223.99.16.253:9001",
|
||||
"layerurl":"http://223.99.16.253:9006/applicationMars/getApplicationInfo",
|
||||
"uavWebSocketUrl":"ws://123.132.248.154:9211/",
|
||||
"map":{
|
||||
"center":[],
|
||||
"zoom":null
|
||||
},
|
||||
"waterUrl":"http://123.132.248.154:9235/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1691142509&maxFeatures=5000&outputFormat=application%2Fjson",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":false,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":true,
|
||||
"goodsbox":true,
|
||||
"griderbox":true
|
||||
}
|
||||
},
|
||||
"gaoxinqu":{
|
||||
"appname":"高新区森林防火电子沙盘",
|
||||
"area":"高新区",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
},
|
||||
"lanlingxian":{
|
||||
"appname":"兰陵县森林防火电子沙盘",
|
||||
"area":"兰陵县",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
{
|
||||
"method":"pingyixian",
|
||||
"gaodeApi": "4f992c089f9496201f6e4ea39ff3ab60",
|
||||
|
||||
"pingyixian":{
|
||||
"appname":"平邑县森林防火指挥调度系统",
|
||||
"area":"平邑县",
|
||||
"baseUrl":"http://123.132.248.154:9210",
|
||||
"layerurl":"http://123.132.248.154:9236/applicationMars/getApplicationInfo/pingyixian",
|
||||
"uavWebSocketUrl":"ws://123.132.248.154:9211/",
|
||||
"map":{
|
||||
"center":[],
|
||||
"zoom":null
|
||||
},
|
||||
"waterUrl":"http://123.132.248.154:9235/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1692064004&maxFeatures=5000&outputFormat=application%2Fjson",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":true,
|
||||
"goodsbox":true,
|
||||
"griderbox":false
|
||||
}
|
||||
},
|
||||
"feixian":{
|
||||
"appname":"费县森林防火电子沙盘",
|
||||
"area":"费县",
|
||||
"baseUrl":"http://223.99.16.253:9001",
|
||||
"layerurl":"http://223.99.16.253:9006/applicationMars/getApplicationInfo",
|
||||
"uavWebSocketUrl":"ws://123.132.248.154:9211/",
|
||||
"map":{
|
||||
"center":[],
|
||||
"zoom":null
|
||||
},
|
||||
"waterUrl":"http://123.132.248.154:9235/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1691142509&maxFeatures=5000&outputFormat=application%2Fjson",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":false,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":true,
|
||||
"goodsbox":true,
|
||||
"griderbox":true
|
||||
}
|
||||
},
|
||||
"gaoxinqu":{
|
||||
"appname":"高新区森林防火电子沙盘",
|
||||
"area":"高新区",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
},
|
||||
"lanlingxian":{
|
||||
"appname":"兰陵县森林防火电子沙盘",
|
||||
"area":"兰陵县",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
{
|
||||
"method":"pingyixian",
|
||||
"gaodeApi": "4f992c089f9496201f6e4ea39ff3ab60",
|
||||
|
||||
"pingyixian":{
|
||||
"appname":"平邑县森林防火指挥调度系统",
|
||||
"area":"平邑县",
|
||||
"baseUrl":"http://123.132.248.154:9210",
|
||||
"layerurl":"http://123.132.248.154:9236/applicationMars/getApplicationInfo/pingyixian",
|
||||
"uavWebSocketUrl":"ws://123.132.248.154:9211/",
|
||||
"map":{
|
||||
"center":[],
|
||||
"zoom":null
|
||||
},
|
||||
"waterUrl":"http://123.132.248.154:9235/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1692064004&maxFeatures=5000&outputFormat=application%2Fjson",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":true,
|
||||
"goodsbox":true,
|
||||
"griderbox":false
|
||||
}
|
||||
},
|
||||
"feixian":{
|
||||
"appname":"费县森林防火电子沙盘",
|
||||
"area":"费县",
|
||||
"baseUrl":"http://223.99.16.253:9001",
|
||||
"layerurl":"http://223.99.16.253:9006/applicationMars/getApplicationInfo",
|
||||
"uavWebSocketUrl":"ws://123.132.248.154:9211/",
|
||||
"map":{
|
||||
"center":[],
|
||||
"zoom":null
|
||||
},
|
||||
"waterUrl":"http://123.132.248.154:9235/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1691142509&maxFeatures=5000&outputFormat=application%2Fjson",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":false,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":true,
|
||||
"goodsbox":true,
|
||||
"griderbox":true
|
||||
}
|
||||
},
|
||||
"gaoxinqu":{
|
||||
"appname":"高新区森林防火电子沙盘",
|
||||
"area":"高新区",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
},
|
||||
"lanlingxian":{
|
||||
"appname":"兰陵县森林防火电子沙盘",
|
||||
"area":"兰陵县",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
/**
|
||||
* 1. 在调用的时候必须写v-
|
||||
* 2. 在使用的组件上或者div的位置必须是绝对的，在需要拖拽的最外层样式上加上 position: absolute;
|
||||
* 3. 在所需要的样式上使用 v-drag
|
||||
* 4. 激活之后的样式名为 v-drag-active 没有激活的样式名为 v-drag-inactive
|
||||
*
|
||||
* @author Zhou Xinchen
|
||||
* @type {DirectiveOptions}
|
||||
*/
|
||||
const drag = Vue.directive('drag', {
|
||||
// 指令绑定到元素上回立刻执行bind函数，只执行一次
|
||||
bind: function (el) {
|
||||
|
||||
},
|
||||
//inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
|
||||
inserted: function (el) {
|
||||
|
||||
|
||||
let wMax = document.documentElement.clientWidth - el.offsetWidth;
|
||||
let hMax = document.documentElement.clientHeight - el.offsetHeight;
|
||||
|
||||
if ("ontouchstart" in window) { // 移动端
|
||||
el.ontouchstart = function (e) {
|
||||
let time1 = new Date().getTime();
|
||||
let x = e.touches[0].pageX - el.offsetLeft;
|
||||
let y = e.touches[0].pageY - el.offsetTop;
|
||||
// 抑制浏览器端默认拖拽行为，移动端是拖拽屏幕，pc端无
|
||||
// e.preventDefault(); 开启后点击 子集点击事件事件会无效
|
||||
document.ontouchmove = function (e) {
|
||||
let time2 = new Date().getTime();
|
||||
if (time2 - time1 > 300) {
|
||||
el.classList.remove('v-drag-inactive')
|
||||
el.classList.add('v-drag-active')
|
||||
}
|
||||
let left = e.touches[0].pageX - x;
|
||||
let top = e.touches[0].pageY - y;
|
||||
|
||||
if (left < 0) left = 0;
|
||||
else if (left > wMax) left = wMax;
|
||||
|
||||
if (top < 0) top = 0;
|
||||
else if (top > hMax) top = hMax;
|
||||
|
||||
el.style.left = left + 'px';
|
||||
el.style.top = top + 'px';
|
||||
}
|
||||
document.ontouchend = function () {
|
||||
let time2 = new Date().getTime();
|
||||
if (time2 - time1 > 300) {
|
||||
el.classList.remove('v-drag-active')
|
||||
el.classList.add('v-drag-inactive')
|
||||
}
|
||||
|
||||
document.ontouchmove = document.ontouchend = null;
|
||||
}
|
||||
}
|
||||
} else { // pc端
|
||||
el.onmousedown = function (e) {
|
||||
let time1 = new Date().getTime();
|
||||
let x = e.pageX - el.offsetLeft;
|
||||
let y = e.pageY - el.offsetTop;
|
||||
document.onmousemove = function (e) {
|
||||
let time2 = new Date().getTime();
|
||||
if (time2 - time1 > 300) {
|
||||
el.classList.remove('v-drag-inactive')
|
||||
el.classList.add('v-drag-active')
|
||||
}
|
||||
el.style.left = e.pageX - x + 'px';
|
||||
el.style.top = e.pageY - y + 'px';
|
||||
}
|
||||
document.onmouseup = function () {
|
||||
let time2 = new Date().getTime();
|
||||
if (time2 - time1 > 300) {
|
||||
el.classList.remove('v-drag-active')
|
||||
el.classList.add('v-drag-inactive')
|
||||
}
|
||||
document.onmousemove = document.onmouseup = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
updated: function (el) {
|
||||
}
|
||||
})
|
||||
export default drag;
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
/**
|
||||
* 1. 在调用的时候必须写v-
|
||||
* 2. 在使用的组件上或者div的位置必须是绝对的，在需要拖拽的最外层样式上加上 position: absolute;
|
||||
* 3. 在所需要的样式上使用 v-drag
|
||||
* 4. 激活之后的样式名为 v-drag-active 没有激活的样式名为 v-drag-inactive
|
||||
*
|
||||
*/
|
||||
const drag = Vue.directive('drag', {
|
||||
// 指令绑定到元素上回立刻执行bind函数，只执行一次
|
||||
bind: function (el) {
|
||||
|
||||
},
|
||||
//inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
|
||||
inserted: function (el) {
|
||||
|
||||
|
||||
let wMax = document.documentElement.clientWidth - el.offsetWidth;
|
||||
let hMax = document.documentElement.clientHeight - el.offsetHeight;
|
||||
|
||||
if ("ontouchstart" in window) { // 移动端
|
||||
el.ontouchstart = function (e) {
|
||||
let time1 = new Date().getTime();
|
||||
let x = e.touches[0].pageX - el.offsetLeft;
|
||||
let y = e.touches[0].pageY - el.offsetTop;
|
||||
// 抑制浏览器端默认拖拽行为，移动端是拖拽屏幕，pc端无
|
||||
// e.preventDefault(); 开启后点击 子集点击事件事件会无效
|
||||
document.ontouchmove = function (e) {
|
||||
let time2 = new Date().getTime();
|
||||
if (time2 - time1 > 300) {
|
||||
el.classList.remove('v-drag-inactive')
|
||||
el.classList.add('v-drag-active')
|
||||
}
|
||||
let left = e.touches[0].pageX - x;
|
||||
let top = e.touches[0].pageY - y;
|
||||
|
||||
if (left < 0) left = 0;
|
||||
else if (left > wMax) left = wMax;
|
||||
|
||||
if (top < 0) top = 0;
|
||||
else if (top > hMax) top = hMax;
|
||||
|
||||
el.style.left = left + 'px';
|
||||
el.style.top = top + 'px';
|
||||
}
|
||||
document.ontouchend = function () {
|
||||
let time2 = new Date().getTime();
|
||||
if (time2 - time1 > 300) {
|
||||
el.classList.remove('v-drag-active')
|
||||
el.classList.add('v-drag-inactive')
|
||||
}
|
||||
|
||||
document.ontouchmove = document.ontouchend = null;
|
||||
}
|
||||
}
|
||||
} else { // pc端
|
||||
el.onmousedown = function (e) {
|
||||
let time1 = new Date().getTime();
|
||||
let x = e.pageX - el.offsetLeft;
|
||||
let y = e.pageY - el.offsetTop;
|
||||
document.onmousemove = function (e) {
|
||||
let time2 = new Date().getTime();
|
||||
if (time2 - time1 > 300) {
|
||||
el.classList.remove('v-drag-inactive')
|
||||
el.classList.add('v-drag-active')
|
||||
}
|
||||
el.style.left = e.pageX - x + 'px';
|
||||
el.style.top = e.pageY - y + 'px';
|
||||
}
|
||||
document.onmouseup = function () {
|
||||
let time2 = new Date().getTime();
|
||||
if (time2 - time1 > 300) {
|
||||
el.classList.remove('v-drag-active')
|
||||
el.classList.add('v-drag-inactive')
|
||||
}
|
||||
document.onmousemove = document.onmouseup = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
updated: function (el) {
|
||||
}
|
||||
})
|
||||
export default drag;
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
/**
|
||||
* 1. 在调用的时候必须写v-
|
||||
* 2. 在使用的组件上或者div的位置必须是绝对的，在需要拖拽的最外层样式上加上 position: absolute;
|
||||
* 3. 在所需要的样式上使用 v-drag
|
||||
* 4. 激活之后的样式名为 v-drag-active 没有激活的样式名为 v-drag-inactive
|
||||
*/
|
||||
const drag = Vue.directive('drag', {
|
||||
// 指令绑定到元素上回立刻执行bind函数，只执行一次
|
||||
bind: function (el) {
|
||||
|
||||
},
|
||||
//inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
|
||||
inserted: function (el) {
|
||||
|
||||
|
||||
let wMax = document.documentElement.clientWidth - el.offsetWidth;
|
||||
let hMax = document.documentElement.clientHeight - el.offsetHeight;
|
||||
|
||||
if ("ontouchstart" in window) { // 移动端
|
||||
el.ontouchstart = function (e) {
|
||||
let time1 = new Date().getTime();
|
||||
let x = e.touches[0].pageX - el.offsetLeft;
|
||||
let y = e.touches[0].pageY - el.offsetTop;
|
||||
// 抑制浏览器端默认拖拽行为，移动端是拖拽屏幕，pc端无
|
||||
// e.preventDefault(); 开启后点击 子集点击事件事件会无效
|
||||
document.ontouchmove = function (e) {
|
||||
let time2 = new Date().getTime();
|
||||
if (time2 - time1 > 300) {
|
||||
el.classList.remove('v-drag-inactive')
|
||||
el.classList.add('v-drag-active')
|
||||
}
|
||||
let left = e.touches[0].pageX - x;
|
||||
let top = e.touches[0].pageY - y;
|
||||
|
||||
if (left < 0) left = 0;
|
||||
else if (left > wMax) left = wMax;
|
||||
|
||||
if (top < 0) top = 0;
|
||||
else if (top > hMax) top = hMax;
|
||||
|
||||
el.style.left = left + 'px';
|
||||
el.style.top = top + 'px';
|
||||
}
|
||||
document.ontouchend = function () {
|
||||
let time2 = new Date().getTime();
|
||||
if (time2 - time1 > 300) {
|
||||
el.classList.remove('v-drag-active')
|
||||
el.classList.add('v-drag-inactive')
|
||||
}
|
||||
|
||||
document.ontouchmove = document.ontouchend = null;
|
||||
}
|
||||
}
|
||||
} else { // pc端
|
||||
el.onmousedown = function (e) {
|
||||
let time1 = new Date().getTime();
|
||||
let x = e.pageX - el.offsetLeft;
|
||||
let y = e.pageY - el.offsetTop;
|
||||
document.onmousemove = function (e) {
|
||||
let time2 = new Date().getTime();
|
||||
if (time2 - time1 > 300) {
|
||||
el.classList.remove('v-drag-inactive')
|
||||
el.classList.add('v-drag-active')
|
||||
}
|
||||
el.style.left = e.pageX - x + 'px';
|
||||
el.style.top = e.pageY - y + 'px';
|
||||
}
|
||||
document.onmouseup = function () {
|
||||
let time2 = new Date().getTime();
|
||||
if (time2 - time1 > 300) {
|
||||
el.classList.remove('v-drag-active')
|
||||
el.classList.add('v-drag-inactive')
|
||||
}
|
||||
document.onmousemove = document.onmouseup = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
updated: function (el) {
|
||||
}
|
||||
})
|
||||
export default drag;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,428 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">线索合并</div>
|
||||
<div class="tip-title">将会对选中的火情线索进行合并，请您确定合</div>
|
||||
<div class="box-container">
|
||||
<span v-for="(item,index) in checkNumber" :key="index" @click="checkItem(index)" class="check-tag" :style="{'color':item.selected?'#179fc8':'#ccc'}">
|
||||
<span :key="checkNumberRondom"> 编号：{{item.clueNo}}</span>
|
||||
<!-- <i class="el-icon el-icon-close"></i> -->
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<span style="margin-right:12px;color:#fff;">{{formData.lng}} {{formData.lat}}</span>
|
||||
<el-button type="success" size="mini" @click="selectPosition()">选择位置</el-button>
|
||||
<el-button type="warning" size="mini" @click="cancle()">取消操作</el-button>
|
||||
<el-button type="primary" size="mini" @click="merage()">确认合并</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppConfigInfo from '../../../../public/config/app.json'
|
||||
import axios from 'axios'
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'mergebox',
|
||||
props:['globalmap','checkList','checkNumber'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[
|
||||
|
||||
],
|
||||
formData:{
|
||||
"address": "",
|
||||
"lng": "",
|
||||
"lat": "",
|
||||
"ids": [],
|
||||
"modifyId": localStorage.getItem("userId")
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
pathPointGraphicLayer:null,
|
||||
checkNumberRondom:1,
|
||||
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
checkList:function(e){
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
// this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
checkItem(index){
|
||||
this.checkNumber.forEach((item,idx)=>{
|
||||
this.checkNumber[idx].selected = false;
|
||||
})
|
||||
|
||||
this.checkNumber[index].selected = true;
|
||||
|
||||
let obj = this.checkNumber[index]
|
||||
this.formData.lng = obj.lng;
|
||||
this.formData.lat = obj.lat;
|
||||
this.formData.address = obj.address
|
||||
|
||||
console.log("formData",this.formData);
|
||||
this.checkNumberRondom = Math.random();
|
||||
},
|
||||
selectPosition(){
|
||||
let _this = this;
|
||||
this.globalmap.once(mars3d.EventType.click, function (event) {
|
||||
_this.globalmap.setCursor(false)
|
||||
const cartesian = event.cartesian
|
||||
const point = mars3d.LngLatPoint.fromCartesian(cartesian)
|
||||
point.format()
|
||||
_this.drawPoint(point.lng, point.lat, point.z);
|
||||
_this.formData.lng = point.lng;
|
||||
_this.formData.lat = point.lat;
|
||||
|
||||
let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + point.lng + "," + point.lat + "&extensions=base"
|
||||
axios({
|
||||
method: 'get',
|
||||
url: url,
|
||||
}).then(res => {
|
||||
let name = res.data.regeocode.formatted_address
|
||||
|
||||
_this.formData.address = name;
|
||||
|
||||
}).catch(err =>{
|
||||
console.log('ee',err)
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
drawPoint(lng,lat,z){
|
||||
if(this.pathPointGraphicLayer==null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: "/img/huozai.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: "合并后火点"
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
merage(){
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
this.formData.ids.push(item.id);
|
||||
})
|
||||
|
||||
if(this.checkList.length<1){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少1条线索",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if(!this.formData.lng && !this.formData.lat){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择合并后火点",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/MergeNewFireClueInfo",
|
||||
data:this.formData,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("success");
|
||||
}
|
||||
})
|
||||
},
|
||||
cancle(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("clsoe");
|
||||
},
|
||||
getList(){
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByAreaName",
|
||||
params:this.listQuery,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
console.log(item);
|
||||
this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
<span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="关闭状态" >物资调度</span>
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="打开状态">附近水源</span>
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="中间状态">路线规划</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.tip-title{
|
||||
width:280px;
|
||||
margin:0px auto;
|
||||
height:80px;
|
||||
padding-top:20px;
|
||||
font-size: 22px;
|
||||
font-family: OPPOSans-M, OPPOSans;
|
||||
font-weight: normal;
|
||||
color: #179fc8;
|
||||
line-height: 32px;
|
||||
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
.check-tag{
|
||||
cursor:pointer;
|
||||
margin:4px 10px;background: #112A26;border: 1px solid #1C4741;float:left;padding:3px 6px 3px 6px;border-radius: 19px 0px 19px 19px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 190px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:rgba(0,0,0,0.5);
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,431 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">线索合并</div>
|
||||
<div class="tip-title">将会对选中的火情线索进行合并，请您确定合</div>
|
||||
<div class="box-container">
|
||||
<span v-for="(item,index) in checkNumber" :key="index" @click="checkItem(index)" class="check-tag" :style="{'color':item.selected?'#179fc8':'#ccc'}">
|
||||
<span :key="checkNumberRondom"> 编号：{{item.clueNo}}</span>
|
||||
<!-- <i class="el-icon el-icon-close"></i> -->
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<span style="margin-right:12px;color:#fff;">{{formData.lng}} {{formData.lat}}</span>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="success" size="mini" @click="selectPosition()">选择位置</el-button>
|
||||
<el-button type="warning" size="mini" @click="cancle()">取消操作</el-button>
|
||||
<el-button type="primary" size="mini" @click="merage()">确认合并</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppConfigInfo from '../../../../public/config/app.json'
|
||||
import axios from 'axios'
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'mergebox',
|
||||
props:['globalmap','checkList','checkNumber'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[
|
||||
|
||||
],
|
||||
formData:{
|
||||
"address": "",
|
||||
"lng": "",
|
||||
"lat": "",
|
||||
"ids": [],
|
||||
"modifyId": localStorage.getItem("userId")
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
pathPointGraphicLayer:null,
|
||||
checkNumberRondom:1,
|
||||
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
checkList:function(e){
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
// this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
checkItem(index){
|
||||
this.checkNumber.forEach((item,idx)=>{
|
||||
this.checkNumber[idx].selected = false;
|
||||
})
|
||||
|
||||
this.checkNumber[index].selected = true;
|
||||
|
||||
let obj = this.checkNumber[index]
|
||||
this.formData.lng = obj.lng;
|
||||
this.formData.lat = obj.lat;
|
||||
this.formData.address = obj.address
|
||||
|
||||
console.log("formData",this.formData);
|
||||
this.checkNumberRondom = Math.random();
|
||||
},
|
||||
selectPosition(){
|
||||
let _this = this;
|
||||
this.globalmap.once(mars3d.EventType.click, function (event) {
|
||||
_this.globalmap.setCursor(false)
|
||||
const cartesian = event.cartesian
|
||||
const point = mars3d.LngLatPoint.fromCartesian(cartesian)
|
||||
point.format()
|
||||
_this.drawPoint(point.lng, point.lat, point.z);
|
||||
_this.formData.lng = point.lng;
|
||||
_this.formData.lat = point.lat;
|
||||
|
||||
let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + point.lng + "," + point.lat + "&extensions=base"
|
||||
axios({
|
||||
method: 'get',
|
||||
url: url,
|
||||
}).then(res => {
|
||||
let name = res.data.regeocode.formatted_address
|
||||
|
||||
_this.formData.address = name;
|
||||
|
||||
}).catch(err =>{
|
||||
console.log('ee',err)
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
drawPoint(lng,lat,z){
|
||||
if(this.pathPointGraphicLayer==null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: "/img/huozai.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: "合并后火点"
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
merage(){
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
this.formData.ids.push(item.id);
|
||||
})
|
||||
|
||||
if(this.checkList.length<1){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少1条线索",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if(!this.formData.lng && !this.formData.lat){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择合并后火点",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/MergeNewFireClueInfo",
|
||||
data:this.formData,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("success");
|
||||
}
|
||||
})
|
||||
},
|
||||
cancle(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("clsoe");
|
||||
},
|
||||
getList(){
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByAreaName",
|
||||
params:this.listQuery,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
console.log(item);
|
||||
this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
<span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="关闭状态" >物资调度</span>
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="打开状态">附近水源</span>
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="中间状态">路线规划</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.tip-title{
|
||||
width:280px;
|
||||
margin:0px auto;
|
||||
height:80px;
|
||||
padding-top:20px;
|
||||
font-size: 22px;
|
||||
font-family: OPPOSans-M, OPPOSans;
|
||||
font-weight: normal;
|
||||
color: #179fc8;
|
||||
line-height: 32px;
|
||||
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
.check-tag{
|
||||
cursor:pointer;
|
||||
margin:4px 10px;background: #112A26;border: 1px solid #1C4741;float:left;padding:3px 6px 3px 6px;border-radius: 19px 0px 19px 19px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 190px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:rgba(0,0,0,0.5);
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,431 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">线索合并</div>
|
||||
<div class="tip-title">将会对选中的火情线索进行合并，请您确定合</div>
|
||||
<div class="box-container">
|
||||
<span v-for="(item,index) in checkNumber" :key="index" @click="checkItem(index)" class="check-tag" :style="{'color':item.selected?'#179fc8':'#ccc'}">
|
||||
<span :key="checkNumberRondom"> 编号：{{item.clueNo}}</span>
|
||||
<!-- <i class="el-icon el-icon-close"></i> -->
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<span style="color:#fff;">{{formData.lng}} {{formData.lat}}</span>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="success" size="mini" @click="selectPosition()">选择位置</el-button>
|
||||
<el-button type="warning" size="mini" @click="cancle()">取消操作</el-button>
|
||||
<el-button type="primary" size="mini" @click="merage()">确认合并</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppConfigInfo from '../../../../public/config/app.json'
|
||||
import axios from 'axios'
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'mergebox',
|
||||
props:['globalmap','checkList','checkNumber'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[
|
||||
|
||||
],
|
||||
formData:{
|
||||
"address": "",
|
||||
"lng": "",
|
||||
"lat": "",
|
||||
"ids": [],
|
||||
"modifyId": localStorage.getItem("userId")
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
pathPointGraphicLayer:null,
|
||||
checkNumberRondom:1,
|
||||
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
checkList:function(e){
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
// this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
checkItem(index){
|
||||
this.checkNumber.forEach((item,idx)=>{
|
||||
this.checkNumber[idx].selected = false;
|
||||
})
|
||||
|
||||
this.checkNumber[index].selected = true;
|
||||
|
||||
let obj = this.checkNumber[index]
|
||||
this.formData.lng = obj.lng;
|
||||
this.formData.lat = obj.lat;
|
||||
this.formData.address = obj.address
|
||||
|
||||
console.log("formData",this.formData);
|
||||
this.checkNumberRondom = Math.random();
|
||||
},
|
||||
selectPosition(){
|
||||
let _this = this;
|
||||
this.globalmap.once(mars3d.EventType.click, function (event) {
|
||||
_this.globalmap.setCursor(false)
|
||||
const cartesian = event.cartesian
|
||||
const point = mars3d.LngLatPoint.fromCartesian(cartesian)
|
||||
point.format()
|
||||
_this.drawPoint(point.lng, point.lat, point.z);
|
||||
_this.formData.lng = point.lng;
|
||||
_this.formData.lat = point.lat;
|
||||
|
||||
let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + point.lng + "," + point.lat + "&extensions=base"
|
||||
axios({
|
||||
method: 'get',
|
||||
url: url,
|
||||
}).then(res => {
|
||||
let name = res.data.regeocode.formatted_address
|
||||
|
||||
_this.formData.address = name;
|
||||
|
||||
}).catch(err =>{
|
||||
console.log('ee',err)
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
drawPoint(lng,lat,z){
|
||||
if(this.pathPointGraphicLayer==null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: "/img/huozai.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: "合并后火点"
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
merage(){
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
this.formData.ids.push(item.id);
|
||||
})
|
||||
|
||||
if(this.checkList.length<1){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少1条线索",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if(!this.formData.lng && !this.formData.lat){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择合并后火点",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/MergeNewFireClueInfo",
|
||||
data:this.formData,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("success");
|
||||
}
|
||||
})
|
||||
},
|
||||
cancle(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("clsoe");
|
||||
},
|
||||
getList(){
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByAreaName",
|
||||
params:this.listQuery,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
console.log(item);
|
||||
this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
<span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="关闭状态" >物资调度</span>
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="打开状态">附近水源</span>
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="中间状态">路线规划</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.tip-title{
|
||||
width:280px;
|
||||
margin:0px auto;
|
||||
height:80px;
|
||||
padding-top:20px;
|
||||
font-size: 22px;
|
||||
font-family: OPPOSans-M, OPPOSans;
|
||||
font-weight: normal;
|
||||
color: #179fc8;
|
||||
line-height: 32px;
|
||||
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
.check-tag{
|
||||
cursor:pointer;
|
||||
margin:4px 10px;background: #112A26;border: 1px solid #1C4741;float:left;padding:3px 6px 3px 6px;border-radius: 19px 0px 19px 19px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 190px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:rgba(0,0,0,0.5);
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,431 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">线索合并</div>
|
||||
<div class="tip-title">将会对选中的火情线索进行合并，请您确定合</div>
|
||||
<div class="box-container">
|
||||
<span v-for="(item,index) in checkNumber" :key="index" @click="checkItem(index)" class="check-tag" :style="{'color':item.selected?'#179fc8':'#ccc'}">
|
||||
<span :key="checkNumberRondom"> 编号：{{item.clueNo}}</span>
|
||||
<!-- <i class="el-icon el-icon-close"></i> -->
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align:center;margin:0px 28px;">
|
||||
<span style="color:#fff;">{{formData.lng}} {{formData.lat}}</span>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="success" size="mini" @click="selectPosition()">选择位置</el-button>
|
||||
<el-button type="warning" size="mini" @click="cancle()">取消操作</el-button>
|
||||
<el-button type="primary" size="mini" @click="merage()">确认合并</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppConfigInfo from '../../../../public/config/app.json'
|
||||
import axios from 'axios'
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'mergebox',
|
||||
props:['globalmap','checkList','checkNumber'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[
|
||||
|
||||
],
|
||||
formData:{
|
||||
"address": "",
|
||||
"lng": "",
|
||||
"lat": "",
|
||||
"ids": [],
|
||||
"modifyId": localStorage.getItem("userId")
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
pathPointGraphicLayer:null,
|
||||
checkNumberRondom:1,
|
||||
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
checkList:function(e){
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
// this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
checkItem(index){
|
||||
this.checkNumber.forEach((item,idx)=>{
|
||||
this.checkNumber[idx].selected = false;
|
||||
})
|
||||
|
||||
this.checkNumber[index].selected = true;
|
||||
|
||||
let obj = this.checkNumber[index]
|
||||
this.formData.lng = obj.lng;
|
||||
this.formData.lat = obj.lat;
|
||||
this.formData.address = obj.address
|
||||
|
||||
console.log("formData",this.formData);
|
||||
this.checkNumberRondom = Math.random();
|
||||
},
|
||||
selectPosition(){
|
||||
let _this = this;
|
||||
this.globalmap.once(mars3d.EventType.click, function (event) {
|
||||
_this.globalmap.setCursor(false)
|
||||
const cartesian = event.cartesian
|
||||
const point = mars3d.LngLatPoint.fromCartesian(cartesian)
|
||||
point.format()
|
||||
_this.drawPoint(point.lng, point.lat, point.z);
|
||||
_this.formData.lng = point.lng;
|
||||
_this.formData.lat = point.lat;
|
||||
|
||||
let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + point.lng + "," + point.lat + "&extensions=base"
|
||||
axios({
|
||||
method: 'get',
|
||||
url: url,
|
||||
}).then(res => {
|
||||
let name = res.data.regeocode.formatted_address
|
||||
|
||||
_this.formData.address = name;
|
||||
|
||||
}).catch(err =>{
|
||||
console.log('ee',err)
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
drawPoint(lng,lat,z){
|
||||
if(this.pathPointGraphicLayer==null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: "/img/huozai.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: "合并后火点"
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
merage(){
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
this.formData.ids.push(item.id);
|
||||
})
|
||||
|
||||
if(this.checkList.length<1){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少1条线索",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if(!this.formData.lng && !this.formData.lat){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择合并后火点",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/MergeNewFireClueInfo",
|
||||
data:this.formData,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("success");
|
||||
}
|
||||
})
|
||||
},
|
||||
cancle(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("clsoe");
|
||||
},
|
||||
getList(){
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByAreaName",
|
||||
params:this.listQuery,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
console.log(item);
|
||||
this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
<span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="关闭状态" >物资调度</span>
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="打开状态">附近水源</span>
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="中间状态">路线规划</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.tip-title{
|
||||
width:280px;
|
||||
margin:0px auto;
|
||||
height:80px;
|
||||
padding-top:20px;
|
||||
font-size: 22px;
|
||||
font-family: OPPOSans-M, OPPOSans;
|
||||
font-weight: normal;
|
||||
color: #179fc8;
|
||||
line-height: 32px;
|
||||
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
.check-tag{
|
||||
cursor:pointer;
|
||||
margin:4px 10px;background: #112A26;border: 1px solid #1C4741;float:left;padding:3px 6px 3px 6px;border-radius: 19px 0px 19px 19px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 190px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:rgba(0,0,0,0.5);
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,430 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">线索合并</div>
|
||||
<div class="tip-title">将会对选中的火情线索进行合并，请您确定合</div>
|
||||
<div class="box-container">
|
||||
<span v-for="(item,index) in checkNumber" :key="index" @click="checkItem(index)" class="check-tag" :style="{'color':item.selected?'#179fc8':'#ccc'}">
|
||||
<span :key="checkNumberRondom"> 编号：{{item.clueNo}}</span>
|
||||
<!-- <i class="el-icon el-icon-close"></i> -->
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align:center;margin:10px 28px;">
|
||||
<span style="color:#fff;">{{formData.lng}} {{formData.lat}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="success" size="mini" @click="selectPosition()">选择位置</el-button>
|
||||
<el-button type="warning" size="mini" @click="cancle()">取消操作</el-button>
|
||||
<el-button type="primary" size="mini" @click="merage()">确认合并</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppConfigInfo from '../../../../public/config/app.json'
|
||||
import axios from 'axios'
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'mergebox',
|
||||
props:['globalmap','checkList','checkNumber'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[
|
||||
|
||||
],
|
||||
formData:{
|
||||
"address": "",
|
||||
"lng": "",
|
||||
"lat": "",
|
||||
"ids": [],
|
||||
"modifyId": localStorage.getItem("userId")
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
pathPointGraphicLayer:null,
|
||||
checkNumberRondom:1,
|
||||
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
checkList:function(e){
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
// this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
checkItem(index){
|
||||
this.checkNumber.forEach((item,idx)=>{
|
||||
this.checkNumber[idx].selected = false;
|
||||
})
|
||||
|
||||
this.checkNumber[index].selected = true;
|
||||
|
||||
let obj = this.checkNumber[index]
|
||||
this.formData.lng = obj.lng;
|
||||
this.formData.lat = obj.lat;
|
||||
this.formData.address = obj.address
|
||||
|
||||
console.log("formData",this.formData);
|
||||
this.checkNumberRondom = Math.random();
|
||||
},
|
||||
selectPosition(){
|
||||
let _this = this;
|
||||
this.globalmap.once(mars3d.EventType.click, function (event) {
|
||||
_this.globalmap.setCursor(false)
|
||||
const cartesian = event.cartesian
|
||||
const point = mars3d.LngLatPoint.fromCartesian(cartesian)
|
||||
point.format()
|
||||
_this.drawPoint(point.lng, point.lat, point.z);
|
||||
_this.formData.lng = point.lng;
|
||||
_this.formData.lat = point.lat;
|
||||
|
||||
let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + point.lng + "," + point.lat + "&extensions=base"
|
||||
axios({
|
||||
method: 'get',
|
||||
url: url,
|
||||
}).then(res => {
|
||||
let name = res.data.regeocode.formatted_address
|
||||
|
||||
_this.formData.address = name;
|
||||
|
||||
}).catch(err =>{
|
||||
console.log('ee',err)
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
drawPoint(lng,lat,z){
|
||||
if(this.pathPointGraphicLayer==null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: "/img/huozai.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: "合并后火点"
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
merage(){
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
this.formData.ids.push(item.id);
|
||||
})
|
||||
|
||||
if(this.checkList.length<1){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少1条线索",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if(!this.formData.lng && !this.formData.lat){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择合并后火点",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/MergeNewFireClueInfo",
|
||||
data:this.formData,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("success");
|
||||
}
|
||||
})
|
||||
},
|
||||
cancle(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("clsoe");
|
||||
},
|
||||
getList(){
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByAreaName",
|
||||
params:this.listQuery,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
console.log(item);
|
||||
this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
<span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="关闭状态" >物资调度</span>
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="打开状态">附近水源</span>
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="中间状态">路线规划</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.tip-title{
|
||||
width:280px;
|
||||
margin:0px auto;
|
||||
height:80px;
|
||||
padding-top:20px;
|
||||
font-size: 22px;
|
||||
font-family: OPPOSans-M, OPPOSans;
|
||||
font-weight: normal;
|
||||
color: #179fc8;
|
||||
line-height: 32px;
|
||||
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
.check-tag{
|
||||
cursor:pointer;
|
||||
margin:4px 10px;background: #112A26;border: 1px solid #1C4741;float:left;padding:3px 6px 3px 6px;border-radius: 19px 0px 19px 19px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 190px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:rgba(0,0,0,0.5);
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,430 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">线索合并</div>
|
||||
<div class="tip-title">将会对选中的火情线索进行合并，请您确定合</div>
|
||||
<div class="box-container">
|
||||
<span v-for="(item,index) in checkNumber" :key="index" @click="checkItem(index)" class="check-tag" :style="{'color':item.selected?'#179fc8':'#ccc'}">
|
||||
<span :key="checkNumberRondom"> 编号：{{item.clueNo}}</span>
|
||||
<!-- <i class="el-icon el-icon-close"></i> -->
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align:center;margin:10px 28px;">
|
||||
<span style="color:#fff;">{{formData.lng}} {{formData.lat}}</span>
|
||||
</div>
|
||||
<div style="padding-bottom: 20px;">
|
||||
<el-button type="success" size="mini" @click="selectPosition()">选择位置</el-button>
|
||||
<el-button type="warning" size="mini" @click="cancle()">取消操作</el-button>
|
||||
<el-button type="primary" size="mini" @click="merage()">确认合并</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppConfigInfo from '../../../../public/config/app.json'
|
||||
import axios from 'axios'
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'mergebox',
|
||||
props:['globalmap','checkList','checkNumber'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[
|
||||
|
||||
],
|
||||
formData:{
|
||||
"address": "",
|
||||
"lng": "",
|
||||
"lat": "",
|
||||
"ids": [],
|
||||
"modifyId": localStorage.getItem("userId")
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
pathPointGraphicLayer:null,
|
||||
checkNumberRondom:1,
|
||||
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
checkList:function(e){
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
// this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
checkItem(index){
|
||||
this.checkNumber.forEach((item,idx)=>{
|
||||
this.checkNumber[idx].selected = false;
|
||||
})
|
||||
|
||||
this.checkNumber[index].selected = true;
|
||||
|
||||
let obj = this.checkNumber[index]
|
||||
this.formData.lng = obj.lng;
|
||||
this.formData.lat = obj.lat;
|
||||
this.formData.address = obj.address
|
||||
|
||||
console.log("formData",this.formData);
|
||||
this.checkNumberRondom = Math.random();
|
||||
},
|
||||
selectPosition(){
|
||||
let _this = this;
|
||||
this.globalmap.once(mars3d.EventType.click, function (event) {
|
||||
_this.globalmap.setCursor(false)
|
||||
const cartesian = event.cartesian
|
||||
const point = mars3d.LngLatPoint.fromCartesian(cartesian)
|
||||
point.format()
|
||||
_this.drawPoint(point.lng, point.lat, point.z);
|
||||
_this.formData.lng = point.lng;
|
||||
_this.formData.lat = point.lat;
|
||||
|
||||
let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + point.lng + "," + point.lat + "&extensions=base"
|
||||
axios({
|
||||
method: 'get',
|
||||
url: url,
|
||||
}).then(res => {
|
||||
let name = res.data.regeocode.formatted_address
|
||||
|
||||
_this.formData.address = name;
|
||||
|
||||
}).catch(err =>{
|
||||
console.log('ee',err)
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
drawPoint(lng,lat,z){
|
||||
if(this.pathPointGraphicLayer==null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: "/img/huozai.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: "合并后火点"
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
merage(){
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
this.formData.ids.push(item.id);
|
||||
})
|
||||
|
||||
if(this.checkList.length<1){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少1条线索",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if(!this.formData.lng && !this.formData.lat){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择合并后火点",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/MergeNewFireClueInfo",
|
||||
data:this.formData,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("success");
|
||||
}
|
||||
})
|
||||
},
|
||||
cancle(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("clsoe");
|
||||
},
|
||||
getList(){
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByAreaName",
|
||||
params:this.listQuery,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
console.log(item);
|
||||
this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
<span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="关闭状态" >物资调度</span>
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="打开状态">附近水源</span>
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="中间状态">路线规划</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.tip-title{
|
||||
width:280px;
|
||||
margin:0px auto;
|
||||
height:80px;
|
||||
padding-top:20px;
|
||||
font-size: 22px;
|
||||
font-family: OPPOSans-M, OPPOSans;
|
||||
font-weight: normal;
|
||||
color: #179fc8;
|
||||
line-height: 32px;
|
||||
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
.check-tag{
|
||||
cursor:pointer;
|
||||
margin:4px 10px;background: #112A26;border: 1px solid #1C4741;float:left;padding:3px 6px 3px 6px;border-radius: 19px 0px 19px 19px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 190px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:rgba(0,0,0,0.5);
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">视频监控列表</div>
|
||||
<div class="box-container">
|
||||
<div class="table-header">
|
||||
<div>监控名称</div>
|
||||
<div>设备类型</div>
|
||||
<div>通道号码</div>
|
||||
<div>操作</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item" v-for="(item,index) in list" :key="index">
|
||||
<div>{{item.deviceName}}</div>
|
||||
<div>{{item.cameraType == 1 ? '乐橙' : '海康'}}</div>
|
||||
<div>通道:{{item.channelNumber}}</div>
|
||||
<div>
|
||||
<el-button type="primary" size="mini" @click="showLCmonitorbox(item.equipmentSerialNumber,item.channelNumber)">查看</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
data(){
|
||||
return{
|
||||
list:[]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getMonitorList();
|
||||
},
|
||||
methods:{
|
||||
showLCmonitorbox(equipmentSerialNumber,channelNumber){
|
||||
this.$emit("showLCmonitorbox",{deviceId:equipmentSerialNumber, channelId:channelNumber})
|
||||
},
|
||||
getMonitorList(){
|
||||
axios({
|
||||
method: 'post',
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
},
|
||||
url: BASE_URL+'/LiveManager/GetAllLiveData?pageIndex=1&pageSize=200',
|
||||
}).then(res => {
|
||||
this.list = res.data.data;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size: 100% 100%;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:0px 12px;
|
||||
height: calc( 100% - 60px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #008cff;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 40px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:36px;
|
||||
background: #003cff2f;
|
||||
font-size:12px;
|
||||
text-align: center;
|
||||
line-height:36px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0059ff50;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:25%;
|
||||
color:#eee;
|
||||
overflow: hidden;
|
||||
height:36px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">视频监控列表</div>
|
||||
<div class="box-container">
|
||||
<div class="table-header">
|
||||
<div>监控名称</div>
|
||||
<div>设备类型</div>
|
||||
<div>通道号码</div>
|
||||
<div>操作</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item" v-for="(item,index) in list" :key="index">
|
||||
<div>{{item.deviceName}}</div>
|
||||
<div>{{item.cameraType == 1 ? '乐橙' : '海康'}}</div>
|
||||
<div>通道:{{item.channelNumber}}</div>
|
||||
<div>
|
||||
<el-button type="primary" size="mini" @click="showLCmonitorbox(item.equipmentSerialNumber,item.channelNumber)">查看</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
data(){
|
||||
return{
|
||||
list:[]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getMonitorList();
|
||||
},
|
||||
methods:{
|
||||
showLCmonitorbox(equipmentSerialNumber,channelNumber){
|
||||
this.$emit("showLCmonitorbox",{deviceId:equipmentSerialNumber, channelId:channelNumber})
|
||||
},
|
||||
getMonitorList(){
|
||||
axios({
|
||||
method: 'post',
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
},
|
||||
url: BASE_URL+'/LiveManager/GetAllLiveData?pageIndex=1&pageSize=200',
|
||||
}).then(res => {
|
||||
this.list = res.data.data;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size: 100% 100%;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:0px 12px;
|
||||
height: calc( 100% - 60px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #008cff;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 40px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:36px;
|
||||
background: #003cff2f;
|
||||
font-size:12px;
|
||||
text-align: center;
|
||||
line-height:36px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0059ff50;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:25%;
|
||||
color:#eee;
|
||||
overflow: hidden;
|
||||
height:36px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">视频监控列表</div>
|
||||
<div class="box-container">
|
||||
<div class="table-header">
|
||||
<div>监控名称</div>
|
||||
<div>设备类型</div>
|
||||
<div>通道号码</div>
|
||||
<div>操作</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item" v-for="(item,index) in list" :key="index">
|
||||
<div>{{item.deviceName}}</div>
|
||||
<div>{{item.cameraType == 1 ? '乐橙' : '海康'}}</div>
|
||||
<div>通道:{{item.channelNumber}}</div>
|
||||
<div>
|
||||
<el-button type="primary" size="mini" @click="showLCmonitorbox(item.equipmentSerialNumber,item.channelNumber)">查看</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
data(){
|
||||
return{
|
||||
list:[]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getMonitorList();
|
||||
},
|
||||
methods:{
|
||||
showLCmonitorbox(equipmentSerialNumber,channelNumber){
|
||||
this.$emit("showLCmonitorbox",{deviceId:equipmentSerialNumber, channelId:channelNumber})
|
||||
},
|
||||
getMonitorList(){
|
||||
axios({
|
||||
method: 'post',
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
},
|
||||
url: BASE_URL+'/LiveManager/GetAllLiveData?pageIndex=1&pageSize=200',
|
||||
}).then(res => {
|
||||
this.list = res.data.data;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size: 100% 100%;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:0px 12px;
|
||||
height: calc( 100% - 60px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #008cff;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 40px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:36px;
|
||||
background: #003cff2f;
|
||||
font-size:12px;
|
||||
text-align: center;
|
||||
line-height:36px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0059ff50;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:25%;
|
||||
color:#eee;
|
||||
overflow: hidden;
|
||||
height:36px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,565 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-name">人员</div>
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-title" >
|
||||
<div class="flex" style="margin-top:15px;margin-bottom:5px;">
|
||||
<span class="titlebox">人员类型：</span>
|
||||
<div class="flex-1">
|
||||
<el-checkbox-group v-model="checkList" @change="checkChange">
|
||||
<el-checkbox label="护林员" value="1" style="margin-right:10px;"></el-checkbox>
|
||||
<el-checkbox label="消防员" value="2"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-bottom:10px;">
|
||||
<span class="titlebox">距离：</span>
|
||||
<div>
|
||||
<el-radio-group v-model="distanceradio" @input="radioChange">
|
||||
<el-radio :label="1" class="mr-1">小于1km</el-radio>
|
||||
<el-radio :label="2" class="mr-1">1~5km</el-radio>
|
||||
<el-radio :label="3" class="mr-1">5~10km</el-radio>
|
||||
<el-radio :label="4" class="mr-1">大于10km</el-radio>
|
||||
<el-radio :label="5">全部</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="titlebox"></span>
|
||||
<div class="flex">
|
||||
<span>自定义</span>
|
||||
<el-input type="number" size="mini" style="width:100px;margin-right:10px;margin-left: 10px;" v-model="startdistance"></el-input>
|
||||
<el-input type="number" size="mini" style="width:100px;margin-right: 10px;" v-model="enddistance"></el-input>
|
||||
<el-button type="primary" size="mini" icon="el-icon-search" @click="selListData">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="table-body">
|
||||
<div class="table-li" v-for="(item,index) in listData" :key="index">
|
||||
<div class="flex jc-sb max-h">
|
||||
<div class="flex-1 max-h flex column jc-sb fc-w max-w cursor" @click="flyToPosition(item)">
|
||||
<div class="flex fz-16 ai-c">
|
||||
<div class="phonecheckbox" :class="checkPhoneArr.includes(item.phone)?'active':''" @click.stop="phoneCheckClick(item)"></div>
|
||||
<div class="color1 mr-2">{{item.username}}</div>
|
||||
<div>{{item.phone}}</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="flex fz-10">
|
||||
<div class="li-desc">{{item.type}}</div>
|
||||
<div class="li-desc">距离：<span class="color2">{{item.distance}}公里</span></div>
|
||||
<div class="li-desc">预计到达时间：<span class="color2">{{item.duration}}分钟</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex ai-c jc-e" style="width:75px" v-if="fireData.reportTime && areaName == 'feixian'">
|
||||
<img class="img-box" src="/img/phone.png" @click="callPhone(item.phone)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex ai-c jc-e callbox" v-if="fireData.reportTime && areaName == 'feixian'">
|
||||
<el-button type="primary" size="large" @click="callPhoneAll">一键呼叫</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postMethodCommon } from '@/api/common.js';
|
||||
import appConfig from '../../../../public/config/app.json'
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
props:['globalmap','fireData'],
|
||||
data(){
|
||||
return{
|
||||
checkList:['护林员','消防员'],
|
||||
listData:[],
|
||||
allData:[],
|
||||
fireLngLat:'',
|
||||
distanceradio: 3,
|
||||
personnelGraphicLayer: null,
|
||||
graphicLayerArr: [],
|
||||
areaName: localStorage.getItem("areaName"),
|
||||
checkPhoneArr:[],
|
||||
startdistance: null,
|
||||
enddistance: null
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
fireData:{
|
||||
handler(newVal,oldVal) {
|
||||
this.fireLngLat = [newVal.lng,newVal.lat]
|
||||
this.getListData();
|
||||
},
|
||||
immediate: true,
|
||||
// 开启深度监听 deep
|
||||
deep: true
|
||||
},
|
||||
status:{
|
||||
handler(newVal,oldVal) {
|
||||
console.log('status',newVal)
|
||||
}
|
||||
},
|
||||
},
|
||||
created(){
|
||||
// console.log('appConfig',appConfig.gaodeApi)
|
||||
// this.getListData();
|
||||
window.videoCall = this.videoCall
|
||||
},
|
||||
methods:{
|
||||
videoCall(phone){
|
||||
this.$emit("videoCall",phone);
|
||||
},
|
||||
close(){
|
||||
this.graphicLayerArr.forEach(item =>{
|
||||
this.personnelGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
phoneCheckClick(item){
|
||||
if(!item.phone){
|
||||
return
|
||||
}
|
||||
if(this.checkPhoneArr.includes(item.phone)){
|
||||
this.checkPhoneArr = this.checkPhoneArr.filter(val => val != item.phone)
|
||||
}else{
|
||||
this.checkPhoneArr.push(item.phone)
|
||||
}
|
||||
},
|
||||
checkChange(){
|
||||
this.getListData();
|
||||
},
|
||||
flyToPosition(item){
|
||||
console.log('ii',item)
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
radioChange(e){
|
||||
let arr = this.allData
|
||||
let newArr = []
|
||||
if(this.distanceradio == 1){
|
||||
arr.forEach(item =>{
|
||||
if(item.distance < 1){
|
||||
newArr.push(item)
|
||||
}
|
||||
})
|
||||
this.listData = newArr
|
||||
}
|
||||
if(this.distanceradio == 2){
|
||||
arr.forEach(item =>{
|
||||
if(item.distance >= 1 && item.distance < 5){
|
||||
newArr.push(item)
|
||||
}
|
||||
})
|
||||
this.listData = newArr
|
||||
}
|
||||
if(this.distanceradio == 3){
|
||||
arr.forEach(item =>{
|
||||
if(item.distance >= 5 && item.distance < 10){
|
||||
newArr.push(item)
|
||||
}
|
||||
})
|
||||
this.listData = newArr
|
||||
}
|
||||
if(this.distanceradio == 4){
|
||||
arr.forEach(item =>{
|
||||
if(item.distance >= 10){
|
||||
newArr.push(item)
|
||||
}
|
||||
})
|
||||
this.listData = newArr
|
||||
}
|
||||
if(this.distanceradio == 5){
|
||||
this.listData = arr
|
||||
}
|
||||
|
||||
this.listData.sort((a,b)=>{
|
||||
return a.distance - b.distance
|
||||
})
|
||||
this.handleGraphic()
|
||||
|
||||
},
|
||||
selListData(){
|
||||
let arr = this.allData
|
||||
let newArr = []
|
||||
arr.forEach(item =>{
|
||||
if(Number(item.distance) >= this.startdistance && Number(item.distance) < this.enddistance){
|
||||
console.log('item',item)
|
||||
newArr.push(item)
|
||||
}
|
||||
})
|
||||
this.listData = newArr
|
||||
|
||||
this.listData.sort((a,b)=>{
|
||||
return a.distance - b.distance
|
||||
})
|
||||
this.handleGraphic()
|
||||
},
|
||||
handleGraphic(){
|
||||
if(this.personnelGraphicLayer == null){
|
||||
this.personnelGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.personnelGraphicLayer);
|
||||
}
|
||||
this.graphicLayerArr.forEach(item =>{
|
||||
this.personnelGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.graphicLayerArr = []
|
||||
this.listData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.4, 200000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
"popup": `<div class="marsTiltPanel marsTiltPanel-theme-green">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.username}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话：</div>
|
||||
<div class="data-value">${item.phone}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label"></div>
|
||||
<div class="data-value">
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,
|
||||
"popupOptions":{
|
||||
"offsetY":-30,
|
||||
"offsetX":30,
|
||||
"template":"{content}",
|
||||
"horizontalOrigin":"Cesium.HorizontalOrigin.LEFT",
|
||||
"verticalOrigin":"Cesium.VerticalOrigin.CENTER"
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.graphicLayerArr.push(graphic)
|
||||
|
||||
this.personnelGraphicLayer.addGraphic(graphic);
|
||||
})
|
||||
},
|
||||
callPhone(phone){
|
||||
let time1 = this.fireData.reportTime.split(' ')[0]
|
||||
let time2 = this.fireData.reportTime.split(' ')[1]
|
||||
let date1 = time1.split('-')
|
||||
let date2 = time2.split(':')
|
||||
let dates = date1[0]+'年'+date1[1]+'月'+date1[2]+'日 '+date2[0]+'时'+date2[1]+'分'+date2[2]+'秒'
|
||||
let param = {
|
||||
phoneNumbers: phone,
|
||||
time: dates,
|
||||
address:this.fireData.address
|
||||
}
|
||||
let url = '/FireCodePC/EventAssign?phoneNumbers='+param.phoneNumbers+'&time='+param.time+'&address='+param.address
|
||||
postMethodCommon('/FireCodePC/EventAssign',param).then(res =>{
|
||||
console.log('sa',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
callPhoneAll(){
|
||||
if(!this.fireData.reportTime){
|
||||
return
|
||||
}
|
||||
let phoneArr = []
|
||||
let time1 = this.fireData.reportTime.split(' ')[0]
|
||||
let time2 = this.fireData.reportTime.split(' ')[1]
|
||||
let date1 = time1.split('-')
|
||||
let date2 = time2.split(':')
|
||||
let dates = date1[0]+'年'+date1[1]+'月'+date1[2]+'日 '+date2[0]+'时'+date2[1]+'分'+date2[2]+'秒'
|
||||
|
||||
|
||||
if(this.checkPhoneArr.length>0){
|
||||
phoneArr = this.checkPhoneArr
|
||||
}else{
|
||||
this.listData.forEach(item =>{
|
||||
phoneArr.push(item.phone)
|
||||
})
|
||||
}
|
||||
|
||||
let param = {
|
||||
phoneNumbers: phoneArr.join(','),
|
||||
time: dates,
|
||||
address:this.fireData.address
|
||||
}
|
||||
postMethodCommon('/FireCodePC/EventAssign',param).then(res =>{
|
||||
console.log('sa',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
getListData(){
|
||||
let arr = []
|
||||
let _this = this
|
||||
if(this.checkList.length>1){
|
||||
arr = [1,2]
|
||||
}else if(this.checkList.length<1){
|
||||
arr = []
|
||||
}else{
|
||||
if(this.checkList[0] == '护林员'){
|
||||
arr = [1]
|
||||
}else{
|
||||
arr = [2]
|
||||
}
|
||||
}
|
||||
|
||||
this.personnelGraphicLayer = null
|
||||
|
||||
postMethodCommon("/FireCodePC/GetForestRangers?areaname="+this.areaName,arr).then(res =>{
|
||||
let rel = res.data
|
||||
// let rel = []
|
||||
// res.data.forEach((item,index) =>{
|
||||
// if(index == 1){
|
||||
// rel.push(item)
|
||||
// }
|
||||
// })
|
||||
|
||||
this.handleData(rel).then(dl =>{
|
||||
dl.sort((a,b)=>{
|
||||
return a.distance - b.distance
|
||||
})
|
||||
|
||||
_this.listData = dl
|
||||
_this.allData = dl
|
||||
setTimeout(()=>{
|
||||
_this.radioChange()
|
||||
},1000)
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
handleData(data){
|
||||
data.forEach(item =>{
|
||||
let url = "https://restapi.amap.com/v3/direction/driving?key="+appConfig.gaodeApi+"&origin=" + this.fireLngLat[0] + "," + this.fireLngLat[1] +
|
||||
"&destination=" + item.lng + "," + item.lat + "&extensions=base"
|
||||
axios({
|
||||
method: 'get',
|
||||
url: url,
|
||||
}).then(res => {
|
||||
if(res.data.route.paths[0]){
|
||||
let obj = res.data.route.paths[0]
|
||||
item.distance = (obj.distance/1000).toFixed(2)
|
||||
item.duration = Math.round(obj.duration/60)
|
||||
}
|
||||
}).catch(err =>{
|
||||
console.log('ee',err)
|
||||
})
|
||||
})
|
||||
return Promise.resolve(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:110px;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
.titlebox{
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:0px 12px;
|
||||
height: calc( 100% - 180px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 70px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .table-li{
|
||||
width:100%;
|
||||
height:99px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
.el-checkbox{
|
||||
color: #fff;
|
||||
margin-right: 0;
|
||||
}
|
||||
.el-checkbox__label{
|
||||
padding-left: 0;
|
||||
}
|
||||
.el-checkbox__input{
|
||||
display: inline;
|
||||
}
|
||||
.el-radio{
|
||||
margin-right: 10px;
|
||||
color: #fff;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a43bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
.color1{
|
||||
color: #156EF9;
|
||||
}
|
||||
.color2{
|
||||
color: #E8A700;
|
||||
}
|
||||
.line{
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border: 1px solid #2D80EE;
|
||||
}
|
||||
.li-desc{
|
||||
padding: 3px 7px;
|
||||
background: #14332F;
|
||||
border-radius: 2px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.li-desc:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
.img-box{
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 44px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.callbox{
|
||||
width: 95%;
|
||||
height: 80px;
|
||||
}
|
||||
.phonecheckbox{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.phonecheckbox.active{
|
||||
background: #409EFF;
|
||||
border: 1px solid #409EFF;
|
||||
position: relative;
|
||||
}
|
||||
.phonecheckbox.active::after{
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 1px solid #FFF;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
left: 4px;
|
||||
top: 1px;
|
||||
position: absolute;
|
||||
transition: transform .15s ease-in .05s;
|
||||
transform-origin: center;
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,565 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-name">人员</div>
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-title" >
|
||||
<div class="flex" style="margin-top:15px;margin-bottom:5px;">
|
||||
<span class="titlebox">人员类型：</span>
|
||||
<div class="flex-1">
|
||||
<el-checkbox-group v-model="checkList" @change="checkChange">
|
||||
<el-checkbox label="护林员" value="1" style="margin-right:10px;"></el-checkbox>
|
||||
<el-checkbox label="消防员" value="2"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-bottom:10px;">
|
||||
<span class="titlebox">距离：</span>
|
||||
<div>
|
||||
<el-radio-group v-model="distanceradio" @input="radioChange">
|
||||
<el-radio :label="1" class="mr-1">小于1km</el-radio>
|
||||
<el-radio :label="2" class="mr-1">1~5km</el-radio>
|
||||
<el-radio :label="3" class="mr-1">5~10km</el-radio>
|
||||
<el-radio :label="4" class="mr-1">大于10km</el-radio>
|
||||
<el-radio :label="5">全部</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="titlebox"></span>
|
||||
<div class="flex">
|
||||
<span>自定义</span>
|
||||
<el-input type="number" size="mini" style="width:100px;margin-right:10px;margin-left: 10px;" v-model="startdistance"></el-input>
|
||||
<el-input type="number" size="mini" style="width:100px;margin-right: 10px;" v-model="enddistance"></el-input>
|
||||
<el-button type="primary" size="mini" icon="el-icon-search" @click="selListData">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="table-body">
|
||||
<div class="table-li" v-for="(item,index) in listData" :key="index">
|
||||
<div class="flex jc-sb max-h">
|
||||
<div class="flex-1 max-h flex column jc-sb fc-w max-w cursor" @click="flyToPosition(item)">
|
||||
<div class="flex fz-16 ai-c">
|
||||
<div class="phonecheckbox" :class="checkPhoneArr.includes(item.phone)?'active':''" @click.stop="phoneCheckClick(item)"></div>
|
||||
<div class="color1 mr-2">{{item.username}}</div>
|
||||
<div>{{item.phone}}</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="flex fz-10">
|
||||
<div class="li-desc">{{item.type}}</div>
|
||||
<div class="li-desc">距离：<span class="color2">{{item.distance}}公里</span></div>
|
||||
<div class="li-desc">预计到达时间：<span class="color2">{{item.duration}}分钟</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex ai-c jc-e" style="width:75px" v-if="fireData.reportTime && areaName == 'feixian'">
|
||||
<img class="img-box" src="/img/phone.png" @click="callPhone(item.phone)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex ai-c jc-e callbox" v-if="fireData.reportTime && areaName == 'feixian'">
|
||||
<el-button type="primary" size="large" @click="callPhoneAll">一键呼叫</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postMethodCommon } from '@/api/common.js';
|
||||
import appConfig from '../../../../public/config/app.json'
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
props:['globalmap','fireData'],
|
||||
data(){
|
||||
return{
|
||||
checkList:['护林员','消防员'],
|
||||
listData:[],
|
||||
allData:[],
|
||||
fireLngLat:'',
|
||||
distanceradio: 3,
|
||||
personnelGraphicLayer: null,
|
||||
graphicLayerArr: [],
|
||||
areaName: localStorage.getItem("areaName"),
|
||||
checkPhoneArr:[],
|
||||
startdistance: null,
|
||||
enddistance: null
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
fireData:{
|
||||
handler(newVal,oldVal) {
|
||||
this.fireLngLat = [newVal.lng,newVal.lat]
|
||||
this.getListData();
|
||||
},
|
||||
immediate: true,
|
||||
// 开启深度监听 deep
|
||||
deep: true
|
||||
},
|
||||
status:{
|
||||
handler(newVal,oldVal) {
|
||||
console.log('status',newVal)
|
||||
}
|
||||
},
|
||||
},
|
||||
created(){
|
||||
// console.log('appConfig',appConfig.gaodeApi)
|
||||
// this.getListData();
|
||||
window.videoCall = this.videoCall
|
||||
},
|
||||
methods:{
|
||||
videoCall(phone){
|
||||
this.$emit("videoCall",phone);
|
||||
},
|
||||
close(){
|
||||
this.graphicLayerArr.forEach(item =>{
|
||||
this.personnelGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
phoneCheckClick(item){
|
||||
if(!item.phone){
|
||||
return
|
||||
}
|
||||
if(this.checkPhoneArr.includes(item.phone)){
|
||||
this.checkPhoneArr = this.checkPhoneArr.filter(val => val != item.phone)
|
||||
}else{
|
||||
this.checkPhoneArr.push(item.phone)
|
||||
}
|
||||
},
|
||||
checkChange(){
|
||||
this.getListData();
|
||||
},
|
||||
flyToPosition(item){
|
||||
console.log('ii',item)
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
radioChange(e){
|
||||
let arr = this.allData
|
||||
let newArr = []
|
||||
if(this.distanceradio == 1){
|
||||
arr.forEach(item =>{
|
||||
if(item.distance < 1){
|
||||
newArr.push(item)
|
||||
}
|
||||
})
|
||||
this.listData = newArr
|
||||
}
|
||||
if(this.distanceradio == 2){
|
||||
arr.forEach(item =>{
|
||||
if(item.distance >= 1 && item.distance < 5){
|
||||
newArr.push(item)
|
||||
}
|
||||
})
|
||||
this.listData = newArr
|
||||
}
|
||||
if(this.distanceradio == 3){
|
||||
arr.forEach(item =>{
|
||||
if(item.distance >= 5 && item.distance < 10){
|
||||
newArr.push(item)
|
||||
}
|
||||
})
|
||||
this.listData = newArr
|
||||
}
|
||||
if(this.distanceradio == 4){
|
||||
arr.forEach(item =>{
|
||||
if(item.distance >= 10){
|
||||
newArr.push(item)
|
||||
}
|
||||
})
|
||||
this.listData = newArr
|
||||
}
|
||||
if(this.distanceradio == 5){
|
||||
this.listData = arr
|
||||
}
|
||||
|
||||
this.listData.sort((a,b)=>{
|
||||
return a.distance - b.distance
|
||||
})
|
||||
this.handleGraphic()
|
||||
|
||||
},
|
||||
selListData(){
|
||||
let arr = this.allData
|
||||
let newArr = []
|
||||
arr.forEach(item =>{
|
||||
if(Number(item.distance) >= this.startdistance && Number(item.distance) < this.enddistance){
|
||||
console.log('item',item)
|
||||
newArr.push(item)
|
||||
}
|
||||
})
|
||||
this.listData = newArr
|
||||
|
||||
this.listData.sort((a,b)=>{
|
||||
return a.distance - b.distance
|
||||
})
|
||||
this.handleGraphic()
|
||||
},
|
||||
handleGraphic(){
|
||||
if(this.personnelGraphicLayer == null){
|
||||
this.personnelGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.personnelGraphicLayer);
|
||||
}
|
||||
this.graphicLayerArr.forEach(item =>{
|
||||
this.personnelGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.graphicLayerArr = []
|
||||
this.listData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.4, 200000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
"popup": `<div class="marsTiltPanel marsTiltPanel-theme-green">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.username}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话：</div>
|
||||
<div class="data-value">${item.phone}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label"></div>
|
||||
<div class="data-value">
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,
|
||||
"popupOptions":{
|
||||
"offsetY":-30,
|
||||
"offsetX":30,
|
||||
"template":"{content}",
|
||||
"horizontalOrigin":"Cesium.HorizontalOrigin.LEFT",
|
||||
"verticalOrigin":"Cesium.VerticalOrigin.CENTER"
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.graphicLayerArr.push(graphic)
|
||||
|
||||
this.personnelGraphicLayer.addGraphic(graphic);
|
||||
})
|
||||
},
|
||||
callPhone(phone){
|
||||
let time1 = this.fireData.reportTime.split(' ')[0]
|
||||
let time2 = this.fireData.reportTime.split(' ')[1]
|
||||
let date1 = time1.split('-')
|
||||
let date2 = time2.split(':')
|
||||
let dates = date1[0]+'年'+date1[1]+'月'+date1[2]+'日 '+date2[0]+'时'+date2[1]+'分'+date2[2]+'秒'
|
||||
let param = {
|
||||
phoneNumbers: phone,
|
||||
time: dates,
|
||||
address:this.fireData.address
|
||||
}
|
||||
let url = '/FireCodePC/EventAssign?phoneNumbers='+param.phoneNumbers+'&time='+param.time+'&address='+param.address
|
||||
postMethodCommon('/FireCodePC/EventAssign',param).then(res =>{
|
||||
console.log('sa',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
callPhoneAll(){
|
||||
if(!this.fireData.reportTime){
|
||||
return
|
||||
}
|
||||
let phoneArr = []
|
||||
let time1 = this.fireData.reportTime.split(' ')[0]
|
||||
let time2 = this.fireData.reportTime.split(' ')[1]
|
||||
let date1 = time1.split('-')
|
||||
let date2 = time2.split(':')
|
||||
let dates = date1[0]+'年'+date1[1]+'月'+date1[2]+'日 '+date2[0]+'时'+date2[1]+'分'+date2[2]+'秒'
|
||||
|
||||
|
||||
if(this.checkPhoneArr.length>0){
|
||||
phoneArr = this.checkPhoneArr
|
||||
}else{
|
||||
this.listData.forEach(item =>{
|
||||
phoneArr.push(item.phone)
|
||||
})
|
||||
}
|
||||
|
||||
let param = {
|
||||
phoneNumbers: phoneArr.join(','),
|
||||
time: dates,
|
||||
address:this.fireData.address
|
||||
}
|
||||
postMethodCommon('/FireCodePC/EventAssign',param).then(res =>{
|
||||
console.log('sa',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
getListData(){
|
||||
let arr = []
|
||||
let _this = this
|
||||
if(this.checkList.length>1){
|
||||
arr = [1,2]
|
||||
}else if(this.checkList.length<1){
|
||||
arr = []
|
||||
}else{
|
||||
if(this.checkList[0] == '护林员'){
|
||||
arr = [1]
|
||||
}else{
|
||||
arr = [2]
|
||||
}
|
||||
}
|
||||
|
||||
this.personnelGraphicLayer = null
|
||||
|
||||
postMethodCommon("/FireCodePC/GetForestRangers?areaname="+this.areaName,arr).then(res =>{
|
||||
let rel = res.data
|
||||
// let rel = []
|
||||
// res.data.forEach((item,index) =>{
|
||||
// if(index == 1){
|
||||
// rel.push(item)
|
||||
// }
|
||||
// })
|
||||
|
||||
this.handleData(rel).then(dl =>{
|
||||
dl.sort((a,b)=>{
|
||||
return a.distance - b.distance
|
||||
})
|
||||
|
||||
_this.listData = dl
|
||||
_this.allData = dl
|
||||
setTimeout(()=>{
|
||||
_this.radioChange()
|
||||
},1000)
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
handleData(data){
|
||||
data.forEach(item =>{
|
||||
let url = "https://restapi.amap.com/v3/direction/driving?key="+appConfig.gaodeApi+"&origin=" + this.fireLngLat[0] + "," + this.fireLngLat[1] +
|
||||
"&destination=" + item.lng + "," + item.lat + "&extensions=base"
|
||||
axios({
|
||||
method: 'get',
|
||||
url: url,
|
||||
}).then(res => {
|
||||
if(res.data.route.paths[0]){
|
||||
let obj = res.data.route.paths[0]
|
||||
item.distance = (obj.distance/1000).toFixed(2)
|
||||
item.duration = Math.round(obj.duration/60)
|
||||
}
|
||||
}).catch(err =>{
|
||||
console.log('ee',err)
|
||||
})
|
||||
})
|
||||
return Promise.resolve(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 68px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:110px;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
.titlebox{
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:0px 12px;
|
||||
height: calc( 100% - 180px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 70px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .table-li{
|
||||
width:100%;
|
||||
height:99px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
.el-checkbox{
|
||||
color: #fff;
|
||||
margin-right: 0;
|
||||
}
|
||||
.el-checkbox__label{
|
||||
padding-left: 0;
|
||||
}
|
||||
.el-checkbox__input{
|
||||
display: inline;
|
||||
}
|
||||
.el-radio{
|
||||
margin-right: 10px;
|
||||
color: #fff;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a43bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
.color1{
|
||||
color: #156EF9;
|
||||
}
|
||||
.color2{
|
||||
color: #E8A700;
|
||||
}
|
||||
.line{
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border: 1px solid #2D80EE;
|
||||
}
|
||||
.li-desc{
|
||||
padding: 3px 7px;
|
||||
background: #14332F;
|
||||
border-radius: 2px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.li-desc:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
.img-box{
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 44px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.callbox{
|
||||
width: 95%;
|
||||
height: 80px;
|
||||
}
|
||||
.phonecheckbox{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.phonecheckbox.active{
|
||||
background: #409EFF;
|
||||
border: 1px solid #409EFF;
|
||||
position: relative;
|
||||
}
|
||||
.phonecheckbox.active::after{
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 1px solid #FFF;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
left: 4px;
|
||||
top: 1px;
|
||||
position: absolute;
|
||||
transition: transform .15s ease-in .05s;
|
||||
transform-origin: center;
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,577 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">火情线索</div>
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="draw" v-show="active == 1">
|
||||
<div class="news" v-for="(item,index) in list" :key="index" >
|
||||
<div class="checkbox-container" @click="checkNews(index)" :key="checkRandom">
|
||||
<i class="el-icon el-icon-check" v-show="item.check" ></i>
|
||||
</div>
|
||||
<div class="news-container">
|
||||
<div class="title">
|
||||
<div class="title-title">
|
||||
{{item.sourceTypeName}}上报了一条火情线索
|
||||
</div>
|
||||
<div
|
||||
class="daohang"
|
||||
style="height:24px;text-align:center;line-height:24px;border-radius:0px;float:right;color:#fff;position:relative;top:8px;cursor:pointer;"
|
||||
|
||||
>编号：{{item.clueNo}}</div>
|
||||
</div>
|
||||
<p class="desc">
|
||||
<span class="time">上报时间：<span style="color:#aaa;">{{item.reportTime}}</span></span>
|
||||
|
||||
<span class="time">上报人员：<span style="color:#aaa;">{{item.reportPerson}}</span></span>
|
||||
</p>
|
||||
<p class="desc">
|
||||
<span>火情描述：<span style="color:#aaa;">{{item.describe}}</span></span>
|
||||
<el-button type="warning" size="mini" style="float:right;position:relative;top:-12px;" @click="toPosition(item);">位置</el-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<el-button type="primary" size="mini" @click="merage">线索合并</el-button>
|
||||
<el-button type="warning" size="mini" @click="deal">标为误报线索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import axios from 'axios'
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'toolbox',
|
||||
props:['globalmap','checkList','checkNumber','mergeSuccessRandom'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[],
|
||||
listParams:{
|
||||
areaname:localStorage.getItem("areaName"),
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
checkRandom:1111,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
mergeSuccessRandom:function(e){
|
||||
this.checkList = [];
|
||||
this.checkNumber = [];
|
||||
this.getList();
|
||||
},
|
||||
globalmap:function(e){
|
||||
this.drawPoint();
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
window.jiankong = this.jiankong;
|
||||
window.renyuan = this.renyuan
|
||||
},
|
||||
mounted(){
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods:{
|
||||
deal(){
|
||||
let arr = [];
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
arr.push(item.id);
|
||||
})
|
||||
|
||||
if(arr.length<=0){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少一条线索！"
|
||||
})
|
||||
return;
|
||||
}
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/BatchUpdatFireStatue",
|
||||
data:arr,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"设置成功",
|
||||
})
|
||||
this.getList();
|
||||
}
|
||||
})
|
||||
},
|
||||
merage(){
|
||||
|
||||
this.$emit('merge')
|
||||
|
||||
},
|
||||
close(){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
this.$emit("close")
|
||||
},
|
||||
jiankong(e){
|
||||
this.$emit("jiankong",e);
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
renyuan(e){
|
||||
this.$emit("renyuan",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
checkNews(index){
|
||||
this.list[index].check = !this.list[index].check;
|
||||
this.getCheckList(this.list[index].check,this.list[index].clueNo);
|
||||
this.getCheckNumber(this.list[index].check,this.list[index]);
|
||||
this.checkRandom = Math.random()*100000000;
|
||||
console.log(this.list)
|
||||
},
|
||||
getCheckList(type,id){
|
||||
if(type){
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
if(idx == -1){
|
||||
this.checkList.push(id);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
this.checkList.splice(idx,1);
|
||||
}
|
||||
},
|
||||
getCheckNumber(type,options){
|
||||
let idx = null;
|
||||
if(type){
|
||||
|
||||
let obj = this.checkNumber.find((item,index)=>{
|
||||
return options.id == item.id
|
||||
})
|
||||
|
||||
if(!obj){
|
||||
this.checkNumber.push(options);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
if(item.id == options.id){
|
||||
idx = index;
|
||||
}
|
||||
})
|
||||
this.checkNumber.splice(idx,1);
|
||||
}
|
||||
|
||||
console.log("checknumber",this.checkNumber);
|
||||
},
|
||||
|
||||
getList(){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByState",
|
||||
params:this.listParams,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
this.list.forEach((item,index)=>{
|
||||
this.list[index].check = false;
|
||||
})
|
||||
|
||||
if(this.list.length == 0){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
}else{
|
||||
if(this.globalmap){
|
||||
this.drawPoint();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(){
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
|
||||
_self.graphicLayer.clear();
|
||||
|
||||
|
||||
_self.list.forEach((item,index)=>{
|
||||
let graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
|
||||
// this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
_self.graphicLayer.removeGraphic(_self.graphicWinodw);
|
||||
_self.graphicLayer.removeGraphic(_self.graphicPoint)
|
||||
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
// // <span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="物资调度" >物资调度</span>
|
||||
initWebSocket(){
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
if(obj.Module == '火情信息'){
|
||||
_this.getList()
|
||||
_this.$emit("getlistSocket")
|
||||
}else if(obj.Module == '任务下发'){
|
||||
_this.$emit("getTaskListSocket")
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"您的浏览器不支持 WebSocket!",
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.title-title{
|
||||
width:200px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
float:left;
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 90px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:#123668;
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #0a43bfcc;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,577 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">火情线索</div>
|
||||
<!-- <div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div> -->
|
||||
<div class="box-container">
|
||||
<div class="draw" v-show="active == 1">
|
||||
<div class="news" v-for="(item,index) in list" :key="index" >
|
||||
<div class="checkbox-container" @click="checkNews(index)" :key="checkRandom">
|
||||
<i class="el-icon el-icon-check" v-show="item.check" ></i>
|
||||
</div>
|
||||
<div class="news-container">
|
||||
<div class="title">
|
||||
<div class="title-title">
|
||||
{{item.sourceTypeName}}上报了一条火情线索
|
||||
</div>
|
||||
<div
|
||||
class="daohang"
|
||||
style="height:24px;text-align:center;line-height:24px;border-radius:0px;float:right;color:#fff;position:relative;top:8px;cursor:pointer;"
|
||||
|
||||
>编号：{{item.clueNo}}</div>
|
||||
</div>
|
||||
<p class="desc">
|
||||
<span class="time">上报时间：<span style="color:#aaa;">{{item.reportTime}}</span></span>
|
||||
|
||||
<span class="time">上报人员：<span style="color:#aaa;">{{item.reportPerson}}</span></span>
|
||||
</p>
|
||||
<p class="desc">
|
||||
<span>火情描述：<span style="color:#aaa;">{{item.describe}}</span></span>
|
||||
<el-button type="warning" size="mini" style="float:right;position:relative;top:-12px;" @click="toPosition(item);">位置</el-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<el-button type="primary" size="mini" @click="merage">线索合并</el-button>
|
||||
<el-button type="warning" size="mini" @click="deal">标为误报线索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import axios from 'axios'
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'toolbox',
|
||||
props:['globalmap','checkList','checkNumber','mergeSuccessRandom'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[],
|
||||
listParams:{
|
||||
areaname:localStorage.getItem("areaName"),
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
checkRandom:1111,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
mergeSuccessRandom:function(e){
|
||||
this.checkList = [];
|
||||
this.checkNumber = [];
|
||||
this.getList();
|
||||
},
|
||||
globalmap:function(e){
|
||||
this.drawPoint();
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
window.jiankong = this.jiankong;
|
||||
window.renyuan = this.renyuan
|
||||
},
|
||||
mounted(){
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods:{
|
||||
deal(){
|
||||
let arr = [];
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
arr.push(item.id);
|
||||
})
|
||||
|
||||
if(arr.length<=0){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少一条线索！"
|
||||
})
|
||||
return;
|
||||
}
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/BatchUpdatFireStatue",
|
||||
data:arr,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"设置成功",
|
||||
})
|
||||
this.getList();
|
||||
}
|
||||
})
|
||||
},
|
||||
merage(){
|
||||
|
||||
this.$emit('merge')
|
||||
|
||||
},
|
||||
close(){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
this.$emit("close")
|
||||
},
|
||||
jiankong(e){
|
||||
this.$emit("jiankong",e);
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
renyuan(e){
|
||||
this.$emit("renyuan",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
checkNews(index){
|
||||
this.list[index].check = !this.list[index].check;
|
||||
this.getCheckList(this.list[index].check,this.list[index].clueNo);
|
||||
this.getCheckNumber(this.list[index].check,this.list[index]);
|
||||
this.checkRandom = Math.random()*100000000;
|
||||
console.log(this.list)
|
||||
},
|
||||
getCheckList(type,id){
|
||||
if(type){
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
if(idx == -1){
|
||||
this.checkList.push(id);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
this.checkList.splice(idx,1);
|
||||
}
|
||||
},
|
||||
getCheckNumber(type,options){
|
||||
let idx = null;
|
||||
if(type){
|
||||
|
||||
let obj = this.checkNumber.find((item,index)=>{
|
||||
return options.id == item.id
|
||||
})
|
||||
|
||||
if(!obj){
|
||||
this.checkNumber.push(options);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
if(item.id == options.id){
|
||||
idx = index;
|
||||
}
|
||||
})
|
||||
this.checkNumber.splice(idx,1);
|
||||
}
|
||||
|
||||
console.log("checknumber",this.checkNumber);
|
||||
},
|
||||
|
||||
getList(){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByState",
|
||||
params:this.listParams,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
this.list.forEach((item,index)=>{
|
||||
this.list[index].check = false;
|
||||
})
|
||||
|
||||
if(this.list.length == 0){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
}else{
|
||||
if(this.globalmap){
|
||||
this.drawPoint();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(){
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
|
||||
_self.graphicLayer.clear();
|
||||
|
||||
|
||||
_self.list.forEach((item,index)=>{
|
||||
let graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
|
||||
// this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
_self.graphicLayer.removeGraphic(_self.graphicWinodw);
|
||||
_self.graphicLayer.removeGraphic(_self.graphicPoint)
|
||||
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
// // <span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="物资调度" >物资调度</span>
|
||||
initWebSocket(){
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
if(obj.Module == '火情信息'){
|
||||
_this.getList()
|
||||
_this.$emit("getlistSocket")
|
||||
}else if(obj.Module == '任务下发'){
|
||||
_this.$emit("getTaskListSocket")
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"您的浏览器不支持 WebSocket!",
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.title-title{
|
||||
width:200px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
float:left;
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 90px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:#123668;
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #0a43bfcc;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,579 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">火情线索</div>
|
||||
<!-- <div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div> -->
|
||||
<div class="box-container">
|
||||
<div class="draw" v-show="active == 1">
|
||||
<div class="news" v-for="(item,index) in list" :key="index" >
|
||||
<div class="checkbox-container" @click="checkNews(index)" :key="checkRandom">
|
||||
<i class="el-icon el-icon-check" v-show="item.check" ></i>
|
||||
</div>
|
||||
<div class="news-container">
|
||||
<div class="title">
|
||||
<div class="title-title">
|
||||
{{item.sourceTypeName}}上报了一条火情线索
|
||||
</div>
|
||||
<div
|
||||
class="daohang"
|
||||
style="height:24px;text-align:center;line-height:24px;border-radius:0px;float:right;color:#fff;position:relative;top:8px;cursor:pointer;"
|
||||
|
||||
>编号：{{item.clueNo}}</div>
|
||||
</div>
|
||||
<p class="desc">
|
||||
<span class="time">上报时间：<span style="color:#aaa;">{{item.reportTime}}</span></span>
|
||||
|
||||
<span class="time">上报人员：<span style="color:#aaa;">{{item.reportPerson}}</span></span>
|
||||
</p>
|
||||
<p class="desc">
|
||||
<span>火情描述：<span style="color:#aaa;">{{item.describe}}</span></span>
|
||||
<el-button type="warning" size="mini" style="float:right;position:relative;top:-12px;" @click="toPosition(item);">位置</el-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<el-button type="primary" size="mini" @click="merage">线索合并</el-button>
|
||||
<el-button type="warning" size="mini" @click="deal">标为误报线索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import axios from 'axios'
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'toolbox',
|
||||
props:['globalmap','checkList','checkNumber','mergeSuccessRandom'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[],
|
||||
listParams:{
|
||||
areaname:localStorage.getItem("areaName"),
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
checkRandom:1111,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
mergeSuccessRandom:function(e){
|
||||
this.checkList = [];
|
||||
this.checkNumber = [];
|
||||
this.getList();
|
||||
},
|
||||
globalmap:function(e){
|
||||
this.drawPoint();
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
window.jiankong = this.jiankong;
|
||||
window.renyuan = this.renyuan
|
||||
},
|
||||
mounted(){
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods:{
|
||||
deal(){
|
||||
let arr = [];
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
arr.push(item.id);
|
||||
})
|
||||
|
||||
if(arr.length<=0){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少一条线索！"
|
||||
})
|
||||
return;
|
||||
}
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/BatchUpdatFireStatue",
|
||||
data:arr,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"设置成功",
|
||||
})
|
||||
this.getList();
|
||||
}
|
||||
})
|
||||
},
|
||||
merage(){
|
||||
|
||||
this.$emit('merge')
|
||||
|
||||
},
|
||||
close(){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
this.$emit("close")
|
||||
},
|
||||
jiankong(e){
|
||||
this.$emit("jiankong",e);
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
renyuan(e){
|
||||
this.$emit("renyuan",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
checkNews(index){
|
||||
this.list[index].check = !this.list[index].check;
|
||||
this.getCheckList(this.list[index].check,this.list[index].clueNo);
|
||||
this.getCheckNumber(this.list[index].check,this.list[index]);
|
||||
this.checkRandom = Math.random()*100000000;
|
||||
console.log(this.list)
|
||||
},
|
||||
getCheckList(type,id){
|
||||
if(type){
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
if(idx == -1){
|
||||
this.checkList.push(id);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
this.checkList.splice(idx,1);
|
||||
}
|
||||
},
|
||||
getCheckNumber(type,options){
|
||||
let idx = null;
|
||||
if(type){
|
||||
|
||||
let obj = this.checkNumber.find((item,index)=>{
|
||||
return options.id == item.id
|
||||
})
|
||||
|
||||
if(!obj){
|
||||
this.checkNumber.push(options);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
if(item.id == options.id){
|
||||
idx = index;
|
||||
}
|
||||
})
|
||||
this.checkNumber.splice(idx,1);
|
||||
}
|
||||
|
||||
console.log("checknumber",this.checkNumber);
|
||||
},
|
||||
|
||||
getList(){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByState",
|
||||
params:this.listParams,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
this.list.forEach((item,index)=>{
|
||||
this.list[index].check = false;
|
||||
})
|
||||
|
||||
if(this.list.length == 0){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
}else{
|
||||
if(this.globalmap){
|
||||
this.drawPoint();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(){
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
|
||||
_self.graphicLayer.clear();
|
||||
|
||||
|
||||
_self.list.forEach((item,index)=>{
|
||||
let graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
|
||||
// this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
_self.graphicLayer.removeGraphic(_self.graphicWinodw);
|
||||
_self.graphicLayer.removeGraphic(_self.graphicPoint)
|
||||
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
// // <span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="物资调度" >物资调度</span>
|
||||
initWebSocket(){
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
if(!evt){
|
||||
|
||||
}
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
if(obj.Module == '火情信息'){
|
||||
_this.getList()
|
||||
_this.$emit("getlistSocket")
|
||||
}else if(obj.Module == '任务下发'){
|
||||
_this.$emit("getTaskListSocket")
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"您的浏览器不支持 WebSocket!",
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.title-title{
|
||||
width:200px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
float:left;
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 90px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:#123668;
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #0a43bfcc;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,580 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">火情线索</div>
|
||||
<!-- <div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div> -->
|
||||
<div class="box-container">
|
||||
<div class="draw" v-show="active == 1">
|
||||
<div class="news" v-for="(item,index) in list" :key="index" >
|
||||
<div class="checkbox-container" @click="checkNews(index)" :key="checkRandom">
|
||||
<i class="el-icon el-icon-check" v-show="item.check" ></i>
|
||||
</div>
|
||||
<div class="news-container">
|
||||
<div class="title">
|
||||
<div class="title-title">
|
||||
{{item.sourceTypeName}}上报了一条火情线索
|
||||
</div>
|
||||
<div
|
||||
class="daohang"
|
||||
style="height:24px;text-align:center;line-height:24px;border-radius:0px;float:right;color:#fff;position:relative;top:8px;cursor:pointer;"
|
||||
|
||||
>编号：{{item.clueNo}}</div>
|
||||
</div>
|
||||
<p class="desc">
|
||||
<span class="time">上报时间：<span style="color:#aaa;">{{item.reportTime}}</span></span>
|
||||
|
||||
<span class="time">上报人员：<span style="color:#aaa;">{{item.reportPerson}}</span></span>
|
||||
</p>
|
||||
<p class="desc">
|
||||
<span>火情描述：<span style="color:#aaa;">{{item.describe}}</span></span>
|
||||
<el-button type="warning" size="mini" style="float:right;position:relative;top:-12px;" @click="toPosition(item);">位置</el-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<el-button type="primary" size="mini" @click="merage">线索合并</el-button>
|
||||
<el-button type="warning" size="mini" @click="deal">标为误报线索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import axios from 'axios'
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'toolbox',
|
||||
props:['globalmap','checkList','checkNumber','mergeSuccessRandom'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[],
|
||||
listParams:{
|
||||
areaname:localStorage.getItem("areaName"),
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
checkRandom:1111,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
mergeSuccessRandom:function(e){
|
||||
this.checkList = [];
|
||||
this.checkNumber = [];
|
||||
this.getList();
|
||||
},
|
||||
globalmap:function(e){
|
||||
this.drawPoint();
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
window.jiankong = this.jiankong;
|
||||
window.renyuan = this.renyuan
|
||||
},
|
||||
mounted(){
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods:{
|
||||
deal(){
|
||||
let arr = [];
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
arr.push(item.id);
|
||||
})
|
||||
|
||||
if(arr.length<=0){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少一条线索！"
|
||||
})
|
||||
return;
|
||||
}
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/BatchUpdatFireStatue",
|
||||
data:arr,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"设置成功",
|
||||
})
|
||||
this.getList();
|
||||
}
|
||||
})
|
||||
},
|
||||
merage(){
|
||||
|
||||
this.$emit('merge')
|
||||
|
||||
},
|
||||
close(){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
this.$emit("close")
|
||||
},
|
||||
jiankong(e){
|
||||
this.$emit("jiankong",e);
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
renyuan(e){
|
||||
this.$emit("renyuan",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
checkNews(index){
|
||||
this.list[index].check = !this.list[index].check;
|
||||
this.getCheckList(this.list[index].check,this.list[index].clueNo);
|
||||
this.getCheckNumber(this.list[index].check,this.list[index]);
|
||||
this.checkRandom = Math.random()*100000000;
|
||||
console.log(this.list)
|
||||
},
|
||||
getCheckList(type,id){
|
||||
if(type){
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
if(idx == -1){
|
||||
this.checkList.push(id);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
this.checkList.splice(idx,1);
|
||||
}
|
||||
},
|
||||
getCheckNumber(type,options){
|
||||
let idx = null;
|
||||
if(type){
|
||||
|
||||
let obj = this.checkNumber.find((item,index)=>{
|
||||
return options.id == item.id
|
||||
})
|
||||
|
||||
if(!obj){
|
||||
this.checkNumber.push(options);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
if(item.id == options.id){
|
||||
idx = index;
|
||||
}
|
||||
})
|
||||
this.checkNumber.splice(idx,1);
|
||||
}
|
||||
|
||||
console.log("checknumber",this.checkNumber);
|
||||
},
|
||||
|
||||
getList(){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByState",
|
||||
params:this.listParams,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
this.list.forEach((item,index)=>{
|
||||
this.list[index].check = false;
|
||||
})
|
||||
|
||||
if(this.list.length == 0){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
}else{
|
||||
if(this.globalmap){
|
||||
this.drawPoint();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(){
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
|
||||
_self.graphicLayer.clear();
|
||||
|
||||
|
||||
_self.list.forEach((item,index)=>{
|
||||
let graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
|
||||
// this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
_self.graphicLayer.removeGraphic(_self.graphicWinodw);
|
||||
_self.graphicLayer.removeGraphic(_self.graphicPoint)
|
||||
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
// // <span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="物资调度" >物资调度</span>
|
||||
initWebSocket(){
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
console.log(evt)
|
||||
if(!evt){
|
||||
|
||||
}
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
if(obj.Module == '火情信息'){
|
||||
_this.getList()
|
||||
_this.$emit("getlistSocket")
|
||||
}else if(obj.Module == '任务下发'){
|
||||
_this.$emit("getTaskListSocket")
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"您的浏览器不支持 WebSocket!",
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.title-title{
|
||||
width:200px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
float:left;
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 90px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:#123668;
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #0a43bfcc;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,580 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">火情线索</div>
|
||||
<!-- <div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div> -->
|
||||
<div class="box-container">
|
||||
<div class="draw" v-show="active == 1">
|
||||
<div class="news" v-for="(item,index) in list" :key="index" >
|
||||
<div class="checkbox-container" @click="checkNews(index)" :key="checkRandom">
|
||||
<i class="el-icon el-icon-check" v-show="item.check" ></i>
|
||||
</div>
|
||||
<div class="news-container">
|
||||
<div class="title">
|
||||
<div class="title-title">
|
||||
{{item.sourceTypeName}}上报了一条火情线索
|
||||
</div>
|
||||
<div
|
||||
class="daohang"
|
||||
style="height:24px;text-align:center;line-height:24px;border-radius:0px;float:right;color:#fff;position:relative;top:8px;cursor:pointer;"
|
||||
|
||||
>编号：{{item.clueNo}}</div>
|
||||
</div>
|
||||
<p class="desc">
|
||||
<span class="time">上报时间：<span style="color:#aaa;">{{item.reportTime}}</span></span>
|
||||
|
||||
<span class="time">上报人员：<span style="color:#aaa;">{{item.reportPerson}}</span></span>
|
||||
</p>
|
||||
<p class="desc">
|
||||
<span>火情描述：<span style="color:#aaa;">{{item.describe}}</span></span>
|
||||
<el-button type="warning" size="mini" style="float:right;position:relative;top:-12px;" @click="toPosition(item);">位置</el-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<el-button type="primary" size="mini" @click="merage">线索合并</el-button>
|
||||
<el-button type="warning" size="mini" @click="deal">标为误报线索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import axios from 'axios'
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'toolbox',
|
||||
props:['globalmap','checkList','checkNumber','mergeSuccessRandom'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[],
|
||||
listParams:{
|
||||
areaname:localStorage.getItem("areaName"),
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
checkRandom:1111,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
mergeSuccessRandom:function(e){
|
||||
this.checkList = [];
|
||||
this.checkNumber = [];
|
||||
this.getList();
|
||||
},
|
||||
globalmap:function(e){
|
||||
this.drawPoint();
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
window.jiankong = this.jiankong;
|
||||
window.renyuan = this.renyuan
|
||||
},
|
||||
mounted(){
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods:{
|
||||
deal(){
|
||||
let arr = [];
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
arr.push(item.id);
|
||||
})
|
||||
|
||||
if(arr.length<=0){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少一条线索！"
|
||||
})
|
||||
return;
|
||||
}
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/BatchUpdatFireStatue",
|
||||
data:arr,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"设置成功",
|
||||
})
|
||||
this.getList();
|
||||
}
|
||||
})
|
||||
},
|
||||
merage(){
|
||||
|
||||
this.$emit('merge')
|
||||
|
||||
},
|
||||
close(){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
this.$emit("close")
|
||||
},
|
||||
jiankong(e){
|
||||
this.$emit("jiankong",e);
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
renyuan(e){
|
||||
this.$emit("renyuan",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
checkNews(index){
|
||||
this.list[index].check = !this.list[index].check;
|
||||
this.getCheckList(this.list[index].check,this.list[index].clueNo);
|
||||
this.getCheckNumber(this.list[index].check,this.list[index]);
|
||||
this.checkRandom = Math.random()*100000000;
|
||||
console.log(this.list)
|
||||
},
|
||||
getCheckList(type,id){
|
||||
if(type){
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
if(idx == -1){
|
||||
this.checkList.push(id);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
this.checkList.splice(idx,1);
|
||||
}
|
||||
},
|
||||
getCheckNumber(type,options){
|
||||
let idx = null;
|
||||
if(type){
|
||||
|
||||
let obj = this.checkNumber.find((item,index)=>{
|
||||
return options.id == item.id
|
||||
})
|
||||
|
||||
if(!obj){
|
||||
this.checkNumber.push(options);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
if(item.id == options.id){
|
||||
idx = index;
|
||||
}
|
||||
})
|
||||
this.checkNumber.splice(idx,1);
|
||||
}
|
||||
|
||||
console.log("checknumber",this.checkNumber);
|
||||
},
|
||||
|
||||
getList(){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByState",
|
||||
params:this.listParams,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
this.list.forEach((item,index)=>{
|
||||
this.list[index].check = false;
|
||||
})
|
||||
|
||||
if(this.list.length == 0){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
}else{
|
||||
if(this.globalmap){
|
||||
this.drawPoint();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(){
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
|
||||
_self.graphicLayer.clear();
|
||||
|
||||
|
||||
_self.list.forEach((item,index)=>{
|
||||
let graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
|
||||
// this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
_self.graphicLayer.removeGraphic(_self.graphicWinodw);
|
||||
_self.graphicLayer.removeGraphic(_self.graphicPoint)
|
||||
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
// // <span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="物资调度" >物资调度</span>
|
||||
initWebSocket(){
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
console.log(evt)
|
||||
if(!evt){
|
||||
return false
|
||||
}
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
if(obj.Module == '火情信息'){
|
||||
_this.getList()
|
||||
_this.$emit("getlistSocket")
|
||||
}else if(obj.Module == '任务下发'){
|
||||
_this.$emit("getTaskListSocket")
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"您的浏览器不支持 WebSocket!",
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.title-title{
|
||||
width:200px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
float:left;
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 90px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:#123668;
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #0a43bfcc;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,580 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">火情线索</div>
|
||||
<!-- <div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div> -->
|
||||
<div class="box-container">
|
||||
<div class="draw" v-show="active == 1">
|
||||
<div class="news" v-for="(item,index) in list" :key="index" >
|
||||
<div class="checkbox-container" @click="checkNews(index)" :key="checkRandom">
|
||||
<i class="el-icon el-icon-check" v-show="item.check" ></i>
|
||||
</div>
|
||||
<div class="news-container">
|
||||
<div class="title">
|
||||
<div class="title-title">
|
||||
{{item.sourceTypeName}}上报了一条火情线索
|
||||
</div>
|
||||
<div
|
||||
class="daohang"
|
||||
style="height:24px;text-align:center;line-height:24px;border-radius:0px;float:right;color:#fff;position:relative;top:8px;cursor:pointer;"
|
||||
|
||||
>编号：{{item.clueNo}}</div>
|
||||
</div>
|
||||
<p class="desc">
|
||||
<span class="time">上报时间：<span style="color:#aaa;">{{item.reportTime}}</span></span>
|
||||
|
||||
<span class="time">上报人员：<span style="color:#aaa;">{{item.reportPerson}}</span></span>
|
||||
</p>
|
||||
<p class="desc">
|
||||
<span>火情描述：<span style="color:#aaa;">{{item.describe}}</span></span>
|
||||
<el-button type="warning" size="mini" style="float:right;position:relative;top:-12px;" @click="toPosition(item);">位置</el-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<el-button type="primary" size="mini" @click="merage">线索合并</el-button>
|
||||
<el-button type="warning" size="mini" @click="deal">标为误报线索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import axios from 'axios'
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'toolbox',
|
||||
props:['globalmap','checkList','checkNumber','mergeSuccessRandom'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[],
|
||||
listParams:{
|
||||
areaname:localStorage.getItem("areaName"),
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
checkRandom:1111,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
mergeSuccessRandom:function(e){
|
||||
this.checkList = [];
|
||||
this.checkNumber = [];
|
||||
this.getList();
|
||||
},
|
||||
globalmap:function(e){
|
||||
this.drawPoint();
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
window.jiankong = this.jiankong;
|
||||
window.renyuan = this.renyuan
|
||||
},
|
||||
mounted(){
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods:{
|
||||
deal(){
|
||||
let arr = [];
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
arr.push(item.id);
|
||||
})
|
||||
|
||||
if(arr.length<=0){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少一条线索！"
|
||||
})
|
||||
return;
|
||||
}
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/BatchUpdatFireStatue",
|
||||
data:arr,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"设置成功",
|
||||
})
|
||||
this.getList();
|
||||
}
|
||||
})
|
||||
},
|
||||
merage(){
|
||||
|
||||
this.$emit('merge')
|
||||
|
||||
},
|
||||
close(){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
this.$emit("close")
|
||||
},
|
||||
jiankong(e){
|
||||
this.$emit("jiankong",e);
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
renyuan(e){
|
||||
this.$emit("renyuan",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
checkNews(index){
|
||||
this.list[index].check = !this.list[index].check;
|
||||
this.getCheckList(this.list[index].check,this.list[index].clueNo);
|
||||
this.getCheckNumber(this.list[index].check,this.list[index]);
|
||||
this.checkRandom = Math.random()*100000000;
|
||||
console.log(this.list)
|
||||
},
|
||||
getCheckList(type,id){
|
||||
if(type){
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
if(idx == -1){
|
||||
this.checkList.push(id);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
this.checkList.splice(idx,1);
|
||||
}
|
||||
},
|
||||
getCheckNumber(type,options){
|
||||
let idx = null;
|
||||
if(type){
|
||||
|
||||
let obj = this.checkNumber.find((item,index)=>{
|
||||
return options.id == item.id
|
||||
})
|
||||
|
||||
if(!obj){
|
||||
this.checkNumber.push(options);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
if(item.id == options.id){
|
||||
idx = index;
|
||||
}
|
||||
})
|
||||
this.checkNumber.splice(idx,1);
|
||||
}
|
||||
|
||||
console.log("checknumber",this.checkNumber);
|
||||
},
|
||||
|
||||
getList(){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByState",
|
||||
params:this.listParams,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
this.list.forEach((item,index)=>{
|
||||
this.list[index].check = false;
|
||||
})
|
||||
|
||||
if(this.list.length == 0){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
}else{
|
||||
if(this.globalmap){
|
||||
this.drawPoint();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(){
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
|
||||
_self.graphicLayer.clear();
|
||||
|
||||
|
||||
_self.list.forEach((item,index)=>{
|
||||
let graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
|
||||
// this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
_self.graphicLayer.removeGraphic(_self.graphicWinodw);
|
||||
_self.graphicLayer.removeGraphic(_self.graphicPoint)
|
||||
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
// // <span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="物资调度" >物资调度</span>
|
||||
initWebSocket(){
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
console.log(evt)
|
||||
if(!evt){
|
||||
return false
|
||||
}
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
if(obj.Module == '火情信息'){
|
||||
_this.getList()
|
||||
_this.$emit("getlistSocket")
|
||||
}else if(obj.Module == '任务下发'){
|
||||
_this.$emit("getTaskListSocket")
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"您的浏览器不支持 WebSocket!",
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.title-title{
|
||||
width:200px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
float:left;
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 90px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:#123668;
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #0a43bfcc;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,580 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">火情线索</div>
|
||||
<!-- <div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div> -->
|
||||
<div class="box-container">
|
||||
<div class="draw" v-show="active == 1">
|
||||
<div class="news" v-for="(item,index) in list" :key="index" >
|
||||
<div class="checkbox-container" @click="checkNews(index)" :key="checkRandom">
|
||||
<i class="el-icon el-icon-check" v-show="item.check" ></i>
|
||||
</div>
|
||||
<div class="news-container">
|
||||
<div class="title">
|
||||
<div class="title-title">
|
||||
{{item.sourceTypeName}}上报了一条火情线索
|
||||
</div>
|
||||
<div
|
||||
class="daohang"
|
||||
style="height:24px;text-align:center;line-height:24px;border-radius:0px;float:right;color:#fff;position:relative;top:8px;cursor:pointer;"
|
||||
|
||||
>编号：{{item.clueNo}}</div>
|
||||
</div>
|
||||
<p class="desc">
|
||||
<span class="time">上报时间：<span style="color:#aaa;">{{item.reportTime}}</span></span>
|
||||
|
||||
<span class="time">上报人员：<span style="color:#aaa;">{{item.reportPerson}}</span></span>
|
||||
</p>
|
||||
<p class="desc">
|
||||
<span>火情描述：<span style="color:#aaa;">{{item.describe}}</span></span>
|
||||
<el-button type="warning" size="mini" style="float:right;position:relative;top:-12px;" @click="toPosition(item);">位置</el-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<el-button type="primary" size="mini" @click="merage">线索合并</el-button>
|
||||
<el-button type="warning" size="mini" @click="deal">标为误报线索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import axios from 'axios'
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'toolbox',
|
||||
props:['globalmap','checkList','checkNumber','mergeSuccessRandom'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[],
|
||||
listParams:{
|
||||
areaname:localStorage.getItem("areaName"),
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
checkRandom:1111,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
mergeSuccessRandom:function(e){
|
||||
this.checkList = [];
|
||||
this.checkNumber = [];
|
||||
this.getList();
|
||||
},
|
||||
globalmap:function(e){
|
||||
this.drawPoint();
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
window.jiankong = this.jiankong;
|
||||
window.renyuan = this.renyuan
|
||||
},
|
||||
mounted(){
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods:{
|
||||
deal(){
|
||||
let arr = [];
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
arr.push(item.id);
|
||||
})
|
||||
|
||||
if(arr.length<=0){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少一条线索！"
|
||||
})
|
||||
return;
|
||||
}
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/BatchUpdatFireStatue",
|
||||
data:arr,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"设置成功",
|
||||
})
|
||||
this.getList();
|
||||
}
|
||||
})
|
||||
},
|
||||
merage(){
|
||||
|
||||
this.$emit('merge')
|
||||
|
||||
},
|
||||
close(){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
this.$emit("close")
|
||||
},
|
||||
jiankong(e){
|
||||
this.$emit("jiankong",e);
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
renyuan(e){
|
||||
this.$emit("renyuan",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
checkNews(index){
|
||||
this.list[index].check = !this.list[index].check;
|
||||
this.getCheckList(this.list[index].check,this.list[index].clueNo);
|
||||
this.getCheckNumber(this.list[index].check,this.list[index]);
|
||||
this.checkRandom = Math.random()*100000000;
|
||||
console.log(this.list)
|
||||
},
|
||||
getCheckList(type,id){
|
||||
if(type){
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
if(idx == -1){
|
||||
this.checkList.push(id);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
this.checkList.splice(idx,1);
|
||||
}
|
||||
},
|
||||
getCheckNumber(type,options){
|
||||
let idx = null;
|
||||
if(type){
|
||||
|
||||
let obj = this.checkNumber.find((item,index)=>{
|
||||
return options.id == item.id
|
||||
})
|
||||
|
||||
if(!obj){
|
||||
this.checkNumber.push(options);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
if(item.id == options.id){
|
||||
idx = index;
|
||||
}
|
||||
})
|
||||
this.checkNumber.splice(idx,1);
|
||||
}
|
||||
|
||||
console.log("checknumber",this.checkNumber);
|
||||
},
|
||||
|
||||
getList(){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByState",
|
||||
params:this.listParams,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
this.list.forEach((item,index)=>{
|
||||
this.list[index].check = false;
|
||||
})
|
||||
|
||||
if(this.list.length == 0){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
}else{
|
||||
if(this.globalmap){
|
||||
this.drawPoint();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(){
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
|
||||
_self.graphicLayer.clear();
|
||||
|
||||
|
||||
_self.list.forEach((item,index)=>{
|
||||
let graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
|
||||
// this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
_self.graphicLayer.removeGraphic(_self.graphicWinodw);
|
||||
_self.graphicLayer.removeGraphic(_self.graphicPoint)
|
||||
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
// // <span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="物资调度" >物资调度</span>
|
||||
initWebSocket(){
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
// console.log(evt)
|
||||
if(!evt){
|
||||
return false
|
||||
}
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
if(obj.Module == '火情信息'){
|
||||
_this.getList()
|
||||
_this.$emit("getlistSocket")
|
||||
}else if(obj.Module == '任务下发'){
|
||||
_this.$emit("getTaskListSocket")
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"您的浏览器不支持 WebSocket!",
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.title-title{
|
||||
width:200px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
float:left;
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 90px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:#123668;
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #0a43bfcc;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,580 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">火情线索</div>
|
||||
<!-- <div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div> -->
|
||||
<div class="box-container">
|
||||
<div class="draw" v-show="active == 1">
|
||||
<div class="news" v-for="(item,index) in list" :key="index" >
|
||||
<div class="checkbox-container" @click="checkNews(index)" :key="checkRandom">
|
||||
<i class="el-icon el-icon-check" v-show="item.check" ></i>
|
||||
</div>
|
||||
<div class="news-container">
|
||||
<div class="title">
|
||||
<div class="title-title">
|
||||
{{item.sourceTypeName}}上报了一条火情线索
|
||||
</div>
|
||||
<div
|
||||
class="daohang"
|
||||
style="height:24px;text-align:center;line-height:24px;border-radius:0px;float:right;color:#fff;position:relative;top:8px;cursor:pointer;"
|
||||
|
||||
>编号：{{item.clueNo}}</div>
|
||||
</div>
|
||||
<p class="desc">
|
||||
<span class="time">上报时间：<span style="color:#aaa;">{{item.reportTime}}</span></span>
|
||||
|
||||
<span class="time">上报人员：<span style="color:#aaa;">{{item.reportPerson}}</span></span>
|
||||
</p>
|
||||
<p class="desc">
|
||||
<span>火情描述：<span style="color:#aaa;">{{item.describe}}</span></span>
|
||||
<el-button type="warning" size="mini" style="float:right;position:relative;top:-12px;" @click="toPosition(item);">位置</el-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<el-button type="primary" size="mini" @click="merage">线索合并</el-button>
|
||||
<el-button type="warning" size="mini" @click="deal">标为误报线索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import axios from 'axios'
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'toolbox',
|
||||
props:['globalmap','checkList','checkNumber','mergeSuccessRandom'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[],
|
||||
listParams:{
|
||||
areaname:localStorage.getItem("areaName"),
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
checkRandom:1111,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
mergeSuccessRandom:function(e){
|
||||
this.checkList = [];
|
||||
this.checkNumber = [];
|
||||
this.getList();
|
||||
},
|
||||
globalmap:function(e){
|
||||
this.drawPoint();
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
window.jiankong = this.jiankong;
|
||||
window.renyuan = this.renyuan
|
||||
},
|
||||
mounted(){
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods:{
|
||||
deal(){
|
||||
let arr = [];
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
arr.push(item.id);
|
||||
})
|
||||
|
||||
if(arr.length<=0){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少一条线索！"
|
||||
})
|
||||
return;
|
||||
}
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/BatchUpdatFireStatue",
|
||||
data:arr,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"设置成功",
|
||||
})
|
||||
this.getList();
|
||||
}
|
||||
})
|
||||
},
|
||||
merage(){
|
||||
|
||||
this.$emit('merge')
|
||||
|
||||
},
|
||||
close(){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
this.$emit("close")
|
||||
},
|
||||
jiankong(e){
|
||||
this.$emit("jiankong",e);
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
renyuan(e){
|
||||
this.$emit("renyuan",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
checkNews(index){
|
||||
this.list[index].check = !this.list[index].check;
|
||||
this.getCheckList(this.list[index].check,this.list[index].clueNo);
|
||||
this.getCheckNumber(this.list[index].check,this.list[index]);
|
||||
this.checkRandom = Math.random()*100000000;
|
||||
console.log(this.list)
|
||||
},
|
||||
getCheckList(type,id){
|
||||
if(type){
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
if(idx == -1){
|
||||
this.checkList.push(id);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
this.checkList.splice(idx,1);
|
||||
}
|
||||
},
|
||||
getCheckNumber(type,options){
|
||||
let idx = null;
|
||||
if(type){
|
||||
|
||||
let obj = this.checkNumber.find((item,index)=>{
|
||||
return options.id == item.id
|
||||
})
|
||||
|
||||
if(!obj){
|
||||
this.checkNumber.push(options);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
if(item.id == options.id){
|
||||
idx = index;
|
||||
}
|
||||
})
|
||||
this.checkNumber.splice(idx,1);
|
||||
}
|
||||
|
||||
console.log("checknumber",this.checkNumber);
|
||||
},
|
||||
|
||||
getList(){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByState",
|
||||
params:this.listParams,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
this.list.forEach((item,index)=>{
|
||||
this.list[index].check = false;
|
||||
})
|
||||
|
||||
if(this.list.length == 0){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
}else{
|
||||
if(this.globalmap){
|
||||
this.drawPoint();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(){
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
|
||||
_self.graphicLayer.clear();
|
||||
|
||||
|
||||
_self.list.forEach((item,index)=>{
|
||||
let graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
|
||||
// this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
_self.graphicLayer.removeGraphic(_self.graphicWinodw);
|
||||
_self.graphicLayer.removeGraphic(_self.graphicPoint)
|
||||
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
// // <span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="物资调度" >物资调度</span>
|
||||
initWebSocket(){
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
// console.log(evt)
|
||||
if(!evt){
|
||||
return false
|
||||
}
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
if(obj.Module == '火情信息'){
|
||||
_this.getList()
|
||||
_this.$emit("getlistSocket")
|
||||
}else if(obj.Module == '任务下发'){
|
||||
_this.$emit("getTaskListSocket")
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"您的浏览器不支持 WebSocket!",
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.title-title{
|
||||
width:200px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
float:left;
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 90px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:#123668;
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #0a43bfcc;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,580 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">火情线索</div>
|
||||
<!-- <div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div> -->
|
||||
<div class="box-container">
|
||||
<div class="draw" v-show="active == 1">
|
||||
<div class="news" v-for="(item,index) in list" :key="index" >
|
||||
<div class="checkbox-container" @click="checkNews(index)" :key="checkRandom">
|
||||
<i class="el-icon el-icon-check" v-show="item.check" ></i>
|
||||
</div>
|
||||
<div class="news-container">
|
||||
<div class="title">
|
||||
<div class="title-title">
|
||||
{{item.sourceTypeName}}上报了一条火情线索
|
||||
</div>
|
||||
<div
|
||||
class="daohang"
|
||||
style="height:24px;text-align:center;line-height:24px;border-radius:0px;float:right;color:#fff;position:relative;top:8px;cursor:pointer;"
|
||||
|
||||
>编号：{{item.clueNo}}</div>
|
||||
</div>
|
||||
<p class="desc">
|
||||
<span class="time">上报时间：<span style="color:#aaa;">{{item.reportTime}}</span></span>
|
||||
|
||||
<span class="time">上报人员：<span style="color:#aaa;">{{item.reportPerson}}</span></span>
|
||||
</p>
|
||||
<p class="desc">
|
||||
<span>火情描述：<span style="color:#aaa;">{{item.describe}}</span></span>
|
||||
<el-button type="warning" size="mini" style="float:right;position:relative;top:-12px;" @click="toPosition(item);">位置</el-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<el-button type="primary" size="mini" @click="merage">线索合并</el-button>
|
||||
<el-button type="warning" size="mini" @click="deal">标为误报线索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import axios from 'axios'
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'toolbox',
|
||||
props:['globalmap','checkList','checkNumber','mergeSuccessRandom'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[],
|
||||
listParams:{
|
||||
areaname:localStorage.getItem("areaName"),
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
checkRandom:1111,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
mergeSuccessRandom:function(e){
|
||||
this.checkList = [];
|
||||
this.checkNumber = [];
|
||||
this.getList();
|
||||
},
|
||||
globalmap:function(e){
|
||||
this.drawPoint();
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
window.jiankong = this.jiankong;
|
||||
window.renyuan = this.renyuan
|
||||
},
|
||||
mounted(){
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods:{
|
||||
deal(){
|
||||
let arr = [];
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
arr.push(item.id);
|
||||
})
|
||||
|
||||
if(arr.length<=0){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少一条线索！"
|
||||
})
|
||||
return;
|
||||
}
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/BatchUpdatFireStatue",
|
||||
data:arr,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"设置成功",
|
||||
})
|
||||
this.getList();
|
||||
}
|
||||
})
|
||||
},
|
||||
merage(){
|
||||
|
||||
this.$emit('merge')
|
||||
|
||||
},
|
||||
close(){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
this.$emit("close")
|
||||
},
|
||||
jiankong(e){
|
||||
this.$emit("jiankong",e);
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
renyuan(e){
|
||||
this.$emit("renyuan",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
checkNews(index){
|
||||
this.list[index].check = !this.list[index].check;
|
||||
this.getCheckList(this.list[index].check,this.list[index].clueNo);
|
||||
this.getCheckNumber(this.list[index].check,this.list[index]);
|
||||
this.checkRandom = Math.random()*100000000;
|
||||
console.log(this.list)
|
||||
},
|
||||
getCheckList(type,id){
|
||||
if(type){
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
if(idx == -1){
|
||||
this.checkList.push(id);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
this.checkList.splice(idx,1);
|
||||
}
|
||||
},
|
||||
getCheckNumber(type,options){
|
||||
let idx = null;
|
||||
if(type){
|
||||
|
||||
let obj = this.checkNumber.find((item,index)=>{
|
||||
return options.id == item.id
|
||||
})
|
||||
|
||||
if(!obj){
|
||||
this.checkNumber.push(options);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
if(item.id == options.id){
|
||||
idx = index;
|
||||
}
|
||||
})
|
||||
this.checkNumber.splice(idx,1);
|
||||
}
|
||||
|
||||
console.log("checknumber",this.checkNumber);
|
||||
},
|
||||
|
||||
getList(){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByState",
|
||||
params:this.listParams,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
this.list.forEach((item,index)=>{
|
||||
this.list[index].check = false;
|
||||
})
|
||||
|
||||
if(this.list.length == 0){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
}else{
|
||||
if(this.globalmap){
|
||||
this.drawPoint();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(){
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
|
||||
_self.graphicLayer.clear();
|
||||
|
||||
|
||||
_self.list.forEach((item,index)=>{
|
||||
let graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
|
||||
// this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
_self.graphicLayer.removeGraphic(_self.graphicWinodw);
|
||||
_self.graphicLayer.removeGraphic(_self.graphicPoint)
|
||||
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
// // <span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="物资调度" >物资调度</span>
|
||||
initWebSocket(){
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
// console.log(evt)
|
||||
if(!evt){
|
||||
return false
|
||||
}
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
if(obj.Module == '火情信息'){
|
||||
_this.getList()
|
||||
_this.$emit("getlistSocket")
|
||||
}else if(obj.Module == '任务下发'){
|
||||
_this.$emit("getTaskListSocket")
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"您的浏览器不支持 WebSocket!",
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.title-title{
|
||||
width:200px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
float:left;
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 90px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:#123668;
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #0a43bfcc;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,580 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">火情线索</div>
|
||||
<!-- <div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div> -->
|
||||
<div class="box-container">
|
||||
<div class="draw" v-show="active == 1">
|
||||
<div class="news" v-for="(item,index) in list" :key="index" >
|
||||
<div class="checkbox-container" @click="checkNews(index)" :key="checkRandom">
|
||||
<i class="el-icon el-icon-check" v-show="item.check" ></i>
|
||||
</div>
|
||||
<div class="news-container">
|
||||
<div class="title">
|
||||
<div class="title-title">
|
||||
{{item.sourceTypeName}}上报了一条火情线索
|
||||
</div>
|
||||
<div
|
||||
class="daohang"
|
||||
style="height:24px;text-align:center;line-height:24px;border-radius:0px;float:right;color:#fff;position:relative;top:8px;cursor:pointer;"
|
||||
|
||||
>编号：{{item.clueNo}}</div>
|
||||
</div>
|
||||
<p class="desc">
|
||||
<span class="time">上报时间：<span style="color:#aaa;">{{item.reportTime}}</span></span>
|
||||
|
||||
<span class="time">上报人员：<span style="color:#aaa;">{{item.reportPerson}}</span></span>
|
||||
</p>
|
||||
<p class="desc">
|
||||
<span>火情描述：<span style="color:#aaa;">{{item.describe}}</span></span>
|
||||
<el-button type="warning" size="mini" style="float:right;position:relative;top:-12px;" @click="toPosition(item);">位置</el-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<el-button type="primary" size="mini" @click="merage">线索合并</el-button>
|
||||
<el-button type="warning" size="mini" @click="deal">标为误报线索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import axios from 'axios'
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'toolbox',
|
||||
props:['globalmap','checkList','checkNumber','mergeSuccessRandom'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[],
|
||||
listParams:{
|
||||
areaname:localStorage.getItem("areaName"),
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
checkRandom:1111,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
mergeSuccessRandom:function(e){
|
||||
this.checkList = [];
|
||||
this.checkNumber = [];
|
||||
this.getList();
|
||||
},
|
||||
globalmap:function(e){
|
||||
this.drawPoint();
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
window.jiankong = this.jiankong;
|
||||
window.renyuan = this.renyuan
|
||||
},
|
||||
mounted(){
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods:{
|
||||
deal(){
|
||||
let arr = [];
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
arr.push(item.id);
|
||||
})
|
||||
|
||||
if(arr.length<=0){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少一条线索！"
|
||||
})
|
||||
return;
|
||||
}
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/BatchUpdatFireStatue",
|
||||
data:arr,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"设置成功",
|
||||
})
|
||||
this.getList();
|
||||
}
|
||||
})
|
||||
},
|
||||
merage(){
|
||||
|
||||
this.$emit('merge')
|
||||
|
||||
},
|
||||
close(){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
this.$emit("close")
|
||||
},
|
||||
jiankong(e){
|
||||
this.$emit("jiankong",e);
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
renyuan(e){
|
||||
this.$emit("renyuan",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
checkNews(index){
|
||||
this.list[index].check = !this.list[index].check;
|
||||
this.getCheckList(this.list[index].check,this.list[index].clueNo);
|
||||
this.getCheckNumber(this.list[index].check,this.list[index]);
|
||||
this.checkRandom = Math.random()*100000000;
|
||||
console.log(this.list)
|
||||
},
|
||||
getCheckList(type,id){
|
||||
if(type){
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
if(idx == -1){
|
||||
this.checkList.push(id);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
let idx = this.checkList.lastIndexOf(id);
|
||||
this.checkList.splice(idx,1);
|
||||
}
|
||||
},
|
||||
getCheckNumber(type,options){
|
||||
let idx = null;
|
||||
if(type){
|
||||
|
||||
let obj = this.checkNumber.find((item,index)=>{
|
||||
return options.id == item.id
|
||||
})
|
||||
|
||||
if(!obj){
|
||||
this.checkNumber.push(options);
|
||||
}else{
|
||||
|
||||
}
|
||||
}else{
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
if(item.id == options.id){
|
||||
idx = index;
|
||||
}
|
||||
})
|
||||
this.checkNumber.splice(idx,1);
|
||||
}
|
||||
|
||||
console.log("checknumber",this.checkNumber);
|
||||
},
|
||||
|
||||
getList(){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByState",
|
||||
params:this.listParams,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
this.list.forEach((item,index)=>{
|
||||
this.list[index].check = false;
|
||||
})
|
||||
|
||||
if(this.list.length == 0){
|
||||
if(this.graphicLayer){
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
}else{
|
||||
if(this.globalmap){
|
||||
this.drawPoint();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(){
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
|
||||
_self.graphicLayer.clear();
|
||||
|
||||
|
||||
_self.list.forEach((item,index)=>{
|
||||
let graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
|
||||
// this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
_self.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
_self.graphicLayer.removeGraphic(_self.graphicWinodw);
|
||||
_self.graphicLayer.removeGraphic(_self.graphicPoint)
|
||||
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
let jiankongDisplay = item.sourceTypeName == '摄像机' ? '' : 'none';
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">人员调度</span>
|
||||
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="附近水源">附近水源</span>
|
||||
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
// // <span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="物资调度" >物资调度</span>
|
||||
initWebSocket(){
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
// console.log(evt)
|
||||
// if(!evt){
|
||||
// return false
|
||||
// }
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
if(obj.Module == '火情信息'){
|
||||
_this.getList()
|
||||
_this.$emit("getlistSocket")
|
||||
}else if(obj.Module == '任务下发'){
|
||||
_this.$emit("getTaskListSocket")
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"您的浏览器不支持 WebSocket!",
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.title-title{
|
||||
width:200px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
float:left;
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 90px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:#123668;
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #0a43bfcc;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,506 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [param.lng,param.lat],
|
||||
style: {
|
||||
image: "img/markfire.png",
|
||||
scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,507 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [param.lng,param.lat],
|
||||
style: {
|
||||
image: "img/markfire.png",
|
||||
scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,507 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
let requestLock = 1
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [param.lng,param.lat],
|
||||
style: {
|
||||
image: "img/markfire.png",
|
||||
scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,507 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
let requestLock = 0
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [param.lng,param.lat],
|
||||
style: {
|
||||
image: "img/markfire.png",
|
||||
scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,511 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
addfireDetailReqLock:false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
if(!addfireDetailReqLock){
|
||||
return false
|
||||
}
|
||||
let addfireDetailReqLock = 0
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [param.lng,param.lat],
|
||||
style: {
|
||||
image: "img/markfire.png",
|
||||
scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,512 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
addfireDetailReqLock:false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
if(!addfireDetailReqLock){
|
||||
return false
|
||||
}
|
||||
addfireDetailReqLock = false
|
||||
let addfireDetailReqLock = 0
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [param.lng,param.lat],
|
||||
style: {
|
||||
image: "img/markfire.png",
|
||||
scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,512 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
addfireDetailReqLock:true
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
if(!addfireDetailReqLock){
|
||||
return false
|
||||
}
|
||||
addfireDetailReqLock = false
|
||||
let addfireDetailReqLock = 0
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [param.lng,param.lat],
|
||||
style: {
|
||||
image: "img/markfire.png",
|
||||
scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,512 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
addfireDetailReqLock:false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
if(!addfireDetailReqLock){
|
||||
return false
|
||||
}
|
||||
addfireDetailReqLock = false
|
||||
let addfireDetailReqLock = 0
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [param.lng,param.lat],
|
||||
style: {
|
||||
image: "img/markfire.png",
|
||||
scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,512 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
addfireDetailReqLock:false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
if(!addfireDetailReqLock){
|
||||
return false
|
||||
}
|
||||
addfireDetailReqLock = true
|
||||
let addfireDetailReqLock = 0
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [param.lng,param.lat],
|
||||
style: {
|
||||
image: "img/markfire.png",
|
||||
scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,512 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
addfireDetailReqLock:false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
if(!addfireDetailReqLock){
|
||||
return false
|
||||
}
|
||||
addfireDetailReqLock = true
|
||||
let addfireDetailReqLock = 0
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [param.lng,param.lat],
|
||||
style: {
|
||||
image: "img/markfire.png",
|
||||
scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,513 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
addfireDetailReqLock:false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
if(!addfireDetailReqLock){
|
||||
return false
|
||||
}
|
||||
addfireDetailReqLock = true
|
||||
let addfireDetailReqLock = 0
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [param.lng,param.lat],
|
||||
style: {
|
||||
image: "img/markfire.png",
|
||||
scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
this.addfireDetailReqLock = false
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,513 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
addfireDetailReqLock:false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
if(!this.addfireDetailReqLock){
|
||||
return false
|
||||
}
|
||||
this.addfireDetailReqLock = true
|
||||
let addfireDetailReqLock = 0
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [param.lng,param.lat],
|
||||
style: {
|
||||
image: "img/markfire.png",
|
||||
scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
this.addfireDetailReqLock = false
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,513 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
addfireDetailReqLock:false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
if(this.addfireDetailReqLock){
|
||||
return false
|
||||
}
|
||||
this.addfireDetailReqLock = true
|
||||
let addfireDetailReqLock = 0
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [param.lng,param.lat],
|
||||
style: {
|
||||
image: "img/markfire.png",
|
||||
scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
|
||||
this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
this.addfireDetailReqLock = false
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,513 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
addfireDetailReqLock:false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
if(this.addfireDetailReqLock){
|
||||
return false
|
||||
}
|
||||
this.addfireDetailReqLock = true
|
||||
let addfireDetailReqLock = 0
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
// let graphic = new mars3d.graphic.BillboardEntity({
|
||||
// position: [param.lng,param.lat],
|
||||
// style: {
|
||||
// image: "img/markfire.png",
|
||||
// scale: 0.8,
|
||||
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
// verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
// scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
// clampToGround: true,
|
||||
// visibleDepth: false
|
||||
// },
|
||||
// attr: { remark: "示例11" },
|
||||
// pointerEvents: true
|
||||
// })
|
||||
|
||||
// this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
this.addfireDetailReqLock = false
|
||||
})
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,518 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 右键添加火点 -->
|
||||
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 右键设为任务点 -->
|
||||
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="地址" size="small">
|
||||
<el-input v-model="setUpData.address" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情" size="small">
|
||||
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注 -->
|
||||
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
||||
<el-form :model="setUpData">
|
||||
<el-form-item label="标题" size="small">
|
||||
<el-input v-model="setUpData.title" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" size="small">
|
||||
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 标注列表 -->
|
||||
<div v-if="markListDialogFormVisible" class="marklistbox">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">标注</div>
|
||||
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
||||
<div class="flex jc-sb ai-c max-h">
|
||||
<div>
|
||||
<img class="mr-1 markimg" :src="item.createUser" />
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
||||
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
||||
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史标注 -->
|
||||
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<div class="title">历史标注</div>
|
||||
</div>
|
||||
<div class="mark-content">
|
||||
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
||||
<div class="flex jc-sb ai-c max-h max-w">
|
||||
<div class="flex-1 flex column mr-2">
|
||||
<div class="flex ai-c jc-sb max-w">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markfooter flex ai-c jc-e">
|
||||
<el-button @click="historyMarkBack">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'setting',
|
||||
props:['globalmap','type','clickdata'],
|
||||
data(){
|
||||
return {
|
||||
imgUrl:[
|
||||
{ lable: '火点' , url: 'img/markfire.png' },
|
||||
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
||||
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
||||
{ lable: '箭头' , url: 'img/markarrow.png' }
|
||||
],
|
||||
markList:[],
|
||||
allHistoryMarkList:[],
|
||||
fireGraphicLayer: null,
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr: [],
|
||||
historyMarkGraphicLayer: null,
|
||||
historyMarkGraphicLayerArr: [],
|
||||
isViewMark: false,
|
||||
isViewIndex: null,
|
||||
setUpData: {},
|
||||
firedialogFormVisible: false,
|
||||
taskdialogFormVisible: false,
|
||||
markdialogFormVisible: false,
|
||||
markListDialogFormVisible: false,
|
||||
historyMarkVisible: false,
|
||||
addfireDetailReqLock:false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal,oldVal) {
|
||||
if(newVal == 1){
|
||||
this.firedialogFormVisible = true
|
||||
}
|
||||
if(newVal == 2){
|
||||
this.taskdialogFormVisible = true
|
||||
}
|
||||
if(newVal == 3){
|
||||
this.markdialogFormVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickdata:{
|
||||
handler(newVal,oldVal) {
|
||||
this.setUpData = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.type == 3){
|
||||
this.markdialogFormVisible = true
|
||||
this.setUpData = this.clickdata
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cancelMark(){
|
||||
this.markdialogFormVisible=false;
|
||||
this.$emit('close')
|
||||
this.isViewMark = false;
|
||||
},
|
||||
// 保存标注到列表
|
||||
addMarkForm(){
|
||||
if(this.isViewMark){
|
||||
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
||||
}else{
|
||||
this.imgUrl.forEach(item =>{
|
||||
if(item.lable == this.setUpData.iconUrl){
|
||||
this.setUpData.createUser = item.url
|
||||
}
|
||||
})
|
||||
this.markList.push(this.setUpData)
|
||||
}
|
||||
this.markdialogFormVisible = false
|
||||
this.markListDialogFormVisible = true
|
||||
this.isViewMark = false
|
||||
this.$emit('close')
|
||||
this.addLayerPoint()
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.markGraphicLayerArr = []
|
||||
this.markList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
},
|
||||
//查看标注详情
|
||||
viewOneMarkDetail(item,index){
|
||||
console.log('aaa',item)
|
||||
this.isViewMark = true
|
||||
this.setUpData = item
|
||||
this.isViewIndex = index
|
||||
this.markdialogFormVisible = true
|
||||
let lngLat = [item.lng,item.lat]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
||||
},
|
||||
delAllMark(){
|
||||
this.$confirm('确认清空所有标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList = []
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneMark(index){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.markList.splice(index, 1)
|
||||
this.addLayerPoint()
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
delOneHistoryMark(item){
|
||||
this.$confirm('确认删除本条标注?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let param = {
|
||||
id: item.id
|
||||
}
|
||||
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getHistoryMarkList()
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
viewHistoryMark(){
|
||||
this.getHistoryMarkList()
|
||||
this.historyMarkVisible = true
|
||||
},
|
||||
// 保存标注
|
||||
submitMarkData(){
|
||||
console.log('markList',this.markList)
|
||||
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
||||
console.log('rrr',res)
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.markList = []
|
||||
this.setUpData = {}
|
||||
this.markListDialogFormVisible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
historyMarkBack(){
|
||||
this.historyMarkVisible = false
|
||||
this.historyMarkGraphicLayerArr.forEach(item =>{
|
||||
this.historyMarkGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
},
|
||||
//获取所有标注
|
||||
getHistoryMarkList(){
|
||||
let param = {
|
||||
pageIndex: 1,
|
||||
pageSize: 99999,
|
||||
}
|
||||
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
||||
this.allHistoryMarkList = res.data
|
||||
|
||||
if(this.historyMarkGraphicLayer == null){
|
||||
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
||||
}
|
||||
|
||||
this.historyMarkGraphicLayerArr = []
|
||||
this.allHistoryMarkList.forEach((item,index)=>{
|
||||
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
||||
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
||||
if(item.iconUrl == '箭头'){
|
||||
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
||||
verticalOrigin = Cesium.VerticalOrigin.TOP
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
// image: "img/jiuyuanrenyuan.png",
|
||||
image: item.createUser,
|
||||
scale: 0.8,
|
||||
horizontalOrigin: horizontalOrigin,
|
||||
verticalOrigin: verticalOrigin,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
visibleDepth: false
|
||||
},
|
||||
attr: { remark: "示例11" },
|
||||
pointerEvents: true
|
||||
})
|
||||
this.historyMarkGraphicLayerArr.push(graphic)
|
||||
|
||||
this.historyMarkGraphicLayer.addGraphic(graphic);
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//设为火点保存
|
||||
addfireDetail(){
|
||||
if(this.addfireDetailReqLock){
|
||||
return false
|
||||
}
|
||||
this.addfireDetailReqLock = true
|
||||
let addfireDetailReqLock = 0
|
||||
try{
|
||||
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
let param = this.setUpData
|
||||
if(this.fireGraphicLayer == null){
|
||||
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.fireGraphicLayer);
|
||||
}
|
||||
|
||||
// let graphic = new mars3d.graphic.BillboardEntity({
|
||||
// position: [param.lng,param.lat],
|
||||
// style: {
|
||||
// image: "img/markfire.png",
|
||||
// scale: 0.8,
|
||||
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
// verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
||||
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
// scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
// clampToGround: true,
|
||||
// visibleDepth: false
|
||||
// },
|
||||
// attr: { remark: "示例11" },
|
||||
// pointerEvents: true
|
||||
// })
|
||||
|
||||
// this.fireGraphicLayer.addGraphic(graphic);
|
||||
this.firedialogFormVisible = false
|
||||
this.$emit('close')
|
||||
this.addfireDetailReqLock = false
|
||||
})
|
||||
}catch{
|
||||
this.addfireDetailReqLock = false
|
||||
}
|
||||
|
||||
},
|
||||
//设为任务点
|
||||
addTaskClick(){
|
||||
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
this.taskdialogFormVisible = false
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marklistbox{
|
||||
width:434px;
|
||||
height:700px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
background-image: url(/img/pingyiperson.png);
|
||||
background-size:100% 100%;
|
||||
transform: translate(0,-50%);
|
||||
z-index: 2000;
|
||||
}
|
||||
.marklistboxhistory{
|
||||
z-index: 2001;
|
||||
}
|
||||
.marklistbox .title{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.mark-content{
|
||||
width: 94%;
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
margin-left: 3%;
|
||||
border-bottom: 1px solid #003cff2f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-li{
|
||||
width:100%;
|
||||
height: 70px;
|
||||
background: #003cff2f;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-li-history{
|
||||
width:100%;
|
||||
min-height: 70px;
|
||||
background: #0E2320;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.markimg{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.markfooter{
|
||||
height: 80px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,606 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
|
||||
window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
let isSuppertVideo = 0;
|
||||
for(let i=0;i<devices.length;i++){
|
||||
if(devices[i].kind =="videoinput"){
|
||||
isSuppertVideo++;
|
||||
}
|
||||
}
|
||||
if(isSuppertVideo>0){
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前设备暂不支持视频通话！"
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,609 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,613 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,616 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,619 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,619 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,619 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
let wind = window.open("http:localhost:9233/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
let wind = window.open("http:localhost:8081/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
let wind = window.open("http://localhost:8081/trtc/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// let wind = window.open("http://localhost:8081/trtc/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/trtc/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// let wind = window.open("http://localhost:8081/trtc/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/trtc?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// let wind = window.open("http://localhost:8081/trtc/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// let wind = window.open("http://localhost:8081/trtc/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// let wind = window.open("http://localhost:8081/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
let wind = window.open("http://localhost:8081/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
let wind = window.open("http://localhost:8081/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">规划路线</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="box-name"></div> -->
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">路线展示</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="box">
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">路线展示</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,619 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">路线展示</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,619 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<!-- <div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div> -->
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">路线展示</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,619 +0,0 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap'],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.getOnLineInfo()
|
||||
this.initWebSocket()
|
||||
setInterval(()=>{
|
||||
this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
arr.forEach(item =>{
|
||||
this.getPointer(item)
|
||||
})
|
||||
},120000)
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
|
||||
let _this = this;
|
||||
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
let arr = ['人员信息','对讲机信息']
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.addLayerPoint()
|
||||
console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
|
||||
})
|
||||
},
|
||||
addLayerPoint(){
|
||||
if(this.markGraphicLayer == null){
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
|
||||
this.markGraphicLayer.clear();
|
||||
|
||||
this.markGraphicLayerArr = []
|
||||
this.pointData.forEach((item,index)=>{
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphic)
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
let graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [item.lng,item.lat],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="人员动态">路线展示</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="清除路线">清除路线</span>
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 8000, 0.2),
|
||||
clampToGround: true,
|
||||
offsetY: -60,
|
||||
},
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.markGraphicLayerArr.push(graphicWinodw)
|
||||
this.markGraphicLayer.addGraphic(graphicWinodw);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
getRoutePath(){ // 获取路线数据
|
||||
if(this.startPoint&&this.endPoint){
|
||||
let startCoor = this.startPoint.split(",");
|
||||
let endCoor = this.endPoint.split(",");
|
||||
axios({
|
||||
method: 'get',
|
||||
url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
params: {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
}
|
||||
}).then(data => {
|
||||
if (data.data.data.length > 0) {
|
||||
|
||||
let LineString = data.data.data[0].route;
|
||||
|
||||
if(LineString == null || LineString == "null"){
|
||||
|
||||
}else{
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.drawRoutePath(parse(LineString));
|
||||
// designPath(parse(LineString));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://123.132.248.154:9225/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
|
||||
let obj = JSON.parse(evt.data)
|
||||
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
//_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue