|
@@ -1,28 +1,37 @@
|
|
|
<template>
|
|
|
- <van-floating-panel v-model:height="height" :anchors="anchors" :content-draggable="false">
|
|
|
+ <van-floating-panel
|
|
|
+ v-model:height="height"
|
|
|
+ :anchors="anchors"
|
|
|
+ :content-draggable="false"
|
|
|
+ >
|
|
|
<van-tabs v-model:active="active">
|
|
|
<van-tab title="救援队伍">
|
|
|
<van-search
|
|
|
- v-model="queryParams1.query.keyword"
|
|
|
- class="common-search"
|
|
|
- :left-icon="searchImg"
|
|
|
- :right-icon="closeImg"
|
|
|
- :clearable="false"
|
|
|
- placeholder="请输入搜索内容"
|
|
|
- @search="onSearchKeyword1"
|
|
|
- @click-right-icon.stop="onSearchCancel1"
|
|
|
+ v-model="queryParams1.query.keyword"
|
|
|
+ class="common-search"
|
|
|
+ :left-icon="searchImg"
|
|
|
+ :right-icon="closeImg"
|
|
|
+ :clearable="false"
|
|
|
+ placeholder="请输入搜索内容"
|
|
|
+ @search="onSearchKeyword1"
|
|
|
+ @click-right-icon.stop="onSearchCancel1"
|
|
|
/>
|
|
|
<van-list
|
|
|
- v-model:loading="loading1"
|
|
|
- v-model:error="error1"
|
|
|
- error-text="请求失败,点击重新加载"
|
|
|
- :finished="finished1"
|
|
|
- finished-text="没有更多了"
|
|
|
- :immediate-check="false"
|
|
|
- class="list"
|
|
|
- @load="getList"
|
|
|
+ v-model:loading="loading1"
|
|
|
+ v-model:error="error1"
|
|
|
+ error-text="请求失败,点击重新加载"
|
|
|
+ :finished="finished1"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ :immediate-check="false"
|
|
|
+ class="list"
|
|
|
+ @load="getList"
|
|
|
>
|
|
|
- <div v-for="(item, index) in dataList1" :key="index" :class="!!item.checked ? 'item item-active' : 'item'" @click="handleClickItem(item)">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in dataList1"
|
|
|
+ :key="index"
|
|
|
+ :class="!!item.checked ? 'item item-active' : 'item'"
|
|
|
+ @click="handleClickItem(item)"
|
|
|
+ >
|
|
|
<div class="text-box">
|
|
|
<div class="text1">{{ item.name }}</div>
|
|
|
<div class="text2">{{ item.address }}</div>
|
|
@@ -33,26 +42,31 @@
|
|
|
</van-tab>
|
|
|
<van-tab title="应急物资">
|
|
|
<van-search
|
|
|
- v-model="queryParams2.query.keyword"
|
|
|
- class="common-search"
|
|
|
- :left-icon="searchImg"
|
|
|
- :right-icon="closeImg"
|
|
|
- :clearable="false"
|
|
|
- placeholder="请输入搜索内容"
|
|
|
- @search="onSearchKeyword2"
|
|
|
- @click-right-icon.stop="onSearchCancel2"
|
|
|
+ v-model="queryParams2.query.keyword"
|
|
|
+ class="common-search"
|
|
|
+ :left-icon="searchImg"
|
|
|
+ :right-icon="closeImg"
|
|
|
+ :clearable="false"
|
|
|
+ placeholder="请输入搜索内容"
|
|
|
+ @search="onSearchKeyword2"
|
|
|
+ @click-right-icon.stop="onSearchCancel2"
|
|
|
/>
|
|
|
<van-list
|
|
|
- v-model:loading="loading2"
|
|
|
- v-model:error="error2"
|
|
|
- error-text="请求失败,点击重新加载"
|
|
|
- :finished="finished2"
|
|
|
- finished-text="没有更多了"
|
|
|
- :immediate-check="false"
|
|
|
- class="list"
|
|
|
- @load="getList2"
|
|
|
+ v-model:loading="loading2"
|
|
|
+ v-model:error="error2"
|
|
|
+ error-text="请求失败,点击重新加载"
|
|
|
+ :finished="finished2"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ :immediate-check="false"
|
|
|
+ class="list"
|
|
|
+ @load="getList2"
|
|
|
>
|
|
|
- <div v-for="(item, index) in dataList2" :key="index" :class="!!item.checked ? 'item item-active' : 'item'" @click="handleClickItem(item)">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in dataList2"
|
|
|
+ :key="index"
|
|
|
+ :class="!!item.checked ? 'item item-active' : 'item'"
|
|
|
+ @click="handleClickItem(item)"
|
|
|
+ >
|
|
|
<div class="text-box">
|
|
|
<div class="text1">{{ item.name }}</div>
|
|
|
<div class="text2">{{ item.address }}</div>
|
|
@@ -66,33 +80,41 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup name="MaterialManage">
|
|
|
-import {computed, inject, onMounted, reactive, ref} from "vue";
|
|
|
+import { computed, inject, onMounted, reactive, ref } from "vue";
|
|
|
import searchImg from "@/assets/images/search.png";
|
|
|
import closeImg from "@/assets/images/close.png";
|
|
|
-import {getRescueMateriaWarehouseList, getRescueUnitsList} from "@/api/globalMap";
|
|
|
-import {getImageUrl} from "@/components/Map/mapData";
|
|
|
+import {
|
|
|
+ getRescueMateriaWarehouseList,
|
|
|
+ getRescueUnitsList
|
|
|
+} from "@/api/globalMap";
|
|
|
+import { getImageUrl } from "@/components/Map/mapData";
|
|
|
|
|
|
-const emits = defineEmits(['update:modelValue']);
|
|
|
+const emits = defineEmits(["update:modelValue"]);
|
|
|
const props = defineProps({
|
|
|
modelValue: Number
|
|
|
});
|
|
|
const height = computed({
|
|
|
get() {
|
|
|
- return props.modelValue
|
|
|
+ return props.modelValue;
|
|
|
},
|
|
|
set(newValue) {
|
|
|
- emits('update:modelValue', newValue);
|
|
|
+ emits("update:modelValue", newValue);
|
|
|
}
|
|
|
});
|
|
|
-const getMapUtils = inject('getMapUtils');
|
|
|
-const anchors = ref([0, 300, window.innerHeight * 0.6, window.innerHeight * 0.95]);
|
|
|
+const getMapUtils = inject("getMapUtils");
|
|
|
+const anchors = ref([
|
|
|
+ 0,
|
|
|
+ 300,
|
|
|
+ window.innerHeight * 0.6,
|
|
|
+ window.innerHeight * 0.95
|
|
|
+]);
|
|
|
let markers = ref([]);
|
|
|
-let active = ref('1');
|
|
|
+let active = ref("1");
|
|
|
const queryParams1 = reactive({
|
|
|
current: 0,
|
|
|
size: 15,
|
|
|
query: {
|
|
|
- keyword: ''
|
|
|
+ keyword: ""
|
|
|
}
|
|
|
});
|
|
|
const total1 = ref(0);
|
|
@@ -100,25 +122,26 @@ let loading1 = ref(false);
|
|
|
let error1 = ref(false);
|
|
|
let finished1 = ref(false);
|
|
|
let dataList1 = ref([]);
|
|
|
-const onSearchKeyword1 = (val) => {
|
|
|
+const onSearchKeyword1 = val => {
|
|
|
queryParams1.query.keyword = val;
|
|
|
queryParams1.current = 0;
|
|
|
getList();
|
|
|
};
|
|
|
const onSearchCancel1 = () => {
|
|
|
- queryParams1.query.keyword = '';
|
|
|
+ queryParams1.query.keyword = "";
|
|
|
queryParams1.current = 0;
|
|
|
getList();
|
|
|
-}
|
|
|
+};
|
|
|
const getList = () => {
|
|
|
queryParams1.current++;
|
|
|
+ loading1.value = false;
|
|
|
getRescueUnitsList(queryParams1).then((res: any) => {
|
|
|
const items = res.rows || [];
|
|
|
total1.value = res.total;
|
|
|
if (queryParams1.current == 1) {
|
|
|
dataList1.value = [];
|
|
|
}
|
|
|
- items.forEach((val) => {
|
|
|
+ items.forEach(val => {
|
|
|
dataList1.value.push(val);
|
|
|
});
|
|
|
if (queryParams1.size * queryParams1.current >= total1.value) {
|
|
@@ -126,14 +149,14 @@ const getList = () => {
|
|
|
} else {
|
|
|
finished1.value = false;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
const queryParams2 = reactive({
|
|
|
current: 0,
|
|
|
size: 15,
|
|
|
query: {
|
|
|
- keyword: ''
|
|
|
+ keyword: ""
|
|
|
}
|
|
|
});
|
|
|
const total2 = ref(0);
|
|
@@ -141,25 +164,26 @@ let loading2 = ref(false);
|
|
|
let error2 = ref(false);
|
|
|
let finished2 = ref(false);
|
|
|
let dataList2 = ref([]);
|
|
|
-const onSearchKeyword2 = (val) => {
|
|
|
+const onSearchKeyword2 = val => {
|
|
|
queryParams2.query.keyword = val;
|
|
|
queryParams2.current = 0;
|
|
|
getList2();
|
|
|
};
|
|
|
const onSearchCancel2 = () => {
|
|
|
- queryParams2.query.keyword = '';
|
|
|
+ queryParams2.query.keyword = "";
|
|
|
queryParams2.current = 0;
|
|
|
getList2();
|
|
|
-}
|
|
|
+};
|
|
|
const getList2 = () => {
|
|
|
queryParams2.current++;
|
|
|
+ loading2.value = false;
|
|
|
getRescueMateriaWarehouseList(queryParams2).then((res: any) => {
|
|
|
const items = res.rows || [];
|
|
|
total2.value = res.total;
|
|
|
if (queryParams2.current == 1) {
|
|
|
dataList2.value = [];
|
|
|
}
|
|
|
- items.forEach((val) => {
|
|
|
+ items.forEach(val => {
|
|
|
dataList2.value.push(val);
|
|
|
});
|
|
|
if (queryParams2.size * queryParams2.current >= total2.value) {
|
|
@@ -167,16 +191,16 @@ const getList2 = () => {
|
|
|
} else {
|
|
|
finished2.value = false;
|
|
|
}
|
|
|
- })
|
|
|
-}
|
|
|
-const handleClickItem = (item) => {
|
|
|
+ });
|
|
|
+};
|
|
|
+const handleClickItem = item => {
|
|
|
item.checked = !item.checked;
|
|
|
let points = [];
|
|
|
- const dotIcon1 = getImageUrl('common.png');
|
|
|
- const dotIcon2 = getImageUrl('common_hover.png');
|
|
|
- const dotIcon3 = getImageUrl('28_emergencytransportresources.png');
|
|
|
- const dotIcon4 = getImageUrl('28_emergencytransportresources_hover.png');
|
|
|
- dataList1.value.forEach((item2) => {
|
|
|
+ const dotIcon1 = getImageUrl("common.png");
|
|
|
+ const dotIcon2 = getImageUrl("common_hover.png");
|
|
|
+ const dotIcon3 = getImageUrl("28_emergencytransportresources.png");
|
|
|
+ const dotIcon4 = getImageUrl("28_emergencytransportresources_hover.png");
|
|
|
+ dataList1.value.forEach(item2 => {
|
|
|
if (!!item2.checked) {
|
|
|
points.push({
|
|
|
icon: dotIcon1,
|
|
@@ -188,8 +212,8 @@ const handleClickItem = (item) => {
|
|
|
latitude: item2.latitude
|
|
|
});
|
|
|
}
|
|
|
- })
|
|
|
- dataList2.value.forEach((item2) => {
|
|
|
+ });
|
|
|
+ dataList2.value.forEach(item2 => {
|
|
|
if (!!item2.checked) {
|
|
|
points.push({
|
|
|
icon: dotIcon3,
|
|
@@ -201,13 +225,13 @@ const handleClickItem = (item) => {
|
|
|
latitude: item2.latitude
|
|
|
});
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
getMapUtils().addMarker(points);
|
|
|
-}
|
|
|
+};
|
|
|
onMounted(() => {
|
|
|
getList();
|
|
|
getList2();
|
|
|
-})
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -235,7 +259,7 @@ onMounted(() => {
|
|
|
display: inline-block;
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
- background: url('@/assets/images/map/position1.png') no-repeat;
|
|
|
+ background: url("@/assets/images/map/position1.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
@@ -244,5 +268,4 @@ onMounted(() => {
|
|
|
border: 1px solid #cef0f5;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
</style>
|