265 lines
7.5 KiB
Vue
265 lines
7.5 KiB
Vue
<template>
|
|
<base-dialog
|
|
v-model:visible="props.visible"
|
|
title="潼南三级路长明细"
|
|
:table-data="tableData"
|
|
:table-columns="tableColumns"
|
|
:table-height="300"
|
|
:total="total"
|
|
:current-page="currentPage"
|
|
:page-size="pageSize"
|
|
:z-index="1000"
|
|
:max-width="700"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
@close="handleClose"
|
|
>
|
|
<!-- 标题栏下方自定义插槽 -->
|
|
<template #header>
|
|
<!-- 统计数据卡片 -->
|
|
<div class="stats-cards">
|
|
<div class="stat-card">
|
|
<div class="card-icon">
|
|
<el-icon class="stat-icon"><User /></el-icon>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-label">路长总人数</div>
|
|
<div class="card-value">
|
|
<span class="value-num">{{ stats.total }}</span>
|
|
<span class="value-unit">人</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="card-icon">
|
|
<el-icon class="stat-icon"><OfficeBuilding /></el-icon>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-label">县级路长</div>
|
|
<div class="card-value">
|
|
<span class="value-num">{{ stats.county }}</span>
|
|
<span class="value-unit">公里</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="card-icon">
|
|
<el-icon class="stat-icon"><MapLocation /></el-icon>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-label">乡、村路长</div>
|
|
<div class="card-value">
|
|
<span class="value-num">{{ stats.village }}</span>
|
|
<span class="value-unit">次</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 操作列插槽 -->
|
|
<template #operation="{ row }">
|
|
<div class="action-btns">
|
|
<div class="action-btn" @click="handleView(row)">
|
|
<el-icon><VideoCamera /></el-icon>
|
|
</div>
|
|
<div class="action-btn" @click="handleVoice(row)">
|
|
<el-icon><Microphone /></el-icon>
|
|
</div>
|
|
<div class="action-btn" @click="handleCall(row)">
|
|
<el-icon><Phone /></el-icon>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</base-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, watch } from "vue";
|
|
import { Close, VideoCamera, Microphone, Phone, ArrowLeft, ArrowRight, User, OfficeBuilding, MapLocation } from "@element-plus/icons-vue";
|
|
import baseDialog from "../component/baseDialog.vue";
|
|
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:visible", "close"]);
|
|
|
|
// 统计数据
|
|
const stats = ref({
|
|
total: 1127,
|
|
county: 216,
|
|
village: 1099,
|
|
});
|
|
|
|
// 表格列配置
|
|
const tableColumns = ref([
|
|
{ prop: "id", label: "序号", width: "60px" },
|
|
{ prop: "district", label: "区县/镇街", width: "120px" },
|
|
{ prop: "name", label: "姓名", width: "100px" },
|
|
{ prop: "phone", label: "电话", width: "120px" },
|
|
{ prop: "role", label: "角色", width: "200px" },
|
|
{ prop: "position", label: "职务", width: "100px" },
|
|
{ prop: "operation", label: "操作", width: "120px", slot: "operation" },
|
|
]);
|
|
|
|
// 表格数据
|
|
const tableData = ref([
|
|
{ id: 1, district: "万州区柏梓镇", name: "赵海浪", phone: "1862352068", role: "一般人员（路长履职）", position: "其他" },
|
|
{ id: 2, district: "万州区柏梓镇", name: "赵海浪", phone: "1862352068", role: "一般人员（路长履职）", position: "其他" },
|
|
{ id: 3, district: "万州区柏梓镇", name: "赵海浪", phone: "1862352068", role: "一般人员（路长履职）", position: "其他" },
|
|
{ id: 4, district: "万州区柏梓镇", name: "赵海浪", phone: "1862352068", role: "一般人员（路长履职）", position: "其他" },
|
|
{ id: 5, district: "万州区李河镇", name: "王建国", phone: "1398324567", role: "一般人员（路长履职）", position: "其他" },
|
|
{ id: 6, district: "万州区李河镇", name: "王建国", phone: "1398324567", role: "一般人员（路长履职）", position: "其他" },
|
|
{ id: 7, district: "万州区李河镇", name: "王建国", phone: "1398324567", role: "一般人员（路长履职）", position: "其他" },
|
|
{ id: 8, district: "万州区李河镇", name: "王建国", phone: "1398324567", role: "一般人员（路长履职）", position: "其他" },
|
|
{ id: 9, district: "万州区分水镇", name: "刘志强", phone: "1387654321", role: "一般人员（路长履职）", position: "其他" },
|
|
{ id: 10, district: "万州区分水镇", name: "刘志强", phone: "1387654321", role: "一般人员（路长履职）", position: "其他" },
|
|
{ id: 11, district: "万州区分水镇", name: "刘志强", phone: "1387654321", role: "一般人员（路长履职）", position: "其他" },
|
|
{ id: 12, district: "万州区分水镇", name: "刘志强", phone: "1387654321", role: "一般人员（路长履职）", position: "其他" },
|
|
]);
|
|
|
|
// 分页
|
|
const currentPage = ref(1);
|
|
const pageSize = ref(10);
|
|
const total = ref(36);
|
|
|
|
// 关闭对话框
|
|
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获取数据
|
|
};
|
|
|
|
// 操作按钮
|
|
const handleView = (item) => {
|
|
console.log("查看视频:", item);
|
|
};
|
|
|
|
const handleVoice = (item) => {
|
|
console.log("语音通话:", item);
|
|
};
|
|
|
|
const handleCall = (item) => {
|
|
console.log("拨打电话:", item);
|
|
};
|
|
|
|
// 监听visible变化
|
|
watch(
|
|
() => props.visible,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
currentPage.value = 1;
|
|
fetchData();
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
// 统计卡片
|
|
.stats-cards {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
|
|
.stat-card {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: linear-gradient(135deg, rgba(30, 80, 140, 0.6) 0%, rgba(20, 60, 110, 0.8) 100%);
|
|
border: 1px solid rgba(64, 169, 255, 0.2);
|
|
border-radius: 4px;
|
|
padding: 10px 12px;
|
|
|
|
.card-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(64, 169, 255, 0.15);
|
|
border-radius: 4px;
|
|
|
|
.stat-icon {
|
|
font-size: 18px;
|
|
color: #40a9ff;
|
|
}
|
|
}
|
|
|
|
.card-info {
|
|
.card-label {
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.card-value {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 2px;
|
|
|
|
.value-num {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #40a9ff;
|
|
text-shadow: 0 0 6px rgba(64, 169, 255, 0.5);
|
|
}
|
|
|
|
.value-unit {
|
|
font-size: 10px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 操作按钮样式
|
|
.action-btns {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
|
|
.action-btn {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(64, 169, 255, 0.15);
|
|
border-radius: 2px;
|
|
color: #40a9ff;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
|
|
&:hover {
|
|
background-color: rgba(64, 169, 255, 0.3);
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
}
|
|
</style>
|