zhgdlarge/src/views/agjtLiveScreen/liveScreen/leftBottom.vue

<template>
	<div class="leftBottom">
		<Card title="特殊作业情况">
			<div class="not-data" v-show="tempList.length == 0 && tempList2.length == 0 && tempList3.length == 0">
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div>
			<div class="mainContainer">
				<div id="pieEchart" style="width:100%;height:100%"></div>
			</div>
			
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref, onMounted, watch } from "vue";
import * as echarts from 'echarts';

let tempList = ref([
	// {name:'高处作业',value:12,doing:10,per:'12.5'},{name:'断路作业',value:12,doing:10,per:'12.5'},{name:'吊装安全',value:12,doing:10,per:'12.5'},{name:'受限空间',value:12,doing:10,per:'12.5'},
	// {name:'动火作业',value:12,doing:10,per:'12.5'},{name:'盲板抽堵',value:12,doing:10,per:'12.5'},{name:'动土作业',value:12,doing:10,per:'12.5'},{name:'临时用电',value:12,doing:10,per:'12.5'},
] as any)
let tempList2 = ref([
	// { value: 123, name: '高处作业' },
	// { value: 123, name: '断路作业' },
	// { value: 123, name: '吊装安全' },
	// { value: 123, name: '受限空间' },
	// { value: 123, name: '动火作业' },
	// { value: 123, name: '盲板抽堵' },
	// { value: 123, name: '动土作业' },
	// { value: 123, name: '临时用电' }
] as any)
let tempList3 = ref([
	// { value: 96, name: '进行中' },
	// { value: 80, name: '已完成' },
] as any)
function drawPie(){
	type EChartsOption = echarts.EChartsOption;

	var chartDom = document.getElementById('pieEchart')!;
	var myChart = echarts.init(chartDom);
	var option: EChartsOption;

	option = {
		tooltip: {
			trigger: 'item',
			// formatter: '{a} <br/>{b}: {c} ({d}%)'
			formatter: function(params: any){
				return "<div style='width:100px;height:65px'>"+
							"<div>"+tempList.value[params.dataIndex].name+"  "+ tempList.value[params.dataIndex].per +"%</div>"+
							"<div>已完成"+tempList.value[params.dataIndex].value+"</div>"+
							"<div>进行中"+tempList.value[params.dataIndex].doing +"</div>"+
						"</div>"
			},
		},
		// legend: {
		// 	data: [ 'Direct', 'Marketing', 'Search Engine', 'Email', 'Union Ads', 'Video Ads', 'Baidu', 'Google', 'Bing', 'Others' ]
		// },
		series: [
			{
				grid:{
					left: '5%',
					right: '5%',
					bottom: '5%',
					containLabel:true
				},
				name: 'Access From',
				type: 'pie',
				selectedMode: 'single',
				radius: [0, '30%'],
				label: {
					position: 'inner',
					fontSize: 14
				},
				labelLine: {
					show: false
				},
				data: tempList3.value
			},
			{
				name: 'Access From',
				type: 'pie',
				radius: ['45%', '60%'],
				labelLine: {
					length: 1
				},
				label: {
					// formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
					formatter: function(params: any){
						let done = '已完成：'+ tempList.value[params.dataIndex].value + '  '
						return '{name|'+ tempList.value[params.dataIndex].name +'}{abg|}  {per|'+ tempList.value[params.dataIndex].per +'%}\n{hr|}\n{done|'+ done 
						+'}  进行中：' + tempList.value[params.dataIndex].doing
						// return '{name|'+ tempList.value[params.dataIndex].name +'}{abg|}  {per|'+ tempList.value[params.dataIndex].per +'%}\n{hr|}\n已完成：' 
						// + tempList.value[params.dataIndex].value+'  进行中：' + tempList.value[params.dataIndex].doing
					},
					// backgroundColor: '#1c447b',
					backgroundColor: 'rgba(28,68,123,0.5)',
					borderRadius: 3,
					textStyle:{
						color: '#FFF'
					},
					rich: {
						name:{
							color: '#fff',
							align: 'center',
							lineHeight: 20
						},
						done:{
							color: '#fff',
							lineHeight: 20
						},
						// a: {
						// 	color: '#fff',
						// 	lineHeight: 10,
						// 	align: 'center'
						// },
						hr: {
							borderColor: '#8C8D8E',
							width: '100%',
							borderWidth: 1,
							height: 0
						},
						// b: {
						// 	color: '#fff',
						// 	fontSize: 10,
						// 	fontWeight: 'bold',
						// 	lineHeight: 12
						// },
						per: {
							color: '#fff',
							backgroundColor: '#4C5058',
							padding: [1, 1],
							borderRadius: 1
						}
					}
				},
				data: tempList2.value
				// data: [
				// 	{ value: 104, name: '高处作业' },
				// 	{ value: 335, name: '断路作业' },
				// 	{ value: 310, name: '吊装安全' },
				// 	{ value: 251, name: '受限空间' },
				// 	{ value: 234, name: '动火作业' },
				// 	{ value: 147, name: '盲板抽堵' },
				// 	{ value: 135, name: '动土作业' },
				// 	{ value: 102, name: '临时用电' }
				// ]
			}
		]
		
	};

	option && myChart.setOption(option);
}
watch(tempList2, (newV,oldV) => {
	if(newV.length !== 0){
		// drawPie()
	}
})
watch(tempList, (newV,oldV) => {
	if(newV.length !== 0){
		// drawPie()
	}
})
function getData(){
	// setTimeout(() => {
		tempList.value = [
			{name:'高处作业',value:12,doing:10,per:'12.5'},{name:'断路作业',value:12,doing:10,per:'12.5'},{name:'吊装安全',value:12,doing:10,per:'12.5'},{name:'受限空间',value:12,doing:10,per:'12.5'},
			{name:'动火作业',value:12,doing:10,per:'12.5'},{name:'盲板抽堵',value:12,doing:10,per:'12.5'},{name:'动土作业',value:12,doing:10,per:'12.5'},{name:'临时用电',value:12,doing:10,per:'12.5'},
		]
		tempList2.value = [
			{ value: 123, name: '高处作业' },
			{ value: 123, name: '断路作业' },
			{ value: 123, name: '吊装安全' },
			{ value: 123, name: '受限空间' },
			{ value: 123, name: '动火作业' },
			{ value: 123, name: '盲板抽堵' },
			{ value: 123, name: '动土作业' },
			{ value: 123, name: '临时用电' }
		]
		tempList3.value = [
			{ value: 96, name: '进行中' },
			{ value: 80, name: '已完成' },
		]
	// },1000)
	drawPie()
}
onMounted( async () => {
	
	getData()
});
</script>

<style lang="scss" scoped>
.leftBottom {
	width: 100%;
	height: 100%;
	.mainContainer{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
}
::v-deep .h-card .content {
	height: 80%;
}
.not-data {
	top: 40%;
	width: 30%;
	left: 35%;
	position: absolute;
	text-align: center;
	img {
		width: 50%;
	}
	p {
		color: #fff;
		font-size: 14px;
	}
}
</style>