更新

src/views/backOfficeSystem/IntelligentControl/DeploymentArea/components/addForm.vue

@@ -11,46 +11,54 @@
                 <MOSTY.Select v-model="listQuery.qyjb" filterable :dictEnum="props.dic.D_ZDY_QYJB" width="100%" clearable placeholder="请选择区域类型"/>
             </el-form-item>
             <el-form-item label="行政区划" prop="xzqh" v-if="listQuery.qylx">
-                <MOSTY.Select v-model="listQuery.qyjb" filterable :dictEnum="props.dic.D_BZ_XZQHDM" width="100%" clearable placeholder="请选择行政区划"/>
+                <MOSTY.Select v-model="listQuery.xzqh" filterable :dictEnum="props.dic.D_BZ_XZQHDM" width="100%" clearable placeholder="请选择行政区划"/>
-            </el-form-item>
-            
-            <el-form-item label="感知源信息" prop="fwmc" class="ww100">
-                <div class="flex ww100">
-                    <el-input v-model="listQuery.fwmc" placeholder="请输入感知元信息" style="flex: 1;"></el-input>
-                    <el-button type="primary" style="width: 136px;" class="ml10">
-                        <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
-                        <span style="vertical-align: middle">选择感知源</span>
-                    </el-button>
-                </div>
             </el-form-item>
             <el-form-item label="地图范围" prop="dtfw" class="ww100">
                 <div class="flex ww100">
-                    <el-input v-model="listQuery.fwmc" placeholder="请输入地图范围" style="flex: 1;"></el-input>
+                    <el-input v-model="listQuery.pgis" placeholder="请输入地图范围" style="flex: 1;"></el-input>
-                    <el-button type="primary" style="width: 136px;" class="ml10">
+                    <el-button type="primary" style="width: 136px;" class="ml10" @click="chooseMap">
                         <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
                         <span style="vertical-align: middle">选择地图范围</span>
                     </el-button>
                 </div>
             </el-form-item>
-            <div class="mapbox" v-if="showMap"><GdMap></GdMap></div>
+            <el-form-item label="感知源信息" prop="sxts" class="ww100">
+                <div class="flex ww100">
+                    <div class="boo">
+                        <span v-if="!listQuery.sxts || listQuery.sxts.length == 0" class="f12 ml10" style="color: #e1e1e1;">感知元信息</span>
+                        <el-tag class="ml4 mr4" v-for="(it,idx) in listQuery.sxts" :key="idx">
+                            {{ it.sbmc }}
+                        </el-tag>
+                    </div>
+                    <el-button type="primary" style="width: 136px;" class="ml10" :disabled="disabled">
+                        <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
+                        <span style="vertical-align: middle">选择感知源</span>
+                    </el-button>
+                </div>
+            </el-form-item>
+            <div class="mapbox" v-if="showMap" v-loading="disabled"><GdMap></GdMap></div>
             <div class="mt10 flex just-center">
                 <el-button @click="closed">取 消</el-button>
-                <el-button type="primary" @click="submit">确 定</el-button>
+                <el-button type="primary" @click="submit" v-loading="loading">确 定</el-button>
             </div>
         </el-form>
     </el-dialog>
 </template>
 
 <script setup>
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import emitter from "@/utils/eventBus.js";
 import GdMap from "@/components/GdMap/index.vue";
 import * as MOSTY from "@/components/MyComponents/index";
-import { ref, defineProps, watch, nextTick } from "vue";
+import { ref, defineProps, onMounted, nextTick ,onUnmounted} from "vue";
 const props = defineProps({
     dic: {
         type: Object,
         default: () => ({})
     },
 });
+const disabled = ref(false)
+const loading = ref(false)
 const modelShow = ref(false);
 const emit = defineEmits(["change"]);
 const title = ref("新增区域");
@@ -62,29 +70,74 @@ const rules = {
     qylx: [{ required: true, message: "请选择区域类型", trigger: "change" }],
     qyjb: [{ required: true, message: "请选择区域级别", trigger: "change" }],
     xzqh: [{ required: true, message: "请选择行政区划", trigger: "change" }],
-    fwmc: [{ required: true, message: "请输入感知元信息", trigger: "blur" }],
+    pgis: [{ required: true, message: "请输入地图范围", trigger: "blur" }],
-    dtfw: [{ required: true, message: "请输入地图范围", trigger: "blur" }]
+    sxts: [{ required: true, message: "请输入感知元信息", trigger: "blur" }],
 };
-const init = (type,val) => {
+
+onMounted(()=>{
+    emitter.on('coordString',val=>{
+        if(val.flag == 'bkqy_ht') {
+            listQuery.value.pgis = val.coord;
+            emitter.emit('deletePointArea','gzy_ht');
+            disabled.value = true;
+            qcckPost({pgis:val.coord[0]},'/mosty-gsxt/tbGsxtBkQy/getSxtList').then(res=>{
+                listQuery.value.sxts = res || [];
+                let icon = require('@/assets/point/sp.png');
+                emitter.emit('addPointArea',{flag:'gzy_ht',icon,coords:listQuery.value.sxts});
+                disabled.value = false;
+            }).catch(()=>{
+                disabled.value = false;
+            })
+        }
+    })
+})
+
+// 初始化
+const init = (type) => {
     title.value = type === "add" ? "新增区域" : "编辑区域";
     modelShow.value = true;
     nextTick(() => {
         showMap.value = true;
     });
 };
-const closed = () => {
+
-    modelShow.value = false;
+// 地图选择
-    formRef.value.resetFields();
+const chooseMap = () =>{
-    showMap.value = false;
+    listQuery.value.pgis = [];
-};
+    listQuery.value.sxts = [];
+    emitter.emit('removeEara','bkqy_ht')
+    emitter.emit('deletePointArea','gzy_ht')
+    emitter.emit('drawShape',{type:'polygon',flag:'bkqy_ht'})
+}
+
+// 提交
 const submit = () => {
     formRef.value.validate(valid => {
         if(!valid) return false;
-        console.log("提交的数据：", listQuery.value);
+        loading.value = true;
-        closed();
+        let params = { ...listQuery.value }
+        params.pgis = params.pgis[0]
+        let url = title.value == '新增区域' ? '/mosty-gsxt/tbGsxtBkQy/add' :'/mosty-gsxt/tbGsxtBkQy/update'
+        qcckPost(params,url).then(res=>{
+            loading.value = false;
+            emit('change');
+            closed();
+        }).catch(()=>{
+            loading.value = false;
+        })
     });
 };
+const closed = () => {
+    emitter.emit('removeEara','bkqy_ht')
+    emitter.emit('deletePointArea','gzy_ht')
+    formRef.value.resetFields();
+    showMap.value = false;
+    modelShow.value = false;
+};
 
+onUnmounted(()=>{
+    emitter.off("coordString");
+})
 defineExpose({
     init
 });
@@ -99,4 +152,15 @@ defineExpose({
     height: 320px;
     background: red;
 }
+.boo{
+    width: 77%;
+    min-height: 32px;
+    max-height: 74px;
+    overflow: hidden;
+    overflow-y: auto;
+    border: 1px solid #e9e9e9;
+    border-radius: 4px;
+    padding: 4px;
+    box-sizing: border-box;
+}
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="titleBox">
-      <PageTitle title="我的布控" />
+      <PageTitle title="布控区域" />
     </div>
     <!-- 搜索 -->
     <div ref="searchBox">
@@ -27,21 +27,17 @@
           :controlsWidth="pageData.controlsWidth"
           @chooseData="chooseData"
         >
-          <template #qydj="{ row }">
+          <template #qyjb="{ row }">
-            <DictTag :tag="false" :value="row.qydj" :options="D_ZDY_QYJB" />
+            <DictTag :tag="false" :value="row.qyjb" :options="D_ZDY_QYJB" />
           </template>
-          <template #fwlx="{ row }">
+          <template #qylx="{ row }">
-            <DictTag :tag="false" :value="row.fwlx" :options="D_ZDY_QYLX" />
+            <DictTag :tag="false" :value="row.qylx" :options="D_ZDY_QYLX" />
+          </template>
+          <template #xzqh="{ row }">
+            <DictTag :tag="false" :value="row.xzqh" :options="D_BZ_XZQHDM" />
           </template>
           <template #sfqy="{ row }">
-            <el-switch
+            <el-switch v-model="row.sfqy" inline-prompt active-value="1" inactive-value="0" active-text="是" inactive-text="否"/>
-              v-model="row.sfqy"
-              inline-prompt
-              active-value="1"
-              inactive-value="0"
-              active-text="是"
-              inactive-text="否"
-            />
           </template>
           <!-- 操作 -->
           <template #controls="{ row }">
@@ -62,7 +58,7 @@
     </div>
   </div>
   <!-- 新增区域 -->
-  <AddForm ref="addVisible" :dic="{D_BZ_SF, D_ZDY_QYJB, D_ZDY_QYLX,D_BZ_XZQHDM }"></AddForm>
+  <AddForm ref="addVisible" @change="getList" :dic="{D_BZ_SF, D_ZDY_QYJB, D_ZDY_QYLX,D_BZ_XZQHDM }"></AddForm>
 </template>
 
 <script setup>
@@ -72,6 +68,7 @@ import MyTable from "@/components/aboutTable/MyTable.vue";
 import Pages from "@/components/aboutTable/Pages.vue";
 import Search from "@/components/aboutTable/Search.vue";
 import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import { ElMessage } from "element-plus";
 import { reactive, ref, onMounted, getCurrentInstance } from "vue";
 const { proxy } = getCurrentInstance();
 const { D_BZ_SF, D_ZDY_QYJB, D_ZDY_QYLX,D_BZ_XZQHDM } = proxy.$dict("D_BZ_SF","D_ZDY_QYJB","D_ZDY_QYLX","D_BZ_XZQHDM"); //获取字典数据
@@ -80,20 +77,20 @@ const addVisible = ref(); //新增区域组件
 const searchConfiger = ref([
   {
     label: "区域等级",
-    prop: "qydj",
+    prop: "qyjb",
     placeholder: "请选择区域等级",
     showType: "select",
     options: D_ZDY_QYJB
   },
   {
     label: "范围名称",
-    prop: "fwmc",
+    prop: "qymc",
     placeholder: "请输入范围名称",
     showType: "input"
   },
   {
     label: "范围类型",
-    prop: "fwlx",
+    prop: "qylx",
     placeholder: "请选择范围类型",
     showType: "select",
     options: D_ZDY_QYLX
@@ -106,28 +103,10 @@ const searchConfiger = ref([
     options: D_BZ_SF
   }
 ]);
+const ids = ref([])
 const queryFrom = ref({});
 const pageData = reactive({
-  tableData: [
+  tableData: [], //表格数据
-    {
-      qydj: "一级",
-      fwmc: "测试范围1",
-      fwlx: "区域",
-      gzyxx: "感知源信息1",
-      glrysl: 10,
-      glqtsl: 5,
-      sfqy: "1"
-    },
-    {
-      qydj: "二级",
-      fwmc: "测试范围2",
-      fwlx: "区域",
-      gzyxx: "感知源信息2",
-      glrysl: 20,
-      glqtsl: 15,
-      sfqy: "0"
-    }
-  ], //表格数据
   keyCount: 0,
   tableConfiger: {
     rowHieght: 61,
@@ -142,12 +121,11 @@ const pageData = reactive({
   controlsWidth: 120, //操作栏宽度
 
   tableColumn: [
-    { label: "区域等级", prop: "qydj", showSolt: true },
+    { label: "区域等级", prop: "qyjb", showSolt: true },
-    { label: "范围名称", prop: "fwmc" },
+    { label: "范围名称", prop: "qymc" },
-    { label: "范围类型", prop: "fwlx", showSolt: true },
+    { label: "范围类型", prop: "qylx", showSolt: true },
-    { label: "感知源信息", prop: "gzyxx" },
+    { label: "行政区划", prop: "xzqh", showSolt: true },
-    { label: "关联人员数量", prop: "glrysl" },
+    { label: "感知源信息", prop: "sxts", showSolt: true },
-    { label: "关联群体数量", prop: "glqtsl" },
     { label: "是否启用", prop: "sfqy", showSolt: true }
   ]
 });
@@ -174,15 +152,19 @@ const changeSize = (val) => {
 };
 // 获取列表
 const getList = () => {
-  // pageData.tableConfiger.loading = true;
+  pageData.tableConfiger.loading = true;
-  // let data = { ...pageData.pageConfiger, ...queryFrom.value };
+  let params = { ...pageData.pageConfiger, ...queryFrom.value };
-  // qcckGet(data, "/mosty-gsxt/tbGsxtBk/selectPage").then((res) => {
+  qcckGet(params, "/mosty-gsxt/tbGsxtBkQy/selectPage").then((res) => {
-  //     pageData.tableData = res.records || [];
+      pageData.tableData = res.records || [];
-  //     pageData.total = res.total;
+      pageData.total = res.total;
-  //     pageData.tableConfiger.loading = false;
+      pageData.tableConfiger.loading = false;
-  // }).catch(() => {
+  }).catch(() => {
-  //     pageData.tableConfiger.loading = false;
+      pageData.tableConfiger.loading = false;
-  // });
+  });
+};
+
+const chooseData = (data) => {
+  ids.value = Array.isArray(data) ? data.map((item) => item.id) : [];
 };
 
 const handleRow = (type, row) => {
@@ -192,12 +174,23 @@ const handleRow = (type, row) => {
         addVisible.value.init(type, row);
       break;
     case "delete"://删除
-    case "moreDelete": //批量删除
+      deleteItem([row.id])
       break;
-    default:
+    case "moreDelete": //批量删除
+      if (ids.value.length === 0) return ElMessage.warning("请先选择布控数据");
+      deleteItem(ids.value)
       break;
   }
 };
+
+const deleteItem = (ids) => {
+  proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
+    qcckPost(ids, "/mosty-gsxt/tbGsxtBkQy/delete").then(() => {
+      proxy.$message({ type: "success", message: '删除成功' });
+      getList();
+    });
+  })
+};
 // 表格高度计算
 const tabHeightFn = () => {
   pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 292;

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>

src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjComponents.vue

@@ -181,7 +181,7 @@ const seeMoreFn = () => {
     position: absolute;
     right: 10px;
     top: 10px;
-    width: 427px;
+    width: 460px;
     height: calc(100% - 20px);
     z-index: 9;