From 39ae9755dbaaaa3a2e297115439dbedccc2f5681 Mon Sep 17 00:00:00 2001
From: Esacpe <1113279529@qq.com>
Date: Mon, 14 Jul 2025 19:22:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |   2 +-
 .../components/bkComponents.vue               | 202 -----------------
 .../components/yjComponents.vue               | 208 ------------------
 .../warningControl/index.vue                  | 173 +++++++++++----
 4 files changed, 132 insertions(+), 453 deletions(-)
 delete mode 100644 src/views/backOfficeSystem/IntelligentControl/warningControl/components/bkComponents.vue
 delete mode 100644 src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjComponents.vue

diff --git a/src/router/index.js b/src/router/index.js
index 591e47a..318c42c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -204,7 +204,7 @@ export const publicRoutes = [
             name: "warningControl",
             component: () => import("@/views/backOfficeSystem/IntelligentControl/warningControl/index"),
             meta: {
-              title: "预警布控",
+              title: "预警中心",
               icon: "article"
             }
           },
diff --git a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/bkComponents.vue b/src/views/backOfficeSystem/IntelligentControl/warningControl/components/bkComponents.vue
deleted file mode 100644
index 292fc68..0000000
--- a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/bkComponents.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<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" @click="seeMoreFn">查看更多》</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" type="bk"></YjItem>
-        </li>
-      </ul>
-    </div>
-    <!-- 右边模块 -->
-    <div class="rightList">
-      <!-- 第一部门 -->
-      <div class="model-commom">
-        <div class="hed flex align-center">区域统计</div>
-        <div class="comm-cnt">
-          <BarHatEcharts echartsId="qylxEcharts" :data="list.QylxDate"></BarHatEcharts>
-        </div>
-      </div>
-      <!-- 第二部分 -->
-      <div class="model-commom mt10">
-        <div class="hed flex align-center">人员类型统计</div>
-        <div class="comm-cnt">
-          <BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts>
-        </div>
-      </div>
-      <!-- 第三部分 -->
-      <div class="model-commom mt10">
-        <div class="hed flex align-center">感知源统计</div>
-        <div class="comm-cnt">
-          <BarHatEcharts echartsId="gzyEcharts" :data="list.GzyDate"></BarHatEcharts>
-        </div>
-      </div>
-      <!-- 第四部分 -->
-      <div class="model-commom mt10">
-        <div class="hed flex align-center">预警等级统计</div>
-        <div class="comm-cnt">
-          <WarningCount></WarningCount>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import YjItem from "./yjItem.vue";
-import WarningCount from "./WarningCount.vue";
-import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
-import { reactive, ref } from "vue";
-import { useRouter } from "vue-router";
-const router = useRouter()
-const searchForm = ref({
-  keyword: ""
-});
-const list = reactive({
-  GzyDate: {
-    xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
-    list:[
-      { name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
-      { name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
-    ],
-  },
-  RylxDate: {
-    xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'],
-    list:[
-      { name: "总数", value: [10,20,30,40,50,60] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
-      { name: "已处置", value: [10,20,30,40,50,60],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
-    ],
-  },
-  QylxDate: {
-    xDate: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6'],
-    list:[
-      { name: "总数", value: [10,20,30,40,50,60] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
-      { name: "已处置", value: [10,20,30,40,50,60],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
-    ],
-  },
-})
-const personList = ref([
-  {
-    name: "张三",
-    idCard: "330102199001011234",
-    gender: "男",
-    sspcs: "xxx上城区派出所",
-    address: "xxxx上城区",
-    yjjb: "10",
-    yjbq: "吸贩毒",
-    age:20,
-    yy: "2023-01-01 12:00:00"
-  },
-  {
-    name: "张三",
-    idCard: "330102199001011234",
-    gender: "男",
-    sspcs: "xxx上城区派出所",
-    address: "xxxx上城区",
-    yjjb: "40",
-    age:20,
-    yjbq: "吸贩毒",
-    yy: "2023-01-01 12:00:00"
-  },
-  {
-    name: "张三",
-    idCard: "330102199001011234",
-    gender: "男",
-    age:20,
-    sspcs: "xxx上城区派出所",
-    address: "xxxx上城区",
-    yjjb: "20",
-    yjbq: "吸贩毒",
-    yy: "2023-01-01 12:00:00"
-  },
-  {
-    name: "张三",
-    idCard: "330102199001011234",
-    gender: "男",
-    age:20,
-    sspcs: "xxx上城区派出所",
-    address: "xxxx上城区",
-    yjjb: "30",
-    yjbq: "吸贩毒",
-    yy: "2023-01-01 12:00:00"
-  }
-]);
-const seeMoreFn = () => {
-  router.push('/ControlApproval')
-}
-</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: 460px;
-    height: calc(100% - 20px);
-    border-radius: 6px 6px 6px 6px;
-    background: rgba(0, 29, 75, 0.4);
-    z-index: 9;
-    .listContent {
-      height: calc(100% - 96px);
-      overflow: hidden;
-      overflow-y: auto;
-      padding: 5px 5px 0;
-      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: 460px;
-    height: calc(100% - 20px);
-    z-index: 9;
-    .model-commom{
-      height: calc((100% / 4) - 10px);
-    }
-    .comm-cnt{
-      height: calc(100% - 40px);
-      background:  rgba(0,29,75,0.6);
-    }
-  }
-  .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>
diff --git a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjComponents.vue b/src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjComponents.vue
deleted file mode 100644
index 5148c2d..0000000
--- a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjComponents.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<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" @click="seeMoreFn">查看更多》</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" type="yj"></YjItem>
-        </li>
-      </ul>
-    </div>
-    <!-- 右边模块 -->
-    <div class="rightList">
-      <!-- 第一部门 -->
-      <div class="model-commom">
-        <div class="hed flex align-center">区域统计</div>
-        <div class="comm-cnt">
-          <BarHatEcharts echartsId="qylxEcharts" :data="list.QylxDate"></BarHatEcharts>
-        </div>
-      </div>
-      <!-- 第二部分 -->
-      <div class="model-commom mt10">
-        <div class="hed flex align-center">人员类型统计</div>
-        <div class="comm-cnt">
-          <BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts>
-        </div>
-      </div>
-      <!-- 第三部分 -->
-      <div class="model-commom mt10">
-        <div class="hed flex align-center">感知源统计</div>
-        <div class="comm-cnt">
-          <BarHatEcharts echartsId="gzyEcharts" :data="list.GzyDate"></BarHatEcharts>
-        </div>
-      </div>
-      <!-- 第四部分 -->
-      <div class="model-commom mt10">
-        <div class="hed flex align-center">预警等级统计</div>
-        <div class="comm-cnt">
-          <WarningCount></WarningCount>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import YjItem from "./yjItem.vue";
-import WarningCount from "./WarningCount.vue";
-import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
-import { reactive, ref } from "vue";
-import { useRouter } from "vue-router";
-const router = useRouter()
-const searchForm = ref({
-  keyword: ""
-});
-const list = reactive({
-  GzyDate: {
-    xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
-    list: [
-      { name: "总数", value: [10, 20, 30, 40, 50, 60, 70], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
-      { name: "已处置", value: [10, 20, 30, 40, 50, 60, 70], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
-    ],
-  },
-  RylxDate: {
-    xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'],
-    list: [
-      { name: "总数", value: [10, 20, 30, 40, 50, 60], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
-      { name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
-    ],
-  },
-  QylxDate: {
-    xDate: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6'],
-    list: [
-      { name: "总数", value: [10, 20, 30, 40, 50, 60], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
-      { name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
-    ],
-  },
-})
-const personList = ref([
-  {
-    name: "张三",
-    idCard: "330102199001011234",
-    gender: "男",
-    sspcs: "xxx上城区派出所",
-    address: "xxxx上城区",
-    yjjb: "10",
-    yjbq: "吸贩毒",
-    age: 20,
-    yy: "2023-01-01 12:00:00"
-  },
-  {
-    name: "张三",
-    idCard: "330102199001011234",
-    gender: "男",
-    sspcs: "xxx上城区派出所",
-    address: "xxxx上城区",
-    yjjb: "40",
-    age: 20,
-    yjbq: "吸贩毒",
-    yy: "2023-01-01 12:00:00"
-  },
-  {
-    name: "张三",
-    idCard: "330102199001011234",
-    gender: "男",
-    age: 20,
-    sspcs: "xxx上城区派出所",
-    address: "xxxx上城区",
-    yjjb: "20",
-    yjbq: "吸贩毒",
-    yy: "2023-01-01 12:00:00"
-  },
-  {
-    name: "张三",
-    idCard: "330102199001011234",
-    gender: "男",
-    age: 20,
-    sspcs: "xxx上城区派出所",
-    address: "xxxx上城区",
-    yjjb: "30",
-    yjbq: "吸贩毒",
-    yy: "2023-01-01 12:00:00"
-  }
-]);
-const seeMoreFn = () => {
-  router.push('/ControlApproval')
-}
-</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: 460px;
-    height: calc(100% - 20px);
-    border-radius: 6px 6px 6px 6px;
-    background: rgba(0, 29, 75, 0.4);
-    z-index: 9;
-
-    .listContent {
-      height: calc(100% - 96px);
-      overflow: hidden;
-      overflow-y: auto;
-      padding: 5px 5px 0;
-      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: 460px;
-    height: calc(100% - 20px);
-    z-index: 9;
-
-    .model-commom {
-      height: calc((100% / 4) - 10px);
-    }
-
-    .comm-cnt {
-      height: calc(100% - 40px);
-      background: rgba(0, 29, 75, 0.6);
-    }
-  }
-
-  .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>
diff --git a/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue b/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue
index 8448ea5..7e5d9a1 100644
--- a/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue
@@ -11,24 +11,75 @@
       </el-form>
       <el-button type="primary">搜索</el-button>
     </div>
-    <YjComponents v-if="bottomActive == 0" />
-    <BkComponents v-else />
-    <!-- 底部按钮 -->
-    <ul class="footBox">
-      <li class="footItem" @click="bottomBtnFn(idx)" v-for="(it, idx) in btn.footBtn" :key="it"> {{ it }} </li>
-    </ul>
+     <div class="systemBox">
+    <!-- 左边列表 -->
+    <div class="leftList">
+      <div class="hed flex just-between align center">
+        <span class="f14">预警列表</span>
+        <span style="color: #00b7ff" class="pointer" @click="seeMoreFn">查看更多》</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" type="yj"></YjItem>
+        </li>
+      </ul>
+    </div>
+    <!-- 右边模块 -->
+    <div class="rightList">
+      <!-- 第一部门 -->
+      <div class="model-commom">
+        <div class="hed flex align-center">区域统计</div>
+        <div class="comm-cnt">
+          <BarHatEcharts echartsId="qylxEcharts" :data="list.QylxDate"></BarHatEcharts>
+        </div>
+      </div>
+      <!-- 第二部分 -->
+      <div class="model-commom mt10">
+        <div class="hed flex align-center">人员类型统计</div>
+        <div class="comm-cnt">
+          <BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts>
+        </div>
+      </div>
+      <!-- 第三部分 -->
+      <div class="model-commom mt10">
+        <div class="hed flex align-center">感知源统计</div>
+        <div class="comm-cnt">
+          <BarHatEcharts echartsId="gzyEcharts" :data="list.GzyDate"></BarHatEcharts>
+        </div>
+      </div>
+      <!-- 第四部分 -->
+      <div class="model-commom mt10">
+        <div class="hed flex align-center">预警等级统计</div>
+        <div class="comm-cnt">
+          <WarningCount></WarningCount>
+        </div>
+      </div>
+    </div>
+  </div>
+   
   </div>
 </template>
 
 <script setup>
 import GdMap from "@/components/GdMap/index.vue";
 import * as MOSTY from "@/components/MyComponents/index";
-import YjComponents from "./components/yjComponents.vue";
-import BkComponents from "./components/bkComponents.vue";
+import YjItem from "./components/yjItem.vue";
+import WarningCount from "./components/WarningCount.vue";
+import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
 import { reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter()
 const listQuery = ref({
   keyword: ""
 });
+const searchForm = ref({
+  keyword: ""
+});
 
 const search = reactive({
   xd: [
@@ -48,16 +99,79 @@ const search = reactive({
     { label: "酒馆", value: "20" }
   ]
 });
-const btn = reactive({
-  bkBtn: ["布控人员", "布控群体"],
-  yrBtn: ["人员身份标签统计", "人员行为标签统计"],
-  footBtn: ['预警', '布控']
-});
-const bottomActive = ref(0)
-const bottomBtnFn = (idx) => {
-  bottomActive.value = idx;
-}
 
+const list = reactive({
+  GzyDate: {
+    xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
+    list: [
+      { name: "总数", value: [10, 20, 30, 40, 50, 60, 70], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
+      { name: "已处置", value: [10, 20, 30, 40, 50, 60, 70], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
+    ],
+  },
+  RylxDate: {
+    xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'],
+    list: [
+      { name: "总数", value: [10, 20, 30, 40, 50, 60], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
+      { name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
+    ],
+  },
+  QylxDate: {
+    xDate: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6'],
+    list: [
+      { name: "总数", value: [10, 20, 30, 40, 50, 60], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
+      { name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
+    ],
+  },
+})
+const personList = ref([
+  {
+    name: "张三",
+    idCard: "330102199001011234",
+    gender: "男",
+    sspcs: "xxx上城区派出所",
+    address: "xxxx上城区",
+    yjjb: "10",
+    yjbq: "吸贩毒",
+    age: 20,
+    yy: "2023-01-01 12:00:00"
+  },
+  {
+    name: "张三",
+    idCard: "330102199001011234",
+    gender: "男",
+    sspcs: "xxx上城区派出所",
+    address: "xxxx上城区",
+    yjjb: "40",
+    age: 20,
+    yjbq: "吸贩毒",
+    yy: "2023-01-01 12:00:00"
+  },
+  {
+    name: "张三",
+    idCard: "330102199001011234",
+    gender: "男",
+    age: 20,
+    sspcs: "xxx上城区派出所",
+    address: "xxxx上城区",
+    yjjb: "20",
+    yjbq: "吸贩毒",
+    yy: "2023-01-01 12:00:00"
+  },
+  {
+    name: "张三",
+    idCard: "330102199001011234",
+    gender: "男",
+    age: 20,
+    sspcs: "xxx上城区派出所",
+    address: "xxxx上城区",
+    yjjb: "30",
+    yjbq: "吸贩毒",
+    yy: "2023-01-01 12:00:00"
+  }
+]);
+const seeMoreFn = () => {
+  router.push('/ControlApproval')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -141,31 +255,6 @@ const bottomBtnFn = (idx) => {
     }
   }
 
-  .footBox {
-    position: absolute;
-    left: 50%;
-    bottom: 10px;
-    transform: translateX(-50%);
-    display: flex;
-    align-items: center;
-    z-index: 9;
-
-    .footItem {
-      width: 195px;
-      height: 42px;
-      text-align: center;
-      line-height: 42px;
-      margin: 0 10px;
-      background-image: linear-gradient(95deg, #0072ff 0%, #0072ff 100%);
-      transform: skew(-20deg);
-      font-size: 16px;
-      border-radius: 4px;
-
-      &:nth-child(2) {
-        background-image: linear-gradient(95deg, #FFA800 0%, #FFA800 100%);
-      }
-    }
-  }
 
   .hed {
     height: 40px;