<template>
	<view class="">
		<view class="padding-bottom-50">
			<view class="title">
				<image  src="../../../static/icon/tag1.png" mode=""></image>
				<text >消防数据统计</text>
			</view>
			<view class="data-statistics">
				<view class="item">
					<view class="data" @click="jump('/pages/index/fire/list/list?fireType=0')">
						<text>智能烟感</text>
						<text>正常：{{detailData.smokeNormal}}</text>
						<text>异常：{{detailData.smokeException}}</text>
					</view>
				</view>
				<view class="item">
					<view class="data" @click="jump('/pages/index/fire/list/list?fireType=1')">
						<text>智能气感</text>
						<text>正常：{{detailData.gasNormal}}</text>
						<text>异常：{{detailData.gasException}}</text>
					</view>
				</view>
				<view class="item" @click="jump('/pages/index/fire/list/list?fireType=2')">
					<view class="data">
						<text>智能消防</text>
						<text>正常：{{detailData.hydrantNormal}}</text>
						<text>异常：{{detailData.hydrantException}}</text>
					</view>
				</view>
			</view>
			<gauge :gaugeData="gaugeData" v-if="!$isEmpty(gaugeData)"></gauge>
			<view class="text-center">
				事件总数
				<text class="text-red text-bold padding-left-10">{{total}}</text>
			</view>
		</view>
	</view>
</template>

<script>
import gauge from "./canvas/gauge.vue"
import curve from "./canvas/curve.vue"
import line from "./canvas/Line.vue"
var that;
export default {
	components:{
		gauge,curve,line
	},
	data() {
		return {
			detailData:{},
			gaugeData:{},
			total:'',
			gaugeData:{}
		};
	},
	created() {
		that = this;
		this.fetchData()
	},
	methods: {
		async fetchData(){
			this.$api.statistical.getGateStatic().then(res=>{
				this.detailData=res.data
			})
			let res=await this.$api.statistical.getDeviceJobStaticByApp()
			this.total=res.data.deviceJobAmount
			let resolvedAmount=res.data.resolvedAmount
			let resolvingAmount=res.data.resolvingAmount
			let resolvedPercen=this.$util.keepTwoDecimalFull(resolvedAmount/this.total)
			this.gaugeData={
				categories: [{
					value: resolvedAmount,
					color: '#2fc25b'
				}, {
					value: resolvingAmount,
					color: '#f04864'
				}],
				series: [{
					name: '处理率',
					data: resolvedPercen,
					color: '#5064eb'
				}]
			}
		},
		jump(url){
			if (!this.$isEmpty(url)) {
				uni.navigateTo({
					url
				})
			}
		}
	}
};
</script>

<style lang="scss">
	//描述
	.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: center;
		.item{
			box-shadow: 10rpx 10rpx 10rpx #d1d1d1;
			width: 30%;
			height: 230rpx;
			margin: 20rpx 10rpx;
			background-image: linear-gradient(to top right,#55aaff,#4759d0);
			background-color: $base-color;
			border-radius: 10rpx;
			color: #FFFFFF;
			
			.data{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 28rpx;
				height: 100%;
				
				text{
					padding-bottom: 10rpx;
				}
				
				text:first-child{
					margin-bottom: 15rpx;
					font-size: 36rpx;
				}
				text:nth-child(2){
					color: #02f8f8;
				}
				text:nth-child(3){
					color: #ff0a4b;
				}
			
			}
		}
		.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>
