Skip to content

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

完成静态页面

parent 08a44f70
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 1363 deletions
src/store/actions.js
View file @ 7c7f8213
import ajax from '@/server/ajax'
import api from '@/server/api'
import com from '@/util/common'
import moment from 'moment'
const curStreet = '新江湾城街道'
// import moment from 'moment'
// const curStreet = '新江湾城街道'
export default {
initData({dispatch}) {
dispatch('getGreenInfo')
dispatch('getDiscoverTrend')
dispatch('getRepairRate')
dispatch('getResourceSum')
// dispatch('getCheckSum')
dispatch('getGridSum')
dispatch('getPopulationInfo')
dispatch('getPatrolList')
dispatch('getDiscoverInfo')
dispatch('getRepairInfo')
dispatch('getHandleList')
},
async getGreenInfo({commit}) {
const result = [
{name: '环卫公厕', value: await ajax.get({url: api.DATA_URL + api.GET_TOILET_COUNT, params: {street: curStreet}}) || 0},
{name: '生活垃圾收集', value: await ajax.get({url: api.DATA_URL + api.GET_GARBAGE_COUNT, params: {street: curStreet}}) || 0},
{name: '小型压缩站', value: await ajax.get({url: api.DATA_URL + api.GET_COMPRESS_COUNT, params: {street: curStreet}}) || 0},
]
commit('SET_GREEN_INFO', result)
},
getDiscoverTrend({commit}) {
ajax.get({
url: api.GET_DISCOVER_TREND,
params: {days: 10}
}).then(res => {
const {content} = res.data
const keys = (content && Object.keys(content)) ||[]
const result = keys.map(key => ({
date: moment(key).format('MM.DD'),
...content[key],
}))
commit('SET_DISCOVER_TREND', result)
})
},
getRepairRate({commit}) {
ajax.get({url: api.GET_REPAIR_RATE}).then(res => {
const data = com.confirm(res, 'data.content', [])
const result = data.map(item => ({
name: item.troubleType,
value: +item.count || 0,
}))
commit('SET_REPAIR_RATE', result)
})
},
getResourceSum({commit}) {
ajax.get({url: api.GET_RESOURCE_SUM}).then(res => {
commit('SET_RESOURCE_SUM', com.confirm(res, 'data.content', {}))
})
},
getCheckSum({commit}) {
ajax.get({url: api.GET_CHECK_SUM}).then(res => {
commit('SET_CHECK_SUM', com.confirm(res, 'data.content', {}))
})
},
async getGridSum({commit}) {
const start = moment().add(-10, 'days').format('YYYY-MM-DD')
const end = moment().format('YYYY-MM-DD')
const total = await ajax.get({url: api.DATA_URL + api.GET_GRID_TOTAL, params: {street: curStreet, start, end}})
const solving = await ajax.get({url: api.DATA_URL + api.GET_GRID_SOLVING, params: {street: curStreet, start, end}})
const overdue = await ajax.get({url: api.DATA_URL + api.GET_GRID_OVERDUE, params: {street: curStreet, start, end}})
commit('SET_GRID_SUM', [+overdue || 0, +solving || 0, +total || 0])
const total2 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT_TOTAL, params: {street: curStreet, start, end}})
const solving2 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT_SOLVING, params: {street: curStreet, start, end}})
const overdue2 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT_OVERDUE, params: {street: curStreet, start, end}})
commit('SET_NOT_ALERT_SUM', [+overdue2 || 0, +solving2 || 0, +total2 || 0])
},
async getPopulationInfo({commit}) {
const year1 = await ajax.get({url: api.DATA_URL + api.GET_POPULATION_INFO, params: {year: moment().add(-2, 'y').format('YYYY')}})
const year2 = await ajax.get({url: api.DATA_URL + api.GET_POPULATION_INFO, params: {year: moment().add(-1, 'y').format('YYYY')}})
if (year1 && year2) {
const result = [year1, year2].map(year => year.find(item => item.street == '总计'))
commit('SET_LAND_POPULATION_INFO', result)
}
},
getPatrolList({commit}) {
setTimeout(() => {
const result = [
{
name: '建发新江湾华苑二期',
event: '未落实每日自查',
time: '2020-10-21',
status: '逾期',
submit: '朱煜东',
department: '新江湾城街道房屋管理办事处',
theme: '市物业中心-住宅小区日常巡查2020.10',
x: 3249.901,
y: 9338.801
}, {
name: '建发新江湾华苑一期',
event: '未落实每日自查',
time: '2020-10-01',
status: '逾期',
submit: '朱煜东',
department: '新江湾城街道房屋管理办事处',
theme: '市物业中心-住宅小区日常巡查2020.10',
x: 3161.201,
y: 9327.401
},
{
name: '嘉誉园',
event: '车库挡水板未配置',
time: '2020-06-12',
status: '逾期',
submit: '俞泓',
department: '新江湾城街道房屋管理办事处',
theme: '2020年住宅小区防汛防台检查',
x: 3580.401,
y: 10968.201
},
{
name: '东方锦园',
event: '未落实每日自查',
time: '2020-02-07',
status: '逾期',
submit: '黄麒玮',
department: '新江湾城街道房屋管理办事处',
theme: '2020年上海市住宅小区疫情防控专项检查',
x: 2719.201,
y: 8474.801
}
]
commit('SET_PATROL_LIST', result)
}, 3000)
},
getDiscoverInfo({commit}) {
ajax.get({
url: api.GET_DISCOVER_INFO,
}).then(res => {
const sum = {total: 0, today: 0}
const data = com.confirm(res, 'data.content', [])
const keys = ['staffLeaveAlarmTcfteodr', 'parkFireExit', 'nonVehicleCharg', 'elevatorLock', 'buildingVibration', 'trash', 'manholeCover', 'waterTank', 'roofWater', 'hermeticSpace', 'accCtl']
const result = data.filter(item => keys.indexOf(item.types) >= 0)
result.forEach(e => {
sum.total += +e.total
sum.today += +e.numbers
})
commit('SET_DISCOVER_SUM', sum)
commit('SET_DISCOVER_INFO', result)
})
},
getRepairInfo({commit}) {
ajax.get({
url: api.GET_TS_BX,
}).then(res => {
const data = com.confirm(res, 'data.content', {})
const result = [
[+data.alarmIn5MinBX || 0, +data.undoneBX || 0],
[+data.alarmIn5MinTS || 0, +data.undoneTS || 0],
]
commit('SET_REPAIR_INFO', result)
})
},
getHandleList({commit}) { // 获取并全局设置联勤联动处置列表
ajax.get({url: api.GET_HANDLE_LIST}).then(res => {
commit('SET_HANDLE_LIST', com.confirm(res, 'data.content', []))
......
src/store/mutations.js
View file @ 7c7f8213
......@@ -5,48 +5,9 @@ export default {
SET_CURDATE(state, date) {
state.curDate = date
},
SET_CUR_SMART_TYPE(state, val) {
state.curSmartType = val
},
SET_COMMAND_MODAL(state, val) {
state.showCommandModal = val
},
SET_LAND_POPULATION_INFO(state, data) {
state.landPopulationInfo = data
},
SET_GREEN_INFO(state, data) {
state.greenInfo = data
},
SET_DISCOVER_TREND(state, data) {
state.discoverTrend = data
},
SET_REPAIR_RATE(state, data) {
state.repairRate = data
},
SET_RESOURCE_SUM(state, data) {
state.resourceSum = data
},
SET_CHECK_SUM(state, data) {
state.checkSum = data
},
SET_GRID_SUM(state, data) {
state.gridSum = data
},
SET_NOT_ALERT_SUM(state, data) {
state.notAlertSum = data
},
SET_PATROL_LIST(state, data) {
state.patrolList = data
},
SET_DISCOVER_SUM(state, data) {
state.discoverSum = data
},
SET_DISCOVER_INFO(state, data) {
state.discoverInfo = data
},
SET_REPAIR_INFO(state, data) {
state.repairInfo = data
},
SET_HANDLE_LIST(state, data) {
state.handleList = data
},
......
src/store/state.js
View file @ 7c7f8213
export default {
showLoading: false,
curDate: null,
curSmartType: null,
showCommandModal: false,
showPatrolModal: false,
patrolData: {},
landPopulationInfo: [],
greenInfo: [],
discoverTrend: [],
repairRate: [],
resourceSum: {},
checkSum: {},
gridSum: [0, 0, 0],
notAlertSum: [0, 0, 0],
patrolList: [],
discoverSum: {},
discoverInfo: [],
handleList: [],
repairInfo: [[0, 0], [0, 0]],
commandData: {
name1: '赵广浩',
name2: '成剑杰',
......@@ -58,12 +43,6 @@ export default {
},
},
],
videoInfo: [
{id: '31011022001328101004', address: '殷高东路国安路', location: '星汇广场一期8号楼楼顶', street: '新江湾', committee: '国安路居委会', community: '星汇广场一期'},
{id: '31011022001328102007', address: '殷高东路政芳路', location: '中凯城市之光37号楼顶', street: '新江湾', committee: '国安路居委会', community: '中凯城市之光'},
{id: '31011022001328103005', address: '民府路国霞路', location: '三湘未来海岸楼顶', street: '新江湾', committee: '国安路居委会', community: '三湘未来海岸'},
{id: '31011022001328104005', address: '殷行路淞沪路', location: '东方枫憬楼顶', street: '新江湾', committee: '睿达路居委会', community: '戎辉苑'},
],
xinjiangwanPaths: [
[
4896.0204000007361,
......
src/views/components/combine.vue
View file @ 7c7f8213
......@@ -42,10 +42,7 @@ export default {
},
computed: {
list() {
const {handleList, curSmartType} = this.$store.state
if (curSmartType) {
return handleList.filter(item => item.types === curSmartType)
}
const {handleList} = this.$store.state
return handleList
}
},
......
src/views/components/community-check.vue deleted 100644 → 0
View file @ 08a44f70
<template>
<div class="community-check">
<h5>小区巡查事项清单</h5>
<div>
<div v-for="(item, i) in list" :key="i">
<p v-for="(name, index) in item" :key="name + index">{{name}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CommunityCheck',
data() {
return {
list: [
['高空坠物隐患', '水电气异常', '消防设施异常', '.', '.'],
['违规租赁', '毁绿占绿', '停车矛盾', '改变物业性质', '占用公共部位'],
['建筑垃圾违规', '乱布线', '楼道乱张贴', '.', '.'],
]
}
},
}
</script>
<style lang="stylus" scoped>
.community-check
h5
background #0A2F59
text-align center
padding .03rem 0
font-size .1rem
>div
display flex
>div
flex 1
+div
border-left .01rem solid #215794
>p
padding .03rem .1rem
&:nth-child(2n)
background rgba(10,47,89, .6)
</style>
src/views/components/complaint-repair.vue deleted 100644 → 0
View file @ 08a44f70
<template>
<div class="complaint-repair">
<div class="sum">
<div v-for="item in list" :key="item.name">
<img :src="require(`@/assets/images/${item.img}`)"/>
<div>
<p>{{item.name}}</p>
<p>
<m-count class="count yellow" :value="item.value[0]" />
/
<m-count class="count" :value="item.value[1]" />
<span>个</span>
</p>
</div>
</div>
</div>
<img class="branch" src="@/assets/images/branch.png" />
<div class="chart">
<m-chart :config="config" :data="$store.state.repairRate" :options="options" />
</div>
</div>
</template>
<script>
export default {
name: 'ComplaintRepair',
data() {
return {
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 = this.$store.state.repairRate
return `${name} ${(data.find(e => e.name === name)).value}件`
}
}
}
}
},
computed: {
list() {
const {repairInfo} = this.$store.state
return [
{name: '报修数量', value: repairInfo[0], img: 'repair.png'},
{name: '投诉数量', value: repairInfo[1], img: 'complaint.png'},
]
},
}
}
</script>
<style lang="stylus" scoped>
.complaint-repair
display flex
align-items center
.sum
height 100%
flex 1
display flex
flex-direction column
justify-content space-between
padding .1rem 0
>div
display flex
align-items center
img
width .25rem
height @width
margin-right .05rem
p
color $fontColor
&:last-child
color #fff
span
font-size .08rem
color #aaa
.count
font-size .13rem
color #fff
&.yellow
color $color-yellow
.branch
width .3rem
height 60%
margin 0 .05rem
.chart
width 55%
height 100%
</style>
src/views/components/complaint-report.vue 0 → 100644
View file @ 7c7f8213
<template>
<div class="complaint-report">
<div class="sum">
<div v-for="item in sum" :key="item.name">
<img :src="require(`@/assets/images/${item.img}`)" />
<div>
<p>{{item.name}}</p>
<p><m-count class="count" :value="item.value" /> <span class="unit">个</span></p>
</div>
</div>
</div>
<Divider>投诉分类占比</Divider>
<div class="chart-wrapper">
<div class="chart"><m-chart :config="config" :data="chartData" /></div>
<div class="tips">
<div v-for="(item, i) in chartData" :key="item.name">
<span class="dot" :style="`border-color:${config.colors[i]}`"/>
<p>{{item.name}}</p>
<p>{{item.value}}</p>
<p>{{item.rate}}%</p>
</div>
</div>
</div>
<Divider>投诉分布</Divider>
<div class="rate"><RateComponent :colors="['#EF6F6F', '#FFC500']"/></div>
</div>
</template>
<script>
import RateComponent from './rate-component'
export default {
name: 'ComplaintReport',
components: {RateComponent},
data() {
return {
sum: [
{name: '12345', value: 100, img: 'complaint1.png'},
{name: '962121', value: 203, img: 'complaint2.png'},
],
config: {
colors: ['#E44949', '#FDA62D', '#FFCE34', '#71C012', '#6BE1B2', '#DC732D', '#5BD5FF', '#006ED4', '#2E43C9', '#826AFA', '#CCCCCC'],
// tooltip: {
// formatter: '{b}：{c}个 ({d}%)',
// confine: true,
// },
legend: {hide: true},
shape: [
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 45 * Number((screen.height / 800).toFixed(1))], center: ['40%', '50%']}
]
},
chartData: [
{name: '物业服务管理', value: 90, rate: 30},
{name: '小区综合管理', value: 75, rate: 25},
{name: '房管物业', value: 60, rate: 20},
{name: '城管执法', value: 45, rate: 15},
{name: '绿化市容', value: 12, rate: 4},
{name: '发展改革', value: 12, rate: 4},
{name: '其他', value: 9, rate: 3},
],
}
},
}
</script>
<style lang="stylus" scoped>
.complaint-report
display flex
flex-direction column
.sum
display flex
background $color-map(.1)
>div
padding .03rem 0
flex 1
$flex-center()
cursor pointer
img
width .25rem
height @width
margin-right .06rem
.count
color $color-yellow
font-size .12rem
.unit
color #aaa
font-size .08rem
&:first-child
background $color-map(.15)
border-bottom .02rem solid $color-blue
.chart-wrapper
width 100%
height 1rem
display flex
margin-top .2rem
.chart
height 100%
width 40%
.tips
flex 1
display flex
flex-direction column
flex-wrap wrap
margin-top 2%
transform translateX(-15%)
>div
height 25%
margin-left .05rem
.dot
display inline-block
width .08rem
height @width
border .02rem solid
border-radius 50%
p
margin 0 .01rem
display inline-block
.rate
flex 1
</style>
src/views/components/defense.vue deleted 100644 → 0
View file @ 08a44f70
<template>
<div class="defense">
<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>
<p>使用面积 <m-count style="color:#ff9502" :value="308433" /> <span class="unit">㎡</span></p>
<p>建筑面积 <m-count :value="606413.35" /> <span class="unit">㎡</span></p>
<div class="bar">
<div class="inner red" style="background:#ff9502;width:51%;"></div>
</div>
</div>
</template>
<script>
export default {
name: 'Defense',
data() {
return {}
},
}
</script>
<style lang="stylus" scoped>
.defense
display flex
flex-direction column
justify-content space-around
.bar
width 90%
height .06rem
border-radius .02rem
background #19487F
>.inner
height 99%
border-radius inherit
position relative
&:after
content ''
width .04rem
height 100%
position absolute
right -0.015rem
transform skew(-30deg)
&.green
&:after
background #CCFF78
box-shadow 0 0 .03rem .01rem #9FFF00
&.red
&:after
background #E02020
box-shadow 0 0 .03rem .01rem #E63D3D
.unit
color #aaa
font-size .08rem
</style>
src/views/components/green.vue deleted 100644 → 0
View file @ 08a44f70
<template>
<div class="green">
<div class="chart"><m-chart :config="config" :data="data" /></div>
<div class="info">
<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" :style="`color:${config.colors[i]}`"/>
<span class="unit">个</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Green',
data() {
return {
config: {
colors: ['#fe7403', '#ffd400', '#33c5ff'],
legend: {hide: true},
shape: [
{name: '环卫公厕', type: 'donut', },
{name: '生活垃圾收集', type: 'donut', },
{name: '小型压缩站', type: 'donut'},
],
},
}
},
computed: {
data() {
return this.$store.state.greenInfo
}
}
}
</script>
<style lang="stylus" scoped>
.green
display flex
.chart
width 40%
height 100%
.info
width 60%
height 100%
display flex
flex-direction column
justify-content center
padding-left .1rem
>div
margin-bottom .1rem
.dot
display inline-block
width .1rem
height @width
border .02rem solid
border-radius 50%
p
width 50%
margin 0 .05rem
display inline-block
.unit
color #aaa
font-size .08rem
</style>
src/views/components/grid-management.vue deleted 100644 → 0
View file @ 08a44f70
<template>
<div class="grid-management">
<div v-for="item in sum" :key="item.name">
<img :src="require(`@/assets/images/${item.img}`)"/>
<div>
<p>{{item.name}}</p>
<div>
<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>
<span>处置中</span>
<span>发现</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'GridManagement',
computed: {
sum() {
const {gridSum, notAlertSum} = this.$store.state
return [
{name: '网格事件数', value: gridSum, img: 'tips2.png'},
{name: '110非警情数', value: notAlertSum, img: 'tips3.png'},
]
}
},
}
</script>
<style lang="stylus" scoped>
.grid-management
display flex
padding-top .05rem
>div
display flex
flex 1
// align-items center
padding-left .1rem
>div
>div
display flex
justify-content space-between
img
width .25rem
height @width
margin .05rem .1rem 0 0
p
color $fontColor
span
display inline-block
min-width .3rem
flex 1
color #aaa
font-size .08rem
.count
flex 1
font-size .12rem
color $color-yellow
&:nth-child(1)
color $color-red
&:nth-child(3)
color #fff
</style>
src/views/components/house.vue deleted 100644 → 0
View file @ 08a44f70
<template>
<div class="house">
<div class="sum">
<div v-for="item in list" :key="item.name">
<m-count class="count" :value="item.value" :decimal="item.dec || 0" />
<p>{{item.name}}({{item.unit}})</p>
</div>
</div>
<div class="content">
<div class="chart" ref="chart"></div>
<div class="total">
<div>
<p>整体治理得分</p>
<m-count style="font-size:0.12rem;color:#75e1b0;" :value="92" />
<p class="unit">（分）</p>
</div>
<span class="btn">查看模型</span>
</div>
<div class="example">
<img src="@/assets/images/example.png"/>
</div>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
const mockValue = [49, 21, 22]
export default {
name: 'House',
data() {
return {
chart: null,
option: {
tooltip: {
trigger: 'axis',
confine: true,
},
radar: [{
name: {
rich: {
a: {
color: '#aaa',
lineHeight: 20,
fontSize: 12 * this.sizeRate,
},
b: {
color: '#ffd400',
align: 'center',
fontSize: 12 * this.sizeRate,
},
c: {
color: '#fff',
fontSize: 12 * this.sizeRate,
},
},
formatter: (text, {index}) => {
const max = [50, 25, 25]
return `{a|${text}}\n{b|${mockValue[index]}}{c|/${max[index]}}`
},
},
splitArea: {
show: false,
// areaStyle: {
// color: ['rgba(1,124,143, 1)', 'rgba(1,124,143,0.9)', 'rgba(1,124,143,.7)', 'rgba(1,124,143,.5)', 'rgba(1,124,143,.3)']
// }
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
axisLine: {
show: false,
},
indicator: [
{text: '安全', index: 0, max: 50},
{text: '干净', index: 1, max: 25},
{text: '有序', index: 2, max: 25},
],
center: ['50%', '60%'],
radius: '65%',
}],
series: [{
type: 'radar',
symbol: 'none',
lineStyle: {
color: '#47B3FF'
},
areaStyle: {
color: '#47B3FF',
},
data: [{
value: mockValue,
}]
}]
}
}
},
mounted() {
setTimeout(this.init, 0)
},
beforeDestroy() {
this.chart && window.removeEventListener('resize', () => this.chart.resize())
},
computed: {
list() {
const {community, house, company, area} = this.$store.state.resourceSum
return [
{name: '小区数量', unit: '个', value: +community || 0},
{name: '总户数', unit: '户', value: +house || 0},
{name: '物业企业', unit: '个', value: +company || 0},
{name: '管理面积', unit: '㎡', value: +area || 0},
]
},
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
},
methods: {
init() {
this.chart = echarts.init(this.$refs.chart)
window.addEventListener('resize', () => this.chart.resize())
this.chart.setOption(this.option)
}
}
}
</script>
<style lang="stylus" scoped>
.house
display flex
flex-direction column
justify-content space-around
.sum
display flex
justify-content space-between
>div
width 23%
min-height .5rem
background $cardBg
$flex-center()
flex-direction column
.count
color $color-yellow
font-size 0.12rem
p
font-size .09rem
color #aaa
.content
display flex
flex 1
.chart
width 55%
height 100%
.total
display flex
flex-direction column
justify-content space-around
padding 0 .1rem
>div
width .8rem
height @width
background-image url(../../assets/images/edge-bg.png)
background-size 100% 100%
background-repeat no-repeat
$flex-center()
flex-direction column
color #aaa
.unit
font-size .08rem
.btn
display block
width 70%
text-align center
border .01rem solid #034698
color $edgeColor
padding .02rem .03rem
border-radius .02rem
cursor pointer
&:hover
$selected()
.example
flex 1
$flex-center()
img
width .45rem
</style>
src/views/components/land-population.vue deleted 100644 → 0
View file @ 08a44f70
<template>
<div class="land-population">
<div class="labels">
<p v-for="label in labels" :key="label">{{label}}</p>
</div>
<div class="content" v-for="(item, index) in list" :key="item.label + index">
<p>{{item.label}}</p>
<div>
<div v-for="(child, i) in item.data" :key="i">
<span v-if="child.value === null" class="count"> - </span>
<m-count v-else class="count" :value="child.value" :decimal="child.dec || 0"/>
<span class="unit">{{child.unit}}</span>
<img v-if="child.up" src="@/assets/images/up.png"/>
<img v-else-if="child.down" src="@/assets/images/down.png"/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'LandPopulation',
data() {
return {
labels: ['土地面积', '总户籍人口', '人口密度', '户籍同比'],
}
},
computed: {
list() {
const [year1 = {}, year2 = {}] = this.$store.state.landPopulationInfo
const {year: label1 = '', area: area1 = 0, registered_population: population1 = 0, population_density: density1 = 0} = year1
const {year: label2 = '', area: area2 = 0, registered_population: population2 = 0, population_density: density2 = 0} = year2
const rate = (+density2 - +density1) / +density1
return [
{
label: label1 + '年末',
data: [
{value: +area1 || 0, unit: 'k㎡', dec: 2},
{value: +population1 || 0, unit: '人'},
{value: +density1 || 0, unit: '人/k㎡'},
{value: null, unit: '', },
]
},
{
label: label2 + '年末',
data: [
{value: +area2 || 0, unit: 'k㎡', dec: 2, up: area2 > area1, down: area2 < area1},
{value: +population2 || 0, unit: '人', up: population2 > population1, down: population2 < population1},
{value: +density2 || 0, unit: '人/k㎡', up: density2 > density1, down: density2 < density1},
{value: rate, unit: '%', dec: 2, down: true, },
]
},
]
},
}
}
</script>
<style lang="stylus" scoped>
.land-population
display flex
justify-content space-between
.labels
color $fontColor
background $cardBg
padding .03rem .05rem
border .01rem dotted $fontColor
margin-top 0.22rem
display flex
flex-direction column
justify-content center
>p
line-height .2rem
margin-bottom .01rem
.content
width 36%
height 100%
display flex
flex-direction column
>p
color $fontColor
background $cardBg
padding .03 .05rem
border .01rem dotted $fontColor
text-align center
width 50%
margin 0 auto .05rem
>div
flex 1
background-image url('../../assets/images/land-bg.png')
background-size 100% 100%
$flex-center()
flex-direction column
>div
line-height .2rem
border-bottom 0.01rem solid rgba(71,179,255,.5)
.count
color $color-yellow
font-size .12rem
.unit
color #aaa
font-size .06rem
img
width .06rem
</style>
src/views/components/left-component.vue
View file @ 7c7f8213
......@@ -5,18 +5,11 @@
<div class="left">
<m-card title="指挥体系"><Command /></m-card>
<m-card title="运行体征"><OperationSign /></m-card>
<!-- <m-card title="土地人口"><LandPopulation /></m-card> -->
<!-- <m-card title="绿化市容"><Green /></m-card> -->
<!-- <m-card title="民防指标"><Defense /></m-card> -->
</div>
<div class="right">
<m-card title="党建引领"><PartyLead /></m-card>
<m-card title="物业健康度"><PropertyHealth /></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>
<m-card title="工作提示"><WorkTips /></m-card> -->
</div>
</div>
</div>
......@@ -24,13 +17,6 @@
<script>
import Command from './command'
// import LandPopulation from './land-population'
// import Green from './green'
// import Defense from './defense'
// import House from './house'
// import CommunityCheck from './community-check'
// import WorkTips from './work-tips'
// import GridManagement from './grid-management'
import OperationSign from './operation-sign'
import PartyLead from './party-lead'
import PropertyHealth from './property-health'
......@@ -39,21 +25,11 @@ export default {
name: 'LeftComponent',
components: {
Command,
// LandPopulation,
// Green,
// Defense,
// House,
// CommunityCheck,
// WorkTips,
// GridManagement,
OperationSign,
PartyLead,
PropertyHealth,
ExampleCommunity,
},
data() {
return {}
},
}
</script>
......
src/views/components/patrol.vue deleted 100644 → 0
View file @ 08a44f70
<template>
<div class="patrol">
<div class="sum">
<div v-for="item in sum" :key="item.name">
<img :src="require(`@/assets/images/${item.img}`)"/>
<div>
<p>{{item.name}}</p>
<p><m-count class="count" :style="`color:${item.color}`" :value="item.value" /> <span>{{item.unit}}</span></p>
</div>
</div>
</div>
<div class="detail">
<m-scroll :length="$store.state.patrolList.length" mode="2" :limit="2" :step="0.75">
<div @click="$emit('select', {...item, key: 'patrol'})" class="info" v-for="(item, i) in $store.state.patrolList" :key="item.name+i" :class="{over: item.status === '逾期'}">
<h5>{{item.name}}</h5>
<div>
<div>
<p>整改事项</p>
<p>{{item.event}}</p>
</div>
<div>
<p>发现时间</p>
<p>{{item.time}}</p>
</div>
<div>
<p>上报人</p>
<p>{{item.submit}}</p>
</div>
</div>
<img v-if="item.status === '逾期'" src="@/assets/images/overtime.png" />
</div>
</m-scroll>
</div>
</div>
</template>
<script>
export default {
name: 'Patrol',
computed: {
sum() {
// const {totalOrder, undoneOrder, overdueOrder} = this.$store.state.checkSum
// return [
// {name: '逾期整改单', value: +overdueOrder || 0, unit: '个', img: 'patrol1.png', color: '#ff1e1e'},
// {name: '整改单总数', value: +undoneOrder || 0, unit: '个', img: 'patrol2.png', color: '#fece34'},
// {name: '巡检总数', value: +totalOrder || 0, unit: '次', img: 'patrol3.png', color: '#00beff'},
// ]
return [
{name: '逾期整改单', value: 4, unit: '个', img: 'patrol1.png', color: '#ff1e1e'},
{name: '整改单总数', value: 4, unit: '个', img: 'patrol2.png', color: '#fece34'},
{name: '巡检总数', value: 463, unit: '次', img: 'patrol3.png', color: '#00beff'},
]
}
},
}
</script>
<style lang="stylus" scoped>
.patrol
display flex
flex-direction column
h5
font-size .1rem
.sum
display flex
justify-content space-around
margin-bottom .05rem
>div
display flex
align-items center
img
width .25rem
height @width
margin-right .05rem
p
color $fontColor
span
font-size .08rem
color #aaa
.count
font-size .13rem
.detail
flex 1
.info
position relative
border-left .02rem solid $edgeColor
padding .05rem .18rem .05rem .1rem
margin-bottom .1rem
background $section-bg
height .65rem
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)
&.over
border-color #ff6160
h5
margin-bottom .05rem
img
position absolute
right 0
top 0
width .4rem
height @width
>div
display flex
justify-content space-between
p
&:first-child
color $cardFontColor
font-size .08rem
</style>
src/views/components/right-component.vue
View file @ 7c7f8213
......@@ -7,46 +7,25 @@
<m-card title="物业维修"><PropertyRepair /></m-card>
</div>
<div class="right">
<m-card title="投诉信访"></m-card>
<m-card title="联勤联动"></m-card>
<m-card title="投诉信访"><ComplaintReport /></m-card>
<m-card title="联勤联动"><Combine /></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 IndustrySupervise from './industry-supervise'
import PropertyRepair from './property-repair'
import ComplaintReport from './complaint-report'
import Combine from './combine'
export default {
name: 'RightComponent',
components: {
// SmartDiscover,
// ComplaintRepair,
// Patrol,
// Combine,
IndustrySupervise,
PropertyRepair,
},
data() {
return {
imgs: ['monitor1.png', 'monitor2.png', 'monitor3.png', 'monitor4.png']
}
},
methods: {
handleClick(i) {
const {id} = this.$store.state.videoInfo[i]
this.$ajax.get({
url: this.$api.GET_VIDEO_URL + id,
showLoading: true,
}).then(res => {
this.$emit('video', this.$com.confirm(res, 'payload.url'))
})
// this.$emit('video', 'http://10.216.71.20:83/openUrl/TMIXpTy/live.m3u8')
}
ComplaintReport,
Combine,
},
}
</script>
......@@ -81,46 +60,4 @@ export default {
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
align-items center
>div
width calc((100% - .3rem) / 4)
height 80%
cursor pointer
background-size cover
background-repeat no-repeat
position relative
+div
margin-left .1rem
>div
width 100%
height 100%
background rgba(0,0,0,0)
$flex-center()
transition background .3s ease-in-out
>img
width .3rem
height @width
opacity 0
transition opacity .3s ease-out
&:hover
>div
background rgba(0,0,0,.5)
>img
opacity 1
</style>
src/views/components/smart-discover.vue deleted 100644 → 0
View file @ 08a44f70
<template>
<div class="smart-discover">
<div class="stat">
<div class="sum">
<div v-for="item in sum" :key="item.name">
<img :src="require(`@/assets/images/${item.img}`)"/>
<div>
<p>{{item.name}}</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" />
</div>
</div>
</div>
<div class="chart">
<m-chart v-if="discoverTrend.length > 0" :config="config" :data="discoverTrend" :options="options" />
<div v-else class="no-data">— 暂无数据 —</div>
</div>
</div>
</template>
<script>
export default {
name: 'SmartDiscover',
data() {
return {
config: {
colors: ['#FFCE34', '#826AFA'],
legend: {
align: 'right',
},
shape: [
{key: 'created', name: '当日新增', type: 'line'},
{key: 'done', name: '已处理数', type: 'line'},
],
xAxis: {
key: 'date',
},
},
options: {
xAxis: {
splitLine: {show: false},
}
}
}
},
computed: {
discoverTrend() {
return this.$store.state.discoverTrend
},
curSmartType() {
return this.$store.state.curSmartType
},
sum() {
const {total, today} = this.$store.state.discoverSum
return [
{name: '当日新增', value: today || 0, img: 'today.png', color: '#ffd400'},
{name: '历史累计', value: total || 0, img: 'history.png', color: '#01BFFD'},
]
},
list() {
const {discoverInfo} = this.$store.state
return discoverInfo.map((item, i) => ({
name: this.$com.transType(item.types),
value: +item.numbers || 0,
img: `smart${i + 1}.png`,
types: item.types,
}))
}
},
methods: {
handleClick(type) {
this.$store.commit('SET_CUR_SMART_TYPE', type === this.curSmartType ? null : type)
}
},
}
</script>
<style lang="stylus" scoped>
.smart-discover
.no-data
width 100%
height 100%
$flex-center()
.sum
display flex
margin-bottom .05rem
>div
display flex
flex 1
align-items center
padding-left .05rem
img
width .25rem
height @width
margin-right .05rem
p
color $fontColor
span
font-size .08rem
color #aaa
.count
font-size .13rem
.detail
display flex
flex-wrap wrap
>div
display flex
align-items center
justify-content space-between
padding .03rem .08rem
margin .01rem
width calc((100% - 0.04rem) / 2)
background #0A2F59
cursor pointer
border .01rem solid transparent
&.on
&:hover
$selected()
p
display flex
align-items center
img
width .12rem
height @width
margin-right .05rem
.count
font-size .12rem
&.yellow
color $color-yellow
.chart
width 100%
height 45%
background url('../../assets/images/chart-bg.png') 100% / 100% no-repeat
padding .1rem .03rem .05rem .05rem
</style>
src/views/components/work-tips.vue deleted 100644 → 0
View file @ 08a44f70
<template>
<div class="work-tips">
<m-scroll :length="list.length" :limit="3">
<div class="info" v-for="(item, i) in list" :key="i">
<p>{{item.name}}</p>
<p>{{item.tips}}</p>
</div>
</m-scroll>
</div>
</template>
<script>
export default {
name: 'WorkTips',
data() {
return {
list: [
{name: '新江湾尚景园', tips: '车辆停发管理'},
{name: '新江湾城首府', tips: '占用公共部位'},
{name: '雍景苑小区', tips: '垃圾分类'},
{name: '华润新江湾九里', tips: '占用公共部位'},
{name: '华润新江湾九里', tips: '垃圾分类'},
{name: '新江湾九里', tips: '占用公共部位'},
]
}
},
}
</script>
<style lang="stylus" scoped>
.work-tips
.info
display flex
justify-content space-between
padding .03rem .1rem
&:nth-child(2n)
background rgba(10,47,89, .6)
</style>
src/views/main.vue
View file @ 7c7f8213
......@@ -18,24 +18,16 @@
<RightComponent
v-show="!fullView"
area="right"
@patrol="handleMapClick"
@handle="handleMapClick"
@video="handleViewVideo"
/>
</m-animate>
<MapBtns v-model="fullView" @zoomin="zoom('in')" @zoomout="zoom('out')" />
<m-modal v-model="detailModal" title="智能报警">
<m-form :label-width=".6" :model="detailData" :layout="detailLayout" />
</m-modal>
<m-modal v-model="patrolModal" title="主动巡检">
<m-form :label-width=".6" :model="patrolData" :layout="patrolLayout" />
</m-modal>
<m-modal title="指挥体系" :value="showCommandModal" @close="$store.commit('SET_COMMAND_MODAL', false)">
<m-form :label-width=".7" :model="commandData" :layout="commandLayout" />
</m-modal>
<m-modal title="鹰眼监控" v-model="videoModal">
<VideoComponent v-if="videoModal" :videoSrc="videoSrc" />
</m-modal>
</m-grid>
</template>
......@@ -58,13 +50,9 @@ export default {
timer: null,
complete: false,
fullView: false,
videoModal: false,
videoSrc: null,
detailModal: false,
patrolModal: false,
smartPoints: null,
detailData: {},
patrolData: {},
detailLayout: [
{
communityName: {
......@@ -95,88 +83,14 @@ export default {
},
},
],
// detailLayout: [
// {
// id: {
// label: '工单编号',
// width: 12,
// },
// type: {
// label: '事件类型',
// width: 12,
// },
// },
// {
// time: {
// label: '报警时间',
// width: 12,
// },
// level: {
// label: '报警等级',
// width: 12,
// },
// },
// {
// address: {
// label: '地址',
// width: 24,
// },
// },
// {
// result: {
// label: '处理结论',
// width: 24,
// },
// },
// ],
patrolLayout: [
{
name: {
label: '小区名称',
width: 12,
},
event: {
label: '整改事项',
width: 12,
},
},
{
time: {
label: '发现时间',
width: 12,
},
status: {
label: '整改状态',
width: 12,
},
},
{
submit: {
label: '上报人',
width: 12,
},
department: {
label: '房办名称',
width: 12,
},
},
{
theme: {
label: '检查主题',
width: 24,
},
},
],
}
},
computed: {
...mapState([
'curSmartType',
'xinjiangwanPaths',
'commandLayout',
'commandData',
'showCommandModal',
'patrolList',
'handleList',
])
},
......@@ -187,10 +101,6 @@ export default {
methods: {
...mapActions([
'initData', // 初始化获取首次加载所需的所有数据
'getDiscoverTrend',
'getRepairRate',
'getDiscoverInfo',
'getRepairInfo',
'getHandleList',
]),
mapComplete() {
......@@ -198,12 +108,8 @@ export default {
this.initData()
this.complete = true
this.timer = setInterval(() => {
this.getDiscoverTrend()
this.getRepairRate()
this.getDiscoverInfo()
this.getRepairInfo()
this.getHandleList()
}, 1000 * 60 * 5)
}, 1000 * 60 * 1)
},
init() {
const {map} = this.$refs
......@@ -215,14 +121,8 @@ export default {
this.$refs.map.focus(3489.0714111328125, 10384.431030273437, 4.5)
},
handleMapClick(data) {
if (data.key === 'patrol') {
this.patrolData = data
this.patrolModal = true
} else {
this.detailData = data
this.detailModal = true
}
// this.$refs.map.focus(data.x || data.gpsx, data.y || data.gpsy, 8)
this.detailData = data
this.detailModal = true
},
drawSmartPoints(data) {
const {addPoint, removePoint} = this.$refs.map
......@@ -238,37 +138,14 @@ export default {
}),
})
},
handleViewVideo(src) {
this.videoSrc = src
this.videoModal = true
},
zoom(type) {
if (type === 'in') this.$refs.map.zoomIn()
else this.$refs.map.zoomOut()
},
},
watch: {
patrolList(cur) {
this.$refs.map.addPoint({
key: 'patrol',
size: 14,
icon: 'red.png',
data: cur,
})
},
curSmartType(cur) {
let data = this.handleList
if (cur) {
data = this.handleList.filter(item => item.types === cur)
}
this.drawSmartPoints(data)
},
handleList(cur) {
let data = cur
if (this.curSmartType) {
data = cur.filter(item => item.types === this.curSmartType)
}
this.drawSmartPoints(data)
this.drawSmartPoints(cur)
},
}
}
......
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