工作站页面对接部分接口

src/ajax/api.ts

@@ -10,7 +10,6 @@ switch (process.env.NODE_ENV) {
 export default {
   BASE_URL,
   GET_BUILDING: '/service-basicdatasync-ddd/building', // 门牌幢列表
-  GET_STATION: '/service-special-nandong/workstations', // 工作站列表
   GET_INDUSTRY_AUTHORITY: '/service-basicdatasync-ddd/indCous', // 业委会列表
   GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees', // 居委会列表
   GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表
@@ -34,4 +33,13 @@ export default {
   GET_COMMUNITY_FACILITY: '/service-special-nandong/communityRelations', // 小区设施
   GET_ISSUE_LIST: '/service-special-nandong/management/factors', // 管理要素列表
   GET_COMBINE_LIST: '/service-special-nandong/league/linkage', // 联勤联动列表
+
+  /** 工作站 */
+  GET_STATION: '/service-special-nandong/workstations', // 工作站信息
+  GET_DUTY_SUM: '/service-special-nandong/workStation/dutyNum', // 勤务统计数
+  GET_DUTY_LIST: '/service-special-nandong/workStation/dutyList', // 勤务列表
+  GET_DUTY_RANK: '/service-special-nandong/compair/getRanking', // 勤务分析 - 事件类型
+  GET_DUTY_EVENTS: '/service-special-nandong/compair/getRanking/cmt', // 勤务分析 - 居委事件数量
+  GET_DUTY_PLACES: '/service-special-nandong/compair/getRanking/addr', // 勤务分析 - 多发地点
+  GET_DUTY_RANKING: '/service-special-nandong/compair/getRanking/all', // 勤务分析 - 排行
 }

src/ajax/axios.ts

@@ -11,7 +11,7 @@ Axios.interceptors.request.use(
   (config) => {
     // 添加token
     config.headers.Authorization =
-      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMCIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4Mzg1MjgxLCJqdGkiOiI5ZTEyOTE0Zi1lNWJlLTRiZjktOTY4Zi0yYzk3ZjMwNmM0OWQiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTgzNzgwODE2MTR9.PZQbXEaYoKqhZbpvan4rSCJNCJwYRr2Y9fAp_bj3l5FpAORHp6QDDHIBcFfdbQtBEOBOIFhqhji5DicD2-wJeqgEczfEUnWI_XGVTkw-aWBx7Qh4JTOeXOV2Gp1n_mY2tv4xGopoIOdfT2V9U19HyPJ25AtB0NZBzSxNfQtIw5Lt7PJX-jQf_W3b_N5U3cbU7qXtiGZSs-YxnoU-d65cXTIkODW5sU61jBg0RRAtBXeSlyznCrdTqrYIESp3ZgXUs7ie4MUxGurzNBDVCgplP6GRyLU1bQZlgxIi4ZnJPwxFKLMjIdko6JB6soNGIQu4WLyx3acK4zZo14Uk4_F8WQ'
+      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMCIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4NDE3MTQ0LCJqdGkiOiIxOTZhNGE1ZS0yNzI3LTQ5ZTctOWIxOC02Y2U4OTAzNTQ2YWIiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTg0MDk5NDQyNjd9.S2L88SbCklTArdG7jFPRw3xZ_xTNSk0r2fqI3ta92w23pFgi3aXazc-AQsno2lNF67eCT7K1KbXrqRa0-jHCT4iLyETPyzDj072QwgB06YzPtb1CqsYZLSAZUO8GH_MUB6Gqxp9Z2jLHJDDyfQF2EaWAaPtONbXxf_0Nsgq_pJDAJG84LSL8j8RyFZJ1ZtYRoCkyVGZvq06AeLTmZdwSqt1k8LKkFWsi9XTL_WVaQsvkZs4oJM7nZokvO70ISSIq7EUNLDUstFtMWwyrv6dnhsa2fkagoDkd4CGInGh3d35E5hXHsR_SD8zMfqzrzdgHzonf58mVhyvzQViNPQfKsw'
     return config
   },
   (error) => {

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

@@ -44,7 +44,7 @@ export default defineComponent({
         ...props.config,
       }).on(SMap.MapEvent.maploaded, () => {
         ctx.emit('complete', map)
-        hideCommunity()
+        // hideCommunity()
         addListener()
         // map.getLayer('model_white_zw').visible = true
         // map.getLayer('model_white_WEIHAI33').visible = true
@@ -170,10 +170,18 @@ export default defineComponent({
     }: PointProp) {
       if (!map) return
       const points = getMapPoints({ data, key, labelKey, icon, size, color })
+      console.log(points)
+
       map.add(points)
       return points
     }
 
+    // 删除点
+    function remove(points: any) {
+      if (!map || !points) return
+      map.remove(points)
+    }
+
     return {
       focus,
       hideCommunity,
@@ -181,6 +189,7 @@ export default defineComponent({
       addBoundary,
       rotate,
       addPoint,
+      remove,
     }
   },
 })

src/store/actions.ts

@@ -32,11 +32,11 @@ export default {
     commit('SET_CASE_LIST', content)
   },
 
-  // 工作站列表
-  async getStation({ commit }: { commit: Commit }): Promise<void> {
-    const { content } = (await ajax.get({ url: api.GET_STATION })).data
-    commit('SET_STATION_LIST', content)
-  },
+  // // 工作站列表
+  // async getStation({ commit }: { commit: Commit }): Promise<void> {
+  //   const { content } = (await ajax.get({ url: api.GET_STATION })).data
+  //   commit('SET_STATION_LIST', content)
+  // },
 
   // 公共服务 - 门岗值守 - 社会物业和直管公房数据
   async GET_PUBLICSAFE_NEWFIND({ commit }: { commit: Commit }): Promise<void> {
@@ -249,9 +249,19 @@ export default {
     dispatch('getIssueList', id)
     dispatch('getCombineList', id)
   },
-  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 getCommunityInfo(
+    { commit }: { commit: Commit },
+    id: string
+  ): Promise<void> {
+    const { content } = (
+      await ajax.get({
+        url: api.GET_COMMUNITY_INFO,
+      })
+    ).data
+    commit(
+      'SET_COMMUNITY_INFO',
+      content.find((item: any) => item.id === id)
+    )
   },
   async getIssueList(
     { commit }: { commit: Commit },
@@ -277,4 +287,93 @@ export default {
     ).data
     commit('SET_COMBINE_DATA', content)
   },
+  /** 工作站 */
+  initStationData({ dispatch }: { dispatch: Dispatch }, id: string): void {
+    if (!id) return
+    dispatch('getStationById', id)
+    dispatch('getDutySum', id)
+  },
+  async getStationById(
+    { commit }: { commit: Commit },
+    id: string
+  ): Promise<void> {
+    const { content } = (
+      await ajax.get({ url: api.GET_STATION, params: { id } })
+    ).data
+    commit('SET_STATION', content && content[0])
+  },
+  async getDutySum(
+    { commit }: { commit: Commit },
+    gridId: string
+  ): Promise<void> {
+    const { content } = (
+      await ajax.get({ url: api.GET_DUTY_SUM, params: { gridId } })
+    ).data
+    commit('SET_DUTY_SUM', content)
+  },
+  async getDutyList(
+    { commit }: { commit: Commit },
+    params: { [key: string]: string }
+  ): Promise<void> {
+    if (!params.gridId) return
+    const { content } = (
+      await ajax.get({
+        url: api.GET_DUTY_LIST,
+        params,
+      })
+    ).data
+    commit('SET_DUTY_LIST', content)
+  },
+  async getDutyRank(
+    { commit }: { commit: Commit },
+    params: { [key: string]: string }
+  ): Promise<void> {
+    if (!params.gridId) return
+    const { content } = (
+      await ajax.get({
+        url: api.GET_DUTY_RANK,
+        params,
+      })
+    ).data
+    commit('SET_DUTY_RANK', content)
+  },
+  async getDutyEvents(
+    { commit }: { commit: Commit },
+    params: { [key: string]: string }
+  ): Promise<void> {
+    if (!params.gridId) return
+    const { content } = (
+      await ajax.get({
+        url: api.GET_DUTY_EVENTS,
+        params,
+      })
+    ).data
+    commit('SET_DUTY_EVENTS', content)
+  },
+  async getDutyPlaces(
+    { commit }: { commit: Commit },
+    params: { [key: string]: string }
+  ): Promise<void> {
+    if (!params.gridId) return
+    const { content } = (
+      await ajax.get({
+        url: api.GET_DUTY_PLACES,
+        params,
+      })
+    ).data
+    commit('SET_DUTY_PLACES', content)
+  },
+  async getDutyRanking(
+    { commit }: { commit: Commit },
+    params: { [key: string]: string }
+  ): Promise<void> {
+    if (!params.gridId) return
+    const { content } = (
+      await ajax.get({
+        url: api.GET_DUTY_RANKING,
+        params,
+      })
+    ).data
+    commit('SET_DUTY_RANKING', content)
+  },
 }

src/store/index.ts

@@ -7,6 +7,7 @@ export type ThemeType = 'manage' | 'service' | 'safety'
 export interface ViewType {
   name: string
   type: 'street' | 'work1' | 'work2' | 'work3' | 'community'
+  id?: string
 }
 
 export interface CommunityInfoProp {
@@ -35,6 +36,22 @@ export interface CombineProp {
   [key: string]: { [key: string]: any }[]
 }
 
+export interface DutySumProp {
+  comprehensiveNum: number //综合管理数量
+  comprehensiveEndNum: number //综合管理已结数量
+  streetNum: number //街面管理数量
+  streetEndNum: number //街面管理已结数量
+  communityEndNum: number //小区管理已结数量
+  communityNum: number //小区管理数量
+}
+
+export interface DutyDataProp {
+  week: { [key: string]: unknown }[]
+  month: { [key: string]: unknown }[]
+  day: { [key: string]: unknown }[]
+  [key: string]: { [key: string]: any }[]
+}
+
 export interface GlobalStateProps {
   showLoading: boolean
   curView: ViewType
@@ -42,7 +59,6 @@ export interface GlobalStateProps {
   curTheme: ThemeType
   propertySummary: { [key: string]: number }
   caseList: unknown[]
-  stationList: unknown[]
   pubulicSafeGateSenteryShehuiwuye: { [key: string]: number }
   pubulicSafeGateSenteryZhiguangongfang: { [key: string]: number }
   pubulicSafeMap: unknown[]
@@ -61,6 +77,15 @@ export interface GlobalStateProps {
   communityInfo: Partial<CommunityInfoProp>
   issueData: IssueProp[]
   combineData: CombineProp
+
+  /** 工作站 */
+  stationInfo: { [key: string]: unknown }
+  dutySum: Partial<DutySumProp>
+  dutyList: { [key: string]: any }[]
+  dutyRank: Partial<DutyDataProp>
+  dutyEvents: Partial<DutyDataProp>
+  dutyPlaces: Partial<DutyDataProp>
+  dutyRanking: Partial<DutyDataProp>
 }
 export default createStore<GlobalStateProps>({
   state,

src/store/mutations.ts

@@ -5,6 +5,8 @@ import {
   CommunityInfoProp,
   IssueProp,
   CombineProp,
+  DutySumProp,
+  DutyDataProp,
 } from './index'
 
 export default {
@@ -26,8 +28,8 @@ export default {
   SET_CASE_LIST(state: GlobalStateProps, data: unknown[]): void {
     state.caseList = data
   },
-  SET_STATION_LIST(state: GlobalStateProps, data: unknown[]): void {
-    state.stationList = data
+  SET_STATION(state: GlobalStateProps, data: { [key: string]: unknown }): void {
+    state.stationInfo = data
   },
   SET_PUBLICSAFE_GATESENTRY_SHEHUIWUYE(
     // 公共安全-门岗值守-社会物业
@@ -131,4 +133,24 @@ export default {
   SET_COMBINE_DATA(state: GlobalStateProps, data: CombineProp): void {
     state.combineData = data
   },
+
+  /** 工作站 */
+  SET_DUTY_SUM(state: GlobalStateProps, data: DutySumProp): void {
+    state.dutySum = data
+  },
+  SET_DUTY_LIST(state: GlobalStateProps, data: { [key: string]: any }[]): void {
+    state.dutyList = data
+  },
+  SET_DUTY_RANK(state: GlobalStateProps, data: DutyDataProp): void {
+    state.dutyRank = data
+  },
+  SET_DUTY_EVENTS(state: GlobalStateProps, data: DutyDataProp): void {
+    state.dutyEvents = data
+  },
+  SET_DUTY_PLACES(state: GlobalStateProps, data: DutyDataProp): void {
+    state.dutyPlaces = data
+  },
+  SET_DUTY_RANKING(state: GlobalStateProps, data: DutyDataProp): void {
+    state.dutyRanking = data
+  },
 }

src/store/state.ts

@@ -5,14 +5,14 @@ export default {
   curView: { name: '南京东路街道', type: 'street' },
   viewOptions: [
     { name: '南京东路街道', type: 'street' },
-    { name: '第一工作站', type: 'work1' },
-    { name: '第二工作站', type: 'work2' },
-    { name: '第三工作站', type: 'work3' },
+    { name: '第一工作站', type: 'work1', id: '01001' },
+    { name: '第二工作站', type: 'work2', id: '01002' },
+    { name: '第三工作站', type: 'work3', id: '01003' },
   ],
   curTheme: 'manage',
   propertySummary: {},
   caseList: [],
-  stationList: [],
+  stationInfo: {},
   pubulicSafeGateSenteryShehuiwuye: {},
   pubulicSafeGateSenteryZhiguangongfang: {},
   pubulicSafeMap: [],
@@ -29,4 +29,10 @@ export default {
   communityInfo: {},
   issueData: [],
   combineData: { cleanList: [], securityList: [], orderlyList: [] },
+  dutySum: {},
+  dutyList: [],
+  dutyRank: { day: [], week: [], month: [] },
+  dutyEvents: { day: [], week: [], month: [] },
+  dutyPlaces: { day: [], week: [], month: [] },
+  dutyRanking: { day: [], week: [], month: [] },
 } as GlobalStateProps

src/view/community.vue

@@ -8,7 +8,7 @@
     rows="0.4rem auto"
     gap="0.05rem"
   >
-    <m-title area="title">南东城运</m-title>
+    <m-title area="title"> 南东城运{{ title }} </m-title>
     <m-map
       ref="map"
       :config="{ center: [-75.5563452697323, -718.3061904627932], zoom: 8 }"
@@ -24,56 +24,102 @@
     <div class="btns">
       <div
         v-for="btn in btns"
-        :key="btn"
-        :class="{ on: btn === curBtn }"
-        @click="handleClick(btn)"
+        :key="btn.key"
+        :class="{ on: btn.key === curBtn }"
+        @click="handleClick(btn.key)"
       >
-        <p>{{ btn }}</p>
+        <p>{{ btn.name }}</p>
       </div>
     </div>
   </m-grid>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue'
+import { computed, defineComponent, onMounted, ref } 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 point1 from '@/assets/images/point1.png'
+import point2 from '@/assets/images/point2.png'
+import point3 from '@/assets/images/point3.png'
+import point4 from '@/assets/images/point4.png'
+import point5 from '@/assets/images/point5.png'
+import point6 from '@/assets/images/point6.png'
+import point7 from '@/assets/images/point7.png'
 import { useRoute } from 'vue-router'
+import { ajax, api } from '@/ajax'
 
 export default defineComponent({
   name: 'Main',
   components: { LeftSection, RightSection },
   setup() {
     const loading = ref(true)
+    const title = computed(
+      () => store.state.communityInfo.bigscreenCommunityName
+    )
+    const route = useRoute()
     const initData = (id: unknown) => {
       store.dispatch('initCommunityData', id || '527635870583459840')
     }
     onMounted(() => {
-      initData(useRoute().query.id)
+      initData(route.query.id)
     })
     store.commit('SET_CURRENT_VIEW', { name: '', type: 'community' }) // 使标题不显示公共的3个按钮
     const map = ref<any>(null)
-    const initMap = () => {
-      const points = map.value.addPoint({
-        key: 'test',
+    const points = ref<any>(null)
+    const initMapPoints = (key: string, data: any[]) => {
+      const getIcon = (type: string) => {
+        if (type.indexOf('车棚') >= 0) return point2
+        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 看是否是“助老”
+        return point4 // 默认为美丽家园-微更新
+      }
+      const pointData = data.map((item: any) => {
+        const position = item.coordinate && item.coordinate.split(',')
+        return Object.assign({}, item, {
+          name: item.id,
+          x: position && +position[0],
+          y: position && +position[1],
+          // icon: getIcon(item.relationName),
+        })
+      })
+      console.log(pointData)
+
+      points.value = map.value.addPoint({
+        key: key,
         size: [100, 500],
-        icon: point,
-        data: [{ name: '测试', x: -275.5563452697323, y: -718.3061904627932 }],
+        data: [
+          {
+            name: '测试',
+            x: -275.5563452697323,
+            y: -718.3061904627932,
+            icon: point4,
+          },
+          {
+            name: '测试',
+            x: -75.5563452697323,
+            y: -518.3061904627932,
+            icon: point,
+          },
+        ],
       })
-      console.log('points', points)
     }
     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 center = [-75.5563452697323, -718.3061904627932]
+      if (route.query.id === '527635870583459841') {
+        instance.getLayer('model_white_WEIHAI33').visible = true
+        instance.getLayer('model_white_WEIHAI33').opacity = 0.8
+        center = [-75.5563452697323, -518.3061904627932]
+      } else {
+        instance.getLayer('model_white_zhenxing2').visible = true
+        instance.getLayer('model_white_zhenxing2').opacity = 0.8
+      }
       let i = -90
       map.value.rotate(i)
       setTimeout(() => {
@@ -83,27 +129,53 @@ export default defineComponent({
             i += 2
             if (i > 0) {
               setTimeout(() => {
-                map.value.focus(-75.5563452697323, -718.3061904627932, 9)
+                map.value.focus(...center, 9)
               }, 500)
               clearInterval(timer)
-              initMap()
             }
             map.value.rotate(i)
           }, 2)
         }, 1000)
       }, 7000)
     }
-    const btns = ref(['微更新', '电梯加装', '智能监控', '楼宇安全'])
+    const btns = ref([
+      { name: '美丽家园', key: '微更新' },
+      { name: '周边设施', key: '小区设施' },
+      { name: '监控设施', key: '监控' },
+    ])
+    if (route.query.id === '527635870583459841') {
+      btns.value = [
+        { name: '美丽家园', key: '微更新' },
+        { name: '加装电梯', key: '电梯加装' },
+        { name: '周边设施', key: '小区设施' },
+        { name: '监控设施', key: '监控' },
+      ]
+    }
     const curBtn = ref<string | null>(null)
-    const handleClick = (btn: string) => {
-      if (curBtn.value === btn) {
+    const handleClick = async (key: string) => {
+      map.value.remove(points.value)
+      if (curBtn.value === key) {
         curBtn.value = null
+        map.value.showCommunity()
         return
       }
-      curBtn.value = btn
+      const { content } = (
+        await ajax.get({
+          url: api.GET_COMMUNITY_FACILITY,
+          params: {
+            bigscreenCommunityId: route.query.id,
+            classification: key,
+            pageSize: 1000,
+          },
+        })
+      ).data
+      initMapPoints(key, content)
+      map.value.hideCommunity()
+      curBtn.value = key
     }
     return {
       loading,
+      title,
       map,
       handleComplete,
       handleMapClick,

src/view/community/combine.vue

@@ -17,6 +17,7 @@
         :mode="2"
         :limit="5"
         :step="1.25"
+        style="height: 5rem"
       >
         <div v-for="(item, i) in list" :key="i" class="card">
           <div class="title">
@@ -31,7 +32,7 @@
           <Step :current="steps.indexOf(item.phase)" :steps="steps" />
         </div>
       </m-scroll>
-      <m-empty v-else style="height:5rem;" />
+      <m-empty v-else style="height: 5rem" />
     </div>
   </m-card>
 </template>

src/view/community/left-section.vue

@@ -4,7 +4,7 @@
       <div class="info">
         <div><img src="@/assets/images/zhenxing.png" /></div>
         <div>
-          <h3>振兴小区</h3>
+          <h3>{{ communityName }}</h3>
           <div>
             <div>
               <img src="@/assets/images/p11.png" />
@@ -23,11 +23,11 @@
           </div>
         </div>
       </div>
-      <div>
+      <di v>
         <Brief :list="summary.slice(0, 3)" size="0.32rem" />
         <h1></h1>
         <Brief :list="summary.slice(3)" size="0.32rem" />
-      </div>
+      </di>
       <div class="buildings">
         <div
           v-for="item in buildingList"
@@ -55,7 +55,7 @@
           <i :style="`background:${getColor(item.classification)}`" />
         </div>
       </div>
-      <div class="industry">
+      <div v-show="memberList.length > 0" class="industry">
         <div class="title">
           <img src="@/assets/images/p9.png" />
           业委会
@@ -100,6 +100,7 @@ export default defineComponent({
     const curBuilding = ref<string | null>(null)
     const memberList = ref<unknown[]>([])
     const addrList = ref([])
+    const communityName = ref('')
 
     watch(
       () => store.state.communityInfo,
@@ -112,7 +113,9 @@ export default defineComponent({
           parkingSpace = 0,
           totForOld = 0,
           communityList = [],
+          bigscreenCommunityName = '',
         } = cur
+        communityName.value = bigscreenCommunityName
         summary.value = [
           { name: '小区数', value: totCommunity, icon: p1 },
           { name: '总户数', value: totHous, icon: p2 },
@@ -180,6 +183,7 @@ export default defineComponent({
         ).icMember || []
     }
     return {
+      communityName,
       summary,
       buildingList,
       curBuilding,
@@ -200,7 +204,7 @@ export default defineComponent({
 .info
   display flex
   min-height .8rem
-  margin-top .03rem
+  margin .05rem 0
   >div
     flex 1
     color #ccc
@@ -240,6 +244,7 @@ export default defineComponent({
 .buildings
   display flex
   justify-content space-between
+  margin .05rem 0
   >div
     $center()
     width 23%
@@ -272,6 +277,7 @@ export default defineComponent({
 .address
   display flex
   flex-wrap wrap
+  flex 1
   >div
     display flex
     flex-direction column
@@ -286,7 +292,7 @@ export default defineComponent({
     border .01rem solid rgba(91,213,255,.1)
     border-left .02rem solid transparent
     overflow hidden
-    min-height .6rem
+    height .6rem
     >div
       display flex
       align-items center

src/view/components/brief.vue

@@ -57,7 +57,6 @@ export default defineComponent({
 @import '../../components/MyComponent/main.styl'
 .brief-container
   display flex
-  justify-content space-around
   align-items center
   .count
     font-size .12rem
@@ -67,6 +66,8 @@ export default defineComponent({
   >div
     display flex
     align-items center
+    flex 1
+    margin-left .05rem
     >img
       margin-right .05rem
     >div

src/view/components/place.vue

@@ -25,7 +25,7 @@ export default defineComponent({
     },
   },
   setup() {
-    const getStyle = (type: string) => {
+    const getStyle = (type: string | null) => {
       switch (type) {
         case '路段':
           return {
@@ -46,7 +46,11 @@ export default defineComponent({
             background: 'rgba(250,100,0,.3)',
           }
         default:
-          return {}
+          return {
+            borderColor: '#F7B500',
+            color: '#F7B500',
+            background: 'rgba(247, 181, 0, 0.3)',
+          }
       }
     }
     return {
@@ -64,12 +68,14 @@ export default defineComponent({
   height 100%
   background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
   font-weight bold
-  padding .08rem .1rem
+  padding .05rem .08rem
+  display flex
+  flex-direction column
+  justify-content space-around
   >div
     display flex
     align-items center
     justify-content space-between
-    margin-top .1rem
     .count
       font-size .14rem
       color $secondary-color

src/view/components/view-selector.vue

@@ -30,6 +30,7 @@ export default defineComponent({
         'SET_CURRENT_VIEW',
         options.value.find((option) => type === option.type)
       )
+      store.dispatch('initStationData', store.state.curView.id)
     }
     return {
       curViewType,

src/view/left/manage-basic.vue

@@ -8,7 +8,11 @@
             {{ item.name }}
           </p>
           <p>
-            <m-count class="count" :value="item.value" />
+            <m-count
+              class="count"
+              :value="item.value"
+              :decimal="item.decimal || 0"
+            />
             <span>{{ item.unit }}</span>
           </p>
         </div>
@@ -47,49 +51,110 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent } from 'vue'
 import pic1 from '@/assets/images/pic1.png'
 import pic2 from '@/assets/images/pic2.png'
 import pic3 from '@/assets/images/pic3.png'
 import pic4 from '@/assets/images/pic4.png'
 import avatar1 from '@/assets/images/avatar1.png'
 import avatar2 from '@/assets/images/avatar2.png'
+import store from '@/store'
 
 export default defineComponent({
   name: 'ManageBasic',
   setup() {
-    const basicList = ref([
-      { name: '总面积', value: 241359, unit: '㎡', icon: pic1 },
-      { name: '总户数', value: 341359, unit: '户', icon: pic2 },
-      { name: '总人口', value: 965334, unit: '人', icon: pic3 },
-      { name: '总单位', value: 5334, unit: '家', icon: pic4 },
-    ])
-    const leaders = ref([
-      {
-        img: avatar1,
-        name: '姓名',
-        type: '网格长',
-      },
-      {
-        img: avatar2,
-        name: '姓名',
-        type: '副网格长',
-      },
-      {
-        img: avatar1,
-        name: '姓名',
-        type: '警长',
-      },
-    ])
-    const gridList = ref([
-      { department: '派出所', persons: '朱洪元副所长、于冰警长、警力25人' },
-      { department: '市场所', persons: '王绍良、陈蕾、张敏' },
-      { department: '城管中队', persons: '尤懿副队长、城管队员8人' },
-      { department: '城运中心', persons: '许俊' },
-      { department: '建管中心', persons: '张沁园、车姝敏、杨姝敏' },
-      { department: '党建联络员', persons: '方雅婷、秦雯、郭强' },
-      { department: '服务企业人员', persons: '蓝俊' },
-    ])
+    const stationInfo = computed(() => store.state.stationInfo)
+    const basicList = computed(() => {
+      const {
+        totalArea = 0,
+        totalHousehold = 0,
+        totalPopulation = 0,
+        totalUnit = 0,
+      } = stationInfo.value
+      return [
+        {
+          name: '总面积',
+          value: totalArea,
+          unit: 'k㎡',
+          icon: pic1,
+          decimal: 2,
+        },
+        {
+          name: '总户数',
+          value: totalHousehold,
+          unit: '户',
+          icon: pic2,
+        },
+        {
+          name: '总人口',
+          value: totalPopulation,
+          unit: '人',
+          icon: pic3,
+        },
+        {
+          name: '总单位',
+          value: totalUnit,
+          unit: '家',
+          icon: pic4,
+        },
+      ]
+    })
+    const leaders = computed(() => {
+      const {
+        gridId = '无',
+        viceGridId = '无',
+        sheriffId = '无',
+      } = stationInfo.value
+      return [
+        {
+          img: avatar1,
+          name: gridId,
+          type: '网格长',
+        },
+        {
+          img: avatar2,
+          name: viceGridId,
+          type: '副网格长',
+        },
+        {
+          img: avatar1,
+          name: sheriffId,
+          type: '警长',
+        },
+      ]
+    })
+    const getName = (type: string) => {
+      switch (type) {
+        case 'pcs':
+          return '派出所'
+        case 'scs':
+          return '市场所'
+        case 'cgzd':
+          return '城管中队'
+        case 'wgzx':
+          return '网格中心'
+        case 'lhsrs':
+          return '绿化市容所'
+        case 'djlly':
+          return '党建联络员'
+        case 'fwqyry':
+          return '服务企业人员'
+        default:
+          return '无'
+      }
+    }
+    const gridList = computed(() => {
+      const gridPower =
+        stationInfo.value.gridPower &&
+        JSON.parse(stationInfo.value.gridPower as string)
+      if (!gridPower) return []
+      return Object.keys(gridPower).map((key: string) => {
+        return {
+          department: getName(key),
+          persons: gridPower[key],
+        }
+      })
+    })
     return {
       basicList,
       leaders,

src/view/main.vue

@@ -106,8 +106,9 @@ export default defineComponent({
         console.log(res)
       })
 
-    const handleMapComplete = () => {
-      console.log('complete', map.value)
+    const handleMapComplete = (instance: any) => {
+      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)' })
     }
     return {

src/view/right/business-entry.vue

 <template>
   <m-card title="业务入口">
     <div class="content">
-      <div>民宿群租整治</div>
-      <div>小型工程纳管</div>
+      <div @click="routeTo('527635870583459840')">振兴小区</div>
+      <div @click="routeTo('527635870583459841')">威海路62弄小区</div>
     </div>
   </m-card>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-
+import { useRouter } from 'vue-router'
 export default defineComponent({
   name: 'BussinessEntry',
+  setup() {
+    const router = useRouter()
+    const routeTo = (id: string) => {
+      router.push({
+        name: 'community',
+        query: {
+          id,
+        },
+      })
+    }
+    return {
+      routeTo,
+    }
+  },
 })
 </script>
 
@@ -31,4 +45,10 @@ export default defineComponent({
     justify-content center
     font-size .12rem
     font-weight bold
+    cursor pointer
+    opacity 0.8
+    color #ccc
+    &:hover
+      color #fff
+      opacity 1
 </style>

src/view/right/duty-analysis.vue

@@ -2,25 +2,26 @@
   <m-card title="勤务分析">
     <div class="nav">
       <div>
-        <Tabs :list="tabs" horizontal />
+        <Tabs :list="tabs" horizontal @select="curTab = $event" />
       </div>
       <div>
         <span
           v-for="option in options"
-          :key="option"
-          :class="{ on: curOption === option }"
-          @click="curOption = option"
+          :key="option.key"
+          :class="{ on: curOption === option.key }"
+          @click="curOption = option.key"
         >
-          {{ option }}
+          {{ option.name }}
         </span>
       </div>
     </div>
     <div>
       <SubTitle>事件类型</SubTitle>
       <div class="duty-type">
-        <div v-if="showChart" class="chart">
+        <div v-if="showChart && pieData.source.length > 0" class="chart">
           <m-pie :dataset="pieData" :option="pieOption" />
         </div>
+        <m-empty v-else />
         <div class="legend">
           <div v-for="(item, i) in pieData.source" :key="item.name">
             <p>
@@ -28,8 +29,8 @@
               {{ item.name }}
             </p>
             <p>
-              {{ ((item.value / total) * 100).toFixed(0) }}%
-              <m-count :value="item.value" />人
+              {{ Math.ceil((item.value / total) * 100).toFixed(0) }}%
+              <m-count :value="item.value" />件
             </p>
           </div>
         </div>
@@ -37,34 +38,39 @@
     </div>
     <div>
       <SubTitle>居委事件数量</SubTitle>
-      <div v-if="showChart" class="chart">
+      <div v-if="showChart && barOption.series.length > 0" class="chart bar">
         <m-bar :dataset="barData" :option="barOption" />
       </div>
+      <m-empty v-else />
     </div>
     <div class="rank">
       <SubTitle>分类排行</SubTitle>
-      <div class="content">
-        <m-progress
-          v-for="rank in rankList"
-          :key="rank.name"
-          :value="rank.value"
-          :msg="rank"
-        />
+      <div v-if="rankList.length > 0" class="content">
+        <m-scroll :length="rankList.length" :limit="3">
+          <m-progress
+            v-for="rank in rankList"
+            :key="rank.name"
+            :value="rank.rate"
+            :msg="rank"
+          />
+        </m-scroll>
       </div>
+      <m-empty v-else />
     </div>
     <div class="place">
       <SubTitle>多发地点</SubTitle>
-      <div class="content">
+      <div v-if="placeList.length > 0" class="content">
         <div v-for="item in placeList" :key="item.name">
           <Place :data="item" />
         </div>
       </div>
+      <m-empty v-else />
     </div>
   </m-card>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
 import SubTitle from '../components/sub-title.vue'
 import Place, { PlaceProp } from '../components/place.vue'
@@ -76,153 +82,130 @@ export default defineComponent({
   setup() {
     const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
     const showChart = computed(() => store.state.curView.type !== 'street')
+    const curTab = ref('综合')
     const tabs = ref<TabsProp[]>([
-      {
-        key: 'all',
-        name: '综合管理',
-      },
-      {
-        key: 'street',
-        name: '街面管理',
-      },
-      {
-        key: 'community',
-        name: '小区管理',
-      },
+      { name: '综合管理', key: '综合' },
+      { name: '街面管理', key: '街面' },
+      { name: '小区管理', key: '小区' },
     ])
-    const options = ref(['日', '周', '月'])
-    const curOption = ref('月')
-    const rankList = ref([
-      { name: '分类1', value: 50 },
-      { name: '分类2', value: 31 },
-      { name: '分类3', value: 15 },
+    const options = ref([
+      { name: '日', key: 'day' },
+      { name: '周', key: 'week' },
+      { name: '月', key: 'month' },
     ])
-    const placeList = ref<PlaceProp[]>([
-      { name: '延安东路1292弄', value: 3, type: '路段' },
-      { name: '延安东路1293弄', value: 5, type: '小区' },
-      { name: '延安东路1294弄', value: 8, type: '商业' },
-    ])
-    const barData = ref({
-      dimensions: [
+    const curOption = ref('month')
+    watch([() => curTab.value, () => store.state.curView.id], ([type, id]) => {
+      if (!id) return
+      store.dispatch('getDutyRank', {
+        gridId: id,
+        managementType: type,
+      })
+      store.dispatch('getDutyEvents', {
+        gridId: id,
+        managementType: type,
+      })
+      store.dispatch('getDutyPlaces', {
+        gridId: id,
+        managementType: type,
+      })
+      store.dispatch('getDutyRanking', {
+        gridId: id,
+        managementType: type,
+      })
+    })
+
+    const rankList = computed(() => {
+      const data = store.state.dutyRanking[curOption.value] || []
+      const total = data.reduce((acc, cur) => acc + cur.num, 0)
+      return data.map((item: any) => ({
+        name: item.businsessType || item.businessType,
+        rate: +Math.ceil((item.num / total) * 100).toFixed(0),
+        value: item.num,
+        unit: '件',
+      }))
+    })
+    const placeList = computed(() => {
+      const data = store.state.dutyPlaces[curOption.value] || []
+      return data.map((item: any) => ({
+        name: item.address,
+        value: item.num,
+        type: '路段',
+      }))
+    })
+    const barData = computed(() => {
+      const data = store.state.dutyEvents[curOption.value] || []
+      const types: string[] = []
+      data.forEach((item: any) =>
+        types.push(
+          ...item.data.map((e: any) => e.businsessType || e.businessType)
+        )
+      )
+      const dic: any = {}
+      const defaultData: any = {}
+      const dimensions = [
         { name: 'name', displayName: '居委' },
-        { name: 'data1', displayName: '类型1' },
-        { name: 'data2', displayName: '类型2' },
-        { name: 'data3', displayName: '类型3' },
-        { name: 'data4', displayName: '类型4' },
-        { name: 'data5', displayName: '类型5' },
-      ],
-      source: [
-        {
-          name: '均乐',
-          data1: 100,
-          data2: 100,
-          data3: 100,
-          data4: 50,
-          data5: 50,
-        },
-        {
-          name: '振兴',
-          data1: 110,
-          data2: 110,
-          data3: 120,
-          data4: 10,
-          data5: 20,
-        },
-        {
-          name: '顺天村',
-          data1: 120,
-          data2: 130,
-          data3: 140,
-          data4: 30,
-          data5: 40,
-        },
-        {
-          name: '江阴',
-          data1: 130,
-          data2: 140,
-          data3: 160,
-          data4: 40,
-          data5: 60,
-        },
-        {
-          name: '新昌',
-          data1: 140,
-          data2: 150,
-          data3: 180,
-          data4: 50,
-          data5: 80,
-        },
-        {
-          name: '长江',
-          data1: 150,
-          data2: 160,
-          data3: 190,
-          data4: 60,
-          data5: 90,
-        },
-        {
-          name: '定兴',
-          data1: 150,
-          data2: 160,
-          data3: 190,
-          data4: 60,
-          data5: 90,
-        },
-        {
-          name: '三德',
-          data1: 150,
-          data2: 160,
-          data3: 190,
-          data4: 60,
-          data5: 90,
-        },
-      ],
+        ...Array.from(new Set(types)).map((item: string, i: number) => {
+          const name = `data${i + 1}`
+          dic[item] = name
+          defaultData[name] = 0
+          return {
+            name,
+            displayName: item,
+          }
+        }),
+      ]
+      return {
+        dimensions,
+        source: data.map((item: any) => {
+          const datas: { [key: string]: unknown } = {}
+          item.data.forEach((e: any) => {
+            datas[dic[e.businsessType || e.businessType]] = e.num || 0
+          })
+          return {
+            name: item.cmtName,
+            ...defaultData,
+            ...datas,
+          }
+        }),
+      }
     })
-    const barOption = ref({
+    const barOption = computed(() => ({
       color: ['#5BD5FF', '#6EB629', '#FFCE34', '#FF9D27', '#826AFA'],
       legend: {
+        left: '2%',
         right: '2%',
         itemWidth: fontSize.value * 0.6,
-        itemHeight: fontSize.value * 0.8,
+        itemHeight: fontSize.value * 0.6,
       },
+      grid: { top: '25%', right: '2%' },
       series: [
-        {
-          type: 'bar',
-          barWidth: '18%',
-          itemStyle: { borderRadius: 8 },
-          barGap: 0,
-          stack: '总量',
-        },
-        {
-          type: 'bar',
-          barWidth: '18%',
-          itemStyle: { borderRadius: 8 },
-          barGap: 0,
-          stack: '总量',
-        },
-        {
-          type: 'bar',
-          barWidth: '18%',
-          itemStyle: { borderRadius: 8 },
-          barGap: 0,
-          stack: '总量',
-        },
-      ],
+        ...new Array(barData.value.dimensions.length - 1 || 0).keys(),
+      ].map(() => ({
+        type: 'bar',
+        barWidth: '10%',
+        itemStyle: { borderRadius: 8 },
+        barGap: 0,
+        stack: '总量',
+      })),
+    }))
+
+    const pieData = computed(() => {
+      const data = store.state.dutyRank[curOption.value] || []
+      return {
+        dimensions: [
+          { name: 'name', displayName: '类型' },
+          { name: 'value', displayName: '数量' },
+        ],
+        source: data.map((item: any) => ({
+          name: item.businsessType,
+          value: item.num,
+        })),
+      }
     })
-    const pieData = ref({
-      dimensions: [
-        { name: 'name', displayName: '类型名称' },
-        { name: 'value', displayName: '数量' },
-      ],
-      source: [
-        { name: '事件类型1', value: 2939 },
-        { name: '事件类型2', value: 4261 },
-        { name: '事件类型3', value: 2204 },
-        { name: '事件类型4', value: 2086 },
-        { name: '事件类型5', value: 1910 },
-      ],
+    const total = computed(() => {
+      if (!pieData.value.source) return 0
+      return pieData.value.source.reduce((acc, cur) => acc + cur.value, 0)
     })
-    const total = pieData.value.source.reduce((acc, cur) => acc + cur.value, 0)
     const pieOption = ref({
       color: ['#00BFFF', '#FFCE34', '#826AFA', '#589C20', '#F47C1F'],
       legend: { show: false },
@@ -240,6 +223,7 @@ export default defineComponent({
     return {
       showChart,
       total,
+      curTab,
       tabs,
       options,
       curOption,
@@ -280,16 +264,19 @@ export default defineComponent({
           border-color @color
           background rgba(50,197,255,.2)
 .rank
-  flex 1
+  >div
+    max-height .6rem
+    overflow hidden
 .place
   .content
     display flex
     justify-content space-between
     >div
       width 32%
+      height .6rem
 .chart
   width 100%
-  height 1rem
+  height 1.2rem
 .duty-type
   width 100%
   height .6rem
@@ -304,7 +291,8 @@ export default defineComponent({
     flex 1
     font-size .09rem
     >div
-      width 33.3%
+      min-width 32%
+      margin-left .03rem
       p
         span
           width .06rem

src/view/right/duty.vue

 <template>
   <m-card title="勤务">
     <Brief class="brief" :list="summary" />
-    <Tabs class="tabs" :list="tabs" horizontal />
-    <div v-if="showTable" class="details">
-      <m-scroll :limit="4" :length="caseList.length" :step="1.1" mode="2">
-        <div v-for="(item, i) in caseList" :key="i" class="detail">
+    <Tabs class="tabs" :list="tabs" horizontal @select="curTab = $event" />
+    <div class="details">
+      <m-scroll
+        v-if="caseList.length > 0"
+        :limit="4"
+        :length="caseList.length"
+        :step="1.1"
+        mode="2"
+      >
+        <div v-for="item in caseList" :key="item.id" class="detail">
           <div class="title">
-            <p>{{ item.name }}</p>
+            <p>{{ item.communityName }}</p>
             <span />
-            <p>{{ item.type }}</p>
+            <p>
+              {{
+                item.businsessTypeLv1.split('-')[2] || item.troublePhenomenon
+              }}
+            </p>
           </div>
           <div class="msg">
             <p>{{ item.address }}</p>
-            <p>{{ item.date }}</p>
+            <p>{{ item.acceptTime }}</p>
           </div>
-          <m-step :steps="steps" :current="item.cur" />
+          <m-step :steps="steps" :current="steps.indexOf(item.phase)" />
         </div>
       </m-scroll>
+      <m-empty v-else />
     </div>
   </m-card>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
-import Brief, { BriefProp } from '../components/brief.vue'
+import { computed, defineComponent, ref, watch } from 'vue'
+import Brief from '../components/brief.vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
 import store from '@/store'
 import icon6 from '@/assets/images/icon6.png'
@@ -34,63 +45,55 @@ export default defineComponent({
   name: 'Duty',
   components: { Brief, Tabs },
   setup() {
-    const showTable = computed(() => store.state.curView.type !== 'street')
-    const summary = ref<BriefProp[]>([
-      {
-        name: '综合管理',
-        value: [36, 468],
-        icon: icon6,
-      },
-      {
-        name: '街面管理',
-        value: [64, 261],
-        icon: icon7,
-      },
-      {
-        name: '小区管理',
-        value: [57, 154],
-        icon: icon8,
-      },
-    ])
+    const summary = computed(() => {
+      const {
+        comprehensiveNum = 0,
+        comprehensiveEndNum = 0,
+        streetNum = 0,
+        streetEndNum = 0,
+        communityNum = 0,
+        communityEndNum = 0,
+      } = store.state.dutySum
+      return [
+        {
+          name: '综合管理',
+          value: [comprehensiveNum, comprehensiveEndNum],
+          icon: icon6,
+        },
+        {
+          name: '街面管理',
+          value: [streetNum, streetEndNum],
+          icon: icon7,
+        },
+        {
+          name: '小区管理',
+          value: [communityNum, communityEndNum],
+          icon: icon8,
+        },
+      ]
+    })
+    const curTab = ref('综合')
     const tabs = ref<TabsProp[]>([
-      { name: '综合管理', key: 'all' },
-      { name: '街面管理', key: 'street' },
-      { name: '小区管理', key: 'community' },
+      { name: '综合管理', key: '综合' },
+      { name: '街面管理', key: '街面' },
+      { name: '小区管理', key: '小区' },
     ])
     const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
-    const caseList = ref([
-      {
-        name: '均乐小区',
-        type: '电梯困人',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        date: '2020-02-13 13:23:08',
-        cur: 5,
+    const caseList = computed(() => store.state.dutyList)
+    watch(
+      [() => curTab.value, () => store.state.curView.id],
+      ([type, id]) => {
+        if (!id) return
+        store.dispatch('getDutyList', {
+          gridId: id,
+          managementType: type,
+        })
       },
-      {
-        name: '均乐小区',
-        type: '电梯困人',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        date: '2020-02-13 13:23:08',
-        cur: 4,
-      },
-      {
-        name: '均乐小区',
-        type: '电梯困人',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        date: '2020-02-13 13:23:08',
-        cur: 3,
-      },
-      {
-        name: '均乐小区',
-        type: '电梯困人',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        date: '2020-02-13 13:23:08',
-        cur: 2,
-      },
-    ])
+      { immediate: true }
+    )
     return {
-      showTable,
       summary,
+      curTab,
       tabs,
       caseList,
       steps,