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 @@ ...@@ -20,6 +20,7 @@
<script> <script>
import { EditorMap } from "@/utils/mapClass/getPath.js"; import { EditorMap } from "@/utils/mapClass/getPath.js";
import { _ } from "core-js";
export default { export default {
name: "draw-area", name: "draw-area",
props:{ props:{
...@@ -51,48 +52,16 @@ ...@@ -51,48 +52,16 @@
}, },
mounted(){ mounted(){
this.initMap(); this.initMap();
this.$nextTick(() => {
const input = this.$refs.input.$refs.input;
this.gaoMap.positionSearch(input);
});
}, },
methods:{ methods:{
//地图初始化 //地图初始化
initMap(){ initMap(){
const path = eval(this.$store.state.user.systemSetting.map_center); const path = eval(this.$store.state.user.systemSetting.map_center);
this.gaoMap = new EditorMap("drawArea", {center:path}, this); this.gaoMap = new EditorMap("drawArea", {center:path}, this);
this.initMapEvent();
if(this.value.length > 0){ if(this.value.length > 0){
this.loadArea(); this.loadArea();
}else{
this.initMouseEvent();
} }
}, 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);
// }
});
}, },
//初始化鼠标事件 //初始化鼠标事件
initMouseEvent(){ initMouseEvent(){
...@@ -103,6 +72,7 @@ ...@@ -103,6 +72,7 @@
that.mouseTool.on('draw',function(e){ that.mouseTool.on('draw',function(e){
let nowMouseTargetObj = new Object(); let nowMouseTargetObj = new Object();
nowMouseTargetObj= e.obj; nowMouseTargetObj= e.obj;
// 如果只允许画一个则用这个方法 发数据
// that.$emit("input", that.nowMouseTarget._opts.path); // that.$emit("input", that.nowMouseTarget._opts.path);
that.isClickPolygonFlag = false; that.isClickPolygonFlag = false;
if(nowMouseTargetObj._opts.path.length > 2){ if(nowMouseTargetObj._opts.path.length > 2){
...@@ -113,12 +83,11 @@ ...@@ -113,12 +83,11 @@
nowMouseTargetObj.on('click',function () { nowMouseTargetObj.on('click',function () {
that.isClickPolygonFlag = true; that.isClickPolygonFlag = true;
that.firstClick++; that.firstClick++;
if(that.firstClick < 2){ // if(that.firstClick < 2){
that.gaoMap.map.plugin(["AMap.PolygonEditor"],(n) => { that.gaoMap.map.plugin(["AMap.PolygonEditor"],(n) => {
const polygonEditor = new AMap.PolygonEditor(that.gaoMap.map,e.obj); const polygonEditor = new AMap.PolygonEditor(that.gaoMap.map,e.obj);
nowMouseTargetObj.polygonEditor = polygonEditor; nowMouseTargetObj.polygonEditor = polygonEditor;
polygonEditor.on("removenode", (e) => { polygonEditor.on("removenode", (e) => {
// that.$emit("input", e.target._opts.path);
that.isClickPolygonFlag = true; that.isClickPolygonFlag = true;
if(nowMouseTargetObj._opts.path.length == 0){ if(nowMouseTargetObj._opts.path.length == 0){
setTimeout(() => { setTimeout(() => {
...@@ -127,25 +96,23 @@ ...@@ -127,25 +96,23 @@
} }
}); });
polygonEditor.on("adjust",(e) =>{ polygonEditor.on("adjust",(e) =>{
// that.$emit("input", e.target._opts.path); that.$emit("update-path", that.drawLayers);
}) })
polygonEditor.on("addnode",(e) =>{ polygonEditor.on("addnode",(e) =>{
// that.$emit("input", e.target._opts.path); that.$emit("update-path", that.drawLayers);
}) })
polygonEditor.open(); polygonEditor.open();
}); });
} // }
}); });
nowMouseTargetObj.on("mouseout", (e) => { nowMouseTargetObj.on("mouseout", (e) => {
that.isClickPolygonFlag = false; that.isClickPolygonFlag = false;
that.mouseTool.polygon(that.opts); that.mouseTool.polygon(that.opts);
console.log("mouseout === 了。。。。。。")
}) })
// 鼠标放到了这个上面 // 鼠标放到了这个上面
nowMouseTargetObj.on("mouseover", (e) => { nowMouseTargetObj.on("mouseover", (e) => {
that.mouseTool.polygon(null); that.mouseTool && that.mouseTool.close();
console.log("mouseover === 了。。。。。。")
}) })
//右键关闭区域编辑 //右键关闭区域编辑
nowMouseTargetObj.on("rightclick",(e) => { nowMouseTargetObj.on("rightclick",(e) => {
...@@ -170,54 +137,162 @@ ...@@ -170,54 +137,162 @@
that.drawLayers.splice(deleteIndex, 1); that.drawLayers.splice(deleteIndex, 1);
} }
}).catch(() => {}); }).catch(() => {});
that.$emit("update-path", that.drawLayers);
}) })
if (nowMouseTargetObj._opts.path.length > 2) { 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.$set(that.drawLayers, that.drawLayers.length, nowMouseTargetObj);
} }
}
that.$emit("update-path", that.drawLayers);
that.mouseTool.polygon(that.opts); that.mouseTool.polygon(that.opts);
}) })
}); });
}, },
//区域回显 initMapPolygon(value) {
loadArea(){ 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({ const polygon = new AMap.Polygon({
map:this.gaoMap.map, map:that.gaoMap.map,
path: this.value, path: value,
fillColor:'#00b0ff', fillColor:'#00b0ff',
strokeColor:'#80d8ff' strokeColor:'#80d8ff',
extData: {id: that.drawLayers.length}
}); });
this.nowMouseTarget = polygon; let mouseTarget = new Object();
this.firstClick = 0; mouseTarget = polygon;
polygon.on("click",(e) =>{ that.firstClick = 0;
this.isClickPolygonFlag = true; mouseTarget.on("click",(e) =>{
this.firstClick++; that.isClickPolygonFlag = true;
if(this.firstClick < 2){ that.firstClick++;
this.gaoMap.map.plugin(["AMap.PolygonEditor"],()=> { if(that.firstClick < 2){
this.nowMouseTarget.polygonEditor = new AMap.PolygonEditor(this.gaoMap.map,e.target); that.gaoMap.map.plugin(["AMap.PolygonEditor"],()=> {
this.nowMouseTarget.polygonEditor.on("removenode", (e) => { mouseTarget.polygonEditor = new AMap.PolygonEditor(that.gaoMap.map,e.target);
this.isClickPolygonFlag = true; mouseTarget.polygonEditor.on("removenode", (e) => {
this.$emit("input", e.target._opts.path); that.isClickPolygonFlag = true;
}); });
this.nowMouseTarget.polygonEditor.on("adjust",(e) =>{ mouseTarget.polygonEditor.on("adjust",(e) =>{
this.$emit("input", e.target._opts.path); that.$emit("update-path", that.drawLayers);
}) })
this.nowMouseTarget.polygonEditor.on("addnode",(e) =>{ mouseTarget.polygonEditor.on("addnode",(e) =>{
this.$emit("input", e.target._opts.path); that.$emit("update-path", that.drawLayers);
}) })
this.nowMouseTarget.polygonEditor.open(); mouseTarget.polygonEditor.open();
}) })
} }
}); });
polygon.on("mouseout", (e) => { mouseTarget.on("mouseout", (e) => {
this.isClickPolygonFlag = false; that.isClickPolygonFlag = false;
}) })
polygon.on("rightclick",() => { mouseTarget.on("rightclick",() => {
this.firstClick = 0; that.firstClick = 0;
this.nowMouseTarget.polygonEditor && this.nowMouseTarget.polygonEditor.close(); 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) 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 @@ ...@@ -116,6 +116,21 @@
const path = eval(this.$store.state.user.systemSetting.map_center); const path = eval(this.$store.state.user.systemSetting.map_center);
const gaoMap = new EditorMap("areaInfo", {center:path}, this); const gaoMap = new EditorMap("areaInfo", {center:path}, this);
if(this.detailInfo.fGasStopArea){ 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({ new AMap.Polygon({
map: gaoMap.map, map: gaoMap.map,
path: JSON.parse(this.detailInfo.fGasStopArea), path: JSON.parse(this.detailInfo.fGasStopArea),
...@@ -123,6 +138,7 @@ ...@@ -123,6 +138,7 @@
strokeColor:'#80d8ff' strokeColor:'#80d8ff'
}); });
gaoMap.setCenter(JSON.parse(this.detailInfo.fGasStopArea)[0]); gaoMap.setCenter(JSON.parse(this.detailInfo.fGasStopArea)[0]);
}
gaoMap.map.setZoom(12) gaoMap.map.setZoom(12)
} }
} }
......
zh-baseversion-web/src/views/supplybalance/stop/index.vue
View file @ d6dbf536
...@@ -147,7 +147,7 @@ ...@@ -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-form label-position="top" ref="form" :model="form" :rules="rules" label-width="120px">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
...@@ -224,7 +224,7 @@ ...@@ -224,7 +224,7 @@
<el-col :span="12" style="padding-left: 10px"> <el-col :span="12" style="padding-left: 10px">
<el-form-item label="停气区域" prop="fGasStopArea"> <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-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -246,7 +246,9 @@ ...@@ -246,7 +246,9 @@
<script> <script>
import { listSup, getSup, delSup, addSup, updateSup, exportSup } from "@/api/supplybalance/stop"; import { listSup, getSup, delSup, addSup, updateSup, exportSup } from "@/api/supplybalance/stop";
// 如果只允许画一个，则用这个
// import DrawArea from "@/components/DrawArea"; // import DrawArea from "@/components/DrawArea";
// 如果需要画多个，则用这个
import DrawArea from "@/components/GasShutDownDrawArea" import DrawArea from "@/components/GasShutDownDrawArea"
import DetailInfo from "./components/DetailInfo"; import DetailInfo from "./components/DetailInfo";
export default { export default {
...@@ -337,14 +339,36 @@ export default { ...@@ -337,14 +339,36 @@ export default {
watch:{ watch:{
path(newVal,oldVal){ path(newVal,oldVal){
console.log("index.watch.path = " + newVal); 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 = ""; this.form.fGasStopArea = "";
return 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() { getList() {
this.loading = true; this.loading = true;
...@@ -421,7 +445,23 @@ export default { ...@@ -421,7 +445,23 @@ export default {
getSup(fGasStopId).then(response => { getSup(fGasStopId).then(response => {
this.form = response.data; this.form = response.data;
if(this.form.fGasStopArea){ 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.open = true;
this.title = "修改停气监管"; 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