<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-29 09:04:54
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-08-03 16:26:55
|
* @FilePath: \sd-jg-school-web\src\components\mobileActivity\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
<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 () {
|
console.log([...this.serviceMap, ...this.leftNavData], 9898989)
|
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: "/changjing/img/leftnav/tag.png",
|
img: '/changjing/img/leftnav/tag-checked.png',
|
normal: '/changjing/img/leftnav/tag.png',
|
checked: '/changjing/img/leftnav/tag-checked.png',
|
imgSrc: 'https://map.hit.edu.cn/images/tarrow_xq.png',
|
// imgSrc: "/changjing/imgmobile/pink.png",
|
layer: 'drawALineLayerMany'
|
},
|
{
|
flag: true,
|
label: '标点',
|
img: '/changjing/img/leftnav/way-checked.png',
|
normal: '/changjing/img/leftnav/way.png',
|
checked: '/changjing/img/leftnav/way-checked.png',
|
imgSrc: '/changjing/imgmobile/green.png',
|
layer: 'drawAPointLayerMany'
|
}
|
// {
|
// flag: false,
|
// label: "实景",
|
// img: "/changjing/img/leftnav/scene.png",
|
// normal: "/changjing/img/leftnav/scene.png",
|
// checked: "/changjing/img/leftnav/scene-checked.png",
|
// layer: "sceneLayer",
|
// imgSrc: "/changjing/img/leftnav/map-panorama.png",
|
// // imgSrc: "/changjing/imgmobile/blue.png",
|
// },
|
],
|
// 底图
|
serviceMap: [
|
// {
|
// flag: true,
|
// label: "底图1",
|
// img: "/changjing/img/leftnav/way-checked.png",
|
// normal: "/changjing/img/leftnav/way.png",
|
// checked: "/changjing/img/leftnav/way-checked.png",
|
// layer: "wayLayer",
|
// imgSrc: "/changjing/imgmobile/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) => {
|
const name = res.data.data.mapname.split(',')
|
const url = res.data.data.url.split(',')
|
for (const k in name) {
|
if (url[k] && url[k] != '') {
|
const d = {
|
flag: true,
|
label: name[k],
|
img: '/changjing/img/leftnav/monitor-checked.png',
|
normal: '/changjing/img/leftnav/monitor.png',
|
checked: '/changjing/img/leftnav/monitor-checked.png',
|
imgSrc: '/changjing/img/leftnav/map-monitor.png',
|
layer: 'serviceMap' + that.serviceMap.length,
|
url: url[k],
|
to: 'serviceMap'
|
}
|
this.serviceMap.push(d) // 数据层
|
// console.log(d, "see");
|
|
console.log(url[k], '---1----1---2---3---')
|
|
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 (const 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) {
|
console.log(item, '---1---2---3---')
|
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>
|
