98 lines
3.7 KiB
Vue
98 lines
3.7 KiB
Vue
<template>
|
|
<div class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 h-full">
|
|
<div class="flex justify-between items-center my-2">
|
|
<p class="h2">{{ tableTitle }} ({{ data.length }})</p>
|
|
<!-- Search -->
|
|
<!-- <Search></Search> -->
|
|
</div>
|
|
<!-- Table -->
|
|
<div class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_64px)]">
|
|
<DataTable v-model:selection="select" :value="data" breakpoint="0" tableClass="w-full !border-separate !border-spacing-x-2 !table-auto text-sm" @row-select="onRowSelect" @row-unselect="onRowUnselect" @row-select-all="onRowSelectAll" @row-unselect-all="onRowUnelectAll">
|
|
<ColumnGroup type="header">
|
|
<Row>
|
|
<Column selectionMode="multiple" headerClass="w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10"></Column>
|
|
<Column field="label" header="Activity" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable />
|
|
<Column field="occ_value" header="Occurrences" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable :colspan="3" />
|
|
<Column field="case_value" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" header="Cases with Activity" sortable :colspan="3" />
|
|
</Row>
|
|
</ColumnGroup>
|
|
<Column selectionMode="multiple" bodyClass="!p-2 !border-0"></Column>
|
|
<Column field="label" header="Activity" bodyClass="break-words !py-2 !border-0"></Column>
|
|
<Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
|
|
<template #body="slotProps">
|
|
<div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
|
|
<div class="h-full bg-primary" :style="progressWidth(slotProps.data.occ_value)"></div>
|
|
</div>
|
|
</template>
|
|
</Column>
|
|
<Column field="occurrences" header="Occurrences" bodyClass="!text-right !py-2 !border-0"></Column>
|
|
<Column field="occurrence_ratio" header="O2" bodyClass="!text-right !py-2 !border-0"></Column>
|
|
<Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
|
|
<template #body="slotProps">
|
|
<div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
|
|
<div class="h-full bg-primary" :style="progressWidth(slotProps.data.case_value)"></div>
|
|
</div>
|
|
</template>
|
|
</Column>
|
|
<Column field="cases" header="Cases with Activity" bodyClass="!text-right !py-2 !border-0"></Column>
|
|
<Column field="case_ratio" header="C2" bodyClass="!text-right !py-2 !border-0"></Column>
|
|
</DataTable>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Search from '@/components/Search.vue';
|
|
|
|
export default {
|
|
props: {
|
|
tableTitle: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
tableData: {
|
|
type: Array,
|
|
require: true,
|
|
},
|
|
tableSelect: {
|
|
type: Array,
|
|
require: true,
|
|
},
|
|
progressWidth: {
|
|
type: Function,
|
|
require: false,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
select: this.tableSelect,
|
|
data: this.tableData
|
|
}
|
|
},
|
|
components: {
|
|
Search,
|
|
},
|
|
watch: {
|
|
tableSelect(newval){
|
|
this.select = newval;
|
|
}
|
|
},
|
|
methods: {
|
|
onRowSelect() {
|
|
this.$emit('on-row-select', this.select);
|
|
},
|
|
onRowUnselect() {
|
|
this.$emit('on-row-select', this.select);
|
|
},
|
|
onRowSelectAll(e) {
|
|
this.select = e.data;
|
|
this.$emit('on-row-select', this.select);
|
|
},
|
|
onRowUnelectAll(e) {
|
|
this.select = null;
|
|
this.$emit('on-row-select', this.select)
|
|
}
|
|
}
|
|
}
|
|
</script>
|