<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>
|
</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 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>
|
</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 { 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",
|
]),
|
},
|
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;
|
}
|
},
|
},
|
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;
|
}
|
}
|
},
|
},
|
},
|
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>
|
