DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(wms): 调整钢卷管理界面列顺序和标签

Browse Source 
refactor(login): 重构登录页面布局和样式
This commit is contained in:
砂糖
2025-10-30 10:37:43 +08:00
parent 0d5afcd149
commit e2e26667bf
3 changed files with 98 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
klp-ui/src/views/login.vue
View File

@@ -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 {

32
klp-ui/src/views/wms/coil/box.vue
View File

@@ -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)') }
// }]
}))
};
}

32
klp-ui/src/views/wms/coil/panels/base.vue
View File

@@ -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>