xujingliang
/
Fei_Xian_Lin_Ye_Fang_Huo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

水网路网弹窗

feixian
zzq 2024-01-31 17:02:02 +08:00
parent a34d720286
commit fc896922a8
12 changed files with 650 additions and 376 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/wateractive.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
public/img/watercircle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
public/img/yingfang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
public/img/yingfangcircle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

240
src/views/home/index.vue
View File

@ -101,53 +101,64 @@
</div>
</div>
<!-- 周边人员 -->
<!-- <div class="personnel-container" v-drag v-if="personVisible && finishLoadMap">
<personnel :fireData="currentInfo" @close="personVisible = false" @videoCall="videoCall">
</personnel>
</div> -->
<!-- 周边物资 -->
<!-- <div class="goods-container" v-if="goodsVisible" v-drag>
<goodsbox :endLngLat="endLngLat" :firePopup='firePopupClosed' :visible='goodsVisible' @close="goodsVisible = false">
</goodsbox>
</div> -->
<!-- 周边水源 -->
<!-- <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 class="legendBox" v-if="findsourceShow" v-drag>
<div class="legend-title">图 例</div>
<div class="legend-container flex">
<div class="flex-1 flex column fc-w fz-16">
<div class="flex ai-c jc-c" style="margin-top:20px;" v-for="(item,index) in lebendLeftArr" :key="index">
<div class="flex-1 flex jc-e">
<div class="legend-line mr-1" :style="{ 'background': item.color}"></div>
</div>
<div class="flex-1">{{ item.name }}</div>
</div>
</div>
<div class="flex-1 flex column fc-w fz-16 ai-c jc-c">
<div class="flex ai-c jc-c" style="margin-bottom:20px;" v-for="(item,index) in lebendRightArr" :key="index">
<div class="flex-1 flex jc-e">
<div class="legend-icon mr-2">
<img :src='item.icon' style="width:100%" />
</div>
</div>
<div class="flex-1">{{ item.name }}</div>
</div>
</div>
</div>
</div>
<!-- 路网 -->
<roadCheckBox v-if="findsourceShow" :waterCenter="waterCenter" :gridMap="aroundArr[4].status"></roadCheckBox>
<!-- 水网 -->
<roadWaterCheckBox v-if="findsourceShow" :waterCenter="waterCenter" :gridMap="aroundArr[3].status"></roadWaterCheckBox>
<div class="water-container" v-if="findsourceShow" v-drag>
<div class="box-name">防灭火资源</div>
<div class="close-button" @click="aroundClose">
<i class="el-icon el-icon-close"></i>
</div>
<div style="height:calc(100% - 55px)">
<div class="around-box flex">
<div class="around-label">地图显示：</div>
<div v-for="(item,index) in aroundArr" :key="index" class="box-name-li" @click="aroundCheckClick(index)">
<div class="aroundcheck">
<i v-if="item.status" class="el-icon-check" style="font-size: 14px;color:#F1D700;"></i>
</div>
<div>{{ item.name }}</div>
</div>
</div>
<div class="around-box flex">
<div class="around-label">资源列表：</div>
<div v-for="(item,index) in aroundArr" :key="index" class="box-name-li listr" :class="aroundIndex == index ? 'active':''">
<div v-if="index < 3" @click="aroundClick(index)">{{ item.name }}</div>
</div>
</div>
<div style="height:calc(100% - 130px)">
<div style="height:100%" v-show="aroundIndex==0">
<personnel :fireData="currentInfo" @videoCall="videoCall" :visible='personVisible'></personnel>
<waterbox :waterCenter="waterCenter" :firePopup="firePopupClosed" :gridMap="aroundArr[0].status" :visible='waterVisible'></waterbox>
</div>
<div style="height:100%" v-show="aroundIndex==1">
<waterbox :waterCenter="waterCenter" :firePopup = "firePopupClosed" :gridMap="aroundGridVisible" :visible='waterVisible'></waterbox>
<goodsbox :endLngLat="endLngLat" :firePopup='firePopupClosed' :gridMap="aroundArr[1].status" :roadStatus="aroundArr[4].status" :visible='goodsVisible'></goodsbox>
</div>
<div style="height:100%" v-show="aroundIndex==2">
<goodsbox :endLngLat="endLngLat" :firePopup='firePopupClosed' :gridMap="aroundGridVisible" :visible='goodsVisible'></goodsbox>
<barrackbox :endLngLat="endLngLat" :firePopup='firePopupClosed' :gridMap="aroundArr[2].status" :visible='barrackVisible'></barrackbox>
</div>
<div style="height:100%" v-show="aroundIndex==3">
<barrackbox :endLngLat="endLngLat" :firePopup='firePopupClosed' :gridMap="aroundGridVisible" :visible='barrackVisible'></barrackbox>
</div>
</div>
</div>
@ -195,7 +206,7 @@
<reportlist v-show="earlywarningTabShow==1" @close="reportlistShow = false" :mergeSuccessRandom="mergeSuccessRandom" @wuzi="wuzi"
@shuiyuan="shuiyuan" @getlistSocket="reportlistShow = true"
@jiankong="jiankong" @renyuan="renyuan" @merge="mergeboxShow = true" @changeCurrentInfo="changeCurrentInfo"
:checkList="checkList" :checkNumber="checkNumber"></reportlist>
:checkList="checkList" :checkNumber="checkNumber" @aroundYuAn="aroundYuAn"></reportlist>
<!-- 预警列表 -->
<monitorwarning v-show="earlywarningTabShow==2" @lookDetail="lookMonitorWarningDetail"></monitorwarning>
</div>
@ -335,7 +346,7 @@ import { getModules } from "@/api/modules.js";
import AppConfigInfo from "../../../public/config/app.json";
import widgetJson from "../../../public/config/widget.json";
import feixianConfigJson from "../../../public/config/feixianConfig.json";
import { clearRouterFunc } from './lib/routePath'
import { clearRouterFunc,clearWaterRouterFunc,clearRoadRouterFunc } from './lib/routePath'
import $ from "jquery";
import Map from "@/components/mars3d/Map.vue";
@ -351,6 +362,8 @@ 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 roadCheckBox from "./widget/roadcheck.vue";
import roadWaterCheckBox from "./widget/roadwatercheck.vue";
import taskbox from "./widget/taskbox.vue";
// import gridbox from './widget/gridbox.vue';
@ -398,6 +411,8 @@ export default {
// reportbox,
goodsbox,
barrackbox,
roadCheckBox,
roadWaterCheckBox,
reportlist,
monitorwarning,
taskbox,
@ -405,7 +420,7 @@ export default {
LCmonitorbox,
HKmonitorbox,
mergebox,
personnel,
// personnel,
videocall,
rightclicksetting,
taskDelivery,
@ -449,7 +464,6 @@ export default {
personVisible: false,
goodsVisible: false,
barrackVisible: false,
aroundGridVisible: 0,
waterVisible: false,
currentInfo: {},
LCmonitorboxShow: false,
@ -495,8 +509,25 @@ export default {
allMonitorShow:false,
showMulHKMonitorShow:false,
hkMulDeviceIds:null,
aroundArr:["人员","水源","物资","营房"],
aroundIndex: 0
aroundArr:[
{ name: '水源' , status: true },
{ name: '物资' , status: false },
{ name: '营房' , status: false },
{ name: '水网' , status: false },
{ name: '路网' , status: true }
],
aroundIndex: 0,
lebendLeftArr:[
{ name: '防火通道' , color: '#E6472B' },
{ name: '三轮车道' , color: '#1F5FDE' },
{ name: '步行道' , color: '#9C9C9C' },
{ name: '水网' , color: '#56C3F9' }
],
lebendRightArr:[
{ name: '水源' , icon: '/img/watercircle.png' },
{ name: '物资' , icon: '/img/wuzichubei.png' },
{ name: '营房' , icon: '/img/yingfangcircle.png' },
]
};
},
@ -548,46 +579,31 @@ export default {
// 图层属性编辑
window.editlayerinfo = this.editlayerinfo;
},
watch: {
waterVisible: {
handler(newVal, oldVal) {
if (!newVal) {
// clearRouterFunc()
}
},
immediate: true
},
goodsVisible:{
handler(newVal, oldVal) {
if (!newVal) {
// 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)
},
aroundCheckClick(index){
this.aroundArr.forEach((item,val) =>{
if(index == val){
item.status = !item.status
}
})
},
aroundClose(){
this.personVisible = false
this.waterVisible = false
this.goodsVisible = false
this.barrackVisible = false
this.aroundGridVisible = 0
clearRouterFunc()
clearWaterRouterFunc()
clearRoadRouterFunc()
setTimeout(()=>{
this.findsourceShow = false
@ -940,9 +956,7 @@ export default {
</div>
<div class="data-li">
<div class="data-value">
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" >附近人员</span>
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" >附近水源</span>
<span id="lablCSFM2" onclick="wuzi([${item.lng},${item.lat}])" class="label-tag data-value-status-2" >周边物资</span>
<span id="lablCSFM3" onclick="aroundYuAn([${item.lng},${item.lat}])" class="label-tag data-value-status-2" >查找预案</span>
<span id="lablCSFM2" onclick="delFirePoint(${item.id})" class="label-tag data-value-status-3" title="删除火点">删除火点</span>
</div>
</div>
@ -1005,6 +1019,19 @@ export default {
this.currentInfo.lat = item[1];
this.personVisible = !this.personVisible;
},
aroundYuAn(item){
this.aroundIndex = 0
this.waterVisible = true
this.goodsVisible = true
this.barrackVisible = true
this.endLngLat = item;
this.waterCenter = item;
this.findsourceShow = true
this.callCenterVisible = true;
this.rightDiaVisible = true
this.toolsShow = true
this.diaToggle()
},
// 水源
shuiyuan(item) {
this.waterCenter = item;
@ -1117,7 +1144,7 @@ export default {
}
},
{
text: "查找周边",
text: "查找预案",
show: function (e) {
return Cesium.defined(e.cartesian);
},
@ -1128,13 +1155,19 @@ export default {
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
this.callCenterVisible = true;
this.rightDiaVisible = true
this.toolsShow = true
this.diaToggle()
},
// children: [
// {
@ -1266,7 +1299,7 @@ export default {
})
},
onMapClick(e) {
},
// 当前日期时间
handlerTime() {
@ -1821,7 +1854,7 @@ export default {
line-height: 20px;
text-align: center;
}
/* 火情调度 */
.situation {
width: 480px;
@ -2196,11 +2229,66 @@ export default {
}
.box-name-li{
padding: 0 15px;
padding: 0 10px;
cursor: pointer;
background: none;
display: flex;
flex-direction: row;
align-items: center;
}
.box-name-li.listr{
padding: 0 15px;
}
.box-name-li.active{
background: linear-gradient(180deg, rgba(1,216,215,0) 0%, #01D7D6 99%, #FF6A3A 100%);
border-radius: 15px;
}
.aroundcheck{
width: 16px;
height: 16px;
background: #0F3D41;
border: 1px solid #07A0AD;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.around-box{
margin-top: 15px;
color: #fff;
}
.around-label{
width: 120px;
text-align: right;
color: #fff;
font-size: 14px;
}
.legendBox{
width: 400px;
height: 280px;
background: linear-gradient(160deg, #062D2D 0%, rgba(7,64,64,0.97) 100%, rgba(8,41,41,0.64) 100%);
border: 1px solid #0F6E6F;
position: absolute;
top: 580px;
left: 20px;
}
.legend-title{
font-size: 22px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 60px;
letter-spacing: 1px;
text-align: center;
}
.legend-container{
height: calc(100% - 60px);
}
.legend-line{
width: 40px;
height: 2px;
}
.legend-icon{
width: 25px;
}
</style>

103
src/views/home/lib/routePath.js
View File

@ -12,6 +12,8 @@ const GD_KEY = "6af6a87038f44c8c793aa70331f2b7ca"
//路线的图层
let pathGraphicLayers = null
let pathOneGraphicLayers= null
let pathWaterGraphicLayers = null
let pathRoadGraphicLayers = null
//导航寻路
export const getRouterFunc = (params, method = 'postgis') => {
@ -179,17 +181,17 @@ export const getRouterByPostGis = (params) => {
if (LineString == null || LineString == "null") {
//没有找到路线，返回空
console.log('PostGIS未找到合适了路线')
resolve(parse(null))
// resolve(parse(null))
} else {
resolve(parse(LineString))
}
} else {
console.log('PostGIS未找到合适了路线')
resolve(parse(null))
// resolve(parse(null))
}
}).catch(err => {
console.log('PostGIS寻路算法服务端错误')
resolve(parse(null))
// resolve(parse(null))
})
})
}
@ -214,7 +216,7 @@ export const drawRouterFunc = (pathObject) => {
// 导航数据路段
// let gdPathGraphic = drawLineFlowEntity(gdRoute, 'YELLOW',10)
// let postgisPathGraphic = drawLineFlowEntity(postGisRoute, 'RED',10)
let pathGraphic = drawLineFlowEntity(allCoordinates, 'CYAN')
let pathGraphic = drawLineFlowEntity(allCoordinates, '#E6472B')
//开始的路段
let startPathGraphic = drawPolylineDashEntity([startLngLat, startRouterLngLat], 'YELLOW')
@ -250,7 +252,7 @@ export const drawRoutersFunc = (pathObject) => {
// 导航数据路段
// let gdPathGraphic = drawLineFlowEntity(gdRoute, 'YELLOW',10)
// let postgisPathGraphic = drawLineFlowEntity(postGisRoute, 'RED',10)
let pathGraphic = drawLineFlowEntityColor(allCoordinates, '#f76403')
let pathGraphic = drawLineFlowEntityColor(allCoordinates, '#E6472B')
//开始的路段
// let startPathGraphic = drawPolylineDashEntity([startLngLat, startRouterLngLat], 'YELLOW')
@ -271,9 +273,9 @@ export const drawRoutersFunc = (pathObject) => {
export const drawRoutersFuncWaterGrid = (pathObject) => {
let { pointArr } = pathObject
// 添加graphic
if (pathGraphicLayers == null) {
pathGraphicLayers = new mars3d.layer.GraphicLayer();
window.globalmap.addLayer(pathGraphicLayers);
if (pathWaterGraphicLayers == null) {
pathWaterGraphicLayers = new mars3d.layer.GraphicLayer();
window.globalmap.addLayer(pathWaterGraphicLayers);
} else {
}
@ -284,18 +286,18 @@ export const drawRoutersFuncWaterGrid = (pathObject) => {
} else {
// 导航数据路段
let pathGraphic
pathGraphic = drawLineFlowEntityColor2(pointArr, '#21FD04')
pathGraphic = drawLineFlowEntityColor2(pointArr, '#56C3F9')
pathGraphicLayers.addGraphic(pathGraphic);
pathWaterGraphicLayers.addGraphic(pathGraphic);
}
}
export const drawRoutersFuncGrid = (pathObject) => {
let { pointArr, Type } = pathObject
// 添加graphic
if (pathGraphicLayers == null) {
pathGraphicLayers = new mars3d.layer.GraphicLayer();
window.globalmap.addLayer(pathGraphicLayers);
if (pathRoadGraphicLayers == null) {
pathRoadGraphicLayers = new mars3d.layer.GraphicLayer();
window.globalmap.addLayer(pathRoadGraphicLayers);
} else {
}
@ -308,35 +310,15 @@ export const drawRoutersFuncGrid = (pathObject) => {
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)
pathGraphic = drawLineFlowEntityColor1(pointArr, '#E6472B')
}else if(Type == 2){
pathGraphic = drawLineFlowEntityColor2(pointArr, '#0434FD')
pathGraphic = drawLineFlowEntityColor2(pointArr, '#1F5FDE')
}else{
pathGraphic = drawLineFlowEntityColor2(pointArr, '#04FDDD')
pathGraphic = drawLineFlowEntityColor2(pointArr, '#9C9C9C')
}
pathGraphicLayers.addGraphic(pathGraphic);
pathRoadGraphicLayers.addGraphic(pathGraphic);
}
}
@ -416,11 +398,12 @@ const drawLineFlowEntity = (positions, cesiumColor,width=5) => {
style: {
width: width,
clampToGround: true,
materialType: mars3d.MaterialType.LineFlow,
materialType: mars3d.MaterialType.LineFlowColor,
materialOptions: {
color: Cesium.Color[cesiumColor],
image: "/img/line-colour.png",
speed: 10,
color: cesiumColor,
speed: 1000,
percent: 1,
alpha: 1
},
},
});
@ -432,11 +415,12 @@ const drawLineFlowEntityColor = (positions, cesiumColor,width=5) => {
style: {
width: width,
clampToGround: true,
materialType: mars3d.MaterialType.LineFlow,
materialType: mars3d.MaterialType.LineFlowColor,
materialOptions: {
color: cesiumColor,
image: "/img/line-colour.png",
speed: 10,
speed: 1000,
percent: 1,
alpha: 1
},
},
});
@ -447,11 +431,12 @@ const drawLineFlowEntityColor1 = (positions, cesiumColor,width=5) => {
style: {
width: width,
clampToGround: true,
materialType: mars3d.MaterialType.LineFlow,
materialType: mars3d.MaterialType.LineFlowColor,
materialOptions: {
color: cesiumColor,
image: "/img/line-colour.png",
speed: 10,
speed: 1000,
percent: 1,
alpha: 1
},
},
});
@ -463,11 +448,12 @@ const drawLineFlowEntityColor2 = (positions, cesiumColor,width=5) => {
style: {
width: width,
clampToGround: true,
materialType: mars3d.MaterialType.LineFlow,
materialType: mars3d.MaterialType.LineFlowColor,
materialOptions: {
color: cesiumColor,
// image: "/img/line-colour.png",
// speed: 10,
speed: 1000,
percent: 1,
alpha: 1
},
},
});
@ -482,6 +468,7 @@ export const clearRouterFunc = () => {
} else {
pathGraphicLayers.clear();
}
if (pathOneGraphicLayers == null) {
return false
@ -490,6 +477,22 @@ export const clearRouterFunc = () => {
}
}
//删除水网路线
export const clearWaterRouterFunc = () => {
if (pathWaterGraphicLayers == null) {
return false
} else {
pathWaterGraphicLayers.clear();
}
}
//删除路网路线
export const clearRoadRouterFunc = () => {
if (pathRoadGraphicLayers == null) {
return false
} else {
pathRoadGraphicLayers.clear();
}
}
//计算最近路线
const getMinimumRoute = (pathObject) => {

125
src/views/home/widget/barrackbox.vue
View File

@ -4,14 +4,8 @@
<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 flex-1 ai-c" style="margin: 10px 0">
<span style="width: 120px; 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>
@ -21,7 +15,6 @@
<el-radio :label="5">全部</el-radio>
</el-radio-group>
</div>
</div>
</div>
<div class="box-container">
<div class="table-body">
@ -38,7 +31,7 @@
<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 type="primary" style="height:30px;" size="mini" icon="el-icon-position" @click="flyToPosition(item)">
定位
</el-button>
</div>
@ -53,7 +46,7 @@
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'
import { getRouterFunc, drawRouterFunc, clearRouterFunc, } from '../lib/routePath'
const areaName = localStorage.getItem("areaName");
export default {
name: "monitorbox",
@ -80,6 +73,15 @@
endLngLat: function (e) {
this.getWuziList();
},
gridMap: {
handler(newVal, oldVal) {
if(newVal){
this.addGoodsLayer()
}else{
this.close();
}
},
},
firePopup: {
handler(newVal, oldVal) {
if (newVal == true) {
@ -89,7 +91,7 @@
},
visible: {
handler(newVal, oldVal) {
console.log('newVal: ', newVal);
if (newVal == false) {
this.close();
}
@ -104,8 +106,6 @@
this.goodsGraphicLayerArr.forEach((item) => {
this.goodsGraphicLayer.removeGraphic(item);
});
clearRouterFunc()
this.$emit("close");
},
radioChange(e) {
let arr = this.nestWuziPoints;
@ -148,7 +148,10 @@
this.goodsListData.sort((a, b) => {
return a.distance - b.distance;
});
this.addGoodsLayer();
if(this.gridMap){
this.addGoodsLayer()
}
},
getWuziList() {
let params = {
@ -160,26 +163,6 @@
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=>{
@ -200,58 +183,17 @@
this.goodsListData = arr;
this.getNestPoint(this.endLngLat[0], this.endLngLat[1]).then(
(wz) => {
this.nestWuziPoints = wz;
this.radioChange();
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]);
@ -320,8 +262,8 @@
let graphic = new mars3d.graphic.BillboardEntity({
position: [item.lngLat[0], item.lngLat[1]],
style: {
image: "img/liaowangtai.png",
scale: 0.7,
image: "img/yingfang.png",
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
@ -378,22 +320,7 @@
},
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);
});
@ -431,7 +358,7 @@
.box-container {
width: calc(100% - 0px);
padding: 0px 12px;
height: calc(100% - 120px);
height: calc(100% - 90px);
}
.table-header {

104
src/views/home/widget/goodsbox.vue
View File

@ -4,8 +4,20 @@
<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">
<div class="flex flex-1 ai-c" style="margin: 10px 0" v-if="!gridIsShow">
<span style="width: 120px; 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 class="box-title flex column" v-if="gridIsShow">
<div class="flex-1 flex ai-c">
<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>
@ -23,7 +35,7 @@
</div>
</div>
</div>
<div class="box-container">
<div class="box-container" :style="{'height': gridIsShow?'calc(100% - 90px)':'calc(100% - 30px)'}">
<div class="table-body">
<div class="item" v-for="(item, index) in goodsListData" :key="index">
<div class="flex column">
@ -38,7 +50,7 @@
<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 type="primary" style="height:30px;" size="mini" icon="el-icon-position" @click="flyToPosition(item)">
定位
</el-button>
</div>
@ -52,14 +64,13 @@
</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'
import { getRouterFunc, drawRouterFunc, clearRouterFunc} from '../lib/routePath'
const areaName = localStorage.getItem("areaName");
export default {
name: "monitorbox",
props: ["endLngLat", "firePopup", "visible","gridMap"],
props: ["endLngLat", "firePopup", "visible","gridMap","roadStatus"],
data() {
return {
startLngLat: null,
@ -82,6 +93,25 @@ export default {
endLngLat: function (e) {
this.getWuziList();
},
gridMap: {
handler(newVal, oldVal) {
if(newVal){
this.addGoodsLayer()
}else{
this.close();
}
},
},
roadStatus: {
handler(newVal, oldVal) {
console.log('newVal',newVal)
if(newVal){
this.getWuziList()
}else{
clearRouterFunc()
}
},
},
firePopup: {
handler(newVal, oldVal) {
if (newVal == true) {
@ -91,7 +121,6 @@ export default {
},
visible: {
handler(newVal, oldVal) {
console.log('newVal: ', newVal);
if (newVal == false) {
this.close();
}
@ -100,15 +129,13 @@ export default {
},
created() {
this.getWuziList();
},
methods: {
close() {
this.goodsGraphicLayerArr.forEach((item) => {
this.goodsGraphicLayer.removeGraphic(item);
});
clearRouterFunc()
this.$emit("close");
},
radioChange(e) {
let arr = this.nestWuziPoints;
@ -151,14 +178,16 @@ export default {
this.goodsListData.sort((a, b) => {
return a.distance - b.distance;
});
this.addGoodsLayer();
if(this.gridMap){
this.addGoodsLayer()
}
},
getWuziList() {
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
@ -220,54 +249,13 @@ export default {
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]);
@ -430,7 +418,7 @@ export default {
<style scoped>
.box {
width: 100%;
height: calc(100% - 20px);
height: calc(100% - 10px);
overflow: hidden;
text-align: left;
z-index: 99;
@ -455,7 +443,7 @@ export default {
.box-container {
width: calc(100% - 0px);
padding: 0px 12px;
height: calc(100% - 120px);
height: calc(100% - 90px);
}
.table-header {

13
src/views/home/widget/reportlist.vue
View File

@ -110,6 +110,7 @@ export default {
window.shuiyuan = this.shuiyuan;
window.jiankong = this.jiankong;
window.renyuan = this.renyuan;
window.aroundYuAn = this.aroundYuAn;
},
mounted() {
this.getList();
@ -146,6 +147,9 @@ export default {
wuzi(e) {
this.$emit("wuzi", e);
},
aroundYuAn(e) {
this.$emit("aroundYuAn", e);
},
renyuan(e) {
this.$emit("renyuan", e);
},
@ -266,9 +270,8 @@ export default {
</div>
<div class="data-li">
<div class="data-value">
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" >人员调度</span>
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" >附近水源</span>
<span id="lablCSFM3" onclick="wuzi([${item.lng},${item.lat}])" class="label-tag data-value-status-2" >周边物资</span>
<span id="lablCSFM3" onclick="aroundYuAn([${item.lng},${item.lat}])" class="label-tag data-value-status-2" >查找预案</span>
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
</div>
</div>
@ -315,9 +318,7 @@ export default {
</div>
<div class="data-li">
<div class="data-value">
<span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" >人员调度</span>
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" >附近水源</span>
<span id="lablCSFM3" onclick="wuzi([${item.lng},${item.lat}])" class="label-tag data-value-status-2" >周边物资</span>
<span id="lablCSFM3" onclick="aroundYuAn([${item.lng},${item.lat}])" class="label-tag data-value-status-2" >查找预案</span>
<span id="lablSBZT1" onclick="jiankong('${item.createId}')" style="display:${jiankongDisplay}" class="label-tag data-value-status-1" title="视频监控">视频监控</span>
</div>
</div>

116
src/views/home/widget/roadcheck.vue Normal file
View File

@ -0,0 +1,116 @@
<template>
<div></div>
</template>
<script>
import axios from "axios";
import { clearRoadRouterFunc,drawRoutersFuncGrid } from '../lib/routePath'
let BASE_URL = process.env.VUE_APP_BASE_API;
export default {
name: "monitorbox",
props: ["waterCenter", "visible","gridMap"],
data() {
return {
};
},
watch: {
visible: {
handler(newVal, oldVal) {
if (newVal == false) {
this.close();
}
},
},
gridMap: {
handler(newVal, oldVal) {
if(newVal){
this.getGridList();
}else{
this.close();
}
},
},
waterCenter: {
handler(newVal, oldVal) {
this.getGridList();
},
immediate: true,
// 开启深度监听 deep
deep: true,
},
},
created() {
this.getGridList();
},
methods: {
close() {
clearRoadRouterFunc()
},
getGridList() {
axios({
method: "get",
params: {
lng: this.waterCenter[0],
lat: this.waterCenter[1],
},
url: BASE_URL + "/FireGrideResource/GetGridInfoByLngLat",
}).then((res) => {
let rel = res.data.result
if(rel == null){
}else{
axios({
method: "get",
params: {
id: rel.Id
},
url: BASE_URL + "/FireGrideResource/GetWaterResource",
}).then((res) => {
if(this.gridMap){
this.getGridRoute(rel.Id);
}
});
}
});
},
getGridRoute(Id){
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)
}
})
});
},
},
};
</script>
<style scoped>
</style>

121
src/views/home/widget/roadwatercheck.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<div></div>
</template>
<script>
import axios from "axios";
import { clearWaterRouterFunc,drawRoutersFuncWaterGrid } from '../lib/routePath'
let BASE_URL = process.env.VUE_APP_BASE_API;
export default {
name: "monitorbox",
props: ["waterCenter","visible","gridMap"],
data() {
return {
startLngLat: null,
list: [],
waterPoints: null,
nestWaterPoints: [],
echartsLayer: null,
waterGraphicLayer: null,
waterGraphicLayerArr: [],
pathPointGraphicLayer: null,
allData: [],
distanceradio:1,
gridIsShow: true,
};
},
watch: {
visible: {
handler(newVal, oldVal) {
if (newVal == false) {
this.close();
}
},
},
gridMap: {
handler(newVal, oldVal) {
if(newVal){
this.getGridList();
}else{
this.close();
}
},
},
waterCenter: {
handler(newVal, oldVal) {
this.getGridList();
},
immediate: true,
// 开启深度监听 deep
deep: true,
}
},
created() {
this.getGridList();
},
methods: {
close() {
clearWaterRouterFunc()
},
getGridList() {
axios({
method: "get",
params: {
lng: this.waterCenter[0],
lat: this.waterCenter[1],
},
url: BASE_URL + "/FireGrideResource/GetGridInfoByLngLat",
}).then((res) => {
let rel = res.data.result
if(rel == null){
}else{
axios({
method: "get",
params: {
id: rel.Id
},
url: BASE_URL + "/FireGrideResource/GetWaterResource",
}).then((res) => {
if(this.gridMap){
this.getWaterRoad(rel.Id);
}
});
}
});
},
getWaterRoad(Id){
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)
})
});
},
},
};
</script>
<style scoped>
</style>

204
src/views/home/widget/waterbox.vue
View File

@ -7,7 +7,7 @@
<!-- <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>
<span style="width: 120px; 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>
@ -26,7 +26,7 @@
<div class="float:right;text-align:right;">
<i
class="el-icon el-icon-position"
@click="flyToPosition([item.lngLat[0], item.lngLat[1]],'one')"
@click="flyToPosition(item,index,'one')"
></i>
</div>
</div>
@ -39,12 +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,drawRoutersFuncGrid,drawRoutersFuncWaterGrid } from '../lib/routePath'
import { getRouterFunc, drawOneRouterFunc,drawRoutersFunc,clearRouterFunc } from '../lib/routePath'
let BASE_URL = process.env.VUE_APP_BASE_API;
export default {
name: "monitorbox",
props: ["waterCenter", "firePopup","visible","gridMap"],
props: ["waterCenter", "firePopup","visible","gridMap","waterFly"],
data() {
return {
startLngLat: null,
@ -58,6 +58,8 @@ export default {
allData: [],
distanceradio:1,
gridIsShow: true,
waterGraphicLayerFly: null,
waterGraphicLayerArrFly: [],
};
},
watch: {
@ -68,7 +70,15 @@ export default {
}
},
},
gridMap: {
handler(newVal, oldVal) {
if(newVal){
this.addGoodsLayer()
}else{
this.close();
}
},
},
waterCenter: {
handler(newVal, oldVal) {
this.getWaterList();
@ -87,7 +97,6 @@ export default {
},
created() {
this.getWaterList();
// window.flyToPosition = this.flyToPosition
},
methods: {
close() {
@ -98,8 +107,11 @@ export default {
this.waterGraphicLayerArr.forEach((item) => {
this.waterGraphicLayer.removeGraphic(item);
});
clearRouterFunc()
this.$emit("close");
this.waterGraphicLayerArrFly.forEach((item) => {
this.waterGraphicLayerFly.removeGraphic(item);
});
},
radioChange(e) {
let arr = this.allData;
@ -143,8 +155,11 @@ export default {
return a.distance - b.distance;
});
if(this.gridMap){
this.addGoodsLayer()
}
},
addGoodsLayer(){
if (this.waterGraphicLayer == null) {
this.waterGraphicLayer = new mars3d.layer.GraphicLayer();
window.globalmap.addLayer(this.waterGraphicLayer);
@ -154,6 +169,7 @@ export default {
this.waterGraphicLayer.removeGraphic(graphic);
});
this.waterGraphicLayerArr = [];
this.nestWaterPoints.forEach((item, index) => {
let graphic = new mars3d.graphic.BillboardEntity({
position: [item.lngLat[0], item.lngLat[1]],
@ -167,6 +183,10 @@ export default {
), // 按视距距离显示
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
clampToGround: true,
highlight: {
type:'click',
image: "img/wateractive.png",
},
label: {
text:"水源地"+(index+1)+"("+item.distance+")km",
font_size: 12,
@ -219,10 +239,9 @@ export default {
this.waterGraphicLayer.addGraphic(graphic);
});
this.nestWaterPoints.forEach((item,index)=>{
this.flyToPosition([item.lngLat[0], item.lngLat[1]],'all')
})
window.globalmap.addLayer(this.waterGraphicLayer);
},
getWaterList() {
axios({
@ -261,70 +280,13 @@ export default {
})
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
getAroundTime(a) {
var h = parseInt(a / 3600);
@ -340,6 +302,7 @@ export default {
let options = { units: "kilometers" };
let distance = turf.distance(from, to, options);
let obj = {
id: item.Id,
lngLat: item.coordinates,
distance: distance.toFixed(2),
time: this.getAroundTime(distance.toFixed(2) * 60 + 5 * 60),
@ -362,6 +325,7 @@ export default {
let options = { units: "kilometers" };
let distance = turf.distance(from, to, options);
let obj = {
id: item.Id,
lngLat: item.geometry.coordinates,
distance: distance.toFixed(2),
time: this.getAroundTime(distance.toFixed(2) * 60 + 5 * 60),
@ -375,20 +339,86 @@ export default {
},
flyToPosition(lngLat,type) {
// if(type=='all'){
// this.startLngLat = lngLat;
// if(this.gridIsShow){
// this.getRoutePath(type);
// }else{
// }
// }else if(type == 'one'){
// this.startLngLat = lngLat;
// this.getRoutePath(type);
// }
window.globalmap.flyToPoint(lngLat, { radius: 4000, pitch: -90 });
flyToPosition(item,index,type) {
this.startLngLat = item.lngLat
window.globalmap.flyToPoint([item.lngLat[0],item.lngLat[1]], { radius: 4000, pitch: -90 });
this.flyAddPoint(item,index)
},
flyAddPoint(item,index){
if (this.waterGraphicLayerFly == null) {
this.waterGraphicLayerFly = new mars3d.layer.GraphicLayer();
window.globalmap.addLayer(this.waterGraphicLayerFly);
}
this.waterGraphicLayerArrFly.forEach((graphic) => {
this.waterGraphicLayerFly.removeGraphic(graphic);
});
this.waterGraphicLayerArrFly = [];
let graphic = new mars3d.graphic.BillboardEntity({
position: [item.lngLat[0], item.lngLat[1]],
style: {
image: "img/wateractive.png",
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,
highlight: {
type:'click',
image: "img/wateractive.png",
},
label: {
text:"水源地"+(index+1)+"("+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">水源地${index+1}</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,
});
this.waterGraphicLayerArrFly.push(graphic);
this.waterGraphicLayerFly.addGraphic(graphic);
},
getRoutePath(type) {
// 获取路线数据
@ -550,7 +580,7 @@ export default {
}
.table-body {
width: 100%;
height: calc(100% - 25px);
height: calc(100% - 30px);
overflow-y: auto;
}