diff --git a/components/tree-node/cameraIndex.vue b/components/tree-node/cameraIndex.vue
new file mode 100644
index 00000000..37357478
--- /dev/null
+++ b/components/tree-node/cameraIndex.vue
@@ -0,0 +1,145 @@
+ <template>
+ 	<view class="tree-content-compontent">
+ 		<view class="content-box" :class="{ 'content-box_project': item.type == 2 }"
+ 			:style="`padding-left: ${treeIndex * 30}rpx;`" @click="toggleNodes(item)">
+ 			<view class="box-text">
+ 				<image v-if="item.deviceState == 1" class="img" src="/static/bodyWornCamera/bodyWornCamera_online.png"
+ 					mode=""></image>
+ 				<image v-else-if="item.deviceState == 2" class="img"
+ 					src="/static/bodyWornCamera/bodyWornCamera_offline.png" mode=""></image>
+ 				<text>{{ item.name }}</text>
+ 				<text v-if="item.type == 1">({{ deviceStateNum(item) }}/{{ item.children.length || 0 }})</text>
+ 			</view>
+ 			<view @click.stop="expandFn">
+ 				<!-- <u-icon name="arrow-right" color="#B3B3B3" size="40"
+					v-if="!expanded && item.children && item.children.length" style="margin-right: 10rpx;"></u-icon>
+				<u-icon name="arrow-down" color="#B3B3B3" size="40"
+					v-if="expanded && item.children && item.children.length" style="margin-right: 10rpx;"></u-icon> -->
+ 				<u-icon v-if="!expanded && item.children && item.children.length" name="arrow-right" color="#B3B3B3"
+ 					size="40"></u-icon>
+ 				<u-icon v-if="expanded && item.children && item.children.length" name="arrow-down" color="#B3B3B3"
+ 					size="40"></u-icon>
+ 			</view>
+ 			<image v-if="(!item.children || !item.children.length) && !iconShow" style="width: 55rpx; height: 40rpx"
+ 				src="../../static/videoControlIcon/videoIcon1.png" mode="">
+ 			</image>
+ 			<!-- <image style="width:80rpx;height:80rpx;float:left" src="../../static/icon-down-black.png" mode="">
+			</image> -->
+ 		</view>
+ 		<view class="sub-component">
+ 			<view :class="{ expandedStyle: expanded == true }"
+ 				v-if="item.children && item.children.length && expanded">
+ 				<TreeMenu :pageType="pageType" :iconShow="iconShow" v-for="(child, index) in item.children"
+ 					:key="child.id" :item="child" :treeIndex="treeIndex + 1" :expandedIndex="index"
+ 					@clickItem="clickTreeItem"></TreeMenu>
+ 			</view>
+ 		</view>
+ 	</view>
+ </template>
+
+ <script>
+ 	import TreeMenu from "./areaIndex.vue";
+ 	export default {
+ 		name: "TreeMenu",
+ 		components: {
+ 			TreeMenu,
+ 		},
+ 		props: ["item", "pageType", "treeIndex", "iconShow", "expandedIndex"],
+ 		data() {
+ 			return {
+ 				expanded: false,
+ 			};
+ 		},
+ 		mounted() {
+ 			if (this.expandedIndex == 0) {
+ 				this.expanded = true;
+ 			}
+ 		},
+ 		methods: {
+ 			clickTreeItem(item) {
+ 				console.log(item, 777888);
+ 				if (!item.deviceState) return;
+ 				this.$emit("clickItem", item);
+ 				// uni.navigateTo({
+ 				// 	url: `/pages/videoManage/videoGroup?&sn=${item.projectSn}`
+ 				// })
+ 			},
+ 			expandFn(e) {
+ 				console.log(e, 666);
+ 				this.expanded = !this.expanded;
+ 			},
+ 			toggleNodes(item) {
+ 				this.$emit("clickItem", item);
+ 			},
+ 		},
+ 		computed: {
+ 			deviceStateNum() {
+ 				return (row) => {
+ 					return row.children.filter(item => item.deviceState == 1).length;
+ 				}
+ 			}
+ 		}
+ 	};
+ </script>
+
+ <style lang="scss" scoped>
+ 	.tree-content-compontent {
+ 		background: white;
+ 		border-bottom: 2rpx solid #f7f7f7;
+
+ 		.content-box {
+ 			display: flex;
+ 			align-items: center;
+ 			justify-content: start;
+ 			padding: 16rpx 26rpx;
+ 			position: relative;
+
+ 			// border-bottom: 2px solid #D6D6D6;
+ 			>.box-text {
+ 				font-family: PingFang SC, PingFang SC;
+ 				font-weight: 500;
+ 				font-size: 30rpx;
+ 				color: #1a1a1a;
+ 				margin-right: auto;
+ 				display: inline-block;
+ 				flex: 1;
+ 				white-space: nowrap;
+ 				overflow: hidden;
+ 				text-overflow: ellipsis;
+				display: flex;
+				align-items: center;
+
+ 				.img {
+ 					width: 28rpx;
+ 					height: 34rpx;
+ 					margin-right: 10rpx;
+ 				}
+ 			}
+
+ 			.box-text1 {
+ 				font-weight: 500;
+ 				font-size: 28rpx;
+ 				color: #b3b3b3;
+ 				padding: 0 28rpx;
+ 			}
+ 		}
+
+ 		.content-box_project {
+ 			background-color: #f2f3f7;
+ 			border-bottom: 1px solid #fff;
+ 		}
+
+ 		.sub-component {
+ 			background: #ffffff;
+
+ 			.tree-content-compontent {
+ 				background: #ffffff;
+ 				border: none;
+ 			}
+ 		}
+
+ 		.expandedStyle {
+ 			// padding-left: 60rpx;
+ 		}
+ 	}
+ </style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 413ea5e2..b6c50a64 100644
--- a/pages.json
+++ b/pages.json
@@ -3307,6 +3307,27 @@
             "style": {
                 "navigationBarTitleText": ""
             }
+        },
+        {
+        	"path" : "pages/projectEnd/bodyWornCamera/index",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : ""
+        	}
+        },
+        {
+        	"path" : "pages/projectEnd/bodyWornCamera/bodyWornCameraDetail",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : ""
+        	}
+        },
+        {
+        	"path" : "pages/projectEnd/bodyWornCamera/playBackVideo",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : ""
+        	}
         }
     ],
     // "subPackages":[{
diff --git a/pages/projectEnd/bodyWornCamera/bodyWornCameraDetail.vue b/pages/projectEnd/bodyWornCamera/bodyWornCameraDetail.vue
new file mode 100644
index 00000000..6d77809e
--- /dev/null
+++ b/pages/projectEnd/bodyWornCamera/bodyWornCameraDetail.vue
@@ -0,0 +1,1082 @@
+<template>
+	<view class="addIssue">
+		<view class="fixedheader">
+			<headers :showBack="true" :themeType="true">
+				<view class="headerName">
+					{{ policeCameraItemInfo.devName }}
+				</view>
+			</headers>
+			<u-tabs :bar-height="4" :font-size="28" active-color="#498CEC" inactive-color="#B3B3B3" :list="list"
+				:is-scroll="false" :current="current" @change="change"></u-tabs>
+			<view class="uni-form-item" v-if="current >= 1 && current < 4">
+				<u-search class="uni-input" placeholder="请输入工单号" :show-action="false" @change="onRefresh"
+					v-model="pageInfo.workTicketNumber"></u-search>
+				<view @click="constructionTimeShow = true" class="calendar_box">
+					<view :class="{'calendar_active': constructionTimeShow}" class="calendar"></view>
+				</view>
+			</view>
+		</view>
+		<view class="content"
+			:style="{paddingTop: mobileTopHeight + 44 + 44 + (current >= 1 && current < 4 ? 64 : 0) + 'px'}">
+			<scroll-view scroll-y="true" :class="{'content_main_active': policeCameraItemInfo.status == 2}"
+				class="content_main" v-if="current == 0">
+				<view class="main-box">
+					<view class="box-item">
+						<view>设备名称:</view>
+						<view>{{policeCameraItemInfo.devName|| '--'}}</view>
+					</view>
+					<view class="box-item">
+						<view>设备编号:</view>
+						<view>{{policeCameraItemInfo.devSn|| '--'}}</view>
+					</view>
+					<view class="box-item">
+						<view>推送人:</view>
+						<view>{{policeCameraItemInfo.pusherNames|| '--'}}</view>
+					</view>
+					<view class="box-item">
+						<view>使用人:</view>
+						<view>{{policeCameraItemInfo.userNames|| '--'}}</view>
+					</view>
+					<view class="box-item">
+						<view>在线状态:</view>
+						<view class="state-box" :class="{
+						  'state-box_offline': policeCameraItemInfo.deviceState != 1,
+						}">
+							{{ policeCameraItemInfo.deviceState == 1 ? "在线" : "离线" }}
+						</view>
+					</view>
+					<view class="box-item">
+						<view>SD卡容量:</view>
+						<view>{{policeCameraItemInfo.sdCardCapacity|| '--'}}</view>
+					</view>
+					<view class="box-item">
+						<view>已用容量:</view>
+						<view>{{policeCameraItemInfo.usedCapacity|| '--'}}</view>
+					</view>
+					<view class="box-item">
+						<view>是否开启低电量推送:</view>
+						<view>
+							{{ policeCameraItemInfo.enableLowBatteryPushNotification == 1 ? "是" : policeCameraItemInfo.enableLowBatteryPushNotification == 0 ? "否" : "--"}}
+						</view>
+					</view>
+					<view class="box-item">
+						<view>网络类型:</view>
+						<view>{{policeCameraItemInfo.networkType|| '--'}}</view>
+					</view>
+					<view class="box-item">
+						<view>固件版本:</view>
+						<view>{{policeCameraItemInfo.firmwareVersion|| '--'}}</view>
+					</view>
+					<!-- <view class="box-item">
+						<view>录像状态:</view>
+						<view>{{policeCameraItemInfo.recordingStatus|| '--'}}</view>
+					</view> -->
+					<view class="box-item">
+						<view>电量:</view>
+						<view>{{policeCameraItemInfo.batteryLevel|| '--'}}</view>
+					</view>
+					<view class="box-item">
+						<view>剩余容量:</view>
+						<view>
+							{{policeCameraItemInfo.usedCapacity ? policeCameraItemInfo.sdCardCapacity -policeCameraItemInfo.usedCapacity: "--"}}
+						</view>
+					</view>
+					<view class="box-item">
+						<view>设备位置:</view>
+						<view>{{policeCameraItemInfo.devLocation || '--'}}</view>
+					</view>
+				</view>
+			</scroll-view>
+			<scroll-view scroll-y="true" @scrolltolower="onScrollTolower()" class="content_main1"
+				v-else-if="current >= 1 && current < 4">
+				<view :class="{'content_main1_box2': current == 2, 'content_main1_box': current == 1 || current == 3}"
+					v-if="policeCameraItemFileList.length > 0">
+					<u-swipe-action :btn-width="61" :show="item.show" :index="index"
+						v-for="(item, index) in policeCameraItemFileList" :key="item.id" @click="onDeleteClick"
+						:options="options">
+						<view v-if="current == 1" class="swipe-content_box" @click="onNavigateToDetail(item)">
+							<image class="video-box" :src="url_config + 'image/' + item.videoScreenshot" mode="aspectFill">
+							</image>
+							<view class="main1_box-item">
+								<view class="box-item_top">
+									<view>{{ item.startTime }}</view>
+									<view>至</view>
+									<view>{{ item.endTime }}</view>
+								</view>
+								<view class="box-item_bottom">
+									<view>{{ item.workTicketNumber }}</view>
+									<view>{{ (item.fileLen / (1024 * 1024)).toFixed(2) }}MB</view>
+								</view>
+							</view>
+						</view>
+						<view v-else-if="current == 2" class="swipe-content_box2">
+							<image class="video-box" :src="url_config + 'image/' + item.fileUrl" mode="aspectFill">
+							</image>
+							<view class="main1_box-item">
+								<view class="box-item_top">
+									<view>{{ item.workTicketNumber }}</view>
+									<view>{{ (item.fileLen / (1024 * 1024)).toFixed(2) }}MB</view>
+								</view>
+								<view class="box-item_bottom">
+									{{ item.uploadTime }}
+								</view>
+							</view>
+						</view>
+						<view v-else-if="current == 3" class="swipe-content_box3">
+							<view class="content_box3-left">
+								<view class="box3-left_top">
+									<view></view>
+									<view>{{ item.devName }}音频</view>
+									<view>{{ (item.fileLen / (1024 * 1024)).toFixed(2) }}MB</view>
+								</view>
+								<view class="box3-left_bottom">
+									<view>{{item.fileTime}}</view>
+									<view>时长：{{ item.duration }}</view>
+								</view>
+							</view>
+							<view class="content_box3-right">
+								<!-- <audio :ref="`audio${item.id}`" :src="url_config + 'image/' + item.fileUrl" controls
+									loop></audio> -->
+								<view class="bodyworn_pause" :class="{ bodyworn_play: item.is_play }"
+									@click.stop="onAudioClick(item)"></view>
+							</view>
+						</view>
+					</u-swipe-action>
+				</view>
+				<view class="new-nodata-height" v-else>
+					<view class="new-nodata">
+						<view></view>
+						<text>暂无数据...</text>
+					</view>
+				</view>
+				<u-loadmore v-if="policeCameraItemFileList.length > 0" :status="pageInfo.status" />
+			</scroll-view>
+			<view class="content_main2" v-else-if="current == 4">
+				<CalendarView @examineCalendarView="examineCalendarView"
+					:ocrBuildLogAllList="ocrBuildLogCountOcrBuildLogForMonth" :defaultMonth="formInline.month">
+				</CalendarView>
+				<view class="main2_detail">
+					今日使用时长:{{durationHour(formInline.duration)}}h
+				</view>
+			</view>
+		</view>
+		<u-calendar v-model="constructionTimeShow" mode="range" :max-date="'2300-01-01'"
+			@change="onConstructionTimeChange"></u-calendar>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import CalendarView from './components/calendarView.vue';
+	export default {
+		components: {
+			CalendarView
+		},
+		data() {
+			return {
+				mobileTopHeight: 0,
+				projectDetail: {},
+				list: [{
+					name: '设备监测'
+				}, {
+					name: '录像中心'
+				}, {
+					name: '图片中心'
+				}, {
+					name: '音频中心'
+				}, {
+					name: '工作时长'
+				}],
+				current: 0,
+				itemId: "",
+				policeCameraItemInfo: {},
+				pageInfo: {
+					pageNo: 1,
+					pageSize: 10,
+					date: [],
+					status: "loadmore",
+					total: 0,
+					startTime_begin: "",
+					endTime_begin: "",
+					workTicketNumber: "",
+					fileType: 3,
+				},
+				policeCameraItemFileList: [],
+				options: [{
+					text: "删除",
+					style: {
+						backgroundColor: "#D82009",
+					},
+				}],
+				constructionTimeShow: false,
+				ocrBuildLogCountOcrBuildLogForMonth: [],
+				formInline: {
+					month: "",
+					duration: 0,
+				},
+			}
+		},
+		onLoad(opts) {
+			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
+			this.itemId = opts.id;
+			this.formInline.month = this.$dayjs().format("YYYY-MM-DD");
+			this.getPoliceCameraItemQueryByIdFn();
+		},
+		mounted() {
+			var that = this
+			uni.getSystemInfo({
+				success(res) {
+					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
+					uni.setStorageSync('systemInfo', res)
+					console.log(res)
+				}
+			})
+		},
+		methods: {
+			examineCalendarView(item) {
+				console.log(item)
+				this.formInline.duration = item.duration;
+			},
+			getOcrBuildLogCountOcrBuildLogForMonth() {
+				let data = {
+					projectSn: this.projectDetail.projectSn,
+					itemId: this.itemId,
+					startDate: this.$dayjs(this.formInline.month).startOf("month").format("YYYY-MM-DD"),
+					endDate: this.$dayjs(this.formInline.month).endOf("month").format("YYYY-MM-DD"),
+				}
+				this.sendRequest({
+					url: 'xmgl/policeCameraItem/countWorkingHours',
+					method: 'POST',
+					data: data,
+					success: res => {
+						if (res.code == 200) {
+							this.ocrBuildLogCountOcrBuildLogForMonth = res.result;
+							const find = this.ocrBuildLogCountOcrBuildLogForMonth.find(item => item.date == this.formInline.month);
+							if(find) {
+								this.formInline.duration = find.duration || 0;
+							}
+						}
+					}
+				})
+			},
+			// 获取时间
+			onConstructionTimeChange(event) {
+				this.pageInfo.startTime_begin = event.startDate;
+				this.pageInfo.endTime_end = event.endDate;
+				this.onRefresh();
+			},
+			onRefresh() {
+				this.pageInfo.pageNo = 1;
+				this.pageInfo.status = 'loadmore';
+				this.policeCameraItemFileList = [];
+				this.getPoliceCameraItemFilePageFn();
+			},
+			onNavigateToDetail(row) {
+				console.log(row)
+				const params = {
+					beginTime: row.startTime,
+					endTime: row.endTime,
+					url: row.fileUrl,
+					workTicketNumber: row.workTicketNumber,
+				}
+				uni.navigateTo({
+					url: './playBackVideo?params=' + JSON.stringify(params)
+				})
+			},
+			onAudioClick(row) {
+				const find = this.policeCameraItemFileList.find((item) => item.id == row.id);
+				console.log(find);
+				if (!find.audioContext) {
+					find.audioContext = uni.createInnerAudioContext();
+					find.audioContext.src = this.url_config + 'image/' + find.fileUrl;
+				}
+				if (find.is_play) {
+					find.audioContext.pause();
+					find.is_play = false;
+				} else {
+					find.audioContext.play();
+					find.is_play = true;
+				}
+			},
+			onDeleteClick(index) {
+				let that = this;
+				uni.showModal({
+					title: '提示',
+					content: '确定删除该数据吗?',
+					success: (res) => {
+						if (res.confirm) {
+							let data = {
+								projectSn: this.projectDetail.projectSn,
+								id: this.policeCameraItemFileList[index].id,
+							};
+
+							this.sendRequest({
+								url: 'xmgl/policeCameraItemFile/delete',
+								method: 'POST',
+								data: data,
+								success: res => {
+									if (res.code == 200) {
+										that.showToast('删除成功！', 'success');
+										this.policeCameraItemFileList.splice(index, 1);
+									}
+								}
+							})
+						}
+					}
+				});
+			},
+			onScrollTolower() {
+				if (this.policeCameraItemFileList.length >= this.pageInfo.total) return this.pageInfo.status =
+					'nomore';
+				this.pageInfo.status = 'loading';
+				this.pageInfo.pageNo = ++this.pageInfo.pageNo;
+				this.getPoliceCameraItemFilePageFn();
+			},
+			getPoliceCameraItemFilePageFn() {
+				let data = {
+					pageNo: this.pageInfo.pageNo,
+					pageSize: this.pageInfo.pageSize,
+					startTime_begin: this.$dayjs(this.pageInfo.startTime_begin).format("YYYY-MM-DD 00:00:00"),
+					endTime_end: this.$dayjs(this.pageInfo.endTime_end).format("YYYY-MM-DD 23:59:59"),
+					projectSn: this.projectDetail.projectSn,
+					workTicketNumber: this.pageInfo.workTicketNumber,
+					itemId: this.itemId,
+					fileType: this.pageInfo.fileType,
+				}
+				this.sendRequest({
+					url: 'xmgl/policeCameraItemFile/page',
+					method: 'get',
+					data: data,
+					success: res => {
+						uni.hideLoading()
+						if (res.code == 200) {
+							const resultList = res.result.records.map(item => {
+								return {
+									...item,
+									show: false,
+									is_play: false,
+								}
+							});
+							this.policeCameraItemFileList = this.policeCameraItemFileList.concat(
+								resultList);
+							this.pageInfo.total = res.result.total;
+							if (res.result.records.length < this.pageInfo
+								.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
+								this.pageInfo.status = 'nomore'
+							}
+						}
+					}
+				})
+			},
+			//预览图片
+			previewImage(url) {
+				uni.previewImage({
+					urls: [url]
+				})
+			},
+			// 通过id查询工作票信息
+			getPoliceCameraItemQueryByIdFn() {
+				let that = this;
+				let data = {
+					projectSn: this.projectDetail.projectSn,
+					itemId: this.itemId,
+				};
+				this.sendRequest({
+					url: 'xmgl/policeCameraItem/queryById',
+					method: 'GET',
+					data: data,
+					success: res => {
+						if (res.code == 200) {
+							that.policeCameraItemInfo = {
+								...res.result,
+							};
+						}
+					}
+				})
+			},
+			showToast(title, type) {
+				this.$refs.uToast.show({
+					title: title,
+					type: type,
+				})
+			},
+			change(index) {
+				this.current = index;
+				if (index >= 1 && index < 4) {
+					const objActive = {
+						1: 3,
+						2: 1,
+						3: 2
+					}
+					this.pageInfo.fileType = objActive[index];
+					this.onRefresh();
+				} else if (index == 4) {
+					this.getOcrBuildLogCountOcrBuildLogForMonth();
+				}
+			},
+		},
+		computed: {
+			durationHour() {
+				return (seconds) => {
+					if(!seconds) return 0;
+					return (seconds / 60 / 60).toFixed(2)
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.new-nodata {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+
+		>view {
+			width: 300rpx;
+			height: 300rpx;
+			background-image: url('@/static/staffAttendance/nodata.png');
+			background-repeat: no-repeat;
+			background-size: 100% 100%;
+		}
+
+		>text {
+			font-size: 22rpx;
+			color: #808080;
+			margin-top: 60rpx;
+		}
+	}
+
+	/deep/ .u-tab-bar {
+		height: 5rpx !important;
+	}
+
+	/deep/ .m3u8-player,
+	.player-m3u8 {
+		width: 100%;
+		height: 420rpx;
+	}
+
+	/deep/ .uicon-arrow-down {
+		// position: absolute;
+		// top: 50%;
+		// right: -4px;
+		margin-top: -5px;
+		border: 3px solid;
+		border-color: transparent transparent #dcdee0 #dcdee0;
+		-webkit-transform: rotate(-45deg);
+		transform: rotate(-45deg);
+		opacity: .8;
+		content: '';
+	}
+
+	/deep/ .u-dropdown__menu__item__arrow--rotate .uicon-arrow-down {
+		border-color: transparent transparent rgb(49, 144, 243) rgb(49, 144, 243);
+	}
+
+	/deep/ .uicon-arrow-down::before {
+		display: none;
+	}
+
+	/deep/ .u-cell-item-box {
+		margin: 20rpx 26rpx;
+		width: calc(100% - 26rpx - 26rpx);
+		border-radius: 6rpx;
+	}
+
+	.content {
+		position: relative;
+		height: calc(100vh);
+		// background-color: white;
+
+		// overflow: hidden;
+		// min-height: calc(100vh);
+		.content_main2 {
+			height: 100%;
+			background-color: white;
+
+			.main2_detail {
+				padding: 26rpx 46rpx;
+				font-weight: 500;
+				font-size: 28rpx;
+				color: #4D4D4D;
+			}
+		}
+
+		.content_main1 {
+			height: 100%;
+
+			.content_main1_box2 {
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				margin: 0 26rpx;
+
+				>view {
+					width: 340rpx;
+					margin-top: 26rpx;
+				}
+
+				.swipe-content_box2 {
+					width: calc(100%);
+					height: 100%;
+
+					.main1_box-item {
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						width: calc(100%);
+						padding: 10rpx 10rpx 12rpx;
+
+						.box-item_top {
+							font-weight: 500;
+							font-size: 22rpx;
+							color: #CCCCCC;
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+
+							>view {
+								max-width: 50%;
+								overflow: hidden;
+								white-space: nowrap;
+								text-overflow: ellipsis;
+							}
+						}
+
+						.box-item_bottom {
+							font-weight: 500;
+							font-size: 22rpx;
+							color: #808080;
+							margin-top: 10rpx;
+						}
+					}
+
+					.video-box {
+						width: 340rpx;
+						height: 172rpx;
+						border-radius: 16rpx 16rpx 0 0;
+						flex-shrink: 0;
+					}
+				}
+			}
+
+			.content_main1_box {
+				.swipe-content_box3 {
+					width: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 20rpx 26rpx;
+					height: 100%;
+
+					.content_box3-right {
+						position: relative;
+
+						audio {
+							opacity: 0;
+							position: absolute;
+							left: 0;
+							z-index: -1;
+							//   right: -67%;
+						}
+
+						.bodyworn_pause {
+							width: 53rpx;
+							height: 53rpx;
+							background-image: url('@/static/bodyWornCamera/bodyworn_pause.png');
+							background-repeat: no-repeat;
+							background-size: 100% 100%;
+						}
+
+						.bodyworn_play {
+							background-image: url('@/static/bodyWornCamera/bodyworn_play.png');
+						}
+					}
+
+					.content_box3-left {
+						display: flex;
+						justify-content: space-between;
+						flex-direction: column;
+
+						.box3-left_bottom {
+							margin-top: 26rpx;
+							display: flex;
+							font-size: 22rpx;
+							color: #808080;
+
+							>view:first-child {
+								margin-right: 60rpx;
+							}
+						}
+
+						.box3-left_top {
+							display: flex;
+
+							>view:nth-child(1) {
+								width: 38rpx;
+								height: 36rpx;
+								background-image: url('@/static/bodyWornCamera/bodyworn_audio.png');
+								background-repeat: no-repeat;
+								background-size: 100% 100%;
+							}
+
+							>view:nth-child(2) {
+								font-weight: 800;
+								font-size: 30rpx;
+								color: #171717;
+								margin-left: 22rpx;
+							}
+
+							>view:nth-child(3) {
+								padding: 4rpx 20rpx;
+								border: 2rpx solid #F7AF13;
+								font-size: 28rpx;
+								color: #F7AF13;
+								margin-left: 46rpx;
+							}
+						}
+					}
+				}
+
+				.swipe-content_box {
+					width: 100%;
+					display: flex;
+					align-items: center;
+					padding: 20rpx;
+					height: 100%;
+
+					.main1_box-item {
+						margin-left: 20rpx;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						width: calc(100% - 240rpx - 22rpx);
+						height: 100%;
+
+						.box-item_top {
+							font-weight: 500;
+							font-size: 22rpx;
+							color: #808080;
+						}
+
+						.box-item_bottom {
+							font-weight: 500;
+							font-size: 22rpx;
+							color: #CCCCCC;
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+
+							>view {
+								max-width: 50%;
+								overflow: hidden;
+								white-space: nowrap;
+								text-overflow: ellipsis;
+							}
+						}
+					}
+
+					.video-box {
+						width: 240rpx;
+						height: 160rpx;
+						border-radius: 16rpx;
+						flex-shrink: 0;
+					}
+				}
+
+				>view {
+					margin: 26rpx;
+				}
+			}
+
+			/deep/ .u-swipe-action {
+				border-radius: 16rpx;
+			}
+
+			/deep/ .u-swipe-del {
+				border-radius: 0rpx 16rpx 16rpx 0rpx;
+			}
+
+			/deep/ .u-swipe-content {
+				width: calc(100% - 112rpx);
+			}
+
+		}
+
+		.content_main {
+			// padding-top: 20rpx;
+			height: calc(100% - 100rpx);
+			padding-bottom: 100rpx;
+			background-color: white;
+
+			.main-box {
+				padding: 26rpx;
+
+				.box-content_detail {
+					font-size: 28rpx;
+					color: #4D4D4D;
+					margin-top: 4rpx;
+				}
+
+				.webkit-clamp_2 {
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 2;
+					/* 限制为两行 */
+					overflow: hidden;
+				}
+
+				.box-content {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin-top: 26rpx;
+					font-size: 28rpx;
+
+					>view:last-child {
+						font-size: 24rpx;
+						color: #4D8EEC;
+					}
+
+					>view:first-child {
+						font-size: 28rpx;
+						color: #808080;
+					}
+				}
+
+				.box-img {
+					display: flex;
+					flex-direction: column;
+					margin-top: 26rpx;
+					font-size: 28rpx;
+
+					>view:first-child {
+						width: 192rpx;
+						margin-right: 26rpx;
+						color: #808080;
+					}
+
+					.imgBox_wrap_list {
+						flex-direction: column;
+						align-items: flex-start !important;
+
+						.imgBox_list {
+							width: 100%;
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							padding: 14rpx 26rpx 14rpx 40rpx;
+
+							>view:first-child {
+								display: flex;
+								align-items: center;
+
+								.u-icon {
+									font-size: 40rpx;
+									color: #B3B3B3;
+								}
+
+								>view:last-child {
+									margin-left: 14rpx;
+									width: 320rpx;
+									font-size: 24rpx;
+									color: #808080;
+									overflow: hidden;
+									white-space: nowrap;
+									text-overflow: ellipsis;
+								}
+							}
+
+							>view:last-child {
+								font-weight: 500;
+								font-size: 24rpx;
+								color: #4D8EEC;
+							}
+						}
+
+						.imgBox_list:nth-child(even) {
+							background-color: #FBFBFB;
+						}
+
+						.imgBox_list:nth-child(odd) {
+							background-color: #FFFFFF;
+						}
+					}
+
+					.imgBox_wrap {
+						display: flex;
+						flex-wrap: wrap;
+						margin-left: calc(192rpx + 28rpx);
+						flex: 1;
+
+						>view:not(:last-child) {
+							margin-right: 26rpx;
+						}
+
+						>view {
+							margin-bottom: 20rpx;
+						}
+
+						.imgBox {
+							width: 164rpx;
+							height: 164rpx;
+							display: inline-flex;
+							position: relative;
+							border-radius: 8rpx;
+
+							.img {
+								width: 100%;
+								height: 100%;
+								border-radius: 8rpx;
+							}
+
+						}
+					}
+				}
+
+
+				.box-item {
+					display: flex;
+					align-items: center;
+					margin-top: 26rpx;
+					font-size: 28rpx;
+
+					>view:first-child {
+						width: 192rpx;
+						margin-right: 26rpx;
+						color: #808080;
+					}
+
+					>view:last-child {
+						flex: 1;
+						color: #4D4D4D;
+						display: -webkit-box;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 1;
+						/* 限制为两行 */
+						overflow: hidden;
+					}
+
+					.state-box {
+						padding: 8rpx 16rpx;
+						min-width: 120rpx;
+						color: white !important;
+						background-color: #88cf65;
+						border-radius: 8rpx;
+						text-align: center;
+						flex: initial !important;
+					}
+
+					.state-box_offline {
+						background-color: #f7f7f7;
+						color: #272d45 !important;
+					}
+				}
+
+				.box-item1>view:last-child {
+					font-weight: 800;
+					font-size: 30rpx;
+					color: #171717;
+				}
+
+				/deep/ .u-input {
+					width: 550rpx;
+					height: 68rpx;
+					line-height: 68rpx;
+					border-radius: 8rpx 8rpx 8rpx 8rpx;
+					border: 2rpx solid #D8DBE8;
+				}
+
+				.changetime {
+					width: 550rpx;
+					height: 68rpx;
+					border-radius: 8rpx 8rpx 8rpx 8rpx;
+					border: 2rpx solid #D8DBE8;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 0 34rpx;
+					font-size: 28rpx;
+					color: #4D4D4D;
+
+					.changetime_icon {
+						width: 36rpx;
+						height: 36rpx;
+						background-image: url('@/static/workTicketManage/index-icon7.png');
+						background-repeat: no-repeat;
+						background-size: 100% 100%;
+					}
+				}
+
+				.textarea {
+					position: relative;
+
+					/deep/ .u-input {
+						height: 160rpx;
+						line-height: 68rpx;
+					}
+
+					.textarea_text {
+						position: absolute;
+						right: 20rpx;
+						bottom: 20rpx;
+						font-size: 22rpx;
+						color: #B3B3B3;
+					}
+				}
+			}
+
+			.header-title {
+				padding: 12rpx 16rpx;
+				border-bottom: 2rpx solid #EFF3F7;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				>view:first-child {
+					font-weight: 500;
+					font-size: 30rpx;
+					color: #1A1A1A;
+				}
+
+				.header-title_right {
+					display: flex;
+					align-items: center;
+
+					>view:last-child {
+						margin-left: 20rpx;
+					}
+
+					>view {
+						padding: 4rpx 20rpx;
+						border-radius: 4rpx;
+						border: 2rpx solid #F1F1F1;
+						font-weight: 500;
+						font-size: 22rpx;
+					}
+				}
+
+				.ybfx_active {
+					background-color: #88CF65;
+					color: #FFFFFF;
+				}
+
+				.gfx_active {
+					background-color: #FF0000;
+					color: #FFFFFF;
+				}
+
+				.wks_active {
+					background-color: #898989;
+					color: #1A1A1A;
+				}
+
+				.sgz_active {
+					background-color: #BED0FA;
+					color: #5181F6;
+				}
+
+				.ztz_active {
+					background-color: #C38100;
+					color: #FFFFFF;
+				}
+
+				.ywg_acitve {
+					background-color: #88CF65;
+					color: #1A1A1A;
+				}
+			}
+		}
+
+
+		.content_main_active {
+			height: calc(100vh - 88rpx - 500rpx - 80rpx - 100rpx - 26rpx) !important;
+		}
+
+		.content_header {
+
+			// background-color: white;
+			video {
+				width: 100%;
+				height: 420rpx;
+			}
+		}
+	}
+
+	.addIssue {
+		min-height: 100vh;
+		background-color: #F2F3F7;
+	}
+
+	.fixedheader {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		z-index: 999;
+		background-color: white;
+
+		/deep/ .headerBox {
+			border-bottom: none;
+		}
+
+		.headerName {
+			z-index: 1;
+		}
+
+		.uni-form-item {
+			padding: 26rpx;
+			position: relative;
+			background-color: white;
+			display: flex;
+
+			.uni-input {
+				border: 2rpx solid #E4E4E4;
+				border-radius: 68rpx;
+				padding: 0;
+				font-size: 30rpx;
+				color: #444444;
+				width: 548rpx;
+
+				/deep/ .u-content {
+					background-color: #F2F3F8 !important;
+
+					.u-input {
+						background-color: #F2F3F8 !important;
+						color: #444444 !important;
+						font-size: 30rpx;
+					}
+				}
+			}
+		}
+
+		.calendar_box {
+			width: 130rpx;
+			height: 66rpx;
+			background: #F2F3F8;
+			border-radius: 68rpx;
+			margin-left: 20rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.calendar {
+				width: 40rpx;
+				height: 40rpx;
+				background-image: url('@/static/workTicketManage/calendar.png');
+				background-repeat: no-repeat;
+				background-size: 100% 100%;
+			}
+
+			.calendar_active {
+				background-image: url('@/static/workTicketManage/calendar-active.png');
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/projectEnd/bodyWornCamera/components/calendarView.vue b/pages/projectEnd/bodyWornCamera/components/calendarView.vue
new file mode 100644
index 00000000..cb826bb8
--- /dev/null
+++ b/pages/projectEnd/bodyWornCamera/components/calendarView.vue
@@ -0,0 +1,463 @@
+<template>
+	<view class="calendar">
+		<view class="box-main2-time">
+			<view @click="alarmByCodeClick(item)" :class="{'time-active': item.id == timeActive}"
+				v-for="item in timeList" :key="item.id">
+				{{item.title}}
+			</view>
+		</view>
+		<view class="calendar-main">
+			<view class="calendar-header">
+				<view @click="defaultMonthFn" class="calendar-header_left">今天</view>
+				<!-- <u-icon @click="prevYear" name="arrow-left-double" color="#A2A4AF" size="40"></u-icon>
+				<u-icon @click="prevMonth" name="arrow-left" color="#A2A4AF" size="40"></u-icon> -->
+				<text>{{ currentYear }}.{{ currentMonth + 1 }}</text>
+				<!-- <u-icon @click="nextMonth" name="arrow-right" color="#A2A4AF" size="40"></u-icon>
+				<u-icon @click="nextYear" name="arrow-right-double" color="#A2A4AF" size="40"></u-icon> -->
+			</view>
+			<view class="calendar-header1">
+				<view class="">
+					正常记录
+				</view>
+				<view class="">
+					无记录
+				</view>
+			</view>
+			<view class="calendar-weekdays">
+				<text v-for="day in weekdays" :key="day">{{ day }}</text>
+			</view>
+			<picker mode="date" :value="currentDate" fields="month" @change="bindDateChange">
+				<view class="month-select">
+					{{ convertToChinese(currentMonth + 1) }}月
+				</view>
+			</picker>
+
+			<view class="calendar-days">
+				<view v-for="day in daysInMonth" :key="day.date" class="calendar-day" @click="examineCalendarView(day)"
+					:class="day.duration ? 'calendar-day2' : 'calendar-day1'">
+					<view class="calendar-day_header" :class="{
+					  'other-month': day.isOtherMonth,
+					  'current-day': $dayjs(day.date).format('YYYY-MM-DD') == defaultDay,
+					}">
+						{{ day.day }}
+					</view>
+					<view class="calendar-text"
+						:class="{'calendar-text_color': day.duration, 'calendar-text_color1': day.isBeforeDay || day.isCurrentDay}">
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import dayjs from "dayjs";
+
+	export default {
+		name: "CalendarView",
+		props: {
+			defaultMonth: {
+				type: String,
+				default: () => dayjs().format("YYYY-MM")
+			},
+			ocrBuildLogAllList: {
+				type: Array,
+				default: () => []
+			},
+		},
+		data() {
+			return {
+				currentDate: this.defaultMonth,
+				weekdays: ["日", "一", "二", "三", "四", "五", "六"],
+				dataList: [],
+				defaultType: 1,
+				defaultDay: dayjs().format("YYYY-MM-DD"),
+				timeActive: 2,
+				timeList: [{
+					id: 1,
+					title: "上月"
+				}, {
+					id: 2,
+					title: "本月"
+				}, {
+					id: 3,
+					title: "下月"
+				}],
+			};
+		},
+		computed: {
+			convertToChinese() {
+				const digitMap = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
+				return (num) => {
+					const numList = num.toString().split('');
+					return numList.map((digit, index) => {
+							if(digit == 0) return;
+							if(numList.length > 1 && index == 0) {
+								return "十"
+							}
+							return digitMap[parseInt(digit)]
+						})
+						.join('');
+				}
+			},
+			dateTimeUp() {
+				return (dateTime) => {
+					return !dayjs(dateTime).isBefore(dayjs());
+				};
+			},
+			currentYear() {
+				return dayjs(this.currentDate).year();
+			},
+			currentMonth() {
+				return dayjs(this.currentDate).month();
+			},
+			daysInMonth() {
+				console.log(22222222222, this.currentDate);
+				const currentDayjs = dayjs(this.currentDate);
+				const startOfMonth = currentDayjs.startOf("month");
+				const endOfMonth = currentDayjs.endOf("month");
+				const startDay = startOfMonth.day();
+				const endDay = endOfMonth.day();
+
+				// 计算上个月需要显示的天数
+				const prevMonthDays = [];
+				for (let i = startDay - 1; i >= 0; i--) {
+					const date = startOfMonth.subtract(startDay - i, "day");
+					// console.log(date.date(),date.format('YYYY-MM-DD'));
+					prevMonthDays.unshift({
+						day: date.date(),
+						date: date.format("YYYY-MM-DD"),
+						isOtherMonth: true,
+						isCurrentDay: false,
+						isBeforeDay: false,
+					});
+				}
+
+				// 计算当前月的天数
+				const currentMonthDays = [];
+				for (let i = 0; i < endOfMonth.date(); i++) {
+					const date = startOfMonth.add(i, "day");
+					currentMonthDays.push({
+						day: date.date(),
+						date: date.format("YYYY-MM-DD"),
+						isOtherMonth: false,
+						isCurrentDay: date.isSame(dayjs(), "day"),
+						isBeforeDay: date.isBefore(dayjs(), "day"),
+					});
+				}
+
+				// 计算下个月需要显示的天数
+				const nextMonthDays = [];
+				for (let i = 1; i <= 6 - endDay; i++) {
+					const date = endOfMonth.add(i, "day");
+					nextMonthDays.push({
+						day: date.date(),
+						date: date.format("YYYY-MM-DD"),
+						isOtherMonth: true,
+						isCurrentDay: false,
+						isBeforeDay: false,
+					});
+				}
+				const resultList = [
+					...prevMonthDays,
+					...currentMonthDays,
+					...nextMonthDays,
+				];
+				return resultList.map((item) => {
+					const find = this.dataList.find((ele) => dayjs(ele.date).format("YYYY-MM-DD") == item.date);
+					if (find) {
+						return {
+							...item,
+							...find,
+						};
+					}
+					return {
+						...item,
+					};
+				});
+			},
+		},
+		methods: {
+			bindDateChange(e) {
+				this.currentDate = dayjs(e.detail.value).format("YYYY-MM-DD");
+			},
+			defaultMonthFn() {
+				this.currentDate = this.defaultMonth;
+				this.defaultDay = dayjs().format("YYYY-MM-DD");
+			},
+			alarmByCodeClick(row) {
+				this.timeActive = row.id;
+				if (this.timeActive == 1) {
+					this.prevMonth();
+				} else if (this.timeActive == 2) {
+					this.currentDate = this.defaultMonth;
+				} else {
+					this.nextMonth();
+				}
+			},
+			prevMonth() {
+				this.currentDate = this.$dayjs(this.currentDate)
+					.subtract(1, "month")
+					.format("YYYY-MM-DD");
+			},
+			nextMonth() {
+				this.currentDate = this.$dayjs(this.currentDate)
+					.add(1, "month")
+					.format("YYYY-MM-DD");
+			},
+			prevYear() {
+				this.currentDate = this.$dayjs(this.currentDate)
+					.subtract(1, "year")
+					.format("YYYY-MM-DD");
+			},
+			nextYear() {
+				this.currentDate = this.$dayjs(this.currentDate)
+					.add(1, "year")
+					.format("YYYY-MM-DD");
+			},
+			currentDay() {
+				this.currentDate = dayjs(this.defaultMonth).format("YYYY-MM");
+			},
+			examineCalendarView(row) {
+				if (this.dateTimeUp(row.date)) return
+				this.defaultDay = this.$dayjs(row.date).format('YYYY-MM-DD');
+				this.$emit("examineCalendarView", row);
+			},
+		},
+		watch: {
+			defaultMonth: {
+				// immediate: true,
+				handler(newVal) {
+					console.log(1111111, newVal);
+					this.currentDay();
+				},
+			},
+			ocrBuildLogAllList: {
+				handler(newVal) {
+					this.dataList = newVal;
+				},
+				deep: true,
+				immediate: true,
+			},
+			daysInMonth: {
+				handler(newVal) {
+					const find = this.daysInMonth.find(item => this.$dayjs(item.date).format('YYYY-MM-DD') == this
+						.defaultDay);
+					if (find) {
+						this.$emit("examineCalendarView", find);
+					}
+				},
+				deep: true,
+				// immediate: true,
+			}
+		},
+	};
+</script>
+
+<style lang="less" scoped>
+	.month-select {
+		font-weight: 500;
+		font-size: 32rpx;
+		color: #A3A3A3;
+		position: relative;
+		width: max-content;
+		margin-bottom: 16rpx;
+	}
+
+	.month-select::after {
+		content: "";
+		width: 0;
+		height: 0;
+		border-right: 16rpx solid #A3A3A3;
+		border-top: 12rpx solid transparent;
+		border-bottom: 12rpx solid transparent;
+		position: absolute;
+		right: -26rpx;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	.calendar-header1 {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 26rpx;
+		color: #707070;
+		margin-top: 26rpx;
+
+		>view {
+			position: relative;
+		}
+
+		>view:last-child {
+			margin-left: 50rpx;
+		}
+
+		>view::after {
+			content: "";
+			width: 11rpx;
+			height: 11rpx;
+			border-radius: 50%;
+			position: absolute;
+			left: -26rpx;
+			top: 50%;
+			transform: translateY(-50%);
+		}
+
+		>view:first-child::after {
+			background-color: #667ED6;
+		}
+
+		>view:last-child::after {
+			background-color: #FFAB03;
+		}
+	}
+
+	.calendar-main {
+		margin-top: 26rpx;
+		padding: 26rpx;
+		border-radius: 8rpx 8rpx 8rpx;
+		border: 3rpx solid #D9D9D9;
+	}
+
+	.box-main2-time {
+		display: flex;
+		padding-top: 26rpx;
+
+		>view {
+			width: 144rpx;
+			height: 60rpx;
+			background-color: #EFF3F7;
+			border-radius: 50rpx;
+			font-weight: 500;
+			font-size: 26rpx;
+			color: #1A1A1A;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-right: 26rpx;
+		}
+
+		.time-active {
+			background-image: url('@/static/bridgeCraneMonitor/index-bg2.png');
+			background-repeat: no-repeat;
+			background-size: 100% 100%;
+		}
+	}
+
+	.calendar {
+		width: 100%;
+		background-color: #FFFFFF;
+		padding: 0 28rpx;
+	}
+
+	.calendar-header {
+		display: flex;
+		// justify-content: space-between;
+		justify-content: center;
+		align-items: center;
+		padding-top: 40rpx;
+		position: relative;
+
+		.calendar-header_left {
+			position: absolute;
+			left: 0;
+			font-size: 28rpx;
+			color: #667ED6;
+		}
+
+		>text {
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #242424;
+			background-color: #EAEAEA;
+			border-radius: 25rpx;
+			padding: 4rpx 20rpx;
+			display: inline-block;
+		}
+	}
+
+	.calendar-weekdays {
+		display: flex;
+		justify-content: space-around;
+		//   margin-bottom: 10px;
+
+		>text {
+			flex: 1;
+			height: 110rpx;
+			font-size: 28rpx;
+			color: #4D4D4D;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+
+	.calendar-days {
+		display: grid;
+		grid-template-columns: repeat(7, 1fr);
+		gap: 0px;
+		height: 580rpx;
+		grid-auto-rows: auto;
+	}
+
+	.calendar-day {
+		cursor: pointer;
+		position: relative;
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		align-items: center;
+
+		.calendar-day_header {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			width: 60rpx;
+			height: 60rpx;
+			border-radius: 50%;
+			// border: 2rpx solid #B90303;
+			font-size: 28rpx;
+			color: #191919;
+		}
+
+		.calendar-text {
+			font-size: 20rpx;
+			width: 11rpx;
+			height: 11rpx;
+			border-radius: 50%;
+			margin-top: 10rpx;
+		}
+
+		.calendar-text_color1 {
+			background-color: #FFAA00;
+		}
+
+		.calendar-text_color {
+			background-color: #667ED6;
+		}
+
+		.day-active {
+			// border: 2rpx solid #3D99FF;
+			color: #4D4D4D;
+		}
+
+		.other-month {
+			color: #A3A3A3;
+			// display: none;
+		}
+
+		.current-day {
+			border-color: transparent;
+			background-color: #667ED6;
+			color: white;
+		}
+
+		.day-forbidden {
+			border-color: transparent;
+			background: #F8F8F8;
+			color: #4D4D4D;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/projectEnd/bodyWornCamera/index.vue b/pages/projectEnd/bodyWornCamera/index.vue
new file mode 100644
index 00000000..d9530227
--- /dev/null
+++ b/pages/projectEnd/bodyWornCamera/index.vue
@@ -0,0 +1,158 @@
+<template>
+	<view class="areaTreePage">
+		<scroll-view scroll-y="true" class="pageContent">
+			<headers :showBack="true">
+				<view class="headerName">
+					执法记录仪
+				</view>
+			</headers>
+			<view class="areaTreeBox">
+				<view class="uni-form-item">
+					<input class="uni-input" name="projectName" v-model="projectName" @input="searchFile"
+						placeholder="请输入设备名称" />
+					<button class="mini-btn" type="primary" size="mini" @click="loadData">搜索</button>
+				</view>
+				<template v-if="mapData.length > 0">
+					<tree-menu :pageType="pageType" :iconShow="true" v-for="(item,index) in mapData"
+						:key="item.companyId" :item="item" :expandedIndex="index" :treeIndex="treeIndex"
+						@clickItem="clickTreeItem"></tree-menu>
+				</template>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import TreeMenu from '@/components/tree-node/cameraIndex.vue'
+	export default {
+		components: {
+			TreeMenu
+		},
+		data() {
+			return {
+				projectName: '',
+				searchsn: '',
+				userInfo: null,
+				mapData: [],
+				headerName: '华润电力',
+				treeIndex: 1, // 树形层级index
+				projectDetail: {},
+			};
+		},
+		onLoad(options) {
+			console.log(options.type)
+			// uni.setStorageSync('pageType',this.pageType)
+		},
+		mounted() {
+			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
+			this.loadData();
+		},
+		methods: {
+			clickTreeItem(item) {
+				uni.navigateTo({
+					url: './bodyWornCameraDetail?id=' + item.id
+				})
+			},
+			searchFile(e) {
+				this.projectName = e.detail.value
+			},
+			//获取所有企业下区域数据
+			loadData(type) {
+				//type：true代表第一调用
+				var that = this
+				this.sendRequest({
+					url: "xmgl/policeCameraItem/getGroupTreeWithDev",
+					data: {
+						projectSn: this.projectDetail.projectSn,
+						devName: that.projectName,
+					},
+					method: "POST",
+					success(res) {
+						if (res.code == 200) {
+							that.mapData = res.result;
+							console.log(88488, that.mapData)
+						}
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.statusBox {
+		display: inline-flex;
+		align-items: center;
+
+		.icon-status {
+			margin-left: 16rpx;
+		}
+	}
+
+	.areaTreePage {
+		background-color: white;
+		height: 100%;
+		color: $uni-text-color;
+	}
+
+	// .areaTreeBox{
+	// 	padding: 0 20rpx;
+	// }
+	.areaInner {
+		border-bottom: 1px solid rgba(221, 221, 221, 0.67);
+	}
+
+	.areaTitle {
+		font-size: 30rpx;
+		border-bottom: 1px solid rgba(221, 221, 221, 0.67);
+		padding: 20rpx 30rpx;
+	}
+
+	.arrow {
+		float: right;
+		opacity: 0.7;
+	}
+
+	.areaTitle2 {
+		font-size: 14px;
+		padding: 20rpx 30rpx 20rpx 30px;
+	}
+
+	.projectTitle {
+		font-size: 14px;
+		padding: 20rpx 30rpx 20rpx 30px;
+	}
+
+	.projectTitle2 {
+		padding-left: 100rpx;
+	}
+
+	.projectBox {
+		background-color: rgba(221, 221, 221, 0.26);
+	}
+
+	.uni-input {
+		border-radius: 30rpx;
+		margin: 20rpx 20rpx;
+		background-color: #f2f2f2;
+		height: 60rpx;
+		line-height: 60rpx;
+		padding: 0 40rpx;
+		font-size: 28rpx;
+		width: 65%;
+	}
+
+	.uni-form-item {
+		position: relative;
+	}
+
+	.mini-btn {
+		position: absolute;
+		right: 30rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		border-radius: 30rpx;
+		height: 60rpx;
+		line-height: 60rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/projectEnd/bodyWornCamera/playBackVideo.vue b/pages/projectEnd/bodyWornCamera/playBackVideo.vue
new file mode 100644
index 00000000..86bb972b
--- /dev/null
+++ b/pages/projectEnd/bodyWornCamera/playBackVideo.vue
@@ -0,0 +1,73 @@
+<template>
+	<view class="fullHeight">
+		<headers :showBack="true" :themeType="'#3A7BFF'">
+			<view class="headerName">
+				视频回放
+			</view>
+		</headers>
+		<!-- <video class="videoBox" id="myVideo" :custom-cache="false" :src="url" controls autoplay></video> -->
+		<!-- 外网IP地址访问视频监控 -->
+		<!-- <video class="videoBox" id="myVideo" :custom-cache="false" :src="'rtsp://42.180.188.17:'+url.substring(20)" controls autoplay></video> -->
+		<video class="videoBox" id="myVideo" :custom-cache="false" :src="url_config + 'image/' + passData.url" controls autoplay></video>
+		<view class="videoName">
+			<view>{{passData.workTicketNumber}}</view>
+			<view class="video-time">{{passData.beginTime}}<view>至</view>{{passData.endTime}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				url:'',//rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream
+				streamType: 1, //1是子码流    2是主码流
+				passData: {}
+			};
+		},
+		onLoad(options) {
+			//videoType    1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
+			// this.url = options.url
+			if(options.params){
+				this.passData = JSON.parse(options.params)
+			}
+		},
+		methods:{
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.fullHeight{
+	background-color: #FFFFFF;
+}
+.videoBox{
+	width: 100%;
+	height: 420rpx;
+}
+.videoName{
+	margin: 10px 15px;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	font-size: 32rpx;
+	font-family: PingFang SC, PingFang SC;
+	font-weight: 600;
+	> view:nth-child(1){
+		font-size: 30rpx;
+		color: #1A1A1A;
+	}
+	.video-time {
+		display: flex;
+		align-items: center;
+		font-weight: 500;
+		font-size: 22rpx;
+		color: #808080;
+		margin-top: 26rpx;
+		> view {
+			margin: 0 26rpx;
+		}
+	}
+}
+</style>
diff --git a/pages/projectEnd/projectIndex/projectIndex.vue b/pages/projectEnd/projectIndex/projectIndex.vue
index e9bdd456..5e8e8dae 100644
--- a/pages/projectEnd/projectIndex/projectIndex.vue
+++ b/pages/projectEnd/projectIndex/projectIndex.vue
@@ -285,7 +285,7 @@
 			if (!this.userInfo.personMail && options.fromPage && options.fromPage == 'loginPage') {
 				this.checkInfoComplete()
 			}
-			if(options.sn) {
+			if (options.sn) {
 				this.getDetailInfo(options.sn)
 			}
 			// #ifdef APP-PLUS
@@ -305,7 +305,7 @@
 					data: data,
 					success: res => {
 						console.log("enterpriseInfo", res.result.layoutImage);
-						if(res.result.layoutImage) {
+						if (res.result.layoutImage) {
 							that.loginBackgroundImage = res.result.layoutImage;
 						}
 					}
@@ -767,6 +767,11 @@
 							url: '../betonManage/index'
 						})
 						break
+					case 'bodyWornCamera':
+						uni.navigateTo({
+							url: '../bodyWornCamera/index'
+						})
+						break
 					case 'bridgeCraneMonitor':
 						uni.navigateTo({
 							url: '../bridgeCraneMonitor/index'
diff --git a/pages/videoManage/component/nativeRtspPlayer.vue b/pages/videoManage/component/nativeRtspPlayer.vue
new file mode 100644
index 00000000..3756ce0d
--- /dev/null
+++ b/pages/videoManage/component/nativeRtspPlayer.vue
@@ -0,0 +1,1429 @@
+<template>
+  <view class="native-rtsp-player" :style="containerStyle">
+    <!-- 视频信息标题（可选） -->
+    <view v-if="showHeader" class="header">
+      <view class="back-button" v-if="showBackButton" @click="$emit('back')">
+        <u-icon name="arrow-left" color="#FFFFFF" size="32"></u-icon>
+      </view>
+      <view class="title">{{ videoTitle }}</view>
+    </view>
+    
+    <!-- 视频播放区域 -->
+    <view class="video-container" :style="{ height: videoHeight }">
+      <!-- #ifdef APP-PLUS -->
+      <video 
+        :id="videoId" 
+        class="video-player" 
+        :src="playUrl" 
+        :autoplay="autoplay" 
+        :controls="showNativeControls"
+        :muted="isMuted"
+        :show-center-play-btn="showCenterPlayBtn"
+        :show-fullscreen-btn="showFullscreenBtn"
+        @error="onVideoError"
+        @timeupdate="onTimeUpdate"
+        @loadedmetadata="onLoadedMetadata"
+        @ended="onVideoEnded"
+        @play="onPlay"
+        @pause="onPause"
+      ></video>
+      <!-- #endif -->
+      
+      <!-- #ifndef APP-PLUS -->
+      <view class="h5-notice">
+        <u-icon name="warning-circle" color="#FF6B6B" size="60"></u-icon>
+        <text class="notice-text">H5环境不支持原生RTSP播放</text>
+        <text class="notice-subtext">请在APP环境中使用</text>
+      </view>
+      <!-- #endif -->
+    </view>
+    
+    <!-- 自定义控制按钮区域（可选） -->
+    <view v-if="showCustomControls" class="controls-container">
+      <view class="control-buttons">
+        <view class="control-btn" @click="togglePlayPause">
+          <u-icon :name="isPlaying ? 'pause' : 'play'" color="#498CEC" size="48"></u-icon>
+          <text class="btn-text">{{ isPlaying ? '暂停' : '播放' }}</text>
+        </view>
+        
+        <view class="control-btn" @click="toggleMute">
+          <u-icon :name="isMuted ? 'volume-mute' : 'volume-medium'" color="#498CEC" size="48"></u-icon>
+          <text class="btn-text">{{ isMuted ? '静音' : '有声' }}</text>
+        </view>
+        
+        <view class="control-btn" @click="toggleFullscreen">
+          <u-icon name="expand" color="#498CEC" size="48"></u-icon>
+          <text class="btn-text">全屏</text>
+        </view>
+      </view>
+      
+      <!-- 播放进度 -->
+      <view class="progress-container" v-if="duration > 0">
+        <text class="time-text">{{ formatTime(currentTime) }}</text>
+        <slider 
+          v-model="progressValue" 
+          class="slider" 
+          activeColor="#498CEC" 
+          backgroundColor="#E0E0E0" 
+          blockColor="#498CEC" 
+          block-size="20"
+          @change="onProgressChange"
+        />
+        <text class="time-text">{{ formatTime(duration) }}</text>
+      </view>
+    </view>
+    
+    <!-- 加载提示 -->
+    <u-loading-page v-if="isLoading && showLoading" :loading-text="loadingText"></u-loading-page>
+    
+    <!-- 错误提示 -->
+    <u-modal v-if="showErrorModal" v-model="showError" title="播放错误" :content="errorMessage" :show-cancel-button="false" confirm-text="确定"></u-modal>
+  </view>
+</template>
+
+<script>
+import { isString } from '@/utils/tool';
+import uView from '@/uview-ui';
+
+export default {
+  name: 'NativeRtspPlayer',
+  components: {
+    ...uView
+  },
+  props: {
+    // RTSP流地址（必填）
+    rtspUrl: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    // 视频信息对象
+    videoInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    // 视频标题
+    title: {
+      type: String,
+      default: ''
+    },
+    // 视频容器高度
+    height: {
+      type: [String, Number],
+      default: '500rpx'
+    },
+    // 是否自动播放
+    autoplay: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示原生控件
+    showNativeControls: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示自定义控件
+    showCustomControls: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示加载提示
+    showLoading: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示错误弹窗
+    showErrorModal: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示头部
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示返回按钮
+    showBackButton: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示中心播放按钮
+    showCenterPlayBtn: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示全屏按钮
+    showFullscreenBtn: {
+      type: Boolean,
+      default: true
+    },
+    // 最大重试次数
+    maxRetryCount: {
+      type: Number,
+      default: 3
+    },
+    // 重试延迟时间（毫秒）
+    retryDelay: {
+      type: Number,
+      default: 2000
+    },
+    // 容器样式
+    containerStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+      return {
+        // 处理后的播放地址
+        playUrl: '',
+        videoHeight: this.height,
+        
+        // 播放状态
+        isPlaying: this.autoplay,
+        isMuted: false,
+        currentTime: 0,
+        duration: 0,
+        progressValue: 0,
+        isFullscreen: false,
+        
+        // 加载和错误状态
+        isLoading: this.autoplay,
+        loadingText: '正在加载视频...',
+        showError: false,
+        errorMessage: '',
+        
+        // 重试相关
+        retryCount: 0,
+        
+        // 平台信息
+        platform: '',
+        isIOS: false,
+        isAndroid: false,
+        
+        // 定时器
+        retryTimer: null,
+        
+        // 视频ID（用于创建唯一的视频上下文）
+        videoId: `rtsp-video-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        
+        // 音频上下文
+        audioContext: null,
+        useSeparateAudio: false, // 是否使用独立音频播放
+        
+        // 音频轨道检测
+        hasAudioTrack: false, // RTSP流是否包含音频轨道
+        isAudioDetected: false // 是否已完成音频轨道检测
+      };
+    },
+  computed: {
+    // 计算视频标题
+    videoTitle() {
+      if (this.title) return this.title;
+      if (this.videoInfo && this.videoInfo.videoName) return this.videoInfo.videoName;
+      return 'RTSP视频播放';
+    }
+  },
+  
+  watch: {
+    // 监听RTSP地址变化
+    rtspUrl: {
+      handler(newVal) {
+        if (newVal) {
+          this.initPlayer();
+        }
+      },
+      immediate: true
+    },
+    
+    // 监听高度变化
+    height(newVal) {
+      this.videoHeight = newVal;
+    }
+  },
+  
+  mounted() {
+    // 初始化平台信息
+    this.initPlatformInfo();
+    
+    // 延迟初始化播放器，确保DOM已渲染
+    this.$nextTick(() => {
+      if (this.rtspUrl && this.autoplay) {
+        this.initPlayer();
+      }
+    });
+  },
+  
+  beforeUnmount() {
+    // 清理资源
+    this.cleanupResources();
+  },
+  
+  methods: {
+	/**
+     * 停用音频会话（暂停时使用）
+     */
+    deactivateAudioSession() {
+      try {
+        if (!this.isIOS || typeof window === 'undefined' || typeof window.plus === 'undefined' || typeof window.plus.ios === 'undefined') {
+          return;
+        }
+        
+        const AVAudioSession = window.plus.ios.import('AVAudioSession');
+        if (AVAudioSession && typeof AVAudioSession.sharedInstance === 'function') {
+          const session = AVAudioSession.sharedInstance();
+          if (session && typeof session.setActive === 'function') {
+            try {
+              session.setActive(false);
+              console.log('音频会话已停用');
+            } catch (e) {
+              console.warn('停用音频会话失败:', e);
+            }
+          }
+          
+          // 释放资源
+          if (typeof window.plus.ios.deleteObject === 'function') {
+            window.plus.ios.deleteObject(session);
+          }
+        }
+      } catch (error) {
+        console.warn('停用音频会话时发生错误:', error);
+      }
+    },
+    /**
+     * 初始化平台信息
+     */
+    initPlatformInfo() {
+      try {
+        const systemInfo = uni.getSystemInfoSync();
+        this.platform = systemInfo.platform;
+        this.isIOS = systemInfo.platform === 'ios';
+        this.isAndroid = systemInfo.platform === 'android';
+      } catch (error) {
+        console.error('获取系统信息失败:', error);
+      }
+    },
+    
+    /**
+     * 设置视频容器高度
+     */
+    setVideoHeight() {
+      try {
+        const systemInfo = uni.getSystemInfoSync();
+        const windowHeight = systemInfo.windowHeight;
+        // 视频高度设为屏幕高度的50%
+        this.videoHeight = `${windowHeight * 0.5}px`;
+      } catch (error) {
+        console.error('设置视频高度失败:', error);
+      }
+    },
+    
+    /**
+     * 初始化播放器
+     */
+    initPlayer() {
+      // #ifdef APP-PLUS
+      this.isLoading = true;
+      
+      // 根据平台处理RTSP地址
+      this.processRtspUrl();
+      
+      // 延迟执行以确保video组件已渲染
+      setTimeout(() => {
+        this.startPlayback();
+      }, 500);
+      // #endif
+      
+      // #ifndef APP-PLUS
+      this.handleError('H5环境不支持原生RTSP播放');
+      // #endif
+    },
+    
+    /**
+     * 处理RTSP地址
+     */
+    processRtspUrl() {
+      // 对于iOS，某些原生播放器可能需要特殊处理
+      // 这里根据实际情况调整URL格式
+      if (this.isIOS) {
+        // iOS平台处理逻辑
+        // 某些情况下可能需要使用第三方原生插件来播放RTSP
+        // 这里假设直接使用video标签可以播放RTSP
+        this.playUrl = this.rtspUrl;
+      } else if (this.isAndroid) {
+        // Android平台处理逻辑
+        this.playUrl = this.rtspUrl;
+      } else {
+        // 其他平台
+        this.playUrl = this.rtspUrl;
+      }
+      
+      // 如果音频上下文已初始化，更新音频源
+      if (this.useSeparateAudio && this.audioContext) {
+        this.setAudioSource(this.playUrl);
+      }
+    },
+    
+    /**
+     * 开始播放
+     */
+    startPlayback() {
+      // #ifdef APP-PLUS
+      try {
+        // 对于iOS，先确保音频会话已激活，再播放视频
+        if (this.isIOS) {
+          // 先尝试激活音频会话（用户交互时）
+          this.setupiOSAudio();
+          
+          // 额外尝试：在iOS上，有时需要显式请求音频播放权限
+          try {
+            if (typeof window !== 'undefined' && typeof window.plus !== 'undefined' && typeof window.plus.device !== 'undefined') {
+              // 获取设备信息，确认iOS版本
+              const device = window.plus.device;
+              const osInfo = device.osInfo || {};
+              console.log('设备信息:', { platform: device.platform, version: osInfo.version });
+            }
+          } catch (e) {
+            console.warn('获取设备信息失败:', e);
+          }
+        }
+        
+        const videoContext = uni.createVideoContext(this.videoId, this);
+        
+        // 播放视频
+        videoContext.play();
+        this.isPlaying = true;
+        this.$emit('play');
+        
+        // 延迟尝试再次激活音频会话（iOS上有时需要在播放后再次激活）
+        if (this.isIOS) {
+          setTimeout(() => {
+            try {
+              this.ensureAudioActive();
+            } catch (e) {
+              console.warn('延迟激活音频失败:', e);
+            }
+          }, 500);
+        }
+        
+        // 5秒后如果还在加载，显示重试选项
+        setTimeout(() => {
+          if (this.isLoading) {
+            this.loadingText = '加载中，请稍候...';
+          }
+        }, 5000);
+        
+      } catch (error) {
+        console.error('开始播放失败:', error);
+        this.handlePlaybackError(error);
+      }
+      // #endif
+    },
+    
+    /**
+     * 确保音频会话处于激活状态
+     * 用于在视频播放后再次尝试激活音频，提高iOS设备上RTSP流音频播放成功率
+     */
+    ensureAudioActive() {
+      try {
+        if (!this.isIOS || typeof window === 'undefined' || typeof window.plus === 'undefined' || typeof window.plus.ios === 'undefined') {
+          return;
+        }
+        
+        const AVAudioSession = window.plus.ios.import('AVAudioSession');
+        if (AVAudioSession && typeof AVAudioSession.sharedInstance === 'function') {
+          const session = AVAudioSession.sharedInstance();
+          if (session && typeof session.setActive === 'function') {
+            try {
+              // 先停用再重新激活，有时能解决音频问题
+              session.setActive(false);
+              session.setActive(true);
+              console.log('音频会话重新激活成功');
+            } catch (e) {
+              console.warn('重新激活音频会话失败:', e);
+            }
+          }
+          
+          // 释放资源
+          if (typeof window.plus.ios.deleteObject === 'function') {
+            window.plus.ios.deleteObject(session);
+          }
+        }
+      } catch (error) {
+        console.warn('确保音频激活时发生错误:', error);
+      }
+    },
+    
+    /**
+     * 初始化音频上下文
+     */
+    initAudioContext() {
+      try {
+        // 安全检查
+        if (typeof uni === 'undefined' || typeof uni.createInnerAudioContext !== 'function') {
+          console.warn('当前环境不支持createInnerAudioContext');
+          return false;
+        }
+        
+        // 创建独立音频上下文
+        this.audioContext = uni.createInnerAudioContext();
+        
+        // 安全地设置可能的可写属性，避免修改只读属性
+        try {
+          // 只尝试设置可能可写的属性
+          if (typeof this.audioContext.setAutoplay === 'function') {
+            this.audioContext.setAutoplay(false);
+          } else if (Object.getOwnPropertyDescriptor(this.audioContext, 'autoplay')?.writable) {
+            this.audioContext.autoplay = false;
+          }
+        } catch (e) {
+          console.warn('设置autoplay属性失败，跳过:', e);
+        }
+        
+        try {
+          if (typeof this.audioContext.setObeyMuteSwitch === 'function') {
+            this.audioContext.setObeyMuteSwitch(false);
+          } else if (Object.getOwnPropertyDescriptor(this.audioContext, 'obeyMuteSwitch')?.writable) {
+            this.audioContext.obeyMuteSwitch = false;
+          }
+        } catch (e) {
+          console.warn('设置obeyMuteSwitch属性失败，跳过:', e);
+        }
+        
+        // 安全地添加事件监听器
+        try {
+          if (typeof this.audioContext.onPlay === 'function') {
+            this.audioContext.onPlay(() => {
+              console.log('音频开始播放');
+            });
+          }
+        } catch (e) {
+          console.warn('添加onPlay监听器失败，跳过:', e);
+        }
+        
+        try {
+          if (typeof this.audioContext.onPause === 'function') {
+            this.audioContext.onPause(() => {
+              console.log('音频暂停');
+            });
+          }
+        } catch (e) {
+          console.warn('添加onPause监听器失败，跳过:', e);
+        }
+        
+        try {
+          if (typeof this.audioContext.onError === 'function') {
+            this.audioContext.onError((res) => {
+              console.warn('音频播放错误:', res);
+              // 音频错误不应影响视频播放
+            });
+          }
+        } catch (e) {
+          console.warn('添加onError监听器失败，跳过:', e);
+        }
+        
+        console.log('音频上下文初始化成功');
+        return true;
+      } catch (error) {
+        console.warn('初始化音频上下文失败:', error);
+        this.audioContext = null;
+        return false;
+      }
+    },
+    
+    /**
+     * 设置音频源
+     */
+    setAudioSource(url) {
+      try {
+        if (this.audioContext && url) {
+          try {
+            // 安全地设置音频源
+            if (typeof this.audioContext.src === 'string' || Object.getOwnPropertyDescriptor(this.audioContext, 'src')?.writable) {
+              this.audioContext.src = url;
+              console.log('音频源设置成功:', url);
+              return true;
+            }
+          } catch (e) {
+            console.warn('设置音频源失败:', e);
+          }
+        }
+        return false;
+      } catch (error) {
+        console.warn('设置音频源时发生错误:', error);
+        return false;
+      }
+    },
+    
+    /**
+     * iOS音频设置
+     */
+    setupiOSAudio() {
+      try {
+        // 尝试初始化独立音频上下文
+        this.useSeparateAudio = this.initAudioContext();
+        
+        if (this.useSeparateAudio) {
+          console.log('将使用createInnerAudioContext处理音频');
+          // 尝试设置音频源
+          if (this.playUrl) {
+            this.setAudioSource(this.playUrl);
+          }
+        } else {
+          // 安全检查：确保只在APP-PLUS环境下执行，避免在浏览器中报错
+          const isPlusEnv = typeof window !== 'undefined' && typeof window.plus !== 'undefined';
+          
+          if (!isPlusEnv) {
+            console.log('非APP环境，跳过音频设置');
+            return;
+          }
+          
+          // 尝试不同的音频设置方法，优雅降级
+          try {
+            // 方案1: 尝试使用plus.audio API（如果可用）
+            if (typeof plus.audio !== 'undefined' && typeof plus.audio.createAudioContext === 'function') {
+              try {
+                const audioContext = plus.audio.createAudioContext();
+                if (audioContext && typeof audioContext.play === 'function') {
+                  console.log('尝试使用plus.audio API');
+                }
+              } catch (e) {
+                console.warn('创建音频上下文失败:', e);
+              }
+            }
+          } catch (e1) {
+            console.warn('plus.audio API操作失败:', e1);
+          }
+          
+          try {
+            // 方案2: 尝试使用AVAudioSession（如果可用）
+            if (typeof plus.ios !== 'undefined' && typeof plus.ios.import === 'function') {
+              try {
+                const AVAudioSession = plus.ios.import('AVAudioSession');
+                if (AVAudioSession && typeof AVAudioSession.sharedInstance === 'function') {
+                  const session = AVAudioSession.sharedInstance();
+                  
+                  // 先尝试设置音频会话类别 - 这是iOS上音频播放的关键
+                  if (session && typeof session.setCategory === 'function') {
+                    try {
+                      // 对于视频播放，使用playback类别
+                      // 尝试不同的类别设置方式
+                      try {
+                        // iOS 10+ 推荐方式
+                        const CategoryPlayback = plus.ios.newString('AVAudioSessionCategoryPlayback');
+                        const ModeDefault = plus.ios.newString('AVAudioSessionModeDefault');
+                        const options = 1; // AVAudioSessionCategoryOptionMixWithOthers
+                        session.setCategory_withMode_options_(CategoryPlayback, ModeDefault, options);
+                        console.log('AVAudioSession类别设置成功(10+)');
+                        plus.ios.deleteObject(CategoryPlayback);
+                        plus.ios.deleteObject(ModeDefault);
+                      } catch (catError) {
+                        console.warn('设置音频会话类别(10+)失败，尝试旧方式:', catError);
+                        // 尝试旧版API
+                        try {
+                          const CategoryPlayback = plus.ios.newString('AVAudioSessionCategoryPlayback');
+                          session.setCategory_(CategoryPlayback);
+                          console.log('AVAudioSession类别设置成功(旧版)');
+                          plus.ios.deleteObject(CategoryPlayback);
+                        } catch (oldError) {
+                          console.warn('设置音频会话类别(旧版)失败:', oldError);
+                        }
+                      }
+                    } catch (e) {
+                      console.warn('设置音频会话类别失败:', e);
+                    }
+                  }
+                  
+                  // 然后激活音频会话
+                  if (session && typeof session.setActive === 'function') {
+                    try {
+                      // 尝试以不同的方式激活
+                      try {
+                        // iOS 6+ 方式
+                        session.setActive_withOptions_(true, 1); // 1 = AVAudioSessionSetActiveOptionNotifyOthersOnDeactivation
+                        console.log('AVAudioSession激活成功(带选项)');
+                      } catch (activeError) {
+                        console.warn('激活音频会话(带选项)失败，尝试简单方式:', activeError);
+                        // 尝试简单激活
+                        session.setActive(true);
+                        console.log('AVAudioSession激活成功(简单方式)');
+                      }
+                    } catch (e) {
+                      console.warn('激活音频会话失败:', e);
+                    }
+                  }
+                  
+                  // 检查音频会话状态
+                  if (session && typeof session.category === 'function') {
+                    try {
+                      const category = session.category();
+                      console.log('当前音频会话类别:', category);
+                    } catch (e) {
+                      console.warn('获取音频会话类别失败:', e);
+                    }
+                  }
+                  
+                  // 释放资源
+                  if (typeof plus.ios.deleteObject === 'function') {
+                    plus.ios.deleteObject(session);
+                  }
+                }
+              } catch (e) {
+                console.warn('AVAudioSession操作失败:', e);
+              }
+            }
+          } catch (e2) {
+            console.warn('AVAudioSession相关操作失败:', e2);
+          }
+        }
+        
+        console.log('音频设置完成');
+      } catch (error) {
+        console.warn('音频设置失败，将继续播放视频:', error);
+        // 即使音频设置失败，也不阻止视频播放
+      }
+    },
+    
+    /**
+     * 切换播放/暂停
+     */
+    togglePlayPause() {
+      try {
+        const videoContext = uni.createVideoContext(this.videoId, this);
+        if (this.isPlaying) {
+          // 暂停视频
+          videoContext.pause();
+          
+          // 暂停独立音频（如果启用）
+          if (this.useSeparateAudio && this.audioContext && typeof this.audioContext.pause === 'function') {
+            try {
+              this.audioContext.pause();
+              console.log('音频已暂停');
+            } catch (e) {
+              console.warn('暂停独立音频失败:', e);
+            }
+          }
+          
+          // iOS平台暂停时的处理
+          if (this.isIOS) {
+            try {
+              // 可以选择在这里暂停后暂时关闭音频会话，节省资源
+              this.deactivateAudioSession();
+            } catch (e) {
+              console.warn('停用音频会话失败:', e);
+            }
+          }
+          
+          this.$emit('pause');
+        } else {
+          // iOS平台播放前再次确保音频会话激活
+          if (this.isIOS) {
+            try {
+              this.setupiOSAudio();
+              console.log('播放前重新设置音频会话');
+            } catch (e) {
+              console.warn('播放前设置音频失败:', e);
+            }
+          }
+          
+          // 播放视频
+          videoContext.play();
+          
+          // 播放独立音频（如果启用）
+          if (this.useSeparateAudio && this.audioContext && typeof this.audioContext.play === 'function') {
+            try {
+              // 确保音频源已设置
+              if (!this.audioContext.src || this.audioContext.src !== this.playUrl) {
+                this.setAudioSource(this.playUrl);
+              }
+              // 播放音频
+              this.audioContext.play();
+              console.log('音频开始播放');
+            } catch (e) {
+              console.warn('播放独立音频失败:', e);
+            }
+          }
+          
+          this.$emit('play');
+        }
+        this.isPlaying = !this.isPlaying;
+      } catch (error) {
+        console.error('切换播放状态失败:', error);
+        this.handleError('控制播放失败');
+      }
+    },
+    
+    /**
+     * 切换静音状态
+     */
+    toggleMute() {
+      try {
+        const newMuteState = !this.isMuted;
+        
+        // 优先使用独立音频上下文（如果启用）
+        if (this.useSeparateAudio && this.audioContext) {
+          try {
+            this.audioContext.volume = newMuteState ? 0 : 1;
+            this.isMuted = newMuteState;
+            this.$emit('volume-change', newMuteState ? 0 : 1);
+            console.log('使用独立音频上下文切换静音状态');
+            return;
+          } catch (e) {
+            console.warn('独立音频上下文操作失败:', e);
+          }
+        }
+        
+        // 回退到视频上下文控制
+        const videoContext = uni.createVideoContext(this.videoId, this);
+        
+        // 方法1: 尝试使用setVolume（如果可用）
+        if (videoContext && typeof videoContext.setVolume === 'function') {
+          try {
+            videoContext.setVolume(newMuteState ? 0.0 : 1.0);
+            this.isMuted = newMuteState;
+            this.$emit('volume-change', newMuteState ? 0 : 1);
+            return;
+          } catch (e) {
+            console.warn('setVolume方法调用失败，尝试替代方案:', e);
+          }
+        }
+        
+        // 方法2: 尝试使用HTML5标准的muted属性（通过DOM操作）
+        try {
+          const videoElement = document.getElementById(this.videoId);
+          if (videoElement) {
+            videoElement.muted = newMuteState;
+            this.isMuted = newMuteState;
+            this.$emit('volume-change', newMuteState ? 0 : 1);
+            console.log('使用DOM muted属性切换静音状态');
+            return;
+          }
+        } catch (e) {
+          console.warn('DOM操作失败，静默状态更新但可能未应用:', e);
+        }
+        
+        // 方法3: 至少更新内部状态，确保UI一致性
+        this.isMuted = newMuteState;
+        this.$emit('volume-change', newMuteState ? 0 : 1);
+        console.log('仅更新内部静音状态');
+        
+      } catch (error) {
+        console.warn('切换静音状态时发生错误:', error);
+        // 即使出错也更新内部状态，保持UI响应性
+        this.isMuted = !this.isMuted;
+        this.$emit('volume-change', this.isMuted ? 0 : 1);
+      }
+    },
+    
+    /**
+     * 切换全屏
+     */
+    toggleFullscreen() {
+      try {
+        const videoContext = uni.createVideoContext(this.videoId, this);
+        if (this.isFullscreen) {
+          videoContext.exitFullScreen();
+          this.$emit('fullscreen-change', false);
+        } else {
+          videoContext.requestFullScreen({ direction: 90 });
+          this.$emit('fullscreen-change', true);
+        }
+        this.isFullscreen = !this.isFullscreen;
+      } catch (error) {
+        console.error('切换全屏失败:', error);
+      }
+    },
+    
+    /**
+     * 处理进度条变化
+     */
+    onProgressChange(e) {
+      try {
+        const value = e.detail.value;
+        const seekTime = (value / 100) * this.duration;
+        
+        const videoContext = uni.createVideoContext(this.videoId, this);
+        videoContext.seek(seekTime);
+        
+        this.currentTime = seekTime;
+        this.progressValue = value;
+        this.$emit('seek', seekTime);
+      } catch (error) {
+        console.error('进度调整失败:', error);
+      }
+    },
+    
+    /**
+     * 格式化时间
+     */
+    formatTime(seconds) {
+      if (!seconds || isNaN(seconds)) return '00:00';
+      
+      const mins = Math.floor(seconds / 60);
+      const secs = Math.floor(seconds % 60);
+      
+      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    },
+    
+    /**
+     * 视频错误回调
+     */
+    onVideoError(e) {
+      console.error('视频播放错误:', e);
+      this.handlePlaybackError(e);
+    },
+    
+    /**
+     * 视频时间更新回调
+     */
+    onTimeUpdate(e) {
+      this.currentTime = e.detail.currentTime || 0;
+      if (this.duration > 0) {
+        this.progressValue = (this.currentTime / this.duration) * 100;
+      }
+      
+      // 视频开始播放后关闭加载提示
+      if (this.isLoading) {
+        this.isLoading = false;
+      }
+    },
+    
+    /**
+     * 视频元数据加载完成回调
+     */
+    onLoadedMetadata(e) {
+      this.duration = e.detail.duration || 0;
+      this.isLoading = false;
+      
+      // 尝试检测音频轨道
+      this.detectAudioTrack();
+    },
+    
+    /**
+     * 检测RTSP流是否包含音频轨道
+     * 此方法使用多种策略尝试确定当前视频流是否包含音频
+     */
+    detectAudioTrack() {
+      try {
+        // 策略1: 尝试通过DOM元素获取音频相关属性
+        try {
+          const videoElement = document.getElementById(this.videoId);
+          if (videoElement) {
+            // 检查是否有音频轨道
+            if (videoElement.audioTracks && videoElement.audioTracks.length > 0) {
+              this.hasAudioTrack = true;
+              this.isAudioDetected = true;
+              console.log('通过audioTracks检测到音频轨道');
+              this.$emit('audio-detected', true);
+              return true;
+            }
+            
+            // 检查是否有音视频轨道（一些浏览器可能使用不同的API）
+            if (videoElement.textTracks && videoElement.textTracks.length > 0) {
+              // 这不是确定的音频检测方法，但可以作为参考
+              console.log('检测到媒体轨道，但不确定是否为音频');
+            }
+          }
+        } catch (domError) {
+          console.warn('DOM音频检测失败:', domError);
+        }
+        
+        // 策略2: 尝试通过独立音频上下文检测
+        if (this.useSeparateAudio && this.audioContext && this.playUrl) {
+          try {
+            // 临时创建一个音频上下文进行测试
+            const testAudio = uni.createInnerAudioContext();
+            
+            // 监听加载成功事件
+            const onLoadSuccess = () => {
+              // 音频能够加载通常意味着有音频轨道
+              this.hasAudioTrack = true;
+              this.isAudioDetected = true;
+              console.log('通过音频上下文加载检测到音频');
+              this.$emit('audio-detected', true);
+              
+              // 清理测试音频上下文
+              try {
+                testAudio.offLoad();
+                testAudio.offError();
+                testAudio.stop();
+                if (typeof testAudio.destroy === 'function') {
+                  testAudio.destroy();
+                }
+              } catch (cleanupError) {
+                console.warn('清理测试音频上下文失败:', cleanupError);
+              }
+            };
+            
+            // 监听错误事件
+            const onLoadError = () => {
+              // 加载失败可能意味着没有音频轨道或格式不支持
+              this.hasAudioTrack = false;
+              this.isAudioDetected = true;
+              console.log('音频上下文加载失败，可能没有音频轨道');
+              this.$emit('audio-detected', false);
+              
+              // 清理测试音频上下文
+              try {
+                testAudio.offLoad();
+                testAudio.offError();
+                testAudio.stop();
+                if (typeof testAudio.destroy === 'function') {
+                  testAudio.destroy();
+                }
+              } catch (cleanupError) {
+                console.warn('清理测试音频上下文失败:', cleanupError);
+              }
+            };
+            
+            testAudio.onLoad(onLoadSuccess);
+            testAudio.onError(onLoadError);
+            
+            // 设置源并尝试加载
+            testAudio.src = this.playUrl;
+            
+            // 5秒后超时处理
+            setTimeout(() => {
+              if (!this.isAudioDetected) {
+                console.warn('音频检测超时');
+                this.isAudioDetected = true;
+                this.$emit('audio-detected', false);
+                
+                try {
+                  testAudio.offLoad();
+                  testAudio.offError();
+                  testAudio.stop();
+                  if (typeof testAudio.destroy === 'function') {
+                    testAudio.destroy();
+                  }
+                } catch (cleanupError) {
+                  console.warn('清理超时测试音频上下文失败:', cleanupError);
+                }
+              }
+            }, 5000);
+          } catch (audioError) {
+            console.warn('独立音频上下文检测失败:', audioError);
+          }
+        }
+        
+        // 策略3: 尝试通过视频上下文检测
+        try {
+          const videoContext = uni.createVideoContext(this.videoId, this);
+          // 在某些环境中，视频上下文可能有获取音频状态的方法
+          if (typeof videoContext.getAudioTracks === 'function') {
+            const tracks = videoContext.getAudioTracks();
+            if (tracks && tracks.length > 0) {
+              this.hasAudioTrack = true;
+              this.isAudioDetected = true;
+              console.log('通过视频上下文getAudioTracks检测到音频轨道');
+              this.$emit('audio-detected', true);
+              return true;
+            }
+          }
+        } catch (videoContextError) {
+          console.warn('视频上下文音频检测失败:', videoContextError);
+        }
+        
+        // 如果所有检测策略都失败或未完成，设置为未检测到音频
+        if (!this.isAudioDetected) {
+          // 注意：这只是默认值，实际可能有音频但我们无法检测到
+          console.log('无法确定是否包含音频轨道，默认为false');
+        }
+        
+        return this.hasAudioTrack;
+      } catch (error) {
+        console.warn('检测音频轨道时发生错误:', error);
+        return false;
+      }
+    },
+    
+    /**
+     * 获取当前RTSP流的音频支持状态
+     * 此方法可以被父组件调用，用于查询音频支持情况
+     * @returns {Object} 包含音频状态信息的对象
+     */
+    getAudioStatus() {
+      return {
+        hasAudio: this.hasAudioTrack,
+        detected: this.isAudioDetected,
+        usingSeparateAudio: this.useSeparateAudio
+      };
+    },
+    
+    /**
+     * 重新检测音频轨道
+     * 强制重新执行音频检测逻辑
+     * @returns {Promise<boolean>} 表示检测结果的Promise
+     */
+    reDetectAudioTrack() {
+      return new Promise((resolve) => {
+        try {
+          // 重置检测状态
+          this.hasAudioTrack = false;
+          this.isAudioDetected = false;
+          
+          // 移除之前的监听器，避免多次触发
+          this.$off('audio-detected');
+          
+          // 添加新的监听器来返回结果
+          this.$once('audio-detected', (hasAudio) => {
+            resolve(hasAudio);
+          });
+          
+          // 执行检测
+          this.detectAudioTrack();
+          
+          // 设置30秒超时
+          setTimeout(() => {
+            if (!this.isAudioDetected) {
+              console.warn('重新检测音频超时，返回false');
+              this.isAudioDetected = true;
+              resolve(false);
+            }
+          }, 30000);
+        } catch (error) {
+          console.error('重新检测音频失败:', error);
+          resolve(false);
+        }
+      });
+    },
+    
+    /**
+     * 视频播放结束回调
+     */
+    onVideoEnded() {
+      this.isPlaying = false;
+      this.$emit('ended');
+      // 直播流可能不会触发此事件
+    },
+    
+    /**
+     * 视频开始播放回调
+     */
+    onPlay() {
+      this.isPlaying = true;
+      this.$emit('play');
+    },
+    
+    /**
+     * 视频暂停回调
+     */
+    onPause() {
+      this.isPlaying = false;
+      this.$emit('pause');
+    },
+    
+    /**
+     * 处理播放错误
+     */
+    handlePlaybackError(error) {
+      this.isLoading = false;
+      
+      // 重试逻辑
+      if (this.retryCount < this.maxRetryCount) {
+        this.retryCount++;
+        this.loadingText = `连接失败，${this.retryCount}/${this.maxRetryCount}秒后重试...`;
+        this.isLoading = true;
+        
+        this.retryTimer = setTimeout(() => {
+          this.loadingText = `正在重试 (${this.retryCount}/${this.maxRetryCount})...`;
+          this.startPlayback();
+        }, this.retryDelay);
+      } else {
+        // 达到最大重试次数，显示错误
+        let errorMsg = '播放失败，请检查网络或视频地址';
+        if (isString(error)) {
+          errorMsg = error;
+        } else if (error && error.message) {
+          errorMsg = error.message;
+        }
+        this.handleError(errorMsg);
+      }
+    },
+    
+    /**
+     * 显示错误信息
+     */
+    handleError(message) {
+      this.isLoading = false;
+      this.errorMessage = message;
+      this.showError = true;
+      this.$emit('error', new Error(message));
+    },
+    
+    /**
+     * 组件方法：开始播放
+     */
+    play() {
+      try {
+        const videoContext = uni.createVideoContext(this.videoId, this);
+        videoContext.play();
+        
+        // 同步播放音频
+        if (this.useSeparateAudio && this.audioContext && typeof this.audioContext.play === 'function') {
+          try {
+            // 确保音频源已设置
+            if (!this.audioContext.src || this.audioContext.src !== this.playUrl) {
+              this.setAudioSource(this.playUrl);
+            }
+            this.audioContext.play();
+          } catch (e) {
+            console.warn('播放独立音频失败:', e);
+          }
+        }
+        
+        this.isPlaying = true;
+        this.$emit('play');
+      } catch (error) {
+        console.error('播放失败:', error);
+        this.$emit('error', error);
+      }
+    },
+    
+    /**
+     * 组件方法：暂停播放
+     */
+    pause() {
+      try {
+        const videoContext = uni.createVideoContext(this.videoId, this);
+        videoContext.pause();
+        
+        // 同步暂停音频
+        if (this.useSeparateAudio && this.audioContext && typeof this.audioContext.pause === 'function') {
+          try {
+            this.audioContext.pause();
+          } catch (e) {
+            console.warn('暂停独立音频失败:', e);
+          }
+        }
+        
+        this.isPlaying = false;
+        this.$emit('pause');
+      } catch (error) {
+        console.error('暂停失败:', error);
+        this.$emit('error', error);
+      }
+    },
+    
+    /**
+     * 组件方法：重新加载视频
+     */
+    reload() {
+      this.reloadVideo();
+    },
+    
+    /**
+     * 清理资源
+     */
+    cleanupResources() {
+      // 清除定时器
+      if (this.retryTimer) {
+        clearTimeout(this.retryTimer);
+      }
+      
+      // 清理独立音频上下文（如果有）
+      if (this.audioContext) {
+        try {
+          if (typeof this.audioContext.stop === 'function') {
+            this.audioContext.stop();
+          }
+          if (typeof this.audioContext.destroy === 'function') {
+            this.audioContext.destroy();
+          }
+          this.audioContext = null;
+          console.log('音频上下文已清理');
+        } catch (error) {
+          console.error('清理音频上下文失败:', error);
+        }
+      }
+      
+      // 停止播放
+      try {
+        const videoContext = uni.createVideoContext(this.videoId, this);
+        videoContext.pause();
+      } catch (error) {
+        console.error('停止播放失败:', error);
+      }
+      
+      // iOS平台清理音频会话
+      if (this.isIOS) {
+        try {
+          const AVAudioSession = plus.ios.import('AVAudioSession');
+          const session = AVAudioSession.sharedInstance();
+          session.setActive(false);
+          plus.ios.deleteObject(session);
+        } catch (error) {
+          console.error('iOS音频会话清理失败:', error);
+        }
+      }
+      
+      // 触发销毁事件
+      this.$emit('destroy');
+      
+      // 重置音频检测状态
+      this.hasAudioTrack = false;
+      this.isAudioDetected = false;
+    },
+    
+    /**
+     * 重新加载视频
+     */
+    reloadVideo() {
+      this.retryCount = 0;
+      this.isLoading = true;
+      this.loadingText = '正在重新加载...';
+      this.showError = false;
+      this.errorMessage = '';
+      
+      // 触发重新加载事件
+      this.$emit('reload');
+      
+      // 重置音频检测状态
+      this.hasAudioTrack = false;
+      this.isAudioDetected = false;
+      
+      this.$nextTick(() => {
+        this.initPlayer();
+      });
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.native-rtsp-player {
+  width: 100%;
+  min-height: 300rpx;
+  background-color: #000000;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.header {
+  height: 88rpx;
+  background-color: #1E1E1E;
+  display: flex;
+  align-items: center;
+  padding: 0 30rpx;
+  position: relative;
+  z-index: 10;
+}
+
+.back-button {
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  flex: 1;
+  color: #FFFFFF;
+  font-size: 36rpx;
+  font-weight: 500;
+  text-align: center;
+  padding-right: 80rpx; // 为返回按钮留出空间
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.video-container {
+  flex: 1;
+  position: relative;
+  background-color: #000000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.video-player {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.h5-notice {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #FFFFFF;
+  padding: 60rpx;
+}
+
+.notice-text {
+  margin-top: 30rpx;
+  font-size: 36rpx;
+  font-weight: 500;
+}
+
+.notice-subtext {
+  margin-top: 20rpx;
+  font-size: 28rpx;
+  color: #CCCCCC;
+}
+
+.controls-container {
+  padding: 30rpx;
+  background-color: #1E1E1E;
+  border-top: 1rpx solid #333333;
+}
+
+.control-buttons {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 30rpx;
+}
+
+.control-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20rpx;
+}
+
+.btn-text {
+  margin-top: 10rpx;
+  font-size: 24rpx;
+  color: #498CEC;
+}
+
+.progress-container {
+  display: flex;
+  align-items: center;
+  margin-top: 20rpx;
+}
+
+.time-text {
+  color: #CCCCCC;
+  font-size: 24rpx;
+  width: 80rpx;
+  text-align: center;
+}
+
+.slider {
+  flex: 1;
+  margin: 0 20rpx;
+}
+
+/* 适配不同平台 */
+/* #ifdef MP-WEIXIN */
+.video-player {
+  object-fit: cover;
+}
+/* #endif */
+
+/* #ifdef APP-PLUS */
+.video-container {
+  background-color: #000000;
+}
+
+.video-player {
+  background-color: #000000;
+}
+/* #endif */
+</style>
\ No newline at end of file
diff --git a/static/bodyWornCamera/bodyWornCamera_offline.png b/static/bodyWornCamera/bodyWornCamera_offline.png
new file mode 100644
index 00000000..aed25f96
Binary files /dev/null and b/static/bodyWornCamera/bodyWornCamera_offline.png differ
diff --git a/static/bodyWornCamera/bodyWornCamera_online.png b/static/bodyWornCamera/bodyWornCamera_online.png
new file mode 100644
index 00000000..552a7c41
Binary files /dev/null and b/static/bodyWornCamera/bodyWornCamera_online.png differ
diff --git a/static/bodyWornCamera/bodyworn_audio.png b/static/bodyWornCamera/bodyworn_audio.png
new file mode 100644
index 00000000..f576581c
Binary files /dev/null and b/static/bodyWornCamera/bodyworn_audio.png differ
diff --git a/static/bodyWornCamera/bodyworn_pause.png b/static/bodyWornCamera/bodyworn_pause.png
new file mode 100644
index 00000000..87436366
Binary files /dev/null and b/static/bodyWornCamera/bodyworn_pause.png differ
diff --git a/static/bodyWornCamera/bodyworn_play.png b/static/bodyWornCamera/bodyworn_play.png
new file mode 100644
index 00000000..993aa60a
Binary files /dev/null and b/static/bodyWornCamera/bodyworn_play.png differ