<template>
<div class="container">
	<div class="title fc-w fz-20">园区安全系统概况</div>
	<div class="border-b mt-3">
		<div class="fz-3 fc-w-1">管理部门响应率</div>
		<div class="piecharts flex ai-c jc-c">
			<div class="pos-r maxWidth">
				<div class="maxWidth progressbarConatiner">
					<div class="maxHeight inProgress" :style="{width: progressNum + '%'}"></div>
				</div>
				<div class="explain" :style="{left: progressNum + '%'}"> {{ progressNum }}% </div>
			</div>
		</div>
	</div>
	<div class="border-b mt-3">
		<div class="fz-3 fc-w-1">执行部门分布情况</div>
		<div class="securityBarChartsContainer mt-2">
			<div class="maxHeight maxWidth" id="securityCharts"></div>
		</div>
	</div>
	<div class="border-b mt-3">
		<div class="fz-3 fc-w-1">消防系统分布情况</div>
		<div class="xfxtfnqk mt-2">
			<div class="flex wrap">
				<div class="li flex" v-for="(item,index) in xfxtfnqkData" :key="index">
					<div class="rate">
						<div class="in maxWidth" :style="{height: item.value/xffbMaxNum*100 + '%'}"></div>
					</div>
					<div class="mt-1">
						<div class="fz-3 fc-w-1 pl-1">{{item.name}}</div>
						<div class="fz-5 fc-w mt-1">
							{{item.value}}
							<span class="fz-4 fc-w">个</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="mt-3">
		<div class="fz-20 fc-w">实时视频监控</div>
		<div class="fz-2 fc-w-o">Real time video surveillance</div>
		<div class="monitorContainer flex jc-sb wrap">
			<div class="li mt-2" v-for="item in 4">
				<img class="img" src="@/assets/images/u516.jpg"/>
			</div>
		</div>
	</div>
</div>
	
</template>

<script>
import {getMethodCommon,postMethodCommon } from '@/api/common'
export default {
	name: 'equipment',
	components: {
		
	},
	data () {
		return {
			progressNum: 80,
			companyCompanyName:[],//办公楼：A座
			// companyPeopleSum:[],
			companyEnforcementSum:[],//执行部门分布数量
			companyProtectionSystemSum:[],//消防系统数量
			xfxtfnqkData:[],
			xffbMaxNum: 200,
		}
	},
	created() {
		
	},
	mounted() {
		this.getParkInfoData()
		this.loadCompanyPeople()
		
	},
	methods:{
		getParkInfoData(){
			getMethodCommon('/ParkInfo/getParkInfo',{id:'afde1d33-bbc9-4b3a-a9d2-4c98c8909b9c'}).then(res =>{
				this.progressNum = res.data.data.responsivity
			})
		},
		loadCompanyPeople(){
			this.xfxtfnqkData = []
			getMethodCommon('/ParkInfo/LoadBuildConstruction').then(res =>{
				let arr = []
				res.data.data.forEach(item => {
					this.companyCompanyName.push(item.name);//办公楼：A座
					this.companyEnforcementSum.push(item.enforcement_sum);//执行部门分布数量
					this.companyProtectionSystemSum.push(item.protection_system_sum);//消防系统数量
					this.xfxtfnqkData.push({
						name: item.name,
						value: item.protection_system_sum
					})
					arr.push(item.protection_system_sum)
					this.xffbMaxNum = Math.max.apply(null, arr)*3/2
				});
				this.getSecurityBarChartData()
			})
		},
		getSecurityBarChartData(){
			let barCharts = this.$echarts.init(document.getElementById('securityCharts'))
			barCharts.setOption({
				color:['#87F7C7'],
				grid: {
				    top: '5%',
				    left: '2%',
				    right: '4%',
				    bottom: '3%',
				    containLabel: true,
				},
				xAxis: {
					type: 'category',
					interval: 1,
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: '#fff',
						fontSize: "12px"
					},
					axisLine: {
						show: false
					},
					boundaryGap: true,
					data: this.companyCompanyName
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						color: '#fff',
					  	fontSize: "12px"
					},
					axisLine: {
					  	lineStyle: {
					  	    type: 'dashed', //solid实线;dashed虚线
					  	    color: 'rgba(255, 255, 255, 0)'
					  	}
					},
					  //坐标轴线样式
					splitLine: {
					      show: true,
					      lineStyle: {
					          type: 'dashed', //solid实线;dashed虚线
					          color: 'rgba(255, 255, 255, 0.3)'
					      }
					},
				},
				series: [
					{
					  name: 'Rainfall',
					  type: 'bar',
					  barWidth: 12,
					  data: this.companyEnforcementSum,
					}
				]
			})
		}
	}
}
</script>

<style scoped>
.container{
	width: 380px;
	padding-left: 15px;
	animation: myfirst 0.5s;
    -webkit-animation: myfirst 0.5s;
}
@keyframes myfirst
{
    from {margin-left: -380px;}
    to {margin-left: 0;}
}
.piecharts{
	height: 65px;
}
.progressbarConatiner{
	height: 15px;
	border: 1px solid rgba(255, 196, 0, 1);
	background-color: rgba(255, 199, 0, 0.149019607843137);
}
.progressbarConatiner .inProgress{
	background: linear-gradient(
		90deg, rgba(255, 102, 0, 1) 0%, rgba(255, 102, 0, 1) 0%, 
		rgba(255, 204, 0, 1) 100%, rgba(255, 204, 0, 1) 100%);
	background:-webkit-linear-gradient(
		0deg, rgba(255, 102, 0, 1) 0%, rgba(255, 102, 0, 1) 0%, 
		rgba(255, 204, 0, 1) 100%, rgba(255, 204, 0, 1) 100%);
	background: -moz-linear-gradient(
		90deg, rgba(255, 102, 0, 1) 0%, rgba(255, 102, 0, 1) 0%, 
		rgba(255, 204, 0, 1) 100%, rgba(255, 204, 0, 1) 100%);
}
.explain{
	width: 56px;
	height: 39px;
	margin-left: -25px;
	line-height: 30px;
	font-size: 18px;
	text-align: center;
	position: absolute;
	top: -45px;
	color: #FFC400;
	background-image: url(../../assets/images/u502.svg);
	background-repeat: no-repeat;
}
.securityBarChartsContainer{
	height: 225px;
}
.xfxtfnqk{
	height: 195px;
}
.xfxtfnqk .li{
	width: 33%;
	height: 95px;
}
.xfxtfnqk .li .rate{
	width: 10px;
	height: 80px;
	border: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(255,255,255,0.1);
	border-radius: 10px;
	position: relative;
}
.xfxtfnqk .li .rate .in{
	background: #2EF6D3;
	border-radius: 10px;
	position: absolute;
	bottom: 0;
}
.monitorContainer .li{
	width: 185px;
	height: 123px;
}


</style>
