优化地图缩放效果

src/assets/scss/modules/visual/command.scss

@@ -0,0 +1,182 @@
+@import "../../c/config";
+@import "../../c/function";
+@import "./c/common";
+
+.m-crumb {
+    margin-left: 10px;
+    height: 40px;
+    line-height: 35px;
+    .router_line {
+        width: 212px;
+        height: 1px;
+        border: 1px solid #ffffff;
+        opacity: 0.09;
+        /* opacity: 0.09; */
+    }
+    .div_router {
+        font-size: 16px;
+        font-weight: bold;
+
+        .router_parents {
+            color: #a0c3d9;
+
+            .arrow {
+                padding: 0 5px;
+            }
+        }
+        .router_parents:hover {
+            cursor: pointer;
+        }
+
+        .router_child {
+            color: #ffffff;
+        }
+    }
+}
+
+.g-cnt {
+    display: flex;
+
+    /deep/ .ol-viewport {
+        border-radius: 5px;
+    }
+
+    /deep/ .ol-overlaycontainer-stopevent {
+        display: none;
+    }
+}
+
+.m-map {
+    box-sizing: border-box;
+    width: 100%;
+    height: calc(825px - 15px);
+    color: #fff;
+    position: relative;
+}
+
+.m-sidemenu {
+    margin-left: 20px;
+    width: 360px;
+    height: calc(825px - 15px);
+
+    .title {
+        margin-bottom: 10px;
+        padding: 4px 0;
+        font-size: 22px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+
+        img {
+            display: block;
+            margin-right: 5px;
+        }
+        span {
+            display: block;
+        }
+    }
+
+    .list {
+        min-height: 800px;
+    }
+}
+
+.m-sidebar {
+    position: absolute;
+    right: 0;
+    top: 50px;
+    z-index: 1000;
+    width: 370px;
+    height: 470px;
+    overflow: hidden;
+    pointer-events: none;
+
+    .wrap {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        background-color: rgba(rgb(173, 173, 173), 0);
+        transform: translateX(-5px);
+        transition: all ease 1s;
+        border-radius: 4px;
+        pointer-events: auto;
+    }
+
+    .wrap-hidden {
+        transform: translateX(339px);
+    }
+
+    .div_agency_list {
+        width: 320px;
+        height: 470px;
+        color: #fff;
+        background: url("../../../img/modules/visual/box-2.png") no-repeat center;
+        background-size: 100% 100%;
+        padding: 45px 20px 35px 20px;
+
+        .agency_main {
+            height: 100%;
+            position: relative;
+        }
+
+        .agency_main {
+            /deep/ .el-scrollbar__wrap {
+                overflow-x: hidden !important;
+            }
+        }
+
+        .no-data-img {
+            text-align: center;
+            margin-top: 50px;
+            margin-left: 15px;
+        }
+        .agency_list {
+            .agency_item {
+                // height: 60px;
+                padding: 15px 0;
+                font-size: 17px;
+                font-family: PingFang SC;
+                font-weight: 400;
+                color: #ffffff;
+                // line-height: 50px;
+                padding-left: 12px;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                // padding-top: 15px;
+
+                .agency_item_name {
+                    // line-height: 20px;
+                }
+            }
+
+            .agency_item_on {
+                background: #08216c;
+                border-radius: 2px;
+            }
+
+            .agency_item:hover {
+                cursor: pointer;
+                background-color: #011168;
+                border-radius: 4px 0 0 4px;
+                border: none;
+                box-shadow: 0 0 10px inset #1a5afd;
+                border-radius: 2px;
+            }
+        }
+    }
+
+    .arrow_tip {
+        margin-right: -2px;
+        margin-left: 10px;
+        > img {
+            width: 22px;
+            height: 176px;
+        }
+    }
+    .arrow_tip:hover {
+        cursor: pointer;
+    }
+}

src/assets/scss/shuju-card.scss

@@ -8,7 +8,11 @@
     min-width: 200px;
     width: 100%;
     height: 100%;
-    padding: 22px;
+    padding: 22px 16px 22px 22px;
+
+    .card-wrap {
+        height: 100%;
+    }
 
     .card-corner {
         position: absolute;
@@ -71,10 +75,13 @@
     }
 
     .card-cnt {
+        position: relative;
+        z-index: 1;
         min-height: 200px;
         background-image: url(../img/shuju/card/bg.png);
         background-repeat: repeat;
         overflow-y: auto;
+        height: 100%;
         @include scrollBar;
     }
 }

src/views/modules/visual/basicinfo/cpts/grid-map.vue

@@ -149,6 +149,44 @@ export default {
       ];
       return { type: "FeatureCollection", features: polygon };
     },
+    polygonDotData() {
+      const { srcGridData } = this;
+      if (
+        !srcGridData ||
+        !srcGridData.children ||
+        !Array.isArray(srcGridData.children)
+      ) {
+        return { type: "FeatureCollection", features: [] };
+      }
+      const polygon = [
+        ...srcGridData.children
+          .filter((item) => item.coordinates.length > 0)
+          .map((item) => ({
+            type: "Feature",
+            properties: {
+              //   id: item.id,
+              //   name: item.name,
+              //   level: item.level,
+              center: [item.longitude, item.latitude],
+              ...item,
+            },
+            geometry: {
+              type: "Polygon",
+              coordinates: [
+                item.latitude
+                  ? [[item.longitude, item.latitude]]
+                  : spliceIntoChunks(
+                      item.coordinates
+                        .split(",")
+                        .map((item) => parseFloat(item)),
+                      2
+                    ).filter((item) => item.length == 2),
+              ],
+            },
+          })),
+      ];
+      return { type: "FeatureCollection", features: polygon };
+    },
   },
 
   watch: {
@@ -158,12 +196,13 @@ export default {
       } else {
         this.updateMap();
       }
+      this.zoomInABit();
     },
   },
 
   methods: {
     iniMap() {
-      const { darkStyle, lightStyle, srcGridData, polygonData } = this;
+      const { darkStyle, lightStyle, srcGridData, polygonData ,polygonDotData} = this;
       if (!srcGridData) return false;
 
       let styleConfig = darkStyle;
@@ -180,8 +219,12 @@ export default {
           pitch: 60,
           style: styleConfig.style,
           center: [
-            srcGridData.longitude || this.$store.state.user.longitude,
-            srcGridData.latitude || this.$store.state.user.latitude,
+            srcGridData.longitude ||
+              this.$store.state.user.longitude ||
+              116.39743841556731,
+            srcGridData.latitude ||
+              this.$store.state.user.latitude ||
+              39.9088810666821,
           ],
           token: "fc14b42e0ca18387866d68ebd4f150c1",
           zoom: 18,
@@ -192,7 +235,7 @@ export default {
         }),
       });
 
-      scene.on("loaded", () => {
+      scene.on("loaded", async () => {
         polygonLayer = new PolygonLayer({
           autoFit: true,
         })
@@ -237,7 +280,7 @@ export default {
         circleLayer = new PolygonLayer({
           zIndex: 3,
         })
-          .source(polygonData)
+          .source(polygonDotData)
           .color("name", styleConfig.circleColor)
           .shape("circle")
           .active(true)
@@ -264,7 +307,7 @@ export default {
         posLayer = new PolygonLayer({
           zIndex: 4,
         })
-          .source(polygonData)
+          .source(polygonDotData)
           .shape("name", ["pos-red", "pos-green", "pos-yellow"])
           .size(12)
           .style({
@@ -277,7 +320,7 @@ export default {
         textLayer = new PolygonLayer({
           zIndex: 20,
         })
-          .source(polygonData)
+          .source(polygonDotData)
           .color("name", styleConfig.textColor)
           .shape("name", "text")
           .size(16)
@@ -310,9 +353,18 @@ export default {
             raisingHeight: 0,
           });
         });
+
+        await nextTick(0);
+        this.zoomInABit();
       });
     },
 
+    // 把地图缩放等级在原来基础上大一点
+    zoomInABit() {
+      let current = scene.getZoom();
+      scene.setZoomAndCenter(current + 0.5);
+    },
+
     shiftMapStyle(type) {
       this.mapStyleType = type;
       localStorage.setItem("mapStyle", type);

src/views/modules/visual/command/cpts/sidemenu.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="m-menu">
+    <div class="list">
+      <div
+        class="item"
+        :key="'menu1' + item.coverageType"
+        v-for="item in menuList"
+      >
+        <div class="info">
+          <div class="name">
+            {{ item.coverageName }}
+            <i v-if="item.count">（{{ item.count }}）</i>
+          </div>
+
+          <div class="i-arrow">
+            <img src="@/assets/img/shuju/command/arrow-right.png" />
+          </div>
+        </div>
+
+        <div
+          class="granditem"
+          :key="'menu3' + granditem.categoryKey"
+          v-for="granditem in item.categories"
+        >
+          <div class="info">
+            <div class="i-ico">
+              <img
+                v-if="grandIcoList[granditem.categoryKey]"
+                :src="grandIcoList[granditem.categoryKey]"
+              />
+            </div>
+
+            <div class="name">
+              {{ granditem.categoryName }}
+              <i v-if="granditem.count">（{{ granditem.count }}）</i>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="subitem"
+          :key="'menu2' + subitem.placeType"
+          v-for="subitem in item.placeTypesInAnalysis"
+        >
+          <div class="info">
+            <div class="i-ico">
+              <img
+                v-if="subitem.placeType == 'xxxxx'"
+                src="@/assets/img/shuju/command/fuwusheshi.png"
+              />
+              <img
+                v-if="subitem.placeType == 'enterprise_patrol'"
+                src="@/assets/img/shuju/command/qishiyedanweixuncha.png"
+              />
+              <img
+                v-if="subitem.placeType == 'group_rent'"
+                src="@/assets/img/shuju/command/qunzufang.png"
+              />
+              <img
+                v-if="subitem.placeType == 'community_org'"
+                src="@/assets/img/shuju/command/shequzizhuzi.png"
+              />
+              <img
+                v-if="subitem.placeType == 'superior_resource'"
+                src="@/assets/img/shuju/command/youshiziyuan.png"
+              />
+              <img
+                v-if="subitem.placeType == 'volunteer'"
+                src="@/assets/img/shuju/command/zhiyuanzhe.png"
+              />
+              <img
+                v-if="subitem.placeType == 'dangerous_chemicals'"
+                src="@/assets/img/shuju/command/zhongdianweihuapinqiye.png"
+              />
+              <img
+                v-if="subitem.placeType == 'party_unit'"
+                src="@/assets/img/shuju/command/lianjiandanwei.png"
+              />
+            </div>
+
+            <div class="name">
+              {{ subitem.placeTypeName }}
+              <i v-if="subitem.count">（{{ subitem.count }}）</i>
+            </div>
+
+            <div class="i-arrow">
+              <img src="@/assets/img/shuju/command/arrow-right.png" />
+            </div>
+          </div>
+
+          <div
+            class="granditem"
+            :key="'menu3' + granditem.categoryKey"
+            v-for="granditem in subitem.categories"
+          >
+            <div class="info">
+              <div class="i-ico">
+                <img
+                  v-if="grandIcoList[granditem.categoryKey]"
+                  :src="grandIcoList[granditem.categoryKey]"
+                />
+              </div>
+
+              <div class="name">
+                {{ granditem.categoryName }}
+                <i v-if="granditem.count">（{{ granditem.count }}）</i>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  name: "sidemenu",
+
+  props: {
+    isFullScreen: {
+      type: Boolean,
+      default: false,
+    },
+
+    grandIcoList: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data() {
+    return {
+      menuList: [],
+    };
+  },
+
+  computed: {},
+
+  mounted() {
+    this.requestList();
+  },
+
+  methods: {
+    //加载组织数据
+    async requestList() {
+      const url = "/data/aggregator/coverage/analysis/resourceCategories";
+      let params = {};
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.menuList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.m-menu {
+  padding-top: 10px;
+
+  .list {
+    .item {
+      position: relative;
+      z-index: 2;
+      line-height: 60px;
+      color: rgba(#fff, 0.8);
+
+      .z-on {
+        color: #ffffff;
+        background-color: #041267;
+        font-weight: bold;
+      }
+
+      .info {
+        position: relative;
+        font-size: 18px;
+        width: 100%;
+        padding-left: 10px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .i-ico {
+          position: relative;
+          width: 35px;
+          height: 35px;
+          margin-right: 4px;
+
+          img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 2px;
+            margin: auto;
+          }
+        }
+
+        .i-arrow {
+          margin-left: auto;
+          margin-right: 20px;
+
+          &.z-unfold {
+            transform: rotate(90deg);
+          }
+        }
+
+        &:hover {
+          box-shadow: 0 0 30px 5px inset #22f;
+          background-color: darken(#104ba4, 12);
+        }
+      }
+
+      .subitem,
+      .granditem {
+        > .info {
+          padding-left: 20px;
+          font-size: 16px;
+        }
+
+        .granditem {
+          > .info {
+            padding-left: 40px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/modules/visual/command/index.vue

@@ -0,0 +1,412 @@
+<template>
+  <div style="position: relative">
+    <!-- 组织路由 -->
+    <div class="m-crumb">
+      <div class="router_line"></div>
+      <div class="div_router">
+        <span
+          class="router_parents"
+          v-for="(item, index) in runAgencyArray"
+          @click="handleClickAgency(index)"
+          :key="index"
+          >{{ item.name }}<span class="arrow">></span></span
+        >
+
+        <span class="router_child">{{ orgData.name }}</span>
+      </div>
+    </div>
+
+    <people v-if="orgLevel === 'people'" :uid="selUserId" />
+
+    <div v-show="orgLevel !== 'people'" class="g-cnt">
+      <div class="m-map">
+        <grid-map
+          v-if="orgData.id"
+          @clickAgency="clickAgencyItem"
+          :srcGridData="orgData"
+          :dotList="dotList"
+        />
+
+        <div class="m-sidebar">
+          <div class="wrap" :class="[{ 'wrap-hidden': !showAgencyList }]">
+            <div @click="hideAgencyList" class="arrow_tip">
+              <img src="@/assets/img/modules/visual/popup.png" alt />
+            </div>
+
+            <div class="div_agency_list">
+              <div class="agency_main">
+                <el-scrollbar
+                  style="height: 98%"
+                  wrap-style="overflow-x:hidden"
+                >
+                  <div v-if="subAgencyArray.length > 0" class="agency_list">
+                    <div
+                      v-for="(item, index) in subAgencyArray"
+                      :key="index"
+                      @click="clickAgencyItem(item, index)"
+                      :class="[
+                        'agency_item',
+                        { agency_item_on: index % 2 == 0 },
+                      ]"
+                    >
+                      <div class="agency_item_name">{{ item.name }}</div>
+                    </div>
+                  </div>
+                  <div v-else>
+                    <img
+                      src="@/assets/img/modules/visual/noData.png"
+                      alt=""
+                      srcset=""
+                      class="no-data-img"
+                    />
+                  </div>
+                </el-scrollbar>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="m-sidemenu">
+        <cpt-card>
+          <div class="title">
+            <img src="@/assets/img/shuju/title-tip.png" />
+            <span>指挥调度</span>
+          </div>
+
+          <div class="list">
+            <sidemenu :grandIcoList="dotIcoList"></sidemenu>
+          </div>
+        </cpt-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import nextTick from "dai-js/tools/nextTick";
+import { mapGetters } from "vuex";
+import { Loading } from "element-ui"; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+import People from "@/views/modules/visual/basicinfo/people";
+import cptCard from "@/views/modules/visual/cpts/card";
+import gridMap from "@/views/modules/visual/basicinfo/cpts/grid-map";
+import sidemenu from "@/views/modules/visual/command/cpts/sidemenu";
+import ScreenLoading from "@/views/modules/visual/cpts/loading";
+
+let loading; //加载动画
+
+export default {
+  name: "HomeMap",
+
+  components: { People, cptCard, ScreenLoading, gridMap, sidemenu },
+
+  props: {},
+
+  computed: {
+    ...mapGetters(["clientHeight"]),
+  },
+
+  data() {
+    return {
+      showAgencyList: false,
+
+      orgData: {}, //当前组织对象
+      orgId: "",
+      orgLevel: "",
+
+      subAgencyArray: [], //下拉框数据
+
+      //下钻层级记录
+      runNum: 0,
+      runAgencyArray: [],
+      selUserId: "",
+
+      dotList: [],
+      categoryKeys: [],
+
+      dotIcoList: {
+        anzhibangjiao: require("@/assets/img/shuju/command/ico/anzhibangjiao.png"),
+        buliangqingshaonian: require("@/assets/img/shuju/command/ico/buliangqingshaonian.png"),
+        shequjiaozheng: require("@/assets/img/shuju/command/ico/shequjiaozheng.png"),
+        resi_xfry: require("@/assets/img/shuju/command/ico/resi_xfry.png"),
+        xidurenyuan: require("@/assets/img/shuju/command/ico/xidurenyuan.png"),
+        xiejiaorenyuan: require("@/assets/img/shuju/command/ico/xiejiaorenyuan.png"),
+        zhaoshizhaohuojingshenbing: require("@/assets/img/shuju/command/ico/zhaoshizhaohuojingshenbing.png"),
+
+        enterprise_patrol_unqualified: require("@/assets/img/shuju/command/ico/enterprise_patrol_unqualified.png"),
+
+        yjdw: require("@/assets/img/shuju/command/ico/yjdw.png"),
+        sr_gy: require("@/assets/img/shuju/command/ico/sr_gy.png"),
+        sr_gc: require("@/assets/img/shuju/command/ico/sr_gc.png"),
+        whdw: require("@/assets/img/shuju/command/ico/whdw.png"),
+        sr_ggld: require("@/assets/img/shuju/command/ico/sr_ggld.png"),
+        lwh: require("@/assets/img/shuju/command/ico/lwh.png"),
+        sr_tyc: require("@/assets/img/shuju/command/ico/sr_tyc.png"),
+        lyjlb: require("@/assets/img/shuju/command/ico/lyjlb.png"),
+        sr_yjy: require("@/assets/img/shuju/command/ico/sr_yjy.png"),
+        zaxld: require("@/assets/img/shuju/command/ico/zaxld.png"),
+        other: require("@/assets/img/shuju/command/ico/other.png"),
+        sr_jzz: require("@/assets/img/shuju/command/ico/sr_jzz.png"),
+        sr_djc: require("@/assets/img/shuju/command/ico/sr_djc.png"),
+        sr_rfqck: require("@/assets/img/shuju/command/ico/sr_rfqck.png"),
+        ep_lg: require("@/assets/img/shuju/command/ico/ep_lg.png"),
+        sr_xfz: require("@/assets/img/shuju/command/ico/sr_xfz.png"),
+        pu_jgzsbm: require("@/assets/img/shuju/command/ico/pu_jgzsbm.png"),
+        ep_qt: require("@/assets/img/shuju/command/ico/ep_qt.png"),
+
+        sr_others: require("@/assets/img/shuju/command/ico/sr_others.png"),
+        cm_others: require("@/assets/img/shuju/command/ico/cm_others.png"),
+        ps_others: require("@/assets/img/shuju/command/ico/ps_others.png"),
+        ps_nat: require("@/assets/img/shuju/command/ico/ps_nat.png"),
+        ps_vaccine: require("@/assets/img/shuju/command/ico/ps_vaccine.png"),
+
+        gr_czw: require("@/assets/img/shuju/command/ico/gr_czw.png"),
+        ep_cycs: require("@/assets/img/shuju/command/ico/ep_cycs.png"),
+        dc_jyz: require("@/assets/img/shuju/command/ico/dc_jyz.png"),
+        ep_gwylcs: require("@/assets/img/shuju/command/ico/ep_gwylcs.png"),
+        dc_jqz: require("@/assets/img/shuju/command/ico/dc_jqz.png"),
+        dc_whpdw: require("@/assets/img/shuju/command/ico/dc_whpdw.png"),
+        ep_wb: require("@/assets/img/shuju/command/ico/ep_wb.png"),
+        ep_mrxycs: require("@/assets/img/shuju/command/ico/ep_mrxycs.png"),
+        dc_yqhjz: require("@/assets/img/shuju/command/ico/dc_yqhjz.png"),
+        dc_jzgd: require("@/assets/img/shuju/command/ico/dc_jzgd.png"),
+        ep_scjgqy: require("@/assets/img/shuju/command/ico/ep_scjgqy.png"),
+
+        cm_nmsc: require("@/assets/img/shuju/command/ico/cm_nmsc.png"),
+        event_tdnd: require("@/assets/img/shuju/command/ico/event_tdnd.png"),
+        cm_bhsc: require("@/assets/img/shuju/command/ico/cm_bhsc.png"),
+        cm_cjsc: require("@/assets/img/shuju/command/ico/cm_cjsc.png"),
+        ep_lssd: require("@/assets/img/shuju/command/ico/ep_lssd.png"),
+
+        resi_szry: require("@/assets/img/shuju/command/ico/resi_szry.png"),
+        ps_lyy: require("@/assets/img/shuju/command/ico/ps_lyy.png"),
+        resi_snry: require("@/assets/img/shuju/command/ico/resi_snry.png"),
+        ps_mzb: require("@/assets/img/shuju/command/ico/ps_mzb.png"),
+        ps_zs: require("@/assets/img/shuju/command/ico/ps_zs.png"),
+        ps_wss: require("@/assets/img/shuju/command/ico/ps_wss.png"),
+        ps_jjz: require("@/assets/img/shuju/command/ico/ps_jjz.png"),
+        ep_xx: require("@/assets/img/shuju/command/ico/ep_xx.png"),
+        ep_yy: require("@/assets/img/shuju/command/ico/ep_yy.png"),
+
+        volunteer_nengrendaren: require("@/assets/img/shuju/command/ico/volunteer_nengrendaren.png"),
+        volunteer_daibanyuan: require("@/assets/img/shuju/command/ico/volunteer_daibanyuan.png"),
+        volunteer_tiaojieyuan: require("@/assets/img/shuju/command/ico/volunteer_tiaojieyuan.png"),
+        volunteer_caijiyuan: require("@/assets/img/shuju/command/ico/volunteer_caijiyuan.png"),
+        volunteer_zhianxunluo: require("@/assets/img/shuju/command/ico/volunteer_zhianxunluo.png"),
+        volunteer_others: require("@/assets/img/shuju/command/ico/volunteer_others.png"),
+        volunteer_dangyuanzhongxinhu: require("@/assets/img/shuju/command/ico/volunteer_dangyuanzhongxinhu.png"),
+
+        pu_0: require("@/assets/img/shuju/command/ico/pu_0.png"),
+        pu_1: require("@/assets/img/shuju/command/ico/pu_1.png"),
+        pu_2: require("@/assets/img/shuju/command/ico/pu_2.png"),
+        pu_3: require("@/assets/img/shuju/command/ico/pu_3.png"),
+        pu_4: require("@/assets/img/shuju/command/ico/pu_4.png"),
+        pu_5: require("@/assets/img/shuju/command/ico/pu_5.png"),
+        pu_6: require("@/assets/img/shuju/command/ico/pu_6.png"),
+        pu_7: require("@/assets/img/shuju/command/ico/pu_7.png"),
+      },
+    };
+  },
+
+  watch: {
+    categoryKeys() {
+      this.requestMapDot();
+    },
+  },
+
+  async mounted() {
+    //加载组织数据
+    await this.loadOrgData();
+    await this.requestMapDot();
+  },
+
+  methods: {
+    handleTo(item) {
+      this.$router.push({
+        path: `/main-shuju/visual-basicinfo-people-list`,
+        query: {
+          columnName: item.columnName,
+          label: item.label,
+          id: this.orgId,
+          level: this.orgLevel,
+        },
+      });
+    },
+    hideAgencyList() {
+      this.showAgencyList = !this.showAgencyList;
+    },
+
+    //加载组织数据
+    async loadOrgData() {
+      const url = "/gov/org/agency/maporg";
+      let params = {
+        orgId: this.orgId,
+        level: this.orgLevel,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.orgData = data;
+        this.orgId = this.orgData.id;
+        this.orgLevel = this.orgData.level;
+        if (data.children && data.children.length > 0) {
+          this.subAgencyArray = data.children;
+        } else {
+          this.subAgencyArray = [];
+        }
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    async requestMapDot() {
+      const url = "/data/aggregator/coverage/dataList";
+      let params = {
+        coverageTypes: [],
+        categoryKeys: this.categoryKeys,
+        isPage: false,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.dotList = data.list;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //子组件点击房间，刷新右侧list
+    refreshInfoList(selId, type) {
+      this.orgId = selId;
+      this.level = "";
+    },
+
+    //返回所选组织
+    handleClickAgency(index) {
+      //如果是从小区返回，清空一下小区的人员显示列表
+      if (this.orgLevel === "neighborHood") {
+        this.$nextTick(() => {
+          // 小区id，小区名称
+          this.$refs.ref_community.handleCloseAllUser();
+        });
+      }
+      const cutNum = this.runAgencyArray.length - index; //要减去的长度
+      this.runNum = this.runNum - cutNum;
+
+      this.orgData = this.runAgencyArray[index];
+
+      for (let i = 0; i < cutNum; i++) {
+        this.runAgencyArray.pop();
+      }
+
+      this.orgId = this.orgData.id;
+      this.orgLevel = this.orgData.level;
+
+      if (this.orgLevel === "people") {
+      } else if (this.orgLevel === "neighborHood") {
+        //显示小区
+      } else {
+        this.$nextTick(() => {
+          this.refreshMap(true);
+          this.$forceUpdate();
+        });
+      }
+    },
+
+    //点击组织列表数据
+    clickAgencyItem(item, index) {
+      let e = {
+        selected: [],
+      };
+      let one = {
+        values_: item,
+      };
+      e.selected.push(one);
+
+      this.toSubAgency("polygon", e);
+    },
+
+    //下钻到下一级 type点击的类型:polygon 点击多边形（分为点击组织/小区）    people 点击详情
+    async toSubAgency(type, e) {
+      //点击小区neighborHood显示楼栋，点击非小区，进入下一级地图
+      if (type === "people") {
+        this.runNum++;
+        this.runAgencyArray.push(this.orgData);
+        this.orgLevel = "people";
+        this.selUserId = e;
+        this.orgId = "";
+        this.orgData = {
+          id: "",
+          level: "people",
+          name: "人员档案",
+        };
+      } else {
+        if (!e) {
+          return false;
+        }
+        if (!e.selected[0]) {
+          return false;
+        }
+        this.runNum++;
+
+        this.runAgencyArray.push(this.orgData);
+
+        this.subAgencyArray.forEach((item) => {
+          if (item.id === e.selected[0].values_.id) {
+            this.orgId = item.id;
+            this.orgLevel = item.level;
+            this.orgData = item;
+          }
+        });
+
+        if (this.orgLevel === "neighborHood") {
+          this.requestMapDot();
+          this.$nextTick(() => {
+            // 小区id，小区名称
+            this.$refs.ref_community.initData(
+              this.orgData.id,
+              this.orgData.name
+            );
+          });
+        } else {
+          this.refreshMap(true);
+        }
+      }
+    },
+
+    //刷新地图
+    async refreshMap(isRefreshView) {
+      //加载组织数据
+      await this.loadOrgData();
+
+      await this.requestMapDot();
+    },
+
+    //开启加载动画
+    startLoading() {
+      loading = Loading.service({
+        lock: true, //是否锁定
+        text: "正在加载……", //加载中需要显示的文字
+        background: "rgba(0,0,0,.7)", //背景颜色
+      });
+    },
+
+    //结束加载动画
+    endLoading() {
+      //clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/command.scss"
+  scoped
+></style>