604 lines
15 KiB
Vue
604 lines
15 KiB
Vue
<template>
|
|
<base-dialog
|
|
v-model:visible="props.visible"
|
|
title="响应情况"
|
|
:table-data="tableData"
|
|
:table-columns="tableColumns"
|
|
:table-height="200"
|
|
:total="total"
|
|
:current-page="currentPage"
|
|
:page-size="pageSize"
|
|
:z-index="1000"
|
|
:max-width="1150"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
@close="handleClose"
|
|
>
|
|
<!-- 标题栏下方自定义插槽 -->
|
|
<template #header>
|
|
<!-- 统计卡片 -->
|
|
<div class="stats-cards">
|
|
<div
|
|
@click="handleClick('0')"
|
|
class="stat-card"
|
|
:style="{
|
|
backgroundImage: `url(${cardType === '0' ? selectedIcon : unselectedIcon})`,
|
|
backgroundSize: '100% 100%',
|
|
backgroundPosition: 'center',
|
|
}"
|
|
>
|
|
<div class="stat-icon"><img :src="Icon0" alt="" /></div>
|
|
<div class="stat-content">
|
|
<span class="stat-label">影响桥梁</span>
|
|
<span class="stat-value">(1430)</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
@click="handleClick('1')"
|
|
class="stat-card"
|
|
:style="{
|
|
backgroundImage: `url(${cardType === '1' ? selectedIcon : unselectedIcon})`,
|
|
backgroundSize: '100% 100%',
|
|
backgroundPosition: 'center',
|
|
}"
|
|
>
|
|
<div class="stat-icon"><img :src="Icon1" alt="" /></div>
|
|
<div class="stat-content">
|
|
<span class="stat-label">影响边坡</span>
|
|
<span class="stat-value">(933)</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
@click="handleClick('2')"
|
|
class="stat-card"
|
|
:style="{
|
|
backgroundImage: `url(${cardType === '2' ? selectedIcon : unselectedIcon})`,
|
|
backgroundSize: '100% 100%',
|
|
backgroundPosition: 'center',
|
|
}"
|
|
>
|
|
<div class="stat-icon"><img :src="Icon2" alt="" /></div>
|
|
<div class="stat-content">
|
|
<span class="stat-label">影响隧道</span>
|
|
<span class="stat-value">(1033)</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
@click="handleClick('3')"
|
|
class="stat-card"
|
|
:style="{
|
|
backgroundImage: `url(${cardType === '3' ? selectedIcon : unselectedIcon})`,
|
|
backgroundSize: '100% 100%',
|
|
backgroundPosition: 'center',
|
|
}"
|
|
>
|
|
<div class="stat-icon"><img :src="Icon3" alt="" /></div>
|
|
<div class="stat-content">
|
|
<span class="stat-label">影响项目</span>
|
|
<span class="stat-value">(832)</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
@click="handleClick('4')"
|
|
class="stat-card"
|
|
:style="{
|
|
backgroundImage: `url(${cardType === '4' ? selectedIcon : unselectedIcon})`,
|
|
backgroundSize: '100% 100%',
|
|
backgroundPosition: 'center',
|
|
}"
|
|
>
|
|
<div class="stat-icon"><img :src="Icon4" alt="" /></div>
|
|
<div class="stat-content">
|
|
<span class="stat-label">影响路段</span>
|
|
<span class="stat-value">(832)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 筛选区域 -->
|
|
<template #filter>
|
|
<div class="filter-row">
|
|
<!-- <div class="filter-item">
|
|
<el-select :teleported="false"
|
|
v-model="filterForm.pointType"
|
|
placeholder="影响点类型"
|
|
class="filter-select"
|
|
>
|
|
<el-option
|
|
v-for="option in pointTypeOptions"
|
|
:key="option.value"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
/>
|
|
</el-select>
|
|
</div> -->
|
|
<div class="filter-item">
|
|
<span class="filter-label">影响点等级</span>
|
|
<el-select :teleported="false"
|
|
v-model="filterForm.pointLevel"
|
|
placeholder="影响点等级"
|
|
class="filter-select"
|
|
>
|
|
<el-option
|
|
v-for="option in pointLevelOptions"
|
|
:key="option.value"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<span class="filter-label">是否回应</span>
|
|
<el-select :teleported="false"
|
|
v-model="filterForm.isResponded"
|
|
placeholder="是否回应"
|
|
class="filter-select"
|
|
>
|
|
<el-option
|
|
v-for="option in isRespondedOptions"
|
|
:key="option.value"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 影响点等级列插槽 -->
|
|
<template #pointLevel="{ row }">
|
|
<span class="level-tag" :class="row.levelClass">{{
|
|
row.pointLevel
|
|
}}</span>
|
|
</template>
|
|
|
|
<!-- 交通主管部门负责人列插槽 -->
|
|
<template #trafficDept="{ row }">
|
|
<div class="person-info">
|
|
<div class="person-name center">
|
|
<span style="margin-right: 5px">{{ row.trafficDept.name }}</span>
|
|
<img
|
|
class="response-icon"
|
|
:src="
|
|
row.trafficDept.isResponded
|
|
? row.trafficDept.img
|
|
: row.trafficDept.img
|
|
"
|
|
alt
|
|
/>
|
|
</div>
|
|
<span class="person-phone">{{ row.trafficDept.phone }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 公路机构责任人列插槽 -->
|
|
<template #roadOrg="{ row }">
|
|
<div class="person-info">
|
|
<span class="person-name">{{ row.roadOrg.name }}</span>
|
|
<span class="person-phone">{{ row.roadOrg.phone }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 养护站负责人列插槽 -->
|
|
<template #maintenance="{ row }">
|
|
<div class="person-info">
|
|
<span class="person-name">{{ row.maintenance.name }}</span>
|
|
<span class="person-phone">{{ row.maintenance.phone }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 护路员列插槽 -->
|
|
<template #roadKeeper="{ row }">
|
|
<div class="person-info">
|
|
<span class="person-name">{{ row.roadKeeper.name }}</span>
|
|
<span class="person-phone">{{ row.roadKeeper.phone }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 回应状态列插槽 -->
|
|
<template #responseStatus="{ row }">
|
|
<span class="response-status" :class="row.responseClass">{{
|
|
row.responseStatus
|
|
}}</span>
|
|
</template>
|
|
|
|
<!-- 最新催告时间列插槽 -->
|
|
<template #urgeTime="{ row }">
|
|
<div class="time-info">
|
|
<span class="time-date">{{ row.urgeTime.date }}</span>
|
|
<span class="time-clock">{{ row.urgeTime.time }}</span>
|
|
</div>
|
|
</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, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
|
|
import {
|
|
pointTypeOptions,
|
|
pointLevelOptions,
|
|
isRespondedOptions,
|
|
} from "../component/index.js";
|
|
import baseDialog from "../component/baseDialog.vue";
|
|
|
|
import respondedIcon from "../../../assets/xiangying/有回应@2x.png";
|
|
import notRespondedIcon from "../../../assets/xiangying/无回应@2x.png";
|
|
import selectedIcon from "../../../assets/xiangying/选中bg@2x.png";
|
|
import unselectedIcon from "../../../assets/xiangying/未选中bg@2x.png";
|
|
|
|
import Icon0 from "../../../assets/xiangying/选中@2x.png";
|
|
import Icon1 from "../../../assets/xiangying/未选中1@2x.png";
|
|
import Icon2 from "../../../assets/xiangying/未选中2@2x.png";
|
|
import Icon3 from "../../../assets/xiangying/未选中3@2x.png";
|
|
import Icon4 from "../../../assets/xiangying/未选中4@2x.png";
|
|
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:visible", "close", "detail"]);
|
|
|
|
// 筛选表单
|
|
const filterForm = ref({
|
|
pointType: "",
|
|
pointLevel: "",
|
|
isResponded: "",
|
|
});
|
|
|
|
const cardType = ref("0");
|
|
|
|
// 表格列配置
|
|
const tableColumns = ref([
|
|
{ prop: "id", label: "序号", width: "50px" },
|
|
{ prop: "pointType", label: "影响点类型", width: "80px" },
|
|
{ prop: "pointLocation", label: "影响点位置", width: "150px" },
|
|
{
|
|
prop: "pointLevel",
|
|
label: "影响点等级",
|
|
width: "90px",
|
|
slot: "pointLevel",
|
|
},
|
|
{ prop: "checkCount", label: "查次数", width: "60px" },
|
|
{
|
|
prop: "trafficDept",
|
|
label: "交通主管部门负责人",
|
|
width: "120px",
|
|
slot: "trafficDept",
|
|
},
|
|
{ prop: "roadOrg", label: "公路机构责任人", width: "110px", slot: "roadOrg" },
|
|
{
|
|
prop: "maintenance",
|
|
label: "养护站负责人",
|
|
width: "110px",
|
|
slot: "maintenance",
|
|
},
|
|
{ prop: "roadKeeper", label: "护路员", width: "80px", slot: "roadKeeper" },
|
|
{
|
|
prop: "responseStatus",
|
|
label: "回应状态",
|
|
width: "70px",
|
|
slot: "responseStatus",
|
|
},
|
|
{ prop: "urgeTime", label: "最新催告时间", width: "110px", slot: "urgeTime" },
|
|
{ prop: "operation", label: "操作", width: "50px", slot: "operation" },
|
|
]);
|
|
|
|
// 表格数据
|
|
const tableData = ref([
|
|
{
|
|
id: 1,
|
|
pointType: "边坡",
|
|
pointLocation: "武汉-大理(K1452+951至K1462+209)",
|
|
pointLevel: "一般隐患",
|
|
levelClass: "level-normal",
|
|
checkCount: 2,
|
|
trafficDept: {
|
|
name: "罗宸",
|
|
phone: "17623865172",
|
|
img: respondedIcon,
|
|
isResponded: true,
|
|
},
|
|
roadOrg: {
|
|
name: "李海平",
|
|
phone: "1372386532",
|
|
img: notRespondedIcon,
|
|
isResponded: false,
|
|
},
|
|
maintenance: {
|
|
name: "苏祖兵",
|
|
phone: "13594331090",
|
|
img: notRespondedIcon,
|
|
isResponded: false,
|
|
},
|
|
roadKeeper: {
|
|
name: "凌承礼",
|
|
phone: "1592393704",
|
|
img: respondedIcon,
|
|
isResponded: true,
|
|
},
|
|
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" },
|
|
},
|
|
]);
|
|
tableData.value.push(...tableData.value);
|
|
tableData.value.push(...tableData.value);
|
|
|
|
// 分页
|
|
const currentPage = ref(1);
|
|
const pageSize = ref(10);
|
|
const total = ref(36);
|
|
|
|
// 关闭对话框
|
|
const handleClose = () => {
|
|
emit("update:visible", false);
|
|
emit("close");
|
|
};
|
|
|
|
// 点击卡片切换
|
|
const handleClick = (type) => {
|
|
cardType.value = type;
|
|
};
|
|
|
|
// 点击遮罩关闭已由base-dialog组件处理
|
|
|
|
// 查看详情
|
|
const handleDetail = (item) => {
|
|
emit("detail", item);
|
|
};
|
|
|
|
// 分页操作
|
|
const handleSizeChange = (val) => {
|
|
pageSize.value = val;
|
|
fetchData();
|
|
};
|
|
|
|
const handleCurrentChange = (val) => {
|
|
currentPage.value = val;
|
|
fetchData();
|
|
};
|
|
|
|
// 获取数据
|
|
const fetchData = () => {
|
|
console.log("获取第", currentPage.value, "页数据");
|
|
// 实际项目中调用API获取数据
|
|
};
|
|
|
|
// 监听visible变化
|
|
watch(
|
|
() => props.visible,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
currentPage.value = 1;
|
|
fetchData();
|
|
}
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 筛选区域
|
|
.filter-row {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
|
|
.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: 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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 表格单元格样式
|
|
.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;
|
|
.response-icon {
|
|
width: 30px;
|
|
height: 15px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
// 下拉菜单样式
|
|
: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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 统计卡片
|
|
.stats-cards {
|
|
display: flex;
|
|
gap: 12px;
|
|
|
|
.stat-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
flex: 1;
|
|
|
|
&:hover {
|
|
background: rgba(30, 70, 120, 0.9);
|
|
border-color: rgba(64, 169, 255, 0.6);
|
|
box-shadow: 0 0 15px rgba(64, 169, 255, 0.3);
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 18px;
|
|
color: #40a9ff;
|
|
width: 34px;
|
|
height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.stat-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #40a9ff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|