alzq-onest-monitor/monitor_ui/src/views/integrated/bigdata/bigdata.vue

<!--一体化首页-->
<template>
	<div class="bigdata-con">
		<!-- 头部B -->
		<div class="header">
			<!-- title -->
			<router-link class="header-left"  to="/integrated/index"  exact><img class="logo" src="@/assets/images/integrated/logo-small.png" />
				<h3 class="title">态势感知监管平台</h3></router-link>
			<div class="bignav">
				<img src="@/assets/images/integrated/bigdata-header-nav-left.png" />
				<router-link v-for="(navbar,index) in navbar " :key="index" :to="navbar.path" class="bignav-list" exact>
					{{navbar.name}}
				</router-link>
				<img src="@/assets/images/integrated/bigdata-header-nav-right.png" />
			</div>
			<!-- 左侧 -->
			<fastMenu></fastMenu>
		</div>
		<!-- 头部E -->

		<div class="bigdata-body">
			<!-- 第一纵向-->
			<div class="bigdata-list wid-li-1">
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>事件类型、分布统计</span>
					</div>
					<div class="twins">
						<div class="count">
							<div class="count-z m-l-15">事件总数<span>{{total}}</span></div>
							<div class="count-z m-l-15">未处理<span> {{untreated}}</span></div>
							<div class="count-z m-l-15">处理中<span> {{processing}}</span></div>
						</div>
						<chartEvent></chartEvent>
					</div>
				</div>
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>人口分布统计</span>
					</div>
					<chartPopulation></chartPopulation>
				</div>
				<div class="b-con">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>企业分布统计</span>
					</div>
					<chartEnterprise></chartEnterprise>
				</div>
			</div>
			<!-- 第二纵向-->
			<div class="bigdata-list wid-li-2 m-l-15">
				<div class="bigdata-map mg-b-20">

				</div>
				<tabbar></tabbar>
			</div>
			<!-- 第三纵向-->
			<div class="bigdata-list wid-li-1 m-l-15">
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>隐患分布统计</span>
					</div>
					<chartDanger></chartDanger>
				</div>
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>林场分布统计</span>
					</div>
					<chartForestFarm></chartForestFarm>
				</div>
				<div class="b-con">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>矿坑分布统计</span>
					</div>
					<chartPit></chartPit>
				</div>
			</div>
			<!-- 第四纵向-->
			<div class="bigdata-list wid-li-1 m-l-15">
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>散养户分布统计</span>
					</div>
					<chartFreelyraise></chartFreelyraise>
				</div>
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>养殖场分布统计</span>
					</div>
					<chartFarm></chartFarm>
				</div>
				<div class="b-con">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>散养户、养殖场养殖种类布统计</span>
					</div>
					<chartFarmtype></chartFarmtype>
				</div>
			</div>
			<!-- 第五纵向-->
			<div class="bigdata-list wid-li-1 m-l-15">
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>收集点分布统计</span>
					</div>
					<chartCollection></chartCollection>
				</div>
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>水鹤分布统计</span>
					</div>
					<chartCaterCrane></chartCaterCrane>
				</div>
				<div class="b-con">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>处理中心分布统计</span>
					</div>
					<chartProcessing></chartProcessing>
				</div>
			</div>
			<!-- 第六纵向-->
			<div class="bigdata-list wid-li-1 m-l-15">
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>消火栓分布统计</span>
					</div>
					<chartHydrant></chartHydrant>
				</div>
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>泡沫液分布统计</span>
					</div>
					<chartFoam></chartFoam>
				</div>
				<div class="b-con">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>取水口分布统计</span>
					</div>
					<chartWaterIntake></chartWaterIntake>
				</div>
			</div>
			<!-- 第七纵向-->
			<div class="bigdata-list wid-li-1 m-l-15">
				<div class="b-con mg-b-20 taller">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>摄像头分布、类型、型号统计</span>
					</div>
					<chartCamera></chartCamera>
				</div>
			</div>
			<!-- 第八纵向-->
			<div class="bigdata-list wid-li-1 m-l-15">
				<div class="b-con mg-b-20 tall">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>探测器分布、类型统计</span>
					</div>
					<chartDetector></chartDetector>
				</div>
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>消防力量分布统计</span>
					</div>
					<chartFireControl></chartFireControl>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import fastMenu from './fastmenu.vue' //右侧菜单
	import tabbar from './tabbar.vue' //区域切换

	//echarts
	import chartEvent from './chart-event.vue' //1  事件
	import chartPopulation from './chart-population.vue' //2  人口
	import chartEnterprise from './chart-enterprise.vue' //3  公司
	import chartDanger from './chart-danger.vue' //4  隐患
	import chartForestFarm from './chart-forestfarm.vue' //5  林场
	import chartPit from './chart-pit.vue' //6  矿坑
	import chartFreelyraise from './chart-freelyraise.vue' //7  散养户
	import chartFarm from './chart-farm.vue' //8  养殖场
	import chartFarmtype from './chart-farmtype.vue' //9  散养户、养殖场-养殖种类
	import chartCollection from './chart-collection.vue' //10 收集点
	import chartCaterCrane from './chart-watercrane.vue' //11 水鹤
	import chartProcessing from './chart-processing.vue' //12 处理中心
	import chartHydrant from './chart-hydrant.vue' //13 消火栓
	import chartFoam from './chart-foam.vue' //14 泡沫液
	import chartWaterIntake from './chart-waterintake' //15 取水口
	import chartCamera from './chart-camera' //16 摄像头
	import chartDetector from './chart-detector' //17 探测器
	import chartFireControl from './chart-firecontrol' //18 消防力量


	export default {
		components: {
			fastMenu,
			tabbar,
			chartEvent,
			chartPopulation,
			chartEnterprise,
			chartDanger,
			chartForestFarm,
			chartPit,
			chartFreelyraise,
			chartFarm,
			chartFarmtype,
			chartCollection,
			chartCaterCrane,
			chartProcessing,
			chartHydrant,
			chartFoam,
			chartWaterIntake,
			chartCamera,
			chartDetector,
			chartFireControl
		},
		data() {

			return {
				visited: '',
				navbar: [{
						name: '四平云图',
						path: '/integrated/bigdata',
					},
					{
						name: '数字林业',
						path: '/integrated/forest',
					},
					{
						name: '数字农业',
						path: '/',
					},
					{
						name: '数字水利',
						path: '/',
					},
					{
						name: '数字环保',
						path: '/',
					},
					{
						name: '数字应急',
						path: '/',
					},
					{
						name: '数字交通',
						path: '/',
					},
					{
						name: '数字资源',
						path: '/',
					},
					{
						name: '数字消防',
						path: '/',
					},

				],
				total: 0, //事件总数
				untreated: 0, //事件-未处理
				processing: 0 // 事件-处理中





			}
		},
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';


	.bigdata-con {
		width: -webkit-fit-content;
		height: 100%;
		background: #01020c;

		.el-loading-mask {
			background: none;
		}

		.header {
			height: 3rem;
			display: flex;
			align-items: center;

			.header-left {
				position: fixed;
				left: 10px;
				top: 5px;
				display: flex;
				align-items: center;
				color: $inBlue;
				font-family: $fontFk;

				.title {
					margin: 0 auto;
					text-align: center;
					background-image: -webkit-linear-gradient(bottom, rgba($color: #00f6ff, $alpha: 1.0), rgba($color: #005aff, $alpha: 1.0));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					color: #fff;
					font-size: 28px;
				}
			}

			.bignav {
				height: 40px;
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				top: 0;
				z-index: 1000;
				border-radius: 5px;
				display: flex;
				justify-content: cetner;
				align-items: center;

				.bignav-list {
					background: url(../../../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
					float: left;
					display: flex;
					justify-content: cetner;
					align-items: center;
					color: #fff;
					height: 40px;
					font-size: 12px;
					padding: 0 23px;
					cursor: pointer;
					-webkit-transform: translateY(0);
					transform: translateY(0);
					transition: all 0.3s ease-in-out;
				}

				.router-link-active,
				.bignav-list:hover {
					filter: brightness(2.3);
					-webkit-transform: translateY(2px);
					transform: translateY(2px);
					color: $inBlueHover;
					border-bottom: 1px solid $inBlueHover;
					transition: all 0.3s ease-in-out;

				}
			}


		}

		.bigdata-body {
			margin: 15px;
			display: flex;
			align-items: top;
			// justify-content: center;

		}

		.bigdata-list {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;

			.twins-con {
				width: 100% !important;
			}

			.b-con {
				width: 100%;
				height: 28.5vh;

				box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
					-0 -0 30px rgba($color: #163696, $alpha: .5) inset;

				// display: flex;
				// flex-direction: column;
				.b-tit {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 10px;

					span {
						font-size: 15px;
						color: #00ceec;
						margin-left: 5px;
						text-shadow: 0 0 3px rgba($color: #41ff84, $alpha: .5),
							-0 -0 10px rgba($color: #41fff8, $alpha: .9);
					}
				}

				.twins {
					width: 100%;
					display: flex;
					position: relative;

					.count {
						width: 100%;
						color: #fff;
						font-size: 12px;
						position: absolute;
						display: flex;
						align-items: center;
						left: 1rem;
						top: 9px;
						z-index: 100;

						.count-z {
							display: flex;
							margin: 0 .5rem;

							span {
								margin-left: .4rem;
								font-size: 1rem;
								color: #2ee0fb !important;
								font-weight: bolder;
							}
						}


					}
				}

			}

			.tall {
				height: 59vh !important;
			}

			.taller {
				height: 89.5vh !important;
			}

			.three {
				display: flex;
				flex-direction: column;
			}

			.el-row {
				width: 100%;
			}


			.bigdata-map {
				width: 100%;
				height: 59vh;
				position: relative;
				background: #00101f;

				.event-count {
					color: #fff;
					font-size: 14px;
					font-weight: bolder;
					padding: 10px;
					background-color: #000000;
					position: absolute;
					top: 10px;
					left: 10px;
					z-index: 1000;

					span {
						font-size: 16px;
						color: #d50000;
					}
				}

			}

		}

		.wid-li-1 {
			width: 396px;
		}

		.wid-li-2 {
			width: 760px;
		}

		.wid-li-3 {
			width: 850px;
		}

		.wid-li-4 {
			width: 304px;
		}

		.mg-b-20 {
			margin-bottom: 2vh;
		}

		.m-l-15 {
			margin-left: .5%;
		}
	}
</style>