From ebc12b5f54c664bfd06e884dc2040223392558f8 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 05 Mar 2022 17:47:19 +0800
Subject: [PATCH] 地图部分修改
---
src/components/map/components/mapPopup.vue | 1411 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 701 insertions(+), 710 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index f1a6e25..1553ac3 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -1,322 +1,315 @@
<template>
- <div>
- <div id="map_popup_content">
- <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
- <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">
- {{ stateName }}
- <img
- v-show="introduceText != null && introduceText != ''"
- @click="audioPlay"
- class="audio-control"
- src="/img/navicon/audio.png"
- alt
- />
- <img
- @click="closeMapPopupBox"
- class="close-box"
- src="/img/navicon/close.png"
- alt
- />
- </div>
- <div class="label-content">
- <div class="arc-bcg">
- <img :src="popupBgUrl" alt />
- </div>
- <div
- v-show="siteName != null && siteName != ''"
- class="site"
- >
- <strong>地址：</strong>
- {{ siteName }}
- </div>
- <div
- v-show="telephone != null && telephone != ''"
- class="phone"
- >
- <strong>电话：</strong>
- {{ telephone }}
- </div>
- <div
- v-show="introduceText != null && introduceText != ''"
- class="introduce"
- >
- <p ref="DomIntroduceText">
- <strong>介绍：</strong>
- <span v-html="introduceText"></span>
- </p>
- </div>
- <div class="popup-nav">
- <ul>
- <li @click="comeHereClick">
- <i class="popup-icon come-nav deblurring"></i>
- 到这
- </li>
- <li @click="getToHereClick">
- <i class="popup-icon start-nav deblurring"></i>
- 出发
- </li>
- <li v-show="false" @click="qrCodeClick">
- <i class="popup-icon qr-code-nav deblurring"></i>
- 二维码
- </li>
- <li @click="imgsClick">
- <i class="popup-icon atlas-nav deblurring"></i>
- 图集
- </li>
- <li
- v-show="panoramaUrl != null && panoramaUrl != ''"
- @click="panoramaClick"
- >
- <i class="popup-icon live-action-nav deblurring"></i>
- 实景
- </li>
- <!-- v-show="panoramaUrl != null && panoramaUrl != ''" -->
- <li v-show="false" @click="monitorClick">
- <i class="popup-icon monitor-nav deblurring"></i>
- 监控
- </li>
- </ul>
- </div>
- <div
- v-show="teachList.length > 0 || liveList.length > 0"
- class="arc-box"
- >
- <ul class="tab-btn">
- <li
- v-show="teachList.length > 0"
- :class="{ on: tabBtnFlag == '教学科研行政' }"
- @click="tabBtnClick('教学科研行政')"
- >
- 教学科研行政
- </li>
- <li
- v-show="liveList.length > 0"
- :class="{ on: tabBtnFlag == '生活服务' }"
- @click="tabBtnClick('生活服务')"
- >
- 生活服务
- </li>
- </ul>
- <div class="btm-content">
- <div :class="{ on: tabBtnFlag == '教学科研行政' }">
- <ul>
- <li
- v-for="(item, index) in teachList"
- :key="index"
- @click="mechanismDetailPopup(0, item)"
- >
- <i
- class="popup-icon location-icon deblurring"
- ></i>
- {{ item }}
- </li>
- </ul>
+ <div>
+ <div id="map_popup_content">
+ <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
+ <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">
+ {{ stateName }}
+ <img
+ v-show="introduceText != null && introduceText != ''"
+ @click="audioPlay"
+ class="audio-control"
+ src="/img/navicon/audio.png"
+ alt
+ />
+ <img
+ @click="closeMapPopupBox"
+ class="close-box"
+ src="/img/navicon/close.png"
+ alt
+ />
+ </div>
+ <div class="label-content">
+ <div class="arc-bcg">
+ <img :src="popupBgUrl" alt />
+ </div>
+ <div
+ v-show="siteName != null && siteName != ''"
+ class="site"
+ >
+ <strong>地址：</strong>
+ {{ siteName }}
+ </div>
+ <div
+ v-show="telephone != null && telephone != ''"
+ class="phone"
+ >
+ <strong>电话：</strong>
+ {{ telephone }}
+ </div>
+ <div
+ v-show="introduceText != null && introduceText != ''"
+ class="introduce"
+ >
+ <p ref="DomIntroduceText">
+ <strong>介绍：</strong>
+ <span v-html="introduceText"></span>
+ </p>
+ </div>
+ <div class="popup-nav">
+ <ul>
+ <li @click="comeHereClick">
+ <i class="popup-icon come-nav deblurring"></i>
+ 到这
+ </li>
+ <li @click="getToHereClick">
+ <i class="popup-icon start-nav deblurring"></i>
+ 出发
+ </li>
+ <li v-show="false" @click="qrCodeClick">
+ <i class="popup-icon qr-code-nav deblurring"></i>
+ 二维码
+ </li>
+ <li @click="imgsClick">
+ <i class="popup-icon atlas-nav deblurring"></i>
+ 图集
+ </li>
+ <li
+ v-show="panoramaUrl != null && panoramaUrl != ''"
+ @click="panoramaClick"
+ >
+ <i
+ class="popup-icon live-action-nav deblurring"
+ ></i>
+ 实景
+ </li>
+ <!-- v-show="panoramaUrl != null && panoramaUrl != ''" -->
+ <li v-show="false" @click="monitorClick">
+ <i class="popup-icon monitor-nav deblurring"></i>
+ 监控
+ </li>
+ </ul>
+ </div>
+ <div
+ v-show="teachList.length > 0 || liveList.length > 0"
+ class="arc-box"
+ >
+ <ul class="tab-btn">
+ <li
+ v-show="teachList.length > 0"
+ :class="{ on: tabBtnFlag == '教学科研行政' }"
+ @click="tabBtnClick('教学科研行政')"
+ >教学科研行政</li>
+ <li
+ v-show="liveList.length > 0"
+ :class="{ on: tabBtnFlag == '生活服务' }"
+ @click="tabBtnClick('生活服务')"
+ >生活服务</li>
+ </ul>
+ <div class="btm-content">
+ <div :class="{ on: tabBtnFlag == '教学科研行政' }">
+ <ul>
+ <li
+ v-for="(item, index) in teachList"
+ :key="index"
+ @click="mechanismDetailPopup(0, item)"
+ >
+ <i
+ class="popup-icon location-icon deblurring"
+ ></i>
+ {{ item }}
+ </li>
+ </ul>
+ </div>
+ <div :class="{ on: tabBtnFlag == '生活服务' }">
+ <ul>
+ <li
+ v-for="(item, index) in liveList"
+ :key="index"
+ @click="mechanismDetailPopup(1, item)"
+ >
+ <i
+ class="popup-icon location-icon deblurring"
+ ></i>
+ {{ item }}
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="btm-box"></div>
+ </div>
+ </div>
+ </div>
+ <div class="b-t-l"></div>
+ <div class="b-b-r"></div>
</div>
- <div :class="{ on: tabBtnFlag == '生活服务' }">
- <ul>
- <li
- v-for="(item, index) in liveList"
- :key="index"
- @click="mechanismDetailPopup(1, item)"
- >
- <i
- class="popup-icon location-icon deblurring"
- ></i>
- {{ item }}
- </li>
- </ul>
- </div>
- </div>
+ <div class="arrow"></div>
</div>
- <div class="btm-box"></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
- v-if="panoramaPopup"
- class="panorama-dom"
- :class="{ 'change-full': fullscreen }"
- id="PanoramaBox"
- >
- <div style="width: 100%; height: 100%">
- <div class="panorama-container">
- <div class="panorama-wrap">
- <div
- class="content-wrap"
+ <div
+ v-if="panoramaPopup"
+ class="panorama-dom"
:class="{ 'change-full': fullscreen }"
- id="FullScreenBox"
- >
- <div class="title">
- {{ stateName }}
- <img
- @click="screen"
- class="full-srceen-btn"
- :src="fullScreenUrl"
- alt
- />
- <img
- @click="closePanoramaPopupBox"
- class="close-box"
- src="/img/navicon/close.png"
- alt
- />
- </div>
- <div class="content">
- <iframe
- allowfullscreen="true"
- :src="panoramaUrl"
- frameborder="0"
- ></iframe>
- </div>
- </div>
- </div>
- <div class="arrow"></div>
- </div>
- </div>
- </div>
-
- <div v-if="monitorPopup" class="monitor-dom" id="MonitorBox">
- <div style="width: 100%; height: 100%">
- <div class="monitor-container">
- <div class="monitor-wrap">
- <div class="content-wrap">
- <div class="title">
- {{ stateName }}
- <img
- @click="closeMonitorPopupBox"
- class="close-box"
- src="/img/navicon/close.png"
- alt
- />
- </div>
- <div class="content">
- <video :src="monitorUrl" controls autoplay></video>
- </div>
- </div>
- </div>
- <div class="arrow"></div>
- </div>
- </div>
- </div>
-
- <div v-if="addTagPopup" class="divForms-dom" id="AddTagBox">
- <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">
- 地图标记
- <img
- @click="closeAddTagBox"
- class="close-box"
- src="/img/navicon/close.png"
- alt
- />
- </div>
- <div class="add-tag-content">
- <div>
- <el-input
- v-model="addTagName"
- placeholder="请输入标签名称"
- ></el-input>
+ id="PanoramaBox"
+ >
+ <div style="width: 100%; height: 100%">
+ <div class="panorama-container">
+ <div class="panorama-wrap">
+ <div
+ class="content-wrap"
+ :class="{ 'change-full': fullscreen }"
+ id="FullScreenBox"
+ >
+ <div class="title">
+ {{ stateName }}
+ <img
+ @click="screen"
+ class="full-srceen-btn"
+ :src="fullScreenUrl"
+ alt
+ />
+ <img
+ @click="closePanoramaPopupBox"
+ class="close-box"
+ src="/img/navicon/close.png"
+ alt
+ />
+ </div>
+ <div class="content">
+ <iframe
+ allowfullscreen="true"
+ :src="panoramaUrl"
+ frameborder="0"
+ ></iframe>
+ </div>
+ </div>
+ </div>
+ <div class="arrow"></div>
</div>
- <div>
- <el-button type="primary" @click="createTag"
- >生成标记</el-button
- >
+ </div>
+ </div>
+
+ <div v-if="monitorPopup" class="monitor-dom" id="MonitorBox">
+ <div style="width: 100%; height: 100%">
+ <div class="monitor-container">
+ <div class="monitor-wrap">
+ <div class="content-wrap">
+ <div class="title">
+ {{ stateName }}
+ <img
+ @click="closeMonitorPopupBox"
+ class="close-box"
+ src="/img/navicon/close.png"
+ alt
+ />
+ </div>
+ <div class="content">
+ <video :src="monitorUrl" controls autoplay></video>
+ </div>
+ </div>
+ </div>
+ <div class="arrow"></div>
</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 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 v-if="addTagPopup" class="divForms-dom" id="AddTagBox">
+ <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">
+ 地图标记
+ <img
+ @click="closeAddTagBox"
+ class="close-box"
+ src="/img/navicon/close.png"
+ alt
+ />
+ </div>
+ <div class="add-tag-content">
+ <div>
+ <el-input v-model="addTagName" placeholder="请输入标签名称"></el-input>
+ </div>
+ <div>
+ <el-button type="primary" @click="createTag">生成标记</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 class="b-t-l"></div>
- <div class="b-b-r"></div>
</div>
- <div class="arrow"></div>
- </div>
- </div>
- </div>
- </div>
- <!-- 二维码弹框相关 -->
- <el-dialog
- title="场景二维码"
- :visible.sync="QRCodeFlag"
- :modal="false"
- :modal-append-to-body="false"
- width="44%"
- >
- <div style="margin: 0; position: relative; width: 100%; height: 352px">
- <img
- width="260"
- :src="pupupQRUrl"
- alt
- style="
+ <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>
+
+ <!-- 二维码弹框相关 -->
+ <el-dialog
+ title="场景二维码"
+ :visible.sync="QRCodeFlag"
+ :modal="false"
+ :modal-append-to-body="false"
+ width="44%"
+ >
+ <div style="margin: 0; position: relative; width: 100%; height: 352px">
+ <img
+ width="260"
+ :src="pupupQRUrl"
+ alt
+ style="
position: absolute;
top: 0;
left: 0;
@@ -324,434 +317,432 @@
bottom: 0;
margin: auto;
"
- />
- <div
- style="
+ />
+ <div
+ style="
position: absolute;
bottom: 0;
width: 100%;
line-height: 36px;
text-align: center;
"
- >
- (右键另存为图片)
- </div>
- </div>
- </el-dialog>
+ >(右键另存为图片)</div>
+ </div>
+ </el-dialog>
- <el-image
- v-show="false"
- style="width: 100px; height: 100px"
- :src="popupImgAtlas[0]"
- :preview-src-list="popupImgAtlas"
- ref="popupImgs"
- ></el-image>
- </div>
+ <el-image
+ v-show="false"
+ style="width: 100px; height: 100px"
+ :src="popupImgAtlas[0]"
+ :preview-src-list="popupImgAtlas"
+ ref="popupImgs"
+ ></el-image>
+ </div>
</template>
<script>
-import { mapGetters } from "vuex";
-import { getMechanismDetail } from "@/api/pc/public/arc";
-import { setlabel } from "@/api/pc/label";
+import { mapGetters } from 'vuex'
+import { getMechanismDetail } from '@/api/pc/public/arc'
+import { setlabel } from '@/api/pc/label'
export default {
- name: "mapPopup",
- data() {
- return {
- DC: null,
- tabBtnFlag: "教学科研行政",
- QRCodeFlag: false,
- audioSource: "",
- audioFlag: false,
- audioCourse: false,
- audioSynth: null,
- audioMsg: null,
- fullscreen: false,
- fullScreenUrl: "/img/icon/bigScreen.png",
- addTagName: "",
- addTagLayer: null,
- };
- },
- computed: {
- ...mapGetters([
- "viewer",
- "popupBgUrl",
- "pupupQRUrl",
- // 终点
- "terminus",
- // 起点
- "startingPoint",
- // 点信息
- "pointPosition",
- // 点名称
- "stateName",
- // 地址
- "siteName",
- // 电话
- "telephone",
- // 介绍
- "introduceText",
- // 详情弹框显示关闭
- "detailsPopup",
- // 全景地址
- "panoramaUrl",
- // 全景弹框显示关闭
- "panoramaPopup",
- // 监控地址
- "monitorUrl",
- // 监控弹框显示关闭
- "monitorPopup",
-
- "popupImgAtlas",
- // 教学
- "teachList",
- // 科研
- "liveList",
- // 校区内导航的显示关闭
- "campusNavFlag",
- "addTagPopup",
- "addTagPosition",
- //自定义标签弹窗
- "labelLayerDataShow",
- "nowlabelLayerData",
- ]),
- },
- created() {
- this.DC = global.DC;
-
- this.audioSynth = window.speechSynthesis;
- this.audioMsg = new window.SpeechSynthesisUtterance();
-
- this.audioMsg.onend = function () {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
- };
- },
- mounted() {},
- watch: {
- addTagPopup() {
- if (!this.addTagPopup) {
- // console.log("取消", "see");
- this.$store.commit("set_closeMapClick", false);
- }
- },
- introduceText: {
- immediate: true,
- handler(newQuestion, oldQuestion) {
- this.audioSource = newQuestion;
- if (this.audioFlag == true) {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
+ name: 'mapPopup',
+ data () {
+ return {
+ DC: null,
+ tabBtnFlag: '教学科研行政',
+ QRCodeFlag: false,
+ audioSource: '',
+ audioFlag: false,
+ audioCourse: false,
+ audioSynth: null,
+ audioMsg: null,
+ fullscreen: false,
+ fullScreenUrl: '/img/icon/bigScreen.png',
+ addTagName: '',
+ addTagLayer: null
}
- },
},
- teachList: {
- immediate: true,
- handler(newCode, oldCode) {
- if (newCode.length > 0) {
- this.tabBtnFlag = "教学科研行政";
+ computed: {
+ ...mapGetters([
+ 'viewer',
+ 'popupBgUrl',
+ 'pupupQRUrl',
+ // 终点
+ 'terminus',
+ // 起点
+ 'startingPoint',
+ // 点信息
+ 'pointPosition',
+ // 点名称
+ 'stateName',
+ // 地址
+ 'siteName',
+ // 电话
+ 'telephone',
+ // 介绍
+ 'introduceText',
+ // 详情弹框显示关闭
+ 'detailsPopup',
+ // 全景地址
+ 'panoramaUrl',
+ // 全景弹框显示关闭
+ 'panoramaPopup',
+ // 监控地址
+ 'monitorUrl',
+ // 监控弹框显示关闭
+ 'monitorPopup',
+
+ 'popupImgAtlas',
+ // 教学
+ 'teachList',
+ // 科研
+ 'liveList',
+ // 校区内导航的显示关闭
+ 'campusNavFlag',
+ 'addTagPopup',
+ 'addTagPosition',
+ // 自定义标签弹窗
+ 'labelLayerDataShow',
+ 'nowlabelLayerData'
+ ])
+ },
+ created () {
+ this.DC = global.DC
+
+ this.audioSynth = window.speechSynthesis
+ this.audioMsg = new window.SpeechSynthesisUtterance()
+
+ this.audioMsg.onend = function () {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
}
- },
},
- liveList: {
- immediate: true,
- handler(newCode, oldCode) {
- if (newCode.length > 0 && this.teachList.length == 0) {
- this.tabBtnFlag = "生活服务";
+ mounted () { },
+ watch: {
+ addTagPopup () {
+ if (!this.addTagPopup) {
+ // console.log("取消", "see");
+ this.$store.commit('set_closeMapClick', false)
+ }
+ },
+ introduceText: {
+ immediate: true,
+ handler (newQuestion, oldQuestion) {
+ this.audioSource = newQuestion
+ if (this.audioFlag == true) {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
+ }
+ }
+ },
+ teachList: {
+ immediate: true,
+ handler (newCode, oldCode) {
+ if (newCode.length > 0) {
+ this.tabBtnFlag = '教学科研行政'
+ }
+ }
+ },
+ liveList: {
+ immediate: true,
+ handler (newCode, oldCode) {
+ if (newCode.length > 0 && this.teachList.length == 0) {
+ this.tabBtnFlag = '生活服务'
+ }
+ }
+ },
+ detailsPopup: {
+ immediate: true,
+ handler (newCode, oldCode) {
+ if (newCode == false) {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
+ } else {
+ if (this.audioFlag == true) {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
+ }
+ }
+ }
}
- },
},
- detailsPopup: {
- immediate: true,
- handler(newCode, oldCode) {
- if (newCode == false) {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
- } else {
- if (this.audioFlag == true) {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
- }
+ methods: {
+ screen () {
+ if (this.fullscreen) {
+ this.fullScreenUrl = '/img/icon/bigScreen.png'
+ this.fullscreen = !this.fullscreen
+
+ document.getElementById('pcElHeader').style.zIndex = 9999
+ } else {
+ this.fullScreenUrl = '/img/icon/smallScreen.png'
+ this.fullscreen = !this.fullscreen
+
+ document.getElementById('pcElHeader').style.zIndex = 9
+ }
+ },
+
+ tabBtnClick (param) {
+ this.tabBtnFlag = param
+ },
+
+ comeHereClick () {
+ this.$store.commit('SET_COMENAME', this.stateName)
+ this.$store.commit('SET_TERMINUS', this.pointPosition)
+ if (this.campusNavFlag == false) {
+ this.$store.commit('SET_CAMPUSNAVFLAG', true)
+ }
+ },
+
+ getToHereClick () {
+ this.$store.commit('SET_GETTONAME', this.stateName)
+ this.$store.commit('SET_STARTINGPOINT', this.pointPosition)
+ if (this.campusNavFlag == false) {
+ this.$store.commit('SET_CAMPUSNAVFLAG', true)
+ }
+ },
+
+ qrCodeClick () {
+ this.QRCodeFlag = true
+ },
+
+ imgsClick () {
+ this.$refs.popupImgs.clickHandler()
+ },
+
+ panoramaClick () {
+ if (this.audioFlag == true) {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
+ }
+
+ // eslint-disable-next-line new-cap
+ var positions = this.DC.Transform.transformWGS84ToCartesian(
+ // eslint-disable-next-line new-cap
+ new this.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, {
+ domId: 'PanoramaBox',
+ position: [positions]
+ })
+
+ this.$store.commit('SET_DETAILSPOPUP', false)
+ this.$store.commit('SET_MONITORPOPUP', false)
+ this.$store.commit('SET_PANORAMAPOPUP', true)
+ },
+
+ monitorClick () {
+ if (this.audioFlag == true) {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
+ }
+ // eslint-disable-next-line new-cap
+ var positions = this.DC.Transform.transformWGS84ToCartesian(
+ // eslint-disable-next-line new-cap
+ new this.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, {
+ domId: 'MonitorBox',
+ position: [positions]
+ })
+ this.$store.commit('SET_PANORAMAPOPUP', false)
+ this.$store.commit('SET_DETAILSPOPUP', false)
+ this.$store.commit('SET_MONITORPOPUP', true)
+ },
+
+ closeMapPopupBox () {
+ if (this.audioFlag == true) {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
+ }
+ this.$store.commit('SET_DETAILSPOPUP', false)
+ },
+
+ // 新增标记相关事件
+ closeAddTagBox () {
+ this.$store.commit('SET_ADDTAGPOPUP', false)
+ },
+ closelabelLayerid () {
+ this.$store.commit('openLabelLayer', {
+ show: false
+ })
+ },
+ createTag () {
+ var that = this
+
+ // console.log(this.RemoveTheBlank(this.addTagName));
+
+ if (this.RemoveTheBlank(this.addTagName) == '') {
+ this.$message('请输入标签名称')
+ return
+ }
+
+ 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对接接口
+ // 新增标签
+ const data = {
+ name: this.RemoveTheBlank(this.addTagName),
+ jd: this.addTagPosition.lng,
+ wd: this.addTagPosition.lat
+ }
+ // console.log(data);
+ setlabel(data).then((res) => {
+ console.log(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 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);
+ }
+ },
+
+ closePanoramaPopupBox () {
+ this.$store.commit('SET_PANORAMAURL', '')
+ this.$store.commit('SET_PANORAMAPOPUP', false)
+ },
+
+ closeMonitorPopupBox () {
+ this.$store.commit('SET_MONITORURL', '')
+ this.$store.commit('SET_MONITORPOPUP', false)
+ },
+
+ audioPlay () {
+ if (this.audioFlag == false) {
+ this.audioMsg.text = this.audioSource
+ this.audioSynth.speak(this.audioMsg)
+ this.audioFlag = true
+ this.audioCourse = true
+ } else {
+ if (this.audioCourse == true) {
+ this.audioSynth.pause()
+ this.audioCourse = false
+ } else {
+ this.audioSynth.resume()
+ this.audioCourse = true
+ }
+ }
+ },
+
+ mechanismDetailPopup (num, param) {
+ getMechanismDetail({ num: num, mechanismName: param }).then((res) => {
+ var result = res.data.data
+ this.$store.commit('CLEAR_ALL', null)
+
+ var imgArr = result.tpurl.split(',')
+
+ this.$store.commit('SET_POPUPBGURL', imgArr[0])
+ this.$store.commit('SET_POPUPQRURL', result.codeurl)
+ this.$store.commit('SET_POINTPOSITION', [
+ Number(result.jd),
+ Number(result.wd),
+ Number(result.gd),
+ Number(result.heading),
+ Number(result.pitch),
+ Number(result.roll)
+ ])
+ this.$store.commit('SET_STATENAME', result.mechanismname)
+ this.$store.commit('SET_SITENAME', result.address)
+ this.$store.commit('SET_TELEPHONE', result.telephone)
+ this.$store.commit('SET_INTRODUCETEXT', result.introduce)
+ this.$store.commit('SET_POPUPIMGATLAS', imgArr)
+
+ if (result.videourl && result.videourl != '') {
+ this.$store.commit('SET_MONITORURL', result.videourl)
+ }
+
+ this.newPopup(result)
+ this.viewer.flyToPosition(
+ new this.DC.Position(
+ Number(result.jd),
+ Number(result.wd),
+ 300,
+ Number(result.heading),
+ Number(result.pitch),
+ Number(result.roll)
+ ),
+ function () { },
+ 3
+ )
+ })
+ },
+
+ newPopup (item) {
+ const position = this.DC.Transform.transformWGS84ToCartesian(
+ new this.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, {
+ domId: 'divFormsDomBox',
+ position: [position]
+ })
+
+ 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, '')
}
- },
- },
- },
- methods: {
- screen() {
- if (this.fullscreen) {
- this.fullScreenUrl = "/img/icon/bigScreen.png";
- this.fullscreen = !this.fullscreen;
-
- document.getElementById("pcElHeader").style.zIndex = 9999;
- } else {
- this.fullScreenUrl = "/img/icon/smallScreen.png";
- this.fullscreen = !this.fullscreen;
-
- document.getElementById("pcElHeader").style.zIndex = 9;
- }
- },
-
- tabBtnClick(param) {
- this.tabBtnFlag = param;
- },
-
- comeHereClick() {
- this.$store.commit("SET_COMENAME", this.stateName);
- this.$store.commit("SET_TERMINUS", this.pointPosition);
- if (this.campusNavFlag == false) {
- this.$store.commit("SET_CAMPUSNAVFLAG", true);
- }
- },
-
- getToHereClick() {
- this.$store.commit("SET_GETTONAME", this.stateName);
- this.$store.commit("SET_STARTINGPOINT", this.pointPosition);
- if (this.campusNavFlag == false) {
- this.$store.commit("SET_CAMPUSNAVFLAG", true);
- }
- },
-
- qrCodeClick() {
- this.QRCodeFlag = true;
- },
-
- imgsClick() {
- this.$refs.popupImgs.clickHandler();
- },
-
- panoramaClick() {
- if (this.audioFlag == true) {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
- }
-
- // eslint-disable-next-line new-cap
- var positions = this.DC.Transform.transformWGS84ToCartesian(
- // eslint-disable-next-line new-cap
- new this.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, {
- domId: "PanoramaBox",
- position: [positions],
- });
-
- this.$store.commit("SET_DETAILSPOPUP", false);
- this.$store.commit("SET_MONITORPOPUP", false);
- this.$store.commit("SET_PANORAMAPOPUP", true);
- },
-
- monitorClick() {
- if (this.audioFlag == true) {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
- }
- // eslint-disable-next-line new-cap
- var positions = this.DC.Transform.transformWGS84ToCartesian(
- // eslint-disable-next-line new-cap
- new this.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, {
- domId: "MonitorBox",
- position: [positions],
- });
- this.$store.commit("SET_PANORAMAPOPUP", false);
- this.$store.commit("SET_DETAILSPOPUP", false);
- this.$store.commit("SET_MONITORPOPUP", true);
- },
-
- closeMapPopupBox() {
- if (this.audioFlag == true) {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
- }
- this.$store.commit("SET_DETAILSPOPUP", false);
- },
-
- // 新增标记相关事件
- closeAddTagBox() {
- this.$store.commit("SET_ADDTAGPOPUP", false);
- },
- closelabelLayerid() {
- this.$store.commit("openLabelLayer", {
- show: false,
- });
- },
- createTag() {
- var that = this;
-
- // console.log(this.RemoveTheBlank(this.addTagName));
-
- if (this.RemoveTheBlank(this.addTagName) == "") {
- this.$message("请输入标签名称");
- return;
- }
-
- 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对接接口
- // 新增标签
- let data = {
- name: this.RemoveTheBlank(this.addTagName),
- jd: this.addTagPosition.lng,
- wd: this.addTagPosition.lat,
- };
- // console.log(data);
- setlabel(data).then((res) => {
- console.log(res);
- if (res.data.code == 200) {
- doit();
- that.$message({
- message: "新增标签成功",
- type: "success",
- });
- } else {
- that.$message({
- message: "新增标签失败",
- type: "warning",
- });
- }
- that.addTagName = "";
- });
- let 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);
- };
- },
-
- closePanoramaPopupBox() {
- this.$store.commit("SET_PANORAMAURL", "");
- this.$store.commit("SET_PANORAMAPOPUP", false);
- },
-
- closeMonitorPopupBox() {
- this.$store.commit("SET_MONITORURL", "");
- this.$store.commit("SET_MONITORPOPUP", false);
- },
-
- audioPlay() {
- if (this.audioFlag == false) {
- this.audioMsg.text = this.audioSource;
- this.audioSynth.speak(this.audioMsg);
- this.audioFlag = true;
- this.audioCourse = true;
- } else {
- if (this.audioCourse == true) {
- this.audioSynth.pause();
- this.audioCourse = false;
- } else {
- this.audioSynth.resume();
- this.audioCourse = true;
- }
- }
- },
-
- mechanismDetailPopup(num, param) {
- getMechanismDetail({ num: num, mechanismName: param }).then((res) => {
- var result = res.data.data;
- this.$store.commit("CLEAR_ALL", null);
-
- var imgArr = result.tpurl.split(",");
-
- this.$store.commit("SET_POPUPBGURL", imgArr[0]);
- this.$store.commit("SET_POPUPQRURL", result.codeurl);
- this.$store.commit("SET_POINTPOSITION", [
- Number(result.jd),
- Number(result.wd),
- Number(result.gd),
- Number(result.heading),
- Number(result.pitch),
- Number(result.roll),
- ]);
- this.$store.commit("SET_STATENAME", result.mechanismname);
- this.$store.commit("SET_SITENAME", result.address);
- this.$store.commit("SET_TELEPHONE", result.telephone);
- this.$store.commit("SET_INTRODUCETEXT", result.introduce);
- this.$store.commit("SET_POPUPIMGATLAS", imgArr);
-
- if (result.videourl && result.videourl != "") {
- this.$store.commit("SET_MONITORURL", result.videourl);
- }
-
- this.newPopup(result);
- this.viewer.flyToPosition(
- new this.DC.Position(
- Number(result.jd),
- Number(result.wd),
- 300,
- Number(result.heading),
- Number(result.pitch),
- Number(result.roll)
- ),
- function () {},
- 3
- );
- });
- },
-
- newPopup(item) {
- const position = this.DC.Transform.transformWGS84ToCartesian(
- new this.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, {
- domId: "divFormsDomBox",
- position: [position],
- });
-
- 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>
.labelLayeridewm {
- width: 250px !important;
- height: 250px !important;
+ width: 250px !important;
+ height: 250px !important;
}
</style>
--
Gitblit v1.9.3