七参数大屏-塔吊监测-升降机监测监控对接

public/static/bim.html

@@ -14,9 +14,12 @@
 		<div id="domId" style="width: 100%; height: 98vh"></div>
 		<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
 		<script>
+			var token = JSON.parse(localStorage.getItem('bimToken'));
+         console.log('取到的token',token);
 			let viewer3D;
 			let app;
-			let viewToken = "044bb2418cfd43268ec175abae26dc62";
+			let viewToken = token;
+			console.log('viewToken',viewToken);
 			let loaderConfig = new BimfaceSDKLoaderConfig();
 			loaderConfig.viewToken = viewToken;
 			BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
@@ -33,6 +36,7 @@
 				console.log(error);
 			}
 			
+		
 		</script>
 	</body>
 </html>

src/api/modules/elevator.ts

@@ -43,6 +43,11 @@ export const getRelatedInfoApi = (params: {}) => {
 	return http.get(BASEURL + `/xmgl/lifter/getRelatedInfo`, params);
 };
 
+// 通过id查询升降机基本信息信息
+export const getLifterQueryByIdApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/lifter/queryById`, params);
+};
+
 
 
 

src/api/modules/tower.ts

@@ -34,4 +34,10 @@ export const getRelatedInfoApi = (params: {}) => {
 // 右下-实时数据
 export const getNewestDataApi = (params: {}) => {
 	return http.post(BASEURL + `/xmgl/towerCurrentData/getNewestTowerCurrentData`, params);
+};
+
+
+// 查询启用的视频配置
+export const getUseProjectVideoConfigApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/projectVideoConfig/getUseProjectVideoConfig`, params);
 };

src/views/sevenLargeScreen/bImModel/index.vue

@@ -10,24 +10,20 @@ import { getSelectProjectBimfaceList, getViewTokenByFileId } from "@/api/modules
 import { ref, onMounted } from "vue";
 const store = GlobalStore();
 const url = ref("");
-const iframe = ref(null);
+const token = ref("" as any);
-const token = ref("");
-// function load() {
-// 	iframe.value.contentWindow.postMessage("Message from parent：load complate！");
-// }
 //获取bim列表
 function getBimfaceList() {
 	getSelectProjectBimfaceList({ projectSn: store.sn }).then(res => {
 		res.result.page.records.forEach(item => {
 			if (item.isEnable) {
 				token.value = res.result.viewToken;
-				console.log("token的值", token);
+				console.log("token的值", token.value);
-				iframe.value.contentWindow.postMessage({ token });
+				localStorage.setItem('bimToken', JSON.stringify(token.value));
-				// getBimfaceToken(item.fileId);
 			}
 		});
 	});
 }
+
 //获取token
 // function getBimfaceToken(fileId) {
 // 	getViewTokenByFileId({ projectSn: store.sn, fileId }).then(res => {

src/views/sevenLargeScreen/distributionMonitoring/topLeft.vue

@@ -17,6 +17,7 @@
 					</div>
 				</div>
 				<div class="decivList">
+					<el-scrollbar style="height:90%">
 					<div class="menuDev" v-for="item in deviceData.list" :key="item.id" :class="item.isClosed != 0 ? 'online' : 'offline'">
 						<div class="decName">
 							<span v-show="item.isClosed != 0"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
@@ -25,6 +26,9 @@
 						</div>
 						<div class="status">{{ item.isClosed != 0 ? "在线" : "离线" }}</div>
 					</div>
+				
+				</el-scrollbar>
+			
 				</div>
 			</div>
 		</div>
@@ -424,30 +428,7 @@ const option = reactive({
 		}
 	]
 });
-// let deciData = reactive({
+
-// 	devicList: [
-// 		{
-// 			decName: "配电箱设备1",
-// 			status: 0
-// 		},
-// 		{
-// 			decName: "配电箱设备2",
-// 			status: 1
-// 		},
-// 		{
-// 			decName: "配电箱设备3",
-// 			status: 0
-// 		},
-// 		{
-// 			decName: "配电箱设备4",
-// 			status: 0
-// 		},
-// 		{
-// 			decName: "配电箱设备5",
-// 			status: 0
-// 		}
-// 	]
-// });
 function drawChart() {
 	let leftTopEcharts = echarts.init(document.getElementById("topLeftEcharts"));
 	leftTopEcharts.setOption(option);
@@ -562,5 +543,6 @@ onMounted(() => {
 			}
 		}
 	}
+
 }
 </style>

src/views/sevenLargeScreen/elevatorMonitoring/eleMonitor.vue

@@ -12,13 +12,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, watch, Ref } from "vue";
+import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Ref } from "vue";
-import { ElMessage, ElMessageBox, ElStep } from "element-plus";
+import { ElMessage } from "element-plus";
 import { GlobalStore } from "@/stores";
-import { useRouter } from "vue-router";
+import { getLifterQueryByIdApi } from "@/api/modules/elevator";
-const router = useRouter();
+import { getUseProjectVideoConfigApi } from "@/api/modules/tower";
+import mitts from "@/utils/bus"; //兄弟组件传值
+let shipinList = ref([] as any);
 const store = GlobalStore();
-const parentTitle = ref<string>("");
 const playWndBox = ref(null);
 let playWndHeight = ref("");
 let playWndWidth = ref("");
@@ -27,47 +28,45 @@ let initCount = ref(0);
 let oWebControl = ref(null);
 let cameraIndexCode = ref<Array<string>>([]);
 let objData = ref({
-	appkey: "24017757", //海康提供的appkey
+	appkey: "23914849", //海康提供的appkey
-	ip: "182.101.141.23", //海康提供的ip
+	ip: "221.12.137.200", //海康提供的ip
-	secret: "VJz0FbzmE6drPQ7egsBi", //海康提供的secret
+	secret: "UV4xyujBtOGA4D0kvXG7", //海康提供的secret
-	port: 18443,
+	port: 444,
 	playMode: 0, // 0 预览 1回放
 	layout: "1x1" //页面展示的模块数【16】
 });
+let eletorSelectId = ref("" as any);
 
-const changeTreeFilter = async (item: {
+// 获取升降机监控点
-	data: { code: string | null; title: any; children: any[] };
+const getTowerDetail = async () => {
-	parent: { data: { title: any } };
+	const res: any = await getLifterQueryByIdApi({
-}) => {
+		id: eletorSelectId.value
-	console.log("我是你要的数据", item);
+	});
-	//给该方法传入监控编码
+	if (res.result.videoList.length > 0) {
-	cameraIndexCode.value = [item.data.code];
+		cameraIndexCode.value = res.result.videoList[0].serialNumber;
-	parentTitle.value = item.parent.data.title || item.data.title;
+		previewVideo(cameraIndexCode.value);
-};
+	} else {
-// 获取视频流
+		cameraIndexCode.value = "";
-const getVideo = async () => {
+		previewVideo();
-	// await sendRequest({ code: cameraIndexCode.value });
-	// await getpreviewURL({ cameraIndexCode: cameraIndexCode.value });
-};
-
-// 监听修改密码的弹窗
-watch(
-	() => store.editPassword,
-	val => {
-		val ? oWebControl.JS_HideWnd() : oWebControl.JS_ShowWnd();
 	}
-	// {
+};
-	// 	immediate: true
+//获取升降机视频播放配置
-	// }
+const gerEletorUserVideo = async () => {
-);
+	const res = await getUseProjectVideoConfigApi({
-
+		projectSn: store.sn
-/** 设备列表的点击操作 */
+	});
-
+	objData.value.appkey = res.result.appId;
-// window.addEventListener("keyup", () => {
+	objData.value.ip = res.result.account;
-// 	oWebControl.JS_CuttingPartWindow(0, 0, 20, 20);
+	objData.value.secret = res.result.appSecret;
-// });
+	objData.value.port = res.result.password;
-
+	await getTowerDetail();
+};
 onMounted(async () => {
+	mitts.on("elevaTorSelectId", e => {
+		eletorSelectId.value = e;
+		gerEletorUserVideo();
+	});
+
 	// 获取页面的实例对象 ee
 	const pageInstance = getCurrentInstance();
 	// 获取dom节点对象
@@ -79,7 +78,6 @@ onMounted(async () => {
 	window.addEventListener("scroll", () => {
 		if (oWebControl.value == undefined) {
 			oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
-			// setWndCover();
 		}
 	});
 
@@ -95,8 +93,8 @@ onMounted(async () => {
 	});
 
 	// 初始化播放器插件
-	nextTick(() => {
+	nextTick(async () => {
-		initPlugin();
+		await initPlugin();
 	});
 });
 
@@ -213,6 +211,7 @@ const init = (callback: (() => void) | undefined) => {
 				argument: JSON.stringify({
 					appkey: appkey, //API网关提供的appkey
 					secret: secret, //API网关提供的secret
+					// ip: ip + ":" + port, //API网关IP地址
 					ip: ip, //API网关IP地址
 					playMode: playMode, //播放模式（决定显示预览还是回放界面）
 					port: port, //端口
@@ -264,6 +263,7 @@ const getPubKey = (callback: { (): void; (): void }) => {
 // 调用这个函数可进行视频播放
 // 视频预览功能
 const previewVideo = (data: string | null) => {
+	console.log("监控点编号值", data);
 	let cameraIndexCode = data; // 获取输入的监控点编号值，必填
 	let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
 	let transMode = 1; // 传输协议：0-UDP，1-TCP
@@ -287,6 +287,7 @@ const previewVideo = (data: string | null) => {
 };
 </script>
 
+
 <style lang="scss" scoped>
 .main {
 	border-radius: 8px;

src/views/sevenLargeScreen/elevatorMonitoring/leftCenter.vue

@@ -86,7 +86,7 @@ onMounted(() => {
 		margin: -1% 0% 2% 5%;
 		display: flex;
 		// overflow: scroll;
-	  // white-space: nowrap;
+		// white-space: nowrap;
 		.carNum {
 			width: 13%;
 			height: 90%;
@@ -121,6 +121,10 @@ onMounted(() => {
 			.text2 {
 				font-size: calc(100vw * 12 / 1920);
 				color: #65d7f9;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				margin-left: 9%;
 			}
 		}
 	}

src/views/sevenLargeScreen/elevatorMonitoring/right.vue

@@ -9,7 +9,7 @@
 						:key="index"
 						:label="item.devName"
 						:value="item.id"
-						@click="checkItem(item.devSn)"
+						@click="checkItem(item)"
 					/>
 				</el-select>
 			</div>
@@ -127,6 +127,7 @@
 </template>
 
 <script lang="ts" setup>
+import mitts from "@/utils/bus"; //兄弟组件传值
 import Monitor from "@/views/sevenLargeScreen/elevatorMonitoring/eleMonitor.vue";
 import {
 	 getLifterListApi,
@@ -143,7 +144,13 @@ let lifterDevSn = ref("" as any);
 
 // 下拉框选中
 function checkItem(val: any) {
-	lifterDevSn.value = val;
+	console.log('下拉框选中',val);
+	
+	lifterDevSn.value = val.devSn;
+	mitts.emit("elevaTorSelectId", val.id);
+
+	console.log('发送的id',val.id);
+
 	getLifterList()
 }
 

src/views/sevenLargeScreen/towerCraneMonitoring/leftTop.vue

@@ -75,13 +75,13 @@
 							>{{ towerSituationData.devCount.devOnline }}/{{ towerSituationData.devCount.devNum }}</span
 						>
 					</div>
-					<div class="towerList">
+					<el-scrollbar style="height: 50%">
 						<div class="menStyleList" v-for="item in towerSituationData.deviceList" :key="item.id">
 							<span class="text">{{ item.devName }}</span>
 							<span class="devState" v-if="item.devOnline == 1" style="color: #82fbea"> 在线 </span>
 							<span class="devState" v-else style="color: #ec6266"> 离线 </span>
 						</div>
-					</div>
+					</el-scrollbar>
 				</div>
 			</div>
 		</div>
@@ -193,8 +193,8 @@ onMounted(async () => {
 		}
 	}
 }
-.towerList {
+// .towerList {
-	overflow: scroll;
+// 	overflow: scroll;
-	height: 50px;
+// 	height: 50px;
-}
+// }
 </style>

src/views/sevenLargeScreen/towerCraneMonitoring/monitor.vue

@@ -12,13 +12,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref,onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Ref } from "vue";
+import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Ref } from "vue";
-import { ElMessage} from "element-plus";
+import { ElMessage } from "element-plus";
 import { GlobalStore } from "@/stores";
-import { selectProjectVideoListApi} from "@/api/modules/video";
+import { getQueryByIdApi, getUseProjectVideoConfigApi } from "@/api/modules/tower";
-
+import mitts from "@/utils/bus"; //兄弟组件传值
 let shipinList = ref([] as any);
-
 const store = GlobalStore();
 const playWndBox = ref(null);
 let playWndHeight = ref("");
@@ -35,30 +34,43 @@ let objData = ref({
 	playMode: 0, // 0 预览 1回放
 	layout: "1x1" //页面展示的模块数【16】
 });
+let selectId = ref("" as any);
 
-// //设备列表的点击操作
+// 获取塔吊监控点
-// const checkVideo = async (item: any) => {
+const getTowerDetail = async () => {
-// 	cameraIndexCode.value = item.serialNumber;
+	const res: any = await getQueryByIdApi({
-// 	previewVideo(cameraIndexCode.value);
+		id: selectId.value
-// };
+	});
-//获取视频列表
+	if (res.result) {
-const getVideoList = async () => {
+		cameraIndexCode.value = res.result.videoList[0].serialNumber;
-	const res = await selectProjectVideoListApi({
+
+		console.log("塔吊监控点", cameraIndexCode.value);
+		previewVideo(cameraIndexCode.value);
+	}
+};
+//获取塔吊视频播放配置
+const gerUserVideo = async () => {
+	const res = await getUseProjectVideoConfigApi({
 		projectSn: store.sn
 	});
-	shipinList.value = res.result.videoList[0].list;
+	console.log("获取塔吊视频播放配置", res);
-	objData.value.appkey = res.result.videoList[0].list[0].appId;
+	objData.value.appkey = res.result.appId;
-	objData.value.ip = res.result.videoList[0].list[0].account;
+	objData.value.ip = res.result.account;
-	objData.value.secret = res.result.videoList[0].list[0].appSecret;
+	objData.value.secret = res.result.appSecret;
-	objData.value.port = res.result.videoList[0].list[0].password;
+	objData.value.port = res.result.password;
-	cameraIndexCode.value = res.result.videoList[0].list[0].serialNumber;
+	await getTowerDetail();
-	console.log("视频列表", res);
-	previewVideo(res.result.videoList[0].list[0].serialNumber);
 };
+let serialNumberValue=ref("" as any)
 onMounted(async () => {
-	setTimeout(() => {
+	mitts.on("serialNumberId", val => {
-		getVideoList();
+	previewVideo(val);//此项进入页面播放无效，待解决
-	}, 1500);
+		serialNumberValue.value=val
+	});
+	mitts.on("selectId", e => {
+		selectId.value = e;
+		gerUserVideo();
+	});
+
 	// 获取页面的实例对象 ee
 	const pageInstance = getCurrentInstance();
 	// 获取dom节点对象
@@ -85,7 +97,7 @@ onMounted(async () => {
 	});
 
 	// 初始化播放器插件
-	nextTick(async() => {
+	nextTick(async () => {
 		await initPlugin();
 	});
 });
@@ -255,6 +267,8 @@ const getPubKey = (callback: { (): void; (): void }) => {
 // 调用这个函数可进行视频播放
 // 视频预览功能
 const previewVideo = (data: string | null) => {
+	console.log("监控点编号值", data);
+
 	let cameraIndexCode = data; // 获取输入的监控点编号值，必填
 	let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
 	let transMode = 1; // 传输协议：0-UDP，1-TCP

src/views/sevenLargeScreen/towerCraneMonitoring/right.vue

@@ -191,6 +191,8 @@
 import Monitor from "@/views/sevenLargeScreen/towerCraneMonitoring/monitor.vue";
 import { onMounted, ref } from "vue";
 // import * as echarts from "echarts";
+import mitts from "@/utils/bus"; //兄弟组件传值
+
 import {
 	getQueryByIdApi,
 	getTowerNumAndAlarmApi,
@@ -227,7 +229,9 @@ function moveAnimation() {
 
 // 下拉框选中
 function selectTower(e: any) {
-	console.log("选中", e);
+	mitts.emit("selectId", e);
+	console.log('发送的id',e);
+
 	getTowerDetail();
 	getTowerData();
 }
@@ -242,6 +246,7 @@ const getTowerDetail = async () => {
 	if (res.result) {
 		towerDetailData.value = res.result;
 		towerDevSn.value = res.result.devSn;
+		mitts.emit("serialNumberId", res.result.videoList[0].serialNumber);
 		console.log("塔吊信息详情", res.result);
 	}
 };

src/views/sevenLargeScreen/vehicleManagement/bottom.vue

@@ -26,6 +26,10 @@
 					<div>{{ item.releaseOperation }}</div>
 					<div>{{ item.vehicleStateName }}</div>
 				</div>
+				<div class="notoDta" v-if="vehicleData.length == 0">
+					<img src="@/assets/images/noData.png" alt="" />
+					<p>暂无数据</p>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -157,7 +161,7 @@ const list = reactive([
 	}
 ]);
 
-let vehicleData = ref(null as any);
+let vehicleData = ref([] as any);
 const getVehicleList = async () => {
 	const res: any = await getEntryAndExitRecordsApi({
 		projectSn: store.sn
@@ -235,4 +239,19 @@ onMounted(async () => {
 		}
 	}
 }
+.notoDta {
+		top: 73%;
+		width: 12%;
+		left: 44%;
+		position: absolute;
+		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

@@ -21,6 +21,10 @@
 						</div>
 					</div>
 				</el-scrollbar>
+				<div class="notoDta" v-if="shipinList.length == 0">
+					<img src="@/assets/images/noData.png" alt="" />
+					<p>暂无数据</p>
+				</div>
 			</div>
 		</div>
 		<div class="right">
@@ -63,7 +67,7 @@ let objData = ref({
 	secret: "UV4xyujBtOGA4D0kvXG7", //海康提供的secret
 	port: 444,
 	playMode: 0, // 0 预览 1回放
-	layout: "2x2" //页面展示的模块数【16】
+	layout: "1x1" //页面展示的模块数【16】
 });
 
 //设备列表的点击操作
@@ -419,5 +423,20 @@ const previewVideo = (data: string | null) => {
 			}
 		}
 	}
+	.notoDta {
+		top: 50%;
+		width: 12%;
+		left: 2%;
+		position: absolute;
+		img {
+			width: 40%;
+			margin: 5% 30%;
+		}
+		p {
+			color: #fff;
+			font-size: calc(100vw * 14 / 1920);
+			margin: -6% 37%;
+		}
+	}
 }
 </style>