bxztApp/packages/screen/src/views/RiskWarning/Dialog/warningSituationDialog.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
            v-model="filterForm.warningLevel"
            placeholder="请选择"
            class="filter-select el-select"
            clearable
            size="small"
            :teleported="false"
          >
            <el-option
              v-for="item in warningLevelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">影响区域</span>
          <el-select
            v-model="filterForm.region"
            placeholder="请选择"
            class="filter-select"
            clearable
            size="small"
            :teleported="false"
          >
            <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
            v-model="filterForm.isEnded"
            placeholder="请选择"
            class="filter-select"
            clearable
            size="small"
            :teleported="false"
          >
            <el-option
              v-for="item in isEndedOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div class="filter-item">
          <span class="filter-label">生效时间</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="small"
            popper-class="custom-date-picker"
            :teleported="false"
            :prefix-icon="Calendar"
            @change="handleDateChange"
          />
        </div>
      </div>
    </template>

    <!-- 预警等级列插槽 -->
    <template #warningLevel="{ row }">
      <span :class="['warning-level-tag', getWarningClass(row.warningLevel)]">{{
        row.warningLevel
      }}</span>
    </template>

    <!-- 影响点数量列插槽 -->
    <template #impactCount="{ row }">
      <span class="impact-count" @click="handleImpactClick(row)">{{
        row.impactCount
      }}</span>
    </template>
  </base-dialog>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { Close } from "@element-plus/icons-vue";
import {
  warningLevelOptions,
  regionOptions,
  isEndedOptions,
} from "../component/index.js";
import baseDialog from "../component/baseDialog.vue";

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

// 日期范围器
const dateRange = ref([]);

// 处理日期范围变化
const handleDateChange = (val) => {
  filterForm.value.dateRange = val;
};

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

// 筛选表单
const filterForm = ref({
  warningLevel: "",
  region: "",
  isEnded: "",
  dateRange: [],
});

// 预警等级选项
// 已从 index.js 导入

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

// 是否结束选项
// 已从 index.js 导入

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

// 表格列配置
const tableColumns = ref([
  { prop: "index", label: "序号", width: "" },
  {
    prop: "warningLevel",
    label: "预警等级",
    width: "",
    slot: "warningLevel",
  },
  { prop: "weatherType", label: "气象类型", width: "" },
  { prop: "region", label: "影响区域", width: "" },
  { prop: "warningTime", label: "生效时间", width: "" },
  { prop: "endTime", label: "失效时间", width: "" },
  {
    prop: "impactCount",
    label: "影响点数量",
    width: "",
    slot: "impactCount",
  },
]);

// 表格数据
const tableData = ref([
  {
    id: 1,
    index: 1,
    warningLevel: "红色预警",
    weatherType: "暴雨",
    region: "重庆市",
    warningTime: "2025-08-11 04:53:42",
    endTime: "2025-08-11 04:53:42",
    impactCount: 0,
  },
  {
    id: 2,
    index: 2,
    warningLevel: "橙色预警",
    weatherType: "暴雨",
    region: "万州区",
    warningTime: "2025-08-11 04:53:42",
    endTime: "2025-08-11 04:53:42",
    impactCount: 1,
  },
  {
    id: 3,
    index: 3,
    warningLevel: "黄色预警",
    weatherType: "大风",
    region: "沙坪坝区",
    warningTime: "2025-08-10 16:20:15",
    endTime: "2025-08-10 20:30:00",
    impactCount: 3,
  },
  {
    id: 4,
    index: 4,
    warningLevel: "蓝色预警",
    weatherType: "雷电",
    region: "渝中区",
    warningTime: "2025-08-09 09:15:30",
    endTime: "2025-08-09 12:00:00",
    impactCount: 2,
  },
]);
tableData.value.push(...tableData.value);
tableData.value.push(...tableData.value);
// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(36);

// 获取预警等级样式类
const getWarningClass = (level) => {
  const classMap = {
    红色预警: "warning-red",
    橙色预警: "warning-orange",
    黄色预警: "warning-yellow",
    蓝色预警: "warning-blue",
  };
  return classMap[level] || "";
};

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

// 点击影响点数量
const handleImpactClick = (item) => {
  emit("impactClick", 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-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;
      width: 210px !important;

      .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);
        }
      }
    }
  }
}

// 预警等级标签
.warning-level-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;

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

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

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

  &.warning-blue {
    background-color: rgba(64, 169, 255, 0.2);
    color: #40a9ff;
    border: 1px solid rgba(64, 169, 255, 0.4);
  }
}

// 影响点数量
.impact-count {
  color: #ff4d4f;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;

  &:hover {
    color: #ff7875;
    text-shadow: 0 0 8px rgba(255, 77, 79, 0.6);
  }
}
// 筛选区域
.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%);
      }
    }
  }
}

:deep(.el-range-editor.el-input__wrapper) {
  width: 240px !important;
  height: 30px !important;
  background-color: #122C46 !important;
}
</style>