<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">5G基站投入情况</div>
		<div class="piecharts flex">
			<div class="flex1">
				<div class="flex maxHeight">
					<div class="maxHeight" style="width: 55%;">
						<div id="equipmentPieChatrs1" class="maxWidth maxHeight"></div>
					</div>
					<div class="flex maxHeight column ai-c jc-c" >
						<div class="fz-3 fc-w-1">投入使用</div>
						<span class="fz-5 fc-w">{{trsyNum}}</span>
					</div>
				</div>
			</div>
			<div class="flex1">
				<div class="flex maxHeight">
					<div class="maxHeight" style="width: 55%;">
						<div id="equipmentPieChatrs2" class="maxWidth maxHeight"></div>
					</div>
					<div class="flex maxHeight column ai-c jc-c">
						<div class="fz-3 fc-w-1">计划设置</div>
						<span class="fz-5 fc-w">{{jhszNum}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="border-b mt-3">
		<div class="fz-3 fc-w-1">电力供应情况</div>
		<div class="equipmentLineCharts mt-2">
			<div class="maxHeight maxWidth" id="equipLineCharts"></div>
		</div>
	</div>
	<div class="border-b mt-3">
		<div class="fz-3 fc-w-1">楼宇分布&人流量</div>
		<div class="equipmentBarChartContainer mt-2">
			<div class="maxHeight maxWidth" id="equipBarCharts"></div>
		</div>
	</div>
	<div class="mt-3">
		<div class="fz-3 fc-w-1">学区&居民分布</div>
		<div class="xuequTableContainer mt-1">
			<el-table :data="xuequtableData" style="width: 100%">
			    <el-table-column prop="name" label="名称"> </el-table-column>
			    <el-table-column prop="type" label="类型"> </el-table-column>
			    <el-table-column prop="people_sum" label="人数"> </el-table-column>
				<el-table-column prop="caller_sum" label="访客数量"> </el-table-column>
			  </el-table>
		</div>
		
		
	</div>
</div>
	
</template>

<script>
import {getMethodCommon,postMethodCommon } from '@/api/common'
export default {
	name: 'equipment',
	components: {
		
	},
	data () {
		return {
			trsyNum: 1,
			jhszNum: 1,
			xuequtableData:[
				{ name:'盐湖大道', label: '占道维护', status:'拥堵', value: 0},
				{ name:'汉中路', label: '暂无异常', status:'正常', value: 1},
				{ name:'滨江路', label: '交通事故', status:'拥堵', value: 0},
				{ name:'内部酒店', label: '占道维护', status:'拥堵', value: 0},
				{ name:'沿江大道', label: '暂无异常', status:'正常', value: 1},
				{ name:'学术交流中心', label: '暂无异常', status:'正常', value: 1},
				{ name:'内部酒店', label: '占道维护', status:'拥堵', value: 0},
				{ name:'餐厅路', label: '暂无异常', status:'正常', value: 1},
				{ name:'蒙山路', label: '交通事故', status:'拥堵', value: 0},
			]
		}
	},
	created() {
		
	},
	mounted() {
		this.getJZTU()  //获取5G基站使用情况
		this.getDLGYQK()  //获取电力供应情况
		this.getQYFB()  //获取企业分布&人流量
	},
	methods:{
		getJZTU(){
			getMethodCommon('/ParkInfo/getParkInfo',{id:'afde1d33-bbc9-4b3a-a9d2-4c98c8909b9c'}).then(res =>{
				let data = res.data.data
				this.jhszNum = data.plan_input_num
				this.trsyNum = data.actual_input_num
				
				let trNumRate = Math.round(data.actual_input_num/data.plan_input_num*100)
				let trNumData = [
					{ name: '实际投入数量' , value: trNumRate },
					{ name: '总数' , value: 100-trNumRate }
				]
				let pieCharts1 = this.$echarts.init(document.getElementById('equipmentPieChatrs1'))
				pieCharts1.setOption({
					title: {
						text: trNumRate + '%',
						left: 'center',
						top: 'middle',
						textStyle: {
							color: '#fff', fontSize: 20,
						},
					},
					color:['#87F7C7','#4699AF'],
					series: [
						{
							type: 'pie',
							radius: ['65%', '85%'],
							hoverAnimation:false,
							labelLine: {
								normal: {
									show: false,
								},
							},
							data: trNumData,
						},
					],
				})
				let jhNumRate = Math.round(data.actual_use_num/data.plan_use_num*100)
				let jhNumData = [
					{ name: '实际使用数量' , value: jhNumRate },
					{ name: '总数' , value: 100-jhNumRate }
				]
				let pieCharts2 = this.$echarts.init(document.getElementById('equipmentPieChatrs2'))
				pieCharts2.setOption({
					title: {
						text: jhNumRate + '%',
						left: 'center',
						top: 'middle',
						textStyle: {
							color: '#fff', fontSize: 20,
						},
					},
					color:['#66BBF9','#94C9E1'],
					series: [
						{
							type: 'pie',
							radius: ['65%', '85%'],
							hoverAnimation:false,
							labelLine: {
								normal: {
									show: false,
								},
							},
							data: jhNumData,
						},
					],
				})
			})
			
		},
		getDLGYQK(){
			getMethodCommon('/ParkInfo/LoadParkMonthElectricitySupply').then(res =>{
				let data = res.data.data
				let xAxisData = []
				let seriesData = []
				data.forEach(item =>{
					xAxisData.push(item.month_day)
					seriesData.push(item.supply_sum)
				})
				let lineCharts = this.$echarts.init(document.getElementById('equipLineCharts'))
				lineCharts.setOption({
					grid: {
						top: '5%',
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: { backgroundColor: '#6a7985' }
						}
					},
					legend: { show: false },
					xAxis: {
						type: 'category',
						axisTick: {
							show: false,
						},
						interval: 1,
						axisLabel: {
							color: '#fff',
							fontSize: "12px"
						},
						axisLine: {
							show: false
						},
						boundaryGap: false,
						data: xAxisData,
					},
					yAxis: [
						{
							type: '',
							name: '',
							axisLabel: {
								formatter: '{value} '
							},
							axisLine: {
								lineStyle: {
									type: 'dashed', //solid实线;dashed虚线
									color: 'rgba(255, 255, 255, 0)'
								}
							},
							axisLabel: {
								textStyle: {
									//坐标轴颜色
									color: '#fff',
									fontSize: "12px"
								},
							},
							//坐标轴线样式
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed', //solid实线;dashed虚线
									color: 'rgba(255, 255, 255, 0.3)'
								}
							},
						}
					],
					series: [
						{
							name: "电力供应情况",
							data: seriesData,
							type: 'line',
							smooth: true, //true曲线; false折线
							showSymbol: false,
							itemStyle: {
								normal: {
									color: 'rgba(237,165,78, 1)', //改变折线点的颜色
									lineStyle: {
										type: 'solid', //solid实线;dashed虚线
										color: 'rgba(237,165,78, 1)', //改变折线颜色
									}
								}
							},
							areaStyle: {
								//折线图颜色半透明
								normal:{
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0, color: 'rgba(237,165,78, 0.8)' // 0% 处的颜色
										}, {
											offset: 1, color: 'rgba(237,165,78, 0.2)' // 100% 处的颜色
										}],
										global: false // 缺省为 false
									}
								}
								
							}
						}
					]
				})
			})
		},
		getQYFB(){
			getMethodCommon('/ParkInfo/LoadBuildConstruction').then(res =>{
				let data = res.data.data
				this.xuequtableData = data
				let xAxisData = []
				let seriesData1 = []
				data.forEach(item =>{
					xAxisData.push(item.name)
					seriesData1.push(item.people_sum)
				})
				let barCharts = this.$echarts.init(document.getElementById('equipBarCharts'))
				barCharts.setOption({
					color:['#87F7C7','#66BAF8'],
					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: xAxisData
					},
					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: '人流量',
						type: 'bar',
						barWidth: 10,
						data: seriesData1,
						}
					]
				})
			})
		}
	}
}
</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: 123px;
}
.equipmentLineCharts{
	height: 220px;
}
.equipmentBarChartContainer{
	height: 210px;
}
.xuequTableContainer{
	height: 220px;
	overflow: auto;
}
.xuequTableContainer::-webkit-scrollbar{
	width: 1px;
	height: 1px;
}
.xuequTableContainer::-webkit-scrollbar-track{
	border-radius: 1px;
}
.xuequTableContainer::-webkit-scrollbar-thumb{
	border-radius: 1px;
	background-color:rgba(255, 255, 255, 0.1);
}
::v-deep .el-table td.el-table__cell{
	border-bottom: none !important;
}
::v-deep .el-table th.el-table__cell.is-leaf{
	border-bottom: none !important;
}
::v-deep .el-table th.el-table__cell{
	background-color: transparent;
	color: #fff;
}
::v-deep .el-table tr{
	background-color: transparent;
}
::v-deep .el-table{
	background-color: transparent;
	color: #fff;
}
::v-deep .el-table__body-wrapper tr:nth-child(2n-1){
	background-color: rgba(255,255,255,0.2);
}
::v-deep .el-table tbody tr:hover>td { 
    background-color: transparent !important
}

</style>
