5 changed files with 334 additions and 38 deletions
@ -0,0 +1,292 @@ |
|||||
|
<template> |
||||
|
<div class="m-wtqd"> |
||||
|
<title-small text="难点赌点" /> |
||||
|
<div class="t-list f-hflex"> |
||||
|
<swiper ref="orderSwiper" :options="swiperOptions"> |
||||
|
<swiper-slide v-for="(items, index) in tableData" :key="index" class="swiper-slide"> |
||||
|
<div |
||||
|
:class="['item', 'f-flex']" |
||||
|
v-for="(item, index) in items" |
||||
|
:key="index" |
||||
|
> |
||||
|
<span>{{ item.time }}</span> |
||||
|
<span>{{ item.title }}</span> |
||||
|
</div> |
||||
|
</swiper-slide> |
||||
|
</swiper> |
||||
|
</div> |
||||
|
<title-small text="矛盾纠纷" /> |
||||
|
<div class="t-list f-hflex"> |
||||
|
<swiper ref="orderSwiper" :options="swiperOptions"> |
||||
|
<swiper-slide v-for="(items, index) in tableData" :key="index" class="swiper-slide"> |
||||
|
<div |
||||
|
:class="['item', 'f-flex']" |
||||
|
v-for="(item, index) in items" |
||||
|
:key="index" |
||||
|
> |
||||
|
<span>{{ item.time }}</span> |
||||
|
<span>{{ item.title }}</span> |
||||
|
</div> |
||||
|
</swiper-slide> |
||||
|
</swiper> |
||||
|
</div> |
||||
|
<title-small text="自身问题" /> |
||||
|
<div class="t-list f-hflex"> |
||||
|
<swiper ref="orderSwiper" :options="swiperOptions"> |
||||
|
<swiper-slide v-for="(items, index) in tableData" :key="index" class="swiper-slide"> |
||||
|
<div |
||||
|
:class="['item', 'f-flex']" |
||||
|
v-for="(item, index) in items" |
||||
|
:key="index" |
||||
|
> |
||||
|
<span>{{ item.time }}</span> |
||||
|
<span>{{ item.title }}</span> |
||||
|
</div> |
||||
|
</swiper-slide> |
||||
|
</swiper> |
||||
|
</div> |
||||
|
<title-small text="超出服务范围" /> |
||||
|
<div class="t-list f-hflex"> |
||||
|
<swiper ref="orderSwiper" :options="swiperOptions"> |
||||
|
<swiper-slide v-for="(items, index) in tableData" :key="index" class="swiper-slide"> |
||||
|
<div |
||||
|
:class="['item', 'f-flex']" |
||||
|
v-for="(item, index) in items" |
||||
|
:key="index" |
||||
|
> |
||||
|
<span>{{ item.time }}</span> |
||||
|
<span>{{ item.title }}</span> |
||||
|
</div> |
||||
|
</swiper-slide> |
||||
|
</swiper> |
||||
|
</div> |
||||
|
<title-small text="不满意问题数" /> |
||||
|
<div class="f-flex white f-mean"> |
||||
|
<div |
||||
|
class="f-hflex" |
||||
|
@click=" |
||||
|
$router.push( |
||||
|
'/dataBoard/satisfactionEval/potentialPeople?type=shuji&countType=service&satisfactionSource=satisfaction_12345' |
||||
|
) |
||||
|
" |
||||
|
> |
||||
|
<div><span class="f-pingfang">12345热线不满意数</span></div> |
||||
|
<div class="f-darkGray"> |
||||
|
<b class="f-font34 f-yellow">0</b |
||||
|
>人 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div |
||||
|
class="f-hflex" |
||||
|
@click=" |
||||
|
$router.push( |
||||
|
'/dataBoard/satisfactionEval/potentialPeople?type=shuji&countType=service&satisfactionSource=satisfaction_province' |
||||
|
) |
||||
|
" |
||||
|
> |
||||
|
<div><span class="f-pingfang">满意度调查不满意数</span></div> |
||||
|
<div class="f-darkGray"> |
||||
|
<b class="f-font34 f-green">0</b |
||||
|
>人 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div |
||||
|
class="f-hflex" |
||||
|
@click=" |
||||
|
$router.push( |
||||
|
'/dataBoard/satisfactionEval/potentialPeople?type=shuji&countType=service&satisfactionSource=satisfaction_community' |
||||
|
) |
||||
|
" |
||||
|
> |
||||
|
<div><span class="f-pingfang">社区自评不满意数</span></div> |
||||
|
<div class="f-darkGray"> |
||||
|
<b class="f-font34 f-skyBlue">0</b |
||||
|
>人 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue"; |
||||
|
import "swiper/dist/css/swiper.css"; |
||||
|
import { swiper, swiperSlide } from "vue-awesome-swiper"; |
||||
|
|
||||
|
export default { |
||||
|
name: "wtqd", |
||||
|
props: { |
||||
|
currentLevelData: { |
||||
|
type: Object, |
||||
|
default: {}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
orgId: this.$store.state.chooseArea.chooseName, |
||||
|
report: "", |
||||
|
overview: "", |
||||
|
loading: false, |
||||
|
rffxDate: "", |
||||
|
event12345Num: "", |
||||
|
provinceSatisfactionNum: "", |
||||
|
selfInspectNum: "", |
||||
|
|
||||
|
endTime: "", |
||||
|
startTime: "", |
||||
|
|
||||
|
tableData: [ |
||||
|
{ |
||||
|
time: "今天", |
||||
|
title: "小区进行老旧小区改造后,1号楼1单元楼下出现1单元楼下出现", |
||||
|
}, |
||||
|
{ |
||||
|
time: "今天", |
||||
|
title: "小区进行老旧小区改造后,1号楼1单元楼下出现1单元楼下出现", |
||||
|
}, |
||||
|
{ |
||||
|
time: "今天", |
||||
|
title: "小区进行老旧小区改造后,1号楼1单元楼下出现1单元楼下出现", |
||||
|
}, |
||||
|
{ |
||||
|
time: "今天", |
||||
|
title: "小区进行老旧小区改造后,1号楼1单元楼下出现1单元楼下出现", |
||||
|
}, |
||||
|
{ |
||||
|
time: "今天", |
||||
|
title: "小区进行老旧小区改造后,1号楼1单元楼下出现1单元楼下出现", |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
// 就是现在是每4条滚动一次我想要它一直滚动 |
||||
|
swiperOptions: { |
||||
|
direction: "vertical", // 滑动方向,可以是 'horizontal' 或 'vertical' |
||||
|
autoplay: { |
||||
|
delay: 6000, // 自动切换的间隔时间,单位是毫秒 |
||||
|
disableOnInteraction: true, // 用户操作后是否禁止自动切换 |
||||
|
}, |
||||
|
loop: false, // 是否启用循环模式 |
||||
|
speed: 1000, // 滑动速度,单位是毫秒 |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
currentLevelData(val) { |
||||
|
if (val.orgId) { |
||||
|
this.getReport(val); |
||||
|
// this.getChartData(); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getReport(this.currentLevelData); |
||||
|
this.getData(); |
||||
|
this.tableData = this.groupList(this.tableData, 4); |
||||
|
|
||||
|
}, |
||||
|
components: { |
||||
|
titleSmall, |
||||
|
swiper, |
||||
|
swiperSlide, |
||||
|
}, |
||||
|
// |
||||
|
methods: { |
||||
|
getReport({ orgId, orgLevel }) { |
||||
|
this.$http |
||||
|
.get( |
||||
|
"/actual/base/streetOverview/communityOverview?orgId=" + |
||||
|
orgId + |
||||
|
"&level=" + |
||||
|
orgLevel |
||||
|
) |
||||
|
.then(({ data: { data } }) => { |
||||
|
this.overview = data; |
||||
|
}); |
||||
|
this.$http |
||||
|
.get( |
||||
|
"/actual/base/streetOverview/summaryReport?orgId=" + |
||||
|
orgId + |
||||
|
"&level=" + |
||||
|
orgLevel |
||||
|
) |
||||
|
.then(({ data: { data } }) => { |
||||
|
this.report = data; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
groupList(array, subGroupLength) { |
||||
|
let index = 0; |
||||
|
let newArray = []; |
||||
|
while (index < array.length) { |
||||
|
newArray.push(array.slice(index, (index += subGroupLength))); |
||||
|
} |
||||
|
return newArray; |
||||
|
}, |
||||
|
getData() {}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped /> |
||||
|
<style lang="scss" scoped> |
||||
|
/deep/ .el-input__inner { |
||||
|
width: 90px !important; |
||||
|
height: 24px !important; |
||||
|
background: #021c49 !important; |
||||
|
border: 1px solid #125aaa !important; |
||||
|
border-radius: 12px !important; |
||||
|
color: #a0cdff; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-input__icon { |
||||
|
line-height: 24px !important; |
||||
|
color: #a0cdff; |
||||
|
} |
||||
|
.f-hflex { |
||||
|
width: 83px; |
||||
|
} |
||||
|
.f-flex { |
||||
|
margin-top: 4px; |
||||
|
} |
||||
|
.f-darkGray { |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
.t-list { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
.swiper-container { |
||||
|
height: 200px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.item { |
||||
|
align-items: center; |
||||
|
height: 40px; |
||||
|
justify-content: space-around; |
||||
|
background: #0a2a5c; |
||||
|
color: #fff; |
||||
|
cursor: pointer; |
||||
|
span { |
||||
|
text-align: center; |
||||
|
} |
||||
|
> :nth-child(1) { |
||||
|
width: 50px; |
||||
|
} |
||||
|
> :nth-child(2) { |
||||
|
flex: 1; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
&:hover { |
||||
|
color: #02FCFF ; |
||||
|
box-shadow: 0 0 10px #38b2ff , 0 0 5px #38b2ff ; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.swiper-slide{ |
||||
|
padding: 0 4px; |
||||
|
} |
||||
|
.white{ |
||||
|
height: 100px; |
||||
|
} |
||||
|
</style> |
||||
|
|
Loading…
Reference in new issue