Skip to content

A
apaas-ui
Commit 9588b78d authored by 张俊's avatar 张俊
Browse files
Options

健康环图

parent 0116d6b8
Hide whitespace changes
Inline Side-by-side
Showing with 342 additions and 203 deletions
src/pages/workPlace.vue
View file @ 9588b78d
<template>
<div>
<div class="person_info">
<div class="preson">
<div class="person_text">
<img src="../assets/imgs/img_head.png" alt="">
<span>你好，{{person}}！最近登录{{login_time}}</span>
</div>
<div class="person_menu">管理功能&nbsp;&nbsp;&nbsp; <img src="../assets/imgs/home_ic_more_w.png" alt=""></div>
</div>
<div class="menu">
<div :class="now_user==0?'menu_box0':now_user==1?'menu_box1':'menu_box2'" v-for="(item,index) in menu_arr[now_user]" :key="index+100" >
<img :src="item.pic" alt="">
<div class="menu_text">
<p>{{item.text}}</p>
<p :style="index == menu_arr[now_user].length - 1||now_user==1&&index==0?{color:item.color,marginRight:'-20px'}:{color:item.color}"><span style="font-size:36px">{{item.num}}</span><span v-if="index == menu_arr[now_user].length - 1||now_user==1&&index==0">万</span></p>
</div>
</div>
</div>
<div>
<div class="person_info">
<div class="preson">
<div class="person_text">
<img src="../assets/imgs/img_head.png" alt />
<span>你好，{{person}}！最近登录{{login_time}}</span>
</div>
<div class="person_menu">
管理功能&nbsp;&nbsp;&nbsp;
<img src="../assets/imgs/home_ic_more_w.png" alt />
</div>
</div>
<div class="menu">
<div
:class="now_user==0?'menu_box0':now_user==1?'menu_box1':'menu_box2'"
v-for="(item,index) in menu_arr[now_user]"
:key="index+100"
>
<img :src="item.pic" alt />
<div class="menu_text">
<p>{{item.text}}</p>
<p
:style="index == menu_arr[now_user].length - 1||now_user==1&&index==0?{color:item.color,marginRight:'-20px'}:{color:item.color}"
>
<span style="font-size:36px">{{item.num}}</span>
<span v-if="index == menu_arr[now_user].length - 1||now_user==1&&index==0">万</span>
</p>
</div>
</div>
</div>
</div>
<div class="case_box">
<div class="data_asy">
<p style="margin-top:20px;margin-bottom:10px;">数据分析中心 <img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt=""></p>
<div class="data_charts">
<div class="data_charts_left">
<p><span></span> 服务健康状态</p>
<div :id="health"></div>
</div>
<div class="data_charts_right">
<p><span></span> 服务运营分析</p>
<div :id="yy_asy"></div>
</div>
</div>
</div>
<div class="online_tool"></div>
<div class="case_box">
<div class="data_asy">
<p style="margin-top:20px;margin-bottom:10px;">
数据分析中心
<img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt />
</p>
<div class="data_charts">
<div class="data_charts_left">
<p>
<span></span> 服务健康状态
</p>
<div :id="health"></div>
</div>
<div class="data_charts_right">
<p>
<span></span> 服务运营分析
</p>
<div :id="yy_asy"></div>
</div>
</div>
</div>
<div class="online_tool"></div>
</div>
</div>
</template>
<script>
import uuidv1 from "uuid/v1";
export default {
data(){
return{
person:'康先生',
login_time:'2020-03-12 10:21:22',
now_user:0,
health:'',
yy_asy:"",
menu_arr:[
[
{
text:'服务总数',
pic:require('../assets/imgs/ic_fuwuzs_navy.png'),
bg:'#e6ebfe',
color:'#515fe7',
num:'12,332',
},
{
text:'应用总数',
pic:require('../assets/imgs/ic_yingyongzs.png'),
bg:'#e5f4fe',
color:'#38aef9',
num:'223',
},
{
text:'收益总额',
pic:require('../assets/imgs/ic_shouyize.png'),
bg:'#fcefd6',
color:'#ea7d19',
num:'￥2,312',
},
],
[
{
text:'收益总额',
pic:require('../assets/imgs/ic_shouyize.png'),
bg:'#fcefd6',
color:'#ea7d19',
num:'￥2,312',
},
{
text:'服务总数',
pic:require('../assets/imgs/ic_fuwuzs_navy.png'),
bg:'#e6ebfe',
color:'#515fe7',
num:'12,332',
},
{
text:'应用总数',
pic:require('../assets/imgs/ic_yingyongzs.png'),
bg:'#e5f4fe',
color:'#38aef9',
num:'223',
},
{
text:'收益总额',
pic:require('../assets/imgs/ic_shouyize.png'),
bg:'#fcefd6',
color:'#ea7d19',
num:'￥2,312',
},
],
data() {
return {
person: "康先生",
login_time: "2020-03-12 10:21:22",
now_user: 0,
health: uuidv1(),
yy_asy: uuidv1(),
menu_arr: [
[
{
text: "服务总数",
pic: require("../assets/imgs/ic_fuwuzs_navy.png"),
bg: "#e6ebfe",
color: "#515fe7",
num: "12,332"
},
{
text: "应用总数",
pic: require("../assets/imgs/ic_yingyongzs.png"),
bg: "#e5f4fe",
color: "#38aef9",
num: "223"
},
{
text: "收益总额",
pic: require("../assets/imgs/ic_shouyize.png"),
bg: "#fcefd6",
color: "#ea7d19",
num: "￥2,312"
}
],
[
{
text: "收益总额",
pic: require("../assets/imgs/ic_shouyize.png"),
bg: "#fcefd6",
color: "#ea7d19",
num: "￥2,312"
},
{
text: "服务总数",
pic: require("../assets/imgs/ic_fuwuzs_navy.png"),
bg: "#e6ebfe",
color: "#515fe7",
num: "12,332"
},
{
text: "应用总数",
pic: require("../assets/imgs/ic_yingyongzs.png"),
bg: "#e5f4fe",
color: "#38aef9",
num: "223"
},
{
text: "收益总额",
pic: require("../assets/imgs/ic_shouyize.png"),
bg: "#fcefd6",
color: "#ea7d19",
num: "￥2,312"
}
]
]
};
},
mounted() {
this.init_health()
},
methods: {
init_health(num) {
var options = {
title: {
text: "77",
textStyle: {
color: "#01c4a3",
fontSize: 40
},
subtext: "健康占比",
subtextStyle: {
color: "#909090"
},
itemGap: -10, // 主副标题距离
left: "center",
top: "center"
},
angleAxis: {
max: 100, // 满分
clockwise: false, // 逆时针
startAngle: 90,
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: "category",
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ["50%", "50%"],
radius: "140%" //图形大小
},
series: [
{
type: "bar",
data: [
{
name: "作文得分",
value: 60,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 0,
color: "#aaf14f"
},
{
offset: 1,
color: "#0acfa1"
}
]),
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 50
}
}
}
],
}
coordinateSystem: "polar",
roundCap: true,
barWidth: 25,
barGap: "-100%", // 两环重叠
z: 2
},
{
// 灰色环
type: "bar",
data: [
{
value: 100,
itemStyle: {
color: "#e2e2e2",
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 50
}
}
],
coordinateSystem: "polar",
roundCap: true,
barWidth: 25,
barGap: "-100%", // 两环重叠
z: 1
}
]
};
window[this.health] = echarts.init(
document.getElementById(this.health)
);
window[this.health].setOption(options, true);
}
}
}
};
</script>
<style scoped>
.person_info{
width: 1200px;
height: 206px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 12px;
padding: 20px;
}
.preson{
width: 100%;
height: 52px;
line-height: 52px;
border-bottom: 2px solid #f4f7fc;
}
.person_text{
float: left;
padding: 0 10px;
}
.person_text img{
border-radius: 18px;
margin-right: 10px;
vertical-align: -10px;
}
.person_menu{
float: right;
width: 100px;
height: 32px;
line-height: 32px;
text-align: center;
background-color: #e56600;
border-radius: 8px;
color: #fff;
cursor: pointer;
margin-top: 10px;
}
.menu{
width: 100%;
height: 102px;
margin-top: 20px;
}
.menu_box0,.menu_box1{
float: left;
width: calc((100% - 60px)/3);
margin-right: 30px;
width: 366px;
height: 92px;
background-color: #e6ebfe;
border-radius: 12px 12px 12px 46px;
}
.menu_box0:nth-last-of-type(1),.menu_box1:nth-last-of-type(1){
margin-right: 0px;
}
.menu_box1{
width: calc((100% - 60px)/4);
margin-right: 20px;
}
.menu img{
float: left;
margin: 28px 0 0 28px;
}
.menu .menu_text{
float: right;
margin-top: 15px;
margin-right: 29px;
}
.menu_text p{
text-align: right;
.person_info {
width: 1200px;
height: 206px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
padding: 20px;
}
.preson {
width: 100%;
height: 52px;
line-height: 52px;
border-bottom: 2px solid #f4f7fc;
}
.person_text {
float: left;
padding: 0 10px;
}
.person_text img {
border-radius: 18px;
margin-right: 10px;
vertical-align: -10px;
}
.person_menu {
float: right;
width: 100px;
height: 32px;
line-height: 32px;
text-align: center;
background-color: #e56600;
border-radius: 8px;
color: #fff;
cursor: pointer;
margin-top: 10px;
}
.menu {
width: 100%;
height: 102px;
margin-top: 20px;
}
.menu_box0,
.menu_box1 {
float: left;
width: calc((100% - 60px) / 3);
margin-right: 30px;
width: 366px;
height: 92px;
background-color: #e6ebfe;
border-radius: 12px 12px 12px 46px;
}
.menu_box0:nth-last-of-type(1),
.menu_box1:nth-last-of-type(1) {
margin-right: 0px;
}
.menu_box1 {
width: calc((100% - 60px) / 4);
margin-right: 20px;
}
.menu img {
float: left;
margin: 28px 0 0 28px;
}
.menu .menu_text {
float: right;
margin-top: 15px;
margin-right: 29px;
}
.menu_text p {
text-align: right;
}
.case_box{
width: 100%;
overflow: hidden;
}
.data_asy{
width: 720px;
float: left;
margin-right: 20px;
}
.data_charts{
width: 720px;
height: 270px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 12px;
padding: 20px;
}
.data_charts_left{
height: 100%;
width: 220px;
float: left;
}
.data_charts_right{
height: 100%;
width: 420px;
float: right;
}
.data_charts_left p,.data_charts_right p{
font-size: 16px;
color: #707693;
}
.data_charts_left p span,.data_charts_right p span{
width: 8px;
height: 8px;
background-color: #515fe7;
border-radius: 4px;
display: inline-block;
margin-right: 5px;
.case_box {
width: 100%;
overflow: hidden;
}
.data_asy {
width: 720px;
float: left;
margin-right: 20px;
}
.data_charts {
width: 720px;
height: 270px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
padding: 20px;
}
.data_charts_left {
height: 100%;
width: 220px;
float: left;
}
.data_charts_right {
height: 100%;
width: 420px;
float: right;
}
.data_charts_left p,
.data_charts_right p {
font-size: 16px;
color: #707693;
}
.data_charts_left p span,
.data_charts_right p span {
width: 8px;
height: 8px;
background-color: #515fe7;
border-radius: 4px;
display: inline-block;
margin-right: 5px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment