Skip to content

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

接入运行体征mock数据

parent 7c7f8213
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 61 deletions
src/server/api.js
View file @ e9d28713
...@@ -6,29 +6,15 @@ case 'production': ...@@ -6,29 +6,15 @@ case 'production':
DATA_URL = 'http://10.89.1.208:10005' DATA_URL = 'http://10.89.1.208:10005'
break break
default: default:
BASE_URL = 'http://yangpu.hm.omniview.pro/api' // BASE_URL = 'http://yangpu.hm.omniview.pro/api'
// BASE_URL = 'http://yapi.omniview.pro/mock/350' BASE_URL = 'http://yapi.omniview.pro/mock/350'
DATA_URL = 'http://10.89.1.208:10005' DATA_URL = 'http://10.89.1.208:10005'
} }
export default { export default {
BASE_URL, BASE_URL,
DATA_URL, DATA_URL,
GET_DISCOVER_TREND: '/service-special-ddd/public/alarm/unremoved/statistics', // 智能发现趋势图
GET_REPAIR_RATE: '/service-documents-ddd/public/unsolved/repair/type/count', // 投诉报修比例图
GET_RESOURCE_SUM: '/service-basicdatasync-ddd/public/resource/count', // 房屋物业统计数字
GET_CHECK_SUM: '/service-documents-ddd/public/checkorder/count', // 主动巡检统计数字
GET_DISCOVER_INFO: '/service-special-ddd/public/discoverInfo', // 智能发现数目
GET_TS_BX: '/service-documents-ddd/public/repair/complaint', // 投诉报修数目
GET_HANDLE_LIST: '/service-special-ddd/public/alarm/index', // 联勤联动列表 GET_HANDLE_LIST: '/service-special-ddd/public/alarm/index', // 联勤联动列表
GET_GRID_TOTAL: '/dc/countDiscoveredCaseByStreet', // 网格数 GET_RESOURCE_COUNT: '/public/resource/count', // 6项运行体征
GET_GRID_SOLVING: '/dc/countSolvingCaseByStreet', // 网格处置中数 GET_COMMUNITY_RATE: '/service-basicdatasync-ddd/public/community/ratio', // 小区类型占比
GET_GRID_OVERDUE: 'dc/countExceedCaseByStreet', // 网格处逾期数 GET_MARKET_SHARE: '/service-basicdatasync-ddd/public/property/topten', // 市场份额
GET_NOT_ALERT_TOTAL: '/dc/countClosedNotPolice', // 非警情数
GET_NOT_ALERT_SOLVING: '/dc/countSolvingNotPoliceByStreet', // 非警情数处置中数
GET_NOT_ALERT_OVERDUE: '/dc/countExceedNotPoliceByStreet', // 非警情数逾期数
GET_POPULATION_INFO: '/dc/statisticsbureauArea', // 土地人口统计数字
GET_COMPRESS_COUNT: '/dc/countCompressStationsByStreet', // 街道小型压缩站数目
GET_GARBAGE_COUNT: '/dc/countPointsByStreet', // 街道垃圾收集点数目
GET_TOILET_COUNT: '/dc/countToiletsByStreet', // 街道环卫公厕数目
GET_VIDEO_URL: 'http://10.89.1.208:7000/hawkeye/api/v1/camera/', // 后面接id获取视频地址
} }
src/store/actions.js
View file @ e9d28713
...@@ -7,10 +7,28 @@ import com from '@/util/common' ...@@ -7,10 +7,28 @@ import com from '@/util/common'
export default { export default {
initData({dispatch}) { initData({dispatch}) {
dispatch('getHandleList') dispatch('getHandleList')
dispatch('getResourceCount')
dispatch('getCommunityRate')
dispatch('getMarketShare')
}, },
getHandleList({commit}) { // 获取并全局设置联勤联动处置列表 getHandleList({commit}) { // 获取并全局设置联勤联动处置列表
ajax.get({url: api.GET_HANDLE_LIST}).then(res => { ajax.get({url: api.GET_HANDLE_LIST}).then(res => {
commit('SET_HANDLE_LIST', com.confirm(res, 'data.content', [])) commit('SET_HANDLE_LIST', com.confirm(res, 'data.content', []))
}) })
}, },
getResourceCount({commit}) { // 获取运行体征
ajax.get({url: api.GET_RESOURCE_COUNT}).then(res => {
commit('SET_RESOURCE_COUNT', com.confirm(res, 'data.content', {}))
})
},
getCommunityRate({commit}) { // 小区占比
ajax.get({url: api.GET_COMMUNITY_RATE}).then(res => {
commit('SET_COMMUNITY_RATE', com.confirm(res, 'data.content', {}))
})
},
getMarketShare({commit}) { // 市场份额
ajax.get({url: api.GET_MARKET_SHARE}).then(res => {
commit('SET_MARKET_SHARE', com.confirm(res, 'data.content', {}))
})
},
} }
src/store/mutations.js
View file @ e9d28713
...@@ -11,4 +11,13 @@ export default { ...@@ -11,4 +11,13 @@ export default {
SET_HANDLE_LIST(state, data) { SET_HANDLE_LIST(state, data) {
state.handleList = data state.handleList = data
}, },
SET_RESOURCE_COUNT(state, data) {
state.resourceCount = data
},
SET_COMMUNITY_RATE(state, data) {
state.communityRate = data
},
SET_MARKET_SHARE(state, data) {
state.marketShare = data
},
} }
src/store/state.js
View file @ e9d28713
...@@ -3,6 +3,9 @@ export default { ...@@ -3,6 +3,9 @@ export default {
curDate: null, curDate: null,
showCommandModal: false, showCommandModal: false,
handleList: [], handleList: [],
resourceCount: {},
communityRate: {},
marketShare: {},
commandData: { commandData: {
name1: '赵广浩', name1: '赵广浩',
name2: '成剑杰', name2: '成剑杰',
......
src/views/components/operation-sign.vue
View file @ e9d28713
...@@ -32,11 +32,18 @@ ...@@ -32,11 +32,18 @@
<Divider>市场份额</Divider> <Divider>市场份额</Divider>
<div class="btns"> <div class="btns">
<div class="select"> <div class="select">
<div class="btn" v-for="btn in ['全部物业', '仅区内物业', '仅区外物业']" :key="btn"> <div
{{btn}} :class="{btn, on: curTab === btn.value}"
v-for="btn in tabs"
:key="btn.value"
@click="curTab = btn.value"
>
{{btn.name}}
</div> </div>
</div> </div>
<div class="select">按管理面积</div> <Select class="select" v-model="curType">
<Option v-for="option in options" :key="option.value" :value="option.value">{{option.name}}</Option>
</Select>
</div> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">
<div class="chart"><m-chart :config="config" :data="chartData" /></div> <div class="chart"><m-chart :config="config" :data="chartData" /></div>
...@@ -52,25 +59,22 @@ ...@@ -52,25 +59,22 @@
</template> </template>
<script> <script>
import {mapState} from 'vuex'
export default { export default {
name: 'OperationSign', name: 'OperationSign',
data() { data() {
return { return {
list: [ options: [
{name: '物业小区', value: 909, unit: '个'}, {name: '按管理面积', value: 'area'},
{name: '楼栋总数', value: 27644, unit: '个'}, {name: '按管理数量', value: 'num'},
{name: '物业管理面积', value: 41935047, unit: '㎡'},
], ],
info: [ curType: 'area',
{name: '业委会', value: 725, unit: '个', img: 'operation1.png'}, tabs: [
{name: '物业企业', value: 222, unit: '个', img: 'operation2.png'}, {name: '全部物业', value: 'all'},
{name: '小区经理', value: 505, unit: '个', img: 'operation3.png'}, {name: '仅区内物业', value: 'in'},
], {name: '仅区外物业', value: 'out'},
rate: [
{name: '商品房', value: 946, percent: '41%', color: '#00C6FE'},
{name: '直管公房及混合', value: 20, percent: '19%', color: '#FF9500'},
{name: '保障房及其他', value: 361, percent: '40%', color: '#44D7B6'},
], ],
curTab: 'all',
config: { config: {
colors: ['#E44949', '#FDA62D', '#FFCE34', '#71C012', '#6BE1B2', '#DC732D', '#5BD5FF', '#006ED4', '#2E43C9', '#826AFA', '#CCCCCC'], colors: ['#E44949', '#FDA62D', '#FFCE34', '#71C012', '#6BE1B2', '#DC732D', '#5BD5FF', '#006ED4', '#2E43C9', '#826AFA', '#CCCCCC'],
// tooltip: { // tooltip: {
...@@ -82,24 +86,73 @@ export default { ...@@ -82,24 +86,73 @@ export default {
{type: 'pie', radius: [40 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], center: ['40%', '50%']} {type: 'pie', radius: [40 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], center: ['40%', '50%']}
] ]
}, },
chartData: [ // chartData: [
{name: '上海延吉物业', value: 6}, // {name: '上海延吉物业', value: 6},
{name: '上海四平物业', value: 3}, // {name: '上海四平物业', value: 3},
{name: '上海殷行物业', value: 3}, // {name: '上海殷行物业', value: 3},
{name: '上海阳置物业', value: 3}, // {name: '上海阳置物业', value: 3},
{name: '上海凯晨物业', value: 2}, // {name: '上海凯晨物业', value: 2},
{name: '上海兴桥盛物业', value: 2}, // {name: '上海兴桥盛物业', value: 2},
{name: '上海五角场物业', value: 2}, // {name: '上海五角场物业', value: 2},
{name: '上海文化银湾物业', value: 2}, // {name: '上海文化银湾物业', value: 2},
{name: '上海海鸿福船物业', value: 2}, // {name: '上海海鸿福船物业', value: 2},
{name: '上海平凉物业', value: 1}, // {name: '上海平凉物业', value: 1},
{name: '其他', value: 74}, // {name: '其他', value: 74},
], // ],
} }
}, },
computed: {
...mapState([
'resourceCount',
'communityRate',
'marketShare',
]),
list(){
const {community, building, area} = this.resourceCount
return [
{name: '物业小区', value: +community || 0, unit: '个'},
{name: '楼栋总数', value: +building || 0, unit: '个'},
{name: '物业管理面积', value: +area || 0, unit: '㎡'},
]
},
info() {
const {ic, company, csm} = this.resourceCount
return [
{name: '业委会', value: +ic || 0, unit: '个', img: 'operation1.png'},
{name: '物业企业', value: +company || 0, unit: '个', img: 'operation2.png'},
{name: '小区经理', value: +csm || 0, unit: '个', img: 'operation3.png'},
]
},
rate() {
const {condoRatio, condoRows, straightAndMixedRows, straightAndMixedRatio, otherRows, otherRatio} = this.communityRate
return [
{name: '商品房', value: +condoRows || 0, percent: condoRatio || '0', color: '#00C6FE'},
{name: '直管公房及混合', value: +straightAndMixedRows || 0, percent: straightAndMixedRatio || '0', color: '#FF9500'},
{name: '保障房及其他', value: +otherRows || 0, percent: otherRatio || '0', color: '#44D7B6'},
]
},
chartData() {
const result = this.marketShare[`${this.curTab}_${this.curType}`]
return (result && result.map(item => ({
name: item.name,
value: Number(item.ratio.replace('%', '')),
}))) || []
},
},
} }
</script> </script>
<style lang="stylus">
.operation-sign
.ivu-select-dropdown
.ivu-select-selection
border-color #3391FF !important
border-radius .04rem !important
>div
.ivu-select-selected-value
line-height .25rem !important
</style>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.operation-sign .operation-sign
.unit .unit
...@@ -130,7 +183,7 @@ export default { ...@@ -130,7 +183,7 @@ export default {
align-items center align-items center
flex 1 flex 1
img img
width .25rem width .3rem
height @width height @width
margin-right .05rem margin-right .05rem
p p
...@@ -167,27 +220,30 @@ export default { ...@@ -167,27 +220,30 @@ export default {
align-items center align-items center
.select .select
background rgba(25,154,204,.2) background rgba(25,154,204,.2)
border .01rem solid #3391FF
border-radius .04rem border-radius .04rem
color #839DAC color #839DAC
width 25% width 32%
text-align center text-align center
line-height .25rem line-height .25rem
cursor pointer cursor pointer
&:first-child &:first-child
width 70% width 65%
display flex display flex
padding 0 .08rem padding 0 .08rem
border .01rem solid #3391FF
>div >div
flex 1 flex 1
box-sizing border-box box-sizing border-box
&:first-child border-top .02rem solid transparent
&:hover
&.on
background linear-gradient(to bottom, rgba(250,219,113,.5), transparent) background linear-gradient(to bottom, rgba(250,219,113,.5), transparent)
border-top .02rem solid $color-yellow
color $color-yellow color $color-yellow
&.on
border-top .02rem solid $color-yellow
.chart-wrapper .chart-wrapper
width 100% width 100%
height 1.6rem height 2rem
display flex display flex
.chart .chart
height 100% height 100%
...@@ -197,12 +253,13 @@ export default { ...@@ -197,12 +253,13 @@ export default {
display flex display flex
flex-direction column flex-direction column
flex-wrap wrap flex-wrap wrap
padding-left .1rem margin-top 3%
margin-top 5% transform translateX(-15%)
// margin-left -0.3rem
transform translateX(-0.3rem)
>div >div
height 16% min-height 16.5%
display flex
align-items flex-start
margin-left .03rem
.dot .dot
display inline-block display inline-block
width .08rem width .08rem
...@@ -210,7 +267,11 @@ export default { ...@@ -210,7 +267,11 @@ export default {
border .02rem solid border .02rem solid
border-radius 50% border-radius 50%
p p
margin 0 .03rem margin 0 .02rem
display inline-block display inline-block
font-size .09rem
line-height 1.2
&:nth-of-type(1)
width .81rem
</style> </style>
src/views/components/rate-component.vue
View file @ e9d28713
...@@ -80,6 +80,7 @@ export default { ...@@ -80,6 +80,7 @@ export default {
>div >div
display flex display flex
align-items center align-items center
height 16.6%
p p
font-size .09rem font-size .09rem
line-height 1.5 line-height 1.5
......
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