feat: 增加导出功能

src/utils/exportExcel.js

@@ -11,6 +11,12 @@ export function easyExport(data, fileName = '导出文件') {
   const wb = XLSX.utils.book_new();
   //  二维数组例子：[ ['姓名', '年龄', '城市'], ['张三', 25, '北京'], ['李四', 30, '上海'] ];
   const ws = XLSX.utils.aoa_to_sheet(data); // aoa_to_sheet 方法将二维数组转换为工作表
+
+
+
+  // 宽度调整
+  ws['!cols'] = Array(data?.[0]?.length || 0).fill({ wpx: 80 });
+
   XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
   XLSX.writeFile(wb, fileName + '.xlsx');
 }

src/views/backOfficeSystem/fourColorManage/warningControl/behaviorWarning/index.vue

@@ -10,6 +10,7 @@
           <span style="vertical-align: middle" v-if="!search">搜索</span>
           <span style="vertical-align: middle" v-else>关闭搜索</span>
         </el-button>
+        <el-button type="primary" @click="exportExl">导出</el-button>
       </PageTitle>
     </div>
     <!-- 搜索 -->
@@ -19,11 +20,12 @@
     <!-- 表格 -->
     <div class="tabBox" :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="true">
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
+        :expand="true" @chooseData="handleChooseData">
         <template #xwcs="{ row }">
           <span style="color: #0072ff;" @click="handleClick(row)">{{ row.xwcs }}</span>
         </template>
-        <template #bqYs="{ row }">
+        <template #bqys="{ row }">
           <DictTag :value="row.bqys" :tag="false" :color="bqYs(row.bqys)" :options="D_GS_SSYJ" />
         </template>
         <template #czzt="{ row }">
@@ -80,6 +82,9 @@ import FkDialog from "@/views/backOfficeSystem/fourColorManage/warningControl/ce
 import { reactive, ref, onMounted, getCurrentInstance, computed, watch, nextTick } from "vue";
 import AddFrom from './components/addFrom.vue'
 import { holographicProfileJump } from "@/utils/tools.js"
+import { getMultiDictVal } from "@/utils/dict.js"
+import { exportExlByObj } from "@/utils/exportExcel.js"
+
 
 const { proxy } = getCurrentInstance();
 const { D_GS_SSYJ, D_GSXT_YJXX_CZZT } = proxy.$dict("D_GS_SSYJ", "D_GSXT_YJXX_CZZT"); //获取字典数据
@@ -90,6 +95,8 @@ const dict = ref({
   D_GSXT_YJXX_CZZT
 })
 const searchBox = ref(); //搜索框
+/** 选中项 */
+const selectRows = ref([])
 const bqLbData = ref({
   bqXl: []
 })
@@ -112,7 +119,7 @@ const pageData = reactive({
   keyCount: 0,
   tableConfiger: {
     rowHieght: 61,
-    showSelectType: "null",
+    showSelectType: "checkBox",
     loading: false,
     haveControls: true
   },
@@ -130,7 +137,7 @@ const pageData = reactive({
     { label: "行为子类", prop: "xwzlmc", showOverflowTooltip: true },
     { label: "行为描述", prop: "xwms", showOverflowTooltip: true },
     { label: "行为次数", prop: "xwcs", showSolt: true },
-    { label: "行为颜色", prop: "bqYs", showSolt: true },
+    { label: "行为颜色", prop: "bqys", showSolt: true },
     { label: "行为分值", prop: "xwfz", },
     { label: "处置状态", prop: "czzt", showSolt: true },
     { label: "所属县局", prop: "ssbm" },
@@ -298,6 +305,39 @@ const tabHeightFn = () => {
     tabHeightFn();
   };
 };
+
+
+/** 触发选中 */
+const handleChooseData = (val) => {
+  selectRows.value = val
+}
+const exportExl = () => {
+  const titleObj = {
+    xm: "姓名",
+    sfzh: "身份证号",
+    dh: "电话",
+    xldlmc: "行为大类",
+    xwzlmc: "行为子类",
+    xwms: "行为描述",
+    xwcs: "行为次数",
+    bqys_cname: "行为颜色",
+    xwfz: "行为分值",
+    czzt_cname: "处置状态",
+    ssbm: "所属县局",
+  }
+  /** 导出【选中】的数据 （没有就全部）*/
+  const needArr = selectRows.value?.length > 0 ? selectRows.value : pageData.tableData
+  const data = needArr.map(item => {
+    return {
+      ...item,
+      bqys_cname: getMultiDictVal(item.bqys, D_GS_SSYJ),
+      czzt_cname: getMultiDictVal(item.czzt, D_GSXT_YJXX_CZZT),
+    }
+  })
+  exportExlByObj(titleObj, data, '行为预警')
+
+}
+
 </script>
 
 <style>

src/views/backOfficeSystem/fourColorManage/warningControl/combinedWarning/index.vue

@@ -10,6 +10,7 @@
           <span style="vertical-align: middle" v-if="!search">搜索</span>
           <span style="vertical-align: middle" v-else>关闭搜索</span>
         </el-button>
+        <el-button type="primary" @click="exportExl">导出</el-button>
       </PageTitle>
     </div>
     <!-- 搜索 -->
@@ -20,7 +21,7 @@
     <div class="tabBox" :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="true">
+        :expand="true"  @chooseData="handleChooseData">
         <template #sfcs="{ row }">
           <span style="color: #0072ff;" @click="handleClick(row)">{{ row.sfcs }}</span>
         </template>
@@ -76,7 +77,10 @@ import AddFrom from "./components/addFrom.vue";
 import { reactive, ref, onMounted, getCurrentInstance, watch, nextTick } from "vue";
 import { qcckGet, qcckPost } from "@/api/qcckApi.js";
 import Detail from './components/detail.vue'
+import { exportExlByObj } from "@/utils/exportExcel.js"
+import { getMultiDictVal } from "@/utils/dict.js"
 import emitter from "@/utils/eventBus.js";
+
 const searchBox = ref();
 const { proxy } = getCurrentInstance();
 const { D_GSXT_YJXX_CZZT, D_GS_SSYJ, D_BZ_YJJB } = proxy.$dict("D_GSXT_YJXX_CZZT", "D_GS_SSYJ", "D_BZ_YJJB");
@@ -197,6 +201,8 @@ const handleClick = (row) => {
   detailRef.value.init(row)
 }
 const assessShow = ref(false)
+/** 选中项 */
+const selectRows = ref([])
 const dataList = ref()
 const pushAssess = (val) => {
   return holographicProfileJump(val?.sfzh) // 全息档案跳转
@@ -272,6 +278,39 @@ const tabHeightFn = () => {
     tabHeightFn();
   };
 };
+
+
+const handleChooseData = (val) => {
+  selectRows.value = val
+}
+const exportExl = () => {
+
+  const titleObj = {
+    xm: "姓名",
+    sfzh: "身份证号",
+    dh: "电话",
+    sfdlmc: "组合大类",
+    sfzlmc: "组合小类",
+    sfcs: "组合次数",
+    bqys_cname: "标签颜色",
+    yjsj: "预警时间",
+    sffz: "预警分值",
+    czzt_cname: "处置状态",
+    ssbm: "所属县局",
+  }
+  /** 导出【选中】的数据 （没有就全部）*/
+  const needArr = selectRows.value?.length > 0 ? selectRows.value : pageData.tableData
+  const data = needArr.map(item => {
+    return {
+      ...item,
+      bqys_cname: getMultiDictVal(item.bqys, D_GS_SSYJ),
+      czzt_cname: getMultiDictVal(item.czzt, D_GSXT_YJXX_CZZT),
+    }
+  })
+  exportExlByObj(titleObj, data, '组合预警')
+
+}
+
 </script>
 
 <style>

src/views/backOfficeSystem/fourColorManage/warningControl/identityWarning/index.vue

@@ -10,6 +10,7 @@
           <span style="vertical-align: middle" v-if="!search">搜索</span>
           <span style="vertical-align: middle" v-else>关闭搜索</span>
         </el-button>
+        <el-button type="primary" @click="exportExl">导出</el-button>
       </PageTitle>
     </div>
     <!-- 搜索 -->
@@ -31,7 +32,8 @@
     <!-- 表格 -->
     <div class="tabBox" :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>
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth" expand
+        @chooseData="handleChooseData">
         <template #expand="{ props }">
           <div class="expand-content" style="max-width: 100%">
             <Items :row="props || {}" :dict="dict" />
@@ -91,11 +93,13 @@ import { watch } from "vue";
 import emitter from "@/utils/eventBus.js";
 import { holographicProfileJump } from "@/utils/tools.js"
 import Items from "./item/items.vue"
+import { exportExlByObj } from "@/utils/exportExcel.js"
+import { getMultiDictVal } from "@/utils/dict.js"
 
 const { proxy } = getCurrentInstance();
 const searchBox = ref();
 const { D_GSXT_YJXX_CZZT, D_GS_SSYJ } = proxy.$dict("D_GSXT_YJXX_CZZT", "D_GS_SSYJ")
-const dict = reactive({D_GSXT_YJXX_CZZT, D_GS_SSYJ})
+const dict = reactive({ D_GSXT_YJXX_CZZT, D_GS_SSYJ })
 // 搜索配置
 const searchConfiger = ref([
   { label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input" },
@@ -163,8 +167,16 @@ const getList = () => {
   pageData.tableConfiger.loading = true;
   // TODO: 替换为实际的身份预警API接口
   yjzxSfyjSelectList(queryFrom.value).then((res) => {
-    pageData.tableData = res.records || [];
-    pageData.total = res.total || 0;
+    pageData.tableData = Array.isArray(res?.records) ? res.records : [];
+    pageData.tableData = pageData.tableData.map(item => {
+      return {
+        ...item,
+        bqys_cname: getMultiDictVal(item.bqys, D_GS_SSYJ),
+        czzt_cname: getMultiDictVal(item.czzt, D_GSXT_YJXX_CZZT),
+      }
+
+    })
+    pageData.total = res?.total || 0;
     pageData.tableConfiger.loading = false;
   }).catch(() => {
     pageData.tableConfiger.loading = false;
@@ -298,6 +310,38 @@ const tabHeightFn = () => {
     tabHeightFn();
   };
 };
+/** 选中项 */
+const selectRows = ref([])
+const handleChooseData = (val) => {
+  selectRows.value = val
+}
+const exportExl = () => {
+  const titleObj = {
+    xm: "姓名",
+    sfzh: "身份证号",
+    dh: "电话",
+    sfdlmc: "组合大类",
+    sfzlmc: "组合小类",
+    sfcs: "组合次数",
+    bqys_cname: "标签颜色",
+    yjsj: "预警时间",
+    sffz: "预警分值",
+    czzt_cname: "处置状态",
+    ssbm: "所属县局",
+  }
+  /** 导出【选中】的数据 （没有就全部）*/
+  const needArr = selectRows.value?.length > 0 ? selectRows.value : pageData.tableData
+  const data = needArr.map(item => {
+    return {
+      ...item,
+      bqys_cname: getMultiDictVal(item.bqys, D_GS_SSYJ),
+      czzt_cname: getMultiDictVal(item.czzt, D_GSXT_YJXX_CZZT),
+    }
+  })
+  exportExlByObj(titleObj, data, '身份预警')
+
+}
+
 </script>
 
 <style>

src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/components/localWarning.vue

@@ -4,7 +4,7 @@
     <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">
+        :expand="true" @chooseData="handleChooseData">
         <template #expand="{ props }">
           <div class="expand-content" style="max-width: 100%">
             <Items :data="props" :dict="dict" />
@@ -85,6 +85,10 @@ import { holographicProfileJump } from "@/utils/tools.js"
 
 import { qcckGet, qcckPost } from "@/api/qcckApi.js";
 import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+import { exportExlByObj } from "@/utils/exportExcel.js"
+import { getMultiDictVal } from "@/utils/dict.js"
+
+
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   dict: {
@@ -97,6 +101,10 @@ const props = defineProps({
   }, search: {
     type: Boolean,
     default: false
+  },
+  excelTitle: {
+    type: String,
+    default: '预警信息'
   }
 });
 const pageData = reactive({
@@ -104,7 +112,7 @@ const pageData = reactive({
   keyCount: 0,
   tableConfiger: {
     rowHieght: 61,
-    showSelectType: "null",
+    showSelectType: "checkBox",
     loading: false,
     haveControls: true
   },
@@ -131,8 +139,8 @@ const pageData = reactive({
 });
 
 
-
-
+/** 选中项 */
+const selectRows = ref([])
 
 
 
@@ -243,7 +251,49 @@ const getRowClassName = (row) => {
 //     tabHeightFn();
 //   };
 // };
+
+
+const handleChooseData = (val) => {
+  selectRows.value = val
+}
+const exportExl = () => {
+
+  const titleObj = {
+    czzt_cname: "处置状态",
+    yjSj: "预警时间",
+    yjRyxm: "姓名",
+    nl_cname: "年龄", // IdCard(row.yjRysfzh, 3)
+    yjLylx: "数据来源",
+    xb_cname: "性别",
+    yjJb_cname: "预警级别",
+    xsd_cname: "相似度",
+    yjDz: "预警地点",
+    yjCs: "预警次数",
+    yjRysjh: "布控手机号",
+    yjClcph: "布控车牌号",
+    yjRysfzh: "身份证",
+
+  }
+  /** 导出【选中】的数据 （没有就全部）*/
+  const needArr = selectRows.value?.length > 0 ? selectRows.value : pageData.tableData
+  const data = needArr.map(item => {
+    return {
+      ...item,
+      nl_cname: IdCard(item.yjRysfzh, 3),
+      xb_cname: IdCard(item.yjRysfzh, 2),
+      xsd_cname: (item.xsd > 0 ? item.xsd : 0) + '%',
+      czzt_cname: getMultiDictVal(item.czzt, props.dict.D_GSXT_YJXX_CZZT),
+      yjJb_cname: getMultiDictVal(item.yjJb, props.dict.D_BZ_YJJB),
+
+    }
+  })
+  exportExlByObj(titleObj, data, props.excelTitle || '人像预警.xlsx')
+
+}
+
+
 defineExpose({
+  exportExl,
   getList
 })
 </script>

src/views/backOfficeSystem/fourColorManage/warningList/portraitWarning/index.vue

@@ -8,6 +8,7 @@
           <span style="vertical-align: middle" v-if="!search">搜索</span>
           <span style="vertical-align: middle" v-else>关闭搜索</span>
         </el-button>
+        <el-button type="primary" @click="exportExl">导出</el-button>
       </PageTitle>
     </div>
     <!-- 搜索 -->
@@ -32,9 +33,9 @@
     </div>
     <!-- 表格 -->
     <div class="tabBox" :style="{ height: (pageData.tableHeight + 40) + 'px', paddingTop: '10px' }">
-      <div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div>
-      <LocalWarning :maxHeight="search ? (pageData.tableHeight - 200) : (pageData.tableHeight - 150)"
-        ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search" />
+      <!-- <div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div> -->
+      <LocalWarning :maxHeight="search ? (pageData.tableHeight - 160) : (pageData.tableHeight - 110)"
+        ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search" excelTitle="人像预警" />
     </div>
   </div>
   <el-dialog v-model="showDc" title="导出预警" width="80%">
@@ -99,6 +100,8 @@ 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_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT } = proxy.$dict("D_GSXT_YJXX_CZZT", "D_BZ_YJJB", "D_BZ_YJLYXT")
 const searchBox = ref(); //搜索框
@@ -131,6 +134,8 @@ const shortcuts = [
     },
   },
 ]
+
+
 const pageData = reactive({
   /** 表格高度 */
   tableHeight: 600,
@@ -344,6 +349,10 @@ const handleExport = () => {
     console.error('导出Excel失败:', e);
   }
 }
+
+const exportExl = () => {
+  localWarningRef.value && localWarningRef.value.exportExl()
+};
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-table--fit {

src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/components/localWarning.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <!-- 表格 -->
-    <div class="tabBox" :style="{height:!search?maxHeight+200+'px':(maxHeight+150)+'px'}">
-      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="maxHeight+'px'"
+    <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" >
+        :expand="true" @chooseData="handleChooseData">
         <template #expand="{ props }">
           <div class="expand-content" style="max-width: 100%">
-           <Items :data="props" :dict="dict" />
+            <Items :data="props" :dict="dict" />
           </div>
         </template>
         <template #yjTp="{ row }">
@@ -54,7 +54,7 @@
       <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="{
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="maxHeight + 100" :pageConfiger="{
         ...pageData.pageConfiger,
         total: pageData.total
       }"></Pages>
@@ -82,9 +82,12 @@ 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 { exportExlByObj } from "@/utils/exportExcel.js"
+import { getMultiDictVal } from "@/utils/dict.js"
 import { qcckGet, qcckPost } from "@/api/qcckApi.js";
 import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+
+
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   dict: {
@@ -104,7 +107,7 @@ const pageData = reactive({
   keyCount: 0,
   tableConfiger: {
     rowHieght: 61,
-    showSelectType: "null",
+    showSelectType: "checkBox",
     loading: false,
     haveControls: true
   },
@@ -116,13 +119,13 @@ const pageData = reactive({
   }, //分页
   controlsWidth: 300, //操作栏宽度
   tableColumn: [
-    { label: "预警图片", prop: "yjTp", showSolt: true,width: 100 },
+    { 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: "nl", showSolt: true, width: 80 },
     { label: "数据来源", prop: "yjLylx", showOverflowTooltip: true },
-   { label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
+    { label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
     // { label: "预警级别", prop: "yjJb", showSolt: true },
     // { label: "相似度", prop: "xsd", showSolt: true },
     { label: "布控车牌号", prop: "yjClcph", showOverflowTooltip: true },
@@ -131,7 +134,8 @@ const pageData = reactive({
 });
 
 
-
+/** 选中项 */
+const selectRows = ref([])
 
 
 
@@ -243,8 +247,48 @@ const getRowClassName = (row) => {
 //     tabHeightFn();
 //   };
 // };
+
+
+const handleChooseData = (val) => {
+  selectRows.value = val
+}
+const exportExl = () => {
+  const titleObj = {
+    czzt_cname: "处置状态",
+    yjSj: "预警时间",
+    yjRyxm: "姓名",
+    nl_cname: "年龄", // IdCard(row.yjRysfzh, 3)
+    yjLylx: "数据来源",
+    xb_cname: "性别",
+    yjJb_cname: "预警级别",
+    xsd_cname: "相似度",
+    yjDz: "预警地点",
+    yjCs: "预警次数",
+    yjRysjh: "布控手机号",
+    yjClcph: "布控车牌号",
+    yjRysfzh: "身份证",
+
+  }
+  /** 导出【选中】的数据 （没有就全部）*/
+  const needArr = selectRows.value?.length > 0 ? selectRows.value : pageData.tableData
+  const data = needArr.map(item => {
+    return {
+      ...item,
+      nl_cname: IdCard(item.yjRysfzh, 3),
+      xb_cname: IdCard(item.yjRysfzh, 2),
+      xsd_cname: (item.xsd > 0 ? item.xsd : 0) + '%',
+      czzt_cname: getMultiDictVal(item.czzt, props.dict.D_GSXT_YJXX_CZZT),
+      yjJb_cname: getMultiDictVal(item.yjJb, props.dict.D_BZ_YJJB),
+
+    }
+  })
+  exportExlByObj(titleObj, data, props.excelTitle || '预警.xlsx')
+
+}
+
 defineExpose({
-  getList
+  getList,
+  exportExl
 })
 </script>
 
@@ -252,6 +296,7 @@ defineExpose({
 .el-loading-mask {
   background: rgba(0, 0, 0, 0.5) !important;
 }
+
 /* 预警级别行样式 */
 .warning-level-01 {
   background-color: rgba(255, 2, 2, 0.1) !important;
@@ -260,6 +305,7 @@ defineExpose({
 .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;
 }
@@ -267,6 +313,7 @@ defineExpose({
 .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;
 }
@@ -274,6 +321,7 @@ defineExpose({
 .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;
 }
@@ -281,6 +329,7 @@ defineExpose({
 .warning-level-04:hover {
   background-color: rgba(0, 0, 255, 0.15) !important;
 }
+
 /* 确保行样式应用到所有单元格 */
 .warning-level-01 td,
 .warning-level-02 td,

src/views/backOfficeSystem/fourColorManage/warningList/vehicleWarning/index.vue

@@ -8,6 +8,7 @@
           <span style="vertical-align: middle" v-if="!search">搜索</span>
           <span style="vertical-align: middle" v-else>关闭搜索</span>
         </el-button>
+        <el-button type="primary" @click="exportExl">导出</el-button>
       </PageTitle>
     </div>
     <!-- 搜索 -->
@@ -29,9 +30,9 @@
     </div>
     <!-- 表格 -->
     <div class="tabBox" :style="{ height: (pageData.tableHeight + 40) + 'px', paddingTop: '10px' }">
-      <div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div>
-      <LocalWarning :maxHeight="search ? (pageData.tableHeight - 200) : (pageData.tableHeight - 150)"
-        ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search" />
+      <!-- <div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div> -->
+      <LocalWarning :maxHeight="search ? (pageData.tableHeight - 160) : (pageData.tableHeight - 110)"
+        ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search" excelTitle="车辆预警" />
     </div>
   </div>
   <el-dialog v-model="showDc" title="导出预警" width="80%">
@@ -129,7 +130,7 @@ const shortcuts = [
   },
 ]
 const pageData = reactive({
-   /** 表格高度 */
+  /** 表格高度 */
   tableHeight: 600,
   tableData: [], //表格数据
   keyCount: 0,
@@ -341,6 +342,11 @@ const handleExport = () => {
     console.error('导出Excel失败:', e);
   }
 }
+
+const exportExl = () => {
+  localWarningRef.value && localWarningRef.value.exportExl()
+};
+
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-table--fit {