更新

src/views/backOfficeSystem/IntelligentControl/myControl/components/yjDialog.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span class="title">预警详情</span>
+      <div>
+        <el-button @click="close">关闭</el-button>
+      </div>
+    </div>
+    <div class="form_cnt">
+        <div class="left">
+            <div class="lh30">轨迹信息</div>
+            <div class="flex item mr15">
+                <img :src="person" alt="">
+                <div class="ml10">
+                    <div>姓名：张三（51018319954544454）</div>
+                    <div>预警次数：<span>6</span>次</div>
+                    <div>预警来源：布控预警</div>
+                    <div>预警标签：社区戒毒</div>
+                    <div><span class="marks">轨迹上图</span></div>
+                </div>
+            </div>
+            <ul class="cntBox">
+                <li class="li-item" v-for="idx in 10" :key="idx">
+                    <div class="mb10">预警时间：2024-05-21 10:10:05</div>
+                    <div class="item flex info">
+                        <img :src="person" alt="" style="width:99px;height: 92px;">
+                        <div class="ml10">预警内容；预警内容:5月21日20.41.14人像抓拍数据测到 马志强(510502199506168718)出现在024000050迎库路大世界石梯人行道2L4-SPL</div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <div class="right">
+            <GdMap></GdMap>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import GdMap from "@/components/GdMap/index.vue";
+import { ref, defineExpose,defineEmits } from "vue";
+const emit = defineEmits(["change"]);
+const props = defineProps({
+  dic: Object
+});
+const person = require('@/assets/images/person.png')
+const dialogForm = ref(false); //弹窗
+
+// 初始化数据
+const init = (row) => {
+  dialogForm.value = true;
+};
+
+// 关闭
+const close = () => {
+  dialogForm.value = false;
+};
+
+defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+.form_cnt{
+  display: flex;
+  .left{
+    width: 400px;
+    height: 100%;
+    margin-right: 10px;
+    .item{
+        background: rgb(248, 248, 248);
+        padding: 4px;
+    }
+    .info{
+        padding: 10px;
+        box-sizing: border-box;
+        margin-left: 10px;
+    }
+    .marks{
+        font-size: 12px;
+        display: inline-block;
+        padding: 2px 6px;
+        background: #0072ff;
+        border-radius: 4px;
+        color: #fff;
+    }
+    .cntBox{
+        margin-top: 6px;
+        height: calc(100% - 140px);
+        overflow: hidden;
+        overflow-y: auto;
+        .li-item{
+            border-left:1px solid #0072ff ;
+            padding-left:10px;
+            box-sizing: border-box;
+            position: relative;
+            margin-left: 10px;
+            margin-right: 10px;
+            &::before{
+                position: absolute;
+                content: '';
+                top: 0;
+                left: -5px;
+                width: 10px;
+                height: 10px;
+                background: #0072ff;
+                border-radius: 50%;
+            }
+        }
+    }
+  }
+  .right{
+    position: relative;
+    width: calc(100% - 410px);
+    height: 100%;
+  }
+}
+</style>