右键功能完善，socket等
commit
0535b2c7ae
|
|
@ -165,6 +165,10 @@
|
||||||
<div class="report" v-if="appTools['reportbox']">
|
<div class="report" v-if="appTools['reportbox']">
|
||||||
<reportbox @getAllReportList="getAllReportList"></reportbox>
|
<reportbox @getAllReportList="getAllReportList"></reportbox>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 任务下发 -->
|
||||||
|
<div class="task" v-if="taskDeliveryShow">
|
||||||
|
<taskDelivery @closeTask="closeTask" :globalmap="globalmap" :lng="tasklng" :lat="tasklat"></taskDelivery>
|
||||||
|
</div>
|
||||||
<!-- 脚部 -->
|
<!-- 脚部 -->
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<div class="base-layer-change-button" @click="addTileLayer('vec_d')">电子地图</div>
|
<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 HKmonitorbox from './widget/HKmonitorbox.vue'
|
||||||
import videocall from './widget/videocallbox.vue';
|
import videocall from './widget/videocallbox.vue';
|
||||||
import personnel from './widget/personnel.vue';
|
import personnel from './widget/personnel.vue';
|
||||||
|
import taskDelivery from './widget/taskDelivery.vue';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import jQuery from 'jquery';
|
import jQuery from 'jquery';
|
||||||
import { mask } from '@turf/turf';
|
import { mask } from '@turf/turf';
|
||||||
|
|
@ -226,7 +231,8 @@ export default {
|
||||||
personnel,
|
personnel,
|
||||||
videocall,
|
videocall,
|
||||||
rightclicksetting,
|
rightclicksetting,
|
||||||
socketDiaBox
|
socketDiaBox,
|
||||||
|
taskDelivery
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -281,7 +287,10 @@ export default {
|
||||||
setDatas:{},
|
setDatas:{},
|
||||||
setVisibleShow: false,
|
setVisibleShow: false,
|
||||||
videoCallShow:false,
|
videoCallShow:false,
|
||||||
socketBoxVisible: false
|
socketBoxVisible: false,
|
||||||
|
taskDeliveryShow:false,
|
||||||
|
tasklng: '',
|
||||||
|
tasklat: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -320,6 +329,9 @@ export default {
|
||||||
videoCall(){
|
videoCall(){
|
||||||
this.videoCallShow = true;
|
this.videoCallShow = true;
|
||||||
},
|
},
|
||||||
|
closeTask(){
|
||||||
|
this.taskDeliveryShow=false
|
||||||
|
},
|
||||||
mergeSuccess(){
|
mergeSuccess(){
|
||||||
this.mergeboxShow = false;
|
this.mergeboxShow = false;
|
||||||
|
|
||||||
|
|
@ -520,25 +532,27 @@ export default {
|
||||||
},
|
},
|
||||||
callback: (e) => {
|
callback: (e) => {
|
||||||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
|
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"
|
// let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + mpt._lng + "," + mpt._lat + "&extensions=base"
|
||||||
axios({
|
// axios({
|
||||||
method: 'get',
|
// method: 'get',
|
||||||
url: url,
|
// url: url,
|
||||||
}).then(res => {
|
// }).then(res => {
|
||||||
let name = res.data.regeocode.formatted_address
|
// let name = res.data.regeocode.formatted_address
|
||||||
this.setDatas = {
|
// this.setDatas = {
|
||||||
address: name,
|
// address: name,
|
||||||
lng: mpt._lng,
|
// lng: mpt._lng,
|
||||||
lat: mpt._lat,
|
// lat: mpt._lat,
|
||||||
content:''
|
// content:''
|
||||||
}
|
// }
|
||||||
this.rightType = 2
|
// this.rightType = 2
|
||||||
|
|
||||||
}).catch(err =>{
|
// }).catch(err =>{
|
||||||
console.log('ee',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;
|
top:130px;
|
||||||
left:25px;
|
left:25px;
|
||||||
}
|
}
|
||||||
|
.task{
|
||||||
|
width: 480px;
|
||||||
|
height: calc( 100vh - 600px);
|
||||||
|
position: absolute;
|
||||||
|
top: 130px;
|
||||||
|
left: 290px;
|
||||||
|
}
|
||||||
.tools-box{
|
.tools-box{
|
||||||
width:250px;
|
width:250px;
|
||||||
height:100%;
|
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