2024-11-13 履带吊 汽车吊

.env.development

@@ -3,8 +3,8 @@ NODE_ENV = 'development'
 
 # 本地环境接口地址(/api/index.ts文件中使用)
 # 后端本地
-# VITE_API_URL = 'http://192.168.34.155:19111'
-VITE_API_URL = 'http://192.168.34.221:19112' #雄哥本地
+VITE_API_URL = 'http://192.168.34.155:19111'
+# VITE_API_URL = 'http://192.168.34.221:19112' #雄哥本地
 # VITE_API_URL = 'http://192.168.34.221:28890' #雄哥本地
 # VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
 # VITE_API_URL = 'http://192.168.34.221:28889'

src/routers/modules/staticRouter.ts

@@ -67,6 +67,16 @@ export const staticRouter: RouteRecordRaw[] = [
 				name: "塔吊监测",
 				component: () => import("@/views/sevenLargeScreen/towerCraneMonitoring/index.vue")
 			},
+			{
+				path: "/cathangCrane",
+				name: "汽车吊监测",
+				component: () => import("@/views/sevenLargeScreen/cathangCrane/index.vue")
+			},
+			{
+				path: "/trackCrane",
+				name: "履带吊监测",
+				component: () => import("@/views/sevenLargeScreen/trackCrane/index.vue")
+			},
 			{
 				path: "/elevatorMonitoring",
 				name: "升降机监测",

src/views/sevenLargeScreen/cathangCrane/StattrackLine.vue

@@ -0,0 +1,223 @@
+<template>
+	<div id="charttrackContainer"></div>
+</template>
+ 
+<script setup lang="ts">
+import * as echarts from "echarts";
+import { onMounted, ref } from "vue";
+import { getExceedSpeedTrend } from "@/api/modules/vehicle";
+
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+
+let y = ref([150, 230, 224, 218, 135, 147, 260]);
+let x = ref(["09.24", "09.25", "09.26", "09.27", "09.28", "09.29", "09.30"]);
+
+onMounted(async () => {
+	await ongetExceedSpeedTrend();
+	const chartContainer = echarts.init(document.getElementById("charttrackContainer"));
+	const option = {
+		// 提示框
+		tooltip: {
+			//触发类型
+			trigger: "axis",
+			// 提示框的背景颜色
+			backgroundColor: "#2561d7",
+			// 提示框边框厚度
+			borderWidth: 0,
+			// 提示款边框颜色
+			borderColor: "#ccc",
+			formatter: function (params) {
+				console.log("params", params);
+
+				// params 是一个数组，包含了当前悬浮点的所有数据信息
+				let result = "";
+				params.forEach(function (item) {
+					console.log("item", item);
+
+					result += "日期" + item.axisValue + "<br/>" + item.seriesName + ": " + item.value;
+				});
+				return result;
+			},
+			// 提示框字体颜色
+			textStyle: {
+				color: "#fff"
+			},
+			// 选中数据时x-y轴样式
+			axisPointer: {
+				type: "cross",
+				// 小方块
+				label: {
+					// 小方块背景颜色
+					backgroundColor: "#6a7985"
+					// backgroundColor: '#e10602'
+					// 小方块字体颜色
+					// color: '#e10602'
+				}
+			}
+		},
+		grid: {
+			left: "3%",
+			right: "4%",
+			bottom: "3%",
+			containLabel: true
+		},
+		legend: {
+			// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+			//字体样式
+			textStyle: {
+				//   color: '#E0E0E0',
+				color: "#42b2f1",
+				fontSize: 12
+			},
+			//图标形状
+			icon: "roundRect",
+			orient: "horizontal",
+			itemWidth: 13,
+			itemHeight: 3,
+			right: "10%",
+			top: 0
+		},
+		xAxis: {
+			type: "category",
+			data: x,
+			boundaryGap: false,
+			axisTick: {
+				show: false
+				// length:7
+			},
+			axisLine: {
+				lineStyle: {
+					color: "rgba(32, 121, 160, 0.3)"
+				}
+			},
+			axisLabel: {
+				color: "#fff",
+				margin: 10
+			},
+			nameTextStyle: {
+				color: "#7AADFF ",
+				fontSize: 8
+			},
+			splitLine: {
+				lineStyle: {
+					color: "rgba(255,255,255,0.08)"
+				}
+			}
+		},
+		yAxis: {
+			type: "value",
+			splitNumber: 5,
+			axisLine: {
+				show: false,
+				lineStyle: {
+					color: "rgba(32, 121, 160, 0.3)"
+				}
+			},
+			axisTick: {
+				show: false
+			},
+			axisLabel: {
+				color: "#fff",
+				margin: 10
+			},
+			splitLine: {
+				lineStyle: {
+					color: "rgba(32, 121, 160, 0.3)"
+				}
+			},
+			splitArea: {
+				areaStyle: {
+					color: "rgba(2, 29, 159, 0.7)"
+				}
+			}
+		},
+		series: [
+			{
+				name: "履带吊",
+				type: "line",
+				stack: "Total",
+				areaStyle: {},
+				emphasis: {
+					// focus: 'series'
+				},
+				data: y,
+				// 折线变得圆滑
+				smooth: true,
+				// 把点去掉
+				showSymbol: true,
+				lineStyle: {
+					width: 3,
+					color: "#42b2f1"
+				},
+				itemStyle: {
+					color: "#0368FF"
+				},
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{
+							offset: 0,
+							color: "rgba(32, 102, 179, 0.4)"
+						},
+						{
+							offset: 1,
+							color: "rgba(55, 167, 232, 0.4)"
+						}
+					])
+				}
+			},
+			{
+				name: "履带吊测试",
+				type: "line",
+				stack: "Total",
+				areaStyle: {},
+				emphasis: {
+					// focus: 'series'
+				},
+				data: y,
+				// 折线变得圆滑
+				smooth: true,
+				// 把点去掉
+				showSymbol: true,
+				lineStyle: {
+					width: 3,
+					color: "#42b2f1"
+				},
+				itemStyle: {
+					color: "#0368FF"
+				},
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{
+							offset: 0,
+							color: "rgba(32, 102, 179, 0.4)"
+						},
+						{
+							offset: 1,
+							color: "rgba(55, 167, 232, 0.4)"
+						}
+					])
+				}
+			}
+		]
+	};
+	chartContainer.setOption(option);
+});
+
+const ongetExceedSpeedTrend = async () => {
+	const res: any = await getExceedSpeedTrend({
+		projectSn: store.sn
+	});
+
+	console.log("一周内统计", res);
+	y = res.result.map(item => item.y);
+	x = res.result.map(item => item.x);
+};
+</script>
+ 
+<style>
+#charttrackContainer {
+	width: 100%;
+	height: 100%;
+}
+</style>

src/views/sevenLargeScreen/cathangCrane/VideoBox.vue

@@ -0,0 +1,328 @@
+<!-- 视频播放组件 -->
+<template>
+	<div id="playWndspeed" class="playWnd" ref="playWndBox" style="width: 100%; height: 100%"></div>
+	<!-- :style="{
+        height: playWndHeight + 'px',
+	width: playWndWidth + 'px',-->
+</template>
+ 
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, onBeforeMount, watch } from "vue";
+import { carMeasureItemList } from "@/api/modules/vehicle";
+
+// sn
+import { GlobalStore } from "@/stores";
+import { log } from "console";
+const store = GlobalStore();
+
+const playWndBox = ref(null);
+let playWndHeight = ref("");
+let playWndWidth = ref("");
+let pubKey = ref("");
+let oWebControl = ref(null);
+
+const objData = ref({
+	appkey: "", //海康平台提供的appkey
+	ip: "", //平台地址
+	secret: "", //海康平台提供的secret
+	port: 0,
+	playMode: 0, // 0 预览 1回放
+	layout: "1x1" //页面展示的模块数【16】
+
+	// appkey: "24017757", //海康平台提供的appkey
+	// ip: "182.101.141.23", //平台地址
+	// secret: "VJz0FbzmE6drPQ7egsBi", //海康平台提供的secret
+	// port: 18443,
+	// playMode: 0, // 0 预览 1回放
+	// layout: "1x1" //页面展示的模块数【16】
+});
+
+const getvideodataer = async () => {
+	const res: any = await carMeasureItemList({
+		projectSn: store.sn
+	});
+
+	console.log("测速-视频列表", res);
+	console.log("res.result.projectVideoConfig.appId", res.result.projectVideoConfig.appId);
+
+	if (res.result.projectVideoConfig.videoType !== 1) {
+		objData.value.ip = res.result.projectVideoConfig.account;
+		objData.value.appkey = res.result.projectVideoConfig.appId;
+		objData.value.secret = res.result.projectVideoConfig.appSecret;
+		objData.value.port = Number(res.result.projectVideoConfig.password);
+
+		console.log("海康插件配置", objData.value);
+		// onplayvideo();
+	}
+};
+
+// 监听 objData.value.port 的变化
+// watch(
+// 	() => objData.value.port,
+// 	(newPort, oldPort) => {
+// 		if (newPort !== oldPort) {
+// 			setTimeout(() => {
+// 				onplayvideo();
+// 			}, 5000); // 5000 毫秒 = 5 秒
+// 		}
+// 	}
+// );
+onBeforeMount(() => {});
+
+onMounted(async () => {
+	await getvideodataer()
+    await onplayvideo();
+});
+
+const onplayvideo = async () => {
+	// 获取页面的实例对象
+	// const pageInstance = getCurrentInstance();
+	// 获取dom节点对象
+	// const tagDomObj = pageInstance.refs.playWndBox;
+
+	const tagDomObj = document.querySelector("#playWndspeed");
+
+	console.log("tagDomObj", tagDomObj);
+	console.log("tagDomObj", tagDomObj.clientHeight);
+	console.log("tagDomObj", tagDomObj.clientWidth);
+	playWndHeight.value = tagDomObj.clientHeight - 30;
+	playWndWidth.value = tagDomObj.clientWidth - 50;
+	// playWndWidth.value = tagDomObj.clientWidth;
+
+	// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
+	window.addEventListener("scroll", () => {
+		console.log(5);
+
+		// return
+		if (oWebControl.value != null) {
+			oWebControl.JS_Resize(tagDomObj.clientWidth, tagDomObj.clientHeight);
+			this.setWndCover();
+		}
+	});
+
+	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+	window.addEventListener("resize", e => {
+		console.log(0);
+
+		if (oWebControl.value != null) {
+			oWebControl.JS_Resize(tagDomObj.clientWidth, tagDomObj.clientHeight);
+			this.setWndCover();
+		}
+	});
+
+	// 初始化播放器插件
+	nextTick(() => {
+		initPlugin();
+	});
+};
+
+onBeforeUnmount(() => {
+	// if (oWebControl.value != null) {
+		console.log("执行销毁视频");
+		// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+		oWebControl.JS_HideWnd();
+		// 销毁当前播放的视频
+		oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
+		// 断开与插件服务连接
+		oWebControl.JS_Disconnect();
+	// }
+});
+
+const onclose = () => {
+	console.log("执行海康插件销毁");
+
+	console.log("执行销毁视频");
+	// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+	oWebControl.JS_HideWnd();
+	// 销毁当前播放的视频
+	oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
+	// 断开与插件服务连接
+	oWebControl.JS_Disconnect();
+};
+
+const initPlugin = () => {
+	console.log("2=========================");
+
+	oWebControl = new WebControl({
+		szPluginContainer: "playWndspeed", // 指定容器id
+		iServicePortStart: 15900, // 指定起止端口号，建议使用该值
+		iServicePortEnd: 15900,
+		szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
+		cbConnectSuccess: () => {
+			// 创建WebControl实例成功
+			oWebControl
+				.JS_StartService("window", {
+					// WebControl实例创建成功后需要启动服务
+					// 值"./VideoPluginConnect.dll"写死
+					dllPath: "./VideoPluginConnect.dll"
+				})
+				.then(
+					function () {
+						// 设置消息回调
+						oWebControl.JS_SetWindowControlCallback({
+							// cbIntegrationCallBack: cbIntegrationCallBack,
+						});
+						//JS_CreateWnd创建视频播放窗口，宽高可设定
+						oWebControl
+							.JS_CreateWnd("playWndspeed", 300, 250, { bEmbed: true }) //这一部分很重要，两个参数为你盒子的宽高，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁
+							.then(function () {
+								// 创建播放实例成功后初始化
+								init();
+							});
+					},
+					function () {
+						// 启动插件服务失败
+					}
+				);
+		},
+		// 创建WebControl实例失败
+		cbConnectError: function () {
+			// 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
+			// console.log(0);
+			// oWebControl.value = null;
+			// // 程序未启动时执行error函数，采用wakeup来启动程序
+			// window.WebControl.JS_WakeUp("VideoWebPlugin://");
+			// initCount++;
+			// if (initCount < 3) {
+			//   setTimeout(function () {
+			//     initPlugin();
+			//   }, 3000);
+			// } else {
+			//   setTimeout(function () {
+			//     setTimeout(function () {
+			//       $router.push('/home/PlugDown')
+			//     }, 4000)
+			//   }, 4000)
+			// }
+		},
+		cbConnectClose: () => {
+			// 异常断开：bNormalClose = false
+			// JS_Disconnect正常断开：bNormalClose = true
+			// console.log("cbConnectClose");
+			oWebControl.value = null;
+		}
+	});
+	// oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
+};
+
+// 初始化
+const init = callback => {
+	console.log(objData.value, "我的视频服务器");
+
+	getPubKey(() => {
+		let appkey = objData.value.appkey; //综合安防管理平台提供的appkey，必填
+		let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret，必填
+		let ip = objData.value.ip; //综合安防管理平台IP地址，必填
+		let playMode = objData.value.playMode; //初始播放模式：0-预览，1-回放
+		let port = objData.value.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
+		let snapDir = "D:\\SnapDir"; //抓图存储路径
+		let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
+		let layout = objData.value.layout; //playMode指定模式的布局
+		let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
+		let encryptedFields = "secret"; //加密字段，默认加密领域为secret
+		let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
+		let showSmart = 0; //是否显示移动框线框，0-不显示，非0-显示
+		let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
+		// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
+		oWebControl
+			.JS_RequestInterface({
+				funcName: "init",
+				argument: JSON.stringify({
+					appkey: appkey, //API网关提供的appkey
+					secret: secret, //API网关提供的secret
+					ip: ip, //API网关IP地址
+					playMode: playMode, //播放模式（决定显示预览还是回放界面）
+					port: port, //端口
+					snapDir: snapDir, //抓图存储路径
+					videoDir: videoDir, //紧急录像或录像剪辑存储路径
+					layout: layout, //布局
+					enableHTTPS: enableHTTPS, //是否启用HTTPS协议
+					encryptedFields: encryptedFields, //加密字段
+					showToolbar: showToolbar, //是否显示工具栏
+					showSmart: showSmart, //是否显示智能信息
+					buttonIDs //自定义工具条按钮
+				})
+			})
+			.then(function (oData) {
+				oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+				if (callback) {
+					callback();
+				}
+				// 隐藏
+				// oWebControl.JS_HideWnd()
+			});
+	});
+};
+
+// RSA 加密
+let setEncrypt = value => {
+	let encrypt = new window.JSEncrypt();
+	encrypt.setPublicKey(pubKey);
+	return encrypt.encrypt(value);
+};
+// 获取公钥
+const getPubKey = callback => {
+	oWebControl
+		.JS_RequestInterface({
+			funcName: "getRSAPubKey",
+			argument: JSON.stringify({
+				keyLength: 1024
+			})
+		})
+		.then(function (oData) {
+			if (oData.responseMsg.data) {
+				pubKey = oData.responseMsg.data;
+				callback();
+			}
+		});
+};
+
+// 调用这个函数可进行视频播放
+// 视频预览功能
+const previewVideo = data => {
+	console.log("播放data", data);
+	let cameraIndexCode = data; // 获取输入的监控点编号值，必填
+	let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
+	let transMode = 1; // 传输协议：0-UDP，1-TCP
+	let gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用
+	let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）
+
+	oWebControl
+		.JS_RequestInterface({
+			funcName: "startPreview",
+			argument: JSON.stringify({
+				cameraIndexCode: cameraIndexCode, // 监控点编号
+				streamMode: streamMode, // 主子码流标识
+				transMode: transMode, // 传输协议
+				gpuMode: gpuMode, // 是否开启GPU硬解
+				wndId: wndId // 可指定播放窗口
+			})
+		})
+		.then(function () {
+			oWebControl.JS_SetWindowControlCallback({});
+		});
+};
+
+const handleHide = () => {
+	console.log("执行隐藏");
+	oWebControl.JS_HideWnd();
+};
+
+const handleShow = () => {
+	console.log("执行显示");
+	// 显示视频插件
+	oWebControl.JS_ShowWnd();
+};
+
+// 导出方法，以便父组件可以访问
+defineExpose({
+	handleHide,
+	handleShow,
+	onclose,
+	objData,
+	previewVideo
+});
+</script>
+ 
+<style lang="scss" scoped>
+</style>

src/views/sevenLargeScreen/indexL.vue

@@ -271,8 +271,17 @@ let adminName = ref("" as any);
 let menuList = ref([
 	{
 		moduleName: "综合管理",
-		modulePath: "/projectOverview",
+		// modulePath: "/projectOverview",
+		modulePath: "/trackCrane",
 		menuList: [
+			{
+				menuName: "汽车吊监测",
+				companyPath: "/cathangCrane"
+			},
+			{
+				menuName: "履带吊监测",
+				companyPath: "/trackCrane"
+			},
 			{
 				menuName: "工程概况",
 				companyPath: "/projectOverview"

src/views/sevenLargeScreen/trackCrane/StattrackLine.vue

@@ -0,0 +1,223 @@
+<template>
+	<div id="charttrackContainer"></div>
+</template>
+ 
+<script setup lang="ts">
+import * as echarts from "echarts";
+import { onMounted, ref } from "vue";
+import { getExceedSpeedTrend } from "@/api/modules/vehicle";
+
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+
+let y = ref([150, 230, 224, 218, 135, 147, 260]);
+let x = ref(["09.24", "09.25", "09.26", "09.27", "09.28", "09.29", "09.30"]);
+
+onMounted(async () => {
+	await ongetExceedSpeedTrend();
+	const chartContainer = echarts.init(document.getElementById("charttrackContainer"));
+	const option = {
+		// 提示框
+		tooltip: {
+			//触发类型
+			trigger: "axis",
+			// 提示框的背景颜色
+			backgroundColor: "#2561d7",
+			// 提示框边框厚度
+			borderWidth: 0,
+			// 提示款边框颜色
+			borderColor: "#ccc",
+			formatter: function (params) {
+				console.log("params", params);
+
+				// params 是一个数组，包含了当前悬浮点的所有数据信息
+				let result = "";
+				params.forEach(function (item) {
+					console.log("item", item);
+
+					result += "日期" + item.axisValue + "<br/>" + item.seriesName + ": " + item.value;
+				});
+				return result;
+			},
+			// 提示框字体颜色
+			textStyle: {
+				color: "#fff"
+			},
+			// 选中数据时x-y轴样式
+			axisPointer: {
+				type: "cross",
+				// 小方块
+				label: {
+					// 小方块背景颜色
+					backgroundColor: "#6a7985"
+					// backgroundColor: '#e10602'
+					// 小方块字体颜色
+					// color: '#e10602'
+				}
+			}
+		},
+		grid: {
+			left: "3%",
+			right: "4%",
+			bottom: "3%",
+			containLabel: true
+		},
+		legend: {
+			// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+			//字体样式
+			textStyle: {
+				//   color: '#E0E0E0',
+				color: "#42b2f1",
+				fontSize: 12
+			},
+			//图标形状
+			icon: "roundRect",
+			orient: "horizontal",
+			itemWidth: 13,
+			itemHeight: 3,
+			right: "10%",
+			top: 0
+		},
+		xAxis: {
+			type: "category",
+			data: x,
+			boundaryGap: false,
+			axisTick: {
+				show: false
+				// length:7
+			},
+			axisLine: {
+				lineStyle: {
+					color: "rgba(32, 121, 160, 0.3)"
+				}
+			},
+			axisLabel: {
+				color: "#fff",
+				margin: 10
+			},
+			nameTextStyle: {
+				color: "#7AADFF ",
+				fontSize: 8
+			},
+			splitLine: {
+				lineStyle: {
+					color: "rgba(255,255,255,0.08)"
+				}
+			}
+		},
+		yAxis: {
+			type: "value",
+			splitNumber: 5,
+			axisLine: {
+				show: false,
+				lineStyle: {
+					color: "rgba(32, 121, 160, 0.3)"
+				}
+			},
+			axisTick: {
+				show: false
+			},
+			axisLabel: {
+				color: "#fff",
+				margin: 10
+			},
+			splitLine: {
+				lineStyle: {
+					color: "rgba(32, 121, 160, 0.3)"
+				}
+			},
+			splitArea: {
+				areaStyle: {
+					color: "rgba(2, 29, 159, 0.7)"
+				}
+			}
+		},
+		series: [
+			{
+				name: "履带吊",
+				type: "line",
+				stack: "Total",
+				areaStyle: {},
+				emphasis: {
+					// focus: 'series'
+				},
+				data: y,
+				// 折线变得圆滑
+				smooth: true,
+				// 把点去掉
+				showSymbol: true,
+				lineStyle: {
+					width: 3,
+					color: "#42b2f1"
+				},
+				itemStyle: {
+					color: "#0368FF"
+				},
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{
+							offset: 0,
+							color: "rgba(32, 102, 179, 0.4)"
+						},
+						{
+							offset: 1,
+							color: "rgba(55, 167, 232, 0.4)"
+						}
+					])
+				}
+			},
+			{
+				name: "履带吊测试",
+				type: "line",
+				stack: "Total",
+				areaStyle: {},
+				emphasis: {
+					// focus: 'series'
+				},
+				data: y,
+				// 折线变得圆滑
+				smooth: true,
+				// 把点去掉
+				showSymbol: true,
+				lineStyle: {
+					width: 3,
+					color: "#42b2f1"
+				},
+				itemStyle: {
+					color: "#0368FF"
+				},
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{
+							offset: 0,
+							color: "rgba(32, 102, 179, 0.4)"
+						},
+						{
+							offset: 1,
+							color: "rgba(55, 167, 232, 0.4)"
+						}
+					])
+				}
+			}
+		]
+	};
+	chartContainer.setOption(option);
+});
+
+const ongetExceedSpeedTrend = async () => {
+	const res: any = await getExceedSpeedTrend({
+		projectSn: store.sn
+	});
+
+	console.log("一周内统计", res);
+	y = res.result.map(item => item.y);
+	x = res.result.map(item => item.x);
+};
+</script>
+ 
+<style>
+#charttrackContainer {
+	width: 100%;
+	height: 100%;
+}
+</style>

src/views/sevenLargeScreen/trackCrane/VideoBox.vue

@@ -0,0 +1,328 @@
+<!-- 视频播放组件 -->
+<template>
+	<div id="playWndspeed" class="playWnd" ref="playWndBox" style="width: 100%; height: 100%"></div>
+	<!-- :style="{
+        height: playWndHeight + 'px',
+	width: playWndWidth + 'px',-->
+</template>
+ 
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, onBeforeMount, watch } from "vue";
+import { carMeasureItemList } from "@/api/modules/vehicle";
+
+// sn
+import { GlobalStore } from "@/stores";
+import { log } from "console";
+const store = GlobalStore();
+
+const playWndBox = ref(null);
+let playWndHeight = ref("");
+let playWndWidth = ref("");
+let pubKey = ref("");
+let oWebControl = ref(null);
+
+const objData = ref({
+	appkey: "", //海康平台提供的appkey
+	ip: "", //平台地址
+	secret: "", //海康平台提供的secret
+	port: 0,
+	playMode: 0, // 0 预览 1回放
+	layout: "1x1" //页面展示的模块数【16】
+
+	// appkey: "24017757", //海康平台提供的appkey
+	// ip: "182.101.141.23", //平台地址
+	// secret: "VJz0FbzmE6drPQ7egsBi", //海康平台提供的secret
+	// port: 18443,
+	// playMode: 0, // 0 预览 1回放
+	// layout: "1x1" //页面展示的模块数【16】
+});
+
+const getvideodataer = async () => {
+	const res: any = await carMeasureItemList({
+		projectSn: store.sn
+	});
+
+	console.log("测速-视频列表", res);
+	console.log("res.result.projectVideoConfig.appId", res.result.projectVideoConfig.appId);
+
+	if (res.result.projectVideoConfig.videoType !== 1) {
+		objData.value.ip = res.result.projectVideoConfig.account;
+		objData.value.appkey = res.result.projectVideoConfig.appId;
+		objData.value.secret = res.result.projectVideoConfig.appSecret;
+		objData.value.port = Number(res.result.projectVideoConfig.password);
+
+		console.log("海康插件配置", objData.value);
+		// onplayvideo();
+	}
+};
+
+// 监听 objData.value.port 的变化
+// watch(
+// 	() => objData.value.port,
+// 	(newPort, oldPort) => {
+// 		if (newPort !== oldPort) {
+// 			setTimeout(() => {
+// 				onplayvideo();
+// 			}, 5000); // 5000 毫秒 = 5 秒
+// 		}
+// 	}
+// );
+onBeforeMount(() => {});
+
+onMounted(async () => {
+	await getvideodataer()
+    await onplayvideo();
+});
+
+const onplayvideo = async () => {
+	// 获取页面的实例对象
+	// const pageInstance = getCurrentInstance();
+	// 获取dom节点对象
+	// const tagDomObj = pageInstance.refs.playWndBox;
+
+	const tagDomObj = document.querySelector("#playWndspeed");
+
+	console.log("tagDomObj", tagDomObj);
+	console.log("tagDomObj", tagDomObj.clientHeight);
+	console.log("tagDomObj", tagDomObj.clientWidth);
+	playWndHeight.value = tagDomObj.clientHeight - 50;
+	playWndWidth.value = tagDomObj.clientWidth - 50;
+	// playWndWidth.value = tagDomObj.clientWidth;
+
+	// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
+	window.addEventListener("scroll", () => {
+		console.log(5);
+
+		// return
+		if (oWebControl.value != null) {
+			oWebControl.JS_Resize(tagDomObj.clientWidth, tagDomObj.clientHeight);
+			this.setWndCover();
+		}
+	});
+
+	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+	window.addEventListener("resize", e => {
+		console.log(0);
+
+		if (oWebControl.value != null) {
+			oWebControl.JS_Resize(tagDomObj.clientWidth, tagDomObj.clientHeight);
+			this.setWndCover();
+		}
+	});
+
+	// 初始化播放器插件
+	nextTick(() => {
+		initPlugin();
+	});
+};
+
+onBeforeUnmount(() => {
+	// if (oWebControl.value != null) {
+		console.log("执行销毁视频");
+		// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+		oWebControl.JS_HideWnd();
+		// 销毁当前播放的视频
+		oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
+		// 断开与插件服务连接
+		oWebControl.JS_Disconnect();
+	// }
+});
+
+const onclose = () => {
+	console.log("执行海康插件销毁");
+
+	console.log("执行销毁视频");
+	// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+	oWebControl.JS_HideWnd();
+	// 销毁当前播放的视频
+	oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
+	// 断开与插件服务连接
+	oWebControl.JS_Disconnect();
+};
+
+const initPlugin = () => {
+	console.log("2=========================");
+
+	oWebControl = new WebControl({
+		szPluginContainer: "playWndspeed", // 指定容器id
+		iServicePortStart: 15900, // 指定起止端口号，建议使用该值
+		iServicePortEnd: 15900,
+		szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
+		cbConnectSuccess: () => {
+			// 创建WebControl实例成功
+			oWebControl
+				.JS_StartService("window", {
+					// WebControl实例创建成功后需要启动服务
+					// 值"./VideoPluginConnect.dll"写死
+					dllPath: "./VideoPluginConnect.dll"
+				})
+				.then(
+					function () {
+						// 设置消息回调
+						oWebControl.JS_SetWindowControlCallback({
+							// cbIntegrationCallBack: cbIntegrationCallBack,
+						});
+						//JS_CreateWnd创建视频播放窗口，宽高可设定
+						oWebControl
+							.JS_CreateWnd("playWndspeed", 300, 250, { bEmbed: true }) //这一部分很重要，两个参数为你盒子的宽高，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁
+							.then(function () {
+								// 创建播放实例成功后初始化
+								init();
+							});
+					},
+					function () {
+						// 启动插件服务失败
+					}
+				);
+		},
+		// 创建WebControl实例失败
+		cbConnectError: function () {
+			// 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
+			// console.log(0);
+			// oWebControl.value = null;
+			// // 程序未启动时执行error函数，采用wakeup来启动程序
+			// window.WebControl.JS_WakeUp("VideoWebPlugin://");
+			// initCount++;
+			// if (initCount < 3) {
+			//   setTimeout(function () {
+			//     initPlugin();
+			//   }, 3000);
+			// } else {
+			//   setTimeout(function () {
+			//     setTimeout(function () {
+			//       $router.push('/home/PlugDown')
+			//     }, 4000)
+			//   }, 4000)
+			// }
+		},
+		cbConnectClose: () => {
+			// 异常断开：bNormalClose = false
+			// JS_Disconnect正常断开：bNormalClose = true
+			// console.log("cbConnectClose");
+			oWebControl.value = null;
+		}
+	});
+	// oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
+};
+
+// 初始化
+const init = callback => {
+	console.log(objData.value, "我的视频服务器");
+
+	getPubKey(() => {
+		let appkey = objData.value.appkey; //综合安防管理平台提供的appkey，必填
+		let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret，必填
+		let ip = objData.value.ip; //综合安防管理平台IP地址，必填
+		let playMode = objData.value.playMode; //初始播放模式：0-预览，1-回放
+		let port = objData.value.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
+		let snapDir = "D:\\SnapDir"; //抓图存储路径
+		let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
+		let layout = objData.value.layout; //playMode指定模式的布局
+		let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
+		let encryptedFields = "secret"; //加密字段，默认加密领域为secret
+		let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
+		let showSmart = 0; //是否显示移动框线框，0-不显示，非0-显示
+		let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
+		// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
+		oWebControl
+			.JS_RequestInterface({
+				funcName: "init",
+				argument: JSON.stringify({
+					appkey: appkey, //API网关提供的appkey
+					secret: secret, //API网关提供的secret
+					ip: ip, //API网关IP地址
+					playMode: playMode, //播放模式（决定显示预览还是回放界面）
+					port: port, //端口
+					snapDir: snapDir, //抓图存储路径
+					videoDir: videoDir, //紧急录像或录像剪辑存储路径
+					layout: layout, //布局
+					enableHTTPS: enableHTTPS, //是否启用HTTPS协议
+					encryptedFields: encryptedFields, //加密字段
+					showToolbar: showToolbar, //是否显示工具栏
+					showSmart: showSmart, //是否显示智能信息
+					buttonIDs //自定义工具条按钮
+				})
+			})
+			.then(function (oData) {
+				oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+				if (callback) {
+					callback();
+				}
+				// 隐藏
+				// oWebControl.JS_HideWnd()
+			});
+	});
+};
+
+// RSA 加密
+let setEncrypt = value => {
+	let encrypt = new window.JSEncrypt();
+	encrypt.setPublicKey(pubKey);
+	return encrypt.encrypt(value);
+};
+// 获取公钥
+const getPubKey = callback => {
+	oWebControl
+		.JS_RequestInterface({
+			funcName: "getRSAPubKey",
+			argument: JSON.stringify({
+				keyLength: 1024
+			})
+		})
+		.then(function (oData) {
+			if (oData.responseMsg.data) {
+				pubKey = oData.responseMsg.data;
+				callback();
+			}
+		});
+};
+
+// 调用这个函数可进行视频播放
+// 视频预览功能
+const previewVideo = data => {
+	console.log("播放data", data);
+	let cameraIndexCode = data; // 获取输入的监控点编号值，必填
+	let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
+	let transMode = 1; // 传输协议：0-UDP，1-TCP
+	let gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用
+	let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）
+
+	oWebControl
+		.JS_RequestInterface({
+			funcName: "startPreview",
+			argument: JSON.stringify({
+				cameraIndexCode: cameraIndexCode, // 监控点编号
+				streamMode: streamMode, // 主子码流标识
+				transMode: transMode, // 传输协议
+				gpuMode: gpuMode, // 是否开启GPU硬解
+				wndId: wndId // 可指定播放窗口
+			})
+		})
+		.then(function () {
+			oWebControl.JS_SetWindowControlCallback({});
+		});
+};
+
+const handleHide = () => {
+	console.log("执行隐藏");
+	oWebControl.JS_HideWnd();
+};
+
+const handleShow = () => {
+	console.log("执行显示");
+	// 显示视频插件
+	oWebControl.JS_ShowWnd();
+};
+
+// 导出方法，以便父组件可以访问
+defineExpose({
+	handleHide,
+	handleShow,
+	onclose,
+	objData,
+	previewVideo
+});
+</script>
+ 
+<style lang="scss" scoped>
+</style>