月球大数据地理空间分析展示平台-【前端】-月球2期前端
WX
2023-09-08 deaf4ddeccc554ce782213ebda24923158c23c5a
src/views/plotting/plotting.vue
@@ -1,14 +1,8 @@
<template>
  <div
    v-drag
    class="plottingBox"
  >
  <div v-drag class="plottingBox">
    <div class="plottingTitle">
      <div class="tileLeft">
        <div
          class="titleImg"
          @click="setCloseplotting"
        >
        <div class="titleImg" @click="setCloseplotting">
          <ArrowLeft />
        </div>
        <div class="titleLable">标绘查询</div>
@@ -18,18 +12,9 @@
      <div class="plotting_content_btn">
        <span class="plotting_content_title">标绘工具</span>
        <div class="plotting_btn">
          <div
            class="btn_box_d btn_box"
            @click="setMenuDraw('point')"
          ></div>
          <div
            class="btn_box_x btn_box"
            @click="setMenuDraw('polyline')"
          ></div>
          <div
            class="btn_box_m btn_box"
            @click="setMenuDraw('polygon')"
          ></div>
          <div class="btn_box_d btn_box" @click="setMenuDraw('point')"></div>
          <div class="btn_box_x btn_box" @click="setMenuDraw('polyline')"></div>
          <div class="btn_box_m btn_box" @click="setMenuDraw('polygon')"></div>
        </div>
      </div>
      <div class="plotting_list">
@@ -37,6 +22,7 @@
          class="plotting_list_tr"
          v-for="(item, i) in list"
          :key="i"
          @click.stop="resultShow(item)"
        >
          <div class="plotting_list_tr_name">
            <img
@@ -46,14 +32,8 @@
            /><span>{{ item.name }}</span>
          </div>
          <div class="plotting_list_tr_btn">
            <div
              class="tr_btn dw"
              @click="setLayerLocation(item)"
            ></div>
            <div
              class="tr_btn sc"
              @click="setLayerRemove(item)"
            ></div>
            <div class="tr_btn dw" @click.stop="setLayerLocation(item)"></div>
            <div class="tr_btn sc" @click.stop="setLayerRemove(item)"></div>
          </div>
        </div>
      </div>
@@ -70,8 +50,11 @@
  reactive,
  defineProps,
  defineEmits,
  watch,
} from "vue";
import { useStore } from "vuex"; // 引入useStore 方法
const emits = defineEmits(["setCloseplotting"]);
const store = useStore(); // 该方法用于返回store 实例
let list = ref([]);
const drawFlag = ref(null);
const plotNum = ref({
@@ -98,6 +81,12 @@
    if (entities[i].name == res.name) {
      Viewer.entities.remove(entities[i]);
      list.value.splice(i, 1);
      let obj = {
        isshow: false,
        entitiesData: {},
        getData: {},
      };
      store.state.plottingInquireData = obj;
      break;
    }
  }
@@ -217,6 +206,34 @@
const setCloseplotting = () => {
  emits("setCloseplotting", false);
};
const resultShow = (res) => {
  console.log(res);
  let obj = {
    isshow: true,
    entitiesData: res,
    getData: {},
  };
  // store.commit("SET_plotting", obj);
  store.state.plottingInquireData = obj;
};
watch(
  () => store.state.plottingInquireData,
  (nVal, oVal) => {
    if (nVal.isshow == false) {
      //列表删除联动
      if (nVal.entitiesData != {} && nVal.entitiesData.name) {
        for (var i in list.value) {
          if (list.value[i].name == nVal.entitiesData.name) {
            console.log(list.value[i].name);
            list.value.splice(i, 1);
            break;
          }
        }
      }
    }
  },
  { deep: true }
);
</script>
<style lang="less" scoped>
@@ -322,6 +339,7 @@
      align-items: center;
      justify-content: space-between;
      padding: 0 25px;
      cursor: pointer;
      .plotting_list_tr_name {
        display: flex;
        align-items: center;