You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
<template>
|
|
<div style="display: inline-block;width: 100%;height: 100% ">
|
|
<div style="background-color: #094170">
|
|
<div class="scrollTable" style="font-weight: bold;" :style="`width:calc(${100/defaultData.th.length}%)`"
|
|
v-for="i in defaultData.th">
|
|
{{ i }}
|
|
</div>
|
|
</div>
|
|
<div style="height: 84%;overflow: hidden;">
|
|
<!-- <vue3-seamless-scroll-->
|
|
<!-- :list="tableData"-->
|
|
<!-- ref="tableRef"-->
|
|
<!-- >-->
|
|
<div
|
|
v-for="(item, index) in tableData"
|
|
:key="index"
|
|
>
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
<div
|
|
class="scrollTable" v-for="i in defaultData.td"
|
|
:style="`width:calc(${100/defaultData.td.length}%)`">
|
|
{{ item[i] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- </vue3-seamless-scroll>-->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
// import vueSeamlessScroll from 'vue3-seamless-scroll';
|
|
|
|
const props = defineProps({
|
|
defaultData: Object
|
|
});
|
|
|
|
const { defaultData } = toRefs(props);
|
|
const tableData = ref([]);
|
|
const tableV = ref(true);
|
|
const tableKey = ref(0);
|
|
const $getFinalData = inject('$getFinalData');
|
|
const tableRef = ref();
|
|
|
|
onMounted(async () => {
|
|
await getData();
|
|
setInterval(async () => {
|
|
await getData();
|
|
}, 1000 * 10);
|
|
});
|
|
const getData = async () => {
|
|
let data = await $getFinalData(defaultData.value.requests);
|
|
tableData.value = data[defaultData.value.tableDataKey];
|
|
};
|
|
</script>
|
|
<style>
|
|
|
|
|
|
.scrollTable {
|
|
color: rgb(185, 186, 192);
|
|
margin: auto 0px;
|
|
padding: 4px 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
display: inline-block;
|
|
|
|
}
|
|
</style>
|