206 lines
5.2 KiB
Vue
206 lines
5.2 KiB
Vue
<template>
|
||
<el-drawer
|
||
id="mapDrawer"
|
||
:title="channelName+'位置标记'"
|
||
v-model="visible"
|
||
destroy-on-close
|
||
:size="'80%'"
|
||
@closed="closeDrawer"
|
||
>
|
||
<el-form
|
||
:model="form"
|
||
label-width="80px"
|
||
style="position:absolute;top:15px;left:200px;"
|
||
>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="所在区域" prop="name">
|
||
<el-select v-model="form.area" style="width: 100%">
|
||
<el-option
|
||
v-for="item in areasList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="覆盖区域" prop="name">
|
||
<el-select v-model="form.areas" multiple style="width: 100%">
|
||
<el-option
|
||
v-for="item in areasList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<el-container v-loading="loading">
|
||
<el-main style="padding: 0 20px 20px 20px;">
|
||
<!--地图-->
|
||
<div id='mapContainer1'></div>
|
||
</el-main>
|
||
<el-footer>
|
||
<el-button
|
||
type="primary"
|
||
:loading="isSaveing"
|
||
@click="submit"
|
||
>
|
||
保存
|
||
</el-button>
|
||
<el-button @click="visible = false">取消</el-button>
|
||
</el-footer>
|
||
</el-container>
|
||
</el-drawer>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
emits: ["success", "closed"],
|
||
props: {
|
||
channelCode: {
|
||
type: String,
|
||
},
|
||
channelType: {
|
||
type: Number,
|
||
},
|
||
channelName: {
|
||
type: String,
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
visible: true,
|
||
isSaveing: false,
|
||
points:[],
|
||
areasList:[],
|
||
form:{
|
||
type:60,//设备类型
|
||
location:null,//位置信息
|
||
area:'',//所在区域
|
||
areas:[],//覆盖区域
|
||
code:'',//设备唯一标识
|
||
}
|
||
};
|
||
},
|
||
mounted() {
|
||
this.$nextTick(()=>{
|
||
this.loadMap();
|
||
})
|
||
this.getArea();
|
||
},
|
||
methods: {
|
||
loadMap(){
|
||
let that = this;
|
||
window.map = new jsmap.JSMap({
|
||
mapType: jsmap.JSMapType.MAP_3D,
|
||
container: 'mapContainer1',
|
||
mapServerURL: 'data/map',
|
||
enableShadows: false, //是否开启阴影 默认false
|
||
enableLighting: false, //是否开发光照 默认false
|
||
mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
|
||
floorControlOptions: {
|
||
floorHeight: 20,//楼层间距
|
||
position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
|
||
offset: {
|
||
x: 10,
|
||
y: 10,
|
||
}//控件偏移位置
|
||
},
|
||
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
|
||
backgroundColor: '#3798ff', //背景颜色
|
||
viewOptions: {
|
||
//屏幕中心坐标
|
||
center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
|
||
// center: {x:120,y:30,z:10},
|
||
//相机距屏幕中心点距离（单位m）
|
||
distance: 400,
|
||
// 旋转角（单位°）
|
||
rotate: 0,
|
||
//倾斜角（单位°）
|
||
tilt: 45,
|
||
}
|
||
});
|
||
window.map.openMapById('0000');
|
||
window.map.on('loadComplete', e => {
|
||
// console.log('Map loadComplete!');
|
||
var drawTool = new jsmap.JSDrawToolControl({
|
||
position: jsmap.JSControlPosition.RIGHT_TOP, //画图工具在容器中的相对位置，当前为右上
|
||
offset: {
|
||
x: 20,
|
||
y: 180
|
||
}, //偏移量
|
||
drawMode: jsmap.JSDrawMode.POINT, //画图类型POINT:画点 POLYLINE:画线 POLYGON:画面
|
||
|
||
//画图结束的回调，返回所画的点的信息
|
||
callback: (feature) => {
|
||
//console.log('add', feature);
|
||
//console.log(feature.properties);//type:POINT;id:"";name:"";floorNo:"";floorId:""
|
||
//console.log(feature.geometry);//type:POINT;coordinates:[114.63028499839209,38.81195080123784,0]
|
||
this.form.location = feature.geometry.coordinates;
|
||
},
|
||
//移除相应点的回调，返回相应点信息
|
||
removeCallback: (feature) => {
|
||
console.log('remove', feature);
|
||
},
|
||
//编辑相应点的回调，返回相应点信息
|
||
editCallback: (feature) => {
|
||
console.log('editCallback', feature);
|
||
},
|
||
//定位到相应点的回调，返回相应点信息
|
||
locateCallback: (feature) => {
|
||
console.log('locate..', feature);
|
||
}
|
||
});
|
||
window.map.addControl(drawTool);
|
||
});
|
||
},
|
||
closeDrawer() {
|
||
this.$emit('closed');
|
||
},
|
||
getArea(){
|
||
this.$API.am.area.list.req().then(res=>{
|
||
debugger;
|
||
if(res.err_msg){
|
||
this.message.error(res.err_msg)
|
||
}else{
|
||
this.areasList = res.results;
|
||
}
|
||
})
|
||
},
|
||
//表单提交方法
|
||
submit() {
|
||
let that = this;
|
||
let item = this.form.location;
|
||
//console.log(this.form.location);
|
||
that.form.code = that.channelCode;
|
||
that.form.type = that.channelType;
|
||
that.form.name = that.channelName;
|
||
that.form.location = {x:item[0],y:item[1],z:item[2]};
|
||
that.$API.am.tdevice.labelLocation.req(that.form)
|
||
.then(res => {
|
||
that.isSaveing = false;
|
||
that.visible = false;
|
||
that.$emit("success");
|
||
that.$message.success("操作成功");
|
||
return res
|
||
}).catch(err => {
|
||
that.isSaveing = false;
|
||
return err
|
||
})
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-drawer.open{
|
||
width: 70%!important;
|
||
}
|
||
</style>
|