公共管理饼图调整

src/store/actions.ts

@@ -532,6 +532,7 @@ export default {
     ).data
     // console.log(content, '有求必应 - 工作站分类')
     commit('SET_WORKSTATION', content)
+    commit('SET_WORKSTATION_PIEDATA', content[0].statistical)
   },
   async GET_TRACKEVENT(
     {

src/store/index.ts

@@ -114,7 +114,8 @@ export interface GlobalStateProps {
   urgentCase: any[]
   todayCase: { [key: string]: number }
   stageCase: { [key: string]: number }
-  workstationKind: { [key: string]: number }
+  workstationKind: any[]
+  workstationKindPiEData: { [key: string]: any }
   trackEvent: any[]
   analysisRank: Partial<DutyDataProp>
   moreHappenAddr: Partial<DutyDataProp>

src/store/mutations.ts

@@ -222,11 +222,14 @@ export default {
     state.stageCase = data
   },
   // 有求必应-工作站分类
-  SET_WORKSTATION(
+  SET_WORKSTATION(state: GlobalStateProps, data: any[]): void {
+    state.workstationKind = data
+  },
+  SET_WORKSTATION_PIEDATA(
     state: GlobalStateProps,
-    data: { [key: string]: number }
+    data: { [key: string]: any }
   ): void {
-    state.workstationKind = data
+    state.workstationKindPiEData = data
   },
   // 有求必应-事件跟踪
   SET_TRACKEVENT(state: GlobalStateProps, data: unknown[]): void {

src/store/state.ts

@@ -209,7 +209,8 @@ export default {
   urgentCase: [],
   todayCase: {},
   stageCase: {},
-  workstationKind: {},
+  workstationKind: [],
+  workstationKindPiEData: {},
   trackEvent: [],
   analysisRank: { day: [], week: [], month: [] },
   moreHappenAddr: { day: [], week: [], month: [] },

src/view/right/case-analysis.vue

 <template>
-  <m-card title="案件分析">
+  <m-card title="案件分析" class="box">
     <div class="nav">
       <div>
         <Tabs :list="tabs" horizontal @select="curTab = $event" />
@@ -111,12 +111,15 @@ export default defineComponent({
 
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
-.nav
+.box
+  overflow hidden
+  .nav
     width 100%
+    overflow hidden
     display flex
     align-items center
     justify-content space-between
-  margin 0.05rem 0
+    margin-top 0.05rem
     >div
       width 75%
       &:last-child
@@ -133,13 +136,14 @@ export default defineComponent({
             color $secondary-color
             border-color @color
             background rgba(50, 197, 255, 0.2)
-.rank
+  .rank
     overflow hidden
+    // height 1rem
     .content
-    height 1rem
+      height 1.2rem
+      overflow hidden
+  .place
     overflow hidden
-.place
-  margin 0.05rem 0
     .content
       display flex
       justify-content space-between

src/view/right/complain.vue

@@ -254,8 +254,9 @@ export default defineComponent({
 .box
   flex-direction column
   display flex
-  height 97%
-.summary
+  height 95%
+  overflow hidden
+  .summary
     height 5%
     display flex
     justify-content space-between
@@ -272,10 +273,9 @@ export default defineComponent({
           font-weight bold
         p
           color #ccc
-.manage
-  flex 1
+  .manage
     display flex
-  // height 60%
+    height 70%
     // margin-bottom .05rem
     .content
       flex 1
@@ -314,7 +314,7 @@ export default defineComponent({
                   flex 4
                   &:last-child
                     flex 1
-.emergency
+  .emergency
     height 1.2rem
     overflow hidden
     // overflow hidden

src/view/right/demand.vue

@@ -25,12 +25,14 @@
       </div>
       <div class="chart wrapper">
         <div v-if="showChart">
-          <m-pie :option="pieOption" />
+          <m-pie :option="pieOption" :dataset="pieData" />
         </div>
         <div>
           <p v-for="item in pieData" :key="item.name">
             <span :style="{ background: item.color }" />
-            {{ item.name }}： {{ item.value }}% &nbsp;&nbsp;{{ item.num }}
+            {{ item.name }}： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
+              item.value
+            }}% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.num }}
           </p>
         </div>
       </div>
@@ -56,7 +58,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent, watch, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
 import store from '@/store'
 import icon6 from '@/assets/images/icon6.png'
@@ -81,6 +83,7 @@ export default defineComponent({
     const todayCase = computed(() => store.state.todayCase)
     const stageCase = computed(() => store.state.stageCase)
     const workstationKind = computed(() => store.state.workstationKind)
+    const pieDatamodel = computed(() => store.state.workstationKindPiEData)
     const trackEvent = computed(() => store.state.trackEvent)
 
     // console.log(moment(new Date()).format('YYYY-MM-DD'))
@@ -203,64 +206,28 @@ export default defineComponent({
       })),
     })
     const pieData = computed(() => {
-      if (workstationKind.value[0]) {
-        return [
-          {
-            name: '第一工作站',
-            value:
-              (
-                (workstationKind.value[0].statistical.oneDisposalNum /
-                  workstationKind.value[0].statistical.oneNum) *
-                100
-              ).toFixed(0) || 0,
-            num: workstationKind.value[0].statistical.oneDisposalNum || 0,
-            color: '#47B3FF',
-          },
-          {
-            name: '第二工作站',
-            value:
-              (
-                (workstationKind.value[0].statistical.twoDisposalNum /
-                  workstationKind.value[0].statistical.twoNum) *
-                100
-              ).toFixed(0) || 0,
-            num: workstationKind.value[0].statistical.twoDisposalNum || 0,
-            color: '#FF9D27',
-          },
-          {
-            name: '第三工作站',
-            value:
-              (
-                (workstationKind.value[0].statistical.threeDisposalNum /
-                  workstationKind.value[0].statistical.threeNum) *
-                100
-              ).toFixed(0) || 0,
-            num: workstationKind.value[0].statistical.threeDisposalNum || 0,
-            color: '#6EB629',
-          },
-        ]
-      } else {
+      console.log(pieDatamodel.value)
+
       return [
         {
           name: '第一工作站',
-            value: 0,
-            num: 0,
+          value: 8,
+          num: pieDatamodel.value.oneNum,
           color: '#47B3FF',
         },
         {
           name: '第二工作站',
-            value: 0,
-            num: 0,
+          value: 9,
+          num: pieDatamodel.value.twoNum,
           color: '#FF9D27',
         },
         {
           name: '第三工作站',
-            value: 0,
-            num: 0,
+          value: 8,
+          num: pieDatamodel.value.threeNum,
           color: '#6EB629',
         },
       ]
-      }
     })
     const pieSeries = pieData.value.map((item, i) => {
       const rate = Math.round((pieData.value.length - i) * fontSize.value) + 10
@@ -306,6 +273,50 @@ export default defineComponent({
     const searchCase = (key: string) => {
       console.log('searck key: ', key)
     }
+    // watch(
+    //   [() => workstationKind.value, () => showChart.value],
+    //   ([arr, show]) => {
+    //     if (!show) return
+    //     if (arr[0]) {
+    //       pieData.value = [
+    //         {
+    //           name: '第一工作站',
+    //           value:
+    //             (
+    //               (arr[0].statistical.oneDisposalNum /
+    //                 arr[0].statistical.oneNum) *
+    //               100
+    //             ).toFixed(0) || 0,
+    //           num: arr[0].statistical.oneDisposalNum,
+    //           color: '#47B3FF',
+    //         },
+    //         {
+    //           name: '第二工作站',
+    //           value:
+    //             (
+    //               (arr[0].statistical.twoDisposalNum /
+    //                 arr[0].statistical.twoNum) *
+    //               100
+    //             ).toFixed(0) || 0,
+    //           num: arr[0].statistical.twoNum,
+    //           color: '#FF9D27',
+    //         },
+    //         {
+    //           name: '第三工作站',
+    //           value:
+    //             (
+    //               (arr[0].statistical.threeDisposalNum /
+    //                 arr[0].statistical.threeNum) *
+    //               100
+    //             ).toFixed(0) || 0,
+    //           num: arr[0].statistical.threeDisposalNum,
+    //           color: '#6EB629',
+    //         },
+    //       ]
+    //     }
+    //   },
+    //   { immediate: true }
+    // )
     return {
       summary,
       showChart,
@@ -319,6 +330,7 @@ export default defineComponent({
       searchCase,
       todayCase,
       trackEvent,
+      workstationKind,
     }
   },
 })
@@ -338,7 +350,8 @@ $arrow-style()
   bottom 0
   margin auto
   transform translate(-90%, 0)
-.process
+.today-case
+  .process
     margin-top 0.1rem
     position relative
     >img
@@ -375,7 +388,7 @@ $arrow-style()
           font-size 0.12rem
         p
           color #ccc
-.chart
+  .chart
     width 100%
     height 1.1rem
     &.wrapper
@@ -384,12 +397,15 @@ $arrow-style()
         width 50%
         height 100%
         font-weight bold
+        // border 1px solid red
         &:last-child
           $center()
           flex-direction column
           p
             display flex
+            width 100%
             align-items center
+            // border 1px solid red
             margin-bottom 0.05rem
             span
               display inline-block

src/view/right/key-task.vue

 <template>
-  <m-card title="重点工作">
-    <div v-if="showChart" id="cloud" class="box"></div>
+  <m-card title="重点工作" class="box">
+    <div v-if="showChart" id="cloud" class=""></div>
   </m-card>
 </template>
 
@@ -164,7 +164,7 @@ export default defineComponent({
 
 <style lang="stylus" scoped>
 .box
-  height 95%
+  height 2rem
   width 100%
   box-sizing border-box
   overflow hidden

src/view/right/public-manage.vue

@@ -39,8 +39,10 @@ export default defineComponent({
     width 33%
     .first-child
       flex 1
+      // height 50%
     .second-child
       height 2rem
+      // height 32%
     .third-child
       height 0.8rem
 </style>