You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

107 lines
2.5 KiB

<template>
<div>
<div class="ranking bg-color-black">
<div class="title d-flex align-center">
<span>
<SvgIcon icon-class="fangwu" class="text-icon"></SvgIcon>
</span>
<span class="fs-xl text">{{ type === 1 ? '房屋资产' : '临期' }}</span>
</div>
<dv-scroll-board v-show="type === 3" :config="config" class="dv-scr-board mt-1" />
<dv-scroll-ranking-board v-show="type !== 3" class="dv-scr-rank-board mt-1" :config="ranking"/>
</div>
</div>
</template>
<script>
import SvgIcon from "@/components/SvgIcon"
export default {
components: {
SvgIcon
},
data() {
return {}
},
methods: {},
computed: {
config () {
return {
header: ['年度', '月度', '计划名称'],
data: this.$store.state.bigdata.adventSafetyPlan.map(i => [i.niandu, i.yuedu, i.jihuamingcheng])
}
},
type () {
return this.$store.state.bigdata.type
},
ranking() {
if (this.type === 1) {
if (this.$store.state.bigdata.assets[0]) {
return {
data: this.$store.state.bigdata.assets[0].map(item => ({
name: item.name.length > 16 ? (item.name.slice(0, 14) + '...') : item.name,
value: (item.dengjimianji || item.shijimianji) ?? 0
})),
carousel: 'single',
unit: '平方',
waitTime: 4000,
rowNum: 4
}
}
} else if (this.type === 2) {
if (this.$store.state.bigdata.adventLeases) {
return {
data: this.$store.state.bigdata.adventLeases.map(item => ({
name: [...item.land,...item.houses].map(i => i.name)?.toString()?.slice(0, 15),
value: item.id_leases_to_assets_lease_id_relation?.reduce((pre, cur) => pre + Number(cur.chuzumianji),0)
})),
carousel: 'single',
unit: '平方',
waitTime: 4000,
rowNum: 4
}
}
}
}
}
}
</script>
<style scoped lang="scss">
.text-icon {
width: 24px;
height: 24px;
color: #1da4a1;
}
.ranking {
padding: 20px 10px;
width: 100%;
.dv-scr-board {
width: 346px;
height: 230px;
padding: 10px;
}
.dv-scr-rank-board {
height: 230px;
padding: 10px 20px;
}
.title {
display: flex;
color: #fff;
padding: 0 20px;
align-items: center;
.text {
padding: 0 8px;
}
}
}
::v-deep .dv-scroll-ranking-board .ranking-column .inside-column {
background: linear-gradient(to left, #7ddacd, #1da4a1);
}
</style>