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.
73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
5 months ago
|
<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>
|
||
|
|
<vue-seamless-scroll
|
||
|
|
:visibleCount="3"
|
||
|
|
:list="tableData"
|
||
|
|
:hover="true"
|
||
|
|
:step="0.5"
|
||
|
|
class="case-item"
|
||
|
|
style="height: 84%;overflow: hidden;"
|
||
|
|
>
|
||
|
|
<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>
|
||
|
|
</vue-seamless-scroll>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import vueSeamlessScroll from "vue3-seamless-scroll";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: ['defaultData'],
|
||
|
|
components: {
|
||
|
|
vueSeamlessScroll,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tableData:[],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
await this.getData()
|
||
|
|
setInterval(async () => {
|
||
|
|
await this.getData()
|
||
|
|
}, 1000*10)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getData() {
|
||
|
|
let data = await this.$getFinalData(this.defaultData.requests)
|
||
|
|
this.tableData = data[this.defaultData.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>
|