school-web.git - Gitblit

			@@ -1,652 +1,696 @@
			<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 :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="arrow"></div>
			<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>
			</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"
			:class="{'change-full': fullscreen}"
			id="FullScreenBox"
			<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)"
			>
			<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>
			<i
			class="popup-icon location-icon deblurring"
			></i>
			{{ item }}
			</li>
			</ul>
			</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 :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 class="arrow"></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 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="arrow"></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"
			<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"
			:class="{ 'change-full': fullscreen }"
			id="FullScreenBox"
			>
			<div class="title">
			{{ stateName }}
			<img
			@click="screen"
			class="full-srceen-btn"
			:src="fullScreenUrl"
			alt
			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;"
			>(右键另存为图片)</div>
			/>
			<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>
			</el-dialog>
			<div class="arrow"></div>
			</div>
			</div>
			</div>

			<el-image
			v-show="false"
			style="width: 100px; height: 100px"
			:src="popupImgAtlas[0]"
			:preview-src-list="popupImgAtlas"
			ref="popupImgs"
			></el-image>
			<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>
			</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>

			<!-- 二维码弹框相关 -->
			<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;
			right: 0;
			bottom: 0;
			margin: auto;
			"
			/>
			<div
			style="
			position: absolute;
			bottom: 0;
			width: 100%;
			line-height: 36px;
			text-align: center;
			"
			>
			(右键另存为图片)
			</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>
			</template>

			<script>
			import { mapGetters } from 'vuex'
			import { getMechanismDetail } from '@/api/pc/public/arc'
			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
			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",
			]),
			},
			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: {
			introduceText: {
			immediate: true,
			handler(newQuestion, oldQuestion) {
			this.audioSource = newQuestion;
			if (this.audioFlag == true) {
			this.audioSynth.cancel();
			this.audioFlag = false;
			this.audioCourse = false;
			}
			},
			},
			computed: {
			...mapGetters([
			'viewer',
			'popupBgUrl',
			'pupupQRUrl',
			// 终点
			'terminus',
			// 起点
			'startingPoint',
			// 点信息
			'pointPosition',
			// 点名称
			'stateName',
			// 地址
			'siteName',
			// 电话
			'telephone',
			// 介绍
			'introduceText',
			// 详情弹框显示关闭
			'detailsPopup',
			// 全景地址
			'panoramaUrl',
			// 全景弹框显示关闭
			'panoramaPopup',
			// 监控地址
			'monitorUrl',
			// 监控弹框显示关闭
			'monitorPopup',

			'popupImgAtlas',
			// 教学
			'teachList',
			// 科研
			'liveList',
			// 社区内导航的显示关闭
			'campusNavFlag',
			'addTagPopup',
			'addTagPosition'
			])
			},
			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
			teachList: {
			immediate: true,
			handler(newCode, oldCode) {
			if (newCode.length > 0) {
			this.tabBtnFlag = "教学科研行政";
			}
			},
			},
			mounted () {

			},
			watch: {
			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
			}
			}
			}
			liveList: {
			immediate: true,
			handler(newCode, oldCode) {
			if (newCode.length > 0 && this.teachList.length == 0) {
			this.tabBtnFlag = "生活服务";
			}
			},
			},
			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)
			},

			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)
			}

			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.addTagName = ''

			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, '')
			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);
			},

			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.commit("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></style>