336 lines
7.2 KiB
Vue
336 lines
7.2 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 class="search-container">
|
|
<view class="search-box">
|
|
<text class="search-icon">🔍</text>
|
|
<input
|
|
class="search-input"
|
|
v-model="searchKeyword"
|
|
placeholder="请输入科室名称"
|
|
@input="onSearchInput"
|
|
/>
|
|
<text v-if="searchKeyword" class="clear-icon" @click="clearSearch">✕</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空数据提示 -->
|
|
<view v-if="!filteredData || filteredData.length === 0" class="empty-container">
|
|
<text class="empty-icon">📭</text>
|
|
<text class="empty-text">{{searchKeyword ? '未找到匹配的科室' : '本日医废数据为空'}}</text>
|
|
</view>
|
|
|
|
<!-- 数据展示 -->
|
|
<view v-else class="data-wrapper" v-for="(value,index) in filteredData" :key="index">
|
|
<!-- 科室汇总行 -->
|
|
<view class="dept-summary-row">
|
|
<view class="summary-cell summary-cell-dept">
|
|
<text class="dept-icon">🏥</text>
|
|
<text class="dept-name">{{value.department}}</text>
|
|
</view>
|
|
<view class="summary-cell summary-cell-count">
|
|
<text class="summary-value">{{value.departmentCount}}</text>
|
|
<text class="summary-unit">袋</text>
|
|
</view>
|
|
<view class="summary-cell summary-cell-weight">
|
|
<text class="summary-value">{{value.departmentWeight}}</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>
|
|
<view class="table-row" v-for="(val,ind) in value.content" :key="ind">
|
|
<view class="table-cell table-cell-type">
|
|
<img :src="val.image" class="type-icon">
|
|
<text>{{val.type}}</text>
|
|
</view>
|
|
<view class="table-cell table-cell-count">{{val.totalCount}}袋</view>
|
|
<view class="table-cell table-cell-weight">{{val.totalWeight}}kg</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuBorder: false,
|
|
menuCard: false,
|
|
menuArrow: true,
|
|
itemShow: true,
|
|
hospital: '',
|
|
sortHospital: '',
|
|
department: '',
|
|
name: '',
|
|
duty: '',
|
|
stockBasisInfo: [],
|
|
stockDetailsInfo: [],
|
|
searchKeyword: ''
|
|
}
|
|
},
|
|
computed: {
|
|
// 过滤后的数据
|
|
filteredData() {
|
|
if (!this.searchKeyword) {
|
|
return this.stockDetailsInfo
|
|
}
|
|
return this.stockDetailsInfo.filter(item =>
|
|
item.department && item.department.includes(this.searchKeyword)
|
|
)
|
|
}
|
|
},
|
|
mounted(){
|
|
// 获取全局变量中的数据
|
|
this.hospital = getApp().globalData.hospital
|
|
this.sortHospital = getApp().globalData.sortHospital
|
|
this.department = getApp().globalData.department
|
|
this.name = getApp().globalData.name
|
|
this.duty = getApp().globalData.duty
|
|
this.getStockBasisInfo();
|
|
this.getStockDetailsInfo();
|
|
},
|
|
methods: {
|
|
onListOne() {
|
|
if (this.itemShow === true) {
|
|
this.itemShow = false
|
|
} else {
|
|
this.itemShow = true
|
|
}
|
|
},
|
|
// 搜索输入事件
|
|
onSearchInput() {
|
|
// 通过计算属性自动过滤
|
|
},
|
|
// 清除搜索
|
|
clearSearch() {
|
|
this.searchKeyword = ''
|
|
},
|
|
// 获取库存的基本信息
|
|
getStockBasisInfo(){
|
|
let that = this;
|
|
uni.request({
|
|
url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getStockBasisInfo',
|
|
data: {hospital: that.hospital, sortHospital: that.sortHospital, department: that.department, duty: that.duty},
|
|
header: {
|
|
'Content-type': 'application/json'
|
|
},
|
|
success: function(res){
|
|
that.stockBasisInfo = res.data.data
|
|
},
|
|
fail: () => {
|
|
console.info('小程序域名不正确，请检查域名的正确性')
|
|
}
|
|
})
|
|
},
|
|
// 获取医废明细数据
|
|
getStockDetailsInfo(){
|
|
let that = this;
|
|
uni.request({
|
|
url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getStockDetailsInfo',
|
|
data: {hospital: that.hospital, sortHospital: that.sortHospital, department: that.department, duty: that.duty},
|
|
header: {
|
|
'Content-type': 'applicaation/json'
|
|
},
|
|
success: function(res){
|
|
that.stockDetailsInfo = res.data.data
|
|
},
|
|
fail: () => {
|
|
console.info('小程序域名不正确，请检查域名的正确性')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.page {
|
|
width: 100vw;
|
|
height: 100Vh;
|
|
}
|
|
|
|
/* 搜索容器 */
|
|
.search-container {
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 30rpx;
|
|
background-color: #f5f5f5;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.search-icon {
|
|
font-size: 32rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.clear-icon {
|
|
font-size: 32rpx;
|
|
color: #999;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.show {
|
|
display: block;
|
|
}
|
|
|
|
.no-show {
|
|
display: none;
|
|
}
|
|
|
|
/* 空数据容器 */
|
|
.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: 20rpx;
|
|
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
|
|
border-radius: 12rpx 12rpx 0 0;
|
|
box-shadow: 0 4rpx 20rpx rgba(74, 144, 226, 0.3);
|
|
}
|
|
|
|
.summary-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.summary-cell-dept {
|
|
flex: 2;
|
|
}
|
|
|
|
.dept-icon {
|
|
font-size: 36rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.dept-name {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.summary-cell-count,
|
|
.summary-cell-weight {
|
|
flex: 1;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.summary-value {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.summary-unit {
|
|
font-size: 22rpx;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* 表格容器 */
|
|
.table-container {
|
|
margin: 0 20rpx 20rpx 20rpx;
|
|
border-radius: 0 0 12rpx 12rpx;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* 表头 */
|
|
.table-header {
|
|
display: flex;
|
|
background: linear-gradient(90deg, #4a90e2 0%, #357abd 100%);
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 表格行 */
|
|
.table-row {
|
|
display: flex;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.table-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 表格单元格 */
|
|
.table-cell {
|
|
padding: 24rpx 20rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.table-cell-type {
|
|
flex: 2;
|
|
}
|
|
|
|
.table-cell-count {
|
|
flex: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
.table-cell-weight {
|
|
flex: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 类型图标 */
|
|
.type-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 12rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
</style>
|