Skip to content

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

工作台组织管理员页面

parent 6d114988
Show whitespace changes
Inline Side-by-side
Showing with 356 additions and 170 deletions
src/pages/workPlace.vue
View file @ daae0421
......@@ -11,7 +11,15 @@
<div class="person_manage_pic"></div>
<div class="manage_menu">
<div v-for="(item,index) in manage_arr" :key="index+800" class="manage_box" @click="manage_func(index)"><img :src="item.pic" alt="">{{item.text}}</div>
<div
v-for="(item,index) in manage_arr"
:key="index+800"
class="manage_box"
@click="manage_func(index)"
>
<img :src="item.pic" alt />
{{item.text}}
</div>
</div>
</div>
</div>
......@@ -35,11 +43,12 @@
</div>
</div>
<!-- 普通用户--数据分析 -->
<div class="case_box" v-if="now_user == 0">
<div class="data_asy">
<p style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;">
<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>
......@@ -59,54 +68,140 @@
</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>
<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
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 class="case_box" v-if="now_user == 0">
<div class="data_asy">
<p style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;">
我的服务
<!-- 组织用户--数据分析 -->
<div class="case_box" v-if="now_user == 1">
<div class="data_asy" style="width:100%;">
<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="data_charts" style="width:100%;">
<div class="data_charts_left">
<p>
<span></span> 服务健康状态
</p>
<div :id="health" class="health"></div>
</div>
<div class="data_charts_left" style="width:420px;margin-left:40px;">
<p>
<span></span> 服务应用总况
<el-select v-model="fw_value" placeholder="请选择">
<el-option
v-for="item in fw_options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</p>
<div :id="fwyy" class="fwyy"></div>
</div>
<div class="data_charts_right">
<p>
<span></span> 服务运营分析
</p>
<div :id="yy_asy" class="yy_asy"></div>
</div>
</div>
</div>
</div>
<!-- 超级管理员--数据分析 -->
<div class="case_box" v-if="now_user == 2">
<div class="data_asy" style="width:100%;">
<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="data_charts" style="width:100%;">
<div class="data_charts_left">
<p>
<span></span> 服务运营分析
</p>
<div :id="yy_asy" class="yy_asy"></div>
</div>
</div>
</div>
</div>
<!-- 普通用户/组织管理员--服务 -->
<div class="case_box">
<div class="data_asy" :style="now_user==0?{}:{width:'590px'}">
<p
style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
>
{{now_user == 0?'我的服务':'服务管理'}}
<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
v-for="(item,index) in service_arr[now_user]"
: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" v-if="now_user==0">
<img src="../assets/imgs/home_ic_release.png" alt />&nbsp; 服务注册
</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;">
我的应用
</div>
<div class="online_tool" :style="now_user==0?{}:{width:'590px'}">
<p
style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
>
{{now_user == 0?'我的应用':'平台应用'}}
<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
v-for="(item,index) in apptype_arr[now_user]"
: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">
<el-scrollbar class="myapp_contain" v-if="now_user == 0">
<div v-for="(item,index) in app_arr" :key="index+600" class="myapp_box">
<img :src="item.pic" alt="" style="width:60px;height:60px;">
<img :src="item.pic" alt style="width:60px;height:60px;" />
<p>{{item.name}}</p>
<p>{{item.version}}</p>
</div>
</el-scrollbar>
<div class="myapp_contain"></div>
</div>
</div>
</div>
<!-- 组织用户--数据分析 -->
</div>
</template>
......@@ -119,12 +214,24 @@ export default {
return {
person: "康先生",
login_time: "2020-03-12 10:21:22",
now_user: 0,//0：普通用户，1：组织管理员，2：超级管理员
now_type:0,
now_app:0,
manage_flag:false,
now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员
now_type: 0,
now_app: 0,
manage_flag: false,
health: uuidv1(),
yy_asy: uuidv1(),
fwyy: uuidv1(),
fw_options:[
{
value:0,
label:'服务总数',
},
{
value:1,
label:'应用总数',
},
],
fw_value:0,
menu_arr: [
[
{
......@@ -208,125 +315,140 @@ export default {
color: "#ea7d19",
num: "￥2,312"
}
]
],
],
online_tool_arr:[
online_tool_arr: [
{
text: "智能绘图",
pic: require("../assets/imgs/home_tool_ic_znht.png"),
bg: "#e5f4fe",
color: "#38aef9",
color: "#38aef9"
},
{
text: "数据开发",
pic: require("../assets/imgs/home_tool_ic_sjkf.png"),
bg: "#e6ebfe",
color: "#515fe7",
color: "#515fe7"
},
{
text: "模型工场",
pic: require("../assets/imgs/home_tool_ic_mxgc.png"),
bg: "#e6ebfe",
color: "#515fe7",
color: "#515fe7"
},
{
text: "流程设计",
pic: require("../assets/imgs/home_tool_ic_lcsj.png"),
bg: "#e6ebfe",
color: "#515fe7",
color: "#515fe7"
},
{
text: "可视化报表",
pic: require("../assets/imgs/home_tool_ic_kshbb.png"),
bg: "#fff2e2",
color: "#ea7d19",
color: "#ea7d19"
},
{
text: "模板应用",
pic: require("../assets/imgs/home_tool_ic_mbyy.png"),
bg: "#fff2e2",
color: "#ea7d19",
color: "#ea7d19"
},
{
text: "应用创新",
pic: require("../assets/imgs/home_tool_ic_yycx.png"),
bg: "#e7fdfc",
color: "#25bdb1",
},
color: "#25bdb1"
}
],
service_arr: [
["服务列表", "申请服务", "服务审批", "云资源"],
["服务列表", "服务审批", "云资源管理"],
],
service_arr:['服务列表','申请服务','服务审批','云资源'],
apptype_arr:['部署的应用','创新的应用'],
app_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',
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:[
manage_arr: [
{
pic:require('../assets/imgs/home_tool_ic_key.png'),
text:'我的密钥',
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_organize.png"),
text: "组织管理"
},
{
pic:require('../assets/imgs/home_tool_ic_quanxian.png'),
text:'权限管理',
pic: require("../assets/imgs/home_tool_ic_quanxian.png"),
text: "权限管理"
},
{
pic:require('../assets/imgs/home_tool_ic_quanxian.png'),
text:'容器管理',
pic: require("../assets/imgs/home_tool_ic_quanxian.png"),
text: "容器管理"
},
{
pic:require('../assets/imgs/home_tool_ic_quanxian.png'),
text:'数据管控',
pic: require("../assets/imgs/home_tool_ic_quanxian.png"),
text: "数据管控"
},
{
pic:require('../assets/imgs/home_tool_ic_quanxian.png'),
text:'消息新闻管理',
},
pic: require("../assets/imgs/home_tool_ic_quanxian.png"),
text: "消息新闻管理"
}
]
};
},
mounted() {
if(this.now_user == 0){
this.init_health(50);
this.init_yy()
this.init_yy();
}else if(this.now_user == 1){
this.init_health(50);
this.init_yy();
this.init_fwyy()
}else if(this.now_user == 2){
this.init_fwyy()
}
},
methods: {
manage_func(n){
manage_func(n) {
console.log(n);
},
init_health(num) {
......@@ -447,14 +569,14 @@ export default {
},
grid: {
top: "20",
bottom:'45',
bottom: "45"
},
legend: {
data: ["服务调用总数", "应用部署总数", "收益总额"],
bottom: 0,
itemWidth:10,
itemHeight:10,
backgroundColor:'#f4f7fc',
itemWidth: 10,
itemHeight: 10,
backgroundColor: "#f4f7fc"
},
xAxis: [
{
......@@ -462,13 +584,7 @@ export default {
axisTick: {
alignWithLabel: true
},
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
]
data: ["1月", "2月", "3月", "4月", "5月"]
}
],
yAxis: [
......@@ -500,16 +616,10 @@ export default {
name: "服务调用总数",
type: "bar",
yAxisIndex: 1,
data: [
2.0,
4.9,
7.0,
23.2,
25.6,
],
data: [2.0, 4.9, 7.0, 23.2, 25.6],
itemStyle: {
barBorderRadius: 6,
color:colors[2]
color: colors[2]
},
barWidth: 12
},
......@@ -517,16 +627,10 @@ export default {
name: "应用部署总数",
type: "bar",
yAxisIndex: 1,
data: [
2.6,
5.9,
9.0,
26.4,
28.7,
],
data: [2.6, 5.9, 9.0, 26.4, 28.7],
itemStyle: {
barBorderRadius: 6,
color:colors[0]
color: colors[0]
},
barWidth: 12
},
......@@ -534,22 +638,90 @@ export default {
name: "收益总额",
type: "line",
yAxisIndex: 0,
data: [
2.0,
2.2,
3.3,
4.5,
6.3,
],
data: [2.0, 2.2, 3.3, 4.5, 6.3],
itemStyle: {
color:colors[0]
color: colors[0]
},
symbol:'circle',
symbol: "circle"
}
]
};
window[this.yy_asy] = echarts.init(document.getElementById(this.yy_asy));
window[this.yy_asy].setOption(options, true);
},
init_fwyy() {
var dataname = ['服务总数','应用总数']
var options = {
tooltip: {
trigger: "axis",
axisPointer: {
label: {
backgroundColor: "#fff"
}
}
},
legend:{
data: [dataname[0]],
itemWidth: 14,
itemHeight: 10,
bottom:0
},
grid: {
borderColor: "#f2f2f2",
top:20,
bottom:45,
right:0,
},
xAxis: {
type: "category",
axisTick: { show: false },
axisLine: { show: false },
nameTextStyle: {
color: "#0d1847"
},
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value",
axisLine: {
show: false,
lineStyle: {
color: '#c9cedd'
}
},
axisTick: { show: false },
nameTextStyle: {
color: "#f2f2f2"
}
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
name:dataname[0],
smooth: true,
sampling: "average",
symbol: "circle",
itemStyle: {
color: "#0a92c4"
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#0a92c4"
},
{
offset: 1,
color: "#ffe"
}
])
}
}
]
};
window[this.fwyy] = echarts.init(document.getElementById(this.fwyy));
window[this.fwyy].setOption(options, true);
}
}
};
......@@ -557,9 +729,21 @@ export default {
<style>
.online_tool .el-scrollbar__wrap {
.online_tool .el-scrollbar__wrap {
overflow-x: hidden;
}
}
.data_charts_left .el-input__inner{
width: 100px;
height: 28px;
line-height: 28px;
font-size: 12px;
}
.data_charts_left .el-input__icon{
line-height: 28px;
}
.data_charts_left .el-select{
float: right;
}
</style>
<style scoped>
.person_info {
......@@ -598,11 +782,11 @@ export default {
margin-top: 10px;
position: relative;
}
.person_manage_pic{
.person_manage_pic {
display: inline-block;
width: 3px;
height: 13px;
background-image: url('../assets/imgs/home_ic_more_w.png');
background-image: url("../assets/imgs/home_ic_more_w.png");
}
.menu {
width: 100%;
......@@ -691,23 +875,27 @@ export default {
height: 200px;
margin: 20px 0 0 0px;
}
.online_tool{
.fwyy {
width: 420px;
height: 200px;
margin: 20px 0 0 0px;
}
.online_tool {
width: 460px;
float: right;
}
.online_contain{
.online_contain {
width: 460px;
height: 270px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
padding: 32px 20px;
overflow: hidden;
}
.online_box{
.online_box {
width: 126px;
height: 38px;;
height: 38px;
border-radius: 6px 19px 19px 19px;
line-height: 38px;
text-align: center;
......@@ -715,38 +903,38 @@ export default {
margin-right: 20px;
margin-bottom: 15px;
}
.online_contain .online_box:nth-child(3n){
.online_contain .online_box:nth-child(3n) {
margin-right: 0px;
}
.online_box img{
.online_box img {
vertical-align: -4px;
margin-right: 10px;
}
.myservice,.myapp{
width: 720px;
.myservice,
.myapp {
width: 100%;
height: 386px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
padding: 15px 20px;
}
.myapp{
width: 460px;
.myapp {
/* width: 460px; */
}
.myservice_title{
.myservice_title {
width: 100%;
height: 47px;
border-bottom: 2px solid #f4f7fc;
}
.myservice_type{
.myservice_type {
float: left;
margin-right: 40px;
height: calc(100% + 2px);
cursor: pointer;
color: #8890a7;
}
.myservice_btn{
.myservice_btn {
float: right;
width: 100px;
height: 32px;
......@@ -757,19 +945,19 @@ export default {
line-height: 32px;
cursor: pointer;
}
.myapp_contain{
.myapp_contain {
width: 420px;
height: 300px;
margin-top: 10px;
}
.myapp_box{
.myapp_box {
width: 120px;
height: 110px;
float: left;
margin: 10px 20px 40px 0px;
text-align: center;
}
.myapp_box p:nth-of-type(1){
.myapp_box p:nth-of-type(1) {
display: block;
overflow: hidden;
white-space: nowrap;
......@@ -778,11 +966,11 @@ export default {
margin-bottom: 5px;
color: #0d1847;
}
.myapp_box p:nth-of-type(2){
.myapp_box p:nth-of-type(2) {
font-size: 12px;
color: #8890a7;
}
.manage_menu{
.manage_menu {
position: absolute;
top: 0;
left: 100px;
......@@ -790,38 +978,36 @@ export default {
display: none;
padding-left: 40px;
}
.person_menu:hover .manage_menu{
.person_menu:hover .manage_menu {
display: block;
}
.person_menu:hover{
color:#0d1847;
background-color:#fff;
.person_menu:hover {
color: #0d1847;
background-color: #fff;
border: solid 2px #eef0f7;
line-height:28px;
line-height: 28px;
}
.person_menu:hover .person_manage_pic{
background-image: url('../assets/imgs/home_ic_more_b.png');
.person_menu:hover .person_manage_pic {
background-image: url("../assets/imgs/home_ic_more_b.png");
}
.manage_box{
.manage_box {
width: 145px;
height: 50px;
line-height: 50px;
background-color: #0d1847;
box-shadow: 0px 2px 4px 0px
#001155;
box-shadow: 0px 2px 4px 0px #001155;
border-radius: 12px;
margin-bottom: 10px;
text-align: left;
padding-left: 10px;
color: #c3caf8;
}
.manage_box:hover{
.manage_box:hover {
border: solid 2px #515fe7;
}
.manage_box img{
.manage_box img {
vertical-align: -5px;
margin-right: 10px;
}
</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