小区屏接口基本完成

src/ajax/axios.ts

@@ -11,7 +11,7 @@ Axios.interceptors.request.use(
   (config) => {
     // 添加token
     config.headers.Authorization =
-      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMCIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4MzEwOTAxLCJqdGkiOiI5ZTJhNTBiYy0wM2VlLTRiYzAtOTE5ZC1iMmFiZTViNGEyMDMiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTgzMDM3MDEzMTd9.VJSxP0r6E0osthNMnIr5t-HWXtbNmLVkWRF4ZS_9HmwD5qkqAp1mge5Imni8dVpvQ686EbSt4QFLIvzgFY7rGAC0EQvq5VsTghUdtb7uyaRc-YnzTDEWCyXpirgk75Uq53MFkJh82kUlAYlNvsBEA9YPoepL51Rj8BeERA32_mj8KA70AzFEKzfHYVCNcLy0CQ6Q5CVa5UTwINGtieRhpdbBOXCL3FheB65wX8JRh1y4pJGMAS-kpwJgt-uqx9eEavWUICPEsRsAiaZ-RTWRfazM1B6fvLals9NvNnDPdjybUm62AcZrzC5QZNuOBsq0uSkIt-n9Ygkc8DoKgGRVwA'
+      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMCIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4Mzg1MjgxLCJqdGkiOiI5ZTEyOTE0Zi1lNWJlLTRiZjktOTY4Zi0yYzk3ZjMwNmM0OWQiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTgzNzgwODE2MTR9.PZQbXEaYoKqhZbpvan4rSCJNCJwYRr2Y9fAp_bj3l5FpAORHp6QDDHIBcFfdbQtBEOBOIFhqhji5DicD2-wJeqgEczfEUnWI_XGVTkw-aWBx7Qh4JTOeXOV2Gp1n_mY2tv4xGopoIOdfT2V9U19HyPJ25AtB0NZBzSxNfQtIw5Lt7PJX-jQf_W3b_N5U3cbU7qXtiGZSs-YxnoU-d65cXTIkODW5sU61jBg0RRAtBXeSlyznCrdTqrYIESp3ZgXUs7ie4MUxGurzNBDVCgplP6GRyLU1bQZlgxIi4ZnJPwxFKLMjIdko6JB6soNGIQu4WLyx3acK4zZo14Uk4_F8WQ'
     return config
   },
   (error) => {

src/components/MyComponent/MyScroll/my-scroll.vue

@@ -64,7 +64,7 @@ export default defineComponent({
       () => props.length <= 100 && props.length >= props.limit
     )
     const start = () => {
-      if (!props.length) {
+      if (!props.length && props.length !== 0) {
         console.error('MyScroll 需要length参数！')
         return
       }

src/store/actions.ts

@@ -35,12 +35,10 @@ export default {
   },
 
   /** 小区屏 */
-  initCommunityData(
-    { dispatch }: { dispatch: Dispatch },
-    query: { id: string }
-  ): void {
-    dispatch('getCommunityInfo', query)
-    dispatch('getIssueList', query)
+  initCommunityData({ dispatch }: { dispatch: Dispatch }, id: string): void {
+    dispatch('getCommunityInfo', id)
+    dispatch('getIssueList', id)
+    dispatch('getCombineList', id)
   },
   async getCommunityInfo({ commit }: { commit: Commit }): Promise<void> {
     const { content } = (await ajax.get({ url: api.GET_COMMUNITY_INFO })).data
@@ -48,14 +46,26 @@ export default {
   },
   async getIssueList(
     { commit }: { commit: Commit },
-    query: { id: string }
+    id: string
   ): Promise<void> {
     const { content } = (
       await ajax.get({
         url: api.GET_ISSUE_LIST,
-        params: { bigscreenCommunityId: query.id },
+        params: { bigscreenCommunityId: id },
       })
     ).data
     commit('SET_ISSUE_DATA', content)
   },
+  async getCombineList(
+    { commit }: { commit: Commit },
+    id: string
+  ): Promise<void> {
+    const { content } = (
+      await ajax.get({
+        url: api.GET_COMBINE_LIST,
+        params: { bigscreenCommunityId: id },
+      })
+    ).data
+    commit('SET_COMBINE_DATA', content)
+  },
 }

src/store/index.ts

@@ -27,6 +27,14 @@ export interface IssueProp {
   orderlyScore: number //有序
   totalScore: number //综合评分
 }
+
+export interface CombineProp {
+  cleanList: { [key: string]: any }[]
+  securityList: { [key: string]: any }[]
+  orderlyList: { [key: string]: any }[]
+  [key: string]: { [key: string]: any }[]
+}
+
 export interface GlobalStateProps {
   showLoading: boolean
   curView: ViewType
@@ -37,6 +45,7 @@ export interface GlobalStateProps {
   stationList: unknown[]
   communityInfo: Partial<CommunityInfoProp>
   issueData: IssueProp[]
+  combineData: CombineProp
 }
 export default createStore<GlobalStateProps>({
   state,

src/store/mutations.ts

@@ -4,6 +4,7 @@ import {
   ViewType,
   CommunityInfoProp,
   IssueProp,
+  CombineProp,
 } from './index'
 
 export default {
@@ -35,4 +36,7 @@ export default {
   SET_ISSUE_DATA(state: GlobalStateProps, data: IssueProp[]): void {
     state.issueData = data
   },
+  SET_COMBINE_DATA(state: GlobalStateProps, data: CombineProp): void {
+    state.combineData = data
+  },
 }

src/store/state.ts

@@ -15,4 +15,5 @@ export default {
   stationList: [],
   communityInfo: {},
   issueData: [],
+  combineData: { cleanList: [], securityList: [], orderlyList: [] },
 } as GlobalStateProps

src/view/community.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
+import { 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'
@@ -47,18 +47,12 @@ export default defineComponent({
   components: { LeftSection, RightSection },
   setup() {
     const loading = ref(true)
-    const initData = (id: string | null) => {
-      store.dispatch('initCommunityData', {
-        id: id || '527635870583459840',
-      })
+    const initData = (id: unknown) => {
+      store.dispatch('initCommunityData', id || '527635870583459840')
     }
-    watch(
-      () => useRoute().query,
-      (cur) => {
-        // initData(cur.id)
-      },
-      { deep: true }
-    )
+    onMounted(() => {
+      initData(useRoute().query.id)
+    })
     store.commit('SET_CURRENT_VIEW', { name: '', type: 'community' }) // 使标题不显示公共的3个按钮
     const map = ref<any>(null)
     const initMap = () => {

src/view/community/combine.vue

@@ -3,34 +3,41 @@
     <div class="tabs">
       <span
         v-for="tab in tabs"
-        :key="tab"
-        :class="{ on: curTab === tab }"
-        @click="curTab = tab"
+        :key="tab.key"
+        :class="{ on: curTab === tab.key }"
+        @click="curTab = tab.key"
       >
-        {{ tab }}
+        {{ tab.name }}
       </span>
     </div>
     <div class="card-container">
-      <m-scroll :length="list.length" :mode="2" :limit="5" :step="1.25">
+      <m-scroll
+        v-if="list.length > 0"
+        :length="list.length"
+        :mode="2"
+        :limit="5"
+        :step="1.25"
+      >
         <div v-for="(item, i) in list" :key="i" class="card">
           <div class="title">
-            {{ item.name }}
+            {{ item.bigscreenCommunityName }}
             <span />
-            <p>{{ item.type }}</p>
+            <p>{{ item.troublePhenomenon }}</p>
           </div>
           <div class="info">
             <p>{{ item.address }}</p>
-            <p>{{ item.date }}</p>
+            <p>{{ item.acceptTime }}</p>
           </div>
-          <Step :current="item.cur" :steps="steps" />
+          <Step :current="steps.indexOf(item.phase)" :steps="steps" />
         </div>
       </m-scroll>
+      <m-empty v-else style="height:5rem;" />
     </div>
   </m-card>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import Step from '../components/step.vue'
 import store from '@/store'
 
@@ -38,68 +45,74 @@ export default defineComponent({
   name: 'Combine',
   components: { Step },
   setup() {
-    const curTab = ref('安全')
-    const list = ref([
-      {
-        name: '振兴小区',
-        type: '电梯困人',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        date: '2020-03-13 13:23:08',
-        cur: 2,
-      },
-      {
-        name: '振兴小区',
-        type: '电梯困人',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        date: '2020-03-13 13:23:08',
-        cur: 3,
-      },
-      {
-        name: '振兴小区',
-        type: '电梯困人',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        date: '2020-03-13 13:23:08',
-        cur: 4,
-      },
-      {
-        name: '振兴小区',
-        type: '电梯困人',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        date: '2020-03-13 13:23:08',
-        cur: 5,
-      },
-      {
-        name: '振兴小区',
-        type: '电梯困人',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        date: '2020-03-13 13:23:08',
-        cur: 2,
-      },
-      {
-        name: '振兴小区',
-        type: '电梯困人',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        date: '2020-03-13 13:23:08',
-        cur: 3,
-      },
-      {
-        name: '振兴小区',
-        type: '电梯困人',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        date: '2020-03-13 13:23:08',
-        cur: 4,
-      },
-      {
-        name: '振兴小区',
-        type: '电梯困人',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        date: '2020-03-13 13:23:08',
-        cur: 5,
-      },
+    const curTab = ref('securityList')
+    const tabs = ref([
+      { key: 'securityList', name: '安全' },
+      { key: 'cleanList', name: '干净' },
+      { key: 'orderlyList', name: '有序' },
     ])
+    const list = computed(() => store.state.combineData[curTab.value] || [])
+    // const list = ref([
+    //   {
+    //     name: '振兴小区',
+    //     type: '电梯困人',
+    //     address: '上海市黄浦区延安东路1292弄6~40号',
+    //     date: '2020-03-13 13:23:08',
+    //     cur: 2,
+    //   },
+    //   {
+    //     name: '振兴小区',
+    //     type: '电梯困人',
+    //     address: '上海市黄浦区延安东路1292弄6~40号',
+    //     date: '2020-03-13 13:23:08',
+    //     cur: 3,
+    //   },
+    //   {
+    //     name: '振兴小区',
+    //     type: '电梯困人',
+    //     address: '上海市黄浦区延安东路1292弄6~40号',
+    //     date: '2020-03-13 13:23:08',
+    //     cur: 4,
+    //   },
+    //   {
+    //     name: '振兴小区',
+    //     type: '电梯困人',
+    //     address: '上海市黄浦区延安东路1292弄6~40号',
+    //     date: '2020-03-13 13:23:08',
+    //     cur: 5,
+    //   },
+    //   {
+    //     name: '振兴小区',
+    //     type: '电梯困人',
+    //     address: '上海市黄浦区延安东路1292弄6~40号',
+    //     date: '2020-03-13 13:23:08',
+    //     cur: 2,
+    //   },
+    //   {
+    //     name: '振兴小区',
+    //     type: '电梯困人',
+    //     address: '上海市黄浦区延安东路1292弄6~40号',
+    //     date: '2020-03-13 13:23:08',
+    //     cur: 3,
+    //   },
+    //   {
+    //     name: '振兴小区',
+    //     type: '电梯困人',
+    //     address: '上海市黄浦区延安东路1292弄6~40号',
+    //     date: '2020-03-13 13:23:08',
+    //     cur: 4,
+    //   },
+    //   {
+    //     name: '振兴小区',
+    //     type: '电梯困人',
+    //     address: '上海市黄浦区延安东路1292弄6~40号',
+    //     date: '2020-03-13 13:23:08',
+    //     cur: 5,
+    //   },
+    // ])
     return {
       steps: ['发现', '立案', '派遣', '处置', '核查', '结案'],
-      tabs: ['安全', '干净', '有序'],
+      tabs,
       curTab,
       list,
     }

src/view/community/left-section.vue

@@ -73,7 +73,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
+import { 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'
@@ -95,7 +95,6 @@ export default defineComponent({
   name: 'LeftSection',
   components: { Brief },
   setup() {
-    const basicData = computed(() => store.state.communityInfo)
     const summary = ref<BriefProp[]>([])
     const buildingList = ref<unknown[]>([])
     const curBuilding = ref<string | null>(null)
@@ -103,7 +102,7 @@ export default defineComponent({
     const addrList = ref([])
 
     watch(
-      () => basicData.value,
+      () => store.state.communityInfo,
       (cur) => {
         const {
           totCommunity = 0,
@@ -123,10 +122,11 @@ export default defineComponent({
           { name: '为老设施', value: totForOld, icon: p6 },
         ]
         buildingList.value = communityList
-        curBuilding.value = communityList && communityList[0].sectId
+        curBuilding.value =
+          (communityList[0] && communityList[0].sectId) || null
         selectBuilding(curBuilding.value)
       },
-      { deep: true }
+      { deep: true, immediate: true }
     )
     const getColor = (type: string): string => {
       switch (type) {
@@ -162,7 +162,7 @@ export default defineComponent({
           return '业委会成员'
       }
     }
-    async function selectBuilding(id: string | undefined): Promise<void> {
+    async function selectBuilding(id: string | null): Promise<void> {
       if (!id) return
       curBuilding.value = id
       addrList.value = (

src/view/community/manage-issue.vue

@@ -54,54 +54,71 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watchEffect } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { ChartTypes } from '@/components/MyComponent'
 import Circle from '../components/circle.vue'
 import store from '@/store'
+import dayjs from 'dayjs'
 
 export default defineComponent({
   name: 'ManageIssue',
   components: { Circle },
   setup() {
-    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({
+    const data = ref()
+    watch(
+      () => store.state.issueData,
+      (issueData) => {
+        if (!issueData || issueData.length === 0) return
+        const {
+          securityScore = 0,
+          cleanScore = 0,
+          orderlyScore = 0,
+          totalScore = 0,
+        } = issueData && issueData[0]
+        counts.value = [
+          { name: '安全', value: securityScore },
+          { name: '干净', value: cleanScore },
+          { name: '有序', value: orderlyScore },
+        ]
+        totalValue.value = totalScore
+        data.value = {
           dimensions: [
             { name: 'date', displayName: '日期' },
             { name: 'securityScore', displayName: '安全' },
             { name: 'cleanScore', displayName: '干净' },
             { name: 'orderlyScore', displayName: '有序' },
           ],
-      source: issueData.value,
+          source: issueData.map((item: any) =>
+            Object.assign({}, item, {
+              date: item.date && dayjs(item.date).format('MMDD'),
             })
+          ),
+        }
+      },
+      { deep: true, immediate: true }
+    )
+    const getColor = (count: number) => {
+      if (count <= 60) return '#FF9C15'
+      if (count < 90) return '#FFE211'
+      else return '#19FF2B'
+    }
     const option = ref<ChartTypes.LineOption>({
       color: [
-        ['#1EFBFF', '#0094FF'],
-        ['#7F72F5', '#C86DD7'],
-        ['#FAD961', '#F76B1C'],
+        '#0094FF',
+        '#7F72F5',
+        '#F76B1C',
+        // ['#1EFBFF', '#0094FF'],
+        // ['#7F72F5', '#C86DD7'],
+        // ['#FAD961', '#F76B1C'],
       ],
       legend: { right: '5%' },
       xAxis: { axisLabel: { interval: 0 } },
+      yAxis: {
+        min: (value: any) => value.min - 2,
+        max: 100,
+      },
     })
     const issues = ref([
       { name: '绿化面积㎡', value: 658 },