明树Git Lab

Skip to content

J
jt_front
Commit ad49af42 authored by chenron's avatar chenron
Browse files
Options

修改

parent 6371d7f5
Show whitespace changes
Inline Side-by-side
Showing with 131 additions and 510 deletions
src/App.vue
View file @ ad49af42
......@@ -6,4 +6,6 @@
<script setup></script>
<style scoped lang="less"></style>
<style scoped lang="less">
@import "./assets/font/font.less";
</style>
src/assets/font/font.less 0 → 100644
View file @ ad49af42
@font-face {
font-family: 'YouSheBiaoTiHei-Regular';
src: url('../font/字体/优设标题黑.ttf');
font-weight: normal;
font-style: normal;
}
\ No newline at end of file
src/components/CircleProgress.vue
View file @ ad49af42
......@@ -85,7 +85,5 @@ onUnmounted(() => {
.double-circle-container {
.vw(width, 120);
.vh(height,120);
// width: 120px;
// height: 120px;
}
</style>
src/components/CommonComplete.vue
View file @ ad49af42
......@@ -63,7 +63,7 @@ const props = defineProps({
display: flex;
justify-content: space-between;
p {
height: 10px;
.vh(height,10);
}
.pro-title {
.font(12);
......
src/components/Map.vue
View file @ ad49af42
<template>
<!-- <div class="map-container">
<div id="container" ref="mapRef"></div>
</div> -->
<div class="tourism">
<div style="background-color: #ffffff">
<div id="container"></div>
</div>
</div>
</template>
<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted } from "vue";
import gansuLine from "./gansu.json";
let map = null;
// 注意：要想市级区域正常显示，必须添加安全密钥
window._AMapSecurityConfig = {
securityJsCode: "75a8291a9e8f7c838fc5e4dd0d538f30",
};
......@@ -30,48 +23,59 @@ const handleInitMap = () => {
//设置地图容器id
viewMode: "2D",
zoom: 4, //初始化地图级别
center: [113.808299, 34.791787], //初始化地图中心点位置
center: [100.808299, 35.791787], //初始化地图中心点位置
expandZoomRange: true, // 开启显示范围设置
mapStyle: "amap://styles/2d017848d08f94f20b6e50aaae661148",
rotateEnable: false, // 是否可以旋转
copyrightControl: false,
logoControl: false,
});
let districtSearch = new AMap.DistrictSearch({
subdistrict: 0, //获取边界不需要返回下级行政区
extensions: "all", //返回行政区边界坐标组等具体信息
level: "province", //查询行政级别为 市 province-省 district-市
});
// handleDistrict(districtSearch);
const mapSize = map.getSize();
mapSize.width < 780 ? map.setZoom(3.5) : map.setZoom(4);
const minZoom = 4;
// map.on("zoomchange", function (e) {
// map.getZoom() < 2 ? map.setZoom(minZoom) : map.setZoom(15);
// });
handleDistrict();
addPolylines();
handleAddMarket();
})
.catch((e) => {
console.log(e);
// console.log(e);
});
};
// 高亮和描边
const handleDistrict = (districtSearch) => {
const handleDistrict = () => {
let districtSearch = new AMap.DistrictSearch({
subdistrict: 0, //获取边界不需要返回下级行政区
extensions: "all", //返回行政区边界坐标组等具体信息
level: "province", //查询行政级别为 市 province-省 district-市
});
let polygons = [];
// let arr = ["湖北省", "湖南省"]; //此处为高亮的市名
let arr = ["中华人民共和国"]; //此处为高亮的市名
// arr.forEach((item) => {
districtSearch.search("中华人民共和国", function (status, result) {
// 查询成功时，result即为对应的行政区信息
// map.remove(polygons); //清除上次结果
let bounds = result.districtList[0].boundaries;
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
let polygon = new AMap.Polygon({
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.4,
fillColor: "#80d8ff",
strokeColor: "#0091ea",
});
polygons.push(polygon);
}
}
// if (bounds) {
// for (let i = 0, l = bounds.length; i < l; i++) {
// //生成行政区划polygon
// let polygon = new AMap.Polygon({
// strokeWeight: 1,
// path: bounds[i],
// fillOpacity: 0.4,
// fillColor: "#80d8ff",
// strokeColor: "#0091ea",
// });
// polygons.push(polygon);
// }
// }
// 描边
for (let i = 0; i < bounds.length; i++) {
let outerPolyline = new AMap.Polyline({
path: bounds[i],
strokeColor: "#0435F9",
strokeColor: "#72A8FF",
strokeWeight: 3,
map: map,
});
......@@ -80,6 +84,7 @@ const handleDistrict = (districtSearch) => {
map.add(polygons);
map.setFitView(polygons); //视口自适应
});
// });
};
// 添加新路线
const addPolylines = () => {
......@@ -90,7 +95,7 @@ const addPolylines = () => {
let polylineObj = new AMap.Polyline({
path: lnglats,
strokeWeight: 4,
strokeColor: "red",
strokeColor: "#F0E82A",
extData: geojson.properties, // 自定义属性数据
});
// 生成新的路线，用于覆盖旧的
......@@ -101,16 +106,31 @@ const addPolylines = () => {
isOutline: true,
borderWeight: 2,
outlineColor: "rgba(0, 221, 235, 1)",
cursor: "pointer",
});
map.add(newPolyline);
newPolyline.hide();
// 获取路线数据
const properties = polylineObj.getExtData();
// 填报内容
let content = `
<div class="infoWindow">
<p class="infoWindow-title">${properties.name}</p>
<div class="infoWindow-title">项目OOI</div>
<div class="infoWindow-content">
<p>
<span class="infoWindow-content-title">数据01:</span>
<span class="infoWindow-content-value">${properties.amount}<span class="infoWindow-unit">单位</span></span>
</p>
<p>
<span class="infoWindow-content-title">数据02:</span>
<span class="infoWindow-content-value">${properties.amount}<span class="infoWindow-unit">单位</span></span>
</p>
<p>
<span class="infoWindow-content-title">数据03:</span>
<span class="infoWindow-content-value">${properties.amount}<span class="infoWindow-unit">单位</span></span>
</p>
</div>
<div class="infoWindow-bottom"></div>
`;
// 创建 infoWindow 实例
let infoWindow = new AMap.InfoWindow({
......@@ -123,7 +143,6 @@ const addPolylines = () => {
// 鼠标经过
polylineObj.on("mouseover", function (e) {
console.log(e, "243234");
newPolyline.show();
infoWindow.open(map, [`${e.lnglat.getLng()}`, `${e.lnglat.getLat()}`]);
});
......@@ -226,51 +245,57 @@ onMounted(() => {
<style scoped lang="less">
.tourism {
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
#container {
padding: 0px;
margin: 0px auto;
width: 100%;
height: 800px;
.vh(height, 709);
}
.custom-content-marker {
position: relative;
width: 25px;
height: 34px;
}
/deep/.infoWindow {
color: #fff;
background-image: url("../assets/images/infoWindow.png");
/deep/.infoWindow-title {
background-image: url("../assets/images/标题.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
// line-height: 32px;
// padding: 1px 0 25px 25px;
padding-left: 30px;
// padding-top: 8px;
width: 315px;
height: 220px;
}
/deep/.infoWindow-title {
display: flex;
align-items: center;
justify-items: flex-start;
height: 70px;
line-height: 70px;
.font(16);
width: 299px;
line-height: 56px;
padding-left: 10px;
font-weight: 700;
}
/deep/.infoWindow-content {
.font(24);
position: relative;
span {
background-image: url("../assets/images/信息文本.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
width: 299px;
height: 100x;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
/deep/.infoWindow-bottom {
background-image: url("../assets/images/下标.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
margin-top: 1px;
height: 22px;
}
/deep/.infoWindow-content-title {
font-size: 18px;
color: #fff;
font-weight: 400;
}
/deep/.infoWindow-content-value {
font-weight: 400;
font-size: 24px;
color: #93d2ff;
}
/deep/.infoWindow-unit {
font-size: 20px;
color: #93d2ff;
display: inline-block;
position: absolute;
top: -50%;
}
margin-left: 3px;
}
/deep/.anchorPoint {
position: absolute;
......@@ -280,4 +305,12 @@ onMounted(() => {
left: 50%;
transform: translate(-50%, -50%);
}
/deep/.amap-logo {
display: none;
opacity: 0 !important;
}
/deep/.amap-copyright {
opacity: 0;
}
</style>
src/components/Operation.vue
View file @ ad49af42
......@@ -80,7 +80,6 @@ const completeList = reactive([
.construct-container {
display: flex;
.construct-left {
// width: 65%;
flex: 1;
height: 100%;
.construct-left-map {
......@@ -93,7 +92,7 @@ const completeList = reactive([
flex-direction: column;
justify-content: space-between;
.info-title {
.vw(width, 200);
.vw(width, 220);
.vh(height, 30);
.vh(line-height, 30);
.vw(margin-left,10);
......
src/components/ProjectApproval.vue
View file @ ad49af42
......@@ -5,9 +5,11 @@
<div class="stat-card__value">{{ item.value }}</div>
</div>
</div>
<Map />
</template>
<script setup>
import Map from "./Map.vue";
import { onMounted, reactive, watch, ref } from "vue";
const props = defineProps({
......
src/layouts/MainLayout.vue
View file @ ad49af42
......@@ -78,10 +78,6 @@ const menuRoutes = computed(() => {
return mainRoute?.children || [];
});
const hanldeChangeLang = (type) => {
localStorage.setItem("lang", type);
};
// 处理退出登录
const handleLogout = () => {
// 清除登录状态
......
src/views/homePage/index.vue
View file @ ad49af42
......@@ -77,11 +77,10 @@ import Construct from "@/components/Construct.vue";
import ProjectApproval from "@/components/ProjectApproval.vue";
import Operation from "@/components/Operation.vue";
import { reactive, ref } from "vue";
import component from "element-plus/es/components/tree-select/src/tree-select-option.mjs";
const selectedLeftBtn = ref("equity");
const selectedRightBtn = ref("");
const selectedContentBtn = ref(3);
const selectedContentBtn = ref(1);
const selectedContentName = ref("立项");
const isFullscreen = ref(false);
const showPopup = ref(false);
......@@ -213,6 +212,7 @@ window.addEventListener("fullscreenchange", () => {
letter-spacing: 3px;
.vh(margin-top, -15);
.font(24);
font-family: HelveticaNeue;
}
.header-left {
display: flex;
......@@ -220,21 +220,24 @@ window.addEventListener("fullscreenchange", () => {
align-items: center;
padding-left: 75px;
.nav-btn {
width: 100%;
.vh(line-height, 40);
.vh(line-height, 36);
.font(14);
cursor: pointer;
color: #fff;
.font(14);
background-repeat: no-repeat;
background-size: cover;
background-size: 100%, 100%;
background-position: center;
&:not(.active) {
background-image: url("../../assets/images/left-btn.png");
.vh(height,36);
.vw(width,208);
}
&.active {
background-image: url("../../assets/images/left-hlightBtn.png");
.vh(height,36);
.vw(width,208);
}
}
}
......@@ -243,21 +246,24 @@ window.addEventListener("fullscreenchange", () => {
justify-content: center;
align-items: center;
.nav-btn {
width: 100%;
.vh(line-height, 40);
.vh(line-height, 36);
.font(14);
cursor: pointer;
color: #fff;
.font(14);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
&:not(.active) {
background-image: url("../../assets/images/right-btn.png");
.vh(height,36);
.vw(width,208);
}
&.active {
background-image: url("../../assets/images/right-hight-btn.png");
.vh(height,36);
.vw(width,208);
}
}
}
......
src/views/homePage/mapCopy.vue deleted 100644 → 0
View file @ 6371d7f5
<template>
<div class="map-container">
<div id="container" ref="mapRef"></div>
<div v-if="loading" class="loading">地图加载中...</div>
<div v-if="error" class="error">{{ error }}</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
const mapRef = ref(null);
const loading = ref(true);
const error = ref("");
let map = null;
let polylines = [];
window._AMapSecurityConfig = {
securityJsCode: "75a8291a9e8f7c838fc5e4dd0d538f30",
};
// 高德地图API密钥（请替换为您的实际密钥）
const AMAP_KEY = "c691971f068b92c897fb908c4ddef6d4";
// 折线数据 - 覆盖全国各省的不同线路
const polylineData = [
// 省内连接线
{
name: "丽江鹤峰到邬阳路线（从国道出发）",
type: "national",
path: [
[100.23, 26.88], // 丽江（云南省丽江市）
[101.5, 27.2], // 大理
[102.8, 27.8], // 攀枝花
[104.0, 28.5], // 宜宾
[105.0, 29.5], // 泸州
[106.5, 29.8], // 重庆
[108.0, 30.5], // 恩施
[109.8, 30.2], // 建始
[110.43, 29.87], // 鹤峰（恩施州鹤峰县）
[110.2, 30.0], // 走马镇
[110.1, 30.1], // 太平镇
[110.05, 30.15], // 邬阳乡
],
},
{
name: "广水鹤峰到邬阳路线",
type: "provincial",
path: [
[113.85, 31.62], // 广水（随州市广水市）
[112.5, 31.2], // 安陆
[111.8, 31.0], // 京山
[111.2, 30.8], // 钟祥
[110.8, 30.5], // 荆门
[110.6, 30.2], // 当阳
[110.43, 29.87], // 鹤峰（恩施州鹤峰县）
[110.2, 30.0], // 走马镇
[110.1, 30.1], // 太平镇
[110.05, 30.15], // 邬阳乡
],
},
{
name: "恩施到武汉路线",
type: "provincial",
path: [
[109.48, 30.28], // 恩施
[110.2, 30.5], // 宜昌
[111.3, 30.7], // 荆州
[112.3, 30.6], // 潜江
[113.0, 30.8], // 仙桃
[114.27, 30.58], // 武汉
],
},
{
name: "临沂到威海路线",
type: "national",
path: [
[118.35, 35.05], // 临沂
[118.8, 35.5], // 沂水
[119.2, 36.0], // 潍坊
[119.8, 36.8], // 烟台
[121.38, 37.52], // 威海
],
},
{
name: "丹东到齐齐哈尔路线",
type: "provincial",
path: [
[124.38, 40.13], // 丹东
[123.8, 40.5], // 凤城
[123.5, 41.0], // 本溪
[123.38, 41.8], // 沈阳
[122.8, 42.2], // 铁岭
[122.5, 43.0], // 四平
[123.9, 44.5], // 大庆
[123.97, 47.35], // 齐齐哈尔
],
},
{
name: "华山到兵马俑路线",
type: "provincial",
path: [
[110.09, 34.45], // 华山
[109.8, 34.4], // 华阴
[109.5, 34.35], // 渭南
[109.27, 34.38], // 临潼
[109.28, 34.38], // 兵马俑
],
},
{
name: "吉安到南昌路线",
type: "provincial",
path: [
[114.98, 27.12], // 吉安
[115.2, 27.5], // 吉水
[115.5, 28.0], // 樟树
[115.8, 28.4], // 丰城
[115.89, 28.68], // 南昌
],
},
];
// 加载高德地图API
const loadAmapScript = () => {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve();
return;
}
const script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
// 使用您的高德地图API密钥
script.src = `https://webapi.amap.com/maps?v=2.0&key=${AMAP_KEY}&plugins=AMap.PolylineEditor`;
script.onerror = () => {
reject(new Error("高德地图API加载失败，请检查网络连接"));
};
script.onload = () => {
if (window.AMap) {
resolve();
} else {
reject(new Error("高德地图API初始化失败"));
}
};
document.head.appendChild(script);
});
};
// 初始化地图
const initMap = async () => {
try {
loading.value = true;
error.value = "";
// 加载高德地图API
await loadAmapScript();
// 创建地图实例
map = new AMap.Map("container", {
zoom: 3.9,
center: [108.95, 34.27], // 中国中心点
viewMode: "2D",
mapStyle: "amap://styles/2d017848d08f94f20b6e50aaae661148",
minZoom: 4,
});
// 标记
const markers = [];
const positionsList = [
{
number: 1,
position: [116.405467, 39.907761],
},
{
number: 5,
position: [114.298569, 30.584354],
},
{
number: 6,
position: [117.190186, 39.125595],
},
{
number: 4,
position: [112.549248, 37.857014],
},
{
number: 8,
position: [123.429092, 41.796768],
},
{
number: 2,
position: [121.472641, 31.231707],
},
{
number: 7,
position: [119.306236, 26.075302],
},
{
number: 9,
position: [106.504959, 29.533155],
},
{
number: 6,
position: [91.1145, 29.64415],
},
{
number: 3,
position: [101.77782, 36.61729],
},
{
number: 8,
position: [87.61688, 43.82663],
},
{
number: 10,
position: [111.75199, 40.84149],
},
{
number: 9,
position: [126.642464, 45.756966],
},
];
for (var i = 0, marker; i < positionsList.length; i++) {
marker = new AMap.Marker({
map: map,
position: positionsList[i].position,
// icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
offset: new AMap.Pixel(-13, -30),
content:
"" +
'<div class="custom-content-marker">' +
'<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png">' +
`<div class="close-btn"">${positionsList[i].number}</div>` +
"</div>",
});
markers.push(marker);
}
map.add([markers]);
// const viaMarker = new AMap.Marker({
// position: new AMap.LngLat(116.38, 39.92),
// content: markerContent,
// // 将一张图片的地址设置为 icon
// // icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png",
// // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
// offset: new AMap.Pixel(-31, -30),
// size: new AMap.Size(45, 65),
// // imageSize: new AMap.Size(135, 40),
// // imageOffset: new AMap.Pixel(-95, -3),
// });
// map.add([viaMarker]);
// 地图初始化完成后自动添加路线
addPolylines();
loading.value = false;
} catch (err) {
console.error("地图初始化失败:", err);
error.value = `地图加载失败: ${err.message}`;
loading.value = false;
}
};
// 添加所有折线到地图
const addPolylines = () => {
if (!map) return;
// 清除之前的折线
clearPolylines();
// 添加折线
polylineData.forEach((data, index) => {
// 所有线路统一使用黄色
const polyline = new AMap.Polyline({
path: data.path,
strokeColor: "#FFD700", // 黄色
strokeWeight: 4,
strokeOpacity: 0.8,
strokeStyle: "solid",
cursor: "pointer",
});
// 添加鼠标悬停事件
polyline.on("mouseover", (e) => {
// 获取道路类型中文名
const getTypeName = (type) => {
const typeNames = {
highway: "高速公路",
national: "国道",
provincial: "省道",
urban: "城市快速路",
railway: "铁路",
};
return typeNames[type] || "其他道路";
};
// 创建信息窗体
const infoWindow = new AMap.InfoWindow({
content: `
<div style="padding: 12px; min-width: 200px;">
<h4 style="margin: 0 0 8px 0; color: #333; font-size: 14px; font-weight: bold;">${
data.name
}</h4>
<p style="margin: 4px 0; color: #666; font-size: 12px;">
<strong>类型:</strong> ${getTypeName(data.type)}
</p>
<p style="margin: 4px 0; color: #666; font-size: 12px;">
<strong>起点:</strong> ${data.path[0][0].toFixed(
2
)}, ${data.path[0][1].toFixed(2)}
</p>
<p style="margin: 4px 0; color: #666; font-size: 12px;">
<strong>终点:</strong> ${data.path[
data.path.length - 1
][0].toFixed(2)}, ${data.path[data.path.length - 1][1].toFixed(2)}
</p>
<p style="margin: 4px 0; color: #666; font-size: 12px;">
<strong>途经点数:</strong> ${data.path.length}个
</p>
</div>
`,
offset: new AMap.Pixel(0, -30),
});
infoWindow.open(map, e.lnglat);
// 鼠标离开时关闭信息窗体
polyline.on("mouseout", () => {
infoWindow.close();
});
});
// 添加点击事件
polyline.on("click", (e) => {
console.log(`点击了折线: ${data.name}`);
});
map.add(polyline);
polylines.push(polyline);
});
};
// 清除所有折线
const clearPolylines = () => {
if (map && polylines.length > 0) {
map.remove(polylines);
polylines = [];
}
};
onMounted(() => {
initMap();
});
onUnmounted(() => {
if (map) {
map.destroy();
}
});
</script>
<style scoped lang="less">
.map-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
#container {
width: 100%;
height: 100%;
overflow: hidden;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px;
border-radius: 8px;
font-size: 16px;
z-index: 1000;
}
.error {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 0, 0, 0.1);
color: #ff0000;
padding: 20px;
border-radius: 8px;
font-size: 14px;
border: 1px solid #ff0000;
z-index: 1000;
max-width: 80%;
text-align: center;
}
}
.custom-content-marker {
position: relative;
width: 25px;
height: 34px;
}
/deep/.close-btn {
position: absolute;
color: #fff;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment