解决冲突

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

@@ -32,15 +32,10 @@
             <el-link type="danger" size="small" @click="handleRow('delete', row)">删除</el-link>
           </template>
         </MyTable>
-        <Pages
+        <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
-          @changeNo="changeNo"
-          @changeSize="changeSize"
-          :tableHeight="pageData.tableHeight"
-          :pageConfiger="{
           ...pageData.pageConfiger,
           total: pageData.total
-          }"
+        }"></Pages>
-        ></Pages>
       </div>
     </div>
   </div>
@@ -191,10 +186,12 @@ const tabHeightFn = () => {
 .el-loading-mask {
   background: rgba(0, 0, 0, 0.5) !important;
 }
+
 .content {
   background-color: #fff;
   border-radius: 4px;
   padding-top: 10px;
+
   .btns {
     padding: 0 10px;
   }

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

@@ -0,0 +1,202 @@
+<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: 427px;
+    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: 10px 10px 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: 427px;
+    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>

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

@@ -0,0 +1,210 @@
+<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: 427px;
+    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: 10px 10px 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: 427px;
+    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>

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

@@ -1,11 +1,15 @@
 <template>
   <div class="personCard relative flex mb10 pointer">
     <div class="cxbq f14 lh50 tc absolute">已完成</div>
+    <el-button v-if="props.type == 'yj'" type="primary" class="btn_qs f14 lh50 tc absolute">签收</el-button>
     <div class="avatarBox relative">
       <div class="marks f12 absolute" :class="changeBg(props.item.yjjb)">
         处置
       </div>
-      <div><img width="76" height="96" :src="pro" alt=""></div>
+      <div>
+        <el-image :preview-teleported="true" style="width: 76px; height: 96px" :src="pro" :preview-src-list="[pro]">
+        </el-image>
+      </div>
       <span class="smallbtn">全息档案</span>
     </div>
     <div class="infoBox">
@@ -43,6 +47,10 @@ const props = defineProps({
   item: {
     type: Object,
     default: () => ({})
+  },
+  type: {
+    type: String,
+    default: ""
   }
 });
 // 切换背景
@@ -71,9 +79,11 @@ const changeBg = (type) => {
   padding: 10px;
   box-sizing: border-box;
   transition: all 0.3s;
+
   &:hover {
     background: rgba(17, 66, 96, 0.8);
   }
+
   .cxbq {
     right: 5px;
     top: 5px;
@@ -85,9 +95,16 @@ const changeBg = (type) => {
     color: #00ffff;
     transform: rotate(-48deg);
   }
+
+  .btn_qs {
+    right: 5px;
+    bottom: 5px;
+  }
+
   .avatarBox {
     margin-right: 15px;
     overflow: hidden;
+
     .marks {
       width: 70px;
       height: 32px;
@@ -97,20 +114,26 @@ const changeBg = (type) => {
       top: -4px;
       left: -24px;
       transform: rotate(-45deg);
+      z-index: 1;
     }
+
     .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 {
     color: #ff0000;
     padding: 4px 6px;
@@ -119,24 +142,30 @@ const changeBg = (type) => {
     border: 1px solid #ff0000;
     border-radius: 4px;
   }
+
   .infoBox {
     flex: 1;
+
     .basicInfo {
       .name {
         color: #fff;
       }
+
       .idCard {
         color: #89afcf;
       }
     }
+
     .detailInfo {
       .infoItem {
         color: #89afcf;
         font-size: 14px;
         margin-bottom: 5px;
+
         .label {
           color: #fff;
         }
+
         .value {
           color: #89afcf;
         }
@@ -144,6 +173,7 @@ const changeBg = (type) => {
     }
   }
 }
+
 .smallbtn {
   display: inline-block;
   padding: 4px 10px;

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

@@ -10,59 +10,13 @@
         <MOSTY.Select v-model="listQuery.dz" :dictEnum="search.dz" />
       </el-form>
       <el-button type="primary">搜索</el-button>
+      <el-button v-if="bottomActive == 1" type="success" @click="sendControl">发起布控</el-button>
     </div>
-    <!-- 左边列表 -->
+    <YjComponents v-if="bottomActive == 0" />
-    <div class="leftList">
+    <BkComponents v-else />
-      <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 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>
-
     <!-- 底部按钮 -->
     <ul class="footBox">
-      <li class="footItem" v-for="it in btn.footBtn" :key="it"> {{ it }} </li>
+      <li class="footItem" @click="bottomBtnFn(idx)" v-for="(it, idx) in btn.footBtn" :key="it"> {{ it }} </li>
     </ul>
   </div>
 </template>
@@ -70,9 +24,8 @@
 <script setup>
 import GdMap from "@/components/GdMap/index.vue";
 import * as MOSTY from "@/components/MyComponents/index";
-import YjItem from "./components/yjItem.vue";
+import YjComponents from "./components/yjComponents.vue";
-import WarningCount from "./components/WarningCount.vue";
+import BkComponents from "./components/bkComponents.vue";
-import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
 import { reactive, ref } from "vue";
 const listQuery = ref({
   keyword: ""
@@ -96,85 +49,18 @@ const search = reactive({
     { label: "酒馆", value: "20" }
   ]
 });
-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 btn = reactive({
   bkBtn: ["布控人员", "布控群体"],
   yrBtn: ["人员身份标签统计", "人员行为标签统计"],
-  footBtn:['预警','布控']
+  footBtn: ['预警', '布控']
 });
-const active = ref("布控人员");
+const bottomActive = ref(0)
-const active1 = ref("人员身份标签统计");
+const bottomBtnFn = (idx) => {
+  bottomActive.value = idx;
+}
+// 发起
+const sendControl = () => {
+};
 </script>
 
 <style lang="scss" scoped>
@@ -188,6 +74,7 @@ const active1 = ref("人员身份标签统计");
   width: calc(100% + 40px);
   height: calc(100% + 20px);
   background: #e9edf6;
+
   .topSearch {
     position: absolute;
     top: 10px;
@@ -197,15 +84,18 @@ const active1 = ref("人员身份标签统计");
     display: flex;
     align-items: center;
     z-index: 9;
+
     .el-form {
       display: flex;
-      ::v-deep .el-input__inner{
+
+      ::v-deep .el-input__inner {
         background: rgba(0, 22, 83, 0.4);
         border: 1px solid #0072ff;
         color: #fff;
       }
     }
   }
+
   .leftList {
     position: absolute;
     left: 20px;
@@ -215,6 +105,7 @@ const active1 = ref("人员身份标签统计");
     border-radius: 6px 6px 6px 6px;
     background: rgba(0, 29, 75, 0.4);
     z-index: 9;
+
     .listContent {
       height: calc(100% - 96px);
       overflow: hidden;
@@ -222,16 +113,19 @@ const active1 = ref("人员身份标签统计");
       padding: 10px 10px 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;
@@ -239,15 +133,18 @@ const active1 = ref("人员身份标签统计");
     width: 427px;
     height: calc(100% - 20px);
     z-index: 9;
-    .model-commom{
+
+    .model-commom {
       height: calc((100% / 4) - 10px);
     }
-    .comm-cnt{
+
+    .comm-cnt {
       height: calc(100% - 40px);
-      background:  rgba(0,29,75,0.6);
+      background: rgba(0, 29, 75, 0.6);
     }
   }
-  .footBox{
+
+  .footBox {
     position: absolute;
     left: 50%;
     bottom: 10px;
@@ -255,31 +152,32 @@ const active1 = ref("人员身份标签统计");
     display: flex;
     align-items: center;
     z-index: 9;
-    .footItem{
+
+    .footItem {
       width: 195px;
       height: 42px;
       text-align: center;
       line-height: 42px;
       margin: 0 10px;
-      background-image: linear-gradient( 95deg,#0072ff 0%,  #0072ff 100%);
+      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%);
+      &:nth-child(2) {
+        background-image: linear-gradient(95deg, #FFA800 0%, #FFA800 100%);
       }
     }
   }
+
   .hed {
     height: 40px;
     line-height: 40px;
     padding-left: 10px;
-    background: linear-gradient(
+    background: linear-gradient(90deg,
-      90deg,
         #124cb3 0%,
         rgba(18, 76, 179, 0.23) 77%,
-      rgba(18, 76, 179, 0) 100%
+        rgba(18, 76, 179, 0) 100%);
-    );
   }
 }
 </style>