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

<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
	<div class="projectContent">
		<div class="left">
			<div class="finish-restTime">
				距离完工还有
				<span v-if="!projectSurplusDayNum" class="dayImg">0</span>
				<span v-else class="dayImg" v-for="item in projectSurplusDayNum" :key="item">{{ item }}</span>
				<span style="margin-left: 4%">天</span>
			</div>
			<!-- <div class="line1" style="display: flex">
				<span style="margin-left: 15px">距离完工还有</span>
				<div class="numberCard" v-for="(item, i) in projectSurplusDayNum" :key="i">{{ item }}</div>
				<span style="margin-left: 5px">天</span>
			</div> -->
			<!-- @openDialog="openPeopleCountDialog" -->
			<leftTop class="leftTop"></leftTop>
			<leftBottom class="leftBottom"></leftBottom>
		</div>
		<div class="center">
			<centerTop class="centerTop"></centerTop>
			<centerBottom class="centerBottom"></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/overviewScreen/commandCenter/leftTop.vue";
import leftBottom from "@/views/overviewScreen/commandCenter/leftBottom.vue";
import centerTop from "@/views/overviewScreen/commandCenter/centerTop.vue";
import centerBottom from "@/views/overviewScreen/commandCenter/centerBottom.vue";
import rightAll from "@/views/overviewScreen/commandCenter/rightAll.vue";
import { GlobalStore } from "@/stores";
import { getCountTaskProgressApi } from "@/api/modules/agjtCommandApi";
import dataDialog from "@/views/commandScreen/dialogCompnnents/data-dialog.vue";
// import * as mqtt from "mqtt/dist/mqtt.min";

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

// const projectData = ref(null as any);
// 弹窗
const partyBuildRef = ref();
const openPeopleCountDialog = (index: any) => {
	console.log("~~~~~~~~~~~~~~", index);
	partyBuildRef.value.openDialog(index);
	// console.log(partyBuildRef.value);
};
// 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);
// 	console.log("11111111~~~~~~~~~~~", client);
// 	// mqtt连接   +"/#"  +workerId
// 	client.on("connect", () => {
// 		// console.log('连接成功:', this.topicName + this.userId)
// 		// this.topicName + this.userId
// 		client.subscribe("zjsjTopic" + store.userId + "/bigScreen/emergency/alert", { qos: 0 }, (error: any) => {
// 			if (!error) {
// 				console.log("订阅成功123");
// 			} else {
// 				console.log("订阅失败");
// 			}
// 		});
// 	});
// 	// 接收消息处理
// 	client.on("message", (topic: any, message: any) => {
// 		console.log("~~~~~~~", topic, JSON.parse(message));
// 		const result = JSON.parse(message);
// 		openPeopleCountDialog({
// 			index: 10,
// 			title: "人员呼叫",
// 			timeOut: 60,
// 			timeFlag: null,
// 			show: true,
// 			mapsDetail: JSON.parse(result.payload)
// 		});
// 	});
// 	// 断开发起重连
// 	// client.on("reconnect", (error) => {
// 	//   console.log("正在重连:", error);
// 	// });
// 	// 链接异常处理
// 	client.on("error", (error: any) => {
// 		console.log("连接失败:", error);
// 	});
// };
// 项目剩余天数
let projectSurplusDayNum = ref("" as any);
// 获取项目总进度/项目剩余天数
const getCountTaskProgress = async (showLoading: boolean) => {
	const res: any = await getCountTaskProgressApi(
		{
			projectSn: store.sn
		},
		showLoading
	);
	if (res.result) {
		console.log("项目总进度/项目剩余天数", res);
		projectSurplusDayNum.value = res.result.projectSurplusDayNum + "";
	}
};
onMounted(() => {
	getCountTaskProgress(false);
	// 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>
.finish-restTime {
	width: 100%;
	position: absolute;
	left: 0.8%;
	top: -6.4%;
	color: #fff;
	line-height: 32px;
	font-size: 16px;
	.dayImg {
		margin-left: 2%;
		font-size: 26px;
		display: inline-block;
		width: 29px;
		height: 32px;
		font-family: sadigitalNumber;
		background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
		background-size: 100% 100%;
		text-align: center;
		color: #4ac0f3;
	}
}
.line1 {
	color: #fff;
	padding-top: 5px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	line-height: 30px;
	height: 30px;
	font-size: 16px;
	position: absolute;
	top: -53px;

	.numberCard {
		font-size: 26px;
		padding: 0 8px;
		margin-left: 3px;
		font-weight: bold;
		color: #47bcec;
		background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
		background-size: 100% 100%;
	}
}

.projectContent {
	width: 100%;
	height: 100%;
	display: flex;

	.left {
		height: 100%;
		width: 26%;
		transform: translateY(0px);

		.leftTop {
			height: 31%;
		}

		.leftBottom {
			height: 69%;
			margin: 1% 0;
		}
	}

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

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

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

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