shuishen
2022-03-18 bf58722dfd03ea1513f3acc7331d4d4403fca76e
src/components/map/components/mapPopup.vue
@@ -66,7 +66,7 @@
                          <i class="popup-icon start-nav deblurring"></i>
                          出发
                        </li>
                        <li v-show="false" @click="qrCodeClick">
                        <li v-show="pupupQRUrl != ''" @click="qrCodeClick">
                          <i class="popup-icon qr-code-nav deblurring"></i>
                          二维码
                        </li>
@@ -166,6 +166,12 @@
                id="FullScreenBox"
              >
                <div class="title">
                  <img
                    @click="returnDetailsPopup"
                    class="return-btn"
                    src="/img/icon/return.png"
                    alt
                  />
                  {{ stateName }}
                  <img
                    @click="screen"
@@ -200,6 +206,12 @@
            <div class="monitor-wrap">
              <div class="content-wrap">
                <div class="title">
                  <img
                    @click="returnDetailsPopup"
                    class="return-btn"
                    src="/img/icon/return.png"
                    alt
                  />
                  {{ stateName }}
                  <img
                    @click="closeMonitorPopupBox"
@@ -275,7 +287,7 @@
                <div class="arrow-rb"></div>
                <div class="label-wrap">
                  <div class="title">
                    {{ nowlabelLayerData.name }} &nbsp; 二维码分享
                    {{ nowlabelLayerData.name }}
                    <img
                      @click="closelabelLayerid"
                      class="close-box"
@@ -287,9 +299,9 @@
                    <!-- data:image/png;base64, -->
                    <img
                      :src="nowlabelLayerData.qrcode"
                      alt=""
                      alt
                      class="labelLayeridewm"
                      style="width:250px,height:250px"
                      style="width: 250px; height: 250px"
                    />
                  </div>
                </div>
@@ -301,114 +313,115 @@
          </div>
        </div>
      </div>
      <!-- 新增编辑标签 -->
      <div v-if="addIconsLayerIconPopup" class="monitor-dom" id="leftNavsAdd">
        <div style="width: 100%; height: 100%">
          <div class="divForms divForms-theme">
            <div class="divForms-wrap">
              <div class="area">
                <div class="arrow-lt"></div>
                <div class="b-t"></div>
                <div class="b-r"></div>
                <div class="b-b"></div>
                <div class="b-l"></div>
                <div class="arrow-rb"></div>
                <div class="label-wrap">
                  <div class="title">
                    <el-input
                      v-model="addIconFromcolumn[0].value"
                      placeholder="请输入标签名称"
                      class="addIconFromInput"
                    >
                      <template slot="prepend">标题:</template
                      ><i
                        slot="suffix"
                        class="el-icon-edit el-input__icon addIconFromInputicon"
                      ></i>
                    </el-input>
                    <img
                      @click="closeaddIconsLayerIconPopup"
                      class="close-box"
                      src="/img/navicon/close.png"
                      alt
                    />
                  </div>
                  <div class="add-tag-content">
                    <div class="addIconsLayer">
                      <div
                        :class="[
                          'addIconsLayerinimgs',
                          ourImages.length > 3 ? 'isOverImgs' : '',
                        ]"
                      >
                        <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
                        <el-upload
                          :action="
                            apiUrls +
                            '/blade-resource/oss/endpoint/put-files-talk'
                          "
                          list-type="picture-card"
                          :on-preview="handlePictureCardPreview"
                          :on-remove="handleRemove"
                          :on-success="onsuccess"
                        >
                          <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog
                          :visible.sync="dialogVisible"
                          :modal-append-to-body="false"
                          :append-to-body="true"
                        >
                          <img width="100%" :src="dialogImageUrl" alt="" />
                        </el-dialog>
                      </div>
                      <div
                        class="addIconsLayerin"
                        v-for="(item, index) in addIconFromcolumn"
                        :key="index"
                        v-show="index != 0"
                      >
                        <el-input
                          v-model="item.value"
                          :placeholder="'请输入' + item.label"
                          class="addIconFromInput"
                          :disabled="index == 2 || index == 3"
                        >
                          <template slot="prepend">{{ item.label }}:</template>
                        </el-input>
    </div>
                        <el-dropdown
                          v-show="index == 2 || index == 3"
                          @command="chouseAddicon"
                        >
                          <span class="el-dropdown-link">
                            <i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                              v-for="(itemc, indexc) in item.chouse"
                              :key="indexc"
                              :command="{ index: index, indexc: indexc }"
                              >{{ itemc.value }}</el-dropdown-item
                            >
                            <!-- @click="chouseAddicon(index, indexc)" -->
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                    </div>
                    <div class="addIconsLayerBut">
                      <el-button type="primary" @click="saveIconsLayer"
                        >保存标签</el-button
    <!-- 新增编辑标签 -->
    <div
      v-if="addIconsLayerIconPopup"
      class="monitor-dom add-sign-box-style"
      id="leftNavsAdd"
    >
      <div style="width: 100%; height: 100%">
        <div class="divForms divForms-theme">
          <div class="divForms-wrap">
            <div class="area">
              <div class="arrow-lt"></div>
              <div class="b-t"></div>
              <div class="b-r"></div>
              <div class="b-b"></div>
              <div class="b-l"></div>
              <div class="arrow-rb"></div>
              <div class="label-wrap">
                <div class="title">
                  <el-input
                    v-model="addIconFromcolumn[0].value"
                    placeholder="请输入标签名称"
                    class="addIconFromInput"
                  >
                    <template slot="prepend">标题:</template>
                  </el-input>
                  <img
                    @click="closeaddIconsLayerIconPopup"
                    class="close-box"
                    src="/img/navicon/close.png"
                    alt
                  />
                </div>
                <div class="add-tag-content">
                  <div class="addIconsLayer">
                    <div
                      :class="[
                        'addIconsLayerinimgs',
                        ourImages.length > 3 ? 'isOverImgs' : '',
                      ]"
                    >
                      <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
                      <el-upload
                        :action="
                          apiUrls +
                          '/blade-resource/oss/endpoint/put-files-talk'
                        "
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-success="onsuccess"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog
                        :visible.sync="dialogVisible"
                        :modal-append-to-body="false"
                        :append-to-body="true"
                      >
                        <img width="100%" :src="dialogImageUrl" alt />
                      </el-dialog>
                    </div>
                    <div
                      class="addIconsLayerin"
                      v-for="(item, index) in addIconFromcolumn"
                      :key="index"
                      v-show="index != 0"
                    >
                      <el-input
                        v-model="item.value"
                        :placeholder="'请输入' + item.label"
                        class="addIconFromInput"
                        :disabled="index == 2 || index == 3"
                      >
                        <template slot="prepend">{{ item.label }}:</template>
                      </el-input>
                      <el-dropdown
                        v-show="index == 2 || index == 3"
                        @command="chouseAddicon"
                      >
                        <span class="el-dropdown-link">
                          <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item
                            v-for="(itemc, indexc) in item.chouse"
                            :key="indexc"
                            :command="{ index: index, indexc: indexc }"
                            >{{ itemc.value }}</el-dropdown-item
                          >
                          <!-- @click="chouseAddicon(index, indexc)" -->
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </div>
                  <div class="addIconsLayerBut">
                    <el-button type="primary" @click="saveIconsLayer"
                      >保存标签</el-button
                    >
                  </div>
                </div>
              </div>
              <div class="b-t-l"></div>
              <div class="b-b-r"></div>
            </div>
            <div class="arrow"></div>
            <div class="b-t-l"></div>
            <div class="b-b-r"></div>
          </div>
          <div class="arrow"></div>
        </div>
      </div>
    </div>
@@ -465,21 +478,15 @@
import { setlabel } from "@/api/pc/label";
import { add } from "@/api/pc/leftNav/index";
import leftNavsAdd from "./mapPopupOther/leftNavsAdd.vue";
export default {
  name: "mapPopup",
  components: {
    leftNavsAdd,
  },
  data() {
    let apiUrls = window.$apiUrls;
    return {
      ourImages: [],
      dialogImageUrl: "",
      dialogVisible: false,
      apiUrls: $apiUrls,
      DC: null,
      apiUrls: null,
      tabBtnFlag: "教学科研行政",
      QRCodeFlag: false,
      audioSource: "",
@@ -490,9 +497,8 @@
      fullscreen: false,
      fullScreenUrl: "/img/icon/bigScreen.png",
      addTagName: "",
      addTagLayer: null,
      addIconFromcolumn: [
        //顺序不要随便换
        // 顺序不要随便换
        {
          label: "名称",
          prop: "mechanismname",
@@ -701,7 +707,6 @@
  },
  computed: {
    ...mapGetters([
      "viewer",
      "popupBgUrl",
      "pupupQRUrl",
      // 终点
@@ -738,15 +743,15 @@
      "campusNavFlag",
      "addTagPopup",
      "addTagPosition",
      //自定义标签弹窗
      // 自定义标签弹窗
      "labelLayerDataShow",
      "nowlabelLayerData",
      "addIconsLayerIconPopup", //自定义标签编辑窗口
      "addIconsLayerIconPosition", //自定义标签坐标
      "addIconsLayerIconPopup", // 自定义标签编辑窗口
      "addIconsLayerIconPosition", // 自定义标签坐标
    ]),
  },
  created() {
    this.DC = global.DC;
    this.apiUrls = window.$apiUrls;
    this.audioSynth = window.speechSynthesis;
    this.audioMsg = new window.SpeechSynthesisUtterance();
@@ -757,14 +762,16 @@
      this.audioCourse = false;
    };
  },
  mounted() {},
  mounted() {
    global.viewer.scene.globe.depthTestAgainstTerrain = false;
  },
  watch: {
    addIconsLayerIconPopup() {
      if (this.addIconsLayerIconPopup) {
        this.addIconFromcolumn[9].value = this.addIconsLayerIconPosition[0];
        this.addIconFromcolumn[10].value = this.addIconsLayerIconPosition[1];
      } else {
        for (let k in this.addIconFromcolumn) {
        for (const k in this.addIconFromcolumn) {
          if (k == 2) {
            this.addIconFromcolumn[k].value = "红旗校区";
            this.addIconFromcolumn[k].valueid = "1";
@@ -778,7 +785,7 @@
          this.addIconFromcolumn[k].value = "";
        }
        this.ourImages = [];
        this.$store.commit("set_closeMapClick", false); //开启其他操作
        this.$store.commit("set_closeMapClick", false); // 开启其他操作
      }
    },
    addTagPopup() {
@@ -858,7 +865,7 @@
      for (var k in this.ourImages) {
        imgs.push(this.ourImages[k].response);
      }
      let d = {
      const d = {
        tpurl: imgs.join(","),
        mechanismname: this.addIconFromcolumn[0].value,
        telephone: this.addIconFromcolumn[1].value,
@@ -942,13 +949,13 @@
      }
      // eslint-disable-next-line new-cap
      var positions = this.DC.Transform.transformWGS84ToCartesian(
      var positions = global.DC.Transform.transformWGS84ToCartesian(
        // eslint-disable-next-line new-cap
        new this.DC.Position.fromArray(this.pointPosition)
        new global.DC.Position.fromArray(this.pointPosition)
      );
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      // eslint-disable-next-line no-unused-vars
      var panorama = new this.DC.PanoramaBox(this.viewer, {
      var panorama = new global.DC.PanoramaBox(global.viewer, {
        domId: "PanoramaBox",
        position: [positions],
      });
@@ -965,19 +972,40 @@
        this.audioCourse = false;
      }
      // eslint-disable-next-line new-cap
      var positions = this.DC.Transform.transformWGS84ToCartesian(
      var positions = global.DC.Transform.transformWGS84ToCartesian(
        // eslint-disable-next-line new-cap
        new this.DC.Position.fromArray(this.pointPosition)
        new global.DC.Position.fromArray(this.pointPosition)
      );
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      // eslint-disable-next-line no-unused-vars
      var monitor = new this.DC.PanoramaBox(this.viewer, {
      var monitor = new global.DC.PanoramaBox(global.viewer, {
        domId: "MonitorBox",
        position: [positions],
      });
      this.$store.commit("SET_PANORAMAPOPUP", false);
      this.$store.commit("SET_DETAILSPOPUP", false);
      this.$store.commit("SET_MONITORPOPUP", true);
    },
    returnDetailsPopup() {
      var positions = global.DC.Transform.transformWGS84ToCartesian(
        // eslint-disable-next-line new-cap
        new global.DC.Position.fromArray(this.pointPosition)
      );
      // eslint-disable-next-line no-unused-vars
      var divBox = new global.DC.PanoramaBox(global.viewer, {
        domId: "divFormsDomBox",
        position: [positions],
      });
      global.viewer.zoomToPosition(
        // eslint-disable-next-line new-cap
        new global.DC.Position.fromArray(this.pointPosition)
      );
      this.$store.commit("SET_DETAILSPOPUP", true);
      this.$store.commit("SET_MONITORPOPUP", false);
      this.$store.commit("SET_PANORAMAPOPUP", false);
    },
    closeMapPopupBox() {
@@ -1010,21 +1038,22 @@
      this.$store.commit("SET_ADDTAGPOPUP", false);
      //   if (this.addTagLayer == null) {
      //     this.addTagLayer = new this.DC.HtmlLayer("addTagLayer");
      //     this.viewer.addLayer(this.addTagLayer);
      //   }
      //2022.3.2对接接口
      // 2022.3.2对接接口
      // 新增标签
      let data = {
      const data = {
        name: this.RemoveTheBlank(this.addTagName),
        jd: this.addTagPosition.lng,
        wd: this.addTagPosition.lat,
      };
      //   console.log(data);
      let oks = setTimeout(() => {
        that.$message({
          message: "新增标签失败",
          type: "warning",
        });
      }, 5000);
      setlabel(data).then((res) => {
        console.log(res);
        clearTimeout(oks);
        if (res.data.code == 200) {
          doit();
          that.$message({
@@ -1039,29 +1068,11 @@
        }
        that.addTagName = "";
      });
      let doit = () => {
      const doit = () => {
        that.$store.dispatch("addLabelLayerIcon", {
          // list: [data],
          add: true,
        });
        // const divIcon = new this.DC.DivIcon(
        //   new that.DC.Position(
        //     Number(that.addTagPosition.lng),
        //     Number(that.addTagPosition.lat),
        //     0
        //   ),
        //   `
        //                 <div class="tag-entitys-box">
        //                     <div class="tag-content">
        //                         ${that.addTagName}
        //                     </div>
        //                     <div class="tag-angle-content">
        //                         <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
        //                     </div>
        //                 </div>
        //             `
        // );
        // this.addTagLayer.addOverlay(divIcon);
      };
    },
@@ -1120,8 +1131,8 @@
        }
        this.newPopup(result);
        this.viewer.flyToPosition(
          new this.DC.Position(
        global.viewer.flyToPosition(
          new global.DC.Position(
            Number(result.jd),
            Number(result.wd),
            300,
@@ -1136,11 +1147,15 @@
    },
    newPopup(item) {
      const position = this.DC.Transform.transformWGS84ToCartesian(
        new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd))
      const position = global.DC.Transform.transformWGS84ToCartesian(
        new global.DC.Position(
          Number(item.jd),
          Number(item.wd),
          Number(item.gd)
        )
      );
      // eslint-disable-next-line no-unused-vars
      var popup = new this.DC.DivForms(this.viewer, {
      var popup = new global.DC.DivForms(global.viewer, {
        domId: "divFormsDomBox",
        position: [position],
      });
@@ -1160,9 +1175,32 @@
};
</script>
<style>
<style lang="scss">
.labelLayeridewm {
  width: 250px !important;
  height: 250px !important;
}
.add-sign-box-style {
  input:-moz-placeholder,
  textarea:-moz-placeholder {
    color: #fff;
  }
  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    color: #fff;
  }
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: #fff;
  }
  .addIconsLayerinimgs {
    margin-top: 4px;
  }
  .addIconsLayerin {
    padding: 0 10px;
  }
}
</style>