<script>
|
import FlexBox from "@/components/FlexBox.vue";
|
import HdwLight from "@/components/HdwLight.vue";
|
|
export default {
|
name: "sinalData",
|
components: {
|
HdwLight,
|
FlexBox
|
},
|
props: {
|
cols: {
|
type: Number,
|
default: 2
|
},
|
list: {
|
type: Array,
|
default() {
|
return [];
|
}
|
}
|
},
|
computed: {
|
colsArr() {
|
let arr = [];
|
const cols = this.cols;
|
let resArr = [];
|
|
for(let i=0; i<this.list.length; i++) {
|
const item = this.list[i];
|
for(let j=0; j<item.list.length; j++) {
|
resArr.push(item.list[j]);
|
}
|
}
|
|
for(let i=0; i<cols; i++) {
|
let temp = [];
|
for(let j=0; j<resArr.length; j++) {
|
if(j%cols === i) {
|
temp.push(resArr[j]);
|
}
|
}
|
arr.push(temp);
|
}
|
return arr;
|
}
|
}
|
}
|
</script>
|
|
<template>
|
<div class="page-flex-layout">
|
<div class="data-list-wrapper">
|
<div class="data-list-content">
|
<div class="data-list-container" v-for="(list, colKey) in colsArr" :key="'colKey'+colKey">
|
<div class="data-list">
|
<div class="data-item" v-for="(item, key) in list" :key="'key'+key">
|
<div class="data-label">{{ item.label }}</div>
|
<div class="data-value">
|
<hdw-light style="height: 26px" :type="item.value"></hdw-light>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.page-flex-layout {
|
height: 100%;
|
box-sizing: border-box;
|
padding-bottom: 4px;
|
}
|
.data-list-container {
|
display: inline-block;
|
vertical-align: top;
|
}
|
.data-list-wrapper {
|
padding: 1px;
|
height: 100%;
|
box-sizing: border-box;
|
overflow-y: auto;
|
.data-list-content {
|
background-color: #011F39;
|
text-align: center;
|
}
|
}
|
|
.data-list {
|
padding: 4px;
|
vertical-align: top;
|
.data-item {
|
background-color: #14354d;
|
padding: 6px 8px;
|
font-size: 14px;
|
white-space: nowrap;
|
overflow-x: hidden;
|
text-align: right;
|
&:nth-child(even) {
|
background-color: #0D2F48;
|
}
|
.data-label {
|
font-size: 13px;
|
display: inline-block;
|
text-align: left;
|
vertical-align: middle;
|
}
|
.data-value {
|
display: inline-block;
|
padding: 0 8px;
|
color: #00FEFF;
|
text-align: right;
|
vertical-align: middle;
|
}
|
}
|
}
|
</style>
|
