Skip to content

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

右半边的一半

parent 6cf7700f
Hide whitespace changes
Inline Side-by-side
Showing with 568 additions and 71 deletions
src/assets/css/reset.styl
View file @ 08a44f70
......@@ -12,36 +12,38 @@ $color-main = #5BD5FF
height 100%
.ivu-select-selected-value
height 100%
font-size .1rem
font-weight bold
line-height 2
font-size .09rem
// font-weight bold
line-height 1.8
.ivu-select-selection
.ivu-select-dropdown
font-size .1rem
background-color $cardBg
font-size .09rem
// background-color $cardBg
background transparent
border-radius 0
border 0.01rem solid $color-main
// color $color-main
color $edgeColor
border 0.01rem solid $edgeColor
border-radius .02rem
color #fff
padding 0
.ivu-picker-panel-body
$blur()
.ivu-select-arrow
color $color-main
line-height 2
font-size .1rem
line-height 1.8
font-size .09rem
.ivu-select-item
.ivu-dropdown-item
font-size .1rem !important
font-size .09rem !important
text-align center
color #fff
color #aaa
background rgba(0,0,0,0.8)
// &:hover
&:hover
&.ivu-select-item-selected
color $edgeColor
font-weight bold
color #fff
// color $edgeColor
// font-weight bold
.ivu-divider-horizontal.ivu-divider-with-text-center
margin .05rem 0
margin .03rem 0
&:after
&:before
border-top .01rem dashed $fontColor
......
src/components/MonitorComponents/MonitorCard/monitor-card.vue
View file @ 08a44f70
......@@ -49,7 +49,7 @@ $size()
width initial
/deep/ .card-wrapper
$size()
padding 0.05rem
padding 0.05rem 0.05rem 0
position relative
.card-content
height calc(100% - .2rem)
......
src/components/MonitorComponents/MonitorCount/monitor-count.vue
View file @ 08a44f70
......@@ -26,7 +26,7 @@ export default {
},
decimal: { // 默认保留2位小数点
type: Number,
default: 2,
default: 0,
},
prefix: {
type: String,
......
src/views/components/complaint-repair.vue
View file @ 08a44f70
......@@ -6,9 +6,9 @@
<div>
<p>{{item.name}}</p>
<p>
<m-count class="count yellow" :value="item.value[0]" :decimal="0" />
<m-count class="count yellow" :value="item.value[0]" />
/
<m-count class="count" :value="item.value[1]" :decimal="0" />
<m-count class="count" :value="item.value[1]" />
<span>个</span>
</p>
</div>
......
src/views/components/defense.vue
View file @ 08a44f70
<template>
<div class="defense">
<p>民防建筑总数 <m-count style="color:#6ae7b5" :value="190" :decimal="0"/>/<m-count :value="208" :decimal="0"/></p>
<p>民防建筑总数 <m-count style="color:#6ae7b5" :value="190" />/<m-count :value="208" /></p>
<div class="bar">
<div class="inner green" style="background:#6ae7b5;width:91%;"></div>
</div>
......
src/views/components/example-community.vue 0 → 100644
View file @ 08a44f70
<template>
<div class="example-community">
<m-scroll v-if="list.length > 0" :length="list.length" :limit="2">
<div @click="$emit('select', item)" class="detail" v-for="(item, i) in list" :key="i">
<div>
<h5>{{item.community}}</h5>
<div class="line"/>
<p><m-count class="count" :value="item.area" /><span class="unit">㎡</span></p>
</div>
<p>{{item.company}}</p>
<div class="content">
<div>
<p>管理水平</p>
<m-count class="count" :value="item.num1" />
</div>
<div>
<p>智能化水平</p>
<m-count class="count" :value="item.num2" />
</div>
<div>
<p>管理水平</p>
<m-count class="count" :value="item.num3" />
</div>
</div>
</div>
</m-scroll>
<div v-else class="no-data">— 暂无数据 —</div>
</div>
</template>
<script>
export default {
name: 'ExampleCommunity',
computed: {
list() {
return [
{community: '杨浦区城市丽园', area: 28592, company: '上海卫百辛（集团）有限公司', num1: 92, num2: 85, num3: 96},
{community: '杨浦区城市丽园', area: 28592, company: '上海卫百辛（集团）有限公司', num1: 92, num2: 85, num3: 96},
{community: '杨浦区城市丽园', area: 28592, company: '上海卫百辛（集团）有限公司', num1: 92, num2: 85, num3: 96},
]
}
},
}
</script>
<style lang="stylus" scoped>
.example-community
.no-data
width 100%
height 100%
$flex-center()
.detail
background $section-bg
padding .05rem .1rem
margin-bottom .1rem
position relative
cursor pointer
transition background .2s, box-shadow .3s ease-in-out
&:hover
background $section-hover
box-shadow -0.05rem .01rem .05rem .01rem rgba(0,0,0,0.8)
h5
font-size .1rem
.unit
font-size .08rem
color #aaa
.count
color $color-yellow
font-size .12rem
>p
color $cardFontColor
font-size .09rem
>div
&:first-child
display flex
justify-content space-between
align-items center
.line
flex 1
height .01rem
background $cardFontColor
opacity .6
margin 0 .05rem
&.content
display flex
justify-content space-between
>div
display flex
align-items center
justify-content space-between
p
font-size .09rem
margin-right .05rem
</style>
src/views/components/green.vue
View file @ 08a44f70
......@@ -5,7 +5,7 @@
<div v-for="(item, i) in data" :key="item.name">
<span class="dot" :style="`border-color:${config.colors[i]}`"/>
<p>{{item.name}}</p>
<m-count :value="item.value" :decimal="0" :style="`color:${config.colors[i]}`"/>
<m-count :value="item.value" :style="`color:${config.colors[i]}`"/>
<span class="unit">个</span>
</div>
</div>
......
src/views/components/grid-management.vue
View file @ 08a44f70
......@@ -5,9 +5,9 @@
<div>
<p>{{item.name}}</p>
<div>
<m-count class="count" :value="item.value[0]" :decimal="0" />
<m-count class="count" :value="item.value[1]" :decimal="0" />
<m-count class="count" :value="item.value[2]" :decimal="0" />
<m-count class="count" :value="item.value[0]" />
<m-count class="count" :value="item.value[1]" />
<m-count class="count" :value="item.value[2]" />
</div>
<div>
<span>逾期</span>
......
src/views/components/house.vue
View file @ 08a44f70
......@@ -11,7 +11,7 @@
<div class="total">
<div>
<p>整体治理得分</p>
<m-count style="font-size:0.12rem;color:#75e1b0;" :value="92" :decimal="0" />
<m-count style="font-size:0.12rem;color:#75e1b0;" :value="92" />
<p class="unit">（分）</p>
</div>
<span class="btn">查看模型</span>
......
src/views/components/industry-supervise.vue 0 → 100644
View file @ 08a44f70
<template>
<div class="industry-supervise">
<div class="supervise">
<div>
<img src="@/assets/images/check-items.png" />
<div class="item" v-for="item in supervise" :key="item.name">
<p v-if="Array.isArray(item.value)" class="count">
<m-count :value="item.value[0]" /> / <m-count :value="item.value[1]" />
</p>
<m-count v-else class="count" :value="item.value" />
<p>{{item.name.slice(0, 4)}}<br/>{{item.name.slice(4)}}</p>
</div>
</div>
<div>
<p>房办月查完成情况</p>
<div class="inner">
<span v-for="i in 12" :key="i">{{i}}</span>
</div>
</div>
</div>
<Divider>信息上报</Divider>
<div class="info-submit">
<div class="info">
<div>
<p>上报完成任务总数</p>
<m-count class="count" :value="946" />
</div>
<div>
<p>上报信息条数</p>
<m-count class="count" :value="1079" />
</div>
<Select value="台风黑格比">
<Option name="台风黑格比" value="台风黑格比">台风黑格比</Option>
<Option name="台风" value="台风">台风</Option>
</Select>
</div>
<div class="chart"><m-chart :config="config" :data="mockData" :options="options" /></div>
</div>
<Divider>重大事件清单</Divider>
<div class="important-list">
<div class="detail" v-for="(item, i) in list" :key="i">
<div>
<h5>{{item.community}}</h5>
<p>{{item.theme}}</p>
</div>
<div class="content">
<div>
<p>事件类型</p>
<p>{{item.type}}</p>
</div>
<div>
<p>人员伤亡</p>
<p><m-count :value="item.die" /><span class="unit">人</span></p>
</div>
<div>
<p>财产损失</p>
<p><m-count :value="item.lost" /><span class="unit">元</span></p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
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},
],
config: {
colors: ['#5bd4ff', '#72c011', '#fece35', '#ff6160', '#826bfa', '#cccccc'],
tooltip: {
formatter: '{b}：{c}个 ({d}%)',
confine: true,
},
legend: {
align: 'right',
orient: 'vertical',
},
shape: [
{type: 'pie', radius: [10 * Number((screen.height / 800).toFixed(1)), 50 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['32%', '50%']}
]
},
options: {
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}%`
}
}
},
mockData: [
{name: '空中坠物', value: 15},
{name: '树木倒伏', value: 20},
{name: '小区积水', value: 45},
{name: '车库进水', value: 6},
{name: '人员受伤', value: 9},
],
}
},
}
</script>
<style lang="stylus" scoped>
.industry-supervise
display flex
flex-direction column
.count
font-size .12rem
color $color-yellow
.supervise
height 35%
width 100%
display flex
>div
&:first-child
width 60%
position relative
>img
width 36%
position absolute
top 0
right 0
bottom 0
left 0
margin auto
.item
position absolute
width 32%
height 45%
background rgba(49,94,139, .4)
border .04rem solid rgba(0,0,0,.25)
text-align center
$flex-center()
flex-direction column
font-size .08rem
&:nth-child(1)
top 0
left 0
&:nth-child(2)
top 0
right 0
&:nth-child(3)
bottom 0
left 0
&:nth-child(4)
bottom 0
right 0
&:last-child
background #0A2F59
flex 1
margin-left .05rem
overflow hidden
p
line-height .2rem
border-bottom .01rem solid $cardFontColor
text-indent .1rem
.inner
display grid
justify-content space-between
grid-template-columns repeat(auto-fill, .2rem)
padding 0 .05rem
grid-gap .03rem
span
$flex-center()
border-radius .02rem
width .16rem
height @width
background $color-yellow
margin-top .05rem
.info-submit
display flex
align-items center
height 45%
width 100%
.info
flex 1
.chart
width 65%
height 100%
.important-list
display flex
flex 1
margin-top .2rem
.detail
width 49%
margin-right .05rem
background $section-bg
padding .03rem .05rem 0
cursor pointer
transition background .2s, box-shadow .3s ease-in-out
&:hover
background $section-hover
box-shadow -0.05rem .01rem .05rem .01rem rgba(0,0,0,0.8)
h5
font-size .1rem
.unit
font-size .08rem
color #aaa
>div
&:first-child
p
font-size .09rem
color #ccc
&.content
display flex
margin .02rem 0
justify-content space-between
p
&:first-child
color $cardFontColor
font-size .08rem
</style>
src/views/components/left-component.vue
View file @ 08a44f70
......@@ -12,7 +12,7 @@
<div class="right">
<m-card title="党建引领"><PartyLead /></m-card>
<m-card title="物业健康度"><PropertyHealth /></m-card>
<m-card title="示范小区"></m-card>
<m-card title="示范小区"><ExampleCommunity /></m-card>
<!-- <m-card title="网格管理"><GridManagement /></m-card>
<m-card title="房屋物业"><House /></m-card>
<m-card title="小区检查清单"><CommunityCheck /></m-card>
......@@ -34,6 +34,7 @@ import Command from './command'
import OperationSign from './operation-sign'
import PartyLead from './party-lead'
import PropertyHealth from './property-health'
import ExampleCommunity from './example-community'
export default {
name: 'LeftComponent',
components: {
......@@ -48,6 +49,7 @@ export default {
OperationSign,
PartyLead,
PropertyHealth,
ExampleCommunity,
},
data() {
return {}
......
src/views/components/operation-sign.vue
View file @ 08a44f70
......@@ -11,7 +11,7 @@
<img :src="require(`@/assets/images/${item.img}`)"/>
<div>
<p>{{item.name}}</p>
<p><m-count class="count" :value="item.value" :decimal="0" /> <span class="unit">{{item.unit}}</span></p>
<p><m-count class="count" :value="item.value" /> <span class="unit">{{item.unit}}</span></p>
</div>
</div>
</div>
......@@ -20,7 +20,7 @@
<div class="item-wrapper">
<div v-for="item in rate" :key="item.name">
<p>{{item.name}}</p>
<p><m-count class="count" :style="`color:${item.color}`" :value="item.value" :decimal="0" /> <span class="unit">个</span></p>
<p><m-count class="count" :style="`color:${item.color}`" :value="item.value" /> <span class="unit">个</span></p>
</div>
</div>
<div class="bar">
......@@ -149,8 +149,7 @@ export default {
justify-content space-between
background linear-gradient(to right, rgba(20,92,143,.5), transparent)
border-left .03rem solid #315E8B
padding 0 .04rem
line-height .35rem
padding .1rem .04rem
.bar
width 100%
height .08rem
......
src/views/components/party-lead.vue
View file @ 08a44f70
......@@ -12,12 +12,12 @@
:trail-color="item.color"
>
<div :style="`color:${item.color};font-size:.1rem`">
<m-count style="font-size:.12rem" :value="item.value" :decimal="0" />
<m-count style="font-size:.12rem" :value="item.value" />
<p>{{item.name}}</p>
</div>
</i-circle>
<div class="sum-item">
<p><m-count class="count" :value="5" :decimal="0" /><span class="unit">个</span></p>
<p><m-count class="count" :value="5" /><span class="unit">个</span></p>
<p>交叉任职数</p>
</div>
</div>
......@@ -119,5 +119,5 @@ export default {
background-image url('../../assets/images/chart-bg.png')
background-size 100% 100%
background-repeat no-repeat
padding .1rem .03rem .03rem .05rem
padding .1rem 0 .03rem .05rem
</style>
src/views/components/patrol.vue
View file @ 08a44f70
......@@ -5,7 +5,7 @@
<img :src="require(`@/assets/images/${item.img}`)"/>
<div>
<p>{{item.name}}</p>
<p><m-count class="count" :style="`color:${item.color}`" :value="item.value" :decimal="0" /> <span>{{item.unit}}</span></p>
<p><m-count class="count" :style="`color:${item.color}`" :value="item.value" /> <span>{{item.unit}}</span></p>
</div>
</div>
</div>
......
src/views/components/property-health.vue
View file @ 08a44f70
......@@ -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" :decimal="0" />
<m-count style="font-size:0.12rem;color:#75e1b0;" :value="91" />
<p class="unit">（分）</p>
</div>
</div>
......@@ -74,7 +74,7 @@ export default {
color: '#ff0000'
},
areaStyle: {
color: 'rgba(255,106,37,.6)',
color: 'rgb(255,106,37)',
},
data: [{
value: mockValue,
......
src/views/components/property-repair.vue 0 → 100644
View file @ 08a44f70
<template>
<div class="property-repair">
<div class="sum">
<div>
<p>全区物业保修数</p>
<p><m-count class="count" :value="100" /><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" />
<span class="unit">个</span>
<span class="unit sub">逾期 / 执行中 / 总数</span>
</p>
</div>
</div>
<div class="rate">
<RateComponent />
</div>
</div>
</template>
<script>
import RateComponent from './rate-component'
export default {
name: 'PropertyRepair',
components: {
RateComponent,
},
data() {
return {}
},
}
</script>
<style lang="stylus" scoped>
.property-repair
display flex
flex-direction column
.sum
display flex
align-items center
justify-content space-between
.count
font-size .12rem
color $color-yellow
&.red
color $color-red
.unit
font-size .08rem
color #aaa
>div
display flex
align-items center
p
position relative
&:first-child
margin-right .1rem
.sub
display block
text-align right
width 200%
position absolute
right 0
bottom -70%
.rate
flex 1
</style>
src/views/components/rate-component.vue 0 → 100644
View file @ 08a44f70
<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>
</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>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'RateComponent',
props: {
colors: {
type: Array,
default() {
return ['#D445EC', '#008FFF']
}
}
},
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},
]
}
},
}
</script>
<style lang="stylus" scoped>
.rate-component
width 100%
height 100%
display flex
flex-direction column
.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
background-image url('../../assets/images/chart-bg.png')
background-size 100% 100%
background-repeat no-repeat
padding .02rem .06rem
>div
display flex
align-items center
p
font-size .09rem
line-height 1.5
min-width .6rem
&:first-child
color #aaa
border-right .01rem solid $cardFontColor
padding-right .05rem
>div
flex 1
.inner
border-radius .03rem
height .06rem
</style>
src/views/components/right-component.vue
View file @ 08a44f70
......@@ -3,36 +3,33 @@
<p class="title">发现督查</p>
<div>
<div class="left">
<m-card title="智能发现"><SmartDiscover /></m-card>
<m-card title="投诉报修"><ComplaintRepair /></m-card>
<m-card title="行业监管"><IndustrySupervise /></m-card>
<m-card title="物业维修"><PropertyRepair /></m-card>
</div>
<div class="right">
<m-card title="主动巡检"><Patrol @select="$emit('patrol', $event)" /></m-card>
<m-card title="联勤联动"><Combine @select="$emit('handle', $event)"/></m-card>
<m-card title="鹰眼监控">
<div class="monitor-video">
<div v-for="(img, i) in imgs" @click="handleClick(i)" :key="img" :style="`background-image: url(${require(`@/assets/images/${img}`)})`">
<div><img src="@/assets/images/play.png"/></div>
</div>
</div>
</m-card>
<m-card title="投诉信访"></m-card>
<m-card title="联勤联动"></m-card>
</div>
</div>
</div>
</template>
<script>
import SmartDiscover from './smart-discover'
import ComplaintRepair from './complaint-repair'
import Patrol from './patrol'
import Combine from './combine'
// import SmartDiscover from './smart-discover'
// import ComplaintRepair from './complaint-repair'
// import Patrol from './patrol'
// import Combine from './combine'
import IndustrySupervise from './industry-supervise'
import PropertyRepair from './property-repair'
export default {
name: 'RightComponent',
components: {
SmartDiscover,
ComplaintRepair,
Patrol,
Combine,
// SmartDiscover,
// ComplaintRepair,
// Patrol,
// Combine,
IndustrySupervise,
PropertyRepair,
},
data() {
return {
......@@ -80,19 +77,23 @@ export default {
height 100%
>div
flex 1
&.left
>div
&:nth-child(1)
height 70%
&:nth-child(2)
height 30%
&.right
>div
&:nth-child(1)
&:nth-child(2)
height 40%
&:nth-child(3)
height 20%
>div
height 65%
&:nth-child(2)
height 35%
// &.left
// >div
// &:nth-child(1)
// height 70%
// &:nth-child(2)
// height 30%
// &.right
// >div
// &:nth-child(1)
// &:nth-child(2)
// height 40%
// &:nth-child(3)
// height 20%
.monitor-video
display flex
flex-wrap wrap
......
src/views/components/smart-discover.vue
View file @ 08a44f70
......@@ -6,14 +6,14 @@
<img :src="require(`@/assets/images/${item.img}`)"/>
<div>
<p>{{item.name}}</p>
<p><m-count class="count" :style="`color:${item.color}`" :value="item.value" :decimal="0" /> <span>个</span></p>
<p><m-count class="count" :style="`color:${item.color}`" :value="item.value" /> <span>个</span></p>
</div>
</div>
</div>
<div class="detail">
<div @click="handleClick(item.types)" :class="{on: item.types === curSmartType}" v-for="item in list" :key="item.types">
<p><img :src="require(`@/assets/images/${item.img}`)" />{{item.name}}</p>
<m-count :class="{count: true, yellow: item.value > 0}" :value="item.value" :decimal="0" />
<m-count :class="{count: true, yellow: item.value > 0}" :value="item.value" />
</div>
</div>
</div>
......
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