From 01f9c88fd0ee768155e5b341c2bb95a85bc11a08 Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Sat, 05 Mar 2022 17:49:36 +0800
Subject: [PATCH] ++
---
src/components/map/components/mapPopup.vue | 480 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 476 insertions(+), 4 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index 1d5704e..c29b7c8 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -261,6 +261,156 @@
</div>
</div>
</div>
+
+ <div v-if="labelLayerDataShow" class="divForms-dom" id="labelLayerid">
+ <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">
+ {{ nowlabelLayerData.name }} 二维码分享
+ <img
+ @click="closelabelLayerid"
+ class="close-box"
+ src="/img/navicon/close.png"
+ alt
+ />
+ </div>
+ <div class="add-tag-content" style="height: 250px">
+ <!-- data:image/png;base64, -->
+ <img
+ :src="nowlabelLayerData.qrcode"
+ alt=""
+ class="labelLayeridewm"
+ style="width:250px,height:250px"
+ />
+ </div>
+ </div>
+ </div>
+ <div class="b-t-l"></div>
+ <div class="b-b-r"></div>
+ </div>
+ <div class="arrow"></div>
+ </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>
<!-- 二维码弹框相关 -->
@@ -313,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,
@@ -330,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: {
@@ -367,10 +734,15 @@
"teachList",
// 科研
"liveList",
- // 社区内导航的显示关闭
+ // 校区内导航的显示关闭
"campusNavFlag",
"addTagPopup",
"addTagPosition",
+ //自定义标签弹窗
+ "labelLayerDataShow",
+ "nowlabelLayerData",
+ "addIconsLayerIconPopup", //自定义标签编辑窗口
+ "addIconsLayerIconPosition", //自定义标签坐标
]),
},
created() {
@@ -387,6 +759,34 @@
},
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");
+ this.$store.commit("set_closeMapClick", false);
+ }
+ },
introduceText: {
immediate: true,
handler(newQuestion, oldQuestion) {
@@ -432,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";
@@ -533,7 +993,11 @@
closeAddTagBox() {
this.$store.commit("SET_ADDTAGPOPUP", false);
},
-
+ closelabelLayerid() {
+ this.$store.commit("openLabelLayer", {
+ show: false,
+ });
+ },
createTag() {
var that = this;
@@ -576,7 +1040,10 @@
that.addTagName = "";
});
let doit = () => {
- that.$store.commit("addLabelLayerIcon", { list: [data], add: true });
+ that.$store.dispatch("addLabelLayerIcon", {
+ // list: [data],
+ add: true,
+ });
// const divIcon = new this.DC.DivIcon(
// new that.DC.Position(
// Number(that.addTagPosition.lng),
@@ -693,4 +1160,9 @@
};
</script>
-<style></style>
+<style>
+.labelLayeridewm {
+ width: 250px !important;
+ height: 250px !important;
+}
+</style>
--
Gitblit v1.9.3