切换事件

src/api/event.ts

@@ -67,4 +67,4 @@ export function uploadCasualties(data) {
         method: 'post',
         data: data
     });
-}
+}

src/components/Map/YztMap/index.vue

@@ -19,7 +19,7 @@ const emits = defineEmits(['update:drawing', 'selectGraphics']);
 
 const mapRef = ref(null);
 const mapState = reactive({
-  center: [110.93154257997, 21.669064031332],
+  center: [110.925175, 21.678955],
   zoom: 7.9,
   minZoom: 6,
   maxZoom: 16,
@@ -99,16 +99,16 @@ const setMapZoom = (value) => {
     view.setCenter([113.280637, 23.125178]);
     view.setZoom(7);
   } else if (value === 2) {
-    view.setCenter([110.93154257997, 21.6690640313328]);
+    view.setCenter([110.925175, 21.678955]);
     view.setZoom(11);
   } else if (value === 3) {
-    view.setCenter([110.93154257997, 21.669064031332]);
+    view.setCenter([110.925175, 21.678955]);
     view.setZoom(12);
   } else if (value === 4) {
-    view.setCenter([110.93154257997, 21.669064031332]);
+    view.setCenter([110.925175, 21.678955]);
     view.setZoom(15);
   } else if (value === 5) {
-    view.setCenter([110.93154257997, 21.669064031332]);
+    view.setCenter([110.925175, 21.678955]);
     view.setZoom(16);
   }
 };

src/components/Map/index.vue

@@ -34,10 +34,23 @@ import {
 import { pointDetailTemplate } from './mapData';
 import {getPointInfoList} from "@/api/globalMap";
 import {getCurrentInstance, inject, nextTick, onMounted, onUnmounted, reactive, ref, toRefs, watch} from "vue";
-
+interface EventDetails {
+  'event_id': String;
+  'event_title': String;
+  'event_status': String;
+  'keep_time': String;
+  'event_type': String;
+  'event_level': String;
+  'address': String;
+  'event_time': String;
+  'event_source': String;
+  'latitude': String;
+  'longitude': String
+}
 interface Props {
   activeMap: string;
   pointType: [];
+  eventDetails: EventDetails;
 }
 
 const props = withDefaults(defineProps<Props>(), {});
@@ -47,7 +60,7 @@ const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
 const emits = defineEmits(['update:drawing', 'selectGraphics', 'unSelectGraphics', 'showTextEditBox', 'onDrawCompleted', 'handleShowVideo', 'handleShowWarehouse']);
 
 const mapState = reactive({
-  center: [110.93154257997, 21.669064031332],
+  center: [110.925175, 21.678955],
   zoom: 7.9,
   minZoom: 6,
   maxZoom: 20,
@@ -55,9 +68,7 @@ const mapState = reactive({
   // 是否显示比例尺
   showScale: true
 });
-
 let AMap, map, scale;
-
 // 鼠标绘制工具
 const drawTool = useDrawTool();
 // 初始化地图
@@ -66,7 +77,7 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
   pitch: mapState.isThreeDimensional ? 45 : 0,
   zoom: mapState.zoom,
-  center: [mapState.center[0], mapState.center[1]],
+  center: props.eventDetails.longitude && props.eventDetails.latitude ? [props.eventDetails.longitude, props.eventDetails.latitude] : [mapState.center[0], mapState.center[1]],
   dragEnable: true,
   scrollWheel: true,
   enableMouseTool: true,
@@ -304,6 +315,15 @@ watch(
   }
 );
 
+watch(() => props.eventDetails, () => {
+  if (!!map) {
+    clearMarker('point');
+    map.setCenter(props.eventDetails.longitude && props.eventDetails.latitude ? [props.eventDetails.longitude, props.eventDetails.latitude] : [mapState.center[0], mapState.center[1]]);
+  }
+}, {
+  deep: true
+})
+
 defineExpose({ addMarker, addSearchMarker, getMarkers, clearMarker, getMap, drawTool, handleHover });
 const handleResize = () => {
   map.resize();

src/hooks/AMap/useAMap.ts

@@ -165,7 +165,6 @@ export function useAMap(options) {
       let index = 0;
       let index2 = 0;
       let data = {};
-      debugger
       for (let i = 0; i < addPoints.length; i++) {
         if (addPoints[i].id === extData.id.toString() && addPoints[i].dataType === dataType) {
           addPoints[i].icon = addPoints[i].imageHover;

src/views/mobileControl/EventBox.vue

@@ -5,7 +5,7 @@
         <div :class="tabActive === '0' ? 'tab tab-active' : 'tab'" @click="handleClickTab('0')">事件信息</div>
         <div :class="tabActive === '1' ? 'tab tab-active' : 'tab'" @click="handleClickTab('1')">任务指令</div>
       </div>
-      <EventInfo v-show="tabActive === '0'" :eventId="eventId" />
+      <EventInfo v-show="tabActive === '0'" :eventId="eventId" :eventDetails="eventDetails" />
       <TaskCommand v-show="tabActive === '1'" :eventId="eventId" />
     </div>
   </div>
@@ -15,10 +15,24 @@
 import EventInfo from './EventInfo.vue'
 import {ref} from "vue";
 import TaskCommand from "@/views/mobileControl/TaskCommand.vue";
-
-defineProps({
-  eventId: String
-});
+interface EventDetails {
+  'event_id': String;
+  'event_title': String;
+  'event_status': String;
+  'keep_time': String;
+  'event_type': String;
+  'event_level': String;
+  'address': String;
+  'event_time': String;
+  'event_source': String;
+  'latitude': String;
+  'longitude': String
+}
+interface Props {
+  eventId: string;
+  eventDetails: EventDetails;
+}
+withDefaults(defineProps<Props>(), {});
 // 底部信息栏
 let tabActive = ref('0');
 

src/views/mobileControl/EventInfo.vue

@@ -53,39 +53,28 @@ import {reactive, ref, toRefs, watch} from "vue";
 import {useDict} from "@/utils/dict";
 import {useRouter} from "vue-router";
 import {showConfirmDialog, showSuccessToast} from "vant";
-
-const props = defineProps({
-  eventId: String
-});
+interface EventDetails {
+  'event_id': String;
+  'event_title': String;
+  'event_status': String;
+  'keep_time': String;
+  'event_type': String;
+  'event_level': String;
+  'address': String;
+  'event_time': String;
+  'event_source': String;
+  'latitude': String;
+  'longitude': String
+}
+interface Props {
+  eventDetails: EventDetails;
+}
+const props = withDefaults(defineProps<Props>(), {});
 const router = useRouter();
 const { mm_event_type, mm_event_level, mm_event_state } = toRefs<any>(useDict('mm_event_type', 'mm_event_level', 'mm_event_state'));
-let eventDetails = ref({
-  event_id: '',
-  event_title: '',
-  event_status: '',
-  keep_time: '',
-  event_type: '',
-  event_level: '',
-  address: '',
-  event_time: '',
-  event_source: '',
-  latitude: '',
-  longitude: ''
-});
 
-const getDataList = () => {
-  if (!!props.eventId) {
-    getEventDetail({event_id: props.eventId}).then((res) => {
-      eventDetails.value = res.data
-    })
-  }
-};
 
-watch(() => props.eventId, () => {
-  getDataList();
-}, {
-  immediate: true
-})
+
 
 const handleStartEvent = () => {
 
@@ -98,10 +87,10 @@ const handleCloseEvent = () => {
         '是否确定结束指挥？',
   }).then(() => {
     const params = {
-      eventId: eventDetails.value.event_id,
-      address: eventDetails.value.address,
-      latitude: eventDetails.value.latitude,
-      longitude: eventDetails.value.longitude
+      eventId: props.eventDetails.event_id,
+      address: props.eventDetails.address,
+      latitude: props.eventDetails.latitude,
+      longitude: props.eventDetails.longitude
     };
     // 如果 flag 为 true，则直接调用 closeEvent 接口关闭事件
     closeEvent(params).then(() => {

src/views/mobileControl/PositionSelect.vue

@@ -192,7 +192,7 @@ function handlePanTo(index) {
   closeSearchList();
 }
 const initMap = async () => {
-  let position = [110.93154257997, 21.669064031332];
+  let position = [110.925175, 21.678955];
   const AMap = await AMapLoader.load({
     key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
@@ -211,6 +211,9 @@ const initMap = async () => {
   // 创建右键菜单
   ContextMenu();
   map.on('rightclick', handleRightclick);
+  map.on('complete', () => {
+    setMarks(position);
+  });
 };
 function ContextMenu() {
   contextMenu = new AMap.ContextMenu();

src/views/mobileControl/TaskCommand.vue

@@ -109,6 +109,7 @@ const getList = () => {
   });
 }
 watch(() => props.eventId, () => {
+  queryParams.page = 0;
   queryParams.event_code = props.eventId;
   getList()
 }, {

src/views/mobileControl/index.vue

@@ -2,8 +2,9 @@
   <div class="container">
     <div class="top-content">
       <!--    <YztMap v-if="['satellite2', 'satellite3'].includes(activeMap)" ref="map2Ref" :active-map="activeMap" :point-type="pointType" />-->
-      <Map ref="mapRef" :active-map="activeMap" :point-type="pointType" :class="showMenu && !!eventId && !temp && !fullscreen ? 'containerHeight1' : 'containerHeight2'"/>
+      <Map v-if="!loading" ref="mapRef" :active-map="activeMap" :point-type="pointType" :event-details="eventDetails" :class="showMenu && !!eventId && !temp && !fullscreen ? 'containerHeight1' : 'containerHeight2'"/>
       <div v-show="!fullscreen" class="top-left-panel">
+        <div class="select" @click="showSwitch = true">{{ eventDetails.event_title }}</div>
       </div>
       <div class="top-right-panel">
         <SearchBtn v-show="!fullscreen" @confirm="selectSearchMarker"/>
@@ -38,8 +39,18 @@
     </div>
 
     <div v-if="!!eventId && !temp" v-show="showMenu && !fullscreen">
-      <EventBox :eventId="eventId" />
+      <EventBox :eventId="eventId" :event-details="eventDetails" />
     </div>
+    <!--切换事件-->
+    <van-popup v-model:show="showSwitch" round position="bottom">
+      <van-picker
+          v-model="selectEventId"
+          :columns="endEventState.columns"
+          :columns-field-names="{ text: 'event_title', value: 'event_id' }"
+          @cancel="showSwitch = false"
+          @confirm="onPickerConfirm"
+      />
+    </van-popup>
     <!--地点选择-->
     <PositionSelect v-model:visible="showPositionSelect" @confirm="handleEnterCommand" />
     <!--临时结束指挥-->
@@ -48,17 +59,18 @@
         <div class="form-item">
           <i class="icon" />
           <div class="form-label">灾害事件：</div>
-          <div class="form-select" @click="endEventState.showPicker = true">{{ endEventState.name }}</div>
+          <div class="select" @click="endEventState.showPicker = true">{{ endEventState.name }}</div>
         </div>
         <div class="form-text">注意：本次指挥未关联事件，指挥记录将不会保留。若要保留记录，请关联事件。</div>
       </div>
     </van-dialog>
     <van-popup v-model:show="endEventState.showPicker" round position="bottom">
       <van-picker
+          v-model="endEventState.event_id"
           :columns="endEventState.columns"
           :columns-field-names="{ text: 'event_title', value: 'event_id' }"
           @cancel="endEventState.showPicker = false"
-          @confirm="onPickerConfirm"
+          @confirm="onPickerConfirm2"
       />
     </van-popup>
   </div>
@@ -74,11 +86,19 @@ import {iconList} from "@/components/Map/mapData";
 import PositionSelect from "@/views/mobileControl/PositionSelect.vue";
 import {editEvent, registeredEvent} from "@/api/duty/eventing";
 import {showFailToast, showSuccessToast} from "vant";
-import {closeEvent} from "@/api/event";
+import {closeEvent, getEventDetail} from "@/api/event";
 
 const router = useRouter();
 const route = useRoute();
-const eventId = ref('');
+let loading = ref(true);
+let eventId = ref('');
+let selectEventId = ref([]);
+let eventDetails = ref({
+  event_title: '',
+  longitude: '',
+  latitude: ''
+});
+let showSwitch = ref(false);
 const temp = ref(false);
 let fullscreen = ref(false);
 let showMenu = ref(true);
@@ -95,7 +115,7 @@ let endEventState = reactive({
   address: '',
   latitude: '',
   longitude: '',
-  event_id: ''
+  event_id: []
 });
 
 
@@ -160,34 +180,43 @@ const handleShowPosition = () => {
 const handleEnterCommand = (res) => {
   temp.value = true;
   eventId.value = res.event_id;
+  selectEventId.value = [res.event_id];
   endEventState.address = res.address;
   endEventState.latitude = res.latitude;
   endEventState.longitude = res.longitude;
 }
-const onPickerConfirm = (data, a, b) => {
-  endEventState.event_id = data.selectedValues[0];
+const onPickerConfirm = (data) => {
+  eventId.value = data.selectedValues[0];
+  eventDetails.value = data.selectedOptions[0];
+  showSwitch.value = false;
+  getEventDetail({event_id: eventId.value}).then((res) => {
+    eventDetails.value = res.data;
+  })
+};
+const onPickerConfirm2 = (data) => {
+  endEventState.event_id = [data.selectedValues[0]];
   endEventState.name = data.selectedOptions[0].event_title;
   endEventState.showPicker = false;
 };
 const closeDialog = () => {
   endEventState.show = false;
-  endEventState.event_id = '';
+  endEventState.event_id = [];
   endEventState.name = '';
 }
 const endProcess = () => {
-  if (!endEventState.event_id) {
+  if (!endEventState.event_id[0]) {
     showFailToast('请先选择一个事件')
     return;
   }
   // 更新事件信息
   const updateParams = {
-    event_id: endEventState.event_id,
+    event_id: endEventState.event_id[0],
     address: endEventState.address,
     latitude: endEventState.latitude,
     longitude: endEventState.longitude
   };
   const params = {
-    eventId: endEventState.event_id,
+    eventId: endEventState.event_id[0],
     address: endEventState.address,
     latitude: endEventState.latitude,
     longitude: endEventState.longitude
@@ -204,6 +233,16 @@ const endProcess = () => {
 }
 onMounted(() => {
   eventId.value = route.query.event_id as string;
+  selectEventId.value = [route.query.event_id as string];
+  if (!!eventId.value && !temp.value) {
+    getEventDetail({event_id: eventId.value}).then((res) => {
+      eventDetails.value = res.data;
+    }).finally(() => {
+      loading.value = false;
+    })
+  } else {
+    loading.value = false;
+  }
   registeredEvent({}).then((res) => {
     endEventState.columns = res.data;
   });
@@ -236,6 +275,12 @@ onMounted(() => {
   position: absolute;
   top: 16px;
   left: 16px;
+  .select {
+    flex: none;
+    width: 223px;
+    height: 30px;
+    margin-left: 0;
+  }
 }
 .top-right-panel {
   display: flex;
@@ -352,19 +397,6 @@ onMounted(() => {
       flex-shrink: 0;
       font-size: 14px;
     }
-    .form-select {
-      flex: 1;
-      height: 35px;
-      background: #FFFFFF;
-      border: 1px solid #DCE0EE;
-      border-radius: 2px;
-      margin-left: 6px;
-      padding: 5px 40px 5px 8px;
-      position: relative;;
-      &::before {
-        content: '';
-      }
-    }
   }
   .form-text {
     font-size: 14px;
@@ -372,4 +404,18 @@ onMounted(() => {
     margin: 10px 0;
   }
 }
+
+.select {
+  flex: 1;
+  height: 35px;
+  background: #FFFFFF;
+  border: 1px solid #DCE0EE;
+  border-radius: 2px;
+  margin-left: 6px;
+  padding: 5px 40px 5px 8px;
+  position: relative;;
+  &::before {
+    content: '';
+  }
+}
 </style>