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