yjxp-web/src/views/disasterRiskMonitor/warningSituation.vue

<template>
  <div class="container">
    <van-image :src="detailsData.img" />
    <el-table :data="detailsData.dataList" border table-layout="auto">
      <el-table-column prop="type" align="center">
        <template #header>
          <div class="table-line" @click="showTypePicker = true">
            <div>{{ labelData.type ? labelData.type : "类型" }}</div>
            <i class="icon-down" />
          </div>
        </template>
        <template #default="scope">
          <img
            v-if="scope.row.level === '1'"
            :src="'src/assets/images/disasterRiskMonitor/warningSituation/icon5.png'"
            alt="blue alert"
            class="alert-icon"
          />
          <img
            v-else-if="scope.row.level === '2'"
            :src="'src/assets/images/disasterRiskMonitor/warningSituation/icon2.png'"
            alt="yellow alert"
            class="alert-icon"
          />
          <img
            v-else-if="scope.row.level === '3'"
            :src="'src/assets/images/disasterRiskMonitor/warningSituation/icon3.png'"
            alt="orange alert"
            class="alert-icon"
          />
          <img
            v-else-if="scope.row.level === '4'"
            :src="'src/assets/images/disasterRiskMonitor/warningSituation/icon4.png'"
            alt="red alert"
            class="alert-icon"
          />
          <span v-else>无预警</span>
        </template>
      </el-table-column>
      <el-table-column prop="level" align="center">
        <template #header>
          <div class="table-line" @click="showLevelPicker = true">
            <div>{{ labelData.level ? labelData.level : "等级" }}</div>
            <i class="icon-down" />
          </div>
        </template>
        <template #default="scope">
          <div :class="getClass(scope.row.level)">
            {{ getLabel(scope.row.level) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="地区" prop="area" align="center" />
      <el-table-column label="发布时间" prop="publicTime" align="center" />
    </el-table>
    <van-popup v-model:show="showTypePicker" round position="bottom">
      <van-picker
        :columns="typeColumns"
        @cancel="showTypePicker = false"
        @confirm="onSelectTypeConfirm"
      />
    </van-popup>
    <van-popup v-model:show="showLevelPicker" round position="bottom">
      <van-picker
        :columns="levelColumns"
        @cancel="showLevelPicker = false"
        @confirm="onSelectLevelConfirm"
      />
    </van-popup>
  </div>
</template>

<script lang="ts" setup name="warningSituation">
import { onMounted, reactive, ref } from "vue";
import { ElTable, ElTableColumn } from "element-plus";

const labelData = reactive({
  type: "",
  level: "",
  area: ""
});
const queryParams = reactive({
  type: "",
  level: "",
  area: ""
});
const detailsData = ref({
  img: "",
  dataList: []
});
const getClass = (data: string) => {
  let res = "text";
  if (data === "1") {
    res = "text text-blue";
  } else if (data === "2") {
    res = "text text-yellow";
  } else if (data === "3") {
    res = "text text-orange";
  } else if (data === "4") {
    res = "text text-red";
  }
  return res;
};
const getLabel = (data: string) => {
  let res = "无预警";
  if (data === "1") {
    res = "蓝色";
  } else if (data === "2") {
    res = "黄色";
  } else if (data === "3") {
    res = "橙色";
  } else if (data === "4") {
    res = "红色";
  }
  return res;
};
const initData = () => {
  detailsData.value = {
    img: "src/assets/images/disasterRiskMonitor/warningSituation/icon1.png",
    dataList: [
      {
        area: "电白",
        type: "1",
        level: "2",
        publicTime: "2024-10-28 13:32:01"
      },
      {
        area: "高新",
        type: "1",
        level: "2",
        publicTime: "2024-10-28 14:42:21"
      },
      {
        area: "茂南",
        type: "1",
        level: "0",
        publicTime: "2024-10-28 15:13:13"
      },
      {
        area: "滨海",
        type: "1",
        level: "2",
        publicTime: "2024-10-28 16:27:21"
      },
      {
        area: "化州",
        type: "1",
        level: "1",
        publicTime: "2024-10-28 17:31:55"
      },
      {
        area: "高州",
        type: "1",
        level: "3",
        publicTime: "2024-10-28 17:49:01"
      },
      { area: "信宜", type: "1", level: "3", publicTime: "2024-10-28 18:09:11" }
    ]
  };
};
// 获取类型标签
const getTypeLabel = (typeCode: string) => {
  const typeItem = typeColumns.value.find(item => item.value === typeCode);
  return typeItem ? typeItem.text : "未知类型";
};
const typeColumns = ref([
  { text: "全部", value: "" },
  { text: "森林火险", value: "1" }
]);
let showTypePicker = ref(false);
const onSelectTypeConfirm = ({ selectedOptions }) => {
  showTypePicker.value = false;
  labelData.type = selectedOptions[0].text;
  queryParams.type = selectedOptions[0].value;
  initData();
};

const levelColumns = ref([
  { text: "全部", value: "" },
  { text: "无预警", value: "0" },
  { text: "蓝色", value: "1" },
  { text: "黄色", value: "2" },
  { text: "橘色", value: "3" },
  { text: "红色", value: "4" }
]);
let showLevelPicker = ref(false);
const onSelectLevelConfirm = ({ selectedOptions }) => {
  showLevelPicker.value = false;
  labelData.level = selectedOptions[0].text;
  queryParams.level = selectedOptions[0].value;
  initData();
};

onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  padding: 0;
  .table-line {
    display: flex;
    align-items: center;
    font-size: 14px;
    .icon-down {
      margin-left: 3px;
      display: inline-block;
      flex-shrink: 0;
      width: 14px;
      height: 14px;
      background: url("@/assets/images/down.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .text {
    font-size: 14px;
    color: #a3a7ad;
  }
  .text-blue {
    color: #2c81ff;
  }
  .text-yellow {
    color: #ffd700;
  }
  .text-orange {
    color: #ffaf00;
  }
  .text-red {
    color: #ec2734;
  }
}
.alert-icon {
  width: 36px;
  height: 24px;
}
</style>