对接口暂存

src/ajax/api.ts

@@ -15,4 +15,10 @@ export default {
   GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees', // 居委会列表
   GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表
   GET_CASE: '/service-special-nandong/compairs', // 案件汇总列表
+
+  /** 小区屏 */
+  GET_COMMUNITY_INFO: '/service-special-nandong/bigscreenCommunity/statistical', // 小区档案
+  GET_COMMUNITY_FACILITY: '/service-special-nandong/communityRelations', // 小区设施
+  GET_ISSUE_LIST: '/service-special-nandong/management/factors', // 管理要素列表
+  GET_COMBINE_LIST: '/service-special-nandong/league/linkage', // 联勤联动列表
 }

src/ajax/axios.ts

@@ -11,7 +11,7 @@ Axios.interceptors.request.use(
   (config) => {
     // 添加token
     config.headers.Authorization =
-      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE3Njg3MTY2LCJqdGkiOiIwMTJmNGRlOC1jZTlkLTQ0NzYtYmQzMC0yMGJlZGQyMjE1Y2QiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTc2Nzk5NjY2Mjd9.eZ1fXintx7bEW1xeglW_10yGje4Bx5qpsCeQPo_0VBm3Di2kb01_0nYX98rtJNloIZVv8mSyZC8dG-xqBbF4i8PtrkvphLvEDLs3ztQu1JckLEswumDx7yVjmOaLo2FegvWskltbYpH32nkG4jU9WgAJSV0MLNe2x9q76rlTP8EyrnOYOEwK2KHW6lszEmZf4YeXHkpaF1XzqwSJCRkplKn6Yv4bmdCGiOxCTX8gGxLaatkv4_uH8g6ji4sUjeS_VIXL1UvuOUrPOLGoVvPv0hxsSe3EPP8MJw7NVYWjT8l_DtXWGHF9kuIGFpU4ILrSEsAN1obqxAQYhoynrk8F3Q'
+      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMCIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4MzEwOTAxLCJqdGkiOiI5ZTJhNTBiYy0wM2VlLTRiYzAtOTE5ZC1iMmFiZTViNGEyMDMiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTgzMDM3MDEzMTd9.VJSxP0r6E0osthNMnIr5t-HWXtbNmLVkWRF4ZS_9HmwD5qkqAp1mge5Imni8dVpvQ686EbSt4QFLIvzgFY7rGAC0EQvq5VsTghUdtb7uyaRc-YnzTDEWCyXpirgk75Uq53MFkJh82kUlAYlNvsBEA9YPoepL51Rj8BeERA32_mj8KA70AzFEKzfHYVCNcLy0CQ6Q5CVa5UTwINGtieRhpdbBOXCL3FheB65wX8JRh1y4pJGMAS-kpwJgt-uqx9eEavWUICPEsRsAiaZ-RTWRfazM1B6fvLals9NvNnDPdjybUm62AcZrzC5QZNuOBsq0uSkIt-n9Ygkc8DoKgGRVwA'
     return config
   },
   (error) => {

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

@@ -3,14 +3,7 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onMounted,
-  PropType,
-  ref,
-} from 'vue'
+import { defineComponent, nextTick, onMounted, PropType } from 'vue'
 declare const SMap: any
 declare const Plugins: any
 

src/store/actions.ts

 import { ajax, api } from '@/ajax'
 import { Dispatch, Commit } from 'vuex'
-
 export default {
   initData({ dispatch }: { dispatch: Dispatch }): void {
     dispatch('getPropertySummary')
@@ -34,4 +33,29 @@ export default {
     const { content } = (await ajax.get({ url: api.GET_STATION })).data
     commit('SET_STATION_LIST', content)
   },
+
+  /** 小区屏 */
+  initCommunityData(
+    { dispatch }: { dispatch: Dispatch },
+    query: { id: string }
+  ): void {
+    dispatch('getCommunityInfo', query)
+    dispatch('getIssueList', query)
+  },
+  async getCommunityInfo({ commit }: { commit: Commit }): Promise<void> {
+    const { content } = (await ajax.get({ url: api.GET_COMMUNITY_INFO })).data
+    commit('SET_COMMUNITY_INFO', content[1])
+  },
+  async getIssueList(
+    { commit }: { commit: Commit },
+    query: { id: string }
+  ): Promise<void> {
+    const { content } = (
+      await ajax.get({
+        url: api.GET_ISSUE_LIST,
+        params: { bigscreenCommunityId: query.id },
+      })
+    ).data
+    commit('SET_ISSUE_DATA', content)
+  },
 }

src/store/index.ts

@@ -8,6 +8,25 @@ export interface ViewType {
   name: string
   type: 'street' | 'work1' | 'work2' | 'work3' | 'community'
 }
+
+export interface CommunityInfoProp {
+  bigscreenCommunityName: string // 小区名称
+  chargingPile: number //充电桩
+  totCommunity: number //小区数
+  totCmp: number //物业企业数
+  totForOld: number //为老设施
+  parkingSpace: number //车棚
+  totHous: number //总户数
+  communityList: { sectName: string; sectId: string }[] // 小区列表
+  icMember: unknown[] // 业委会列表
+}
+export interface IssueProp {
+  date: string //日期
+  securityScore: number //安全
+  cleanScore: number //干净
+  orderlyScore: number //有序
+  totalScore: number //综合评分
+}
 export interface GlobalStateProps {
   showLoading: boolean
   curView: ViewType
@@ -16,6 +35,8 @@ export interface GlobalStateProps {
   propertySummary: { [key: string]: number }
   caseList: unknown[]
   stationList: unknown[]
+  communityInfo: Partial<CommunityInfoProp>
+  issueData: IssueProp[]
 }
 export default createStore<GlobalStateProps>({
   state,

src/store/mutations.ts

-import { GlobalStateProps, ThemeType, ViewType } from './index'
+import {
+  GlobalStateProps,
+  ThemeType,
+  ViewType,
+  CommunityInfoProp,
+  IssueProp,
+} from './index'
 
 export default {
   SET_LOADING(state: GlobalStateProps, val: boolean): void {
@@ -19,7 +25,14 @@ export default {
   SET_CASE_LIST(state: GlobalStateProps, data: unknown[]): void {
     state.caseList = data
   },
-  SET_MUTATION_LIST(state: GlobalStateProps, data: unknown[]): void {
+  SET_STATION_LIST(state: GlobalStateProps, data: unknown[]): void {
     state.stationList = data
   },
+  /** 小区页面 */
+  SET_COMMUNITY_INFO(state: GlobalStateProps, data: CommunityInfoProp): void {
+    state.communityInfo = data
+  },
+  SET_ISSUE_DATA(state: GlobalStateProps, data: IssueProp[]): void {
+    state.issueData = data
+  },
 }

src/store/state.ts

@@ -13,4 +13,6 @@ export default {
   propertySummary: {},
   caseList: [],
   stationList: [],
+  communityInfo: {},
+  issueData: [],
 } as GlobalStateProps

src/view/community.vue

@@ -35,18 +35,31 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import LeftSection from '@/view/community/left-section.vue'
 import RightSection from '@/view/community/right-section.vue'
 import store from '@/store'
 import point from '@/assets/images/point.png'
+import { useRoute } from 'vue-router'
 
 export default defineComponent({
   name: 'Main',
   components: { LeftSection, RightSection },
   setup() {
     const loading = ref(true)
-    store.commit('SET_CURRENT_VIEW', { name: '振兴小区', type: 'community' }) // 使标题不显示公共的3个按钮
+    const initData = (id: string | null) => {
+      store.dispatch('initCommunityData', {
+        id: id || '527635870583459840',
+      })
+    }
+    watch(
+      () => useRoute().query,
+      (cur) => {
+        // initData(cur.id)
+      },
+      { deep: true }
+    )
+    store.commit('SET_CURRENT_VIEW', { name: '', type: 'community' }) // 使标题不显示公共的3个按钮
     const map = ref<any>(null)
     const initMap = () => {
       const points = map.value.addPoint({
@@ -57,12 +70,16 @@ export default defineComponent({
       })
       console.log('points', points)
     }
-    const handleMapClick = (e) => {
+    const handleMapClick = (e: any) => {
       console.log('point-data: ', e)
     }
     const handleComplete = (instance: any) => {
       instance.getLayer('model_white_zhenxing2').visible = true
       instance.getLayer('model_white_zhenxing2').opacity = 0.8
+      // instance.getLayer('model_white_zw').visible = true
+      // instance.getLayer('model_white_WEIHAI33').visible = true
+      // instance.getLayer('model_white_zw').opacity = 0.8
+      // instance.getLayer('model_white_WEIHAI33').opacity = 0.8
       let i = -90
       map.value.rotate(i)
       setTimeout(() => {

src/view/community/combine.vue

@@ -32,6 +32,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import Step from '../components/step.vue'
+import store from '@/store'
 
 export default defineComponent({
   name: 'Combine',

src/view/community/left-section.vue

@@ -30,29 +30,29 @@
       </div>
       <div class="buildings">
         <div
-          v-for="item in ['紫光大厦', '文海大楼', '振兴小区', '振华大楼']"
-          :key="item"
-          :class="{ on: curBuilding === item }"
-          @click="curBuilding = item"
+          v-for="item in buildingList"
+          :key="item.sectId"
+          :class="{ on: curBuilding === item.sectId }"
+          @click="selectBuilding(item.sectId)"
         >
-          {{ item }}
+          {{ item.sectName }}
         </div>
       </div>
       <div class="address">
         <div
           v-for="(item, i) in addrList"
           :key="i"
-          :style="`border-left-color: ${getColor(item.type)}`"
+          :style="`border-left-color: ${getColor(item.classification)}`"
         >
           <div>
-            <img :src="getIcon(item.name)" />
-            <p>{{ item.address }}</p>
+            <img :src="getIcon(item.relationName)" />
+            <p>{{ item.sectName }}</p>
           </div>
           <div class="type">
-            <span>{{ item.name }}</span>
-            <span>{{ item.type }}</span>
+            <span>{{ item.relationName }}</span>
+            <span>{{ item.classification }}</span>
           </div>
-          <i :style="`background:${getColor(item.type)}`" />
+          <i :style="`background:${getColor(item.classification)}`" />
         </div>
       </div>
       <div class="industry">
@@ -61,9 +61,10 @@
           业委会
         </div>
         <div class="content">
-          <div v-for="item in 3" :key="item">
-            <p>姓名</p>
-            <p>XX业委会主任</p>
+          <div v-for="(item, i) in memberList" :key="i">
+            <p>{{ item.dirName }}</p>
+            <p>{{ getDuty(item.dirDuty) }}</p>
+            <p>{{ item.hocName }}</p>
           </div>
         </div>
       </div>
@@ -72,7 +73,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import Brief, { BriefProp } from '@/view/components/brief.vue'
 import p1 from '@/assets/images/p1.png'
 import p2 from '@/assets/images/p2.png'
@@ -87,96 +88,107 @@ import type4 from '@/assets/images/type4.png'
 import type5 from '@/assets/images/type5.png'
 import type6 from '@/assets/images/type6.png'
 import type7 from '@/assets/images/type7.png'
+import store from '@/store'
+import { ajax, api } from '@/ajax'
 
 export default defineComponent({
   name: 'LeftSection',
   components: { Brief },
   setup() {
-    const summary = ref<BriefProp[]>([
-      { name: '小区数', value: 3, icon: p1 },
-      { name: '总户数', value: 2715, icon: p2 },
-      { name: '物业企业', value: 3, icon: p3 },
-      { name: '充电桩', value: 150, icon: p4 },
-      { name: '车位', value: 2500, icon: p5 },
-      { name: '为老设施', value: 15, icon: p6 },
-    ])
-    const addrList = ref([
-      {
-        name: '封闭',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        type: '门岗',
-      },
-      {
-        name: '有门岗无值班',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        type: '门岗',
-      },
-      {
-        name: '集合',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        type: '为老',
-      },
-      {
-        name: '助餐',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        type: '为老',
-      },
-      {
-        name: '助浴',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        type: '为老',
-      },
-      {
-        name: '充电桩',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        type: '公共',
-      },
-      {
-        name: '停车',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        type: '公共',
-      },
-      {
-        name: '充电桩',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        type: '公共',
+    const basicData = computed(() => store.state.communityInfo)
+    const summary = ref<BriefProp[]>([])
+    const buildingList = ref<unknown[]>([])
+    const curBuilding = ref<string | null>(null)
+    const memberList = ref<unknown[]>([])
+    const addrList = ref([])
+
+    watch(
+      () => basicData.value,
+      (cur) => {
+        const {
+          totCommunity = 0,
+          totHous = 0,
+          totCmp = 0,
+          chargingPile = 0,
+          parkingSpace = 0,
+          totForOld = 0,
+          communityList = [],
+        } = cur
+        summary.value = [
+          { name: '小区数', value: totCommunity, icon: p1 },
+          { name: '总户数', value: totHous, icon: p2 },
+          { name: '物业企业', value: totCmp, icon: p3 },
+          { name: '充电桩', value: chargingPile, icon: p4 },
+          { name: '车棚', value: parkingSpace, icon: p5 },
+          { name: '为老设施', value: totForOld, icon: p6 },
+        ]
+        buildingList.value = communityList
+        curBuilding.value = communityList && communityList[0].sectId
+        selectBuilding(curBuilding.value)
       },
-    ])
+      { deep: true }
+    )
     const getColor = (type: string): string => {
       switch (type) {
         case '门岗':
           return '#826AFA'
         case '为老':
           return '#FF6161'
-        case '公共':
+        case '小区设施':
           return '#8ED617'
         default:
           return '#fff'
       }
     }
-    const getIcon = (type: string): unknown => {
+    const getIcon = (type: string): string => {
+      if (!type) return type2
+      if (type.indexOf('集合') >= 0) return type3
+      if (type.indexOf('助餐') >= 0) return type6
+      if (type.indexOf('助浴') >= 0) return type7
+      if (type.indexOf('充电') >= 0) return type1
+      if (type.indexOf('车棚') >= 0) return type5
+      if (type.indexOf('垃圾') >= 0) return type4
+      return type2
+    }
+    const getDuty = (type: string): string => {
       switch (type) {
-        case '集合':
-          return type3
-        case '助餐':
-          return type6
-        case '助浴':
-          return type7
-        case '充电桩':
-          return type1
-        case '停车':
-          return type5
+        case '1':
+          return '主任'
+        case '2':
+          return '预留印鉴副主任'
+        case '3':
+          return '副主任'
         default:
-          return type2
+          return '业委会成员'
       }
     }
-    const curBuilding = ref('紫光大厦')
+    async function selectBuilding(id: string | undefined): Promise<void> {
+      if (!id) return
+      curBuilding.value = id
+      addrList.value = (
+        await ajax.get({
+          url: api.GET_COMMUNITY_FACILITY,
+          params: { sectId: id },
+        })
+      ).data.content.filter((item: any) => item.classification != '微更新')
+      memberList.value =
+        (
+          buildingList.value &&
+          (buildingList.value.find(
+            (b: any) => b.sectId === curBuilding.value
+          ) as any)
+        ).icMember || []
+    }
     return {
       summary,
+      buildingList,
+      curBuilding,
       addrList,
       getColor,
       getIcon,
-      curBuilding,
+      memberList,
+      getDuty,
+      selectBuilding,
     }
   },
 })
@@ -237,6 +249,8 @@ export default defineComponent({
     position relative
     color #aaa
     opacity .8
+    text-align center
+    padding 0 .08rem
     &:hover
       opacity 1
       color #fff
@@ -258,17 +272,21 @@ export default defineComponent({
 .address
   display flex
   flex-wrap wrap
-  justify-content space-around
   >div
+    display flex
+    flex-direction column
+    justify-content space-around
     width 48%
     padding .03rem .07rem
     box-sizing border-box
     position relative
-    margin-bottom .05rem
+    margin-bottom .06rem
+    margin-right @margin-bottom
     background rgba(33,58,89,.2)
     border .01rem solid rgba(91,213,255,.1)
     border-left .02rem solid transparent
     overflow hidden
+    min-height .6rem
     >div
       display flex
       align-items center
@@ -305,15 +323,22 @@ export default defineComponent({
   .content
     display flex
     justify-content space-between
+    flex-wrap wrap
+    overflow hidden
     >div
+      flex 1
       display flex
       flex-direction column
       justify-content center
-      padding 0 .12rem
+      padding .05rem .08rem
       min-height .5rem
-      width 31%
+      margin-bottom .05rem
+      margin-right @margin-bottom
       background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
       p
-        &:nth-of-type(2)
+        font-size .08rem
         color #aaa
+        &:first-child
+          font-size .09rem
+          color #fff
 </style>

src/view/community/manage-issue.vue

@@ -8,7 +8,7 @@
         color="rgba(91,213,255,.6)"
       >
         <span class="sum-txt">
-          评分 <m-count class="count" :value="92"></m-count>
+          评分 <m-count class="count" :value="totalValue"></m-count>
         </span>
       </m-wave>
     </div>
@@ -54,43 +54,45 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref, watchEffect } from 'vue'
 import { ChartTypes } from '@/components/MyComponent'
 import Circle from '../components/circle.vue'
+import store from '@/store'
 
 export default defineComponent({
   name: 'ManageIssue',
   components: { Circle },
   setup() {
-    const counts = ref([
-      { name: '安全', value: 59 },
-      { name: '干净', value: 85 },
-      { name: '有序', value: 99 },
-    ])
+    const issueData = computed(() => store.state.issueData)
+    const counts = ref<{ name: string; value: number }[]>([])
+    const totalValue = ref(0)
+    watchEffect(() => {
+      // const {
+      //   securityScore = 0,
+      //   cleanScore = 0,
+      //   orderlyScore = 0,
+      //   totalScore = 0,
+      // } = issueData.value && issueData.value[0]
+      // counts.value = [
+      //   { name: '安全', value: securityScore },
+      //   { name: '干净', value: cleanScore },
+      //   { name: '有序', value: orderlyScore },
+      // ]
+      // totalValue.value = totalScore
+    })
     const getColor = (count: number) => {
       if (count <= 60) return '#FF9C15'
       if (count < 90) return '#FFE211'
       else return '#19FF2B'
     }
-    const data = ref<ChartTypes.DatasetComponentOption>({
+    const data = ref({
       dimensions: [
         { name: 'date', displayName: '日期' },
-        { name: 'safe', displayName: '安全' },
-        { name: 'clean', displayName: '干净' },
-        { name: 'order', displayName: '有序' },
-      ],
-      source: [
-        { date: '0325', safe: 60, clean: 80, order: 70 },
-        { date: '0326', safe: 70, clean: 70, order: 60 },
-        { date: '0327', safe: 80, clean: 80, order: 80 },
-        { date: '0328', safe: 90, clean: 50, order: 70 },
-        { date: '0329', safe: 80, clean: 90, order: 80 },
-        { date: '0330', safe: 70, clean: 80, order: 80 },
-        { date: '0331', safe: 60, clean: 50, order: 90 },
-        { date: '0401', safe: 60, clean: 80, order: 70 },
-        { date: '0402', safe: 70, clean: 60, order: 80 },
-        { date: '0403', safe: 90, clean: 80, order: 70 },
+        { name: 'securityScore', displayName: '安全' },
+        { name: 'cleanScore', displayName: '干净' },
+        { name: 'orderlyScore', displayName: '有序' },
       ],
+      source: issueData.value,
     })
     const option = ref<ChartTypes.LineOption>({
       color: [
@@ -110,6 +112,7 @@ export default defineComponent({
     ])
     return {
       counts,
+      totalValue,
       getColor,
       data,
       option,

src/view/components/map.ts

+declare const SMap: any
+declare const Plugins: any
+
+export interface ConfigProp {
+  el: string
+  options: MapOptionsProp
+  sources: string[]
+}
+
+export interface MapOptionsProp {
+  viewMode?: string
+  center?: number[]
+  zooms?: number[]
+  zoom?: number
+  pitch?: number
+  mapStyle?: string
+  showBuildingBlock?: boolean
+}
+
+class Map {
+  map: any
+  config: ConfigProp
+  constructor(config: ConfigProp) {
+    this.config = config
+  }
+  injectSource(): Promise<unknown[]> {
+    const promises = this.config.sources.map(
+      (source: string, index: number) => {
+        return new Promise((resolve) => {
+          if (document.getElementById(`_source${index}`)) {
+            resolve(true)
+            return
+          }
+          const sourceJs = document.createElement('script')
+          sourceJs.type = 'text/javascript'
+          sourceJs.src = source
+          sourceJs.setAttribute('id', `_source${index}`)
+          document.head.appendChild(sourceJs)
+          window.onload = () => resolve(true)
+        })
+      }
+    )
+    return Promise.all(promises)
+  }
+}
+
+export class S_Map extends Map {
+  constructor(config: ConfigProp) {
+    super(config)
+    this.injectSource().then(this.initMap)
+  }
+  initMap(): void {
+    this.map = new SMap.Map(this.config.el, this.config.options)
+  }
+  onLoaded(cb: (arg: unknown) => void): void {
+    this.map.on(SMap.MapEvent.maploaded, cb)
+  }
+  onZoomChange(cb: (arg: unknown) => void): void {
+    this.map.on(SMap.MapEvent.zoomchanged, cb)
+  }
+  onCenterChange(cb: (arg: unknown) => void): void {
+    this.map.on(SMap.MapEvent.centerchanged, cb)
+  }
+  onBlur(cb: (arg: unknown) => void): void {
+    this.map.on(SMap.MapEvent.blur, cb)
+  }
+  onFocus(cb: (arg: unknown) => void): void {
+    this.map.on(SMap.MapEvent.focus, cb)
+  }
+  onDrag(cb: (arg: unknown) => void): void {
+    this.map.on(SMap.MapEvent.drag, cb)
+  }
+  onClick(cb: (arg: unknown, point: unknown) => void): void {
+    this.map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
+      view.hitTest(eventParamter).then((res: any) => {
+        if (res.results && res.results.length > 0) {
+          cb(
+            res.results[0] && res.results[0].graphic.attributes,
+            eventParamter.mapPoint
+          )
+        }
+      })
+    })
+  }
+}