+新增标签，可编辑，可加图片

liuyg

2022-03-05 722dbde665a8e335bccaa9d984cd02eb22333e54

 src/components/map/components/mapPopup.vue

@@ -301,6 +301,116 @@
          </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>

                        <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>
              <div class="b-t-l"></div>
              <div class="b-b-r"></div>
            </div>
            <div class="arrow"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 二维码弹框相关 -->
@@ -353,11 +463,22 @@
import { mapGetters } from "vuex";
import { getMechanismDetail } from "@/api/pc/public/arc";
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,
      tabBtnFlag: "教学科研行政",
      QRCodeFlag: false,
@@ -370,6 +491,212 @@
      fullScreenUrl: "/img/icon/bigScreen.png",
      addTagName: "",
      addTagLayer: null,
      addIconFromcolumn: [
        //顺序不要随便换
        {
          label: "名称",
          prop: "mechanismname",
          value: "",
        },
        {
          label: "电话",
          prop: "telephone",
          value: "",
        },
        {
          label: "所属建筑",
          prop: "type",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=building",
          props: {
            label: "dictValue",
            value: "dictKey",
          },
          value: "红旗校区",
          valueid: "1",
          chouse: [
            {
              id: "1",
              value: "红旗校区",
            },
            {
              id: "2",
              value: "黄河路",
            },
            {
              id: "3",
              value: "科学园",
            },
            {
              id: "4",
              value: "土木楼",
            },
            {
              id: "5",
              value: "三江校区",
            },
          ],
        },
        {
          label: "所属社区",
          searchLabelWidth: "110",
          value: "行政办公",
          valueid: "1",
          prop: "campus",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=campus",
          chouse: [
            {
              id: "1",
              value: "行政办公",
            },
            {
              id: "2",
              value: "教学科研",
            },
            {
              id: "3",
              value: "社区场馆",
            },
            {
              id: "4",
              value: "学生宿舍",
            },
            {
              id: "5",
              value: "文化风景",
            },
            {
              id: "6",
              value: "家属住宅",
            },
            {
              id: "7",
              value: "主要楼宇",
            },
          ],
        },

        {
          label: "介绍",
          prop: "introduce",
          value: "",
          component: "AvueUeditor",
          options: {
            action: "/api/blade-resource/oss/endpoint/put-file",
            props: {
              res: "data",
              url: "link",
            },
          },
          hide: true,
          minRows: 5,
          span: 24,
        },
        {
          label: "地址",
          hide: true,
          prop: "address",
          value: "",
        },
        {
          label: "全景地址",
          prop: "panoramaurl",
          value: "",
        },
        {
          label: "监控地址",
          hide: true,
          prop: "videourl",
          value: "",
        },
        {
          label: "网站地址",
          prop: "websiteurl",
          value: "",
        },
        {
          label: "经度",
          prop: "jd",
          value: "",
          rules: [
            {
              required: true,
              message: "请输入经度",
              trigger: "blur",
            },
          ],
        },
        {
          label: "纬度",
          prop: "wd",
          value: "",
          rules: [
            {
              required: true,
              message: "请输入纬度",
              trigger: "blur",
            },
          ],
        },
        {
          label: "偏航角",
          addDisplay: false,
          hide: true,
          prop: "heading",
          value: 0,
        },
        {
          label: "俯仰角",
          addDisplay: false,
          hide: true,
          prop: "pitch",
          value: -90,
        },
        {
          label: "翻转角",
          addDisplay: false,
          hide: true,
          prop: "roll",
          value: 0,
        },

        {
          label: "高度",
          hide: true,
          addDisplay: false,
          prop: "gd",
          value: 0,
        },

        // {
        //   label: "图片",
        //   prop: "tpurl",
        //   value: "",
        //   // dataType: 'string',
        //   type: "upload",
        //   propsHttp: {
        //     res: "data",
        //     url: "link",
        //   },
        //   span: 10,
        //   listType: "picture-card",
        //   tip: "只能上传jpg/png文件，且不超过500kb",
        //   action: "/api/blade-resource/oss/endpoint/put-file",
        // },
        // {
        //   label: "二维码",
        //   prop: "codeurl",
        //   value: "",
        //   type: "upload",
        //   listType: "picture-card",
        //   //dataType: 'string',
        //   action: "/api/blade-resource/oss/endpoint/put-file",
        //   propsHttp: {
        //     res: "data",
        //     url: "link",
        //   },
        //   span: 10,
        // },
      ],
    };
  },
  computed: {
@@ -414,6 +741,8 @@
      //自定义标签弹窗
      "labelLayerDataShow",
      "nowlabelLayerData",
      "addIconsLayerIconPopup", //自定义标签编辑窗口
      "addIconsLayerIconPosition", //自定义标签坐标
    ]),
  },
  created() {
@@ -430,6 +759,28 @@
  },
  mounted() {},
  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) {
          if (k == 2) {
            this.addIconFromcolumn[k].value = "红旗校区";
            this.addIconFromcolumn[k].valueid = "1";
            continue;
          }
          if (k == 3) {
            this.addIconFromcolumn[k].value = "行政办公";
            this.addIconFromcolumn[k].valueid = "1";
            continue;
          }
          this.addIconFromcolumn[k].value = "";
        }
        this.ourImages = [];
        this.$store.commit("set_closeMapClick", false); //开启其他操作
      }
    },
    addTagPopup() {
      if (!this.addTagPopup) {
        // console.log("取消", "see");
@@ -481,6 +832,66 @@
    },
  },
  methods: {
    onsuccess(response, file, fileList) {
      this.ourImages = fileList;
    },
    handleRemove(file, fileList) {
      this.ourImages = fileList;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    chouseAddicon(item) {
      this.addIconFromcolumn[item.index].value =
        this.addIconFromcolumn[item.index].chouse[item.indexc].value;
      this.addIconFromcolumn[item.index].valueid =
        this.addIconFromcolumn[item.index].chouse[item.indexc].id;
    },
    closeaddIconsLayerIconPopup() {
      this.$store.commit("SET_addIconsLayerIconPopup", false);
    },
    saveIconsLayer() {
      var imgs = [];
      // console.log("see", this.ourImages);
      // return;
      for (var k in this.ourImages) {
        imgs.push(this.ourImages[k].response);
      }
      let d = {
        tpurl: imgs.join(","),
        mechanismname: this.addIconFromcolumn[0].value,
        telephone: this.addIconFromcolumn[1].value,
        type: this.addIconFromcolumn[2].valueid,
        campus: this.addIconFromcolumn[3].valueid,
        introduce: this.addIconFromcolumn[4].value,
        address: this.addIconFromcolumn[5].value,
        panoramaurl: this.addIconFromcolumn[6].value,
        videourl: this.addIconFromcolumn[7].value,
        websiteurl: this.addIconFromcolumn[8].value,
        jd: this.addIconFromcolumn[9].value,
        wd: this.addIconFromcolumn[10].value,
        heading: this.addIconFromcolumn[11].value,
        pitch: this.addIconFromcolumn[12].value,
        roll: this.addIconFromcolumn[13].value,
        gd: this.addIconFromcolumn[14].value,
      };
      // console.log(d, "see3");
      // return;
      // this.$store.commit("set_closeMapClick", false); //开启其他操作
      add(d).then(
        () => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.closeaddIconsLayerIconPopup();
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    screen() {
      if (this.fullscreen) {
        this.fullScreenUrl = "/img/icon/bigScreen.png";