Skip to content

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

静态页面无交互完成

parent 9588b78d
Show whitespace changes
Inline Side-by-side
Showing with 462 additions and 33 deletions
src/App.vue
View file @ 73058211
...@@ -29,6 +29,7 @@ export default { ...@@ -29,6 +29,7 @@ export default {
} }
#app{ #app{
background-color: #f6f7fb; background-color: #f6f7fb;
padding-bottom: 20px;
} }
</style> </style>
src/components/menu.vue
View file @ 73058211
<template> <template>
<div class="menu"> <div class="menu">
<img src="../assets/imgs/home_img_logo.png" alt="" class="logo"> <img src="../assets/imgs/home_img_logo.png" alt="" class="logo">
<div style="float:right;cursor: pointer;position:relative;" class="user_hover">
<span class="user">用户</span> <span class="user">用户</span>
<img src="../assets/imgs/home_ic_user.png" alt="" class="user_pic"> <img src="../assets/imgs/home_ic_user.png" alt="" class="user_pic">
<div class="user_menu">
<div v-for="(item,index) in user_arr" :key="index+700" @click="gotopage(index)">{{item}}</div>
</div>
<div class="sj"></div>
</div>
<div class="number">99+</div> <div class="number">99+</div>
<img src="../assets/imgs/home_ic_shop.png" alt="" class="car"> <img src="../assets/imgs/home_ic_shop.png" alt="" class="car">
...@@ -22,6 +28,12 @@ export default { ...@@ -22,6 +28,12 @@ export default {
return{ return{
menu_arr:['工作台','技术支持','服务超市'], menu_arr:['工作台','技术支持','服务超市'],
now_menu:0, now_menu:0,
user_arr:['个人档案','消息通知','收银中心','关于BD-aPaaS','退出登录'],
}
},
methods:{
gotopage(n){
console.log(n);
} }
} }
} }
...@@ -34,6 +46,7 @@ export default { ...@@ -34,6 +46,7 @@ export default {
background-color: #0f2683; background-color: #0f2683;
color: #8390ee; color: #8390ee;
line-height: 84px; line-height: 84px;
} }
.logo{ .logo{
float: left; float: left;
...@@ -85,4 +98,43 @@ export default { ...@@ -85,4 +98,43 @@ export default {
bottom: 0px; bottom: 0px;
left: calc(50% - 12px); left: calc(50% - 12px);
} }
.user_menu{
width: 135px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 8px;
position: absolute;
top: 80px;
left: -20px;
overflow: hidden;
display: none;
z-index: 1;
}
.user_hover:hover .user_menu{
display: block;
}
.user_hover:hover .sj{
display: block;
}
.user_menu div{
width: 135px;
height: 44px;
line-height: 44px;
text-align: center;
color: #0d1847;
}
.user_menu div:hover{
background-color: #e56600;
color: #fff;
}
.sj{
width: 16px;
height: 16px;
background-color: #e56600;
position: absolute;
top: 72px;
transform:rotate(45deg);
display: none;
}
</style> </style>
\ No newline at end of file
src/pages/workPlace.vue
View file @ 73058211
...@@ -9,6 +9,10 @@ ...@@ -9,6 +9,10 @@
<div class="person_menu"> <div class="person_menu">
管理功能&nbsp;&nbsp;&nbsp; 管理功能&nbsp;&nbsp;&nbsp;
<img src="../assets/imgs/home_ic_more_w.png" alt /> <img src="../assets/imgs/home_ic_more_w.png" alt />
<div class="manage_menu">
<div></div>
</div>
</div> </div>
</div> </div>
<div class="menu"> <div class="menu">
...@@ -33,7 +37,7 @@ ...@@ -33,7 +37,7 @@
<div class="case_box"> <div class="case_box">
<div class="data_asy"> <div class="data_asy">
<p style="margin-top:20px;margin-bottom:10px;"> <p style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;">
数据分析中心 数据分析中心
<img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt /> <img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt />
</p> </p>
...@@ -42,29 +46,74 @@ ...@@ -42,29 +46,74 @@
<p> <p>
<span></span> 服务健康状态 <span></span> 服务健康状态
</p> </p>
<div :id="health"></div> <div :id="health" class="health"></div>
</div> </div>
<div class="data_charts_right"> <div class="data_charts_right">
<p> <p>
<span></span> 服务运营分析 <span></span> 服务运营分析
</p> </p>
<div :id="yy_asy"></div> <div :id="yy_asy" class="yy_asy"></div>
</div>
</div>
</div>
<div class="online_tool">
<p style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;height:28px;padding-left:20px;">
在线组件工具
</p>
<div class="online_contain">
<div v-for="(item,index) in online_tool_arr" :key="index+300" class="online_box" :style="{backgroundColor:item.bg}">
<img :src="item.pic" alt=""><span :style="{color:item.color}">{{item.text}}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="online_tool"></div> </div>
<div class="case_box">
<div class="data_asy">
<p style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;">
我的服务
<img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt />
</p>
<div class="myservice">
<div class="myservice_title">
<div v-for="(item,index) in service_arr" :key="index+400" class="myservice_type" :style="now_type==index?{borderBottom:'4px solid #f5ab4c',color:'#e56600'}:{}" @click="now_type = index">{{item}}</div>
<div class="myservice_btn"><img src="../assets/imgs/home_ic_release.png" alt="">&nbsp; 服务注册</div>
</div>
</div>
</div>
<div class="online_tool">
<p style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;">
我的应用
<img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt />
</p>
<div class="myapp">
<div class="myservice_title">
<div v-for="(item,index) in apptype_arr" :key="index+400" class="myservice_type" :style="now_app==index?{borderBottom:'4px solid #f5ab4c',color:'#e56600'}:{}" @click="now_app = index">{{item}}</div>
</div>
<el-scrollbar class="myapp_contain">
<div v-for="(item,index) in app_arr" :key="index+600" class="myapp_box">
<img :src="item.pic" alt="" style="width:60px;height:60px;">
<p>{{item.name}}</p>
<p>{{item.version}}</p>
</div>
</el-scrollbar>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import uuidv1 from "uuid/v1"; import uuidv1 from "uuid/v1";
var echarts = require("echarts");
export default { export default {
data() { data() {
return { return {
person: "康先生", person: "康先生",
login_time: "2020-03-12 10:21:22", login_time: "2020-03-12 10:21:22",
now_user: 0, now_user: 0,
now_type:0,
now_app:0,
health: uuidv1(), health: uuidv1(),
yy_asy: uuidv1(), yy_asy: uuidv1(),
menu_arr: [ menu_arr: [
...@@ -121,24 +170,135 @@ export default { ...@@ -121,24 +170,135 @@ export default {
num: "￥2,312" num: "￥2,312"
} }
] ]
],
online_tool_arr:[
{
text: "智能绘图",
pic: require("../assets/imgs/home_tool_ic_znht.png"),
bg: "#e5f4fe",
color: "#38aef9",
},
{
text: "数据开发",
pic: require("../assets/imgs/home_tool_ic_sjkf.png"),
bg: "#e6ebfe",
color: "#515fe7",
},
{
text: "模型工场",
pic: require("../assets/imgs/home_tool_ic_mxgc.png"),
bg: "#e6ebfe",
color: "#515fe7",
},
{
text: "流程设计",
pic: require("../assets/imgs/home_tool_ic_lcsj.png"),
bg: "#e6ebfe",
color: "#515fe7",
},
{
text: "可视化报表",
pic: require("../assets/imgs/home_tool_ic_kshbb.png"),
bg: "#fff2e2",
color: "#ea7d19",
},
{
text: "模板应用",
pic: require("../assets/imgs/home_tool_ic_mbyy.png"),
bg: "#fff2e2",
color: "#ea7d19",
},
{
text: "应用创新",
pic: require("../assets/imgs/home_tool_ic_yycx.png"),
bg: "#e7fdfc",
color: "#25bdb1",
},
],
service_arr:['服务列表','申请服务','服务审批','云资源'],
apptype_arr:['部署的应用','创新的应用'],
app_arr:[
{
pic:require("../assets/imgs/home_tool_ic_znht.png"),
name:'定定定',
version:'1.0.1',
},
{
pic:require("../assets/imgs/home_tool_ic_znht.png"),
name:'定定定定定定定定',
version:'1.0.1',
},
{
pic:require("../assets/imgs/home_tool_ic_znht.png"),
name:'定定定定定定定定',
version:'1.0.1',
},
{
pic:require("../assets/imgs/home_tool_ic_znht.png"),
name:'定定定定定定定定',
version:'1.0.1',
},
{
pic:require("../assets/imgs/home_tool_ic_znht.png"),
name:'定定定定定定定定',
version:'1.0.1',
},
{
pic:require("../assets/imgs/home_tool_ic_znht.png"),
name:'定定定定定定定定',
version:'1.0.1',
},
{
pic:require("../assets/imgs/home_tool_ic_znht.png"),
name:'定定定定定定定定',
version:'1.0.1',
},
],
manage_arr:[
{
pic:require('../assets/imgs/home_tool_ic_key.png'),
text:'我的密钥',
},
{
pic:require('../assets/imgs/home_tool_ic_organize.png'),
text:'组织管理',
},
{
pic:require('../assets/imgs/home_tool_ic_quanxian.png'),
text:'权限管理',
},
{
pic:require(),
text:'容器管理',
},
{
pic:require(),
text:'数据管控',
},
{
pic:require(),
text:'消息新闻管理',
},
] ]
}; };
}, },
mounted() { mounted() {
this.init_health() this.init_health(50);
this.init_yy()
}, },
methods: { methods: {
init_health(num) { init_health(num) {
var options = { var options = {
title: { title: {
text: "77", text: num + "%",
textStyle: { textStyle: {
color: "#01c4a3", color: "#000",
fontSize: 40 fontSize: 40,
fontWeight: 200
}, },
subtext: "健康占比", subtext: "健康占比",
subtextStyle: { subtextStyle: {
color: "#909090" color: "#c9cedd"
}, },
itemGap: -10, // 主副标题距离 itemGap: -10, // 主副标题距离
left: "center", left: "center",
...@@ -185,31 +345,23 @@ export default { ...@@ -185,31 +345,23 @@ export default {
series: [ series: [
{ {
type: "bar", type: "bar",
silent: true,
data: [ data: [
{ {
name: "作文得分", name: "作文得分",
value: 60, value: num,
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ color: "#e56600",
{ shadowColor: "rgba(0, 0, 0, 0.2)",
offset: 0, shadowBlur: 20
color: "#aaf14f"
},
{
offset: 1,
color: "#0acfa1"
}
]),
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 50
} }
} }
} }
], ],
coordinateSystem: "polar", coordinateSystem: "polar",
roundCap: true, roundCap: true,
barWidth: 25, barWidth: 10,
barGap: "-100%", // 两环重叠 barGap: "-100%", // 两环重叠
z: 2 z: 2
...@@ -217,33 +369,156 @@ export default { ...@@ -217,33 +369,156 @@ export default {
{ {
// 灰色环 // 灰色环
type: "bar", type: "bar",
silent: true,
data: [ data: [
{ {
value: 100, value: 100,
itemStyle: { itemStyle: {
color: "#e2e2e2", color: "#c9cedd",
shadowColor: "rgba(0, 0, 0, 0.5)", shadowColor: "rgba(0, 0, 0, 0.2)",
shadowBlur: 50 shadowBlur: 20
} }
} }
], ],
coordinateSystem: "polar", coordinateSystem: "polar",
roundCap: true, roundCap: true,
barWidth: 25, barWidth: 10,
barGap: "-100%", // 两环重叠 barGap: "-100%", // 两环重叠
z: 1 z: 1
} }
] ]
}; };
window[this.health] = echarts.init( window[this.health] = echarts.init(document.getElementById(this.health));
document.getElementById(this.health)
);
window[this.health].setOption(options, true); window[this.health].setOption(options, true);
},
init_yy() {
var colors = ["#e56600", "#c9cedd", "#515fe7"];
var options = {
color: colors,
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross"
}
},
grid: {
top: "20",
bottom:'45',
},
legend: {
data: ["服务调用总数", "应用部署总数", "收益总额"],
bottom: 0,
itemWidth:10,
itemHeight:10,
backgroundColor:'#f4f7fc',
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true
},
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
]
}
],
yAxis: [
{
type: "value",
name: "",
min: 0,
position: "right",
axisLine: {
lineStyle: {
color: colors[1]
}
}
},
{
type: "value",
name: "",
min: 0,
position: "left",
axisLine: {
lineStyle: {
color: colors[1]
}
}
}
],
series: [
{
name: "服务调用总数",
type: "bar",
yAxisIndex: 1,
data: [
2.0,
4.9,
7.0,
23.2,
25.6,
],
itemStyle: {
barBorderRadius: 6,
color:colors[2]
},
barWidth: 12
},
{
name: "应用部署总数",
type: "bar",
yAxisIndex: 1,
data: [
2.6,
5.9,
9.0,
26.4,
28.7,
],
itemStyle: {
barBorderRadius: 6,
color:colors[0]
},
barWidth: 12
},
{
name: "收益总额",
type: "line",
yAxisIndex: 0,
data: [
2.0,
2.2,
3.3,
4.5,
6.3,
],
itemStyle: {
color:colors[0]
},
symbol:'circle',
}
]
};
window[this.yy_asy] = echarts.init(document.getElementById(this.yy_asy));
window[this.yy_asy].setOption(options, true);
} }
} }
}; };
</script> </script>
<style>
.el-scrollbar__wrap {
overflow-x: hidden;
}
</style>
<style scoped> <style scoped>
.person_info { .person_info {
width: 1200px; width: 1200px;
...@@ -357,4 +632,105 @@ export default { ...@@ -357,4 +632,105 @@ export default {
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} }
.health {
width: 200px;
height: 200px;
margin: 20px 0 0 20px;
}
.yy_asy {
width: 400px;
height: 200px;
margin: 20px 0 0 0px;
}
.online_tool{
width: 460px;
float: right;
}
.online_contain{
width: 460px;
height: 270px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 12px;
padding: 32px 20px;
overflow: hidden;
}
.online_box{
width: 126px;
height: 38px;;
border-radius: 6px 19px 19px 19px;
line-height: 38px;
text-align: center;
float: left;
margin-right: 20px;
margin-bottom: 15px;
}
.online_contain .online_box:nth-child(3n){
margin-right: 0px;
}
.online_box img{
vertical-align: -4px;
margin-right: 10px;
}
.myservice,.myapp{
width: 720px;
height: 386px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 12px;
padding: 15px 20px;
}
.myapp{
width: 460px;
}
.myservice_title{
width: 100%;
height: 47px;
border-bottom: 2px solid #f4f7fc;
}
.myservice_type{
float: left;
margin-right: 40px;
height: calc(100% + 2px);
cursor: pointer;
color: #8890a7;
}
.myservice_btn{
float: right;
width: 100px;
height: 32px;
background-color: #515fe7;
border-radius: 8px;
color: #e6ebfe;
text-align: center;
line-height: 32px;
cursor: pointer;
}
.myapp_contain{
width: 420px;
height: 300px;
margin-top: 10px;
}
.myapp_box{
width: 120px;
height: 110px;
float: left;
margin: 10px 20px 40px 0px;
text-align: center;
}
.myapp_box p:nth-of-type(1){
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 10px;
margin-bottom: 5px;
color: #0d1847;
}
.myapp_box p:nth-of-type(2){
font-size: 12px;
color: #8890a7;
}
</style> </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