This commit is contained in:
fengshiwang
parent
b2cb85c7ac
commit
f70b2905dd
|
|
@ -4,10 +4,10 @@
|
|||
var bmapcfg = {
|
||||
'imgext': '.jpg', //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg
|
||||
//这里我直接用的路径是/static/bmap_offline_demo/tiles，如果瓦片数量较大，可改为瓦片服务的地址
|
||||
tiles_dir: "map", //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目
|
||||
tiles_path : 'http://13.14.64.150:3638/',
|
||||
tiles_hybrid: 'http://13.14.64.150:3638/', //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目
|
||||
tiles_self : 'http://13.14.64.150:3638/' //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
|
||||
tiles_dir: "images", //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目
|
||||
tiles_path : 'http://172.16.1.162:8123/HeBeiDarkMap/',
|
||||
tiles_hybrid: 'http://172.16.1.162:8123/HeBeiDarkMap/', //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目
|
||||
tiles_self : 'http://172.16.1.162:8123/HeBeiDarkMap/' //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
|
||||
// tiles_path: "http://111.229.30.246:4008/HeBeiDarkMap/",
|
||||
// tiles_hybrid: "http://111.229.30.246:4008/HeBeiDarkMap/", //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目
|
||||
// tiles_self: "http://111.229.30.246:4008/HeBeiDarkMap/", //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -61,3 +61,28 @@ export const getDeviceList = (param: any = {}) => {
|
|||
export const todayTrafficCount=(param:any={})=>{
|
||||
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 |
|
|
@ -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,
|
||||
};
|
||||
};
|
||||
|
|
@ -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(); // 假设返回 car、truck、bus 数值
|
||||
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>
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
defineProps({
|
||||
pendingCount: {
|
||||
type: Number,
|
||||
|
|
|
|||
|
|
@ -170,9 +170,11 @@ onMounted(() => {
|
|||
}
|
||||
.bg-header-one{
|
||||
background-image: url("@/assets/img/eqm/eqminfo.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.bg-header-two{
|
||||
background-image: url("@/assets/img/eqm/eqminfo2.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,10 +14,11 @@ import eqm3Default from "@/assets/img/eqm/eqm3.png";
|
|||
import eqm3Active from "@/assets/img/eqm/eqm3_active.png";
|
||||
import eqm4Default from "@/assets/img/eqm/eqm4.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({
|
||||
total: 5000,
|
||||
const trafficData = {
|
||||
total: 0,
|
||||
car: {
|
||||
value: 0,
|
||||
percentage: 0,
|
||||
|
|
@ -33,7 +34,7 @@ const trafficData = reactive({
|
|||
percentage: 0,
|
||||
name: "客车",
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 监测点车流数据
|
||||
const monitoringPointsData = reactive({
|
||||
|
|
@ -48,25 +49,10 @@ const monitoringPointsData = reactive({
|
|||
|
||||
// 交通流量趋势数据
|
||||
const trafficTrendData = reactive({
|
||||
hours: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
|
||||
realTimeValues: [
|
||||
1200, // 凌晨
|
||||
800, // 早晨
|
||||
3500, // 早高峰
|
||||
2800, // 中午
|
||||
3800, // 下午
|
||||
4200, // 晚高峰
|
||||
2000, // 深夜
|
||||
],
|
||||
averageValues: [
|
||||
1000, // 凌晨历史平均
|
||||
900, // 早晨历史平均
|
||||
3200, // 早高峰历史平均
|
||||
2500, // 中午历史平均
|
||||
3500, // 下午历史平均
|
||||
4000, // 晚高峰历史平均
|
||||
1800, // 深夜历史平均
|
||||
],
|
||||
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",
|
||||
"13:00","14:00","15:00","16:00", "17:00","18:00","19:00","20:00","21:00","22:00","23:00", "24:00"],
|
||||
realTimeValues: [],
|
||||
averageValues: [],
|
||||
});
|
||||
|
||||
// CountUp 配置
|
||||
|
|
@ -109,8 +95,8 @@ const chartOptions: EChartsOption = {
|
|||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#4ecee6" },
|
||||
{ offset: 1, color: "#4ea8e6" },
|
||||
{ offset: 0, color: "#FDBB67" },
|
||||
{ offset: 1, color: "#FDBB67" },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
@ -126,8 +112,8 @@ const chartOptions: EChartsOption = {
|
|||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#ffb980" },
|
||||
{ offset: 1, color: "#ff9f60" },
|
||||
{ offset: 0, color: "#59A2FC " },
|
||||
{ offset: 1, color: "#59A2FC " },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
@ -143,8 +129,8 @@ const chartOptions: EChartsOption = {
|
|||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#00ffff" },
|
||||
{ offset: 1, color: "#00c8ff" },
|
||||
{ offset: 0, color: "#00FFFF" },
|
||||
{ offset: 1, color: "#00FFFF" },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
@ -200,7 +186,6 @@ const chartOptions: EChartsOption = {
|
|||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const { initCharts, setOptions } = useCharts(chartRef, chartOptions);
|
||||
// 获取当前日期并格式化为 YYYY-MM-DD
|
||||
|
|
@ -212,6 +197,7 @@ const day = String(today.getDate()).padStart(2, '0');
|
|||
const todayTime = ref(`${year}-${month}-${day}`);
|
||||
// 确保图表在组件挂载后渲染
|
||||
onMounted(async () => {
|
||||
initCharts();
|
||||
try {
|
||||
const query = {
|
||||
todayTime: todayTime.value
|
||||
|
|
@ -219,11 +205,9 @@ onMounted( async () => {
|
|||
const res = await todayTrafficCount(query);
|
||||
if (res.data) {
|
||||
res.data.forEach((item) => {
|
||||
console.log(item.vehicleCount, trafficData.car.value)
|
||||
if (item.vehicleType == 1) { //小车
|
||||
trafficData.car.value = item.vehicleCount;
|
||||
trafficData.car.percentage = item.percentage;
|
||||
console.log(trafficData.car.value, '111111111111111111111')
|
||||
} else if (item.vehicleType == 2) { //货车
|
||||
trafficData.truck.value = item.vehicleCount;
|
||||
trafficData.truck.percentage = item.percentage;
|
||||
|
|
@ -231,38 +215,94 @@ onMounted( async () => {
|
|||
trafficData.bus.value = item.vehicleCount;
|
||||
trafficData.bus.percentage = item.percentage;
|
||||
}
|
||||
trafficData.total = item.total
|
||||
trafficData.total = item.total;
|
||||
})
|
||||
console.log(trafficData.total, 'trafficData')
|
||||
updateChart();
|
||||
// console.log(trafficData, 'trafficData')
|
||||
}
|
||||
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) {
|
||||
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 = [
|
||||
|
|
@ -322,43 +362,28 @@ const toggleSelection = (index: number) => {
|
|||
<div class="vehicle-item">
|
||||
<div class="vehicle-info">
|
||||
<span class="vehicle-name">小型车</span>
|
||||
<span class="percentage"
|
||||
>{{ trafficData.car.percentage }}%</span
|
||||
>
|
||||
<span class="percentage">{{ trafficData.car.percentage }}%</span>
|
||||
</div>
|
||||
<div class="vehicle-value car">
|
||||
<count-up
|
||||
:end-val="trafficData.car.value"
|
||||
:options="countupOptions"
|
||||
/>
|
||||
<count-up :end-val="trafficData.car.value" :options="countupOptions" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="vehicle-item">
|
||||
<div class="vehicle-info">
|
||||
<span class="vehicle-name">货车</span>
|
||||
<span class="percentage"
|
||||
>{{ trafficData.truck.percentage }}%</span
|
||||
>
|
||||
<span class="percentage">{{ trafficData.truck.percentage }}%</span>
|
||||
</div>
|
||||
<div class="vehicle-value truck">
|
||||
<count-up
|
||||
:end-val="trafficData.truck.value"
|
||||
:options="countupOptions"
|
||||
/>
|
||||
<count-up :end-val="trafficData.truck.value" :options="countupOptions" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="vehicle-item">
|
||||
<div class="vehicle-info">
|
||||
<span class="vehicle-name">客车</span>
|
||||
<span class="percentage"
|
||||
>{{ trafficData.bus.percentage }}%</span
|
||||
>
|
||||
<span class="percentage">{{ trafficData.bus.percentage }}%</span>
|
||||
</div>
|
||||
<div class="vehicle-value bus">
|
||||
<count-up
|
||||
:end-val="trafficData.bus.value"
|
||||
:options="countupOptions"
|
||||
/>
|
||||
<count-up :end-val="trafficData.bus.value" :options="countupOptions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -376,25 +401,15 @@ const toggleSelection = (index: number) => {
|
|||
<div class="traffic-flow-item">
|
||||
<div class="item-title">今日各监测点车流情况</div>
|
||||
<div class="item-content">
|
||||
<monitoring-points-chart
|
||||
:data="monitoringPointsData.points"
|
||||
></monitoring-points-chart>
|
||||
<monitoring-points-chart :data="monitoringPointsData.points"></monitoring-points-chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="traffic-flow-item">
|
||||
<div class="item-title">
|
||||
交通流量趋势
|
||||
<div class="dropdown-container">
|
||||
<select
|
||||
v-model="selectedTimeRange"
|
||||
@change="handleTimeRangeChange"
|
||||
class="custom-select"
|
||||
>
|
||||
<option
|
||||
v-for="option in timeRangeOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
<select v-model="selectedTimeRange" @change="handleTimeRangeChange" class="custom-select">
|
||||
<option v-for="option in timeRangeOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
|
|
@ -404,14 +419,9 @@ const toggleSelection = (index: number) => {
|
|||
<traffic-trend-chart :data="trafficTrendData"></traffic-trend-chart>
|
||||
</div>
|
||||
<div class="eqmMange">
|
||||
<div
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
class="eqm-item"
|
||||
:class="{ active: item.isActive }"
|
||||
<div v-for="(item, index) in items" :key="index" class="eqm-item" :class="{ active: item.isActive }"
|
||||
@click="toggleSelection(index)"
|
||||
:style="{ backgroundImage: `url(${item.isActive ? item.activeImg : item.defaultImg})` }"
|
||||
></div>
|
||||
:style="{ backgroundImage: `url(${item.isActive ? item.activeImg : item.defaultImg})` }"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -427,12 +437,15 @@ const toggleSelection = (index: number) => {
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.top {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.traffic-flow-item {
|
||||
flex: 1;
|
||||
|
||||
.item-title {
|
||||
width: 1080px;
|
||||
height: 104px;
|
||||
|
|
@ -451,6 +464,7 @@ const toggleSelection = (index: number) => {
|
|||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
width: 1080px;
|
||||
height: 948px;
|
||||
|
|
@ -460,8 +474,10 @@ const toggleSelection = (index: number) => {
|
|||
padding: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-left {
|
||||
display: flex;
|
||||
|
||||
.leftcont {
|
||||
width: 744px;
|
||||
height: 744px;
|
||||
|
|
@ -470,6 +486,7 @@ const toggleSelection = (index: number) => {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rightcont {
|
||||
flex: 1;
|
||||
height: 744px;
|
||||
|
|
@ -517,18 +534,19 @@ const toggleSelection = (index: number) => {
|
|||
border-radius: 12px;
|
||||
|
||||
&.car {
|
||||
color: #4ea8e6;
|
||||
background-color: #29384a;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
background: rgba(253, 187, 103, 0.1);
|
||||
color: #FDBB67;
|
||||
}
|
||||
|
||||
&.truck {
|
||||
color: #ff9f60;
|
||||
background-color: #163053;
|
||||
color: #59A2FC;
|
||||
background-color: rgba(0, 200, 255, 0.1);
|
||||
}
|
||||
|
||||
&.bus {
|
||||
color: #00c8ff;
|
||||
background-color: #0a354e;
|
||||
color: #00FFFF;
|
||||
background-color: rgba(0, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -564,13 +582,16 @@ const toggleSelection = (index: number) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.traffic-flow-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.item-title {
|
||||
width: 1080px;
|
||||
height: 104px;
|
||||
|
|
@ -639,6 +660,7 @@ const toggleSelection = (index: number) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
width: 1080px;
|
||||
height: 948px;
|
||||
|
|
@ -654,6 +676,7 @@ const toggleSelection = (index: number) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.eqmMange {
|
||||
position: absolute;
|
||||
width: 184px;
|
||||
|
|
@ -665,6 +688,7 @@ const toggleSelection = (index: number) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.eqmMange {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -677,16 +701,17 @@ const toggleSelection = (index: number) => {
|
|||
|
||||
.eqm-item {
|
||||
width: 100%;
|
||||
height: 25%; /* 四个等分高度 */
|
||||
height: 25%;
|
||||
/* 四个等分高度 */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
|
||||
&.active {
|
||||
transform: scale(1.05); /* 可选效果：放大一点表示激活 */
|
||||
transform: scale(1.05);
|
||||
/* 可选效果：放大一点表示激活 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -50,6 +50,14 @@ const iconModules = import.meta.glob("@/assets/img/map/*.png", {
|
|||
function getIcon(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",
|
||||
22: active ? "video-active.png" : "video.png",
|
||||
44: active ? "weather-active.png" : "weather.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}`];
|
||||
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 () => {
|
||||
await nextTick();
|
||||
map = new BMap.Map("baiduMap");
|
||||
|
|
@ -74,7 +113,585 @@ onMounted(async () => {
|
|||
map.addEventListener("click", (e) => {
|
||||
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 = {
|
||||
area: "",
|
||||
deviceType: "",
|
||||
|
|
@ -83,24 +700,16 @@ onMounted(async () => {
|
|||
};
|
||||
try {
|
||||
const res = await getDeviceList(query);
|
||||
// 假设res.data.list为设备数组
|
||||
// console.log("设备列表:", res);
|
||||
res.rows.forEach((device) => {
|
||||
const type = String(device.deviceTypeId); // 22/53/15/44
|
||||
// if (!['22','53','15','44'].includes(type)) return;
|
||||
if (!device.lat || !device.lon) return;
|
||||
// console.log("device:", type, device);
|
||||
const markerPoint = new BMap.Point(device.lon, device.lat);
|
||||
const marker = new BMap.Marker(markerPoint, { icon: getIcon(type) });
|
||||
marker.deviceType = type; // 关键：给marker加上设备类型
|
||||
marker.deviceData = device; // 可选：存储设备完整信息
|
||||
// console.log("marker:1111", marker);
|
||||
markerMap.value[type] = markerMap.value[type] || [];
|
||||
markerMap.value[type].push(marker);
|
||||
// if (showType.value[type]) {
|
||||
// map.addOverlay(marker);
|
||||
// }
|
||||
// console.log("marker:", marker);
|
||||
map.addOverlay(marker);
|
||||
// 可选：marker点击事件
|
||||
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) {
|
||||
console.error("请求设备列表失败:", error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import EventStatus from "./EventStatus.vue";
|
||||
import EventTask from "./EventTask.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获取
|
||||
const pendingCount = 5;
|
||||
const processingCount = 3;
|
||||
const pendingCount = ref<string>('');
|
||||
const processingCount = ref<string>('');
|
||||
|
||||
// 服务区数据
|
||||
const selectedServiceArea = ref("全部");
|
||||
|
|
@ -30,6 +33,19 @@ const toggleAreaType = (id: string) => {
|
|||
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);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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 type { EChartsOption } from "echarts";
|
||||
|
||||
|
|
@ -7,9 +7,10 @@ const props = defineProps({
|
|||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
hours: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
|
||||
realTimeValues: [95, 140, 155, 130, 135, 140, 145],
|
||||
averageValues: [60, 90, 70, 100, 130, 100, 105],
|
||||
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",
|
||||
"13:00","14:00","15:00","16:00", "17:00","18:00","19:00","20:00","21:00","22:00","23:00", "24:00"],
|
||||
realTimeValues: [],
|
||||
averageValues: [],
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
|
@ -124,14 +125,27 @@ const chartOptions: EChartsOption = {
|
|||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const { initCharts } = useCharts(chartRef, chartOptions);
|
||||
|
||||
// 确保图表在组件挂载后渲染
|
||||
onMounted(() => {
|
||||
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>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
<div class="sun-time">
|
||||
<div class="sunrise">
|
||||
<img src="@/assets/img/yin.png" alt="日出" />
|
||||
<span>05:14</span>
|
||||
<span>{{ forecastData[0].sunrise_time }}</span>
|
||||
</div>
|
||||
<div class="sunset">
|
||||
<img src="@/assets/img/yin.png" alt="日落" />
|
||||
<span>05:14</span>
|
||||
<span>{{ forecastData[0].sunset_time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -29,9 +29,9 @@
|
|||
<div class="quality-bars">
|
||||
<div
|
||||
class="bar"
|
||||
v-for="i in 13"
|
||||
v-for="i in weatherHourlyData"
|
||||
:key="i"
|
||||
:class="{ active: i <= 3 }"
|
||||
:style="{ backgroundColor: getAirQualityColor(i.aqi_level) }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,11 +39,20 @@
|
|||
<span class="label">风力</span>
|
||||
<div class="quality-bars">
|
||||
<div
|
||||
class="bar"
|
||||
v-for="i in 13"
|
||||
class="bar bartwo"
|
||||
v-for="i in weatherHourlyData"
|
||||
:key="i"
|
||||
:class="{ active: i <= 4 }"
|
||||
></div>
|
||||
>{{i.wind_level}}</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>
|
||||
|
|
@ -55,21 +64,21 @@
|
|||
v-for="(item, index) in forecastData"
|
||||
:key="index"
|
||||
>
|
||||
<div class="day">{{ item.day }}</div>
|
||||
<div class="weather-type">{{ item.dayType }}</div>
|
||||
<div class="day">{{ item.week_day }}</div>
|
||||
<div class="weather-type">{{ item.weather_type }}</div>
|
||||
<div class="weather-icon">
|
||||
<img :src="weatherIcons[item.weather]" :alt="item.weather" />
|
||||
</div>
|
||||
<div class="wind">{{ item.wind }}</div>
|
||||
<div class="wind_info">{{ item.wind_info }}</div>
|
||||
<div class="temp-range">
|
||||
<span class="high">{{ item.high }}°</span>
|
||||
<span class="low_temp">{{ item.low_temp }}°</span>
|
||||
<div class="temp-bar">
|
||||
<div
|
||||
class="bar-inner"
|
||||
:style="{ width: item.percentage + '%' }"
|
||||
></div>
|
||||
<div class="bar-inner"
|
||||
:title="`${item.high_temp}°C`"
|
||||
:style="{ width: item.percentage + '%', background: getTempGradient(item.high_temp) }">
|
||||
</div>
|
||||
<span class="low">{{ item.low }}°</span>
|
||||
</div>
|
||||
<span class="high_temp">{{ item.high_temp }}°</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -77,7 +86,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
|
||||
import useCharts from "@/hooks/useEcharts";
|
||||
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 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> = {
|
||||
sunny: sunnyIcon,
|
||||
|
|
@ -100,55 +112,70 @@ const weatherIcons: Record<WeatherType, string> = {
|
|||
|
||||
// 定义预报数据类型
|
||||
interface ForecastItem {
|
||||
day: string;
|
||||
dayType: string;
|
||||
week_day: string;
|
||||
weather_type: string;
|
||||
weather: WeatherType;
|
||||
wind: string;
|
||||
high: number;
|
||||
low: number;
|
||||
wind_info: string;
|
||||
high_temp: number;
|
||||
low_temp: number;
|
||||
percentage: number;
|
||||
sunrise_time: string;
|
||||
sunset_time: string;
|
||||
}
|
||||
const weatherTypeMapping: Record<string, WeatherType> = {
|
||||
"晴": "sunny",
|
||||
"多云": "cloudy",
|
||||
"雨": "rainy",
|
||||
"大雨": "bigRainy",
|
||||
// 可以继续添加其他天气类型
|
||||
};
|
||||
|
||||
// 天气预报数据
|
||||
const forecastData = reactive<ForecastItem[]>([
|
||||
{
|
||||
day: "今天",
|
||||
dayType: "多云",
|
||||
week_day: "周二",
|
||||
weather_type: "多云",
|
||||
weather: "cloudy",
|
||||
wind: "东南风三级",
|
||||
high: 25,
|
||||
low: 17,
|
||||
percentage: 80,
|
||||
wind_info: "东南风三级",
|
||||
high_temp: 15,
|
||||
low_temp: -2,
|
||||
percentage: 0,
|
||||
sunrise_time: '',
|
||||
sunset_time: '',
|
||||
},
|
||||
{
|
||||
day: "周三",
|
||||
dayType: "多云",
|
||||
week_day: "周三",
|
||||
weather_type: "多云",
|
||||
weather: "cloudy",
|
||||
wind: "东南风三级",
|
||||
high: 28,
|
||||
low: 17,
|
||||
percentage: 85,
|
||||
wind_info: "东南风三级",
|
||||
high_temp: 25,
|
||||
low_temp: 15,
|
||||
percentage: 0,
|
||||
sunrise_time: '',
|
||||
sunset_time: '',
|
||||
},
|
||||
{
|
||||
day: "周四",
|
||||
dayType: "大雨",
|
||||
week_day: "周四",
|
||||
weather_type: "大雨",
|
||||
weather: "rainy",
|
||||
wind: "东南风三级",
|
||||
high: 27,
|
||||
low: 18,
|
||||
percentage: 75,
|
||||
wind_info: "东南风三级",
|
||||
high_temp: 35,
|
||||
low_temp: 18,
|
||||
percentage: 0,
|
||||
sunrise_time: '',
|
||||
sunset_time: '',
|
||||
},
|
||||
]);
|
||||
|
||||
const { todayTime, getTodayTime } = useTodayTime();
|
||||
// 图表容器引用
|
||||
const chartRef = ref<HTMLElement | null>(null);
|
||||
|
||||
// 温度趋势数据
|
||||
const temperatureData = reactive({
|
||||
times: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
|
||||
values: [14, 20, 22, 20, 18, 16],
|
||||
times: ["08:00", "09:00","10:00","11:00","12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00"],
|
||||
values: [],
|
||||
});
|
||||
|
||||
// 温度趋势图表配置
|
||||
const chartOptions: EChartsOption = {
|
||||
tooltip: {
|
||||
|
|
@ -185,6 +212,7 @@ const chartOptions: EChartsOption = {
|
|||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
color: "#fff",
|
||||
fontSize: 24,
|
||||
},
|
||||
|
|
@ -256,7 +284,7 @@ const chartOptions: EChartsOption = {
|
|||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
show: false,
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
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(() => {
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -329,7 +441,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.air-quality {
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.quality-item {
|
||||
display: flex;
|
||||
|
|
@ -349,7 +461,7 @@ onMounted(() => {
|
|||
|
||||
.bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
height: 18px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
|
||||
|
|
@ -357,6 +469,42 @@ onMounted(() => {
|
|||
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;
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
|
|
@ -409,8 +557,8 @@ onMounted(() => {
|
|||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.high,
|
||||
.low {
|
||||
.high_temp,
|
||||
.low_temp {
|
||||
font-size: 28px;
|
||||
color: #ffffff;
|
||||
width: 40px;
|
||||
|
|
@ -422,7 +570,7 @@ onMounted(() => {
|
|||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
overflow_temp: hidden;
|
||||
|
||||
.bar-inner {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -57,12 +57,12 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
|
|||
strictPort: false,
|
||||
proxy: {
|
||||
[viteEnv.VITE_APP_CONTROL_BASE_API]: {
|
||||
target: 'http://172.20.10.13:8090/xjIotApi',
|
||||
target: 'http://172.16.1.128:8090/xjIotApi',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_CONTROL_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,
|
||||
rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_BASE_API}`), ''),
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue