我的布控

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

@@ -1,15 +1,35 @@
 <template>
   <div>
     <div class="titleBox">
-      <PageTitle title="布控审批"/>
+      <PageTitle title="布控审批" />
     </div>
+
     <!-- 搜索 -->
     <div ref="searchBox">
+      <!-- 顶部主导航 -->
+      <div class="main-nav">
+        <el-button :class="['nav-btn', activeMainNav === 'todo' ? 'active' : '']" @click="activeMainNav = 'todo'">
+          我的待办
+        </el-button>
+        <el-button :class="['nav-btn', activeMainNav === 'done' ? 'active' : '']" @click="activeMainNav = 'done'">
+          我的已办
+        </el-button>
+      </div>
+      <!-- 子导航 -->
+      <div class="sub-nav">
+        <el-tabs v-model="activeSubNav">
+          <el-tab-pane label="我的发起" name="myInitiate"></el-tab-pane>
+          <el-tab-pane label="我的审核" name="myAudit"></el-tab-pane>
+          <el-tab-pane label="我的审批" name="myApprove"></el-tab-pane>
+          <el-tab-pane label="我的签收" name="mySign"></el-tab-pane>
+          <el-tab-pane label="我的处置" name="myHandle"></el-tab-pane>
+        </el-tabs>
+      </div>
       <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
         <template #defaultSlot>
           <div>
             <el-input-number v-model="queryFrom.xqy"></el-input-number>
-            <span class="ml10 mr10" style="color: #000;">至</span>
+            <span class="ml10 mr10" style="color: #000">至</span>
             <el-input-number v-model="queryFrom.dqy"></el-input-number>
           </div>
         </template>
@@ -17,6 +37,16 @@
     </div>
     <!-- 表格 -->
     <div class="tabBox">
+      <div ref="btns" class="btns flexcb">
+        <div class="">
+          <el-button>批量处理</el-button>
+          <el-button>导出</el-button>
+        </div>
+        <el-input v-model="input2" style="max-width: 300px" placeholder="请输入关键字">
+          <template #append><el-button type="primary" icon="Search"></el-button></template>
+        </el-input>
+      </div>
+
       <MyTable
         :tableData="pageData.tableData"
         :tableColumn="pageData.tableColumn"
@@ -24,7 +54,8 @@
         :key="pageData.keyCount"
         :tableConfiger="pageData.tableConfiger"
         :controlsWidth="pageData.controlsWidth"
-        @chooseData="chooseData">
+        @chooseData="chooseData"
+      >
         <!-- 操作 -->
         <template #controls="{ row }">
           <el-button size="small" @click="addEdit('detail', row)">详情</el-button>
@@ -35,7 +66,7 @@
       <Pages
         @changeNo="changeNo"
         @changeSize="changeSize"
-        :tableHeight="pageData.tableHeight"
+        :tableHeight="pageData.tableHeight + 42"
         :pageConfiger="{
           ...pageData.pageConfiger,
           total: pageData.total
@@ -48,104 +79,207 @@
 </template>
 
 <script setup>
-import PageTitle from "@/components/aboutTable/PageTitle.vue";
+  import PageTitle from "@/components/aboutTable/PageTitle.vue";
-import MyTable from "@/components/aboutTable/MyTable.vue";
+  import MyTable from "@/components/aboutTable/MyTable.vue";
-import Pages from "@/components/aboutTable/Pages.vue";
+  import Pages from "@/components/aboutTable/Pages.vue";
-import Search from "@/components/aboutTable/Search.vue";
+  import Search from "@/components/aboutTable/Search.vue";
-import DetailForm from "./components/detailForm.vue";
+  import DetailForm from "./components/detailForm.vue";
-import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+  import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
-import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+  import { reactive, ref, onMounted, getCurrentInstance } from "vue";
-const { proxy } = getCurrentInstance();
+  const { proxy } = getCurrentInstance();
-const detailDiloag = ref();
+  const detailDiloag = ref();
-const searchBox = ref(); //搜索框
+  const searchBox = ref(); //搜索框
-const searchConfiger = ref([
+  const btns = ref();
-  { label: "场所名称", prop: 'name', placeholder: "请输入场所名称", showType: "input" },
+  // 主导航激活状态
-  { label: "场所电话", prop: 'phone', placeholder: "请输入场所电话", showType: "input" },
+  const activeMainNav = ref("todo");
-  { label: "法人姓名", prop: 'frxm', placeholder: "请输入法人姓名", showType: "input" },
+  // 子导航激活状态
-  { label: "法人证件号码", prop: 'frzjhm', placeholder: "请输入法人证件号码", showType: "input" },
+  const activeSubNav = ref("myAudit");
-  { label: "法人联系电话", prop: 'frlxdh', placeholder: "请输入法人联系电话", showType: "input" },
+  const searchConfiger = ref([
-  { label: "经营状况", prop: 'jyzt', placeholder: "请选择经营状况", showType: "select", options: [{ label: '在业', value: '在业' }]},
+    {
-  { label: "所属辖区", prop: 'ssxq', placeholder: "请选择所属辖区", showType: "department" },
+      label: "布控类别",
-  { label: "面积大小", prop: 'mj', placeholder: "请输入面积范围", showType: "defaultSlot" }, 
+      prop: "category",
-]);
+      placeholder: "请输入布控类别",
-const queryFrom = ref({});
+      showType: "select",
-const pageData = reactive({
+      options: [{ label: "在业", value: "在业" }]
-  tableData: [],
+    },
-  keyCount: 0,
+    {
-  tableConfiger: {
+      label: "布控对象",
-    rowHieght: 61,
+      prop: "target",
-    showSelectType: "null",
+      placeholder: "请输入布控对象",
-    loading: false
+      showType: "select",
-  },
+      options: [{ label: "在业", value: "在业" }]
-  total: 0,
+    },
-  pageConfiger: {
+    {
-    pageSize: 20,
+      label: "布控状态",
-    pageCurrent: 1
+      prop: "status",
-  },
+      placeholder: "请输入布控状态",
-  controlsWidth: 250,
+      showType: "select",
-  tableColumn: [
+      options: [{ label: "在业", value: "在业" }]
-    { label: "场所名称", prop: "name" },
+    },
-    { label: "经营状态", prop: "jyzt" },
+    { label: "布控时间", prop: "dateRange", placeholder: "请输入布控时间", showType: "daterange" },
-    { label: "所属辖区", prop: "ssxq" },
+    {
-    { label: "法人姓名", prop: "frxm" },
+      label: "预计布控类型",
-    { label: "法人证件号码", prop: "frzjhm" },
+      prop: "controlType",
-  ]
+      placeholder: "请输入布控类别",
-});
+      showType: "select",
-onMounted(() => {
+      options: [{ label: "在业", value: "在业" }]
-  // getList()
+    },
-  tabHeightFn();
+    {
-});
+      label: "最近预警时间",
-
+      prop: "lastAlertTime",
-//选择类型
+      placeholder: "请输入布控对象",
-const handleType = (val) => {
+      showType: "select",
-  pageData.keyCount++;
+      options: [{ label: "在业", value: "在业" }]
-  pageData.pageConfiger.pageCurrent = 1;
+    },
-  getList()
+    {
-}
+      label: "布控发起单位",
-// 搜索
+      prop: "initiatingUnit",
-const onSearch = (val) =>{
+      placeholder: "请输入布控状态",
-  queryFrom.value = {...val}
+      showType: "select",
-  pageData.pageConfiger.pageCurrent = 1;
+      options: [{ label: "在业", value: "在业" }]
-  getList()
+    },
-}
+    {
-
+      label: "处置接收单位",
-const changeNo = (val) =>{
+      prop: "receivingUnit",
-  pageData.pageConfiger.pageNum = val;
+      placeholder: "请输入布控状态",
-  getList()
+      showType: "select",
-}
+      options: [{ label: "在业", value: "在业" }]
-const changeSize = (val) =>{
+    }
-  pageData.pageConfiger.pageSize = val;
+  ]);
-  getList()
+  const queryFrom = ref({});
-}
+  const pageData = reactive({
-
+    tableData: [
-// 获取列表
+      [
-const getList = (val) =>{
+        {
-  // pageData.tableConfiger.loading = true;
+          taskId: "任务编号",
-  // let data = { ...pageData.pageConfiger, ...queryFrom.value };
+          target: "人员",
-  // let url = '/mosty-lzcj/tbDwKscs/queryList';
+          targetInfo: "石某某",
-  // qcckPost(data,url).then(res=>{
+          measures: "布控公安机关",
-  //   pageData.tableData = res.records || [];
+          scope: "布控范围",
-  //   pageData.total = res.total;
+          alertInfo: "预警信息",
-  //   pageData.tableConfiger.loading = false;
+          startTime: "2024-04-05 12:00",
-  // }).catch(()=>{ pageData.tableConfiger.loading = false; })
+          endTime: "2024-04-10 12:00",
-}
+          lastAlertTime: "2024-04-10 12:00",
-
+          creator: "张三"
-// 详情
+        }
-const addEdit = (type, row) => {
+        // ... 更多数据
-  detailDiloag.value.init(type, row);
+      ]
-};
+    ],
-
+    keyCount: 0,
-// 表格高度计算
+    tableConfiger: {
-const tabHeightFn = () => {
+      rowHieght: 61,
-  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+      showSelectType: "null",
-  window.onresize = function () {
+      loading: false
+    },
+    total: 0,
+    pageConfiger: {
+      pageSize: 20,
+      pageCurrent: 1
+    },
+    controlsWidth: 250,
+    tableColumn: [
+      { label: "任务编号", prop: "taskId" },
+      { label: "布控对象", prop: "target" },
+      { label: "布控对象信息", prop: "targetInfo" },
+      { label: "布控管控措施", prop: "measures" },
+      { label: "布控范围", prop: "scope" },
+      { label: "预警信息", prop: "alertInfo" },
+      { label: "开始时间", prop: "startTime" },
+      { label: "结束时间", prop: "endTime" },
+      { label: "最近预警时间", prop: "lastAlertTime" },
+      { label: "布控发起人", prop: "creator" }
+    ]
+  });
+  onMounted(() => {
+    // getList()
     tabHeightFn();
+  });
+
+  //选择类型
+  const handleType = val => {
+    pageData.keyCount++;
+    pageData.pageConfiger.pageCurrent = 1;
+    getList();
+  };
+  // 搜索
+  const onSearch = val => {
+    queryFrom.value = { ...val };
+    pageData.pageConfiger.pageCurrent = 1;
+    getList();
+  };
+
+  const changeNo = val => {
+    pageData.pageConfiger.pageNum = val;
+    getList();
+  };
+  const changeSize = val => {
+    pageData.pageConfiger.pageSize = val;
+    getList();
+  };
+
+  // 获取列表
+  const getList = val => {
+    // pageData.tableConfiger.loading = true;
+    // let data = { ...pageData.pageConfiger, ...queryFrom.value };
+    // let url = '/mosty-lzcj/tbDwKscs/queryList';
+    // qcckPost(data,url).then(res=>{
+    //   pageData.tableData = res.records || [];
+    //   pageData.total = res.total;
+    //   pageData.tableConfiger.loading = false;
+    // }).catch(()=>{ pageData.tableConfiger.loading = false; })
+  };
+
+  // 详情
+  const addEdit = (type, row) => {
+    detailDiloag.value.init(type, row);
+  };
+
+  // 表格高度计算
+  const tabHeightFn = () => {
+    console.log("btns.value.offsetHeight", btns.value.offsetHeight);
+
+    pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - btns.value.offsetHeight - 30 - 250;
+    window.onresize = function () {
+      tabHeightFn();
+    };
   };
-};
 </script>
 
-<style>
+<style lang="scss" scoped>
-.el-loading-mask {
+  .main-nav {
-  background: rgba(0, 0, 0, 0.5) !important;
+    padding: 16px;
-}
+    background-color: #fff;
+  }
+
+  .nav-btn {
+    margin-right: 10px;
+    border: none;
+    background: none;
+    &.active {
+      background-color: #409eff;
+      color: #fff;
+    }
+  }
+
+  .sub-nav {
+    background-color: #fff;
+    padding: 0 16px;
+  }
+
+  :deep(.el-tabs__header) {
+    margin-bottom: 0;
+  }
+
+  :deep(.el-tabs__nav-wrap::after) {
+    height: 1px;
+  }
+
+  :deep(.el-table--fit) {
+    top: 52px !important;
+  }
+  .btns {
+    height: 52px;
+    padding: 10px;
+    box-sizing: border-box;
+  }
 </style>

src/views/backOfficeSystem/IntelligentControl/myControl/components/areaModel.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-dialog v-model="dialogTableVisible" title="XXXXXXX涉及人数" width="1000px" @close="close">
+    <div class="dialog-container">
+      <el-form :model="formData" label-width="auto" label-position="left">
+        <div class="form-row">
+          <el-form-item label="模型名称">
+            <el-input v-model="formData.modelName" placeholder="请输入模型名称" />
+          </el-form-item>
+          <el-form-item label="感知模型类型" prop="region">
+            <el-select v-model="formData.region" placeholder="重点区域类型">
+              <el-option label="Zone one" value="shanghai" />
+              <el-option label="Zone two" value="beijing" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="生成时间范围">
+            <el-date-picker
+              v-model="formData.dateRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </div>
+        <el-form-item label="感知源信息">
+          <el-input v-model="formData.perceptionDomain" placeholder="请输入模型名称">
+            <template #append>
+              <el-button type="primary">选择感知源</el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="地图范围">
+          <el-input v-model="formData.mapRange" placeholder="请输入模型名称">
+            <template #append>
+              <el-button type="primary">选择地图范围</el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div class="map"></div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+  import { ref } from "vue";
+
+  const formData = ref({
+    modelName: "",
+    perceptionDomain: "",
+    mapRange: "",
+    dateRange: [],
+    region: ""
+  });
+  const dialogTableVisible = ref(false);
+  // 初始化数据
+  const init = (type, row) => {
+    dialogTableVisible.value = true;
+  };
+
+  const close = () => {};
+
+  defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+  .dialog-container {
+    height: 550px;
+    .map {
+      height: 400px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+    }
+
+    .form-row {
+      display: flex;
+      gap: 5px;
+      .el-form-item {
+        flex: 1;
+      }
+    }
+  }
+</style>

src/views/backOfficeSystem/IntelligentControl/myControl/components/personNum.vue

@@ -0,0 +1,125 @@
+<template>
+  <el-dialog v-model="dialogTableVisible" title="XXXXXXX涉及人数" width="1000px" @close="close">
+    <div class="dialog-container">
+      <!-- 搜索 -->
+      <div ref="searchBox">
+        <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" class="seacrh" />
+      </div>
+      <!-- 表格 -->
+      <div class="tabBox">
+        <MyTable
+          :tableData="pageData.tableData"
+          :tableColumn="pageData.tableColumn"
+          tableHeight="400px"
+          :key="pageData.keyCount"
+          :tableConfiger="pageData.tableConfiger"
+          :controlsWidth="pageData.controlsWidth"
+          @chooseData="chooseData"
+        >
+          <!-- 操作 -->
+          <template #controls="{ row }">
+            <el-button size="small" @click="addEdit('detail', row)">详情</el-button>
+          </template>
+        </MyTable>
+        <Pages
+          @changeNo="changeNo"
+          @changeSize="changeSize"
+          :tableHeight="pageData.tableHeight"
+          :pageConfiger="{
+            ...pageData.pageConfiger,
+            total: pageData.total
+          }"
+        ></Pages>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+  import { ref, reactive } from "vue";
+  import Search from "@/components/aboutTable/Search.vue";
+  import MyTable from "@/components/aboutTable/MyTable.vue";
+  const dialogTableVisible = ref(false);
+  const searchConfiger = ref([
+    {
+      label: "姓名",
+      prop: "name",
+      placeholder: "请输入场所名称",
+      showType: "input"
+    },
+    {
+      label: "身份证号",
+      prop: "idCard",
+      placeholder: "请输入从业人姓名",
+      showType: "input"
+    },
+    {
+      label: "车牌号",
+      prop: "plateNumber",
+      placeholder: "请输入场所名称",
+      showType: "input"
+    },
+    {
+      label: "车牌号",
+      prop: "plateNumber2",
+      placeholder: "请输入从业人姓名",
+      showType: "input"
+    }
+  ]);
+  const pageData = reactive({
+    tableData: [
+      {
+        name: "1"
+      }
+    ], //表格数据
+    keyCount: 0,
+    tableConfiger: {
+      rowHieght: 61,
+      showSelectType: "null",
+      loading: false
+    },
+    total: 0,
+    pageConfiger: {
+      pageSize: 20,
+      pageCurrent: 1
+    }, //分页
+    controlsWidth: 120, //操作栏宽度
+
+    tableColumn: [
+      { label: "照片", prop: "photo", width: "80" },
+      { label: "姓名", prop: "name", width: "100" },
+      { label: "性别", prop: "gender", width: "80" },
+      { label: "身份证号", prop: "idCard", width: "180" },
+      { label: "户籍地", prop: "residence", width: "150" },
+      { label: "现居住地", prop: "currentAddress", width: "150" },
+      { label: "手机号", prop: "phone", width: "120" },
+      { label: "虚拟身份", prop: "virtualId", width: "120" },
+      { label: "车牌号", prop: "plateNumber", width: "120" },
+      { label: "车牌号", prop: "plateNumber2", width: "120" },
+      { label: "特征描述", prop: "features", width: "150" },
+      { label: "人员标签", prop: "personTags", width: "150" }
+    ]
+  });
+
+  // 初始化数据
+  const init = (type, row) => {
+    dialogTableVisible.value = true;
+  };
+
+  const close = () => {};
+
+  defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+  .dialog-container {
+    // .box {
+    //   flex-wrap: nowrap !important;
+    // }
+    .seacrh {
+      .box {
+        flex-wrap: nowrap !important;
+      }
+    }
+  }
+</style>

src/views/backOfficeSystem/IntelligentControl/myControl/components/sendControl.vue

@@ -0,0 +1,50 @@
+
+<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>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, reactive } from 'vue';
+  import ControlInfo from "./ui/controlInfo.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>
+  .dialog {
+    padding: 20px;
+  
+  
+    .cntinfo{
+    color: #000;
+    height: calc(100% - 70px);
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  
+}
+  </style>
+  

src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/controlInfo.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <!-- 布控信息 -->
+    <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>
+  </div>
+
+  </div>
+
+
+
+</template>
+<script setup>
+import { reactive } from 'vue'
+
+const formInline = reactive({
+  user: '',
+  region: '',
+  date: '',
+})
+
+const onSubmit = () => {
+  console.log('submit!')
+}
+</script>
+
+<style lang="scss" scoped>
+.demo-form-inline .el-input {
+  --el-input-width: 220px;
+}
+
+.demo-form-inline .el-select {
+  --el-select-width: 220px;
+}
+</style>

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

@@ -1,143 +1,248 @@
 <template>
   <div>
     <div class="titleBox">
-      <PageTitle title="我的布控"/>
+      <PageTitle title="我的布控" />
     </div>
     <!-- 搜索 -->
     <div ref="searchBox">
-      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
     </div>
-    <!-- 表格 -->
+    <!-- 按钮组 -->
-    <div class="tabBox">
+    <div class="content">
-      <MyTable
+      <div class="flexcb btns">
-        :tableData="pageData.tableData"
+        <div>
-        :tableColumn="pageData.tableColumn"
+          <el-button type="primary" @click="sendControl">发起布控</el-button>
-        :tableHeight="pageData.tableHeight"
+          <el-button type="primary">导出</el-button>
-        :key="pageData.keyCount"
+          <el-button type="primary">发起布控</el-button>
-        :tableConfiger="pageData.tableConfiger"
+          <el-button type="danger">批量删除</el-button>
-        :controlsWidth="pageData.controlsWidth"
+          <el-button type="primary" icon="CirclePlus">添加标签模型</el-button>
-        @chooseData="chooseData">
+          <el-button type="primary" icon="CirclePlus" @click="areaModel">添加范围模型</el-button>
-        <!-- 操作 -->
+          <el-button type="primary" icon="CirclePlus" @click="personNum">涉及人数</el-button>
-        <template #controls="{ row }">
+        </div>
-          <el-button size="small" @click="addEdit('detail', row)">详情</el-button>
+        <el-input v-model="input2" style="max-width: 300px" placeholder="请输入关键字">
-        </template>
+          <template #append><el-button type="primary" icon="Search"></el-button></template>
-      </MyTable>
+        </el-input>
-      <Pages
+      </div>
-        @changeNo="changeNo"
+      <!-- 表格 -->
-        @changeSize="changeSize"
+      <div class="tabBox">
-        :tableHeight="pageData.tableHeight"
+        <MyTable
-        :pageConfiger="{
+          :tableData="pageData.tableData"
-          ...pageData.pageConfiger,
+          :tableColumn="pageData.tableColumn"
-          total: pageData.total
+          :tableHeight="pageData.tableHeight"
-        }"
+          :key="pageData.keyCount"
-      ></Pages>
+          :tableConfiger="pageData.tableConfiger"
+          :controlsWidth="pageData.controlsWidth"
+          @chooseData="chooseData"
+        >
+          <!-- 操作 -->
+          <template #controls="{ row }">
+            <el-button size="small" @click="addEdit('detail', row)">详情</el-button>
+          </template>
+        </MyTable>
+        <Pages
+          @changeNo="changeNo"
+          @changeSize="changeSize"
+          :tableHeight="pageData.tableHeight"
+          :pageConfiger="{
+            ...pageData.pageConfiger,
+            total: pageData.total
+          }"
+        ></Pages>
+      </div>
     </div>
+
     <!-- 详情 -->
     <DetailForm ref="detailDiloag" />
+    <!-- 发起布控 -->
+    <SendControl ref="sendControlRef"></SendControl>
+    <PersonNum ref="personNumRef"></PersonNum>
+    <!-- 添加范围模型 -->
+    <AreaModel ref="areaModelRef"></AreaModel>
   </div>
 </template>
 
 <script setup>
-import PageTitle from "@/components/aboutTable/PageTitle.vue";
+  import PageTitle from "@/components/aboutTable/PageTitle.vue";
-import MyTable from "@/components/aboutTable/MyTable.vue";
+  import MyTable from "@/components/aboutTable/MyTable.vue";
-import Pages from "@/components/aboutTable/Pages.vue";
+  import Pages from "@/components/aboutTable/Pages.vue";
-import Search from "@/components/aboutTable/Search.vue";
+  import Search from "@/components/aboutTable/Search.vue";
-import DetailForm from "./components/detailForm.vue";
+  import DetailForm from "./components/detailForm.vue";
-import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+  import SendControl from "./components/sendControl.vue";
-import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+  import PersonNum from "./components/personNum.vue";
-const { proxy } = getCurrentInstance();
+  import AreaModel from "./components/areaModel.vue";
-const detailDiloag = ref();
-const searchBox = ref(); //搜索框
-const searchConfiger = ref([
-  { label: "场所名称", prop: 'name', placeholder: "请输入场所名称", showType: "input" },
-  { label: "从业人姓名", prop: 'cyxm', placeholder: "请输入从业人姓名", showType: "input" },
-  { label: "请求开锁人姓名", prop: 'qqksrxm', placeholder: "请输入请求开锁人姓名", showType: "input" },
-  { label: "请求开锁人身份证号", prop: 'qqksrsfzh', placeholder: "请输入请求开锁人身份证号", showType: "input" },
-  { label: "见证人姓名", prop: 'jzrxm', placeholder: "请输入见证人姓名", showType: "input" },
-  { label: "见证人联系电话", prop: 'jzrlxdh', placeholder: "请输入见证人联系电话", showType: "input" },
-  { label: "所属辖区", prop: 'ssxq', placeholder: "请选择所属辖区", showType: "department" },
-]);
-const queryFrom = ref({});
-const pageData = reactive({
-  tableData: [
-    {name:'1',ssxq:'1',cyxm:'1',qqksrxm:'1',qqksrsfzh:'1',jzrxm:'1'}
-  ], //表格数据
-  keyCount: 0,
-  tableConfiger: {
-    rowHieght: 61,
-    showSelectType: "null",
-    loading: false
-  },
-  total: 0,
-  pageConfiger: {
-    pageSize: 20,
-    pageCurrent: 1
-  }, //分页
-  controlsWidth: 120, //操作栏宽度
-  tableColumn: [
-    { label: "场所名称", prop: "name" },
-    { label: "所属辖区", prop: "ssxq" },
-    { label: "从业人姓名", prop: "cyxm" },
-    { label: "请求开锁人姓名", prop: "qqksrxm" },
-    { label: "请求开锁人身份证号", prop: "qqksrsfzh" },
-    { label: "见证人姓名", prop: "jzrxm" },
-  ]
-});
-onMounted(() => {
-  // getList()
-  tabHeightFn();
-});
 
-//选择类型
+  import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
-const handleType = (val) => {
+  import { reactive, ref, onMounted, getCurrentInstance } from "vue";
-  pageData.keyCount++;
+  const { proxy } = getCurrentInstance();
-  pageData.pageConfiger.pageCurrent = 1;
+  const detailDiloag = ref();
-  getList()
+  const searchBox = ref(); //搜索框
-}
+  const sendControlRef = ref();
-// 搜索
+  const personNumRef = ref();
-const onSearch = (val) =>{
+  const searchConfiger = ref([
-  queryFrom.value = {...val}
+    {
-  pageData.pageConfiger.pageCurrent = 1;
+      label: "布控级别",
-  getList()
+      prop: "jyzt",
-}
+      placeholder: "请选择经营状况",
+      showType: "select",
+      options: [{ label: "在业", value: "在业" }]
+    },
+    {
+      label: "布控对象",
+      prop: "jyzt",
+      placeholder: "请选择经营状况",
+      showType: "select",
+      options: [{ label: "在业", value: "在业" }]
+    },
+    {
+      label: "布控状态",
+      prop: "jyzt",
+      placeholder: "请选择经营状况",
+      showType: "select",
+      options: [{ label: "在业", value: "在业" }]
+    },
+    { label: "布控时间", prop: "checkDate", placeholder: "布控时间", showType: "date" },
+    {
+      label: "预计标签模型",
+      prop: "jyzt",
+      placeholder: "请选预计标签模型",
+      showType: "select",
+      options: [{ label: "在业", value: "在业" }]
+    },
+    { label: "最近预警时间", prop: "checkDate", placeholder: "最近预警时间", showType: "date" },
+    {
+      label: "布控对象信息",
+      prop: "jyzt",
+      placeholder: "请选择布控对象信息",
+      showType: "select",
+      options: [{ label: "在业", value: "在业" }]
+    },
+    {
+      label: "处理接受部门",
+      prop: "jyzt",
+      placeholder: "请选择经营状况",
+      showType: "select",
+      options: [{ label: "在业", value: "在业" }]
+    }
+  ]);
+  const areaModelRef = ref();
+  const queryFrom = ref({});
+  const pageData = reactive({
+    tableData: [
+      {
+        name: "1",
+        ssxq: "1",
+        cyxm: "1",
+        qqksrxm: "1",
+        qqksrsfzh: "1",
+        jzrxm: "1"
+      }
+    ], //表格数据
+    keyCount: 0,
+    tableConfiger: {
+      rowHieght: 61,
+      showSelectType: "null",
+      loading: false
+    },
+    total: 0,
+    pageConfiger: {
+      pageSize: 20,
+      pageCurrent: 1
+    }, //分页
+    controlsWidth: 120, //操作栏宽度
 
-const changeNo = (val) =>{
+    tableColumn: [
-  pageData.pageConfiger.pageNum = val;
+      { label: "布控级别", prop: "bkjb" },
-  getList()
+      { label: "布控标题", prop: "bkbt" },
-}
+      { label: "布控对象", prop: "bkdx" },
-const changeSize = (val) =>{
+      { label: "布控对象信息", prop: "bkdx" },
-  pageData.pageConfiger.pageSize = val;
+      { label: "预警标签模型", prop: "yjbqmx" },
-  getList()
+      { label: "布控范围", prop: "bkfw" },
-}
+      { label: "预警信息", prop: "yjxx" },
-
+      { label: "处置接收单位", prop: "czjsdw" },
-// 获取列表
+      { label: "处置要求", prop: "czyq" },
-const getList = (val) =>{
+      { label: "开始时间", prop: "kssj" },
-  // pageData.tableConfiger.loading = true;
+      { label: "结束时间", prop: "jssj" },
-  // let data = { ...pageData.pageConfiger, ...queryFrom.value };
+      { label: "最近预警时间", prop: "zjyjsj" },
-  // let url = '/mosty-lzcj/tbDwMbkf/queryList';
+      { label: "失效时间", prop: "sxsj" },
-  // qcckPost(data,url).then(res=>{
+      { label: "布控发起人", prop: "bkfqr" },
-  //   pageData.tableData = res.records || [];
+      { label: "布控状态", prop: "bkzt" }
-  //   pageData.total = res.total;
+    ]
-  //   pageData.tableConfiger.loading = false;
+  });
-  // }).catch(()=>{ pageData.tableConfiger.loading = false; })
+  onMounted(() => {
-}
+    // getList()
-
-// 详情
-const addEdit = (type, row) => {
-  detailDiloag.value.init(type, row);
-};
-
-// 表格高度计算
-const tabHeightFn = () => {
-  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
-  window.onresize = function () {
     tabHeightFn();
+  });
+
+  //选择类型
+  const handleType = val => {
+    pageData.keyCount++;
+    pageData.pageConfiger.pageCurrent = 1;
+    getList();
+  };
+  // 搜索
+  const onSearch = val => {
+    queryFrom.value = { ...val };
+    pageData.pageConfiger.pageCurrent = 1;
+    getList();
+  };
+
+  const changeNo = val => {
+    pageData.pageConfiger.pageNum = val;
+    getList();
+  };
+  const changeSize = val => {
+    pageData.pageConfiger.pageSize = val;
+    getList();
+  };
+
+  // 获取列表
+  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 addEdit = (type, row) => {
+    detailDiloag.value.init(type, row);
+  };
+  // 发起
+  const sendControl = () => {
+    sendControlRef.value.init();
+  };
+  // 涉及人数
+  const personNum = () => {
+    personNumRef.value.init();
+  };
+  // 添加范围模型
+
+  const areaModel = () => {
+    areaModelRef.value.init();
+  };
+  // 表格高度计算
+  const tabHeightFn = () => {
+    pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 292;
+    window.onresize = function () {
+      tabHeightFn();
+    };
   };
-};
 </script>
 
-<style>
+<style lang="scss" scoped>
-.el-loading-mask {
+  .el-loading-mask {
-  background: rgba(0, 0, 0, 0.5) !important;
+    background: rgba(0, 0, 0, 0.5) !important;
-}
+  }
+  .content {
+    background-color: #fff;
+    border-radius: 4px;
+    padding-top: 10px;
+    .btns {
+      padding: 0 10px;
+    }
+  }
 </style>

src/views/backOfficeSystem/Mechanics/AccidentVehicle/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <div class="titleBox">
-      <PageTitle title="事故车辆附加信息"/>
+      <PageTitle title="事故车辆附加信息" />
     </div>
     <!-- 搜索 -->
     <div ref="searchBox">
-      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
     </div>
     <!-- 表格 -->
     <div class="tabBox">
@@ -16,13 +16,11 @@
         :key="pageData.keyCount"
         :tableConfiger="pageData.tableConfiger"
         :controlsWidth="pageData.controlsWidth"
-        @chooseData="chooseData">
+        @chooseData="chooseData"
+      >
         <!-- 事故照片 -->
         <template #accidentPhoto="{ row }">
-          <el-image 
+          <el-image style="width: 50px; height: 50px" :src="row.accidentPhoto" :preview-src-list="[row.accidentPhoto]">
-            style="width: 50px; height: 50px"
-            :src="row.accidentPhoto"
-            :preview-src-list="[row.accidentPhoto]">
           </el-image>
         </template>
         <!-- 操作 -->
@@ -46,106 +44,136 @@
 </template>
 
 <script setup>
-import PageTitle from "@/components/aboutTable/PageTitle.vue";
+  import PageTitle from "@/components/aboutTable/PageTitle.vue";
-import MyTable from "@/components/aboutTable/MyTable.vue";
+  import MyTable from "@/components/aboutTable/MyTable.vue";
-import Pages from "@/components/aboutTable/Pages.vue";
+  import Pages from "@/components/aboutTable/Pages.vue";
-import Search from "@/components/aboutTable/Search.vue";
+  import Search from "@/components/aboutTable/Search.vue";
-import DetailForm from "./components/detailForm.vue";
+  import DetailForm from "./components/detailForm.vue";
-import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+  import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
-import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+  import { reactive, ref, onMounted, getCurrentInstance } from "vue";
-const { proxy } = getCurrentInstance();
+  const { proxy } = getCurrentInstance();
-const detailDiloag = ref();
+  const detailDiloag = ref();
-const searchBox = ref(); //搜索框
+  const searchBox = ref(); //搜索框
 
-const searchConfiger = ref([
+  const searchConfiger = ref([
-  { label: "业务流水号码", prop: 'businessNo', placeholder: "请输入业务流水号码", showType: "input" },
+    { label: "业务流水号码", prop: "businessNo", placeholder: "请输入业务流水号码", showType: "input" },
-  { label: "事故车辆发现时间", prop: 'discoveryTime', placeholder: "请选择事故车辆发现时间", showType: "date" },
+    { label: "事故车辆发现时间", prop: "discoveryTime", placeholder: "请选择事故车辆发现时间", showType: "date" }
-]);
+  ]);
 
-const queryFrom = ref({});
+  const queryFrom = ref({});
-const pageData = reactive({
+  const pageData = reactive({
-  tableData: [
+    tableData: [
-    {id: 1, businessNo: '01131213', registrantName: '张三', discoveryTime: '2025/1/20 10:00:00', accidentPhoto: 'https://example.com/photo1.jpg'},
+      {
-    {id: 2, businessNo: '01131213', registrantName: '张三', discoveryTime: '2025/1/20 10:00:00', accidentPhoto: 'https://example.com/photo2.jpg'},
+        id: 1,
-    {id: 3, businessNo: '01131213', registrantName: '张三', discoveryTime: '2025/1/20 10:00:00', accidentPhoto: 'https://example.com/photo3.jpg'},
+        businessNo: "01131213",
-    {id: 4, businessNo: '01131213', registrantName: '张三', discoveryTime: '2025/1/20 10:00:00', accidentPhoto: 'https://example.com/photo4.jpg'},
+        registrantName: "张三",
-    {id: 5, businessNo: '01131213', registrantName: '张三', discoveryTime: '2025/1/20 10:00:00', accidentPhoto: 'https://example.com/photo5.jpg'},
+        discoveryTime: "2025/1/20 10:00:00",
-  ],
+        accidentPhoto: "https://example.com/photo1.jpg"
-  keyCount: 0,
+      },
-  tableConfiger: {
+      {
-    rowHieght: 61,
+        id: 2,
-    showSelectType: "null",
+        businessNo: "01131213",
-    loading: false
+        registrantName: "张三",
-  },
+        discoveryTime: "2025/1/20 10:00:00",
-  total: 0,
+        accidentPhoto: "https://example.com/photo2.jpg"
-  pageConfiger: {
+      },
-    pageSize: 20,
+      {
-    pageCurrent: 1
+        id: 3,
-  },
+        businessNo: "01131213",
-  controlsWidth: 120,
+        registrantName: "张三",
-  tableColumn: [
+        discoveryTime: "2025/1/20 10:00:00",
-    { label: "业务流水号码", prop: "businessNo" },
+        accidentPhoto: "https://example.com/photo3.jpg"
-    { label: "登记人姓名", prop: "registrantName" },
+      },
-    { label: "事故车辆发现时间", prop: "discoveryTime" },
+      {
-    { label: "事故照片", prop: "accidentPhoto", slot: true },
+        id: 4,
-  ]
+        businessNo: "01131213",
-});
+        registrantName: "张三",
+        discoveryTime: "2025/1/20 10:00:00",
+        accidentPhoto: "https://example.com/photo4.jpg"
+      },
+      {
+        id: 5,
+        businessNo: "01131213",
+        registrantName: "张三",
+        discoveryTime: "2025/1/20 10:00:00",
+        accidentPhoto: "https://example.com/photo5.jpg"
+      }
+    ],
+    keyCount: 0,
+    tableConfiger: {
+      rowHieght: 61,
+      showSelectType: "null",
+      loading: false
+    },
+    total: 0,
+    pageConfiger: {
+      pageSize: 20,
+      pageCurrent: 1
+    },
+    controlsWidth: 120,
+    tableColumn: [
+      { label: "业务流水号码", prop: "businessNo" },
+      { label: "登记人姓名", prop: "registrantName" },
+      { label: "事故车辆发现时间", prop: "discoveryTime" },
+      { label: "事故照片", prop: "accidentPhoto", slot: true }
+    ]
+  });
 
-onMounted(() => {
+  onMounted(() => {
-  getList()
+    getList();
-  tabHeightFn();
-});
-
-//选择类型
-const handleType = (val) => {
-  pageData.keyCount++;
-  pageData.pageConfiger.pageCurrent = 1;
-  getList()
-}
-// 搜索
-const onSearch = (val) =>{
-  queryFrom.value = {...val}
-  pageData.pageConfiger.pageCurrent = 1;
-  getList()
-}
-
-const changeNo = (val) =>{
-  pageData.pageConfiger.pageNum = val;
-  getList()
-}
-const changeSize = (val) =>{
-  pageData.pageConfiger.pageSize = val;
-  getList()
-}
-
-// 获取列表
-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 addEdit = (type, row) => {
-  detailDiloag.value.init(type, row);
-};
-
-// 表格高度计算
-const tabHeightFn = () => {
-  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
-  window.onresize = function () {
     tabHeightFn();
+  });
+
+  //选择类型
+  const handleType = val => {
+    pageData.keyCount++;
+    pageData.pageConfiger.pageCurrent = 1;
+    getList();
+  };
+  // 搜索
+  const onSearch = val => {
+    queryFrom.value = { ...val };
+    pageData.pageConfiger.pageCurrent = 1;
+    getList();
+  };
+
+  const changeNo = val => {
+    pageData.pageConfiger.pageNum = val;
+    getList();
+  };
+  const changeSize = val => {
+    pageData.pageConfiger.pageSize = val;
+    getList();
+  };
+
+  // 获取列表
+  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 addEdit = (type, row) => {
+    detailDiloag.value.init(type, row);
+  };
+
+  // 表格高度计算
+  const tabHeightFn = () => {
+    pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+    window.onresize = function () {
+      tabHeightFn();
+    };
   };
-};
 </script>
 
 <style>
-.el-loading-mask {
+  .el-loading-mask {
-  background: rgba(0, 0, 0, 0.5) !important;
+    background: rgba(0, 0, 0, 0.5) !important;
-}
+  }
 </style>