zhgdlarge/src/views/commandScreen/commandCenter/index.vue

<template>
	<div class="projectContent">
		<div class="left">
			<leftTop class="leftTop"></leftTop>
			<leftBottom class="leftBottom" @openDialog="openPeopleCountDialog"></leftBottom>
		</div>
		<div class="center">
			<centerTop class="centerTop" @openDialog="openPeopleCountDialog"></centerTop>
			<centerBottom class="centerBottom" @openDialog="openPeopleCountDialog"></centerBottom>
		</div>
		<div class="right">
			<rightAll class="rightAll" @openDialog="openPeopleCountDialog"></rightAll>
		</div>
		<dataDialog ref="partyBuildRef"></dataDialog>
	</div>
</template>

<script setup lang="ts">
import leftTop from "@/views/commandScreen/commandCenter/leftTop.vue";
import leftBottom from "@/views/commandScreen/commandCenter/leftBottom.vue";
import centerTop from "@/views/commandScreen/commandCenter/centerTop.vue";
import centerBottom from "@/views/commandScreen/commandCenter/centerBottom.vue";
import rightAll from "@/views/commandScreen/commandCenter/rightAll.vue";
import { GlobalStore } from "@/stores";
import dataDialog from "../dialogCompnnents/data-dialog.vue";
import * as mqtt from "mqtt/dist/mqtt.min";

// import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview";
import { ref, onMounted } from "vue";
const store = GlobalStore();
// const statisticsCount = ref(null as any);

// const projectData = ref(null as any);
// 弹窗
const partyBuildRef = ref();
const openPeopleCountDialog = (index: any) => {
	partyBuildRef.value.openDialog(index);
};
const options = {
	connectTimeout: 40000,
	clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
	username: "root",
	password: "123456",
	clean: true
};
// 监听mqtt下发信息然后刷新列表
const mqttMSG = () => {
	// this.userId = this.$store.state.userInfo.userId;
	// this.topicName = this.$store.state.userInfo.scope;
	const client = mqtt.connect("ws://jxj.zhgdyun.com:8083/mqtt", options);
	// mqtt连接   +"/#"  +workerId
	client.on("connect", () => {
		// this.topicName + this.userId
		client.subscribe("zjsjTopic" + store.userId + "/bigScreen/emergency/alert", { qos: 0 }, (error: any) => {
			if (!error) {
			} else {
			}
		});
	});
	// 接收消息处理
	client.on("message", (topic: any, message: any) => {
		const result = JSON.parse(message);
		openPeopleCountDialog({
			index: 10,
			title: "人员呼叫",
			timeOut: 60,
			timeFlag: null,
			show: true,
			mapsDetail: JSON.parse(result.payload)
		});
	});
	// 断开发起重连
	// client.on("reconnect", (error) => {
	// });
	// 链接异常处理
	client.on("error", (error: any) => {
	});
};
onMounted(() => {
	mqttMSG();
	// setTimeout(() => {
	// 	openPeopleCountDialog({
	// 		index: 10,
	// 		title: "人员呼叫",
	// 		timeOut: 10,
	// 		timeFlag: null,
	// 		show: true,
	// 		mapsDetail: {
	// 			alarmPersonId: "1795271026055901186",
	// 			alarmPersonName: "测试0528",
	// 			alarmTime: "2024-06-03 19:19:23",
	// 			departmentName: null,
	// 			disposalReport: null,
	// 			dispositionStatus: 1,
	// 			emergencyDetail: null,
	// 			emergencyTypeId: "-1",
	// 			emergencyTypeName: "一键报警",
	// 			enterpriseId: "1786223302337675266",
	// 			enterpriseName: "测试企业1",
	// 			id: "1797588887538925569",
	// 			incidentClosedStatus: 1,
	// 			incidentSite: "广东省深圳市宝安区福海路福永意库",
	// 			latitude: 22.67405,
	// 			livePicture: null,
	// 			liveVideoSituation: null,
	// 			longitude: 113.80984,
	// 			projectSn: "BD3137498CB84BF0969979E0342CDBCA",
	// 			situations: null,
	// 			teamName: "司机-1",
	// 			updateDate: "2024-06-03 19:19:30"
	// 		}
	// 	});
	// }, 3000);
	// setTimeout(() => {
	// 	openPeopleCountDialog({
	// 		index: 10,
	// 		title: "查看1",
	// 		timeOut: 10,
	// 		timeFlag: null,
	// 		show: true,
	// 		mapsDetail: {
	// 			alarmPersonId: "1795271026055901186",
	// 			alarmPersonName: "测试0528",
	// 			alarmTime: "2024-06-03 19:19:23",
	// 			departmentName: null,
	// 			disposalReport: null,
	// 			dispositionStatus: 1,
	// 			emergencyDetail: null,
	// 			emergencyTypeId: "-1",
	// 			emergencyTypeName: "一键报警",
	// 			enterpriseId: "1786223302337675266",
	// 			enterpriseName: "测试企业1",
	// 			id: "1797588887538925568",
	// 			incidentClosedStatus: 1,
	// 			incidentSite: "广东省深圳市宝安区福海路福永意库",
	// 			latitude: 22.67405,
	// 			livePicture: null,
	// 			liveVideoSituation: null,
	// 			longitude: 113.80984,
	// 			projectSn: "BD3137498CB84BF0969979E0342CDBCA",
	// 			situations: null,
	// 			teamName: "司机-1",
	// 			updateDate: "2024-06-03 19:19:30"
	// 		}
	// 	});
	// }, 6000);
});
</script>
<style lang="scss" scoped>
.projectContent {
	width: 100%;
	height: 100%;
	display: flex;

	.left {
		height: 109.5%;
		width: 26%;
		transform: translateY(-70px);

		.leftTop {
			height: 24.5%;
		}

		.leftBottom {
			height: 75.5%;
			margin: 3% 0 3% 0;
		}
	}

	.center {
		width: 46%;
		margin: 0 1%;

		.centerTop {
			height: 53.8%;
			// margin-bottom: 3%;
		}

		.centerBottom {
			height: 46.85%;
			margin: 1% 0 0 0;
		}
	}

	.right {
		width: 26%;
		height: 109.2%;
		transform: translateY(-70px);
		// .rightAll {
		// 	height: 32%;
		// }
		// .rightCenter {
		// 	height: 33%;
		// 	margin: 3% 0 3% 0;
		// }
		// .rightBottom {
		// 	height: 32%;
		// }
	}
}
</style>