bxztApp/packages/screen/src/views/RiskWarning/Dialog/responseSituationDiaLog.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>