<template>
|
<div class="contentBox">
|
<div class="meuItem">
|
<div class="userInfo"></div>
|
<div class="userMesg">
|
<div>
|
<div>用户名:{{ userNmae }}</div>
|
<div>职位:{{ userInfo }}</div>
|
</div>
|
</div>
|
<div class="userMenu">
|
<span>{{ loginTime }}</span>
|
<el-button plain type="info" size="small">登出</el-button>
|
</div>
|
</div>
|
<div class="menuList">
|
<div class="itemMenu" v-for="(item, key) in menuList" :key="key">
|
<div>{{ item.name }}</div>
|
<div>{{ item.val }}</div>
|
</div>
|
</div>
|
<div class="menuBox">
|
<div class="title">常用系统统计</div>
|
<div class="menuContent">
|
<dv-scroll-board :config="configList1" />
|
</div>
|
</div>
|
<div class="menuBox">
|
<div class="title">系统登录日志</div>
|
<div class="menuContent">
|
<dv-scroll-board :config="configList2" />
|
</div>
|
</div>
|
<div class="menuBox">
|
<div class="title">系统状态信息</div>
|
<div class="menuEchart">
|
<div class="myEcahrt">
|
<span>CPU占比</span>
|
<div id="echart1"></div>
|
<!-- <dv-water-level-pond :config="config" style="width:150px;height:200px" /> -->
|
<!-- <div>
|
<dv-percent-pond :config="config" style="margin-top:10px;width:70px;height:30px;" />
|
</div>-->
|
</div>
|
<div class="myEcahrt">
|
<span>内存占比</span>
|
<div id="echart2"></div>
|
</div>
|
<div class="myEcahrt">
|
<span>性能占比</span>
|
<div id="echart3"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from "echarts";
|
import "echarts-liquidfill";
|
export default {
|
data() {
|
return {
|
loginTime: null,
|
userNmae: "Admin",
|
userInfo: "系统管理员",
|
menuList: [
|
{ name: "PV统计", val: 30 },
|
{ name: "访问数量", val: 30 },
|
{ name: "新增用户统计", val: 30 }
|
],
|
config: {
|
data: [66, 45],
|
shape: "roundRect"
|
},
|
configList1: {
|
// header: ["列1", "列2", "列3"],
|
data: [
|
["行1列1", "行1列2", "行1列3"],
|
["行2列1", "行2列2", "行2列3"],
|
["行3列1", "行3列2", "行3列3"],
|
["行4列1", "行4列2", "行4列3"],
|
["行5列1", "行5列2", "行5列3"],
|
["行6列1", "行6列2", "行6列3"]
|
],
|
index: false,
|
align: ["center"]
|
},
|
configList2: {
|
// header: ["列1", "列2", "列3"],
|
data: [
|
["行1列1", "行1列2", "行1列3"],
|
["行2列1", "行2列2", "行2列3"],
|
["行3列1", "行3列2", "行3列3"],
|
["行4列1", "行4列2", "行4列3"],
|
["行5列1", "行5列2", "行5列3"],
|
["行6列1", "行6列2", "行6列3"]
|
],
|
index: true,
|
align: ["center"]
|
},
|
|
config1: {
|
data: [
|
{
|
name: "CPU占比",
|
value: 55
|
}
|
],
|
digitalFlopStyle: {
|
fontSize: 20
|
}
|
}
|
};
|
},
|
mounted() {
|
this.getLoginTime();
|
this.setMyChcart1();
|
this.setMyChcart2();
|
this.setMyChcart3();
|
},
|
methods: {
|
getLoginTime() {
|
let date = new Date(),
|
year = date.getFullYear(), //获取完整的年份(4位)
|
month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
|
strDate = date.getDate(); // 获取当前日(1-31)
|
if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
|
if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0
|
|
this.loginTime = year + "/" + month + "/" + strDate;
|
},
|
setMyChcart1() {
|
var chart = echarts.init(document.getElementById("echart1"));
|
// 指定图表的配置项和数据
|
var option = this.getOption(0.8);
|
// 使用指定的配置项和数据显示图表。
|
chart.setOption(option);
|
},
|
setMyChcart2() {
|
var chart = echarts.init(document.getElementById("echart2"));
|
// 指定图表的配置项和数据
|
var option = this.getOption(0.5);
|
// 使用指定的配置项和数据显示图表。
|
chart.setOption(option);
|
},
|
setMyChcart3() {
|
var chart = echarts.init(document.getElementById("echart3"));
|
// 指定图表的配置项和数据
|
var option = this.getOption(0.4);
|
// 使用指定的配置项和数据显示图表。
|
chart.setOption(option);
|
},
|
|
getOption(res) {
|
return {
|
series: [
|
{
|
type: "liquidFill",
|
data: [res], // 水纹占比数据
|
outline: {
|
borderDistance: 0,
|
itemStyle: {
|
borderColor: "#156ACF",
|
borderWidth: 2
|
}
|
},
|
backgroundStyle: {
|
color: "rgba(255, 255, 255,.4)",
|
textStyle: {
|
color: "#293441"
|
}
|
},
|
label: {
|
normal: {
|
textStyle: {
|
color: "#293441",
|
insideColor: "#fff",
|
fontSize: 18
|
}
|
}
|
}
|
}
|
]
|
};
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.contentBox {
|
// background-color: #fff;
|
width: calc(100%);
|
height: calc(100%);
|
display: flex;
|
flex-direction: column;
|
padding: 15px;
|
justify-content: space-between;
|
|
.meuItem {
|
width: calc(100% - 60px);
|
height: calc(15% - 60px);
|
background: url("../assets/img/index//boxBg.png") center center/100% 100%
|
no-repeat;
|
display: flex;
|
padding: 30px;
|
|
.userInfo {
|
width: 15%;
|
height: 100%;
|
background: red;
|
}
|
|
.userMesg {
|
flex: 1;
|
margin: 0px 10px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
div {
|
line-height: 30px;
|
font-family: AdobeHeitiStd-Regular;
|
color: #fff;
|
font-size: 18px;
|
}
|
}
|
|
.userMenu {
|
display: flex;
|
align-items: center;
|
|
span {
|
color: white;
|
margin: 0px 10px;
|
}
|
}
|
}
|
|
.menuList {
|
width: calc(100%);
|
height: calc(10%);
|
//
|
display: flex;
|
line-height: 30px;
|
|
color: #fff;
|
justify-content: space-around;
|
|
.itemMenu {
|
height: calc(100% - 40px);
|
width: 30%;
|
background: url("../assets/img/index//boxBg.png") center center/100% 100%
|
no-repeat;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
padding: 20px 0px;
|
|
div {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
font-family: AdobeHeitiStd-Regular;
|
}
|
|
:first-child {
|
font-size: 17px;
|
}
|
}
|
}
|
|
.menuBox {
|
height: calc(22% - 50px);
|
width: calc(100% - 50px);
|
background: url("../assets/img/index//boxBg.png") center center/100% 100%
|
no-repeat;
|
padding: 25px;
|
font-family: AdobeHeitiStd-Regular;
|
color: #fff;
|
display: flex;
|
flex-direction: column;
|
|
.title {
|
font-size: 20px;
|
margin-bottom: 10px;
|
}
|
|
.menuContent {
|
flex: 1;
|
}
|
|
.menuEchart {
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
|
.myEcahrt {
|
width: 32%;
|
height: 100%;
|
position: relative;
|
|
div {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
