|
|
|
@ -2,16 +2,31 @@ |
|
|
|
<!-- 全域旅游 --> |
|
|
|
<div class="eb-container" ref="appRef"> |
|
|
|
<MainTitle class="title" :title="title"></MainTitle> |
|
|
|
<gis-map ref="gisMapRef" class="gismap" pointType="全域旅游" :point-list="dataList" @currentPoint="currentPointFn" |
|
|
|
:lngLat="lngLat" list-item-key="name"> |
|
|
|
<gis-map |
|
|
|
ref="gisMapRef" |
|
|
|
class="gismap" |
|
|
|
pointType="全域旅游" |
|
|
|
:point-list="dataList" |
|
|
|
@currentPoint="currentPointFn" |
|
|
|
:lngLat="lngLat" |
|
|
|
list-item-key="name" |
|
|
|
> |
|
|
|
<template v-slot:content> |
|
|
|
<div class="center-window"> |
|
|
|
<div class="top-title" v-for="(item, index) in iconList" @click="changeType(item, index)"> |
|
|
|
<div |
|
|
|
class="top-title" |
|
|
|
v-for="(item, index) in iconList" |
|
|
|
@click="changeType(item, index)" |
|
|
|
> |
|
|
|
<img :src="item.icon" /> |
|
|
|
<div class="text"> |
|
|
|
<p class="text-name">{{ item.label }}</p> |
|
|
|
<p class="text-type"> |
|
|
|
<CountTo :startVal="0" :endVal="item.count" :duration="2000" /> |
|
|
|
<CountTo |
|
|
|
:startVal="0" |
|
|
|
:endVal="item.count" |
|
|
|
:duration="2000" |
|
|
|
/> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -22,9 +37,16 @@ |
|
|
|
</div> |
|
|
|
<div class="content-info"> |
|
|
|
<div class="content-inof-list"> |
|
|
|
<div class="content-info-item" v-for="(item, index) in travleList" :key="index" |
|
|
|
@click="selectTravelInfoById(item.id, item)"> |
|
|
|
<div class="content-info-item-title" style="font-size: 20px; color: #fff"> |
|
|
|
<div |
|
|
|
class="content-info-item" |
|
|
|
v-for="(item, index) in dataList" |
|
|
|
:key="index" |
|
|
|
@click="selectTravelInfoById(item.id, item)" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="content-info-item-title" |
|
|
|
style="font-size: 20px; color: #fff" |
|
|
|
> |
|
|
|
{{ item.name }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -38,66 +60,150 @@ |
|
|
|
<div class="content-info"> |
|
|
|
<!-- title --> |
|
|
|
<div class="content-info-title"> |
|
|
|
<span style=" |
|
|
|
<span |
|
|
|
style=" |
|
|
|
font-size: 24px; |
|
|
|
color: #fff; |
|
|
|
font-weight: bold; |
|
|
|
">{{ detailInfo.name }}</span> |
|
|
|
" |
|
|
|
>{{ detailInfo.name }}</span |
|
|
|
> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9">{{ |
|
|
|
typeList[detailInfo.type] |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<!-- content --> |
|
|
|
<div class="content-info-content" style="margin-top: 20px"> |
|
|
|
<span style="font-size: 24px; color: #fff">基础信息</span> |
|
|
|
<div style="margin-top: 10px" v-if="detailInfo.address"> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9">地址: |
|
|
|
<div |
|
|
|
class="content-info-content" |
|
|
|
style="margin-top: 20px" |
|
|
|
> |
|
|
|
<!-- <div |
|
|
|
style=" |
|
|
|
font-size: 24px; |
|
|
|
color: #fff; |
|
|
|
margin-bottom: 10px; |
|
|
|
" |
|
|
|
v-if="detailInfo.deviceUrl" |
|
|
|
> |
|
|
|
<span>资源监控</span> |
|
|
|
<Button |
|
|
|
type="text" |
|
|
|
class="text-button" |
|
|
|
@click="playMonitor" |
|
|
|
>点击播放</Button |
|
|
|
> |
|
|
|
</div> --> |
|
|
|
<span style="font-size: 24px; color: #fff" |
|
|
|
>基础信息</span |
|
|
|
> |
|
|
|
<div |
|
|
|
style="margin-top: 10px" |
|
|
|
v-if="detailInfo.address" |
|
|
|
> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9" |
|
|
|
>地址: |
|
|
|
</span> |
|
|
|
<span style="font-size: 18px; color: #fff">{{ |
|
|
|
detailInfo.address |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<!-- 工作时间 --> |
|
|
|
<div style="margin-top: 10px" v-if="detailInfo.openHours"> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9">工作时间: |
|
|
|
<div |
|
|
|
style="margin-top: 10px" |
|
|
|
v-if="detailInfo.openHours" |
|
|
|
> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9" |
|
|
|
>工作时间: |
|
|
|
</span> |
|
|
|
<span style="font-size: 18px; color: #fff">{{ |
|
|
|
detailInfo.openHours |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<!-- 简介 --> |
|
|
|
<div style="margin-top: 10px" v-if="detailInfo.remark"> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9">简介: |
|
|
|
<div |
|
|
|
style="margin-top: 10px" |
|
|
|
v-if="detailInfo.remark" |
|
|
|
> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9" |
|
|
|
>简介: |
|
|
|
</span> |
|
|
|
<span style="font-size: 18px; color: #fff">{{ |
|
|
|
detailInfo.remark |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style="margin-top: 10px" |
|
|
|
v-if="detailInfo.deviceUrl" |
|
|
|
> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9" |
|
|
|
>监控: |
|
|
|
</span> |
|
|
|
<video |
|
|
|
:src="detailInfo.deviceUrl" |
|
|
|
autoplay |
|
|
|
controls |
|
|
|
style="width: 100%; height: 200px" |
|
|
|
></video> |
|
|
|
</div> |
|
|
|
<!-- 视频 --> |
|
|
|
<div |
|
|
|
style="margin-top: 10px" |
|
|
|
v-else-if="detailInfo.videoList" |
|
|
|
> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9" |
|
|
|
>视频: |
|
|
|
</span> |
|
|
|
<video |
|
|
|
:src="detailInfo.videoList" |
|
|
|
autoplay |
|
|
|
controls |
|
|
|
style="width: 100%; height: 200px" |
|
|
|
></video> |
|
|
|
</div> |
|
|
|
<!-- 图片 --> |
|
|
|
<div style="margin-top: 10px" v-if="detailInfo.coverImage"> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9">图片: |
|
|
|
<div |
|
|
|
style="margin-top: 10px" |
|
|
|
v-else-if="detailInfo.coverImage" |
|
|
|
> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9" |
|
|
|
>图片: |
|
|
|
</span> |
|
|
|
<img :src="detailInfo.coverImage" alt="" style="width: 100%; height: 200px" /> |
|
|
|
<img |
|
|
|
:src="detailInfo.coverImage" |
|
|
|
alt="" |
|
|
|
style="width: 100%; height: 200px" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style=" |
|
|
|
<div |
|
|
|
style=" |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-top: 20px; |
|
|
|
"> |
|
|
|
<Button type="text" class="text-button" @click=" |
|
|
|
openLineOrPlayAudio(detailInfo.type) |
|
|
|
"> |
|
|
|
" |
|
|
|
> |
|
|
|
<Button |
|
|
|
type="text" |
|
|
|
class="text-button" |
|
|
|
@click=" |
|
|
|
openLineOrPlayAudio(detailInfo.type) |
|
|
|
" |
|
|
|
> |
|
|
|
{{ |
|
|
|
detailInfo.type == 4 |
|
|
|
? "播放音频" |
|
|
|
? "语音讲解" |
|
|
|
: detailInfo.type == "2" |
|
|
|
? "查看路线" |
|
|
|
: "" |
|
|
|
? "查看路线" |
|
|
|
: "" |
|
|
|
}} |
|
|
|
</Button> |
|
|
|
<!-- 音频播放 --> |
|
|
|
<audio ref="audioRef" class="audio-controls" v-if="detailInfo.type == 4" |
|
|
|
:src="detailInfo.audioList" controls></audio> |
|
|
|
<audio |
|
|
|
ref="audioRef" |
|
|
|
class="audio-controls" |
|
|
|
v-if="detailInfo.type == 4" |
|
|
|
:src="detailInfo.audioList" |
|
|
|
controls |
|
|
|
></audio> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -105,19 +211,33 @@ |
|
|
|
</template> |
|
|
|
</gis-map> |
|
|
|
<div class="page-bottom-bg"></div> |
|
|
|
<div class="page-left-bg"></div> |
|
|
|
<div class="page-right-bg"></div> |
|
|
|
|
|
|
|
<commonModal v-model="lineVisible" title="相关路线" width="600"> |
|
|
|
<div class="line-box"> |
|
|
|
<div class="line-item" v-for="(item, index) in lineList" @click="openLine(item)" :key="index"> |
|
|
|
<span class="line-title">线路名称：{{ item.lineName }}</span> |
|
|
|
<div |
|
|
|
class="line-item" |
|
|
|
v-for="(item, index) in lineList" |
|
|
|
@click="openLine(item)" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<span class="line-title" |
|
|
|
>线路名称：{{ item.lineName }}</span |
|
|
|
> |
|
|
|
<div class="line-content"> |
|
|
|
<span>线路途经：{{ item.lineText }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</commonModal> |
|
|
|
|
|
|
|
<commonModal |
|
|
|
v-model="showPlayer" |
|
|
|
title="资源监控" |
|
|
|
width="800" |
|
|
|
@close="showPlayer = false" |
|
|
|
> |
|
|
|
<commonLivePlayer :videoUrl="videoUrl"></commonLivePlayer> |
|
|
|
</commonModal> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -126,14 +246,17 @@ import { useIndex } from "../../utils/utilsDramAdmin"; |
|
|
|
import MainTitle from "./components/MainTitle.vue"; |
|
|
|
import gisMap from "./components/gisMapOfCounty.vue"; |
|
|
|
import commonModal from "@/views/common-components/common-modal.vue"; |
|
|
|
import commonLivePlayer from "../common-components/common-live-player.vue"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "GlobalTravel", |
|
|
|
components: { MainTitle, gisMap, commonModal }, |
|
|
|
components: { MainTitle, gisMap, commonModal, commonLivePlayer }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
title: "全域旅游", |
|
|
|
boxTitle: "资源详情", |
|
|
|
videoUrl: "", |
|
|
|
showPlayer: false, |
|
|
|
columns: [ |
|
|
|
// 序号 |
|
|
|
{ |
|
|
|
@ -164,6 +287,7 @@ export default { |
|
|
|
], |
|
|
|
lineList: [], |
|
|
|
lineVisible: false, |
|
|
|
// 1、酒店 2、景区 3、饭店 4、讲解 5、服务区 6、设备设施 |
|
|
|
// 1、住宿 2、景点 3、美食 4、讲解 5、商店 6、卫生间 7、 停车场 8、游客服务 |
|
|
|
typeList: { |
|
|
|
1: "住宿", |
|
|
|
@ -175,17 +299,17 @@ export default { |
|
|
|
7: "停车场", |
|
|
|
8: "游客服务", |
|
|
|
}, |
|
|
|
type: "", |
|
|
|
type: "2", |
|
|
|
iconList: [ |
|
|
|
// 1、酒店 2、景区 3、饭店 4、讲解 5、服务区 6、设备设施 |
|
|
|
{ icon: require("@/assets/mapIcon/jd.png"), label: "住宿", count: 0, type: "1" }, |
|
|
|
{ icon: require("@/assets/mapIcon/jq.png"), label: "景点", count: 0, type: "2" }, |
|
|
|
{ icon: require("@/assets/mapIcon/fd.png"), label: "美食", count: 0, type: "3" }, |
|
|
|
{ icon: require("@/assets/mapIcon/jj.png"), label: "讲解", count: 0, type: "4" }, |
|
|
|
{ icon: require("@/assets/mapIcon/sd.png"), label: "商店", count: 0, type: "5" }, |
|
|
|
{ icon: require("@/assets/mapIcon/wsj.png"), label: "卫生间", count: 0, type: "6" }, |
|
|
|
{ icon: require("@/assets/mapIcon/fwq.png"), label: "停车场", count: 0, type: "7" }, |
|
|
|
{ icon: require("@/assets/mapIcon/ykzx.png"), label: "游客服务", count: 0, type: "8" }, |
|
|
|
{icon: require("@/assets/mapIcon/jd.png"), label: "住宿", count: 0, type: "1"}, |
|
|
|
{icon: require("@/assets/mapIcon/jq.png"), label: "景点", count: 0, type: "2"}, |
|
|
|
{icon: require("@/assets/mapIcon/fd.png"), label: "美食", count: 0, type: "3"}, |
|
|
|
{icon: require("@/assets/mapIcon/jj.png"), label: "讲解", count: 0, type: "4"}, |
|
|
|
{icon: require("@/assets/mapIcon/sd.png"), label: "商店", count: 0, type: "5"}, |
|
|
|
{icon: require("@/assets/mapIcon/wsj.png"), label: "卫生间", count: 0, type: "6"}, |
|
|
|
{icon: require("@/assets/mapIcon/fwq.png"), label: "停车场", count: 0, type: "7"}, |
|
|
|
{icon: require("@/assets/mapIcon/ykzx.png"), label: "游客服务", count: 0, type: "8"}, |
|
|
|
], |
|
|
|
travleList: [], |
|
|
|
detailInfo: {}, |
|
|
|
@ -201,21 +325,22 @@ export default { |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
created() { |
|
|
|
}, |
|
|
|
created() {}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
const { calcRate, windowDraw } = useIndex(this.$refs.appRef); |
|
|
|
calcRate(); |
|
|
|
windowDraw(); |
|
|
|
this.$nextTick(() => { |
|
|
|
this.queryTravelInfoPage(); |
|
|
|
}); |
|
|
|
this.queryTravelAll(); |
|
|
|
this.queryTravelInfoPage(); |
|
|
|
// this.getIconList(); |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
}, |
|
|
|
beforeDestroy() {}, |
|
|
|
methods: { |
|
|
|
playMonitor() { |
|
|
|
this.videoUrl = this.detailInfo.deviceUrl; |
|
|
|
this.showPlayer = true; |
|
|
|
}, |
|
|
|
selectTravelLineById(id, index) { |
|
|
|
this.$http |
|
|
|
.post( |
|
|
|
@ -366,7 +491,11 @@ export default { |
|
|
|
.then((res) => { |
|
|
|
if (res.data.code == 200) { |
|
|
|
this.lineList = res.data.data.records; |
|
|
|
this.lineVisible = true; |
|
|
|
if (this.lineList.length > 0) { |
|
|
|
this.lineVisible = true; |
|
|
|
} else { |
|
|
|
this.$message.info("没有该景点的路线"); |
|
|
|
} |
|
|
|
this.lineList.forEach((item, index) => { |
|
|
|
this.selectTravelLineById(item.id, index); |
|
|
|
}); |
|
|
|
@ -377,7 +506,6 @@ export default { |
|
|
|
if (type == 4) { |
|
|
|
this.$refs.audioRef.play(); |
|
|
|
} else if (type == 2) { |
|
|
|
this.boxTitle = "旅游线路"; |
|
|
|
this.getLineList(this.detailInfo.id); |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -422,7 +550,7 @@ export default { |
|
|
|
// }); |
|
|
|
// }, |
|
|
|
selectTravelInfoById(id, item) { |
|
|
|
// this.lngLat = [item.longitude, item.latitude]; |
|
|
|
// this.lngLat = item.lnglat; |
|
|
|
if (this.driving != null) { |
|
|
|
this.driving.clear(); |
|
|
|
this.$refs.gisMapRef.map.clearMap(); |
|
|
|
@ -491,6 +619,33 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
queryTravelAll() { |
|
|
|
const params = { |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10000, |
|
|
|
type: "", |
|
|
|
}; |
|
|
|
this.$http |
|
|
|
.post( |
|
|
|
"/travel/queryTravelInfoPage", |
|
|
|
this.common.request(params) |
|
|
|
) |
|
|
|
.then((res) => { |
|
|
|
if (res.data.code == 200) { |
|
|
|
this.travleList = this.assembleData( |
|
|
|
res.data.data.records |
|
|
|
); |
|
|
|
this.iconList.forEach((item) => { |
|
|
|
let list = this.travleList.filter((element) => { |
|
|
|
if (item.type == element.type) { |
|
|
|
return true; |
|
|
|
} |
|
|
|
}); |
|
|
|
item.count = list.length; |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
@ -547,26 +702,27 @@ export default { |
|
|
|
.content-info-item { |
|
|
|
width: 100%; |
|
|
|
height: 50px; |
|
|
|
background: url("../../assets/largeScreen/list-item-bg.png") no-repeat; |
|
|
|
line-height: 50px; |
|
|
|
background: url("../../assets/largeScreen/list-item-bg.png") |
|
|
|
no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
box-sizing: border-box; |
|
|
|
cursor: pointer; |
|
|
|
padding: 20px; |
|
|
|
padding: 0 20px; |
|
|
|
box-sizing: border-box; |
|
|
|
border-radius: 5px; |
|
|
|
box-shadow: 0.5px 1px 1.5px #293240; |
|
|
|
transition: all 0.1s ease-in-out; |
|
|
|
overflow: hidden; |
|
|
|
white-space: nowrap; |
|
|
|
text-overflow: ellipsis; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
background-image: linear-gradient(90deg, |
|
|
|
#12181f 0%, |
|
|
|
#293240 100%); |
|
|
|
background-image: linear-gradient( |
|
|
|
90deg, |
|
|
|
#12181f 0%, |
|
|
|
#293240 100% |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -584,7 +740,10 @@ export default { |
|
|
|
.content-pub-style(100%, calc(100% - 44px)); |
|
|
|
padding: 10px 20px; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
overflow: auto; |
|
|
|
&::-webkit-scrollbar { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
.content-info-title { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -609,9 +768,11 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 140px; |
|
|
|
border-radius: 8px; |
|
|
|
background: linear-gradient(180deg, |
|
|
|
rgba(0, 125, 165, 0.24) 0%, |
|
|
|
rgba(1, 10, 43, 0) 100%); |
|
|
|
background: linear-gradient( |
|
|
|
180deg, |
|
|
|
rgba(0, 125, 165, 0.24) 0%, |
|
|
|
rgba(1, 10, 43, 0) 100% |
|
|
|
); |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
@ -740,9 +901,11 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 140px; |
|
|
|
border-radius: 8px; |
|
|
|
background: linear-gradient(180deg, |
|
|
|
rgba(0, 125, 165, 0.24) 0%, |
|
|
|
rgba(1, 10, 43, 0) 100%); |
|
|
|
background: linear-gradient( |
|
|
|
180deg, |
|
|
|
rgba(0, 125, 165, 0.24) 0%, |
|
|
|
rgba(1, 10, 43, 0) 100% |
|
|
|
); |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
|
changtong
6 months ago