574 lines
15 KiB
Vue
574 lines
15 KiB
Vue
<template>
|
|
<div v-if="visible" class="response-status-dialog-overlay" @click="handleOverlayClick">
|
|
<div class="response-status-dialog" @click.stop>
|
|
<!-- 标题栏 -->
|
|
<div class="dialog-header">
|
|
<div class="header-title">响应情况</div>
|
|
<div class="close-btn" @click="handleClose">
|
|
<el-icon><Close /></el-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 筛选区域 -->
|
|
<div class="filter-section">
|
|
<div class="filter-row">
|
|
<div class="filter-item">
|
|
<el-select v-model="filterForm.pointType" placeholder="影响点类型" class="filter-select">
|
|
<el-option label="全部" value="" />
|
|
<el-option label="边坡" value="slope" />
|
|
<el-option label="桥梁" value="bridge" />
|
|
<el-option label="隧道" value="tunnel" />
|
|
<el-option label="路面" value="road" />
|
|
</el-select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<el-select v-model="filterForm.pointLevel" placeholder="影响点等级" class="filter-select">
|
|
<el-option label="全部" value="" />
|
|
<el-option label="一般隐患" value="normal" />
|
|
<el-option label="重大隐患" value="serious" />
|
|
</el-select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<el-select v-model="filterForm.isResponded" placeholder="是否回应" class="filter-select">
|
|
<el-option label="全部" value="" />
|
|
<el-option label="是" value="yes" />
|
|
<el-option label="否" value="no" />
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据表格 -->
|
|
<div class="table-section">
|
|
<div class="table-header">
|
|
<div class="th" style="width: 50px">序号</div>
|
|
<div class="th" style="width: 80px">影响点类型</div>
|
|
<div class="th" style="width: 180px">影响点位置</div>
|
|
<div class="th" style="width: 90px">影响点等级</div>
|
|
<div class="th" style="width: 60px">查次数</div>
|
|
<div class="th" style="width: 120px">交通主管部门负责人</div>
|
|
<div class="th" style="width: 110px">公路机构责任人</div>
|
|
<div class="th" style="width: 110px">养护站负责人</div>
|
|
<div class="th" style="width: 80px">护路员</div>
|
|
<div class="th" style="width: 70px">回应状态</div>
|
|
<div class="th" style="width: 110px">最新催告时间</div>
|
|
<div class="th" style="width: 50px">操作</div>
|
|
</div>
|
|
<div class="table-body">
|
|
<div
|
|
v-for="(item, index) in tableData"
|
|
:key="item.id"
|
|
class="table-row"
|
|
:class="{ 'row-even': index % 2 === 1 }"
|
|
>
|
|
<div class="td" style="width: 50px">{{ item.id }}</div>
|
|
<div class="td" style="width: 80px">{{ item.pointType }}</div>
|
|
<div class="td" style="width: 180px">{{ item.pointLocation }}</div>
|
|
<div class="td" style="width: 90px">
|
|
<span class="level-tag" :class="item.levelClass">{{ item.pointLevel }}</span>
|
|
</div>
|
|
<div class="td" style="width: 60px">{{ item.checkCount }}</div>
|
|
<div class="td" style="width: 120px">
|
|
<div class="person-info">
|
|
<span class="person-name">{{ item.trafficDept.name }}</span>
|
|
<span class="person-phone">{{ item.trafficDept.phone }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="td" style="width: 110px">
|
|
<div class="person-info">
|
|
<span class="person-name">{{ item.roadOrg.name }}</span>
|
|
<span class="person-phone">{{ item.roadOrg.phone }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="td" style="width: 110px">
|
|
<div class="person-info">
|
|
<span class="person-name">{{ item.maintenance.name }}</span>
|
|
<span class="person-phone">{{ item.maintenance.phone }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="td" style="width: 80px">
|
|
<div class="person-info">
|
|
<span class="person-name">{{ item.roadKeeper.name }}</span>
|
|
<span class="person-phone">{{ item.roadKeeper.phone }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="td" style="width: 70px">
|
|
<span class="response-status" :class="item.responseClass">{{ item.responseStatus }}</span>
|
|
</div>
|
|
<div class="td" style="width: 110px">
|
|
<div class="time-info">
|
|
<span class="time-date">{{ item.urgeTime.date }}</span>
|
|
<span class="time-clock">{{ item.urgeTime.time }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="td" style="width: 50px">
|
|
<span class="detail-link" @click="handleDetail(item)">详情</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="pagination">
|
|
<span class="total">共{{ total }}条数据</span>
|
|
<div class="page-btns">
|
|
<div class="page-btn" :class="{ disabled: currentPage === 1 }" @click="prevPage">
|
|
<el-icon><ArrowLeft /></el-icon>
|
|
</div>
|
|
<div
|
|
v-for="page in visiblePages"
|
|
:key="page"
|
|
class="page-btn"
|
|
:class="{ active: currentPage === page }"
|
|
@click="goToPage(page)"
|
|
>
|
|
{{ page }}
|
|
</div>
|
|
<div class="page-btn" :class="{ disabled: currentPage === totalPages }" @click="nextPage">
|
|
<el-icon><ArrowRight /></el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, watch } from "vue";
|
|
import { Close, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
|
|
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:visible", "close", "detail"]);
|
|
|
|
// 筛选表单
|
|
const filterForm = ref({
|
|
pointType: "",
|
|
pointLevel: "",
|
|
isResponded: "",
|
|
});
|
|
|
|
// 表格数据
|
|
const tableData = ref([
|
|
{
|
|
id: 1,
|
|
pointType: "边坡",
|
|
pointLocation: "武汉-大理(K1452+951至K1462+209)",
|
|
pointLevel: "一般隐患",
|
|
levelClass: "level-normal",
|
|
checkCount: 2,
|
|
trafficDept: { name: "罗宸", phone: "17623865172" },
|
|
roadOrg: { name: "李海平", phone: "1372386532" },
|
|
maintenance: { name: "苏祖兵", phone: "13594331090" },
|
|
roadKeeper: { name: "凌承礼", phone: "1592393704" },
|
|
responseStatus: "已回应",
|
|
responseClass: "status-responded",
|
|
urgeTime: { date: "2026-03-28", time: "12:30:00" },
|
|
},
|
|
{
|
|
id: 12,
|
|
pointType: "边坡",
|
|
pointLocation: "武汉-大理(K1452+951至K1462+209)",
|
|
pointLevel: "一般隐患",
|
|
levelClass: "level-normal",
|
|
checkCount: 2,
|
|
trafficDept: { name: "罗宸", phone: "17623865172" },
|
|
roadOrg: { name: "李海平", phone: "1372386532" },
|
|
maintenance: { name: "苏祖兵", phone: "13594331090" },
|
|
roadKeeper: { name: "凌承礼", phone: "1592393704" },
|
|
responseStatus: "已回应",
|
|
responseClass: "status-responded",
|
|
urgeTime: { date: "2026-03-28", time: "12:30:00" },
|
|
},
|
|
]);
|
|
|
|
// 分页
|
|
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 = 4;
|
|
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 handleClose = () => {
|
|
emit("update:visible", false);
|
|
emit("close");
|
|
};
|
|
|
|
// 点击遮罩关闭
|
|
const handleOverlayClick = () => {
|
|
handleClose();
|
|
};
|
|
|
|
// 查看详情
|
|
const handleDetail = (item) => {
|
|
emit("detail", item);
|
|
};
|
|
|
|
// 分页操作
|
|
const prevPage = () => {
|
|
if (currentPage.value > 1) {
|
|
currentPage.value--;
|
|
fetchData();
|
|
}
|
|
};
|
|
|
|
const nextPage = () => {
|
|
if (currentPage.value < totalPages.value) {
|
|
currentPage.value++;
|
|
fetchData();
|
|
}
|
|
};
|
|
|
|
const goToPage = (page) => {
|
|
currentPage.value = page;
|
|
fetchData();
|
|
};
|
|
|
|
// 获取数据
|
|
const fetchData = () => {
|
|
console.log("获取第", currentPage.value, "页数据");
|
|
// 实际项目中调用API获取数据
|
|
};
|
|
|
|
// 监听visible变化
|
|
watch(
|
|
() => props.visible,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
currentPage.value = 1;
|
|
fetchData();
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.response-status-dialog-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.response-status-dialog {
|
|
width: 1150px;
|
|
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
|
border: 1px solid rgba(64, 169, 255, 0.3);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
// 标题栏
|
|
.dialog-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
|
|
.header-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
padding: 8px 40px;
|
|
background: linear-gradient(90deg, transparent 0%, rgba(64, 169, 255, 0.2) 20%, rgba(64, 169, 255, 0.2) 80%, transparent 100%);
|
|
border-bottom: 2px solid #40a9ff;
|
|
}
|
|
|
|
.close-btn {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
transition: color 0.3s;
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 筛选区域
|
|
.filter-section {
|
|
margin-bottom: 20px;
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.filter-item {
|
|
.filter-select {
|
|
width: 150px;
|
|
|
|
: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.5);
|
|
}
|
|
}
|
|
|
|
.el-input__suffix {
|
|
.el-icon {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 表格区域
|
|
.table-section {
|
|
background-color: rgba(30, 70, 120, 0.3);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
|
|
.table-header {
|
|
display: flex;
|
|
background-color: rgba(64, 169, 255, 0.2);
|
|
padding: 12px 16px;
|
|
|
|
.th {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.table-body {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
|
|
.table-row {
|
|
display: flex;
|
|
padding: 12px 16px;
|
|
align-items: center;
|
|
transition: background-color 0.3s;
|
|
|
|
&:hover {
|
|
background-color: rgba(64, 169, 255, 0.1);
|
|
}
|
|
|
|
&.row-even {
|
|
background-color: rgba(30, 70, 120, 0.2);
|
|
}
|
|
|
|
.td {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
text-align: center;
|
|
|
|
.level-tag {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
|
|
&.level-normal {
|
|
background-color: rgba(250, 219, 95, 0.2);
|
|
color: #fadb5f;
|
|
border: 1px solid rgba(250, 219, 95, 0.4);
|
|
}
|
|
|
|
&.level-serious {
|
|
background-color: rgba(255, 77, 79, 0.2);
|
|
color: #ff4d4f;
|
|
border: 1px solid rgba(255, 77, 79, 0.4);
|
|
}
|
|
}
|
|
|
|
.person-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
|
|
.person-name {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.person-phone {
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
|
|
.response-status {
|
|
font-size: 12px;
|
|
|
|
&.status-responded {
|
|
color: #52c41a;
|
|
}
|
|
|
|
&.status-unresponded {
|
|
color: #ff7a45;
|
|
}
|
|
}
|
|
|
|
.time-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
|
|
.time-date {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.time-clock {
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
|
|
.detail-link {
|
|
color: #40a9ff;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
|
|
&:hover {
|
|
color: #69c0ff;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 分页
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 16px;
|
|
|
|
.total {
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.page-btns {
|
|
display: flex;
|
|
gap: 8px;
|
|
|
|
.page-btn {
|
|
min-width: 28px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(64, 169, 255, 0.1);
|
|
border: 1px solid rgba(64, 169, 255, 0.2);
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
|
|
&:hover:not(.disabled):not(.active) {
|
|
background-color: rgba(64, 169, 255, 0.2);
|
|
border-color: rgba(64, 169, 255, 0.4);
|
|
}
|
|
|
|
&.active {
|
|
background-color: #40a9ff;
|
|
border-color: #40a9ff;
|
|
color: #fff;
|
|
}
|
|
|
|
&.disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 滚动条样式
|
|
.table-body::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.table-body::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.table-body::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg, #40a9ff 0%, #1890ff 100%);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.table-body::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(180deg, #69c0ff 0%, #40a9ff 100%);
|
|
}
|
|
|
|
// 下拉菜单样式
|
|
:deep(.el-select-dropdown) {
|
|
background-color: rgba(20, 50, 90, 0.98);
|
|
border: 1px solid rgba(64, 169, 255, 0.3);
|
|
|
|
.el-select-dropdown__item {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
|
|
&:hover {
|
|
background-color: rgba(64, 169, 255, 0.2);
|
|
}
|
|
|
|
&.selected {
|
|
background-color: rgba(64, 169, 255, 0.3);
|
|
color: #40a9ff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|