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.district"
            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.roadConditionType"
            placeholder="请选择"
            class="filter-select"
            clearable
            @change="handleFilterChange"
          >
            <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 #roadConditionType="{ row }">
      <span :class="['control-tag', getControlClass(row.roadConditionType)]">{{
        row.roadConditionType
      }}</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";
import { request } from "@/utils/request";

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

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

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

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

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

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

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

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

// 表格数据
const tableData = ref([]);

// 分页
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 handleFilterChange = () => {
  currentPage.value = 1;
  fetchData();
};
// 获取数据
const fetchData = async () => {
  try {
    // 转换管控措施类型
    let measureType = 0;
    if (filterForm.value.roadConditionType === "全幅封闭") {
      measureType = 1;
    } else if (filterForm.value.roadConditionType === "半幅封闭") {
      measureType = 2;
    } else if (filterForm.value.roadConditionType === "限速") {
      measureType = 3;
    } else if (filterForm.value.roadConditionType === "告警阻拦") {
      measureType = 4;
    }

    const res = await request({
      url: "/snow-ops-platform/sm-event/dashboard/control-list",
      method: "GET",
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        measureType: measureType,
      },
    });

    if (res.code === "00000" && res.data) {
      const data = res.data;
      // 转换数据格式
      tableData.value = data.records.map((item) => {
        return {
          id: item.id,
          district: item.district || "-",
          routeNo: item.routeNo || "-",
          stakeNo: `${item.startStakeNo}-${item.endStakeNo}` || "-",
          location: item.occurLocation || "-",
          occurrenceTime: item.occurTime || "-",
          routeNo2: item.routeNo || "-",
          type: item.roadConditionType || "-",
          roadConditionType: item.roadConditionType || "-",
          expectRecoverTime: item.expectRecoverTime || "-",
          eventStatus: item.eventStatus || "-",
        };
      });
      total.value = data.total;
    }
  } catch (error) {
    console.error("获取抢通情况数据失败:", error);
  }
};

// 监听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>