战立标
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