diff --git a/src/assets/img/plugins/close.png b/src/assets/img/plugins/close.png
new file mode 100644
index 00000000..c0ad64a0
Binary files /dev/null and b/src/assets/img/plugins/close.png differ
diff --git a/src/assets/img/plugins/danghui.png b/src/assets/img/plugins/danghui.png
new file mode 100644
index 00000000..aa88a94a
Binary files /dev/null and b/src/assets/img/plugins/danghui.png differ
diff --git a/src/assets/img/plugins/dangqi.png b/src/assets/img/plugins/dangqi.png
new file mode 100644
index 00000000..b3bdd208
Binary files /dev/null and b/src/assets/img/plugins/dangqi.png differ
diff --git a/src/assets/img/plugins/dangwei-by.png b/src/assets/img/plugins/dangwei-by.png
new file mode 100644
index 00000000..0a1a4528
Binary files /dev/null and b/src/assets/img/plugins/dangwei-by.png differ
diff --git a/src/assets/img/plugins/dangyuanzhongxinhu.png b/src/assets/img/plugins/dangyuanzhongxinhu.png
new file mode 100644
index 00000000..c6333528
Binary files /dev/null and b/src/assets/img/plugins/dangyuanzhongxinhu.png differ
diff --git a/src/assets/img/plugins/dian.png b/src/assets/img/plugins/dian.png
new file mode 100644
index 00000000..a86b46b8
Binary files /dev/null and b/src/assets/img/plugins/dian.png differ
diff --git a/src/assets/img/plugins/faguang.png b/src/assets/img/plugins/faguang.png
new file mode 100644
index 00000000..fda60c08
Binary files /dev/null and b/src/assets/img/plugins/faguang.png differ
diff --git a/src/assets/img/plugins/jiantou-A.png b/src/assets/img/plugins/jiantou-A.png
new file mode 100644
index 00000000..716d3046
Binary files /dev/null and b/src/assets/img/plugins/jiantou-A.png differ
diff --git a/src/assets/img/plugins/jiantou-D.png b/src/assets/img/plugins/jiantou-D.png
new file mode 100644
index 00000000..ce4e1c67
Binary files /dev/null and b/src/assets/img/plugins/jiantou-D.png differ
diff --git a/src/assets/img/plugins/jiantou-X.png b/src/assets/img/plugins/jiantou-X.png
new file mode 100644
index 00000000..75199e99
Binary files /dev/null and b/src/assets/img/plugins/jiantou-X.png differ
diff --git a/src/assets/img/plugins/louyuanxiaozu.png b/src/assets/img/plugins/louyuanxiaozu.png
new file mode 100644
index 00000000..9066182a
Binary files /dev/null and b/src/assets/img/plugins/louyuanxiaozu.png differ
diff --git a/src/assets/img/plugins/shuoming-X.png b/src/assets/img/plugins/shuoming-X.png
new file mode 100644
index 00000000..72aea366
Binary files /dev/null and b/src/assets/img/plugins/shuoming-X.png differ
diff --git a/src/assets/img/plugins/tanchuang.png b/src/assets/img/plugins/tanchuang.png
new file mode 100644
index 00000000..f6cfc8dc
Binary files /dev/null and b/src/assets/img/plugins/tanchuang.png differ
diff --git a/src/assets/img/plugins/xiaozu-by.png b/src/assets/img/plugins/xiaozu-by.png
new file mode 100644
index 00000000..6da3bf20
Binary files /dev/null and b/src/assets/img/plugins/xiaozu-by.png differ
diff --git a/src/assets/img/plugins/you.png b/src/assets/img/plugins/you.png
new file mode 100644
index 00000000..b8f6004c
Binary files /dev/null and b/src/assets/img/plugins/you.png differ
diff --git a/src/assets/img/plugins/zhibu-by.png b/src/assets/img/plugins/zhibu-by.png
new file mode 100644
index 00000000..b509e787
Binary files /dev/null and b/src/assets/img/plugins/zhibu-by.png differ
diff --git a/src/assets/img/plugins/zuo.png b/src/assets/img/plugins/zuo.png
new file mode 100644
index 00000000..6eec5eb0
Binary files /dev/null and b/src/assets/img/plugins/zuo.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 89098837..b72dd3ee 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -249,6 +249,11 @@ router.beforeEach((to, from, next) => {
       name: "社区党建",
       // url: "visual/basicinfo/basicInfoMain",
       children: [
+        {
+          url: "/visual/plugin/power/organization",
+          name: "组织架构",
+          id: "5feawfwaefwa577",
+        },
         {
           url: "/visual/communityParty/party",
           name: "党员信息统计",
diff --git a/src/views/modules/visual/basicinfo/basicInfoMain.vue b/src/views/modules/visual/basicinfo/basicInfoMain.vue
index 99bd6f30..85fffa34 100644
--- a/src/views/modules/visual/basicinfo/basicInfoMain.vue
+++ b/src/views/modules/visual/basicinfo/basicInfoMain.vue
@@ -693,12 +693,12 @@ const vueGis = {
           'features': featureData
         };
         let feature = (new GeoJSON()).readFeatures(geojsonObject)
-
         polygonSource.addFeatures(feature)
 
         let iconFeatures = [];
+console.log(feature)
         feature.forEach(oneIcon => {
-
+// console.log(oneIcon)
           var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
           // var center = getCenter(extent);   //获取边界区域的中心位置
           //添加标注
diff --git a/src/views/modules/visual/plugin/power/components/geojson.js b/src/views/modules/visual/plugin/power/components/geojson.js
new file mode 100644
index 00000000..8386f087
--- /dev/null
+++ b/src/views/modules/visual/plugin/power/components/geojson.js
@@ -0,0 +1,69 @@
+export function getPolygonGeoJSON () {
+    return {
+        type: 'FeatureCollection',
+        features: [
+            {
+                type: 'Feature',
+                geometry: {
+                    type: 'Polygon',
+                    coordinates: [
+                        [
+                            [120.34641692835909, 36.089631138388036],
+                            [120.3610683961656, 36.07743361100231],
+                            [120.41981862563858, 36.094178143435734],
+                            [120.40240403504704, 36.11798699226542],
+                            [120.34534806364974, 36.11752870787426],
+                            [120.34191095693906, 36.117070430475906],
+                            [120.34641692835909, 36.089631138388036]
+                        ]
+                    ]
+                }
+            }
+        ]
+    }
+}
+export function getGridGeoJSON () {
+    return {
+        type: 'FeatureCollection',
+        features: [
+            {
+                type: 'Feature',
+                properties: {
+                    name: '第一网格',
+                    index: 0
+                },
+                geometry: {
+                    type: 'Polygon',
+                    coordinates: [
+                        [
+                            [120.36042111463216, 36.123630243850776],
+                            [120.37646657270601, 36.11574122696447],
+                            [120.36427923644065, 36.105102846593255],
+                            [120.34074589793231, 36.10363201293648],
+                            [120.36042111463216, 36.123630243850776]
+                        ]
+                    ]
+                }
+            },
+            {
+                type: 'Feature',
+                properties: {
+                    name: '第二网格',
+                    index: 1
+                },
+                geometry: {
+                    type: 'Polygon',
+                    coordinates: [
+                        [
+                            [120.35623852355958, 36.0892643916626],
+                            [120.37271801574708, 36.0903801906128],
+                            [120.36894146545411, 36.08102464556885],
+                            [120.35795513732911, 36.07767724871827],
+                            [120.35623852355958, 36.0892643916626]
+                        ]
+                    ]
+                }
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/views/modules/visual/plugin/power/components/info-dialog.vue b/src/views/modules/visual/plugin/power/components/info-dialog.vue
new file mode 100644
index 00000000..2b724b15
--- /dev/null
+++ b/src/views/modules/visual/plugin/power/components/info-dialog.vue
@@ -0,0 +1,144 @@
+<template>
+    <div class="info-dialog" :style="'left:' + position.x + 'px; top:' + position.y + 'px;'">
+        <img src="../../../../../../assets/img/plugins/close.png" class="info-dialog-close" @click="closeDialog">
+        <div class="card-title">
+            <img class="title-icon" src="../../../../../../assets/img/shuju/title-tip.png" />
+            <div class="title-label">信息详情</div> 
+        </div>
+        <div class="info-dialog-content">
+            <div class="info-dialog-content-item">
+              <img class="info-dialog-content-item-img" src="">
+              <div class="info-dialog-content-item-info">
+                <div class="info-dialog-content-item-info-name">杨磊{{axisStructId}}</div>
+                <div class="info-dialog-content-item-info-mobile">手机号：1500000000</div>
+                <div class="info-dialog-content-item-info-mobile">类别：社区书记</div>
+              </div>
+            </div>
+            <div class="info-dialog-content-intro" style="margin-top: 30px;">简介：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'info-dialog',
+  props: {
+    axisStructId: {
+      type: String,
+      default: ''
+    },
+    leaderId: {
+      type: String,
+      default: ''
+    },
+    position: {
+      type: Object,
+      default: function () {
+        return {
+          x: '',
+          y: ''
+        }
+      }
+    }
+  },
+  watch: {
+    axisStructId (newVal, oldVal) {
+      this.getInfo()
+    }
+  },
+  created () {
+    this.getInfo()
+  },
+  methods: {
+    closeDialog () {
+        this.$emit('close')
+    },
+    getInfo () {
+      console.log(this.axisStructId, this.leaderId)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-title {
+  display: flex;
+  align-items: center;
+  margin: 27px 20px;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  .title-label {
+    font-size: 20px;
+    font-weight: 800;
+    ::v-deep .el-input {
+      width: 180px;
+      .el-input__inner {
+        font-size: 18px;
+        color: #fff;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-down::before {
+          content: "\e790";
+      }
+    }
+  }
+}
+.info-dialog {
+    width: 494px;
+    height: 372px;
+    background: url('../../../../../../assets/img/plugins/tanchuang.png') no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    z-index: 999;
+    &-close {
+        position: absolute;
+        right: -15px;
+        top: -10px;
+    }
+    &-content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        padding: 0 20px 20px 20px;
+        box-sizing: border-box;
+        &-item {
+          display: flex;
+          padding-left: 40px;
+          box-sizing: border-box;
+          &-img {
+            width: 120px;
+            height: 140px;
+            height: 140px;
+          }
+          &-info {
+            margin-left: 20px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            &-name {
+              font-size: 20px;
+              font-weight: bold;
+              margin-bottom: 30px;
+            }
+            &-mobile {
+              font-size: 14px;
+              margin-bottom: 12px;
+            }
+          }
+        }
+        &-intro {
+          padding-left: 40px;
+          box-sizing: border-box;
+          word-break: break-all;
+        }
+    }
+}
+</style>
diff --git a/src/views/modules/visual/plugin/power/components/screen-org-map.vue b/src/views/modules/visual/plugin/power/components/screen-org-map.vue
new file mode 100644
index 00000000..69cbf71b
--- /dev/null
+++ b/src/views/modules/visual/plugin/power/components/screen-org-map.vue
@@ -0,0 +1,268 @@
+<template>
+    <div class="div_map" id="map" ref="map"></div>
+</template>
+
+<script>
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import TileLayer from 'ol/layer/Tile.js'
+import XYZ from 'ol/source/XYZ.js'
+import VectorLayer from 'ol/layer/Vector.js'
+import VectorSource from 'ol/source/Vector.js'
+import GeoJSON from 'ol/format/GeoJSON.js'
+import Point from "ol/geom/Point.js"
+import Feature from "ol/Feature.js"
+import Overlay from 'ol/Overlay'
+import { Select, DoubleClickZoom } from 'ol/interaction.js'
+import { getCenter, boundingExtent } from 'ol/extent.js'
+import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js'
+import { altKeyOnly, click, pointerMove } from 'ol/events/condition'
+import { getDistance } from 'ol/sphere'
+import MousePosition from 'ol/control/MousePosition'
+import { createStringXY } from 'ol/coordinate'
+import { defaults as defaultControls } from 'ol/control'
+import { mapGetters } from "vuex"
+import { Loading } from 'element-ui'
+import { getPolygonGeoJSON, getGridGeoJSON } from './geojson.js'
+
+let map
+let mapView
+let gaodeMapLayer // 背景地图图层
+let gridLayer // 网格组织图层
+let gridSource // 网格组织多边形
+let pointsLayer // 打点图层
+let pointsSource // 打点
+
+const iconArray = [
+    'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
+    'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
+    'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
+]
+const textColorArray = [
+  'rgba(236, 69, 4, 0.66)',
+  'rgba(0, 146, 238, 0.75)',
+  'rgba(238, 151, 0, 0.8)'
+]
+const polygonColorArray = [
+  'rgba(210, 2, 2, 0.24)',
+  'rgba(43, 231, 253, 0.25)',
+  'rgba(183, 185, 0, 0.16)'
+]
+var createTextStyle = function (feature) {
+  return new Text({
+    textAlign: undefined,
+    font: "18px Arial",
+    //fontFamily: "Courier New, monospace",
+    // fontWeight: "bold",
+    text: feature.values_.name,
+    backgroundFill: new Fill({
+      // color: 'rgba(0, 146, 238, 0.75)'
+      color: textColorArray[feature.values_.index]
+    }),
+    padding: [4, 10, 4, 10],
+    //text: "变电站名称",
+    fill: new Fill({ color: "#ffffff" }),
+    // stroke: new Stroke({ color: "#ffffff", width: 3 }),
+    offsetY: -30,
+    offsetX: -50,
+    overflow: true,
+  })
+}
+var polygonStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      fill: new Fill({
+        // color: [255, 255, 255, 0.3]
+        color: polygonColorArray[feature.values_.index]
+      }),
+      stroke: new Stroke({
+        color: polygonColorArray[feature.values_.index],
+        width: 3
+      }),
+      text: createTextStyle(feature)
+    })
+  }
+})()
+export default {
+  name: "screen-org-map",
+  components: {
+  },
+  data() {
+    return {
+      centerPoint: [120.38945519, 36.0722275], // 中心点位置
+      zoom: 12, // 缩放范围：区14
+      minZoom: 1, // 最小缩放
+    }
+  },
+  mounted() {
+    this.initMap()
+    this.addAreaLayer()
+    this.addGridLayer()
+  },
+  methods: {
+    initMap () {
+      gaodeMapLayer = new TileLayer({
+        title: "地图",
+        source: new XYZ({
+          //指定url瓦片
+          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
+          wrapX: true // x方向平铺，也可以选择false
+        }),
+        zIndex: 20
+      })
+
+      mapView = new View({
+        //中心点坐标
+        center: this.centerPoint,
+        // projection: 'EPSG:3857',
+        projection: 'EPSG:4326',
+        zoom: this.zoom,
+        minZoom: this.minZoom
+      })
+
+      //初始化map和地图底图
+      //创建地图容器
+      map = new Map({
+        layers: [gaodeMapLayer],
+        //加载瓦片图层数据
+        view: mapView,
+        target: 'map'
+        //目标加载到map中
+      })
+
+      map.on('singleclick', function (e) {
+        // console.log(e.coordinate)
+        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
+      })
+
+      //去除双击放大效果
+      const dblClickInteraction = map
+        .getInteractions()
+        .getArray()
+        .find(interaction => {
+          return interaction instanceof DoubleClickZoom
+        })
+      map.removeInteraction(dblClickInteraction)
+    },
+    // 绘制区域
+    addAreaLayer () {
+      let feature = new GeoJSON().readFeatures(getPolygonGeoJSON())
+      gridSource = new VectorSource({
+        features: feature
+      })
+      // gridSource.clear() // 清空网格标注
+      // let features = new GeoJSON().readFeatures(getPolygonGeoJSON())
+      // gridSource.addFeatures(features)
+      gridLayer = new VectorLayer({
+        source: gridSource,
+        style: new Style({
+          stroke: new Stroke({
+            color: 'blue',
+            width: 2
+          }),
+          // fill: new Fill({
+          //   color: 'rgba(255, 255, 0, 0.4)'
+          // })
+        }),
+        zIndex: 50
+      })
+      map.addLayer(gridLayer)
+    },
+    // 绘制网格区域
+    addGridLayer () {
+      let feature = new GeoJSON().readFeatures(getGridGeoJSON())
+      pointsSource = new VectorSource({
+        features: feature
+      })
+      pointsLayer = new VectorLayer({
+        source: pointsSource,
+        style: polygonStyleFunction,
+        zIndex: 70
+      })
+
+      //选中多边形后的样式
+      var overlayStyle = (function () {
+        return function (feature) {
+          var styles = {}
+          styles['Polygon'] = [
+            new Style({
+              stroke: new Stroke({
+                color: '#ec9000',
+                width: 2
+              })
+            }),
+            new Style({
+              fill: new Fill({
+                color: 'rgba(0, 0, 255, 0.1)'
+              })
+            }),
+            new Style({
+              text: createTextStyle(feature)
+            })
+          ]
+          styles['MultiPolygon'] = styles['Polygon']
+          return styles[feature.getGeometry().getType()]
+        }
+      })()
+
+      let select = new Select({
+        style: overlayStyle
+      })
+      this.addGridMarker(feature)
+      map.addLayer(pointsLayer)
+      map.addInteraction(select)
+      select.on('select', e => {
+        if (e.selected.length > 0) {
+          console.log(e.selected[0].values_.name)
+        }
+      })
+    },
+    // 打点
+    addGridMarker (feature) {
+      let iconFeatures = []
+      feature.forEach((oneIcon, index) => {
+        var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]) //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
+        // var center = getCenter(extent)   //获取边界区域的中心位置
+        // 添加标注
+        let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2
+        let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2
+        // 地图icon样式
+        let pointIcon = new Feature({
+          geometry: new Point([x, y]),
+          properties: {
+            type: "icon",
+            name: oneIcon.values_.name
+          }
+        })
+        let iconStyle = new Style({
+          image: new Icon({
+            // anchor: [0.5, 0.5],
+            // imgSize: [32, 32],
+            scale: 0.5,
+            src: iconArray[index]
+          })
+        })
+
+        pointIcon.setStyle(iconStyle)
+        iconFeatures.push(pointIcon)
+      })
+      pointsSource.addFeatures(iconFeatures)
+    }
+  },
+}
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+
+<style lang="scss" >
+.div_map {
+    box-sizing: border-box;
+    // width: 100%;
+    height: 100%;
+    color: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/visual/plugin/power/components/screen-org-tree.vue b/src/views/modules/visual/plugin/power/components/screen-org-tree.vue
new file mode 100644
index 00000000..7b15cd01
--- /dev/null
+++ b/src/views/modules/visual/plugin/power/components/screen-org-tree.vue
@@ -0,0 +1,377 @@
+<template>
+    <div class="screen-org-tree">
+      <div class="level-row" v-for="(level1, index1) in list" :key="index1">
+        <div class="level-1-row">
+          <div class="level-1-row-item">
+            <img class="level-1-row-item-line" src="../../../../../../assets/img/plugins/zuo.png">
+            <div class="level-1-row-item-content">
+              <div class="level-1-row-item-content-info">
+                <img src="../../../../../../assets/img/plugins/dangqi.png" class="level-1-row-item-content-info-icon">
+                <div class="level-1-row-item-content-info-text">
+                  <div class="level-1-row-item-content-info-text-title">{{level1.name}}</div>
+                  <div class="level-1-row-item-content-info-text-leader">书记: {{level1.leaderName}}
+                    <img src="../../../../../../assets/img/plugins/shuoming-X.png" class="level-1-row-item-content-info-text-leader-icon" @click="onShowInfoDialog(level1.id, level1.leaderId, $event)">
+                  </div>
+                </div>
+              </div>
+              <img src="../../../../../../assets/img/plugins/jiantou-D.png" class="level-1-row-item-content-arrow">
+            </div>
+            <img class="level-1-row-item-line" src="../../../../../../assets/img/plugins/you.png">
+          </div>
+        </div>
+        <div class="level-2-row">
+          <div class="level-2-row-item" v-for="(level2, index2) in level1.children" :key="index2">
+            <img class="level-2-row-item-top" src="../../../../../../assets/img/plugins/jiantou-A.png">
+            <div class="level-2-row-item-content">
+              <img src="../../../../../../assets/img/plugins/danghui.png" class="level-2-row-item-content-icon">
+              <div class="level-2-row-item-content-title">{{level2.name}}</div>
+              <div class="level-2-row-item-content-leader">书记: {{level2.leaderName}}
+                <img src="../../../../../../assets/img/plugins/shuoming-X.png" class="level-2-row-item-content-leader-icon" @click="onShowInfoDialog(level2.id, level2.leaderId, $event)">
+              </div>
+            </div>
+            <img class="level-2-row-item-bottom" src="../../../../../../assets/img/plugins/jiantou-X.png">
+            <div class="level-3-item" v-for="(level3, index3) in level2.children" :key="index3">
+              <img src="../../../../../../assets/img/plugins/dian.png" class="level-3-item-icon">
+              <div class="level-3-item-title">{{level3.name}}</div>
+              <div class="level-3-item-leader">{{level3.leaderName}}</div>
+              <img class="level-3-item-leader-icon" src="../../../../../../assets/img/plugins/shuoming-X.png" @click="onShowInfoDialog(level3.id, level3.leaderId, $event)">
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 个人信息弹窗 -->
+      <transition name="el-fade-in-linear">
+        <info-dialog v-if="showInfo"
+                      :axisStructId="axisStructId"
+                      :leaderId="leaderId"
+                      :position="pos" 
+                      @close="showInfo = false"></info-dialog>
+      </transition>
+    </div>
+</template>
+
+<script>
+import infoDialog from './info-dialog'
+export default {
+  name: "screen-org-tree",
+  components: {
+    infoDialog
+  },
+  data() {
+    return {
+      list: [
+        {  
+          id: '0',
+          name: '兴德路社区党委',
+          leaderId: '0',
+          leaderName: '杨磊',
+          children: [
+            {
+              id: '1',
+              name: '第一党支部',
+              leaderId: '1',
+              leaderName: '吴红',
+              children: [
+                {
+                  id: '11',
+                  name: '第一党小组第一党小组第一党小组',
+                  leaderId: '11',
+                  leaderName: '吴红',
+                  children: []
+                },
+                {
+                  id: '12',
+                  name: '第二党小组',
+                  leaderId: '12',
+                  leaderName: '牟振华',
+                  children: []
+                },
+                {
+                  id: '31',
+                  name: '第三党小组',
+                  leaderId: '31',
+                  leaderName: '吴红',
+                  children: []
+                },
+                {
+                  id: '42',
+                  name: '第四党小组',
+                  leaderId: '42',
+                  leaderName: '牟振华',
+                  children: []
+                }
+              ]
+            },
+            {
+              id: '2',
+              name: '第二党支部',
+              leaderId: '2',
+              leaderName: '吴红',
+              children: [
+                {
+                  id: '21',
+                  name: '第一党小组',
+                  leaderId: '21',
+                  leaderName: '吴红',
+                  children: []
+                },
+                {
+                  id: '22',
+                  name: '第二党小组',
+                  leaderId: '22',
+                  leaderName: '牟振华',
+                  children: []
+                },
+                {
+                  id: '31',
+                  name: '第三党小组',
+                  leaderId: '31',
+                  leaderName: '吴红',
+                  children: []
+                },
+                {
+                  id: '42',
+                  name: '第四党小组',
+                  leaderId: '42',
+                  leaderName: '牟振华',
+                  children: []
+                }
+              ]
+            },
+            {
+              id: '3',
+              name: '第三党支部',
+              leaderId: '3',
+              leaderName: '吴红',
+              children: [
+                {
+                  id: '31',
+                  name: '第一党小组',
+                  leaderId: '31',
+                  leaderName: '吴红',
+                  children: []
+                },
+                {
+                  id: '32',
+                  name: '第二党小组',
+                  leaderId: '32',
+                  leaderName: '牟振华',
+                  children: []
+                }
+              ]
+            },
+            {
+              id: '4',
+              name: '第四党支部',
+              leaderId: '4',
+              leaderName: '吴红',
+              children: [
+                {
+                  id: '41',
+                  name: '第一党小组',
+                  leaderId: '41',
+                  leaderName: '吴红',
+                  children: []
+                },
+                {
+                  id: '42',
+                  name: '第二党小组',
+                  leaderId: '42',
+                  leaderName: '牟振华',
+                  children: []
+                }
+              ]
+            },
+            {
+              id: '5',
+              name: '第五党支部',
+              leaderId: '5',
+              leaderName: '吴红',
+              children: [
+                {
+                  id: '51',
+                  name: '第一党小组',
+                  leaderId: '51',
+                  leaderName: '吴红',
+                  children: []
+                },
+                {
+                  id: '52',
+                  name: '第二党小组',
+                  leaderId: '52',
+                  leaderName: '牟振华',
+                  children: []
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      showInfo: false, // 是否显示个人信息弹窗
+      pos: { x: 0, y: 0 }, // 个人信息弹窗位置
+      axisStructId: '', // 传给弹窗的组织节点id
+      leaderId: '', // 传给弹窗的人员id
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    onShowInfoDialog (axisStructId, leaderId, e) {
+      this.axisStructId = axisStructId
+      this.leaderId = leaderId
+      this.pos.x = e.layerX
+      this.pos.y = e.layerY
+      this.showInfo = true
+    }
+  },
+}
+</script>
+
+<style lang="scss" >
+.screen-org-tree {
+  width: 100%;
+  height: 100%;
+  .level-1-row {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-item {
+      width: 80%;
+      display: flex;
+      justify-content: center;
+      border-bottom: 1px dashed #2b85ff;
+      cursor: pointer;
+      &-line {
+        width: 178px;
+        height: 16px;
+        margin-top: 30px;
+      }
+      &-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin: 0 7px;
+        &-info {
+          width: 300px;
+          height: 80px;
+          background: url('../../../../../../assets/img/plugins/dangwei-by.png') no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+          &-icon {
+            width: 57px;
+            height: 41px;
+            margin-left: 12px;
+          }
+          &-text {
+            width: calc(100% - 70px);
+            height: 100%;
+            text-align: center;
+            &-title {
+              height: 30px;
+              font-size: 26px;
+              font-weight: bold;
+              display: flex;
+              align-items: flex-end;
+              letter-spacing: 3px;
+              margin-left: 7px;
+              margin-top: 20px;
+              background-image: linear-gradient(to top, #00a2ff, #56f9ff, #ffffff);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+            }
+            &-leader {
+              height: calc(100% - 50px);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              letter-spacing: 2px;
+              font-size: 16px;
+              &-icon {
+                margin-left: 7px;
+                width: 14px;
+                height: 14px;
+                cursor: help;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .level-2-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-around;
+    &-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      &-top {
+
+      }
+      &-bottom {
+
+      }
+      &-content {
+        width: 170px;
+        height: 110px;
+        background: url('../../../../../../assets/img/plugins/zhibu-by.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        cursor: pointer;
+        &-icon {
+          margin-top: 10px;
+        }
+        &-title {
+          font-size: 20px;
+          font-weight: bold;
+          letter-spacing: 1px;
+          width: 100%;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-wrap:break-word;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          display: -webkit-box;
+        }
+        &-leader {
+          display: flex;
+          align-items: center;
+          &-icon {
+            width: 14px;
+            height: 14px;
+            margin-left: 4px;
+            cursor: help;
+          }
+        }
+      }
+      .level-3-item {
+        width: 170px;
+        height: 38px;
+        background: url('../../../../../../assets/img/plugins/xiaozu-by.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        cursor: pointer;
+        margin-bottom: 16px;
+        &-leader-icon {
+          width: 14px;
+          height: 14px;
+          cursor: help;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/visual/plugin/power/components/screen-top-count.vue b/src/views/modules/visual/plugin/power/components/screen-top-count.vue
new file mode 100644
index 00000000..f7c28b33
--- /dev/null
+++ b/src/views/modules/visual/plugin/power/components/screen-top-count.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="screen-top-count">
+    <div class="number" :class="'font-color-' + colorIndex"><slot name="number"></slot></div>
+    <div class="title-image"></div>
+    <div class="title"><slot name="title"></slot></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'screen-top-count',
+  props: {
+    colorIndex: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-top-count {
+    width: 110px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    .number {
+      font-family: 'Impact';
+      font-size: 40px;
+      letter-spacing: 3px;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .font-color-0 {
+      background-image: -webkit-linear-gradient(top,#f60000,#ff6c68);
+    }
+    .font-color-1 {
+      background-image: -webkit-linear-gradient(top,#faa700,#ffd428); 
+    }
+    .font-color-2 {
+      background-image: -webkit-linear-gradient(top,#ffffff,#98efff, #30deff); 
+    }
+    .font-color-3 {
+      background-image: -webkit-linear-gradient(top,#58ffce,#21be96, #009673); 
+    }
+    .font-color-4 {
+      background-image: -webkit-linear-gradient(top,#1a5afd,#26c4ff); 
+    }
+    .font-color-5 {
+      background-image: -webkit-linear-gradient(top,#b08fff,#855eed,#592dda); 
+    }
+    .font-color-6 {
+      background-image: -webkit-linear-gradient(top,#faa700,#ffd428);
+    }
+    .font-color-7 {
+      background-image: -webkit-linear-gradient(top,#f60000,#ff6c68);
+    }
+    .title-image {
+      width: 100%;
+      height: 4px;
+      background: url('../../../../../../assets/img/plugins/faguang.png') no-repeat;
+      background-size: 100% 100%;
+    }
+    .title {
+      margin-top: 12px;
+      font-family: 'PingFang Regular';
+      font-size: 14px;
+      color: #a2c7ed;
+      text-align: center;
+    }
+}
+</style>
diff --git a/src/views/modules/visual/plugin/power/organization.vue b/src/views/modules/visual/plugin/power/organization.vue
new file mode 100644
index 00000000..3e65ed97
--- /dev/null
+++ b/src/views/modules/visual/plugin/power/organization.vue
@@ -0,0 +1,321 @@
+<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">
+          组织架构
+        </div> 
+      </div>
+      <div class="card-panel">
+        <div class="card-left">
+          <!-- <div class="card-item-title">小标题</div> -->
+          <div class="card-left-top">
+            <screen-org-tree></screen-org-tree>
+          </div>
+          <div class="card-left-bottom">
+            <screen-table :headerList="headerList"
+                          :tableData="tableData"
+                          :visibleLoading="visibleLoading"
+                          :operate="true"
+                          @look="handleLook"></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-right">
+          <div class="card-right-top">
+            <screen-top-count :colorIndex="item.index" v-for="(item, key) in countList" :key="key">
+                <template v-slot:number>{{item.value}}</template>
+                <template v-slot:title>{{item.title}}</template>
+            </screen-top-count>
+          </div>
+          <div class="card-title" style="margin-left: 20px; margin-bottom: 10px;">
+            <img class="title-icon" src="../../../../../assets/img/shuju/title-tip.png" />
+            <div class="title-label">
+              网格分布
+            </div> 
+          </div>
+          <div class="card-right-bottom">
+            <screen-org-map></screen-org-map>
+            <div class="legend">
+              <div class="legend-item">
+                <img src="../../../../../assets/img/plugins/danghui.png" class="legend-item-icon">
+                <div class="legend-item-text">党群服务站</div>
+              </div>
+              <div class="legend-item">
+                <img src="../../../../../assets/img/plugins/louyuanxiaozu.png" class="legend-item-icon">
+                <div class="legend-item-text">楼院党小组</div>
+              </div>
+              <div class="legend-item">
+                <img src="../../../../../assets/img/plugins/dangyuanzhongxinhu.png" class="legend-item-icon">
+                <div class="legend-item-text">党员中心户</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </cpt-card>
+  </div>
+</template>
+
+<script>
+import nextTick from "dai-js/tools/nextTick"
+import cptCard from "@/views/modules/visual/cpts/card"
+import screenMap from "@/views/modules/visual/components/screen-map"
+import screenTable from "../../components/screen-table/index"
+import screenOrgMap from './components/screen-org-map.vue'
+import screenOrgTree from './components/screen-org-tree.vue'
+import screenTopCount from './components/screen-top-count.vue'
+import { requestPost } from "@/js/dai/request"
+
+export default {
+  name: "warning-box",
+  components: {
+    cptCard,
+    screenTable,
+    screenMap,
+    screenOrgMap,
+    screenOrgTree,
+    screenTopCount
+  },
+  data() {
+    return {
+      headerList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "活动标题", coulmn: 'title' },
+        { title: "单位名称", coulmn: 'unitName' }
+      ],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      agencyId: '',
+      noInit: false,
+      visibleLoading: true,
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      list: [],
+      countList: {
+        gridNum: { index: 0, title: '网格党支部', value: '0' },
+        groupNum: { index: 1, title: '楼院党小组', value: '0' },
+        kernelHouseHoldNum: { index: 2, title: '党员中心户', value: '0' },
+        partyMemberNum: { index: 3, title: '党员数', value: '0' },
+        serviceStationNum: { index: 4, title: '网格党群服务站实体阵地数', value: '0' },
+        volunteerTeamNum: { index: 5, title: '志愿者队伍', value: '0' }
+      }
+    }
+  },
+  async mounted() {
+    this.showInfo = false
+    const { user } = this.$store.state
+    this.agencyId = user.agencyId
+    console.log('agencyId-------', this.agencyId)
+    await nextTick(100)
+    this.getCount()
+    this.getList()
+  },
+  methods: {
+    async handleLook (val) {
+      console.log(val.id)
+    },
+    pageSizeChangeHandleNew (val) {
+      this.pageNo = 1
+      this.pageSize = val
+      this.getList()
+    },
+    pageCurrentChangeHandleNew (val) {
+      this.pageNo = val
+      this.getList()
+    },
+    getList() {
+      this.visibleLoading = true
+      let params = {
+        agencyId: this.agencyId,
+        pageSize: this.pageSize,
+        pageNo: this.pageNo,
+        serviceMatter: '',
+        startTime: '',
+        endTime: ''
+      }
+      const url = "/heart/icpartyactivity/activitylist"
+      this.$http.post(url, params).then(res => {
+        this.tableData = res.data.data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1
+          }
+        })
+        this.visibleLoading = false
+      }).catch(err => {
+        this.$message.error(err)
+      })
+    },
+    async getCount() {
+      const url = "/pli/power/data/axis/statistics"
+      let params = {
+        agencyId: this.agencyId
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        Object.keys(this.countList).forEach(item => {
+          this.countList[item].value = data[item]
+        })
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    // handleClickRow(val) {
+    //   console.log('click-row----', val)
+    //   this.$router.push({
+    //     path: `/main-shuju/visual-basicinfo-people/${val.userId}`,
+    //   })
+    // },
+  },
+}
+</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;
+  }
+  .title-label {
+    font-size: 20px;
+    font-weight: 800;
+    ::v-deep .el-input {
+      width: 180px;
+      .el-input__inner {
+        font-size: 18px;
+        color: #fff;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-down::before {
+          content: "\e790";
+      }
+    }
+  }
+}
+.card-panel {
+  display: flex;
+  margin-top: 10px;
+  height: 100%;
+  .card-left {
+    position: relative;
+    flex: 1;
+    height: 100%;
+    &-top {
+      width: 100%;
+      height: 550px;
+      display: flex;
+    }
+    &-bottom {
+      width: 100%;
+      height: calc(100% - 550px);
+      box-sizing: border-box;
+      margin: 0;
+      margin-top: 30px;
+      .pagination {
+        box-sizing: border-box;
+        margin-top: 20px;
+        width: 100%;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+
+        /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;
+        }
+      }
+    }
+  }
+  .card-right {
+    position: relative;
+    flex: 1;
+    height: 100%;
+    &-top {
+      width: 100%;
+      height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+    }
+    &-bottom {
+      height: 700px;
+      width: 100%;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      padding-left: 30px;
+      .legend {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 10px;
+        &-item {
+          width: 150px;
+          display: flex;
+          align-items: center;
+          &-text {
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+  }
+}
+.card-item-title {
+  position: relative;
+  padding-left: 40px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+}
+.card-item-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%;
+}
+</style>