<template>
	<div class="Dashboard">
		<el-alert show-icon  title="因未对接体检数据接口,以下数据均为演示.报表内容和类型可根据需求调整" type="warning" :closable="false"  style="margin-bottom: 20px;"/>
		<el-row class="row1" :gutter="20">
			<el-col :span="12">
				<div id="MonthCount" class="MonthCount"></div>
			</el-col>
			<el-col :span="12">
				<div id="TypeCount" class="TypeCount"></div>
			</el-col>
		</el-row>
		<el-row class="row2">
			<el-col :span="24">
				<div class="title">各体检机构体检量统计</div>
				<el-table  :data="tableData" style="width: 100%;" row-key="id">
					<!-- <el-table-column prop="id" label="Id" width="100" /> -->
					<el-table-column prop="name" label="机构名称" />
					<el-table-column prop="count" label="数量" />
				</el-table>
			<!-- 	<div class="page">
					<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
						:page-sizes="[15, 50, 100, 200]" layout="total,sizes, prev, pager, next" :total="total"
						@size-change="PageSizeChange" @current-change="PageCurrentChange" />
				</div> -->
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import * as echarts from 'echarts';
	let loading = ref(false)
	let tableData = ref([{
		name:'医管中心',
		count:'500'
	},{
		name:'亦庄医院',
		count:'636'
	},{
		name:'采育卫生院',
		count:'425'
	},{
		name:'西红门医院',
		count:'266'
	}])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetUserList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetUserList()
	}
	const GetList=()=>{
		
	}
 
	onMounted(()=>{
		var ChartMonthCount = echarts.init(document.getElementById('MonthCount'));
		// 绘制图表
		ChartMonthCount.setOption({
		  title: {
		    text: '2023-01-01~2023-06-30体检数量统计（月）'
		  },
		  tooltip: {},
		  xAxis: {
		    data: ['1月', '2月', '3月', '4月', '5月', '6月']
		  },
		  yAxis: {},
		  series: [
		    {
		      name: '数量',
		      type: 'bar',
		      data: [5, 20, 36, 10, 10, 20]
		    }
		  ]
		});
		var ChartTypeCount = echarts.init(document.getElementById('TypeCount'));
		ChartTypeCount.setOption(
			{
				title: {
				  text: '2023-01-01~2023-06-30体检行业分类统计'
				},
			  tooltip: {
			    trigger: 'item'
			  },
			  legend: {
			    top: '5%',
			    left: 'center'
			  },
			  series: [
			    {
			      name: '数量',
			      type: 'pie',
			      radius: ['40%', '70%'],
			      avoidLabelOverlap: false,
			      label: {
			        show: false,
			        position: 'center'
			      },
			      emphasis: {
			        label: {
			          show: true,
			          fontSize: 40,
			          fontWeight: 'bold'
			        }
			      },
			      labelLine: {
			        show: false
			      },
			      data: [
			        { value: 1048, name: '食品类' },
			        { value: 735, name: '化妆品类' },
			        { value: 580, name: '公共场所类' },
			        { value: 484, name: '生活饮用水类' },
			        { value: 300, name: '消毒产品生产类' }
			      ]
			    }
			  ]
			
		})
		
	})

</script>

<style scoped>
	.Dashboard{
		padding: 20px;
		display: none;
	}
	.MonthCount{
		height: 400px;
		width: 100%;
	}
	.TypeCount{
		height: 400px;
		width: 100%;
	}
	.row1 .el-col{
		 
		 
		/* background-color: #ccc; */
	}
	.row1 .el-col div{
		padding: 20px;
		 border: 1px solid #ccc;
		background-color: #f6f6f6;
	}
	.row2{
		margin-top: 20px;
	}
	.row2 .el-col{
		padding: 20px;
		 border: 1px solid #ccc;
	}
	.row2 .title{
		font-size: 18px;
		font-weight: 900;
		margin-bottom: 10px;
	}
	.page {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}
</style>