<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
	<div class="rightAll">
		<div class="card-content">
			<Card title="隐患智能统计分析">
				<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 class="contentTop contentMiddle">
					<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="dataCode != 200">
							<img src="@/assets/images/noData.png" alt="" />
							<p>暂无数据</p>
						</div>
					</div>
				</div>
			</Card>
		</div>
		<div class="enterprise-box">
			<Card title="各企业本周数据统计">
				<el-carousel @change="onChange" indicator-position="none" style="width: 100%; height: 100%">
					<el-carousel-item v-for="item in enterpriseInfo.dataList" :key="item.enterpriseId" style="width: 100%; height: 100%">
						<div class="enterprise-info">
							<!-- <el-tooltip class="text-ellipsis" effect="dark" content="Top Left prompts info" placement="top-start">
								<div style="text-ellipsis">{{ item.enterpriseName }}</div>
							</el-tooltip> -->
							<div class="text-ellipsis">
								{{ item.enterpriseName }}
							</div>
							<div class="line1" style="display: flex">
								<span style="margin-left: 15px">事故报警总数</span>
								<div class="numberCard" v-for="(ele, i) in `${enterpriseInfo.dataInfo.emergencyNum}`" :key="i">
									{{ ele }}
								</div>
							</div>
						</div>
						<div class="enterprise-list">
							<div class="enterprise-title">
								<div>在场人员总数</div>
								<div>{{ enterpriseInfo.dataInfo.highWorkerNumThisWeek }}/{{ enterpriseInfo.dataInfo.inServiceNum }}</div>
							</div>
							<div class="enterprise-title">
								<div>企业安全分</div>
								<div>{{ enterpriseInfo.dataInfo.safeScore }}</div>
							</div>
							<div class="enterprise-title">
								<div>安全隐患总数</div>
								<div>{{ enterpriseInfo.dataInfo.securityNum }}</div>
							</div>
							<div class="enterprise-title">
								<div>质量隐患总数</div>
								<div>{{ enterpriseInfo.dataInfo.qualityNum }}</div>
							</div>
							<div class="enterprise-title">
								<div>特殊作业数量</div>
								<div>{{ enterpriseInfo.dataInfo.specialNum }}</div>
							</div>
							<div class="enterprise-title">
								<div>培训未通过率</div>
								<div>{{ enterpriseInfo.dataInfo.trainNotPassRadio }}%</div>
							</div>
						</div>
					</el-carousel-item>
				</el-carousel>
			</Card>
		</div>
		<div class="manAnalysis-box">
			<Card title="区域人员数量分析">
				<div id="eacherManAnalysis" style="width: 100%; height: 100%"></div>
			</Card>
		</div>
	</div>
</template>

<script setup lang="ts">
// import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import Card from "@/components/card.vue";
import { onMounted, ref, watch, reactive } from "vue";
import { GlobalStore } from "@/stores";
import { getCountDangerLevelApi, getInspectionSelectQualityApi } from "@/api/modules/projectOverview";
import { getEnterpriseInfoListApi, getStatsEnterpriseWeekApi, getCountWorkerNumByRegionApi } from "@/api/modules/agjtOverviewApi";

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 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
			}
		}
	}
]);
let dataCode = ref(0);

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") as any);
	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: 10,
				fontWeight: "normal"
				// align: "center"
			}
		},
		legend: [
			{
				title: "风险图",
				selectedMode: true, // 取消图例上的点击事件
				icon: "rect",
				type: "plain",
				orient: "vertical",
				right: "0%",
				top: "25%",
				align: "left",
				itemGap: 14,
				itemWidth: 8, // 设置宽度
				itemHeight: 7, // 设置高度
				symbolKeepAspect: false,
				textStyle: {
					color: "#000",
					rich: {
						name: {
							verticalAlign: "right",
							align: "left",
							fontSize: 10,
							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;
								const greatFaultLevelNumJzrRate = Number(dataList.value[i].greatFaultLevelNumJzrRate);
								let percentage =
									greatFaultLevelNumJzrRate >= 0
										? greatFaultLevelNumJzrRate + "%"
										: greatFaultLevelNumJzrRate.toString().substr(1) + "%";

								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: "25%",
				align: "left",
				itemGap: 14,
				itemWidth: 8, // 设置宽度
				itemHeight: 7, // 设置高度
				symbolKeepAspect: false,
				textStyle: {
					color: "#000",
					rich: {
						name: {
							verticalAlign: "right",
							align: "left",
							fontSize: 10,
							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 >= 0
										? rectificationNumJzrRate.toFixed(2) + "%"
										: rectificationNumJzrRate.toFixed(2).toString().substr(1) + "%";
								const templateString = rectificationNumJzrRate > 0 ? `color1|↑` : "color2|↓";
								// ↓
								return (
									"{name| " + rectificationName + "}  {gap|  }" + `{value|${value}} {${templateString}} {value1|${percentage}}`
								);
							}
						}
					}
				}
			}
		],
		series: [
			{
				name: "",
				type: "gauge",
				center: ["18%", "50%"],
				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 getSafeInfo = async (showLoading: boolean) => {
	// 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]
		},
		showLoading
	);

	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;
	dataCode.value = result.code;
	// 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]
		},
		showLoading
	);
	// 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();
};

const qualityInfo = async (showLoading: boolean) => {
	// 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]
		},
		showLoading
	);
	// 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 workerRegionInfo = reactive({
	workerRegionList: [] as any[],
	dateList: []
});
function getManAnalysisEchart() {
	const echartsTest = echarts.init(document.getElementById("eacherManAnalysis") as any);
	let option = {
		tooltip: {
			trigger: "axis",
			confine: true
		},
		legend: {
			trigger: "item",
			position: "inside",
			top: "3%",
			x: "center",
			textStyle: {
				color: "#fff"
			},
			itemWidth: 10,
			itemHeight: 10,
			icon: "roundRect",
			data: workerRegionInfo.workerRegionList.map((item: any) => item.regionName)
		},
		// color: ["#2BA5FF", "#F97766", "#1EF1FF", "#1EF1FF"],
		grid: {
			left: "8%",
			right: "8%",
			top: "15%",
			bottom: "5%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			boundaryGap: false,
			data: workerRegionInfo.dateList.map((item: any) => item.date),
			axisLabel: {
				color: "#fff"
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#172A44"
				}
			}
		},
		yAxis: {
			// name: "数量",
			nameTextStyle: {
				color: "#fff"
			},
			axisLabel: {
				color: "#fff"
			},
			splitLine: {
				lineStyle: {
					color: "#172A44"
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false,
				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: workerRegionInfo.dateList.length - 1,
				endValue: workerRegionInfo.dateList.length - 4,
				// 滚动条高度
				width: 8,
				// 滚动条显示位置
				// height: "80%",
				// 距离右边
				right: 3,
				// 控制手柄的尺寸
				handleSize: 0,
				filterMode: "empty"
				// top: "top",
			}
		],
		series: workerRegionInfo.workerRegionList.map((item: any) => {
			const color1 = Math.floor(Math.random() * 256);
			const color2 = Math.floor(Math.random() * 256);
			const color3 = Math.floor(Math.random() * 256);
			return {
				name: item.regionName,
				type: "line",
				// stack: "Total",
				lineStyle: {
					color: `rgba(${color1}, ${color2}, ${color3}, 1)`,
					shadowBlur: 12,
					shadowColor: `rgba(${color1}, ${color2}, ${color3}, 0.9)`,
					shadowOffsetX: 1,
					shadowOffsetY: 1
				},
				itemStyle: {
					color: `rgba(${color1}, ${color2}, ${color3}, 1)`,
					borderWidth: 1,
					borderColor: "#FFF"
				},
				smooth: true,
				symbol: "none",
				data: item.list
			};
		})
		// [
		// 	{
		// 		name: "一号区域",
		// 		type: "line",
		// 		// stack: "Total",
		// 		lineStyle: {
		// 			color: "rgba(43, 165, 255, 1) ",
		// 			shadowBlur: 12,
		// 			shadowColor: "rgba(43, 165, 255, 0.9)",
		// 			shadowOffsetX: 1,
		// 			shadowOffsetY: 1
		// 		},
		// 		itemStyle: {
		// 			color: "rgba(43, 165, 255, 1) ",
		// 			borderWidth: 1,
		// 			borderColor: "#FFF"
		// 		},
		// 		smooth: true,
		// 		symbol: "none",
		// 		data: [12, 8, 15, 20, 32, 20]
		// 	},
		// 	{
		// 		name: "二号区域",
		// 		type: "line",
		// 		lineStyle: {
		// 			color: "rgba(249, 119, 102, 1) ",
		// 			shadowBlur: 12,
		// 			shadowColor: "rgba(249, 119, 102, 0.9)",
		// 			shadowOffsetX: 1,
		// 			shadowOffsetY: 1
		// 		},
		// 		itemStyle: {
		// 			color: "rgba(249, 119, 102, 1) ",
		// 			borderWidth: 1,
		// 			borderColor: "#FFF"
		// 		},
		// 		smooth: true,
		// 		symbol: "none",
		// 		data: [12, 3, 4, 5, 6, 10]
		// 	},
		// 	{
		// 		name: "三号区域",
		// 		type: "line",
		// 		lineStyle: {
		// 			color: "rgba(30, 241, 255, 1) ",
		// 			shadowBlur: 12,
		// 			shadowColor: "rgba(30, 241, 255, 0.9)",
		// 			shadowOffsetX: 1,
		// 			shadowOffsetY: 1
		// 		},
		// 		itemStyle: {
		// 			color: "rgba(30, 241, 255, 1) ",
		// 			borderWidth: 1,
		// 			borderColor: "#FFF"
		// 		},
		// 		smooth: true,
		// 		symbol: "none",
		// 		data: [20, 30, 14, 15, 26, 1]
		// 	},
		// 	{
		// 		name: "四号区域",
		// 		type: "line",
		// 		// stack: "Total",
		// 		lineStyle: {
		// 			color: "rgba(255, 181, 179, 1)",
		// 			shadowBlur: 12,
		// 			shadowColor: "rgba(255, 181, 179, 0.9)",
		// 			shadowOffsetX: 1,
		// 			shadowOffsetY: 1
		// 		},
		// 		itemStyle: {
		// 			color: "rgba(255, 181, 179, 1) ",
		// 			borderWidth: 1,
		// 			borderColor: "#FFF"
		// 		},
		// 		smooth: true,
		// 		symbol: "none",
		// 		data: [10, 82, 52, 10, 42, 20]
		// 	}
		// ]
	};
	echartsTest.setOption(option, true);
	window.addEventListener("resize", () => {
		console.log(echartsTest);
		echartsTest.resize();
	});
	console.log(echartsTest);
	console.log("我是随机数", Math.floor(Math.random() * 256));
}

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

const enterpriseInfo = reactive({
	dataList: [] as any[],
	dataInfo: {
		emergencyNum: 0
	} as any
});

const onChange = (event: any) => {
	const enterpriseId = enterpriseInfo.dataList[event].enterpriseId;
	getStatsEnterpriseWeek(true, enterpriseId);
};
// 获取企业数据统计
const getEnterpriseInfoList = async (showLoading: boolean) => {
	const res: any = await getEnterpriseInfoListApi(
		{
			projectSn: store.sn,
			enterpriseName: "",
			enterpriseTypeId: "",
			userEnterpriseId: "",
			isCountMainEnterprise: 1
		},
		showLoading
	);
	enterpriseInfo.dataList = res.result;
	const enterpriseId = res.result.length > 0 && res.result[0].enterpriseId;
	getStatsEnterpriseWeek(false, enterpriseId);
};
const getStatsEnterpriseWeek = async (showLoading: boolean, enterpriseId: string) => {
	const res: any = await getStatsEnterpriseWeekApi(
		{
			projectSn: store.sn,
			enterpriseId: enterpriseId
		},
		showLoading
	);
	enterpriseInfo.dataInfo = res.result;
};
const getCountWorkerNumByRegion = async (showLoading: boolean) => {
	const res: any = await getCountWorkerNumByRegionApi(
		{
			projectSn: store.sn
		},
		showLoading
	);
	workerRegionInfo.dateList = res.result;
	workerRegionInfo.workerRegionList = res.result.reduce((prev: any[], item: any) => {
		item.list.forEach((option: any) => {
			const findIndex = prev.findIndex((ele: any) => ele.regionName == option.regionName);
			if (findIndex > -1) {
				prev[findIndex].list.push(option.workerNum);
			} else {
				prev.push({
					regionName: option.regionName,
					list: [option.workerNum]
				});
			}
		});

		return prev;
	}, []);
	console.log(111111111, res.result, workerRegionInfo.workerRegionList);
	getManAnalysisEchart();
};

const setIntervalFn = (showLoading: boolean) => {
	getSafeInfo(showLoading);
	qualityInfo(showLoading);
	getEnterpriseInfoList(showLoading);
	getCountWorkerNumByRegion(showLoading);
};

onMounted(async () => {
	setIntervalFn(false);
	// setInterval(() => {
	// 	setIntervalFn(true);
	// }, 30000);
});
</script>

<style lang="scss" scoped>
.text-ellipsis {
	font-size: 16px;
	color: #fff;
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
.manAnalysis-box {
	height: 32%;
	margin-top: 1%;
}

.enterprise-box {
	height: 28%;
	margin-top: 1%;

	:deep(.h-card .content) {
		padding: 6px 10px;
		height: 78%;
		margin-top: 1%;
	}

	.enterprise-info {
		display: flex;
		margin: 0 18px;
		justify-content: space-between;
		align-items: center;

		> div:first-child {
			font-size: 16px;
			color: #ffffff;
		}
	}

	.enterprise-list {
		display: grid;
		grid-template-columns: 33% 33% 33%;
		margin: 4px 8px 10px 8px;

		.enterprise-title {
			margin-left: 10px;
			margin-top: 10px;
		}

		.enterprise-title {
			height: 50.95px;
			background: url("@/assets/images/overviewScreen/card-icon.png") no-repeat;
			background-size: 100% 100%;
			padding: 4px 16px;

			> div:first-child {
				font-size: 16px;
				color: #ffffff;
			}

			> div:last-child {
				font-size: 24px;
				color: #65d7f9;
			}
		}
	}
}

.card-content {
	height: 40%;

	.hRight {
		width: 50%;
		position: absolute;
		top: 1%;
		right: 0;
	}

	.contentTop {
		width: 100%;
		height: 100% !important;

		.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: 71%;
			// 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;
		}
	}
}

.line1 {
	color: #fff;
	padding-top: 5px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	line-height: 30px;
	height: 30px;
	font-size: 16px;

	.numberCard {
		font-size: 26px;
		padding: 0 8px;
		margin-left: 3px;
		font-weight: bold;
		color: #47bcec;
		background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
		background-size: 100% 100%;
	}
}

:deep(.h-card .content) {
	margin-top: 1%;
}

.safetext1 {
	position: absolute;
	top: 8%;
	color: white;
	left: 42%;
}

.safetext2 {
	position: absolute;
	top: 8%;
	color: white;
	right: 3%;
}

:deep(.el-carousel__container) {
	height: 100%;
}

:deep() {
	.el-carousel__indicators li {
		padding-top: 6px;
		padding-bottom: 2px;
	}

	.el-carousel__indicator--horizontal .el-carousel__button {
		width: 10px;
		height: 10px;
		background: #a8c3dd;
		border: 1px solid #a8c3dd;
		border-radius: 50%;
		opacity: 0.3;
	}

	.el-carousel__indicator--horizontal.is-active .el-carousel__button {
		width: 10px;
		height: 10px;
		background: #4ac0f3;
		border: 1px solid #4ac0f3;
		border-radius: 50%;
		opacity: 1;
	}

	.el-carousel__arrow--left {
		// top: 70px;
		left: -12px;
		font-size: 16px;
	}

	.el-carousel__arrow--right {
		// top: 70px;
		right: -12px;
		font-size: 16px;
	}
}

.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: 100%;
}

.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%;
	}
}

:deep(.el-input__inner) {
	color: #fff;
}

:deep(.el-select .el-input .el-select__caret) {
	color: #fff;
}

:deep(.el-input__wrapper) {
	width: 85%;
	height: 0%;
	background: #0d2956;
}

:deep(.el-range-separator) {
	color: #ccc;
	font-size: 10px;
}

:deep(.el-range-input) {
	color: #ccc;
	font-size: 10px;
}
</style>
