diff --git a/src/assets/scss/modules/search.scss b/src/assets/scss/modules/search.scss
index 7b4cb925..370c50fe 100644
--- a/src/assets/scss/modules/search.scss
+++ b/src/assets/scss/modules/search.scss
@@ -199,13 +199,48 @@
         background-color: #fff;
         border-radius: 10px;
         padding: 30px 40px;
-
-        .headline {
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             margin-bottom: 20px;
-            font-size: 24px;
-            font-family: PingFang SC;
-            font-weight: bold;
-            color: #333333;
+
+            .headline {
+                font-size: 24px;
+                font-family: PingFang SC;
+                font-weight: bold;
+                color: #333333;
+            }
+            .notice {
+                width: 85%;
+                line-height: 24px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .notice-btn {
+                    width: 50px;
+                    background-color: #3e8ef7;
+                    color: #fff;
+                    text-align: center;
+                    border-radius: 4px;
+                    cursor: pointer;
+                }
+                .notice-list {
+                    // @include toe;
+                    width: 92%;
+                    // height: 24px;
+                    // overflow: hidden;
+                    a {
+                        margin-right: 20px;
+                        cursor: pointer;
+                        color: #999;
+                        &:hover {
+                            color: #3e8ef7;
+                        }
+                    }
+                }
+            }
         }
 
         .cnt {
@@ -219,3 +254,18 @@
         }
     }
 }
+
+.m-crumbs {
+    padding: 10px 30px 0;
+    font-size: 16px;
+    a {
+        color: #666;
+        &:hover {
+            color: #094bea;
+        }
+        cursor: pointer;
+    }
+    span {
+        color: #094bea;
+    }
+}
diff --git a/src/assets/scss/modules/warning.scss b/src/assets/scss/modules/warning.scss
new file mode 100644
index 00000000..2c6b9fa2
--- /dev/null
+++ b/src/assets/scss/modules/warning.scss
@@ -0,0 +1,147 @@
+.warning-box {
+    box-sizing: border-box;
+    // width: 1881px;
+    width: 100%;
+    // height: 100%;
+    min-height: 100%;
+    margin: 0 auto;
+    color: #999;
+    // background: url("../../../img/modules/visual/warning-box.png") no-repeat center;
+    background-size: 100% 100%;
+    padding: 25px 21px 35px 24px;
+
+    &-top {
+        display: flex;
+        // justify-content: space-around;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        min-height: 190px;
+
+        .top-item {
+            box-sizing: border-box;
+            width: 280px;
+            height: 190px;
+            padding: 10px 22px 14px 21px;
+            border-radius: 8px;
+            margin-right: 15px;
+            margin-bottom: 15px;
+            background-color: #fff;
+
+            &-img {
+                display: flex;
+                align-items: center;
+
+                img {
+                    width: 78px;
+                    height: 78px;
+                    margin-right: 16px;
+                    margin-bottom: 10px;
+                }
+
+                .top-item-left {
+                    display: flex;
+                    flex-direction: column;
+
+                    span {
+                        display: inline-block;
+                    }
+
+                    span:nth-child(1) {
+                        font-size: 18px;
+                        font-weight: 400;
+                        color: #333333;
+                    }
+
+                    span:nth-child(2) {
+                        font-size: 28px;
+                        font-weight: bold;
+                        color: #2194fe;
+                        margin-top: 10px;
+                    }
+                }
+            }
+
+            &-num {
+                width: 100%;
+                display: flex;
+                position: relative;
+                flex-direction: column;
+                align-items: space-between;
+                // border: 1px solid red;
+
+                .num-item {
+                    position: relative;
+                    width: 100%;
+                    height: 35px;
+                    display: flex;
+                    border-radius: 4px;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 0 10px 0 29px;
+                    cursor: pointer;
+
+                    &::after {
+                        display: block;
+                        content: "";
+                        width: 8px;
+                        height: 8px;
+                        background: #2194fe;
+                        border-radius: 50%;
+                        position: absolute;
+                        left: 12px;
+                        top: 50%;
+                        transform: translate(0, -50%);
+                    }
+
+                    div:nth-child(1) {
+                        font-size: 16px;
+                        font-family: PingFang SC;
+                        font-weight: 400;
+                        color: #333333;
+                    }
+
+                    div:nth-child(2) {
+                        // width: 70%;
+                        display: flex;
+                        font-size: 20px;
+                        font-family: PingFang SC;
+                        font-weight: 500;
+                        color: #333;
+
+                        .right-icon {
+                            width: 10px;
+                            height: 14px;
+                        }
+                    }
+                }
+
+                .num-item-active {
+                    background-color: #f0f3f7;
+                }
+
+                .num-item:nth-child(2) {
+                    margin-top: 10px;
+                }
+            }
+        }
+    }
+
+    &-bottom {
+        box-sizing: border-box;
+        width: 100%;
+        height: calc(100% - 300px);
+        padding: 35px 40px;
+        min-height: 300px;
+        margin-top: 30px;
+        background-color: #fff;
+
+        .pagination {
+            box-sizing: border-box;
+            margin-top: 20px;
+            width: 100%;
+            height: 40px;
+            display: flex;
+            justify-content: flex-end;
+        }
+    }
+}
diff --git a/src/views/modules/shequ/cpts/bar-chart.vue b/src/views/modules/shequ/cpts/bar-chart.vue
new file mode 100644
index 00000000..9e965b9c
--- /dev/null
+++ b/src/views/modules/shequ/cpts/bar-chart.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="m-chart">
+    <canvas id="myChart" :width="width" :height="height" />
+  </div>
+</template>
+
+<script>
+import nextTick from "dai-js/tools/nextTick";
+import F2 from "@antv/f2/lib/index-all";
+
+// ios下字体渲染有bug
+const fontFamily = "PingFang SC";
+const fontSize = 14;
+
+let chart;
+let srcData = [];
+
+const iniChart = function (config, srcData, total, that) {
+  chart = new F2.Chart({
+    id: "myChart",
+    ...config,
+  });
+
+  let data = [
+    {
+      const: "const",
+      name: "--",
+      count: 51.39,
+    },
+    {
+      const: "const",
+      name: "--",
+      count: 356.68,
+    },
+    {
+      const: "const",
+      name: "--",
+      count: 20.0,
+    },
+    {
+      const: "const",
+      name: "--",
+      count: 116.53,
+    },
+  ];
+  console.log("-----------------------------------", srcData);
+  data = srcData;
+
+  chart.source(data);
+  //   chart.axis(false);
+  chart.legend(false);
+  // chart.legend({
+  //   position: "bottom",
+  //   align: "center",
+  // });
+  chart.tooltip(false);
+
+  chart
+    .interval()
+    .position("name*count")
+    .color("name", [
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+      "#3e8ef7",
+    ]);
+
+  chart.render();
+
+  // 绘制柱状图文本
+  const offset = -5;
+  const canvas = chart.get("canvas");
+  const group = canvas.addGroup();
+  const shapes = {};
+  data.forEach(function (obj) {
+    const point = chart.getPosition(obj);
+    const text = group.addShape("text", {
+      attrs: {
+        x: point.x,
+        y: point.y + offset,
+        text: obj.count + '人',
+        textAlign: "center",
+        textBaseline: "bottom",
+        fill: "#808080",
+      },
+    });
+
+    shapes[obj.name] = text; // 缓存该 shape, 便于后续查找
+  });
+
+  // 配置柱状图点击交互
+  chart.interaction("interval-select", {
+    selectAxisStyle: {
+      fill: "#000",
+      fontWeight: "bold",
+    },
+    mode: "range", // range
+    //   defaultSelected: {
+    //     year: '1962 年',
+    //     sales: 38
+    //   },
+    onStart(ev) {
+      console.log(ev);
+      const data = ev.data,
+        selected = ev.selected;
+      if (data && selected) {
+        that.handleClickBar(data.name);
+      } else {
+        that.handleClickBar();
+      }
+    },
+    onEnd(ev) {
+      console.log("-------------------", ev);
+    },
+  });
+
+  // 注意：需要把chart return 出来
+  return chart;
+};
+
+export default {
+  name: "chart",
+  props: {
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    total: {
+      type: Number,
+      default: 0,
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    width: {
+      type: Number,
+      default: 400,
+    },
+    height: {
+      type: Number,
+      default: 260,
+    },
+  },
+  data() {
+    return {
+      iniLoading: false,
+    };
+  },
+  watch: {
+    list(data) {
+      // chart.changeData(data);
+      srcData = data;
+    },
+  },
+  async created() {
+    await nextTick(200);
+    iniChart(this.config, this.list, this.total, this);
+    await nextTick(200);
+    this.iniLoading = true;
+  },
+
+  methods: {
+    setList(data) {
+      chart.changeData(data);
+      srcData = data;
+    },
+
+    handleClickBar(name) {
+      let code = "";
+      if (name) {
+        let item = this.list.find((item) => item.name == name);
+        console.log(item);
+        code = item && item.code;
+      }
+      console.log(code);
+      this.$emit("clickBar", { code });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/modules/shequ/cpts/scroll-notice.vue b/src/views/modules/shequ/cpts/scroll-notice.vue
new file mode 100644
index 00000000..6945dacc
--- /dev/null
+++ b/src/views/modules/shequ/cpts/scroll-notice.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="m-scoll-notice">
+    <div class="wrapper">
+      <div class="bar" ref="barparent">
+        <div class="bartext" ref="barchild" :style="bartextStyle">
+          <!-- <li
+            v-for="(item, index) in list"
+            :key="item.configId + item.buildingId + index"
+            @click="toNoticeInfo(item)"
+          >
+            {{ item.noticeContent }}
+          </li> -->
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: [],
+    },
+  },
+
+  data() {
+    return {
+      parentClientWidth: 100000,
+      beyond: false,
+    };
+  },
+  components: {},
+
+  computed: {
+    bartextStyle() {
+      let len = this.list.length;
+      let beyond = this.beyond;
+      return {
+        paddingLeft: beyond ? this.parentClientWidth + "px" : "",
+        animation: beyond
+          ? `move_left_right ${len * 5}s linear 0s infinite`
+          : "",
+      };
+    },
+  },
+  mounted() {
+    this.move();
+  },
+
+  methods: {
+    move() {
+      const parentClientWidth = this.$refs.barparent.clientWidth;
+      this.parentClientWidth = parentClientWidth;
+      //判断动画区域是否超出父元素宽度 宽则有动画，不宽则无
+      const parent = this.$refs.barparent;
+      const child = this.$refs.barchild;
+      console.log("对比", child.clientWidth, parent.clientWidth);
+      this.beyond = child.clientWidth > parent.clientWidth;
+    },
+    handleCancle() {
+      this.$emit("dialogCancle");
+      this.resetData();
+    },
+
+    resetData() {
+      this.dataForm = {
+        neighborHoodId: "", // 所属小区ID
+        buildingId: "", //所属楼栋ID
+        buildingUnitId: "", //所属单元ID
+        doorName: "", //门牌号
+        houseType: "1", //房屋类型【楼房，平房，别墅】
+        purpose: "1", //房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】
+        rentFlag: 1, //是否出租【是：1，否：0】
+        ownerPhone: "", //房主电话
+        ownerName: "", //房主名字
+        ownerIdCard: "", //房主身份证
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.m-scoll-notice {
+  .wrapper {
+    // padding: 0 15px;
+    display: flex;
+    align-items: center;
+    // background-color: "#FFF6EC";
+  }
+  .bar {
+    width: 100%;
+    // height: 32px;
+    // line-height: 32px;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .bartext {
+    white-space: nowrap;
+    display: inline-block;
+  }
+  .bartext li {
+    white-space: nowrap;
+    display: inline-block;
+    color: red;
+    font-size: 14px;
+  }
+  .state-text-overflow {
+    animation: move_left_right 120s linear 0s infinite;
+  }
+  @keyframes move_left_right {
+    from {
+      transform: translateX(0%);
+    }
+    to {
+      transform: translateX(-80%);
+    }
+  }
+}
+</style>
diff --git a/src/views/modules/shequ/index.vue b/src/views/modules/shequ/index.vue
index 7469479e..49c92e5f 100644
--- a/src/views/modules/shequ/index.vue
+++ b/src/views/modules/shequ/index.vue
@@ -1,422 +1,445 @@
 <template>
   <div>
-    <div v-show="!showedFuncPanel">
-      <div class="m-info">
-        <div class="wrap">
-          <div class="logo">
-            <img src="@/assets/img/shequ/logo.png" />
-          </div>
-
-          <div class="search">
-            <div class="input">
-              <el-dropdown class="select" 
-                placement="bottom" v-model="searchData.type" @command="type => searchData.type = type">
-                <span class="select-show">
-                  {{{jumin:'居民', fangwu: '房屋', xuqiu:'需求'}[searchData.type]}}<i class="el-icon-arrow-down el-icon--right"></i>
-                </span>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item command="jumin">居民</el-dropdown-item>
-                  <el-dropdown-item command="fangwu">房屋</el-dropdown-item>
-                  <el-dropdown-item command="xuqiu">需求</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-
-              <input
-                type="text"
-                :placeholder="typePlaceholder[searchData.type]"
-                v-model="searchData.keyword"
-                @keyup.enter="handleClickSearchBtn"
-              />
-
-              <div
-                class="close-btn"
-                v-if="searchData.keyword != ''"
-                @click="searchData.keyword = ''"
-              >
-                <img src="@/assets/img/shequ/close.png" />
-              </div>
+    <div v-show="currentPage == 'chaxun'">
+      <div v-show="!showedFuncPanel">
+        <div class="m-info">
+          <div class="wrap">
+            <div class="logo">
+              <img src="@/assets/img/shequ/logo.png" />
             </div>
-            <div class="btn" @click="handleClickSearchBtn">搜索</div>
-          </div>
 
-          <div
-            class="m-tb"
-            v-if="
-              searchData.type == 'jumin' &&
-              searchData.keyword != '' &&
-              searchStatus == 'ing'
-            "
-          >
-            <div class="tb">
-              <el-table
-                :data="searchJumin.list"
-                border
-                style="width: 100%"
-                class="resi-table"
-                :max-height="1000"
-              >
-                <el-table-column
-                  label="序号"
-                  type="index"
-                  align="center"
-                  width="50"
-                />
-                <el-table-column
-                  v-for="item in searchJumin.header"
-                  :key="item.columnName"
-                  :prop="item.columnName"
-                  :label="item.label"
-                  align="center"
-                  :show-overflow-tooltip="true"
-                  :width="
-                    item.itemType === 'radio' ? computedWidth(item.label) : 180
-                  "
+            <div class="search">
+              <div class="input">
+                <el-dropdown
+                  class="select"
+                  placement="bottom"
+                  v-model="searchData.type"
+                  @command="(type) => (searchData.type = type)"
                 >
-                  <template slot-scope="scope">
-                    <span>{{ handleFilterSpan(scope.row, item) }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column fixed="right" label="操作" align="center">
-                  <template slot-scope="scope">
-                    <el-button
-                      @click="handleWatchSearchJumin(scope.$index)"
-                      type="text"
-                      size="small"
-                      >查看</el-button
-                    >
-                  </template>
-                </el-table-column>
-              </el-table>
-
-              <div>
-                <el-pagination
-                  @size-change="handleSizeChangeSearchJumin"
-                  @current-change="handleCurrentChangeSearchJumin"
-                  :current-page.sync="searchJumin.pageNo"
-                  :page-sizes="[20, 50, 100, 200]"
-                  :page-size="parseInt(searchJumin.pageSize)"
-                  layout="sizes, prev, pager, next"
-                  :total="searchJumin.total"
+                  <span class="select-show">
+                    {{
+                      { jumin: "居民", fangwu: "房屋", xuqiu: "需求" }[
+                        searchData.type
+                      ]
+                    }}<i class="el-icon-arrow-down el-icon--right"></i>
+                  </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="jumin">居民</el-dropdown-item>
+                    <el-dropdown-item command="fangwu">房屋</el-dropdown-item>
+                    <el-dropdown-item command="xuqiu">需求</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+
+                <input
+                  type="text"
+                  :placeholder="typePlaceholder[searchData.type]"
+                  v-model="searchData.keyword"
+                  @keyup.enter="handleClickSearchBtn"
+                />
+
+                <div
+                  class="close-btn"
+                  v-if="searchData.keyword != ''"
+                  @click="searchData.keyword = ''"
                 >
-                </el-pagination>
+                  <img src="@/assets/img/shequ/close.png" />
+                </div>
               </div>
+              <div class="btn" @click="handleClickSearchBtn">搜索</div>
             </div>
-          </div>
 
-          <div
-            class="m-tb"
-            v-if="
-              searchData.type == 'fangwu' &&
-              searchData.keyword != '' &&
-              searchStatus == 'ing'
-            "
-          >
-            <div class="tb">
-              <el-table
-                :data="searchFangwu.list"
-                v-loading="searchFangwu.loading"
-                border
-                :max-height="1000"
-                style="width: 100%"
-              >
-                <el-table-column
-                  label="序号"
-                  type="index"
-                  align="center"
-                  width="50"
-                />
-                <el-table-column prop="houseName" label="房屋名称" width="120">
-                </el-table-column>
-                <el-table-column
-                  prop="neighborHoodName"
-                  label="所属小区"
-                  width="160"
-                >
-                </el-table-column>
-                <el-table-column prop="buildingName" label="所属楼栋">
-                </el-table-column>
-                <el-table-column prop="unitNum" label="单元号">
-                </el-table-column>
-                <el-table-column prop="doorName" label="门牌号">
-                </el-table-column>
-                <el-table-column prop="houseType" label="类型">
-                </el-table-column>
-                <el-table-column prop="purpose" label="用途"> </el-table-column>
-                <el-table-column prop="rentFlag" label="是否出租">
-                </el-table-column>
-                <el-table-column prop="ownerName" label="房主姓名">
-                </el-table-column>
-                <el-table-column prop="ownerPhone" label="房主电话" width="110">
-                </el-table-column>
-                <el-table-column prop="ownerIdCard" label="身份证" width="170">
-                </el-table-column>
-                <el-table-column
-                  label="操作"
-                  fixed="right"
-                  header-align="center"
-                  align="center"
-                  class="operate"
-                >
-                  <template slot-scope="scope">
-                    <el-button
-                      type="text"
-                      style="color: #1c6afd; text-decoration: underline"
-                      size="small"
-                      @click="handleWatchSearchFangwu(scope.row)"
-                      >查看</el-button
-                    >
-                  </template>
-                </el-table-column>
-              </el-table>
-              <div>
-                <el-pagination
-                  @size-change="handleSizeChangeSearchFangwu"
-                  @current-change="handleCurrentChangeSearchFangwu"
-                  :current-page.sync="searchFangwu.pageNo"
-                  :page-sizes="[20, 50, 100, 200]"
-                  :page-size="parseInt(searchFangwu.pageSize)"
-                  layout="sizes, prev, pager, next"
-                  :total="searchFangwu.total"
+            <div
+              class="m-tb"
+              v-if="
+                searchData.type == 'jumin' &&
+                searchData.keyword != '' &&
+                searchStatus == 'ing'
+              "
+            >
+              <div class="tb">
+                <el-table
+                  :data="searchJumin.list"
+                  border
+                  style="width: 100%"
+                  class="resi-table"
+                  :max-height="1000"
                 >
-                </el-pagination>
+                  <el-table-column
+                    label="序号"
+                    type="index"
+                    align="center"
+                    width="50"
+                  />
+                  <el-table-column
+                    v-for="item in searchJumin.header"
+                    :key="item.columnName"
+                    :prop="item.columnName"
+                    :label="item.label"
+                    align="center"
+                    :show-overflow-tooltip="true"
+                    :width="
+                      item.itemType === 'radio'
+                        ? computedWidth(item.label)
+                        : 180
+                    "
+                  >
+                    <template slot-scope="scope">
+                      <span>{{ handleFilterSpan(scope.row, item) }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column fixed="right" label="操作" align="center">
+                    <template slot-scope="scope">
+                      <el-button
+                        @click="handleWatchSearchJumin(scope.$index)"
+                        type="text"
+                        size="small"
+                        >查看</el-button
+                      >
+                    </template>
+                  </el-table-column>
+                </el-table>
+
+                <div>
+                  <el-pagination
+                    @size-change="handleSizeChangeSearchJumin"
+                    @current-change="handleCurrentChangeSearchJumin"
+                    :current-page.sync="searchJumin.pageNo"
+                    :page-sizes="[20, 50, 100, 200]"
+                    :page-size="parseInt(searchJumin.pageSize)"
+                    layout="sizes, prev, pager, next"
+                    :total="searchJumin.total"
+                  >
+                  </el-pagination>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div
-            class="m-tb"
-            v-if="
-              searchData.type == 'xuqiu' &&
-              searchData.keyword != '' &&
-              searchStatus == 'ing'
-            "
-          >
-            <div class="tb">
-              <el-table
-                :data="searchXuqiu.list"
-                v-loading="searchXuqiu.loading"
-                border
-                :max-height="1000"
-                style="width: 100%"
-              >
-                <el-table-column
-                  label="序号"
-                  type="index"
-                  align="center"
-                  width="50"
-                />
-
-                <el-table-column
-                  v-for="item in searchXuqiu.header"
-                  :key="item.columnName"
-                  :prop="item.columnName"
-                  :label="item.label"
-                  :align="item.align"
-                  :width="item.width"
-                  :show-overflow-tooltip="true"
-                >
-                  <template slot-scope="scope">
-                    <span>{{ handleFilterSpan(scope.row, item) }}</span>
-                  </template>
-                </el-table-column>
-
-                <el-table-column
-                  label="操作"
-                  fixed="right"
-                  header-align="center"
-                  align="center"
-                  class="operate"
-                >
-                  <template slot-scope="scope">
-                    <el-button
-                      type="text"
-                      style="color: #1c6afd; text-decoration: underline"
-                      size="small"
-                      @click="handleWatchSearchXuqiu(scope.row)"
-                      >查看</el-button
-                    >
-                  </template>
-                </el-table-column>
-              </el-table>
-              <div>
-                <el-pagination
-                  @size-change="handleSizeChangeSearchXuqiu"
-                  @current-change="handleCurrentChangeSearchXuqiu"
-                  :current-page.sync="searchXuqiu.pageNo"
-                  :page-sizes="[20, 50, 100, 200]"
-                  :page-size="parseInt(searchXuqiu.pageSize)"
-                  layout="sizes, prev, pager, next"
-                  :total="searchXuqiu.total"
+            <div
+              class="m-tb"
+              v-if="
+                searchData.type == 'fangwu' &&
+                searchData.keyword != '' &&
+                searchStatus == 'ing'
+              "
+            >
+              <div class="tb">
+                <el-table
+                  :data="searchFangwu.list"
+                  v-loading="searchFangwu.loading"
+                  border
+                  :max-height="1000"
+                  style="width: 100%"
                 >
-                </el-pagination>
+                  <el-table-column
+                    label="序号"
+                    type="index"
+                    align="center"
+                    width="50"
+                  />
+                  <el-table-column
+                    prop="houseName"
+                    label="房屋名称"
+                    width="120"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    prop="neighborHoodName"
+                    label="所属小区"
+                    width="160"
+                  >
+                  </el-table-column>
+                  <el-table-column prop="buildingName" label="所属楼栋">
+                  </el-table-column>
+                  <el-table-column prop="unitNum" label="单元号">
+                  </el-table-column>
+                  <el-table-column prop="doorName" label="门牌号">
+                  </el-table-column>
+                  <el-table-column prop="houseType" label="类型">
+                  </el-table-column>
+                  <el-table-column prop="purpose" label="用途">
+                  </el-table-column>
+                  <el-table-column prop="rentFlag" label="是否出租">
+                  </el-table-column>
+                  <el-table-column prop="ownerName" label="房主姓名">
+                  </el-table-column>
+                  <el-table-column
+                    prop="ownerPhone"
+                    label="房主电话"
+                    width="110"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    prop="ownerIdCard"
+                    label="身份证"
+                    width="170"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    label="操作"
+                    fixed="right"
+                    header-align="center"
+                    align="center"
+                    class="operate"
+                  >
+                    <template slot-scope="scope">
+                      <el-button
+                        type="text"
+                        style="color: #1c6afd; text-decoration: underline"
+                        size="small"
+                        @click="handleWatchSearchFangwu(scope.row)"
+                        >查看</el-button
+                      >
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <div>
+                  <el-pagination
+                    @size-change="handleSizeChangeSearchFangwu"
+                    @current-change="handleCurrentChangeSearchFangwu"
+                    :current-page.sync="searchFangwu.pageNo"
+                    :page-sizes="[20, 50, 100, 200]"
+                    :page-size="parseInt(searchFangwu.pageSize)"
+                    layout="sizes, prev, pager, next"
+                    :total="searchFangwu.total"
+                  >
+                  </el-pagination>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div
-            class="m-tb"
-            v-if="
-              searchData.type == 'xuqiu' &&
-              searchData.keyword != '' &&
-              searchStatus == 'ing'
-            "
-          >
-            <div class="tb"></div>
-          </div>
+            <div
+              class="m-tb"
+              v-if="
+                searchData.type == 'xuqiu' &&
+                searchData.keyword != '' &&
+                searchStatus == 'ing'
+              "
+            >
+              <div class="tb">
+                <el-table
+                  :data="searchXuqiu.list"
+                  v-loading="searchXuqiu.loading"
+                  border
+                  :max-height="1000"
+                  style="width: 100%"
+                >
+                  <el-table-column
+                    label="序号"
+                    type="index"
+                    align="center"
+                    width="50"
+                  />
 
-          <div class="m-list" v-if="searchStatus == 'ini'">
-            <div class="list-title">常用功能</div>
-            <div class="list">
-              <div
-                class="item"
-                :key="item.menuId"
-                @click="handleClickFunc(item)"
-                v-for="item in funcList"
-              >
-                <div class="icon">
-                  <svg
-                    class="icon-svg aui-sidebar__menu-icon"
-                    aria-hidden="true"
+                  <el-table-column
+                    v-for="item in searchXuqiu.header"
+                    :key="item.columnName"
+                    :prop="item.columnName"
+                    :label="item.label"
+                    :align="item.align"
+                    :width="item.width"
+                    :show-overflow-tooltip="true"
                   >
-                    <use :xlink:href="`#${item.icon}`" />
-                  </svg>
-                </div>
-                <p>{{ item.menuName }}</p>
-              </div>
+                    <template slot-scope="scope">
+                      <span>{{ handleFilterSpan(scope.row, item) }}</span>
+                    </template>
+                  </el-table-column>
 
-              <div class="item" @click="showedFuncPanel = true">
-                <div class="icon">
-                  <img src="@/assets/img/shequ/function/tianjiayingyong.png" />
+                  <el-table-column
+                    label="操作"
+                    fixed="right"
+                    header-align="center"
+                    align="center"
+                    class="operate"
+                  >
+                    <template slot-scope="scope">
+                      <el-button
+                        type="text"
+                        style="color: #1c6afd; text-decoration: underline"
+                        size="small"
+                        @click="handleWatchSearchXuqiu(scope.row)"
+                        >查看</el-button
+                      >
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <div>
+                  <el-pagination
+                    @size-change="handleSizeChangeSearchXuqiu"
+                    @current-change="handleCurrentChangeSearchXuqiu"
+                    :current-page.sync="searchXuqiu.pageNo"
+                    :page-sizes="[20, 50, 100, 200]"
+                    :page-size="parseInt(searchXuqiu.pageSize)"
+                    layout="sizes, prev, pager, next"
+                    :total="searchXuqiu.total"
+                  >
+                  </el-pagination>
                 </div>
-                <p>添加应用</p>
               </div>
             </div>
-          </div>
-        </div>
-      </div>
 
-      <div class="m-data" v-if="searchStatus == 'ini'">
-        <div class="wrap">
-          <div class="headline">人员预警</div>
-
-          <div class="cnt">
-            <div class="chart">
-              <pan-chart
-                :width="520"
-                :height="420"
-                v-if="warningChart.loading"
-                :total="warningChart.total"
-                :list="warningChart.list"
-              />
+            <div
+              class="m-tb"
+              v-if="
+                searchData.type == 'xuqiu' &&
+                searchData.keyword != '' &&
+                searchStatus == 'ing'
+              "
+            >
+              <div class="tb"></div>
             </div>
-            <div class="tb">
-              <el-table
-                :data="warningTb.list"
-                border
-                style="width: 100%"
-                class="resi-table"
-                :max-height="maxTableHeight"
-              >
-                <el-table-column
-                  label="序号"
-                  type="index"
-                  align="center"
-                  width="50"
-                />
-                <el-table-column prop="typeName" label="类型">
-                </el-table-column>
-                <el-table-column prop="gridName" label="所属网格">
-                </el-table-column>
-                <el-table-column prop="name" label="姓名"> </el-table-column>
-                <el-table-column prop="family" label="所属家庭">
-                </el-table-column>
-                <el-table-column prop="mobile" label="电话"> </el-table-column>
-                <el-table-column fixed="right" label="操作" align="center">
-                  <template slot-scope="scope">
-                    <el-button
-                      @click="handleWatchWarning(scope.$index)"
-                      type="text"
-                      size="small"
-                      >查看</el-button
-                    >
-                  </template>
-                </el-table-column>
-              </el-table>
-              <div>
-                <el-pagination
-                  @size-change="handleSizeChangeWarning"
-                  @current-change="handleCurrentChangeWarning"
-                  :current-page.sync="warningTb.pageNo"
-                  :page-sizes="[20, 50, 100, 200]"
-                  :page-size="parseInt(warningTb.pageSize)"
-                  layout="sizes, prev, pager, next"
-                  :total="warningTb.total"
+
+            <div class="m-list" v-if="searchStatus == 'ini'">
+              <div class="list-title">常用功能</div>
+              <div class="list">
+                <div
+                  class="item"
+                  :key="item.menuId"
+                  @click="handleClickFunc(item)"
+                  v-for="item in funcList"
                 >
-                </el-pagination>
+                  <div class="icon">
+                    <svg
+                      class="icon-svg aui-sidebar__menu-icon"
+                      aria-hidden="true"
+                    >
+                      <use :xlink:href="`#${item.icon}`" />
+                    </svg>
+                  </div>
+                  <p>{{ item.menuName }}</p>
+                </div>
+
+                <div class="item" @click="showedFuncPanel = true">
+                  <div class="icon">
+                    <img
+                      src="@/assets/img/shequ/function/tianjiayingyong.png"
+                    />
+                  </div>
+                  <p>添加应用</p>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
 
-    <!-- 修改弹出框 -->
-    <div
-      v-show="showedFuncPanel"
-      v-if="
-        Array.isArray($store.state.sidebarMenuList) &&
-        $store.state.sidebarMenuList.length > 0
-      "
-    >
-      <div class="m-panel">
-        <div
-          class="m-list"
-          v-if="selectedFuncList && selectedFuncList.length > 0"
-        >
-          <div class="list-title">常用功能</div>
-          <div class="list">
-            <div
-              class="item"
-              :key="item.menuId"
-              @click="selectFuncItem(item.menuId)"
-              v-for="item in selectedFuncList"
-            >
-              <div class="corner-mark z-on">
-                <i class="el-icon-success"></i>
+        <div class="m-data" v-if="searchStatus == 'ini'">
+          <div class="wrap">
+            <div class="header">
+              <div class="headline">人员预警</div>
+              <div class="notice" v-if="false">
+                <div class="notice-btn" @click="toNoticeInfo">通知</div>
+                <div class="notice-list">
+                  <a
+                    class="notice-item"
+                    v-for="(item, index) in noticeList"
+                    :key="item.configId + item.buildingId + index"
+                    @click="toNoticeInfo(item)"
+                  >
+                    {{ item.noticeContent }}
+                  </a>
+                </div>
               </div>
+              <div class="notice">
+                <div class="notice-btn" @click="toNoticeInfo">通知</div>
+                <div class="notice-list" v-if="noticeList.length > 0">
+                  <scroll-notice :list="noticeList">
+                    <a
+                      class="notice-item"
+                      v-for="(item, index) in noticeList"
+                      :key="item.configId + item.buildingId + index"
+                      @click="toNoticeInfo(item)"
+                    >
+                      {{ item.noticeContent }}
+                    </a>
+                  </scroll-notice>
+                </div>
+              </div>
+            </div>
 
-              <div class="icon">
-                <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
-                  <use :xlink:href="`#${item.icon}`" />
-                </svg>
+            <div class="cnt">
+              <div class="chart">
+                <bar-chart
+                  :width="520"
+                  :height="420"
+                  v-if="warningChart.loading"
+                  :total="warningChart.total"
+                  :list="warningChart.list"
+                  @clickBar="changeCategoryCode"
+                />
+              </div>
+              <div class="tb">
+                <el-table
+                  :data="warningTb.list"
+                  border
+                  style="width: 100%"
+                  class="resi-table"
+                  :max-height="maxTableHeight"
+                >
+                  <el-table-column
+                    label="序号"
+                    type="index"
+                    align="center"
+                    width="50"
+                  />
+                  <el-table-column prop="typeName" label="类型">
+                  </el-table-column>
+                  <el-table-column prop="gridName" label="所属网格">
+                  </el-table-column>
+                  <el-table-column prop="name" label="姓名"> </el-table-column>
+                  <el-table-column prop="family" label="所属家庭">
+                  </el-table-column>
+                  <el-table-column prop="mobile" label="电话">
+                  </el-table-column>
+                  <el-table-column fixed="right" label="操作" align="center">
+                    <template slot-scope="scope">
+                      <el-button
+                        @click="handleWatchWarning(scope.$index)"
+                        type="text"
+                        size="small"
+                        >查看</el-button
+                      >
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <div>
+                  <el-pagination
+                    @size-change="handleSizeChangeWarning"
+                    @current-change="handleCurrentChangeWarning"
+                    :current-page.sync="warningTb.pageNo"
+                    :page-sizes="[20, 50, 100, 200]"
+                    :page-size="parseInt(warningTb.pageSize)"
+                    layout="sizes, prev, pager, next"
+                    :total="warningTb.total"
+                  >
+                  </el-pagination>
+                </div>
               </div>
-              <p>{{ item.menuName }}</p>
             </div>
           </div>
         </div>
+      </div>
 
-        <div class="m-list">
-          <div class="list-title">所有功能</div>
-
+      <!-- 修改弹出框 -->
+      <div
+        v-show="showedFuncPanel"
+        v-if="
+          Array.isArray($store.state.sidebarMenuList) &&
+          $store.state.sidebarMenuList.length > 0
+        "
+      >
+        <div class="m-panel">
           <div
-            :key="'one' + menu.id"
-            v-show="menu.children && menu.children.length > 0"
-            v-for="menu in $store.state.sidebarMenuList"
+            class="m-list"
+            v-if="selectedFuncList && selectedFuncList.length > 0"
           >
-            <div class="list-title2">{{ menu.name }}</div>
+            <div class="list-title">常用功能</div>
             <div class="list">
               <div
                 class="item"
-                :key="'two' + item.id"
-                @click="selectFuncItem(item.id)"
-                v-for="item in menu.children"
+                :key="item.menuId"
+                @click="selectFuncItem(item.menuId)"
+                v-for="item in selectedFuncList"
               >
-                <div
-                  class="corner-mark"
-                  :class="{
-                    'z-on': selectedFuncIdList.indexOf(item.id) !== -1,
-                  }"
-                >
+                <div class="corner-mark z-on">
                   <i class="el-icon-success"></i>
                 </div>
 
@@ -428,19 +451,73 @@
                     <use :xlink:href="`#${item.icon}`" />
                   </svg>
                 </div>
-                <p>{{ item.name }}</p>
+                <p>{{ item.menuName }}</p>
               </div>
             </div>
           </div>
-        </div>
 
-        <div class="operate">
-          <el-button round @click="showedFuncPanel = false">返回</el-button>
-          <el-button type="primary" round @click="editFuncList">确认</el-button>
+          <div class="m-list">
+            <div class="list-title">所有功能</div>
+
+            <div
+              :key="'one' + menu.id"
+              v-show="menu.children && menu.children.length > 0"
+              v-for="menu in $store.state.sidebarMenuList"
+            >
+              <div class="list-title2">{{ menu.name }}</div>
+              <div class="list">
+                <div
+                  class="item"
+                  :key="'two' + item.id"
+                  @click="selectFuncItem(item.id)"
+                  v-for="item in menu.children"
+                >
+                  <div
+                    class="corner-mark"
+                    :class="{
+                      'z-on': selectedFuncIdList.indexOf(item.id) !== -1,
+                    }"
+                  >
+                    <i class="el-icon-success"></i>
+                  </div>
+
+                  <div class="icon">
+                    <svg
+                      class="icon-svg aui-sidebar__menu-icon"
+                      aria-hidden="true"
+                    >
+                      <use :xlink:href="`#${item.icon}`" />
+                    </svg>
+                  </div>
+                  <p>{{ item.name }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="operate">
+            <el-button round @click="showedFuncPanel = false">返回</el-button>
+            <el-button type="primary" round @click="editFuncList"
+              >确认</el-button
+            >
+          </div>
         </div>
       </div>
     </div>
 
+    <div v-if="currentPage == 'yujing'">
+      <div class="m-crumbs">
+        <a @click="currentPage = 'chaxun'">社区查询</a>
+        <i> > </i>
+        <span>人员预警</span>
+      </div>
+
+      <warning-list
+        :buildingId="currentNoticeBuildingId"
+        :configId="currentNoticeConfigId"
+      />
+    </div>
+
     <people-more
       v-if="showedPeopleMoreInfo && currentPepeleId"
       :userId="currentPepeleId"
@@ -482,15 +559,24 @@
 
 <script>
 import { requestPost } from "@/js/dai/request";
-import panChart from "@/views/modules/shequ/cpts/pan-chart";
+import barChart from "@/views/modules/shequ/cpts/bar-chart";
+import warningList from "@/views/modules/warning/index";
 import { mapGetters } from "vuex";
 import nextTick from "dai-js/tools/nextTick";
 import peopleMore from "@/views/modules/shequ/cpts/people-more";
 import fangwuInfo from "@/views/modules/shequ/cpts/fangwu-info";
 import xuqiuInfo from "@/views/modules/shequ/cpts/xuqiu-info";
+import scrollNotice from "@/views/modules/shequ/cpts/scroll-notice";
 
 export default {
-  components: { panChart, peopleMore, fangwuInfo, xuqiuInfo },
+  components: {
+    barChart,
+    peopleMore,
+    fangwuInfo,
+    xuqiuInfo,
+    warningList,
+    scrollNotice,
+  },
 
   data() {
     return {
@@ -673,6 +759,19 @@ export default {
       // 显示人员详情
       showedFangwuInfo: false,
       showedXuqiuInfo: false,
+
+      noticeList: [
+        // {
+        //   configId: "20211210153859_f070ac2dd01129da5d9a9f2329fbd9ea1",
+        //   noticeContent: "市北区-抚顺第二网格中南国际2号楼低保人员超出预警!",
+        // },
+      ],
+
+      currentCategoryCode: "",
+
+      currentPage: "chaxun", //查询 预警
+      currentNoticeBuildingId: "",
+      currentNoticeConfigId: "",
     };
   },
   computed: {
@@ -729,6 +828,13 @@ export default {
     );
   },
   methods: {
+    changeCategoryCode({ code }) {
+      this.currentCategoryCode = code || "";
+
+      this.warningTb.pageNo = 1;
+      this.getWarningTb();
+    },
+
     computedWidth(label) {
       const wd = 20 * label.length;
       return wd > 80 ? wd : 80;
@@ -851,6 +957,7 @@ export default {
       this.getWarningList();
       this.getWarningTb();
       this.getSearchJuminHeader();
+      this.getNoticeList();
     },
 
     selectFuncItem(id) {
@@ -862,6 +969,30 @@ export default {
       }
     },
 
+    toNoticeInfo(item) {
+      console.log(item);
+      this.currentPage = "yujing";
+      if (item) {
+        this.currentNoticeBuildingId = item.buildingId;
+        this.currentNoticeConfigId = item.configId;
+      } else {
+        this.currentNoticeBuildingId = "";
+        this.currentNoticeConfigId = "";
+      }
+    },
+
+    async getNoticeList() {
+      const url = "/epmetuser/statsresiwarn/queryuserwarnnotice";
+      const { data, code, msg } = await requestPost(url, {
+        agencyId: this.$store.state.user.agencyId,
+      });
+      if (code === 0) {
+        this.noticeList = data || [];
+      } else {
+        // return this.$message.error("网络错误");
+      }
+    },
+
     async getSearchJuminHeader() {
       const url = "/oper/customize/icform/tableheaders";
       const { data, code, msg } = await requestPost(url, {
@@ -952,6 +1083,7 @@ export default {
       const { data, code, msg } = await requestPost(url, {
         pageSize,
         pageNo,
+        categoryCode: this.currentCategoryCode,
       });
       if (code === 0) {
         console.log("列表请求成功！！！！！！！！！！！！！！");
@@ -978,6 +1110,7 @@ export default {
         this.warningChart.total = data.total;
         this.warningChart.list = data.list.map((item) => {
           return {
+            code: item.typeCode,
             name: item.typeName,
             count: item.typeCount,
             const: "const",
diff --git a/src/views/modules/warning/components/screen-loading/index.vue b/src/views/modules/warning/components/screen-loading/index.vue
new file mode 100644
index 00000000..cc8bda6f
--- /dev/null
+++ b/src/views/modules/warning/components/screen-loading/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="screen-loading">
+    <svg width="50px"
+         height="50px">
+      <circle cx="25"
+              cy="25"
+              r="20"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="31.415, 31.415"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="0, 25 25;360, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#02bcfe;#3be6cb;#02bcfe"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+
+      <circle cx="25"
+              cy="25"
+              r="10"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="15.7, 15.7"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="360, 25 25;0, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#3be6cb;#02bcfe;#3be6cb"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+    </svg>
+    <div class="loading-tip">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DvLoading'
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .loading-tip {
+    font-size: 14px;
+    color: #fff;
+  }
+}
+</style>
diff --git a/src/views/modules/warning/components/screen-table/index.vue b/src/views/modules/warning/components/screen-table/index.vue
new file mode 100644
index 00000000..6f0da3ed
--- /dev/null
+++ b/src/views/modules/warning/components/screen-table/index.vue
@@ -0,0 +1,392 @@
+<template>
+  <div>
+    <div class="warning-table">
+      <div class="table">
+        <div class="table-header">
+          <div
+            class="table-header-th"
+            v-for="(item, index) in headerList"
+            :key="item.title"
+            :style="headerStyle[index]"
+          >
+            {{ item.title }}
+          </div>
+        </div>
+        <div class="table-body">
+          <div
+            class="table-body-tr"
+            v-for="(value, index) in tableData"
+            :key="index"
+          >
+            <div
+              class="td"
+              v-for="(item, indexs) in value"
+              :key="indexs"
+              :style="tableContentStyle[indexs]"
+            >
+              <div v-if="Array.isArray(item)">
+                <span
+                  v-show="rIndex < 3"
+                  :key="resi.userId"
+                  v-for="(resi, rIndex) in item"
+                >
+                  {{ rIndex != 0 ? "、" : "" }}
+                  <a @click="handlePeopleItem(resi.userId, value[1])">{{
+                    resi.residentName
+                  }}</a>
+                </span>
+              </div>
+              <span v-else>{{ item }}</span>
+              <span
+                v-if="indexs + 1 == value.length && item.length > 3"
+                class="more"
+                @click.stop="onClickMorePop(index)"
+                ref="morePop"
+              >
+                更多>
+                <div class="more-pop" v-if="visiblePopList[index]">
+                  <span
+                    :key="index + rIndex + resi.userId"
+                    v-for="(resi, rIndex) in item"
+                  >
+                    {{ rIndex != 0 ? "、" : "" }}
+                    <a @click="handlePeopleItem(resi.userId, value[1])">{{
+                      resi.residentName
+                    }}</a>
+                  </span>
+                </div>
+              </span>
+            </div>
+          </div>
+          <screen-loading v-if="visibleLoading">加载中</screen-loading>
+          <div class="no-data" v-if="tableData.length == 0 && !visibleLoading">
+            <img
+              src="@/assets/img/modules/visual/noData.png"
+              class="no-data-img"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <people-more
+      v-if="showedPeopleMoreInfo && currentPepeleId"
+      :userId="currentPepeleId"
+      :gridName="currentPepeleGridName"
+      @close="showedPeopleMoreInfo = false"
+    />
+  </div>
+</template>
+
+<script>
+import ScreenLoading from "../screen-loading/index";
+import Vue from "vue";
+import peopleMore from "@/views/modules/shequ/cpts/people-more";
+
+export default {
+  name: "warning-table",
+  components: {
+    ScreenLoading,
+    peopleMore,
+  },
+  props: {
+    headerList: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+          { title: "序号" },
+          { title: "所属网格" },
+          { title: "所属小区" },
+          { title: "楼号" },
+          { title: "姓名" },
+        ];
+      },
+    },
+    tableData: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+          // [
+          //   1,
+          //   "商丘路社区第一网格",
+          //   "商丘路小区",
+          //   "2号楼",
+          //   "杨颖、王平、刘佳敏、丁辉、杨萍",
+          // ],
+          // [
+          //   2,
+          //   "商丘路社区第一网格",
+          //   "商丘路小区",
+          //   "2号楼",
+          //   "杨颖、王平、刘佳敏、丁辉、杨萍",
+          // ],
+        ];
+      },
+    },
+    // 单独给头部设置样式
+    headerStyle: {
+      type: Array,
+      default: () => {
+        return [
+          // {
+          //   width:'200px',
+          //   border:'1px solid red'
+          // },
+          // {
+          //   width:'200px'
+          // }
+        ];
+      },
+    },
+    // 单独给内容设置样式
+    tableContentStyle: {
+      type: Array,
+      default: () => {
+        return [
+          // {
+          //   width:'200px',
+          //   border:'1px solid red'
+          // },
+          // {
+          //   width:'200px'
+          // }
+        ];
+      },
+    },
+    visibleLoading: {
+      type: Boolean,
+      default: true,
+    },
+    // // 表格平均分的份数
+    // ava: {
+    //   type: Number,
+    //   default: 8
+    // },
+    // // 表头高度--默认占比10%
+    // headerHeightAva: {
+    //   type: String,
+    //   default: '10%'
+    // },
+    // // 表格主体平均分成的份数
+    // tableContentAva: {
+    //   type: Number,
+    //   default: 5
+    // },
+  },
+  data() {
+    return {
+      // 显示人员详情
+      showedPeopleMoreInfo: false,
+
+      currentPepeleId: "",
+      currentPepeleGridName: "",
+
+      visiblePopList: [
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+      ],
+    };
+  },
+  watch: {
+    tableData(arr) {
+      if (Array.isArray(arr)) {
+        this.visiblePopList = new Array(arr.length).fill(false);
+      }
+    },
+  },
+
+  mounted() {
+    window.addEventListener("click", (e) => {
+      this.visiblePopList = new Array(this.visiblePopList.length).fill(false);
+    });
+  },
+
+  created() {},
+
+  methods: {
+    toUserInfo(uid) {
+      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
+    },
+
+    handlePeopleItem(uid, gridName) {
+      this.currentPepeleId = uid;
+      this.currentPepeleGridName = gridName;
+
+      this.showedPeopleMoreInfo = true;
+    },
+
+    onClickMorePop(index) {
+      this.visiblePopList.forEach((item, indexs) => {
+        if (index == indexs) {
+          Vue.set(this.visiblePopList, index, true);
+        } else {
+          Vue.set(this.visiblePopList, indexs, false);
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.warning-table {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  .table {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #dfdfdd;
+
+    &-header {
+      width: 100%;
+      height: 50px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      background: #2194fe;
+      font-size: 16px;
+      font-weight: 400;
+      color: #ffffff;
+
+      &-th {
+        text-align: center;
+        width: 20%;
+        &:nth-child(1) {
+          width: 5%;
+        }
+        &:nth-child(2) {
+          width: 25%;
+        }
+        &:nth-child(3) {
+          width: 25%;
+        }
+        &:nth-child(5) {
+          width: 25%;
+        }
+      }
+    }
+
+    &-body {
+      box-sizing: border-box;
+      width: 100%;
+      height: calc(100% - 50px);
+      font-size: 16px;
+      font-weight: 400;
+      color: #333;
+      &-tr {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        border-bottom: 1px dashed #dfdfdd;
+
+        .td {
+          text-align: center;
+          width: 20%;
+          border-left: 1px dashed #dfdfdd;
+          height: 50px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+
+          &:nth-child(1) {
+            width: 5%;
+            border-left: 0;
+          }
+          &:nth-child(2) {
+            width: 25%;
+          }
+          &:nth-child(3) {
+            width: 25%;
+          }
+          &:nth-child(5) {
+            width: 25%;
+          }
+          a {
+            cursor: pointer;
+          }
+          .more {
+            font-size: 16px;
+            font-weight: 400;
+            color: #e4dc00;
+            position: relative;
+            cursor: pointer;
+
+            &-pop {
+              box-sizing: border-box;
+              display: block;
+              box-sizing: border-box;
+              width: 215px;
+              height: auto;
+              line-height: 20px;
+              border: 1px solid red;
+              position: absolute;
+              right: -100%;
+              top: 150%;
+              background: #fff;
+              box-shadow: 0 0 10px 0 #2194fe;
+              border: 1px solid #42a4fe;
+              border-radius: 5px;
+              font-size: 9px;
+              font-weight: 400;
+              color: #333;
+              padding: 16px 8px 10px 9px;
+              z-index: 1;
+              cursor: default;
+              // &::after{
+              //   position: absolute;
+              //   left: 30%;
+              //   top: -30%;
+              //   display: flex;
+              //   content:'';
+              //   width: 0;
+              //   height: 0;
+              //   border-width: 13px;
+              //   border-style: solid;
+              //   border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
+              //   // border-color: transparent transparent red transparent;
+              //   transform: translate(-50%,0);
+              // }
+            }
+          }
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
+      &-tr:nth-child(2n) {
+      }
+
+      &-tr:hover {
+        background: rgba(16, 75, 164, 0.1);
+      }
+      // 暂无数据
+      .no-data {
+        width: 100%;
+        height: calc(100% - 50px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &-img {
+          width: 249px;
+          height: 172px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/modules/warning/index.vue b/src/views/modules/warning/index.vue
new file mode 100644
index 00000000..00121565
--- /dev/null
+++ b/src/views/modules/warning/index.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="warning-box">
+    <div class="warning-box-top">
+      <div class="top-item" v-for="(item, index) in warningList" :key="index">
+        <div class="top-item-img">
+          <img :src="item.managementIcon" />
+          <div class="top-item-left">
+            <span>{{ item.label }}</span>
+            <span>{{ item.count }}</span>
+          </div>
+        </div>
+        <div class="top-item-num">
+          <div
+            class="num-item"
+            :class="{
+              'num-item-active': activeIndex == index && activeLevel == '1',
+            }"
+            @click="onClickList(index, '1')"
+          >
+            <div>{{ item.level1 }}-{{ item.level2 }}人</div>
+            <div>
+              <div>{{ item.levelCount1 }}栋</div>
+              <img
+                src="../../../assets/img/modules/visual/right-icon.png"
+                class="right-icon"
+              />
+            </div>
+          </div>
+          <div
+            class="num-item"
+            :class="{
+              'num-item-active': activeIndex == index && activeLevel == '2',
+            }"
+            @click="onClickList(index, '2')"
+          >
+            <div>{{ item.level2 }}人以上</div>
+            <div>
+              <div>{{ item.levelCount2 }}栋</div>
+              <img
+                src="../../../assets/img/modules/visual/right-icon.png"
+                class="right-icon"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="warning-box-bottom">
+      <screen-table
+        :headerList="headerList"
+        :tableData="tableData"
+        :visibleLoading="visibleLoading"
+      ></screen-table>
+      <div class="pagination">
+        <el-pagination
+          :current-page="pageNo"
+          :page-size="pageSize"
+          background
+          layout="prev, pager, next"
+          @size-change="pageSizeChangeHandleNew"
+          @current-change="pageCurrentChangeHandleNew"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import screenTable from "./components/screen-table/index";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+
+export default {
+  name: "warning-box",
+  components: {
+    cptCard,
+    screenTable,
+  },
+  props: {
+    buildingId: {
+      type: String,
+      default: "",
+    },
+    configId: {
+      type: String,
+      default: "",
+    },
+  },
+
+  data() {
+    return {
+      warningList: [],
+      headerList: [
+        { title: "序号" },
+        { title: "所属网格" },
+        { title: "所属小区" },
+        { title: "楼号" },
+        { title: "姓名" },
+      ],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      visibleLoading: true,
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      activeIndex: 0,
+      activeLevel: "1",
+    };
+  },
+  async mounted() {
+    await nextTick(100);
+    this.getBuildingwarnlist();
+  },
+  methods: {
+    onClickList(index, level) {
+      this.activeIndex = index;
+      this.activeLevel = level;
+      this.pageNo = 1;
+      this.getUserwarnlist();
+    },
+    //具体人员列表
+    async getUserwarnlist() {
+      const { activeIndex, activeLevel, warningList } = this;
+      const reqItem = warningList[activeIndex];
+      let tableData = [];
+      const url = "/epmetuser/statsresiwarn/userwarnlist";
+      let params = {
+        configId: reqItem.configId,
+        buildingIdList: reqItem["buildingIdList" + activeLevel],
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        data.list.forEach((item, index) => {
+          tableData.push([
+            index + 1,
+            item.gridName,
+            item.neighborhoodName,
+            item.buildingName,
+            item.userList || "暂无",
+          ]);
+        });
+        this.tableData = tableData;
+        this.total = data.total;
+      } else {
+      }
+    },
+    // 【人员预警】 楼宇预警数量列表
+    async getBuildingwarnlist() {
+      const url = "/epmetuser/statsresiwarn/buildingwarnlist";
+      let params = {
+        agencyId: this.$store.state.user.agencyId,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.warningList = data;
+        this.visibleLoading = false;
+        const { buildingId, configId } = this;
+        if (configId && buildingId) {
+          let activeIndex = 0;
+          let activeLevel = 1;
+          data.forEach((item, index) => {
+            if (item.configId == configId) {
+              activeIndex = index;
+              if (item.buildingIdList1.indexOf(buildingId) !== -1) {
+                activeLevel = 1;
+              }
+              if (item.buildingIdList2.indexOf(buildingId) !== -1) {
+                activeLevel = 2;
+              }
+              if (item.buildingIdList3.indexOf(buildingId) !== -1) {
+                activeLevel = 3;
+              }
+            }
+          });
+          this.activeIndex = activeIndex;
+          this.activeLevel = activeLevel;
+        }
+        this.getUserwarnlist();
+      } else {
+      }
+    },
+    pageSizeChangeHandleNew(val) {
+      this.pageNo = 1;
+      this.pageSize = val;
+    },
+    pageCurrentChangeHandleNew(val) {
+      this.pageNo = val;
+      this.getUserwarnlist();
+    },
+  },
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/modules/warning.scss" scoped></style>