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

<template>
	<div class="table-box">
		<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 @projectData="getProjectData"></projectInfo>
				</div>
			</div>
			<projectInfoDialog v-show="projectDialog" @close="closeProjectDialog"></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>0</span>
						</div>
						<div class="item">
							<i class="rect"></i>
							<span class="name">变更金额</span>
							<span>0</span>
						</div>
						<div class="item">
							<i class="color1 rect"></i>
							<span class="name">审批支付</span>
							<span>0</span>
						</div>
						<div class="item">
							<i class="color2 rect"></i>
							<span class="name">实际支付</span>
							<span>0</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: 236px"></div>
			</div>
		</div>
		<div class="centerBox">
			<div class="mapBox">
				<maps :projectData="projectData"></maps>
			</div>
			<div class="blockBox">
				<div class="blockTitle blockTitle2">
					<img src="@/assets/images/hzImg/xm/lcb.png" alt="" class="title" />
				</div>
				<div class="blockContent">
					<milestone :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 } 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 environment from "./components/environment.vue";
import projectInfoDialog from "./components/projectInfoDialog.vue";
import { getInspectInfo } from "@/api/modules/projectLargeSreen";

//获取项目信息
const projectData = ref({
	latitude: "",
	longitude: "",
	totalDay: ""
});
const getProjectData = (data: any) => {
	projectData.value = data;
};

// 视频弹框 --- start
const projectDialog = ref(false);
const showProjectDialog = () => {
	projectDialog.value = true;
};
const closeProjectDialog = () => {
	projectDialog.value = false;
};
// 视频弹框 --- end

// 支付管理 --- start
const payRatio = ref("0%");
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 getInspectInfo();
	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

onMounted(async () => {
	await getInspect();
});
</script>
<style scoped lang="scss">
@import url("./style.scss");
</style>