zhgdlarge/src/views/commandScreen/commandCenter/rightAll.vue

<template>
	<div class="rightAll">
		<div class="header">
			<div class="hLeft">
				隐患统计智能分析
			</div>
			<div class="hRight">
				<el-date-picker style="width: 85%" v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :size="size"/>
			</div>
		</div>
		<div class="content">
			<div class="contentTop">
				<div class="ctHead">
					<div>重大隐患超期未整改<text>{{overdueMajorDangerCount}}</text>个，占比<text>{{overdueMajorDangerRate}}%</text></div>
				</div>
				<div class="ctContent">
					<div id="echartsSafe" style="width: 100%; height: 100%"></div>
				</div>
			</div>

			<div class="contentMiddle">
				<div class="cmHead">
					<div>重大隐患未销项<text>{{majorDangerCount}}</text>个，占比<text>{{majorDangerRate}}%</text></div>
				</div>
				<div class="cmContent">
					<div id="echartsMajorDanger" style="width: 100%; height: 100%"></div>
				</div>
			</div>

			<div class="contentBottom">
				<div class="cbHeader">
					<div class="cbHeaderInfo">
						<div class="cubeIcon"></div>
						<div>教育智能提示</div>
					</div>
					<div class="cbHeaderLine"></div>
				</div>
				<div class="cbContent">
					<el-scrollbar height="350">
						<div class="item" v-for="(item,index) in listData" :key="index">																																																																																																																																																																																																		
							<div class="itemHead">
								<div class="itemHeadInner" v-if="item.type === 1">{{item.header}}</div>
								<div class="itemHeadInner2" v-if="item.type === 2">{{item.header}}</div>
							</div>
							<div class="itemContent">
								<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
									{{item.content}}
								</el-tooltip>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { onMounted, ref } from "vue";
import { GlobalStore } from "@/stores";
import rightTop from "@/views/commandScreen/commandCenter/rightTop.vue";
import rightCenter from "@/views/commandScreen/commandCenter/rightCenter.vue";
const store = GlobalStore();
import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview";
import * as echarts from "echarts";
const echartsTest = ref();
let questionTotal = ref(0 as any);

let dateRange = ref([] as any);

let majorDangerCount = ref(20 as any);
let majorDangerRate = ref(50 as any);
let overdueMajorDangerCount = ref(20 as any);
let overdueMajorDangerRate = ref(50 as any);

let listData = ref([
	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
])

let dataList = ref([
	{
		value: 30,
		show: true,
		name: "未整改安全问题",

		itemStyle: {
			normal: {
				color: "#EC6266",
				borderWidth: 20
			}
		}
	},
	{
		value: 70,
		show: true,
		name: "已整改安全问题",
		itemStyle: {
			normal: {
				color: "#6375C7",
				borderWidth: 20
			}
		}
	}
]);
function Pie() {
	let dataArr = [];
	for (var i = 0; i < 150; i++) {
		if (i % 2 === 0) {
			dataArr.push({
				name: (i + 1).toString(),
				value: 10,
				itemStyle: {
					normal: {
						color: "#7cf4f1",
						borderWidth: 0,
						borderColor: "#7f6546"
					}
				}
			});
		} else {
			dataArr.push({
				name: (i + 1).toString(),
				value: 10,
				itemStyle: {
					normal: {
						color: "rgba(0,0,0,0)",
						borderWidth: 0,
						borderColor: "rgba(0,0,0,0)"
					}
				}
			});
		}
	}
	return dataArr;
}

function drawEchart() {
	echartsTest.value = echarts.init(document.getElementById("echartsSafe"));
	let option = {
		tooltip: {
			trigger: "item"
		},
		title: {
			text: questionTotal.value,
			subtext: "安全问题数",
			x: "24%",
			y: "center",
			textAlign: "center",
			textStyle: {
				color: "#fff",
				fontSize: 26,
				fontWeight: "normal",
				// align: "center",
				fontFamily: "sadigitalNumber"
			},
			subtextStyle: {
				color: "#ccc",
				fontSize: 12,
				fontWeight: "normal"
				// align: "center"
			}
		},
		legend: {
			selectedMode: false, // 取消图例上的点击事件
			icon: "rect",
			type: "plain",
			orient: "vertical",
			left: "50%",
			top: "40%",
			align: "left",
			itemGap: 30,
			itemWidth: 8, // 设置宽度
			itemHeight: 7, // 设置高度
			symbolKeepAspect: false,
			textStyle: {
				color: "#000",
				rich: {
					name: {
						verticalAlign: "right",
						align: "left",
						fontSize: 14,
						color: "#FFFFFF"
					},
					value: {
						align: "left",
						fontSize: 14,
						color: "#FFFFFF"
					}
				}
			},
			data: dataList.value.map(item => {
				if (item.show) {
					return item.name;
				}
			}),
			formatter: function (data) {
				if (dataList.value && dataList.value.length) {
					for (var i = 0; i < dataList.value.length; i++) {
						if (data === dataList.value[i].name) {
							var value = dataList.value[i].value;
							var percentage = value + "%";
							return "{name| " + data + "}  {gap|       }" + "{value|" + value + " " + "}";
						}
					}
				}
			}
		},
		series: [
			// 外侧光线
			{
				name: "",
				type: "gauge",
				center: ["25%", "55%"],
				radius: "90%",
				startAngle: 235,
				endAngle: -50,
				min: 0,
				max: 100,
				axisLine: {
					show: true,
					lineStyle: {
						width: 2,
						color: [
							[
								100 / 100,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 0,
										color: "#526277"
									},
									{
										offset: 0.25,
										color: "rgba(4, 14, 54,0.4)"
									},
									{
										offset: 0.7,
										color: "rgba(4, 14, 54,0.4)"
									},
									{
										offset: 1,
										color: "#526277"
									}
								])
							],
							[1, "rgba(255,255,255,0)"]
						]
					}
				},

				axisTick: {
					show: 0
				},
				splitLine: {
					show: 0
				},
				axisLabel: {
					show: 0
				},
				pointer: {
					show: 0
				},
				detail: {
					show: 0
				}
			},
			{
				name: "",
				type: "gauge",
				center: ["25%", "55%"],
				radius: "80%",
				startAngle: 245,
				endAngle: -115,
				min: 0,
				max: 100,
				axisLine: {
					show: true,
					lineStyle: {
						width: 2,
						color: [
							[
								200 / 100,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 1,
										color: "#52bef0"
									},
									{
										offset: 0,
										color: "#13356b"
									}
								])
							],
							[1, "rgba(255,255,255,0)"]
						]
					}
				},

				axisTick: {
					show: 0
				},
				splitLine: {
					show: 0
				},
				axisLabel: {
					show: 0
				},
				pointer: {
					show: 0
				},
				detail: {
					show: 0
				}
			},
			{
				name: "",
				type: "pie",
				radius: [65, 75],
				center: ["25%", "55%"],
				hoverAnimation: true,
				itemStyle: {
					borderRadius: 10,
					borderWidth: 10
				},
				label: {
					show: false,
					position: "center"
				},
				emphasis: {
					label: {
						show: false
					}
				},
				labelLine: {
					show: false
				},
				data: dataList.value
			},
			{
				type: "pie",
				radius: ["57", "60"],
				center: ["25%", "55%"],
				label: {
					show: false
				},
				data: Pie()
			}
		]
	};
// 	let option = {
//   tooltip: {
//     trigger: 'item'
//   },
//   legend: {
//     top: '5%',
//     left: 'center'
//   },
//   series: [
//     {
//       name: 'Access From',
//       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: 'Search Engine' },
//         { value: 735, name: 'Direct' },
//         { value: 580, name: 'Email' },
//         { value: 484, name: 'Union Ads' },
//         { value: 300, name: 'Video Ads' }
//       ]
//     }
//   ]
// };
	echartsTest.value.setOption(option, true);
	window.addEventListener("resize", () => {
		console.log(echartsTest)
		echartsTest.value.resize();
	})
}

//获取安全管理
// const safeData = ref(null as any);
const getSafeInfo = async () => {
	const res: any = await getProjectInspectRecordCountApi({ projectSn: store.sn });
	// console.log("获取安全管理", res);
	// safeData.value = res.result;
	dataList.value[0].value = res.result.rectificationNum;
	dataList.value[1].value = res.result.totalNum - res.result.rectificationNum;
	questionTotal.value = res.result.totalNum;
	drawEchart();
};
//将方法暴露给父组件
defineExpose({
	getSafeInfo
})
onMounted(async () => {
	await getSafeInfo();
	// window.onresize = function(){
	// 	if(echartsTest.value){
	// 		echartsTest.value.resize();
	// 	}
	// }
});
</script>

<style lang="scss" scoped>
.rightAll {
	background: url("@/assets/images/commandScreen/card-right-all.png") no-repeat;
	// background-color: #fff;
	background-size: 100% 100%;
	width: 100%;
	height: 102.1%;
	.header{
		// width: 100%;
		// height: 100%;
		display: flex;
		// align-items: center;
		justify-content: space-between;
		padding: 20px 20px;
		border-bottom: 1px solid #0059ff;
		.hLeft{
			width: 50%;
			color: white;
		}
		.hRight{
			width: 50%;
		}
	}
	.content{
		padding: 0 20px;
		height: 100%;
		.contentTop{
			margin-top: 10px;
			width: 100%;
			height: 25%;
			.ctHead{
				background-color: #002f69;
				padding-bottom: 5px;
				color: #fff;
				height: 15%;
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				text{
					font-size: 24px;
					color: #fc4c4c;
				}
			}
			.ctContent{
				height: 85%;
				// background-color: darkred;
			}
		}
		.contentMiddle{
			width: 100%;
			height: 25%;
			.cmHead{
				background-color: #002f69;
				padding-bottom: 5px;
				color: #fff;
				height: 15%;
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				text{
					font-size: 24px;
					color: #0db027;
				}
			}
			.cmContent{
				height: 85%;
				// background-color: darkred;
			}
		}
		.contentBottom{
			// width: 100%;
			height: 42.5%;
			// background-color: darkred;

			// width: 100%;
			// background-color: #fff;
			// padding: 0 20px;
			position: relative;
			.cbHeader{
				width:100%;
				height: 40px;
				// background-color: darkred;
				.cbHeaderInfo{
					color: #fff;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.cubeIcon{
						width: 36px;
						height: 36px;
						// background-color: #fff;
						background: url("@/assets/images/commandScreen/head-cube.png") no-repeat;
						background-size: 100% 100%;
						// margin-left: -5px;
						margin: 0 3px 0 -5px;
					}
				}
				.cbHeaderLine{
					height: 4px;
					width: 100%;
					// background-color: darkblue;
					background: url("@/assets/images/commandScreen/head-line.png") no-repeat;
					background-size: 100% 100%;
				}
			}
			.cbContent{
				width: 100%;
				height: calc(100% - 40px);
				// background: #fff;
				.item{
					// width: 100%;
					line-height: 130%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					// background-color: green;
					color: #fff;
					.itemHead{
						white-space: nowrap;
						.itemHeadInner{
							font-size: 16px;
							border: 1px solid #f77c7d;	
							box-shadow: 0 0 0 1px #f77c7d;
							background: rgba(247,124,125, 0.4);
							border-radius: 3px;
							padding: 0 15px;
							margin: 9px 0;
							margin-left: 2px;
						}
						.itemHeadInner2{
							font-size: 16px;
							border: 1px solid #56a8f8;	
							box-shadow: 0 0 0 1px #56a8f8;
							background: rgba(86,168,248, 0.4);
							border-radius: 3px;
							padding: 0 15px;
							margin: 9px 0;
							margin-left: 2px;
						}
					}
					.itemContent{
						margin-left: 10px;
						font-size: 15px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						
					}
				}
			}
		}
	}
}

::v-deep .el-input__inner {
	color: #fff;
}
::v-deep .el-select .el-input .el-select__caret {
	color: #fff;
}
::v-deep .el-input__wrapper {
	width: 85%;
	height: 0%;
	background: #0d2956;
}
::v-deep .el-range-separator {
	color: #ccc;
	font-size: 10px;
}
::v-deep .el-range-input {
	color: #ccc;
	font-size: 10px;
}
</style>