<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="audioImgUrl"
|
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="pupupQRUrl != ''" @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">
|
<img
|
@click="returnDetailsPopup"
|
class="return-btn"
|
src="/img/icon/return.png"
|
alt
|
/>
|
{{ 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">
|
<img
|
@click="returnDetailsPopup"
|
class="return-btn"
|
src="/img/icon/return.png"
|
alt
|
/>
|
{{ stateName }}
|
<img
|
@click="closeMonitorPopupBox"
|
class="close-box"
|
src="/img/navicon/close.png"
|
alt
|
/>
|
</div>
|
<div class="content">
|
<play-video
|
:sourceUrl="monitorUrl"
|
@playStatus="changePlayStatus"
|
></play-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 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>
|
|
<!-- 二维码弹框相关 -->
|
<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'
|
import { add } from '@/api/pc/leftNav/index'
|
|
export default {
|
name: 'mapPopup',
|
|
data () {
|
return {
|
ourImages: [],
|
dialogImageUrl: '',
|
dialogVisible: false,
|
apiUrls: null,
|
tabBtnFlag: '教学科研行政',
|
QRCodeFlag: false,
|
audioImgUrl: '/img/icon/close-video.png',
|
audioSource: '',
|
audioFlag: false,
|
audioCourse: false,
|
audioSynth: null,
|
audioMsg: null,
|
fullscreen: false,
|
fullScreenUrl: '/img/icon/bigScreen.png',
|
addTagName: '',
|
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: {
|
...mapGetters([
|
'popupBgUrl',
|
'pupupQRUrl',
|
// 终点
|
'terminus',
|
// 起点
|
'startingPoint',
|
// 点信息
|
'pointPosition',
|
// 点名称
|
'stateName',
|
// 地址
|
'siteName',
|
// 电话
|
'telephone',
|
// 介绍
|
'introduceText',
|
// 详情弹框显示关闭
|
'detailsPopup',
|
// 全景地址
|
'panoramaUrl',
|
// 全景弹框显示关闭
|
'panoramaPopup',
|
// 监控地址
|
'monitorUrl',
|
// 监控弹框显示关闭
|
'monitorPopup',
|
|
'popupImgAtlas',
|
// 教学
|
'teachList',
|
// 科研
|
'liveList',
|
// 社区内导航的显示关闭
|
'campusNavFlag',
|
'addTagPopup',
|
'addTagPosition',
|
// 自定义标签弹窗
|
'labelLayerDataShow',
|
'nowlabelLayerData',
|
'addIconsLayerIconPopup', // 自定义标签编辑窗口
|
'addIconsLayerIconPosition' // 自定义标签坐标
|
])
|
},
|
created () {
|
var that = this
|
this.apiUrls = window.$apiUrls
|
|
this.audioSynth = window.speechSynthesis
|
this.audioMsg = new window.SpeechSynthesisUtterance()
|
|
this.$nextTick(() => {
|
this.audioMsg.onend = function () {
|
that.audioSynth.cancel()
|
that.audioFlag = false
|
that.audioCourse = false
|
that.audioImgUrl = '/img/icon/close-video.png'
|
}
|
})
|
},
|
mounted () {
|
global.viewer.scene.globe.depthTestAgainstTerrain = false
|
},
|
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) {
|
this.audioSource = newQuestion
|
if (this.audioFlag == true) {
|
this.audioSynth.cancel()
|
this.audioFlag = false
|
this.audioCourse = false
|
this.audioImgUrl = '/img/icon/close-video.png'
|
}
|
}
|
},
|
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) {
|
if (this.audioSynth != null) {
|
this.audioSynth.cancel()
|
}
|
this.audioFlag = false
|
this.audioCourse = false
|
} else {
|
if (this.audioFlag == true) {
|
if (this.audioSynth != null) {
|
this.audioSynth.cancel()
|
}
|
this.audioFlag = false
|
this.audioCourse = false
|
this.audioImgUrl = '/img/icon/close-video.png'
|
}
|
}
|
}
|
}
|
},
|
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(
|
(res) => {
|
// console.log(res);
|
if (res.data.code == 200) {
|
this.$message({
|
type: 'success',
|
message: '操作成功!'
|
})
|
} else {
|
this.$message({
|
type: 'error',
|
message: '新增失败!'
|
})
|
}
|
|
this.closeaddIconsLayerIconPopup()
|
},
|
(error) => {
|
window.console.log(error)
|
}
|
)
|
},
|
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
|
this.audioImgUrl = '/img/icon/close-video.png'
|
}
|
|
// eslint-disable-next-line new-cap
|
var positions = global.DC.Transform.transformWGS84ToCartesian(
|
// eslint-disable-next-line new-cap
|
new global.DC.Position.fromArray(this.pointPosition)
|
)
|
|
// eslint-disable-next-line no-unused-vars
|
var panorama = new global.DC.PanoramaBox(global.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
|
this.audioImgUrl = '/img/icon/close-video.png'
|
}
|
// eslint-disable-next-line new-cap
|
var positions = global.DC.Transform.transformWGS84ToCartesian(
|
// eslint-disable-next-line new-cap
|
new global.DC.Position.fromArray(this.pointPosition)
|
)
|
// eslint-disable-next-line no-unused-vars
|
var monitor = new global.DC.PanoramaBox(global.viewer, {
|
domId: 'MonitorBox',
|
position: [positions]
|
})
|
this.$store.commit('SET_PANORAMAPOPUP', false)
|
this.$store.commit('SET_DETAILSPOPUP', false)
|
this.$store.commit('SET_MONITORPOPUP', true)
|
},
|
|
returnDetailsPopup () {
|
var positions = global.DC.Transform.transformWGS84ToCartesian(
|
// eslint-disable-next-line new-cap
|
new global.DC.Position.fromArray(this.pointPosition)
|
)
|
|
// eslint-disable-next-line no-unused-vars
|
var divBox = new global.DC.PanoramaBox(global.viewer, {
|
domId: 'divFormsDomBox',
|
position: [positions]
|
})
|
|
global.viewer.zoomToPosition(
|
// eslint-disable-next-line new-cap
|
new global.DC.Position.fromArray(this.pointPosition)
|
)
|
|
this.$store.commit('SET_DETAILSPOPUP', true)
|
this.$store.commit('SET_MONITORPOPUP', false)
|
this.$store.commit('SET_PANORAMAPOPUP', false)
|
},
|
|
closeMapPopupBox () {
|
if (this.audioFlag == true) {
|
this.audioSynth.cancel()
|
this.audioFlag = false
|
this.audioCourse = false
|
this.audioImgUrl = '/img/icon/close-video.png'
|
}
|
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)
|
|
// 2022.3.2对接接口
|
// 新增标签
|
const data = {
|
name: this.RemoveTheBlank(this.addTagName),
|
jd: this.addTagPosition.lng,
|
wd: this.addTagPosition.lat
|
}
|
// console.log(data);
|
const oks = setTimeout(() => {
|
that.$message({
|
message: '新增标签失败',
|
type: 'warning'
|
})
|
}, 5000)
|
setlabel(data).then((res) => {
|
clearTimeout(oks)
|
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
|
})
|
}
|
},
|
|
closePanoramaPopupBox () {
|
this.$store.commit('SET_PANORAMAURL', '')
|
this.$store.commit('SET_PANORAMAPOPUP', false)
|
},
|
|
closeMonitorPopupBox () {
|
this.$store.commit('SET_MONITORURL', '')
|
this.$store.commit('SET_MONITORPOPUP', false)
|
},
|
|
changePlayStatus (status) { // 获取子组件的播放状态
|
console.log(status)
|
},
|
|
audioPlay () {
|
if (this.audioFlag == false) {
|
this.audioMsg.text = this.audioSource
|
this.audioSynth.speak(this.audioMsg)
|
this.audioFlag = true
|
this.audioCourse = true
|
this.audioImgUrl = '/img/icon/start-video.png'
|
} else {
|
if (this.audioCourse == true) {
|
this.audioSynth.pause()
|
this.audioCourse = false
|
this.audioImgUrl = '/img/icon/close-video.png'
|
} else {
|
this.audioSynth.resume()
|
this.audioCourse = true
|
this.audioImgUrl = '/img/icon/start-video.png'
|
}
|
}
|
},
|
|
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)
|
global.viewer.flyToPosition(
|
new global.DC.Position(
|
Number(result.jd),
|
Number(result.wd),
|
300,
|
Number(result.heading),
|
Number(result.pitch),
|
Number(result.roll)
|
),
|
function () { },
|
3
|
)
|
})
|
},
|
|
newPopup (item) {
|
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 global.DC.DivForms(global.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 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>
|
