From 013c9ed47408e0c584a05663afee2bb47a39d50d Mon Sep 17 00:00:00 2001
From: skyouc
Date: 星期四, 27 二月 2025 16:02:05 +0800
Subject: [PATCH] #优化 波次预览显示优化 大屏1280*720兼容
---
construction-data/src/components/datav/index.vue | 161 +++++++++++++++++++++++++++++++++++++----------------
1 files changed, 111 insertions(+), 50 deletions(-)
diff --git a/construction-data/src/components/datav/index.vue b/construction-data/src/components/datav/index.vue
index 58a98d2..69a977f 100644
--- a/construction-data/src/components/datav/index.vue
+++ b/construction-data/src/components/datav/index.vue
@@ -4,14 +4,14 @@
<top-header/>
<template>
<el-row>
- <el-col :span="15">
+ <el-col :span="13">
<el-row class="header-left-task" type="flex" align="center" >
<el-col v-for="(task, index) in tasks" :key="index" >
<el-row type="flex" align="center" justify="center" @click.native="borderClick(task)">
<dv-border-box-2>
<el-card class="header-card" >
<el-row>
- <el-col :span="4" v-for="(item, index) in Object.keys(waveLabels)" :key="index">
+ <el-col class="heaer-label-column" v-for="(item, index) in Object.keys(waveLabels)" :key="index">
<div class="header-card-label" >{{ waveLabels[item] }}</div>
<div class="header-card-val" >{{ task[item] }}</div>
</el-col>
@@ -22,13 +22,11 @@
</el-col>
</el-row>
<el-row class="detl-info-row">
- <dv-border-box-2>
- <el-card>
- <el-table :data="mergeTaskDetl" class="talbe-matnr" @row-click="selectRow">
- <el-table-column v-for="(item,index) in Object.keys(detlLabels)" :prop="item" :label="detlLabels[item]" :key="index"/>
- </el-table>
- </el-card>
- </dv-border-box-2>
+ <el-card class="detl-info-card">
+ <el-table :data="mergeTaskDetl" class="table-matnr" @row-click="selectRow">
+ <el-table-column v-for="(item,index) in Object.keys(detlLabels)" :prop="item" :label="detlLabels[item]" :key="index"/>
+ </el-table>
+ </el-card>
</el-row>
<el-row class="pick-order-detl">
<dv-border-box11 title="鎷ｈ揣璁㈠崟鏄庣粏" class="detl-box-border">
@@ -41,16 +39,16 @@
</dv-border-box11>
</el-row>
</el-col>
- <el-col :span="9">
+ <el-col :span="11">
<el-row class="order-box-row">
<dv-border-box-11 title="璁㈠崟瀹屾垚鎯呭喌" class="order-box">
<el-table :data="orders" v-if="orders.length > 0" class="order-table">
- <el-table-column v-for="(item, dex) in Object.keys(orderStatus)" :prop="item" :label="orderStatus[item]" :key="dex">
+ <el-table-column v-for="(item, dex) in Object.keys(orderStatus)" :prop="item" :label="orderStatus[item]" :key="dex" >
<template slot-scope="scope">
<el-popover
placement="right"
- width="300"
trigger="manual"
+ class="popover-order"
v-model="visible"
v-if="item === 'action'" >
<template>
@@ -58,13 +56,13 @@
<span>閫夋嫨鐩爣鍙戣揣鍖�</span>
<el-divider/>
<el-row :gutter="15">
- <el-col v-for="(palt, index) in platforms" :key="index" class="platform" :span="7" @click.native="bindShipping(palt, scope)">
- <div>{{palt.platformNo}}</div>
+ <el-col v-for="(palt, index) in platforms" :key="index" :span="7" @click.native="bindShipping(palt, scope)">
+ <div class="platform" >{{palt.platformNo}}</div>
</el-col>
</el-row>
</div>
</template>
- <el-button slot="reference" type="text" @click.native.prevent="print(scope.$index, orders)">鎵撳嵃鏄庣粏</el-button>
+ <el-button slot="reference" type="text" @click.native.prevent="print(scope.$index, orders)" class="btnPrint">鎵撳嵃鏄庣粏</el-button>
</el-popover>
<div v-else class="ship-order-list">
{{scope.row[item]}}
@@ -431,15 +429,7 @@
margin: 5px 0;
}
- .platform {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 80px;
- background-color: #03d3ec;
- margin: 5px;
- text-align: center;
- }
+
.pick-order-detl {
padding: 0 15px;
@@ -524,22 +514,31 @@
text-align: center;
padding: 15px;
- .header-card-label {
- font-size: 25px;
- font-style: oblique;
- padding: 5px;
- color: white;
- }
- .header-card-val {
- font-size: 20px;
- padding: 10px;
- color: orange;
+ .heaer-label-column {
+ min-width: 170px;
+ width: auto;
+ .header-card-label {
+ font-size: 25px;
+ font-style: oblique;
+ padding: 5px;
+ color: white;
+ }
+ .header-card-val {
+ font-size: 20px;
+ padding: 10px;
+ color: orange;
+ }
}
}
}
.detl-info-row {
padding: 0 15px;
+
+ .detl-info-card {
+
+ }
+
}
.order-box-row {
@@ -553,6 +552,23 @@
width: 74vh;
padding-top: 65px;
height: 275px;
+
+ .popover-order {
+ width: 300px;
+
+ .platform {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 80px;
+ background-color: #03d3ec;
+ margin: 5px;
+ text-align: center;
+ }
+ }
+
+
+
.ship-order-list {
font-size: 18px; color: white;
@@ -620,7 +636,7 @@
top: 0px !important;
}
- .talbe-matnr {
+ .table-matnr {
height: 26vh;
}
@@ -667,23 +683,58 @@
@media screen and (max-width: 1281px) {
#data-view {
.header-left-task {
- .header-card {
- margin: 5px;height: 90px;
- padding: 5px;
+ padding: 5px 15px 5px 15px;
- .header-card-label {
- font-size: 18px;
- padding: 5px;
+ .header-card {
+ margin: 2px;
+ height: 70px;
+ padding: 2px;
+
+ .el-card__body {
+ padding: 5px 20px;
}
- .header-card-val {
- font-size: 14px;
+ .heaer-label-column{
+ max-width: 130px;
+ min-width: 75px;
+ width: auto;
+ .header-card-label {
+ font-size: 13px;
+ padding: 5px;
+ }
+
+ .header-card-val {
+ font-size: 11px;
+ }
+ }
+ }
+ }
+
+ .detl-info-row {
+ padding: 0 15px;
+
+ .detl-info-card {
+ padding: 0;
+ .el-card__body {
+ padding: 8px;
+ }
+ }
+
+ .el-table {
+ th.el-table__cell>.cell {
+ text-align: center;
+ }
+
+ .el-table__cell {
+ padding: 5px 0;
+ text-align: center;
+ width: auto;
}
}
}
.order-box-row {
- width: 58vh;
+ width: 68vh;
height: 28vh;
.order-box {
@@ -694,37 +745,47 @@
padding-top: 65px;
height: 275px;
+ .btnPrint {
+ font-size: 9px;
+ }
+
.ship-order-list {
- font-size: 14px;
+ font-size: 10px;
+ }
+
+ .el-table__cell {
+ padding: 0;
}
}
}
.empty-padding {
padding-top: 65px;
+ width: 30px;
+ height: 30px;
}
}
- .talbe-matnr {
- height: 20vh;
+ .table-matnr {
+ height: 15vh;
}
.el-table .cell {
- font-size: 16px !important;
+ font-size: 10px !important;
}
.pick-order-detl {
padding: 0 10px;
.detl-box-border {
- height: 39vh;
+ height: 49vh;
.detl-box-padding {
height: 65px
}
.order-detl-list {
- height: 23vh;
+ height: 38vh;
}
}
}
--
Gitblit v1.9.1