移动指挥 资源

src/api/globalMap/index.ts

@@ -96,3 +96,20 @@ export const getVideoInfo = (params) => {
     data: params
   });
 };
+// 获取救援队伍
+export const getRescueUnitsList = (params) => {
+  return request({
+    url: '/api/gateway/v2/get_rescue_units_list',
+    method: 'post',
+    data: params
+  });
+}
+// 获取应急物资
+export const getRescueMateriaWarehouseList = (params) => {
+  return request({
+    url: '/api/gateway/v2/get_rescue_materia_warehouse_list_1',
+    method: 'post',
+    data: params
+  });
+}
+

src/components/Map/index.vue

@@ -72,7 +72,7 @@ let AMap, map, scale;
 // 鼠标绘制工具
 const drawTool = useDrawTool();
 // 初始化地图
-const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, getMarkers, getScale, showInfo, hideInfo, handleHover } = useAMap({
+const mapUtils = useAMap({
   key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
   pitch: mapState.isThreeDimensional ? 45 : 0,
@@ -147,6 +147,21 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
     }
   }
 });
+const {
+  getAMap,
+  getMap,
+  switchMap,
+  addMarker,
+  addSearchMarker,
+  clearMarker,
+  getMarkers,
+  getScale,
+  showInfo,
+  hideInfo,
+  handleHover,
+  creatMask,
+  trackPlayback
+} = { ...mapUtils };
 const handlePointDetails = (data) => {
   let methodList = {
     '1': getEmergencyExpertDetails,
@@ -324,8 +339,10 @@ watch(() => props.eventDetails, () => {
 }, {
   deep: true
 })
-
-defineExpose({ addMarker, addSearchMarker, getMarkers, clearMarker, getMap, drawTool, handleHover });
+const getMapUtils = () => {
+  return mapUtils;
+};
+defineExpose({ getMapUtils, addMarker, addSearchMarker, getMarkers, clearMarker, getMap, drawTool, handleHover });
 const handleResize = () => {
   map.resize();
 };

src/views/mobileControl/MaterialManage.vue

@@ -0,0 +1,243 @@
+<template>
+  <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"
+        />
+        <van-list
+            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 class="text-box">
+              <div class="text1">{{ item.name }}</div>
+              <div class="text2">{{ item.address }}</div>
+            </div>
+            <i class="icon-position" />
+          </div>
+        </van-list>
+      </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"
+        />
+        <van-list
+            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 class="text-box">
+              <div class="text1">{{ item.name }}</div>
+              <div class="text2">{{ item.address }}</div>
+            </div>
+            <i class="icon-position" />
+          </div>
+        </van-list>
+      </van-tab>
+    </van-tabs>
+  </van-floating-panel>
+</template>
+
+<script lang="ts" setup name="MaterialManage">
+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";
+
+const emits = defineEmits(['update:modelValue']);
+const props = defineProps({
+  modelValue: String
+});
+const height = computed({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emits('update:modelValue', newValue);
+  }
+});
+const getMapUtils = inject('getMapUtils');
+const anchors = ref([0, 300, window.innerHeight * 0.6, window.innerHeight * 0.95]);
+let markers = ref([]);
+let active = ref('1');
+const queryParams1 = reactive({
+  current: 0,
+  size: 15,
+  query: {
+    keyword: ''
+  }
+});
+const total1 = ref(0);
+let loading1 = ref(false);
+let error1 = ref(false);
+let finished1 = ref(false);
+let dataList1 = ref([]);
+const onSearchKeyword1 = (val) => {
+  queryParams1.query.keyword = val;
+  queryParams1.current = 0;
+  getList();
+};
+const onSearchCancel1 = () => {
+  queryParams1.query.keyword = '';
+  queryParams1.current = 0;
+  getList();
+}
+const getList = () => {
+  queryParams1.current++;
+  getRescueUnitsList(queryParams1).then((res: any) => {
+    const items = res.rows || [];
+    total1.value = res.total;
+    if (queryParams1.current == 1) {
+      dataList1.value = [];
+    }
+    items.forEach((val) => {
+      dataList1.value.push(val);
+    });
+    if (queryParams1.size * queryParams1.current >= total1.value) {
+      finished1.value = true;
+    } else {
+      finished1.value = false;
+    }
+  })
+};
+
+const queryParams2 = reactive({
+  current: 0,
+  size: 15,
+  query: {
+    keyword: ''
+  }
+});
+const total2 = ref(0);
+let loading2 = ref(false);
+let error2 = ref(false);
+let finished2 = ref(false);
+let dataList2 = ref([]);
+const onSearchKeyword2 = (val) => {
+  queryParams1.query.keyword = val;
+  queryParams1.current = 0;
+  getList2();
+};
+const onSearchCancel2 = () => {
+  queryParams1.query.keyword = '';
+  queryParams1.current = 0;
+  getList2();
+}
+const getList2 = () => {
+  queryParams2.current++;
+  getRescueMateriaWarehouseList(queryParams2).then((res: any) => {
+    const items = res.rows || [];
+    total2.value = res.total;
+    if (queryParams2.current == 1) {
+      dataList2.value = [];
+    }
+    items.forEach((val) => {
+      dataList2.value.push(val);
+    });
+    if (queryParams2.size * queryParams2.current >= total2.value) {
+      finished2.value = true;
+    } else {
+      finished2.value = false;
+    }
+  })
+}
+const handleClickItem = (item) => {
+  item.checked = !item.checked;
+  let points = [];
+  dataList1.value.forEach((item2) => {
+    if (!!item2.checked) {
+      points.push({
+        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+        image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+        imageHover: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+        size: [19, 31],
+        lnglat: [item2.longitude, item2.latitude],
+        longitude: item2.longitude,
+        latitude: item2.latitude
+      });
+    }
+  })
+  dataList2.value.forEach((item2) => {
+    if (!!item2.checked) {
+      points.push({
+        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+        image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+        imageHover: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+        size: [19, 31],
+        lnglat: [item2.longitude, item2.latitude],
+        longitude: item2.longitude,
+        latitude: item2.latitude
+      });
+    }
+  })
+  getMapUtils().addMarker(points);
+}
+onMounted(() => {
+  getList();
+  getList2();
+})
+</script>
+
+<style lang="scss" scoped>
+.list {
+  padding: 0 10px;
+  .item {
+    padding: 10px;
+    background: #f8f9fc;
+    margin-top: 10px;
+    border-radius: 4px;
+    border: 1px solid #f8f9fc;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .text-box {
+      .text1 {
+        font-size: 16px;
+        font-weight: bold;
+      }
+      .text2 {
+        font-size: 14px;
+      }
+    }
+    .icon-position {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      background: url('@/assets/images/map/position1.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .item-active {
+    background-color: #f2fcfd;
+    border: 1px solid #cef0f5;
+  }
+}
+
+</style>

src/views/mobileControl/index.vue

@@ -47,9 +47,9 @@
           <i class="command-btn" />
           <div>指挥作战</div>
         </div>
-        <div class="button2">
+        <div class="button2" @click="handleShowMaterialManage">
           <i class="material-btn" />
-          <div>物资</div>
+          <div>资源</div>
         </div>
         <div class="button2" @click="handleJumpEvent">
           <i class="event-btn" />
@@ -132,6 +132,7 @@
       />
     </van-popup>
     <OnlinePlotting ref="onlinePlotting" v-model="showOnlinePlotting2" />
+    <MaterialManage v-model="materialManageHeight" />
   </div>
 </template>
 
@@ -148,6 +149,7 @@ import { showFailToast, showSuccessToast } from "vant";
 import { closeEvent, getEventDetail } from "@/api/event";
 import LayerBox from "./LayerBox.vue";
 import OnlinePlotting from "./OnlinePlotting/index.vue";
+import MaterialManage from "@/views/mobileControl/MaterialManage.vue";
 
 const router = useRouter();
 const route = useRoute();
@@ -320,6 +322,11 @@ const onConfirm = (data) => {
   showOnlinePlotting.value = false;
   showOnlinePlotting2.value = true;
 }
+//
+let materialManageHeight = ref(0);
+const handleShowMaterialManage = () => {
+  materialManageHeight.value = 300;
+}
 onMounted(() => {
   eventId.value = route.query.event_id as string;
   selectEventId.value = [route.query.event_id as string];
@@ -356,6 +363,15 @@ const getDrawTool = () => {
   }
   return {};
 };
+const getMapUtils = () => {
+  if (['imageMap', 'satellite2', 'satellite3'].includes(activeMap.value)) {
+
+  } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
+    return mapRef.value.getMapUtils();
+  }
+  return {};
+};
+provide('getMapUtils', getMapUtils);
 provide('getMap', getMap);
 provide('getDrawTool', getDrawTool);
 </script>