Commit 4bb92e4c authored by 程卓's avatar 程卓

物业督查和智能发现

parent 55a9e6b1
File added
File added
......@@ -5,7 +5,7 @@ import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import {Row, Col, Select, Option, DatePicker,Icon} from 'view-design'
import {Row, Col, Select, Option, DatePicker,Icon,Progress,Divider} from 'view-design'
import ajax from '@/server/ajax'
import api from '@/server/api'
import common from '@/util/common'
......@@ -27,6 +27,8 @@ Vue.component('Select', Select)
Vue.component('Option', Option)
Vue.component('DatePicker', DatePicker)
Vue.component('a-icon', Icon)
Vue.component('a-progress', Progress)
Vue.component('a-divider', Divider)
/* eslint-disable no-new */
new Vue({
el: '#app',
......
export default {
showLoading: false,
curDate: null,
commandList: [
commandList: [ // 物业应急指挥体系
{
title:'指挥长',
name:'周少华',
......@@ -18,7 +18,7 @@ export default {
img:'person.png',
},
],
operateList: [
operateList: [ // 运行体征
{
title:'小区',
img:'community.png',
......@@ -43,5 +43,140 @@ export default {
unit: 'k㎡',
num:'17337718',
},
],
repairList: [ // 报修投诉
{
title:'报修',
img:'repair.png',
num:'15',
allNum: '348',
},
{
title:'投诉',
img:'complaint.png',
num:'26',
allNum: '248',
},
],
discoveryList:[ //智能发现列表上排
{
title:'本月新增',
img:'data1.png',
num:'34',
unit:'个',
},
{
title:'历史累计',
img:'data2.png',
num:'57',
unit:'个',
},
],
foundList:[ //智能发现列表下排
{
title:'门卫脱岗',
img:'mw.png',
num:'1',
},
{
title:'消防通道',
img:'xf.png',
num:'2',
},
{
title:'道闸故障',
img:'dz.png',
num:'4',
},
{
title:'维修资金',
img:'zj.png',
num:'3',
},
{
title:'电梯困人',
img:'dt.png',
num:'1',
},
],
supervisionPeopleList:[ //物业督查检察人员列表
{
name:'张三',
img:'xf.png'
},
{
name:'张三',
img:'xf.png'
},
{
name:'张三',
img:'xf.png'
},
{
name:'张三',
img:'xf.png'
},
{
name:'张三',
img:'xf.png'
},
{
name:'张三',
img:'xf.png'
},
{
name:'张三',
img:'xf.png'
},
{
name:'张三',
img:'xf.png'
},
{
name:'张三',
img:'xf.png'
},
{
name:'张三',
img:'xf.png'
},
],
supervisionCommunityList:[ //物业督查小区列表
{
title:'金港花园一期'
},
{
title:'枫蓝国际中心'
},
{
title:'旺座中心'
},
{
title:'金港花园一期'
},
{
title:'枫蓝国际中心'
},
{
title:'旺座中心'
},
{
title:'金港花园一期'
},
{
title:'枫蓝国际中心'
},
{
title:'旺座中心'
},
],
supervisionSituationList:[ //物业督查检查情况
{
successNum:'13',
num:'20'
}
]
}
<template>
<div class="discovery">
<m-brief
class="d-card"
v-for="data in $store.state.discoveryList"
:key="data.title"
:icon="require(`@/assets/images/${data.img}`)"
:label="data.title"
:count="+data.num"
:unit="data.unit"
countColor="#00f2ff"
size="1.2rem"
/>
<div class="d-list">
<div
class="d-l-card"
v-for="data in $store.state.foundList"
:key="data.title"
>
<img :src="require(`@/assets/images/${data.img}`)" alt="">
<span class="title">{{data.title}}</span>
<span>{{data.num}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'discovery'
}
</script>
<style lang="stylus" scoped>
.discovery
display flex
width 100%
height 100%
align-content flex-start
flex-wrap:wrap
.d-card
width 50%
margin 1rem 0
.d-list
display flex
align-items center
flex-wrap:wrap
.d-l-card
width 47%
background-color rgba(6,27,50,0.9)
margin 0.1rem
padding .7rem
display flex
justify-content space-between
>img
width 1.25rem /* 20/16 */
height 1.25rem /* 20/16 */
span
color $edgeColor
font-weight 700
font-size 1.2rem
>.title
width 70%
color #fff
font-size 1rem
font-weight normal
</style>
<template>
<div class="operation">
<m-brief
<m-brief
@click.native="$emit('select', data)"
class="o-card"
v-for="data in $store.state.operateList"
......@@ -9,6 +9,7 @@
:count="+data.num"
size="1.2rem"
:unit="data.unit"
countColor="#00f2ff"
:icon="require(`@/assets/images/${data.img}`)"/>
</div>
</template>
......
<template>
<div class="repair">
<m-brief
class="r-card"
v-for="(data,i) in $store.state.repairList"
:key="i"
:label="data.title"
:icon="require(`@/assets/images/${data.img}`) "
:unit="`/${data.allNum}`"
:count="+data.num"
countColor="#00f2ff"
size="1.2rem"
/>
</div>
</template>
<script>
export default {
name: 'repair',
}
</script>
<style lang="stylus" scoped>
.repair
display flex
align-items center
width 100%
height 100%
.r-card
width 50%
</style>
<template>
<div class="supervision">
<div class="people">
<p>
检察人员
<span>[{{$store.state.supervisionPeopleList.length}}]</span>
</p>
<div class="person" v-for="(data,i) in $store.state.supervisionPeopleList" :key="i">
<img :src="require(`@/assets/images/${data.img}`)" alt="">
<p>{{data.name}}</p>
</div>
</div>
<div class="community">
<p>检察小区</p>
<div v-for="(data,i) in $store.state.supervisionCommunityList" :key="i">
<p>{{data.title}}</p>
</div>
</div>
<div class="situation">
<p>检察情况</p>
<div>
<img :src="require(`@/assets/images/modify.png`)">
<div v-for="(data,i) in $store.state.supervisionSituationList" :key="i">
<p>整改单</p>
<span>{{data.successNum}}/{{data.num}}</span>
<a-progress strokeColor="#00f2ff" :percent="data.successNum/data.num*100" :showInfo="false" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'supervision'
}
</script>
<style lang="stylus" scoped>
.supervision
display flex
width 100%
height 100%
flex-wrap wrap
align-items flex-start
.people
width 100%
display flex
flex-wrap wrap
>p
width 100%
color #fff
font-weight 700
>span
color $edgeColor
.person
width 20%
display flex
align-items center
color $fontColor
margin-top .5rem
>img
width 1rem
height 1rem
margin 0 .2rem
.community
width 100%
display flex
align-items center
justify-content center
flex-wrap wrap
>p
width 100%
color #fff
font-weight 700
margin-bottom 1rem
>div
width 30%
border-left 2px solid yellow
margin .3rem
padding 0 .3rem
.situation
width 100%
>p
width 100%
color #fff
font-weight 700
>div
width 100%
margin-top 1rem
display flex
align-items flex-start
img
width 2.5rem
height 2.5rem
margin 0 0.5rem
div
width 100%
display flex
align-items center
flex-wrap wrap
>p
width 50%
>span
font-size 1.2rem
text-align right
width 50%
</style>
......@@ -8,7 +8,7 @@
'box4 . box6',
]"
columns="1fr 2.5fr 1fr"
rows="5rem 1fr 2fr 1fr 2fr"
rows="5rem 1fr 1.5fr 1fr 2fr"
gap="0"
:bgImg="require('@/assets/images/stars-bg.png')"
style="padding: 0"
......@@ -21,10 +21,13 @@
<Operation @select="handleSelect" />
</m-card>
<m-card area="box3" title="投诉保修" mode="4" :icon="require('@/assets/images/icon3.png')">
<Repair />
</m-card>
<m-card area="box4" title="智能发现" mode="4" :icon="require('@/assets/images/icon4.png')">
<Discovery />
</m-card>
<m-card area="box5" title="物业督查" mode="4" :icon="require('@/assets/images/icon5.png')">
<Supervision/>
</m-card>
<m-card area="box6" title="协同处置" mode="4" :icon="require('@/assets/images/icon6.png')">
</m-card>
......@@ -34,11 +37,17 @@
<script>
import EmergencyCommand from '@/views/components/emergencyCommand.vue'
import Operation from '@/views/components/operation.vue'
import Repair from '@/views/components/repair.vue'
import Discovery from '@/views/components/discovery.vue'
import Supervision from '@/views/components/supervision.vue'
export default {
name: 'Main',
components: {
EmergencyCommand,
Operation,
Repair,
Discovery,
Supervision,
},
methods: {
handleSelect(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