feat：添加总览大屏

2024-06-13 18:39:41 +08:00 · 2024-06-13 18:39:41 +08:00 · 3f461a201f
commit 3f461a201f
parent b9ec4d0511
6 changed files with 272 additions and 90 deletions
--- a/.env.development
+++ b/.env.development
@ -4,7 +4,7 @@ NODE_ENV = 'development'
 # 本地环境接口地址(/api/index.ts文件中使用)
 # 后端本地
 # VITE_API_URL = 'http://192.168.34.221:19111'
-# VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
+VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
 # 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'
@ -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'
--- a/src/config/config.ts
+++ b/src/config/config.ts
@ -30,7 +30,8 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
 // export const COMPANY: string = "agjt"; //鞍钢集团
 // export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏
 // export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
-export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
+// export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
+export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览
 // export const COMPANY: string = "slx"; //苏立信项目
 // export const COMPANY: string = "hfqc"; //合肥启程项目
 // export const COMPANY: string = "jsyc"; // 江苏盐城项目
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@ -25,9 +25,9 @@ export const staticRouter: RouteRecordRaw[] = [
 		path: "/large",
 		name: "大屏",
 		// // component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
-		component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
+		// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
 		// component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
-		// component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
+		component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
 		// component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
 		// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
 		children: [
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -122,7 +122,7 @@ const login = (formEl: FormInstance | undefined) => {
 				}
 				// router.push("/commandScreen");
 				router.push("/agjtProjectKanban");
-			} else if (COMPANY === "agjtOverview") {
+			} else if (COMPANY === "agjtOverviewScreen") {
 				router.push("/overviewScreen");
 			} else {
 				// router.push("/projectOverview");
--- a/src/views/overviewScreen/commandCenter/index.vue
+++ b/src/views/overviewScreen/commandCenter/index.vue
@ -222,8 +222,8 @@ onMounted(() => {

 	.right {
 		width: 26%;
-		height: 109.2%;
-		transform: translateY(-70px);
+		height: 100%;
+		// transform: translateY(-70px);
 		// .rightAll {
 		// 	height: 32%;
 		// }
--- a/src/views/overviewScreen/commandCenter/rightAll.vue
+++ b/src/views/overviewScreen/commandCenter/rightAll.vue
@ -1,7 +1,7 @@
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <template>
 	<div class="rightAll">
-		<div class="card-content card-box">
+		<div class="card-content">
 			<Card title="隐患智能统计分析">
 				<div class="hRight">
 					<el-date-picker
@ -41,39 +41,48 @@
 		</div>
 		<div class="enterprise-box">
 			<Card title="各企业本周数据统计">
-				<div class="enterprise-info">
-					<div>辽宁五寰科技有限公司</div>
-					<div class="line1" style="display: flex">
-						<span style="margin-left: 15px">事故报警总数</span>
-						<div class="numberCard" v-for="(item, i) in '204'" :key="i">{{ item }}</div>
-					</div>
-				</div>
-				<div class="enterprise-list">
-					<div class="enterprise-title">
-						<div>入场人员总数</div>
-						<div>55</div>
-					</div>
-					<div class="enterprise-title">
-						<div>企业安全分</div>
-						<div>55</div>
-					</div>
-					<div class="enterprise-title">
-						<div>安全隐患总数</div>
-						<div>55</div>
-					</div>
-					<div class="enterprise-title">
-						<div>质量隐患总数</div>
-						<div>55</div>
-					</div>
-					<div class="enterprise-title">
-						<div>特殊作业数量</div>
-						<div>55</div>
-					</div>
-					<div class="enterprise-title">
-						<div>培训未通过率</div>
-						<div>56%</div>
-					</div>
-				</div>
+				<el-carousel style="width: 100%; height: 100%">
+					<el-carousel-item v-for="item in 4" :key="item" style="width: 100%; height: 100%">
+						<div class="enterprise-info">
+							<div>辽宁五寰科技有限公司{{ item }}</div>
+							<div class="line1" style="display: flex">
+								<span style="margin-left: 15px">事故报警总数</span>
+								<div class="numberCard" v-for="(ele, i) in '204'" :key="i">{{ ele }}</div>
+							</div>
+						</div>
+						<div class="enterprise-list">
+							<div class="enterprise-title">
+								<div>入场人员总数</div>
+								<div>55</div>
+							</div>
+							<div class="enterprise-title">
+								<div>企业安全分</div>
+								<div>55</div>
+							</div>
+							<div class="enterprise-title">
+								<div>安全隐患总数</div>
+								<div>55</div>
+							</div>
+							<div class="enterprise-title">
+								<div>质量隐患总数</div>
+								<div>55</div>
+							</div>
+							<div class="enterprise-title">
+								<div>特殊作业数量</div>
+								<div>55</div>
+							</div>
+							<div class="enterprise-title">
+								<div>培训未通过率</div>
+								<div>56%</div>
+							</div>
+						</div>
+					</el-carousel-item>
+				</el-carousel>
+			</Card>
+		</div>
+		<div class="manAnalysis-box">
+			<Card title="区域人员数量分析">
+				<div id="eacherManAnalysis" style="width: 100%; height: 100%"></div>
 			</Card>
 		</div>
 	</div>
@ -629,6 +638,169 @@ const qualityInfo = async (showLoading: boolean) => {
 	// drawEchart2();
 };

+function getManAnalysisEchart() {
+	const echartsTest = echarts.init(document.getElementById("eacherManAnalysis"));
+	let option = {
+		tooltip: {
+			trigger: "axis",
+			confine: true
+		},
+		legend: {
+			trigger: "item",
+			position: "inside",
+			top: "3%",
+			x: "center",
+			textStyle: {
+				color: "#fff"
+			},
+			itemWidth: 10,
+			itemHeight: 10,
+			icon: "roundRect",
+			data: ["一号区域", "二号区域", "三号区域"]
+		},
+		// color: ["#2BA5FF", "#F97766", "#1EF1FF", "#1EF1FF"],
+		grid: {
+			left: "6%",
+			right: "6%",
+			top: "15%",
+			bottom: "5%",
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			boundaryGap: false,
+			data: ["1", "5", "10", "15", "20", "25"],
+			axisLabel: {
+				color: "#fff"
+			},
+			axisTick: {
+				show: false
+			},
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: "#172A44"
+				}
+			}
+		},
+		yAxis: {
+			// name: "数量",
+			nameTextStyle: {
+				color: "#fff"
+			},
+			axisLabel: {
+				color: "#fff"
+			},
+			splitLine: {
+				lineStyle: {
+					color: "#172A44"
+				}
+			},
+			axisTick: {
+				show: false
+			},
+			axisLine: {
+				show: false,
+				lineStyle: {
+					color: "#2079A0"
+				}
+			}
+			// type: 'value'
+		},
+		// dataZoom: [
+		// 	{
+		// 		id: "dataZoomX",
+		// 		type: "inside",
+		// 		xAxisIndex: [0],
+		// 		brushSelect: false,
+		// 		zoomOnMouseWheel: false,
+		// 		moveOnMouseWheel: true, // 开启滚轮平移
+		// 		moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
+		// 		preventDefaultMouseMove: false,
+		// 		// start:100,
+		// 		startValue: riskList.value.length - 1,
+		// 		endValue: riskList.value.length - 6,
+		// 		// 滚动条高度
+		// 		width: 8,
+		// 		// 滚动条显示位置
+		// 		// height: "80%",
+		// 		// 距离右边
+		// 		right: 3,
+		// 		// 控制手柄的尺寸
+		// 		handleSize: 0,
+		// 		filterMode: "empty"
+		// 		// top: "top",
+		// 	}
+		// ],
+		series: [
+			{
+				name: "一号区域",
+				type: "line",
+				// stack: "Total",
+				lineStyle: {
+					color: "rgba(43, 165, 255, 1) ",
+					shadowBlur: 12,
+					shadowColor: "rgba(43, 165, 255, 0.9)",
+					shadowOffsetX: 1,
+					shadowOffsetY: 1
+				},
+				itemStyle: {
+					color: "rgba(43, 165, 255, 1) ",
+					borderWidth: 1,
+					borderColor: "#FFF"
+				},
+				smooth: true,
+				symbol: "none",
+				data: [12, 8, 15, 20, 32, 20]
+			},
+			{
+				name: "二号区域",
+				type: "line",
+				lineStyle: {
+					color: "rgba(249, 119, 102, 1) ",
+					shadowBlur: 12,
+					shadowColor: "rgba(249, 119, 102, 0.9)",
+					shadowOffsetX: 1,
+					shadowOffsetY: 1
+				},
+				itemStyle: {
+					color: "rgba(249, 119, 102, 1) ",
+					borderWidth: 1,
+					borderColor: "#FFF"
+				},
+				smooth: true,
+				symbol: "none",
+				data: [12, 3, 4, 5, 6, 10]
+			},
+			{
+				name: "三号区域",
+				type: "line",
+				lineStyle: {
+					color: "rgba(30, 241, 255, 1) ",
+					shadowBlur: 12,
+					shadowColor: "rgba(30, 241, 255, 0.9)",
+					shadowOffsetX: 1,
+					shadowOffsetY: 1
+				},
+				itemStyle: {
+					color: "rgba(30, 241, 255, 1) ",
+					borderWidth: 1,
+					borderColor: "#FFF"
+				},
+				smooth: true,
+				symbol: "none",
+				data: [20, 30, 14, 15, 26, 1]
+			}
+		]
+	};
+	echartsTest.setOption(option, true);
+	window.addEventListener("resize", () => {
+		console.log(echartsTest);
+		echartsTest.resize();
+	});
+	console.log(echartsTest);
+}
+
 watch(
 	dateRange,
 	() => {
@ -645,6 +817,7 @@ watch(
 const setIntervalFn = (showLoading: boolean) => {
 	getSafeInfo(showLoading);
 	qualityInfo(showLoading);
+	getManAnalysisEchart();
 };

 onMounted(async () => {
@ -656,10 +829,16 @@ onMounted(async () => {
 </script>

 <style lang="scss" scoped>
+.manAnalysis-box {
+	height: 32%;
+	margin-top: 1%;
+}
 .enterprise-box {
-	height: 25%;
+	height: 28%;
+	margin-top: 1%;
 	:deep(.h-card .content) {
 		padding: 6px 10px;
+		height: 80%;
 	}
 	.enterprise-info {
 		display: flex;
@ -674,7 +853,7 @@ onMounted(async () => {
 	.enterprise-list {
 		display: grid;
 		grid-template-columns: 33% 33% 33%;
-		margin: 10px 8px;
+		margin: 4px 8px 10px 8px;
 		.enterprise-title {
 			margin-left: 10px;
 			margin-top: 10px;
@ -696,7 +875,14 @@ onMounted(async () => {
 	}
 }

-.card-box {
+.card-content {
+	height: 40%;
+	.hRight {
+		width: 50%;
+		position: absolute;
+		top: 1%;
+		right: 0;
+	}
 	.contentTop {
 		width: 100%;
 		height: 100% !important;
@ -752,15 +938,6 @@ onMounted(async () => {
 		}
 	}
 }
-.card-content {
-	height: 40%;
-	.hRight {
-		width: 50%;
-		position: absolute;
-		top: 1%;
-		right: 0;
-	}
-}

 .line1 {
 	color: #fff;
@ -797,36 +974,40 @@ onMounted(async () => {
 	color: white;
 	right: 3%;
 }
-
-.title-tabs {
-	width: initial !important;
-	display: flex;
-	align-items: center;
-	height: 13%;
-	// margin-left: 4%;
-	color: white !important;
-
-	> div {
-		// padding: 2px 0;
-		font-size: 13px;
-		font-weight: normal;
-		line-height: 25px;
-		width: 170px;
-		width: 140px;
-		text-align: center;
-		// background-color: #315296;
-		background: rgb(0, 33, 116);
-		background: linear-gradient(270deg, rgba(0, 33, 116, 0.8) 0%, rgba(40, 88, 184, 0.3) 96%);
-		cursor: pointer;
+:deep(.el-carousel__container) {
+	height: 100%;
+}
+:deep() {
+	.el-carousel__indicator--horizontal .el-carousel__button {
+		width: 10px;
+		height: 10px;
+		background: #a8c3dd;
+		border: 1px solid #a8c3dd;
+		border-radius: 50%;
+		opacity: 0.3;
 	}
-
-	.title-color {
-		// background-color: #1449b6;
-		background: rgb(0, 33, 116);
-		background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
+	.el-carousel__indicator--horizontal.is-active .el-carousel__button {
+		width: 10px;
+		height: 10px;
+		background: #4ac0f3;
+		border: 1px solid #4ac0f3;
+		border-radius: 50%;
+		opacity: 1;
 	}
 }

+.scroll {
+	height: 100%;
+	overflow: hidden;
+}
+
+.rightAll {
+	// background: url("@/assets/images/commandScreen/card-right-all.png") no-repeat;
+	// background-color: #fff;
+	// background-size: 100% 100%;
+	width: 100%;
+	height: 100%;
+}
 .notoDta {
 	top: 25%;
 	width: 50%;
@ -847,18 +1028,18 @@ onMounted(async () => {
 		margin: -6% 30%;
 	}
 }
-
-.scroll {
-	height: 100%;
-	overflow: hidden;
+:deep(.el-input__inner) {
+	color: #fff;
 }

-.rightAll {
-	// background: url("@/assets/images/commandScreen/card-right-all.png") no-repeat;
-	// background-color: #fff;
-	// background-size: 100% 100%;
-	width: 100%;
-	height: 100%;
+:deep(.el-select .el-input .el-select__caret) {
+	color: #fff;
+}
+
+:deep(.el-input__wrapper) {
+	width: 85%;
+	height: 0%;
+	background: #0d2956;
 }

 :deep(.el-range-separator) {