代码合并
parent
4bfb8739eb
commit
29db2ec236
12
.env.dev
12
.env.dev
|
|
@ -1,14 +1,14 @@
|
|||
NODE_ENV = development
|
||||
|
||||
# 正式服务器
|
||||
VUE_APP_BASE_API = http://221.2.83.254:9001/api
|
||||
VUE_APP_BASE_IMG_URL = http://221.2.83.254:9001
|
||||
VUE_APP_WEBSOCKET_URL = ws://221.2.83.254:9002/ws
|
||||
#VUE_APP_BASE_API = http://221.2.83.254:9001/api
|
||||
#VUE_APP_BASE_IMG_URL = http://221.2.83.254:9001
|
||||
#VUE_APP_WEBSOCKET_URL = ws://221.2.83.254:9002/ws
|
||||
|
||||
# 本地测试
|
||||
#VUE_APP_BASE_API = http://221.2.83.254:9013/api
|
||||
#VUE_APP_BASE_IMG_URL = http://221.2.83.254:901
|
||||
#VUE_APP_WEBSOCKET_URL = ws://221.2.83.254:9002/ws
|
||||
VUE_APP_BASE_API = http://221.2.83.254:9013/api
|
||||
VUE_APP_BASE_IMG_URL = http://221.2.83.254:901
|
||||
VUE_APP_WEBSOCKET_URL = ws://221.2.83.254:9002/ws
|
||||
|
||||
|
||||
# 测试服务区
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -34,7 +34,8 @@
|
|||
type="text/javascript"
|
||||
src="lib/include-lib.js?time=20210803"
|
||||
libpath="lib/"
|
||||
include="jquery,jquery.range,animate,bootstrap,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,nprogress,toastr,admui,turf,mars3d,mars3d-widget"
|
||||
include="jquery,jquery.range,bootstrap,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,
|
||||
nprogress,toastr,admui,turf,mars3d,mars3d-widget,mars3d-esri,mars3d-echarts"
|
||||
></script>
|
||||
|
||||
<!-- 腾讯云视频直播 -->
|
||||
|
|
@ -47,6 +48,7 @@
|
|||
|
||||
<!-- -->
|
||||
<script src="./EasyPlayer-lib.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="imouPlayer.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="index.css">
|
||||
|
|
|
|||
|
|
@ -81,9 +81,11 @@ export default {
|
|||
configLayers.unshift(group);
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children.forEach((it, idx) => {
|
||||
|
||||
let attribute = JSON.parse(it.attribute);
|
||||
if(attribute.name == '森林火灾危险等级'){
|
||||
attribute.type = "geojson";
|
||||
|
||||
attribute.url = "http://221.2.83.254:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Aweixianxingdengji&maxFeatures=50&outputFormat=application%2Fjson"
|
||||
// attribute.symbol.styleOptions = {}
|
||||
delete attribute.layers;
|
||||
|
|
@ -115,6 +117,8 @@ export default {
|
|||
attribute.symbol.styleOptions.label.pixelOffsetY = -40
|
||||
}
|
||||
attribute.pid = group.id;
|
||||
attribute.url = attribute.url.replace("http://223.99.16.253:9007","http://221.2.83.254:9007")
|
||||
console.log("attribute::::",attribute);
|
||||
configLayers.unshift(attribute);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
function Base64() {
|
||||
// private property
|
||||
_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
|
||||
let _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
|
||||
// 公共编码方法
|
||||
this.encode = function (input) {
|
||||
function encode(input) {
|
||||
var output = "";
|
||||
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
|
||||
var i = 0;
|
||||
|
|
@ -28,7 +27,7 @@ function Base64() {
|
|||
}
|
||||
|
||||
// 公共解码方法
|
||||
this.decode = function (input) {
|
||||
function decode(input) {
|
||||
var output = "";
|
||||
var chr1, chr2, chr3;
|
||||
var enc1, enc2, enc3, enc4;
|
||||
|
|
@ -55,7 +54,7 @@ function Base64() {
|
|||
}
|
||||
|
||||
// UTF-8编码的私有方法
|
||||
_utf8_encode = function (string) {
|
||||
function _utf8_encode(string) {
|
||||
string = string.replace(/\r\n/g,"\n");
|
||||
var utftext = "";
|
||||
for (var n = 0; n < string.length; n++) {
|
||||
|
|
@ -75,7 +74,7 @@ function Base64() {
|
|||
}
|
||||
|
||||
// UTF-8解码的私有方法
|
||||
_utf8_decode = function (utftext) {
|
||||
function _utf8_decode(utftext) {
|
||||
var string = "";
|
||||
var i = 0;
|
||||
var c = c1 = c2 = 0;
|
||||
|
|
@ -97,6 +96,5 @@ function Base64() {
|
|||
}
|
||||
return string;
|
||||
}
|
||||
}
|
||||
|
||||
export { Base64 }
|
||||
export {encode,decode}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
|
||||
// private property
|
||||
_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
|
||||
// 公共编码方法
|
||||
function encode(input) {
|
||||
var output = "";
|
||||
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
|
||||
var i = 0;
|
||||
input = _utf8_encode(input);
|
||||
while (i < input.length) {
|
||||
chr1 = input.charCodeAt(i++);
|
||||
chr2 = input.charCodeAt(i++);
|
||||
chr3 = input.charCodeAt(i++);
|
||||
enc1 = chr1 >> 2;
|
||||
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
|
||||
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
|
||||
enc4 = chr3 & 63;
|
||||
if (isNaN(chr2)) {
|
||||
enc3 = enc4 = 64;
|
||||
} else if (isNaN(chr3)) {
|
||||
enc4 = 64;
|
||||
}
|
||||
output = output +
|
||||
_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
|
||||
_keyStr.charAt(enc3) + _keyStr.charAt(enc4);
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
// 公共解码方法
|
||||
function decode(input) {
|
||||
var output = "";
|
||||
var chr1, chr2, chr3;
|
||||
var enc1, enc2, enc3, enc4;
|
||||
var i = 0;
|
||||
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
|
||||
while (i < input.length) {
|
||||
enc1 = _keyStr.indexOf(input.charAt(i++));
|
||||
enc2 = _keyStr.indexOf(input.charAt(i++));
|
||||
enc3 = _keyStr.indexOf(input.charAt(i++));
|
||||
enc4 = _keyStr.indexOf(input.charAt(i++));
|
||||
chr1 = (enc1 << 2) | (enc2 >> 4);
|
||||
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
|
||||
chr3 = ((enc3 & 3) << 6) | enc4;
|
||||
output = output + String.fromCharCode(chr1);
|
||||
if (enc3 != 64) {
|
||||
output = output + String.fromCharCode(chr2);
|
||||
}
|
||||
if (enc4 != 64) {
|
||||
output = output + String.fromCharCode(chr3);
|
||||
}
|
||||
}
|
||||
output = _utf8_decode(output);
|
||||
return output;
|
||||
}
|
||||
|
||||
// UTF-8编码的私有方法
|
||||
function _utf8_encode(string) {
|
||||
string = string.replace(/\r\n/g,"\n");
|
||||
var utftext = "";
|
||||
for (var n = 0; n < string.length; n++) {
|
||||
var c = string.charCodeAt(n);
|
||||
if (c < 128) {
|
||||
utftext += String.fromCharCode(c);
|
||||
} else if((c > 127) && (c < 2048)) {
|
||||
utftext += String.fromCharCode((c >> 6) | 192);
|
||||
utftext += String.fromCharCode((c & 63) | 128);
|
||||
} else {
|
||||
utftext += String.fromCharCode((c >> 12) | 224);
|
||||
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
|
||||
utftext += String.fromCharCode((c & 63) | 128);
|
||||
}
|
||||
}
|
||||
return utftext;
|
||||
}
|
||||
|
||||
// UTF-8解码的私有方法
|
||||
function _utf8_decode(utftext) {
|
||||
var string = "";
|
||||
var i = 0;
|
||||
var c = c1 = c2 = 0;
|
||||
while ( i < utftext.length ) {
|
||||
c = utftext.charCodeAt(i);
|
||||
if (c < 128) {
|
||||
string += String.fromCharCode(c);
|
||||
i++;
|
||||
} else if((c > 191) && (c < 224)) {
|
||||
c2 = utftext.charCodeAt(i+1);
|
||||
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
|
||||
i += 2;
|
||||
} else {
|
||||
c2 = utftext.charCodeAt(i+1);
|
||||
c3 = utftext.charCodeAt(i+2);
|
||||
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
|
||||
i += 3;
|
||||
}
|
||||
}
|
||||
return string;
|
||||
}
|
||||
|
||||
console.log(encode("feixian@123456"));
|
||||
console.log(decode("ZmVpeGlhbkAxMjM0NTY="));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<img src="/img/clockIn-bg.png" />
|
||||
</div>
|
||||
<div class="clock-item-info">
|
||||
<p>任务描述：{{ item.pointname }}</p>
|
||||
<p>打卡点名称：{{ item.pointname }}</p>
|
||||
<p>创建时间：{{ item.createtime }}</p>
|
||||
<p>负责人员：{{item.usernames}}</p>
|
||||
<p style="text-align:right;">
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
<div class="item-container">
|
||||
<div class="item-container-left">
|
||||
<el-divider content-position="left">任务信息</el-divider>
|
||||
<el-divider content-position="left">打卡点信息</el-divider>
|
||||
<el-descriptions class="margin-top" :column="1" :size="'mini'" border>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
|
|
@ -88,14 +88,18 @@
|
|||
</el-descriptions>
|
||||
</div>
|
||||
<div class="item-container-right" >
|
||||
<el-divider content-position="left">巡查轨迹</el-divider>
|
||||
<el-divider content-position="left">
|
||||
<span :style="{'color':tabActive == 1 ? '#409eff':'#fff','cursor':'pointer'}" @click="tabActive=1">巡查轨迹</span>
|
||||
|
||||
<span :style="{'color':tabActive == 2 ? '#409eff':'#fff','cursor':'pointer'}" @click="tabActive=2">打卡记录</span>
|
||||
</el-divider>
|
||||
|
||||
<div style="width:100%;text-align:center;padding:100px 0px;" v-if="currentRouters.length<=0">
|
||||
<div style="width:100%;text-align:center;padding:100px 0px;" v-if="currentRouters.length<=0 && tabActive == 1">
|
||||
<img src="/img/no-data.png" style="width:140px;margin-bottom:20px;">
|
||||
<p style="color:#cfcfcf">暂无巡查轨迹</p>
|
||||
</div>
|
||||
|
||||
<div class="users-container">
|
||||
<div class="users-container" v-show="tabActive == 1">
|
||||
<div class="history-line" v-for="(it,idx) in currentRouters" :key="idx">
|
||||
<div class="user-item">
|
||||
<div class="user-photo">
|
||||
|
|
@ -122,6 +126,13 @@
|
|||
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="users-container" v-show="tabActive == 2">
|
||||
<div class="clockIn-box" v-for="(item,idx) in clockInList" :key="idx">
|
||||
<p><span style="color:rgb(204, 204, 204)"><i class="el-icon el-icon-user-solid"></i> 打卡人员：</span>{{ item.Name }} <span style="color:rgb(204, 204, 204)"> <i class="el-icon el-icon-time"></i>打卡时间：</span>{{ item.clockontime }}</p>
|
||||
<p><span style="color:rgb(204, 204, 204)"><i class="el-icon el-icon-location"></i> 打卡位置：</span>{{ parseFloat(item.lng).toFixed(6) }},{{ parseFloat(item.lat).toFixed(6) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
|
|
@ -194,6 +205,10 @@ export default {
|
|||
orgId:null,
|
||||
cascaderProps:{label:'name',value:'id',children:'child',checkStrictly: true},
|
||||
listUpdate:1,
|
||||
clockInList:[
|
||||
|
||||
],
|
||||
tabActive:1,
|
||||
}
|
||||
},
|
||||
created(){
|
||||
|
|
@ -201,9 +216,18 @@ export default {
|
|||
this.gethlyList();
|
||||
},
|
||||
methods:{
|
||||
// 获取打卡点数据
|
||||
getClockInList(pointid){
|
||||
getMethodCommon("/FireGrid/GetCheckInfoByPointId?pageIndex=1&pageSize=999&pointid="+pointid).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.clockInList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
toStatic(){
|
||||
this.$router.push({'path':'/gridman_statistics'})
|
||||
},
|
||||
//
|
||||
lookClockInData(val){
|
||||
this.lookClockInfo(val);
|
||||
},
|
||||
|
|
@ -259,16 +283,15 @@ export default {
|
|||
this.clockInVisible = true;
|
||||
},
|
||||
lookClockInfo(item){
|
||||
console.log("ITEM",item);
|
||||
this.currentClockInfo = item;
|
||||
this.flyCenter = [this.currentClockInfo.lng,this.currentClockInfo.lat];
|
||||
this.currentClockInfo.phones = item.userinfo && item.userinfo.split(",")
|
||||
this.currentClockInfo.users = item.usernames && item.usernames.split(",")
|
||||
this.currentRouters = [];
|
||||
|
||||
this.currentClockInfo.phones.forEach((item,index)=>{
|
||||
this.getRouteList(item);
|
||||
})
|
||||
this.getClockInList(this.currentClockInfo.id);
|
||||
},
|
||||
getTaskList(){
|
||||
getMethodCommon("/FireGrid/GetCheckPoint",this.listQuery).then(res=>{
|
||||
|
|
@ -373,10 +396,13 @@ export default {
|
|||
}
|
||||
|
||||
.page-container{
|
||||
width:100%;
|
||||
height:79px;
|
||||
width: calc( 100% - 24px);
|
||||
margin:0px auto;
|
||||
height:70px;
|
||||
border-top:1px solid #636262;
|
||||
padding:20px 6px;
|
||||
padding:20px 0px;
|
||||
overflow-x: auto;
|
||||
overflow-y:hidden;
|
||||
}
|
||||
.clock-item{
|
||||
width:100%;
|
||||
|
|
@ -448,9 +474,19 @@ export default {
|
|||
.users-container{
|
||||
width:100%;
|
||||
padding-right:15px;
|
||||
height: calc(100vh - 370px);
|
||||
height: calc(100vh - 350px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.clockIn-box{
|
||||
width:100%;
|
||||
height:80px;
|
||||
/* background:rgba(0,0,0,0.25); */
|
||||
border-bottom:1px solid #76838f;
|
||||
padding:5px;
|
||||
color:#efefef;
|
||||
border-radius:0px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.item-container-right div{
|
||||
float:left;
|
||||
}
|
||||
|
|
@ -512,6 +548,13 @@ export default {
|
|||
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__total{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__jump{
|
||||
color:#fff;
|
||||
}
|
||||
::v-deep .el-descriptions__body{
|
||||
background:none;
|
||||
color:#fff;
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@
|
|||
orgsTree: [], // 用户可访问到的所有机构组成的树
|
||||
selectRoles: [], // 用户分配的角色
|
||||
selectRoleNames: '',
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -78,7 +79,6 @@
|
|||
computed: {
|
||||
selectOrgs: {
|
||||
get: function () {
|
||||
console.log(this.detailInfo)
|
||||
if (this.detailInfo.length == 1) {
|
||||
return this.addForm.areaId
|
||||
} else {
|
||||
|
|
@ -86,7 +86,6 @@
|
|||
}
|
||||
},
|
||||
set: function (v) {
|
||||
console.log('set org:', v)
|
||||
var _this = this
|
||||
_this.addForm.areaId = v
|
||||
}
|
||||
|
|
@ -107,7 +106,6 @@
|
|||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
getDetail() {
|
||||
getMethodCommon("/FireCodeApp/GetForestryUserById?id=" + this.detailInfo[0].Id, {}).then(res => {
|
||||
if (res.code == 200) {
|
||||
|
|
|
|||
|
|
@ -511,7 +511,7 @@ export default {
|
|||
type: "vector",
|
||||
scheme: "tms", //new
|
||||
tiles: [
|
||||
"http://223.99.16.253:9007/geoserver/gwc/service/tms/1.0.0/ksp:shp_1691822212@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
|
||||
"http://221.2.83.254:9007/geoserver/gwc/service/tms/1.0.0/ksp:shp_1691822212@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
|
||||
],
|
||||
});
|
||||
this.map.addLayer({
|
||||
|
|
@ -712,7 +712,7 @@ export default {
|
|||
type: "vector",
|
||||
scheme: "tms", //new
|
||||
tiles: [
|
||||
"http://223.99.16.253:9007"+
|
||||
"http://221.2.83.254:9007"+
|
||||
"/geoserver/gwc/service/tms/1.0.0/ksp%3A" +
|
||||
"hulinyuanguanhufanwei" +
|
||||
"@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { encode } from '../../../../utils/base64';
|
||||
import { listToTreeSelect } from '@/utils'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
|
||||
<el-form-item :label="'所属村'">
|
||||
<treeselect :options="orgsTree" :default-expand-level="3" :multiple="true" :flat="true" :open-on-click="true"
|
||||
<treeselect :options="orgsTree" :default-expand-level="1" :multiple="true" :flat="true" :open-on-click="true"
|
||||
:open-on-focus="true" :clear-on-select="true" v-model="selectOrgs" style="z-index: 2026;">
|
||||
</treeselect>
|
||||
</el-form-item>
|
||||
|
|
@ -91,8 +91,11 @@
|
|||
computed: {
|
||||
selectOrgs: {
|
||||
get: function () {
|
||||
if (this.addForm.areaId.length > 0) {
|
||||
return this.addForm.areaId
|
||||
// return this.addForm.areaId.split(",")
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
set: function (v) {
|
||||
var _this = this
|
||||
|
|
@ -110,28 +113,39 @@
|
|||
if (res.code == 200) {
|
||||
var list = res.data
|
||||
var arr = this.traverse(list)
|
||||
console.log(arr)
|
||||
_this.orgsTree = arr;
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
|
||||
getMethodCommon("/FireCodeApp/GetForestryUserById?id=" + this.detailInfo.Id).then(res => {
|
||||
try{
|
||||
if (res.code == 200) {
|
||||
|
||||
let detail = {...res.data[0]};
|
||||
|
||||
this.addForm.id = detail.Id;
|
||||
this.addForm.name = detail.Name;
|
||||
this.addForm.account = detail.Account;
|
||||
this.addForm.sex = detail.Sex;
|
||||
this.addForm.userRole = detail.UserRole ? detail.UserRole : 2;
|
||||
this.addForm.areaId = detail.zrcId.split(",");
|
||||
|
||||
try{
|
||||
this.addForm.areaId.forEach((item,index)=>{
|
||||
this.addForm.areaId[index] = parseInt(item)
|
||||
})
|
||||
} catch(e){
|
||||
throw new Error("用户绑定的组织id错误");
|
||||
}
|
||||
this.formRandom = true;
|
||||
}
|
||||
}catch(e){
|
||||
throw e
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
traverse(arr) {
|
||||
if (arr && arr.length > 0) {
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ export default {
|
|||
type: "vector",
|
||||
scheme: "tms", //new
|
||||
tiles: [
|
||||
"http://223.99.16.253:9007/geoserver/gwc/service/tms/1.0.0/ksp:shp_1691822212@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
|
||||
"http://221.2.83.254:9007/geoserver/gwc/service/tms/1.0.0/ksp:shp_1691822212@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
|
||||
],
|
||||
});
|
||||
this.map.addLayer({
|
||||
|
|
|
|||
|
|
@ -297,7 +297,7 @@ export default {
|
|||
type: "vector",
|
||||
scheme: "tms", //new
|
||||
tiles: [
|
||||
"http://223.99.16.253:9007/geoserver/gwc/service/tms/1.0.0/ksp:shp_1691822212@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
|
||||
"http://221.2.83.254:9007/geoserver/gwc/service/tms/1.0.0/ksp:shp_1691822212@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
|
||||
],
|
||||
});
|
||||
this.mapboxMap.addLayer({
|
||||
|
|
|
|||
|
|
@ -65,6 +65,22 @@
|
|||
</template>
|
||||
{{detailInfo.inTypeName}}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-map-location"></i>
|
||||
进山原因
|
||||
</template>
|
||||
{{detailInfo.reason}}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item v-if="detailInfo.reason == '项目施工'">
|
||||
<template slot="label">
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
项目名称
|
||||
</template>
|
||||
{{detailInfo.projectName}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<div style="float:right;text-align:center;">
|
||||
<el-button type="default" size="mini" @click="resetListQuery"><i class="el-icon el-icon-refresh-left"></i> 重置</el-button>
|
||||
<el-button type="primary" size="mini" icon="el-icon-search" @click="getList();getAllData();">查询</el-button>
|
||||
<el-button type="primary" size="mini" icon="el-icon-download" >导出</el-button>
|
||||
<el-button type="primary" size="mini" icon="el-icon-download" @click="downloadExcel" >导出</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cate-title"> <i class="el-icon el-icon-pie-chart" style=""></i> 数据总览</div>
|
||||
|
|
@ -134,6 +134,7 @@
|
|||
|
||||
import personalInfo from './widget/personalInfo.vue'
|
||||
import { postMethodCommon, getMethodCommon } from "../../../api/common";
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
components: {
|
||||
personalInfo
|
||||
|
|
@ -166,6 +167,27 @@ export default {
|
|||
|
||||
},
|
||||
methods: {
|
||||
downloadExcel(){
|
||||
axios({
|
||||
method:"get",
|
||||
url:process.env.VUE_APP_BASE_API +"/FireGrid/ExportStatistics",
|
||||
params:this.listQuery,
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
},
|
||||
responseType:"blob"
|
||||
}).then(res=>{
|
||||
let fileName = "巡检统计" + new Date().getTime() + ".xls";
|
||||
const elink = document.createElement('a')
|
||||
elink.download = fileName;
|
||||
elink.style.display = 'none'
|
||||
elink.href = URL.createObjectURL(res.data)
|
||||
document.body.appendChild(elink)
|
||||
elink.click()
|
||||
URL.revokeObjectURL(elink.href)
|
||||
document.body.removeChild(elink)
|
||||
})
|
||||
},
|
||||
getGuiji(phone){
|
||||
this.currentPeople = phone;
|
||||
this.personalInfoShow = true;
|
||||
|
|
|
|||
|
|
@ -466,7 +466,7 @@
|
|||
type: "vector",
|
||||
scheme: "tms", //new
|
||||
tiles: [
|
||||
"http://223.99.16.253:9007/geoserver/gwc/service/tms/1.0.0/ksp:shp_1691822212@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
|
||||
"http://221.2.83.254:9007/geoserver/gwc/service/tms/1.0.0/ksp:shp_1691822212@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
|
||||
],
|
||||
});
|
||||
this.map.addLayer({
|
||||
|
|
@ -667,7 +667,7 @@
|
|||
type: "vector",
|
||||
scheme: "tms", //new
|
||||
tiles: [
|
||||
"http://223.99.16.253:9007"+
|
||||
"http://221.2.83.254:9007"+
|
||||
"/geoserver/gwc/service/tms/1.0.0/ksp%3A" +
|
||||
"hulinyuanguanhufanwei" +
|
||||
"@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
|
||||
|
|
|
|||
|
|
@ -260,7 +260,7 @@
|
|||
<div class="close-button" @click="findsourceitemShow = false;" style="width:30px;height:30px;line-height:28px;position:absolute;top:-30px;right:-20px;border-radius: 50%;font-weight:bold;border:2px solid #23DBEC;background: none; z-index: 9999;color:#23DBEC;" >
|
||||
<i class="el-icon el-icon-close"></i>
|
||||
</div>
|
||||
<findsourceitem :options="filterOptions" :currentInfo="currentInfo" ></findsourceitem>
|
||||
<findsourceitem :options="filterOptions" :currentInfo="currentInfo" @lookMonitor="lookMonitor"></findsourceitem>
|
||||
</div>
|
||||
|
||||
<!-- 图层属性编辑弹窗 -->
|
||||
|
|
@ -352,6 +352,7 @@ import {compareArray} from "./lib/compareArray"
|
|||
import findsource from './widget/findsource.vue'
|
||||
import findsourceitem from './widget/findsourceitem.vue'
|
||||
|
||||
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
const areaName = localStorage.getItem("areaName");
|
||||
export default {
|
||||
|
|
@ -929,6 +930,9 @@ export default {
|
|||
this.endLngLat = item;
|
||||
this.goodsVisible = true;
|
||||
},
|
||||
lookMonitor(e){
|
||||
this.jiankong(e);
|
||||
},
|
||||
// 监控
|
||||
jiankong(e) {
|
||||
// this.deviceId = "8L0995DPAG5DF32";
|
||||
|
|
@ -986,8 +990,8 @@ export default {
|
|||
_self.getTaskList();
|
||||
|
||||
// 绑定地图点击事件
|
||||
// map.on(this.mars3d.EventType.click, this.onMapClick);
|
||||
// map.on(this.mars3d.EventType.clickTileGraphic, this.onMapClick);
|
||||
map.on(this.mars3d.EventType.click, this.onMapClick);
|
||||
map.on(this.mars3d.EventType.clickTileGraphic, this.onMapClick);
|
||||
|
||||
// 监听pop弹窗
|
||||
_self.handlerlistenPopup(map);
|
||||
|
|
@ -1063,7 +1067,7 @@ export default {
|
|||
lng: mpt._lng,
|
||||
lat: mpt._lat,
|
||||
};
|
||||
// this.findsourceShow = true
|
||||
this.findsourceShow = true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
|
@ -1194,7 +1198,9 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
onMapClick(e) { },
|
||||
onMapClick(e) {
|
||||
|
||||
},
|
||||
// 当前日期时间
|
||||
handlerTime() {
|
||||
let date = new Date();
|
||||
|
|
|
|||
|
|
@ -11,9 +11,10 @@ const GD_KEY = "6af6a87038f44c8c793aa70331f2b7ca"
|
|||
|
||||
//路线的图层
|
||||
let pathGraphicLayers = null
|
||||
let pathOneGraphicLayers= null
|
||||
|
||||
//导航寻路
|
||||
export const getRouterFunc = (params, method = 'all') => {
|
||||
export const getRouterFunc = (params, method = 'postgis') => {
|
||||
/**
|
||||
* method：
|
||||
* 当为 postgis时，仅仅使用postgis导航
|
||||
|
|
@ -229,6 +230,80 @@ export const drawRouterFunc = (pathObject) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 绘制线路
|
||||
export const drawRoutersFunc = (pathObject) => {
|
||||
let { allCoordinates, startLngLat, endLngLat, startRouterLngLat, endRouterLngLat, gdRoute, postGisRoute } = pathObject
|
||||
// 添加graphic
|
||||
if (pathGraphicLayers == null) {
|
||||
pathGraphicLayers = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(pathGraphicLayers);
|
||||
} else {
|
||||
|
||||
}
|
||||
//当只有两组数据时，说明没有导航的路线，直接使用虚线连接
|
||||
console.log('allCoordinates.length::: ', allCoordinates.length);
|
||||
if (allCoordinates.length == 2) {
|
||||
//只绘制开头到结尾的路线的路段
|
||||
// let endPathGraphic = drawPolylineDashEntity([startLngLat, endLngLat], 'YELLOW')
|
||||
// pathGraphicLayers.addGraphic(endPathGraphic);
|
||||
} else {
|
||||
// 导航数据路段
|
||||
// let gdPathGraphic = drawLineFlowEntity(gdRoute, 'YELLOW',10)
|
||||
// let postgisPathGraphic = drawLineFlowEntity(postGisRoute, 'RED',10)
|
||||
let pathGraphic = drawLineFlowEntityColor(allCoordinates, '#f76403')
|
||||
|
||||
//开始的路段
|
||||
// let startPathGraphic = drawPolylineDashEntity([startLngLat, startRouterLngLat], 'YELLOW')
|
||||
|
||||
//结尾的路段
|
||||
// let endPathGraphic = drawPolylineDashEntity([endRouterLngLat, endLngLat], 'YELLOW')
|
||||
let endPathGraphic = drawPolylineEntity([endRouterLngLat, endLngLat], 'YELLOW')
|
||||
|
||||
|
||||
// pathGraphicLayers.addGraphic(gdPathGraphic);
|
||||
// pathGraphicLayers.addGraphic(postgisPathGraphic);
|
||||
pathGraphicLayers.addGraphic(pathGraphic);
|
||||
// pathGraphicLayers.addGraphic(startPathGraphic);
|
||||
pathGraphicLayers.addGraphic(endPathGraphic);
|
||||
}
|
||||
}
|
||||
|
||||
// 高亮路线
|
||||
export const drawOneRouterFunc = (pathObject) => {
|
||||
let { allCoordinates, startLngLat, endLngLat, startRouterLngLat, endRouterLngLat, gdRoute, postGisRoute } = pathObject
|
||||
// 添加graphic
|
||||
if (pathOneGraphicLayers == null) {
|
||||
pathOneGraphicLayers = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(pathOneGraphicLayers);
|
||||
} else {
|
||||
pathOneGraphicLayers.clear();
|
||||
}
|
||||
//当只有两组数据时，说明没有导航的路线，直接使用虚线连接
|
||||
|
||||
if (allCoordinates.length == 2) {
|
||||
//只绘制开头到结尾的路线的路段
|
||||
let endPathGraphic = drawPolylineDashEntity([startLngLat, endLngLat], 'YELLOW')
|
||||
pathOneGraphicLayers.addGraphic(endPathGraphic);
|
||||
} else {
|
||||
// 导航数据路段
|
||||
// let gdPathGraphic = drawLineFlowEntity(gdRoute, 'YELLOW',10)
|
||||
// let postgisPathGraphic = drawLineFlowEntity(postGisRoute, 'RED',10)
|
||||
let pathGraphic = drawLineFlowEntity(allCoordinates, 'CYAN')
|
||||
|
||||
//开始的路段
|
||||
// let startPathGraphic = drawPolylineDashEntity([startLngLat, startRouterLngLat], 'YELLOW')
|
||||
|
||||
//结尾的路段
|
||||
// let endPathGraphic = drawPolylineDashEntity([endRouterLngLat, endLngLat], 'YELLOW')
|
||||
|
||||
// pathGraphicLayers.addGraphic(gdPathGraphic);
|
||||
// pathGraphicLayers.addGraphic(postgisPathGraphic);
|
||||
pathOneGraphicLayers.addGraphic(pathGraphic);
|
||||
// pathGraphicLayers.addGraphic(startPathGraphic);
|
||||
// pathGraphicLayers.addGraphic(endPathGraphic);
|
||||
}
|
||||
}
|
||||
|
||||
// 生成虚线实体
|
||||
const drawPolylineDashEntity = (positions, cesiumColor,width=5) => {
|
||||
return new mars3d.graphic.PolylineEntity({
|
||||
|
|
@ -244,6 +319,22 @@ const drawPolylineDashEntity = (positions, cesiumColor,width=5) => {
|
|||
},
|
||||
});
|
||||
}
|
||||
|
||||
const drawPolylineEntity = (positions, cesiumColor,width=5) => {
|
||||
return new mars3d.graphic.PolylineEntity({
|
||||
positions: positions,
|
||||
style: {
|
||||
width: width,
|
||||
clampToGround: true,
|
||||
// materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color[cesiumColor],
|
||||
// dashLength: 8.0,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 生成动态线实体
|
||||
const drawLineFlowEntity = (positions, cesiumColor,width=5) => {
|
||||
return new mars3d.graphic.PolylineEntity({
|
||||
|
|
@ -261,6 +352,22 @@ const drawLineFlowEntity = (positions, cesiumColor,width=5) => {
|
|||
});
|
||||
}
|
||||
|
||||
const drawLineFlowEntityColor = (positions, cesiumColor,width=5) => {
|
||||
return new mars3d.graphic.PolylineEntity({
|
||||
positions: positions,
|
||||
style: {
|
||||
width: width,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: cesiumColor,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
//删除路线
|
||||
|
|
@ -270,6 +377,13 @@ export const clearRouterFunc = () => {
|
|||
} else {
|
||||
pathGraphicLayers.clear();
|
||||
}
|
||||
|
||||
if (pathOneGraphicLayers == null) {
|
||||
return false
|
||||
} else {
|
||||
pathOneGraphicLayers.clear();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//计算最近路线
|
||||
|
|
@ -303,7 +417,7 @@ const getMinimumRoute = (pathObject) => {
|
|||
}
|
||||
// 阈值计算重复路线，去除重复线路
|
||||
let overlapping = turf.lineOverlap(gdRouteLine, postGisRouteLine, { tolerance: 0.1 });
|
||||
console.log('overlapping::: ', overlapping);
|
||||
// console.log('overlapping::: ', overlapping);
|
||||
if (overlapping.features.length) {
|
||||
let lastOverlapPoint = overlapping.features.at(-1).geometry.coordinates[0]
|
||||
let [overlapGdCoordinates, overlapPostGisCoordinates] = sliceByPoint(startRouterLngLat, gdRouteLine, endRouterLngLat, postGisRoute, lastOverlapPoint)
|
||||
|
|
@ -378,7 +492,7 @@ const comLineStringGeoJson = (coordinates) => {
|
|||
// 从一条线的geometry中获取坐标
|
||||
const getOneLineCoordinatesFromGeometry = (geometry) => {
|
||||
let coordinates = geometry.coordinates
|
||||
console.log('geometry::: ', geometry);
|
||||
// console.log('geometry::: ', geometry);
|
||||
let list = []
|
||||
if (geometry.type == "MultiLineString") {
|
||||
coordinates.map(coord => {
|
||||
|
|
@ -398,9 +512,8 @@ const getOnePointCoordinatesFromGeoJson = (geojson) => {
|
|||
}
|
||||
//从多个点的geojson中返回坐标点
|
||||
const getMultPointCoordinatesFromGeoJson = (geojson) => {
|
||||
console.log('geojson::: ', geojson);
|
||||
// console.log('geojson::: ', geojson);
|
||||
return geojson.features.map(feature => {
|
||||
return feature.geometry.coordinates
|
||||
})
|
||||
|
||||
}
|
||||
|
|
@ -30,10 +30,14 @@
|
|||
<p class="content-item-name">{{ item.name }}</p>
|
||||
<p class="info">
|
||||
<span style="padding:4px 6px;background:#14332F;color:#fff;margin-right:12px;">距离：<span style="color:#E8A700;">{{ item.distance }}Km</span></span>
|
||||
<span style="padding:4px 6px;background:#14332F;color:#fff;margin-right:12px;">预计时间：<span style="color:#E8A700;">25分钟</span></span>
|
||||
<span style="padding:4px 6px;background:#14332F;color:#fff;margin-right:12px;">时间：<span style="color:#E8A700;">{{item.time}}</span></span>
|
||||
</p>
|
||||
<div class="icon-container">
|
||||
<img src="/img/phone.png" v-show="currentTab['label'] == '护林员'" @click="toPosition([item.lng,item.lat],item.name)" alt="">
|
||||
<img src="/img/homeimg/video-call-icon.png" v-show="currentTab['label'] == '视频监控'" @click="lookMonitor(item.cameraindexcode)" alt="">
|
||||
<img src="/img/homeimg/to-position-icon.png" @click="toPosition([item.lng,item.lat],item.name)" alt="">
|
||||
<img src="/img/homeimg/route-icon.png" @click="toRouter([item.lng,item.lat])" alt="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,10 +47,11 @@
|
|||
import { getMethodCommon } from '../../../api/common';
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
import * as turf from '@turf/turf'
|
||||
import { getRouterFunc, drawRouterFunc, clearRouterFunc } from '../lib/routePath'
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props:["options","currentInfo"],
|
||||
props:["options","currentInfo","waterCenter"],
|
||||
data() {
|
||||
return {
|
||||
filterOptions:[],
|
||||
|
|
@ -54,11 +59,11 @@ import * as turf from '@turf/turf'
|
|||
{
|
||||
label:"全部",
|
||||
value:0,
|
||||
checked:true,
|
||||
checked:false,
|
||||
},{
|
||||
label:"1Km",
|
||||
value:1000,
|
||||
checked:false,
|
||||
checked:true,
|
||||
},{
|
||||
label:"5Km",
|
||||
value:5000,
|
||||
|
|
@ -109,47 +114,58 @@ import * as turf from '@turf/turf'
|
|||
}
|
||||
],
|
||||
listQuery:{
|
||||
distance:0,
|
||||
distance:1000,
|
||||
tablename:null,
|
||||
pageIndex:1,
|
||||
pageSize:12,
|
||||
pageSize:9999,
|
||||
},
|
||||
list:[],
|
||||
markGraphicLayer:null,
|
||||
currentTab:null,
|
||||
waterGraphicLayer: null,
|
||||
startLngLat:null,
|
||||
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
methods: {
|
||||
lookMonitor(deviceId){
|
||||
this.$emit("lookMonitor",deviceId)
|
||||
},
|
||||
toPosition(lngLat,name){
|
||||
window.globalmap.flyToPoint(lngLat,{radius:2000,"pitch":-90});
|
||||
// 第一次添加时叠加图层
|
||||
if (this.markGraphicLayer == null) {
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(this.markGraphicLayer);
|
||||
}else{
|
||||
this.markGraphicLayer.clear();
|
||||
}
|
||||
// if (this.markGraphicLayer == null) {
|
||||
// this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
// window.globalmap.addLayer(this.markGraphicLayer);
|
||||
// }else{
|
||||
// this.markGraphicLayer.clear();
|
||||
// }
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: lngLat,
|
||||
style: {
|
||||
image: "/img/xiangdao.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true,
|
||||
scale: 0.4,
|
||||
label: {
|
||||
text: name,
|
||||
font_size: 12,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: -48,
|
||||
},
|
||||
},
|
||||
pointerEvents: true,
|
||||
});
|
||||
// let graphic = new mars3d.graphic.BillboardEntity({
|
||||
// position: lngLat,
|
||||
// style: {
|
||||
// image: "/img/xiangdao.png",
|
||||
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
// clampToGround: true,
|
||||
// scale: 0.4,
|
||||
// label: {
|
||||
// text: name,
|
||||
// font_size: 12,
|
||||
// color: "#ffffff",
|
||||
// pixelOffsetY: -48,
|
||||
// },
|
||||
// },
|
||||
// pointerEvents: true,
|
||||
// });
|
||||
|
||||
this.markGraphicLayer.addGraphic(graphic);
|
||||
// this.markGraphicLayer.addGraphic(graphic);
|
||||
},
|
||||
toRouter(lngLat){
|
||||
this.startLngLat = lngLat;
|
||||
this.getRoutePath();
|
||||
},
|
||||
distanceChange(item,index){
|
||||
this.distanceOptins.forEach((it,idx)=>{
|
||||
|
|
@ -166,6 +182,8 @@ import * as turf from '@turf/turf'
|
|||
this.filterOptions[index].checked = true;
|
||||
this.listQuery.tablename = this.filterOptions[index].tableRef;
|
||||
this.getList();
|
||||
this.currentTab = this.filterOptions[index]
|
||||
console.log("currentTab",this.currentTab);
|
||||
},
|
||||
selectAll(){
|
||||
this.checkAll = !this.checkAll
|
||||
|
|
@ -182,6 +200,10 @@ import * as turf from '@turf/turf'
|
|||
selectOne(index){
|
||||
this.checkOptions[index].checked = !this.checkOptions[index].checked
|
||||
},
|
||||
getAroundTime(a) {
|
||||
var m = parseInt(a/60);
|
||||
return m+"分钟"
|
||||
},
|
||||
getList(){
|
||||
getMethodCommon("/DataMaintenance/LoadDataInfo",this.listQuery).then(res=>{
|
||||
if(res.code == 200){
|
||||
|
|
@ -196,18 +218,115 @@ import * as turf from '@turf/turf'
|
|||
let options = {units: 'kilometers'};
|
||||
let distance = turf.distance(from, to, options);
|
||||
item.distance = distance.toFixed(2)
|
||||
console.log("distance",distance)
|
||||
item.time = this.getAroundTime(distance.toFixed(2) * 60 + 5 * 60)
|
||||
|
||||
}else{
|
||||
item.distance = 0
|
||||
}
|
||||
})
|
||||
|
||||
this.drawPoint(this.list);
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPoint(list){
|
||||
if (this.waterGraphicLayer == null) {
|
||||
this.waterGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(this.waterGraphicLayer);
|
||||
}
|
||||
|
||||
this.waterGraphicLayer.clear();
|
||||
|
||||
list.forEach((item,index)=>{
|
||||
console.log("item:::",item);
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lng, item.lat],
|
||||
style: {
|
||||
image: "img/xiangdao.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,
|
||||
label: {
|
||||
text:item.name,
|
||||
font_size: 12,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: -50,
|
||||
pixelOffsetX:20,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 6000,
|
||||
distanceDisplayCondition_near: 0,
|
||||
},
|
||||
},
|
||||
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.name}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label" >距离：</div>
|
||||
<div class="data-value">${item.distance}km</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label" >预计用时：</div>
|
||||
<div class="data-value">${item.time}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label"></div>
|
||||
<div class="data-value" title="导航" >
|
||||
<span id="lablSBZT1" onclick="toRouter([${item.lng}, ${item.lat}]);" class="label-tag data-value-status-1" >导航</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: -20,
|
||||
offsetX:15,
|
||||
template: "{content}",
|
||||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||
},
|
||||
pointerEvents: true,
|
||||
});
|
||||
this.waterGraphicLayer.addGraphic(graphic);
|
||||
})
|
||||
},
|
||||
submit(){
|
||||
|
||||
}
|
||||
},
|
||||
getRoutePath() {
|
||||
// 获取路线数据
|
||||
let startCoor = this.startLngLat;
|
||||
let endCoor = [this.currentInfo.lng,this.currentInfo.lat];
|
||||
let params = {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
areaname: localStorage.getItem("areaName"),
|
||||
};
|
||||
getRouterFunc(params,).then(res => {
|
||||
drawRouterFunc(res)
|
||||
}).catch(err => {
|
||||
clearRouterFunc()
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.filterOptions = [...this.options]
|
||||
|
|
@ -215,12 +334,16 @@ import * as turf from '@turf/turf'
|
|||
this.listQuery.lat = this.currentInfo.lat;
|
||||
this.listQuery.lng = this.currentInfo.lng;
|
||||
this.filterChange(0)
|
||||
|
||||
window.toRouter = this.toRouter
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
|
||||
clearRouterFunc();
|
||||
this.waterGraphicLayer.clear();
|
||||
window.globalmap.removeLayer(this.waterGraphicLayer);
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -393,19 +516,19 @@ import * as turf from '@turf/turf'
|
|||
position:relative;
|
||||
}
|
||||
.content-container .content-item p{
|
||||
width: calc( 100% - 80px);
|
||||
width: calc( 100% - 118px);
|
||||
}
|
||||
.content-container .content-item .content-item-name{
|
||||
font-size:15px;
|
||||
color:#fff;
|
||||
padding:8px 0px;
|
||||
border-bottom: 1px solid #224C47;
|
||||
width: calc( 100% - 80px);
|
||||
width: calc( 100% - 118px);
|
||||
}
|
||||
|
||||
.icon-container{
|
||||
float:right;
|
||||
width:78px;
|
||||
width:128px;
|
||||
height:80px;
|
||||
line-height:80px;
|
||||
position:absolute;
|
||||
|
|
@ -415,9 +538,10 @@ import * as turf from '@turf/turf'
|
|||
}
|
||||
|
||||
.icon-container img{
|
||||
width:36px;
|
||||
height:36px;
|
||||
margin-top:15px;
|
||||
width:28px;
|
||||
height:28px;
|
||||
margin-top:6px;
|
||||
margin-left:8px;
|
||||
cursor:pointer;
|
||||
}
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -26,6 +26,16 @@
|
|||
</div>
|
||||
|
||||
<div class="box-container">
|
||||
<!-- 搜索人员位置 -->
|
||||
<el-select v-model="listQuery.type" placeholder="请选择" size="mini" @change="getUserList">
|
||||
<el-option
|
||||
v-for="(item,index) in filterOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<!-- -->
|
||||
<el-input type="text" size="mini" v-model="onlineusername" style="width:250px;margin-left:15px;margin-right:15px;" placeholder="请输入人员姓名" ></el-input>
|
||||
<el-button type="primary" size="mini" icon="el-icon-search" @click="filterList">搜索</el-button>
|
||||
<div class="table-body">
|
||||
|
|
@ -54,9 +64,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="operate-button-container">
|
||||
<img class="img-box" v-if="item.type=='人员'" src="/img/homeimg/video-call-icon.png" @click="videoCall(item.phone)" />
|
||||
<img class="img-box" v-if="item.type!= '对讲机'" src="/img/homeimg/video-call-icon.png" @click="videoCall(item.phone)" />
|
||||
<img class="img-box" src="/img/homeimg/to-position-icon.png" @click="toPosition([item.lng,item.lat])" />
|
||||
<img class="img-box" v-if="item.type=='人员'" src="/img/phone.png" @click="callPhoneOne(item.phone)" />
|
||||
<img class="img-box" v-if="item.type!= '对讲机'" src="/img/phone.png" @click="callPhoneOne(item.phone)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -78,7 +88,8 @@ import {compareArray} from '../lib/compareArray.js'
|
|||
list:[],
|
||||
listQuery:{
|
||||
pageIndex:1,
|
||||
pageSize:12
|
||||
pageSize:12,
|
||||
type:0
|
||||
},
|
||||
showLayer:false,
|
||||
checkPhoneArr:[],
|
||||
|
|
@ -91,9 +102,25 @@ import {compareArray} from '../lib/compareArray.js'
|
|||
phones:null,
|
||||
markGraphicLayerArr:null,
|
||||
topList:[],
|
||||
teamIcons:{
|
||||
|
||||
teamIcons:{},
|
||||
filterOptions:[
|
||||
{
|
||||
label:"全部",
|
||||
value:0
|
||||
},{
|
||||
label:"管理员",
|
||||
value:1
|
||||
},{
|
||||
label:"护林员",
|
||||
value:2
|
||||
},{
|
||||
label:"巡查员",
|
||||
value:3
|
||||
},{
|
||||
label:"网格员",
|
||||
value:4
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
|
|
@ -128,6 +155,9 @@ import {compareArray} from '../lib/compareArray.js'
|
|||
}
|
||||
},
|
||||
methods:{
|
||||
getUserList(e){
|
||||
this.getListData();
|
||||
},
|
||||
getTeamIcon(){
|
||||
getMethodCommon("/FireCodePC/GetUserUnit").then(res=>{
|
||||
if(res.code == 200){
|
||||
|
|
@ -190,7 +220,7 @@ import {compareArray} from '../lib/compareArray.js'
|
|||
|
||||
},
|
||||
getListData(){
|
||||
getMethodCommon("/FireManagement/GetPointByAPP",this.listQuery).then(res=>{
|
||||
getMethodCommon("/FireManagement/GetPointByUserType",this.listQuery).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.list = res.data
|
||||
this.total = res.count
|
||||
|
|
@ -298,8 +328,8 @@ import {compareArray} from '../lib/compareArray.js'
|
|||
window.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
compareResult.add.forEach((item, index) => {
|
||||
let showVideo = item.type == '人员' ? 'block':'none';
|
||||
let img = item.type == '人员' ? 'jiuyuanrenyuan' : 'duijiangji'
|
||||
let showVideo = (item.type == '护林员' || item.type == '其他') ? 'block':'none';
|
||||
let img = (item.type == '护林员' || item.type == '其他') ? 'jiuyuanrenyuan' : 'duijiangji'
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
id:item.createId,
|
||||
position: [item.lng, item.lat],
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</div>
|
||||
<div class="box-container">
|
||||
<div class="flex" style="margin: 10px 0">
|
||||
<span style="width: 80px; text-align: right; color: #fff">距离：</span>
|
||||
<span style="width: 80px; text-align: right; color: #fff">半径：</span>
|
||||
<div>
|
||||
<el-radio-group v-model="distanceradio" @input="radioChange">
|
||||
<el-radio :label="1" class="mr-1">1km内</el-radio>
|
||||
|
|
@ -20,12 +20,12 @@
|
|||
<div class="table-body">
|
||||
<div class="item" v-for="(item, index) in nestWaterPoints" :key="index">
|
||||
<div>{{ "水源地" + (index + 1) }}</div>
|
||||
<div>距离 {{ item.distance }} km</div>
|
||||
<div>路程 {{ item.distance }} km</div>
|
||||
<div>{{ "预计" + item.time }}</div>
|
||||
<div class="float:right;text-align:right;">
|
||||
<i
|
||||
class="el-icon el-icon-position"
|
||||
@click="flyToPosition([item.lngLat[0], item.lngLat[1]])"
|
||||
@click="flyToPosition([item.lngLat[0], item.lngLat[1]],'one')"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
import appConfig from "../../../../public/config/app.json";
|
||||
import * as turf from "@turf/turf";
|
||||
import axios from "axios";
|
||||
import { getRouterFunc, drawRouterFunc, clearRouterFunc } from '../lib/routePath'
|
||||
import { getRouterFunc, drawRouterFunc, drawOneRouterFunc,drawRoutersFunc,clearRouterFunc } from '../lib/routePath'
|
||||
export default {
|
||||
name: "monitorbox",
|
||||
props: ["waterCenter", "firePopup","visible"],
|
||||
|
|
@ -87,6 +87,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
close() {
|
||||
if(this.echartsLayer){
|
||||
this.echartsLayer.remove(true);
|
||||
}
|
||||
|
||||
this.waterGraphicLayerArr.forEach((item) => {
|
||||
this.waterGraphicLayer.removeGraphic(item);
|
||||
});
|
||||
|
|
@ -135,6 +139,8 @@ export default {
|
|||
return a.distance - b.distance;
|
||||
});
|
||||
|
||||
console.log("nestWaterPoints",this.nestWaterPoints)
|
||||
|
||||
if (this.waterGraphicLayer == null) {
|
||||
this.waterGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(this.waterGraphicLayer);
|
||||
|
|
@ -191,7 +197,7 @@ export default {
|
|||
<div class="data-li">
|
||||
<div class="data-label"></div>
|
||||
<div class="data-value" title="导航" >
|
||||
<span id="lablSBZT1" onclick="flyToPosition([${item.lngLat[0]}, ${item.lngLat[1]}]);" class="label-tag data-value-status-1" >导航</span>
|
||||
<span id="lablSBZT1" onclick="flyToPosition([${item.lngLat[0]}, ${item.lngLat[1]}],'one');" class="label-tag data-value-status-1" >导航</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -214,6 +220,11 @@ export default {
|
|||
this.waterGraphicLayerArr.push(graphic);
|
||||
this.waterGraphicLayer.addGraphic(graphic);
|
||||
});
|
||||
|
||||
clearRouterFunc();
|
||||
this.nestWaterPoints.forEach((item,index)=>{
|
||||
this.flyToPosition([item.lngLat[0], item.lngLat[1]],'all')
|
||||
})
|
||||
window.globalmap.addLayer(this.waterGraphicLayer);
|
||||
},
|
||||
getWaterList() {
|
||||
|
|
@ -252,13 +263,28 @@ export default {
|
|||
return a.distance - b.distance;
|
||||
});
|
||||
this.allData = this.nestWaterPoints;
|
||||
|
||||
// Echarts流动线条特效
|
||||
// let options = this.getEchartsOption(lng,lat,this.nestWaterPoints)
|
||||
// if(this.echartsLayer){
|
||||
// this.echartsLayer.remove(true);
|
||||
// }
|
||||
// this.echartsLayer = new mars3d.layer.EchartsLayer(options)
|
||||
// window.globalmap.addLayer(this.echartsLayer)
|
||||
// this.echartsLayer.flyTo();
|
||||
},
|
||||
flyToPosition(lngLat) {
|
||||
flyToPosition(lngLat,type) {
|
||||
if(type=='all'){
|
||||
this.startLngLat = lngLat;
|
||||
this.getRoutePath();
|
||||
this.getRoutePath(type);
|
||||
}else if(type == 'one'){
|
||||
this.startLngLat = lngLat;
|
||||
this.getRoutePath(type);
|
||||
}
|
||||
|
||||
// window.globalmap.flyToPoint(lngLat, { radius: 4000, pitch: -90 });
|
||||
},
|
||||
getRoutePath() {
|
||||
getRoutePath(type) {
|
||||
// 获取路线数据
|
||||
let startCoor = this.startLngLat;
|
||||
let endCoor = this.waterCenter;
|
||||
|
|
@ -270,12 +296,110 @@ export default {
|
|||
areaname: localStorage.getItem("areaName"),
|
||||
};
|
||||
getRouterFunc(params,).then(res => {
|
||||
drawRouterFunc(res)
|
||||
if(type == 'all'){
|
||||
drawRoutersFunc(res)
|
||||
}else if( type == 'one'){
|
||||
drawOneRouterFunc(res)
|
||||
}
|
||||
}).catch(err => {
|
||||
clearRouterFunc()
|
||||
})
|
||||
},
|
||||
getEchartsOption(lng,lat,nestWaterPoints) {
|
||||
const beijinCoord = [lng, lat]
|
||||
const symbolPoint = "image://img/symbol1.png"
|
||||
const linePoint = "image://img/linePoint1.png"
|
||||
|
||||
const pointArr = []
|
||||
const pathArr = [];
|
||||
console.log("nestWaterPoints",nestWaterPoints)
|
||||
for(let i=0;i<15;i++){
|
||||
pointArr.push({
|
||||
name: nestWaterPoints[i].distance+"km",
|
||||
value: nestWaterPoints[i].lngLat,
|
||||
symbol: symbolPoint
|
||||
})
|
||||
pathArr.push({
|
||||
name: i,
|
||||
toname: "当前位置",
|
||||
coords: [nestWaterPoints[i].lngLat, beijinCoord]
|
||||
})
|
||||
}
|
||||
|
||||
const option = {
|
||||
animation: false,
|
||||
clampToGround:true,
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "lines",
|
||||
coordinateSystem: "mars3dMap",
|
||||
zlevel: 1,
|
||||
data: pathArr,
|
||||
// 线上面的动态特效
|
||||
effect: {
|
||||
show: true,
|
||||
smooth: false,
|
||||
trailLength: 0,
|
||||
symbol: linePoint,
|
||||
symbolSize: [10, 30],
|
||||
period: 4
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
color: "#1c67d6",
|
||||
curveness: 0.2
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "mars3dMap",
|
||||
zlevel: 3,
|
||||
data: [
|
||||
{
|
||||
name: "当前位置",
|
||||
value: beijinCoord.concat(200)
|
||||
}
|
||||
],
|
||||
rippleEffect: {
|
||||
period: 10,
|
||||
scale: 5,
|
||||
brushType: "fill"
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "mars3dMap",
|
||||
symbolSize: [20, 20],
|
||||
symbolOffset: [0, -10],
|
||||
zlevel: 3,
|
||||
circular: {
|
||||
rotateLabel: true
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
formatter: "{b}",
|
||||
fontSize: 14,
|
||||
color: "#fff",
|
||||
textBorderColor: "#2aa4e8",
|
||||
offset: [0, 10]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowColor: "none"
|
||||
}
|
||||
},
|
||||
data: pointArr
|
||||
}
|
||||
]
|
||||
}
|
||||
return option
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {encode} from '../../utils/base64'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import {
|
||||
mapGetters,
|
||||
|
|
@ -147,7 +148,9 @@
|
|||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('Login', this.loginForm).then(() => {
|
||||
let form = {...this.loginForm}
|
||||
form.password = encode(form.password);
|
||||
this.$store.dispatch('Login', form).then(() => {
|
||||
this.loading = false
|
||||
this.$router.push({
|
||||
path: '/index'
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
},{
|
||||
lable:"数据中心",
|
||||
icon:"",
|
||||
url:"http://223.99.16.253:9003/#/dashboard?id="+ localStorage.getItem("X-Token"),
|
||||
url:"http://221.2.83.254:9003/#/dashboard?id="+ localStorage.getItem("X-Token"),
|
||||
bgColor:"linear-gradient(180deg, #E0FF13 0%, #086D3C 100%)",
|
||||
show:localStorage.getItem("unitName") && localStorage.getItem("unitName") != "null" ? false : true,
|
||||
},{
|
||||
|
|
|
|||
Loading…
Reference in New Issue