我的布控。四色预警

src/App.vue

@@ -1,4 +1,3 @@
-
 <template>
   <router-view v-slot="{ Component }" v-if="isRouterAlive">
     <keep-alive :include="store.getters.keepLiiveRoute">
@@ -28,7 +27,6 @@ onMounted(() => {
   let dept = getItem("deptId");
   document.title = "林芝";
 });
-
 </script>
 <style lang="scss">
 @import "./styles/index.scss";
@@ -51,7 +49,7 @@ li {
   -moz-osx-font-smoothing: grayscale;
   color: #fff;
   overflow-x: auto;
-  background:#263445;
+  background: #263445;
 }
 
 //只显示一排内容
@@ -106,4 +104,17 @@ v-deep .el-loading-mask {
   font-weight: normal;
   font-style: normal;
 }
+.bk_drawer_box {
+  .el-drawer__header {
+    background: #fff !important;
+    font-weight: 400;
+    font-size: 20px;
+    color: #000000;
+    line-height: 22px;
+    text-align: left;
+    text-transform: none;
+    margin-bottom:0;
+    height:40px;
+  }
+}
 </style>

src/assets/css/element-plus.scss

@@ -19,7 +19,7 @@
 }
 
 ::v-deep .el-form-item__label {
-  color: #fff;
+  // color: #fff;
 }
 
 ::v-deep .el-input__inner {
@@ -100,7 +100,7 @@
 }
 
 ::v-deep .el-checkbox {
-  color: #fff;
+  // color: #fff;
 }
 
 // ::v-deep .el-tree-node__content {
@@ -129,7 +129,7 @@
   }
 }
 ::v-deep .el-dialog__title {
-  color: #fff;
+  color: #000;
 }
 ::v-deep .el-dialog__header,
 ::v-deep .el-dialog__body,
@@ -137,7 +137,7 @@
 ::v-deep .el-card__body,
 ::v-deep .el-table {
   // background: #02163b;
-  background: #02163b;
+  // background: #02163b;
 }
 ::v-deep .user-main-wrap {
   border: 1px solid #07376d;
@@ -206,7 +206,7 @@
   background: #0d3f6e;
 }
 ::v-deep .el-upload--picture-card {
-  background-color: #112b63;
+  // background-color: #112b63;
   border: 1px dashed #4579b5;
 }
 ::v-deep .el-upload-list--picture-card .el-upload-list__item {
@@ -259,7 +259,7 @@
   color: #fcfcfc;
 }
 ::v-deep .el-date-editor .el-range-input {
-  color: #ffffff;
+  // color: #ffffff;
 }
 ::v-deep .el-input.is-disabled .el-input__inner {
   background-color: #ffffff;

src/assets/css/layout.scss

@@ -128,7 +128,7 @@ header {
   &::v-deep .el-form--inline {
     display: flex;
     flex-wrap: wrap;
-    padding: 2rem 12rem 0rem 12rem;
+    // padding: 2rem 12rem 0rem 12rem;
   }
 
   &::v-deep .el-form-item--default {
@@ -152,7 +152,7 @@ header {
   &::v-deep .el-textarea__inner {
     height: 7.5em;
     border: 1px solid #F1F4F8;
-    background-color: #02163b;
+    // background-color: #02163b;
   }
   
 }
@@ -237,7 +237,7 @@ header {
 }
 
 ::v-deep .el-dialog {
-  --el-dialog-bg-color: #061639;
+  // --el-dialog-bg-color: #061639;
 }
 
 .main-box {

src/components/MyComponents/CheckBox/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="form-item-box" :style="{ width: width }">
+    <el-checkbox-group v-model="modelValue" @change="handleCheckAllChange">
+      <el-checkbox
+        v-for="item in checkList"
+        :key="item.value"
+        :label="item.value"
+        >{{ item.label }}</el-checkbox
+      >
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from "@/constant";
+import { ref, defineProps, defineEmits, defineExpose, watch } from "vue";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请填写手机号",
+    type: String
+  },
+  modelValue: {
+    default: [],
+    type: Array
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  },
+  // 绑定的prop
+  checkList: {
+    default: "",
+    type: String
+  }
+});
+watch(
+  () => props.modelValue,
+  (val) => {
+    console.log(val, "val");
+  },
+  { deep: true }
+);
+const emits = defineEmits(["update:modelValue"]);
+const handleCheckAllChange = (e) => {
+  emits("update:modelValue", e);
+};
+</script>

src/components/MyComponents/FormItem/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <el-form
+    ref="elform"
+    :model="listQuery"
+    :label-width="140"
+    :rules="props.rules"
+    :inline="true"
+    label-position="right"
+  >
+    <el-form-item
+      :style="{ width: item.width }"
+      :prop="item.prop"
+      :label="item.text"
+      :label-width="item.labelWidth"  
+      v-for="item in props.formData"
+      :key="item"
+    >
+      <MOSTY.Other
+        v-if="item.type == 'input'"
+        width="100%"
+        clearable
+        v-model="listQuery[item.prop]"
+        :placeholder="`请输入${item.text}`"
+      />
+      <el-input
+        v-model="listQuery[item.prop]"
+        v-else-if="item.type == 'textarea'"
+        :placeholder="`请输入${item.text}`"
+      />
+      <MOSTY.Select
+        v-else-if="item.type == 'select'"
+        width="100%"
+        clearable
+        v-model="listQuery[item.prop]"
+        :dictEnum="item.optionList"
+        :placeholder="`请选择${item.text}`"
+      />
+      <MOSTY.Upload
+        v-else-if="item.type == 'upload'"
+        width="100%"
+        v-model="listQuery[item.prop]"
+      />
+      <MOSTY.CheckBox
+        v-else-if="item.type == 'checkbox'"
+        width="100%"
+        clearable
+        v-model="listQuery[item.prop]"
+        :checkList="item.optionList"
+        :placeholder="`请选择${item.text}`"
+      />
+      <el-radio-group v-model="listQuery[item.prop]" v-else-if="item.type == 'radio'">
+        <el-radio
+          v-for="obj in item.optionList"
+          :key="obj.value"
+          :label="obj.value"
+          >{{ obj.label }}</el-radio
+        >
+      </el-radio-group>
+      <el-date-picker
+        v-else-if="item.type == 'date'"
+        v-model="listQuery[item.prop]"
+        type="date"
+        value-format="YYYY-MM-DD"
+        :placeholder="请选择时间"
+      />
+      <el-date-picker
+        v-else-if="item.type == 'datetime'"
+        v-model="listQuery[item.prop]"
+        type="datetime"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        :placeholder="请选择时间"
+      />
+      <el-date-picker
+        v-else-if="item.type == 'datetimerange'"
+        v-model="listQuery[item.prop]"
+        type="datetimerange"
+        :shortcuts="shortcuts"
+        range-separator="To"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        start-placeholder="选择开始时间"
+        end-placeholder="选择结束时间"
+      />
+      <el-date-picker
+        v-else-if="item.type == 'daterange'"
+        v-model="listQuery[item.prop]"
+        type="daterange"
+        range-separator="To"
+        value-format="YYYY-MM-DD"
+        start-placeholder="选择开始日期"
+        end-placeholder="选择开始日期"
+      />
+      <el-switch
+        v-else-if="item.type == 'switch'"
+        v-model="listQuery[item.prop]"
+        class="ml-2"
+        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+      />
+      <template v-else-if="item.type === 'slot'">
+        <slot :name="item.prop"></slot>
+      </template>
+    </el-form-item>
+  </el-form>
+</template>
+<script setup>
+import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ref, defineProps, defineEmits, defineExpose } from "vue";
+const props = defineProps({
+  //循环的值
+  formData: {
+    default: [],
+    type: Array
+  },
+  modelKey: {
+    default: {},
+    type: Object
+  },
+  // 绑定的prop
+  propName: {
+    default: "",
+    type: String
+  },
+  rules: {
+    default: {},
+    type: Object
+  }
+});
+const elform = ref();
+const listQuery = ref({});
+const emits = defineEmits(["update:modelValue"]);
+const onInput = (e) => {
+  emits("update:modelValue", e);
+};
+const submit = (resfun) => {
+  elform.value.validate((valid) => {
+    if (!valid) return false;
+    resfun(listQuery.value);
+  });
+};
+defineExpose({ submit });
+</script>

src/components/MyComponents/RichOnly/index.vue

@@ -277,12 +277,11 @@ watch(
   display: none;
 }
 </style>
-<style lang="scss" >
+<style lang="scss">
 .el-dialog {
-  --el-dialog-bg-color: #001238 !important;
+  // --el-dialog-bg-color: #fff !important;
-}
-.el-dialog__title {
-  color: #fff !important;
 }
+// .el-dialog__title {
+//   color: #fff !important;
+// }
 </style>
-

src/components/MyComponents/index.js

@@ -5,8 +5,10 @@ import Phone from "./Phone/index.vue";
 import IdentityCard from "./IdentityCard/index.vue";
 import Email from "./Email/index.vue";
 import Other from "./Other/index.vue";
+import FormItem from "./FormItem/index.vue";
 import Sex from "./Sex/index.vue";
 import Select from "./Select/index.vue";
+import CheckBox from "./CheckBox/index.vue";
 import Upload from "./Upload/index.vue";
 import Department from "./Department/index.vue";
 import DepartmentTree from "./DepartmentTree/index.vue";
@@ -26,7 +28,9 @@ export {
   Other,
   Sex,
   Select,
+  CheckBox,
   Upload,
+  FormItem,
   FrameWork2,
   Department,
   DepartmentTree,

src/components/aboutTable/Search.vue

@@ -67,11 +67,21 @@
             v-if="item.showSelectAll"
             v-model="item.checkAll"
             :indeterminate="item.isIndeterminate"
-            @change=" (val) => { handleCheckAllChange(val, item); }"
+            @change="
-            >全选</el-checkbox>
+              (val) => {
+                handleCheckAllChange(val, item);
+              }
+            "
+            >全选</el-checkbox
+          >
           <el-checkbox-group
             v-model="searchObj[item.prop]"
-            @change=" (val) => { handleCheckedCitiesChange(val, item); }" >
+            @change="
+              (val) => {
+                handleCheckedCitiesChange(val, item);
+              }
+            "
+          >
             <el-checkbox
               v-for="obj in item.options"
               :key="obj.value"
@@ -84,7 +94,12 @@
         <el-radio-group
           v-else-if="item.showType === 'radio'"
           v-model="searchObj[item.prop]"
-          @change="(val) => { handleRadioChange(val, item);}">
+          @change="
+            (val) => {
+              handleRadioChange(val, item);
+            }
+          "
+        >
           <el-radio
             v-for="obj in item.options"
             :key="obj.value"
@@ -118,7 +133,15 @@
 </template>
 
 <script setup>
-import { ref, reactive, watch, watchEffect, nextTick, getCurrentInstance, toRefs } from "vue";
+import {
+  ref,
+  reactive,
+  watch,
+  watchEffect,
+  nextTick,
+  getCurrentInstance,
+  toRefs
+} from "vue";
 import * as MOSTY from "@/components/MyComponents/index";
 const { proxy } = getCurrentInstance();
 const props = defineProps({
@@ -184,7 +207,7 @@ const props = defineProps({
         {
           showType: "defaultTime",
           prop: "timeField",
-          options: [],
+          options: []
         }
       ];
     }
@@ -202,12 +225,13 @@ let loadingPage = ref(false);
 const isShowDate = ref(false);
 const emit = defineEmits(["submit", "reset"]);
 let searchObj = reactive({});
-const timeConfig = reactive({ //时间字典筛选和自定义日期组件相关数据
+const timeConfig = reactive({
-  typeValue:"01", //时间字典类型默认
+  //时间字典筛选和自定义日期组件相关数据
-  timeArry:[], //时间筛选自定义默认值
+  typeValue: "01", //时间字典类型默认
-})
+  timeArry: [] //时间筛选自定义默认值
+});
 //全所或自定义选择按钮
-const slectType = ref('qs');
+const slectType = ref("qs");
 // select 的一些默认配置
 const selectDefault = {
   clearable: true, // 是否可以清空
@@ -324,49 +348,52 @@ const dateShortcuts = [
   }
 ];
 //自定义时间选择 item 配置项  value 选中的值
-const screenSelect = (item,value) => {
+const screenSelect = (item, value) => {
-  if(value == "08"){
+  if (value == "08") {
     searchObj[item.prop] = value;
     isShowDate.value = true;
-  }else{
+  } else {
     timeConfig.typeValue = value;
     searchObj[item.prop] = value;
     submit();
   }
-}
+};
 //自定义时间确定时间
 const chooseDateOk = (item) => {
   timeConfig.typeValue = "08";
-  if(timeConfig.timeArry && timeConfig.timeArry.length){ //选择了时间
+  if (timeConfig.timeArry && timeConfig.timeArry.length) {
+    //选择了时间
     searchObj[item.propStart] = timeConfig.timeArry[0];
     searchObj[item.propEnd] = timeConfig.timeArry[1];
-  }else{ //清空了时间
+  } else {
+    //清空了时间
     searchObj[item.prop] = "01";
     timeConfig.typeValue = "01";
   }
   isShowDate.value = false;
   submit();
-}
+};
 //全所-部门选择回调
 const organizatioHland = (val) => {
-  let item = getArr.find(item=>item.showType == 'qsOrZdy');
+  let item = getArr.find((item) => item.showType == "qsOrZdy");
   searchObj[item.propBm] = val?.data?.orgCode || "";
-  if (!val || val == "") { //清空了部门选择后清空责任区ID
+  if (!val || val == "") {
+    //清空了部门选择后清空责任区ID
     slectType.value = "qs";
     delete searchObj[item.propZrq];
   }
-  submit()
+  submit();
 };
 //全所-责任区回调
 const zrqHland = (val) => {
-  let item = getArr.find(item=>item.showType == 'qsOrZdy');
+  let item = getArr.find((item) => item.showType == "qsOrZdy");
   searchObj[item.propZrq] = val || ""; //责任区选择
   submit();
 };
 //自定义时间取消事件
 const popoverCancel = (item) => {
   isShowDate.value = false;
-}
+};
 // 设置不可选的日期
 const disabledDate = (time) => {
   return time.getTime() > Date.now();
@@ -482,7 +509,7 @@ const submit = () => {
 };
 const reset = () => {
   getArr.forEach((item) => {
-    searchObj[item.prop] = item.defaultVal ;
+    searchObj[item.prop] = item.defaultVal;
   });
   emit("submit", searchObj);
   emit("reset", false);
@@ -536,13 +563,13 @@ watchEffect(() => {
         break;
     }
     loadingPage.value = false;
-    searchObj[item.prop] = item.defaultVal ;
+    searchObj[item.prop] = item.defaultVal;
     return item;
   });
 });
 </script>
 
-<style lang = "scss" scoped>
+<style lang="scss" scoped>
 .pageSearch {
   .box {
     display: flex;
@@ -560,5 +587,4 @@ watchEffect(() => {
     }
   }
 }
-
 </style>

src/router/index.js

@@ -51,167 +51,23 @@ export const publicRoutes = [
     {
       path: "/EntertainmentManagemnet",
       name: "EntertainmentManagemnet",
-      meta: { title: "娱乐场所管理", icon: "article" },
+      meta: { title: "四色预警管理", icon: "article" },
       children: [
         {
-          path: "/FaceCapture",
+          path: "/IdentityManage",
-          name: "FaceCapture",
+          name: "IdentityManage",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/FaceCapture/index"),
+          component: () => import("@/views/backOfficeManage/fourColorManage/IdentityManage/index"),
           meta: {
-            title: "人脸抓拍采集信息",
+            title: "身份标签管理",
             icon: "article"
           }
         },
         {
-          path: "/videoGame",
+          path: "/tagManage",
-          name: "videoGame",
+          name: "tagManage",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/VideoGame/index"),
+          component: () => import("@/views/backOfficeManage/fourColorManage/tagManage/index"),
           meta: {
-            title: "娱乐场所电子游戏机信息",
+            title: "标签组合管理",
-            icon: "article"
-          }
-        },
-        {
-          path: "/CaptureCapture",
-          name: "CaptureCapture",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/CaptureCapture/index"),
-          meta: {
-            title: "机动车抓拍采集信息",
-            icon: "article"
-          }
-        },
-        {
-          path: "/PersonnelCapture",
-          name: "PersonnelCapture",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/PersonnelCapture/index"),
-          meta: {
-            title: "人员抓拍采集信息",
-            icon: "article"
-          }
-        },
-        {
-          path: "/AcquisitionDevices",
-          name: "AcquisitionDevices",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/AcquisitionDevices/index"),
-          meta: {
-            title: "智能采集设备信息",
-            icon: "article"
-          }
-        },
-        {
-          path: "/CheckInformation",
-          name: "CheckInformation",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/CheckInformation/index"),
-          meta: {
-            title: "公安机关日常检查信息",
-            icon: "article"
-          }
-        },
-        {
-          path: "/Notices",
-          name: "Notices",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/Notices/index"),
-          meta: {
-            title: "通知通告信息",
-            icon: "article"
-          }
-        },
-        {
-          path: "/LawsRegulations",
-          name: "LawsRegulations",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/LawsRegulations/index"),
-          meta: {
-            title: "法律法规信息",
-            icon: "article"
-          }
-        },
-        {
-          path: "/SuspiciousCircumstances",
-          name: "SuspiciousCircumstances",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/SuspiciousCircumstances/index"),
-          meta: {
-            title: "可疑情况信息",
-            icon: "article"
-          }
-        },
-        {
-          path: "/PolicePresence",
-          name: "PolicePresence",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/PolicePresence/index"),
-          meta: {
-            title: "警情情况信息",
-            icon: "article"
-          }
-        },
-        {
-          path: "/EcurityDeviceInformation",
-          name: "EcurityDeviceInformation",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/EcurityDeviceInformation/index"),
-          meta: {
-            title: "安全防范设备信息",
-            icon: "article"
-          }
-        },
-        {
-          path: "/CasesInvolved",
-          name: "CasesInvolved",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/CasesInvolved/index"),
-          meta: {
-            title: "从业人员涉及案事件信息",
-            icon: "article"
-          }
-        },
-        {
-          path: "/VenueTriggerInformation",
-          name: "VenueTriggerInformation",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/VenueTriggerInformation/index"),
-          meta: {
-            title: "场所处罚信息",
-            icon: "article"
-          }
-        },
-        {
-          path: "/PeaceCase",
-          name: "PeaceCase",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/PeaceCase/index"),
-          meta: {
-            title: "场所案事件信息",
-            icon: "article"
-          }
-        },
-        {
-          path: "/Practitioners",
-          name: "Practitioners",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/Practitioners/index"),
-          meta: {
-            title: "从业人员",
-            icon: "article"
-          }
-        },
-        {
-          path: "/VenueAttachments",
-          name: "VenueAttachments",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/VenueAttachments/index"),
-          meta: {
-            title: "娱乐场所附加信息管理",
-            icon: "article"
-          }
-        },
-        {
-          path: "/PersonnelLogs",
-          name: "PersonnelLogs",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/PersonnelLogs/index"),
-          meta: {
-            title: "娱乐场所从业人员日志信息",
-            icon: "article"
-          }
-        },
-        {
-          path: "/Entertainment",
-          name: "Entertainment",
-          component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/Entertainment/index"),
-          meta: {
-            title: "娱乐场所信息管理",
             icon: "article"
           }
         },
@@ -220,14 +76,23 @@ export const publicRoutes = [
     {
       path: "/Mechanics",
       name: "Mechanics",
-      meta: { title: "机修业务", icon: "article" },
+      meta: { title: "智能布控", icon: "article" },
       children: [
         {
-          path: "/AccidentVehicle",
+          path: "/yjControl",
-          name: "AccidentVehicle",
+          name: "yjControl",
-          component: () => import("@/views/backOfficeSystem/Mechanics/AccidentVehicle/index"),
+          component: () => import("@/views/backOfficeManage/ControlManage/yjControl/index"),
           meta: {
-            title: "事故车辆附加信息",
+            title: "预警布控",
+            icon: "article"
+          }
+        },
+        {
+          path: "/myControl",
+          name: "myControl",
+          component: () => import("@/views/backOfficeManage/ControlManage/myControl/index"),
+          meta: {
+            title: "我的布控",
             icon: "article"
           }
         },

src/styles/element-override.scss

@@ -90,20 +90,20 @@ $test: rgba(0, 128, 0, 0.603);
     .form-item-box {
       position: relative;
       .el-input {
-        background-color: #001238;
+        background-color: #fff;
         .el-input__inner {
-          background-color: #001238;
+          background-color: #fff;
         }
         .el-input__count .el-input__count-inner {
-          background-color: #001238;
+          background-color: #fff;
         }
       }
       .el-cascader__tags {
         .el-tag {
-          background: #001238;
+          background: #fff;
         }
         .el-cascader__search-input {
-          background: #001238;
+          background: #fff;
         }
         .el-cascader__search-input {
           margin: 2px 0 2px 13px !important;
@@ -131,11 +131,11 @@ $test: rgba(0, 128, 0, 0.603);
       .el-input {
         border: #57d040;
         .el-input__inner {
-          background-color: #001238;
+          background-color: #fff;
           // border: 1px solid #57d040;
         }
         .el-input__count .el-input__count-inner {
-          background-color: #001238;
+          background-color: #fff;
         }
       }
       .el-cascader__tags {

src/views/backOfficeManage/ControlManage/myControl/components/AddMx.vue

@@ -0,0 +1,117 @@
+<template>
+  <el-dialog
+    :title="title"
+    width="600px"
+    v-model="dialogVisible"
+    @close="closed"
+  >
+    <MOSTY.FormItem
+      :formData="formData"
+      ref="elform"
+      :modelKey="listQuery"
+      :rules="rules"
+    >
+    </MOSTY.FormItem>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="updatePwd">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { useStore } from "vuex";
+import { ElMessage } from "element-plus";
+import { editPassword } from "@/api/sys";
+import * as MOSTY from "@/components/MyComponents/index";
+import { defineProps, watch, ref, onMounted, nextTick } from "vue";
+import {
+  saveRoleMenuInfo,
+  getRoleMenuIds,
+  getMenuTree,
+  getPasswordLevel
+} from "@/api/user-manage";
+const elform = ref();
+const title = ref();
+const formData = ref([
+  {
+    text: "模型名称",
+    prop: "czjsdw",
+    type: "input",
+    width: "100%"
+  },
+  {
+    text: "范围模型类型",
+    prop: "czjsdw",
+    type: "select",
+    width: "100%",
+    optionList: [
+      { label: "消息推送", value: "1" },
+      { label: "短信发送", value: "0" }
+    ]
+  },
+  {
+    text: "生效时间范围",
+    prop: "sxsjfw",
+    type: "datetime",
+    width: "100%"
+  },
+  {
+    text: "感知源信息",
+    prop: "gzyxx",
+    type: "slot",
+    width: "100%"
+  },
+  {
+    text: "地图范围",
+    prop: "dtfw",
+    type: "slot",
+    width: "100%"
+  }
+]);
+const dialogVisible = ref(false);
+const store = useStore();
+const listQuery = ref({});
+
+const emits = defineEmits(["update:modelValue", "updateRole"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+const init = (row) => {
+  title.value = "添加范围模型";
+  dialogVisible.value = true;
+};
+const updatePwd = () => {
+  dialogVisible.value = false;
+};
+defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+.editPassword-page {
+  .table-header-wrap {
+    width: 380px;
+  }
+
+  .input_span {
+    span {
+      display: inline-block;
+      width: 50px;
+      height: 10px;
+      border: 1px solid #ccc;
+
+      &:first-child {
+        border-right: 0;
+        border-radius: 5px 0 0 5px;
+      }
+
+      &:last-child {
+        border-left: 0;
+        border-radius: 0 5px 5px 0;
+      }
+    }
+  }
+}
+</style>

src/views/backOfficeManage/ControlManage/myControl/components/drawer.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-drawer
+    v-model="drawerShow"
+    title="范围模型(3)"
+    size="16%"
+    :direction="direction"
+    :before-close="handleClose"
+    custom-class="bk_drawer_box"
+  >
+    <MOSTY.FormItem
+      :formData="formData"
+      ref="elform"
+      :modelKey="listQuery"
+      :rules="rules"
+    >
+    </MOSTY.FormItem>
+    <el-button type="primary" @click="addEdit('add', '')">
+      <el-icon style="vertical-align: middle"><Search /></el-icon>
+      <span style="vertical-align: middle">查询</span>
+    </el-button>
+    <el-button type="primary" @click="addEdit('add', '')">
+      <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
+      <span style="vertical-align: middle">添加范围模型</span>
+    </el-button>
+    <ul>
+      <li v-for="item in listData" :key="item">
+        <div class="title_text">{{ item.title }}</div>
+        <div class="mxlx_text">模型类型:{{ item.mxlx }}</div>
+        <div class="line"></div>
+        <div class="flex just-between">
+          <el-checkbox v-model="checked1" label="启用" size="large" />
+          <div class="flex">
+            <el-link class="mr10" type="primary">设置</el-link>
+            <el-link type="danger">删除</el-link>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </el-drawer>
+</template>
+<script setup>
+import { ref, reactive, onMounted, defineProps } from "vue";
+import * as MOSTY from "@/components/MyComponents/index";
+const props = defineProps({
+  modelValue: {
+    default: false,
+    type: Boolean
+  }
+});
+const drawerShow = ref(false);
+const direction = ref("rtl");
+const formData = ref([
+  {
+    text: "模型名称",
+    prop: "czjsdw",
+    type: "input",
+    width: "100%"
+  },
+  {
+    text: "启用状态",
+    prop: "czjsdw",
+    type: "select",
+    width: "100%",
+    optionList: [
+      { label: "消息推送", value: "1" },
+      { label: "短信发送", value: "0" }
+    ]
+  }
+]);
+const listData = ref([
+  { title: "巴宜区公园外围模型", mxlx: "重点区域预警模型" }
+]);
+const init = (row) => {
+  drawerShow.value = true;
+};
+defineExpose({ init });
+</script>
+<style lang="scss" scoped>
+.title_text {
+  color: #0386fb;
+  font-size: 16px;
+  font-weight: 400;
+}
+.mxlx_text {
+  color: #777575;
+  font-size: 14px;
+}
+::v-deep .el-form-item__label {
+  width: 90px !important;
+}
+ul {
+  margin-top: 10px;
+  li {
+    border-radius: 5px 5px 5px 5px;
+    border: 1px solid #c8cfdc;
+    padding: 6px;
+    box-sizing: border-box;
+    .line {
+      width: 100%;
+      height: 1px;
+      border-bottom: 1px dashed #c8cfdc;
+      margin: 6px 0;
+    }
+  }
+}
+
+</style>

src/views/backOfficeManage/ControlManage/myControl/components/editAddForm.vue

@@ -0,0 +1,369 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span class="title">{{ title }} </span>
+      <div>
+        <el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button>
+        <el-button size="small" @click="close">关闭</el-button>
+      </div>
+    </div>
+    <MOSTY.FormItem :formData="formData" ref="elform" :modelKey="listQuery" :rules="rules">
+      <template #bkfw>
+        <div>布控范围</div>
+      </template>
+    </MOSTY.FormItem>
+    <div class="bkry_box">
+      <div class="title_text">布控人员</div>
+      <div class="title_text">
+        <el-button type="primary" @click="addEdit('add', '')">新增</el-button>
+        <el-button type="danger" @click="addEdit('add', '')">删除</el-button>
+      </div>
+    </div>
+    <!-- 表格 -->
+    <!-- <div class="tabBox"> -->
+    <MyTable
+      :tableData="pageData.tableData"
+      :tableColumn="pageData.tableColumn"
+      :tableHeight="pageData.tableHeight"
+      :key="pageData.keyCount"
+      :tableConfiger="pageData.tableConfiger"
+      :controlsWidth="pageData.controlsWidth"
+      @chooseData="chooseData"
+    >
+      <template #sfjs="{ row }">
+        <DictTag :value="row.sfjs" :options="list.sf" />
+      </template>
+      <template #xxlx="{ row }">
+        <DictTag :value="row.xxlx" :options="list.xxlx" />
+      </template>
+      <!-- 操作 -->
+      <template #controls="{ row }">
+        <el-button size="small" @click="addEdit('edit', row)">编辑</el-button>
+        <el-button size="small" @click="delDictItem([row.id])" type="danger"
+          >删除</el-button
+        >
+      </template>
+    </MyTable>
+    <div class="bkry_box mt4">
+      <div class="title_text">审批信息</div>
+    </div>
+    <MOSTY.FormItem
+      :formData="formDataSp"
+      ref="elform"
+      :modelKey="spForm"
+      :rules="rules"
+    >
+      <template #czjsdw class="flex">
+        <div class="flex">
+          <el-select v-model="spForm.czjsdw" placeholder="Select">
+            <el-option label="123" value="1" />
+          </el-select>
+          <el-checkbox-group v-model="spForm.czjsdw">
+            <el-checkbox label="1">责任单位</el-checkbox>
+            <el-checkbox label="1">活动发生地</el-checkbox>
+            <el-checkbox label="1">指定单位</el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </template>
+    </MOSTY.FormItem>
+    <div style="height: 200px; max-width: 600px">
+      <el-steps direction="vertical" :active="1">
+        <el-step>
+          <template #title>发起申请</template>
+          <template #description>
+            <div class="step_item">审核人：王五</div>
+            <div class="step_item">发起部门：巴宜区公安局城区派出所</div>
+          </template>
+        </el-step>
+        <el-step>
+          <template #title>审核确认</template>
+          <template #description>
+            <div class="step_item">审核人：王五</div>
+            <div class="step_item">发起部门：巴宜区公安局</div>
+          </template>
+        </el-step>
+        <el-step>
+          <template #title>审核确认</template>
+          <template #description>
+            <div class="step_item">审核人：王五</div>
+            <div class="step_item">发起部门：巴宜区公安局</div>
+          </template>
+        </el-step>
+      </el-steps>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
+import * as rule from "@/utils/rules.js";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import * as MOSTY from "@/components/MyComponents/index";
+import {
+  ref,
+  defineExpose,
+  reactive,
+  onMounted,
+  defineEmits,
+  getCurrentInstance,
+  nextTick
+} from "vue";
+const emit = defineEmits(["updateDate"]);
+const props = defineProps({
+  dic: Object
+});
+const { proxy } = getCurrentInstance();
+const dialogForm = ref(false); //弹窗
+const spForm = ref({});
+const formDataSp = ref([
+  {
+    text: "处置接收单位",
+    prop: "czjsdw",
+    type: "slot",
+    width: "100%"
+  },
+  {
+    text: "提醒方式",
+    prop: "sfbqdl",
+    type: "checkbox",
+    width: "48%",
+    optionList: [
+      { label: "消息推送", value: "1" },
+      { label: "短信发送", value: "0" }
+    ]
+  },
+  {
+    text: "签收时间",
+    prop: "sfbqdj",
+    type: "datetime",
+    width: "48%"
+  }
+]);
+const formData = ref([
+  {
+    text: "布控标题",
+    prop: "bqmc",
+    type: "input",
+    width: "48%"
+  },
+  {
+    text: "预警标签模型",
+    prop: "sfbqdl",
+    type: "select",
+    width: "48%",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "所属警种",
+    prop: "bqmc",
+    type: "input",
+    width: "48%"
+  },
+  {
+    text: "布控对象",
+    prop: "bqmc",
+    type: "input",
+    width: "48%"
+  },
+  {
+    text: "布控范围",
+    prop: "bkfw",
+    type: "slot",
+    width: "100%"
+  },
+  {
+    text: "布控要素",
+    prop: "sfbqxl",
+    type: "select",
+    width: "48%",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "布控时间",
+    prop: "sfbqdj",
+    type: "datetimerange",
+    width: "48%"
+  },
+  {
+    text: "处置要求",
+    prop: "sfbqys",
+    type: "select",
+    width: "48%",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "布控类别",
+    prop: "xwbqdl",
+    type: "select",
+    width: "48%",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "布控类型",
+    prop: "xwbqdl",
+    type: "select",
+    width: "48%",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "布控级别",
+    prop: "sfbqdj",
+    type: "select",
+    width: "48%",
+    value: "",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "布控事由",
+    prop: "sfbqjf",
+    type: "textarea",
+    width: "48%"
+  },
+  {
+    text: "附件",
+    prop: "fjdz",
+    type: "upload",
+    width: "100%"
+  }
+]);
+const listQuery = ref({
+  sfbqdj: []
+}); //表单
+
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 160, //操作栏宽度
+  tableColumn: [
+    { label: "照片", prop: "sfjs", showSolt: true },
+    { label: "姓名", prop: "name" },
+    { label: "性别", prop: "xxrs" },
+    { label: "身份证号", prop: "sfjs", showSolt: true },
+    { label: "户籍地", prop: "dxxx", showSolt: true },
+    { label: "现居住地", prop: "xzxm" },
+    { label: "手机号", prop: "bkfw" },
+    { label: "虚拟身份", prop: "yjxx", showSolt: true },
+    { label: "车牌号", prop: "jsdw", showSolt: true },
+    { label: " 车架号", prop: "czyq", showSolt: true },
+    { label: " 特征描述", prop: "kssj", showSolt: true },
+    { label: " 人员标签", prop: "jssj", showSolt: true }
+  ]
+});
+const loading = ref(false);
+const elform = ref();
+const title = ref("");
+const rules = reactive({
+  bqmc: [{ required: true, message: "请输入标签名称", trigger: "blur" }]
+});
+const editpeo = ref();
+onMounted(() => {});
+// 初始化数据
+const init = (type, row, lx) => {
+  dialogForm.value = true;
+  title.value = "布控信息";
+  if (row) getDataById(row.id);
+};
+// 根据id查询详情
+const getDataById = (id) => {
+  let url = "";
+  qcckGet({ id }, url).then((res) => {
+    listQuery.value = res;
+    nextTick(() => {
+      editpeo.value.getList();
+    });
+  });
+};
+const changeInput = (val) => {
+  listQuery.value = {
+    [Object.keys(val)]: val[Object.keys(val)],
+    ...listQuery.value
+  };
+  console.log(listQuery.value, "formData.value");
+};
+// 提交
+const submit = () => {
+  elform.value.submit(handleInfoFn);
+};
+const handleInfoFn = (val) => {
+  qcckPost(val, "url")
+    .then((res) => {
+      proxy.$message({ type: "success", message: title.value + "成功" });
+      close();
+    })
+    .catch(() => {});
+};
+// 关闭
+const close = () => {
+  listQuery.value = {};
+  dialogForm.value = false;
+  loading.value = false;
+};
+defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+.bkry_box {
+  color: #000;
+  display: flex;
+  justify-content: space-between;
+  font-size: 18px;
+  padding: 0 20px;
+  margin-bottom: 4px;
+}
+::v-deep .el-checkbox-group {
+  display: flex;
+}
+.step_item {
+  border: 1px solid rgba(200, 207, 220, 1);
+  margin-right: 10px;
+  padding: 2px 10px;
+}
+::v-deep .el-step__title.is-finish {
+  color: rgba(200, 207, 220, 1);
+}
+::v-deep .el-step__description.is-finish {
+  color: rgba(200, 207, 220, 1);
+}
+::v-deep .el-step__title.is-process {
+  color: rgba(200, 207, 220, 1);
+}
+::v-deep .el-step__description.is-process {
+  color: rgba(200, 207, 220, 1);
+}
+::v-deep .el-step__description {
+  display: flex;
+}
+::v-deep .el-step__head.is-process {
+  color: rgba(200, 207, 220, 1);
+}
+</style>

src/views/backOfficeManage/ControlManage/myControl/index.vue

@@ -0,0 +1,295 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <PageTitle title="我的布控">
+        <el-button type="primary" @click="addEdit('add', '')">
+          发起布控
+        </el-button>
+        <el-button type="primary" @click="addEdit('add', '')">导出</el-button>
+        <el-button type="danger" @click="addEdit('add', '')"
+          >批量删除</el-button
+        >
+        <el-button type="primary" @click="openAddMxFn">
+          <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
+          <span style="vertical-align: middle">添加标签模型</span>
+        </el-button>
+        <el-button type="primary" @click="openAddMxFn">
+          <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
+          <span style="vertical-align: middle">添加范围模型</span>
+        </el-button>
+      </PageTitle>
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox">
+      <Search
+        :searchArr="searchConfiger"
+        @submit="onSearch"
+        :key="pageData.keyCount"
+      >
+      </Search>
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox">
+      <MyTable
+        :tableData="pageData.tableData"
+        :tableColumn="pageData.tableColumn"
+        :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount"
+        :tableConfiger="pageData.tableConfiger"
+        :controlsWidth="pageData.controlsWidth"
+        @chooseData="chooseData"
+      >
+        <template #sfjs="{ row }">
+          <DictTag :value="row.sfjs" :options="list.sf" />
+        </template>
+        <template #xxlx="{ row }">
+          <DictTag :value="row.xxlx" :options="list.xxlx" />
+        </template>
+        <!-- 操作 -->
+        <template #controls="{ row }">
+          <el-button size="small" @click="addEdit('edit', row)">编辑</el-button>
+          <el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button>
+        </template>
+      </MyTable>
+      <Pages
+        @changeNo="changeNo"
+        @changeSize="changeSize"
+        :tableHeight="pageData.tableHeight"
+        :pageConfiger="{
+          ...pageData.pageConfiger,
+          total: pageData.total
+        }"
+      ></Pages>
+    </div>
+    <!-- 编辑详情 -->
+    <EditAddForm
+      ref="detailDiloag"
+      :dic="{ xxlx: list.xxlx, sf: list.sf }"
+      @updateDate="getList"
+    />
+    <Drawer ref="drawerDiloag" />
+    <AddMx ref="addmxDiloag" />
+  </div>
+</template>
+
+<script setup>
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import EditAddForm from "./components/editAddForm.vue";
+import Drawer from "./components/drawer.vue";
+import AddMx from "./components/AddMx.vue";
+import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+const { proxy } = getCurrentInstance();
+const qypzDialog = ref();
+const detailDiloag = ref();
+const searchBox = ref(); //搜索框
+const chooseType = ref("学校"); //选择的类型
+const list = reactive({
+  chooseList: ["学校", "医院", "娱乐场所", "民爆库房"],
+  xxlx: [
+    { label: "职业学校", value: "01" },
+    { label: "大专", value: "02" },
+    { label: "本科", value: "03" },
+    { label: "研究生", value: "04" },
+    { label: "博士", value: "05" }
+  ],
+  sf: [
+    { label: "是", value: "1" },
+    { label: "否", value: "0" }
+  ]
+});
+const addmxDiloag=ref()
+const drawerDiloag=ref()
+const searchConfiger = ref([
+  {
+    label: "布控级别",
+    prop: "sfbqdl",
+    placeholder: "请选择布控级别",
+    showType: "select",
+    options: list.xxlx
+  },
+  {
+    label: "布控对象",
+    prop: "sfbqdl",
+    placeholder: "请选择布控对象",
+    showType: "select",
+    options: list.xxlx
+  },
+  {
+    label: "布控状态",
+    prop: "sfbqdl",
+    placeholder: "请选择布控状态",
+    showType: "select",
+    options: list.xxlx
+  },
+  {
+    label: "布控时间",
+    prop: "sfbqdl",
+    placeholder: "请选择布控时间",
+    showType: "datetimerange",
+    options: list.xxlx
+  },
+  {
+    label: "预警标签模型",
+    prop: "sfbqdl",
+    placeholder: "请选择预警标签模型",
+    showType: "select",
+    options: list.xxlx
+  },
+  {
+    label: "最近预警时间",
+    prop: "sfbqdl",
+    placeholder: "请选择最近预警时间",
+    showType: "date",
+    options: list.xxlx
+  },
+  {
+    label: "布控对象信息",
+    prop: "sfbqdl",
+    placeholder: "请选择布控对象信息",
+    showType: "select",
+    options: list.xxlx
+  },
+  {
+    label: "处置接收部门",
+    prop: "sfbqdl",
+    placeholder: "请选择处置接收部门",
+    showType: "select",
+    options: list.xxlx
+  }
+]);
+const queryFrom = ref({});
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 160, //操作栏宽度
+  // 布控级别 布控标题 布控对象 布控对象信息 预警标签模型 布控范围 预警信息 处置接收单位 处置要求 开始时间 结束时间 最近预警时间 失效时间 布控发起人 布控状态
+  tableColumn: [
+    { label: "布控级别", prop: "name" },
+    { label: "布控标题", prop: "xxrs" },
+    { label: "布控对象", prop: "sfjs", showSolt: true },
+    { label: "布控对象信息", prop: "dxxx", showSolt: true },
+    { label: "预警标签模型", prop: "xzxm" },
+    { label: "布控范围", prop: "bkfw" },
+    { label: "预警信息", prop: "yjxx", showSolt: true },
+    { label: "处置接收单位", prop: "jsdw", showSolt: true },
+    { label: " 处置要求", prop: "czyq", showSolt: true },
+    { label: " 开始时间", prop: "kssj", showSolt: true },
+    { label: " 结束时间", prop: "jssj", showSolt: true },
+    { label: " 最近预警时间", prop: "yjsj", showSolt: true },
+    { label: " 失效时间", prop: "sxsj", showSolt: true },
+    { label: " 布控发起人", prop: "fqr", showSolt: true },
+    { label: " 布控状态", prop: "bkzt", showSolt: true }
+  ]
+});
+onMounted(() => {
+  getList(chooseType.value);
+  tabHeightFn();
+});
+
+// 搜索
+const onSearch = (val) => {
+  queryFrom.value = { ...val };
+  pageData.pageConfiger.pageCurrent = 1;
+  getList(chooseType.value);
+};
+
+const changeNo = (val) => {
+  pageData.pageConfiger.pageNum = val;
+  getList(chooseType.value);
+};
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList(chooseType.value);
+};
+const openAddMxFn=()=>{
+  addmxDiloag.value.init();
+  // drawerDiloag.value.init();打开侧边组件
+}
+// 获取列表
+const getList = (val) => {
+  let url = "";
+  switch (val) {
+    case "学校":
+      url = "/mosty-lzcj/tbDwXx/queryList";
+      break;
+    case "医院":
+      url = "/mosty-lzcj/tbDwYy/queryList";
+      break;
+    case "娱乐场所":
+      url = "/mosty-lzcj/TbDwYlth/queryList";
+      break;
+    case "民爆库房":
+      url = "/mosty-lzcj/tbDwMbkf/queryList";
+      break;
+  }
+  pageData.tableConfiger.loading = true;
+  let data = { ...pageData.pageConfiger, ...queryFrom.value };
+  qcckPost(data, url)
+    .then((res) => {
+      pageData.tableData = res.records || [];
+      pageData.total = res.total;
+      pageData.tableConfiger.loading = false;
+    })
+    .catch(() => {
+      pageData.tableConfiger.loading = false;
+    });
+};
+// 删除
+const delDictItem = (ids) => {
+  let url = "";
+  switch (chooseType.value) {
+    case "学校":
+      url = "/mosty-lzcj/tbDwXx/delete";
+      break;
+    case "医院":
+      url = "/mosty-lzcj/tbDwYy/delete";
+      break;
+    case "娱乐场所":
+      url = "/mosty-lzcj/TbDwYlth/delete";
+      break;
+    case "民爆库房":
+      url = "/mosty-lzcj/tbDwMbkf/delete";
+      break;
+  }
+  // proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
+  //   qcckPost(ids,url).then(()=>{
+  //     proxy.$message({ type: "success",  message: "删除成功" });
+  //     getList(chooseType.value);
+  //   })
+  // }).catch(() => {});
+};
+
+// 新增
+const addEdit = (type, row) => {
+  detailDiloag.value.init(type, row, chooseType.value);
+};
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight =
+    window.innerHeight - searchBox.value.offsetHeight - 250;
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+</style>

src/views/backOfficeManage/fourColorManage/IdentityManage/components/editAddForm.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span class="title">{{ title }} </span>
+      <div>
+        <el-button
+          type="primary"
+          size="small"
+          :loading="loading"
+          @click="submit"
+          >保存</el-button
+        >
+        <el-button size="small" @click="close">关闭</el-button>
+      </div>
+    </div>
+    <MOSTY.FormItem
+      :formData="formData"
+      ref="elform"
+      :modelKey="listQuery"
+      :rules="rules"
+    />
+  </div>
+</template>
+
+<script setup>
+import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import {
+  ref,
+  defineExpose,
+  reactive,
+  onMounted,
+  defineEmits,
+  getCurrentInstance,
+  nextTick
+} from "vue";
+const emit = defineEmits(["updateDate"]);
+const props = defineProps({
+  dic: Object
+});
+const { proxy } = getCurrentInstance();
+const dialogForm = ref(false); //弹窗
+const formData = ref([
+  {
+    text: "组合标签名称",
+    prop: "bqmc",
+    type: "input",
+    required: true
+  },
+  {
+    text: "身份标签大类",
+    prop: "sfbqdl",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "身份标签细类",
+    prop: "sfbqxl",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "身份标签等级",
+    prop: "sfbqdj",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "身份标签颜色",
+    prop: "sfbqys",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "行为标签大类",
+    prop: "xwbqdl",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "行为标签细类",
+    prop: "xwbqdl",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "行为标签等级",
+    prop: "sfbqdj",
+    type: "select",
+    value: "",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "行为标签颜色",
+    prop: "xwbqys",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "身份标签积分",
+    prop: "sfbqjf",
+    type: "input"
+  },
+  {
+    text: "行为标签积分",
+    prop: "xwbqjf",
+    type: "input"
+  },
+  {
+    text: "组合标签积分",
+    prop: "zhbqjf",
+    type: "input"
+  }
+]);
+const listQuery = ref({
+  sfbqdj: []
+}); //表单
+const loading = ref(false);
+const elform = ref();
+const title = ref("");
+const rules = reactive({
+  bqmc: [{ required: true, message: "请输入标签名称", trigger: "blur" }]
+});
+const editpeo = ref();
+onMounted(() => {});
+// 初始化数据
+const init = (type, row, lx) => {
+  dialogForm.value = true;
+  title.value = row ? "编辑" : "新增";
+  if (row) getDataById(row.id);
+};
+// 根据id查询详情
+const getDataById = (id) => {
+  let url = "";
+  qcckGet({ id }, url).then((res) => {
+    listQuery.value = res;
+    nextTick(() => {
+      editpeo.value.getList();
+    });
+  });
+};
+const changeInput = (val) => {
+  listQuery.value = {
+    [Object.keys(val)]: val[Object.keys(val)],
+    ...listQuery.value
+  };
+  console.log(listQuery.value, "formData.value");
+};
+// 提交
+const submit = () => {
+  elform.value.submit(handleInfoFn);
+};
+const handleInfoFn = (val) => {
+  qcckPost(val, "url")
+    .then((res) => {
+      proxy.$message({ type: "success", message: title.value + "成功" });
+      close();
+    })
+    .catch(() => {});
+};
+// 关闭
+const close = () => {
+  listQuery.value = {};
+  dialogForm.value = false;
+  loading.value = false;
+};
+defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+</style>

src/views/backOfficeManage/fourColorManage/IdentityManage/index.vue

@@ -0,0 +1,277 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <PageTitle title="身份标签管理">
+        <el-button type="primary" @click="addEdit('add', '')">
+          <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
+          <span style="vertical-align: middle">新增</span>
+        </el-button>
+      </PageTitle>
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
+        <template #defaultSlot>
+          <el-select placeholder="请选择类型" v-model="chooseType" @change="handleType">
+            <el-option v-for="it in list.chooseList" :key="it" :value="it" :label="it"></el-option>
+          </el-select>
+        </template>
+      </Search>
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox">
+      <MyTable
+        :tableData="pageData.tableData"
+        :tableColumn="pageData.tableColumn"
+        :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount"
+        :tableConfiger="pageData.tableConfiger"
+        :controlsWidth="pageData.controlsWidth"
+        @chooseData="chooseData"
+      >
+        <template #sfjs="{ row }">
+          <DictTag :value="row.sfjs" :options="list.sf" />
+        </template>
+        <template #xxlx="{ row }">
+          <DictTag :value="row.xxlx" :options="list.xxlx" />
+        </template>
+        <!-- 操作 -->
+        <template #controls="{ row }">
+          <el-button size="small" @click="addEdit('edit', row)">编辑</el-button>
+          <el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button>
+        </template>
+      </MyTable>
+      <Pages
+        @changeNo="changeNo"
+        @changeSize="changeSize"
+        :tableHeight="pageData.tableHeight"
+        :pageConfiger="{
+          ...pageData.pageConfiger,
+          total: pageData.total
+        }"
+      ></Pages>
+    </div>
+    <!-- 编辑详情 -->
+    <EditAddForm ref="detailDiloag" :dic="{xxlx:list.xxlx,sf:list.sf}" @updateDate="getList" />
+  </div>
+</template>
+
+<script setup>
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import EditAddForm from "./components/editAddForm.vue";
+import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+const { proxy } = getCurrentInstance();
+const qypzDialog = ref();
+const detailDiloag = ref();
+const searchBox = ref(); //搜索框
+const chooseType = ref('学校') //选择的类型
+const list = reactive({
+  chooseList :['学校','医院','娱乐场所','民爆库房'],
+  xxlx:[
+    {label:'职业学校',value:'01'},
+    {label:'大专',value:'02'},
+    {label:'本科',value:'03'},
+    {label:'研究生',value:'04'},
+    {label:'博士',value:'05'},
+  ],
+  sf:[
+    {label:'是',value:'1'},
+    {label:'否',value:'0'},
+  ],
+})
+const searchConfiger = ref([
+  { label: "标签名称",prop:'bqmc',placeholder: "请输入学校名称", showType: "input",},
+  { label: "标签大类",prop:'sfbqdl' ,placeholder: "请选择标签大类", showType: "select",options:list.xxlx },
+  { label: "标签细类",prop:'sfbqdl' ,placeholder: "请选择标签细类", showType: "select",options:list.xxlx },
+  { label: "标签等级",prop:'sfbqdl' ,placeholder: "请选择标签等级", showType: "select",options:list.xxlx },
+  { label: "标签颜色",prop:'sfbqdl' ,placeholder: "请选择标签颜色", showType: "select",options:list.xxlx },
+  { label: "积分分值",prop:'bqmc',placeholder: "请输入积分分值", showType: "input",},
+]);
+const queryFrom = ref({});
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 160, //操作栏宽度
+  tableColumn: [
+    { label: "标签名称", prop: "name" },
+    { label: "标签大类", prop: "xxrs" },
+    { label: "标签细类", prop: "sfjs",showSolt:true},
+    { label: "标签等级", prop: "xxlx",showSolt:true},
+    { label: "标签颜色", prop: "xzxm"},
+    { label: "积分分值",  prop: "lxfs" },
+  ]
+});
+onMounted(() => {
+  getList(chooseType.value)
+  tabHeightFn();
+});
+
+//选择类型
+const handleType = (val) => {
+  pageData.keyCount++;
+  pageData.pageConfiger.pageCurrent = 1;
+  searchConfiger.value = searchConfiger.value.slice(0,1);
+  let arr = [],tableColumn = [];
+  switch(val){
+    case '学校':
+      arr = [
+        { label: "学校名称" ,prop:'name', placeholder: "请输入学校名称", showType: "input" },
+        { label: "学校类型" ,prop:'xxlx', placeholder: "请选择学校类型", showType: "select",options:list.xxlx },
+      ]
+      tableColumn = [
+        { label: "学校名称", prop: "name" },
+        { label: "学校人数", prop: "xxrs" },
+        { label: "是否寄宿学校", prop: "sfjs",showSolt:true},
+        { label: "学校类型", prop: "xxlx",showSolt:true},
+        { label: "校长", prop: "xzxm"},
+        { label: "校长联系方式",  prop: "lxfs" },
+        { label: "要求配备保安数",  prop: "pbbbs" },
+        { label: "自聘保安数",  prop: "zpbbs" },
+        { label: "第三方保安数",  prop: "sfbbs" },
+      ]
+      break;
+    case '医院':
+      arr = [{ label: "医院名称" ,prop:'name',placeholder: "请输入医院名称", showType: "input" }];
+      tableColumn = [
+        { label: "医院名称", prop: "name" },
+        { label: "医院法人", prop: "frxm" },
+        { label: "法人联系方式",  prop: "lxfs" },
+        { label: "床位数",  prop: "cws" },
+        { label: "医院人数",  prop: "yyrs" },
+        { label: "医院人流量",  prop: "yyrll" },
+        { label: "要求配备保安数",  prop: "pbbbs" },
+        { label: "自聘保安数",  prop: "zpbbs" },
+        { label: "第三方保安数",  prop: "sfbbs" },
+      ]
+      break;
+    case '娱乐场所':
+      arr = [{ label: "娱乐场所" ,prop:'name',placeholder: "请输娱乐场所名称", showType: "input" }]
+      tableColumn = [
+        { label: "场所名称", prop: "name" },
+        { label: "法人", prop: "frxm" },
+        { label: "法人联系方式",  prop: "lxfs" },
+        { label: "面积",  prop: "mj" },
+        { label: "要求配备保安数",  prop: "pbbbs" },
+        { label: "自聘保安数",  prop: "zpbbs" },
+        { label: "第三方保安数",  prop: "sfbbs" },
+      ]
+      break;
+    case '民爆库房':
+      arr = [{ label: "民爆库房" ,prop:'bmkf',placeholder: "请输民爆库房名称", showType: "input" }]
+      tableColumn = [
+        { label: "库房名称", prop: "name" },
+        { label: "库房所有人", prop: "kfsyr" },
+        { label: "所有人联系方式",  prop: "syrLxfs" },
+        { label: "库房使用人",  prop: "kfUser" },
+        { label: "使用人联系方式",  prop: "userLxfs" },
+        { label: "库容量",  prop: "kry" },
+        { label: "要求配备保安数",  prop: "pbbbs" },
+        { label: "自聘保安数",  prop: "zpbbs" },
+        { label: "第三方保安数",  prop: "sfbbs" },
+      ]
+      break;
+  }
+  searchConfiger.value = searchConfiger.value.concat(arr);
+  pageData.tableColumn = tableColumn;
+  getList(chooseType.value)
+}
+// 搜索
+const onSearch = (val) =>{
+  queryFrom.value = {...val}
+  pageData.pageConfiger.pageCurrent = 1;
+  getList(chooseType.value)
+}
+
+const changeNo = (val) =>{
+  pageData.pageConfiger.pageNum = val;
+  getList(chooseType.value)
+}
+const changeSize = (val) =>{
+  pageData.pageConfiger.pageSize = val;
+  getList(chooseType.value)
+}
+
+// 获取列表
+const getList = (val) =>{
+  let url = ''
+  switch(val){
+    case '学校': 
+      url = '/mosty-lzcj/tbDwXx/queryList';
+      break;
+    case '医院': 
+      url = '/mosty-lzcj/tbDwYy/queryList';
+      break;
+    case '娱乐场所': 
+      url = '/mosty-lzcj/TbDwYlth/queryList';
+      break;
+    case '民爆库房': 
+      url = '/mosty-lzcj/tbDwMbkf/queryList';
+      break;
+  }
+  pageData.tableConfiger.loading = true;
+  let data = { ...pageData.pageConfiger,...queryFrom.value };
+  qcckPost(data,url).then(res=>{
+    pageData.tableData = res.records || [];
+    pageData.total = res.total;
+    pageData.tableConfiger.loading = false;
+  }).catch(()=>{ pageData.tableConfiger.loading = false; })
+}
+// 删除
+const delDictItem = (ids) =>{
+  let url = ''
+  switch(chooseType.value){
+    case '学校': 
+      url = '/mosty-lzcj/tbDwXx/delete';
+      break;
+    case '医院': 
+      url = '/mosty-lzcj/tbDwYy/delete';
+      break;
+    case '娱乐场所': 
+      url = '/mosty-lzcj/TbDwYlth/delete';
+      break;
+    case '民爆库房': 
+      url = '/mosty-lzcj/tbDwMbkf/delete';
+      break;
+  }
+  // proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
+  //   qcckPost(ids,url).then(()=>{
+  //     proxy.$message({ type: "success",  message: "删除成功" });
+  //     getList(chooseType.value);
+  //   })
+  // }).catch(() => {});
+}
+
+// 新增
+const addEdit = (type, row) => {
+  detailDiloag.value.init(type, row,chooseType.value);
+};
+
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+</style>

src/views/backOfficeManage/fourColorManage/tagManage/components/editAddForm.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span class="title">{{ title }} </span>
+      <div>
+        <el-button
+          type="primary"
+          size="small"
+          :loading="loading"
+          @click="submit"
+          >保存</el-button
+        >
+        <el-button size="small" @click="close">关闭</el-button>
+      </div>
+    </div>
+    <MOSTY.FormItem
+      :formData="formData"
+      ref="elform"
+      :modelKey="listQuery"
+      :rules="rules"
+    />
+  </div>
+</template>
+
+<script setup>
+import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import {
+  ref,
+  defineExpose,
+  reactive,
+  onMounted,
+  defineEmits,
+  getCurrentInstance,
+  nextTick
+} from "vue";
+const emit = defineEmits(["updateDate"]);
+const props = defineProps({
+  dic: Object
+});
+const { proxy } = getCurrentInstance();
+const dialogForm = ref(false); //弹窗
+const formData = ref([
+  {
+    text: "组合标签名称",
+    prop: "bqmc",
+    type: "input",
+    required: true
+  },
+  {
+    text: "身份标签大类",
+    prop: "sfbqdl",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "身份标签细类",
+    prop: "sfbqxl",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "身份标签等级",
+    prop: "sfbqdj",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "身份标签颜色",
+    prop: "sfbqys",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "行为标签大类",
+    prop: "xwbqdl",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "行为标签细类",
+    prop: "xwbqdl",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "行为标签等级",
+    prop: "sfbqdj",
+    type: "select",
+    value: "",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "行为标签颜色",
+    prop: "xwbqys",
+    type: "select",
+    optionList: [
+      { label: "是", value: "1" },
+      { label: "否", value: "0" }
+    ]
+  },
+  {
+    text: "身份标签积分",
+    prop: "sfbqjf",
+    type: "input"
+  },
+  {
+    text: "行为标签积分",
+    prop: "xwbqjf",
+    type: "input"
+  },
+  {
+    text: "组合标签积分",
+    prop: "zhbqjf",
+    type: "input"
+  }
+]);
+const listQuery = ref({
+  sfbqdj: []
+}); //表单
+const loading = ref(false);
+const elform = ref();
+const title = ref("");
+const rules = reactive({
+  bqmc: [{ required: true, message: "请输入标签名称", trigger: "blur" }]
+});
+const editpeo = ref();
+onMounted(() => {});
+// 初始化数据
+const init = (type, row, lx) => {
+  dialogForm.value = true;
+  title.value = row ? "编辑" : "新增";
+  if (row) getDataById(row.id);
+};
+// 根据id查询详情
+const getDataById = (id) => {
+  let url = "";
+  qcckGet({ id }, url).then((res) => {
+    listQuery.value = res;
+    nextTick(() => {
+      editpeo.value.getList();
+    });
+  });
+};
+const changeInput = (val) => {
+  listQuery.value = {
+    [Object.keys(val)]: val[Object.keys(val)],
+    ...listQuery.value
+  };
+  console.log(listQuery.value, "formData.value");
+};
+// 提交
+const submit = () => {
+  elform.value.submit(handleInfoFn);
+};
+const handleInfoFn = (val) => {
+  qcckPost(val, "url")
+    .then((res) => {
+      proxy.$message({ type: "success", message: title.value + "成功" });
+      close();
+    })
+    .catch(() => {});
+};
+// 关闭
+const close = () => {
+  listQuery.value = {};
+  dialogForm.value = false;
+  loading.value = false;
+};
+defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+</style>

src/views/backOfficeManage/fourColorManage/tagManage/index.vue

@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <PageTitle title="标签组合管理">
+        <el-button type="primary" @click="addEdit('add', '')">
+          <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
+          <span style="vertical-align: middle">新增</span>
+        </el-button>
+      </PageTitle>
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
+        <template #defaultSlot>
+          <el-select placeholder="请选择类型" v-model="chooseType" @change="handleType">
+            <el-option v-for="it in list.chooseList" :key="it" :value="it" :label="it"></el-option>
+          </el-select>
+        </template>
+      </Search>
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox">
+      <MyTable
+        :tableData="pageData.tableData"
+        :tableColumn="pageData.tableColumn"
+        :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount"
+        :tableConfiger="pageData.tableConfiger"
+        :controlsWidth="pageData.controlsWidth"
+        @chooseData="chooseData"
+      >
+        <template #sfjs="{ row }">
+          <DictTag :value="row.sfjs" :options="list.sf" />
+        </template>
+        <template #xxlx="{ row }">
+          <DictTag :value="row.xxlx" :options="list.xxlx" />
+        </template>
+        <!-- 操作 -->
+        <template #controls="{ row }">
+          <el-button size="small" @click="addEdit('edit', row)">编辑</el-button>
+          <el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button>
+        </template>
+      </MyTable>
+      <Pages
+        @changeNo="changeNo"
+        @changeSize="changeSize"
+        :tableHeight="pageData.tableHeight"
+        :pageConfiger="{
+          ...pageData.pageConfiger,
+          total: pageData.total
+        }"
+      ></Pages>
+    </div>
+    <!-- 编辑详情 -->
+    <EditAddForm ref="detailDiloag" :dic="{xxlx:list.xxlx,sf:list.sf}" @updateDate="getList" />
+  </div>
+</template>
+
+<script setup>
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import EditAddForm from "./components/editAddForm.vue";
+import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+const { proxy } = getCurrentInstance();
+const qypzDialog = ref();
+const detailDiloag = ref();
+const searchBox = ref(); //搜索框
+const chooseType = ref('学校') //选择的类型
+const list = reactive({
+  chooseList :['学校','医院','娱乐场所','民爆库房'],
+  xxlx:[
+    {label:'职业学校',value:'01'},
+    {label:'大专',value:'02'},
+    {label:'本科',value:'03'},
+    {label:'研究生',value:'04'},
+    {label:'博士',value:'05'},
+  ],
+  sf:[
+    {label:'是',value:'1'},
+    {label:'否',value:'0'},
+  ],
+})
+const searchConfiger = ref([
+  { label: "标签名称",prop:'bqmc',placeholder: "请输入学校名称", showType: "input",},
+  { label: "标签大类",prop:'sfbqdl' ,placeholder: "请选择标签大类", showType: "select",options:list.xxlx },
+  { label: "标签细类",prop:'sfbqdl' ,placeholder: "请选择标签细类", showType: "select",options:list.xxlx },
+  { label: "标签等级",prop:'sfbqdl' ,placeholder: "请选择标签等级", showType: "select",options:list.xxlx },
+  { label: "标签颜色",prop:'sfbqdl' ,placeholder: "请选择标签颜色", showType: "select",options:list.xxlx },
+  { label: "积分分值",prop:'bqmc',placeholder: "请输入积分分值", showType: "input",},
+]);
+const queryFrom = ref({});
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 160, //操作栏宽度
+  tableColumn: [
+    { label: "组合标签名称", prop: "name" },
+    { label: "组合标签等级", prop: "xxrs" },
+    { label: "身份标签大类", prop: "sfjs",showSolt:true},
+    { label: "身份标签细类", prop: "xxlx",showSolt:true},
+    { label: "身份标签等级", prop: "xzxm"},
+    { label: "身份标签颜色",  prop: "lxfs" },
+    { label: "行为标签大类", prop: "xxlx",showSolt:true},
+    { label: "行为标签细类", prop: "xxlx",showSolt:true},
+    { label: " 行为标签等级", prop: "xxlx",showSolt:true},
+    { label: " 行为标签颜色", prop: "xxlx",showSolt:true},
+    { label: " 身份标签积分", prop: "xxlx",showSolt:true},
+    { label: " 行为标签积分", prop: "xxlx",showSolt:true},
+    { label: " 组合标签积分", prop: "xxlx",showSolt:true},
+  ]
+});
+onMounted(() => {
+  getList(chooseType.value)
+  tabHeightFn();
+});
+
+//选择类型
+const handleType = (val) => {
+  pageData.keyCount++;
+  pageData.pageConfiger.pageCurrent = 1;
+  searchConfiger.value = searchConfiger.value.slice(0,1);
+  let arr = [],tableColumn = [];
+  switch(val){
+    case '学校':
+      arr = [
+        { label: "学校名称" ,prop:'name', placeholder: "请输入学校名称", showType: "input" },
+        { label: "学校类型" ,prop:'xxlx', placeholder: "请选择学校类型", showType: "select",options:list.xxlx },
+      ]
+      tableColumn = [
+        { label: "学校名称", prop: "name" },
+        { label: "学校人数", prop: "xxrs" },
+        { label: "是否寄宿学校", prop: "sfjs",showSolt:true},
+        { label: "学校类型", prop: "xxlx",showSolt:true},
+        { label: "校长", prop: "xzxm"},
+        { label: "校长联系方式",  prop: "lxfs" },
+        { label: "要求配备保安数",  prop: "pbbbs" },
+        { label: "自聘保安数",  prop: "zpbbs" },
+        { label: "第三方保安数",  prop: "sfbbs" },
+      ]
+      break;
+    case '医院':
+      arr = [{ label: "医院名称" ,prop:'name',placeholder: "请输入医院名称", showType: "input" }];
+      tableColumn = [
+        { label: "医院名称", prop: "name" },
+        { label: "医院法人", prop: "frxm" },
+        { label: "法人联系方式",  prop: "lxfs" },
+        { label: "床位数",  prop: "cws" },
+        { label: "医院人数",  prop: "yyrs" },
+        { label: "医院人流量",  prop: "yyrll" },
+        { label: "要求配备保安数",  prop: "pbbbs" },
+        { label: "自聘保安数",  prop: "zpbbs" },
+        { label: "第三方保安数",  prop: "sfbbs" },
+      ]
+      break;
+    case '娱乐场所':
+      arr = [{ label: "娱乐场所" ,prop:'name',placeholder: "请输娱乐场所名称", showType: "input" }]
+      tableColumn = [
+        { label: "场所名称", prop: "name" },
+        { label: "法人", prop: "frxm" },
+        { label: "法人联系方式",  prop: "lxfs" },
+        { label: "面积",  prop: "mj" },
+        { label: "要求配备保安数",  prop: "pbbbs" },
+        { label: "自聘保安数",  prop: "zpbbs" },
+        { label: "第三方保安数",  prop: "sfbbs" },
+      ]
+      break;
+    case '民爆库房':
+      arr = [{ label: "民爆库房" ,prop:'bmkf',placeholder: "请输民爆库房名称", showType: "input" }]
+      tableColumn = [
+        { label: "库房名称", prop: "name" },
+        { label: "库房所有人", prop: "kfsyr" },
+        { label: "所有人联系方式",  prop: "syrLxfs" },
+        { label: "库房使用人",  prop: "kfUser" },
+        { label: "使用人联系方式",  prop: "userLxfs" },
+        { label: "库容量",  prop: "kry" },
+        { label: "要求配备保安数",  prop: "pbbbs" },
+        { label: "自聘保安数",  prop: "zpbbs" },
+        { label: "第三方保安数",  prop: "sfbbs" },
+      ]
+      break;
+  }
+  searchConfiger.value = searchConfiger.value.concat(arr);
+  pageData.tableColumn = tableColumn;
+  getList(chooseType.value)
+}
+// 搜索
+const onSearch = (val) =>{
+  queryFrom.value = {...val}
+  pageData.pageConfiger.pageCurrent = 1;
+  getList(chooseType.value)
+}
+
+const changeNo = (val) =>{
+  pageData.pageConfiger.pageNum = val;
+  getList(chooseType.value)
+}
+const changeSize = (val) =>{
+  pageData.pageConfiger.pageSize = val;
+  getList(chooseType.value)
+}
+
+// 获取列表
+const getList = (val) =>{
+  let url = ''
+  switch(val){
+    case '学校': 
+      url = '/mosty-lzcj/tbDwXx/queryList';
+      break;
+    case '医院': 
+      url = '/mosty-lzcj/tbDwYy/queryList';
+      break;
+    case '娱乐场所': 
+      url = '/mosty-lzcj/TbDwYlth/queryList';
+      break;
+    case '民爆库房': 
+      url = '/mosty-lzcj/tbDwMbkf/queryList';
+      break;
+  }
+  pageData.tableConfiger.loading = true;
+  let data = { ...pageData.pageConfiger,...queryFrom.value };
+  qcckPost(data,url).then(res=>{
+    pageData.tableData = res.records || [];
+    pageData.total = res.total;
+    pageData.tableConfiger.loading = false;
+  }).catch(()=>{ pageData.tableConfiger.loading = false; })
+}
+// 删除
+const delDictItem = (ids) =>{
+  let url = ''
+  switch(chooseType.value){
+    case '学校': 
+      url = '/mosty-lzcj/tbDwXx/delete';
+      break;
+    case '医院': 
+      url = '/mosty-lzcj/tbDwYy/delete';
+      break;
+    case '娱乐场所': 
+      url = '/mosty-lzcj/TbDwYlth/delete';
+      break;
+    case '民爆库房': 
+      url = '/mosty-lzcj/tbDwMbkf/delete';
+      break;
+  }
+  // proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
+  //   qcckPost(ids,url).then(()=>{
+  //     proxy.$message({ type: "success",  message: "删除成功" });
+  //     getList(chooseType.value);
+  //   })
+  // }).catch(() => {});
+}
+
+// 新增
+const addEdit = (type, row) => {
+  detailDiloag.value.init(type, row,chooseType.value);
+};
+
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+</style>

src/views/backOfficeSystem/EntertainmentManagemnet/FaceCapture/index.vue

@@ -1,11 +1,15 @@
 <template>
   <div>
     <div class="titleBox">
-      <PageTitle title="人脸抓拍采集信息"/>
+      <PageTitle title="身份标签管理" />
     </div>
     <!-- 搜索 -->
     <div ref="searchBox">
-      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
+      <Search
+        :searchArr="searchConfiger"
+        @submit="onSearch"
+        :key="pageData.keyCount"
+      />
     </div>
     <!-- 表格 -->
     <div class="tabBox">
@@ -16,14 +20,16 @@
         :key="pageData.keyCount"
         :tableConfiger="pageData.tableConfiger"
         :controlsWidth="pageData.controlsWidth"
-        @chooseData="chooseData">
+        @chooseData="chooseData"
+      >
         <!-- 抓拍图片 -->
         <template #captureImage="{ row }">
           <el-image
             style="width: 100px; height: 60px"
             :src="row.captureImage"
             fit="cover"
-            :preview-src-list="[row.captureImage]">
+            :preview-src-list="[row.captureImage]"
+          >
           </el-image>
         </template>
         <!-- 人像图片 -->
@@ -32,7 +38,8 @@
             style="width: 100px; height: 60px"
             :src="row.personImage"
             fit="cover"
-            :preview-src-list="[row.personImage]">
+            :preview-src-list="[row.personImage]"
+          >
           </el-image>
         </template>
         <!-- 车牌图片 -->
@@ -41,12 +48,15 @@
             style="width: 100px; height: 60px"
             :src="row.licensePlateImage"
             fit="cover"
-            :preview-src-list="[row.licensePlateImage]">
+            :preview-src-list="[row.licensePlateImage]"
+          >
           </el-image>
         </template>
         <!-- 操作 -->
         <template #controls="{ row }">
-          <el-button size="small" @click="addEdit('detail', row)">详情</el-button>
+          <el-button size="small" @click="addEdit('detail', row)"
+            >详情</el-button
+          >
         </template>
       </MyTable>
       <Pages
@@ -77,18 +87,53 @@ const detailDiloag = ref();
 const searchBox = ref(); //搜索框
 
 const searchConfiger = ref([
-  { label: "视频设备编号", prop: 'deviceNo', placeholder: "请输入视频设备编号", showType: "input" },
+  {
-  { label: "日期时间", prop: 'captureTime', placeholder: "请选择日期时间", showType: "date" },
+    label: "视频设备编号",
+    prop: "deviceNo",
+    placeholder: "请输入视频设备编号",
+    showType: "input"
+  },
+  {
+    label: "日期时间",
+    prop: "captureTime",
+    placeholder: "请选择日期时间",
+    showType: "date"
+  }
 ]);
 
 const queryFrom = ref({});
 const pageData = reactive({
   tableData: [
-    {deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00'},
+    {
-    {deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00'},
+      deviceNo: "123456789",
-    {deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00'},
+      captureImage: "",
-    {deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00'},
+      personImage: "",
-    {deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00'},
+      captureTime: "2025/1/20 10:00:00"
+    },
+    {
+      deviceNo: "123456789",
+      captureImage: "",
+      personImage: "",
+      captureTime: "2025/1/20 10:00:00"
+    },
+    {
+      deviceNo: "123456789",
+      captureImage: "",
+      personImage: "",
+      captureTime: "2025/1/20 10:00:00"
+    },
+    {
+      deviceNo: "123456789",
+      captureImage: "",
+      personImage: "",
+      captureTime: "2025/1/20 10:00:00"
+    },
+    {
+      deviceNo: "123456789",
+      captureImage: "",
+      personImage: "",
+      captureTime: "2025/1/20 10:00:00"
+    }
   ],
   keyCount: 0,
   tableConfiger: {
@@ -106,12 +151,12 @@ const pageData = reactive({
     { label: "视频设备编号", prop: "deviceNo" },
     { label: "抓拍图片", prop: "captureImage", slot: true },
     { label: "人像图片", prop: "personImage", slot: true },
-    { label: "日期时间", prop: "captureTime" },
+    { label: "日期时间", prop: "captureTime" }
   ]
 });
 
 onMounted(() => {
-  getList()
+  getList();
   tabHeightFn();
 });
 
@@ -119,26 +164,26 @@ onMounted(() => {
 const handleType = (val) => {
   pageData.keyCount++;
   pageData.pageConfiger.pageCurrent = 1;
-  getList()
+  getList();
-}
+};
 // 搜索
-const onSearch = (val) =>{
+const onSearch = (val) => {
-  queryFrom.value = {...val}
+  queryFrom.value = { ...val };
   pageData.pageConfiger.pageCurrent = 1;
-  getList()
+  getList();
-}
+};
 
-const changeNo = (val) =>{
+const changeNo = (val) => {
   pageData.pageConfiger.pageNum = val;
-  getList()
+  getList();
-}
+};
-const changeSize = (val) =>{
+const changeSize = (val) => {
   pageData.pageConfiger.pageSize = val;
-  getList()
+  getList();
-}
+};
 
 // 获取列表
-const getList = (val) =>{
+const getList = (val) => {
   // pageData.tableConfiger.loading = true;
   let data = { ...pageData.pageConfiger, ...queryFrom.value };
   // let url = '/mosty-lzcj/tbDwMbkf/queryList';
@@ -147,7 +192,7 @@ const getList = (val) =>{
   //   pageData.total = res.total;
   //   pageData.tableConfiger.loading = false;
   // }).catch(()=>{ pageData.tableConfiger.loading = false; })
-}
+};
 
 // 详情
 const addEdit = (type, row) => {
@@ -156,7 +201,8 @@ const addEdit = (type, row) => {
 
 // 表格高度计算
 const tabHeightFn = () => {
-  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+  pageData.tableHeight =
+    window.innerHeight - searchBox.value.offsetHeight - 250;
   window.onresize = function () {
     tabHeightFn();
   };

src/views/backOfficeSystem/SecurityInformation/components/mbkf.vue

@@ -7,7 +7,6 @@
  * @FilePath: \lz\src\views\backOfficeSystem\editPassword\components\mbkf.vue
 -->
 <template>
-   
     <el-form-item style="width: 48%" prop="name" label="库房名称">
       <MOSTY.Other width="100%" clearable v-model="listQuery.name" placeholder="请输入库房名称"/>
     </el-form-item>
@@ -26,11 +25,9 @@
     <el-form-item style="width: 48%" prop="kry" label="库容量">
       <MOSTY.Other width="100%" clearable v-model="listQuery.kry" type="Number" placeholder="请输入库容量" />
     </el-form-item>
-
     <el-form-item style="width: 48%" prop="sfdbs" label="是否导爆索">
       <MOSTY.Select width="100%" clearable v-model="listQuery.sfdbs" :dictEnum="props.dic.sf" placeholder="请选择是否寄宿制学校"/>
     </el-form-item>
-    
     <el-form-item style="width: 48%" prop="pbbbs" label="要求配置保安人数">
       <MOSTY.Other width="100%" clearable v-model="listQuery.pbbbs" placeholder="请输入要求配置保安人数" type="Number" />
     </el-form-item>