390 lines
9.2 KiB
Vue
390 lines
9.2 KiB
Vue
<template>
|
|
<base-dialog
|
|
v-model:visible="props.visible"
|
|
title="抢通情况"
|
|
:table-data="tableData"
|
|
:table-columns="tableColumns"
|
|
:table-height="tableHeight"
|
|
:total="total"
|
|
:current-page="currentPage"
|
|
:page-size="pageSize"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
@close="handleClose"
|
|
>
|
|
<!-- 筛选区域 -->
|
|
<template #filter>
|
|
<div class="filter-row">
|
|
<div class="filter-item">
|
|
<span class="filter-label">影响区域</span>
|
|
<el-select
|
|
:teleported="false"
|
|
v-model="filterForm.district"
|
|
placeholder="请选择"
|
|
class="filter-select"
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="item in regionOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<span class="filter-label">类型</span>
|
|
<el-select
|
|
:teleported="false"
|
|
v-model="filterForm.type"
|
|
placeholder="请选择"
|
|
class="filter-select"
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="item in typeOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<span class="filter-label">管控措施</span>
|
|
<el-select
|
|
:teleported="false"
|
|
v-model="filterForm.roadConditionType"
|
|
placeholder="请选择"
|
|
class="filter-select"
|
|
clearable
|
|
@change="handleFilterChange"
|
|
>
|
|
<el-option
|
|
v-for="item in controlMeasureOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 起止桩号列插槽 -->
|
|
<template #stakeNo="{ row }">
|
|
<el-tooltip :content="row.stakeNo" placement="top" :show-after="500">
|
|
<span class="ellipsis-text">{{ row.stakeNo }}</span>
|
|
</el-tooltip>
|
|
</template>
|
|
|
|
<!-- 路况位置列插槽 -->
|
|
<template #location="{ row }">
|
|
<el-tooltip :content="row.location" placement="top" :show-after="500">
|
|
<span class="ellipsis-text">{{ row.location }}</span>
|
|
</el-tooltip>
|
|
</template>
|
|
|
|
<!-- 管控措施列插槽 -->
|
|
<template #roadConditionType="{ row }">
|
|
<span :class="['control-tag', getControlClass(row.roadConditionType)]">{{
|
|
row.roadConditionType
|
|
}}</span>
|
|
</template>
|
|
|
|
<!-- 操作列插槽 -->
|
|
<template #operation="{ row }">
|
|
<span class="detail-link" @click="handleDetail(row)">详情</span>
|
|
</template>
|
|
</base-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, watch } from "vue";
|
|
import { Close } from "@element-plus/icons-vue";
|
|
import {
|
|
regionOptions,
|
|
typeOptions,
|
|
controlMeasureOptions,
|
|
} from "../component/index.js";
|
|
import BaseDialog from "../component/baseDialog.vue";
|
|
import { request } from "@/utils/request";
|
|
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:visible", "close", "detail"]);
|
|
|
|
// 筛选表单
|
|
const filterForm = ref({
|
|
district: "",
|
|
type: "",
|
|
roadConditionType: "",
|
|
});
|
|
|
|
// 影响区域选项
|
|
// 已从 index.js 导入
|
|
|
|
// 类型选项
|
|
// 已从 index.js 导入
|
|
|
|
// 管控措施选项
|
|
// 已从 index.js 导入
|
|
|
|
// 表格高度
|
|
const tableHeight = ref(300);
|
|
|
|
// 表格列配置
|
|
const tableColumns = ref([
|
|
{ prop: "id", label: "序号", width: "" },
|
|
{ prop: "district", label: "影响区域", width: "" },
|
|
{ prop: "routeNo", label: "线路编号", width: "" },
|
|
{ prop: "stakeNo", label: "起止桩号", width: "", slot: "stakeNo" },
|
|
{ prop: "location", label: "路况位置", width: "", slot: "location" },
|
|
{ prop: "occurrenceTime", label: "发生时间", width: "" },
|
|
// { prop: "routeNo2", label: "线路编号", width: "" },
|
|
{ prop: "type", label: "类型", width: "" },
|
|
{
|
|
prop: "roadConditionType",
|
|
label: "管控措施",
|
|
width: "",
|
|
slot: "roadConditionType",
|
|
},
|
|
{ prop: "operation", label: "操作", width: "", slot: "operation" },
|
|
]);
|
|
|
|
// 表格数据
|
|
const tableData = ref([]);
|
|
|
|
// 分页
|
|
const currentPage = ref(1);
|
|
const pageSize = ref(10);
|
|
const total = ref(36);
|
|
|
|
const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
|
|
|
|
const visiblePages = computed(() => {
|
|
const pages = [];
|
|
const maxVisible = 5;
|
|
let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2));
|
|
let end = Math.min(totalPages.value, start + maxVisible - 1);
|
|
|
|
if (end - start + 1 < maxVisible) {
|
|
start = Math.max(1, end - maxVisible + 1);
|
|
}
|
|
|
|
for (let i = start; i <= end; i++) {
|
|
pages.push(i);
|
|
}
|
|
return pages;
|
|
});
|
|
|
|
// 获取管控措施样式类
|
|
const getControlClass = (measure) => {
|
|
const classMap = {
|
|
全幅封闭: "control-close",
|
|
半幅封闭: "control-half",
|
|
正常通行: "control-normal",
|
|
限制通行: "control-limit",
|
|
};
|
|
return classMap[measure] || "";
|
|
};
|
|
|
|
// 关闭对话框
|
|
const handleClose = () => {
|
|
emit("update:visible", false);
|
|
emit("close");
|
|
};
|
|
|
|
// 查看详情
|
|
const handleDetail = (item) => {
|
|
emit("detail", item);
|
|
};
|
|
|
|
// 分页操作
|
|
const handleSizeChange = (val) => {
|
|
pageSize.value = val;
|
|
fetchData();
|
|
};
|
|
|
|
const handleCurrentChange = (val) => {
|
|
currentPage.value = val;
|
|
fetchData();
|
|
};
|
|
// 筛选条件改变时触发
|
|
const handleFilterChange = () => {
|
|
currentPage.value = 1;
|
|
fetchData();
|
|
};
|
|
// 获取数据
|
|
const fetchData = async () => {
|
|
try {
|
|
// 转换管控措施类型
|
|
let measureType = 0;
|
|
if (filterForm.value.roadConditionType === "全幅封闭") {
|
|
measureType = 1;
|
|
} else if (filterForm.value.roadConditionType === "半幅封闭") {
|
|
measureType = 2;
|
|
} else if (filterForm.value.roadConditionType === "限速") {
|
|
measureType = 3;
|
|
} else if (filterForm.value.roadConditionType === "告警阻拦") {
|
|
measureType = 4;
|
|
}
|
|
|
|
const res = await request({
|
|
url: "/snow-ops-platform/sm-event/dashboard/control-list",
|
|
method: "GET",
|
|
params: {
|
|
pageNum: currentPage.value,
|
|
pageSize: pageSize.value,
|
|
measureType: measureType,
|
|
},
|
|
});
|
|
|
|
if (res.code === "00000" && res.data) {
|
|
const data = res.data;
|
|
// 转换数据格式
|
|
tableData.value = data.records.map((item) => {
|
|
return {
|
|
id: item.id,
|
|
district: item.district || "-",
|
|
routeNo: item.routeNo || "-",
|
|
stakeNo: `${item.startStakeNo}-${item.endStakeNo}` || "-",
|
|
location: item.occurLocation || "-",
|
|
occurrenceTime: item.occurTime || "-",
|
|
// routeNo2: item.routeNo || "-",
|
|
type: item.roadConditionType || "-",
|
|
roadConditionType: item.roadConditionType || "-",
|
|
expectRecoverTime: item.expectRecoverTime || "-",
|
|
eventStatus: item.eventStatus || "-",
|
|
};
|
|
});
|
|
total.value = data.total;
|
|
}
|
|
} catch (error) {
|
|
console.error("获取抢通情况数据失败:", error);
|
|
}
|
|
};
|
|
|
|
// 监听visible变化
|
|
watch(
|
|
() => props.visible,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
currentPage.value = 1;
|
|
fetchData();
|
|
}
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 筛选区域
|
|
.filter-section {
|
|
margin-bottom: 16px;
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
.filter-label {
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-select {
|
|
width: 120px;
|
|
|
|
:deep(.el-input__wrapper) {
|
|
background-color: rgba(30, 70, 120, 0.4);
|
|
border: 1px solid rgba(64, 169, 255, 0.3);
|
|
box-shadow: none;
|
|
border-radius: 4px;
|
|
|
|
.el-input__inner {
|
|
color: #fff;
|
|
font-size: 13px;
|
|
|
|
&::placeholder {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
}
|
|
|
|
.el-input__suffix {
|
|
.el-icon {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 省略号文本
|
|
.ellipsis-text {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
// 管控措施标签
|
|
.control-tag {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
|
|
&.control-close {
|
|
background-color: rgba(255, 77, 79, 0.2);
|
|
color: #ff4d4f;
|
|
border: 1px solid rgba(255, 77, 79, 0.4);
|
|
}
|
|
|
|
&.control-half {
|
|
background-color: rgba(255, 122, 0, 0.2);
|
|
color: #ff7a00;
|
|
border: 1px solid rgba(255, 122, 0, 0.4);
|
|
}
|
|
|
|
&.control-normal {
|
|
background-color: rgba(82, 196, 26, 0.2);
|
|
color: #52c41a;
|
|
border: 1px solid rgba(82, 196, 26, 0.4);
|
|
}
|
|
|
|
&.control-limit {
|
|
background-color: rgba(250, 219, 20, 0.2);
|
|
color: #fadb14;
|
|
border: 1px solid rgba(250, 219, 20, 0.4);
|
|
}
|
|
}
|
|
|
|
// 详情链接
|
|
.detail-link {
|
|
color: #40a9ff;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
transition: color 0.3s;
|
|
|
|
&:hover {
|
|
color: #69c0ff;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
</style>
|