修改
This commit is contained in:
给我
@ -10,11 +10,11 @@
|
||||
<!-- 标签栏 -->
|
||||
<div class="tabs-bar">
|
||||
<button
|
||||
v-for="tab in displayTabs"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === tab.id }"
|
||||
@click="handleTabChange(tab.id)"
|
||||
@click="activeTab = tab.id"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
@ -31,20 +31,20 @@
|
||||
<div class="card-header">
|
||||
<div class="vehicle-info">
|
||||
<van-icon name="cart" class="vehicle-icon" />
|
||||
<span class="plate-number">{{ alert.plateNumber }}</span>
|
||||
<span class="plate-number">{{ alert.plateNo }}</span>
|
||||
<span class="plate-color">{{ alert.plateColor }}</span>
|
||||
<span class="separator">|</span>
|
||||
<span class="vehicle-type">{{ alert.vehicleType }}</span>
|
||||
</div>
|
||||
<span class="status-tag" :class="alert.statusClass">
|
||||
{{ alert.status }}
|
||||
<span class="status-tag" :class="getStatusClass(alert.taskStatus)">
|
||||
{{ statusMap[alert.taskStatus] }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 图片 -->
|
||||
<div class="card-image" v-if="alert.image">
|
||||
<van-image
|
||||
:src="alert.image"
|
||||
:src="alert.imgUrl"
|
||||
fit="cover"
|
||||
class="alert-img"
|
||||
/>
|
||||
@ -52,10 +52,10 @@
|
||||
|
||||
<!-- 等级和标题 -->
|
||||
<div class="card-title-row">
|
||||
<span class="level-tag" :class="alert.levelClass">
|
||||
{{ alert.level }}
|
||||
<span class="level-tag" :class="getLevelClass(alert.eventLevel)">
|
||||
{{ levelMap[alert.eventLevel] }}
|
||||
</span>
|
||||
<span class="alert-title">{{ alert.title }}</span>
|
||||
<span class="alert-title">{{ alert.eventContent }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 详细信息 -->
|
||||
@ -63,12 +63,12 @@
|
||||
<div class="detail-item">
|
||||
<van-icon name="location" class="detail-icon" />
|
||||
<span class="label">检测点位：</span>
|
||||
<span class="value">{{ alert.location }}</span>
|
||||
<span class="value">{{ alert.siteName }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<van-icon name="clock" class="detail-icon" />
|
||||
<span class="label">检测时间：</span>
|
||||
<span class="value">{{ alert.time }}</span>
|
||||
<span class="value">{{ alert.eventTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -115,149 +115,148 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { getTrafficEventList } from "@/api/traffic";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
// 状态
|
||||
const activeTab = ref("all");
|
||||
const loading = ref(false);
|
||||
const initLoading = ref(false);
|
||||
const finished = ref(false);
|
||||
const showMatchDialog = ref(false);
|
||||
const selectedViolationId = ref(null);
|
||||
|
||||
// 标签栏
|
||||
const tabs = [
|
||||
{ id: "all", label: "全部" },
|
||||
{ id: "unexecuted", label: "未执行" },
|
||||
{ id: "not-executed", label: "未执行" },
|
||||
{ id: "processing", label: "执行中" },
|
||||
{ id: "completed", label: "已完成" },
|
||||
];
|
||||
|
||||
// 显示的标签（违章预警不显示待处理）
|
||||
const displayTabs = computed(() => {
|
||||
return tabs;
|
||||
// 查询参数
|
||||
const listQuery = ref({
|
||||
eventCategory: 2,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
taskStatus: "",
|
||||
userId: "4"
|
||||
});
|
||||
|
||||
// 违章数据（与 Greeting message 一致）
|
||||
const violations = [
|
||||
{
|
||||
id: 1,
|
||||
plateNumber: "鄂A12345",
|
||||
plateColor: "蓝色",
|
||||
vehicleType: "小型汽车",
|
||||
level: "四级",
|
||||
levelClass: "level-blue",
|
||||
title: "违规停车",
|
||||
status: "执行中",
|
||||
statusClass: "status-blue",
|
||||
image: "https://images.unsplash.com/photo-1710939968666-a7447d3c584e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjYXIlMjBzaWxob3VldHRlJTIwc3Vuc2V0fGVufDF8fHx8MTc3NDYwODA4Mnww&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
location: "江汉路步行街入口",
|
||||
time: "03/27 10:00",
|
||||
warning: "来车预警",
|
||||
category: "all"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
plateNumber: "鄂A99999",
|
||||
plateColor: "蓝色",
|
||||
vehicleType: "小型汽车",
|
||||
level: "三级",
|
||||
levelClass: "level-yellow",
|
||||
title: "闯红灯",
|
||||
status: "执行中",
|
||||
statusClass: "status-blue",
|
||||
image: "https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmFmZmljJTIwbGlnaHQlMjByZWR8ZW58MXx8fHwxNzc0NjA4MDg0fDA&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
location: "解放大道循礼门路口",
|
||||
time: "03/27 09:15",
|
||||
warning: "来车预警",
|
||||
category: "all"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
plateNumber: "鄂A88888",
|
||||
plateColor: "蓝色",
|
||||
vehicleType: "小型汽车",
|
||||
level: "二级",
|
||||
levelClass: "level-orange",
|
||||
title: "违规变道",
|
||||
status: "已完成",
|
||||
statusClass: "status-green",
|
||||
image: "https://images.unsplash.com/photo-1756467988694-9953cd7ade0a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmFmZmljJTIwcG9saWNlJTIwZW5mb3JjZW1lbnR8ZW58MXx8fHwxNzc0NjA4MDgyfDA&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
location: "中山大道民生路口",
|
||||
time: "03/26 15:20",
|
||||
warning: "来车预警",
|
||||
category: "completed"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
plateNumber: "鄂B33333",
|
||||
plateColor: "蓝色",
|
||||
vehicleType: "小型汽车",
|
||||
level: "一级",
|
||||
levelClass: "level-red",
|
||||
title: "违规掉头",
|
||||
status: "已完成",
|
||||
statusClass: "status-green",
|
||||
image: "https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjYXIlMjB0dXJuaW5nJTIwc3RyZWV0fGVufDF8fHx8MTc3NDYwODA4NXww&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
location: "建设大道花桥街口",
|
||||
time: "03/26 11:50",
|
||||
warning: "来车预警",
|
||||
category: "completed"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
plateNumber: "鄂A77777",
|
||||
plateColor: "蓝色",
|
||||
vehicleType: "小型汽车",
|
||||
level: "二级",
|
||||
levelClass: "level-orange",
|
||||
title: "违规停车",
|
||||
status: "未执行",
|
||||
statusClass: "status-gray",
|
||||
image: "https://images.unsplash.com/photo-1710939968666-a7447d3c584e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjYXIlMjBzaWxob3VldHRlJTIwc3Vuc2V0fGVufDF8fHx8MTc3NDYwODA4Mnww&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
location: "武昌区中南路",
|
||||
time: "04/09 08:30",
|
||||
warning: "来车预警",
|
||||
category: "all"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
plateNumber: "鄂A66666",
|
||||
plateColor: "蓝色",
|
||||
vehicleType: "小型汽车",
|
||||
level: "三级",
|
||||
levelClass: "level-yellow",
|
||||
title: "违规掉头",
|
||||
status: "未执行",
|
||||
statusClass: "status-gray",
|
||||
image: "https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjYXIlMjB0dXJuaW5nJTIwc3RyZWV0fGVufDF8fHx8MTc3NDYwODA4NXww&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
location: "江汉区解放大道",
|
||||
time: "04/09 09:15",
|
||||
warning: "来车预警",
|
||||
category: "all"
|
||||
// 分类映射
|
||||
const categoryMap = {
|
||||
"all": null,
|
||||
"not-executed": 0,
|
||||
"processing": 1,
|
||||
"completed": 2
|
||||
};
|
||||
|
||||
// 列表数据
|
||||
const filteredAlerts = ref([]);
|
||||
|
||||
// 状态映射
|
||||
const statusMap = {
|
||||
0: "待执行",
|
||||
1: "执行中",
|
||||
2: "已完成",
|
||||
};
|
||||
|
||||
// 等级映射
|
||||
const levelMap = {
|
||||
0: "一级",
|
||||
1: "二级",
|
||||
2: "三级",
|
||||
3: "四级"
|
||||
};
|
||||
|
||||
// 重置列表
|
||||
function resetList() {
|
||||
filteredAlerts.value = [];
|
||||
listQuery.value.page = 1;
|
||||
finished.value = false;
|
||||
}
|
||||
|
||||
// 获取列表数据
|
||||
const fetchAlerts = async (isLoadMore = false) => {
|
||||
if (isLoadMore) {
|
||||
loading.value = true;
|
||||
} else {
|
||||
initLoading.value = true;
|
||||
}
|
||||
];
|
||||
|
||||
// 过滤后的列表
|
||||
const filteredAlerts = computed(() => {
|
||||
if (activeTab.value === "all") return violations;
|
||||
if (activeTab.value === "unexecuted") return violations.filter(v => v.status === "未执行");
|
||||
if (activeTab.value === "processing") return violations.filter(v => v.status === "执行中");
|
||||
if (activeTab.value === "completed") return violations.filter(v => v.status === "已完成");
|
||||
return violations;
|
||||
});
|
||||
try {
|
||||
listQuery.value.taskStatus = categoryMap[activeTab.value];
|
||||
const res = await getTrafficEventList(listQuery.value);
|
||||
if (res && res.content) {
|
||||
const records = res.content.records || res.content.list || res.content;
|
||||
if (isLoadMore) {
|
||||
filteredAlerts.value.push(...records);
|
||||
} else {
|
||||
filteredAlerts.value = records;
|
||||
}
|
||||
const totalPages = res.content.totalPages || res.content.pages || 1;
|
||||
const currentPage = res.content.pageNum || res.content.current || listQuery.value.page;
|
||||
if (currentPage >= totalPages) {
|
||||
finished.value = true;
|
||||
}
|
||||
} else if (res && Array.isArray(res)) {
|
||||
if (isLoadMore) {
|
||||
filteredAlerts.value.push(...res);
|
||||
} else {
|
||||
filteredAlerts.value = res;
|
||||
}
|
||||
finished.value = true;
|
||||
} else {
|
||||
filteredAlerts.value = [];
|
||||
finished.value = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取违章预警列表失败:", error);
|
||||
if (!isLoadMore) {
|
||||
filteredAlerts.value = [];
|
||||
}
|
||||
finished.value = true;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
initLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 加载更多
|
||||
function onLoadMore() {
|
||||
listQuery.value.page++;
|
||||
fetchAlerts(true);
|
||||
}
|
||||
|
||||
// 等级样式
|
||||
function getLevelClass(level) {
|
||||
const map = {
|
||||
1: "level-red",
|
||||
2: "level-orange",
|
||||
3: "level-yellow",
|
||||
4: "level-blue",
|
||||
};
|
||||
return map[level] || "level-blue";
|
||||
}
|
||||
|
||||
// 状态样式
|
||||
function getStatusClass(status) {
|
||||
const map = {
|
||||
0: "status-gray",
|
||||
1: "status-blue",
|
||||
2: "status-green",
|
||||
};
|
||||
return map[status] || "status-gray";
|
||||
}
|
||||
|
||||
// 返回
|
||||
function goBack() {
|
||||
router.back();
|
||||
}
|
||||
|
||||
// 切换标签
|
||||
function handleTabChange(tabId) {
|
||||
activeTab.value = tabId;
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
function handleDetail(alert) {
|
||||
router.push({
|
||||
@ -282,6 +281,17 @@ function handleMatch(matched) {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 切换标签时重新加载
|
||||
watch(activeTab, () => {
|
||||
resetList();
|
||||
fetchAlerts();
|
||||
});
|
||||
|
||||
// 页面初始化
|
||||
onMounted(() => {
|
||||
fetchAlerts();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user