ylj/YNMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

可以了的一版

Browse Source
This commit is contained in:
ylj20011123 2025-10-31 13:43:59 +08:00
parent bcc33a988a
commit 0df887d3b7
11 changed files with 81 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -18,6 +18,12 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
overflow: hidden;
}
</style>

1
src/page/index/components/AreaLegend/AreaLegend.less
View File

@ -1,6 +1,5 @@
.AreaLegendBox {
width: 100%;
height: 47px;
// background-image: url('../../../../assets/image/AreaLegendBg.png');
// background-repeat: no-repeat;
// background-size: 100% 100%;

2
src/page/index/components/BasicMessageBox/BasicMessageBox.vue
View File

@ -79,7 +79,7 @@ const handleGetNowWeather = async () => {
<div class="rightBox">
<span class="nowTime">{{ nowTime || "" }}</span>
<div class="weatherBox">
<img class="weatherIcon" :src="weatherInfo?.CUR_WEATHER_PIC" />
<img v-if="weatherInfo?.CUR_WEATHER_PIC" class="weatherIcon" :src="weatherInfo?.CUR_WEATHER_PIC" />
<span class="weatherText">{{ weatherInfo?.CUR_WEATHER || "-" }}</span>
</div>
<span class="nowDay">{{ weekDay ? daysEnum[weekDay] : "" }}</span>

7
src/page/index/components/PageMap/PageMap.less
View File

@ -3,8 +3,11 @@
height: 100%;
.mapContent {
width: 3480px;
height: 1080px;
width: 100%;
height: 100%;
// width: 3480px;
// height: 1080px;
// width: 100vw;
// height: 100vh;

6
src/page/index/components/PageMap/PageMap.vue
View File

@ -56,8 +56,8 @@ onMounted(async () => {
map: new GaodeMap({
pitch: 0,
mapStyle: "amap://styles/dark",
// center: [101.6329, 26.38],
center: [109.988078, 26.353654],
// center: [101.6329, 26.38],
center: [101.988078, 25.353654],
zoom: 5,
minZoom: 7,
token: "edb93fe4f1b3d313128b82082c5b3877",
@ -153,7 +153,7 @@ const handleGetServiceList = async () => {
item.SPREGIONTYPETYPE = typeID;
SPREGIONTYPETYPEObj[item.SPREGIONTYPE_ID] = colorList1[typeID];
SPREGIONTYPECOLORLIST.push({
label: item.SPREGIONTYPE_NAME,
label: item.SPREGIONTYPE_NAME.split('管理单元')[0],
value: colorList1[typeID],
});
typeID += 1;

8
src/page/index/components/RegionalRevenue/RegionalRevenue.vue
View File

@ -122,10 +122,10 @@ const handleGetData = async () => {
category.push(subItem.Serverpart_Name)
seriesData.push(Number((subItem.TotalRevenue.Revenue_Amount / 10000).toFixed(2)))
realData.push(subItem.TotalRevenue.Revenue_Amount)
pieData.push({ value: Number((subItem.TotalRevenue.Revenue_Amount / 10000).toFixed(2)), name: subItem.Serverpart_Name })
pieData.push({ value: Number((subItem.TotalRevenue.Revenue_Amount / 10000).toFixed(2)), name: subItem.Serverpart_Name.split('管理单元')[0] })
// lengedData.push({ name: subItem.Serverpart_Name, value: subItem.TotalRevenue.Revenue_Amount.toLocaleString() })
lengedData.push({ name: subItem.Serverpart_Name, value: Number(((subItem.TotalRevenue.Revenue_Amount / sum) * 100).toFixed(2)) })
aiObj[subItem.Serverpart_Name] = subItem.TotalRevenue.Revenue_Amount + '元'
lengedData.push({ name: subItem.Serverpart_Name.split('管理单元')[0], value: Number(((subItem.TotalRevenue.Revenue_Amount / sum) * 100).toFixed(2)) })
aiObj[subItem.Serverpart_Name.split('管理单元')[0]] = subItem.TotalRevenue.Revenue_Amount + '元'
})
}
@ -139,6 +139,8 @@ const handleGetData = async () => {
pieData: pieData,
lengedData: lengedData
}
console.log('resresresres', res);
lengedList.value = lengedData
let RegionalRevenueAI = sessionStorage.getItem('RegionalRevenueAI')

18
src/page/index/components/TrendOfTrafficFlow/TrendOfTrafficFlow.less
View File

@ -1,11 +1,18 @@
.TrendOfTrafficFlowBox {
// width: 100%;
width: calc((100vw - 90px) / 4 - 35px);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.TrendOfTrafficFlowCharts {
width: 100%;
margin-top: 15px;
position: relative;
flex: 1;
display: flex;
flex-direction: column;
min-width: 200px;
/* 🎯 添加最小宽度保护 */
.trafficFlowCarUnit {
font-family: "Microsoft YaHei";
@ -22,7 +29,12 @@
.TrendOfTrafficFlow {
width: 100%;
height: 160px;
min-height: 160px;
flex: 1;
// min-height: 120px;
/* 设置最小高度确保图表可用 */
min-width: 200px;
/* 🎯 添加最小宽度保护 */
}
}
}

28
src/page/index/components/TrendOfTrafficFlow/TrendOfTrafficFlow.vue
View File

@ -53,15 +53,31 @@ watch(
const handleGoMounted = async () => {
const res = await handleGetSectionFlowCount()
const chartDom = document.getElementById('TrendOfTrafficFlow');
if (!chartDom) return;
// 🎯 采用VehiclesEntering组件的成功方案 - 添加容器检查机制
const initChartWithDelay = () => {
const chartDom = document.getElementById('TrendOfTrafficFlow');
if (!chartDom) return;
myChart = echarts.init(chartDom);
// 🎯 关键：检查容器是否可见且有正确尺寸
const containerRect = chartDom.getBoundingClientRect();
if (containerRect.width === 0 || containerRect.height === 0) {
console.log('断面流量容器尺寸不足，延迟重试...', containerRect);
// 如果容器还没有正确尺寸，稍后重试
setTimeout(initChartWithDelay, 50);
return;
}
const option: any = handleSetConfig(res)
// 🎯 容器尺寸正确，初始化图表
myChart = echarts.init(chartDom);
const option: any = handleSetConfig(res)
myChart.setOption(option);
window.addEventListener('resize', resizeChart);
myChart.setOption(option);
window.addEventListener('resize', resizeChart);
console.log('断面流量图表初始化成功，容器尺寸:', containerRect);
};
// 稍微延迟初始化，确保DOM已经稳定
setTimeout(initChartWithDelay, 50);
}
// 配置图表的config

16
src/page/index/index.vue
View File

@ -698,11 +698,7 @@ const handleGetHighWayData = async () => {
@handleChangeComeForm="handleChangeComeForm" @mapLoaded="handleMapLoaded" />
<div class="AreaLegend">
<div class="AreaLegendContent">
<!-- <span style="font-size: 60px;color: #fff;" @click="handleGetHighWayData">拿数据</span> -->
<!-- 图例组件 -->
<AreaLegend :mapLegend="mapLegend" />
</div>
<!-- AI图标对话 -->
<div class="AIBox" @click="handleClickAIBox" v-if="false">
@ -741,7 +737,11 @@ const handleGetHighWayData = async () => {
<!-- 公告主题 -->
<!-- <AnnouncementTopic style="position: relative;z-index: 9;" /> -->
<div class="AreaLegendContent">
<!-- <span style="font-size: 60px;color: #fff;" @click="handleGetHighWayData">拿数据</span> -->
<!-- 图例组件 -->
<AreaLegend :mapLegend="mapLegend" />
</div>
</div>
@ -797,8 +797,8 @@ const handleGetHighWayData = async () => {
</div>
</div>
<div class="pageBottom" v-if="selectPageTab === 1">
</div>
<!-- <div class="pageBottom" v-if="selectPageTab === 1">
</div> -->
<!-- 分区二 -->
<div class="content1692st" v-if="selectPageTab === 2">

32
src/page/index/style.less
View File

@ -246,6 +246,7 @@
width: 100vw;
height: 100vh;
background: linear-gradient(180deg, #1C2035 0%, #101320 100%);
overflow: hidden;
.pageTop {
width: 100%;
@ -319,6 +320,7 @@
padding-top: 66px;
display: flex;
flex-direction: column;
position: relative;
@ -383,31 +385,13 @@
}
}
.AreaLegend {
width: calc((100% - 90px) / 4 * 2 + 30px);
.AreaLegendContent {
width: calc((100% - 50px));
z-index: 10;
position: absolute;
bottom: 50px;
.AreaLegendContent {
width: calc((100% - 50px));
z-index: 10;
position: absolute;
bottom: 0px;
}
.AIBox {
right: 0;
bottom: 0;
position: absolute;
z-index: 11;
cursor: pointer;
.AIIcon {
width: 40px;
height: 40px;
}
}
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
}

11
src/style.css
View File

@ -18,14 +18,15 @@ a {
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
padding: 0;
overflow: hidden;
min-width: 320px;
min-height: 100vh;
}
@ -46,9 +47,11 @@ button {
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
@ -70,10 +73,12 @@ button:focus-visible {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
}