Skip to content

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

修改

parents 3afab5af ded090ad
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 106 deletions
src/components/MonitorComponents/MonitorStep/monitor-step.vue
View file @ ee104bf7
......@@ -7,9 +7,9 @@
<div v-for="(step, i) in steps" :key="i" :class="`item ${i == current ? 'on' : ''}`">
<p :title="step.name" :class="{none: i > current}">{{step.name}}</p>
<div ref="icon" :class="{icon: true, none: i > current}" />
<!-- <span class="msg" :title="step.msg" v-html="msg[i]"/> -->
<!-- <div ref="icon" v-if="i <= current" class="icon" :style="`background-image:url(${require('@/assets/images/true.png')})`"/> -->
<!-- <div v-else class="none"/> -->
<span class="msg" :title="step.msg" v-html="msg[i]"/>
</div>
</div>
</template>
......@@ -26,12 +26,12 @@ export default {
type: [Number, String],
default: 0,
},
msg: {
type: Array,
default() {
return []
},
}
// msg: {
// type: Array,
// default() {
// return []
// },
// }
},
data() {
return {
......
src/server/api.js
View file @ ee104bf7
......@@ -22,12 +22,18 @@ export default {
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_GRID1: '/dc/countDiscoveredCaseByStreet', // 网格-发现
GET_GRID2: '/dc/countRegisterCaseByStreet', // 网格-立案
GET_GRID3: 'dc/countDispatchCaseByStreet', // 网格-派遣
GET_GRID4: '/dc/countSolvingCaseByStreet', // 网格-处置
GET_GRID5: '/dc/countCheckingCaseByStreet', // 网格-核实
GET_GRID6: '/dc/countClosedCaseByStreet', // 网格-结案
GET_NOT_ALERT1: '/dc/countDiscoveredNotPoliceByStreet', // 非警情-发现
GET_NOT_ALERT2: '/dc/countRegisterNotPoliceByStreet', // 非警情-立案
GET_NOT_ALERT3: '/dc/countDispatchNotPoliceByStreet', // 非警情-派遣
GET_NOT_ALERT4: '/dc/countSolvingNotPoliceByStreet', // 非警情-处置
GET_NOT_ALERT5: '/dc/countCheckingNotPoliceByStreet', // 非警情-核实
GET_NOT_ALERT6: '/dc/countClosedNotPoliceByStreet', // 非警情-结案
GET_POPULATION_INFO: '/dc/statisticsbureauArea', // 土地人口统计数字
GET_COMPRESS_COUNT: '/dc/countCompressStationsByStreet', // 街道小型压缩站数目
GET_GARBAGE_COUNT: '/dc/countPointsByStreet', // 街道垃圾收集点数目
......
src/store/actions.js
View file @ ee104bf7
......@@ -86,20 +86,26 @@ export default {
},
async getGridSum({state, commit}) {
if (state.currentStreetInfo.name === '新江湾城街道') {
commit('SET_GRID_SUM', [34, 43, 0])
commit('SET_NOT_ALERT_SUM', [18, 27, 0])
commit('SET_GRID_SUM', [0, 0, 21, 0, 6, 57])
commit('SET_NOT_ALERT_SUM', [0, 0, 43, 0, 7, 291])
return
}
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])
const grid1 = await ajax.get({url: api.DATA_URL + api.GET_GRID1, params: {street: curStreet, start, end}})
const grid2 = await ajax.get({url: api.DATA_URL + api.GET_GRID2, params: {street: curStreet, start, end}})
const grid3 = await ajax.get({url: api.DATA_URL + api.GET_GRID3, params: {street: curStreet, start, end}})
const grid4 = await ajax.get({url: api.DATA_URL + api.GET_GRID4, params: {street: curStreet, start, end}})
const grid5 = await ajax.get({url: api.DATA_URL + api.GET_GRID5, params: {street: curStreet, start, end}})
const grid6 = await ajax.get({url: api.DATA_URL + api.GET_GRID6, params: {street: curStreet, start, end}})
commit('SET_GRID_SUM', [+grid1 || 0, +grid2 || 0, +grid3 || 0, +grid4 || 0, +grid5 || 0, +grid6 || 0])
const alert1 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT1, params: {street: curStreet, start, end}})
const alert2 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT2, params: {street: curStreet, start, end}})
const alert3 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT3, params: {street: curStreet, start, end}})
const alert4 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT4, params: {street: curStreet, start, end}})
const alert5 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT5, params: {street: curStreet, start, end}})
const alert6 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT6, params: {street: curStreet, start, end}})
commit('SET_NOT_ALERT_SUM', [+alert1 || 0, +alert2 || 0, +alert3 || 0, +alert4 || 0, +alert5 || 0, +alert6 || 0])
},
async getPopulationInfo({state, commit}) {
if (state.currentStreetInfo.name === '新江湾城街道') {
......@@ -147,7 +153,8 @@ export default {
}).then(res => {
const sum = {total: 0, today: 0}
const data = com.confirm(res, 'data.content', [])
const keys = ['heap', 'parkFireExit', 'nonVehicleCharg', 'buildingVibration', 'trash', 'manholeCover', 'waterTank', 'roofWater', 'hermeticSpace', 'accCtl', 'streetMonitor']
const keys = ['accCtl', 'heap', 'nonVehicleCharg', 'streetMonitor']
// const keys = ['heap', 'parkFireExit', 'nonVehicleCharg', 'buildingVibration', 'trash', 'manholeCover', 'waterTank', 'roofWater', 'hermeticSpace', 'accCtl', 'streetMonitor']
const result = data.filter(item => keys.indexOf(item.types) >= 0)
result.forEach(e => {
sum.total += +e.total
......
src/store/state.js
View file @ ee104bf7
......@@ -97,8 +97,8 @@ export default {
repairRate: [],
resourceSum: {},
checkSum: {},
gridSum: [0, 0, 0],
notAlertSum: [0, 0, 0],
gridSum: [0, 0, 0, 0, 0, 0],
notAlertSum: [0, 0, 0, 0, 0, 0],
patrolList: [],
discoverSum: {},
discoverInfo: [],
......
src/views/components/combine.vue
View file @ ee104bf7
......@@ -134,5 +134,5 @@ export default {
left .1rem
right .1rem
bottom 0
transform translateY(38%)
transform translateY(10%)
</style>
src/views/components/grid-management.vue
View file @ ee104bf7
<template>
<div class="grid-management">
<div v-for="item in sum" :key="item.name">
<img :src="require(`@/assets/images/${item.img}`)"/>
<div>
<p>
<img :src="require(`@/assets/images/${item.img}`)"/>
{{item.name}}
</p>
<div class="content">
<p class="inner">
<m-count class="count" v-for="(val, i) in item.value" :key="i" :value="val" :decimal="0"/>
</p>
<m-step class="combine-step" :steps="steps" :current="1000"/>
</div>
<!-- <div>
<p>{{item.name}}</p>
<div>
<m-count class="count" :value="item.value[0]" :decimal="0" />
......@@ -14,7 +23,7 @@
<span>处置中</span>
<span>发现</span>
</div>
</div>
</div> -->
</div>
</div>
</template>
......@@ -22,6 +31,18 @@
<script>
export default {
name: 'GridManagement',
data() {
return {
steps: [
{name: '发现'},
{name: '立案'},
{name: '派遣'},
{name: '处置'},
{name: '核实'},
{name: '结案'},
],
}
},
computed: {
sum() {
const {gridSum, notAlertSum} = this.$store.state
......@@ -37,34 +58,29 @@ export default {
<style lang="stylus" scoped>
.grid-management
display flex
padding-top .05rem
flex-direction column
>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
display flex
align-items center
font-size .11rem
img
width .2rem
height @width
margin 0 .1rem
.content
padding-left .3rem
.inner
display flex
width 90%
margin 0 auto
justify-content space-between
.count
color #fff
font-weight bold
.monitor-step
margin 0 auto
transform translateY(-25%)
</style>
src/views/components/left-component.vue
View file @ ee104bf7
......@@ -12,7 +12,6 @@
<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>
......@@ -25,7 +24,6 @@ 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'
export default {
name: 'LeftComponent',
......@@ -36,7 +34,6 @@ export default {
Defense,
House,
CommunityCheck,
WorkTips,
GridManagement,
},
data() {
......@@ -85,8 +82,7 @@ export default {
&.right
>div
&:nth-child(1)
&:nth-child(4)
height 15%
height 30%
&:nth-child(2)
height 40%
&:nth-child(3)
......
src/views/components/right-component.vue
View file @ ee104bf7
......@@ -85,9 +85,9 @@ export default {
&.left
>div
&:nth-child(1)
height 70%
height 65%
&:nth-child(2)
height 30%
height 35%
&.right
display flex
flex-direction column
......
src/views/components/smart-discover.vue
View file @ ee104bf7
<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" :decimal="0" /> <span>个</span></p>
</div>
<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 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 @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">
<img src="@/assets/images/smart.png" />
<div
class="item"
@click="handleClick(item.types, item.visible)"
v-for="item in list" :key="item.types"
:class="{on: item.types === curSmartType, visible: item.visible}"
>
<m-count :class="{count: true, yellow: item.value > 0}" :value="item.value" :decimal="0" />
<p>{{item.name}}</p>
</div>
</div>
<div v-if="showChart" class="chart">
......@@ -72,14 +82,27 @@ export default {
},
list() {
const {discoverInfo} = this.$store.state
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)
const keys = ['accCtl', 'heap', 'nonVehicleCharg', 'streetMonitor']
const result = []
for (let i = 0; i < keys.length; i++) {
const item = discoverInfo.find(e => e && e.types === keys[i])
if (!item) return
result.push({
name: this.$com.transType(item.types),
value: +item.numbers || 0,
types: item.types,
visible: this.calcVisible(item.types),
})
}
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: {
......@@ -112,6 +135,7 @@ export default {
<style lang="stylus" scoped>
.smart-discover
height 100%
.no-data
$flex-center()
flex-direction column
......@@ -141,17 +165,27 @@ export default {
.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
border .01rem solid transparent
width 100%
height 35%
position relative
>img
width 36%
position absolute
top 0
right 0
bottom 0
left 0
margin auto
.item
position absolute
width 32%
height 45%
background rgba(49,94,139, .4)
border .04rem solid rgba(0,0,0,.25)
text-align center
$flex-center()
flex-direction column
font-size .08rem
opacity .3
&.visible
cursor pointer
......@@ -159,20 +193,56 @@ export default {
&.on
&:hover
$selected()
p
display flex
align-items center
img
width .12rem
height @width
margin-right .05rem
.count
font-size .12rem
&.yellow
&:nth-of-type(1)
top 0
left 0
&:nth-of-type(2)
top 0
right 0
&:nth-of-type(3)
bottom 0
left 0
&:nth-of-type(4)
bottom 0
right 0
.count
font-size .12rem
&.yellow
color $color-yellow
// .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
// border .01rem solid transparent
// opacity .3
// &.visible
// cursor pointer
// opacity 1
// &.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 39%
// height 39%
height 50%
margin-top .05rem
background-image url('../../assets/images/chart-bg.png')
background-size 100% 100%
......
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