dev:指挥部大屏

.env.development

@@ -13,9 +13,9 @@ NODE_ENV = 'development'
 # 沈阳合盈线上
 # VITE_API_URL = "http://101.43.164.214:45022"
 # 演示平台
-# VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
+VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
 # 百色七参数线上地址
-VITE_API_URL = 'http://101.43.164.214:11111'
+# VITE_API_URL = 'http://101.43.164.214:11111'
 # 七参数标准版(测试平台)
 # VITE_API_URL = 'http://jxj.zhgdyun.com:15551'
 # 七参数标准版(测试平台)

src/config/config.ts

@@ -24,11 +24,11 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
 
 // 项目环境标识配置 部署时需更改对应的项目
 // export const COMPANY: string = ""; //标准版
-export const COMPANY: string = "zhzrf"; //中海·臻如府
+// export const COMPANY: string = "zhzrf"; //中海·臻如府
 // export const COMPANY: string = "zsbf"; //中水北方
 // export const COMPANY: string = "as"; //鞍山项目
 // export const COMPANY: string = "agjt"; //鞍钢集团
-// export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
+export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
 // export const COMPANY: string = "slx"; //苏立信项目
 // export const COMPANY: string = "hfqc"; //合肥启程项目
 // export const COMPANY: string = "jsyc"; // 江苏盐城项目

src/routers/modules/staticRouter.ts

@@ -24,8 +24,8 @@ export const staticRouter: RouteRecordRaw[] = [
 	{
 		path: "/large",
 		name: "大屏",
-		component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
+		// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
-		// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
+		component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
 		// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
 		children: [
 			{

src/views/commandScreen/commandCenter/centerBottom.vue

@@ -1,6 +1,35 @@
 <template>
 	<div class="centerBottom">
-		
+		<div class="cbHeader">
+			<div class="cbHeaderInfo">
+				<div class="cubeIcon"></div>
+				<div>公告提示</div>
+			</div>
+			<div class="cbHeaderLine"></div>
+		</div>
+		<div class="cbContent">
+			<el-scrollbar height="370">
+				<div class="item" v-for="(item,index) in listData" :key="index">																																																																																																																																																																																																		
+					<div class="itemHead">
+						<div class="itemHeadInner" v-if="item.type === 1">{{item.header}}</div>
+						<div class="itemHeadInner2" v-if="item.type === 3">{{item.header}}</div>
+						<div class="itemContent">
+							<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
+								<text style="margin-left:10px">{{item.content}}</text>
+							</el-tooltip>
+						</div>
+					</div>
+					<!-- <div class="itemContent">
+						<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
+							{{item.content}}
+						</el-tooltip>
+					</div> -->
+					<div class="itemTime">
+						<text class="timeInfo">{{item.startTime + '-' + item.endTime}}</text>
+					</div>
+				</div>
+			</el-scrollbar>
+		</div>
 	</div>
 </template>
 
@@ -10,85 +39,24 @@ import { ref, watch, onMounted } from "vue";
 import { getStageOption } from "@/api/modules/projectOverview";
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
-const progressList = ref([
-	// {
-	// 	name: "施工证获取",
-	// 	status: 0
-	// },
-	// {
-	// 	name: "土方开挖",
-	// 	status: 0
-	// },
-	// {
-	// 	name: "桩基",
-	// 	status: 0
-	// },
-	// {
-	// 	name: "支护开始",
-	// 	status: 0
-	// },
-	// {
-	// 	name: "垫层完成",
-	// 	status: 0
-	// },
-	// {
-	// 	name: "正负零",
-	// 	status: 0
-	// },
-	// {
-	// 	name: "工程达到预售条件",
-	// 	status: 0
-	// }
-] as any);
-// ts
-type Props = {
-	projectData?: any; // 传入项目信息
-};
-// withDefaults 定义默认值(传入的数据类型同默认值)
-const props = withDefaults(defineProps<Props>(), {
-	projectData: {}
-});
-// 项目信息
-const projectData = ref({} as any);
 
-watch(
+let listData = ref([
-	() => props.projectData,
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控胜多负少v现场v在时代广场彼此相伴',startTime: '2024-04-01',endTime:"2024-04-20"},
-	newVal => {
+	{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
-		// console.log(newVal, "newVal");
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
-		if (newVal) {
+	{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
-			// props.xData = newVal;
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
-			projectData.value = newVal;
+	{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
-			console.log("当前阶段", projectData.value.constructionStage);
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
-			if (progressList.value.length > 0) {
+	{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
-				progressList.value[projectData.value.constructionStage - 1].status = 1;
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
-			}
+	{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
-		}
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
-	}
+	{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
-);
+])
 
-//获取里程碑option
-const getProgressOption = async () => {
-	const res: any = await getStageOption({ dictionaryEncoding: "project_construction_stage", projectSn: store.sn });
-	if (res.result.length > 0) {
-		let newArray = res.result.map((item: any) => {
-			return {
-				name: item.name,
-				status: 0
-			};
-		});
-		progressList.value = newArray;
-		console.log(projectData.value, "里程碑option", res);
-		if (projectData.value.constructionStage) {
-			progressList.value[projectData.value.constructionStage - 1].status = 1;
-		}
-	}
-};
-//将方法暴露给父组件
-defineExpose({
-	getProgressOption
-})
 onMounted( async () => {
-	getProgressOption();
+
 });
 </script>
 
@@ -97,5 +65,98 @@ onMounted( async () => {
 	background: url("@/assets/images/commandScreen/card-center-bottom.png") no-repeat;
 	// background: #fff;
 	background-size: 100% 100%;
+	// width: 100%;
+	// height: 60%;
+	// background-color: #fff;
+	padding: 10px 20px;
+	position: relative;
+	// padding-top: 15px;
+	.cbHeader{
+		width:100%;
+		height: 40px;
+		// background-color: darkred;
+		.cbHeaderInfo{
+			color: #fff;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			.cubeIcon{
+				width: 36px;
+				height: 36px;
+				// background-color: #fff;
+				background: url("@/assets/images/commandScreen/head-cube.png") no-repeat;
+				background-size: 100% 100%;
+				// margin-left: -5px;
+				margin: 0 3px 0 -5px;
+			}
+		}
+		.cbHeaderLine{
+			height: 4px;
+			width: 100%;
+			// background-color: darkblue;
+			background: url("@/assets/images/commandScreen/head-line.png") no-repeat;
+			background-size: 100% 100%;
+		}
+	}
+	.cbContent{
+		width: 100%;
+		height: calc(100% - 40px);
+		// background: #fff;
+		.item{
+			width: 100%;
+			line-height: 130%;
+			display: flex;
+			align-items: center;
+			// justify-content: flex-start;
+			justify-content: space-between;
+			// background-color: green;
+			color: #fff;
+			.itemHead{
+				white-space: nowrap;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 16px;
+				width: 75%;
+				.itemHeadInner{
+					border: 1px solid #f77c7d;	
+					box-shadow: 0 0 0 1px #f77c7d;
+					background: rgba(247,124,125, 0.4);
+					border-radius: 3px;
+					padding: 0 15px;
+					margin: 9px 0;
+					margin-left: 2px;
+				}
+				.itemHeadInner2{
+					font-size: 16px;
+					border: 1px solid #0db027;	
+					box-shadow: 0 0 0 1px #0db027;
+					background: rgba(13,176,39, 0.4);
+					border-radius: 3px;
+					padding: 0 15px;
+					margin: 9px 0;
+					margin-left: 2px;
+				}
+				.itemContent{
+					margin-left: 10px;
+					font-size: 15px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					width: 100%;
+				}
+			}
+			.itemTime{	
+				// background-color: #fff;
+				width: 25%;
+				font-size: 16px;
+				.timeInfo{
+					display: flex;
+					justify-content: flex-end;
+					margin-right: 10px;
+				}
+			}
+		}
+	}
 }
 </style>

src/views/commandScreen/commandCenter/index.vue

@@ -10,8 +10,6 @@
 		</div>
 		<div class="right">
 			<rightAll class="rightAll"></rightAll>
-			<rightCenter class="rightCenter"></rightCenter>
-			<rightBottom class="rightBottom"></rightBottom>
 		</div>
 	</div>
 </template>
@@ -51,11 +49,11 @@ const projectData = ref(null as any);
 		margin: 0 1%;
 
 		.centerTop {
-			height: 55%;
+			height: 53.8%;
 			// margin-bottom: 3%;
 		}
 		.centerBottom {
-			height: 45%;
+			height: 44.2%;
 			margin: 2% 0 0 0;
 		}
 	}

src/views/commandScreen/commandCenter/leftBottom.vue

@@ -12,24 +12,19 @@
 				<div class="cbHeader">
 					<div class="cbHeaderInfo">
 						<div class="cubeIcon"></div>
-						<div>教育智能提示</div>
+						<div>隐患智能分析</div>
 					</div>
 					<div class="cbHeaderLine"></div>
 				</div>
 				<div class="cbContent">
-					<el-scrollbar height="270">
+					<el-scrollbar height="278">
 						<div class="item" v-for="(item,index) in listData" :key="index">																																																																																																																																																																																																		
 							<div class="itemHead">
 								<div class="itemHeadInner" v-if="item.type === 1">{{item.header}}</div>
 								<div class="itemHeadInner2" v-if="item.type === 2">{{item.header}}</div>
 							</div>
 							<div class="itemContent">
-								<el-tooltip
+								<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start" >
-									class="box-item"
-									effect="dark"
-									:content="item.content"
-									placement="top-start"
-								>
 									{{item.content}}
 								</el-tooltip>
 							</div>
@@ -437,7 +432,7 @@ onMounted( async () => {
 				// background: #fff;
 				.item{
 					width: 100%;
-					line-height: 160%;
+					line-height: 130%;
 					display: flex;
 					align-items: center;
 					justify-content: flex-start;

src/views/commandScreen/commandCenter/rightAll.vue

@@ -1,8 +1,57 @@
 <template>
 	<div class="rightAll">
-		<!-- <Card title="安全管理"> -->
+		<div class="header">
-			<div id="echartsSafe" style="width: 100%; height: 100%"></div>
+			<div class="hLeft">
-		<!-- </Card> -->
+				隐患统计智能分析
+			</div>
+			<div class="hRight">
+				<el-date-picker style="width: 85%" v-model="value1" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" :size="size"/>
+			</div>
+		</div>
+		<div class="content">
+			<div class="contentTop">
+				<div class="ctHead">
+					<div>重大隐患超期未整改<text>{{overdueMajorDangerCount}}</text>个，占比<text>{{overdueMajorDangerRate}}%</text></div>
+				</div>
+				<div class="ctContent">
+					<div id="echartsSafe" style="width: 100%; height: 100%"></div>
+				</div>
+			</div>
+
+			<div class="contentMiddle">
+				<div class="cmHead">
+					<div>重大隐患未销项<text>{{majorDangerCount}}</text>个，占比<text>{{majorDangerRate}}%</text></div>
+				</div>
+				<div class="cmContent">
+					<div id="echartsMajorDanger" style="width: 100%; height: 100%"></div>
+				</div>
+			</div>
+
+			<div class="contentBottom">
+				<div class="cbHeader">
+					<div class="cbHeaderInfo">
+						<div class="cubeIcon"></div>
+						<div>教育智能提示</div>
+					</div>
+					<div class="cbHeaderLine"></div>
+				</div>
+				<div class="cbContent">
+					<el-scrollbar height="350">
+						<div class="item" v-for="(item,index) in listData" :key="index">																																																																																																																																																																																																		
+							<div class="itemHead">
+								<div class="itemHeadInner" v-if="item.type === 1">{{item.header}}</div>
+								<div class="itemHeadInner2" v-if="item.type === 2">{{item.header}}</div>
+							</div>
+							<div class="itemContent">
+								<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
+									{{item.content}}
+								</el-tooltip>
+							</div>
+						</div>
+					</el-scrollbar>
+				</div>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -16,6 +65,32 @@ import * as echarts from "echarts";
 const echartsTest = ref();
 let questionTotal = ref(0 as any);
 
+let majorDangerCount = ref(20 as any);
+let majorDangerRate = ref(50 as any);
+let overdueMajorDangerCount = ref(20 as any);
+let overdueMajorDangerRate = ref(50 as any);
+
+let listData = ref([
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+])
+
 let dataList = ref([
 	{
 		value: 30,
@@ -362,6 +437,153 @@ onMounted(async () => {
 	background-size: 100% 100%;
 	width: 100%;
 	height: 102.1%;
+	.header{
+		// width: 100%;
+		// height: 100%;
+		display: flex;
+		// align-items: center;
+		justify-content: space-between;
+		padding: 20px 20px;
+		border-bottom: 1px solid #0059ff;
+		.hLeft{
+			width: 50%;
+			color: white;
+		}
+		.hRight{
+			width: 50%;
+		}
+	}
+	.content{
+		padding: 0 20px;
+		height: 100%;
+		.contentTop{
+			margin-top: 10px;
+			width: 100%;
+			height: 25%;
+			background-color: darkblue;
+			.ctHead{
+				padding-bottom: 5px;
+				color: #fff;
+				height: 20%;
+				font-size: 16px;
+				display: flex;
+				justify-content: center;
+				align-items: flex-end;
+				text{
+					font-size: 24px;
+					color: #fc4c4c;
+				}
+			}
+			.ctContent{
+				height: 80%;
+				background-color: darkred;
+			}
+		}
+		.contentMiddle{
+			width: 100%;
+			height: 25%;
+			background-color: darkblue;
+			.cmHead{
+				padding-bottom: 5px;
+				color: #fff;
+				height: 20%;
+				font-size: 16px;
+				display: flex;
+				justify-content: center;
+				align-items: flex-end;
+				text{
+					font-size: 24px;
+					color: #0db027;
+				}
+			}
+			.cmContent{
+				height: 80%;
+				background-color: darkred;
+			}
+		}
+		.contentBottom{
+			// width: 100%;
+			height: 42.5%;
+			// background-color: darkred;
+
+			// width: 100%;
+			// background-color: #fff;
+			// padding: 0 20px;
+			position: relative;
+			.cbHeader{
+				width:100%;
+				height: 40px;
+				// background-color: darkred;
+				.cbHeaderInfo{
+					color: #fff;
+					display: flex;
+					justify-content: flex-start;
+					align-items: center;
+					.cubeIcon{
+						width: 36px;
+						height: 36px;
+						// background-color: #fff;
+						background: url("@/assets/images/commandScreen/head-cube.png") no-repeat;
+						background-size: 100% 100%;
+						// margin-left: -5px;
+						margin: 0 3px 0 -5px;
+					}
+				}
+				.cbHeaderLine{
+					height: 4px;
+					width: 100%;
+					// background-color: darkblue;
+					background: url("@/assets/images/commandScreen/head-line.png") no-repeat;
+					background-size: 100% 100%;
+				}
+			}
+			.cbContent{
+				width: 100%;
+				height: calc(100% - 40px);
+				// background: #fff;
+				.item{
+					// width: 100%;
+					line-height: 130%;
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+					// background-color: green;
+					color: #fff;
+					.itemHead{
+						white-space: nowrap;
+						.itemHeadInner{
+							font-size: 16px;
+							border: 1px solid #f77c7d;	
+							box-shadow: 0 0 0 1px #f77c7d;
+							background: rgba(247,124,125, 0.4);
+							border-radius: 3px;
+							padding: 0 15px;
+							margin: 9px 0;
+							margin-left: 2px;
+						}
+						.itemHeadInner2{
+							font-size: 16px;
+							border: 1px solid #56a8f8;	
+							box-shadow: 0 0 0 1px #56a8f8;
+							background: rgba(86,168,248, 0.4);
+							border-radius: 3px;
+							padding: 0 15px;
+							margin: 9px 0;
+							margin-left: 2px;
+						}
+					}
+					.itemContent{
+						margin-left: 10px;
+						font-size: 15px;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						
+					}
+				}
+			}
+		}
+	}
 }
 ::v-deep .h-card .content {
 	height: 80%;