<template>
	<div class="political-outlook">
		<div class="content">
			<!-- v-show="topDangerList.length > 0" -->
			<div class="top-statistics" v-show="topDangerList.length > 0">
				<div class="top-statistics-left">
					<el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar">
						<div
							class="statistics-item"
							:style="{
								background: `url(${bgImgSet(index)}) no-repeat`,
								backgroundSize: '100% 100%'
							}"
							v-for="(item, index) in topDangerList"
							:key="index"
						>
							<span class="title">{{ item.alarmTypeName }}</span>
							<span class="statistics-item-content">今日报警次数：{{ item.alarmNumToday }}</span>
							<span class="statistics-item-content">本月报警次数：{{ item.alarmNumMonth }}</span>
							<span class="statistics-item-content">历史报警次数：{{ item.alarmNum }}</span>
						</div>
					</el-scrollbar>
				</div>
				<!-- <div class="top-statistics-right">
					<div>sss</div>
					播放海康
					<div ref="playWndBox" style="width: 96%; height: 100%;">
						<div id="playWnd" class="playWnd" style="width: 100%; height: 100%"></div>
						:style="{
								height: playWndHeight + 'px',
								width: playWndWidth + 'px'
							}"
					</div>
				</div> -->
			</div>
			<div style="position: relative; height: 180px" v-if="topDangerList.length == 0">
				<div class="notoDta">
					<img src="@/assets/images/noData.png" alt="" />
					<p>暂无数据</p>
				</div>
			</div>
			<div class="top-search">
				<div class="search-item">
					<span>设备名称</span>
					<el-input style="width: 150px;" size="small" v-model="searchForm.hardwareName" placeholder="请输入内容" @input="conditionSearch"></el-input>
				</div>
				<div class="search-item">
					<span>不安全行为类型</span>
					<el-input style="width: 150px;" size="small" v-model="searchForm.alarmTypeName" placeholder="请输入内容" @input="conditionSearch"></el-input>
				</div>
				<div class="search-item">
					<span>警告时间</span>
					<el-date-picker
						style="width: 240px;"
						size="small"
						v-model="searchForm.dateRange"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="YYYY-MM-DD"
						@change="conditionSearch"
					/>
				</div>
				<!-- <el-button @click="getMemberCountList('search')">查询</el-button> -->
			</div>
			<div class="table-one">
				<div class="tabList">
					<div>序号</div>
					<div>抓拍图片</div>
					<div>设备名称</div>
					<div>不安全行为类型</div>
					<div>警告时间</div>
					<div>操作</div>
				</div>
				<el-scrollbar class="listBox" ref="refScrollbar">
					<div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
						<div>{{ index + 1 }}</div>
						<div class="list-img">
							<el-image
								fit="contain"
								class="el-img"
								:src="BASEURL + '/image/' + item.imageUrl"
								:preview-src-list="[BASEURL + '/image/' + item.imageUrl]"
							>
								<template #error>
									<el-image :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-no-img" alt="" />
								</template>
							</el-image>
							<!-- <img :src="item.fieldAcquisitionUrl" alt="" srcset=""> -->
						</div>
						<div>{{ item.hardwareName }}</div>
						<div>{{ item.alarmTypeName }}</div>
						<!-- <div>{{item.alarmType == 1?'烟感报警':item.alarmType == 2?'明火报警':item.alarmType == 3?'人员到底报警':item.alarmType == 4?'未带安全帽报警':item.alarmType == 5?'区域入侵报警':item.alarmType == 6?'越界入侵报警':'人员聚集报警'}}</div> -->
						<div>{{ item.createTime }}</div>
						<div style="color: #1fadc5" @click="openDetailDialog(item)">查看详情</div>
					</div>
					<div class="notoDta" v-if="partyMemberList.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div>
				</el-scrollbar>
				<el-pagination
			v-if="partyMemberList.length != 0"
				background
				:page-size="10"
				style="justify-content: center"
				@current-change="onCurrentChange"
				layout="prev, pager, next"
				:total="total"
			/>
			</div>
		</div>
		<div class="list-detail" v-if="showDialog" @click="handleDetailClick">
			<div class="dialog-content">
				<div class="dialog-icon"><img src="@/assets/images/titleIcon.png" /></div>
				<div class="dialog-title"><i>抓拍详情</i></div>
				<div class="dialog-detail">
					<div class="detail-text">
						<div class="text-box">
							<div class="type">告警类型</div>
							<div class="text">
								{{ detailData.alarmType ? getWarnName(detailData.alarmType) : "" }}
							</div>
						</div>
						<div class="text-box" style="margin-top: 5%">
							<div class="type">设备名称</div>
							<div class="text">{{ detailData.hardwareName || "" }}</div>
						</div>
						<div class="text-box" style="margin-top: 5%">
							<div class="type">记录时间</div>
							<div class="text">{{ detailData.createTime }}</div>
						</div>
					</div>
				</div>
				<div class="big-pic">
					<img :src="BASEURL + '/image/' + detailData.imageUrl" />
				</div>
				<div class="close-icon" @click="closeDialog">
					<el-icon><Close /></el-icon>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeMount, onBeforeUnmount, getCurrentInstance } from "vue";
import { GlobalStore } from "@/stores";
import { getCompanyDataList } from "@/api/modules/labor";
// import type { TabsPaneContext } from "element-plus";
import { getAlarmTypeOption } from "@/api/modules/aIEarlyWarn";
import noDataImage from "@/assets/images/vehicleManagement/car.png";
import { getAlarmRecordApi, getAlarmTypeCountPageApi } from "@/api/modules/agjtCommandApi";
import { ElMessage } from "element-plus";
import bgImg1 from "@/assets/images/commandScreen/bg1.png";
import bgImg2 from "@/assets/images/commandScreen/bg2.png";
import bgImg3 from "@/assets/images/commandScreen/bg3.png";
import bgImg4 from "@/assets/images/commandScreen/bg4.png";
import bgImg5 from "@/assets/images/commandScreen/bg5.png";
import bgImg6 from "@/assets/images/commandScreen/bg6.png";
import bgImg7 from "@/assets/images/commandScreen/bg7.png";
import bgImg8 from "@/assets/images/commandScreen/bg8.png";
const bgImgList = ref([bgImg1, bgImg2, bgImg3, bgImg4, bgImg5, bgImg6, bgImg7, bgImg8]);
const store = GlobalStore();
// eslint-disable-next-line vue/require-prop-types, @typescript-eslint/no-unused-vars
const props = defineProps(["tip"]);
const searchForm = ref({
	hardwareName: '',
	alarmTypeName: '',
	dateRange: [],
});
const playWndBox = ref(null);
let playWndHeight = ref("");
let playWndWidth = ref("");
let oWebControl = ref(null);
let pubKey = ref("");
let initCount = ref(0);
// const objData = ref({
// 	appkey: "23071374", //海康提供的appkey
// 	ip: "42.180.188.17", //海康提供的ip
// 	secret: "skaSIHSYPRIynnxz7o57", //海康提供的secret
// 	port: 8443,
// 	playMode: 0, // 0 预览 1回放
// 	layout: "1x1" //页面展示的模块数【16】
// });
let objData = ref({
	appkey: "23071374", //anjt的appkey
	ip: "42.180.188.17", //anjt的ip
	secret: "skaSIHSYPRIynnxz7o57", //anjt的secret
	port: 8443,//anjt的端口
	playMode: 0, // 0 预览 1回放
	layout: "1x1" //页面展示的模块数【16】
});
let cameraIndexCode = ref<string>("");
const BASEURL = import.meta.env.VITE_API_URL;
let showDialog = ref(false as any);
const enterpriseListData = ref([] as any);
const topDangerList = ref([] as any);
let pageNo = ref(1 as any);
const alarmPageInfo = ref({
	pageNo: 1
});
let moreAlarmScroll = ref(true as any);
const refAlarmScrollbar = ref(null as any); // 绑定到滚动的盒子上
let moreScroll = ref(true as any);
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
const detailData = ref({} as any);
const partyMemberList = ref({} as any);
let aiAlarmTypeEnum = ref([] as any);
// 条件查询
const conditionSearch = async () => {
	getMemberCountList('search')
}
//获取视频列表
const getVideoList = async () => {
	// objData.value.appkey = "23071374";
	// objData.value.ip = "42.180.188.17";
	// objData.value.secret = "skaSIHSYPRIynnxz7o57";
	// objData.value.port = 8443;
	// cameraIndexCode.value = "210d4649ec0d4e6899b0394e5d8eeec2";
	// objData.value.appkey = "24017757";
	// objData.value.ip = "182.101.141.23";
	// objData.value.secret = "VJz0FbzmE6drPQ7egsBi";
	// objData.value.port = 18443;
	// cameraIndexCode.value = "fa34ed90c1564841b14fed388741bbe2";
};
// 背景图设置
const bgImgSet = (index: any) => {
	return bgImgList.value[index % bgImgList.value.length];
};

// 获取顶部数据
const getQualityStatisticsNumDataFn = async (tip: any) => {
	let requestData: any = {
		sn: store.sn,
		type: 1,
		pageNo: tip == "search" ? 1 : alarmPageInfo.value.pageNo,
		pageSize: 100
	};
	const res: any = await getAlarmTypeCountPageApi(requestData);
	if (tip == "more") {
		topDangerList.value = topDangerList.value.concat(res.result.alarmPage.records);
	} else {
		topDangerList.value = res.result.alarmPage.records;
	}
	if (res.result.alarmPage.pages == alarmPageInfo.value.pageNo) {
		moreAlarmScroll.value = false;
	} else {
		alarmPageInfo.value.pageNo = alarmPageInfo.value.pageNo + 1;
	}
};
//获取告警类型枚举
const getWarnTypeOption = async () => {
	const res: any = await getAlarmTypeOption({ projectSn: store.sn });
	let warnType = res.result.map((item: any) => {
		return {
			id: Number(item.data),
			value: item.name
		};
	});
	aiAlarmTypeEnum.value = warnType;
};
// 返回对应的枚举名称
function getWarnName(warnType: any) {
	let enumObj = aiAlarmTypeEnum.value.find((item: any) => item.id === warnType);
	return enumObj ? enumObj.value : "";
}
// 打开详情弹窗
function openDetailDialog(item: any) {
	detailData.value = item;
	showDialog.value = true;
}
// 关闭详情弹窗
function closeDialog() {
	showDialog.value = false;
	detailData.value = {};
}
function handleDetailClick(event: any) {
	if (event.target.className == "list-detail") {
		closeDialog();
	}
}
//获取企业列表
const getCompanyList = async () => {
	let data = {
		projectSn: store.sn,
		enterpriseName: "",
		userEnterpriseId: store.userInfo?.userEnterpriseId
	};
	const res: any = await getCompanyDataList(data);
	if (res.code == 200) {
		enterpriseListData.value = res.result;
	}
};
let total = ref(0 as any);
const onCurrentChange = (event: number) => {
	pageNo.value = event;
	getMemberCountList(true);
};
//获取数据
const getMemberCountList = async (tip: any) => {
	let requestData: any = {
		projectSn: store.sn,
		hardwareName: searchForm.value.hardwareName,
		alarmTypeName: searchForm.value.alarmTypeName,
		pageNo: tip == "search" ? 1 : pageNo.value,
		pageSize: 10,
		isPushed: 1
	};
	if(searchForm.value.dateRange && searchForm.value.dateRange.length > 0){
		requestData.startTime = searchForm.value.dateRange[0]
		requestData.endTime = searchForm.value.dateRange[1]
	}
	const res: any = await getAlarmRecordApi(requestData);
	partyMemberList.value = res.result.records;
	total.value = Number(res.result.total);
	// if (tip == "more") {
	// 	partyMemberList.value = partyMemberList.value.concat(res.result.records);
	// } else {
	// 	partyMemberList.value = res.result.records;
	// }
	// // 为图片拼接IP
	// // partyMemberList.value.map((item:any) => {
	// // 	item.fieldAcquisitionUrl = BASEURL + '/image/' + item.fieldAcquisitionUrl
	// // })
	// if (res.result.pages == pageNo.value) {
	// 	moreScroll.value = false;
	// } else {
	// 	pageNo.value = pageNo.value + 1;
	// }
};
// onBeforeMount(async () => {
// 	getVideoList();
// });
onMounted(async () => {
	await getCompanyList();
	await getMemberCountList("search");
	await getQualityStatisticsNumDataFn("search");
	getWarnTypeOption();
	// refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
	// 	const scrollTop = e.target.scrollTop;
	// 	const scrollHeight = e.target.scrollHeight;
	// 	const clientHeight = e.target.clientHeight;
	// 	// 向上加载更多
	// 	if (scrollTop >= scrollHeight - clientHeight - 1) {
	// 		if (moreScroll.value) {
	// 			getMemberCountList("more");
	// 		}
	// 	}
	// });
	refAlarmScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
		const scrollTop = e.target.scrollTop;
		const scrollHeight = e.target.scrollHeight;
		const clientHeight = e.target.clientHeight;
		// 向上加载更多
		if (scrollTop >= scrollHeight - clientHeight) {
			if (moreAlarmScroll.value) {
				getQualityStatisticsNumDataFn("more");
			}
		}
	});
	// 加载海康插件
	// setTimeout(() => {
	// }, 2500);
	// await initPlugin();
	// 获取页面的实例对象 ee
	// const pageInstance = getCurrentInstance();
	// // 获取dom节点对象
	// const tagDomObj = pageInstance?.refs.playWndBox;
	// playWndHeight.value = tagDomObj?.clientHeight;
	// playWndWidth.value = tagDomObj?.clientWidth;

	// // 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
	// window.addEventListener("scroll", () => {
	// 	if (oWebControl.value == undefined) {
	// 		setTimeout(function () {
	// 			oWebControl.JS_Resize(playWndWidth.value * store.globalScale, playWndHeight.value * store.globalScale);
	// 		}, 200);
	// 	}
	// });

	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
	// window.addEventListener("resize", e => {
	// 	if (oWebControl.value == undefined) {
	// 		setTimeout(function () {
	// 			oWebControl.JS_Resize(playWndWidth.value * store.globalScale, playWndHeight.value * store.globalScale);
	// 		}, 200);
	// 	}
	// 	// if (oWebControl.value == undefined) {
	// 	// 	// console.log("wwwww", e);
	// 	// 	oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
	// 	// 	// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
	// 	// 	// setWndCover();
	// 	// }
	// });
	// previewVideo(cameraIndexCode.value)
});
onBeforeUnmount(() => {
	// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
	// oWebControl.JS_HideWnd();
	// // 销毁当前播放的视频
	// oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
	// // 断开与插件服务连接
	// oWebControl.JS_Disconnect();
});

const initPlugin = () => {
	oWebControl = new WebControl({
		szPluginContainer: "playWnd", // 指定容器id
		iServicePortStart: 15900, // 指定起止端口号，建议使用该值
		iServicePortEnd: 15900,
		szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
		cbConnectSuccess: () => {
			// 创建WebControl实例成功
			oWebControl
				.JS_StartService("window", {
					// WebControl实例创建成功后需要启动服务
					// 值"./VideoPluginConnect.dll"写死
					dllPath: "./VideoPluginConnect.dll"
				})
				.then(
					function () {
						// 设置消息回调
						oWebControl.JS_SetWindowControlCallback({
							// cbIntegrationCallBack: cbIntegrationCallBack,
						});
						//JS_CreateWnd创建视频播放窗口，宽高可设定
						oWebControl
							.JS_CreateWnd("playWnd", 1000, 600, { bEmbed: true }) //这一部分很重要，两个参数为你盒子的宽高，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁
							.then(function () {
								// 创建播放实例成功后初始化
								init();
							});
					},
					function () {
						// 启动插件服务失败
					}
				);
		},
		// 创建WebControl实例失败
		cbConnectError: function () {
			// 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
			// console.log(0);
			// oWebControl.value = null;
			console.log(oWebControl.value);
			// 程序未启动时执行error函数，采用wakeup来启动程序
			window.WebControl.JS_WakeUp("VideoWebPlugin://");
			initCount.value++;
			if (initCount.value < 3) {
				setTimeout(function () {
					initPlugin();
				}, 3000);
			}
			// else {
			// 	setTimeout(function () {
			// 		setTimeout(function () {
			// 			router.push("/home");
			// 		}, 4000);
			// 	}, 4000);
			// }
			if (initCount.value < 2) {
				oWebControl.value = null;
				ElMessage.warning("插件未启动，正在尝试启动，请稍候...");
				// 程序未启动时执行error函数，采用wakeup来启动程序
				window.WebControl.JS_WakeUp("VideoWebPlugin://");
				setTimeout(() => {
					initPlugin();
				}, 3000);
				initCount.value++;
			}
			//  else {
			// 	window.location.href = this.videoWebPluginUrl;
			// }
			// console.log(oWebControl.value);
		},
		cbConnectClose: () => {
			// 异常断开：bNormalClose = false
			// JS_Disconnect正常断开：bNormalClose = true
			// console.log("cbConnectClose");
			oWebControl.value = null;
		}
	});
	// oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
};

// 初始化
const init = (callback: (() => void) | undefined) => {
	console.log(objData.value, "我的视频服务器");
	getPubKey(() => {
		let appkey = objData.value.appkey; //综合安防管理平台提供的appkey，必填
		let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret，必填
		let ip = objData.value.ip; //综合安防管理平台IP地址，必填
		let playMode = objData.value.playMode; //初始播放模式：0-预览，1-回放
		let port = objData.value.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
		let snapDir = "D:\\SnapDir"; //抓图存储路径
		let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
		let layout = objData.value.layout; //playMode指定模式的布局
		let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
		let encryptedFields = "secret"; //加密字段，默认加密领域为secret
		let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
		let showSmart = 0; //是否显示移动框线框，0-不显示，非0-显示
		let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
		// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
		oWebControl
			?.JS_RequestInterface({
				funcName: "init",
				argument: JSON.stringify({
					appkey: appkey, //API网关提供的appkey
					secret: secret, //API网关提供的secret
					// ip: ip + ":" + port, //API网关IP地址
					ip: ip, //API网关IP地址
					playMode: playMode, //播放模式（决定显示预览还是回放界面）
					port: port, //端口
					snapDir: snapDir, //抓图存储路径
					videoDir: videoDir, //紧急录像或录像剪辑存储路径
					layout: layout, //布局
					enableHTTPS: enableHTTPS, //是否启用HTTPS协议
					encryptedFields: encryptedFields, //加密字段
					showToolbar: showToolbar, //是否显示工具栏
					showSmart: showSmart, //是否显示智能信息
					buttonIDs //自定义工具条按钮
				})
			})
			.then(function (oData: any) {
				oWebControl.JS_Resize(playWndWidth.value * store.globalScale, playWndHeight.value * store.globalScale); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题

				if (callback) {
					callback();
				}
				// 隐藏
				// oWebControl.JS_HideWnd()
			});
	});
};

// RSA 加密
let setEncrypt = (value: string) => {
	let encrypt = new window.JSEncrypt();
	encrypt.setPublicKey(pubKey);
	return encrypt.encrypt(value);
};
// 获取公钥
const getPubKey = (callback: { (): void; (): void }) => {
	oWebControl
		.JS_RequestInterface({
			funcName: "getRSAPubKey",
			argument: JSON.stringify({
				keyLength: 1024
			})
		})
		.then(function (oData: { responseMsg: { data: Ref<string> } }) {
			if (oData.responseMsg.data) {
				pubKey = oData.responseMsg.data;
				callback();
			}
		});
};
// 调用这个函数可进行视频播放
// 视频预览功能
const previewVideo = (data: string | null) => {
	let cameraIndexCode = data; // 获取输入的监控点编号值，必填
	let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
	let transMode = 1; // 传输协议：0-UDP，1-TCP
	let gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用
	let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）

	oWebControl
		.JS_RequestInterface({
			funcName: "startPreview",
			argument: JSON.stringify({
				cameraIndexCode: cameraIndexCode, // 监控点编号
				streamMode: streamMode, // 主子码流标识
				transMode: transMode, // 传输协议
				gpuMode: gpuMode, // 是否开启GPU硬解
				wndId: wndId // 可指定播放窗口
			})
		})
		.then(function () {
			oWebControl.JS_SetWindowControlCallback({});
		});
};
</script>

<style lang="scss" scoped>
@mixin flex {
	display: flex;
	align-items: center;
}
.list-detail {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	background: rgba(7, 28, 49, 0.5);
	z-index: 20;
	.dialog-content {
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 38%;
		top: 30%;
		width: 25%;
		height: 45%;
		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
		.dialog-icon {
			position: absolute;
			left: 3%;
			top: 3%;
			width: 7%;
			height: 7%;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.pic-icon {
			position: absolute;
			left: 3%;
			top: 40%;
			width: 7%;
			height: 7%;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.close-icon {
			position: absolute;
			right: 3%;
			top: 3%;
			cursor: pointer;
			color: #ffffff;
			font-size: 18px;
		}
		.dialog-title {
			color: #ffffff;
			font-weight: bold;
			margin-left: 8%;
			font-size: 18px;
			font-family: "OPPOSans-Bold";
		}
		.dialog-detail {
			width: 100%;
			height: 25%;
			margin-top: 5%;
			.detail-text {
				width: 95%;
				height: 100%;
				.text-box {
					height: 25%;
					display: flex;
					align-items: center;
					background: url("@/assets/images/aIEarlyWarning/contentBg.png") no-repeat;
					background-size: 100% 100%;
					.type {
						width: 20%;
						margin-left: 3%;
						color: #a1accb;
						font-size: 12px;
					}
					.text {
						font-size: 12px;
						color: #ffffff;
					}
				}
			}
		}
		.pic-title {
			color: #ffffff;
			font-weight: bold;
			font-size: 18px;
			font-family: "OPPOSans-Bold";
			margin-top: 5%;
			margin-left: 8%;
		}
		.big-pic {
			width: 100%;
			height: 50%;
			margin-top: 10%;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.political-outlook {
	height: 97%;
	margin: 0 60px;
	.content {
		height: 95%;
		width: 100%;
		margin-top: 10px;
		// background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		padding: 20px 15px;
		.top-statistics {
			width: 90%;
			height: 35%;
			color: white;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			&-left {
				width: 100%;
				height: 100%;
				.statistics-listBox {
					height: 100%;
					:deep() {
						.el-scrollbar__view {
							display: grid;
							grid-template-columns: repeat(3, 1fr);
							grid-gap: 20px;
							// grid-row-gap: 20px;
							// grid-column-gap: 60px;
						}
					}
				}
				.statistics-item {
					width: 200px;
					// height: 95px;
					display: flex;
					flex-direction: column;
					position: relative;
					background-size: 100% 100%;
					.title {
						position: absolute;
						top: 4%;
						left: 4%;
					}
					&-content {
						display: inline-block;
						width: 100%;
						height: auto;
						text-indent: 1.5em;
					}
					&-content:nth-child(2) {
						margin-top: 15%;
					}
					&-content:nth-child(3) {
						margin-top: 2%;
					}
					&-content:nth-child(4) {
						margin-top: 2%;
					}
					&-content:last-child {
						margin-bottom: 4%;
					}
					// &-content:nth-child(3){
					// 	margin-top: 8%;
					// }
				}
			}
			&-right {
				width: 390px;
				height: 100%;
			}
			// .statistics-item:nth-child(1){
			// 	background: url("@/assets/images/commandScreen/bg6.png") no-repeat;
			// 	background-size: 100% 100%;
			// }
			// .statistics-item:nth-child(2){
			// 	background: url("@/assets/images/commandScreen/bg2.png") no-repeat;
			// 	background-size: 100% 100%;
			// }
			// .statistics-item:nth-child(3){
			// 	background: url("@/assets/images/commandScreen/bg7.png") no-repeat;
			// 	background-size: 100% 100%;
			// }
			// .statistics-item:nth-child(4){
			// 	background: url("@/assets/images/commandScreen/bg8.png") no-repeat;
			// 	background-size: 100% 100%;
			// }
			// .statistics-item:nth-child(5){
			// 	background: url("@/assets/images/commandScreen/bg1.png") no-repeat;
			// 	background-size: 100% 100%;
			// }
			// .statistics-item:nth-child(6){
			// 	background: url("@/assets/images/commandScreen/bg5.png") no-repeat;
			// 	background-size: 100% 100%;
			// }
			// .statistics-item:nth-child(7){
			// 	background: url("@/assets/images/commandScreen/bg4.png") no-repeat;
			// 	background-size: 100% 100%;
			// }
			// .statistics-item:nth-child(8){
			// 	background: url("@/assets/images/commandScreen/bg3.png") no-repeat;
			// 	background-size: 100% 100%;
			// }
		}
		.top-search {
			@include flex;
			width: 90%;
			margin: 0 auto;
			margin-top: 20px;
			.search-item {
				@include flex;
				margin-right: 20px;
				span {
					color: white;
					margin-right: 10px;
				}
			}
		}
		.table-one {
			height: 50%;
			.tabList {
				display: flex;
				// width: 100%;
				height: 10%;
				background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
				background-size: 100% 100%;
				// position: absolute;
				left: 75.5%;
				top: 75%;
				color: #ccc;
				font-size: calc(100vw * 14 / 1920);
				line-height: 30px;
				align-items: center;
				margin-top: 2%;
				div {
					text-align: center;
					width: 17%;
				}
			}
			.listBox {
				height: 68%;
				.listStyle {
					display: flex;
					align-items: center;
					text-align: center;
					color: #fff;
					font-size: 12px;
					margin-bottom: 5px;
					.list-img {
						.el-img {
							width: 30px;
							height: 30px;
							img {
								display: flex;
								align-items: center;
								width: 100%;
								height: 100%;
							}
						}
						.el-no-img {
							width: 30px;
							height: 30px;
						}
					}
					div {
						width: 17%;
						white-space: nowrap; //单行
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.listStyle:hover {
					background: #091f3f;
				}
			}
		}
		:deep() {
			.el-tabs__item {
				color: white;
			}
			.el-tabs__item.is-active {
				color: var(--el-color-primary);
			}
		}
	}
}
.notoDta {
	top: 35%;
	width: 20%;
	left: 40%;
	position: absolute;
	text-align: center;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -6% 37%;
	}
}
// element 组件样式
:deep() {
	.el-date-editor .el-range-input,
	.el-range-separator {
		color: #fff;
	}
	.el-input__wrapper {
		background: #112d59;
	}
	.el-input__inner {
		color: #fff;
	}
	.el-button {
		background-color: #2758c0;
		color: white;
		border-color: transparent;
	}
}
// ::v-deep .el-select .el-input .el-select__caret {
// 	color: #fff;
// }
</style>
