diff --git a/src/api/qcckApi.js b/src/api/qcckApi.js
index a5aadbe..17798df 100644
--- a/src/api/qcckApi.js
+++ b/src/api/qcckApi.js
@@ -36,21 +36,19 @@ export const qcckFlvGet = (params = {}, url, cookie) => {
 
 
 //get 请求
-export const qcckGet = (params = {}, url, cookie) => {
-  if (cookie) {
-    return request({
-      withCredentials: true,
-      url: api + url,
-      method: "get",
-      params
-    });
-  } else {
-    return request({
-      url: api + url,
-      method: "get",
-      params
-    });
+export const qcckGet = (params = {}, url, config = {}) => {
+  const options = {
+    url: api + url,
+    method: "get",
+    params,
+    ...config
+  };
+
+  if (config.cookie) {
+    options.withCredentials = true;
   }
+
+  return request(options);
 };
 //post 请求
 export const qcckPost = (data = {}, url, cookie) => {
diff --git a/src/components/aboutTable/Search.vue b/src/components/aboutTable/Search.vue
index 3cc4dc8..46611be 100644
--- a/src/components/aboutTable/Search.vue
+++ b/src/components/aboutTable/Search.vue
@@ -1,86 +1,97 @@
 <template>
-  <div style="padding: 0" v-loading="loadingPage" class="pageSearch searchBox"
+  <div  v-loading="loadingPage" class="pageSearch searchBox main-container"
     :style="`margin-bottom: ${marginBottom}px;background-color: ${backgroundColor}`">
-      <div class="filter-title">
-        <span class="filter-label"><el-icon><Filter /></el-icon>筛选条件</span>
-      </div>
-    <div class="box">
-      <div v-for="(item, index) in getArr" :key="index" class="item">
-        <div class="label" v-if="item.label">{{ item.label }}</div>
-        <!-- select -->
-        <el-select v-if="item.showType === 'select'" v-model="searchObj[item.prop]" :multiple="item.multiple"
-          :clearable="item.clearable" :filterable="item.filterable" :placeholder="item.placeholder" collapse-tags
-          collapse-tags-tooltip>
-          <el-option v-for="obj in getOptions[item.prop]" :key="obj.value" :label="obj.label || obj.lable"
-            :value="obj.value" />
-        </el-select>
-        <!-- input -->
-        <el-input v-else-if="item.showType === 'input'" class="input" v-model="searchObj[item.prop]"
-          :clearable="item.clearable" :placeholder="item.placeholder" />
-        <!-- 日期段选择器 -->
-        <el-date-picker v-else-if="item.showType === 'daterange'" v-model="searchObj[item.prop]" type="daterange"
-          unlink-panels :range-separator="item.rangeSeparator" :start-placeholder="item.startPlaceholder"
-          :end-placeholder="item.endPlaceholder" :shortcuts="item.shortcuts" :disabledDate="disabledDate"
-          value-format="YYYY-MM-DD" />
-        <el-date-picker v-else-if="item.showType === 'datetimerange'" v-model="searchObj[item.prop]"
-          type="datetimerange" unlink-panels :range-separator="item.rangeSeparator || '至'"
-          :start-placeholder="item.startPlaceholder || '开始日期'" :end-placeholder="item.endPlaceholder || '结束日期'"
-          :shortcuts="item.shortcuts" value-format="YYYY-MM-DD HH:mm:ss" />
-        <el-date-picker v-else-if="item.showType === 'date'" v-model="searchObj[item.prop]" type="date"
-          :placeholder="item.placeholder" :disabled-date="disabledDate" :shortcuts="item.shortcuts"
-          value-format="YYYY-MM-DD">
-        </el-date-picker>
-        <el-date-picker v-else-if="item.showType === 'datetime'" v-model="searchObj[item.prop]" type="datetime"
-          :placeholder="item.placeholder" value-format="YYYY-MM-DD HH:mm:ss">
-        </el-date-picker>
+    <div class="filter-title">
+      <span class="filter-label"><el-icon>
+          <Filter />
+        </el-icon>筛选条件</span>
+    </div>
+    <div class="content-container">
+      <div class="box">
+        <div v-for="(item, index) in getArr" :key="index" class="item">
+          <div class="label" v-if="item.label">{{ item.label }}</div>
+          <!-- select -->
+          <el-select v-if="item.showType === 'select'" v-model="searchObj[item.prop]" :multiple="item.multiple"
+            :clearable="item.clearable" :filterable="item.filterable" :placeholder="item.placeholder" collapse-tags
+            collapse-tags-tooltip>
+            <el-option v-for="obj in getOptions[item.prop]" :key="obj.value" :label="obj.label || obj.lable"
+              :value="obj.value" />
+          </el-select>
+          <!-- input -->
+          <el-input v-else-if="item.showType === 'input'" class="input" v-model="searchObj[item.prop]"
+            :clearable="item.clearable" :placeholder="item.placeholder"  />
+              <!-- input -->
+          <el-input v-else-if="item.showType === 'number'" class="input" v-model="searchObj[item.prop]"
+            :clearable="item.clearable" :placeholder="item.placeholder" type="number" />
+          <!-- 日期段选择器 -->
+          <el-date-picker v-else-if="item.showType === 'daterange'" v-model="searchObj[item.prop]" type="daterange"
+            unlink-panels :range-separator="item.rangeSeparator" :start-placeholder="item.startPlaceholder"
+            :end-placeholder="item.endPlaceholder" :shortcuts="item.shortcuts" :disabledDate="disabledDate"
+            value-format="YYYY-MM-DD" />
+          <el-date-picker v-else-if="item.showType === 'datetimerange'" v-model="searchObj[item.prop]"
+            type="datetimerange" unlink-panels :range-separator="item.rangeSeparator || '至'"
+            :start-placeholder="item.startPlaceholder || '开始日期'" :end-placeholder="item.endPlaceholder || '结束日期'"
+            :shortcuts="item.shortcuts" value-format="YYYY-MM-DD HH:mm:ss" />
+          <el-date-picker v-else-if="item.showType === 'date'" v-model="searchObj[item.prop]" type="date"
+            :placeholder="item.placeholder" :disabled-date="disabledDate" :shortcuts="item.shortcuts"
+            value-format="YYYY-MM-DD">
+          </el-date-picker>
+          <el-date-picker v-else-if="item.showType === 'datetime'" v-model="searchObj[item.prop]" type="datetime"
+            :placeholder="item.placeholder" value-format="YYYY-MM-DD HH:mm:ss">
+          </el-date-picker>
 
-        <!-- checkbox -->
-        <template v-else-if="item.showType === 'department'">
-          <MOSTY.Department clearable v-model="searchObj[item.prop]" />
-        </template>
-        <!-- checkbox -->
-        <template v-else-if="item.showType === 'checkbox'">
-          <el-checkbox v-if="item.showSelectAll" v-model="item.checkAll" :indeterminate="item.isIndeterminate" @change="
+          <!-- checkbox -->
+          <template v-else-if="item.showType === 'department'">
+            <MOSTY.Department clearable v-model="searchObj[item.prop]" />
+          </template>
+          <!-- checkbox -->
+          <template v-else-if="item.showType === 'checkbox'">
+            <el-checkbox v-if="item.showSelectAll" v-model="item.checkAll" :indeterminate="item.isIndeterminate"
+              @change="
+                (val) => {
+                  handleCheckAllChange(val, item);
+                }
+              ">全选</el-checkbox>
+            <el-checkbox-group v-model="searchObj[item.prop]" @change="
+              (val) => {
+                handleCheckedCitiesChange(val, item);
+              }
+            ">
+              <el-checkbox v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-checkbox>
+            </el-checkbox-group>
+          </template>
+          <!-- radio -->
+          <el-radio-group v-else-if="item.showType === 'radio'" v-model="searchObj[item.prop]" @change="
             (val) => {
-              handleCheckAllChange(val, item);
-            }
-          ">全选</el-checkbox>
-          <el-checkbox-group v-model="searchObj[item.prop]" @change="
-            (val) => {
-              handleCheckedCitiesChange(val, item);
+              handleRadioChange(val, item);
             }
           ">
-            <el-checkbox v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-checkbox>
-          </el-checkbox-group>
-        </template>
-        <!-- radio -->
-        <el-radio-group v-else-if="item.showType === 'radio'" v-model="searchObj[item.prop]" @change="
-          (val) => {
-            handleRadioChange(val, item);
-          }
-        ">
-          <el-radio v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
-        </el-radio-group>
-        <!-- 级联选择 -->
-        <el-cascader v-else-if="item.showType === 'cascader'" v-model="searchObj[item.prop]" :props="item.props"
-          :show-all-levels="item.showAllLevels" :clearable="item.clearable" :options="getOptions[item.prop]"
-          :placeholder="item.placeholder" />
-        <div v-if="item.showType === 'Slot'">
-          <slot :name="item.prop"></slot>
+            <el-radio v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
+          </el-radio-group>
+          <!-- 级联选择 -->
+          <el-cascader v-else-if="item.showType === 'cascader'" v-model="searchObj[item.prop]" :props="item.props"
+            :show-all-levels="item.showAllLevels" :clearable="item.clearable" :options="getOptions[item.prop]"
+            :placeholder="item.placeholder" />
+          <div v-if="item.showType === 'Slot'">
+            <slot :name="item.prop"></slot>
+          </div>
+          <div v-if="item.showType === 'defaultSlot'">
+            <slot name="defaultSlot"></slot>
+          </div>
+          <div v-if="item.showType === 'nameSlot'">
+            <slot name="nameSlot"></slot>
+          </div>
         </div>
-        <div v-if="item.showType === 'defaultSlot'">
-          <slot name="defaultSlot"></slot>
-        </div>
-        <div v-if="item.showType === 'nameSlot'">
-          <slot name="nameSlot"></slot>
+
+      </div>
+      <div class="button-container">
+        <div class="flex">
+          <el-button type="primary" @click="submit" size="small">确定</el-button>
+          <el-button type="" @click="reset" size="small">重置</el-button>
+          <slot> </slot>
         </div>
       </div>
 
-      <div class="flex">
-        <el-button type="primary" @click="submit">确定</el-button>
-        <el-button type="" @click="reset">重置</el-button>
-        <slot> </slot>
-      </div>
     </div>
   </div>
 </template>
@@ -476,17 +487,32 @@ watchEffect(() => {
 
 <style lang="scss" scoped>
 .pageSearch {
+  .main-container {
+    padding: 0;
+  }
+
+  .content-container {
+    display: flex;
+    padding: 0 15px;
+  }
+
+  .button-container {
+    display: flex;
+    flex-direction: column-reverse;
+    margin-bottom: 10px;
+  }
 
   .filter-title {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
     width: 100%;
-background: linear-gradient(to right,  #9ed7ff, #e6f0f8);
-padding: 5px 15px;
+    background: linear-gradient(to right, #9ed7ff, #e6f0f8);
+    padding: 5px 15px;
+
     .filter-label {
-    display: flex;
-    align-items: center;
+      display: flex;
+      align-items: center;
       font-weight: bold;
       color: #000;
       margin-right: 10px;
@@ -501,7 +527,8 @@ padding: 5px 15px;
   }
 
   .box {
-    padding: 0 15px;
+    flex: 1;
+
     display: flex;
     flex-wrap: wrap;
 
diff --git a/src/layout/index.vue b/src/layout/index.vue
index ee9e917..5879dcf 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -57,7 +57,7 @@ import TestDiv from "@/components/common/TestDiv.vue";
 .hideSidebar .fixed-header {
   width: calc(100% - #{$hideSideBarWidth});
 }
-::v-deep .el-scrollbar__view{
-  border-right: 1px solid #07376d;
-}
+// ::v-deep .el-scrollbar__view{
+//   border-right: 1px solid #07376d;
+// }
 </style>
diff --git a/src/views/backOfficeSystem/fourColorManage/tagManage copy/components/editAddForm.vue b/src/views/backOfficeSystem/fourColorManage/tagManage copy/components/editAddForm.vue
new file mode 100644
index 0000000..e73f455
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/tagManage copy/components/editAddForm.vue	
@@ -0,0 +1,324 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span class="title">组合标签管理{{ title }} </span>
+      <div>
+        <el-button
+          type="primary"
+          size="small"
+          :loading="loading"
+          @click="submit"
+          >保存</el-button
+        >
+        <el-button size="small" @click="close">关闭</el-button>
+      </div>
+    </div>
+    <div class="form_cnt">
+      <FormMessage
+        v-model="listQuery"
+        :formList="formData"
+        ref="elform"
+        :rules="rules"
+      >
+        <!-- 身份标签细类 -->
+        <template #sfbqIdList>
+          <el-button @click="openDialog('01')">选择</el-button>
+          <div class="boxlist">
+            <MyTable
+              :tableData="tableDate.sfbqIdList"
+              :tableColumn="tableDate.tableColumn"
+              :tableHeight="tableDate.tableHeight"
+              :key="tableDate.keyCount"
+              :tableConfiger="tableDate.tableConfiger"
+              :controlsWidth="tableDate.controlsWidth"
+            >
+              <template #bqLx="{ row }">
+                <DictTag
+                  :value="row.bqLx"
+                  :tag="false"
+                  :options="props.dic.D_GS_BQ_LX"
+                />
+              </template>
+              <template #bqLb="{ row }">
+                <DictTag
+                  :value="row.bqLb"
+                  :tag="false"
+                  :options="props.dic.D_GS_BQ_LB"
+                />
+              </template>
+              <template #bqYs="{ row }">
+                <DictTag
+                  :value="row.bqYs"
+                  :tag="false"
+                  :options="props.dic.D_GS_SSYJ"
+                />
+              </template>
+              <template #bqDj="{ row }">
+                <DictTag
+                  :tag="false"
+                  :value="row.bqDj"
+                  :options="props.dic.D_GS_BQ_DJ"
+                />
+              </template>
+              <!-- 操作 -->
+              <template #controls="{ row }">
+                <el-link
+                  type="danger"
+                  @click="delDictItem(row.id, '身份标签细类')"
+                  >删除</el-link
+                >
+              </template>
+            </MyTable>
+          </div>
+        </template>
+        <!-- 行为标签细类 -->
+        <template #xwbqIdList>
+          <el-button @click="openDialog('02')">选择</el-button>
+          <div class="boxlist">
+            <MyTable
+              :tableData="tableDate.xwbqIdList"
+              :tableColumn="tableDate.tableColumn"
+              :tableHeight="tableDate.tableHeight"
+              :key="tableDate.keyCount"
+              :tableConfiger="tableDate.tableConfiger"
+              :controlsWidth="tableDate.controlsWidth"
+            >
+              <template #bqLx="{ row }">
+                <DictTag
+                  :value="row.bqLx"
+                  :tag="false"
+                  :options="props.dic.D_GS_BQ_LX"
+                />
+              </template>
+              <template #bqLb="{ row }">
+                <DictTag
+                  :value="row.bqLb"
+                  :tag="false"
+                  :options="props.dic.D_GS_BQ_LB"
+                />
+              </template>
+              <template #bqYs="{ row }">
+                <DictTag
+                  :value="row.bqYs"
+                  :tag="false"
+                  :options="props.dic.D_GS_SSYJ"
+                />
+              </template>
+              <template #bqDj="{ row }">
+                <DictTag
+                  :tag="false"
+                  :value="row.bqDj"
+                  :options="props.dic.D_GS_BQ_DJ"
+                />
+              </template>
+              <!-- 操作 -->
+              <template #controls="{ row }">
+                <el-link
+                  type="danger"
+                  @click="delDictItem(row.id, '行为标签细类')"
+                  >删除</el-link
+                >
+              </template>
+            </MyTable>
+          </div>
+        </template>
+      </FormMessage>
+    </div>
+    <!-- 列表弹窗 -->
+    <DialogList
+      :Single="false"
+      :roleIds="roleIds"
+      v-if="chooseShow"
+      :dic="props.dic"
+      @chooseDate="chooseDate"
+      :titleValue="chooseTitle"
+      v-model="chooseShow"
+      :bqLx="chooseType"
+      bqDl="02"
+    ></DialogList>
+  </div>
+</template>
+
+<script setup>
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import DialogList from "@/views/backOfficeSystem/fourColorManage/components/dialogList.vue";
+import FormMessage from "@/components/aboutTable/FormMessage.vue";
+import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
+import {
+  ref,
+  defineExpose,
+  defineProps,
+  reactive,
+  defineEmits,
+  getCurrentInstance
+} from "vue";
+const emit = defineEmits(["updateDate"]);
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  dic: Object
+});
+const roleIds = ref([]); //角色id
+const chooseType = ref("01"); //选择弹窗类型
+const chooseShow = ref(false); //选择弹窗
+const chooseTitle = ref(""); //选择弹窗
+const dialogForm = ref(false); //弹窗
+const formData = reactive([
+  { label: "组合标签名称", prop: "bqMc", type: "input" },
+  { label: "组合标签代码", prop: "bqDm", type: "input" },
+  // {
+  //   label: "标签等级",
+  //   prop: "bqDj",
+  //   type: "select",
+  //   options: props.dic.D_GS_BQ_DJ
+  // },
+  {
+    label: "标签颜色",
+    prop: "bqYs",
+    type: "select",
+    options: props.dic.D_GS_SSYJ
+  },
+  { label: "组合标签分值", prop: "bqFz", type: "input" },
+  { label: "组合标签说明", prop: "bqSm", type: "input" },
+  { label: "身份标签细类", prop: "sfbqIdList", type: "slot", width: "100%" },
+  { label: "行为标签细类", prop: "xwbqIdList", type: "slot", width: "100%" }
+]);
+const rules = reactive({
+  bqMc: [{ required: true, message: "请输入组合标签名称", trigger: "blur" }],
+  bqDm: [{ required: true, message: "请输入组合标签代码", trigger: "blur" }],
+  zhbqjf: [{ required: true, message: "请输入组合标签积分", trigger: "blur" }],
+  sfbqIdList: [
+    { required: true, message: "请选择身份标签细类", trigger: "change" }
+  ],
+  xwbqIdList: [
+    { required: true, message: "请选择行为标签细类", trigger: "change" }
+  ]
+});
+
+const tableDate = reactive({
+  sfbqIdList: [], //表格数据
+  xwbqIdList: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false
+  },
+  total: 0,
+  tableHeight: 225,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 90, //操作栏宽度
+  tableColumn: [
+    { label: "标签名称", prop: "bqMc", showOverflowTooltip: true },
+    { label: "标签代码", prop: "bqDm" },
+    { label: "标签大类名称", prop: "bqDlMc" },
+    { label: "标签类型", prop: "bqLx", showSolt: true },
+    { label: "标签类别", prop: "bqLb", showSolt: true },
+    { label: "标签颜色", prop: "bqYs", showSolt: true },
+    { label: "标签等级", prop: "bqDj", showSolt: true }
+  ]
+});
+const listQuery = ref({}); //表单
+const loading = ref(false);
+const elform = ref();
+const title = ref("");
+// 初始化数据
+const init = (type, row) => {
+  dialogForm.value = true;
+  title.value = type == "add" ? "新增" : "编辑";
+  if (row) getDataById(row.id);
+};
+// 根据id查询详情
+const getDataById = (id) => {
+  qcckGet({}, "/mosty-gsxt/tbGsxtBqzh/selectVoById/" + id).then((res) => {
+    listQuery.value = res;
+    tableDate.sfbqIdList = res.sfbqList;
+    listQuery.value.sfbqIdList = res.sfbqList.map((item) => item.id);
+    tableDate.xwbqIdList = res.xwbqList;
+    listQuery.value.xwbqIdList = res.xwbqList.map((item) => item.id);
+    tableDate.keyCount++;
+  });
+};
+
+// 提交
+const submit = () => {
+  elform.value.submit((data) => {
+    let url =
+      title.value == "新增"
+        ? "/mosty-gsxt/tbGsxtBqzh/save"
+        : "/mosty-gsxt/tbGsxtBqzh/update";
+    let params = { ...data };
+    loading.value = true;
+    qcckPost(params, url)
+      .then((res) => {
+        proxy.$message({ type: "success", message: title.value + "成功" });
+        emit("updateDate");
+        loading.value = false;
+        close();
+      })
+      .catch(() => {
+        loading.value = false;
+      });
+  });
+};
+// 打开弹窗
+const openDialog = (type) => {
+  chooseShow.value = true;
+  chooseType.value = type;
+  chooseTitle.value = type == "01" ? "选择身份标签细类" : "选择行为标签细类";
+  roleIds.value =
+    type == "01"
+      ? tableDate.sfbqIdList.map((item) => item.id)
+      : tableDate.xwbqIdList.map((item) => item.id);
+};
+// 选择数据
+const chooseDate = (data) => {
+  if (chooseType.value == "01") {
+    tableDate.sfbqIdList = data;
+    listQuery.value.sfbqIdList = tableDate.sfbqIdList.map((item) => item.id);
+  } else {
+    tableDate.xwbqIdList = data;
+    listQuery.value.xwbqIdList = tableDate.xwbqIdList.map((item) => item.id);
+  }
+};
+
+// 删除
+const delDictItem = (id, type) => {
+  switch (type) {
+    case "身份标签细类":
+      tableDate.sfbqIdList = tableDate.sfbqIdList.filter(
+        (item) => item.id !== id
+      );
+      listQuery.value.sfbqIdList = tableDate.sfbqIdList.map((item) => item.id);
+      break;
+    case "行为标签细类":
+      tableDate.xwbqIdList = tableDate.xwbqIdList.filter(
+        (item) => item.id !== id
+      );
+      listQuery.value.xwbqIdList = tableDate.xwbqIdList.map((item) => item.id);
+      break;
+  }
+};
+// 关闭
+const close = () => {
+  listQuery.value = {};
+  tableDate.sfbqIdList = [];
+  tableDate.xwbqIdList = [];
+  dialogForm.value = false;
+  loading.value = false;
+};
+defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+.boxlist {
+  width: 99%;
+  height: 225px;
+  margin-top: 10px;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/tagManage copy/index.vue b/src/views/backOfficeSystem/fourColorManage/tagManage copy/index.vue
new file mode 100644
index 0000000..1a705cb
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/tagManage copy/index.vue	
@@ -0,0 +1,178 @@
+<template>
+  <div>
+
+    <!-- 搜索 -->
+    <div ref="searchBox"  class="mt10">
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
+    </div>
+       <PageTitle  :malginLeft="10" :height="35" backgroundColor="#ffff" :marginBottom="5" :marginTop="5">
+      <template #left>
+        <!-- <el-button>
+          <span style="vertical-align: middle">调级</span>
+        </el-button>
+        <el-button>
+          <span style="vertical-align: middle">导出</span>
+        </el-button>
+        <el-button>
+          <span style="vertical-align: middle">导入</span>
+        </el-button> -->
+        <el-button size="small" type="primary" @click="addEdit('add', '')">
+          <el-icon style="vertical-align: middle">
+            <CirclePlus />
+          </el-icon>
+          <span style="vertical-align: middle">新增</span>
+        </el-button>
+        </template>
+      </PageTitle>
+    <!-- 表格 -->
+    <div class="tabBox">
+      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
+        <template #bqYs="{ row }">
+          <DictTag :value="row.bqYs" :tag="false" :options="D_GS_SSYJ" />
+        </template>
+        <template #bqDj="{ row }">
+          <DictTag :tag="false" :value="row.bqDj" :options="D_GS_BQ_DJ" />
+        </template>
+        <!-- 操作 -->
+        <template #controls="{ row }">
+          <el-link type="primary" @click="chooseJfFun(row)">配置系统</el-link>
+          <el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
+          <el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
+        </template>
+      </MyTable>
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
+        ...pageData.pageConfiger,
+        total: pageData.total
+      }"></Pages>
+    </div>
+    <!-- 编辑详情 -->
+    <EditAddForm v-if="show" ref="detailDiloag" :dic="{ D_GS_BQ_LX, D_GS_BQ_DJ, D_GS_SSYJ, D_GS_BQ_LB }"
+      @updateDate="getList" />
+<ChooseJf v-model="chooseJfShow" titleValue="选择系数"  :Single="false"
+   :chooseJfBh="chooseJfBh"  url="/tbGsxtBqzh/sjxspz" :roleIds="roleIds"/>
+  </div>
+</template>
+
+<script setup>
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import EditAddForm from "./components/editAddForm.vue";
+import ChooseJf from '@/components/ChooseList/ChooseJf/index.vue'
+import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+import { tbGsxtBqzhId } from "@/api/yj.js";
+import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
+const { proxy } = getCurrentInstance();
+const { D_GS_BQ_DJ, D_GS_SSYJ, D_GS_BQ_LB, D_GS_BQ_LX } = proxy.$dict("D_GS_BQ_DJ", "D_GS_SSYJ", "D_GS_BQ_LB", "D_GS_BQ_LX"); //获取字典数据
+const detailDiloag = ref();
+const show = ref(false)
+const searchBox = ref(); //搜索框
+const searchConfiger = ref(
+  [
+    { label: "组合标签名称", prop: 'bqMc', placeholder: "请输入组合标签名称", showType: "input" },
+    // { label: "组合标签标签等级", prop: 'bqDj', placeholder: "请选择组合标签标签等级", showType: "select",options: D_GS_BQ_DJ   },
+    { label: "组合标签颜色", prop: 'bqYs', placeholder: "请选择组合标签标签颜色", showType: "select", options: D_GS_SSYJ },
+  ]);
+const queryFrom = ref({});
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 160, //操作栏宽度
+  tableColumn: [
+    { label: "组合标签名称", prop: "bqMc" },
+    { label: "标签代码", prop: "bqDm" },
+    // { label: "组合标签等级", prop: "bqDj",showSolt:true },
+    { label: "组合标签颜色", prop: "bqYs", showSolt: true },
+    { label: "组合标签分值", prop: "bqFz" },
+    { label: "组合标签说明", prop: "bqSm", showOverflowTooltip: true },
+  ]
+});
+onMounted(() => {
+  tabHeightFn();
+  getList()
+});
+
+
+// 搜索
+const onSearch = (val) => {
+  queryFrom.value = { ...val }
+  pageData.pageConfiger.pageCurrent = 1;
+  getList()
+}
+
+const changeNo = (val) => {
+  pageData.pageConfiger.pageCurrent = val;
+  getList()
+}
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList()
+}
+
+const getList = () => {
+  pageData.tableConfiger.loading = true;
+  qcckGet(queryFrom.value, '/mosty-gsxt/tbGsxtBqzh/selectPage').then((res) => {
+    pageData.tableData = res.records;
+    pageData.total = res.total;
+    pageData.tableConfiger.loading = false;
+  }).catch(() => {
+    pageData.tableConfiger.loading = false;
+  })
+}
+
+
+// 删除
+const delDictItem = (id) => {
+  proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
+    qcckDelete({}, '/mosty-gsxt/tbGsxtBqzh/' + id).then(() => {
+      proxy.$message({ type: "success", message: "删除成功" });
+      getList();
+    })
+  }).catch(() => { });
+}
+
+// 新增
+const addEdit = (type, row) => {
+  show.value = true;
+  nextTick(() => {
+    detailDiloag.value.init(type, row,);
+  })
+};
+// 选择系数
+const chooseJfShow = ref(false)
+const chooseJfBh = ref()
+const roleIds=ref()
+const chooseJfFun = (val) => {
+  chooseJfBh.value=val.id
+  tbGsxtBqzhId(val.id).then(res => {
+  roleIds.value=res.sjxspzList.map(item => item.xsid)
+  chooseJfShow.value = true
+})
+}
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 270;
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningControl/controlWarning/components/particulars.vue b/src/views/backOfficeSystem/fourColorManage/warningControl/controlWarning/components/particulars.vue
new file mode 100644
index 0000000..a2ac9cb
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningControl/controlWarning/components/particulars.vue
@@ -0,0 +1,478 @@
+<!--预警指派展示组件  -->
+<template>
+  <el-dialog :draggable="true" :model-value="modelValue" :title="title" :width="width" @close="close" append-to-body>
+    <div class="archive-container">
+      <div class="three-column-layout">
+        <!-- 重点人员基本信息页 -->
+        <div class="column">
+          <div class="column-header">重点人员基本信息</div>
+          <div class="info-section">
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">人员姓名：</span>
+                <span class="info-value">{{ dataForm.yjRyxm }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">性别：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.xbdm" :tag="false" :options="dict.D_BZ_XB" />
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">年龄：</span>
+                <span class="info-value">{{ dataForm.nl }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">身份证号码：</span>
+                <span class="info-value">{{ dataForm.yjRysfzh }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">户籍地：</span>
+                <span class="info-value">{{ dataForm.hjdXz }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">现住地址：</span>
+                <span class="info-value">{{ dataForm.xzdXz }}</span>
+              </div>
+            </div>
+
+
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">处置要求：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.bkczyq" :tag="false" :options="dict.D_GS_BK_CZYQ" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">预警级别：</span>
+                <span class="info-value warning-level" :class="ys()">
+                  <DictTag :value="dataForm.yjJb" :tag="false" :options="dict.D_BZ_YJJB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">布控起始时间：</span>
+                <span class="info-value">{{ dataForm.bkkssj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">布控结束时间：</span>
+                <span class="info-value">{{ dataForm.bkjssj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">所属单位：</span>
+                <span class="info-value">{{ dataForm.ssbm }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">布控单位：</span>
+                <span class="info-value">{{ dataForm.gkbmmc }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">布控原因：</span>
+                <span class="info-value text-area"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">一标三实：</span>
+                <span class="info-value text-area"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 重点人员活动信息页 -->
+        <div class="column">
+          <div class="column-header">重点人员活动信息</div>
+          <div class="info-section blue-bg">
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">轨迹类别：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.yjLylx" :tag="false" :options="dict.D_GS_ZDR_GJLB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">核查时间：</span>
+                <span v-if="dataForm.fkList && dataForm.fkList.length > 0">{{ dataForm.fkList[0].czsj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">比对时间：</span>
+                <span class="info-value">{{ dataForm.yjSj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">预警内容：</span>
+                <span class="info-value text-area">{{ dataForm.yjNr }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">预警信息提供单位：</span>
+                <span class="info-value">{{ dataForm.jczmc }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">预警信息接收单位：</span>
+                <span class="info-value">{{ dataForm.ssbm }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">二次指派单位：</span>
+                <span class="info-value">
+                  <div v-if="dataForm.zpList && dataForm.zpList.length > 0">
+                    <span v-for="(item, index) in dataForm.zpList" :key="item.id">
+                      {{ item.zpbm }}<span v-if="index < dataForm.zpList.length - 1">,</span>
+                    </span>
+                  </div>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">签收时限：</span>
+                <span class="info-value">{{ dataForm.qssj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">反馈时限：</span>
+                <span class="info-value">{{ dataForm.fksj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">处置建议：</span>
+                <span class="info-value text-area">
+                  <div v-if="dataForm.czjyList && dataForm.czjyList.length > 0">
+                    <div v-for="(item, index) in dataForm.czjyList" :key="item.id">
+                      <span>{{ `${index + 1}、` + item.jynr }}</span>
+                    </div>
+
+                  </div>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">反馈内容：</span>
+                <span class="info-value text-area">
+                  <div v-if="dataForm.fkList && dataForm.fkList.length > 0">
+                    <div v-for="(item, index) in dataForm.fkList" :key="item.id">
+                      <span v-if="item.ckczbcxx">{{ `${index + 1}、` + item.ckczbcxx }}</span>
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 历史预警信息页 -->
+        <div class="column">
+          <div class="column-header">历史预警信息</div>
+          <div class="info-section">
+            <div class="history-item" v-for="(item, index) in dataForm.yjgjList" :key="item.id">
+              <span class="history-index">{{ `${index + 1}：` }}</span>
+              <span class="history-content">{{ item.yjNr }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer" style="text-align: center;">
+        <el-button @click="close">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+import { defineProps, getCurrentInstance, watch, ref } from 'vue';
+import { qcckGet } from '@/api/qcckApi.js'
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: '预警详情'
+  },
+  width: {
+    type: String,
+    default: '90%'
+  }, dataList: {
+    type: Object,
+    default: () => ({})
+  },
+  dict: {
+    type: Object,
+    default: () => ({})
+  }
+
+});
+// 定义事件
+const emit = defineEmits(['update:modelValue']);
+const loading = ref(false)
+let abortController = null
+const close = () => {
+  if (abortController) {
+    abortController.abort()
+    abortController = null
+  }
+  loading.value = false
+  emit('update:modelValue', false);
+};
+const dataForm = ref({});
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) {
+    getPart(props.dataList.id)
+  }
+}, { deep: true });
+const getPart = (id) => {
+  if (abortController) {
+    abortController.abort()
+  }
+  abortController = new AbortController()
+  loading.value = true
+  qcckGet({}, `/mosty-gsxt/tbYjxx/getInfo/${id}`, { signal: abortController.signal }).then(res => {
+    if (res) {
+      dataForm.value = res
+    } else {
+      dataForm.value = {}
+    }
+  }).catch(err => {
+    if (err.name !== 'AbortError') {
+      console.error('请求失败:', err)
+    }
+  }).finally(() => {
+    loading.value = false
+  })
+}
+const ys = () => {
+  switch (dataForm.value.yjJb) {
+    case '01':
+      return 'red';
+    case '02':
+      return 'orange';
+    case '03':
+      return 'yellow';
+    case '04':
+      return 'blue';
+    default:
+      return '';
+  }
+}
+</script>
+
+<style scoped>
+.archive-container {
+  padding: 0;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.three-column-layout {
+  display: flex;
+  height: 100%;
+}
+
+.column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  border: 1px solid #dcdfe6;
+}
+
+.column:not(:last-child) {
+  border-right: 1px solid #dcdfe6;
+}
+
+.column-header {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 10px;
+  background: #f5f7fa;
+  color: #303133;
+  text-align: center;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.column .info-section {
+  flex: 1;
+  overflow-y: auto;
+  padding: 15px;
+}
+
+.info-section {
+  background: #ffffff;
+}
+
+.info-section.blue-bg {
+  background: #e6f7ff;
+  border: none;
+}
+
+.info-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.info-item {
+  flex: 1;
+  min-width: 300px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.info-item.full-width {
+  flex: 100%;
+  min-width: 100%;
+}
+
+.info-label {
+  font-weight: 600;
+  margin-right: 10px;
+  white-space: nowrap;
+  color: #303133;
+  font-size: 14px;
+  width: 100px;
+  flex-shrink: 0;
+}
+
+.info-value {
+  flex: 1;
+  padding: 4px 8px;
+  border: 1px solid #dcdfe6;
+  background: #ffffff;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #606266;
+}
+
+.info-value.text-area {
+  min-height: 80px;
+  align-items: flex-start;
+  padding: 8px;
+  resize: vertical;
+  line-height: 1.5;
+}
+
+.info-value.warning-level {
+  background: #fffbe6;
+  border-color: #ffe58f;
+  color: #d48806;
+  font-weight: 600;
+  padding: 2px 6px;
+  font-size: 12px;
+  width: fit-content;
+}
+
+.info-value.warning-level.red {
+  background: #fef0f0;
+  border-color: #ffccc7;
+  color: #f56c6c;
+}
+
+.info-value.warning-level.orange {
+  background: #fffbe6;
+  border-color: #ffe58f;
+  color: #d48806;
+}
+
+.info-value.warning-level.yellow {
+  background: #fdf6ec;
+  border-color: #faecd8;
+  color: #e6a23c;
+}
+
+.info-value.warning-level.blue {
+  background: #ecf5ff;
+  border-color: #d9ecff;
+  color: #409eff;
+}
+
+.history-item {
+  margin-bottom: 8px;
+  padding: 6px 10px;
+  border: none;
+  background: #ffffff;
+  display: flex;
+}
+
+.history-index {
+  font-weight: bold;
+  margin-right: 8px;
+  color: #303133;
+  font-size: 14px;
+  min-width: 40px;
+}
+
+.history-content {
+  flex: 1;
+  color: #606266;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+/* 滚动条样式 */
+.archive-container::-webkit-scrollbar,
+.info-section::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.archive-container::-webkit-scrollbar-track,
+.info-section::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.archive-container::-webkit-scrollbar-thumb,
+.info-section::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+}
+
+.archive-container::-webkit-scrollbar-thumb:hover,
+.info-section::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 按钮样式 */
+.dialog-footer {
+  padding: 15px;
+  background: #f9f9f9;
+  border-top: 1px solid #e4e7ed;
+  text-align: center;
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningControl/controlWarning/index.vue b/src/views/backOfficeSystem/fourColorManage/warningControl/controlWarning/index.vue
index a87c91e..d58a8b0 100644
--- a/src/views/backOfficeSystem/fourColorManage/warningControl/controlWarning/index.vue
+++ b/src/views/backOfficeSystem/fourColorManage/warningControl/controlWarning/index.vue
@@ -12,24 +12,17 @@
         </template>
       </Searchs>
     </div>
-     <PageTitle :malginLeft="10" :height="35" backgroundColor="#ffff" :marginBottom="5" :marginTop="5">
+    <PageTitle :malginLeft="10" :height="35" backgroundColor="#ffff" :marginBottom="5" :marginTop="5">
       <template #left>
         <el-button type="primary" @click="exportExl" size="small">导出</el-button>
         <el-button type="primary" size="small" @click="handleQs">签收</el-button>
       </template>
-      </PageTitle>
+    </PageTitle>
     <!-- 表格 -->
     <div class="tabBox tabBox_zdy" :style="{ height: (pageData.tableHeight + 40) + 'px' }">
-      <MyTable 
-        :tableData="pageData.tableData" 
-        :tableColumn="pageData.tableColumn" 
-        :tableHeight="pageData.tableHeight"
-        :key="pageData.keyCount" 
-        :tableConfiger="pageData.tableConfiger" 
-        :controlsWidth="pageData.controlsWidth" 
-        expand
-        @chooseData="handleChooseData"
-      >
+      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth" expand
+        @chooseData="handleChooseData">
         <template #expand="{ props }">
           <Items :row="props || {}" :dict="dict" />
         </template>
@@ -55,18 +48,18 @@
           <DictTag :value="row.czzt" :options="D_GSXT_YJXX_CZZT" />
         </template>
         <template #sex="{ row }">
-            <span v-if="row.yjRysfzh"> {{ IdCard(row.yjRysfzh,2) }} </span>
+          <span v-if="row.yjRysfzh"> {{ IdCard(row.yjRysfzh, 2) }} </span>
         </template>
         <template #age="{ row }">
-            <span v-if="row.yjRysfzh"> {{ IdCard(row.yjRysfzh,3) }} </span>
+          <span v-if="row.yjRysfzh"> {{ IdCard(row.yjRysfzh, 3) }} </span>
         </template>
 
         <template #yjLylx="{ row }">
-          <DictTag :value="row.yjLylx" :tag="false"  :options="D_BZ_YJLY" />
+          <DictTag :value="row.yjLylx" :tag="false" :options="D_BZ_YJLY" />
         </template>
 
         <template #bqdl="{ row }">
-          <DictTag :value="row.bqdl" :tag="false"  :options="D_GS_QLZDRLX" />
+          <DictTag :value="row.bqdl" :tag="false" :options="D_GS_QLZDRLX" />
         </template>
         <template #xsd="{ row }">
           {{ row.xsd }}%
@@ -76,9 +69,10 @@
           <el-link type="warning" @click="pushAssess(row)">全息档案</el-link>
           <el-link type="primary" @click="handleCzjy(row)" v-if="roleCode">处置建议</el-link>
           <el-link type="success" @click="handleQsFk(row, '签收')" v-if="row.czzt == '01' && permission_sfqs">签收</el-link>
-          <el-link type="success" @click="handleQsFk(row, '反馈')" v-if="row.czzt == '02' && permission_sfqs" >反馈</el-link>
-          <el-link type="primary" @click="openAddFrom(row)">详情</el-link>
-            <el-link type="primary" @click="pushWarning(row)">指派</el-link>
+          <el-link type="success" @click="handleQsFk(row, '反馈')" v-if="row.czzt == '02' && permission_sfqs">反馈</el-link>
+          <!-- <el-link type="primary" @click="openAddFrom(row)">详情</el-link> -->
+          <el-link type="primary" @click="pushWarning(row)">指派</el-link>
+                  <el-link type="primary" @click="openBox(row)">详情</el-link>
         </template>
       </MyTable>
       <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
@@ -91,11 +85,13 @@
   <AddFrom ref="addModelRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_GS_SSYJ }" />
   <!-- 处置建议 -->
   <Czjy ref="czjyRef" @okSubmit="getList"></Czjy>
-      <ZpForm v-model="warningShow" :dataList="dataList"/>
+  <ZpForm v-model="warningShow" :dataList="dataList" />
+  <!-- <Pagination v-model="paginationOpen" /> -->
+    <Pagination v-model="paginationOpen" :dataList="dataPres" :dict="{D_BZ_XB,D_BZ_YJJB,D_GS_QLZDRLX,D_GS_ZDR_RYJB,D_GS_ZDR_GJLB,D_GS_BK_CZYQ}" />
 </template>
 
 <script setup>
-  import { IdCard } from '@/utils/validate.js'
+import { IdCard } from '@/utils/validate.js'
 import Czjy from './components/czjy.vue'
 import { getItem, setItem } from '@/utils/storage'
 import PageTitle from "@/components/aboutTable/PageTitle.vue";
@@ -112,20 +108,45 @@ import { holographicProfileJump } from "@/utils/tools.js"
 import Items from "./item/items.vue"
 import { exportExlByObj } from "@/utils/exportExcel.js"
 import { getMultiDictVal } from "@/utils/dict.js"
+import Pagination from "./components/particulars.vue";
 const czjyRef = ref()
 const { proxy } = getCurrentInstance();
 const searchBox = ref();
-const { D_GS_QLZDRLX,D_BZ_YJLY,D_GSXT_YJXX_CZZT, D_GS_SSYJ,D_BZ_YJJB } = proxy.$dict('D_GS_QLZDRLX','D_BZ_YJLY',"D_GSXT_YJXX_CZZT", "D_GS_SSYJ",'D_BZ_YJJB')
+const { D_GS_QLZDRLX, D_BZ_YJLY, D_GSXT_YJXX_CZZT, D_GS_SSYJ, D_BZ_YJJB, D_BZ_BKLYS, D_BZ_XB, D_BZ_SF, D_GS_CSZT, D_GS_BKZT, D_GS_ZDR_RYJB, D_GS_ZDR_GJLB,D_GS_BK_CZYQ } = proxy.$dict('D_GS_QLZDRLX', 'D_BZ_YJLY', "D_GSXT_YJXX_CZZT", "D_GS_SSYJ", 'D_BZ_YJJB', 'D_BZ_BKLYS', 'D_BZ_XB', 'D_BZ_SF', 'D_GS_CSZT', 'D_GS_BKZT', 'D_GS_ZDR_RYJB', 'D_GS_ZDR_GJLB','D_GS_BK_CZYQ'
+
+)
 const dict = reactive({ D_GSXT_YJXX_CZZT, D_GS_SSYJ })
 // 搜索配置
 const searchConfiger = ref([
-  { label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input" },
-  { label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input" },
-  { label: "预警标签", prop: 'yjbqmc', placeholder: "请输入预警标签", showType: "input" },
-  { label: "部门", prop: 'ssbmdm', placeholder: "请选择部门", showType: "department" },
-  { label: "级别", prop: 'yjJb', placeholder: "请选择级别", showType: "select" ,options: D_BZ_YJJB},
-  { label: "积分段", prop: 'jfd', placeholder: "请选择积分段", showType: "Slot" },
-  { label: "布控时间", prop: 'startTime', placeholder: "请选择布控时间", showType: "datetimerange" },
+  { label: "布控开始时间", prop: 'bkkssj', showType: "date", placeholder: "请选择布控开始时间" },
+  { label: "布控结束时间", prop: 'bkjssj', showType: "date", placeholder: "请选择布控结束时间" },
+  { label: "预警时间", prop: 'startTime', showType: "datetimerange", placeholder: "请选择预警时间" },
+  { label: "预警级别", prop: 'yjJb', showType: "select", options: D_BZ_YJJB, placeholder: "请选择预警级别", multiple: true },
+  { label: "布控来源", prop: 'bkly', showType: "select", options: D_BZ_BKLYS, placeholder: "请选择布控来源" },
+  { label: "布控范围", prop: 'bkfw', showType: "input", placeholder: "请输入布控范围" },
+  { label: "布控单位", prop: 'gkbmdm', showType: "department", placeholder: "请选择布控单位" },
+  { label: "所属单位", prop: 'ssbmdm', showType: "department", placeholder: "请选择所属单位" },
+  { label: "相似度", prop: 'xsd', showType: "input", placeholder: "请输入相似度" },
+  { prop: 'sfglyj', showType: "checkbox", showSelectAll: false, options: [{ label: '关联预警', value: '1' }] },
+  { prop: 'sfgz', showType: "checkbox", showSelectAll: false, options: [{ label: '重点关注', value: '1' }] },
+  { prop: 'sfzp', showType: "checkbox", showSelectAll: false, options: [{ label: '二次指派', value: '1' }] },
+  { label: "签收状态", prop: 'czzt', showType: "select", options: D_GSXT_YJXX_CZZT },
+  { label: "超时状态", prop: 'cszt', placeholder: "请选择超时状态", showType: "select", options: D_GS_CSZT },
+  { label: "布控状态", prop: 'zkzt', showType: "select", options: D_GS_BKZT, placeholder: "请选择布控状态" },
+  { label: "姓名", prop: 'yjRyxm', showType: "input", placeholder: "请输入姓名" },
+  { label: "性别", prop: 'xbdm', showType: "select", options: D_BZ_XB, placeholder: "请选择性别" },
+  { label: "开始年龄", prop: 'ksnl', placeholder: "请输入年龄", showType: "number" },
+  { label: "结束年龄", prop: 'jsnl', placeholder: "请输入年龄", showType: "number" },
+  { label: "跨地区", prop: 'sflksd', showType: "select", options: D_BZ_SF, placeholder: "请选择是否跨地区" },
+  { label: "身份证号", prop: 'yjRysfzh', showType: "input", placeholder: "请输入身份证号" },
+  { label: "预警内容", prop: 'yjNr', showType: "input", placeholder: "请输入预警内容" },
+  // { label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input" },
+  // { label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input" },
+  // { label: "预警标签", prop: 'yjbqmc', placeholder: "请输入预警标签", showType: "input" },
+  // { label: "部门", prop: 'ssbmdm', placeholder: "请选择部门", showType: "department" },
+  // { label: "级别", prop: 'yjJb', placeholder: "请选择级别", showType: "select" ,options: D_BZ_YJJB},
+  // { label: "积分段", prop: 'jfd', placeholder: "请选择积分段", showType: "Slot" },
+  // { label: "布控时间", prop: 'startTime', placeholder: "请选择布控时间", showType: "datetimerange" },
 ]);
 const ORDIMG = 'https://89.40.7.122:38496/image'
 const IMGYM = 'https://sg.lz.dsj.xz/dhimage'
@@ -151,26 +172,34 @@ const pageData = reactive({
   },
   controlsWidth: 180, //操作栏宽度
   tableColumn: [
-    { label: "预警图片", prop: "yjTp", showSolt: true, width: 100 },
-    { label: "处置状态", prop: "czzt", showSolt: true },
-    { label: "预警时间", prop: "yjSj", showOverflowTooltip: true, width: 200 },
-    { label: "姓名", prop: "yjRyxm" },
-    { label: "性别", prop: "sex", showSolt: true, width: 80 },
-    { label: "年龄", prop: "age", showSolt: true, width: 80 },
-    { label: "数据来源", prop: "yjLylx", showOverflowTooltip: true, showSolt: true },
-    { label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true, width: 200 },
-    { label: "预警级别", prop: "yjJb", showSolt: true },
-    { label: "相似度", prop: "xsd", showSolt: true },
+    { label: "状态", prop: "czzt", showSolt: true, width: 80 },
+    { label: "预警时间", prop: "yjSj", showOverflowTooltip: true },
+    { label: "姓名", prop: "yjRyxm" , width: 50},
+    { label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
+    { label: "性别", prop: "sex", showSolt: true , width: 50},
+    { label: "年龄", prop: "age", showSolt: true, width: 50 },
+    { label: "预警级别", prop: "yjJb", showSolt: true , width: 50},
+    { label: "布控单位", prop: "gkbmdm", showSolt: true , width: 50},
+    { label: "布控来源", prop: "bkly", showSolt: true , width: 50},
+    { label: "布控范围", prop: "bkfw", showSolt: true },
+    { label: "布控开始时间", showOverflowTooltip: true, prop: "bkkssj", showSolt: true },
+    { label: "布控结束时间", showOverflowTooltip: true, prop: "bkjssj", showSolt: true },
+    { label: "处置要求", prop: "bkczyq", showSolt: true, showOverflowTooltip: true },
+    { label: "相似度", prop: "xsd", showSolt: true, width: 50 },
+    { label: "预警内容", prop: "yjNr", showOverflowTooltip: true, showSolt: true },
     { label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
+    { label: "数据来源", prop: "yjLylx", showOverflowTooltip: true, showSolt: true },
+    { label: "超时状态", prop: "cszt", showOverflowTooltip: true, showSolt: true, width: 50 },
+    { label: "在控状态", prop: "zkzt", showOverflowTooltip: true, showSolt: true, width: 50 },
   ]
 });
 
 onMounted(() => {
   let str = getItem('deptId') ? getItem('deptId')[0].deptLevel : ''
-  permission_sfqs.value = str.startsWith('2'||'3') ? false : true;
-  let rols = getItem('roleList') ? getItem('roleList'):[]
+  permission_sfqs.value = str.startsWith('2' || '3') ? false : true;
+  let rols = getItem('roleList') ? getItem('roleList') : []
   let obj = rols.find(item => {
-    return  ['JS_666666','JS_777777','JS_888888'].includes(item.roleCode)
+    return ['JS_666666', 'JS_777777', 'JS_888888'].includes(item.roleCode)
   })
   roleCode.value = obj ? true : false;
 
@@ -183,7 +212,12 @@ const onSearch = (val) => {
     ...queryFrom.value, ...val,
     startTime: val.startTime ? val.startTime[0] : '',
     endTime: val.startTime ? val.startTime[1] : '',
-   };
+    yjJb: val.yjJb?.join(',') || '',
+    sfglyj: val.sfglyj?.join(',') || '',
+    sfgz: val.sfgz?.join(',') || '',
+    sfzp: val.sfzp?.join(',') || ''
+  };
+
   pageData.pageConfiger.pageCurrent = 1;
   getList();
 };
@@ -210,7 +244,7 @@ const getList = () => {
     pageCurrent: pageData.pageConfiger.pageCurrent,
     pageSize: pageData.pageConfiger.pageSize,
   }
-  qcckPost(params,'/mosty-gsxt/tbYjxx/getBdbkPageList').then((res) => {
+  qcckPost(params, '/mosty-gsxt/tbYjxx/getBdbkPageList').then((res) => {
     pageData.tableData = res?.records || []
     pageData.total = res?.total || 0;
     pageData.tableConfiger.loading = false;
@@ -239,7 +273,7 @@ const handleQsFk = (val, type) => {
 }
 
 const pushAssess = (val) => {
-  return holographicProfileJump(val?.yjLx,val) // 全息档案跳转
+  return holographicProfileJump(val?.yjLx, val) // 全息档案跳转
 }
 
 
@@ -265,13 +299,13 @@ const openAddFrom = (row) => {
 }
 
 const handleCzjy = (row) => {
-  czjyRef.value.init( row)
+  czjyRef.value.init(row)
 }
 // 表格高度计算
 const tabHeightFn = () => {
-    pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 270;
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 270;
 
-  window.onresize = function() {
+  window.onresize = function () {
     tabHeightFn();
   };
 };
@@ -324,14 +358,14 @@ const exportExl = () => {
 }
 
 const handleQs = () => {
-  if (selectRows.value?.length === 0)  return proxy.$message({ type: "warning", message: "请选择要签收的预警" });
+  if (selectRows.value?.length === 0) return proxy.$message({ type: "warning", message: "请选择要签收的预警" });
   let wqs = selectRows.value.filter(item => item.czzt == '01');
   if (wqs.length == 0) return proxy.$message({ type: "warning", message: "数据都已签收，请选择未签收的数据" });
   let yqs = selectRows.value.filter(item => item.czzt == '02');
   let texy = yqs.length > 0 ? `${yqs.length}条已签收预警数据，确认要签收${wqs.length}条未签收预警数据吗？` : '确认要签收所有预警数据吗？'
   proxy.$confirm(texy, "警告", { type: "warning" }).then(() => {
     let ids = wqs.map(item => item.id)
-    qcckPost({ids}, '/mosty-gsxt/tbYjxx/batchQs').then(() => {
+    qcckPost({ ids }, '/mosty-gsxt/tbYjxx/batchQs').then(() => {
       proxy.$message({ type: "success", message: "成功" });
       getList();
     }).catch(() => {
@@ -340,17 +374,30 @@ const handleQs = () => {
   }).catch(() => { });
 }
 
+// 详情
+const paginationOpen = ref(false)
+const dataPres = ref({})
+const openBox = (val) => {
+  paginationOpen.value = true
+  dataPres.value = val
+}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .el-loading-mask {
   background: rgba(0, 0, 0, 0.5) !important;
 }
 
-.tabBox_zdy{
+.tabBox_zdy {
   .el-table--fit {
     overflow: unset !important;
   }
 }
+::v-deep .el-table .cell {
+  padding: 0;
+}
 
+::v-deep .el-table .el-table__cell {
+  padding: 4px 0;
+}
 </style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningControl/regionalControl/components/particulars.vue b/src/views/backOfficeSystem/fourColorManage/warningControl/regionalControl/components/particulars.vue
new file mode 100644
index 0000000..af80bd9
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningControl/regionalControl/components/particulars.vue
@@ -0,0 +1,455 @@
+<!--预警指派展示组件  -->
+<template>
+  <el-dialog :draggable="true" :model-value="modelValue" :title="title" :width="width" @close="close" append-to-body>
+    <div class="archive-container" v-loading="loading">
+      <div class="three-column-layout">
+        <!-- 重点人员基本信息页 -->
+        <div class="column">
+          <div class="column-header">人员预警信息首页</div>
+          <div class="info-section">
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">人员姓名：</span>
+                <span class="info-value">{{ dataForm.yjRyxm }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">性别：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.xbdm" :tag="false" :options="dict.D_BZ_XB" />
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">年龄：</span>
+                <span class="info-value">{{ dataForm.nl }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">身份证号码：</span>
+                <span class="info-value">{{ dataForm.yjRysfzh }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">户籍地：</span>
+                <span class="info-value">{{ dataForm.hjdXz }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">现住地址：</span>
+                <span class="info-value">{{ dataForm.xzdXz }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">处置要求：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.bkczyq" :tag="false" :options="dict.D_GS_BK_CZYQ" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">预警级别：</span>
+                <span class="info-value warning-level" :class="ys()">
+                  <DictTag :value="dataForm.yjJb" :tag="false" :options="dict.D_BZ_YJJB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">布控起始时间：</span>
+               <span class="info-value">{{ dataForm.bkkssj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">布控结束时间：</span>
+              <span class="info-value">{{ dataForm.bkjssj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">所属单位：</span>
+                <span class="info-value">{{ dataForm.ssbm }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">布控单位：</span>
+             <span class="info-value">{{ dataForm.gkbmmc }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">布控原因：</span>
+                <span class="info-value text-area"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">一标三实：</span>
+                <span class="info-value text-area"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 重点人员活动信息页 -->
+        <div class="column">
+          <div class="column-header">人境预警活动信息页</div>
+          <div class="info-section blue-bg">
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">轨迹类别：</span>
+              <span class="info-value">
+                  <DictTag :value="dataForm.yjLylx" :tag="false" :options="dict.D_GS_ZDR_GJLB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">核查时间：</span>
+             <span class="info-value">
+                  <span v-if="dataForm.fkList && dataForm.fkList.length > 0">{{ dataForm.fkList[0].czsj }}</span>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">比对时间：</span>
+             <span class="info-value">{{ dataForm.yjSj }}</span>
+              </div>
+            </div>
+            <!-- <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">五管检查站：</span>
+                <span class="info-value">A29核查</span>
+              </div>
+            </div> -->
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">信息提供单位：</span>
+                    <span class="info-value">{{ dataForm.jczmc }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">信息接收单位：</span>
+             <span class="info-value">{{ dataForm.ssbm }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">二次指派单位：</span>
+                <span class="info-value">
+                  <div v-if="dataForm.zpList && dataForm.zpList.length > 0">
+                    <span v-for="(item, index) in dataForm.zpList" :key="item.id">
+                      {{ item.zpbm }}<span v-if="index < dataForm.zpList.length - 1">,</span>
+                    </span>
+                  </div>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">签收时限：</span>
+             <span class="info-value">{{ dataForm.qssj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">反馈时限：</span>
+                 <span class="info-value">{{ dataForm.fksj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">处置建议：</span>
+                    <span class="info-value">
+                  <div v-if="dataForm.czjyList && dataForm.czjyList.length > 0">
+                    <div v-for="(item, index) in dataForm.czjyList" :key="item.id">
+                      <span>{{ `${index + 1}、` + item.jynr }}</span>
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">反馈内容：</span>
+                    <span class="info-value">
+                  <div v-if="dataForm.fkList && dataForm.fkList.length > 0">
+                    <div v-for="(item, index) in dataForm.fkList" :key="item.id">
+                      <span v-if="item.ckczbcxx">{{ `${index + 1}、` + item.ckczbcxx }}</span>
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 历史预警信息页 -->
+        <div class="column">
+          <div class="column-header">历史预警信息页</div>
+          <div class="info-section">
+            <div class="history-item" v-for="(item, index) in dataForm.yjgjList" :key="item.id">
+              <span class="history-index">{{ `${index + 1}：` }}</span>
+              <span class="history-content">{{ item.yjNr }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer" style="text-align: center;">
+        <el-button @click="close">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+import { defineProps, getCurrentInstance, watch, ref } from 'vue';
+import { qcckGet } from '@/api/qcckApi.js'
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: '预警详情'
+  },
+  width: {
+    type: String,
+    default: '90%'
+  }, dataList: {
+    type: Object,
+    default: () => ({})
+  },
+  dict: {
+    type: Object,
+    default: () => ({})
+  }
+
+});
+// 定义事件
+const emit = defineEmits(['update:modelValue']);
+const loading = ref(false)
+let abortController = null
+const close = () => {
+  if (abortController) {
+    abortController.abort()
+    abortController = null
+  }
+  loading.value = false
+  emit('update:modelValue', false);
+};
+const dataForm = ref({});
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) {
+    getPart(props.dataList.id)
+  }
+}, { deep: true });
+const getPart = (id) => {
+  if (abortController) {
+    abortController.abort()
+  }
+  abortController = new AbortController()
+  loading.value = true
+  qcckGet({}, `/mosty-gsxt/tbYjxx/getInfo/${id}`, { signal: abortController.signal }).then(res => {
+       if (res) {
+      dataForm.value = res
+    } else {
+      dataForm.value = {}
+    }
+  }).catch(err => {
+    if (err.name !== 'AbortError') {
+      console.error('请求失败:', err)
+    }
+  }).finally(() => {
+    loading.value = false
+  })
+}
+const ys = () => {
+  switch (dataForm.value.yjJb) {
+    case '01':
+      return 'red';
+    case '02':
+      return 'orange';
+    case '03':
+      return 'yellow';
+    case '04':
+      return 'blue';
+    default:
+      return '';
+  }
+}
+</script>
+
+<style scoped>
+.archive-container {
+  padding: 0;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.three-column-layout {
+  display: flex;
+  height: 100%;
+  border: 1px solid #dcdfe6;
+}
+
+.column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  border-right: 1px solid #dcdfe6;
+}
+
+.column:last-child {
+  border-right: none;
+}
+
+.column-header {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 8px;
+  background: #f0f2f5;
+  color: #303133;
+  text-align: center;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.column .info-section {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.info-section {
+  background: #ffffff;
+}
+
+.info-section.blue-bg {
+  background: #e6f7ff;
+  border: none;
+}
+
+.info-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+.info-item {
+  flex: 1;
+  min-width: 300px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.info-item.full-width {
+  flex: 100%;
+  min-width: 100%;
+}
+
+.info-label {
+  font-weight: 600;
+  margin-right: 8px;
+  white-space: nowrap;
+  color: #303133;
+  font-size: 13px;
+  width: 90px;
+  flex-shrink: 0;
+}
+
+.info-value {
+  flex: 1;
+  padding: 3px 6px;
+  border: 1px solid #dcdfe6;
+  background: #ffffff;
+  min-height: 26px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: #606266;
+}
+
+.info-value.text-area {
+  min-height: 70px;
+  align-items: flex-start;
+  padding: 6px;
+  resize: vertical;
+  line-height: 1.4;
+}
+
+.info-value.warning-level {
+  background: #fffbe6;
+  border-color: #ffe58f;
+  color: #d48806;
+  font-weight: 600;
+  padding: 2px 6px;
+  font-size: 12px;
+  width: fit-content;
+}
+
+.history-item {
+  margin-bottom: 6px;
+  padding: 4px 8px;
+  border: none;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+}
+
+.history-index {
+  font-weight: bold;
+  margin-right: 6px;
+  color: #303133;
+  font-size: 13px;
+  min-width: 35px;
+}
+
+.history-content {
+  flex: 1;
+  color: #606266;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+/* 滚动条样式 */
+.archive-container::-webkit-scrollbar,
+.info-section::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.archive-container::-webkit-scrollbar-track,
+.info-section::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.archive-container::-webkit-scrollbar-thumb,
+.info-section::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+}
+
+.archive-container::-webkit-scrollbar-thumb:hover,
+.info-section::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 按钮样式 */
+.dialog-footer {
+  padding: 12px;
+  background: #f9f9f9;
+  border-top: 1px solid #e4e7ed;
+  text-align: center;
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningControl/regionalControl/index.vue b/src/views/backOfficeSystem/fourColorManage/warningControl/regionalControl/index.vue
index 9aba587..53bd085 100644
--- a/src/views/backOfficeSystem/fourColorManage/warningControl/regionalControl/index.vue
+++ b/src/views/backOfficeSystem/fourColorManage/warningControl/regionalControl/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 搜索 -->
-    <div ref="searchBox" class="mt10" >
+    <div ref="searchBox" class="mt10">
       <Searchs :searchArr="searchConfiger" @submit="onSearch" @reset="reset" :key="pageData.keyCount">
         <template #jfd>
           <div>
@@ -12,12 +12,12 @@
         </template>
       </Searchs>
     </div>
-      <PageTitle :malginLeft="10" :height="35" backgroundColor="#ffff" :marginBottom="5" :marginTop="5">
+    <PageTitle :malginLeft="10" :height="35" backgroundColor="#ffff" :marginBottom="5" :marginTop="5">
       <template #left>
         <el-button type="primary" @click="exportExl" size="small">导出</el-button>
         <el-button type="primary" size="small" @click="handleQs">签收</el-button>
       </template>
-      </PageTitle>
+    </PageTitle>
     <!-- 表格 -->
     <div class="tabBox" :style="{ height: (pageData.tableHeight + 40) + 'px' }">
       <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
@@ -35,16 +35,24 @@
         <template #yjLylx="{ row }">
           <DictTag :value="row.yjLylx" :tag="false" :options="D_BZ_YJLY" />
         </template>
+        <template #xbdm="{ row }">
+          <DictTag :value="row.xbdm" :tag="false" :options="D_BZ_XB" />
+        </template>
         <template #expand="{ props }">
           <div class="expand-content" style="max-width: 100%; max-height: 400px; overflow-y: auto; padding: 10px;">
             <Items :row="props || {}" :dict="dict" />
           </div>
         </template>
+        <template #yjLx="{ row }">
+          <DictTag :value="row.yjLx" :tag="false" :options="D_BZ_YJLX" />
+        </template>
         <template #controls="{ row }">
           <el-link type="warning" @click="pushAssess(row)">全息档案</el-link>
           <el-link type="success" @click="handleQsFk(row, '签收')" v-if="row.czzt == '01' && permission_sfqs">签收</el-link>
-          <el-link type="success" @click="handleQsFk(row, '反馈')" v-else-if="row.czzt == '02' && permission_sfqs">反馈</el-link>
-          <el-link type="primary" @click="openAddModel(row)">详情</el-link>
+          <el-link type="success" @click="handleQsFk(row, '反馈')"
+            v-else-if="row.czzt == '02' && permission_sfqs">反馈</el-link>
+          <el-link type="primary" @click="openBox(row)">详情</el-link>
+
         </template>
       </MyTable>
       <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
@@ -66,6 +74,8 @@
 
   <ChooseJf v-model="chooseJfShow" titleValue="选择系数" :Single="false" :chooseJfBh="chooseJfBh" url="/yjzxZhyj/sjxspz"
     :roleIds="roleIds" />
+      <!-- <Pagination v-model="paginationOpen" /> -->
+        <Pagination v-model="paginationOpen" :dataList="dataPres" :dict="{D_BZ_XB,D_BZ_YJJB,D_GS_QLZDRLX,D_GS_ZDR_RYJB,D_GS_ZDR_GJLB,D_GS_BK_CZYQ}" />
 </template>
 
 <script setup>
@@ -88,12 +98,14 @@ import Detail from './components/detail.vue'
 import { exportExlByObj } from "@/utils/exportExcel.js"
 import { getMultiDictVal } from "@/utils/dict.js"
 import emitter from "@/utils/eventBus.js";
+import Pagination from "./components/particulars.vue";
 const permission_sfqs = ref(false)
 const roleCode = ref(false)
 const searchBox = ref();
 const czjyRef = ref()
 const { proxy } = getCurrentInstance();
-const { D_GSXT_YJXX_CZZT, D_GS_SSYJ, D_BZ_YJJB, D_BZ_YJLY, D_BZ_YJLX } = proxy.$dict("D_GSXT_YJXX_CZZT", "D_GS_SSYJ", "D_BZ_YJJB", "D_BZ_YJLY", "D_BZ_YJLX");
+const { D_GSXT_YJXX_CZZT, D_GS_SSYJ, D_BZ_YJJB, D_BZ_YJLY, D_BZ_YJLX, D_BZ_BKLYS, D_GS_CSZT, D_GS_BKZT, D_BZ_XB,D_GS_QLZDRLX,D_GS_ZDR_RYJB,D_GS_ZDR_GJLB,D_GS_BK_CZYQ } =
+  proxy.$dict("D_GSXT_YJXX_CZZT", "D_GS_SSYJ", "D_BZ_YJJB", "D_BZ_YJLY", "D_BZ_YJLX", "D_BZ_BKLYS", "D_GS_CSZT", "D_GS_BKZT", "D_BZ_XB","D_GS_QLZDRLX","D_GS_ZDR_RYJB","D_GS_ZDR_GJLB","D_GS_BK_CZYQ");
 
 // 字典数据集合
 const dict = ref({
@@ -107,12 +119,28 @@ import { holographicProfileJump } from "@/utils/tools.js"
 
 // 搜索配置
 const searchConfiger = ref([
+  { label: "布控开始时间", prop: 'bkkssj', showType: "date", placeholder: "请选择布控开始时间" },
+  { label: "布控结束时间", prop: 'bkjssj', showType: "date", placeholder: "请选择布控结束时间" },
+  { label: "预警时间", prop: 'startTime', showType: "datetimerange", placeholder: "请选择预警时间" },
+  { label: "比中项", prop: 'yjLx', showType: "checkbox", showSelectAll: true, options: [{ label: '人员', value: '1', }, { label: '车辆', value: '2', }] },
+  { label: "布控来源", prop: 'bkly', showType: "select", options: D_BZ_BKLYS, placeholder: "请选择布控来源" },
+  { label: "区域所属单位", prop: 'ssbmdm', placeholder: "请选择区域所属单位", showType: "department" },
+  { label: "布控单位", prop: 'ssbmdm', placeholder: "请选择布控单位", showType: "department" },
+  { label: "所属部门", prop: 'ssbmdm', placeholder: "请选择所属部门", showType: "department" },
+  { label: "签收状态", prop: 'czzt', showType: "select", options: D_GSXT_YJXX_CZZT },
+  { label: "超时状态", prop: 'cszt', placeholder: "请选择超时状态", showType: "select", options: D_GS_CSZT },
+  { label: "布控状态", prop: 'zkzt', showType: "select", options: D_GS_BKZT, placeholder: "请选择布控状态" },
   { label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input" },
+  { label: "性别", prop: 'xbdm', showType: "select", options: D_BZ_XB, placeholder: "请选择性别" },
+  { label: "开始年龄", prop: 'ksnl', placeholder: "请输入年龄", showType: "number" },
+  { label: "结束年龄", prop: 'jsnl', placeholder: "请输入年龄", showType: "number" },
   { label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input" },
-  { label: "预警标签", prop: 'yjbqmc', placeholder: "请输入预警标签", showType: "input" },
-  { label: "部门", prop: 'ssbmdm', placeholder: "请选择部门", showType: "department" },
-  { label: "级别", prop: 'bqys', placeholder: "请选择级别", showType: "select", options: D_BZ_YJJB },
-  { label: "积分段", prop: 'jfd', placeholder: "请选择积分段", showType: "Slot" },
+  { label: "车牌号码", prop: 'clcph', placeholder: "请输入车牌号码", showType: "input" },
+  { label: "预警内容", prop: 'yjNr', showType: "input", placeholder: "请输入预警内容" },
+  // { label: "预警标签", prop: 'yjbqmc', placeholder: "请输入预警标签", showType: "input" },
+  // { label: "部门", prop: 'ssbmdm', placeholder: "请选择部门", showType: "department" },
+  // { label: "级别", prop: 'bqys', placeholder: "请选择级别", showType: "select", options: D_BZ_YJJB },
+  // { label: "积分段", prop: 'jfd', placeholder: "请选择积分段", showType: "Slot" },
 ]);
 
 const queryFrom = ref({});
@@ -132,19 +160,42 @@ const pageData = reactive({
     pageSize: 20,
     pageCurrent: 1
   },
-  controlsWidth: 200,
+  controlsWidth:160,
   tableColumn: [
-    { label: "预警人姓名", prop: "yjRyxm" },
-    { label: "相似度", prop: "xsd", showSolt: true },
-    { label: "处置状态", prop: "czzt", showSolt: true },
-    { label: "预警时间", prop: "yjSj", width: 200 },
-    { label: "预警标签", prop: "yjbqmc" },
-    { label: "身份证号", prop: "yjRysfzh", width: 200 },
-    { label: "预警来源", prop: "yjLylx", showSolt: true },
-    { label: "预警级别", prop: "yjJb", showSolt: true },
-    { label: "车牌号", prop: "yjClcph" },
-    { label: "布控区域名称", prop: "bkqymc" },
-    { label: "所属部门", prop: "ssbm" },
+    { label: "状态", prop: "czzt", showOverflowTooltip: true, showSolt: true, width: 80 },
+    { label: "预警时间", prop: "yjSj", showOverflowTooltip: true, width: 50 },
+    { label: "区域名称", prop: "bkqymc", showOverflowTooltip: true, width: 50 },
+    { label: "区域范围", prop: "bkfw", showOverflowTooltip: true, width: 50},
+    // { label: "区域所属", prop: "gkbmmc", showOverflowTooltip: true, width: 50 },
+    { label: "比中", prop: "yjLx", showOverflowTooltip: true, width: 60, showSolt: true },
+    { label: "姓名", prop: "yjRyxm", showOverflowTooltip: true, width: 60 },
+    { label: "身份证号", prop: "yjRysfzh", showOverflowTooltip: true },
+    { label: "性别", prop: "xbdm", showOverflowTooltip: true, showSolt: true, width: 50 },
+    { label: "年龄", prop: "nl", showOverflowTooltip: true, width: 50 },
+    { label: "预警级别", prop: "yjJb", showOverflowTooltip: true,showSolt: true, width: 60 },
+    { label: "布控单位", prop: "gkbmmc", showOverflowTooltip: true, width: 60 },
+    { label: "布控来源", prop: "bkly", showOverflowTooltip: true ,showSolt: true, width: 60 },
+    { label: "布控范围", prop: "bkfw", showOverflowTooltip: true, width: 60 },
+    { label: "布控开始时间", prop: "bkkssj", showOverflowTooltip: true },
+    { label: "布控结束时间", prop: "bkjssj", showOverflowTooltip: true },
+    { label: "处置要求", prop: "bkczyq",showSolt: true, showOverflowTooltip: true, width: 50 },
+    { label: "相似度", prop: "xsd", showSolt: true, showOverflowTooltip: true, width:45 },
+    { label: "预警内容", prop: "yjNr", showOverflowTooltip: true, width: 50 },
+    { label: "所属单位", prop: "ssbm", showOverflowTooltip: true, width: 50 },
+    { label: "数据来源", prop: "yjLylx", showOverflowTooltip: true,showSolt: true, width: 65 },
+    { label: "超时状态", prop: "cszt", showOverflowTooltip: true,showSolt: true, width: 50 },
+    { label: "在控状态", prop: "zkzt", showOverflowTooltip: true,showSolt: true, width: 50 },
+
+    // { label: "相似度", prop: "xsd", showSolt: true },
+    // { label: "处置状态", prop: "czzt", showSolt: true },
+    // { label: "预警时间", prop: "yjSj", width: 200 },
+    // { label: "预警标签", prop: "yjbqmc" },
+    // { label: "身份证号", prop: "yjRysfzh", width: 200 },
+    // { label: "预警来源", prop: "yjLylx", showSolt: true },
+    // { label: "预警级别", prop: "yjJb", showSolt: true },
+    // { label: "车牌号", prop: "yjClcph" },
+    // { label: "布控区域名称", prop: "bkqymc" },
+    // { label: "所属部门", prop: "ssbm" },
   ]
 });
 
@@ -168,7 +219,7 @@ const handleCzjy = (row) => {
 }
 
 const onSearch = (val) => {
-  queryFrom.value = { ...queryFrom.value, ...val };
+  queryFrom.value = { ...queryFrom.value, ...val,sfglyj:val.sfglyj.join(',') };
   pageData.pageConfiger.pageCurrent = 1;
   getList();
 };
@@ -311,7 +362,7 @@ const chooseJfFun = (val) => {
 
 // 表格高度计算
 const tabHeightFn = () => {
-    pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 270;
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 270;
   window.onresize = function () {
     tabHeightFn();
   };
@@ -352,14 +403,14 @@ const exportExl = () => {
 }
 
 const handleQs = () => {
-  if (selectRows.value?.length === 0)  return proxy.$message({ type: "warning", message: "请选择要签收的预警" });
+  if (selectRows.value?.length === 0) return proxy.$message({ type: "warning", message: "请选择要签收的预警" });
   let wqs = selectRows.value.filter(item => item.czzt == '01');
   if (wqs.length == 0) return proxy.$message({ type: "warning", message: "数据都已签收，请选择未签收的数据" });
   let yqs = selectRows.value.filter(item => item.czzt == '02');
   let texy = yqs.length > 0 ? `${yqs.length}条已签收预警数据，确认要签收${wqs.length}条未签收预警数据吗？` : '确认要签收所有预警数据吗？'
   proxy.$confirm(texy, "警告", { type: "warning" }).then(() => {
     let ids = wqs.map(item => item.id)
-    qcckPost({ids}, '/mosty-gsxt/tbYjxx/batchQs').then(() => {
+    qcckPost({ ids }, '/mosty-gsxt/tbYjxx/batchQs').then(() => {
       proxy.$message({ type: "success", message: "成功" });
       getList();
     }).catch(() => {
@@ -367,11 +418,24 @@ const handleQs = () => {
     });
   }).catch(() => { });
 }
-
+// 详情
+const paginationOpen = ref(false)
+const dataPres = ref()
+const openBox = (val) => {
+  dataPres.value = val
+  paginationOpen.value = true
+}
 </script>
 
-<style>
+<style lang="scss" scoped>
 .el-loading-mask {
   background: rgba(0, 0, 0, 0.5) !important;
 }
+::v-deep .el-table .cell {
+  padding: 0;
+}
+
+::v-deep .el-table .el-table__cell {
+  padding: 4px 0;
+}
 </style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarning/index.vue b/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarning/index.vue
index 1c9cf53..65f2acf 100644
--- a/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarning/index.vue
+++ b/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarning/index.vue
@@ -1,34 +1,23 @@
 <template>
   <div>
     <!-- 搜索 -->
-    <div ref="searchBox"  class="mt10 mb10">
-      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
-        <template #age="{ row }">
-          <div class="ageBox">
-            <el-input v-model="queryFrom.age_s" placeholder="开始年龄" type="number" :min="1" :max="100" style="width: 102px;"></el-input>
-            <span style="color: #333;" class="ml5 mr5">至</span>
-            <el-input v-model="queryFrom.age_b" placeholder="结束年龄" type="number" :min="parseInt(queryFrom.age_s)+1" :max="100" style="width: 102px;"></el-input>
-          </div>
-        </template>
+    <div ref="searchBox" class="mt10 mb10">
+      <Search :searchArr="searchConfiger" @submit="onSearch" ref="searchDom" :key="pageData.keyCount">
       </Search>
     </div>
-    <PageTitle  :malginLeft="10" :height="35" backgroundColor="#ffff" :marginBottom="5" :marginTop="5">
+    <PageTitle :malginLeft="10" :height="35" backgroundColor="#ffff" :marginBottom="5" :marginTop="5">
       <template #left>
-        <el-button type="primary" size="small" @click="exportExl">导出</el-button>
-        <el-button type="primary" size="small" @click="handleQs">签收</el-button>
+        <el-button type="primary" size="small" @click="exportExl">批量导出</el-button>
+        <el-button type="primary" size="small" @click="handleQs">批量签收</el-button>
+        <el-button type="primary" size="small" @click="handleQs">批量分析</el-button>
+        <el-button type="primary" size="small" @click="countPeople">计算人数</el-button>
       </template>
     </PageTitle>
     <!-- 表格 -->
     <div class="tabBox heightBox">
-      <MyTable expand 
-        :tableData="pageData.tableData" 
-        :tableColumn="pageData.tableColumn" 
-        :tableHeight="pageData.tableHeight"
-        :key="pageData.keyCount" 
-        :tableConfiger="pageData.tableConfiger" 
-        :controlsWidth="pageData.controlsWidth"
-        @chooseData="handleChooseData"
-      >
+      <MyTable expand :tableData="pageData.tableData" :tableColumn="pageData.tableColumn"
+        :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
+        :controlsWidth="pageData.controlsWidth" @chooseData="handleChooseData">
         <template #expand="{ props }">
           <div style="max-width: 100%">
             <Items :row="props || {}" />
@@ -37,27 +26,34 @@
         <template #czzt="{ row }">
           <DictTag :value="row.czzt" :tag="false" :options="D_GSXT_YJXX_CZZT" />
         </template>
-        <template #sex="{ row }">
-            <span v-if="row.yjRysfzh"> {{ IdCard(row.yjRysfzh,2) }} </span>
+        <template #xbdm="{ row }">
+          <DictTag :value="row.xbdm" :tag="false" :options="D_BZ_XB" />
         </template>
         <template #age="{ row }">
-            <span v-if="row.yjRysfzh"> {{ IdCard(row.yjRysfzh,3) }} </span>
+          <span v-if="row.yjRysfzh"> {{ IdCard(row.yjRysfzh, 3) }} </span>
         </template>
         <template #yjJb="{ row }">
           <DictTag :value="row.yjJb" :tag="false" :options="D_BZ_YJJB" />
         </template>
         <template #bqdl="{ row }">
-          <DictTag :value="row.bqdl" :tag="false"  :options="D_GS_QLZDRLX" />
+          <DictTag :value="row.bqdl" :tag="false" :options="D_GS_QLZDRLX" />
         </template>
         <template #yjLylx="{ row }">
-          <DictTag :value="row.yjLylx" :tag="false"  :options="D_BZ_YJLY" />
+          <DictTag :value="row.yjLylx" :tag="false" :options="D_BZ_YJLY" />
         </template>
-       <template #yjLx="{ row }">
-          <DictTag :value="row.yjLx" :tag="false"  :options="D_GS_QLZDRYXX" />
+        <template #yjLx="{ row }">
+          <DictTag :value="row.yjLx" :tag="false" :options="D_GS_QLZDRYXX" />
         </template>
         <template #controls="{ row }">
-          <el-link type="warning" v-if="row.sfbc != '1'" @click="failWarning(row)">报错</el-link>
+          <el-link type="primary" @click="handleQsSingle(row)">签收</el-link>
+          <el-link type="primary" @click="particularsOpen(row)">详情</el-link>
           <el-link type="warning" @click="pushWarning(row)">指派</el-link>
+          <el-link type="warning" v-if="row.sfbc != '1'" @click="failWarning(row)">报错</el-link>
+          <el-link type="primary" @click="payAttention(row)">关注</el-link>
+
+        </template>
+        <template #cszt="{ row }">
+          <DictTag :value="row.cszt" :tag="false" :options="D_GSXT_YJXX_CZZT" />
         </template>
       </MyTable>
       <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
@@ -66,7 +62,9 @@
       }"></Pages>
     </div>
   </div>
-  <ZpForm v-model="warningShow" :dataList="dataList"/>
+  <ZpForm v-model="warningShow" :dataList="dataList" />
+  <Particulars v-model="particularsShow" :dataList="dataPres" :dict="{D_BZ_XB,D_BZ_YJJB,D_GS_QLZDRLX,D_GS_ZDR_RYJB,D_GS_ZDR_GJLB}" />
+  <peopleConut v-model="searchOpen" :dataConut="dataConut" />
 </template>
 
 <script setup>
@@ -74,6 +72,7 @@ import { getMultiDictVal } from "@/utils/dict.js"
 import { exportExlByObj } from "@/utils/exportExcel.js"
 import Items from '@/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/item/items.vue'
 import ZpForm from "./zpForm.vue";
+import Particulars from "./particulars.vue";
 import { IdCard } from '@/utils/validate.js'
 import Search from "@/components/aboutTable/Search.vue";
 import PageTitle from "@/components/aboutTable/PageTitle.vue";
@@ -81,25 +80,33 @@ import MyTable from "@/components/aboutTable/MyTable.vue";
 import Pages from "@/components/aboutTable/Pages.vue";
 import { qcckGet, qcckPost } from "@/api/qcckApi.js";
 import { reactive, ref, onMounted, getCurrentInstance, } from "vue";
+import peopleConut from "./peopleConut.vue";
 const { proxy } = getCurrentInstance();
-const { D_BZ_YJLY,D_GS_QLZDRLX,D_BZ_YJJB, D_GS_QLZDRYXX,D_BZ_XB,D_GSXT_YJXX_CZZT } = proxy.$dict('D_BZ_YJLY','D_GS_QLZDRLX',"D_BZ_YJJB", "D_GS_QLZDRYXX", "D_BZ_XB","D_GSXT_YJXX_CZZT"); //获取字典数据
+const { D_BZ_YJLY, D_GS_QLZDRLX, D_GS_ZDR_GJLB, D_BZ_YJJB, D_GS_CSZT, D_GS_QLZDRYXX, D_BZ_XB, D_GSXT_YJXX_CZZT, D_GS_ZDR_RYJB } = proxy.$dict('D_BZ_YJLY', 'D_GS_QLZDRLX', "D_BZ_YJJB", "D_GS_QLZDRYXX", "D_BZ_XB", "D_GSXT_YJXX_CZZT", "D_GS_ZDR_RYJB", 'D_GS_ZDR_GJLB', 'D_GS_CSZT'); //获取字典数据
 const searchBox = ref(); //搜索框
 const warningShow = ref(false);
 const dataList = ref([]);
 const searchConfiger = ref(
   [
+    { label: "预警时间xx", prop: 'startTime', showType: "datetimerange", placeholder: "请选择预警时间" },
+    { label: "预警级别", prop: 'yjJb', placeholder: "请选择预警级别", showType: "select", options: D_BZ_YJJB, multiple: true },
+    { label: "接收单位", prop: 'ssbmdm', showType: "department" },
+    { prop: 'sfglyj', showType: "checkbox", showSelectAll: false, options: [{ label: '关联预警', value: '1' }] },
+    { prop: 'sfgz', showType: "checkbox", showSelectAll: false, options: [{ label: '重点关注', value: '1' }] },
+    { prop: 'sfzp', showType: "checkbox", showSelectAll: false, options: [{ label: '二次指派', value: '1' }] },
+    {label: "超时状态", prop: 'cszt', placeholder: "请选择超时状态", showType: "select", options: D_GS_CSZT},
+    { label: "人员类别", prop: 'bqdl', placeholder: "请选择人员类别", showType: "select", options: D_GS_QLZDRLX },
+    { label: "预警次数", prop: 'yjCs', placeholder: "请输入预警次数", showType: "number" },
+    { label: "人员级别", prop: 'yjJb', showType: "select", options: D_GS_ZDR_RYJB },
+    { label: "轨迹类别", prop: 'yjLylx', showType: "select", options: D_GS_ZDR_GJLB },
     { label: "姓名", prop: 'yjRyxm', placeholder: "请输入姓名", showType: "input" },
-    // { label: "年龄段", prop: 'age', placeholder: "请输入身份证号码", showType: "Slot" },
     { label: "性别", prop: 'xbdm', placeholder: "请选择性别", showType: "select", options: D_BZ_XB },
     { label: "身份证", prop: 'yjRysfzh', placeholder: "请输入身份证号码", showType: "input" },
-    { label: "预警时间", prop: 'times', showType: "datetimerange" },
-    { label: "状态", prop: 'czzt', placeholder: "请选择状态", showType: "select", options: D_GSXT_YJXX_CZZT },
-    { label: "人员类别", prop: 'bqdl', placeholder: "请选择人员类别", showType: "select", options: D_GS_QLZDRLX },
-    { label: "细类", prop: 'yjbqmc', placeholder: "请输入细类", showType: "input" },
-    { label: "活动发生地址", prop: 'yjDz', placeholder: "请输入活动发生地址", showType: "input" },
-    { label: "接收单位", prop: 'ssbmdm',showType: "department" },
-  ]);
-
+    { label: "开始年龄", prop: 'ksnl', placeholder: "请输入年龄", showType: "number" },
+    { label: "结束年龄", prop: 'jsnl', placeholder: "请输入年龄", showType: "number" },
+    { label: "活动发生地", prop: 'yjDz', placeholder: "请输入活动发生地", showType: "input" },
+    { label: "人员细类", prop: 'yjbqmc', placeholder: "请输入人员细类", showType: "input" },
+  ])
 const queryFrom = ref({});
 const pageData = reactive({
   tableData: [], //表格数据
@@ -115,21 +122,22 @@ const pageData = reactive({
     pageSize: 20,
     pageCurrent: 1
   }, //分页
-  controlsWidth: 160, //操作栏宽度
+  controlsWidth: 200, //操作栏宽度
   tableColumn: [
-    { label: "状态", prop: "czzt", showSolt: true },
-    { label: "预警时间", prop: "yjSj" },
+    { label: "预警状态", prop: "czzt", showSolt: true, width: 70 },
+    { label: "预警时间", prop: "yjSj", width: 148 },
     { label: "人员姓名", prop: "yjRyxm", },
-    { label: "身份证号", prop: "yjRysfzh", },
-    { label: "性别", prop: "sex" ,showSolt: true },
-    { label: "年龄", prop: "age", showSolt: true },
-    { label: "预警级别", prop: "yjJb", showSolt: true },
-    { label: "人员类别", prop: "bqdl", showSolt: true },
-    { label: "细类", prop: "yjbqmc" },
+    { label: "身份证号", prop: "yjRysfzh", width: 148 },
+    { label: "性别", prop: "xbdm", showSolt: true, width: 60 },
+    { label: "年龄", prop: "age", showSolt: true, width: 50 },
+    { label: "级别", prop: "yjJb", showSolt: true, width: 50 },
+    { label: "人员类别", prop: "bqdl", showSolt: true, width: 100 },
+    { label: "人员细类", prop: "yjbqmc" },
     { label: "轨迹类别", prop: "yjLylx", showSolt: true },
     { label: "活动发生地", prop: "yjDz" },
-    { label: "接收单位", prop: "ssbm" },
-    { label: "预警次数", prop: "yjCs" },
+    { label: "接收单位", prop: "ssbm", width: 148 },
+    { label: "次数", prop: "yjCs", width: 50 },
+    { label: "超时状态", prop: "cszt" },
   ]
 });
 
@@ -140,9 +148,12 @@ onMounted(() => {
 
 // 搜索
 const onSearch = (val) => {
-  queryFrom.value = { ...val }
-  queryFrom.value.startTime = val.times ? val.times[0] : ''
-  queryFrom.value.endTime = val.times ? val.times[1] : ''
+  queryFrom.value = { ...val, yjJb: val.yjJb?.join(',') || '' }
+  queryFrom.value.startTime = val.startTime ? val.startTime[0] : ''
+  queryFrom.value.endTime = val.startTime ? val.startTime[1] : ''
+  queryFrom.value.sfglyj = val.sfglyj?.join(',') || ''
+  queryFrom.value.sfgz = val.sfgz?.join(',') || ''
+  queryFrom.value.sfzp = val.sfzp?.join(',') || ''
   pageData.pageConfiger.pageCurrent = 1;
   getList()
 }
@@ -177,15 +188,14 @@ const pushWarning = (val) => {
 }
 
 
-
 const failWarning = (val) => {
-    let ids = [val.id]
-    qcckPost({ids}, '/mosty-gsxt/tbYjxx/yjbc').then((res) => {
-      proxy.$message({ type: "success", message: "成功" });
-      getList();
-    }).catch(() => {
-      proxy.$message({ type: "error", message: "失败" });
-    });
+  let ids = [val.id]
+  qcckPost({ ids }, '/mosty-gsxt/tbYjxx/yjbc').then((res) => {
+    proxy.$message({ type: "success", message: "成功" });
+    getList();
+  }).catch(() => {
+    proxy.$message({ type: "error", message: "失败" });
+  });
 }
 
 
@@ -220,16 +230,16 @@ const exportExl = () => {
   })
   exportExlByObj(titleObj, data, '七类重点')
 }
-
+// 批量签收
 const handleQs = () => {
-  if (selectRows.value?.length === 0)  return proxy.$message({ type: "warning", message: "请选择要签收的预警" });
+  if (selectRows.value?.length === 0) return proxy.$message({ type: "warning", message: "请选择要签收的预警" });
   let wqs = selectRows.value.filter(item => item.czzt == '01');
   if (wqs.length == 0) return proxy.$message({ type: "warning", message: "数据都已签收，请选择未签收的数据" });
   let yqs = selectRows.value.filter(item => item.czzt == '02');
   let texy = yqs.length > 0 ? `${yqs.length}条已签收预警数据，确认要签收${wqs.length}条未签收预警数据吗？` : '确认要签收所有预警数据吗？'
   proxy.$confirm(texy, "警告", { type: "warning" }).then(() => {
     let ids = wqs.map(item => item.id)
-    qcckPost({ids}, '/mosty-gsxt/tbYjxx/batchQs').then(() => {
+    qcckPost({ ids }, '/mosty-gsxt/tbYjxx/batchQs').then(() => {
       proxy.$message({ type: "success", message: "成功" });
       getList();
     }).catch(() => {
@@ -237,7 +247,68 @@ const handleQs = () => {
     });
   }).catch(() => { });
 }
+// 详情
+const dataPres=ref({})
+const particularsShow = ref(false);
+const particularsOpen = (row) => {
+  dataPres.value = row
 
+  particularsShow.value = true;
+}
+// 单条签收
+const handleQsSingle = (row) => {
+  if (row.czzt == '02') return proxy.$message({ type: "warning", message: "数据已签收，无需重复签收" });
+  proxy.$confirm('确认要签收该条预警数据吗？', "警告", { type: "warning" }).then(() => {
+    qcckPost({ ids: [row.id] }, '/mosty-gsxt/tbYjxx/batchQs').then(() => {
+      proxy.$message({ type: "success", message: "成功" });
+      getList();
+    }).catch(() => {
+      proxy.$message({ type: "error", message: "失败" });
+    });
+  }).catch(() => { });
+}
+// 关注
+const payAttention = (row) => {
+  let promes = {}
+  if (row.sfgz == '1') {
+    promes.sfgz = '0'
+    promes.msg = '取消关注'
+  } else {
+    promes.sfgz = '1'
+    promes.msg = '关注'
+  }
+
+  proxy.$confirm('确认要关注该条预警数据吗？', "警告", { type: "warning" }).then(() => {
+    qcckPost({ sfgz: promes.sfgz, id: row.id }, '/mosty-gsxt/tbYjxx/yjgz').then(() => {
+      proxy.$message({ type: "success", message: `${promes.msg}成功` });
+      getList();
+    }).catch(() => {
+      proxy.$message({ type: "error", message: `${promes.msg}失败` });
+    });
+  }).catch(() => { });
+}
+// 人数计算
+const searchDom = ref(null)
+const dataConut = ref(0)
+const searchOpen=ref(false)
+const countPeople = () => {
+
+  const promes = {
+    ...searchDom.value.searchObj,
+    yjJb: searchDom.value.searchObj.yjJb?.join(',') || '',
+    startTime: searchDom.value.searchObj.startTime ? searchDom.value.searchObj.startTime[0] : '',
+    endTime: searchDom.value.searchObj.endTime ? searchDom.value.searchObj.endTime[1] : '',
+    sfglyj: searchDom.value.searchObj.sfglyj?.join(',') || '',
+    sfgz: searchDom.value.searchObj.sfgz?.join(',') || '',
+    sfzp: searchDom.value.searchObj.sfzp?.join(',') || '',
+  }
+  qcckPost(promes, '/mosty-gsxt/tbYjxx/bkyjQctj').then((res) => {
+    dataConut.value = res || 0
+    searchOpen.value=true
+  }).catch(() => {
+    // proxy.$message({ type: "error", message: `${promes.msg}失败` });
+  });
+}
 // 表格高度计算
 const tabHeightFn = () => {
   pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 290;
@@ -245,8 +316,16 @@ const tabHeightFn = () => {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
 .el-loading-mask {
   background: rgba(0, 0, 0, 0.5) !important;
 }
+
+::v-deep .el-table .cell {
+  padding: 0;
+}
+
+::v-deep .el-table .el-table__cell {
+  padding: 4px 0;
+}
 </style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarning/particulars.vue b/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarning/particulars.vue
new file mode 100644
index 0000000..eed98b3
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarning/particulars.vue
@@ -0,0 +1,472 @@
+<!--预警指派展示组件  -->
+<template>
+  <el-dialog :draggable="true" :model-value="modelValue" :title="title" :width="width" @close="close" append-to-body>
+    <div class="archive-container" v-loading="loading">
+      <div class="three-column-layout">
+        <!-- 重点人员基本信息页 -->
+        <div class="column">
+          <div class="column-header">重点人员基本信息页</div>
+          <div class="info-section">
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">人员姓名：</span>
+                <span class="info-value">{{ dataForm.yjRyxm }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">性别：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.xbdm" :tag="false" :options="dict.D_BZ_XB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">年龄：</span>
+                <span class="info-value">{{ dataForm.nl }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">身份证号码：</span>
+                <span class="info-value">{{ dataForm.yjRysfzh }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">户籍地：</span>
+                <span class="info-value">{{ dataForm.hjdXz }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">现住地址：</span>
+                <span class="info-value">{{ dataForm.xzdXz }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">入库时间：</span>
+                <span class="info-value">{{ dataForm.zdrRkkssj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">预警级别：</span>
+                <span class="info-value warning-level" :class="ys()">
+                  <DictTag :value="dataForm.yjJb" :tag="false" :options="dict.D_BZ_YJJB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">人员类别：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.bqdl" :tag="false" :options="dict.D_GS_QLZDRLX" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">人员级别：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.yjJb" :tag="false" :options="dict.D_GS_ZDR_RYJB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">人员细类：</span>
+                <span class="info-value">{{ dataForm.yjbqmc }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">立案单位：</span>
+                <span class="info-value"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">简要案情：</span>
+                <span class="info-value text-area"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">一标三实：</span>
+                <span class="info-value text-area"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 重点人员活动信息页 -->
+        <div class="column">
+          <div class="column-header">重点人员活动信息页</div>
+          <div class="info-section blue-bg">
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">轨迹类别：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.yjLylx" :tag="false" :options="dict.D_GS_ZDR_GJLB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">核查时间：</span>
+                <span class="info-value">
+                  <span v-if="dataForm.fkList && dataForm.fkList.length > 0">{{ dataForm.fkList[0].czsj }}</span>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">比对时间：</span>
+                <span class="info-value">{{ dataForm.yjSj }}</span>
+              </div>
+            </div>
+            <!-- <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">活动发生地：</span>
+                <span class="info-value">{{ dataForm.xxdz }}</span>
+              </div>
+            </div> -->
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">活动场所：</span>
+                <span class="info-value">
+                  <span v-if="dataForm.fkList && dataForm.fkList.length > 0">{{ dataForm.fkList[0].xxdz }}</span>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">活动信息：</span>
+                <span class="info-value">{{ dataForm.yjNr }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">信息提供单位：</span>
+                <span class="info-value">{{ dataForm.jczmc }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">信息接收单位：</span>
+                <span class="info-value">{{ dataForm.ssbm }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">二次指派单位：</span>
+                <span class="info-value">
+                  <div v-if="dataForm.zpList && dataForm.zpList.length > 0">
+                    <span v-for="(item, index) in dataForm.zpList" :key="item.id">
+                      {{ item.zpbm }}<span v-if="index < dataForm.zpList.length - 1">,</span>
+                    </span>
+                  </div>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">签收时限：</span>
+                <span class="info-value">{{ dataForm.qssj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">反馈时限：</span>
+                <span class="info-value">{{ dataForm.fksj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">处置建议：</span>
+                <span class="info-value">
+                  <div v-if="dataForm.czjyList && dataForm.czjyList.length > 0">
+                    <div v-for="(item, index) in dataForm.czjyList" :key="item.id">
+                      <span>{{ `${index + 1}、` + item.jynr }}</span>
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">反馈内容：</span>
+                <span class="info-value">
+                  <div v-if="dataForm.fkList && dataForm.fkList.length > 0">
+                    <div v-for="(item, index) in dataForm.fkList" :key="item.id">
+                      <span v-if="item.ckczbcxx">{{ `${index + 1}、` + item.ckczbcxx }}</span>
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 历史预警信息页 -->
+        <div class="column">
+          <div class="column-header">历史预警信息页</div>
+          <div class="info-section">
+            <div class="history-item" v-for="(item, index) in dataForm.yjgjList" :key="item.id">
+              <span class="history-index">{{ `${index + 1}：` }}</span>
+              <span class="history-content">{{ item.yjNr }}</span>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer" style="text-align: center;">
+        <el-button @click="close">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+import { defineProps, getCurrentInstance, watch, ref } from 'vue';
+import { qcckGet } from '@/api/qcckApi.js'
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: '预警详情'
+  },
+  width: {
+    type: String,
+    default: '90%'
+  }, dataList: {
+    type: Object,
+    default: () => ({})
+  },
+  dict: {
+    type: Object,
+    default: () => ({})
+  }
+
+});
+// 定义事件
+const emit = defineEmits(['update:modelValue']);
+const loading = ref(false)
+let abortController = null
+const close = () => {
+  if (abortController) {
+    abortController.abort()
+    abortController = null
+  }
+  loading.value = false
+  emit('update:modelValue', false);
+};
+const dataForm = ref({});
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) {
+    getPart(props.dataList.id)
+  }
+}, { deep: true });
+const getPart = (id) => {
+  if (abortController) {
+    abortController.abort()
+  }
+  abortController = new AbortController()
+  loading.value = true
+  qcckGet({}, `/mosty-gsxt/tbYjxx/getInfo/${id}`, { signal: abortController.signal }).then(res => {
+       if (res) {
+      dataForm.value = res
+    } else {
+      dataForm.value = {}
+    }
+  }).catch(err => {
+    if (err.name !== 'AbortError') {
+      console.error('请求失败:', err)
+    }
+  }).finally(() => {
+    loading.value = false
+  })
+}
+const ys = () => {
+  switch (dataForm.value.yjJb) {
+    case '01':
+      return 'red';
+    case '02':
+      return 'orange';
+    case '03':
+      return 'yellow';
+    case '04':
+      return 'blue';
+    default:
+      return '';
+  }
+}
+</script>
+
+<style scoped>
+.archive-container {
+  padding: 20px;
+  height: 600px;
+  overflow-y: auto;
+}
+
+.three-column-layout {
+  display: flex;
+  gap: 20px;
+  height: 100%;
+}
+
+.column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.column-header {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  padding: 10px;
+  background: #f0f2f5;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px 4px 0 0;
+  text-align: center;
+  color: #303133;
+}
+
+.column .info-section {
+  flex: 1;
+  border-radius: 0 0 4px 4px;
+  overflow-y: auto;
+}
+
+.info-section {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 15px;
+  background: #ffffff;
+}
+
+.info-section.blue-bg {
+  background: #e6f0f8;
+  border-color: #9ed7ff;
+}
+
+.info-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.info-item {
+  flex: 1;
+  min-width: 300px;
+  display: flex;
+  align-items: center;
+}
+
+.info-item.full-width {
+  flex: 100%;
+  min-width: 100%;
+}
+
+.info-label {
+  width: 80px;
+  font-weight: bold;
+  margin-right: 10px;
+  white-space: nowrap;
+  color: #333;
+}
+
+.info-value {
+  flex: 1;
+  padding: 4px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #ffffff;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+}
+
+.info-value.text-area {
+  min-height: 80px;
+  align-items: flex-start;
+  padding: 8px;
+  resize: vertical;
+}
+
+/* 红 */
+.warning-level.red {
+  background: #fef0f0;
+  border-color: #ffccc7;
+  color: #f56c6c !important;
+  font-weight: bold;
+}
+
+/* 橙 */
+.warning-level.orange {
+  background: #fffbe6;
+  border-color: #ffe58f;
+  color: #d48806 !important;
+  font-weight: bold;
+}
+
+/* 黄 */
+.warning-level.yellow {
+  background: #fdf6ec;
+  border-color: #faecd8;
+  color: #e6a23c !important;
+  font-weight: bold;
+}
+
+/* 蓝 */
+.warning-level.blue {
+  background: #ecf5ff;
+  border-color: #d9ecff;
+  color: #409eff !important;
+  font-weight: bold;
+}
+
+.history-item {
+  margin-bottom: 10px;
+  padding: 8px 12px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  background: #ffffff;
+  display: flex;
+  /* align-items: center; */
+}
+
+.history-index {
+  font-weight: bold;
+  margin-right: 10px;
+  color: #409eff;
+}
+
+.history-content {
+  flex: 1;
+  color: #606266;
+}
+
+.demo-tabs {
+  margin-bottom: 20px;
+}
+
+::v-deep .el-tabs__header {
+  margin-bottom: 20px;
+}
+
+::v-deep .el-tabs__content {
+  min-height: 400px;
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarning/peopleConut.vue b/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarning/peopleConut.vue
new file mode 100644
index 0000000..c82765d
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarning/peopleConut.vue
@@ -0,0 +1,80 @@
+<!--预警指派展示组件  -->
+<template>
+  <el-dialog :draggable="true" :model-value="modelValue" :title="title" :width="width" @close="close" append-to-body>
+    <div class="count-container">
+      <div class="count-number">{{dataConut}}</div>
+      <div class="count-label">预警人数</div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer" style="text-align: center;">
+        <el-button @click="close">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+import {  defineProps,getCurrentInstance } from 'vue';
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: '人数查询'
+  },
+  dataConut: {
+    type: Number,
+    default: 0
+  },width: {
+    type: String,
+    default: '20%'
+  },
+
+
+});
+// 定义事件
+const emit = defineEmits(['update:modelValue']);
+const close = () => {
+  emit('update:modelValue', false);
+};
+</script>
+
+<style scoped>
+.count-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  text-align: center;
+}
+
+.count-number {
+  font-size: 48px;
+  font-weight: bold;
+  color: #409eff;
+  margin-bottom: 16px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  animation: pulse 2s infinite;
+}
+
+.count-label {
+  font-size: 18px;
+  color: #606266;
+  font-weight: 500;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarningFail/index.vue b/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarningFail/index.vue
index a186b54..c7f2090 100644
--- a/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarningFail/index.vue
+++ b/src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarningFail/index.vue
@@ -3,13 +3,7 @@
     <!-- 搜索 -->
     <div ref="searchBox" class="mt10 mb10">
       <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
-        <template #age="{ row }">
-          <div class="ageBox">
-            <el-input v-model="queryFrom.age_s" placeholder="开始年龄" type="number" :min="1" :max="100" style="width: 102px;"></el-input>
-            <span style="color: #333;" class="ml5 mr5">至</span>
-            <el-input v-model="queryFrom.age_b" placeholder="结束年龄" type="number" :min="parseInt(queryFrom.age_s)+1" :max="100" style="width: 102px;"></el-input>
-          </div>
-        </template>
+
       </Search>
     </div>
     <!-- 表格 -->
@@ -64,7 +58,6 @@ const searchBox = ref(); //搜索框
 const searchConfiger = ref(
   [
     { label: "姓名", prop: 'yjRyxm', placeholder: "请输入姓名", showType: "input" },
-    // { label: "年龄段", prop: 'age', placeholder: "请输入身份证号码", showType: "Slot" },
     { label: "性别", prop: 'xbdm', placeholder: "请选择性别", showType: "select", options: D_BZ_XB },
     { label: "身份证", prop: 'yjRysfzh', placeholder: "请输入身份证号码", showType: "input" },
     { label: "预警时间", prop: 'times', showType: "datetimerange" },
diff --git a/src/views/backOfficeSystem/fourColorManage/warningControl/wrjWarning/components/particulars.vue b/src/views/backOfficeSystem/fourColorManage/warningControl/wrjWarning/components/particulars.vue
new file mode 100644
index 0000000..1b520e9
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningControl/wrjWarning/components/particulars.vue
@@ -0,0 +1,348 @@
+<!--预警指派展示组件  -->
+<template>
+  <el-dialog :draggable="true" :model-value="modelValue" :title="title" :width="width" @close="close" append-to-body>
+    <div class="archive-container">
+      <div class="three-column-layout">
+        <!-- 重点人员基本信息页 -->
+        <div class="column">
+          <div class="column-header">重点人员基本信息页</div>
+          <div class="info-section">
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">人员姓名：</span>
+                <span class="info-value">曾海峰</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">年龄：</span>
+                <span class="info-value">32</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">身份证号码：</span>
+                <span class="info-value">513701199606095613</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">户籍地：</span>
+                <span class="info-value">四川省成都市xx县大坝村2组</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">户籍地：</span>
+                <span class="info-value">四川省成都市xx县大坝村2组</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">现住地址：</span>
+                <span class="info-value">四川省成都市xx县大坝村2组</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">入库时间：</span>
+                <span class="info-value">2015年3月11日</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">预警级别：</span>
+                <span class="info-value warning-level">黄色</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">人员类别：</span>
+                <span class="info-value">刑事前科类</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">人员级别：</span>
+                <span class="info-value">部级</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">人员细类：</span>
+                <span class="info-value">盗窃案</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">立案单位：</span>
+                <span class="info-value">四川省成都市xx县公安局</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">简要案情：</span>
+                <span class="info-value text-area"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">一标三实：</span>
+                <span class="info-value text-area"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 无人机信息页 -->
+        <div class="column">
+          <div class="column-header">无人机信息页</div>
+          <div class="info-section blue-bg">
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">生产厂商名称：</span>
+                <span class="info-value">大疆</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">产品名称：</span>
+                <span class="info-value"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">产品型号：</span>
+                <span class="info-value"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">产品类别：</span>
+                <span class="info-value"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">产品类型：</span>
+                <span class="info-value"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">空机重量：</span>
+                <span class="info-value"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">最大起飞重量：</span>
+                <span class="info-value"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">使用用途：</span>
+                <span class="info-value"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">报批区域：</span>
+                <span class="info-value"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">预警信息接收单位：</span>
+                <span class="info-value">波密县公安局</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">处置建议：</span>
+                <span class="info-value text-area">请波密县公安局与xxx预警一起研判，排除xx风险。</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">反馈内容：</span>
+                <span class="info-value text-area">经核查，已排除xxxxxxx风险。</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 历史预警信息页 -->
+        <div class="column">
+          <div class="column-header">历史预警信息页</div>
+          <div class="info-section">
+            <div class="history-item">
+              <span class="history-index">01：</span>
+              <span class="history-content">2026年2月19日 10：34：02 预警内容</span>
+            </div>
+            <div class="history-item">
+              <span class="history-index">02：</span>
+              <span class="history-content">2026年2月19日 10：34：02 预警内容</span>
+            </div>
+            <div class="history-item">
+              <span class="history-index">03：</span>
+              <span class="history-content">2026年2月19日 10：34：02 预警内容</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer" style="text-align: center;">
+        <el-button type="primary">确定</el-button>
+        <el-button @click="close">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+import {  defineProps,getCurrentInstance } from 'vue';
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: '预警详情'
+  },
+  width: {
+    type: String,
+    default: '90%'
+  },
+
+});
+// 定义事件
+const emit = defineEmits(['update:modelValue']);
+const close = () => {
+  emit('update:modelValue', false);
+};
+</script>
+
+<style scoped>
+.archive-container {
+  padding: 0;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.three-column-layout {
+  display: flex;
+  height: 100%;
+  border: 1px solid #dcdfe6;
+}
+
+.column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  border-right: 1px solid #dcdfe6;
+}
+
+.column:last-child {
+  border-right: none;
+}
+
+.column-header {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 8px;
+  background: #f0f2f5;
+  color: #303133;
+  text-align: center;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.column .info-section {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.info-section {
+  background: #ffffff;
+}
+
+.info-section.blue-bg {
+  background: #e6f7ff;
+  border-right: 1px solid #dcdfe6;
+}
+
+.info-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+.info-item {
+  flex: 1;
+  min-width: 140px;
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.info-item.full-width {
+  flex: 100%;
+  min-width: 100%;
+  margin-right: 0;
+}
+
+.info-label {
+  font-weight: bold;
+  margin-right: 8px;
+  white-space: nowrap;
+  color: #333;
+  font-size: 14px;
+}
+
+.info-value {
+  flex: 1;
+  padding: 4px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #ffffff;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.info-value.text-area {
+  min-height: 60px;
+  align-items: flex-start;
+  padding: 8px;
+  resize: vertical;
+}
+
+.info-value.warning-level {
+  background: #fffbe6;
+  border-color: #ffe58f;
+  color: #d48806;
+  font-weight: bold;
+}
+
+.history-item {
+  margin-bottom: 8px;
+  padding: 6px 10px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.history-index {
+  font-weight: bold;
+  margin-right: 8px;
+  color: #409eff;
+}
+
+.history-content {
+  flex: 1;
+  color: #606266;
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningControl/wrjWarning/index.vue b/src/views/backOfficeSystem/fourColorManage/warningControl/wrjWarning/index.vue
index 7a0b535..d59d4ab 100644
--- a/src/views/backOfficeSystem/fourColorManage/warningControl/wrjWarning/index.vue
+++ b/src/views/backOfficeSystem/fourColorManage/warningControl/wrjWarning/index.vue
@@ -19,15 +19,15 @@
 
     <!-- 表格 -->
    <div class="tabBox tabBox_zdy">
-      <MyTable 
-        :tableData="pageData.tableData" 
-        :tableColumn="pageData.tableColumn" 
+      <MyTable
+        :tableData="pageData.tableData"
+        :tableColumn="pageData.tableColumn"
         :tableHeight="pageData.tableHeight"
-        :key="pageData.keyCount" 
-        :tableConfiger="pageData.tableConfiger" 
+        :key="pageData.keyCount"
+        :tableConfiger="pageData.tableConfiger"
         :controlsWidth="pageData.controlsWidth"
         expand
-        @chooseData="handleChooseData" 
+        @chooseData="handleChooseData"
         :rowClassName="getRowClassName"
       >
         <template #expand="{ props }">
@@ -78,10 +78,10 @@
           <el-link type="primary" @click="pushWarning(row)">指派</el-link>
         </template>
       </MyTable>
-      <Pages 
-        @changeNo="changeNo" 
-        @changeSize="changeSize" 
-        :tableHeight="pageData.tableHeight" 
+      <Pages
+        @changeNo="changeNo"
+        @changeSize="changeSize"
+        :tableHeight="pageData.tableHeight"
         :pageConfiger="{ ...pageData.pageConfiger, total: pageData.total }">
       </Pages>
     </div>
@@ -102,6 +102,7 @@
   <ZpForm v-model="warningShow" :dataList="dataList"/>
   <!-- 反馈 -->
   <FkDialog @change="getList" />
+  <Pagination v-model="paginationOpen" />
 </template>
 
 <script setup>
@@ -126,10 +127,11 @@ import Pages from "@/components/aboutTable/Pages.vue";
 import PageTitle from "@/components/aboutTable/PageTitle.vue";
 import Search from "@/components/aboutTable/Search.vue";
 import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+import Pagination from "./components/particulars.vue";
 const ORDIMG = 'https://89.40.7.122:38496/image'
 const IMGYM = 'https://sg.lz.dsj.xz/dhimage'
 const { proxy } = getCurrentInstance();
-const { D_GSXT_YJXX_CZZT,D_GS_QLZDRLX, D_BZ_YJJB, D_BZ_YJLYXT, D_BZ_YJLY, D_BZ_XB } = proxy.$dict("D_GSXT_YJXX_CZZT",'D_GS_QLZDRLX ', "D_BZ_YJJB", "D_BZ_YJLYXT", "D_BZ_YJLY", "D_BZ_XB")
+const { D_GSXT_YJXX_CZZT,D_GS_QLZDRLX, D_BZ_YJJB, D_BZ_YJLYXT, D_BZ_YJLY, D_BZ_XB ,D_GS_CSZT} = proxy.$dict("D_GSXT_YJXX_CZZT",'D_GS_QLZDRLX ', "D_BZ_YJJB", "D_BZ_YJLYXT", "D_BZ_YJLY", "D_BZ_XB","D_GS_CSZT")
 const searchBox = ref(); //搜索框
 const roleCode = ref(false)
 const czjyRef = ref()
@@ -140,16 +142,28 @@ const dataList = ref([])
 const showDialog = ref(false)// 发送指令
 const assessShow = ref(false)// 全息档案
 const searchConfiger = ref(
-[
-  { label: "布控人员", prop: 'yjRyxms', showType: "Slot" },
-  { label: "性别", prop: 'xbdm', placeholder: "请选择性别", showType: "select", options: D_BZ_XB },
-  { label: "身份证", prop: 'yjRysfzh', placeholder: "请输入身份证号码", showType: "input" },
-  { label: "预警时间", prop: 'times', showType: "datetimerange" },
-  { label: "状态", prop: 'czzt', placeholder: "请选择状态", showType: "select", options: D_GSXT_YJXX_CZZT },
-  // { label: "人员类别", prop: 'bqdl', placeholder: "请选择人员类别", showType: "select", options: D_GS_QLZDRLX },
-  { label: "细类", prop: 'yjbqmc', placeholder: "请输入细类", showType: "input" },
-  { label: "活动发生地址", prop: 'yjDz', placeholder: "请输入活动发生地址", showType: "input" },
-  { label: "接收单位", prop: 'ssbmdm',showType: "department" },
+  [
+ { label: "预警时间", prop: 'times', showType: "datetimerange" },
+    { label: "超时状态", prop: 'cszt', placeholder: "请选择超时状态", showType: "select", options: D_GS_CSZT },
+  { label: "比中项", prop: 'yjLx', showType: "checkbox", showSelectAll: true, options: [{ label: '人员', value: '1', }, { label: '车辆', value: '2', }] },
+    { label: "预警级别", prop: 'yjJb', showType: "select", options: D_BZ_YJJB, placeholder: "请选择预警级别", multiple: true },
+{ label: "人员类别", prop: 'yjJb', showType: "select", options: D_BZ_YJJB, placeholder: "请选择预警级别", multiple: true },
+ { label: "接收单位", prop: 'ssbmdm', placeholder: "请选择接收单位", showType: "department" },
+  { label: "放飞开始时间", prop: 'bkkssj', showType: "date", placeholder: "请选择放飞开始时间" },
+  { label: "放飞结束时间", prop: 'bkjssj', showType: "date", placeholder: "请选择放飞结束时间" },
+{ label: "无人机型号", prop: 'xm', placeholder: "请输入无人机型号", showType: "input" },
+{ label: "手机号码", prop: 'mobile', placeholder: "请输入手机号码", showType: "input" },
+    { label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input" },
+{ label: "放飞区域", prop: 'xm', placeholder: "请输入放飞区域", showType: "input" },
+{ label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input" },
+    // { label: "布控人员", prop: 'yjRyxms', showType: "Slot" },
+  // { label: "性别", prop: 'xbdm', placeholder: "请选择性别", showType: "select", options: D_BZ_XB },
+  // { label: "身份证", prop: 'yjRysfzh', placeholder: "请输入身份证号码", showType: "input" },
+  // { label: "预警时间", prop: 'times', showType: "datetimerange" },
+  // { label: "状态", prop: 'czzt', placeholder: "请选择状态", showType: "select", options: D_GSXT_YJXX_CZZT },
+  // { label: "细类", prop: 'yjbqmc', placeholder: "请输入细类", showType: "input" },
+  // { label: "活动发生地址", prop: 'yjDz', placeholder: "请输入活动发生地址", showType: "input" },
+  // { label: "接收单位", prop: 'ssbmdm',showType: "department" },
 ]);
 const pageData = reactive({
   tableData: [], //表格数据
@@ -166,19 +180,33 @@ const pageData = reactive({
     pageSize: 20,
     pageCurrent: 1
   }, //分页
-  controlsWidth: 250, //操作栏宽度
+  controlsWidth: 160, //操作栏宽度
   tableColumn: [
-    { label: "预警图片", prop: "yjTp", showSolt: true, width: 100 },
     { label: "处置状态", prop: "czzt", showSolt: true },
-    { label: "预警时间", prop: "yjSj", showOverflowTooltip: true, width: 200 },
     { label: "姓名", prop: "yjRyxm" },
-    { label: "性别", prop: "xb", showSolt: true, width: 80 },
-    { label: "年龄", prop: "nl", showSolt: true, width: 80 },
-    { label: "数据来源", prop: "yjLylx", showOverflowTooltip: true, showSolt: true },
     { label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true, width: 200 },
+    { label: "比重类别", prop: "yjTp", showSolt: true, width: 100 },
     { label: "预警级别", prop: "yjJb", showSolt: true },
-    { label: "相似度", prop: "xsd", showSolt: true },
-    { label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
+    { label: "细类", prop: "czzt", showSolt: true },
+    { label: "开始放飞时间", prop: "czzt", showSolt: true },
+    { label: "结束放飞时间", prop: "czzt", showSolt: true },
+    { label: "飞行时间", prop: "czzt", showSolt: true },
+    { label: "放飞区域", prop: "czzt", showSolt: true },
+    { label: "无人机类型", prop: "czzt", showSolt: true },
+    { label: "手机号", prop: "czzt", showSolt: true },
+    { label: "所属单位", prop: "czzt", showSolt: true },
+     { label: "超时状态", prop: "czzt", showSolt: true },
+    // { label: "预警图片", prop: "yjTp", showSolt: true, width: 100 },
+    // { label: "处置状态", prop: "czzt", showSolt: true },
+    // { label: "预警时间", prop: "yjSj", showOverflowTooltip: true, width: 200 },
+    // { label: "姓名", prop: "yjRyxm" },
+    // { label: "性别", prop: "xb", showSolt: true, width: 80 },
+    // { label: "年龄", prop: "nl", showSolt: true, width: 80 },
+    // { label: "数据来源", prop: "yjLylx", showOverflowTooltip: true, showSolt: true },
+    // { label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true, width: 200 },
+    // { label: "预警级别", prop: "yjJb", showSolt: true },
+    // { label: "相似度", prop: "xsd", showSolt: true },
+    // { label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
   ]
 });
 const addFromRefs = ref()
@@ -341,7 +369,7 @@ const handleQs = () => {
 
 // 全息档案跳转
 const pushAssess = (val) => {
-  return holographicProfileJump(val.yjLx,val) 
+  return holographicProfileJump(val.yjLx,val)
 }
 
 const showDetail = (item) => {
@@ -382,6 +410,11 @@ const tabHeightFn = () => {
     tabHeightFn();
   };
 };
+// 详情
+const paginationOpen=ref(false)
+const openBox = (val) => {
+  paginationOpen.value = true
+}
 </script>
 
 <style lang="scss">
diff --git a/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/particulars.vue b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/particulars.vue
new file mode 100644
index 0000000..fbb9217
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/particulars.vue
@@ -0,0 +1,506 @@
+<!--预警指派展示组件  -->
+<template>
+  <el-dialog :draggable="true" :model-value="modelValue" :title="title" :width="width" @close="close" append-to-body>
+    <div class="archive-container"  v-loading="loading" >
+      <div class="three-column-layout">
+        <!-- 重点人员基本信息页 -->
+        <div class="column">
+          <div class="column-header">重点人员基本信息</div>
+          <div class="info-section">
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">人员姓名：</span>
+                <span class="info-value">{{ dataForm.yjRyxm }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">性别：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.xbdm" :tag="false" :options="dict.D_BZ_XB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">年龄：</span>
+                <span class="info-value">{{ dataForm.nl }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">身份证号码：</span>
+                <span class="info-value">{{ dataForm.yjRysfzh }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">户籍地：</span>
+                <span class="info-value">{{ dataForm.hjdXz }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">现住地址：</span>
+                <span class="info-value">{{ dataForm.xzdXz }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">入库时间：</span>
+                <span class="info-value">{{ dataForm.zdrRkkssj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">预警级别：</span>
+                <span class="info-value warning-level" :class="ys()">
+                  <DictTag :value="dataForm.yjJb" :tag="false" :options="dict.D_BZ_YJJB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">人员类别：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.bqdl" :tag="false" :options="dict.D_GS_QLZDRLX" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">人员级别：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.yjJb" :tag="false" :options="dict.D_GS_ZDR_RYJB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">人员细类：</span>
+                <span class="info-value">{{dataForm.yjbqmc }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">立案单位：</span>
+                <span class="info-value"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">简要案情：</span>
+                <span class="info-value text-area"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">一标三实：</span>
+                <span class="info-value text-area"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 重点人员活动信息页 -->
+        <div class="column">
+          <div class="column-header">重点人员活动信息</div>
+                  <div class="info-section blue-bg">
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">轨迹类别：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.yjLylx" :tag="false" :options="dict.D_GS_ZDR_GJLB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">核查时间：</span>
+                <span class="info-value">
+                  <span v-if="dataForm.fkList && dataForm.fkList.length > 0">{{dataForm.fkList[0].czsj }}</span>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">比对时间：</span>
+                <span class="info-value">{{ dataForm.yjSj }}</span>
+              </div>
+            </div>
+            <!-- <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">活动发生地：</span>
+                <span class="info-value">{{ dataForm.xxdz }}</span>
+              </div>
+            </div> -->
+            <!-- <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">活动场所：</span>
+                <span class="info-value">
+                  <span v-if="dataForm.fkList && dataForm.fkList.length > 0">{{dataForm.fkList[0].xxdz }}</span>
+                </span>
+              </div>
+            </div> -->
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">预警内容：</span>
+                <span class="info-value">{{ dataForm.yjNr }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">信息提供单位：</span>
+                <span class="info-value">{{ dataForm.jczmc }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">信息接收单位：</span>
+                <span class="info-value">{{ dataForm.ssbm }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">二次指派单位：</span>
+                <span class="info-value">
+                  <div v-if="dataForm.zpList && dataForm.zpList.length > 0">
+                    <span v-for="(item,index) in dataForm.zpList" :key="item.id">
+                 {{ item.zpbm }}<span v-if="index < dataForm.zpList.length - 1">,</span>
+                    </span>
+                  </div>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">签收时限：</span>
+                <span class="info-value">{{ dataForm.qssj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">反馈时限：</span>
+                <span class="info-value">{{ dataForm.fksj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">处置建议：</span>
+                <span class="info-value">
+                  <div v-if="dataForm.czjyList && dataForm.czjyList.length > 0">
+                    <div v-for="(item,index) in dataForm.czjyList" :key="item.id">
+                      <span>{{`${index+1}、` + item.jynr }}</span>
+                    </div>
+
+                  </div>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">反馈内容：</span>
+                <span class="info-value">
+                          <div v-if="dataForm.fkList && dataForm.fkList.length > 0">
+                    <div v-for="(item,index) in dataForm.fkList" :key="item.id">
+                       <span v-if="item.ckczbcxx">{{ `${index + 1}、` + item.ckczbcxx }}</span>
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 历史预警信息页 -->
+        <div class="column">
+          <div class="column-header">历史预警信息</div>
+          <div class="info-section">
+                  <div class="history-item" v-for="(item,index) in dataForm.yjgjList" :key="item.id">
+              <span class="history-index">{{`${index+1}：`}}</span>
+              <span class="history-content">{{item.yjNr }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer" style="text-align: center;">
+        <el-button @click="close">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+import { defineProps, getCurrentInstance, watch, ref } from 'vue';
+import {qcckGet} from '@/api/qcckApi.js'
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: '预警详情'
+  },
+  width: {
+    type: String,
+    default: '90%'
+  }, dataList: {
+    type: Object,
+    default: () => ({})
+  },
+  dict: {
+    type: Object,
+    default: () => ({})
+  }
+
+});
+// 定义事件
+const emit = defineEmits(['update:modelValue']);
+const loading = ref(false)
+let abortController = null
+const close = () => {
+  if (abortController) {
+    abortController.abort()
+    abortController = null
+  }
+  loading.value = false
+  emit('update:modelValue', false);
+};
+const dataForm = ref({});
+watch(() => props.dataList, (newVal) => {
+  if (newVal) {
+    getPart(newVal.id)
+  }
+}, { deep: true });
+const getPart = (id) => {
+  if (abortController) {
+    abortController.abort()
+  }
+  abortController = new AbortController()
+  loading.value = true
+  qcckGet({},`/mosty-gsxt/tbYjxx/getInfo/${id}`, { signal: abortController.signal }).then(res => {
+      dataForm.value = res
+  }).catch(err => {
+    if (err.name !== 'AbortError') {
+      console.error('请求失败:', err)
+    }
+  }).finally(() => {
+    loading.value = false
+  })
+}
+const ys = () => {
+  switch (dataForm.value.yjJb) {
+    case '01':
+      return 'red';
+    case '02':
+      return 'orange';
+    case '03':
+      return 'yellow';
+    case '04':
+      return 'blue';
+    default:
+      return '';
+  }
+}
+</script>
+
+<style scoped>
+.archive-container {
+  padding: 20px;
+ height: 500px;
+  overflow-y: auto;
+}
+
+.three-column-layout {
+  display: flex;
+  gap: 20px;
+  height: 100%;
+}
+
+.column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.column-header {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 10px;
+  background: #f5f7fa;
+  color: #303133;
+  text-align: center;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.column .info-section {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.info-section {
+  padding: 20px;
+  background: #ffffff;
+}
+
+.info-section.blue-bg {
+  background: #f0f9ff;
+  border-left: 4px solid #409eff;
+}
+
+.info-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+
+.info-item {
+  flex: 1;
+  min-width: 300px;
+  display: flex;
+  align-items: center;
+}
+
+.info-item.full-width {
+  flex: 100%;
+  min-width: 100%;
+}
+
+.info-label {
+  font-weight: 600;
+  margin-right: 12px;
+  white-space: nowrap;
+  color: #303133;
+  font-size: 14px;
+  width: 100px;
+  flex-shrink: 0;
+}
+
+.info-value {
+  flex: 1;
+  padding: 6px 12px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  background: #f8f9fa;
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #606266;
+  transition: all 0.3s ease;
+}
+
+.info-value:hover {
+  border-color: #409eff;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}
+
+.info-value.text-area {
+  min-height: 100px;
+  align-items: flex-start;
+  padding: 10px 12px;
+  resize: vertical;
+  line-height: 1.5;
+}
+
+/* 红 */
+.warning-level.red {
+  background: #fef0f0;
+  border-color: #ffccc7;
+  color: #f56c6c !important;
+  font-weight: bold;
+}
+
+/* 橙 */
+.warning-level.orange {
+  background: #fffbe6;
+  border-color: #ffe58f;
+  color: #d48806 !important;
+  font-weight: bold;
+}
+
+/* 黄 */
+.warning-level.yellow {
+  background: #fdf6ec;
+  border-color: #faecd8;
+  color: #e6a23c !important;
+  font-weight: bold;
+}
+
+/* 蓝 */
+.warning-level.blue {
+  background: #ecf5ff;
+  border-color: #d9ecff;
+  color: #409eff !important;
+  font-weight: bold;
+}
+.history-item {
+  margin-bottom: 12px;
+  padding: 12px 16px;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  background: #f8f9fa;
+  display: flex;
+  transition: all 0.3s ease;
+}
+
+.history-item:hover {
+  border-color: #409eff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+}
+
+.history-index {
+  font-weight: bold;
+  margin-right: 12px;
+  color: #409eff;
+  font-size: 14px;
+  min-width: 40px;
+}
+
+.history-content {
+  flex: 1;
+  color: #606266;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+/* 滚动条样式 */
+.archive-container::-webkit-scrollbar,
+.info-section::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.archive-container::-webkit-scrollbar-track,
+.info-section::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.archive-container::-webkit-scrollbar-thumb,
+.info-section::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.archive-container::-webkit-scrollbar-thumb:hover,
+.info-section::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 按钮样式 */
+.dialog-footer {
+  padding: 20px;
+  background: #f9f9f9;
+  border-top: 1px solid #e4e7ed;
+  margin-top: 20px;
+  border-radius: 0 0 8px 8px;
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/index.vue b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/index.vue
index 2a3684d..aa6976e 100644
--- a/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/index.vue
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/index.vue
@@ -1,37 +1,31 @@
 <template>
   <div>
     <!-- 搜索 -->
-     <div ref="searchBox">
-       <Search :searchArr="searchConfiger" @submit="onSearch" @reset="onReset" :key="pageData.keyCount">
-          <template #yjRyxms>
-            <el-select clearable v-model="listQuery.yjRyxm" filterable remote allow-create default-first-optionreserve-keyword placeholder="请输入布控人员" :remote-method="remoteMethod" :loading="loading" style="width: 240px">
-              <el-option v-for="item in opentions" :key="item.rySfzh" :label="item.ryXm" :value="item.rySfzh" />
-            </el-select>
-          </template>
-        </Search>
-     </div>
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" @reset="onReset" :key="pageData.keyCount">
+        <!-- <template #yjRyxms>
+          <el-select clearable v-model="listQuery.yjRyxm" filterable remote allow-create
+            default-first-optionreserve-keyword placeholder="请输入布控人员" :remote-method="remoteMethod" :loading="loading"
+            style="width: 240px">
+            <el-option v-for="item in opentions" :key="item.rySfzh" :label="item.ryXm" :value="item.rySfzh" />
+          </el-select>
+        </template> -->
+      </Search>
+    </div>
     <PageTitle :malginLeft="10" :height="35" backgroundColor="#ffff" :marginBottom="5" :marginTop="5">
       <template #left>
-        <el-button type="primary" size="small" @click="exportExl">导出</el-button>
-        <el-button type="primary" size="small" @click="handleQs" v-if="permission_sfqs">签收</el-button>
+        <el-button type="primary" size="small" @click="exportExl">导出</el-button>xxxx
+        <el-button type="primary" size="small" @click="handleQs" v-if="permission_sfqs">批量签收</el-button>
       </template>
     </PageTitle>
 
     <!-- 表格 -->
-   <div class="tabBox tabBox_zdy">
-      <MyTable 
-        :tableData="pageData.tableData" 
-        :tableColumn="pageData.tableColumn" 
-        :tableHeight="pageData.tableHeight"
-        :key="pageData.keyCount" 
-        :tableConfiger="pageData.tableConfiger" 
-        :controlsWidth="pageData.controlsWidth"
-        expand
-        @chooseData="handleChooseData" 
-        :rowClassName="getRowClassName"
-      >
+    <div class="tabBox tabBox_zdy">
+      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth" expand
+        @chooseData="handleChooseData" :rowClassName="getRowClassName">
         <template #expand="{ props }">
-          <Items :row="props"/>
+          <Items :row="props" />
         </template>
         <template #yjTp="{ row }">
           <template v-if="!row.yjTp || row.yjTp.includes('baidu')">
@@ -72,16 +66,15 @@
           <el-link type="primary" @click="handleCzjy(row)" v-if="roleCode">处置建议</el-link>
           <!-- <el-link type="primary" @click="showDetail(row)">转合成</el-link> -->
           <el-link type="success" @click="handleQsFk(row, '签收')" v-if="row.czzt == '01' && permission_sfqs">签收</el-link>
-          <el-link type="success" @click="handleQsFk(row, '反馈')" v-else-if="row.czzt == '02' && permission_sfqs">反馈</el-link>
+          <el-link type="success" @click="handleQsFk(row, '反馈')"
+            v-else-if="row.czzt == '02' && permission_sfqs">反馈</el-link>
           <!-- <el-link type="success" @click="handleQsFk(row, '查看反馈')" v-else>查看反馈</el-link> -->
-          <el-link type="primary" @click="openAddFrom(row)">详情</el-link>
+          <!-- <el-link type="primary" @click="openAddFrom(row)">详情</el-link> -->
           <el-link type="primary" @click="pushWarning(row)">指派</el-link>
+          <el-link type="primary" @click="openBox(row)">详情</el-link>
         </template>
       </MyTable>
-      <Pages 
-        @changeNo="changeNo" 
-        @changeSize="changeSize" 
-        :tableHeight="pageData.tableHeight" 
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight"
         :pageConfiger="{ ...pageData.pageConfiger, total: pageData.total }">
       </Pages>
     </div>
@@ -91,7 +84,8 @@
   <HolographicArchive v-model="assessShow" :dataList="dataList" />
 
   <Information v-model="showDialog" title="发送指令" @submit='submitSendZl' @close='closeFszl'>
-    <SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="yj" :tacitly="tacitly" />
+    <SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="yj"
+      :tacitly="tacitly" />
   </Information>
 
   <!-- 详情 -->
@@ -99,9 +93,10 @@
   <!-- 处置建议 -->
   <Czjy ref="czjyRef" @okSubmit="getList"></Czjy>
   <!-- 指派 -->
-  <ZpForm v-model="warningShow" :dataList="dataList"/>
+  <ZpForm v-model="warningShow" :dataList="dataList" />
   <!-- 反馈 -->
   <FkDialog @change="getList" />
+   <Particulars v-model="paginationOpen" :dataList="dataPres" :dict="{D_BZ_XB,D_BZ_YJJB,D_GS_QLZDRLX,D_GS_ZDR_RYJB,D_GS_ZDR_GJLB}" />
 </template>
 
 <script setup>
@@ -126,10 +121,12 @@ import Pages from "@/components/aboutTable/Pages.vue";
 import PageTitle from "@/components/aboutTable/PageTitle.vue";
 import Search from "@/components/aboutTable/Search.vue";
 import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+import SemdFqzl from '@/components/instructionHasBeen/sendFqzl.vue'
+import Particulars from "./components/particulars.vue";
 const ORDIMG = 'https://89.40.7.122:38496/image'
 const IMGYM = 'https://sg.lz.dsj.xz/dhimage'
 const { proxy } = getCurrentInstance();
-const { D_GSXT_YJXX_CZZT,D_GS_QLZDRLX, D_BZ_YJJB, D_BZ_YJLYXT, D_BZ_YJLY, D_BZ_XB } = proxy.$dict("D_GSXT_YJXX_CZZT",'D_GS_QLZDRLX ', "D_BZ_YJJB", "D_BZ_YJLYXT", "D_BZ_YJLY", "D_BZ_XB")
+const { D_GSXT_YJXX_CZZT, D_GS_QLZDRLX, D_GS_BKZT, D_GS_CSZT, D_BZ_BKLYS, D_BZ_YJJB, D_BZ_YJLYXT, D_BZ_YJLY, D_BZ_XB, D_BZ_SF,D_GS_ZDR_RYJB, D_GS_ZDR_GJLB} = proxy.$dict("D_GSXT_YJXX_CZZT", 'D_GS_QLZDRLX ', "D_BZ_YJJB", "D_BZ_YJLYXT", "D_BZ_YJLY", "D_BZ_XB", "D_BZ_BKLYS", "D_GS_BKZT", "D_GS_CSZT", "D_BZ_SF","D_GS_ZDR_RYJB","D_GS_ZDR_GJLB")
 const searchBox = ref(); //搜索框
 const roleCode = ref(false)
 const czjyRef = ref()
@@ -140,17 +137,40 @@ const dataList = ref([])
 const showDialog = ref(false)// 发送指令
 const assessShow = ref(false)// 全息档案
 const searchConfiger = ref(
-[
-  { label: "布控人员", prop: 'yjRyxms', showType: "Slot" },
-  { label: "性别", prop: 'xbdm', placeholder: "请选择性别", showType: "select", options: D_BZ_XB },
-  { label: "身份证", prop: 'yjRysfzh', placeholder: "请输入身份证号码", showType: "input" },
-  { label: "预警时间", prop: 'times', showType: "datetimerange" },
-  { label: "状态", prop: 'czzt', placeholder: "请选择状态", showType: "select", options: D_GSXT_YJXX_CZZT },
-  // { label: "人员类别", prop: 'bqdl', placeholder: "请选择人员类别", showType: "select", options: D_GS_QLZDRLX },
-  { label: "细类", prop: 'yjbqmc', placeholder: "请输入细类", showType: "input" },
-  { label: "活动发生地址", prop: 'yjDz', placeholder: "请输入活动发生地址", showType: "input" },
-  { label: "接收单位", prop: 'ssbmdm',showType: "department" },
-]);
+  [
+    { label: "布控开始时间", prop: 'bkkssj', showType: "date", placeholder: "请选择布控开始时间" },
+    { label: "布控结束时间", prop: 'bkjssj', showType: "date", placeholder: "请选择布控结束时间" },
+    { label: "预警时间", prop: 'startTime', showType: "datetimerange", placeholder: "请选择预警时间" },
+    // { label: "预警名称", prop: 'yjBt', showType: "input", placeholder: "请输入预警名称" },
+    { label: "预警级别", prop: 'yjJb', showType: "select", options: D_BZ_YJJB, placeholder: "请选择预警级别", multiple: true },
+    { label: "布控来源", prop: 'bkly', showType: "select", options: D_BZ_BKLYS, placeholder: "请选择布控来源" },
+    { label: "布控范围", prop: 'bkfw', showType: "input", placeholder: "请输入布控范围" },
+    { label: "布控单位", prop: 'gkbmdm', showType: "department", placeholder: "请选择布控单位" },
+    { label: "所属单位", prop: 'ssbmdm', showType: "department", placeholder: "请选择所属单位" },
+    { label: "相似度", prop: 'xsd', showType: "input", placeholder: "请输入相似度" },
+    { prop: 'sfglyj', showType: "checkbox", showSelectAll: false, options: [{ label: '关联预警', value: '1' }] },
+    { prop: 'sfgz', showType: "checkbox", showSelectAll: false, options: [{ label: '重点关注', value: '1' }] },
+    { prop: 'sfzp', showType: "checkbox", showSelectAll: false, options: [{ label: '二次指派', value: '1' }] },
+    { label: "签收状态", prop: 'czzt', showType: "select", options: D_GSXT_YJXX_CZZT },
+    { label: "超时状态", prop: 'cszt', placeholder: "请选择超时状态", showType: "select", options: D_GS_CSZT },
+    { label: "布控状态", prop: 'zkzt', showType: "select", options: D_GS_BKZT, placeholder: "请选择布控状态" },
+    { label: "姓名", prop: 'yjRyxm', showType: "input", placeholder: "请输入姓名" },
+    { label: "性别", prop: 'xbdm', showType: "select", options: D_BZ_XB, placeholder: "请选择性别" },
+    { label: "开始年龄", prop: 'ksnl', placeholder: "请输入年龄", showType: "number" },
+    { label: "结束年龄", prop: 'jsnl', placeholder: "请输入年龄", showType: "number" },
+    { label: "跨地区", prop: 'sflksd', showType: "select", options: D_BZ_SF, placeholder: "请选择是否跨地区" },
+    { label: "身份证号", prop: 'yjRysfzh', showType: "input", placeholder: "请输入身份证号" },
+    { label: "预警内容", prop: 'yjNr', showType: "input", placeholder: "请输入预警内容" },
+    // { label: "布控人员", prop: 'yjRyxms', showType: "Slot" },
+    // { label: "性别", prop: 'xbdm', placeholder: "请选择性别", showType: "select", options: D_BZ_XB },
+    // { label: "身份证", prop: 'yjRysfzh', placeholder: "请输入身份证号码", showType: "input" },
+    // { label: "预警时间", prop: 'times', showType: "datetimerange" },
+    // { label: "状态", prop: 'czzt', placeholder: "请选择状态", showType: "select", options: D_GSXT_YJXX_CZZT },
+    // // { label: "人员类别", prop: 'bqdl', placeholder: "请选择人员类别", showType: "select", options: D_GS_QLZDRLX },
+    // { label: "细类", prop: 'yjbqmc', placeholder: "请输入细类", showType: "input" },
+    // { label: "活动发生地址", prop: 'yjDz', placeholder: "请输入活动发生地址", showType: "input" },
+    // { label: "接收单位", prop: 'ssbmdm',showType: "department" },
+  ]);
 const pageData = reactive({
   tableData: [], //表格数据
   keyCount: 0,
@@ -166,18 +186,27 @@ const pageData = reactive({
     pageSize: 20,
     pageCurrent: 1
   }, //分页
-  controlsWidth: 250, //操作栏宽度
+  controlsWidth: 150, //操作栏宽度
   tableColumn: [
-    { label: "预警图片", prop: "yjTp", showSolt: true, width: 100 },
-    { label: "处置状态", prop: "czzt", showSolt: true },
-    { label: "预警时间", prop: "yjSj", showOverflowTooltip: true, width: 200 },
-    { label: "姓名", prop: "yjRyxm" },
-    { label: "性别", prop: "xb", showSolt: true, width: 80 },
-    { label: "年龄", prop: "nl", showSolt: true, width: 80 },
+    { label: "预警图片", prop: "yjTp", showSolt: true, width: 50 },
+    { label: "处置状态", prop: "czzt", showOverflowTooltip: true, width: 50 },
+    { label: "预警时间", prop: "yjSj", showOverflowTooltip: true },
+    { label: "姓名", prop: "yjRyxm", width: 50 },
+    { label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
+    { label: "性别", prop: "xbdm", showSolt: true, width: 50 },
+    { label: "年龄", prop: "nl", showSolt: true, width: 50 },
+    { label: "预警级别", prop: "yjJb", showSolt: true, width: 50 },
+    { label: "布控单位", prop: "gkbmdm", showSolt: true, width: 50 },
+    { label: "布控来源", prop: "bkly", showSolt: true, width: 50 },
+    { label: "布控范围", prop: "bkfw", showSolt: true, width: 50 },
+    { label: "布控开始时间", showOverflowTooltip: true, prop: "bkkssj", showSolt: true, width: 50 },
+    { label: "布控结束时间", showOverflowTooltip: true, prop: "bkjssj", showSolt: true, width: 50 },
+    { label: "处置要求", prop: "bkczyq", showSolt: true, showOverflowTooltip: true, width: 50 },
+    { label: "相似度", prop: "xsd", showSolt: true, width: 50 },
+    { label: "预警内容", prop: "yjNr", showOverflowTooltip: true, showSolt: true },
     { label: "数据来源", prop: "yjLylx", showOverflowTooltip: true, showSolt: true },
-    { label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true, width: 200 },
-    { label: "预警级别", prop: "yjJb", showSolt: true },
-    { label: "相似度", prop: "xsd", showSolt: true },
+    { label: "超时状态", prop: "cszt", showOverflowTooltip: true, showSolt: true, width: 50, },
+    { label: "在控状态", prop: "zkzt", showOverflowTooltip: true, showSolt: true, width: 50 },
     { label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
   ]
 });
@@ -190,11 +219,10 @@ const permission_sfqs = ref(false)
 
 onMounted(() => {
   let str = getItem('deptId') ? getItem('deptId')[0].deptLevel : ''
-  permission_sfqs.value = str.startsWith('2'||'3') ? false : true;
-
-  let rols = getItem('roleList') ? getItem('roleList'):[]
+  permission_sfqs.value = str.startsWith('2' || '3') ? false : true;
+  let rols = getItem('roleList') ? getItem('roleList') : []
   let obj = rols.find(item => {
-    return  ['JS_666666','JS_777777','JS_888888'].includes(item.roleCode)
+    return ['JS_666666', 'JS_777777', 'JS_888888'].includes(item.roleCode)
   })
   roleCode.value = obj ? true : false;
 
@@ -206,9 +234,12 @@ const onReset = () => {
   listQuery.value.yjRyxm = ''
 }
 const onSearch = (val) => {
-  listQuery.value = { ...listQuery.value,...val };
-  listQuery.value.startTime = val.times ? val.times[0] : ''
-  listQuery.value.endTime = val.times ? val.times[1] : ''
+  listQuery.value = { ...listQuery.value, ...val, yjJb: val.yjJb?.join(',') || '' };
+  listQuery.value.startTime = val.startTime ? val.startTime[0] : ''
+  listQuery.value.endTime = val.startTime ? val.startTime[1] : ''
+  listQuery.value.sfglyj = val.sfglyj?.join(',') || ''
+  listQuery.value.sfgz = val.sfgz?.join(',') || ''
+  listQuery.value.sfzp = val.sfzp?.join(',') || ''
   getList()
 }
 
@@ -248,13 +279,13 @@ const getList = () => {
 
 const remoteMethod = (query) => {
   if (!query) return opentions.value = [];
-    loading.value = true
-    tbGsxtZdrySelectList({ ryXm: query }).then(res => {
-      opentions.value = res || [];
-      loading.value = false;
-    }).catch(() => {
-      loading.value = false
-    })
+  loading.value = true
+  tbGsxtZdrySelectList({ ryXm: query }).then(res => {
+    opentions.value = res || [];
+    loading.value = false;
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 const getRowClassName = (row) => {
@@ -323,14 +354,14 @@ const exportExl = () => {
 }
 
 const handleQs = () => {
-  if (selectRows.value?.length === 0)  return proxy.$message({ type: "warning", message: "请选择要签收的预警" });
+  if (selectRows.value?.length === 0) return proxy.$message({ type: "warning", message: "请选择要签收的预警" });
   let wqs = selectRows.value.filter(item => item.czzt == '01');
   if (wqs.length == 0) return proxy.$message({ type: "warning", message: "数据都已签收，请选择未签收的数据" });
   let yqs = selectRows.value.filter(item => item.czzt == '02');
   let texy = yqs.length > 0 ? `${yqs.length}条已签收预警数据，确认要签收${wqs.length}条未签收预警数据吗？` : '确认要签收所有预警数据吗？'
   proxy.$confirm(texy, "警告", { type: "warning" }).then(() => {
     let ids = wqs.map(item => item.id)
-    qcckPost({ids}, '/mosty-gsxt/tbYjxx/batchQs').then(() => {
+    qcckPost({ ids }, '/mosty-gsxt/tbYjxx/batchQs').then(() => {
       proxy.$message({ type: "success", message: "成功" });
       getList();
     }).catch(() => {
@@ -341,7 +372,7 @@ const handleQs = () => {
 
 // 全息档案跳转
 const pushAssess = (val) => {
-  return holographicProfileJump(val.yjLx,val) 
+  return holographicProfileJump(val.yjLx, val)
 }
 
 const showDetail = (item) => {
@@ -375,6 +406,14 @@ const pushWarning = (val) => {
   warningShow.value = true
   dataList.value = val;
 }
+// 详情
+const paginationOpen = ref(false)
+const dataPres = ref({})
+const openBox = (val) => {
+  dataPres.value = val
+  paginationOpen.value = true
+}
+
 // 表格高度计算
 const tabHeightFn = () => {
   pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 290;
@@ -383,12 +422,19 @@ const tabHeightFn = () => {
   };
 };
 </script>
-
-<style lang="scss">
+<style lang="scss" scoped>
 .el-loading-mask {
   background: rgba(0, 0, 0, 0.5) !important;
 }
 
+::v-deep .el-table .cell {
+  padding: 0;
+}
+
+::v-deep .el-table .el-table__cell {
+  padding: 4px 0;
+}
+
 /* 预警级别行样式 */
 .warning-level-01 {
   background-color: rgba(255, 2, 2, 0.1) !important;
@@ -430,7 +476,7 @@ const tabHeightFn = () => {
   background-color: transparent !important;
 }
 
-.tabBox_zdy{
+.tabBox_zdy {
   .el-table--fit {
     overflow: unset !important;
   }
diff --git a/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/particulars.vue b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/particulars.vue
new file mode 100644
index 0000000..b0ffb9f
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/particulars.vue
@@ -0,0 +1,443 @@
+<!--预警指派展示组件  -->
+<template>
+  <el-dialog :draggable="true" :model-value="modelValue" :title="title" :width="width" @close="close" append-to-body>
+    <div class="archive-container" v-loading="loading">
+      <div class="three-column-layout">
+        <!-- 车辆预警基本信息页 -->
+        <div class="column">
+          <div class="column-header">车辆预警基本信息页</div>
+          <div class="info-section">
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">车牌号：</span>
+                <span class="info-value">{{ dataForm.yjClcph }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">车辆所有人：</span>
+                <span class="info-value">{{ dataForm.yjRyxm }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">处置要求：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.bkczyq" :tag="false" :options="dict.D_GS_BK_CZYQ" />
+                </span>
+              </div>
+            </div>
+
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">预警级别：</span>
+                <span class="info-value warning-level" :class="ys()">
+                  <DictTag :value="dataForm.yjJb" :tag="false" :options="dict.D_BZ_YJJB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">布控起始时间：</span>
+                <span class="info-value">{{ dataForm.bkkssj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">布控结束时间：</span>
+                <span class="info-value">{{ dataForm.bkjssj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">所属单位：</span>
+                <span class="info-value">{{ dataForm.ssbm }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">布控单位：</span>
+                <span class="info-value">{{ dataForm.gkbmmc }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">布控原因：</span>
+                <span class="info-value text-area"></span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">一标三实信息：</span>
+                <span class="info-value text-area"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 车辆预警活动信息页 -->
+        <div class="column">
+          <div class="column-header">车辆预警活动信息页</div>
+          <div class="info-section blue-bg">
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">轨迹类别：</span>
+                <span class="info-value">
+                  <DictTag :value="dataForm.yjLylx" :tag="false" :options="dict.D_GS_ZDR_GJLB" />
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">核查时间：</span>
+                <span class="info-value">
+                  <span v-if="dataForm.fkList && dataForm.fkList.length > 0">{{ dataForm.fkList[0].czsj }}</span>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">比对时间：</span>
+                <span class="info-value">{{ dataForm.yjSj }}</span>
+              </div>
+            </div>
+            <!-- <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">活动发生地：</span>
+                <span class="info-value">{{ dataForm.xxdz }}</span>
+              </div>
+            </div> -->
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">活动场所：</span>
+                <span class="info-value">
+                  <span v-if="dataForm.fkList && dataForm.fkList.length > 0">{{ dataForm.fkList[0].xxdz }}</span>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">活动信息：</span>
+                <span class="info-value">{{ dataForm.yjNr }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">信息提供单位：</span>
+                <span class="info-value">{{ dataForm.jczmc }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">信息接收单位：</span>
+                <span class="info-value">{{ dataForm.ssbm }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">二次指派单位：</span>
+                <span class="info-value">
+                  <div v-if="dataForm.zpList && dataForm.zpList.length > 0">
+                    <span v-for="(item, index) in dataForm.zpList" :key="item.id">
+                      {{ item.zpbm }}<span v-if="index < dataForm.zpList.length - 1">,</span>
+                    </span>
+                  </div>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">签收时限：</span>
+                <span class="info-value">{{ dataForm.qssj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">反馈时限：</span>
+                <span class="info-value">{{ dataForm.fksj }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">处置建议：</span>
+                <span class="info-value">
+                  <div v-if="dataForm.czjyList && dataForm.czjyList.length > 0">
+                    <div v-for="(item, index) in dataForm.czjyList" :key="item.id">
+                      <span>{{ `${index + 1}、` + item.jynr }}</span>
+                    </div>
+
+                  </div>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item full-width">
+                <span class="info-label">反馈内容：</span>
+                <span class="info-value">
+                  <div v-if="dataForm.fkList && dataForm.fkList.length > 0">
+                    <div v-for="(item, index) in dataForm.fkList" :key="item.id">
+                      <span v-if="item.ckczbcxx">{{ `${index + 1}、` + item.ckczbcxx }}</span>
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 历史预警信息页 -->
+        <div class="column">
+          <div class="column-header">历史预警信息页</div>
+          <div class="info-section">
+            <div class="history-item" v-for="(item, index) in dataForm.yjgjList" :key="item.id">
+              <span class="history-index">{{ `${index + 1}：` }}</span>
+              <span class="history-content">{{ item.yjNr }}</span>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer" style="text-align: center;">
+        <el-button @click="close">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+import { defineProps, getCurrentInstance, watch, ref } from 'vue';
+import { qcckGet } from '@/api/qcckApi.js'
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: '预警详情'
+  },
+  width: {
+    type: String,
+    default: '90%'
+  }, dataList: {
+    type: Object,
+    default: () => ({})
+  },
+  dict: {
+    type: Object,
+    default: () => ({})
+  }
+
+});
+// 定义事件
+const emit = defineEmits(['update:modelValue']);
+const loading = ref(false)
+let abortController = null
+const close = () => {
+  if (abortController) {
+    abortController.abort()
+    abortController = null
+  }
+  loading.value = false
+  dataForm.value = {}
+  emit('update:modelValue', false);
+};
+const dataForm = ref({});
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) {
+    getPart(props.dataList.id)
+  }
+}, { deep: true });
+const getPart = (id) => {
+  if (abortController) {
+    abortController.abort()
+  }
+  abortController = new AbortController()
+  loading.value = true
+  qcckGet({}, `/mosty-gsxt/tbYjxx/getInfo/${id}`, { signal: abortController.signal }).then(res => {
+    if (res) {
+      dataForm.value = res
+    } else {
+      dataForm.value = {}
+    }
+    console.log(res);
+
+  }).catch(err => {
+    if (err.name !== 'AbortError') {
+      console.error('请求失败:', err)
+    }
+  }).finally(() => {
+    console.log("xxxxxx");
+    loading.value = false
+  })
+
+}
+const ys = () => {
+  switch (dataForm.value.yjJb) {
+    case '01':
+      return 'red';
+    case '02':
+      return 'orange';
+    case '03':
+      return 'yellow';
+    case '04':
+      return 'blue';
+    default:
+      return '';
+  }
+}
+</script>
+
+<style scoped>
+.archive-container {
+  padding: 0;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.three-column-layout {
+  display: flex;
+  height: 100%;
+  border: 1px solid #dcdfe6;
+}
+
+.column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  border-right: 1px solid #dcdfe6;
+}
+
+.column:last-child {
+  border-right: none;
+}
+
+.column-header {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 8px;
+  background: #f0f2f5;
+  color: #303133;
+  text-align: center;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.column .info-section {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.info-section {
+  background: #ffffff;
+}
+
+.info-section.blue-bg {
+  background: #e6f7ff;
+  border-right: 1px solid #dcdfe6;
+}
+
+.info-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+.info-item {
+  /* flex: 1; */
+  min-width: 140px;
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.info-item.full-width {
+  flex: 100%;
+  min-width: 100%;
+  margin-right: 0;
+}
+
+.info-label {
+  font-weight: bold;
+  margin-right: 8px;
+  width: 100px;
+  white-space: nowrap;
+  color: #333;
+  font-size: 14px;
+}
+
+.info-value {
+  flex: 1;
+  padding: 4px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #ffffff;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.info-value.text-area {
+  min-height: 60px;
+  align-items: flex-start;
+  padding: 8px;
+  resize: vertical;
+}
+
+.info-value.warning-level {
+  background: #fffbe6;
+  border-color: #ffe58f;
+  color: #d48806;
+  font-weight: bold;
+}
+
+.info-value.warning-level.red {
+  background: #fef0f0;
+  border-color: #ffccc7;
+  color: #f56c6c;
+}
+
+.info-value.warning-level.orange {
+  background: #fffbe6;
+  border-color: #ffe58f;
+  color: #d48806;
+}
+
+.info-value.warning-level.yellow {
+  background: #fdf6ec;
+  border-color: #faecd8;
+  color: #e6a23c;
+}
+
+.info-value.warning-level.blue {
+  background: #ecf5ff;
+  border-color: #d9ecff;
+  color: #409eff;
+}
+
+.history-item {
+  margin-bottom: 8px;
+  padding: 6px 10px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.history-index {
+  font-weight: bold;
+  margin-right: 8px;
+  color: #409eff;
+}
+
+.history-content {
+  flex: 1;
+  color: #606266;
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/index.vue b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/index.vue
index 8d2e0b8..71d77c9 100644
--- a/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/index.vue
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/index.vue
@@ -1,35 +1,29 @@
 <template>
   <div>
     <!-- 搜索 -->
-     <div ref="searchBox">
-       <Search :searchArr="searchConfiger" @submit="onSearch" @reset="onReset" :key="pageData.keyCount">
-          <template #yjRyxms>
-            <el-select clearable v-model="listQuery.yjRyxm" filterable remote allow-create default-first-optionreserve-keyword placeholder="请输入布控人员" :remote-method="remoteMethod" :loading="loading" style="width: 240px">
-              <el-option v-for="item in opentions" :key="item.rySfzh" :label="item.ryXm" :value="item.rySfzh" />
-            </el-select>
-          </template>
-        </Search>
-     </div>
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" @reset="onReset" :key="pageData.keyCount">
+        <template #yjRyxms>
+          <el-select clearable v-model="listQuery.yjRyxm" filterable remote allow-create
+            default-first-optionreserve-keyword placeholder="请输入布控人员" :remote-method="remoteMethod" :loading="loading"
+            style="width: 240px">
+            <el-option v-for="item in opentions" :key="item.rySfzh" :label="item.ryXm" :value="item.rySfzh" />
+          </el-select>
+        </template>
+      </Search>
+    </div>
     <PageTitle :malginLeft="10" :height="35" backgroundColor="#ffff" :marginBottom="5" :marginTop="5">
       <template #left>
         <el-button type="primary" size="small" @click="exportExl">导出</el-button>
-        <el-button type="primary" size="small" @click="handleQs" v-if="permission_sfqs">签收</el-button>
+        <el-button type="primary" size="small" @click="handleQs" v-if="permission_sfqs">批量签收</el-button>
       </template>
     </PageTitle>
 
     <!-- 表格 -->
-   <div class="tabBox tabBox_zdy">
-      <MyTable 
-        :tableData="pageData.tableData" 
-        :tableColumn="pageData.tableColumn" 
-        :tableHeight="pageData.tableHeight"
-        :key="pageData.keyCount" 
-        :tableConfiger="pageData.tableConfiger" 
-        :controlsWidth="pageData.controlsWidth"
-        expand
-        @chooseData="handleChooseData" 
-        :rowClassName="getRowClassName"
-      >
+    <div class="tabBox tabBox_zdy">
+      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth" expand
+        @chooseData="handleChooseData" :rowClassName="getRowClassName">
         <template #expand="{ props }">
           <Items :row="props" />
         </template>
@@ -58,15 +52,31 @@
         <template #xsd="{ row }">
           {{ row.xsd }}%
         </template>
-          <template #yjLylx="{ row }">
+        <template #yjLylx="{ row }">
           <DictTag v-model:value="row.yjLylx" :options="D_BZ_YJLY" />
-      </template>
+        </template>
         <template #czzt="{ row }">
           <DictTag v-model:value="row.czzt" :options="D_GSXT_YJXX_CZZT" />
         </template>
         <template #yjJb="{ row }">
           <DictTag v-model:value="row.yjJb" :options="D_BZ_YJJB" />
         </template>
+        <template #bkly="{ row }">
+          <DictTag v-model:value="row.bkly" :options="D_BZ_BKLYS" />
+        </template>
+        <template #bkczyq="{ row }">
+          <DictTag v-model:value="row.bkczyq" :options="D_GS_BK_CZYQ" />
+        </template>
+             <template #xtSjly="{ row }">
+         <span>{{ row.xtSjly==1?'PC':row.xtSjly==2?'移动端':'一张网' }}</span>
+        </template>
+
+        <template #cszt="{ row }">
+          <DictTag v-model:value="row.cszt" :options="D_GS_CSZT" />
+        </template>
+        <template #zkzt="{ row }">
+          <DictTag v-model:value="row.zkzt" :options="D_GS_BKZT" />
+        </template>
         <!-- 操作 -->
         <template #controls="{ row }">
           <el-link type="warning" @click="pushAssess(row)">全息档案</el-link>
@@ -74,16 +84,14 @@
           <!-- <el-link type="primary" @click="showDetail(row)">转合成</el-link> -->
           <!-- <el-link type="danger" @click="delDictItem(row.id)">转会商</el-link> -->
           <el-link type="success" @click="handleQsFk(row, '签收')" v-if="row.czzt == '01' && permission_sfqs">签收</el-link>
-          <el-link type="success" @click="handleQsFk(row, '反馈')" v-else-if="row.czzt == '02' && permission_sfqs">反馈</el-link>
+          <el-link type="success" @click="handleQsFk(row, '反馈')"
+            v-else-if="row.czzt == '02' && permission_sfqs">反馈</el-link>
           <!-- <el-link type="success" @click="handleQsFk(row, '查看反馈')" v-else>查看反馈</el-link> -->
-          <el-link type="primary" @click="openAddFrom(row)">详情</el-link>
+          <el-link type="primary" @click="openBox(row)">详情</el-link>
           <el-link type="primary" @click="pushWarning(row)">指派</el-link>
         </template>
       </MyTable>
-      <Pages 
-        @changeNo="changeNo" 
-        @changeSize="changeSize" 
-        :tableHeight="pageData.tableHeight" 
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight"
         :pageConfiger="{ ...pageData.pageConfiger, total: pageData.total }">
       </Pages>
     </div>
@@ -93,7 +101,8 @@
   <HolographicArchive v-model="assessShow" :dataList="dataList" />
 
   <Information v-model="showDialog" title="发送指令" @submit='submitSendZl' @close='closeFszl'>
-    <SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="yj" :tacitly="tacitly" />
+    <SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="yj"
+      :tacitly="tacitly" />
   </Information>
 
   <!-- 详情 -->
@@ -101,9 +110,10 @@
   <!-- 处置建议 -->
   <Czjy ref="czjyRef" @okSubmit="getList"></Czjy>
   <!-- 指派 -->
-  <ZpForm v-model="warningShow" :dataList="dataList"/>
+  <ZpForm v-model="warningShow" :dataList="dataList" />
   <!-- 反馈 -->
   <FkDialog @change="getList" />
+   <Particulars v-model="particularsShow" :dataList="dataPres" :dict="{D_BZ_XB,D_BZ_YJJB,D_GS_QLZDRLX,D_GS_ZDR_RYJB,D_GS_ZDR_GJLB,D_GS_BK_CZYQ}" />
 </template>
 
 <script setup>
@@ -128,10 +138,15 @@ import Pages from "@/components/aboutTable/Pages.vue";
 import PageTitle from "@/components/aboutTable/PageTitle.vue";
 import Search from "@/components/aboutTable/Search.vue";
 import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+import Particulars from './components/particulars.vue'
 const ORDIMG = 'https://89.40.7.122:38496/image'
 const IMGYM = 'https://sg.lz.dsj.xz/dhimage'
 const { proxy } = getCurrentInstance();
-const { D_GSXT_YJXX_CZZT,D_GS_QLZDRLX, D_BZ_YJJB, D_BZ_YJLYXT, D_BZ_YJLY, D_BZ_XB } = proxy.$dict("D_GSXT_YJXX_CZZT",'D_GS_QLZDRLX ', "D_BZ_YJJB", "D_BZ_YJLYXT", "D_BZ_YJLY", "D_BZ_XB")
+const { D_GSXT_YJXX_CZZT, D_GS_QLZDRLX,
+  D_BZ_XB,
+  D_BZ_BKLYS, D_BZ_YJJB, D_BZ_YJLYXT, D_GS_BKZT, D_BZ_SF,
+  D_BZ_YJLY, D_GS_CSZT, D_GS_BK_CZYQ } = proxy.$dict("D_GSXT_YJXX_CZZT", 'D_GS_QLZDRLX ', "D_GS_BKZT", "D_BZ_SF",
+    "D_BZ_YJJB", "D_BZ_YJLYXT", "D_BZ_YJLY", "D_BZ_XB", "D_BZ_BKLYS", "D_GS_CSZT", "D_GS_BK_CZYQ")
 const searchBox = ref(); //搜索框
 const roleCode = ref(false)
 const czjyRef = ref()
@@ -142,15 +157,29 @@ const dataList = ref([])
 const showDialog = ref(false)// 发送指令
 const assessShow = ref(false)// 全息档案
 const searchConfiger = ref(
-[
-  { label: "车牌号", prop: 'yjClcph', showType: "input", placeholder: "请输入车牌号",  },
-  { label: "预警时间", prop: 'times', showType: "datetimerange" },
-  { label: "状态", prop: 'czzt', placeholder: "请选择状态", showType: "select", options: D_GSXT_YJXX_CZZT },
-  { label: "预警级别", prop: 'yjJb', placeholder: "请选择预警级别", showType: "select", options: D_BZ_YJJB },
-  { label: "细类", prop: 'yjbqmc', placeholder: "请输入细类", showType: "input" },
-  { label: "活动发生地址", prop: 'yjDz', placeholder: "请输入活动发生地址", showType: "input" },
-  { label: "接收单位", prop: 'ssbmdm',showType: "department" },
-]);
+  [
+    { label: "布控开始时间", prop: 'bkkssj', showType: "date", placeholder: "请选择布控开始时间" },
+    { label: "布控结束时间", prop: 'bkjssj', showType: "date", placeholder: "请选择布控结束时间" },
+    { label: "预警时间", prop: 'startTime', showType: "datetimerange", placeholder: "请选择预警时间" },
+    { label: "预警级别", prop: 'yjJb', showType: "select", options: D_BZ_YJJB, placeholder: "请选择预警级别", multiple: true },
+    { label: "布控来源", prop: 'bkly', showType: "select", options: D_BZ_BKLYS, placeholder: "请选择布控来源" },
+    { label: "布控范围", prop: 'bkfw', showType: "input", placeholder: "请输入布控范围" },
+    { label: "布控单位", prop: 'gkbmdm', showType: "department", placeholder: "请选择布控单位" },
+    { label: "所属单位", prop: 'ssbmdm', showType: "department", placeholder: "请选择所属单位" },
+    { label: "签收状态", prop: 'czzt', showType: "select", options: D_GSXT_YJXX_CZZT },
+    { label: "超时状态", prop: 'cszt', placeholder: "请选择超时状态", showType: "select", options: D_GS_CSZT },
+    { label: "布控状态", prop: 'zkzt', showType: "select", options: D_GS_BKZT, placeholder: "请选择布控状态" },
+    { label: "跨地区", prop: 'sflksd', showType: "select", options: D_BZ_SF, placeholder: "请选择是否跨地区" },
+    { label: "车牌号", prop: 'yjClcph', showType: "input", placeholder: "请输入车牌号" },
+    { label: "预警内容", prop: 'yjNr', showType: "input", placeholder: "请输入预警内容" },
+    // { label: "车牌号", prop: 'yjClcph', showType: "input", placeholder: "请输入车牌号",  },
+    // { label: "预警时间", prop: 'times', showType: "datetimerange" },
+    // { label: "状态", prop: 'czzt', placeholder: "请选择状态", showType: "select", options: D_GSXT_YJXX_CZZT },
+    // { label: "预警级别", prop: 'yjJb', placeholder: "请选择预警级别", showType: "select", options: D_BZ_YJJB },
+    // { label: "细类", prop: 'yjbqmc', placeholder: "请输入细类", showType: "input" },
+    // { label: "活动发生地址", prop: 'yjDz', placeholder: "请输入活动发生地址", showType: "input" },
+    // { label: "接收单位", prop: 'ssbmdm',showType: "department" },
+  ]);
 const pageData = reactive({
   tableData: [], //表格数据
   keyCount: 0,
@@ -166,18 +195,23 @@ const pageData = reactive({
     pageSize: 20,
     pageCurrent: 1
   }, //分页
-  controlsWidth: 250, //操作栏宽度
+  controlsWidth: 180, //操作栏宽度
   tableColumn: [
-    { label: "状态", prop: "czzt", showSolt: true },
     { label: "预警图片", prop: "yjTp", showSolt: true, width: 100 },
-    { label: "布控车牌号", prop: "yjClcph", showOverflowTooltip: true },
-    { label: "处置状态", prop: "czzt", showSolt: true },
+    { label: "状态", prop: "czzt", showSolt: true, width: 80 },
+    { label: "车牌号", prop: "yjClcph", showOverflowTooltip: true },
     { label: "预警级别", prop: "yjJb", showSolt: true },
-    { label: "预警时间", prop: "yjSj", showOverflowTooltip: true },
-    { label: "标题", prop: "yjBt" },
-    { label: "预警地址", prop: "yjDz", showOverflowTooltip: true },
-    { label: "接收单位", prop: "ssbm", showOverflowTooltip: true },
+    { label: "布控单位", prop: "gkbmmc", showOverflowTooltip: true },
+    { label: "布控来源", prop: "bkly", showOverflowTooltip: true, showSolt: true },
+    { label: "布控范围", prop: "bkfw", showOverflowTooltip: true },
+    { label: "布控开始时间", prop: "bkkssj", showOverflowTooltip: true },
+    { label: "布控结束时间", prop: "bkjssj", showOverflowTooltip: true },
+    { label: "处置要求", prop: "bkczyq", showOverflowTooltip: true, showSolt: true },
     { label: "内容", prop: "yjNr", showOverflowTooltip: true },
+    { label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
+    { label: "数据来源", prop: "xtSjly", showSolt: true },
+    { label: "超时状态", prop: "cszt", showSolt: true },
+    { label: "在控状态", prop: "zkzt", showSolt: true},
   ]
 });
 const addFromRefs = ref()
@@ -189,11 +223,11 @@ const permission_sfqs = ref(false)
 
 onMounted(() => {
   let str = getItem('deptId') ? getItem('deptId')[0].deptLevel : ''
-  permission_sfqs.value = str.startsWith('2'||'3') ? false : true;
+  permission_sfqs.value = str.startsWith('2' || '3') ? false : true;
 
-  let rols = getItem('roleList') ? getItem('roleList'):[]
+  let rols = getItem('roleList') ? getItem('roleList') : []
   let obj = rols.find(item => {
-    return  ['JS_666666','JS_777777','JS_888888'].includes(item.roleCode)
+    return ['JS_666666', 'JS_777777', 'JS_888888'].includes(item.roleCode)
   })
   roleCode.value = obj ? true : false;
 
@@ -205,9 +239,10 @@ const onReset = () => {
   listQuery.value.yjRyxm = ''
 }
 const onSearch = (val) => {
-  listQuery.value = { ...listQuery.value,...val };
-  listQuery.value.startTime = val.times ? val.times[0] : ''
-  listQuery.value.endTime = val.times ? val.times[1] : ''
+  listQuery.value = { ...listQuery.value, ...val };
+  listQuery.value = { ...val, yjJb: val.yjJb?.join(',') || '' }
+  listQuery.value.startTime = val.startTime ? val.startTime[0] : ''
+  listQuery.value.endTime = val.startTime ? val.startTime[1] : ''
   getList()
 }
 
@@ -247,13 +282,13 @@ const getList = () => {
 
 const remoteMethod = (query) => {
   if (!query) return opentions.value = [];
-    loading.value = true
-    tbGsxtZdrySelectList({ ryXm: query }).then(res => {
-      opentions.value = res || [];
-      loading.value = false;
-    }).catch(() => {
-      loading.value = false
-    })
+  loading.value = true
+  tbGsxtZdrySelectList({ ryXm: query }).then(res => {
+    opentions.value = res || [];
+    loading.value = false;
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 根据预警级别设置行样式
@@ -323,14 +358,14 @@ const exportExl = () => {
 }
 
 const handleQs = () => {
-  if (selectRows.value?.length === 0)  return proxy.$message({ type: "warning", message: "请选择要签收的预警" });
+  if (selectRows.value?.length === 0) return proxy.$message({ type: "warning", message: "请选择要签收的预警" });
   let wqs = selectRows.value.filter(item => item.czzt == '01');
   if (wqs.length == 0) return proxy.$message({ type: "warning", message: "数据都已签收，请选择未签收的数据" });
   let yqs = selectRows.value.filter(item => item.czzt == '02');
   let texy = yqs.length > 0 ? `${yqs.length}条已签收预警数据，确认要签收${wqs.length}条未签收预警数据吗？` : '确认要签收所有预警数据吗？'
   proxy.$confirm(texy, "警告", { type: "warning" }).then(() => {
     let ids = wqs.map(item => item.id)
-    qcckPost({ids}, '/mosty-gsxt/tbYjxx/batchQs').then(() => {
+    qcckPost({ ids }, '/mosty-gsxt/tbYjxx/batchQs').then(() => {
       proxy.$message({ type: "success", message: "成功" });
       getList();
     }).catch(() => {
@@ -341,7 +376,7 @@ const handleQs = () => {
 
 // 全息档案跳转
 const pushAssess = (val) => {
-  return holographicProfileJump(val.yjLx,val) 
+  return holographicProfileJump(val.yjLx, val)
 }
 
 const showDetail = (item) => {
@@ -375,6 +410,16 @@ const pushWarning = (val) => {
   warningShow.value = true
   dataList.value = val;
 }
+// 详情
+const particularsShow = ref(false)
+const dataPres = ref()
+const openBox = (val) => {
+    particularsShow.value = true
+  dataPres.value = val
+
+}
+
+
 // 表格高度计算
 const tabHeightFn = () => {
   pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 290;
@@ -384,11 +429,19 @@ const tabHeightFn = () => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .el-loading-mask {
   background: rgba(0, 0, 0, 0.5) !important;
 }
 
+::v-deep .el-table .cell {
+  padding: 0;
+}
+
+::v-deep .el-table .el-table__cell {
+  padding: 4px 0;
+}
+
 /* 预警级别行样式 */
 .warning-level-01 {
   background-color: rgba(255, 2, 2, 0.1) !important;
@@ -430,7 +483,7 @@ const tabHeightFn = () => {
   background-color: transparent !important;
 }
 
-.tabBox_zdy{
+.tabBox_zdy {
   .el-table--fit {
     overflow: unset !important;
   }