diff --git a/src/assets/img/shuju/measure/huang@2x.png b/src/assets/img/shuju/measure/huang@2x.png
new file mode 100644
index 00000000..b40cd4c0
Binary files /dev/null and b/src/assets/img/shuju/measure/huang@2x.png differ
diff --git a/src/assets/img/shuju/measure/lan@2x.png b/src/assets/img/shuju/measure/lan@2x.png
new file mode 100644
index 00000000..9a078223
Binary files /dev/null and b/src/assets/img/shuju/measure/lan@2x.png differ
diff --git a/src/assets/img/shuju/measure/lanlv@2x.png b/src/assets/img/shuju/measure/lanlv@2x.png
new file mode 100644
index 00000000..190ea272
Binary files /dev/null and b/src/assets/img/shuju/measure/lanlv@2x.png differ
diff --git a/src/assets/img/shuju/measure/lv@2x.png b/src/assets/img/shuju/measure/lv@2x.png
new file mode 100644
index 00000000..6b09fde3
Binary files /dev/null and b/src/assets/img/shuju/measure/lv@2x.png differ
diff --git a/src/assets/img/shuju/measure/zi@2x.png b/src/assets/img/shuju/measure/zi@2x.png
new file mode 100644
index 00000000..6bd33116
Binary files /dev/null and b/src/assets/img/shuju/measure/zi@2x.png differ
diff --git a/src/router/index.js b/src/router/index.js
index bbb80d07..bc43c78a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -282,7 +282,25 @@ router.beforeEach((to, from, next) => {
         },
         {
           icon: "icon-setting",
-          id: "22213211",
+          id: "2221321001",
+          name: "社区党建",
+          // url: "visual/basicinfo/basicInfoMain",
+          children: [
+            {
+              url: "/visual/communityParty/party",
+              name: "党员信息统计",
+              id: "5feawfwaefwa578",
+            },
+            {
+              url: "/visual/communityParty/community",
+              name: "区域化党建",
+              id: "5fwaefwaefawef588",
+            },
+          ], 
+        },
+        {
+          icon: "icon-setting",
+          id: "2221321123",
           name: "措施清单",
           // url: "visual/basicinfo/basicInfoMain",
           children: [
diff --git a/src/views/modules/visual/communityParty/community.vue b/src/views/modules/visual/communityParty/community.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/modules/visual/communityParty/party.vue b/src/views/modules/visual/communityParty/party.vue
new file mode 100644
index 00000000..6d3a3efd
--- /dev/null
+++ b/src/views/modules/visual/communityParty/party.vue
@@ -0,0 +1,744 @@
+<template>
+  <div class="warning-box">
+    <cpt-card>
+      <div class="card-title">
+        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          <el-dropdown trigger="click">
+            <span class="el-dropdown-link">
+              全部网格<i class="el-icon-caret-bottom el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>黄金糕</el-dropdown-item>
+              <el-dropdown-item>狮子头</el-dropdown-item>
+              <el-dropdown-item>螺蛳粉</el-dropdown-item>
+              <el-dropdown-item>双皮奶</el-dropdown-item>
+              <el-dropdown-item>蚵仔煎</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+        <!-- <div class="title-time">
+          <div class="title-time-label">选择时间</div>
+          <div class="">
+            <el-date-picker
+              v-model="value2"
+              type="month"
+              placeholder="选择月">
+            </el-date-picker>
+          </div>
+        </div> -->
+      </div>
+      <div class="card-echart">
+        <div class="card-left">
+          <div class="card-left-title">党员年龄统计</div>
+          <div class="card-flex">
+            <div class="echart-wr">
+              <div class="echart-cicle"></div>
+              <div id="echartOrg" class="echart-org"></div>
+            </div>
+            <div class="echarts-tips echarts-tips-wd50">
+              <div class="tips-lists">
+                <div v-for="item in ageItem" :key="item.value" class="tips-items">
+                  <div class="tips-items-title" :class="'tips-items-title' + item.value">
+                    {{ item.name }}
+                  </div>
+                  <div class="tips-items-num">
+                    <div class="tips-item-count">{{item.value}}</div>
+                    <div class="tips-item-has">25%</div>
+                  </div>
+                </div>
+                
+              </div>
+            </div>
+            
+          </div>
+          <div class="warning-box-bottom">
+            <screen-table
+              :headerList="headerList"
+              :tableData="tableData"
+              :visibleLoading="visibleLoading"
+              :operate="false"
+            ></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>
+        <div class="card-left">
+          <div class="card-left-title">党员学历统计</div>
+          <div class="card-flex">
+            <div class="echart-wr echart-wr100">
+              <div class="echart-cicle echart-cicle0"></div>
+              <div id="echartType" class="echart-org"></div>
+            </div>
+            <div v-if="false" class="echarts-tips">
+              <div class="tips-list">
+                <div v-for="item in eduItem" :key="item.value" class="tips-item">
+                  <div class="tips-item-icon" :style="'background:' + item.color"></div>
+                  <div class="tips-item-text">{{item.name}}</div>
+                </div>
+                
+              </div>
+            </div>
+          </div>
+          <div class="warning-box-bottom">
+            <screen-table
+              :headerList="headerList"
+              :tableData="tableData"
+              :visibleLoading="visibleLoading"
+              :operate="false"
+            ></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>
+      </div>
+
+      
+    </cpt-card>
+  </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";
+
+import * as echarts from 'echarts';
+export default {
+  name: "warning-box",
+  components: {
+    cptCard,
+    screenTable,
+  },
+  data() {
+    return {
+      warningList: [],
+      headerList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "姓名", coulmn: 'gridName' },
+        { title: "年龄", coulmn: 'buildingName' },
+        { title: "手机号码", coulmn: 'neighborhoodName' }
+      ],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      value2: '',
+      visibleLoading: true,
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      activeIndex: 0,
+      activeLevel: "1",
+      eduItem: [
+        {
+          name: '小学',
+          value: 0,
+          color: 'rgba(27, 81, 255, 1)'
+        }, {
+          name: '初中',
+          value: 1,
+          color: 'rgba(0, 229, 237, 1)'
+        }, {
+          name: '高中',
+          value: 2,
+          color: 'rgba(120, 0, 255, 1)'
+        }, {
+          name: '中专',
+          value: 3,
+          color: 'rgba(255, 120, 0, 1)'
+        }, {
+          name: '大专',
+          value: 4,
+          color: 'rgba(255, 186, 0, 1)'
+        }, {
+          name: '本科',
+          value: 5,
+          color: 'rgba(22, 215, 131, 1)'
+        }, {
+          name: '硕士',
+          value: 6,
+          color: 'rgba(42, 0, 255, 1)'
+        }, {
+          name: '博士',
+          value: 7,
+          color: 'rgba(198, 0, 255, 1)'
+        }, {
+          name: '其他',
+          value: 8,
+          color: 'rgba(255, 42, 0, 1)'
+        }
+      ],
+      ageItem: [
+        {
+          name: '50岁以下',
+          value: 1,
+          color: 'rgba(27, 81, 255, 1)'
+        }, {
+          name: '50-59岁',
+          value: 2,
+          color: 'rgba(0, 229, 237, 1)'
+        }, {
+          name: '60-69岁',
+          value: 3,
+          color: 'rgba(120, 0, 255, 1)'
+        }, {
+          name: '70-79岁',
+          value: 4,
+          color: 'rgba(255, 120, 0, 1)'
+        }, {
+          name: '80岁以上',
+          value: 5,
+          color: 'rgba(255, 186, 0, 1)'
+        }
+      ],
+
+    };
+  },
+  async mounted() {
+    await nextTick(100);
+    this.initCharts()
+    this.initChartType()
+    this.getBuildingwarnlist();
+  },
+  methods: {
+    initCharts() {
+      const eId = document.getElementById('echartOrg')
+      let _charts = echarts.init(eId)
+      let option = {
+        tooltip: {
+          show: false,
+          trigger: 'item'
+        },
+        legend: {
+          show: false,
+          orient: 'vertical',
+          top: '40%',
+          left: 'right',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        title: {
+          text: '12000',  //图形标题，配置在中间对应效果图的80%
+          subtext: '总数',
+          left: "center",
+          top: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 28,
+            align: "center"
+          },
+          subtextStyle: {
+            fontSize: 16,
+            color: '#fff'
+          }
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            // center: ['10%', '50%'],
+            radius: ['40%', '60%'],
+            avoidLabelOverlap: true,
+            // top: top + '%',
+            // height: '80%',
+            left: 'center',
+            width: 400,
+            label: {
+              show: true,
+              position: 'outer',
+              alignTo: 'edge',
+              formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+              minMargin: 5,
+              edgeDistance: 20,
+              lineHeight: 15,
+              color: '#fff',
+              fontSize: 12,
+              // padding: [5],
+              distanceToLabelLine: 10,
+              rich: {
+                name: {
+                  padding: [0, 6, 0, 6]
+                },
+                a: {
+                  fontSize: 15,
+                  color: '#fff',
+                  padding: [0, 6, 0, 6]
+                },
+                r: {
+                  backgroundColor: 'auto',
+                  borderRadius: 6,
+                  width: 6,
+                  height: 6,
+                  // padding: [3, 3, 0, -12]
+                }
+              }
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '14',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: true,
+              length: 20,
+              length2: 0,
+              maxSurfaceAngle: 80,
+              lineStyle: {
+                cap: 'round'
+              }
+            },
+            labelLayout: function (params) {
+              const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+              const points = params.labelLinePoints;
+              // Update the end point.
+              points[2][0] = isLeft
+                ? params.labelRect.x
+                : params.labelRect.x + params.labelRect.width;
+              return {
+                labelLinePoints: points
+              };
+            },
+            data: this.ageItem
+          }
+        ]
+      }
+      option && _charts.setOption(option);
+
+    },
+    initChartType() {
+      const eId = document.getElementById('echartType')
+      let _charts = echarts.init(eId)
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          show: true,
+          orient: 'vertical',
+          top: '20%',
+          right: 0,
+          textStyle: {
+            width: 90,
+            color: '#fff',
+            rich: {
+              a: {
+                width: 90
+              }
+            }
+          },
+          formatter: name => {
+            for (let a = 0; a < this.eduItem.length; a++) {
+              // this.data  这个数据中有名称和次数
+              if (this.eduItem[a].name === name) {
+                //两个名称进行对比，取出对应的次数
+                let params1 = name + "\n"; //然后return你需要的legend格式即可
+                console.log(params1);
+                let tmp = params1.split("\n");
+                let res = "" + params1;
+                for (let i in tmp) {
+                  res = res.replace(tmp[i], "");
+                }
+                return res + params1;
+              }
+            }
+          //   var target;
+          //   for(var i = 0; i < this.eduItem.length; i++){
+          //       if(i == this.eduItem.length && parseFloat(this.eduItem[i].value * 100).toFixed(2) < parseFloat(0.01)){
+          //           target = " (<0.01"
+          //           break;
+          //       }
+          //       if(name == this.eduItem[i].name){
+          //           target = " (" + (this.eduItem[i].value * 100).toFixed(2) + ""
+          //           break;
+          //       }
+          //   }
+          //   var arr = [
+          //       '{a|' + name + target + '%)}',
+          //   ]
+          //   return arr.join('\n');
+          }
+        },
+        title: {
+          text: '12000',  //图形标题，配置在中间对应效果图的80%
+          subtext: '总数',
+          left: 196,
+          top: "center",
+          textAlign: 'center',
+          textStyle: {
+            color: "#fff",
+            fontSize: 28,
+            align: "center"
+          },
+          subtextStyle: {
+            fontSize: 16,
+            color: '#fff',
+            align: 'center'
+          }
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            // center: ['50%', '50%'],
+            radius: ['40%', '60%'],
+            avoidLabelOverlap: true,
+            // top: top + '%',
+            // height: '80%',
+            // left: 0,
+            width: 400,
+            label: {
+              position: 'outside',
+              alignTo: 'edge',
+              formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+              minMargin: 5,
+              edgeDistance: 20,
+              lineHeight: 15,
+              color: '#fff',
+              fontSize: 15,
+              rich: {
+                name: {
+                  padding: [0, 6, 0, 6]
+                },
+                a: {
+                  fontSize: 15,
+                  color: '#fff',
+                  padding: [0, 6, 0, 6]
+                },
+                r: {
+                  backgroundColor: 'auto',
+                  borderRadius: 6,
+                  width: 6,
+                  height: 6,
+                  // padding: [3, 3, 0, -12]
+                }
+              }
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '14',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: true,
+              length: 20,
+              length2: 0,
+              maxSurfaceAngle: 80
+            },
+            labelLayout: function (params) {
+              const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+              const points = params.labelLinePoints;
+              // Update the end point.
+              points[2][0] = isLeft
+                ? params.labelRect.x
+                : params.labelRect.x + params.labelRect.width;
+              return {
+                labelLinePoints: points
+              };
+            },
+            data: this.eduItem
+          }
+        ]
+      }
+      option && _charts.setOption(option);
+
+    },
+    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) {
+        tableData = data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1,
+            residentNames: item.residentNames || "暂无"
+          }
+        });
+        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;
+        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/visual/warning.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  ::v-deep .el-dropdown {
+    font-size: 18px;
+    color: #fff;
+    font-weight: 800;
+  }
+  .title-time {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin-left: 30px;
+    font-size: 14px;
+    color: #fff;
+    .title-time-label {
+      margin-right: 10px;
+    }
+    ::v-deep .el-date-editor--month {
+      width: 100px;
+      .el-input__inner {
+        width: 100px;
+        height: 24px;
+        box-sizing: border-box;
+        padding: 0;
+        font-size: 14px;
+        color: #fff;
+        line-height: 24px;
+        text-align: center;
+        background: #06186D;
+        border: 1px solid #1A64CC;
+        border-radius: 2px;
+      }
+      .el-input__prefix {
+        display: none;
+      }
+      .el-input__suffix {
+        right: 0;
+        .el-input__icon {
+          line-height: 24px;
+        }
+      }
+      
+    }
+  }
+}
+.card-echart {
+  display: flex;
+  margin-top: 40px;
+  height: 100%;
+  .card-left {
+    position: relative;
+    flex: 1;
+    // display: flex;
+    height: 100%;
+    .card-flex {
+      width: 100%;
+      display: flex;
+    }
+  }
+}
+.card-left-title {
+  position: relative;
+  padding-left: 40px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+}
+.card-left-title::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+  margin-top: -6px;
+  background: #2865FA;
+  border-radius: 50%;
+}
+.echart-wr {
+  position: relative;
+  flex-shrink: 0;
+  width: 50%;
+  height: 320px;
+  box-sizing: border-box;
+  .echart-org {
+    width: 100%;
+    height: 100%;
+  }
+  .echart-cicle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 240px;
+    height: 240px;
+    box-sizing: border-box;
+    margin-top: -120px;
+    margin-left: -120px;
+    border: 1px dashed rgba(0, 96, 240, 1);
+    border-radius: 50%;
+  }
+  .echart-cicle0 {
+    left: 80px;
+    margin-left: 0;
+  }
+}
+.echart-wr100 {
+  width: 70%;
+}
+.echarts-tips {
+  width: 40%;
+  // flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.echarts-tips-wd50 {
+  width: 320px;
+}
+.tips-list, .tips-item, .tips-lists, .tips-items-num {
+  display: flex;
+  align-items: center;
+}
+.tips-list {
+  // width: 100%;
+  // height: 100%;
+  flex-wrap: wrap;
+  // justify-content: center;
+  .tips-item {
+    // flex: 1;
+    width: 50%;
+    margin-top: 20px;
+    // margin-right: 40px;
+    cursor: pointer;
+    .tips-item-icon {
+      width: 20px;
+      height: 10px;
+      box-sizing: border-box;
+      margin-right: 8px;
+      background: #1B51FF;
+      border-radius: 2px;
+    }
+    .tips-item-text {
+      font-size: 16px;
+      color: #D2E7FF;
+    }
+  }
+}
+.tips-lists {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 30px 0 0 30px;
+  flex-wrap: wrap;
+  .tips-items {
+    margin-bottom: 30px;
+    margin-right: 40px;
+    // width: 50%;
+    cursor: pointer;
+    .tips-items-title {
+      position: relative;
+      width: 100px;
+      height: 26px;
+      box-sizing: border-box;
+      padding-left: 6px;
+      font-size: 16px;
+      color: #EFF0F1;
+      background: url('../../../../assets/img/shuju/measure/zi@2x.png') no-repeat left bottom;
+      &1 {
+        background: url('../../../../assets/img/shuju/measure/huang@2x.png') no-repeat left bottom;
+      }
+      &2 {
+        background: url('../../../../assets/img/shuju/measure/lan@2x.png') no-repeat left bottom;
+      }
+      &3 {
+        background: url('../../../../assets/img/shuju/measure/lanlv@2x.png') no-repeat left bottom;
+      }
+      &4 {
+        background: url('../../../../assets/img/shuju/measure/lv@2x.png') no-repeat left bottom;
+      }
+    }
+    .tips-items-num {
+      justify-content: space-between;
+      box-sizing: border-box;
+      margin-top: 10px;
+      // padding-right: 30px;
+      font-size: 20px;
+      .tips-item-has {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.warning-box-bottom {
+  height: calc(100% - 500px);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 30px;
+  // overflow-y: scroll;
+}
+</style>