303 lines
7.1 KiB
Vue
303 lines
7.1 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"
|
||
:z-index="2200"
|
||
@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.region" 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.riskLevel" placeholder="请选择" class="filter-select" clearable>
|
||
<el-option
|
||
v-for="item in riskLevelOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 驻地名称列插槽 -->
|
||
<template #stationName="{ row }">
|
||
<el-tooltip :content="row.stationName" placement="top" :show-after="500">
|
||
<span class="ellipsis-text">{{ row.stationName }}</span>
|
||
</el-tooltip>
|
||
</template>
|
||
|
||
<!-- 所属项目列插槽 -->
|
||
<template #project="{ row }">
|
||
<el-tooltip :content="row.project" placement="top" :show-after="500">
|
||
<span class="ellipsis-text">{{ row.project }}</span>
|
||
</el-tooltip>
|
||
</template>
|
||
|
||
<!-- 驻地风险等级列插槽 -->
|
||
<template #riskLevel="{ row }">
|
||
<span :class="['risk-tag', getRiskClass(row.riskLevel)]">{{ row.riskLevel }}</span>
|
||
</template>
|
||
</base-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, watch } from "vue";
|
||
import { Close } from "@element-plus/icons-vue";
|
||
import { regionOptions, riskLevelOptions } from "../component/index.js";
|
||
import BaseDialog from "../component/baseDialog.vue";
|
||
|
||
const props = defineProps({
|
||
visible: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
});
|
||
|
||
const emit = defineEmits(["update:visible", "close"]);
|
||
|
||
// 筛选表单
|
||
const filterForm = ref({
|
||
region: "",
|
||
riskLevel: "",
|
||
});
|
||
|
||
// 行政区域选项
|
||
// 已从 index.js 导入
|
||
|
||
// 风险等级选项
|
||
// 已从 index.js 导入
|
||
|
||
// 表格高度
|
||
const tableHeight = ref(300);
|
||
|
||
// 表格列配置
|
||
const tableColumns = ref([
|
||
{ prop: 'id', label: '序号', width: '60' },
|
||
{ prop: 'region', label: '行政区域', width: '100' },
|
||
{ prop: 'stationName', label: '驻地名称', width: '200', slot: 'stationName' },
|
||
{ prop: 'project', label: '所属项目', width: '200', slot: 'project' },
|
||
{ prop: 'peopleCount', label: '驻地人数', width: '80' },
|
||
{ prop: 'riskLevel', label: '驻地风险等级', width: '100', slot: 'riskLevel' },
|
||
]);
|
||
|
||
// 表格数据
|
||
const tableData = ref([
|
||
{
|
||
id: 1,
|
||
region: "沙坪坝区",
|
||
stationName: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）项目经理部",
|
||
project: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）",
|
||
peopleCount: 21,
|
||
riskLevel: "Ⅳ级",
|
||
},
|
||
{
|
||
id: 2,
|
||
region: "万州区",
|
||
stationName: "万州区项目经理部",
|
||
project: "万州区公路改造项目",
|
||
peopleCount: 15,
|
||
riskLevel: "Ⅲ级",
|
||
},
|
||
{
|
||
id: 3,
|
||
region: "渝中区",
|
||
stationName: "渝中区桥梁维护项目部",
|
||
project: "渝中区桥梁维护工程",
|
||
peopleCount: 8,
|
||
riskLevel: "Ⅱ级",
|
||
},
|
||
{
|
||
id: 4,
|
||
region: "江北区",
|
||
stationName: "江北区道路施工项目部",
|
||
project: "江北区道路施工项目",
|
||
peopleCount: 32,
|
||
riskLevel: "Ⅰ级",
|
||
},
|
||
]);
|
||
|
||
// 分页
|
||
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 getRiskClass = (level) => {
|
||
const classMap = {
|
||
"Ⅰ级": "risk-level-1",
|
||
"Ⅱ级": "risk-level-2",
|
||
"Ⅲ级": "risk-level-3",
|
||
"Ⅳ级": "risk-level-4",
|
||
};
|
||
return classMap[level] || "";
|
||
};
|
||
|
||
// 关闭对话框
|
||
const handleClose = () => {
|
||
emit("update:visible", false);
|
||
emit("close");
|
||
};
|
||
|
||
// 分页操作
|
||
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-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: 140px;
|
||
|
||
: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;
|
||
}
|
||
|
||
// 风险等级标签
|
||
.risk-tag {
|
||
display: inline-block;
|
||
padding: 2px 12px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
|
||
&.risk-level-1 {
|
||
background-color: rgba(255, 77, 79, 0.2);
|
||
color: #ff4d4f;
|
||
border: 1px solid rgba(255, 77, 79, 0.4);
|
||
}
|
||
|
||
&.risk-level-2 {
|
||
background-color: rgba(255, 122, 0, 0.2);
|
||
color: #ff7a00;
|
||
border: 1px solid rgba(255, 122, 0, 0.4);
|
||
}
|
||
|
||
&.risk-level-3 {
|
||
background-color: rgba(250, 219, 20, 0.2);
|
||
color: #fadb14;
|
||
border: 1px solid rgba(250, 219, 20, 0.4);
|
||
}
|
||
|
||
&.risk-level-4 {
|
||
background-color: rgba(82, 196, 26, 0.2);
|
||
color: #52c41a;
|
||
border: 1px solid rgba(82, 196, 26, 0.4);
|
||
}
|
||
}
|
||
</style>
|