consumoption/subpkg/pages/mintir/scrollView/scrollView.vue

<template>
	<view class="listview">
		<view class="listview-all">
			<view class="listview-name">
				数据监测
			</view>
			<view class="listview-seleven">
				<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"></uni-data-select>
			</view>
		</view>
		<view class="listview-table">
			<view class="listview-all-b">
				<view class="listview-table-all-one">
					<view class="listview-table-name">
						总消耗金额(元)
					</view>
					<view class="listview-table-many">
						<span>￥</span>
						{{dataList.sumAmt}}
					</view>
				</view>
				<view class="listview-table-all-two">
					<view class="listview-table-name">
						总消耗数量
					</view>
					<view class="listview-table-many">
						<span style=" visibility: hidden;">￥</span>
						{{dataList.sumCnt}}
					</view>
				</view>
				<view class="boxList"></view>
				<view class="xian"></view>
				<view class="xianList"></view>
			</view>
			<view class="listview-all-b">
				<view class="listview-table-all-three">
					<view class="listview-table-name">
						院内申领次数
					</view>
					<view class="listview-table-many">
						<span style=" visibility: hidden;">￥</span>
						{{dataList.appyCnt}}
					</view>
				</view>
				<view class="listview-table-all-four">
					<view class="listview-table-name">
						院内配送次数
					</view>
					<view class="listview-table-many">
						<span style=" visibility: hidden;">￥</span>
						{{dataList.delvCnt}}
					</view>
				</view>
				<view class="boxList"></view>
				<view class="xian"></view>
				<view class="xianList"></view>
			</view>
			<view class="listview-all-b">
				<view class="listview-table-all-three">
					<view class="listview-table-name">
						集采条目数
					</view>
					<view class="listview-table-many">
						<span style=" visibility: hidden;">￥</span>
						{{dataList.fasCnt}}
					</view>
				</view>
				<view class="listview-table-all-four">
					<view class="listview-table-name">
						非集采条目数
					</view>
					<view class="listview-table-many">
						<span style=" visibility: hidden;">￥</span>
						{{dataList.othCnt}}
					</view>
				</view>
				<view class="boxList"></view>
				<view class="xian"></view>
				<view class="xianList"></view>
			</view>
			<view class="listview-all-b">
				<view class="listview-table-all-three">
					<view class="listview-table-name">
						流水金额
					</view>
					<view class="listview-table-many">
						<span style=" visibility: hidden;">￥</span>
						{{dataListTwo.amt}}
					</view>
				</view>
				<view class="listview-table-all-four">
					<view class="listview-table-name">
						费用量
					</view>
					<view class="listview-table-many">
						<span style=" visibility: hidden;">￥</span>
						{{dataListTwo.delvCnt}}
					</view>
				</view>
			</view>
		</view>
		<view class="spd-section">
            <!-- 耗材SPD -->
            <view class="spd-card spd-card-border">
                <view class="spd-title spd-title-border" style="display:flex;align-items:center;position:relative;">
                    <span style="flex:1;text-align:center;">耗材SPD</span>
                    <span class="spd-date-tip" style="position:absolute;right:0;">{{ new Date().getFullYear() }}.01.01-至今</span>
                </view>
                <view class="spd-row spd-row-hc">
                    <view class="spd-col">
                        <view>遗留耗材</view>
                        <view class="spd-num">¥{{ dataListThree.ylhcAmt == null ? 0 : dataListThree.ylhcAmt }}</view>
                    </view>
                    <view class="spd-vline"></view>
                    <view class="spd-col">
                        <view>医用耗材</view>
                        <view class="spd-num">¥{{ dataListThree.yyhcAmt == null ? 0 : dataListThree.yyhcAmt }}</view>
                    </view>
                    <view class="spd-vline"></view>
                    <view class="spd-col">
                        <view>试剂耗材</view>
                        <view class="spd-num">¥{{ dataListThree.sjhcAmt == null ? 0 : dataListThree.sjhcAmt }}</view>
                    </view>
                    <view class="spd-vline"></view>
                    <view class="spd-col">
                        <view>总务耗材</view>
                        <view class="spd-num">¥{{ dataListThree.zwAmt == null ? 0 : dataListThree.zwAmt }}</view>
                    </view>
                </view>
                <view class="spd-hline"></view>
                <view class="spd-row spd-row-wrap">
                    <view class="spd-col">
                        <view>集采</view>
                        <view class="spd-num-small">¥{{ dataListThree.jcAmt == null ? 0 : dataListThree.jcAmt }}</view>
                    </view>
                    <view class="spd-vline"></view>
                    <view class="spd-col">
                        <view>非集采</view>
                        <view class="spd-num-small">¥{{ dataListThree.fjcAmt == null ? 0 : dataListThree.fjcAmt }}</view>
                    </view>
                </view>
                <view class="spd-hline"></view>
                <view class="spd-row spd-row-bottom">
                    <view class="spd-col">
                        非集采比例：<text class="spd-num-small">{{ dataListThree.fjcbl == null ? 0 : dataListThree.fjcbl }}%</text>
                    </view>
                    <view class="spd-vline"></view>
                    <view class="spd-col">
                        服务费：<text class="spd-num-small">¥{{ dataListThree.fwfAmt == null ? 0 : dataListThree.fwfAmt }}</text>
                    </view>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				dataList: {
					cosmAmt: "", //消耗金额
					cosmCnt: "", //消耗数量
					appyCnt: "", //申领次数
					stooutCnt: "", //院内配送次数
				},
				dataListTwo: {
					delvCnt: "", //费用量
					amt: "", //流水金额
				},
				dataListThree: {
					ylhcAmt: "", //遗留耗材金额
					yyhcAmt: "", //医用耗材金额
					sjhcAmt: "", //试剂耗材金额
					zwAmt: "", //总务耗材金额
					jcAmt: "", //集采金额
					fjcAmt: "", //非集采金额
					fjcbl: "", //非集采比例
					fwfAmt: "", //服务费
				},
				value: 'Y',
				range: [{
						value: 'Y',
						text: "年"
					},
					{
						value: 'M',
						text: "月"
					},
					{
						value: 'D',
						text: "日"
					},
					{
						value: 'W',
						text: "周"
					},
				],
			};
		},
		computed: {
			...mapState(['instData'])
		},
		methods: {
			listData() {
				this.$http('homePage.totalCosm', {
					timeType: this.value
				}, '加载中').then((res) => {
					this.dataList = res.data
				})
				this.$http('homePage.totalAmtAndCnt', {
					timeType: this.value,
					spdId: this.instData.spdId,
				}).then((res) => {
					this.dataListTwo = res.data
				})
				this.$http('homePage.totalFwfAmt', {
					spdId: this.instData.spdId,
				}).then((res) => {
					this.dataListThree = res.data
				})
			},
			change(e) {
				this.value = e;
				this.listData({
					timeType: this.value
				})
			},
		},
		created() {
			this.listData()
		}
	};
</script>

<style scoped lang="scss">
	.listview {

		padding: 30rpx;


		.listview-all {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;
			padding: 20rpx;
			box-sizing: border-box;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			border-width: 4rpx 4rpx 4rpx 4rpx;
			border-style: solid;
			border-color: #90ffe4;
		}

		.listview-name {
			font-size: 35rpx;
			font-weight: bold;
		}

		.listview-table {
			background-color: #fff;
			border-style: solid;
			border-color: #90ffe4;
			border-width: 0 4rpx 4rpx 4rpx;
			border-bottom-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;

			.listview-all-b {
				display: flex;
				justify-content: space-around;
				position: relative;

				.listview-table-all-one,
				.listview-table-all-three {
					width: 300rpx;
					height: 100rpx;
					text-align: left
				}

				.listview-table-all-two,
				.listview-table-all-four {
					width: 300rpx;
					height: 100rpx;
					text-align: right
				}

				.boxList {
					width: 50rpx;
					height: 50rpx;
					background: #fff;
					/* left: 46%; */
					top: 70%;
					position: absolute;
					z-index: 999;
				}

				.xian {
					position: absolute;
					top: 95rpx;
					width: 100%;
					height: 4rpx;
					background-color: #90ffe4;
					border-radius: 10rpx;
				}

				.xianList {
					position: absolute;
					height: 200rpx;
					width: 4rpx;
					background-color: #90ffe4;
					border-radius: 10rpx;
					left: 50%;
				}

			}

			.listview-table-name {
				color: #ccc;
				font-size: 25rpx;
			}

			.listview-table-many {
				color: #000;
				font-size: 30rpx;
				font-weight: bold;

			}
		}

		.spd-section {
			margin-top: 40rpx;
		}
		.spd-card {
			position: relative;
    		padding: 24rpx 16rpx;
			background: #fff;
			margin-bottom: 30rpx;
			padding: 24rpx 16rpx;
			box-shadow: 0 2rpx 8rpx rgba(0,128,128,0.08);
			position: relative;
		}
		.spd-card-border {
			border: 4rpx solid #90ffe4;
			border-radius: 16rpx;
		}
		.spd-title {
			font-size: 35rpx;
			font-weight: bold;
		}
		.spd-row, .spd-row-hc, .spd-row-wrap, .spd-row-bottom {
    margin-top: 24rpx; // 增大间隙
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx; // 增大间隙
    position: relative;
}
.spd-col {
    flex: 1;
    text-align: center;
    font-size: 24rpx;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rpx;
}
.spd-num {
    font-size: 24rpx;
    color: #000;
    font-weight: bold;
    margin-top: 4rpx;
}
.spd-num-small {
    font-size: 24rpx;
    color: #008080;
    font-weight: bold;
    margin-top: 2rpx;
}
.spd-vline {
    width: 4rpx;
    height: 60rpx;
    background-color: #90ffe4;
    border-radius: 2rpx;
    margin: 0 18rpx;
}
.spd-hline {
	margin-left: -16rpx;
	width: calc(100% + 36rpx); 
    border-bottom: 4rpx solid #90ffe4;
    padding-bottom: 20rpx;
}
.spd-card-border {
    border: 4rpx solid #90ffe4;
    border-radius: 16rpx;
}
.spd-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #000;
    text-align: center;
    margin-bottom: 18rpx;
    letter-spacing: 2rpx;
}
.spd-row-wrap, .spd-row-bottom {
    border-bottom: none;
    padding-bottom: 0;
}
.spd-title-border {
	margin-left: -16rpx;
	width: calc(100% + 36rpx); 
    border-bottom: 4rpx solid #90ffe4;
    padding-bottom: 20rpx;
}
}
.spd-date-tip {
    font-size: 22rpx;
    color: #999;
    font-weight: normal;
    margin-right: 12rpx;
	margin-top: 42rpx;
}
</style>