明树Git Lab

Skip to content

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

修改

parent 6371d7f5
Expand all 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
This diff is collapsed.
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