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

<template>
  <div class="container">
    <van-notice-bar
      v-show="noticeBarState.show"
      :left-icon="noticeImg"
      scrollable
      background="linear-gradient(180deg, #F3F7FF 0%, #FDFEFF 100%)"
      mode="closeable"
      :text="noticeBarState.event_title"
      class="notice"
      @click="handleNoticeBar"
    />
    <div ref="searchBoxRef" class="search-box">
      <van-search
        v-model="queryParams.keywords"
        class="common-search"
        :left-icon="searchImg"
        :right-icon="closeImg"
        :clearable="false"
        placeholder="请输入位置信息"
        @search="onSearchKeyword"
        @click-right-icon.stop="onSearchCancel"
      />
      <div v-show="showSearch" class="search-list">
        <van-list
          v-model:loading="loading"
          v-model:error="error"
          error-text="请求失败，点击重新加载"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="getSearchList"
        >
          <div
            v-for="(item, index) in searchList"
            :key="index"
            class="item"
            @click="handleClickItem(item)"
          >
            {{ item.name }}
          </div>
        </van-list>
      </div>
    </div>
    <Map
      ref="mapRef"
      class="map"
      active-map="satellite"
      :point-type="pointType"
      :event-details="eventDetails"
    />
    <div class="box">
      <div class="box-title">趋势统计</div>
      <Chart :option="option1" style="height: 200px" />
    </div>
    <div class="box">
      <div class="box-title">事件列表</div>
      <van-field
        v-model="yearLabel"
        is-link
        readonly
        label="年度"
        placeholder="请选择"
        @click="showPicker = true"
      />
      <el-table :data="detailsData.dataList" border table-layout="auto">
        <el-table-column label="类别" prop="data1" align="center" />
        <el-table-column label="位置" prop="data2" align="center" />
        <el-table-column label="发生时间" prop="data3" align="center" />
        <el-table-column label="受伤人数" prop="data4" align="center" />
        <el-table-column label="死亡人数" prop="data5" align="center" />
      </el-table>
    </div>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onPickerConfirm"
      />
    </van-popup>
  </div>
</template>

<script lang="ts" setup name="cityEmergencyEvent">
import noticeImg from "@/assets/images/notice.png";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { getActiveEventList } from "@/api/event";
import searchImg from "@/assets/images/search.png";
import closeImg from "@/assets/images/close.png";
import { getPointInfoComprehensiveSearch } from "@/api/globalMap";
import { onClickOutside } from "@vueuse/core";
import { chartOption1 } from "@/views/disasterRiskMonitor/chartOptions";
import { ElTable, ElTableColumn } from "element-plus";

const router = useRouter();
const noticeBarState = reactive({
  show: false,
  event_id: "",
  event_title: ""
});
const handleNoticeBar = () => {};
// 搜索
const searchBoxRef = ref();
let showSearch = ref();
const total = ref(0);
let loading = ref(false);
let error = ref(false);
let finished = ref(false);
const queryParams = reactive({
  page: 0,
  page_size: 10,
  year: "",
  keywords: ""
});
let yearLabel = ref("");
const searchList = ref([]);
onClickOutside(searchBoxRef, event => {
  showSearch.value = false;
});
const getSearchList = () => {
  if (!queryParams.keywords) {
    return (loading.value = false);
  }
  queryParams.page++;
  getPointInfoComprehensiveSearch(queryParams)
    .then(res => {
      const items = res.data.list || [];
      total.value = res.data.total;
      if (queryParams.page == 1) {
        searchList.value = [];
      }
      items.forEach(val => {
        searchList.value.push(val);
      });
      if (queryParams.page_size * queryParams.page >= total.value) {
        finished.value = true;
      } else {
        finished.value = false;
      }
      showSearch.value = true;
    })
    .catch(() => {
      error.value = true;
      finished.value = false;
    })
    .finally(() => {
      loading.value = false;
    });
};
const onSearchKeyword = val => {
  queryParams.keywords = val;
  queryParams.page = 0;
  getSearchList();
};
const onSearchCancel = () => {
  showSearch.value = false;
  queryParams.keywords = "";
  queryParams.page = 0;
  finished.value = false;
  searchList.value = [];
};
const handleClickItem = item => {
  showSearch.value = false;
  queryParams.keywords = "";
  queryParams.page = 0;
  finished.value = false;
  searchList.value = [];
};
let pointType = ref([]);
let eventDetails = ref({});
let detailsData = ref({
  dataList: []
});
const option1 = ref(chartOption1);
let showPicker = ref(false);
let columns = reactive([
  { text: "2024年", value: "2024" },
  { text: "2023年", value: "2023" },
  { text: "2022年", value: "2022" },
  { text: "2021年", value: "2021" }
]);

const onPickerConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  yearLabel.value = selectedOptions[0].text;
  queryParams.year = selectedOptions[0].value;
};
const initData = () => {
  // 通知栏数据
  getActiveEventList().then(res => {
    if (res.data.event_id != noticeBarState.event_id) {
      noticeBarState.show = true;
      noticeBarState.event_id = res.data.event_id;
      noticeBarState.event_title = res.data.event_title;
    }
  });
  // 趋势统计
  option1.value.xAxis[0].data = [
    "2024-01",
    "2024-02",
    "2024-03",
    "2024-04",
    "2024-05",
    "2024-06"
  ];
  option1.value.series[0].data = [
    502.84, 205.97, 332.79, 281.55, 398.35, 214.02
  ];
  option1.value.series[1].data = [
    281.55, 398.35, 214.02, 179.55, 289.57, 356.14
  ];
  // 事件列表
  detailsData.value.dataList = [
    {
      data1: "暴雨引发山体滑坡",
      data2: "茂名市电白区黄岭镇石头村",
      data3: "2024-12-14 12:12:13",
      data4: 1,
      data5: 0
    },
    {
      data1: "台风",
      data2: "茂名市茂南区羊角镇",
      data3: "2024-10-07 08:00:00",
      data4: 2,
      data5: 0
    },
    {
      data1: "洪水",
      data2: "茂名市高州市根子镇",
      data3: "2024-06-15 17:30:00",
      data4: 5,
      data5: 0
    },
    // 2023年的数据
    {
      data1: "地震",
      data2: "茂名市信宜市池洞镇",
      data3: "2023-11-22 21:45:00",
      data4: 3,
      data5: 0
    },
    {
      data1: "暴雨",
      data2: "茂名市化州市同庆镇",
      data3: "2023-08-03 14:20:00",
      data4: 4,
      data5: 0
    },
    {
      data1: "台风",
      data2: "茂名市电白区观珠镇",
      data3: "2023-05-12 10:10:00",
      data4: 2,
      data5: 0
    },
    // 新增2021年的数据
    {
      data1: "暴雨",
      data2: "茂名市茂南区公馆镇",
      data3: "2021-11-05 11:00:00",
      data4: 2,
      data5: 0
    },
    {
      data1: "台风",
      data2: "茂名市电白区麻岗镇",
      data3: "2021-09-15 15:00:00",
      data4: 1,
      data5: 0
    },
    {
      data1: "洪水",
      data2: "茂名市高州市石鼓镇",
      data3: "2021-07-25 17:00:00",
      data4: 3,
      data5: 0
    },
    {
      data1: "山体滑坡",
      data2: "茂名市化州市林尘镇",
      data3: "2021-05-20 09:00:00",
      data4: 0,
      data5: 0
    },
    {
      data1: "暴雨",
      data2: "茂名市电白区树仔镇",
      data3: "2021-03-10 14:00:00",
      data4: 1,
      data5: 0
    },
    // 原来的2021年数据
    {
      data1: "暴雨",
      data2: "茂名市茂南区袂花镇",
      data3: "2021-09-28 19:30:00",
      data4: 3,
      data5: 0
    }
  ];
};

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

<style lang="scss" scoped>
.container {
  .map {
    width: 100%;
    height: 250px;
  }
}
.search-box {
  margin-bottom: 10px;
}
.search-list {
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 9;
  width: 100%;
  height: calc(100vh - 400px);
  overflow-y: auto;
  background-color: #ffffff;
  border-top: 1px solid #eeeeee;
  .item {
    padding: 8px 15px;
    border-bottom: 1px solid #eeeeee;
  }
}
.common-search {
  border: 1px solid #ededed;
  :deep(.van-field__left-icon) {
    .van-icon__image {
      width: 12px;
      height: 12px;
    }
  }
  :deep(.van-field__right-icon) {
    width: 30px;
    height: 30px;
    padding: 0;
    .van-icon__image {
      width: 30px;
      height: 30px;
    }
  }
}
.box {
  background-color: #fff;
  padding: 10px;
  .box-title {
    font-size: 18px;
    font-weight: bold;
  }
}
</style>