lcw

src/views/home/dialog/components/home_yj.vue

@@ -1,5 +1,6 @@
 <template>
-  <DialogDragger title="预警详情" top="150px" v-model="props.show" @close="close">
+
+<DialogDragger title="预警详情" top="150px" v-model="props.show" @close="close">
 
     <ul class="warningList" ref="gjyjList">
       <li v-for="item in props.data" :key="item.id">
@@ -7,13 +8,21 @@
       </li>
       <MOSTY.Empty :show="props.data.length <= 0" :imgSize="150"></MOSTY.Empty>
     </ul>
+
+    <!-- :style="{height: `calc(100vh - ${handleHs}px)`}" -->
+
+    <div style="position:relative;width: 100%;" :style="{height: `calc(100vh - ${handleHs}px)`}">
+      <GdMap v-if="showMap"></GdMap>
+    </div>
   </DialogDragger>
 </template>
 <script setup>
 import * as MOSTY from "@/components/MyComponents/index";
+import GdMap from "@/components/GdMap/index.vue";
+
 import DialogDragger from "@/views/home/layout/dialogDragger.vue";
 import YjItem from "@/views/home/components/yjItem.vue";
-import { ref, defineProps } from "vue";
+import { ref, defineProps, onMounted, watch } from "vue";
 import emitter from "@/utils/eventBus.js";
 const gjyjList = ref(null); //预警列表数据
 //参数传递
@@ -28,13 +37,43 @@ const props = defineProps({
     default:false
   },
 });
+console.log(props.show);
 
 //关闭
 function close() {
   emitter.emit('deletePointArea','home_yj_map');
   emitter.emit("showHomeYJ",false);
 }
+const showMap=ref(false)
+onMounted(() => {
+  setTimeout(() => {
+    showMap.value = true
+    setTimeout(() => {
+      for (let i = 0; i < props.data.length; i++) {
 
+const item = props.data[i];
+console.log(item);
+
+emitter.emit('showHomeYJ',[item]);
+emitter.emit('deletePointArea','home_yj_map');
+if(!item.jd || !item.jd) return proxy.$message({ type: "warning",  message: "该预警没有坐标！" });
+let icon = require('@/assets/point/yj.png');
+if(item.yjjb == '20') icon = require('@/assets/point/yj1.png');
+if(item.yjjb == '30') icon = require('@/assets/point/yj2.png');
+if(item.yjjb == '40') icon = require('@/assets/point/yj3.png');
+emitter.emit('addPointArea',{flag:'home_yj_map',icon,coords:[item]});
+emitter.emit('setMapCenter',{location:[item.jd,item.wd],zoomLevel:10});
+}
+    }, 500);
+
+
+  }, 200);
+})
+const handleHs=ref(0)
+watch(() => gjyjList.value, (val) => {
+  console.log(val.clientHeight);
+  handleHs.value=val.clientHeight+198+150+20
+},{deep:true})
 </script>
 
 <style lang="scss" scoped>