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

<!-- eslint-disable vue/v-on-event-hyphenation -->
<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="结束日期"
					value-format="YYYY-MM-DD"
				/>
			</div>
		</div>
		<div class="content">
			<div class="contentTop contentMiddle" style="height: 28%">
				<div class="ctHead" @click="onEchartsSafeTab(1)">
					<div>
						重大隐患超期未整改<text>{{ overdueMajorDangerCount }}</text
						>个，占比<text>{{ overdueMajorDangerRate }}%</text>
					</div>
				</div>
				<div class="cmHead" @click="onEchartsSafeTab(2)">
					<div>
						重大隐患未销项<text>{{ majorDangerCount }}</text
						>个，占比<text>{{ majorDangerRate }}%</text>
					</div>
				</div>
				<div class="ctContent" style="position: relative">
					<div id="echartsSafe" style="width: 100%; height: 100%"></div>
					<div class="safetext1" v-if="dataList.length != 0">状态统计（较昨日）</div>
					<div class="safetext2" v-if="dataList.length != 0">风险统计（较昨日）</div>
					<div class="notoDta" v-if="dataList.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div>
				</div>
			</div>

			<!-- <div class="contentMiddle">
				<div class="cmHead">
					<div>
						重大隐患未销项<text>{{ majorDangerCount }}</text
						>个，占比<text>{{ majorDangerRate }}%</text>
					</div>
				</div>
				<div class="cmContent">
					<div id="echarts2" style="width: 100%; height: 100%"></div>
					<div class="notoDta" v-if="dataList2.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div>
				</div>
						</div> -->
			<div class="contentTop contentMiddle" style="height: 27%; margin-top: 10px">
				<leftBottom @openDialog="openDialogData"></leftBottom>
			</div>
			<div class="contentTop contentBottom" style="height: 22.5%; margin-top: 10px">
				<div class="cbHeader">
					<div class="cbHeaderInfo">
						<div class="cubeIcon"></div>
						<div class="cLeft title-tabs">
							<div class="title-color">风险走势图</div>
							<div>隐患风险预测趋势</div>
						</div>
					</div>
					<div class="cbHeaderLine"></div>
				</div>
				<div class="ctContent cbContent" style="margin-top: 1%; height: 78%">
					<div id="eacherRisk" style="width: 100%; height: 100%"></div>
					<div class="notoDta" v-if="riskList.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div>
				</div>
			</div>
			<div class="contentTop contentBottom" style="margin-top: 4px">
				<div class="cbHeader">
					<div class="cbHeaderInfo">
						<div class="cubeIcon"></div>
						<div class="cLeft title-tabs">
							<div class="title-color">特殊作业统计分析</div>
							<div>特殊作业风险预测趋势</div>
						</div>
					</div>
					<div class="cbHeaderLine"></div>
				</div>
				<div class="ctContent" style="margin-top: 1%; height: 73%">
					<div id="eacherSpecial" style="width: 100%; height: 100%"></div>
					<div class="notoDta" v-if="specialList.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div>
				</div>
			</div>
			<!-- <div class="contentBottom">
			<div class="cbHeader">
					<div class="cbHeaderInfo">
						<div class="cubeIcon"></div>
						<div class="cLeft">隐患智能分析</div>
					</div>
					<div class="cbHeaderLine"></div>
				</div>
				<div class="cbContent">
					<div v-if="listData2.length < 10 && listData2.length !== 0">
						<div class="item" v-for="(item, index) in listData2" :key="index">
							<div class="itemHead">
								<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
								<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
								<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
								<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
								<div class="itemContent">
									<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
										<text style="margin-left: 10px">{{ item.msg }}</text>
									</el-tooltip>
								</div>
							</div>
							<div class="itemTime">
								<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
							</div>
						</div>
					</div>
					<div class="notoDta" v-else-if="listData2.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div>
					<div v-else>
						<vue3-seamless-scroll
							v-if="listData2.length > 0"
							:speed="1"
							:list="listData2"
							:step="0.3"
							:limitScrollNum="10"
							:hover="true"
							class="scroll"
						>
							<div class="item" v-for="(item, index) in listData2" :key="index">
								<div class="itemHead">
									<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
									<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
									<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
									<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
									<div class="itemContent">
										<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
											<text style="margin-left: 10px">{{ item.msg }}</text>
										</el-tooltip>
									</div>
								</div>
								<div class="itemTime">
									<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
								</div>
							</div>
						</vue3-seamless-scroll>
					</div>
				</div>
						</div> -->
		</div>
	</div>
</template>

<script setup lang="ts">
// import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// import Card from "@/components/card.vue";
import { onMounted, ref, watch } from "vue";
import { GlobalStore } from "@/stores";
import leftBottom from "@/views/commandScreen/components/leftBottom.vue";
import {
	// getProjectInspectRecordCountApi,
	// selectQualityStatisticsApi
	getSelectQualityStatisticsNumApi,
	getCountDangerLevelApi,
	getNoticeListApi,
	getInspectionSelectQualityApi,
	getInspectionRiskChartApi,
	getSpecialCountAllSpecialApi
} from "@/api/modules/projectOverview";

import * as echarts from "echarts";
const store = GlobalStore();
const echartsTest = ref();
let questionTotal = ref(0 as any);

const emits = defineEmits(["openDialog"]);

// 打开弹窗
const openDialogData = (obj: any) => {
	console.log("111111111111");
	emits("openDialog", obj);
};

let dateRange = ref([] as any);

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

let listData2 = ref([
	// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
	// { title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
	// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
	// { title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
	// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
	// { title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
	// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
	// { title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
	// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
	// { title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
	// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
]);

let dataList = ref([
	{
		enumType: "",
		value: 30,
		show: true,
		name: "重大隐患",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			normal: {
				color: "#EC6266",
				borderWidth: 20
			}
		}
	},
	{
		enumType: "",
		value: 70,
		show: true,
		name: "一般隐患",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			normal: {
				color: "#6375C7",
				borderWidth: 20
			}
		}
	}
]);

const classColorList = ref(["#EC6266", "#6375C7", "#038cf5", "#01d6f4"]);

const onEchartsSafeTab = (type: number) => {
	const resultInfo = {
		index: 7,
		title: "超期未整改",
		majorInfo: {
			isOverdueRectification: 1,
			isNotQualified: 0,
			inspectStartTime: dateRange.value[0],
			inspectEndTime: dateRange.value[1]
		}
	};
	if (type == 1) {
		resultInfo.title = "超期未整改";
		resultInfo.majorInfo.isOverdueRectification = 1;
		resultInfo.majorInfo.isNotQualified = 0;
		emits("openDialog", resultInfo);
	} else if (type == 2) {
		resultInfo.title = "未销项";
		resultInfo.majorInfo.isOverdueRectification = 0;
		resultInfo.majorInfo.isNotQualified = 1;
		emits("openDialog", resultInfo);
	}
};

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 = {
		animation: false, // 取消动画
		tooltip: {
			trigger: "item"
		},
		title: {
			text: questionTotal.value,
			subtext: "累计隐患总数",
			x: "17%",
			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: [
			{
				title: "风险图",
				selectedMode: true, // 取消图例上的点击事件
				icon: "rect",
				type: "plain",
				orient: "vertical",
				right: "0%",
				top: "20%",
				align: "left",
				itemGap: 14,
				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"
						},
						color1: {
							align: "left",
							fontSize: 14,
							color: "#0063C4"
						},
						color2: {
							align: "left",
							fontSize: 14,
							color: "#D81E06"
						},
						value1: {
							align: "left",
							fontSize: 12,
							color: "#FFFFFF"
						}
					}
				},
				data: dataList.value.map((item, index) => {
					if (item.show && index != 4) {
						return item.name;
					}
				}),
				formatter: function (data: any) {
					if (dataList.value && dataList.value.length) {
						for (let i = 0; i < dataList.value.length; i++) {
							if (data === dataList.value[i].name) {
								if (data == "无") return;
								let value = dataList.value[i].value;
								let percentage = dataList.value[i].greatFaultLevelNumJzrRate + "%";
								const greatFaultLevelNumJzrRate = Number(dataList.value[i].greatFaultLevelNumJzrRate);
								const templateString = greatFaultLevelNumJzrRate > 0 ? `color1|↑` : "color2|↓";
								return "{name| " + data + "}  {gap|  }" + `{value|${value}} {${templateString}} {value1|${percentage}}`;
							}
						}
					}
				}
			},
			{
				name: "状态统计（较昨日）",
				selectedMode: false, // 取消图例上的点击事件
				icon: "none",
				type: "plain",
				orient: "vertical",
				left: "35%",
				top: "20%",
				align: "left",
				itemGap: 14,
				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"
						},
						color1: {
							align: "left",
							fontSize: 14,
							color: "#0063C4"
						},
						color2: {
							align: "left",
							fontSize: 14,
							color: "#D81E06"
						},
						value1: {
							align: "left",
							fontSize: 12,
							color: "#FFFFFF"
						}
					}
				},
				data: dataList.value.map(item => {
					if (item.show) {
						return item.name;
					}
				}),
				formatter: function (data: any) {
					if (dataList.value && dataList.value.length) {
						for (let i = 0; i < dataList.value.length; i++) {
							if (data === dataList.value[i].name) {
								let value = dataList.value[i].rectificationNum;
								let rectificationName = dataList.value[i].rectificationName;
								const rectificationNumJzrRate = Number(dataList.value[i].rectificationNumJzrRate);
								let percentage = rectificationNumJzrRate.toFixed(2) + "%";
								const templateString = rectificationNumJzrRate > 0 ? `color1|↑` : "color2|↓";
								// ↓
								return (
									"{name| " + rectificationName + "}  {gap|  }" + `{value|${value}} {${templateString}} {value1|${percentage}}`
								);
							}
						}
					}
				}
			}
		],
		series: [
			// 外侧光线
			{
				name: "",
				type: "gauge",
				center: ["18%", "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: ["18%", "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: ["18%", "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: ["18%", "55%"],
				label: {
					show: false
				},
				data: Pie()
			}
		]
	};
	echartsTest.value.setOption(option, true);
	window.addEventListener("resize", () => {
		console.log(echartsTest);
		echartsTest.value.resize();
	});
	console.log(echartsTest.value);

	//图例点击事件
	// echartsTest.value.on("legendselectchanged", (params: any) => {
	// 	console.log(emits);
	// 	echartsTest.value.setOption({
	// 		legend: { selected: { [params.name]: true } }
	// 	});

	// 	emits("openDialog", {
	// 		index: 7,
	// 		title: params.name + "超期未整改",
	// 		majorInfo: {
	// 			isOverdueRectification: 1,
	// 			isNotQualified: 0,
	// 			enumType: dataList.value.find(item => item.name == params.name)?.enumType,
	// 			inspectStartTime: dateRange.value[0],
	// 			inspectEndTime: dateRange.value[1]
	// 		}
	// 	});
	// });
}

const riskList = ref([]);
// 风险走势图
function getRiskEchart() {
	console.log("我是风险走势图11");
	const echartsTest = echarts.init(document.getElementById("eacherRisk"));
	let option = {
		tooltip: {
			trigger: "axis",
			confine: true
		},
		legend: {
			trigger: "item",
			position: "inside",
			x: "right",
			textStyle: {
				color: "#fff"
			},
			itemHeight: 10,
			icon: "roundRect",
			data: ["重大风险", "较大风险", "一般风险", "低风险"]
		},
		color: ["#FF3232", "#FF9901", "#FFE500", "#3A3AE7"],
		grid: {
			left: "6%",
			right: "6%",
			top: "19%",
			bottom: "0%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			boundaryGap: false,
			data: riskList.value.map((item: any) => item.yearMonth),
			axisLabel: {
				color: "#fff"
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#2079A0"
				}
			}
		},
		yAxis: {
			name: "数量",
			nameTextStyle: {
				color: "#fff"
			},
			axisLabel: {
				color: "#fff"
			},
			splitLine: {
				lineStyle: {
					color: "#2079A0"
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#2079A0"
				}
			}
			// type: 'value'
		},
		dataZoom: [
			{
				id: "dataZoomX",
				type: "inside",
				xAxisIndex: [0],
				brushSelect: false,
				zoomOnMouseWheel: false,
				moveOnMouseWheel: true, // 开启滚轮平移
				moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
				preventDefaultMouseMove: false,
				// start:100,
				startValue: riskList.value.length - 1,
				endValue: riskList.value.length - 6,
				// 滚动条高度
				width: 8,
				// 滚动条显示位置
				// height: "80%",
				// 距离右边
				right: 3,
				// 控制手柄的尺寸
				handleSize: 0,
				filterMode: "empty"
				// top: "top",
			}
		],
		series: [
			{
				name: "重大风险",
				type: "line",
				// stack: "Total",
				smooth: true,
				symbol: "none",
				data: riskList.value.map((item: any) => item.greatFaultLevelNum)
			},
			{
				name: "较大风险",
				type: "line",
				// stack: "Total",
				smooth: true,
				symbol: "none",
				data: riskList.value.map((item: any) => item.largerRiskNum)
			},
			{
				name: "一般风险",
				type: "line",
				// stack: "Total",
				smooth: true,
				symbol: "none",
				data: riskList.value.map((item: any) => item.generalRiskNum)
			},
			{
				name: "低风险",
				type: "line",
				// stack: "Total",
				smooth: true,
				symbol: "none",
				data: riskList.value.map((item: any) => item.lowRiskNum)
			}
		]
	};
	echartsTest.setOption(option, true);
	window.addEventListener("resize", () => {
		console.log(echartsTest);
		echartsTest.resize();
	});
	console.log(echartsTest);

	//图例点击事件
	// echartsTest.value.on("legendselectchanged", (params: any) => {
	// 	console.log(emits);
	// 	echartsTest.value.setOption({
	// 		legend: { selected: { [params.name]: true } }
	// 	});

	// 	emits("openDialog", {
	// 		index: 7,
	// 		title: params.name + "超期未整改",
	// 		majorInfo: {
	// 			isOverdueRectification: 1,
	// 			isNotQualified: 0,
	// 			enumType: dataList.value.find(item => item.name == params.name)?.enumType,
	// 			inspectStartTime: dateRange.value[0],
	// 			inspectEndTime: dateRange.value[1]
	// 		}
	// 	});
	// });
}
const specialList = ref([]);
// 特殊作业统计图
function getSpecialEchart() {
	console.log("我是特殊作业统计图11");
	const echartsTest = echarts.init(document.getElementById("eacherSpecial"));
	// const maxCount: any = specialList.value.sort((a: any, b: any) => b.totalNum - a.totalNum);
	const safeList = specialList.value.map((item: any) => {
		return {
			...item,
			x: item.date,
			y: item.totalNum
		};
	});
	let option = {
		tooltip: {
			trigger: "item",
			position: "inside",
			// confine: true,
			axisPointer: {
				// 坐标轴指示器，鼠标放上时变阴影，而不是线
				type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
			},
			// textStyle: {
			// 	color: "#000000"
			// },
			// backgroundColor: "#F3F3F3",
			extraCssText: "width:120px;white-space:pre-wrap;box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);",
			formatter: function (params: any) {
				console.log(params);
				const obj = safeList[params.dataIndex];
				console.log(obj, safeList, params, params.dataIndex);
				// 当鼠标悬停在柱子上时，显示实际数值和百分比
				return `动火安全作业：${obj.xzSpecialOperationFireSafetyNum}\n盲板抽堵作业：${obj.xzBlindPlatePlugSafeNum}\n动土安全作业：${obj.xzGroundSafetNum}\n高处作业作业：${obj.xzHighJobSafeNum}\n吊装安全作业：${obj.xzHoistSafetyWorkNum}\n受限空间作业：${obj.xzLimitSpaceSafeNum}\n断路安全作业：${obj.xzOpenCircuitSafeNum}\n用电安全作业：${obj.xzTemporaryElectricitySafeNum}`;
			}
		},
		grid: {
			left: "3%",
			right: "6%",
			bottom: "0%",
			top: "3%",
			containLabel: true
		},
		xAxis: {
			// name: '数量',  //X轴标题
			type: "value",
			data: safeList.map(item => item.y),
			axisTick: {
				// 轴刻度
				show: false
			},
			axisLine: {
				// 轴线
				show: false,
				color: "#2079A0"
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#2079A0"
				}
			},
			axisLabel: {
				color: "#2079A0"
			}
		},
		yAxis: {
			type: "category",
			data: safeList.map(item => item.x),
			axisTick: {
				// 轴刻度
				show: false,
				lineStyle: {
					color: "#2079A0"
				}
			},
			axisLine: {
				// 轴线
				show: false,
				color: "#2079A0"
			},
			splitLine: {
				lineStyle: {
					color: "#2079A0"
				}
			},
			//设置文本过长超出隐藏...表示
			axisLabel: {
				color: "#2079A0"
				// formatter: function (params: any) {
				// 	let val = "";
				// 	if (params.length > 4) {
				// 		val = params.substr(0, 4) + "...";
				// 		return val;
				// 	} else {
				// 		return params;
				// 	}
				// }
			}
		},
		dataZoom: [
			{
				id: "dataZoomY",
				type: "inside",
				yAxisIndex: [0],
				brushSelect: false,
				zoomOnMouseWheel: false,
				moveOnMouseWheel: true, // 开启滚轮平移
				moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
				preventDefaultMouseMove: false,
				// start:100,
				startValue: safeList.length - 1,
				endValue: safeList.length - 4,
				// 滚动条高度
				width: 8,
				// 滚动条显示位置
				// height: "80%",
				// 距离右边
				right: 3,
				// 控制手柄的尺寸
				handleSize: 0,
				filterMode: "empty"
				// top: "top",
			}
		],
		series: [
			{
				data: safeList.map(item => item.y),
				type: "bar",
				barWidth: "35%",
				color: "#268dff"
			}
		]
	};
	echartsTest.setOption(option, true);
	window.addEventListener("resize", () => {
		console.log(echartsTest);
		echartsTest.resize();
	});
	console.log(echartsTest);
}

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;
	const result: any = await getInspectionSelectQualityApi({
		projectSn: store.sn,
		inspectStartTime: dateRange.value[0],
		inspectEndTime: dateRange.value[1]
	});

	console.log("安全统计数据", result);
	dataList.value = [];
	for (let index = 0; index < 5; index++) {
		let obj = {
			enumType: "",
			value: 30,
			show: true,
			name: "重大隐患",
			greatFaultLevelNumJzrRate: "",
			rectificationNum: "",
			rectificationNumJzrRate: "",
			rectificationName: "",
			itemStyle: {
				normal: {
					color: classColorList.value[index],
					borderWidth: 20
				}
			}
		};
		if (index == 0) {
			obj.value = result.result.greatFaultLevelNum;
			obj.greatFaultLevelNumJzrRate = result.result.greatFaultLevelNumJzrRate;
			obj.rectificationNum = result.result.rectificationNum;
			obj.rectificationNumJzrRate = result.result.rectificationNumYesterday;
			obj.rectificationName = "未整改";
		} else if (index == 1) {
			obj.name = "较大隐患";
			obj.value = result.result.largerRiskNum;
			obj.greatFaultLevelNumJzrRate = result.result.largerRiskNumJzrRate;
			obj.rectificationNum = result.result.reviewNum;
			obj.rectificationNumJzrRate = result.result.reviewNumYesterday;
			obj.rectificationName = "未复查";
		} else if (index == 2) {
			obj.name = "一般隐患";
			obj.value = result.result.generalRiskNum;
			obj.greatFaultLevelNumJzrRate = result.result.generalRiskNumJzrRate;
			obj.rectificationNum = result.result.verificationNum;
			obj.rectificationNumJzrRate = result.result.verificationNumJzrRate;
			obj.rectificationName = "未核验";
		} else if (index == 3) {
			obj.name = "低隐患";
			obj.value = result.result.lowRiskNum;
			obj.greatFaultLevelNumJzrRate = result.result.lowRiskNumJzrRate;
			obj.rectificationNum = result.result.closeInspectionNum;
			obj.rectificationNumJzrRate = result.result.closeInspectionNumJzrRate;
			obj.rectificationName = "合格";
		} else if (index == 4) {
			obj.name = "无";
			obj.value = result.result.lowRiskNum;
			obj.greatFaultLevelNumJzrRate = result.result.lowRiskNumJzrRate;
			obj.rectificationNum = result.result.overdueNotCloseNum;
			obj.rectificationNumJzrRate = result.result.overdueNotCloseNumYesterday;
			obj.rectificationName = "超期未关闭";
		}

		dataList.value.push(obj);
	}
	questionTotal.value = result.result.dangerNum;
	// overdueMajorDangerCount.value = result.result.overdueRectificationNum;
	// overdueMajorDangerRate.value = result.result.overdueRectificationNumRatio;
	// majorDangerCount.value = result.result.notCloseNum;
	// majorDangerRate.value = result.result.percent;
	console.log("1111111111111", dataList.value);

	const res: any = await getCountDangerLevelApi({
		projectSn: store.sn,
		isOverdueRectification: 1,
		inspectStartTime: dateRange.value[0],
		inspectEndTime: dateRange.value[1]
	});
	// dataList.value = res.result.data.map((item: any, index: number) => {
	// 	return {
	// 		...item,
	// 		value: item.count,
	// 		show: true,
	// 		itemStyle: {
	// 			normal: {
	// 				color: classColorList.value[index],
	// 				borderWidth: 20
	// 			}
	// 		}
	// 	};
	// });
	// questionTotal.value = res.result.count;
	// console.log("饼图", res);

	const filterResult = res.result.data.find((item: any) => item.enumType == 1);

	overdueMajorDangerCount.value = filterResult.count;
	overdueMajorDangerRate.value = filterResult.percent;

	drawEchart();
};

let dataList2 = ref([
	{
		enumType: "",
		value: 30,
		show: true,
		name: "重大隐患",
		itemStyle: {
			normal: {
				color: "#038cf5",
				borderWidth: 20
			}
		}
	},
	{
		value: 70,
		show: true,
		name: "一般隐患",
		itemStyle: {
			normal: {
				color: "#01d6f4",
				borderWidth: 20
			}
		}
	}
]);

// function drawEchart2() {
// 	let echartsTest = echarts.init(document.getElementById("echarts2"));
// 	let option = {
// 		tooltip: {
// 			trigger: "item"
// 		},
// 		title: {
// 			text: questionTotal.value,
// 			// text: '100%',
// 			subtext: "隐患未销项",
// 			x: "24%",
// 			y: "center",
// 			textAlign: "center",
// 			textStyle: {
// 				color: "#fff",
// 				fontSize: 26,
// 				fontWeight: "normal",
// 				// align: "center",
// 				// width: "200px",
// 				fontFamily: "sadigitalNumber"
// 			},
// 			subtextStyle: {
// 				color: "#ccc",
// 				fontSize: 12,
// 				fontWeight: "normal"
// 				// align: "center",
// 			}
// 		},
// 		legend: {
// 			selectedMode: true, // 取消图例上的点击事件
// 			icon: "rect",
// 			type: "plain",
// 			orient: "vertical",
// 			left: "55%",
// 			top: "20%",
// 			align: "left",
// 			itemGap: 20,
// 			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: dataList2.value.map(item => {
// 				if (item.show) {
// 					return item.name;
// 				}
// 			}),
// 			formatter: function (data: any) {
// 				if (dataList2.value && dataList2.value.length) {
// 					for (var i = 0; i < dataList2.value.length; i++) {
// 						if (data === dataList2.value[i].name) {
// 							var value = dataList2.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: 0.8,
// 										color: "#52bef0"
// 									},
// 									{
// 										offset: 0.5,
// 										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: dataList2.value
// 			},
// 			{
// 				type: "pie",
// 				radius: ["57", "60"],
// 				center: ["25%", "55%"],
// 				label: {
// 					show: false
// 				},

// 				data: Pie()
// 			}
// 		]
// 	};
// 	echartsTest.setOption(option, true);
// 	window.addEventListener("resize", () => {
// 		echartsTest.resize();
// 	});
// 	//图例点击事件
// 	echartsTest.on("legendselectchanged", (params: any) => {
// 		console.log(emits);
// 		echartsTest.setOption({
// 			legend: { selected: { [params.name]: true } }
// 		});

// 		emits("openDialog", {
// 			index: 7,
// 			title: params.name + "未消项目",
// 			majorInfo: {
// 				isOverdueRectification: 0,
// 				isNotQualified: 1,
// 				enumType: dataList2.value.find(item => item.name == params.name)?.enumType,
// 				inspectStartTime: dateRange.value[0],
// 				inspectEndTime: dateRange.value[1]
// 			}
// 		});
// 	});
// }

const qualityInfo = async () => {
	// const res: any = await selectQualityStatisticsApi({ projectSn: store.sn });
	// dataList2.value[0].value = res.result.total.rectificationNum;
	// dataList2.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
	// questionTotal.value = res.result.total.totalNum;

	const res: any = await getCountDangerLevelApi({
		projectSn: store.sn,
		isNotQualified: 1,
		inspectStartTime: dateRange.value[0],
		inspectEndTime: dateRange.value[1]
	});
	// dataList2.value = res.result.data.map((item: any, index: number) => {
	// 	return {
	// 		...item,
	// 		value: item.count,
	// 		show: true,
	// 		itemStyle: {
	// 			normal: {
	// 				color: classColorList.value[index],
	// 				borderWidth: 20
	// 			}
	// 		}
	// 	};
	// });
	// questionTotal.value = res.result.count;

	const filterResult = res.result.data.find((item: any) => item.enumType == 1);
	majorDangerCount.value = filterResult.count;
	majorDangerRate.value = filterResult.percent;

	// drawEchart2();
};

const getSelectQualityStatisticsNum = async () => {
	const res: any = await getSelectQualityStatisticsNumApi({
		projectSn: store.sn,
		inspectStartTime: dateRange.value[0],
		inspectEndTime: dateRange.value[1]
	});
	console.log(res);
};

const getNoticeList = async () => {
	// const res: any = await getNoticeListApi({ projectSn: store.sn, type: 10, pageNo: 1, pageSize: 99999, });
	const res: any = await getNoticeListApi({ isBigScreen: 1, type: 31 });
	console.log("隐患智能分析", res);
	listData2.value = res.result.records;
	// listData2.value.push({
	// 	accountId:"1779721457571291137",
	// 	id:"1789601398432559107",
	// 	imageUrl:null,
	// 	isRead:0,
	// 	msg:"区域1检查到一条四川成润智慧科技的雨落管安全隐患问题，请注意监督整改！",
	// 	payload:"{\"level\":4,\"time\":\"2024-05-12 18:19:40\"}",
	// 	sendTime: "2024-05-12 18:19:57",
	// 	title: "大屏通知",
	// 	type: "31",
	// })
	console.log("================================", listData2.value);
};

watch(
	dateRange,
	async () => {
		if (dateRange.value == null) {
			dateRange.value = [];
		}
		await getSafeInfo();
		await qualityInfo();
		// await getSelectQualityStatisticsNum();
	},
	{ deep: true }
);

const getInspectionRiskChart = async () => {
	const res: any = await getInspectionRiskChartApi({
		projectSn: store.sn,
		queryType: 1
	});
	console.log("风险走势图", res);
	riskList.value = res.result;
	getRiskEchart();
};

const getCountAllSpecial = async () => {
	const res: any = await getSpecialCountAllSpecialApi({
		projectSn: store.sn,
		type: 1
	});
	console.log("特殊作业图", res);
	specialList.value = res.result;
	getSpecialEchart();
};

onMounted(async () => {
	getInspectionRiskChart();
	getCountAllSpecial();
	await getSafeInfo();
	await qualityInfo();
	await getSelectQualityStatisticsNum();
	await getNoticeList();
});
</script>

<style lang="scss" scoped>
.safetext1 {
	position: absolute;
	top: 6%;
	color: white;
	left: 44%;
}
.safetext2 {
	position: absolute;
	top: 6%;
	color: white;
	right: 3%;
}

.title-tabs {
	width: initial !important;
	display: flex;
	align-items: center;
	height: 13%;
	// margin-left: 4%;
	color: white !important;

	> div {
		// padding: 2px 0;
		font-size: 13px;
		font-weight: normal;
		line-height: 25px;
		width: 170px;
		width: 140px;
		text-align: center;
		// background-color: #315296;
		background: rgb(0, 33, 116);
		background: linear-gradient(270deg, rgba(0, 33, 116, 0.8) 0%, rgba(40, 88, 184, 0.3) 96%);
		cursor: pointer;
	}

	.title-color {
		// background-color: #1449b6;
		background: rgb(0, 33, 116);
		background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
	}
}

.notoDta {
	top: 25%;
	width: 50%;
	// left: 40%;
	position: absolute;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);

	img {
		width: 40%;
		margin: 5% 30%;
	}

	p {
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -6% 30%;
	}
}

.scroll {
	height: 100%;
	overflow: hidden;
}

.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%;
			font-size: 20px;
			font-weight: bold;
			background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}

		.hRight {
			width: 50%;
		}
	}

	.content {
		padding: 0 20px;
		height: calc(100% - 100px);

		.contentTop {
			margin-top: 10px;
			width: 100%;
			height: 22%;

			.ctHead {
				background-color: #002f69;
				padding-bottom: 5px;
				color: #fff;
				height: 13%;
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				cursor: pointer;

				text {
					font-size: 24px;
					color: #fc4c4c;
				}
			}

			.ctContent {
				height: 80%;
				// background-color: darkred;
			}
		}

		.contentMiddle {
			width: 100%;
			height: 25%;

			.cmHead {
				background-color: #002f69;
				padding-bottom: 5px;
				color: #fff;
				height: 13%;
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				margin-top: 1%;
				cursor: pointer;

				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;
			overflow: hidden;

			.cbHeader {
				width: 100%;
				height: 40px;

				// background-color: darkred;
				.cbHeaderInfo {
					color: #fff;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.cLeft {
						width: 50%;
						font-size: 20px;
						font-weight: bold;
						background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
						-webkit-background-clip: text;
						background-clip: text;
						color: transparent;
					}

					.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% - 55px);
				overflow: hidden;
				position: relative;
				// height: 100%;

				// background: #fff;
				.item {
					width: 100%;
					line-height: 110%;
					display: flex;
					align-items: center;
					// justify-content: flex-start;
					justify-content: space-between;
					// background-color: green;
					color: #fff;

					.itemHead {
						white-space: nowrap;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 16px;
						width: 65%;

						.itemHeadInner1 {
							border: 1px solid #e02020;
							box-shadow: 0 0 0 1px #e02020;
							background: rgba(224, 32, 32, 0.4);
							border-radius: 3px;
							padding: 0 15px;
							margin: 9px 0;
							margin-left: 2px;
						}

						.itemHeadInner2 {
							font-size: 16px;
							border: 1px solid #f46649;
							box-shadow: 0 0 0 1px #f46649;
							background: rgba(244, 102, 73, 0.4);
							border-radius: 3px;
							padding: 0 15px;
							margin: 9px 0;
							margin-left: 2px;
						}

						.itemHeadInner3 {
							font-size: 16px;
							border: 1px solid #ecbe45;
							box-shadow: 0 0 0 1px #ecbe45;
							background: rgba(236, 190, 69, 0.4);
							border-radius: 3px;
							padding: 0 15px;
							margin: 9px 0;
							margin-left: 2px;
						}

						.itemHeadInner4 {
							font-size: 16px;
							border: 1px solid #5394f7;
							box-shadow: 0 0 0 1px #5394f7;
							background: rgba(83, 148, 247, 0.4);
							border-radius: 3px;
							padding: 0 23px;
							margin: 9px 0;
							margin-left: 2px;
						}

						.itemContent {
							margin-left: 10px;
							font-size: 15px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 100%;
							line-height: 30px;
						}
					}

					.itemTime {
						// background-color: #fff;
						width: 35%;
						font-size: 16px;
						margin-left: 10px;

						.timeInfo {
							width: 100%;
							// display: flex;
							// justify-content: flex-end;
							// margin-right: 10px;
							font-size: 15px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}

			// .cbContent {
			// 	width: 100%;
			// 	height: calc(100% - 60px);

			// 	// 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;
			// 			}

			// 			.itemHeadInner3 {
			// 				font-size: 16px;
			// 				border: 1px solid #0db027;
			// 				box-shadow: 0 0 0 1px #0db027;
			// 				background: rgba(13, 176, 39, 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>