diff --git a/src/components/NavigationBar/peopleCentre.vue b/src/components/NavigationBar/peopleCentre.vue
index 3a144ad..807d0ab 100644
--- a/src/components/NavigationBar/peopleCentre.vue
+++ b/src/components/NavigationBar/peopleCentre.vue
@@ -146,7 +146,7 @@
         </el-input>
         <el-button type="text" @click="handleSearch()">搜索</el-button>
         <el-button type="text" @click="handleReset()">重置</el-button>
-        <el-button type="text">导出</el-button>
+        <el-button type="text" @click="handleExport()">导出</el-button>
       </div>
     </div>
 
@@ -202,6 +202,7 @@ import { handleTreeId } from "@/utils/findTreeId.js";
 import { treeselect } from "@/api/system/dept"; //部门
 import { mapGetters } from "vuex";
 import ColorCell from "@/components/ColorCell";
+import { exportSearch } from "@/api/home/index.js"; //预警
 export default {
   dicts: ["b_color_type"],
   components: { ColorCell },
@@ -330,6 +331,36 @@ export default {
       this.load();
     },
 
+    /**
+     * 导出
+     */
+    handleExport() {
+      if (this.list.length == 0) {
+        this.$message({
+          message: "没有数据可导出！",
+          type: "warning",
+        });
+        return;
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: "正在生成excel，请稍候",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      this.$modal
+        .confirm("是否确认导出所有数据项？")
+        .then(() => {
+          return exportSearch(this.queryParams);
+        })
+        .then((response) => {
+          this.$download.name(response.msg);
+          loading.close();
+        })
+        .catch(() => {
+          loading.close();
+        });
+    },
     /**
      * 重置操作
      */
diff --git a/src/components/NavigationBar/recycleCentre.vue b/src/components/NavigationBar/recycleCentre.vue
index 075cccd..fb85e21 100644
--- a/src/components/NavigationBar/recycleCentre.vue
+++ b/src/components/NavigationBar/recycleCentre.vue
@@ -1,9 +1,662 @@
 <template>
-  <div>回收</div>
+  <div class="search-container">
+    <div class="option-rows">
+      <el-select
+        @change="changeSelect($event, 'xiaoquList')"
+        v-model="queryParams.shequId"
+        placeholder="选择社区"
+        clearable
+      >
+        <el-option
+          v-for="item in deptList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.xiaoquId"
+        placeholder="选择小区"
+        @change="changeSelect($event, 'netList')"
+        clearable
+      >
+        <el-option
+          v-for="item in xiaoquList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="option-rows">
+      <el-select
+        v-model="queryParams.parentid"
+        placeholder="选择网格"
+        @change="changeSelect($event, 'yuanList')"
+        clearable
+      >
+        <el-option
+          v-for="item in netList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.yuanid"
+        placeholder="选择苑"
+        @change="changeSelect($event, 'buildingList')"
+        clearable
+      >
+        <el-option
+          v-for="item in yuanList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.buildingId"
+        placeholder="选择楼栋"
+        @change="changeSelect($event, 'houseList')"
+        clearable
+      >
+        <el-option
+          v-for="item in buildingList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="queryParams.houseid" placeholder="选择住户" clearable>
+        <el-option
+          v-for="item in houseList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="option-rows">
+      <el-button type="text" @click="handleSearch()">搜索</el-button>
+      <el-button type="text" @click="handleReset()">重置</el-button>
+      <el-button type="text" @click="handleExport()">导出</el-button>
+    </div>
+    <!-- <div class="option-rows">
+      <el-select
+        v-model="colorList"
+        placeholder="选择分色"
+        multiple
+        collapse-tags
+        clearable
+      >
+        <el-option
+          v-for="dict in dict.type.b_color_type"
+          :key="dict.value"
+          :label="dict.label"
+          :value="dict.value"
+        >
+        </el-option>
+      </el-select>
+
+      <el-radio v-model="queryParams.mark" label="">全部</el-radio>
+      <el-radio v-model="queryParams.mark" label="ninety">3个月</el-radio>
+      <el-radio v-model="queryParams.mark" label="eighty">半年</el-radio>
+
+  
+
+      <el-checkbox-group v-model="isCheck">
+        <el-checkbox label="中共党员"> </el-checkbox>
+        <el-checkbox label="帮扶对象"> </el-checkbox>
+        <el-checkbox label="重点人群"> </el-checkbox>
+        <el-checkbox label="退役军人"> </el-checkbox>
+      </el-checkbox-group>
+    </div> -->
+    <!-- <div class="three-option">
+      <div class="option-list">
+        <div
+          class="option-list-item"
+          v-for="(item, index) in tabList"
+          :key="index"
+          @click="handleClick(index)"
+          :class="currentIndex == index ? 'activeItme' : ''"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="option-input">
+        <el-select
+          v-model="credentialnoType"
+          v-show="currentIndex == 0"
+          class="input-general-width"
+        >
+          <el-option
+            v-for="item in optionList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+
+        <el-input
+          prefix-icon="el-icon-search"
+          placeholder="请输入内容"
+          v-model="keyWord"
+          class="input-big-width"
+        >
+        </el-input>
+        <el-button type="text" @click="handleSearch()">搜索</el-button>
+        <el-button type="text" @click="handleReset()">重置</el-button>
+        <el-button type="text" @click="handleExport()">导出</el-button>
+      </div>
+    </div> -->
+
+    <div class="result-list">
+      <div class="list-header">
+        <div class="header-left-total">搜索结果列表</div>
+        <div class="header-rigth-total">共{{ total }}条数据</div>
+      </div>
+      <div class="list-table">
+        <div class="table-header">
+          <div class="table-cell0">序号</div>
+          <div class="table-cell1">姓名</div>
+          <div class="table-cell1">手机号</div>
+          <div class="table-cell1">证件号</div>
+
+          <div class="table-cell1">分色</div>
+          <div class="table-cell1">操作</div>
+        </div>
+        <div class="table-body" style="overflow: auto" v-infinite-scroll="load">
+          <div
+            class="body-rows"
+            v-for="(item, index) in list"
+            :key="'rows' + index"
+          >
+            <div class="table-cell0">{{ index + 1 }}</div>
+            <div class="table-cell1">{{ item.name }}</div>
+            <div class="table-cell1">
+              {{ item.phone }}
+            </div>
+
+            <div class="table-cell1">{{ item.credentialNo }}</div>
+            <div class="table-cell1 cell-flex">
+              <ColorCell :item="item" />
+              <span style="margin-left: 3px">{{ item.color }}</span>
+            </div>
+            <div class="table-cell1">
+              <div class="recover" @click.stop="addClcik(item)">
+                <span>恢复</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {};
+import {
+  getRecycleList,
+  exportHuishou,
+  getNetWorkId,
+  recoverData,
+  removeData,
+} from "@/api/home/index.js"; //回收
+import { addPerson } from "@/api/taicangpop/person";
+import { handleTreeId } from "@/utils/findTreeId.js";
+import { treeselect } from "@/api/system/dept"; //部门
+import { mapGetters } from "vuex";
+import ColorCell from "@/components/ColorCell";
+export default {
+  dicts: ["b_color_type"],
+  components: { ColorCell },
+  computed: {
+    ...mapGetters(["leftColor", "rightTopColor", "userId"]),
+  },
+  data() {
+    return {
+      input3: "",
+      currentIndex: 0,
+      credentialnoType: 0,
+      // tabList: [
+      //   { name: "身份证", value: 0 },
+      //   { name: "手机号", value: 1 },
+      //   { name: "姓名", value: 2 },
+      // ],
+      // optionList: [
+      //   { name: "完整身份证号", value: 0 },
+      //   { name: "省级(前2位)", value: 1 },
+      //   { name: "市级(前4位)", value: 2 },
+      //   { name: "县级(前6位)", value: 3 },
+      // ],
+      isCheck: [],
+      isList: [
+        { name: "中共党员", key: "isd" },
+        { name: "帮扶对象", key: "isk" },
+        { name: "退役军人", key: "isj" },
+        { name: "重点人群", key: "isx" },
+      ],
+      radio: "",
+      value: "",
+      keyWord: "",
+      colorList: [],
+      queryParams: {
+        shequId: undefined,
+        xiaoquId: undefined,
+        parentid: undefined,
+        yuanid: undefined,
+        buildingId: undefined,
+        houseid: undefined,
+        // isd: undefined, //党员
+        // isk: undefined, //帮扶
+        // isj: undefined, //退伍
+        // isx: undefined, //重点
+        // credentialno: undefined, //身份证(全)
+        // cre1: undefined, //身份证(2)
+        // cre2: undefined, //身份证(4)
+        // cre3: undefined, //身份证(6)
+        // phone: undefined,
+        // name: undefined,
+        color: undefined,
+        // type: undefined,
+        mark: "",
+        pageNum: 1,
+        pageSize: 10,
+      },
+      deptList: [],
+      xiaoquList: [],
+      netList: [],
+      yuanList: [],
+      buildingList: [],
+      houseList: [],
+      list: [],
+      houseTotal: 0,
+      total: 0,
+      objList: [
+        { key: "deptList", value: "shequId" },
+        { key: "xiaoquList", value: "xiaoquId" },
+        { key: "netList", value: "parentid" },
+        { key: "yuanList", value: "yuanid" },
+        { key: "buildingList", value: "buildingId" },
+        { key: "houseList", value: "houseid" },
+      ],
+    };
+  },
+  mounted() {
+    this.getDeptList();
+  },
+  methods: {
+    /**
+     * 恢复
+     */
+    /**恢复 */
+    addClcik(item) {
+      console.warn("恢复数据", item.deleteUserId, this.userId);
+      if (item.deleteUserId != this.userId) {
+        this.$message.error("您没有权限恢复该条记录！");
+      } else {
+        this.$modal
+          .confirm("您确定要恢复该条记录吗？")
+          .then(() => {
+            delete item.id;
+            return addPerson(item);
+          })
+          .then(() => {
+            removeData(item.personId);
+          })
+          .then(() => {
+            this.handleSearch();
+          })
+          .then(() => {
+            this.$message({
+              message: "恢复成功",
+              type: "success",
+            });
+          })
+          .catch(() => {});
+      }
+    },
+    /**获取树部门 */
+    async getDeptList() {
+      let result = await treeselect();
+      this.deptList = result.data[0].children;
+      console.log(result);
+    },
+    /**
+     * 级联筛选
+     */
+    changeSelect(e, key) {
+      let list = [];
+      let index = this.objList.findIndex((item) => item.key == key);
+      if (index > -1) {
+        list = this.objList.slice(index);
+      }
+      list.map((item) => {
+        this.queryParams[item.value] = undefined;
+      });
+      this[key] = handleTreeId(e, this.deptList);
+    },
+
+    /**
+     * 搜索
+     */
+    handleSearch() {
+      this.reset();
+      //分色
+      this.queryParams.color = this.colorList.toString();
+      console.log(this.queryParams.color);
+      //处理四个is
+      // this.isCheck.forEach((item) => {
+      //   let index = this.isList.findIndex((it) => it.name == item);
+      //   if (index > -1) {
+      //     this.queryParams[this.isList[index].key] = 1;
+      //   }
+      // });
+      //三个tab搜索
+      // if (this.currentIndex == 0) {
+      //   if (this.credentialnoType == 0) {
+      //     this.queryParams.credentialno = this.keyWord;
+      //   } else {
+      //     this.queryParams["cre" + this.credentialnoType] = this.keyWord;
+      //   }
+      // }
+      // if (this.currentIndex == 1) this.queryParams.phone = this.keyWord;
+      // if (this.currentIndex == 2) this.queryParams.name = this.keyWord;
+
+      this.load();
+    },
+    /**
+     * 导出
+     */
+    handleExport() {
+      if (this.list.length == 0) {
+        this.$message({
+          message: "没有数据可导出！",
+          type: "warning",
+        });
+        return;
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: "正在生成excel，请稍候",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      this.$modal
+        .confirm("是否确认导出所有数据项？")
+        .then(() => {
+          return exportHuishou(this.queryParams);
+        })
+        .then((response) => {
+          this.$download.name(response.msg);
+          loading.close();
+        })
+        .catch(() => {
+          loading.close();
+        });
+    },
+
+    /**
+     * 重置操作
+     */
+    handleReset() {
+      this.keyWord = "";
+      this.credentialnoType = 0;
+      this.queryParams.mark = "";
+      // this.queryParams.type = undefined;
+      this.queryParams.shequId = undefined;
+      this.queryParams.xiaoquId = undefined;
+      this.queryParams.parentid = undefined;
+      this.queryParams.yuanid = undefined;
+      this.queryParams.buildingId = undefined;
+      this.queryParams.houseid = undefined;
+
+      this.colorList = [];
+      // this.isCheck = [];
+      this.reset();
+      this.load();
+    },
+    /**
+     * 三个输入方式
+     */
+    handleClick(index) {
+      if (this.currentIndex == index) return;
+      this.keyWord = "";
+      this.currentIndex = index;
+    },
+    /**
+     * 加载更多
+     */
+    load() {
+      if (this.list.length > 0 && this.list.length >= this.total) return;
+      this.getList();
+    },
+    /**
+     * 获取list
+     */
+    async getList() {
+      let result = await getRecycleList(this.queryParams);
+      let handleColor = this.handleColor(result.rows);
+      this.list = [...this.list, ...handleColor];
+
+      this.total = result.total;
+      this.queryParams.pageNum++;
+    },
+
+    /**
+     * 处理颜色
+     */
+    handleColor(list) {
+      let arr = list.map((item) => {
+        item.personInfo = JSON.parse(item.personInfo);
+        item.personInfo.deleteUserId = item.deleteUserId;
+        item.personInfo.personId = item.id;
+        if (!item.personInfo.color) {
+          item.personInfo.leftColor = "#7b75ff";
+          item.personInfo.rightTopColor = "#7b75ff";
+        } else {
+          for (let key in this.leftColor) {
+            if (item.personInfo.color == key) {
+              item.personInfo.leftColor = this.leftColor[key];
+              item.personInfo.rightTopColor = this.rightTopColor[key];
+            }
+          }
+        }
+
+        item = item.personInfo;
+        return item;
+      });
+      console.log(arr);
+      return arr;
+    },
+
+    /**
+     * 重置
+     */
+    reset() {
+      // this.queryParams.isd = undefined; //党员
+      // this.queryParams.isk = undefined; //帮扶
+      // this.queryParams.isj = undefined; //退伍
+      // this.queryParams.isx = undefined; //重点
+      // this.queryParams.credentialno = undefined; //身份证(全)
+      // this.queryParams.cre1 = undefined; //身份证(2)
+      // this.queryParams.cre2 = undefined; //身份证(4)
+      // this.queryParams.cre3 = undefined; //身份证(6)
+      // this.queryParams.phone = undefined;
+      // this.queryParams.name = undefined;
+      this.queryParams.color = undefined; //分色
+
+      this.queryParams.pageNum = 1;
+      this.queryParams.pageSize = 10;
+
+      this.list = [];
+      this.houseTotal = 0;
+      this.total = 0;
+    },
+  },
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.search-container {
+  margin-top: 10px;
+  flex: 1;
+  ::v-deep .option-rows {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #003869;
+    padding: 15px 0;
+    .el-select {
+      margin-right: 10px;
+      width: 150px;
+    }
+    .el-radio-group {
+      margin: 0 30px 0 10px;
+    }
+    .el-checkbox__label,
+    .el-radio__label {
+      font-size: 16px;
+      color: #aabace;
+      font-weight: 500;
+      font-family: "Alibaba-PuHuiTi-Regular.otf";
+    }
+  }
+  .three-option {
+    margin-top: 15px;
+
+    .option-list {
+      position: relative;
+      top: 2px;
+      left: 0;
+      display: flex;
+      align-items: center;
+      & > div {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        text-align: center;
+        line-height: 40px;
+        margin-right: 8px;
+        background: #0059a2;
+        border-radius: 4px 4px 0px 0px;
+        font-size: 16px;
+        color: #aee0ff;
+        font-weight: 400;
+        font-family: "Alibaba-PuHuiTi-Regular.otf";
+      }
+    }
+    .option-input {
+      height: 80px;
+      background: #042854;
+      border: 1px solid #006cc5;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      .input-general-width {
+        margin-right: 10px;
+      }
+      .input-big-width {
+        width: 300px;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .result-list {
+    margin-top: 15px;
+    .list-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 16px;
+      .header-left-total {
+        color: #ffa11b;
+        font-weight: 500;
+        font-family: "Alibaba-PuHuiTi-Medium.otf";
+      }
+      .header-rigth-total {
+        color: #aacfff;
+        font-weight: 400;
+        font-family: "Alibaba-PuHuiTi-Regular.otf";
+      }
+    }
+    .list-table {
+      margin-top: 10px;
+      .table-header {
+        padding: 5px 0;
+        font-size: 16px;
+        color: #eff8ff;
+        background: linear-gradient(90deg, #007b9f, #0066d8);
+        font-family: "Alibaba-PuHuiTi-Regular.otf";
+      }
+      .table-body {
+        height: 350px;
+
+        .body-rows {
+          padding: 7px 0;
+          font-size: 14px;
+          color: #ffffff;
+          font-family: "Alibaba-PuHuiTi-Medium.otf";
+        }
+        & > .body-rows:nth-child(even) {
+          background: #033159;
+        }
+      }
+      .table-header,
+      .body-rows {
+        display: flex;
+        align-items: center;
+        & > div {
+          text-align: center;
+        }
+        .table-cell0 {
+          width: 50px;
+        }
+        .table-cell1 {
+          flex: 1;
+        }
+        .table-cell2 {
+          flex: 2;
+        }
+        .cell-flex {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  .el-button {
+    font-size: 14px;
+    color: #cdfbff;
+    font-weight: 400;
+    background: url("~@/assets/images/ui/btn_bg.png");
+    background-size: 100% 100%;
+    padding: 12px 20px 14px 20px;
+    font-family: "Alibaba-PuHuiTi-Regular.otf";
+  }
+}
+.activeItme {
+  color: #ffffff !important;
+  border: 1px solid #006cc5 !important;
+  border-bottom: 0 !important;
+  background: #042854 !important;
+}
+.recover {
+  span {
+    padding: 3px 8px;
+    background: #007f54;
+    color: white;
+    cursor: pointer;
+    border-radius: 3px;
+  }
+}
+</style>
diff --git a/src/components/NavigationBar/warningCentre.vue b/src/components/NavigationBar/warningCentre.vue
index dd284c8..30391c8 100644
--- a/src/components/NavigationBar/warningCentre.vue
+++ b/src/components/NavigationBar/warningCentre.vue
@@ -106,7 +106,7 @@
 
       <el-button type="text" @click="handleSearch()">搜索</el-button>
       <el-button type="text" @click="handleReset()">重置</el-button>
-      <el-button type="text">导出</el-button>
+      <el-button type="text" @click="handleExport()">导出</el-button>
 
       <!-- <el-checkbox-group v-model="isCheck">
         <el-checkbox label="中共党员"> </el-checkbox>
@@ -203,11 +203,11 @@
 
 <script>
 import { getWarningList } from "@/api/home/index.js"; //预警
-import { getNetWorkId, inputSearch } from "@/api/home/index.js";
 import { handleTreeId } from "@/utils/findTreeId.js";
 import { treeselect } from "@/api/system/dept"; //部门
 import { mapGetters } from "vuex";
 import ColorCell from "@/components/ColorCell";
+import { exportyujing } from "@/api/home/index.js"; //预警
 export default {
   dicts: ["b_color_type"],
   components: { ColorCell },
@@ -336,6 +336,36 @@ export default {
 
       this.load();
     },
+    /**
+     * 导出
+     */
+    handleExport() {
+      if (this.list.length == 0) {
+        this.$message({
+          message: "没有数据可导出！",
+          type: "warning",
+        });
+        return;
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: "正在生成excel，请稍候",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      this.$modal
+        .confirm("是否确认导出所有数据项？")
+        .then(() => {
+          return exportyujing(this.queryParams);
+        })
+        .then((response) => {
+          this.$download.name(response.msg);
+          loading.close();
+        })
+        .catch(() => {
+          loading.close();
+        });
+    },
 
     /**
      * 重置操作
diff --git a/src/store/getters.js b/src/store/getters.js
index e21f065..119f654 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -18,5 +18,6 @@ const getters = {
   leftColor: (state) => state.taicang.leftColor,
   rightTopColor: (state) => state.taicang.rightTopColor,
   yjTotal: (state) => state.taicang.yjTotal,
+  userId: (state) => state.user.id,
 };
 export default getters;