flx:执法记录仪兼容web插件 新增刷新功能

index.html

@@ -125,7 +125,7 @@
     <!-- 用于前端与插件交互 -->
     <script src="/jsencrypt.min.js"></script>
     <!-- 用于RSA加密 -->
-    <script src="/jsWebControl-1.0.0.min.js"></script>
+    <script type="text/javascript" src="/jsWebControl-1.0.0.min.js"></script>
     <!-- 用于RSA加密 -->
     <!-- <script
 			type="text/javascript"

src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue

@@ -227,6 +227,8 @@ const reset = () => {
 	searchForm.alarmType = "";
 	searchForm.startTime = dayjs().format("YYYY-MM-DD") + " 00:00:00";
 	searchForm.endTime = dayjs().format("YYYY-MM-DD") + " 23:59:59";
+	rangeTime.value = [searchForm.startTime, searchForm.endTime];
+
 	pageInfo.pageNo = 0;
 	pageInfo.total = 0;
 	warnAlarmList.value = [];

src/views/sevenLargeScreen/homeworkControlProcess/components/isc_plugin.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="playWnd" :id="`playWnd${itemId}`"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
+import VideoPlugin from "./video_isc_plugin.js"
+import {
+	getVideoItemInfoPoliceCameraItemApi
+} from "@/api/modules/workTicket";
+import { ElMessage } from 'element-plus'
+import { GlobalStore } from "@/stores";
+const props = defineProps({
+  devList: {
+    type: Array,
+    default: () => []
+  },
+  type: {
+    type: String,
+    default: ''
+  },
+  itemId: {
+    type: String,
+    required: true
+  },
+  equipmentDialog: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const store = GlobalStore();
+const layout = ref('1x1')
+const videoPlugin = ref(null)
+
+// 方法
+const getPreviewUrl = (row) => {
+  const tempCode = row.monitoringNumber
+  const param = {
+    cameraIndexCode: tempCode,
+    type: window.location.protocol.includes("https") ? "wss" : "ws",
+    transmode: 1,
+    itemId: row.itemId,
+    projectSn: row.projectSn,
+  }
+  return getVideoItemInfoPoliceCameraItemApi(param)
+}
+
+const play = (row) => {
+  getPreviewUrl(row).then((res) => {
+    if (res.code !== 200 && !res.result.videoInfo) {
+      ElMessage.warning("获取视频流失败！")
+      return
+    }
+    
+    const dataList = [
+      {
+        ...row,
+        ...res.result.videoInfo,
+        ...res.result.config,
+        serialNumber: res.result.videoInfo.monitoringNumber,
+        // defaultStreamType: 2,
+      }
+    ]
+    
+    videoPlugin.value.initPlugin(
+      props.itemId, 
+      res.result.config.appId, 
+      res.result.config.appSecret, 
+      res.result.config.ip, 
+      res.result.config.port, 
+      dataList, 
+      layout.value
+    )
+    .then(() => {
+      console.log('插件初始化成功')
+    })
+    .catch(error => {
+      console.error('插件初始化失败:', error)
+    })
+  })
+}
+
+// 生命周期
+onMounted(() => {
+  videoPlugin.value = new VideoPlugin()
+  
+  let tempLayout = "2x2"
+  if (props.type === "company") {
+    tempLayout = "4x6"
+  }
+  if (props.type.includes("x")) {
+    tempLayout = props.type
+  }
+  layout.value = tempLayout
+  
+  if (props.devList.length > 0) {
+    props.devList.forEach(element => {
+      play(element)
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  if (videoPlugin.value) {
+    videoPlugin.value.unInitPlugin()
+  }
+})
+
+// 监听器
+watch(() => props.devList, (newVal) => {
+  if (newVal.length > 0) {
+    newVal.forEach(element => {
+      play(element)
+    })
+  }
+})
+
+watch(() => props.equipmentDialog, (newVal) => {
+  if (videoPlugin.value) {
+    if (newVal) {
+      videoPlugin.value.hidePluginWindow()
+    } else {
+      videoPlugin.value.showPluginWindow()
+    }
+  }
+})
+</script>
+
+<style scoped>
+.playWnd {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/sevenLargeScreen/homeworkControlProcess/components/video_isc_plugin.js

@@ -0,0 +1,284 @@
+// import './jsencrypt.min.js';
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+class VideoPlugin {
+    constructor() {
+        this.isChrome = navigator.userAgent.indexOf('Chrome') > -1;
+        this.WebControl = null;
+        this.oWebControl = null;
+        this.pubKey = '';
+        this.initCount = 0;
+        this.loadWebControl();
+    }
+
+    async loadWebControl() {
+        if (this.isChrome) {
+            try {
+                this.WebControl = window.WebControl;
+            } catch (error) {
+                console.error('加载WebControl失败:', error);
+            }
+        }
+    }
+
+    async initPlugin(itemId, appkey, secret, ip, port, videoData, layout) {
+        if (!this.WebControl) {
+            console.error('WebControl未加载完成');
+            return false;
+        }
+        // 确保所有必要参数都已初始化
+        this.appkey = appkey;
+        this.secret = secret;
+        this.ip = ip;
+        this.port = port;
+        this.layout = layout;
+        this.width = 0;
+        this.height = 0;
+        return new Promise((resolve, reject) => {
+            this.oWebControl = new this.WebControl({
+                szPluginContainer: `playWnd${itemId}`,
+                iServicePortStart: 15900,
+                iServicePortEnd: 15909,
+                szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
+                cbConnectSuccess: () => this.onConnectSuccess(itemId, videoData, resolve),
+                cbConnectError: () => this.onConnectError(itemId, appkey, secret, ip, port, reject),
+                cbConnectClose: () => console.log("连接关闭")
+            });
+        });
+    }
+
+    onConnectSuccess(itemId, videoData, resolve) {
+        this.setCallbacks();
+        this.oWebControl.JS_StartService("window", {
+            dllPath: "./VideoPluginConnect.dll"
+        }).then(() => {
+            this.setupWindow(itemId, videoData);
+            resolve(true);
+        }).catch(error => {
+            console.error('启动服务失败:', error);
+        });
+    }
+
+    onConnectError(itemId, appkey, secret, ip, port, reject) {
+        console.log("插件未启动，正在尝试启动...");
+        this.initCount++;
+
+        if (this.initCount < 3) {
+            setTimeout(() => this.initPlugin(itemId, appkey, secret, ip, port), 3000);
+        } else {
+            reject(new Error("插件启动失败"));
+            this.showDownloadDialog();
+        }
+    }
+
+    setupWindow(itemId, videoData) {
+        const bottomHeight = 0;
+        let width = document.getElementById(`videoOverview${itemId}`).offsetWidth;
+        let height = document.getElementById(`videoOverview${itemId}`).offsetHeight - bottomHeight;
+
+        // 缩放比例计算
+        let ratio = 1;
+        // if (enabledProjectV2 != 1) {
+        //     if (localStorage.getItem('systemInfo') && JSON.parse(localStorage.getItem('systemInfo')).zoomType != 1) {
+        //         ratio = this.getRatio();
+        //     }
+        // }
+
+        width = width * ratio;
+        height = height * ratio;
+
+        // 窗口大小调整处理
+        window.onresize = () => {
+            clearTimeout(window.$timeId);
+            window.$timeId = setTimeout(() => {
+                const container = document.getElementById('videoBoxContainer') || document.querySelector('.videocBox');
+                if (container) {
+                    width = container.offsetWidth;
+                    height = container.offsetHeight - 80;
+                }
+                if (this.oWebControl != null) {
+                    this.oWebControl.JS_Resize(width, height);
+                }
+            }, 10);
+        };
+
+        this.oWebControl.JS_CreateWnd(`playWnd${itemId}`, width, height, {
+            bEmbed: false,
+            cbSetDocTitle: (uuid) => {
+                this.oWebControl._pendBg = false;
+                window.parent.postMessage({
+                    action: 'updateTitle',
+                    msg: '子页面通知父页面修改title',
+                    info: uuid
+                }, '*');
+            }
+        }).then(() => {
+            console.log("JS_CreateWnd success");
+            this.initVideo(videoData, itemId);
+        });
+    }
+
+    initVideo(videoData, itemId) {
+        this.getPubKey().then(() => {
+            const config = {
+                appkey: this.appkey,
+                secret: this.setEncrypt(this.secret),
+                ip: this.ip,
+                playMode: 0,
+                port: parseInt(this.port),
+                snapDir: "D:\\SnapDir",
+                videoDir: "D:\\VideoDir",
+                layout: this.layout,
+                enableHTTPS: 1,
+                encryptedFields: 'secret',
+                showToolbar: 0,
+                showSmart: 1,
+                buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"
+            };
+            // 添加调试日志
+            console.log('初始化配置:', config);
+            console.log('视频数据:', videoData);
+            this.oWebControl.JS_RequestInterface({
+                funcName: "init",
+                argument: JSON.stringify(config)
+            }).then((response) => {
+                console.log('初始化响应:', response);
+                console.log("init success", videoData, document.getElementById(`videoOverview${itemId}`), document.getElementById(`videoOverview${itemId}`).width, document.getElementById(`videoOverview${itemId}`).offsetHeight);
+                // 确保使用最新的width和height
+                const width = document.getElementById(`videoOverview${itemId}`).offsetWidth;
+                const height = document.getElementById(`videoOverview${itemId}`).offsetHeight;
+                this.ratio = store.globalScale;
+                console.log('缩放比例:', this.ratio);
+                this.oWebControl.JS_Resize(width * this.ratio, height * this.ratio);
+                this.startVideoPreview(videoData);
+            });
+        });
+    }
+    startVideoPreview(videoData) {
+        for (let i = 0; i < videoData.length; i++) {
+            if (i < 24 && videoData.length >= i) {
+                this.openVideo(videoData[i].serialNumber, videoData[i].defaultStreamType, i + 1);
+            }
+        }
+    }
+
+    openVideo(cameraIndexCode, streamMode, winIndex) {
+        const transMode = 1; // TCP
+        const gpuMode = 0; // 不启用GPU硬解
+        // 添加调试信息
+        console.log('开始预览:', {
+            cameraIndexCode,
+            streamMode,
+            winIndex,
+            transMode,
+            gpuMode
+        });
+        this.oWebControl.JS_RequestInterface({
+            funcName: "startPreview",
+            argument: JSON.stringify({
+                cameraIndexCode: cameraIndexCode,
+                streamMode: streamMode == 2 ? 0 : streamMode,
+                transMode: transMode,
+                gpuMode: gpuMode,
+                wndId: winIndex || -1,
+            })
+        }).then((oData) => {
+            console.log('预览响应:', oData);
+        });
+    }
+
+    unInitPlugin() {
+        if (!this.oWebControl) return false;
+
+        const isIE = !!window.ActiveXObject || 'ActiveXObject' in window;
+        if (isIE) {
+            this.oWebControl.JS_Disconnect().then(() => {
+                console.log("JS_Disconnect");
+            });
+        } else {
+            this.oWebControl.JS_DestroyWnd().then(() => {
+                console.log("JS_DestroyWnd");
+                this.oWebControl.JS_StopService("window").then(() => {
+                    this.oWebControl.JS_Disconnect().then(() => {
+                        console.log("JS_Disconnect");
+                    });
+                });
+            });
+        }
+    }
+
+    setCallbacks() {
+        this.oWebControl.JS_SetWindowControlCallback({
+            cbIntegrationCallBack: this.cbIntegrationCallBack
+        });
+    }
+
+    getRatio() {
+        const bodyWidth = document.body.clientWidth;
+        const bodyHeight = document.body.clientHeight;
+        const scaleWidthNum = bodyWidth / 1920;
+        const scaleHeightNum = bodyHeight / 1080;
+
+        return scaleWidthNum > scaleHeightNum ? scaleHeightNum : scaleWidthNum;
+    }
+
+    setEncrypt(value) {
+        const encrypt = new JSEncrypt();
+        encrypt.setPublicKey(this.pubKey);
+        return encrypt.encrypt(value);
+    }
+
+    getPubKey() {
+        return new Promise((resolve) => {
+            this.oWebControl.JS_RequestInterface({
+                funcName: "getRSAPubKey",
+                argument: JSON.stringify({ keyLength: 1024 })
+            }).then((oData) => {
+                if (oData.responseMsg.data) {
+                    this.pubKey = oData.responseMsg.data;
+                    resolve();
+                }
+            });
+        });
+    }
+
+    cbIntegrationCallBack(oData) {
+        console.log(JSON.stringify(oData.responseMsg));
+    }
+
+    showDownloadDialog() {
+        if (confirm("检测到视频插件未安装，是否下载视频插件?")) {
+            window.location.href = "http://101.43.164.214:11111/image/VideoWebPlugin.rar";
+        }
+    }
+
+    resizePlugin(val, itemId) {
+        if (this.oWebControl) {
+            const width = document.getElementById(`videoOverview${itemId}`).offsetWidth;
+            const height = document.getElementById(`videoOverview${itemId}`).offsetHeight;
+
+            if (val && val == 1) {
+                this.oWebControl.JS_Resize(width / 2 + 20, height - 215);
+            } else {
+                this.oWebControl.JS_Resize(width, height);
+            }
+        }
+    }
+    hidePluginWindow() {
+        if (this.oWebControl) {
+            this.oWebControl.JS_HideWnd();
+        }
+    }
+    showPluginWindow() {
+        if (this.oWebControl) {
+            this.oWebControl.JS_ShowWnd();
+        }
+    }
+    setPluginOffset(left, top) {
+        if (this.WebControl) {
+            this.WebControl.JS_SetDocOffset({ left, top });
+        }
+    }
+}
+
+export default VideoPlugin;

src/views/sevenLargeScreen/homeworkControlProcess/index.vue

@@ -98,6 +98,18 @@
 						<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>
@@ -122,6 +134,10 @@
 									<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>
@@ -211,7 +227,15 @@
 											:autoplay="true"
 											:controls="true"
 										/> -->
-										<IscPlayer :devList="[item]" :key="'player-' + item.itemId" :playerId="'player-' + item.itemId" />
+										<!-- <IscPlayer :devList="[item]" :key="'player-' + item.itemId" :playerId="'player-' + item.itemId" /> -->
+										<div 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>
@@ -406,7 +430,7 @@ import { ref, onMounted, reactive, computed } from "vue";
 import Card from "@/components/card.vue";
 import HlsPlayer from "./components/HlsPlayer.vue";
 import IscPlayer from "./components/iscPlayer.vue";
-
+import IscPlugin from "./components/isc_plugin.vue";
 import { ElMessage } from "element-plus";
 import {
 	getWorkTicketCountWorkTicketApi,
@@ -531,7 +555,7 @@ const getWorkTicketPage = () => {
 				console.log("进来了", Number(res.result.total));
 				workTicketInfo.total = Number(res.result.total);
 				if (workTicketList.value.length > 0) {
-					onViewDetail(workTicketList.value[0]);
+					onViewDetail(workTicketList.value[0], true);
 				}
 			}
 		}
@@ -558,8 +582,10 @@ 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();
@@ -610,8 +636,8 @@ const isJSON = str => {
 };
 const timeInterval = ref(null);
 // 查看详情
-const onViewDetail = row => {
+const onViewDetail = (row, flag) => {
-	if (row.id == workTicketDetail.value.id) return;
+	if (row.id == workTicketDetail.value.id && flag != true) return;
 	workTicketDetail.value = row;
 	getWorkTicketQueryById();
 	getWorkTicketHistoryList();
@@ -621,7 +647,7 @@ const onViewDetail = row => {
 	}
 	timeInterval.value = setInterval(() => {
 		initPoliceCameraItemList();
-	}, 1000 * 60 * 5);
+	}, 1000 * 60 * 30);
 };
 // 通过id查询作业票详情
 const getWorkTicketQueryById = () => {
@@ -685,14 +711,30 @@ const getWorkTicketHistoryList = () => {
 const policeCameraItemInfo = reactive({
 	pageNo: 1,
 	pageSize: 6,
-	total: 0
+	total: 0,
+	deviceState: ""
 });
+const deviceStateList = [
+	{
+		id: "",
+		title: "全部设备"
+	},
+	{
+		id: 1,
+		title: "施工中在线"
+	},
+	{
+		id: 2,
+		title: "施工中离线"
+	}
+];
 const policeCameraItemList = ref([]);
 const initPoliceCameraItemList = () => {
 	policeCameraItemInfo.pageNo = 1;
 	policeCameraItemList.value = [];
 	getPoliceCameraItemPage();
 };
+
 const onCurrentChange = val => {
 	policeCameraItemInfo.pageNo = val;
 	policeCameraItemList.value = [];
@@ -744,6 +786,15 @@ const getVideoItemInfoPoliceCameraItem = async row => {
 	return res.result.videoInfo;
 };
 
+const onRefresh = () => {
+	if (!viewAllShow.value) {
+		onWorkTicketQuery();
+	} else {
+		policeCameraItemList.value = [];
+		getPoliceCameraItemPage();
+	}
+};
+
 const statusList = [
 	{
 		value: 1,
@@ -768,7 +819,9 @@ const updateStatus = computed(() => {
 		return find ? find.label : "--";
 	};
 });
-
+const itemListDevNameUp = computed(() => {
+	return workTicketDetail.value.itemList ? workTicketDetail.value.itemList.map(item => item.devName).join('、') : ""
+})
 const workTicketTypeTreeList = ref([]);
 // 获取工作票类型
 const getWorkTicketTypeTreePage = () => {
@@ -837,14 +890,14 @@ const downloadFileBtn = (url, name) => {
 	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;
@@ -1143,18 +1196,29 @@ const downloadFileBtn = (url, name) => {
 					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%;
-						margin-left: 10px;
 					}
 					.goback {
 						background-image: url("@/assets/images/workTicket/goback.png") !important;
 					}
-					> div:first-child {
+					> div:not(:first-child) {
+						margin-left: 10px;
+					}
+					> div:nth-child(2) {
 						font-weight: bold;
 						font-size: 15px;
 						color: #65d7f9;
@@ -1317,6 +1381,10 @@ const downloadFileBtn = (url, name) => {
 						width: 100%;
 						height: 160px;
 					}
+					.videoOverview {
+						width: 100%;
+						height: 100%;
+					}
 					.hls-video_title {
 						display: flex;
 						align-items: center;

src/views/sevenLargeScreen/indexL.vue

@@ -117,7 +117,7 @@
 						<span class="numColor"> {{ projectPassDay }} </span>个日历天
 					</span>
 				</div> -->
-				<div class="dataBoardContent">
+				<div class="dataBoardContent" :class="{'dataBoardContent1': store.isIframe}">
 					<router-view></router-view>
 				</div>
 			</template>
@@ -868,6 +868,7 @@ function twoDigits(val: any) {
 
 function loginOut() {
 	localStorage.removeItem("GlobalState");
+	sessionStorage.removeItem("GlobalState");
 	location.reload();
 	router.push("/login");
 }
@@ -935,7 +936,7 @@ const handleScroll = (e: any) => {
 	justify-content: center;
 }
 .largeScreen1 {
-	margin-top: 130px;
+	margin-top: 180px;
 }
 .largeScreen {
 	background: url("@/assets/images/bigImg.png") no-repeat;
@@ -1200,6 +1201,9 @@ const handleScroll = (e: any) => {
 		// background-color: #01131F;
 		// opacity: 0.9;
 	}
+	.dataBoardContent1 {
+		height: 76%;
+	}
 }
 
 .userDialog {