126 lines
2.8 KiB
Vue
126 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<div v-resize="resizeHandler" class="dv-scroll-board">
|
||
|
|
<div
|
||
|
|
v-if="propValue.header.header.length"
|
||
|
|
class="header"
|
||
|
|
:style="`background-color: ${propValue.header.headerBGC};`"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-for="(item, i) in propValue.header.header"
|
||
|
|
:key="`${item}${i}`"
|
||
|
|
class="header-item"
|
||
|
|
:style="`
|
||
|
|
height: ${propValue.header.headerHeight}px;
|
||
|
|
line-height: ${propValue.header.headerHeight}px;
|
||
|
|
`"
|
||
|
|
v-html="item"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="rows"
|
||
|
|
:style="{
|
||
|
|
height: `${
|
||
|
|
comHeight - (propValue.header.header.length ? propValue.header.headerHeight : 0)
|
||
|
|
}px`
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-for="(row, ri) in rowData"
|
||
|
|
:key="row.rowIndex"
|
||
|
|
class="row-item"
|
||
|
|
:style="`
|
||
|
|
height: ${propValue.rows.data.height}px;
|
||
|
|
line-height: ${propValue.rows.data.height}px;
|
||
|
|
background-color: ${
|
||
|
|
propValue.rows.data[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']
|
||
|
|
};
|
||
|
|
`"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-for="(ceil, ci) in row.ceils"
|
||
|
|
:key="`${ceil}${ri}${ci}`"
|
||
|
|
class="ceil"
|
||
|
|
v-html="ceil"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import type { CustomComponent, ResponseData } from 'open-data-v/base'
|
||
|
|
import { useData, useProp } from 'open-data-v/base'
|
||
|
|
import { computed, ref } from 'vue'
|
||
|
|
|
||
|
|
import type { ScrollTableType } from './type'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
component: CustomComponent
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const { propValue } = useProp<ScrollTableType>(props.component)
|
||
|
|
|
||
|
|
const comHeight = ref<number>(0)
|
||
|
|
const resizeHandler = (entry: ResizeObserverEntry) => {
|
||
|
|
const { height } = entry.contentRect
|
||
|
|
comHeight.value = height
|
||
|
|
}
|
||
|
|
|
||
|
|
const tableData = ref<
|
||
|
|
| Array<{ label: string; value: number }>
|
||
|
|
| ResponseData<Array<{ label: string; value: number }>>['afterData']
|
||
|
|
>([])
|
||
|
|
const dataChange = (resp: any, _?: string) => {
|
||
|
|
if (resp.status === 'SUCCESS') {
|
||
|
|
tableData.value = resp.afterData
|
||
|
|
}
|
||
|
|
}
|
||
|
|
useData(props.component, dataChange)
|
||
|
|
|
||
|
|
const rowData = computed(() => {
|
||
|
|
return tableData.value.map((item, index) => {
|
||
|
|
return {
|
||
|
|
rowIndex: index,
|
||
|
|
ceils: Object.values(item)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.dv-scroll-board {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
color: #fff;
|
||
|
|
|
||
|
|
.header {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
font-size: 15px;
|
||
|
|
justify-content: space-around;
|
||
|
|
|
||
|
|
.header-item {
|
||
|
|
transition: all 0.3s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.rows {
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.row-item {
|
||
|
|
display: flex;
|
||
|
|
font-size: 14px;
|
||
|
|
transition: all 0.3s;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
|
||
|
|
.index {
|
||
|
|
border-radius: 3px;
|
||
|
|
padding: 0 3px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|