Skip to content

G
gassafety
Commit 09746a7f authored by 耿迪迪's avatar 耿迪迪
Browse files
Options

地图新增 gengdidi

parent 42a05d40
Hide whitespace changes
Inline Side-by-side
Showing with 198 additions and 66 deletions
gassafety-web/src/components/PopWindow/regulatorBoxOrValveWell.vue 0 → 100644
View file @ 09746a7f
<template>
<el-dialog
title="新增"
:visible.sync="dialogVisible"
width="80%"
:before-close="handleClose">
<el-form ref="editForm" :model="editForm" label-width="120px" size="mini">
<el-form-item label="所属燃气公司" prop="a">
<el-input></el-input>
</el-form-item>
<el-form-item label="名称" prop="b">
<el-input ></el-input>
</el-form-item>
<el-form-item label="地址" prop="c">
<el-input></el-input>
</el-form-item>
<el-form-item label="联系人" prop="d">
<el-input></el-input>
</el-form-item>
<el-form-item label="电话" prop="e">
<el-input></el-input>
</el-form-item>
<el-form-item label="型号" prop="f">
<el-input></el-input>
</el-form-item>
<el-form-item label="安装日期" prop="g">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="最后巡检日期" prop="k">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="备注信息" prop="l">
<el-input type="textarea"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
title: { type: String },
//message: { type: String },
//duration: { type: Number, default: 2000 }
},
data () {
return {
// isShow: false,
editForm : {},
dialogVisible : false
}
},
methods: {
show () {
//this.isShow = true;
this.dialogVisible = true;
/*setTimeout(() => {
this.hide()
}, this.duration)*/
},
hide () {
this.isShow = false
this.remove()
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
}
</script>
<style lang="scss">
.notice {
background: white;
position: fixed;
top: 102px;
right: 0;
left: 0;
margin: auto;
width: 80%;
height: 80%;
border: solid 1px;
}
</style>
gassafety-web/src/utils/createPop.js 0 → 100644
View file @ 09746a7f
import Vue from 'vue'
export default function create (comp, props) {
const app = new Vue({
render (h) {
return h(comp, { props })
}
}).$mount()
// app.$el为该虚拟DOM的真实DOM
document.body.appendChild(app.$el)
// 销毁
const com = app.$children[0]
com.remove = function () {
document.body.removeChild(app.$el)
app.$destroy()
}
return com
}
gassafety-web/src/utils/gaodeMap.js
View file @ 09746a7f
let defaultCenter = "石家庄";
import createPop from "./createPop";
import regulatorBoxOrValveWell from "../components/PopWindow/regulatorBoxOrValveWell.vue"
let defaultCenter = "石家庄";
export let map;
class gaodeMap {
//构造函数中设置中央点默认值
......@@ -98,6 +100,7 @@ class gaodeMap {
marker.on('mouseout', infoClose);
marker.on('click', newMAp);
marker.on('dragend', moveMarker);
}
map.setFitView();
......@@ -118,6 +121,10 @@ class gaodeMap {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
function moveMarker(e) {
alert(e.lnglat);
}
}
/**
......@@ -161,71 +168,43 @@ class gaodeMap {
* 添加鼠标事件
*/
addMouseTool(){
let mouseTool = new AMap.MouseTool(map);
this.mouseTool = new AMap.MouseTool(map);
//监听draw事件可获取画好的覆盖物
let overlays = [];
mouseTool.on('draw',function(e){
overlays.push(e.obj);
this.overlays = [];
let that = this;
this.mouseTool.on('draw',function(e){
e.obj.on("click",function (aa) {
console.log(aa.target._position)
that.openInfowindow();
})
that.overlays.push(e.obj);
that.mouseTool.close();
});
}
function draw(type){
switch(type){
case 'marker':{
mouseTool.marker({
//同Marker的Option设置
});
break;
}
case 'polyline':{
mouseTool.polyline({
strokeWeight: 9,
strokeColor:'#80d8ff'
//同Polyline的Option设置
});
break;
}
case 'polygon':{
mouseTool.polygon({
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
//同Polygon的Option设置
});
break;
}
case 'rectangle':{
mouseTool.rectangle({
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
//同Polygon的Option设置
});
break;
}
case 'circle':{
mouseTool.circle({
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
//同Circle的Option设置
});
break;
}
}
}
openInfowindow(){
const notice = createPop(regulatorBoxOrValveWell, {
title: '调压箱'
})
notice.show()
}
let radios = document.getElementsByName('func');
for(let i=0;i<radios.length;i+=1){
radios[i].onchange = function(e){
draw(e.target.value)
draw(type){
let that = this;
switch(type){
case 'marker':{
that.mouseTool.marker({
draggable: true
});
break;
}
}
draw('marker');
document.getElementById('clear').onclick = function(){
map.remove(overlays)
overlays = [];
}
document.getElementById('close').onclick = function(){
mouseTool.close(true)//关闭，并清除覆盖物
for(let i=0;i<radios.length;i+=1){
radios[i].checked = false;
case 'polyline':{
that.mouseTool.polyline({
strokeWeight: 9,
strokeColor:'#80d8ff'
//同Polyline的Option设置
});
break;
}
}
}
......@@ -260,5 +239,6 @@ class gaodeMap {
}
export default gaodeMap;
gassafety-web/src/views/enterprise/map/index.vue
View file @ 09746a7f
<template>
<div>
<div style="width: 100vw;height: 100vh" id="container"></div>
<div class="input-card" style='width: 24rem;'>
<!-- <div class="input-card" style='width: 24rem;'>
<div class="input-item">
<input type="radio" name='func' checked="" value='marker'><span class="input-text">画点</span>
<input type="radio" name='func' value='marker'><span class="input-text">画点</span>
<input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>
<input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span>
</div>
......@@ -15,7 +15,19 @@
<input id="clear" type="button" class="btn" value="清除" />
<input id="close" type="button" class="btn" value="关闭绘图" />
</div>
</div>
</div>-->
<el-button type="primary" style="position: absolute;top: 100px;left: 75%" @click="addDevice">新增</el-button>
<el-button type="primary" style="position: absolute;top: 100px;left: 82%" @click="editDevice">编辑</el-button>
<el-button type="primary" style="position: absolute;top: 100px;left: 90%" @click="deleteDevice">删除</el-button>
<el-select v-model="value" placeholder="请选择..." @change="selectDeviceType" style="position: absolute;top: 150px;left: 75%" v-if="deviceType">
<el-option label="管道" value="1"></el-option>
<el-option label="调压箱" value="2"></el-option>
<el-option label="阀门井" value="3"></el-option>
<el-option label="流量计" value="4"></el-option>
<el-option label="物联网燃气表" value="5"></el-option>
<el-option label="值班人员" value="6"></el-option>
</el-select>
</div>
</template>
<script>
......@@ -24,11 +36,15 @@
export default {
data() {
return {
map : null
gaoMap : null,
deviceType : false,
value : "",
operateType : ""
};
},
mounted() {
let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap;
let lnglats = [
[114.497949,38.121129],
[114.595972,38.114511],
......@@ -53,7 +69,27 @@
]
gaoMap.addPolyline(path);
gaoMap.addMouseTool();
gaoMap.addMapControl();
},
methods:{
addDevice(){
this.deviceType = true;
this.operationType = "add";
},
editDevice(){
this.deviceType = true;
this.operationType = "edit";
},
deleteDevice(){
this.deviceType = true;
this.operationType = "delete";
},
selectDeviceType(val){
if("add" == this.operationType){
this.gaoMap.draw("marker")
}
this.deviceType = false;
this.value = "";
}
}
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment