Skip to content

G
geography-dataview
Commit 34172a7d authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

完善页面

parent facaeff1
Hide whitespace changes
Inline Side-by-side
Showing with 379 additions and 106 deletions
src/assets/css/reset.styl
View file @ 34172a7d
$color-main = #5BD5FF
#app
#html
.date-picker.ivu-date-picker
.ivu-select-dropdown
margin-top -0.1rem
.ivu-date-picker-cells-cell-disabled
background rgba(0,0,0,0.3)
.ivu-select-selection
.ivu-select-selection,
.ivu-select-placeholder
height 100%
font-size .9rem
line-height 1.5
>div
height 100%
.ivu-select-selected-value
height 100%
font-size 1rem
font-size .9rem
font-weight bold
line-height 2
line-height 1.5
color #fff
.ivu-select-selection
.ivu-select-dropdown
font-size 1rem
font-size .9rem
background-color $cardBg
border-radius 0
border 0.1rem solid $color-main
border none
// border 0.1rem solid $color-main
// color $color-main
color $edgeColor
padding 0
.ivu-picker-panel-body
$blur()
.ivu-select-arrow
color $color-main
line-height 2
font-size 1rem
// color $color-main
color #fff
line-height 1.5
font-size .9rem
.ivu-select-item
.ivu-dropdown-item
font-size 1rem !important
font-size .9rem !important
text-align center
color #fff
color #ccc
background rgba(0,0,0,0.8)
// &:hover
&.ivu-select-item-selected
color $edgeColor
// color $edgeColor
color #fff
font-weight bold
src/components/MonitorComponents/MonitorCard/mode5.vue
View file @ 34172a7d
......@@ -28,7 +28,7 @@ export default {
<style lang="stylus" scoped>
.card-wrapper
padding 1rem !important
padding 1rem 1rem 0 !important
background $cardBg
.card-title
display flex
......
src/components/MonitorComponents/MonitorChart/monitor-chart.vue
View file @ 34172a7d
......@@ -311,6 +311,10 @@ export default {
},
tooltip: {
trigger: 'axis',
confine: true,
textStyle: {
fontSize: this.fontSize,
},
axisPointer: {
type: 'shadow'
},
......@@ -365,7 +369,10 @@ export default {
}
},
fontSize() {
return Math.floor(screen.height * 1.48 / 100)
return 12 * this.sizeRate
},
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
borderWidth() {
return this.fontSize * 0.6
......
src/components/MonitorComponents/MonitorCount/monitor-count.vue
View file @ 34172a7d
<template>
<ICountUp
:delay="delay"
:endVal="value"
:endVal="+value"
:options="config"
@ready="onReady"
:style="style"
......@@ -79,7 +79,7 @@ export default {
if (!this.autoUpdate) return
setTimeout(() => {
instance.reset()
instance.update(instance.endVal)
instance.update(+instance.endVal)
}, 1000 * 60 * this.updateDuration)
},
}
......
src/server/api.js
View file @ 34172a7d
......@@ -15,6 +15,13 @@ export default {
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',
POST_REPAIR_NUM: '/realtimeshare/api/v1/getRepairNum',
POST_MAINTAINER: '/realtimeshare/api/v1/getMaintenanceList',
GET_SMART_INFO: '/gis/api/v1/sensor/alarm/count',
POST_TASK_LIST: '/gis/api/v1/disasterDefense/getTaskList',
POST_DISASTER_INFO: '/gis/api/v1/disasterDefense/getSummaryInformationNum',
POST_DISASTER_COMMUNITY: '/gis/api/v1/disasterDefense/getRightSectNum',
POST_DISTRICT_COMMUNITY: '/gis/api/v1/sectResultForHpb',
POST_COMMUNITY_TYPE: '/gis/api/v1/sectTypeResult',
POST_SUMMARY_INFO: '/gis/api/v1/statisticsResult',
}
src/store/actions.js
View file @ 34172a7d
......@@ -12,13 +12,21 @@ export default {
dispatch('getCommunity')
dispatch('getRectify')
dispatch('getPhone')
dispatch('getSeat')
dispatch('getRepairNum')
dispatch('getMaintainer')
dispatch('setSmartInfo')
dispatch('setTaskList')
dispatch('setDistrictCommunity')
dispatch('setCommunityType')
dispatch('setSummaryInfo')
},
getCommunityHealth({commit}) {
getCommunityHealth({commit}) { // 小区健康度
ajax.get({url: api.GET_COMMUNITY_HEALTH}).then(res => {
commit('SET_COMMUNITY_HEALTH', confirm(res, 'data.avg', 0))
})
},
getTheme({commit}) {
getTheme({commit}) { // 检查主题数
ajax.post({
url: api.POST_THEME,
params: {
......@@ -30,7 +38,7 @@ export default {
commit('SET_THEME', +confirm(res, 'data.totalRows', 0))
})
},
getChecker({commit}) {
getChecker({commit}) { // 检查人数
const today = moment().format('YYYY-MM-DD')
ajax.post({
url: api.POST_CHECKER,
......@@ -42,7 +50,7 @@ export default {
commit('SET_CHECKER', +confirm(res, 'data.totalRows', 0))
})
},
getCommunity({commit}) {
getCommunity({commit}) { // 检查小区数
ajax.post({
url: api.POST_COMMUNITY,
params: {
......@@ -54,7 +62,7 @@ export default {
commit('SET_COMMUNITY', +confirm(res, 'data.totalRows', 0))
})
},
getRectify({commit}) {
getRectify({commit}) { // 整改单数
ajax.post({
url: api.POST_RECTIFY,
params: {
......@@ -66,10 +74,82 @@ export default {
commit('SET_RECTIFY', +confirm(res, 'data.totalRows', 0))
})
},
getPhone({commit}) {
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])
const {ANSWERS, CALLS, RATE} = confirm(res, 'data.content.0', {ANSWERS: 0, CALLS: 0, RATE: 0})
commit('SET_PHONE', [+ANSWERS, +CALLS])
commit('SET_LINK_RATE', +RATE)
})
}
},
getSeat({commit}) { // 排队/坐席人数
ajax.post({url: api.POST_SEAT}).then(res => {
const {CALLQUEUINGS, SEATCOUNT} = confirm(res, 'data.content.0', {CALLQUEUINGS: 0, SEATCOUNT: 0})
commit('SET_SEAT', [+CALLQUEUINGS, +SEATCOUNT])
})
},
getRepairNum({commit}) { // 保修单数量
ajax.post({url: api.POST_REPAIR_NUM}).then(res => {
const {REPAIREORDRERCOUNT} = confirm(res, 'data.content.0', {REPAIREORDRERCOUNT: 0})
commit('SET_REPAIR_NUM', +REPAIREORDRERCOUNT)
})
},
getMaintainer({commit}) { // 在线维修工数量
ajax.post({url: api.POST_MAINTAINER}).then(res => {
commit('SET_MAINTAINER_NUM', +confirm(res, 'data.totalRows', 0))
})
},
setSmartInfo({commit}) { // 智能感知应用场景数据
ajax.get({url: api.GET_SMART_INFO}).then(res => {
commit('SET_SMART_INFO', confirm(res, 'data.content', []))
})
},
setTaskList({commit, dispatch}) { // 灾情应用场景下拉选项列表
ajax.post({
url: api.POST_TASK_LIST,
params: {pageSize: 10000},
}).then(res => {
const result = confirm(res, 'data.content', [])
commit('SET_TASK_LIST', result)
if (result.length > 0) {
dispatch('setDisasterInfo', result[0].TASKID)
dispatch('setDisasterCommunity', result[0].TASKID)
}
})
},
setDisasterInfo({commit}, id) { // 根据场景id查询灾情数据
ajax.post({
url: api.POST_DISASTER_INFO,
params: {
type: '3',
pageSize: 10000,
taskId: id,
},
}).then(res => {
commit('SET_DISASTER_INFO', confirm(res, 'data.content', []))
})
},
setDisasterCommunity({commit}, id) { // 根据场景id查询灾情受灾小区数
ajax.post({
url: api.POST_DISASTER_COMMUNITY,
params: {taskId: id},
}).then(res => {
const {SEVERENUM, SLIGHTNUM} = confirm(res, 'data.content', {SEVERENUM: 0, SLIGHTNUM: 0})
commit('SET_DISASTER_COMMUNITY', [+SEVERENUM, +SLIGHTNUM])
})
},
setDistrictCommunity({commit}) { // 各行政区住宅小区汇总
ajax.post({url: api.POST_DISTRICT_COMMUNITY}).then(res => {
commit('SET_DISTRICT_COMMUNITY', confirm(res, 'data.content', []))
})
},
setCommunityType({commit}) { // 住宅小区类型分布
ajax.post({url: api.POST_COMMUNITY_TYPE}).then(res => {
commit('SET_COMMUNITY_TYPE', confirm(res, 'data.content', []))
})
},
setSummaryInfo({commit}) { // 小区数、物业企业数等汇总信息
ajax.post({url: api.POST_SUMMARY_INFO}).then(res => {
commit('SET_SUMMARY_INFO', confirm(res, 'data.content.0', {}))
})
},
}
src/store/mutations.js
View file @ 34172a7d
......@@ -23,4 +23,37 @@ export default {
SET_PHONE(state, val) {
state.phone = val
},
SET_LINK_RATE(state, val) {
state.linkRate = val
},
SET_SEAT(state, val) {
state.seat = val
},
SET_REPAIR_NUM(state, val) {
state.repairNum = val
},
SET_MAINTAINER_NUM(state, val) {
state.maintainerNum = val
},
SET_SMART_INFO(state, data) {
state.smartInfo = data
},
SET_TASK_LIST(state, data) {
state.taskList = data
},
SET_DISASTER_INFO(state, data) {
state.disasterInfo = data
},
SET_DISASTER_COMMUNITY(state, val) {
state.disasterCommunity = val
},
SET_DISTRICT_COMMUNITY(state, data) {
state.districtCommunity = data
},
SET_COMMUNITY_TYPE(state, data) {
state.communityType = data
},
SET_SUMMARY_INFO(state, data) {
state.summaryInfo = data
}
}
src/store/state.js
View file @ 34172a7d
......@@ -7,4 +7,15 @@ export default {
community: 0,
rectify: 0,
phone: [0, 0],
linkRate: 0,
seat: [0, 0],
repairNum: 0,
maintainerNum: 0,
smartInfo: [],
taskList: [],
disasterInfo: [],
disasterCommunity: [0, 0],
districtCommunity: [],
communityType: [],
summaryInfo: {},
}
src/views/community-summary.vue
View file @ 34172a7d
<template>
<div class="community-summary">
<template v-if="list.length > 0">
<div>
<div v-for="item in list.slice(0, 8)" :key="item.name">
<img src="@/assets/images/location.png"/>
......@@ -14,34 +15,23 @@
<b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
</div>
</div>
</template>
</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},
]
computed: {
list() {
return this.$store.state.districtCommunity.map(item => {
return {
name: item.HPB_NAME,
value: item.SECT_NUM,
}
})
}
},
}
}
</script>
......@@ -55,7 +45,7 @@ export default {
display flex
align-items center
padding 0 .5rem
line-height 1.8
line-height 1.7
&:nth-child(2n+1)
background $black
p
......@@ -63,6 +53,6 @@ export default {
width 40%
margin 0 .5rem
img
width 1rem
height 1.2rem
width .8rem
height .9rem
</style>
src/views/community-type.vue
View file @ 34172a7d
<template>
<div class="community-type">
<m-chart :config="config" :data="data"/>
<div class="legend">
<div v-for="(item, i) in data" :key="item.name">
<span :style="`background:${config.colors[i]}`"/>
<p>{{item.name}}</p>
<b><m-count :value="item.value" :decimal="0"/></b>
</div>
</div>
</div>
</template>
......@@ -11,22 +18,29 @@ export default {
return {
config: {
colors: ['#0091ff', '#583eff', '#f7b500', '#6dd401'],
legend: {
align: 'right',
orient: 'vertical',
},
legend: {hide: true},
// legend: {
// align: 'right',
// orient: 'vertical',
// },
shape: [
{type: 'pie', startAngle: -30, radius: [0, 50 * Number((screen.height / 800).toFixed(1))], center: ['35%', '50%']}
{type: 'pie', startAngle: -30, radius: [0, 50 * Number((screen.height / 800).toFixed(1))], center: ['30%', '50%']}
],
},
data: [
{name: '商品房', value: 7931},
{name: '直管公房', value: 1793},
{name: '混合', value: 962},
{name: '其他', value: 2831},
]
}
},
computed: {
data() {
const {communityType} = this.$store.state
if (communityType.length === 0) return []
return [
{name: '商品房', value: +communityType.find(item => item.ST_KIND === '商品房').KINDNUMBER || 0},
{name: '直管公房', value: +communityType.find(item => item.ST_KIND === '直管公房').KINDNUMBER || 0},
{name: '混合', value: +communityType.find(item => item.ST_KIND === '混合').KINDNUMBER || 0},
{name: '其他', value: communityType.filter(item => item.ST_KIND !== '商品房' && item.ST_KIND !== '直管公房' && item.ST_KIND !== '混合').reduce((acc, cur) => acc + (+cur.KINDNUMBER || 0), 0)},
]
},
}
}
</script>
......@@ -34,4 +48,23 @@ export default {
.community-type
width 100%
height 100%
position relative
.legend
position absolute
right 0
top 50%
transform translateY(-50%)
width 45%
>div
display flex
align-items center
margin .5rem 0
>span
width 1rem
height @width
>p
color $light-blue
width 5rem
margin 0 .5rem
</style>
src/views/disaster.vue
View file @ 34172a7d
<template>
<div class="disaster">
<div class="select-wrapper">
<Select @on-change="handleSelect" :value="selectedValue" class="disaster-select" transfer>
<template v-if="taskList.length > 0">
<Option v-for="option in taskList" :key="option.TASKID" :value="option.TASKID">{{option.TASKNAME}}</Option>
</template>
</Select>
</div>
<div class="info">
<p><span>严重灾情小区</span><m-count :value="153" :decimal="0" style="color:#D82B2B;fontSize:1.2rem;"/></p>
<p><span>轻微灾情小区</span><m-count :value="1079" :decimal="0" style="color:#f7b500;fontSize:1.2rem;"/></p>
<p><span>严重灾情小区</span><m-count :value="disasterCommunity[0]" :decimal="0" style="color:#D82B2B;font-weight:bold;font-size:1.2rem;"/></p>
<p><span>轻微灾情小区</span><m-count :value="disasterCommunity[1]" :decimal="0" style="color:#f7b500;font-weight:bold;font-size:1.2rem;"/></p>
</div>
<div class="chart-wrapper">
<m-chart :config="config" :data="data" />
<m-chart ref="chart" :config="config" :data="data" :options="{xAxis}"/>
</div>
</div>
</template>
<script>
import {mapState, mapActions} from 'vuex'
export default {
name: 'Disaster',
data() {
return {
value: null,
config: {
colors: ['#0388ef'],
legend: {
......@@ -22,7 +31,8 @@ export default {
},
yAxis: {
axisLabel: {show: false},
max: 600,
max: value => Math.round(value.max + value.max / 5 + 1),
min: 0,
},
shape: [
{key: 'value', type: 'bar', barWidth: '30%', label: {show: true, position: 'top', color: '#fff'}},
......@@ -31,29 +41,70 @@ export default {
key: 'name',
},
},
data: [
{name: '空中坠物', value: 102},
{name: '树木倒伏', value: 494},
{name: '小区积水', value: 209},
{name: '车库进水', value: 43},
{name: '人员受伤', value: 6},
],
xAxis: {
axisLabel: {
interval: 0,
fontSize: 11 * Number((screen.height / 800).toFixed(1)),
textStyle: {
color: '#D4F0FF',
},
}
},
}
},
computed: {
...mapState([
'taskList',
'disasterInfo',
'disasterCommunity',
]),
selectedValue() {
return this.value || (this.taskList[0] && this.taskList[0].TASKID)
},
data() {
if (this.disasterInfo.length === 0) return []
return this.disasterInfo.map(item => {
return {
name: item.CHKQUOTASEQNAME,
value: +item.VALUE,
}
})
},
},
methods: {
...mapActions([
'setDisasterInfo',
'setDisasterCommunity',
]),
handleSelect(id) {
this.setDisasterInfo(id)
this.setDisasterCommunity(id)
this.value = id
this.$refs.chart.init()
},
},
}
</script>
<style lang="stylus" scoped>
.disaster
height 100%
overflow hidden
display flex
flex-direction column
.select-wrapper
display flex
justify-content flex-end
.disaster-select
width auto
.info
display flex
align-items center
justify-content space-around
color $light-blue
font-size 1rem
span
margin-right .5rem
.chart-wrapper
height 90%
// height 75%
flex 1
</style>
src/views/hotline.vue
View file @ 34172a7d
......@@ -2,26 +2,28 @@
<div class="hotline">
<div>
<i-circle
:size="100 * sizeRate"
:size="95 * sizeRate"
:trail-width="8 * sizeRate"
:stroke-width="8 * sizeRate"
:percent="75"
:percent="linkRate"
stroke-linecap="square"
trail-color="#6d7a5f"
stroke-color="#82DF12">
<div>
<p>连通率</p>
<b><m-count style="font-size:1.6rem;" :value="88" :decimal="0"/>%</b>
<b><m-count style="font-size:1.6rem;" :value="linkRate" :decimal="0"/>%</b>
</div>
</i-circle>
</div>
<div>
<div v-for="item in list" :key="item.title" class="info">
<p>{{item.title}}</p>
<template v-if="Array.isArray(item.count)">
<m-count :value="item.count[0]" :decimal="0"/> / <m-count :value="item.count[1]" :decimal="0"/>
</template>
<m-count v-else :value="item.count" :decimal="0"/>
<div>
<template v-if="Array.isArray(item.count)">
<m-count :value="item.count[0]" :decimal="0"/> / <m-count :value="item.count[1]" :decimal="0"/>
</template>
<m-count v-else :value="item.count" :decimal="0"/>
</div>
</div>
</div>
</div>
......@@ -33,7 +35,11 @@ export default {
name: 'Hotline',
computed: {
...mapState([
'phone'
'phone',
'linkRate',
'seat',
'repairNum',
'maintainerNum',
]),
sizeRate() {
return Number((screen.height / 800).toFixed(1))
......@@ -41,9 +47,9 @@ export default {
list() {
return [
{title: '当日接通/来电', count: this.phone},
{title: '排队/坐席人数', count: [0, 67]},
{title: '报修单数量', count: 1867},
{title: '在线维修工', count: 57},
{title: '排队/坐席人数', count: this.seat},
{title: '报修单数量', count: this.repairNum},
{title: '在线维修工', count: this.maintainerNum},
]
},
},
......@@ -59,9 +65,12 @@ export default {
&:first-child
flex 1.1
padding 1rem .5rem
p
color $light-blue
margin-bottom .5rem
display flex
align-items center
justify-content center
p
color $light-blue
margin-bottom .5rem
&:last-child
flex 2
>.info
......@@ -69,6 +78,9 @@ export default {
align-items center
justify-content space-between
color $light-blue
>div
flex 1
text-align center
*
font-size 1.2rem !important
font-weight bold !important
......
src/views/intelligence.vue
View file @ 34172a7d
......@@ -26,22 +26,17 @@
<script>
export default {
name: 'Intelligence',
data() {
return {
list: [
{title: '电梯困人', count: [0, 1271]},
{title: '电动车入梯', count: [201, 1271]},
{title: '烟感温感', count: [17, 203]},
{title: '消防通道', count: [44, 424]},
{title: '消防登高点', count: [12, 202]},
{title: '承重结构', count: [0, 91]},
{title: '集中充电', count: [10, 411]},
{title: '屋顶积水', count: [1, 102]},
{title: '窨井盖', count: [4, 511]},
{title: '积水水浸', count: [42, 278]},
],
computed: {
list() {
const {smartInfo} = this.$store.state
return smartInfo.map(item => {
return {
title: item.TYPE_NAME,
count: [+item.alarmCount, +item.sensorCount],
}
})
}
},
}
}
</script>
......
src/views/main.vue
View file @ 34172a7d
......@@ -12,12 +12,13 @@
'box4 . box7',
]"
columns="1fr 2fr 1fr"
rows="4rem 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr"
rows="4rem 0.8fr 0.9fr 0.9fr 0.8fr 1fr 1fr 1fr 1fr"
gap="0"
style="padding: 0 .5rem .5rem"
>
<!-- <m-map></m-map> -->
<m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg.png')">上海市物业管理地理信息平台</m-title>
<Summary />
<m-card area="box1" mode="5" title="综合监管应用场景" :icon="require('@/assets/images/icon1.png')">
<OverSee />
</m-card>
......@@ -50,6 +51,7 @@ import Disaster from './disaster'
import CommunitySummary from './community-summary'
import CommunityType from './community-type'
import ThematicMap from './thematic-map'
import Summary from './summary'
export default {
name: 'Main',
components: {
......@@ -60,6 +62,7 @@ export default {
CommunitySummary,
CommunityType,
ThematicMap,
Summary,
},
mounted() {
this.$store.dispatch('initData')
......
src/views/oversee.vue
View file @ 34172a7d
......@@ -55,7 +55,7 @@ export default {
padding-bottom .5rem
&:last-child
flex-wrap wrap
padding 1rem .5rem
padding .5rem 1rem
>div
width 50%
line-height 2.6rem
......
src/views/summary.vue 0 → 100644
View file @ 34172a7d
<template>
<div class="summary">
<div v-for="item in list" :key="item.name">
<p>{{item.name}}</p>
<p><b><m-count style="font-size:1.5rem;" :value="item.value" :decimal="0"/></b> <span>{{item.unit}}</span></p>
</div>
</div>
</template>
<script>
export default {
name: 'Summary',
computed: {
list() {
const {SECT_NUM, CSP_MANAGE_NUM, CSM_NUM, HOC_NUM} = this.$store.state.summaryInfo
return [
{name: '住宅小区总数', value: +SECT_NUM || 0, unit: '个'},
{name: '物业企业总数', value: +CSP_MANAGE_NUM || 0, unit: '个'},
{name: '小区经理总数', value: +CSM_NUM || 0, unit: '人'},
{name: '业委会总数', value: +HOC_NUM || 0, unit: '个'},
]
},
}
}
</script>
<style lang="stylus" scoped>
.summary
position fixed
top 5rem
width 40%
left 0
right 0
margin auto
display flex
justify-content space-around
>div
text-align center
p
color $light-blue
font-weight bold
span
font-size .8rem
</style>
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