diff --git a/src/assets/scss/modules/visual/duoyuanfenxi.scss b/src/assets/scss/modules/visual/duoyuanfenxi.scss
new file mode 100644
index 00000000..222a39cd
--- /dev/null
+++ b/src/assets/scss/modules/visual/duoyuanfenxi.scss
@@ -0,0 +1,184 @@
+@import '../../c/config';
+@import '../../c/function';
+@import './c/common';
+
+
+.g-cpt-resi {
+  display: flex;
+  flex-direction: row;
+  height: calc(100vh - 180px);
+
+  .g-l {
+    flex-shrink: 0;
+    width: 700px;
+    height: calc(100vh - 230px);
+
+    .l_top {
+      height: 385px;
+      display: flex;
+      align-items: center;
+   
+    
+    }
+    .l_bottom {
+      height: calc(100vh - 230px - 385px);
+      margin-top: 40px;
+    }
+  }
+
+  .g-r {
+    text-align: center;
+    margin: 20px 10px 20px;
+    width: calc(100vw - 700px);
+    height: calc(100vh - 180px - 20px);
+  }
+}
+
+.l_bottom {
+  .bottom_label {
+    position: relative;
+    padding-left: 40px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+  }
+  .bottom_label::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 20px;
+    width: 12px;
+    height: 12px;
+    box-sizing: border-box;
+    margin-top: -6px;
+    background: #2865fa;
+    border-radius: 50%;
+  }
+  > span {
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #ffffff;
+  }
+  .echart-line {
+    margin-top: 10px;
+    height: 100%;
+  }
+  .echart-grid-pie {
+    height: 320px;
+    margin-left: 30px;
+    text-align: center;
+    position: relative;
+    width: 500px;
+    box-sizing: border-box;
+  }
+  .m-tb {
+    position: relative;
+    height: 100%;
+    .tb {
+      height: calc(100% - 50px);
+      overflow-y: auto;
+      @include scrollBar;
+      /deep/ .table-status {
+        height: 220px;
+      }
+    }
+    .m-pagination {
+      box-sizing: border-box;
+      position: absolute;
+      right: 5px;
+      bottom: 5px;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: flex-end;
+
+      /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+        background: #0266d1;
+        color: #000d3f;
+      }
+
+      /deep/ .el-pagination .el-pager li {
+        background: #002e74;
+      }
+
+      /deep/ .el-pagination .btn-prev {
+        background: #002e74;
+      }
+
+      /deep/ .el-pagination .btn-next {
+        background: #002e74;
+      }
+    }
+  }
+}
+
+
+.g-r {
+}
+
+.echart-wr {
+  margin-left: 30px;
+  // margin-top: 100px;
+  text-align: center;
+  position: relative;
+  width: 600px;
+  height: 385px;
+
+  box-sizing: border-box;
+}
+
+.g-pie {
+  position: relative;
+  display: flex;
+
+  .pie-legend {
+    margin-left: 30px;
+   
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .legend_item {
+      .item_name {
+        margin-left: 5px;
+        font-size: 10px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #eff0f1;
+      }
+      > img {
+        margin-top: -10px;
+        width: 80px;
+        height: 10px;
+      }
+      .item_num {
+        .item_count {
+          font-size: 17px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+        }
+
+        .item_percent {
+          margin-left: 12px;
+          font-size: 8px;
+          font-family: PingFang SC;
+          font-weight: 300;
+          color: #ffffff;
+          line-height: 18px;
+        }
+      }
+    }
+
+    .item_last {
+      margin-top: 20px;
+    }
+  }
+}
+
+.table-status {
+  position: relative;
+  width: 240px;
+  margin: auto;
+}
diff --git a/src/assets/scss/modules/visual/shijianfenleifenxi.scss b/src/assets/scss/modules/visual/shijianfenleifenxi.scss
new file mode 100644
index 00000000..c4f19da3
--- /dev/null
+++ b/src/assets/scss/modules/visual/shijianfenleifenxi.scss
@@ -0,0 +1,181 @@
+@import '../../c/config';
+@import '../../c/function';
+@import './c/common';
+
+
+.g-cpt-resi {
+  display: flex;
+  flex-direction: row;
+  height: calc(100vh - 180px);
+
+  .g-l {
+    flex-shrink: 0;
+    width: 700px;
+    height: calc(100vh - 230px);
+
+    .l_top {
+      height: 385px;
+      display: flex;
+      align-items: center;
+   
+    
+    }
+    .l_bottom {
+      height: calc(100vh - 230px - 385px);
+      margin-top: 20px;
+    }
+  }
+
+  .g-r {
+    text-align: center;
+    margin: 20px 10px 20px;
+    width: calc(100vw - 700px);
+    height: calc(100vh - 180px - 20px);
+  }
+}
+
+.l_bottom {
+  .bottom_label {
+    position: relative;
+    padding-left: 40px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+  }
+  .bottom_label::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 20px;
+    width: 12px;
+    height: 12px;
+    box-sizing: border-box;
+    margin-top: -6px;
+    background: #2865fa;
+    border-radius: 50%;
+  }
+  > span {
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #ffffff;
+  }
+  .echart-line {
+    margin-top: 10px;
+    height: 100%;
+  }
+  .echart-grid-pie {
+    height: 320px;
+    margin-left: 30px;
+    text-align: center;
+    position: relative;
+    width: 500px;
+    box-sizing: border-box;
+  }
+}
+
+
+.g-r {
+  .m-tb {
+    position: relative;
+    height: 100%;
+    .tb {
+      height: calc(100vh - 170px - 50px - 50px);
+      overflow-y: auto;
+      @include scrollBar;
+    }
+    .m-pagination {
+      box-sizing: border-box;
+      position: absolute;
+      right: 5px;
+      bottom: 5px;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: flex-end;
+
+      /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+        background: #0266d1;
+        color: #000d3f;
+      }
+
+      /deep/ .el-pagination .el-pager li {
+        background: #002e74;
+      }
+
+      /deep/ .el-pagination .btn-prev {
+        background: #002e74;
+      }
+
+      /deep/ .el-pagination .btn-next {
+        background: #002e74;
+      }
+    }
+  }
+}
+
+.echart-wr {
+  margin-left: 30px;
+  // margin-top: 100px;
+  text-align: center;
+  position: relative;
+  width: 500px;
+  height: 385px;
+
+  box-sizing: border-box;
+}
+
+.g-pie {
+  position: relative;
+  display: flex;
+
+  .pie-legend {
+    margin-left: 30px;
+   
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .legend_item {
+      .item_name {
+        margin-left: 5px;
+        font-size: 10px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #eff0f1;
+      }
+      > img {
+        margin-top: -10px;
+        width: 80px;
+        height: 10px;
+      }
+      .item_num {
+        .item_count {
+          font-size: 17px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+        }
+
+        .item_percent {
+          margin-left: 12px;
+          font-size: 8px;
+          font-family: PingFang SC;
+          font-weight: 300;
+          color: #ffffff;
+          line-height: 18px;
+        }
+      }
+    }
+
+    .item_last {
+      margin-top: 20px;
+    }
+  }
+}
+
+.table-status {
+  position: relative;
+  width: 600px;
+  margin: auto;
+}
diff --git a/src/router/index.js b/src/router/index.js
index 4aea5aa8..f96f01b6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -319,10 +319,20 @@ router.beforeEach((to, from, next) => {
           id: "processAnalyze",
         },
         {
-          url: "/visual/communityGovern/typeAnalyze",
+          url: "/visual/communityGovern/shijianfenlei/shijianfenleifenxi",
           name: "事件分类分析",
-          id: "typeAnalyze",
+          id: "shijianfenleifenxi",
         },
+        {
+          url: "/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi",
+          name: "多元服务分析",
+          id: "duoyuanfuwufenxi",
+        },
+        // {
+        //   url: "/visual/communityGovern/typeAnalyze",
+        //   name: "事件分类分析",
+        //   id: "typeAnalyze",
+        // },
         {
           url: "/visual/communityGovern/resibuzz",
           name: "居民热议分析",
diff --git a/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanDialog.vue b/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanDialog.vue
new file mode 100644
index 00000000..c5c4634c
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanDialog.vue
@@ -0,0 +1,305 @@
+<template>
+  <div class="m-pop">
+    <div class="wrap">
+      <cpt-card>
+        <div class="title">
+          <img src="@/assets/img/shuju/title-tip.png" />
+          <span>详情</span>
+        </div>
+
+        <div class="btn-close" @click="handleClose">
+          <img src="@/assets/img/shuju/people/close.png" />
+        </div>
+        <!-- <div class="list-title">需求内容</div> -->
+        <div class="list-wr">
+          <div class="list left-list" v-infinite-scroll="getServicelist" style="overflow:auto">
+            <template v-if="servicelist.length > 0">
+            <div class="left-item" :class="activeIndex == index ? 'active-item' : ''" v-for="(item, index) in servicelist" :key="index" @click="toDetail(index)">
+              <div class="item-time">{{item.reportTime || '2022-05-18'}}</div>
+              <div class="item-content">{{item.content || '本周加班本周加班本周加班本周加班本周加班本周加班'}}</div>
+            </div>
+            </template>
+            <screen-nodata class="nodata" v-else></screen-nodata>
+          </div>
+          <div class="list right-list">
+            <template v-if="info.content">
+              <div class="item-title">需求内容</div>
+              <div class="item">
+                <div>{{ info.content }}</div>
+              </div>
+              <div class="item">
+                <span class="item-field">所属网格：</span>
+                <span>{{ info.gridName }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">需求类型：</span>
+                <span>{{ info.categoryName }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">需求状态：</span>
+                <span>{{ info.statusName }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">上报类型：</span>
+                <span>{{ info.reportTypeName }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">上报人：</span>
+                <span>{{ info.reportUserName }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">上报人联系方式	：</span>
+                <span>{{ info.reportUserMobile }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">上报时间	：</span>
+                <span>{{ info.reportTime }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">服务时间	：</span>
+                <span>{{ info.wantServiceTime }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">服务方	：</span>
+                <span>{{ info.serviceShowName }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">实际服务时间	：</span>
+                <span>{{ info.serviceStartTime }} 至 {{ info.serviceEndTime }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">完成情况	：</span>
+                <span>{{ info.finishDesc }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">评价	：</span>
+                <span>
+                  <el-rate :value="info.score" disabled></el-rate>
+                </span>
+              </div>
+            </template>
+            <screen-nodata class="nodata" v-else></screen-nodata>
+          </div>
+        </div>
+      </cpt-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import ScreenNodata from "@/views/modules/visual/components/screen-nodata"
+import cptCard from '@/views/modules/visual/cpts/card'
+import { requestPost } from '@/js/dai/request'
+
+export default {
+  name: 'dialogInfo',
+  props: {
+    userId: {
+      type: String,
+      default: '',
+    },
+    gridName: {
+      type: String,
+      default: '',
+    },
+    orgId: {
+      type: String,
+      default: ''
+    }
+  },
+
+  components: {
+    cptCard,
+    ScreenNodata
+  },
+
+  data() {
+    return {
+      pageNo: 1,
+      pageSize: 10,
+      servicelist: [],
+      info: {
+        // content: '受到供应链等不可抗力的影响，大多数车企的销量都呈现环比下滑的趋势，不过像供应链断供这样的问题只是暂时的，在复工复产后，5、6月份的销量也许就会恢复到正常水平。长远来看新能源的发展还是非常可观的，其市场格局正在逐步稳定，新能源汽车的前景仍然大有可为。',
+        // gridName: '第一网格',
+        // categoryName: '便民服务',
+        // statusName: '待处理',
+        // reportTypeName: '自身上报',
+        // reportUserName: '张三',
+        // reportUserMobile: '13794049999',
+        // reportTime: '2022-05-18 14:47:00',
+        // wantServiceTime: '2022-05-18 14:47:00',
+        // serviceShowName: '李四',
+        // serviceStartTime: '2022-05-18 14:47:00',
+        // serviceEndTime: '2022-05-18 14:47:00',
+        // finishDesc: '已解决',
+        // score: '3.5'
+      },
+      loadType: 'loading',
+      activeIndex: 0
+    }
+  },
+  created () {
+    this.servicelist = []
+  },
+  methods: {
+    // 获取组织需求列表
+    async getServicelist () {
+      if (this.loadType == 'none') {
+        return
+      }
+      const url = '/heart/residemand/service-list'
+      const params = {
+        serverId: this.orgId,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+        type: 'community_org', // 志愿者：volunteer；社区自组织：community_org；
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        if (this.pageNo == 1) {
+          this.getDemandDetail(data.list[0].demandRecId)
+        }
+        this.pageNo++
+        this.servicelist = this.servicelist.concat(data.list)
+        this.loadType = this.servicelist.length < data.total ? 'loading' : 'none'
+      } else {
+        this.$message.error(msg)
+      }
+    },    
+    // 获取需求详情
+    async getDemandDetail (id) {
+      this.info = {}
+      const url = '/heart/userdemand/demandDetail'
+      const params = {
+        demandRecId: id, // 需求id
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        this.info = data
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    toDetail (index) {
+      this.activeIndex = index
+      this.getDemandDetail(this.servicelist[index].demandRecId)
+    },
+    handleClose() {
+      this.$emit("close")
+    },
+  }
+}
+</script>
+
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
+<style lang="scss" scoped>
+@import '@/assets/scss/modules/visual/c/common';
+.m-pop {
+  .wrap {
+    .list {
+      display: block;
+      width: calc(100% - 280px);
+      max-height: 600px;
+      overflow: auto;
+      @include scrollBar;
+      .item-title {
+        padding: 0;
+        font-size: 22px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #ffffff;
+        margin-bottom: 15px;
+      }
+      .item {
+        display: flex;
+        width: 100%;
+        box-sizing: border-box;
+        margin-top: 0;
+        margin-bottom: 15px;
+        font-size: 16px;
+        cursor: pointer;
+        .item-field {
+          // width: 100px;
+          flex-shrink: 0;
+        }
+        .item-content {
+          width: 100%;
+          max-height: 420px;
+          overflow-y: auto;
+          @include scrollBar;
+        }
+        ::v-deep p {
+          margin: 0;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .item-imgs {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          
+          img {
+            display: block;
+            width: 240px;
+            height: 240px;
+            margin-right: 10px;
+          }
+        }
+      }
+      .item-desc {
+        font-size: 16px;
+        margin-bottom: 10px;
+        line-height: 24px;
+      }
+    }
+  }
+  .list-title {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 20px 0 10px 62px;
+      font-size: 20px;
+      cursor: pointer;
+    }
+}
+.list-wr {
+  display: flex;
+  padding: 0 20px;
+  .left-list {
+    width: 280px !important;
+    height: 600px;
+    overflow: auto;
+    padding: 10px 0 !important;
+    @include scrollBar;
+    .active-item {
+      border: 1px solid #0063FE !important;
+      box-shadow: 0px 0px 10px #0063fe inset;
+    }
+    .left-item {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      box-sizing: border-box;
+      margin-top: 0;
+      margin-bottom: 20px;
+      font-size: 16px;
+      cursor: pointer;
+      color: #ffffff;
+      padding: 5px;
+      border: 1px solid transparent;
+      .item-content {
+        margin-top: 10px;
+        width: 100%;    
+        overflow: hidden;    
+        text-overflow: ellipsis;    
+        white-space: nowrap;
+      }
+    }
+  }
+  .right-list {
+    padding: 0 25px !important;
+  }
+}
+</style>
diff --git a/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue b/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue
new file mode 100644
index 00000000..20059300
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue
@@ -0,0 +1,725 @@
+<template>
+  <cpt-card>
+    <div class="title">
+      <img src="@/assets/img/shuju/title-tip.png" />
+      <span>多元主体分析</span>
+
+    </div>
+    <div class="g-cpt-resi">
+      <div class="g-l">
+        <div class="l_top">
+
+          <div v-if="!pieNoData && !dataLoading"
+               class="g-pie">
+            <screen-echarts-frame class="echart-wr"
+                                  @myChartMethod="pieInitOk"
+                                  ref="pieChart"></screen-echarts-frame>
+          </div>
+          <screen-nodata class="nodata"
+                         v-if="pieNoData&& !dataLoading"></screen-nodata>
+          <div class="table-status"
+               v-if="dataLoading">
+            <screen-loading>加载中</screen-loading>
+          </div>
+
+        </div>
+        <div class="l_bottom">
+          <div class="m-tb">
+
+            <div class="tb">
+              <cpt-tb :col-list="demand.colList"
+                      :loading="demand.loading"
+                      :header="demand.header"
+                      :list="demand.list"
+                      @operate="toOrgInfo"></cpt-tb>
+
+            </div>
+            <div class="m-pagination">
+              <el-pagination :current-page="demand.pageNo"
+                            :page-size="demand.pageSize"
+                            :total="demand.total"
+                            background
+                            layout="prev, pager, next,total"
+                            @current-change="handlePageNoChange_demand">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="g-r">
+        <div class="card-wr card-wr-map">
+          <!-- <div class="card-title">
+            <img class="title-icon"
+                 src="../../../../../assets/img/shuju/title-tip.png" />
+            <div class="card-left-title">
+              多元化治理平面图
+            </div>
+          </div> -->
+
+          <div class="card-map">
+            <screen-map class="map"
+                        ref="map"
+                        @clickFeature="clickMap"
+                        :showIconLayer="true"
+                        :showPolygonLayer="true"
+                        :clickType="'popup'"
+                        :isAddOpenlay="true"></screen-map>
+          </div>
+          <div class="map-tips">
+
+            <div class="map-tips-item"
+                 v-for="item in legendArray"
+                 :key="item.optionValue">
+
+              <img class="title-icon"
+                   :src="item.url" />
+              <div class="map-tips-label">{{item.optionLabel}}</div>
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+    </div>
+    <duoyuan-dialog v-if="showInfoDialog"
+                 :orgId="orgId"
+                 @close="showInfoDialog = false" />
+  </cpt-card>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request"
+import cptCard from "@/views/modules/visual/cpts/card"
+import cptTb from "@/views/modules/visual/cpts/tb"
+import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame"
+
+import ScreenLoading from "@/views/modules/visual/components/screen-loading"
+import ScreenNodata from "@/views/modules/visual/components/screen-nodata"
+
+import screenMap from "@/views/modules/visual/components/screen-map"
+import duoyuanDialog from './duoyuanDialog.vue'
+
+import { pieOption } from './pieOption.js'
+import nextTick from 'dai-js/tools/nextTick'
+
+const transparent = 'rgba(2, 2, 2, 0)'
+const polygonColorArray = [ '#f59701', '#0067b6', '#e70014', '#8fc41e', '#00a1be' ]
+const colorArray = [ '#1B51FF', '#00E5ED', '#7800FF', '#16D783', '#FF7800', '#FFBA00', '#FFD685', '#2A00FF', '#C600FF', '#FF2A00']
+export default {
+  name: "duoyuanfuwufenxi",
+  data () {
+    return {
+      orgId: '',
+      showInfoDialog: false,
+      dataLoading: true,
+      pieNoData: false,
+
+      pieChartS: null,
+      pieChart: '',
+      pieOption: {},
+      pieInitState: false,
+      pieTotal: 0,
+      pieData: [],
+
+      tableList: [],
+      demand: {
+        loading: true,
+        colList: [
+          {
+            align: 'center',
+            width: '10%',
+          },
+          {
+            align: 'center',
+            width: '80%',
+          },
+          {
+            align: 'center',
+            width: '10%',
+          }
+        ],
+        header: ['序号', '组织列表', '操作'],
+        list: [],
+        pageSize: 10,
+        pageNo: 1,
+        total: 0
+      },
+      // 地图相关数据
+      isfirstInit: true, // 记录是否是首次加载地图
+      agencyInfo: {}, // 登陆者的组织信息：主要为了获取地图中心点和level
+      distributionsList: [],
+      legendArray: [],
+      iconUrlArray: [
+        require('../../../../../assets/img/shuju/volunteer9.png'), // 其他
+        require('../../../../../assets/img/shuju/volunteer4.png'), // 文化队伍
+        require('../../../../../assets/img/shuju/volunteer7.png'), // 老友俱乐部
+        require('../../../../../assets/img/shuju/volunteer8.png'), // 治安巡逻
+        require('../../../../../assets/img/shuju/volunteer5.png'), // 楼委会
+        require('../../../../../assets/img/shuju/volunteer1.png'), // 采集员
+        require('../../../../../assets/img/shuju/volunteer2.png'), // 代办员
+        require('../../../../../assets/img/shuju/volunteer3.png'), // 能人达人
+        require('../../../../../assets/img/shuju/volunteer6.png'), // 调解员
+      ],
+      polygonList: []
+    }
+  },
+  // mixins: [animate]
+  beforeDestroy () {
+
+  },
+  async created () {
+
+  },
+
+  async mounted () {
+    this.dataLoading = true
+    await this.getAgencylist() // 获取当前登录人员信息
+    await this.getData() // 获取饼图数据
+    await this.getTable() // 获取列表数据
+    this.dataLoading = false
+
+    this.getPie() // 设置饼图
+  },
+
+  methods: {
+    async getApiData () {
+      await this.getData()
+      await this.getTable()
+      this.getPie()
+    },
+
+    // 加载饼图数据
+    async getData () {
+      if (this.$refs.pieChart) {
+        this.$refs.pieChart.showLoading()
+        this.$refs.pieChart.clear()
+      }
+      const url = "/heart/iccommunityselforganization/total-pie"
+      const { data, code, msg } = await requestPost(url)
+      if (this.$refs.pieChart) {
+        this.$refs.pieChart.hideLoading()
+      }
+      if (code === 0) {
+        data.forEach((item, index) => {
+          let ob = {
+            value: item.total,
+            name: item.categoryName,
+            code: item.categoryCode,
+            color: item.color, // colorArray[index]
+            selected: index == 0 ? true : false
+          }
+          this.pieData.push(ob)
+        })
+        this.getMapData()
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    // 加载列表数据
+    async getTable (categoryCode = '') {
+      const url = "/heart/iccommunityselforganization/category-list"
+      const params = {
+        categoryCode: categoryCode,
+        pageNo: this.demand.pageNo,
+        pageSize: this.demand.pageSize
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      this.demand.loading = false
+      if (code === 0) {
+        this.demand.total = data.total
+        this.tableList = data.list
+        this.demand.list = data.list.map((item, index) => {
+          return [
+            index + 1,
+            item.organizationName ? item.organizationName : '',
+            { type: "operate", list: ["查看"] },
+          ]
+        })
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    handlePageNoChange_demand (val) {
+      this.demand.pageNo = val
+      this.getTable()
+    },
+
+    async toOrgInfo (index) {
+      const { tableList } = this
+      this.orgId = tableList[index].orgId
+      this.showInfoDialog = true
+    },
+
+    pieInitOk (dom) {
+      this.pieChartS = dom
+      this.pieInitState = true
+    },
+
+    getPie () {
+      if (this.pieInitState) {
+        this.assignPieChart()
+      } else {
+        setTimeout(() => {
+          this.getPie()
+        }, 500)
+      }
+    },
+    // 获取饼状图
+    async assignPieChart () {
+      this.pieTotal = 0
+      let maxIndex = 0
+      let maxValue = this.pieData[0].value
+      const _that = this
+
+      // 获取pieChart配置
+      this.pieOption = pieOption(this.pieChartS)
+
+      this.pieData.forEach((item, index) => {
+        this.pieTotal = this.pieTotal + item.value
+        if (item.value > maxValue) {
+          maxValue = item.value
+          maxIndex = index
+          item.selected = true
+        } else if (index !== 0) {
+          item.selected = false
+        }
+      })
+
+      this.pieOption.title.text = this.pieTotal
+
+      this.clickPie(maxIndex)
+
+      let fun = function (params) {
+        _that.clickPie(params.dataIndex)
+      }
+      this.$refs.pieChart.handleClick(fun)
+    },
+
+    clickPie (seriesIndex) {
+      this.pieData.forEach((element, index) => {
+        if (index === seriesIndex) {
+          element.label = {
+            show: true,
+          }
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+          }
+          this.getTable(element.code)
+        } else {
+          element.label = {
+            show: false,
+          }
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+          }
+        }
+      })
+      this.pieOption.series[1].data = this.pieData
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.pieChart.setOption(this.pieOption)
+    },
+
+    toUserInfo (uid) {
+      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
+    },
+    isRepeatItem (name) {
+      return this.polygonList.some(item => {
+        return item.name == name
+      })
+    },
+    async loadOrgData (level='', orgId='') {
+      const url = "/gov/org/agency/maporg"
+      let params = {
+        orgId: orgId,
+        level: level
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        let subPolygonList = []
+        data.children.forEach((item, index) => {
+          if (item.coordinates && item.coordinates.length > 0) {
+            if (!this.isRepeatItem(item.name)) {
+              let colorIndex = index < polygonColorArray.length ? index : 0
+              item.fillColor = transparent,
+              item.color = polygonColorArray[colorIndex]
+              subPolygonList.push(item)
+            }
+          }
+        })
+        // let polygonList = []
+        // let polygonData = {
+        //   ...data,
+        //   fillColor: transparent,
+        //   color: polygonColorArray[1]
+        // }
+        // polygonList.push(polygonData)
+        this.polygonList = [ ...this.polygonList, ...subPolygonList ]
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    async getMapData () {
+      this.pieData.forEach((item, index) => {
+        let ob = {
+          optionValue: item.code,
+          optionLabel: item.name,
+          url: index < this.iconUrlArray.length ? this.iconUrlArray[index] : this.iconUrlArray[0]
+        }
+        this.legendArray.push(ob)
+      })
+      const url = '/heart/iccommunityselforganization/coordinate-list'
+      const params = {
+        categoryCode: ''
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        data.list.forEach((item, index) => {
+          item.urlIndex = index < this.iconUrlArray.length ? index : 0
+          if (index === 0) {
+            item.latitude = "36.07394505338441"
+            item.longitude = "120.3868167667315"
+          }
+          this.distributionsList.push(item)
+        })
+        // this.distributionsList = data.list
+        await this.loadOrgData()
+        // 第一次加载完置为false
+        this.loadMap()
+        this.isfirstInit = false
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    //加载地图数据
+    loadMap () {
+      if (this.isfirstInit) {
+        this.agencyInfo.level = 'agency'
+        //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
+        this.$refs.map.loadMap(this.agencyInfo, this.polygonList, null, this.distributionsList, this.iconUrlArray, null)
+      } else {
+        this.$refs.map.refreshMap(this.polygonList, this.distributionsList)
+      }
+    },
+
+    // 点击项目
+    async clickMap (feature) {
+      if (feature.values_.coordinates && feature.values_.coordinates.length > 0) {
+        await this.loadOrgData(feature.values_.level, feature.values_.id)
+        this.loadMap()
+      }
+      console.log('标注信息', feature.values_.properties)
+      if (!feature.values_.properties) {
+        return
+      }
+      const data = feature.values_.properties.info
+      data.organizationName = data.organizationName ? data.organizationName : '--'
+      data.categoryName = data.categoryName ? data.categoryName : '--'
+      data.organizationPersonCount = data.organizationPersonCount ? data.organizationPersonCount : '--'
+      data.serviceItem = data.serviceItem ? data.serviceItem : '--'
+      data.principalName = data.principalName ? data.principalName : '--'
+      data.principalPhone = data.principalPhone ? data.principalPhone : '--'
+      data.organizationCreatedTime = data.organizationCreatedTime ? data.organizationCreatedTime : '--'
+      let organizationPersonnel = ''
+      if (data.organizationPersonnel.length > 0) {
+        data.organizationPersonnel.forEach(item => {
+          organizationPersonnel = `${organizationPersonnel}${item.personName}(${item.personPhone})、`
+        })
+        organizationPersonnel = organizationPersonnel.substring(0, organizationPersonnel.length-1)
+      } else {
+        organizationPersonnel = '--'
+      }
+      const coordinate = [data.longitude, data.latitude]
+      const showData = `
+              <div style='font-size:16px; color:#FFFFFF;'>详细信息</div>
+              <div style='font-size:12px; color:#FFFFFF;margin-top:10px'>组织名称：
+                <span>`+ data.organizationName + `</span>
+              </div>
+              <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>组织类型：
+                <span>`+ data.categoryName + `</span>
+              </div>
+              <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>组织人数：
+                <span>`+ data.organizationPersonCount + `</span>
+              </div>
+              <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>组织成员：
+                <span>`+ organizationPersonnel + `</span>
+              </div>
+              <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>服务事项：
+                <span>`+ data.serviceItem + `</span>
+              </div>
+              <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>负责人：
+                <span>`+ data.principalName + `</span>
+              </div>
+              <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系电话：
+                <span>`+ data.principalPhone + `</span>
+              </div>
+              <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>创建时间：
+                <span>`+ data.organizationCreatedTime + `</span>
+              </div>
+              `
+      // console.log(showData)
+      this.$refs.map.handleShowPopup(showData, coordinate)
+    },
+    //点击项目 - 接口获取
+    // async clickMap (feature) {
+    //   console.log('标注信息', feature.values_.properties)
+    //   if (!feature.values_.properties.info.icResiUserId) {
+    //     return false
+    //   }
+    //   const info = feature.values_.properties.info
+    //   const url = '/epmetuser/icresiuser/resi-brief/' + info.icResiUserId
+    //   // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
+
+    //   let params = {}
+
+    //   const { data, code, msg } = await requestPost(url, params)
+
+    //   if (code === 0) {
+    //     let coordinate = [info.longitude, info.latitude]
+    //     data.gridName = data.gridName ? data.gridName : '--'
+    //     data.villageName = data.villageName ? data.villageName : '--'
+    //     data.icUserName = data.icUserName ? data.icUserName : '--'
+    //     data.mobile = data.mobile ? data.mobile : '--'
+    //     data.idCard = data.idCard ? data.idCard : '--'
+    //     data.birthday = data.birthday ? data.birthday : '--'
+    //     data.contacts = data.contacts ? data.contacts : '--'
+    //     data.contactsMobile = data.contactsMobile ? data.contactsMobile : '--'
+
+    //     data.isBdhjShow = data.isBdhj ? data.isBdhj === '0' ? '否' : '是' : '--'
+    //     data.genderShow = data.gender ? data.gender === '0' ? '女' : '男' : '--'
+        // let categoriesArray = []
+
+        // for (let key in data.volunteerCategories) {
+        //   categoriesArray.push(data.volunteerCategories[key])
+
+        // }
+
+        // if (categoriesArray.length > 0) {
+        //   data.categories = categoriesArray.join(',')
+        // } else {
+        //   data.categories = '--'
+        // }
+
+    //     let showData = `
+    //             <div style='font-size:16px; color:#FFFFFF;'>居民信息</div>
+    //             <div style='font-size:12px; color:#FFFFFF;margin-top:10px'>所属网格：
+    //               <span>`+ data.gridName + `</span>
+    //             </div>
+    //             <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>所属小区：
+    //               <span>`+ data.villageName + `</span>
+    //             </div>
+    //             <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>本地户籍：
+    //               <span>`+ data.isBdhjShow + `</span>
+    //             </div>
+    //             <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>姓名：
+    //               <span>`+ data.icUserName + `</span>
+    //             </div> 
+    //             <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>手机：
+    //               <span>`+ data.mobile + `</span>
+    //             </div> 
+    //             <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>性别：
+    //               <span>`+ data.genderShow + `</span>
+    //             </div> 
+    //             <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>身份证号：
+    //               <span>`+ data.idCard + `</span>
+    //             </div> 
+    //             <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>出生日期：
+    //               <span>`+ data.birthday + `</span>
+    //             </div> 
+    //             <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系人：
+    //               <span>`+ data.contacts + `</span>
+    //             </div> 
+    //             <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系人手机：
+    //               <span>`+ data.contactsMobile + `</span>
+    //             </div> 
+    //             <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>志愿者类别：
+    //               <span>`+ data.categories + `</span>
+    //             </div> 
+    //             `
+    //     // console.log(showData)
+    //     this.$refs.map.handleShowPopup(showData, coordinate)
+    //   } else {
+    //     this.$message.error(msg)
+    //   }
+    // },
+    // 获取当前登录人员信息及组织信息
+    async getAgencylist () {
+      // const url = '/gov/org/customeragency/agencygridtree'
+      const url = '/gov/org/customeragency/agencylist'
+      let params = {}
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        this.agencyInfo = data
+        // this.agencyId = this.agencyInfo.agencyId
+        if (!this.agencyInfo.latitude) {
+          this.agencyInfo.latitude = 36.072227
+        }
+        if (!this.agencyInfo.longitude) {
+          this.agencyInfo.longitude = 120.389455
+        }
+        if (!this.agencyInfo.level) {
+          this.agencyInfo.level = 'street'
+        }
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+  props: {
+    uid: {
+      type: String,
+      default: "",
+      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
+    },
+  },
+
+  components: {
+    cptCard,
+    cptTb,
+    screenEchartsFrame,
+
+    ScreenLoading,
+    ScreenNodata,
+
+    screenMap,
+    duoyuanDialog
+  },
+
+  watch: {
+    uid (id) {
+      this.userId = id
+    },
+    userId () {
+      this.getApiData()
+      window.scrollTo(0, 0)
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/duoyuanfenxi.scss"
+  scoped
+></style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/search_1.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: 10px;
+  .title-icon {
+    display: block;
+    width: 36px;
+    height: 29px;
+    box-sizing: border-box;
+    margin-right: 3px;
+  }
+  .title-label {
+    font-size: 20px;
+    font-weight: 800;
+
+    ::v-deep .el-input {
+      width: 180px;
+      .el-input__inner {
+        font-size: 18px;
+        // font-weight: 800;
+        color: #fff;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-down::before {
+        content: "\e790";
+      }
+    }
+  }
+  ::v-deep .el-dropdown {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 800;
+  }
+}
+.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%;
+}
+.card-wr-map {
+  // height: calc(100vh - 120px);
+  text-align: center;
+
+  .card-map {
+    margin-top: 30px;
+    width: 100%;
+    // height: calc(100vh - 285px);
+    height: calc(100vh - 335px);
+    padding-left: 20px;
+    .map {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+.map-tips {
+  width: 100%;
+  display: flex;
+  // justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  padding: 6px 0 0 100px;
+  // padding-top: 10px;
+  // padding-bottom: 10px;
+
+  .map-tips-item {
+    display: flex;
+
+    align-items: center;
+    margin-top: 10px;
+    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>
+
+
diff --git a/src/views/modules/visual/communityGovern/duoyuanfuwu/pieOption.js b/src/views/modules/visual/communityGovern/duoyuanfuwu/pieOption.js
new file mode 100644
index 00000000..ae6ffd8c
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/duoyuanfuwu/pieOption.js
@@ -0,0 +1,180 @@
+
+export function pieOption (_charts) {
+  const center= ['50%', '150px']
+    return {
+      title: {
+        text: '0',
+        top: 125,
+        left: 'center',
+        textStyle: {
+          width: '100%',
+          fontSize: 26,
+          color: '#FFFFFF',
+          fontWeight: 400
+        },
+        itemGap: 5,
+        subtext: '总数',
+        subtextStyle: {
+          fontSize: 18,
+          color: '#fff',
+          fontWeight: 400
+        }
+      },
+      tooltip: {
+        show: false
+      },
+      legend: {
+        bottom: 0,
+        itemWidth: 20,
+        itemHeight: 10,
+        textStyle: {
+          color: '#D2E7FF',
+          fontSize: 16,
+          lineHeight: 20,
+        },
+      
+      },
+      series: [
+        // 外侧圆环
+        {
+          type: 'pie',
+          // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+          startAngle: 0,
+          hoverAnimation: false,
+          // tooltip: {
+          // },
+          center: center,
+          radius: ['53%', '53.3%'],
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+          data: [{
+            value: 360,
+            itemStyle: {
+              color: 'rgba(40, 101, 250, 0)',
+              width:0,
+              borderColor: 'rgba(40, 101, 250, 0.5)',
+              borderWidth: 1,
+              borderType: 'dotted'
+            }
+          }
+          ]
+        },
+  
+        // 突出的
+        {
+          hoverAnimation: false,
+          // name: 'Access From',
+          type: 'pie',
+          center: center,
+          radius: ['30%', '43%'],
+          avoidLabelOverlap: false,
+          // top: top + '%',
+          // height: '80%',
+          selectedMode: 'single',
+          left: 'center',
+          width: 480,
+          label: {
+            // show: false,
+            position: 'outside',
+            alignTo: 'edge',
+            // formatter: '{a|{c}}\n\n{name|{b}}',
+            formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+            minMargin: 5,
+            edgeDistance: 1,
+            lineHeight: 15,
+            color: '#fff',
+            fontSize: 10,
+            // distanceToLabelLine: -60,
+            rich: {
+              name: {
+                padding: [0, 6, 0, 6]
+              },
+              a: {
+                fontSize: 25,
+                color: '#fff',
+                padding: [0, 6, 6, 6]
+              },
+              r: {
+                backgroundColor: 'auto',
+                borderRadius: 6,
+                width: 6,
+                height: 6,
+                // padding: [3, 3, 0, -12]
+              }
+            }
+          },
+          labelLine: {
+            show: false,
+            smooth: 0.2,
+            length: 40,
+            length2: 0,
+            maxSurfaceAngle: 80
+          },
+          labelLayout: function (params) {
+            
+            const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+            const points = params.labelLinePoints;
+            // Update the end point.
+            if (points) {
+              points[2][0] = isLeft
+              ? params.labelRect.x
+              : params.labelRect.x + params.labelRect.width;
+            }
+            
+            return {
+              labelLinePoints: points
+            };
+          },
+          itemStyle: {
+            color:function(params) {
+              return params.data.color
+            //自定义颜色
+            var colorList = [
+                  '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
+              ];
+              return colorList[params.dataIndex]
+            }
+          },
+          data: [],
+  
+        },
+           // 中间圆环
+           {
+            type: 'pie',
+            // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+            startAngle: 0,
+            hoverAnimation: false,
+            center: center,
+            // tooltip: {
+            // },
+            radius: ['0%', '20%'],
+            label: {
+            
+                show: false
+             
+            },
+            labelLine: {
+             
+                show: false
+            
+            },
+            data: [{
+              value: 360,
+              itemStyle: {
+                normal: {
+                  color: 'rgba(8, 37, 134, 1)',
+              
+                }
+              }
+            }
+            ]
+          },
+      ]
+  
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/views/modules/visual/communityGovern/shijianfenlei/pieOption.js b/src/views/modules/visual/communityGovern/shijianfenlei/pieOption.js
new file mode 100644
index 00000000..d0258212
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/shijianfenlei/pieOption.js
@@ -0,0 +1,179 @@
+
+export function pieOption (_charts) {
+  const center= ['50%', '120px']
+    return {
+      title: {
+        text: '0',
+        top: 95,
+        left: 'center',
+        textStyle: {
+          width: '100%',
+          fontSize: 26,
+          color: '#FFFFFF',
+          fontWeight: 400
+        },
+        itemGap: 5,
+        subtext: '总数',
+        subtextStyle: {
+          fontSize: 18,
+          color: '#fff',
+          fontWeight: 400
+        }
+      },
+      tooltip: {
+        show: false
+      },
+      legend: {
+        bottom: 0,
+        itemWidth: 20,
+        itemHeight: 10,
+        textStyle: {
+          color: '#D2E7FF',
+          fontSize: 14,
+          lineHeight: 20,
+        },
+      
+      },
+      series: [
+        // 外侧圆环
+        {
+          type: 'pie',
+          // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+          startAngle: 0,
+          hoverAnimation: false,
+          // tooltip: {
+          // },
+          center: center,
+          radius: ['48%', '48.3%'],
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+          data: [{
+            value: 360,
+            itemStyle: {
+              color: 'rgba(40, 101, 250, 0)',
+              width:0,
+              borderColor: 'rgba(40, 101, 250, 0.5)',
+              borderWidth: 1,
+              borderType: 'dotted'
+            }
+          }
+          ]
+        },
+  
+        // 突出的
+        {
+          hoverAnimation: false,
+          // name: 'Access From',
+          type: 'pie',
+          center: center,
+          radius: ['25%', '38%'],
+          avoidLabelOverlap: false,
+          // top: top + '%',
+          // height: '80%',
+          // selectedMode: 'single',
+          left: 'center',
+          width: 480,
+          label: {
+            // show: false,
+            position: 'outside',
+            alignTo: 'edge',
+            // formatter: '{a|{c}}\n\n{name|{b}}',
+            formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+            minMargin: 5,
+            edgeDistance: 1,
+            lineHeight: 15,
+            color: '#fff',
+            fontSize: 10,
+            // distanceToLabelLine: -60,
+            rich: {
+              name: {
+                padding: [0, 6, 0, 6]
+              },
+              a: {
+                fontSize: 25,
+                color: '#fff',
+                padding: [0, 6, 6, 6]
+              },
+              r: {
+                backgroundColor: 'auto',
+                borderRadius: 6,
+                width: 6,
+                height: 6,
+                // padding: [3, 3, 0, -12]
+              }
+            }
+          },
+          labelLine: {
+            show: false,
+            smooth: 0.2,
+            length: 40,
+            length2: 0,
+            maxSurfaceAngle: 80
+          },
+          labelLayout: function (params) {
+            
+            const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+            const points = params.labelLinePoints;
+            // Update the end point.
+            if (points) {
+              points[2][0] = isLeft
+              ? params.labelRect.x
+              : params.labelRect.x + params.labelRect.width;
+            }
+            
+            return {
+              labelLinePoints: points
+            };
+          },
+          itemStyle: {
+            // color:function(params) {
+            // //自定义颜色
+            // var colorList = [          
+            //       '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
+            //   ];
+            //   return colorList[params.dataIndex]
+            // }
+          },
+          data: [],
+  
+        },
+           // 中间圆环
+           {
+            type: 'pie',
+            // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+            startAngle: 0,
+            hoverAnimation: false,
+            center: center,
+            // tooltip: {
+            // },
+            radius: ['0%', '20%'],
+            label: {
+            
+                show: false
+             
+            },
+            labelLine: {
+             
+                show: false
+            
+            },
+            data: [{
+              value: 360,
+              itemStyle: {
+                normal: {
+                  color: 'rgba(8, 37, 134, 1)',
+              
+                }
+              }
+            }
+            ]
+          },
+      ]
+  
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue b/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue
new file mode 100644
index 00000000..3a73da80
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue
@@ -0,0 +1,720 @@
+<template>
+  <cpt-card>
+    <div class="title">
+      <img src="@/assets/img/shuju/title-tip.png" />
+      <span>事件分类分析</span>
+
+      <div class="search">
+        <div class="second-select cascader">
+          <el-cascader class="customer_cascader"
+                       ref="myCascader"
+                       v-model="agencyIdArray"
+                       :key="iscascaderShow"
+                       :options="casOptions"
+                       :props="optionProps"
+                       :show-all-levels="false"
+                       @change="handleChangeAgency"></el-cascader>
+        </div>
+        <div class="second-select">
+          <el-select v-model="dataType"
+                     :popper-append-to-body="false"
+                     placeholder="请选择">
+            <el-option v-for="item in dateArray"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value"
+                       @click.native="handleChangeDate(item.value)">
+            </el-option>
+          </el-select>
+        </div>
+
+        <div v-if="dataType==='0'"
+             class="second-select range-data">
+
+          <el-date-picker v-model="timeRange"
+                          type="daterange"
+                          range-separator="至"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期"
+                          prefix-icon="el-icon-caret-bottom"
+                          format="yyyy-MM-dd"
+                          value-format="yyyy-MM-dd"
+                          @change="handleSelectChange">
+          </el-date-picker>
+        </div>
+      </div>
+
+    </div>
+    <div class="g-cpt-resi">
+      <div class="g-l">
+        <div class="l_top">
+
+          <div v-if="!pieNoData && !dataLoading"
+               class="g-pie">
+            <screen-echarts-frame class="echart-wr"
+                                  @myChartMethod="pieInitOk"
+                                  ref="pieChart"></screen-echarts-frame>
+          </div>
+          <screen-nodata class="nodata"
+                         v-if="pieNoData&& !dataLoading"></screen-nodata>
+          <div class="table-status"
+               v-if="dataLoading">
+            <screen-loading>加载中</screen-loading>
+          </div>
+
+        </div>
+        <div class="l_bottom">
+          <div v-if="!gridPieNoData && !dataLoading"
+               class="g-pie">
+            <screen-echarts-frame class="echart-grid-pie"
+                                  @myChartMethod="gridPieInitOk"
+                                  ref="gridPieChart"></screen-echarts-frame>
+          </div>
+          <screen-nodata class="nodata"
+                         v-if="pieNoData&& !dataLoading"></screen-nodata>
+          <div class="table-status"
+               v-if="dataLoading">
+            <screen-loading>加载中</screen-loading>
+          </div>
+        </div>
+      </div>
+      <div class="g-r">
+        <div class="m-tb">
+
+          <div class="tb">
+            <cpt-tb :col-list="demand.colList"
+                    :loading="demand.loading"
+                    :header="demand.header"
+                    :list="demand.list"
+                    @operate="toEventInfo"></cpt-tb>
+
+          </div>
+          <div class="m-pagination">
+            <el-pagination :current-page="demand.pageNo"
+                           :page-size="demand.pageSize"
+                           :total="demand.total"
+                           background
+                           layout="prev, pager, next,total"
+                           @current-change="handlePageNoChange_demand">
+            </el-pagination>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <event-info v-if="showProject"
+                :eventId="eventId"
+                @close="showProject = false" />
+  </cpt-card>
+</template>
+
+<script>
+
+import { requestPost } from "@/js/dai/request"
+import cptCard from "@/views/modules/visual/cpts/card"
+import cptTb from "@/views/modules/visual/cpts/tb"
+import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame"
+
+import ScreenLoading from "@/views/modules/visual/components/screen-loading"
+import ScreenNodata from "@/views/modules/visual/components/screen-nodata"
+import eventInfo from "../shijianchuli/event-info.vue"
+
+import { pieOption } from './pieOption.js'
+import dateFormat from "dai-js/tools/dateFormat"
+import nextTick from 'dai-js/tools/nextTick'
+
+
+const colorArray = [ '#1B51FF', '#00E5ED', '#7800FF', '#16D783', '#FF7800', '#FFBA00', '#FFD685', '#2A00FF', '#C600FF', '#FF2A00']
+export default {
+  name: "shijianchulifenxi",
+  data () {
+    return {
+      showProject: false,
+      dataLoading: true,
+      pieNoData: false,
+      gridPieNoData: false,
+
+      pieChartS: null,
+      pieChart: '',
+      pieOption: {},
+      pieInitState: false,
+      pieTotal: 0,
+      pieData: [],
+
+      gridPieChartS: null,
+      gridPieChart: '',
+      gridPieOption: {},
+      gridPieInitState: false,
+      gridPieTotal: 0,
+      gridPieData: [],
+
+      timeRange: [],
+      agencyId: '',
+      dataType: '1',
+
+      agencyInfo: {},
+
+      casOptions: [],
+      agencyIdArray: [],
+      customerList: [],
+      iscascaderShow: 0,
+
+      optionProps: {
+        multiple: false,
+        value: 'agencyId',
+        label: 'agencyName',
+        children: 'subAgencyList',
+        checkStrictly: true
+      },
+      dateArray: [
+        {
+          label: '近一年',
+          value: '1'
+        },
+        {
+          label: '近一个月',
+          value: '2'
+        },
+        {
+          label: '近三个月',
+          value: '3'
+        },
+        {
+          label: '近半年',
+          value: '4'
+        },
+        {
+          label: '自定义',
+          value: '0'
+        },
+      ],
+
+      tableList: [],
+      demand: {
+        loading: true,
+        colList: [
+          {
+            align: "center",
+            width: "5%",
+          },
+          {
+            align: "center",
+            width: "15%",
+          },
+          {
+            align: "center",
+            width: "25%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+          {
+            align: "center",
+            width: "5%",
+          },
+
+          {
+            align: "center",
+            width: "10%",
+          },
+        ],
+        header: ["序号", "所属网格", "事件内容", "上报渠道", "报事人", "手机号", "状态", "操作"],
+        list: [],
+        pageSize: 10,
+        pageNo: 1,
+        total: 0,
+      },
+      orgId: '',
+      orgType: 'agency',
+      queryStartTime: '',
+      queryEndTime: '',
+      categoryCode: '',
+      tableOrgId: '',
+      eventId: '',
+      processStatus: '',
+      isFirstLoadPie: true, // 首次加载显示全部数据，无联动
+      isFirstLoadTable: true, // 首次加载显示全部数据，无联动
+    }
+  },
+  // mixins: [animate]
+  beforeDestroy () {
+
+  },
+  async created () {
+
+  },
+
+  async mounted () {
+    this.dataLoading = true
+    // 初始化时间、各组件
+    this.initData()
+    await this.getAgencylist() // 获取组织级别
+    
+    // 获取服务器数据
+    await this.handleChangeDate(this.dataType)
+    if (this.isFirstLoadPie) {
+      await this.getGridPieData()
+    }
+    if (this.isFirstLoadTable) {
+      await this.getTable()
+    }
+    this.dataLoading = false
+  },
+
+  methods: {
+    async getApiData () {
+      await this.getPieData()
+      // await this.getGridPieData()
+      // await this.getTable()
+
+      // this.assignData()
+    },
+
+
+    async handleChangeDate (index) {
+      let end = new Date()
+      let start = new Date()
+      if (index === '1') { // 近一年
+        start.setFullYear(start.getFullYear() -1)
+      } else if (index === '2') { // 近一个月
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+
+      } else if (index === '3') { // 近三个月
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 91)
+
+      } else if (index === '4') { // 近半年
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 183)
+      }
+      if (index != '0') {
+        this.queryStartTime = dateFormat(start,'yyyy-MM-dd')+" 00:00:00"
+        this.queryEndTime = dateFormat(end,'yyyy-MM-dd')+" 23:59:59"
+      }
+      if (index !== '0'){
+        await this.getApiData()
+        // this.assignData()
+      }
+    },
+
+    assignData () {
+      this.getPie()
+      this.getGridPie()
+    },
+
+    handleSelectChange (value) {
+      console.log(value)
+      this.queryStartTime = value[0]+" 00:00:00"
+      this.queryEndTime = value[1]+" 23:59:59"
+      this.getApiData()
+    },
+
+    // 获取当前登录人员信息及组织信息
+    async getAgencylist () {
+      const url = "/gov/org/customeragency/agencygridtree"
+      //const url = '/gov/org/customeragency/agencylist'
+
+      let params = {}
+
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+
+        this.orgId = data.agencyId
+
+        //组织级联数据
+        ++this.iscascaderShow
+        this.casOptions = []
+        this.agencyIdArray.length = []
+
+        if (data) {
+          this.casOptions.push(data)
+          this.agencyIdArray.push(this.orgId)
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    // 加载饼图1数据
+    async getPieData () {
+      if (this.$refs.pieChart) {
+        this.$refs.pieChart.showLoading()
+        this.$refs.pieChart.clear()
+      }
+
+      const url = "/gov/project/icEvent/category-analysis/total"
+      let params = {
+        orgId: this.orgId,
+        orgType: this.orgType,
+        queryStartTime: this.queryStartTime,
+        queryEndTime: this.queryEndTime
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+      if (this.$refs.pieChart) {
+        this.$refs.pieChart.hideLoading()
+      }
+      if (code === 0) {
+        this.categoryCode = data[0].categoryCode
+        this.pieData = []
+        data.forEach((item, index) => {
+          let ob = {
+            value: item.total,
+            name: item.categoryName,
+            categoryCode: item.categoryCode,
+            color: item.color,
+            selected: index == 0 ? true : false
+          }
+          this.pieData.push(ob)
+        })
+        this.getPie()
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    // 加载饼图2数据
+    async getGridPieData () {
+      if (this.$refs.gridPieChart) {
+        this.$refs.gridPieChart.showLoading()
+        this.$refs.gridPieChart.clear()
+      }
+
+      const url = "/gov/project/icEvent/category-analysis/org-total"
+      let params = {
+        orgId: this.orgId,
+        orgType: this.orgType,
+        queryStartTime: this.queryStartTime,
+        queryEndTime: this.queryEndTime,
+        categoryCode: this.categoryCode
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (this.$refs.gridPieChart) {
+        this.$refs.gridPieChart.hideLoading()
+      }
+      if (code === 0) {
+        this.gridPieData = []
+        data.forEach((item, index) => {
+          const colIndex = index < colorArray.length ? index : 0
+          let ob = {
+            value: item.total,
+            name: item.orgName,
+            orgId: item.orgId,
+            color: colorArray[colIndex],
+            selected: index == 0 ? true : false
+          }
+          this.gridPieData.push(ob)
+        })
+        this.getGridPie()
+        this.isFirstLoadPie = false
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    //加载组织数据
+    async getTable () {
+      const url = '/gov/project/icEvent/processAnalysis/eventList'
+      let params = {
+        orgId: this.tableOrgId ? this.tableOrgId : this.orgId,
+        orgType: this.orgType,
+        queryStartTime: this.queryStartTime,
+        queryEndTime: this.queryEndTime,
+        processStatus: this.processStatus, // 处理状态，processing,closed_case。可为空，为空查询所有状态的事件列表
+        categoryCode: this.categoryCode,
+        pageNo: this.demand.pageNo,
+        pageSize: this.demand.pageSize,
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+      this.demand.loading = false
+
+      if (code === 0) {
+        this.demand.total = data.total
+        this.tableList = data.list
+        this.demand.list = data.list.map((item, index) => {
+          return [
+            index+1,
+            item.gridName ? item.gridName : '',
+            item.eventContent ? item.eventContent : '',
+            item.sourceTypeName ? item.sourceTypeName : '',
+            item.reportUserName ? item.reportUserName : '',
+            item.mobile ? item.mobile : 'processing',
+            item.processStatus ? item.processStatus === 'closed_case' ? '已完成' : '处理中' : '',
+            { type: "operate", list: ["查看"] },
+          ]
+        })
+        this.isFirstLoadTable = false
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    handlePageNoChange_demand (val) {
+      this.demand.pageNo = val
+      this.getTable()
+    },
+
+
+    async toEventInfo (index) {
+      const { tableList } = this
+      this.eventId = tableList[index].eventId
+      this.showProject = true
+    },
+
+    pieInitOk (dom) {
+      this.pieChartS = dom
+      this.pieInitState = true
+    },
+
+    getPie () {
+      if (this.pieInitState) {
+        this.assignPieChart()
+      } else {
+        setTimeout(() => {
+          this.getPie()
+        }, 500)
+      }
+    },
+    // 获取饼状图
+    async assignPieChart () {
+
+      this.pieTotal = 0
+      let maxIndex = 0
+      let maxValue = this.pieData[0].value
+      const _that = this
+
+      // 获取pieChart配置
+      this.pieOption = pieOption(this.pieChartS)
+
+      this.pieData.forEach((item, index) => {
+        this.pieTotal = this.pieTotal + item.value
+        if (item.value > maxValue) {
+          maxValue = item.value
+          maxIndex = index
+          item.selected = true
+        } else if (index !== 0) {
+          item.selected = false
+        }
+      })
+
+      this.pieOption.title.text = this.pieTotal
+
+      this.clickPie(maxIndex)
+
+      let fun = function (params) {
+        _that.clickPie(params.dataIndex)
+      }
+      this.$refs.pieChart.handleClick(fun)
+
+    },
+
+    clickPie (seriesIndex) {
+      this.pieData.forEach((element, index) => {
+        if (index === seriesIndex) {
+          element.label = {
+            show: true,
+          }
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+          }
+          this.categoryCode = element.categoryCode
+        } else {
+          element.label = {
+            show: false,
+          }
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+          }
+        }
+      })
+      this.pieOption.series[1].data = this.pieData
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.pieChart.setOption(this.pieOption)
+      if (!this.isFirstLoadPie) {
+        this.tableOrgId = ''
+        this.demand.pageNo = 1
+        this.getGridPieData()
+      }
+    },
+
+
+    gridPieInitOk (dom) {
+      this.gridPieChartS = dom
+      this.gridPieInitState = true
+    },
+
+    getGridPie () {
+      if (this.gridPieInitState) {
+        this.assignGridPieChart()
+      } else {
+        setTimeout(() => {
+          this.getGridPie()
+        }, 500)
+      }
+    },
+    // 获取饼状图
+    async assignGridPieChart () {
+      this.gridPieTotal = 0
+      let maxIndex = 0
+      let maxValue = this.gridPieData[0].value
+      const _that = this
+
+      // 获取pieChart配置
+      this.gridPieOption = pieOption(this.gridPieChartS)
+
+      this.gridPieData.forEach((item, index) => {
+        this.gridPieTotal = this.gridPieTotal + item.value
+        if (item.value > maxValue) {
+          maxValue = item.value
+          maxIndex = index
+          item.selected = true
+        } else if (index !== 0) {
+          item.selected = false
+        }
+      })
+
+      this.gridPieOption.title.text = this.gridPieTotal
+      // this.gridPieOption.legend.bottom = 50
+
+      this.clickGridPie(maxIndex)
+
+      let fun = function (params) {
+        _that.clickGridPie(params.dataIndex)
+      }
+      this.$refs.gridPieChart.handleClick(fun)
+
+    },
+
+    clickGridPie (seriesIndex) {
+      this.gridPieData.forEach((element, index) => {
+        if (index === seriesIndex) {
+          element.label = {
+            show: true,
+          }
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+          }
+          this.tableOrgId = element.orgId
+        } else {
+          element.label = {
+            show: false,
+          }
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+          }
+        }
+      })
+      this.gridPieOption.series[1].data = this.gridPieData
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.gridPieChart.setOption(this.gridPieOption)
+      if (!this.isFirstLoadTable) {
+        this.demand.pageNo = 1
+        this.getTable()
+      }
+    },
+
+    handleChangeAgency (value) {
+      let orgArray = []
+      let key = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
+      if (key) {
+        orgArray = key.split('-')
+        this.orgId = orgArray[0]
+        this.orgType = orgArray[1] === 'grid' ? 'grid' : 'agency'
+      } else {
+        this.orgId = ''
+        this.orgType = ''
+      }
+      this.getApiData()
+
+      // this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
+      // this.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
+      // this.getApiData()
+      // console.log(this.agencyIdArray)
+    },
+
+    // 初始化时间
+    initData () {
+      var time = (new Date).getTime() - 24 * 60 * 60 * 1000
+      var nowdate = new Date(time) // 获取的是前一天日期
+      var y = nowdate.getFullYear()
+      var m = nowdate.getMonth() + 1 < 10 ? "0" + (nowdate.getMonth() + 1) : nowdate.getMonth() + 1
+      var d = nowdate.getDate() < 10 ? "0" + nowdate.getDate() : nowdate.getDate()
+      this.dateIdShow = y + '-' + m + '-' + d
+    },
+
+    toUserInfo (uid) {
+      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` })
+    },
+  },
+  props: {
+    uid: {
+      type: String,
+      default: "",
+      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
+    }
+  },
+
+  computed: {},
+
+  components: {
+    cptCard,
+    cptTb,
+    screenEchartsFrame,
+
+    ScreenLoading,
+    ScreenNodata,
+    eventInfo
+  },
+
+  watch: {
+    dateIdShow () {
+      // let dataArray = this.dateIdShow.split('-')
+      // this.dateId = dataArray.join('')
+    },
+    uid (id) {
+      this.userId = id
+    },
+    userId () {
+      this.getApiData()
+      window.scrollTo(0, 0)
+    }
+  },
+}
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/shijianfenleifenxi.scss"
+  scoped
+></style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/search_1.scss"
+  scoped
+></style>
+
+
diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue
index 2786fdde..e39e9d6f 100644
--- a/src/views/modules/visual/components/screen-map/index.vue
+++ b/src/views/modules/visual/components/screen-map/index.vue
@@ -535,7 +535,7 @@ const vueGis = {
               })
             }),
             new Style({
-              text: createTextStyle(feature)
+              // text: createTextStyle(feature) // 报错 暂时注掉 zty 2022.05.19
             })
           ];
           styles['MultiPolygon'] = styles['Polygon'];