diff --git a/.env.development b/.env.development
index ed07633..1cb52ab 100644
--- a/.env.development
+++ b/.env.development
@@ -3,7 +3,7 @@ NODE_ENV = 'development'
 
 # 本地环境接口地址(/api/index.ts文件中使用)
 # 后端本地
-VITE_API_URL = 'http://192.168.34.221:9111'
+# VITE_API_URL = 'http://192.168.34.221:9111'
 # VITE_API_URL = 'http://192.168.34.221:28888'
 # VITE_API_URL = 'http://121.196.214.246/api'
 # VITE_API_URL = 'http://jxj.zhgdyun.com:100'
@@ -15,7 +15,7 @@ VITE_API_URL = 'http://192.168.34.221:9111'
 # 演示平台
 # VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
 # 百色七参数线上地址
-# VITE_API_URL = 'http://101.43.164.214:11111'
+VITE_API_URL = 'http://101.43.164.214:11111'
 
 # 上传
 VITE_ULD_API_URL = 'http://192.168.34.155:8012/onlinePreview?url='
diff --git a/src/api/modules/equipmentPosition.ts b/src/api/modules/equipmentPosition.ts
new file mode 100644
index 0000000..d0af8fb
--- /dev/null
+++ b/src/api/modules/equipmentPosition.ts
@@ -0,0 +1,94 @@
+import http from "@/api";
+const BASEURL = import.meta.env.VITE_API_URL;
+
+// 分页列表查询车辆（人员）定位- 报警记录信息
+export const getAlarmRecordInfo = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/vehiclePositionAlarm/list`, params);
+};
+
+// 分页列表查询车辆（人员）定位- 实时数据信息
+export const getRealtimeRecordInfo = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/vehiclePositionData/page`, params);
+};
+
+// 列表查询车辆（人员）定位- 实时数据信息
+export const getRealtimeRecordList = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/vehiclePositionData/list`, params);
+};
+
+// 车辆定位-设备中台
+export const getstandardDevListApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/vehiclePositionDev/page`, params);
+};
+export const addstandardDevApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/vehiclePositionDev/add`, params);
+};
+export const editstandardDevApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/vehiclePositionDev/edit`, params);
+};
+export const deletestandardDevApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/vehiclePositionDev/delete`, params);
+};
+
+export const getVehiclePositionFence = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/vehiclePositionFence/list`, params);
+};
+export const addVehiclePositionFence = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/vehiclePositionFence/add`, params);
+};
+export const editVehiclePositionFence = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/vehiclePositionFence/edit`, params);
+};
+export const deleteVehiclePositionFence = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/vehiclePositionFence/delete`, params);
+};
+
+// 获取设备中台所有数据
+export const getCarDevOption = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/vehiclePositionDev/list`, params);
+};
+
+// 查询设备状态总数
+export const getFenceTypeTotal = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/vehiclePositionDev/countVehiclePositionDev`, params);
+};
+
+// 查询车辆日行数据
+export const getVehiclePositionDayRecord = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/vehiclePositionDayRecord/list`, params);
+};
+
+
+// 机械设备定位--分类查询设备列表
+export const getEpDevOptionApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/mechanicalEquipmentPositionDev/list`, params);
+};
+// 机械设备定位--查询设备状态总数
+export const getEpTypeTotalApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/mechanicalEquipmentPositionDev/countDev`, params);
+};
+// 机械设备定位--查询围栏信息
+export const getEpSuroundInfoApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/mechanicalEquipmentPositionFence/list`, params);
+};
+// 机械设备定位--查询报警信息
+export const getEpAlarmRecordInfoApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/mechanicalEquipmentPositionAlarm/list`, params);
+};
+// 机械设备定位--查询实时数据信息
+export const getEpRealtimeDataApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/mechanicalEquipmentPositionData/list`, params);
+};
+// 机械设备定位--查询机械设备日行数据
+export const getEpDayRecordApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/mechanicalEquipmentPositionDayRecord/list`, params);
+};
+
+// 机械设备定位--删除围栏
+export const deleteEpFence = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/mechanicalEquipmentPositionFence/deleteBatch`, params);
+};
+// 机械设备定位--添加围栏
+export const addEpPositionFence = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/mechanicalEquipmentPositionFence/add`, params);
+};
\ No newline at end of file
diff --git a/src/api/modules/smartSafeHat.ts b/src/api/modules/smartSafeHat.ts
new file mode 100644
index 0000000..599e251
--- /dev/null
+++ b/src/api/modules/smartSafeHat.ts
@@ -0,0 +1,81 @@
+import http from "@/api";
+const BASEURL = import.meta.env.VITE_API_URL;
+
+// 分页列表查询车辆（人员）定位- 实时数据信息
+export const getRealtimeRecordInfo = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/vehiclePositionData/page`, params);
+};
+
+// 列表查询车辆（人员）定位- 实时数据信息
+export const getRealtimeRecordList = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/vehiclePositionData/list`, params);
+};
+
+// 车辆定位-设备中台
+export const getstandardDevListApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/vehiclePositionDev/page`, params);
+};
+export const addstandardDevApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/vehiclePositionDev/add`, params);
+};
+export const editstandardDevApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/vehiclePositionDev/edit`, params);
+};
+export const deletestandardDevApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/vehiclePositionDev/delete`, params);
+};
+
+export const getVehiclePositionFence = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/vehiclePositionFence/list`, params);
+};
+export const addVehiclePositionFence = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/vehiclePositionFence/add`, params);
+};
+export const editVehiclePositionFence = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/vehiclePositionFence/edit`, params);
+};
+export const deleteVehiclePositionFence = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/vehiclePositionFence/delete`, params);
+};
+
+// 查询车辆日行数据
+export const getVehiclePositionDayRecord = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/vehiclePositionDayRecord/list`, params);
+};
+
+// 智能安全帽--分类查询设备列表
+export const getHatDevOptionApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/safetyHatDev/list`, params);
+};
+// 智能安全帽--查询设备状态总数
+export const getSafeHatTypeTotalApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/safetyHatDev/countSafetyHatDev`, params);
+};
+// 智能安全帽--查询周报警数据
+export const getWeekAlarmDataApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/safetyHatAlarm/getRecentWeekAlarm`, params);
+};
+// 智能安全帽--查询围栏信息
+export const getSuroundInfoApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/safetyHatFence/list`, params);
+};
+// 智能安全帽--查询报警信息
+export const getAlarmRecordInfoApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/safetyHatAlarm/list`, params);
+};
+// 智能安全帽--查询实时数据信息
+export const getRealtimeDataApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/safetyHatData/list`, params);
+};
+// 智能安全帽--查询安全帽日行数据
+export const getSafeHatDayRecordApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/safetyHatData/list`, params);
+};
+// 智能安全帽--删除围栏
+export const deleteSafehatFence = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/safetyHatFence/deleteBatch`, params);
+};
+// 智能安全帽--添加围栏
+export const addSafeHatPositionFence = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/safetyHatFence/add`, params);
+};
\ No newline at end of file
diff --git a/src/assets/images/cancel.png b/src/assets/images/cancel.png
new file mode 100644
index 0000000..d6e6119
Binary files /dev/null and b/src/assets/images/cancel.png differ
diff --git a/src/assets/images/carPosition/epOff.png b/src/assets/images/carPosition/epOff.png
new file mode 100644
index 0000000..d18fcec
Binary files /dev/null and b/src/assets/images/carPosition/epOff.png differ
diff --git a/src/assets/images/carPosition/epOn.png b/src/assets/images/carPosition/epOn.png
new file mode 100644
index 0000000..fceb86f
Binary files /dev/null and b/src/assets/images/carPosition/epOn.png differ
diff --git a/src/assets/images/carPosition/equipmentPosition.png b/src/assets/images/carPosition/equipmentPosition.png
new file mode 100644
index 0000000..32b1cc1
Binary files /dev/null and b/src/assets/images/carPosition/equipmentPosition.png differ
diff --git a/src/assets/images/carPosition/equipmentPosition2.png b/src/assets/images/carPosition/equipmentPosition2.png
new file mode 100644
index 0000000..a75dd45
Binary files /dev/null and b/src/assets/images/carPosition/equipmentPosition2.png differ
diff --git a/src/assets/images/cbg.png b/src/assets/images/cbg.png
new file mode 100644
index 0000000..6798919
Binary files /dev/null and b/src/assets/images/cbg.png differ
diff --git a/src/assets/images/confirm.png b/src/assets/images/confirm.png
new file mode 100644
index 0000000..f889789
Binary files /dev/null and b/src/assets/images/confirm.png differ
diff --git a/src/assets/images/hatCount.png b/src/assets/images/hatCount.png
new file mode 100644
index 0000000..9814fe1
Binary files /dev/null and b/src/assets/images/hatCount.png differ
diff --git a/src/assets/images/lineP.png b/src/assets/images/lineP.png
new file mode 100644
index 0000000..131b7e9
Binary files /dev/null and b/src/assets/images/lineP.png differ
diff --git a/src/assets/images/safeHat.png b/src/assets/images/safeHat.png
new file mode 100644
index 0000000..9d87ba4
Binary files /dev/null and b/src/assets/images/safeHat.png differ
diff --git a/src/assets/images/smartSafeHat.png b/src/assets/images/smartSafeHat.png
new file mode 100644
index 0000000..9242cca
Binary files /dev/null and b/src/assets/images/smartSafeHat.png differ
diff --git a/src/config/staticMenu.ts b/src/config/staticMenu.ts
index 46bfa8d..79e29c9 100644
--- a/src/config/staticMenu.ts
+++ b/src/config/staticMenu.ts
@@ -45,6 +45,14 @@ export const commonMenu: Array<any> = [
 			{
 				menuName: "车辆定位",
 				companyPath: "/carPosition"
+			},
+			{
+				menuName: "机械设备定位",
+				companyPath: "/equipmentPosition"
+			},
+			{
+				menuName: "智能安全帽",
+				companyPath: "/smartSafeHat"
 			}
 		]
 	},
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index d79aa8d..22d713d 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -102,6 +102,18 @@ export const staticRouter: RouteRecordRaw[] = [
 				name: "车辆定位",
 				component: () => import("@/views/sevenLargeScreen/digitalConstruction/carPosition/index.vue")
 			},
+			{
+				path: "/equipmentPosition",
+				// path: "/carPosition",
+				name: "机械设备定位",
+				component: () => import("@/views/sevenLargeScreen/digitalConstruction/equipmentPosition/index.vue")
+			},
+			{
+				path: "/smartSafeHat",
+				// path: "/carPosition",
+				name: "智能安全帽",
+				component: () => import("@/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue")
+			},
 			{
 				path: "/edgeProtection",
 				name: "临边防护",
diff --git a/src/views/sevenLargeScreen/digitalConstruction/equipmentPosition/index.vue b/src/views/sevenLargeScreen/digitalConstruction/equipmentPosition/index.vue
new file mode 100644
index 0000000..8fc9101
--- /dev/null
+++ b/src/views/sevenLargeScreen/digitalConstruction/equipmentPosition/index.vue
@@ -0,0 +1,2193 @@
+<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: 100px; 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="fence-shape">多边形</div> -->
+													<div class="">多边形</div>
+												</div>
+											</div>
+										</div>
+
+										<!-- <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: 10px; padding-right: 10px"
+												@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 class="cFooter">
+											<div class="tool tool1" @click="handleCancel">取消</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.createTime }}</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 { getWorkerInfoList } from "@/assets/js/api/laborPerson";
+import {
+	getAlarmRecordInfo,
+	getCarDevOption,
+	addstandardDevApi,
+	getRealtimeRecordInfo,
+	getRealtimeRecordList,
+	getVehiclePositionDayRecord
+} from "@/api/modules/equipmentPosition";
+
+import {
+	getFenceTypeTotal,
+	getVehiclePositionFence,
+	addVehiclePositionFence,
+	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 equipmentPosition from "@/assets/images/carPosition/equipmentPosition2.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 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: ""
+});
+onMounted(() => {
+	// choiceMonth.value = formatMonthTime(dayValue.value);
+	// console.log("当前月份", choiceMonth.value);
+	initMap();
+	getProgressListData();
+	getCrewListData();
+	getFenceList();
+	getFenceType();
+});
+// 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;
+	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]);
+			}
+			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;
+	addForm.value = {
+		areaRadius: 100, //区域半径
+		fenceName: "", //围栏名称
+		addr: "",
+		rangeType: 1,
+		locationList: [
+			{
+				fenceId: 0,
+				id: 0,
+				latitude: "",
+				longitude: "",
+				sortNum: 0
+			}
+		],
+		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/carPosition/equipmentPosition2.png",
+			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>");
+		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/carPosition/equipmentPosition2.png"
+			});
+			// 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/carPosition/equipmentPosition2.png" // 自定义图标
+			});
+			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);
+				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>");
+
+		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) {
+// 	background: none;
+// }
+// 多边形表单
+.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: 330px;
+	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;
+		}
+		.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: start;
+					align-items: 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;
+				}
+			}
+			.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% !important;
+				}
+			}
+			.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>
diff --git a/src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue b/src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue
new file mode 100644
index 0000000..d9c57c3
--- /dev/null
+++ b/src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue
@@ -0,0 +1,2629 @@
+<template>
+	<div class="data-ledger">
+		<div class="left-data">
+			<div class="top-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.workerName" :value="item.devSn" ></el-option> -->
+										</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="personOn" v-if="item.online === 1" />
+												<img :src="personOff" v-if="item.online === 0" />
+											</div>
+											<el-checkbox :label="item.devSn" :key="item.devSn" class="dev-check">
+												<!-- {{ item.numberPlate || "" }}{{ item.personName || "" }} -->
+												{{ item.workerName }}
+											</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: 130px; 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-left: 25px; margin-right: 10px">人员名称</span>
+										<el-select filterable v-model="queryInfo.devSn" placeholder="请选择或搜索" @change="devChange" clearable>
+											<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.workerName" :value="item.workerInfoId" ></el-option> -->
+										</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="bottom-data">
+				<Card title="围栏信息">
+					<div class="left-content">
+						<div class="tab-list">
+							<div style="width: 50%">围栏名称</div>
+							<div style="width: 50%">围栏内的人数</div>
+						</div>
+						<el-scrollbar class="list-box">
+							<div v-for="(item, index) in fenceList" class="list-style" :key="item.id">
+								<div style="width: 50%">{{ item.fenceName }}</div>
+								<div style="width: 50%">{{ item.workerNum }}</div>
+							</div>
+							<div class="not-data" v-if="fenceList.length == 0">
+								<img src="@/assets/images/noData.png" alt="" />
+								<p>暂无数据</p>
+							</div>
+						</el-scrollbar>
+					</div>
+				</Card>
+			</div>
+		</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">
+									<!-- <div class="tool" @click="openFenceCreate">创建围栏</div>
+									<div class="tool" @click="deleteFence">删除围栏</div> -->
+									<div class="tool tool1" @click="openFenceCreate">创建围栏</div>
+									<div class="tool tool1" @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" :value="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: 100px; 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="fence-shape">多边形</div> -->
+													<div class="">多边形</div>
+												</div>
+											</div>
+										</div>
+										<!-- <el-form-item 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: 10px; padding-right: 10px"
+												@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 class="create-footer">
+											<el-button class="cancleBtn" @click="fenceCreateShow = false" icon="el-icon-circle-close" size="medium"
+												>取消
+											</el-button>
+											<el-button type="primary" icon="el-icon-circle-check" @click="submitFence(addFormRef)" size="medium"
+												>保存
+											</el-button>
+										</div> -->
+										
+										<div class="cFooter">
+											<div class="tool tool1" @click="handleCancel">取消</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="right-bottom">
+				<div class="hat-bottom">
+					<Card title="帽子总数">
+						<div class="hat-container">
+							<div class="hat-image">
+								<div class="hat-info">
+									<div class="hat-text">帽子总数</div>
+									<div class="hat-count">{{ devTypeTotal.count }}</div>
+								</div>
+							</div>
+						</div>
+					</Card>
+				</div>
+				<div class="week-bottom">
+					<Card title="近七天报警数据">
+						<div id="weekAlarmLine" ref="weekAlarmLine" style="width: 100%; height: 100%"></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: 15%">人员名称</div>
+									<div style="width: 15%">设备序号</div>
+									<div style="width: 25%">报警时间</div>
+									<div style="width: 40%">报警信息</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: 15%">{{ item.workerName }}</div>
+										<div style="width: 15%">{{ item.devSn }}</div>
+										<div style="width: 25%">{{ item.createTime }}</div>
+										<div style="width: 40%">{{ 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>
+	</div>
+</template>
+
+<script setup lang="ts">
+// import { getWorkerInfoList } from "@/assets/js/api/laborPerson";
+import {
+	getAlarmRecordInfoApi,
+	getHatDevOptionApi,
+	addstandardDevApi,
+	getRealtimeRecordInfo,
+	getRealtimeRecordList,
+	getVehiclePositionDayRecord,
+	getWeekAlarmDataApi,
+	getRealtimeDataApi,
+	getSafeHatDayRecordApi,
+	deleteSafehatFence,
+	addSafeHatPositionFence
+} from "@/api/modules/smartSafeHat";
+// 围栏相关API
+import {
+	//智能安全帽--查询围栏信息
+	getSuroundInfoApi,
+	getSafeHatTypeTotalApi,
+	getVehiclePositionFence,
+	addVehiclePositionFence
+} from "@/api/modules/smartSafeHat";
+// import carIcon from "@/assets/images/carPosition/carIcon.png";
+import carOn from "@/assets/images/carPosition/carOn2.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 { GlobalStore } from "@/stores";
+import { ElMessage, ElMessageBox } from "element-plus";
+import type { FormInstance, FormRules } from "element-plus";
+import Card from "@/components/card.vue";
+import * as echarts from "echarts";
+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 fenceShow = ref(true); //打开围栏弹窗
+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 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: ""
+});
+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 formRules = ref({
+	numberPlate: [
+		{
+			required: true,
+			message: "必填",
+			trigger: "blur"
+		},
+		{ min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
+	], // 长度在 1 到 20 个字符
+	devSn: [
+		{
+			required: true,
+			message: "必填",
+			trigger: "blur"
+		}
+	]
+});
+onMounted(async () => {
+	// choiceMonth.value = formatMonthTime(dayValue.value);
+	// console.log("当前月份", choiceMonth.value);
+	initMap();
+	// 智能安全帽--查询报警信息
+	getProgressListData();
+	// 智能安全帽--分类查询设备列表
+	getCrewListData();
+	// 智能安全帽--查询围栏信息
+	getFenceList();
+	// 智能安全帽--查询设备状态
+	getFenceType();
+	// 智能安全帽--查询近7天报警信息
+	getWeekAlarmData();
+
+	// clearFn();
+});
+
+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;
+	clearFn();
+}
+
+let addressStr = ref("");
+function localtionLotLat(longitude: number | null, latitude: number | null) {
+	if (longitude && latitude) {
+		const fixedLongitude = longitude.toFixed(6);
+		const fixedLatitude = latitude.toFixed(6);
+		return `经纬度 ${fixedLongitude}, ${fixedLatitude}`;
+	}
+	return "未知位置";
+}
+
+const resolveAddStr = computed(() => async (longitude: any, latitude: any) => {
+	//计算属性传递参数
+	console.log("👇传参");
+	console.log(longitude, latitude);
+	if (longitude && latitude) {
+		var addressResolve = new AMap.LngLat(longitude, latitude);
+		let geocoder2 = new AMap.Geocoder();
+		await geocoder2.getAddress(addressResolve, function (status, result) {
+			console.log("👇解析地址");
+			console.log(status, result);
+			if (status === "complete") {
+				addressStr.value = result.regeocode.formattedAddress;
+				// console.log(result.regeocode.formattedAddress);
+				console.log(addressStr);
+				return addressStr.value;
+			} else {
+				return `未知位置1`;
+			}
+		});
+	}
+
+	return "未知位置2";
+});
+
+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
+	};
+	deleteSafehatFence(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 longitude = "";
+	let latitude = "";
+	let fenceShape = "";
+	if (addForm.value.locationList.length === 1) {
+		longitude = addForm.value.locationList[0].longitude;
+		latitude = addForm.value.locationList[0].latitude;
+	}
+	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);
+			addSafeHatPositionFence(params).then(res => {
+				if (res.success) {
+					ElMessage({
+						showClose: true,
+						message: res.message,
+						type: "success"
+					});
+					getFenceList();
+				}
+			});
+			closeFenceCreate();
+		} else {
+			console.log("error submit!!");
+			return false;
+		}
+	});
+};
+
+// 智能安全帽--查询近七天报警信息
+let xData = ref([] as any);
+let yData1 = ref([0, 0, 0, 0, 0, 0, 0] as any); //SOS报警
+let yData2 = ref([0, 0, 0, 0, 0, 0, 0] as any); //静默报警
+let yData3 = ref([0, 0, 0, 0, 0, 0, 0] as any); //围栏报警
+function getWeekAlarmData() {
+	let data = {
+		projectSn: store.sn
+	};
+	getWeekAlarmDataApi(data).then(res => {
+		console.log("👇智能安全帽--近7天报警数据");
+		console.log(res);
+		if (res.success) {
+			res.result.forEach(element1 => {
+				// if(element1.name.includes("SOS报警")){
+				// 	console.log(element1)
+				// }
+				if (element1.name.includes("SOS报警")) {
+					element1.oneTrendList.forEach((element2, index) => {
+						xData.value[index] = element2.x;
+						console.log(xData.value);
+						let num = parseInt(element2.y);
+						yData1.value[index] += num;
+					});
+				}
+				if (element1.name.includes("静默报警")) {
+					element1.oneTrendList.forEach((element2, index) => {
+						let num = parseInt(element2.y);
+						yData2.value[index] += num;
+					});
+				}
+				if (element1.name.includes("围栏报警")) {
+					element1.oneTrendList.forEach((element2, index) => {
+						let num = parseInt(element2.y);
+						yData3.value[index] += num;
+					});
+				}
+			});
+			console.log("👇智能安全帽--近7天报警筛选后的数据");
+			console.log(xData);
+			console.log("👇智能安全帽--SOS报警");
+			console.log(yData1);
+			console.log("👇智能安全帽--静默报警");
+			console.log(yData2);
+			console.log("👇智能安全帽--围栏报警");
+			console.log(yData3);
+
+			// 智能安全帽--获取折线图
+			getLineEcharts();
+		}
+	});
+}
+
+// 智能安全帽--获取折线图
+function getLineEcharts() {
+	var chartDom = document.getElementById("weekAlarmLine");
+	var myChart = echarts.init(chartDom);
+	var option;
+	option = {
+		textStyle: { color: "white" },
+		tooltip: {
+			trigger: "axis"
+		},
+		legend: {
+			data: ["SOS报警", "静默报警", "围栏报警"],
+			textStyle: { color: "white" }
+		},
+		grid: {
+			left: "3%",
+			right: "4%",
+			bottom: "3%",
+			// show: true,
+			// borderColor: '#ccc',
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			boundaryGap: true,
+			// data: [ "2024-03-02", "2024-03-05", "2024-03-08", "2024-03-11", "2024-03-14", "2024-03-17", "2024-03-20", ],
+			data: xData.value,
+			axisLine: {
+				lineStyle: {
+					color: "#15356F" // 设置线的颜色
+				}
+			}
+		},
+		yAxis: {
+			type: "value",
+			splitLine: {
+				lineStyle: {
+					color: "#15356F" // 设置线的颜色
+				}
+			}
+		},
+		series: [
+			{
+				name: "SOS报警",
+				type: "line",
+				// stack: "Total",
+				// data: [120, 132, 101, 134, 90, 230, 210],
+				// data: [0, 0, 0, 0, 0, 0, 0],
+				data: yData1.value,
+				smooth: true,
+				symbol: "circle",
+				symbolSize: 10,
+				lineStyle: { color: "#F13333", width: 2 },
+				itemStyle: { color: "white", borderColor: "#F13333", borderWidth: 1 }
+			},
+			{
+				name: "静默报警",
+				type: "line",
+				// stack: "Total",
+				// data: [220, 182, 191, 234, 290, 330, 310],
+				// data: [0, 0, 0, 0, 0, 0, 0],
+				data: yData2.value,
+				smooth: true,
+				symbol: "circle",
+				symbolSize: 10,
+				lineStyle: { color: "#4AC0F3", width: 2 },
+				itemStyle: { color: "white", borderColor: "#4AC0F3", borderWidth: 1 }
+			},
+			{
+				name: "围栏报警",
+				type: "line",
+				// stack: "Total",
+				// data: [150, 232, 201, 154, 190, 330, 410],
+				// data: [0, 0, 0, 0, 1, 0, 0],
+				data: yData3.value,
+				smooth: true,
+				symbol: "circle",
+				symbolSize: 10,
+				lineStyle: { color: "#81F279", width: 2 },
+				itemStyle: { color: "white", borderColor: "#81F279", borderWidth: 1 }
+			}
+		]
+	};
+
+	option && myChart.setOption(option);
+}
+
+function refreshDev() {
+	alarmDevSn.value = "";
+	checkAll.value = false;
+	checkedFence.value = [];
+	fenceSearch.value = "";
+	checkedCities.value = [];
+	laborType.value = "";
+	queryInfo.value.devSn = "";
+	clearFn();
+	getCrewListData();
+	getProgressListData();
+	getLineEcharts();
+	getFenceList();
+}
+
+// 格式化时间
+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
+	};
+
+	getRealtimeDataApi(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]);
+			}
+			trackMapInit(path, currentData);
+		}
+		console.log("当前数据", path, currentData);
+	});
+}
+
+// 日行数据
+function getDayRunData() {
+	let data = {
+		projectSn: store.sn,
+		devSn: queryInfo.value.devSn,
+		month: choiceMonth.value
+		// day: dayValue.value
+	};
+	console.log("👇日行数据月份查询参数");
+	console.log(data);
+	getSafeHatDayRecordApi(data).then(res => {
+		if (res.success) {
+			console.log("日行数据", res);
+			dayRunRecord.value = res.result;
+		}
+		let newDay = formatDayTime(dayValue.value);
+		console.log(newDay);
+		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;
+		checkedCities;
+	});
+	// 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 name = "";
+	let data = {
+		devSn: e.devSn,
+		// devSn: "866652021371993",
+		projectSn: store.sn
+	};
+	getRealtimeDataApi(data).then(res => {
+		if (res.result.length > 0) {
+			// if (res.result.records[0].type === 1) {
+			// 	echoCarMarker(res.result.records[0]);
+			// }
+			// if (res.result.records[0].type === 2) {
+			// 	echoPersonMarker(res.result.records[0]);
+			// }
+			// echoCarMarker(res.result[0]);
+			echoPersonMarker(res.result[0]);
+		} else {
+			console.log("设备暂无数据", res);
+		}
+		console.log("实时数据", res);
+	});
+}
+
+// 智能安全帽--获取围栏列表数据
+function getFenceList() {
+	let data = {
+		fenceName: fenceSearch.value,
+		projectSn: store.sn
+	};
+	// getVehiclePositionFence(data).then(res => {
+	getSuroundInfoApi(data).then(res => {
+		if (res.success) {
+			fenceList.value = res.result;
+
+			// fenceList.value[0].fenceName = "深圳";
+			// fenceList.value[0].longitude = 114.12124287733712;
+			// fenceList.value[0].latitude = 30.6517077553546;
+
+			// fenceList.value[1].fenceName = "广州";
+			// fenceList.value[1].longitude = 113.2644;
+			// fenceList.value[1].latitude = 23.1291;
+
+			// console.log("👇智能安全帽--围栏信息--转换数据");
+			// let testArr = ref([{longitude: '',latitude: ''}])
+			// fenceList.value.forEach(element => {
+			// 	testArr.value[0].longitude = element.longitude
+			// 	testArr.value[0].latitude = element.latitude
+			// 	element.fenceShapeArr = JSON.stringify(testArr._value)
+			// 	console.log(element.fenceShapeArr)
+			// });
+			console.log(fenceList);
+			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
+	};
+	getSafeHatTypeTotalApi(data).then(res => {
+		console.log("👇智能安全帽--查询设备各状态数量");
+		console.log(res);
+		if (res.success) {
+			devTypeTotal.value = res.result;
+		}
+	});
+}
+// 打开创建围栏弹窗
+function openFenceCreate() {
+	fenceCreateShow.value = true;
+}
+// 关闭创建围栏弹窗
+function closeFenceCreate() {
+	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 openFence() {
+	fenceShow.value = true;
+}
+// 关闭围栏弹窗
+function closeFence() {
+	fenceShow.value = false;
+}
+function close() {
+	addEditForm.value = {
+		personName: "",
+		numberPlate: "",
+		devSn: "",
+		type: 1,
+		driver: ""
+	};
+}
+//获取查询下拉
+function getCrewListData() {
+	let onlineType = "";
+	if (laborType.value !== "") {
+		onlineType = laborType.value;
+	}
+	let data = {
+		online: onlineType
+		// projectSn: store.sn
+	};
+	console.log("👇智能安全帽--分类查询设备列表--查询参数");
+	console.log(data);
+	getHatDevOptionApi(data).then(res => {
+		console.log("👇智能安全帽--分类查询设备列表");
+		console.log(res);
+		if (res.code == 200) {
+			console.log("👇智能安全帽--分类查询设备列表--结果集");
+			console.log(res.result);
+
+			const filterArray = res.result
+				.filter(item => item.workerName !== "")
+				.map(item => ({ devSn: item.devSn, workerName: item.workerName }));
+			let nameOption = filterArray.map(item => {
+				return {
+					label: item.workerName,
+					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.concat(carOption);
+			nameOptions.value = nameOption.concat([]);
+			
+			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
+	};
+	getAlarmRecordInfoApi(data).then(res => {
+		console.log("👇智能安全帽--查询报警信息");
+		console.log(res);
+		if (res.code == 200) {
+			listData.value = res.result;
+			pagInfo.value.total = res.result.total;
+		}
+	});
+}
+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) {
+		listData;
+		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);
+		// if (currentRecord.type === 1) {
+		// 	getRealTimeData(currentRecord);
+		// }
+		// if (currentRecord.type === 2) {
+		// 	getRealTimeData(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();
+	console.log("👇围栏数据");
+	console.log(value);
+	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("drawFencePoint选中某条", 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 = nameOptions.value[0].value;
+		// queryInfo.value.devSn = devList.value[0].devSn;
+		// 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";
+	let markIcon = "src/assets/images/smartSafeHat.png";
+	// let markIcon = "@/assets/images/carPosition/carIcon.png";
+	// let markIcon = "src/assets/images/carPosition/carIcon.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/smartSafeHat.png", // 自定义图标
+			// icon: "@/assets/images/carPosition/carIcon.png", // 自定义图标
+			// icon: "src/assets/images/carPosition/carIcon.png", // 自定义图标
+			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.numberPlate + "</p>");
+		info.push('<p style="padding:7px;">人员名称: ' + item.workerName + "</p>");
+		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
+		info.push('<p style="padding:7px;">位置: ' + address + "</p>");
+		var infoWindow = new AMap.InfoWindow({
+			offset: new AMap.Pixel(30, -30),
+			content: info.join("") //使用默认信息窗体框样式，显示信息内容
+		});
+		infoWindow.open(map, e.target.getPosition());
+	}
+
+	map.setFitView();
+}
+function startAnimation() {
+	marker.moveAlong(lineArr, 200);
+}
+
+var placeSearch = ref();
+// 围栏定位地图
+function initMap() {
+	var that = this;
+	//地图加载
+	map = new AMap.Map("mapContainer", {
+		// viewMode: '3D',
+		resizeEnable: true
+		// center: [116.39, 39.9],
+		// offset: new AMap.Pixel(-10, -10) // 设置地图偏移量
+	});
+	var geocoder = new AMap.Geocoder({});
+	//输入提示
+	var autoOptions = {
+		input: "tipinput"
+	};
+	let auto = new AMap.Autocomplete(autoOptions);
+	placeSearch = new AMap.PlaceSearch({
+		map: map
+	}); //构造地点查询类
+	AMap.event.addListener(auto, "select", 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 => {
+			return 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 select(e) {
+	console.log("select", e);
+	placeSearch.setCity(e.poi.adcode);
+	placeSearch.search(e.poi.name); //关键字查询查询
+}
+
+//清空地图
+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) {
+	console.log("👇开始加载地图数据");
+	//初始化地图对象，加载地图
+	// 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/smartSafeHat.png" // 自定义图标
+				// icon: "@/assets/images/carPosition/carIcon.png" // 自定义图标
+				// icon: "src/assets/images/carPosition/carIcon.png" // 自定义图标
+			});
+			// 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.numberPlate + "</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(30, -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],
+				position: lnglats[0],
+				map: map,
+				icon: personOn // 自定义图标
+			});
+			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);
+				drawPersonMarker();
+				// createMarkerAndInfoWindow();
+			} else {
+				console.log("获取地址信息失败");
+				drawPersonMarker();
+				// 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.personName + "</p>");
+		info.push('<p style="padding:7px;">人员名称: ' + item.workerName + "</p>");
+		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
+		info.push('<p style="padding:7px;">位置: ' + address + "</p>");
+
+		var infoWindow = new AMap.InfoWindow({
+			offset: new AMap.Pixel(10, -30),
+			content: info.join("") //使用默认信息窗体框样式，显示信息内容
+		});
+
+		// infoWindow.open(map, e.target.getPosition());
+		infoWindow.open(map, lnglat);
+	}
+	map.setFitView();
+}
+</script>
+
+<!-- 组件自定义样式（需嵌套外层class） -->
+
+<style type="text/css">
+.amap-logo {
+	display: none;
+	opacity: 0 !important;
+}
+.amap-copyright {
+	opacity: 0;
+}
+.content {
+}
+</style>
+
+<style lang="scss" scoped>
+// :deep(.h-card .content) {
+// 	background: none;
+// }
+// 多边形表单
+.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: 15px;
+		color: #272d45;
+		padding-left: 10px;
+		margin-bottom: 20px;
+		font-weight: 600;
+		font-family: Source Han Sans CN, Source Han Sans CN;
+	}
+}
+.fenceCreate {
+	position: absolute;
+	background: url("@/assets/images/cbg.png") no-repeat;
+	background-size: 100% 100%;
+	box-sizing: border-box;
+	padding: 25px;
+	width: 330px;
+	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 {
+		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;
+		}
+		.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: start;
+					align-items: 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;
+			color: #5181f6;
+			border-radius: 2px 2px 2px 2px;
+			border: 1px solid #5181f6;
+		}
+	}
+	.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: 55%;
+	.choice-item {
+		display: flex;
+		align-items: center;
+		position: relative;
+		height: 33px;
+		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: 5%;
+			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;
+		// 	}
+		// }
+		.top-data {
+			height: 58.5%;
+			.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: 20px;
+						padding: 10px 0;
+						justify-content: center;
+						cursor: pointer;
+					}
+					.alarm-data {
+						display: flex;
+						align-items: center;
+						width: 50%;
+						height: 20px;
+						padding: 10px 0;
+						justify-content: center;
+						cursor: pointer;
+					}
+				}
+				.list-tool {
+					display: flex;
+					// margin-top: 10px;
+					margin-left: 30px;
+					.tool-btn {
+						width: 33px;
+						height: 32px;
+						margin-left: 20px;
+						cursor: pointer;
+						img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+			}
+		}
+		.bottom-data {
+			margin-top: 1%;
+			height: 40%;
+
+			.left-content {
+				height: 100%;
+				width: 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: 90%;
+					.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: 20%;
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						justify-content: center;
+						position: absolute;
+						img {
+							width: 40%;
+							margin: 5% 30%;
+						}
+						p {
+							color: #fff;
+							font-size: calc(100vw * 14 / 1920);
+							margin: -6% 37%;
+						}
+					}
+				}
+			}
+		}
+	}
+	.right-data {
+		width: 78%;
+		height: 100%;
+		.map-top {
+			height: 58%;
+			position: relative;
+			:deep(.h-card) {
+				.content {
+					margin-top: 1% !important;
+				}
+			}
+			.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%;
+			}
+		}
+
+		.right-bottom {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 41%;
+			.hat-bottom {
+				width: 23%;
+				margin-top: 20px;
+				height: 100%;
+				position: relative;
+				:deep(.h-card) {
+					.content {
+						margin-top: 1% !important;
+					}
+				}
+				.hat-container {
+					width: 100%;
+					height: 100%;
+					display: flex;
+					align-items: center;
+					.hat-image {
+						width: 100%;
+						height: 50%;
+						// margin-top: 15%;
+						background: url("@/assets/images/hatCount.png") no-repeat;
+						background-size: contain;
+						.hat-info {
+							margin-left: 45%;
+							margin-top: 5%;
+							width: 100%;
+							height: 100%;
+							color: #fff;
+							font-style: italic;
+							.hat-text {
+								font-size: 16px;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+								width: 50%;
+								height: 25%;
+								background: url("@/assets/images/dustNoise/menuImg.png") no-repeat;
+								background-size: 100% 100%;
+							}
+							.hat-count {
+								font-size: 20px;
+								width: 50%;
+								height: 25%;
+								font-weight: bolder;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+							}
+						}
+					}
+				}
+			}
+			.week-bottom {
+				width: 25%;
+				margin-top: 20px;
+				height: 100%;
+				position: relative;
+				:deep(.h-card) {
+					.content {
+						margin-top: 1% !important;
+					}
+				}
+				div {
+				}
+			}
+
+			.alarm-bottom {
+				width: 50%;
+				margin-top: 20px;
+				height: 100%;
+				position: relative;
+				:deep(.h-card) {
+					.content {
+						margin-top: 1% !important;
+					}
+				}
+				.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: 90%;
+							.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: 33%;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					position: absolute;
+					img {
+						width: 40%;
+						margin: 5% 30%;
+					}
+					p {
+						color: #fff;
+						font-size: calc(100vw * 14 / 1920);
+						margin: -6% 37%;
+					}
+				}
+			}
+		}
+	}
+}
+
+.top-select {
+	margin: 0 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: 5px;
+					width: 80px;
+				}
+			}
+		}
+	}
+	:deep(.el-calendar-table .el-calendar-day:hover) {
+		background-color: #3e5c94;
+	}
+	:deep(.el-calendar-table .el-calendar-day) {
+		height: 40px !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 {
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/indexL.vue b/src/views/sevenLargeScreen/indexL.vue
index c13c319..76d2125 100644
--- a/src/views/sevenLargeScreen/indexL.vue
+++ b/src/views/sevenLargeScreen/indexL.vue
@@ -212,6 +212,14 @@ let menuList = ref([
 			{
 				menuName: "车辆定位",
 				companyPath: "/carPosition"
+			},
+			{
+				menuName: "机械设备定位",
+				companyPath: "/equipmentPosition"
+			},
+			{
+				menuName: "智能安全帽",
+				companyPath: "/smartSafeHat"
 			}
 		]
 	},
diff --git a/src/views/sevenLargeScreen/qualityControl/concreteMonitor/rightTop.vue b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/rightTop.vue
index d75980e..c21b1c0 100644
--- a/src/views/sevenLargeScreen/qualityControl/concreteMonitor/rightTop.vue
+++ b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/rightTop.vue
@@ -7,7 +7,7 @@
 			</div>
 			<div class="concrete-alarm">
 				<div class="text">正在告警</div>
-				<div class="num">{{ realTimeTotal.alarmNum || 0 }}</div>
+				<div class="num">{{ realTimeTotal.alarmPositionNum || 0 }}</div>
 			</div>
 		</div>
 	</Card>