Skip to content

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

合并自master更改

parents 08e1d5e5 91d6905c
Show whitespace changes
Inline Side-by-side
Showing with 1077 additions and 288 deletions
index.html
View file @ d8b6cec1
<!DOCTYPE html> <!DOCTYPE html>
<html id="html"> <html id="html">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
...@@ -10,13 +11,15 @@ ...@@ -10,13 +11,15 @@
font-size: 16vh; font-size: 16vh;
} }
</style> </style>
</head> </head>
<body>
<body>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
<script src="./static/hls.js"></script> <script src="./static/hls.js"></script>
<script src="./static/SMap.min.js"></script> <script src="./static/SMap.min.js"></script>
<!-- <script src="./static/esm/SMap.min.js"></script> --> <!-- <script src="./static/esm/SMap.min.js"></script> -->
<script src="./static/Plugins.min.js"></script> <script src="./static/Plugins.min.js"></script>
</html> </html>
src/components/MonitorComponents/MonitorCard/mode1.vue
View file @ d8b6cec1
<template> <template>
<div class="card-wrapper"> <div class="card-wrapper">
<div class="card-title" :style="`color:${color}`"> <div class="card-title" :style="`color:${color}`">
<div class="dot"/> <p class="title">{{title}}</p>
{{title}} <p v-if="showTab" class="btn">
<p v-if="showTab">
<span :class="{on: curTab === '处置中'}" @click="handleClick('处置中')">处置中</span> <span :class="{on: curTab === '处置中'}" @click="handleClick('处置中')">处置中</span>
| |
<span :class="{on: curTab === '已完成'}" @click="handleClick('已完成')">已完成</span> <span :class="{on: curTab === '已完成'}" @click="handleClick('已完成')">已完成</span>
</p> </p>
<div class="line">
<img src="@/assets/images/card-title-line.png"/>
</div>
</div> </div>
<div class="card-content"> <div class="card-content">
<span class="border" />
<span class="border right" />
<slot /> <slot />
</div> </div>
</div> </div>
...@@ -52,32 +50,49 @@ export default { ...@@ -52,32 +50,49 @@ export default {
.card-wrapper .card-wrapper
.card-title .card-title
display flex display flex
align-items center align-items flex-start
font-size .11rem justify-content space-between
font-size .14rem
font-weight bold font-weight bold
background-image url('../../../assets/images/card-header.png')
background-size 100% 60%
background-position left bottom
background-repeat no-repeat
>p >p
&.title
text-align center
background-image url('../../../assets/images/card-title-bg.png')
background-size 100% 60%
background-position left bottom
background-repeat no-repeat
padding 0 .2rem
&.btn
font-weight normal font-weight normal
margin-left .05rem margin-right .1rem
font-size .09rem font-size .09rem
align-self flex-end
>span >span
color #999 color #999
cursor pointer cursor pointer
&:hover &:hover
&.on &.on
color #fff color #fff
.dot
width .03rem
height .1rem
background $edgeColor
margin-right .05rem
.line
margin-left .05rem
flex 1
>img
width 100%
min-height .05rem
.card-content .card-content
padding 0.03rem 0 0 position relative
padding .1rem
background linear-gradient(to bottom, rgba(5,71,138,.2), rgba(5,71,138,.8))
border-bottom .01rem solid rgba(91,213,255,.5)
>.border
display block
position absolute
top 0
left 0
bottom 0
width .01rem
background linear-gradient(to bottom, rgba(148,236,255, 0), rgba(91,214,255,.5))
&.right
left auto
right 0
>div >div
width 100% width 100%
height 100% height 100%
......
src/components/MonitorComponents/MonitorCard/monitor-card.vue
View file @ d8b6cec1
...@@ -45,8 +45,8 @@ $size() ...@@ -45,8 +45,8 @@ $size()
$size() $size()
$blur() $blur()
overflow hidden overflow hidden
height initial // height initial
width initial // width initial
/deep/ .card-wrapper /deep/ .card-wrapper
$size() $size()
padding 0.05rem padding 0.05rem
......
src/components/MonitorComponents/MonitorTitle/monitor-title.vue
View file @ d8b6cec1
...@@ -7,6 +7,17 @@ ...@@ -7,6 +7,17 @@
</span> --> </span> -->
<div class="btn back" @click="closePage" /> <div class="btn back" @click="closePage" />
<div class="btn close" @click="closePage" /> <div class="btn close" @click="closePage" />
<div class="slogan left">
<span v-for="(word, i) in slogan[0]" :key="i+word">{{word}}</span>
</div>
<div class="slogan right">
<span v-for="(word, i) in slogan[1]" :key="i+word">{{word}}</span>
</div>
<div class="duty">
今日值班：
<p>{{masters[0]}}<img src="@/assets/images/phone.png" /></p>
<p>{{masters[1]}}<img src="@/assets/images/phone.png" /></p>
</div>
<span v-if="!hideTime" class="moment time"> <span v-if="!hideTime" class="moment time">
<!-- <span class="switch"><img src="@/assets/images/switch.png"/> 切换街道</span> --> <!-- <span class="switch"><img src="@/assets/images/switch.png"/> 切换街道</span> -->
{{curDate}} {{time}} {{curDate}} {{time}}
...@@ -17,6 +28,7 @@ ...@@ -17,6 +28,7 @@
</template> </template>
<script> <script>
// import axios from 'axios'
export default { export default {
name: 'MonitorTitle', name: 'MonitorTitle',
props: { props: {
...@@ -49,6 +61,7 @@ export default { ...@@ -49,6 +61,7 @@ export default {
timer: null, timer: null,
time: null, time: null,
style: {}, style: {},
slogan: ['人民城市人民建', '人民城市为人民'],
} }
}, },
mounted() { mounted() {
...@@ -57,13 +70,7 @@ export default { ...@@ -57,13 +70,7 @@ export default {
this.time = `${this.$moment().format('dddd')} ${this.$moment().format('LTS')}` this.time = `${this.$moment().format('dddd')} ${this.$moment().format('LTS')}`
}, 1000) }, 1000)
} }
// if (this.color) { // this.getWeather()
// this.style = {
// 'text-shadow': `0 0.02rem 0.04rem ${this.color}`,
// 'color': this.color,
// 'background-image': `linear-gradient(to bottom, #fff, ${this.color})`
// }
// }
this.style = {...this.style, 'font-size': this.size} this.style = {...this.style, 'font-size': this.size}
}, },
beforeDestroy() { beforeDestroy() {
...@@ -81,7 +88,12 @@ export default { ...@@ -81,7 +88,12 @@ export default {
return this.$moment(date).isAfter(this.$moment()) return this.$moment(date).isAfter(this.$moment())
} }
} }
} },
masters() {
const {currentStreetInfo, streetInfo} = this.$store.state
const {master1, master2} = streetInfo[currentStreetInfo.id]
return [master1, master2]
},
}, },
methods: { methods: {
handleDateChange(date) { handleDateChange(date) {
...@@ -94,6 +106,13 @@ export default { ...@@ -94,6 +106,13 @@ export default {
closePage() { closePage() {
window.close() window.close()
}, },
// getWeather() {
// axios.get('https://tianqiapi.com/api?version=v6&appid=27325769&appsecret=k2G7Q7bA&city=杨浦&vue=1'
// ).then(res => {
// this.weather = res.data
// console.log(this.weather)
// })
// },
} }
} }
</script> </script>
...@@ -128,6 +147,27 @@ export default { ...@@ -128,6 +147,27 @@ export default {
background-image url(../../../assets/images/close.png) background-image url(../../../assets/images/close.png)
&:hover &:hover
background-image url(../../../assets/images/close-on.png) background-image url(../../../assets/images/close-on.png)
.slogan
display flex
justify-content space-around
align-items center
width 15%
position absolute
top .05rem
z-index: 2;
&.left
left 20%
&.right
right 20%
span
$flex-center()
width .2rem
height @width
background rgba(2,68,147,.8)
border-radius 50%
font-family $font-pang
font-size .14rem
font-weight normal
.switch .switch
color #5BD5FF color #5BD5FF
margin-right .1rem margin-right .1rem
...@@ -136,46 +176,35 @@ export default { ...@@ -136,46 +176,35 @@ export default {
width .12rem width .12rem
vertical-align middle vertical-align middle
.moment .moment
z-index 100 z-index 9
position absolute position absolute
font-size 0.12rem top .07rem
color #fff left 3%
// width 1.5rem .duty
top 25% display flex
// &.date align-items center
// right 15% z-index 9
&.time position absolute
// right 15% top .07rem
left 0 right 3%
right 0 p
margin 0 auto color $color-yellow
text-align center margin 0 .05rem
transform translateX(25%) img
width .08rem
height @width
margin-left .05rem
>.bg >.bg
position absolute position absolute
width 100% width 100%
height 100% height 100%
top 0 top 0
left 0 left 0
// animation shine 2.5s linear reverse infinite
>p >p
// text-shadow 0 0.02rem 0.04rem #B3EBFF
background-clip text background-clip text
-webkit-background-clip text -webkit-background-clip text
// color #B3EBFF
-webkit-text-fill-color transparent -webkit-text-fill-color transparent
background-image linear-gradient(to bottom, #fff, #B3EBFF) background-image linear-gradient(to bottom, #fff, #B3EBFF)
z-index 99 z-index 99
letter-spacing .05rem letter-spacing .05rem
// @keyframes shine {
// 0% {
// opacity 1
// }
// 50% {
// opacity 0.7
// }
// 100% {
// opacity 1
// }
// }
</style> </style>
src/server/ajax.js
View file @ d8b6cec1
...@@ -21,7 +21,7 @@ Axios.interceptors.response.use(response => { ...@@ -21,7 +21,7 @@ Axios.interceptors.response.use(response => {
return response.data return response.data
}, error => { }, error => {
Store.commit('SET_LOADING', false) Store.commit('SET_LOADING', false)
return Promise.resolve(error.response) return Promise.reject(error)
}) })
/** /**
...@@ -56,7 +56,7 @@ const request = ({ method, url, params = {}, contentType = 'application/json;cha ...@@ -56,7 +56,7 @@ const request = ({ method, url, params = {}, contentType = 'application/json;cha
if (showLoading) { if (showLoading) {
Store.commit('SET_LOADING', true) Store.commit('SET_LOADING', true)
} }
return Axios(config) return Axios(config).catch(err => console.error(err))
} }
export default { export default {
......
src/server/api.js
View file @ d8b6cec1
...@@ -7,7 +7,6 @@ case 'production': ...@@ -7,7 +7,6 @@ case 'production':
DATA_URL = 'http://10.89.1.208:10005' DATA_URL = 'http://10.89.1.208:10005'
break break
default: default:
// BASE_URL = 'http://yapi.omniview.pro/mock/350/api'
BASE_URL = 'http://yangpu.hm.omniview.pro/api' BASE_URL = 'http://yangpu.hm.omniview.pro/api'
DATA_URL = 'http://10.89.1.208:10005' DATA_URL = 'http://10.89.1.208:10005'
} }
...@@ -22,9 +21,11 @@ export default { ...@@ -22,9 +21,11 @@ export default {
GET_DISCOVER_INFO: '/service-special-ddd/public/discoverInfo', // 智能发现数目 GET_DISCOVER_INFO: '/service-special-ddd/public/discoverInfo', // 智能发现数目
GET_TS_BX: '/service-documents-ddd/public/repair/complaint', // 投诉报修数目 GET_TS_BX: '/service-documents-ddd/public/repair/complaint', // 投诉报修数目
GET_HANDLE_LIST: '/service-special-ddd/public/alarm/index', // 联勤联动列表 GET_HANDLE_LIST: '/service-special-ddd/public/alarm/index', // 联勤联动列表
GET_CAMERA_LIST: '/service-special-ddd/public/camerainfo', // 视频撒点列表 参数：streetname=街道名称，streetname_l=平凉路街道 模糊查询，rootname=街道 查询所有街道
GET_INSPECTION_LIST: 'http://962121.fgj.sh.gov.cn/wyweb/shanghaiwuye/propertyinspector/api/v1/sharingplatform/themeListForOneDay', // 专项检查
GET_GRID1: '/dc/countDiscoveredCaseByStreet', // 网格-发现 GET_GRID1: '/dc/countDiscoveredCaseByStreet', // 网格-发现
GET_GRID2: '/dc/countRegisterCaseByStreet', // 网格-立案 GET_GRID2: '/dc/countRegisterCaseByStreet', // 网格-立案
GET_GRID3: 'dc/countDispatchCaseByStreet', // 网格-派遣 GET_GRID3: '/dc/countDispatchCaseByStreet', // 网格-派遣
GET_GRID4: '/dc/countSolvingCaseByStreet', // 网格-处置 GET_GRID4: '/dc/countSolvingCaseByStreet', // 网格-处置
GET_GRID5: '/dc/countCheckingCaseByStreet', // 网格-核实 GET_GRID5: '/dc/countCheckingCaseByStreet', // 网格-核实
GET_GRID6: '/dc/countClosedCaseByStreet', // 网格-结案 GET_GRID6: '/dc/countClosedCaseByStreet', // 网格-结案
...@@ -38,6 +39,7 @@ export default { ...@@ -38,6 +39,7 @@ export default {
GET_COMPRESS_COUNT: '/dc/countCompressStationsByStreet', // 街道小型压缩站数目 GET_COMPRESS_COUNT: '/dc/countCompressStationsByStreet', // 街道小型压缩站数目
GET_GARBAGE_COUNT: '/dc/countPointsByStreet', // 街道垃圾收集点数目 GET_GARBAGE_COUNT: '/dc/countPointsByStreet', // 街道垃圾收集点数目
GET_TOILET_COUNT: '/dc/countToiletsByStreet', // 街道环卫公厕数目 GET_TOILET_COUNT: '/dc/countToiletsByStreet', // 街道环卫公厕数目
GET_STREET_BASIC: '/dc/getStreetGridPowerByStreetGridId', // 街道基数
GET_VIDEO_URL: 'http://10.89.1.208:7000/hawkeye/api/v1/camera/', // 后面接id获取视频地址 GET_VIDEO_URL: 'http://10.89.1.208:7000/hawkeye/api/v1/camera/', // 后面接id获取视频地址
GET_HEALTH_INFO: '/service-documents-ddd/public/property/health/degree', // 物业健康度 GET_HEALTH_INFO: '/service-documents-ddd/public/property/health/degree', // 物业健康度
} }
src/store/actions.js
View file @ d8b6cec1
...@@ -19,11 +19,14 @@ export default { ...@@ -19,11 +19,14 @@ export default {
dispatch('getGridSum') dispatch('getGridSum')
dispatch('getPopulationInfo') dispatch('getPopulationInfo')
dispatch('getPatrolList') dispatch('getPatrolList')
dispatch('getCameraList')
dispatch('getDiscoverInfo') dispatch('getDiscoverInfo')
dispatch('getRepairInfo') dispatch('getRepairInfo')
dispatch('getHandleList') dispatch('getHandleList')
dispatch('getDoneList') dispatch('getDoneList')
dispatch('getHealthInfo') dispatch('getHealthInfo')
// dispatch('getInspection')
// dispatch('getStreetBasic')
}, },
async getGreenInfo({state, commit}) { async getGreenInfo({state, commit}) {
if (state.currentStreetInfo.name === '新江湾城街道') { if (state.currentStreetInfo.name === '新江湾城街道') {
...@@ -146,18 +149,28 @@ export default { ...@@ -146,18 +149,28 @@ export default {
commit('SET_PATROL_LIST', com.confirm(res, 'data.content', [])) commit('SET_PATROL_LIST', com.confirm(res, 'data.content', []))
}) })
}, },
getCameraList({commit}) {
ajax.get({
url: api.GET_CAMERA_LIST,
params: {
streetname_l: curStreet,
}
}).then(res => {
commit('SET_CAMERA_LIST', com.confirm(res, 'data.content', []))
})
},
getDiscoverInfo({commit}) { getDiscoverInfo({commit}) {
ajax.get({ ajax.get({
url: api.GET_DISCOVER_INFO, url: api.GET_DISCOVER_INFO,
params: {streetId}, params: {streetId},
}).then(res => { }).then(res => {
const sum = {total: 0, today: 0} const sum = {done: 0, today: 0}
const data = com.confirm(res, 'data.content', []) const data = com.confirm(res, 'data.content', [])
const keys = ['accCtl', 'heap', 'nonVehicleCharg', 'streetMonitor'] const keys = ['accCtl', 'heap', 'nonVehicleCharg', 'streetMonitor']
// const keys = ['heap', 'parkFireExit', 'nonVehicleCharg', 'buildingVibration', 'trash', 'manholeCover', 'waterTank', 'roofWater', 'hermeticSpace', 'accCtl', 'streetMonitor'] // const keys = ['heap', 'parkFireExit', 'nonVehicleCharg', 'buildingVibration', 'trash', 'manholeCover', 'waterTank', 'roofWater', 'hermeticSpace', 'accCtl', 'streetMonitor']
const result = data.filter(item => keys.indexOf(item.types) >= 0) const result = data.filter(item => keys.indexOf(item.types) >= 0)
result.forEach(e => { result.forEach(e => {
sum.total += +e.total sum.done += +e.done
sum.today += +e.numbers sum.today += +e.numbers
}) })
commit('SET_DISCOVER_SUM', sum) commit('SET_DISCOVER_SUM', sum)
...@@ -192,4 +205,24 @@ export default { ...@@ -192,4 +205,24 @@ export default {
commit('SET_HEALTH_INFO', com.confirm(res, 'data.content', {})) commit('SET_HEALTH_INFO', com.confirm(res, 'data.content', {}))
}) })
}, },
// getInspection({commit}) { // 专项检查
// ajax.post({
// url: api.GET_INSPECTION_LIST,
// params: {
// pageNo: 1,
// pageSize: 10000,
// flag: 0,
// someday: moment().format('YYYYMMDD'),
// hpb_id: 310110000000,
// }
// }).then(res => {
// console.log('res --', res)
// })
// }
// getStreetBasic({commit}) { // 街道基数
// ajax.get({url: api.DATA_URL + api.GET_STREET_BASIC, params: {street: '五角场街道', gridId: 10027}}).then(res => {
// console.log('basic', com.confirm(res, 'data.content', {}))
// // commit('SET_STREET_BASIC', com.confirm(res, 'data.content', {}))
// })
// },
} }
src/store/mutations.js
View file @ d8b6cec1
export default { export default {
SET_CURRENT_STREET(state, name) { SET_CURRENT_STREET(state, name) {
if (!name) return if (!name) return
state.currentStreetInfo = state.streets.find(street => street.name.indexOf(name) >= 0) state.currentStreetInfo = state.streets.find(street => {
return street.name.indexOf(name) >= 0 || street.en.indexOf(name) >= 0
})
}, },
SET_LOADING(state, val) { SET_LOADING(state, val) {
state.showLoading = val state.showLoading = val
...@@ -42,6 +44,9 @@ export default { ...@@ -42,6 +44,9 @@ export default {
SET_PATROL_LIST(state, data) { SET_PATROL_LIST(state, data) {
state.patrolList = data state.patrolList = data
}, },
SET_CAMERA_LIST(state, data) {
state.cameraList = data
},
SET_DISCOVER_SUM(state, data) { SET_DISCOVER_SUM(state, data) {
state.discoverSum = data state.discoverSum = data
}, },
......
src/store/state.js
View file @ d8b6cec1
...@@ -64,18 +64,18 @@ const commandLayout2 = [ ...@@ -64,18 +64,18 @@ const commandLayout2 = [
] ]
export default { export default {
streets: [ streets: [
{id: 310110001000, name: '定海路街道', houseId: 310110000169, center: [8140.864167601668, 5079.364284699033]}, {id: 310110020000, name: '新江湾城街道', en: 'xjw', houseId: 310110000168, center: [3635.8506067447124, 10472.688944671301], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=-i6_oyv1Vf-BgqEojN0pPQ8bHK5LfXy6'},
{id: 310110006000, name: '平凉路街道', houseId: 310110000167, center: [5107.94932750342, 2423.6864417613733]}, {id: 310110001000, name: '定海路街道', en: 'dh', houseId: 310110000169, center: [8140.864167601668, 5079.364284699033], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=ftoVMdCb29K2O7W5Ki-rke8vOFA_GsKM'},
{id: 310110008000, name: '江浦路街道', houseId: 310110000177, center: [4211.45116637842, 3786.741592954671]}, {id: 310110006000, name: '平凉路街道', en: 'pl', houseId: 310110000167, center: [5107.94932750342, 2423.6864417613733], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=D_ssgjWDvxbcMcS_eVuPC5_5imPY_YW1'},
{id: 310110009000, name: '四平路街道', houseId: 310110000170, center: [3293.5942071892155, 5147.717485190097]}, {id: 310110008000, name: '江浦路街道', en: 'jp', houseId: 310110000177, center: [4211.45116637842, 3786.741592954671], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=LjBjfj4BrtnsBbPzsUuSo4IR27brzOkO'},
{id: 310110012000, name: '控江路街道', houseId: 310110000171, center: [5008.673834530317, 5227.606100514474]}, {id: 310110009000, name: '四平路街道', en: 'sp', houseId: 310110000170, center: [3293.5942071892155, 5147.717485190097], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=YAZ9Q4o9hgi_cw9QB3Zx2fYklef5Dtmz'},
{id: 310110013000, name: '长白新村街道', houseId: 310110000173, center: [7430.66083957447, 6663.5712796890675]}, {id: 310110012000, name: '控江路街道', en: 'kj', houseId: 310110000171, center: [5008.673834530317, 5227.606100514474], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=tsM-JsYK7pgCRb2FMmwtGWuoR0TwCkkD'},
{id: 310110015000, name: '延吉新村街道', houseId: 310110000172, center: [6246.9579368837085, 5745.491634168607]}, {id: 310110013000, name: '长白新村街道', en: 'cb', houseId: 310110000173, center: [7430.66083957447, 6663.5712796890675], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=J9lTtuTBWjinCpGaX-1kH0ssBamIoSmY'},
{id: 310110016000, name: '殷行街道', houseId: 310110000176, center: [6688.878806764382, 10366.540369915294]}, {id: 310110015000, name: '延吉新村街道', en: 'yj', houseId: 310110000172, center: [6246.9579368837085, 5745.491634168607], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=8zDuAqseqAD5EYvYclnY5jpQw_-TzblE'},
{id: 310110018000, name: '大桥街道', houseId: 310110000166, center: [6374.902499188995, 3511.8719065605596]}, {id: 310110016000, name: '殷行街道', en: 'yh', houseId: 310110000176, center: [6688.878806764382, 10366.540369915294], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=B3_40kuhej63_QyN0LlDOeuOD1HqL5_F'},
{id: 310110019000, name: '五角场街道', houseId: 310110000174, center: [3296.4282528002864, 7281.637272274846]}, {id: 310110018000, name: '大桥街道', en: 'dq', houseId: 310110000166, center: [6374.902499188995, 3511.8719065605596], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=0Sn0K5LW4p7cc6rbCfY8mRqJ2uMS_Bvc'},
{id: 310110020000, name: '新江湾城街道', houseId: 310110000168, center: [3635.8506067447124, 10472.688944671301]}, {id: 310110019000, name: '五角场街道', en: 'wjc', houseId: 310110000174, center: [3296.4282528002864, 7281.637272274846], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=aYOvtgp4LdE37YvY4twwbP-bAKl9gXKx'},
{id: 310110101000, name: '长海路街道', houseId: 310110000175, center: [6016.66261261553, 8153.563542586172]}, {id: 310110101000, name: '长海路街道', en: 'ch', houseId: 310110000175, center: [6016.66261261553, 8153.563542586172], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=cRV65vfRR-i9IHhK7TwAKte57x7W9iHC'},
], ],
healthInfo: { healthInfo: {
creditScore: {}, creditScore: {},
...@@ -84,7 +84,7 @@ export default { ...@@ -84,7 +84,7 @@ export default {
ownerSatisfactionScore: {}, ownerSatisfactionScore: {},
monthCheck: {}, monthCheck: {},
}, },
currentStreetInfo: {id: 310110020000, name: '新江湾城街道', houseId: 310110000168, center: [3635.8506067447124, 10472.688944671301]}, currentStreetInfo: {id: 310110020000, name: '新江湾城街道', en: 'xjw', houseId: 310110000168, center: [3635.8506067447124, 10472.688944671301], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=-i6_oyv1Vf-BgqEojN0pPQ8bHK5LfXy6'},
showLoading: false, showLoading: false,
curDate: null, curDate: null,
curSmartType: null, curSmartType: null,
...@@ -100,12 +100,159 @@ export default { ...@@ -100,12 +100,159 @@ export default {
gridSum: [0, 0, 0, 0, 0, 0], gridSum: [0, 0, 0, 0, 0, 0],
notAlertSum: [0, 0, 0, 0, 0, 0], notAlertSum: [0, 0, 0, 0, 0, 0],
patrolList: [], patrolList: [],
cameraList: [],
discoverSum: {}, discoverSum: {},
discoverInfo: [], discoverInfo: [],
handleCurTab: '处置中', handleCurTab: '处置中',
handleList: [], handleList: [],
doneList: [], doneList: [],
repairInfo: [[0, 0], [0, 0]], repairInfo: [[0, 0], [0, 0]],
populationInfo: {
310110013000: {
total: 70195,
pie: [
{name: '0～14岁', value: 3923},
{name: '15～64岁', value: 55722},
{name: '65岁以上', value: 10550},
],
bar: [
{name: '男', value: 35741},
{name: '女', value: 34454},
]
},
310110020000: {
total: 27251,
pie: [
{name: '0～14岁', value: 2557},
{name: '15～64岁', value: 23420},
{name: '65岁以上', value: 1274},
],
bar: [
{name: '男', value: 15564},
{name: '女', value: 11687},
]
},
310110001000: {
total: 100480,
pie: [
{name: '0～14岁', value: 6299},
{name: '15～64岁', value: 82583},
{name: '65岁以上', value: 11598},
],
bar: [
{name: '男', value: 53745},
{name: '女', value: 46735},
]
},
310110006000: {
total: 85870,
pie: [
{name: '0～14岁', value: 5271},
{name: '15～64岁', value: 69092},
{name: '65岁以上', value: 11507},
],
bar: [
{name: '男', value: 44384},
{name: '女', value: 41486},
]
},
310110008000: {
total: 95382,
pie: [
{name: '0～14岁', value: 6655},
{name: '15～64岁', value: 75506},
{name: '65岁以上', value: 13221},
],
bar: [
{name: '男', value: 47687},
{name: '女', value: 47695},
]
},
310110009000: {
total: 92505,
pie: [
{name: '0～14岁', value: 5074},
{name: '15～64岁', value: 73085},
{name: '65岁以上', value: 14346},
],
bar: [
{name: '男', value: 47488},
{name: '女', value: 45017},
]
},
310110012000: {
total: 105613,
pie: [
{name: '0～14岁', value: 7158},
{name: '15～64岁', value: 82567},
{name: '65岁以上', value: 15888},
],
bar: [
{name: '男', value: 51742},
{name: '女', value: 53871},
]
},
310110015000: {
total: 90334,
pie: [
{name: '0～14岁', value: 4645},
{name: '15～64岁', value: 68558},
{name: '65岁以上', value: 17131},
],
bar: [
{name: '男', value: 44289},
{name: '女', value: 46045},
]
},
310110016000: {
total: 192554,
pie: [
{name: '0～14岁', value: 11174},
{name: '15～64岁', value: 152631},
{name: '65岁以上', value: 28749},
],
bar: [
{name: '男', value: 96510},
{name: '女', value: 96044},
]
},
310110018000: {
total: 124954,
pie: [
{name: '0～14岁', value: 7852},
{name: '15～64岁', value: 100928},
{name: '65岁以上', value: 16174},
],
bar: [
{name: '男', value: 63143},
{name: '女', value: 61811},
]
},
310110019000: {
total: 149090,
pie: [
{name: '0～14岁', value: 9891},
{name: '15～64岁', value: 122668},
{name: '65岁以上', value: 16531},
],
bar: [
{name: '男', value: 73882},
{name: '女', value: 75208},
]
},
310110101000: {
total: 178994,
pie: [
{name: '0～14岁', value: 14648},
{name: '15～64岁', value: 145778},
{name: '65岁以上', value: 18568},
],
bar: [
{name: '男', value: 90599},
{name: '女', value: 88395},
]
},
},
streetInfo: { streetInfo: {
310110020000: { 310110020000: {
num: 190, num: 190,
......
src/views/components/application.vue 0 → 100644
View file @ d8b6cec1
<template>
<div class="application">
<div v-for="item in list" :key="item.name" @click.prevent="handleClick(item.key)">
<img :src="require(`@/assets/images/${item.icon}`)" />
<p>{{item.name}}</p>
</div>
</div>
</template>
<script>
export default {
name: 'Application',
data() {
return {
list: [
{name: '会议系统', icon: 'app1.png'},
{name: '派单系统', icon: 'app2.png'},
{name: '气象系统', icon: 'app3.png'},
{name: '网格系统', icon: 'app4.png', key: 'jumpGridPage'},
]
}
},
methods: {
handleClick(key) {
key && this[key]()
},
jumpGridPage() {
const {url} = this.$store.state.currentStreetInfo
window.open(url)
},
}
}
</script>
<style lang="stylus" scoped>
.application
display flex
align-items center
justify-content space-around
>div
text-align center
cursor pointer
padding 0 .05rem
&:hover
box-shadow 0 .3rem 0.1rem 0.05rem rgba(0,0,0,0.2)
img
height .3rem
width auto
margin .05rem 0
</style>
src/views/components/city-environment.vue 0 → 100644
View file @ d8b6cec1
<template>
<div class="city-environment">
<div v-for="item in list" :key="item.title">
<div>
<img :src="require(`@/assets/images/${item.icon}`)" />
<p>{{item.title}}</p>
</div>
<div>
<m-count class="count" :value="item.value" :decimal="item.decimal" />
<span class="unit"> {{item.unit}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CityEnvironment',
computed: {
list() {
const [a={value: 0}, b={value: 0}, c={value: 0}] = this.$store.state.greenInfo
return [
{title: '空气质量', value: 91.1, unit: '%优良率', decimal: 1, icon: 'city1.png'},
{title: 'PM2.5', value: 32, unit: '微克/㎡', decimal: 0, icon: 'city2.png'},
{title: '人均绿地', value: 91.1, unit: '㎡/人', decimal: 2, icon: 'city3.png'},
{title: '环卫公厕', value: a.value, unit: '个', decimal: 0, icon: 'city4.png'},
{title: '生活垃圾收集', value: b.value, unit: '个', decimal: 0, icon: 'city5.png'},
{title: '小型压缩站', value: c.value, unit: '个', decimal: 0, icon: 'city6.png'},
]
}
}
}
</script>
<style lang="stylus" scoped>
.city-environment
display flex
flex-wrap wrap
width 100%
height 100%
>div
width 33.3%
height 50%
display flex
flex-direction column
justify-content center
>div
display flex
align-items center
img
width .13rem
height @width
margin-right .05rem
.count
font-size .12rem
margin-left .18rem
.unit
color #999
font-size .08rem
</style>
src/views/components/combine.vue
View file @ d8b6cec1
<template> <template>
<div class="combine"> <div class="combine">
<m-scroll v-if="list.length > 0" :length="list.length" :limit="$store.state.currentStreetInfo.name === '新江湾城街道' ? 2 : 3"> <m-scroll v-if="list.length > 0" :length="list.length" :limit="1">
<div @click="$emit('select', item)" :class="{detail: true, done: !isDoing}" v-for="item in list" :key="item.id"> <div @click="$emit('select', item)" :class="{detail: true, done: !isDoing}" v-for="item in list" :key="item.id">
<div> <div>
<h5>{{item.communityName}}</h5> <h5>{{item.communityName}}</h5>
......
src/views/components/community-check.vue
View file @ d8b6cec1
...@@ -15,9 +15,12 @@ export default { ...@@ -15,9 +15,12 @@ export default {
data() { data() {
return { return {
list: [ list: [
['高空坠物隐患', '水电气异常', '消防设施异常', '.', '.'], ['高空坠物隐患', '水电气异常', '消防设施异常'],
['违规租赁', '毁绿占绿', '停车矛盾', '改变物业性质', '占用公共部位'], ['违规租赁', '毁绿占绿', '停车矛盾'],
['建筑垃圾违规', '乱布线', '楼道乱张贴', '.', '.'], ['建筑垃圾违规', '乱布线', '楼道乱张贴'],
// ['高空坠物隐患', '水电气异常', '消防设施异常', '.', '.'],
// ['违规租赁', '毁绿占绿', '停车矛盾', '改变物业性质', '占用公共部位'],
// ['建筑垃圾违规', '乱布线', '楼道乱张贴', '.', '.'],
] ]
} }
}, },
......
src/views/components/complaint-repair.vue
View file @ d8b6cec1
...@@ -43,7 +43,7 @@ export default { ...@@ -43,7 +43,7 @@ export default {
}, },
options: { options: {
legend: { legend: {
top: '15%', top: '5%',
formatter: (name) => { formatter: (name) => {
// const data = this.$store.state.repairRate // const data = this.$store.state.repairRate
// return `${name} ${(data.find(e => e.name === name)).value}件` // return `${name} ${(data.find(e => e.name === name)).value}件`
...@@ -56,7 +56,7 @@ export default { ...@@ -56,7 +56,7 @@ export default {
tarValue = data[i].value tarValue = data[i].value
} }
} }
const percent = (tarValue / total * 100).toFixed(0) const percent = total == 0 ? 0 : (tarValue / total * 100).toFixed(0)
return `${name} ${percent}%` return `${name} ${percent}%`
} }
} }
...@@ -70,8 +70,8 @@ export default { ...@@ -70,8 +70,8 @@ export default {
list() { list() {
const {repairInfo} = this.$store.state const {repairInfo} = this.$store.state
return [ return [
{name: '报修数量', value: repairInfo[0], img: 'repair.png'}, {name: '报修数量', value: repairInfo[0], img: 'icon5.png'},
{name: '投诉数量', value: repairInfo[1], img: 'complaint.png'}, {name: '投诉数量', value: repairInfo[1], img: 'icon6.png'},
] ]
}, },
} }
...@@ -93,9 +93,9 @@ export default { ...@@ -93,9 +93,9 @@ export default {
display flex display flex
align-items center align-items center
img img
width .25rem width .15rem
height @width height @width
margin-right .05rem margin-right .1rem
p p
color $fontColor color $fontColor
&:last-child &:last-child
......
src/views/components/defense.vue
View file @ d8b6cec1
...@@ -30,7 +30,7 @@ export default { ...@@ -30,7 +30,7 @@ export default {
flex-direction column flex-direction column
justify-content space-around justify-content space-around
.bar .bar
width 90% width 100%
height .06rem height .06rem
border-radius .02rem border-radius .02rem
background #19487F background #19487F
......
src/views/components/grid-management.vue
View file @ d8b6cec1
...@@ -11,19 +11,6 @@ ...@@ -11,19 +11,6 @@
</p> </p>
<m-step class="combine-step" :steps="steps" :current="1000"/> <m-step class="combine-step" :steps="steps" :current="1000"/>
</div> </div>
<!-- <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>
</div> </div>
</template> </template>
...@@ -47,8 +34,8 @@ export default { ...@@ -47,8 +34,8 @@ export default {
sum() { sum() {
const {gridSum, notAlertSum} = this.$store.state const {gridSum, notAlertSum} = this.$store.state
return [ return [
{name: '网格事件数', value: gridSum, img: 'tips2.png'}, {name: '网格事件数', value: gridSum, img: 'icon3.png'},
{name: '110非警情数', value: notAlertSum, img: 'tips3.png'}, {name: '110非警情数', value: notAlertSum, img: 'icon4.png'},
] ]
} }
}, },
...@@ -67,7 +54,7 @@ export default { ...@@ -67,7 +54,7 @@ export default {
align-items center align-items center
font-size .11rem font-size .11rem
img img
width .2rem width .15rem
height @width height @width
margin 0 .1rem margin 0 .1rem
.content .content
......
src/views/components/left-component.vue
View file @ d8b6cec1
<template> <template>
<div class="left-component"> <div class="left-component">
<p class="title">街镇概况</p>
<div>
<div class="left"> <div class="left">
<m-card title="指挥体系"><Command /></m-card> <m-card title="街道基数"><StreetBasic /></m-card>
<m-card title="城市环境"><CityEnvironment /></m-card>
<m-card title="土地人口"><LandPopulation /></m-card> <m-card title="土地人口"><LandPopulation /></m-card>
<m-card title="绿化市容"><Green /></m-card>
<m-card title="民防指标"><Defense /></m-card>
</div> </div>
<div class="right"> <div class="right">
<m-card title="网格管理"><GridManagement /></m-card> <m-card title="民防指标"><Defense /></m-card>
<m-card title="房屋物业"><House /></m-card> <m-card title="物业评分"><Property /></m-card>
<m-card title="小区检查清单"><CommunityCheck /></m-card>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Command from './command'
import LandPopulation from './land-population' import LandPopulation from './land-population'
import Green from './green'
import Defense from './defense' import Defense from './defense'
import House from './house' import CityEnvironment from './city-environment'
import CommunityCheck from './community-check' import Property from './property-score'
import GridManagement from './grid-management' import StreetBasic from './street-basic'
export default { export default {
name: 'LeftComponent', name: 'LeftComponent',
components: { components: {
Command,
LandPopulation, LandPopulation,
Green,
Defense, Defense,
House, CityEnvironment,
CommunityCheck, Property,
GridManagement, StreetBasic,
}, },
data() { data() {
return {} return {}
...@@ -44,47 +35,27 @@ export default { ...@@ -44,47 +35,27 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
.left-component .left-component
display flex
z-index 99 z-index 99
background-image url('../../assets/images/component-bg.png')
background-repeat no-repeat
background-size 100% 100%
width 100% width 100%
height calc(100vh - 0.5rem) height calc(100vh - 0.5rem)
position relative position relative
padding .15rem .1rem .1rem
.title
position absolute
text-align center
left 0
right 0
margin 0 auto
font-size .14rem
top -0.1rem
text-shadow 0 0 .05rem #3391FF
font-weight bold
>div
display flex
width 100%
height 100%
>div >div
// flex 1 // width 50%
width 50% width calc(33.3vw / 2)
height 100% height 100%
&.left &.left
>div >div
&:nth-child(1) &:nth-child(1)
height 15% height 45%
&:nth-child(2) &:nth-child(2)
height 25%
&:nth-child(3) &:nth-child(3)
height 30% height 30%
&:nth-child(4)
height 25%
&.right &.right
>div >div
&:nth-child(1) &:nth-child(1)
height 30% height 25%
&:nth-child(2) &:nth-child(2)
height 40% height 75%
&:nth-child(3)
height 30%
</style> </style>
src/views/components/map-btns.vue
View file @ d8b6cec1
...@@ -35,7 +35,7 @@ export default { ...@@ -35,7 +35,7 @@ export default {
.map-btns .map-btns
position fixed position fixed
left calc(33.3% + .05rem) left calc(33.3% + .05rem)
bottom .05rem bottom .1rem
transition left .5s ease-in-out transition left .5s ease-in-out
&.isFull &.isFull
left .05rem left .05rem
......
src/views/components/patrol.vue
View file @ d8b6cec1
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
<div class="detail"> <div class="detail">
<m-scroll v-if="$store.state.patrolList.length > 0" :length="$store.state.patrolList.length" mode="2" :limit="2" :step="0.75"> <m-scroll v-if="$store.state.patrolList.length > 0" :length="$store.state.patrolList.length" mode="2" :limit="$store.state.currentStreetInfo.name === '新江湾城街道' ? 1 : 2" :step="0.75">
<div @click="$emit('select', {...item, key: 'patrol'})" class="info" v-for="(item, i) in $store.state.patrolList" :key="item.communityName+i" :class="{over: item.checkStateName === '逾期' || item.checkStateName.indexOf('未完结') >= 0}"> <div @click="$emit('select', {...item, key: 'patrol'})" class="info" v-for="(item, i) in $store.state.patrolList" :key="item.communityName+i" :class="{over: item.checkStateName === '逾期' || item.checkStateName.indexOf('未完结') >= 0}">
<h5>{{item.communityName}}</h5> <h5>{{item.communityName}}</h5>
<div> <div>
......
src/views/components/property-score.vue 0 → 100644
View file @ d8b6cec1
<template>
<div class="property-score">
<div>
<div class="title">
<div class="dot"/>
能力得分
<div class="line">
<img src="@/assets/images/card-title-line.png"/>
</div>
</div>
<div class="chart" ref="chart"></div>
</div>
<div>
<div class="title">
<div class="dot"/>
治理得分
<div class="line">
<img src="@/assets/images/card-title-line.png"/>
</div>
</div>
<div class="govern">
<div class="content">
<p><m-count class="count" :style="`color:${switchColor}`" :value="total" :decimal="0" /><span class="unit">（分）</span></p>
<p>整体治理得分</p>
</div>
<div class="needel" :style="`background:linear-gradient(to top, transparent 45%, ${switchColor});transform:rotate(${switchDeg}deg)`"/>
</div>
</div>
<div>
<div class="title">
<div class="dot"/>
小区检查清单
<div class="line">
<img src="@/assets/images/card-title-line.png"/>
</div>
</div>
<CommunityCheck />
</div>
</div>
</template>
<script>
import CommunityCheck from './community-check'
import echarts from 'echarts'
export default {
name: 'PropertyScore',
components: {
CommunityCheck,
},
data() {
return {
chart: null,
}
},
mounted() {
setTimeout(this.init, 0)
},
beforeDestroy() {
this.chart && window.removeEventListener('resize', () => this.chart.resize())
},
computed: {
option() {
return {
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',
align: 'center',
fontSize: 12 * this.sizeRate,
},
},
formatter: (text, {index}) => {
return `{a|${text}}\n{b|${this.chartData[index]}}{c|/20}`
},
},
splitArea: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
axisLine: {
show: false,
},
indicator: [
{text: '物业诚信计分', index: 0, max: 20},
{text: '投诉报修情况', index: 1, max: 20},
{text: '小区管理情况', index: 2, max: 20},
{text: '业主满意度', index: 3, max: 20},
{text: '行业落实情况', index: 4, max: 20},
],
center: ['50%', '60%'],
radius: '60%',
}],
series: [{
type: 'radar',
symbol: 'none',
lineStyle: {
color: '#ff0000'
},
areaStyle: {
color: 'rgb(255,106,37)',
},
data: [{
value: this.chartData,
}]
}]
}
},
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
chartData() {
const {id} = this.$store.state.currentStreetInfo
const {creditScore, propertyWarrantyScore, communityManagementScore, ownerSatisfactionScore, monthCheck} = this.$store.state.healthInfo
return [
+creditScore[id + ''] || 0,
+propertyWarrantyScore[id + ''] || 0,
+communityManagementScore[id + ''] || 0,
+ownerSatisfactionScore[id + ''] || 0,
+monthCheck[id + ''] || 0,
]
},
total() {
return this.chartData.reduce((cur, acc) => cur + acc, 0)
},
switchColor() {
if (this.total >= 75) {
return '#75e1b0'
}
if (this.total < 75 && this.total > 20) {
return '#ffd400'
}
if (this.total <= 20) {
return '#ff1e1e'
}
// if (this.total >= 90) {
// return '#75e1b0'
// }
// if (this.total < 90 && this.total >= 80) {
// return '#ffd400'
// }
// if (this.total < 80) {
// return '#ff1e1e'
// }
},
switchDeg() {
if (this.total >= 50) {
const rate = (this.total - 50) / 50
return (90 * rate).toFixed(1)
} else if (this.total > 0 && this.total < 50) {
const rate = (50 - this.total) / 50
return (-90 * rate).toFixed(1)
} else {
return -90
}
}
},
methods: {
init() {
this.chart = echarts.init(this.$refs.chart)
window.addEventListener('resize', () => this.chart.resize())
this.chart.setOption(this.option)
},
},
watch: {
chartData() {
this.chart && this.chart.setOption(this.option)
},
},
}
</script>
<style lang="stylus" scoped>
.property-score
width 100%
height 100%
>div
&:nth-of-type(1)
height 42%
&:nth-of-type(2)
height 33%
&:nth-of-type(3)
height 25%
.title
display flex
align-items center
.dot
width .03rem
height .1rem
background $edgeColor
margin-right .05rem
.line
margin-left .05rem
flex 1
>img
width 100%
min-height .05rem
.chart
height 95%
width 100%
.govern
position relative
height 90%
width 100%
background-image url('../../assets/images/dashboard.png')
background-size auto 100%
background-repeat no-repeat
background-position center
$flex-center()
align-items flex-end
.content
margin-bottom .1rem
.count
font-size .14rem
color #44D7B6
.unit
font-size .08rem
color #999
.needel
position absolute
width .05rem
height .65rem
left 0
right 0
bottom .2rem
margin auto
transition rotate .3s ease-in-out
transform rotate(-90deg)
transform-origin bottom
</style>
src/views/components/right-component.vue
View file @ d8b6cec1
<template> <template>
<div class="right-component"> <div class="right-component">
<p class="title">发现督查</p>
<div>
<div class="left"> <div class="left">
<m-card title="网格管理"><GridManagement /></m-card>
<m-card title="智能发现"><SmartDiscover /></m-card> <m-card title="智能发现"><SmartDiscover /></m-card>
<m-card title="投诉报修"><ComplaintRepair /></m-card> <m-card title="联勤联动" showTab><Combine @select="$emit('handle', $event)"/></m-card>
</div> </div>
<div class="right"> <div class="right">
<m-card title="投诉报修"><ComplaintRepair /></m-card>
<!-- <m-card title="专项/专题检查"><SpecialInspection /></m-card> -->
<m-card title="主动巡检"><Patrol @select="$emit('patrol', $event)" /></m-card> <m-card title="主动巡检"><Patrol @select="$emit('patrol', $event)" /></m-card>
<m-card title="联勤联动" showTab><Combine @select="$emit('handle', $event)"/></m-card>
<m-card title="鹰眼监控" v-if="$store.state.currentStreetInfo.name === '新江湾城街道'"> <m-card title="鹰眼监控" v-if="$store.state.currentStreetInfo.name === '新江湾城街道'">
<div class="monitor-video"> <div class="monitor-video">
<div v-for="(img, i) in imgs" @click="handleClick(i)" :key="img" :style="`background-image: url(${require(`@/assets/images/${img}`)})`"> <div v-for="(img, i) in imgs" @click="handleClick(i)" :key="img" :style="`background-image: url(${require(`@/assets/images/${img}`)})`">
...@@ -17,22 +17,30 @@ ...@@ -17,22 +17,30 @@
</div> </div>
</m-card> </m-card>
</div> </div>
<div class="bottom">
<m-card title="专项应用"><Application /></m-card>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import GridManagement from './grid-management'
import SmartDiscover from './smart-discover' import SmartDiscover from './smart-discover'
import ComplaintRepair from './complaint-repair' import ComplaintRepair from './complaint-repair'
import Patrol from './patrol' import Patrol from './patrol'
import Combine from './combine' import Combine from './combine'
import Application from './application'
import SpecialInspection from './special-inspection'
export default { export default {
name: 'RightComponent', name: 'RightComponent',
components: { components: {
GridManagement,
SmartDiscover, SmartDiscover,
ComplaintRepair, ComplaintRepair,
Patrol, Patrol,
Combine, Combine,
Application,
SpecialInspection
}, },
data() { data() {
return { return {
...@@ -41,12 +49,12 @@ export default { ...@@ -41,12 +49,12 @@ export default {
}, },
methods: { methods: {
handleClick(i) { handleClick(i) {
const {id} = this.$store.state.videoInfo[i] const {id, location} = this.$store.state.videoInfo[i]
this.$ajax.get({ this.$ajax.get({
url: this.$api.GET_VIDEO_URL + id, url: this.$api.GET_VIDEO_URL + id,
showLoading: true, showLoading: true,
}).then(res => { }).then(res => {
this.$emit('video', this.$com.confirm(res, 'payload.url')) this.$emit('video', this.$com.confirm(res, 'payload.url'), location)
}) })
// this.$emit('video', 'http://10.216.71.20:83/openUrl/TMIXpTy/live.m3u8') // this.$emit('video', 'http://10.216.71.20:83/openUrl/TMIXpTy/live.m3u8')
} }
...@@ -56,47 +64,35 @@ export default { ...@@ -56,47 +64,35 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
.right-component .right-component
display flex
z-index 99 z-index 99
background-image url('../../assets/images/component-bg.png')
background-repeat no-repeat
background-size 100% 100%
width 100% width 100%
height calc(100vh - 0.5rem) height calc(100vh - 0.5rem)
position relative position relative
padding .15rem .1rem .1rem flex-wrap wrap
.title
position absolute
text-align center
left 0
right 0
margin 0 auto
font-size .14rem
top -0.1rem
text-shadow 0 0 .05rem #3391FF
font-weight bold
>div
display flex
width 100%
height 100%
>div >div
// flex 1 // width 50%
width 50% width calc(33.3vw / 2)
height 100% height 80%
&.left &.left
>div >div
&:nth-child(1) &:nth-child(1)
height 65%
&:nth-child(2) &:nth-child(2)
height 35% height 37%
&:nth-child(3)
height 26%
&.right &.right
display flex display flex
flex-direction column flex-direction column
>div >div
&:nth-child(1) &:nth-child(1)
height 40% height 37%
&:nth-child(2) &:nth-child(2)
flex 1 flex 1
&:nth-child(3) &:nth-child(3)
height 26%
&.bottom
width 100%
height 20% height 20%
.monitor-video .monitor-video
display flex display flex
......
src/views/components/smart-discover.vue
View file @ d8b6cec1
...@@ -9,12 +9,6 @@ ...@@ -9,12 +9,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="detail">
<div @click="handleClick(item.types, item.visible)" :class="{on: item.types === curSmartType, visible: item.visible}" v-for="item in list" :key="item.types">
<p><img :src="require(`@/assets/images/${item.img}`)" />{{item.name}}</p>
<m-count :class="{count: true, yellow: item.value > 0}" :value="item.value" :decimal="0" />
</div>
</div> -->
<div class="detail"> <div class="detail">
<img src="@/assets/images/smart.png" /> <img src="@/assets/images/smart.png" />
<div <div
...@@ -27,13 +21,13 @@ ...@@ -27,13 +21,13 @@
<p>{{item.name}}</p> <p>{{item.name}}</p>
</div> </div>
</div> </div>
<div v-if="showChart" class="chart"> <!-- <div v-if="showChart" class="chart">
<m-chart v-if="discoverTrend.length > 0" :config="config" :data="discoverTrend" :options="options" /> <m-chart v-if="discoverTrend.length > 0" :config="config" :data="discoverTrend" :options="options" />
<div v-else class="no-data"> <div v-else class="no-data">
<img src="@/assets/images/building.png" /> <img src="@/assets/images/building.png" />
<p>— 暂无数据 —</p> <p>— 暂无数据 —</p>
</div> </div>
</div> </div> -->
</div> </div>
</template> </template>
...@@ -74,10 +68,10 @@ export default { ...@@ -74,10 +68,10 @@ export default {
return this.$store.state.curSmartType return this.$store.state.curSmartType
}, },
sum() { sum() {
const {total, today} = this.$store.state.discoverSum const {done, today} = this.$store.state.discoverSum
return [ return [
{name: '当日新增', value: today || 0, img: 'today.png', color: '#ffd400'}, {name: '当日新增', value: today || 0, img: 'today-new.png', color: '#ffd400'},
{name: '历史累计', value: total || 0, img: 'history.png', color: '#01BFFD'}, {name: '当日关闭', value: done || 0, img: 'today-close.png', color: '#01BFFD'},
] ]
}, },
list() { list() {
...@@ -95,14 +89,6 @@ export default { ...@@ -95,14 +89,6 @@ export default {
}) })
} }
return result return result
// const result = discoverInfo.map((item, i) => ({
// name: this.$com.transType(item.types),
// value: +item.numbers || 0,
// img: `smart${i + 1}.png`,
// types: item.types,
// visible: this.calcVisible(item.types),
// }))
// return result.sort((a, b) => b.visible - a.visible)
} }
}, },
methods: { methods: {
...@@ -152,9 +138,9 @@ export default { ...@@ -152,9 +138,9 @@ export default {
display flex display flex
flex 1 flex 1
align-items center align-items center
padding-left .05rem padding-left .1rem
img img
width .25rem width .15rem
height @width height @width
margin-right .05rem margin-right .05rem
p p
...@@ -166,7 +152,7 @@ export default { ...@@ -166,7 +152,7 @@ export default {
font-size .13rem font-size .13rem
.detail .detail
width 100% width 100%
height 35% height 75%
position relative position relative
>img >img
width 36% width 36%
...@@ -200,10 +186,10 @@ export default { ...@@ -200,10 +186,10 @@ export default {
top 0 top 0
right 0 right 0
&:nth-of-type(3) &:nth-of-type(3)
bottom 0 bottom .05rem
left 0 left 0
&:nth-of-type(4) &:nth-of-type(4)
bottom 0 bottom .05rem
right 0 right 0
.count .count
font-size .12rem font-size .12rem
......
src/views/components/special-inspection.vue 0 → 100644
View file @ d8b6cec1
<template>
<div class="special-inspection">
<p>已查/应查</p>
<div class="number">
<p><m-count class="count blue" :value="68" :decimal="0" />/<m-count class="count" :value="158" :decimal="0" /></p>
</div>
<div class="bar">
<div class="inner" :style="`width:${0.8 * 100}%;`"></div>
</div>
<div class="content">
<img src="@/assets/images/icon1.png"/>
<p>已有主题</p>
<div class="line" />
<m-count class="count" :value="16" :decimal="0" />
</div>
<div class="content">
<img src="@/assets/images/icon2.png"/>
<p>已完成检查小区</p>
<div class="line" />
<m-count class="count" :value="92" :decimal="0" />
</div>
<p>已完成整改/已开整改单</p>
<div class="number">
<p><m-count class="count blue" :value="25" :decimal="0" />%</p>
<p><m-count class="count blue" :value="4" :decimal="0" />/<m-count class="count" :value="16" :decimal="0" /></p>
</div>
<div class="bar">
<div class="inner" :style="`width:${0.25 * 100}%;`"></div>
</div>
<div class="number">
<p><m-count class="count blue" :value="16" :decimal="0" />%</p>
</div>
<div class="bar">
<div class="inner" :style="`width:${0.16 * 100}%;`"></div>
</div>
</div>
</template>
<script>
export default {
name: 'SpecialInspection',
data() {
return {}
},
}
</script>
<style lang="stylus" scoped>
.special-inspection
display flex
flex-direction column
justify-content space-around
.count
font-size .12rem
&.blue
color #5bd5ff
.content
display flex
align-items center
img
width .15rem
height @width
margin-right .05rem
.line
flex 1
height .01rem
border-bottom .01rem dashed rgba(51,145,255,.4)
margin 0 .05rem
.number
display flex
align-items center
justify-content space-between
font-size .12rem
font-weight bold
.bar
width 100%
height .08rem
border-radius .01rem
background #19487F
>.inner
height 99%
border-radius inherit
background #FFD400
</style>
src/views/components/street-basic.vue 0 → 100644
View file @ d8b6cec1
<template>
<div class="street-basic">
<div>
<p class="title">
<img src="@/assets/images/icon7.png" />
实有人口
<m-count class="count" :value="curData.total" :decimal="0" />
<span class="unit">人</span>
</p>
<div class="chart" v-if="showChart">
<m-chart :config="config" :data="curData.pie" :options="options" />
</div>
<div class="chart" v-if="showChart">
<m-chart :config="config2" :data="curData.bar" />
</div>
</div>
<div>
<p class="title">
<img src="@/assets/images/icon8.png" />
实有住户
<m-count class="count" :value="list[1].value" :decimal="0" />
<span class="unit">户</span>
</p>
<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>
</div>
</template>
<script>
export default {
name: 'StreetBasic',
data() {
return {
showChart: false,
config: {
colors: ['#5bd4ff', '#72c011', '#fece35', '#ff6160', '#826bfa', '#cccccc'],
tooltip: {
formatter: '{b}：{c}人 ({d}%)',
confine: true,
},
legend: {
align: 'left',
orient: 'vertical',
},
shape: [
{type: 'pie', radius: [20 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['75%', '50%']}
]
},
config2: {
colors: ['#826bfa', '#cccccc'],
legend: {hide: true},
shape: [
{key: 'value', type: 'bar', barWidth: '30%', barGap: '20%'},
],
xAxis: {
key: 'name',
}
},
options: {
legend: {
top: '10%',
// formatter: (name) => {
// // const data = this.$store.state.repairRate
// // return `${name} ${(data.find(e => e.name === name)).value}件`
// const data = this.$store.state.repairRate
// let total = 0
// let tarValue
// for (let i = 0; i < data.length; i++) {
// total += data[i].value
// if (data[i].name === name) {
// tarValue = data[i].value
// }
// }
// const percent = (tarValue / total * 100).toFixed(0)
// return `${name} ${percent}%`
// }
}
}
}
},
mounted() {
setTimeout(() => this.showChart = true, 100)
},
computed: {
list() {
const {community, house, 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},
]
},
curData() {
const {currentStreetInfo, populationInfo} = this.$store.state
return populationInfo[currentStreetInfo.id]
},
},
}
</script>
<style lang="stylus" scoped>
.street-basic
width 100%
height 100%
display flex
flex-direction column
justify-content space-around
.title
display flex
align-items center
margin-bottom .1rem
img
width .15rem
height @width
margin-right .1rem
.count
font-size .12rem
margin-left .1rem
.unit
font-size .08rem
color #999
.sum
display flex
justify-content space-between
>div
width 30%
min-height .5rem
background $cardBg
$flex-center()
flex-direction column
box-shadow inset 0 0 .1rem 0 rgba(71,179,255,.2)
.count
font-size 0.12rem
p
font-size .09rem
color $cardFontColor
.chart
display inline-block
width 49%
height 14vh
margin-top .1rem
</style>
src/views/main.vue
View file @ d8b6cec1
...@@ -30,13 +30,13 @@ ...@@ -30,13 +30,13 @@
<m-modal v-model="doneModal" title="已完成处置"> <m-modal v-model="doneModal" title="已完成处置">
<DoneComponent v-if="doneModal" :data="doneData" /> <DoneComponent v-if="doneModal" :data="doneData" />
</m-modal> </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-modal title="指挥体系" :value="showCommandModal" @close="$store.commit('SET_COMMAND_MODAL', false)">
<m-form :label-width=".7" :model="streetInfo[currentStreetInfo.id]" :layout="streetInfo[currentStreetInfo.id].layout" /> <m-form :label-width=".7" :model="streetInfo[currentStreetInfo.id]" :layout="streetInfo[currentStreetInfo.id].layout" />
</m-modal> </m-modal>
<m-modal title="鹰眼监控" v-model="videoModal"> <m-modal v-model="patrolModal" title="主动巡检">
<m-form :label-width=".6" :model="patrolData" :layout="patrolLayout" />
</m-modal>
<m-modal :title="`鹰眼监控：${cameraName || ''}`" v-model="videoModal">
<VideoComponent v-if="videoModal" :videoSrc="videoSrc" /> <VideoComponent v-if="videoModal" :videoSrc="videoSrc" />
</m-modal> </m-modal>
</m-grid> </m-grid>
...@@ -67,11 +67,10 @@ export default { ...@@ -67,11 +67,10 @@ export default {
videoModal: false, videoModal: false,
videoSrc: null, videoSrc: null,
detailModal: false, detailModal: false,
patrolModal: false,
smartPoints: null, smartPoints: null,
patrolPoints: null,
detailData: {}, detailData: {},
patrolData: {}, cameraPoints: [],
cameraName: null,
detailLayout: [ detailLayout: [
{ {
communityName: { communityName: {
...@@ -102,6 +101,8 @@ export default { ...@@ -102,6 +101,8 @@ export default {
}, },
}, },
], ],
patrolModal: false,
patrolData: null,
patrolLayout: [ patrolLayout: [
{ {
communityName: { communityName: {
...@@ -150,6 +151,7 @@ export default { ...@@ -150,6 +151,7 @@ export default {
'streetInfo', 'streetInfo',
'curSmartType', 'curSmartType',
'showCommandModal', 'showCommandModal',
'cameraList',
'patrolList', 'patrolList',
'handleList', 'handleList',
'handleCurTab', 'handleCurTab',
...@@ -168,12 +170,13 @@ export default { ...@@ -168,12 +170,13 @@ export default {
methods: { methods: {
...mapActions([ ...mapActions([
'initData', // 初始化获取首次加载所需的所有数据 'initData', // 初始化获取首次加载所需的所有数据
'getDiscoverTrend',
'getRepairRate', 'getRepairRate',
'getDiscoverInfo', 'getDiscoverInfo',
'getRepairInfo', 'getRepairInfo',
'getHandleList', 'getHandleList',
'getPatrolList',
'getDoneList', 'getDoneList',
'getGridSum',
'getCheckSum', 'getCheckSum',
'getPatrolList', 'getPatrolList',
'getGridSum', 'getGridSum',
...@@ -183,14 +186,13 @@ export default { ...@@ -183,14 +186,13 @@ export default {
this.initData() this.initData()
this.complete = true this.complete = true
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.getDiscoverTrend()
this.getRepairRate() this.getRepairRate()
this.getDiscoverInfo() this.getDiscoverInfo()
this.getRepairInfo() this.getRepairInfo()
this.getCheckSum()
this.getPatrolList()
this.getHandleList() this.getHandleList()
this.getPatrolList()
this.getDoneList() this.getDoneList()
this.getCheckSum()
}, 1000 * 60 * 1) }, 1000 * 60 * 1)
this.timer2 = setInterval(() => { this.timer2 = setInterval(() => {
this.getGridSum() this.getGridSum()
...@@ -209,7 +211,15 @@ export default { ...@@ -209,7 +211,15 @@ export default {
this.$refs.map.focus(...center, 5.5) this.$refs.map.focus(...center, 5.5)
}, },
handleMapClick(data) { handleMapClick(data) {
if (data.key === 'patrol') { if (data.key === 'camera') {
const {deviceGbcode, deviceName} = data
this.$ajax.get({
url: this.$api.GET_VIDEO_URL + deviceGbcode,
showLoading: true,
}).then(res => {
this.handleViewVideo(this.$com.confirm(res, 'payload.url', ''), deviceName)
})
} else if (data.key === 'patrol') {
this.patrolData = data this.patrolData = data
this.patrolModal = true this.patrolModal = true
} else { } else {
...@@ -236,14 +246,15 @@ export default { ...@@ -236,14 +246,15 @@ export default {
data: data.map(item => { data: data.map(item => {
return { return {
...item, ...item,
icon: item.done_time ? 'blue4.png' : 'red4.png', icon: 'red4.png',
} }
}), }),
}) })
}, },
handleViewVideo(src) { handleViewVideo(src, name) {
this.videoSrc = src this.videoSrc = src
this.videoModal = true this.videoModal = true
this.cameraName = name
}, },
zoom(type) { zoom(type) {
if (type === 'in') this.$refs.map.zoomIn() if (type === 'in') this.$refs.map.zoomIn()
...@@ -251,6 +262,16 @@ export default { ...@@ -251,6 +262,16 @@ export default {
}, },
}, },
watch: { watch: {
cameraList(cur) {
const {addPoint, removePoint} = this.$refs.map
removePoint(this.cameraPoints)
this.cameraPoints = addPoint({
key: 'camera',
size: 14,
icon: 'blue4.png',
data: cur,
})
},
patrolList(cur) { patrolList(cur) {
const {addPoint, removePoint} = this.$refs.map const {addPoint, removePoint} = this.$refs.map
removePoint(this.patrolPoints) removePoint(this.patrolPoints)
......
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