2021/12/25 修改

dist/assets/index.4dd41a21.css

+.my-title[data-v-338bb78b]{width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;justify-content:flex-start;position:relative;font-weight:700;background:url(/bigscreen/assets/title-bg.15abdf5b.png) center/cover no-repeat;z-index:1}.my-title .date[data-v-338bb78b]{z-index:2;position:absolute;right:1%}.my-title .date span[data-v-338bb78b]{display:block;text-align:right}.my-title h1[data-v-338bb78b]{font-family:Pangmenzhengdao,Avenir,Helvetica,Arial,sans-serif;width:18%;text-align:center;z-index:2;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-image:linear-gradient(to bottom,#fff,#00c7ff);font-size:.22rem;letter-spacing:.05rem;margin-top:.5%}.left-section[data-v-63456cb4]{backdrop-filter:blur(.05rem);-webkit-backdrop-filter:blur(.05rem);padding:.05rem;box-sizing:border-box;border-top:.01rem solid rgba(91,213,255,.5);border-bottom:.01rem solid rgba(91,213,255,.5);background:linear-gradient(to bottom,rgba(30,193,255,.3),transparent 5%,transparent 95%,rgba(30,193,255,.3) 100%);display:flex;flex-direction:column}.left-section>.my-card[data-v-63456cb4]:nth-of-type(1){flex:2}.left-section>.my-card[data-v-63456cb4]:nth-of-type(2),.left-section>.my-card[data-v-63456cb4]:nth-of-type(3),.left-section>.my-card[data-v-63456cb4]:nth-of-type(4),.left-section>.my-card[data-v-63456cb4]:nth-of-type(5){flex:1}.form .row[data-v-63456cb4]{display:flex;align-items:center;background:rgba(113,235,255,.05)}.form .row[data-v-63456cb4]:nth-of-type(2n){background:rgba(0,0,0,.1)}.form .col[data-v-63456cb4]{flex:1;display:flex;align-items:center;padding:.04rem .08rem;box-sizing:border-box}.form .col .label[data-v-63456cb4]{color:#5bd5ff;width:.6rem}.form .col .value[data-v-63456cb4]{flex:1}.photos[data-v-63456cb4]{display:flex}.photos>img[data-v-63456cb4]{width:15%}.photos>img+img[data-v-63456cb4]{margin-left:2%}.right-section[data-v-fa441966]{backdrop-filter:blur(.05rem);-webkit-backdrop-filter:blur(.05rem);padding:.05rem;box-sizing:border-box;border-top:.01rem solid rgba(91,213,255,.5);border-bottom:.01rem solid rgba(91,213,255,.5);background:linear-gradient(to bottom,rgba(30,193,255,.3),transparent 5%,transparent 95%,rgba(30,193,255,.3) 100%);display:flex;flex-direction:column}.right-section>.my-card[data-v-fa441966]:nth-of-type(1){flex:3}.right-section>.my-card[data-v-fa441966]:nth-of-type(2){flex:1}.sum[data-v-fa441966]{display:flex}.sum>div[data-v-fa441966]{padding:.05rem 0;box-sizing:border-box;display:flex;justify-content:space-around;flex:2}.sum>div p[data-v-fa441966]{display:flex;align-items:center}.sum>div p .count[data-v-fa441966]{font-size:.14rem;color:#fff}.sum>div p i[data-v-fa441966]{display:inline-block;width:.04rem;height:.04rem;margin:0 .04rem}.sum>div p span[data-v-fa441966]{font-size:.08rem;color:#ccc;margin-left:.03rem}.sum>div[data-v-fa441966]:last-child{flex:3;background:url(/bigscreen/assets/msg-wrapper3.0442f355.png) center/cover no-repeat}.sum>div:last-child p[data-v-fa441966]{color:#70a7e0}.chart[data-v-fa441966]{width:100%;height:1.5rem}.box[data-v-fa441966]{display:flex}.box>div[data-v-fa441966]{padding:0 .05rem;flex:1}.box>div .sub-title[data-v-fa441966]{font-size:.12rem;font-family:ZCool,Avenir,Helvetica,Arial,sans-serif;color:#32c5ff}.box>div .sub-title[data-v-fa441966]:before{content:'';display:inline-block;width:.02rem;height:.02rem;background:#32c5ff;margin-right:.04rem;margin-bottom:.04rem}.business-wrapper[data-v-fa441966]{display:flex;width:100%}.business-wrapper .pie[data-v-fa441966]{width:50%;height:1rem}.business-wrapper .legend[data-v-fa441966]{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:0 .05rem;box-sizing:border-box}.business-wrapper .legend>div[data-v-fa441966]{display:flex;align-items:center;justify-content:space-between}.business-wrapper .legend>div p[data-v-fa441966]{display:flex;align-items:center}.business-wrapper .legend>div p i[data-v-fa441966]{display:inline-block;width:.06rem;height:.06rem;border-radius:50%;margin-right:.04rem}.stores[data-v-fa441966]{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);padding:.06rem;box-sizing:border-box;grid-gap:.06rem}.stores>img[data-v-fa441966]{width:.4rem;height:.4rem}.table[data-v-fa441966]{display:flex}.table>div[data-v-fa441966]{border:.01rem solid rgba(0,118,255,.5)}.table>div+div[data-v-fa441966]{border-left:none}.table>div[data-v-fa441966]:nth-of-type(2),.table>div[data-v-fa441966]:nth-of-type(3){flex:1}.table>div p[data-v-fa441966]{padding:.04rem .06rem;box-sizing:border-box;background:rgba(0,118,255,.15)}.table>div p[data-v-fa441966]:first-child{background:rgba(0,118,255,.3);border-bottom:.01rem solid rgba(0,118,255,.5)}
\ No newline at end of file

dist/assets/index.f470cf96.css

-.my-title[data-v-338bb78b]{width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;justify-content:flex-start;position:relative;font-weight:700;background:url(./title-bg.15abdf5b.png) center/cover no-repeat;z-index:1}.my-title .date[data-v-338bb78b]{z-index:2;position:absolute;right:1%}.my-title .date span[data-v-338bb78b]{display:block;text-align:right}.my-title h1[data-v-338bb78b]{font-family:Pangmenzhengdao,Avenir,Helvetica,Arial,sans-serif;width:18%;text-align:center;z-index:2;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-image:linear-gradient(to bottom,#fff,#00c7ff);font-size:.22rem;letter-spacing:.05rem;margin-top:.5%}.left-section[data-v-63456cb4]{backdrop-filter:blur(.05rem);-webkit-backdrop-filter:blur(.05rem);padding:.05rem;box-sizing:border-box;border-top:.01rem solid rgba(91,213,255,.5);border-bottom:.01rem solid rgba(91,213,255,.5);background:linear-gradient(to bottom,rgba(30,193,255,.3),transparent 5%,transparent 95%,rgba(30,193,255,.3) 100%);display:flex;flex-direction:column}.left-section>.my-card[data-v-63456cb4]:nth-of-type(1){flex:2}.left-section>.my-card[data-v-63456cb4]:nth-of-type(2),.left-section>.my-card[data-v-63456cb4]:nth-of-type(3),.left-section>.my-card[data-v-63456cb4]:nth-of-type(4),.left-section>.my-card[data-v-63456cb4]:nth-of-type(5){flex:1}.form .row[data-v-63456cb4]{display:flex;align-items:center;background:rgba(113,235,255,.05)}.form .row[data-v-63456cb4]:nth-of-type(2n){background:rgba(0,0,0,.1)}.form .col[data-v-63456cb4]{flex:1;display:flex;align-items:center;padding:.04rem .08rem;box-sizing:border-box}.form .col .label[data-v-63456cb4]{color:#5bd5ff;width:.6rem}.form .col .value[data-v-63456cb4]{flex:1}.photos[data-v-63456cb4]{display:flex}.photos>img[data-v-63456cb4]{width:15%}.photos>img+img[data-v-63456cb4]{margin-left:2%}.right-section[data-v-fa441966]{backdrop-filter:blur(.05rem);-webkit-backdrop-filter:blur(.05rem);padding:.05rem;box-sizing:border-box;border-top:.01rem solid rgba(91,213,255,.5);border-bottom:.01rem solid rgba(91,213,255,.5);background:linear-gradient(to bottom,rgba(30,193,255,.3),transparent 5%,transparent 95%,rgba(30,193,255,.3) 100%);display:flex;flex-direction:column}.right-section>.my-card[data-v-fa441966]:nth-of-type(1){flex:3}.right-section>.my-card[data-v-fa441966]:nth-of-type(2){flex:1}.sum[data-v-fa441966]{display:flex}.sum>div[data-v-fa441966]{padding:.05rem 0;box-sizing:border-box;display:flex;justify-content:space-around;flex:2}.sum>div p[data-v-fa441966]{display:flex;align-items:center}.sum>div p .count[data-v-fa441966]{font-size:.14rem;color:#fff}.sum>div p i[data-v-fa441966]{display:inline-block;width:.04rem;height:.04rem;margin:0 .04rem}.sum>div p span[data-v-fa441966]{font-size:.08rem;color:#ccc;margin-left:.03rem}.sum>div[data-v-fa441966]:last-child{flex:3;background:url(./msg-wrapper3.0442f355.png) center/cover no-repeat}.sum>div:last-child p[data-v-fa441966]{color:#70a7e0}.chart[data-v-fa441966]{width:100%;height:1.5rem}.box[data-v-fa441966]{display:flex}.box>div[data-v-fa441966]{padding:0 .05rem;flex:1}.box>div .sub-title[data-v-fa441966]{font-size:.12rem;font-family:ZCool,Avenir,Helvetica,Arial,sans-serif;color:#32c5ff}.box>div .sub-title[data-v-fa441966]:before{content:'';display:inline-block;width:.02rem;height:.02rem;background:#32c5ff;margin-right:.04rem;margin-bottom:.04rem}.business-wrapper[data-v-fa441966]{display:flex;width:100%}.business-wrapper .pie[data-v-fa441966]{width:50%;height:1rem}.business-wrapper .legend[data-v-fa441966]{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:0 .05rem;box-sizing:border-box}.business-wrapper .legend>div[data-v-fa441966]{display:flex;align-items:center;justify-content:space-between}.business-wrapper .legend>div p[data-v-fa441966]{display:flex;align-items:center}.business-wrapper .legend>div p i[data-v-fa441966]{display:inline-block;width:.06rem;height:.06rem;border-radius:50%;margin-right:.04rem}.stores[data-v-fa441966]{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);padding:.06rem;box-sizing:border-box;grid-gap:.06rem}.stores>img[data-v-fa441966]{width:.4rem;height:.4rem}.table[data-v-fa441966]{display:flex}.table>div[data-v-fa441966]{border:.01rem solid rgba(0,118,255,.5)}.table>div+div[data-v-fa441966]{border-left:none}.table>div[data-v-fa441966]:nth-of-type(2),.table>div[data-v-fa441966]:nth-of-type(3){flex:1}.table>div p[data-v-fa441966]{padding:.04rem .06rem;box-sizing:border-box;background:rgba(0,118,255,.15)}.table>div p[data-v-fa441966]:first-child{background:rgba(0,118,255,.3);border-bottom:.01rem solid rgba(0,118,255,.5)}
\ No newline at end of file

dist/index.html

@@ -3,12 +3,12 @@
 
 <head>
   <meta charset="UTF-8">
-  <link rel="icon" href="./favicon.ico" />
+  <link rel="icon" href="/bigscreen/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>南京东路街道</title>
-<script type="module" crossorigin src="./assets/index.b96a32d6.js"></script>
-  <link rel="modulepreload" href="./assets/vendor.0a2bc783.js">
-  <link rel="stylesheet" href="./assets/index.fbdd870d.css">
+<script type="module" crossorigin src="/bigscreen/assets/index.84eaf793.js"></script>
+  <link rel="modulepreload" href="/bigscreen/assets/vendor.0a2bc783.js">
+  <link rel="stylesheet" href="/bigscreen/assets/index.9f522eb0.css">
 </head>
 
 <body>
@@ -17,7 +17,7 @@
   <!-- <script src="/SMap.min.js"></script> -->
   <!-- <script src="/dev/SMap.min.js"></script> -->
   <!-- <script src="/Plugins.min.js"></script> -->
-  <script src="./hls.js"></script>
+  <script src="/bigscreen/hls.js"></script>
   
 </body>
 

src/ajax/api.ts

@@ -29,6 +29,7 @@ export default {
   GET_ROOM: '/service-special-nandong/public/households', // 获取分户
   GET_PERSON: '/service-special-nandong/public/personnels', // 实有人口
   GET_COMMUNITY: '/service-basicdatasync-ddd/public/communities',
+  GET_BUILDINGS: '/service-basicdatasync-ddd/public/buildings', // 门牌户室
   GET_MANAGE: '/service-basicdatasync-ddd/public/css', // 小区管理处
   GET_BUILDING: '/service-basicdatasync-ddd/public/building', // 门牌幢列表
   GET_DEVICE: '/service-basicdatasync-ddd/public/facilitiesEquipment', // 设施设备列表

src/components/MyComponent/MyMap/my-map.vue

@@ -191,7 +191,14 @@ export default defineComponent({
     }
 
     function rotate(deg: number) {
-      // map.setRotation(deg)
+      map.goTo(
+        {
+          x: 121.4642191813353,
+          y: 31.229242441205542,
+          radius: 100,
+        },
+        { duration: 3.0, offset: { heading: deg, pitch: -35, range: 0 } }
+      )
     }
     // function cameraTo({
     //   center = [0, 0],
@@ -288,7 +295,6 @@ export default defineComponent({
     }: PointProp) {
       if (!map) return
       const points = getMapPoints({ data, key, labelKey, icon, size, color })
-      console.log('=====', points)
       map.Locate.pointLocate(points, {
         isZoom: false,
         click: (res: any) => {
@@ -297,10 +303,29 @@ export default defineComponent({
           }
         },
       })
-
       return points.map((item) => item.id)
     }
 
+    // 添加旗标
+    function addFlag({ id, x, y, z = 0, name, style, sectId }: any) {
+      const target = {
+        id,
+        position: { x, y, z },
+        element: `
+        <div class='ysc-dynamic-layer ys-css3-box _building-btn' data-id="${sectId}" style="pointer-events:auto;">
+          <div class='biaozhu' style="cursor:pointer;${style || ''}">
+          ${name}
+          </div>
+        </div>
+        `,
+      }
+      map.FlagInfo.show(target, { isZoom: true })
+      return id
+    }
+    function hideFlag(ids?: string[]) {
+      map.FlagInfo.hide(ids)
+    }
+
     // 删除点
     function remove(points?: string[]) {
       if (!map) return
@@ -356,6 +381,8 @@ export default defineComponent({
       addPolyLine,
       remove,
       setFilter,
+      addFlag,
+      hideFlag,
     }
   },
 })

src/store/index.ts

@@ -170,6 +170,7 @@ export interface GlobalStateProps {
   beautyStreet: any[]
   beautyHome: any[]
   facilityConvenient: any
+  buildingPoints: any
 }
 
 /** ------------------------------------- 分隔线 --------------------------------------- */

src/store/mutations.ts

@@ -40,12 +40,12 @@ export default {
       'zhu',
       'xing',
       'other',
-      '非居',
+      // '非居',
       'old',
       'sign',
       'history',
-      'community',
-      '居住',
+      // 'community',
+      // '居住',
     ]
   },
   SET_SHOW_COMMUNITY_POINTS(state: GlobalStateProps, val: boolean): void {
@@ -312,4 +312,7 @@ export default {
   SET_FACILITY_CONVENIENT(state: GlobalStateProps, data: any): void {
     state.facilityConvenient = data
   },
+  SET_BUILDING_POINTS(state: GlobalStateProps, data: any): void {
+    state.buildingPoints = data
+  },
 }

src/store/state.ts

@@ -250,4 +250,5 @@ export default {
   beautyStreet: [],
   beautyHome: [],
   facilityConvenient: {},
+  buildingPoints: [] as any,
 } as GlobalStateProps

src/view/components/map-btns.vue

@@ -63,25 +63,26 @@ export default defineComponent({
   setup(_, ctx) {
     const curViewType = computed(() => store.state.curView.type)
     const btns = computed(() => {
-      const mapType =
-        store.state.curMapType === '2D'
-          ? { key: '3D', icon: d3, title: '开启3D地图' }
-          : { key: '2D', icon: d2, title: '开启2D地图' }
+      // const mapType =
+      //   store.state.curMapType === '2D'
+      //     ? { key: '3D', icon: d3, title: '开启3D地图' }
+      //     : { key: '2D', icon: d2, title: '开启2D地图' }
       const list = [
         { key: 'search', icon: btn1 },
         { key: 'in', icon: zoomIn, title: '放大地图' },
         { key: 'out', icon: zoomOut, title: '缩小地图' },
         { key: 'full', icon: btn2, title: '全屏' },
-        { key: 'switch-community-point', icon: btn6, title: '显示/隐藏小区点' },
+        // { key: 'switch-community-point', icon: btn6, title: '显示/隐藏小区点' },
         { key: 'point', icon: btn4 },
         // { key: '', icon: btn5 },
         // { key: '', icon: btn6 },
       ]
 
-      const polyline = { key: 'polyline', icon: btn7 }
-      return curViewType.value === 'street'
-        ? [mapType, ...list, polyline]
-        : [mapType, ...list]
+      // const polyline = { key: 'polyline', icon: btn7 }
+      // return curViewType.value === 'street'
+      //   ? [mapType, ...list, polyline]
+      //   : [mapType, ...list]
+      return [...list]
     })
     const fullScreen = ref(false)
     const searchModal = ref(false)
@@ -135,78 +136,135 @@ export default defineComponent({
     }
     const treeData = ref([
       {
-        title: '居住',
-        key: '居住',
-        value: '居住',
+        title: '衣、食、住、行',
+        key: 'life',
+        tipvalue: 'life',
         children: [
           {
-            title: '商品房、二级旧里、直管公房',
-            key: 'community',
-            value: 'community',
+            title: '衣',
+            key: 'yi',
+            value: 'yi',
           },
-        ],
-      },
-      {
-        title: '非居',
-        key: '非居',
-        value: '非居',
-        children: [
           {
-            title: '衣、食、住、行',
-            key: 'life',
-            tipvalue: 'life',
-            children: [
-              {
-                title: '衣',
-                key: 'yi',
-                value: 'yi',
-              },
-              {
-                title: '食',
-                key: 'shi',
-                value: 'shi',
-              },
-              {
-                title: '住',
-                key: 'zhu',
-                value: 'zhu',
-              },
-              {
-                title: '行',
-                key: 'xing',
-                value: 'xing',
-              },
-              {
-                title: '其他',
-                key: 'other',
-                value: 'other',
-              },
-            ],
+            title: '食',
+            key: 'shi',
+            value: 'shi',
           },
           {
-            title: '为老服务站',
-            key: 'old',
-            value: 'old',
+            title: '住',
+            key: 'zhu',
+            value: 'zhu',
           },
           {
-            title: '地标性建筑',
-            key: 'sign',
-            value: 'sign',
+            title: '行',
+            key: 'xing',
+            value: 'xing',
           },
           {
-            title: '历史保护建筑',
-            key: 'history',
-            value: 'history',
+            title: '其他',
+            key: 'other',
+            value: 'other',
           },
         ],
       },
+      {
+        title: '为老服务站',
+        key: 'old',
+        value: 'old',
+      },
+      {
+        title: '地标性建筑',
+        key: 'sign',
+        value: 'sign',
+      },
+      {
+        title: '历史保护建筑',
+        key: 'history',
+        value: 'history',
+      },
+      {
+        title: '易积水点位',
+        key: 'water',
+        value: 'water',
+      },
+      {
+        title: '拆迁范围',
+        key: 'range',
+        value: 'range',
+      },
+      // {
+      //   title: '居住',
+      //   key: '居住',
+      //   value: '居住',
+      //   children: [
+      //     {
+      //       title: '商品房、二级旧里、直管公房',
+      //       key: 'community',
+      //       value: 'community',
+      //     },
+      //   ],
+      // },
+      // {
+      //   title: '非居',
+      //   key: '非居',
+      //   value: '非居',
+      //   children: [
+      //     {
+      //       title: '衣、食、住、行',
+      //       key: 'life',
+      //       tipvalue: 'life',
+      //       children: [
+      //         {
+      //           title: '衣',
+      //           key: 'yi',
+      //           value: 'yi',
+      //         },
+      //         {
+      //           title: '食',
+      //           key: 'shi',
+      //           value: 'shi',
+      //         },
+      //         {
+      //           title: '住',
+      //           key: 'zhu',
+      //           value: 'zhu',
+      //         },
+      //         {
+      //           title: '行',
+      //           key: 'xing',
+      //           value: 'xing',
+      //         },
+      //         {
+      //           title: '其他',
+      //           key: 'other',
+      //           value: 'other',
+      //         },
+      //       ],
+      //     },
+      //     {
+      //       title: '为老服务站',
+      //       key: 'old',
+      //       value: 'old',
+      //     },
+      //     {
+      //       title: '地标性建筑',
+      //       key: 'sign',
+      //       value: 'sign',
+      //     },
+      //     {
+      //       title: '历史保护建筑',
+      //       key: 'history',
+      //       value: 'history',
+      //     },
+      //   ],
+      // },
       // {
       //   title: '防寒抗冻',
       //   key: 'cold',
       //   value: 'cold',
       // },
     ])
-    const expandedKeys = ref(['居住', '非居', 'life'])
+    const expandedKeys = ref([])
     const checkedKeys = computed(() => store.state.checkedKeys)
     const handleCheck = (data: string[]) => {
       store.commit('SET_CHECKED_KEYS', data)

src/view/new-community.vue

@@ -6,19 +6,16 @@
     gap="0.05rem"
   >
     <m-title area="title"> 南东城运{{ title }} </m-title>
-    <m-map
-      ref="map"
-      :config="{
-        zoom: 10,
-      }"
-      @complete="handleComplete"
-      @event="handleMapClick"
-    />
+    <m-map ref="map" @complete="handleComplete" @event="handleMapClick" />
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
-      <LeftSection area="left" />
+      <LeftSection
+        area="left"
+        :info="buildingInfo"
+        @select="onSelectBuilding"
+      />
     </m-animate>
     <m-animate enter="fadeInRight" leave="fadeOutRight">
-      <RightSection area="right" />
+      <RightSection area="right" @select="focus" />
     </m-animate>
     <!-- <div class="btns">
       <div
@@ -48,7 +45,7 @@
         />
         <template #title>电瓶车入梯报警</template>
       </a-tooltip>
-      <a-tooltip placement="left">
+      <!-- <a-tooltip placement="left">
         <img
           draggable="false"
           src="@/assets/images/map-btn6.png"
@@ -57,7 +54,7 @@
         <template #title>
           {{ isCommunityPointsShowNow ? '隐藏' : '显示' }}小区点
         </template>
-      </a-tooltip>
+      </a-tooltip> -->
       <a-tooltip placement="left">
         <img
           draggable="false"
@@ -119,7 +116,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref, nextTick, watch } from 'vue'
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  ref,
+  nextTick,
+  watch,
+  onUnmounted,
+} from 'vue'
 import LeftSection from '@/view/new-community/left.vue'
 import RightSection from '@/view/new-community/right.vue'
 import SiteSelector from '@/view/community/site-selector.vue'
@@ -137,6 +142,10 @@ import video from '@/assets/images/ele-monitor.mp4'
 import { useRoute } from 'vue-router'
 import { ajax, api } from '@/ajax'
 import { message } from 'ant-design-vue'
+import a01 from '@/assets/images/a01.png'
+import a02 from '@/assets/images/a02.png'
+import a03 from '@/assets/images/a03.png'
+import a04 from '@/assets/images/a04.png'
 
 export default defineComponent({
   name: 'NewCommunity',
@@ -206,18 +215,22 @@ export default defineComponent({
       if (!curId.value) return
       const result: any = {
         '527635870583459840': {
-          zoom: 6,
-          center: [121.46419617592814, 31.228876694880928],
-        },
-        '527635870583459841': {
-          zoom: 11,
-          center: [-177.8293302195628, -588.2622422909122],
+          zoom: 1,
+          center: [121.4642191813353, 31.229242441205542],
         },
+        // '527635870583459841': {
+        //   zoom: 5,
+        //   center: [-177.8293302195628, -588.2622422909122],
+        // },
       }
       const cur = result[curId.value as string]
       map.value.focus(...cur.center, cur.zoom)
       return cur
     }
+    function focus(location: any[]) {
+      if (!map.value) return
+      map.value.focus(...location, 0.5)
+    }
     const showDrawer = ref(false)
     const drawerInfo = ref<any>({})
     const handleMapClick = (e: any) => {
@@ -263,10 +276,12 @@ export default defineComponent({
       },
       { immediate: true }
     )
-    function addBuildingPoints() {
+    let entryPoints: any = []
+    async function addBuildingPoints() {
       const pathList: any[] = []
+      const entryList: any[] = []
       for (let i = 0; i < buildingList.value.length; i++) {
-        const { gis, id } = buildingList.value[i]
+        const { gis, id, sectId } = buildingList.value[i]
         const paths = (gis && JSON.parse(gis))?.map((e: any) => [+e.x, +e.y])
         if (paths && paths.length > 0) {
           pathList.push({
@@ -274,7 +289,23 @@ export default defineComponent({
             paths,
           })
         }
+        const entry = (
+          (
+            await ajax.get({
+              url: api.GET_COMMUNITY_FACILITY,
+              params: { sectId, pageSize: 1000 },
+              showLoading: false,
+            })
+          ).data?.content || []
+        )?.filter((item: any) => item.relationName.includes('入口'))
+        entryList.push(...entry)
       }
+      entryPoints = map.value.addPoint({
+        key: 'entry-points',
+        size: 20,
+        icon: a04,
+        data: entryList,
+      })
       // 大楼勾边
       pathList.forEach((item) => {
         map.value.addPolyLine({
@@ -282,14 +313,32 @@ export default defineComponent({
           paths: item.paths,
         })
       })
-      console.log('---', pathList, buildingList.value)
       // 大楼名字
-      map.value.addPoint({
-        key: 'communityBuildings',
-        labelKey: 'sectName',
-        data: buildingList.value,
+      buildingList.value.forEach((item) => {
+        if (!item.x || !item.y) return
+        map.value.addFlag({
+          id: item.id,
+          sectId: item.sectId,
+          name: item.sectName,
+          x: +item.x,
+          y: +item.y,
+          z: 30,
+        })
       })
+      setTimeout(function () {
+        document.querySelectorAll('._building-btn')?.forEach(function (el) {
+          el.addEventListener('click', addEvent)
+        })
+      }, 1000)
+    }
+    function addEvent() {
+      fetchBuildingInfo((this as any).getAttribute('data-id'))
     }
+    onUnmounted(() => {
+      document.querySelectorAll('._building-btn')?.forEach(function (el) {
+        el.removeEventListener('click', addEvent)
+      })
+    })
     const btns = computed(() => {
       if (curId.value === '527635870583459841') {
         return [
@@ -359,6 +408,74 @@ export default defineComponent({
     const zoomMap = (type: string) => {
       map.value.zoom(type)
     }
+    const onSelectBuilding = (item: any) => {
+      map.value.hideFlag()
+      buildingList.value
+        .filter((e) => e.id != item.id)
+        .forEach((item) => {
+          if (!item.x || !item.y) return
+          map.value.addFlag({
+            id: item.id,
+            sectId: item.sectId,
+            name: item.sectName,
+            x: +item.x,
+            y: +item.y,
+            z: 30,
+          })
+        })
+      map.value.addFlag({
+        id: item.id,
+        sectId: item.sectId,
+        name: item.sectName,
+        x: +item.x,
+        y: +item.y,
+        z: 30,
+        style: 'color:gold;font-weight:bold;',
+      })
+    }
+    const buildingInfo = ref<any>({})
+    async function fetchBuildingInfo(sectId: string) {
+      const communityInfo =
+        (
+          await ajax.get({
+            url: api.GET_COMMUNITY,
+            params: { sectId },
+          })
+        )?.data?.content?.[0] || {}
+      const roomInfo =
+        (
+          await ajax.get({
+            url: api.GET_BUILDINGS,
+            params: { sectId },
+          })
+        )?.data?.content?.[0] || {}
+      buildingInfo.value = { ...communityInfo, ...roomInfo }
+    }
+    let buildingPoints: any = null
+    watch(
+      () => store.state.buildingPoints,
+      (points) => {
+        buildingPoints && map.value.remove(buildingPoints)
+        if (!points || points.length === 0) return
+        const data: any = []
+        points.forEach((item: any) => {
+          if (!item.x || !item.y) return
+          if (item.classification.includes('为老')) {
+            item.icon = a01
+          } else if (item.classification.includes('小区')) {
+            item.icon = a02
+          } else if (item.classification.includes('摄像头')) {
+            item.icon = a03
+          }
+          data.push(item)
+        })
+        buildingPoints = map.value.addPoint({
+          key: 'building-points',
+          size: 20,
+          data,
+        })
+      }
+    )
     return {
       prefix,
       rotation,
@@ -366,6 +483,7 @@ export default defineComponent({
       loading,
       title,
       map,
+      focus,
       handleComplete,
       showDrawer,
       drawerInfo,
@@ -379,6 +497,8 @@ export default defineComponent({
       isCommunityPointsShowNow,
       showCommunityPoints,
       zoomMap,
+      onSelectBuilding,
+      buildingInfo,
     }
   },
 })

src/view/new-community/archive.vue

@@ -20,6 +20,7 @@
         v-for="(item, i) in addrList"
         :key="i"
         :style="`border-left-color: ${getColor(item.classification)}`"
+        @click="onSelect(item)"
       >
         <div>
           <div>
@@ -69,7 +70,8 @@ import { ajax, api } from '@/ajax'
 export default defineComponent({
   name: 'Archive',
   components: { Brief },
-  setup() {
+  emits: ['select'],
+  setup(_, ctx) {
     const summary = ref<BriefProp[]>([])
     const buildingList = ref<unknown[]>([])
     const curBuilding = ref<string | null>(null)
@@ -156,8 +158,14 @@ export default defineComponent({
             (b: any) => b.sectId === curBuilding.value
           ) as any)
         ).icMember.sort((a: any, b: any) => +a.dirDuty - +b.dirDuty) || []
+      store.commit('SET_BUILDING_POINTS', addrList.value)
+    }
+    function onSelect({ x, y }) {
+      if (!x || !y) return
+      ctx.emit('select', [x, y])
     }
     return {
+      onSelect,
       summary,
       buildingList,
       curBuilding,
@@ -217,6 +225,9 @@ export default defineComponent({
     background rgba(33,58,89,.2)
     border .01rem solid rgba(91,213,255,.1)
     border-left .02rem solid transparent
+    cursor pointer
+    &:hover
+      box-shadow 0 0 .06rem 0 rgba(255,255,255, .1)
     i
       position absolute
       right -0.1rem

src/view/new-community/community-video.vue

@@ -75,10 +75,11 @@ export default defineComponent({
       //   })
       // ).data
       // src.value = remark2
-      src.value =
-        video &&
-        video.replace('https://zhongbang.omniview.pro/', prefix.value) &&
-        video.replace('http://zhongbang.omniview.pro/', prefix.value)
+      // src.value =
+      //   video &&
+      //   video.replace('https://zhongbang.omniview.pro/', prefix.value) &&
+      //   video.replace('http://zhongbang.omniview.pro/', prefix.value)
+      src.value = video
       showModal.value = true
     }
     const route = useRoute()

src/view/new-community/left.vue

@@ -53,7 +53,11 @@
       </m-card>
     </m-card>
     <div class="btns">
-      <span v-for="item in buildingList" :key="item.sectId">
+      <span
+        v-for="item in buildingList"
+        :key="item.sectId"
+        @click="onSelectBuilding(item)"
+      >
         {{ item.sectName.replace('黄浦区', '').replace('南京街道', '') }}
       </span>
     </div>
@@ -70,42 +74,42 @@
       <m-form
         label-width="1.3rem"
         :template="[
-          'name:小区名称|address:小区地址',
-          'c:物业管理单位|d:区',
-          'e:房办|f:街道',
-          'g:建筑面积|h:占地面积',
-          'i:小区性质',
+          'stNameFrst:小区名称|addrFrst:小区地址',
+          'cspName:物业管理单位|stKindName:小区性质',
+          'hoName:房办|streetName:街道',
+          'stCnstArea:建筑面积|landArea:占地面积',
         ]"
-        :data="{}"
+        :data="info"
       />
       <div class="subtitle">
         门牌详细信息
-        <span @click="showRooms = true">查看分户</span>
+        <span @click="checkRoom">查看分户</span>
       </div>
       <m-form
         label-width="1.3rem"
         :template="[
-          'i:单元号|j:门牌地址',
-          'k:门牌属性|l:使用类型',
-          'm:总层数|n:竣工日期',
+          'unitNo:单元号|unitAddr:门牌地址',
+          'unitKindName:门牌属性|useType:使用类型',
+          'unitTotFloor:总层数|finishDate:竣工日期',
         ]"
-        :data="{}"
+        :data="info"
       />
       <div class="subtitle">电梯信息</div>
       <m-form
         label-width="1.3rem"
-        :template="[
-          'o:电梯数量|p:电梯注册代码',
-          'q:使用证号|r:注册登记机构',
+        :template="['unitTotElevator:电梯数量|status:运行状态']"
+        :data="{
+          unitTotElevator: info.id == '121105095138846' ? 1 : 2,
+          status: '正常运行',
+        }"
+      />
+      <!-- 'q:使用证号|r:注册登记机构',
           's:注册登记人员|t:安装单位名称',
           'u:安装单位代码|v:安装地址',
           'w:安装竣工日期|x:安装负责人',
           'y:安装负责人联系电话|z:电梯编号',
           'a2:设备种类|b2:设计使用年限',
-          'c2:设备型号|d2:管理单元(小区楼宇)',
-        ]"
-        :data="{}"
-      />
+          'c2:设备型号|d2:管理单元(小区楼宇)', -->
     </template>
     <template v-else>
       <div class="subtitle">
@@ -114,10 +118,10 @@
       </div>
       <m-table
         :template="[
-          '序号|分户地址*3|分户面积(㎡)*2|房屋性质*2|房屋类型*2|电梯标志*2',
-          'a|b|c|d|e|f',
+          '序号|分户地址*3|分户面积(㎡)*2|房屋类型*2',
+          'index|addr|houseArea|houseType',
         ]"
-        :data="[]"
+        :data="roomList"
       />
     </template>
   </m-modal>
@@ -127,9 +131,19 @@
 import icon1 from '@/assets/images/icon31.png'
 import icon2 from '@/assets/images/icon37.png'
 import icon3 from '@/assets/images/icon38.png'
-import { computed, ref } from 'vue'
+import { computed, defineEmit, defineProps, ref, watch } from 'vue'
+import type { PropType } from 'vue'
 import store from '@/store'
 import Brief from '../components/brief.vue'
+import { ajax, api } from '@/ajax'
+
+const emit = defineEmit(['select'])
+const props = defineProps({
+  info: {
+    type: Object as PropType<{ [key: string]: any }>,
+    default: () => ({}),
+  },
+})
 
 const buildingList = computed(() => store.state.communityInfo.communityList)
 const communityInfo = computed(() => store.state.communityInfo)
@@ -288,7 +302,36 @@ const option3 = {
   },
 }
 const archiveModal = ref(false)
+watch(
+  () => props.info,
+  (cur) => {
+    if (cur && Object.keys(cur).length > 0) {
+      archiveModal.value = true
+    }
+  }
+)
 const showRooms = ref(false)
+
+function onSelectBuilding(data: any) {
+  emit('select', data)
+}
+const roomList = ref<any>([])
+function checkRoom() {
+  ajax
+    .get({
+      url: api.GET_ROOM,
+      params: { sectId: props.info?.sectId, pageSize: 9000 },
+    })
+    .then((res) => {
+      roomList.value = (res?.data?.content || []).map(
+        (item: any, i: number) => ({
+          index: i + 1,
+          ...item,
+        })
+      )
+      showRooms.value = true
+    })
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -312,6 +355,7 @@ const showRooms = ref(false)
   margin-top .05rem
   display flex
   justify-content space-between
+  z-index 999
   >span
     $center()
     width 30%

src/view/new-community/right.vue

@@ -7,7 +7,7 @@
       <WarningStatistics />
     </m-card>
     <m-card mode="border2">
-      <Archive />
+      <Archive @select="onSelect" />
     </m-card>
   </div>
 </template>
@@ -16,6 +16,11 @@
 import CommunityVideo from './community-video.vue'
 import WarningStatistics from './warning-statistics.vue'
 import Archive from './archive.vue'
+import { defineEmit } from 'vue'
+const emit = defineEmit(['select'])
+function onSelect(location: any) {
+  emit('select', location)
+}
 </script>
 
 <style lang="stylus" scoped>

src/view/new-community/warning-statistics.vue

@@ -40,15 +40,21 @@
             </div>
             <div class="middle">
               <div
-                v-show="item.alarmPic"
-                :style="`background-image: url(data:image/png;base64,${item.alarmPic})`"
+                :style="`background-image: url(${
+                  item.alarmPic
+                    ? 'data:image/png;base64' + item.alarmPic
+                    : noneImg
+                })`"
                 @click="viewImage(item.alarmPic)"
               >
                 <span>发现</span>
               </div>
               <div
-                v-show="item.donePic"
-                :style="`background-image: url(data:image/png;base64,${item.donePic})`"
+                :style="`background-image: url(${
+                  item.donePic
+                    ? 'data:image/png;base64' + item.donePic
+                    : noneImg
+                })`"
                 @click="viewImage(item.donePic)"
               >
                 <span>处置</span>
@@ -92,6 +98,7 @@ import { ref } from 'vue'
 import { ajax, api } from '@/ajax'
 import c1 from '@/assets/images/c1.png'
 import c2 from '@/assets/images/c2.png'
+import noneImg from '@/assets/images/none.png'
 const sum = ref([
   {
     name: '今日预警数量',

src/view/right/case-analysis.vue

@@ -29,7 +29,10 @@
       <m-sub2>多发地点</m-sub2>
       <div v-if="placeList.length > 0" class="content">
         <div v-for="item in placeList" :key="item.name">
-          <p>{{ item.name }}</p>
+          <a-tooltip>
+            <p>{{ item.name }}</p>
+            <template #title>{{ item.name }}</template>
+          </a-tooltip>
           <div>
             <span>{{ item.type }}</span>
             <m-count class="count" :value="item.value" />
@@ -145,6 +148,10 @@ export default defineComponent({
         height .6rem
         background url('@/assets/images/place-bg.png') center / cover no-repeat
         padding .05rem
+        p
+          white-space nowrap
+          overflow hidden
+          text-overflow ellipsis
         >div
           display flex
           justify-content space-between

src/view/right/complain.vue

@@ -26,7 +26,7 @@
             <template
               v-if="
                 classChartData.dimensions &&
-                classChartData.dimensions.length > 0
+                  classChartData.dimensions.length > 0
               "
             >
               <div>
@@ -141,7 +141,6 @@ export default defineComponent({
           managementType: '小区',
         },
       ]
-      console.log('00', data)
       const source: any = [
         {
           seriesName: '分类排行',

src/view/right/demand.vue

@@ -26,7 +26,7 @@
         <m-empty v-else />
       </div>
       <div class="chart wrapper">
-        <img src="@/assets/images/pyramid.png" />
+        <img :src="pyramid" />
         <div>
           <p v-for="item in pieData" :key="item.name">
             <span :style="{ background: item.color }" />
@@ -58,7 +58,7 @@
       >
         <div v-for="(item, i) in trackEvent" :key="i" class="detail">
           <div class="title">
-            <p>{{ item.communityName || '暂无' }}</p>
+            <p>{{ item.communityName || '无关联小区' }}</p>
             <span />
             <p>{{ item.businsessTypeLv1 }}</p>
           </div>
@@ -77,6 +77,7 @@
 import { computed, defineComponent, ref } from 'vue'
 import Brief from '../components/brief.vue'
 import store from '@/store'
+import pyramid from '@/assets/images/pyramid.png'
 
 export default defineComponent({
   name: 'Demand',
@@ -258,6 +259,7 @@ export default defineComponent({
       return index < 0 ? 0 : index
     }
     return {
+      pyramid,
       summary,
       showChart,
       process,

src/view/right/ecology.vue

@@ -23,12 +23,11 @@
     <div>
       <m-sub2>商业综合体</m-sub2>
       <div class="business">
-        <!-- <img v-for="photo in businessPhotos" :key="photo" :src="photo" /> -->
-        <div
+        <img
           v-for="photo in businessPhotos"
           :key="photo"
           class="photo"
-          :style="`background-image:url('${photo}')`"
+          :src="photo"
         />
       </div>
     </div>

src/view/right/emergency-store.vue

@@ -138,7 +138,7 @@ export default defineComponent({
     const outHouseWall = computed(() => store.state.pubulicSafeOutHouseWall)
 
     const year = ref('2020') //年份
-    const yearOptions = ref(['2020', '2019']) //年份option
+    const yearOptions = ref(['2021', '2020', '2019']) //年份option
     const houseSum = ref([
       { name: '检查楼数', value: 0 },
       { name: '隐患点数', value: 0 },
@@ -289,9 +289,8 @@ export default defineComponent({
       [() => outHouseWall.value, () => year.value],
       ([data, year]) => {
         if (data.length === 0) return
-        const { checkNum = 0, hiddenPoint = 0, dangerPoint = 0 } = data.find(
-          (e: any) => e.year === year
-        )
+        const { checkNum = 0, hiddenPoint = 0, dangerPoint = 0 } =
+          data?.find((e: any) => e.year === year) || {}
         houseSum.value = [
           { name: '检查楼数', value: checkNum },
           { name: '隐患点数', value: hiddenPoint },

src/view/right/old.vue

@@ -134,7 +134,7 @@ export default defineComponent({
       series: [
         {
           type: 'pie',
-          roseType: 'radius',
+          // roseType: 'radius',
           radius: ['10%', '90%'],
           center: ['50%', '50%'],
           label: {

src/view/right/police.vue

@@ -38,7 +38,7 @@
             </p>
           </div>
           <div>
-            <img src="@/assets/images/map.png" />
+            <img :src="mapPhoto" />
           </div>
         </div>
       </div>
@@ -79,6 +79,7 @@ import icon39 from '@/assets/images/icon39.png'
 import icon40 from '@/assets/images/icon40.png'
 import icon41 from '@/assets/images/icon41.png'
 import avatar7 from '@/assets/images/avatar7.png'
+import mapPhoto from '@/assets/images/map.png'
 
 export default defineComponent({
   name: 'Police',
@@ -168,6 +169,7 @@ export default defineComponent({
       streetData.value = item
     }
     return {
+      mapPhoto,
       avatar7,
       sumList,
       lineData,

vite.config.js

@@ -11,7 +11,7 @@ export default defineConfig({
       '/@': resolve(__dirname, './src'),
     },
   },
-  base: './',
+  base: process.env.NODE_ENV === 'production' ? '/bigscreen/' : './',
   server: {
     port: 3002,
     proxy: {