01-15修改打包

dist/assets/index.f470cf96.css → dist/assets/index.4421d414.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)}
+.my-title[data-v-a40cce56]{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-a40cce56]{z-index:2;position:absolute;right:1%}.my-title .date span[data-v-a40cce56]{display:block;text-align:right}.my-title h1[data-v-a40cce56]{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

@@ -6,9 +6,9 @@
   <link rel="icon" href="./favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>南京东路街道</title>
-<script type="module" crossorigin src="./assets/index.02ba1bbd.js"></script>
+<script type="module" crossorigin src="./assets/index.68bbf415.js"></script>
   <link rel="modulepreload" href="./assets/vendor.0a2bc783.js">
-  <link rel="stylesheet" href="./assets/index.65e0a3c6.css">
+  <link rel="stylesheet" href="./assets/index.b71943ab.css">
 </head>
 
 <body>

src/ajax/api.ts

@@ -141,6 +141,7 @@ export default {
     '/service-special-nandong/public/discover/category/count', // 发现数据
   GET_DISCOVER_COUNT: '/service-special-nandong/public/discover/count', // 今日及历史发现数
   GET_DISCOVER_LIST: '/service-special-nandong/public/discoverys', // 快处闭环
+  GET_COMMUNITY_PATH: '/service-special-nandong/public/coordinatess', // 所有小区勾边
 
   /** 来福士 */
   GET_RAFFLES: '/service-special-nandong/public/lfss', // 来福士列表

src/ajax/axios.ts

@@ -10,7 +10,8 @@ const Axios = axios.create({
 Axios.interceptors.request.use(
   (config) => {
     // 添加token
-    // config.headers.Authorization = ''
+    // config.headers.Authorization =
+    //   'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMCIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjQyMjMwNTA2LCJqdGkiOiI1ODcwMDA5My01NjlmLTQ4OGUtOWE5NS00NTc4M2I4ZTIyY2UiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2NDIyMjMzMDY5MDZ9.XFYjrr2CEF0l7Eq4nXeuOAETXkwSE24Jt7kM1pCfp_lIjAl8qDhWLWQh2P4EWHGGs95c79Hdh6ci5UyxliwDekBKMUKmq1V2ntMtLPslkLxv0cNW1HgJH8haDexnV7rWwS3ete3uxSIr93mLaSi9_HQ-WoADjVgeFETb_gpT1gzsPMUVyblfEcktwSUDvwrLetkmOlJxMrzxuW9CWiMMIlmMmIzLLxlm4J5qoEaQudUVhG4KSr3yUen0CY1iJYqJNIJPMp8GjptZo-Uh4YKq57EKSMdGiqXHORRUdlNzwFO0cezN6fvpKcfzG7173urXGjCZnBUXBH9S2f6htfo42w'
     return config
   },
   (error) => {

src/assets/style/reset.styl

@@ -56,7 +56,7 @@ $color-main = #5BD5FF
     font-weight bold
 
 .ant-tooltip-inner
-  min-width 2rem
+  // min-width 2rem
   min-height .2rem
   padding .05rem .08rem
   background $primary-bg

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

@@ -32,7 +32,6 @@ export default defineComponent({
   },
   emits: ['complete', 'event'],
   setup(props, ctx) {
-    const curMapType = computed(() => store.state.curMapType)
     let map: any = null
     function initMap(config?: any) {
       map = new JMap()
@@ -135,16 +134,24 @@ export default defineComponent({
      * @param {String} y [必填 - y坐标]
      * @param {Number} zoom [可选 - 放大比例（默认为6）]
      */
-    function focus(x: string | number, y: string | number, zoom = 6) {
+    function focus(
+      x: string | number,
+      y: string | number,
+      zoom = 6,
+      options = undefined
+    ) {
       if (!map || !x || !y) {
         console.error('传入的坐标点不能为空')
         return
       }
-      map.goTo({
-        x: +x,
-        y: +y,
-        radius: +zoom * 100,
-      })
+      map.goTo(
+        {
+          x: +x,
+          y: +y,
+          radius: +zoom * 100,
+        },
+        options
+      )
     }
 
     function zoom(type: string) {
@@ -190,14 +197,21 @@ export default defineComponent({
       // return key
     }
 
-    function rotate(deg: number) {
+    function rotate(
+      location = [121.4642191813353, 31.229242441205542],
+      deg: number,
+      type = '3D'
+    ) {
       map.goTo(
         {
-          x: 121.4642191813353,
-          y: 31.229242441205542,
+          x: location[0],
+          y: location[1],
           radius: 100,
         },
-        { duration: 3.0, offset: { heading: deg, pitch: -35, range: 0 } }
+        {
+          duration: 2.0,
+          offset: { heading: deg, pitch: type === '2D' ? -90 : -35, range: 0 },
+        }
       )
     }
     // function cameraTo({

src/store/actions.ts

@@ -51,6 +51,7 @@ export default {
     dispatch('GET_MOREHAPPEN_ADDR', {
       managementType: '综合',
     })
+    dispatch('GET_COMMUNITY_PATHS')
     dispatch('GET_RESPONSIVITY')
     dispatch('GET_ENTRY')
     dispatch('GET_PUBLICSAFE_SOS_MATERIAL')
@@ -332,11 +333,14 @@ export default {
           params: { labelName: '易积水点位', pageSize: 10000 },
         })
       )?.data?.content || []
-    ).map((item: any) => {
-      item.icon = water
-      item._type = 'water'
-      return item
-    })
+    )
+      .map((item: any) => {
+        item.icon = water
+        item.size = [30, 35]
+        item._type = 'water'
+        return item
+      })
+      .filter((item: any) => item.x && item.y)
     const rangePaths = (
       (
         await ajax.get({
@@ -359,11 +363,14 @@ export default {
           params: { labelName_l: '地标性建筑', pageSize: 10000 },
         })
       )?.data?.content || []
-    ).map((item: any) => {
-      item.icon = land
-      item._type = 'sign'
-      return item
-    })
+    )
+      .map((item: any) => {
+        item.icon = land
+        item.size = [30, 35]
+        item._type = 'sign'
+        return item
+      })
+      .filter((item: any) => item.x && item.y)
     const historyPoints = (
       (
         await ajax.get({
@@ -371,11 +378,14 @@ export default {
           params: { labelName_l: '历史保护建筑', pageSize: 10000 },
         })
       )?.data?.content || []
-    ).map((item: any) => {
-      item.icon = history
-      item._type = 'history'
-      return item
-    })
+    )
+      .map((item: any) => {
+        item.icon = history
+        item.size = [30, 35]
+        item._type = 'history'
+        return item
+      })
+      .filter((item: any) => item.x && item.y)
     const oldPoints = (
       (
         await ajax.get({
@@ -383,11 +393,14 @@ export default {
           params: { pageSize: 10000 },
         })
       )?.data?.content || []
-    ).map((item: any) => {
-      item.icon = old
-      item._type = 'old'
-      return item
-    })
+    )
+      .map((item: any) => {
+        item.icon = old
+        item.size = [30, 35]
+        item._type = 'old'
+        return item
+      })
+      .filter((item: any) => item.x && item.y)
     commit('SET_ECOLOGY_POINTS', [
       ...result,
       ...waterPoints,
@@ -864,4 +877,24 @@ export default {
     }
     commit('SET_FACILITY_CONVENIENT', result)
   },
+
+  async GET_COMMUNITY_PATHS({ commit }: Method): Promise<void> {
+    ajax
+      .get({
+        url: api.GET_COMMUNITY_PATH,
+        params: {
+          pageSize: 9999,
+        },
+      })
+      .then((res) => {
+        const result = (res?.data?.content || []).map((item: any) => {
+          if (item.gis) {
+            const path = JSON.parse(item.gis)
+            item.path = path.map((e: any) => [+e.x, +e.y])
+          }
+          return item
+        })
+        commit('SET_COMMUNITY_PATHS', result)
+      })
+  },
 }

src/store/index.ts

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

src/store/mutations.ts

@@ -41,9 +41,9 @@ export default {
       'xing',
       'other',
       // '非居',
-      'old',
-      'sign',
-      'history',
+      // 'old',
+      // 'sign',
+      // 'history',
       // 'community',
       // '居住',
     ]
@@ -315,4 +315,7 @@ export default {
   SET_BUILDING_POINTS(state: GlobalStateProps, data: any): void {
     state.buildingPoints = data
   },
+  SET_COMMUNITY_PATHS(state: GlobalStateProps, data: any): void {
+    state.communityPaths = data || []
+  },
 }

src/store/state.ts

@@ -2,7 +2,7 @@ import { GlobalStateProps } from './index'
 
 export default {
   showLoading: false,
-  curMapType: '2D', // 2D、3D
+  curMapType: '3D', // 2D、3D
   curView: { name: '南京东路街道', type: 'street' }, // 当前屏幕（街道or工作站）
   curPointType: null, // 当前地图撒点类型（null默认全部，还有衣食住行等）
   checkedKeys: [
@@ -12,11 +12,11 @@ export default {
     'zhu',
     'xing',
     'other',
-    'old',
-    'sign',
-    'history',
-    'water',
-    'range',
+    // 'old',
+    // 'sign',
+    // 'history',
+    // 'water',
+    // 'range',
     // 'community',
     // '非居',
     // '居住',
@@ -253,4 +253,5 @@ export default {
   beautyHome: [],
   facilityConvenient: {},
   buildingPoints: [] as any,
+  communityPaths: [] as any,
 } as GlobalStateProps

src/view/components/map-btns.vue

@@ -182,6 +182,11 @@ export default defineComponent({
         key: 'history',
         value: 'history',
       },
+      {
+        title: '小区四至范围',
+        key: 'community',
+        value: 'community',
+      },
       {
         title: '易积水点位',
         key: 'water',
@@ -271,7 +276,7 @@ export default defineComponent({
       ctx.emit('point', data)
     }
     watch(
-      [() => curViewType.value, () => store.state.curMapType],
+      () => curViewType.value,
       () => (checkboxValues.value = [])
     )
 

src/view/hooks/useSwitchMap.ts

@@ -7,14 +7,6 @@ import star from '@/assets/images/star.png'
 export default function useSwitchMap(map: any): any {
   const curMapType = computed(() => store.state.curMapType)
   const curViewType = computed(() => store.state.curView.type)
-  watch(
-    () => curMapType.value,
-    (type) => {
-      if (!map.value) return
-      map.value.initMap({ viewMode: type })
-    },
-    { immediate: true }
-  )
   watch(
     () => store.state.showCommunityPoints,
     (val) => {
@@ -24,13 +16,13 @@ export default function useSwitchMap(map: any): any {
   watch(
     () => curViewType.value,
     (type) => {
-      store.commit('SET_SHOW_COMMUNITY_POINTS', false)
+      // store.commit('SET_SHOW_COMMUNITY_POINTS', false)
       setPointsAndBoundary(type)
       if (areaLines && areaLines.length > 0) {
         map.value.remove(areaLines)
       }
-      if (curMapType.value === '2D') return
-      store.commit('SET_MAP_TYPE', '2D')
+      if (curMapType.value === '3D') return
+      store.commit('SET_MAP_TYPE', '3D')
     }
   )
   const boundary: any = null
@@ -123,15 +115,15 @@ export default function useSwitchMap(map: any): any {
 
   const handleMapComplete = async () => {
     setPointsAndBoundary(curViewType.value)
-    if (curMapType.value === '3D') {
-      if (curViewType.value === 'work1') {
-        map.value.layer('model_white_zw').visible = false
-        map.value.layer('model_white_dyjd').visible = true // 第一街道名
-      } else {
-        map.value.layer('model_white_zw').visible = true
-        map.value.layer('model_white_dyjd').visible = false
-      }
-    }
+    // if (curMapType.value === '3D') {
+    //   if (curViewType.value === 'work1') {
+    //     map.value.layer('model_white_zw').visible = false
+    //     map.value.layer('model_white_dyjd').visible = true // 第一街道名
+    //   } else {
+    //     map.value.layer('model_white_zw').visible = true
+    //     map.value.layer('model_white_dyjd').visible = false
+    //   }
+    // }
     await nextTick()
     handlePoint(curPointType.value, checkedKeys.value)
   }
@@ -149,11 +141,16 @@ export default function useSwitchMap(map: any): any {
     [() => curPointType.value, () => checkedKeys.value],
     ([type, keys], [pastType, pastKeys]) => {
       if (type === pastType && keys.join() === pastKeys?.join()) return
-      handlePoint(type, keys)
+      if (keys.join() !== pastKeys?.join()) {
+        handlePoint(null, keys)
+      } else {
+        handlePoint(type, keys)
+      }
     }
   )
   let mapPoints: any = null
   let moveRangePaths: any = null
+  let communityPaths: any = null
   const emergencyPoints = computed(() => store.state.emergencyPoints)
   let mapEmergency: any = null
   function handlePoint(type: null | string, keys: string[]) {
@@ -167,8 +164,10 @@ export default function useSwitchMap(map: any): any {
     } = map.value
 
     if (keys.length === 0) {
-      hideCommunity()
+      // hideCommunity()
       remove(mapPoints)
+      remove(moveRangePaths)
+      remove(communityPaths)
       return
     }
 
@@ -192,9 +191,11 @@ export default function useSwitchMap(map: any): any {
     const historyPoints = pointData.filter((e) => e._type === 'history')
     const waterPoints = pointData.filter((e) => e._type === 'water')
     const moveRanges = pointData.filter((e) => e._type === 'range')
+
     remove(mapEmergency)
     remove(mapPoints)
     remove(moveRangePaths)
+    remove(communityPaths)
     mapPoints = addPoint({
       key: 'map-points',
       size: 20,
@@ -212,11 +213,20 @@ export default function useSwitchMap(map: any): any {
       ],
     })
     if (keys.some((key) => key === 'range')) {
-      moveRangePaths = moveRanges.map((item: any) =>
+      moveRangePaths = moveRanges.map((item: any, index) =>
+        addPolyLine({
+          key: `move-rangs${index}`,
+          paths: item.path,
+          strokeColor: '#f00',
+        })
+      )
+    }
+    if (keys.some((key) => key === 'community')) {
+      communityPaths = store.state.communityPaths.map((item: any, index) =>
         addPolyLine({
-          key: 'move-rangs',
-          paths: item.paths,
-          strokeColor: '#ffd700',
+          key: `community-path${index}`,
+          paths: item.path,
+          strokeColor: '#00ffdd',
         })
       )
     }

src/view/main.vue

@@ -69,6 +69,7 @@ import CaseDrawer from './drawers/case-drawer.vue'
 import PopulationDrawer from './drawers/population-drawer.vue'
 import store from '@/store'
 import useSwitchMap from './hooks/useSwitchMap'
+import { ajax, api } from '@/ajax'
 
 export default defineComponent({
   name: 'Main',
@@ -105,9 +106,10 @@ export default defineComponent({
     const fullScreen = ref(false)
     const showDrawer = ref(false)
     const map = ref<any>(null)
+    const communityPaths = ref<any>([])
     onMounted(async () => {
       await nextTick()
-      map.value.initMap({ viewMode: '2D' })
+      map.value.initMap()
       if (!isNaN(+store.state.curView.type)) {
         store.commit('SET_CURRENT_VIEW', {
           name: '南京东路街道',

src/view/new-community.vue

@@ -29,7 +29,17 @@
     </div> -->
     <SiteSelector />
     <div class="operates">
-      <a-tooltip placement="left">
+      <a-tooltip placement="right">
+        <img
+          :src="curMapType === '2D' ? d3 : d2"
+          draggable="false"
+          @click="switchMapType(curMapType === '2D' ? '3D' : '2D')"
+        />
+        <template #title>
+          切换为{{ curMapType === '2D' ? '3D' : '2D' }}
+        </template>
+      </a-tooltip>
+      <a-tooltip placement="right">
         <img
           draggable="false"
           src="@/assets/images/map-btn5.png"
@@ -37,7 +47,7 @@
         />
         <template #title>旋转90度</template>
       </a-tooltip>
-      <a-tooltip placement="left">
+      <a-tooltip placement="right">
         <img
           draggable="false"
           src="@/assets/images/map-btn4.png"
@@ -45,7 +55,7 @@
         />
         <template #title>电瓶车入梯报警</template>
       </a-tooltip>
-      <!-- <a-tooltip placement="left">
+      <!-- <a-tooltip placement="right">
         <img
           draggable="false"
           src="@/assets/images/map-btn6.png"
@@ -55,7 +65,7 @@
           {{ isCommunityPointsShowNow ? '隐藏' : '显示' }}小区点
         </template>
       </a-tooltip> -->
-      <a-tooltip placement="left">
+      <a-tooltip placement="right">
         <img
           draggable="false"
           src="@/assets/images/zoom-in.png"
@@ -63,7 +73,7 @@
         />
         <template #title> 放大地图 </template>
       </a-tooltip>
-      <a-tooltip placement="left">
+      <a-tooltip placement="right">
         <img
           draggable="false"
           src="@/assets/images/zoom-out.png"
@@ -146,6 +156,8 @@ 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'
+import d2 from '@/assets/images/2d.png'
+import d3 from '@/assets/images/3d.png'
 
 export default defineComponent({
   name: 'NewCommunity',
@@ -154,6 +166,7 @@ export default defineComponent({
     const buildingList = computed(
       () => store.state.communityInfo.communityList || []
     )
+    const curMapType = computed(() => store.state.curMapType)
     const prefix = computed(() => api.SOURCE_URL)
     const rotation = ref(0)
     const rotateAngle = () => {
@@ -161,7 +174,18 @@ export default defineComponent({
       if (rotation.value >= 360) {
         rotation.value = 0
       }
-      map.value.rotate(rotation.value)
+      const result: any = {
+        '527635870583459840': {
+          zoom: 1,
+          center: [121.4642191813353, 31.229242441205542],
+        },
+        '527635870583459841': {
+          zoom: 1,
+          center: [121.46537699130965, 31.230185340301105],
+        },
+      }
+      const cur = result[curId.value as string]
+      map.value.rotate(cur.center, rotation.value, curMapType.value)
       // map.value.cameraTo({ heading: rotation.value })
     }
     const loading = ref(true)
@@ -175,13 +199,13 @@ export default defineComponent({
       store.dispatch('initCommunityData', id)
     }
     const map = ref<any>(null)
+    curId.value = (route.query.id as string) || communityOptions.value[0].type
+    initData(curId.value)
+    store.commit(
+      'SET_CURRENT_VIEW',
+      communityOptions.value.find((item) => item.type == curId.value)
+    ) // 使标题不显示公共的3个按钮
     onMounted(async () => {
-      curId.value = (route.query.id as string) || communityOptions.value[0].type
-      initData(curId.value)
-      store.commit(
-        'SET_CURRENT_VIEW',
-        communityOptions.value.find((item) => item.type == curId.value)
-      ) // 使标题不显示公共的3个按钮
       await nextTick()
       map.value.initMap()
     })
@@ -211,17 +235,38 @@ export default defineComponent({
         data: pointData,
       })
     }
+    function addAllFlags() {
+      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 focusCenterAndAddLayer() {
+      addAllFlags()
       if (!curId.value) return
       const result: any = {
         '527635870583459840': {
+          // 振兴小区
           zoom: 1,
           center: [121.4642191813353, 31.229242441205542],
         },
-        // '527635870583459841': {
-        //   zoom: 5,
-        //   center: [-177.8293302195628, -588.2622422909122],
-        // },
+        '527635870583459841': {
+          // 威海路小区
+          zoom: 1,
+          center: [121.46537699130965, 31.230185340301105],
+        },
       }
       const cur = result[curId.value as string]
       map.value.focus(...cur.center, cur.zoom)
@@ -278,6 +323,7 @@ export default defineComponent({
     )
     let entryPoints: any = []
     async function addBuildingPoints() {
+      map.value.remove(entryPoints)
       const pathList: any[] = []
       const entryList: any[] = []
       for (let i = 0; i < buildingList.value.length; i++) {
@@ -313,23 +359,6 @@ export default defineComponent({
           paths: item.paths,
         })
       })
-      // 大楼名字
-      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'))
@@ -339,58 +368,6 @@ export default defineComponent({
         el.removeEventListener('click', addEvent)
       })
     })
-    const btns = computed(() => {
-      if (curId.value === '527635870583459841') {
-        return [
-          { name: '美丽家园', key: '微更新' },
-          { name: '加装电梯', key: '电梯加装' },
-          { name: '周边设施', key: '小区设施' },
-          { name: '监控设施', key: '摄像头' },
-        ]
-      }
-      return [
-        { name: '美丽家园', key: '微更新' },
-        { name: '周边设施', key: '小区设施' },
-        { name: '监控设施', key: '摄像头' },
-      ]
-    })
-    // 点击下方分类撒点
-    const curBtn = ref<string | null>(null)
-    const handleClick = async (key: string) => {
-      map.value.remove(points.value)
-      drawerInfo.value = null
-      showDrawer.value = false
-      if (curBtn.value === key) {
-        curBtn.value = null
-        return
-      }
-      const pointList = (
-        await ajax.get({
-          url: api.GET_COMMUNITY_FACILITY,
-          params: {
-            bigscreenCommunityId: curId.value,
-            classification: key,
-            pageSize: 1000,
-          },
-        })
-      ).data.content
-      if (key === '小区设施') {
-        const { content } = (
-          await ajax.get({
-            url: api.GET_COMMUNITY_FACILITY,
-            params: {
-              bigscreenCommunityId: curId.value,
-              classification: '为老设施',
-              pageSize: 1000,
-            },
-          })
-        ).data
-        pointList.push(...content)
-      }
-      initMapPoints(key, pointList)
-      map.value.hideCommunity()
-      curBtn.value = key
-    }
     const showMonitor = ref(false)
     const handleAlarm = async () => {
       const res: any = await ajax.post({
@@ -410,6 +387,7 @@ export default defineComponent({
     }
     const onSelectBuilding = (item: any) => {
       map.value.hideFlag()
+      if (!item || !item.x || !item.y) return
       buildingList.value
         .filter((e) => e.id != item.id)
         .forEach((item) => {
@@ -471,6 +449,8 @@ export default defineComponent({
             item.icon = a02
           } else if (item.classification.includes('摄像头')) {
             item.icon = a03
+          } else {
+            return
           }
           data.push(item)
         })
@@ -481,7 +461,44 @@ export default defineComponent({
         })
       }
     )
+
+    function switchMapType(type: string) {
+      rotation.value = 0
+      store.commit('SET_MAP_TYPE', type)
+    }
+    watch(
+      () => curMapType.value,
+      (type) => {
+        const result: any = {
+          '527635870583459840': {
+            zoom: 1,
+            center: [121.4642191813353, 31.229242441205542],
+          },
+          '527635870583459841': {
+            zoom: 1,
+            center: [121.46537699130965, 31.230185340301105],
+          },
+        }
+        if (type === '2D') {
+          map.value.hideFlag()
+        } else {
+          addAllFlags()
+        }
+        const cur = result[curId.value as string]
+        map.value.focus(...cur.center, cur.zoom, {
+          duration: 2.0,
+          offset: {
+            heading: 0,
+            pitch: type === '2D' ? -90 : -35,
+            range: 0,
+          },
+        })
+      }
+    )
     return {
+      d2,
+      d3,
+      curMapType,
       prefix,
       rotation,
       rotateAngle,
@@ -493,9 +510,9 @@ export default defineComponent({
       showDrawer,
       drawerInfo,
       handleMapClick,
-      btns,
-      curBtn,
-      handleClick,
+      // btns,
+      // curBtn,
+      // handleClick,
       showMonitor,
       video,
       handleAlarm,
@@ -504,6 +521,7 @@ export default defineComponent({
       zoomMap,
       onSelectBuilding,
       buildingInfo,
+      switchMapType,
     }
   },
 })

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

@@ -104,11 +104,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { computed, onMounted, 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'
+import store from '@/store'
 const sum = ref([
   {
     name: '今日预警数量',
@@ -123,51 +124,13 @@ const sum = ref([
     value: 0,
   },
 ])
-ajax
-  .get({
-    url: api.GET_DISCOVER_COUNT,
-  })
-  .then((res) => {
-    const { year = 0, today = 0 } = res?.data?.content || {}
-    sum.value = [
-      {
-        name: '今日预警数量',
-        value: today,
-      },
-      {
-        name: '历史预警数量',
-        value: year,
-      },
-      {
-        name: '预警类型',
-        value: 0,
-      },
-    ]
-  })
+const curView = computed(() => store.state.curView)
 const sub = ref([
   { name: '视频识别', value: 0 },
   { name: '物联感知', value: 0 },
   { name: '数据关联分析', value: 0 },
   { name: '人为发现', value: 0 },
 ])
-ajax
-  .get({
-    url: api.GET_DISCOVER_SUM,
-  })
-  .then((res) => {
-    const {
-      person = 0, //人为发现
-      iot = 0, //物联感知
-      video = 0, //视频识别
-      analyze = 0, //数据分析
-    } = res?.data?.content || {}
-    sub.value = [
-      { name: '视频识别', value: video },
-      { name: '物联感知', value: iot },
-      { name: '数据关联分析', value: analyze },
-      { name: '人为发现', value: person },
-    ]
-  })
 const list = ref([
   { name: '电瓶车入梯', value: 0 },
   { name: '垃圾暴露', value: 0 },
@@ -177,26 +140,76 @@ const list = ref([
   // { name: '易积水预警', value: 0 },
   { name: '群租', value: 0 },
 ])
-ajax
-  .get({
-    url: api.GET_DISCOVER_STATISTICS,
-  })
-  .then((res) => {
-    const {
-      fire = 0, //消防通道
-      batteryCar = 0, //电瓶车入梯
-      overflowingGarbage = 0, //垃圾满溢
-      groupRent = 0, //群租
-    } = res?.data?.content || {}
-    list.value = [
-      { name: '电瓶车入梯', value: batteryCar },
-      { name: '垃圾暴露', value: 0 },
-      { name: '占用消防通道', value: fire },
-      { name: '垃圾满溢', value: overflowingGarbage },
-      { name: '高抛隐患', value: 0 },
-      { name: '群租', value: groupRent },
-    ]
-  })
+onMounted(() => {
+  ajax
+    .get({
+      url: api.GET_DISCOVER_COUNT,
+      params: {
+        bigscreenCommunityName: curView.value.name,
+      },
+    })
+    .then((res) => {
+      const { year = 0, today = 0 } = res?.data?.content || {}
+      sum.value = [
+        {
+          name: '今日预警数量',
+          value: today,
+        },
+        {
+          name: '历史预警数量',
+          value: year,
+        },
+        {
+          name: '预警类型',
+          value: 0,
+        },
+      ]
+    })
+  ajax
+    .get({
+      url: api.GET_DISCOVER_SUM,
+      params: {
+        bigscreenCommunityName: curView.value.name,
+      },
+    })
+    .then((res) => {
+      const {
+        person = 0, //人为发现
+        iot = 0, //物联感知
+        video = 0, //视频识别
+        analyze = 0, //数据分析
+      } = res?.data?.content || {}
+      sub.value = [
+        { name: '视频识别', value: video },
+        { name: '物联感知', value: iot },
+        { name: '数据关联分析', value: analyze },
+        { name: '人为发现', value: person },
+      ]
+    })
+  ajax
+    .get({
+      url: api.GET_DISCOVER_STATISTICS,
+      params: {
+        bigscreenCommunityName: curView.value.name,
+      },
+    })
+    .then((res) => {
+      const {
+        fire = 0, //消防通道
+        batteryCar = 0, //电瓶车入梯
+        overflowingGarbage = 0, //垃圾满溢
+        groupRent = 0, //群租
+      } = res?.data?.content || {}
+      list.value = [
+        { name: '电瓶车入梯', value: batteryCar },
+        { name: '垃圾暴露', value: 0 },
+        { name: '占用消防通道', value: fire },
+        { name: '垃圾满溢', value: overflowingGarbage },
+        { name: '高抛隐患', value: 0 },
+        { name: '群租', value: groupRent },
+      ]
+    })
+})
 const events = ref<any>([
   {
     name: '占用消防通道',
@@ -210,7 +223,7 @@ const events = ref<any>([
 ajax
   .get({
     url: api.GET_DISCOVER_LIST,
-    params: { pageSize: 1000 },
+    params: { pageSize: 1000, bigscreenCommunityName: curView.value.name },
   })
   .then((res) => {
     events.value = res?.data?.content || []

src/view/right/population.vue

 <template>
   <m-card title="实有人口">
     <!-- <m-sub2 :addition="{ value: truePeople.personnelNum }"> 人口数量 </m-sub2> -->
-    <m-sub2 :addition="{ value: 44450 }"> 人口数量 </m-sub2>
-    <Brief :list="summary" color="#fff" />
+    <m-sub2 :addition="{ value: 44450, unit: '人' }"> 人口数量 </m-sub2>
+    <m-sub2 :addition="{ value: 88861, unit: '人' }"> 本市户籍 </m-sub2>
+    <!-- <Brief :list="summary" color="#fff" /> -->
     <div class="content">
       <div v-for="item in population" :key="item.name">
         <m-count class="count" :value="item.value" />