战立标
2 years ago
19 changed files with 964 additions and 303 deletions
|
After Width: | Height: | Size: 390 B |
|
After Width: | Height: | Size: 432 B |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,148 @@ |
|||||
|
<template> |
||||
|
<div class="result"> |
||||
|
<div class="score"> |
||||
|
<div class="tit">当前得分</div> |
||||
|
<div class="branch"> |
||||
|
<span>{{synthesisScore?synthesisScore:'0'}}</span>分 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="submit-num"> |
||||
|
<div class="tit">总提交人数</div> |
||||
|
<div class="data"> |
||||
|
<div class="people"> |
||||
|
<span>{{sumNum?sumNum:'0'}}</span>人 |
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="today day"><span>今日</span> +{{todayNum?todayNum:0}}</div> |
||||
|
<div class="yesterday day"><span>昨日</span> +{{lastDayNum?lastDayNum:0}}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "CommunityResult", |
||||
|
props: { |
||||
|
date: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
org: this.$store.state.chooseArea.chooseName, |
||||
|
lastDayNum: 0, |
||||
|
sumNum: 0, |
||||
|
synthesisScore: 0, |
||||
|
todayNum: 0, |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
"$store.state.chooseArea.chooseName"(val) { |
||||
|
if (val.orgId) { |
||||
|
this.getData() |
||||
|
} |
||||
|
}, |
||||
|
date() { |
||||
|
this.getData() |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
if (this.org.orgId) { |
||||
|
this.getData() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getData() { |
||||
|
this.$http.get('/actual/base/streetOverview/satisfactionCommunitySelfGroup?month='+this.date+'&level='+this.$store.state.chooseArea.chooseName.level+'&orgId='+this.$store.state.chooseArea.chooseName.orgId).then(({data: {data}}) => { |
||||
|
this.lastDayNum = data.lastDayNum |
||||
|
this.sumNum = data.sumNum |
||||
|
this.synthesisScore = data.synthesisScore |
||||
|
this.todayNum = data.todayNum |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.result { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 20px 30px 30px; |
||||
|
.tit { |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.score { |
||||
|
.branch { |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
color: #A3B9DA; |
||||
|
margin-top: 20px; |
||||
|
span { |
||||
|
font-size: 36px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
color: #08EBAE; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
.submit-num { |
||||
|
.data { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
.people { |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
color: #A3B9DA; |
||||
|
margin-right: 21px; |
||||
|
span { |
||||
|
font-size: 36px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
color: #7FCEFF; |
||||
|
} |
||||
|
} |
||||
|
.day { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-top: 8px; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
color: #00D6D9; |
||||
|
span { |
||||
|
display: block; |
||||
|
text-align: center; |
||||
|
font-style: normal; |
||||
|
font-size: 12px; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
width: 36px; |
||||
|
height: 18px; |
||||
|
line-height: 18px; |
||||
|
} |
||||
|
&.today span { |
||||
|
background: url("@/assets/images/gailan/tag_blue.png") no-repeat; |
||||
|
} |
||||
|
|
||||
|
&.yesterday span { |
||||
|
background: url("@/assets/images/gailan/tag_orange.png") no-repeat; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,103 @@ |
|||||
|
<template> |
||||
|
<div class="dhrd"> |
||||
|
<div class="dhrd-list"> |
||||
|
<!-- <div class="dhrd-item"> |
||||
|
<div class="time blue"> |
||||
|
刚刚 |
||||
|
</div> |
||||
|
<div class="title ">XX社区第一网格</div> |
||||
|
<div class="name ">杨波</div> |
||||
|
<div class="address "> |
||||
|
修改了新苑小区**的居民信息的居民信息的居民信息 |
||||
|
</div> |
||||
|
</div>--> |
||||
|
<div class="dhrd-item" v-for="(item,index) in list" :key="index"> |
||||
|
<div class="time"> |
||||
|
{{$moment(item.changeTime).format('HH:mm')}} |
||||
|
</div> |
||||
|
<div class="title">{{item.orgName}}</div> |
||||
|
<!-- <div class="name">{{item.orgName}}</div>--> |
||||
|
<div class="address">{{item.content}}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "DynamicHumanRoomData", |
||||
|
data() { |
||||
|
return { |
||||
|
org: this.$store.state.chooseArea.chooseName, |
||||
|
list: [] |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
"$store.state.chooseArea.chooseName"(val) { |
||||
|
if (val.orgId) { |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
if (this.org.orgId) { |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getList() { |
||||
|
this.$http.get('/actual/base/streetOverview/residentHouseUpdateRecord?level='+this.$store.state.chooseArea.chooseName.level+'&orgId='+this.$store.state.chooseArea.chooseName.orgId).then(({data: {data}}) => { |
||||
|
this.list = data |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
@import "@/assets/scss/dataBoard/c/common.scss"; |
||||
|
.dhrd { |
||||
|
padding: 20px 16px; |
||||
|
} |
||||
|
.dhrd-list { |
||||
|
height: 200px; |
||||
|
overflow-y: auto; |
||||
|
@include scrollBar |
||||
|
.dhrd-item { |
||||
|
display: flex; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
height: 40px; |
||||
|
align-items: center; |
||||
|
padding: 0 16px; |
||||
|
&:nth-of-type(odd) { |
||||
|
background: rgba(14, 56, 115, 0.4); |
||||
|
} |
||||
|
.time { |
||||
|
flex: 1; |
||||
|
} |
||||
|
.title { |
||||
|
flex: 2; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
.name { |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
.address { |
||||
|
flex: 3; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.blue { |
||||
|
color: #0DEEEF; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,194 @@ |
|||||
|
<template> |
||||
|
<div class="event"> |
||||
|
<div class="tabs"> |
||||
|
<Tabs v-model="type" :list="typeList" @changeVal="typeChange"/> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="total"> |
||||
|
<div class="tit">事件总数</div> |
||||
|
<div class="num orange">{{sumNum?sumNum:0}}</div> |
||||
|
<div class="desc"><span>较上月</span>-{{lastSumNum?lastSumNum:0}}</div> |
||||
|
</div> |
||||
|
<div class="processing"> |
||||
|
<div class="bg"> |
||||
|
<div class="bg-1"> |
||||
|
</div> |
||||
|
<div class="num"> |
||||
|
{{processNum?processNum:0}} |
||||
|
</div> |
||||
|
<div class="name">处理中</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="total"> |
||||
|
<div class="tit">已办结</div> |
||||
|
<div class="num blue">{{closedNum?closedNum:0}}</div> |
||||
|
<div class="desc white"><span>办结率</span>{{closedRatio?closedRatio:0}}%</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: "EventAndFollowUp", |
||||
|
components: {Tabs}, |
||||
|
props: { |
||||
|
date: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
org: this.$store.state.chooseArea.chooseName, |
||||
|
typeList: [{ |
||||
|
label: '12345事件', |
||||
|
value: '12345' |
||||
|
}, { |
||||
|
label: '事件回访', |
||||
|
value: 'follow' |
||||
|
}], |
||||
|
type: '12345', |
||||
|
sumNum: 0, |
||||
|
lastSumNum: 0, |
||||
|
processNum: 0, |
||||
|
closedNum: 0, |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
"$store.state.chooseArea.chooseName"(val) { |
||||
|
if (val.orgId) { |
||||
|
this.getData() |
||||
|
} |
||||
|
}, |
||||
|
date() { |
||||
|
this.getData() |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
if (this.org.orgId) { |
||||
|
this.getData() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getData() { |
||||
|
this.$http.get('/actual/base/streetOverview/eventAndFollowGroup?month=' + this.date + '&level=' + this.$store.state.chooseArea.chooseName.level + '&orgId=' + this.$store.state.chooseArea.chooseName.orgId + '&queryType=' + this.type).then(({data: {data}}) => { |
||||
|
this.sumNum = data.sumNum |
||||
|
this.lastSumNum = data.lastSumNum |
||||
|
this.processNum = data.processNum |
||||
|
this.closedNum = data.closedNum |
||||
|
this.closedRatio = data.closedRatio |
||||
|
}) |
||||
|
}, |
||||
|
typeChange(val) { |
||||
|
console.log(val,'val') |
||||
|
this.type = val |
||||
|
this.getData() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.event { |
||||
|
padding: 10px 16px; |
||||
|
} |
||||
|
.tabs { |
||||
|
margin: 10px 0; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
background: linear-gradient(90deg, rgba(1, 94, 234, 0.1) 0%, rgba(16, 50, 103, 0) 50%, rgba(1, 94, 234, 0.1) 100%); |
||||
|
padding: 20px 19px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.total { |
||||
|
.tit { |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
height: 24px; |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
margin: 20px 0 15px; |
||||
|
} |
||||
|
|
||||
|
.orange { |
||||
|
color: #FF7845; |
||||
|
} |
||||
|
|
||||
|
.blue { |
||||
|
color: #76C0EF; |
||||
|
} |
||||
|
|
||||
|
.desc { |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
color: #00D6D9; |
||||
|
|
||||
|
span { |
||||
|
font-style: normal; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
color: #A3B9DA; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.white { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.processing { |
||||
|
.bg { |
||||
|
background: url("@/assets/images/gailan/yuan_bg.png") no-repeat center; |
||||
|
flex: 0 0 150px; |
||||
|
width: 150px; |
||||
|
height: 150px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
position: relative; |
||||
|
|
||||
|
.bg-1 { |
||||
|
background: url("@/assets/images/gailan/zq_bg.png") no-repeat center; |
||||
|
width: 146px; |
||||
|
height: 136px; |
||||
|
position: absolute; |
||||
|
left: 9px; |
||||
|
top: 9px; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
color: #64C1FF; |
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
position: absolute; |
||||
|
bottom: 10px; |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,99 @@ |
|||||
|
<template> |
||||
|
<div class="m-subbox m-sqrfph"> |
||||
|
<div class="rank"> |
||||
|
<div class="tit">{{ self.orgName }}</div> |
||||
|
<div class="num">第<span>{{ self.rank }}</span>名</div> |
||||
|
</div> |
||||
|
<div class="table"> |
||||
|
<div class="tr"> |
||||
|
<div class="th">排名</div> |
||||
|
<div class="th">网格</div> |
||||
|
<div class="th">房屋更新数</div> |
||||
|
<div class="th">人口更新数</div> |
||||
|
<div class="th">人房更新总数</div> |
||||
|
</div> |
||||
|
<div class="tr" v-for="item in pmList" :key="item.rank"> |
||||
|
<div :class="item.rank < 4 ? `td tdbg${item.rank}` : 'td'"> |
||||
|
{{ item.rank }} |
||||
|
</div> |
||||
|
<div class="td">{{ item.orgName }}</div> |
||||
|
<div class="td">{{ item.houseNum }}</div> |
||||
|
<div class="td">{{ item.residentNum }}</div> |
||||
|
<div class="td">{{ item.sumNum }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: "RankingGridData", |
||||
|
props: { |
||||
|
date: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
org: this.$store.state.chooseArea.chooseName, |
||||
|
pmList: [], |
||||
|
self: {} |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
"$store.state.chooseArea.chooseName"(val) { |
||||
|
if (val.orgId) { |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
date() { |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
if (this.org.orgId) { |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getList() { |
||||
|
this.$http.get('/actual/base/streetOverview/residentHouseUpdateGroupByGrid?month=' + this.date + '&level=' + this.$store.state.chooseArea.chooseName.level + '&orgId=' + this.$store.state.chooseArea.chooseName.orgId).then(({data: {data}}) => { |
||||
|
if (data) { |
||||
|
data = data.map((item, index) => { |
||||
|
return { |
||||
|
...item, |
||||
|
rank: index - 0 + 1 |
||||
|
} |
||||
|
}) |
||||
|
this.pmList = data.filter(item => !item.self) |
||||
|
this.self = data.filter(item => item.self)[0] |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped/> |
||||
|
<style scoped lang="scss"> |
||||
|
.rank { |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
padding: 0 15px 20px; |
||||
|
|
||||
|
.num { |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
color: #A3B9DA; |
||||
|
margin-top: 20px; |
||||
|
|
||||
|
span { |
||||
|
font-size: 36px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
color: #FFB73C; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue