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></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']"></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></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></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']"></pieChart>
					</div>
					<div class="detailBox">
						<div class="item">
							<i class="color3 rect"></i>
							<span class="name">已整改安全问题</span>
							<span>0</span>
						</div>
						<div class="item">
							<i class="color4 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/zlgl.png" alt="" class="title" />
				</div>
				<div class="blockContent chartContent">
					<div class="chartBox">
						<pieChart :colorArr="['#82FBEA', '#4CC4F8']"></pieChart>
					</div>
					<div class="detailBox">
						<div class="item">
							<i class="color5 rect"></i>
							<span class="name">已整改质量问题</span>
							<span>0</span>
						</div>
						<div class="item">
							<i class="color6 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/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";
const projectDialog = ref(false);
const showProjectDialog = () => {
	projectDialog.value = true;
};
const closeProjectDialog = () => {
	projectDialog.value = false;
};
</script>
<style scoped lang="scss">
@import url("./style.scss");
</style>