<template>
|
<!-- 活动弹窗
|
mobileActivity
|
-->
|
<div
|
id="mobileActivity"
|
:style="{ height: height + 'px' }"
|
:class="[openValue ? 'isOpens' : 'notOpens']"
|
v-if="showActivity"
|
>
|
<div class="mobileActivity_heard">
|
<div class="mobileActivity_title">活动标题：{{ hdTitle }}</div>
|
<div class="mobileActivity_close" @click="closeActivity">
|
<i class="el-icon-close"></i>
|
</div>
|
</div>
|
<div class="mobileActivity_in">
|
<!-- <el-button type="primary" @click="init">open</el-button>
|
<el-button type="success" @click="closeInit">close</el-button>-->
|
<div class="mobileActivity_insmall">
|
<!-- <img :src="imgs" alt="" class="mobileActivity_insmallimg" /> -->
|
<el-image
|
class="mobileActivity_insmallimg"
|
:src="useData.url"
|
:preview-src-list="useData.srcList"
|
></el-image>
|
<div class="mobileActivity_insmallxiangqing">
|
<div
|
class="mobileActivity_insmallxiangqingIn"
|
v-for="(item, index) in useData.smallData"
|
:key="index"
|
>
|
<span class="mobileActivity_insmallxiangqingIn_s">
|
{{ item.lable }}
|
</span>
|
: {{ item.value }}
|
</div>
|
</div>
|
</div>
|
<div class="mobileActivity_detailed">
|
<div
|
class="mobileActivity_detailedIn"
|
v-for="(item, index) in useData.detailedData"
|
:key="index"
|
>
|
<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 ourLeftData"
|
:key="index"
|
@click="mobileActivityCoutrolClick(item)"
|
v-show="!item.notShow"
|
>
|
<img :src="item.img" alt />
|
<span>{{ item.label }}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<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'
|
]),
|
ourLeftData() {
|
return [...this.serviceMap, ...this.leftNavData];
|
},
|
},
|
data() {
|
const heig = 135;
|
const bottom = 150;
|
return {
|
useHeight: heig,
|
height: heig,
|
useBottom: bottom,
|
bottom: bottom,
|
openValue: false,
|
domMove: null,
|
start: 0,
|
end: 0,
|
hdTitle: "",
|
// url: "",
|
// srcList: [],
|
useData: {},
|
leftNavData: [
|
{
|
flag: true,
|
label: "线路",
|
// img: "/img/leftnav/tag.png",
|
img: "/img/leftnav/tag-checked.png",
|
normal: "/img/leftnav/tag.png",
|
checked: "/img/leftnav/tag-checked.png",
|
layer: "tagLayer",
|
imgSrc: "https://map.hit.edu.cn/images/tarrow_xq.png",
|
// imgSrc: "img/mobile/pink.png",
|
layer: "drawALineLayerMany",
|
},
|
{
|
flag: true,
|
label: "标点",
|
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: "drawAPointLayerMany",
|
},
|
// {
|
// flag: false,
|
// label: "实景",
|
// img: "/img/leftnav/scene.png",
|
// normal: "/img/leftnav/scene.png",
|
// checked: "/img/leftnav/scene-checked.png",
|
// layer: "sceneLayer",
|
// imgSrc: "img/leftnav/map-panorama.png",
|
// // 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: {
|
// openValue() {
|
// if (this.openValue) {
|
// let windowHeight = document.body.clientHeight;
|
// this.height = windowHeight / 2;
|
// } else {
|
// this.height = this.useHeight;
|
// }
|
// },
|
//当弹窗显示时，开始操作数据
|
showActivity() {
|
if (this.showActivity) {
|
this.inToInit(); // 初始化
|
this.hdTitle = this.showActivityData.name;
|
|
// 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");
|
// console.log(heard, ins, 77777);
|
this.checkDom("querySelector", ".mobileActivity_heard", (head) => {
|
this.checkDom("querySelector", ".mobileActivity_in", (ins) => {
|
console.log((head.offsetHeight + ins.offsetHeight) / 4);
|
doit(head.offsetHeight + ins.offsetHeight);
|
});
|
});
|
// return;
|
const doit = (maxheights) => {
|
this.domMove = new moveWindow({
|
id: "mobileActivity",
|
minHeight: that.useHeight,
|
maxHeight: maxheights || windowHeight / 2,
|
critical: maxheights / 4,
|
fn: function (res) {
|
that.height = +res.height;
|
that.bottom = +res.height + 15;
|
// console.log(+res.height, "=======");
|
if (res.state != "on") {
|
that.openValue = res.state;
|
}
|
},
|
});
|
this.domMove.init();
|
// console.log(this.domMove);
|
// 转移···添加点和线
|
const addressOur = this.changeData(
|
this.useData.query,
|
"addressname",
|
"address"
|
);
|
const lxOur = this.changeData(this.useData.query, "lxname", "lx");
|
// console.log(addressOur, lxOur);
|
that.$store.dispatch("MSET_DRAWALINELAYERMANY", [
|
lxOur,
|
addressOur,
|
this.useData.query,
|
function () {
|
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 (const k in this.leftNavData) {
|
this.leftNavData[k].flag = true;
|
this.leftNavData[k].img = this.leftNavData[k].checked;
|
}
|
},
|
// 处理主数据
|
doData(val) {
|
const srcList = val.opendata.tpurl.split(",");
|
this.useData = {
|
data: val,
|
url: srcList[0],
|
srcList: srcList,
|
smallData: [
|
{
|
lable: "主办方",
|
value: val.opendata.sponsor,
|
},
|
{
|
lable: "承办方",
|
value: val.opendata.undertake,
|
},
|
],
|
detailedData: [
|
{
|
lable: "活动时间",
|
value: val.opendata.time,
|
},
|
{
|
lable: "活动详情",
|
value: val.opendata.context,
|
},
|
],
|
query: {
|
name: val.opendata.hdname,
|
bgImg: val.opendata.tpurl,
|
from: "活动",
|
websiteUrl: val.opendata.websiteurl,
|
telePhone: val.opendata.telephone,
|
introduce: val.opendata.context,
|
video: val.opendata.videourl,
|
// buts: ["定位"],
|
// 活动添加的字段
|
addressname: val.opendata.addressname.split(";"),
|
address: val.opendata.address.split(";"),
|
lxname: val.opendata.lxname.split(";"),
|
lx: val.opendata.lx.split(";"),
|
lntLat: [
|
val.opendata.address.split(";")[0].split(",")[0],
|
val.opendata.address.split(";")[0].split(",")[1],
|
],
|
panoramaurl: val.opendata.panoramaurl, // 全景
|
},
|
};
|
},
|
// 启动监听事件
|
init() {
|
this.domMove.init();
|
},
|
// 关闭监听事件
|
closeInit() {
|
this.domMove.closeInit();
|
},
|
// 控制线路和点的显影
|
mobileActivityCoutrolClick(item) {
|
item.flag = !item.flag;
|
if (item.flag == true) {
|
item.img = item.checked;
|
} 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) {
|
const arr = [];
|
for (const 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;
|
},
|
closeActivity() {
|
this.$store.commit("set_showActivity", { state: false });
|
if (this.domMove) {
|
this.closeInit();
|
}
|
// 关闭路线和点的图层
|
this.$store.commit("removePolylineMany");
|
// 关闭随地图弹窗
|
this.$store.dispatch("closeMobileWindowsDom");
|
// 显示右侧栏
|
this.$store.commit("SET_SeeAndNotSee", true);
|
},
|
checkDom(methods, name, fn) {
|
// 声明定时器
|
var timer = null;
|
// 检查dom是否执行完成
|
function checkDom() {
|
// let dom = that.$refs[name];
|
const dom = document[methods](name);
|
if (dom) {
|
// 执行dom加载完成后的操作
|
// 清除定时器
|
if (!timer) {
|
clearTimeout(timer);
|
}
|
if (fn) {
|
// 回调函数
|
fn(dom);
|
} else {
|
return dom;
|
}
|
} else {
|
// 自我调用
|
timer = setTimeout(checkDom, 100);
|
}
|
}
|
// 首次执行
|
checkDom();
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
#mobileActivity {
|
position: fixed;
|
bottom: 0px;
|
left: 0px;
|
width: 100%;
|
// height: 50px;
|
background-color: #fff;
|
z-index: 999;
|
transition: height 0.1s;
|
border-radius: 15px 15px 0 0;
|
.mobileActivity_heard {
|
height: 35px;
|
border-radius: 15px 15px 0 0;
|
width: 100%;
|
background-color: #409eff;
|
color: #fff;
|
border-bottom: 1px solid rgba($color: #acacac, $alpha: 0.5);
|
box-shadow: 0 0px 10px -3px rgba($color: #acacac, $alpha: 0.5);
|
.mobileActivity_title {
|
width: 100%;
|
height: 100%;
|
line-height: 35px;
|
text-indent: 1rem;
|
}
|
.mobileActivity_close {
|
position: absolute;
|
right: 5px;
|
top: 5px;
|
font-size: 25px;
|
}
|
}
|
.mobileActivity_in {
|
width: 100%;
|
height: auto;
|
overflow: hidden;
|
padding-bottom: 5px;
|
.mobileActivity_insmall {
|
background-color: #fff;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
.mobileActivity_insmallimg {
|
width: 90px;
|
height: 90px;
|
}
|
.mobileActivity_insmallxiangqing {
|
width: calc(100% - 110px);
|
height: 94px;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
flex-direction: column;
|
.mobileActivity_insmallxiangqingIn {
|
width: 100%;
|
}
|
}
|
}
|
.mobileActivity_detailed {
|
background-color: rgba(202, 202, 202, 0.2);
|
padding: 3px 0 0 0;
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
.mobileActivity_detailedIn {
|
background-color: #fff;
|
box-sizing: border-box;
|
width: 100%;
|
padding: 5px;
|
margin: 0 0 3px 0;
|
}
|
}
|
.mobileActivity_insmallxiangqingIn_s {
|
font-weight: 600;
|
}
|
}
|
}
|
|
.notOpens {
|
&::after {
|
content: "";
|
display: block;
|
width: 20px;
|
height: 4px;
|
background-color: rgba(202, 202, 202, 1);
|
position: absolute;
|
top: -9px;
|
left: calc(50% - 10px);
|
border-radius: 5px;
|
}
|
}
|
|
.isOpens {
|
&::after {
|
content: "";
|
display: block;
|
width: 13px;
|
height: 4px;
|
background-color: rgba(202, 202, 202, 1);
|
position: absolute;
|
top: -9px;
|
left: calc(50% - 12px);
|
border-radius: 5px;
|
transform: rotate(30deg);
|
}
|
&::before {
|
content: "";
|
display: block;
|
width: 13px;
|
height: 4px;
|
background-color: rgba(202, 202, 202, 1);
|
position: absolute;
|
top: -9px;
|
left: calc(50% - 4px);
|
border-radius: 5px;
|
transform: rotate(-30deg);
|
}
|
}
|
.mobileActivity_coutrol {
|
position: fixed;
|
bottom: 150px;
|
left: 0px;
|
z-index: 200;
|
background-color: #fff;
|
border-radius: 0 17px 17px 0;
|
transition: all 0.18s;
|
ul {
|
position: relative;
|
top: 3px;
|
}
|
li {
|
margin-bottom: 6px;
|
font-weight: 400;
|
display: block;
|
// 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 {
|
position: relative;
|
transition: all 0.5s;
|
width: 24px;
|
height: 24px;
|
vertical-align: middle;
|
margin-right: 10px;
|
image-rendering: -moz-crisp-edges;
|
image-rendering: -o-crisp-edges;
|
image-rendering: -webkit-optimize-contrast;
|
image-rendering: crisp-edges;
|
-ms-interpolation-mode: nearest-neighbor;
|
}
|
|
span {
|
display: inline-block;
|
vertical-align: middle;
|
font-size: 14px;
|
color: #2f2f2f;
|
}
|
}
|
}
|
</style>
|
