Skip to content

W
wisdom-property
Commit 42ba3a51 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

界面调整

parent 7ba61613
Hide whitespace changes
Inline Side-by-side
Showing with 378 additions and 366 deletions
src/App.vue
View file @ 42ba3a51
......@@ -34,7 +34,7 @@ html, body
-moz-osx-font-smoothing grayscale
width 100%
height 100%
font-size 1rem
font-size 1.01rem
overflow: hidden
color #eee
......
src/components/MonitorComponents/MonitorChart/monitor-chart.vue
View file @ 42ba3a51
......@@ -303,10 +303,10 @@ export default {
legend: {
width: '100%',
data: [],
itemWidth: this.fontSize * 1.1,
itemWidth: this.fontSize * 1.5,
textStyle: {
color: '#ccc',
fontSize: this.fontSize * 0.9,
fontSize: this.fontSize,
},
},
tooltip: {
......@@ -324,7 +324,7 @@ export default {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize * 0.9,
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
......
src/main.js
View file @ 42ba3a51
......@@ -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, Message, Carousel, CarouselItem, Tooltip, Icon, Circle} from 'view-design'
import {Row, Col, Select, Option, DatePicker, Tooltip, Icon, Circle, Tabs, TabPane} from 'view-design'
import ajax from '@/server/ajax'
import api from '@/server/api'
import common from '@/util/common'
......@@ -20,18 +20,17 @@ Vue.prototype.$ajax = ajax
Vue.prototype.$api = api
Vue.prototype.$com = common
Vue.prototype.$moment = moment
Vue.prototype.$Message = Message // 添加全局提示
Vue.use(MonitorComponents)
Vue.component('Row', Row)
Vue.component('i-col', Col)
Vue.component('Select', Select)
Vue.component('Option', Option)
Vue.component('DatePicker', DatePicker)
Vue.component('Carousel', Carousel)
Vue.component('CarouselItem', CarouselItem)
Vue.component('Tooltip', Tooltip)
Vue.component('Icon', Icon)
Vue.component('i-circle', Circle)
Vue.component('Tabs', Tabs)
Vue.component('TabPane', TabPane)
/* eslint-disable no-new */
new Vue({
......
src/server/api.js
View file @ 42ba3a51
......@@ -5,11 +5,13 @@ case 'production':
break
default:
// BASE_URL = 'http://yapi.omniview.pro/mock/54/propertyinspector/api/v1/'
BASE_URL = 'http://www.962121.net/hmfmstest/shanghaiwuye/propertyinspector/api/v1'
// BASE_URL = 'http://www.962121.net/hmfmstest/shanghaiwuye/propertyinspector/api/v1'
BASE_URL = 'http://hm.omniview.pro/api/service-special'
};
export default {
BASE_URL,
POST_CHECKCOMMUNITY_LIST:'sharingplatform/sectListForOneDay', //物业督查---每一个主题下某天已检查的小区列表
POST_CHECKPEOPLE_LIST:'sharingplatform/getInspectors', // 检查人员列表
GET_SENSOR: '/public/sensor/discover'
}
src/store/actions.js
View file @ 42ba3a51
......@@ -57,13 +57,13 @@ export default {
]
const REPAIRLIST = [ // 报修投诉
{
title:'报修',
title:'报修数量',
img:'repair.png',
num:'15',
allNum: '348',
},
{
title:'投诉',
title:'投诉数量',
img:'complaint.png',
num:'26',
allNum: '248',
......@@ -270,13 +270,13 @@ export default {
]
const REPAIRLIST = [ // 报修投诉
{
title:'报修',
title:'报修数量',
img:'repair.png',
num:'2',
allNum: '38',
},
{
title:'投诉',
title:'投诉数量',
img:'complaint.png',
num:'6',
allNum: '48',
......@@ -592,13 +592,13 @@ export default {
]
const REPAIRLIST = [ // 报修投诉
{
title:'报修',
title:'报修数量',
img:'repair.png',
num:'1',
allNum: '3',
},
{
title:'投诉',
title:'投诉数量',
img:'complaint.png',
num:'1',
allNum: '5',
......@@ -924,13 +924,13 @@ export default {
]
const REPAIRLIST = [ // 报修投诉
{
title:'报修',
title:'报修数量',
img:'repair.png',
num:'1',
allNum: '3',
},
{
title:'投诉',
title:'投诉数量',
img:'complaint.png',
num:'1',
allNum: '5',
......
src/views/components/basic-data.vue
View file @ 42ba3a51
......@@ -11,7 +11,7 @@
:unit="data.unit"
countColor="#00f2ff"
labelColor="#61c2f3"
:icon="require(`@/assets/images/${data.img}`)"/>
:icon="data.img ? require(`@/assets/images/${data.img}`) : null"/>
</div>
</template>
......
src/views/components/discovery.vue
View file @ 42ba3a51
......@@ -9,7 +9,7 @@
:count="+data.num"
:unit="data.unit"
countColor="gold"
size="1.2rem"
size="1.4rem"
/>
<div class="d-list">
<div
......@@ -66,7 +66,7 @@ export default {
align-items center
width 80%
color #fff
font-size 0.8rem
font-size 0.9rem
font-weight normal
>img
width 1.25rem
......
src/views/components/govern-analysis.vue
View file @ 42ba3a51
<template>
<div class="govern-analysis" @mouseenter="auto = false" @mouseleave="auto = true" >
<Carousel v-model="cur" :autoplay="auto" :autoplay-speed="5000" dots="none">
<CarouselItem>
<div class="content">
<div class="title">物业服务满意度得分较低项目</div>
<div><p>定期公布维修资金使用项目</p><p>76.02</p></div>
<div><p>定期公布公共收益项目</p><p>76.82</p></div>
<div><p>对违法搭建、群租问题定期巡视、发现</p><p>77.61</p></div>
<div><p>投诉及时回复</p><p>79.59</p></div>
<div><p>提供便民服务或特约服务</p><p>79.81</p></div>
<div><p>建筑垃圾有制定堆放点</p><p>80.34</p></div>
</div>
</CarouselItem>
<CarouselItem>
<div class="content">
<div class="title">物业服务企业整体满意度倒数企业</div>
<div><p>上海豫园旅游商城物业管理有限公司</p><p>67.18</p></div>
<div><p>上海华夏物业有限公司</p><p>69.74</p></div>
<div><p>上海振南物业有限公司</p><p>75.29</p></div>
<div><p>上海霞悦物业管理有限公司</p><p>77.71</p></div>
<div><p>上海东方明珠物产管理有限公司</p><p>78.27</p></div>
<div><p>上海富宁物业管理有限公司</p><p>79.51</p></div>
</div>
</CarouselItem>
<CarouselItem>
<div class="chart-wrapper">
<p class="title">南码头街道业委会运作情况</p>
<m-chart :config="operationConfig" :data="operationData" />
</div>
</CarouselItem>
<CarouselItem>
<div class="card">
<p class="title">南码头街道12345诉求数量全市排名</p>
<div class="inner">
<div v-for="(item, i) in list" :key="i">
<p>{{item.title}}</p>
<p>
<b><m-count style="color:#00f2ff;font-size:1.2rem;" :value="item.count" :decimal="0"/></b>
<span v-if="item.unit">{{item.unit}}</span>
<i v-if="item.info">{{item.info}}</i>
</p>
</div>
</div>
</div>
</CarouselItem>
<CarouselItem>
<div class="chart-wrapper">
<p class="title">南码头街道综合管理诉求二级指标占比</p>
<m-chart :config="manageConfig" :data="manageData" />
</div>
</CarouselItem>
</Carousel>
<div class="govern-analysis">
<div @click="$emit('select', item.name)" class="item" v-for="item in datas" :key="item.name">
<img src="@/assets/images/icon1.png"/>
<p>{{item.name}}</p>
</div>
</div>
</template>
......@@ -59,82 +12,12 @@ export default {
name: 'GovernAnalysis',
data() {
return {
auto: true,
cur: 0,
list: [
{
title: '2019诉求量',
count: 1582,
unit: '件',
},
{
title: '数量变化',
count: 115,
unit: '%',
},
{
title: '全市排名',
count: 41,
info: '较去年+51',
},
{
title: '2019诉求密度',
count: 46,
unit: '件',
},
{
title: '密度变化',
count: 112,
unit: '%',
},
{
title: '全市排名',
count: 17,
info: '较去年+70',
},
],
operationConfig: {
colors: [['#a45cd1', '#3e29b1'], ['#00f2fe', '#007eff']],
legend: {
align: 'right',
},
shape: [
{key: 'nanmatou', name: '南码头', type: 'bar', barWidth: '30%'},
{key: 'pudong', name: '浦东总体', type: 'bar', barWidth: '30%'},
],
xAxis: {
key: 'name',
},
},
operationData: [
{name: '规范', pudong: 24.87, nanmatou: 31.38},
{name: '正常', pudong: 45.93, nanmatou: 36.49},
{name: '还可以', pudong: 25.87, nanmatou: 26.83},
{name: '不正常', pudong: 1.06, nanmatou: 0},
{name: '不了解', pudong: 2.27, nanmatou: 5.29},
],
manageConfig: {
grid: {
right: '1%',
},
legend: {
align: 'right',
orient: 'vertical',
},
shape: [
{key: 'value', type: 'pie', center: ['20%', '50%'], radius: [15, 65], roseType: 'area',},
],
},
manageData: [
{name: '公共秩序、环境维护', value: 36.17},
{name: '非物业类', value: 34.57},
{name: '公用设施养护', value: 8.88},
{name: '物业服务规范', value: 7.04},
{name: '业委会、业主大会', value: 5.14},
{name: '自用部位维修', value: 4.89},
{name: '物业使用规范', value: 2.09},
{name: '维修资金管理', value: 1.21},
// {name: '其他', value: 47.9},
datas: [
{name: '物业服务满意度得分较低项目'},
{name: '物业服务企业整体满意度倒数企业'},
{name: '南码头街道业委会运作情况'},
{name: '南码头街道12345诉求数量全市排名'},
{name: '南码头街道综合管理诉求二级指标占比'},
],
}
......@@ -143,64 +26,19 @@ export default {
</script>
<style lang="stylus" scoped>
$title()
margin 1rem 0
font-size 1.1rem
text-align center
// font-weight bold
.govern-analysis
width 100%
height 100%
.chart-wrapper
width 100%
height 100%
.title
$title()
.content
width 100%
height 96%
div
display flex
align-items center
justify-content space-between
padding .3rem .5rem
background rgba(0,0,0,0.5)
margin-bottom .5rem
&.title
$title()
justify-content center
background none
>p
&:last-child
color $edgeColor
// font-weight bold
.card
.title
$title()
margin-bottom .5rem
.inner
display flex
flex-wrap wrap
>div
width 33%
text-align center
margin-top 1rem
>p
color #8fb6fb
span
color #fff
i
color red
</style>
<style lang="stylus">
.govern-analysis
.ivu-carousel
height 100%
.ivu-carousel-list
height 100%
.ivu-carousel-track
height 100%
.ivu-carousel-item
height 90% !important
display flex
flex-wrap wrap
.item
display flex
width 50%
cursor pointer
&:hover
color $color-blue
img
width 1.2rem
height @width
margin .3rem .5rem 0 0
</style>
src/views/components/manage-issue.vue
View file @ 42ba3a51
<template>
<div class="manage-issue">
<div class="circle-wrapper" :style="`height: ${showList ? '40%' : ''}`">
<div class="circle-wrapper">
<i-circle
v-for="circle in circles"
:key="circle.title"
:percent="circle.count"
:size="85 * sizeRate"
:size="90 * sizeRate"
:trail-width="2 * sizeRate"
:stroke-width="6 * sizeRate"
trail-color="gray"
......@@ -16,14 +16,19 @@
</div>
</i-circle>
</div>
<div class="list" v-if="showList">
<Tabs value="all" size="small" @on-click="handleClick">
<TabPane label="管理提醒" name="all"/>
<TabPane label="安全类" name="安全"/>
<TabPane label="有序类" name="有序"/>
<TabPane label="干净类" name="干净"/>
</Tabs>
<div class="list">
<div
class="item"
v-for="item in list"
v-for="item in datas"
:key="item.name"
>
<span class="title">
<img src="@/assets/images/xf.png"/>
{{item.name}}
</span>
<span :style="+item.count !== 0 ? 'color:red' : ''">{{item.count}}</span>
......@@ -35,48 +40,71 @@
<script>
export default {
name: 'ManageIssue',
props: {
showList: {
type: Boolean,
default: false,
}
},
data() {
return {
circles: [
{
title: '更安全',
title: '安全',
count: 40,
color: '#fee902',
},
{
title: '更有序',
title: '有序',
count: 80,
color: '#01a7ff',
},
{
title: '更干净',
title: '干净',
count: 19,
color: '#8fd618',
},
],
datas: [],
}
},
mounted() {
this.datas = this.list
},
computed: {
list() {
let data = require('../../../static/govern-issue.json')
if (this.$route.name === 'linyiercun') {
return require('../../../static/govern-linyi.json')
} else {
return require('../../../static/govern-issue.json')
data = require('../../../static/govern-linyi.json')
}
return data.sort((a, b) => b.count - a.count)
},
sizeRate() {
return Math.floor(screen.height * 1.48 / 100 / 10)
},
},
methods: {
handleClick(name) {
if (name === 'all') {
this.datas = this.list
return
}
this.datas = this.list.filter(item => item.type == name)
}
},
}
</script>
<style lang="stylus">
$blue = #3391FF
.manage-issue
.ivu-tabs-bar
margin-bottom 0.5rem
border-bottom .1rem solid $color-map()
.ivu-tabs-nav
.ivu-tabs-ink-bar
background-color $edgeColor
.ivu-tabs-tab
font-size 1rem
padding 0.3rem 0.5rem
color $blue
&.ivu-tabs-tab-active
color #fff
background $blue
</style>
<style lang="stylus" scoped>
.manage-issue
width 100%
......@@ -87,17 +115,15 @@ export default {
.circle-wrapper
display flex
align-items center
height 100%
height 40%
justify-content space-around
margin-bottom .5rem
.list
display flex
flex-wrap wrap
// height 60%
flex 1
overflow-y auto
.item
float left
width 49%
height 3rem
background-color rgba(6,27,50,0.9)
margin 0.1rem
padding 0 .7rem
......@@ -105,17 +131,10 @@ export default {
justify-content space-between
align-items center
span
color gold
font-weight 700
&.title
display flex
align-items center
width 80%
color #fff
font-size 0.8rem
font-size 0.9rem
font-weight normal
>img
width 1.25rem
height 1.25rem
margin-right 0.8rem
</style>
src/views/components/map-menu.vue
View file @ 42ba3a51
......@@ -24,8 +24,8 @@ export default {
}
}
return {
left: '1%',
bottom: '1%',
left: '0',
bottom: '0',
}
}
}
......
src/views/components/repair.vue
View file @ 42ba3a51
......@@ -6,10 +6,10 @@
:key="i"
:label="data.title"
:icon="require(`@/assets/images/${data.img}`) "
:unit="`/ ${data.allNum}`"
:unit="`/ ${data.allNum} 个`"
:count="+data.num"
countColor="gold"
size="1.2rem"
size="1.4rem"
/>
</div>
</template>
......@@ -28,5 +28,6 @@ export default {
height 100%
.card
width 50%
padding-left 1rem
</style>
src/views/linyi.vue
View file @ 42ba3a51
......@@ -7,11 +7,10 @@
'box2 . box5',
'box8 . box3',
'box8 . box10',
'box8 . box6',
'box9 box7 box6',
'box6 box7 box9',
]"
columns="1fr 2fr 1fr"
rows="3rem 1fr 1fr 1fr 1.5fr 1.5fr 0.5fr 2fr"
rows="3rem 1fr 1fr 1fr 1.5fr 1.5fr 1.9fr"
gap="0.5rem"
style="padding: 0.5rem"
:complete="complete"
......@@ -32,7 +31,7 @@
<m-card v-show="complete" area="box10" title="辅助应用" mode="4">
<Application @elevator="showEleMap = true"/>
</m-card>
<m-card v-show="complete" area="box9" enter="fadeInLeft" leave="fadeOutLeft" title="视频监控" mode="4">
<m-card v-show="complete" area="box9" title="视频监控" mode="4">
<div style="display:flex;height:100%;padding:0.3rem;justify-content:space-between;">
<ImgContainer style="width:48%;" text="小区入口岗亭" src="gate1.png"/>
<ImgContainer style="width:48%;" text="小区入口岗亭" src="gate2.png"/>
......@@ -44,7 +43,7 @@
<m-card v-show="complete" area="box3" title="投诉报修" mode="4">
<Repair />
</m-card>
<m-card v-show="complete" area="box6" title="重点工作智能提示" mode="4" :width="50">
<m-card v-show="complete" area="box6" enter="fadeInLeft" leave="fadeOutLeft" title="重点工作智能提示" mode="4" :width="50">
<div v-if="complete" class="analysis-wrapper">
<div v-for="item in remindList" :key="item.title" @click="handleViewRemind(item.key)">
<p><img src="@/assets/images/home.png"/>{{item.title}}</p>
......@@ -74,12 +73,9 @@
<m-modal v-model="showEleMap" width="90%" title="电梯加装地图">
<iframe style="width:100%;min-height:80vh;background:#fff;" src="http://211.136.105.193/elev/#/?name=南码头" frameborder="0"/>
</m-modal>
<m-modal v-model="showImgModal" title="图片">
<img v-if="showImgModal" style="width: 100%;" :src="require(`@/assets/images/${curImg}`)" />
</m-modal>
<m-modal v-model="showEventModal" title="事件详情">
<m-form v-if="showEventModal" title="基本信息" :label-width="8" :model="eventData" :layout="eventLayout"/>
<img v-if="showEventModal" style="width:100%;" :src="require(`@/assets/images/${eventData.img}`)"/>
<img v-if="showEventModal" style="width:100%;" :src="eventData.img ? require(`@/assets/images/${eventData.img}`) : null"/>
</m-modal>
</m-grid>
</template>
......@@ -124,10 +120,6 @@ export default {
curTitle: '',
complete: false,
showEleMap: false,
curTab: 0,
curImg: '',
showImgModal: false,
// images: ['d1.png', 'd2.png', 'd3.png', 'd4.png', 'd5.png', 'd6.png', 'd7.png'],
remindList: [
{key: 'linyi', title: '临沂二村', total: 17, detail: [
{title: '屋顶漏水', num: 6},
......@@ -166,18 +158,15 @@ export default {
],
remindData: [],
showEventModal: false,
eventData: {
name: 'test',
des: 'test'
},
eventData: {},
eventLayout: [
{
type: {
label: '预警类型',
width: 12,
},
method: {
label: '发现方式',
addr: {
label: '地址',
width: 12,
}
}
......@@ -203,12 +192,12 @@ export default {
},
handleMapClick({layername, data}) {
switch (layername) {
case 'community': // 当点击图层为小区时
const {X, Y} = data[0]
case 'sensor':
const {x, y} = data[0]
const {map} = this.$refs
map.removeGifPoint('selected-point') // 先移除已点击的点
map.focus(X, Y, 9)
map.addGifPoint({name: 'selected-point', key: 'COMMUNITYID', labelKey: 'COMMUNITYNAME', data: data[0], icon: 'yellow.png'})
map.focus(x, y, 9)
map.addGifPoint({name: 'selected-point', key: 'id', data: data[0], icon: 'yellow.png'})
this.handleEventModal(data[0])
break
default:
......@@ -220,22 +209,25 @@ export default {
this.remindData = data[key]
this.remindModal = true
},
handleEventModal({msg}) {
this.eventData = msg
handleEventModal({type, addr}) {
this.eventData = {img: null, type, addr}
this.showEventModal = true
},
clickCommunity(data){
console.log(data)
},
addPoints() {
const data = [
{TASKID:'（补）临沂二村', COMMUNITYID: '（补）临沂二村', msg: {img: '1.png', type: '屋顶违建', method: '物联传感'}, X: 3706.690186, Y: -4234.159912},
{TASKID:'铭城园', COMMUNITYID: '铭城园', msg: {img: '2.png', type: '非定时倾倒垃圾', method: '物联传感'}, X: 3787.49700927734, Y: -4072.19757080078},
{TASKID:'海浦小区', COMMUNITYID: '海浦小区', msg: {img: '4.png', type: '楼道充电', method: '视频识别'}, X: 3750.58459472656, Y: -3983.67626953125},
{TASKID:'浦三路12弄', COMMUNITYID: '浦三路12弄', msg: {img: '4.png', type: '楼道充电', method: '视频识别'}, X: 3731.8646240234375, Y: -4073.232177734375},
{TASKID:'4号大楼', COMMUNITYID: '4号大楼', msg: {img: '3.png', type: '集中充电异常', method: '视频识别'}, X: 3706.68023681641, Y: -4030.7874558594},
]
this.$refs.map.addPoint({name: 'community', key: 'COMMUNITYID', data: data, icon: 'yellow.png'})
// const data = [
// {TASKID:'（补）临沂二村', COMMUNITYID: '（补）临沂二村', msg: {img: '1.png', type: '屋顶违建', method: '物联传感'}, X: 3706.690186, Y: -4234.159912},
// {TASKID:'铭城园', COMMUNITYID: '铭城园', msg: {img: '2.png', type: '非定时倾倒垃圾', method: '物联传感'}, X: 3787.49700927734, Y: -4072.19757080078},
// {TASKID:'海浦小区', COMMUNITYID: '海浦小区', msg: {img: '4.png', type: '楼道充电', method: '视频识别'}, X: 3750.58459472656, Y: -3983.67626953125},
// {TASKID:'浦三路12弄', COMMUNITYID: '浦三路12弄', msg: {img: '4.png', type: '楼道充电', method: '视频识别'}, X: 3731.8646240234375, Y: -4073.232177734375},
// {TASKID:'4号大楼', COMMUNITYID: '4号大楼', msg: {img: '3.png', type: '集中充电异常', method: '视频识别'}, X: 3706.68023681641, Y: -4030.7874558594},
// ]
// this.$refs.map.addPoint({name: 'community', key: 'COMMUNITYID', data: data, icon: 'yellow.png'})
this.$ajax.get({
url: this.$api.GET_SENSOR,
}).then(res => {
const sensorList = this.$com.confirm(res, 'data.content', [])
this.$refs.map.addPoint({name: 'sensor', key: 'id', data: sensorList, icon: 'yellow.png'})
})
},
handleStreetSelect(index, name) {
if (name === '临沂二村') return
......@@ -245,10 +237,6 @@ export default {
}
this.$router.push({path: '/'})
},
handleViewImg(img) {
this.curImg = img
this.showImgModal = true
},
...mapActions([
'initData',
'initNanmatouData',
......@@ -266,10 +254,10 @@ export default {
>div
display flex
align-items center
padding 0.2rem 0 0.2rem 0.3rem
padding 0 0 0 0.3rem
cursor pointer
background rgba(6,27,50,0.9)
margin-bottom .4rem
&:nth-child(2n+1)
background rgba(6,27,50,0.9)
&:hover
color $color-blue
p
......
src/views/main.vue
View file @ 42ba3a51
......@@ -4,10 +4,10 @@
'title title title',
'box1 . box5',
'box2 . box5',
'box6 . box3',
'box6 . box4',
'box6 . box10',
'box8 box7 box9',
'box8 . box3',
'box8 . box4',
'box8 . box10',
'box6 box7 box9',
]"
columns="1fr 2fr 1fr"
rows="3rem 1fr 1.5fr 1fr 1fr 1.3fr 1.8fr"
......@@ -59,7 +59,7 @@
<EmergencyCommand @changeMode="changeMode"/>
</m-card>
<m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box2" title="基础数据" mode="4">
<Operation @select="handleSelect" />
<Operation />
</m-card>
<m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box8" title="管理要素" mode="4" btn="list">
<ManageIssue />
......@@ -68,7 +68,7 @@
<Repair />
</m-card>
<m-card v-show="complete" area="box4" title="督查提醒" mode="4">
<Supervision @clickCommunity="clickCommunity"/>
<Supervision />
</m-card>
<m-card v-show="complete" area="box9" title="视频监控" mode="4">
<div style="display:flex;height:100%;padding:0.3rem;justify-content:space-between;">
......@@ -83,14 +83,7 @@
<Application @elevator="showEleMap = true"/>
</m-card>
<m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box6" title="治理分析" mode="4">
<GovernAnalysis v-if="complete"/>
<!-- <div class="analysis-wrapper">
<Carousel v-if="complete" autoplay v-model="curTab" @on-click="handleViewImg(images[$event])" loop :autoplay-speed="5000">
<CarouselItem v-for="img in images" :key="img">
<img style="width:100%;height:100%;display:block;" :src="require(`@/assets/images/${img}`)" />
</CarouselItem>
</Carousel>
</div> -->
<GovernAnalysis @select="(name) => {this.showAnalysisDetail = true; this.analysisTitle = name;}" v-if="complete"/>
</m-card>
<m-card v-show="complete" enter="fadeInUp" leave="fadeOutDown" area="box7" title="联勤联动动态流程" mode="4" :width="25">
<Handle v-if="complete"/>
......@@ -109,6 +102,49 @@
<m-modal v-model="showImgModal" title="图片">
<img v-if="showImgModal" style="width: 100%;" :src="require(`@/assets/images/${curImg}`)" />
</m-modal>
<m-modal v-model="showAnalysisDetail" title="治理分析">
<div class="analysis-modal">
<div v-if="analysisTitle == '物业服务满意度得分较低项目'" class="content">
<div class="title">物业服务满意度得分较低项目</div>
<div><p>定期公布维修资金使用项目</p><p>76.02</p></div>
<div><p>定期公布公共收益项目</p><p>76.82</p></div>
<div><p>对违法搭建、群租问题定期巡视、发现</p><p>77.61</p></div>
<div><p>投诉及时回复</p><p>79.59</p></div>
<div><p>提供便民服务或特约服务</p><p>79.81</p></div>
<div><p>建筑垃圾有制定堆放点</p><p>80.34</p></div>
</div>
<div v-else-if="analysisTitle == '物业服务企业整体满意度倒数企业'" class="content">
<div class="title">物业服务企业整体满意度倒数企业</div>
<div><p>上海豫园旅游商城物业管理有限公司</p><p>67.18</p></div>
<div><p>上海华夏物业有限公司</p><p>69.74</p></div>
<div><p>上海振南物业有限公司</p><p>75.29</p></div>
<div><p>上海霞悦物业管理有限公司</p><p>77.71</p></div>
<div><p>上海东方明珠物产管理有限公司</p><p>78.27</p></div>
<div><p>上海富宁物业管理有限公司</p><p>79.51</p></div>
</div>
<div v-else-if="analysisTitle == '南码头街道业委会运作情况'" class="chart-wrapper">
<p class="title">南码头街道业委会运作情况</p>
<m-chart :config="operationConfig" :data="operationData" />
</div>
<div v-else-if="analysisTitle == '南码头街道12345诉求数量全市排名'" class="card">
<p class="title">南码头街道12345诉求数量全市排名</p>
<div class="inner">
<div v-for="(item, i) in list" :key="i">
<p>{{item.title}}</p>
<p>
<b><m-count style="color:#00f2ff;font-size:1.2rem;" :value="item.count" :decimal="0"/></b>
<span v-if="item.unit">{{item.unit}}</span>
<i v-if="item.info">{{item.info}}</i>
</p>
</div>
</div>
</div>
<div v-else-if="analysisTitle == '南码头街道综合管理诉求二级指标占比'" class="chart-wrapper">
<p class="title">南码头街道综合管理诉求二级指标占比</p>
<m-chart :config="manageConfig" :data="manageData" />
</div>
</div>
</m-modal>
</m-grid>
</template>
......@@ -156,10 +192,8 @@ export default {
showModeMenu: false,
complete: false,
showEleMap: false,
curTab: 0,
curImg: '',
showImgModal: false,
images: ['c1.png', 'c2.png', 'c3.png', 'c4.png', 'c5.png', 'c6.png'],
personList: [
{name: '张三', phone: '13764650559'},
{name: '李四', phone: '13764330559'},
......@@ -174,6 +208,80 @@ export default {
{name: '王五', phone: '13764633559'},
{name: '赵六', phone: '13394650559'},
],
showAnalysisDetail: false,
analysisTitle: null,
list: [
{
title: '2019诉求量',
count: 1582,
unit: '件',
},
{
title: '数量变化',
count: 115,
unit: '%',
},
{
title: '全市排名',
count: 41,
info: '较去年+51',
},
{
title: '2019诉求密度',
count: 46,
unit: '件',
},
{
title: '密度变化',
count: 112,
unit: '%',
},
{
title: '全市排名',
count: 17,
info: '较去年+70',
},
],
operationConfig: {
colors: [['#a45cd1', '#3e29b1'], ['#00f2fe', '#007eff']],
legend: {
align: 'right',
},
shape: [
{key: 'nanmatou', name: '南码头', type: 'bar', barWidth: '30%'},
{key: 'pudong', name: '浦东总体', type: 'bar', barWidth: '30%'},
],
xAxis: {
key: 'name',
},
},
operationData: [
{name: '规范', pudong: 24.87, nanmatou: 31.38},
{name: '正常', pudong: 45.93, nanmatou: 36.49},
{name: '还可以', pudong: 25.87, nanmatou: 26.83},
{name: '不正常', pudong: 1.06, nanmatou: 0},
{name: '不了解', pudong: 2.27, nanmatou: 5.29},
],
manageConfig: {
legend: {
align: 'right',
orient: 'vertical',
},
shape: [
{key: 'value', type: 'pie', center: ['30%', '40%'], radius: [20, 110], roseType: 'area',},
],
},
manageData: [
{name: '公共秩序、环境维护', value: 36.17},
{name: '非物业类', value: 34.57},
{name: '公用设施养护', value: 8.88},
{name: '物业服务规范', value: 7.04},
{name: '业委会、业主大会', value: 5.14},
{name: '自用部位维修', value: 4.89},
{name: '物业使用规范', value: 2.09},
{name: '维修资金管理', value: 1.21},
// {name: '其他', value: 47.9},
],
}
},
methods: {
......@@ -217,12 +325,6 @@ export default {
this.complete = false
this.emergencyMode = true
},
handleSelect(data) {
console.log(data)
},
clickCommunity(data){
console.log(data)
},
handleStreetSelect(index, name) {
if (name === '临沂二村') {
this.$router.push({path: '/linyiercun'})
......@@ -288,18 +390,6 @@ export default {
}
</script>
<style lang="stylus">
.analysis-wrapper
width 100%
height 100%
overflow hidden
.ivu-carousel
height 100%
overflow hidden
img
height 100%
width 100%
</style>
<style lang="stylus" scoped>
.mode-btn
display block
......@@ -346,11 +436,50 @@ export default {
img
width 1rem
height @width
.analysis-wrapper
width 100%
height 100%
overflow hidden
img
$title()
margin 1rem 0
font-size 1.2rem
text-align center
.analysis-modal
.chart-wrapper
width 100%
height 40vh
.title
$title()
.content
width 100%
height 80%
height 96%
div
display flex
align-items center
justify-content space-between
padding .5rem 1rem
background rgba(0,0,0,0.3)
margin-bottom 1rem
&.title
$title()
justify-content center
background none
>p
&:last-child
color $edgeColor
// font-weight bold
.card
.title
$title()
margin-bottom 1rem
.inner
display flex
flex-wrap wrap
>div
width 33%
text-align center
margin-top 2rem
>p
color #8fb6fb
span
color #fff
i
color red
</style>
src/views/shenjiang.vue
View file @ 42ba3a51
......@@ -7,11 +7,10 @@
'box2 . box5',
'box8 . box3',
'box8 . box10',
'box8 . box6',
'box9 box7 box6',
'box6 box7 box9',
]"
columns="1fr 2fr 1fr"
rows="3rem 1fr 1fr 1fr 1.5fr 1.5fr 0.5fr 2fr"
rows="3rem 1fr 1fr 1fr 1.5fr 1.5fr 1.9fr"
gap="0.5rem"
style="padding: 0.5rem"
:complete="complete"
......@@ -32,7 +31,7 @@
<m-card v-show="complete" area="box10" title="辅助应用" mode="4">
<Application @elevator="showEleMap = true"/>
</m-card>
<m-card v-show="complete" area="box9" enter="fadeInLeft" leave="fadeOutLeft" title="视频监控" mode="4">
<m-card v-show="complete" area="box9" title="视频监控" mode="4">
<div style="display:flex;height:100%;padding:0.3rem;justify-content:space-between;">
<ImgContainer style="width:48%;" text="小区入口岗亭" src="gate1.png"/>
<ImgContainer style="width:48%;" text="小区入口岗亭" src="gate2.png"/>
......@@ -44,7 +43,7 @@
<m-card v-show="complete" area="box3" title="投诉报修" mode="4">
<Repair />
</m-card>
<m-card v-show="complete" area="box6" title="重点工作智能提示" mode="4" :width="50">
<m-card v-show="complete" area="box6" enter="fadeInLeft" leave="fadeOutLeft" title="重点工作智能提示" mode="4" :width="50">
<div v-if="complete" class="analysis-wrapper">
<div v-for="item in remindList" :key="item.title" @click="handleViewRemind(item.key)">
<p><img src="@/assets/images/home.png"/>{{item.title}}</p>
......@@ -74,12 +73,9 @@
<m-modal v-model="showEleMap" width="90%" title="电梯加装地图">
<iframe style="width:100%;min-height:80vh;background:#fff;" src="http://211.136.105.193/elev/#/?name=南码头" frameborder="0"/>
</m-modal>
<m-modal v-model="showImgModal" title="图片">
<img v-if="showImgModal" style="width: 100%;" :src="require(`@/assets/images/${curImg}`)" />
</m-modal>
<m-modal v-model="showEventModal" title="事件详情">
<m-form v-if="showEventModal" title="基本信息" :label-width="8" :model="eventData" :layout="eventLayout"/>
<img v-if="showEventModal" style="width:100%;" :src="require(`@/assets/images/${eventData.img}`)"/>
<img v-if="showEventModal" style="width:100%;" :src="eventData.img ? require(`@/assets/images/${eventData.img}`) : null"/>
</m-modal>
</m-grid>
</template>
......@@ -124,10 +120,6 @@ export default {
curTitle: '',
complete: false,
showEleMap: false,
curTab: 0,
curImg: '',
showImgModal: false,
// images: ['d1.png', 'd2.png', 'd3.png', 'd4.png', 'd5.png', 'd6.png', 'd7.png'],
remindList: [
{key: 'linyi', title: '临沂二村', total: 17, detail: [
{title: '屋顶漏水', num: 6},
......@@ -166,18 +158,15 @@ export default {
],
remindData: [],
showEventModal: false,
eventData: {
name: 'test',
des: 'test'
},
eventData: {},
eventLayout: [
{
type: {
label: '预警类型',
width: 12,
},
method: {
label: '发现方式',
addr: {
label: '地址',
width: 12,
}
}
......@@ -205,12 +194,12 @@ export default {
},
handleMapClick({layername, data}) {
switch (layername) {
case 'community': // 当点击图层为小区时
const {X, Y} = data[0]
case 'sensor':
const {x, y} = data[0]
const {map} = this.$refs
map.removeGifPoint('selected-point') // 先移除已点击的点
map.focus(X, Y, 9)
map.addGifPoint({name: 'selected-point', key: 'COMMUNITYID', labelKey: 'COMMUNITYNAME', data: data[0], icon: 'yellow.png'})
map.focus(x, y, 9)
map.addGifPoint({name: 'selected-point', key: 'id', data: data[0], icon: 'yellow.png'})
this.handleEventModal(data[0])
break
default:
......@@ -222,22 +211,25 @@ export default {
this.remindData = data[key]
this.remindModal = true
},
handleEventModal({msg}) {
this.eventData = msg
handleEventModal({type, addr}) {
this.eventData = {img: null, type, addr}
this.showEventModal = true
},
clickCommunity(data){
console.log(data)
},
addPoints() {
const data = [
{TASKID:'（补）临沂二村', COMMUNITYID: '（补）临沂二村', msg: {img: '1.png', type: '屋顶违建', method: '物联传感'}, X: 3706.690186, Y: -4234.159912},
{TASKID:'铭城园', COMMUNITYID: '铭城园', msg: {img: '2.png', type: '非定时倾倒垃圾', method: '物联传感'}, X: 3787.49700927734, Y: -4072.19757080078},
{TASKID:'海浦小区', COMMUNITYID: '海浦小区', msg: {img: '4.png', type: '楼道充电', method: '视频识别'}, X: 3750.58459472656, Y: -3983.67626953125},
{TASKID:'浦三路12弄', COMMUNITYID: '浦三路12弄', msg: {img: '4.png', type: '楼道充电', method: '视频识别'}, X: 3731.8646240234375, Y: -4073.232177734375},
{TASKID:'4号大楼', COMMUNITYID: '4号大楼', msg: {img: '3.png', type: '集中充电异常', method: '视频识别'}, X: 3706.68023681641, Y: -4030.7874558594},
]
this.$refs.map.addPoint({name: 'community', key: 'COMMUNITYID', data: data, icon: 'yellow.png'})
// const data = [
// {TASKID:'（补）临沂二村', COMMUNITYID: '（补）临沂二村', msg: {img: '1.png', type: '屋顶违建', method: '物联传感'}, X: 3706.690186, Y: -4234.159912},
// {TASKID:'铭城园', COMMUNITYID: '铭城园', msg: {img: '2.png', type: '非定时倾倒垃圾', method: '物联传感'}, X: 3787.49700927734, Y: -4072.19757080078},
// {TASKID:'海浦小区', COMMUNITYID: '海浦小区', msg: {img: '4.png', type: '楼道充电', method: '视频识别'}, X: 3750.58459472656, Y: -3983.67626953125},
// {TASKID:'浦三路12弄', COMMUNITYID: '浦三路12弄', msg: {img: '4.png', type: '楼道充电', method: '视频识别'}, X: 3731.8646240234375, Y: -4073.232177734375},
// {TASKID:'4号大楼', COMMUNITYID: '4号大楼', msg: {img: '3.png', type: '集中充电异常', method: '视频识别'}, X: 3706.68023681641, Y: -4030.7874558594},
// ]
// this.$refs.map.addPoint({name: 'community', key: 'COMMUNITYID', data: data, icon: 'yellow.png'})
this.$ajax.get({
url: this.$api.GET_SENSOR,
}).then(res => {
const sensorList = this.$com.confirm(res, 'data.content', [])
this.$refs.map.addPoint({name: 'sensor', key: 'id', data: sensorList, icon: 'yellow.png'})
})
},
handleStreetSelect(index, name) {
if (name === '申江豪城') return
......@@ -247,10 +239,6 @@ export default {
}
this.$router.push({path: '/'})
},
handleViewImg(img) {
this.curImg = img
this.showImgModal = true
},
...mapActions([
'initData',
'initNanmatouData',
......@@ -268,10 +256,10 @@ export default {
>div
display flex
align-items center
padding 0.2rem 0 0.2rem 0.3rem
padding 0 0 0 0.3rem
cursor pointer
background rgba(6,27,50,0.9)
margin-bottom .4rem
&:nth-child(2n+1)
background rgba(6,27,50,0.9)
&:hover
color $color-blue
p
......
static/govern-issue.json
View file @ 42ba3a51
[{
"name": "供水、供电、供气异常",
"type": "安全",
"count": 0
}, {
"name": "电梯运行异常",
"type": "安全",
"count": 0
}, {
"name": "占用消防通道",
"type": "安全",
"count": 2
}, {
"name": "违规充电",
"type": "安全",
"count": 2
}, {
"name": "损坏房屋承重结构",
"type": "安全",
"count": 0
}, {
"name": "违规租赁行为",
"type": "有序",
"count": 0
}, {
"name": "违法搭建",
"type": "有序",
"count": 1
}, {
"name": "垃圾分类违规",
"type": "干净",
"count": 0
}, {
"name": "高空坠物隐患",
"type": "安全",
"count": 0
}, {
"name": "消防设施设备异常",
"type": "安全",
"count": 0
}, {
"name": "噪音扰民",
"type": "有序",
"count": 1
}, {
"name": "空调安装违规",
"type": "有序",
"count": 0
}, {
"name": "毁绿占绿",
"type": "有序",
"count": 0
}, {
"name": "擅自改变物业使用性质",
"type": "有序",
"count": 1
}, {
"name": "物业交接矛盾",
"type": "有序",
"count": 0
}, {
"name": "乱收费",
"type": "有序",
"count": 0
}, {
"name": "破坏房屋外貌",
"type": "有序",
"count": 0
}, {
"name": "擅自改建、占用共用部位",
"type": "有序",
"count": 0
}, {
"name": "停车矛盾",
"type": "有序",
"count": 0
}, {
"name": "违规饲养动物",
"type": "有序",
"count": 0
}, {
"name": "维修资金使用异常",
"type": "有序",
"count": 0
}, {
"name": "建筑垃圾清运违规",
"type": "干净",
"count": 0
}, {
"name": "乱布线 ",
"type": "干净",
"count": 0
}, {
"name": "楼道小广告",
"type": "干净",
"count": 0
}]
static/govern-linyi.json
View file @ 42ba3a51
[{
"name": "供水、供电、供气异常",
"type": "安全",
"count": 0
}, {
"name": "电梯运行异常",
"type": "安全",
"count": 0
}, {
"name": "占用消防通道",
"type": "安全",
"count": 1
}, {
"name": "违规充电",
"type": "安全",
"count": 1
}, {
"name": "损坏房屋承重结构",
"type": "安全",
"count": 0
}, {
"name": "违规租赁行为",
"type": "有序",
"count": 0
}, {
"name": "违法搭建",
"type": "有序",
"count": 1
}, {
"name": "垃圾分类违规",
"type": "干净",
"count": 1
}, {
"name": "高空坠物隐患",
"type": "安全",
"count": 0
}, {
"name": "消防设施设备异常",
"type": "安全",
"count": 0
}, {
"name": "噪音扰民",
"type": "有序",
"count": 0
}, {
"name": "空调安装违规",
"type": "有序",
"count": 0
}, {
"name": "毁绿占绿",
"type": "有序",
"count": 0
}, {
"name": "擅自改变物业使用性质",
"type": "有序",
"count": 0
}, {
"name": "物业交接矛盾",
"type": "有序",
"count": 0
}, {
"name": "乱收费",
"type": "有序",
"count": 0
}, {
"name": "破坏房屋外貌",
"type": "有序",
"count": 0
}, {
"name": "擅自改建、占用共用部位",
"type": "有序",
"count": 0
}, {
"name": "停车矛盾",
"type": "有序",
"count": 0
}, {
"name": "违规饲养动物",
"type": "有序",
"count": 0
}, {
"name": "维修资金使用异常",
"type": "有序",
"count": 0
}, {
"name": "建筑垃圾清运违规",
"type": "干净",
"count": 0
}, {
"name": "乱布线 ",
"type": "干净",
"count": 0
}, {
"name": "楼道小广告",
"type": "干净",
"count": 0
}]
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