bxztApp/packages/screen/src/views/RiskWarning/Dialog/impactPointDialog.vue

<template>
  <base-dialog
    v-model:visible="props.visible"
    title="影响点情况"
    :table-data="tableData"
    :table-columns="tableColumns"
    :table-height="320"
    :total="total"
    :current-page="currentPage"
    :page-size="pageSize"
    :z-index="2000"
    :max-width="1200"
    @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"
            size="small"
            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">
          <el-select :teleported="false"
            v-model="filterForm.pointLevel"
            size="small"
            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">
          <el-select :teleported="false"
            v-model="filterForm.region"
            size="small"
            placeholder="影响区域"
            class="filter-select"
          >
            <el-option
              v-for="option in regionOptionsWithAll"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <el-button type="primary" class="search-btn" @click="handleSearch">
            查询
          </el-button>
        </div>
      </div>
    </template>

    <!-- 影响点等级列插槽 -->
    <template #pointLevel="{ row }">
      <span class="level-tag" :class="row.levelClass">{{
        row.pointLevel
      }}</span>
    </template>

    <!-- 交通主管部门负责人列插槽 -->
    <template #trafficDept="{ row }">
      <div class="person-info">
        <span class="person-name">{{ row.trafficDept.name }}</span>
        <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 #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,
  regionOptionsWithAll,
} 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: "",
  region: "",
});

// 表格列配置
const tableColumns = ref([
  { prop: "id", label: "序号", width: "" },
  { prop: "region", label: "影响区域", width: "" },
  { prop: "pointType", label: "影响点类型", width: "" },
  { prop: "pointLocation", label: "影响点位置", width: "" },
  { prop: "pointLevel", label: "影响点等级", width: "", slot: "pointLevel" },
  {
    prop: "trafficDept",
    label: "交通主管部门负责人",
    width: "",
    slot: "trafficDept",
  },
  { prop: "roadOrg", label: "公路机构责任人", width: "", slot: "roadOrg" },
  {
    prop: "maintenance",
    label: "养护站负责人",
    width: "",
    slot: "maintenance",
  },
  { prop: "roadKeeper", label: "护路员", width: "", slot: "roadKeeper" },
  { prop: "operation", label: "操作", width: "", slot: "operation" },
]);

// 表格数据
const tableData = ref([
  {
    id: 1,
    region: "重庆市",
    pointType: "边坡",
    pointLocation: "武汉-大理(K1452+951至K1462+209)",
    pointLevel: "一般隐患",
    levelClass: "level-normal",
    trafficDept: { name: "罗宸", phone: "17623865172" },
    roadOrg: { name: "李海平", phone: "13708320801" },
    maintenance: { name: "苏祖兵", phone: "13594331090" },
    roadKeeper: { name: "凌承礼", phone: "1592393704" },
  },
  {
    id: 2,
    region: "重庆市",
    pointType: "边坡",
    pointLocation: "武汉-大理(K1452+951至K1462+209)",
    pointLevel: "一般隐患",
    levelClass: "level-normal",
    trafficDept: { name: "罗宸", phone: "17623865172" },
    roadOrg: { name: "李海平", phone: "13708320801" },
    maintenance: { name: "苏祖兵", phone: "13594331090" },
    roadKeeper: { name: "凌承礼", phone: "1592393704" },
  },
  {
    id: 3,
    region: "重庆市",
    pointType: "边坡",
    pointLocation: "武汉-大理(K1452+951至K1462+209)",
    pointLevel: "一般隐患",
    levelClass: "level-normal",
    trafficDept: { name: "罗宸", phone: "17623865172" },
    roadOrg: { name: "李海平", phone: "13708320801" },
    maintenance: { name: "苏祖兵", phone: "13594331090" },
    roadKeeper: { name: "凌承礼", phone: "1592393704" },
  },
]);

const cardType = ref("");
// 点击卡片切换
const handleClick = (type) => {
  cardType.value = type;
};

// 分页
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");
};

// 点击遮罩关闭已由base-dialog组件处理

// 查询
const handleSearch = () => {
  console.log("查询条件:", filterForm.value);
  currentPage.value = 1;
  fetchData();
};

// 查看详情
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>
// 视频屏幕自适应 - 基于视口宽度动态调整
@function vw($px) {
  @return calc($px / 1920 * 100vw);
}

// 统计卡片
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: vw(16);

  .stat-card {
    background: linear-gradient(
      135deg,
      rgba(30, 70, 120, 0.6) 0%,
      rgba(20, 50, 90, 0.8) 100%
    );
    border: vw(2) solid rgba(64, 169, 255, 0.4);
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;

    .stat-label {
      font-size: vw(14);
      color: rgba(255, 255, 255, 0.8);
      font-weight: 500;
    }

    .stat-value {
      font-size: vw(28);
      font-weight: bold;
      color: #40a9ff;
      text-shadow: 0 0 10px rgba(64, 169, 255, 0.5);
    }
  }
}

// 筛选区域
.filter-section {
  margin-bottom: vw(20);

  .filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .filter-item {
    .filter-select {
      width: vw(150);

      :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: vw(4);

        .el-input__inner {
          color: #fff;
          font-size: vw(13);

          &::placeholder {
            color: rgba(255, 255, 255, 0.5);
          }
        }

        .el-input__suffix {
          .el-icon {
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }
    }

    .search-btn {
      background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
      border: none;
      border-radius: vw(4);
      padding: 0 vw(24);
      height: vw(32);
      font-size: vw(13);

      &:hover {
        background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
      }
    }
  }
}

// 表格列样式
.level-tag {
  display: inline-block;
  padding: vw(2) vw(8);
  border-radius: vw(4);
  font-size: vw(11);

  &.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: vw(2);

  .person-name {
    font-size: vw(12);
    color: rgba(255, 255, 255, 0.9);
  }

  .person-phone {
    font-size: vw(11);
    color: rgba(255, 255, 255, 0.6);
  }
}

.detail-link {
  color: #40a9ff;
  cursor: pointer;
  font-size: vw(12);

  &: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>