xyxj
/
CPCenterData
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

地图加乡镇名字、态势修改

master
changtong 6 months ago
parent
0c2ec9858d
commit
bb0f3d9913
5 changed files with 534 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      config/index.js
  2. 289
      src/views/screen/components/gisMapOfCounty.vue
  3. 6
      src/views/screen/county-screen.vue
  4. 301
      src/views/screen/global-travel.vue
  5. 81
      src/views/screen/smart-travel.vue

4
config/index.js
View File

@ -12,8 +12,8 @@ module.exports = {
assetsPublicPath: '/', assetsPublicPath: '/',
proxyTable: { proxyTable: {
'/api': { '/api': {
target: 'http://localhost:9990', // target: 'http://localhost:9990',
// target: 'http://60.255.186.185:9024/api', target: 'http://60.255.186.185:9024/api',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/api': '' '^/api': ''

289
src/views/screen/components/gisMapOfCounty.vue
View File

@ -4,7 +4,12 @@
<slot name="content" class="content"></slot> <slot name="content" class="content"></slot>
<commonModal v-model="pointsState" width="800" title="聚合列表"> <commonModal v-model="pointsState" width="800" title="聚合列表">
<div class="points"> <div class="points">
<div class="item" v-for="(item, index) in points" :key="index" @click="getPoint(item.point)"> <div
class="item"
v-for="(item, index) in points"
:key="index"
@click="getPoint(item.point)"
>
{{ item.point[listItemKey] }} {{ item.point[listItemKey] }}
</div> </div>
</div> </div>
@ -92,7 +97,7 @@ export default {
props: { props: {
center: { center: {
type: Array, type: Array,
default: () => [104.619853, 28.900000], default: () => [104.619853, 28.9],
}, },
zoom: { zoom: {
type: Number, type: Number,
@ -180,48 +185,214 @@ export default {
getTileUrl: (x, y, z) => getTileUrl: (x, y, z) =>
`http://t0.tianditu.gov.cn/DataServer?T=img_w&tk=${this.common.mapKey}&x=${x}&y=${y}&l=${z}`, `http://t0.tianditu.gov.cn/DataServer?T=img_w&tk=${this.common.mapKey}&x=${x}&y=${y}&l=${z}`,
}); });
const district = new AMap.DistrictSearch({
this.map = new AMap.Map("center-map", { subdistrict: 3,
layers: this.common.isSkyMap ? [imgLayer] : [new AMap.TileLayer.RoadNet()], extensions: "all",
zoom: this.zoom, level: "district",
zooms: [3, 16],
scrollWheel: true,
center: this.center || [104.62, 28.77], // 宜宾翠屏区中心坐标
viewMode: "3D",
resizeEnable: true,
mapStyle: "amap://styles/darkblue",
features: ["bg", "road", "building", "point"],
}); });
this.map.on("complete", () => { district.search(this.districtLocation, (status, result) => {
if (this.aggregationPoint) { const bounds = result.districtList[0].boundaries;
this.aggregationPoint(this.pointList); const mask = bounds.map((bound) => [bound]);
} const polygons = bounds.map(
this.addPoints(); // 添加点标记 (bound) =>
new AMap.Polygon({
strokeWeight: 1,
path: bound,
strokeColor: "#4dd6e6", // 边界线颜色
strokeWeight: 3, // 边界线宽度
fillColor: "#102C4F", // 填充颜色
fillOpacity: 0.5, // 填充透明度
})
);
this.map = new AMap.Map("center-map", {
mask,
layers: this.common.isSkyMap
? [imgLayer]
: [new AMap.TileLayer.RoadNet()],
zoom: this.zoom,
zooms: [3, 16],
scrollWheel: true,
center: this.center || [104.62, 28.77], // 宜宾翠屏区中心坐标
viewMode: "3D",
resizeEnable: true,
mapStyle: "amap://styles/darkblue",
features: ["bg", "road", "building", "point"],
});
this.map.add(polygons);
this.map.on("complete", () => {
// 加载翠屏区底图
// this.loadCuiPingDistrict();
// 乡镇区域加名字
this.loadTownName();
if (this.aggregationPoint) {
this.aggregationPoint(this.pointList);
}
this.addPoints(); // 添加点标记
});
}); });
// 加载乡镇边界 GeoJSON // 加载乡镇边界 GeoJSON
this.loadGeoJSON(); // this.loadGeoJSON();
// 加载翠屏区底图
this.loadCuiPingDistrict();
// 添加地图点击事件 // 添加地图点击事件
// this.map.on('click', this.handleMapClick); // this.map.on('click', this.handleMapClick);
}, },
loadTownName() {
let townNameList = [
{
name: "西郊街道",
center: [104.599429, 28.749492],
},
{
name: "安阜街道",
center: [104.609625, 28.78448],
},
{
name: "白沙湾街道",
center: [104.662791, 28.776612],
},
{
name: "象鼻街道",
center: [104.623461, 28.807056],
},
{
name: "沙坪街道",
center: [104.801208, 28.837212],
},
{
name: "合江门街道",
center: [104.63139, 28.767009],
},
{
name: "大观楼街道",
center: [104.621645, 28.764587],
},
{
name: "双城街道",
center: [104.73105, 28.862117],
},
{
name: "李庄镇",
center: [104.800546, 28.79974],
},
{
name: "菜坝镇",
center: [104.558742, 28.790712],
},
{
name: "金坪镇",
center: [104.749651, 28.906222],
},
{
name: "牟坪镇",
center: [104.879597, 28.651344],
},
{
name: "李端镇",
center: [104.860381, 28.598191],
},
{
name: "宗场镇",
center: [104.572331, 28.852856],
},
{
name: "宋家镇",
center: [104.860345, 28.747853],
},
{
name: "思坡镇",
center: [104.532224, 28.812268],
},
{
name: "思坡镇",
center: [104.532224, 28.812268],
},
{
name: "白花镇",
center: [104.614897, 29.09301],
},
{
name: "双谊镇",
center: [104.564516, 28.904037],
},
{
name: "永兴镇",
center: [104.562846, 29.023149],
},
{
name: "金秋湖镇",
center: [104.715309, 28.981108],
},
];
townNameList.forEach((item) => {
const labelMarker = new AMap.Marker({
position: item.center,
// zIndex: 500,
clickable: true,
content: `
<div style="
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 0.6);
width: max-content;
">
${item.name}
</div>
`,
offset: new AMap.Pixel(-25, -10), // 调整文本位置
});
// 添加 hover 高亮事件
labelMarker.on("mouseover", () => {
labelMarker.setContent(`
<div style="
font-size: 20px;
font-weight: bold;
color: #C6E1CA;
width: max-content;
">
${item.name}
</div>
`);
});
labelMarker.on("mouseout", () => {
labelMarker.setContent(`
<div style="
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 0.6);
width: max-content;
">
${item.name}
</div>
`);
});
// 点击事件
labelMarker.on("click", () => {
this.$emit("enterTown", item.name); // 触发事件
});
labelMarker.setMap(this.map);
});
},
handleMapClick(e) { handleMapClick(e) {
const lngLat = e.lnglat; const lngLat = e.lnglat;
console.log('点击坐标:', lngLat); console.log("点击坐标:", lngLat);
this.polygons.forEach(polygon => { this.polygons.forEach((polygon) => {
const path = polygon.getPath(); const path = polygon.getPath();
const isInPolygon = AMap.GeometryUtil.isPointInRing(lngLat.toArray(), path.map(p => p.toArray())); const isInPolygon = AMap.GeometryUtil.isPointInRing(
lngLat.toArray(),
path.map((p) => p.toArray())
);
console.log('多边形:', isInPolygon); console.log("多边形:", isInPolygon);
if (isInPolygon) { if (isInPolygon) {
const name = polygon.getExtData().name; const name = polygon.getExtData().name;
console.log('点击:', name); console.log("点击:", name);
this.map.setZoomAndCenter(10, lngLat); // 放大并定位到点击区域 this.map.setZoomAndCenter(10, lngLat); // 放大并定位到点击区域
alert(`您点击了乡镇：${name}`); alert(`您点击了乡镇：${name}`);
} }
@ -235,31 +406,38 @@ export default {
}); });
const self = this; // 保存上下文以便回调使用 const self = this; // 保存上下文以便回调使用
districtSearch.search(this.districtLocation, function (status, result) { districtSearch.search(
if (status === "complete" && result.districtList && result.districtList.length) { this.districtLocation,
const district = result.districtList[0]; function (status, result) {
const boundaries = district.boundaries; if (
status === "complete" &&
if (boundaries) { result.districtList &&
// 绘制翠屏区底图 result.districtList.length
self.drawCuiPingBase(boundaries); ) {
const district = result.districtList[0];
const boundaries = district.boundaries;
if (boundaries) {
// 绘制翠屏区底图
self.drawCuiPingBase(boundaries);
} else {
console.warn("翠屏区无边界数据");
}
} else { } else {
console.warn("翠屏区无边界数据"); console.error("行政区查询失败: " + status);
} }
} else {
console.error("行政区查询失败: " + status);
} }
}); );
}, },
drawCuiPingBase(boundaries) { drawCuiPingBase(boundaries) {
const mask = boundaries.map((boundary) => [boundary]); const mask = boundaries.map((boundary) => [boundary]);
boundaries.forEach((boundary) => { boundaries.forEach((boundary) => {
const polygon = new AMap.Polygon({ const polygon = new AMap.Polygon({
path: boundary, path: boundary,
strokeColor: "#333", // 边界线颜色 strokeColor: "#4dd6e6", // 边界线颜色
strokeWeight: 3, // 边界线宽度 strokeWeight: 3, // 边界线宽度
fillColor: "#102C4F", // 填充颜色 fillColor: "#102C4F", // 填充颜色
fillOpacity: 0.7, // 填充透明度 fillOpacity: 0.5, // 填充透明度
}); });
this.map.add(polygon); this.map.add(polygon);
}); });
@ -277,9 +455,9 @@ export default {
}, },
loadGeoJSON() { loadGeoJSON() {
// 使用 require 加载 GeoJSON 文件 // 使用 require 加载 GeoJSON 文件
const geojsonData = require('@/assets/geojson/town_boundaries.geojson'); const geojsonData = require("@/assets/geojson/town_boundaries.geojson");
const colors = ['#33FFD450']; // 定义多边形边界颜色 const colors = ["#33FFD450"]; // 定义多边形边界颜色
// 遍历 GeoJSON 数据 // 遍历 GeoJSON 数据
geojsonData.features.forEach((feature, index) => { geojsonData.features.forEach((feature, index) => {
@ -287,15 +465,17 @@ export default {
const name = properties.name; // 获取乡镇名称 const name = properties.name; // 获取乡镇名称
const coordinates = geometry.coordinates[0]; // 获取多边形的坐标 const coordinates = geometry.coordinates[0]; // 获取多边形的坐标
const center = this.getPolygonCenter(coordinates); // 计算多边形的中心点 const center = this.getPolygonCenter(coordinates); // 计算多边形的中心点
console.log('多边形中心点:', center); console.log("多边形中心点:", center);
// 创建多边形并设置样式 // 创建多边形并设置样式
const polygon = new AMap.Polygon({ const polygon = new AMap.Polygon({
zIndex: 100, zIndex: 100,
path: coordinates[0].map((coord) => new AMap.LngLat(coord[0], coord[1])), // 转换为 AMap 坐标 path: coordinates[0].map(
(coord) => new AMap.LngLat(coord[0], coord[1])
), // 转换为 AMap 坐标
strokeColor: colors[index % colors.length], // 边界线颜色 strokeColor: colors[index % colors.length], // 边界线颜色
strokeWeight: 2, // 边界线宽度 strokeWeight: 2, // 边界线宽度
fillColor: '#0A7EA8', // 填充颜色 fillColor: "#0A7EA8", // 填充颜色
fillOpacity: 0.5, // 填充透明度 fillOpacity: 0.5, // 填充透明度
bubble: true, // 允许事件冒泡 bubble: true, // 允许事件冒泡
}); });
@ -319,11 +499,11 @@ export default {
${name} ${name}
</div> </div>
`, `,
offset: new AMap.Pixel(-25, -25), // 调整文本位置 offset: new AMap.Pixel(-25, -25), // 调整文本位置
}); });
// 添加 hover 高亮事件 // 添加 hover 高亮事件
labelMarker.on('mouseover', () => { labelMarker.on("mouseover", () => {
labelMarker.setContent(` labelMarker.setContent(`
<div style=" <div style="
font-size: 20px; font-size: 20px;
@ -336,7 +516,7 @@ export default {
`); `);
}); });
labelMarker.on('mouseout', () => { labelMarker.on("mouseout", () => {
labelMarker.setContent(` labelMarker.setContent(`
<div style=" <div style="
font-size: 16px; font-size: 16px;
@ -350,8 +530,8 @@ export default {
}); });
// 点击事件 // 点击事件
labelMarker.on('click', () => { labelMarker.on("click", () => {
this.$emit('enterTown', name); // 触发事件 this.$emit("enterTown", name); // 触发事件
}); });
labelMarker.setMap(this.map); labelMarker.setMap(this.map);
@ -382,7 +562,10 @@ export default {
console.warn(`无效的坐标 ${index}:`, coord); // 调试信息 console.warn(`无效的坐标 ${index}:`, coord); // 调试信息
} }
}); });
return [lngSum / coordinates[0].length, latSum / coordinates[0].length]; return [
lngSum / coordinates[0].length,
latSum / coordinates[0].length,
];
}, },
aggregationPoint(pointList) { aggregationPoint(pointList) {

6
src/views/screen/county-screen.vue
View File

@ -5,13 +5,7 @@
<gis-map <gis-map
ref="gisMapRef" ref="gisMapRef"
class="gismap" class="gismap"
pointType="全域旅游"
:point-list="dataList"
@currentPoint="currentPointFn"
@enterTown="enterTown" @enterTown="enterTown"
:lngLat="lngLat"
list-item-key="name"
> >
<template v-slot:content> <template v-slot:content>
<div class="left"> <div class="left">

301
src/views/screen/global-travel.vue
View File

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

81
src/views/screen/smart-travel.vue
View File

@ -42,13 +42,23 @@
}}</span> }}</span>
</div> </div>
</div> </div>
<div class="video-list" v-else style="display: flex;justify-content: center;align-items: center;font-size: 18px;color: #aaaaaa;"> <div
class="video-list"
v-else
style="
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #aaaaaa;
"
>
暂无监控资源 暂无监控资源
</div> </div>
</div> </div>
<div class="top-right-data"> <div class="top-right-data">
<div <div
class="content-box" class="content-box-item"
style="width: 100%; height: 25%" style="width: 100%; height: 25%"
> >
<div class="box-title">实时客流</div> <div class="box-title">实时客流</div>
@ -77,7 +87,7 @@
</div> </div>
</div> </div>
<div <div
class="content-box" class="content-box-item"
style="width: 100%; height: 25%" style="width: 100%; height: 25%"
> >
<div class="box-title">实时累计客流</div> <div class="box-title">实时累计客流</div>
@ -106,7 +116,7 @@
</div> </div>
</div> </div>
<div <div
class="content-box" class="content-box-item"
style="width: 100%; height: 48%" style="width: 100%; height: 48%"
> >
<div class="box-title">实时客流来源</div> <div class="box-title">实时客流来源</div>
@ -163,15 +173,15 @@
</div> </div>
</div> </div>
<div class="bottom-content"> <div class="bottom-content">
<div class="content-box" style="width: 33%"> <div class="content-box-item" style="width: 33%">
<div class="box-title">近七日客流趋势</div> <div class="box-title">近七日客流趋势</div>
<div id="chart1" style="flex: 1"></div> <div id="chart1" style="flex: 1"></div>
</div> </div>
<div class="content-box" style="width: 33%"> <div class="content-box-item" style="width: 33%">
<div class="box-title">客流年龄结构</div> <div class="box-title">客流年龄结构</div>
<div id="chart2" style="flex: 1"></div> <div id="chart2" style="flex: 1"></div>
</div> </div>
<div class="content-box" style="width: 33%"> <div class="content-box-item" style="width: 33%">
<div class="box-title">停留时长分布</div> <div class="box-title">停留时长分布</div>
<div id="chart3" style="flex: 1"></div> <div id="chart3" style="flex: 1"></div>
</div> </div>
@ -555,7 +565,7 @@ export default {
this.videoList = []; this.videoList = [];
this.videoUrl = ""; this.videoUrl = "";
this.currentTreeItem = data; this.currentTreeItem = data;
echartsClear() echartsClear();
this.realtimeTourist(); this.realtimeTourist();
this.touristCumulative(); this.touristCumulative();
this.beforeDaysTourist(); this.beforeDaysTourist();
@ -582,11 +592,8 @@ export default {
pageSize: 100, pageSize: 100,
}; };
} else if (this.currentTreeItem.title == "合江门冠英街") { } else if (this.currentTreeItem.title == "合江门冠英街") {
params = { this.queryHJandGY();
pageNum: 1, return;
pageSize: 100,
deviceName: "合江门",
};
} }
this.$http this.$http
.post("device/queryDeviceInfoPage", this.common.request(params)) .post("device/queryDeviceInfoPage", this.common.request(params))
@ -599,6 +606,46 @@ export default {
} }
}); });
}, },
queryHJandGY() {
// 查询合江门
let params1 = {
pageNum: 1,
pageSize: 100,
deviceName: "合江门",
};
this.$http
.post(
"device/queryDeviceInfoPage",
this.common.request(params1)
)
.then((res) => {
if (res.data.code == 200) {
this.videoList = this.videoList.concat(
res.data.data.records
);
if (this.videoList.length > 0) {
this.changeVideo(this.videoList[0], 0);
}
}
});
let params2 = {
pageNum: 1,
pageSize: 100,
deviceType: "冠英街",
};
this.$http
.post(
"device/queryDeviceInfoPage",
this.common.request(params2)
)
.then((res) => {
if (res.data.code == 200) {
this.videoList = this.videoList.concat(
res.data.data.records
);
}
});
},
// 查询实时客流 // 查询实时客流
realtimeTourist() { realtimeTourist() {
let params = { let params = {
@ -670,11 +717,11 @@ export default {
if (res.data.code == 200) { if (res.data.code == 200) {
let xData = res.data.data.map((item) => { let xData = res.data.data.map((item) => {
if (item.key == "3") { if (item.key == "3") {
item.key = item.key + '日及以上' item.key = item.key + "日及以上";
} else { } else {
item.key = item.key + '日' item.key = item.key + "日";
} }
return item.key return item.key;
}); });
let yData = res.data.data.map((item) => let yData = res.data.data.map((item) =>
parseFloat((item.value * 100).toFixed(2)) parseFloat((item.value * 100).toFixed(2))
@ -863,7 +910,7 @@ export default {
} }
} }
} }
.content-box { .content-box-item {
width: 300px; width: 300px;
height: 100%; height: 100%;
background-color: #3b3d43; background-color: #3b3d43;

Write Preview
Loading…
Cancel
Save