更新

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>

src/views/backOfficeSystem/IntelligentControl/myControl/index.vue

@@ -25,6 +25,9 @@
           :controlsWidth="pageData.controlsWidth"
           @chooseData="chooseData"
         >
+        <template #yjcs="{row}">
+          <span @click="openWarning(row)" style="color: #00ffff;" class="mr5 pointer">{{ row.yjcs }}</span>次
+        </template>
           <!-- 操作 -->
           <template #controls="{ row }">
             <el-link type="primary" size="small" @click="handleRow('edit', row)">编辑</el-link>
@@ -41,10 +44,13 @@
   </div>
   <!-- 布控对象 -->
   <AddBkdx ref="addBkdxForm" />
+  <!-- 预警弹窗 -->
+  <YjDialog ref="warningkdxForm"></YjDialog>
 </template>
 
 <script setup>
 import AddBkdx from "./components/addBkdx.vue";
+import YjDialog from "./components/yjDialog.vue";
 import PageTitle from "@/components/aboutTable/PageTitle.vue";
 import MyTable from "@/components/aboutTable/MyTable.vue";
 import Pages from "@/components/aboutTable/Pages.vue";
@@ -54,6 +60,7 @@ import { reactive, ref, onMounted, getCurrentInstance } from "vue";
 const { proxy } = getCurrentInstance();
 const { D_GS_BK_DJ, D_GS_BK_DX, D_GS_BK_ZT } = proxy.$dict("D_GS_BK_DJ","D_GS_BK_DX","D_GS_BK_ZT"); //获取字典数据
 const addBkdxForm = ref(null); //布控对象组件
+const warningkdxForm = ref(); //布控对象组件
 const searchBox = ref(); //搜索框
 const searchConfiger = ref([
   {
@@ -98,7 +105,7 @@ const searchConfiger = ref([
 ]);
 const queryFrom = ref({});
 const pageData = reactive({
-  tableData: [], //表格数据
+  tableData: [{yjcs:5}], //表格数据
   keyCount: 0,
   tableConfiger: {
     rowHieght: 61,
@@ -120,7 +127,7 @@ const pageData = reactive({
     { label: "预警标签模型", prop: "czYq", showSolt: true },
     { label: "布控范围", prop: "bkSjKs" },
     { label: "涉及人数", prop: "bkSjJs" },
-    { label: "预警次数", prop: "bkSjSx" },
+    { label: "预警次数", prop: "yjcs",showSolt: true  },
     { label: "处置接收单位", prop: "bkfqrXm" },
     { label: "开始时间", prop: "bkZt"},
     { label: "结束时间", prop: "bkZt"},
@@ -169,6 +176,13 @@ const getList = (val) => {
   //     pageData.tableConfiger.loading = false;
   //   });
 };
+const chooseData = (val) =>{
+  console.log(val,'====');
+}
+// 打开预警
+const openWarning = (val) =>{
+  warningkdxForm.value.init(val)
+}
 
 const sendControl = () => {
   addBkdxForm.value.init();
@@ -187,13 +201,4 @@ const tabHeightFn = () => {
   background: rgba(0, 0, 0, 0.5) !important;
 }
 
-.content {
-  background-color: #fff;
-  border-radius: 4px;
-  padding-top: 10px;
-
-  .btns {
-    padding: 0 10px;
-  }
-}
 </style>