11

少年

2024-02-06 ffa44dff73d3834115dc619f2a0043ac288dd32b

 src/components/poplayer/poplayer2.vue

@@ -1,15 +1,17 @@
<template>
  <div style="z-index: 100000000">
    <div class="Poplayer">
      <div class="close" @click.stop="closehandle"></div>
      <div class="title">点位详情</div>
      <div class="content">
        <div class="con-item" v-for="(item, index) in KEY" :key="index">
          <span class="name">{{ index }}：</span>
          <span class="value">{{ state.list[item] }}</span>
  <div class="landAdmin">
    <transition name="el-zoom-in-bottom">
      <div class="Poplayer" v-if="state.show">
        <div class="close" @click.stop="closehandle"></div>
        <div class="title">点位详情</div>
        <div class="content">
          <div class="con-item" v-for="(item, index) in KEY" :key="index">
            <span class="name">{{ index }}：</span>
            <span class="value">{{ state.info[item] }}</span>
          </div>
        </div>
      </div>
    </div>
    </transition>
  </div>
</template>

@@ -17,63 +19,62 @@
import store from "@/utils/store2";
import keys from "@/utils/poiKeys";
export default {
  name: "Main",
  components: {},
  props: {
    keys: {
      type: Object,
    },
    list: {
      type: Object,
    },
  },
  data() {
    return {
      state: store.Poplayer,
      state: store.dwInfo,
      KEY: {},
    };
  },
  computed: {},
  mounted() {
    if (this.list) {
      this.state.list = this.list;
      this.state.info = this.list;
    }
    this.KEY = keys[this.state.list.POITYPE];
    this.KEY = keys[this.state.info.POITYPE];
  },
  watch: {
    "state.list": function (val) {
    "state.info": function (val) {
      console.log("state.info");
      this.KEY = keys[val.POITYPE];
    },
    "state.show": function (val) {
      console.log("state.show");
      this.showlandInfo = val;
    },
  },
  methods: {
    closehandle() {
      if (window.pickFeature && window.pickFeature.primitive) {
        window.pickFeature.primitive.image = window.imgUrl;
        window.pickFeature = null;
      }
      store.setPoplayerListAction({});
      store.setdwInfo({});
      divPoint3 && divPoint3.deleteObject();
      store.setPoplayerShowAction(false);
      store.setTdglShow(false);
      if (window.tdglLine) {
        sgworld.Creator.DeleteObject(window.tdglLine);
        window.map.removeLayer(window.tdglLine);
        window.tdglLine = null;
      }
    },
  },
};
</script>

<style scoped>
.landAdmin {
  width: 100%;
  position: absolute;
  bottom: 0px;
  align-items: center;
  /* background: white; */
  z-index: 1000;
}
.Poplayer {
  /* min-width: 350px; */
  width: 80vw;
  /* min-height: 180px; */
  min-height: 180px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("./img/bg.png");
  background-color: #0b2c3f;

  border-radius: 10px;
  z-index: 999;
  color: #fff;
  font-family: SourceHanSansSC-R;
  /* padding: 20px; */
  padding: 10px 5px 10px 5px;
  box-sizing: border-box;
@@ -118,21 +119,25 @@

.con-item {
  width: 90%;
  overflow: hidden;
  /* overflow: hidden; */
  margin-left: 5%;
  margin-bottom: 7px;
  margin-left: 25px;
  margin-right: 20px;
  word-break: break-all;
  /* margin-right: 20px; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.name {
  /* min-width: 100px; */
  float: left;
  width: 30%;
  /* float: left; */
}

.value {
  max-width: 400px;
  float: left;
  width: 70%;
  /* max-width: 400px; */
  /* float: left; */
  color: aqua;
}
</style>