bxztApp/packages/screen/src/views/RiskWarning/Dialog/clearanceSituationDialog.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"
    @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.type" placeholder="请选择" class="filter-select" clearable>
            <el-option
              v-for="item in typeOptions"
              :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.controlMeasure" placeholder="请选择" class="filter-select" clearable>
            <el-option
              v-for="item in controlMeasureOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </template>

    <!-- 起止桩号列插槽 -->
    <template #stakeNo="{ row }">
      <el-tooltip :content="row.stakeNo" placement="top" :show-after="500">
        <span class="ellipsis-text">{{ row.stakeNo }}</span>
      </el-tooltip>
    </template>

    <!-- 路况位置列插槽 -->
    <template #location="{ row }">
      <el-tooltip :content="row.location" placement="top" :show-after="500">
        <span class="ellipsis-text">{{ row.location }}</span>
      </el-tooltip>
    </template>

    <!-- 管控措施列插槽 -->
    <template #controlMeasure="{ row }">
      <span :class="['control-tag', getControlClass(row.controlMeasure)]">{{ row.controlMeasure }}</span>
    </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 } from "@element-plus/icons-vue";
import { regionOptions, typeOptions, controlMeasureOptions } from "../component/index.js";
import BaseDialog from "../component/baseDialog.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:visible", "close", "detail"]);

// 筛选表单
const filterForm = ref({
  region: "",
  type: "",
  controlMeasure: "",
});

// 影响区域选项
// 已从 index.js 导入

// 类型选项
// 已从 index.js 导入

// 管控措施选项
// 已从 index.js 导入

// 表格高度
const tableHeight = ref(300);

// 表格列配置
const tableColumns = ref([
  { prop: 'id', label: '序号', width: '50' },
  { prop: 'region', label: '影响区域', width: '80' },
  { prop: 'routeNo', label: '线路编号', width: '80' },
  { prop: 'stakeNo', label: '起止桩号', width: '100', slot: 'stakeNo' },
  { prop: 'location', label: '路况位置', width: '100', slot: 'location' },
  { prop: 'occurrenceTime', label: '发生时间', width: '140' },
  { prop: 'routeNo2', label: '线路编号', width: '80' },
  { prop: 'type', label: '类型', width: '80' },
  { prop: 'controlMeasure', label: '管控措施', width: '100', slot: 'controlMeasure' },
  { prop: 'operation', label: '操作', width: '80', slot: 'operation' },
]);

// 表格数据
const tableData = ref([
  {
    id: 1,
    region: "巫溪县",
    routeNo: "G242",
    stakeNo: "336.800-338.850",
    location: "三星乡五斗村",
    occurrenceTime: "2025-08-11 04:53:42",
    routeNo2: "G242",
    type: "边坡坍塌",
    controlMeasure: "全幅封闭",
  },
  {
    id: 2,
    region: "万州区",
    routeNo: "G242",
    stakeNo: "338.800-338.850",
    location: "三星乡五斗村",
    occurrenceTime: "2025-08-11 04:53:42",
    routeNo2: "G242",
    type: "边坡坍塌",
    controlMeasure: "正常通行",
  },
  {
    id: 3,
    region: "沙坪坝区",
    routeNo: "G319",
    stakeNo: "120.500-122.000",
    location: "沙坪坝镇",
    occurrenceTime: "2025-08-10 14:30:00",
    routeNo2: "G319",
    type: "路面塌陷",
    controlMeasure: "半幅封闭",
  },
  {
    id: 4,
    region: "渝中区",
    routeNo: "G212",
    stakeNo: "88.200-89.100",
    location: "渝中大道",
    occurrenceTime: "2025-08-09 09:15:30",
    routeNo2: "G212",
    type: "桥梁损坏",
    controlMeasure: "限制通行",
  },
]);

// 分页
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 getControlClass = (measure) => {
  const classMap = {
    "全幅封闭": "control-close",
    "半幅封闭": "control-half",
    "正常通行": "control-normal",
    "限制通行": "control-limit",
  };
  return classMap[measure] || "";
};

// 关闭对话框
const handleClose = () => {
  emit("update:visible", false);
  emit("close");
};

// 查看详情
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-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: 120px;

      :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;
}

// 管控措施标签
.control-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;

  &.control-close {
    background-color: rgba(255, 77, 79, 0.2);
    color: #ff4d4f;
    border: 1px solid rgba(255, 77, 79, 0.4);
  }

  &.control-half {
    background-color: rgba(255, 122, 0, 0.2);
    color: #ff7a00;
    border: 1px solid rgba(255, 122, 0, 0.4);
  }

  &.control-normal {
    background-color: rgba(82, 196, 26, 0.2);
    color: #52c41a;
    border: 1px solid rgba(82, 196, 26, 0.4);
  }

  &.control-limit {
    background-color: rgba(250, 219, 20, 0.2);
    color: #fadb14;
    border: 1px solid rgba(250, 219, 20, 0.4);
  }
}

// 详情链接
.detail-link {
  color: #40a9ff;
  cursor: pointer;
  font-size: 13px;
  transition: color 0.3s;

  &:hover {
    color: #69c0ff;
    text-decoration: underline;
  }
}
</style>