ParkApp/pages/agency/comps/data-service.vue

<template>
	<view class="">
		<!-- 园区数据统计 -->
		<view class="">
			<view class="title">
				<image  src="../../../static/icon/tag1.png" mode=""></image>
				<text >园区数据统计</text>
			</view>
			<view class="data-statistics" v-if="loading">
				<view class="item"  v-for="(item,index) in agencyStatistical" :key="index">
					<view class="data">
						<text>{{item.num}}</text>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
			<view v-else class="flex justify-center align-center padding-50">
				<u-loading mode="flower" size="150"></u-loading>
			</view>
		</view>
		
		<!-- 分割线 -->
		<view class="" style="background-color: #F1F1F1;height: 20rpx;"></view>
		
		
		<!-- 园区当日动态  begin-->
		<!-- <view class="title">
			<image  src="../../../static/icon/tag1.png" mode=""></image>
			<text >园区当日动态</text>
		</view>
		<view class="desc">
			<view class="flex">
				<view class="bg-green progress"></view>
				<text class="padding-left-10">内部（人）</text>
			</view>
		</view>
		<view class="desc">
			<view class="flex">
				<view class="bg-red progress"></view>
				<text class="padding-left-10">外部（人）</text>
			</view>
		</view>
		
		<view class="today-statistics margin-top-20">
			<view  style="width: 30%;margin-top: 5rpx;">
				<text >驶入车辆：</text>
			</view>
			<view  class="cu-progress radius striped active margin-top-10">
				<view class="bg-green" :style="[{ width:loading?todayData.enterCarOfInsidePercen+'%':''}]">{{todayData.enterCarOfInside}}</view>
				<view v-if="todayData.enterCarOfOutside!=0"  class="bg-red" :style="[{ width:loading?todayData.enterCarOfOutsidePercen+'%':''}]">{{todayData.enterCarOfOutside}}</view>
			</view>
		</view>
		<view class="today-statistics">
			<view  style="width: 30%;margin-top: 5rpx;">
				<text >驶出车辆：</text>
			</view>
			<view  class="cu-progress radius striped active margin-top-10">
				<view class="bg-green" :style="[{ width:loading?todayData.departCarOfInsidePercen+'%':''}]">{{todayData.departCarOfInside}}</view>
				<view v-if="todayData.departCarOfOutside!=0"  class="bg-red" :style="[{ width:loading?todayData.departCarOfOutsidePercen+'%':''}]">{{todayData.departCarOfOutside}}</view>
			</view>
		</view>
		<view class="today-statistics">
			<view  style="width: 30%;margin-top: 5rpx;">
				<text >人员统计：</text>
			</view>
			<view  class="cu-progress radius striped active margin-top-10">
				<view class="bg-green" :style="[{ width:loading?'100%':''}]">{{todayData.peopleNum}}</view>
			</view>
		</view>
		<pie :pieData="pieData" v-if="!$isEmpty(pieData)"></pie> -->
		<!-- 园区当日动态  begin-->
		
		<!-- 分割线 -->
		<!-- <view class="" style="background-color: #F1F1F1;height: 20rpx;"></view> -->
		<view class="title">
			<image  src="../../../static/icon/tag1.png" mode=""></image>
			<text >近10天用电量</text>
		</view>
		<line :lineJson="lineJson" v-if="!$isEmpty(lineJson)" ></line>
		
		<!-- 分割线 -->
		<view class="" style="background-color: #F1F1F1;height: 20rpx;"></view>
		
		<view class="title">
			<image  src="../../../static/icon/tag1.png" mode=""></image>
			<text >人员进出记录</text>
		</view>
		<in-out-records></in-out-records>
		
		
		
	</view>
</template>
<script>
import pie from "./canvas/pie.vue"
import inOutRecords from "./canvas/in-out-records.vue"
import line from "./canvas/Line.vue"
var that;
export default {
	components:{
		pie,inOutRecords,line
	},
	data() {
		return {
			//园区
			agencyId:'',
			tenantId:'',
			
			loading:false,
			
			//园区数据统计
			agencyStatistical:[],
			//园区当日动态
			todayData:{},
			
			lineJson:{},
			pieData:{}
		};
	},
	created() {
		that = this;
		this.agencyId=this.$cache.get('agencyId')
		this.tenantId=this.$cache.get('agencyTenantId')
		//园区数据统计
		this.fetchAgencyData()
		this.fetchTodayData()
		this.fetchElectricMeter()
		
		
		setTimeout(function() {
			that.loading = true
		}, 500)
	},
	methods: {
		async fetchElectricMeter(){
			let aelectricMeterStaticgencyId=this.$cache.get('agencyId')
			let res=await this.$api.statistical.electricMeterStatic({agencyId:'1338406098847293442'})
			this.lineJson= {
			   "categories": res.data.dates.slice(0,10),
				series: [{
					name: '电表用量(Kwh)',
					data: res.data.values.slice(0,10),
					color: '#5064eb'
				}]
			}
		},
		// 园区数据统计
		fetchAgencyData(){
			this.$api.statistical.agencyStatistical({id:this.agencyId}).then(res=>{
				this.agencyStatistical=[
					{
						 title:'园区分区',
						 num:res.residentials.length
					},
					{
						 title:'楼宇总数',
						 num:res.buildingCount
					},
					{
						 title:'企业总数',
						 num:res.enterpriseCount
					},
					{
						 title:'员工总数',
						 num:res.staffCount
					},
					{
						 title:'正常设备',
						 num:res.safetyDeviceCount
					},
					{
						 title:'告警总数',
						 num:res.warningDeviceCount
					},
				]
			})
		},
		//今日动态
		fetchTodayData(){
			let params={
				agencyId:this.agencyId,
				tenantId:this.tenantId
			}
			this.$api.statistical.todayData(params).then(res=>{
				this.todayData=res.data
				
				//驶入车辆总数
				let enterTotal=this.todayData.enterCarOfInside+this.todayData.enterCarOfOutside
				//内部驶入车辆百分比
				this.todayData.enterCarOfInsidePercen=this.$util.keepTwoDecimalFull(this.todayData.enterCarOfInside/enterTotal)*100
				//外部驶入车辆百分比
				this.todayData.enterCarOfOutsidePercen=100-this.todayData.enterCarOfInsidePercen
				
				//驶出车辆总数
				let departTotal=this.todayData.departCarOfOutside+this.todayData.departCarOfInside
				//内部驶出车辆百分比
				this.todayData.departCarOfInsidePercen=this.$util.keepTwoDecimalFull(this.todayData.departCarOfInside/departTotal)*100
				//外部驶出车辆百分比
				this.todayData.departCarOfOutsidePercen=100-this.todayData.departCarOfInsidePercen

				//内部与外部人车辆进出的比例
				
				let insideTotal=this.todayData.departCarOfInside+this.todayData.enterCarOfInside
				let outsideTotal=this.todayData.departCarOfOutside+this.todayData.enterCarOfOutside
				
				let carTotal=this.todayData.departCarOfInside+this.todayData.departCarOfOutside+
							 this.todayData.enterCarOfInside+this.todayData.enterCarOfOutside
							 
				this.pieData={
					insideTotal,
					outsideTotal,
					carTotal,
					peopleNum:this.todayData.peopleNum
				}
				console.log(this.pieData);
			})
		},
	}
};
</script>

<style lang="scss">
	.bg-red{
		background-color: #d10000;
		color: #FFFFFF;
	}
	
	.bg-green{
		background-color: #11914d;
		color: #FFFFFF;
	}
	
	//描述
	.desc{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding:0 30rpx 0 50rpx;
		
		.progress{
			margin-top: 15rpx;
			margin-right: 10rpx;
			width: 40rpx;
			height: 10rpx;
		}
	}
	
	//当日统计
	.today-statistics{
		padding: 20rpx 40rpx;
		display: flex;
	}
	
	
	//描述
	.title{
		padding: 30rpx;
		display: flex;
		
		image{
			width: 45rpx;
			height: 45rpx;
			display: block;
			padding-top: 10rpx;
			padding-right: 10rpx;
		}
		
		text{
			font-size: 36rpx;
			font-weight: 800;
		}
	}
	
	
	
	//园区数据统计
	
	.data-statistics{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		.item{
			box-shadow: 10rpx 10rpx 10rpx #d1d1d1;
			width: 28%;
			height: 140rpx;
			margin: 20rpx 15rpx;
			background-image: linear-gradient(to top right,#55aaff,#4759d0);
			border-radius: 10rpx;
			color: #FFFFFF;
			
			.data{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 28rpx;
				height: 100%;
				
				text:first-child{
					margin-bottom: 10rpx;
					font-size: 45rpx;
				}
			}
		}
		.item:hover{
			box-shadow: 0rpx 0rpx 0rpx #d1d1d1;
			background-color: $base-color;
		}
		
		.item:active {
			background-image: linear-gradient(to top right,#55aaff,#4759d0);
			box-shadow: 10rpx 10rpx 10rpx #d1d1d1;
			transform: translateY(4px);
		}
	}
	
</style>