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

<template>
	<div class="leftBottom">
		<Card title="特殊作业情况">
			<!-- <div class="not-data" v-show="isShow">
				<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 { GlobalStore } from "@/stores";
import * as echarts from 'echarts';
import { COMPANY } from "@/config/config";
//引入现场大屏API
import { 
	getStatBySpecialApi,
 } from "@/api/modules/agjtLiveApi";
const store = GlobalStore();

const isShow = ref(false as any)

const innerPie = ref([
	// { value: 0, name: '进行中' },
	// { value: 0, name: '已完成' },
] as any)
const outPie = ref([
	// {name:'高处作业',value:0,doing:0,per:0},{name:'断路作业',value:0,doing:0,per:0},{name:'吊装安全',value:0,doing:0,per:0},{name:'受限空间',value:0,doing:0,per:0},
	// {name:'动火作业',value:0,doing:0,per:0},{name:'盲板抽堵',value:0,doing:0,per:0},{name:'动土作业',value:0,doing:0,per:0},{name:'临时用电',value:0,doing:0,per:0},
] as any)

//获取特殊作业情况信息
async function getSpecialInfo() {
	await getStatBySpecialApi({
		// projectSn: store.sn,
		projectSn: 'BD3137498CB84BF0969979E0342CDBCA', // yh001---ProjectSn
	}).then(res => {
		if(res.success){
			if(res.result){
				//内饼图
				if(res.result.total){
					// innerPie.value[0].value = res.result.total.running
					// innerPie.value[1].value = res.result.total.complete
					innerPie.value.push({value: res.result.total.running,name:'进行中'})
					innerPie.value.push({value: res.result.total.complete,name:'已完成'})
				}
				//外饼图
				outPie.value = res.result.groupByType
				outPie.value.map(item => {
					item.value = item.num
					item.value = item.num
				})
				drawPie()
			}
		}
	});
};

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){
				if(params.seriesName == 'innerPie'){
					return "<div>"+ innerPie.value[params.dataIndex].name + '：' +innerPie.value[params.dataIndex].value + "</div>"
							
				}else{
					return "<div style='width:auto;height:auto'>"+
								"<div>"+outPie.value[params.dataIndex].name+"  "+ outPie.value[params.dataIndex].ratio +"%</div>"+
								"<div>已完成："+outPie.value[params.dataIndex].complete+ '&nbsp;&nbsp;&nbsp;&nbsp;进行中：' + outPie.value[params.dataIndex].running +"</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: 'innerPie',
				type: 'pie',
				selectedMode: 'single',
				radius: [0, '30%'],
				label: {
					position: 'inner',
					fontSize: 14
				},
				labelLine: {
					show: false
				},
				data: innerPie.value
			},
			{
				name: 'pieCircle',
				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 = '已完成：'+ outPie.value[params.dataIndex].complete + '  '
						return '{name|'+ outPie.value[params.dataIndex].name +'}{abg|}  {per|'+ outPie.value[params.dataIndex].ratio +'%}\n{hr|}\n{done|'+ done 
						+'}  进行中：' + outPie.value[params.dataIndex].running
					},
					// 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
						},
						hr: {
							borderColor: '#8C8D8E',
							width: '100%',
							borderWidth: 1,
							height: 0
						},
						per: {
							color: '#fff',
							backgroundColor: '#4C5058',
							padding: [1, 1],
							borderRadius: 1
						}
					}
				},
				data: outPie.value
			}
		]
		
	};

	option && myChart.setOption(option);
}


//测试方法，对接口时改成相应的方法注释
const leftBottomMethod = async () => {
	console.log("leftBottomMethod")
}
//将方法暴露给父组件
defineExpose({
	leftBottomMethod
})

onMounted( async () => {
	getSpecialInfo()
});
</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>