Skip to content

Y
yangpu-property
Commit a3538341 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

接入数据,调整页面

parent d7ee37e8
Hide whitespace changes
Inline Side-by-side
Showing with 172 additions and 71 deletions
src/components/MonitorComponents/MonitorCard/mode1.vue
View file @ a3538341
......@@ -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
View file @ a3538341
......@@ -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
View file @ a3538341
......@@ -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
View file @ a3538341
......@@ -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
View file @ a3538341
......@@ -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
View file @ a3538341
......@@ -10,15 +10,22 @@
</div>
</div>
<Divider>投诉分类占比</Divider>
<p class="tip">数值为报修数量/占比/密度</p>
<div class="chart-wrapper">
<div class="chart"><m-chart :config="config" :data="chartData" /></div>
<div class="tips">
<div v-for="(item, i) in chartData" :key="item.name">
<span class="dot" :style="`border-color:${config.colors[i]}`"/>
<p>{{item.name}}</p>
<p>{{item.value}}</p>
<p>{{item.rate}}</p>
<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">
<span class="dot" :style="`border-color:${config.colors[i]}`"/>
<p>{{item.name}}</p>
<p>{{item.value}}</p>
<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>
......@@ -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
View file @ a3538341
......@@ -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> -->
</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
View file @ a3538341
......@@ -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
View file @ a3538341
......@@ -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
View file @ a3538341
......@@ -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
View file @ a3538341
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment