diff --git a/.env.development b/.env.development
index 45d96cc..e1d3136 100644
--- a/.env.development
+++ b/.env.development
@@ -4,8 +4,8 @@ NODE_ENV = 'development'
 # 本地环境接口地址(/api/index.ts文件中使用)
 # 后端本地
 # VITE_API_URL = 'http://192.168.34.155:28890'  #彭杰鞍钢本地
-VITE_API_URL = 'http://192.168.34.155:19111'
-# VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
+# VITE_API_URL = 'http://192.168.34.155:19111'
+VITE_API_URL = 'http://192.168.34.221:8111' #雄哥本地
 # VITE_API_URL = 'http://192.168.34.221:19112' #雄哥本地
 # VITE_API_URL = 'http://192.168.34.221:28890' #雄哥本地
 # VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
diff --git a/package-lock.json b/package-lock.json
index 4f6b6b7..4b0046e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
 				"element-china-area-data": "^5.0.2",
 				"element-plus": "^2.2.30",
 				"ezuikit-js": "^7.7.8",
+				"hls.js": "^1.6.7",
 				"jquery": "^3.7.1",
 				"jquery-ui": "^1.13.2",
 				"jquery-ui-dist": "^1.13.2",
@@ -8912,6 +8913,11 @@
 				"xtend": "~4.0.1"
 			}
 		},
+		"node_modules/hls.js": {
+			"version": "1.6.7",
+			"resolved": "https://registry.npmmirror.com/hls.js/-/hls.js-1.6.7.tgz",
+			"integrity": "sha512-QW2fnwDGKGc9DwQUGLbmMOz8G48UZK7PVNJPcOUql1b8jubKx4/eMHNP5mGqr6tYlJNDG1g10Lx2U/qPzL6zwQ=="
+		},
 		"node_modules/homedir-polyfill": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -23322,6 +23328,11 @@
 				}
 			}
 		},
+		"hls.js": {
+			"version": "1.6.7",
+			"resolved": "https://registry.npmmirror.com/hls.js/-/hls.js-1.6.7.tgz",
+			"integrity": "sha512-QW2fnwDGKGc9DwQUGLbmMOz8G48UZK7PVNJPcOUql1b8jubKx4/eMHNP5mGqr6tYlJNDG1g10Lx2U/qPzL6zwQ=="
+		},
 		"homedir-polyfill": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
diff --git a/package.json b/package.json
index c9bada0..fdd3fd8 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
 		"element-china-area-data": "^5.0.2",
 		"element-plus": "^2.2.30",
 		"ezuikit-js": "^7.7.8",
+		"hls.js": "^1.6.7",
 		"jquery": "^3.7.1",
 		"jquery-ui": "^1.13.2",
 		"jquery-ui-dist": "^1.13.2",
diff --git a/src/api/modules/workTicket.ts b/src/api/modules/workTicket.ts
new file mode 100644
index 0000000..70cc04a
--- /dev/null
+++ b/src/api/modules/workTicket.ts
@@ -0,0 +1,32 @@
+
+import http from "@/api";
+const BASEURL = import.meta.env.VITE_API_URL;
+
+// 统计工作票
+export const getWorkTicketCountWorkTicketApi = (params: {}) => {
+    return http.post(BASEURL + `/xmgl/workTicket/countWorkTicket`, params);
+};
+// 分页列表查询工作票信息
+export const getWorkTicketPageApi = (params: {}) => {
+    return http.get(BASEURL + `/xmgl/workTicket/page`, params);
+};
+// 树形分页列表查询工作票类型信息
+export const getWorkTicketTypeTreePageApi = (params: {}) => {
+    return http.get(BASEURL + `/xmgl/workTicketType/tree/page`, params);
+};
+// 通过id查询工作票信息
+export const getWorkTicketQueryByIdApi = (params: {}) => {
+    return http.get(BASEURL + `/xmgl/workTicket/queryById`, params);
+};
+// 列表查询工作票历史记录信息
+export const getWorkTicketHistoryListApi = (params: {}) => {
+    return http.get(BASEURL + `/xmgl/workTicketHistory/list`, params);
+};
+// 根据itemId查询视频播放url
+export const getVideoItemInfoPoliceCameraItemApi = (params: {}) => {
+    return http.post(BASEURL + `/xmgl/policeCameraItem/getVideoItemInfo`, params);
+};
+// 分页列表查询执法记录仪设备列表信息
+export const getPoliceCameraItemPageApi = (params: {}) => {
+    return http.get(BASEURL + `/xmgl/policeCameraItem/page`, params);
+};
\ No newline at end of file
diff --git a/src/assets/images/cardImg1.png b/src/assets/images/cardImg1.png
new file mode 100644
index 0000000..16f34b9
Binary files /dev/null and b/src/assets/images/cardImg1.png differ
diff --git a/src/assets/images/workTicket/bodyworn_audio.png b/src/assets/images/workTicket/bodyworn_audio.png
new file mode 100644
index 0000000..f576581
Binary files /dev/null and b/src/assets/images/workTicket/bodyworn_audio.png differ
diff --git a/src/assets/images/workTicket/bodyworn_pause.png b/src/assets/images/workTicket/bodyworn_pause.png
new file mode 100644
index 0000000..8743636
Binary files /dev/null and b/src/assets/images/workTicket/bodyworn_pause.png differ
diff --git a/src/assets/images/workTicket/bodyworn_play.png b/src/assets/images/workTicket/bodyworn_play.png
new file mode 100644
index 0000000..993aa60
Binary files /dev/null and b/src/assets/images/workTicket/bodyworn_play.png differ
diff --git a/src/assets/images/workTicket/index-icon1.png b/src/assets/images/workTicket/index-icon1.png
new file mode 100644
index 0000000..1085a2e
Binary files /dev/null and b/src/assets/images/workTicket/index-icon1.png differ
diff --git a/src/assets/images/workTicket/index-icon10.png b/src/assets/images/workTicket/index-icon10.png
new file mode 100644
index 0000000..beeb994
Binary files /dev/null and b/src/assets/images/workTicket/index-icon10.png differ
diff --git a/src/assets/images/workTicket/index-icon2.png b/src/assets/images/workTicket/index-icon2.png
new file mode 100644
index 0000000..78244c1
Binary files /dev/null and b/src/assets/images/workTicket/index-icon2.png differ
diff --git a/src/assets/images/workTicket/index-icon3.png b/src/assets/images/workTicket/index-icon3.png
new file mode 100644
index 0000000..99ece33
Binary files /dev/null and b/src/assets/images/workTicket/index-icon3.png differ
diff --git a/src/assets/images/workTicket/index-icon4.png b/src/assets/images/workTicket/index-icon4.png
new file mode 100644
index 0000000..080f8c5
Binary files /dev/null and b/src/assets/images/workTicket/index-icon4.png differ
diff --git a/src/assets/images/workTicket/index-icon5.png b/src/assets/images/workTicket/index-icon5.png
new file mode 100644
index 0000000..685aea6
Binary files /dev/null and b/src/assets/images/workTicket/index-icon5.png differ
diff --git a/src/assets/images/workTicket/index-icon6.png b/src/assets/images/workTicket/index-icon6.png
new file mode 100644
index 0000000..00aba24
Binary files /dev/null and b/src/assets/images/workTicket/index-icon6.png differ
diff --git a/src/assets/images/workTicket/index-icon7.png b/src/assets/images/workTicket/index-icon7.png
new file mode 100644
index 0000000..8f9abed
Binary files /dev/null and b/src/assets/images/workTicket/index-icon7.png differ
diff --git a/src/assets/images/workTicket/index-icon8.png b/src/assets/images/workTicket/index-icon8.png
new file mode 100644
index 0000000..2754f9d
Binary files /dev/null and b/src/assets/images/workTicket/index-icon8.png differ
diff --git a/src/assets/images/workTicket/index-icon9.png b/src/assets/images/workTicket/index-icon9.png
new file mode 100644
index 0000000..8d83954
Binary files /dev/null and b/src/assets/images/workTicket/index-icon9.png differ
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index f06c487..8628e6c 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -112,6 +112,11 @@ export const staticRouter: RouteRecordRaw[] = [
 				name: "工程概况-2",
 				component: () => import("@/views/sevenLargeScreen/comprehensiveManage/projectOverviewL/index.vue")
 			},
+			{
+				path: "/homeworkControlProcess",
+				name: "作业过程管控",
+				component: () => import("@/views/sevenLargeScreen/homeworkControlProcess/index.vue")
+			},
 			// {
 			// 	path: "/projectOverviewer",
 			// 	name: "工程概况-1",
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightBottom.vue b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightBottom.vue
index 7b73cb6..6b46721 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightBottom.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightBottom.vue
@@ -465,7 +465,7 @@ const getList = async () => {
 	const res = await getCurrentDayAirQualityApi({ projectSn: store.sn });
 	console.log("获取环境监测数据", res);
 	if (res.result) {
-		analysisData.value = res.result.analysisData;
+		analysisData.value = res.result.analysisData ? res.result.analysisData : "";
 	}
 	drawChart();
 };
diff --git a/src/views/sevenLargeScreen/headNoise/leftTop.vue b/src/views/sevenLargeScreen/headNoise/leftTop.vue
index ae86f7f..245c0e0 100644
--- a/src/views/sevenLargeScreen/headNoise/leftTop.vue
+++ b/src/views/sevenLargeScreen/headNoise/leftTop.vue
@@ -461,7 +461,7 @@ const getList = async () => {
 	console.log("获取环境监测数据", res);
 	if (res.result) {
 		analysisType.value = res.result.analysisType;
-		analysisData.value = res.result.analysisData;
+		analysisData.value = res.result.analysisData ? res.result.analysisData : "";
 	}
 	console.log("analysisType", analysisType.value);
 	console.log("analysisData", analysisData.value);
diff --git a/src/views/sevenLargeScreen/homeworkControlProcess/components/HlsPlayer.vue b/src/views/sevenLargeScreen/homeworkControlProcess/components/HlsPlayer.vue
new file mode 100644
index 0000000..614b5d2
--- /dev/null
+++ b/src/views/sevenLargeScreen/homeworkControlProcess/components/HlsPlayer.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="hls-player">
+    <video
+      ref="video"
+      :controls="controls"
+      :autoplay="autoplay"
+      :muted="muted"
+      :poster="poster"
+      style="width: 100%; height: 100%"
+      playsinline
+      webkit-playsinline
+    ></video>
+  </div>
+</template>
+
+<script>
+import Hls from "hls.js";
+
+export default {
+  name: "HlsPlayer",
+  props: {
+    src: { type: String, required: true },
+    controls: { type: Boolean, default: true },
+    autoplay: { type: Boolean, default: false },
+    muted: { type: Boolean, default: false },
+    poster: { type: String, default: "" },
+  },
+  data() {
+    return {
+      hls: null,
+    };
+  },
+  mounted() {
+    this.initPlayer();
+  },
+  beforeDestroy() {
+    this.destroyPlayer();
+  },
+  watch: {
+    src(newVal) {
+      this.initPlayer();
+    },
+  },
+  methods: {
+    initPlayer() {
+      this.destroyPlayer();
+      const video = this.$refs.video;
+      if (Hls.isSupported()) {
+        this.hls = new Hls();
+        this.hls.loadSource(this.src);
+        this.hls.attachMedia(video);
+      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+        video.src = this.src;
+      }
+    },
+    destroyPlayer() {
+      if (this.hls) {
+        this.hls.destroy();
+        this.hls = null;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.hls-player {
+  width: 100%;
+  height: 100%;
+  background: #000;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/homeworkControlProcess/index.vue b/src/views/sevenLargeScreen/homeworkControlProcess/index.vue
new file mode 100644
index 0000000..27ea3b9
--- /dev/null
+++ b/src/views/sevenLargeScreen/homeworkControlProcess/index.vue
@@ -0,0 +1,1644 @@
+<template>
+	<div class="headerNoise">
+		<div class="headerNoise-left" v-if="!viewAllShow">
+			<Card title="工作票列表">
+				<div class="content-box">
+					<div class="box-header">
+						<div
+							@click="onWorkTicketStateClick(item)"
+							:class="{ box_active: workTicketInfo.status == item.stateType }"
+							v-for="item in workTicketCountList"
+							:key="item.label"
+						>
+							<div>
+								<div>{{ item.label }}</div>
+								<div>{{ item.value }}</div>
+							</div>
+							<div></div>
+						</div>
+					</div>
+					<div class="box-search">
+						<el-cascader
+							v-model="workTicketInfo.typeId"
+							:options="workTicketTypeTreeList"
+							filterable
+							clearable
+							collapse-tags
+							placeholder="工作票类型"
+							:show-all-levels="false"
+							:props="{
+								multiple: false,
+								checkStrictly: true,
+								emitPath: false,
+								value: 'id',
+								label: 'typeName'
+							}"
+						></el-cascader>
+						<el-input v-model="workTicketInfo.numberOrContent" placeholder="施工场站或工作票编号"></el-input>
+						<el-date-picker
+							v-model="workTicketInfo.constructionTime"
+							type="daterange"
+							range-separator="至"
+							start-placeholder="开始日期"
+							end-placeholder="结束日期"
+							value-format="YYYY-MM-DD"
+						/>
+						<div @click="onWorkTicketQuery" class="query">查询</div>
+						<div @click="onWorkTicketRefresh" class="refresh">刷新</div>
+					</div>
+					<el-scrollbar class="box-main">
+						<div style="height: 100%" infinite-scroll-distance="1" v-infinite-scroll="load">
+							<div class="box-main_box" v-for="item in workTicketList" :key="item.id">
+								<div>
+									<div>
+										<div></div>
+										<div>{{ item.workTicketNumber }}</div>
+										<div></div>
+									</div>
+									<div @click="onViewDetail(item)">查看</div>
+								</div>
+								<div>
+									<div>使用单位</div>
+									<div>{{ item.applicantNames }}</div>
+								</div>
+								<div>
+									<div>使用人员</div>
+									<div>{{ item.operator }}</div>
+								</div>
+								<div>
+									<div>提交时间</div>
+									<div>{{ item.applicationTime }}</div>
+								</div>
+								<div
+									class="box-btn"
+									:class="{
+										wks_active: item.status == 1,
+										sgz_active: item.status == 2,
+										ztz_active: item.status == 3,
+										ywg_acitve: item.status == 4
+									}"
+								>
+									{{ updateStatus(item.status) }}
+								</div>
+							</div>
+						</div>
+						<div class="notoDta" v-if="workTicketList.length == 0">
+							<img src="@/assets/images/noData.png" alt />
+							<p>暂无数据</p>
+						</div>
+					</el-scrollbar>
+				</div>
+			</Card>
+		</div>
+		<div class="headerNoise-right" :class="{ 'headerNoise-right_active': viewAllShow }">
+			<div class="h-card">
+				<div class="title">
+					<div><img src="@/assets/images/titleIcon.png" alt="" /></div>
+					<div class="titltText">
+						<i>作业过程管控</i>
+					</div>
+					<div class="right-icon" @click="onViewAllClick">
+						<div>查看所有施工中的监控录像</div>
+						<div></div>
+					</div>
+				</div>
+				<div class="content-main">
+					<div v-if="!viewAllShow" class="content-left" :class="{ 'content-left_active': isShowDetail }">
+						<div @click="isShowDetail = true" class="content-left_box" v-if="!isShowDetail">
+							<div>工作票详情</div>
+							<div></div>
+						</div>
+						<div class="content-left_box1" v-else>
+							<div class="box1-header">
+								<div>当前正在执行的工作票</div>
+								<div @click="isShowDetail = false" class="shrink-box"></div>
+							</div>
+							<div class="box1">
+								<div>工作票类型</div>
+								<div>{{ workTicketDetail.typeName }}</div>
+							</div>
+							<div class="box1">
+								<div>工作票编号</div>
+								<div>{{ workTicketDetail.workTicketNumber }}</div>
+							</div>
+							<div class="box1">
+								<div>施工场站</div>
+								<div>{{ workTicketDetail.constructionAreaNames }}</div>
+							</div>
+							<div class="box1">
+								<div>申请单位</div>
+								<div>{{ workTicketDetail.applicantNames }}</div>
+							</div>
+							<div class="box1">
+								<div>作业人员</div>
+								<div>{{ workTicketDetail.operator }}</div>
+							</div>
+							<div class="box1">
+								<div>施工时间</div>
+								<div>{{ workTicketDetail.constructionTimeBegin }} - {{ workTicketDetail.constructionTimeEnd }}</div>
+							</div>
+							<div class="box1">
+								<div>申请时间</div>
+								<div>{{ workTicketDetail.applicationTime }}</div>
+							</div>
+							<div class="box1">
+								<div>安全措施</div>
+								<div>{{ workTicketDetail.safetyMeasure }}</div>
+							</div>
+							<div class="box1">
+								<div>作业内容</div>
+								<div>{{ workTicketDetail.workContent }}</div>
+							</div>
+							<div class="box1-header">
+								<div>当前正在执行的工作票</div>
+							</div>
+							<div class="box1">
+								<div>工作票附件</div>
+								<div class="content-img">
+									<el-image
+										v-for="item in workTicketDetail.workTicketAttachment"
+										:key="item.url"
+										:src="BASEURL + '/image/' + item.url"
+										:preview-src-list="[BASEURL + '/image/' + item.url]"
+									>
+									</el-image>
+								</div>
+							</div>
+							<div class="box1">
+								<div>其他附件</div>
+								<div class="content-file_list">
+									<div v-for="item in workTicketDetail.otherAttachment" :key="item.url">
+										<div>
+											<div></div>
+											<div>{{ item.name }}</div>
+										</div>
+										<div @click="downloadFileBtn(BASEURL + '/image/' + item.url, item.name)">
+											<div></div>
+											<div>下载</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="content-right" :class="{ 'content-right_active': isShowDetail }">
+                        <el-scrollbar :class="viewAllShow ? 'content-right_box-main1' : 'content-right_box-main'">
+                            <div style="height: 100%" infinite-scroll-distance="1" :infinite-scroll-immediate="false" v-infinite-scroll="initPoliceCameraItemList" :class="{'content-right-top2': viewAllShow,'content-right-top1': isShowDetail && !viewAllShow, 'content-right-top': !isShowDetail && !viewAllShow}">
+                                <div v-for="item in policeCameraItemList" :key="item.itemId">
+                                    <div class="hls-video">
+                                        <!-- <HlsPlayer :src="'https://gcalic.v.myalicdn.com/gc/wgw05_1/index.m3u8'" :autoplay="true" :controls="true" /> -->
+                                        <HlsPlayer :src="item.videoItemInfo ? item.videoItemInfo.url : ''" :autoplay="true" :controls="true" />
+                                    </div>
+                                    <div class="hls-video_title" @click="onEquipmentClick(item)">
+                                        <div>设备详情</div>
+                                        <div></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </el-scrollbar>
+						<div class="content-right-bottom" v-if="!viewAllShow">
+							<div class="right-bottom_header">
+								<div>历史记录</div>
+								<div>
+									<el-date-picker
+										v-model="historySearchInfo.beginTime"
+										type="daterange"
+										range-separator="至"
+										start-placeholder="开始日期"
+										end-placeholder="结束日期"
+										value-format="YYYY-MM-DD"
+									/>
+									<!-- <el-input v-model="historySearchInfo.value" placeholder="设备名称"></el-input> -->
+									<div @click="getWorkTicketHistoryList" class="query">查询</div>
+									<div @click="onWorkTicketHistoryRefresh" class="refresh">刷新</div>
+								</div>
+							</div>
+							<div class="right-bottom_main">
+								<el-table
+									:data="workTicketHistoryList"
+									:height="184"
+									:tree-props="{ children: 'fileList' }"
+									row-key="id"
+									style="width: 100%"
+								>
+									<el-table-column align="center" prop="fileName" label="序号">
+										<template #default="{ row }">
+											<span v-if="row.fileType">
+												{{ row.fileName }}
+											</span>
+											<span v-else> 第{{ row.no }}次作业 </span>
+										</template>
+									</el-table-column>
+									<el-table-column :width="300" align="center" prop="startTime" label="总时间段">
+										<template #default="{ row }">
+											<span v-if="row.fileType">
+												{{ row.startTime ? row.startTime : "暂无" }} -
+												{{ row.endTime ? row.endTime : "暂无" }}
+											</span>
+											<span>
+												{{ row.begin ? row.begin : "暂无" }} -
+												{{ row.end ? row.end : "暂无" }}
+											</span>
+										</template>
+									</el-table-column>
+									<el-table-column align="center" prop="begin" label="总时长">
+										<template #default="{ row }">
+											<span class="time-diff" v-if="row.fileType">{{ itemDiffUp(row.startTime, row.endTime) }}</span>
+											<span class="time-diff" v-else>{{ itemDiffUp(row.begin, row.end) }}</span>
+										</template>
+									</el-table-column>
+									<el-table-column align="center" prop="fileType" label="操作">
+										<template #default="{ row }">
+											<div @click="onViewrePlayClick(row)" v-if="row.fileType" class="viewreplay">查看回放</div>
+										</template>
+									</el-table-column>
+								</el-table>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<el-dialog
+			:show-close="false"
+			:modal-append-to-body="false"
+			v-model="viewreplayDialog"
+			width="360px"
+			class="hls-video-dialog"
+		>
+			<div class="dialog_content">
+				<div class="audio-content" v-if="viewreplayInfo.fileType == 2">
+					<div>
+						<div>
+							<div></div>
+							<div>{{ viewreplayInfo.devName }}音频</div>
+							<div>{{ (viewreplayInfo.fileLen / (1024 * 1024)).toFixed(2) }}MB</div>
+						</div>
+						<div>
+							<div>{{ viewreplayInfo.fileTime }}</div>
+							<div>时长：{{ viewreplayInfo.duration }}</div>
+						</div>
+					</div>
+					<audio ref="audioRefs" :src="BASEURL + '/image/' + viewreplayInfo.fileUrl" controls loop></audio>
+					<div
+						class="bodyworn_pause"
+						:class="{ bodyworn_play: viewreplayInfo.is_play }"
+						@click.stop="onAudioClick(viewreplayInfo)"
+					></div>
+				</div>
+				<div class="video-content" v-else>
+					<div class="card-img">
+						<video controls v-if="viewreplayInfo.fileType == 3">
+							<source :src="BASEURL + '/image/' + viewreplayInfo.fileUrl" type="video/mp4" />
+							<source :src="BASEURL + '/image/' + viewreplayInfo.fileUrl" type="video/webm" />
+							您的浏览器不支持 HTML5 video 标签。
+						</video>
+						<el-image
+							v-else-if="viewreplayInfo.fileType == 1"
+							:src="BASEURL + '/image/' + viewreplayInfo.fileUrl"
+							:preview-src-list="[BASEURL + '/image/' + viewreplayInfo.fileUrl]"
+						>
+						</el-image>
+					</div>
+					<template v-if="viewreplayInfo.fileType == 3">
+						<div class="card-flex">
+							<div class="card-num webkit-clamp_1">{{ viewreplayInfo.fileName }}</div>
+							<div class="card-num">{{ (viewreplayInfo.fileLen / (1024 * 1024)).toFixed(2) }}MB</div>
+						</div>
+						<div class="card-flex">
+							<div>{{ viewreplayInfo.startTime }}</div>
+							<p>至</p>
+							<div>{{ viewreplayInfo.endTime }}</div>
+						</div>
+					</template>
+					<template v-else-if="viewreplayInfo.fileType == 1">
+						<div class="card-flex">
+							<div>{{ viewreplayInfo.uploadTime }}</div>
+						</div>
+					</template>
+				</div>
+			</div>
+		</el-dialog>
+		<el-dialog title="设备详情" :modal="false" :modal-append-to-body="false" v-model="equipmentDialog" width="448px" class="equipment-dialog">
+			<div class="dialog_content">
+				<div>
+					<div>设备名称</div>
+					<div>{{ equipmentDetail.devName ? equipmentDetail.devName : "--" }}</div>
+				</div>
+				<div>
+					<div>设备编号</div>
+					<div>{{ equipmentDetail.devSn ? equipmentDetail.devSn : "--" }}</div>
+				</div>
+				<div>
+					<div>设备状态</div>
+					<div class="state-box" :class="{ 'state-box_offline': equipmentDetail.deviceState != 1 }">
+						{{ equipmentDetail.deviceState == 1 ? "在线" : "离线" }}
+					</div>
+				</div>
+				<div>
+					<div>SD卡容量</div>
+					<div>{{ equipmentDetail.sdCardCapacity ? equipmentDetail.sdCardCapacity : "--" }}</div>
+				</div>
+				<div>
+					<div>已用容量</div>
+					<div>{{ equipmentDetail.usedCapacity ? equipmentDetail.usedCapacity : "--" }}</div>
+				</div>
+				<div>
+					<div>剩余容量</div>
+					<div>{{ equipmentDetail.usedCapacity ? equipmentDetail.sdCardCapacity - equipmentDetail.usedCapacity : "--" }}</div>
+				</div>
+				<div>
+					<div>录像状态</div>
+					<div class="state-box">{{ equipmentDetail.recordingStatus ? equipmentDetail.recordingStatus : "--" }}</div>
+				</div>
+				<div>
+					<div>电量</div>
+					<div>{{ equipmentDetail.batteryLevel ? equipmentDetail.batteryLevel : "--" }}</div>
+				</div>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup>
+import { GlobalStore } from "@/stores";
+import { ref, onMounted, reactive, computed } from "vue";
+import Card from "@/components/card.vue";
+import HlsPlayer from "./components/HlsPlayer.vue";
+import { ElMessage } from "element-plus";
+import {
+	getWorkTicketCountWorkTicketApi,
+	getWorkTicketPageApi,
+	getWorkTicketTypeTreePageApi,
+	getWorkTicketQueryByIdApi,
+	getWorkTicketHistoryListApi,
+	getVideoItemInfoPoliceCameraItemApi,
+	getPoliceCameraItemPageApi
+} from "@/api/modules/workTicket";
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+dayjs.extend(duration);
+const BASEURL = import.meta.env.VITE_API_URL;
+const store = GlobalStore();
+const workTicketCountList = ref([
+	{
+		label: "施工中",
+		value: 0,
+		stateType: 2
+	},
+	{
+		label: "全部",
+		value: 0,
+		stateType: ""
+	},
+	{
+		label: "未开始",
+		value: 0,
+		stateType: 1
+	},
+	{
+		label: "暂停中",
+		value: 0,
+		stateType: 3
+	},
+	{
+		label: "已完工",
+		value: 0,
+		stateType: 4
+	}
+]);
+const getWorkTicketCountWorkTicket = () => {
+	getWorkTicketCountWorkTicketApi({
+		projectSn: store.sn
+	}).then(res => {
+		if (res.code == 200) {
+			// workTicketCountList.value = res.result;
+			workTicketCountList.value = [
+				{
+					label: "施工中",
+					value: res.result.ing,
+					stateType: 2
+				},
+				{
+					label: "全部",
+					stateType: "",
+					value: res.result.ing + res.result.done + res.result.pause + res.result.notStarted
+				},
+				{
+					label: "未开始",
+					value: res.result.notStarted,
+					stateType: 1
+				},
+				{
+					label: "暂停中",
+					value: res.result.pause,
+					stateType: 3
+				},
+				{
+					label: "已完工",
+					value: res.result.done,
+					stateType: 4
+				}
+			];
+		}
+	});
+};
+const workTicketInfo = reactive({
+	status: "",
+	typeId: "",
+	numberOrContent: "",
+	constructionTime: [],
+	pageNo: 0,
+	pageSize: 10,
+	total: 0
+});
+const workTicketList = ref([]);
+const onWorkTicketStateClick = row => {
+	workTicketInfo.status = row.stateType;
+	onWorkTicketQuery();
+};
+const onWorkTicketQuery = () => {
+	workTicketInfo.pageNo = 0;
+	workTicketList.value = [];
+	getWorkTicketPage();
+};
+const onWorkTicketRefresh = () => {
+	// workTicketInfo.status = "";
+	workTicketInfo.typeId = "";
+	workTicketInfo.numberOrContent = "";
+	workTicketInfo.constructionTime = [];
+	onWorkTicketQuery();
+};
+const getWorkTicketPage = () => {
+	const params = {
+		...workTicketInfo,
+		constructionTimeBegin_end: workTicketInfo.constructionTime.length > 0 ? workTicketInfo.constructionTime[0] : "",
+		constructionTimeEnd_start: workTicketInfo.constructionTime.length > 0 ? workTicketInfo.constructionTime[1] : ""
+	};
+	delete params.constructionTime;
+	getWorkTicketPageApi({
+		...params,
+		projectSn: store.sn
+	}).then(res => {
+		if (res.code == 200) {
+			workTicketList.value = workTicketList.value.concat(res.result.records);
+			if (workTicketInfo.pageNo == 1) {
+				console.log("进来了", Number(res.result.total));
+				workTicketInfo.total = Number(res.result.total);
+				if (workTicketList.value.length > 0) {
+					onViewDetail(workTicketList.value[0]);
+				}
+			}
+		}
+	});
+};
+const load = () => {
+	console.log("load", workTicketInfo.pageNo, workTicketInfo.pageSize, workTicketInfo.total);
+	if (workTicketInfo.pageNo > 0 && workTicketInfo.total == 0) return;
+	if (workTicketInfo.pageNo * workTicketInfo.pageSize > workTicketInfo.total) return ElMessage.warning("没有更多数据了！");
+	workTicketInfo.pageNo += 1;
+	getWorkTicketPage();
+};
+
+onMounted(() => {
+	getWorkTicketCountWorkTicket();
+	getWorkTicketTypeTreePage();
+});
+const viewAllShow = ref(false);
+const onViewAllClick = () => {
+	viewAllShow.value = !viewAllShow.value;
+    if(viewAllShow.value) {
+        policeCameraItemInfo.pageSize = 30;
+    } else {
+        policeCameraItemInfo.pageSize = 20;
+    }
+    initPoliceCameraItemList();
+};
+
+const equipmentDialog = ref(false);
+const equipmentDetail = ref({});
+// 查看设备详情
+const onEquipmentClick = row => {
+	equipmentDetail.value = row;
+	equipmentDialog.value = true;
+};
+
+const viewreplayInfo = ref({});
+const viewreplayDialog = ref(false);
+const audioRefs = ref(null);
+// 查看回放
+const onViewrePlayClick = row => {
+	console.log(111);
+	viewreplayInfo.value = {
+		...row,
+		is_play: false
+	};
+	viewreplayDialog.value = true;
+};
+// 播放音频
+const onAudioClick = () => {
+	if (viewreplayInfo.value.is_play) {
+		audioRefs.value.pause();
+		viewreplayInfo.value.is_play = false;
+	} else {
+		audioRefs.value.play();
+		viewreplayInfo.value.is_play = true;
+	}
+};
+const isShowDetail = ref(true);
+const workTicketDetail = ref({});
+// 用来判断数据是否为json格式
+const isJSON = str => {
+	try {
+		JSON.parse(str);
+	} catch (e) {
+		return false;
+	}
+	return true;
+};
+// 查看详情
+const onViewDetail = row => {
+	if (row.id == workTicketDetail.value.id) return;
+	workTicketDetail.value = row;
+	getWorkTicketQueryById();
+	getWorkTicketHistoryList();
+	initPoliceCameraItemList();
+};
+// 通过id查询作业票详情
+const getWorkTicketQueryById = () => {
+	getWorkTicketQueryByIdApi({
+		id: workTicketDetail.value.id,
+		projectSn: store.sn
+	}).then(res => {
+		if (res.code == 200) {
+			workTicketDetail.value = {
+				...res.result,
+				workTicketAttachment:
+					isJSON(res.result.workTicketAttachment) && JSON.parse(res.result.workTicketAttachment) instanceof Array
+						? JSON.parse(res.result.workTicketAttachment)
+						: [],
+				safetyRiskAnalysis:
+					isJSON(res.result.safetyRiskAnalysis) && JSON.parse(res.result.safetyRiskAnalysis) instanceof Array
+						? JSON.parse(res.result.safetyRiskAnalysis)
+						: [],
+				otherAttachment:
+					isJSON(res.result.otherAttachment) && JSON.parse(res.result.otherAttachment) instanceof Array
+						? JSON.parse(res.result.otherAttachment)
+						: []
+			};
+		}
+	});
+};
+const historySearchInfo = reactive({
+	beginTime: [],
+	value: ""
+});
+const workTicketHistoryList = ref([]);
+const onWorkTicketHistoryRefresh = () => {
+	historySearchInfo.value = "";
+	historySearchInfo.beginTime = [];
+	getWorkTicketHistoryList();
+};
+// 列表查询工作票历史记录信息
+const getWorkTicketHistoryList = () => {
+	const params = {
+		...historySearchInfo,
+		begin_end: historySearchInfo.beginTime.length > 0 ? historySearchInfo.beginTime[0] : "",
+		end_start: historySearchInfo.beginTime.length > 0 ? historySearchInfo.beginTime[1] : ""
+	};
+	delete params.beginTime;
+	getWorkTicketHistoryListApi({
+		...params,
+		workTicketId: workTicketDetail.value.id,
+		projectSn: store.sn
+	}).then(res => {
+		if (res.code == 200) {
+			const resultList = res.result.sort((a, b) => a.no - b.no);
+			workTicketHistoryList.value = resultList.map(item => {
+				return {
+					...item
+				};
+			});
+		}
+	});
+};
+
+const policeCameraItemInfo = reactive({
+	pageNo: 1,
+	pageSize: 20,
+	total: 0
+});
+const policeCameraItemList = ref([]);
+const initPoliceCameraItemList = () => {
+	policeCameraItemInfo.pageNo = 1;
+	policeCameraItemList.value = [];
+	getPoliceCameraItemPage();
+};
+// 分页列表查询执法记录仪设备列表信息
+const getPoliceCameraItemPage = () => {
+	const params = {
+		...policeCameraItemInfo
+	};
+	getPoliceCameraItemPageApi({
+		...params,
+		ticketId: viewAllShow.value ? '' : workTicketDetail.value.id,
+		projectSn: store.sn
+	}).then(async res => {
+		if (res.code == 200) {
+			const records = res.result.records;
+			await Promise.all(
+				records.map(async item => {
+					item.videoItemInfo = await getVideoItemInfoPoliceCameraItem(item);
+				})
+			);
+			console.log("policeCameraItemList", records);
+			policeCameraItemList.value = policeCameraItemList.value.concat(records);
+			if (policeCameraItemInfo.pageNo == 1) {
+				console.log("进来了", Number(res.result.total));
+				policeCameraItemInfo.total = Number(res.result.total);
+			}
+		}
+	});
+};
+const policeCameraItemLoad = () => {
+	console.log("load", policeCameraItemInfo.pageNo, policeCameraItemInfo.pageSize, policeCameraItemInfo.total);
+	if (policeCameraItemInfo.pageNo > 0 && policeCameraItemInfo.total == 0) return;
+	if (policeCameraItemInfo.pageNo * policeCameraItemInfo.pageSize > policeCameraItemInfo.total)
+		return ElMessage.warning("没有更多数据了！");
+	policeCameraItemInfo.pageNo += 1;
+	getPoliceCameraItemPage();
+};
+
+const getVideoItemInfoPoliceCameraItem = async row => {
+	const res = await getVideoItemInfoPoliceCameraItemApi({
+		itemId: row.itemId,
+		projectSn: store.sn
+	});
+	if (res.code != 200) return null;
+	return res.result.videoInfo;
+};
+
+const statusList = [
+	{
+		value: 1,
+		label: "未开始"
+	},
+	{
+		value: 2,
+		label: "施工中"
+	},
+	{
+		value: 3,
+		label: "暂停中"
+	},
+	{
+		value: 4,
+		label: "已完工"
+	}
+];
+const updateStatus = computed(() => {
+	return id => {
+		const find = statusList.find(item => item.value == id);
+		return find ? find.label : "--";
+	};
+});
+
+const workTicketTypeTreeList = ref([]);
+// 获取工作票类型
+const getWorkTicketTypeTreePage = () => {
+	let data = {
+		projectSn: store.sn,
+		pageNo: 1,
+		pageSize: -1
+	};
+	getWorkTicketTypeTreePageApi(data).then(res => {
+		if (res.code == 200) {
+			workTicketTypeTreeList.value = res.result.records;
+		}
+	});
+};
+const itemDiffUp = computed(() => {
+	return (begin, end) => {
+		// 定义两个日期
+		const date = dayjs();
+		const date1 = dayjs(begin);
+		const date2 = end ? dayjs(end) : date;
+		// 计算两个日期之间的差异（默认单位是毫秒）
+		const diffInMilliseconds = date2.diff(date1);
+		const durationObj = dayjs.duration(diffInMilliseconds);
+		const hour = durationObj.hours();
+		const minute = durationObj.minutes();
+		const second = durationObj.seconds();
+		return `${hour}h${minute}min${second}s`;
+	};
+});
+// 下载附件
+const downloadFileBtn = (url, name) => {
+	fetch(url)
+		.then(response => {
+			// 处理响应
+			if (!response.ok) {
+				throw new Error("下载失败");
+			}
+			return response.blob();
+		})
+		.then(blob => {
+			// 创建一个下载链接
+			const url = window.URL.createObjectURL(blob);
+			// 创建一个<a>元素
+			const link = document.createElement("a");
+			link.href = url;
+			link.download = name; // 指定下载文件的文件名
+			// 模拟点击下载链接
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+			// 释放URL对象
+			window.URL.revokeObjectURL(url);
+			// 处理导出的文件
+			// 这里可以使用blob对象来获取导出的文件内容或者将其保存到本地
+		})
+		.catch(error => {
+			// 处理错误
+			console.error(error);
+		});
+};
+</script>
+
+<style lang="scss" scoped>
+.headerNoise {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: space-between;
+
+	.headerNoise-left {
+		width: 400px;
+		height: 100%;
+
+		.content-box {
+			padding: 20px 10px;
+
+			.box-main {
+				width: 100%;
+				margin-top: 10px;
+				overflow-y: auto;
+				height: 550px;
+
+				.box-main_box:not(:first-child) {
+					margin-top: 20px;
+				}
+
+				.box-main_box {
+					width: calc(100% - 20px);
+					background: url("@/assets/images/cardImg.png") no-repeat;
+					background-size: 100% 100%;
+					padding: 10px;
+					position: relative;
+
+					.box-btn {
+						width: 53px;
+						height: 20px;
+						border-radius: 2px;
+						border: 1px solid #f1f1f1;
+						font-weight: 500;
+						font-size: 11px;
+						color: #ffffff;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						position: absolute;
+						right: 10px;
+						bottom: 10px;
+					}
+					.wks_active {
+						background-color: #727e93;
+					}
+
+					.sgz_active {
+						background-color: rgba(108, 184, 255, 0.5);
+					}
+
+					.ztz_active {
+						background-color: rgba(195, 129, 0, 0.5);
+					}
+
+					.ywg_acitve {
+						background-color: rgba(154, 245, 108, 0.5);
+					}
+
+					> div:not(:first-child) {
+						display: flex;
+						align-items: flex-start;
+						margin-top: 8px;
+						margin-left: 25px;
+						font-size: 14px;
+
+						> div:last-child {
+							color: #ffffff;
+							margin-left: 10px;
+							flex: 1;
+							word-break: break-all;
+						}
+
+						> div:first-child {
+							width: 56px;
+							color: #a1accb;
+						}
+					}
+
+					> div:first-child {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+
+						> div:last-child {
+							font-size: 14px;
+							color: #5181f6;
+							cursor: pointer;
+						}
+
+						> div:first-child {
+							display: flex;
+							align-items: center;
+
+							> div:nth-child(1) {
+								width: 15px;
+								height: 15px;
+								background: url("@/assets/images/workTicket/index-icon6.png") no-repeat;
+								background-size: 100% 100%;
+							}
+
+							> div:not(:first-child) {
+								margin-left: 10px;
+								font-weight: 800;
+								font-size: 15px;
+								color: #65d7f9;
+							}
+						}
+					}
+				}
+			}
+
+			.box-search {
+				display: flex;
+				flex-wrap: wrap;
+				margin-top: 20px;
+
+				.el-input {
+					margin-left: 10px;
+				}
+
+				.el-input,
+				.el-cascader {
+					width: 147px;
+					border-image: linear-gradient(180deg, rgba(148, 160, 180, 1), rgba(92, 111, 141, 1)) 1 1;
+				}
+
+				:deep(.el-date-editor) {
+					width: 36%;
+					margin-top: 10px;
+				}
+
+				:deep(.el-cascader),
+				:deep(.el-input),
+				:deep(.el-date-editor) {
+					height: 23px;
+					color: white;
+					background: linear-gradient(180deg, #112d59 0%, #112d59 100%);
+				}
+
+				:deep(.el-input__wrapper) {
+					background: linear-gradient(180deg, #112d59 0%, #112d59 100%);
+				}
+
+				.query {
+					margin-top: 10px;
+					margin-left: 20px;
+					width: 45px;
+					// height: 20px;
+					padding: 2px 12px;
+					background: url("@/assets/images/cardImg1.png") no-repeat;
+					background-size: 100% 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-size: 10px;
+					color: #ffffff;
+				}
+
+				.refresh {
+					margin-top: 10px;
+					margin-left: 8px;
+					width: 45px;
+					padding: 2px 12px;
+					// height: 20px;
+					background: url("@/assets/images/cardImg.png") no-repeat;
+					background-size: 100% 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-size: 10px;
+					color: rgba(255, 255, 255, 0.6);
+				}
+			}
+
+			.box-header {
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+
+				.box_active {
+					border: 1px solid #7effef;
+				}
+
+				> div:nth-child(1) {
+					width: 41%;
+					> div:last-child {
+						width: 38px;
+						height: 38px;
+						background: url("@/assets/images/workTicket/index-icon1.png") no-repeat;
+						background-size: 100% 100%;
+					}
+				}
+
+				> div:nth-child(2) {
+					width: 41%;
+					> div:last-child {
+						width: 38px;
+						height: 38px;
+						background: url("@/assets/images/workTicket/index-icon3.png") no-repeat;
+						background-size: 100% 100%;
+					}
+				}
+
+				> div:nth-child(3),
+				> div:nth-child(4),
+				> div:nth-child(5) {
+					margin-top: 20px;
+					width: 24%;
+					> div:last-child {
+						width: 30px;
+						height: 30px;
+					}
+				}
+
+				> div:nth-child(3) > div:last-child {
+					background: url("@/assets/images/workTicket/index-icon2.png") no-repeat;
+					background-size: 100% 100%;
+				}
+				> div:nth-child(4) > div:last-child {
+					background: url("@/assets/images/workTicket/index-icon4.png") no-repeat;
+					background-size: 100% 100%;
+				}
+				> div:nth-child(5) > div:last-child {
+					background: url("@/assets/images/workTicket/index-icon5.png") no-repeat;
+					background-size: 100% 100%;
+				}
+
+				> div {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 9px 10px 9px 16px;
+					border: 1px solid transparent;
+					background: linear-gradient(180deg, rgba(0, 170, 255, 0.3) 0%, rgba(0, 170, 255, 0) 100%);
+
+					> div:first-child {
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+
+						> div:last-child {
+							color: #7effef;
+							font-size: 20px;
+						}
+
+						> div:first-child {
+							font-size: 14px;
+							color: #ffffff;
+						}
+					}
+				}
+			}
+		}
+
+		:deep(.content) {
+			height: 94.5%;
+		}
+	}
+
+	.headerNoise-right {
+		margin-left: 20px;
+		width: 1460px;
+		height: 100%;
+
+		.h-card {
+			width: 100%;
+			height: 100%;
+			position: relative;
+
+			.title {
+				background: url("@/assets/images/titleImg.png") no-repeat;
+				background-size: 100% 100%;
+				display: flex;
+				align-items: center;
+				position: relative;
+
+				div {
+					font-size: 18px;
+					color: #ffffff;
+
+					img {
+						width: 110%;
+						margin-left: 30%;
+					}
+
+					i {
+						font-family: OPPOSansH;
+						font-style: normal;
+					}
+				}
+
+				.titltText {
+					margin: 0% 0% 6px 20px;
+					letter-spacing: 2px;
+					/* 设置文字间距为2像素 */
+				}
+
+				.right-icon {
+					display: flex;
+					align-items: center;
+					position: absolute;
+					right: 10px;
+					top: 10px;
+					cursor: pointer;
+					> div:last-child {
+						width: 26px;
+						height: 26px;
+						background: url("@/assets/images/workTicket/index-icon8.png") no-repeat;
+						background-size: 100% 100%;
+						margin-left: 10px;
+					}
+					> div:first-child {
+						font-weight: bold;
+						font-size: 15px;
+						color: #65d7f9;
+					}
+				}
+			}
+
+			.content-main {
+				margin-top: 1%;
+				height: 94%;
+				display: flex;
+				.content-left_active {
+					width: 451px !important;
+				}
+
+				.content-left {
+					width: 80px;
+					height: 100%;
+					background: url("@/assets/images/cardImg.png") no-repeat;
+					background-size: 100% 100%;
+					.content-left_box1 {
+						padding: 10px 20px 20px;
+						.box1 {
+							display: flex;
+							align-items: flex-start;
+							padding: 10px 0;
+							font-size: 14px;
+
+							> div:last-child {
+								color: #ffffff;
+								margin-left: 10px;
+								flex: 1;
+								word-break: break-all;
+							}
+
+							> div:first-child {
+								width: 70px;
+								color: #a2a4af;
+							}
+							.content-file_list {
+								display: flex;
+								flex-direction: column;
+								> div {
+									display: flex;
+									align-items: center;
+									justify-content: space-between;
+									height: 30px;
+									padding: 0 16px 0 20px;
+									background: rgba(39, 88, 192, 0.2);
+									> div:first-child {
+										font-size: 14px;
+										color: rgba(255, 255, 255, 0.6);
+										> div:last-child {
+											width: 170px;
+											overflow: hidden;
+											white-space: nowrap;
+											text-overflow: ellipsis;
+										}
+										> div:first-child {
+											width: 16px;
+											height: 16px;
+											background: url("@/assets/images/workTicket/index-icon9.png") no-repeat;
+											background-size: 100% 100%;
+										}
+									}
+									> div:last-child {
+										font-size: 14px;
+										color: #5181f6;
+										cursor: pointer;
+										> div:first-child {
+											width: 16px;
+											height: 16px;
+											background: url("@/assets/images/workTicket/index-icon10.png") no-repeat;
+											background-size: 100% 100%;
+										}
+									}
+									> div {
+										display: flex;
+										align-items: center;
+										> div:not(:first-child) {
+											margin-left: 6px;
+										}
+									}
+								}
+							}
+							.content-img {
+								display: flex;
+								flex-wrap: wrap;
+								> .el-image:nth-child(even) {
+									margin-left: 20px;
+								}
+								> .el-image {
+									width: 80px;
+									height: 80px;
+									border-radius: 4px;
+								}
+							}
+						}
+						.box1-header {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							padding: 10px 0;
+							.shrink-box {
+								width: 20px;
+								height: 20px;
+								background: url("@/assets/images/workTicket/index-icon7.png") no-repeat;
+								background-size: 100% 100%;
+								cursor: pointer;
+								transform: rotate(180deg);
+							}
+							> div:first-child {
+								font-weight: 800;
+								font-size: 16px;
+								color: #ffffff;
+							}
+						}
+					}
+					.content-left_box {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						height: 100%;
+						> div:last-child {
+							width: 20px;
+							height: 20px;
+							background: url("@/assets/images/workTicket/index-icon7.png") no-repeat;
+							background-size: 100% 100%;
+							cursor: pointer;
+						}
+						> div:first-child {
+							font-weight: 800;
+							font-size: 16px;
+							color: #ffffff;
+							writing-mode: vertical-rl;
+							cursor: pointer;
+						}
+					}
+				}
+
+				.content-right_active {
+					width: calc(100% - 451px) !important;
+				}
+
+				.content-right {
+					margin-left: 20px;
+					width: calc(100% - 100px);
+
+					.hls-video {
+						width: 100%;
+						height: 160px;
+					}
+					.hls-video_title {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						cursor: pointer;
+						padding: 8px 0;
+						> div:last-child {
+							width: 20px;
+							height: 20px;
+							background: url("@/assets/images/workTicket/index-icon7.png") no-repeat;
+							background-size: 100% 100%;
+						}
+						> div:first-child {
+							font-size: 14px;
+							color: #ffffff;
+						}
+					}
+                    .content-right_box-main {
+                        height: calc(100% - 32px - 182px - 34px - 12px);
+                    }
+					.content-right-top1 {
+						display: flex;
+						flex-wrap: wrap;
+
+						> div {
+							width: 31%;
+							height: 195px;
+							background: url("@/assets/images/cardImg.png") no-repeat;
+							background-size: 100% 100%;
+						}
+
+						> div:not(:nth-child(3n + 1)) {
+							margin-left: 10px;
+						}
+
+						> div:nth-child(n + 4) {
+							margin-top: 10px;
+						}
+					}
+					.content-right-top {
+						display: flex;
+						flex-wrap: wrap;
+
+						> div {
+							width: 24%;
+							height: 195px;
+							background: url("@/assets/images/cardImg.png") no-repeat;
+							background-size: 100% 100%;
+						}
+
+						> div:not(:nth-child(4n + 1)) {
+							margin-left: 10px;
+						}
+
+						> div:nth-child(n + 5) {
+							margin-top: 10px;
+						}
+					}
+
+					.content-right-bottom {
+						margin-top: 16px;
+
+						.right-bottom_main {
+							height: 182px;
+							padding: 12px 10px;
+							margin-top: 12px;
+							background: rgba(39, 88, 192, 0.1);
+							box-shadow: inset 0px 0px 2px 2px #051220;
+							border: 1px solid rgba(39, 88, 192, 0.6);
+							.el-table__expand-icon > .el-icon {
+								font-size: 14px;
+								color: #b2b8c2;
+							}
+							.time-diff {
+								padding: 3px 10px;
+								background: rgba(75, 141, 236, 0.1);
+								border: 1px solid #1560c5;
+								border-radius: 38px;
+								font-size: 11px;
+								color: #ffffff;
+							}
+							.viewreplay {
+								display: flex;
+								align-items: center;
+								justify-content: center;
+								font-size: 14px;
+								color: #65d7f9;
+								cursor: pointer;
+							}
+
+							:deep(.el-table) {
+								background-color: transparent;
+
+								th {
+									background-color: #003173;
+									border-color: transparent;
+									font-size: 16px;
+								}
+
+								tr,
+								td {
+									background-color: transparent;
+									border-color: transparent;
+									color: #ffffff;
+								}
+
+								.el-table__header-wrapper {
+									padding: 5px 0;
+									background: url("@/assets/images/cardImg.png") no-repeat;
+									background-size: 100% 100%;
+								}
+
+								.el-table__inner-wrapper::before {
+									background-color: transparent;
+								}
+							}
+						}
+
+						.right-bottom_header {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+
+							> div:last-child {
+								display: flex;
+								align-items: center;
+
+								.el-input {
+									width: 147px;
+								}
+
+								:deep(.el-date-editor) {
+									width: 260px;
+								}
+
+								.el-input,
+								:deep(.el-date-editor) {
+									height: 23px;
+									margin-left: 10px;
+									color: white;
+									background: linear-gradient(180deg, #112d59 0%, #112d59 100%);
+								}
+
+								:deep(.el-input__wrapper) {
+									background: linear-gradient(180deg, #112d59 0%, #112d59 100%);
+								}
+
+								.query {
+									margin-left: 20px;
+									width: 50px;
+									// height: 20px;
+									padding: 2px 12px;
+									background: url("@/assets/images/cardImg1.png") no-repeat;
+									background-size: 100% 100%;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									font-size: 10px;
+									color: #ffffff;
+								}
+
+								.refresh {
+									margin-left: 8px;
+									width: 50px;
+									padding: 2px 12px;
+									// height: 20px;
+									background: url("@/assets/images/cardImg.png") no-repeat;
+									background-size: 100% 100%;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									font-size: 10px;
+									color: rgba(255, 255, 255, 0.6);
+								}
+							}
+
+							> div:first-child {
+								font-weight: 800;
+								font-size: 16px;
+								color: #ffffff;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+	.headerNoise-right_active {
+		margin-left: 20px;
+		width: 100%;
+		.h-card .content-main .content-right_active {
+			width: 100% !important;
+		}
+		.content-right {
+			margin-left: 0 !important;
+			width: 100% !important;
+		}
+        .content-right_box-main1 {
+            height: 100% !important;
+        }
+		.content-right-top2 {
+			height: 100% !important;
+			display: flex;
+			flex-wrap: wrap;
+
+			> div {
+				width: 16% !important;
+				height: 195px;
+				background: url("@/assets/images/cardImg.png") no-repeat;
+				background-size: 100% 100%;
+			}
+
+			> div:not(:nth-child(6n + 1)) {
+				margin-left: 10px !important;
+			}
+
+			> div:nth-child(n + 7) {
+				margin-top: 10px !important;
+			}
+		}
+	}
+}
+:deep(.equipment-dialog) {
+	top: 50%;
+	transform: translateY(-50%);
+	margin-top: 0;
+	background: rgba(7, 28, 49, 0.9);
+	border: 1px solid #405e97;
+	.el-dialog__header {
+		padding: 15px 20px 5px;
+	}
+	.el-dialog__title {
+		font-style: italic;
+		color: white;
+	}
+	.el-dialog__body {
+		padding: 0 !important;
+	}
+	.dialog_content {
+		padding: 0 20px 5px;
+		display: flex;
+		flex-wrap: wrap;
+		> div {
+			width: 50%;
+			display: flex;
+			align-items: flex-start;
+			font-size: 14px;
+			padding: 10px 0;
+
+			> div:last-child {
+				color: #ffffff;
+				margin-left: 10px;
+				flex: 1;
+				word-break: break-all;
+			}
+
+			> div:first-child {
+				width: 70px;
+				color: #a2a4af;
+			}
+			.state-box {
+				padding: 4px 8px;
+				min-width: 40px;
+				color: white;
+				background-color: #88cf65;
+				border-radius: 4px;
+				text-align: center;
+				flex: 0 !important;
+			}
+			.state-box_offline {
+				background-color: #f7f7f7;
+				color: #272d45;
+			}
+		}
+	}
+}
+:deep(.hls-video-dialog) {
+	top: 50%;
+	transform: translateY(-50%);
+	margin-top: 0;
+	.el-dialog__header {
+		display: none;
+	}
+	.el-dialog__body {
+		padding: 0 !important;
+	}
+	.dialog_content {
+		padding: 0 !important;
+		height: initial;
+		overflow: hidden;
+	}
+	.audio-content {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 13px 22px 13px 13px;
+		position: relative;
+		overflow: hidden;
+		audio {
+			opacity: 0;
+			position: absolute;
+			left: 0;
+			//   right: -67%;
+		}
+
+		> div:last-child {
+			width: 26px;
+			height: 26px;
+			background-repeat: no-repeat;
+			background-size: 100% 100%;
+		}
+		.bodyworn_pause {
+			background-image: url("@/assets/images/workTicket/bodyworn_pause.png");
+		}
+		.bodyworn_play {
+			background-image: url("@/assets/images/workTicket/bodyworn_play.png");
+		}
+		> div:first-child {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			> div:last-child {
+				display: flex;
+				align-items: center;
+				font-size: 14px;
+				color: #808080;
+				margin-top: 20px;
+				> div:not(:first-child) {
+					margin-left: 19px;
+				}
+			}
+			> div:first-child {
+				display: flex;
+				align-items: center;
+				font-size: 14px;
+				color: #272d45;
+				> div:not(:first-child) {
+					margin-left: 10px;
+				}
+				> div:first-child {
+					width: 19px;
+					height: 18px;
+					background-image: url("@/assets/images/workTicket/bodyworn_audio.png");
+					background-repeat: no-repeat;
+					background-size: 100% 100%;
+				}
+				> div:last-child {
+					padding: 2px 10px;
+					border: 1px solid #f7af13;
+					font-size: 14px;
+					color: #f7af13;
+				}
+			}
+		}
+	}
+	.video-content {
+		// height: 260px;
+		padding-bottom: 20px;
+		.card-img {
+			width: 100%;
+			height: 180px;
+			img,
+			video,
+			.el-image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.card-flex {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 15px 15px 0;
+			color: #333333;
+			font-size: 15px;
+			p {
+				margin: 0;
+			}
+			.webkit-clamp_1 {
+				width: 50%;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+			.card-num {
+				font-size: 14px;
+				color: #808080;
+			}
+		}
+	}
+}
+.notoDta {
+	top: 50%;
+	width: 60%;
+	left: 50%;
+	position: absolute;
+	transform: translate(-50%, -50%);
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+	p {
+		color: #fff;
+		font-size: calc(100vw * 14 / 1920);
+		margin: -4% 0%;
+		text-align: center;
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/rainfallMonitoring/leftTop.vue b/src/views/sevenLargeScreen/rainfallMonitoring/leftTop.vue
index 6bbeb42..6dd7510 100644
--- a/src/views/sevenLargeScreen/rainfallMonitoring/leftTop.vue
+++ b/src/views/sevenLargeScreen/rainfallMonitoring/leftTop.vue
@@ -461,7 +461,7 @@ const getList = async () => {
 	console.log("获取环境监测数据", res);
 	if (res.result) {
 		analysisType.value = res.result.analysisType;
-		analysisData.value = res.result.analysisData;
+		analysisData.value = res.result.analysisData ? res.result.analysisData : "";
 	}
 	console.log("analysisType", analysisType.value);
 	console.log("analysisData", analysisData.value);