|
|
@@ -1,16 +1,25 @@
|
|
|
<template>
|
|
|
<div class="comprehensive-analysis">
|
|
|
- <LawPopup class="popup-style" />
|
|
|
+ <LawPopup class="comprehensive-analysis-law-popup" />
|
|
|
+ <LabelCasePopup
|
|
|
+ class="comprehensive-analysis-label-popup"
|
|
|
+ style="left: 40%"
|
|
|
+ v-if="updateCasePopupShow"
|
|
|
+ ref="updateLabelRef"
|
|
|
+ @close="closeLabelEvent"
|
|
|
+ @save="modifyLabelEvent"
|
|
|
+ />
|
|
|
<div class="comprehensive-analysis-backbtn" @click="backEvent">
|
|
|
<div class="left-arrow"></div>
|
|
|
<div class="title">返回上级</div>
|
|
|
</div>
|
|
|
<div class="comprehensive-analysis-searchbox">
|
|
|
- <el-input placeholder="请输入地点" v-model="addressInput">
|
|
|
+ <el-input placeholder="请输入地名地址" v-model="addressInput">
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
slot="append"
|
|
|
icon="el-icon-search"
|
|
|
+ style="vertical-align: bottom"
|
|
|
></el-button>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
@@ -172,7 +181,7 @@
|
|
|
class="panel-list-item"
|
|
|
v-for="i in originalData[key]"
|
|
|
:key="i.id"
|
|
|
- @click="listItemClick('default', i)"
|
|
|
+ @click.stop="listItemClick('default', i)"
|
|
|
>
|
|
|
{{ i.name }}
|
|
|
</div>
|
|
|
@@ -183,9 +192,33 @@
|
|
|
class="panel-list-item"
|
|
|
v-for="item in rightLabelData"
|
|
|
:key="item.id"
|
|
|
- @click="listItemClick('new', item)"
|
|
|
>
|
|
|
- {{ item.name }}
|
|
|
+ <div @click="listItemClick('new', item)">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ right: 100px;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 75px;
|
|
|
+ "
|
|
|
+ ><el-button
|
|
|
+ size="normal"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="updateLabel(item)"
|
|
|
+ ></el-button
|
|
|
+ ><el-button
|
|
|
+ size="normal"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="deleteLabel(item.id)"
|
|
|
+ ></el-button
|
|
|
+ ></span>
|
|
|
</div>
|
|
|
</el-collapse-item>
|
|
|
</el-collapse>
|
|
|
@@ -202,6 +235,7 @@ import Legend from "@/components/map/Legend.vue";
|
|
|
import publicFun from "@/utils/publicFunction.js";
|
|
|
import { treeModel, defaultLayers } from "@/config/common";
|
|
|
import AttributePopup from "@/components/popup/AttributePopup.vue";
|
|
|
+import LabelCasePopup from "@/components/popup/LabelCasePopup.vue";
|
|
|
import LawPopup from "@/components/popup/LawPopup.vue";
|
|
|
import { get } from "@/utils/request";
|
|
|
import { nextTick } from "vue";
|
|
|
@@ -212,52 +246,27 @@ export default {
|
|
|
Legend,
|
|
|
AttributePopup,
|
|
|
LawPopup,
|
|
|
+ LabelCasePopup,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
addressInput: "",
|
|
|
legendShow: false,
|
|
|
+ // 修改标记弹窗
|
|
|
+ updateCasePopupShow: false,
|
|
|
+ // 属性信息弹窗
|
|
|
+ attrTableShow: false,
|
|
|
tableType: "normal",
|
|
|
tableData: [],
|
|
|
legendHeight: "0",
|
|
|
boxWidth: "600",
|
|
|
boxHeight: "600",
|
|
|
- attrTableShow: false,
|
|
|
+
|
|
|
activeNames: ["myLabel"],
|
|
|
rightPanelTitle: "",
|
|
|
rightPanelDataMap: new Map(),
|
|
|
originalData: {},
|
|
|
- rightLabelData: [
|
|
|
- // {
|
|
|
- // id: publicFun.buildGuid(),
|
|
|
- // name: "疑点1",
|
|
|
- // },
|
|
|
- // {
|
|
|
- // id: publicFun.buildGuid(),
|
|
|
- // name: "疑点2",
|
|
|
- // },
|
|
|
- // {
|
|
|
- // id: publicFun.buildGuid(),
|
|
|
- // name: "疑点3",
|
|
|
- // },
|
|
|
- // {
|
|
|
- // id: publicFun.buildGuid(),
|
|
|
- // name: "疑点4",
|
|
|
- // },
|
|
|
- // {
|
|
|
- // id: publicFun.buildGuid(),
|
|
|
- // name: "疑点5",
|
|
|
- // },
|
|
|
- // {
|
|
|
- // id: publicFun.buildGuid(),
|
|
|
- // name: "疑点6",
|
|
|
- // },
|
|
|
- // {
|
|
|
- // id: publicFun.buildGuid(),
|
|
|
- // name: "疑点7",
|
|
|
- // },
|
|
|
- ],
|
|
|
- // searchInput: "",,
|
|
|
+ rightLabelData: [],
|
|
|
showLeftBox: true,
|
|
|
showRightBox: true,
|
|
|
leftBoxBtn: false,
|
|
|
@@ -300,9 +309,6 @@ export default {
|
|
|
console.log(val, "678");
|
|
|
// 设置默认勾选项
|
|
|
this.$refs.tree.setCheckedKeys([treeIdMap.get(val)]);
|
|
|
- // this.$store.state.mapMethodsCollection
|
|
|
- // .get("RENDER")
|
|
|
- // .setView(coordinates, 16);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
@@ -344,18 +350,10 @@ export default {
|
|
|
},
|
|
|
deep: true,
|
|
|
},
|
|
|
- // getMyPoints:{
|
|
|
- // handler(val){
|
|
|
- // console.log(getMyPoints,"myPoints");
|
|
|
- // },
|
|
|
- // deep:true,
|
|
|
- // immediate:true
|
|
|
- // }
|
|
|
getMyLabelData: {
|
|
|
handler(val) {
|
|
|
- // console.log(val, "获取我的疑点数组");
|
|
|
+ this.rightLabelData = [];
|
|
|
if (val.length > 0) {
|
|
|
- console.log("获取的我的疑点数据", val);
|
|
|
this.rightLabelData = val.map((v, i) => {
|
|
|
let data = JSON.parse(v.geojson);
|
|
|
return {
|
|
|
@@ -364,12 +362,14 @@ export default {
|
|
|
coord: data.geometry.coordinates[0][0],
|
|
|
type: data.properties.title,
|
|
|
des: data.properties.desc,
|
|
|
+ geojson: v.geojson,
|
|
|
};
|
|
|
});
|
|
|
+ console.log(this.rightLabelData, "rightLabelData");
|
|
|
}
|
|
|
},
|
|
|
deep: true,
|
|
|
- immediate: true,
|
|
|
+ // immediate: true,
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
@@ -436,7 +436,8 @@ export default {
|
|
|
pageSize: 10,
|
|
|
};
|
|
|
this.$Post(this.urlsCollection.selectByUser, paramData).then((res) => {
|
|
|
- if (res.code === 200 && res.content.length > 0) {
|
|
|
+ if (res.code === 200 && res.content.length >= 1) {
|
|
|
+ console.log(res);
|
|
|
this.$store.state.myLabelPointsArr = [];
|
|
|
this.$store.state.myLabelPointsArr = res.content.map((v) => {
|
|
|
return {
|
|
|
@@ -446,6 +447,11 @@ export default {
|
|
|
};
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+ // res.content 返回数据为空
|
|
|
+ if (res.code === 205) {
|
|
|
+ this.$store.state.myLabelPointsArr = [];
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
@@ -546,9 +552,6 @@ export default {
|
|
|
let firstPolygon = JSON.parse(JSON.stringify(geoJson[0]));
|
|
|
let coordinates = firstPolygon.geometry.coordinates[0][0][0];
|
|
|
this.treeCoordMap.set(data.label, coordinates);
|
|
|
- // this.$store.state.mapMethodsCollection
|
|
|
- // .get("RENDER")
|
|
|
- // .setView(coordinates, 16);
|
|
|
|
|
|
this.$store.state.mapMethodsCollection
|
|
|
.get("RENDER")
|
|
|
@@ -592,11 +595,12 @@ export default {
|
|
|
};
|
|
|
});
|
|
|
},
|
|
|
+ // 右侧面板项点击事件
|
|
|
listItemClick(type, data) {
|
|
|
- // data
|
|
|
- // id: "default_1669007689253APblgwSrDZlV1kSFim";
|
|
|
- // name: "疑点1";
|
|
|
+ this.$store.state.bottomMenuIndexs.index = -1;
|
|
|
+ this.$store.state.bottomMenuIndexs.subIndex = -1;
|
|
|
this.attrTableShow = true;
|
|
|
+ this.updateCasePopupShow = false;
|
|
|
this.tableData = [];
|
|
|
if (type === "default") {
|
|
|
let coord = data.geometry.coordinates[0][0][0];
|
|
|
@@ -625,24 +629,109 @@ export default {
|
|
|
type: data.type,
|
|
|
des: data.des,
|
|
|
});
|
|
|
- console.log(data, "myLabelTable");
|
|
|
+ this.$bus.$emit("listItemClick", data);
|
|
|
}
|
|
|
},
|
|
|
closeEvent() {
|
|
|
this.attrTableShow = false;
|
|
|
},
|
|
|
+ // 关闭修改标记弹窗
|
|
|
+ closeLabelEvent() {
|
|
|
+ this.updateCasePopupShow = false;
|
|
|
+ },
|
|
|
+ modifyLabelEvent() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let selectType = this.$refs.updateLabelRef.selectVal;
|
|
|
+ let desContent = this.$refs.updateLabelRef.textContent;
|
|
|
+ let id = this.$refs.updateLabelRef.id;
|
|
|
+ let params = new FormData();
|
|
|
+ let geojson = JSON.parse(this.$refs.updateLabelRef.geojson);
|
|
|
+ let geometryType = geojson.properties.featureTypeIndex;
|
|
|
+ // 修改标题和描述
|
|
|
+ geojson.properties.title = selectType;
|
|
|
+ geojson.properties.desc = desContent;
|
|
|
+ console.log(geojson, "修改后的geojson数据");
|
|
|
+ params = {
|
|
|
+ userId: Number(localStorage.getItem("USER_ID")),
|
|
|
+ sourceId: 0,
|
|
|
+ type: geometryType,
|
|
|
+ geojson: JSON.stringify(geojson),
|
|
|
+ id: id,
|
|
|
+ };
|
|
|
+ this.$Post(this.urlsCollection.updateConllection, params).then(
|
|
|
+ (res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ console.log("修改成功", res);
|
|
|
+ this.updateCasePopupShow = false;
|
|
|
+ this.getUserMarkers();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (error) => {
|
|
|
+ this.$message.error("保存失败");
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 修改标记 -- 仅支持修改类型和描述
|
|
|
+ updateLabel(val) {
|
|
|
+ console.log("修改标记", val);
|
|
|
+ this.$store.state.bottomMenuIndexs.index = -1;
|
|
|
+ this.$store.state.bottomMenuIndexs.subIndex = -1;
|
|
|
+ this.updateCasePopupShow = true;
|
|
|
+ this.attrTableShow = false;
|
|
|
+ this.this.$nextTick(() => {
|
|
|
+ console.log(this.$refs.updateLabelRef, "updateLabelRef");
|
|
|
+ this.$refs.updateLabelRef.selectVal = val.type;
|
|
|
+ this.$refs.updateLabelRef.textContent = val.des;
|
|
|
+ this.$refs.updateLabelRef.id = val.id;
|
|
|
+ this.$refs.updateLabelRef.geojson = val.geojson;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 删除标记
|
|
|
+ deleteLabel(id) {
|
|
|
+ if (localStorage.getItem("USER_ID")) {
|
|
|
+ console.log("删除标记");
|
|
|
+ let params = new FormData();
|
|
|
+ params = {
|
|
|
+ userId: Number(localStorage.getItem("USER_ID")),
|
|
|
+ sourceId: 0,
|
|
|
+ id: id,
|
|
|
+ };
|
|
|
+ this.$Post(this.urlsCollection.deleteConllection, params).then(
|
|
|
+ (res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ console.log("疑点删除成功");
|
|
|
+ this.getUserMarkers();
|
|
|
+ // this.rightLabelData.forEach((v, i) => {
|
|
|
+ // if (v.id === id) {
|
|
|
+ // this.rightLabelData.splice(i, 1);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
@commonBorderColor: rgb(0, 170, 255);
|
|
|
.comprehensive-analysis {
|
|
|
- .popup-style {
|
|
|
+ &-law-popup {
|
|
|
position: absolute;
|
|
|
top: 15%;
|
|
|
left: 33%;
|
|
|
- // pointer-events: auto;
|
|
|
- z-index: 2;
|
|
|
+ pointer-events: auto;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ &-label-popup {
|
|
|
+ position: absolute;
|
|
|
+ top: 15%;
|
|
|
+ left: 35%;
|
|
|
+ pointer-events: auto;
|
|
|
+ z-index: 99;
|
|
|
}
|
|
|
.el-checkbox {
|
|
|
color: #fff;
|
|
|
@@ -690,6 +779,18 @@ export default {
|
|
|
left: 21%;
|
|
|
top: 30px;
|
|
|
pointer-events: auto;
|
|
|
+ /deep/.el-input-group__append,
|
|
|
+ .el-input-group__prepend {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #fff;
|
|
|
+ border-left: none;
|
|
|
+ // border: none;
|
|
|
+ // border-radius: 1px;
|
|
|
+ }
|
|
|
+ /deep/.el-input-group--append .el-input__inner,
|
|
|
+ .el-input-group__prepend {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
&-backbtn {
|
|
|
@@ -978,6 +1079,7 @@ export default {
|
|
|
content: "";
|
|
|
}
|
|
|
.panel-list-item {
|
|
|
+ position: relative;
|
|
|
margin: 0 auto;
|
|
|
width: 80%;
|
|
|
height: auto;
|
Bella