bmcui/src/views/dashbord.vue

<template>
	<div class="dashbord-context">
		<div class='dashboard_box'>
			<h3 style="padding-left: 5px;" class="dashboard_box_h3"> <strong>总览</strong>
				<span style="font-size: 12px;">总览网页提供设备和远程服务器的总体状态信息。</span>
			</h3>
		</div>
		<div class="dashboard_box_sub">
			<div class="sub_left">
				<Row>
					<Col span="24">
					<div class="dashboard_chat">
						<div class='dashboard_item_title' style='padding-left: 20px;'>
							<span>使能机箱管理</span>
							<i-switch class='switch' v-model="serMode" @on-change="change" />
						</div>
						<div class='model-contect'>
							<ul>
								<template v-for='item in serverList'>
									<li :class="item.cardIndex == activeIndex ? 'active' : 'off'">
										<img class="svg checked-card" id="svg1" src="../assets/checked-card.png">
										<span class="tab_span">BMC1</span>
										<template v-if='item.status == 0'>
											<span class="active_span off_span">Status</span>
										</template>
										<template v-else-if='item.status == 1'>
											<span class="active_span">Status</span>
										</template>
										<template v-else>
											<span class="active_span error_span">Status</span>
										</template>
										<span :class="['power_span', item.power == 0 ? 'power_off_span' : '']">Power</span>
									</li>
								</template>
							</ul>
						</div>
					</div>
					</Col>
					<Col span="24">
					<div class="dashboard_item">
						<div class="dashboard_item_title">
							设备信息
						</div>
						<div class='info_detail'>
							<Row class='margin_btm'>
								<Col span="8">固件版本:</Col>
								<Col span="14">3.20.3.3</Col>
							</Row>
							<Row class='margin_btm'>
								<Col span="8">固件编译时间:</Col>
								<Col span="14">Jul 19 2019 13:49:00 CST</Col>
							</Row>
						</div>
					</div>
					</Col>
					<Col span="24">
					<div class="dashboard_item">
						<div class="dashboard_item_title">
							息网络信
						</div>
						<div class='info_detail'>
							<Row class='margin_btm'>
								<Col span="8">MAC地址:</Col>
								<Col span="14">02:04:06:08:0A:8E</Col>
							</Row>
							<Row class='margin_btm'>
								<Col span="8">V4网络模式:</Col>
								<Col span="14">Static</Col>
							</Row>
							<Row class='margin_btm'>
								<Col span="8">IPv4地址:</Col>
								<Col span="14">192.168.0.203</Col>
							</Row>
							<Row class='margin_btm'>
								<Col span="8">V6网络模式:</Col>
								<Col span="14">Disable</Col>
							</Row>
						</div>
					</div>
					</Col>
				</Row>
			</div>
			<div class="sub_center">
				<Row>
					<Col span="24">
					<div class="dashboard_SensorBox" style='margin-top:0px;'>
						<div class="dashboard_item_title">
							传感器状态
						</div>
						<div class='info_detail2'>
							<Row class='margin_btm' type="flex" justify="center">
								<Col span="4"><strong>状态</strong></Col>
								<Col span="8"><strong>Sensor</strong></Col>
								<Col span="8"><strong>Reading</strong></Col>
								<Col span="4"><strong></strong></Col>
							</Row>
							<Row class='line-class on' type="flex" justify="center">
								<Col span="4">
								<img src="../assets/status_critical.png" title="Critical" style="width: 12px" border="0">
								</Col>
								<Col span="8">VCC12</Col>
								<Col span="8">22.36 Volts</Col>
								<Col span="4"><a href="sensor_readings.html?id=0"><img src="../assets/view.png" border="0" style="width: 12px" class="my_view"></a></Col>
							</Row>
							<Row class='line-class off' type="flex" justify="center">
								<Col span="4">
								<img src="../assets/status_critical.png" title="Critical" style="width: 12px" border="0">
								</Col>
								<Col span="8">VCC12</Col>
								<Col span="8">22.36 Volts</Col>
								<Col span="4"><a href="sensor_readings.html?id=0"><img src="../assets/view.png" border="0" style="width: 12px" class="my_view"></a></Col>
							</Row>
							<!-- <Row class='margin_btm'><Col span="8">固件编译时间:</Col><Col span="14">Jul 19 2019 13:49:00 CST</Col></Row> -->
						</div>
					</div>
					</Col>
					<Col span="24">
					<div class="dashboard_SensorBox">
						<div class="dashboard_item_title">
							KVM
						</div>
						<!-- <div class='info_detail'>
                    			<Row class='margin_btm'><Col span="8">固件版本:</Col><Col span="14">3.20.3.3</Col></Row>
                    			<Row class='margin_btm'><Col span="8">固件编译时间:</Col><Col span="14">Jul 19 2019 13:49:00 CST</Col></Row>
                    		</div> -->
					</div>
					</Col>
				</Row>
			</div>
			<div class="sub_right">
				<Row>
					<Col span="24">
					<div class="dashboard_SensorBox" style='margin-top:0px;padding:0;'>
						<div class="dashboard_item_title" style='padding: 25px 20px;'>
							日志
						</div>
						<div class='info_detail' style="width: 100%; padding:0;">
							<div id="myChart" style="width: 250px; min-height:400px;"></div>
						</div>
					</div>
					</Col>
					<Col span="24">
					<div class="dashboard_SensorBox">
						<div class="dashboard_item_title">
							CPU 信息
						</div>
						<div class='info_detail'>
							<Row class='margin_btm'>
								<Col span="8">系统:</Col>
								<Col span="16">Neokylin</Col>
							</Row>
							<Row class='margin_btm'>
								<Col span="8">版本:</Col>
								<Col span="16">dev 4.0</Col>
							</Row>
							<Row class='margin_btm'>
								<Col span="8">系统:</Col>
								<Col span="16">20%</Col>
							</Row>
							<Row class='margin_btm'>
								<Col span="8">版本:</Col>
								<Col span="16">49%</Col>
							</Row>
						</div>
					</div>
					</Col>
				</Row>
			</div>
		</div>
	</div>
</template>
<script>
	import echarts from 'echarts'
export default {
	name: 'dashbord1',
	data() {
		return {
			serverList: [{
					cardIndex: 1,
					senserName: 'aa',
					status: 1,
					power: 1,
					isError: false,
					isOnline: 1,
					isMainCard: false,
				},
				{
					cardIndex: 2,
					senserName: 'aa',
					status: 0,
					power: 0,
					isError: false,
					isOnline: 1,
					isMainCard: false,
				},
				{
					cardIndex: 2,
					senserName: 'aa',
					status: 3,
					power: 0,
					isError: false,
					isOnline: 1,
					isMainCard: false,
				},
			],
			activeIndex: 1,
			serMode: false,
		}
	},
	created() {
		console.log("3333333333333")
	},
	mounted(){
		this.getPie()
	},
	methods: {
		change() {

		},
		getPie() {
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('myChart'));
			// 绘制图表，this.echarts1_option是数据
			myChart.setOption({
				
				series: [{
					name: '访问来源',
					type: 'pie',
					radius: '55%',
					// 圆环位置
        			center: ['50%', '20%'],
					hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果
					itemStyle : {
			            normal : {
			                //隐藏标示文字
			                label : {
			                    show : false   
			                },
			                //隐藏标示线
			                labelLine : {
			                    show : false   
			                }
			            }
			        },
					data: [
					{
			            name: "a",
			            value: Math.round(Math.random() * 100000)
			        }, {
			            name: "b",
			            value: Math.round(Math.random() * 100000)
			        }, {
			            name: "c",
			            value: Math.round(Math.random() * 100000)
			        },{
			            name: "d",
			            value: Math.round(Math.random() * 100000)
			        }, {
			            name: "e",
			            value: Math.round(Math.random() * 100000)
			        }, {
			            name: "f",
			            value: Math.round(Math.random() * 100000)
			        },{
			            name: "g",
			            value: Math.round(Math.random() * 100000)
			        }, {
			            name: "h",
			            value: Math.round(Math.random() * 100000)
			        }, {
			            name: "i",
			            value: Math.round(Math.random() * 100000)
			        }]
				}],
				tooltip: {
					formatter: '{b} : {c}', // 默认值null，内容格式器
				},
				legend: {
					orient: 'vertical',
					top: 200,
					left: 20,
        			// top: 20,
					data: ['a', 'b', 'c','d', 'e', 'f','g', 'h', 'i']
				},
			});
		},
	}
}
</script>
<style lang='scss' scoped>
.dashbord-context {
	color: #fff;
	/*overflow-x: scroll;*/
	padding-bottom: 30px;
	.dashboard_box_h3 {
		border-bottom: none;
		font-size: 24px;

		span {
			color: #FFFFFF;
			font-weight: 400;
			font-size: 12px;
			margin-left: 8px;
		}
	}

	.dashboard_box_sub {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.sub_left {
			width: 350px;
		}

		.sub_center {
			width: 580px;
			margin: 0 10px;
		}

		.sub_right {
			width: 250px;
			/*margin-right: 4px;*/
		}
	}

	.line-class {
		height: 44px;
		text-align: center;
		line-height: 44px;

		&.on {
			background-color: rgba(24, 116, 255, 0.06);
		}

		&.off {}
	}

	.table_line {}


	.dashboard_box {
		width: 1180px;
		margin: auto;
		margin-top: 10px;
		/* background: #040C19; */
		padding: 20px 0;
	}

	.dashboard_item_title {
		display: flex;
		justify-content: space-between;
		position: relative;
		color: #1674FA;
		font-weight: 600;
		font-size: 14px;
		text-align: left;
		margin-bottom: 20px;
		/*padding-left: 20px;*/
		padding-top: 25px;
		padding-right: 20px;

		span {}

		.switch {
			/*padding-left: 20px;*/
			width: 38px;
		}

		.ivu-switch-checked:after {
			left: 18px;
		}

		&.palft {
			padding-left: 20px;
		}

	}

	.dashboard_chat {
		width: 350px;
		min-height: 280px;
		background: url(/res/BG.png) no-repeat;
		background-size: 100% 100%;
		border-radius: 3px;

		background: -webkit-linear-gradient(bottom, #FFFFFF, #D1E3FF);
		background: -o-linear-gradient(top, #FFFFFF, #D1E3FF);
		background: -moz-linear-gradient(top, #FFFFFF, #D1E3FF);
		background: linear-gradient(to top, #FFFFFF, #D1E3FF);
	}

	.model-contect {

		margin-top: 0 !important;
		padding-top: 8px;
		/*padding: 8px 20px 0 20px;*/

		.active {
			background: url(../assets/stor/cart_active.png) no-repeat center;
			background-size: 100%;
			background-color: #fff;
		}

		ul {
			li {
				margin: auto;
				display: flex;
				position: relative;
				display: block;
				height: 42px;
				width: 320px;
				margin: auto;
				background: url(../assets/stor/cart.png) no-repeat center;
				background-size: 100%;
				background-color: #fff;
				color: #999999;

				img.checked-card {
					position: absolute;
					bottom: 20px;
					left: 9px;
					width: 14px;
				}

				.tab_span {
					position: absolute;
					right: 50px;
					top: 0;
					display: block;
					width: 120px;
					height: 42px;
					line-height: 42px;
					text-align: center;
					color: #999999;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: bold;
				}

				.active_span {
					position: absolute;
					left: 60px;
					top: 0;
					display: block;
					height: 42px;
					width: 40px;
					text-align: center;
					padding-top: 22px;
					color: #29C093;
					font-size: 12px;

					&.off_span {
						color: #999999;
					}

					&.error_span:before {
						background: #FF0000;
					}

				}

				.active_span:before {
					content: '';
					position: absolute;
					left: 50%;
					top: 10px;
					transform: translate(-50%, 0);
					height: 10px;
					width: 10px;
					background: #29C093;
					border-radius: 50%;
				}

				.off_span:before {
					background: #999999;
				}



				/*.active_span:before {
				    background: #999999;
				}*/

				.power_span {
					position: absolute;
					left: 105px;
					top: 0;
					display: block;
					height: 42px;
					width: 40px;
					text-align: center;
					padding-top: 22px;
					color: #29C093;
					font-size: 12px;

					&.power_off_span {
						color: #999999;
					}
				}

				.power_span:before {
					content: '';
					position: absolute;
					left: 50%;
					top: 10px;
					transform: translate(-50%, 0);
					height: 10px;
					width: 10px;
					background: #29C093;
					border-radius: 50%;
				}

				.power_off_span:before {
					background: #999999;
				}

				.error .active_span:before {
					background: #FF0000;
				}

				/*.off .active_span:before {
			    background: #999999;
			}*/
			}
		}

		.svg {
			display: none;
		}


	}

	.dashboard_item {
		background: -webkit-linear-gradient(bottom, #FFFFFF, #D1E3FF);
		background: -o-linear-gradient(top, #FFFFFF, #D1E3FF);
		background: -moz-linear-gradient(top, #FFFFFF, #D1E3FF);
		background: linear-gradient(to top, #FFFFFF, #D1E3FF);
		padding: 20px;
		margin-top: 20px;
		border-radius: 3px;
		width: 350px;
	}

	.info_detail2 {
		color: #022B7D;
		font-size: 12px;
	}

	.info_detail {
		color: #022B7D;
		font-size: 12px;
		text-align: left;

		.ivu-col {
			text-align: left;
		}
	}

	.margin_btm {
		margin-bottom: 20px;
		text-align: center;
	}

	.dashboard_SensorBox {
		background: -webkit-linear-gradient(bottom, #FFFFFF, #D1E3FF);
		background: -o-linear-gradient(top, #FFFFFF, #D1E3FF);
		background: -moz-linear-gradient(top, #FFFFFF, #D1E3FF);
		background: linear-gradient(to top, #FFFFFF, #D1E3FF);
		padding: 25px 20px;
		width: 100%;
		border-radius: 3px;
		margin-top: 20px;

		/*margin-top:0;*/
		.dashboard_item_title {
			padding-top: 0;
		}
	}

}
</style>