右键功能完善，socket等
commit
0535b2c7ae
|
|
@ -165,6 +165,10 @@
|
|||
<div class="report" v-if="appTools['reportbox']">
|
||||
<reportbox @getAllReportList="getAllReportList"></reportbox>
|
||||
</div>
|
||||
<!-- 任务下发 -->
|
||||
<div class="task" v-if="taskDeliveryShow">
|
||||
<taskDelivery @closeTask="closeTask" :globalmap="globalmap" :lng="tasklng" :lat="tasklat"></taskDelivery>
|
||||
</div>
|
||||
<!-- 脚部 -->
|
||||
<div class="footer">
|
||||
<div class="base-layer-change-button" @click="addTileLayer('vec_d')">电子地图</div>
|
||||
|
|
@ -197,6 +201,7 @@ import LCmonitorbox from './widget/LCmonitorbox.vue'
|
|||
import HKmonitorbox from './widget/HKmonitorbox.vue'
|
||||
import videocall from './widget/videocallbox.vue';
|
||||
import personnel from './widget/personnel.vue';
|
||||
import taskDelivery from './widget/taskDelivery.vue';
|
||||
import axios from 'axios';
|
||||
import jQuery from 'jquery';
|
||||
import { mask } from '@turf/turf';
|
||||
|
|
@ -226,7 +231,8 @@ export default {
|
|||
personnel,
|
||||
videocall,
|
||||
rightclicksetting,
|
||||
socketDiaBox
|
||||
socketDiaBox,
|
||||
taskDelivery
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -281,7 +287,10 @@ export default {
|
|||
setDatas:{},
|
||||
setVisibleShow: false,
|
||||
videoCallShow:false,
|
||||
socketBoxVisible: false
|
||||
socketBoxVisible: false,
|
||||
taskDeliveryShow:false,
|
||||
tasklng: '',
|
||||
tasklat: ''
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -320,6 +329,9 @@ export default {
|
|||
videoCall(){
|
||||
this.videoCallShow = true;
|
||||
},
|
||||
closeTask(){
|
||||
this.taskDeliveryShow=false
|
||||
},
|
||||
mergeSuccess(){
|
||||
this.mergeboxShow = false;
|
||||
|
||||
|
|
@ -520,25 +532,27 @@ export default {
|
|||
},
|
||||
callback: (e) => {
|
||||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
|
||||
let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + mpt._lng + "," + mpt._lat + "&extensions=base"
|
||||
axios({
|
||||
method: 'get',
|
||||
url: url,
|
||||
}).then(res => {
|
||||
let name = res.data.regeocode.formatted_address
|
||||
this.setDatas = {
|
||||
address: name,
|
||||
lng: mpt._lng,
|
||||
lat: mpt._lat,
|
||||
content:''
|
||||
}
|
||||
this.rightType = 2
|
||||
// let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + mpt._lng + "," + mpt._lat + "&extensions=base"
|
||||
// axios({
|
||||
// method: 'get',
|
||||
// url: url,
|
||||
// }).then(res => {
|
||||
// let name = res.data.regeocode.formatted_address
|
||||
// this.setDatas = {
|
||||
// address: name,
|
||||
// lng: mpt._lng,
|
||||
// lat: mpt._lat,
|
||||
// content:''
|
||||
// }
|
||||
// this.rightType = 2
|
||||
|
||||
}).catch(err =>{
|
||||
console.log('ee',err)
|
||||
})
|
||||
// }).catch(err =>{
|
||||
// console.log('ee',err)
|
||||
// })
|
||||
|
||||
this.setVisibleShow = true
|
||||
this.tasklng = mpt._lng
|
||||
this.tasklat = mpt._lat
|
||||
this.taskDeliveryShow = true
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -923,7 +937,13 @@ export default {
|
|||
top:130px;
|
||||
left:25px;
|
||||
}
|
||||
|
||||
.task{
|
||||
width: 480px;
|
||||
height: calc( 100vh - 600px);
|
||||
position: absolute;
|
||||
top: 130px;
|
||||
left: 290px;
|
||||
}
|
||||
.tools-box{
|
||||
width:250px;
|
||||
height:100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,318 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">下发任务</div>
|
||||
<div class="box-container">
|
||||
<div class="inputer">
|
||||
<span>位置：</span>
|
||||
<el-input size="mini" style="width:300px;" v-model="location"></el-input>
|
||||
<!-- <el-button icon="el-icon-location-outline" size="mini" type="primary"
|
||||
style="float:left;position:relative;left:4px;" @click="initDrawLayer()"></el-button> -->
|
||||
|
||||
</div>
|
||||
<div class="inputer">
|
||||
<span>任务详情：</span>
|
||||
<el-input type="textarea" :rows="6" style="width:300px;" placeholder="请输入内容" v-model="content">
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin:0px 28px;">
|
||||
<el-button size="mini" @click="close">关闭</el-button>
|
||||
<el-button type="primary" size="mini" @click="onSubmit">下发任务</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'taskDelivery',
|
||||
props: ['globalmap','lng','lat'],
|
||||
data() {
|
||||
return {
|
||||
location: '',
|
||||
content: '',
|
||||
pathPointGraphicLayer: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
if(this.lat){
|
||||
this.location = this.lng + "," + this.lat;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initDrawLayer() { // 图上标绘
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer({
|
||||
name: "标绘图层",
|
||||
id: 10101,
|
||||
isRestorePositions: true,
|
||||
hasEdit: true,
|
||||
isAutoEditing: true // 绘制完成后是否自动激活编辑
|
||||
})
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer)
|
||||
// 在layer上绑定监听事件
|
||||
let _this = this;
|
||||
this.pathPointGraphicLayer.on(mars3d.EventType.click, function (e) {
|
||||
_this.showEditor(e)
|
||||
})
|
||||
|
||||
this.pathPointGraphicLayer.on(mars3d.EventType.drawCreated, function (e) {
|
||||
|
||||
})
|
||||
|
||||
this.pathPointGraphicLayer.on(mars3d.EventType.editStop, function (e) {
|
||||
mars3d.widget.disable("widgets/plotAttr/widget.js")
|
||||
})
|
||||
this.drawMarker()
|
||||
|
||||
},
|
||||
drawMarker() { //图上标绘
|
||||
var img = '/img/homeimg/5.png';
|
||||
this.pathPointGraphicLayer.startDraw({
|
||||
type: "billboard",
|
||||
style: {
|
||||
scale: 0.6,
|
||||
clampToGround: true,
|
||||
image: img,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
showEditor(e) {
|
||||
var graphic = e.graphic
|
||||
const cartesian = e.cartesian
|
||||
const point = mars3d.LngLatPoint.fromCartesian(cartesian)
|
||||
point.format()
|
||||
this.location = point.lng + "," + point.lat;
|
||||
this.lng = point.lng
|
||||
this.lat = point.lat
|
||||
if (!graphic._conventStyleJson) {
|
||||
graphic.options.style = graphic.toJSON().style //因为示例中的样式可能有复杂对象，需要转为单个json简单对象
|
||||
graphic._conventStyleJson = true //只处理一次
|
||||
}
|
||||
var plotAttr = mars3d.widget.getClass("widgets/plotAttr/widget.js")
|
||||
if (plotAttr && plotAttr.isActivate) {
|
||||
plotAttr.startEditing(graphic, graphic.coordinates)
|
||||
} else {
|
||||
mars3d.widget.activate({
|
||||
map: this.globalmap,
|
||||
uri: "widgets/plotAttr/widget.js",
|
||||
name: "属性编辑",
|
||||
graphic: graphic,
|
||||
lonlats: graphic.coordinates
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
bindMapClick(type) { //绑定点击事件 绘制获取起始点数据
|
||||
if (this.pathPointGraphicLayer == null) {
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
this.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}
|
||||
let _this = this;
|
||||
this.globalmap.setCursor(true)
|
||||
this.globalmap.on(mars3d.EventType.click, function (event) {
|
||||
_this.globalmap.setCursor(false)
|
||||
const cartesian = event.cartesian
|
||||
const point = mars3d.LngLatPoint.fromCartesian(cartesian)
|
||||
point.format()
|
||||
_this.location = point.lng + "," + point.lat;
|
||||
_this.drawPoint(type, point.lng, point.lat, point.z);
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = '/img/homeimg/5.png';
|
||||
this.pathPointGraphicLayer.clear();
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: '任务点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
close() {
|
||||
if (this.pathPointGraphicLayer != null) {
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.globalmap.off(mars3d.EventType.click)
|
||||
}
|
||||
this.$emit('closeTask')
|
||||
},
|
||||
onSubmit() {
|
||||
var querys = {
|
||||
content: this.content,
|
||||
lng: this.lng,
|
||||
lat: this.lat,
|
||||
}
|
||||
if(this.lng == ''){
|
||||
this.$message.warning("请选择位置");
|
||||
return;
|
||||
}
|
||||
var url = process.env.VUE_APP_BASE_API + '/FireManagement/FireClueTask'
|
||||
var _this = this
|
||||
axios({
|
||||
method: "post",
|
||||
url: url,
|
||||
data: querys,
|
||||
headers: {
|
||||
'X-Token': localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message.success(res.data.msg);
|
||||
_this.close()
|
||||
}else{
|
||||
this.$message.success(res.data.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(/img/huoqing-bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.box-container {
|
||||
width: calc(100% - 0px);
|
||||
padding: 0px 12px;
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
|
||||
.box-title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
color: #fff;
|
||||
text-indent: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
width: 210px;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #2F5D55;
|
||||
padding-top: 10px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.inputer {
|
||||
width: 84%;
|
||||
margin: 0px auto;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: none;
|
||||
border-color: #00fff0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner {
|
||||
background: none;
|
||||
border-color: #00fff0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.upload-iocn-box {
|
||||
width: 240px;
|
||||
height: 210px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-top: 25px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.upload-icon-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: #193632;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.upload-iocn-box::after {
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #00fff0;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
z-index: 1;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.upload-iocn-box::before {
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #00fff0;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
border-radius: 1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.upload-icon-bg2::after {
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #00fff0;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: -3px;
|
||||
border-radius: 1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.upload-icon-bg2::before {
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #00fff0;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
right: -3px;
|
||||
border-radius: 1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.upload-iocn-box img {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.upload-iocn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.upload-icon-text {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
margin: 16px 0px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue