pika_shangjia/pages/machineLook/machineLook.vue

<template>
	<view style="overflow: hidden;">
		<view class="top-box">
			<view class="top-title ddflex">
				<view :style="'height: '+ systems.navigationHeight+'rpx;padding-top:' + systems.ktxStatusHeight + 'rpx;'" class="ddflex" @click="goback">
					<image style="width: 48rpx;height: 48rpx;margin: auto;margin-right: 20rpx;" src="../../static/pages/images/back.png"></image>
				</view>
				<view v-if="!storeId&&actMerchant" @click="showPop=true" class="ddflex fflex" :style="'height: '+ systems.navigationHeight + 'rpx;padding-top:' + systems.ktxStatusHeight + 'rpx;'+'line-height: '+ systems.navigationHeight + 'rpx;'">
					<view>{{actMerchant.name}}</view>
					<image class="dow-ssicon" src="../../static/pages/images/dow-ssicon.png"></image>
				</view>
				<view v-else :style="'height: '+ systems.navigationHeight + 'rpx;padding-top:' + systems.ktxStatusHeight + 'rpx;'+'line-height: '+ systems.navigationHeight + 'rpx;'">设备</view>
			</view>
			<view class="tab-box ddflex">
				<view class="fflex ddflex">
					<view :class="'tab-item fflex '+(queryType==''?'tab-item-active':'')" @click="queryTypeChange(-1)">
						<view>全部</view>
						<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
					</view>
					<view :class="'tab-item fflex '+(queryType==2?'tab-item-active':'')" @click="queryTypeChange(2)">
						<view>未租</view>
						<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
					</view>
					<view :class="'tab-item fflex '+(queryType==1?'tab-item-active':'')" @click="queryTypeChange(1)">
						<view>已租</view>
						<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
					</view>
				</view>
				<view class="ddflex">
					<image class="saoma" src="../../static/pages/images/saoma.png" @click="saomaFn()"></image>
					<image class="sousuo" src="../../static/pages/images/search.png" @click="jumpUrl('/machineAndCell/cellSearch/cellSearch?storeId='+actMerchant.id+'&type='+queryType)"></image>
				</view>
			</view>
		</view>
		
		<view :style="'height: '+ (systems.navigationHeight+systems.ktxStatusHeight+106) + 'rpx;'"></view>
		
		<view class="ddflex state-box">
			<view class="state-item">
				<view class="ddflex">
					<view class="icon"></view>
					<view class="state-label">租赁中</view>
				</view>
				<view class="ddflex state-data">
					<view>{{count.leaseCount?count.leaseCount:0}}</view>
					<view>{{getP(1)}}%</view>
				</view>
			</view>
			<view class="state-item">
				<view class="ddflex">
					<view class="icon" style="background: #0FCB27;"></view>
					<view class="state-label">空闲</view>
				</view>
				<view class="ddflex fflex state-data">
					<view>{{count.noLeaseCount?count.noLeaseCount:0}}</view>
					<view>{{getP(2)}}%</view>
				</view>
			</view>
		</view>
		
		<!-- 电池 -->
		<view>
			<view class="cell-box" v-for="item,index in groupList">
				<view class="ddflex">
					<view style="margin-right: 35rpx;">
						<cell :width="99" :height="197" :soc="item.leaseStatus==1?50:100" :showsoc="false"></cell>
					</view>
					<view class="cell-info fflex">
						<view class="ddflex">
							<view class="cell-title">{{item.model}}</view>
							<view class="cell-state" :style="item.leaseStatus==1?'':'background-color: #0FCB27;'">{{item.leaseStatus==1?'已租':'空闲'}}</view>
						</view>
						<view class="cell-info  ddflex">
							<view>电池Id：</view>
							<view>{{item.batteryId}}</view>
						</view>
						<view class="cell-info  ddflex">
							<view>设备编号：</view>
							<view>{{item.number}}</view>
						</view>
						<view class="cell-info ddflex">
							<view>门店：</view>
							<view>{{item.storeName}}</view>
						</view>
						<view class="cell-info ddflex">
							<view>到期时间：</view>
							<view>{{item.blockDate}}</view>
						</view>
					</view>
				</view>
				<view class="cell-option ddflex">
					<view class="fflex" @click="jumpUrl('/machineAndCell/map/map?id='+item.batteryId)">定位</view>
					<view class="fflex" @click="jumpUrl('/machineAndCell/BMS/BMS?id='+item.batteryId)">BMS</view>
					<view class="fflex" @click="jumpUrl('/machineAndCell/cellDetail/cellDetail?id='+item.batteryId)">详情</view>
				</view>
			</view>
		</view>
		
		<view v-if="groupList.length==0">
			<view class="nodata">
				<image :src="picUrlss+'empty.png'"></image>
				<text>暂无电池~</text>
			</view>
		</view>
		
		<left-pop v-if="showPop" :showPop="showPop" :btnColor="'#11BB8B'" :showBtn='false' title="解除提醒" width="460rpx"
			@closePop="closePop()" @popSubmit="popSubmit()">
			<view class="" style="height: 100%;flex-direction: column;display: flex;">
				<view @click="closePop()" class="pop-title ddflex" :style="'height: '+ systems.navigationHeight + 'rpx;padding-top:' + systems.ktxStatusHeight + 'rpx;'+'line-height: '+ systems.navigationHeight + 'rpx;'">
					<view>切换门店</view>
					<image class="change-ssicon" src="../../static/pages/images/change.png"></image>
				</view>
				<scroll-view :scroll-y="true" @scrolltolower="loadLeftData" class="pop-content fflex">
					<view :class="'pop-content-item '+(actMerchant.id==item.id?'pop-content-active':'')" v-for="(item,index) in merchantList" @click="changePop(item)">
						<view class="pop-content-name">{{item.name}}</view>
						<image class="pop-content-icon" src=""></image>
					</view>
				</scroll-view>
			</view>
		</left-pop>

	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import cell from "../../components/cell/index";
	import leftPop from "../../components/left-pop/index";

	export default {
		components: {
			cell,
			leftPop
		},
		props: {},
		data() {
			return {
				picUrlss: req.public.picUrls,
				systems: {},
				isTop:0,
				isUpdate: false,
				
				userInfo:{},
				
				showPop: false,
				tempData: null,
				
				groupList: [],
				page: 1,
				limit: 10,
				searchValue:'',
				isQuerying:false,//正在查询数据
				
				queryType:'',
				
				merchantList: [],
				merchantPage: 1,
				merchantLimit: 10,
				
				actMerchant:null,//当前门店
				
				merchantId:null,
				storeId:null,
				
				count:{}
			}
		},
		onLoad(options) {
			this.merchantId = options.merchantId
			this.storeId = options.storeId
			// 判断当前登录用户身份
			if(req.isLogins(true)){
				
				if(!this.storeId){
					this.getMerchantList()
				}else{
					this.actMerchant={
						id:this.storeId
					}
					this.getMachineList()
					this.getTopNum()
				}
			}else{
				this.getMachineList()
			}
		},
		onShow() {
			this.setData({
				isUpdate: !this.isUpdate
			}); 
		},
		onReachBottom() {
			this.getMachineList(true)
		},
		methods: {
			goback: function() {
				var pages = getCurrentPages();
				if(pages.length==1){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					wx.navigateBack({
						delta: pages.length - 2
					})
				}
			},
			getP(type){
				let p = 0
				console.log('111')
				if(type==1){
					if(this.count.leaseCount == 0 || this.count.leaseCount == undefined){}
					else{
						return (this.count.leaseCount/(this.count.leaseCount+(this.count.noLeaseCount?this.count.noLeaseCount:0))).toFixed(4)*100
					}
				}
				if(type==2){
					if(this.count.noLeaseCount == 0 || this.count.noLeaseCount == undefined){}
					else{
						return (this.count.noLeaseCount/(this.count.leaseCount+(this.count.noLeaseCount?this.count.noLeaseCount:0))).toFixed(4)*100
					}
				}
				return p*100
			},
			jumpUrl(url){
				if(req.isLogins(true)){
					uni.navigateTo({
						url:url
					})
				}
			},
			queryTypeChange(val) {
				if (this.queryType == val) return false
				this.queryType = val
				this.queryType = val==-1?'':val
				this.getMachineList()
			},
			// 弹窗弹出
			openPop(item) {
				this.tempData = JSON.parse(JSON.stringify(item))
				this.showPop = true
			},
			closePop(){
				this.showPop = false
			},
			changePop(item){
				this.actMerchant = item
				this.closePop()
				this.getMachineList()
			},
			// 电池数量
			getTopNum(){
				console.log('getTopNum')
				req.getRequest(
					'/admin/v2/battery/count',
					{storeId:this.actMerchant.id},
					data => {
						this.count = data
					}
				)
			},
			// 获取电池列表
			getMachineList(isPage){
				if(!this.actMerchant||!this.actMerchant.id) return
				if(this.isQuerying) return
				else this.isQuerying = true
				if (!isPage) {
					this.page = 1
				}
				let queryParams = {
					page: this.page,
					limit: this.limit,
				}
				if(this.searchValue){
					queryParams.number=this.searchValue
				}
				if(this.queryType){
					queryParams.type = this.queryType
				}
				queryParams.storeId = this.actMerchant.id
				req.getRequest(
					'/admin/v2/battery/page',
					queryParams,
					data => {
						if (data != null && data.list.length > 0) {
							if (!isPage) {
								this.groupList = data.list
							} else {
								this.groupList = this.groupList.concat(data.list)
							}
							this.page++
						} else {
							if (!isPage)
								this.groupList = data.list
							else {}
						}
						uni.hideLoading()
						this.isQuerying = false
					}
				)
			},
			loadLeftData(res){
				this.getMerchantList(true)
			},
			getMerchantList(isPage){
				if (!isPage) {
					this.merchantPage = 1
				}
				let queryParams = {
					page: this.merchantPage,
					limit: this.merchantLimit,
				}
				queryParams.merchantId = this.merchantId?this.merchantId:req.getStorage('userInfo').merchantId?req.getStorage('userInfo').merchantId:null
				req.getRequest(
					'/admin/v2/store/page',
					queryParams,
					data => {
						if (data != null && data.list.length > 0) {
							if (!isPage) {
								this.merchantList = data.list
							} else {
								this.merchantList = this.merchantList.concat(data.list)
							}
							this.merchantPage++
						} else {
							if (!isPage)
								this.merchantList = data.list
							else {}
						}
						if(!isPage){
							if(this.actMerchant){
								
							}else{
								this.actMerchant = this.merchantList[0]
							}
							this.getMachineList()
						}
					}
				)
			},
			toLocation(item) {
				let plugin = requirePlugin('routePlan');
				let key = req.public.mapLBSKEY; //使用在腾讯位置服务申请的key
				let referer = '皮小店商家端'; //调用插件的app的名称
				// console.log("名称====" + referer);
				let endPoint = JSON.stringify({
					//终点
					'name': item.devName,
					'latitude': item.latitude,
					'longitude':item.longitude
				});
				uni.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				});
			},
			searchFn(){
				this.getMachineList()
			},
			saomaFn(){
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: false,
					success: (res) =>{
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						// did设备id
						this.jumpUrl('/machineAndCell/cellSearch/cellSearch?storeId='+this.actMerchant.id+'&searchValue='+res.result+'&type='+this.queryType)
					}
				});
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

<style>
	@import "./machineLook.css";
</style>