fix

virgo.wzfrontend/console/package-lock.json

@@ -4059,6 +4059,11 @@
 			"resolved": "https://registry.npmmirror.com/atob/-/atob-2.1.2.tgz",
 			"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
 		},
+		"autofit.js": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmmirror.com/autofit.js/-/autofit.js-3.1.3.tgz",
+			"integrity": "sha512-+TWc28CqwXmEcyVRofESxPt9WisGENDcTFzeJsNPhkPDouWL98QzAZxrID8K32joBNrulN2N0OZiL6X9Kv3wxg=="
+		},
 		"autoprefixer": {
 			"version": "10.4.19",
 			"resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.19.tgz",

virgo.wzfrontend/console/package.json

@@ -10,6 +10,7 @@
 	"dependencies": {
 		"@amap/amap-jsapi-loader": "^1.0.1",
 		"@babel/polyfill": "^7.12.1",
+		"autofit.js": "^3.1.3",
 		"core-js": "^3.3.2",
 		"dayjs": "^1.11.11",
 		"element-ui": "^2.15.13",

virgo.wzfrontend/console/public/icon/font.css

@@ -0,0 +1,50 @@
+@font-face {
+	font-family: "alibabaRegular";
+	font-weight: 400;
+	src: url("./Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf") format("truetype");
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "alibabaBold";
+	font-weight: 400;
+	src: url("./Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf") format("truetype");
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "alibabaMedium";
+	font-weight: 400;
+	src: url("./Alibaba_PuHuiTi_2.0_65_Medium_65_Medium.ttf") format("truetype");
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "YouSheBiaoTiHei";
+	font-weight: 400;
+	src: url("./YouSheBiaoTiHei-2.ttf") format("truetype");
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "PangMenZhengDao";
+	font-weight: 400;
+	src: url("./PangMenZhengDao.ttf") format("truetype");
+	src: url("./PangMenZhengDao.otf") format("truetype");
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "hanyiyaku";
+	font-weight: 400;
+	src: url("./hanyiyaku.ttf") format("truetype");
+	font-display: swap;
+}
+
+.pangmenzhengdao {
+	font-family: 'PangMenZhengDao';
+}
+
+.alibaba {
+	font-family: 'alibabaMedium';
+}

virgo.wzfrontend/console/public/index.html

@@ -8,6 +8,7 @@
 		<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4358860_x95h0gxg7vk.css">
 		<title>有极</title>
 		<script src="<%= BASE_URL %>jquery.js"></script>
+		<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>icon/font.css" />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
 		<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"></script>
 	</head>

virgo.wzfrontend/console/src/assets/scss/datav.scss

@@ -0,0 +1,636 @@
+.datav-box {
+	.lantian {
+		.top-bottom-data {
+			display: flex;
+
+			.bottom-data-box {
+				flex: 1;
+				width: 0;
+			}
+		}
+
+		.monitor-box {
+			overflow-x: auto;
+			width: 100%;
+			padding-bottom: 10px;
+		}
+
+		.monitor-list {
+			margin-top: 12px;
+			display: flex;
+
+		}
+
+		.monitor-list .monitor-item {
+			width: 292px;
+			height: 164px;
+			margin-right: 12px;
+			// flex: 0 0 auto;
+			position: relative;
+
+			.tip {
+				position: absolute;
+				bottom: 0;
+				z-index: 2;
+				background-image: linear-gradient(0deg, rgba(0, 151, 206, 0.7) 0%, rgba(0, 105, 248, 0.7) 100%);
+				background-repeat: repeat;
+				background-size: normal;
+				color: #fff;
+				padding: 5px 10px;
+			}
+
+			.video-mask {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				background: rgba(0, 0, 0, 0.5);
+				z-index: 3;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				opacity: 0;
+				transition: 300ms;
+				cursor: pointer;
+
+				i {
+					font-size: 24px;
+				}
+			}
+		}
+
+		.monitor-item:hover {
+			.video-mask {
+				opacity: 1;
+			}
+		}
+
+		.monitor-list .monitor-item:last-child {
+			margin-right: 0px;
+		}
+
+		.monitor-list .monitor-item img {
+			width: 100%;
+			height: 100%;
+		}
+
+		/* notice start */
+		.notice-data .notice-list {
+			margin-top: 20px;
+			overflow-y: auto;
+			max-height: 200px;
+			margin-bottom: 26px;
+		}
+
+		.notice-data .notice-item {
+			height: 36px;
+			display: flex;
+			align-items: center;
+			background: rgba(39, 54, 83, 0.3);
+			width: 100%;
+			margin-bottom: 4px;
+		}
+
+		.notice-data .notice-item .number {
+			width: 100px;
+			border-left: 2px solid #6EA3FF;
+			overflow: hidden;
+			height: 36px;
+			line-height: 36px;
+			text-align: center;
+			background: rgba(207, 218, 230, 0.15);
+		}
+
+		.notice-data .notice-item .value {
+			flex: 1;
+			width: 0;
+			padding: 0 16px;
+		}
+
+		.notice-data .notice-item .hui-no-nowrap {
+			width: 100%;
+		}
+
+		/* notice end */
+		/* accessControl start */
+		.access-control-data .access-control {
+			display: flex;
+			padding-top: 33px;
+			padding-bottom: 26px;
+		}
+
+		.access-control-data .access-control-item {
+			display: flex;
+			align-items: center;
+			flex: 1;
+			width: 0;
+			overflow: hidden;
+			padding-left: 24px;
+		}
+
+		.access-control-data .access-control-img {
+			width: 81px;
+			height: 74px;
+			background: url(../../assets/image/safe/people-bg.png) no-repeat;
+			background-size: contain;
+			position: relative;
+			margin-right: 13px;
+		}
+
+		.access-control-data .access-control-img::before {
+			position: absolute;
+			content: '';
+			width: 68px;
+			height: 68px;
+			background: url(../../assets/image/safe/people-in.png) no-repeat;
+			background-size: 100% 100%;
+			top: 3px;
+			left: 3px;
+		}
+
+		.access-control-data .people-visitor::before {
+			background-image: url(../../assets/image/safe/people-visitor.png);
+		}
+
+		.access-control-data .name {
+			color: #D5E9FF;
+			margin-bottom: 2px;
+		}
+
+		.access-control-data .test {
+			display: flex;
+			align-items: center;
+		}
+
+		.access-control-data .number {
+			font-size: 22px;
+			margin-right: 2px;
+		}
+
+		.access-control-data .unit {
+			letter-spacing: 1px;
+		}
+
+
+		.access-control-data .access-control-title {
+			display: flex;
+			align-items: center;
+			height: 21px;
+		}
+
+		.access-control-data .title-label {
+			font-weight: 600;
+		}
+
+		.access-control-data .access-control-icon {
+			width: 16px;
+			height: 21px;
+			background: url(../../assets/image/safe/title-icon.png) no-repeat;
+			background-size: 100% 100%;
+		}
+
+		.access-control-data .access-control-chart {
+			height: 142px;
+			position: relative;
+			margin-bottom: 27px;
+			margin-top: 16px;
+		}
+
+		.access-control-data .chart-box {
+			width: 100%;
+			height: 100%;
+		}
+
+		.access-control-data .legend {
+			position: absolute;
+			width: 100%;
+			top: 5px;
+		}
+
+		/* accessControl end */
+		/* environment start */
+		.environment-data .chart-title {
+			margin-bottom: 20px;
+		}
+
+		.environment-data .environment-title {
+			width: 420px;
+			height: 28px;
+			background: rgba(23, 35, 62, 0.48);
+			border-left: 2px solid #6EA3FF;
+			border-right: 2px solid #6EA3FF;
+			text-align: center;
+			line-height: 28px;
+			margin: 0 auto;
+			font-size: 14px;
+			color: #4C8DFF;
+		}
+
+		.environment-data .environment-item {
+			padding: 10px 0 10px 0;
+			display: flex;
+			flex-wrap: wrap;
+		}
+
+		.environment-data .environment-3 .environment-node {
+			width: 33.333%;
+		}
+
+		.environment-data .environment-4 .environment-node {
+			width: 25%;
+		}
+
+		.environment-data .environment-node {
+
+			text-align: center;
+			margin-bottom: 20px;
+			padding: 2px 0;
+			position: relative;
+		}
+
+		.environment-data .name {
+			font-size: 12px;
+			margin-bottom: 5px;
+		}
+
+		.environment-data .number {
+			font-size: 18px;
+		}
+
+		.environment-data .environment-line::before,
+		.environment-data .environment-line::after,
+		.environment-data .environment-lines::before {
+			content: '';
+			position: absolute;
+			height: 20px;
+			width: 1px;
+			background: rgba(123, 149, 198, 0.36);
+			top: 16px;
+		}
+
+		.environment-data .environment-line::before {
+			left: 0;
+		}
+
+		.environment-data .environment-line::after,
+		.environment-data .environment-lines::before {
+			right: 0;
+		}
+
+		/* environment end */
+		/* firefighting end */
+		.firefighting-equipment-data .access-control {
+			display: flex;
+			padding-top: 30px;
+		}
+
+		.firefighting-equipment-data .chart-title {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.firefighting-equipment-data .title-option {
+			display: flex;
+			align-items: center;
+			border: 1px solid rgba(26, 38, 60, 0.8);
+			height: 24px;
+			border-radius: 2px;
+		}
+
+		.firefighting-equipment-data .option-item {
+			width: 80px;
+			height: 24px;
+			color: #818CA2;
+			font-size: 12px;
+			text-align: center;
+			line-height: 24px;
+			border-radius: 2px;
+			cursor: pointer;
+		}
+
+		.firefighting-equipment-data .option-item.active,
+		.firefighting-equipment-data .option-item:hover {
+			background: rgba(26, 38, 60, 0.8);
+			color: #D2E4FF;
+		}
+
+		.firefighting-equipment-data .access-control-item {
+			display: flex;
+			align-items: center;
+			flex: 1;
+			width: 0;
+			overflow: hidden;
+			padding-left: 24px;
+		}
+
+		.firefighting-equipment-data .access-control-img {
+			width: 68px;
+			height: 68px;
+			background: url(../../assets/image/safe/device-all.png) no-repeat;
+			background-size: contain;
+			position: relative;
+			margin-right: 17px;
+		}
+
+		.firefighting-equipment-data .people-visitor {
+			background-image: url(../../assets/image/safe/device-fault.png);
+		}
+
+		.firefighting-equipment-data .access-control-imgs {
+			background-image: url(../../assets/image/safe/plan.png);
+		}
+
+		.firefighting-equipment-data .people-visitors {
+			background-image: url(../../assets/image/safe/drill.png);
+		}
+
+		.firefighting-equipment-data .name {
+			color: #D5E9FF;
+			margin-bottom: 2px;
+		}
+
+		.firefighting-equipment-data .test {
+			display: flex;
+			align-items: center;
+		}
+
+		.firefighting-equipment-data .number {
+			font-size: 22px;
+			margin-right: 2px;
+		}
+
+		.firefighting-equipment-data .text {
+			font-size: 16px;
+		}
+
+		.firefighting-equipment-data .unit {
+			letter-spacing: 1px;
+		}
+
+		/* firefighting end */
+		.video-data {
+			margin-top: 30px;
+
+			.video-box {
+				display: flex;
+				margin: 20px 0 20px 0;
+
+				.work-order-item {
+					background: rgba(39, 54, 83, 0.3);
+					margin-right: 8px;
+					flex: 1;
+					width: 0;
+					overflow: hidden;
+				}
+
+				.work-order-item:last-child {
+					margin-right: 0;
+				}
+
+				.work-order-title {
+					display: flex;
+					align-items: center;
+					height: 32px;
+					background: rgba(110, 163, 255, 0.2);
+				}
+
+				.work-order-icon {
+					width: 32px;
+					height: 32px;
+					background: rgba(110, 163, 255, 0.2);
+					margin-right: 9px;
+					text-align: center;
+					line-height: 32px;
+				}
+
+				.work-order-box {
+					position: relative;
+					height: 100px;
+					cursor: pointer;
+
+					img {
+						width: 100%;
+						height: 100%;
+					}
+
+					.video-mask {
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						background: rgba(0, 0, 0, 0.5);
+						z-index: 2;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						opacity: 0;
+						transition: 300ms;
+
+						i {
+							font-size: 24px;
+						}
+					}
+				}
+
+				.work-order-box:hover {
+					.video-mask {
+						opacity: 1;
+					}
+				}
+
+				.work-order-content {
+					display: flex;
+					align-items: center;
+					margin-bottom: 7px;
+				}
+			}
+		}
+
+		.video-toggle {
+			position: fixed;
+			width: 700px;
+			height: 500px;
+			background: #000;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			display: flex;
+			flex-direction: column;
+
+			.chart-title {
+				display: flex;
+				justify-content: space-between;
+				width: 100%;
+				background-size: contain;
+				position: relative;
+				background-color: $--background;
+
+				.el-icon-close {
+					padding: 8px;
+					font-size: 24px;
+					cursor: pointer;
+				}
+			}
+
+			.chart-title:before {
+				content: "";
+				position: absolute;
+				height: 2px;
+				left: 419px;
+				right: 0;
+				border-bottom: 2px solid;
+				-o-border-image: linear-gradient(315deg, rgba(167, 208, 255, 0), rgba(110, 163, 255, .3)) 2 2;
+				border-image: linear-gradient(315deg, rgba(167, 208, 255, 0), rgba(110, 163, 255, .3)) 2 2;
+				bottom: .5px;
+			}
+
+			.video-toggle-box {
+				flex: 1;
+				height: 0;
+				display: flex;
+				align-items: center;
+				padding: 20px;
+				box-sizing: border-box;
+			}
+
+			video {
+				max-height: 100%;
+			}
+		}
+
+		/* alarm start */
+		.alarm-data {
+			flex: 1;
+			height: 0;
+			display: flex;
+			flex-direction: column;
+		}
+
+
+		.alarm-data .alarm-record {
+			font-size: 14px;
+			padding-top: 16px;
+			flex: 1;
+			height: 0;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.alarm-data .alarm-test {
+			display: flex;
+			align-items: center;
+			padding: 16px 18px;
+		}
+
+		.alarm-data .alarm-icon {
+			width: 64px;
+			height: 64px;
+			background-size: 100% 100%;
+			background-repeat: no-repeat;
+			position: relative;
+			background-image: url(../../assets/image/index/alarm-bg.png);
+		}
+
+		.alarm-data .alarm-icon::before {
+			content: '';
+			position: absolute;
+			background-size: 100% 100%;
+			background-repeat: no-repeat;
+			width: 49px;
+			height: 49px;
+			top: 7px;
+			left: 7px;
+			background-image: url(../../assets/image/index/alarm.png);
+		}
+
+		.alarm-data .alarm-all {
+			color: #FFE6E6;
+			margin-left: 10px;
+		}
+
+		.alarm-record .value {
+			display: flex;
+			align-items: center;
+		}
+
+		.alarm-data .alarm-all .number {
+			font-weight: bold;
+			font-size: 24px;
+			margin-right: 5px;
+			margin-bottom: 4px;
+		}
+
+		.alarm-data .alarm-line {
+			width: 1px;
+			height: 52px;
+			opacity: 0.36;
+			border: 1px solid #7B95C6;
+			margin-left: 18px;
+		}
+
+		.alarm-data .alarm-test-number {
+			display: flex;
+			align-items: center;
+			overflow: hidden;
+			flex: 1;
+			width: 0;
+		}
+
+		.alarm-data .test-item {
+			font-size: 12px;
+			margin-left: 25px;
+		}
+
+		.alarm-data .test-item .number {
+			font-size: 18px;
+			margin-right: 2px;
+			margin-bottom: 2px;
+		}
+
+		.alarm-data .record-list {
+			margin-top: 16px;
+			flex: 1;
+			height: 0;
+			overflow-y: auto;
+			max-height: 120px;
+		}
+
+		.alarm-data .record-item {
+			height: 36px;
+			display: flex;
+			align-items: center;
+			background: rgba(39, 54, 83, 0.3);
+			width: 100%;
+			margin-bottom: 4px;
+		}
+
+		.alarm-data .record-item .number {
+			width: 44px;
+			border-left: 2px solid #6EA3FF;
+			overflow: hidden;
+			height: 36px;
+			line-height: 36px;
+			text-align: center;
+			background: rgba(207, 218, 230, 0.15);
+		}
+
+		.alarm-data .record-item .value {
+			flex: 1;
+			width: 0;
+			padding: 0 16px;
+		}
+
+		.alarm-data .record-item .hui-no-nowrap {
+			width: 100%;
+		}
+
+		.alarm-data .record-item .state {
+			padding: 0 28px 0 14px;
+		}
+
+		/* alarm end */
+	}
+}

virgo.wzfrontend/console/src/axios/index.js

@@ -7,8 +7,8 @@ import {
 	Message
 } from 'element-ui'
 const service = axios.create({
-	baseURL: baseConfig.baseURL,
-	// baseURL:'https://116.204.115.255',
+	// baseURL: baseConfig.baseURL,
+	baseURL:'https://116.204.115.255',
 	timeout: 6000000, // 请求超时时间
 })
 /* 消息提示 */

virgo.wzfrontend/console/src/components/show/pageData.vue

@@ -0,0 +1,621 @@
+<template>
+	<div class="side-data-box lantian">
+		<div class="side-data" v-if="type === 'left'">
+			<div class="notice-data">
+				<div class="chart-title">项目信息</div>
+				<div class="notice-list">
+					<div class="notice-item">
+						<div class="number">项目名称</div>
+						<div class="value">
+							<div class="hui-ellipsis">项目名称</div>
+						</div>
+					</div>
+					<div class="notice-item">
+						<div class="number">项目面积</div>
+						<div class="value">
+							<div class="hui-ellipsis">122平方米</div>
+						</div>
+					</div>
+					<div class="notice-item">
+						<div class="number">开工日期</div>
+						<div class="value">
+							<div class="hui-ellipsis">2024-01-01</div>
+						</div>
+					</div>
+					<div class="notice-item">
+						<div class="number">竣工日期</div>
+						<div class="value">
+							<div class="hui-ellipsis">2025-01-01</div>
+						</div>
+					</div>
+					<div class="notice-item">
+						<div class="number">项目地址</div>
+						<div class="value">
+							<div class="hui-ellipsis">项目地址</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="access-control-data">
+				<div class="chart-title">劳务考勤</div>
+				<div class="access-control">
+					<div class="access-control-item">
+						<div class="access-control-img"></div>
+						<div class="access-control-label">
+							<div class="name">周进场人数</div>
+							<div class="test">
+								<span class="alibaba number">746</span>
+								<span class="unit">人</span>
+							</div>
+						</div>
+					</div>
+					<div class="access-control-item">
+						<div class="access-control-img people-visitor"></div>
+						<div class="access-control-label">
+							<div class="name">周出场人数</div>
+							<div class="test">
+								<span class="alibaba number">723</span>
+								<span class="unit">人</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="access-control-title">
+					<div class="access-control-icon"></div>
+					<span class="title-label">进场记录</span>
+				</div>
+				<div class="access-control-chart">
+					<div class="legend">
+						<div class="legend-item">
+							<span class="legend-page bg-blue1"></span>
+							<span class="legend-name">进场人数</span>
+						</div>
+					</div>
+					<div id="chart1" class="chart-box"></div>
+				</div>
+			</div>
+			<div class="alarm-data">
+				<div class="chart-title">基坑监测</div>
+				<div class="alarm-record">
+					<div class="alarm-test">
+						<div class="alarm-icon"></div>
+						<div class="alarm-test-number">
+							<div class="alarm-all">
+								<div class="value">
+									<div class="number alibaba">0</div>
+									<div class="unit">次</div>
+								</div>
+								<div class="label">总报警</div>
+							</div>
+							<div class="alarm-line"></div>
+							<div class="test-item">
+								<div class="value">
+									<div class="number alibaba color-red">0</div>
+									<div class="unit">次</div>
+								</div>
+								<div class="label">报警次数</div>
+							</div>
+							<div class="test-item">
+								<div class="value">
+									<div class="number alibaba color-orange">3</div>
+									<div class="unit">次</div>
+								</div>
+								<div class="label">预警次数</div>
+							</div>
+						</div>
+					</div>
+					<div class="record-list">
+						<div class="record-item">
+							<div class="number">
+								01
+							</div>
+							<div class="value">
+								<div class="hui-ellipsis">基坑DT3设备在2024-09-23 09:52:12时间发生报警，请尽快查看并处理。</div>
+							</div>
+							<div class="state color-blue">
+								已处理
+							</div>
+						</div>
+						<div class="record-item">
+							<div class="number">
+								02
+							</div>
+							<div class="value">
+								<div class="hui-ellipsis">基坑DT2设备在2024-09-13 09:21:43时间发生报警，请尽快查看并处理。</div>
+							</div>
+							<div class="state color-blue">
+								已处理
+							</div>
+						</div>
+						<div class="record-item">
+							<div class="number">
+								03
+							</div>
+							<div class="value">
+								<div class="hui-ellipsis">基坑DT1设备在2024-09-05 09:01:02时间发生报警，请尽快查看并处理。</div>
+							</div>
+							<div class="state color-blue">
+								已处理
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="side-data" v-else-if="type === 'right'">
+			<div class="firefighting-equipment-data">
+				<div class="chart-title">
+					<span>塔吊安全</span>
+					<div class="title-option">
+						<div v-for="(item,index) in towerList"
+							:class="nowTowerId === item.id ?'option-item active':'option-item'"
+							@click="nowTowerId = item.id">
+							{{item.name}}
+						</div>
+					</div>
+				</div>
+				<div class="access-control">
+					<div class="access-control-item">
+						<div class="access-control-img"></div>
+						<div class="access-control-label">
+							<div class="name">碰撞状态</div>
+							<div class="test">
+								<span class="text color-green">正常</span>
+							</div>
+						</div>
+					</div>
+					<div class="access-control-item">
+						<div class="access-control-img people-visitor"></div>
+						<div class="access-control-label">
+							<div class="name">可视化状态</div>
+							<div class="test">
+								<span class="text color-green">正常</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="access-control">
+					<div class="access-control-item">
+						<div class="access-control-img access-control-imgs"></div>
+						<div class="access-control-label">
+							<div class="name">今日违规次数</div>
+							<div class="test">
+								<span class="alibaba number color-red">0</span>
+								<span class="unit">次</span>
+							</div>
+						</div>
+					</div>
+					<div class="access-control-item">
+						<div class="access-control-img people-visitors"></div>
+						<div class="access-control-label">
+							<div class="name">安全系数</div>
+							<div class="test color-green">
+								<span class="alibaba number">100</span>
+								<span class="unit">%</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="video-data">
+				<div class="chart-title">视讯中心</div>
+				<div class="video-box">
+					<div class="work-order-item">
+						<div class="work-order-title">
+							<span class="work-order-icon">
+								<i class="iconfont huifont-shipinyuan"></i>
+							</span>
+							<span class="work-order-label">项目视频</span>
+						</div>
+						<div class="work-order-box" @click="clickVideo(2)">
+							<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/97c91858f42f44ddad88c82bb438389d"
+								alt="aa.png" />
+							<div class="video-mask">
+								<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+							</div>
+						</div>
+					</div>
+					<div class="work-order-item">
+						<div class="work-order-title">
+							<span class="work-order-icon">
+								<i class="iconfont huifont-shipinyuan"></i>
+							</span>
+							<span class="work-order-label">视频监控</span>
+						</div>
+						<div class="work-order-box">
+							<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/51b310933f554597889f2ad1a6cc7108"
+								alt="aa.png" />
+							<div class="video-mask" @click="clickVideo()">
+								<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="environment-data">
+				<div class="chart-title">环境监测</div>
+				<div class="environment-item environment-4">
+					<div class="environment-node">
+						<div class="name">温度(°C)</div>
+						<div class="number alibaba color-green">26</div>
+					</div>
+					<div class="environment-node environment-line">
+						<div class="name">湿度(%)</div>
+						<div class="number alibaba color-green">86</div>
+					</div>
+					<div class="environment-node environment-lines">
+						<div class="name">风级别</div>
+						<div class="number alibaba color-green">一级</div>
+					</div>
+					<div class="environment-node">
+						<div class="name">风向</div>
+						<div class="number alibaba color-green">西北风</div>
+					</div>
+					<div class="environment-node environment-lines">
+						<div class="name">风速(m/s)</div>
+						<div class="number alibaba color-green">0.4</div>
+					</div>
+					<div class="environment-node  environment-line">
+						<div class="name">大气压力(KPa)</div>
+						<div class="number alibaba color-green">101.3</div>
+					</div>
+					<div class="environment-node environment-lines">
+						<div class="name">粉尘(mg/m³)</div>
+						<div class="number alibaba color-green">0.049</div>
+					</div>
+					<div class="environment-node">
+						<div class="name">噪声(dB)</div>
+						<div class="number alibaba color-green">61</div>
+					</div>
+				</div>
+			</div>
+			<div class="bottom-data-box">
+				<div class="chart-title">标养室</div>
+				<div class="legend" style="margin-top: 10px;">
+					<div class="legend-item" style="margin-right: 20px;">
+						<span class="legend-page bg-yellow"></span>
+						<span class="legend-name">温度</span>
+					</div>
+					<div class="legend-item">
+						<span class="legend-page bg-cyan"></span>
+						<span class="legend-name">湿度</span>
+					</div>
+				</div>
+				<div id="chart3" class="chart-box" style="height: 188px;"></div>
+			</div>
+		</div>
+		<div class="top-bottom-data" v-if="type === 'bottom'">
+			<div class="bottom-data-box">
+				<div class="chart-title">监控列表</div>
+				<div class="monitor-box">
+					<div class="monitor-list">
+						<div class="monitor-item">
+							<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/854594e68cd64a41a296be319b295a04"
+								alt="" />
+							<div class="video-mask" @click="clickVideo()">
+								<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+							</div>
+							<div class="tip">
+								围墙-南1
+							</div>
+						</div>
+						<div class="monitor-item">
+							<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/854594e68cd64a41a296be319b295a04"
+								alt="" />
+							<div class="video-mask" @click="clickVideo()">
+								<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+							</div>
+							<div class="tip">
+								围墙-南2
+							</div>
+						</div>
+						<div class="monitor-item">
+							<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/854594e68cd64a41a296be319b295a04"
+								alt="" />
+							<div class="video-mask" @click="clickVideo()">
+								<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+							</div>
+							<div class="tip">
+								围墙-西1
+							</div>
+						</div>
+						<div class="monitor-item">
+							<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/854594e68cd64a41a296be319b295a04"
+								alt="" />
+							<div class="video-mask" @click="clickVideo()">
+								<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+							</div>
+							<div class="tip">
+								围墙-西2
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="video-toggle" v-if="isVideo">
+			<div class="chart-title">
+				<div>视讯中心</div>
+				<i class="el-icon-close" @click="isVideo = false"></i>
+			</div>
+			<div class="video-toggle-box">
+				<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/51b310933f554597889f2ad1a6cc7108"
+					alt="aa.png" width="100%" v-if="videoType === 1" />
+				<video src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/e136547df71e4c2893c424c60d652905"
+					width="100%" controls v-else>
+				</video>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: ['type'],
+		data() {
+			return {
+				project: {
+					project_cities: []
+				},
+				isVideo: false,
+				videoType: 1,
+				towerList: [{
+					id: 1,
+					name: '1号塔吊'
+				}, {
+					id: 2,
+					name: '2号塔吊'
+				}],
+				nowTowerId: 1
+			}
+		},
+		mounted() {
+			this.$nextTick(() => {
+				this.chart(document.getElementById('chart1'), [110, 112, 102, 101, 106, 99, 116]);
+				this.charts(document.getElementById('chart3'), [
+					[21.3, 24.0, 24.1, 24.1, 24.4, 24.0, 23.4, 23.3],
+					[37, 38, 38.1, 38.1, 38.4, 38.0, 36.4, 29]
+				], ['#D5AC6E', '#66E1DF'], [new echarts.graphic.LinearGradient(0,
+					0, 0, 1, [{
+						offset: 0,
+						color: 'rgba(213, 172, 110, 0.35)'
+					}, {
+						offset: 1,
+						color: 'rgba(213, 172, 110, 0)'
+					}]), new echarts.graphic.LinearGradient(0,
+					0, 0, 1, [{
+						offset: 0,
+						color: 'rgba(0,89,84, 0.35)'
+					}, {
+						offset: 1,
+						color: 'rgba(0,89,84, 0)'
+					}])])
+
+			})
+		},
+		methods: {
+			init() {},
+			clickVideo(type) {
+				this.videoType = type || 1;
+				this.isVideo = true;
+			},
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '30',
+						right: '15',
+						bottom: '0',
+						containLabel: true
+					},
+					color: ['#1978E5'],
+					xAxis: {
+						type: 'category',
+						data: ['09/21', '09/22', '09/23', '09/24', '09/25', '09/26', '09/27'],
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 12
+						},
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						name: '人数',
+						type: 'value',
+						minInterval: 1,
+						splitNumber: 3,
+						nameTextStyle: {
+							color: '#D0DEEE',
+							fontSize: 12,
+							align: 'right',
+						},
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 12
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'bar',
+						barWidth: 10,
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: '#159AFF'
+						}, {
+							offset: 1,
+							color: 'rgba(0, 58, 255, 0)'
+						}, ]),
+					}, {
+						data: data.map(node => node + 1),
+						type: 'line',
+						symbolSize: 6,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data.map(node => node + 1),
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+				window.addEventListener('resize', () => {
+					chart.resize();
+				});
+			},
+			charts(elem, data, color, areaColor) {
+				let chart = echarts.init(elem);
+				let series = [];
+				for (var i = 0; i < data.length; i++) {
+					series.push({
+						data: data[i],
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						smooth: true,
+						areaStyle: {
+							color: areaColor[i]
+						},
+					})
+
+				}
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					color: color,
+					grid: {
+						left: '15',
+						top: '30',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					xAxis: {
+						type: 'category',
+						data: ['03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 12
+						},
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						},
+						boundaryGap: false,
+					},
+					yAxis: {
+						name: '单位',
+						type: 'value',
+						minInterval: 1,
+						splitNumber: 3,
+						nameTextStyle: {
+							color: '#D0DEEE',
+							fontSize: 12,
+							align: 'right',
+						},
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 12
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: series
+				};
+				chart.setOption(option);
+				window.addEventListener('resize', () => {
+					chart.resize();
+				});
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+
+</style>

virgo.wzfrontend/console/src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import workRouter from './work'
+import showRouter from './show'
 import loginRouter from './loginRegister'
 
 Vue.use(Router)
@@ -9,7 +10,7 @@ Router.prototype.push = function push(location) {
 	return originalPush.call(this, location).catch(err => err);
 };
 export default new Router({
-	routes: [workRouter, loginRouter, { //404
+	routes: [showRouter, workRouter, loginRouter, { //404
 			path: '/404',
 			component: () => import('@/views/error/404'),
 		},

virgo.wzfrontend/console/src/router/show.js

@@ -0,0 +1,9 @@
+const showRouter = {
+	path: '/',
+	component: () => import('@/views/show'),
+	name: 'index',
+	meta: {
+		title: 'index'
+	}
+}
+export default showRouter;

virgo.wzfrontend/console/src/router/work.js

@@ -1,14 +1,21 @@
 import Layout from '@/layout/work'
 
 const modulesFiles = require.context('./modules', true, /\.js$/);
-let child = [];
+let child = [{
+	path: '',
+	component: () => import('@/views/work'),
+	name: '工作台',
+	meta: {
+		title: '工作台'
+	}
+}];
 modulesFiles.keys().reduce((modules, modulePath) => {
 	const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
 	const value = modulesFiles(modulePath);
 	child = child.concat(value.default);
 }, {})
 const workRouter = {
-	path: '/',
+	path: '/work',
 	component: Layout,
 	children: child
 }

virgo.wzfrontend/console/src/uitls/permission.js

@@ -13,7 +13,9 @@ import {
 NProgress.configure({
 	showSpinner: false
 })
-const baseUrl = ['/', '/401', '/404', '/loginRegister/login', '/message', '/space/project', '/iot/device/detail'];
+const baseUrl = ['/', '/401', '/404', '/loginRegister/login', '/work', '/message', '/space/project',
+	'/iot/device/detail','/work/system/main'
+];
 
 const testBaseUrl = (path) => { //判断公共路由
 	let nowBaseUrl = ['/loginRegister/login'].filter((item) => {

virgo.wzfrontend/console/src/views/show/index.vue

@@ -0,0 +1,344 @@
+<template>
+	<div class="datav-box">
+		<div id="datav">
+			<nav class="chart-top">
+				<div class="title">
+					<div class="title-left">
+						<span class="organization-name">智慧数字工地</span>
+						<i class="iconfont huifont-duoyunzhuanqing"></i>
+						<span class="wather-label">多云转晴</span>
+						<span class="wather-value alibaba">18～26</span>
+						<span class="wather-unit">℃</span>
+					</div>
+					<span class="big-title pangmenzhengdao">AI智慧物业</span>
+					<div class="title-right">
+						<span class="date alibaba">{{date}}</span>
+						<span class="time alibaba">{{time}}</span>
+						<span class="admin-system" @click="$router.push('/work')">
+							<i class="iconfont huifont-guanlipingtai"></i>
+							管理平台
+						</span>
+					</div>
+				</div>
+			</nav>
+			<div class="img-box">
+				<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/782a1b2730864af58b4f0cd76c53bb4f"
+					alt="bg.jpeg" />
+			</div>
+			<div class="chart-left">
+				<page-data type="left"></page-data>
+			</div>
+			<div class="chart-right">
+				<page-data type="right"></page-data>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import autofit from 'autofit.js'
+	import pageData from '@/components/show/pageData'
+	export default {
+		data() {
+			return {
+				date: '',
+				time: '',
+				timer: null
+			};
+		},
+		beforeDestroy() {
+			// 离开当前路由前的操作
+			if (this.timer) clearInterval(this.timer);
+		},
+		mounted() {
+			this.date = this.$dayjs(new Date()).format('YYYY-MM-DD');
+			this.time = this.$dayjs(new Date()).format('hh:mm:ss');
+			this.timer = setInterval(() => {
+				this.time = this.$dayjs(new Date()).format('hh:mm:ss');
+			}, 1000)
+			this.$nextTick(() => {
+				autofit.init({
+					dh: 1080,
+					dw: 1920,
+					el: "#datav",
+					resize: true
+				}, false)
+			})
+		},
+		created() {},
+		methods: {
+			selectItem() {
+				console.log(this.bimViewer.getCameraState());
+			}
+		},
+		components: {
+			pageData
+		},
+	};
+</script>
+
+<style lang="scss">
+	@import '../../assets/scss/datav.scss';
+
+	.datav-box {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		background: #0E1626 center top;
+
+		.chart-title {
+			width: 440px;
+			height: 40px;
+			background: url(../../assets/image/common/sub_title.png) no-repeat;
+			background-size: 100% 100%;
+			font-weight: 600;
+			line-height: 40px;
+			padding-left: 44px;
+			font-size: 16px;
+		}
+
+		.chart-top {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			background: linear-gradient(0deg, rgba(12, 15, 22, 0) 0%, rgba(12, 15, 22, 0.12) 13%, rgba(12, 15, 22, 0.65) 45%, rgba(12, 15, 22, 0.86) 64%, #0C0F16 100%);
+			z-index: 9;
+		}
+
+		.chart-top-option {
+			position: fixed;
+			left: 530px;
+			right: 530px;
+			top: 120px;
+		}
+
+		.chart-top-options {
+			display: flex;
+			justify-content: center;
+		}
+
+		.chart-left {
+			position: fixed;
+			z-index: 8;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			width: 545px;
+			background: linear-gradient(270deg, rgba(3, 4, 7, 0) 0%, rgba(6, 8, 12, 0.35) 15%, rgba(9, 12, 17, 0.45) 30%, rgba(9, 12, 17, 0.69) 50%, #0C0F16 100%);
+			padding: 140px 65px 20px 40px;
+			font-size: 14px;
+		}
+
+		.chart-right {
+			position: fixed;
+			z-index: 8;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			width: 545px;
+			background: linear-gradient(90deg, rgba(3, 4, 7, 0) 0%, rgba(6, 8, 12, 0.35) 15%, rgba(9, 12, 17, 0.45) 30%, rgba(9, 12, 17, 0.69) 50%, #0C0F16 100%);
+			padding: 140px 40px 20px 65px;
+			font-size: 14px;
+		}
+
+		.chart-bottom {
+			position: fixed;
+			top: 814px;
+			left: 507px;
+			right: 507px;
+		}
+
+		.chart-bottom .chart-title {
+			width: 100%;
+			background-size: contain;
+			position: relative;
+		}
+
+		.chart-bottom .chart-title::before {
+			content: '';
+			position: absolute;
+			height: 2px;
+			left: 419px;
+			right: 0;
+			border-bottom: 2px solid;
+			border-image: linear-gradient(315deg, rgba(167, 208, 255, 0), rgba(110, 163, 255, 0.3)) 2 2;
+			bottom: 0.5px;
+		}
+
+		.chart-bottoms {
+			position: fixed;
+			top: 825px;
+			left: 507px;
+			right: 40px;
+			z-index: 19;
+			font-size: 14px;
+		}
+
+		.chart-bottoms .chart-title {
+			width: 100%;
+			background-size: contain;
+			position: relative;
+		}
+
+		.chart-bottoms .chart-title::before {
+			content: '';
+			position: absolute;
+			height: 2px;
+			left: 419px;
+			right: 0;
+			border-bottom: 2px solid;
+			border-image: linear-gradient(315deg, rgba(167, 208, 255, 0), rgba(110, 163, 255, 0.3)) 2 2;
+			bottom: 0.5px;
+		}
+
+		.side-data-box,
+		.top-bottom-data {
+			width: 100%;
+			height: 100%;
+		}
+
+		.side-data {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.img-box {
+			width: 100%;
+			height: 1080px;
+			overflow: hidden;
+
+			img {
+				width: 100%;
+			}
+		}
+
+		.chart-left,
+		.chart-right {
+			padding-top: 85px !important;
+		}
+
+		/* title start */
+		.title {
+			height: 105px;
+			background-image: url(../../assets/image/common/title.png);
+			background-size: 100% 100%;
+			text-align: center;
+			padding-top: 14px;
+			position: relative;
+		}
+
+		.title .big-title {
+			font-size: 40px;
+			color: #FFFFFF;
+			line-height: 46px;
+			letter-spacing: 6px;
+			text-shadow: 0px 2px 10px rgba(2, 2, 22, 0.1), 0px 0px 8px rgba(255, 255, 255, 0.1);
+			background: linear-gradient(180deg, #FFFFFF 0%, #C7D6FF 100%);
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+			z-index: 9;
+			position: relative;
+		}
+
+		.title .title-left {
+			position: absolute;
+			left: 38px;
+			top: 14px;
+			height: 27px;
+			display: flex;
+			align-items: center;
+			letter-spacing: 1px;
+		}
+
+		.title .organization-name {
+			font-weight: 600;
+			margin-right: 47px;
+		}
+
+		.title .title-left .iconfont {
+			font-size: 24px;
+			margin-right: 8px;
+		}
+
+		.title .wather-label {
+			margin-right: 18px;
+		}
+
+		.title .wather-value {
+			font-size: 20px;
+			margin-right: 3px;
+		}
+
+		.title .title-right {
+			position: absolute;
+			right: 38px;
+			top: 14px;
+			height: 27px;
+			display: flex;
+			align-items: center;
+			letter-spacing: 1px;
+		}
+
+		.title .date {
+			font-size: 18px;
+			margin-right: 16px;
+		}
+
+		.title .time {
+			font-size: 18px;
+			margin-right: 48px;
+		}
+
+		.title .title-right .iconfont {
+			font-size: 20px;
+		}
+
+		.title .admin-system {
+			display: flex;
+			align-items: center;
+			font-size: 14px;
+			cursor: pointer;
+		}
+
+		.title .admin-system:hover {
+			color: #3371FF;
+		}
+
+		.menu-list {
+			display: flex;
+			justify-content: space-between;
+			padding: 0 25px;
+			position: absolute;
+			top: 76px;
+			width: 100%;
+		}
+
+		.menu-item-box {
+			display: flex;
+		}
+
+		.menu-list .menu-item {
+			width: 135px;
+			height: 40px;
+			font-size: 20px;
+			color: #AAB5C7;
+			line-height: 38px;
+			letter-spacing: 2px;
+			text-align: center;
+			background-image: url(../../assets/image/common/tab.png);
+			background-size: 100% 100%;
+			margin: 0 15px;
+			cursor: pointer;
+		}
+
+		.menu-list .menu-item.active,
+		.menu-list .menu-item:hover {
+			color: #fff;
+			background-image: url(../../assets/image/common/tab_active.png);
+		}
+	}
+</style>