<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">
			<div class="content maxWidth mt-1">
				<div v-for="(item,index) in qiyeTypeOption">
					<div class="title fz-2 fc-w-1">{{ item.name }}</div>
					<div class="flex ai-c jc-c">
						<div class="proportion">
							<div :style="{width: item.number/qiyeTypeMaxNum*100 +'%'}" class="bar"></div>
						</div>
						<div class="value">{{item.number}}家</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="border-b mt-3">
		<div class="fz-3 fc-w-1">进驻企业行业分布</div>
		<div class="equipmentLineCharts mt-2 industryContainer">
			<div class="maxHeight maxWidth" id="industryCharts"></div>
		</div>
	</div>
	<div class="mt-3">
		<div class="fz-3 fc-w-1">进驻企业规模排名</div>
		<div class="qiyeScaleRankContainer mt-2">
			<el-table :data="qiyeScaleRankOption" style="width: 100%">
				<el-table-column type="index" label="排名" width="50"></el-table-column>
			    <el-table-column prop="company_name" label="企业名称" show-overflow-tooltip> </el-table-column>
			    <el-table-column prop="company_type" label="企业类型" show-overflow-tooltip> </el-table-column>
			    <el-table-column prop="people_sum" label="企业人员" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="market_capitalization" label="市值" show-overflow-tooltip> </el-table-column>
			  </el-table>
		</div>
		
		
	</div>
</div>
	
</template>

<script>
import {getMethodCommon,postMethodCommon } from '@/api/common'
export default {
	name: 'equipment',
	components: {
		
	},
	data () {
		return {
			qiyeTypeOption:[],
			qiyeTypeMaxNum: 2000,
			qiyeScaleRankOption:[]
		}
	},
	created() {
		
	},
	mounted() {
		this.getQYTypeData() //查询企业类型分布
		this.getIndustryData() //查询企业行业分布
		this.getCompanyType()  //查询企业规模排名
	},
	methods:{
		getQYTypeData(){
			getMethodCommon('/ParkInfo/LoadInConpanyType').then(res =>{
				this.qiyeTypeOption = res.data.data
				let arr = []
				this.qiyeTypeOption.forEach(item =>{
					arr.push(item.number)
				})
				this.qiyeTypeMaxNum = Math.max.apply(null, arr) + 100
			})
		},
		getIndustryData(){
			getMethodCommon('/ParkInfo/LoadInCompanyIndustry').then(res =>{
				let indestryData = res.data.data
				let chartData = []
				let colorArr = [ '#87F7C7','#F5BA45','#945FB9','#FF7675','#0D91FE','#0ACAF6','#EB0B59','#18F60A','#F2F40B','#F3220B' ]
				indestryData.forEach((item,index) =>{
					chartData.push({
						name: item.name,
						value: item.number,
						color: colorArr[index]
					})
				})
				let arr = []
				chartData.forEach(item =>{
					arr.push(item.value)
				})
				let maxNum = Math.max.apply(null, arr)*3/2
				let pieSeries = [];
				// 图表option整理
				chartData.forEach((v, i) => {
					pieSeries.push({
						name: chartData[i].name,
						type: 'pie',
						clockWise: false,
						hoverAnimation: false,
						radius: [78 - i * 16 + '%', 85 - i * 16 + '%'],
						center: ['30%', '50%'],
						label: {
							normal:{
								show: false,
							}
						},
						itemStyle: {
							normal:{
								color: chartData[i].color,
							}
						},
						data: [
							{
								value: v.value,
								name: v.name,
							},
							{
								value: maxNum - v.value,
								name: '',
								itemStyle: {
									normal:{
										color: '#9DCAD7',
									}
								},
							},
						],
					});
					pieSeries.push({
						name: '',
						type: 'pie',
						silent: true,
						z: 1,
						clockWise: false, //顺时加载
						radius: [78 - i * 16 + '%', 85 - i * 16 + '%'],
						center: ['30%', '50%'],
						label: {
							normal:{
								show: false,
							}
						},
						data: [
							{
								value: 7.5,
								itemStyle: {
									normal:{
										color: '#9DCAD7',
									}
								},
							},
							{
								value: 0,
								name: '',
								itemStyle: {
									normal:{
										color: 'rgba(49, 120, 189, 0.3)',
									}
								},
							},
						],
					});
				})

				let lineCharts = this.$echarts.init(document.getElementById('industryCharts'))
				lineCharts.setOption({
					legend: {
						type:"scroll",
						orient: 'vertical',
						right: '10',
						top: 'middle',
						itemWidth: 10,
						itemHeight: 10,
						icon: 'circle',
						data: chartData,
						formatter: function(name) {
							for (var i = 0; i<chartData.length; i++) {
								if (name == chartData[i].name) {
									return '{name|' + name+ '}{rate|' + chartData[i].value + '家}'
								}
							}
						},
						textStyle: {
							rich: {
								name: {
									fontSize: 13,
									fontWeight: 400,
									width: 50,
									height: 22,
									padding:[0,0,0,5],
									color:'#fff'
								},
								rate: {
									fontSize: 13,
									fontWeight: 500,
									height: 22,
									width: 40,
									padding:[0,0,0,20],
									color:'#fff'
								}
							}
						}        
					},
					series: pieSeries,
				})
			})
		},
		getCompanyType(){
			getMethodCommon('/ParkInfo/LoadCompany').then(res =>{
				this.qiyeScaleRankOption = res.data.data
			})
		}
	}
}
</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: 275px;
}
.piecharts .content{
	overflow: auto;
	padding: 10px;
}
.piecharts .content::-webkit-scrollbar{
	width: 1px;
	height: 1px;
}
.piecharts .content::-webkit-scrollbar-track{
	border-radius: 1px;
}
.piecharts .content::-webkit-scrollbar-thumb{
	border-radius: 1px;
	background-color:rgba(135, 247, 199, 0.1);
}
.piecharts .content .title{
	line-height: 20px;
}
.piecharts .content .proportion{
	width: 75%;
	height: 10px;
	background-color: rgba(255, 255, 255, 0.298039215686275);
}
.piecharts .content .proportion .bar{
	height: 10px;
	background-color: rgba(135, 247, 199, 1);
}
.piecharts .content .value{
	width: 25%;
	color: #87F7C7;
	text-align: right;
}
.industryContainer{
	height: 225px;
}




.qiyeScaleRankContainer{
	height: 323px;
	overflow: auto;
}
.qiyeScaleRankContainer::-webkit-scrollbar{
	width: 1px;
	height: 1px;
}
.qiyeScaleRankContainer::-webkit-scrollbar-track{
	border-radius: 1px;
}
.qiyeScaleRankContainer::-webkit-scrollbar-thumb{
	border-radius: 1px;
	background-color:rgba(135, 247, 199, 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 .cell{
	white-space: nowrap;
}
::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>
