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: this.agencyId
				})
				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>