From b1e988080a08e069b182db481aca1fd9b96be3b7 Mon Sep 17 00:00:00 2001
From: huangchengfa <171504222@qq.com>
Date: Fri, 12 Dec 2025 17:59:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E3=80=90=E4=BA=BA=E5=83=8F=E9=A2=84=E8=AD=A6=E3=80=91=EF=BC=8C?=
 =?UTF-8?q?=E8=BD=A6=E8=BE=86=E9=A2=84=E8=AD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |  19 +
 .../portraitWarning/components/addFrom.vue    | 117 ++++++
 .../components/editAddForm.vue                | 324 +++++++++++++++
 .../components/localWarning.vue               | 290 ++++++++++++++
 .../warningList/portraitWarning/index.vue     | 370 ++++++++++++++++++
 .../portraitWarning/item/items.vue            | 197 ++++++++++
 .../vehicleWarning/components/addFrom.vue     | 117 ++++++
 .../vehicleWarning/components/editAddForm.vue | 324 +++++++++++++++
 .../components/localWarning.vue               | 290 ++++++++++++++
 .../warningList/vehicleWarning/index.vue      | 370 ++++++++++++++++++
 .../warningList/vehicleWarning/item/items.vue | 197 ++++++++++
 11 files changed, 2615 insertions(+)
 create mode 100644 src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/addFrom.vue
 create mode 100644 src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/editAddForm.vue
 create mode 100644 src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/localWarning.vue
 create mode 100644 src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/index.vue
 create mode 100644 src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/item/items.vue
 create mode 100644 src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/addFrom.vue
 create mode 100644 src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/editAddForm.vue
 create mode 100644 src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/localWarning.vue
 create mode 100644 src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/index.vue
 create mode 100644 src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/item/items.vue

diff --git a/src/router/index.js b/src/router/index.js
index ba420a9..2e2564b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -286,6 +286,25 @@ export const publicRoutes = [
               icon: "article"
             }
           },
+          // {
+          //   path: "/portraitWarning",
+          //   name: "portraitWarning",
+          //   component: () => import("@/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/index"),
+          //   meta: {
+          //     title: "人像预警",
+          //     icon: "article"
+          //   }
+          // },
+
+          // {
+          //   path: "/vehicleWarning",
+          //   name: "vehicleWarning",
+          //   component: () => import("@/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/index"),
+          //   meta: {
+          //     title: "车辆预警",
+          //     icon: "article"
+          //   }
+          // },
           {
             path: "/fouColorWarning",
             name: "fouColorWarning",
diff --git a/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/addFrom.vue b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/addFrom.vue
new file mode 100644
index 0000000..93dfb90
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/addFrom.vue
@@ -0,0 +1,117 @@
+<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 :formList="formData" v-model="listQuery" ref="elform">
+        <template #yjTp>
+          <template v-if="!listQuery.yjTp || listQuery.yjTp.includes('baidu')">
+            <img src="@/assets/images/car.png" width="80" height="100" v-if="listQuery.yjlx == 2" />
+            <img src="@/assets/images/default_male.png" width="80" height="100" v-else />
+          </template>
+          <el-image v-else style="width: 80px; height:120px" :src="listQuery.yjTp" :preview-src-list="[listQuery.yjTp]"
+            show-progress>
+            <template #error>
+              <div class="image-slot error">
+                <img src="@/assets/images/car.png" width="80" height="100" v-if="listQuery.yjlx == 2" />
+                <img src="@/assets/images/default_male.png" width="80" height="100" v-else />
+              </div>
+            </template>
+          </el-image>
+        </template>
+      </FormMessage>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import FormMessage from "@/components/aboutTable/FormMessage.vue";
+import { tbYjxxGetInfo } from "@/api/yj.js";
+import { IdCard } from '@/utils/validate.js'
+import { ref, defineExpose, reactive, defineEmits, getCurrentInstance, watch ,onMounted,onUnmounted} from "vue";
+const emit = defineEmits(["updateDate"]);
+const props = defineProps({
+  dict: {
+    type: Object,
+    default: () => { }
+  }
+});
+const { proxy } = getCurrentInstance();
+onMounted(() => {
+  console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx------------");
+
+})
+onUnmounted(() => {
+  console.log('--------------------------------------');
+
+})
+const dialogForm = ref(false); //弹窗
+const formData = ref([])
+watch(() => props.dict, (res) => {
+  if (res) {
+    formData.value = [
+      { label: "预警图片", prop: "yjTp", type: "slot" },
+      { label: "预警标题", prop: "yjBt", type: "input" },
+      { label: "预警人姓名", prop: "yjRyxm", type: "input" },
+      { label: "年龄", prop: "nl", type: "input" },
+      { label: "性别", prop: "xb", type: "input" },
+      { label: "预警级别", prop: "yjJb", type: "select", options: props.dict.D_BZ_YJJB },
+      { label: "相似度", prop: "xsd", type: "input" },
+      { label: "预警时间", prop: "yjSj", type: "input" },
+      { label: "预警地点", prop: "yjDz", type: "input" },
+      { label: "预警次数", prop: "yjCs", type: "input" },
+      { label: "处置状态", prop: "czzt", type: "select", options: props.dict.D_GSXT_YJXX_CZZT },
+      { label: "布控手机号", prop: "yjRysjh", type: "input" },
+      { label: "布控车牌号", prop: "yjClcph", type: "input" },
+      { label: "布控身份证", prop: "yjRysfzh", type: "input" },
+      { label: "预警标签", prop: "yjbqmc", type: "input" },
+      { label: "管辖部门", prop: "ssbm", type: "input" },
+      { label: "管辖县局", prop: "ssxgaj", type: "input" },
+      { label: "管辖市局", prop: "sssgaj", type: "input" },
+      { label: "接警员姓名", prop: "jjyxm", type: "input" },
+      { label: "预警内容", prop: "yjNr", type: "textarea", width: "100%" },
+    ]
+  }
+
+}, { deep: true, immediate: true })
+const listQuery = ref({}); //表单
+const loading = ref(false);
+const elform = ref();
+const title = ref("详情");
+const init = (type, row) => {
+  dialogForm.value = true;
+  tbYjxxGetInfo(row.id).then(res => {
+    listQuery.value = {
+      ...res,
+      nl: IdCard(res.yjRysfzh, 3) || "",
+      xb: IdCard(res.yjRysfzh, 2) || "",
+      xsd: res.xsd + '%'
+    }
+  })
+};
+// 关闭
+const close = () => {
+  listQuery.value = {};
+  loading.value = false;
+  dialogForm.value = false;
+  listQuery.value = {}
+
+};
+
+defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+::v-deep {
+  .el-form-item__content {
+align-items: normal;
+  }
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/editAddForm.vue b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/editAddForm.vue
new file mode 100644
index 0000000..c3a7cb1
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/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/warningList/portraitWarning/components/localWarning.vue b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/localWarning.vue
new file mode 100644
index 0000000..496fc7f
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/localWarning.vue
@@ -0,0 +1,290 @@
+<template>
+  <div>
+    <!-- 表格 -->
+    <div class="tabBox" :style="{height:!search?maxHeight+200+'px':(maxHeight+150)+'px'}">
+      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="maxHeight+'px'"
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
+        :expand="true" >
+        <template #expand="{ props }">
+          <div class="expand-content" style="max-width: 100%">
+           <Items :data="props" :dict="dict" />
+          </div>
+        </template>
+        <template #yjTp="{ row }">
+          <template v-if="!row.yjTp || row.yjTp.includes('baidu')">
+            <img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
+            <img src="@/assets/images/default_male.png" width="30" height="30" v-else />
+          </template>
+          <el-image v-else style="width: 30px; height:30px" :src="row.yjTp" :preview-src-list="[row.yjTp]"
+            show-progress>
+            <template #error>
+              <div class="image-slot error">
+                <img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
+                <img src="@/assets/images/default_male.png" width="30" height="30" v-else />
+              </div>
+            </template>
+          </el-image>
+        </template>
+        <template #nl="{ row }">
+          {{ IdCard(row.yjRysfzh, 3) }}
+        </template>
+        <template #xb="{ row }">
+          {{ IdCard(row.yjRysfzh, 2) }}
+        </template>
+        <template #xsd="{ row }">
+          {{ row.xsd }}%
+        </template>
+        <template #czzt="{ row }">
+          <DictTag v-model:value="row.czzt" :options="props.dict.D_GSXT_YJXX_CZZT" />
+        </template>
+        <template #yjJb="{ row }">
+          <DictTag v-model:value="row.yjJb" :options="props.dict.D_BZ_YJJB" />
+        </template>
+        <!-- 操作 -->
+        <template #controls="{ row }">
+          <el-link type="warning" @click="pushAssess(row)">全息档案</el-link>
+          <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'">签收</el-link>
+          <el-link type="success" @click="handleQsFk(row, '反馈')" v-else-if="row.czzt == '02'">反馈</el-link>
+          <el-link type="success" @click="handleQsFk(row, '查看反馈')" v-else>查看反馈</el-link>
+          <el-link type="primary" @click="openAddFrom(row)">详情</el-link>
+        </template>
+        <!-- <el-button type="success" @click="showFeedback(item, '签收')" v-if="item.czzt == '01'">签收</el-button>
+      <el-button type="success" @click="showFeedback(item, '反馈')" v-if="item.czzt == '02'">反馈</el-button>
+      <el-button type="success" @click="showFeedback(item, '查看反馈')" v-if="item.czzt == '03'">查看反馈</el-button> -->
+      </MyTable>
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="maxHeight+100" :pageConfiger="{
+        ...pageData.pageConfiger,
+        total: pageData.total
+      }"></Pages>
+    </div>
+
+  </div>
+  <HolographicArchive v-model="assessShow" :dataList="dataList" />
+  <FkDialog @change="getList" />
+  <Information v-model="showDialog" title="发送指令" @submit='submit' @close='closeFszl'>
+    <SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="yj"
+      :tacitly="tacitly" />
+  </Information>
+  <!-- <AddFrom ref="addFrom" /> -->
+</template>
+
+<script setup>
+import Items from '../item/items.vue'
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import { IdCard } from '@/utils/validate.js'
+import { tbYjxxGetPageList } from '@/api/yj.js'
+import HolographicArchive from '@/views/home/components/holographicArchive.vue'
+import Information from "@/views/home/model/information.vue";
+import SemdFqzl from '@/components/instructionHasBeen/sendFqzl.vue'
+import FkDialog from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/fkDialog.vue";
+import emitter from "@/utils/eventBus.js";
+import { holographicProfileJump } from "@/utils/tools.js"
+
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  dict: {
+    type: Object,
+    default: {}
+  },
+  maxHeight: {
+    type: Number,
+    default: 666
+  }, search: {
+    type: Boolean,
+    default: false
+  }
+});
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false,
+    haveControls: true
+  },
+
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 300, //操作栏宽度
+  tableColumn: [
+    { label: "预警图片", prop: "yjTp", showSolt: true,width: 100 },
+    { label: "处置状态", prop: "czzt", showSolt: true },
+    { label: "预警时间", prop: "yjSj", showOverflowTooltip: true },
+    { label: "姓名", prop: "yjRyxm" },
+    { label: "年龄", prop: "nl", showSolt: true,width: 80 },
+    { label: "数据来源", prop: "yjLylx", showOverflowTooltip: true },
+   { label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
+    // { label: "预警级别", prop: "yjJb", showSolt: true },
+    // { label: "相似度", prop: "xsd", showSolt: true },
+    { label: "布控车牌号", prop: "yjClcph", showOverflowTooltip: true },
+
+  ]
+});
+
+
+
+
+
+
+
+
+onMounted(() => {
+  // tabHeightFn();
+  getList()
+});
+
+const changeNo = (val) => {
+  pageData.pageConfiger.pageCurrent = val;
+  getList()
+}
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList()
+}
+const ORDIMG = 'https://89.40.7.122:38496/image'
+const IMGYM = 'https://sg.lz.dsj.xz/dhimage'
+const getList = (val) => {
+  pageData.tableConfiger.loading = true;
+  const promes = {
+    ...val,
+    pageCurrent: pageData.pageConfiger.pageCurrent,
+    pageSize: pageData.pageConfiger.pageSize
+  }
+  tbYjxxGetPageList(promes).then((res) => {
+    pageData.tableData = res.records.map(item => {
+      return {
+        ...item,
+        yjTp: item.yjlx == '01' ? item.yjTpreplace(ORDIMG, IMGYM) : item.yjTp
+      }
+    }) || [];
+    pageData.total = res.total;
+    pageData.tableConfiger.loading = false;
+  }).catch(() => {
+    pageData.tableConfiger.loading = false;
+  })
+}
+// 全息档案
+const assessShow = ref(false)
+const dataList = ref()
+const pushAssess = (val) => {
+  return holographicProfileJump(val?.yjRysfzh) // 全息档案跳转
+  // assessShow.value = true;
+  // dataList.value = val;
+}
+// 处理签收
+const handleQsFk = (val, type) => {
+  switch (type) {
+    case '签收':
+      proxy.$confirm("是否确定要签收？", "警告", { type: "warning" }).then(() => {
+        qcckPost({ id: val.id }, "/mosty-gsxt/tbYjxx/yjqs").then(() => {
+          val.czzt = '02'
+          getList()
+          proxy.$message({ type: "success", message: "签收成功" });
+        });
+      })
+      break;
+    case '反馈':
+    case '查看反馈':
+      emitter.emit("openFkDialog", { id: val.id, type });
+      break;
+  }
+
+}
+// 发送指令
+const showDialog = ref(false)
+const itemData = ref()
+const showDetail = (item) => {
+  showDialog.value = true;
+  itemData.value = item
+}
+const handleClose = () => {
+  showDialog.value = false;
+}
+const semdFqzlRef = ref()
+const tacitly = {
+  title: 'yjbt',
+  instructionContent: 'yjnr'
+}
+const submit = () => {
+  semdFqzlRef.value.getsendFqzl()
+}
+const closeFszl = () => {
+  semdFqzlRef.value.close()
+}
+const addFrom = ref()
+const openAddFrom = (row) => {
+  emitter.emit('openAddFrom', row)
+}
+// 根据预警级别设置行样式
+const getRowClassName = (row) => {
+  if (!row.row.yjJb) return '';
+  const level = String(row.row.yjJb);
+  if (level === '01' || level.includes('红') || level.includes('高')) return 'warning-level-01';
+  if (level === '02' || level.includes('橙') || level.includes('中')) return 'warning-level-02';
+  if (level === '03' || level.includes('黄') || level.includes('低')) return 'warning-level-03';
+  if (level === '04' || level.includes('蓝')) return 'warning-level-04';
+  return '';
+};
+
+// // 表格高度计算
+// const tabHeightFn = () => {
+//   pageData.tableHeight = window.innerHeight - 430;
+//   window.onresize = function () {
+//     tabHeightFn();
+//   };
+// };
+defineExpose({
+  getList
+})
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+/* 预警级别行样式 */
+.warning-level-01 {
+  background-color: rgba(255, 2, 2, 0.1) !important;
+}
+
+.warning-level-01:hover {
+  background-color: rgba(255, 2, 2, 0.15) !important;
+}
+.warning-level-02 {
+  background-color: rgba(255, 140, 0, 0.1) !important;
+}
+
+.warning-level-02:hover {
+  background-color: rgba(255, 140, 0, 0.15) !important;
+}
+.warning-level-03 {
+  background-color: rgba(255, 210, 8, 0.1) !important;
+}
+
+.warning-level-03:hover {
+  background-color: rgba(255, 210, 8, 0.15) !important;
+}
+.warning-level-04 {
+  background-color: rgba(0, 0, 255, 0.1) !important;
+}
+
+.warning-level-04:hover {
+  background-color: rgba(0, 0, 255, 0.15) !important;
+}
+/* 确保行样式应用到所有单元格 */
+.warning-level-01 td,
+.warning-level-02 td,
+.warning-level-03 td,
+.warning-level-04 td {
+  background-color: transparent !important;
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/index.vue b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/index.vue
new file mode 100644
index 0000000..3a71c6c
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/index.vue
@@ -0,0 +1,370 @@
+<template>
+  <div>
+    <div class="titleBox">
+
+      <PageTitle title="预警列表">
+        <el-button type="success" @click="openSearch">
+          <Search style="width: 1em; height: 1em; margin-right: 8px" />
+          <span style="vertical-align: middle" v-if="!search">搜索</span>
+          <span style="vertical-align: middle" v-else>关闭搜索</span>
+        </el-button>
+      </PageTitle>
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox" class="searchBox" v-if="search">
+      <el-form :model="listQuery" label-width="auto" :inline="true" ref="searchArr">
+        <el-form-item label="布控类型" prop="yjlx">
+          <el-select v-model="listQuery.yjlx" placeholder="请选择预警类型">
+            <el-option v-for="item in D_BZ_YJLX" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="布控人员" prop="yjRyxm	">
+          <el-select clearable v-model="listQuery.yjRyxm" filterable remote reserve-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>
+        </el-form-item>
+        <el-form-item label="时间筛选">
+          <el-date-picker v-model="listQuery.time" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
+            start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss"
+            format="YYYY-MM-DD HH:mm:ss" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSearch">查询</el-button>
+          <el-button @click="resetForm(searchArr)">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox" :style="{ height: (pageData.tableHeight + 40) + 'px' }">
+      <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick"
+        style="position: relative;z-index: 1;">
+        <el-tab-pane label="本地预警" name="local">
+          <div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div>
+          <LocalWarning :maxHeight="search ? (pageData.tableHeight - 200) : (pageData.tableHeight - 200)"
+            ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search"/>
+          <!-- pageData.tableHeight-125 -->
+        </el-tab-pane>
+        <el-tab-pane label="区厅预警" name="district">区厅预警</el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+  <el-dialog v-model="showDc" title="导出预警" width="80%" align-center>
+    <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="500"
+      :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
+      <template #yjTp="{ row }">
+        <template v-if="!row.yjTp || row.yjTp.includes('baidu')">
+          <img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
+          <img src="@/assets/images/default_male.png" width="30" height="30" v-else />
+        </template>
+        <el-image v-else style="width: 30px; height:30px" :src="row.yjTp" :preview-src-list="[row.yjTp]" show-progress>
+          <template #error>
+            <div class="image-slot error">
+              <img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
+              <img src="@/assets/images/default_male.png" width="30" height="30" v-else />
+            </div>
+          </template>
+        </el-image>
+      </template>
+      <template #nl="{ row }">
+        {{ IdCard(row.yjRysfzh, 3) }}
+      </template>
+      <template #yjLylx="{ row }">
+        <DictTag v-model:value="row.yjLylx" :options="D_BZ_YJLYXT" />
+      </template>
+      <template #xb="{ row }">
+        {{ IdCard(row.yjRysfzh, 2) }}
+      </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 #xsd="{ row }">
+        {{ row.xsd }}%
+      </template>
+      <!-- 操作 -->
+    </MyTable>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="showDc = false">关闭</el-button>
+        <el-button type="primary" @click="handleExport">
+          导出
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <AddFromz ref="addFromRefs" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" />
+</template>
+
+<script setup>
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+// import Search from "@/components/aboutTable/Search.vue";
+import { IdCard } from '@/utils/validate.js'
+import { tbGsxtZdrySelectList } from "@/api/zdr.js"
+import { tbYjxxQueryYjxx } from "@/api/yj.js";
+import LocalWarning from "./components/localWarning.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
+import AddFromz from './components/addFrom.vue';
+import FileSaver from "file-saver";
+import emitter from "@/utils/eventBus.js";
+import * as XLSX from "xlsx";
+const { proxy } = getCurrentInstance();
+const { D_BZ_YJLX, D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT } = proxy.$dict("D_BZ_YJLX", "D_GSXT_YJXX_CZZT", "D_BZ_YJJB", "D_BZ_YJLYXT")
+const searchBox = ref(); //搜索框
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false,
+    haveControls: false
+  },
+
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 160, //操作栏宽度
+  tableColumn: [
+    { label: "预警图片", prop: "yjTp", showSolt: true },
+    { label: "处置状态", prop: "czzt", showSolt: true },
+    { label: "预警时间", prop: "yjSj", showOverflowTooltip: true },
+    { label: "姓名", prop: "yjRyxm" },
+    { label: "年龄", prop: "nl", showSolt: true },
+    { label: "数据来源", prop: "yjLylx", showOverflowTooltip: true },
+    { label: "性别", prop: "xb", showSolt: true },
+    { label: "预警级别", prop: "yjJb", showSolt: true },
+    { label: "相似度", prop: "xsd", showSolt: true },
+    { label: "预警地点", prop: "yjDz", showOverflowTooltip: true },
+    { label: "预警次数", prop: "yjCs", showOverflowTooltip: true },
+    { label: "布控手机号", prop: "yjRysjh", showOverflowTooltip: true },
+    { label: "布控车牌号", prop: "yjClcph", showOverflowTooltip: true },
+    { label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
+  ]
+});
+const showDc = ref(false)
+const activeName = ref('local')
+const addFromRefs = ref(null)
+onMounted(() => {
+  tabHeightFn();
+  emitter.on('openAddFrom', (val) => {
+    console.log( addFromRefs.value);
+if(addFromRefs.value) {
+    addFromRefs.value.init('add', val)
+  }
+    // addFromRefs.value.init('add', val)
+  })
+});
+const listQuery = ref({})
+const opentions = ref([])
+const localWarningRef = ref(null);
+// 搜索
+
+const onSearch = () => {
+  const promes = {
+    yjRyxm: listQuery.value.yjRyxm,
+    yjlx: listQuery.value.yjlx,
+    startTime: listQuery.value.time ? listQuery.value.time[0] : '',
+    endTime: listQuery.value.time ? listQuery.value.time[1] : '',
+  }
+  localWarningRef.value.getList(promes)
+}
+const loading = ref(false)
+const remoteMethod = (query) => {
+  if (query) {
+    loading.value = true
+    tbGsxtZdrySelectList({ ryXm: query }).then(res => {
+      opentions.value = res
+    }).finally(() => {
+      loading.value = false
+    })
+  } else {
+    opentions.value = []
+  }
+}
+const searchArr = ref()
+const resetForm = (formEl) => {
+  listQuery.value = {}
+  localWarningRef.value.getList()
+}
+// // 表格高度计算
+// const tabHeightFn = () => {
+//   pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+//   window.onresize = function () {
+//     tabHeightFn();
+//   };
+// };
+// 搜索栏
+const search = ref(false)
+const openSearch = () => {
+  search.value = !search.value
+  nextTick(() => {
+    tabHeightFn()
+  })
+}
+// 表格高度计算
+const tabHeightFn = () => {
+  if (search.value) {
+    pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+  } else {
+    pageData.tableHeight = window.innerHeight - 250;
+  }
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+// 导出
+
+const exportExcel = () => {
+  const promes = {
+    yjRyxm: listQuery.value.yjRyxm,
+    yjlx: listQuery.value.yjlx,
+    startTime: listQuery.value.time ? listQuery.value.time[0] : '',
+    endTime: listQuery.value.time ? listQuery.value.time[1] : '',
+  }
+  tbYjxxQueryYjxx(promes).then(res => {
+    pageData.tableData = res
+    showDc.value = true
+  })
+
+}
+
+// 处理Excel导出
+const handleExport = () => {
+  // 创建一个临时表格用于导出
+  const tempTable = document.createElement('table');
+
+  // 创建表头
+  const thead = document.createElement('thead');
+  const headerRow = document.createElement('tr');
+
+  // 添加序号列
+  const indexTh = document.createElement('th');
+  indexTh.textContent = '序号';
+  headerRow.appendChild(indexTh);
+
+  // 添加其他列头
+  pageData.tableColumn.forEach(column => {
+    const th = document.createElement('th');
+    th.textContent = column.label;
+    headerRow.appendChild(th);
+  });
+
+  thead.appendChild(headerRow);
+  tempTable.appendChild(thead);
+
+  // 创建表体
+  const tbody = document.createElement('tbody');
+
+  // 处理表格数据
+  pageData.tableData.forEach((row, index) => {
+    const tr = document.createElement('tr');
+    // 添加序号
+    const indexTd = document.createElement('td');
+    indexTd.textContent = index + 1;
+    tr.appendChild(indexTd);
+    // 添加其他单元格数据
+    pageData.tableColumn.forEach(column => {
+      const td = document.createElement('td');
+      // 处理自定义插槽的情况
+      if (column.showSolt) {
+        if (column.prop === 'yjTp') {
+          // 照片字段只显示文字描述
+          td.textContent = '有照片';
+        } else if (column.prop === 'nl') {
+          // 年龄字段
+          td.textContent = IdCard(row.yjRysfzh, 3);
+        } else if (column.prop === 'xb') {
+          // 性别字段
+          td.textContent = IdCard(row.yjRysfzh, 2);
+        } else if (column.prop === 'xsd') {
+          // 相似度字段
+          td.textContent = '90%';
+        } else {
+          // 其他字段
+          td.textContent = row[column.prop] || '';
+        }
+      } else {
+        // 普通字段
+        td.textContent = row[column.prop] || '';
+      }
+
+      tr.appendChild(td);
+    });
+
+    tbody.appendChild(tr);
+  });
+
+  tempTable.appendChild(tbody);
+
+  // 执行Excel导出
+  let xlsxParam = { raw: true };
+  let wb = XLSX.utils.table_to_book(tempTable, xlsxParam);
+  let wbout = XLSX.write(wb, {
+    bookType: "xlsx",
+    bookSST: true,
+    type: "array"
+  });
+
+  // 保存文件
+  try {
+    const exportTime = new Date().toLocaleString('zh-CN').replace(/\//g, '-').replace(/:/g, '-');
+    FileSaver.saveAs(
+      new Blob([wbout], { type: "application/octet-stream" }),
+      `预警数据导出_${exportTime}.xlsx`
+    );
+    showDc.value = false;
+  } catch (e) {
+    console.error('导出Excel失败:', e);
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep .el-table--fit {
+  height: calc(100% - 50px) !important;
+}
+</style>
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+
+.searchBox {
+  background-color: #fff;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/item/items.vue b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/item/items.vue
new file mode 100644
index 0000000..61ad538
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/item/items.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="warning-item">
+    <!-- 第一行：图片、姓名、年龄、性别 -->
+    <div class="first-row">
+      <div class="avatar-container">
+        <template v-if="!data.yjTp || data.yjTp.includes('baidu')">
+          <img src="@/assets/images/car.png" width="60" height="70" v-if="data.yjLx == 2" />
+          <img src="@/assets/images/default_male.png" width="60" height="70" v-else />
+        </template>
+        <el-image v-else style="width: 60px; height:70px" :src="data.yjTp" :preview-src-list="[data.yjTp]"
+          show-progress>
+          <template #error>
+            <div class="image-slot error">
+              <img src="@/assets/images/car.png" width="60" height="70" v-if="data.yjLx == 2" />
+              <img src="@/assets/images/default_male.png" width="60" height="70" v-else />
+            </div>
+          </template>
+        </el-image>
+      </div>
+      <div class="basic-info">
+        <div class="info-items  name">姓名：<span>{{ data.yjRyxm }}</span></div>
+        <div class="info-items gender">性别：<span>       {{ IdCard(data.yjRysfzh, 3) }}</span></div>
+        <div class="info-items age">年龄：<span>       {{ IdCard(data.yjRysfzh, 2) }}</span></div>
+      </div>
+    </div>
+
+    <!-- 第二行：其他所有字段 -->
+    <div class="second-row">
+      <div class="info-item title">预警标题：<span>{{ data.yjBt }}</span></div>
+      <div class="info-item level">
+        预警级别：
+         <DictTag :color="bqYs(data.yjJb)" :tag="false" v-model:value="data.yjJb" :options="props.dict.D_BZ_YJJB" />
+        <!-- <span :class="getLevelClass(data.yjJb)">{{ data.yjJb || data.yjLx }}</span> -->
+      </div>
+      <div class="info-item similarity">相似度：<span>{{ data.xsd }}%</span></div>
+    </div>
+    <div class="second-row">
+      <div class="info-item time">预警时间：<span>{{ data.yjSj }}</span></div>
+      <div class="info-item location">预警地点：<span>{{ data.yjDz }}</span></div>
+      <div class="info-item count">预警次数：<span>{{ data.yjCs }}次</span></div>
+    </div>
+    <div class="second-row">
+      <div class="info-item status">
+        处置状态： <DictTag v-model:value="data.czzt" :options="props.dict.D_GSXT_YJXX_CZZT" />
+
+      </div>
+      <div class="info-item phone">布控手机：<span>{{ data.yjRysjh }}</span></div>
+      <div class="info-item car">布控车牌号：<span>{{ data.yjClcph }}</span></div>
+    </div>
+    <div class="second-row">
+      <div class="info-item idcard">布控身份证：<span>{{ data.yjRysfzh }}</span></div>
+      <div class="info-item tag">预警标签：<span>{{ data.yjbqmc }}</span></div>
+      <div class="info-item department">管辖部门：<span>{{ data.ssbm }}</span></div>
+    </div>
+    <div class="second-row">
+      <div class="info-item county">管辖县局：<span>{{ data.ssxgaj }}</span></div>
+      <div class="info-item city">管辖市局：<span>{{ data.sssgaj }}</span></div>
+      <div class="info-item officer">接警员：<span>{{ data.jjyxm }}</span></div>
+    </div>
+    <div class="second-row">
+      <div class="info-item content full-width">预警内容：<span>{{ data.yjNr }}</span></div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, computed } from 'vue'
+import { bqYs } from '@/utils/tools'
+import { IdCard } from '@/utils/validate.js'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => { }
+  },
+  dict: {
+    type: Object,
+    default: () => { }
+  },
+})
+
+</script>
+<style lang="scss" scoped>
+.warning-item {
+  width: 100%;
+  padding: 15px;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  background-color: #fafafa;
+}
+
+.first-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.avatar-container {
+  margin-right: 20px;
+}
+
+.basic-info {
+  display: flex;
+  gap: 30px;
+  align-items: center;
+}
+
+.second-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 10px;
+}
+.info-items {
+  box-sizing: border-box;
+  display: flex;
+  // justify-content: space-between;
+  padding: 5px 0;
+  color: #333;
+
+  span {
+    font-weight: 500;
+    color: #606266;
+  }
+}
+.info-item {
+  flex: 0 0 calc(33.33% - 20px);
+  box-sizing: border-box;
+  display: flex;
+  // justify-content: space-between;
+  padding: 5px 0;
+  color: #333;
+
+  span {
+    font-weight: 500;
+    color: #606266;
+  }
+}
+
+// 特殊字段样式
+.name span {
+  color: #1890ff;
+  font-weight: bold;
+}
+
+// 预警级别颜色
+.level-high span {
+  color: #f56c6c;
+  font-weight: bold;
+}
+
+.level-medium span {
+  color: #e6a23c;
+  font-weight: bold;
+}
+
+.level-low span {
+  color: #67c23a;
+  font-weight: bold;
+}
+
+// 处置状态颜色
+.status-completed span {
+  color: #67c23a;
+  font-weight: bold;
+}
+
+.status-processing span {
+  color: #409eff;
+  font-weight: bold;
+}
+
+.status-pending span {
+  color: #e6a23c;
+  font-weight: bold;
+}
+
+// 全宽字段
+.full-width {
+  flex: 0 0 100% !important;
+}
+
+// 内容字段特殊样式
+.content {
+  flex-direction: column;
+  align-items: flex-start;
+
+  span {
+    margin-top: 5px;
+    padding: 8px 12px;
+    background-color: #f0f9eb;
+    border-radius: 4px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/addFrom.vue b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/addFrom.vue
new file mode 100644
index 0000000..93dfb90
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/addFrom.vue
@@ -0,0 +1,117 @@
+<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 :formList="formData" v-model="listQuery" ref="elform">
+        <template #yjTp>
+          <template v-if="!listQuery.yjTp || listQuery.yjTp.includes('baidu')">
+            <img src="@/assets/images/car.png" width="80" height="100" v-if="listQuery.yjlx == 2" />
+            <img src="@/assets/images/default_male.png" width="80" height="100" v-else />
+          </template>
+          <el-image v-else style="width: 80px; height:120px" :src="listQuery.yjTp" :preview-src-list="[listQuery.yjTp]"
+            show-progress>
+            <template #error>
+              <div class="image-slot error">
+                <img src="@/assets/images/car.png" width="80" height="100" v-if="listQuery.yjlx == 2" />
+                <img src="@/assets/images/default_male.png" width="80" height="100" v-else />
+              </div>
+            </template>
+          </el-image>
+        </template>
+      </FormMessage>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import FormMessage from "@/components/aboutTable/FormMessage.vue";
+import { tbYjxxGetInfo } from "@/api/yj.js";
+import { IdCard } from '@/utils/validate.js'
+import { ref, defineExpose, reactive, defineEmits, getCurrentInstance, watch ,onMounted,onUnmounted} from "vue";
+const emit = defineEmits(["updateDate"]);
+const props = defineProps({
+  dict: {
+    type: Object,
+    default: () => { }
+  }
+});
+const { proxy } = getCurrentInstance();
+onMounted(() => {
+  console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx------------");
+
+})
+onUnmounted(() => {
+  console.log('--------------------------------------');
+
+})
+const dialogForm = ref(false); //弹窗
+const formData = ref([])
+watch(() => props.dict, (res) => {
+  if (res) {
+    formData.value = [
+      { label: "预警图片", prop: "yjTp", type: "slot" },
+      { label: "预警标题", prop: "yjBt", type: "input" },
+      { label: "预警人姓名", prop: "yjRyxm", type: "input" },
+      { label: "年龄", prop: "nl", type: "input" },
+      { label: "性别", prop: "xb", type: "input" },
+      { label: "预警级别", prop: "yjJb", type: "select", options: props.dict.D_BZ_YJJB },
+      { label: "相似度", prop: "xsd", type: "input" },
+      { label: "预警时间", prop: "yjSj", type: "input" },
+      { label: "预警地点", prop: "yjDz", type: "input" },
+      { label: "预警次数", prop: "yjCs", type: "input" },
+      { label: "处置状态", prop: "czzt", type: "select", options: props.dict.D_GSXT_YJXX_CZZT },
+      { label: "布控手机号", prop: "yjRysjh", type: "input" },
+      { label: "布控车牌号", prop: "yjClcph", type: "input" },
+      { label: "布控身份证", prop: "yjRysfzh", type: "input" },
+      { label: "预警标签", prop: "yjbqmc", type: "input" },
+      { label: "管辖部门", prop: "ssbm", type: "input" },
+      { label: "管辖县局", prop: "ssxgaj", type: "input" },
+      { label: "管辖市局", prop: "sssgaj", type: "input" },
+      { label: "接警员姓名", prop: "jjyxm", type: "input" },
+      { label: "预警内容", prop: "yjNr", type: "textarea", width: "100%" },
+    ]
+  }
+
+}, { deep: true, immediate: true })
+const listQuery = ref({}); //表单
+const loading = ref(false);
+const elform = ref();
+const title = ref("详情");
+const init = (type, row) => {
+  dialogForm.value = true;
+  tbYjxxGetInfo(row.id).then(res => {
+    listQuery.value = {
+      ...res,
+      nl: IdCard(res.yjRysfzh, 3) || "",
+      xb: IdCard(res.yjRysfzh, 2) || "",
+      xsd: res.xsd + '%'
+    }
+  })
+};
+// 关闭
+const close = () => {
+  listQuery.value = {};
+  loading.value = false;
+  dialogForm.value = false;
+  listQuery.value = {}
+
+};
+
+defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+::v-deep {
+  .el-form-item__content {
+align-items: normal;
+  }
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/editAddForm.vue b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/editAddForm.vue
new file mode 100644
index 0000000..c3a7cb1
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/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/warningList/vehicleWarning/components/localWarning.vue b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/localWarning.vue
new file mode 100644
index 0000000..496fc7f
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/localWarning.vue
@@ -0,0 +1,290 @@
+<template>
+  <div>
+    <!-- 表格 -->
+    <div class="tabBox" :style="{height:!search?maxHeight+200+'px':(maxHeight+150)+'px'}">
+      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="maxHeight+'px'"
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
+        :expand="true" >
+        <template #expand="{ props }">
+          <div class="expand-content" style="max-width: 100%">
+           <Items :data="props" :dict="dict" />
+          </div>
+        </template>
+        <template #yjTp="{ row }">
+          <template v-if="!row.yjTp || row.yjTp.includes('baidu')">
+            <img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
+            <img src="@/assets/images/default_male.png" width="30" height="30" v-else />
+          </template>
+          <el-image v-else style="width: 30px; height:30px" :src="row.yjTp" :preview-src-list="[row.yjTp]"
+            show-progress>
+            <template #error>
+              <div class="image-slot error">
+                <img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
+                <img src="@/assets/images/default_male.png" width="30" height="30" v-else />
+              </div>
+            </template>
+          </el-image>
+        </template>
+        <template #nl="{ row }">
+          {{ IdCard(row.yjRysfzh, 3) }}
+        </template>
+        <template #xb="{ row }">
+          {{ IdCard(row.yjRysfzh, 2) }}
+        </template>
+        <template #xsd="{ row }">
+          {{ row.xsd }}%
+        </template>
+        <template #czzt="{ row }">
+          <DictTag v-model:value="row.czzt" :options="props.dict.D_GSXT_YJXX_CZZT" />
+        </template>
+        <template #yjJb="{ row }">
+          <DictTag v-model:value="row.yjJb" :options="props.dict.D_BZ_YJJB" />
+        </template>
+        <!-- 操作 -->
+        <template #controls="{ row }">
+          <el-link type="warning" @click="pushAssess(row)">全息档案</el-link>
+          <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'">签收</el-link>
+          <el-link type="success" @click="handleQsFk(row, '反馈')" v-else-if="row.czzt == '02'">反馈</el-link>
+          <el-link type="success" @click="handleQsFk(row, '查看反馈')" v-else>查看反馈</el-link>
+          <el-link type="primary" @click="openAddFrom(row)">详情</el-link>
+        </template>
+        <!-- <el-button type="success" @click="showFeedback(item, '签收')" v-if="item.czzt == '01'">签收</el-button>
+      <el-button type="success" @click="showFeedback(item, '反馈')" v-if="item.czzt == '02'">反馈</el-button>
+      <el-button type="success" @click="showFeedback(item, '查看反馈')" v-if="item.czzt == '03'">查看反馈</el-button> -->
+      </MyTable>
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="maxHeight+100" :pageConfiger="{
+        ...pageData.pageConfiger,
+        total: pageData.total
+      }"></Pages>
+    </div>
+
+  </div>
+  <HolographicArchive v-model="assessShow" :dataList="dataList" />
+  <FkDialog @change="getList" />
+  <Information v-model="showDialog" title="发送指令" @submit='submit' @close='closeFszl'>
+    <SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="yj"
+      :tacitly="tacitly" />
+  </Information>
+  <!-- <AddFrom ref="addFrom" /> -->
+</template>
+
+<script setup>
+import Items from '../item/items.vue'
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import { IdCard } from '@/utils/validate.js'
+import { tbYjxxGetPageList } from '@/api/yj.js'
+import HolographicArchive from '@/views/home/components/holographicArchive.vue'
+import Information from "@/views/home/model/information.vue";
+import SemdFqzl from '@/components/instructionHasBeen/sendFqzl.vue'
+import FkDialog from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/fkDialog.vue";
+import emitter from "@/utils/eventBus.js";
+import { holographicProfileJump } from "@/utils/tools.js"
+
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  dict: {
+    type: Object,
+    default: {}
+  },
+  maxHeight: {
+    type: Number,
+    default: 666
+  }, search: {
+    type: Boolean,
+    default: false
+  }
+});
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false,
+    haveControls: true
+  },
+
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 300, //操作栏宽度
+  tableColumn: [
+    { label: "预警图片", prop: "yjTp", showSolt: true,width: 100 },
+    { label: "处置状态", prop: "czzt", showSolt: true },
+    { label: "预警时间", prop: "yjSj", showOverflowTooltip: true },
+    { label: "姓名", prop: "yjRyxm" },
+    { label: "年龄", prop: "nl", showSolt: true,width: 80 },
+    { label: "数据来源", prop: "yjLylx", showOverflowTooltip: true },
+   { label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
+    // { label: "预警级别", prop: "yjJb", showSolt: true },
+    // { label: "相似度", prop: "xsd", showSolt: true },
+    { label: "布控车牌号", prop: "yjClcph", showOverflowTooltip: true },
+
+  ]
+});
+
+
+
+
+
+
+
+
+onMounted(() => {
+  // tabHeightFn();
+  getList()
+});
+
+const changeNo = (val) => {
+  pageData.pageConfiger.pageCurrent = val;
+  getList()
+}
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList()
+}
+const ORDIMG = 'https://89.40.7.122:38496/image'
+const IMGYM = 'https://sg.lz.dsj.xz/dhimage'
+const getList = (val) => {
+  pageData.tableConfiger.loading = true;
+  const promes = {
+    ...val,
+    pageCurrent: pageData.pageConfiger.pageCurrent,
+    pageSize: pageData.pageConfiger.pageSize
+  }
+  tbYjxxGetPageList(promes).then((res) => {
+    pageData.tableData = res.records.map(item => {
+      return {
+        ...item,
+        yjTp: item.yjlx == '01' ? item.yjTpreplace(ORDIMG, IMGYM) : item.yjTp
+      }
+    }) || [];
+    pageData.total = res.total;
+    pageData.tableConfiger.loading = false;
+  }).catch(() => {
+    pageData.tableConfiger.loading = false;
+  })
+}
+// 全息档案
+const assessShow = ref(false)
+const dataList = ref()
+const pushAssess = (val) => {
+  return holographicProfileJump(val?.yjRysfzh) // 全息档案跳转
+  // assessShow.value = true;
+  // dataList.value = val;
+}
+// 处理签收
+const handleQsFk = (val, type) => {
+  switch (type) {
+    case '签收':
+      proxy.$confirm("是否确定要签收？", "警告", { type: "warning" }).then(() => {
+        qcckPost({ id: val.id }, "/mosty-gsxt/tbYjxx/yjqs").then(() => {
+          val.czzt = '02'
+          getList()
+          proxy.$message({ type: "success", message: "签收成功" });
+        });
+      })
+      break;
+    case '反馈':
+    case '查看反馈':
+      emitter.emit("openFkDialog", { id: val.id, type });
+      break;
+  }
+
+}
+// 发送指令
+const showDialog = ref(false)
+const itemData = ref()
+const showDetail = (item) => {
+  showDialog.value = true;
+  itemData.value = item
+}
+const handleClose = () => {
+  showDialog.value = false;
+}
+const semdFqzlRef = ref()
+const tacitly = {
+  title: 'yjbt',
+  instructionContent: 'yjnr'
+}
+const submit = () => {
+  semdFqzlRef.value.getsendFqzl()
+}
+const closeFszl = () => {
+  semdFqzlRef.value.close()
+}
+const addFrom = ref()
+const openAddFrom = (row) => {
+  emitter.emit('openAddFrom', row)
+}
+// 根据预警级别设置行样式
+const getRowClassName = (row) => {
+  if (!row.row.yjJb) return '';
+  const level = String(row.row.yjJb);
+  if (level === '01' || level.includes('红') || level.includes('高')) return 'warning-level-01';
+  if (level === '02' || level.includes('橙') || level.includes('中')) return 'warning-level-02';
+  if (level === '03' || level.includes('黄') || level.includes('低')) return 'warning-level-03';
+  if (level === '04' || level.includes('蓝')) return 'warning-level-04';
+  return '';
+};
+
+// // 表格高度计算
+// const tabHeightFn = () => {
+//   pageData.tableHeight = window.innerHeight - 430;
+//   window.onresize = function () {
+//     tabHeightFn();
+//   };
+// };
+defineExpose({
+  getList
+})
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+/* 预警级别行样式 */
+.warning-level-01 {
+  background-color: rgba(255, 2, 2, 0.1) !important;
+}
+
+.warning-level-01:hover {
+  background-color: rgba(255, 2, 2, 0.15) !important;
+}
+.warning-level-02 {
+  background-color: rgba(255, 140, 0, 0.1) !important;
+}
+
+.warning-level-02:hover {
+  background-color: rgba(255, 140, 0, 0.15) !important;
+}
+.warning-level-03 {
+  background-color: rgba(255, 210, 8, 0.1) !important;
+}
+
+.warning-level-03:hover {
+  background-color: rgba(255, 210, 8, 0.15) !important;
+}
+.warning-level-04 {
+  background-color: rgba(0, 0, 255, 0.1) !important;
+}
+
+.warning-level-04:hover {
+  background-color: rgba(0, 0, 255, 0.15) !important;
+}
+/* 确保行样式应用到所有单元格 */
+.warning-level-01 td,
+.warning-level-02 td,
+.warning-level-03 td,
+.warning-level-04 td {
+  background-color: transparent !important;
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/index.vue b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/index.vue
new file mode 100644
index 0000000..3a71c6c
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/index.vue
@@ -0,0 +1,370 @@
+<template>
+  <div>
+    <div class="titleBox">
+
+      <PageTitle title="预警列表">
+        <el-button type="success" @click="openSearch">
+          <Search style="width: 1em; height: 1em; margin-right: 8px" />
+          <span style="vertical-align: middle" v-if="!search">搜索</span>
+          <span style="vertical-align: middle" v-else>关闭搜索</span>
+        </el-button>
+      </PageTitle>
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox" class="searchBox" v-if="search">
+      <el-form :model="listQuery" label-width="auto" :inline="true" ref="searchArr">
+        <el-form-item label="布控类型" prop="yjlx">
+          <el-select v-model="listQuery.yjlx" placeholder="请选择预警类型">
+            <el-option v-for="item in D_BZ_YJLX" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="布控人员" prop="yjRyxm	">
+          <el-select clearable v-model="listQuery.yjRyxm" filterable remote reserve-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>
+        </el-form-item>
+        <el-form-item label="时间筛选">
+          <el-date-picker v-model="listQuery.time" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
+            start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss"
+            format="YYYY-MM-DD HH:mm:ss" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSearch">查询</el-button>
+          <el-button @click="resetForm(searchArr)">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox" :style="{ height: (pageData.tableHeight + 40) + 'px' }">
+      <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick"
+        style="position: relative;z-index: 1;">
+        <el-tab-pane label="本地预警" name="local">
+          <div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div>
+          <LocalWarning :maxHeight="search ? (pageData.tableHeight - 200) : (pageData.tableHeight - 200)"
+            ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search"/>
+          <!-- pageData.tableHeight-125 -->
+        </el-tab-pane>
+        <el-tab-pane label="区厅预警" name="district">区厅预警</el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+  <el-dialog v-model="showDc" title="导出预警" width="80%" align-center>
+    <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="500"
+      :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
+      <template #yjTp="{ row }">
+        <template v-if="!row.yjTp || row.yjTp.includes('baidu')">
+          <img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
+          <img src="@/assets/images/default_male.png" width="30" height="30" v-else />
+        </template>
+        <el-image v-else style="width: 30px; height:30px" :src="row.yjTp" :preview-src-list="[row.yjTp]" show-progress>
+          <template #error>
+            <div class="image-slot error">
+              <img src="@/assets/images/car.png" width="30" height="30" v-if="row.yjLx == 2" />
+              <img src="@/assets/images/default_male.png" width="30" height="30" v-else />
+            </div>
+          </template>
+        </el-image>
+      </template>
+      <template #nl="{ row }">
+        {{ IdCard(row.yjRysfzh, 3) }}
+      </template>
+      <template #yjLylx="{ row }">
+        <DictTag v-model:value="row.yjLylx" :options="D_BZ_YJLYXT" />
+      </template>
+      <template #xb="{ row }">
+        {{ IdCard(row.yjRysfzh, 2) }}
+      </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 #xsd="{ row }">
+        {{ row.xsd }}%
+      </template>
+      <!-- 操作 -->
+    </MyTable>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="showDc = false">关闭</el-button>
+        <el-button type="primary" @click="handleExport">
+          导出
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <AddFromz ref="addFromRefs" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" />
+</template>
+
+<script setup>
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+// import Search from "@/components/aboutTable/Search.vue";
+import { IdCard } from '@/utils/validate.js'
+import { tbGsxtZdrySelectList } from "@/api/zdr.js"
+import { tbYjxxQueryYjxx } from "@/api/yj.js";
+import LocalWarning from "./components/localWarning.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
+import AddFromz from './components/addFrom.vue';
+import FileSaver from "file-saver";
+import emitter from "@/utils/eventBus.js";
+import * as XLSX from "xlsx";
+const { proxy } = getCurrentInstance();
+const { D_BZ_YJLX, D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT } = proxy.$dict("D_BZ_YJLX", "D_GSXT_YJXX_CZZT", "D_BZ_YJJB", "D_BZ_YJLYXT")
+const searchBox = ref(); //搜索框
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false,
+    haveControls: false
+  },
+
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 160, //操作栏宽度
+  tableColumn: [
+    { label: "预警图片", prop: "yjTp", showSolt: true },
+    { label: "处置状态", prop: "czzt", showSolt: true },
+    { label: "预警时间", prop: "yjSj", showOverflowTooltip: true },
+    { label: "姓名", prop: "yjRyxm" },
+    { label: "年龄", prop: "nl", showSolt: true },
+    { label: "数据来源", prop: "yjLylx", showOverflowTooltip: true },
+    { label: "性别", prop: "xb", showSolt: true },
+    { label: "预警级别", prop: "yjJb", showSolt: true },
+    { label: "相似度", prop: "xsd", showSolt: true },
+    { label: "预警地点", prop: "yjDz", showOverflowTooltip: true },
+    { label: "预警次数", prop: "yjCs", showOverflowTooltip: true },
+    { label: "布控手机号", prop: "yjRysjh", showOverflowTooltip: true },
+    { label: "布控车牌号", prop: "yjClcph", showOverflowTooltip: true },
+    { label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
+  ]
+});
+const showDc = ref(false)
+const activeName = ref('local')
+const addFromRefs = ref(null)
+onMounted(() => {
+  tabHeightFn();
+  emitter.on('openAddFrom', (val) => {
+    console.log( addFromRefs.value);
+if(addFromRefs.value) {
+    addFromRefs.value.init('add', val)
+  }
+    // addFromRefs.value.init('add', val)
+  })
+});
+const listQuery = ref({})
+const opentions = ref([])
+const localWarningRef = ref(null);
+// 搜索
+
+const onSearch = () => {
+  const promes = {
+    yjRyxm: listQuery.value.yjRyxm,
+    yjlx: listQuery.value.yjlx,
+    startTime: listQuery.value.time ? listQuery.value.time[0] : '',
+    endTime: listQuery.value.time ? listQuery.value.time[1] : '',
+  }
+  localWarningRef.value.getList(promes)
+}
+const loading = ref(false)
+const remoteMethod = (query) => {
+  if (query) {
+    loading.value = true
+    tbGsxtZdrySelectList({ ryXm: query }).then(res => {
+      opentions.value = res
+    }).finally(() => {
+      loading.value = false
+    })
+  } else {
+    opentions.value = []
+  }
+}
+const searchArr = ref()
+const resetForm = (formEl) => {
+  listQuery.value = {}
+  localWarningRef.value.getList()
+}
+// // 表格高度计算
+// const tabHeightFn = () => {
+//   pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+//   window.onresize = function () {
+//     tabHeightFn();
+//   };
+// };
+// 搜索栏
+const search = ref(false)
+const openSearch = () => {
+  search.value = !search.value
+  nextTick(() => {
+    tabHeightFn()
+  })
+}
+// 表格高度计算
+const tabHeightFn = () => {
+  if (search.value) {
+    pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+  } else {
+    pageData.tableHeight = window.innerHeight - 250;
+  }
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+// 导出
+
+const exportExcel = () => {
+  const promes = {
+    yjRyxm: listQuery.value.yjRyxm,
+    yjlx: listQuery.value.yjlx,
+    startTime: listQuery.value.time ? listQuery.value.time[0] : '',
+    endTime: listQuery.value.time ? listQuery.value.time[1] : '',
+  }
+  tbYjxxQueryYjxx(promes).then(res => {
+    pageData.tableData = res
+    showDc.value = true
+  })
+
+}
+
+// 处理Excel导出
+const handleExport = () => {
+  // 创建一个临时表格用于导出
+  const tempTable = document.createElement('table');
+
+  // 创建表头
+  const thead = document.createElement('thead');
+  const headerRow = document.createElement('tr');
+
+  // 添加序号列
+  const indexTh = document.createElement('th');
+  indexTh.textContent = '序号';
+  headerRow.appendChild(indexTh);
+
+  // 添加其他列头
+  pageData.tableColumn.forEach(column => {
+    const th = document.createElement('th');
+    th.textContent = column.label;
+    headerRow.appendChild(th);
+  });
+
+  thead.appendChild(headerRow);
+  tempTable.appendChild(thead);
+
+  // 创建表体
+  const tbody = document.createElement('tbody');
+
+  // 处理表格数据
+  pageData.tableData.forEach((row, index) => {
+    const tr = document.createElement('tr');
+    // 添加序号
+    const indexTd = document.createElement('td');
+    indexTd.textContent = index + 1;
+    tr.appendChild(indexTd);
+    // 添加其他单元格数据
+    pageData.tableColumn.forEach(column => {
+      const td = document.createElement('td');
+      // 处理自定义插槽的情况
+      if (column.showSolt) {
+        if (column.prop === 'yjTp') {
+          // 照片字段只显示文字描述
+          td.textContent = '有照片';
+        } else if (column.prop === 'nl') {
+          // 年龄字段
+          td.textContent = IdCard(row.yjRysfzh, 3);
+        } else if (column.prop === 'xb') {
+          // 性别字段
+          td.textContent = IdCard(row.yjRysfzh, 2);
+        } else if (column.prop === 'xsd') {
+          // 相似度字段
+          td.textContent = '90%';
+        } else {
+          // 其他字段
+          td.textContent = row[column.prop] || '';
+        }
+      } else {
+        // 普通字段
+        td.textContent = row[column.prop] || '';
+      }
+
+      tr.appendChild(td);
+    });
+
+    tbody.appendChild(tr);
+  });
+
+  tempTable.appendChild(tbody);
+
+  // 执行Excel导出
+  let xlsxParam = { raw: true };
+  let wb = XLSX.utils.table_to_book(tempTable, xlsxParam);
+  let wbout = XLSX.write(wb, {
+    bookType: "xlsx",
+    bookSST: true,
+    type: "array"
+  });
+
+  // 保存文件
+  try {
+    const exportTime = new Date().toLocaleString('zh-CN').replace(/\//g, '-').replace(/:/g, '-');
+    FileSaver.saveAs(
+      new Blob([wbout], { type: "application/octet-stream" }),
+      `预警数据导出_${exportTime}.xlsx`
+    );
+    showDc.value = false;
+  } catch (e) {
+    console.error('导出Excel失败:', e);
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep .el-table--fit {
+  height: calc(100% - 50px) !important;
+}
+</style>
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+
+.searchBox {
+  background-color: #fff;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/item/items.vue b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/item/items.vue
new file mode 100644
index 0000000..61ad538
--- /dev/null
+++ b/src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/item/items.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="warning-item">
+    <!-- 第一行：图片、姓名、年龄、性别 -->
+    <div class="first-row">
+      <div class="avatar-container">
+        <template v-if="!data.yjTp || data.yjTp.includes('baidu')">
+          <img src="@/assets/images/car.png" width="60" height="70" v-if="data.yjLx == 2" />
+          <img src="@/assets/images/default_male.png" width="60" height="70" v-else />
+        </template>
+        <el-image v-else style="width: 60px; height:70px" :src="data.yjTp" :preview-src-list="[data.yjTp]"
+          show-progress>
+          <template #error>
+            <div class="image-slot error">
+              <img src="@/assets/images/car.png" width="60" height="70" v-if="data.yjLx == 2" />
+              <img src="@/assets/images/default_male.png" width="60" height="70" v-else />
+            </div>
+          </template>
+        </el-image>
+      </div>
+      <div class="basic-info">
+        <div class="info-items  name">姓名：<span>{{ data.yjRyxm }}</span></div>
+        <div class="info-items gender">性别：<span>       {{ IdCard(data.yjRysfzh, 3) }}</span></div>
+        <div class="info-items age">年龄：<span>       {{ IdCard(data.yjRysfzh, 2) }}</span></div>
+      </div>
+    </div>
+
+    <!-- 第二行：其他所有字段 -->
+    <div class="second-row">
+      <div class="info-item title">预警标题：<span>{{ data.yjBt }}</span></div>
+      <div class="info-item level">
+        预警级别：
+         <DictTag :color="bqYs(data.yjJb)" :tag="false" v-model:value="data.yjJb" :options="props.dict.D_BZ_YJJB" />
+        <!-- <span :class="getLevelClass(data.yjJb)">{{ data.yjJb || data.yjLx }}</span> -->
+      </div>
+      <div class="info-item similarity">相似度：<span>{{ data.xsd }}%</span></div>
+    </div>
+    <div class="second-row">
+      <div class="info-item time">预警时间：<span>{{ data.yjSj }}</span></div>
+      <div class="info-item location">预警地点：<span>{{ data.yjDz }}</span></div>
+      <div class="info-item count">预警次数：<span>{{ data.yjCs }}次</span></div>
+    </div>
+    <div class="second-row">
+      <div class="info-item status">
+        处置状态： <DictTag v-model:value="data.czzt" :options="props.dict.D_GSXT_YJXX_CZZT" />
+
+      </div>
+      <div class="info-item phone">布控手机：<span>{{ data.yjRysjh }}</span></div>
+      <div class="info-item car">布控车牌号：<span>{{ data.yjClcph }}</span></div>
+    </div>
+    <div class="second-row">
+      <div class="info-item idcard">布控身份证：<span>{{ data.yjRysfzh }}</span></div>
+      <div class="info-item tag">预警标签：<span>{{ data.yjbqmc }}</span></div>
+      <div class="info-item department">管辖部门：<span>{{ data.ssbm }}</span></div>
+    </div>
+    <div class="second-row">
+      <div class="info-item county">管辖县局：<span>{{ data.ssxgaj }}</span></div>
+      <div class="info-item city">管辖市局：<span>{{ data.sssgaj }}</span></div>
+      <div class="info-item officer">接警员：<span>{{ data.jjyxm }}</span></div>
+    </div>
+    <div class="second-row">
+      <div class="info-item content full-width">预警内容：<span>{{ data.yjNr }}</span></div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, computed } from 'vue'
+import { bqYs } from '@/utils/tools'
+import { IdCard } from '@/utils/validate.js'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => { }
+  },
+  dict: {
+    type: Object,
+    default: () => { }
+  },
+})
+
+</script>
+<style lang="scss" scoped>
+.warning-item {
+  width: 100%;
+  padding: 15px;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  background-color: #fafafa;
+}
+
+.first-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.avatar-container {
+  margin-right: 20px;
+}
+
+.basic-info {
+  display: flex;
+  gap: 30px;
+  align-items: center;
+}
+
+.second-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 10px;
+}
+.info-items {
+  box-sizing: border-box;
+  display: flex;
+  // justify-content: space-between;
+  padding: 5px 0;
+  color: #333;
+
+  span {
+    font-weight: 500;
+    color: #606266;
+  }
+}
+.info-item {
+  flex: 0 0 calc(33.33% - 20px);
+  box-sizing: border-box;
+  display: flex;
+  // justify-content: space-between;
+  padding: 5px 0;
+  color: #333;
+
+  span {
+    font-weight: 500;
+    color: #606266;
+  }
+}
+
+// 特殊字段样式
+.name span {
+  color: #1890ff;
+  font-weight: bold;
+}
+
+// 预警级别颜色
+.level-high span {
+  color: #f56c6c;
+  font-weight: bold;
+}
+
+.level-medium span {
+  color: #e6a23c;
+  font-weight: bold;
+}
+
+.level-low span {
+  color: #67c23a;
+  font-weight: bold;
+}
+
+// 处置状态颜色
+.status-completed span {
+  color: #67c23a;
+  font-weight: bold;
+}
+
+.status-processing span {
+  color: #409eff;
+  font-weight: bold;
+}
+
+.status-pending span {
+  color: #e6a23c;
+  font-weight: bold;
+}
+
+// 全宽字段
+.full-width {
+  flex: 0 0 100% !important;
+}
+
+// 内容字段特殊样式
+.content {
+  flex-direction: column;
+  align-items: flex-start;
+
+  span {
+    margin-top: 5px;
+    padding: 8px 12px;
+    background-color: #f0f9eb;
+    border-radius: 4px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+</style>