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

<template>
  <div class="container">
    <div class="event-box">
      <div class="box-header">
        <div class="title-box">
          <div class="title"><i class="icon-speaker"/>重大事件信息</div>
        </div>
      </div>
      <div class="event-content">
        <div class="text1">{{ noticeBarState[0]?.event_title }}</div>
        <div class="text2">{{ noticeBarState[0]?.time }}</div>
      </div>
    </div>
    <div ref="searchBoxRef" class="search-box">
      <van-search
          v-model="keywords"
          placeholder="请输入位置信息"
          class="common-search"
          :left-icon="searchImg"
          show-action
          @search="onSearchKeyword"
      >
        <template #action>
          <div class="search-btn" @click="onSearchKeyword">搜索</div>
        </template>
      </van-search>
      <div v-show="showSearch" class="search-list">
        <div
            v-for="(item, index) in searchList"
            :key="index"
            class="item"
            @click="handleClickItem(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="content" style="margin-top: 0">
      <Map
          ref="mapRef"
          class="map"
          active-map="satellite"
          customMarker
          @onLoadCompleted="initData"
          @onMarkerClick="handleRowClick"
      />
    </div>
    <div class="content">
      <div class="card">
        <div class="card-header">
          <i class="icon-line"/>
          <div class="text">趋势统计</div>
        </div>
        <Chart :option="option1" style="height: 200px"/>
      </div>
    </div>
    <div class="content">
      <div class="card">
        <div class="card-header">
          <i class="icon-line"/>
          <div class="text">事件列表</div>
        </div>
        <div class="select-box" @click="showPicker = true">
          <div class="text1">年度</div>
          <div class="select-item">
            <div class="label">{{ yearLabel ? yearLabel : "请选择" }}</div>
            <i class="icon-down"/>
          </div>
        </div>
        <el-table
            :data="dataList"
            border
            table-layout="auto"
            @row-click="handleRowClick"
        >
          <el-table-column label="类别" prop="event_type" align="center">
            <template #default="scope">
              <dict-tag :options="mm_event_type" :value="scope.row.event_type"/>
            </template>
          </el-table-column>
          <el-table-column label="位置" prop="address" align="center"/>
          <el-table-column label="发生时间" prop="event_time" align="center"/>
          <el-table-column label="受伤人数" prop="injuries" align="center"/>
          <el-table-column label="死亡人数" prop="deaths" align="center"/>
        </el-table>
      </div>
    </div>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onPickerConfirm"
      />
    </van-popup>
    <van-popup v-model:show="showDetailPop" position="bottom">
      <div class="title">事件详情</div>
      <div class="unit-box">
        <div class="text">位置</div>
        <div class="info-content">{{ rowDetail.address }}</div>
      </div>
      <div class="unit-box">
        <div class="text">灾害类型</div>
        <div class="info-content">
          <dict-tag :options="mm_event_type" :value="rowDetail.event_type"/>
        </div>
      </div>
      <div class="unit-box">
        <div class="text">发生时间</div>
        <div class="info-content">{{ rowDetail.event_time }}</div>
      </div>
      <div class="unit-box">
        <div class="text">受伤人数</div>
        <div class="info-content">{{ rowDetail.injuries }}</div>
      </div>
      <div class="unit-box">
        <div class="text">死亡人数</div>
        <div class="info-content">{{ rowDetail.deaths }}</div>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts" setup name="cityEmergencyEvent">
import {ElTable, ElTableColumn} from "element-plus";
import Map from '@/components/Map/index2.vue';
import {getEvent} from "@/api/duty/eventing";
import {chartOption1} from "@/views/disasterRiskMonitor/chartOptions";
import searchImg from "@/assets/images/search.png";
import { iconList } from '@/components/Map/mapData';
import { getActiveEventList } from "@/api/event";

const proxy = getCurrentInstance()?.proxy;
const {mm_event_type} = toRefs<any>(
    proxy?.useDict('mm_event_type')
);
let mapRef = ref();
const noticeBarState = ref([]);
// 搜索
const searchBoxRef = ref();
const keywords = ref('');
let searchList = ref([]);
let showSearch = ref(false);
let yearLabel = ref("");
onClickOutside(searchBoxRef, event => {
  showSearch.value = false;
});
const onSearchKeyword = () => {
  searchList.value = []
  getSearch();
};
const handleClickItem = (row) => {
  showSearch.value = false;
  const dom = mapRef.value;
  const map = dom.getMap();
  const mapUtils = dom.getMapUtils();
  const center = row.lonlat.split(",").map(Number);
  const item = iconList['common'];
  mapUtils.addSearchMarker({
    icon: item.image,
    image: item.image,
    imageHover: item.image,
    size: item.size,
    lnglat: center
  });
  map.setCenter(center);
  map.setZoom(16);
};
const getSearch = async() => {
  const url = `http://api.tianditu.gov.cn/v2/search?postStr=${encodeURIComponent(JSON.stringify({
    keyWord: keywords.value,
    level: '18',
    mapBound: "73.33,8.33,135.08,53.55",
    queryType: '1',
    start: 0,
    count: 10
  }))}&tk=a8df87f1695d224d2679aa805c1268d9&type=query`
  const res = await fetch(url);
  if (res.status === 200) {
    const data = await res.json();
    searchList.value = data.pois
  }
  showSearch.value = true;
}
let dataList = ref([]);
const option1 = ref(chartOption1);
const queryParams = reactive({
  page: 1,
  page_size: 10,
  year: ''
});
let loading = ref(false);
let showPicker = ref(false);
const showDetailPop = ref(false);
let columns = reactive([
  {text: "2025年", value: "2025"},
  {text: "2024年", value: "2024"},
  {text: "2023年", value: "2023"},
  {text: "2022年", value: "2022"},
  {text: "2021年", value: "2021"}
]);
const getImageUrl = name => {
  return new URL(
      `../../assets/images/dotIcon/${name}`,
      import.meta.url
  ).href;
};
const onPickerConfirm = ({selectedOptions}) => {
  showPicker.value = false;
  yearLabel.value = selectedOptions[0].text;
  queryParams.year = selectedOptions[0].value;
  getList()
};
const getList = () => {
  loading.value = true;
  getEvent(queryParams).then(res => {
    dataList.value = res.data;
    dataList.value.forEach(item => {
      const icon = {
        image: getImageUrl("address.png"),
        size: [30, 32]
      }
      item.icon = icon.image;
      item.image = icon.image;
      item.imageHover = icon.image;
      item.size = icon.size;
      item.lnglat = [item.longitude, item.latitude];
    });
    const dom = mapRef.value;
    dom.addMarker(dataList.value);
  }).finally(() => {
    loading.value = false;
  });
};
const rowDetail = ref({
  address: '',
  event_type: '',
  event_time: '',
  injuries: '',
  deaths: ''
});
const handleRowClick = (row) => {
  setTimeout(() => {
    showDetailPop.value = true;
    rowDetail.value = row;
  }, 10)
};
const initData = () => {
  getActiveEventList().then(res => {
    if (res.data.event_id != '') {
      noticeBarState.value = [{
        event_id: res.data.event_id,
        time: res.data.event_time,
        event_title: res.data.event_description
      }];
    }
  });
  // noticeBarState.value = [
  //   {
  //     event_id: "",
  //     time: "2024-03-01 12:12:12",
  //     event_title: "茂名市茂南区xxx高速路口发生交通事故，今日凌晨三点在xx高速路口，由于突降暴雨路面湿滑，导致路面积水严重，不少路过车辆都减速慢行…"
  //   }
  // ];
  // 趋势统计
  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
  ];
  // 事件列表
  getList()
};
</script>

<style lang="scss" scoped>
.container {
  .map {
    width: 100%;
    height: 250px;
  }

  .event-box {
    position: relative;
    width: 375px;
    height: 117px;
    background: url("@/assets/images/disasterRiskMonitor/cityEmergencyEvent/box1.png") no-repeat;
    background-size: 100% 100%;
    box-shadow: 0 2px 4px 0 rgba(228, 240, 255, 1);

    .box-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 6px;

      .more {
        font-size: 12px;
        color: #2c81ff;
      }
    }

    .title-box {
      height: 30px;
      background-color: #ffffff; /* 背景颜色 */
      transform: skewX(-20deg); /* 斜切变形 */
      box-shadow: 0 2px 4px 0 rgba(250, 217, 97, 0.18);
      padding: 0 10px;
      display: flex;
      align-items: center;
      border-radius: 2px;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: -6px;
        transform: skewX(20deg);
        width: 11px;
        height: 27px;
        background: url("@/assets/images/disasterRiskMonitor/riverMonitor/thickness.png") no-repeat;
        background-size: 100% 100%;
      }

      .title {
        font-size: 14px;
        color: #ffaf00;
        transform: skewX(20deg);
        display: flex;
        align-items: center;

        .icon-speaker {
          display: inline-block;
          width: 16px;
          height: 16px;
          background: url("@/assets/images/disasterRiskMonitor/riverMonitor/speaker.png") no-repeat;
          background-size: 100% 100%;
          margin-right: 5px;
        }
      }
    }

    .event-content {
      padding: 0 10px;
    }

    .text1 {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      color: #414f64;
    }

    .text2 {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.45);
      text-align: right;
    }
  }
}

.search-box {
  position: relative;
  padding: 16px 16px 10px;
}
.search-list {
  position: absolute;
  top: 55px;
  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 #dce0ee;
  border-radius: 2px;
  padding: 0;

  :deep(.van-field__control) {
    &::placeholder {
      color: #c9cfd9;
    }
  }

  :deep(.van-search__content) {
    background-color: #ffffff;
    border: none !important;
  }

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

  .search-btn {
    font-size: 14px;
    color: #2c81ff;
  }
}

.card {
  background-color: #ffffff;
  border: 1px solid #eaedf7;
  border-radius: 4px;
  padding: 2px;
  margin-top: 16px;

  &:first-child {
    margin-top: 0;
  }

  .card-header {
    font-size: 16px;
    color: #414f64;
    font-weight: bold;
    line-height: 26px;
    padding: 11px 10px;
    display: flex;
    align-items: center;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);

    .icon-line {
      display: inline-block;
      width: 6px;
      height: 16px;
      background: url("@/assets/images/line.jpg") no-repeat;
      background-size: 100% 100%;
      margin-right: 3px;
    }
  }
}

.content {
  padding: 0 16px;
  margin-top: 16px;
}

.select-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
  padding-right: 20px;

  .text1 {
    font-size: 14px;
    color: #414f64;
    margin-right: 5px;
  }

  .select-item {
    background-color: #f4f7fc;
    padding: 5px;
    min-width: 92px;
    height: 32px;
    border-raduis: 4px;
    font-size: 14px;
    color: #414f64;
    display: flex;
    align-items: center;

    .label {
      flex: 1;
    }

    .icon-down {
      flex-shrink: 0;
      display: inline-block;
      width: 14px;
      height: 14px;
      background: url("@/assets/images/down.png") no-repeat;
      background-size: 100% 100%;
      margin-left: 5px;
    }
  }
}

/* 移除表单容器背景 */
:deep(.van-cell-group) {
  background: transparent !important;
}

/* 移除每个表单项的背景 */
:deep(.van-cell) {
  background: transparent !important;
}

/* 移除内嵌容器的边距和阴影 */
:deep(.van-cell-group--inset) {
  margin: 0;
  box-shadow: none;

  &::after {
    border: none !important;
  }
}

:deep(.van-field--disabled) {
  .van-field__label,
  .van-field__control {
    color: rgba(12, 12, 12, 0.93) !important;
    -webkit-text-fill-color: #4a4848 !important;
  }

  /* 移除禁用蒙层 */
  .van-field__disabled-mask {
    display: none !important;
  }
}

.title {
  font-size: 18px;
  font-weight: bold;
  line-height: 32px;
  width: 100%;
  text-align: center;
  margin-bottom: 8px;
  margin-top: 8px;
}

.unit-box {
  display: flex;
  background-color: #ffffff;
  min-height: 35px;
  width: 100%;
  border-bottom: 1px solid #f4f5f7;
  padding: 10px 15px;
}

.text {
  color: grey;
  width: 64px;
  flex-shrink: 0;
  margin-right: 10px;
}

.info-content {
  word-break: break-all;
}
</style>