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/mobileActivity/index.vue | 187 ++++++++++++++++++++++++++++++++++++----------
1 files changed, 144 insertions(+), 43 deletions(-)
diff --git a/src/components/mobileActivity/index.vue b/src/components/mobileActivity/index.vue
index c367f2f..4a859d1 100644
--- a/src/components/mobileActivity/index.vue
+++ b/src/components/mobileActivity/index.vue
@@ -1,4 +1,7 @@
<template>
+ <!-- 活动弹窗
+mobileActivity
+ -->
<div
id="mobileActivity"
:style="{ height: height + 'px' }"
@@ -13,7 +16,7 @@
</div>
<div class="mobileActivity_in">
<!-- <el-button type="primary" @click="init">open</el-button>
- <el-button type="success" @click="closeInit">close</el-button> -->
+ <el-button type="success" @click="closeInit">close</el-button>-->
<div class="mobileActivity_insmall">
<!-- <img :src="imgs" alt="" class="mobileActivity_insmallimg" /> -->
<el-image
@@ -27,10 +30,10 @@
v-for="(item, index) in useData.smallData"
:key="index"
>
- <span class="mobileActivity_insmallxiangqingIn_s">{{
- item.lable
- }}</span
- >: {{ item.value }}
+ <span class="mobileActivity_insmallxiangqingIn_s">
+ {{ item.lable }}
+ </span>
+ : {{ item.value }}
</div>
</div>
</div>
@@ -40,22 +43,22 @@
v-for="(item, index) in useData.detailedData"
:key="index"
>
- <span class="mobileActivity_insmallxiangqingIn_s">{{
- item.lable
- }}</span
- >: {{ item.value }}
+ <span class="mobileActivity_insmallxiangqingIn_s">
+ {{ item.lable }}
+ </span>
+ : {{ item.value }}
</div>
</div>
</div>
<div class="mobileActivity_coutrol" :style="{ bottom: bottom + 'px' }">
<ul>
<li
- v-for="(item, index) in leftNavData"
+ v-for="(item, index) in ourLeftData"
:key="index"
@click="mobileActivityCoutrolClick(item)"
v-show="!item.notShow"
>
- <img :src="item.img" alt="" />
+ <img :src="item.img" alt />
<span>{{ item.label }}</span>
</li>
</ul>
@@ -66,19 +69,25 @@
<script>
import { mapGetters } from "vuex";
import moveWindow from "./move";
+import { getdetail } from "@/api/mobile/hd/hd";
+window.serviceMapSee = {};
+window.onceServiceMap = null;
export default {
name: "mobileActivity",
computed: {
...mapGetters([
"showActivity",
"showActivityData",
- "drawALineLayerMany",
- "drawAPointLayerMany",
+ // 'drawALineLayerMany',
+ // 'drawAPointLayerMany'
]),
+ ourLeftData() {
+ return [...this.serviceMap, ...this.leftNavData];
+ },
},
data() {
- let heig = 135;
- let bottom = 150;
+ const heig = 135;
+ const bottom = 150;
return {
useHeight: heig,
height: heig,
@@ -126,6 +135,19 @@
// // imgSrc: "img/mobile/blue.png",
// },
],
+ //底图
+ serviceMap: [
+ // {
+ // flag: true,
+ // label: "底图1",
+ // img: "/img/leftnav/way-checked.png",
+ // normal: "/img/leftnav/way.png",
+ // checked: "/img/leftnav/way-checked.png",
+ // layer: "wayLayer",
+ // imgSrc: "img/mobile/green.png",
+ // layer: null,
+ // },
+ ],
};
},
watch: {
@@ -137,16 +159,16 @@
// this.height = this.useHeight;
// }
// },
+ //当弹窗显示时，开始操作数据
showActivity() {
if (this.showActivity) {
- this.inToInit(); //初始化
+ this.inToInit(); // 初始化
this.hdTitle = this.showActivityData.name;
- console.log(this.showActivityData);
- //new窗口对象
- let that = this;
- let windowHeight = document.body.clientHeight;
- this.doData(this.showActivityData); //使用数据
+ // new窗口对象
+ const that = this;
+ const windowHeight = document.body.clientHeight;
+ this.doData(this.showActivityData); // 使用数据
// 获取最大高度避免数据过少，空格多
// let heard = document.querySelector(".mobileActivity_heard");
// let ins = document.querySelector(".mobileActivity_in");
@@ -158,7 +180,7 @@
});
});
// return;
- let doit = (maxheights) => {
+ const doit = (maxheights) => {
this.domMove = new moveWindow({
id: "mobileActivity",
minHeight: that.useHeight,
@@ -175,13 +197,13 @@
});
this.domMove.init();
// console.log(this.domMove);
- //转移···添加点和线
- let addressOur = this.changeData(
+ // 转移···添加点和线
+ const addressOur = this.changeData(
this.useData.query,
"addressname",
"address"
);
- let lxOur = this.changeData(this.useData.query, "lxname", "lx");
+ const lxOur = this.changeData(this.useData.query, "lxname", "lx");
// console.log(addressOur, lxOur);
that.$store.dispatch("MSET_DRAWALINELAYERMANY", [
lxOur,
@@ -191,25 +213,84 @@
that.domMove.opens(false, true);
},
]);
+
+ //绘画底图
+ //获取详细信息，来获取底图
+ // console.log(this.showActivityData, "see");
+ that.serviceMap = [];
+ // if (that.serviceMap.length > 0) {
+ // for (let k in window.serviceMapSee) {
+ // if (window.serviceMapSee[k].flag) {
+ // global.viewer.imageryLayers.remove(
+ // window.serviceMapSee[k].layer
+ // );
+ // }
+ // }
+ // }
+ //处理底图
+ window.serviceMapSee = {};
+ getdetail(this.showActivityData.opendata.id).then((res) => {
+ let name = res.data.data.mapname.split(",");
+ let url = res.data.data.url.split(",");
+ for (let k in name) {
+ let d = {
+ flag: true,
+ label: name[k],
+ img: "/img/leftnav/monitor-checked.png",
+ normal: "/img/leftnav/monitor.png",
+ checked: "/img/leftnav/monitor-checked.png",
+ imgSrc: "/img/leftnav/map-monitor.png",
+ layer: "serviceMap" + that.serviceMap.length,
+ url: url[k],
+ to: "serviceMap",
+ };
+ this.serviceMap.push(d); //数据层
+ // console.log(d, "see");
+
+ window.onceServiceMap =
+ new global.DC.Namespace.Cesium.ArcGisMapServerImageryProvider({
+ url: url[k],
+ });
+ window.serviceMapSee[d.layer] = {
+ flag: true,
+ layer: global.viewer.imageryLayers.addImageryProvider(
+ window.onceServiceMap
+ ), //渲染层
+ source: window.onceServiceMap, //渲染源
+ };
+ window.onceServiceMap = null;
+ }
+ });
};
+ } else {
+ // console.log(this.showActivity, "see");
+ if (window.serviceMapSee != {}) {
+ for (let k in window.serviceMapSee) {
+ if (window.serviceMapSee[k].flag) {
+ //如果是显示状态 就让他关闭
+ global.viewer.imageryLayers.remove(window.serviceMapSee[k].layer);
+ }
+ }
+ window.serviceMapSee = {};
+ }
}
},
},
mounted() {},
methods: {
inToInit() {
- //初始化
+ // 初始化
this.openValue = false;
this.height = this.useHeight;
this.bottom = this.useBottom;
- for (let k in this.leftNavData) {
+ for (const k in this.leftNavData) {
this.leftNavData[k].flag = true;
this.leftNavData[k].img = this.leftNavData[k].checked;
}
},
- //处理主数据
+ // 处理主数据
doData(val) {
- let srcList = val.opendata.tpurl.split(",");
+ const srcList = val.opendata.tpurl.split(",");
this.useData = {
data: val,
url: srcList[0],
@@ -243,7 +324,7 @@
introduce: val.opendata.context,
video: val.opendata.videourl,
// buts: ["定位"],
- //活动添加的字段
+ // 活动添加的字段
addressname: val.opendata.addressname.split(";"),
address: val.opendata.address.split(";"),
lxname: val.opendata.lxname.split(";"),
@@ -252,19 +333,19 @@
val.opendata.address.split(";")[0].split(",")[0],
val.opendata.address.split(";")[0].split(",")[1],
],
- panoramaurl: val.opendata.panoramaurl, //全景
+ panoramaurl: val.opendata.panoramaurl, // 全景
},
};
},
- //启动监听事件
+ // 启动监听事件
init() {
this.domMove.init();
},
- //关闭监听事件
+ // 关闭监听事件
closeInit() {
this.domMove.closeInit();
},
- //控制线路和点的显影
+ // 控制线路和点的显影
mobileActivityCoutrolClick(item) {
item.flag = !item.flag;
if (item.flag == true) {
@@ -272,14 +353,34 @@
} else {
item.img = item.normal;
}
+ if (item.to == "serviceMap") {
+ //再次判断是否是底图的加载
+ console.log(window.serviceMapSee[item.layer]);
+ //清除
+ if (!item.flag && window.serviceMapSee[item.layer].flag) {
+ window.serviceMapSee[item.layer].flag = false;
+ global.viewer.imageryLayers.remove(
+ window.serviceMapSee[item.layer].layer
+ );
+ }
+ // 显示
+ if (item.flag && !window.serviceMapSee[item.layer].flag) {
+ window.serviceMapSee[item.layer].flag = true;
+ window.serviceMapSee[item.layer].layer =
+ global.viewer.imageryLayers.addImageryProvider(
+ window.serviceMapSee[item.layer].source
+ );
+ }
+ return;
+ }
this.$store.commit("showLineOrPoint", {
layer: item.layer,
flag: item.flag,
});
},
changeData(data, name, value) {
- let arr = [];
- for (let k in data[name]) {
+ const arr = [];
+ for (const k in data[name]) {
arr.push({
name: data[name][k],
value:
@@ -301,11 +402,11 @@
if (this.domMove) {
this.closeInit();
}
- //关闭路线和点的图层
+ // 关闭路线和点的图层
this.$store.commit("removePolylineMany");
- //关闭随地图弹窗
+ // 关闭随地图弹窗
this.$store.dispatch("closeMobileWindowsDom");
- //显示右侧栏
+ // 显示右侧栏
this.$store.commit("SET_SeeAndNotSee", true);
},
checkDom(methods, name, fn) {
@@ -314,7 +415,7 @@
// 检查dom是否执行完成
function checkDom() {
// let dom = that.$refs[name];
- let dom = document[methods](name);
+ const dom = document[methods](name);
if (dom) {
// 执行dom加载完成后的操作
// 清除定时器
@@ -322,9 +423,8 @@
clearTimeout(timer);
}
if (fn) {
- //回调函数
+ // 回调函数
fn(dom);
- return;
} else {
return dom;
}
@@ -475,13 +575,14 @@
margin-bottom: 6px;
font-weight: 400;
display: block;
- width: 80px;
+ // width: 80px;
height: 30px;
line-height: 30px;
background-color: #fff;
border-radius: 15px;
text-align: center;
font-size: 0;
+ padding: 0 6px;
cursor: pointer;
img {
--
Gitblit v1.9.3