dev:开发指挥部大屏页面左边

src/views/commandScreen/commandCenter/leftBottom.vue

@@ -1,58 +1,389 @@
 <template>
 	<div class="leftBottom">
 		<div class="header">
-			<div class="hLeft">
-				安全教育智能分析
+			<div class="hLeft">安全教育智能分析</div>
+			<div class="hRight"></div>
+		</div>
+		<div class="content">
+			<div class="contentTop">
+				<div id="echartsEdu" style="width: 100%; height: 100%"></div>
 			</div>
-			<div class="hRight">
+			<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="270">
+						<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>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-// ts
-type Props = {
-	statisticsCount?: any; // 传入人员数据
-};
-// withDefaults 定义默认值(传入的数据类型同默认值)
-const props = withDefaults(defineProps<Props>(), {
-	statisticsCount: {
-		devcount: {}
-	}
-});
-// 人员概况数据
-const statisticsCount = ref({
-	devcount: {}
-} as any);
+import { onMounted, ref } from "vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+import * as echarts from "echarts";
+import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
 
-watch(
-	() => props.statisticsCount,
-	newVal => {
-		// console.log(newVal, "newVal");
-		if (newVal) {
-			// props.xData = newVal;
-			statisticsCount.value = newVal;
+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%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+])
+
+let questionTotal = ref(0 as any);
+let dataList = ref([
+	{
+		value: 30,
+		show: true,
+		name: "未教育人员",
+		itemStyle: {
+			normal: {
+				color: "#038cf5",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 70,
+		show: true,
+		name: "完成人员",
+		itemStyle: {
+			normal: {
+				color: "#01d6f4",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 70,
+		show: true,
+		name: "现场人员",
+		itemStyle: {
+			normal: {
+				color: "#03e9f6",
+				borderWidth: 20
+			}
 		}
 	}
-);
+]);
+function Pie() {
+	let dataArr = [];
+	for (var i = 0; i < 150; i++) {
+		if (i % 2 === 0) {
+			dataArr.push({
+				name: (i + 1).toString(),
+				value: 10,
+				itemStyle: {
+					normal: {
+						color: "#7cf4f1",
+						borderWidth: 0,
+						borderColor: "#7f6546"
+					}
+				}
+			});
+		} else {
+			dataArr.push({
+				name: (i + 1).toString(),
+				value: 10,
+				itemStyle: {
+					normal: {
+						color: "rgba(0,0,0,0)",
+						borderWidth: 0,
+						borderColor: "rgba(0,0,0,0)"
+					}
+				}
+			});
+		}
+	}
+	return dataArr;
+}
+
+function drawEchart() {
+	let echartsTest = echarts.init(document.getElementById("echartsEdu"));
+	let option = {
+		tooltip: {
+			trigger: "item"
+		},
+		title: {
+			// text: questionTotal.value,
+			text: '100%',
+			subtext: "入场三级教育\n完成率",
+			x: "24%",
+			y: "center",
+			textAlign: "center",
+			textStyle: {
+				color: "#fff",
+				fontSize: 26,
+				fontWeight: "normal",
+				// align: "center",
+				// width: "200px",
+				fontFamily: "sadigitalNumber"
+			},
+			subtextStyle: {
+				color: "#ccc",
+				fontSize: 12,
+				fontWeight: "normal"
+				// align: "center",
+			}
+		},
+		legend: {
+			selectedMode: false, // 取消图例上的点击事件
+			icon: "rect",
+			type: "plain",
+			orient: "vertical",
+			left: "55%",
+			top: "28%",
+			align: "left",
+			itemGap: 30,
+			itemWidth: 8, // 设置宽度
+			itemHeight: 7, // 设置高度
+			symbolKeepAspect: false,
+			textStyle: {
+				color: "#000",
+				rich: {
+					name: {
+						verticalAlign: "right",
+						align: "left",
+						fontSize: 14,
+						color: "#FFFFFF"
+					},
+					value: {
+						align: "left",
+						fontSize: 14,
+						color: "#FFFFFF"
+					}
+				}
+			},
+			data: dataList.value.map(item => {
+				if (item.show) {
+					return item.name;
+				}
+			}),
+			formatter: function (data) {
+				if (dataList.value && dataList.value.length) {
+					for (var i = 0; i < dataList.value.length; i++) {
+						if (data === dataList.value[i].name) {
+							var value = dataList.value[i].value;
+							var percentage = value + "%";
+							return "{name| " + data + "}  {gap|       }" + "{value|" + value + " " + "}";
+						}
+					}
+				}
+			}
+		},
+		series: [
+			// 外侧光线
+			{
+				name: "",
+				type: "gauge",
+				center: ["25%", "55%"],
+				radius: "90%",
+				startAngle: 235,
+				endAngle: -50,
+				min: 0,
+				max: 100,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 2,
+						color: [
+							[
+								100 / 100,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0,
+										color: "#526277"
+									},
+									{
+										offset: 0.25,
+										color: "rgba(4, 14, 54,0.4)"
+									},
+									{
+										offset: 0.7,
+										color: "rgba(4, 14, 54,0.4)"
+									},
+									{
+										offset: 1,
+										color: "#526277"
+									}
+								])
+							],
+							[1, "rgba(255,255,255,0)"]
+						]
+					}
+				},
+
+				axisTick: {
+					show: 0
+				},
+				splitLine: {
+					show: 0
+				},
+				axisLabel: {
+					show: 0
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			{
+				name: "",
+				type: "gauge",
+				center: ["25%", "55%"],
+				radius: "80%",
+				startAngle: 245,
+				endAngle: -115,
+				min: 0,
+				max: 100,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 2,
+						color: [
+							[
+								200 / 100,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0.8,
+										color: "#52bef0"
+									},
+									{
+										offset: 0.5,
+										color: "#13356b"
+									}
+								])
+							],
+							[1, "rgba(255,255,255,0)"]
+						]
+					}
+				},
+
+				axisTick: {
+					show: 0
+				},
+				splitLine: {
+					show: 0
+				},
+				axisLabel: {
+					show: 0
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			{
+				name: "",
+				type: "pie",
+				radius: [65, 75],
+				center: ["25%", "55%"],
+				hoverAnimation: true,
+				itemStyle: {
+					borderRadius: 10,
+					borderWidth: 10
+				},
+				label: {
+					show: false,
+					position: "center"
+				},
+				emphasis: {
+					label: {
+						show: false
+					}
+				},
+				labelLine: {
+					show: false
+				},
+				data: dataList.value
+			},
+			{
+				type: "pie",
+				radius: ["57", "60"],
+				center: ["25%", "55%"],
+				label: {
+					show: false
+				},
+
+				data: Pie()
+			}
+		]
+	};
+	echartsTest.setOption(option, true);
+	// window.addEventListener("resize", () => {
+	// 	console.log(666)
+	// 	echartsTest.resize();
+	// })
+}
+//获取质量管理
+// const safeData = ref(null as any);
+const qualityInfo = async () => {
+	const res: any = await selectQualityStatisticsApi({ projectSn: store.sn });
+	dataList.value[0].value = res.result.total.rectificationNum;
+	dataList.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
+	questionTotal.value = res.result.total.totalNum;
+	drawEchart();
+};
+//将方法暴露给父组件
+defineExpose({
+	qualityInfo
+})
+onMounted( async () => {
+	qualityInfo();
+});
 </script>
 
 <style lang="scss" scoped>
 .leftBottom {
 	background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
-	// background-color: darkred;
 	background-size: 100% 100%;
+	height: 100%;
 	.header{
-		// width: 100%;
-		// height: 100%;
 		display: flex;
-		// align-items: center;
 		justify-content: space-between;
 		padding: 20px 20px;
-		// border-bottom: 1px solid #0644b7;
-		border-bottom: 2px solid #0644b7;
+		border-top: none;
+		border-left: none;
+		border-right: none;	
+		border-bottom: 1px solid #0059ff;
+		// height: 10%;
 		.hLeft{
 			width: 50%;
 			color: white;
@@ -61,5 +392,91 @@ watch(
 			width: 50%;
 		}
 	}
+	.content{
+		height: 90%;
+		// background-color: #fff;
+		.contentTop{
+			height: 40%;
+		}
+		.centerBottom{
+			// width: 100%;
+			height: 60%;
+			// 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: 160%;
+					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;
+						
+					}
+				}
+			}
+		}
+	}
 }
 </style>

src/views/commandScreen/commandCenter/leftTop.vue

@@ -8,6 +8,35 @@
 				<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">
+			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+				<el-tab-pane label="整改人" name="first"></el-tab-pane>
+				<el-tab-pane label="检查人" name="second"></el-tab-pane>
+				<el-tab-pane label="按分包单位分析" name="third"></el-tab-pane>
+			</el-tabs>
+			<div class="tabList">
+				<div>排名</div>
+				<div>姓名</div>
+				<div>整改数量</div>
+				<div>整改率</div>
+				<div>及时整改率</div>
+			</div>
+			<div class="listBox">
+				<el-scrollbar height="150">
+					<div v-for="(item, index) in tabList" :key="index" class="listStyle">
+						<div>{{ item.sortLine }}</div>
+						<div>{{ item.name }}</div>
+						<div>{{ item.count }}</div>
+						<div>{{ item.rate }}</div>
+						<div>{{ item.immediateRate }}</div>
+					</div>
+				</el-scrollbar>
+				<div class="notoDta" v-if="tabList.length == 0">
+					<img src="@/assets/images/noData.png" alt="" />
+					<p>暂无数据</p>
+				</div>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -15,60 +44,55 @@
 import { GlobalStore } from "@/stores";
 import { ref, onMounted, watch } from "vue";
 import { getStageOption } from "@/api/modules/projectOverview";
+import type { TabsPaneContext } from 'element-plus'
 
-// ts
-type Props = {
-	projectData?: any; // 传入项目信息
-};
-// withDefaults 定义默认值(传入的数据类型同默认值)
-const props = withDefaults(defineProps<Props>(), {
-	projectData: {}
-});
-// 项目信息
-const projectData = ref({} as any);
+const activeName = ref('first')
 
-const projectLocal = ref("" as any);
-const store = GlobalStore();
-const projectTypeEnumList:any = ref([]); //工程类别
-// 工程类别字典数据
-const projectTypeEnum = async () => {
-	const res: any = await getStageOption({ dictionaryEncoding: "project_type", projectSn: store.sn });
-	if (res.result.length > 0) {
-		let newArray = res.result.map((item: any) => {
-			return {
-				name: item.name,
-				id: Number(item.data)
-			};
-		});
-		projectTypeEnumList.value = newArray
-	} else {
-		projectTypeEnumList.value = []
-	}
-};
-//将方法暴露给父组件
-defineExpose({
-	projectTypeEnum
-})
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const tabList = [
+  { sortLine: '1', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '2', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '3', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '4', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
+]
 onMounted( async () => {
-	await projectTypeEnum();
+	
 })
-watch(
-	() => props.projectData,
-	newVal => {
-		// console.log(newVal, "newVal");
-		if (newVal) {
-			// props.xData = newVal;
-			projectData.value = newVal;
-			projectLocal.value =
-				projectData.value.provinceName +
-				projectData.value.cityName +
-				projectData.value.areaName +
-				projectData.value.projectAddress;
-		}
-	}
-);
+// watch(
+// 	() => props.projectData,
+// 	newVal => {
+// 		// console.log(newVal, "newVal");
+// 		if (newVal) {
+// 			// props.xData = newVal;
+// 			projectData.value = newVal;
+// 			projectLocal.value =
+// 				projectData.value.provinceName +
+// 				projectData.value.cityName +
+// 				projectData.value.areaName +
+// 				projectData.value.projectAddress;
+// 		}
+// 	}
+// );
 </script>
 <style lang="scss" scoped>
+
 .leftTop {
 	background: url("@/assets/images/commandScreen/card-left-top.png") no-repeat;
 	// background-color: #fff;
@@ -82,8 +106,7 @@ watch(
 		// align-items: center;
 		justify-content: space-between;
 		padding: 20px 20px;
-		// border-bottom: 1px solid #0644b7;
-		border-bottom: 2px solid #0644b7;
+		border-bottom: 1px solid #0059ff;
 		.hLeft{
 			width: 50%;
 			color: white;
@@ -92,5 +115,74 @@ watch(
 			width: 50%;
 		}
 	}
+	.content{
+		padding: 0 20px;
+		::v-deep .el-tabs__item{
+			color: #fff;
+		}
+		::v-deep .el-tabs__nav-wrap::after{
+			background-color: rgba(255,0,0,0);
+		}
+		.tabList {
+			display: flex;
+			width: 100%;
+			height: 14%;
+			// background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
+			background-color: #00224f;
+			background-size: 100% 100%;
+			left: 75.5%;
+			top: 75%;
+			color: #fff;
+			font-size: 14px;
+			line-height: 30px;
+			justify-content: space-around;
+			text-align: center;
+
+			div {
+				width: 100px;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+		.listBox {
+			// height: 10%;
+			.listStyle {
+				display: flex;
+				justify-content: space-around;
+				color: #fff;
+				height: 12%;
+				line-height: 25px;
+				font-size: 12px;
+				text-align: center;
+				div {
+					width: 100px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+			.listStyle:hover {
+				background: #003c84;
+			}
+		}
+		.notoDta {
+			top: 40%;
+			width: 30%;
+			left: 35%;
+			text-align: center;
+			position: absolute;
+			img {
+				width: 40%;
+				margin: 5% 30%;
+			}
+			p {
+				color: #fff;
+				font-size: 14px;
+				margin: -6% 37%;
+			}
+		}
+
+	}
 }
 </style>