wisdomisitezwfront-web/src/views/hz-enterprise/largeScreen/largeScreenOne/index.vue

<template>
	<div class="table-box">
		<div class="change-btn" @click="changeScreen">
			<img class="changeImg" src="@/assets/images/screenImg/change.png" alt="" />
		</div>
		<div class="leftBox">
			<div class="blockBox">
				<div class="blockTitle">
					<img src="@/assets/images/hzImg/xm/xmxx.png" alt="" class="title" />
				</div>
				<div class="blockContent" @click="showProjectDialog">
					<projectInfo :engineeringSn="engineeringSn" @projectData="getProjectData"></projectInfo>
				</div>
			</div>
			<projectInfoDialog v-show="projectDialog" @close="closeProjectDialog" :projectData="projectData"></projectInfoDialog>
			<div class="blockBox">
				<div class="blockTitle">
					<img src="@/assets/images/hzImg/xm/zfgl.png" alt="" class="title" />
				</div>
				<div class="blockContent chartContent">
					<div class="chartBox">
						<pieChart :colorArr="['#EEA959', '#4CC4F8']" title="支付率" :chartData="payData" :total="payRatio"></pieChart>
					</div>
					<div class="detailBox">
						<!-- <div class="item">
							<i class="rect"></i>
							<span class="name">请款金额</span>
							<span>607.5万</span>
						</div>
						<div class="item">
							<i class="rect"></i>
							<span class="name">变更金额</span>
							<span>7.5万</span>
						</div> -->
						<div class="item">
							<!-- <i class="color1 rect"></i> -->
							<span class="name">申请金额</span>
							<span>{{ dataObj.applyAmountTotal }}万</span>
						</div>
						<div class="item">
							<!-- <i class="color2 rect"></i> -->
							<span class="name">实际支付</span>
							<span>{{ dataObj.payAmountTotal }}万</span>
						</div>
						<div class="item">
							<!-- <i class="color1 rect"></i> -->
							<span class="name">年度申请金额</span>
							<span>{{ dataObj.applyAmountByYear }}万</span>
						</div>
						<div class="item">
							<!-- <i class="color2 rect"></i> -->
							<span class="name">年度实际支付</span>
							<span>{{ dataObj.payAmountByYear }}万</span>
						</div>
						<div class="item">
							<!-- <i class="color1 rect"></i> -->
							<span class="name">当月申请金额</span>
							<span>{{ dataObj.applyAmountByMonth }}万</span>
						</div>
						<div class="item">
							<!-- <i class="color2 rect"></i> -->
							<span class="name">当月实际支付</span>
							<span>{{ dataObj.payAmountByMonth }}万</span>
						</div>
					</div>
				</div>
			</div>
			<div class="blockBox">
				<div class="blockTitle">
					<img src="@/assets/images/hzImg/xm/gdxcsp.png" alt="" class="title" />
				</div>
				<div class="blockContent" style="height: 260px">
					<!-- <img src="@/assets/images/hzImg/xm/video.png" alt="" width="100%" height="100%" /> -->
					<!-- <video style="width: 100%; height: 100%; object-fit: fill" controls :src="videoData.videoUrl"></video> -->
					<!-- <div id="playWnd" class="playWnd"></div> -->
					<div id="play_window" ref="playWndBox" class="main" style="width: 100%; height: 100%"></div>
				</div>
			</div>
		</div>
		<div class="centerBox">
			<div class="mapBox">
				<!-- <maps :projectData="projectData"></maps> -->
				<BDmaps :projectData="projectData"></BDmaps>
			</div>
			<div class="blockBox">
				<div class="blockTitle blockTitle2">
					<img src="@/assets/images/hzImg/xm/lcb.png" alt="" class="title" />
				</div>
				<div class="blockContent">
					<milestone :engineeringSn="engineeringSn" :projectData="projectData"></milestone>
				</div>
			</div>
		</div>
		<div class="rightBox">
			<div class="blockBox">
				<div class="blockTitle">
					<img src="@/assets/images/hzImg/xm/aqgl.png" alt="" class="title" />
				</div>
				<div class="blockContent chartContent">
					<div class="chartBox">
						<pieChart
							:colorArr="['#6375C7', '#EC6266']"
							:chartData="saftyData"
							title="安全问题总数"
							:total="safetyTotal"
						></pieChart>
					</div>
					<div class="detailBox">
						<div class="item">
							<i class="color3 rect"></i>
							<span class="name">已整改安全问题</span>
							<span>{{ saftyData[0].value }}</span>
						</div>
						<div class="item">
							<i class="color4 rect"></i>
							<span class="name">未整改安全问题</span>
							<span>{{ saftyData[1].value }}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="blockBox">
				<div class="blockTitle">
					<img src="@/assets/images/hzImg/xm/zlgl.png" alt="" class="title" />
				</div>
				<div class="blockContent chartContent">
					<div class="chartBox">
						<pieChart
							:colorArr="['#82FBEA', '#4CC4F8']"
							:chartData="qualityData"
							title="质量问题总数"
							:total="qualityTotal"
						></pieChart>
					</div>
					<div class="detailBox">
						<div class="item">
							<i class="color5 rect"></i>
							<span class="name">已整改质量问题</span>
							<span>{{ qualityData[0].value }}</span>
						</div>
						<div class="item">
							<i class="color6 rect"></i>
							<span class="name">未整改质量问题</span>
							<span>{{ qualityData[1].value }}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="blockBox">
				<div class="blockTitle">
					<img src="@/assets/images/hzImg/xm/hjjc.png" alt="" class="title" />
				</div>
				<div class="blockContent">
					<environment></environment>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="tsx" name="largeScreen">
import { ref, reactive, onMounted, getCurrentInstance, nextTick, onBeforeUnmount, Ref, watch } from "vue";
import projectInfo from "./components/projectInfo.vue";
import pieChart from "./components/pieChart.vue";
import milestone from "./components/milestone.vue";
import maps from "./components/maps.vue";
import BDmaps from "./components/BDmaps.vue";
import environment from "./components/environment.vue";
import projectInfoDialog from "./components/projectInfoDialog.vue";
import { screenEntPayment, getEntInspectInfo } from "@/api/modules/huizhou";
import { getpreviewURL } from "@/api/modules/common";
import { GlobalStore } from "@/stores";
import { getvideoEngTreeList } from "@/api/modules/goverment";

const store = GlobalStore();
const playWndBox = ref(null);
//获取项目信息
const projectData = ref({
	latitude: "",
	longitude: "",
	totalDay: ""
});
let playWndHeight = ref("");
let playWndWidth = ref("");
let myPlugin = ref("");
let cameraIndexCode = ref([]);
let playUrl = ref();
let playIndex = ref(0);
const props = defineProps(["engineeringSn"]);
const emits = defineEmits(["change"]);
const changeScreen = () => {
	emits("change");
};
const getProjectData = (data: any) => {
	projectData.value = data;
};
const dataObj = ref({});
const getPayMentData = async () => {
	const res = await screenEntPayment({ engineeringSn: props.engineeringSn });
	console.log(res);
	if (res && res.result) {
		dataObj.value = res.result;
		payRatio.value = res.result.payRatio;
		payData.value = reactive([
			{
				name: "支付",
				value: res.result.payAmount
			},
			{
				name: "总和",
				value: res.result.totalAmount
			}
		]);
	}
};
// 视频弹框 --- start
const projectDialog = ref(false);
const showProjectDialog = () => {
	projectDialog.value = true;
};
const closeProjectDialog = () => {
	projectDialog.value = false;
};
// 视频弹框 --- end

// 支付管理 --- start
const payRatio = ref("");
let payData = ref([
	{
		name: "支付",
		value: 0
	},
	{
		name: "总和",
		value: 0
	}
]);
// 支付管理 --- end

// 安全质量 --- start
const safetyTotal = ref(0);
let saftyData = ref([
	{
		name: "已整改安全问题",
		value: 0
	},
	{
		name: "未整改安全问题",
		value: 0
	}
]);
const qualityTotal = ref(0);
let qualityData = ref([
	{
		name: "已整改质量问题",
		value: 0
	},
	{
		name: "未整改质量问题",
		value: 0
	}
]);
// 获取安全质量信息
const getInspect = async () => {
	const res: any = await getEntInspectInfo({ engineeringSn: props.engineeringSn });
	safetyTotal.value = res.result.safetyTotal;
	saftyData.value[0].value = res.result.safetyCompleted;
	saftyData.value[1].value = res.result.safetyUnCompleted;
	qualityTotal.value = res.result.qualityTotal;
	qualityData.value[0].value = res.result.qualityCompleted;
	qualityData.value[1].value = res.result.qualityUnCompleted;
};
// 安全质量 --- end
// onBeforeUnmount(() => {
// 	if (oWebControl.value === undefined) {
// 		// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
// 		oWebControl.JS_HideWnd();
// 		// 销毁当前播放的视频
// 		oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
// 		// 断开与插件服务连接
// 		oWebControl.JS_Disconnect();
// 	}
// });
// 播放视频流
const playVideo = async () => {
	let url = playUrl.value;
	let newMyplugin = myPlugin.value;
	console.log(url);
	console.log(playIndex.value);
	newMyplugin
		.JS_Play(
			url,
			{
				playURL: url, // 流媒体播放时必传
				mode: 1 // 解码类型：0=普通模式; 1=高级模式 默认为0
				// 设置直连时的认证参数等
				// ...
			},
			playIndex.value //当前窗口下标
		)
		.then(
			() => {
				console.info("JS_Play success");
				playIndex.value += 1;
				// do you want...
			},
			() => {
				console.info("JS_Play failed:");
				// playIndex.value += 1;
				// do you want...
			}
		);
};
// 获取视频流
const getVideo = async () => {
	// await sendRequest({ code: cameraIndexCode.value });
	const { result }: { result: any } = await getvideoEngTreeList({});
	let defaultCode: string = "";
	if (result.length > 0) {
		defaultCode = result[0].code;
		if (!defaultCode) {
			cameraIndexCode.value = result[0].children.map((item: any) => {
				return item.code;
			});
			defaultCode = cameraIndexCode.value[0];
		}
	}
	const res = await getpreviewURL({ cameraIndexCode: defaultCode, protocol: "ws" });
	playUrl.value = res.result;
	playVideo();
	console.log(res);
};
const BeginPlayer = () => {
	console.log(666, "-----------------");
	// 初始化插件
	myPlugin.value = new JSPlugin({
		szId: "play_window", //需要英文字母开头 必填
		// szBasePath: "/public/h5player", // 必填,引用H5player.min.js的js相对路径
		szBasePath: "/h5player", // 打包后的地址
		// szBasePath: "./", // 必填,引用H5player.min.js的js相对路径
		iWidth: playWndWidth.value + "px",
		iHeight: playWndHeight.value + "px",
		iMaxSplit: 4,
		iCurrentSplit: 1,
		openDebug: true
	});
};
onMounted(async () => {
	await getInspect();
	await getPayMentData();
	await BeginPlayer();
	// 获取页面的实例对象 ee
	const pageInstance = getCurrentInstance();
	// 获取dom节点对象
	const tagDomObj = pageInstance?.refs.playWndBox;
	playWndHeight.value = tagDomObj?.clientHeight;
	playWndWidth.value = tagDomObj?.clientWidth;

	// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
	window.addEventListener("scroll", () => {
		if (myPlugin.value == undefined) {
			setTimeout(function () {
				myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
			}, 500);
			// setWndCover();
		}
	});

	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
	window.addEventListener("resize", e => {
		if (myPlugin.value == undefined) {
			// console.log("wwwww", e);
			setTimeout(function () {
				myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
			}, 500);
			// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
			// setWndCover();
		}
	});
	getVideo();
});
</script>
<style scoped lang="scss">
@import url("./style.scss");
</style>