productDev/dmvisit.git

			@@ -245,6 +245,181 @@
			</div>
			</div>
			</div>
			<div class="main_footer">
			<div class="car_warning">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>当前车辆滞留预警</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="table">
			<div class="line header">
			<div>车牌</div>
			<div class="dept">拜访部门</div>
			<div class="time">超时时长</div>
			</div>
			<div class="line">
			<div>皖A33234</div>
			<div class="dept">综合管理科</div>
			<div class="time">10:21</div>
			</div>
			<div class="separate"></div>
			<div class="line">
			<div>皖A33234</div>
			<div class="dept">综合管理科</div>
			<div class="time">10:21</div>
			</div>
			<div class="separate"></div>
			</div>
			</div>
			<div class="safe_warning">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>安防告警</div>
			</div>
			<div class="tabs">
			<div class="tab active">全部</div>
			<div class="separate"></div>
			<div class="tab">区域告警</div>
			<div class="separate"></div>
			<div class="tab">行为告警</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="list">
			<div class="item">
			<div class="icon">
			<div class="circle"></div>
			<div class="line"></div>
			</div>
			<div class="content">
			<div class="header">
			<div class="time">
			<span>123</span>
			<span class="status">处理中</span>
			</div>
			<div class="have_time">已经发生<span>1</span>分钟</div>
			</div>
			<div class="wrap">
			<div class="title">消防警告</div>
			<div class="title">address</div>
			</div>
			</div>
			</div>
			<div class="item">
			<div class="icon">
			<div class="circle"></div>
			<div class="line"></div>
			</div>
			<div class="content">
			<div class="header">
			<div class="time">
			<span>123</span>
			<span class="status">处理中</span>
			</div>
			<div class="have_time">已经发生<span>1</span>分钟</div>
			</div>
			<div class="wrap">
			<div class="title">消防警告</div>
			<div class="title">address</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			<div class="garden_warning">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>园区安防设备</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="content">
			<div class="sa_static">
			<div class="echart_wrap">
			<div class="pie_text">
			<div class="fs30"><strong>300</strong></div>
			<div>总计</div>
			</div>
			<div class="echart" id="echart2"></div>
			</div>
			<div class="list">
			<div class="item">
			<div class="line">
			<div :style="{ background: colors[1] }" class="icon"></div>
			<div class="text">在线</div>
			</div>
			<div :style="{ color: colors[1] }" class="num">100</div>
			</div>
			<div class="item">
			<div class="line">
			<div :style="{ background: colors[2] }" class="icon"></div>
			<div class="text">离线</div>
			</div>
			<div :style="{ color: colors[2] }" class="num">100</div>
			</div>
			</div>
			</div>
			<div class="table">
			<div class="line header">
			<div class="driver">设备类型</div>
			<div>总数</div>
			<div>在线数</div>
			<div>离线数</div>
			<div>在线率</div>
			</div>
			<div class="line">
			<div class="driver">门禁设备</div>
			<div>10</div>
			<div>10</div>
			<div>10</div>
			<div>10</div>
			</div>
			<div class="separate"></div>
			<div class="line">
			<div class="driver">门禁设备</div>
			<div>10</div>
			<div>10</div>
			<div>10</div>
			<div>10</div>
			</div>
			<div class="separate"></div>
			</div>
			</div>
			</div>
			<div class="visitor_warning">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>今日访客滞留情况</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="table">
			<div class="line header">
			<div>姓名</div>
			<div class="dept">拜访部门</div>
			<div class="dept">超时时长</div>
			</div>
			<div class="line">
			<div>name</div>
			<div class="dept">综合管理科</div>
			<div class="dept">10:21</div>
			</div>
			<div class="separate"></div>
			<div class="line">
			<div>name</div>
			<div class="dept">综合管理科</div>
			<div class="dept">10:21</div>
			</div>
			<div class="separate"></div>
			</div>
			</div>
			</div>
			</div>
			</v-scale-screen>
			</template>
			@@ -361,10 +536,43 @@
			myChart.resize()
			})
			}
			const initEchart2 = () => {
			const myChart = echarts.init(document.getElementById('echart2'))
			const option = {
			series: [
			{
			type: 'pie',
			radius: ['86%', '100%'],
			label: {
			show: false,
			position: 'center'
			},
			padAngle: 5,
			itemStyle: {
			borderRadius: 10
			},
			color: colors,
			labelLine: {
			show: false
			},
			data: [
			{ value: 1048, name: 'Search Engine' },
			{ value: 735, name: 'Direct' },
			{ value: 580, name: 'Email' }
			]
			}
			]
			}
			myChart.setOption(option)
			window.addEventListener('resize', function () { // 执行
			myChart.resize()
			})
			}

			onMounted(() => {
			// initEnergy()
			initEchart1()
			initEchart2()
			})


			@@ -640,6 +848,7 @@
			display: flex;
			justify-content: space-between;
			padding: 20px;

			.item {
			font-size: 12px;
			color: #D2E0FF;
			@@ -648,14 +857,16 @@
			display: flex;
			align-items: flex-end;
			margin-top: 8px;
			.num{

			.num {
			font-size: 22px;
			line-height: 22px;
			color: #FFFFFF;
			}
			}
			}
			.spacing{

			.spacing {
			width: 1px;
			height: 40px;
			background-color: #405173;
			@@ -727,6 +938,284 @@
			}
			}

			.main_footer {
			/* margin-top: 20px; */
			display: flex;
			padding: 20px 25px 0;

			.car_warning {
			width: 360px;

			.table {
			margin-top: 15px;

			.line {
			display: flex;
			align-items: center;
			font-size: 14px;
			height: 32px;

			div {
			flex: 3;
			height: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			}

			.dept {
			flex: 5;
			}

			.time {
			flex: 4;
			}
			}

			.header {
			background: rgba(134, 156, 201, 0.1);
			font-weight: 500;

			div {
			border-right: 1px solid rgba(255, 255, 255, 0.2);

			&:nth-last-child(1) {
			border: none;
			}
			}
			}

			.separate {
			width: 100%;
			height: 2px;
			background-color: rgba(255, 255, 255, 0.2);
			/* background-color: red; */
			border-right: 4px solid #00F2F3;
			border-left: 4px solid #00F2F3;
			}
			}
			}

			.safe_warning {
			width: 406px;
			margin-left: 20px;
			margin-right: 20px;

			.list {
			height: 147px;
			overflow: auto;
			margin-top: 15px;
			scrollbar-width: none;

			.item {
			display: flex;
			font-size: 13px;
			color: #D2E0FF;

			.icon {
			width: 40px;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 3px;

			.circle {
			width: 7px;
			height: 7px;
			border-radius: 50%;
			background: #01D9FE;
			box-shadow: 0px 0px 1px 4px #34788f;
			/* opacity: 0.52; */
			}

			.line {
			margin-top: 3px;
			width: 1px;
			height: calc(100% - 10px);
			background-color: #153947;
			}
			}

			.content {
			flex: 1;

			.header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.time {
			display: flex;
			align-items: center;

			.status {
			height: 18px;
			line-height: 18px;
			border-radius: 2px;
			padding: 2px 4px;
			border: 1px solid #869CC9;
			font-size: 12px;
			margin-left: 8px;
			}
			}

			.have_time {
			font-size: 12px;
			color: #D2E0FF;

			span {
			color: #FEAF01;
			}
			}
			}

			.wrap {
			height: 40px;
			background: linear-gradient(270deg, rgba(254, 85, 1, 0) 0%, rgba(254, 85, 1, 0.19) 100%);
			border-radius: 2px 0px 0px 2px;
			display: flex;
			align-items: center;
			border: 1px solid;
			margin-bottom: 20px;
			margin-top: 8px;
			padding: 0 10px;
			border-image: linear-gradient(270deg, rgba(254, 85, 1, 0), rgba(254, 85, 1, 0.6)) 1 1;

			.title {
			flex: 4;
			font-weight: bold;
			font-size: 15px;
			color: #FFFFFF;
			}

			.address {
			flex: 6;
			}
			}
			}
			}
			}
			}

			.garden_warning {
			flex: 1;
			margin-right: 20px;

			.content {
			display: flex;

			.sa_static {
			width: 285px;
			margin-top: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 16px 24px;

			.echart_wrap {
			position: relative;

			.pie_text {
			width: 82px;
			height: 82px;
			border: 1px dashed rgba(1, 217, 254, 0.7);
			border-radius: 50%;
			position: absolute;

			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 999;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 12px;

			.fs30 {
			font-weight: bold;
			font-size: 18px;
			margin-bottom: 4px;
			}
			}
			}

			.echart {
			width: 110px;
			height: 110px;
			}

			.list {
			margin-left: 36px;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 110px;

			.item {
			width: 100%;
			font-size: 14px;

			.line {
			display: flex;
			align-items: center;
			margin-bottom: 6px;

			.icon {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			margin-right: 10px;
			background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
			}
			}

			.num {
			margin-left: 20px;
			}
			}
			}
			}

			.table {
			.line {
			div {
			justify-content: flex-end;
			padding-right: 10px;
			}

			.driver {
			flex: 4;
			justify-content: center;
			}
			}

			.header {
			div {
			justify-content: center;
			padding-right: 0;
			}
			}
			}
			}

			}

			.visitor_warning {
			width: 360px;
			.table{
			.line{
			div{
			.dept{
			flex: 5;
			}
			}
			}
			}
			}
			}

			.com_header {
			height: 40px;
			display: flex;
			@@ -774,6 +1263,56 @@
			}
			}

			.table {
			margin-top: 15px;
			flex: 1;

			.line {
			display: flex;
			align-items: center;
			font-size: 14px;
			height: 32px;

			div {
			flex: 3;
			height: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			}

			.dept {
			flex: 5;
			}

			.time {
			flex: 4;
			}
			}

			.header {
			background: rgba(134, 156, 201, 0.1);
			font-weight: 500;

			div {
			border-right: 1px solid rgba(255, 255, 255, 0.2);

			&:nth-last-child(1) {
			border: none;
			}
			}
			}

			.separate {
			width: 100%;
			height: 2px;
			background-color: rgba(255, 255, 255, 0.2);
			/* background-color: red; */
			border-right: 4px solid #00F2F3;
			border-left: 4px solid #00F2F3;
			}
			}

			.second_title {
			height: 24px;
			display: flex;
			@@ -816,10 +1355,8 @@
			height: 960px;
			/* width: 100%;
			height: 100vh; */
			background: #0b2539;
			color: #FFFFFF;
			position: relative;
			z-index: -2;
			font-size: 14px;

			.main_bg {