From e8e7b70168d5cc8a465c92da28bdcce52e8bf3cc Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Thu, 10 Mar 2022 14:48:21 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
src/components/map/components/mapPopup.vue | 639 +++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 585 insertions(+), 54 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index cbb4d82..996f48f 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -2,7 +2,7 @@
<div>
<div id="map_popup_content">
<div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
- <div style="width: 100%; height: 100%;">
+ <div style="width: 100%; height: 100%">
<div class="divForms divForms-theme">
<div class="divForms-wrap">
<div class="area">
@@ -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>
@@ -152,15 +152,15 @@
<div
v-if="panoramaPopup"
class="panorama-dom"
- :class="{'change-full': fullscreen}"
+ :class="{ 'change-full': fullscreen }"
id="PanoramaBox"
>
- <div style="width: 100%; height: 100%;">
+ <div style="width: 100%; height: 100%">
<div class="panorama-container">
<div class="panorama-wrap">
<div
class="content-wrap"
- :class="{'change-full': fullscreen}"
+ :class="{ 'change-full': fullscreen }"
id="FullScreenBox"
>
<div class="title">
@@ -193,7 +193,7 @@
</div>
<div v-if="monitorPopup" class="monitor-dom" id="MonitorBox">
- <div style="width: 100%; height: 100%;">
+ <div style="width: 100%; height: 100%">
<div class="monitor-container">
<div class="monitor-wrap">
<div class="content-wrap">
@@ -217,7 +217,7 @@
</div>
<div v-if="addTagPopup" class="divForms-dom" id="AddTagBox">
- <div style="width: 100%; height: 100%;">
+ <div style="width: 100%; height: 100%">
<div class="divForms divForms-theme">
<div class="divForms-wrap">
<div class="area">
@@ -254,6 +254,150 @@
</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>
+
+ <!-- 新增编辑标签 -->
+ <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>
+ <div class="b-t-l"></div>
+ <div class="b-b-r"></div>
+ </div>
+ <div class="arrow"></div>
+ </div>
+ </div>
</div>
<!-- 二维码弹框相关 -->
@@ -264,20 +408,28 @@
:modal-append-to-body="false"
width="44%"
>
- <div style="margin: 0; position: relative; width: 100%; height: 352px;">
+ <div style="margin: 0; position: relative; width: 100%; height: 352px">
<img
width="260"
:src="pupupQRUrl"
alt
- style="position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto"
+ style="
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ "
/>
<div
- style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;"
+ style="
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ line-height: 36px;
+ text-align: center;
+ "
>(右键另存为图片)</div>
</div>
</el-dialog>
@@ -295,12 +447,18 @@
<script>
import { mapGetters } from 'vuex'
import { getMechanismDetail } from '@/api/pc/public/arc'
+import { setlabel } from '@/api/pc/label'
+import { add } from '@/api/pc/leftNav/index'
export default {
name: 'mapPopup',
+
data () {
return {
- DC: null,
+ ourImages: [],
+ dialogImageUrl: '',
+ dialogVisible: false,
+ apiUrls: null,
tabBtnFlag: '教学科研行政',
QRCodeFlag: false,
audioSource: '',
@@ -311,7 +469,213 @@
fullscreen: false,
fullScreenUrl: '/img/icon/bigScreen.png',
addTagName: '',
- addTagLayer: null
+ 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: {
@@ -349,14 +713,19 @@
'teachList',
// 科研
'liveList',
- // 社区内导航的显示关闭
+ // 校区内导航的显示关闭
'campusNavFlag',
'addTagPopup',
- 'addTagPosition'
+ 'addTagPosition',
+ // 自定义标签弹窗
+ 'labelLayerDataShow',
+ 'nowlabelLayerData',
+ 'addIconsLayerIconPopup', // 自定义标签编辑窗口
+ 'addIconsLayerIconPosition' // 自定义标签坐标
])
},
created () {
- this.DC = global.DC
+ this.apiUrls = window.$apiUrls
this.audioSynth = window.speechSynthesis
this.audioMsg = new window.SpeechSynthesisUtterance()
@@ -367,10 +736,36 @@
this.audioCourse = false
}
},
- mounted () {
-
- },
+ mounted () { },
watch: {
+ addIconsLayerIconPopup () {
+ if (this.addIconsLayerIconPopup) {
+ this.addIconFromcolumn[9].value = this.addIconsLayerIconPosition[0]
+ this.addIconFromcolumn[10].value = this.addIconsLayerIconPosition[1]
+ } else {
+ for (const 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) {
@@ -416,6 +811,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)
+ }
+ const 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'
@@ -466,13 +921,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(this.viewer, {
domId: 'PanoramaBox',
position: [positions]
})
@@ -489,13 +944,13 @@
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(this.viewer, {
domId: 'MonitorBox',
position: [positions]
})
@@ -517,34 +972,75 @@
closeAddTagBox () {
this.$store.commit('SET_ADDTAGPOPUP', false)
},
-
+ closelabelLayerid () {
+ this.$store.commit('openLabelLayer', {
+ show: false
+ })
+ },
createTag () {
var that = this
- this.$store.commit('SET_ADDTAGPOPUP', false)
+ // console.log(this.RemoveTheBlank(this.addTagName));
- if (this.addTagLayer == null) {
- this.addTagLayer = new this.DC.HtmlLayer('addTagLayer')
- this.viewer.addLayer(this.addTagLayer)
+ if (this.RemoveTheBlank(this.addTagName) == '') {
+ this.$message('请输入标签名称')
+ return
}
- 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.$store.commit('SET_ADDTAGPOPUP', false)
- this.addTagName = ''
+ // if (this.addTagLayer == null) {
+ // this.addTagLayer = new global.DC.HtmlLayer("addTagLayer");
+ // this.viewer.addLayer(this.addTagLayer);
+ // }
- this.addTagLayer.addOverlay(divIcon)
+ // 2022.3.2对接接口
+ // 新增标签
+ const data = {
+ name: this.RemoveTheBlank(this.addTagName),
+ jd: this.addTagPosition.lng,
+ wd: this.addTagPosition.lat
+ }
+ // console.log(data);
+ setlabel(data).then((res) => {
+ if (res.data.code == 200) {
+ doit()
+ that.$message({
+ message: '新增标签成功',
+ type: 'success'
+ })
+ } else {
+ that.$message({
+ message: '新增标签失败',
+ type: 'warning'
+ })
+ }
+ that.addTagName = ''
+ })
+ const doit = () => {
+ that.$store.dispatch('addLabelLayerIcon', {
+ // list: [data],
+ add: true
+ })
+ // const divIcon = new global.DC.DivIcon(
+ // new global.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);
+ }
},
closePanoramaPopupBox () {
@@ -603,7 +1099,7 @@
this.newPopup(result)
this.viewer.flyToPosition(
- new this.DC.Position(
+ new global.DC.Position(
Number(result.jd),
Number(result.wd),
300,
@@ -618,11 +1114,11 @@
},
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(this.viewer, {
domId: 'divFormsDomBox',
position: [position]
})
@@ -630,9 +1126,44 @@
this.$store.commit('SET_PANORAMAPOPUP', false)
this.$store.commit('SET_MONITORPOPUP', false)
this.$store.commit('SET_DETAILSPOPUP', true)
+ },
+
+ /**
+ * 删除左右两端的空格
+ */
+ RemoveTheBlank (str) {
+ return str.replace(/(^\s*)|(\s*$)/g, '')
}
}
}
</script>
-<style></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>
--
Gitblit v1.9.3