接入数据,调整页面

src/components/MonitorComponents/MonitorCard/mode1.vue

@@ -6,6 +6,7 @@
     <div class="line">
       <img src="@/assets/images/card-title-line.png"/>
     </div>
+    <p v-if="showTip" class="tip">数值为报修数量/占比/密度</p>
   </div>
   <div class="card-content">
     <slot />
@@ -21,6 +22,10 @@ export default {
       type: String,
       default: '标题',
     },
+    showTip: {
+      type: Boolean,
+      default: false,
+    },
     color: {
       type: String,
     }
@@ -35,6 +40,12 @@ export default {
     align-items center
     font-size .11rem
     font-weight bold
+    position relative
+    .tip
+      position absolute
+      right 0
+      font-weight normal
+      font-size .08rem
     .dot
       width .03rem
       height .1rem

src/server/api.js

@@ -18,6 +18,8 @@ export default {
   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_REPORT_INFO: '/service-documents-ddd/public/information/report', // 信息上报、重大事件清单
   GET_REPAIR_INFO: '/service-documents-ddd/public/property/maintenance', // 物业维修
   GET_COMPLAINT_INFO: '/service-docments-ddd/public/complaint/lettersvisits', // 信访投诉
+  GET_HEALTH_INFO: '/service-documents-ddd/public/property/health/degree', // 物业健康度
 }

src/store/actions.js

@@ -13,6 +13,7 @@ export default {
     dispatch('getIndustryInfo')
     dispatch('getRepairInfo')
     dispatch('getComplaintInfo')
+    dispatch('getHealthInfo')
   },
   getHandleList({commit}) { // 获取并全局设置联勤联动处置列表
     ajax.get({url: api.GET_HANDLE_LIST}).then(res => {
@@ -39,6 +40,16 @@ export default {
       commit('SET_INDUSTRY_INFO', com.confirm(res, 'data.content', {}))
     })
   },
+  getReportInfo({commit, state}) { // 信息上报、重大事件
+    ajax.get({url: api.GET_REPORT_INFO, taskid: state.reportId}).then(res => {
+      commit('SET_REPORT_INFO', com.confirm(res, 'data.content.typeRatio', []))
+      commit('SET_REPORT_SUM', {
+        finish: com.confirm(res, 'data.content.finish', 0),
+        total: com.confirm(res, 'data.content.total', 0),
+      })
+      commit('SET_IMPORTANT_LIST', com.confirm(res, 'data.content.importantEvent', []))
+    })
+  },
   getRepairInfo({commit}) { // 物业维修
     ajax.get({url: api.GET_REPAIR_INFO}).then(res => {
       commit('SET_REPAIR_INFO', com.confirm(res, 'data.content', {}))
@@ -49,4 +60,9 @@ export default {
       commit('SET_COMPLAINT_INFO', com.confirm(res, 'data.content', {}))
     })
   },
+  getHealthInfo({commit}) { // 健康度
+    ajax.get({url: api.GET_HEALTH_INFO}).then(res => {
+      commit('SET_HEALTH_INFO', com.confirm(res, 'data.content', {}))
+    })
+  },
 }

src/store/mutations.js

@@ -29,4 +29,19 @@ export default {
   SET_COMPLAINT_INFO(state, data) {
     state.complaintInfo = data
   },
+  SET_REPORT_ID(state, val) {
+    state.reportId = val
+  },
+  SET_REPORT_INFO(state, data) {
+    state.reportInfo = data
+  },
+  SET_REPORT_SUM(state, val) {
+    state.reportSum = val
+  },
+  SET_IMPORTANT_LIST(state, data) {
+    state.importantList = data
+  },
+  SET_HEALTH_INFO(state, data) {
+    state.healthInfo = data
+  },
 }

src/store/state.js

@@ -9,6 +9,17 @@ export default {
   industryInfo: {},
   repairInfo: {},
   complaintInfo: {},
+  reportId: null,
+  reportInfo: [],
+  reportSum: {finish: 0, total: 0},
+  importantList: [],
+  healthInfo: {
+    creditScore: {},
+    propertyWarrantyScore: {},
+    communityManagementScore: {},
+    ownerSatisfactionScore: {},
+    monthCheck: {},
+  },
   commandData: {
     name1: '赵广浩',
     name2: '成剑杰',

src/views/components/complaint-report.vue

@@ -10,7 +10,9 @@
       </div>
     </div>
     <Divider>投诉分类占比</Divider>
+    <p class="tip">数值为报修数量/占比/密度</p>
     <div class="chart-wrapper">
+      <template v-if="chartData.length > 0">
         <div class="chart"><m-chart :config="config" :data="chartData" /></div>
         <div class="tips">
           <div v-for="(item, i) in chartData" :key="item.name">
@@ -20,6 +22,11 @@
             <p>{{item.rate}}</p>
           </div>
         </div>
+      </template>
+      <div v-else class="no-data">
+        <img src="@/assets/images/building.png" />
+        <p>— 暂无数据 —</p>
+      </div>
     </div>
     <Divider>投诉分布</Divider>
     <div class="rate">
@@ -93,6 +100,18 @@ export default {
 .complaint-report
   display flex
   flex-direction column
+  .tip
+    text-align right
+    font-size .08rem
+  .no-data
+    $flex-center()
+    flex-direction column
+    width 100%
+    height 100%
+    color #999
+    img
+      width .35rem
+      height @width
   .sum
     display flex
     background $color-map(.1)

src/views/components/industry-supervise.vue

@@ -23,32 +23,32 @@
       <div class="info">
         <div>
           <p>上报完成任务总数</p>
-          <m-count class="count" :value="946"  />
+          <m-count class="count" :value="+reportSum.finish"  />
         </div>
         <div>
           <p>上报信息条数</p>
-          <m-count class="count" :value="1079"  />
+          <m-count class="count" :value="+reportSum.total"  />
         </div>
-        <Select value="台风黑格比">
-          <Option name="台风黑格比" value="台风黑格比">台风黑格比</Option>
-          <Option name="台风" value="台风">台风</Option>
+        <Select v-model="reportId">
+          <Option value="2008041192891503">台风黑格比</Option>
         </Select>
       </div>
-      <div class="chart"><m-chart :config="config" :data="mockData" :options="options" /></div>
+      <div class="chart" v-if="chartData.length > 0"><m-chart :config="config" :data="chartData" :options="options" /></div>
     </div>
     <Divider>重大事件清单</Divider>
     <div class="important-list">
-      <div class="no-data">
-        <img src="@/assets/images/building.png" />
-        <p>— 暂无数据 —</p>
-      </div>
-      <!-- <div class="detail" v-for="(item, i) in list" :key="i">
+      <template v-if="importantList.length > 0">
+      <div class="detail" v-for="(item, i) in importantList" :key="i">
         <div>
-          <h5>{{item.community}}</h5>
-          <p>{{item.theme}}</p>
+          <h5>{{item.sectname}}</h5>
+          <!-- <p>{{item.taskid}}</p> -->
         </div>
         <div class="content">
           <div>
+            <p>事件内容</p>
+            <p>{{item.rpcontent}}</p>
+          </div>
+          <!-- <div>
             <p>事件类型</p>
             <p>{{item.type}}</p>
           </div>
@@ -59,22 +59,25 @@
           <div>
             <p>财产损失</p>
             <p><m-count :value="item.lost"  /><span class="unit">元</span></p>
+          </div> -->
         </div>
       </div>
-      </div> -->
+      </template>
+      <div v-else class="no-data">
+        <img src="@/assets/images/building.png" />
+        <p>— 暂无数据 —</p>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import {mapState} from 'vuex'
 export default {
   name: 'IndustrySupervise',
   data() {
     return {
-      list: [
-        {community: '保利维拉家园', theme: '上报主题', type: '事件类型', die: 3, lost: 5000},
-        {community: '中凯城市之光', theme: '上报主题', type: '事件类型', die: 3, lost: 5000},
-      ],
+      reportId: '2008041192891503',
       months: [
         'Jan',
         'Feb',
@@ -91,10 +94,6 @@ export default {
       ],
       config: {
         colors: ['#5bd4ff', '#72c011', '#fece35', '#ff6160', '#826bfa', '#cccccc'],
-        tooltip: {
-          formatter: '{b}：{c}个 ({d}%)',
-          confine: true,
-        },
         legend: {
           align: 'right',
           orient: 'vertical',
@@ -107,27 +106,18 @@ export default {
         legend: {
           top: '15%',
           formatter: (name) => {
-            const data = [
-              {name: '空中坠物', value: 15},
-              {name: '树木倒伏', value: 20},
-              {name: '小区积水', value: 45},
-              {name: '车库进水', value: 6},
-              {name: '人员受伤', value: 9},
-            ]
-            return `${name} ${(data.find(e => e.name === name)).value}%`
+            return `${name} ${(this.chartData.find(e => e.name === name)).value}%`
           }
         }
       },
-      mockData: [
-        {name: '空中坠物', value: 15},
-        {name: '树木倒伏', value: 20},
-        {name: '小区积水', value: 45},
-        {name: '车库进水', value: 6},
-        {name: '人员受伤', value: 9},
-      ],
     }
   },
   computed: {
+    ...mapState([
+      'reportInfo',
+      'reportSum',
+      'importantList',
+    ]),
     industryInfo() {
       return this.$store.state.industryInfo
     },
@@ -140,6 +130,12 @@ export default {
         {name: '专项检查完成数', value: +specialExamination},
       ]
     },
+    chartData() {
+      return this.reportInfo.map(item => ({
+        name: item.rpcontent,
+        value: Number((item.rpcontentCount && item.rpcontentCount.replace('%', '')) || 0),
+      }))
+    },
   },
   methods: {
     getClass(month) {
@@ -157,6 +153,15 @@ export default {
       }
     },
   },
+  watch: {
+    reportId: {
+      handler(cur) {
+        this.$store.commit('SET_REPORT_ID', cur)
+        this.$store.dispatch('getReportInfo')
+      },
+      immediate: true,
+    }
+  }
 }
 </script>
 

src/views/components/property-health.vue

@@ -3,7 +3,7 @@
     <div class="chart" ref="chart"></div>
     <div class="total">
       <p>综合得分</p>
-      <m-count style="font-size:0.12rem;color:#75e1b0;" :value="91"  />
+      <m-count style="font-size:0.12rem;color:#75e1b0;" :value="total" />
       <p class="unit">（分）</p>
     </div>
   </div>
@@ -11,13 +11,22 @@
 
 <script>
 import echarts from 'echarts'
-const mockValue = [22.1, 20.9, 24.5, 20.2, 21.1]
 export default {
   name: 'PropertyHealth',
   data() {
     return {
       chart: null,
-      option: {
+    }
+  },
+  mounted() {
+    setTimeout(this.init, 0)
+  },
+  beforeDestroy() {
+    this.chart && window.removeEventListener('resize', () => this.chart.resize())
+  },
+  computed: {
+    option() {
+      return {
         tooltip: {
           trigger: 'axis',
           confine: true,
@@ -37,12 +46,12 @@ export default {
               },
               c: {
                 color: '#fff',
+                align: 'center',
                 fontSize: 12 * this.sizeRate,
               },
             },
             formatter: (text, {index}) => {
-              const max = [25, 25, 25, 25, 25]
-              return `{a|${text}}\n{b|${mockValue[index]}}{c|/${max[index]}}`
+              return `{a|${text}}\n{b|${this.chartData[index]}}{c|/20}`
             },
           },
           splitArea: {
@@ -58,11 +67,11 @@ export default {
             show: false,
           },
           indicator: [
-            {text: '全市物业诚信计分', index: 0, max: 25},
-            {text: '投诉报修情况', index: 1, max: 25},
-            {text: '小区管理情况', index: 2, max: 25},
-            {text: '业主满意度', index: 3, max: 25},
-            {text: '行业落实情况', index: 4, max: 25},
+            {text: '全市物业诚信计分', index: 0, max: 20},
+            {text: '投诉报修情况', index: 1, max: 20},
+            {text: '小区管理情况', index: 2, max: 20},
+            {text: '业主满意度', index: 3, max: 20},
+            {text: '行业落实情况', index: 4, max: 20},
           ],
           center: ['50%', '60%'],
           radius: '60%',
@@ -77,22 +86,27 @@ export default {
             color: 'rgb(255,106,37)',
           },
           data: [{
-            value: mockValue,
+            value: this.chartData,
           }]
         }]
       }
-    }
     },
-  mounted() {
-    setTimeout(this.init, 0)
-  },
-  beforeDestroy() {
-    this.chart && window.removeEventListener('resize', () => this.chart.resize())
-  },
-  computed: {
     sizeRate() {
       return Number((screen.height / 800).toFixed(1))
     },
+    chartData() {
+      const {creditScore, propertyWarrantyScore, communityManagementScore, ownerSatisfactionScore, monthCheck} = this.$store.state.healthInfo
+      return [
+        +creditScore.county || 0,
+        +propertyWarrantyScore.county || 0,
+        +communityManagementScore.county || 0,
+        +ownerSatisfactionScore.county || 0,
+        +monthCheck.county || 0,
+      ]
+    },
+    total() {
+      return this.chartData.reduce((cur, acc) => cur + acc, 0)
+    },
   },
   methods: {
     init() {
@@ -100,7 +114,12 @@ export default {
       window.addEventListener('resize', () => this.chart.resize())
       this.chart.setOption(this.option)
     }
-  }
+  },
+  watch: {
+    chartData() {
+      this.chart && this.chart.setOption(this.option)
+    },
+  },
 }
 </script>
 

src/views/components/rate-component.vue

@@ -14,7 +14,7 @@
     <div class="wrapper">
       <template v-if="list.length > 0">
       <div v-for="item in list" :key="item.cspName">
-        <p>{{item.cspName}}</p>
+        <p :title="item.cspName">{{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>
@@ -116,8 +116,11 @@ export default {
       p
         font-size .09rem
         line-height 1.5
-        min-width .6rem
         &:first-child
+          width 1.2rem
+          overflow hidden
+          white-space nowrap
+          text-overflow ellipsis
           color #aaa
           border-right .01rem solid $cardFontColor
           padding-right .05rem
@@ -125,6 +128,6 @@ export default {
         flex 1
         .inner
           border-radius .03rem
-          height .06rem
+          height .05rem
 
 </style>

src/views/components/right-component.vue

@@ -4,7 +4,7 @@
     <div>
       <div class="left">
         <m-card title="行业监管"><IndustrySupervise /></m-card>
-        <m-card title="物业维修"><PropertyRepair /></m-card>
+        <m-card title="物业维修" showTip><PropertyRepair /></m-card>
       </div>
       <div class="right">
         <m-card title="投诉信访"><ComplaintReport /></m-card>

src/views/main.vue

@@ -118,7 +118,7 @@ export default {
       map.addBoundary({name: '杨浦区'})
     },
     initMapFocus() {
-      this.$refs.map.focus(3489.0714111328125, 10384.431030273437, 3.5)
+      this.$refs.map.focus(5493.207992825168, 7214.452284743532, 3.5)
     },
     handleMapClick(data) {
       this.detailData = data