更新代码

src/assets/css/element-plus.scss

@@ -1,17 +1,5 @@
-::v-deep .el-button--default {
+
-  color: #fff;
+
-  border: 1px solid #cccccc;
-  background: #818080;
-}
-::v-deep .el-button {
-  color: #fff;
-  border: 1px solid #cccccc;
-  --el-button-bg-color: #818080;
-}
-::v-deep .el-button:focus,
-::v-deep .el-button:hover {
-  background-color: #818080;
-}
 :v-deep .el-card {
   border: 1px solid #146bbe;
   background: #00143d;
@@ -36,15 +24,7 @@
     box-shadow: 0px 0px 8px #0a6bfc;
   }
 }
-.el-button.is-disabled,
+
-.el-button.is-disabled:focus,
-.el-button.is-disabled:hover {
-  color: var(--el-button-disabled-text-color);
-  cursor: not-allowed;
-  background-image: none;
-  background-color: #808596;
-  border-color: var(--el-button-disabled-border-color);
-}
 ::v-deep .el-input-group__append {
   background-color: #ffffff;
   border: 1px solid #e9e9e9;
@@ -120,14 +100,6 @@
   background: transparent;
 }
 
-::v-deep .el-button--primary {
-  background: #1983e5;
-  border: 1px solid #1983e5;
-  &:hover {
-    background: #0084ff;
-    border: 1px solid #0084ff;
-  }
-}
 ::v-deep .el-dialog__title {
   color: #000;
 }
@@ -271,3 +243,7 @@
   width: 100%;
 }
 
+::v-deep .el-link{
+  margin:  5px;
+}
+

src/assets/css/pulic.scss

@@ -1,3 +1,19 @@
+.h-100{
+  height: 100%;
+}
+.w-100{
+  width: 100%;
+}
+.flexcc{
+display: flex;
+justify-content: center;
+align-items: center;
+}
+.flexcb{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  }
 .font10 {
   font-size: 10px;
 }

src/components/MyComponents/Pie3D.vue

@@ -0,0 +1,109 @@
+<template>
+  <div ref="chartRef" :style="{ width: '100%', height: '400px' }"></div>
+</template>
+
+<script>
+import { defineComponent, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import 'echarts-gl'
+
+export default defineComponent({
+  name: 'Pie3D',
+  setup() {
+    const chartRef = ref(null)
+    let chart = null
+
+    const initChart = () => {
+      if (!chartRef.value) return
+
+      chart = echarts.init(chartRef.value)
+      const option = {
+        backgroundColor: '#1a213c',
+        tooltip: {
+          formatter: '{b}: {c} ({d}%)',
+          backgroundColor: 'rgba(0,0,0,0.7)',
+          borderColor: '#1a213c',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        legend: {
+          orient: 'vertical',
+          right: '5%',
+          top: 'center',
+          textStyle: {
+            color: '#fff'
+          },
+          formatter: function(name) {
+            const data = option.series[0].data
+            const total = data.reduce((sum, item) => sum + item.value, 0)
+            const target = data.find(item => item.name === name)
+            const percentage = ((target.value / total) * 100).toFixed(0)
+            return `${name}  ${target.value}`
+          }
+        },
+        series: [{
+          type: 'pie',
+          radius: ['30%', '55%'],
+          center: ['40%', '50%'],
+          roseType: false,
+          zlevel: 10,
+          startAngle: 35,
+          selectedMode: 'single',
+          selectedOffset: 10,
+          data: [
+            { value: 18, name: '红色', itemStyle: { color: '#ff4d4f' } },
+            { value: 13, name: '橙色', itemStyle: { color: '#ff7a45' } },
+            { value: 17, name: '黄色', itemStyle: { color: '#ffc53d' } },
+            { value: 2, name: '蓝色', itemStyle: { color: '#40a9ff' } }
+          ],
+          label: {
+            show: true,
+            formatter: '{d}%',
+            color: '#fff',
+            position: 'outside',
+            fontSize: 14,
+            fontWeight: 'bold'
+          },
+          emphasis: {
+            focus: 'self',
+            scaleSize: 10,
+            itemStyle: {
+              shadowBlur: 20,
+              shadowOffsetX: 5,
+              shadowOffsetY: 5,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          },
+          itemStyle: {
+            borderRadius: 4,
+            borderColor: '#1a213c',
+            borderWidth: 2
+          },
+          animationType: 'scale',
+          animationEasing: 'elasticOut',
+          animationDelay: function (idx) {
+            return Math.random() * 200;
+          }
+        }]
+      }
+
+      chart.setOption(option)
+    }
+
+    onMounted(() => {
+      initChart()
+      window.addEventListener('resize', () => {
+        chart && chart.resize()
+      })
+    })
+
+    return {
+      chartRef
+    }
+  }
+})
+</script>
+
+<style scoped>
+</style>

src/components/statis.vue

@@ -0,0 +1,94 @@
+
+<template>
+  <ul class="fp-box">
+    <!-- 默认进来是7位，超过自动加 -->
+    <li ref="lis" v-for="i in countStr.length > 5 ? countStr.length : 5" :key="i" :class="bg">
+      <!-- 每列中的10行数字 -->
+      <span v-for="num in 10" :key="num">
+        <span class="num-wrap">{{ num - 1 }}</span>
+      </span>
+    </li>
+  </ul>
+</template>
+<script setup>
+import { onMounted, ref, watch } from "vue";
+const props = defineProps({
+  count: Number,
+  len: {
+    type: Number,
+    default: 7
+  },
+  bg: String
+});
+const lis = ref();
+const list = ref([]);
+const countStr = ref(""); // 需要展示的数字
+const numberArr = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); // 固定每列中的19行数字
+const numStr = ref(""); // 需要展示的数字字符串
+const numArr = ref([0, 0, 0, 0, 0, 0, 0]); // 默认展示7个数字数组
+watch(
+  () => props.count,
+  (val) => {
+    let str = val.toString();
+    let num = 0;
+    if (str.length < props.len) num = props.len - str.length;
+    for (let i = 0; i < num; i++) {
+      str = "0" + str;
+    }
+    countStr.value = str;
+    initNumCard();
+  },
+  { immediate: true, deep: true }
+);
+onMounted(() => {
+  initNumCard();
+});
+function initNumCard() {
+  numStr.value = countStr.value;
+  numArr.value = numStr.value.split("");
+  const numArrlen = numArr.value.length;
+  // 展示数字的处理，不够7位前面补0
+  // 默认进来是7位，超过自动加
+  for (
+    let i = 0;
+    i < (countStr.value.length > 5 ? countStr.value.length : 5) - numArrlen;
+    i++
+  ) {
+    numArr.value.unshift(0);
+  }
+  if (lis.value) {
+    lis.value.forEach((item, index) => {
+      const ty = numArr.value[index];
+      item.style.transform = `translateY(-${ty * 32}px)`; // 滚动数字(li标签)
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fp-box {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  li {
+    width: 26px;
+    height: 32px;
+    flex-direction: column;
+    transition: transform 1s ease-in-out;
+    & > span {
+      text-align: center;
+      font-size: 20px;
+      color: #ffffff;
+      display: flex;
+      display: inline-block;
+      width: 20px;
+      height: 32px;
+      line-height: 25px; 
+      float: left;
+      .num-wrap {
+        font-family: "DigifaceWide";
+      }
+    }
+  }
+}
+</style>

src/layout/components/SideBar/SideBarMenu.vue

@@ -59,6 +59,7 @@ const activeMenu = computed(() => {
   background-image: linear-gradient(to right,#2356d4 0% ,#8efbde 100%);
   margin: 0 14px;
   border-radius: 4px;
+  padding-left: 26px !important;
 }
 ::v-deep .el-sub-menu .el-menu-item {
   height: 48px;

src/permission.js

@@ -6,50 +6,50 @@ import {
   removeAllItem
 } from "@/utils/storage";
 // 白名单
-const whiteList = ['/login','/', './FourColorWarning','/oatuh_login','/editPassword', '/404', '/401']
+const whiteList = ['/login','/', '/FourColorWarning','/oatuh_login','/editPassword', '/404', '/401']
 /**
  * 路由前置守卫
  * to  去哪里
  * from 来自哪
  *  next 往下走
  */
-let onRun = true;
+// let onRun = true;
-router.beforeEach(async (to, from, next) => {
+// router.beforeEach(async (to, from, next) => {
-  // 存在 token ，进入主页
+//   // 存在 token ，进入主页
-  // if (store.state.user.token) {
+//   // if (store.state.user.token) {
-  // 快捷访问
+//   // 快捷访问
-  if (store.getters.token) {
+//   if (store.getters.token) {
-    // 判断用户资料是否获取
+//     // 判断用户资料是否获取
-    // 若不存在用户信息，则需要获取用户信息
+//     // 若不存在用户信息，则需要获取用户信息
-    // 触发获取用户信息的 action，并获取用户当前权限
+//     // 触发获取用户信息的 action，并获取用户当前权限
-    await store.commit('permission/setRouteReady', true)
+//     await store.commit('permission/setRouteReady', true)
-    // 添加完动态路由之后，需要在进行一次主动跳转
+//     // 添加完动态路由之后，需要在进行一次主动跳转
-    const afterMenuList = await getItem('menusPermission');
+//     const afterMenuList = await getItem('menusPermission');
-    // 处理用户权限，筛选出需要添加的权限
+//     // 处理用户权限，筛选出需要添加的权限
-    if (store.state.permission.routes == 0) {
+//     if (store.state.permission.routes == 0) {
-      const filterRoutes = await store.dispatch('permission/filterRoutes', afterMenuList)
+//       const filterRoutes = await store.dispatch('permission/filterRoutes', afterMenuList)
-      filterRoutes.forEach(item => {
+//       filterRoutes.forEach(item => {
-        router.addRoute(item)
+//         router.addRoute(item)
-      })
+//       })
-      next({
+//       next({
-        ...to,
+//         ...to,
-        replace: true
+//         replace: true
-      })
+//       })
-    } else {
+//     } else {
-      next()
+//       next()
-    }
+//     }
-    // 利用 addRoute 循环添加
+//     // 利用 addRoute 循环添加
-  } else {
+//   } else {
-    const isOatuh = getItem('isOatuh')
+//     const isOatuh = getItem('isOatuh')
-    // 没有token的情况下，可以进入白名单
+//     // 没有token的情况下，可以进入白名单
-    if (whiteList.indexOf(to.path) > -1) {
+//     if (whiteList.indexOf(to.path) > -1) {
-      next()
+//       next()
-    } else {
+//     } else {
-      if (isOatuh) {
+//       if (isOatuh) {
-        next('/oatuh_login')
+//         next('/oatuh_login')
-      } else {
+//       } else {
-        next('/login')
+//         next('/login')
-      }
+//       }
-    }
+//     }
-  }
+//   }
-})
+// })

src/router/index.js

@@ -39,15 +39,6 @@ export const publicRoutes = [
     component: layout,
     redirect: "/FourColorWarning",
     children: [
-      {
-        path: "/",
-        name:'home',
-        component: () => import("@/views/home/index"), //系统登录
-        meta: {
-          title: "首页",
-          icon: "article"
-        }
-    },
     {
       path: "/FourColorWarning",
       name: "FourColorWarning",
@@ -71,111 +62,53 @@ export const publicRoutes = [
             icon: "article"
           }
         },
+        {
+          path: "/BehaviorLabels",
+          name: "BehaviorLabels",
+          component: () => import("@/views/backOfficeSystem/fourColorManage/BehaviorLabels/index"),
+          meta: {
+            title: "行为标签管理",
+            icon: "article"
+          }
+        },
       ],
     },
-    // {
-    //   path: "/Mechanics",
-    //   name: "Mechanics",
-    //   meta: { title: "智能布控", icon: "article" },
-    //   children: [
-    //     {
-    //       path: "/yjControl",
-    //       name: "yjControl",
-    //       component: () => import("@/views/backOfficeManage/ControlManage/yjControl/index"),
-    //       meta: {
-    //         title: "预警布控",
-    //         icon: "article"
-    //       }
-    //     },
-    //     {
-    //       path: "/myControl",
-    //       name: "myControl",
-    //       component: () => import("@/views/backOfficeManage/ControlManage/myControl/index"),
-    //       meta: {
-    //         title: "我的布控",
-    //         icon: "article"
-    //       }
-    //     },
-    //     {
-    //       path: "/VehicleAccessories",
-    //       name: "VehicleAccessories",
-    //       component: () => import("@/views/backOfficeSystem/Mechanics/VehicleAccessories/index"),
-    //       meta: {
-    //         title: "车辆配件业务登记信息",
-    //         icon: "article"
-    //       }
-    //     },
-    //     {
-    //       path: "/VehicleRepairs",
-    //       name: "VehicleRepairs",
-    //       component: () => import("@/views/backOfficeSystem/Mechanics/VehicleRepairs/index"),
-    //       meta: {
-    //         title: "机动车修理业务信息",
-    //         icon: "article"
-    //       }
-    //     },
 
-    //     {
-    //       path: "/CarIntersectionInfo",
-    //       name: "CarIntersectionInfo",
-    //       component: () => import("@/views/backOfficeSystem/Mechanics/CarIntersectionInfo/index"),
-    //       meta: {
-    //         title: "承接车辆交接信息",
-    //         icon: "article"
-    //       }
-    //     },
-    //     {
-    //       path: "/CarBasicInfo",
-    //       name: "CarBasicInfo",
-    //       component: () => import("@/views/backOfficeSystem/Mechanics/CarBasicInfo/index"),
-    //       meta: {
-    //         title: "承接车辆基本信息",
-    //         icon: "article"
-    //       }
-    //     },
-    //     {
-    //       path: "/Practitioners",
-    //       name: "Practitioners",
-    //       component: () => import("@/views/backOfficeSystem/EntertainmentManagemnet/Practitioners/index"),
-    //       meta: {
-    //         title: "从业人员",
-    //         icon: "article"
-    //       }
-    //     },
-    //     {
-    //       path: "/MachineRepair",
-    //       name: "MachineRepair",
-    //       component: () => import("@/views/backOfficeSystem/Mechanics/MachineRepair/index"),
-    //       meta: { title: "机修场所信息管理",icon: "article" }
-    //     },
-        
-    //   ],
-    // },
     {
-      path: "/LockSmith",
+      path: "/IntelligentControl",
-      name: "LockSmith",
+      name: "IntelligentControl",
-      meta: { title: "开锁行业", icon: "article" },
+      meta: { title: "智能布控", icon: "article" },
       children: [
         {
-          path: "/location",
+          path: "/warningControl",
-          name: "location",
+          name: "warningControl",
-          component: () => import("@/views/backOfficeSystem/LockSmith/LocationGL/index"),
+          component: () => import("@/views/backOfficeSystem/IntelligentControl/warningControl/index"),
           meta: {
-            title: "开锁业场所管理",
+            title: "预警布控",
             icon: "article"
           }
         },
         {
-          path: "/business",
+          path: "/myControl",
-          name: "business",
+          name: "myControl",
-          component: () => import("@/views/backOfficeSystem/LockSmith/BusinessGL/index"),
+          component: () => import("@/views/backOfficeSystem/IntelligentControl/myControl/index"),
           meta: {
-            title: "开锁业务信息管理",
+            title: "我的布控",
             icon: "article"
           }
+        },
+        {
+          path: "/ControlApproval",
+          name: "ControlApproval",
+          component: () => import("@/views/backOfficeSystem/IntelligentControl/ControlApproval/index"),
+          meta: {
+            title: "布控审批",
+            icon: "article"
           }
+        },
       ]
     },
+    // ）））））））））））））））））））））
     {
       path: "/Pawnbroking",
       name: "Pawnbroking",

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

@@ -1,107 +0,0 @@
-<template>
-  <el-dialog :title="title" width="600px" v-model="dialogVisible" @close="closed" >
-    <FormMessage :formData="formData" ref="elform" :modelKey="listQuery" :rules="rules"></FormMessage>
-    <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 FormMessage from '@/components/aboutTable/FormMessage/index.vue'
-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

@@ -1,102 +0,0 @@
-<template>
-  <el-drawer
-    v-model="drawerShow"
-    title="范围模型(3)"
-    size="16%"
-    :direction="direction"
-    :before-close="handleClose"
-    custom-class="bk_drawer_box"
-  >
-   <FormMessage :formData="formData" ref="elform" :modelKey="listQuery" :rules="rules"></FormMessage>
-    <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 FormMessage from '@/components/aboutTable/FormMessage/index.vue'
-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

@@ -1,367 +0,0 @@
-<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>
-    <FormMessage :formData="formData" ref="elform" :modelKey="listQuery" :rules="rules">
-      <template #bkfw>
-        <div>布控范围</div>
-      </template>
-    </FormMessage>
-
-    <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>
-    <FormMessage :formData="formDataSp" ref="elform" :modelKey="spForm" :rules="rules">
-      <template #czjsdw>
-        <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>
-    </FormMessage>
- 
-    <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 FormMessage from '@/components/aboutTable/FormMessage/index.vue'
-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

@@ -1,295 +0,0 @@
-<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

@@ -1,196 +0,0 @@
-<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>
-    <FormMessage :formData="formData" ref="elform" :modelKey="listQuery" :rules="rules">
-    </FormMessage>
-    
-  </div>
-</template>
-
-<script setup>
-import FormMessage from '@/components/aboutTable/FormMessage/index.vue'
-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

@@ -1,277 +0,0 @@
-<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

@@ -1,195 +0,0 @@
-<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>
-    <FormMessage :formData="formData" ref="elform" :modelKey="listQuery" :rules="rules">
-    </FormMessage>
-  </div>
-</template>
-
-<script setup>
-import FormMessage from '@/components/aboutTable/FormMessage/index.vue'
-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

@@ -1,284 +0,0 @@
-<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/IntelligentControl/ControlApproval/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="titleBox">
-      <PageTitle title="开锁业场所管理"/>
+      <PageTitle title="布控审批"/>
     </div>
     <!-- 搜索 -->
     <div ref="searchBox">

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="titleBox">
-      <PageTitle title="开锁业务信息管理"/>
+      <PageTitle title="我的布控"/>
     </div>
     <!-- 搜索 -->
     <div ref="searchBox">

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

@@ -0,0 +1,19 @@
+<template>
+  <div class="echartsBox">ggg</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.echartsBox {
+  width: 100%;
+  height: 100%;
+  background: rgba(0,29,75,0.6);
+  border-radius: 0 0 4px 4px;
+}
+
+</style>

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

@@ -0,0 +1,66 @@
+<template>
+  <div class="count-container">
+    <div class="count-item">
+      <div class="count-title">布控总数</div>
+      <div class="count-number"><Statis :count="dataform.bkzs" :len="7" /></div>
+    </div>
+    <div class="count-item">
+      <div class="count-title">已处置数</div>
+      <div class="count-number"><Statis :count="dataform.czs" :len="7" /></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Statis from "@/components/statis.vue";
+import { reactive } from "vue";
+const dataform = reactive({
+  bkzs: 287,
+  czs: 123
+});
+</script>
+
+<style scoped lang="scss">
+.count-container {
+  display: flex;
+  padding: 10px 5px;
+  background: rgba(0, 29, 75, 0.4);
+  gap: 4px;
+}
+
+.count-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  padding: 6px;
+  background: url("~@/assets/images/bg12.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+
+.count-title {
+  color: #fff;
+  font-size: 14px;
+  text-align: center;
+  margin-right: 4px;
+  background: url("~@/assets/images/bg13.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+
+.count-number {
+  font-family: "Digital-7", monospace;
+  font-size: 32px;
+  background: #1e3799;
+  color: #00ffff;
+  padding: 8px;
+  border-radius: 4px;
+  text-align: center;
+  letter-spacing: 2px;
+  width: 150px;
+  height: 33px;
+  background: url("~@/assets/images/statis.png") no-repeat center center;
+  background-size: 100% 100%;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+</style>

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

@@ -0,0 +1,165 @@
+<template>
+  <div id="circlecz" class="circlecz" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { ref, onMounted, watch, defineProps } from "vue";
+
+onMounted(() => {
+  lineChartFn();
+});
+function lineChartFn() {
+  var chartDom = document.getElementById("circlecz");
+  var myChart = echarts.init(chartDom);
+  var option;
+  option = {
+    legend: {
+      type: "plain",
+      show: true,
+      right: 0,
+      textStyle: { color: "#ddd" },
+      data: [
+        { name: "总数" },
+        { name: "已处置" }
+      ]
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      top: "25%",
+      right: "10%",
+      left: "10%",
+      bottom: "22%"
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: ['巴宜区','工布江达县','波密县','朗县','墨脱县','察隅县','米林县'],
+        axisLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        },
+        axisLabel: {
+          margin: 10,
+          color: "#e2e9ff",
+          textStyle: {
+            fontSize: 14
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        // name: '单位：万元',
+        axisLabel: {
+          formatter: "{value}",
+          color: "#e2e9ff"
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255,255,255,1)"
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        name: "总数",
+        type: "bar",
+        data: [10,20,30,40,50,60,70],
+        barWidth: "10px",
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0,0,0,1,[
+              {
+                  offset: 0,
+                  color: "rgba(0,244,255,1)" // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "rgba(0,77,167,1)" // 100% 处的颜色
+                }
+              ],
+              false
+            ),
+          }
+        },
+        markPoint: {
+          symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
+          symbolSize: [10, 4], // 设置扁圆的宽和高
+          itemStyle: {
+            color: '#087df9' // 圆盘颜色
+          },
+          data: [10,20,30,40,50,60,70].map((obj, index) => ({
+            xAxis: index, // 对应柱子的横坐标
+            yAxis: obj + 0 // 柱子的值加上一些偏移量
+          }))
+        },
+      },
+      {
+        name: "已处置",
+        type: "bar",
+        data: [10,20,30,40,50,60,70],
+        barWidth: "10px",
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0,0,0,1,
+              [
+                {
+                  offset: 0,
+                  color: "rgba(24, 232, 229, 1)" // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "rgba(3, 110, 83, 1)" // 100% 处的颜色
+                }
+              ],
+              false
+            ),
+          }
+        },
+        markPoint: {
+          symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
+          symbolSize: [10, 4], // 设置扁圆的宽和高
+          itemStyle: {
+            color: '#00FFFF' // 圆盘颜色
+          },
+          data: [10,20,30,40,50,60,70].map((obj, index) => ({
+            xAxis: index, // 对应柱子的横坐标
+            yAxis: obj + 0 // 柱子的值加上一些偏移量
+          }))
+        },
+      },
+    ]
+  };
+
+  option && myChart.setOption(option);
+  window.onresize = function () {
+    myChart.resize();
+  };
+  document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
+}
+onMounted(() => {
+  lineChartFn();
+});
+</script>
+
+<style lang="scss" scoped>
+.circlecz {
+  height: 100%;
+  background: rgba(0,29,75,0.6);
+  border-radius: 0 0 4px 4px;
+}
+</style>

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

@@ -0,0 +1,142 @@
+<template>
+  <div class="carCnt_bottom relative flex align-center">
+    <div class="bottom-item-left">
+      <div class="imgIcon"></div>
+      <div class="leftImg">
+        <div class="sirxle"></div>
+      </div>
+    </div>
+    <ul class="bottom-item-right noScollLine">
+      <li class="itemChild" v-for="item in dataObj.countList" :key="item">
+        <div class="label">
+          <span class="imgicon mr10" :style="{ background: item.color }"></span>
+          {{ item.label }}
+        </div>
+        <div class="num">{{ item.num }}</div>
+        <div class="per" :style="{ color: item.color }">{{ item.persont }}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive,defineProps, onUnmounted } from "vue";
+const dataObj = reactive({
+  btns:['今日','本周','自定义'],//按钮
+  head:{num:0,hb:0,tb:0},
+  countList:[
+    {color:'#F57100',label:'刑事重点人员',num:0,persont:'0%'},
+    {color:'#FFD15C',label:'禁毒重点人员',num:0,persont:'0%'},
+    {color:'#0072FF',label:'治安重点人员',num:0,persont:'0%'},
+    {color:'#00FFFF',label:'经侦重点人员',num:0,persont:'0%'},
+    {color:'#09FF66',label:'其他',num:0,persont:'0%'},
+  ]
+})
+</script>
+
+<style lang="scss" scoped>
+@mixin textColor($color1, $color2) {
+  background-image: linear-gradient(0deg, $color1 0%, $color2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+@mixin beforeText($width, $height, $left: 0, $top: 0) {
+  position: absolute;
+  content: "";
+  left: $left;
+  top: $top;
+  height: $height;
+  width: $width;
+}
+.carCnt_bottom {
+  height: 100%;
+  position: relative;
+  background: rgba(0,29,75,0.6);
+  border-radius: 0 0 4px 4px;
+  .bottom-item-left {
+    width: 120px;
+    height: 120px;
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    .imgIcon {
+      position: absolute;
+      left: 39px;
+      top: 40px;
+      width: 42px;
+      height: 40px;
+      background: url("~@/assets/images/imgIcon1.png") no-repeat center center;
+      background-size: 100% 100%;
+      border-radius: 50%;
+      animation: spin 10s infinite linear;
+    }
+    .leftImg {
+      width: 100%;
+      height: 100%;
+      &::before {
+        position: absolute;
+        content: "";
+        left: 0;
+        top: 0;
+        width: 120px;
+        height: 120px;
+        background: url("~@/assets/images/sircleOut.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+        animation: revoleCrile 10s infinite linear;
+      }
+      .sirxle {
+        position: absolute;
+        width: 91px;
+        height: 91px;
+        left: 15px;
+        top: 15px;
+        background: url("~@/assets/images/sircleIn.png") no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .bottom-item-right {
+    width: calc(100% - 150px);
+    height: 100%;
+    overflow: hidden;
+    overflow-y: auto;
+    margin-left: 30px;
+    position: absolute;
+    left: 116px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    .itemChild {
+      display: flex;
+      align-items: center;
+      height: 26px;
+      border-bottom: 1px dashed #0072ff;
+    }
+    .label {
+      width: 60%;
+      .imgicon {
+        display: inline-block;
+        width: 13px;
+        height: 6px;
+        border-radius: 2px;
+        transform: rotate(-3deg) skew(5deg, 5deg);
+      }
+    }
+    .num {
+      width: 20%;
+    }
+    .per {
+      width: 20%;
+    }
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate((1turn));
+  }
+}
+</style>

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

@@ -0,0 +1,166 @@
+<template>
+  <div class="personCard relative flex mb10 pointer">
+    <div class="cxbq absolute">已完成</div>
+    <div class="avatarBox relative">
+      <div class="marks f12 absolute" :class="changeBg(props.item.yjjb)">
+        处置
+      </div>
+      <div><img width="80" height="120" :src="pro" alt=""></div>
+      <span class="smallbtn">全息档案</span>
+    </div>
+    <div class="infoBox">
+      <div class="basicInfo">
+        <span class="name">{{ props.item.name }}</span>
+        <span class="idCard">{{ props.item.idCard }}</span>
+        <span class="bqbox">{{ props.item.yjbq }}</span>
+      </div>
+      <div class="detailInfo">
+        <div class="infoItem">
+          <span class="label">性别：</span>
+          <span class="value">{{ props.item.gender }}</span>
+        </div>
+        <div class="infoItem">
+          <span class="label">年龄：</span>
+          <span class="value">{{ props.item.age }}岁</span>
+        </div>
+        <div class="infoItem">
+          <span class="label">住址：</span>
+          <span class="value">{{ props.item.address }}</span>
+        </div>
+        <div class="infoItem">
+          <span class="label">所属派出所：</span>
+          <span class="value">{{ props.item.sspcs }}</span>
+        </div>
+        <div class="infoItem">
+          <span class="label">列控原因：</span>
+          <span class="value">{{ props.item.yy }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import pro from "@/assets/images/icon100.png";
+import { defineProps } from "vue";
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => ({})
+  }
+});
+// 切换背景
+const changeBg = (type) => {
+  switch (type) {
+    case "10":
+      return "marks_red";
+    case "20":
+      return "marks_orange";
+    case "30":
+      return "marks_yellow";
+    case "40":
+      return "marks_blue";
+    default:
+      return "marks_red";
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.personCard {
+  background: rgba(10, 49, 88, 0.6);
+  box-shadow: inset 0px 0px 10px 0px rgba(56, 119, 242, 0.5);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid #0072ff;
+  padding: 10px;
+  box-sizing: border-box;
+  transition: all 0.3s;
+  &:hover {
+    background: rgba(17, 66, 96, 0.8);
+  }
+  .cxbq {
+    right: 5px;
+    top: 5px;
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+    font-size: 14px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    background: rgba(0, 255, 255, 0.3);
+    border: 1px solid #00ffff;
+    color: #00ffff;
+    transform: rotate(-48deg);
+  }
+  .avatarBox {
+    margin-right: 15px;
+    overflow: hidden;
+    .marks {
+      width: 70px;
+      height: 32px;
+      line-height: 40px;
+      text-align: center;
+      background: rgba(255, 62, 62, 0.75);
+      top: -4px;
+      left: -24px;
+      transform: rotate(-45deg);
+    }
+    .marks_red {
+      background: rgba(255, 62, 62, 0.75);
+    }
+    .marks_orange {
+      background: rgba(255, 155, 62, 0.75);
+    }
+    .marks_yellow {
+      background: rgba(255, 239, 62, 0.75);
+    }
+    .marks_blue {
+      background: rgba(0, 114, 255, 0.75);
+    }
+  }
+  .bqbox {
+    font-size: 12px;
+    color: #ff0000;
+    padding: 4px 6px;
+    background: rgba(255, 0, 0, 0.3);
+    border-radius: 1px 1px 1px 1px;
+    border: 1px solid #ff0000;
+    border-radius: 4px;
+    margin-left: 10px;
+  }
+  .infoBox {
+    flex: 1;
+    .basicInfo {
+      margin-bottom: 10px;
+      .name {
+        font-size: 16px;
+        color: #fff;
+        margin-right: 15px;
+      }
+      .idCard {
+        color: #89afcf;
+        font-size: 14px;
+      }
+    }
+    .detailInfo {
+      .infoItem {
+        color: #89afcf;
+        font-size: 14px;
+        margin-bottom: 5px;
+        .label {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+.smallbtn {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: #0072ff;
+  border-radius: 5px 5px 5px 5px;
+  margin-top: 6px;
+}
+</style>

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

@@ -0,0 +1,177 @@
+<template>
+  <div class="systemBox">
+    <!-- 左边列表 -->
+    <div class="leftList">
+      <div class="hed flex just-between align center">
+        <span class="f14">布控列表</span>
+        <span style="color: #00b7ff" class="pointer">查看更多》</span>
+      </div>
+      <div class="ml10 mr10 mt10">
+        <el-input v-model="searchForm.keyword" placeholder="姓名、证件号码搜索">
+          <template #append><el-icon><Search /></el-icon ></template>
+        </el-input>
+      </div>
+      <ul class="listContent noScollLine mt10">
+        <li v-for="(item, index) in personList" :key="index">
+          <YjItem :item="item"></YjItem>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 右边模块 -->
+    <div class="rightList">
+      <!-- 第一部门 -->
+      <div>
+        <div class="hed flex align-center">
+        <span @click="active = it" :class="active == it ? 'active' : ''" class="f14 mr10 pointer" v-for="it in btn.bkBtn" :key="it" >{{ it }}</span>
+      </div>
+        <Count></Count>
+      </div>
+      <!-- 第二部分 -->
+      <div class="mt10">
+        <div class="hed flex align-center">布控级别统计</div>
+        <div style="width:100%;height:170px">
+          <Bkjbtj></Bkjbtj>
+        </div>
+      </div>
+      <!-- 第三部分 -->
+      <div class="mt10">
+        <div class="hed flex align-center">
+          <span @click="active1 = it" :class="active1 == it ? 'active' : ''" class="f14 mr10 pointer" v-for="it in btn.yrBtn" :key="it" >{{ it }}</span>
+        </div>
+        <div style="width:100%;height:170px">
+          <RyCount></RyCount>
+        </div>
+      </div>
+      <!-- 第四部分 -->
+      <div class="mt10">
+        <div class="hed flex align-center">轨迹统计</div>
+        <div style="width:100%;height:170px">
+          <Gjtj></Gjtj>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import YjItem from "./components/yjItem.vue";
+import Count from "./components/count.vue";
+import Bkjbtj from "./components/bkjbtj.vue";
+import RyCount from "./components/ryCount.vue";
+import Gjtj from "./components/gjtj.vue";
+import { reactive, ref } from "vue";
+
+const searchForm = ref({
+  keyword: ""
+});
+const personList = ref([
+  {
+    name: "张三",
+    idCard: "330102199001011234",
+    gender: "男",
+    sspcs: "xxx上城区派出所",
+    address: "xxxx上城区",
+    yjjb: "10",
+    yjbq: "吸贩毒",
+    yy: "2023-01-01 12:00:00"
+  },
+  {
+    name: "张三",
+    idCard: "330102199001011234",
+    gender: "男",
+    sspcs: "xxx上城区派出所",
+    address: "xxxx上城区",
+    yjjb: "40",
+    yjbq: "吸贩毒",
+    yy: "2023-01-01 12:00:00"
+  },
+  {
+    name: "张三",
+    idCard: "330102199001011234",
+    gender: "男",
+    sspcs: "xxx上城区派出所",
+    address: "xxxx上城区",
+    yjjb: "20",
+    yjbq: "吸贩毒",
+    yy: "2023-01-01 12:00:00"
+  },
+  {
+    name: "张三",
+    idCard: "330102199001011234",
+    gender: "男",
+    sspcs: "xxx上城区派出所",
+    address: "xxxx上城区",
+    yjjb: "30",
+    yjbq: "吸贩毒",
+    yy: "2023-01-01 12:00:00"
+  }
+]);
+const btn = reactive({
+  bkBtn :["布控人员", "布控群体"],
+  yrBtn :["人员身份标签统计", "人员行为标签统计"]
+});
+const active = ref("布控人员");
+const active1 = ref("人员身份标签统计");
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+
+.systemBox {
+  position: relative;
+  left: -20px;
+  top: 0;
+  width: calc(100% + 40px);
+  height: calc(100% + 20px);
+  background: #e9edf6;
+  .leftList {
+    position: absolute;
+    left: 20px;
+    top: 10px;
+    width: 427px;
+    height: calc(100% - 20px);
+    border-radius: 6px 6px 6px 6px;
+    background: rgba(0, 29, 75, 0.4);
+    .listContent {
+      height: calc(100% - 86px);
+      overflow: hidden;
+      overflow-y: auto;
+      padding: 10px;
+      box-sizing: border-box;
+    }
+    ::v-deep .el-input__inner {
+      background: rgba(0, 22, 83, 0.4);
+      border: 1px solid #0072ff;
+    }
+    ::v-deep .el-input-group__append {
+      background: #0386fb;
+      color: #fff;
+      border: 1px solid #0072ff;
+    }
+  }
+  .rightList {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    width: 427px;
+    height: calc(100% - 20px);
+    .active {
+      font-size: 18px;
+      font-family: "YSBTH";
+    }
+  }
+  .hed {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 10px;
+    background: linear-gradient(
+      90deg,
+      #124cb3 0%,
+      rgba(18, 76, 179, 0.23) 77%,
+      rgba(18, 76, 179, 0) 100%
+    );
+  }
+}
+</style>

src/views/backOfficeSystem/fourColorManage/BehaviorLabels/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>行为标签管理</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

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

@@ -2,21 +2,28 @@
   <div>
     <div class="titleBox">
       <PageTitle title="标签组合管理">
+        <el-button type="primary">
+          <span style="vertical-align: middle">调级</span>
+        </el-button>
+        <el-button type="primary">
+          <span style="vertical-align: middle">导出</span>
+        </el-button>
+        <el-button type="primary">
+          <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>
+        <el-button type="danger" @click="addEdit('add', '')">
+          <el-icon style="vertical-align: middle"><Dete /></el-icon>
+          <span style="vertical-align: middle">批量删除</span>
+        </el-button>
       </PageTitle>
     </div>
     <!-- 搜索 -->
     <div ref="searchBox">
-      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
-        <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">
@@ -29,16 +36,11 @@
         :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-link type="primary"  @click="addEdit('edit', row)">编辑</el-link>
-          <el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button>
+          <el-link type="primary"  @click="addEdit('edit', row)">编辑</el-link>
+          <el-link type="danger"  @click="delDictItem([row.id])">删除</el-link>
         </template>
       </MyTable>
       <Pages
@@ -52,7 +54,7 @@
       ></Pages>
     </div>
     <!-- 编辑详情 -->
-    <EditAddForm ref="detailDiloag" :dic="{xxlx:list.xxlx,sf:list.sf}" @updateDate="getList" />
+    <EditAddForm ref="detailDiloag" @updateDate="getList" />
   </div>
 </template>
 
@@ -65,35 +67,74 @@ 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 searchConfiger = ref(
-const list = reactive({
+  [
-  chooseList :['学校','医院','娱乐场所','民爆库房'],
+  { label: "组合标签名称", prop: 'bqmc', placeholder: "请输入组合标签名称", showType: "input" },
-  xxlx:[
+  { label: "身份标签大类", prop: 'bqdl', placeholder: "请选择身份标签大类", showType: "select" },
-    {label:'职业学校',value:'01'},
+  { label: "身份标签细类", prop: 'bqxl', placeholder: "请选择身份标签细类", showType: "select" },
-    {label:'大专',value:'02'},
+  { label: "身份标签颜色", prop: 'bqys', placeholder: "请输入组合标签名称", showType: "input" },
-    {label:'本科',value:'03'},
+  { label: "行为标签大类", prop: 'xwbqdl', placeholder: "请选择行为标签大类", showType: "select" },
-    {label:'研究生',value:'04'},
+  { label: "行为标签细类", prop: 'xwbqxl', placeholder: "请选择行为标签细类", showType: "select" },
-    {label:'博士',value:'05'},
+  { label: "行为标签等级", prop: 'xwbqdj', placeholder: "请选择行为标签等级", showType: "select" },
-  ],
+  { label: "行为标签颜色", prop: 'xwbqys', placeholder: "请选择行为标签颜色", showType: "select" },
-  sf:[
+  { label: "身份标签积分", prop: 'sfbajf', placeholder: "请选择身份标签积分", showType: "select" },
-    {label:'是',value:'1'},
+  { label: "行为标签积分", prop: 'xwbqjf', placeholder: "请选择行为标签积分", showType: "select" },
-    {label:'否',value:'0'},
+  { label: "组组合标签积分", prop: 'zzhbqjf', placeholder: "请选择组组合标签积分", showType: "select" },
-  ],
-})
-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: [], //表格数据
+  tableData: [
+    {
+      id: 1,
+      zhpqmc: "高风险重点人群A",
+      zhbqdj: "一级",
+      sfdqdl: "涉毒人员",
+      sfbaxl: "吸毒人员",
+      sfbqdj: "一级",
+      sfbqys: "红色",
+      xwbqdl: "涉毒行为",
+      xwbqxl: "复吸行为",
+      xwbqdj: "一级",
+      xwbqys: "红色",
+      sfbajf: 100,
+      xwbqjf: 100,
+      zzhbqjf: 200
+    },
+    {
+      id: 2,
+      zhpqmc: "中风险关注人群B",
+      zhbqdj: "二级",
+      sfdqdl: "涉毒人员",
+      sfbaxl: "社区康复人员",
+      sfbqdj: "二级",
+      sfbqys: "橙色",
+      xwbqdl: "涉毒行为",
+      xwbqxl: "戒毒行为",
+      xwbqdj: "二级",
+      xwbqys: "橙色",
+      sfbajf: 80,
+      xwbqjf: 80,
+      zzhbqjf: 160
+    },
+    {
+      id: 3,
+      zhpqmc: "低风险观察人群C",
+      zhbqdj: "三级",
+      sfdqdl: "涉毒人员",
+      sfbaxl: "戒毒人员",
+      sfbqdj: "三级",
+      sfbqys: "黄色",
+      xwbqdl: "涉毒行为",
+      xwbqxl: "社区康复",
+      xwbqdj: "三级",
+      xwbqys: "黄色",
+      sfbajf: 60,
+      xwbqjf: 60,
+      zzhbqjf: 120
+    }
+  ], //表格数据
   keyCount: 0,
   tableConfiger: {
     rowHieght: 61,
@@ -107,164 +148,65 @@ const pageData = reactive({
   }, //分页
   controlsWidth: 160, //操作栏宽度
   tableColumn: [
-    { label: "组合标签名称", prop: "name" },
+    { label: "组合标签名称", prop: "zhpqmc" },
-    { label: "组合标签等级", prop: "xxrs" },
+    { label: "组合标签等级", prop: "zhbqdj" },
-    { label: "身份标签大类", prop: "sfjs",showSolt:true},
+    { label: "身份标签大类", prop: "sfdqdl"},
-    { label: "身份标签细类", prop: "xxlx",showSolt:true},
+    { label: "身份标签细类", prop: "sfbaxl"},
-    { label: "身份标签等级", prop: "xzxm"},
+    { label: "身份标签等级", prop: "sfbqdj"},
-    { label: "身份标签颜色",  prop: "lxfs" },
+    { label: "身份标签颜色",  prop: "sfbqys" },
-    { label: "行为标签大类", prop: "xxlx",showSolt:true},
+    { label: "行为标签大类",  prop: "xwbqdl" },
-    { label: "行为标签细类", prop: "xxlx",showSolt:true},
+    { label: "行为标签细类",  prop: "xwbqxl" },
-    { label: " 行为标签等级", prop: "xxlx",showSolt:true},
+    { label: "行为标签等级",  prop: "xwbqdj" },
-    { label: " 行为标签颜色", prop: "xxlx",showSolt:true},
+    { label: "行为标签颜色",  prop: "xwbqys" },
-    { label: " 身份标签积分", prop: "xxlx",showSolt:true},
+    { label: "身份标签积分",  prop: "sfbajf" },
-    { label: " 行为标签积分", prop: "xxlx",showSolt:true},
+    { label: "行为标签积分",  prop: "xwbqjf" },
-    { label: " 组合标签积分", prop: "xxlx",showSolt:true},
+    { label: "组组合标签积分",  prop: "zzhbqjf" },
   ]
 });
 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)
+  getList()
 }
 
 const changeNo = (val) =>{
   pageData.pageConfiger.pageNum = val;
-  getList(chooseType.value)
+  getList()
 }
 const changeSize = (val) =>{
   pageData.pageConfiger.pageSize = val;
-  getList(chooseType.value)
+  getList()
 }
 
-// 获取列表
+const getList = () =>{
-const getList = (val) =>{
+  // pageData.tableConfiger.loading = true;
-  let url = ''
+  // qcckGet(queryFrom.value).then((res)=>{
-  switch(val){
+  //   pageData.tableData = res.data.list;
-    case '学校': 
+  //   pageData.total = res.data.total;
-      url = '/mosty-lzcj/tbDwXx/queryList';
+  //   pageData.keyCount++;
-      break;
+  //   pageData.tableConfiger.loading = false;
-    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);
+  //     getList();
   //   })
   // }).catch(() => {});
 }
 
 // 新增
 const addEdit = (type, row) => {
-  detailDiloag.value.init(type, row,chooseType.value);
+  detailDiloag.value.init(type, row,);
 };
 
 

src/views/home/components/bar.vue

@@ -0,0 +1,74 @@
+<template>
+
+    <div ref="vehicleChartRef" id="bar-main"></div>
+
+</template>
+
+<script setup>
+import { onMounted ,onUnmounted} from 'vue';
+import * as echarts from 'echarts'
+let myChart = null
+const getLine = async () => {
+    var chartDom = document.getElementById('bar-main');
+var myChart = echarts.init(chartDom);
+var option;
+
+option = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      axisTick: {
+        alignWithLabel: true
+      }
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value'
+    }
+  ],
+  series: [
+    {
+      name: 'Direct',
+      type: 'bar',
+      barWidth: '60%',
+      data: [10, 52, 200, 334, 390, 330, 220]
+    }
+  ]
+};
+
+option && myChart.setOption(option);
+}
+
+const handleResize = () => {
+    myChart?.resize()
+}
+onMounted(() => {
+    getLine()
+    window.addEventListener('resize', handleResize)
+})
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+    myChart?.dispose()
+
+})
+</script>
+
+<style lang="scss" scoped>
+#bar-main{
+    z-index:999;
+}
+</style>

src/views/home/components/beonDuty.vue

@@ -1,99 +0,0 @@
-<template>
-  <div class="checkpoint-list">
-    <div class="checkpoint-item" v-for="(item, index) in checkpoints" :key="index">
-      <div class="checkpoint-icon">
-        <img src="@/assets/images/bg_11.png" alt="检查站">
-      </div>
-      <div class="checkpoint-info">
-        <span class="checkpoint-name">{{ item.name }}：</span>
-        <span class="checkpoint-count">{{ item.count }} 人</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const checkpoints = ref([
-  {
-    name: '玉普一级检查站',
-    count: 100
-  },
-  {
-    name: '京瓦龙一级检查站',
-    count: 100
-  },
-  {
-    name: '岗庙边境检查站',
-    count: 100
-  },
-  {
-    name: '察隅边境检查站',
-    count: 100
-  },
-  {
-    name: '金东边境检查站',
-    count: 100
-  },
-  {
-    name: '达木边境检查站',
-    count: 100
-  }
-])
-</script>
-
-<style scoped lang="scss">
-
-.checkpoint-list {
-  margin-top: 20px;
-  height: calc(100% - 40px);
-  overflow: hidden;
-  overflow-y: auto;
-  padding: 4px;
-  box-sizing: border-box;
-}
-
-.checkpoint-item {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  padding: 4px 10px;
-}
-
-.checkpoint-icon {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 240, 255, 0.1);
-  border-radius: 4px;
-}
-
-.checkpoint-icon img {
-  width: 24px;
-  height: 24px;
-  filter: brightness(0) invert(1);
-  opacity: 0.8;
-}
-
-.checkpoint-info {
-  flex: 1;
-  display: flex;
-  align-items: center;
-}
-
-.checkpoint-name {
-  color: #fff;
-  font-size: 16px;
-  display: inline-block;
-  width: 50%;
-}
-
-.checkpoint-count {
-  color: #00f0ff;
-  font-size: 16px;
-  font-weight: 500;
-}
-</style>

src/views/home/components/collection.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="data-statistics">
-    <!-- 人员数据采集 -->
-    <div class="data-collection">
-      <h2 class="section-title">人员数据采集</h2>
-      <div class="statistics-cards">
-        <div class="stat-card">
-          <div class="stat-number">50</div>
-          <div class="f14">人证核验</div>
-          <div><img src="@/assets/images/bg_03.png" alt=""></div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-number">320</div>
-          <div class="f14">无感通行</div>
-          <div><img src="@/assets/images/bg_04.png" alt=""></div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-number">100</div>
-          <div class="f14">手持终端登记</div>
-          <div><img src="@/assets/images/bg_05.png" alt=""></div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 流入流出统计 -->
-    <div class="flow-statistics">
-      <h2 class="section-title">流入流出统计</h2>
-      <div class="flow-grid">
-        <div class="flow-item">
-          <div class="flow-icon"><img width="64" src="@/assets/images/bg_06.png" alt=""></div>
-          <div class="flow-info">
-            <span class="flow-label">进林人员</span>
-            <span class="flow-number">2000</span>
-          </div>
-        </div>
-        <div class="flow-item">
-          <div class="flow-icon"><img width="64" src="@/assets/images/bg_06.png" alt=""></div>
-          <div class="flow-info">
-            <span class="flow-label">出林人员</span>
-            <span class="flow-number">300</span>
-          </div>
-        </div>
-        <div class="flow-item">
-          <div class="flow-icon"><img width="64" src="@/assets/images/bg_07.png" alt=""></div>
-          <div class="flow-info">
-            <span class="flow-label">进林车辆</span>
-            <span class="flow-number">500</span>
-          </div>
-        </div>
-        <div class="flow-item">
-          <div class="flow-icon"><img width="64" src="@/assets/images/bg_07.png" alt=""></div>
-          <div class="flow-info">
-            <span class="flow-label">出林车辆</span>
-            <span class="flow-number">666</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// 可以在这里添加需要的响应式数据和方法
-</script>
-
-<style scoped lang="scss">
-.data-statistics {
-  height: 100%;
-  overflow: hidden;
-  padding: 0 10px;
-  box-sizing: border-box;
-}
-
-.section-title {
-  margin-bottom: 15px;
-  font-size: 18px;
-  position: relative;
-  padding-left: 12px;
-  background: linear-gradient(0deg, #59A6F4 0%,#ffffff 90%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.section-title::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 8px;
-  height: 16px;
-  background: url('~@/assets/images/bg_02.png');
-  background-size: 100% 100%;
-}
-
-.statistics-cards {
-  display: flex;
-  gap: 20px;
-}
-
-.stat-card {
-  flex: 1;
-  text-align: center;
-  position: relative;
-}
-
-.stat-number {
-  font-size: 32px;
-  color: #00f0ff;
-  margin-bottom: 5px;
-}
-
-.flow-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 10px;
-}
-
-.flow-item {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.flow-icon {
-  font-size: 24px;
-  color: #00f0ff;
-}
-
-.flow-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.flow-label {
-  font-size: 14px;
-  color: #fff;
-}
-
-.flow-number {
-  font-size: 24px;
-  color: #00f0ff;
-  margin-top: 5px;
-}
-</style>

src/views/home/components/line.vue

@@ -0,0 +1,57 @@
+<template>
+
+    <div ref="vehicleChartRef" id="chart-container"></div>
+
+</template>
+
+<script setup>
+import { onMounted ,onUnmounted} from 'vue';
+import * as echarts from 'echarts'
+let myChart = null
+const getLine = async () => {
+    var chartDom = document.getElementById('chart-container');
+    console.log("chartDom")
+    myChart = echarts.init(chartDom);
+    var option;
+
+    option = {
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                type: 'line',
+                areaStyle: {}
+            }
+        ]
+    };
+
+    option && myChart.setOption(option);
+    console.log("option", option);
+}
+
+const handleResize = () => {
+    myChart?.resize()
+}
+onMounted(() => {
+    getLine()
+    window.addEventListener('resize', handleResize)
+})
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+    myChart?.dispose()
+
+})
+</script>
+
+<style lang="scss" scoped>
+#chart-container{
+    z-index:999;
+}
+</style>

src/views/home/components/mapecharts.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="map-container">
-    <div ref="chartRef" class="chart"></div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
-import * as echarts from 'echarts'
-import 'echarts-gl'
-
-const chartRef = ref(null)
-let chart = null
-
-const initChart = async () => {
-  // 使用require方式导入静态资源
-  const baseImg = require('@/assets/images/map-marker.svg')
-  
-  try {
-    // 确保图片加载完成
-    await new Promise((resolve, reject) => {
-      const img = new Image()
-      img.onload = resolve
-      img.onerror = reject
-      img.src = baseImg
-    })
-
-    let geoJson = require('./511202.json')
-    chart = echarts.init(chartRef.value)
-    echarts.registerMap('myMap', geoJson)
-
-    // 异步加载撒点数据
-    const markerData = [
-      { name: '站点1', value: [102.651727, 30.117088, 3] },
-      { name: '站点2', value: [102.527442, 30.108846, 3] },
-      { name: '站点3', value: [102.801965, 30.100063, 3] },
-      { name: '站点4', value: [102.711411, 30.158424, 3] },
-      { name: '站点5', value: [102.579582, 30.174818, 3] }
-    ]
-
-    const option = {
-      geo3D: {
-        map: 'myMap',
-        regionHeight: 6,
-        shading: 'realistic',
-        realisticMaterial: {
-          roughness: 0.2,
-          metalness: 0
-        },
-        itemStyle: {
-          color: 'rgba(1,59,110,0.2)',
-          opacity: 0.9,
-          borderWidth: 1,
-          borderColor: '#61CFF8',
-        },
-        emphasis: {
-          label: {
-            show: true,
-            textStyle: {
-              color: '#fff'
-            }
-          },
-          itemStyle: {
-            color: 'rgba(1,59,110,0.5)',
-            borderWidth: 10,
-            borderColor: 'rgba(10,148,184,1)'
-          }
-        },
-        light: {
-          main: {
-            color: '#fff',
-            intensity: 1,
-            shadow: true,
-            shadowQuality: 'high',
-            alpha: 25,
-            beta: 20
-          },
-          ambient: {
-            color: '#fff',
-            intensity: 0.6
-          }
-        },
-        viewControl: {
-          distance: 150,
-          alpha: 46,
-          beta: 30,
-        },
-        postEffect: {
-          enable: true,
-          bloom: {
-            enable: true,
-            intensity: 0.1
-          }
-        },
-        temporalSuperSampling: {
-          enable: true
-        }
-      },
-      series: [{
-        type: 'scatter3D',
-        coordinateSystem: 'geo3D',
-        symbol: 'image://' + baseImg,
-        symbolSize: [40, 40],
-        itemStyle: {
-          color: '#00f0ff',
-          opacity: 1
-        },
-        data: markerData
-      }]
-    }
-
-    // 确保DOM已经渲染完成
-    await nextTick()
-    chart.setOption(option)
-  } catch (error) {
-    console.error('地图初始化失败:', error)
-  }
-}
-
-const handleResize = () => {
-  chart?.resize()
-}
-
-onMounted(() => {
-  initChart()
-  window.addEventListener('resize', handleResize)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
-  chart?.dispose()
-})
-</script>
-
-<style scoped>
-.map-container {
-  width: 100%;
-  height: 100%;
-}
-
-.chart {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/home/components/pei.vue

@@ -0,0 +1,73 @@
+<template>
+
+    <div ref="vehicleChartRef" id="pei-main"></div>
+
+</template>
+
+<script setup>
+import { onMounted ,onUnmounted} from 'vue';
+import * as echarts from 'echarts'
+let myChart = null
+const getLine = async () => {
+    var chartDom = document.getElementById('pei-main');
+var myChart = echarts.init(chartDom);
+var option;
+
+option = {
+  title: {
+    text: 'Referer of a Website',
+    subtext: 'Fake Data',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left'
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: '50%',
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    }
+  ]
+};
+
+option && myChart.setOption(option);
+}
+
+const handleResize = () => {
+    myChart?.resize()
+}
+onMounted(() => {
+    getLine()
+    window.addEventListener('resize', handleResize)
+})
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+    myChart?.dispose()
+
+})
+</script>
+
+<style lang="scss" scoped>
+#pei-main{
+    z-index:999;
+}
+</style>

src/views/home/components/top-icon.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="top-icon-container">
+        <div v-for="(item, index) in list" :key="`list${index}`" class="top-icon-item">
+            <img :src="item.icon" alt="">
+            <div>
+                <div>{{ item.title }}</div>
+                <div style="font-size:10px">{{ item.desc }}</div>
+            </div>
+        </div>
+        <div class="yjbk"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const list = ref([{
+    icon: require("@/assets/images/databi/tianqi.png"),
+    title: "多云转小雨",
+    desc: "无持续风向微风",
+},
+{
+    icon: require("@/assets/images/databi/wendu.png"),
+    title: "36°",
+    desc: "11°~26°",
+},
+{
+    icon: require("@/assets/images/databi/time.png"),
+    title: "20:30:59",
+    desc: "星期二 2024-12-17",
+}
+
+
+])
+</script>
+
+<style lang="scss" scoped>
+.top-icon-container{
+    gap: 10px;
+    display: flex;
+    .top-icon-item{
+    display: flex;
+
+    }
+    .yjbk{
+        background: url("~@/assets/images/databi/head-1.png") no-repeat center center;
+
+    }
+}
+</style>

src/views/home/components/wanringAnyse.vue

@@ -1,242 +0,0 @@
-<template>
-  <div class="warning-analysis">
-    <div class="chart-section">
-      <h2 class="section-title">车辆预警分析</h2>
-      <div ref="vehicleChartRef" class="chart-container"></div>
-    </div>
-    <div class="chart-section">
-      <h2 class="section-title">人员预警分析</h2>
-      <div ref="personChartRef" class="chart-container"></div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-import * as echarts from 'echarts'
-
-const vehicleChartRef = ref(null)
-const personChartRef = ref(null)
-let vehicleChart = null
-let personChart = null
-
-const createChartOption = (data, colors) => {
-  return {
-    title: {
-      text: '100',
-      subtext: '总数',
-      left: '20%',
-      top: 'center',
-      textStyle: {
-        color: '#fff',
-        fontSize: 24,
-        fontWeight: 'normal'
-      },
-      subtextStyle: {
-        color: '#fff',
-        fontSize: 14
-      }
-    },
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      orient: 'vertical',
-      left: '45%',
-      top: 'center',
-      textStyle: {
-        color: '#fff',
-        rich: {
-          value: {
-            color: '#fff'
-          },
-          percentage: {
-            padding: [0, 0, 0, 10]
-          },
-          blue: {
-            color: colors[0]
-          },
-          lightBlue: {
-            color: colors[1]
-          },
-          orange: {
-            color: colors[2]
-          },
-          green: {
-            color: colors[3]
-          }
-        }
-      },
-      formatter: (name) => {
-        const item = data.find(d => d.name === name)
-        return `${name}    ${item.value} {${item.colorType}|(${item.value}%)}`
-      }
-    },
-    series: [
-      {
-        type: 'pie',
-        radius: ['55%', '70%'],
-        center: ['25%', '50%'],
-        data: data.map(item => ({
-          ...item,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: item.color[0] },
-              { offset: 1, color: item.color[1] }
-            ])
-          }
-        })),
-        label: {
-          show: false
-        },
-        emphasis: {
-          scale: false,
-          focus: 'none'
-        },
-        z: 2
-      },
-      {
-        type: 'pie',
-        radius: ['65%', '85%'],
-        center: ['50%', '50%'],
-        data: data.map(item => ({
-          ...item,
-          itemStyle: {
-            color: 'rgba(0, 0, 0, 0.3)'
-          }
-        })),
-        label: {
-          show: false
-        },
-        emphasis: {
-          scale: false,
-          focus: 'none'
-        },
-        z: 1,
-        silent: true
-      }
-    ]
-  }
-}
-
-const initCharts = () => {
-  const colors = ['#00f0ff', '#0066ff', '#ff9900', '#00cc66']
-  
-  // 车辆预警数据
-  const vehicleData = [
-    {
-      value: 25,
-      name: '盗窃车辆',
-      colorType: 'blue',
-      color: ['#00f0ff', '#00a0cc']
-    },
-    {
-      value: 30,
-      name: '车牌与车辆不符',
-      colorType: 'lightBlue',
-      color: ['#0066ff', '#0044cc']
-    },
-    {
-      value: 17,
-      name: '车辆超高',
-      colorType: 'orange',
-      color: ['#ff9900', '#cc7a00']
-    },
-    {
-      value: 28,
-      name: '车辆超限',
-      colorType: 'green',
-      color: ['#00cc66', '#009944']
-    }
-  ]
-
-  // 人员预警数据
-  const personData = [
-    {
-      value: 25,
-      name: '涉稳人员',
-      colorType: 'blue',
-      color: ['#00f0ff', '#00a0cc']
-    },
-    {
-      value: 30,
-      name: '涉毒人员',
-      colorType: 'lightBlue',
-      color: ['#0066ff', '#0044cc']
-    },
-    {
-      value: 17,
-      name: '涉黄人员',
-      colorType: 'orange',
-      color: ['#ff9900', '#cc7a00']
-    },
-    {
-      value: 28,
-      name: '前科人员',
-      colorType: 'green',
-      color: ['#00cc66', '#009944']
-    }
-  ]
-
-  vehicleChart = echarts.init(vehicleChartRef.value)
-  personChart = echarts.init(personChartRef.value)
-
-  vehicleChart.setOption(createChartOption(vehicleData, colors))
-  personChart.setOption(createChartOption(personData, colors))
-}
-
-const handleResize = () => {
-  vehicleChart?.resize()
-  personChart?.resize()
-}
-
-onMounted(() => {
-  initCharts()
-  window.addEventListener('resize', handleResize)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
-  vehicleChart?.dispose()
-  personChart?.dispose()
-})
-</script>
-
-<style scoped lang="scss">
-.warning-analysis {
-  padding: 20px;
-  background-color: #001529;
-  height: 100%;
-}
-
-.chart-section {
-  height: 50%;
-}
-
-.section-title {
-  font-size: 18px;
-  margin-bottom: 20px;
-  position: relative;
-  padding-left: 12px;
-  background: linear-gradient(0deg, #59A6F4 0%,#ffffff 90%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.section-title::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 8px;
-  height: 16px;
-  background: url('~@/assets/images/bg_02.png');
-  background-size: 100% 100%;
-}
-
-.chart-container {
-  height: calc(100% - 40px);
-  width: 100%;
-}
-</style>

src/views/home/components/warning.vue

@@ -1,180 +0,0 @@
-<template>
-  <div class="warning-container">
-    <!-- 标签切换 -->
-    <div class="tab-container">
-      <div class="tab-item active">
-        <div class="tab-content">车辆预警</div>
-      </div>
-      <div class="tab-item">
-        <div class="tab-content">人员预警</div>
-      </div>
-    </div>
-
-    <!-- 预警列表 -->
-    <div class="warning-list">
-      <div class="warning-card" v-for="(item, index) in warningList" :key="index">
-        <div class="warning-image">
-          <img :src="item.image" alt="预警图片">
-        </div>
-        <div class="warning-info">
-          <div class="info-item">
-            <span class="label">姓名：</span>
-            <span>{{ item.name }}</span>
-            <span class="tag">涉警人员</span>
-          </div>
-          <div class="info-item">
-            <span class="label">性别：</span>
-            <span>{{ item.gender }}</span>
-          </div>
-          <div class="info-item">
-            <span class="label">相似度：</span>
-            <span class="highlight">{{ item.similarity }}%</span>
-          </div>
-          <div class="info-item">
-            <span class="label">预警时间：</span>
-            <span>{{ item.warningTime }}</span>
-          </div>
-          <div class="info-item flex align-center">
-            <span class="label nowrap">抓拍地址：</span>
-            <span class="one_text_detail">{{ item.location }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const warningList = ref([
-  {
-    image: require('@/assets/images/person.png'),
-    name: '张三',
-    gender: '男',
-    similarity: 85,
-    warningTime: '2025-02-15 13: 00',
-    location: '林艺市八宫区天山路宫区天山路宫区天山路'
-  },
-  {
-    image: require('@/assets/images/person.png'),
-    name: '张三',
-    gender: '男',
-    similarity: 85,
-    warningTime: '2025-02-15 13: 00',
-    location: '林艺市八宫区天山路宫区天山路宫区天山路'
-  },
-  {
-    image: require('@/assets/images/person.png'),
-    name: '张三',
-    gender: '男',
-    similarity: 85,
-    warningTime: '2025-02-15 13: 00',
-    location: '林艺市八宫区天山路...'
-  }
-])
-</script>
-
-<style scoped lang="scss">
-.warning-container {
-  height: 100%;
-}
-
-.tab-container {
-  display: flex;
-  justify-content: space-around;
-  margin-bottom: 10px;
-}
-
-.tab-item {
-  width: 159px;
-  height: 43px;
-  text-align: center;
-  line-height: 24px;
-  position: relative;
-  cursor: pointer;
-}
-
-.tab-content {
-  padding: 8px 30px;
-  color: #fff;
-  font-size: 16px;
-  position: relative;
-  z-index: 1;
-}
-
-.tab-item::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: url("~@/assets/images/bg_08.png") no-repeat center center;
-  background-size: 100% 100%;
-}
-
-.tab-item.active::before {
-  background: url("~@/assets/images/bg_09.png") no-repeat center center;
-  background-size: 100% 100%;
-}
-
-.warning-list {
-  height: calc(100% - 64px);
-  overflow: hidden;
-  overflow-y: auto;
-}
-
-.warning-card {
-  background: url("~@/assets/images/bg_10.png") no-repeat center center;
-  background-size: 100% 100%;
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  margin-bottom: 4px;
-  padding: 4px 4px 4px 10px;
-  box-sizing: border-box;
-}
-
-.warning-image {
-  width: 100px;
-  height: 80px;
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.warning-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.warning-info {
-  flex: 1;
-}
-
-.info-item {
-  margin-bottom: 4px;
-  color: #fff;
-  font-size: 14px;
-}
-
-.label {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.highlight {
-  color: #00f0ff;
-}
-
-.tag {
-  background: rgba(250, 177, 21, 0.9);
-  color: #fff;
-  padding: 2px 8px;
-  border-radius: 2px;
-  font-size: 12px;
-  margin-left: 10px;
-}
-</style>

src/views/home/index.vue

@@ -1,129 +1,608 @@
 <template>
   <div class="homeBox">
     <!-- 头部 -->
+<div class="head">
     <Head></Head>
-    <!-- 内容 -->
+    <TopIcon class="head-icon-l"></TopIcon>
-    <div class="home-contant">
-      <!-- 左边 -->
-      <div class="home-aside asideL">
-        <div class="asideL-top">
-          <div class="common-title">数据采集</div>
-          <div class="comom-cnt">
-            <Collection></Collection>
 </div>
+  
+    <div></div>
+    <el-container class="container" direction="horizontal">
+      <el-aside style="width:455px">
+        <div class="content-box">
+          <div class="title-box">
+            <span class="title">线索研判盯办统计</span>
           </div>
-        <div class="asideL-bottom">
+          <div class="content background-img-1" style="height:106px">
-          <div class="common-title">预警信息</div>
+            <div class="content-item" v-for="(value, key) in contentItem" :key="`contentItem${key}`">
-          <div class="comom-cnt">
+              {{ key }}:{{ value }}
-            <Warning></Warning>
             </div>
           </div>
         </div>
-      <!-- 地图 -->
+        <div class="content-box">
-      <div class="home-middle">
+          <div class="title-box">
-        <Mapecharts></Mapecharts>
+            <span class="title">情报上报数量</span>
           </div>
-      <!-- 右边 -->
+          <!-- <div class="content background-img-2" style="height:185px">
-      <div class="home-aside asideR">
+           
-        <div class="asideL-top">
+          </div> -->
-          <div class="common-title">值班备勤</div>
+          <Line class="content background-img-2" style="height:175px"></Line>
-          <div class="comom-cnt">
+        </div>
-            <BeOnDuty></BeOnDuty>
+        <div class="content-box">
+          <div class="title-box">
+            <span class="title">情报数据情报来源</span>
+          </div>
+          <!-- <div class="content background-img-2" style="height:185px">
+          </div> -->
+          <Bar class="content background-img-2" style="height:175px"></Bar>
+        </div>
+        <div class="content-box">
+          <div class="title-box">
+            <span class="title">情报反馈统计</span>
+          </div>
+          <!-- <div class="content background-img-3" style="height:234px">
+          </div> -->
+          <Pei class="content background-img-3" style="height:234px">
+          </Pei>
+        </div>
+      </el-aside>
+      <el-main class="h-100 main">
+        <div class="top">
+
+          <div class="top-item" v-for="(item, index) in topRightTile" :key="`topRightTile${index}`">
+            <img :src="item.icon" alt="" class="top-icon" />
+            <div class="top-item-right">
+              <div class="top-item-title">{{ item.title }}</div>
+              <div class="top-item-title-tow">{{ item.desc }}</div>
+              <img src="~@/assets/images/databi/line.png" alt="">
             </div>
           </div>
-        <div class="asideL-bottom">
+
-          <div class="common-title">预警统计分析</div>
+        </div>
-          <div class="comom-cnt">
+        <div class="med content background-img-4" style="height:calc(100% - 338px)">
-            <WanringAnyse></WanringAnyse>
+        </div>
+        <div class="footer  " style="height:234px">
+          <div class="content-box">
+            <div class="title-box title-img-2">
+              <div class="flexcb">
+                <div>
+                  <span class="title">全域布控处置重点人员</span>
+                  <span class="title-desc">全域布控处置重点群体</span>
+                </div>
+                <div class="btn">
+                  查看更多》
+                </div>
+              </div>
+
+            </div>
+            <div class="content background-img-5" style="height:234px">
+              <MyTable :tableData="pageData.tableData1" :tableColumn="pageData.tableColumn1"
+                :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
+                :controlsWidth="pageData.controlsWidth" class="my-table">
+                <template #zp="{ row }">
+                  <el-image style="width: 40px; height: 40px" :src="row.zp">
+                  </el-image>
+                </template>
+                <template #clzt="{ row }">
+                  <span style="color: #FDBC3A ;">{{ row.clzt }}</span>
+                </template>
+              </MyTable>
+            </div>
+          </div>
+        </div>
+      </el-main>
+      <el-footer>
+        <div class="content-box">
+          <div class="title-box">
+            <span class="title">情报上报数量</span>
+          </div>
+          <div class="content right-1" style="height:251px">
+            <div>
+              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+                <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
+                  {{ city }}
+                </el-checkbox>
+              </el-checkbox-group>
+
+              <div class="warning-list">
+                <div class="warning-card" v-for="(item, index) in warningList" :key="index">
+                  <div class="warning-image">
+                    <img :src="item.image" alt="预警图片">
+                  </div>
+                  <div class="warning-info">
+                    <div class="info-item">
+                      <span class="label">姓名：</span>
+                      <span>{{ item.name }}</span>
+                      <span class="tag">涉警人员</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="label">性别：</span>
+                      <span>{{ item.gender }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="label">相似度：</span>
+                      <span class="highlight">{{ item.similarity }}%</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="label">预警时间：</span>
+                      <span>{{ item.warningTime }}</span>
+                    </div>
+                    <div class="info-item flex align-center">
+                      <span class="label nowrap">抓拍地址：</span>
+                      <span class="one_text_detail">{{ item.location }}</span>
                     </div>
                   </div>
                 </div>
               </div>
+
+            </div>
+
+          </div>
+        </div>
+        <div class="content-box">
+          <div class="title-box">
+            <span class="title">情报上报数量</span>
+          </div>
+          <div class="content right-2" style="height:244px">
+            <MyTable :tableData="pageData.tableData2" :tableColumn="pageData.tableColumn2"
+              :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
+              :controlsWidth="pageData.controlsWidth" class="my-table">
+              <template #zp="{ row }">
+                  <el-image style="width: 40px; height: 40px" :src="row.zp">
+                  </el-image>
+                </template>
+            </MyTable>
+          </div>
+        </div>
+        <div class="content-box">
+          <div class="title-box">
+            <span class="title">重点人发掘情况</span>
+          </div>
+          <div class="content right-3" style="height:234px">
+            <MyTable :tableData="pageData.tableData2" :tableColumn="pageData.tableColumn2"
+              :tableHeight="pageData.tableHeight" :key="pageData.keyCount+2" :tableConfiger="pageData.tableConfiger"
+              :controlsWidth="pageData.controlsWidth" class="my-table">
+              <template #zp="{ row }">
+                  <el-image style="width: 40px; height: 40px" :src="row.zp">
+                  </el-image>
+                </template>
+            </MyTable>
+          </div>
+        </div>
+      </el-footer>
+    </el-container>
   </div>
 </template>
 
 <script setup>
 import Head from './layout/head.vue'
-import Collection from './components/collection.vue'
+import { ref, reactive, onMounted } from 'vue';
-import Warning from './components/warning.vue'
+import MyTable from "@/components/aboutTable/MyTable.vue";
-import BeOnDuty from './components/beonDuty.vue'
+import Line from './components/line.vue'
-import WanringAnyse from './components/wanringAnyse.vue'
+import Bar from './components/bar.vue'
-import Mapecharts from './components/mapecharts.vue'
+import Pei from './components/pei.vue'
-import { ref } from 'vue';
+import TopIcon from './components/top-icon.vue'
+
+
+const contentItem = ref(
+
+  {
+    '线索总数': "892条", "下发总数": "892条", "已处置总数": "892条", "反馈总数": "892条", "未反馈总数": "892条", "未处置总数": "892条"
+  })
+const topRightTile = ref([
+  {
+    title: "线索总数",
+    desc: "25",
+    icon: require("@/assets/images/databi/top-1.png"),
+
+  }, {
+    title: "已处理线索总数",
+    desc: "5222/3",
+    icon: require("@/assets/images/databi/top-2.png"),
+
+  }, {
+    title: "重点人总数",
+    desc: "100.0",
+    icon: require("@/assets/images/databi/top-3.png"),
+
+  }, {
+    title: "重点群体总数",
+    desc: "99.9",
+    icon: require("@/assets/images/databi/top-4.png"),
+
+  }
+])
+const pageData = reactive({
+  tableData1: [
+
+    {
+      zp: require("@/assets/images/databi/top-1.png"),
+      name: "12344",
+      xb: "12344",
+      sfzh: "12344",
+      gkdw: "12344",
+      hdsj: "12344",
+      hdfsdz: "12344",
+      clzt: "12344",
+    }
+
+  ],
+  tableData2: [{
+    zp: require("@/assets/images/databi/top-1.png"),
+
+    name: "123",
+    xb: "123",
+    sfzh: "123",
+    gkyy: "123",
+  }],
+
+  //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false,
+    border: false,
+    size: "small",
+    haveControls: false,
+    stripe: true
+  },
+  tableHeight: '100%',
+  tableColumn1: [
+    { label: "照片", prop: "zp", showSolt: true },
+    { label: "姓名", prop: "name" },
+    { label: "性别", prop: "xb", },
+    { label: "身份证号", prop: "sfzh", },
+    { label: "管控单位", prop: "gkdw" },
+
+    { label: " 活动时间", prop: "hdsj", },
+    { label: " 活动发生地址", prop: "hdfsdz", },
+
+    { label: " 处置状态", prop: "clzt", showSolt: true }
+  ],
+  tableColumn2: [
+    { label: "照片", prop: "zp", showSolt: true ,},
+    { label: "姓名", prop: "name", width:50},
+    { label: "性别", prop: "xb", width:50},
+    { label: "身份证号", prop: "sfzh",  },
+    { label: "管控原因", prop: "gkyy",width:100 },
+  ],
+});
+
+
+
+
+
+const checkAll = ref(false)
+const isIndeterminate = ref(true)
+const checkedCities = ref(['全部'])
+const cities = ['全部', '红色', '橙色', '黄色', '蓝色']
+
+const handleCheckAllChange = (val) => {
+  checkedCities.value = val ? cities : []
+  isIndeterminate.value = false
+}
+const handleCheckedCitiesChange = (value) => {
+  const checkedCount = value.length
+  checkAll.value = checkedCount === cities.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
+}
+
+const warningList = ref([
+  {
+    image: require('@/assets/images/person.png'),
+    name: '张三',
+    gender: '男',
+    similarity: 85,
+    warningTime: '2025-02-15 13: 00',
+    location: '林艺市八宫区天山路宫区天山路宫区天山路'
+  },
+  {
+    image: require('@/assets/images/person.png'),
+    name: '张三',
+    gender: '男',
+    similarity: 85,
+    warningTime: '2025-02-15 13: 00',
+    location: '林艺市八宫区天山路宫区天山路宫区天山路'
+  },
+  {
+    image: require('@/assets/images/person.png'),
+    name: '张三',
+    gender: '男',
+    similarity: 85,
+    warningTime: '2025-02-15 13: 00',
+    location: '林艺市八宫区天山路...'
+  }
+])
+
+
+
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+.container {
+  height: calc(100% - 67px);
+  width: 100%;
+  margin-top: -61px;
+  box-sizing: border-box;
+  padding: 0 30px 20px 30px;
+
+  .content-box {
+    margin-top: 4px;
+
+    .title-img-2 {
+      background: url("~@/assets/images/databi/title-box-2.png") no-repeat center center !important;
+
+      .title-desc {
+        font-size: 14px;
+        color: #98BCE0;
+        margin-left: 20px;
+      }
+
+      .btn {
+        cursor: pointer;
+        color: #0072FF;
+        margin-top: 3px;
+      }
+    }
+
+    .title-box {
+      width: 100%;
+      height: 35px;
+      background: url("~@/assets/images/databi/title-box.png") no-repeat center center;
+      position: relative;
+      line-height: 35px;
+
+      .title {
+        margin-left: 60px;
+        font-weight: 700;
+        font-size: 16px;
+
+      }
+
+    }
+
+
+  }
+
+  .background-img-1 {
+    background: url("~@/assets/images/databi/content-box.png") no-repeat center center;
+  }
+
+  .background-img-2 {
+    background: url("~@/assets/images/databi/content-box-2.png") no-repeat center center;
+    background-size: 100% 100%
+  }
+
+  .background-img-3 {
+    background: url("~@/assets/images/databi/content-box-3.png") no-repeat center center;
+    background-size: 100% 100%
+  }
+
+  .background-img-4 {
+    background: url("~@/assets/images/databi/content-box-4.png") no-repeat center center;
+    background-size: 100% 100%
+  }
+
+  .background-img-5 {
+    background: url("~@/assets/images/databi/content-box-4.png") no-repeat center center;
+    background-size: 100% 100%
+  }
+
+  .right-1 {
+    background: url("~@/assets/images/databi/right-1.png") no-repeat center center;
+    background-size: 100% 100%;
+
+
+
+    .warning-list {
+      height: 205px;
+      overflow: auto;
+
+    }
+
+    .info-item {
+      margin-bottom: 4px;
+      color: #fff;
+      font-size: 14px;
+    }
+
+    .warning-card {
+      background: url("~@/assets/images/databi/blue.png") no-repeat center center;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      margin-bottom: 4px;
+      padding: 4px 4px 4px 10px;
+      box-sizing: border-box;
+    }
+
+    .warning-image {
+      width: 100px;
+      height: 80px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .warning-image img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .warning-info {
+      flex: 1;
+    }
+  }
+
+  .right-2 {
+    background: url("~@/assets/images/databi/right-2.png") no-repeat center center;
+    background-size: 100% 100%
+  }
+
+  .right-3 {
+    background: url("~@/assets/images/databi/right-3.png") no-repeat center center;
+    background-size: 100% 100%
+  }
+
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 10px;
+    box-sizing: border-box;
+    .content-item {
+      width: 138px;
+      height: 36px;
+      line-height: 36px;
+      text-align: center;
+      background: url("~@/assets/images/databi/content-item.png") no-repeat center center;
+
+    }
+
+  }
+
+  .el-main {
+    padding: 10px;
+
+    .top {
+      display: flex;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 0 20px;
+
+      .top-item {
+
+        display: flex;
+        gap: 5px;
+
+        .top-icon {
+          height: 50px;
+          width: 50px;
+        }
+
+
+
+        .top-item-right {
+          font-size: 12px;
+
+          .top-item-title {
+            color: #0072FF;
+          }
+
+          .top-item-title-tow {
+            color: #ffffff;
+          }
+
+        }
+      }
+
+    }
+
+    .med {
+      margin-top: 4px;
+    }
+
+    .footer {
+      // margin-top: 4px;
+
+    }
+
+  }
+
+  .el-footer {
+    padding: 0 !important;
+    height: 100% !important;
+    width: 455px !important;
+  }
+
+
+
+
+}
+
 .homeBox {
   width: 100%;
   height: 100vh;
   position: relative;
-  .home-contant{
+  background: url("~@/assets/images/databi/cantainer.png") no-repeat center center;
-    display: flex;
+  background-size: 100% 100%;
+.head{
+  position: relative;
+  .head-icon-l{
     position: absolute;
-    top: 70px;
+    top: 30px;
-    width: 100%;
+    left: 30px;
-    height: calc(100vh - 72px);
-    overflow: hidden;
-    z-index: 2;
-    .home-aside{
-      width: 442px;
-      height: 100%;
-    }
-    .home-middle{
-      flex: 1 0 0;
-      height: 100%;
-      background: url("~@/assets/images/bg01.png") no-repeat center center;
-      background-size: 100% 100%;
-      margin: 0 22px;
   }
 }
-  // 左边
+  .my-table :deep(.el-table--fit) {
-  .asideL{
+    border: none !important;
-    padding-left: 10px;
-    box-sizing: border-box;
-    .asideL-top{
-      height: 60%;
-      background: url("~@/assets/images/border_L_T.png") no-repeat center center;
-      background-size: 100% 100%;
-    }
-    .asideL-bottom{
-      height: 40%;
-      background: url("~@/assets/images/border_L_T.png") no-repeat center center;
-      background-size: 100% 100%;
-    }
-  }
-  // 右边
-  .asideR{
-    padding-right: 10px;
-    box-sizing: border-box;
-    .asideL-top{
-      height: 40%;
-      background: url("~@/assets/images/border_R_T.png") no-repeat center center;
-      background-size: 100% 100%;
-    }
-    .asideL-bottom{
-      height: 60%;
-      background: url("~@/assets/images/border_R_B.png") no-repeat center center;
-      background-size: 100% 100%;
-    }
   }
 
-  // 公用
+  .my-table .el-table,
-  .common-title{
+  .el-table__expanded-cell {
-    padding: 0 54px;
+    background-color: transparent !important;
-    box-sizing: border-box;
+    border: none !important;
-    font-size: 22px;
-    font-family: 'YSBTH';
-    background: linear-gradient(0deg, #59A6F4 0%,#ffffff 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
   }
-  .comom-cnt{
+
-    height: calc(100% - 30px);
+  .my-table :deep(.el-table) tr {
-    padding: 4px 20px;
+    background-color: transparent !important;
-    box-sizing: border-box;
+    border: none;
   }
+
+  .el-table th,
+  .el-table tr {
+    border: 0 !important;
+    background-color: transparent !important;
+    color: white !important;
+  }
+
+  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+    background: #003D82;
+    opacity: 75%;
+  }
+
+  .el-table--border tr,
+  td {
+    border: none !important;
+  }
+
+  /* 去最下面的横线 */
+
+  .el-table::after {
+    border-bottom: none !important;
+  }
+  /*table内的高亮*/
+
+.el-table tbody tr:hover>td {
+
+background-color: transparent !important
+
 }
 
 
+
+}
+
+.el-checkbox__inner {
+  background-color: transparent !important;
+  border: 1px solid #0072FF;
+}
+
+.el-checkbox__label {
+  color: #fff;
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: #00FFFF !important;
+}
+
+.el-checkbox__inner::after {
+  border-color: black !important;
+
+}
 </style>