添加网格查询
parent
29db2ec236
commit
cf5cdf22c2
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
|
|
@ -0,0 +1,215 @@
|
|||
var rotateLeft = function(lValue, iShiftBits) {
|
||||
return(lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
|
||||
}
|
||||
|
||||
var addUnsigned = function(lX, lY) {
|
||||
var lX4, lY4, lX8, lY8, lResult;
|
||||
lX8 = (lX & 0x80000000);
|
||||
lY8 = (lY & 0x80000000);
|
||||
lX4 = (lX & 0x40000000);
|
||||
lY4 = (lY & 0x40000000);
|
||||
lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);
|
||||
if(lX4 & lY4) return(lResult ^ 0x80000000 ^ lX8 ^ lY8);
|
||||
if(lX4 | lY4) {
|
||||
if(lResult & 0x40000000) return(lResult ^ 0xC0000000 ^ lX8 ^ lY8);
|
||||
else return(lResult ^ 0x40000000 ^ lX8 ^ lY8);
|
||||
} else {
|
||||
return(lResult ^ lX8 ^ lY8);
|
||||
}
|
||||
}
|
||||
|
||||
var F = function(x, y, z) {
|
||||
return(x & y) | ((~x) & z);
|
||||
}
|
||||
|
||||
var G = function(x, y, z) {
|
||||
return(x & z) | (y & (~z));
|
||||
}
|
||||
|
||||
var H = function(x, y, z) {
|
||||
return(x ^ y ^ z);
|
||||
}
|
||||
|
||||
var I = function(x, y, z) {
|
||||
return(y ^ (x | (~z)));
|
||||
}
|
||||
|
||||
var FF = function(a, b, c, d, x, s, ac) {
|
||||
a = addUnsigned(a, addUnsigned(addUnsigned(F(b, c, d), x), ac));
|
||||
return addUnsigned(rotateLeft(a, s), b);
|
||||
};
|
||||
|
||||
var GG = function(a, b, c, d, x, s, ac) {
|
||||
a = addUnsigned(a, addUnsigned(addUnsigned(G(b, c, d), x), ac));
|
||||
return addUnsigned(rotateLeft(a, s), b);
|
||||
};
|
||||
|
||||
var HH = function(a, b, c, d, x, s, ac) {
|
||||
a = addUnsigned(a, addUnsigned(addUnsigned(H(b, c, d), x), ac));
|
||||
return addUnsigned(rotateLeft(a, s), b);
|
||||
};
|
||||
|
||||
var II = function(a, b, c, d, x, s, ac) {
|
||||
a = addUnsigned(a, addUnsigned(addUnsigned(I(b, c, d), x), ac));
|
||||
return addUnsigned(rotateLeft(a, s), b);
|
||||
};
|
||||
|
||||
var convertToWordArray = function(string) {
|
||||
var lWordCount;
|
||||
var lMessageLength = string.length;
|
||||
var lNumberOfWordsTempOne = lMessageLength + 8;
|
||||
var lNumberOfWordsTempTwo = (lNumberOfWordsTempOne - (lNumberOfWordsTempOne % 64)) / 64;
|
||||
var lNumberOfWords = (lNumberOfWordsTempTwo + 1) * 16;
|
||||
var lWordArray = Array(lNumberOfWords - 1);
|
||||
var lBytePosition = 0;
|
||||
var lByteCount = 0;
|
||||
while(lByteCount < lMessageLength) {
|
||||
lWordCount = (lByteCount - (lByteCount % 4)) / 4;
|
||||
lBytePosition = (lByteCount % 4) * 8;
|
||||
lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));
|
||||
lByteCount++;
|
||||
}
|
||||
lWordCount = (lByteCount - (lByteCount % 4)) / 4;
|
||||
lBytePosition = (lByteCount % 4) * 8;
|
||||
lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
|
||||
lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
|
||||
lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
|
||||
return lWordArray;
|
||||
};
|
||||
|
||||
var wordToHex = function(lValue) {
|
||||
var WordToHexValue = "",
|
||||
WordToHexValueTemp = "",
|
||||
lByte, lCount;
|
||||
for(lCount = 0; lCount <= 3; lCount++) {
|
||||
lByte = (lValue >>> (lCount * 8)) & 255;
|
||||
WordToHexValueTemp = "0" + lByte.toString(16);
|
||||
WordToHexValue = WordToHexValue + WordToHexValueTemp.substr(WordToHexValueTemp.length - 2, 2);
|
||||
}
|
||||
return WordToHexValue;
|
||||
};
|
||||
|
||||
var uTF8Encode = function(string) {
|
||||
string = string.replace(/\x0d\x0a/g, "\x0a");
|
||||
var output = "";
|
||||
for(var n = 0; n < string.length; n++) {
|
||||
var c = string.charCodeAt(n);
|
||||
if(c < 128) {
|
||||
output += String.fromCharCode(c);
|
||||
} else if((c > 127) && (c < 2048)) {
|
||||
output += String.fromCharCode((c >> 6) | 192);
|
||||
output += String.fromCharCode((c & 63) | 128);
|
||||
} else {
|
||||
output += String.fromCharCode((c >> 12) | 224);
|
||||
output += String.fromCharCode(((c >> 6) & 63) | 128);
|
||||
output += String.fromCharCode((c & 63) | 128);
|
||||
}
|
||||
}
|
||||
return output;
|
||||
};
|
||||
|
||||
function md5(string) {
|
||||
var x = Array();
|
||||
var k, AA, BB, CC, DD, a, b, c, d;
|
||||
var S11 = 7,
|
||||
S12 = 12,
|
||||
S13 = 17,
|
||||
S14 = 22;
|
||||
var S21 = 5,
|
||||
S22 = 9,
|
||||
S23 = 14,
|
||||
S24 = 20;
|
||||
var S31 = 4,
|
||||
S32 = 11,
|
||||
S33 = 16,
|
||||
S34 = 23;
|
||||
var S41 = 6,
|
||||
S42 = 10,
|
||||
S43 = 15,
|
||||
S44 = 21;
|
||||
string = uTF8Encode(string);
|
||||
x = convertToWordArray(string);
|
||||
a = 0x67452301;
|
||||
b = 0xEFCDAB89;
|
||||
c = 0x98BADCFE;
|
||||
d = 0x10325476;
|
||||
for(k = 0; k < x.length; k += 16) {
|
||||
AA = a;
|
||||
BB = b;
|
||||
CC = c;
|
||||
DD = d;
|
||||
a = FF(a, b, c, d, x[k + 0], S11, 0xD76AA478);
|
||||
d = FF(d, a, b, c, x[k + 1], S12, 0xE8C7B756);
|
||||
c = FF(c, d, a, b, x[k + 2], S13, 0x242070DB);
|
||||
b = FF(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE);
|
||||
a = FF(a, b, c, d, x[k + 4], S11, 0xF57C0FAF);
|
||||
d = FF(d, a, b, c, x[k + 5], S12, 0x4787C62A);
|
||||
c = FF(c, d, a, b, x[k + 6], S13, 0xA8304613);
|
||||
b = FF(b, c, d, a, x[k + 7], S14, 0xFD469501);
|
||||
a = FF(a, b, c, d, x[k + 8], S11, 0x698098D8);
|
||||
d = FF(d, a, b, c, x[k + 9], S12, 0x8B44F7AF);
|
||||
c = FF(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1);
|
||||
b = FF(b, c, d, a, x[k + 11], S14, 0x895CD7BE);
|
||||
a = FF(a, b, c, d, x[k + 12], S11, 0x6B901122);
|
||||
d = FF(d, a, b, c, x[k + 13], S12, 0xFD987193);
|
||||
c = FF(c, d, a, b, x[k + 14], S13, 0xA679438E);
|
||||
b = FF(b, c, d, a, x[k + 15], S14, 0x49B40821);
|
||||
a = GG(a, b, c, d, x[k + 1], S21, 0xF61E2562);
|
||||
d = GG(d, a, b, c, x[k + 6], S22, 0xC040B340);
|
||||
c = GG(c, d, a, b, x[k + 11], S23, 0x265E5A51);
|
||||
b = GG(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA);
|
||||
a = GG(a, b, c, d, x[k + 5], S21, 0xD62F105D);
|
||||
d = GG(d, a, b, c, x[k + 10], S22, 0x2441453);
|
||||
c = GG(c, d, a, b, x[k + 15], S23, 0xD8A1E681);
|
||||
b = GG(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8);
|
||||
a = GG(a, b, c, d, x[k + 9], S21, 0x21E1CDE6);
|
||||
d = GG(d, a, b, c, x[k + 14], S22, 0xC33707D6);
|
||||
c = GG(c, d, a, b, x[k + 3], S23, 0xF4D50D87);
|
||||
b = GG(b, c, d, a, x[k + 8], S24, 0x455A14ED);
|
||||
a = GG(a, b, c, d, x[k + 13], S21, 0xA9E3E905);
|
||||
d = GG(d, a, b, c, x[k + 2], S22, 0xFCEFA3F8);
|
||||
c = GG(c, d, a, b, x[k + 7], S23, 0x676F02D9);
|
||||
b = GG(b, c, d, a, x[k + 12], S24, 0x8D2A4C8A);
|
||||
a = HH(a, b, c, d, x[k + 5], S31, 0xFFFA3942);
|
||||
d = HH(d, a, b, c, x[k + 8], S32, 0x8771F681);
|
||||
c = HH(c, d, a, b, x[k + 11], S33, 0x6D9D6122);
|
||||
b = HH(b, c, d, a, x[k + 14], S34, 0xFDE5380C);
|
||||
a = HH(a, b, c, d, x[k + 1], S31, 0xA4BEEA44);
|
||||
d = HH(d, a, b, c, x[k + 4], S32, 0x4BDECFA9);
|
||||
c = HH(c, d, a, b, x[k + 7], S33, 0xF6BB4B60);
|
||||
b = HH(b, c, d, a, x[k + 10], S34, 0xBEBFBC70);
|
||||
a = HH(a, b, c, d, x[k + 13], S31, 0x289B7EC6);
|
||||
d = HH(d, a, b, c, x[k + 0], S32, 0xEAA127FA);
|
||||
c = HH(c, d, a, b, x[k + 3], S33, 0xD4EF3085);
|
||||
b = HH(b, c, d, a, x[k + 6], S34, 0x4881D05);
|
||||
a = HH(a, b, c, d, x[k + 9], S31, 0xD9D4D039);
|
||||
d = HH(d, a, b, c, x[k + 12], S32, 0xE6DB99E5);
|
||||
c = HH(c, d, a, b, x[k + 15], S33, 0x1FA27CF8);
|
||||
b = HH(b, c, d, a, x[k + 2], S34, 0xC4AC5665);
|
||||
a = II(a, b, c, d, x[k + 0], S41, 0xF4292244);
|
||||
d = II(d, a, b, c, x[k + 7], S42, 0x432AFF97);
|
||||
c = II(c, d, a, b, x[k + 14], S43, 0xAB9423A7);
|
||||
b = II(b, c, d, a, x[k + 5], S44, 0xFC93A039);
|
||||
a = II(a, b, c, d, x[k + 12], S41, 0x655B59C3);
|
||||
d = II(d, a, b, c, x[k + 3], S42, 0x8F0CCC92);
|
||||
c = II(c, d, a, b, x[k + 10], S43, 0xFFEFF47D);
|
||||
b = II(b, c, d, a, x[k + 1], S44, 0x85845DD1);
|
||||
a = II(a, b, c, d, x[k + 8], S41, 0x6FA87E4F);
|
||||
d = II(d, a, b, c, x[k + 15], S42, 0xFE2CE6E0);
|
||||
c = II(c, d, a, b, x[k + 6], S43, 0xA3014314);
|
||||
b = II(b, c, d, a, x[k + 13], S44, 0x4E0811A1);
|
||||
a = II(a, b, c, d, x[k + 4], S41, 0xF7537E82);
|
||||
d = II(d, a, b, c, x[k + 11], S42, 0xBD3AF235);
|
||||
c = II(c, d, a, b, x[k + 2], S43, 0x2AD7D2BB);
|
||||
b = II(b, c, d, a, x[k + 9], S44, 0xEB86D391);
|
||||
a = addUnsigned(a, AA);
|
||||
b = addUnsigned(b, BB);
|
||||
c = addUnsigned(c, CC);
|
||||
d = addUnsigned(d, DD);
|
||||
}
|
||||
var tempValue = wordToHex(a) + wordToHex(b) + wordToHex(c) + wordToHex(d);
|
||||
return tempValue.toUpperCase();
|
||||
}
|
||||
|
||||
|
||||
export {md5}
|
||||
|
|
@ -103,23 +103,52 @@
|
|||
</div>
|
||||
|
||||
<!-- 周边人员 -->
|
||||
<div class="personnel-container" v-drag v-if="personVisible && finishLoadMap">
|
||||
<!-- <div class="personnel-container" v-drag v-if="personVisible && finishLoadMap">
|
||||
<personnel :fireData="currentInfo" @close="personVisible = false" @videoCall="videoCall">
|
||||
</personnel>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 周边物资 -->
|
||||
<div class="goods-container" v-if="goodsVisible" v-drag>
|
||||
<!-- <div class="goods-container" v-if="goodsVisible" v-drag>
|
||||
<goodsbox :endLngLat="endLngLat" :firePopup='firePopupClosed' :visible='goodsVisible' @close="goodsVisible = false">
|
||||
</goodsbox>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 周边水源 -->
|
||||
<div class="water-container" v-if="waterVisible" v-drag>
|
||||
<!-- <div class="water-container" v-if="waterVisible" v-drag>
|
||||
<waterbox
|
||||
:waterCenter="waterCenter"
|
||||
:firePopup = "firePopupClosed"
|
||||
:visible='waterVisible'
|
||||
@close="waterVisible = false"
|
||||
></waterbox>
|
||||
</div> -->
|
||||
|
||||
<div class="water-container" v-if="findsourceShow" v-drag>
|
||||
<div class="box-name flex">
|
||||
<div v-for="(item,index) in aroundArr" :key="index" class="box-name-li" :class="aroundIndex == index ? 'active':''">
|
||||
<div @click="aroundClick(index)">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close-button" @click="aroundClose">
|
||||
<i class="el-icon el-icon-close"></i>
|
||||
</div>
|
||||
<div style="height:calc(100% - 55px)">
|
||||
<div style="height:100%" v-show="aroundIndex==0">
|
||||
<personnel :fireData="currentInfo" @videoCall="videoCall" :visible='personVisible'></personnel>
|
||||
</div>
|
||||
<div style="height:100%" v-show="aroundIndex==1">
|
||||
<waterbox :waterCenter="waterCenter" :firePopup = "firePopupClosed" :gridMap="aroundGridVisible" :visible='waterVisible'></waterbox>
|
||||
</div>
|
||||
<div style="height:100%" v-show="aroundIndex==2">
|
||||
<goodsbox :endLngLat="endLngLat" :firePopup='firePopupClosed' :gridMap="aroundGridVisible" :visible='goodsVisible'></goodsbox>
|
||||
</div>
|
||||
<div style="height:100%" v-show="aroundIndex==3">
|
||||
<barrackbox :endLngLat="endLngLat" :firePopup='firePopupClosed' :gridMap="aroundGridVisible" :visible='barrackVisible'></barrackbox>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -248,12 +277,12 @@
|
|||
</div>
|
||||
|
||||
<!-- 查找周边条件筛选弹窗 -->
|
||||
<div class="find-source" v-drag v-if="findsourceShow">
|
||||
<!-- <div class="find-source" v-drag v-if="findsourceShow">
|
||||
<div class="close-button" @click="findsourceShow=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>
|
||||
<findsource @setFilterOptions="setFilterOptions"></findsource>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 查找周边结果弹窗 -->
|
||||
<div class="find-source-item" v-drag v-if="findsourceitemShow">
|
||||
|
|
@ -321,6 +350,7 @@ import waterbox from "./widget/waterbox.vue";
|
|||
import reportlist from "./widget/reportlist.vue";
|
||||
import monitorwarning from "./widget/monitorwarning.vue";
|
||||
import goodsbox from "./widget/goodsbox.vue";
|
||||
import barrackbox from "./widget/barrackbox.vue";
|
||||
|
||||
import taskbox from "./widget/taskbox.vue";
|
||||
// import gridbox from './widget/gridbox.vue';
|
||||
|
|
@ -367,6 +397,7 @@ export default {
|
|||
waterbox,
|
||||
// reportbox,
|
||||
goodsbox,
|
||||
barrackbox,
|
||||
reportlist,
|
||||
monitorwarning,
|
||||
taskbox,
|
||||
|
|
@ -387,7 +418,7 @@ export default {
|
|||
monitor,
|
||||
editorbox,
|
||||
earlyWarningBox,
|
||||
findsource,
|
||||
// findsource,
|
||||
findsourceitem
|
||||
},
|
||||
|
||||
|
|
@ -417,6 +448,8 @@ export default {
|
|||
active: 1,
|
||||
personVisible: false,
|
||||
goodsVisible: false,
|
||||
barrackVisible: false,
|
||||
aroundGridVisible: 0,
|
||||
waterVisible: false,
|
||||
currentInfo: {},
|
||||
LCmonitorboxShow: false,
|
||||
|
|
@ -462,7 +495,8 @@ export default {
|
|||
allMonitorShow:false,
|
||||
showMulHKMonitorShow:false,
|
||||
hkMulDeviceIds:null,
|
||||
|
||||
aroundArr:["人员","水源","物资","营房"],
|
||||
aroundIndex: 0
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -518,7 +552,7 @@ export default {
|
|||
waterVisible: {
|
||||
handler(newVal, oldVal) {
|
||||
if (!newVal) {
|
||||
clearRouterFunc()
|
||||
// clearRouterFunc()
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
|
|
@ -526,13 +560,39 @@ export default {
|
|||
goodsVisible:{
|
||||
handler(newVal, oldVal) {
|
||||
if (!newVal) {
|
||||
clearRouterFunc()
|
||||
// clearRouterFunc()
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
aroundClick(index){
|
||||
this.personVisible = true
|
||||
this.waterVisible = true
|
||||
this.goodsVisible = true
|
||||
this.barrackVisible = true
|
||||
if(index == 0){
|
||||
this.aroundGridVisible = 0
|
||||
}else{
|
||||
this.aroundGridVisible++
|
||||
}
|
||||
setTimeout(()=>{
|
||||
this.aroundIndex = index
|
||||
},500)
|
||||
},
|
||||
aroundClose(){
|
||||
this.personVisible = false
|
||||
this.waterVisible = false
|
||||
this.goodsVisible = false
|
||||
this.barrackVisible = false
|
||||
this.aroundGridVisible = 0
|
||||
clearRouterFunc()
|
||||
|
||||
setTimeout(()=>{
|
||||
this.findsourceShow = false
|
||||
},100)
|
||||
},
|
||||
previewHkMonitor(val){
|
||||
this.hkMulDeviceIds = val;
|
||||
this.showMulHKMonitorShow = true;
|
||||
|
|
@ -1067,46 +1127,53 @@ export default {
|
|||
lng: mpt._lng,
|
||||
lat: mpt._lat,
|
||||
};
|
||||
this.aroundIndex = 0
|
||||
this.personVisible = true
|
||||
this.waterVisible = true
|
||||
this.goodsVisible = true
|
||||
this.barrackVisible = true
|
||||
this.endLngLat = [mpt._lng, mpt._lat];
|
||||
this.waterCenter = [mpt._lng, mpt._lat];
|
||||
this.findsourceShow = true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text: "人员",
|
||||
callback: (e) => {
|
||||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
|
||||
console.log("aaa", mpt);
|
||||
this.currentInfo = {
|
||||
lng: mpt._lng,
|
||||
lat: mpt._lat,
|
||||
};
|
||||
this.personVisible = true;
|
||||
this.goodsVisible = false;
|
||||
this.waterVisible = false;
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "物资",
|
||||
callback: (e) => {
|
||||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
|
||||
this.endLngLat = [mpt._lng, mpt._lat];
|
||||
this.goodsVisible = true;
|
||||
this.waterVisible = false;
|
||||
this.personVisible = false;
|
||||
// children: [
|
||||
// {
|
||||
// text: "人员",
|
||||
// callback: (e) => {
|
||||
// const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
|
||||
// console.log("aaa", mpt);
|
||||
// this.currentInfo = {
|
||||
// lng: mpt._lng,
|
||||
// lat: mpt._lat,
|
||||
// };
|
||||
// this.personVisible = true;
|
||||
// this.goodsVisible = false;
|
||||
// this.waterVisible = false;
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// text: "物资",
|
||||
// callback: (e) => {
|
||||
// const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
|
||||
// this.endLngLat = [mpt._lng, mpt._lat];
|
||||
// this.goodsVisible = true;
|
||||
// this.waterVisible = false;
|
||||
// this.personVisible = false;
|
||||
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "水源",
|
||||
callback: (e) => {
|
||||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
|
||||
this.waterCenter = [mpt._lng, mpt._lat];
|
||||
this.waterVisible = true;
|
||||
this.goodsVisible = false;
|
||||
this.personVisible = false;
|
||||
clearRouterFunc()
|
||||
},
|
||||
},
|
||||
],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// text: "水源",
|
||||
// callback: (e) => {
|
||||
// const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
|
||||
// this.waterCenter = [mpt._lng, mpt._lat];
|
||||
// this.waterVisible = true;
|
||||
// this.goodsVisible = false;
|
||||
// this.personVisible = false;
|
||||
// clearRouterFunc()
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
},
|
||||
{
|
||||
text: "添加标注",
|
||||
|
|
@ -2119,4 +2186,21 @@ export default {
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.box-name {
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.box-name-li{
|
||||
padding: 0 15px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
}
|
||||
.box-name-li.active{
|
||||
background: linear-gradient(180deg, rgba(1,216,215,0) 0%, #01D7D6 99%, #FF6A3A 100%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -202,10 +202,10 @@ export const drawRouterFunc = (pathObject) => {
|
|||
pathGraphicLayers = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(pathGraphicLayers);
|
||||
} else {
|
||||
pathGraphicLayers.clear();
|
||||
// pathGraphicLayers.clear();
|
||||
}
|
||||
//当只有两组数据时，说明没有导航的路线，直接使用虚线连接
|
||||
console.log('allCoordinates.length::: ', allCoordinates.length);
|
||||
|
||||
if (allCoordinates.length == 2) {
|
||||
//只绘制开头到结尾的路线的路段
|
||||
let endPathGraphic = drawPolylineDashEntity([startLngLat, endLngLat], 'YELLOW')
|
||||
|
|
@ -241,7 +241,7 @@ export const drawRoutersFunc = (pathObject) => {
|
|||
|
||||
}
|
||||
//当只有两组数据时，说明没有导航的路线，直接使用虚线连接
|
||||
console.log('allCoordinates.length::: ', allCoordinates.length);
|
||||
|
||||
if (allCoordinates.length == 2) {
|
||||
//只绘制开头到结尾的路线的路段
|
||||
// let endPathGraphic = drawPolylineDashEntity([startLngLat, endLngLat], 'YELLOW')
|
||||
|
|
@ -268,6 +268,80 @@ export const drawRoutersFunc = (pathObject) => {
|
|||
}
|
||||
}
|
||||
|
||||
export const drawRoutersFuncWaterGrid = (pathObject) => {
|
||||
let { pointArr } = pathObject
|
||||
// 添加graphic
|
||||
if (pathGraphicLayers == null) {
|
||||
pathGraphicLayers = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(pathGraphicLayers);
|
||||
} else {
|
||||
|
||||
}
|
||||
//当只有两组数据时，说明没有导航的路线，直接使用虚线连接
|
||||
|
||||
if (pointArr.length == 2) {
|
||||
|
||||
} else {
|
||||
// 导航数据路段
|
||||
let pathGraphic
|
||||
pathGraphic = drawLineFlowEntityColor2(pointArr, '#21FD04')
|
||||
|
||||
pathGraphicLayers.addGraphic(pathGraphic);
|
||||
|
||||
}
|
||||
}
|
||||
export const drawRoutersFuncGrid = (pathObject) => {
|
||||
let { pointArr, Type } = pathObject
|
||||
// 添加graphic
|
||||
if (pathGraphicLayers == null) {
|
||||
pathGraphicLayers = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(pathGraphicLayers);
|
||||
} else {
|
||||
|
||||
}
|
||||
//当只有两组数据时，说明没有导航的路线，直接使用虚线连接
|
||||
|
||||
if (pointArr.length == 2) {
|
||||
|
||||
} else {
|
||||
// 导航数据路段
|
||||
|
||||
let pathGraphic
|
||||
if(Type == 1){
|
||||
pathGraphic = drawLineFlowEntityColor1(pointArr, '#f76403')
|
||||
|
||||
// const graphic = new mars3d.graphic.ModelEntity({
|
||||
// viewFrom: new Cesium.Cartesian3(pointArr[0][0], pointArr[0][1], 200),
|
||||
// style: {
|
||||
// url: "/img/center.png",
|
||||
// scale: 1,
|
||||
// minimumPixelSize: 50,
|
||||
|
||||
// // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
|
||||
// highlight: {
|
||||
// type: mars3d.EventType.click,
|
||||
// silhouette: true,
|
||||
// silhouetteColor: "#ff0000",
|
||||
// silhouetteSize: 4
|
||||
// },
|
||||
// },
|
||||
// // forwardExtrapolationType: Cesium.ExtrapolationType.NONE,
|
||||
|
||||
// })
|
||||
// pathGraphicLayers.addGraphic(graphic)
|
||||
|
||||
}else if(Type == 2){
|
||||
pathGraphic = drawLineFlowEntityColor2(pointArr, '#0434FD')
|
||||
}else{
|
||||
pathGraphic = drawLineFlowEntityColor2(pointArr, '#04FDDD')
|
||||
}
|
||||
|
||||
pathGraphicLayers.addGraphic(pathGraphic);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 高亮路线
|
||||
export const drawOneRouterFunc = (pathObject) => {
|
||||
let { allCoordinates, startLngLat, endLngLat, startRouterLngLat, endRouterLngLat, gdRoute, postGisRoute } = pathObject
|
||||
|
|
@ -367,6 +441,37 @@ const drawLineFlowEntityColor = (positions, cesiumColor,width=5) => {
|
|||
},
|
||||
});
|
||||
}
|
||||
const drawLineFlowEntityColor1 = (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,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const drawLineFlowEntityColor2 = (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,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -417,7 +522,7 @@ const getMinimumRoute = (pathObject) => {
|
|||
}
|
||||
// 阈值计算重复路线，去除重复线路
|
||||
let overlapping = turf.lineOverlap(gdRouteLine, postGisRouteLine, { tolerance: 0.1 });
|
||||
// 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)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,577 @@
|
|||
<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 flex column">
|
||||
<div class="flex-1 flex ai-c" v-if="gridIsShow">
|
||||
<el-input type="text" size="mini" style="width: 300px; margin-right: 12px; margin-left: 60px"
|
||||
v-model="listQuery.wuzi"></el-input>
|
||||
<el-button type="primary" size="mini" icon="el-icon-search" @click="getWuziList">查询</el-button>
|
||||
</div>
|
||||
<div class="flex flex-1 ai-c">
|
||||
<span style="width: 80px; text-align: right; color: #fff">距离：</span>
|
||||
<div class="flex ai-c">
|
||||
<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">5km内</el-radio>
|
||||
<el-radio :label="3" class="mr-1">10km内</el-radio>
|
||||
<el-radio :label="4" class="mr-1">20km内</el-radio>
|
||||
<el-radio :label="5">全部</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="table-body">
|
||||
<div class="item" v-for="(item, index) in goodsListData" :key="index">
|
||||
<div class="flex column">
|
||||
<div class="flex jc-sb">
|
||||
<div>
|
||||
<span style="color: #35cf8c" class="fz-16 mr-2">{{
|
||||
item.street
|
||||
}}</span>
|
||||
<span class="fz-14 mr-2" style="font-weight: bold">{{
|
||||
item.name
|
||||
}}</span>
|
||||
<span class="mr-2">{{ item.distance }}km</span>
|
||||
<span style="color: #cee800">预计到达时间：{{ item.time }}分钟</span>
|
||||
</div>
|
||||
<el-button type="primary" size="mini" icon="el-icon-position" @click="flyToPosition(item)">
|
||||
定位
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { parse } from "../lib/handleGeojson";
|
||||
import * as turf from "@turf/turf";
|
||||
import { getMethodCommon } from "../../../api/common";
|
||||
import { getRouterFunc, drawRouterFunc, clearRouterFunc, drawRoutersFuncGrid,drawRoutersFuncWaterGrid } from '../lib/routePath'
|
||||
const areaName = localStorage.getItem("areaName");
|
||||
export default {
|
||||
name: "monitorbox",
|
||||
props: ["endLngLat", "firePopup", "visible","gridMap"],
|
||||
data() {
|
||||
return {
|
||||
startLngLat: null,
|
||||
list: [],
|
||||
listQuery: {
|
||||
wuzi: null,
|
||||
areaname: areaName,
|
||||
},
|
||||
goodsListData: null,
|
||||
echartsLayer: null,
|
||||
pathPointGraphicLayer: null,
|
||||
goodsGraphicLayer: null,
|
||||
goodsGraphicLayerArr: [],
|
||||
distanceradio: 4,
|
||||
allData: [],
|
||||
gridIsShow: true
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
endLngLat: function (e) {
|
||||
this.getWuziList();
|
||||
},
|
||||
firePopup: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal == true) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
},
|
||||
visible: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log('newVal: ', newVal);
|
||||
if (newVal == false) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getWuziList();
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.goodsGraphicLayerArr.forEach((item) => {
|
||||
this.goodsGraphicLayer.removeGraphic(item);
|
||||
});
|
||||
clearRouterFunc()
|
||||
this.$emit("close");
|
||||
},
|
||||
radioChange(e) {
|
||||
let arr = this.nestWuziPoints;
|
||||
let newArr = [];
|
||||
if (this.distanceradio == 1) {
|
||||
arr.forEach((item) => {
|
||||
if (item.distance < 1) {
|
||||
newArr.push(item);
|
||||
}
|
||||
});
|
||||
this.goodsListData = newArr;
|
||||
}
|
||||
if (this.distanceradio == 2) {
|
||||
arr.forEach((item) => {
|
||||
if (item.distance < 5) {
|
||||
newArr.push(item);
|
||||
}
|
||||
});
|
||||
this.goodsListData = newArr;
|
||||
}
|
||||
if (this.distanceradio == 3) {
|
||||
arr.forEach((item) => {
|
||||
if (item.distance < 10) {
|
||||
newArr.push(item);
|
||||
}
|
||||
});
|
||||
this.goodsListData = newArr;
|
||||
}
|
||||
if (this.distanceradio == 4) {
|
||||
arr.forEach((item) => {
|
||||
if (item.distance < 20) {
|
||||
newArr.push(item);
|
||||
}
|
||||
});
|
||||
this.goodsListData = newArr;
|
||||
}
|
||||
if (this.distanceradio == 5) {
|
||||
this.goodsListData = arr;
|
||||
}
|
||||
this.goodsListData.sort((a, b) => {
|
||||
return a.distance - b.distance;
|
||||
});
|
||||
this.addGoodsLayer();
|
||||
},
|
||||
getWuziList() {
|
||||
let params = {
|
||||
lng: this.endLngLat[0],
|
||||
lat: this.endLngLat[1]
|
||||
}
|
||||
getMethodCommon("/FireGrideResource/GetGridInfoByLngLat",params).then( value=>{
|
||||
console.log('1122',value.result)
|
||||
let rel = value.result
|
||||
if(rel == null){
|
||||
this.goodsListData = []
|
||||
// getMethodCommon("/FirePrevention/Loadwuzichubei", this.listQuery).then(
|
||||
// (res) => {
|
||||
// if (!res.data.length) {
|
||||
// this.goodsGraphicLayerArr.forEach((item) => {
|
||||
// this.goodsGraphicLayer.removeGraphic(item);
|
||||
// });
|
||||
// if (this.pathPointGraphicLayer) {
|
||||
// this.pathPointGraphicLayer.clear();
|
||||
// }
|
||||
// } else {
|
||||
// this.goodsListData = res.data;
|
||||
// this.getNestPoint(this.endLngLat[0], this.endLngLat[1]).then(
|
||||
// (wz) => {
|
||||
// this.nestWuziPoints = wz;
|
||||
// this.radioChange();
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
}else{
|
||||
this.gridIsShow = false
|
||||
getMethodCommon("/FireGrideResource/GetWg_Barrack",{id:rel.Id}).then( res=>{
|
||||
console.log('11224',res)
|
||||
let reldata = res.result
|
||||
let arr = []
|
||||
reldata.forEach(item =>{
|
||||
arr.push({
|
||||
name: item.Name,
|
||||
geom: item.geom
|
||||
})
|
||||
})
|
||||
let separators = ["(", " ", ")"]
|
||||
arr.forEach(item =>{
|
||||
let coord = item.geom.split( (new RegExp("[" + separators.join('') + "]")) )
|
||||
item.coordinates = [ coord[1] , coord[2] ]
|
||||
})
|
||||
this.goodsListData = arr;
|
||||
this.getNestPoint(this.endLngLat[0], this.endLngLat[1]).then(
|
||||
(wz) => {
|
||||
this.nestWuziPoints = wz;
|
||||
this.radioChange();
|
||||
}
|
||||
);
|
||||
if(this.gridMap == 1){
|
||||
this.getGridRoute(rel.Id);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
getGridRoute(Id){
|
||||
clearRouterFunc()
|
||||
getMethodCommon("/FireGrideResource/GetWgRoad",{id:Id}).then( res=>{
|
||||
let rel = res.result
|
||||
let separators = ["((", ",", "))"]
|
||||
rel.forEach(item =>{
|
||||
item.pointArr = []
|
||||
let coord = item.geom.split( (new RegExp("[" + separators.join('') + "]")) )
|
||||
coord.forEach((val,index) =>{
|
||||
if(index > 1 && index < (coord.length - 2) ){
|
||||
item.pointArr.push([
|
||||
val.split(' ')[0],val.split(' ')[1]
|
||||
])
|
||||
}
|
||||
})
|
||||
})
|
||||
rel.forEach(item =>{
|
||||
drawRoutersFuncGrid(item)
|
||||
})
|
||||
})
|
||||
getMethodCommon("/FireGrideResource/GetWgWaterNetwork",{id:Id}).then( res=>{
|
||||
let rel = res.result
|
||||
let separators = ["((", ",", "))"]
|
||||
rel.forEach(item =>{
|
||||
item.pointArr = []
|
||||
let coord = item.geom.split( (new RegExp("[" + separators.join('') + "]")) )
|
||||
coord.forEach((val,index) =>{
|
||||
if(index > 1 && index < (coord.length - 2) ){
|
||||
item.pointArr.push([
|
||||
val.split(' ')[0],val.split(' ')[1]
|
||||
])
|
||||
}
|
||||
})
|
||||
})
|
||||
rel.forEach(item =>{
|
||||
drawRoutersFuncWaterGrid(item)
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
//火情附近所有点
|
||||
async getNestPoint(lng, lat) {
|
||||
let from = turf.point([lng, lat]);
|
||||
let nestWuziPoints = [];
|
||||
await this.goodsListData.forEach((item, index) => {
|
||||
let to = turf.point(item.coordinates);
|
||||
let options = { units: "kilometers" };
|
||||
let distance = turf.distance(from, to, options);
|
||||
let obj = {
|
||||
lngLat: item.coordinates,
|
||||
distance: distance.toFixed(2),
|
||||
time: this.getAroundTime(distance.toFixed(2) * 60 + 5 * 60),
|
||||
name: item.name,
|
||||
};
|
||||
nestWuziPoints.push(obj);
|
||||
});
|
||||
nestWuziPoints.sort((a, b) => {
|
||||
return a.distance - b.distance;
|
||||
});
|
||||
return nestWuziPoints;
|
||||
},
|
||||
//估算时间 平均60km/h
|
||||
getAroundTime(a) {
|
||||
var h = parseInt(a / 3600);
|
||||
var m = parseInt((a % 3600) / 60);
|
||||
var s = parseInt((a % 3600) % 60);
|
||||
if (h > 0) {
|
||||
return h + "小时" + m + "分" + s + "秒";
|
||||
} else {
|
||||
return m + "分" + s + "秒";
|
||||
}
|
||||
},
|
||||
flyToPosition(item) {
|
||||
this.startLngLat = item.lngLat;
|
||||
// this.getRoutePath();
|
||||
window.globalmap.flyToPoint(item.lngLat, { radius: 4000, pitch: -90 });
|
||||
},
|
||||
getRoutePath() {
|
||||
// 获取路线数据
|
||||
let startCoor = this.startLngLat;
|
||||
let endCoor = this.endLngLat;
|
||||
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()
|
||||
})
|
||||
},
|
||||
addGoodsLayer() {
|
||||
if (this.goodsGraphicLayer == null) {
|
||||
this.goodsGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(this.goodsGraphicLayer);
|
||||
}
|
||||
|
||||
this.goodsGraphicLayerArr.forEach((graphic) => {
|
||||
this.goodsGraphicLayer.removeGraphic(graphic);
|
||||
});
|
||||
this.goodsGraphicLayerArr = [];
|
||||
this.goodsListData.forEach((item, index) => {
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [item.lngLat[0], item.lngLat[1]],
|
||||
style: {
|
||||
image: "img/liaowangtai.png",
|
||||
scale: 0.7,
|
||||
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,
|
||||
label: {
|
||||
text: item.name+"("+item.distance+")km",
|
||||
font_size: 12,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: -78,
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,
|
||||
popupOptions: {
|
||||
offsetY: -60,
|
||||
offsetX:20,
|
||||
template: "{content}",
|
||||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||
},
|
||||
pointerEvents: true,
|
||||
});
|
||||
// let graphic = new mars3d.graphic.BillboardEntity({
|
||||
// position: [item.lngLat[0], item.lngLat[1]],
|
||||
// style: {
|
||||
// image: "img/liaowangtai.png",
|
||||
// scale: 0.7,
|
||||
// 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,
|
||||
// },
|
||||
// pointerEvents: false,
|
||||
// });
|
||||
this.goodsGraphicLayerArr.push(graphic);
|
||||
this.goodsGraphicLayer.addGraphic(graphic);
|
||||
});
|
||||
window.globalmap.addLayer(this.goodsGraphicLayer);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
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: 80px;
|
||||
color: #00fff0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.box-container {
|
||||
width: calc(100% - 0px);
|
||||
padding: 0px 12px;
|
||||
height: calc(100% - 120px);
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
background: #00ffee2f;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n) {
|
||||
background: #00ffee50;
|
||||
}
|
||||
|
||||
/* .table-body .item div{
|
||||
float:left;
|
||||
width:33%;
|
||||
height:36px;
|
||||
color:#eee;
|
||||
overflow: hidden;
|
||||
} */
|
||||
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #0abfb5cc;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 406px;
|
||||
height: 1px;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(90deg,
|
||||
rgba(0, 212, 134, 1),
|
||||
rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
::-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, 0.1),
|
||||
inset -1px -1px 0 rgba(0, 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, 0.25);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
margin-right: 10px;
|
||||
color: #fff;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
margin-top: 0 !important;
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: none;
|
||||
color: #fff;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: none;
|
||||
color: #fff;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
border-radius: 0px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
*/
|
||||
</style>
|
||||
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-name">物资</div>
|
||||
<!-- <div class="box-name">物资</div>
|
||||
<div class="close-button" @click="close">
|
||||
<i class="el-icon el-icon-close"></i>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="box-title flex column">
|
||||
<div class="flex-1 flex ai-c">
|
||||
<div class="flex-1 flex ai-c" v-if="gridIsShow">
|
||||
<el-input type="text" size="mini" style="width: 300px; margin-right: 12px; margin-left: 60px"
|
||||
v-model="listQuery.wuzi"></el-input>
|
||||
<el-button type="primary" size="mini" icon="el-icon-search" @click="getWuziList">查询</el-button>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<span style="color: #cee800">预计到达时间：{{ item.time }}分钟</span>
|
||||
</div>
|
||||
<el-button type="primary" size="mini" icon="el-icon-position" @click="flyToPosition(item)">
|
||||
路线
|
||||
定位
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="line" style="margin: 10px 0"></div>
|
||||
|
|
@ -55,11 +55,11 @@
|
|||
import { parse } from "../lib/handleGeojson";
|
||||
import * as turf from "@turf/turf";
|
||||
import { getMethodCommon } from "../../../api/common";
|
||||
import { getRouterFunc, drawRouterFunc, clearRouterFunc } from '../lib/routePath'
|
||||
import { getRouterFunc, drawRouterFunc, clearRouterFunc, drawRoutersFuncGrid,drawRoutersFuncWaterGrid } from '../lib/routePath'
|
||||
const areaName = localStorage.getItem("areaName");
|
||||
export default {
|
||||
name: "monitorbox",
|
||||
props: ["endLngLat", "firePopup", "visible"],
|
||||
props: ["endLngLat", "firePopup", "visible","gridMap"],
|
||||
data() {
|
||||
return {
|
||||
startLngLat: null,
|
||||
|
|
@ -73,8 +73,9 @@ export default {
|
|||
pathPointGraphicLayer: null,
|
||||
goodsGraphicLayer: null,
|
||||
goodsGraphicLayerArr: [],
|
||||
distanceradio: 1,
|
||||
distanceradio: 4,
|
||||
allData: [],
|
||||
gridIsShow: true
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -107,6 +108,7 @@ export default {
|
|||
});
|
||||
clearRouterFunc()
|
||||
this.$emit("close");
|
||||
|
||||
},
|
||||
radioChange(e) {
|
||||
let arr = this.nestWuziPoints;
|
||||
|
|
@ -152,38 +154,130 @@ export default {
|
|||
this.addGoodsLayer();
|
||||
},
|
||||
getWuziList() {
|
||||
getMethodCommon("/FirePrevention/Loadwuzichubei", this.listQuery).then(
|
||||
(res) => {
|
||||
if (!res.data.length) {
|
||||
this.goodsGraphicLayerArr.forEach((item) => {
|
||||
this.goodsGraphicLayer.removeGraphic(item);
|
||||
});
|
||||
if (this.pathPointGraphicLayer) {
|
||||
this.pathPointGraphicLayer.clear();
|
||||
let params = {
|
||||
lng: this.endLngLat[0],
|
||||
lat: this.endLngLat[1]
|
||||
}
|
||||
console.log('112233')
|
||||
getMethodCommon("/FireGrideResource/GetGridInfoByLngLat",params).then( value=>{
|
||||
console.log('1122',value.result)
|
||||
let rel = value.result
|
||||
if(rel == null){
|
||||
|
||||
getMethodCommon("/FirePrevention/Loadwuzichubei", this.listQuery).then(
|
||||
(res) => {
|
||||
if (!res.data.length) {
|
||||
this.goodsGraphicLayerArr.forEach((item) => {
|
||||
this.goodsGraphicLayer.removeGraphic(item);
|
||||
});
|
||||
if (this.pathPointGraphicLayer) {
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
} else {
|
||||
this.goodsListData = res.data;
|
||||
let separators = ["(", " ", ")"]
|
||||
this.goodsListData.forEach(item =>{
|
||||
let coord = item.geom.split( (new RegExp("[" + separators.join('') + "]")) )
|
||||
item.coordinates = [ coord[1] , coord[2] ]
|
||||
this.startLngLat = [ coord[1] , coord[2] ]
|
||||
this.getRoutePath()
|
||||
})
|
||||
|
||||
this.getNestPoint(this.endLngLat[0], this.endLngLat[1]).then(
|
||||
(wz) => {
|
||||
this.nestWuziPoints = wz;
|
||||
this.radioChange();
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.goodsListData = res.data;
|
||||
);
|
||||
}else{
|
||||
this.gridIsShow = false
|
||||
getMethodCommon("/FireGrideResource/GetMaterials",{id:rel.Id}).then( res=>{
|
||||
console.log('11224',res)
|
||||
let reldata = res.result
|
||||
let arr = []
|
||||
reldata.forEach(item =>{
|
||||
arr.push({
|
||||
id: item.Id,
|
||||
info: item.Info,
|
||||
name: item.Name,
|
||||
type: item.Type,
|
||||
geom: item.geom
|
||||
})
|
||||
})
|
||||
let separators = ["(", " ", ")"]
|
||||
arr.forEach(item =>{
|
||||
let coord = item.geom.split( (new RegExp("[" + separators.join('') + "]")) )
|
||||
item.coordinates = [ coord[1] , coord[2] ]
|
||||
})
|
||||
|
||||
this.goodsListData = arr;
|
||||
this.getNestPoint(this.endLngLat[0], this.endLngLat[1]).then(
|
||||
(wz) => {
|
||||
this.nestWuziPoints = wz;
|
||||
this.radioChange();
|
||||
}
|
||||
);
|
||||
}
|
||||
if(this.gridMap == 1){
|
||||
this.getGridRoute(rel.Id);
|
||||
}
|
||||
})
|
||||
}
|
||||
);
|
||||
})
|
||||
|
||||
},
|
||||
getGridRoute(Id){
|
||||
clearRouterFunc()
|
||||
getMethodCommon("/FireGrideResource/GetWgRoad",{id:Id}).then( res=>{
|
||||
let rel = res.result
|
||||
let separators = ["((", ",", "))"]
|
||||
rel.forEach(item =>{
|
||||
item.pointArr = []
|
||||
let coord = item.geom.split( (new RegExp("[" + separators.join('') + "]")) )
|
||||
coord.forEach((val,index) =>{
|
||||
if(index > 1 && index < (coord.length - 2) ){
|
||||
item.pointArr.push([
|
||||
val.split(' ')[0],val.split(' ')[1]
|
||||
])
|
||||
}
|
||||
})
|
||||
})
|
||||
rel.forEach(item =>{
|
||||
drawRoutersFuncGrid(item)
|
||||
})
|
||||
})
|
||||
getMethodCommon("/FireGrideResource/GetWgWaterNetwork",{id:Id}).then( res=>{
|
||||
let rel = res.result
|
||||
let separators = ["((", ",", "))"]
|
||||
rel.forEach(item =>{
|
||||
item.pointArr = []
|
||||
let coord = item.geom.split( (new RegExp("[" + separators.join('') + "]")) )
|
||||
coord.forEach((val,index) =>{
|
||||
if(index > 1 && index < (coord.length - 2) ){
|
||||
item.pointArr.push([
|
||||
val.split(' ')[0],val.split(' ')[1]
|
||||
])
|
||||
}
|
||||
})
|
||||
})
|
||||
rel.forEach(item =>{
|
||||
drawRoutersFuncWaterGrid(item)
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
//火情附近所有点
|
||||
async getNestPoint(lng, lat) {
|
||||
let from = turf.point([lng, lat]);
|
||||
let nestWuziPoints = [];
|
||||
await this.goodsListData.forEach((item, index) => {
|
||||
let geom = parse(item.geom);
|
||||
let to = turf.point(geom.coordinates);
|
||||
let to = turf.point(item.coordinates);
|
||||
let options = { units: "kilometers" };
|
||||
let distance = turf.distance(from, to, options);
|
||||
let obj = {
|
||||
lngLat: geom.coordinates,
|
||||
lngLat: item.coordinates,
|
||||
distance: distance.toFixed(2),
|
||||
time: this.getAroundTime(distance.toFixed(2) * 60 + 5 * 60),
|
||||
info: item.info,
|
||||
|
|
@ -207,13 +301,16 @@ export default {
|
|||
return m + "分" + s + "秒";
|
||||
}
|
||||
},
|
||||
|
||||
flyToPosition(item) {
|
||||
console.log('item11',item)
|
||||
this.startLngLat = item.lngLat;
|
||||
this.getRoutePath();
|
||||
// this.getRoutePath();
|
||||
window.globalmap.flyToPoint(item.lngLat, { radius: 4000, pitch: -90 });
|
||||
},
|
||||
getRoutePath() {
|
||||
// 获取路线数据
|
||||
console.log('startLngLat',this.startLngLat)
|
||||
let startCoor = this.startLngLat;
|
||||
let endCoor = this.endLngLat;
|
||||
let params = {
|
||||
|
|
@ -226,9 +323,11 @@ export default {
|
|||
getRouterFunc(params).then(res => {
|
||||
drawRouterFunc(res)
|
||||
}).catch(err => {
|
||||
console.log('startLngLat111')
|
||||
clearRouterFunc()
|
||||
})
|
||||
},
|
||||
|
||||
addGoodsLayer() {
|
||||
if (this.goodsGraphicLayer == null) {
|
||||
this.goodsGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
|
|
@ -253,13 +352,76 @@ export default {
|
|||
), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true,
|
||||
label: {
|
||||
text: item.name+"("+item.distance+")km",
|
||||
font_size: 12,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: -78,
|
||||
pixelOffsetX:20,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 6000,
|
||||
distanceDisplayCondition_near: 0,
|
||||
},
|
||||
},
|
||||
pointerEvents: false,
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,
|
||||
popupOptions: {
|
||||
offsetY: -60,
|
||||
offsetX:20,
|
||||
template: "{content}",
|
||||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||
},
|
||||
pointerEvents: true,
|
||||
});
|
||||
|
||||
// let graphic = new mars3d.graphic.BillboardEntity({
|
||||
// position: [item.lngLat[0], item.lngLat[1]],
|
||||
// style: {
|
||||
// image: "img/wuzichubei.png",
|
||||
// scale: 0.7,
|
||||
// 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,
|
||||
// },
|
||||
// pointerEvents: false,
|
||||
// });
|
||||
this.goodsGraphicLayerArr.push(graphic);
|
||||
this.goodsGraphicLayer.addGraphic(graphic);
|
||||
});
|
||||
window.globalmap.addLayer(this.goodsGraphicLayer);
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-name">人员</div>
|
||||
<!-- <div class="box-name">人员</div>
|
||||
<div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="box-title">
|
||||
<div class="flex" style="margin-top:15px;margin-bottom:5px;">
|
||||
<span class="titlebox">人员类型：</span>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="box-container" style="height:calc(100% - 115px)">
|
||||
<div class="table-body">
|
||||
<div class="table-li" v-for="(item, index) in listData" :key="index">
|
||||
<div class="flex jc-sb max-h">
|
||||
|
|
@ -79,7 +79,7 @@ import appConfig from '../../../../public/config/app.json'
|
|||
import axios from "axios";
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
props: ['fireData'],
|
||||
props: ['fireData',"visible"],
|
||||
data() {
|
||||
return {
|
||||
checkList: ['护林员', '消防员','网格员'],
|
||||
|
|
@ -97,6 +97,13 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
visible: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal == false) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
},
|
||||
fireData: {
|
||||
handler(newVal, oldVal) {
|
||||
this.fireLngLat = [newVal.lng, newVal.lat]
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-name">水源</div>
|
||||
<!-- <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> -->
|
||||
<!-- <div class="box-container"> -->
|
||||
<div style="height:calc(100% - 10px)">
|
||||
<div class="flex" style="margin: 10px 0">
|
||||
<span style="width: 80px; text-align: right; color: #fff">半径：</span>
|
||||
<div>
|
||||
|
|
@ -38,10 +39,12 @@
|
|||
import appConfig from "../../../../public/config/app.json";
|
||||
import * as turf from "@turf/turf";
|
||||
import axios from "axios";
|
||||
import { getRouterFunc, drawRouterFunc, drawOneRouterFunc,drawRoutersFunc,clearRouterFunc } from '../lib/routePath'
|
||||
import { getRouterFunc, drawRouterFunc, drawOneRouterFunc,drawRoutersFunc,clearRouterFunc,drawRoutersFuncGrid,drawRoutersFuncWaterGrid } from '../lib/routePath'
|
||||
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
export default {
|
||||
name: "monitorbox",
|
||||
props: ["waterCenter", "firePopup","visible"],
|
||||
props: ["waterCenter", "firePopup","visible","gridMap"],
|
||||
data() {
|
||||
return {
|
||||
startLngLat: null,
|
||||
|
|
@ -54,6 +57,7 @@ export default {
|
|||
pathPointGraphicLayer: null,
|
||||
allData: [],
|
||||
distanceradio:1,
|
||||
gridIsShow: true,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -64,6 +68,7 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
|
||||
waterCenter: {
|
||||
handler(newVal, oldVal) {
|
||||
this.getWaterList();
|
||||
|
|
@ -82,14 +87,13 @@ export default {
|
|||
},
|
||||
created() {
|
||||
this.getWaterList();
|
||||
|
||||
window.flyToPosition = this.flyToPosition
|
||||
// window.flyToPosition = this.flyToPosition
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
if(this.echartsLayer){
|
||||
this.echartsLayer.remove(true);
|
||||
}
|
||||
if(this.echartsLayer){
|
||||
this.echartsLayer.remove(true);
|
||||
}
|
||||
|
||||
this.waterGraphicLayerArr.forEach((item) => {
|
||||
this.waterGraphicLayer.removeGraphic(item);
|
||||
|
|
@ -139,7 +143,7 @@ export default {
|
|||
return a.distance - b.distance;
|
||||
});
|
||||
|
||||
console.log("nestWaterPoints",this.nestWaterPoints)
|
||||
|
||||
|
||||
if (this.waterGraphicLayer == null) {
|
||||
this.waterGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
|
|
@ -194,12 +198,6 @@ export default {
|
|||
<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="flyToPosition([${item.lngLat[0]}, ${item.lngLat[1]}],'one');" class="label-tag data-value-status-1" >导航</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -221,7 +219,6 @@ export default {
|
|||
this.waterGraphicLayer.addGraphic(graphic);
|
||||
});
|
||||
|
||||
clearRouterFunc();
|
||||
this.nestWaterPoints.forEach((item,index)=>{
|
||||
this.flyToPosition([item.lngLat[0], item.lngLat[1]],'all')
|
||||
})
|
||||
|
|
@ -230,11 +227,102 @@ export default {
|
|||
getWaterList() {
|
||||
axios({
|
||||
method: "get",
|
||||
url: appConfig[localStorage.getItem("areaName")].waterUrl,
|
||||
params: {
|
||||
lng: this.waterCenter[0],
|
||||
lat: this.waterCenter[1],
|
||||
},
|
||||
url: BASE_URL + "/FireGrideResource/GetGridInfoByLngLat",
|
||||
}).then((res) => {
|
||||
this.waterPoints = res.data;
|
||||
this.getNestPoint(this.waterCenter[0], this.waterCenter[1]);
|
||||
this.radioChange();
|
||||
let rel = res.data.result
|
||||
if(rel == null){
|
||||
axios({
|
||||
method: "get",
|
||||
url: appConfig[localStorage.getItem("areaName")].waterUrl,
|
||||
}).then((res) => {
|
||||
this.waterPoints = res.data;
|
||||
this.gridIsShow = true
|
||||
this.getNestPoint(this.waterCenter[0], this.waterCenter[1]);
|
||||
this.radioChange();
|
||||
});
|
||||
}else{
|
||||
axios({
|
||||
method: "get",
|
||||
params: {
|
||||
id: rel.Id
|
||||
},
|
||||
url: BASE_URL + "/FireGrideResource/GetWaterResource",
|
||||
}).then((res) => {
|
||||
this.gridIsShow = false
|
||||
this.waterPoints = res.data.result;
|
||||
let separators = ["(", " ", ")"]
|
||||
this.waterPoints.forEach(item =>{
|
||||
let coord = item.geom.split( (new RegExp("[" + separators.join('') + "]")) )
|
||||
item.coordinates = [ coord[1] , coord[2] ]
|
||||
})
|
||||
this.getNestPointGrid(this.waterCenter[0], this.waterCenter[1]);
|
||||
this.radioChange();
|
||||
this.getGridRoute(rel.Id);
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
getGridRoute(Id){
|
||||
clearRouterFunc()
|
||||
axios({
|
||||
method: "get",
|
||||
params: {
|
||||
id: Id
|
||||
},
|
||||
url: BASE_URL + "/FireGrideResource/GetWgRoad",
|
||||
}).then((res) => {
|
||||
let rel = res.data.result
|
||||
let separators = ["((", ",", "))"]
|
||||
rel.forEach(item =>{
|
||||
item.pointArr = []
|
||||
let coord = item.geom.split( (new RegExp("[" + separators.join('') + "]")) )
|
||||
coord.forEach((val,index) =>{
|
||||
if(index > 1 && index < (coord.length - 2) ){
|
||||
item.pointArr.push([
|
||||
val.split(' ')[0],val.split(' ')[1]
|
||||
])
|
||||
}
|
||||
})
|
||||
})
|
||||
rel.forEach((item,index) =>{
|
||||
if(index !== 35){
|
||||
drawRoutersFuncGrid(item)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
axios({
|
||||
method: "get",
|
||||
params: {
|
||||
id: Id
|
||||
},
|
||||
url: BASE_URL + "/FireGrideResource/GetWgWaterNetwork",
|
||||
}).then((res) => {
|
||||
let rel = res.data.result
|
||||
|
||||
let separators = ["((", ",", "))"]
|
||||
rel.forEach(item =>{
|
||||
item.pointArr = []
|
||||
let coord = item.geom.split( (new RegExp("[" + separators.join('') + "]")) )
|
||||
coord.forEach((val,index) =>{
|
||||
if(index > 1 && index < (coord.length - 2) ){
|
||||
item.pointArr.push([
|
||||
val.split(' ')[0],val.split(' ')[1]
|
||||
])
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
rel.forEach(item =>{
|
||||
drawRoutersFuncWaterGrid(item)
|
||||
})
|
||||
|
||||
});
|
||||
},
|
||||
//估算时间 平均60km/h
|
||||
|
|
@ -243,6 +331,27 @@ export default {
|
|||
var m = parseInt((a % 3600) / 60);
|
||||
var s = parseInt((a % 3600) % 60);
|
||||
return h + "小时" + m + "分" + s + "秒";
|
||||
},
|
||||
getNestPointGrid(lng, lat) {
|
||||
let from = turf.point([lng, lat]);
|
||||
this.nestWaterPoints = [];
|
||||
this.waterPoints.forEach((item, index) => {
|
||||
let to = turf.point(item.coordinates);
|
||||
let options = { units: "kilometers" };
|
||||
let distance = turf.distance(from, to, options);
|
||||
let obj = {
|
||||
lngLat: item.coordinates,
|
||||
distance: distance.toFixed(2),
|
||||
time: this.getAroundTime(distance.toFixed(2) * 60 + 5 * 60),
|
||||
};
|
||||
this.nestWaterPoints.push(obj);
|
||||
});
|
||||
this.nestWaterPoints.sort((a, b) => {
|
||||
return a.distance - b.distance;
|
||||
});
|
||||
this.allData = this.nestWaterPoints;
|
||||
|
||||
|
||||
},
|
||||
//火情附近所有点
|
||||
getNestPoint(lng, lat) {
|
||||
|
|
@ -264,25 +373,22 @@ export default {
|
|||
});
|
||||
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,type) {
|
||||
if(type=='all'){
|
||||
this.startLngLat = lngLat;
|
||||
this.getRoutePath(type);
|
||||
}else if(type == 'one'){
|
||||
this.startLngLat = lngLat;
|
||||
this.getRoutePath(type);
|
||||
}
|
||||
// if(type=='all'){
|
||||
// this.startLngLat = lngLat;
|
||||
// if(this.gridIsShow){
|
||||
// this.getRoutePath(type);
|
||||
// }else{
|
||||
|
||||
// window.globalmap.flyToPoint(lngLat, { radius: 4000, pitch: -90 });
|
||||
// }
|
||||
// }else if(type == 'one'){
|
||||
// this.startLngLat = lngLat;
|
||||
// this.getRoutePath(type);
|
||||
// }
|
||||
|
||||
window.globalmap.flyToPoint(lngLat, { radius: 4000, pitch: -90 });
|
||||
},
|
||||
getRoutePath(type) {
|
||||
// 获取路线数据
|
||||
|
|
@ -312,7 +418,6 @@ export default {
|
|||
|
||||
const pointArr = []
|
||||
const pathArr = [];
|
||||
console.log("nestWaterPoints",nestWaterPoints)
|
||||
for(let i=0;i<15;i++){
|
||||
pointArr.push({
|
||||
name: nestWaterPoints[i].distance+"km",
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {encode} from '../../utils/base64'
|
||||
import {md5} from '../../utils/md5'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import {
|
||||
mapGetters,
|
||||
|
|
@ -149,7 +149,7 @@ import {encode} from '../../utils/base64'
|
|||
if (valid) {
|
||||
this.loading = true
|
||||
let form = {...this.loginForm}
|
||||
form.password = encode(form.password);
|
||||
form.password = md5(form.password);
|
||||
this.$store.dispatch('Login', form).then(() => {
|
||||
this.loading = false
|
||||
this.$router.push({
|
||||
|
|
|
|||
Loading…
Reference in New Issue