Skip to content

Z
zh-baseversion-project
Commit d6dbf536 authored by wanghao's avatar wanghao
Browse files
Options

1 停气监管-添加停气区域后 关掉 新增修改对话框时 ，再打开时还有原来的画的图形问题排查，排查后是因为 又调用了一次 mounted 方法造成的。... 

1 停气监管-添加停气区域后 关掉 新增修改对话框时 ，再打开时还有原来的画的图形问题排查，排查后是因为 又调用了一次  mounted 方法造成的。 这个原因是因为 原代码 el-dialog 错使用 destroy-on-close ，调整后 使用 v-if  代替。
2 停气监管-添加多区域 功能完成(单击开始绘制，双击或右键停止绘制，单击图形编辑，右键退出编辑，双击图形删除，新增，查询数据回显)
parent a6bd91dd
Show whitespace changes
Inline Side-by-side
Showing with 216 additions and 85 deletions
zh-baseversion-web/src/components/GasShutDownDrawArea/index.vue
View file @ d6dbf536
......@@ -20,6 +20,7 @@
<script>
import { EditorMap } from "@/utils/mapClass/getPath.js";
import { _ } from "core-js";
export default {
name: "draw-area",
props:{
......@@ -51,48 +52,16 @@
},
mounted(){
this.initMap();
this.$nextTick(() => {
const input = this.$refs.input.$refs.input;
this.gaoMap.positionSearch(input);
});
},
methods:{
//地图初始化
initMap(){
const path = eval(this.$store.state.user.systemSetting.map_center);
this.gaoMap = new EditorMap("drawArea", {center:path}, this);
this.initMapEvent();
if(this.value.length > 0){
this.loadArea();
}else{
this.initMouseEvent();
}
},
initMapEvent(){
let that = this;
this.gaoMap.map.on("click", () => {
// if(that.nowMouseTarget && !that.isClickPolygonFlag){
// //that.$emit("input", []);
// // that.mouseTool && that.mouseTool.close();
// // that.nowMouseTarget.polygonEditor && that.nowMouseTarget.polygonEditor.close();
// //that.gaoMap.map.remove(that.nowMouseTarget);
// // that.mouseTool && that.mouseTool.polygon(that.opts);
// // if(!that.mouseTool){
// // that.initMouseEvent();
// // }
// that.isClickPolygonFlag = true;
// this.drawLayers.push('[' + that.nowMouseTarget + ']');
// // that.nowMouseTarget.setMap(this.gaoMap.map);
// this.selectedLayerIndex = this.drawLayers.length - 1; // 设置当前选中的图层索引
// console.log("this.drawLayers = " + this.drawLayers)
// that.nowMouseTarget = null;
// that.mouseTool.polygon(that.opts);
// }
// if (!that.isClickPolygonFlag) {
// that.mouseTool.polygon(that.opts);
// }
});
this.initMouseEvent();
},
//初始化鼠标事件
initMouseEvent(){
......@@ -103,6 +72,7 @@
that.mouseTool.on('draw',function(e){
let nowMouseTargetObj = new Object();
nowMouseTargetObj= e.obj;
// 如果只允许画一个则用这个方法 发数据
// that.$emit("input", that.nowMouseTarget._opts.path);
that.isClickPolygonFlag = false;
if(nowMouseTargetObj._opts.path.length > 2){
......@@ -113,12 +83,11 @@
nowMouseTargetObj.on('click',function () {
that.isClickPolygonFlag = true;
that.firstClick++;
if(that.firstClick < 2){
// if(that.firstClick < 2){
that.gaoMap.map.plugin(["AMap.PolygonEditor"],(n) => {
const polygonEditor = new AMap.PolygonEditor(that.gaoMap.map,e.obj);
nowMouseTargetObj.polygonEditor = polygonEditor;
polygonEditor.on("removenode", (e) => {
// that.$emit("input", e.target._opts.path);
that.isClickPolygonFlag = true;
if(nowMouseTargetObj._opts.path.length == 0){
setTimeout(() => {
......@@ -127,25 +96,23 @@
}
});
polygonEditor.on("adjust",(e) =>{
// that.$emit("input", e.target._opts.path);
that.$emit("update-path", that.drawLayers);
})
polygonEditor.on("addnode",(e) =>{
// that.$emit("input", e.target._opts.path);
that.$emit("update-path", that.drawLayers);
})
polygonEditor.open();
});
}
// }
});
nowMouseTargetObj.on("mouseout", (e) => {
that.isClickPolygonFlag = false;
that.mouseTool.polygon(that.opts);
console.log("mouseout === 了。。。。。。")
})
// 鼠标放到了这个上面
nowMouseTargetObj.on("mouseover", (e) => {
that.mouseTool.polygon(null);
console.log("mouseover === 了。。。。。。")
that.mouseTool && that.mouseTool.close();
})
//右键关闭区域编辑
nowMouseTargetObj.on("rightclick",(e) => {
......@@ -170,54 +137,162 @@
that.drawLayers.splice(deleteIndex, 1);
}
}).catch(() => {});
that.$emit("update-path", that.drawLayers);
})
if (nowMouseTargetObj._opts.path.length > 2) {
let haveObjNum = null;
if (that.drawLayers.length > 0) {
for (let i = 0; i < that.drawLayers.length; i++) {
let item = that.drawLayers[i];
// 是后来新添加的
if (item._opts.path) {
let optsPathItem = item._opts.path;
if (JSON.stringify(optsPathItem) === JSON.stringify(nowMouseTargetObj._opts.path)) {
haveObjNum = i;
}
// 是之前回显的数据
}
if (item.getPath()) {
let pointsItem = item.getPath();
if (JSON.stringify(pointsItem) === JSON.stringify(nowMouseTargetObj._opts.path)) {
haveObjNum = i;
}
}
}
}
if (haveObjNum == null) {
that.$set(that.drawLayers, that.drawLayers.length, nowMouseTargetObj);
}
}
that.$emit("update-path", that.drawLayers);
that.mouseTool.polygon(that.opts);
})
});
},
//区域回显
loadArea(){
initMapPolygon(value) {
let that = this;
let haveObjNum = null;
if (that.drawLayers.length > 0) {
for (let i = 0; i < that.drawLayers.length; i++) {
let item = that.drawLayers[i];
// 是后来新添加的
if (item._opts.path) {
let optsPathItem = item._opts.path;
if (JSON.stringify(optsPathItem) === JSON.stringify(value)) {
haveObjNum = i;
}
// 是之前回显的数据
}
if (item.getPath()) {
if (JSON.stringify(item.getPath()) === JSON.stringify(value)) {
haveObjNum = i;
}
}
}
}
if (haveObjNum != null) {
return;
}
const polygon = new AMap.Polygon({
map:this.gaoMap.map,
path: this.value,
map:that.gaoMap.map,
path: value,
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
strokeColor:'#80d8ff',
extData: {id: that.drawLayers.length}
});
this.nowMouseTarget = polygon;
this.firstClick = 0;
polygon.on("click",(e) =>{
this.isClickPolygonFlag = true;
this.firstClick++;
if(this.firstClick < 2){
this.gaoMap.map.plugin(["AMap.PolygonEditor"],()=> {
this.nowMouseTarget.polygonEditor = new AMap.PolygonEditor(this.gaoMap.map,e.target);
this.nowMouseTarget.polygonEditor.on("removenode", (e) => {
this.isClickPolygonFlag = true;
this.$emit("input", e.target._opts.path);
let mouseTarget = new Object();
mouseTarget = polygon;
that.firstClick = 0;
mouseTarget.on("click",(e) =>{
that.isClickPolygonFlag = true;
that.firstClick++;
if(that.firstClick < 2){
that.gaoMap.map.plugin(["AMap.PolygonEditor"],()=> {
mouseTarget.polygonEditor = new AMap.PolygonEditor(that.gaoMap.map,e.target);
mouseTarget.polygonEditor.on("removenode", (e) => {
that.isClickPolygonFlag = true;
});
this.nowMouseTarget.polygonEditor.on("adjust",(e) =>{
this.$emit("input", e.target._opts.path);
mouseTarget.polygonEditor.on("adjust",(e) =>{
that.$emit("update-path", that.drawLayers);
})
this.nowMouseTarget.polygonEditor.on("addnode",(e) =>{
this.$emit("input", e.target._opts.path);
mouseTarget.polygonEditor.on("addnode",(e) =>{
that.$emit("update-path", that.drawLayers);
})
this.nowMouseTarget.polygonEditor.open();
mouseTarget.polygonEditor.open();
})
}
});
polygon.on("mouseout", (e) => {
this.isClickPolygonFlag = false;
mouseTarget.on("mouseout", (e) => {
that.isClickPolygonFlag = false;
})
polygon.on("rightclick",() => {
this.firstClick = 0;
this.nowMouseTarget.polygonEditor && this.nowMouseTarget.polygonEditor.close();
mouseTarget.on("rightclick",() => {
that.firstClick = 0;
mouseTarget.polygonEditor && mouseTarget.polygonEditor.close();
});
this.gaoMap.setCenter(this.value[0]);
mouseTarget.on("mouseout", (e) => {
that.isClickPolygonFlag = false;
that.mouseTool.polygon(that.opts);
})
// 鼠标放到了这个上面
mouseTarget.on("mouseover", (e) => {
that.mouseTool && that.mouseTool.close();
})
// 双击删除
mouseTarget.on("dblclick",(e) => {
that.firstClick = 0;
that.$confirm("是否删除此区域", { type: "warning" })
.then(() => {
let deleteIndex = null;
for (let i = 0;i < that.drawLayers.length;i ++) {
if (that.drawLayers[i]._opts.path) {
var isPointInRing = AMap.GeometryUtil.isPointInRing(e.lnglat,that.drawLayers[i]._opts.path);
if (isPointInRing) {
deleteIndex = i;
}
}
if (that.drawLayers[i].getPath()) {
var isPointInRing = AMap.GeometryUtil.isPointInRing(e.lnglat,that.drawLayers[i].getPath());
if (isPointInRing) {
deleteIndex = i;
}
}
}
if (deleteIndex != null) {
if (that.drawLayers[deleteIndex].polygonEditor) {
that.drawLayers[deleteIndex].polygonEditor.close();
}
that.gaoMap.map.remove(that.drawLayers[deleteIndex]);
that.drawLayers.splice(deleteIndex, 1);
}
that.$emit("update-path", that.drawLayers);
}).catch(() => {});
})
if (haveObjNum === null) {
that.$set(that.drawLayers, that.drawLayers.length, mouseTarget);
}
},
//区域回显
loadArea(){
if (this.value.length > 1) {
for (let i = 0;i < this.value.length;i++) {
this.initMapPolygon(this.value[i]);
}
this.gaoMap.map.setZoom(12)
} else if(this.value.length === 1) {
this.initMapPolygon(this.value[0]);
this.gaoMap.setCenter(this.value[0][0]);
this.gaoMap.map.setZoom(12)
}
}
}
}
......
zh-baseversion-web/src/views/supplybalance/stop/components/DetailInfo.vue
View file @ d6dbf536
......@@ -116,6 +116,21 @@
const path = eval(this.$store.state.user.systemSetting.map_center);
const gaoMap = new EditorMap("areaInfo", {center:path}, this);
if(this.detailInfo.fGasStopArea){
if (this.detailInfo.fGasStopArea.includes("#")){
let areas = this.detailInfo.fGasStopArea.split("#");
for (let i = 0; i < areas.length;i++) {
let areasItem = areas[i];
if (areasItem != null && areasItem != "") {
new AMap.Polygon({
map: gaoMap.map,
path: JSON.parse(areasItem),
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
});
}
}
} else {
new AMap.Polygon({
map: gaoMap.map,
path: JSON.parse(this.detailInfo.fGasStopArea),
......@@ -123,6 +138,7 @@
strokeColor:'#80d8ff'
});
gaoMap.setCenter(JSON.parse(this.detailInfo.fGasStopArea)[0]);
}
gaoMap.map.setZoom(12)
}
}
......
zh-baseversion-web/src/views/supplybalance/stop/index.vue
View file @ d6dbf536
......@@ -147,7 +147,7 @@
/>
<!-- 添加或修改停气监管对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body destroy-on-close :close-on-click-modal="false">
<el-dialog :title="title" :visible.sync="open" v-if="open" width="1200px" append-to-body :close-on-click-modal="false">
<el-form label-position="top" ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<el-col :span="12">
......@@ -224,7 +224,7 @@
<el-col :span="12" style="padding-left: 10px">
<el-form-item label="停气区域" prop="fGasStopArea">
<DrawArea class="area-change" v-model="path"/>
<DrawArea class="area-change" v-model="path" @update-path="handleUpdatePathFromParent"/>
</el-form-item>
</el-col>
</el-row>
......@@ -246,7 +246,9 @@
<script>
import { listSup, getSup, delSup, addSup, updateSup, exportSup } from "@/api/supplybalance/stop";
// 如果只允许画一个，则用这个
// import DrawArea from "@/components/DrawArea";
// 如果需要画多个，则用这个
import DrawArea from "@/components/GasShutDownDrawArea"
import DetailInfo from "./components/DetailInfo";
export default {
......@@ -337,14 +339,36 @@ export default {
watch:{
path(newVal,oldVal){
console.log("index.watch.path = " + newVal);
if(newVal.length == 0){
// 如果只允许画一个多边形，则用这个方法接收数据
// if(newVal.length == 0){
// this.form.fGasStopArea = "";
// return
// }
// this.form.fGasStopArea = JSON.stringify(newVal);
}
},
methods: {
// 需要画多个 多边形时 需要正确使用 emit 接收 drawArea 发回来的数据
handleUpdatePathFromParent(data) {
// 如果需要画多个则，需要这样接数据
if(data.length === 0) {
this.form.fGasStopArea = "";
return
}
this.form.fGasStopArea = JSON.stringify(newVal);
this.form.fGasStopArea = "";
for(let i = 0;i < data.length;i ++) {
let newValItem = data[i];
if (newValItem._opts) {
this.form.fGasStopArea += JSON.stringify(newValItem._opts.path) + "#";
} else {
this.form.fGasStopArea += JSON.stringify(newValItem) + "#";
}
console.log("this.form.fGasStopArea = " + this.form.fGasStopArea);
}
},
methods: {
/** 查询停气监管列表 */
getList() {
this.loading = true;
......@@ -421,7 +445,23 @@ export default {
getSup(fGasStopId).then(response => {
this.form = response.data;
if(this.form.fGasStopArea){
this.path = JSON.parse(this.form.fGasStopArea);
console.log("this.from.fGasStopArea = " + this.form.fGasStopArea);
let areasArr = [];
if (this.form.fGasStopArea.includes("#")){
let areas = this.form.fGasStopArea.split("#");
for (let i = 0; i < areas.length;i++) {
console.log("i = " + i+ "item = " + areas[i]);
let areasItem = areas[i];
if (areasItem != null && areasItem != "") {
areasArr.push(JSON.parse(areasItem))
}
}
this.path = areasArr;
console.log("this.path = " + this.path);
} else{
areasArr.push( this.form.fGasStopArea);
this.path = areasArr;
}
}
this.open = true;
this.title = "修改停气监管";
......
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