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.
95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
6 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', 'defaultTableData'],
|
||
|
|
expose: ['getRequestData'],
|
||
|
|
components: {
|
||
|
|
vueSeamlessScroll
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tableData: []
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
defaultData: {
|
||
|
|
handler(a, b) {
|
||
|
|
this.getOption();
|
||
|
|
},
|
||
|
|
deep: true
|
||
|
|
},
|
||
|
|
defaultTableData: {
|
||
|
|
handler(a, b) {
|
||
|
|
this.getOption();
|
||
|
|
},
|
||
|
|
deep: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
await this.getData();
|
||
|
|
this.getOption();
|
||
|
|
setInterval(async () => {
|
||
|
|
await this.getData();
|
||
|
|
}, 1000 * 10);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getData(e) {
|
||
|
|
let data = await this.$getFinalData(this.defaultData.requests);
|
||
|
|
console.log('data', data);
|
||
|
|
this.$set(this, 'networkData', data);
|
||
|
|
},
|
||
|
|
getOption() {
|
||
|
|
this.tableData = this.defaultTableData;
|
||
|
|
console.log('this.tableData', this.tableData);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</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>
|