有诉必答接口完成

src/ajax/api.ts

@@ -51,7 +51,8 @@ export default {
 
   /** 公共管理 */
   GET_YOUSUBIDA_RANK: '/service-special-nandong/compair/willReach', // 有诉必答-占比
-  GET_YOUSUBIDA_CLASSIFICATION_RANK: '/service-special-nandong/public/c', // 有诉必答-分类排行
+  GET_YOUSUBIDA_CLASSIFICATION_RANK:
+    '/service-special-nandong/compair/willReach/ranking', // 有诉必答-分类排行
   GET_URGENTCASE: '/service-special-nandong/compairs', //  有诉必答-紧急案件
   GET_TODAYCASE: '/service-special-nandong/compair/willTouch', //  有求必应-今日案件数
   GET_STAGECASE: '/service-special-nandong/compair/willTouch/status', // 有求必应-各阶段案件数

src/ajax/axios.ts

@@ -11,7 +11,7 @@ Axios.interceptors.request.use(
   (config) => {
     // 添加token
     config.headers.Authorization =
-      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4NTQ4MjY1LCJqdGkiOiJhMzM3YTJlMy0xOThiLTQ3ZGUtYjQ0Zi03MWE5OWU4YTUzMGUiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTg1NDEwNjU5NzB9.Yt7LzQ_izQxqFdpaaElHX-ZJaLcky3j3y68jPQOo2Rq8pQPO9cYXSAjpKfNvOWTfZzL9fs110JUbY_u0qmtWB_lzP5-VRIIVFDuSArh6YJ5FARN3g_HT82aPvfDq6JkV3epw3d8PIA7GJlg0BE2NqR6AxpEyOKCGflGHG35E6KubYpku7xAGlPHgkOB2jjEl5e-Lxgmcqis5UVzXHtfAbm8lra68A_jNkn3y2SiZme4i6kISeGPqmxcwRdnANci_QkRzCTvY2uE4Qy-IpQ1XxgMBAyZVCjr4T0FlOhxOVhgweytu9-_QKBYmpNAg1K3AksrCIpfaHXckwcG6vAaBow'
+      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMiIsImp0aSI6IjdiMWQ3ODRhLWY2ZjEtNGM5ZS1iYTRlLWJhM2FiMDNkYzRiZCIsImVuYWJsZSI6dHJ1ZSwiY2xpZW50X2lkIjoic3NvIiwidGltZXN0YW1wIjoxNjE4NDYzMzQ5NTY4LCJzY29wZSI6WyJyZWFkIiwid3JpdGUiLCJ0cnVzdCJdfQ.JnyKdHUPFIrb4CWZg2JyoU8JTXGZvWVN2kQNYnhKj-vBBt7eAmmJ9I3JqYBC2MieAF-qiNPvJDO0_pL54Ko2xZ0JpeflXMbr5GMqKoozNiZYcNdqsN8AWew4PPKTGr7gcdGQEO1_eLtTXvwnGVTiAP8vqPpLGFaKs282yWc9tdDp1976RjEEi4Knb5VEbnHiW1oyyCZ3WPGHCjO7M6s7iNNh0inA5Af-r7JZNTNL89gEH1lj3dEHReiPMylnwMCi4F5oOY4er6PNIkIjEoA0ydEpaC4YyEhbXGHrXKUsXZxQc8XoS99PLdVumWreDq6KCuZis-qm_T_lfFTTp1gmJA'
     return config
   },
   (error) => {

src/store/actions.ts

@@ -8,7 +8,6 @@ export default {
   initData({ dispatch }: { dispatch: Dispatch }): void {
     dispatch('getPropertySummary')
     dispatch('getCaseList')
-    // dispatch('GET_YOUSUBIDA_RANK')
   },
   // 物业三架马车数据 （缺交叉任职数）
   async getPropertySummary({ commit }: { commit: Commit }): Promise<void> {
@@ -419,7 +418,45 @@ export default {
   async GET_YOUSUBIDA_RANK({ commit }: { commit: Commit }): Promise<void> {
     // 有诉必答 - 占比
     const { content } = (await ajax.get({ url: api.GET_YOUSUBIDA_RANK })).data
-    console.log(content, '有诉必答 - 占比')
+    // console.log(content, '有诉必答 - 占比')
     commit('SET_YOUSUBIDA_RANK', content)
   },
+  async GET_YOUSUBIDA_CLASSIFICATION_RANK(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    managementType: string
+  ): Promise<void> {
+    // 有诉必答 - 分类排行
+    const { content } = (
+      await ajax.get({
+        url: api.GET_YOUSUBIDA_CLASSIFICATION_RANK,
+        params: { managementType: managementType },
+      })
+    ).data
+    // console.log(content, '有诉必答 - 分类排行')
+    commit('SET_YOUSUBIDA_CLASSIFICATION_RANK', content)
+  },
+  async GET_URGENTCASE(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 有诉必答 - 紧急案件
+    const { content } = (
+      await ajax.get({
+        url: api.GET_URGENTCASE,
+        params,
+      })
+    ).data
+    console.log(content, '有诉必答 - 紧急案件')
+    commit('SET_URGENTCASE', content)
+  },
 }

src/store/index.ts

@@ -102,6 +102,8 @@ export interface GlobalStateProps {
 
   /** 公共管理 */
   yousubidaRank: Partial<YousubidaRankProp>
+  classificationRank: any[]
+  urgentCase: any[]
 }
 export default createStore<GlobalStateProps>({
   state,

src/store/mutations.ts

@@ -7,6 +7,7 @@ import {
   CombineProp,
   DutySumProp,
   DutyDataProp,
+  YousubidaRankProp,
 } from './index'
 
 export default {
@@ -182,7 +183,19 @@ export default {
     state.dutyRanking = data
   },
   /** 公共管理 */
-  SET_YOUSUBIDA_RANK(state: GlobalStateProps, data: DutySumProp): void {
+  // 有诉必答-占比
+  SET_YOUSUBIDA_RANK(state: GlobalStateProps, data: YousubidaRankProp): void {
     state.yousubidaRank = data
   },
+  // 有诉必答-分类排行
+  SET_YOUSUBIDA_CLASSIFICATION_RANK(
+    state: GlobalStateProps,
+    data: unknown[]
+  ): void {
+    state.classificationRank = data
+  },
+  // 有诉必答-紧急案件
+  SET_URGENTCASE(state: GlobalStateProps, data: unknown[]): void {
+    state.urgentCase = data
+  },
 }

src/store/state.ts

@@ -44,4 +44,6 @@ export default {
   dutyPlaces: { day: [], week: [], month: [] },
   dutyRanking: { day: [], week: [], month: [] },
   yousubidaRank: {},
+  classificationRank: [],
+  urgentCase: [],
 } as GlobalStateProps

src/view/right/complain.vue

 <template>
   <m-card title="有诉必答">
-    <div class="summary">
+    <div class="box">
+      <div v-if="Object.keys(rank).length > 0" class="summary">
         <div v-for="item in summary" :key="item.name">
           <m-wave :value="item.percent" size=".34rem" />
           <div>
@@ -10,7 +11,7 @@
         </div>
       </div>
       <div class="manage">
-      <Tabs :list="tabList" />
+        <Tabs :list="tabList" @select="getCurTabKey" />
         <div class="content">
           <SubTitle>响应度</SubTitle>
           <div v-if="showChart" class="chart">
@@ -32,21 +33,31 @@
       </div>
       <div class="emergency">
         <m-sub>紧急案件</m-sub>
-      <div class="detail">
+        <m-scroll :limit="1" :length="1" :step="1" mode="2">
+          <div
+            v-for="item in urgentCase.slice(0, 1)"
+            :key="item"
+            class="detail"
+          >
             <div>
-          <p>综合管理 · 事件分类 · 来源</p>
-          <span>上海市黄浦区北京东路31-91号益丰·外滩源</span>
+              <p>
+                {{ item.managementType }}管理 · {{ item.businsessTypeLv1 }} ·
+                {{ item.source }}
+              </p>
+              <span>{{ item.address }}</span>
             </div>
             <div>
-          内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述
+              {{ item.reportContent }}
+            </div>
           </div>
+        </m-scroll>
       </div>
     </div>
   </m-card>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue'
+import { defineComponent, ref, computed, watch } from 'vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
 import SubTitle from '../components/sub-title.vue'
 import { ECOption } from '@/components/MyComponent/MyChart/my-line.vue'
@@ -57,48 +68,138 @@ export default defineComponent({
   components: { Tabs, SubTitle },
   setup() {
     store.dispatch('GET_YOUSUBIDA_RANK')
+    store.dispatch('GET_YOUSUBIDA_CLASSIFICATION_RANK', '综合')
+    store.dispatch('GET_URGENTCASE', {
+      bxmaintainType: '1',
+      status_in: '待派遣,已派单',
+      acceptTime_gte: '2021-04-16',
+      pageSize: 110,
+    })
+
     const rank = computed(() => store.state.yousubidaRank)
+    const classificationRank = computed(() => store.state.classificationRank)
+    const urgentCase = computed(() => store.state.urgentCase)
+
+    console.log(urgentCase)
 
     const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
     const showChart = computed(() => store.state.curTheme === 'manage')
 
     const summary = computed(() => {
-      console.log(rank.value.comprehensiveDispatchNum)
-      console.log(rank.value.communityNum)
-      console.log(rank.value.streetDispatchNum)
-
+      // console.log(rank.value.streetDispatchNum)
+      // console.log(rank.value.streetNum)
+      // console.log(rank.value.streetDispatchNum / rank.value.streetNum)
       return [
         {
           name: '街面管理',
           value: rank.value.streetDispatchNum,
-          percent: 60,
+          percent: parseInt(
+            (rank.value.streetDispatchNum / rank.value.streetNum) * 100
+          ),
         },
         {
           name: '综合管理',
-          value: 56,
-          percent: 30,
+          value: rank.value.communityNum,
+          percent:
+            (rank.value.comprehensiveDispatchNum /
+              rank.value.comprehensiveNum) *
+            100,
         },
         {
           name: '小区管理',
-          value: 85,
-          percent: 78,
+          value: rank.value.communityDispatchNum,
+          percent: parseInt(
+            (rank.value.communityDispatchNum / rank.value.communityNum) * 100
+          ),
         },
       ]
     })
+
     const tabList = ref<TabsProp[]>([
       {
-        key: 'all',
+        key: '综合',
         name: '综合管理',
       },
       {
-        key: 'street',
+        key: '街面',
         name: '街面管理',
       },
       {
-        key: 'community',
+        key: '小区',
         name: '小区管理',
       },
     ])
+    const tabKey = ref('综合')
+
+    const getCurTabKey = (item: string) => {
+      tabKey.value = item
+      store.dispatch('GET_YOUSUBIDA_CLASSIFICATION_RANK', item)
+    }
+    const classChartData = ref({
+      dimensions: [
+        { name: 'class1', displayName: '分类1', max: 500 },
+        { name: 'class2', displayName: '分类2', max: 500 },
+        { name: 'class3', displayName: '分类3', max: 500 },
+        { name: 'class4', displayName: '分类4', max: 500 },
+        { name: 'class5', displayName: '分类5', max: 500 },
+      ],
+      source: [
+        {
+          seriesName: '分类排行',
+          class1: 250,
+          class2: 200,
+          class3: 200,
+          class4: 300,
+          class5: 230,
+        },
+      ],
+    })
+
+    // 监听年份切花更改检查楼数  隐患点数 危险点数
+    watch(
+      [() => classificationRank.value, () => tabKey.value],
+      ([data, key]) => {
+        // console.log(data, key)
+        if (data.length === 0) return
+
+        const dimensions = [
+          { name: 'class1', displayName: '分类1', max: 100 },
+          { name: 'class2', displayName: '其他', max: 100 },
+          { name: 'class3', displayName: '其他', max: 100 },
+          { name: 'class4', displayName: '其他', max: 100 },
+          { name: 'class5', displayName: '其他', max: 100 },
+        ]
+
+        const source = [
+          {
+            seriesName: '分类排行',
+            class1: 0,
+            class2: 0,
+            class3: 0,
+            class4: 0,
+            class5: 0,
+          },
+        ]
+
+        let max = data[0].num
+        for (let i = 0; i < data.length - 1; i++) {
+          max = max < data[i + 1].num ? data[i + 1].num : max
+        }
+
+        data.forEach((item, index) => {
+          dimensions[index].displayName = item.businsessType
+          dimensions[index].max = max
+          source[0]['class' + ++index] = item.num
+        })
+
+        classChartData.value = {
+          dimensions,
+          source,
+        }
+      },
+      { immediate: true }
+    )
+
     const responseChartData = ref({
       dimensions: [
         { name: 'name', displayName: '坐标名' },
@@ -123,25 +224,7 @@ export default defineComponent({
         itemHeight: fontSize.value * 0.8,
       },
     })
-    const classChartData = ref({
-      dimensions: [
-        { name: 'class1', displayName: '分类1', max: 500 },
-        { name: 'class2', displayName: '分类2', max: 500 },
-        { name: 'class3', displayName: '分类3', max: 500 },
-        { name: 'class4', displayName: '分类4', max: 500 },
-        { name: 'class5', displayName: '分类5', max: 500 },
-      ],
-      source: [
-        {
-          seriesName: '分类排行',
-          class1: 250,
-          class2: 200,
-          class3: 200,
-          class4: 300,
-          class5: 230,
-        },
-      ],
-    })
+
     const chartOption2 = ref({
       color: ['#FF9D27'],
       legend: { show: false },
@@ -158,6 +241,8 @@ export default defineComponent({
       classChartData,
       chartOption2,
       rank,
+      urgentCase,
+      getCurTabKey,
     }
   },
 })
@@ -165,11 +250,17 @@ export default defineComponent({
 
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
+.box
+  flex-direction column
+  display flex
+  height 100%
 .summary
+  height 8%
   display flex
   justify-content space-between
   align-items center
   margin-top 0.1rem
+  margin-bottom 0.1rem
   >div
     display flex
     align-items center
@@ -189,7 +280,7 @@ export default defineComponent({
     padding-left 0.1rem
     .chart
       width 100%
-      height 43%
+      height 40%
       &.wrapper
         display flex
         >div
@@ -217,7 +308,8 @@ export default defineComponent({
               &:nth-of-type(5) > span
                 background #32C5FF
 .emergency
-  overflow hidden
+  height 25%
+  // overflow hidden
   .detail
     display flex
     flex-direction column

src/view/right/key-task.vue

@@ -52,6 +52,7 @@ export default defineComponent({
         '电梯加装',
         '居改非',
         '无证无照整治',
+        '楼道堆物',
       ]
 
       const data = []