zhang_li
11 months ago
6 changed files with 1 additions and 2155 deletions
@ -1,529 +0,0 @@ |
|||||
<!-- 成品发运看板 --> |
|
||||
<template> |
|
||||
<div class="box"> |
|
||||
<div class="title">成品发运看板</div> |
|
||||
<div class="table"> |
|
||||
<table border class="table"> |
|
||||
<thead> |
|
||||
<tr> |
|
||||
<th></th> |
|
||||
<th> |
|
||||
<div>9-15</div> |
|
||||
<div>8:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>9:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>10:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>11:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>12:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>13:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>14:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>15:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>16:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>17:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>18:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>19:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>20:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>21:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>22:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>23:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div>9-15</div> |
|
||||
<div>0:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>1:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>2:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>3:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>4:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>5:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>6:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>7:00</div> |
|
||||
</th> |
|
||||
</tr> |
|
||||
</thead> |
|
||||
<tBody> |
|
||||
<tr v-for="(item, index) in tableData" :key="index"> |
|
||||
<td class="flist-col">{{ item.name }}</td> |
|
||||
<template v-for="(cur, key) in item.dock" :key="key"> |
|
||||
<td :colspan="cur.span" v-if="cur.backgroundColor"> |
|
||||
<div :style="{ background: cur.backgroundColor }">{{cur.num1}}</div> |
|
||||
</td> |
|
||||
<td v-if="!cur.backgroundColor"></td> |
|
||||
</template> |
|
||||
</tr> |
|
||||
</tBody> |
|
||||
</table> |
|
||||
</div> |
|
||||
<div class="list mt-16px"> |
|
||||
<dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%" @mouseover="mouseoverHandler" @click="clickHandler" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import type { ScrollBoard } from '@kjgl77/datav-vue3/index' |
|
||||
const tableData = [ |
|
||||
{ |
|
||||
name: 'dock1', |
|
||||
dock: [ |
|
||||
{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span: 2, |
|
||||
backgroundColor: '#529b2f', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#dfa041', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:4, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:4, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
} |
|
||||
] |
|
||||
}, { |
|
||||
name: 'dock2', |
|
||||
dock: [ |
|
||||
{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#f46c6c', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'3', |
|
||||
backgroundColor: '#e6a23d', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:"", |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:1, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'3', |
|
||||
backgroundColor: '#90939a', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3 , |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3 , |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
} |
|
||||
] |
|
||||
}, { |
|
||||
name: 'dock3', |
|
||||
dock: [ |
|
||||
{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#529b2f', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'2', |
|
||||
backgroundColor: '#e6a23d', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:"", |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:4, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
const config = reactive({ |
|
||||
header: ['状态', '流水号', '月台号', '客户', '发货单', '车牌号', '计划发货时间', '实际发货时间'], |
|
||||
data: [ |
|
||||
['<span style="background:#529b2f;width:100%;height:100%;display:block">行1列1</span>', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6', '行1列7', '行1列8'], |
|
||||
['<span style="background:#529b2f;width:100%;height:100%;display:block">行2列1</span>', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6', '行2列7', '行2列8'], |
|
||||
['<span style="background:#f46c6c;width:100%;height:100%;display:block">行3列1</span>', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6', '行3列7', '行3列8'], |
|
||||
['<span style="background:#e6a23d;width:100%;height:100%;display:block">行4列1</span>', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6', '行4列7', '行4列8'], |
|
||||
['<span style="background:#e6a23d;width:100%;height:100%;display:block">行5列1</span>', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6', '行5列7', '行5列8'], |
|
||||
['<span style="background:#e6a23d;width:100%;height:100%;display:block">行6列1</span>', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6', '行6列7', '行6列8'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行7列1</span>', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6', '行7列7', '行7列8'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行8列1</span>', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6', '行8列7', '行8列8'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行9列1</span>', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6', '行9列7', '行9列8'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行10列1</span>', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6', '行10列7', '行10列8'], |
|
||||
], |
|
||||
index: false, |
|
||||
// columnWidth: [50], |
|
||||
align: ['center','center','center','center','center','center','center','center'], |
|
||||
rowNum:8, |
|
||||
headerHeight:50, |
|
||||
headerBGC:'#616267', |
|
||||
oddRowBGC:'#303133', |
|
||||
evenRowBGC:'#303133', |
|
||||
|
|
||||
}) |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.box { |
|
||||
width: 98vw; |
|
||||
height: 96vh; |
|
||||
background: #303133; |
|
||||
padding: 2vh 1vw; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
.title { |
|
||||
color: #9d9f9e; |
|
||||
font-size: 30px; |
|
||||
text-align: center; |
|
||||
line-height: 7vh; |
|
||||
width: 100%; |
|
||||
} |
|
||||
.table { |
|
||||
width: 98vw; |
|
||||
border-collapse: collapse; |
|
||||
border-spacing: 0; |
|
||||
tr { |
|
||||
color: #b3b4b8; |
|
||||
} |
|
||||
td { |
|
||||
width: calc(92vw / 24); |
|
||||
text-align: center; |
|
||||
div { |
|
||||
width: calc(100% - 16px); |
|
||||
height: 28px; |
|
||||
margin: 8px; |
|
||||
line-height: 28px; |
|
||||
color: white; |
|
||||
text-align: left; |
|
||||
text-indent: 10px; |
|
||||
} |
|
||||
&.flist-col { |
|
||||
width: 6vw; |
|
||||
} |
|
||||
} |
|
||||
thead { |
|
||||
tr { |
|
||||
text-indent: -100%; |
|
||||
border-left: 1px solid rgba(255, 255, 255, 0); |
|
||||
border-top: 1px solid rgba(255, 255, 255, 0); |
|
||||
border-right: 1px solid rgba(255, 255, 255, 0); |
|
||||
} |
|
||||
th { |
|
||||
font-size: 14px; |
|
||||
font-weight: normal !important; |
|
||||
height: 6vh; |
|
||||
div { |
|
||||
height: 2.5vh; |
|
||||
line-height: 2.5vh; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.list{ |
|
||||
flex: 1; |
|
||||
width: 100%; |
|
||||
} |
|
||||
::v-deep(.row-item){ |
|
||||
border-bottom: 1px solid rgba(255,255,255,0.5); |
|
||||
} |
|
||||
::v-deep(.ceil){ |
|
||||
border-right: 1px solid rgba(255,255,255,0.5); |
|
||||
padding: 0px!important; |
|
||||
} |
|
||||
::v-deep(.dv-scroll-board){ |
|
||||
border-top: 1px solid rgba(255,255,255,0.5); |
|
||||
border-left: 1px solid rgba(255,255,255,0.5); |
|
||||
border-bottom: 1px solid rgba(255,255,255,0.5); |
|
||||
} |
|
||||
::v-deep(.header-item){ |
|
||||
border-right: 1px solid rgba(255,255,255,0.5); |
|
||||
} |
|
||||
</style> |
|
||||
|
|
@ -1,529 +0,0 @@ |
|||||
<!-- 生产叫料看板 --> |
|
||||
<template> |
|
||||
<div class="box"> |
|
||||
<div class="title">生产叫料看板</div> |
|
||||
<div class="table"> |
|
||||
<table border class="table"> |
|
||||
<thead> |
|
||||
<tr> |
|
||||
<th></th> |
|
||||
<th> |
|
||||
<div>9-15</div> |
|
||||
<div>8:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>9:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>10:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>11:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>12:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>13:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>14:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>15:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>16:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>17:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>18:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>19:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>20:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>21:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>22:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>23:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div>9-15</div> |
|
||||
<div>0:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>1:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>2:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>3:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>4:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>5:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>6:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>7:00</div> |
|
||||
</th> |
|
||||
</tr> |
|
||||
</thead> |
|
||||
<tBody> |
|
||||
<tr v-for="(item, index) in tableData" :key="index"> |
|
||||
<td class="flist-col">{{ item.name }}</td> |
|
||||
<template v-for="(cur, key) in item.dock" :key="key"> |
|
||||
<td :colspan="cur.span" v-if="cur.backgroundColor"> |
|
||||
<div :style="{ background: cur.backgroundColor }">{{cur.num1}}</div> |
|
||||
</td> |
|
||||
<td v-if="!cur.backgroundColor"></td> |
|
||||
</template> |
|
||||
</tr> |
|
||||
</tBody> |
|
||||
</table> |
|
||||
</div> |
|
||||
<div class="list mt-16px"> |
|
||||
<dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%" @mouseover="mouseoverHandler" @click="clickHandler" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import type { ScrollBoard } from '@kjgl77/datav-vue3/index' |
|
||||
const tableData = [ |
|
||||
{ |
|
||||
name: 'dock1', |
|
||||
dock: [ |
|
||||
{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span: 2, |
|
||||
backgroundColor: '#529b2f', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#dfa041', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:4, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:4, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
} |
|
||||
] |
|
||||
}, { |
|
||||
name: 'dock2', |
|
||||
dock: [ |
|
||||
{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#f46c6c', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'3', |
|
||||
backgroundColor: '#e6a23d', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:"", |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:1, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'3', |
|
||||
backgroundColor: '#90939a', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3 , |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3 , |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
} |
|
||||
] |
|
||||
}, { |
|
||||
name: 'dock3', |
|
||||
dock: [ |
|
||||
{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#529b2f', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'2', |
|
||||
backgroundColor: '#e6a23d', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:"", |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:4, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
const config = reactive({ |
|
||||
header: ['状态', '流水号', '生产线', '工位', '叫料单', '物料号', '数量', '叫料人', '叫料时间','实际到货时间'], |
|
||||
data: [ |
|
||||
['<span style="background:#529b2f;width:100%;height:100%;display:block">行1列1</span>', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6', '行1列7', '行1列8', '行1列9', '行1列10'], |
|
||||
['<span style="background:#529b2f;width:100%;height:100%;display:block">行2列1</span>', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6', '行2列7', '行2列8', '行1列9', '行1列10'], |
|
||||
['<span style="background:#f46c6c;width:100%;height:100%;display:block">行3列1</span>', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6', '行3列7', '行3列8', '行1列9', '行1列10'], |
|
||||
['<span style="background:#e6a23d;width:100%;height:100%;display:block">行4列1</span>', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6', '行4列7', '行4列8', '行1列9', '行1列10'], |
|
||||
['<span style="background:#e6a23d;width:100%;height:100%;display:block">行5列1</span>', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6', '行5列7', '行5列8', '行1列9', '行1列10'], |
|
||||
['<span style="background:#e6a23d;width:100%;height:100%;display:block">行6列1</span>', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6', '行6列7', '行6列8', '行1列9', '行1列10'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行7列1</span>', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6', '行7列7', '行7列8', '行1列9', '行1列10'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行8列1</span>', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6', '行8列7', '行8列8', '行1列9', '行1列10'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行9列1</span>', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6', '行9列7', '行9列8', '行1列9', '行1列10'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行10列1</span>', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6', '行10列7', '行10列8', '行1列9', '行1列10'], |
|
||||
], |
|
||||
index: false, |
|
||||
// columnWidth: [50], |
|
||||
align: ['center','center','center','center','center','center','center','center','center','center'], |
|
||||
rowNum:8, |
|
||||
headerHeight:50, |
|
||||
headerBGC:'#616267', |
|
||||
oddRowBGC:'#303133', |
|
||||
evenRowBGC:'#303133', |
|
||||
|
|
||||
}) |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.box { |
|
||||
width: 98vw; |
|
||||
height: 96vh; |
|
||||
background: #303133; |
|
||||
padding: 2vh 1vw; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
.title { |
|
||||
color: #9d9f9e; |
|
||||
font-size: 30px; |
|
||||
text-align: center; |
|
||||
line-height: 7vh; |
|
||||
width: 100%; |
|
||||
} |
|
||||
.table { |
|
||||
width: 98vw; |
|
||||
border-collapse: collapse; |
|
||||
border-spacing: 0; |
|
||||
tr { |
|
||||
color: #b3b4b8; |
|
||||
} |
|
||||
td { |
|
||||
width: calc(92vw / 24); |
|
||||
text-align: center; |
|
||||
div { |
|
||||
width: calc(100% - 16px); |
|
||||
height: 28px; |
|
||||
margin: 8px; |
|
||||
line-height: 28px; |
|
||||
color: white; |
|
||||
text-align: left; |
|
||||
text-indent: 10px; |
|
||||
} |
|
||||
&.flist-col { |
|
||||
width: 6vw; |
|
||||
} |
|
||||
} |
|
||||
thead { |
|
||||
tr { |
|
||||
text-indent: -100%; |
|
||||
border-left: 1px solid rgba(255, 255, 255, 0); |
|
||||
border-top: 1px solid rgba(255, 255, 255, 0); |
|
||||
border-right: 1px solid rgba(255, 255, 255, 0); |
|
||||
} |
|
||||
th { |
|
||||
font-size: 14px; |
|
||||
font-weight: normal !important; |
|
||||
height: 6vh; |
|
||||
div { |
|
||||
height: 2.5vh; |
|
||||
line-height: 2.5vh; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.list{ |
|
||||
flex: 1; |
|
||||
width: 100%; |
|
||||
} |
|
||||
::v-deep(.row-item){ |
|
||||
border-bottom: 1px solid rgba(255,255,255,0.5); |
|
||||
} |
|
||||
::v-deep(.ceil){ |
|
||||
border-right: 1px solid rgba(255,255,255,0.5); |
|
||||
padding: 0px!important; |
|
||||
} |
|
||||
::v-deep(.dv-scroll-board){ |
|
||||
border-top: 1px solid rgba(255,255,255,0.5); |
|
||||
border-left: 1px solid rgba(255,255,255,0.5); |
|
||||
border-bottom: 1px solid rgba(255,255,255,0.5); |
|
||||
} |
|
||||
::v-deep(.header-item){ |
|
||||
border-right: 1px solid rgba(255,255,255,0.5); |
|
||||
} |
|
||||
</style> |
|
||||
|
|
@ -1,529 +0,0 @@ |
|||||
<!-- 生产计划看板 --> |
|
||||
<template> |
|
||||
<div class="box"> |
|
||||
<div class="title">生产计划看板</div> |
|
||||
<div class="table"> |
|
||||
<table border class="table"> |
|
||||
<thead> |
|
||||
<tr> |
|
||||
<th></th> |
|
||||
<th> |
|
||||
<div>9-15</div> |
|
||||
<div>8:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>9:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>10:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>11:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>12:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>13:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>14:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>15:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>16:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>17:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>18:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>19:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>20:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>21:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>22:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>23:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div>9-15</div> |
|
||||
<div>0:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>1:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>2:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>3:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>4:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>5:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>6:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>7:00</div> |
|
||||
</th> |
|
||||
</tr> |
|
||||
</thead> |
|
||||
<tBody> |
|
||||
<tr v-for="(item, index) in tableData" :key="index"> |
|
||||
<td class="flist-col">{{ item.name }}</td> |
|
||||
<template v-for="(cur, key) in item.dock" :key="key"> |
|
||||
<td :colspan="cur.span" v-if="cur.backgroundColor"> |
|
||||
<div :style="{ background: cur.backgroundColor }">{{cur.num1}}</div> |
|
||||
</td> |
|
||||
<td v-if="!cur.backgroundColor"></td> |
|
||||
</template> |
|
||||
</tr> |
|
||||
</tBody> |
|
||||
</table> |
|
||||
</div> |
|
||||
<div class="list mt-16px"> |
|
||||
<dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%" @mouseover="mouseoverHandler" @click="clickHandler" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import type { ScrollBoard } from '@kjgl77/datav-vue3/index' |
|
||||
const tableData = [ |
|
||||
{ |
|
||||
name: 'dock1', |
|
||||
dock: [ |
|
||||
{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span: 2, |
|
||||
backgroundColor: '#529b2f', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#dfa041', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:4, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:4, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
} |
|
||||
] |
|
||||
}, { |
|
||||
name: 'dock2', |
|
||||
dock: [ |
|
||||
{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#f46c6c', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'3', |
|
||||
backgroundColor: '#e6a23d', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:"", |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:1, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'3', |
|
||||
backgroundColor: '#90939a', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3 , |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3 , |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
} |
|
||||
] |
|
||||
}, { |
|
||||
name: 'dock3', |
|
||||
dock: [ |
|
||||
{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#529b2f', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'2', |
|
||||
backgroundColor: '#e6a23d', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:"", |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:4, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
const config = reactive({ |
|
||||
header: ['状态', '流水号', '生产线', '产品号', '产品名称', '批次', '计划数量', '完成数量', '完成百分比', '报废数量', '报废百分比'], |
|
||||
data: [ |
|
||||
['<span style="background:#529b2f;width:100%;height:100%;display:block">行1列1</span>', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6', '行1列7', '行1列8', '行1列6', '行1列7', '行1列8'], |
|
||||
['<span style="background:#529b2f;width:100%;height:100%;display:block">行2列1</span>', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6', '行2列7', '行2列8', '行1列6', '行1列7', '行1列8'], |
|
||||
['<span style="background:#f46c6c;width:100%;height:100%;display:block">行3列1</span>', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6', '行3列7', '行3列8', '行1列6', '行1列7', '行1列8'], |
|
||||
['<span style="background:#e6a23d;width:100%;height:100%;display:block">行4列1</span>', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6', '行4列7', '行4列8', '行1列6', '行1列7', '行1列8'], |
|
||||
['<span style="background:#e6a23d;width:100%;height:100%;display:block">行5列1</span>', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6', '行5列7', '行5列8', '行1列6', '行1列7', '行1列8'], |
|
||||
['<span style="background:#e6a23d;width:100%;height:100%;display:block">行6列1</span>', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6', '行6列7', '行6列8', '行1列6', '行1列7', '行1列8'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行7列1</span>', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6', '行7列7', '行7列8', '行1列6', '行1列7', '行1列8'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行8列1</span>', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6', '行8列7', '行8列8', '行1列6', '行1列7', '行1列8'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行9列1</span>', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6', '行9列7', '行9列8', '行1列6', '行1列7', '行1列8'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行10列1</span>', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6', '行10列7', '行10列8', '行1列6', '行1列7', '行1列8'], |
|
||||
], |
|
||||
index: false, |
|
||||
// columnWidth: [50], |
|
||||
align: ['center','center','center','center','center','center','center','center','center','center','center'], |
|
||||
rowNum:8, |
|
||||
headerHeight:50, |
|
||||
headerBGC:'#616267', |
|
||||
oddRowBGC:'#303133', |
|
||||
evenRowBGC:'#303133', |
|
||||
|
|
||||
}) |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.box { |
|
||||
width: 98vw; |
|
||||
height: 96vh; |
|
||||
background: #303133; |
|
||||
padding: 2vh 1vw; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
.title { |
|
||||
color: #9d9f9e; |
|
||||
font-size: 30px; |
|
||||
text-align: center; |
|
||||
line-height: 7vh; |
|
||||
width: 100%; |
|
||||
} |
|
||||
.table { |
|
||||
width: 98vw; |
|
||||
border-collapse: collapse; |
|
||||
border-spacing: 0; |
|
||||
tr { |
|
||||
color: #b3b4b8; |
|
||||
} |
|
||||
td { |
|
||||
width: calc(92vw / 24); |
|
||||
text-align: center; |
|
||||
div { |
|
||||
width: calc(100% - 16px); |
|
||||
height: 28px; |
|
||||
margin: 8px; |
|
||||
line-height: 28px; |
|
||||
color: white; |
|
||||
text-align: left; |
|
||||
text-indent: 10px; |
|
||||
} |
|
||||
&.flist-col { |
|
||||
width: 6vw; |
|
||||
} |
|
||||
} |
|
||||
thead { |
|
||||
tr { |
|
||||
text-indent: -100%; |
|
||||
border-left: 1px solid rgba(255, 255, 255, 0); |
|
||||
border-top: 1px solid rgba(255, 255, 255, 0); |
|
||||
border-right: 1px solid rgba(255, 255, 255, 0); |
|
||||
} |
|
||||
th { |
|
||||
font-size: 14px; |
|
||||
font-weight: normal !important; |
|
||||
height: 6vh; |
|
||||
div { |
|
||||
height: 2.5vh; |
|
||||
line-height: 2.5vh; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.list{ |
|
||||
flex: 1; |
|
||||
width: 100%; |
|
||||
} |
|
||||
::v-deep(.row-item){ |
|
||||
border-bottom: 1px solid rgba(255,255,255,0.5); |
|
||||
} |
|
||||
::v-deep(.ceil){ |
|
||||
border-right: 1px solid rgba(255,255,255,0.5); |
|
||||
padding: 0px!important; |
|
||||
} |
|
||||
::v-deep(.dv-scroll-board){ |
|
||||
border-top: 1px solid rgba(255,255,255,0.5); |
|
||||
border-left: 1px solid rgba(255,255,255,0.5); |
|
||||
border-bottom: 1px solid rgba(255,255,255,0.5); |
|
||||
} |
|
||||
::v-deep(.header-item){ |
|
||||
border-right: 1px solid rgba(255,255,255,0.5); |
|
||||
} |
|
||||
</style> |
|
||||
> |
|
@ -1,528 +0,0 @@ |
|||||
<!-- 采购到货看版 --> |
|
||||
<template> |
|
||||
<div class="box"> |
|
||||
<div class="title">采购到货看版</div> |
|
||||
<div class="table"> |
|
||||
<table border class="table"> |
|
||||
<thead> |
|
||||
<tr> |
|
||||
<th></th> |
|
||||
<th> |
|
||||
<div>9-15</div> |
|
||||
<div>8:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>9:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>10:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>11:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>12:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>13:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>14:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>15:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>16:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>17:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>18:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>19:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>20:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>21:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>22:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>23:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div>9-15</div> |
|
||||
<div>0:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>1:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>2:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>3:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>4:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>5:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>6:00</div> |
|
||||
</th> |
|
||||
<th> |
|
||||
<div></div> |
|
||||
<div>7:00</div> |
|
||||
</th> |
|
||||
</tr> |
|
||||
</thead> |
|
||||
<tBody> |
|
||||
<tr v-for="(item, index) in tableData" :key="index"> |
|
||||
<td class="flist-col">{{ item.name }}</td> |
|
||||
<template v-for="(cur, key) in item.dock" :key="key"> |
|
||||
<td :colspan="cur.span" v-if="cur.backgroundColor"> |
|
||||
<div :style="{ background: cur.backgroundColor }">{{cur.num1}}</div> |
|
||||
</td> |
|
||||
<td v-if="!cur.backgroundColor"></td> |
|
||||
</template> |
|
||||
</tr> |
|
||||
</tBody> |
|
||||
</table> |
|
||||
</div> |
|
||||
<div class="list mt-16px"> |
|
||||
<dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%" @mouseover="mouseoverHandler" @click="clickHandler" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import type { ScrollBoard } from '@kjgl77/datav-vue3/index' |
|
||||
const tableData = [ |
|
||||
{ |
|
||||
name: 'dock1', |
|
||||
dock: [ |
|
||||
{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span: 2, |
|
||||
backgroundColor: '#529b2f', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#dfa041', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:4, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:4, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
} |
|
||||
] |
|
||||
}, { |
|
||||
name: 'dock2', |
|
||||
dock: [ |
|
||||
{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#f46c6c', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'3', |
|
||||
backgroundColor: '#e6a23d', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:"", |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:1, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'3', |
|
||||
backgroundColor: '#90939a', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3 , |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3 , |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
} |
|
||||
] |
|
||||
}, { |
|
||||
name: 'dock3', |
|
||||
dock: [ |
|
||||
{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#529b2f', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'2', |
|
||||
backgroundColor: '#e6a23d', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:"", |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:2, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:4, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:3, |
|
||||
backgroundColor: '#3275b9', |
|
||||
num1: '234' |
|
||||
},{ |
|
||||
time: '9:00', |
|
||||
startTime: '8:00', |
|
||||
endTime: '10:00', |
|
||||
span:'', |
|
||||
backgroundColor: '', |
|
||||
num1: '234' |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
const config = reactive({ |
|
||||
header: ['状态', '流水号', '月台号', '供应商', '发货单', '车牌号', '计划到货时间', '实际到货时间'], |
|
||||
data: [ |
|
||||
['<span style="background:#529b2f;width:100%;height:100%;display:block">行1列1</span>', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6', '行1列7', '行1列8'], |
|
||||
['<span style="background:#529b2f;width:100%;height:100%;display:block">行2列1</span>', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6', '行2列7', '行2列8'], |
|
||||
['<span style="background:#f46c6c;width:100%;height:100%;display:block">行3列1</span>', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6', '行3列7', '行3列8'], |
|
||||
['<span style="background:#e6a23d;width:100%;height:100%;display:block">行4列1</span>', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6', '行4列7', '行4列8'], |
|
||||
['<span style="background:#e6a23d;width:100%;height:100%;display:block">行5列1</span>', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6', '行5列7', '行5列8'], |
|
||||
['<span style="background:#e6a23d;width:100%;height:100%;display:block">行6列1</span>', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6', '行6列7', '行6列8'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行7列1</span>', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6', '行7列7', '行7列8'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行8列1</span>', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6', '行8列7', '行8列8'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行9列1</span>', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6', '行9列7', '行9列8'], |
|
||||
['<span style="background:#3275b9;width:100%;height:100%;display:block">行10列1</span>', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6', '行10列7', '行10列8'], |
|
||||
], |
|
||||
index: false, |
|
||||
// columnWidth: [50], |
|
||||
align: ['center','center','center','center','center','center','center','center'], |
|
||||
rowNum:8, |
|
||||
headerHeight:50, |
|
||||
headerBGC:'#616267', |
|
||||
oddRowBGC:'#303133', |
|
||||
evenRowBGC:'#303133', |
|
||||
|
|
||||
}) |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.box { |
|
||||
width: 98vw; |
|
||||
height: 96vh; |
|
||||
background: #303133; |
|
||||
padding: 2vh 1vw; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
.title { |
|
||||
color: #9d9f9e; |
|
||||
font-size: 30px; |
|
||||
text-align: center; |
|
||||
line-height: 7vh; |
|
||||
width: 100%; |
|
||||
} |
|
||||
.table { |
|
||||
width: 98vw; |
|
||||
border-collapse: collapse; |
|
||||
border-spacing: 0; |
|
||||
tr { |
|
||||
color: #b3b4b8; |
|
||||
} |
|
||||
td { |
|
||||
width: calc(92vw / 24); |
|
||||
text-align: center; |
|
||||
div { |
|
||||
width: calc(100% - 16px); |
|
||||
height: 28px; |
|
||||
margin: 8px; |
|
||||
line-height: 28px; |
|
||||
color: white; |
|
||||
text-align: left; |
|
||||
text-indent: 10px; |
|
||||
} |
|
||||
&.flist-col { |
|
||||
width: 6vw; |
|
||||
} |
|
||||
} |
|
||||
thead { |
|
||||
tr { |
|
||||
text-indent: -100%; |
|
||||
border-left: 1px solid rgba(255, 255, 255, 0); |
|
||||
border-top: 1px solid rgba(255, 255, 255, 0); |
|
||||
border-right: 1px solid rgba(255, 255, 255, 0); |
|
||||
} |
|
||||
th { |
|
||||
font-size: 14px; |
|
||||
font-weight: normal !important; |
|
||||
height: 6vh; |
|
||||
div { |
|
||||
height: 2.5vh; |
|
||||
line-height: 2.5vh; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.list{ |
|
||||
flex: 1; |
|
||||
width: 100%; |
|
||||
} |
|
||||
::v-deep(.row-item){ |
|
||||
border-bottom: 1px solid rgba(255,255,255,0.5); |
|
||||
} |
|
||||
::v-deep(.ceil){ |
|
||||
border-right: 1px solid rgba(255,255,255,0.5); |
|
||||
padding: 0px!important; |
|
||||
} |
|
||||
::v-deep(.dv-scroll-board){ |
|
||||
border-top: 1px solid rgba(255,255,255,0.5); |
|
||||
border-left: 1px solid rgba(255,255,255,0.5); |
|
||||
border-bottom: 1px solid rgba(255,255,255,0.5); |
|
||||
} |
|
||||
::v-deep(.header-item){ |
|
||||
border-right: 1px solid rgba(255,255,255,0.5); |
|
||||
} |
|
||||
</style> |
|
Loading…
Reference in new issue