390 lines
8.9 KiB
Vue
390 lines
8.9 KiB
Vue
<template>
|
|
<view>
|
|
<scroll-view scroll-y class="page">
|
|
<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">交接列表</block></cu-custom>
|
|
|
|
<!-- 空数据提示 -->
|
|
<view v-if="!handDetailsInfo || handDetailsInfo.length === 0" class="empty-container">
|
|
<text class="empty-icon">📭</text>
|
|
<text class="empty-text">本日医废数据为空</text>
|
|
</view>
|
|
|
|
<!-- 表格展示 -->
|
|
<view v-else class="data-wrapper" v-for="(deptData, deptIndex) in groupedHandData" :key="deptIndex">
|
|
<!-- 科室汇总行 -->
|
|
<view class="dept-summary-row">
|
|
<view class="summary-cell summary-cell-dept">
|
|
<text class="dept-icon">🏥</text>
|
|
<text class="dept-name">{{deptData.department}}</text>
|
|
</view>
|
|
<view class="summary-cell summary-cell-count">
|
|
<text class="summary-value">{{deptData.totalCount}}</text>
|
|
<text class="summary-unit">袋</text>
|
|
</view>
|
|
<view class="summary-cell summary-cell-weight">
|
|
<text class="summary-value">{{deptData.totalWeight}}</text>
|
|
<text class="summary-unit">kg</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 表格形式展示分类 -->
|
|
<view class="table-container">
|
|
<view class="table-header">
|
|
<view class="table-cell table-cell-type">类型</view>
|
|
<view class="table-cell table-cell-count">袋数</view>
|
|
<view class="table-cell table-cell-weight">重量</view>
|
|
<view class="table-cell table-cell-type">收集人</view>
|
|
<view class="table-cell table-cell-hand">交接人</view>
|
|
<view class="table-cell table-cell-action">操作</view>
|
|
</view>
|
|
<view class="table-row" v-for="(item, itemIndex) in deptData.items" :key="itemIndex">
|
|
<view class="table-cell table-cell-type">
|
|
<img :src="item.image" class="type-icon" v-if="item.image">
|
|
<text>{{item.type}}</text>
|
|
</view>
|
|
<view class="table-cell table-cell-count">{{item.totalCount}}</view>
|
|
<view class="table-cell table-cell-weight">{{item.totalWeight}}</view>
|
|
<view class="table-cell table-cell-type">{{item.reclName}}</view>
|
|
<view class="table-cell table-cell-hand" v-if="itemIndex === 0">{{item.handName}}</view>
|
|
<view class="table-cell table-cell-hand" v-else></view>
|
|
<view class="table-cell table-cell-action" v-if="itemIndex === 0">
|
|
<button class="sign-btn" @click="goToSign(item)">签</button>
|
|
</view>
|
|
<view class="table-cell table-cell-action" v-else></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
handDetailsInfo: [],
|
|
groupedHandData: []
|
|
}
|
|
},
|
|
computed: {
|
|
// 按科室分组数据
|
|
groupHandData() {
|
|
const groups = {};
|
|
this.handDetailsInfo.forEach(item => {
|
|
if (!groups[item.department]) {
|
|
groups[item.department] = {
|
|
department: item.department,
|
|
totalCount: 0,
|
|
totalWeight: 0,
|
|
items: []
|
|
};
|
|
}
|
|
groups[item.department].totalCount += parseFloat(item.totalCount) || 0;
|
|
groups[item.department].totalWeight += parseFloat(item.totalWeight) || 0;
|
|
groups[item.department].items.push({
|
|
...item,
|
|
totalCount: Math.round(parseFloat(item.totalCount) || 0),
|
|
totalWeight: (parseFloat(item.totalWeight) || 0).toFixed(2)
|
|
});
|
|
});
|
|
return Object.values(groups).map(group => ({
|
|
...group,
|
|
totalCount: Math.round(group.totalCount),
|
|
totalWeight: group.totalWeight.toFixed(2)
|
|
}));
|
|
}
|
|
},
|
|
mounted(){
|
|
// 获取全局变量中的数据
|
|
this.hospital = getApp().globalData.hospital
|
|
this.sortHospital = getApp().globalData.sortHospital
|
|
this.department = getApp().globalData.department
|
|
this.duty = getApp().globalData.duty
|
|
this.getHandDetailsInfo();
|
|
},
|
|
watch: {
|
|
handDetailsInfo: {
|
|
handler(newVal) {
|
|
this.groupedHandData = this.groupHandData;
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
getHandDetailsInfo(){
|
|
let that = this;
|
|
uni.request({
|
|
url: "https://mtx.mini.opmonitor.com/?c=app_api&a=getHandDetailsInfo",
|
|
data: {hospital: that.hospital, sortHospital: that.sortHospital, department: that.department, duty: that.duty},
|
|
header: {
|
|
'Content-type': 'application/json'
|
|
},
|
|
success: function(res){
|
|
that.handDetailsInfo = res.data.data
|
|
},
|
|
fail: () => {
|
|
console.info('小程序域名不正确，请检查域名的正确性')
|
|
}
|
|
})
|
|
},
|
|
goToSign(item) {
|
|
// 跳转到签名页面，传递必要的数据
|
|
uni.navigateTo({
|
|
url: `/pages/plugin/sign?id=${item.id}&handName=${item.handName}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.bg-gradual-pink{
|
|
vertical-align: middle;
|
|
font-size:18px;
|
|
background:linear-gradient(135deg,rgba(45,201,235,1) 0%,rgba(20,210,184,1) 100%);
|
|
}
|
|
|
|
.cu{
|
|
height:89px;
|
|
}
|
|
|
|
.page {
|
|
width: 100vw;
|
|
height: 100Vh;
|
|
}
|
|
|
|
.page.show {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cuIcon-locationfill{
|
|
color:#2CC9EA;
|
|
}
|
|
|
|
/* 空数据容器 */
|
|
.empty-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 200rpx 0;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 120rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 32rpx;
|
|
color: #999;
|
|
}
|
|
|
|
/* 数据包裹层 */
|
|
.data-wrapper {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
/* 科室汇总行 */
|
|
.dept-summary-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20rpx;
|
|
padding: 28rpx 24rpx;
|
|
background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 6rpx 24rpx rgba(41, 128, 185, 0.4);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dept-summary-row::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -20%;
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.summary-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.summary-cell-dept {
|
|
flex: 2;
|
|
}
|
|
|
|
.dept-icon {
|
|
font-size: 40rpx;
|
|
margin-right: 14rpx;
|
|
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
|
|
}
|
|
|
|
.dept-name {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.summary-cell-count,
|
|
.summary-cell-weight {
|
|
flex: 1;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 16rpx;
|
|
padding: 16rpx 20rpx;
|
|
margin: 0 10rpx;
|
|
backdrop-filter: blur(10rpx);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.summary-value {
|
|
font-size: 36rpx;
|
|
font-weight: 800;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.summary-unit {
|
|
font-size: 20rpx;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* 表格容器 */
|
|
.table-container {
|
|
margin: 0 20rpx 20rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
background-color: #f8f9fa;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
border: 2px solid #d4e6f1;
|
|
}
|
|
|
|
/* 表头 */
|
|
.table-header {
|
|
display: flex;
|
|
background: linear-gradient(90deg, #2980b9 0%, #1a5276 100%);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
font-size: 22rpx;
|
|
letter-spacing: 2rpx;
|
|
padding-top: 4rpx;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 表格行 */
|
|
.table-row {
|
|
display: flex;
|
|
border-bottom: 1px dashed #d0dbe6;
|
|
background-color: #fff;
|
|
transition: all 0.3s ease;
|
|
min-height: 56rpx;
|
|
}
|
|
|
|
.table-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.table-row:hover {
|
|
background-color: #eaf2f8;
|
|
transform: translateX(4rpx);
|
|
}
|
|
|
|
/* 表格单元格 */
|
|
.table-cell {
|
|
padding: 10rpx 8rpx;
|
|
font-size: 22rpx;
|
|
color: #2c3e50;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
word-break: break-all;
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table-cell-type {
|
|
flex: 1.8;
|
|
justify-content: flex-start;
|
|
padding-left: 12rpx;
|
|
min-width: 120rpx;
|
|
}
|
|
|
|
.table-cell-count {
|
|
flex: 0.7;
|
|
color: #2980b9;
|
|
font-weight: 600;
|
|
min-width: 60rpx;
|
|
}
|
|
|
|
.table-cell-weight {
|
|
flex: 0.7;
|
|
color: #c0392b;
|
|
font-weight: 600;
|
|
min-width: 60rpx;
|
|
}
|
|
|
|
.table-cell-hand {
|
|
flex: 1.2;
|
|
color: #666;
|
|
font-weight: 500;
|
|
font-size: 20rpx;
|
|
min-width: 90rpx;
|
|
}
|
|
|
|
.table-cell-action {
|
|
flex: 0.8;
|
|
min-width: 70rpx;
|
|
}
|
|
|
|
/* 类型图标 */
|
|
.type-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 14rpx;
|
|
border-radius: 8rpx;
|
|
padding: 4rpx;
|
|
background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
|
|
}
|
|
|
|
/* 签名按钮 */
|
|
.sign-btn {
|
|
background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 24rpx;
|
|
padding: 16rpx 40rpx;
|
|
font-size: 26rpx;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
box-shadow: 0 4rpx 16rpx rgba(41, 128, 185, 0.5);
|
|
transition: all 0.3s ease;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
|
|
.sign-btn::after {
|
|
border: none;
|
|
}
|
|
|
|
.sign-btn:active {
|
|
transform: scale(0.92);
|
|
box-shadow: 0 2rpx 10rpx rgba(41, 128, 185, 0.4);
|
|
}
|
|
</style>
|