明树Git Lab

Skip to content

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

地图更新

parent 47077233
Hide whitespace changes
Inline Side-by-side
Showing with 196 additions and 126 deletions
src/components/CommonComplete.vue
View file @ 7afdfc8f
......@@ -77,18 +77,22 @@ const props = defineProps({
.vw(padding, 10);
background-image: url("@/assets/images/complete.png");
background-repeat: no-repeat;
background-size: 100% 100%;
.stat-card-title {
.font(12);
text-align: center;
.font(16);
.vh(margin-top,-8);
display: flex;
justify-content: center;
align-items: center;
}
.stat-card-value {
.font(12);
display: flex;
flex-direction: column;
justify-content: space-between;
.vh(margin-top,20);
.vh(margin-top,10);
.card-value-top {
.vh(margin-bottom,10);
// .vh(margin-bottom,10);
}
.card-value-top,
.card-value-bottom {
......@@ -114,21 +118,21 @@ const props = defineProps({
font-family: "Alibaba PuHuiTi";
}
.comparison-value {
color: #32d25a;
color: #ff4757;
display: flex;
align-items: center;
gap: 2px;
&.down-trend {
color: #ff4757;
color: #32d25a;
}
.trend-icon {
.font(12);
color: #32d25a;
color: #ff4757;
&.down-trend {
color: #ff4757;
color: #32d25a;
}
}
}
......
src/components/CommonMap.vue
View file @ 7afdfc8f
......@@ -34,16 +34,12 @@ const handleInitMap = () => {
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(selectName);
})
.catch((e) => {
// console.log(e);
});
.catch((e) => {});
// if (map) return true;
};
// 高亮和描边
const handleDistrict = () => {
......@@ -53,25 +49,9 @@ const handleDistrict = () => {
level: "province", //查询行政级别为 市 province-省 district-市
});
let polygons = [];
let arr = ["中华人民共和国"]; //此处为高亮的市名
// arr.forEach((item) => {
districtSearch.search("中华人民共和国", function (status, result) {
// 查询成功时，result即为对应的行政区信息
// map.remove(polygons); //清除上次结果
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);
// }
// }
// 描边
for (let i = 0; i < bounds.length; i++) {
let outerPolyline = new AMap.Polyline({
......@@ -85,7 +65,6 @@ const handleDistrict = () => {
map.add(polygons);
map.setFitView(polygons); //视口自适应
});
// });
};
// 添加新路线
const addPolylines = () => {
......@@ -183,45 +162,45 @@ const handleAddMarket = (selectName) => {
const markerData = {
建设: [
// 安徽
{ number: 1, position: [117.27, 31.86] },
{ number: 1, position: [117.27, 31.86], province: "安徽省" },
// 广东
{ number: 1, position: [113.2806, 23.1252] },
{ number: 1, position: [113.2644, 23.1291], province: "广东省" },
// 陕西
{ number: 2, position: [112.5492, 37.857] },
{ number: 2, position: [108.948, 34.2632], province: "陕西省" },
// 广西
{ number: 2, position: [108.3664, 22.8177] },
{ number: 2, position: [108.32, 22.824], province: "广西壮族自治区" },
// 山东
{ number: 2, position: [121.6167, 38.9167] },
{ number: 2, position: [117.0009, 36.6758], province: "山东省" },
// 河北
{ number: 1, position: [114.52, 38.05] },
{ number: 1, position: [114.5025, 38.0455], province: "河北省" },
],
试运营: [
// 四川
{ number: 2, position: [117.27, 31.86] },
{ number: 2, position: [104.066, 30.5728], province: "四川省" },
// 山东
{ number: 3, position: [121.6167, 38.9167] },
{ number: 3, position: [117.0009, 36.6758], province: "山东省" },
// 云南
{ number: 1, position: [102.7333, 25.05] },
{ number: 1, position: [102.7123, 25.0406], province: "云南省" },
// 陕西
{ number: 3, position: [112.5492, 37.857] },
{ number: 3, position: [108.948, 34.2632], province: "陕西省" },
// 广西
{ number: 1, position: [108.3664, 22.8177] },
{ number: 1, position: [108.32, 22.824], province: "广西壮族自治区" },
// 湖北
{ number: 1, position: [114.3052, 30.5929] },
{ number: 1, position: [114.2986, 30.5844], province: "湖北省" },
],
运营: [
// 四川
{ number: 1, position: [117.27, 31.86] },
{ number: 1, position: [104.066, 30.5728], province: "四川省" },
// 山东
{ number: 1, position: [121.6167, 38.9167] },
{ number: 1, position: [117.0009, 36.6758], province: "山东省" },
// 湖北
{ number: 1, position: [114.3052, 30.5929] },
{ number: 1, position: [114.2986, 30.5844], province: "湖北省" },
],
退出: [
// 河南
{ number: 3, position: [113.65, 34.7667] },
{ number: 3, position: [113.6654, 34.757], province: "河南省" },
],
立项: [], // 立项没有标记
// 立项: [],
};
const positionsList = markerData[selectName] || [];
......@@ -233,16 +212,49 @@ const handleAddMarket = (selectName) => {
// 创建新的标记
for (var i = 0; i < positionsList.length; i++) {
const markerData = positionsList[i];
// 创建悬浮窗口内容
const infoContent = `
<div class="marker-info-window">
<div class="marker-info-title">${markerData.province}</div>
<div class="marker-info-content">
<span class="marker-info-label">路线数量:</span>
<span class="marker-info-value">${markerData.number}</span>
<span class="marker-info-unit">个</span>
</div>
</div>
`;
// 创建信息窗口实例
const infoWindow = new AMap.InfoWindow({
isCustom: true,
content: infoContent,
offset: new AMap.Pixel(0, -35),
closeWhenClickMap: true,
});
const marker = new AMap.Marker({
map: map,
position: positionsList[i].position,
position: markerData.position,
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="anchorPoint">${positionsList[i].number}</div>` +
'<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width: 40px;height: 40px;">' +
`<div class="anchorPoint">${markerData.number}</div>` +
"</div>",
});
// 鼠标悬浮事件
marker.on("mouseover", function (e) {
infoWindow.open(map, e.lnglat);
});
// 鼠标移出事件
marker.on("mouseout", function () {
infoWindow.close();
});
currentMarkers.push(marker);
}
};
......@@ -263,7 +275,10 @@ onMounted(() => {
<style scoped lang="less">
.tourism {
width: 100%;
.vh(height, 709);
.vh(height, 600);
// display: flex;
// justify-content: center;
// align-items: center;
}
.custom-content-marker {
position: relative;
......@@ -324,6 +339,50 @@ onMounted(() => {
transform: translate(-50%, -50%);
}
// 标记悬浮窗口样式
:deep(.marker-info-window) {
background: #04427e;
border: 1px solid #00ddeb;
border-radius: 6px;
padding: 8px 12px;
box-shadow: 0 2px 8px rgba(0, 221, 235, 0.3);
backdrop-filter: blur(4px);
min-width: 120px;
}
:deep(.marker-info-title) {
font-size: 14px;
font-weight: 600;
color: #fff;
margin-bottom: 4px;
border-bottom: 1px solid rgba(0, 221, 235, 0.3);
padding-bottom: 2px;
}
:deep(.marker-info-content) {
display: flex;
align-items: center;
gap: 4px;
}
:deep(.marker-info-label) {
font-size: 12px;
color: #93d2ff;
font-weight: 400;
}
:deep(.marker-info-value) {
font-size: 16px;
font-weight: 600;
color: #00ddeb;
}
:deep(.marker-info-unit) {
font-size: 12px;
color: #93d2ff;
margin-left: 2px;
}
:deep(.amap-logo) {
display: none;
opacity: 0 !important;
......
src/components/CommonTotal.vue
View file @ 7afdfc8f
......@@ -5,6 +5,7 @@
<div class="stat-card-title">{{ item.title }}</div>
<div class="stat-card-value" @click="handleDetail(item)">
{{ item.value }}
<span class="unit" v-if="item.value !== '*'">{{ item.unit }}</span>
</div>
</div>
</div>
......@@ -74,12 +75,12 @@ const currentPage = ref(1);
const pageSize = ref(10);
const tableTotal = ref(0);
const generateTableData = () => {
const generateTableData = (value) => {
const data = [];
const types = ["类型A", "类型B", "类型C"];
const statuses = ["active", "inactive"];
for (let i = 1; i <= 10; i++) {
for (let i = 1; i <= value; i++) {
data.push({
id: i,
name: `项目${i}`,
......@@ -99,7 +100,8 @@ const generateTableData = () => {
const handleDetail = (item) => {
dialogVisible.value = true;
dialogTitle.value = item.title;
tableData.value = generateTableData();
let currentValue = item.unit === "个" ? item.value : "";
tableData.value = generateTableData(currentValue);
};
// 分页处理
......@@ -137,7 +139,7 @@ onMounted(() => {});
display: flex;
.stat-card {
.vw(width, 180);
.vh(height, 90);
// .vh(height, 90);
.vw(border-radius, 5);
.vw(padding, 10);
.vw(margin-right,10);
......@@ -148,12 +150,17 @@ onMounted(() => {});
flex-direction: column;
justify-content: space-between;
.stat-card-title {
.font(12);
.font(16);
// white-space: nowrap;
}
.stat-card-value {
.font(18);
cursor: pointer;
color: @Color;
font-family: "DIN";
.unit {
.font(10);
}
}
}
:last-child {
......
src/views/homePage/components/Construct.vue
View file @ 7afdfc8f
<template>
<div class="construct-container">
<div class="construct-left">
<div class="tag-image">
<!-- <div class="tag-image">
<img src="@/assets/images/建设.png" />
</div>
</div> -->
<div class="construct-left-map">
<Map />
</div>
......@@ -60,26 +60,27 @@ defineOptions({
});
// 使用shallowReactive减少深层响应式开销
const projectList = shallowReactive([
{ title: "总个数（个）", value: "10" },
{ title: "总投资（亿元）", value: "1334.05" },
{ title: "总规模（公里）", value: "1051.56" },
{ title: "总个数", value: "10", unit: "个" },
{ title: "总投资", value: "1334.05", unit: "亿元" },
{ title: "总规模", value: "1051.56", unit: "公里" },
]);
const investmentList = shallowReactive([
{ title: "10月完成投资（亿元）", value: "*" },
{ title: "2025年完成投资（亿元）", value: "*" },
{ title: "累计完成投资（亿元）", value: "*" },
{ title: "10月完成投资", value: "*", unit: "亿元" },
{ title: "2025年完成投资", value: "*", unit: "亿元" },
{ title: "累计完成投资", value: "*", unit: "亿元" },
]);
// recycleList
const recycleList = shallowReactive([
{ title: "10月完成投资（亿元）", value: "*" },
{ title: "2025年完成投资（亿元）", value: "*" },
{ title: "完成率", value: "*" },
{ title: "10月完成投资", value: "*", unit: "亿元" },
{ title: "2025年完成投资", value: "*", unit: "亿元" },
{ title: "完成率", value: "*", unit: "" },
]);
</script>
<style scoped lang="less">
.construct-container {
display: flex;
.vh(margin-top,10);
.construct-left {
width: 100%;
height: 100%;
......@@ -97,6 +98,7 @@ const recycleList = shallowReactive([
display: flex;
flex-direction: column;
justify-content: space-between;
.vh(height,700);
.info-title {
.vw(width, 180);
.vh(height, 30);
......
src/views/homePage/components/Operation.vue
View file @ 7afdfc8f
<template>
<div class="construct-container">
<div class="construct-left">
<div class="tag-image">
<!-- <div class="tag-image">
<img src="@/assets/images/建设.png" />
</div>
</div> -->
<div class="construct-left-map">
<Map />
</div>
......@@ -52,19 +52,19 @@ defineOptions({
});
// 使用shallowReactive减少深层响应式开销
const projectList = shallowReactive([
{ title: "总个数（个）", value: "2" },
{ title: "总投资（亿元）", value: "114.23" },
{ title: "总规模（公里）", value: "233.22" },
{ title: "总个数", value: "2", unit: "个" },
{ title: "总投资", value: "114.23", unit: "亿元" },
{ title: "总规模", value: "233.22", unit: "公里" },
]);
const investmentList = shallowReactive([
{ title: "10月完成投资（亿元）", value: "*" },
{ title: "2025年完成投资（亿元）", value: "*" },
{ title: "累计完成投资（亿元）", value: "*" },
{ title: "10月完成投资", value: "*", unit: "亿元" },
{ title: "2025年完成投资", value: "*", unit: "亿元" },
{ title: "累计完成投资", value: "*", unit: "亿元" },
]);
const recycleList = shallowReactive([
{ title: "10月完成投资（亿元）", value: "*" },
{ title: "2025年完成投资（亿元）", value: "*" },
{ title: "完成率", value: "*" },
{ title: "10月完成投资", value: "*", unit: "亿元" },
{ title: "2025年完成投资", value: "*", unit: "亿元" },
{ title: "完成率", value: "*", unit: "" },
]);
const operationList = shallowReactive([
{ title: "营业收入完成进度", value: "*", actualValue: "*", planValue: "*" },
......@@ -122,13 +122,14 @@ const completeList = shallowReactive([
display: flex;
flex-direction: column;
justify-content: space-between;
.vh(height,612);
.info-title {
.vw(width, 180);
.vh(height, 30);
.vh(line-height, 30);
.font(16);
.vw(padding-left,20);
.vh(margin-bottom,15);
.vh(margin-bottom,10);
.vh(margin-top,15);
text-align: left;
color: #fff;
......
src/views/homePage/components/ProjectApproval.vue
View file @ 7afdfc8f
......@@ -34,21 +34,21 @@ const mapRef = ref(null);
// 使用静态数据避免重复创建
const STATIC_DATA = {
立项: [
{ title: "总个数（个）", value: "0" },
{ title: "总投资（亿元）", value: "0" },
{ title: "总规模（公里）", value: "0" },
{ title: "总个数", value: "0", unit: "个" },
{ title: "总投资", value: "0", unit: "亿元" },
{ title: "总规模", value: "0", unit: "公里" },
],
转让: [
{ title: "总个数（个）", value: "59" },
{ title: "总投资（亿元）", value: "2733.35" },
{ title: "总规模（公里）", value: "5116.72" },
{ title: "累计完成投资（亿元）", value: "3116.44" },
{ title: "总个数", value: "59", unit: "个" },
{ title: "总投资", value: "2733.35", unit: "亿元" },
{ title: "总规模", value: "5116.72", unit: "公里" },
{ title: "累计完成投资", value: "3116.44", unit: "亿元" },
],
退出: [
{ title: "总个数（个）", value: "3" },
{ title: "总投资（亿元）", value: "141.29" },
{ title: "总规模（公里）", value: "108.35" },
{ title: "累计完成投资（亿元）", value: "0" },
{ title: "总个数", value: "3", unit: "个" },
{ title: "总投资", value: "141.29", unit: "亿元" },
{ title: "总规模", value: "108.35", unit: "公里" },
{ title: "累计完成投资", value: "0", unit: "亿元" },
],
};
......@@ -74,5 +74,6 @@ watch(
.project-container {
display: flex;
justify-content: center;
.vh(margin-top, 20);
}
</style>
src/views/homePage/components/trialOperations.vue
View file @ 7afdfc8f
<template>
<div class="construct-container">
<div class="construct-left">
<div class="tag-image">
<!-- <div class="tag-image">
<img src="@/assets/images/建设.png" />
</div>
</div> -->
<div class="construct-left-map">
<Map />
</div>
......@@ -52,19 +52,19 @@ defineOptions({
});
// 使用shallowReactive减少深层响应式开销
const projectList = shallowReactive([
{ title: "总个数（个）", value: "9" },
{ title: "总投资（亿元）", value: "2733.35" },
{ title: "总规模（公里）", value: "5116.72" },
{ title: "总个数", value: "9", unit: "个" },
{ title: "总投资", value: "1151.36", unit: "亿元" },
{ title: "总规模", value: "945.67", unit: "公里" },
]);
const investmentList = shallowReactive([
{ title: "10月完成投资（亿元）", value: "*" },
{ title: "2025年完成投资（亿元）", value: "*" },
{ title: "累计完成投资（亿元）", value: "*" },
{ title: "10月完成投资", value: "*", unit: "亿元" },
{ title: "2025年完成投资", value: "*", unit: "亿元" },
{ title: "累计完成投资", value: "*", unit: "亿元" },
]);
const recycleList = shallowReactive([
{ title: "10月完成投资（亿元）", value: "*" },
{ title: "2025年完成投资（亿元）", value: "*" },
{ title: "完成率", value: "*" },
{ title: "10月完成投资", value: "*", unit: "亿元" },
{ title: "2025年完成投资", value: "*", unit: "亿元" },
{ title: "完成率", value: "*", unit: "" },
]);
const operationList = shallowReactive([
{
......@@ -137,13 +137,14 @@ const completeList = shallowReactive([
display: flex;
flex-direction: column;
justify-content: space-between;
.vh(height,612);
.info-title {
.vw(width, 180);
.vh(height, 30);
.vh(line-height, 30);
.font(16);
.vw(padding-left,20);
.vh(margin-bottom,15);
.vh(margin-bottom,10);
.vh(margin-top,15);
text-align: left;
color: #fff;
......
src/views/homePage/index.vue
View file @ 7afdfc8f
......@@ -17,9 +17,7 @@
固定资产投资
</div>
</div>
<div class="header-middile">
葛洲坝集团交通投资有限公司投资决策分析系统
</div>
<div class="header-middile"></div>
<div class="header-right">
<div
class="nav-btn"
......@@ -55,15 +53,15 @@
>{{ item.name }}
</span>
</div>
<keep-alive include="ProjectApproval,Construct,Operation,TrialOperations">
<ProjectApproval
:currentName="selectedContentName"
v-if="selectedContentBtn === 1 || selectedContentBtn === 6"
/>
<Construct v-else-if="selectedContentBtn === 2" />
<Operation v-else-if="selectedContentBtn === 4" />
<TrialOperations v-else-if="selectedContentBtn === 3" />
</keep-alive>
<!-- <keep-alive include="ProjectApproval,Construct,Operation,TrialOperations"> -->
<ProjectApproval
:currentName="selectedContentName"
v-if="selectedContentBtn === 1 || selectedContentBtn === 6"
/>
<Construct v-else-if="selectedContentBtn === 2" />
<Operation v-else-if="selectedContentBtn === 4" />
<TrialOperations v-else-if="selectedContentBtn === 3" />
<!-- </keep-alive> -->
</div>
<div class="bottom"></div>
</div>
......@@ -223,7 +221,7 @@ window.addEventListener("fullscreenchange", () => {
justify-content: center;
align-items: flex-end;
.header-middile {
background-image: url("@/assets/images/header.png");
background-image: url("@/assets/images/头部bg.png");
background-repeat: no-repeat;
background-position: center;
// background-size: 170% 100%;
......@@ -312,9 +310,10 @@ window.addEventListener("fullscreenchange", () => {
flex: 1;
.vw(padding-left, 20);
.vw(padding-right, 20);
.vh(margin-top,-16px);
.content-btn {
.vh(margin-top,-10);
.vh(margin-bottom,20);
// .vh(margin-top,0);
// .vh(margin-bottom,20);
display: flex;
justify-content: center;
align-items: center;
......@@ -393,7 +392,7 @@ window.addEventListener("fullscreenchange", () => {
background-size: cover;
background-position: center;
width: 100%;
.vh(height, 80);
.vh(height, 110);
}
.fullscreen-btn {
display: flex;
......
src/views/systemManage/departManage.vue
View file @ 7afdfc8f
......@@ -426,15 +426,14 @@ onMounted(() => {
background: rgba(157, 188, 218, 0.1);
height: 100%;
display: flex;
// flex-direction: row;
// box-sizing: border-box;
.search-origin {
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
padding: 20px;
margin-right: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
flex-shrink: 3;
width: 400px;
height: 845px;
}
.origin-title {
display: flex;
......@@ -526,7 +525,4 @@ onMounted(() => {
color: white !important;
}
}
// :deep(.el-tree-node > .el-tree-node__children) {
// background-color: rgba(37, 97, 239, 1) !important;
// }
</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