diff --git a/src/assets/img/shuju/measure/bg-left.png b/src/assets/img/shuju/measure/bg-left.png
new file mode 100644
index 00000000..e35c9bc8
Binary files /dev/null and b/src/assets/img/shuju/measure/bg-left.png differ
diff --git a/src/assets/img/shuju/measure/dangyuan.png b/src/assets/img/shuju/measure/dangyuan.png
new file mode 100644
index 00000000..74ac72ae
Binary files /dev/null and b/src/assets/img/shuju/measure/dangyuan.png differ
diff --git a/src/assets/img/shuju/measure/jumin.png b/src/assets/img/shuju/measure/jumin.png
new file mode 100644
index 00000000..74003ab8
Binary files /dev/null and b/src/assets/img/shuju/measure/jumin.png differ
diff --git a/src/views/modules/visual/components/screen-table/index.vue b/src/views/modules/visual/components/screen-table/index.vue
index 0a7cd45a..cd75b943 100644
--- a/src/views/modules/visual/components/screen-table/index.vue
+++ b/src/views/modules/visual/components/screen-table/index.vue
@@ -175,14 +175,12 @@ export default {
   watch: {
     tableData(arr) {
       if (Array.isArray(arr)) {
-        console.log('tabldate-dddsss', this.tableData)
         this.visiblePopList = new Array(arr.length).fill(false);
       }
     },
   },
 
   mounted() {
-    console.log('tabldate-ddd', this.tableData)
     window.addEventListener("click", (e) => {
       this.visiblePopList = new Array(this.visiblePopList.length).fill(false);
     });
diff --git a/src/views/modules/visual/measure/service.vue b/src/views/modules/visual/measure/service.vue
index bf1bb89e..eff367fe 100644
--- a/src/views/modules/visual/measure/service.vue
+++ b/src/views/modules/visual/measure/service.vue
@@ -182,6 +182,7 @@ export default {
       let _charts = echarts.init(eId)
       let option = {
         tooltip: {
+          show: false,
           trigger: 'item'
         },
         legend: {
@@ -220,19 +221,32 @@ export default {
             left: 'center',
             width: 400,
             label: {
+              show: true,
               position: 'outer',
               alignTo: 'edge',
-              formatter: '{a|{c}}\n{name|{b}}',
+              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'
+                  color: '#fff',
+                  padding: [0, 6, 0, 6]
+                },
+                r: {
+                  backgroundColor: 'auto',
+                  borderRadius: 6,
+                  width: 6,
+                  height: 6,
+                  // padding: [3, 3, 0, -12]
                 }
               }
             },
@@ -247,7 +261,10 @@ export default {
               show: true,
               length: 20,
               length2: 0,
-              maxSurfaceAngle: 80
+              maxSurfaceAngle: 80,
+              lineStyle: {
+                cap: 'round'
+              }
             },
             labelLayout: function (params) {
               const isLeft = params.labelRect.x < _charts.getWidth() / 2;
diff --git a/src/views/modules/visual/measure/volunteer.vue b/src/views/modules/visual/measure/volunteer.vue
index e69de29b..3f2728f2 100644
--- a/src/views/modules/visual/measure/volunteer.vue
+++ b/src/views/modules/visual/measure/volunteer.vue
@@ -0,0 +1,495 @@
+<template>
+  <div class="warning-box">
+    <cpt-card class="card-wr">
+      <div class="card-title">
+        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          志愿者服务情况
+        </div>
+      </div>
+
+      <div class="card-echart">
+        <div class="card-left">
+          <div class="card-count">
+            <div class="card-count-item">
+              <div class="card-count-content">
+                <div class="card-count-num">6500</div>
+                <div class="card-count-label">党员数量</div>
+              </div>
+            </div>
+            <div class="card-count-item">
+              <div class="card-count-content">
+                <div class="card-count-num">6500</div>
+                <div class="card-count-label">居民数量</div>
+              </div>
+            </div>
+          </div>
+          <div class="echart-wr">
+            <!-- <div class="echart-cicle"></div> -->
+            <div id="echartService" class="echart-org"></div>
+          </div>
+          
+        </div>
+        
+      </div>
+
+      <div class="card-echart">
+        <div class="card-left">
+          <div class="card-count">
+            <div class="card-count-item">
+              <div class="card-count-content">
+                <div class="card-count-num">6500</div>
+                <div class="card-count-label">党员数量</div>
+              </div>
+            </div>
+            <div class="card-count-item">
+              <div class="card-count-content">
+                <div class="card-count-num">6500</div>
+                <div class="card-count-label">居民数量</div>
+              </div>
+            </div>
+          </div>
+          <div class="echart-wr">
+            <!-- <div class="echart-cicle"></div> -->
+            <div id="echartCount" class="echart-org"></div>
+          </div>
+          
+        </div>
+        
+      </div>
+
+    </cpt-card>
+    <cpt-card class="card-wr">
+      <div class="card-title">
+        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          多元化治理平面图
+        </div>
+      </div>
+
+      <div class="map-tips">
+        <div class="map-tips-item">
+          <div class="map-tips-icon"></div>
+          <div class="map-tips-label">调解员</div>
+        </div>
+        <div class="map-tips-item">
+          <div class="map-tips-icon"></div>
+          <div class="map-tips-label">调解员</div>
+        </div>
+        <div class="map-tips-item">
+          <div class="map-tips-icon"></div>
+          <div class="map-tips-label">能人达人</div>
+        </div>
+        <div class="map-tips-item">
+          <div class="map-tips-icon"></div>
+          <div class="map-tips-label">治安巡逻</div>
+        </div>
+        <div class="map-tips-item">
+          <div class="map-tips-icon"></div>
+          <div class="map-tips-label">代办员</div>
+        </div>
+      </div>
+
+      <div class="card-map">
+        这里是地图容器
+      </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' },
+        { title: "上报人", coulmn: 'residentNames' },
+        { title: "上报时间", coulmn: 'residentNames' },
+        { title: "是否认领", coulmn: 'residentNames' },
+        { title: "认领方", coulmn: 'residentNames' },
+        { title: "认领时间", coulmn: 'residentNames' }
+      ],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      value2: '',
+      visibleLoading: true,
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      activeIndex: 0,
+      activeLevel: "1",
+    };
+  },
+  async mounted() {
+    await nextTick(100);
+    this.initCharts()
+    this.initCount()
+    this.getBuildingwarnlist();
+  },
+  methods: {
+    initCharts() {
+      const eId = document.getElementById('echartService')
+      let _charts = echarts.init(eId)
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          show: true,
+          top: 'bottom',
+          left: 'center',
+          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',
+            radius: ['50%', '60%'],
+            avoidLabelOverlap: false,
+            left: 'center',
+            width: 400,
+            label: {
+              show: false,
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: '14',
+                fontWeight: 'bold'
+              }
+            },
+            
+            data: [
+              { 
+                value: 104, 
+                name: '党员', 
+                itemStyle: {
+                  color: 'rgba(26, 178, 255, 1)'
+                } 
+              },
+              { 
+                value: 735, 
+                name: '居民', 
+                itemStyle: {
+                  color: 'rgba(250, 193, 38, 1)'
+                } 
+              }
+            ]
+          }
+        ]
+      }
+      option && _charts.setOption(option);
+
+    },
+    initCount() {
+      const eId = document.getElementById('echartCount')
+      let _charts = echarts.init(eId)
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          show: true,
+          top: 'bottom',
+          left: 'center',
+          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: ['50%', '60%'],
+            avoidLabelOverlap: false,
+            // top: top + '%',
+            // height: '80%',
+            left: 'center',
+            width: 400,
+            label: {
+              show: false,
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: '14',
+                fontWeight: 'bold'
+              }
+            },
+            
+            data: [
+              { 
+                value: 1048, 
+                name: '党员', 
+                itemStyle: {
+                  color: 'rgba(26, 178, 255, 1)'
+                } 
+              },
+              { 
+                value: 735, 
+                name: '居民', 
+                itemStyle: {
+                  color: 'rgba(250, 193, 38, 1)'
+                } 
+              }
+            ]
+          }
+        ]
+      }
+      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>
+.warning-box {
+  display: flex;
+  .card-wr {
+    flex: 1;
+  }
+  .card-wr:last-child {
+    margin-left: 20px;
+  }
+}
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  .title-label {
+    font-size: 16px;
+    font-weight: 800;
+  }
+  ::v-deep .el-dropdown {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 800;
+  }
+  
+}
+.card-echart {
+  display: flex;
+  margin-top: 40px;
+  
+  .card-left {
+    position: relative;
+    flex: 1;
+    display: flex;
+  }
+}
+.card-echart:last-child {
+  padding-bottom: 40px;
+}
+.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%;
+  }
+}
+.card-count {
+  flex: 1;
+  .card-count-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 418px;
+    height: 124px;
+    box-sizing: border-box;
+    margin-top: 20px;
+    // padding-left: 192px;
+    background: url('../../../../assets/img/shuju/measure/dangyuan.png') center no-repeat;
+    background-size: cover;
+    .card-count-content {
+      position: relative;
+      box-sizing: border-box;
+      padding-left: 30px;
+      color: #fff;
+      cursor: pointer;
+      .card-count-num {
+        font-size: 32px;
+        font-weight: bold;
+      }
+      .card-count-label {
+        margin-top: 6px;
+        font-size: 16px;
+        color: rgba(255, 255, 255, .72);
+      }
+    }
+    .card-count-content::after {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      content: '';
+      width: 1px;
+      height: 50px;
+      margin-top: -25px;
+      background: rgba(98, 162, 205, 1);
+    }
+  }
+  .card-count-item:last-child {
+    background: url('../../../../assets/img/shuju/measure/jumin.png') center no-repeat;
+  }
+}
+
+.map-tips {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding-top: 10px;
+  padding-bottom: 20px;
+  .map-tips-item {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    margin-right: 40px;
+    .map-tips-icon {
+      width: 20px;
+      height: 10px;
+      box-sizing: border-box;
+      margin-right: 10px;
+      background: #DD2719;
+      border-radius: 2px;
+    }
+    .map-tips-label {
+      font-size: 16px;
+      color: #fff;
+    }
+  }
+}
+
+</style>