Merge branch 'master' of http://git.omniview.pro/yaominguo/east-nanjing-new

paths.json

+[
+  {
+    "name": "第一工作站",
+    "path": [
+      [-448.329953822261, -293.460812442785],
+      [-431.7521211874291, -671.2658974800385],
+      [-424.4347237401342, -721.1895650357069],
+      [-398.89824688593046, -803.6322429418965],
+      [-365.2547551197802, -867.1158334507442],
+      [-392.5813071687177, -874.8011678318296],
+      [-403.0902474574316, -1077.6749785273678],
+      [-353.7288206095779, -1071.1265279304666],
+      [-235.53838240578477, -1022.8565095154296],
+      [-110.56798272540209, -1153.1351229372399],
+      [-93.69249324525651, -1138.2894877772196],
+      [-68.09400454827903, -1119.6983373136686],
+      [108.32141989715319, -1078.5720831861604],
+      [162.94558513506695, -1051.8780519335146],
+      [319.4097326987787, -1005.952081175323],
+      [764.5059353911838, -763.8371763725968],
+      [632.5075268631167, -531.321704831237],
+      [456.02595645205906, -245.14531867638112],
+      [265.6661356282508, 118.08284918620457],
+      [171.38332987513922, 95.29556402830092],
+      [107.25481620144524, 61.96213147601915],
+      [43.56451955001853, 9.376088803933783],
+      [6.621997748308331, -34.25957789448293],
+      [-61.673711759777404, 39.489039654835494],
+      [-84.91161630850314, 43.66450373493032],
+      [-117.17844516507756, 35.95023049388385],
+      [-268.3674519701745, -19.099749397742613],
+      [-336.6383567411507, -44.7065063404232],
+      [-412.38375562778185, -44.284825809562136],
+      [-452.45167430528585, -55.794223828358156],
+      [-462.21647248071554, -56.90216875258136],
+      [-480.70426987297697, -84.93978993199039],
+      [-448.329953822261, -293.460812442785]
+    ]
+  },
+  {
+    "name": "第二工作站",
+    "path": [
+      [62.564369398678764, 740.5887328698475],
+      [137.63177213765096, 581.9293660719472],
+      [265.9218724678516, 118.00636791345084],
+      [633.5446129216658, -540.7909132227782],
+      [1009.9399620665309, -314.1334937621058],
+      [1093.7138275309285, -280.9447555096293],
+      [964.1008078882224, 10.568783246614885],
+      [884.0476529902461, -20.486747614446926],
+      [826.2691520165776, 82.29581472151119],
+      [899.6994421063242, 120.57779232713301],
+      [826.2278107880617, 251.71216917922004],
+      [705.7015931731263, 615.2007867814553],
+      [689.5206363320461, 675.2447870777893],
+      [684.3364462761659, 756.2487902316288],
+      [534.3504692208784, 845.4714296144077],
+      [483.33539323239313, 867.770888275825],
+      [418.098934634476, 876.5269604754694],
+      [339.3025530833796, 879.3795052430589],
+      [278.7872627819655, 867.1094286195723],
+      [216.4694949172632, 843.7681709995571],
+      [158.20316744710817, 810.0089237935626],
+      [69.50142754362844, 745.9134831026813],
+      [62.564369398678764, 740.5887328698475],
+    ]
+  },
+  {
+    "name": "第三工作站",
+    "path": [
+      [-827.6197677404292, 863.6615701613555],
+      [-708.507420140734, 529.087007783064],
+      [-544.6473267955473, 184.59055056098282],
+      [-523.8857618349174, 124.25716166503844],
+      [-451.3484422811116, -294.9842367135918],
+      [-152.79862643148, -277.8524316166481],
+      [-122.5120424208119, -268.7160201146585],
+      [-84.99074341988057, -211.12768879216264],
+      [-63.923253368233645, -138.51595502702844],
+      [-34.306397259521646, -87.17841745611986],
+      [38.478969665379054, 8.683623226294912],
+      [107.08887251018473, 60.05423378001592],
+      [158.0543390244511, 92.77168202741245],
+      [264.45839297839234, 119.5525298599415],
+      [171.40755583505143, 467.1165062378942],
+      [134.7709591243579, 587.717138064158],
+      [81.23406819640945, 702.8193864978215],
+      [60.116968670543656, 737.5046772225696],
+      [-52.52134254357884, 666.753298740646],
+      [-117.37746183915078, 641.493808117498],
+      [-151.4095611533494, 632.9609785518389],
+      [-186.334631003489, 628.7524414889315],
+      [-237.86233822557006, 637.5911961456075],
+      [-301.7758775109821, 657.7822521527194],
+      [-467.37230245383194, 765.9722471785428],
+      [-527.2261330989933, 795.6221762700677],
+      [-676.0132145273228, 855.6165670921827],
+      [-733.4857904099746, 866.563724403164],
+      [-791.5950212117696, 868.8044189887198],
+      [-827.6197677404292, 863.6615701613555],
+    ]
+  }
+]
\ No newline at end of file

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

@@ -3,7 +3,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, PropType } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, PropType } from 'vue'
+import store from '@/store'
 declare const SMap: any
 declare const Plugins: any
 
@@ -27,29 +28,35 @@ export default defineComponent({
   },
   emits: ['complete', 'event'],
   setup(props, ctx) {
+    const curMapType = computed(() => store.state.curMapType)
     let map: any = null
-    onMounted(async () => {
-      await nextTick()
-      initMap()
-    })
-    function initMap() {
+    // onMounted(async () => {
+    //   await nextTick()
+    //   initMap()
+    // })
+    function initMap(config?: any) {
       map = new SMap.Map('MapContainer', {
         viewMode: '3D',
-        center: [1141.75319496382872, -480.0854532701907],
+        center: [1019.614669, 54.167243],
+        // center: [-135.98002789627407, -722.1597065437004],
         zooms: [5, 10],
         zoom: 7,
         pitch: 45,
         mapStyle: 'smap://styles/dark',
         showBuildingBlock: true,
+        ...config,
         ...props.config,
       }).on(SMap.MapEvent.maploaded, () => {
         // map.enableMouseEvent(false)
-        setBuildingBlock()
+        // setBuildingBlock()
         ctx.emit('complete', map)
         addListener()
-        // hideCommunity()
+        hideCommunity()
       })
     }
+    function layer(name: string) {
+      return map.getLayer(name)
+    }
     function setBuildingBlock(val = false) {
       map.getLayer('model_white_zw').visible = val // 整个街道图层名
       map.getLayer('model_white_zhenxing2').visible = val // 振兴小区名
@@ -69,7 +76,7 @@ export default defineComponent({
     function setFilter(arr: unknown[], key = 'sect_id') {
       if (arr.length === 0) return
       const valid = arr.map((val) => {
-        return `${key} like '${val}'`
+        return `${key} = '${val}'`
       })
       map.setFilter('wg_gis_xq_point', valid.join(' or '))
       map.setFilter('wg_gis_mpz', valid.join(' or '))
@@ -78,9 +85,8 @@ export default defineComponent({
     function addListener() {
       // 触发地图点击事件
       map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
-        const { x, y } = eventParamter.mapPoint
-        console.log(map.getZoom())
-        console.log([x, y])
+        // const { x, y } = eventParamter.mapPoint
+        console.log(map.getZoom(), map.getCenter())
         view.hitTest(eventParamter).then((res: any) => {
           if (res.results && res.results.length > 0) {
             ctx.emit(
@@ -102,7 +108,9 @@ export default defineComponent({
         console.error('传入的坐标点不能为空')
         return
       }
-      map.setZoomAndCenter(zoom, [+x, +y, 0])
+      curMapType.value === '3D'
+        ? map.setZoomAndCenter(zoom, [+x, +y, 0])
+        : map.setZoomAndCenter(zoom, [+x, +y])
     }
 
     // 添加边界
@@ -129,6 +137,25 @@ export default defineComponent({
     function rotate(deg: number) {
       map.setRotation(deg)
     }
+    function cameraTo({
+      center = [0, 0],
+      heading = 180,
+      tilt = 45,
+    }: {
+      center: number[]
+      heading: number
+      tilt: number
+    }) {
+      // map.setPitch(60)
+      // map.setCenter(0, 0, 0)
+      // map.setRotation(180)
+
+      map.view.goTo({
+        // center,
+        heading,
+        tilt,
+      })
+    }
     // 将数据转换为符合地图的点数组
     function getMapPoints({
       data = [],
@@ -158,14 +185,11 @@ export default defineComponent({
             item.communityMiny || item.Y || item.y || item.gpsy,
             item.communityMinz || item.Z || item.z || item.gpsz || 0,
           ],
-          label: null,
-        }
-        if (labelKey) {
-          result.label = new SMap.Label({
-            text: (item[labelKey] || item[key]) + '',
+          label: new SMap.Label({
+            text: labelKey ? (item[labelKey] || item[key]) + '' : '',
             size,
             color,
-          })
+          }),
         }
         return new SMap.Marker(result)
       })
@@ -181,6 +205,7 @@ export default defineComponent({
     }: PointProp) {
       if (!map) return
       const points = getMapPoints({ data, key, labelKey, icon, size, color })
+      console.log(points)
       map.add(points)
       return points
     }
@@ -191,14 +216,43 @@ export default defineComponent({
       map.remove(points)
     }
 
+    // 添加线状覆盖物
+    function addPolyLine({
+      paths,
+      attributes = {},
+      strokeColor = 'rgba(51,145,255,.6)',
+      width = 2,
+    }: {
+      paths: any[]
+      attributes: any
+      strokeColor: string
+      width: number
+    }) {
+      const polyline = new SMap.Polyline({
+        path: paths.map((item: any) => new SMap.LngLat(item[0], item[1])),
+        attributes,
+        cap: 'square',
+        strokeColor,
+        style: 'solid',
+        lineJoin: 'round',
+        width,
+      })
+      map.add(polyline)
+      return polyline
+    }
+
     return {
+      initMap,
       focus,
+      layer,
       setBuildingBlock,
       hideCommunity,
       showCommunity,
       addBoundary,
       rotate,
+      cameraTo,
       addPoint,
+      addPolyLine,
       remove,
       setFilter,
     }

src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import MyComponent from '@/components/MyComponent'
 import router from '@/router'
-import { Progress, Select, Input } from 'ant-design-vue'
+import { Progress, Select, Input, Tooltip, Checkbox } from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 import './assets/style/reset.styl'
 
@@ -12,4 +12,6 @@ createApp(App)
   .use(Progress)
   .use(Select)
   .use(Input)
+  .use(Tooltip)
+  .use(Checkbox)
   .mount('#app')

src/store/index.ts

@@ -63,13 +63,19 @@ export interface DutyDataProp {
 export interface GlobalStateProps {
   showLoading: boolean
   curView: ViewType
+  curMapType: string
+  readonly zhenxing: any
+  readonly weihai: any
+  readonly workArea1: any
+  readonly workArea2: any
+  readonly workArea3: any
   readonly viewOptions: ViewType[]
   readonly communityOptions: ViewType[]
   curTheme: ThemeType
   propertySummary: { [key: string]: number }
   caseList: unknown[]
-  pubulicSafeGateSenteryShehuiwuye: { [key: string]: number }
-  pubulicSafeGateSenteryZhiguangongfang: { [key: string]: number }
+  pubulicSafeGateSenteryShehuiwuye: { [key: string]: number }[]
+  pubulicSafeGateSenteryZhiguangongfang: { [key: string]: number }[]
   pubulicSafeMap: unknown[]
   pubulicSafeTruePeople: { [key: string]: number }
   pubulicSafeHouse: { [key: string]: any }
@@ -111,6 +117,7 @@ export interface GlobalStateProps {
   analysisRank: Partial<DutyDataProp>
   moreHappenAddr: Partial<DutyDataProp>
 }
+
 export default createStore<GlobalStateProps>({
   state,
   mutations,

src/store/mutations.ts

@@ -14,6 +14,9 @@ export default {
   SET_LOADING(state: GlobalStateProps, val: boolean): void {
     state.showLoading = val
   },
+  SET_MAP_TYPE(state: GlobalStateProps, val: string): void {
+    state.curMapType = val
+  },
   SET_CURRENT_VIEW(state: GlobalStateProps, val: ViewType): void {
     state.curView = val
   },

src/store/state.ts

@@ -2,6 +2,7 @@ import { GlobalStateProps } from './index'
 
 export default {
   showLoading: false,
+  curMapType: '2D',
   curView: { name: '南京东路街道', type: 'street' },
   viewOptions: [
     { name: '南京东路街道', type: 'street' },
@@ -14,11 +15,135 @@ export default {
     { name: '威海路62弄', type: '527635870583459841' },
   ],
   curTheme: 'manage',
+  zhenxing: { paths: [] },
+  weihai: { paths: [] },
+  workArea1: {
+    workStation: {
+      name: '第一',
+      address: '武胜路481号',
+      x: -136.67,
+      y: -660.07,
+    },
+    id: '01001',
+    center: [893.507386, -466.674359],
+    paths: [
+      [-448.329953822261, -293.460812442785],
+      [-431.7521211874291, -671.2658974800385],
+      [-424.4347237401342, -721.1895650357069],
+      [-398.89824688593046, -803.6322429418965],
+      [-365.2547551197802, -867.1158334507442],
+      [-392.5813071687177, -874.8011678318296],
+      [-403.0902474574316, -1077.6749785273678],
+      [-353.7288206095779, -1071.1265279304666],
+      [-235.53838240578477, -1022.8565095154296],
+      [-110.56798272540209, -1153.1351229372399],
+      [-93.69249324525651, -1138.2894877772196],
+      [-68.09400454827903, -1119.6983373136686],
+      [108.32141989715319, -1078.5720831861604],
+      [162.94558513506695, -1051.8780519335146],
+      [319.4097326987787, -1005.952081175323],
+      [764.5059353911838, -763.8371763725968],
+      [632.5075268631167, -531.321704831237],
+      [456.02595645205906, -245.14531867638112],
+      [265.6661356282508, 118.08284918620457],
+      [171.38332987513922, 95.29556402830092],
+      [107.25481620144524, 61.96213147601915],
+      [43.56451955001853, 9.376088803933783],
+      [6.621997748308331, -34.25957789448293],
+      [-61.673711759777404, 39.489039654835494],
+      [-84.91161630850314, 43.66450373493032],
+      [-117.17844516507756, 35.95023049388385],
+      [-268.3674519701745, -19.099749397742613],
+      [-336.6383567411507, -44.7065063404232],
+      [-412.38375562778185, -44.284825809562136],
+      [-452.45167430528585, -55.794223828358156],
+      [-462.21647248071554, -56.90216875258136],
+      [-480.70426987297697, -84.93978993199039],
+      [-448.329953822261, -293.460812442785],
+    ],
+  },
+  workArea2: {
+    workStation: {
+      name: '第二',
+      address: '',
+      x: 382.4793321452691,
+      y: 678.9654976442117,
+    },
+    id: '01002',
+    center: [1291.532466, 175.263969],
+    paths: [
+      [62.564369398678764, 740.5887328698475],
+      [137.63177213765096, 581.9293660719472],
+      [265.9218724678516, 118.00636791345084],
+      [633.5446129216658, -540.7909132227782],
+      [1009.9399620665309, -314.1334937621058],
+      [1093.7138275309285, -280.9447555096293],
+      [964.1008078882224, 10.568783246614885],
+      [884.0476529902461, -20.486747614446926],
+      [826.2691520165776, 82.29581472151119],
+      [899.6994421063242, 120.57779232713301],
+      [826.2278107880617, 251.71216917922004],
+      [705.7015931731263, 615.2007867814553],
+      [689.5206363320461, 675.2447870777893],
+      [684.3364462761659, 756.2487902316288],
+      [534.3504692208784, 845.4714296144077],
+      [483.33539323239313, 867.770888275825],
+      [418.098934634476, 876.5269604754694],
+      [339.3025530833796, 879.3795052430589],
+      [278.7872627819655, 867.1094286195723],
+      [216.4694949172632, 843.7681709995571],
+      [158.20316744710817, 810.0089237935626],
+      [69.50142754362844, 745.9134831026813],
+      [62.564369398678764, 740.5887328698475],
+    ],
+  },
+  workArea3: {
+    workStation: {
+      name: '第三',
+      address: '',
+      x: -57.84609277641425,
+      y: 261.561716873108,
+    },
+    center: [609.931363, 342.166777],
+    id: '01003',
+    paths: [
+      [-827.6197677404292, 863.6615701613555],
+      [-708.507420140734, 529.087007783064],
+      [-544.6473267955473, 184.59055056098282],
+      [-523.8857618349174, 124.25716166503844],
+      [-451.3484422811116, -294.9842367135918],
+      [-152.79862643148, -277.8524316166481],
+      [-122.5120424208119, -268.7160201146585],
+      [-84.99074341988057, -211.12768879216264],
+      [-63.923253368233645, -138.51595502702844],
+      [-34.306397259521646, -87.17841745611986],
+      [38.478969665379054, 8.683623226294912],
+      [107.08887251018473, 60.05423378001592],
+      [158.0543390244511, 92.77168202741245],
+      [264.45839297839234, 119.5525298599415],
+      [171.40755583505143, 467.1165062378942],
+      [134.7709591243579, 587.717138064158],
+      [81.23406819640945, 702.8193864978215],
+      [60.116968670543656, 737.5046772225696],
+      [-52.52134254357884, 666.753298740646],
+      [-117.37746183915078, 641.493808117498],
+      [-151.4095611533494, 632.9609785518389],
+      [-186.334631003489, 628.7524414889315],
+      [-237.86233822557006, 637.5911961456075],
+      [-301.7758775109821, 657.7822521527194],
+      [-467.37230245383194, 765.9722471785428],
+      [-527.2261330989933, 795.6221762700677],
+      [-676.0132145273228, 855.6165670921827],
+      [-733.4857904099746, 866.563724403164],
+      [-791.5950212117696, 868.8044189887198],
+      [-827.6197677404292, 863.6615701613555],
+    ],
+  },
   propertySummary: {},
   caseList: [],
   stationInfo: {},
-  pubulicSafeGateSenteryShehuiwuye: {},
-  pubulicSafeGateSenteryZhiguangongfang: {},
+  pubulicSafeGateSenteryShehuiwuye: [],
+  pubulicSafeGateSenteryZhiguangongfang: [],
   pubulicSafeMap: [],
   pubulicSafeTruePeople: {},
   pubulicSafeHouse: {},

src/view/community.vue

 <template>
-  <m-loader v-if="loading" background="#000">
+  <!-- <m-loader v-if="loading" background="#000">
     <p style="color: #fff; margin-top: 0.3rem">地图初始化…</p>
-  </m-loader>
+  </m-loader> -->
   <m-grid
     :template="['title title title', 'left . right']"
     columns="16vw auto 49vw"
     rows="0.4rem auto"
     gap="0.05rem"
   >
-    <m-title area="title"> 南东城运{{ title }} </m-title>
+    <m-title area="title" @click="test"> 南东城运{{ title }} </m-title>
     <m-map
       ref="map"
-      :config="{ center: [-75.5563452697323, -718.3061904627932], zoom: 8 }"
+      :config="{
+        center: [-75.5563452697323, -718.3061904627932],
+        zoom: 8,
+      }"
       @complete="handleComplete"
       @event="handleMapClick"
     />
@@ -32,7 +35,7 @@
       </div>
     </div>
     <SiteSelector />
-    <m-drawer v-model="showDrawer">
+    <m-drawer v-model="showDrawer" width="32vw">
       <div class="community-device">
         <p>类型：{{ drawerInfo.key }}</p>
         <p>地点：{{ drawerInfo.relationName }}</p>
@@ -50,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref } from 'vue'
+import { computed, defineComponent, onMounted, ref, nextTick } from 'vue'
 import LeftSection from '@/view/community/left-section.vue'
 import RightSection from '@/view/community/right-section.vue'
 import SiteSelector from '@/view/community/site-selector.vue'
@@ -70,6 +73,11 @@ export default defineComponent({
   name: 'Main',
   components: { LeftSection, RightSection, SiteSelector },
   setup() {
+    const test = () => {
+      console.log('go')
+      map.value.cameraTo({})
+      map.value.cameraTo({})
+    }
     const loading = ref(true)
     const title = computed(
       () => store.state.communityInfo.bigscreenCommunityName
@@ -80,15 +88,17 @@ export default defineComponent({
     const initData = (id: unknown) => {
       store.dispatch('initCommunityData', id)
     }
-    onMounted(() => {
+    const map = ref<any>(null)
+    onMounted(async () => {
       curId.value = route.query.id || 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()
     })
-    const map = ref<any>(null)
     const points = ref<any>(null)
     const initMapPoints = (key: string, data: any[]) => {
       const getIcon = (type: string) => {
@@ -96,7 +106,7 @@ export default defineComponent({
         if (type.indexOf('充电') >= 0) return point5
         if (type.indexOf('电梯加装') >= 0) return point3
         if (type.indexOf('垃圾箱') >= 0) return point6
-        if (type.indexOf('助老') >= 0) return point7 // TODO 看是否是“助老”
+        if (type.indexOf('助') >= 0) return point7
         return point4 // 默认为美丽家园-微更新
       }
       const pointData = data.map((item: any) => {
@@ -122,36 +132,46 @@ export default defineComponent({
       drawerInfo.value = e
       showDrawer.value = true
     }
-    const handleComplete = (instance: any) => {
+    const handleComplete = () => {
       let center = [-135.98002789627407, -722.1597065437004]
       // let center = [-75.5563452697323, -718.3061904627932]
       let zoom = 9.7608
+      map.value.layer('model_white_zw').visible = false
       if (curId.value === '527635870583459841') {
-        instance.getLayer('model_white_WEIHAI33').visible = true
-        instance.getLayer('model_white_WEIHAI33').opacity = 1
+        map.value.layer('model_white_WEIHAI33').visible = true
         center = [-38.73075358777865, -569.7527629458657]
         zoom = 10
       } else {
-        instance.getLayer('model_white_zhenxing2').visible = true
-        instance.getLayer('model_white_zhenxing2').opacity = 0.8
+        map.value.layer('model_white_zhenxing2').visible = true
       }
-      let i = -90
-      map.value.rotate(i)
-      setTimeout(() => {
       loading.value = false
-        setTimeout(() => {
-          const timer = setInterval(() => {
-            i += 2
-            if (i > 0) {
-              setTimeout(() => {
       map.value.focus(...center, zoom)
-              }, 500)
-              clearInterval(timer)
-            }
-            map.value.rotate(i)
-          }, 2)
-        }, 1000)
-      }, 7000)
+      // let i = -90
+      // map.value.rotate(i)
+      // setTimeout(() => {
+      //   setTimeout(() => {
+      //     map.value.cameraTo({})
+      //     setTimeout(() => {
+      //       map.value.rotate(180)
+      //       map.value.focus(...center, zoom)
+      //     })
+      //   }, 1000)
+      // }, 5000)
+      // setTimeout(() => {
+      //   loading.value = false
+      //   setTimeout(() => {
+      //     const timer = setInterval(() => {
+      //       i += 15
+      //       if (i > 0) {
+      //         setTimeout(() => {
+      //           map.value.focus(...center, zoom)
+      //         }, 500)
+      //         clearInterval(timer)
+      //       }
+      //       map.value.rotate(i)
+      //     }, 0)
+      //   }, 1000)
+      // }, 7000)
     }
     const btns = ref([
       { name: '美丽家园', key: '微更新' },
@@ -166,6 +186,8 @@ export default defineComponent({
         { name: '监控设施', key: '监控' },
       ]
     }
+
+    // 点击下方分类撒点
     const curBtn = ref<string | null>(null)
     const handleClick = async (key: string) => {
       map.value.remove(points.value)
@@ -174,7 +196,7 @@ export default defineComponent({
         map.value.showCommunity()
         return
       }
-      const { content } = (
+      const pointList = (
         await ajax.get({
           url: api.GET_COMMUNITY_FACILITY,
           params: {
@@ -183,14 +205,26 @@ export default defineComponent({
             pageSize: 1000,
           },
         })
+      ).data.content
+      if (key === '小区设施') {
+        const { content } = (
+          await ajax.get({
+            url: api.GET_COMMUNITY_FACILITY,
+            params: {
+              bigscreenCommunityId: curId.value,
+              classification: '为老设施',
+              pageSize: 1000,
+            },
+          })
         ).data
-      initMapPoints(key, content)
+        pointList.push(...content)
+      }
+      initMapPoints(key, pointList)
       map.value.hideCommunity()
-      // map.value.setFilter(['1408241008852645'])
-      // map.value.showCommunity()
       curBtn.value = key
     }
     return {
+      test,
       loading,
       title,
       map,
@@ -210,8 +244,9 @@ export default defineComponent({
 @import '../components/MyComponent/main.styl'
 .community-device
   $full()
+  overflow hidden
   img
-    width 50%
+    width 3rem
 .btns
   position fixed
   z-index 9999

src/view/community/community-photo.vue

@@ -24,6 +24,7 @@ import photo2 from '@/assets/images/community2.png'
 import photo3 from '@/assets/images/community3.png'
 import { ajax } from '@/ajax'
 import VideoComponent from '../components/video-component.vue'
+import video from '@/assets/images/video.mp4'
 
 export default defineComponent({
   name: 'CommunityPhoto',
@@ -32,13 +33,15 @@ export default defineComponent({
     const showModal = ref(false)
     const src = ref<string | null>(null)
     const handleClick = async (id: string) => {
-      if (!id) return
-      const [{ remark2 }] = (
-        await ajax.get({
-          url: `http://10.39.25.33:81/njdl/imp/pc/njdl/equipment/getEquipmentVideoById?id=${id}`,
-        })
-      ).data
-      src.value = remark2
+      // if (!id) return
+      // const [{ remark2 }] = (
+      //   await ajax.get({
+      //     url: `http://10.39.25.33:81/njdl/imp/pc/njdl/equipment/getEquipmentVideoById?id=${id}`,
+      //   })
+      // ).data
+      // src.value = remark2
+      src.value =
+        'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5KNmAWXGgAfLx1DPNngc885.mp4'
       showModal.value = true
     }
     return {

src/view/community/left-section.vue

@@ -193,7 +193,7 @@ export default defineComponent({
           (buildingList.value.find(
             (b: any) => b.sectId === curBuilding.value
           ) as any)
-        ).icMember || []
+        ).icMember.sort((a: any, b: any) => +a.dirDuty - +b.dirDuty) || []
     }
     return {
       healthVal,

src/view/components/map-btns.vue

 <template>
   <div class="map-btns" :class="{ full: fullScreen }">
+    <!-- <a-checkbox-group :option="options" @change="handleChange" /> -->
+    <template v-for="btn in btns">
+      <a-tooltip v-if="btn.key === 'home'" :key="btn.key" placement="right">
+        <img :key="btn.key" :src="btn.icon" draggable="false" />
+        <template v-if="options.length > 0" #title>
+          <div class="btns-tip">
+            <a-checkbox-group :options="options" @change="handleChange" />
+          </div>
+        </template>
+      </a-tooltip>
       <img
-      v-for="btn in btns"
+        v-else
         :key="btn.key"
         :src="btn.icon"
         draggable="false"
         @click="handleClick(btn.key)"
       />
+    </template>
   </div>
   <m-modal v-model="searchModal" title="搜索">
     <div id="modal-search-bar">
@@ -52,24 +63,39 @@ import btn3 from '@/assets/images/map-btn3.png'
 import btn4 from '@/assets/images/map-btn4.png'
 import btn5 from '@/assets/images/map-btn5.png'
 import btn6 from '@/assets/images/map-btn6.png'
+import d2 from '@/assets/images/2d.png'
+import d3 from '@/assets/images/3d.png'
 import store from '@/store'
 
 export default defineComponent({
   name: 'MapBtns',
-  emits: ['full'],
+  emits: ['full', 'change'],
   setup(_, ctx) {
-    const btns = ref([
+    const btns = computed(() => {
+      const mapType =
+        store.state.curMapType === '2D'
+          ? { key: '3D', icon: d3 }
+          : { key: '2D', icon: d2 }
+      const list = [
         { key: 'search', icon: btn1 },
         { key: 'full', icon: btn2 },
-      { key: '', icon: btn3 },
+        { key: 'home', icon: btn3 },
         { key: '', icon: btn4 },
         { key: '', icon: btn5 },
         { key: '', icon: btn6 },
-    ])
+      ]
+      return [mapType, ...list]
+    })
     const fullScreen = ref(false)
     const searchModal = ref(false)
     const handleClick = (key: string) => {
       switch (key) {
+        case '3D':
+          store.commit('SET_MAP_TYPE', key)
+          break
+        case '2D':
+          store.commit('SET_MAP_TYPE', key)
+          break
         case 'full':
           fullScreen.value = !fullScreen.value
           ctx.emit('full', fullScreen.value)
@@ -84,6 +110,23 @@ export default defineComponent({
     const searchType = ref('case')
     const searchKey = ref('')
     const caseList = computed(() => store.state.caseList)
+    const options = computed(() => {
+      const result: { [key: string]: any } = {
+        street: [
+          { label: '第一工作站', value: 'workArea1' },
+          { label: '第二工作站', value: 'workArea2' },
+          { label: '第三工作站', value: 'workArea3' },
+        ],
+        work1: [
+          { label: '振兴小区', value: 'zhenxing' },
+          { label: '威海路62弄', value: 'weihai' },
+        ],
+      }
+      return result[store.state.curView.type] || []
+    })
+    const handleChange = (e: any) => {
+      ctx.emit('change', e)
+    }
     return {
       btns,
       fullScreen,
@@ -92,6 +135,8 @@ export default defineComponent({
       searchType,
       searchKey,
       caseList,
+      options,
+      handleChange,
     }
   },
 })
@@ -102,7 +147,11 @@ export default defineComponent({
 
 $border = .01rem solid rgba(91,213,255,.3)
 $bg = rgba(6,34,67,.4)
-
+.btns-tip *
+  color #fff !important
+  font-size .1rem
+  .ant-checkbox-group-item
+    display block
 #modal-search-bar
   width 100%
   position relative

src/view/components/video-component.vue

@@ -35,7 +35,10 @@ export default defineComponent({
   setup(props) {
     const videoRef = ref<any | null>(null)
     const isVideo = computed(
-      () => props.videoSrc && props.videoSrc.indexOf('m3u8') >= 0
+      () =>
+        props.videoSrc &&
+        (props.videoSrc.indexOf('m3u8') >= 0 ||
+          props.videoSrc.indexOf('mp4') >= 0)
     )
     const init = () => {
       if (!videoRef.value) return

src/view/hooks/useSwitchMap.ts

+import { ref, watch, computed } from 'vue'
+import { ajax, api } from '@/ajax'
+import store from '@/store'
+
+export default function useSwitchMap(map: 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(
+    () => curViewType.value,
+    (type) => {
+      setPoints(type)
+      if (curMapType.value === '2D') return
+      store.commit('SET_MAP_TYPE', '2D')
+    }
+  )
+
+  // 根据条件显示小区点
+  function setPoints(type: string) {
+    switch (type) {
+      case 'work1':
+        showPoints({ gridId: store.state.workArea1.id })
+        map.value.focus(...store.state.workArea1.center, 7)
+        break
+      case 'work2':
+        showPoints({ gridId: store.state.workArea2.id })
+        map.value.focus(...store.state.workArea2.center, 7)
+        break
+      case 'work3':
+        showPoints({ gridId: store.state.workArea3.id })
+        map.value.focus(...store.state.workArea3.center, 7)
+        break
+      case 'street':
+        showPoints()
+        map.value.focus(1019.614669, 54.167243, 6.5)
+        break
+      default:
+        break
+    }
+  }
+  async function showPoints(params = {}) {
+    const { content } = (
+      await ajax.get({ url: api.GET_COMMUNITY_IDS, params })
+    ).data
+    map.value.setFilter(content)
+    map.value.showCommunity()
+  }
+
+  const handleMapComplete = async () => {
+    map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
+    setPoints(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
+      }
+    }
+  }
+
+  // 工作站勾边
+  const areaLines = ref([])
+  const selectArea = (e: any) => {
+    map.value.remove(areaLines.value)
+    areaLines.value = e.map(
+      (
+        name:
+          | 'workArea1'
+          | 'workArea2'
+          | 'workArea3'
+          | 'zhenxing'
+          | 'weihai'
+          | null
+      ) => {
+        if (!name) return
+        return map.value.addPolyLine({
+          paths: store.state[name].paths,
+          strokeColor: '#FF6161',
+        })
+      }
+    )
+  }
+  return {
+    handleMapComplete,
+    selectArea,
+  }
+}

src/view/main.vue

@@ -5,7 +5,7 @@
     rows="0.4rem auto"
     gap="0.05rem"
   >
-    <m-title area="title" @click="showDrawer = false">南东城运</m-title>
+    <m-title area="title">南东城运</m-title>
     <m-map ref="map" @complete="handleMapComplete" />
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
       <Command v-show="'street' === curViewType && !fullScreen" area="left" />
@@ -38,7 +38,7 @@
       />
     </m-animate>
     <ViewSelector />
-    <MapBtns @full="fullScreen = $event" />
+    <MapBtns @change="selectArea" @full="fullScreen = $event" />
     <m-drawer v-model="showDrawer">
       <CaseDrawer />
       <!-- <PopulationDrawer /> -->
@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
+import { computed, defineComponent, onMounted, ref, nextTick } from 'vue'
 import ManageBasic from './left/manage-basic.vue'
 import Command from './left/command.vue'
 import PublicWork from './right/public-work.vue'
@@ -59,6 +59,7 @@ import MapBtns from './components/map-btns.vue'
 import CaseDrawer from './drawers/case-drawer.vue'
 import PopulationDrawer from './drawers/population-drawer.vue'
 import store from '@/store'
+import useSwitchMap from './hooks/useSwitchMap'
 
 export default defineComponent({
   name: 'Main',
@@ -75,7 +76,6 @@ export default defineComponent({
     PopulationDrawer,
   },
   setup() {
-    // store.commit('SET_CURRENT_VIEW', { name: '南京东路街道', type: 'street' })
     store.dispatch('initData')
     const curViewType = computed(() => store.state.curView.type)
     const curTheme = computed(() => store.state.curTheme)
@@ -96,41 +96,20 @@ export default defineComponent({
     const fullScreen = ref(false)
     const showDrawer = ref(false)
     const map = ref<any>(null)
-    const mapInstance = ref<any>(null)
-
-    // watch(
-    //   () => curViewType.value,
-    //   (val) => {
-    //     if (!val || !mapInstance.value) return
-    //     if (val === 'work1') {
-    //       mapInstance.value.getLayer('model_white_dyjd').visible = true // 第一街道名
-    //       mapInstance.value.getLayer('model_white_dyjd').opacity = 0.8
-    //       mapInstance.value.getLayer('model_white_zw').visible = false
-    //     } else {
-    //       mapInstance.value.getLayer('model_white_zw').visible = true
-    //       mapInstance.value.getLayer('model_white_zw').opacity = 0.8
-    //     }
-    //   },
-    //   { immediate: true }
-    // )
-
-    const handleMapComplete = (instance: any) => {
-      instance.getLayer('model_white_dyjd').visible = true
-      instance.getLayer('model_white_dyjd').opacity = 0.8
-      // instance.getLayer('model_white_zw').visible = true
-      // instance.getLayer('model_white_zw').opacity = 0.8
-      map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
-      mapInstance.value = instance
-    }
+    onMounted(async () => {
+      await nextTick()
+      map.value.initMap({ viewMode: '2D' })
+    })
+    const { handleMapComplete, selectArea } = useSwitchMap(map)
     return {
       map,
-      mapInstance,
       curViewType,
       curTheme,
       streetComponentList,
       fullScreen,
       showDrawer,
       handleMapComplete,
+      selectArea,
     }
   },
 })

src/view/right/complain.vue

@@ -58,6 +58,7 @@ import Tabs, { TabsProp } from '../components/tabs.vue'
 import SubTitle from '../components/sub-title.vue'
 import { ECOption } from '@/components/MyComponent/MyChart/my-line.vue'
 import moment from 'moment'
+import { ChartTypes } from '@/components/MyComponent'
 import store from '@/store'
 
 export default defineComponent({
@@ -213,7 +214,7 @@ export default defineComponent({
         { name: '15-16', data1: 150, data2: 100 },
       ],
     })
-    const chartOption = ref<ECOption>({
+    const chartOption = ref<ChartTypes.ECOption>({
       color: ['#9B88F9', 'gold'],
       legend: {
         right: '1%',

tsconfig.json

@@ -17,5 +17,5 @@
     }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "public"]
 }