完善页面

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
-    <title>Dataview Project</title>
+    <title>上海市物业管理地理信息平台</title>
     <style>
       html {
         font-size: 1.6vh;

src/components/MonitorComponents/MonitorCard/mode5.vue

@@ -45,5 +45,5 @@ export default {
       height @width
       margin-right 0.5rem
   .card-content
-    padding .5rem
+    padding .5rem 0
 </style>

src/components/MonitorComponents/MonitorTitle/monitor-title.vue

@@ -129,7 +129,6 @@ export default {
         color $light-blue
         margin 0 .3rem
 
-
   >img
     position absolute
     width 100%

src/server/api.js

 let BASE_URL = ''
 switch (process.env.NODE_ENV) {
 case 'production':
-  BASE_URL = 'product_url'
+  BASE_URL = '/hmfmstest/shanghaiwuye'
   break
 default:
-  BASE_URL = 'default_url'
+  BASE_URL = 'http://www.962121.net/hmfmstest/shanghaiwuye'
 }
 export default {
   BASE_URL,
-  TEST_URL: '/api/test_url',
+  GET_COMMUNITY_HEALTH: 'http://www.962121.net/smartproperty/showplatform/v1/api/estate/score_distribution/?range_id=310000000000',
+  POST_THEME: '/propertyinspector/api/v1/sharingplatform/themeListForOneDay',
+  POST_CHECKER: '/propertyinspector/api/v1/sharingplatform/getInspectors',
+  POST_COMMUNITY: '/propertyinspector/api/v1/sharingplatform/sectListForOneDay',
+  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',
 }

src/store/actions.js

+import ajax from '@/server/ajax'
+import api from '@/server/api'
+import common from '@/util/common'
+import moment from 'moment'
+
+const {confirm} = common
 export default {
+  initData({dispatch}) {
+    dispatch('getCommunityHealth')
+    dispatch('getTheme')
+    dispatch('getChecker')
+    dispatch('getCommunity')
+    dispatch('getRectify')
+    dispatch('getPhone')
+  },
+  getCommunityHealth({commit}) {
+    ajax.get({url: api.GET_COMMUNITY_HEALTH}).then(res => {
+      commit('SET_COMMUNITY_HEALTH', confirm(res, 'data.avg', 0))
+    })
+  },
+  getTheme({commit}) {
+    ajax.post({
+      url: api.POST_THEME,
+      params: {
+        flag: 0,
+        someday: moment().format('YYYYMMDD'),
+        pageSize: 1,
+      }
+    }).then(res => {
+      commit('SET_THEME', +confirm(res, 'data.totalRows', 0))
+    })
+  },
+  getChecker({commit}) {
+    const today = moment().format('YYYY-MM-DD')
+    ajax.post({
+      url: api.POST_CHECKER,
+      params: {
+        startDate: today + ' 00:00:00',
+        endDate: today + ' 24:00:00',
+      }
+    }).then(res => {
+      commit('SET_CHECKER', +confirm(res, 'data.totalRows', 0))
+    })
+  },
+  getCommunity({commit}) {
+    ajax.post({
+      url: api.POST_COMMUNITY,
+      params: {
+        someday: moment().format('YYYYMMDD'),
+        isPublish: 0,
+        pageSize: 1,
+      }
+    }).then(res => {
+      commit('SET_COMMUNITY', +confirm(res, 'data.totalRows', 0))
+    })
+  },
+  getRectify({commit}) {
+    ajax.post({
+      url: api.POST_RECTIFY,
+      params: {
+        someday: moment().format('YYYYMMDD'),
+        isPublish: 1,
+        pageSize: 1,
+      }
+    }).then(res => {
+      commit('SET_RECTIFY', +confirm(res, 'data.totalRows', 0))
+    })
+  },
+  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])
+    })
+  }
 }

src/store/mutations.js

@@ -5,4 +5,22 @@ export default {
   SET_CURDATE(state, date) {
     state.curDate = date
   },
+  SET_COMMUNITY_HEALTH(state, val) {
+    state.communityHealth = val
+  },
+  SET_THEME(state, val) {
+    state.theme = val
+  },
+  SET_CHECKER(state, val) {
+    state.checker = val
+  },
+  SET_COMMUNITY(state, val) {
+    state.community = val
+  },
+  SET_RECTIFY(state, val) {
+    state.rectify = val
+  },
+  SET_PHONE(state, val) {
+    state.phone = val
+  },
 }

src/store/state.js

 export default {
   showLoading: false,
   curDate: null,
+  communityHealth: 0,
+  theme: 0,
+  checker: 0,
+  community: 0,
+  rectify: 0,
+  phone: [0, 0],
 }

src/views/community-summary.vue

+<template>
+  <div class="community-summary">
+    <div>
+      <div v-for="item in list.slice(0, 8)" :key="item.name">
+        <img src="@/assets/images/location.png"/>
+        <p>{{item.name}}</p>
+        <b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
+      </div>
+    </div>
+    <div>
+      <div v-for="item in list.slice(8)" :key="item.name">
+        <img src="@/assets/images/location.png"/>
+        <p>{{item.name}}</p>
+        <b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CommunitySummary',
+  data() {
+    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},
+      ]
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.community-summary
+  display flex
+  height 100%
+  >div
+    flex 1
+    >div
+      display flex
+      align-items center
+      padding 0 .5rem
+      line-height 1.8
+      &:nth-child(2n+1)
+        background $black
+      p
+        color $light-blue
+        width 40%
+        margin 0 .5rem
+      img
+        width 1rem
+        height 1.2rem
+</style>

src/views/community-type.vue

+<template>
+  <div class="community-type">
+    <m-chart :config="config" :data="data"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CommunityType',
+  data() {
+    return {
+      config: {
+        colors: ['#0091ff', '#583eff', '#f7b500', '#6dd401'],
+        legend: {
+          align: 'right',
+          orient: 'vertical',
+        },
+        shape: [
+          {type: 'pie', startAngle: -30, radius: [0, 50 * Number((screen.height / 800).toFixed(1))], center: ['35%', '50%']}
+        ],
+      },
+      data: [
+        {name: '商品房', value: 7931},
+        {name: '直管公房', value: 1793},
+        {name: '混合', value: 962},
+        {name: '其他', value: 2831},
+      ]
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+  .community-type
+    width 100%
+    height 100%
+</style>

src/views/hotline.vue

@@ -7,6 +7,7 @@
         :stroke-width="8 * sizeRate"
         :percent="75"
         stroke-linecap="square"
+        trail-color="#6d7a5f"
         stroke-color="#82DF12">
         <div>
           <p>连通率</p>
@@ -27,21 +28,23 @@
 </template>
 
 <script>
+import {mapState} from 'vuex'
 export default {
   name: 'Hotline',
-  data() {
-    return {
-      list: [
-        {title: '当日接通/来电', count: [4151, 4503]},
+  computed: {
+    ...mapState([
+      'phone'
+    ]),
+    sizeRate() {
+      return Number((screen.height / 800).toFixed(1))
+    },
+    list() {
+      return [
+        {title: '当日接通/来电', count: this.phone},
         {title: '排队/坐席人数', count: [0, 67]},
         {title: '报修单数量', count: 1867},
         {title: '在线维修工', count: 57},
       ]
-    }
-  },
-  computed: {
-    sizeRate() {
-      return Number((screen.height / 800).toFixed(1))
     },
   },
 }

src/views/main.vue

@@ -31,13 +31,13 @@
       <Disaster />
     </m-card>
     <m-card area="box5" mode="5" title="各行政区住宅小区汇总" :icon="require('@/assets/images/icon5.png')">
-      abc
+      <CommunitySummary />
     </m-card>
     <m-card area="box6" mode="5" title="住宅小区类型分布" :icon="require('@/assets/images/icon6.png')">
-      abc
+      <CommunityType />
     </m-card>
     <m-card area="box7" mode="5" title="物业监管应用专题图" :icon="require('@/assets/images/icon7.png')">
-      abc
+      <ThematicMap/>
     </m-card>
   </m-grid>
 </template>
@@ -47,6 +47,9 @@ import OverSee from './oversee'
 import Hotline from './hotline'
 import Intelligence from './intelligence'
 import Disaster from './disaster'
+import CommunitySummary from './community-summary'
+import CommunityType from './community-type'
+import ThematicMap from './thematic-map'
 export default {
   name: 'Main',
   components: {
@@ -54,6 +57,12 @@ export default {
     Hotline,
     Intelligence,
     Disaster,
+    CommunitySummary,
+    CommunityType,
+    ThematicMap,
+  },
+  mounted() {
+    this.$store.dispatch('initData')
   },
 }
 </script>

src/views/oversee.vue

@@ -2,12 +2,12 @@
   <div class="oversee">
     <div>
       <p>上海市小区健康度</p>
-      <b><m-count style="color:#0388ef;font-size:2rem;" :value="74.8"/></b>
+      <b><m-count style="color:#0388ef;font-size:2rem;" :value="communityHealth"/></b>
     </div>
     <div>
       <div v-for="(item, i) in list" :key="item.title">
         {{item.title}}
-        <b><m-count :style="`font-size:1.2rem;${i === 3 ? 'color:red;': null}`" :value="item.count"/></b>
+        <b><m-count :style="`font-size:1.2rem;${i === 3 ? 'color:red;': null}`" :value="item.count" :decimal="0"/></b>
         <!-- <template v-if="item.more">
           <span v-for="(num, index) in item.more" :key="index">{{num}}/</span>
         </template> -->
@@ -17,18 +17,26 @@
 </template>
 
 <script>
+import {mapState} from 'vuex'
 export default {
   name: 'Oversee',
-  data() {
-    return {
-      list: [
-        {title: '当日检查主题', count: 32},
-        {title: '当日检查人数', count: 18, more: [1, 3, 14]},
-        {title: '当日检查小区', count: 69},
-        {title: '当日整改单数', count: 4},
-      ],
-    }
+  computed: {
+    ...mapState([
+      'communityHealth',
+      'theme',
+      'checker',
+      'community',
+      'rectify',
+    ]),
+    list() {
+      return [
+        {title: '当日检查主题', count: this.theme},
+        {title: '当日检查人数', count: this.checker, more: [1, 3, 14]},
+        {title: '当日检查小区', count: this.community},
+        {title: '当日整改单数', count: this.rectify},
+      ]
     },
+  }
 }
 </script>
 

src/views/thematic-map.vue

+<template>
+  <div class="thematic-map">
+    <div v-for="section in list" :key="section.title">
+      <p>{{section.title}}</p>
+      <div>
+        <div class="button" v-for="item in section.data" :key="item.name">
+          <p>{{item.name}}</p>
+          <span class="bottom"></span>
+          <span class="right"></span>
+          <span class="top"></span>
+          <span class="left"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ThematicMap',
+  data() {
+    return {
+      list: [
+        {title: '综合监管', data: [
+          {name: '小区健康度'},
+          {name: '物业督查'},
+        ]},
+        {title: '962121热线', data: [
+          {name: '热线实况'},
+          {name: '实时报修'},
+        ]},
+        {title: '智能感知', data: [
+          {name: '智慧电梯'},
+          {name: '长桥四村'},
+          {name: '新冠疫情'},
+        ]},
+        {title: '灾情上报', data: [
+          {name: '防汛防台'},
+        ]},
+      ]
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.thematic-map
+  width 100%
+  height 100%
+  font-weight bold
+  overflow hidden
+  >div
+    >p
+      color $light-blue
+      margin-bottom .3rem
+    >div
+      display flex
+      align-items center
+      flex-wrap wrap
+      margin-bottom .4rem
+      .button
+        position relative
+        width 30%
+        p
+          width 100%
+          height 100%
+          color #fff
+          padding .3rem .5rem
+          background-color $black
+          text-align center
+          cursor pointer
+          transition color 0.5s ease-in-out, background-color 0.5s ease-in-out
+          &:hover
+            color $light-blue
+            background-color rgba(0,0,0,.1)
+          &:hover ~ .bottom
+            transform-origin bottom left
+            transform scaleX(1)
+          &:hover ~ .right
+            transform-origin bottom right
+            transform scaleY(1)
+          &:hover ~ .top
+            transform-origin top right
+            transform scaleX(1)
+          &:hover ~ .left
+            transform-origin top left
+            transform scaleY(1)
+        span
+          position absolute
+          background-color $light-blue
+          transition transform .1s ease
+          &.bottom,
+          &.top
+            height 1px
+            left 0
+            right 0
+            transform scaleX(0)
+          &.left,
+          &.right
+            width 1px
+            top 0
+            bottom 0
+            transform scaleY(0)
+          &.bottom
+            bottom 0
+            transform-origin bottom right
+          &.right
+            right 0
+            transform-origin top right
+            transition-delay .05s
+          &.top
+            top 0
+            transform-origin top left
+            transition-delay .15s
+          &.left
+            left 0
+            transform-origin bottom left
+            transition-delay .25s
+        &+.button
+          margin-left 1rem
+</style>