完善页面

src/assets/css/reset.styl

 $color-main = #5BD5FF
 
-#app
+#html
   .date-picker.ivu-date-picker
     .ivu-select-dropdown
       margin-top -0.1rem
     .ivu-date-picker-cells-cell-disabled
       background rgba(0,0,0,0.3)
-  .ivu-select-selection
+  .ivu-select-selection,
+  .ivu-select-placeholder
     height 100%
+    font-size .9rem
+    line-height 1.5
     >div
       height 100%
       .ivu-select-selected-value
         height 100%
-        font-size 1rem
+        font-size .9rem
         font-weight bold
-        line-height 2
+        line-height 1.5
+        color #fff
   .ivu-select-selection
   .ivu-select-dropdown
-    font-size 1rem
+    font-size .9rem
     background-color $cardBg
     border-radius 0
-    border 0.1rem solid $color-main
+    border none
+    // border 0.1rem solid $color-main
     // color $color-main
     color $edgeColor
     padding 0
     .ivu-picker-panel-body
       $blur()
   .ivu-select-arrow
-    color $color-main
-    line-height 2
-    font-size 1rem
+    // color $color-main
+    color #fff
+    line-height 1.5
+    font-size .9rem
   .ivu-select-item
   .ivu-dropdown-item
-    font-size 1rem !important
+    font-size .9rem !important
     text-align center
-    color #fff
+    color #ccc
     background rgba(0,0,0,0.8)
     // &:hover
     &.ivu-select-item-selected
-      color $edgeColor
+      // color $edgeColor
+      color #fff
       font-weight bold

src/components/MonitorComponents/MonitorCard/mode5.vue

@@ -28,7 +28,7 @@ export default {
 
 <style lang="stylus" scoped>
 .card-wrapper
-  padding 1rem !important
+  padding 1rem 1rem 0 !important
   background $cardBg
   .card-title
     display flex

src/components/MonitorComponents/MonitorChart/monitor-chart.vue

@@ -311,6 +311,10 @@ export default {
         },
         tooltip: {
           trigger: 'axis',
+          confine: true,
+          textStyle: {
+            fontSize: this.fontSize,
+          },
           axisPointer: {
             type: 'shadow'
           },
@@ -365,7 +369,10 @@ export default {
       }
     },
     fontSize() {
-      return Math.floor(screen.height * 1.48 / 100)
+      return 12 * this.sizeRate
+    },
+    sizeRate() {
+      return Number((screen.height / 800).toFixed(1))
     },
     borderWidth() {
       return this.fontSize * 0.6

src/components/MonitorComponents/MonitorCount/monitor-count.vue

 <template>
 <ICountUp
   :delay="delay"
-  :endVal="value"
+  :endVal="+value"
   :options="config"
   @ready="onReady"
   :style="style"
@@ -79,7 +79,7 @@ export default {
       if (!this.autoUpdate) return
       setTimeout(() => {
         instance.reset()
-        instance.update(instance.endVal)
+        instance.update(+instance.endVal)
       }, 1000 * 60 * this.updateDuration)
     },
   }

src/server/api.js

@@ -15,6 +15,13 @@ export default {
   POST_RECTIFY: '/propertyinspector/api/v1/sharingplatform/sectListForOneDay',
   POST_PHONE: '/gis/api/v1/datav/lscreen/todayPhone',
   POST_SEAT: '/gis/api/v1/datav/lscreen/zxqk',
-  POST_REPAIR: '/realtimeshare/api/v1/getRepairNum',
-  POST_MAINTAINER: '/gis/api/v1/getMaintenanceList',
+  POST_REPAIR_NUM: '/realtimeshare/api/v1/getRepairNum',
+  POST_MAINTAINER: '/realtimeshare/api/v1/getMaintenanceList',
+  GET_SMART_INFO: '/gis/api/v1/sensor/alarm/count',
+  POST_TASK_LIST: '/gis/api/v1/disasterDefense/getTaskList',
+  POST_DISASTER_INFO: '/gis/api/v1/disasterDefense/getSummaryInformationNum',
+  POST_DISASTER_COMMUNITY: '/gis/api/v1/disasterDefense/getRightSectNum',
+  POST_DISTRICT_COMMUNITY: '/gis/api/v1/sectResultForHpb',
+  POST_COMMUNITY_TYPE: '/gis/api/v1/sectTypeResult',
+  POST_SUMMARY_INFO: '/gis/api/v1/statisticsResult',
 }

src/store/actions.js

@@ -12,13 +12,21 @@ export default {
     dispatch('getCommunity')
     dispatch('getRectify')
     dispatch('getPhone')
+    dispatch('getSeat')
+    dispatch('getRepairNum')
+    dispatch('getMaintainer')
+    dispatch('setSmartInfo')
+    dispatch('setTaskList')
+    dispatch('setDistrictCommunity')
+    dispatch('setCommunityType')
+    dispatch('setSummaryInfo')
   },
-  getCommunityHealth({commit}) {
+  getCommunityHealth({commit}) { // 小区健康度
     ajax.get({url: api.GET_COMMUNITY_HEALTH}).then(res => {
       commit('SET_COMMUNITY_HEALTH', confirm(res, 'data.avg', 0))
     })
   },
-  getTheme({commit}) {
+  getTheme({commit}) { // 检查主题数
     ajax.post({
       url: api.POST_THEME,
       params: {
@@ -30,7 +38,7 @@ export default {
       commit('SET_THEME', +confirm(res, 'data.totalRows', 0))
     })
   },
-  getChecker({commit}) {
+  getChecker({commit}) { // 检查人数
     const today = moment().format('YYYY-MM-DD')
     ajax.post({
       url: api.POST_CHECKER,
@@ -42,7 +50,7 @@ export default {
       commit('SET_CHECKER', +confirm(res, 'data.totalRows', 0))
     })
   },
-  getCommunity({commit}) {
+  getCommunity({commit}) { // 检查小区数
     ajax.post({
       url: api.POST_COMMUNITY,
       params: {
@@ -54,7 +62,7 @@ export default {
       commit('SET_COMMUNITY', +confirm(res, 'data.totalRows', 0))
     })
   },
-  getRectify({commit}) {
+  getRectify({commit}) { // 整改单数
     ajax.post({
       url: api.POST_RECTIFY,
       params: {
@@ -66,10 +74,82 @@ export default {
       commit('SET_RECTIFY', +confirm(res, 'data.totalRows', 0))
     })
   },
-  getPhone({commit}) {
+  getPhone({commit}) { // 当日接通/来点数，及连通率
     ajax.post({url: api.POST_PHONE}).then(res => {
-      const {ANSWERS, CALLS} = confirm(res, 'data.content.0', {ANSWERS: 0, CALLS: 0})
-      commit('SET_PHONE', [ANSWERS, CALLS])
+      const {ANSWERS, CALLS, RATE} = confirm(res, 'data.content.0', {ANSWERS: 0, CALLS: 0, RATE: 0})
+      commit('SET_PHONE', [+ANSWERS, +CALLS])
+      commit('SET_LINK_RATE', +RATE)
     })
+  },
+  getSeat({commit}) { // 排队/坐席人数
+    ajax.post({url: api.POST_SEAT}).then(res => {
+      const {CALLQUEUINGS, SEATCOUNT} = confirm(res, 'data.content.0', {CALLQUEUINGS: 0, SEATCOUNT: 0})
+      commit('SET_SEAT', [+CALLQUEUINGS, +SEATCOUNT])
+    })
+  },
+  getRepairNum({commit}) { // 保修单数量
+    ajax.post({url: api.POST_REPAIR_NUM}).then(res => {
+      const {REPAIREORDRERCOUNT} = confirm(res, 'data.content.0', {REPAIREORDRERCOUNT: 0})
+      commit('SET_REPAIR_NUM', +REPAIREORDRERCOUNT)
+    })
+  },
+  getMaintainer({commit}) { // 在线维修工数量
+    ajax.post({url: api.POST_MAINTAINER}).then(res => {
+      commit('SET_MAINTAINER_NUM', +confirm(res, 'data.totalRows', 0))
+    })
+  },
+  setSmartInfo({commit}) { // 智能感知应用场景数据
+    ajax.get({url: api.GET_SMART_INFO}).then(res => {
+      commit('SET_SMART_INFO', confirm(res, 'data.content', []))
+    })
+  },
+  setTaskList({commit, dispatch}) { // 灾情应用场景下拉选项列表
+    ajax.post({
+      url: api.POST_TASK_LIST,
+      params: {pageSize: 10000},
+    }).then(res => {
+      const result = confirm(res, 'data.content', [])
+      commit('SET_TASK_LIST', result)
+      if (result.length > 0) {
+        dispatch('setDisasterInfo', result[0].TASKID)
+        dispatch('setDisasterCommunity', result[0].TASKID)
       }
+    })
+  },
+  setDisasterInfo({commit}, id) { // 根据场景id查询灾情数据
+    ajax.post({
+      url: api.POST_DISASTER_INFO,
+      params: {
+        type: '3',
+        pageSize: 10000,
+        taskId: id,
+      },
+    }).then(res => {
+      commit('SET_DISASTER_INFO', confirm(res, 'data.content', []))
+    })
+  },
+  setDisasterCommunity({commit}, id) { // 根据场景id查询灾情受灾小区数
+    ajax.post({
+      url: api.POST_DISASTER_COMMUNITY,
+      params: {taskId: id},
+    }).then(res => {
+      const {SEVERENUM, SLIGHTNUM} = confirm(res, 'data.content', {SEVERENUM: 0, SLIGHTNUM: 0})
+      commit('SET_DISASTER_COMMUNITY', [+SEVERENUM, +SLIGHTNUM])
+    })
+  },
+  setDistrictCommunity({commit}) { // 各行政区住宅小区汇总
+    ajax.post({url: api.POST_DISTRICT_COMMUNITY}).then(res => {
+      commit('SET_DISTRICT_COMMUNITY', confirm(res, 'data.content', []))
+    })
+  },
+  setCommunityType({commit}) { // 住宅小区类型分布
+    ajax.post({url: api.POST_COMMUNITY_TYPE}).then(res => {
+      commit('SET_COMMUNITY_TYPE', confirm(res, 'data.content', []))
+    })
+  },
+  setSummaryInfo({commit}) { // 小区数、物业企业数等汇总信息
+    ajax.post({url: api.POST_SUMMARY_INFO}).then(res => {
+      commit('SET_SUMMARY_INFO', confirm(res, 'data.content.0', {}))
+    })
+  },
 }

src/store/mutations.js

@@ -23,4 +23,37 @@ export default {
   SET_PHONE(state, val) {
     state.phone = val
   },
+  SET_LINK_RATE(state, val) {
+    state.linkRate = val
+  },
+  SET_SEAT(state, val) {
+    state.seat = val
+  },
+  SET_REPAIR_NUM(state, val) {
+    state.repairNum = val
+  },
+  SET_MAINTAINER_NUM(state, val) {
+    state.maintainerNum = val
+  },
+  SET_SMART_INFO(state, data) {
+    state.smartInfo = data
+  },
+  SET_TASK_LIST(state, data) {
+    state.taskList = data
+  },
+  SET_DISASTER_INFO(state, data) {
+    state.disasterInfo = data
+  },
+  SET_DISASTER_COMMUNITY(state, val) {
+    state.disasterCommunity = val
+  },
+  SET_DISTRICT_COMMUNITY(state, data) {
+    state.districtCommunity = data
+  },
+  SET_COMMUNITY_TYPE(state, data) {
+    state.communityType = data
+  },
+  SET_SUMMARY_INFO(state, data) {
+    state.summaryInfo = data
+  }
 }

src/store/state.js

@@ -7,4 +7,15 @@ export default {
   community: 0,
   rectify: 0,
   phone: [0, 0],
+  linkRate: 0,
+  seat: [0, 0],
+  repairNum: 0,
+  maintainerNum: 0,
+  smartInfo: [],
+  taskList: [],
+  disasterInfo: [],
+  disasterCommunity: [0, 0],
+  districtCommunity: [],
+  communityType: [],
+  summaryInfo: {},
 }

src/views/community-summary.vue

 <template>
   <div class="community-summary">
+    <template v-if="list.length > 0">
     <div>
       <div v-for="item in list.slice(0, 8)" :key="item.name">
         <img src="@/assets/images/location.png"/>
@@ -14,34 +15,23 @@
         <b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
       </div>
     </div>
+    </template>
   </div>
 </template>
 
 <script>
 export default {
   name: 'CommunitySummary',
-  data() {
+  computed: {
+    list() {
+      return this.$store.state.districtCommunity.map(item => {
         return {
-      list: [
-        {name: '浦东新区', value: 2790},
-        {name: '静安区', value: 828},
-        {name: '徐汇区', value: 983},
-        {name: '杨浦区', value: 933},
-        {name: '虹口区', value: 780},
-        {name: '嘉定区', value: 636},
-        {name: '松江区', value: 704},
-        {name: '金山区', value: 243},
-        {name: '黄浦区', value: 811},
-        {name: '普陀区', value: 709},
-        {name: '长宁区', value: 775},
-        {name: '闵行区', value: 1071},
-        {name: '宝山区', value: 813},
-        {name: '青浦区', value: 412},
-        {name: '奉贤区', value: 356},
-        {name: '崇明区', value: 149},
-      ]
+          name: item.HPB_NAME,
+          value: item.SECT_NUM,
+        }
+      })
+    }
   }
-  },
 }
 </script>
 
@@ -55,7 +45,7 @@ export default {
       display flex
       align-items center
       padding 0 .5rem
-      line-height 1.8
+      line-height 1.7
       &:nth-child(2n+1)
         background $black
       p
@@ -63,6 +53,6 @@ export default {
         width 40%
         margin 0 .5rem
       img
-        width 1rem
-        height 1.2rem
+        width .8rem
+        height .9rem
 </style>

src/views/community-type.vue

 <template>
   <div class="community-type">
     <m-chart :config="config" :data="data"/>
+    <div class="legend">
+      <div v-for="(item, i) in data" :key="item.name">
+        <span :style="`background:${config.colors[i]}`"/>
+        <p>{{item.name}}</p>
+        <b><m-count :value="item.value" :decimal="0"/></b>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,22 +18,29 @@ export default {
     return {
       config: {
         colors: ['#0091ff', '#583eff', '#f7b500', '#6dd401'],
-        legend: {
-          align: 'right',
-          orient: 'vertical',
-        },
+        legend: {hide: true},
+        // legend: {
+        //   align: 'right',
+        //   orient: 'vertical',
+        // },
         shape: [
-          {type: 'pie', startAngle: -30, radius: [0, 50 * Number((screen.height / 800).toFixed(1))], center: ['35%', '50%']}
+          {type: 'pie', startAngle: -30, radius: [0, 50 * Number((screen.height / 800).toFixed(1))], center: ['30%', '50%']}
         ],
       },
-      data: [
-        {name: '商品房', value: 7931},
-        {name: '直管公房', value: 1793},
-        {name: '混合', value: 962},
-        {name: '其他', value: 2831},
-      ]
     }
   },
+  computed: {
+    data() {
+      const {communityType} = this.$store.state
+      if (communityType.length === 0) return []
+      return [
+        {name: '商品房', value: +communityType.find(item => item.ST_KIND === '商品房').KINDNUMBER || 0},
+        {name: '直管公房', value: +communityType.find(item => item.ST_KIND === '直管公房').KINDNUMBER || 0},
+        {name: '混合', value: +communityType.find(item => item.ST_KIND === '混合').KINDNUMBER || 0},
+        {name: '其他', value: communityType.filter(item => item.ST_KIND !== '商品房' && item.ST_KIND !== '直管公房' && item.ST_KIND !== '混合').reduce((acc, cur) => acc + (+cur.KINDNUMBER || 0), 0)},
+      ]
+    },
+  }
 }
 </script>
 
@@ -34,4 +48,23 @@ export default {
   .community-type
     width 100%
     height 100%
+    position relative
+    .legend
+      position absolute
+      right 0
+      top 50%
+      transform translateY(-50%)
+      width 45%
+      >div
+        display flex
+        align-items center
+        margin .5rem 0
+        >span
+          width 1rem
+          height @width
+        >p
+          color $light-blue
+          width 5rem
+          margin 0 .5rem
+
 </style>

src/views/disaster.vue

 <template>
   <div class="disaster">
+    <div class="select-wrapper">
+      <Select @on-change="handleSelect" :value="selectedValue" class="disaster-select" transfer>
+        <template v-if="taskList.length > 0">
+        <Option v-for="option in taskList" :key="option.TASKID" :value="option.TASKID">{{option.TASKNAME}}</Option>
+        </template>
+      </Select>
+    </div>
     <div class="info">
-      <p><span>严重灾情小区</span><m-count :value="153" :decimal="0" style="color:#D82B2B;fontSize:1.2rem;"/></p>
-      <p><span>轻微灾情小区</span><m-count :value="1079" :decimal="0" style="color:#f7b500;fontSize:1.2rem;"/></p>
+      <p><span>严重灾情小区</span><m-count :value="disasterCommunity[0]" :decimal="0" style="color:#D82B2B;font-weight:bold;font-size:1.2rem;"/></p>
+      <p><span>轻微灾情小区</span><m-count :value="disasterCommunity[1]" :decimal="0" style="color:#f7b500;font-weight:bold;font-size:1.2rem;"/></p>
     </div>
     <div class="chart-wrapper">
-      <m-chart :config="config" :data="data" />
+      <m-chart ref="chart" :config="config" :data="data" :options="{xAxis}"/>
     </div>
   </div>
 </template>
 
 <script>
+import {mapState, mapActions} from 'vuex'
 export default {
   name: 'Disaster',
   data() {
     return {
+      value: null,
       config: {
         colors: ['#0388ef'],
         legend: {
@@ -22,7 +31,8 @@ export default {
         },
         yAxis: {
           axisLabel: {show: false},
-          max: 600,
+          max: value => Math.round(value.max + value.max / 5 + 1),
+          min: 0,
         },
         shape: [
           {key: 'value', type: 'bar', barWidth: '30%', label: {show: true, position: 'top', color: '#fff'}},
@@ -31,29 +41,70 @@ export default {
           key: 'name',
         },
       },
-      data: [
-        {name: '空中坠物', value: 102},
-        {name: '树木倒伏', value: 494},
-        {name: '小区积水', value: 209},
-        {name: '车库进水', value: 43},
-        {name: '人员受伤', value: 6},
-      ],
+      xAxis: {
+        axisLabel: {
+          interval: 0,
+          fontSize: 11 * Number((screen.height / 800).toFixed(1)),
+          textStyle: {
+            color: '#D4F0FF',
+          },
         }
       },
+    }
+  },
+  computed: {
+    ...mapState([
+      'taskList',
+      'disasterInfo',
+      'disasterCommunity',
+    ]),
+    selectedValue() {
+      return this.value || (this.taskList[0] && this.taskList[0].TASKID)
+    },
+    data() {
+      if (this.disasterInfo.length === 0) return []
+      return this.disasterInfo.map(item => {
+        return {
+          name: item.CHKQUOTASEQNAME,
+          value: +item.VALUE,
+        }
+      })
+    },
+  },
+  methods: {
+    ...mapActions([
+      'setDisasterInfo',
+      'setDisasterCommunity',
+    ]),
+    handleSelect(id) {
+      this.setDisasterInfo(id)
+      this.setDisasterCommunity(id)
+      this.value = id
+      this.$refs.chart.init()
+    },
+  },
 }
 </script>
-
 <style lang="stylus" scoped>
 .disaster
   height 100%
   overflow hidden
+  display flex
+  flex-direction column
+  .select-wrapper
+    display flex
+    justify-content flex-end
+    .disaster-select
+      width auto
   .info
     display flex
     align-items center
     justify-content space-around
     color $light-blue
+    font-size 1rem
     span
       margin-right .5rem
   .chart-wrapper
-    height 90%
+    // height 75%
+    flex 1
 </style>

src/views/hotline.vue

@@ -2,22 +2,23 @@
   <div class="hotline">
     <div>
       <i-circle
-        :size="100 * sizeRate"
+        :size="95 * sizeRate"
         :trail-width="8 * sizeRate"
         :stroke-width="8 * sizeRate"
-        :percent="75"
+        :percent="linkRate"
         stroke-linecap="square"
         trail-color="#6d7a5f"
         stroke-color="#82DF12">
         <div>
           <p>连通率</p>
-          <b><m-count style="font-size:1.6rem;" :value="88" :decimal="0"/>%</b>
+          <b><m-count style="font-size:1.6rem;" :value="linkRate" :decimal="0"/>%</b>
         </div>
       </i-circle>
     </div>
     <div>
       <div v-for="item in list" :key="item.title" class="info">
         <p>{{item.title}}</p>
+        <div>
           <template v-if="Array.isArray(item.count)">
             <m-count :value="item.count[0]" :decimal="0"/> / <m-count :value="item.count[1]" :decimal="0"/>
           </template>
@@ -25,6 +26,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -33,7 +35,11 @@ export default {
   name: 'Hotline',
   computed: {
     ...mapState([
-      'phone'
+      'phone',
+      'linkRate',
+      'seat',
+      'repairNum',
+      'maintainerNum',
     ]),
     sizeRate() {
       return Number((screen.height / 800).toFixed(1))
@@ -41,9 +47,9 @@ export default {
     list() {
       return [
         {title: '当日接通/来电', count: this.phone},
-        {title: '排队/坐席人数', count: [0, 67]},
-        {title: '报修单数量', count: 1867},
-        {title: '在线维修工', count: 57},
+        {title: '排队/坐席人数', count: this.seat},
+        {title: '报修单数量', count: this.repairNum},
+        {title: '在线维修工', count: this.maintainerNum},
       ]
     },
   },
@@ -59,6 +65,9 @@ export default {
     &:first-child
       flex 1.1
       padding 1rem .5rem
+      display flex
+      align-items center
+      justify-content center
       p
         color $light-blue
         margin-bottom .5rem
@@ -69,6 +78,9 @@ export default {
         align-items center
         justify-content space-between
         color $light-blue
+        >div
+          flex 1
+          text-align center
         *
           font-size 1.2rem !important
           font-weight bold !important

src/views/intelligence.vue

@@ -26,22 +26,17 @@
 <script>
 export default {
   name: 'Intelligence',
-  data() {
+  computed: {
+    list() {
+      const {smartInfo} = this.$store.state
+      return smartInfo.map(item => {
         return {
-      list: [
-        {title: '电梯困人', count: [0, 1271]},
-        {title: '电动车入梯', count: [201, 1271]},
-        {title: '烟感温感', count: [17, 203]},
-        {title: '消防通道', count: [44, 424]},
-        {title: '消防登高点', count: [12, 202]},
-        {title: '承重结构', count: [0, 91]},
-        {title: '集中充电', count: [10, 411]},
-        {title: '屋顶积水', count: [1, 102]},
-        {title: '窨井盖', count: [4, 511]},
-        {title: '积水水浸', count: [42, 278]},
-      ],
+          title: item.TYPE_NAME,
+          count: [+item.alarmCount, +item.sensorCount],
+        }
+      })
+    }
   }
-  },
 }
 </script>
 

src/views/main.vue

@@ -12,12 +12,13 @@
       'box4 . box7',
     ]"
     columns="1fr 2fr 1fr"
-    rows="4rem 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr"
+    rows="4rem 0.8fr 0.9fr 0.9fr 0.8fr 1fr 1fr 1fr 1fr"
     gap="0"
     style="padding: 0 .5rem .5rem"
   >
     <!-- <m-map></m-map> -->
     <m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg.png')">上海市物业管理地理信息平台</m-title>
+    <Summary />
     <m-card area="box1" mode="5" title="综合监管应用场景" :icon="require('@/assets/images/icon1.png')">
       <OverSee />
     </m-card>
@@ -50,6 +51,7 @@ import Disaster from './disaster'
 import CommunitySummary from './community-summary'
 import CommunityType from './community-type'
 import ThematicMap from './thematic-map'
+import Summary from './summary'
 export default {
   name: 'Main',
   components: {
@@ -60,6 +62,7 @@ export default {
     CommunitySummary,
     CommunityType,
     ThematicMap,
+    Summary,
   },
   mounted() {
     this.$store.dispatch('initData')

src/views/oversee.vue

@@ -55,7 +55,7 @@ export default {
       padding-bottom .5rem
     &:last-child
       flex-wrap wrap
-      padding 1rem .5rem
+      padding .5rem 1rem
       >div
         width 50%
         line-height 2.6rem

src/views/summary.vue

+<template>
+  <div class="summary">
+    <div v-for="item in list" :key="item.name">
+      <p>{{item.name}}</p>
+      <p><b><m-count style="font-size:1.5rem;" :value="item.value" :decimal="0"/></b> <span>{{item.unit}}</span></p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Summary',
+  computed: {
+    list() {
+      const {SECT_NUM, CSP_MANAGE_NUM, CSM_NUM, HOC_NUM} = this.$store.state.summaryInfo
+      return [
+        {name: '住宅小区总数', value: +SECT_NUM || 0, unit: '个'},
+        {name: '物业企业总数', value: +CSP_MANAGE_NUM || 0, unit: '个'},
+        {name: '小区经理总数', value: +CSM_NUM || 0, unit: '人'},
+        {name: '业委会总数', value: +HOC_NUM || 0, unit: '个'},
+      ]
+    },
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.summary
+  position fixed
+  top 5rem
+  width 40%
+  left 0
+  right 0
+  margin auto
+  display flex
+  justify-content space-around
+  >div
+    text-align center
+    p
+      color $light-blue
+      font-weight bold
+      span
+        font-size .8rem
+</style>