wisdomisitezwfront-web/src/views/goverment/largeScreen/components/right.vue

<template>
	<div class="leftBorder">
		<div class="title">
			<div class="text">工程数</div>
		</div>
		<div class="projectNum">
			<div v-for="(item, index) in projectNum.newNum" :key="index">
				<div class="numItem">{{ item }}</div>
			</div>
		</div>
		<div class="title">
			<div class="text">在建工程分类</div>
		</div>
		<div id="mainCenter"></div>
		<div v-for="(item, index) in percentList" :key="index" class="allPercent">
			<div :class="item.css">{{ item.number }}</div>
		</div>
		<div class="title">
			<div class="text">扬尘今日预警</div>
		</div>
		<div class="pieBg">
			<div class="imgbg">
				<img src="@/assets/images/screenImg/blueCircleBig.gif" alt="" />
			</div>
			<div id="mainBottom"></div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { nextTick, ref, reactive, onMounted } from "vue";
import { getEngineeringAll, getProjectAll, getFugitiveDustAll } from "@/api/modules/largeSreen";
import * as echarts from "echarts";
import "echarts-gl";
import { result } from "lodash";
import { ResponseSame, ScreenResponse } from "@/api/types/common";
onMounted(() => {
	projectNumber();
	ProjectAll();
	FugitiveDustAll();
});
//工程数
const projectNum = reactive({
	num: "000000",
	newNum: ["0", "0", "0", "0", "0", "0"]
});
const projectNumber = async () => {
	const { result } = await getEngineeringAll();
	const stringNum = String(result.total / 1000000);
	const newNum = stringNum.split(".");
	if (newNum[1].length < 6) {
		const a = 6 - newNum[1].length;
		for (let i = 0; i <= a; i++) {
			projectNum.num = newNum[1] + "0";
		}
	} else {
		projectNum.num = newNum[1];
	}
	projectNum.newNum = projectNum.num.split("");
};
//在建工程分类
const percentList = ref([
	{ number: "0", css: "greenPercent", name: "市政公用" },
	{ number: "0", css: "bluePercent", name: "房屋建筑" },
	{ number: "0", css: "yellowPercent", name: "其他" }
]);
const ProjectAll = async () => {
	const { result } = await getProjectAll();
	result.forEach((item: { dict_value: string; ratio: string }, index: number) => {
		percentList.value.forEach((item2, index: number) => {
			if (item.dict_value == item2.name) {
				item2.number = item.ratio + "%";
			}
		});
	});
	threeDOption(result);
};

const threeDOption = (val: any[] | ResponseSame<ScreenResponse.ProjectAllResponse> | undefined) => {
	const chartDom = document.getElementById("mainCenter") as HTMLElement;
	const myChart = echarts.init(chartDom);
	window.addEventListener("resize", function () {
		myChart.resize();
	});

	//当前视口宽度
	let nowClientWidth = document.documentElement.clientWidth;
	//  换算方法
	function nowSize(val: number, initWidth = 1920) {
		return val * (nowClientWidth / initWidth);
	}

	let allNumber = 0;
	const data = [
		{
			name: "房屋建筑",
			value: 0,
			itemStyle: {
				color: "#3c6fb6"
			}
		},
		{
			name: "市政公用",
			value: 0,
			itemStyle: {
				color: "#53d5a3"
			}
		},
		{
			name: "其他",
			value: 0,
			itemStyle: {
				color: "#f6bc05"
			}
		}
	];
	let temp = 0;
	val.forEach((item2: { dict_value: string; num: number }, index: number) => {
		temp += Number(item2.num);
		data.forEach((item, index) => {
			if (item.name == item2.dict_value) {
				item.value = Number(item2.num);
			}
		});
	});
	allNumber = temp;
	console.log(allNumber, data);

	function array2obj(array: [], key: string) {
		let resObj = {};
		for (let i = 0; i < array.length; i++) {
			resObj[array[i][key]] = array[i];
		}
		return resObj;
	}
	const objData = array2obj(data, "name");
	// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
	function getParametricEquation(
		startRatio: number,
		endRatio: number,
		isSelected: boolean,
		isHovered: boolean,
		k: number,
		h: number
	) {
		// 计算
		let midRatio = (startRatio + endRatio) / 2;

		let startRadian = startRatio * Math.PI * 2;
		let endRadian = endRatio * Math.PI * 2;
		let midRadian = midRatio * Math.PI * 2;

		// 如果只有一个扇形，则不实现选中效果。
		if (startRatio === 0 && endRatio === 1) {
			isSelected = false;
		}

		// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
		k = typeof k !== "undefined" ? k : 1 / 3;

		// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
		let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
		let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

		// 计算高亮效果的放大比例（未高亮，则比例为 1）
		let hoverRate = isHovered ? 1.05 : 1;

		// 返回曲面参数方程
		return {
			u: {
				min: -Math.PI,
				max: Math.PI * 3,
				step: Math.PI / 32
			},

			v: {
				min: 0,
				max: Math.PI * 2,
				step: Math.PI / 20
			},

			x: function (u: number, v: number) {
				if (u < startRadian) {
					return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
				}
				if (u > endRadian) {
					return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
				}
				return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
			},

			y: function (u: number, v: number) {
				if (u < startRadian) {
					return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
				}
				if (u > endRadian) {
					return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
				}
				return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
			},

			z: function (u: number, v: number) {
				if (u < -Math.PI * 0.5) {
					return Math.sin(u);
				}
				if (u > Math.PI * 2.5) {
					return Math.sin(u) * h * 0.1;
				}
				return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
			}
		};
	}
	// 生成模拟 3D 饼图的配置项
	function getPie3D(pieData: string | any[], internalDiameterRatio: number) {
		let series = [];
		let sumValue = 0;
		let startValue = 0;
		let endValue = 0;
		let legendData = [];
		let k = typeof internalDiameterRatio !== "undefined" ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;

		// 为每一个饼图数据，生成一个 series-surface 配置
		for (let i = 0; i < pieData.length; i++) {
			sumValue += pieData[i].value;

			let seriesItem = {
				name: typeof pieData[i].name === "undefined" ? `series${i}` : `${pieData[i].name}`,
				type: "surface",
				parametric: true,
				wireframe: {
					show: false
				},
				pieData: pieData[i],
				pieStatus: {
					selected: false,
					hovered: false,
					k: k
				}
			};

			if (typeof pieData[i].itemStyle != "undefined") {
				let itemStyle = {};

				typeof pieData[i].itemStyle.color != "undefined" ? (itemStyle.color = pieData[i].itemStyle.color) : null;
				typeof pieData[i].itemStyle.opacity != "undefined" ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;

				seriesItem.itemStyle = itemStyle;
			}
			series.push(seriesItem);
		}

		// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
		// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
		for (let i = 0; i < series.length; i++) {
			endValue = startValue + series[i].pieData.value;

			series[i].pieData.startRatio = startValue / sumValue;
			series[i].pieData.endRatio = endValue / sumValue;
			series[i].parametricEquation = getParametricEquation(
				series[i].pieData.startRatio,
				series[i].pieData.endRatio,
				false,
				false,
				k,
				series[i].pieData.value
			);

			startValue = endValue;

			legendData.push(series[i].name);
		}

		// 补充一个透明的圆环，用于支撑高亮功能的近似实现。
		series.push({
			// name: "mouseoutSeries",
			type: "surface",
			parametric: true,
			wireframe: {
				show: false
			},
			itemStyle: {
				opacity: 0
			},
			parametricEquation: {
				u: {
					min: 0,
					max: Math.PI * 2,
					step: Math.PI / 20
				},
				v: {
					min: 0,
					max: Math.PI,
					step: Math.PI / 20
				},
				x: function (u: number, v: number) {
					return Math.sin(v) * Math.sin(u) + Math.sin(u);
				},
				y: function (u: number, v: number) {
					return Math.sin(v) * Math.cos(u) + Math.cos(u);
				},
				z: function (u: any, v: number) {
					return Math.cos(v) > 0 ? 0.1 : -0.1;
				}
			}
		});

		// 准备待返回的配置项，把准备好的 legendData、series 传入。
		let option = {
			//animation: false,
			legend: {
				// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
				orient: "horizontal",
				x: "center",
				y: "left",
				itemWidth: nowSize(18),
				itemHeight: nowSize(18),
				// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
				itemGap: nowSize(30),
				formatter: function (name: string) {
					return "{title|" + name + "}{value| " + `${objData[name].value}` + "}";
				},
				textStyle: {
					rich: {
						title: {
							fontSize: nowSize(13),
							lineHeight: nowSize(15),
							color: "white",
							fontFamily: "DigitalRegular"
						},
						value: {
							fontSize: nowSize(19),
							lineHeight: nowSize(20),
							color: "white",
							fontFamily: "YouSheBiaoTiHei"
						}
					}
				}
			},
			tooltip: {
				formatter: (params: { seriesName: string; color: any; seriesIndex: string | number }) => {
					if (params.seriesName !== "mouseoutSeries") {
						return `${
							params.seriesName
						}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
							params.color
						};"></span>${((option.series[params.seriesIndex].pieData.value / allNumber) * 100).toFixed(1)}%`;
					}
				}
			},
			xAxis3D: {
				min: -1,
				max: 1
			},
			yAxis3D: {
				min: -1,
				max: 1
			},
			zAxis3D: {
				min: -1,
				max: 1
			},
			grid3D: {
				show: false,
				boxHeight: 10,
				viewControl: {
					//3d效果可以放大、旋转等，请自己去查看官方配置
					alpha: 40,
					// beta: 40,
					rotateSensitivity: 0,
					zoomSensitivity: 0,
					panSensitivity: 0,
					autoRotate: false
				},
				//后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
				postEffect: {
					//配置这项会出现锯齿，请自己去查看官方配置有办法解决
					enable: true,
					bloom: {
						enable: true,
						bloomIntensity: 0.1
					},
					SSAO: {
						enable: true,
						quality: "medium",
						radius: 2
					}
				}
			},
			series: series
		};
		return option;
	}
	// 传入数据生成 option
	let option = getPie3D(data, 0.65);
	option && myChart.setOption(option);
};
//扬尘今日预警
const FugitiveDustAll = async () => {
	const { result } = await getFugitiveDustAll();
	pieOption(result);
};
const pieOption = (val: ResponseSame<ScreenResponse.FugitiveDustAllResponse> | undefined) => {
	const chartDomPie = document.getElementById("mainBottom") as HTMLElement;
	const myChartPie = echarts.init(chartDomPie);
	window.addEventListener("resize", function () {
		myChartPie.resize();
	});
	//当前视口宽度
	let nowClientWidth = document.documentElement.clientWidth;
	//换算方法
	function nowSize(val: number, initWidth = 1920) {
		return val * (nowClientWidth / initWidth);
	}
	let scale = 1;
	let echartData = [
		{
			value: 0,
			name: "PM10",
			itemStyle: {
				normal: {
					//颜色渐变
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#1d2f31" },
						{ offset: 1, color: "#30ab7b" }
					])
				}
			},
			labelLine: {
				lineStyle: {
					color: "#2fa678"
				}
			},
			label: {
				normal: {
					rich: {
						b: {
							height: 5,
							width: 5,
							lineHeight: 15,
							marginBottom: 10,
							padding: [0, -2.5],
							borderRadius: 5,
							backgroundColor: "#2fa678" // 圆点颜色
						}
					}
				}
			}
		},
		{
			value: 0,
			name: "噪音",
			itemStyle: {
				normal: {
					//颜色渐变
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#2c2e29" },
						{ offset: 1, color: "#f9bd02" }
					])
				}
			},
			labelLine: {
				lineStyle: {
					color: "#e2ad06"
				}
			},
			label: {
				normal: {
					rich: {
						b: {
							height: 5,
							width: 5,
							lineHeight: 15,
							marginBottom: 10,
							padding: [0, -2.5],
							borderRadius: 5,
							backgroundColor: "#e2ad06" // 圆点颜色
						}
					}
				}
			}
		},
		{
			value: 0,
			name: "TSP",
			itemStyle: {
				normal: {
					//颜色渐变
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#f04b17" },
						{ offset: 1, color: "#2b242b" }
					])
				}
			},
			labelLine: {
				lineStyle: {
					color: "#e94a18"
				}
			},
			label: {
				normal: {
					rich: {
						b: {
							height: 5,
							width: 5,
							lineHeight: 15,
							marginBottom: 10,
							padding: [0, -2.5],
							borderRadius: 5,
							backgroundColor: "#e94a18" // 圆点颜色
						}
					}
				}
			}
		},
		{
			value: 0,
			name: "PM2.5",
			itemStyle: {
				normal: {
					//颜色渐变
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#5488d8" },
						{ offset: 1, color: "#222c3a" }
					])
				}
			},
			labelLine: {
				lineStyle: {
					color: "#5183cf"
				}
			},
			label: {
				normal: {
					rich: {
						b: {
							height: 5,
							width: 5,
							lineHeight: 15,
							marginBottom: 10,
							padding: [0, -2.5],
							borderRadius: 5,
							backgroundColor: "#5183cf" // 圆点颜色
						}
					}
				}
			}
		}
	];
	let total_datas = 0;
	let temp = 0;
	val.forEach((item2: { total: any; type: string; num: any }, index: number) => {
		temp += Number(item2.num);
		echartData.forEach((item, index) => {
			if (item.name == item2.type) {
				item.value = Number(item2.num);
			}
		});
	});
	total_datas = temp;
	console.log(total_datas, echartData);
	let rich = {
			top: {
				color: "white",
				fontSize: nowSize(13),
				left: nowSize(20),
				padding: [nowSize(-20), nowSize(-50), nowSize(-20), nowSize(-50)],
				fontFamily: "SourceHanSansCNH"
			},
			total: {
				color: "#ffc72b",
				fontSize: nowSize(40) * scale,
				align: "center"
			},

			bottom: {
				color: "white",
				fontSize: nowSize(14),
				height: nowSize(5),
				width: nowSize(5),
				lineHeight: nowSize(5),
				marginBottom: nowSize(10),
				padding: [nowSize(0), nowSize(-80), nowSize(-15), nowSize(-75)],
				borderRadius: nowSize(5),
				fontFamily: "OPPOSansB"
			},
			hr: {
				borderColor: "#0b5263",
				width: "100%",
				borderWidth: nowSize(1),
				height: nowSize(0)
			}
		},
		optionPie = {
			title: {
				text: total_datas,
				subtext: "今日报警次数",
				itemGap: 5,
				top: "top",
				padding: [nowSize(108), nowSize(100)],
				textStyle: {
					color: "#f2f2f2",
					fontSize: nowSize(48),
					fontFamily: "DigitalRegular"
				},
				subtextStyle: {
					fontSize: nowSize(14),
					color: ["#f2f2f2"],
					fontFamily: "SourceHanSansCNR"
				},
				x: "center",
				y: "center"
			},
			series: [
				{
					name: "违纪总次数",
					type: "pie",
					radius: ["38%", "50%"],
					hoverAnimation: false,
					label: {
						normal: {
							formatter: function (params: { value: number; name: string }) {
								let total = 0; //考生总数量
								echartData.forEach(function (value) {
									total += value.value;
								});
								let percent = ((params.value / total) * 100).toFixed(0);
								if (percent == "NaN") {
									return "{top|" + params.name + "}\n{b| }\n{bottom|" + params.value + "次  /  " + 0 + "%}";
								} else {
									return "{top|" + params.name + "}\n{b| }\n{bottom|" + params.value + "次  /  " + percent + "%}";
								}
							},
							rich: rich
						}
					},
					labelLine: {
						normal: {
							length: nowSize(20),
							length2: nowSize(100),
							align: "right",
							lineStyle: {
								width: nowSize(1)
							},
							emphasis: {
								show: true
							}
						}
					},
					data: echartData
				}
			]
		};
	optionPie && myChartPie.setOption(optionPie);
};
// nextTick(() => {
// });
</script>

<style lang="scss" scoped>
.leftBorder {
	position: fixed;
	top: 15%;
	right: 0;
	width: 27%;
	height: 100%;
	background: url("@/assets/images/screenImg/rightBorder.png") no-repeat right center;
	background-size: 100% 100%;
	.title {
		width: 100%;
		height: 50px;
		font-family: YouSheBiaoTiHei;
		color: white;
		background: url("@/assets/images/screenImg/littleTitle.png") no-repeat left center;
		background-size: 75%;
		.text {
			padding: 0 0 0 50px;
			font-size: 18px;
		}
	}
	.projectNum {
		display: flex;
		width: 90%;
		height: 100px;
		margin-left: 22px;
		.numItem {
			width: 56px;
			height: 62px;
			margin-right: 10px;
			font-family: DigitalRegular;
			font-size: 48px;
			line-height: 62px;
			color: white;
			text-align: center;
			background: url("@/assets/images/screenImg/frame.png") no-repeat;
			background-size: 100%;
		}
	}
}
/* stylelint-disable-next-line selector-id-pattern */
#mainCenter {
	width: 100%;
	height: 290px;
}
.pieBg {
	position: relative;
	width: 90%;
	height: 250px;
	.imgbg {
		width: 245px;
		height: 245px;
		margin: 0 auto;
		background: url("@/assets/images/screenImg/blueCircleBigbg.png") no-repeat center center;
		background-size: 100%;
		img {
			position: absolute;
			top: 14.5%;
			left: 31.5%;
			width: 174px;
			height: 174px;
		}
	}
	/* stylelint-disable-next-line selector-id-pattern */
	#mainBottom {
		position: absolute;
		top: -8.5%;
		left: 0;
		width: 100%;
		height: 290px;
	}
}
.allPercent {
	// position: relative;
	.greenPercent {
		position: absolute;
		top: 350px;
		left: 70px;
		width: 76px;
		height: 30px;
		font-family: OPPOSansH;
		font-size: 17px;
		color: rgb(48 172 124);
		text-align: center;
		border-bottom: 5px solid #dddddd;
		border-image: linear-gradient(to right, rgb(48 172 124 / 0%), rgb(48 172 124 / 100%)) 30 30;
	}
	.bluePercent {
		position: absolute;
		top: 265px;
		left: 350px;
		width: 76px;
		height: 30px;
		font-family: OPPOSansH;
		font-size: 17px;
		color: rgb(49 123 196);
		text-align: center;
		border-bottom: 5px solid #dddddd;
		border-image: linear-gradient(to right, rgb(49 123 196 / 20%), rgb(49 123 196 / 80%)) 30 30;
	}
	.yellowPercent {
		position: absolute;
		top: 430px;
		left: 320px;
		width: 76px;
		height: 30px;
		font-family: OPPOSansH;
		font-size: 17px;
		color: rgb(252 191 2);
		text-align: center;
		border-bottom: 5px solid #dddddd;
		border-image: linear-gradient(to right, rgb(252 191 2 / 0%), rgb(252 191 2 / 100%)) 30 30;
	}
}
</style>