FE-V2-XCX/pages/gasBottle/gasManage/gasManage.vue

<!-- 用气管理 -->
<template>
    <view id="register">
		<view class="register_li">
			<view class="register_li_min" @click="handleClick('stockList')">
				<view>库存列表</view>
				<view></view>
				<img src="@/pages_manage/images/icon_04.png">
			</view>
			<view class="register_li_min" @click="handleClick('earlyWarning')" style="border: none;">
				<view>报警记录</view>
				<view ><i class="sirenNum">{{sirenNum}}</i></view>
				<img src="@/pages_manage/images/icon_04.png">
			</view>
		</view>
		<view v-if="dataList.length>0" class="small_title" @click="handleClick('useRecord')">使用记录<img src="@/pages_manage/images/icon_wdwg_gd.png"></view>
		<view v-if="dataList.length>0" class="register_li2">
			<viwe class="register_li2_min" @tap="goInfo(item)" v-for="(item,index) in dataList" :key="index">
				<view class="register_li2_t">{{item.gasName}}-{{item.levelName}}({{item.sizeName}})</view>
				<view class="register_li2_b" style="border:none">
					<img src="@/pages_manage/images/Version3.0/icon_qpgl_syl.png">
					<view>使用量: {{item.usageAmount==null?'-':item.usageAmount}}Mpa</view>
				</view>
				<view class="register_li2_b2" style="border-bottom: 1rpx solid #f5f5f5;">
					<img src="@/pages_manage/images/Version2.2/icon_wtzg_sj.png">
					<view>使用时间: {{item.usageStartTime==null?'-':item.usageStartTime}} - {{item.usageEndTime==null?'-':item.usageEndTime}}</view>
				</view>
			</viwe>
		</view>
		<view class="btn">
			<view class="btn_l" @click="handleClick('gasEnter')">气瓶入库</view>
			<view class="btn_r" @click="handleClick('QRcode')">使用</view>
		</view>
	</view>
</template>

<script>
    import {useRecordList,airbottleStockFindByBeaconTag,airbottleUsageRecordList,warningNoticeLogGetDisposeCount} from '@/api/index.js'
	import { config } from '@/api/request/config.js'
    export default {
        data() {
            return {
				form:{
					name:'',
				},
				//列表请求参数
				getData:{
				    pageNum:1,
					pageSize:5,
				},
				dataList:[],
				yqCount:null,
				zgCount:null,
				electronicTag:'',
				sirenNum:0,//气瓶预警数量
				gasBottleLevel:uni.getStorageSync('gasBottleLevel'),//  气瓶级别
				gasBottleSpecification:uni.getStorageSync('gasBottleSpecification'), // 气瓶规格
            }
        },
        onLoad(option) {

        },
        onShow(){

        },
		mounted() {
			this.warningNoticeLogGetDisposeCount()
			this.getList();
		},
        methods: {

			handleClick(doType) {
				let _this=this;
				if(doType=='stockList'){//库存列表
					uni.redirectTo({
					    url:'/pages/gasBottle/stockList/stockList'
					});
				}else if(doType=='earlyWarning'){//预警记录
					uni.navigateTo({
					    url:'/pages/earlyWarningManage/earlyWarningList'
					});
				}else if(doType=='gasEnter'){//气瓶入库
					uni.navigateTo({
					    url:'/pages/gasBottle/stockList/storageAdd'
					});
				}if(doType=='useRecord'){//使用记录
					uni.navigateTo({
					    url:'/pages/gasBottle/gasManage/useRecordList'
					});
				}else if(doType=='QRcode'){//使用
					uni.scanCode({
						onlyFromCamera: true,
						success: function (res) {
							_this.getBeaconTag(res.result)
						}
					});

				}


			},
			
			//使用记录跳转详情
			goInfo(d){
				uni.navigateTo({
				    url:'/pages/gasBottle/stockList/useRecordDetail?id='+d.id
				});
			},
			async getBeaconTag(result){
				let _this=this;
				const {data} = await airbottleStockFindByBeaconTag({BeaconTag:result});
				if(data.code==200){
					uni.navigateTo({
					    url:'/pages/gasBottle/gasUse/gasUse?beaconTag='+result
					});
					
				}
			},
			//气瓶预警
			async warningNoticeLogGetDisposeCount(){
				let self = this;
				const {data} = await warningNoticeLogGetDisposeCount();
				if(data.code==200){
					this.sirenNum=data.data;
				}
			},
			//获取使用记录列表
			async getList(){
				let _this = this;
				const {data} = await airbottleUsageRecordList(_this.getData)
				if(data.code==200){
					for(let i=0;i<data.data.records.length;i++){
					  for(let b=0;b<this.gasBottleSpecification.length;b++){
							if(this.gasBottleSpecification[b].dictValue==data.data.records[i].size){
								data.data.records[i].sizeName=this.gasBottleSpecification[b].dictLabel
							}	
					  }
					  for(let t=0;t<this.gasBottleLevel.length;t++){
						if(this.gasBottleLevel[t].dictValue==data.data.records[i].level){
							data.data.records[i].levelName=this.gasBottleLevel[t].dictLabel
						}
					  }
									  
					}
					_this.dataList=data.data.records
				}
			},

        },
		
    }
</script>

<style lang="stylus" scoped>
    #register{
        height:auto;
        width:100%;
        display flex;
        flex-direction column;
		padding-bottom: 220rpx;
		.register_li{
			background #fff;
			border-radius:20rpx;
			margin:20rpx 20rpx 0;
			padding:20rpx 0;
			box-sizing: border-box;
			.register_li_min{
				margin:0 26rpx;
				display flex;
				align-items center;
				border-bottom: 1px solid #F5F5F5;
				view{
					line-height:100rpx;
				}
				view:nth-child(1){
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height:100rpx;
				}
				view:nth-child(2){
					flex:1;
					color: #0183FA;
					text-align: right;
					margin-right: 38rpx;
					.sirenNum{
						height: 40rpx;
						display: inline-block;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #D40000;
						// background: #D40000;
						border-radius: 50%;
						line-height: 40rpx;
						text-align: center;
						
					}
				}
				
				>img{
					width: 12rpx;
					height: 24rpx;
				}
			}
		}
		.small_title{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 100rpx;
			margin: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			>img{
				width: 24rpx;
				height: 24rpx;
			}
		}

		.register_li2{
			background #fff;
			border-radius:20rpx;
			margin:0 20rpx 0;
			padding:0 20rpx;
			box-sizing: border-box;
			.register_li2_min{
				.register_li2_t{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 28rpx;
					margin-top: 28rpx;
				}
				.register_li2_b{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-top: 42rpx;
					padding-bottom: 28rpx;
					border-bottom: 1rpx solid #f5f5f5;
					>img{
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
					>view{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 26rpx;
					}
					>view:nth-of-type(1){
						width: 280rpx;
					}
					>view:nth-child(2){
					}
				}
				.register_li2_b2{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding-bottom: 28rpx;

					>img{
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
					>view{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 26rpx;
					}
					>view:nth-child(1){
						width: 200rpx;
					}
					>view:nth-child(2){
						flex: 1;
					}
				}
			}

		}
		/* 按钮 */
		.btn{
			display: flex;
			position: fixed;
			bottom: 40rpx;
			left: 50rpx;
			.btn_l{
				width: 324rpx;
				height: 100rpx;
				background: #F28E26;
				border-radius: 50rpx 0rpx 0rpx 50rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
			}
			.btn_r{
				width: 324rpx;
				height: 100rpx;
				background: #0183FA;
				border-radius: 0rpx 50rpx 50rpx 0rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
			}
		}
	}
	/deep/.input-value-border{
		display :none !important;
	}
</style>