This commit is contained in:
fengshiwang 2025-06-03 18:28:23 +08:00
parent b2cb85c7ac
commit f70b2905dd
21 changed files with 1171 additions and 194 deletions

View File

@ -4,10 +4,10 @@
var bmapcfg = { var bmapcfg = {
'imgext': '.jpg', //瓦片图的后缀 ------ 根据需要修改,一般是 .png .jpg 'imgext': '.jpg', //瓦片图的后缀 ------ 根据需要修改,一般是 .png .jpg
//这里我直接用的路径是/static/bmap_offline_demo/tiles如果瓦片数量较大可改为瓦片服务的地址 //这里我直接用的路径是/static/bmap_offline_demo/tiles如果瓦片数量较大可改为瓦片服务的地址
tiles_dir: "map", //普通瓦片图的地址,为空默认在 offlinemap/tiles/ 目 tiles_dir: "images", //普通瓦片图的地址,为空默认在 offlinemap/tiles/ 目
tiles_path : 'http://13.14.64.150:3638/', tiles_path : 'http://172.16.1.162:8123/HeBeiDarkMap/',
tiles_hybrid: 'http://13.14.64.150:3638/', //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目 tiles_hybrid: 'http://172.16.1.162:8123/HeBeiDarkMap/', //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目
tiles_self : 'http://13.14.64.150:3638/' //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录 tiles_self : 'http://172.16.1.162:8123/HeBeiDarkMap/' //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录
// tiles_path: "http://111.229.30.246:4008/HeBeiDarkMap/", // tiles_path: "http://111.229.30.246:4008/HeBeiDarkMap/",
// tiles_hybrid: "http://111.229.30.246:4008/HeBeiDarkMap/", //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目 // tiles_hybrid: "http://111.229.30.246:4008/HeBeiDarkMap/", //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目
// tiles_self: "http://111.229.30.246:4008/HeBeiDarkMap/", //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录 // tiles_self: "http://111.229.30.246:4008/HeBeiDarkMap/", //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录

Binary file not shown.

View File

@ -61,3 +61,28 @@ export const getDeviceList = (param: any = {}) => {
export const todayTrafficCount=(param:any={})=>{ export const todayTrafficCount=(param:any={})=>{
return GET('/device/trafficFlow/todayTrafficCount',param) return GET('/device/trafficFlow/todayTrafficCount',param)
} }
/**查询天气预报 三天 */
export const weatherForecast=(param:any={})=>{
return GET('/weather/forecast',param)
}
/**查询今日天气曲线 */
export const weatherHourly=(param:any={})=>{
return GET('/weather/hourly',param)
}
/*统计当日事件处理状态 */
export const todayStatusCount=(param:any={})=>{
return GET('/device/mevent/todayStatusCount',param)
}
/**根据桩位号获取每小时车流量 */
export const todayHourly=(param:any={})=>{
return GET('/device/trafficFlow/todayHourly',param)
}
/**获取当天每小时总车流量和平均车流量 */
export const trafficTrend=(param:any={})=>{
return GET('/device/trafficFlow/trafficTrend',param)
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

27
src/utils/packge.ts Normal file
View File

@ -0,0 +1,27 @@
import { ref, onMounted } from "vue";
/**
* YYYY-MM-DD
*/
export const useTodayTime = () => {
const todayTime = ref<string>("");
const getTodayTime = () => {
const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
const day = String(date.getDate()).padStart(2, '0');
const weekDay = date.toLocaleDateString('zh-CN', { weekday: 'long' }); // 星期几
todayTime.value = `${year}-${month}-${day}`;
};
onMounted(() => {
getTodayTime();
});
return {
todayTime,
getTodayTime,
};
};

View File

@ -0,0 +1,75 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import useCharts from "@/hooks/useEcharts";
import { todayTrafficCount } from "@/api/modules/index";
import type { EChartsOption } from "echarts";
// DOM ref ECharts
const chartRef = ref<HTMLElement | null>(null);
let chart: ReturnType<typeof useCharts> | null = null;
//
const trafficData = reactive({
total: 0,
car: { value: 0, percentage: 0, name: "小型车" },
truck: { value: 0, percentage: 0, name: "货车" },
bus: { value: 0, percentage: 0, name: "客车" },
});
//
const chartOptions: EChartsOption = {
tooltip: { trigger: "item", formatter: "{b}: {c} ({d}%)" },
legend: { show: false },
series: [
{
name: "车流量分布",
type: "pie",
radius: ["65%", "80%"],
center: ["50%", "50%"],
data: [], //
},
],
};
// +
onMounted(async () => {
if (chartRef.value) {
chart = useCharts(chartRef.value);
chart.setOption(chartOptions); //
}
await loadTrafficData();
});
//
async function loadTrafficData() {
try {
const res = await todayTrafficCount(); // cartruckbus
trafficData.total = res.total;
trafficData.car.value = res.car;
trafficData.truck.value = res.truck;
trafficData.bus.value = res.bus;
const newChartData = [
{ value: res.car, name: "小型车" },
{ value: res.truck, name: "货车" },
{ value: res.bus, name: "客车" },
];
if (chart) {
chart.setOption({
series: [
{
data: newChartData,
},
],
});
}
} catch (error) {
console.error("获取车流量数据失败:", error);
}
}
</script>
<template>
<div ref="chartRef" style="width: 100%; height: 400px"></div>
</template>

View File

@ -18,6 +18,7 @@
</template> </template>
<script setup> <script setup>
defineProps({ defineProps({
pendingCount: { pendingCount: {
type: Number, type: Number,

View File

@ -170,9 +170,11 @@ onMounted(() => {
} }
.bg-header-one{ .bg-header-one{
background-image: url("@/assets/img/eqm/eqminfo.png"); background-image: url("@/assets/img/eqm/eqminfo.png");
background-size: 100% 100%;
} }
.bg-header-two{ .bg-header-two{
background-image: url("@/assets/img/eqm/eqminfo2.png"); background-image: url("@/assets/img/eqm/eqminfo2.png");
background-size: 100% 100%;
} }
} }

View File

@ -14,10 +14,11 @@ import eqm3Default from "@/assets/img/eqm/eqm3.png";
import eqm3Active from "@/assets/img/eqm/eqm3_active.png"; import eqm3Active from "@/assets/img/eqm/eqm3_active.png";
import eqm4Default from "@/assets/img/eqm/eqm4.png"; import eqm4Default from "@/assets/img/eqm/eqm4.png";
import eqm4Active from "@/assets/img/eqm/eqm4_active.png"; import eqm4Active from "@/assets/img/eqm/eqm4_active.png";
import { todayTrafficCount } from "@/api/modules/index"; import { todayTrafficCount, trafficTrend } from "@/api/modules/index";
import { update } from "lodash-es";
// //
const trafficData = reactive({ const trafficData = {
total: 5000, total: 0,
car: { car: {
value: 0, value: 0,
percentage: 0, percentage: 0,
@ -33,7 +34,7 @@ const trafficData = reactive({
percentage: 0, percentage: 0,
name: "客车", name: "客车",
}, },
}); };
// //
const monitoringPointsData = reactive({ const monitoringPointsData = reactive({
@ -48,25 +49,10 @@ const monitoringPointsData = reactive({
// //
const trafficTrendData = reactive({ const trafficTrendData = reactive({
hours: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"], hours: ["00:00","01:00","02:00","03:00", "04:00","05:00","06:00","07:00", "08:00", "09:00", "10:00", "11:00","12:00",
realTimeValues: [ "13:00","14:00","15:00","16:00", "17:00","18:00","19:00","20:00","21:00","22:00","23:00", "24:00"],
1200, // realTimeValues: [],
800, // averageValues: [],
3500, //
2800, //
3800, //
4200, //
2000, //
],
averageValues: [
1000, //
900, //
3200, //
2500, //
3500, //
4000, //
1800, //
],
}); });
// CountUp // CountUp
@ -109,8 +95,8 @@ const chartOptions: EChartsOption = {
x2: 1, x2: 1,
y2: 0, y2: 0,
colorStops: [ colorStops: [
{ offset: 0, color: "#4ecee6" }, { offset: 0, color: "#FDBB67" },
{ offset: 1, color: "#4ea8e6" }, { offset: 1, color: "#FDBB67" },
], ],
}, },
}, },
@ -126,8 +112,8 @@ const chartOptions: EChartsOption = {
x2: 1, x2: 1,
y2: 0, y2: 0,
colorStops: [ colorStops: [
{ offset: 0, color: "#ffb980" }, { offset: 0, color: "#59A2FC " },
{ offset: 1, color: "#ff9f60" }, { offset: 1, color: "#59A2FC " },
], ],
}, },
}, },
@ -143,8 +129,8 @@ const chartOptions: EChartsOption = {
x2: 1, x2: 1,
y2: 0, y2: 0,
colorStops: [ colorStops: [
{ offset: 0, color: "#00ffff" }, { offset: 0, color: "#00FFFF" },
{ offset: 1, color: "#00c8ff" }, { offset: 1, color: "#00FFFF" },
], ],
}, },
}, },
@ -200,7 +186,6 @@ const chartOptions: EChartsOption = {
}, },
], ],
}; };
// //
const { initCharts, setOptions } = useCharts(chartRef, chartOptions); const { initCharts, setOptions } = useCharts(chartRef, chartOptions);
// YYYY-MM-DD // YYYY-MM-DD
@ -211,58 +196,113 @@ const day = String(today.getDate()).padStart(2, '0');
const todayTime = ref(`${year}-${month}-${day}`); const todayTime = ref(`${year}-${month}-${day}`);
// //
onMounted( async () => { onMounted(async () => {
initCharts();
try { try {
const query = { const query = {
todayTime: todayTime.value todayTime: todayTime.value
}; };
const res = await todayTrafficCount(query); const res = await todayTrafficCount(query);
if(res.data){ if (res.data) {
res.data.forEach((item)=>{ res.data.forEach((item) => {
console.log(item.vehicleCount, trafficData.car.value) if (item.vehicleType == 1) { //
if(item.vehicleType==1){ //
trafficData.car.value = item.vehicleCount; trafficData.car.value = item.vehicleCount;
trafficData.car.percentage = item.percentage; trafficData.car.percentage = item.percentage;
console.log(trafficData.car.value, '111111111111111111111') } else if (item.vehicleType == 2) { //
} else if(item.vehicleType==2){ //
trafficData.truck.value = item.vehicleCount; trafficData.truck.value = item.vehicleCount;
trafficData.truck.percentage = item.percentage; trafficData.truck.percentage = item.percentage;
} else if(item.vehicleType==3){ // } else if (item.vehicleType == 3) { //
trafficData.bus.value = item.vehicleCount; trafficData.bus.value = item.vehicleCount;
trafficData.bus.percentage = item.percentage; trafficData.bus.percentage = item.percentage;
} }
trafficData.total = item.total trafficData.total = item.total;
}) })
console.log(trafficData.total, 'trafficData') // console.log(trafficData, 'trafficData')
updateChart();
} }
initCharts(); chartOptions.series[0].data = [
{
value: trafficData.car.value,
name: trafficData.car.name,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{ offset: 0, color: "#FDBB67" },
{ offset: 1, color: "#FDBB67" },
],
},
},
},
{
value: trafficData.truck.value,
name: trafficData.truck.name,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{ offset: 0, color: "#59A2FC" },
{ offset: 1, color: "#59A2FC" },
],
},
},
},
{
value: trafficData.bus.value,
name: trafficData.bus.name,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{ offset: 0, color: "#00FFFF" },
{ offset: 1, color: "#00FFFF" },
],
},
},
},
];
//
chartOptions.graphic[0].style.text = trafficData.total.toLocaleString();
// setOptions
setOptions(chartOptions);
trafficTrend({today: '2025-05-30', pileNum: ''}).then((res) => {
console.log(res, '///////////////////')
if (res.code == 200) {
//
trafficTrendData.realTimeValues = [];
trafficTrendData.averageValues = [];
trafficTrendData.realTimeValues = [...res.data.map(item => item.total)];
trafficTrendData.averageValues = [...res.data.map(item => item.avg)];
console.log(trafficTrendData, 'trafficTrendData')
// //
// trendChartInstance.setOption({
// series: [{
// data: trafficTrendData.realTimeValues
// }, {
// data: trafficTrendData.averageValues
// }]
// });
}
})
} catch (error) { } catch (error) {
console.error("请求设备列表失败:", error); console.error("请求设备列表失败:", error);
} }
trafficData.total = 1000;
}); });
const updateChart = () => {
setOptions({
series: [
{
data: [
{ value: trafficData.car.value, name: "小型车" },
{ value: trafficData.truck.value, name: "货车" },
{ value: trafficData.bus.value, name: "客车" },
],
},
],
graphic: [
{
style: {
text: trafficData.total.toLocaleString(), //
},
},
],
});
};
// //
const timeRangeOptions = [ const timeRangeOptions = [
@ -322,43 +362,28 @@ const toggleSelection = (index: number) => {
<div class="vehicle-item"> <div class="vehicle-item">
<div class="vehicle-info"> <div class="vehicle-info">
<span class="vehicle-name">小型车</span> <span class="vehicle-name">小型车</span>
<span class="percentage" <span class="percentage">{{ trafficData.car.percentage }}%</span>
>{{ trafficData.car.percentage }}%</span
>
</div> </div>
<div class="vehicle-value car"> <div class="vehicle-value car">
<count-up <count-up :end-val="trafficData.car.value" :options="countupOptions" />
:end-val="trafficData.car.value"
:options="countupOptions"
/>
</div> </div>
</div> </div>
<div class="vehicle-item"> <div class="vehicle-item">
<div class="vehicle-info"> <div class="vehicle-info">
<span class="vehicle-name">货车</span> <span class="vehicle-name">货车</span>
<span class="percentage" <span class="percentage">{{ trafficData.truck.percentage }}%</span>
>{{ trafficData.truck.percentage }}%</span
>
</div> </div>
<div class="vehicle-value truck"> <div class="vehicle-value truck">
<count-up <count-up :end-val="trafficData.truck.value" :options="countupOptions" />
:end-val="trafficData.truck.value"
:options="countupOptions"
/>
</div> </div>
</div> </div>
<div class="vehicle-item"> <div class="vehicle-item">
<div class="vehicle-info"> <div class="vehicle-info">
<span class="vehicle-name">客车</span> <span class="vehicle-name">客车</span>
<span class="percentage" <span class="percentage">{{ trafficData.bus.percentage }}%</span>
>{{ trafficData.bus.percentage }}%</span
>
</div> </div>
<div class="vehicle-value bus"> <div class="vehicle-value bus">
<count-up <count-up :end-val="trafficData.bus.value" :options="countupOptions" />
:end-val="trafficData.bus.value"
:options="countupOptions"
/>
</div> </div>
</div> </div>
</div> </div>
@ -376,25 +401,15 @@ const toggleSelection = (index: number) => {
<div class="traffic-flow-item"> <div class="traffic-flow-item">
<div class="item-title">今日各监测点车流情况</div> <div class="item-title">今日各监测点车流情况</div>
<div class="item-content"> <div class="item-content">
<monitoring-points-chart <monitoring-points-chart :data="monitoringPointsData.points"></monitoring-points-chart>
:data="monitoringPointsData.points"
></monitoring-points-chart>
</div> </div>
</div> </div>
<div class="traffic-flow-item"> <div class="traffic-flow-item">
<div class="item-title"> <div class="item-title">
交通流量趋势 交通流量趋势
<div class="dropdown-container"> <div class="dropdown-container">
<select <select v-model="selectedTimeRange" @change="handleTimeRangeChange" class="custom-select">
v-model="selectedTimeRange" <option v-for="option in timeRangeOptions" :key="option.value" :value="option.value">
@change="handleTimeRangeChange"
class="custom-select"
>
<option
v-for="option in timeRangeOptions"
:key="option.value"
:value="option.value"
>
{{ option.label }} {{ option.label }}
</option> </option>
</select> </select>
@ -404,14 +419,9 @@ const toggleSelection = (index: number) => {
<traffic-trend-chart :data="trafficTrendData"></traffic-trend-chart> <traffic-trend-chart :data="trafficTrendData"></traffic-trend-chart>
</div> </div>
<div class="eqmMange"> <div class="eqmMange">
<div <div v-for="(item, index) in items" :key="index" class="eqm-item" :class="{ active: item.isActive }"
v-for="(item, index) in items"
:key="index"
class="eqm-item"
:class="{ active: item.isActive }"
@click="toggleSelection(index)" @click="toggleSelection(index)"
:style="{ backgroundImage: `url(${item.isActive ? item.activeImg : item.defaultImg})` }" :style="{ backgroundImage: `url(${item.isActive ? item.activeImg : item.defaultImg})` }"></div>
></div>
</div> </div>
</div> </div>
@ -427,12 +437,15 @@ const toggleSelection = (index: number) => {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
.top { .top {
flex: 1; flex: 1;
width: 100%; width: 100%;
display: flex; display: flex;
.traffic-flow-item { .traffic-flow-item {
flex: 1; flex: 1;
.item-title { .item-title {
width: 1080px; width: 1080px;
height: 104px; height: 104px;
@ -451,6 +464,7 @@ const toggleSelection = (index: number) => {
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
} }
.item-content { .item-content {
width: 1080px; width: 1080px;
height: 948px; height: 948px;
@ -460,8 +474,10 @@ const toggleSelection = (index: number) => {
padding: 40px; padding: 40px;
} }
} }
.top-left { .top-left {
display: flex; display: flex;
.leftcont { .leftcont {
width: 744px; width: 744px;
height: 744px; height: 744px;
@ -470,6 +486,7 @@ const toggleSelection = (index: number) => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.rightcont { .rightcont {
flex: 1; flex: 1;
height: 744px; height: 744px;
@ -517,18 +534,19 @@ const toggleSelection = (index: number) => {
border-radius: 12px; border-radius: 12px;
&.car { &.car {
color: #4ea8e6; border-radius: 8px 8px 8px 8px;
background-color: #29384a; background: rgba(253, 187, 103, 0.1);
color: #FDBB67;
} }
&.truck { &.truck {
color: #ff9f60; color: #59A2FC;
background-color: #163053; background-color: rgba(0, 200, 255, 0.1);
} }
&.bus { &.bus {
color: #00c8ff; color: #00FFFF;
background-color: #0a354e; background-color: rgba(0, 255, 255, 0.1);
} }
} }
@ -564,13 +582,16 @@ const toggleSelection = (index: number) => {
} }
} }
} }
.bottom { .bottom {
flex: 1; flex: 1;
width: 100%; width: 100%;
display: flex; display: flex;
.traffic-flow-item { .traffic-flow-item {
flex: 1; flex: 1;
position: relative; position: relative;
.item-title { .item-title {
width: 1080px; width: 1080px;
height: 104px; height: 104px;
@ -639,6 +660,7 @@ const toggleSelection = (index: number) => {
} }
} }
} }
.item-content { .item-content {
width: 1080px; width: 1080px;
height: 948px; height: 948px;
@ -654,6 +676,7 @@ const toggleSelection = (index: number) => {
} }
} }
} }
.eqmMange { .eqmMange {
position: absolute; position: absolute;
width: 184px; width: 184px;
@ -665,6 +688,7 @@ const toggleSelection = (index: number) => {
} }
} }
} }
.eqmMange { .eqmMange {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -677,16 +701,17 @@ const toggleSelection = (index: number) => {
.eqm-item { .eqm-item {
width: 100%; width: 100%;
height: 25%; /* 四个等分高度 */ height: 25%;
/* 四个等分高度 */
background-size: cover; background-size: cover;
background-position: center; background-position: center;
cursor: pointer; cursor: pointer;
transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
&.active { &.active {
transform: scale(1.05); /* 可选效果:放大一点表示激活 */ transform: scale(1.05);
/* 可选效果:放大一点表示激活 */
} }
} }
} }
</style> </style>

View File

@ -50,6 +50,14 @@ const iconModules = import.meta.glob("@/assets/img/map/*.png", {
function getIcon(type, active = false) { function getIcon(type, active = false) {
const iconName = const iconName =
{ {
1: active ? "lianzhen.png" : "lianzhen.png",
2: active ? "datun.png" : "datun.png",
3: active ? "zhaowang.png" : "zhaowang.png",
4: active ? "dongguang.png" : "dongguang.png",
5: active ? "nanpi.png" : "nanpi.png",
6: active ? "zhaizi.png" : "zhaizi.png",
7: active ? "xiaozhuang.png" : "xiaozhuang.png",
8: active ? "warning.png" : "warning.png",
22: active ? "video-active.png" : "video.png", 22: active ? "video-active.png" : "video.png",
44: active ? "weather-active.png" : "weather.png", 44: active ? "weather-active.png" : "weather.png",
53: active ? "broadcast-active.png" : "broadcast.png", 53: active ? "broadcast-active.png" : "broadcast.png",
@ -59,8 +67,39 @@ function getIcon(type, active = false) {
// //
const iconPath = iconModules[`/src/assets/img/map/${iconName}`]; const iconPath = iconModules[`/src/assets/img/map/${iconName}`];
console.log("iconPath:", iconPath); console.log("iconPath:", iconPath);
return new BMap.Icon(iconPath, new BMap.Size(68, 68)); return new BMap.Icon(iconPath, new BMap.Size(64, 150));
} }
function getBigIcon(type, active = false) {
const iconName =
{
1: active ? "lianzhen.png" : "lianzhen.png",
2: active ? "datun.png" : "datun.png",
3: active ? "zhaowang.png" : "zhaowang.png",
4: active ? "dongguang.png" : "dongguang.png",
5: active ? "nanpi.png" : "nanpi.png",
6: active ? "zhaizi.png" : "zhaizi.png",
7: active ? "xiaozhuang.png" : "xiaozhuang.png",
8: active ? "warning.png" : "warning.png",
}[type] || "default.png";
//
const iconPath = iconModules[`/src/assets/img/map/${iconName}`];
console.log("iconPath:", iconPath);
return new BMap.Icon(iconPath, new BMap.Size(560, 560));
}
const customDevices = [
{ lat: 37.81813, lon: 116.474514, deviceTypeId: '1' }, //
{ lat: 37.821508, lon: 116.498481, deviceTypeId: '2' }, //
{ lat: 37.825527, lon: 116.52225, deviceTypeId: '3' }, //
{ lat: 37.82899, lon: 116.546504, deviceTypeId: '4' }, //
{ lat: 37.848468, lon: 116.61959, deviceTypeId: '5' }, //
{ lat: 37.984301, lon: 117.234876, deviceTypeId: '6' }, //
{ lat: 37.986348, lon: 117.288558, deviceTypeId: '7' }, //
{ lat: 37.93491, lon: 116.948172, deviceTypeId: '8' }, //
];
onMounted(async () => { onMounted(async () => {
await nextTick(); await nextTick();
map = new BMap.Map("baiduMap"); map = new BMap.Map("baiduMap");
@ -74,7 +113,585 @@ onMounted(async () => {
map.addEventListener("click", (e) => { map.addEventListener("click", (e) => {
console.log("点击的坐标:", e.point.lng, e.point.lat); console.log("点击的坐标:", e.point.lng, e.point.lat);
}); });
//
var points1 = [
new BMap.Point(115.816121923,37.726502586),
new BMap.Point(115.817918534,37.725846130),
new BMap.Point(115.820002603,37.725475087),
new BMap.Point(115.821871078,37.725418004),
new BMap.Point(115.823919215,37.725731963),
new BMap.Point(115.825787690,37.726274254),
new BMap.Point(115.827548369,37.727159035),
new BMap.Point(115.828949726,37.728157969),
new BMap.Point(115.830351082,37.728957106),
new BMap.Point(115.831968032,37.729784775),
new BMap.Point(115.833800575,37.730498275),
new BMap.Point(115.836136170,37.731211768),
new BMap.Point(115.838435832,37.731696939),
new BMap.Point(115.841058884,37.731868175),
new BMap.Point(115.844688038,37.731839636),
new BMap.Point(115.847418887,37.731811097),
new BMap.Point(115.851299567,37.732039411),
new BMap.Point(115.855755162,37.732667272),
new BMap.Point(115.860929402,37.734265440),
new BMap.Point(115.864881946,37.736034799),
new BMap.Point(115.868043981,37.737918264),
new BMap.Point(115.870918559,37.739972897),
new BMap.Point(115.874511781,37.742655249),
new BMap.Point(115.878536190,37.745280435),
new BMap.Point(115.881087377,37.746250588),
new BMap.Point(115.883890091,37.747135129),
new BMap.Point(115.886513143,37.747677261),
new BMap.Point(115.889279924,37.747962592),
new BMap.Point(115.891723315,37.748048191),
new BMap.Point(115.894526028,37.748076725),
new BMap.Point(115.897580267,37.748133791),
new BMap.Point(115.899556539,37.748219390),
new BMap.Point(115.901640607,37.748276455),
new BMap.Point(115.904048066,37.748304988),
new BMap.Point(115.906275864,37.748419120),
new BMap.Point(115.909366035,37.748647383),
new BMap.Point(115.911629765,37.749103906),
new BMap.Point(115.914252817,37.749674557),
new BMap.Point(115.916732140,37.750473460),
new BMap.Point(115.919031802,37.751415013),
new BMap.Point(115.921582990,37.752613336),
new BMap.Point(115.922984346,37.753412207),
new BMap.Point(115.924709093,37.754496375),
new BMap.Point(115.926469772,37.755865828),
new BMap.Point(115.928410112,37.757492019),
new BMap.Point(115.929955197,37.759089647),
new BMap.Point(115.932793843,37.761885410),
new BMap.Point(115.934554521,37.763654104),
new BMap.Point(115.936530793,37.765650964),
new BMap.Point(115.938327404,37.767333990),
new BMap.Point(115.939800625,37.768703203),
new BMap.Point(115.941525372,37.770072391),
new BMap.Point(115.944184356,37.772069077),
new BMap.Point(115.946376222,37.773552294),
new BMap.Point(115.948639952,37.774921391),
new BMap.Point(115.950131139,37.775734280),
new BMap.Point(115.951873852,37.776689770),
new BMap.Point(115.953652496,37.777588204),
new BMap.Point(115.955287412,37.778415324),
new BMap.Point(115.956760634,37.779171133),
new BMap.Point(115.958305719,37.779983975),
new BMap.Point(115.959814872,37.780754028),
new BMap.Point(115.960605381,37.781153311),
new BMap.Point(115.962833179,37.782237069),
new BMap.Point(115.963677586,37.782664864),
new BMap.Point(115.965096909,37.783263773),
new BMap.Point(115.966480299,37.783805638),
new BMap.Point(115.968205046,37.784433056),
new BMap.Point(115.969570470,37.784860838),
new BMap.Point(115.971403013,37.785402692),
new BMap.Point(115.973217590,37.785901764),
new BMap.Point(115.974565049,37.786201206),
new BMap.Point(115.976343694,37.786600459),
new BMap.Point(115.978212169,37.786914157),
new BMap.Point(115.980098611,37.787213595),
new BMap.Point(115.981571832,37.787384701),
new BMap.Point(115.982326408,37.787470254),
new BMap.Point(115.984356579,37.787669878),
new BMap.Point(115.986440648,37.787840984),
new BMap.Point(115.988488784,37.787955054),
new BMap.Point(115.991039972,37.788154676),
new BMap.Point(115.993267769,37.788439850),
new BMap.Point(115.994992516,37.788725023),
new BMap.Point(115.997076585,37.789095746),
new BMap.Point(116.000058959,37.789708860),
new BMap.Point(116.002376587,37.790350486),
new BMap.Point(116.003957605,37.790792492),
new BMap.Point(116.006077606,37.791448366),
new BMap.Point(116.007532861,37.791918881),
new BMap.Point(116.010155913,37.792859902),
new BMap.Point(116.012778965,37.793914972),
new BMap.Point(116.015905068,37.795312203),
new BMap.Point(116.018923375,37.796566837),
new BMap.Point(116.021438630,37.797593340),
new BMap.Point(116.023953886,37.798619828),
new BMap.Point(116.026792531,37.799731841),
new BMap.Point(116.029379651,37.800758299),
new BMap.Point(116.031643381,37.801499621),
new BMap.Point(116.033871178,37.802212424),
new BMap.Point(116.037428468,37.803096289),
new BMap.Point(116.038757960,37.803409916),
new BMap.Point(116.043536946,37.804208234),
new BMap.Point(116.047956609,37.804721434),
new BMap.Point(116.051729492,37.805035054),
new BMap.Point(116.055789833,37.805348673),
new BMap.Point(116.059706445,37.805690801),
new BMap.Point(116.063479328,37.806004417),
new BMap.Point(116.067324076,37.806203990),
new BMap.Point(116.070845433,37.806460583),
new BMap.Point(116.073540350,37.806631645),
new BMap.Point(116.077672555,37.806631645),
new BMap.Point(116.080978319,37.806203990),
new BMap.Point(116.083421710,37.805548248),
new BMap.Point(116.085649508,37.804835477),
new BMap.Point(116.088416289,37.803495451),
new BMap.Point(116.091470528,37.802069864),
new BMap.Point(116.094740360,37.800473173),
new BMap.Point(116.097866463,37.799047527),
new BMap.Point(116.100381718,37.798163613),
new BMap.Point(116.103040703,37.797593340),
new BMap.Point(116.106202738,37.797222660),
new BMap.Point(116.108538332,37.797251174),
new BMap.Point(116.110658333,37.797336715),
new BMap.Point(116.113496979,37.797450771),
new BMap.Point(116.116659014,37.797564826),
new BMap.Point(116.119605456,37.797735908),
new BMap.Point(116.123737662,37.797935504),
new BMap.Point(116.127690206,37.798106586),
new BMap.Point(116.132073937,37.798277667),
new BMap.Point(116.137463770,37.798619828),
new BMap.Point(116.142781739,37.798847935),
new BMap.Point(116.149249538,37.799190093),
new BMap.Point(116.152842760,37.799304146),
new BMap.Point(116.156256321,37.799560763),
new BMap.Point(116.159705814,37.800016969),
new BMap.Point(116.163119375,37.800644249),
new BMap.Point(116.166497004,37.801556646),
new BMap.Point(116.169982429,37.802725637),
new BMap.Point(116.172928871,37.803837588),
new BMap.Point(116.175264466,37.804778456),
new BMap.Point(116.177743789,37.805690801),
new BMap.Point(116.180546502,37.806603135),
new BMap.Point(116.185397352,37.807743536),
new BMap.Point(116.189026506,37.808342240),
new BMap.Point(116.192368203,37.808883920),
new BMap.Point(116.197254985,37.809682177),
new BMap.Point(116.202321428,37.810451918),
new BMap.Point(116.206058379,37.811079108),
new BMap.Point(116.209651601,37.811763309),
new BMap.Point(116.212310585,37.812533028),
new BMap.Point(116.214861773,37.813359753),
new BMap.Point(116.218526859,37.814842135),
new BMap.Point(116.222227878,37.816609551),
new BMap.Point(116.225210252,37.818006349),
new BMap.Point(116.229593983,37.820115749),
new BMap.Point(116.233330934,37.821769020),
new BMap.Point(116.235810257,37.822738161),
new BMap.Point(116.237696699,37.823308238),
new BMap.Point(116.240014327,37.823978073),
new BMap.Point(116.242583481,37.824562393),
new BMap.Point(116.244685516,37.825004192),
new BMap.Point(116.246553991,37.825289222),
new BMap.Point(116.248224839,37.825488743),
new BMap.Point(116.251332976,37.825759520),
new BMap.Point(116.254243486,37.825873531),
new BMap.Point(116.256579081,37.825930536),
new BMap.Point(116.260100438,37.826073050),
new BMap.Point(116.263621796,37.826158558),
new BMap.Point(116.266568238,37.826244066),
new BMap.Point(116.270592646,37.826329574),
new BMap.Point(116.274185869,37.826415081),
new BMap.Point(116.277958752,37.826500589),
new BMap.Point(116.281300448,37.826614599),
new BMap.Point(116.284965535,37.826643101),
new BMap.Point(116.289564859,37.826671604),
new BMap.Point(116.292978420,37.826700106),
new BMap.Point(116.296895032,37.826614599),
new BMap.Point(116.299985203,37.826386579),
new BMap.Point(116.302248933,37.826130055),
new BMap.Point(116.305303171,37.825588503),
new BMap.Point(116.307998088,37.824989940),
new BMap.Point(116.310459445,37.824334366),
new BMap.Point(116.310463937,37.824330803),
new BMap.Point(116.311007411,37.824174035),
new BMap.Point(116.311443090,37.824038643),
new BMap.Point(116.311932666,37.823896126),
new BMap.Point(116.313244192,37.823536268),
new BMap.Point(116.315058769,37.823051704),
new BMap.Point(116.316711651,37.822609893),
new BMap.Point(116.317879449,37.822282096),
new BMap.Point(116.319999450,37.821726263),
new BMap.Point(116.322209281,37.821184678),
new BMap.Point(116.324257418,37.820799865),
new BMap.Point(116.326539114,37.820457808),
new BMap.Point(116.328497420,37.820315283),
new BMap.Point(116.330850980,37.820229769),
new BMap.Point(116.332342167,37.820229769),
new BMap.Point(116.334390304,37.820329536),
new BMap.Point(116.335917423,37.820457808),
new BMap.Point(116.337534373,37.820628837),
new BMap.Point(116.341882172,37.821099164),
new BMap.Point(116.344074037,37.821312949),
new BMap.Point(116.346032343,37.821540985),
new BMap.Point(116.348637429,37.821797524),
new BMap.Point(116.351044888,37.822054063),
new BMap.Point(116.356290992,37.822709657),
new BMap.Point(116.361608961,37.823336742),
new BMap.Point(116.366890997,37.823935318),
new BMap.Point(116.372101169,37.824676406),
new BMap.Point(116.376377103,37.825103953),
new BMap.Point(116.379179817,37.825189462),
new BMap.Point(116.383024564,37.825075450),
new BMap.Point(116.386977108,37.824619399),
new BMap.Point(116.390426602,37.823878311),
new BMap.Point(116.394666604,37.822738161),
new BMap.Point(116.398259826,37.821597993),
new BMap.Point(116.402212370,37.820343788),
new BMap.Point(116.408033390,37.818576463),
new BMap.Point(116.412057798,37.817379218),
new BMap.Point(116.415651020,37.816295980),
new BMap.Point(116.418417801,37.815725848),
new BMap.Point(116.420358141,37.815383767),
new BMap.Point(116.422442210,37.815041684),
new BMap.Point(116.424705940,37.814671092),
new BMap.Point(116.427221195,37.814243484),
new BMap.Point(116.429305264,37.813872889),
new BMap.Point(116.432036113,37.813445276),
new BMap.Point(116.434299843,37.813046169),
new BMap.Point(116.436851030,37.812818107),
new BMap.Point(116.439366286,37.812732583),
new BMap.Point(116.441881541,37.812989153),
new BMap.Point(116.444037474,37.813331246),
new BMap.Point(116.446103577,37.813915650),
new BMap.Point(116.448205612,37.814585571),
new BMap.Point(116.449714765,37.815169965),
new BMap.Point(116.451062223,37.815668835),
new BMap.Point(116.452319851,37.816167701),
new BMap.Point(116.453469682,37.816566791),
new BMap.Point(116.456038836,37.817521748),
new BMap.Point(116.458841549,37.818519452),
new BMap.Point(116.461392737,37.819374615),
new BMap.Point(116.464087653,37.820030234),
new BMap.Point(116.466890367,37.820457808),
new BMap.Point(116.470124266,37.820799865),
new BMap.Point(116.473034776,37.820771361),
new BMap.Point(116.476017151,37.820685846),
new BMap.Point(116.478927660,37.820571827),
new BMap.Point(116.481622577,37.820486313),
new BMap.Point(116.483059866,37.820486313),
new BMap.Point(116.487946648,37.820486313),
new BMap.Point(116.491791395,37.820600332),
new BMap.Point(116.496175126,37.821027903),
new BMap.Point(116.501888349,37.822054063),
new BMap.Point(116.507817166,37.823194223),
new BMap.Point(116.514069372,37.824533889),
new BMap.Point(116.517914119,37.825246468),
new BMap.Point(116.520788697,37.825617006),
new BMap.Point(116.525208360,37.825902034),
new BMap.Point(116.529160904,37.825816525),
new BMap.Point(116.533005652,37.825873531),
new BMap.Point(116.536131755,37.826215563),
new BMap.Point(116.544324301,37.828239221),
new BMap.Point(116.546947354,37.828923262),
new BMap.Point(116.549318880,37.829521792),
new BMap.Point(116.552624644,37.830148819),
new BMap.Point(116.555858544,37.830433829),
new BMap.Point(116.559128376,37.830576334),
new BMap.Point(116.563835497,37.830889843),
new BMap.Point(116.568075499,37.831146350),
new BMap.Point(116.571596857,37.831431356),
new BMap.Point(116.577561605,37.831801863),
new BMap.Point(116.584173134,37.832371870),
new BMap.Point(116.587263305,37.833055872),
new BMap.Point(116.590748730,37.834338358),
new BMap.Point(116.593731105,37.835905812),
new BMap.Point(116.597683649,37.838043194),
new BMap.Point(116.601312803,37.840209010),
new BMap.Point(116.605049754,37.842317770),
new BMap.Point(116.608068060,37.843970540),
new BMap.Point(116.610655180,37.845395311),
new BMap.Point(116.613242300,37.846535108),
new BMap.Point(116.615721623,37.847503921),
new BMap.Point(116.617769760,37.848244770),
new BMap.Point(116.619386710,37.848871636),
new BMap.Point(116.621614508,37.849612471),
new BMap.Point(116.625243662,37.850581243),
new BMap.Point(116.629627393,37.851436032),
new BMap.Point(116.634442310,37.852062871),
new BMap.Point(116.639616550,37.852490258),
new BMap.Point(116.644718925,37.852775181),
new BMap.Point(116.647988757,37.853088595),
new BMap.Point(116.650971132,37.853316532),
new BMap.Point(116.654636218,37.853772404),
new BMap.Point(116.658552830,37.854399222),
new BMap.Point(116.661319611,37.854940561),
new BMap.Point(116.664373850,37.855510388),
new BMap.Point(116.668757581,37.856450591),
new BMap.Point(116.672997583,37.856991915),
new BMap.Point(116.680543349,37.857447764),
new BMap.Point(116.687190810,37.857447764),
new BMap.Point(116.690963693,37.857561726),
new BMap.Point(116.694736576,37.858160022),
new BMap.Point(116.698293866,37.859157171),
new BMap.Point(116.701707427,37.860724092),
new BMap.Point(116.705336581,37.862518888),
new BMap.Point(116.708247091,37.864057249),
new BMap.Point(116.712127771,37.865738014),
new BMap.Point(116.714786755,37.866592626),
new BMap.Point(116.718775232,37.867418741),
new BMap.Point(116.721937267,37.867959983),
new BMap.Point(116.724919641,37.868159388),
new BMap.Point(116.730345406,37.868843055),
new BMap.Point(116.735124392,37.869412773),
new BMap.Point(116.739508123,37.870039457),
new BMap.Point(116.743352870,37.870666137),
new BMap.Point(116.745544736,37.871093415),
new BMap.Point(116.749281687,37.871976448),
new BMap.Point(116.752946773,37.873115831),
new BMap.Point(116.756683724,37.874483066),
new BMap.Point(116.759989488,37.875850276),
new BMap.Point(116.763331185,37.877217461),
new BMap.Point(116.766277627,37.878385244),
new BMap.Point(116.770050510,37.880037198),
new BMap.Point(116.774038986,37.881689114),
new BMap.Point(116.777632209,37.882828345),
new BMap.Point(116.780794244,37.883454915),
new BMap.Point(116.788771197,37.883711237),
new BMap.Point(116.795957641,37.883654277),
new BMap.Point(116.802353576,37.883996039),
new BMap.Point(116.806881036,37.884736517),
new BMap.Point(116.811085106,37.885790263),
new BMap.Point(116.814426802,37.886843993),
new BMap.Point(116.817049854,37.888097057),
new BMap.Point(116.820283754,37.889549446),
new BMap.Point(116.822331891,37.890546167),
new BMap.Point(116.825062739,37.891827645),
new BMap.Point(116.827829520,37.893194531),
new BMap.Point(116.832464777,37.895558043),
new BMap.Point(116.836920372,37.897836054),
new BMap.Point(116.842382070,37.900398732),
new BMap.Point(116.846586139,37.902221026),
new BMap.Point(116.851005803,37.903644662),
new BMap.Point(116.854778686,37.904783550),
new BMap.Point(116.859054620,37.905723120),
new BMap.Point(116.864156995,37.906861976),
new BMap.Point(116.868576658,37.907886931),
new BMap.Point(116.871954287,37.908655638),
new BMap.Point(116.877380052,37.910249967),
new BMap.Point(116.882841750,37.912299768),
new BMap.Point(116.887512939,37.914634193),
new BMap.Point(116.892615314,37.917680221),
new BMap.Point(116.896028875,37.919729813),
new BMap.Point(116.898831588,37.921295435),
new BMap.Point(116.902460742,37.923174136),
new BMap.Point(116.906161761,37.924682756),
new BMap.Point(116.909287864,37.925935171),
new BMap.Point(116.912845154,37.926988321),
new BMap.Point(116.916869563,37.928041457),
new BMap.Point(116.920211259,37.928724563),
new BMap.Point(116.923876346,37.929265352),
new BMap.Point(116.926499398,37.929578438),
new BMap.Point(116.931781434,37.930005371),
new BMap.Point(116.934656012,37.930261530),
new BMap.Point(116.937297030,37.930474995),
new BMap.Point(116.939650590,37.930745383),
new BMap.Point(116.941770591,37.930958847),
new BMap.Point(116.943621101,37.931200771),
new BMap.Point(116.945309915,37.931585003),
new BMap.Point(116.946872967,37.931898079),
new BMap.Point(116.951616020,37.933306905),
new BMap.Point(116.955568564,37.935014537),
new BMap.Point(116.958299413,37.936665209),
new BMap.Point(116.961605177,37.938771185),
new BMap.Point(116.965198399,37.941104762),
new BMap.Point(116.967138739,37.942356895),
new BMap.Point(116.970516368,37.943836661),
new BMap.Point(116.973390945,37.944918009),
new BMap.Point(116.976013997,37.945629414),
new BMap.Point(116.979283829,37.946255444),
new BMap.Point(116.982302136,37.946682280),
new BMap.Point(116.986470273,37.946739191),
new BMap.Point(116.989416716,37.946824558),
new BMap.Point(116.992578751,37.946909925),
new BMap.Point(117.002208586,37.947080658),
new BMap.Point(117.008891979,37.947479033),
new BMap.Point(117.015790965,37.948446508),
new BMap.Point(117.020821476,37.949129423),
new BMap.Point(117.027289276,37.949840787),
new BMap.Point(117.030379447,37.950182239),
new BMap.Point(117.034152330,37.950324510),
new BMap.Point(117.038176739,37.950466781),
new BMap.Point(117.042776063,37.950580597),
new BMap.Point(117.053591661,37.950836684),
new BMap.Point(117.066742854,37.951291947),
new BMap.Point(117.076228960,37.950950500),
new BMap.Point(117.084349642,37.950552143),
new BMap.Point(117.091248628,37.950267601),
new BMap.Point(117.097860157,37.951405762),
new BMap.Point(117.101309650,37.952600811),
new BMap.Point(117.104615414,37.954478706),
new BMap.Point(117.107921178,37.956697974),
new BMap.Point(117.111873723,37.960282803),
new BMap.Point(117.114820165,37.963127779),
new BMap.Point(117.117982200,37.965289887),
new BMap.Point(117.121647287,37.966882978),
new BMap.Point(117.125168644,37.968077773),
new BMap.Point(117.130055426,37.968703611),
new BMap.Point(117.135301530,37.969101868),
new BMap.Point(117.138535430,37.969670803),
new BMap.Point(117.143422212,37.970979337),
new BMap.Point(117.147015434,37.972799868),
new BMap.Point(117.150608656,37.975018577),
new BMap.Point(117.153555098,37.977009670),
new BMap.Point(117.154776794,37.977635430),
new BMap.Point(117.156860863,37.978574061),
new BMap.Point(117.158549677,37.979171365),
new BMap.Point(117.162574086,37.980109976),
new BMap.Point(117.165879850,37.980593498),
new BMap.Point(117.168934089,37.980707268),
new BMap.Point(117.173641210,37.980337516),
new BMap.Point(117.177162567,37.979512679),
new BMap.Point(117.180863586,37.978318072),
new BMap.Point(117.184528672,37.977436325),
new BMap.Point(117.188804607,37.976327015),
new BMap.Point(117.191643252,37.975957242),
new BMap.Point(117.197967323,37.975815021),
new BMap.Point(117.200698172,37.975815021),
new BMap.Point(117.204722580,37.976725231),
new BMap.Point(117.208387667,37.977407881),
new BMap.Point(117.213202584,37.978374958),
new BMap.Point(117.216867671,37.979057593),
new BMap.Point(117.221970046,37.979569565),
new BMap.Point(117.228365981,37.980195304),
new BMap.Point(117.233971408,37.980650383),
new BMap.Point(117.241301581,37.981389880),
new BMap.Point(117.245972769,37.981901836),
new BMap.Point(117.251075145,37.982925736),
new BMap.Point(117.255171418,37.983778975),
new BMap.Point(117.258405317,37.984518441),
new BMap.Point(117.258405317,37.984546882),
new BMap.Point(117.262753116,37.985627626),
new BMap.Point(117.266490067,37.986594594),
new BMap.Point(117.270730069,37.987618428),
new BMap.Point(117.275437190,37.988784444),
new BMap.Point(117.279605328,37.989779808),
new BMap.Point(117.283665668,37.990775159),
new BMap.Point(117.289594485,37.992339255),
new BMap.Point(117.294301606,37.993562069),
new BMap.Point(117.297930760,37.994784864),
new BMap.Point(117.301452118,37.996064510),
new BMap.Point(117.304973475,37.997571620),
new BMap.Point(117.307883985,37.999249310),
new BMap.Point(117.311369410,38.001268173),
new BMap.Point(117.314495514,38.003087946),
new BMap.Point(117.318052803,38.005277299),
new BMap.Point(117.322580263,38.008092085),
new BMap.Point(117.326748401,38.010707749),
new BMap.Point(117.330018233,38.012697864),
new BMap.Point(117.333575523,38.014773212),
new BMap.Point(117.337743660,38.016876929),
new BMap.Point(117.342953832,38.019236431),
new BMap.Point(117.346475190,38.020629354),
new BMap.Point(117.351146378,38.022306512),
new BMap.Point(117.356500279,38.024466862),
new BMap.Point(117.360704349,38.026143931),
new BMap.Point(117.364908419,38.027849385),
new BMap.Point(117.370226387,38.029668492),
new BMap.Point(117.374250796,38.031061215),
new BMap.Point(117.380215545,38.033363413),
new BMap.Point(117.384671140,38.035182382),
new BMap.Point(117.386324022,38.036148691),
new BMap.Point(117.387725379,38.037370769),
new BMap.Point(117.389593854,38.039161218),
new BMap.Point(117.391246736,38.040297988),
new BMap.Point(117.394049449,38.041974692),
new BMap.Point(117.395235213,38.044759640),
new BMap.Point(117.396241315,38.048254882),
new BMap.Point(117.396888095,38.050584950),
new BMap.Point(117.397606739,38.052943357),
new BMap.Point(117.398972164,38.055358514),
new BMap.Point(117.400121995,38.057347407),
new BMap.Point(117.402385725,38.059705594),
new BMap.Point(117.404613522,38.061182974),
new BMap.Point(117.406913184,38.062717144),
new BMap.Point(117.409464372,38.063796726),
new BMap.Point(117.412303017,38.065131976),
new BMap.Point(117.415536917,38.066467201),
new BMap.Point(117.418124037,38.067631952),
new BMap.Point(117.421070479,38.068711461),
new BMap.Point(117.426208787,38.069677323),
new BMap.Point(117.431023704,38.069961398),
new BMap.Point(117.435335571,38.071381755),
new BMap.Point(117.441767438,38.073739487),
new BMap.Point(117.448091509,38.076580025),
new BMap.Point(117.453768800,38.079420453),
new BMap.Point(117.457254225,38.081522297),
new BMap.Point(117.461027108,38.083737689),
new BMap.Point(117.464009483,38.085470192),
new BMap.Point(117.468033891,38.087855866),
new BMap.Point(117.473495589,38.091036642),
new BMap.Point(117.479747795,38.094728440),
new BMap.Point(117.484203390,38.097284189),
new BMap.Point(117.489018308,38.100350970),
new BMap.Point(117.492395937,38.102622576),
new BMap.Point(117.497067125,38.106484142),
new BMap.Point(117.502097636,38.110572635),
new BMap.Point(117.506625096,38.114320217),
new BMap.Point(117.511799336,38.118408268),
new BMap.Point(117.514530184,38.120338656),
new BMap.Point(117.518626458,38.122836729),
new BMap.Point(117.523369511,38.124880543),
new BMap.Point(117.527753242,38.126299824),
new BMap.Point(117.537095619,38.129422144),
new BMap.Point(117.541982401,38.131238705),
new BMap.Point(117.547228505,38.134701398),
new BMap.Point(117.551252914,38.137312500),
new BMap.Point(117.554702407,38.140547865),
new BMap.Point(117.558726816,38.144237139),
new BMap.Point(117.563326140,38.147585702),
new BMap.Point(117.565841395,38.149061291),
new BMap.Point(117.569937668,38.151501622),
new BMap.Point(117.574249535,38.153941870),
new BMap.Point(117.578202079,38.155814563),
new BMap.Point(117.582010894,38.157743954),
new BMap.Point(117.585460388,38.159843526),
new BMap.Point(117.589556661,38.162056523),
new BMap.Point(117.593221747,38.164326193),
new BMap.Point(117.597102427,38.166879486),
new BMap.Point(117.600839378,38.169375953),
new BMap.Point(117.604935651,38.171985803),
new BMap.Point(117.609391246,38.174822489),
new BMap.Point(117.614134299,38.177829256),
new BMap.Point(117.618302437,38.180438801),
new BMap.Point(117.622111252,38.182764620),
new BMap.Point(117.625417017,38.185147089),
];
// 线
const polyline = new BMap.Polyline(points1, {
strokeColor: '#00c6ff',
strokeWeight: 25,
strokeOpacity: 0.8
});
map.addOverlay(polyline);
var points = [
new BMap.Point(116.727201337,37.868629410),
new BMap.Point(116.730039983,37.868942756),
new BMap.Point(116.732591170,37.869227615),
new BMap.Point(116.735034561,37.869512473),
new BMap.Point(116.737495918,37.869825816),
new BMap.Point(116.740226767,37.870224613),
new BMap.Point(116.742382700,37.870580681),
new BMap.Point(116.744035582,37.870908261),
new BMap.Point(116.746622702,37.871435235),
new BMap.Point(116.748778636,37.872019176),
new BMap.Point(116.750970501,37.872631596),
new BMap.Point(116.753036604,37.873244010),
new BMap.Point(116.754976944,37.873970356),
new BMap.Point(116.755551859,37.874141260),
];
const congestionValues = [0.3, 0.8];
for (let i = 0; i < points.length - 1; i++) {
const congestion = congestionValues[i] || 0; //
// (0-255)
const red = Math.floor(100 + 155 * congestion); // (100,0,0)(255,0,0)
const color = `rgb(${red}, 0, 0)`;
// 线
const segment = new BMap.Polyline([points[i], points[i + 1]], {
strokeColor: color,
strokeWeight: 28,
strokeOpacity: 0.8
});
map.addOverlay(segment);
}
const query = { const query = {
area: "", area: "",
deviceType: "", deviceType: "",
@ -83,24 +700,16 @@ onMounted(async () => {
}; };
try { try {
const res = await getDeviceList(query); const res = await getDeviceList(query);
// res.data.list
// console.log(":", res); // console.log(":", res);
res.rows.forEach((device) => { res.rows.forEach((device) => {
const type = String(device.deviceTypeId); // 22/53/15/44 const type = String(device.deviceTypeId); // 22/53/15/44
// if (!['22','53','15','44'].includes(type)) return;
if (!device.lat || !device.lon) return; if (!device.lat || !device.lon) return;
// console.log("device:", type, device);
const markerPoint = new BMap.Point(device.lon, device.lat); const markerPoint = new BMap.Point(device.lon, device.lat);
const marker = new BMap.Marker(markerPoint, { icon: getIcon(type) }); const marker = new BMap.Marker(markerPoint, { icon: getIcon(type) });
marker.deviceType = type; // marker marker.deviceType = type; // marker
marker.deviceData = device; // marker.deviceData = device; //
// console.log("marker:1111", marker);
markerMap.value[type] = markerMap.value[type] || []; markerMap.value[type] = markerMap.value[type] || [];
markerMap.value[type].push(marker); markerMap.value[type].push(marker);
// if (showType.value[type]) {
// map.addOverlay(marker);
// }
// console.log("marker:", marker);
map.addOverlay(marker); map.addOverlay(marker);
// marker // marker
marker.addEventListener("click", () => { marker.addEventListener("click", () => {
@ -117,6 +726,41 @@ onMounted(async () => {
} }
}); });
}); });
customDevices.forEach((device) => {
const type = String(device.deviceTypeId); // 22/53/21/44
const markerPoint = new BMap.Point(device.lon, device.lat);
const marker = new BMap.Marker(markerPoint, { icon: getBigIcon(type) });
marker.deviceType = type; //
marker.deviceData = device; //
// deviceTypeId == 8 label
if (type === '8') {
const labelContent = `
<div style="text-align:center;">
<div style="font-size:48px;font-weight:bold;color:white;">邯港高速 K12+650</div>
<div style="font-size:32px;color:white;">严重拥堵东向西</div>
</div>
`;
const label = new BMap.Label(labelContent, {
position: markerPoint,
offset: new BMap.Size(-160, -270) //
});
label.setStyle({
border: 'none',
backgroundColor: 'transparent',
padding: '0',
fontSize: '12px'
});
map.addOverlay(label); // label
marker.label = label; // label marker便
}
markerMap.value[type] = markerMap.value[type] || [];
markerMap.value[type].push(marker);
map.addOverlay(marker); //
});
} catch (error) { } catch (error) {
console.error("请求设备列表失败:", error); console.error("请求设备列表失败:", error);
} }

View File

@ -1,12 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref, onMounted } from "vue";
import EventStatus from "./EventStatus.vue"; import EventStatus from "./EventStatus.vue";
import EventTask from "./EventTask.vue"; import EventTask from "./EventTask.vue";
import RealTimeImage from "./RealTimeImage.vue"; import RealTimeImage from "./RealTimeImage.vue";
import { weatherForecast, weatherHourly, todayStatusCount, todayHourly } from "@/api/modules/index";
import { useTodayTime, } from "@/utils/packge";
const { todayTime, getTodayTime } = useTodayTime();
// API // API
const pendingCount = 5; const pendingCount = ref<string>('');
const processingCount = 3; const processingCount = ref<string>('');
// //
const selectedServiceArea = ref("全部"); const selectedServiceArea = ref("全部");
@ -30,6 +33,19 @@ const toggleAreaType = (id: string) => {
areaType.selected = !areaType.selected; areaType.selected = !areaType.selected;
} }
}; };
onMounted(()=>{
todayStatusCount({todayTime: todayTime.value}).then((res: any) => {
if(res.code === 200){
res.data.forEach((item: any) => {
if(item.status == '0'){ //
pendingCount.value = item.count
} else if(item.status == '2'){ //
processingCount.value = item.count
}
});
}
})
})
const isDropdownOpen = ref(false); const isDropdownOpen = ref(false);
</script> </script>

View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, defineProps } from "vue"; import { ref, reactive, watch, onMounted, defineProps } from "vue";
import useCharts from "@/hooks/useEcharts"; import useCharts from "@/hooks/useEcharts";
import type { EChartsOption } from "echarts"; import type { EChartsOption } from "echarts";
@ -7,9 +7,10 @@ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: () => ({ default: () => ({
hours: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"], hours: ["00:00","01:00","02:00","03:00", "04:00","05:00","06:00","07:00", "08:00", "09:00", "10:00", "11:00","12:00",
realTimeValues: [95, 140, 155, 130, 135, 140, 145], "13:00","14:00","15:00","16:00", "17:00","18:00","19:00","20:00","21:00","22:00","23:00", "24:00"],
averageValues: [60, 90, 70, 100, 130, 100, 105], realTimeValues: [],
averageValues: [],
}), }),
}, },
}); });
@ -124,14 +125,27 @@ const chartOptions: EChartsOption = {
}, },
], ],
}; };
//
const { initCharts } = useCharts(chartRef, chartOptions);
// //
onMounted(() => { onMounted(() => {
initCharts(); initCharts();
}); });
//
const { initCharts, setOptions } = useCharts(chartRef, chartOptions);
watch(
() => props.data,
() => {
console.log(props.data, 'pppppp');
setOptions({ //
series: [{
data: props.data.realTimeValues
},{
data: props.data.averageValues,
}]
});
},
{ deep: true }
);
</script> </script>
<template> <template>

View File

@ -8,11 +8,11 @@
<div class="sun-time"> <div class="sun-time">
<div class="sunrise"> <div class="sunrise">
<img src="@/assets/img/yin.png" alt="日出" /> <img src="@/assets/img/yin.png" alt="日出" />
<span>05:14</span> <span>{{ forecastData[0].sunrise_time }}</span>
</div> </div>
<div class="sunset"> <div class="sunset">
<img src="@/assets/img/yin.png" alt="日落" /> <img src="@/assets/img/yin.png" alt="日落" />
<span>05:14</span> <span>{{ forecastData[0].sunset_time }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -29,9 +29,9 @@
<div class="quality-bars"> <div class="quality-bars">
<div <div
class="bar" class="bar"
v-for="i in 13" v-for="i in weatherHourlyData"
:key="i" :key="i"
:class="{ active: i <= 3 }" :style="{ backgroundColor: getAirQualityColor(i.aqi_level) }"
></div> ></div>
</div> </div>
</div> </div>
@ -39,11 +39,20 @@
<span class="label">风力</span> <span class="label">风力</span>
<div class="quality-bars"> <div class="quality-bars">
<div <div
class="bar" class="bar bartwo"
v-for="i in 13" v-for="i in weatherHourlyData"
:key="i" :key="i"
:class="{ active: i <= 4 }" >{{i.wind_level}}</div>
></div> </div>
</div>
<div class="quality-item">
<span class="label"></span>
<div class="quality-barstwo">
<div
class="bar bartwo"
v-for="i in ['08:00','10:00','12:00','14:00','16:00','18:00',]"
:key="i"
>{{i}}</div>
</div> </div>
</div> </div>
</div> </div>
@ -55,21 +64,21 @@
v-for="(item, index) in forecastData" v-for="(item, index) in forecastData"
:key="index" :key="index"
> >
<div class="day">{{ item.day }}</div> <div class="day">{{ item.week_day }}</div>
<div class="weather-type">{{ item.dayType }}</div> <div class="weather-type">{{ item.weather_type }}</div>
<div class="weather-icon"> <div class="weather-icon">
<img :src="weatherIcons[item.weather]" :alt="item.weather" /> <img :src="weatherIcons[item.weather]" :alt="item.weather" />
</div> </div>
<div class="wind">{{ item.wind }}</div> <div class="wind_info">{{ item.wind_info }}</div>
<div class="temp-range"> <div class="temp-range">
<span class="high">{{ item.high }}°</span> <span class="low_temp">{{ item.low_temp }}°</span>
<div class="temp-bar"> <div class="temp-bar">
<div <div class="bar-inner"
class="bar-inner" :title="`${item.high_temp}°C`"
:style="{ width: item.percentage + '%' }" :style="{ width: item.percentage + '%', background: getTempGradient(item.high_temp) }">
></div>
</div> </div>
<span class="low">{{ item.low }}°</span> </div>
<span class="high_temp">{{ item.high_temp }}°</span>
</div> </div>
</div> </div>
</div> </div>
@ -77,7 +86,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import useCharts from "@/hooks/useEcharts"; import useCharts from "@/hooks/useEcharts";
import type { EChartsOption } from "echarts"; import type { EChartsOption } from "echarts";
@ -90,6 +99,9 @@ import cloudyIcon from "@/assets/img/weather/cloudy.png";
import rainyIcon from "@/assets/img/weather/rainy.png"; import rainyIcon from "@/assets/img/weather/rainy.png";
import bigRainyIcon from "@/assets/img/weather/BigRainy.png"; import bigRainyIcon from "@/assets/img/weather/BigRainy.png";
import { weatherForecast, weatherHourly, todayStatusCount, todayHourly } from "@/api/modules/index";
import { useTodayTime, } from "@/utils/packge";
// //
const weatherIcons: Record<WeatherType, string> = { const weatherIcons: Record<WeatherType, string> = {
sunny: sunnyIcon, sunny: sunnyIcon,
@ -100,55 +112,70 @@ const weatherIcons: Record<WeatherType, string> = {
// //
interface ForecastItem { interface ForecastItem {
day: string; week_day: string;
dayType: string; weather_type: string;
weather: WeatherType; weather: WeatherType;
wind: string; wind_info: string;
high: number; high_temp: number;
low: number; low_temp: number;
percentage: number; percentage: number;
sunrise_time: string;
sunset_time: string;
} }
const weatherTypeMapping: Record<string, WeatherType> = {
"晴": "sunny",
"多云": "cloudy",
"雨": "rainy",
"大雨": "bigRainy",
//
};
// //
const forecastData = reactive<ForecastItem[]>([ const forecastData = reactive<ForecastItem[]>([
{ {
day: "今天", week_day: "周二",
dayType: "多云", weather_type: "多云",
weather: "cloudy", weather: "cloudy",
wind: "东南风三级", wind_info: "东南风三级",
high: 25, high_temp: 15,
low: 17, low_temp: -2,
percentage: 80, percentage: 0,
sunrise_time: '',
sunset_time: '',
}, },
{ {
day: "周三", week_day: "周三",
dayType: "多云", weather_type: "多云",
weather: "cloudy", weather: "cloudy",
wind: "东南风三级", wind_info: "东南风三级",
high: 28, high_temp: 25,
low: 17, low_temp: 15,
percentage: 85, percentage: 0,
sunrise_time: '',
sunset_time: '',
}, },
{ {
day: "周四", week_day: "周四",
dayType: "大雨", weather_type: "大雨",
weather: "rainy", weather: "rainy",
wind: "东南风三级", wind_info: "东南风三级",
high: 27, high_temp: 35,
low: 18, low_temp: 18,
percentage: 75, percentage: 0,
sunrise_time: '',
sunset_time: '',
}, },
]); ]);
const { todayTime, getTodayTime } = useTodayTime();
// //
const chartRef = ref<HTMLElement | null>(null); const chartRef = ref<HTMLElement | null>(null);
// //
const temperatureData = reactive({ const temperatureData = reactive({
times: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"], times: ["08:00", "09:00","10:00","11:00","12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00"],
values: [14, 20, 22, 20, 18, 16], values: [],
}); });
// //
const chartOptions: EChartsOption = { const chartOptions: EChartsOption = {
tooltip: { tooltip: {
@ -185,6 +212,7 @@ const chartOptions: EChartsOption = {
}, },
}, },
axisLabel: { axisLabel: {
show: false,
color: "#fff", color: "#fff",
fontSize: 24, fontSize: 24,
}, },
@ -256,7 +284,7 @@ const chartOptions: EChartsOption = {
}, },
}, },
label: { label: {
show: true, show: false,
position: "top", position: "top",
color: "#fff", color: "#fff",
fontSize: 24, fontSize: 24,
@ -265,14 +293,98 @@ const chartOptions: EChartsOption = {
}, },
], ],
}; };
const weatherHourlyData = ref([])
// //
const { initCharts } = useCharts(chartRef, chartOptions); const { initCharts, setOptions, resize } = useCharts(chartRef, chartOptions);
// //
onMounted(() => { onMounted(() => {
initCharts(); initCharts();
resize();
window.addEventListener('resize', handleWindowResize);
weatherForecast().then((res:any)=>{
const updatedData = res.data.map((item: any) => ({
...item,
percentage: (item.high_temp / 50) * 100, //
weather: weatherTypeMapping[item.weather_type] || "sunny",
}));
forecastData.splice(0, forecastData.length, ...updatedData);
})
weatherHourly().then((res:any)=>{
weatherHourlyData.value = res.data
temperatureData.values = res.data.map((item: any) => item.temperature);
// &
const minTemp = Math.min(...temperatureData.values);
const maxTemp = Math.max(...temperatureData.values);
console.log(temperatureData.values, 'temperatureData.values')
setOptions({ //
yAxis: {
min: minTemp - 2, //
max: maxTemp + 2,
},
series: [{
data: temperatureData.values
}]
});
handleWindowResize();
})
todayHourly({todayTime: todayTime.value, pilenum: ''}).then((res: any) => {
console.log(res)
})
}); });
// resize
const handleWindowResize = () => {
resize();
};
//
onBeforeUnmount(() => {
window.removeEventListener('resize', handleWindowResize);
});
// i 绿 ->
const getAirQualityColor = (index: number): string => {
let hue;
if (index <= 3) {
// 绿120° -> 90°
hue = 120 - (index / 3) * 30;
} else if (index <= 7) {
// 绿90° -> 60°
hue = 90 - ((index - 3) / 4) * 30;
} else if (index <= 10) {
// 60° -> 30°
hue = 60 - ((index - 7) / 3) * 30;
} else {
// 30° -> 0°
hue = 30 - ((index - 10) / 3) * 30;
}
return `hsl(${hue}, 100%, 45%)`;
};
const getTempGradient = (high_temp: number): string => {
let startHue, endHue;
if (high_temp < 0) {
// -20°C 0°C
startHue = 270;
endHue = 240 + (high_temp / -20) * 30;
} else if (high_temp <= 25) {
// 绿0°C 25°C
startHue = 180;
endHue = 180 - (high_temp / 25) * 120;
} else {
// 26°C
startHue = 30;
endHue = 30 - ((high_temp - 25) / 10) * 30;
}
// hue 0~360
endHue = Math.max(0, Math.min(360, endHue));
const startColor = `hsla(${startHue}, 100%, 45%, 0.8)`;
const endColor = `hsla(${endHue}, 100%, 45%, 0.6)`;
return `linear-gradient(90deg, ${startColor}, ${endColor})`;
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -329,7 +441,7 @@ onMounted(() => {
} }
.air-quality { .air-quality {
margin-bottom: 40px; margin-bottom: 20px;
.quality-item { .quality-item {
display: flex; display: flex;
@ -349,7 +461,7 @@ onMounted(() => {
.bar { .bar {
flex: 1; flex: 1;
height: 8px; height: 18px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border-radius: 4px; border-radius: 4px;
@ -357,6 +469,42 @@ onMounted(() => {
background: #00ffff; background: #00ffff;
} }
} }
.bartwo{
height: 32px;
background: rgba(255,255,255,0.12);
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 20px;
color: rgba(255,255,255,0.6);
line-height: 28px;
text-align: center;
font-style: normal;
text-transform: none;
}
}
.quality-barstwo {
flex: 1;
display: flex;
gap: 4px;
.bar {
flex: 1;
height: 18px;
}
.bartwo{
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 18px;
color: rgba(255,255,255,0.6);
line-height: 28px;
text-align: center;
font-style: normal;
text-transform: none;
}
} }
} }
} }
@ -397,7 +545,7 @@ onMounted(() => {
} }
} }
.wind { .wind_info {
width: 160px; width: 160px;
font-size: 24px; font-size: 24px;
color: #ffffff; color: #ffffff;
@ -409,8 +557,8 @@ onMounted(() => {
align-items: center; align-items: center;
gap: 12px; gap: 12px;
.high, .high_temp,
.low { .low_temp {
font-size: 28px; font-size: 28px;
color: #ffffff; color: #ffffff;
width: 40px; width: 40px;
@ -422,7 +570,7 @@ onMounted(() => {
height: 8px; height: 8px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow_temp: hidden;
.bar-inner { .bar-inner {
height: 100%; height: 100%;

View File

@ -57,12 +57,12 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
strictPort: false, strictPort: false,
proxy: { proxy: {
[viteEnv.VITE_APP_CONTROL_BASE_API]: { [viteEnv.VITE_APP_CONTROL_BASE_API]: {
target: 'http://172.20.10.13:8090/xjIotApi', target: 'http://172.16.1.128:8090/xjIotApi',
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_CONTROL_BASE_API}`), ''), rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_CONTROL_BASE_API}`), ''),
}, },
[viteEnv.VITE_APP_BASE_API]: { [viteEnv.VITE_APP_BASE_API]: {
target: 'http://172.20.10.13:8090/iotApi', target: 'http://172.16.1.128:8090/iotApi',
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_BASE_API}`), ''), rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_BASE_API}`), ''),
} }