From 54c0ddda04cf34ef381355d9a93981f0fa50b0e9 Mon Sep 17 00:00:00 2001
From: wangjie <931696759@qq.com>
Date: Tue, 15 Apr 2025 18:02:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E5=B8=83=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../myControl/components/areaModel.vue        |   2 +-
 .../myControl/components/drawerAreaModel.vue  | 168 +++++++++++++++++
 .../myControl/components/sendControl.vue      |  69 +++----
 .../myControl/components/ui/approvalInfo.vue  | 107 +++++++++++
 .../myControl/components/ui/controlArea.vue   | 137 ++++++++++++++
 .../myControl/components/ui/controlInfo.vue   | 174 ++++++++++++------
 .../IntelligentControl/myControl/index.vue    |  17 +-
 7 files changed, 572 insertions(+), 102 deletions(-)
 create mode 100644 src/views/backOfficeSystem/IntelligentControl/myControl/components/drawerAreaModel.vue
 create mode 100644 src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/approvalInfo.vue
 create mode 100644 src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/controlArea.vue

diff --git a/src/views/backOfficeSystem/IntelligentControl/myControl/components/areaModel.vue b/src/views/backOfficeSystem/IntelligentControl/myControl/components/areaModel.vue
index 6436a41..7ee934b 100644
--- a/src/views/backOfficeSystem/IntelligentControl/myControl/components/areaModel.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/myControl/components/areaModel.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-model="dialogTableVisible" title="XXXXXXX涉及人数" width="1000px" @close="close">
+  <el-dialog v-model="dialogTableVisible" title="添加范围模型" width="1000px" @close="close">
     <div class="dialog-container">
       <el-form :model="formData" label-width="auto" label-position="left">
         <div class="form-row">
diff --git a/src/views/backOfficeSystem/IntelligentControl/myControl/components/drawerAreaModel.vue b/src/views/backOfficeSystem/IntelligentControl/myControl/components/drawerAreaModel.vue
new file mode 100644
index 0000000..fa23dd0
--- /dev/null
+++ b/src/views/backOfficeSystem/IntelligentControl/myControl/components/drawerAreaModel.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="drawer-model">
+    <el-drawer v-model="drawer" title="范围模型(3)" direction="rtl" style="width: 300px">
+      <div class="project-list">
+        <!-- 搜索区域 -->
+        <div class="search-area">
+          <!-- 搜索区域 -->
+          <el-form :model="searchForm" label-width="auto" style="max-width: 600px">
+            <el-form-item label="模型名称">
+              <el-input v-model="searchForm.projectName" />
+            </el-form-item>
+            <el-form-item label="启用状态">
+              <el-select v-model="searchForm.status" placeholder="启用状态">
+                <el-option label="启用" value="shanghai" />
+                <el-option label="禁用" value="beijing" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <div>
+            <el-button type="primary" icon="Search">查询</el-button>
+            <el-button type="primary" icon="CirclePlus" @click="areaModel">添加应用模型</el-button>
+          </div>
+
+          <!-- <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" /> -->
+        </div>
+        <!-- 列表区域 -->
+        <div class="list-area">
+          <div v-for="(item, index) in pageData.tableData" :key="index" class="list-item">
+            <div class="model-info">
+              <div class="model-name">巴宜区公路外国模型</div>
+              <div class="model-type">模型类型：重点区域城规模型</div>
+            </div>
+            <el-divider border-style="dotted"></el-divider>
+            <div class="actions flexcb">
+              <el-checkbox v-model="item.checked" label="启用" />
+              <div class="btns">
+                <span class="set">设置</span>
+                <span class="delete">删除</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+    <!-- 添加范围模型 -->
+    <AreaModel ref="areaModelRef"></AreaModel>
+  </div>
+</template>
+
+<script setup>
+  import { ref, reactive } from "vue";
+  import Search from "@/components/aboutTable/Search.vue";
+  import AreaModel from "./areaModel.vue";
+  const areaModelRef = ref();
+  const areaModel = () => {
+    areaModelRef.value.init();
+  };
+  const searchConfiger = ref([
+    {
+      label: "项目名称",
+      prop: "name",
+      placeholder: "请选择经营状况",
+      showType: "input"
+    },
+    {
+      label: "启用状态",
+      prop: "jyzt",
+      placeholder: "请选择经营状况",
+      showType: "select",
+      options: [{ label: "在业", value: "在业" }]
+    }
+  ]);
+  // 搜索
+  const onSearch = val => {
+    searchForm.value = { ...val };
+    pageData.pageConfiger.pageCurrent = 1;
+    getList();
+  };
+  const searchForm = ref({
+    projectName: "",
+    status: ""
+  });
+  // 获取列表
+  const getList = val => {
+    // pageData.tableConfiger.loading = true;
+    // let data = { ...pageData.pageConfiger, ...queryFrom.value };
+    // let url = '/mosty-lzcj/tbDwMbkf/queryList';
+    // qcckPost(data,url).then(res=>{
+    //   pageData.tableData = res.records || [];
+    //   pageData.total = res.total;
+    //   pageData.tableConfiger.loading = false;
+    // }).catch(()=>{ pageData.tableConfiger.loading = false; })
+  };
+
+  const pageData = reactive({
+    tableData: [
+      { checked: false },
+      { checked: false },
+      { checked: false },
+      { checked: false },
+      { checked: false },
+      { checked: false }
+    ], //表格数据
+    keyCount: 0,
+    total: 0,
+    pageConfiger: {
+      pageSize: 20,
+      pageCurrent: 1
+    } //分页
+  });
+  const drawer = ref(false);
+  // 初始化数据
+  const init = () => {
+    drawer.value = true;
+    // 根据type和row初始化表单数据
+  };
+  defineExpose({ init });
+</script>
+<style lang="scss" scoped>
+  .drawer-model {
+    header {
+      background: none;
+    }
+    :deep(.el-drawer) {
+      width: 400px !important;
+    }
+  }
+
+  .search-area {
+    margin-bottom: 20px;
+  }
+
+  .list-area {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    .model-name {
+      color: rgb(64, 158, 255);
+      font-size: 20px;
+      margin-bottom: 10px;
+    }
+    .model-type {
+      font-size: 18px;
+      color: #ccc;
+    }
+  }
+
+  .list-item {
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    padding: 16px;
+    .el-divider--horizontal {
+      margin: 10px 0;
+    }
+  }
+
+  .actions {
+    .btns {
+      .set {
+        color: rgb(64, 158, 255);
+      }
+      .delete {
+        margin-left: 10px;
+        color: rgb(245, 108, 108);
+      }
+    }
+  }
+</style>
diff --git a/src/views/backOfficeSystem/IntelligentControl/myControl/components/sendControl.vue b/src/views/backOfficeSystem/IntelligentControl/myControl/components/sendControl.vue
index d73a70b..44fcf4e 100644
--- a/src/views/backOfficeSystem/IntelligentControl/myControl/components/sendControl.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/myControl/components/sendControl.vue
@@ -1,50 +1,53 @@
-
 <template>
-    <div class="dialog" v-if="dialogForm">
-      <div class="head_box">
-        <span class="title">发起布控12346</span>
-        <div>
-          <el-button size="small" @click="close">关闭</el-button>
-        </div>
-      </div>
-      <div class="cntinfo">
-      <div>布控信息</div>
-      <ControlInfo></ControlInfo>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span class="title">发起布控12346</span>
+      <div>
+        <el-button size="small" @click="close">关闭</el-button>
       </div>
     </div>
-  </template>
-  
-  <script setup>
-  import { ref, reactive } from 'vue';
+    <div class="cntinfo">
+      <div>布控信息</div>
+      <ControlInfo></ControlInfo>
+      <div>布控范围</div>
+      <ControlArea></ControlArea>
+      <div>审批信息</div>
+      <ApprovalInfo></ApprovalInfo>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, reactive } from "vue";
   import ControlInfo from "./ui/controlInfo.vue";
+  import ControlArea from "./ui/controlArea.vue";
+  import ApprovalInfo from "./ui/approvalInfo.vue";
+
   const dialogForm = ref(false);
   const listQuery = ref({});
-  
+
   // 初始化数据
   const init = (type, row) => {
     dialogForm.value = true;
     // 根据type和row初始化表单数据
   };
-  
+
   const close = () => {
     dialogForm.value = false;
   };
-  
-  defineExpose({init})
-  </script>
-  
-  <style lang="scss" scoped>
+
+  defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
   .dialog {
     padding: 20px;
-  
-  
-    .cntinfo{
-    color: #000;
-    height: calc(100% - 70px);
-    overflow: hidden;
-    overflow-y: auto;
+
+    .cntinfo {
+      color: #000;
+      height: calc(100% - 70px);
+      overflow: hidden;
+      overflow-y: auto;
+    }
   }
-  
-}
-  </style>
-  
\ No newline at end of file
+</style>
diff --git a/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/approvalInfo.vue b/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/approvalInfo.vue
new file mode 100644
index 0000000..a10e154
--- /dev/null
+++ b/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/approvalInfo.vue
@@ -0,0 +1,107 @@
+<template>
+  <el-form :model="formData" label-width="auto" label-position="left">
+    <!-- 处置接收单位 -->
+    <el-form-item label="处置接收单位">
+      <div class="unit-selection">
+        <el-select v-model="formData.receivingUnit" placeholder="请选择单位" style="width: 200px">
+          <el-option label="巴宜区公安局" value="巴宜区公安局" />
+        </el-select>
+        <el-checkbox-group v-model="formData.unitTypes">
+          <el-checkbox label="责任单位">责任单位</el-checkbox>
+          <el-checkbox label="活动发生地">活动发生地</el-checkbox>
+          <el-checkbox label="指定单位">指定单位</el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </el-form-item>
+    <el-row :gutter="20">
+      <el-col :span="5">
+        <el-form-item label="提交方式">
+          <el-checkbox-group v-model="formData.submitMethods">
+            <el-checkbox label="网络推送">网络推送</el-checkbox>
+            <el-checkbox label="短信发送">短信发送</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item></el-col
+      >
+      <el-col :span="6"
+        ><el-form-item label="签收时间">
+          <el-date-picker
+            v-model="formData.receiveTime"
+            type="datetime"
+            placeholder="签收时间"
+            format="YYYY-MM-DD HH:mm"
+            value-format="YYYY-MM-DD HH:mm"
+          /> </el-form-item
+      ></el-col>
+    </el-row>
+
+    <!-- 审批流程 -->
+    <div class="approval-flow">
+      <div style="height: 300px; max-width: 600px">
+        <el-steps direction="vertical" :active="1">
+          <el-step title="发起申请">
+            <template #description>
+              <div class="description flexcc">
+                <div class="description-item">布控发起人</div>
+                <div class="description-item">发起部门</div>
+              </div>
+            </template>
+          </el-step>
+          <el-step title="审核确认">
+            <template #description>
+              <div class="description flexcc">
+                <div class="description-item">布控发起人</div>
+                <div class="description-item">发起部门</div>
+              </div>
+            </template>
+          </el-step>
+          <el-step title="审批确认">
+            <template #description>
+              <div class="description flexcc">
+                <div class="description-item">布控发起人</div>
+                <div class="description-item">发起部门</div>
+              </div>
+            </template>
+          </el-step>
+        </el-steps>
+      </div>
+    </div>
+  </el-form>
+</template>
+
+<script setup>
+  import { ref } from "vue";
+
+  const formData = ref({
+    receivingUnit: "",
+    unitTypes: [],
+    submitMethods: [],
+    receiveTime: "",
+    initiator: "",
+    initiatingDepartment: "",
+    reviewer: "",
+    reviewDepartment: "",
+    approver: "",
+    approveDepartment: ""
+  });
+</script>
+
+<style scoped>
+  .unit-selection {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+  .description {
+    gap: 10px;
+  }
+  .description-item {
+    width: 300px;
+    height: 30px;
+    padding: 0 20px;
+    line-height: 30px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    color: rgb(131, 132, 135);
+    box-sizing: border-box;
+  }
+</style>
diff --git a/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/controlArea.vue b/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/controlArea.vue
new file mode 100644
index 0000000..38c7d0f
--- /dev/null
+++ b/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/controlArea.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="control-area">
+    <div class="map"></div>
+    <el-form :model="formData" label-width="auto" label-position="left">
+      <!-- 布控类型 -->
+      <el-form-item label="布控类型">
+        <el-radio-group v-model="formData.controlType">
+          <el-radio-button label="人员布控">人员布控</el-radio-button>
+          <el-radio-button label="车辆布控">车辆布控</el-radio-button>
+          <el-radio-button label="电话布控信息">电话布控信息</el-radio-button>
+          <el-radio-button label="网络信息">网络信息</el-radio-button>
+          <el-radio-button label="人像布控">人像布控</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+
+      <!-- 时间选择 -->
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="布控开始时间">
+            <el-date-picker
+              v-model="formData.startTime"
+              type="datetime"
+              placeholder="选择开始时间"
+              format="YYYY-MM-DD HH:mm"
+              value-format="YYYY-MM-DD HH:mm"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="布控结束时间">
+            <el-date-picker
+              v-model="formData.endTime"
+              type="datetime"
+              placeholder="选择结束时间"
+              format="YYYY-MM-DD HH:mm"
+              value-format="YYYY-MM-DD HH:mm"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 布控要求和级别 -->
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="处置要求">
+            <el-select v-model="formData.requirement" placeholder="请选择">
+              <el-option label="实时跟踪" value="track" />
+              <!-- 添加更多选项 -->
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="布控等级">
+            <el-select v-model="formData.level" placeholder="请选择">
+              <el-option label="请选择" value="" />
+              <!-- 添加更多选项 -->
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="布控要旨">
+            <el-select v-model="formData.purpose" placeholder="请选择">
+              <el-option label="请选择" value="" />
+              <!-- 添加更多选项 -->
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="布控地址">
+            <el-select v-model="formData.location" placeholder="请选择">
+              <el-option label="请选择" value="" />
+              <!-- 添加更多选项 -->
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 布控事由 -->
+      <el-form-item label="布控事由">
+        <el-input v-model="formData.reason" type="textarea" :rows="4" placeholder="请输入布控事由" />
+      </el-form-item>
+
+      <!-- 上传附件 -->
+      <el-form-item label="上传附件">
+        <el-upload action="#" :auto-upload="false" :on-change="handleFileChange" :file-list="fileList">
+          <el-button type="primary">
+            <el-icon><Plus /></el-icon>
+            支持jpg、png、pdf等上传
+          </el-button>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from "vue";
+
+  const formData = ref({
+    controlType: "人员布控",
+    startTime: "",
+    endTime: "",
+    requirement: "",
+    level: "",
+    purpose: "",
+    location: "",
+    reason: ""
+  });
+
+  const fileList = ref([]);
+
+  const handleFileChange = (file, fileList) => {
+    console.log(file, fileList);
+  };
+</script>
+
+<style lang="scss" scoped>
+  .control-area {
+    .map {
+      height: 200px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      box-sizing: border-box;
+      margin: 10px 0;
+    }
+    .el-form {
+      /* max-width: 1200px;
+    margin: 20px auto; */
+    }
+
+    :deep(.el-textarea__inner) {
+      font-family: inherit;
+    }
+  }
+</style>
diff --git a/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/controlInfo.vue b/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/controlInfo.vue
index bbf4177..e897130 100644
--- a/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/controlInfo.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/controlInfo.vue
@@ -1,72 +1,126 @@
 <template>
-  <div>
+  <div class="info-container">
     <!-- 布控信息 -->
     <el-form :inline="true" :model="formInline" class="demo-form-inline">
-    <el-form-item label="布控标题">
-      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
-    </el-form-item>
-    <el-form-item label="预警标签模型">
-      <el-select
-        v-model="formInline.region"
-        placeholder="Activity zone"
-        clearable
-      >
-        <el-option label="Zone one" value="shanghai" />
-        <el-option label="Zone two" value="beijing" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="所属警钟">
-      <el-select
-        v-model="formInline.region"
-        placeholder="Activity zone"
-        clearable
-      >
-        <el-option label="Zone one" value="shanghai" />
-        <el-option label="Zone two" value="beijing" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="布控对象">
-      <el-select
-        v-model="formInline.person"
-        placeholder="Activity zone"
-        clearable
-      >
-        <el-option label="Zone one" value="shanghai" />
-        <el-option label="Zone two" value="beijing" />
-      </el-select>
-    </el-form-item>
-  </el-form>
-  <!-- 按钮 -->
-  <div>
-    <el-button type="primary">新增</el-button>
-    <el-button type="danger">批量删除</el-button>
+      <el-form-item label="布控标题">
+        <el-input v-model="formInline.user" placeholder="Approved by" clearable />
+      </el-form-item>
+      <el-form-item label="预警标签模型">
+        <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="所属警钟">
+        <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="布控对象">
+        <el-select v-model="formInline.person" placeholder="Activity zone" clearable>
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <!-- 按钮 -->
+    <div class="btns">
+      <el-button type="primary">新增</el-button>
+      <el-button type="danger">批量删除</el-button>
+    </div>
+    <MyTable
+      :tableData="pageData.tableData"
+      :tableColumn="pageData.tableColumn"
+      :key="pageData.keyCount"
+      :tableConfiger="pageData.tableConfiger"
+      :controlsWidth="pageData.controlsWidth"
+      @chooseData="chooseData"
+    >
+      <template #photo="{ row }">
+        <img width="30" src="@/assets/images/icon100.png" alt="" />
+      </template>
+      <template #controls="{ row }">
+        <el-button size="small" type="primary" link>查看档案</el-button>
+        <el-button size="small" type="primary" link>编辑</el-button>
+        <el-button size="small" type="danger" link>删除</el-button>
+      </template>
+    </MyTable>
   </div>
-
-  </div>
-
-
-
 </template>
 <script setup>
-import { reactive } from 'vue'
+  import { reactive } from "vue";
+  import MyTable from "@/components/aboutTable/MyTable.vue";
 
-const formInline = reactive({
-  user: '',
-  region: '',
-  date: '',
-})
+  const formInline = reactive({
+    user: "",
+    region: "",
+    date: ""
+  });
+  const pageData = reactive({
+    tableData: [
+      {
+        photo: "",
+        name: "某三",
+        gender: "男",
+        idNumber: "500352199705022365",
+        currentAddress: "西藏特警...",
+        phoneNumber: "1525421452",
+        uploadStatus: "smsj",
+        carNumber: "藏A12345",
+        vehicleNumber: "AKBC123",
+        specialLicense: "已同步上传",
+        personTag: "网络延迟"
+      }
+    ], //表格数据
+    keyCount: 0,
+    tableConfiger: {
+      rowHieght: 61,
+      showSelectType: "checkBox",
+      loading: false,
+      size: "small",
+      border: false
+    },
+    total: 0,
+    pageConfiger: {
+      pageSize: 20,
+      pageCurrent: 1
+    }, //分页
+    controlsWidth: 220, //操作栏宽度
+    tableColumn: [
+      { label: "照片", prop: "photo", showSolt: true },
+      { label: "姓名", prop: "name" },
+      { label: "性别", prop: "gender" },
+      { label: "身份证号", prop: "idNumber" },
+      { label: "户籍地", prop: "户籍地" },
+      { label: "现居住地", prop: "currentAddress" },
+      { label: "手机号", prop: "phoneNumber" },
+      { label: "同步上传", prop: "uploadStatus" },
+      { label: "车牌号", prop: "carNumber" },
+      { label: "车号", prop: "vehicleNumber" },
+      { label: "特许证号", prop: "specialLicense" },
+      { label: "人员标签", prop: "personTag" }
+    ]
+  });
 
-const onSubmit = () => {
-  console.log('submit!')
-}
+  const onSubmit = () => {
+    console.log("submit!");
+  };
+  // 选择
+  const chooseData = () => {};
 </script>
 
 <style lang="scss" scoped>
-.demo-form-inline .el-input {
-  --el-input-width: 220px;
-}
+  // .demo-form-inline .el-input {
+  //   --el-input-width: 220px;
+  // }
 
-.demo-form-inline .el-select {
-  --el-select-width: 220px;
-}
-</style>
\ No newline at end of file
+  // .demo-form-inline .el-select {
+  //   --el-select-width: 220px;
+  // }
+  .info-container {
+    .btns {
+      margin-bottom: 10px;
+    }
+  }
+</style>
diff --git a/src/views/backOfficeSystem/IntelligentControl/myControl/index.vue b/src/views/backOfficeSystem/IntelligentControl/myControl/index.vue
index 7222c5b..33995c7 100644
--- a/src/views/backOfficeSystem/IntelligentControl/myControl/index.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/myControl/index.vue
@@ -13,10 +13,9 @@
         <div>
           <el-button type="primary" @click="sendControl">发起布控</el-button>
           <el-button type="primary">导出</el-button>
-          <el-button type="primary">发起布控</el-button>
           <el-button type="danger">批量删除</el-button>
           <el-button type="primary" icon="CirclePlus">添加标签模型</el-button>
-          <el-button type="primary" icon="CirclePlus" @click="areaModel">添加范围模型</el-button>
+          <el-button type="primary" icon="CirclePlus" @click="drawerModel">添加范围模型</el-button>
           <el-button type="primary" icon="CirclePlus" @click="personNum">涉及人数</el-button>
         </div>
         <el-input v-model="input2" style="max-width: 300px" placeholder="请输入关键字">
@@ -56,8 +55,9 @@
     <!-- 发起布控 -->
     <SendControl ref="sendControlRef"></SendControl>
     <PersonNum ref="personNumRef"></PersonNum>
-    <!-- 添加范围模型 -->
-    <AreaModel ref="areaModelRef"></AreaModel>
+
+    <!-- 侧边栏 -->
+    <DrawerAreaModel ref="drawerModelRef"></DrawerAreaModel>
   </div>
 </template>
 
@@ -69,7 +69,7 @@
   import DetailForm from "./components/detailForm.vue";
   import SendControl from "./components/sendControl.vue";
   import PersonNum from "./components/personNum.vue";
-  import AreaModel from "./components/areaModel.vue";
+  import DrawerAreaModel from "./components/drawerAreaModel.vue";
 
   import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
   import { reactive, ref, onMounted, getCurrentInstance } from "vue";
@@ -124,7 +124,7 @@
       options: [{ label: "在业", value: "在业" }]
     }
   ]);
-  const areaModelRef = ref();
+  const drawerModelRef = ref();
   const queryFrom = ref({});
   const pageData = reactive({
     tableData: [
@@ -221,8 +221,9 @@
   };
   // 添加范围模型
 
-  const areaModel = () => {
-    areaModelRef.value.init();
+  // 侧边栏
+  const drawerModel = () => {
+    drawerModelRef.value.init();
   };
   // 表格高度计算
   const tabHeightFn = () => {