fix: 添加视频萤石云播放，解决部分问题项

.env.development

@@ -9,7 +9,8 @@ NODE_ENV = 'development'
 # VITE_API_URL = "http://101.43.164.214:45022"
 VITE_API_URL = 'http://192.168.34.221:30002'
 # VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
-
+# 百色七参数线上地址
+# VITE_API_URL = 'http://101.43.164.214:11113'
 
 # 上传
 VITE_ULD_API_URL = 'http://192.168.34.155:8012/onlinePreview?url='

package-lock.json

@@ -26,6 +26,7 @@
 				"echarts-liquidfill": "^3.1.0",
 				"element-china-area-data": "^5.0.2",
 				"element-plus": "^2.2.30",
+				"ezuikit-js": "^7.7.8",
 				"js-base64": "^3.7.5",
 				"js-md5": "^0.7.3",
 				"mars3d": "^3.5.6",
@@ -7542,6 +7543,11 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/ezuikit-js": {
+			"version": "7.7.8",
+			"resolved": "https://registry.npmjs.org/ezuikit-js/-/ezuikit-js-7.7.8.tgz",
+			"integrity": "sha512-DfcPxUhLgchkQU5+0WllD3QghAJYG9mCybCCs0znLoSnMupup6WB1+wjrxPtpt49praQDuMrGoBVe0Mtl1z9/w=="
+		},
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -21521,6 +21527,11 @@
 				"to-regex": "^3.0.1"
 			}
 		},
+		"ezuikit-js": {
+			"version": "7.7.8",
+			"resolved": "https://registry.npmjs.org/ezuikit-js/-/ezuikit-js-7.7.8.tgz",
+			"integrity": "sha512-DfcPxUhLgchkQU5+0WllD3QghAJYG9mCybCCs0znLoSnMupup6WB1+wjrxPtpt49praQDuMrGoBVe0Mtl1z9/w=="
+		},
 		"fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",

package.json

@@ -38,6 +38,7 @@
 		"echarts-liquidfill": "^3.1.0",
 		"element-china-area-data": "^5.0.2",
 		"element-plus": "^2.2.30",
+		"ezuikit-js": "^7.7.8",
 		"js-base64": "^3.7.5",
 		"js-md5": "^0.7.3",
 		"mars3d": "^3.5.6",

src/api/modules/securityManagement.ts

@@ -22,3 +22,8 @@ export const getProjectInspectRecordCount = (params: {}) => {
 export const getCountResponsibleUnit = (params: {}) => {
 	return http.post(BASEURL + `/xmgl/hiddenDangerInspectRecord/countResponsibleUnit`, params);
 };
+
+// 责任区域分析
+export const getCountHiddenDangerInspectRegion = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/hiddenDangerInspectRecord/countHiddenDangerInspectRegion`, params);
+};

src/components/ysyPlayAndPlayback.vue

@@ -0,0 +1,38 @@
+<template>
+	<!-- &begin=20200915&end=20200915 &-->
+	<!-- autoplay=1   传这个默认一开始是查看历史回放 -->
+	<iframe
+		:src="'https://open.ys7.com/ezopen/h5/iframe_se?url=' + ysyParams.url + '&accessToken=' + ysyParams.token"
+		width="100%"
+		height="100%"
+		id="ysOpenDevice"
+		allowfullscreen
+	>
+	</iframe>
+</template>
+<script>
+export default {
+	data() {},
+	props: ["ysyParams"],
+	mounted() {
+		this.init2();
+	},
+	methods: {
+		init2() {
+			console.log("init2");
+			/* 获取播放器元素 */
+			var player = document.getElementById("ysOpenDevice").contentWindow;
+			/* iframe 支持方法 */
+			player.postMessage("play", "https://open.ys7.com/ezopen/h5/iframe"); /* 播放 */
+			player.postMessage("stop", "https://open.ys7.com/ezopen/h5/iframe"); /* 结束 */
+			player.postMessage("capturePicture", "https://open.ys7.com/ezopen/h5/iframe"); /* 截图 */
+			player.postMessage("openSound", "https://open.ys7.com/ezopen/h5/iframe"); /* 开启声音 */
+			player.postMessage("closeSound", "https://open.ys7.com/ezopen/h5/iframe"); /* 关闭声音 */
+			player.postMessage("startSave", "https://open.ys7.com/ezopen/h5/iframe"); /* 开始录制 */
+			player.postMessage("stopSave", "https://open.ys7.com/ezopen/h5/iframe"); /* 结束录制 */
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftTop.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="leftTop">
 		<Card title="项目信息">
-			<div class="projectInfo">
+			<!-- <div class="projectInfo">
 				<div><span>项目名称：</span> {{ projectData.projectName || "" }}</div>
 				<div :title="projectLocal"><span>项目地址：</span> {{ projectLocal }}</div>
 				<div><span>项目经理：</span> {{ projectData.projectManage || "" }}</div>
@@ -10,6 +10,15 @@
 				<div><span>开工日期：</span> {{ projectData.startWorkDate || "" }}</div>
 				<div><span>项目编号：</span> {{ projectData.projectNumber || "" }}</div>
 				<div><span>工程类别：</span> {{ projectData.projectType ? projectTypeEnum[projectData.projectType - 1].name : "" }}</div>
+			</div> -->
+			<div class="projectInfo">
+				<div><span>建设地点：</span> 南平市建阳区</div>
+				<div><span>变电容量：</span> 2x50兆伏安</div>
+				<div><span>间隔名称：</span> 110千伏江坑问隔</div>
+				<div><span>架空线路：</span> 67.49公里</div>
+				<div><span>电缆长度：</span> 0.31公里</div>
+				<div><span>通讯光缆：</span> 74.79公里</div>
+				<div><span>总投资：</span> 11762万元</div>
 			</div>
 		</Card>
 	</div>
@@ -63,11 +72,12 @@ watch(
 		div {
 			width: 95%;
 			height: 12%;
-			font-size: 14px;
+			font-size: 15px;
 			white-space: nowrap; //单行
 			overflow: hidden;
 			text-overflow: ellipsis;
 			span {
+				margin-right: 3%;
 				color: #ccc;
 			}
 		}

src/views/sevenLargeScreen/digitalConstruction/carPosition/index.vue

@@ -451,7 +451,7 @@ function getTodayTrack(day) {
 			currentData = res.result[0];
 			for (let index = 0; index < res.result.length; index++) {
 				const element = res.result[index];
-				path.push([element.longitude, element.latitude]);
+				path.unshift([element.longitude, element.latitude]);
 			}
 			trackMapInit(path, currentData);
 		}
@@ -801,6 +801,7 @@ function selectChange(e) {
 
 // 轨迹绘制地图
 function trackMapInit(path: any, item: any) {
+	lineArr = path;
 	// lineArr = [
 	//   [116.478935, 39.997761],
 	//   [116.478939, 39.997825],
@@ -859,56 +860,6 @@ function trackMapInit(path: any, item: any) {
 	// 将 markers 添加到地图
 	map.add([startMarker, endMarker]);
 
-	function createMarkerAndInfoWindow() {
-		marker = new AMap.Marker({
-			map: map,
-			position: path[0],
-			icon: "https://webapi.amap.com/images/car.png",
-			offset: new AMap.Pixel(-26, -13),
-			autoRotation: true,
-			angle: -90
-		});
-		marker.on("click", markerClick);
-		marker.emit("click", { target: marker });
-	}
-
-	// 使用逆地理编码获取地址信息
-	let address = "未知";
-	AMap.plugin("AMap.Geocoder", function () {
-		let geocoder = new AMap.Geocoder();
-
-		geocoder.getAddress(path[0], function (status, result) {
-			if (status === "complete" && result.info === "OK") {
-				address = result.regeocode.formattedAddress; // 获取中文地址名称
-				console.log("位置", address);
-				createMarkerAndInfoWindow();
-			} else {
-				console.log("获取地址信息失败");
-				createMarkerAndInfoWindow();
-			}
-		});
-	});
-
-	lineArr = path;
-
-	function markerClick(e) {
-		let lnglat = e.target.getPosition();
-
-		//构建信息窗体中显示的内容
-		console.log(e);
-		let info = [];
-
-		info.push('<p style="padding:7px;">设备序号:  ' + item.devSn + "</p>");
-		info.push('<p style="padding:7px;">车辆/人员名称: ' + item.numberPlate + "</p>");
-		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
-		info.push('<p style="padding:7px;">位置: ' + address + "</p>");
-		var infoWindow = new AMap.InfoWindow({
-			offset: new AMap.Pixel(10, -30),
-			content: info.join("") //使用默认信息窗体框样式，显示信息内容
-		});
-		infoWindow.open(map, e.target.getPosition());
-	}
-
 	// 绘制轨迹
 	let polyline = new AMap.Polyline({
 		map: map,
@@ -929,11 +880,57 @@ function trackMapInit(path: any, item: any) {
 		// strokeStyle: "solid"  //线样式
 	});
 
-	marker.on("moving", function (e) {
+	function createMarkerAndInfoWindow() {
-		console.log("播放",e)
+		marker = new AMap.Marker({
-		passedPolyline.setPath(e.passedPath);
+			map: map,
+			position: path[0],
+			icon: "https://webapi.amap.com/images/car.png",
+			offset: new AMap.Pixel(-26, -13),
+			autoRotation: true,
+			angle: -90
+		});
+		marker.on("click", markerClick);
+		marker.emit("click", { target: marker });
+		marker.on("moving", function (e) {
+			passedPolyline.setPath(e.passedPath);
+		});
+	}
+
+	// 使用逆地理编码获取地址信息
+	let address = "未知";
+	AMap.plugin("AMap.Geocoder", function () {
+		let geocoder = new AMap.Geocoder();
+
+		geocoder.getAddress(path[0], function (status, result) {
+			if (status === "complete" && result.info === "OK") {
+				address = result.regeocode.formattedAddress; // 获取中文地址名称
+				console.log("位置", address);
+				createMarkerAndInfoWindow();
+			} else {
+				console.log("获取地址信息失败");
+				createMarkerAndInfoWindow();
+			}
+		});
 	});
 
+	function markerClick(e) {
+		let lnglat = e.target.getPosition();
+
+		//构建信息窗体中显示的内容
+		console.log(e);
+		let info = [];
+
+		info.push('<p style="padding:7px;">设备序号:  ' + item.devSn + "</p>");
+		info.push('<p style="padding:7px;">车辆/人员名称: ' + item.numberPlate + "</p>");
+		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
+		info.push('<p style="padding:7px;">位置: ' + address + "</p>");
+		var infoWindow = new AMap.InfoWindow({
+			offset: new AMap.Pixel(10, -30),
+			content: info.join("") //使用默认信息窗体框样式，显示信息内容
+		});
+		infoWindow.open(map, e.target.getPosition());
+	}
+
 	map.setFitView();
 }
 function startAnimation() {

src/views/sevenLargeScreen/headNoise/leftCenter.vue

@@ -11,13 +11,13 @@
 			</div>
 		</div>
 		<div class="decivList">
-			<div class="menuDev" v-for="item in deciData" :class="item.isClosed == 0 ? 'online' : 'offline'">
+			<div class="menuDev" v-for="item in deciData" :class="item.devOnline == 1 ? 'online' : 'offline'">
 				<div class="decName">
-					<span v-show="item.isClosed == 1"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
+					<span v-show="item.devOnline == 1"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
-					<span v-show="item.isClosed == 2"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span>
+					<span v-show="item.devOnline == 0"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span>
 					<span> {{ item.deviceName }}</span>
 				</div>
-				<div class="status">{{ item.isClosed == 1 ? "在线" : "离线" }}</div>
+				<div class="status">{{ item.devOnline == 1 ? "在线" : "离线" }}</div>
 			</div>
 			<div class="notoDta" v-if="deciData.length == 0">
 				<img src="@/assets/images/noData.png" alt="" />
@@ -46,7 +46,7 @@ const getList = async () => {
 		onlineDevNum.value = 0;
 		offlineDevNum.value = 0;
 		deciData.value.forEach(element => {
-			if (element.isClosed == 2) {
+			if (element.devOnline == 0) {
 				offlineDevNum.value++;
 			} else {
 				onlineDevNum.value++;

src/views/sevenLargeScreen/indexL.vue

@@ -4,7 +4,8 @@
 			<div class="header">
 				<!-- <div class="hearderIcon"><img src="@/assets/images/jxjLogo.png" alt="" /></div> -->
 				<span class="projectTitle">
-					<p>数字化项目监管平台</p>
+					<!-- <p>数字化项目监管平台</p> -->
+					<p>江坑110kv变电站智慧工地</p>
 				</span>
 				<div class="rightIcon" @click.stop>
 					<div class="time">{{ nowTime }}</div>
@@ -478,7 +479,7 @@ function jumpBgd() {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			font-size: 42px;
+			font-size: 44px;
 			color: #fff;
 			font-family: YouSheBiaoTiHei;
 		}

src/views/sevenLargeScreen/largeMachinery/erectCrane/topCenter.vue

@@ -82,7 +82,7 @@
 					</div>
 				</div>
 			</div>
-			{{ baseURL }}
+			<!-- {{ baseURL }} -->
 			<div class="select-right">
 				<el-select v-model="devValue" class="m-2" placeholder="请选择" size="small" @change="selectChange">
 					<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
@@ -95,7 +95,7 @@
 <script lang="ts" setup>
 import Card from "@/components/card.vue";
 import { reactive, ref, onMounted } from "vue";
-const baseURL = import.meta.env.VITE_API_URL as string;
+// const baseURL = import.meta.env.VITE_API_URL as string;
 let devValue = ref(1 as any);
 let noiseList = ref([
 	{

src/views/sevenLargeScreen/safetyManagement/securityManagement/centerBottom.vue

@@ -2,6 +2,10 @@
 	<Card title="责任区域分析">
 		<div class="centerBottom">
 			<div id="echartsCenterBottom" style="width: 100%; height: 100%"></div>
+			<div class="notoDta" v-if="noData">
+				<img src="@/assets/images/noData.png" alt="" />
+				<p>暂无数据</p>
+			</div>
 		</div>
 	</Card>
 </template>
@@ -11,7 +15,9 @@ import Card from "@/components/card.vue";
 import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
 import symbolIcon from "@/assets/images/lineSymbol.png";
-
+import { getCountHiddenDangerInspectRegion } from "@/api/modules/securityManagement";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
 let yData = ref([10, 20, 30, 10, 2, 6, 12] as any);
 let xData = ref(["责任区域1", "责任区域2", "责任区域3", "责任区域4", "责任区域5", "责任区域6", "责任区域7"] as any);
 
@@ -101,6 +107,21 @@ function draw() {
 				}
 			}
 		},
+		dataZoom: [
+			{
+				type: "slider",
+				start: 0,
+				end: 50, // 控制缩略轴默认展示的数据范围
+				show: true, //显示滚动条
+				height: 0,
+				bottom: "8%",
+				showDetail: false,
+				moveHandleStyle: {
+					color: "#4AC0F3"
+				},
+				backgroundColor: "#193C8D"
+			}
+		],
 		// color: ["#e54035"],
 		series: [
 			{
@@ -158,8 +179,23 @@ function draw() {
 	};
 	echartsTest.setOption(option);
 }
+let noData = ref(false as any);
+// 责任区域分析
+const getDutyArea = async () => {
+	const res: any = await getCountHiddenDangerInspectRegion({ projectSn: store.sn });
+	console.log("责任区域分析", res);
+	xData.value = res.result.data.map((item: any) => item.name);
+	yData.value = res.result.data.map((item: any) => item.count);
+	if (res.result.data.length > 0) {
+		draw();
+	} else {
+		noData.value = true;
+	}
+};
+
 onMounted(() => {
-	draw();
+	// draw();
+	getDutyArea();
 });
 </script>
 
@@ -167,5 +203,22 @@ onMounted(() => {
 .centerBottom {
 	width: 100%;
 	height: 100%;
+	position: relative;
+	.notoDta {
+		top: 25%;
+		width: 40%;
+		left: 35%;
+		position: absolute;
+		text-align: center;
+		img {
+			width: 40%;
+			margin: 5% 30%;
+		}
+		p {
+			color: #fff;
+			font-size: calc(100vw * 14 / 1920);
+			margin: -6% 37%;
+		}
+	}
 }
 </style>

src/views/sevenLargeScreen/videoManagement/index.vue

@@ -32,6 +32,11 @@
 					<div class="select-right" @click="goToSafeHelmet" v-if="COMPANY === 'syhy'">
 						<div class="safe-helmet">智能安全帽</div>
 					</div>
+					<!-- 萤石云播放 -->
+					<div ref="playWndBox" style="width: 100%; height: 100%; margin: 0 5% 2% 5%" v-if="videoType === 1">
+						<ysyPlayAndPlayback :ref="'ysy'" :ysyParams="ysyParams"></ysyPlayAndPlayback>
+					</div>
+					<!-- 播放海康 -->
 					<div ref="playWndBox" style="width: 90%; height: 100%; margin: 0 5% 2% 5%">
 						<div
 							id="playWnd"
@@ -50,11 +55,16 @@
 
 <script setup lang="ts">
 import Card from "@/components/card.vue";
+import ysyPlayAndPlayback from "@/components/ysyPlayAndPlayback.vue";
+
 import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Ref } from "vue";
 import { ElMessage } from "element-plus";
 import { GlobalStore } from "@/stores";
 import { selectProjectVideoListApi, getSafeHatSessionApi } from "@/api/modules/video";
 import { COMPANY } from "@/config/config";
+let videoType = ref("") as any;
+let ysyParams = ref({} as any);
+
 let shipinList = ref([] as any);
 const store = GlobalStore();
 const playWndBox = ref(null);
@@ -95,8 +105,11 @@ let objData = ref({
 
 //设备列表的点击操作
 const checkVideo = async (item: any) => {
+	ysyParams.value = item;
 	cameraIndexCode.value = item.serialNumber;
-	previewVideo(cameraIndexCode.value);
+	if (videoType.value !== 1) {
+		previewVideo(cameraIndexCode.value);
+	}
 };
 // 定义个变量保存播放ID
 // let firstVideoId = ref("" as any);
@@ -117,6 +130,15 @@ const getVideoList = async () => {
 	previewVideo(res.result.videoList[0].serialNumber);
 	console.log(objData.value);
 	console.log("视频列表", res);
+	ysyParams.value = res.result.videoList[0];
+	videoType.value = res.result.videoList[0].videoType;
+	if (res.result.videoList[0].videoType === 1) {
+		oWebControl.JS_HideWnd();
+		// 销毁当前播放的视频
+		oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
+		// 断开与插件服务连接
+		oWebControl.JS_Disconnect();
+	}
 };
 onMounted(async () => {
 	setTimeout(() => {