<template>
	<div class="data-ledger">
		<div class="left-data">
			<Card title="定位设备列表" style="width: 100%">
				<div class="left-menu">
					<div class="left-top">
						<div class="realTime-data" @click="selectChange(1)" :class="checked == 1 ? 'top-active' : ''">
							<span>列表</span>
						</div>
						<div class="alarm-data" @click="selectChange(2)" :class="checked == 2 ? 'top-active' : ''">
							<span>轨迹</span>
						</div>
					</div>
					<div v-if="checked === 1" style="width: 100%; height: 100%">
						<div class="list-tool">
							<el-form :inline="true" size="medium" :model="queryInfo" class="demo-form-inline" style="margin-left: 15px">
								<el-form-item>
									<el-select filterable v-model="queryInfo.devSn" placeholder="请选择或搜索" @change="devChange">
										<el-option
											v-for="(item, index) in nameOptions"
											:key="index"
											:label="item.label"
											:value="item.value"
										></el-option>
										<!-- <el-option v-for="(item, index) in devList" :key="index" :label="item.equipmentName" :value="item.devSn"> -->
									</el-select>
								</el-form-item>
							</el-form>
							<div class="tool-btn">
								<img src="@/assets/images/carPosition/refrush.png" alt="" @click="refreshDev" />
							</div>
						</div>
						<div class="labor-type">
							<div class="type-box" @click="laborChange('')" :class="laborType === '' ? 'laborActive' : ''">
								全部({{ devTypeTotal.count || 0 }})
							</div>
							<div class="type-box" @click="laborChange(1)" :class="laborType === 1 ? 'laborActive' : ''">
								在线({{ devTypeTotal.onlineCount || 0 }})
							</div>
							<div class="type-box" @click="laborChange(0)" :class="laborType === 0 ? 'laborActive' : ''">
								离线({{ devTypeTotal.offlineCount || 0 }})
							</div>
						</div>
						<div class="dev-list" v-if="devList.length > 0">
							<el-checkbox
								:indeterminate="isIndeterminate"
								v-model="checkAll"
								@change="handleCheckAllChange"
								style="margin-left: 55px; color: #fff"
								>全选</el-checkbox
							>
							<el-scrollbar>
								<div style="margin: 15px 0"></div>
								<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
									<div v-for="item in devList" class="choice-item" :key="item.id">
										<div class="list-type">
											<img :src="epOn" v-if="item.online === 1" />
											<img :src="epOff" v-if="item.online === 0" />
											<!-- <img :src="personOn" v-if="item.type === 2 && item.online === 1" />
											<img :src="personOff" v-if="item.type === 2 && item.online === 0" /> -->
										</div>
										<el-checkbox :label="item.devSn" :key="item.devSn" class="dev-check">
											<!-- {{ item.numberPlate || "" }}{{ item.personName || "" }} -->
											{{ item.equipmentName || "" }}
										</el-checkbox>
										<div class="choice-speed" v-if="item.speed">{{ item.speed }}km/h</div>
									</div>
								</el-checkbox-group>
							</el-scrollbar>
						</div>
						<div v-else style="text-align: center; margin-top: 200px; color: #fff; font-size: 20px">暂无设备</div>
					</div>
					<div v-if="checked === 2">
						<div class="top-select">
							<el-form :inline="true" size="medium" :model="queryInfo" class="demo-form-inline">
								<el-form-item>
									<span style="color: #fff; margin-right: 20px">设备名称</span>
									<el-select filterable v-model="queryInfo.devSn" placeholder="请选择或搜索" @change="devChange">
										<el-option
											v-for="(item, index) in nameOptions"
											:key="index"
											:label="item.label"
											:value="item.value"
										></el-option>
										<!-- <el-option v-for="(item, index) in devList" :key="index" :label="item.equipmentName" :value="item.devSn"> -->
									</el-select>
								</el-form-item>
							</el-form>
						</div>
						<div class="track-calendar">
							<el-calendar v-model="dayValue" class="custom-hover">
								<template #dateCell="{ data }">
									<!-- <span>{{ dealMyDate(data.day, data) }}</span> -->
									<div :class="data.styleFlag == true ? 'preventClick' : ''" style="font-size: 14px">
										{{ data.day.split("-").slice(2).join("") }}<br />
									</div>
									<div class="greenStyle">
										<!-- <span class="redStyle">{{data}}</span> -->
										<span> {{ getTodayMeter(data.day) }}</span>
									</div>
								</template>
							</el-calendar>
						</div>
					</div>
				</div>
			</Card>
		</div>

		<div class="right-data">
			<div class="map-top">
				<Card title="定位地图" style="width: 100%">
					<div class="map-box" id="mapContainer"></div>
					<div class="wei-lan" v-if="checked === 1">
						<div class="icon-off" v-if="!fenceShow" @click="openFence">
							<img src="@/assets/images/carPosition/iconOff.png" alt="" />
							<div>围栏</div>
						</div>
						<div class="icon-on" v-if="fenceShow" @click="fenceShow = false">
							<img src="@/assets/images/carPosition/iconOn.png" alt="" />
							<div>围栏</div>
						</div>
						<!-- **********************围栏弹窗******************************** -->
						<div class="fenceDialog" v-if="fenceShow">
							<!-- <div class="fence-dialog-modal" v-if="fenceCreateShow"></div> -->
							<div class="fence-box">
								<!-- <div class="close-icon" @click="closeFence">
								<i class="el-icon-close" style="font-size: 22px; color: #919398"></i>
							</div> -->
								<div class="close-icon" @click="closeFence">
									<el-icon><Close /></el-icon>
								</div>
								<div class="dialog-title">
									<!-- <div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div> -->
									<div class="title-text">
										<i>围 栏</i>
									</div>
								</div>
								<div class="fence-tool">
									<!-- <el-button color="rgba(28,72,164, 0.9)" @click="openFenceCreate" :dark="false" plain>创建围栏</el-button>
									<el-button color="rgba(28,72,164, 0.9)" @click="deleteFence" :dark="false" plain>删除围栏</el-button> -->

									<div class="tool tool1" @click="openFenceCreate">创建围栏</div>
									<div class="tool tool2" @click="deleteFence">删除围栏</div>
								</div>
								<div class="fence-select">
									<el-input v-model="fenceSearch" placeholder="请输入围栏名称" clearable @change="fenceNameChange"></el-input>
								</div>
								<div class="fence-radio" v-if="fenceList.length > 0">
									<el-checkbox :indeterminate="isIndeterminateFence" v-model="checkAllFence" @change="fenceAllChange"
										>全选</el-checkbox
									>
									<el-scrollbar>
										<div style="margin: 5px 0"></div>
										<el-checkbox-group v-model="checkedFence" @change="fenceCitiesChange">
											<div v-for="item in fenceList" :key="item.id">
												<el-checkbox :label="item.id" :key="item.id">{{ item.fenceName }} </el-checkbox>
											</div>
										</el-checkbox-group>
									</el-scrollbar>
								</div>
								<div v-else style="text-align: center; margin-top: 65px; color: #fff">暂无围栏</div>
							</div>
							<!-- 创建围栏弹窗 -->
							<div class="fenceCreate" v-if="fenceCreateShow">
								<div class="fenceCrete-box">
									<div class="close-icon" @click="closeFenceCreate">
										<i class="el-icon-close" style="font-size: 22px; color: #919398"></i>
									</div>
									<!-- <div class="fence-title">创建围栏</div> -->
									<el-form size="medium" :model="addForm" ref="addFormRef" label-width="80px" :rules="formFenceRules">
										<!-- <div class="bigFormBox">
											<div class="itemBox1">
												<div>围栏名称</div>
												<div><el-input v-model="addForm.fenceName" placeholder="请输入"></el-input></div>
											</div>
											<div class="itemBox2">
												<div>范围类型</div>
												<div>
													<el-radio-group
														v-model="addForm.rangeType"
														style="display: flex; justify-content: space-between; padding-top: 10px; padding-right: 10px"
														@change="changeAreaType"
													>
														<el-radio :label="1">标准区域</el-radio>
														<el-radio :label="2">自定义</el-radio>
													</el-radio-group>
												</div>
											</div>
											<div class="itemBox3" v-if="addForm.rangeType === 1">
												<div>区域半径</div>
												<div>
													<el-input
														type="number"
														v-model="addForm.areaRadius"
														placeholder="请输入"
														:maxlength="5"
														@input="areaRadiusChange"
													></el-input>
												</div>
											</div>
											<div class="itemBox4" v-if="addForm.rangeType === 2">
												<div>围栏形状</div>
												<div>
													<div class="">多边形</div>
												</div>
											</div>
										</div> -->

										<div style="margin-top: 15%">
											<el-form-item class="el-form-item__label" label="围栏名称" prop="fenceName">
												<el-input v-model="addForm.fenceName" placeholder="请输入"></el-input>
											</el-form-item>
											<el-form-item label="范围类型" prop="rangeType">
												<el-radio-group
													v-model="addForm.rangeType"
													style="display: flex; justify-content: space-between; padding-top: 0px; padding-right: 0px"
													@change="changeAreaType"
												>
													<el-radio :label="1">标准区域</el-radio>
													<el-radio :label="2">自定义</el-radio>
												</el-radio-group>
											</el-form-item>
											<el-form-item label="区域半径" prop="areaRadius" v-if="addForm.rangeType === 1">
												<el-input
													type="number"
													v-model="addForm.areaRadius"
													placeholder="请输入"
													:maxlength="5"
													@input="areaRadiusChange"
												></el-input>
											</el-form-item>
											<el-form-item label="围栏形状" prop="fenceShape" v-if="addForm.rangeType === 2">
												<div class="fence-shape">多边形</div>
											</el-form-item>
										</div>
										<div class="cFooter">
											<div class="tool tool1" @click="closeFenceCreate">取消</div>
											<div class="tool tool2" @click="submitFence(addFormRef)">保存</div>
										</div>
									</el-form>
								</div>
							</div>
						</div>
					</div>
					<!-- **********************围栏弹窗******************************** -->

					<div class="start-track" @click="startAnimation" v-if="checked === 2">开始轨迹动画</div>
				</Card>
			</div>
			<!-- **********报警数据*********** -->
			<div class="alarm-bottom">
				<Card title="报警信息">
					<div class="bottom-left">
						<div class="left-content">
							<div class="tab-list">
								<div style="width: 5%">序号</div>
								<div style="width: 20%">机械设备名称</div>
								<div style="width: 20%">设备序号</div>
								<div style="width: 20%">报警时间</div>
								<div style="width: 30%">报警信息</div>
							</div>
							<el-scrollbar class="list-box">
								<div v-for="(item, index) in listData" class="list-style" :key="item.id">
									<div style="width: 5%">{{ index + 1 }}</div>
									<div style="width: 20%">{{ item.equipmentName }}</div>
									<div style="width: 20%">{{ item.devSn }}</div>
									<div style="width: 20%">{{ item.alarmTime }}</div>
									<div style="width: 30%">{{ item.alarmInfo }}</div>
								</div>
								<div class="not-data" v-if="listData.length == 0">
									<img src="@/assets/images/noData.png" alt="" />
									<p>暂无数据</p>
								</div>
							</el-scrollbar>
						</div>
					</div>
				</Card>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">

import {
	getEpDevOptionApi,
	getEpTypeTotalApi,
	getEpSuroundInfoApi,
	getEpAlarmRecordInfoApi,
	getEpRealtimeDataApi,
	getEpDayRecordApi,
	addEpPositionFence,
	deleteEpFence
} from "@/api/modules/equipmentPosition";
// import carIcon from "@/assets/images/carPosition/carIcon.png";
import carOn from "@/assets/images/carPosition/carOn2.png";
import epOn from "@/assets/images/carPosition/epOn.png";
import epOff from "@/assets/images/carPosition/epOff.png";
import carOff from "@/assets/images/carPosition/carOff2.png";
import personOff from "@/assets/images/carPosition/personOff.png";

import startIcon from "@/assets/images/carPosition/startIcon.png";
import endIcon from "@/assets/images/carPosition/endIcon.png";
import personOn from "@/assets/images/carPosition/personOn.png";
import equipmentPosition2 from "@/assets/images/carPosition/equipmentPosition2.png";
import equipmentPosition3 from "@/assets/images/carPosition/equipmentPosition3.png";
import { GlobalStore } from "@/stores";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import Card from "@/components/card.vue";
const store = GlobalStore();
import { computed, reactive, ref, onMounted, onBeforeMount, watch } from "vue";
var mouseTool;
var marker;
var lineArr;
var mapInstance;
var map;
let choiceMonth = ref("2023-11");
let dayRunRecord = ref([]); // 日行数据
let hasRealTime = ref(false);
let circleMapData = ref([]); // 圆形围栏存放
let shapeMapData = ref([]); // 多边形围栏存放
let devTypeTotal = ref({});
let fenceCreateShow = ref(false); //创建围栏弹窗
let fenceList = ref(["围栏1", "围栏2", "围栏3", "围栏4", "围栏5"]);
let fenceSearch = ref(""); // 围栏搜索
let fenceShow = ref(false); //打开围栏弹窗
let dayValue = ref(new Date());
let nameOptions = ref([]) as any;
let checkAll = ref(false);
let checkAllFence = ref(false);
let checkedCities = ref([]);
let checkedFence = ref([]);
let devList = ref(["鲁U6675", "刘江", "蒋东", "鲁U9675"]);
let isIndeterminate = ref(true);
let isIndeterminateFence = ref(true);
let checked = ref(1);
let devName = ref("");
let locationList = ref([]);
let addFormRef = ref<FormInstance>();
let addForm = ref({
	areaRadius: 100, //区域半径
	fenceName: "", //围栏名称
	addr: "",
	rangeType: 1,
	locationList: [
		{
			fenceId: 0,
			id: 0,
			latitude: "",
			longitude: "",
			sortNum: 0
		}
	],
	projectSn: "",
	enterpriseId: ""
});
let formFenceRules = ref({
	fenceName: [
		{
			required: true,
			message: "必填",
			trigger: "blur"
		},
		{ min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
	], //
	areaRadius: [
		{
			required: true,
			message: "必填",
			trigger: "change"
		}
	]
});
let pagInfo = ref({
	pageNo: 1, //页数
	pageSize: 10, //条数
	total: 0 //总条数
});
let pagLabor = ref({
	pageSize: 10,
	pageNo: 1,
	total: 0
});
let tableListData = ref([]); // 劳务列表
let choicePerson = ref(false);
let laborRadio = ref(""); //选择
let laborInfo = ref(""); //选中劳务信息
let laborType = ref(""); //劳务人员类型  1、劳务人员 2、管理人员 3、临时人员
let fileUrl = ref(""); //文件上传地址
let queryInfo = ref({
	devSn: ""
});
let alarmDevSn = ref(" " as any);
let listData = ref([]);
let Popup = ref({
	type: "add",
	show: false
});
let addEditForm = ref({
	personName: "",
	numberPlate: "",
	devSn: "",
	type: 1,
	driver: ""
});
const resetMapSize = () => {
	console.log(666)
	setTimeout(() => {
		let mapContent = document.getElementById("mapContainer");
		console.log(mapContent)
		mapContent.style.transform = `scale(${1/store.globalScale})`;
	}, 200);
};
onMounted(() => {
	choiceMonth.value = formatMonthTime(dayValue.value);
	// console.log("当前月份", choiceMonth.value);
	initMap();
	getProgressListData();
	getCrewListData();
	getFenceList();
	getFenceType();
	resetMapSize()
	window.addEventListener("resize", e => {
		resetMapSize()
	});
});
onBeforeMount(() => {
	window.removeEventListener("resize", e => {
		resetMapSize()
	});
});
// computed: {
// 	//Uploader实例
// 	// uploader() {
// 	//   return this.$refs.uploader.uploader
// 	// }
// },
watch(dayValue, newVal => {
	// console.log(newVal, "切换日期");
	if (newVal) {
		let newMonth = formatMonthTime(newVal);
		let newDay = formatDayTime(newVal);
		getTodayTrack(newDay);
		choiceMonth.value = newMonth;
	}
});

watch(choiceMonth, newVal => {
	// console.log(newVal, "切换月份");
	if (newVal) {
		getDayRunData();
	}
});
function handleCancel() {
	fenceCreateShow.value = false;
	addForm.value = {
		areaRadius: 100, //区域半径
		fenceName: "", //围栏名称
		addr: "",
		rangeType: 1,
		locationList: [
			{
				fenceId: 0,
				id: 0,
				latitude: "",
				longitude: "",
				sortNum: 0
			}
		],
		projectSn: "",
		enterpriseId: ""
	};
	exitEditFn();
	clearFn();
}

function refreshDev() {
	alarmDevSn.value = "";
	checkAll.value = false;
	checkedFence.value = [];
	fenceSearch.value = "";
	checkedCities.value = [];
	laborType.value = "";
	queryInfo.value.devSn = "";
	clearFn();
	getCrewListData();
	getProgressListData();
}

function areaRadiusChange() {
	if (addForm.value.locationList.length === 1) {
		drawCircle();
	}
}

function deleteFence() {
	if (checkedFence.value.length === 0) {
		ElMessage({
			showClose: true,
			message: "请选择删除围栏",
			type: "error"
		});
		return;
	}
	console.log("删除围栏", checkedFence);
	ElMessageBox.confirm("此操作将永久删除该围栏, 是否继续?", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning"
	})
		.then(() => {
			let idString = "";
			for (let index = 0; index < checkedFence.value.length; index++) {
				const element = checkedFence.value[index];
				if (checkedFence.value.length - 1 > index) {
					idString = idString + element + ",";
				} else {
					idString = idString + element;
				}
			}
			deleteFenceInfo(idString);
		})
		.catch(() => {
			ElMessage({
				type: "info",
				message: "已取消删除"
			});
		});
}

function deleteFenceInfo(idGroups) {
	console.log("删除id", idGroups);
	let data = {
		ids: idGroups
	};
	deleteEpFence(data).then(res => {
		if (res.success) {
			// console.log('删除成功', res)
			getFenceList();
			checkedFence.value = [];
			fenceCitiesChange(checkedFence);
			ElMessage({
				type: "success",
				message: "删除成功"
			});
		}
	});
}
const submitFence = async (formEL: FormInstance | undefined) => {
	if (locationList.value.length === 0) {
		ElMessage({
			showClose: true,
			message: "未设置围栏区域!",
			type: "error"
		});
		return;
	}
	addForm.value.locationList = locationList.value;
	console.log("新增围栏", addForm);
	let latitude = "";
	let longitude = "";
	let fenceShape = "";
	if (addForm.value.locationList.length === 1) {
		latitude = addForm.value.locationList[0].latitude;
		longitude = addForm.value.locationList[0].longitude;
	}
	if (addForm.value.locationList.length > 1) {
		for (let index = 0; index < addForm.value.locationList.length; index++) {
			const element = addForm.value.locationList[index];
			// let currentStr = element.latitude + "|" + element.longitude;
			let currentStr = element.longitude + "|" + element.latitude;
			if (addForm.value.locationList.length - 1 > index) {
				currentStr = currentStr + ",";
			}
			fenceShape = fenceShape + currentStr;
		}
	}
	console.log("多边形", fenceShape);

	if (!formEL) return;
	await formEL.validate((valid, fields) => {
		if (valid) {
			let params = {
				fenceName: addForm.value.fenceName,
				areaRadius: addForm.value.areaRadius,
				fenceShapeArr: JSON.stringify(addForm.value.locationList),
				fenceShape: fenceShape,
				latitude: latitude,
				longitude: longitude,
				rangeType: addForm.value.rangeType,
				projectSn: store.sn
			};
			// params.alarmPushWorkerId = this.addForm.alarmPushWorkerId.join(',');

			console.log("新增信息", params);
			addEpPositionFence(params).then(res => {
				if (res.success) {
					ElMessage({
						showClose: true,
						message: res.message,
						type: "success"
					});
					getFenceList();
				}
			});
			closeFenceCreate();
		} else {
			console.log("error submit!!");
			return false;
		}
	});
};

// 格式化时间
function formatMonthTime(date) {
	let year = date.getFullYear();
	let month = date.getMonth() + 1; // 月份从0开始，需要加1
	month = month < 10 ? "0" + month : month; // 如果月份小于10，补0
	// console.log(formattedTime) // 输出格式化后的时间
	return year + "-" + month;
}

function formatDayTime(date) {
	let year = date.getFullYear();
	let month = date.getMonth() + 1; // 月份从0开始，需要加1
	month = month < 10 ? "0" + month : month; // 如果月份小于10，补0
	let day = String(date.getDate()).padStart(2, "0");
	// console.log(formattedTime) // 输出格式化后的时间
	return year + "-" + month + "-" + day;
}

// 获取车辆今日轨迹
function getTodayTrack(day) {
	clearFn();
	let data = {
		devSn: queryInfo.value.devSn,
		createTime_begin: day,
		createTime_end: day
	};
	getEpRealtimeDataApi(data).then((res: any) => {
		let path = [];
		let currentData = {};
		if (res.result.length > 0) {
			console.log("实时数据", res);
			currentData = res.result[0];
			for (let index = 0; index < res.result.length; index++) {
				const element = res.result[index];
				path.unshift([element.longitude, element.latitude]);
			}
			if(checked.value == 2) trackMapInit(path, currentData);
		}
		console.log("当前数据", path, currentData);
	});
}

// 日行数据
function getDayRunData() {
	let data = {
		projectSn: store.sn,
		devSn: queryInfo.value.devSn,
		month: choiceMonth.value
	};
	getEpDayRecordApi(data).then(res => {
		if (res.success) {
			console.log("日行数据", res);
			dayRunRecord.value = res.result;
		}
		let newDay = formatDayTime(dayValue.value);
		getTodayTrack(newDay);
	});
}

// 计算当前的行驶里程
function getTodayMeter(day: any) {
	// console.log("当前里程", day);
	if (dayRunRecord.value.length === 0) {
		return "-";
	}
	let currentDayRecord: any = dayRunRecord.value.find(function (item: any) {
		return item.day === day;
	});
	// console.log("当前里程", currentDayRecord);
	if (currentDayRecord && currentDayRecord.trackDistanceDay) {
		return currentDayRecord.trackDistanceDay;
	} else {
		return "-";
	}
}
// 切换设备
function devChange(e) {
	console.log("设备改变", e);
	getProgressListData();
	if (checked.value === 2) {
		getDayRunData();
	}
	if (checked.value === 1) {
		let devArr = [queryInfo.value.devSn];
		checkedCities.value = devArr;
		handleCheckedCitiesChange(devArr);
	}
}
// 获取车辆实时数据
function getRealTimeData(e) {
	let data = {
		devSn: e.devSn,
		projectSn: store.sn
	};
	getEpRealtimeDataApi(data).then(res => {
		if (res.result.length > 0) {
			// echoPersonMarker(res.result.records[0]);
			echoPersonMarker(res.result[0]);
		} else {
			console.log("设备暂无数据", res);
		}
		console.log("实时数据", res);
	});
}

// 获取围栏列表
function getFenceList() {
	let data = {
		fenceName: fenceSearch.value,
		projectSn: store.sn
	};
	getEpSuroundInfoApi(data).then(res => {
		if (res.success) {
			fenceList.value = res.result;
			circleMapData.value = res.result.filter(item => item.rangeType === 1);
			shapeMapData.value = res.result.filter(item => item.rangeType === 2);
			console.log("围栏", circleMapData.value, shapeMapData.value);
		}
	});
}
// 设备状态
function getFenceType() {
	let data = {
		projectSn: store.sn
	};
	getEpTypeTotalApi(data).then(res => {
		if (res.success) {
			console.log("设备状态", res);
			devTypeTotal.value = res.result;
		}
	});
}
// 打开创建围栏弹窗
function openFenceCreate() {
	fenceCreateShow.value = true;
}
// 关闭创建围栏弹窗
function closeFenceCreate() {
	fenceCreateShow.value = false;
	let tempArr = [
		{
			fenceId: 0,
			id: 0,
			latitude: "",
			longitude: "",
			sortNum: 0
		}
	];
	addForm.value = {
		areaRadius: 100, //区域半径
		fenceName: "", //围栏名称
		addr: "",
		rangeType: 1,
		locationList: tempArr,
		projectSn: "",
		enterpriseId: ""
	};
	exitEditFn();
	clearFn();
}
// 打开围栏弹窗
function openFence() {
	fenceShow.value = true;
}
// 关闭围栏弹窗
function closeFence() {
	fenceShow.value = false;
}
function close() {
	addEditForm.value = {
		personName: "",
		numberPlate: "",
		devSn: "",
		type: 1,
		driver: ""
	};
}
function handle(type, show) {
	//打开弹窗前的统一处理
	Popup.value = {
		type: type,
		show: show
	};
}
function SizeChange(val) {
	pagInfo.value.pageSize = val;
	getProgressListData();
}
function CurrentChange(val) {
	pagInfo.value.pageNo = val;
	getProgressListData();
}
//获取查询下拉
function getCrewListData() {
	let onlineType = "";
	if (laborType.value !== "") {
		onlineType = laborType.value;
	}
	let data = {
		online: onlineType,
		projectSn: store.sn
	};
	getEpDevOptionApi(data).then(res => {
		if (res.code == 200) {
			const filterArray = res.result
				.filter(item => item.equipmentName !== "")
				.map(item => ({ devSn: item.devSn, equipmentName: item.equipmentName }));
			let nameOption = filterArray.map(item => {
				return {
					label: item.equipmentName,
					value: item.devSn
				};
			});
			// const filteredArray = res.result
			// 	.filter(item => item.personName == null)
			// 	.map(item => ({ devSn: item.devSn, numberPlate: item.numberPlate }));
			// let carOption = filteredArray.map(item => {
			// 	return {
			// 		label: item.numberPlate,
			// 		value: item.devSn
			// 	};
			// });
			// nameOptions.value = nameOption;
			nameOptions.value = nameOption.concat([]);
			// nameOptions.value = nameOption.concat(carOption);
			console.log("👉👉👉👉", nameOption);
			// devList.value = res.result;
			devList.value = res.result;
		} else {
			ElMessage.error(res.message);
		}
	});
}
//获取报警列表数据
function getProgressListData() {
	let data = {
		// pageNo: pagInfo.value.pageNo,
		// pageSize: pagInfo.value.pageSize,
		devSns: alarmDevSn.value,
		projectSn: store.sn
	};
	getEpAlarmRecordInfoApi(data).then(res => {
		if (res.code == 200) {
			listData.value = res.result;
			// pagInfo.value.total = res.result.total;
			pagInfo.value.total = res.result.length;
		}
	});
}
function fenceNameChange(e) {
	console.log("围栏名称", e);
	fenceSearch.value = e;
	getFenceList();
}
function laborChange(e) {
	laborType.value = e;
	getCrewListData();
}
function handleCheckAllChange(val) {
	clearFn();
	let nameArr = devList.value.map(item => item.devSn);
	checkedCities.value = val ? nameArr : [];
	isIndeterminate.value = false;
	if (val) {
		pointAllSelect();
	} else {
		queryInfo.value.devSn = "";
	}
	alarmDevSn.value = "";
	getProgressListData();
	drawFencePoint();
}
function handleCheckedCitiesChange(value) {
	console.log("设备选中", value);
	clearFn();
	let checkedCount = value.length;
	checkAll.value = checkedCount === devList.value.length;
	isIndeterminate.value = checkedCount > 0 && checkedCount < devList.value.length;
	pointSelectChange();
	drawFencePoint();
}
function pointAllSelect() {
	for (let index = 0; index < devList.value.length; index++) {
		const element = devList.value[index];
		// console.log('选中某条', currentRecord)
		// if (element.type === 1) {
		// 	getRealTimeData(element);
		// }
		// if (element.type === 2) {
		// 	getRealTimeData(element);
		// }
		getRealTimeData(element);
	}
}
function pointSelectChange() {
	let warnDevSn = "";
	for (let index = 0; index < checkedCities.value.length; index++) {
		const element = checkedCities.value[index];
		let currentRecord = devList.value.filter(item => item.devSn === element)[0];
		// console.log('选中某条', currentRecord)
		getRealTimeData(currentRecord);
		if (checkedCities.value.length - 1 > index) {
			warnDevSn = warnDevSn + element + ",";
		} else {
			warnDevSn = warnDevSn + element;
		}
	}
	alarmDevSn.value = warnDevSn;
	console.log("当前devSn", alarmDevSn.value);
	getProgressListData();
}

function fenceAllChange(val) {
	clearFn();
	let nameArr = fenceList.value.map(item => item.id);
	checkedFence.value = val ? nameArr : [];
	isIndeterminateFence.value = false;
	console.log("全选", val, checkedFence.value);
	if (val) {
		drawAllFencePoint();
	}
	pointSelectChange();
	map.setFitView();
}
function fenceCitiesChange(value) {
	clearFn();
	let checkedCount = value.length;
	checkAllFence.value = checkedCount === fenceList.value.length;
	isIndeterminateFence.value = checkedCount > 0 && checkedCount < fenceList.value.length;
	drawFencePoint();
	pointSelectChange();
	// circleMapData.value =
	// console.log('选中', value)
}
function drawAllFencePoint() {
	for (let index = 0; index < fenceList.value.length; index++) {
		const element = fenceList.value[index];
		// console.log('选中某条', currentRecord)
		if (element.rangeType === 1) {
			echoCircle(element);
		}
		if (element.rangeType === 2) {
			echoDrawPolygon(element);
		}
	}
}

function drawFencePoint() {
	for (let index = 0; index < checkedFence.value.length; index++) {
		const element = checkedFence.value[index];
		let currentRecord = fenceList.value.filter(item => item.id === element)[0];
		// console.log('选中某条', currentRecord)
		if (currentRecord.rangeType === 1) {
			echoCircle(currentRecord);
		}
		if (currentRecord.rangeType === 2) {
			echoDrawPolygon(currentRecord);
		}
	}
}

function selectChange(e) {
	if (checked.value === e) {
		return;
	}
	clearFn();
	checked.value = e;
	if (e === 1) {
		refreshDev();
	}
	if (e === 2) {
		// console.log("👇日行数据查询参数");
		// console.log(nameOptions.value[0])
		// queryInfo.value.devSn = devList.value[0].value;
		queryInfo.value.devSn = nameOptions.value[0].value;
		alarmDevSn.value = "";
		getProgressListData();
		getDayRunData();
	}
}

// 轨迹绘制地图
function trackMapInit(path: any, item: any) {
	lineArr = path;
	// lineArr = [
	//   [116.478935, 39.997761],
	//   [116.478939, 39.997825],
	//   [116.478912, 39.998549],
	//   [116.478912, 39.998549],
	//   [116.478998, 39.998555],
	//   [116.478998, 39.998555],
	//   [116.479282, 39.99856],
	//   [116.479658, 39.998528],
	//   [116.480151, 39.998453],
	//   [116.480784, 39.998302],
	//   [116.480784, 39.998302],
	//   [116.481149, 39.998184],
	//   [116.481573, 39.997997],
	//   [116.481863, 39.997846],
	//   [116.482072, 39.997718],
	//   [116.482362, 39.997718],
	//   [116.483633, 39.998935],
	//   [116.48367, 39.998968],
	//   [116.484648, 39.999861]
	// ]
	let markIcon = "https://webapi.amap.com/images/car.png";
	if (item.type === 2) {
		markIcon = personOn;
	}

	// 创建一个 Icon
	let startPointIcon = new AMap.Icon({
		// 图标的取图地址
		image: startIcon,
		size: new AMap.Size(52, 52), //图标大小
		// 图标所用图片大小
		imageSize: new AMap.Size(35, 35)
	});

	// 将 icon 传入 marker
	let startMarker = new AMap.Marker({
		position: path[0],
		icon: startPointIcon
	});

	// 创建一个 icon
	let endPointIcon = new AMap.Icon({
		image: endIcon,
		size: new AMap.Size(52, 52), //图标大小
		imageSize: new AMap.Size(35, 35)
	});

	// 将 icon 传入 marker
	let endMarker = new AMap.Marker({
		position: path[path.length - 1],
		icon: endPointIcon,
		offset: new AMap.Pixel(-15, -20)
	});

	// 将 markers 添加到地图
	map.add([startMarker, endMarker]);

	// 绘制轨迹
	let polyline = new AMap.Polyline({
		map: map,
		path: lineArr,
		showDir: true,
		strokeColor: "#28F", //线颜色
		// strokeOpacity: 1,     //线透明度
		strokeWeight: 6 //线宽
		// strokeStyle: "solid"  //线样式
	});

	let passedPolyline = new AMap.Polyline({
		map: map,
		// path: lineArr,
		strokeColor: "#AF5", //线颜色
		// strokeOpacity: 1,     //线透明度
		strokeWeight: 6 //线宽
		// strokeStyle: "solid"  //线样式
	});

	function createMarkerAndInfoWindow() {
		marker = new AMap.Marker({
			map: map,
			position: path[0],
			// icon: "https://webapi.amap.com/images/car.png",
			// icon: "src/assets/images/equipmentPosition2.png",
			icon: equipmentPosition3,
			offset: new AMap.Pixel(-26, -13),
			autoRotation: true,
			angle: -90
		});
		marker.on("click", markerClick);
		marker.emit("click", { target: marker });
		marker.on("moving", function (e) {
			passedPolyline.setPath(e.passedPath);
		});
	}

	// 使用逆地理编码获取地址信息
	let address = "未知";
	AMap.plugin("AMap.Geocoder", function () {
		let geocoder = new AMap.Geocoder();

		geocoder.getAddress(path[0], function (status, result) {
			if (status === "complete" && result.info === "OK") {
				address = result.regeocode.formattedAddress; // 获取中文地址名称
				console.log("位置", address);
				createMarkerAndInfoWindow();
			} else {
				console.log("获取地址信息失败");
				createMarkerAndInfoWindow();
			}
		});
	});

	function markerClick(e) {
		let lnglat = e.target.getPosition();

		//构建信息窗体中显示的内容
		console.log(e);
		let info = [];

		info.push('<p style="padding:7px;">设备序号:  ' + item.devSn + "</p>");
		info.push('<p style="padding:7px;">设备名称: ' + item.equipmentName + "</p>");
		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
		info.push('<p style="padding:7px;">位置: ' + address + "</p>");
		info.push('<p style="padding:7px;">经纬度: ' + item.longitude + "|" + item.latitude + "</p>");
		var infoWindow = new AMap.InfoWindow({
			offset: new AMap.Pixel(10, -30),
			content: info.join("") //使用默认信息窗体框样式，显示信息内容
		});
		infoWindow.open(map, e.target.getPosition());
	}

	map.setFitView();
}
function startAnimation() {
	marker.moveAlong(lineArr, 200);
}

// 围栏定位地图
function initMap() {
	var that = this;
	//地图加载
	map = new AMap.Map("mapContainer", {
		resizeEnable: true
	});
	var geocoder = new AMap.Geocoder({});
	//输入提示
	var autoOptions = {
		input: "tipinput"
	};
	// let auto = new AMap.Autocomplete(autoOptions);
	// this.placeSearch = new AMap.PlaceSearch({
	// 	map: map
	// }); //构造地点查询类
	// AMap.event.addListener(auto, "select", this.select); //注册监听，当选中某条记录时会触发
	mouseTool = new AMap.MouseTool(map);
	mouseTool.on("draw", function (event) {
		// event.obj 为绘制出来的覆盖物对象
		console.log("覆盖物对象绘制完成", event.obj.getPath());

		let overlaysList = map.getAllOverlays("polygon");

		if (overlaysList.length > 1) {
			map.remove(overlaysList[0]);
		}

		locationList.value = [];
		var pathArr = event.obj.getPath();
		pathArr.forEach(element => {
			locationList.value.push({
				longitude: element.lng,
				latitude: element.lat
			});
		});
	});
	geocoder.getLocation(addForm.value.addr, function (status, result) {
		if (status === "complete" && result.geocodes.length) {
			var lnglat = result.geocodes[0].location;
			console.log(result.geocodes[0]);
			// var arr = lnglat.split(',')
			locationList.value = [
				{
					longitude: lnglat.lng,
					latitude: lnglat.lat
				}
			];
			drawCircle();
		} else {
			console.log("获取绘制", status, result);
		}
	});
	map.on("click", e => {
		if (!fenceCreateShow.value) {
			console.log("还未到创建围栏弹窗");
			return;
		}
		console.log("您在 [ " + e.lnglat.getLng() + "," + e.lnglat.getLat() + " ] 的位置单击了地图！");
		if (addForm.value.rangeType == 1) {
			locationList.value = [];
			locationList.value.push({
				longitude: e.lnglat.getLng(),
				latitude: e.lnglat.getLat()
			});
			var lnglatXY = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
			geocoder.getAddress(lnglatXY, function (status, result) {
				console.log(status, result);
				that.addForm.addr = result.regeocode.formattedAddress;
			});
			drawCircle();
		} else {
			locationList.value.push({
				longitude: e.lnglat.getLng(),
				latitude: e.lnglat.getLat()
			});
		}
		console.log("当前位置列表", locationList.value);
	});
}
//清空地图
function clearFn() {
	map.clearMap();
}
function changeAreaType(e) {
	// console.log("切换选项",e);
	if (e === 1) {
		drawCircle();
	} else {
		drawPolygon();
	}
	locationList.value = [];
}
//添加点标记
function addMarker() {
	// 创建一个 Icon
	var startIcon = new AMap.Icon({
		// 图标尺寸
		size: new AMap.Size(25, 34),
		// 图标的取图地址
		image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
		// 图标所用图片大小
		imageSize: new AMap.Size(25, 34)
		// 图标取图偏移量
		// imageOffset: new AMap.Pixel(-9, -3)
	});
	var marker = new AMap.Marker({
		icon: startIcon,
		position: [locationList.value[0].longitude, locationList.value[0].latitude],
		size: new AMap.Size(25, 34)
		// offset: new AMap.Pixel(-13, -30)
	});
	marker.setMap(map);
}
function exitEditFn() {
	mouseTool.close();
}
//画圆
function drawCircle() {
	if (locationList.value.length == 0) {
		return;
	}
	clearFn();
	addMarker();
	var circle = new AMap.Circle({
		center: [locationList.value[0].longitude, locationList.value[0].latitude],
		radius: addForm.value.areaRadius, //半径
		borderWeight: 2,
		strokeColor: "#6caffc",
		strokeOpacity: 1,
		strokeWeight: 2,
		fillOpacity: 0.6,
		strokeStyle: "solid",
		// strokeDasharray: [10, 10],
		// 线样式还支持 'dashed'
		fillColor: "#6caffc",
		zIndex: 50
	});

	circle.setMap(map);
	// 缩放地图到合适的视野级别
	map.setFitView([circle]);
}
//绘制多边形
function drawPolygon() {
	clearFn();
	console.log("自定义绘制");
	mouseTool.polygon({
		strokeColor: "#6caffc",
		strokeOpacity: 1,
		strokeWeight: 2,
		// strokeOpacity: 0.2,
		fillColor: "#6caffc",
		fillOpacity: 0.6,
		// 线样式还支持 'dashed'
		strokeStyle: "solid"
		// strokeStyle是dashed时有效
		// strokeDasharray: [30,10],
	});
}

// 回显图形模块

// 圆
function echoCircle(item) {
	// console.log("画圆",item)
	// 创建纯文本标记
	let text = new AMap.Text({
		text: item.fenceName,
		anchor: "center", // 设置文本标记锚点
		// draggable: true, // 是否拖拽
		cursor: "pointer",
		angle: 10,
		style: {
			padding: "10px",
			"border-radius": "10px",
			"background-color": "white",
			"border-width": 0,
			"box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
			"text-align": "center",
			"font-size": "20px",
			color: "blue"
		},
		position: [item.longitude, item.latitude]
	});

	let circle = new AMap.Circle({
		center: [item.longitude, item.latitude],
		radius: item.areaRadius, //半径
		borderWeight: 2,
		strokeColor: "#6caffc",
		strokeOpacity: 1,
		strokeWeight: 2,
		fillOpacity: 0.6,
		strokeStyle: "solid",
		// strokeDasharray: [10, 10],
		// 线样式还支持 'dashed'
		fillColor: "#6caffc",
		zIndex: 50
	});
	text.setMap(map);
	circle.setMap(map);
	// 缩放地图到合适的视野级别
	map.setFitView([circle]);
}
function echoDrawPolygon(item) {
	// console.log("画多边形",item)
	let polygonPath = [];
	let polygonArr = JSON.parse(item.fenceShapeArr);
	for (let index = 0; index < polygonArr.length; index++) {
		const element = polygonArr[index];
		polygonPath.push([element.longitude, element.latitude]);
	}
	// console.log("多边形位置",polygonPath)

	// let path = [
	//   [116.403322, 39.920255],
	//   [116.410703, 39.897555],
	//   [116.402292, 39.892353],
	//   [116.389846, 39.891365]
	// ]
	let path = polygonPath;

	// 创建纯文本标记
	let text = new AMap.Text({
		text: item.fenceName,
		anchor: "center", // 设置文本标记锚点
		// draggable: true, // 是否拖拽
		cursor: "pointer",
		angle: 10,
		style: {
			padding: "10px",
			"border-radius": "10px",
			"background-color": "white",
			"border-width": 0,
			"box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
			"text-align": "center",
			"font-size": "20px",
			color: "blue"
		},
		position: path[0]
	});

	let polygon = new AMap.Polygon({
		path: path,
		strokeColor: "#FF33FF",
		strokeWeight: 6,
		strokeOpacity: 0.2,
		fillOpacity: 0.4,
		fillColor: "#1791fc",
		zIndex: 50
	});
	text.setMap(map);
	map.add(polygon);
	// 缩放地图到合适的视野级别
	map.setFitView([polygon]);
}
function echoCarMarker(item) {
	//初始化地图对象，加载地图
	// let map = new AMap.Map("mapContainer", {resizeEnable: true});
	let lnglats = [[item.longitude, item.latitude]];

	function drawCarMaker() {
		for (let i = 0; i < lnglats.length; i++) {
			marker = new AMap.Marker({
				position: lnglats[i],
				map: map,
				// icon: "https://webapi.amap.com/images/car.png" // 自定义图标
				// icon: "src/assets/images/equipmentPosition2.png"
				icon: equipmentPosition2
			});
			// marker.content = '我是第' + (i + 1) + '个Marker';
			marker.on("click", markerClick);
			marker.emit("click", { target: marker });
		}
	}

	// 使用逆地理编码获取地址信息
	let address = "未知";
	AMap.plugin("AMap.Geocoder", function () {
		let geocoder = new AMap.Geocoder();
		geocoder.getAddress(lnglats[0], function (status, result) {
			if (status === "complete" && result.info === "OK") {
				address = result.regeocode.formattedAddress; // 获取中文地址名称
				console.log("位置", address);
				drawCarMaker();
			} else {
				console.log("获取地址信息失败");
				drawCarMaker();
			}
		});
	});

	function markerClick(e) {
		let lnglat = e.target.getPosition();

		//构建信息窗体中显示的内容
		// console.log(e)
		let info = [];

		info.push('<p style="padding:7px;">设备序号:  ' + item.devSn + "</p>");
		info.push('<p style="padding:7px;">设备名称: ' + item.equipmentName + "</p>");
		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
		info.push('<p style="padding:7px;">位置: ' + address + "</p>");

		let infoWindow = new AMap.InfoWindow({
			offset: new AMap.Pixel(40, -30),
			content: info.join("") //使用默认信息窗体框样式，显示信息内容
		});
		// console.log("信息窗体",infoWindow)
		infoWindow.open(map, e.target.getPosition());
	}
	map.setFitView();
}
function echoPersonMarker(item) {
	let lnglats = [[item.longitude, item.latitude]];

	function drawPersonMarker() {
		for (let i = 0; i < lnglats.length; i++) {
			let marker = new AMap.Marker({
				position: lnglats[i],
				map: map,
				// icon: personOn // 自定义图标
				// icon: "src/assets/images/equipmentPosition2.png" // 自定义图标
				icon: equipmentPosition2 // 自定义图标
			});
			marker.on("click", markerClick);
			marker.emit("click", { target: marker });
		}
	}
	let address = "<text style='color: darkred;font-weight:bolder'>未知</text>";
	AMap.plugin("AMap.Geocoder", function () {
		let geocoder = new AMap.Geocoder();

		geocoder.getAddress(lnglats[0], function (status, result) {
			if (status === "complete" && result.info === "OK") {
				address = result.regeocode.formattedAddress; // 获取中文地址名称
				console.log("位置", address);
				drawPersonMarker();
			} else {
				console.log("获取地址信息失败");
				drawPersonMarker();
			}
		});
	});

	function markerClick(e) {
		let lnglat = e.target.getPosition();

		// 使用逆地理编码获取地址信息

		//构建信息窗体中显示的内容
		console.log(e);
		let info = [];

		info.push('<p style="padding:7px;">设备序号:  ' + item.devSn + "</p>");
		info.push('<p style="padding:7px;">设备名称: ' + item.equipmentName + "</p>");
		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
		info.push('<p style="padding:7px;">位置: ' + address + "</p>");
		info.push('<p style="padding:7px;">经纬度: ' + item.longitude + "  |  " + item.latitude + "</p>");

		var infoWindow = new AMap.InfoWindow({
			offset: new AMap.Pixel(10, -30),
			content: info.join("") //使用默认信息窗体框样式，显示信息内容
		});

		infoWindow.open(map, e.target.getPosition());
	}
	map.setFitView();
}
</script>

<!-- 组件自定义样式（需嵌套外层class） -->

<style type="text/css">
.amap-logo {
	display: none;
	opacity: 0 !important;
}
.amap-copyright {
	opacity: 0;
}
</style>

<style lang="scss" scoped>
:deep(.h-card .content) {
	overflow: hidden;
}
// 多边形表单
.fence-shape {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 74px;
	height: 34px;
	background: #ffffff;
	border-radius: 4px 4px 4px 4px;
	border: 1px solid #d8dbe8;
}

// 围栏弹窗
.fenceDialog {
	position: absolute;
	background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	padding: 25px;
	left: 5%;
	top: 15%;
	width: 330px;
	height: 380px;
	.fence-dialog-modal {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0%;
		left: 0%;
		z-index: 3;
		background: rgba(39, 45, 69, 0.5);
	}
	.close-icon {
		position: absolute;
		top: 0px;
		right: 0px;
		cursor: pointer;
	}
	.fence-title {
		border-left: 4px solid #5c81ee;
		font-size: 18px;
		// color: #272d45;
		color: rgba(255, 255, 255, 1);
		padding-left: 10px;
		margin-bottom: 20px;
		font-weight: 600;
		font-family: Source Han Sans CN, Source Han Sans CN;
	}
}

.fenceCreate {
	position: absolute;
	// background: #fff;
	// background: rgba(15, 40, 102, 1);
	background: url("@/assets/images/cbg.png") no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	padding: 25px;
	width: 360px;
	height: 380px;
	left: 40px;
	top: 40px;
	z-index: 5;
	// .fence-modal {
	//   position: absolute;
	//   width: 330px;
	//   height: 90px;
	//   top: -90px;
	//   left: 0%;
	//   background: rgba(39, 45, 69, 0.5);
	// }
	.fenceCrete-box {
		width: 100%;
		position: relative;
		.create-footer {
			margin: 100px 0 0 50px;
		}
		.close-icon {
			position: absolute;
			right: 0%;
			top: 0%;
			cursor: pointer;
			color: rgba(255, 255, 255, 0.6);
			font-size: 18px;
		}
		:deep(.el-form-item__label) {
			color: #fff;
		}
		:deep(.el-radio__label) {
			color: #fff;
		}
		.cFooter {
			width: 70%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 15%;
			margin-top: 15%;
			.tool {
				width: 20%;
				display: flex;
				align-items: center;
				justify-content: center;

				width: 80px;
				height: 33px;
				font-size: 14px;
				cursor: pointer;
				// background: #ffffff;23,46,70
				// background: rgba(23, 46, 70, 0.3);
				// background-color: rgba(0, 0, 255, 0.5);
				color: #fff;
				border-radius: 2px 2px 2px 2px;
				border: 1px solid #5181f6;
			}
			.tool1 {
				background: url("@/assets/images/cancel.png") no-repeat;
				background-size: 100% 100%;
			}
			.tool2 {
				background: url("@/assets/images/confirm.png") no-repeat;
				background-size: 100% 100%;
			}
		}

		.bigFormBox {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 15px;
			.itemBox1 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10%;
				.itemBox11 {
					width: 30%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 10%;
				}
				.itemBox12 {
					width: 60%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 10%;
				}
			}
			.itemBox2 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 5%;
				.itemBox21 {
					width: 30%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.itemBox22 {
					width: 60%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.itemBox3 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 5%;
				.itemBox31 {
					width: 30%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.itemBox32 {
					width: 60%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.itemBox4 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 5%;
				.itemBox41 {
					width: 30%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.itemBox42 {
					width: 60%;
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					color: black;
					margin-right: 50%;
				}
			}
		}
	}
}
.fence-box {
	position: relative;
	.dialog-title {
		color: #ffffff;
		font-weight: bold;
		font-size: 18px;
		font-family: "OPPOSans-Bold";
		display: flex;
		align-items: center;
		.title-img {
			width: 10%;
			height: 10%;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.title-text {
			margin-left: 1%;
		}
	}
	.close-icon {
		position: absolute;
		right: 0%;
		top: 0%;
		cursor: pointer;
		color: rgba(255, 255, 255, 0.6);
		font-size: 18px;
	}
	.fence-tool {
		display: flex;
		justify-content: space-around;
		padding: 0 25px;
		.tool {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80px;
			height: 33px;
			font-size: 14px;
			cursor: pointer;
			// background: #ffffff;23,46,70
			// background: rgba(23, 46, 70, 0.3);
			// background-color: rgba(0, 0, 255, 0.5);
			color: #5181f6;
			border-radius: 2px 2px 2px 2px;
			border: 1px solid #5181f6;
		}
		.tool1 {
			background: url("@/assets/images/cancel.png") no-repeat;
			background-size: 100% 100%;
		}
		.tool2 {
			background: url("@/assets/images/cancel.png") no-repeat;
			background-size: 100% 100%;
		}
	}
	.fence-select {
		margin: 15px 0;
	}
	.fence-radio {
		height: 160px;
	}
}

.choice-type {
	display: flex;
	align-items: center;
	height: 50px;
	justify-content: center;
}
.greenStyle {
	font-size: 12px;
	margin-top: 8px;
	color: #fff;
}
#mapContainer {
	width: 100%;
	height: 100%;
}
.labor-type {
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 14px;
	.type-box {
		width: 92px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 28px;
		cursor: pointer;
		color: rgba(255, 255, 255, 0.6);
		background: url("@/assets/images/carPosition/noChioce.png") no-repeat;
		// background: #e2e8f8;
		border-radius: 2px 2px 2px 2px;
	}
	.laborActive {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 92px;
		height: 28px;
		color: #fff;
		// background: #5181f6;
		background: url("@/assets/images/carPosition/chioceType.png") no-repeat;
		border-radius: 2px 2px 2px 2px;
	}
}

.dev-list {
	width: 100%;
	height: 70%;
	.choice-item {
		display: flex;
		align-items: center;
		position: relative;
		height: 40px;
		cursor: pointer;
		.list-type {
			position: absolute;
			width: 15px;
			height: 15px;
			margin-left: 20px;
			margin-right: 10px;
			z-index: 2;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.choice-speed {
			display: flex;
			align-items: center;
			width: 50px;
			font-size: 14px;
			position: absolute;
			right: 15%;
			color: #fff;
		}
	}
}
.top-active {
	color: #fff;
}
.data-ledger {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	.left-data {
		width: 21%;
		height: 100%;
		:deep(.h-card) {
			.content {
				height: 94% !important;
			}
		}
	}
	.left-menu {
		width: 100%;
		height: 100%;
		.left-top {
			display: flex;
			font-size: 20px;
			font-family: OPPOSansH;
			letter-spacing: 2px; /* 设置文字间距为2像素 */
			color: rgba(255, 255, 255, 0.6);
			transform: skewX(-10deg);
			// border-bottom: 2px solid #dce6fd;
			.realTime-data {
				display: flex;
				align-items: center;
				width: 50%;
				height: 40px;
				padding: 10px 0;
				justify-content: center;
				cursor: pointer;
			}
			.alarm-data {
				display: flex;
				align-items: center;
				width: 50%;
				height: 40px;
				padding: 10px 0;
				justify-content: center;
				cursor: pointer;
			}
		}
		.list-tool {
			display: flex;
			margin-top: 10px;
			margin-left: 30px;
			.tool-btn {
				width: 33px;
				height: 33px;
				margin-left: 20px;
				cursor: pointer;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.right-data {
		width: 78%;
		height: 100%;
		.map-top {
			height: 58%;
			position: relative;
			:deep(.h-card) {
				.content {
					margin-top: 1% !important;
				}
			}

			:deep(.titltText) {
				margin: 0 0 0 0;
				height: 100%;
				margin-left: 0.08rem;
				margin-top: -0.03rem;
				display: flex;
				align-items: center;
				letter-spacing: 0.01rem;
			}
			.wei-lan {
				.icon-off {
					position: absolute;
					padding-top: 5px;
					top: 15%;
					left: 1%;
					width: 48px;
					height: 48px;
					cursor: pointer;
					font-size: 14px;
					background: #ffffff;
					text-align: center;
					border-radius: 2px 2px 2px 2px;
					img {
						width: 20px;
						height: 20px;
						margin: 0 auto;
					}
				}
				.icon-on {
					position: absolute;
					padding-top: 5px;
					top: 15%;
					left: 1%;
					text-align: center;
					width: 48px;
					height: 48px;
					cursor: pointer;
					font-size: 14px;
					background: #ffffff;
					color: #5181f6;
					border-radius: 2px 2px 2px 2px;
					img {
						width: 20px;
						height: 20px;
						margin: 0 auto;
					}
				}
			}
			.start-track {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20px;
				cursor: pointer;
				font-size: 14px;
				background: #ffffff;
				box-shadow: 0px 0px 10px 0px rgba(39, 45, 69, 0.2);
				bottom: 3%;
				right: 3%;
			}
		}
		.alarm-bottom {
			margin-top: 20px;
			height: 38%;
			position: relative;
			:deep(.h-card) {
				.content {
					margin-top: 1.25% !important;
				}
			}
			:deep(.titltText) {
				margin: 0 0 0 0;
				height: 100%;
				margin-left: 0.08rem;
				margin-top: -0.025rem;
				display: flex;
				align-items: center;
				letter-spacing: 0.01rem;
			}
			.bottom-left {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 2%;
				.left-content {
					height: 100%;
					width: 100%;
					// background: url("@/assets/images/cardImg.png") no-repeat;
					// background-size: 100% 100%;
					.tab-list {
						display: flex;
						align-items: center;
						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;
						div {
							text-align: center;
							width: 24%;
						}
					}
					.list-box {
						height: 92%;
						.list-style:nth-child(even) {
							background: rgba(39, 88, 192, 0.06);
						}
						.list-style {
							display: flex;
							align-items: center;
							color: #fff;
							line-height: 24px;
							font-size: 12px;
							div {
								text-align: center;
								width: 24%;
								white-space: nowrap;
							}
						}
						.list-style:hover {
							background: #091f3f;
						}
					}
				}
			}
			.not-data {
				top: 23%;
				width: 16%;
				left: 44%;
				text-align: center;
				position: absolute;
				img {
					width: 40%;
					margin: 5% 30%;
				}
				p {
					color: #fff;
					font-size: calc(100vw * 14 / 1920);
					margin: -6% 37%;
				}
			}
		}
	}
}

.top-select {
	margin: 30px 0 0px 30px;
}
.track-calendar {
	:deep(.el-calendar) {
		background: none;
		.el-calendar__header {
			color: #fff;
			.el-button-group {
				button {
					background: url("@/assets/images/carPosition/noChioce.png") no-repeat;
					color: #fff;
					padding: 15px;
					width: 80px;
				}
			}
		}
	}
	:deep(.el-calendar-table .el-calendar-day:hover) {
		background-color: #3e5c94;
	}
	:deep(.el-calendar-table .el-calendar-day) {
		height: 60px !important;
		text-align: center;
		// padding: 1px;
		box-sizing: border-box;
		:hover {
			background: none;
		}
	}
	:deep(.el-calendar-table) {
		border: 1px solid #3e5c94;
		tbody {
			background: rgba(81, 129, 246, 0.2);
			color: #fff;
		}
		thead {
			background: rgba(81, 129, 246, 0.5);
			th {
				color: #fff;
			}
		}
	}
	:deep(.el-calendar__header) {
		border: none;
	}
	:deep(.is-selected) {
		background: #5181f6;
		color: #fff;
		:hover {
			// background: #5181f6;
		}
	}
}

:deep(.el-input__wrapper) {
	background: #112d59;
}
:deep(.el-input__inner) {
	color: #fff;
}
:deep(.el-select .el-input .el-select__caret) {
	color: #fff;
}

.dev-list {
	:deep(.el-checkbox) {
		.el-checkbox__label {
			color: #fff;
		}
		.el-checkbox__input {
			&.is-indeterminate {
				background: #5181f6;
			}
			&.is-checked {
				// border-left: 2px solid #5181f6;
				// background: #e2e8f8;
				background: rgba(81, 129, 246, 0.3);
				// background: url("@/assets/images/carPosition/chioceType.png") no-repeat;
				.el-checkbox__inner {
					background: #5181f6;
				}
			}
			.el-checkbox__inner {
				border: 1px solid #224ea8;
				background: none;
				&:hover {
				}
			}
		}
	}
}

.fence-radio {
	:deep(.el-checkbox) {
		.el-checkbox__label {
			color: #fff;
		}
		.el-checkbox__input {
			&.is-indeterminate {
				background: #5181f6;
			}
			&.is-checked {
				// border-left: 2px solid #5181f6;
				// background: #e2e8f8;
				background: rgba(81, 129, 246, 0.3);
				// background: url("@/assets/images/carPosition/chioceType.png") no-repeat;
				.el-checkbox__inner {
					background: #5181f6;
				}
			}
			.el-checkbox__inner {
				border: 1px solid #224ea8;
				background: none;
				&:hover {
				}
			}
		}
	}
}

.choice-item {
	:deep(.el-checkbox) {
		.el-checkbox__label {
			position: absolute;
			left: 70px;
			padding-top: 3px;
			color: #fff;
		}
		.el-checkbox__input {
			width: 330px;
			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 55px;
			&.is-checked {
				// border-left: 2px solid #5181f6;
				// background: #e2e8f8;
				background: rgba(81, 129, 246, 0.3);
				// background: url("@/assets/images/carPosition/chioceType.png") no-repeat;
				.el-checkbox__inner {
					background: #5181f6;
				}
			}
			.el-checkbox__inner {
				border: 1px solid #224ea8;
				background: none;
				&:hover {
				}
			}
		}
	}
}
.el-form-item__label {
	color: blue; /* 更改颜色为蓝色 */
}
</style>
