From e2e26667bf7564b408925a918da90e6255e32c8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Thu, 30 Oct 2025 10:37:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(wms):=20=E8=B0=83=E6=95=B4=E9=92=A2?=
 =?UTF-8?q?=E5=8D=B7=E7=AE=A1=E7=90=86=E7=95=8C=E9=9D=A2=E5=88=97=E9=A1=BA?=
 =?UTF-8?q?=E5=BA=8F=E5=92=8C=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor(login): 重构登录页面布局和样式
---
 klp-ui/src/views/login.vue                | 110 ++++++++++++----------
 klp-ui/src/views/wms/coil/box.vue         |  32 ++++---
 klp-ui/src/views/wms/coil/panels/base.vue |  32 ++++---
 3 files changed, 98 insertions(+), 76 deletions(-)

diff --git a/klp-ui/src/views/login.vue b/klp-ui/src/views/login.vue
index 3ea9735a..0b932b08 100644
--- a/klp-ui/src/views/login.vue
+++ b/klp-ui/src/views/login.vue
@@ -1,13 +1,25 @@
 <template>
   <div class="login-page">
-    <div class="login-left">
-      <div class="login-logo">
-        <img src="../assets/logo/logo.png" alt="logo" class="logo-img" />
-        <div class="login-title">科伦普综合办公系统</div>
+    <div class="login-box">
+      <div class="login-left">
+
+        <div class="login-title-welcome">
+          <img src="../assets/logo/logo.png" alt="logo" class="logo-img" />
+          <span class="login-title">欢迎使用科伦普综合办公系统</span>
+        </div>
+        <p>
+          嘉祥科伦普重工有限公司是山东省重点工程项目，是济宁市工程之一，也是科伦普产品结构调整重要的工程项目。工程采用了外方技术总负责、关键设备整体引进、点菜集成、国内技术总成、自主创新、单体设备引进等多种建设方
+          案，保证了技术先进和人才的培养，确保工程投产后达产达效。
+        </p>
+        <p>
+          科伦普冷轧重工有限公司是设计年产量150万 吨，能向广大用户提供热轧酸洗、热轧镀锌、冷硬、罩式退火、冷轧镀锌、铝锌合金、锌铝合金、锌铝镁、镀铬等各大类产品。产品覆盖东北、华北、华东、华南等地区。
+        </p>
       </div>
-      <div class="login-box">
-        <div class="login-title-welcome">欢迎使用科伦普综合办公系统</div>
+
+      <div class="login-right">
+        
         <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+          <h2>登录</h2>
           <el-form-item prop="username">
             <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
               <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
@@ -30,25 +42,25 @@
           </el-form-item>
           <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
           <el-form-item style="width:100%;">
-            <el-button :loading="loading" size="medium" type="primary" style="width:100%; height: 40px; font-size: 16px;"
-              @click.native.prevent="handleLogin">
+            <el-button :loading="loading" size="medium" type="primary"
+              style="width:100%; height: 40px; font-size: 16px;" @click.native.prevent="handleLogin">
               <span v-if="!loading">登 录</span>
               <span v-else>登 录 中...</span>
             </el-button>
           </el-form-item>
         </el-form>
-      </div>
-    </div>
-    <div class="login-right">
-      <div class="login-illustration">
+        <!-- <div class="login-illustration">
         <img src="https://sf3-scmcdn-cn.feishucdn.com/goofy/ee/suite/passport/static/login/img/light.ba71f7a1.png"
           alt="illustration" class="illustration-img" />
         <div class="login-slogan">
           <div class="slogan-title">先进团队，先用科伦普</div>
           <div class="slogan-desc">人、事、信息，一处搞定</div>
         </div>
+      </div> -->
       </div>
     </div>
+
+
   </div>
 </template>
 
@@ -154,27 +166,52 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
 // 引入全局主题变量，假设你有全局的variables.scss定义了以下变量
-$--color-background: #f5f5f5; 
+$--color-background: #f5f5f5;
 $--color-text-primary: #111;
 $--color-text-secondary: #b6bdc5;
 $--border-color-light: #4c5057;
 $--color-primary: #657b96;
-$--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
+$--metal-gradient-light: linear-gradient(145deg, #f5f5f550, #ffffff50);
 
 .login-page {
   display: flex;
   height: 100vh;
-  background: $--color-background; // 改用全局深色背景变量
+  justify-content: center;
+  align-items: center;
+  background: url('../assets/images/login.jpg'); // 金属渐变背景
 }
 
-.login-logo {
+.login-box {
+  width: 50%;
+  height: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.login-left,
+.login-right {
+  // flex: 1;
+  height: 100%;
+  padding: 20px;
+}
+
+.login-left {
+  flex: 4;
+  background-color: #637288;
+  display: flex;
+  flex-direction: column;
+  // box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // 增加阴影增强质感
+  p {
+    text-indent: 2em;
+  }
+}
+
+.login-title-welcome {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
-  position: absolute;
-  top: 24px;
-  left: 24px;
 
   .logo-img {
     width: 64px;
@@ -182,40 +219,15 @@ $--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
   }
 
   .login-title {
-    font-size: 22px;
+    font-size: 20px ;
     color: $--color-text-primary; // 白色文字
   }
 }
 
-.login-left {
-  flex: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: $--metal-gradient-light; // 金属渐变背景
-  position: relative;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // 增加阴影增强质感
-}
-
-.login-box {
-  width: 400px;
-  padding: 40px 32px 32px 32px;
-  border-radius: 12px;
-  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.2);
-  background: $--color-background; // 深色背景
-}
-
-.login-title-welcome {
-  font-size: 22px;
-  font-weight: 600;
-  color: $--color-text-primary; // 白色文字
-  text-align: left;
-  margin-bottom: 24px;
-}
-
 .login-form {
   .el-input {
     margin-top: 20px;
+
     input {
       height: 40px !important;
       color: $--color-text-primary; // 白色文字
@@ -239,6 +251,7 @@ $--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
   width: 33%;
   height: 40px;
   float: right;
+
   img {
     cursor: pointer;
     vertical-align: middle;
@@ -249,6 +262,7 @@ $--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
   width: 100%;
   height: 40px;
   opacity: 0.8;
+
   &:hover {
     opacity: 1;
   }
@@ -265,11 +279,11 @@ $--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
 }
 
 .login-right {
-  flex: 1;
+  flex: 3;
+  background: #ffffff; // 金属渐变背景
   display: flex;
   justify-content: center;
   align-items: center;
-  background: $--metal-gradient-light; // 金属渐变背景
 }
 
 .login-illustration {
diff --git a/klp-ui/src/views/wms/coil/box.vue b/klp-ui/src/views/wms/coil/box.vue
index d5e3797b..8b3a918d 100644
--- a/klp-ui/src/views/wms/coil/box.vue
+++ b/klp-ui/src/views/wms/coil/box.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="statistics-container">
+  <div class="statistics-container" v-loading="loading">
     <!-- 统计方式选择 -->
     <el-form inline>
       <el-form-item label="统计方式" prop="statType">
@@ -100,8 +100,11 @@
               <el-table-column prop="warehouseName" label="仓库名称" align="center" min-width="150"></el-table-column>
               <el-table-column prop="currentCoilNo" label="当前卷号" align="center" min-width="120"></el-table-column>
               <el-table-column prop="enterCoilNo" label="入场卷号" align="center" min-width="180"></el-table-column>
-              <el-table-column prop="grossWeight" label="毛重(kg)" align="center" min-width="100"></el-table-column>
-              <el-table-column prop="netWeight" label="净重(kg)" align="center" min-width="100"></el-table-column>
+              <el-table-column label="库区" align="center" prop="itemType">
+                <template slot-scope="scope">
+                  {{ scope.row.itemType == 'product' ? '成品' : '原料' }}
+                </template>
+              </el-table-column>
               <el-table-column label="物料信息" align="center" min-width="250">
                 <template slot-scope="scope">
                   <ProductInfo v-if="scope.row.itemType === 'product'" :productId="scope.row.itemId">
@@ -116,13 +119,8 @@
                   </RawMaterialInfo>
                 </template>
               </el-table-column>
-              <el-table-column prop="coilStatus" label="状态" align="center" min-width="100">
-                <template slot-scope="scope">
-                  <el-tag :type="getCoilStatusTagType(scope.row.coilStatus)">
-                    {{ formatCoilStatus(scope.row.coilStatus) }}
-                  </el-tag>
-                </template>
-              </el-table-column>
+              <el-table-column prop="grossWeight" label="毛重(kg)" align="center" min-width="100"></el-table-column>
+              <el-table-column prop="netWeight" label="净重(kg)" align="center" min-width="100"></el-table-column>
             </el-table>
           </el-skeleton>
 
@@ -160,6 +158,7 @@ export default {
         itemType: undefined,
         itemId: undefined,
       },
+      loading: false,
       list: [],
       // 科技风配色方案（蓝色系为主，体现科技感）
       techColors: [
@@ -209,17 +208,20 @@ export default {
   },
   methods: {
     getList() {
+      this.loading = true;
       if (this.queryParams.statType === '1') {
         // 物料统计：仓库字段无效，以物料为核心
         getMaterialCoilDistributionByType(this.queryParams).then(res => {
           this.list = res.data || [];
           this.updateCharts();
+          this.loading = false;
         })
       } else if (this.queryParams.statType === '2') {
         // 仓库统计：物料字段无效，以仓库为核心
         getMaterialCoilDistributionByWarehouse(this.queryParams).then(res => {
           this.list = res.data || [];
           this.updateCharts();
+          this.loading = false;
         })
       }
     },
@@ -279,11 +281,11 @@ export default {
             warehouseId: item.warehouseId,
             warehouseName: item.warehouseName,
             itemStyle: { color: this.getTechColor(index) },
-            children: [{
-              name: `卷数: ${item.coilCount}`,
-              value: item.coilCount,
-              itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
-            }]
+            // children: [{
+            //   name: `卷数: ${item.coilCount}`,
+            //   value: item.coilCount,
+            //   itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
+            // }]
           }))
         };
       }
diff --git a/klp-ui/src/views/wms/coil/panels/base.vue b/klp-ui/src/views/wms/coil/panels/base.vue
index cd0f95e7..c27e9266 100644
--- a/klp-ui/src/views/wms/coil/panels/base.vue
+++ b/klp-ui/src/views/wms/coil/panels/base.vue
@@ -51,20 +51,11 @@
       <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo" />
       <el-table-column label="当前钢卷号" align="center" prop="currentCoilNo" />
       <el-table-column label="厂家原料卷号" align="center" prop="supplierCoilNo" />
-      <el-table-column label="数据类型" align="center" prop="dataType">
+      <el-table-column label="库区" align="center" prop="itemType">
         <template slot-scope="scope">
-          {{ scope.row.dataType == 0 ? '历史数据' : '当前数据' }}
+          {{ scope.row.itemType == 'product' ? '成品' : '原料' }}
         </template>
       </el-table-column>
-      <el-table-column label="二维码" v-if="qrcode">
-        <template slot-scope="scope">
-          <QRCode v-if="scope.row.dataType == 1" :content="scope.row.qrcodeRecordId" :size="50" />
-        </template>
-      </el-table-column>
-      <el-table-column label="班组" align="center" prop="team" />
-      <el-table-column label="毛重" align="center" prop="grossWeight" />
-      <el-table-column label="净重" align="center" prop="netWeight" />
-      <el-table-column label="仓库" align="center" prop="warehouseName" />
       <el-table-column label="物品" align="center" prop="itemName">
         <template slot-scope="scope">
           <ProductInfo v-if="scope.row.itemType == 'product'" productId="scope.row.itemId">
@@ -79,6 +70,21 @@
           </RawMaterialInfo>
         </template>
       </el-table-column>
+      <el-table-column label="数据类型" align="center" prop="dataType">
+        <template slot-scope="scope">
+          {{ scope.row.dataType == 0 ? '历史数据' : '当前数据' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="二维码" v-if="qrcode">
+        <template slot-scope="scope">
+          <QRCode v-if="scope.row.dataType == 1" :content="scope.row.qrcodeRecordId" :size="50" />
+        </template>
+      </el-table-column>
+      <el-table-column label="班组" align="center" prop="team" />
+      <el-table-column label="毛重" align="center" prop="grossWeight" />
+      <el-table-column label="净重" align="center" prop="netWeight" />
+      <el-table-column label="仓库" align="center" prop="warehouseName" />
+      
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -114,8 +120,8 @@
         <el-form-item label="班组" prop="team">
           <el-input v-model="form.team" placeholder="请输入班组" />
         </el-form-item>
-        <el-form-item label="物品类型" prop="itemType">
-          <el-select v-model="form.itemType" placeholder="请选择物品类型">
+        <el-form-item label="库区" prop="itemType">
+          <el-select v-model="form.itemType" placeholder="请选择库区">
             <el-option label="成品" value="product" />
             <el-option label="原料" value="raw_material" />
           </el-select>