fix: 编写龙门吊页面

src/api/modules/aIEarlyWarn.ts

@@ -0,0 +1,3 @@
+// AI预警接口API
+import http from "@/api";
+const BASEURL = import.meta.env.VITE_API_URL;

src/api/modules/smartBuild.ts

@@ -0,0 +1,3 @@
+// 智慧党建接口API
+import http from "@/api";
+const BASEURL = import.meta.env.VITE_API_URL;

src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue

@@ -72,7 +72,6 @@ import { reactive, ref, onMounted } from "vue";
 import textIcon from "@/assets/images/vehicleManagement/car.png";
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
-let showDialog = ref(false as any);
 const list = reactive([
 	{
 		id: 1,
@@ -153,7 +152,7 @@ const list = reactive([
 		warnTime: "2023-01-01 12:00:00"
 	}
 ]);
-
+let showDialog = ref(false as any);
 function handleClick(event: any) {
 	console.log("点击", event.target.className);
 	if (event.target.className == "list-detail") {

src/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue

@@ -18,13 +18,20 @@ type Props = {
 	yData?: any; // 传入y轴对应的数据
 	lineId?: any; // 传入折线图dom元素对应的id
 	lineSmooth?: any; // 传入折线图的平滑度 0-1,(0:折线 1:圆滑)
+	grid?: any; //折线图的上下左右偏移量
 };
 // withDefaults 定义默认值(传入的数据类型同默认值)
 const props = withDefaults(defineProps<Props>(), {
 	xData: ["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"],
 	yData: [10, 5, 20, 25, 15, 25, 12],
 	lineId: "waterShortTerm",
-	lineSmooth: 0
+	lineSmooth: 0,
+	grid: {
+		top: "20%",
+		left: "6%",
+		right: "4%",
+		bottom: "10%"
+	}
 	// num: () => [12, 13, 14] // 复杂数据类型使用函数方式
 });
 
@@ -58,13 +65,7 @@ function initOption() {
 		tooltip: {
 			trigger: "axis"
 		},
-		grid: {
+		grid: props.grid,
-			top: "20%",
-			left: "6%",
-			right: "4%",
-			bottom: "10%"
-			// containLabel: true
-		},
 		xAxis: [
 			{
 				type: "category",
@@ -219,5 +220,6 @@ onBeforeUnmount(async () => {
 	width: 100%;
 	height: 100%;
 	position: relative;
+	// transform: rotate(90deg);
 }
 </style>

src/views/sevenLargeScreen/greenConstruct/waterMonitor/bottomLeft.vue

@@ -33,11 +33,11 @@ const store = GlobalStore();
 // x轴
 let xData = ref(["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"] as any);
 // Y轴单位
-let unit = ref("单位:V" as any);
+// let unit = ref("单位:V" as any);
 // Y轴数据
-let yData = ref([10, 5, 20, 25, 15, 25, 12] as any);
+let yData = ref([10, 5, 20, 35, 25, 15, 12] as any);
 // 图表数据项
-let option = ref(null as any);
+// let option = ref(null as any);
 
 // 选中
 let checked = ref(1);

src/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue

@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
 	lineId: "waterShortTerm",
 	lineSmooth: 0,
 	grid: {
-		top: "20%",
+		top: "15%",
 		left: "10%",
 		right: "10%",
 		bottom: "10%"
@@ -65,12 +65,7 @@ function initOption() {
 		tooltip: {
 			trigger: "axis"
 		},
-		grid: {
+		grid: props.grid,
-			top: "20%",
-			left: "10%",
-			right: "10%",
-			bottom: "10%"
-		},
 		xAxis: [
 			{
 				type: "category",
@@ -214,7 +209,7 @@ onMounted(async () => {
 	drawChart();
 });
 
-// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
+// 即时销毁事件总线派发，否则会执行两次mitts.on造成不必要的内存浪费 7.14 by CJP
 onBeforeUnmount(async () => {
 	mitts.off("devSn");
 });

src/views/sevenLargeScreen/largeMachinery/gantryCrane/bottomLeft.vue

@@ -10,13 +10,14 @@
 				</div>
 				<!-- <div id="waterShortTerm" ref="waterShortTerm" style="width: 100%; height: 100%"></div>
 				 -->
-				<greenLineEchart
+				<blueLineEchart
 					:xData="xData"
 					:yData="yData"
 					:lineId="'gantryWorkTime'"
 					:lineSmooth="0"
+					:grid="lineGrid"
 					style="width: 100%; height: 100%"
-				></greenLineEchart>
+				></blueLineEchart>
 			</div>
 		</div>
 	</Card>
@@ -26,18 +27,25 @@
 import Card from "@/components/card.vue";
 import symbolIcon from "@/assets/images/lineSymbol.png";
 import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
-import greenLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue";
+import blueLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue";
 import { GlobalStore } from "@/stores";
 import mitts from "@/utils/bus"; //兄弟组件传值
 const store = GlobalStore();
 // x轴
 let xData = ref(["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"] as any);
 // Y轴单位
-let unit = ref("单位:V" as any);
+// let unit = ref("单位:V" as any);
 // Y轴数据
 let yData = ref([10, 5, 20, 25, 15, 25, 12] as any);
 // 图表数据项
-let option = ref(null as any);
+// let option = ref(null as any);
+// 图标偏移度
+let lineGrid = ref({
+	top: "20%",
+	left: "10%",
+	right: "8%",
+	bottom: "10%"
+});
 
 // 选中
 let checked = ref(1);
@@ -69,9 +77,11 @@ function getRecentSevenDays() {
 
 	for (let i = 0; i < 7; i++) {
 		const date = new Date(today.getTime() - i * millisecondsPerDay);
+		// 获取年
+		const year = today.getFullYear();
 		const month = ("0" + (date.getMonth() + 1)).slice(-2);
 		const day = ("0" + date.getDate()).slice(-2);
-		dates.unshift(`${month}-${day}`);
+		dates.unshift(`${year}-${month}-${day}`);
 	}
 	return dates;
 }
@@ -94,7 +104,7 @@ function getPassedDaysOfMonth() {
 	while (currentDate <= today) {
 		const month = currentDate.getMonth() + 1;
 		const day = currentDate.getDate();
-		dates.push(`${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`);
+		dates.push(`${year}-${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`);
 
 		currentDate.setDate(currentDate.getDate() + 1);
 	}
@@ -102,7 +112,9 @@ function getPassedDaysOfMonth() {
 	return dates;
 }
 
-onMounted(async () => {});
+onMounted(async () => {
+	getWeekData(1);
+});
 
 // 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
 onBeforeUnmount(async () => {

src/views/sevenLargeScreen/largeMachinery/gantryCrane/bottomRight.vue

@@ -10,13 +10,14 @@
 				</div> -->
 				<!-- <div id="waterShortTerm" ref="waterShortTerm" style="width: 100%; height: 100%"></div>
 				 -->
-				<greenLineEchart
+				<blueLineEchart
 					:xData="xData"
 					:yData="yData"
 					:lineId="'gantryWindSpeed'"
 					:lineSmooth="0"
+					:grid="lineGrid"
 					style="width: 100%; height: 100%"
-				></greenLineEchart>
+				></blueLineEchart>
 			</div>
 		</div>
 	</Card>
@@ -26,87 +27,94 @@
 import Card from "@/components/card.vue";
 import symbolIcon from "@/assets/images/lineSymbol.png";
 import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
-import greenLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue";
+import blueLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue";
 import { GlobalStore } from "@/stores";
 import mitts from "@/utils/bus"; //兄弟组件传值
 const store = GlobalStore();
 // x轴
-let xData = ref(["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"] as any);
+let xData = ref(["02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00"] as any);
 // Y轴单位
-let unit = ref("单位:V" as any);
+// let unit = ref("单位:V" as any);
 // Y轴数据
 let yData = ref([10, 5, 25, 20, 15, 25, 12] as any);
 // 图表数据项
-let option = ref(null as any);
+// let option = ref(null as any);
+// 图标偏移度
+let lineGrid = ref({
+	top: "10%",
+	left: "10%",
+	right: "8%",
+	bottom: "10%"
+});
 
 // 选中
-let checked = ref(1);
+// let checked = ref(1);
-function getWeekData(type: any) {
+// function getWeekData(type: any) {
-	checked.value = type;
+// 	checked.value = type;
-	let currentWeek = getRecentSevenDays();
+// 	let currentWeek = getRecentSevenDays();
-	// console.log(currentWeek, "近七天");
+// 	// console.log(currentWeek, "近七天");
-	// 模拟数据改变
+// 	// 模拟数据改变
-	xData.value = currentWeek;
+// 	xData.value = currentWeek;
-	yData.value = [20, 15, 25, 15, 25, 35, 12];
+// 	yData.value = [20, 15, 25, 15, 25, 35, 12];
-}
+// }
-function getMonthData(type: any) {
+// function getMonthData(type: any) {
-	checked.value = type;
+// 	checked.value = type;
-	let currentWeek = getPassedDaysOfMonth();
+// 	let currentWeek = getPassedDaysOfMonth();
-	// console.log(currentWeek.length, "本月");
+// 	// console.log(currentWeek.length, "本月");
-	let testyData: any = [];
+// 	let testyData: any = [];
-	for (let i = 0; i < currentWeek.length; i++) {
+// 	for (let i = 0; i < currentWeek.length; i++) {
-		testyData.push((i % 2) + 10);
+// 		testyData.push((i % 2) + 10);
-	}
+// 	}
-	xData.value = currentWeek;
+// 	xData.value = currentWeek;
-	yData.value = testyData;
+// 	yData.value = testyData;
-}
+// }
 
-//获取近七天的日期
+// //获取近七天的日期
-function getRecentSevenDays() {
+// function getRecentSevenDays() {
-	const dates: any = [];
+// 	const dates: any = [];
-	const millisecondsPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
+// 	const millisecondsPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
-	const today = new Date(); // 当前日期
+// 	const today = new Date(); // 当前日期
 
-	for (let i = 0; i < 7; i++) {
+// 	for (let i = 0; i < 7; i++) {
-		const date = new Date(today.getTime() - i * millisecondsPerDay);
+// 		const date = new Date(today.getTime() - i * millisecondsPerDay);
-		const month = ("0" + (date.getMonth() + 1)).slice(-2);
+// 		const month = ("0" + (date.getMonth() + 1)).slice(-2);
-		const day = ("0" + date.getDate()).slice(-2);
+// 		const day = ("0" + date.getDate()).slice(-2);
-		dates.unshift(`${month}-${day}`);
+// 		dates.unshift(`${month}-${day}`);
-	}
+// 	}
-	return dates;
+// 	return dates;
-}
+// }
 
-// 获取本月到今天的日期
+// // 获取本月到今天的日期
-function getPassedDaysOfMonth() {
+// function getPassedDaysOfMonth() {
-	// 存放数据的数组
+// 	// 存放数据的数组
-	const dates: any = [];
+// 	const dates: any = [];
-	// 获取当前时间的时间戳
+// 	// 获取当前时间的时间戳
-	const today = new Date();
+// 	const today = new Date();
-	// 获取年
+// 	// 获取年
-	const year = today.getFullYear();
+// 	const year = today.getFullYear();
-	// 获取月
+// 	// 获取月
-	const month = today.getMonth();
+// 	const month = today.getMonth();
-	// 获取当前月份第一天的时间戳
+// 	// 获取当前月份第一天的时间戳
-	const startDate = new Date(year, month, 1); // 月份从 0 开始，所以 8 表示 9 月
+// 	const startDate = new Date(year, month, 1); // 月份从 0 开始，所以 8 表示 9 月
 
-	let currentDate = startDate;
+// 	let currentDate = startDate;
-	// 遍历从这个月第一天到现在的日期数
+// 	// 遍历从这个月第一天到现在的日期数
-	while (currentDate <= today) {
+// 	while (currentDate <= today) {
-		const month = currentDate.getMonth() + 1;
+// 		const month = currentDate.getMonth() + 1;
-		const day = currentDate.getDate();
+// 		const day = currentDate.getDate();
-		dates.push(`${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`);
+// 		dates.push(`${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`);
 
-		currentDate.setDate(currentDate.getDate() + 1);
+// 		currentDate.setDate(currentDate.getDate() + 1);
-	}
+// 	}
 
-	return dates;
+// 	return dates;
-}
+// }
 
 onMounted(async () => {});
 
 // 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
 onBeforeUnmount(async () => {
-	mitts.off("devSn");
+	// mitts.off("devSn");
 });
 </script>
 

src/views/sevenLargeScreen/largeMachinery/gantryCrane/topCenter.vue

@@ -1,7 +1,7 @@
 <template>
 	<Card title="实时监测">
 		<div class="gantry-list">
-			<div class="people-message">人 员 信 息</div>
+			<div class="people-message" @click="showDialog = !showDialog">人 员 信 息</div>
 			<div class="gantry-icon"></div>
 			<div class="gantry-data">
 				<div class="box-contain">
@@ -27,6 +27,44 @@
 					<div class="number">34<span>m</span></div>
 				</div>
 			</div>
+			<div class="list-detail" v-if="showDialog" @click="handleClick">
+				<div class="dialog-content">
+					<div class="dialog-title"><i>人员详情</i></div>
+					<div class="dialog-detail">
+						<div class="detail-top">
+							<div class="top-left">
+								<img src="@/assets/images/comprehensiveManage/project3.png" />
+							</div>
+							<div class="top-right">
+								<div style="margin-top: 2%"><span style="font-size: 20px; color: #65d7f9; margin-right: 5%">陈建 </span> 男</div>
+								<div style="margin-top: 18%">佳信捷软件_451班组</div>
+								<div style="margin-top: 18%">13324904501</div>
+							</div>
+						</div>
+						<div class="detail-text">
+							<div class="text-box">
+								<div class="type">身份证</div>
+								<div class="text">******************</div>
+							</div>
+							<div class="text-box" style="margin-top: 5%">
+								<div class="type">班组</div>
+								<div class="text">佳信捷软件_451班组</div>
+							</div>
+							<div class="text-box" style="margin-top: 5%">
+								<div class="type">工种</div>
+								<div class="text">窑炉修筑工</div>
+							</div>
+							<div class="text-box" style="margin-top: 5%">
+								<div class="type">参见单位</div>
+								<div class="text">中建四局</div>
+							</div>
+						</div>
+					</div>
+					<div class="close-icon" @click="showDialog = false">
+						<el-icon><Close /></el-icon>
+					</div>
+				</div>
+			</div>
 		</div>
 	</Card>
 </template>
@@ -34,6 +72,13 @@
 <script lang="ts" setup>
 import Card from "@/components/card.vue";
 import { reactive, ref, onMounted } from "vue";
+let showDialog = ref(false as any);
+function handleClick(event: any) {
+	console.log("点击", event.target.className);
+	if (event.target.className == "list-detail") {
+		showDialog.value = false;
+	}
+}
 onMounted(async () => {});
 </script>
 
@@ -47,6 +92,7 @@ onMounted(async () => {});
 		width: 3%;
 		left: 0%;
 		top: 10%;
+		cursor: pointer;
 		font-size: 12px;
 		padding-left: 5px;
 		padding-bottom: 1%;
@@ -115,4 +161,120 @@ onMounted(async () => {});
 		}
 	}
 }
+.list-detail {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	.dialog-content {
+		position: absolute;
+		box-sizing: border-box;
+		padding: 2%;
+		left: 5%;
+		top: 5%;
+		width: 36%;
+		height: 92%;
+		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
+		background-size: 100% 100%;
+		z-index: 21;
+		.dialog-icon {
+			position: absolute;
+			left: 4%;
+			top: 4%;
+			width: 7%;
+			height: 7%;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.pic-icon {
+			position: absolute;
+			left: 3%;
+			top: 40%;
+			width: 7%;
+			height: 7%;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.close-icon {
+			position: absolute;
+			right: 3%;
+			top: 3%;
+			cursor: pointer;
+			color: #ffffff;
+			font-size: calc(100vw * 18 / 1920);
+		}
+		.dialog-title {
+			color: #ffffff;
+			font-weight: bold;
+			margin-left: 3%;
+			font-size: calc(100vw * 18 / 1920);
+			font-family: "OPPOSans-Bold";
+		}
+		.dialog-detail {
+			width: 100%;
+			height: 100%;
+			margin-top: 8%;
+			.detail-top {
+				height: 38%;
+				display: flex;
+				.top-left {
+					width: 35%;
+					height: 90%;
+					img {
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+				.top-right {
+					margin-left: 6%;
+					font-size: 12px;
+					color: #fff;
+				}
+			}
+			.detail-text {
+				width: 100%;
+				height: 100%;
+				margin-top: 3%;
+				.text-box {
+					height: 8%;
+					display: flex;
+					align-items: center;
+					background: url("@/assets/images/aIEarlyWarning/contentBg.png") no-repeat;
+					background-size: 100% 100%;
+					.type {
+						width: 25%;
+						margin-left: 4%;
+						color: #a1accb;
+						font-size: calc(100vw * 12 / 1920);
+					}
+					.text {
+						font-size: calc(100vw * 12 / 1920);
+						color: #ffffff;
+					}
+				}
+			}
+		}
+		.pic-title {
+			color: #ffffff;
+			font-weight: bold;
+			font-size: calc(100vw * 18 / 1920);
+			font-family: "OPPOSans-Bold";
+			margin-top: 5%;
+			margin-left: 8%;
+		}
+		.big-pic {
+			width: 100%;
+			height: 50%;
+			margin-top: 10%;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
 </style>

src/views/sevenLargeScreen/largeMachinery/gantryCrane/topLeft.vue

@@ -1,6 +1,10 @@
 <template>
 	<Card title="作业统计">
 		<div class="gantry-top-left">
+			<div class="select-right">
+				<div class="today selected" @click="tabChange(1)" :class="checked == 1 ? 'active' : ''">今日</div>
+				<div class="total selected" @click="tabChange(2)" :class="checked == 2 ? 'active' : ''">累计</div>
+			</div>
 			<div class="right-box">
 				<div class="yesterday-use">
 					<div class="text">工作时长(小时)</div>
@@ -32,6 +36,12 @@
 <script lang="ts" setup>
 import Card from "@/components/card.vue";
 import { reactive, ref, onMounted } from "vue";
+// 选中
+let checked = ref(1);
+function tabChange(type: any) {
+	checked.value = type;
+}
+
 onMounted(async () => {});
 </script>
 
@@ -39,6 +49,39 @@ onMounted(async () => {});
 .gantry-top-left {
 	width: 100%;
 	height: 100%;
+	position: relative;
+	.select-right {
+		width: 25%;
+		display: flex;
+		position: absolute;
+		z-index: 10;
+		color: #fff;
+		font-size: 10px;
+		text-align: center;
+		line-height: 20px;
+		right: 0%;
+		top: 5%;
+		.selected {
+			height: 5%;
+			background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
+			background-size: 100% 100%;
+			cursor: pointer;
+		}
+		.today {
+			width: 40%;
+			margin-right: 5%;
+			z-index: 99;
+		}
+		.total {
+			width: 40%;
+			margin-right: 5%;
+			z-index: 99;
+		}
+		.active {
+			background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
+			background-size: 100% 100%;
+		}
+	}
 	.right-box {
 		width: 100%;
 		height: 100%;
@@ -57,7 +100,7 @@ onMounted(async () => {});
 			.text {
 				font-size: 16px;
 				color: #65d7f9;
-				margin-top: 5%;
+				margin-top: 10%;
 			}
 			.num {
 				transform: skew(-5deg);
@@ -80,7 +123,7 @@ onMounted(async () => {});
 			.text {
 				font-size: 16px;
 				color: #65d7f9;
-				margin-top: 5%;
+				margin-top: 10%;
 			}
 			.num {
 				transform: skew(-5deg);
@@ -104,7 +147,7 @@ onMounted(async () => {});
 				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
 				font-weight: 500;
 				color: #ffffff;
-				margin-top: 5%;
+				margin-top: 10%;
 			}
 			.num {
 				transform: skew(-5deg);
@@ -123,7 +166,7 @@ onMounted(async () => {});
 			background: url("@/assets/images/aIEarlyWarning/weekWarn.png") no-repeat;
 			background-size: 100% 100%;
 			.text {
-				margin-top: 5%;
+				margin-top: 10%;
 				font-size: 16px;
 				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
 				font-weight: 500;