Skip to content

Y
yangpu
Commit 2f00baba authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

接入接口数据

parent 47eacf83
Show whitespace changes
Inline Side-by-side
Showing with 667 additions and 282 deletions
src/assets/css/variables.styl
View file @ 2f00baba
......@@ -5,7 +5,7 @@ $color-map(opacity = 0.3)
rgba(91, 213, 255, opacity)
$color-green = #82DF12
$color-blue = #01BFFD
$color-red = #D82B2B
$color-red = #ff1e1e
$color-yellow = #ffd400
$layout(gap = 0.06rem)
width 100%
......@@ -36,3 +36,4 @@ $flex-center()
align-items center
justify-content center
$section-bg = rgba(51,145,255,.1)
$section-hover = rgba(51,145,255,.2)
src/components/MonitorComponents/MonitorChart/monitor-chart.vue
View file @ 2f00baba
......@@ -322,6 +322,7 @@ export default {
type: 'category',
data: [],
axisLabel: {
interval: 0,
textStyle: {
color: '#ccc',
},
......
src/components/MonitorComponents/MonitorForm/monitor-form.vue
View file @ 2f00baba
......@@ -5,7 +5,7 @@
<i-col class="col" v-for="(col, key) in row" :key="key" :span="col.width" :offset="col.offset || 0">
<div :style="`text-align: ${col.align || 'right'}; width:${labelWidth}rem;`">{{col.label}}：</div>
<img v-if="col.type == 'img'" @click="handleView(model[key])" :src="require(`@/assets/images/${model[key]}`)"/>
<div v-else class="content">{{model[key]}}</div>
<div v-else class="content">{{col.format ? col.format(model[key]) : (model[key] || ' ')}}</div>
</i-col>
</Row>
<m-modal v-model="showImg">
......
src/components/MonitorComponents/MonitorMap/monitor-map.vue
View file @ 2f00baba
......@@ -28,7 +28,7 @@ export default {
// zooms: [1, 12],
mapStyle: 'smap://styles/dark',
}).on(SMap.MapEvent.maploaded, () => {
this.map.hideXQ_Poly()
// this.map.hideXQ_Poly()
this.map.hideXQ_Point()
this.map.hideMPZ()
this.addListener()
......@@ -57,9 +57,9 @@ export default {
},
// 删除点
removePoint(name) {
if (!this.map) return
this.map.remove(name)
removePoint(points) {
if (!this.map || !points) return
this.map.remove(points)
},
// 将数据转换为符合地图的点数组
getMapPoints({data = [], key, labelKey, icon, size, color = '#47B3FF'}) {
......@@ -70,7 +70,7 @@ export default {
image: require(`@/assets/images/${item.icon || icon}`),
}),
attributes: {key, ...item},
position: [item.X || item.x, item.Y || item.y, 0],
position: [item.X || item.x || item.gpsx, item.Y || item.y || item.gpsy, 0],
}
if (labelKey) {
result.label = new SMap.Label({
......
src/server/ajax.js
View file @ 2f00baba
......@@ -30,9 +30,9 @@ Axios.interceptors.response.use(response => {
* @param {String} url [请求地址]
* @param {Object} params [请求参数]
* @param {String} contentType [请求头，默认为'application/json;charset=UTF-8']
* @param {Boolean} showLoading [是否显示请求时的loading图，默认为true]
* @param {Boolean} showLoading [是否显示请求时的loading图，默认为false]
*/
const request = ({ method, url, params = {}, contentType = 'application/json;charset=UTF-8', showLoading = true }) => {
const request = ({ method, url, params = {}, contentType = 'application/json;charset=UTF-8', showLoading = false }) => {
if (!url || typeof(url) != 'string') {
throw new Error('接口URL不正确')
}
......
src/server/api.js
View file @ 2f00baba
let BASE_URL = ''
let DATA_URL = ''
switch (process.env.NODE_ENV) {
case 'production':
BASE_URL = 'product_url'
BASE_URL = 'http://yangpu.hm.omniview.pro/api'
DATA_URL = 'http://10.89.1.208:10005'
break
default:
BASE_URL = 'default_url'
BASE_URL = 'http://yangpu.hm.omniview.pro/api'
// BASE_URL = 'http://yapi.omniview.pro/mock/350'
DATA_URL = 'http://10.89.1.208:10005'
}
export default {
BASE_URL,
TEST_URL: '/api/test_url',
DATA_URL,
GET_DISCOVER_TREND: '/service-special-ddd/public/alarm/unremoved/statistics', // 智能发现趋势图
GET_REPAIR_RATE: '/service-documents-ddd/public/unsolved/repair/type/count', // 投诉报修比例图
GET_RESOURCE_SUM: '/service-basicdatasync-ddd/public/resource/count', // 房屋物业统计数字
GET_CHECK_SUM: '/service-documents-ddd/public/checkorder/count', // 主动巡检统计数字
GET_DISCOVER_INFO: '/service-special-ddd/public/discoverInfo', // 智能发现数目
GET_TS_BX: '/service-documents-ddd/public/repair/complaint', // 投诉报修数目
GET_HANDLE_LIST: '/service-special-ddd/public/alarm/index', // 联勤联动列表
GET_GRID_TOTAL: '/dc/countDiscoveredCaseByStreet', // 网格数
GET_GRID_SOLVING: '/dc/countSolvingCaseByStreet', // 网格处置中数
GET_GRID_OVERDUE: 'dc/countExceedCaseByStreet', // 网格处逾期数
GET_NOT_ALERT_TOTAL: '/dc/countClosedNotPolice', // 非警情数
GET_NOT_ALERT_SOLVING: '/dc/countSolvingNotPoliceByStreet', // 非警情数处置中数
GET_NOT_ALERT_OVERDUE: '/dc/countExceedNotPoliceByStreet', // 非警情数逾期数
GET_POPULATION_INFO: '/dc/statisticsbureauArea', // 土地人口统计数字
GET_COMPRESS_COUNT: '/dc/countCompressStationsByStreet', // 街道小型压缩站数目
GET_GARBAGE_COUNT: '/dc/countPointsByStreet', // 街道垃圾收集点数目
GET_TOILET_COUNT: '/dc/countToiletsByStreet', // 街道环卫公厕数目
}
src/store/actions.js
View file @ 2f00baba
import ajax from '@/server/ajax'
import api from '@/server/api'
import com from '@/util/common'
import moment from 'moment'
const curStreet = '新江湾城街道'
export default {
initData({dispatch}) {
dispatch('getLandPopulationInfo')
dispatch('getGreenInfo')
dispatch('getDiscoverTrend')
dispatch('getRepairRate')
dispatch('getResourceSum')
// dispatch('getCheckSum')
dispatch('getGridSum')
dispatch('getPopulationInfo')
dispatch('getPatrolList')
dispatch('getDiscoverInfo')
dispatch('getRepairInfo')
dispatch('getHandleList')
},
getLandPopulationInfo({commit}) {
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 = 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 today = moment().format('YYYY-MM-DD')
const start = `${today} 00:00:00`
const end = `${today} 24:00:00`
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(-3, 'y').format('YYYY')}})
const year2 = await ajax.get({url: api.DATA_URL + api.GET_POPULATION_INFO, params: {year: moment().add(-2, 'y').format('YYYY')}})
const year3 = await ajax.get({url: api.DATA_URL + api.GET_POPULATION_INFO, params: {year: moment().add(-1, 'y').format('YYYY')}})
if (year1 && year2 && year3) {
const result = [year1, year2, year3].map(year => year.find(item => item.street == '总计'))
commit('SET_LAND_POPULATION_INFO', result)
}
},
getPatrolList({commit}) {
setTimeout(() => {
const result = [
{
label: '2018年末',
data: [
{value: 8.69, unit: 'k㎡', dec: 2},
{value: 29182, unit: '人'},
{value: 3358, unit: 'k㎡'},
{value: 1.08, unit: '%', dec: 2},
],
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
},
{
label: '2019年末',
data: [
{value: 8.69, unit: 'k㎡', dec: 2},
{value: 31676, unit: '人', up: true},
{value: 3645, unit: 'k㎡', up: true},
{value: 1.18, unit: '%', dec: 2, up: true},
],
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_LAND_POPULATION_INFO', result)
}, 1000)
commit('SET_PATROL_LIST', result)
}, 3000)
},
getGreenInfo({commit}) {
setTimeout(() => {
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 = [
{name: '环卫公厕', value: 9},
{name: '生活垃圾收集', value: 98},
{name: '小型压缩站', value: 34},
[+data.alarmIn5MinBX || 0, +data.undoneBX || 0],
[+data.alarmIn5MinTS || 0, +data.undoneTS || 0],
]
commit('SET_GREEN_INFO', result)
}, 1000)
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 @ 2f00baba
......@@ -5,6 +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
},
......@@ -14,4 +17,37 @@ export default {
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 @ 2f00baba
export default {
showLoading: false,
curDate: null,
curSmartType: null,
showCommandModal: false,
landPopulationInfo: [],
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: '成剑杰',
......@@ -44,6 +58,12 @@ 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/util/common.js
View file @ 2f00baba
......@@ -31,4 +31,21 @@ export default {
return path.split('.').reduce(reducer, obj)
}
},
transType(type) {
const data = {
'staffLeaveAlarmTcfteodr': '门岗脱岗',
'parkFireExit': '占用消防通道',
'nonVehicleCharg': '集中充电异常',
'elevatorLock': '楼道充电',
'buildingVibration': '损坏承重结构',
'trash': '非定时倒垃圾',
'manholeCover': '窨井盖异常',
'waterTank': '水箱异常开启',
'roofWater': '屋顶积水',
'hermeticSpace': '屋顶违章建筑',
'weixiuzijin': '维修资金异常',
'accCtl': '门禁异常',
}
return data[type]
},
}
src/views/components/combine.vue
View file @ 2f00baba
<template>
<div class="combine">
<m-scroll :length="list.length" :limit="2">
<div class="detail" v-for="(item, i) in list" :key="item.name + i">
<div @click="$emit('select', item)" class="detail" v-for="item in list" :key="item.id">
<div>
<h5>{{item.name}}</h5>
<p>{{item.time}}</p>
<h5>{{item.communityName}}</h5>
<p>{{item.create_time}}</p>
</div>
<div class="content">
<div>
<p>协同事项</p>
<p>{{item.event}}</p>
<p>{{$com.transType(item.types) || '暂无分类'}}</p>
</div>
<div>
<p>发现方式</p>
<p>{{item.method}}</p>
<p>{{item.check_type || '智能发现'}}</p>
</div>
<div>
<p>响应部门</p>
<p>{{item.department}}</p>
<p>{{item.cspName || item.receive_property_name}}</p>
</div>
</div>
<m-step class="combine-step" :steps="steps" :current="item.current" />
<m-step class="combine-step" :steps="steps" :current="getCurrent(item)" />
</div>
</m-scroll>
</div>
......@@ -37,34 +37,26 @@ export default {
{name: '处置'},
{name: '完成'},
],
list: [
{
name: '中凯城市之光',
time: '2020-10-19 12:16:35',
event: '垃圾未及时清运',
method: '巡查发现',
department: '上海振南物业',
current: 2,
},
{
name: '宝拉维拉家园',
time: '2020-10-19 12:16:35',
event: '垃圾未及时清运',
method: '巡查发现',
department: '上海振南物业',
current: 1,
}
},
{
name: '圣骊河滨苑',
time: '2020-10-19 12:16:35',
event: '垃圾未及时清运',
method: '巡查发现',
department: '上海振南物业',
current: 3,
computed: {
list() {
const {handleList, curSmartType} = this.$store.state
if (curSmartType) {
return handleList.filter(item => item.types === curSmartType)
}
return handleList
}
},
]
methods: {
getCurrent(data) {
if (data.done_time) {
return 3
} else {
return +data.current || 2
}
},
},
}
</script>
......@@ -75,6 +67,9 @@ export default {
padding .05rem .1rem .2rem
margin-bottom .1rem
position relative
cursor pointer
&:hover
background $section-hover
h5
font-size .1rem
>div
......
src/views/components/complaint-repair.vue
View file @ 2f00baba
......@@ -16,7 +16,7 @@
</div>
<img class="branch" src="@/assets/images/branch.png" />
<div class="chart">
<m-chart :config="config" :data="data" :options="options" />
<m-chart :config="config" :data="$store.state.repairRate" :options="options" />
</div>
</div>
</template>
......@@ -26,10 +26,6 @@ export default {
name: 'ComplaintRepair',
data() {
return {
list: [
{name: '报修数量', value: [18, 37], img: 'repair.png'},
{name: '投诉数量', value: [67, 150], img: 'complaint.png'},
],
config: {
colors: ['#5bd4ff', '#72c011', '#fece35', '#ff6160', '#826bfa', '#cccccc'],
tooltip: {
......@@ -44,32 +40,26 @@ export default {
{type: 'pie', radius: [10 * Number((screen.height / 800).toFixed(1)), 50 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['32%', '50%']}
]
},
data: [
{name: '水', value: 15},
{name: '堵', value: 20},
{name: '险', value: 45},
{name: '电', value: 6},
{name: '漏', value: 9},
{name: '其他', value: 5},
],
options: {
legend: {
top: '10%',
formatter: (name) => {
const data = [
{name: '水', value: 15},
{name: '堵', value: 20},
{name: '险', value: 45},
{name: '电', value: 6},
{name: '漏', value: 9},
{name: '其他', value: 5},
]
return `${name} ${(data.find(e => e.name === name)).value}%`
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>
......
src/views/components/grid-management.vue 0 → 100644
View file @ 2f00baba
<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]" :decimal="0" />
<m-count class="count" :value="item.value[1]" :decimal="0" />
<m-count class="count" :value="item.value[2]" :decimal="0" />
</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
>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-right .1rem
p
color $fontColor
span
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
View file @ 2f00baba
......@@ -25,17 +25,11 @@
<script>
import echarts from 'echarts'
const mockValue = [49.5, 20.9, 22.1]
const mockValue = [49, 21, 22]
export default {
name: 'House',
data() {
return {
list: [
{name: '小区数量', unit: '个', value: 13},
{name: '总户数', unit: '户', value: 300},
{name: '物业企业', unit: '个', value: 101},
{name: '管理面积', unit: '㎡', value: 10.69, dec: 2},
],
chart: null,
option: {
tooltip: {
......@@ -111,6 +105,15 @@ export default {
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))
},
......
src/views/components/land-population.vue
View file @ 2f00baba
......@@ -26,7 +26,33 @@ export default {
},
computed: {
list() {
return this.$store.state.landPopulationInfo
const {year1, year2, year3} = this.$store.state.landPopulationInfo
if (!year1 || !year2 || !year3) return []
const {density1 = 0} = year1
const {year: label2 = '', area: area2 = 0, registered_population: population2 = 0, population_density: density2 = 0} = year2
const {year: label3 = '', area: area3 = 0, registered_population: population3 = 0, population_density: density3 = 0} = year3
const rate2 = (+density2 - +density1) / +density1
const rate3 = (+density3 - +density2) / +density2
return [
{
label: label2 + '年末',
data: [
{value: +area2 || 0, unit: 'k㎡', dec: 2},
{value: +population2 || 0, unit: '人'},
{value: +density2 || 0, unit: '人/k㎡'},
{value: rate2, unit: '%', dec: 2},
]
},
{
label: label3 + '年末',
data: [
{value: +area3 || 0, unit: 'k㎡', dec: 2, up: area3 > area2},
{value: +population3 || 0, unit: '人', up: population3 > population2},
{value: +density3 || 0, unit: '人/k㎡', up: density3 > density2},
{value: rate3, unit: '%', dec: 2, up: rate3 > rate2},
]
},
]
},
}
}
......
src/views/components/left-component.vue
View file @ 2f00baba
......@@ -9,6 +9,7 @@
<m-card title="民防指标"><Defense /></m-card>
</div>
<div class="right">
<m-card title="网格管理"><GridManagement /></m-card>
<m-card title="房屋物业"><House /></m-card>
<m-card title="小区检查清单"><CommunityCheck /></m-card>
<m-card title="工作提示"><WorkTips /></m-card>
......@@ -25,6 +26,7 @@ import Defense from './defense'
import House from './house'
import CommunityCheck from './community-check'
import WorkTips from './work-tips'
import GridManagement from './grid-management'
export default {
name: 'LeftComponent',
components: {
......@@ -35,6 +37,7 @@ export default {
House,
CommunityCheck,
WorkTips,
GridManagement,
},
data() {
return {}
......@@ -73,7 +76,6 @@ export default {
&:nth-child(1)
height 15%
&:nth-child(2)
height 30%
&:nth-child(3)
height 30%
&:nth-child(4)
......@@ -81,8 +83,10 @@ export default {
&.right
>div
&:nth-child(1)
height 40%
&:nth-child(4)
height 15%
&:nth-child(2)
height 40%
&:nth-child(3)
height 30%
</style>
src/views/components/patrol.vue
View file @ 2f00baba
......@@ -10,8 +10,8 @@
</div>
</div>
<div class="detail">
<m-scroll :length="list.length" mode="2" :limit="2" :step="0.75">
<div class="info" v-for="(item, i) in list" :key="item.name+i" :class="{over: item.overtime}">
<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>
......@@ -24,10 +24,10 @@
</div>
<div>
<p>上报人</p>
<p>{{item.person}}</p>
<p>{{item.submit}}</p>
</div>
</div>
<img v-if="item.overtime" src="@/assets/images/overtime.png" />
<img v-if="item.status === '逾期'" src="@/assets/images/overtime.png" />
</div>
</m-scroll>
</div>
......@@ -37,17 +37,18 @@
<script>
export default {
name: 'Patrol',
data() {
return {
sum: [
{name: '逾期整改单', value: 2, unit: '个', img: 'patrol1.png', color: '#ff1e1e'},
{name: '整改单总数', value: 28, unit: '个', img: 'patrol2.png', color: '#fece34'},
{name: '巡检总数', value: 67, unit: '次', img: 'patrol3.png', color: '#00beff'},
],
list: [
{name: '圣骊河滨苑', event: '整改事项', time: '2020-10-20 13:25:16', person: '上报人', overtime: true},
{name: '江湾尊宝别墅（公寓）', event: '整改事项', time: '2020-10-20 13:25:16', person: '上报人'},
{name: '新江湾九里', event: '整改事项', time: '2020-10-20 13:25:16', person: '上报人'},
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'},
]
}
},
......@@ -87,6 +88,9 @@ export default {
margin-bottom .1rem
background $section-bg
height .65rem
cursor pointer
&:hover
background $section-hover
&.over
border-color #ff6160
h5
......
src/views/components/right-component.vue
View file @ 2f00baba
......@@ -7,11 +7,13 @@
<m-card title="投诉报修"><ComplaintRepair /></m-card>
</div>
<div class="right">
<m-card title="主动巡检"><Patrol /></m-card>
<m-card title="联勤联动"><Combine /></m-card>
<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">
<img v-for="img in imgs" :key="img" :src="require(`@/assets/images/${img}`)" />
<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>
</div>
......@@ -37,6 +39,12 @@ export default {
imgs: ['monitor1.png', 'monitor2.png', 'monitor3.png', 'monitor4.png']
}
},
methods: {
handleClick(i) {
const {id} = this.$store.state.videoInfo[i]
this.$emit('select', id)
}
},
}
</script>
......@@ -83,9 +91,29 @@ export default {
display flex
flex-wrap wrap
align-items center
img
>div
width calc((100% - .3rem) / 4)
height 80%
+img
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
View file @ 2f00baba
......@@ -11,13 +11,13 @@
</div>
</div>
<div class="detail">
<div v-for="item in list" :key="item.name">
<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" :value="item.value" :decimal="0" />
<m-count :class="{count: true, yellow: item.value > 0}" :value="item.value" :decimal="0" />
</div>
</div>
</div>
<div class="chart"><m-chart :config="config" :data="data" :options="options" /></div>
<div class="chart"><m-chart :config="config" :data="$store.state.discoverTrend" :options="options" /></div>
</div>
</template>
......@@ -26,50 +26,19 @@ export default {
name: 'SmartDiscover',
data() {
return {
sum: [
{name: '当日新增', value: 3, img: 'today.png', color: '#ffd400'},
{name: '历史累计', value: 1049, img: 'history.png', color: '#01BFFD'},
],
list: [
{name: '门岗脱岗', value: 0, img: 'smart1.png'},
{name: '占用消防通道', value: 0, img: 'smart2.png'},
{name: '集中充电异常', value: 0, img: 'smart3.png'},
{name: '楼道充电', value: 0, img: 'smart4.png'},
{name: '损坏承重结构', value: 0, img: 'smart5.png'},
{name: '非定时倒垃圾', value: 0, img: 'smart6.png'},
{name: '窨井盖异常', value: 0, img: 'smart7.png'},
{name: '水箱异常开启', value: 0, img: 'smart8.png'},
{name: '屋顶积水', value: 0, img: 'smart9.png'},
{name: '屋顶违章建筑', value: 0, img: 'smart10.png'},
{name: '维修资金异常', value: 0, img: 'smart11.png'},
],
config: {
colors: ['#FFCE34', '#826AFA'],
legend: {
align: 'right',
},
shape: [
{key: 'today', name: '当日新增', type: 'line'},
{key: 'created', name: '当日新增', type: 'line'},
{key: 'done', name: '已处理数', type: 'line'},
],
xAxis: {
key: 'date',
},
yAxis: {
min: 10,
max: 90,
interval: 10,
}
},
data: [
{date: '10.13', today: 40, done: 25},
{date: '10.14', today: 43, done: 35},
{date: '10.15', today: 35, done: 45},
{date: '10.16', today: 45, done: 50},
{date: '10.17', today: 38, done: 39},
{date: '10.18', today: 40, done: 26},
{date: '10.19', today: 45, done: 40},
],
options: {
xAxis: {
splitLine: {show: false},
......@@ -77,6 +46,32 @@ export default {
}
}
},
computed: {
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>
......@@ -112,6 +107,11 @@ export default {
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
......@@ -121,6 +121,8 @@ export default {
margin-right .05rem
.count
font-size .12rem
&.yellow
color $color-yellow
.chart
width 100%
height 45%
......
src/views/components/work-tips.vue
View file @ 2f00baba
<template>
<div class="work-tips">
<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" :decimal="0" /> <span>个</span></p>
</div>
</div>
</div>
<div class="wrapper">
<m-scroll :length="list.length" :limit="5">
<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>
</div>
</template>
<script>
......@@ -25,11 +14,6 @@ export default {
name: 'WorkTips',
data() {
return {
sum: [
{name: '网格数', value: 46, img: 'tips1.png', color: '#fece34'},
{name: '网格报警数', value: 28, img: 'tips2.png', color: '#ff1e1e'},
{name: '110非警情数', value: 2, img: 'tips3.png', color: '#ff1e1e'},
],
list: [
{name: '新江湾尚景园', tips: '车辆停发管理'},
{name: '新江湾城首府', tips: '占用公共部位'},
......@@ -45,29 +29,6 @@ export default {
<style lang="stylus" scoped>
.work-tips
display flex
flex-direction column
.sum
display flex
justify-content space-between
margin-bottom .05rem
>div
display flex
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
.wrapper
flex 1
.info
display flex
justify-content space-between
......
src/views/main.vue
View file @ 2f00baba
......@@ -15,12 +15,20 @@
<LeftComponent v-show="!fullView" area="left"/>
</m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight">
<RightComponent v-show="!fullView" area="right"/>
<RightComponent
v-show="!fullView"
area="right"
@patrol="handleMapClick"
@handle="handleMapClick"
/>
</m-animate>
<MapBtns v-model="fullView" @zoomin="zoom('in')" @zoomout="zoom('out')" />
<m-modal v-model="showModal" title="智能报警">
<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>
......@@ -43,38 +51,113 @@ export default {
return {
complete: false,
fullView: false,
showModal: false,
detailModal: false,
patrolModal: false,
smartPoints: null,
detailData: {},
patrolData: {},
detailLayout: [
{
id: {
label: '工单编号',
communityName: {
label: '小区名称',
width: 12,
},
communityAddr: {
label: '小区地址',
width: 12,
},
},
{
types: {
label: '协同事项',
width: 12,
format: val => val && this.$com.transType(val)
},
type: {
label: '事件类型',
receive_property_name: {
label: '响应部门',
width: 12,
},
},
{
check_type: {
label: '发现方式',
width: 12,
format: val => val || '智能发现'
},
device_name: {
label: '设备地点',
width: 12,
},
},
],
// 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: '报警时间',
label: '发现时间',
width: 12,
},
level: {
label: '报警等级',
status: {
label: '整改状态',
width: 12,
},
},
{
address: {
label: '地址',
width: 24,
submit: {
label: '上报人',
width: 12,
},
department: {
label: '房办名称',
width: 12,
},
},
{
result: {
label: '处理结论',
theme: {
label: '检查主题',
width: 24,
},
},
......@@ -83,10 +166,13 @@ export default {
},
computed: {
...mapState([
'curSmartType',
'xinjiangwanPaths',
'commandLayout',
'commandData',
'showCommandModal',
'patrolList',
'handleList',
])
},
methods: {
......@@ -94,79 +180,75 @@ export default {
'initData', // 初始化获取首次加载所需的所有数据
]),
mapComplete() {
this.init()
this.initData()
setTimeout(() => {
this.complete = true
this.init()
}, 1000)
// setTimeout(() => {
// this.complete = true
// this.init()
// }, 1000)
},
init() {
const {map} = this.$refs
const mockPoints = {
size: [14, 16],
data: [
{
x: 2594.9960327148437,
y: 11519.020812988281,
id: 123,
type: '事件类型',
time: '2020-10-23 13:25:15',
level: '2级',
address: '地址',
result: '处理结论',
icon: 'blue1.png',
},
{
x: 5163.4830322265625,
y: 11044.733642578125,
id: 1223,
name: '雍景苑',
type: '事件类型',
time: '2020-10-23 13:25:15',
level: '2级',
address: '地址',
result: '处理结论',
icon: 'blue2.png',
},
{
x: 3489.0714111328125,
y: 10384.431030273437,
name: '九龙仓玺园',
id: 3223,
type: '事件类型',
time: '2020-10-23 13:25:15',
level: '2级',
address: '地址',
result: '处理结论',
icon: 'red3.png',
},
{
x: 2438.0490112304687,
y: 8973.5946044921875,
name: '保利维拉家园',
id: 4223,
type: '事件类型',
time: '2020-10-23 13:25:15',
level: '2级',
address: '地址',
result: '处理结论',
icon: 'green.png',
},
],
}
map.focus(3489.0714111328125, 10384.431030273437, 4.5)
this.initMapFocus()
map.addPolygon({paths: this.xinjiangwanPaths, fillColor: 'rgba(51,145,255,.3)'})
map.addBoundary({name: '新江湾城'})
map.addPoint(mockPoints)
},
initMapFocus() {
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.showModal = true
this.detailModal = true
}
// this.$refs.map.focus(data.x || data.gpsx, data.y || data.gpsy, 8)
},
drawSmartPoints(data) {
const {addPoint, removePoint} = this.$refs.map
removePoint(this.smartPoints)
this.smartPoints = addPoint({
key: 'smart',
size: [14, 16],
data: data.map(item => {
return {
...item,
icon: item.done_time ? 'blue4.png' : 'red4.png',
}
}),
})
},
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)
},
}
}
</script>
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