接接口

src/server/api.js

@@ -6,15 +6,18 @@ case 'production':
   DATA_URL = 'http://10.89.1.208:10005'
   break
 default:
-  // BASE_URL = 'http://yangpu.hm.omniview.pro/api'
-  BASE_URL = 'http://yapi.omniview.pro/mock/350'
+  BASE_URL = 'http://yangpu.hm.omniview.pro/api'
+  // BASE_URL = 'http://yapi.omniview.pro/mock/350'
   DATA_URL = 'http://10.89.1.208:10005'
 }
 export default {
   BASE_URL,
   DATA_URL,
   GET_HANDLE_LIST: '/service-special-ddd/public/alarm/index', // 联勤联动列表
-  GET_RESOURCE_COUNT: '/public/resource/count', // 6项运行体征
+  GET_RESOURCE_COUNT: '/service-basicdatasync-ddd/public/resource/count', // 6项运行体征
   GET_COMMUNITY_RATE: '/service-basicdatasync-ddd/public/community/ratio', // 小区类型占比
   GET_MARKET_SHARE: '/service-basicdatasync-ddd/public/property/topten', // 市场份额
+  GET_INDUSTRY_INFO: '/service-documents-ddd/public/industry/supervision', // 行业监管信息
+  GET_REPAIR_INFO: '/service-documents-ddd/public/property/maintenance', // 物业维修
+  GET_COMPLAINT_INFO: '/service-docments-ddd/public/complaint/lettersvisits', // 信访投诉
 }

src/store/actions.js

@@ -10,6 +10,9 @@ export default {
     dispatch('getResourceCount')
     dispatch('getCommunityRate')
     dispatch('getMarketShare')
+    dispatch('getIndustryInfo')
+    dispatch('getRepairInfo')
+    dispatch('getComplaintInfo')
   },
   getHandleList({commit}) { // 获取并全局设置联勤联动处置列表
     ajax.get({url: api.GET_HANDLE_LIST}).then(res => {
@@ -31,4 +34,19 @@ export default {
       commit('SET_MARKET_SHARE', com.confirm(res, 'data.content', {}))
     })
   },
+  getIndustryInfo({commit}) { // 行业督查
+    ajax.get({url: api.GET_INDUSTRY_INFO}).then(res => {
+      commit('SET_INDUSTRY_INFO', com.confirm(res, 'data.content', {}))
+    })
+  },
+  getRepairInfo({commit}) { // 物业维修
+    ajax.get({url: api.GET_REPAIR_INFO}).then(res => {
+      commit('SET_REPAIR_INFO', com.confirm(res, 'data.content', {}))
+    })
+  },
+  getComplaintInfo({commit}) { // 信访投诉
+    ajax.get({url: api.GET_COMPLAINT_INFO}).then(res => {
+      commit('SET_COMPLAINT_INFO', com.confirm(res, 'data.content', {}))
+    })
+  },
 }

src/store/mutations.js

@@ -20,4 +20,13 @@ export default {
   SET_MARKET_SHARE(state, data) {
     state.marketShare = data
   },
+  SET_INDUSTRY_INFO(state, data) {
+    state.industryInfo = data
+  },
+  SET_REPAIR_INFO(state, data) {
+    state.repairInfo = data
+  },
+  SET_COMPLAINT_INFO(state, data) {
+    state.complaintInfo = data
+  },
 }

src/store/state.js

@@ -6,6 +6,9 @@ export default {
   resourceCount: {},
   communityRate: {},
   marketShare: {},
+  industryInfo: {},
+  repairInfo: {},
+  complaintInfo: {},
   commandData: {
     name1: '赵广浩',
     name2: '成剑杰',

src/views/components/combine.vue

@@ -23,7 +23,10 @@
         <m-step class="combine-step" :steps="steps" :current="getCurrent(item)" />
       </div>
     </m-scroll>
-    <div v-else class="no-data">— 暂无数据 —</div>
+    <div v-else class="no-data">
+      <img src="@/assets/images/building.png" />
+      <p>— 暂无数据 —</p>
+    </div>
   </div>
 </template>
 
@@ -60,10 +63,19 @@ export default {
 
 <style lang="stylus" scoped>
 .combine
+  // .no-data
+  //   width 100%
+  //   height 100%
+  //   $flex-center()
   .no-data
-    width 100%
-    height 100%
-    $flex-center()
+      $flex-center()
+      flex-direction column
+      width 100%
+      height 100%
+      color #999
+      img
+        width .35rem
+        height @width
   .detail
     background $section-bg
     padding .05rem .1rem .2rem

src/views/components/complaint-report.vue

 <template>
   <div class="complaint-report">
     <div class="sum">
-      <div v-for="item in sum" :key="item.name">
+      <div v-for="item in sum" :key="item.key" @click="curType = item.key" :class="{on: item.key === curType}">
         <img :src="require(`@/assets/images/${item.img}`)" />
         <div>
           <p>{{item.name}}</p>
@@ -17,12 +17,18 @@
           <span class="dot" :style="`border-color:${config.colors[i]}`"/>
           <p>{{item.name}}</p>
           <p>{{item.value}}</p>
-          <p>{{item.rate}}%</p>
+          <p>{{item.rate}}</p>
         </div>
       </div>
     </div>
     <Divider>投诉分布</Divider>
-    <div class="rate"><RateComponent :colors="['#EF6F6F', '#FFC500']"/></div>
+    <div class="rate">
+      <RateComponent
+        :info="rateInfo"
+        :list="rateList"
+        :colors="['#EF6F6F', '#FFC500']"
+        />
+    </div>
   </div>
 </template>
 
@@ -33,10 +39,7 @@ export default {
   components: {RateComponent},
   data() {
     return {
-      sum: [
-        {name: '12345', value: 100, img: 'complaint1.png'},
-        {name: '962121', value: 203, img: 'complaint2.png'},
-      ],
+      curType: 'B',
       config: {
         colors: ['#E44949', '#FDA62D', '#FFCE34', '#71C012', '#6BE1B2', '#DC732D', '#5BD5FF', '#006ED4', '#2E43C9', '#826AFA', '#CCCCCC'],
         // tooltip: {
@@ -48,17 +51,41 @@ export default {
           {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 45 * Number((screen.height / 800).toFixed(1))], center: ['40%', '50%']}
         ]
       },
-      chartData: [
-        {name: '物业服务管理', value: 90, rate: 30},
-        {name: '小区综合管理', value: 75, rate: 25},
-        {name: '房管物业', value: 60, rate: 20},
-        {name: '城管执法', value: 45, rate: 15},
-        {name: '绿化市容', value: 12, rate: 4},
-        {name: '发展改革', value: 12, rate: 4},
-        {name: '其他', value: 9, rate: 3},
-      ],
     }
   },
+  computed: {
+    complaintInfo() {
+      return this.$store.state.complaintInfo
+    },
+    sum() {
+      const {allRowsA = 0, allRowsB = 0} = this.complaintInfo
+      return [
+        {key: 'B', name: '12345', value: allRowsB, img: 'complaint1.png'},
+        {key: 'A', name: '962121', value: allRowsA, img: 'complaint2.png'},
+      ]
+    },
+    rateInfo() {
+      const {cCommunity = {}} = this.complaintInfo
+      return cCommunity[this.curType]
+    },
+    rateList() {
+      const {cCompany = {}} = this.complaintInfo
+      const keys = Object.keys(cCompany[`cCompany${this.curType}`] || {})
+      return keys.map(key => cCompany[`cCompany${this.curType}`][key])
+    },
+    chartData() {
+      const data = this.complaintInfo[`typeCount${this.curType}`]
+      const keys = Object.keys(data || {})
+      return keys.map(key => {
+        const {count = 0, businsessTypeLv1 = '', classification1 = '', ratio = '0'} = data[key]
+        return {
+          name: businsessTypeLv1 || classification1,
+          value: count,
+          rate: ratio,
+        }
+      })
+    },
+  },
 }
 </script>
 
@@ -74,6 +101,8 @@ export default {
       flex 1
       $flex-center()
       cursor pointer
+      border-bottom .02rem solid transparent
+      transition all .3s ease-in-out
       img
         width .25rem
         height @width
@@ -84,8 +113,10 @@ export default {
       .unit
         color #aaa
         font-size .08rem
-      &:first-child
+      &:hover
+      &.on
         background $color-map(.15)
+      &.on
         border-bottom .02rem solid $color-blue
   .chart-wrapper
     width 100%

src/views/components/example-community.vue

@@ -24,7 +24,10 @@
         </div>
       </div>
     </m-scroll>
-    <div v-else class="no-data">— 暂无数据 —</div>
+    <div v-else class="no-data">
+      <img src="@/assets/images/building.png" />
+      <p>— 暂无数据 —</p>
+    </div>
   </div>
 </template>
 
@@ -46,9 +49,14 @@ export default {
 <style lang="stylus" scoped>
 .example-community
   .no-data
+    $flex-center()
+    flex-direction column
     width 100%
     height 100%
-    $flex-center()
+    color #999
+    img
+      width .35rem
+      height @width
   .detail
     background $section-bg
     padding .05rem .1rem

src/views/components/industry-supervise.vue

@@ -14,7 +14,7 @@
       <div>
         <p>房办月查完成情况</p>
         <div class="inner">
-          <span v-for="i in 12" :key="i">{{i}}</span>
+          <span v-for="(month, i) in months" :class="getClass(month)" :key="i">{{i+1}}</span>
         </div>
       </div>
     </div>
@@ -38,7 +38,11 @@
     </div>
     <Divider>重大事件清单</Divider>
     <div class="important-list">
-      <div class="detail" v-for="(item, i) in list" :key="i">
+      <div class="no-data">
+        <img src="@/assets/images/building.png" />
+        <p>— 暂无数据 —</p>
+      </div>
+      <!-- <div class="detail" v-for="(item, i) in list" :key="i">
         <div>
           <h5>{{item.community}}</h5>
           <p>{{item.theme}}</p>
@@ -57,7 +61,7 @@
             <p><m-count :value="item.lost"  /><span class="unit">元</span></p>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -67,16 +71,24 @@ export default {
   name: 'IndustrySupervise',
   data() {
     return {
-      supervise: [
-        {name: '日常巡查完成数', value: 16},
-        {name: '重点督查完成数', value: 29},
-        {name: '整改跟踪', value: [5, 16]},
-        {name: '专项检查完成数', value: 32},
-      ],
       list: [
         {community: '保利维拉家园', theme: '上报主题', type: '事件类型', die: 3, lost: 5000},
         {community: '中凯城市之光', theme: '上报主题', type: '事件类型', die: 3, lost: 5000},
       ],
+      months: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sept',
+        'Oct',
+        'Nov',
+        'Dec',
+      ],
       config: {
         colors: ['#5bd4ff', '#72c011', '#fece35', '#ff6160', '#826bfa', '#cccccc'],
         tooltip: {
@@ -115,6 +127,36 @@ export default {
       ],
     }
   },
+  computed: {
+    industryInfo() {
+      return this.$store.state.industryInfo
+    },
+    supervise() {
+      const {dailySupervision = 0, keySupervision = 0, notOther = 0, other = 0, specialExamination = 0} = this.industryInfo
+      return [
+        {name: '日常巡查完成数', value: +dailySupervision},
+        {name: '重点督查完成数', value: +keySupervision},
+        {name: '整改跟踪', value: [+notOther, +other]},
+        {name: '专项检查完成数', value: +specialExamination},
+      ]
+    },
+  },
+  methods: {
+    getClass(month) {
+      const {monthCompletion = {}} = this.industryInfo
+      if (!month || !monthCompletion[month]) return null
+      switch (monthCompletion[month]) {
+      case 'c':
+        return 'red'
+      case 'w':
+        return 'yellow'
+      case 'i':
+        return 'green'
+      default:
+        return null
+      }
+    },
+  },
 }
 </script>
 
@@ -181,10 +223,17 @@ export default {
           span
             $flex-center()
             border-radius .02rem
-            width .16rem
+            width .17rem
             height @width
-            background $color-yellow
             margin-top .05rem
+            background #13427a
+            &.red
+              background #cc4d4d
+            &.yellow
+              background $color-yellow
+            &.green
+              background #6eb629
+
   .info-submit
     display flex
     align-items center
@@ -199,6 +248,15 @@ export default {
     display flex
     flex 1
     margin-top .2rem
+    .no-data
+      $flex-center()
+      flex-direction column
+      width 100%
+      height 100%
+      color #999
+      img
+        width .35rem
+        height @width
     .detail
       width 49%
       margin-right .05rem

src/views/components/party-lead.vue

@@ -23,7 +23,10 @@
     </div>
     <div class="chart">
       <m-chart v-if="mockData.length > 0" :config="config" :data="mockData" :options="options" />
-      <div v-else class="no-data">— 暂无数据 —</div>
+      <div v-else class="no-data">
+        <img src="@/assets/images/building.png" />
+        <p>— 暂无数据 —</p>
+      </div>
     </div>
   </div>
 </template>
@@ -90,9 +93,14 @@ export default {
 <style lang="stylus" scoped>
 .party-lead
   .no-data
+    $flex-center()
+    flex-direction column
     width 100%
     height 100%
-    $flex-center()
+    color #999
+    img
+      width .35rem
+      height @width
   .sum
     display flex
     justify-content space-around

src/views/components/property-repair.vue

@@ -3,21 +3,21 @@
     <div class="sum">
       <div>
         <p>全区物业保修数</p>
-        <p><m-count class="count" :value="100" /><span class="unit">个</span></p>
+        <p><m-count class="count" :value="+repairInfo.allRows || 0" /><span class="unit">个</span></p>
       </div>
       <div>
         <p>应急维修数</p>
         <p class="count">
-          <m-count class="count red" :value="2" /> /
-          <m-count class="count" :value="4" /> /
-          <m-count class="count" :value="18" />
+          <m-count class="count red" :value="+repairInfo.emMaintenanceNotRows || 0" /> /
+          <m-count class="count" :value="+repairInfo.emMaintenanceHandlerRows || 0" /> /
+          <m-count class="count" :value="+repairInfo.emMaintenanceAllRows || 0" />
           <span class="unit">个</span>
           <span class="unit sub">逾期 / 执行中 / 总数</span>
         </p>
       </div>
     </div>
     <div class="rate">
-      <RateComponent />
+      <RateComponent :list="listData" :info="repairInfo.mCommunity"/>
     </div>
   </div>
 </template>
@@ -29,8 +29,15 @@ export default {
   components: {
     RateComponent,
   },
-  data() {
-    return {}
+  computed: {
+    repairInfo() {
+      return this.$store.state.repairInfo
+    },
+    listData() {
+      const {mCompany = {}} = this.repairInfo
+      const keys = Object.keys(mCompany)
+      return keys.map(key => mCompany[key])
+    },
   },
 }
 </script>

src/views/components/rate-component.vue

 <template>
   <div class="rate-component">
-    <div>
-      <div class="bar">
-        <div v-for="item in rate" :key="item.name" :style="`background:${item.color};width:${item.percent}%;`">
-          <p :style="`color:${item.color}`">
-            <span>{{item.name}}</span>
-            <span>{{item.value}}/{{item.percent}}%/{{item.rate}}</span>
-          </p>
-        </div>
+    <div class="info">
+      <p :style="`color:${item.color}`" v-for="item in rate" :key="item.name">
+        <span>{{item.name}}</span>
+        <span>{{item.value}}/{{item.percent}}/{{item.rate}}</span>
+      </p>
+    </div>
+    <div class="bar">
+      <div v-for="item in rate" :key="item.name" :style="`background:${item.color};width:${item.percent};`">
+        <!-- <p :style="`color:${item.color}`" /> -->
       </div>
     </div>
     <div class="wrapper">
-      <div v-for="item in list" :key="item.name">
-        <p>{{item.name}}</p>
-        <div><div class="inner" :style="`width:${item.val2 * 10}%;background:linear-gradient(to right, ${colors[0]}, ${colors[1]})`"/></div>
-        <p>{{item.val1}} / {{item.val2}}% / {{item.val3}}</p>
+      <template v-if="list.length > 0">
+      <div v-for="item in list" :key="item.cspName">
+        <p>{{item.cspName}}</p>
+        <div><div class="inner" :style="`width:${item.cspRatio};background:linear-gradient(to right, ${colors[0]}, ${colors[1]})`"/></div>
+        <p>{{item.countSize || item.cspCount || 0}} / {{item.cspRatio || 0}} / {{item.cspDensity || 0}}</p>
+      </div>
+      </template>
+      <div v-else class="no-data">
+        <img src="@/assets/images/building.png" />
+        <p>— 暂无数据 —</p>
       </div>
     </div>
   </div>
@@ -29,24 +36,39 @@ export default {
       default() {
         return ['#D445EC', '#008FFF']
       }
-    }
+    },
+    list: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    info: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
   },
-  data() {
-    return {
-      rate: [
-        {name: '商品房', value: 60, percent: 20, rate: 0.1, color: '#00C6FE'},
-        {name: '老旧小区', value: 135, percent: 45, rate: 0.5, color: '#FF9500'},
-        {name: '保障房', value: 105, percent: 35, rate: 0.3, color: '#44D7B6'},
-      ],
-      list: [
-        {name: '物业企业1', val1: 21, val2: 7, val3: 0.5},
-        {name: '物业企业2', val1: 12, val2: 4, val3: 0.4},
-        {name: '物业企业3', val1: 12, val2: 4, val3: 0.4},
-        {name: '物业企业4', val1: 9, val2: 3, val3: 0.3},
-        {name: '物业企业5', val1: 9, val2: 3, val3: 0.3},
-        {name: '其他', val1: 210, val2: 7, val3: 0.8},
+  computed: {
+    rate() {
+      const {
+        condoCount = 0,
+        condoRatio = 0,
+        condoDensity = 0,
+        straightAndMixedCount = 0,
+        straightAndMixedRatio = 0,
+        straightAndMixedDensity = 0,
+        otherCount = 0,
+        otherRatio = 0,
+        otherDensity = 0
+      } = this.info
+      return [
+        {name: '商品房', value: condoCount, percent: condoRatio, rate: condoDensity, color: '#00C6FE'},
+        {name: '老旧小区', value: straightAndMixedCount, percent: straightAndMixedRatio, rate: straightAndMixedDensity, color: '#FF9500'},
+        {name: '保障房', value: otherCount, percent: otherRatio, rate: otherDensity, color: '#44D7B6'},
       ]
-    }
+    },
   },
 }
 </script>
@@ -57,19 +79,20 @@ export default {
   height 100%
   display flex
   flex-direction column
+  .info
+    margin-top .1rem
+    display flex
+    justify-content space-between
+    p
+      >span
+        display block
+        &:first-child
+          color #fff
+          font-size .09rem
   .bar
     width 100%
     height .08rem
     display flex
-    margin-top .4rem
-    >div
-      >p
-        transform translateY(-100%)
-        >span
-          display block
-          &:first-child
-            color #fff
-            font-size .09rem
   .wrapper
     flex 1
     margin-top .05rem
@@ -81,6 +104,15 @@ export default {
       display flex
       align-items center
       height 16.6%
+      &.no-data
+        $flex-center()
+        flex-direction column
+        width 100%
+        height 100%
+        color #999
+        img
+          width .35rem
+          height @width
       p
         font-size .09rem
         line-height 1.5