You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.4 KiB
113 lines
2.4 KiB
<template>
|
|
<div class="excel_container">
|
|
<div class="common_grid" v-for="item in 14 * 14" :key="item">
|
|
<div v-if="isTableHeader(item)" class="table_header_box">
|
|
{{ getHeaderText(item) }}
|
|
</div>
|
|
<div class="box" v-else>
|
|
<p class="line1">{{ getLine(item, 1) }}</p>
|
|
<p class="line2">{{ getLine(item, 2) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
excelData: {
|
|
type: Array,
|
|
},
|
|
})
|
|
|
|
const getLine = (index, position) => {
|
|
const arr = props.excelData.filter(item => item.num == index)
|
|
if (arr?.length > 0) {
|
|
const obj = arr[0]
|
|
if (obj.secondSign && obj.firstSign) {
|
|
if (position == 1) {
|
|
// 截取后4位
|
|
return obj.firstSign.substr(-4)
|
|
} else {
|
|
// 截取后4位
|
|
return obj.secondSign.substr(-4)
|
|
}
|
|
}
|
|
}
|
|
return ''
|
|
}
|
|
|
|
const isTableHeader = index => {
|
|
return index <= 14 || index % 14 == 1
|
|
}
|
|
const getHeaderText = index => {
|
|
if (index <= 14 && index > 1) {
|
|
return index - 1
|
|
}
|
|
const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N']
|
|
if (index % 14 == 1) {
|
|
return arr[parseInt(index / 14) - 1]
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.excel_container {
|
|
width: 1000px;
|
|
height: 800px;
|
|
display: grid;
|
|
grid-template-columns: repeat(14, 1fr);
|
|
grid-template-rows: repeat(14, 1fr);
|
|
border: 1px solid #ebebeb;
|
|
box-sizing: border-box;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
.common_grid {
|
|
border: 1px solid #ebebeb;
|
|
margin-left: -1px;
|
|
margin-top: -1px;
|
|
.box {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 7px;
|
|
background: #ffffff;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #b3b3b3;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.success {
|
|
cursor: pointer;
|
|
background: #e1fff1;
|
|
color: #01ff82;
|
|
}
|
|
.fail {
|
|
cursor: pointer;
|
|
background: #fee2e2;
|
|
color: #fe0c0c;
|
|
}
|
|
.process {
|
|
cursor: pointer;
|
|
background: #4350dc;
|
|
color: #ffffff;
|
|
}
|
|
.cur {
|
|
cursor: pointer;
|
|
}
|
|
.table_header_box {
|
|
background: #f1f1f1;
|
|
box-sizing: border-box;
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
color: #3d3d3d;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|