{{ item.label }}
-
-
`,
- offset: new AMap.Pixel(-25, -25), // 调整文本位置
+ offset: new AMap.Pixel(-25, -25), // 调整文本位置
});
// 添加 hover 高亮事件
- labelMarker.on('mouseover', () => {
+ labelMarker.on("mouseover", () => {
labelMarker.setContent(`
+
@@ -92,7 +97,7 @@ export default {
props: {
center: {
type: Array,
- default: () => [104.619853, 28.900000],
+ default: () => [104.619853, 28.9],
},
zoom: {
type: Number,
@@ -180,48 +185,214 @@ export default {
getTileUrl: (x, y, z) =>
`http://t0.tianditu.gov.cn/DataServer?T=img_w&tk=${this.common.mapKey}&x=${x}&y=${y}&l=${z}`,
});
-
- this.map = new AMap.Map("center-map", {
- 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"],
+ const district = new AMap.DistrictSearch({
+ subdistrict: 3,
+ extensions: "all",
+ level: "district",
});
- this.map.on("complete", () => {
- if (this.aggregationPoint) {
- this.aggregationPoint(this.pointList);
- }
- this.addPoints(); // 添加点标记
+ district.search(this.districtLocation, (status, result) => {
+ const bounds = result.districtList[0].boundaries;
+ const mask = bounds.map((bound) => [bound]);
+ const polygons = bounds.map(
+ (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
- this.loadGeoJSON();
-
- // 加载翠屏区底图
- this.loadCuiPingDistrict();
+ // this.loadGeoJSON();
// 添加地图点击事件
// 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: `
+
{{ item.point[listItemKey] }}
+ ${item.name}
+
+ `,
+ offset: new AMap.Pixel(-25, -10), // 调整文本位置
+ });
+
+ // 添加 hover 高亮事件
+ labelMarker.on("mouseover", () => {
+ labelMarker.setContent(`
+
+ ${item.name}
+
+ `);
+ });
+
+ labelMarker.on("mouseout", () => {
+ labelMarker.setContent(`
+
+ ${item.name}
+
+ `);
+ });
+
+ // 点击事件
+ labelMarker.on("click", () => {
+ this.$emit("enterTown", item.name); // 触发事件
+ });
+
+ labelMarker.setMap(this.map);
+ });
+ },
handleMapClick(e) {
const lngLat = e.lnglat;
- console.log('点击坐标:', lngLat);
+ console.log("点击坐标:", lngLat);
- this.polygons.forEach(polygon => {
+ this.polygons.forEach((polygon) => {
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) {
const name = polygon.getExtData().name;
- console.log('点击:', name);
+ console.log("点击:", name);
this.map.setZoomAndCenter(10, lngLat); // 放大并定位到点击区域
alert(`您点击了乡镇：${name}`);
}
@@ -235,31 +406,38 @@ export default {
});
const self = this; // 保存上下文以便回调使用
- districtSearch.search(this.districtLocation, function (status, result) {
- if (status === "complete" && result.districtList && result.districtList.length) {
- const district = result.districtList[0];
- const boundaries = district.boundaries;
-
- if (boundaries) {
- // 绘制翠屏区底图
- self.drawCuiPingBase(boundaries);
+ districtSearch.search(
+ this.districtLocation,
+ function (status, result) {
+ if (
+ status === "complete" &&
+ result.districtList &&
+ result.districtList.length
+ ) {
+ const district = result.districtList[0];
+ const boundaries = district.boundaries;
+
+ if (boundaries) {
+ // 绘制翠屏区底图
+ self.drawCuiPingBase(boundaries);
+ } else {
+ console.warn("翠屏区无边界数据");
+ }
} else {
- console.warn("翠屏区无边界数据");
+ console.error("行政区查询失败: " + status);
}
- } else {
- console.error("行政区查询失败: " + status);
}
- });
+ );
},
drawCuiPingBase(boundaries) {
const mask = boundaries.map((boundary) => [boundary]);
boundaries.forEach((boundary) => {
const polygon = new AMap.Polygon({
path: boundary,
- strokeColor: "#333", // 边界线颜色
+ strokeColor: "#4dd6e6", // 边界线颜色
strokeWeight: 3, // 边界线宽度
fillColor: "#102C4F", // 填充颜色
- fillOpacity: 0.7, // 填充透明度
+ fillOpacity: 0.5, // 填充透明度
});
this.map.add(polygon);
});
@@ -277,9 +455,9 @@ export default {
},
loadGeoJSON() {
// 使用 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 数据
geojsonData.features.forEach((feature, index) => {
@@ -287,15 +465,17 @@ export default {
const name = properties.name; // 获取乡镇名称
const coordinates = geometry.coordinates[0]; // 获取多边形的坐标
const center = this.getPolygonCenter(coordinates); // 计算多边形的中心点
- console.log('多边形中心点:', center);
+ console.log("多边形中心点:", center);
// 创建多边形并设置样式
const polygon = new AMap.Polygon({
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], // 边界线颜色
strokeWeight: 2, // 边界线宽度
- fillColor: '#0A7EA8', // 填充颜色
+ fillColor: "#0A7EA8", // 填充颜色
fillOpacity: 0.5, // 填充透明度
bubble: true, // 允许事件冒泡
});
@@ -319,11 +499,11 @@ export default {
${name}
{
labelMarker.setContent(`
{
+ this.$emit("enterTown", name); // 触发事件
});
labelMarker.setMap(this.map);
@@ -382,7 +562,10 @@ export default {
console.warn(`无效的坐标 ${index}:`, coord); // 调试信息
}
});
- return [lngSum / coordinates[0].length, latSum / coordinates[0].length];
+ return [
+ lngSum / coordinates[0].length,
+ latSum / coordinates[0].length,
+ ];
},
aggregationPoint(pointList) {
diff --git a/src/views/screen/county-screen.vue b/src/views/screen/county-screen.vue
index 39299bd..396ea86 100644
--- a/src/views/screen/county-screen.vue
+++ b/src/views/screen/county-screen.vue
@@ -5,13 +5,7 @@
diff --git a/src/views/screen/global-travel.vue b/src/views/screen/global-travel.vue
index f6250ba..750a4ce 100644
--- a/src/views/screen/global-travel.vue
+++ b/src/views/screen/global-travel.vue
@@ -2,16 +2,31 @@
+
-
+
![]()
@@ -22,9 +37,16 @@
-
-
+
+
@@ -38,66 +60,150 @@
{{ item.name }}
- {{ detailInfo.name }}
+ "
+ >{{ detailInfo.name }}
{{
typeList[detailInfo.type]
}}
-
- 基础信息
-
- 地址:
+
+
+ 基础信息
+
-
+ 地址:
{{
detailInfo.address
}}
-
- 工作时间:
+
+ 工作时间:
{{
detailInfo.openHours
}}
-
- 简介:
+
@@ -105,19 +211,33 @@
-
-
+ 简介:
{{
detailInfo.remark
}}
+
+ 监控:
+
+
+
+
+
+ 视频:
+
+
+
-
- 图片:
+
+ 图片:
- ![]()
+ ![]()
-
-
-
+
@@ -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;
+ });
+ }
+ });
+ },
},
};
@@ -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;
diff --git a/src/views/screen/smart-travel.vue b/src/views/screen/smart-travel.vue
index 22ffd4d..55e3064 100644
--- a/src/views/screen/smart-travel.vue
+++ b/src/views/screen/smart-travel.vue
@@ -42,13 +42,23 @@
}}
- 线路名称：{{ item.lineName }}
+
+
+
+ 线路名称：{{ item.lineName }}
线路途经：{{ item.lineText }}
+
暂无监控资源
实时客流
@@ -77,7 +87,7 @@
实时累计客流
@@ -106,7 +116,7 @@
实时客流来源
@@ -163,15 +173,15 @@
-
+
-
近七日客流趋势
+
-
客流年龄结构
+
@@ -555,7 +565,7 @@ export default {
this.videoList = [];
this.videoUrl = "";
this.currentTreeItem = data;
- echartsClear()
+ echartsClear();
this.realtimeTourist();
this.touristCumulative();
this.beforeDaysTourist();
@@ -582,11 +592,8 @@ export default {
pageSize: 100,
};
} else if (this.currentTreeItem.title == "合江门冠英街") {
- params = {
- pageNum: 1,
- pageSize: 100,
- deviceName: "合江门",
- };
+ this.queryHJandGY();
+ return;
}
this.$http
.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() {
let params = {
@@ -670,11 +717,11 @@ export default {
if (res.data.code == 200) {
let xData = res.data.data.map((item) => {
if (item.key == "3") {
- item.key = item.key + '日及以上'
+ item.key = item.key + "日及以上";
} else {
- item.key = item.key + '日'
+ item.key = item.key + "日";
}
- return item.key
+ return item.key;
});
let yData = res.data.data.map((item) =>
parseFloat((item.value * 100).toFixed(2))
@@ -863,7 +910,7 @@ export default {
}
}
}
-.content-box {
+.content-box-item {
width: 300px;
height: 100%;
background-color: #3b3d43;
停留时长分布