|
|
|
|
@ -16,65 +16,54 @@
|
|
|
|
|
</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.prepnSpec }}</span>
|
|
|
|
|
<span class="expire-date">{{ item.ggxh }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<!--展示区域-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="card-container" ref="scrollContainer">
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<el-col :span="8" v-for="(item, index) in displayedData" :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.prepnSpec }}</span>
|
|
|
|
|
<span class="expire-date">{{ item.ggxh }}</span>
|
|
|
|
|
</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="card-body">
|
|
|
|
|
<div class="progress-item">
|
|
|
|
|
<div class="progress-label">
|
|
|
|
|
<span>工位存量</span>
|
|
|
|
|
<span class="progress-value">{{ item.workplaceStock }}/{{ item.workplaceTotal }}</span>
|
|
|
|
|
</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>
|
|
|
|
|
<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>
|
|
|
|
|
</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>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<div v-if="dataLoading" class="loading-more">加载中...</div>
|
|
|
|
|
<div v-if="!dataLoading && displayedData.length >= displayData.length" class="no-more-data">没有更多数据了</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -87,25 +76,84 @@ export default {
|
|
|
|
|
return {
|
|
|
|
|
filterQuery: {
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 10,
|
|
|
|
|
limit: 1000,
|
|
|
|
|
cpmctymc:""
|
|
|
|
|
},
|
|
|
|
|
total: 0,
|
|
|
|
|
limit: 6,
|
|
|
|
|
loadLimit:3,
|
|
|
|
|
page: 1, // 当前页码
|
|
|
|
|
displayData: [],
|
|
|
|
|
displayedData:[],
|
|
|
|
|
loading: false,
|
|
|
|
|
dataLoading: 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' } // 绿色 - 良好
|
|
|
|
|
]
|
|
|
|
|
],
|
|
|
|
|
delay:1500,
|
|
|
|
|
timer: null,
|
|
|
|
|
fast: false,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// this.loadInitialData();
|
|
|
|
|
const scrollContainer = this.$refs.scrollContainer;
|
|
|
|
|
|
|
|
|
|
scrollContainer.addEventListener("scroll", this.handleScroll);
|
|
|
|
|
this.startTimer()
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy(){
|
|
|
|
|
const scrollContainer = this.$refs.scrollContainer;
|
|
|
|
|
|
|
|
|
|
scrollContainer.removeEventListener("scroll", this.handleScroll);
|
|
|
|
|
this.clearTimer()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
loadInitialData() {
|
|
|
|
|
this.displayedData = this.displayData.slice(0, this.limit);
|
|
|
|
|
},
|
|
|
|
|
handleScroll() {
|
|
|
|
|
// alert("jajajjaja")
|
|
|
|
|
const { scrollTop, clientHeight, scrollHeight } = this.$refs.scrollContainer;
|
|
|
|
|
const threshold = 10; // 阈值（距离底部10px时触发）
|
|
|
|
|
if (scrollTop + clientHeight >= scrollHeight - threshold) {
|
|
|
|
|
this.loadMoreData();
|
|
|
|
|
}
|
|
|
|
|
// 检测是否滚动到底部
|
|
|
|
|
// if (
|
|
|
|
|
// window.innerHeight + document.documentElement.scrollTop >=
|
|
|
|
|
// document.documentElement.offsetHeight - 10
|
|
|
|
|
// ) {
|
|
|
|
|
// this.loadMoreData();
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
loadMoreData() {
|
|
|
|
|
if (this.dataLoading) return; // 如果正在加载，直接返回
|
|
|
|
|
this.dataLoading = true;
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
// 计算下一页的数据范围
|
|
|
|
|
const start = this.displayedData.length;
|
|
|
|
|
const end = start + this.loadLimit; // 每次加载3条数据
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 加载更多数据
|
|
|
|
|
const moreData = this.displayData.slice(start, end);
|
|
|
|
|
|
|
|
|
|
if (moreData.length > 0) {
|
|
|
|
|
this.displayedData = [...this.displayedData, ...moreData];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.dataLoading = false; // 关闭加载状态
|
|
|
|
|
}, this.delay); // 延迟3秒后加载数据
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
onReset() {
|
|
|
|
|
this.filterQuery = {
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 10,
|
|
|
|
|
limit: 1000,
|
|
|
|
|
cpmctymc:""
|
|
|
|
|
}
|
|
|
|
|
this.getList();
|
|
|
|
|
@ -124,7 +172,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
getList() {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
// 调用API获取数据
|
|
|
|
|
// // 调用API获取数据
|
|
|
|
|
getStockList(this.filterQuery)
|
|
|
|
|
.then(response => {
|
|
|
|
|
if (response.code === 20000) {
|
|
|
|
|
@ -142,6 +190,7 @@ export default {
|
|
|
|
|
splitTotal: item.maxDrugCount || 100
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
this.loadInitialData()
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(response.message || '获取数据失败');
|
|
|
|
|
this.displayData = [];
|
|
|
|
|
@ -177,6 +226,61 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return this.colorRanges[0].color;
|
|
|
|
|
},
|
|
|
|
|
timeGetList() {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
// // 调用API获取数据
|
|
|
|
|
getStockList(this.filterQuery)
|
|
|
|
|
.then(response => {
|
|
|
|
|
if (response.code === 20000) {
|
|
|
|
|
// 处理返回的数据
|
|
|
|
|
this.total = response.data.total || 0;
|
|
|
|
|
// 转换数据格式以适应展示需求
|
|
|
|
|
this.displayData = (response.data.list || []).map(item => {
|
|
|
|
|
return {
|
|
|
|
|
productName: item.cpmctymc || '未知产品',
|
|
|
|
|
prepnSpec: item.prepnSpec ,
|
|
|
|
|
ggxh: item.ggxh ,
|
|
|
|
|
workplaceStock: item.remCount || 0,
|
|
|
|
|
workplaceTotal: item.maxDrugCount || 100,
|
|
|
|
|
splitStock: item.splitRemCount || 0,
|
|
|
|
|
splitTotal: item.maxDrugCount || 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;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
startTimer() {
|
|
|
|
|
// 使用箭头函数保持正确的 this 指向
|
|
|
|
|
this.timer = setInterval(() => {
|
|
|
|
|
this.timeGetList()
|
|
|
|
|
}, 5000) // 2分钟 = 120秒 * 1000毫秒
|
|
|
|
|
},
|
|
|
|
|
clearTimer() {
|
|
|
|
|
if (this.timer) {
|
|
|
|
|
clearInterval(this.timer)
|
|
|
|
|
this.timer = null
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
noMore () {
|
|
|
|
|
return this.count >= 21
|
|
|
|
|
},
|
|
|
|
|
disabled () {
|
|
|
|
|
return this.loading || this.noMore
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
@ -187,7 +291,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.dashboard-container {
|
|
|
|
|
height: 100vh; /* 使用视口高度单位，确保铺满整个屏幕 */
|
|
|
|
|
height: 85vh; /* 使用视口高度单位，确保铺满整个屏幕 */
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: #f5f7fa;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
@ -218,6 +322,7 @@ export default {
|
|
|
|
|
.card-container {
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
padding-bottom: 20px; /* 为分页腾出空间 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -339,5 +444,14 @@ export default {
|
|
|
|
|
margin-bottom: 25px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loading-more,
|
|
|
|
|
.no-more-data {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
wangwei
8 months ago