diff --git a/http/yskApi/requestAll.js b/http/yskApi/requestAll.js
index 3b9dcd2..5bc9181 100644
--- a/http/yskApi/requestAll.js
+++ b/http/yskApi/requestAll.js
@@ -10,6 +10,13 @@ export function summaryTrade(data) {
 		}
 	})
 }
+export function tbConsInfoFlowcount(data) {
+	return request({
+		url: '/api/tbConsInfoFlow/count',
+		method: 'post',
+		data
+	})
+}
 // 供应商列表
 export function tbShopPurveyorTransact(params) {
 	return request({
@@ -250,6 +257,12 @@ export function getroles() {
 		method: "get"
 	});
 }
+export function tbConsTypes() {
+	return request({
+		url: `/api/tbConsType`,
+		method: "get"
+	});
+}
 export function tbPlussShopStaff(data) {
 	return request({
 		url: `/api/tbPlussShopStaff`,
@@ -264,4 +277,12 @@ export function viewConInfoFlowget(data) {
 		method: 'post',
 		data
 	});
+}
+// 耗材记录
+export function tbConsInfoFlowstock(data) {
+	return request({
+		url: `/api/tbConsInfoFlow/stock`,
+		method: 'post',
+		data
+	});
 }
\ No newline at end of file
diff --git a/pageConsumables/index.vue b/pageConsumables/index.vue
index 9737784..da60782 100644
--- a/pageConsumables/index.vue
+++ b/pageConsumables/index.vue
@@ -328,7 +328,8 @@
 				.df;
 
 				>view {
-					width: 90rpx;
+					// width: 90rpx;
+					padding: 2rpx 10rpx;
 					height: 36rpx;
 					line-height: 36rpx;
 					background: #EBF4FC;
diff --git a/pageConsumables/viewrecords.vue b/pageConsumables/viewrecords.vue
index 4264764..31ef5dc 100644
--- a/pageConsumables/viewrecords.vue
+++ b/pageConsumables/viewrecords.vue
@@ -1,21 +1,97 @@
 <template>
+	<view class="viewrecordsType">
+		<view style="display: flex;align-items: center;" @tap="popPu">
+			筛选时间<up-icon style="transform: rotate(90deg);" name="play-right-fill" size="12"></up-icon>
+		</view>
+		<view @tap="showStatus = !showStatus" style="display: flex;align-items: center;">
+			{{datas.statusTitle}} <up-icon style="transform: rotate(90deg);" name="play-right-fill" size="12"></up-icon>
+		</view>
+
+	</view>
+	<view :style="{height:showStatus?statusHeight:0}" class="tranistion status  overflow-hide">
+		<view @tap="changeNowStatusIndex(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
+			v-for="(item,index) in datas.status" :key="index">
+			<view :class="{'color-main':nowStatusIndex===index}">{{item.conTypeName}}</view>
+			<uni-icons v-if="nowStatusIndex===index" type="checkmarkempty" :color="color.ColorMain"></uni-icons>
+		</view>
+		<view :style="{height: '14px'}"></view>
+	</view>
+	<view class="viewrecordsTop">
+		<view style="padding:32rpx 16rpx;">
+			<view class="">
+				增加数量 <text
+					style="color: #76ACF0;font-weight: bold;">{{datas.countList?datas.countList.addCountNumber:''}}</text>
+			</view>
+			<view class="df viewdf">
+				<view style="font-size: 24rpx;border-right: 1px solid #999; width: 142rpx;text-align: center;">
+					<view style="color: #999999;">
+						入库
+					</view>
+					<view class="">
+						{{datas.countList?datas.countList.stockInNumber:''}}
+					</view>
+				</view>
+				<view style="font-size: 24rpx;width: 178rpx;text-align: center;">
+					<view style="color: #999999;">
+						手动增加
+					</view>
+					<view class="">
+						{{datas.countList?datas.countList.addNumber:''}}
+					</view>
+				</view>
+			</view>
+		</view>
+		<view style="padding:32rpx 16rpx;">
+			<view class="">
+				减少数量 <text
+					style="color: #52BDA4;font-weight: bold;">{{datas.countList?datas.countList.subCountNumber:0}}</text>
+			</view>
+			<view class="df viewdf">
+				<view style="font-size: 24rpx;border-right: 1px solid #999; width: 112rpx;text-align: center;">
+					<view style="color: #999999;">
+						手动减少
+					</view>
+					<view class="">
+						{{datas.countList?datas.countList.subNumber:0}}
+					</view>
+				</view>
+				<view style="font-size: 24rpx;border-right: 1px solid #999; width: 82rpx;text-align: center;">
+					<view style="color: #999999;">
+						出库
+					</view>
+					<view class="">
+						{{datas.countList?datas.countList.stockOutNumber:0}}
+					</view>
+				</view>
+				<view style="font-size: 24rpx;width: 112rpx;text-align: center;">
+					<view style="color: #999999;">
+						商品消耗
+					</view>
+					<view class="">
+						{{datas.countList?datas.countList.saleNumber:0}}
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
 	<ul class="viewrecords">
 		<li v-for="item in datas.list" :key="item.id">
 			<view class="">
 				<view class="">
-					{{item.conName}}
+					{{item.createTime}}
 				</view>
 				<view class="">
-					{{item.createTime}}
+					{{item.operator}} {{item.bizName}}
 				</view>
 			</view>
 			<view class="">
 				<view class="">
-					<view class="">
-						{{item.balance}}
+					<view style="font-size: 24rpx;color: #666666;">
+						库存 {{ inventory(item.balance,item.bizType,item.amount)}} <text
+							:style="{color:item.bizType=='+'?'#1bca72':'red'}"> - {{ item.amount|0 }}</text>
 					</view>
 					<view style="font-size: 24rpx;color: #666666;">
-						现有库存
+						剩余库存 {{item.balance}}
 					</view>
 				</view>
 				<view class="">
@@ -29,55 +105,153 @@
 			</view>
 		</li>
 	</ul>
+	<datePickerview @confirm="datePickerConfirm" ref="datePicker"></datePickerview>
 </template>
 
 <script setup>
 	import {
 		onMounted,
-		reactive
+		reactive,
+		ref,
+		computed,
+		getCurrentInstance
 	} from 'vue';
+	import datePickerview from './components/my-date-pickerview.vue'
+	import color from '@/commons/color.js';
 	import {
-		viewConInfoFlowget
+		tbConsInfoFlowstock,
+		tbConsInfoFlowcount,
+		tbConsTypes
 	} from '@/http/yskApi/requestAll.js';
 	let props = defineProps({
 		item: {
 			type: String
 		}
 	})
+
 	let datas = reactive({
-		list: []
+		list: [],
+		countList: null,
+		// 类型
+		status: [],
+		statusTitle: "类型"
 	})
+	let showStatus = ref(false)
 	onMounted(() => {
 		let items = JSON.parse(props.item)
-		console.log(items,'调试1')
+		// console.log(items, '调试1')
 		getlist()
 	})
-	let getlist = () => {
-		viewConInfoFlowget({
+	const refs = getCurrentInstance()
+	let popPu = () => {
+		refs.ctx.$refs.datePicker.toggle()
+	}
+
+	function datePickerConfirm(e) {
+		getlist("", e.start, e.end)
+	}
+
+	function inventory(a, b, c) {
+		let data = 0
+		if (b == '-') {
+			data = a + c
+		} else {
+			data = a - c
+		}
+		return data
+	}
+	let nowStatusIndex = ref(0)
+
+	function changeNowStatusIndex(i) {
+		nowStatusIndex.value = i
+		showStatus.value = false
+		datas.statusTitle = datas.status[i].conTypeName
+		getlist(datas.status[i].id)
+	}
+	const statusHeight = computed(() => {
+		return 30 * datas.status.length + 14 + 'px'
+	})
+	let getlist = (conTypeId = "", start, end) => {
+		// 列表
+		tbConsInfoFlowstock({
+			page: 0,
+			shopId: uni.getStorageSync("shopId"),
+			size: 30,
+			consId: JSON.parse(props.item).conTypeId,
+			column: "addCountNumber",
+			conTypeId,
+
+
+		}).then(res => {
+			datas.list = res.content
+		})
+		// 顶部数据
+		tbConsInfoFlowcount({
 			page: 0,
 			shopId: uni.getStorageSync("shopId"),
 			size: 30,
 			sort: "createTime,desc",
-			conTypeId:JSON.parse(props.item).conTypeId
+			conTypeId,
+			startTime: start,
+			endTime: end,
 		}).then(res => {
-			datas.list = res.content
+			datas.countList = res
 		})
+
+		// 获取顶部类型/
+		tbConsTypes({
+			page: 0,
+			shopId: uni.getStorageSync("shopId"),
+			size: 100,
+		}).then(res => {
+			datas.status = res.content
+		})
+
 	}
 </script>
 <style>
 	page {
 		background-color: #f9f9f9;
 	}
-	
 </style>
 <style scoped lang="less">
-
 	ul,
 	li {
 		list-style: none;
 		padding: 0;
 	}
 
+	.viewrecordsType {
+		height: 100rpx;
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+	}
+
+	.viewrecordsTop {
+		display: flex;
+		align-items: center;
+		// justify-content: space-between;
+		margin-top: 32rpx;
+		margin-left: 32rpx;
+		border-radius: 12rpx 12rpx 12rpx 12rpx;
+
+		.viewdf {
+			margin-top: 40rpx;
+		}
+
+		>view {
+			background-color: #fff;
+			width: 336rpx;
+			height: 220rpx;
+		}
+
+		>view:last-child {
+			margin-left: 26rpx;
+		}
+	}
+
 	.viewrecords {
 		padding: 0 28rpx;
 
@@ -113,4 +287,19 @@
 			}
 		}
 	}
+
+	.status {
+		margin: 0 32rpx;
+		position: absolute;
+		// top: 100%;
+		left: 0;
+		right: 0;
+		z-index: 10;
+		background-color: #fff;
+	}
+
+	.df {
+		display: flex;
+		align-items: center;
+	}
 </style>
\ No newline at end of file