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.
93 lines
2.1 KiB
Vue
93 lines
2.1 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>
|
|
<!-- <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 setup>
|
|
// import vueSeamlessScroll from 'vue3-seamless-scroll';
|
|
|
|
import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg.js';
|
|
|
|
const props = defineProps({
|
|
defaultData: Object,
|
|
defaultTableData: Object
|
|
});
|
|
|
|
const { defaultData, defaultTableData } = toRefs(props);
|
|
|
|
const tableData = ref([]);
|
|
const $getFinalData = inject('$getFinalData');
|
|
|
|
watch(() => defaultData, (newVal) => {
|
|
getOption();
|
|
}, { deep: true }
|
|
);
|
|
watch(() => defaultTableData, (newVal) => {
|
|
getOption();
|
|
}, { deep: true }
|
|
);
|
|
|
|
onMounted(async () => {
|
|
await getData();
|
|
getOption();
|
|
setInterval(async () => {
|
|
await getData();
|
|
}, 1000 * 10);
|
|
});
|
|
|
|
const getData = async (e) => {
|
|
let data = await $getFinalData(defaultData.value.requests);
|
|
// networkData.value = data
|
|
};
|
|
const getOption = () => {
|
|
tableData.value = defaultTableData.value;
|
|
};
|
|
|
|
// defineExpose({
|
|
// getRequestData
|
|
// });
|
|
</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>
|