506 lines
18 KiB
Vue
506 lines
18 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 右键添加火点 -->
|
|
<el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
|
|
<el-form :model="setUpData">
|
|
<el-form-item label="地址" size="small">
|
|
<el-input v-model="setUpData.address" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="描述" size="small">
|
|
<el-input v-model="setUpData.describe" type="textarea"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
|
|
<el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 右键设为任务点 -->
|
|
<el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
|
|
<el-form :model="setUpData">
|
|
<el-form-item label="地址" size="small">
|
|
<el-input v-model="setUpData.address" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="详情" size="small">
|
|
<el-input v-model="setUpData.content" type="textarea"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
|
|
<el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 标注 -->
|
|
<el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px" @close="$emit('close')">
|
|
<el-form :model="setUpData">
|
|
<el-form-item label="标题" size="small">
|
|
<el-input v-model="setUpData.title" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="描述" size="small">
|
|
<el-input v-model="setUpData.remark" type="textarea"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button size="mini" @click="cancelMark">取 消</el-button>
|
|
<el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 标注列表 -->
|
|
<div v-if="markListDialogFormVisible" class="marklistbox">
|
|
<div class="flex jc-sb ai-c">
|
|
<div class="title">标注</div>
|
|
<span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
|
|
</div>
|
|
<div class="mark-content">
|
|
<div v-for="(item,index) in markList" :key="index" class="table-li">
|
|
<div class="flex jc-sb ai-c max-h">
|
|
<div>
|
|
<img class="mr-1 markimg" :src="item.createUser" />
|
|
<span>{{ item.title }}</span>
|
|
</div>
|
|
<div>
|
|
<el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
|
|
<el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="markfooter flex ai-c jc-e">
|
|
<el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
|
|
<el-button type="success" @click="delAllMark">清空标注</el-button>
|
|
<el-button type="primary" @click="submitMarkData">保存标注</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 历史标注 -->
|
|
<div class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
|
|
<div class="flex jc-sb ai-c">
|
|
<div class="title">历史标注</div>
|
|
</div>
|
|
<div class="mark-content">
|
|
<div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
|
|
<div class="flex jc-sb ai-c max-h max-w">
|
|
<div class="flex-1 flex column mr-2">
|
|
<div class="flex ai-c jc-sb max-w">
|
|
<span>{{ item.title }}</span>
|
|
<span>{{ item.createTime }}</span>
|
|
</div>
|
|
<div>
|
|
<span>{{ item.remark }}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="markfooter flex ai-c jc-e">
|
|
<el-button @click="historyMarkBack">返 回</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
|
|
export default {
|
|
name: 'setting',
|
|
props:['globalmap','type','clickdata'],
|
|
data(){
|
|
return {
|
|
imgUrl:[
|
|
{ lable: '火点' , url: 'img/markfire.png' },
|
|
{ lable: '集合点' , url: 'img/marklocahost.png' },
|
|
{ lable: '消防车' , url: 'img/markfirecar.png' },
|
|
{ lable: '箭头' , url: 'img/markarrow.png' }
|
|
],
|
|
markList:[],
|
|
allHistoryMarkList:[],
|
|
fireGraphicLayer: null,
|
|
markGraphicLayer: null,
|
|
markGraphicLayerArr: [],
|
|
historyMarkGraphicLayer: null,
|
|
historyMarkGraphicLayerArr: [],
|
|
isViewMark: false,
|
|
isViewIndex: null,
|
|
setUpData: {},
|
|
firedialogFormVisible: false,
|
|
taskdialogFormVisible: false,
|
|
markdialogFormVisible: false,
|
|
markListDialogFormVisible: false,
|
|
historyMarkVisible: false,
|
|
}
|
|
},
|
|
watch:{
|
|
type:{
|
|
handler(newVal,oldVal) {
|
|
if(newVal == 1){
|
|
this.firedialogFormVisible = true
|
|
}
|
|
if(newVal == 2){
|
|
this.taskdialogFormVisible = true
|
|
}
|
|
if(newVal == 3){
|
|
this.markdialogFormVisible = true
|
|
}
|
|
}
|
|
},
|
|
clickdata:{
|
|
handler(newVal,oldVal) {
|
|
this.setUpData = newVal
|
|
}
|
|
}
|
|
},
|
|
created(){
|
|
if(this.type == 3){
|
|
this.markdialogFormVisible = true
|
|
this.setUpData = this.clickdata
|
|
}
|
|
},
|
|
methods:{
|
|
cancelMark(){
|
|
this.markdialogFormVisible=false;
|
|
this.$emit('close')
|
|
this.isViewMark = false;
|
|
},
|
|
// 保存标注到列表
|
|
addMarkForm(){
|
|
if(this.isViewMark){
|
|
this.markList.splice(this.isViewIndex, 1, this.setUpData)
|
|
}else{
|
|
this.imgUrl.forEach(item =>{
|
|
if(item.lable == this.setUpData.iconUrl){
|
|
this.setUpData.createUser = item.url
|
|
}
|
|
})
|
|
this.markList.push(this.setUpData)
|
|
}
|
|
this.markdialogFormVisible = false
|
|
this.markListDialogFormVisible = true
|
|
this.isViewMark = false
|
|
this.$emit('close')
|
|
this.addLayerPoint()
|
|
},
|
|
addLayerPoint(){
|
|
if(this.markGraphicLayer == null){
|
|
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
|
this.globalmap.addLayer(this.markGraphicLayer);
|
|
}
|
|
this.markGraphicLayerArr.forEach(item =>{
|
|
this.markGraphicLayer.removeGraphic(item)
|
|
})
|
|
this.markGraphicLayerArr = []
|
|
this.markList.forEach((item,index)=>{
|
|
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
|
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
|
if(item.iconUrl == '箭头'){
|
|
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
|
verticalOrigin = Cesium.VerticalOrigin.TOP
|
|
}
|
|
let graphic = new mars3d.graphic.BillboardEntity({
|
|
position: [item.lng,item.lat],
|
|
style: {
|
|
// image: "img/jiuyuanrenyuan.png",
|
|
image: item.createUser,
|
|
scale: 0.8,
|
|
horizontalOrigin: horizontalOrigin,
|
|
verticalOrigin: verticalOrigin,
|
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
|
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
|
clampToGround: true,
|
|
visibleDepth: false
|
|
},
|
|
attr: { remark: "示例11" },
|
|
pointerEvents: true
|
|
})
|
|
this.markGraphicLayerArr.push(graphic)
|
|
|
|
this.markGraphicLayer.addGraphic(graphic);
|
|
|
|
})
|
|
},
|
|
//查看标注详情
|
|
viewOneMarkDetail(item,index){
|
|
console.log('aaa',item)
|
|
this.isViewMark = true
|
|
this.setUpData = item
|
|
this.isViewIndex = index
|
|
this.markdialogFormVisible = true
|
|
let lngLat = [item.lng,item.lat]
|
|
this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
|
|
},
|
|
delAllMark(){
|
|
this.$confirm('确认清空所有标注?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.markList = []
|
|
this.addLayerPoint()
|
|
}).catch(() => {
|
|
|
|
});
|
|
},
|
|
delOneMark(index){
|
|
this.$confirm('确认删除本条标注?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.markList.splice(index, 1)
|
|
this.addLayerPoint()
|
|
}).catch(() => {
|
|
|
|
});
|
|
},
|
|
delOneHistoryMark(item){
|
|
this.$confirm('确认删除本条标注?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
let param = {
|
|
id: item.id
|
|
}
|
|
postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
|
|
if(res.code == 200){
|
|
this.$message({
|
|
message: '操作成功',
|
|
type: 'success'
|
|
});
|
|
this.getHistoryMarkList()
|
|
}
|
|
})
|
|
|
|
}).catch(() => {
|
|
|
|
});
|
|
},
|
|
viewHistoryMark(){
|
|
this.getHistoryMarkList()
|
|
this.historyMarkVisible = true
|
|
},
|
|
// 保存标注
|
|
submitMarkData(){
|
|
console.log('markList',this.markList)
|
|
postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
|
|
console.log('rrr',res)
|
|
if(res.code == 200){
|
|
this.$message({
|
|
message: '操作成功',
|
|
type: 'success'
|
|
});
|
|
this.markList = []
|
|
this.setUpData = {}
|
|
this.markListDialogFormVisible = false
|
|
}
|
|
})
|
|
},
|
|
historyMarkBack(){
|
|
this.historyMarkVisible = false
|
|
this.historyMarkGraphicLayerArr.forEach(item =>{
|
|
this.historyMarkGraphicLayer.removeGraphic(item)
|
|
})
|
|
},
|
|
//获取所有标注
|
|
getHistoryMarkList(){
|
|
let param = {
|
|
pageIndex: 1,
|
|
pageSize: 99999,
|
|
}
|
|
getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
|
|
this.allHistoryMarkList = res.data
|
|
|
|
if(this.historyMarkGraphicLayer == null){
|
|
this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
|
|
this.globalmap.addLayer(this.historyMarkGraphicLayer);
|
|
}
|
|
|
|
this.historyMarkGraphicLayerArr = []
|
|
this.allHistoryMarkList.forEach((item,index)=>{
|
|
let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
|
|
let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
|
|
if(item.iconUrl == '箭头'){
|
|
horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
|
|
verticalOrigin = Cesium.VerticalOrigin.TOP
|
|
}
|
|
let graphic = new mars3d.graphic.BillboardEntity({
|
|
position: [item.lng,item.lat],
|
|
style: {
|
|
// image: "img/jiuyuanrenyuan.png",
|
|
image: item.createUser,
|
|
scale: 0.8,
|
|
horizontalOrigin: horizontalOrigin,
|
|
verticalOrigin: verticalOrigin,
|
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
|
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
|
clampToGround: true,
|
|
visibleDepth: false
|
|
},
|
|
attr: { remark: "示例11" },
|
|
pointerEvents: true
|
|
})
|
|
this.historyMarkGraphicLayerArr.push(graphic)
|
|
|
|
this.historyMarkGraphicLayer.addGraphic(graphic);
|
|
|
|
})
|
|
})
|
|
},
|
|
|
|
//设为火点保存
|
|
addfireDetail(){
|
|
postMethodCommon("/FireManagement/AddFireClueInfo",this.setUpData).then(res =>{
|
|
if(res.code == 200){
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'success'
|
|
});
|
|
}else{
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
let param = this.setUpData
|
|
if(this.fireGraphicLayer == null){
|
|
this.fireGraphicLayer = new mars3d.layer.GraphicLayer();
|
|
this.globalmap.addLayer(this.fireGraphicLayer);
|
|
}
|
|
|
|
let graphic = new mars3d.graphic.BillboardEntity({
|
|
position: [param.lng,param.lat],
|
|
style: {
|
|
image: "img/markfire.png",
|
|
scale: 0.8,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
|
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
|
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
|
clampToGround: true,
|
|
visibleDepth: false
|
|
},
|
|
attr: { remark: "示例11" },
|
|
pointerEvents: true
|
|
})
|
|
|
|
this.fireGraphicLayer.addGraphic(graphic);
|
|
this.firedialogFormVisible = false
|
|
this.$emit('close')
|
|
})
|
|
},
|
|
//设为任务点
|
|
addTaskClick(){
|
|
postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
|
|
if(res.code == 200){
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'success'
|
|
});
|
|
}else{
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
this.taskdialogFormVisible = false
|
|
this.$emit('close')
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.marklistbox{
|
|
width:525px;
|
|
height:735px;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 20px;
|
|
background-image: url(/img/person.png);
|
|
background-size:100% 100%;
|
|
transform: translate(0,-50%);
|
|
z-index: 2000;
|
|
}
|
|
.marklistboxhistory{
|
|
z-index: 2001;
|
|
}
|
|
.marklistbox .title{
|
|
height: 47px;
|
|
line-height: 47px;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
padding: 0 40px;
|
|
}
|
|
.mark-content{
|
|
width: 94%;
|
|
height: calc(100% - 140px);
|
|
overflow: auto;
|
|
margin-left: 3%;
|
|
border-bottom: 1px solid #156363;
|
|
margin-top: 10px;
|
|
}
|
|
.table-li{
|
|
width:100%;
|
|
height: 70px;
|
|
background: #0E2320;
|
|
margin-bottom: 10px;
|
|
padding: 10px 15px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
}
|
|
.table-li-history{
|
|
width:100%;
|
|
min-height: 70px;
|
|
background: #0E2320;
|
|
margin-bottom: 10px;
|
|
padding: 10px 15px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
}
|
|
.markimg{
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.markfooter{
|
|
height: 80px;
|
|
padding-right: 30px;
|
|
}
|
|
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
|
border: 0
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
height: 10px;
|
|
width: 10px;
|
|
background: transparent;
|
|
border-radius: 5px
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
padding-top: 100px;
|
|
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
|
background-color: #797979;
|
|
min-height: 28px;
|
|
border-radius: 4px;
|
|
background-clip: padding-box
|
|
}
|
|
|
|
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
|
border: 0
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
|
background-color: rgba(0, 0, 0, .4)
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:active {
|
|
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
|
background-color: rgba(0, 0, 0, .5)
|
|
}
|
|
</style> |