Merge branch '20240912_adapter' of http://116.204.71.86:3000/UDI/udiwms-vue-frame into 20240912_adapter
yewj
3 weeks ago
commit
216c0f670e
@ -0,0 +1,344 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dashboard-container">
|
||||||
|
<!-- 搜索区域 -->
|
||||||
|
<div class="search-section">
|
||||||
|
<div class="search-wrapper">
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入产品名称搜索"
|
||||||
|
prefix-icon="el-icon-search"
|
||||||
|
v-model="filterQuery.cpmctymc"
|
||||||
|
@keyup.enter.native="handleSearch"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-button slot="append" icon="el-icon-refresh" @click="onReset">重置</el-button>
|
||||||
|
<el-button slot="append" icon="el-icon-search" @click="handleSearch" >查询</el-button>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 展示区域 -->
|
||||||
|
<div class="display-section">
|
||||||
|
<div class="card-container">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8" v-for="(item, index) in displayData" :key="index">
|
||||||
|
<el-card class="product-card" :body-style="{ padding: '0px' }">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="product-name" :title="item.productName">{{ item.productName }}</h3>
|
||||||
|
<div class="product-info">
|
||||||
|
<span class="batch-no">{{ item.batchNo }}</span>
|
||||||
|
<span class="expire-date">{{ item.expireDate }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="progress-item">
|
||||||
|
<div class="progress-label">
|
||||||
|
<span>工位存量</span>
|
||||||
|
<span class="progress-value">{{ item.workplaceStock }}/{{ item.workplaceTotal }}</span>
|
||||||
|
</div>
|
||||||
|
<el-progress
|
||||||
|
:text-inside="true"
|
||||||
|
:percentage="calculatePercentage(item.workplaceStock, item.workplaceTotal)"
|
||||||
|
:color="getProgressColor(item.workplaceStock, item.workplaceTotal)"
|
||||||
|
:stroke-width="20"
|
||||||
|
></el-progress>
|
||||||
|
</div>
|
||||||
|
<div class="progress-item">
|
||||||
|
<div class="progress-label">
|
||||||
|
<span>拆零存量</span>
|
||||||
|
<span class="progress-value">{{ item.splitStock }}/{{ item.splitTotal }}</span>
|
||||||
|
</div>
|
||||||
|
<el-progress
|
||||||
|
:text-inside="true"
|
||||||
|
:percentage="calculatePercentage(item.splitStock, item.splitTotal)"
|
||||||
|
:color="getProgressColor(item.splitStock, item.splitTotal)"
|
||||||
|
:stroke-width="20"
|
||||||
|
></el-progress>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination-container">
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="filterQuery.page"
|
||||||
|
:page-sizes="[10, 20, 30, 50]"
|
||||||
|
:page-size="filterQuery.limit"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="total"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getStockList } from '@/api/inout/splitInv'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "IosplitFifoStock",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
filterQuery: {
|
||||||
|
page: 1,
|
||||||
|
limit: 10,
|
||||||
|
cpmctymc:""
|
||||||
|
},
|
||||||
|
total: 0,
|
||||||
|
displayData: [],
|
||||||
|
loading: false,
|
||||||
|
colorRanges: [
|
||||||
|
{ min: 0, max: 20, color: '#F56C6C' }, // 红色 - 危险
|
||||||
|
{ min: 20, max: 50, color: '#E6A23C' }, // 橙色 - 警告
|
||||||
|
{ min: 50, max: 80, color: '#409EFF' }, // 蓝色 - 正常
|
||||||
|
{ min: 80, max: 101, color: '#67C23A' } // 绿色 - 良好
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onReset() {
|
||||||
|
this.filterQuery = {
|
||||||
|
page: 1,
|
||||||
|
limit: 10,
|
||||||
|
cpmctymc:""
|
||||||
|
}
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
handleSearch() {
|
||||||
|
this.filterQuery.page = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.filterQuery.limit = val;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.filterQuery.page = val;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
// 调用API获取数据
|
||||||
|
getStockList(this.filterQuery)
|
||||||
|
.then(response => {
|
||||||
|
if (response.code === 20000) {
|
||||||
|
// 处理返回的数据
|
||||||
|
this.total = response.data.total || 0;
|
||||||
|
console.log("jkjsjsjs",this.total)
|
||||||
|
// 转换数据格式以适应展示需求
|
||||||
|
this.displayData = (response.data.list || []).map(item => {
|
||||||
|
return {
|
||||||
|
productName: item.cpmctymc || '未知产品',
|
||||||
|
batchNo: item.batchNo || '无批次',
|
||||||
|
expireDate: item.expireDate || '无效期',
|
||||||
|
workplaceStock: item.remCount || 0,
|
||||||
|
workplaceTotal: item.workplaceTotal || 100,
|
||||||
|
splitStock: item.splitRemCount || 0,
|
||||||
|
splitTotal: item.splitTotal || 100
|
||||||
|
};
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$message.error(response.message || '获取数据失败');
|
||||||
|
this.displayData = [];
|
||||||
|
this.total = 0;
|
||||||
|
}
|
||||||
|
this.loading = false;
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('获取数据失败:', error);
|
||||||
|
this.$message.error('获取数据失败，请稍后重试');
|
||||||
|
this.displayData = [];
|
||||||
|
this.total = 0;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
calculatePercentage(current, total) {
|
||||||
|
if (!total || total === 0) return 0;
|
||||||
|
// const percentage = (current / total) * 100;
|
||||||
|
// return Math.min(100, Math.max(0, percentage));
|
||||||
|
const percentage = Math.round((current * 100) / total);
|
||||||
|
return Math.min(100, Math.max(0, percentage));
|
||||||
|
},
|
||||||
|
getProgressColor(current, total) {
|
||||||
|
if (!total || total === 0) return this.colorRanges[0].color;
|
||||||
|
|
||||||
|
const percentage = this.calculatePercentage(current, total);
|
||||||
|
|
||||||
|
// 根据百分比返回对应的颜色
|
||||||
|
for (const range of this.colorRanges) {
|
||||||
|
if (percentage >= range.min && percentage < range.max) {
|
||||||
|
return range.color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.colorRanges[0].color;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dashboard-container {
|
||||||
|
height: 100vh; /* 使用视口高度单位，确保铺满整个屏幕 */
|
||||||
|
width: 100%;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box; /* 确保padding不会增加总高度 */
|
||||||
|
overflow: hidden; /* 防止内容溢出 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-section {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrapper {
|
||||||
|
max-width: 600px;
|
||||||
|
|
||||||
|
margin: 0 0; /* 修改为左对齐 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-section {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden; /* 防止内容溢出 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-bottom: 20px; /* 为分页腾出空间 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card {
|
||||||
|
height: 220px; /* 增加卡片高度 */
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
background-color: #409EFF;
|
||||||
|
color: white;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-name {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: 20px; /* 增加内边距 */
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around; /* 均匀分布进度条 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-item {
|
||||||
|
margin-bottom: 20px; /* 增加进度条之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-item:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-label {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px; /* 增加标签和进度条之间的间距 */
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-value {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container {
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式调整 */
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.el-col {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card {
|
||||||
|
height: 200px; /* 在小屏幕上稍微减小高度 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 自定义进度条样式 */
|
||||||
|
:deep(.el-progress-bar__outer) {
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: #ebeef5;
|
||||||
|
height: 12px !important; /* 确保进度条高度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-progress-bar__inner) {
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: width 0.6s ease, background-color 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 大屏模式下的额外样式 */
|
||||||
|
@media screen and (min-width: 1920px) {
|
||||||
|
.dashboard-container {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card {
|
||||||
|
height: 240px; /* 在大屏幕上增加高度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-name {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-label {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-item {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue