修改指挥部大屏页面

.env.development

@@ -5,7 +5,7 @@ NODE_ENV = 'development'
 # 后端本地
 # VITE_API_URL = 'http://192.168.34.221:19111'
 # VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
-# VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
+VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
 # VITE_API_URL = 'http://192.168.34.221:28889'
 # VITE_API_URL = 'http://121.196.214.246/api'
 # VITE_API_URL = 'http://jxj.zhgdyun.com:100'
@@ -24,7 +24,7 @@ NODE_ENV = 'development'
 # VITE_API_URL = 'http://182.90.224.237:15551'
 # agjt
 # VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
-VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
+# VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
 # VITE_API_URL = 'http://jxj.zhgdyun.com:19812'
 # 苏立信
 # VITE_API_URL = 'http://101.43.164.214:11111'

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

@@ -218,7 +218,7 @@ onMounted(async () => {
 		width: 100%;
 		height: calc(100% - 40px);
 		overflow: hidden;
-
+		
 		// background: #fff;
 		.item {
 			width: 100%;

src/views/commandScreen/commandCenter/leftBottom(旧版2).vue

@@ -0,0 +1,794 @@
+<template>
+	<div class="leftBottom">
+		<div class="header">
+			<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 class="notoDta" v-if="dataList2.length == 0">
+					<img src="@/assets/images/noData.png" alt="" />
+					<p>暂无数据</p>
+				</div>
+			</div>
+			<div class="centerBottom">
+				<div class="leftTop">
+					<div class="header">
+						<div class="hLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">人员履职情况分析</div>
+						<div class="hRight">
+							<el-date-picker style="width: 85%" v-model="dateRange" type="daterange"
+								value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期"
+								end-placeholder="结束日期" @change="dateChange" />
+						</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 v-if="activeIndex === '0' || activeIndex === '1'">姓名</div>
+							<div v-if="activeIndex === '2'">分包单位</div>
+							<div v-if="activeIndex === '0' || activeIndex === '2'">整改数量</div>
+							<div v-if="activeIndex === '1'">发起隐患数</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>{{ index + 1 }}</div>
+									<div v-if="activeIndex === '0' || activeIndex === '1'">{{ item.workerName }}</div>
+									<div v-if="activeIndex === '2'" :title="item.enterpriseName">{{ item.enterpriseName
+										}}</div>
+									<div v-if="activeIndex === '0' || activeIndex === '2'">{{ item.rectifiedNum }}</div>
+									<div v-if="activeIndex === '1'">{{ item.createDangerNum }}</div>
+									<div>{{ item.rectifiedNumRatio }}</div>
+									<div>{{ item.rectifiedNumRatioTimely }}</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>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
+import { getMemberJobStatusApi, getInspectManStatusApi, getEnterpriseStatusApi } from "@/api/modules/agjtCommandApi";
+import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
+import type { TabsPaneContext, ElMessageBox } from "element-plus";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+const emits = defineEmits(["openDialog"]);
+const activeName = ref("first");
+const activeIndex = ref("0" as any);
+const dateRange = ref([]);
+const tabList = ref([] as any);
+const inspectTabList = ref([] as any);
+let listData = ref([
+	{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
+	{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
+	{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
+	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
+	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
+	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
+	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
+	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
+	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" }
+]);
+
+let dataList2 = ref([
+	{
+		value: 0,
+		show: true,
+		name: "未教育人员",
+		// 设置文本颜色
+		// textStyle: {
+		// 	color: '#038cf5'
+		// },
+		itemStyle: {
+			normal: {
+				color: "#038cf5",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 0,
+		show: true,
+		name: "完成人员",
+		// 设置文本颜色
+		// textStyle: {
+		// 	color: '#01d6f4'
+		// }
+		itemStyle: {
+			normal: {
+				color: "#01d6f4",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 0,
+		show: true,
+		name: "现场人员",
+		itemStyle: {
+			normal: {
+				color: "#03e9f6",
+				borderWidth: 20
+			}
+		}
+	}
+]);
+// 打开弹窗
+const openDialogData = (obj: any) => {
+	emits("openDialog", obj);
+};
+const dateChange = () => {
+	if (activeIndex.value == "0") {
+		getMemberJobStatusFn();
+	} else if (activeIndex.value == "1") {
+		getInspectManStatusFn();
+	} else if (activeIndex.value == "2") {
+		getEnterpriseStatusFn();
+	}
+}
+//获取人员数据
+const getPersonList = async () => {
+	const res: any = await getPersonTypeAndEduStatisticsApi({
+		projectSn: store.sn
+	});
+	if (res.result) {
+		dataList2.value[1].value = res.result.personType.toaltPerson.totalPerson;
+		dataList2.value[2].value = res.result.personType.toaltPerson.totalPerson;
+		console.log("安全教育智能分析666", res);
+		drawEchart2();
+	}
+};
+// 获取人员履职情况分析数据--整改人
+const getMemberJobStatusFn = async () => {
+	let requestData: any = {
+		projectSn: store.sn,
+		pageSize: 5,
+		pageNo: 1
+	};
+	if (dateRange.value && dateRange.value.length > 0) {
+		requestData.inspectTime_begin = dateRange.value[0];
+		requestData.inspectTime_end = dateRange.value[1];
+	}
+	const res: any = await getMemberJobStatusApi(requestData);
+	console.log("人员履职情况res--整改人", res);
+	if (res.result) {
+		tabList.value = res.result.records;
+	} else {
+		tabList.value = [];
+	}
+};
+// 获取人员履职情况分析数据--检查人
+const getInspectManStatusFn = async () => {
+	let requestData: any = {
+		projectSn: store.sn,
+		pageSize: 5,
+		pageNo: 1
+	};
+	if (dateRange.value && dateRange.value.length > 0) {
+		requestData.inspectTime_begin = dateRange.value[0];
+		requestData.inspectTime_end = dateRange.value[1];
+	}
+	const res: any = await getInspectManStatusApi(requestData);
+	console.log("人员履职情况res--检查人", res);
+	if (res.result) {
+		tabList.value = res.result.records;
+	} else {
+		tabList.value = [];
+	}
+};
+// 获取人员履职情况分析数据--按分包单位分析
+const getEnterpriseStatusFn = async () => {
+	let requestData: any = {
+		projectSn: store.sn,
+		pageSize: 5,
+		pageNo: 1
+	};
+	if (dateRange.value && dateRange.value.length > 0) {
+		requestData.inspectTime_begin = dateRange.value[0];
+		requestData.inspectTime_end = dateRange.value[1];
+	}
+	const res: any = await getEnterpriseStatusApi(requestData);
+	console.log("人员履职情况res--按分包单位分析", res);
+	if (res.result) {
+		tabList.value = res.result.records;
+	} else {
+		tabList.value = [];
+	}
+};
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+	activeIndex.value = tab.index;
+	console.log(tab);
+	if (tab.index == "0") {
+		getMemberJobStatusFn();
+	} else if (tab.index == "1") {
+		getInspectManStatusFn();
+	} else if (tab.index == "2") {
+		getEnterpriseStatusFn();
+	}
+	console.log("activeIndex", activeIndex.value);
+};
+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 drawEchart2() {
+	let echartsTest = echarts.init(document.getElementById("echartsEdu"));
+	let option = {
+		tooltip: {
+			trigger: "item"
+		},
+		title: {
+			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"
+					},
+					value1: {
+						align: "left",
+						fontSize: 14,
+						color: "#FBDC00",
+						fontFamily: "Source Han Sans CN, Source Han Sans CN",
+						fontWeight: "bold"
+					},
+					value2: {
+						align: "left",
+						fontSize: 14,
+						color: "#0DAF27",
+						fontFamily: "Source Han Sans CN, Source Han Sans CN",
+						fontWeight: "bold"
+					},
+					value3: {
+						align: "left",
+						fontSize: 14,
+						color: "#047EFF",
+						fontFamily: "Source Han Sans CN, Source Han Sans CN",
+						fontWeight: "bold"
+					}
+				}
+			},
+			data: dataList2.value.map(item => {
+				if (item.show) {
+					return item.name;
+				}
+			}),
+			formatter: function (data) {
+				console.log(data, 666777);
+				if (dataList2.value && dataList2.value.length) {
+					for (var i = 0; i < dataList2.value.length; i++) {
+						if (data === dataList2.value[i].name) {
+							var value = dataList2.value[i].value;
+							var percentage = value + "%";
+							console.log(value, 888);
+							if (data == "未教育人员") {
+								return "{name| " + data + "}  {gap|       }" + "{value1|" + value + " " + "}";
+							} else if (data == "完成人员") {
+								return "{name| " + data + "}  {gap|       }" + "{value2|" + value + " " + "}";
+							} else if (data == "现场人员") {
+								return "{name| " + data + "}  {gap|       }" + "{value3|" + 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: dataList2.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();
+	// })
+}
+onMounted(async () => {
+	getMemberJobStatusFn();
+	getPersonList();
+});
+</script>
+
+<style lang="scss" scoped>
+.leftBottom {
+	background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
+	background-size: 100% 100%;
+	height: 100%;
+
+	.header {
+		display: flex;
+		justify-content: space-between;
+		padding: 20px 20px;
+		border-top: none;
+		border-left: none;
+		border-right: none;
+		border-bottom: 1px solid #0059ff;
+
+		// height: 10%;
+		.hLeft {
+			width: 50%;
+			font-size: 20px;
+			font-weight: bold;
+			background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
+			-webkit-background-clip: text;
+			background-clip: text;
+			color: transparent;
+		}
+
+		.hRight {
+			width: 50%;
+		}
+	}
+
+	.content {
+		height: 90%;
+
+		// background-color: #fff;
+		.contentTop {
+			height: 40%;
+		}
+
+		.centerBottom {
+			// width: 100%;
+			height: 60%;
+			// background-color: #fff;
+			position: relative;
+
+			.leftTop {
+				width: 100%;
+				height: 35%;
+
+				.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%;
+						font-size: 20px;
+						font-weight: bold;
+						background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
+						-webkit-background-clip: text;
+						background-clip: text;
+						color: transparent;
+					}
+
+					.hRight {
+						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: 30%;
+						// 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: 52%;
+						width: 45%;
+						left: 28%;
+						text-align: center;
+						position: absolute;
+
+						img {
+							width: 40%;
+							margin: 5% 30%;
+						}
+
+						p {
+							color: #fff;
+							font-size: 14px;
+							margin: -6% 37%;
+						}
+					}
+				}
+			}
+
+			::v-deep .el-input__inner {
+				color: #fff;
+			}
+
+			::v-deep .el-select .el-input .el-select__caret {
+				color: #fff;
+			}
+
+			::v-deep .el-input__wrapper {
+				width: 85%;
+				height: 0%;
+				background: #0d2956;
+			}
+
+			::v-deep .el-range-separator {
+				color: #ccc;
+				font-size: 10px;
+			}
+
+			::v-deep .el-range-input {
+				color: #ccc;
+				font-size: 10px;
+			}
+
+			.dialogContainer {
+				padding: 0 50px;
+
+				// height: 600px;
+				::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%;
+					}
+				}
+			}
+
+			::v-deep .el-dialog {
+				background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
+				// background-color: #fff;
+				background-size: 100% 100%;
+				margin-top: 12%;
+			}
+
+			::v-deep .el-dialog__headerbtn {
+				right: 35px;
+				top: 25px;
+			}
+
+			::v-deep .el-dialog .el-dialog__header .el-dialog__title {
+				margin-left: 30px;
+				margin-top: 10px;
+				font-size: 18px;
+				color: #fff;
+				position: absolute;
+			}
+
+			::v-deep el-dialog__header {
+				margin-top: 20px;
+			}
+		}
+	}
+}
+</style>