From bf58722dfd03ea1513f3acc7331d4d4403fca76e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 18 Mar 2022 11:48:37 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
src/components/map/components/mapPopup.vue | 1627 ++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 1,177 insertions(+), 450 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index 675dd4e..04c3ab4 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -1,479 +1,1206 @@
<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 @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>
- <li v-show="panoramaUrl != null && panoramaUrl != ''"
- @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"
- id="PanoramaBox">
- <div style="width: 100%; height: 100%;">
- <div class="panorama-container">
- <div class="panorama-wrap">
- <div class="content-wrap">
- <div class="title">
- {{stateName}}
- <img @click="closePanoramaPopupBox"
- class="close-box"
- src="/img/navicon/close.png"
- alt="">
- </div>
- <div class="content">
- <iframe :src="panoramaUrl"
- frameborder="0"></iframe>
- </div>
- </div>
- </div>
- <div class="arrow"></div>
+ <div
+ v-show="siteName != null && siteName != ''"
+ class="site"
+ >
+ <strong>地址：</strong>
+ {{ siteName }}
</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
+ 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>
- <!-- 二维码弹框相关 -->
- <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
+ 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>
- </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">
+ <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">
+ <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 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 { mapGetters } from "vuex";
+import { getMechanismDetail } from "@/api/pc/public/arc";
+import { setlabel } from "@/api/pc/label";
+import { add } from "@/api/pc/leftNav/index";
export default {
- name: 'mapPopup',
- data () {
- return {
- DC: null,
- tabBtnFlag: '教学科研行政',
- QRCodeFlag: false,
- audioSource: '',
- audioFlag: false,
- audioCourse: false,
- audioSynth: null,
- audioMsg: null
+ name: "mapPopup",
+
+ data() {
+ return {
+ ourImages: [],
+ dialogImageUrl: "",
+ dialogVisible: false,
+ apiUrls: null,
+ tabBtnFlag: "教学科研行政",
+ QRCodeFlag: false,
+ 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() {
+ this.apiUrls = window.$apiUrls;
+
+ this.audioSynth = window.speechSynthesis;
+ this.audioMsg = new window.SpeechSynthesisUtterance();
+
+ this.audioMsg.onend = function () {
+ this.audioSynth.cancel();
+ this.audioFlag = false;
+ this.audioCourse = false;
+ };
+ },
+ 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); // 开启其他操作
+ }
},
- computed: {
- ...mapGetters([
- 'viewer',
- 'popupBgUrl',
- 'pupupQRUrl',
- // 终点
- 'terminus',
- // 起点
- 'startingPoint',
- // 点信息
- 'pointPosition',
- // 点名称
- 'stateName',
- // 地址
- 'siteName',
- // 电话
- 'telephone',
- // 介绍
- 'introduceText',
- // 详情弹框显示关闭
- 'detailsPopup',
- // 全景地址
- 'panoramaUrl',
- // 全景弹框显示关闭
- 'panoramaPopup',
- // 监控地址
- 'monitorUrl',
- // 监控弹框显示关闭
- 'monitorPopup',
-
- 'popupImgAtlas',
- // 教学
- 'teachList',
- // 科研
- 'liveList',
- // 社区内导航的显示关闭
- 'campusNavFlag'
- ])
+ addTagPopup() {
+ if (!this.addTagPopup) {
+ // console.log("取消", "see");
+ this.$store.commit("set_closeMapClick", false);
+ }
},
- 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
+ introduceText: {
+ immediate: true,
+ handler(newQuestion, oldQuestion) {
+ this.audioSource = newQuestion;
+ if (this.audioFlag == true) {
+ this.audioSynth.cancel();
+ this.audioFlag = false;
+ this.audioCourse = false;
}
+ },
},
- 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
- }
- }
- }
+ teachList: {
+ immediate: true,
+ handler(newCode, oldCode) {
+ if (newCode.length > 0) {
+ this.tabBtnFlag = "教学科研行政";
}
+ },
},
- methods: {
- 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(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(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)
- },
-
- 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)
+ 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: {
+ onsuccess(response, file, fileList) {
+ this.ourImages = fileList;
+ },
+ handleRemove(file, fileList) {
+ this.ourImages = fileList;
+ },
+ handlePictureCardPreview(file) {
+ this.dialogImageUrl = file.url;
+ this.dialogVisible = true;
+ },
+ chouseAddicon(item) {
+ this.addIconFromcolumn[item.index].value =
+ this.addIconFromcolumn[item.index].chouse[item.indexc].value;
+ this.addIconFromcolumn[item.index].valueid =
+ this.addIconFromcolumn[item.index].chouse[item.indexc].id;
+ },
+ closeaddIconsLayerIconPopup() {
+ this.$store.commit("SET_addIconsLayerIconPopup", false);
+ },
+ saveIconsLayer() {
+ var imgs = [];
+ // console.log("see", this.ourImages);
+ // return;
+ for (var k in this.ourImages) {
+ imgs.push(this.ourImages[k].response);
+ }
+ const d = {
+ tpurl: imgs.join(","),
+ mechanismname: this.addIconFromcolumn[0].value,
+ telephone: this.addIconFromcolumn[1].value,
+ type: this.addIconFromcolumn[2].valueid,
+ campus: this.addIconFromcolumn[3].valueid,
+ introduce: this.addIconFromcolumn[4].value,
+ address: this.addIconFromcolumn[5].value,
+ panoramaurl: this.addIconFromcolumn[6].value,
+ videourl: this.addIconFromcolumn[7].value,
+ websiteurl: this.addIconFromcolumn[8].value,
+ jd: this.addIconFromcolumn[9].value,
+ wd: this.addIconFromcolumn[10].value,
+ heading: this.addIconFromcolumn[11].value,
+ pitch: this.addIconFromcolumn[12].value,
+ roll: this.addIconFromcolumn[13].value,
+ gd: this.addIconFromcolumn[14].value,
+ };
+ // console.log(d, "see3");
+ // return;
+ // this.$store.commit("set_closeMapClick", false); //开启其他操作
+ add(d).then(
+ () => {
+ this.$message({
+ type: "success",
+ message: "操作成功!",
+ });
+ this.closeaddIconsLayerIconPopup();
+ },
+ (error) => {
+ window.console.log(error);
+ }
+ );
+ },
+ screen() {
+ if (this.fullscreen) {
+ this.fullScreenUrl = "/img/icon/bigScreen.png";
+ 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 = 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;
+ }
+ // 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.$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);
+ let 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);
+ },
+
+ 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);
+ 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>
+<style lang="scss">
+.labelLayeridewm {
+ width: 250px !important;
+ height: 250px !important;
+}
+
+.add-sign-box-style {
+ input:-moz-placeholder,
+ textarea:-moz-placeholder {
+ color: #fff;
+ }
+ input:-ms-input-placeholder,
+ textarea:-ms-input-placeholder {
+ color: #fff;
+ }
+ input::-webkit-input-placeholder,
+ textarea::-webkit-input-placeholder {
+ color: #fff;
+ }
+
+ .addIconsLayerinimgs {
+ margin-top: 4px;
+ }
+
+ .addIconsLayerin {
+ padding: 0 10px;
+ }
+}
</style>
--
Gitblit v1.9.3