From e7c6c4eecddae9515b0cd1be68335690843df3d1 Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Wed, 02 Mar 2022 15:19:23 +0800
Subject: [PATCH] +自定义标签的添加和删除

---
 src/pcviews/tool/sign.vue |  218 +++++++++++++++++++++++++++++++++---------------------
 1 files changed, 133 insertions(+), 85 deletions(-)

diff --git a/src/pcviews/tool/sign.vue b/src/pcviews/tool/sign.vue
index fa99df4..5b95913 100644
--- a/src/pcviews/tool/sign.vue
+++ b/src/pcviews/tool/sign.vue
@@ -1,109 +1,157 @@
 <template>
-    <public-box class="tool-sign">
-        <template slot="public-box-header">
-            <div class="title">
-                <img class="icon deblurring" src="/img/icon/tool-sign.png" alt />
-                <span>地图标记</span>
-            </div>
-            <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
-        </template>
-        <template slot="public-box-content">
-            <div class="list-box">
-                <ul v-show="signList.length > 0">
-                    <li v-for="(item, index) in signList" :key="index">
-                        <img src="/img/icon/sign-list.png" alt />
-                        我得标记
-                        <el-button type="danger" size="mini" icon="el-icon-delete" circle></el-button>
-                    </li>
-                </ul>
-                <div v-show="signList.length == 0" class="no-data">
-                    <img src="/img/icon/no-data.png" alt />
-                    <div>暂无数据</div>
-                </div>
-            </div>
-            <div class="btn-box">
-                <el-button type="primary" size="mini" @click.stop="addSign">新增</el-button>
-            </div>
-        </template>
-    </public-box>
+  <public-box class="tool-sign">
+    <template slot="public-box-header">
+      <div class="title">
+        <img class="icon deblurring" src="/img/icon/tool-sign.png" alt />
+        <span>地图标记</span>
+      </div>
+      <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
+    </template>
+    <template slot="public-box-content">
+      <div class="list-box">
+        <ul v-show="signList.length > 0">
+          <li v-for="(item, index) in signList" :key="index">
+            <img src="/img/icon/sign-list.png" alt />
+            {{ item.name }}
+            <el-button
+              type="danger"
+              size="mini"
+              icon="el-icon-delete"
+              circle
+              @click="deleteIcon(item.id)"
+            ></el-button>
+          </li>
+        </ul>
+        <div v-show="signList.length == 0" class="no-data">
+          <img src="/img/icon/no-data.png" alt />
+          <div>暂无数据</div>
+        </div>
+      </div>
+      <div class="btn-box">
+        <el-button type="primary" size="mini" @click.stop="addSign"
+          >新增</el-button
+        >
+      </div>
+    </template>
+  </public-box>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
+import { getlabel, deletelabel } from "@/api/pc/label";
 
 export default {
-    data () {
-        return {
-            DC: null,
-            signList: [],
-            destroyedFlag: true
+  data() {
+    return {
+      DC: null,
+      signList: [],
+      destroyedFlag: true,
+    };
+  },
+  computed: {
+    ...mapGetters(["viewer", "addSignList"]),
+  },
+  mounted() {
+    this.$store.commit("initLabelLayer", this.viewer);
+    this.getData();
+  },
+  watch: {
+    addSignList() {
+      this.getData();
+    },
+  },
+  methods: {
+    deleteIcon(id) {
+      let that = this;
+      deletelabel(id).then((res) => {
+        console.log(res);
+        if (res.data.code == 200) {
+          that.$message({
+            message: "删除标签成功",
+            type: "success",
+          });
+        } else {
+          that.$message({
+            message: "删除标签失败",
+            type: "warning",
+          });
         }
+        that.getData();
+      });
     },
-    computed: {
-        ...mapGetters(['viewer'])
+    getData() {
+      let that = this;
+      getlabel().then((res) => {
+        console.log(res);
+        const data = res.data.data.records;
+        that.signList = data;
+        // that.$store.commit("clearLabelLayerIcon");
+        that.$store.commit("addLabelLayerIcon", { list: data, clear: true });
+      });
     },
-    mounted () {
-
+    moveMessage(e, b) {
+      if (b == "") {
+        this.viewer.tooltip.enable = false;
+      } else {
+        this.viewer.tooltip.enable = true;
+        this.viewer.tooltip.showAt(e.windowPosition, b);
+      }
     },
-    methods: {
-        moveMessage (e, b) {
-            if (b == '') {
-                this.viewer.tooltip.enable = false
-            } else {
-                this.viewer.tooltip.enable = true
-                this.viewer.tooltip.showAt(e.windowPosition, b)
-            }
-        },
 
-        addSign () {
-            var that = this
-            that.DC = global.DC
+    addSign() {
+      var that = this;
+      that.DC = global.DC;
 
-            that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => that.moveMessage(e, '点击确认标注位置'))
+      that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) =>
+        that.moveMessage(e, "点击确认标注位置")
+      );
 
-            that.viewer.once(that.DC.MouseEventType.CLICK, (e) => {
-                if (that.destroyedFlag == false) return
+      that.viewer.once(that.DC.MouseEventType.CLICK, (e) => {
+        if (that.destroyedFlag == false) return;
 
-                that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => that.moveMessage(e, ''))
+        that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) =>
+          that.moveMessage(e, "")
+        );
 
-                // eslint-disable-next-line no-unused-vars
-                const popup = new this.DC.DivForms(this.viewer, {
-                    domId: 'AddTagBox',
-                    position: [that.DC.Transform.transformWGS84ToCartesian(
-                        new that.DC.Position(
-                            Number(
-                                e.wgs84SurfacePosition.lng
-                            ),
-                            Number(
-                                e.wgs84SurfacePosition.lat
-                            ),
-                            Number(
-                                e.wgs84SurfacePosition.alt
-                            )
-                        )
-                    )]
-                })
+        // eslint-disable-next-line no-unused-vars
+        const popup = new this.DC.DivForms(this.viewer, {
+          domId: "AddTagBox",
+          position: [
+            that.DC.Transform.transformWGS84ToCartesian(
+              new that.DC.Position(
+                Number(e.wgs84SurfacePosition.lng),
+                Number(e.wgs84SurfacePosition.lat),
+                Number(e.wgs84SurfacePosition.alt)
+              )
+            ),
+          ],
+        });
 
-                that.$store.commit('SET_ADDTAGPOSITION', e.wgs84SurfacePosition)
-                that.$store.commit('SET_ADDTAGPOPUP', true)
-            })
-        },
-
-        closeModel () {
-            this.$store.dispatch('delVisitedViews', this.$route)
-            this.$router.push('/pcLayout/default')
-        }
+        that.$store.commit("SET_ADDTAGPOSITION", e.wgs84SurfacePosition);
+        that.$store.commit("SET_ADDTAGPOPUP", true);
+      });
     },
-    destroyed () {
-        var that = this
-        that.destroyedFlag = false
-        that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => that.moveMessage(e, ''))
+
+    closeModel() {
+      this.$store.dispatch("delVisitedViews", this.$route);
+      this.$router.push("/pcLayout/default");
+      this.$store.commit("clearLabelLayerIcon");
+    },
+  },
+  destroyed() {
+    var that = this;
+    that.destroyedFlag = false;
+    if (that.DC) {
+      that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) =>
+        that.moveMessage(e, "")
+      );
     }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .move {
-    cursor: move;
+  cursor: move;
 }
 </style>

--
Gitblit v1.9.3