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

src/ajax/api.ts

@@ -57,7 +57,7 @@ export default {
   GET_TODAYCASE: '/service-special-nandong/compair/willTouch', //  有求必应-今日案件数
   GET_STAGECASE: '/service-special-nandong/compair/willTouch/status', // 有求必应-各阶段案件数
   GET_WORKSTATION: '/service-special-nandong/compair/willTouch/workStation', // 有求必应-工作站分类
-  GET_TRACKEVENT: '/api/service-special-nandong/compairs', // 有求必应-事件跟踪
+  GET_TRACKEVENT: '/service-special-nandong/compairs', // 有求必应-事件跟踪
   GET_CASE_CLASSIFICATION_RANK: '/service-special-nandong/compair/analysis', // 案件分析-分类排行
-  GET_ADDR: '/service-special-nandong/compair/analysis/addr', // 案件分析-多发地点
+  GET_MOREHAPPEN_ADDR: '/service-special-nandong/compair/analysis/addr', // 案件分析-多发地点
 }

src/store/actions.ts

@@ -8,6 +8,7 @@ export default {
   initData({ dispatch }: { dispatch: Dispatch }): void {
     dispatch('getPropertySummary')
     dispatch('getCaseList')
+    // dispatch('GET_TODAYCASE')
   },
   // 物业三架马车数据 （缺交叉任职数）
   async getPropertySummary({ commit }: { commit: Commit }): Promise<void> {
@@ -456,6 +457,127 @@ export default {
         params,
       })
     ).data
+    // console.log(content, '有诉必答 - 紧急案件')
     commit('SET_URGENTCASE', content)
   },
+  async GET_TODAYCASE(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 有求必应 - 今日案件数
+    const { content } = (
+      await ajax.get({
+        url: api.GET_TODAYCASE,
+        params,
+      })
+    ).data
+    // console.log(content, '有求必应 - 今日案件数')
+    commit('SET_TODAYCASE', content)
+  },
+  async GET_STAGECASE(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 有求必应 - 各阶段案件数
+    const { content } = (
+      await ajax.get({
+        url: api.GET_STAGECASE,
+        params,
+      })
+    ).data
+    // console.log(content, '有求必应 - 各阶段案件数')
+    commit('SET_STAGECASE', content)
+  },
+  async GET_WORKSTATION(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 有求必应 - 工作站分类
+    const { content } = (
+      await ajax.get({
+        url: api.GET_WORKSTATION,
+        params,
+      })
+    ).data
+    // console.log(content, '有求必应 - 工作站分类')
+    commit('SET_WORKSTATION', content)
+  },
+  async GET_TRACKEVENT(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 有求必应 - 事件跟踪
+    const { content } = (
+      await ajax.get({
+        url: api.GET_TRACKEVENT,
+        params,
+      })
+    ).data
+    // console.log(content, '有求必应 - 事件跟踪')
+    commit('SET_TRACKEVENT', content)
+  },
+  async GET_CASE_CLASSIFICATION_RANK(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 案件分析 - 分类排行
+    const { content } = (
+      await ajax.get({
+        url: api.GET_CASE_CLASSIFICATION_RANK,
+        params,
+      })
+    ).data
+    console.log(content, '案件分析 - 分类排行')
+    commit('SET_CASE_CLASSIFICATION_RANK', content)
+  },
+  async GET_MOREHAPPEN_ADDR(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 案件分析 - 多发地点
+    const { content } = (
+      await ajax.get({
+        url: api.GET_MOREHAPPEN_ADDR,
+        params,
+      })
+    ).data
+    console.log(content, '案件分析 - 多发地点')
+    commit('SET_MOREHAPPEN_ADDR', content)
+  },
 }

src/store/index.ts

@@ -110,6 +110,12 @@ export interface GlobalStateProps {
   yousubidaRank: Partial<YousubidaRankProp>
   classificationRank: any[]
   urgentCase: any[]
+  todayCase: { [key: string]: number }
+  stageCase: { [key: string]: number }
+  workstationKind: { [key: string]: number }
+  trackEvent: any[]
+  analysisRank: Partial<DutyDataProp>
+  moreHappenAddr: Partial<DutyDataProp>
 }
 
 export default createStore<GlobalStateProps>({

src/store/mutations.ts

@@ -201,4 +201,40 @@ export default {
   SET_URGENTCASE(state: GlobalStateProps, data: unknown[]): void {
     state.urgentCase = data
   },
+  // 有求必应-今日案件数
+  SET_TODAYCASE(
+    state: GlobalStateProps,
+    data: { [key: string]: number }
+  ): void {
+    state.todayCase = data
+  },
+  // 有求必应-各阶段案件数
+  SET_STAGECASE(
+    state: GlobalStateProps,
+    data: { [key: string]: number }
+  ): void {
+    state.stageCase = data
+  },
+  // 有求必应-工作站分类
+  SET_WORKSTATION(
+    state: GlobalStateProps,
+    data: { [key: string]: number }
+  ): void {
+    state.workstationKind = data
+  },
+  // 有求必应-事件跟踪
+  SET_TRACKEVENT(state: GlobalStateProps, data: unknown[]): void {
+    state.trackEvent = data
+  },
+  // 有求必应-分类排行
+  SET_CASE_CLASSIFICATION_RANK(
+    state: GlobalStateProps,
+    data: DutyDataProp
+  ): void {
+    state.analysisRank = data
+  },
+  // 有求必应-多发地点
+  SET_MOREHAPPEN_ADDR(state: GlobalStateProps, data: DutyDataProp): void {
+    state.moreHappenAddr = data
+  },
 }

src/store/state.ts

@@ -205,4 +205,10 @@ export default {
   yousubidaRank: {},
   classificationRank: [],
   urgentCase: [],
+  todayCase: {},
+  stageCase: {},
+  workstationKind: {},
+  trackEvent: [],
+  analysisRank: { day: [], week: [], month: [] },
+  moreHappenAddr: { day: [], week: [], month: [] },
 } as GlobalStateProps

src/view/components/brief.vue

@@ -58,10 +58,11 @@ export default defineComponent({
 .brief-container
   display flex
   align-items center
+  white-space nowrap
   .count
-    font-size .12rem
+    font-size .11rem
     &.yellow
-      font-size .14rem
+      font-size .13rem
       color $yellow
   >div
     display flex

src/view/right/case-analysis.vue

@@ -2,29 +2,32 @@
   <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 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="4">
+          <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>
@@ -38,44 +41,98 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, computed, watch } from 'vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
 import SubTitle from '../components/sub-title.vue'
 import Place, { PlaceProp } from '../components/place.vue'
-
+import store from '@/store'
 export default defineComponent({
   name: 'CaseAnalysis',
   components: { Tabs, SubTitle, Place },
   setup() {
+    const todayCase = computed(() => store.state.todayCase)
+
+    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 placeList = ref<PlaceProp[]>([
-      { name: '延安东路1292弄', value: 3, type: '路段' },
-      { name: '延安东路1293弄', value: 5, type: '小区' },
-      { name: '延安东路1294弄', value: 8, type: '商业' },
+    const options = ref([
+      { name: '日', key: 'day' },
+      { name: '周', key: 'week' },
+      { name: '月', key: 'month' },
     ])
+    const curOption = ref('month')
+
+    watch(
+      [() => curTab.value, () => curOption.value],
+      ([type, time]) => {
+        if (!time || !type) return
+
+        console.log(type)
+        console.log(time)
+
+        store.dispatch('GET_CASE_CLASSIFICATION_RANK', {
+          managementType: type,
+        })
+        store.dispatch('GET_MOREHAPPEN_ADDR', {
+          managementType: type,
+        })
+      },
+      { immediate: true }
+    )
+
+    const rankList = computed(() => {
+      const data = store.state.analysisRank[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.moreHappenAddr[curOption.value] || []
+      return data.map((item: any) => ({
+        name: item.address,
+        value: item.num,
+        type: '路段',
+      }))
+    })
+
+    // const tabs = ref<TabsProp[]>([
+    //   {
+    //     key: 'all',
+    //     name: '综合管理',
+    //   },
+    //   {
+    //     key: 'street',
+    //     name: '街面管理',
+    //   },
+    //   {
+    //     key: 'community',
+    //     name: '小区管理',
+    //   },
+    // ])
+    // const options = ref(['日', '周', '月'])
+    // const curOption = ref('月')
+    // const rankList = ref([
+    //   { name: '分类1', value: 50 },
+    //   { name: '分类2', value: 31 },
+    //   { name: '分类3', value: 15 },
+    // ])
+    // const placeList = ref<PlaceProp[]>([
+    //   { name: '延安东路1292弄', value: 3, type: '路段' },
+    //   { name: '延安东路1293弄', value: 5, type: '小区' },
+    //   { name: '延安东路1294弄', value: 8, type: '商业' },
+    // ])
     return {
       tabs,
       options,
+      curTab,
       curOption,
       rankList,
       placeList,
@@ -91,7 +148,7 @@ export default defineComponent({
   display flex
   align-items center
   justify-content space-between
-  margin .05rem 0
+  margin 0.05rem 0
   >div
     width 75%
     &:last-child
@@ -99,20 +156,22 @@ export default defineComponent({
       display flex
       >span
         $center()
-        width .22rem
+        width 0.22rem
         height @width
         color $primary-border
-        border .01rem solid @color
+        border 0.01rem solid @color
         cursor pointer
-        &:hover
-        &.on
+        &:hover, &.on
           color $secondary-color
           border-color @color
-          background rgba(50,197,255,.2)
+          background rgba(50, 197, 255, 0.2)
 .rank
-  flex 1
+  min-height 1rem
+  .content
+    height 1rem
+    overflow hidden
 .place
-  margin .05rem 0
+  margin 0.05rem 0
   .content
     display flex
     justify-content space-between

src/view/right/complain.vue

@@ -33,21 +33,17 @@
       </div>
       <div class="emergency">
         <m-sub>紧急案件</m-sub>
-        <m-scroll :limit="1" :length="1" :step="1" mode="2">
-          <div
-            v-for="(item, i) in urgentCase.slice(0, 1)"
-            :key="item + i"
-            class="detail"
-          >
-            <div>
+        <m-scroll :limit="1" :length="urgentCase.length" :step="1" mode="2">
+          <div v-for="item in urgentCase" :key="item" class="detail">
+            <div class="title">
               <p>
                 {{ item.managementType }}管理 · {{ item.businsessTypeLv1 }} ·
                 {{ item.source }}
               </p>
               <span>{{ item.address }}</span>
             </div>
-            <div>
-              {{ item.reportContent }}
+            <div class="msg">
+              {{ item.reportContent || '暂无' }}
             </div>
           </div>
         </m-scroll>
@@ -60,6 +56,8 @@
 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'
+import moment from 'moment'
 import { ChartTypes } from '@/components/MyComponent'
 import store from '@/store'
 
@@ -72,15 +70,15 @@ export default defineComponent({
     store.dispatch('GET_URGENTCASE', {
       bxmaintainType: '1',
       status_in: '待派遣,已派单',
-      acceptTime_gte: '2021-04-16',
-      pageSize: 110,
+      acceptTime_gte: moment(new Date()).format('YYYY-MM-DD'),
+      pageSize: 1000,
     })
 
     const rank = computed(() => store.state.yousubidaRank)
     const classificationRank = computed(() => store.state.classificationRank)
     const urgentCase = computed(() => store.state.urgentCase)
 
-    console.log(urgentCase)
+    // console.log(urgentCase)
 
     const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
     const showChart = computed(() => store.state.curTheme === 'manage')
@@ -253,9 +251,9 @@ export default defineComponent({
 .box
   flex-direction column
   display flex
-  height 100%
+  height 97%
 .summary
-  height 8%
+  height 5%
   display flex
   justify-content space-between
   align-items center
@@ -272,15 +270,16 @@ export default defineComponent({
       p
         color #ccc
 .manage
+  flex 1
   display flex
-  height 60%
+  // height 60%
   // margin-bottom .05rem
   .content
     flex 1
     padding-left 0.1rem
     .chart
       width 100%
-      height 40%
+      height 44%
       &.wrapper
         display flex
         >div
@@ -308,7 +307,8 @@ export default defineComponent({
               &:nth-of-type(5) > span
                 background #32C5FF
 .emergency
-  height 25%
+  height 1.2rem
+  overflow hidden
   // overflow hidden
   .detail
     display flex
@@ -316,6 +316,8 @@ export default defineComponent({
     padding 0.1rem
     background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
     margin-bottom 0.05rem
+    height 0.95rem
+    box-sizing border-box
     >div
       flex 1
       &:first-child

src/view/right/demand.vue

 <template>
   <m-card title="有求必应">
     <div class="today-case">
-      <m-sub :addition="{ value: 157, unit: '件' }">今日案件数</m-sub>
+      <m-sub :addition="{ value: todayCase.totalNum, unit: '件' }">
+        今日案件数
+      </m-sub>
       <Brief :list="summary" />
       <div class="process">
         <img src="@/assets/images/arrow.png" />
@@ -35,18 +37,18 @@
     </div>
     <div class="case-follow">
       <m-sub search-able @search="searchCase">事件跟踪</m-sub>
-      <m-scroll :limit="1" :length="caseList.length" :step="1.1" mode="2">
-        <div v-for="(item, i) in caseList" :key="i" class="detail">
+      <m-scroll :limit="1" :length="trackEvent.length" :step="1.1" mode="2">
+        <div v-for="(item, i) in trackEvent" :key="i" class="detail">
           <div class="title">
-            <p>{{ item.name }}</p>
+            <p>{{ item.communityName || '暂无' }}</p>
             <span />
-            <p>{{ item.type }}</p>
+            <p>{{ item.businsessTypeLv1 }}</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="item.type" />
         </div>
       </m-scroll>
     </div>
@@ -60,56 +62,87 @@ import store from '@/store'
 import icon6 from '@/assets/images/icon6.png'
 import icon7 from '@/assets/images/icon7.png'
 import icon8 from '@/assets/images/icon8.png'
+import moment from 'moment'
 
 export default defineComponent({
   name: 'Demand',
   components: { Brief },
   setup() {
+    // dispatch('GET_TODAYCASE')
+    store.dispatch('GET_TODAYCASE')
+    store.dispatch('GET_STAGECASE')
+    store.dispatch('GET_WORKSTATION')
+    store.dispatch('GET_TRACKEVENT', {
+      status_in: '待处置,已签收',
+      acceptTime_gte: moment(new Date()).format('YYYY-MM-DD'),
+      pageSize: 1000,
+    })
+
+    const todayCase = computed(() => store.state.todayCase)
+    const stageCase = computed(() => store.state.stageCase)
+    const workstationKind = computed(() => store.state.workstationKind)
+    const trackEvent = computed(() => store.state.trackEvent)
+
+    // console.log(moment(new Date()).format('YYYY-MM-DD'))
+
     const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
     const showChart = computed(() => store.state.curTheme === 'manage')
-    const summary = ref<BriefProp[]>([
-      {
-        name: '综合管理',
-        value: [36, 468],
-        icon: icon6,
-      },
-      {
-        name: '街面管理',
-        value: [64, 261],
-        icon: icon7,
-      },
-      {
-        name: '小区管理',
-        value: [57, 154],
-        icon: icon8,
-      },
-    ])
-    const process = ref([
-      {
-        name: '发现',
-        value: 157,
-      },
-      {
-        name: '立案',
-        value: 106,
-      },
-      {
-        name: '派遣',
-        value: 95,
-      },
-      {
-        name: '结案',
-        value: 59,
-      },
-      {
-        name: '检查',
-        value: 64,
-      },
-      {
-        name: '处置',
-        value: 86,
-      },
-    ])
+    const summary = computed(() => {
+      return [
+        {
+          name: '综合管理',
+          value: [
+            todayCase.value.comprehensiveDisposalNum || 0,
+            todayCase.value.comprehensiveNum || 0,
+          ],
+          icon: icon6,
+        },
+        {
+          name: '街面管理',
+          value: [
+            todayCase.value.streetDisposalNum || 0,
+            todayCase.value.streetNum || 0,
+          ],
+          icon: icon7,
+        },
+        {
+          name: '小区管理',
+          value: [
+            todayCase.value.communityDisposalNum || 0,
+            todayCase.value.communityNum || 0,
+          ],
+          icon: icon8,
+        },
+      ]
+    })
+    const process = computed(() => {
+      return [
+        {
+          name: '发现',
+          value: stageCase.value.discoveryNum || 0,
+        },
+        {
+          name: '立案',
+          value: stageCase.value.recordNum || 0,
+        },
+        {
+          name: '派遣',
+          value: stageCase.value.dispatchNum || 0,
+        },
+        {
+          name: '结案',
+          value: stageCase.value.endNum || 0,
+        },
+        {
+          name: '检查',
+          value: stageCase.value.checkNum || 0,
+        },
+        {
+          name: '处置',
+          value: stageCase.value.disposalNum || 0,
+        },
+      ]
+    })
     const barData = ref({
       dimensions: [
         { name: 'date', displayName: '日期' },
@@ -145,26 +178,34 @@ export default defineComponent({
         stack: '总量',
       })),
     })
-    const pieData = ref([
-      {
-        name: '第一工作站',
-        value: 80,
-        num: 87,
-        color: '#47B3FF',
-      },
-      {
-        name: '第二工作站',
-        value: 75,
-        num: 72,
-        color: '#FF9D27',
-      },
-      {
-        name: '第三工作站',
-        value: 30,
-        num: 27,
-        color: '#6EB629',
-      },
-    ])
+    const pieData = computed(() => {
+      return [
+        {
+          name: '第一工作站',
+          value:
+            workstationKind.value.oneDisposalNum /
+              workstationKind.value.oneNum || 0,
+          num: workstationKind.value.oneDisposalNum || 0,
+          color: '#47B3FF',
+        },
+        {
+          name: '第二工作站',
+          value:
+            workstationKind.value.twoDisposalNum /
+              workstationKind.value.twoNum || 0,
+          num: workstationKind.value.twoDisposalNum || 0,
+          color: '#FF9D27',
+        },
+        {
+          name: '第三工作站',
+          value:
+            workstationKind.value.threeDisposalNum /
+              workstationKind.value.threeNum || 0,
+          num: workstationKind.value.threeDisposalNum || 0,
+          color: '#6EB629',
+        },
+      ]
+    })
     const pieSeries = pieData.value.map((item, i) => {
       const rate = Math.round((pieData.value.length - i) * fontSize.value) + 10
       const borderWidth = fontSize.value * 0.6
@@ -205,36 +246,36 @@ export default defineComponent({
       series: pieSeries,
     })
     const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
-    const caseList = ref([
-      {
-        name: '均乐小区',
-        type: '电梯困人',
-        address: '上海市黄浦区延安东路1292弄6~40号',
-        date: '2020-02-13 13:23:08',
-        cur: 5,
-      },
-      {
-        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,
-      },
-    ])
+    // const caseList = ref([
+    //   {
+    //     name: '均乐小区',
+    //     type: '电梯困人',
+    //     address: '上海市黄浦区延安东路1292弄6~40号',
+    //     date: '2020-02-13 13:23:08',
+    //     cur: 5,
+    //   },
+    //   {
+    //     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,
+    //   },
+    // ])
     const searchCase = (key: string) => {
       console.log('searck key: ', key)
     }
@@ -247,8 +288,10 @@ export default defineComponent({
       pieData,
       pieOption,
       steps,
-      caseList,
+      // caseList,
       searchCase,
+      todayCase,
+      trackEvent,
     }
   },
 })
@@ -259,7 +302,7 @@ export default defineComponent({
 $arrow-style()
   display block
   content ''
-  width .2rem
+  width 0.2rem
   height @width
   background url('@/assets/images/arrow.png') 100% / 100% 100% no-repeat
   position absolute
@@ -269,11 +312,11 @@ $arrow-style()
   margin auto
   transform translate(-90%, 0)
 .process
-  margin-top .1rem
+  margin-top 0.1rem
   position relative
   >img
     position absolute
-    width .2rem
+    width 0.2rem
     height @width
     right 13.3%
     top 0
@@ -284,7 +327,7 @@ $arrow-style()
     display flex
     align-items center
     justify-content space-around
-    margin-bottom .15rem
+    margin-bottom 0.15rem
     &:nth-of-type(1)
       div+div
         &::before
@@ -297,15 +340,14 @@ $arrow-style()
     >div
       background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
       width 28%
-      padding .05rem 0
+      padding 0.05rem 0
       text-align center
       font-weight bold
       position relative
       .count
-        font-size .12rem
+        font-size 0.12rem
       p
         color #ccc
-
 .chart
   width 100%
   height 1.1rem
@@ -321,13 +363,13 @@ $arrow-style()
         p
           display flex
           align-items center
-          margin-bottom .05rem
+          margin-bottom 0.05rem
           span
             display inline-block
-            width .06rem
+            width 0.06rem
             height @width
             border-radius 50%
-            margin-right .1rem
+            margin-right 0.1rem
 .case-follow
   height 1.2rem
   overflow hidden
@@ -335,28 +377,28 @@ $arrow-style()
   display flex
   flex-direction column
   justify-content space-between
-  padding .1rem
+  padding 0.1rem
   background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
   height 1rem
-  margin-bottom .1rem
+  margin-bottom 0.1rem
   box-sizing border-box
   .title
     display flex
     align-items center
     p
-      font-size .12rem
+      font-size 0.12rem
       &:last-child
         color $edge
-        font-size .1rem
+        font-size 0.1rem
     span
       display block
-      height .01rem
+      height 0.01rem
       background $blue
       flex 1
-      margin 0 .1rem
+      margin 0 0.1rem
   .msg
     $center()
     justify-content space-between
     color $blue
-    font-size .08rem
+    font-size 0.08rem
 </style>