From ee529d5e6c79f2cc813c64d4680a6f578bec5652 Mon Sep 17 00:00:00 2001
From: Rain_ <904416525@qq.com>
Date: Sat, 6 Dec 2025 10:18:24 +0800
Subject: [PATCH] =?UTF-8?q?flx:=E4=BF=AE=E6=94=B9web=E6=8F=92=E4=BB=B6?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/iscPlayer.vue                  |    6 +-
 .../components/isc_plugin.vue                 |   14 +-
 .../homeworkControlProcess/index.vue          | 3924 +++++++++--------
 .../videoManagement/isc_plugin_h5.vue         |    6 +-
 4 files changed, 2041 insertions(+), 1909 deletions(-)

diff --git a/src/views/sevenLargeScreen/homeworkControlProcess/components/iscPlayer.vue b/src/views/sevenLargeScreen/homeworkControlProcess/components/iscPlayer.vue
index b675fa6..a3bd33e 100644
--- a/src/views/sevenLargeScreen/homeworkControlProcess/components/iscPlayer.vue
+++ b/src/views/sevenLargeScreen/homeworkControlProcess/components/iscPlayer.vue
@@ -481,7 +481,7 @@ const play = (row, index) => {
 					reloadBtn.textContent = "重新加载";
 					reloadBtn.addEventListener("click", (e) => {
 						e.stopPropagation();
-						onReload(row.id);
+						onReload(row.itemId);
 					});
 
 					// 将图片添加到按钮
@@ -515,9 +515,9 @@ const play = (row, index) => {
 const onReload = (id) => {
 	console.log("重新加载", id);
     // 这里添加重新加载的逻辑
-    const findItem = videoInfo.devH5List.find(item => item.id === id);
+    const findItem = videoInfo.devH5List.find(item => item.itemId === id);
     if (findItem) {
-      play(findItem, videoInfo.iWndIndex);
+		play(findItem, findItem.eIndex);
     }
 };
 const onTwoSubmit = num => {
diff --git a/src/views/sevenLargeScreen/homeworkControlProcess/components/isc_plugin.vue b/src/views/sevenLargeScreen/homeworkControlProcess/components/isc_plugin.vue
index 5ed7d78..652fe9f 100644
--- a/src/views/sevenLargeScreen/homeworkControlProcess/components/isc_plugin.vue
+++ b/src/views/sevenLargeScreen/homeworkControlProcess/components/isc_plugin.vue
@@ -108,13 +108,13 @@ onBeforeUnmount(() => {
 })
 
 // 监听器
-watch(() => props.devList, (newVal) => {
-  if (newVal.length > 0) {
-    newVal.forEach(element => {
-      play(element)
-    })
-  }
-})
+// watch(() => props.devList, (newVal) => {
+//   if (newVal.length > 0) {
+//     newVal.forEach(element => {
+//       play(element)
+//     })
+//   }
+// })
 
 watch(() => props.equipmentDialog, (newVal) => {
   if (videoPlugin.value) {
diff --git a/src/views/sevenLargeScreen/homeworkControlProcess/index.vue b/src/views/sevenLargeScreen/homeworkControlProcess/index.vue
index 625665b..55cc143 100644
--- a/src/views/sevenLargeScreen/homeworkControlProcess/index.vue
+++ b/src/views/sevenLargeScreen/homeworkControlProcess/index.vue
@@ -1,136 +1,157 @@
 <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" :infinite-scroll-immediate="false" 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">
-						<el-icon @click.stop="onRefresh"><Refresh /></el-icon>
-						<div v-if="viewAllShow">
-							<el-select
-								@change="initPoliceCameraItemList"
-								v-model="policeCameraItemInfo.deviceState"
-								clearable
-								placeholder="请选择"
-							>
-								<el-option v-for="(item, index) in deviceStateList" :key="index" :label="item.title" :value="item.id">
-								</el-option>
-							</el-select>
-						</div>
-						<div>{{ !viewAllShow ? "查看所有施工中的监控录像" : "返回首页" }}</div>
-						<div :class="{ goback: viewAllShow }"></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>
-							<el-scrollbar class="scrollbar-height">
-								<div class="box1">
-									<div>工作票类型</div>
-									<div>{{ workTicketDetail.typeName }}</div>
-								</div>
-								<!-- <div class="box1">
+  <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"
+              :infinite-scroll-immediate="false"
+              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">
+            <el-icon @click.stop="onRefresh"><Refresh /></el-icon>
+            <div v-if="viewAllShow">
+              <el-select
+                @change="initPoliceCameraItemList"
+                v-model="policeCameraItemInfo.deviceState"
+                clearable
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="(item, index) in deviceStateList"
+                  :key="index"
+                  :label="item.title"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div>{{ !viewAllShow ? "查看所有施工中的监控录像" : "返回首页" }}</div>
+            <div :class="{ goback: viewAllShow }"></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>
+              <el-scrollbar class="scrollbar-height">
+                <div class="box1">
+                  <div>工作票类型</div>
+                  <div>{{ workTicketDetail.typeName }}</div>
+                </div>
+                <!-- <div class="box1">
 									<div>风险状态</div>
 									<div
 										class="state-box"
@@ -141,293 +162,342 @@
 										{{ workTicketDetail.riskType == 2 ? "高风险" : "一般风险" }}
 									</div>
 								</div> -->
-								<div class="box1">
-									<div>工作票编号</div>
-									<div>{{ workTicketDetail.workTicketNumber }}</div>
-								</div>
-								<div class="box1">
-									<div>当前绑定监控</div>
-									<div>{{ itemListDevNameUp }}</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 class="box1">
+                  <div>工作票编号</div>
+                  <div>{{ workTicketDetail.workTicketNumber }}</div>
+                </div>
+                <div class="box1">
+                  <div>当前绑定监控</div>
+                  <div>{{ itemListDevNameUp }}</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.teamNames }}</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">
-										<template v-if="workTicketDetail.workTicketAttachment && workTicketDetail.workTicketAttachment.length > 0">
-											<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>
-										</template>
-									</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>
-							</el-scrollbar>
-						</div>
-					</div>
-					<div class="content-right" :class="{ 'content-right_active': isShowDetail }">
-						<el-scrollbar :class="viewAllShow ? 'content-right_box-main1' : 'content-right_box-main'">
-							<!-- v-infinite-scroll="initPoliceCameraItemList" -->
-							<div
-								style="height: 100%"
-								infinite-scroll-distance="1"
-								:infinite-scroll-immediate="false"
-								:class="{
-									'content-right-top2': viewAllShow,
-									'content-right-top1': isShowDetail && !viewAllShow,
-									'content-right-top': !isShowDetail && !viewAllShow
-								}"
-							>
-								<div v-for="item in policeCameraItemList" :key="item.itemId" :data-key="item.key">
-									<div class="hls-video">
-										<!-- <HlsPlayer :src="'https://gcalic.v.myalicdn.com/gc/wgw05_1/index.m3u8'" :autoplay="true" :controls="true" /> -->
-										<!-- <HlsPlayer
+                <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">
+                    <template
+                      v-if="
+                        workTicketDetail.workTicketAttachment &&
+                        workTicketDetail.workTicketAttachment.length > 0
+                      "
+                    >
+                      <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>
+                    </template>
+                  </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>
+              </el-scrollbar>
+            </div>
+          </div>
+          <div class="content-right" :class="{ 'content-right_active': isShowDetail }">
+            <el-scrollbar
+              :class="viewAllShow ? 'content-right_box-main1' : 'content-right_box-main'"
+            >
+              <!-- v-infinite-scroll="initPoliceCameraItemList" -->
+              <div
+                style="height: 100%"
+                infinite-scroll-distance="1"
+                :infinite-scroll-immediate="false"
+                :class="{
+                  'content-right-top2': viewAllShow,
+                  'content-right-top1': isShowDetail && !viewAllShow,
+                  'content-right-top': !isShowDetail && !viewAllShow,
+                }"
+              >
+                <div
+                  v-for="item in policeCameraItemList"
+                  :key="item.itemId"
+                  :data-key="item.key"
+                >
+                  <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 ? item.videoItemInfo.url : ''"
 											:autoplay="true"
 											:controls="true"
 										/> -->
-										<IscPlayer
-											v-if="videoConfig.enableNotPlugin == 1"
-											:devList="[
-												{
-													...item,
-													status: workTicketDetail.status
-												}
-											]"
-											:key="'player-' + item.itemId"
-											:playerId="'player-' + item.itemId"
-										/>
-										<div v-else class="videoOverview" :id="`videoOverview${item.itemId}`">
-											<IscPlugin
-												:devList="[item]"
-												:itemId="item.itemId"
-												:type="'1x1'"
-												:equipmentDialog="equipmentDialog"
-											></IscPlugin>
-										</div>
-									</div>
-									<div class="hls-video_title" @click="onEquipmentClick(item)">
-										<div>设备详情</div>
-										<div></div>
-									</div>
-								</div>
-							</div>
-						</el-scrollbar>
-						<el-pagination
-							class="pagerBox1"
-							background
-							:page-size="6"
-							style="justify-content: center"
-							@current-change="onCurrentChange"
-							layout="prev, pager, next"
-							:total="Number(policeCameraItemInfo.total)"
-						/>
-						<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="941px"
-			class="equipment-dialog"
-		>
-			<div class="dialog_content">
-				<div class="content-left">
-					<div>
-						<div>设备名称</div>
-						<div>
-							{{ equipmentDetail.devName ? equipmentDetail.devName : "--" }}
-						</div>
-					</div>
-					<div>
-						<div>设备编号</div>
-						<div>{{ equipmentDetail.devSn ? equipmentDetail.devSn : "--" }}</div>
-					</div>
-					<div>
-						<div>所属项目</div>
-						<div>{{ projectSnName }}</div>
-					</div>
-					<div>
-						<div>设备状态</div>
-						<div class="state-box" :class="{ 'state-box_offline': equipmentDetail.deviceState != 1 }">
-							{{ equipmentDetail.deviceState == 1 ? "在线" : "离线" }}
-						</div>
-					</div>
-					<!-- <div>
+                    <IscPlayer
+                      v-if="videoConfig.enableNotPlugin == 1"
+                      :devList="[
+                        {
+                          ...item,
+                          status: workTicketDetail.status,
+                        },
+                      ]"
+                      :key="'player-' + item.itemId"
+                      :playerId="'player-' + item.itemId"
+                    />
+                    <div v-else class="videoOverview" :id="`videoOverview${item.itemId}`">
+                      <IscPlugin
+                        :devList="[item]"
+                        :itemId="item.itemId"
+                        :type="'1x1'"
+                        :equipmentDialog="equipmentDialog"
+                      ></IscPlugin>
+                    </div>
+                  </div>
+                  <div class="hls-video_title" @click="onEquipmentClick(item)">
+                    <div>设备详情</div>
+                    <div></div>
+                  </div>
+                </div>
+              </div>
+            </el-scrollbar>
+            <el-pagination
+              class="pagerBox1"
+              background
+              :page-size="6"
+              style="justify-content: center"
+              @current-change="onCurrentChange"
+              layout="prev, pager, next"
+              :total="Number(policeCameraItemInfo.total)"
+            />
+            <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="941px"
+      class="equipment-dialog"
+    >
+      <div class="dialog_content">
+        <div class="content-left">
+          <div>
+            <div>设备名称</div>
+            <div>
+              {{ equipmentDetail.devName ? equipmentDetail.devName : "--" }}
+            </div>
+          </div>
+          <div>
+            <div>设备编号</div>
+            <div>{{ equipmentDetail.devSn ? equipmentDetail.devSn : "--" }}</div>
+          </div>
+          <div>
+            <div>所属项目</div>
+            <div>{{ projectSnName }}</div>
+          </div>
+          <div>
+            <div>设备状态</div>
+            <div
+              class="state-box"
+              :class="{ 'state-box_offline': equipmentDetail.deviceState != 1 }"
+            >
+              {{ equipmentDetail.deviceState == 1 ? "在线" : "离线" }}
+            </div>
+          </div>
+          <!-- <div>
 						<div>风险状态</div>
 						<div
 							class="state-box"
@@ -438,97 +508,114 @@
 							{{ workTicketDetail.riskType == 2 ? "高风险" : "一般风险" }}
 						</div>
 					</div> -->
-					<div>
-						<div>工作票类型</div>
-						<div>
-							{{ workTicketDetail.typeName ? workTicketDetail.typeName : "--" }}
-						</div>
-					</div>
-					<div>
-						<div>工作票编号</div>
-						<div>
-							{{ workTicketDetail.workTicketNumber ? workTicketDetail.workTicketNumber : "--" }}
-						</div>
-					</div>
-					<div>
-						<div>施工区域</div>
-						<div>
-							{{ workTicketDetail.constructionAreaNames ? workTicketDetail.constructionAreaNames : "--" }}
-						</div>
-					</div>
-					<div>
-						<div>申请单位</div>
-						<div>
-							{{ workTicketDetail.applicantNames ? workTicketDetail.applicantNames : "--" }}
-						</div>
-					</div>
-					<div>
-						<div>作业人员</div>
-						<div>
-							{{ workTicketDetail.operator ? workTicketDetail.operator : "--" }}
-						</div>
-					</div>
-					<div>
-						<div>施工时间</div>
-						<div>
-							{{ workTicketDetail.constructionTimeBegin }} -
-							{{ workTicketDetail.constructionTimeEnd }}
-						</div>
-					</div>
-					<div>
-						<div>申请时间</div>
-						<div>
-							{{ workTicketDetail.applicationTime ? workTicketDetail.applicationTime : "--" }}
-						</div>
-					</div>
-					<div>
-						<div>安全措施</div>
-						<div>
-							{{ workTicketDetail.safetyMeasure ? workTicketDetail.safetyMeasure : "--" }}
-						</div>
-					</div>
-					<div>
-						<div>作业内容</div>
-						<div>
-							{{ workTicketDetail.workContent ? workTicketDetail.workContent : "--" }}
-						</div>
-					</div>
-				</div>
-				<div class="content-right">
-					<div class="content-right_header">附件内容</div>
-					<div class="box1">
-						<div>工作票附件</div>
-						<div class="content-img">
-							<template v-if="workTicketDetail.workTicketAttachment && workTicketDetail.workTicketAttachment.length > 0">
-								<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>
-							</template>
-						</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>
-		</el-dialog>
-	</div>
+          <div>
+            <div>工作票类型</div>
+            <div>
+              {{ workTicketDetail.typeName ? workTicketDetail.typeName : "--" }}
+            </div>
+          </div>
+          <div>
+            <div>工作票编号</div>
+            <div>
+              {{
+                workTicketDetail.workTicketNumber
+                  ? workTicketDetail.workTicketNumber
+                  : "--"
+              }}
+            </div>
+          </div>
+          <div>
+            <div>施工区域</div>
+            <div>
+              {{
+                workTicketDetail.constructionAreaNames
+                  ? workTicketDetail.constructionAreaNames
+                  : "--"
+              }}
+            </div>
+          </div>
+          <div>
+            <div>申请单位</div>
+            <div>
+              {{
+                workTicketDetail.applicantNames ? workTicketDetail.applicantNames : "--"
+              }}
+            </div>
+          </div>
+          <div>
+            <div>作业人员</div>
+            <div>
+              {{ workTicketDetail.operator ? workTicketDetail.operator : "--" }}
+            </div>
+          </div>
+          <div>
+            <div>施工时间</div>
+            <div>
+              {{ workTicketDetail.constructionTimeBegin }} -
+              {{ workTicketDetail.constructionTimeEnd }}
+            </div>
+          </div>
+          <div>
+            <div>申请时间</div>
+            <div>
+              {{
+                workTicketDetail.applicationTime ? workTicketDetail.applicationTime : "--"
+              }}
+            </div>
+          </div>
+          <div>
+            <div>安全措施</div>
+            <div>
+              {{ workTicketDetail.safetyMeasure ? workTicketDetail.safetyMeasure : "--" }}
+            </div>
+          </div>
+          <div>
+            <div>作业内容</div>
+            <div>
+              {{ workTicketDetail.workContent ? workTicketDetail.workContent : "--" }}
+            </div>
+          </div>
+        </div>
+        <div class="content-right">
+          <div class="content-right_header">附件内容</div>
+          <div class="box1">
+            <div>工作票附件</div>
+            <div class="content-img">
+              <template
+                v-if="
+                  workTicketDetail.workTicketAttachment &&
+                  workTicketDetail.workTicketAttachment.length > 0
+                "
+              >
+                <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>
+              </template>
+            </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>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
@@ -540,14 +627,14 @@ import IscPlayer from "./components/iscPlayer.vue";
 import IscPlugin from "./components/isc_plugin.vue";
 import { ElMessage } from "element-plus";
 import {
-	getWorkTicketCountWorkTicketApi,
-	getWorkTicketPageApi,
-	getWorkTicketTypeTreePageApi,
-	getWorkTicketQueryByIdApi,
-	getWorkTicketHistoryListApi,
-	getVideoItemInfoPoliceCameraItemApi,
-	getPoliceCameraItemPageApi,
-	selectAllProjectInfoList
+  getWorkTicketCountWorkTicketApi,
+  getWorkTicketPageApi,
+  getWorkTicketTypeTreePageApi,
+  getWorkTicketQueryByIdApi,
+  getWorkTicketHistoryListApi,
+  getVideoItemInfoPoliceCameraItemApi,
+  getPoliceCameraItemPageApi,
+  selectAllProjectInfoList,
 } from "@/api/modules/workTicket";
 import { getUseProjectVideoConfigApi } from "@/api/modules/tower";
 import dayjs from "dayjs";
@@ -556,1504 +643,1549 @@ 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
-	}
+  {
+    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 = showLoading => {
-	getWorkTicketCountWorkTicketApi(
-		{
-			projectSn: store.sn
-		},
-		showLoading
-	).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 getWorkTicketCountWorkTicket = (showLoading) => {
+  getWorkTicketCountWorkTicketApi(
+    {
+      projectSn: store.sn,
+    },
+    showLoading
+  ).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: 2,
-	typeId: "",
-	numberOrContent: "",
-	constructionTime: [],
-	pageNo: 1,
-	pageSize: 10,
-	total: 0
+  status: 2,
+  typeId: "",
+  numberOrContent: "",
+  constructionTime: [],
+  pageNo: 1,
+  pageSize: 10,
+  total: 0,
 });
 const workTicketList = ref([]);
-const onWorkTicketStateClick = row => {
-	workTicketInfo.status = row.stateType;
-	onWorkTicketQuery();
+const onWorkTicketStateClick = (row) => {
+  workTicketInfo.status = row.stateType;
+  onWorkTicketQuery();
 };
 const onWorkTicketQuery = () => {
-	workTicketInfo.pageNo = 1;
-	workTicketList.value = [];
-	getWorkTicketPage();
+  workTicketInfo.pageNo = 1;
+  workTicketList.value = [];
+  getWorkTicketPage();
 };
 const onWorkTicketRefresh = () => {
-	// workTicketInfo.status = "";
-	workTicketInfo.typeId = "";
-	workTicketInfo.numberOrContent = "";
-	workTicketInfo.constructionTime = [];
-	onWorkTicketQuery();
+  // workTicketInfo.status = "";
+  workTicketInfo.typeId = "";
+  workTicketInfo.numberOrContent = "";
+  workTicketInfo.constructionTime = [];
+  onWorkTicketQuery();
 };
 const getWorkTicketPage = () => {
-	const params = {
-		...workTicketInfo,
-		applicationTime_begin: workTicketInfo.constructionTime.length > 0 ? workTicketInfo.constructionTime[0] : "",
-		applicationTime_end: 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], true);
-				}
-			}
-		}
-	});
+  const params = {
+    ...workTicketInfo,
+    applicationTime_begin:
+      workTicketInfo.constructionTime.length > 0
+        ? workTicketInfo.constructionTime[0]
+        : "",
+    applicationTime_end:
+      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], true);
+        }
+      }
+    }
+  });
 };
 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();
+  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(() => {
-	getWorkTicketPage();
-	getWorkTicketCountWorkTicket(false);
-	// 定时三十秒刷新
-	// setInterval(() => {
-	// 	// getWorkTicketCountWorkTicket(true);
-	// }, 30000);
-	getWorkTicketTypeTreePage();
-	getProjectVideoConfigList();
-	getSelectAllProjectInfoList();
+  getWorkTicketPage();
+  getWorkTicketCountWorkTicket(false);
+  // 定时三十秒刷新
+  // setInterval(() => {
+  // 	// getWorkTicketCountWorkTicket(true);
+  // }, 30000);
+  getWorkTicketTypeTreePage();
+  getProjectVideoConfigList();
+  getSelectAllProjectInfoList();
 });
 const viewAllShow = ref(false);
 const onViewAllClick = () => {
-	viewAllShow.value = !viewAllShow.value;
-	if (viewAllShow.value) {
-		policeCameraItemInfo.deviceState = 1;
-		policeCameraItemInfo.pageSize = policeCameraItemInfo.pageSize;
-	} else {
-		policeCameraItemInfo.deviceState = "";
-		policeCameraItemInfo.pageSize = policeCameraItemInfo.pageSize;
-	}
-	initPoliceCameraItemList();
+  viewAllShow.value = !viewAllShow.value;
+  if (viewAllShow.value) {
+    policeCameraItemInfo.deviceState = 1;
+    policeCameraItemInfo.pageSize = policeCameraItemInfo.pageSize;
+  } else {
+    policeCameraItemInfo.deviceState = "";
+    policeCameraItemInfo.pageSize = policeCameraItemInfo.pageSize;
+  }
+  initPoliceCameraItemList();
 };
 
 const equipmentDialog = ref(false);
 const equipmentDetail = ref({});
 // 查看设备详情
-const onEquipmentClick = row => {
-	equipmentDetail.value = row;
-	getWorkTicketQueryById(equipmentDetail.value.workTicketId);
-	equipmentDialog.value = true;
+const onEquipmentClick = (row) => {
+  equipmentDetail.value = row;
+  getWorkTicketQueryById(equipmentDetail.value.workTicketId);
+  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 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;
-	}
+  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({
-	workTicketAttachment: []
+  workTicketAttachment: [],
 });
 // 用来判断数据是否为json格式
-const isJSON = str => {
-	try {
-		JSON.parse(str);
-	} catch (e) {
-		return false;
-	}
-	return true;
+const isJSON = (str) => {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
 };
 const timeInterval = ref(null);
 // 查看详情
 const onViewDetail = (row, flag) => {
-	if (row.id == workTicketDetail.value.id && flag != true) return;
-	workTicketDetail.value = row;
-	getWorkTicketQueryById(workTicketDetail.value.id);
-	getWorkTicketHistoryList();
-	initPoliceCameraItemList();
-	if (timeInterval.value) {
-		clearInterval(timeInterval.value);
-	}
-	timeInterval.value = setInterval(() => {
-		initPoliceCameraItemList();
-	}, 1000 * 60 * 30);
+  if (row.id == workTicketDetail.value.id && flag != true) return;
+  workTicketDetail.value = row;
+  getWorkTicketQueryById(workTicketDetail.value.id);
+  getWorkTicketHistoryList();
+  initPoliceCameraItemList();
+  if (timeInterval.value) {
+    clearInterval(timeInterval.value);
+  }
+  timeInterval.value = setInterval(() => {
+    initPoliceCameraItemList();
+  }, 1000 * 60 * 30);
 };
 // 通过id查询作业票详情
 const getWorkTicketQueryById = (id) => {
-	getWorkTicketQueryByIdApi({
-		id: 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)
-						: []
-			};
-		}
-	});
+  getWorkTicketQueryByIdApi({
+    id: 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: ""
+  beginTime: [],
+  value: "",
 });
 const workTicketHistoryList = ref([]);
 const onWorkTicketHistoryRefresh = () => {
-	historySearchInfo.value = "";
-	historySearchInfo.beginTime = [];
-	getWorkTicketHistoryList();
+  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 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: 6,
-	total: 0,
-	deviceState: ""
+  pageNo: 1,
+  pageSize: 6,
+  total: 0,
+  deviceState: "",
 });
 const deviceStateList = [
-	{
-		id: "",
-		title: "全部设备"
-	},
-	{
-		id: 1,
-		title: "施工中在线"
-	},
-	{
-		id: 2,
-		title: "施工中离线"
-	}
+  {
+    id: "",
+    title: "全部设备",
+  },
+  {
+    id: 1,
+    title: "施工中在线",
+  },
+  {
+    id: 2,
+    title: "施工中离线",
+  },
 ];
 const policeCameraItemList = ref([]);
 const initPoliceCameraItemList = () => {
-	policeCameraItemInfo.pageNo = 1;
-	policeCameraItemList.value = [];
-	getPoliceCameraItemPage();
+  policeCameraItemInfo.pageNo = 1;
+  policeCameraItemList.value = [];
+  getPoliceCameraItemPage();
 };
 
-const onCurrentChange = val => {
-	policeCameraItemInfo.pageNo = val;
-	policeCameraItemList.value = [];
-	getPoliceCameraItemPage();
+const onCurrentChange = (val) => {
+  policeCameraItemInfo.pageNo = val;
+  policeCameraItemList.value = [];
+  getPoliceCameraItemPage();
 };
 // 分页列表查询执法记录仪设备列表信息
 const getPoliceCameraItemPage = () => {
-	const params = {
-		...policeCameraItemInfo
-	};
-	getPoliceCameraItemPageApi({
-		...params,
-		ticketId: viewAllShow.value ? "" : workTicketDetail.value.id,
-		// deviceState: viewAllShow.value ? 1 : "",
-		bindTicket: viewAllShow.value ? 1 : "",
-		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 params = {
+    ...policeCameraItemInfo,
+  };
+  getPoliceCameraItemPageApi({
+    ...params,
+    ticketId: viewAllShow.value ? "" : workTicketDetail.value.id,
+    // deviceState: viewAllShow.value ? 1 : "",
+    bindTicket: viewAllShow.value ? 1 : "",
+    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();
+  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 getVideoItemInfoPoliceCameraItem = async (row) => {
+  const res = await getVideoItemInfoPoliceCameraItemApi({
+    itemId: row.itemId,
+    projectSn: store.sn,
+  });
+  if (res.code != 200) return null;
+  return res.result.videoInfo;
 };
 const videoConfig = ref({
-	enableNotPlugin: 1
+  enableNotPlugin: 1,
 });
 //查询项目各类型的视频配置信息
 const getProjectVideoConfigList = () => {
-	getUseProjectVideoConfigApi({
-		projectSn: store.sn
-	}).then(res => {
-		if (res.code == 200) {
-			if (res.result) {
-				videoConfig.value = res.result;
-			} else {
-				videoConfig.enableNotPlugin = 1;
-			}
-		}
-	});
+  getUseProjectVideoConfigApi({
+    projectSn: store.sn,
+  }).then((res) => {
+    if (res.code == 200) {
+      if (res.result) {
+        videoConfig.value = res.result;
+      } else {
+        videoConfig.enableNotPlugin = 1;
+      }
+    }
+  });
 };
 const onRefresh = () => {
-	if (!viewAllShow.value) {
-		onWorkTicketQuery();
-	} else {
-		policeCameraItemList.value = [];
-		getPoliceCameraItemPage();
-	}
+  if (!viewAllShow.value) {
+    onWorkTicketQuery();
+  } else {
+    policeCameraItemList.value = [];
+    getPoliceCameraItemPage();
+  }
 };
 
 const statusList = [
-	{
-		value: 1,
-		label: "未开始"
-	},
-	{
-		value: 2,
-		label: "施工中"
-	},
-	{
-		value: 3,
-		label: "暂停中"
-	},
-	{
-		value: 4,
-		label: "已完工"
-	}
+  {
+    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 : "--";
-	};
+  return (id) => {
+    const find = statusList.find((item) => item.value == id);
+    return find ? find.label : "--";
+  };
 });
 const itemListDevNameUp = computed(() => {
-	return workTicketDetail.value.itemList ? workTicketDetail.value.itemList.map(item => item.devName).join("、") : "";
+  return workTicketDetail.value.itemList
+    ? workTicketDetail.value.itemList.map((item) => item.devName).join("、")
+    : "";
 });
 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;
-		}
-	});
+  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`;
-	};
+  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);
-		});
+  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);
+    });
 };
 const projectList = ref([]);
 const getSelectAllProjectInfoList = () => {
-	selectAllProjectInfoList({
-		sn: store.sn
-	}).then(res => {
-		if (res.code == 200) {
-			projectList.value = [
-				{
-					projectName: "全部项目",
-					projectSn: store.sn
-				},
-				...res.result
-			];
-		}
-	});
+  selectAllProjectInfoList({
+    sn: store.sn,
+  }).then((res) => {
+    if (res.code == 200) {
+      projectList.value = [
+        {
+          projectName: "全部项目",
+          projectSn: store.sn,
+        },
+        ...res.result,
+      ];
+    }
+  });
 };
 const projectSnName = computed(() => {
-	const find = projectList.value.find(item => item.projectSn == workTicketDetail.value.projectSn);
-	return find ? find.projectName : "";
+  const find = projectList.value.find(
+    (item) => item.projectSn == workTicketDetail.value.projectSn
+  );
+  return find ? find.projectName : "";
 });
 </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;
-			height: calc(100% - 40px);
-			width: calc(100% - 20px);
-			.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;
-					.el-range-input {
-						color: white;
-						// background-color: transparent;
-					}
-				}
-
-				: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/cardImg2.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;
-					:deep(.el-input__wrapper) {
-						background-color: transparent;
-					}
-					:deep(.el-input__inner) {
-						height: 23px;
-						line-height: 23px;
-						background-color: transparent;
-						color: white;
-					}
-					> div:last-child {
-						width: 26px;
-						height: 26px;
-						background-image: url("@/assets/images/workTicket/index-icon8.png");
-						background-repeat: no-repeat;
-						background-size: 100% 100%;
-					}
-					.goback {
-						background-image: url("@/assets/images/workTicket/goback.png") !important;
-					}
-					> div:not(:first-child) {
-						margin-left: 10px;
-					}
-					> div:nth-child(2) {
-						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;
-						// overflow: auto;
-						overflow: hidden;
-						height: calc(100% - 30px);
-						.scrollbar-height {
-							height: calc(100% - 30px);
-						}
-						.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(n + 4) {
-									margin-top: 20px;
-								}
-								> .el-image:not(:nth-child(3n + 1)) {
-									margin-left: 20px;
-								}
-								> .el-image {
-									width: 80px;
-									height: 80px;
-									border-radius: 4px;
-								}
-							}
-							.state-box {
-								padding: 4px 8px;
-								min-width: 40px;
-								color: white;
-								background-color: #88cf65;
-								border-radius: 4px;
-								text-align: center;
-								flex: initial !important;
-							}
-							.gfx_active {
-								background-color: #ff0000;
-								color: #ffffff;
-							}
-						}
-						.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;
-							letter-spacing: 6px;
-						}
-					}
-				}
-
-				.content-right_active {
-					width: calc(100% - 451px) !important;
-				}
-
-				.content-right {
-					margin-left: 20px;
-					width: calc(100% - 100px);
-
-					.hls-video {
-						width: 100%;
-						height: 160px;
-					}
-					.videoOverview {
-						width: 100%;
-						height: 100%;
-					}
-					.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 - 32px);
-					}
-					.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/cardImg2.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: calc(100% - 32px) !important;
-		}
-		.content-right-top2 {
-			height: 100% !important;
-			display: flex;
-			flex-wrap: wrap;
-			align-content: flex-start;
-
-			> div {
-				width: 32% !important;
-				height: 350px;
-				background: url("@/assets/images/cardImg.png") no-repeat;
-				background-size: 100% 100%;
-				margin: 0 !important;
-				.hls-video {
-					height: 310px !important;
-				}
-				:deep(.sub-wnd) {
-					width: 100% !important;
-				}
-			}
-
-			> div:not(:nth-child(3n + 1)) {
-				margin-left: 20px !important;
-			}
-
-			> div:nth-child(n + 4) {
-				margin-top: 20px !important;
-			}
-		}
-	}
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  .headerNoise-left {
+    width: 400px;
+    height: 100%;
+
+    .content-box {
+      padding: 20px 10px;
+      height: calc(100% - 40px);
+      width: calc(100% - 20px);
+      .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;
+          .el-range-input {
+            color: white;
+            // background-color: transparent;
+          }
+        }
+
+        :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/cardImg2.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;
+          :deep(.el-input__wrapper) {
+            background-color: transparent;
+          }
+          :deep(.el-input__inner) {
+            height: 23px;
+            line-height: 23px;
+            background-color: transparent;
+            color: white;
+          }
+          > div:last-child {
+            width: 26px;
+            height: 26px;
+            background-image: url("@/assets/images/workTicket/index-icon8.png");
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+          }
+          .goback {
+            background-image: url("@/assets/images/workTicket/goback.png") !important;
+          }
+          > div:not(:first-child) {
+            margin-left: 10px;
+          }
+          > div:nth-child(2) {
+            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;
+            // overflow: auto;
+            overflow: hidden;
+            height: calc(100% - 30px);
+            .scrollbar-height {
+              height: calc(100% - 30px);
+            }
+            .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(n + 4) {
+                  margin-top: 20px;
+                }
+                > .el-image:not(:nth-child(3n + 1)) {
+                  margin-left: 20px;
+                }
+                > .el-image {
+                  width: 80px;
+                  height: 80px;
+                  border-radius: 4px;
+                }
+              }
+              .state-box {
+                padding: 4px 8px;
+                min-width: 40px;
+                color: white;
+                background-color: #88cf65;
+                border-radius: 4px;
+                text-align: center;
+                flex: initial !important;
+              }
+              .gfx_active {
+                background-color: #ff0000;
+                color: #ffffff;
+              }
+            }
+            .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;
+              letter-spacing: 6px;
+            }
+          }
+        }
+
+        .content-right_active {
+          width: calc(100% - 451px) !important;
+        }
+
+        .content-right {
+          margin-left: 20px;
+          width: calc(100% - 100px);
+
+          .hls-video {
+            width: 100%;
+            height: 160px;
+          }
+          .videoOverview {
+            width: 100%;
+            height: 100%;
+          }
+          .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 - 32px);
+          }
+          .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/cardImg2.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: calc(100% - 32px) !important;
+    }
+    .content-right-top2 {
+      height: 100% !important;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+
+      > div {
+        width: 32% !important;
+        height: 350px;
+        background: url("@/assets/images/cardImg.png") no-repeat;
+        background-size: 100% 100%;
+        margin: 0 !important;
+        .hls-video {
+          height: 310px !important;
+        }
+        :deep(.sub-wnd) {
+          width: 100% !important;
+        }
+      }
+
+      > div:not(:nth-child(3n + 1)) {
+        margin-left: 20px !important;
+      }
+
+      > div:nth-child(n + 4) {
+        margin-top: 20px !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;
-		justify-content: space-between;
-		// flex-wrap: wrap;
-		.content-right {
-			width: 48%;
-			.content-right_header {
-				font-weight: 800;
-				font-size: 16px;
-				color: #ffffff;
-			}
-			.box1 {
-				display: flex;
-				align-items: flex-start;
-				padding: 10px 0;
-				font-size: 14px;
+  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;
+    justify-content: space-between;
+	overflow-y: auto;
+	max-height: 85vh;
+    // flex-wrap: wrap;
+    .content-right {
+      width: 48%;
+      .content-right_header {
+        font-weight: 800;
+        font-size: 16px;
+        color: #ffffff;
+      }
+      .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: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/companyBigScreen/terminalOperation/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/companyBigScreen/terminalOperation/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(n + 4) {
-						margin-top: 20px;
-					}
-					> .el-image:not(:nth-child(3n + 1)) {
-						margin-left: 20px;
-					}
-					> .el-image {
-						width: 80px;
-						height: 80px;
-						border-radius: 4px;
-					}
-				}
-			}
-		}
-		.content-left {
-			width: 49%;
-			> div {
-				display: flex;
-				align-items: flex-start;
-				font-size: 14px;
-				padding: 10px 0;
+        > 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/companyBigScreen/terminalOperation/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/companyBigScreen/terminalOperation/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(n + 4) {
+            margin-top: 20px;
+          }
+          > .el-image:not(:nth-child(3n + 1)) {
+            margin-left: 20px;
+          }
+          > .el-image {
+            width: 80px;
+            height: 80px;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+    .content-left {
+      width: 49%;
+      > div {
+        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: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: initial !important;
-				}
-				.state-box_offline {
-					background-color: #f7f7f7;
-					color: #272d45 !important;
-				}
-				.gfx_active {
-					background-color: #ff0000;
-					color: #ffffff;
-				}
-			}
-		}
-	}
+        > 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: initial !important;
+        }
+        .state-box_offline {
+          background-color: #f7f7f7;
+          color: #272d45 !important;
+        }
+        .gfx_active {
+          background-color: #ff0000;
+          color: #ffffff;
+        }
+      }
+    }
+  }
 }
 :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%;
-		}
+  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;
-			}
-		}
-	}
+    > 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;
-	}
+  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/videoManagement/isc_plugin_h5.vue b/src/views/sevenLargeScreen/videoManagement/isc_plugin_h5.vue
index 0ea4ad1..3198875 100644
--- a/src/views/sevenLargeScreen/videoManagement/isc_plugin_h5.vue
+++ b/src/views/sevenLargeScreen/videoManagement/isc_plugin_h5.vue
@@ -544,7 +544,7 @@ const play = (row, index) => {
 					reloadBtn.textContent = "重新加载";
 					reloadBtn.addEventListener("click", (e) => {
 						e.stopPropagation();
-						onReload(row.id);
+						onReload(row.itemId);
 					});
 
 					// 将图片添加到按钮
@@ -588,9 +588,9 @@ const play = (row, index) => {
 const onReload = (id) => {
 	console.log("重新加载", id);
     // 这里添加重新加载的逻辑
-    const findItem = videoInfo.devH5List.find(item => item.id === id);
+    const findItem = videoInfo.devH5List.find(item => item.itemId === id);
     if (findItem) {
-      play(findItem, videoInfo.iWndIndex);
+      play(findItem, findItem.eIndex);
     }
 };
 const onTwoSubmit = num => {