sfms3.0
/
sfms3.0-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

看板

master
zhang_li 11 months ago
parent
64bbf489e3
commit
882342b685
8 changed files with 2160 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      package.json
  2. 3
      src/main.ts
  3. 3
      src/permission.ts
  4. 39
      src/router/modules/remaining.ts
  5. 529
      src/views/wms/board/productShippingBoard.vue
  6. 529
      src/views/wms/board/productionMaterialBoard.vue
  7. 529
      src/views/wms/board/productionPlanBoard.vue
  8. 528
      src/views/wms/board/purchaseArrivalBoard.vue

1
package.json
View File

@ -16,6 +16,7 @@
"@form-create/designer": "^3.1.3",
"@form-create/element-ui": "^3.1.24",
"@iconify/iconify": "^3.1.1",
"@kjgl77/datav-vue3": "^1.7.1",
"@videojs-player/vue": "^1.0.0",
"@vueuse/core": "^10.4.1",
"@wangeditor/editor": "^5.1.23",

3
src/main.ts
View File

@ -42,6 +42,8 @@ import Logger from '@/utils/Logger'
import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
import DataVVue3 from '@kjgl77/datav-vue3'
// 创建实例
const setupAll = async () => {
const app = createApp(App)
@ -63,6 +65,7 @@ const setupAll = async () => {
await router.isReady()
app.use(VueDOMPurifyHTML)
app.use(DataVVue3)
app.mount('#app')
app.config.warnHandler = () => null;

3
src/permission.ts
View File

@ -19,7 +19,8 @@ const whiteList = [
'/auth-redirect',
'/bind',
'/register',
'/oauthLogin/gitee'
'/oauthLogin/gitee',
'/board/purchaseArrivalBoard'
]
// 路由加载前

39
src/router/modules/remaining.ts
View File

@ -362,7 +362,46 @@ const remainingRouter: AppRouteRecordRaw[] = [
// activeMenu: '/wms/itempackaging-manage/itempackaging'
// }
// }
]
},
{
path: '/board/purchaseArrivalBoard',
component: () => import('@/views/wms/board/purchaseArrivalBoard.vue'),
name: 'PurchaseArrivalBoard',
meta: {
hidden: true,
title: '采购到货看版',
noTagsView: true
}
},{
path: '/board/productionMaterialBoard',
component: () => import('@/views/wms/board/productionMaterialBoard.vue'),
name: 'ProductionMaterialBoard',
meta: {
hidden: true,
title:'生产叫料看板',
noTagsView: true
}
},{
path: '/board/productionPlanBoard',
component: () => import('@/views/wms/board/productionPlanBoard.vue'),
name: 'ProductionPlanBoard',
meta: {
hidden: true,
title:'生产计划看板',
noTagsView: true
}
},
{
path: '/board/productShippingBoard',
component: () => import('@/views/wms/board/productShippingBoard.vue'),
name: 'ProductShippingBoard',
meta: {
hidden: true,
title: '成品发运看板',
noTagsView: true
}
}
]

529
src/views/wms/board/productShippingBoard.vue
View File

@ -0,0 +1,529 @@
<!-- 成品发运看板 -->
<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>

529
src/views/wms/board/productionMaterialBoard.vue
View File

@ -0,0 +1,529 @@
<!-- 生产叫料看板 -->
<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>

529
src/views/wms/board/productionPlanBoard.vue
View File

@ -0,0 +1,529 @@
<!-- 生产计划看板 -->
<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>
>

528
src/views/wms/board/purchaseArrivalBoard.vue
View File

@ -0,0 +1,528 @@
<!-- 采购到货看版 -->
<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>
Write Preview
Loading…
Cancel
Save