From 81f54040c2cb65537c6c6e1db8358a39a57dea0d Mon Sep 17 00:00:00 2001
From: mayisheng <admin>
Date: Mon, 15 Aug 2022 16:14:01 +0800
Subject: [PATCH] 1
---
src/components/mobileWindow/index.vue | 418 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 381 insertions(+), 37 deletions(-)
diff --git a/src/components/mobileWindow/index.vue b/src/components/mobileWindow/index.vue
index d3ff556..f3ab628 100644
--- a/src/components/mobileWindow/index.vue
+++ b/src/components/mobileWindow/index.vue
@@ -1,30 +1,111 @@
<template>
+ <!-- 浮动弹窗 mobileWindow-->
<div
ref="mobile-mapContentContent"
v-show="!MobileWindowsHide"
id="mobile-map_content_content"
>
- <div class="mobile-popup-imgs-heard">
- <img :src="url" alt="" />
- <el-image
- style="width: 100px; height: 100px"
- :src="url"
- id="mobileBigImgs"
- v-show="false"
- :preview-src-list="srcList"
+ <div class="mobiletitle">
+ {{ title }}
+ <span
+ class="mobile_audio"
+ @click="openAudio"
+ v-show="introduce && !video"
>
- </el-image>
- <div>{{ query }}</div>
- <!-- 哈工大A10公寫总建筑面积30740平方米,于2001年采用货款方式高标准建造并投入使用。整个楼体共分十层,地上九层为公寫主体。公寓外观呈工字型,公寓内房司以A、B、C三个区域別分,与哈工大雄厚的工科底蕴遥相呼应,是哈尔滨工业大学学生公寫的标志性建筑 -->
+ <!-- <i class="el-icon-video-play icon" v-show="!audioState"></i>
+ <i class="el-icon-video-pause icon" v-show="audioState"></i> -->
+ <img
+ src="/img/icon/start-video.png"
+ class="icon"
+ alt=""
+ v-show="!audioState"
+ />
+ <img
+ src="/img/icon/close-video.png"
+ class="icon"
+ alt=""
+ v-show="audioState"
+ />
+ <!-- <div id="bdtts_div_id">
+ <audio id="tts_autio_id" autoplay="autoplay">
+ <source
+ id="tts_source_id"
+ src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&per=1&text=请输入文字"
+ type="audio/mpeg"
+ />
+ <embed id="tts_embed_id" height="0" width="0" src="" />
+ </audio>
+ </div> -->
+ </span>
</div>
- <div class="mobile-popup-control">
- <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs"
- >图集</el-link
- >
- <el-divider direction="vertical"></el-divider>
- <el-link icon="el-icon-map-location">实景</el-link>
- <el-divider direction="vertical"></el-divider>
- <el-link icon="el-icon-aim" @click="goOn">去这</el-link>
+ <div class="mobilelabel-content">
+ <div class="mobile-popup-imgs-heard">
+ <div class="mobile-popup-imgs-h-close">
+ <i class="el-icon-close icon" @click="closeWindow"></i>
+ </div>
+ <!-- <video :src="video" controls="controls" autoplay v-if="video"></video> -->
+ <playVideo
+ :src="video"
+ controls="controls"
+ autoplay
+ v-if="video"
+ ></playVideo>
+ <!-- <img :src="url" alt="" v-show="url && !video" /> -->
+ <!-- style="width: 100px; height: 100px" -->
+ <el-image
+ class="imgs"
+ :src="url"
+ id="mobileBigImgs"
+ v-show="url && !video"
+ :preview-src-list="srcList"
+ >
+ <!-- v-show="false" -->
+ </el-image>
+ <!-- <div>{{ query.query }}</div> -->
+ <div class="mobileBig-center-our" v-show="!video">
+ <div
+ v-for="(item, index) in center"
+ :key="index"
+ class="mobileBig-center"
+ >
+ <div class="m-c-title">{{ item.name }}：</div>
+ <span class="m-c-center">{{ item.value }}</span>
+ </div>
+ <div
+ class="mobileBig-center-introduce"
+ style="padding-top: 10px"
+ v-show="introduce"
+ v-html="introduce"
+ ></div>
+ </div>
+ </div>
+ <div class="mobile-popup-control">
+ <div v-for="(item, index) in seebut" :key="index">
+ <el-link
+ :icon="
+ item.name == '实景'
+ ? 'el-icon-place'
+ : item.name == '图集'
+ ? 'el-icon-data-board'
+ : item.name == '去这'
+ ? quzheD
+ ? 'el-icon-loading'
+ : 'el-icon-finished'
+ : item.name == '视频' || item.name == '返回'
+ ? 'el-icon-video-camera-solid'
+ : ''
+ "
+ class="mobilePopupOurOnce_r_d_in"
+ @click="openOnce(item.name)"
+ >{{ item.name }}</el-link
+ >
+ <el-divider
+ direction="vertical"
+ class="mobilePopupOurOnce_r_d_in"
+ v-if="index != seebut.length - 1"
+ ></el-divider>
+ </div>
+ </div>
</div>
</div>
</template>
@@ -34,37 +115,300 @@
export default {
name: "mobileWindow",
computed: {
- ...mapGetters(["MobileWindowsHide", "query"]),
+ ...mapGetters([
+ "MobileWindowsHide",
+ "query",
+ "MobileWindowChangeData",
+ "audioState",
+ // "areaLayerSelect",
+ ]),
},
watch: {
- MobileWindowsHide() {
+ MobileWindowChangeData() {
+ this.$store.dispatch("MSET_GETAUDIOBEGIN", "notOpen");
+ this.quzheD = false;
+ //数据更改
// this.fullscreenLoading = true;
- setTimeout(() => {
- // this.fullscreenLoading = false;
- console.log("地图点击弹窗数据请求参数", this.query);
- }, 500);
+ if (!this.MobileWindowsHide) {
+ this.video = ""; //清除视频
+ this.seebut = []; //清除按钮
+ let queryData = this.query.query;
+ // console.log(queryData, 789);
+ this.title = queryData.name;
+ //判断是否显示操作按钮
+ if (queryData.seebut) {
+ this.seebut = queryData.seebut;
+ if (queryData.from == "活动") {
+ this.seebut = [];
+ this.seebut.push({
+ name: "图集",
+ });
+ this.seebut.push({
+ name: "显示活动",
+ });
+ if (queryData.notAddGoOn == "notAddGoOn") {
+ this.seebut.push({
+ name: "去这",
+ });
+ }
+ }
+ for (let k in this.seebut) {
+ if (this.seebut[k].name == "定位") {
+ this.seebut.splice(k, k + 1);
+ }
+ }
+ if (queryData.notAddGoOn != "notAddGoOn") {
+ this.seebut.push({
+ name: "去这",
+ });
+ }
+ } else {
+ this.seebut = [
+ // {
+ // name: "实景",
+ // },
+ {
+ name: "图集",
+ },
+ {
+ name: "去这",
+ },
+ ];
+ }
+ //图集
+ if (queryData.bgImg) {
+ this.srcList = queryData.bgImg.split(",");
+ this.url = this.srcList[0];
+ } else {
+ this.seebut = this.seebut.filter((res) => {
+ return res.name != "图集";
+ });
+ }
+ //视频
+ if (queryData.video) {
+ if (queryData.from == "labels") {
+ this.seebut = [];
+ this.video = queryData.video;
+ } else {
+ this.seebut.push({ name: "视频" });
+ }
+ }
+ //全景
+ if (queryData.panoramaurl) {
+ this.panoramaurl = queryData.panoramaurl;
+ this.seebut = this.seebut.filter((res) => {
+ return res.name != "实景";
+ });
+ this.seebut.splice(0, 0, { name: "实景" });
+ } else {
+ this.panoramaurl = "";
+ this.seebut = this.seebut.filter((res) => {
+ return res.name != "实景";
+ });
+ }
+ //中心内容
+ this.center = [];
+ for (let k in queryData) {
+ for (let n in this.getCenter) {
+ if (
+ k == this.getCenter[n].name &&
+ queryData[k] &&
+ queryData.from != "活动" &&
+ this.getCenter[n].value == "地址"
+ ) {
+ this.center.push({
+ name: this.getCenter[n].value,
+ value: queryData[k] ? queryData[k] : "暂无",
+ });
+ }
+ if (k == "introduce") {
+ this.introduce = queryData[k];
+ if (this.introduce) {
+ setTimeout(() => {
+ let Str = document.querySelector(
+ ".mobileBig-center-introduce"
+ ).innerText;
+ this.$store.dispatch("MSET_GETAUDIO", Str); //加入语音
+ }, 20);
+ }
+ }
+ }
+ }
+ }
},
},
data() {
return {
- fullscreenLoading: false,
- url: "/img/job/one.jpg",
- positions: "",
- srcList: [
- "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
- "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
+ getCenter: [
+ {
+ name: "websiteUrl",
+ value: "网址",
+ },
+ {
+ name: "telePhone",
+ value: "电话",
+ },
+ {
+ name: "address",
+ value: "地址",
+ },
+ // {
+ // name: "introduce",
+ // value: "详情",
+ // },
],
+ introduce: "暂无详情数据",
+ title: "",
+ fullscreenLoading: false,
+ url: "",
+ video: "",
+ positions: "",
+ srcList: [],
+ seebut: [],
+ center: [],
+ panoramaurl: "",
+ quzheD: false, //是否点击了去这，并不能再按，以及不应用路线导航
};
},
methods: {
- mobileOpenImgs() {
- let imgsDom = document.getElementById("mobileBigImgs");
- imgsDom.click();
+ //按钮点击事件
+ openOnce(val) {
+ let that = this;
+ that.routerS = [];
+ let once = true;
+ let query = this.query.query;
+ // console.log(query);
+ if (val == "去这") {
+ if (that.quzheD) {
+ console.log("不可点击");
+ return;
+ }
+ that.quzheD = true;
+ // return;
+ //定位
+ // console.log(this.query.query);
+ // that.$store.commit("set_endPosition", this.query.query.lntLat);
+ let doit = (now) => {
+ if (now[0] == "失败") {
+ that.quzheD = false;
+ return;
+ }
+ let ints = {
+ start: [+now[0], +now[1]],
+ end: [+query.lntLat[0], +query.lntLat[1], 360],
+ // start: [+query.lntLat[0], +query.lntLat[1], 360],
+ // end: [114.031946, 27.621475],
+ type: "driving",
+ fn: function (datas) {
+ //获取回调路径
+ that.routerS.push(datas);
+ that.quzheD = false;
+ if (once) {
+ once = false;
+ //加载第一条线路
+ that.$store.commit("set_choiceRouterS", 0);
+ that.$store.dispatch("MSET_DRAWALINELAYER", [datas.Str, query]);
+ that.$store.commit("cameraSetView", ints.start);
+ }
+ },
+ };
+ that.$store.dispatch("MSET_GOTOWHERE", ints);
+ };
+ that.$store.commit("GET_NOWPOSITION", (res) => {
+ console.log(res);
+ doit(res);
+ });
+ } else if (val == "实景") {
+ console.log(this.panoramaurl, query);
+ this.$store.commit("MSET_OPENMOBILEPANORAMA", this.panoramaurl);
+ return;
+ this.$store.commit(
+ "MSET_OPENMOBILEPANORAMA",
+ "https://www.kuleiman.com/110487/index.html?m=1"
+ );
+ } else if (val == "图集") {
+ let imgsDom = document.getElementById("mobileBigImgs");
+ if (imgsDom) {
+ imgsDom.click();
+ }
+ } else if (val == "视频") {
+ this.seebut[this.seebut.length - 1].name = "返回";
+ this.video = this.query.query.video;
+ } else if (val == "返回") {
+ this.seebut[this.seebut.length - 1].name = "视频";
+ this.video = "";
+ } else if (val == "显示活动") {
+ let addressOur = this.changeData(query, "addressname", "address");
+ let lxOur = this.changeData(query, "lxname", "lx");
+ console.log(addressOur, lxOur);
+ that.$store.dispatch("MSET_DRAWALINELAYERMANY", [
+ lxOur,
+ addressOur,
+ query,
+ ]);
+ }
},
- goOn() {},
+ //修改数据
+ changeData(data, name, value) {
+ let arr = [];
+ for (let k in data[name]) {
+ arr.push({
+ name: data[name][k],
+ value:
+ name == "lxname"
+ ? data[value][k]
+ .split("(")[1]
+ .split(")")[0]
+ .split(",")
+ .join(";")
+ .split(" ")
+ .join(",")
+ : [+data[value][k].split(",")[0], +data[value][k].split(",")[1]],
+ });
+ }
+ return arr;
+ },
+ closeWindow() {
+ if (!this.MobileWindowsHide) {
+ let that = this;
+ this.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
+ if (window.select.overlay != undefined) {
+ window.select.overlay.setStyle({
+ material: window.select.color,
+ outline: false,
+ });
+
+ that.$store.commit("mset_changeSelect", [undefined, undefined]);
+ }
+ }
+ },
+ openAudio() {
+ if (this.introduce) {
+ this.$store.dispatch("MSET_GETAUDIOBEGIN");
+ }
+ },
},
};
</script>
-<style>
-</style>
\ No newline at end of file
+<style lang="scss">
+.mobile_audio {
+ margin-left: 3px;
+ .icon {
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ float: right;
+ position: relative;
+ right: 8px;
+ }
+}
+#bdtts_div_id {
+ width: 100px;
+ height: 100px;
+ display: inline-block;
+ position: absolute;
+ top: -50px;
+ background-color: #fff;
+}
+</style>
--
Gitblit v1.9.3