|
@@ -1,63 +1,69 @@
|
|
|
<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"
|
|
|
+ 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"
|
|
|
+ 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"
|
|
|
+ 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)"
|
|
|
+ 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" />
|
|
|
+ <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;" />
|
|
|
+ <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"
|
|
|
+ v-model="yearLabel"
|
|
|
+ is-link
|
|
|
+ readonly
|
|
|
+ label="年度"
|
|
|
+ placeholder="请选择"
|
|
|
+ @click="showPicker = true"
|
|
|
/>
|
|
|
- <el-table :data="detailsData.dataList" border table-layout='auto'>
|
|
|
+ <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" />
|
|
@@ -67,9 +73,9 @@
|
|
|
</div>
|
|
|
<van-popup v-model:show="showPicker" round position="bottom">
|
|
|
<van-picker
|
|
|
- :columns="columns"
|
|
|
- @cancel="showPicker = false"
|
|
|
- @confirm="onPickerConfirm"
|
|
|
+ :columns="columns"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ @confirm="onPickerConfirm"
|
|
|
/>
|
|
|
</van-popup>
|
|
|
</div>
|
|
@@ -77,15 +83,15 @@
|
|
|
|
|
|
<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 { 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";
|
|
|
+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({
|
|
@@ -93,9 +99,7 @@ const noticeBarState = reactive({
|
|
|
event_id: "",
|
|
|
event_title: ""
|
|
|
});
|
|
|
-const handleNoticeBar = () => {
|
|
|
-
|
|
|
-};
|
|
|
+const handleNoticeBar = () => {};
|
|
|
// 搜索
|
|
|
const searchBoxRef = ref();
|
|
|
let showSearch = ref();
|
|
@@ -106,10 +110,10 @@ let finished = ref(false);
|
|
|
const queryParams = reactive({
|
|
|
page: 0,
|
|
|
page_size: 10,
|
|
|
- year: '',
|
|
|
- keywords: ''
|
|
|
+ year: "",
|
|
|
+ keywords: ""
|
|
|
});
|
|
|
-let yearLabel = ref('');
|
|
|
+let yearLabel = ref("");
|
|
|
const searchList = ref([]);
|
|
|
onClickOutside(searchBoxRef, event => {
|
|
|
showSearch.value = false;
|
|
@@ -120,31 +124,31 @@ const getSearchList = () => {
|
|
|
}
|
|
|
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;
|
|
|
+ .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) => {
|
|
|
+const onSearchKeyword = val => {
|
|
|
queryParams.keywords = val;
|
|
|
queryParams.page = 0;
|
|
|
getSearchList();
|
|
@@ -167,21 +171,21 @@ 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' }
|
|
|
-])
|
|
|
+ { text: "2024年", value: "2024" },
|
|
|
+ { text: "2023年", value: "2023" },
|
|
|
+ { text: "2022年", value: "2022" },
|
|
|
+ { text: "2021年", value: "2021" }
|
|
|
+]);
|
|
|
|
|
|
-const onPickerConfirm = ({selectedOptions}) => {
|
|
|
+const onPickerConfirm = ({ selectedOptions }) => {
|
|
|
showPicker.value = false;
|
|
|
yearLabel.value = selectedOptions[0].text;
|
|
|
queryParams.year = selectedOptions[0].value;
|
|
|
-}
|
|
|
+};
|
|
|
const initData = () => {
|
|
|
// 通知栏数据
|
|
|
getActiveEventList().then(res => {
|
|
@@ -192,13 +196,110 @@ const initData = () => {
|
|
|
}
|
|
|
});
|
|
|
// 趋势统计
|
|
|
- option1.value.xAxis[0].data = ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-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];
|
|
|
+ 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-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(() => {
|