Skip to content

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

完成超级管理员页面

parent 7c285411
Hide whitespace changes
Inline Side-by-side
Showing with 917 additions and 51 deletions
src/pages/workPlace.vue
View file @ ef6665bc
<template>
<div class="contain" >
<div class="contain">
<div class="person_info">
<div class="preson">
<div class="person_text">
......@@ -33,10 +33,12 @@
<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}"
:style="index == menu_arr[now_user].length - 1||now_user==1&&index==0||now_user==2&&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>
<span
v-if="index == menu_arr[now_user].length - 1||now_user==1&&index==0||now_user==2&&index==0"
>万</span>
</p>
</div>
</div>
......@@ -85,7 +87,6 @@
</div>
</div>
<!-- 组织用户--数据分析 -->
<div class="case_box" v-if="now_user == 1">
<div class="data_asy" style="width:100%;">
......@@ -94,7 +95,6 @@
>
数据资产看板
<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">
......@@ -106,13 +106,13 @@
<div class="data_charts_left" style="width:420px;margin-left:40px;">
<p>
<span></span> 服务应用总况
<el-select v-model="fw_value" placeholder="请选择">
<el-option
<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>
:value="item.value"
></el-option>
</el-select>
</p>
<div :id="fwyy" class="fwyy"></div>
......@@ -127,7 +127,6 @@
</div>
</div>
<!-- 超级管理员--数据分析 -->
<div class="case_box" v-if="now_user == 2">
<div class="data_asy" style="width:100%;">
......@@ -136,14 +135,25 @@
>
数据资产看板
<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">
<div class="data_charts_left" style="width:590px;">
<p>
<span></span> 服务运营分析
</p>
<div :id="yy_asy" class="yy_asy"></div>
<div :id="yy_asy" class="yy_asy" style="width:590px;"></div>
</div>
<div class="data_charts_left" style="width:285px;">
<p>
<span></span> 服务类型分析
</p>
<div :id="fwlx_asy" class="health" style="width:265px;"></div>
</div>
<div class="data_charts_left" style="width:285px;">
<p>
<span></span> 应用类型分析
</p>
<div :id="yylx_asy" class="health" style="width:265px;"></div>
</div>
</div>
</div>
......@@ -156,7 +166,11 @@
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 />
<img
style="vertical-align:-9px;"
src="../assets/imgs/home_btn_enter.png"
alt
/>
</p>
<div class="myservice">
<div class="myservice_title">
......@@ -171,6 +185,7 @@
<img src="../assets/imgs/home_ic_release.png" alt />&nbsp; 服务注册
</div>
</div>
<table-um :headers="service_head[now_user][now_type]" :url="service_url_arr[now_user][now_type]" :paginationShow="true"></table-um>
</div>
</div>
<div class="online_tool" :style="now_user==0?{}:{width:'590px'}">
......@@ -178,7 +193,11 @@
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 />
<img
style="vertical-align:-9px;"
src="../assets/imgs/home_btn_enter.png"
alt
/>
</p>
<div class="myapp">
<div class="myservice_title">
......@@ -197,17 +216,18 @@
<p>{{item.version}}</p>
</div>
</el-scrollbar>
<div class="myapp_contain"></div>
<table-um :headers="app_head[now_user][now_app]" :url="app_url_arr[now_user][now_app]" :paginationShow="true"></table-um>
</div>
</div>
</div>
</div>
</template>
<script>
import uuidv1 from "uuid/v1";
import tableUm from '../components/table-um'
var echarts = require("echarts");
export default {
data() {
......@@ -221,17 +241,471 @@ export default {
health: uuidv1(),
yy_asy: uuidv1(),
fwyy: uuidv1(),
fw_options:[
fwlx_asy: uuidv1(),
yylx_asy: uuidv1(),
fw_options: [
{
value:0,
label:'服务总数',
value: 0,
label: "服务总数"
},
{
value:1,
label:'应用总数',
},
value: 1,
label: "应用总数"
}
],
app_url_arr:[
[],
['creat_app','check_app'],
['creat_app','check_app'],
],
app_head:[
[],
[
[
{
prop:'yymc',
label:'应用名称',
width:'90px',
align:'left',
},
{
prop:'yylx',
label:'应用类型',
width:'120px',
align:'center',
},
{
prop:'yybb',
label:'应用版本',
width:'80px',
align:'center',
},
{
prop:'yycjsj',
label:'应用创建时间',
width:'160px',
align:'center',
},
{
prop:'yybscs',
label:'被部署次数',
width:'100px',
align:'center',
},
],
[
{
prop:'yymc',
label:'应用名称',
width:'90px',
align:'left',
},
{
prop:'yylx',
label:'应用类型',
width:'120px',
align:'center',
},
{
prop:'yybb',
label:'应用版本',
width:'80px',
align:'center',
},
{
prop:'yyspsj',
label:'应用审批时间',
width:'160px',
align:'center',
},
{
prop:'spzt',
label:'审批状态',
width:'100px',
align:'center',
},
],
],
[
[
{
prop:'yymc',
label:'应用名称',
width:'90px',
align:'left',
},
{
prop:'yylx',
label:'应用类型',
width:'120px',
align:'center',
},
{
prop:'yybb',
label:'应用版本',
width:'80px',
align:'center',
},
{
prop:'yycjsj',
label:'应用创建时间',
width:'160px',
align:'center',
},
{
prop:'yybscs',
label:'被部署次数',
width:'100px',
align:'center',
},
],
[
{
prop:'yymc',
label:'应用名称',
width:'90px',
align:'left',
},
{
prop:'yylx',
label:'应用类型',
width:'120px',
align:'center',
},
{
prop:'yybb',
label:'应用版本',
width:'80px',
align:'center',
},
{
prop:'yyspsj',
label:'应用审批时间',
width:'160px',
align:'center',
},
{
prop:'spzt',
label:'审批状态',
width:'100px',
align:'center',
},
],
],
],
service_url_arr:[
['nor_service_list','nor_apply_service','nor_service_sh','nor_cloud'],
['nor_service_list','nor_service_sh','nor_cloud'],
['nor_service_list','nor_service_sh','nor_cloud_manage'],
],
service_head:[
[
[
{
prop:'fwmc',
label:'服务名称',
width:'250px',
align:'left',
},
{
prop:'fwlx',
label:'服务类型',
width:'120px',
align:'center',
},
{
prop:'zcfbsj',
label:'注册发布时间',
width:'200px',
align:'center',
},
{
prop:'bdycs',
label:'被调用次数',
width:'110px',
align:'center',
},
],
[
{
prop:'fwmc',
label:'服务名称',
width:'250px',
align:'left',
},
{
prop:'fwlx',
label:'服务类型',
width:'120px',
align:'center',
},
{
prop:'sqsj',
label:'申请时间',
width:'200px',
align:'center',
},
{
prop:'sqspzt',
label:'申请审批状态',
width:'110px',
align:'center',
},
],
[
{
prop:'fwmc',
label:'服务名称',
width:'250px',
align:'left',
},
{
prop:'fwlx',
label:'服务类型',
width:'120px',
align:'center',
},
{
prop:'spsj',
label:'审批时间',
width:'200px',
align:'center',
},
{
prop:'spzt',
label:'审批状态',
width:'110px',
align:'center',
},
],
[
{
prop:'gzqy',
label:'工作区域',
width:'150px',
align:'left',
},
{
prop:'wlhj',
label:'网络环境',
width:'120px',
align:'center',
},
{
prop:'cpu',
label:'CPU(核)',
width:'90px',
align:'center',
},
{
prop:'ncgb',
label:'内存(GB)',
width:'90px',
align:'center',
},
{
prop:'zyzlgb',
label:'资源总量(GB)',
width:'120px',
align:'center',
},
{
prop:'sqzt',
label:'申请状态',
width:'110px',
align:'center',
},
],
],
[
[
{
prop:'fwmc',
label:'服务名称',
width:'140px',
align:'left',
},
{
prop:'fwlx',
label:'服务类型',
width:'120px',
align:'center',
},
{
prop:'zcfbsj',
label:'注册发布时间',
width:'180px',
align:'center',
},
{
prop:'bdycs',
label:'被调用次数',
width:'110px',
align:'center',
},
],
[
{
prop:'fwmc',
label:'服务名称',
width:'140px',
align:'left',
},
{
prop:'fwlx',
label:'服务类型',
width:'120px',
align:'center',
},
{
prop:'spsj',
label:'审批时间',
width:'180px',
align:'center',
},
{
prop:'spzt',
label:'审批状态',
width:'110px',
align:'center',
},
],
[
{
prop:'gzqy',
label:'工作区域',
width:'100px',
align:'left',
},
{
prop:'wlhj',
label:'网络环境',
width:'90px',
align:'center',
},
{
prop:'cpu',
label:'CPU(核)',
width:'80px',
align:'center',
},
{
prop:'ncgb',
label:'内存(GB)',
width:'80px',
align:'center',
},
{
prop:'zyzlgb',
label:'资源总量(GB)',
width:'110px',
align:'center',
},
{
prop:'sqzt',
label:'操作',
width:'110px',
align:'center',
type:'Button',
btnList:[
{
label:'分配',
type:1
},
{
label:'已分配',
type:1
},
]
},
],
],
[
[
{
prop:'fwmc',
label:'服务名称',
width:'140px',
align:'left',
},
{
prop:'fwlx',
label:'服务类型',
width:'120px',
align:'center',
},
{
prop:'zcfbsj',
label:'注册发布时间',
width:'180px',
align:'center',
},
{
prop:'bdycs',
label:'被调用次数',
width:'110px',
align:'center',
},
],
[
{
prop:'fwmc',
label:'服务名称',
width:'140px',
align:'left',
},
{
prop:'fwlx',
label:'服务类型',
width:'120px',
align:'center',
},
{
prop:'spsj',
label:'审批时间',
width:'180px',
align:'center',
},
{
prop:'spzt',
label:'审批状态',
width:'110px',
align:'center',
},
],
[
{
prop:'sszz',
label:'所属组织',
width:'170px',
align:'left',
},
{
prop:'cpu',
label:'CPU使用量(核)',
width:'120px',
align:'center',
},
{
prop:'ncgb',
label:'内存使用量(GB)',
width:'130px',
align:'center',
},
{
prop:'gzqysl',
label:'工作区域数量(个)',
width:'130px',
align:'center',
},
],
],
],
fw_value:0,
fw_value: 0,
menu_arr: [
[
{
......@@ -364,10 +838,12 @@ export default {
service_arr: [
["服务列表", "申请服务", "服务审批", "云资源"],
["服务列表", "服务审批", "云资源管理"],
["服务列表", "服务审批", "云资源管理"],
],
apptype_arr: [
["部署的应用", "创新的应用"],
["创新应用", "应用审批"],
["创新应用", "应用审批"],
],
app_arr: [
{
......@@ -434,17 +910,60 @@ export default {
]
};
},
components:{
tableUm
},
mounted() {
if(this.now_user == 0){
if (this.now_user == 0) {
this.init_health(50);
this.init_yy();
}else if(this.now_user == 1){
} 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();
} else if (this.now_user == 2) {
this.init_yy();
this.init_fwlx_asy(
[
{
name: "数据服务",
value: 10
},
{
name: "感知服务",
value: 10
},
{
name: "视频服务",
value: 10
},
{
name: "时空服务",
value: 10
},
{
name: "综合服务",
value: 10
}
]
);
this.init_yylx_asy(
[
{
name: "基础工具",
value: 10
},
{
name: "通信应用",
value: 10
},
{
name: "业务应用",
value: 10
}
]
);
}
},
methods: {
......@@ -555,6 +1074,132 @@ export default {
window[this.health] = echarts.init(document.getElementById(this.health));
window[this.health].setOption(options, true);
},
init_fwlx_asy(data){
var options = this.init_circle(data)
window[this.fwlx_asy] = echarts.init(
document.getElementById(this.fwlx_asy)
);
window[this.fwlx_asy].setOption(options, true);
},
init_yylx_asy(data){
var options = this.init_circle(data)
window[this.yylx_asy] = echarts.init(
document.getElementById(this.yylx_asy)
);
window[this.yylx_asy].setOption(options, true);
},
init_circle(data) {
var scaleData =data
var rich = {
white: {
color: "#ddd",
align: "center",
padding: [3, 0]
}
};
var placeHolderStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: "rgba(0, 0, 0, 0)",
borderColor: "rgba(0, 0, 0, 0)",
borderWidth: 0
}
};
var data = [];
var color = [
"#515fe7",
"#36a5ec",
"#da9f2a",
"#23b2a7",
"#d46002",
];
var legendarr = []
for (var i = 0; i < scaleData.length; i++) {
data.push(
{
value: scaleData[i].value,
name: scaleData[i].name,
itemStyle: {
normal: {
borderWidth: 5,
shadowBlur: 20,
borderColor: color[i],
shadowColor: color[i]
}
}
},
{
value: 2,
name: "",
itemStyle: placeHolderStyle
}
);
legendarr.push(scaleData[i].name)
}
var seriesObj = [
{
name: "",
type: "pie",
clockWise: false,
radius: [53, 57],
center: ['51%', '39%'],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: true,
position: "outside",
color: "#58617a",
formatter: function(params) {
var percent = 0;
var total = 0;
for (var i = 0; i < scaleData.length; i++) {
total += scaleData[i].value;
}
percent = ((params.value / total) * 100).toFixed(0);
if (params.name !== "") {
return params.name + "\n" + params.value + "个";
} else {
return "";
}
},
rich: rich
},
}
},
data: data
}
];
var options = {
color:color,
tooltip: {
show: false
},
legend: {
bottom: -5,
left: 'center',
itemWidth:10,
itemHeight:10,
orient:'horizontal',
data:legendarr,
backgroundColor: "#f4f7fc"
},
toolbox: {
show: false,
},
series: seriesObj
};
return options
},
init_yy() {
var colors = ["#e56600", "#c9cedd", "#515fe7"];
......@@ -650,7 +1295,7 @@ export default {
window[this.yy_asy].setOption(options, true);
},
init_fwyy() {
var dataname = ['服务总数','应用总数']
var dataname = ["服务总数", "应用总数"];
var options = {
tooltip: {
trigger: "axis",
......@@ -660,17 +1305,17 @@ export default {
}
}
},
legend:{
data: [dataname[0]],
itemWidth: 14,
itemHeight: 10,
bottom:0
legend: {
data: [dataname[0]],
itemWidth: 14,
itemHeight: 10,
bottom: 0
},
grid: {
borderColor: "#f2f2f2",
top:20,
bottom:45,
right:0,
top: 20,
bottom: 45,
right: 0
},
xAxis: {
type: "category",
......@@ -683,12 +1328,12 @@ export default {
},
yAxis: {
type: "value",
axisLine: {
axisLine: {
show: false,
lineStyle: {
color: '#c9cedd'
}
},
color: "#c9cedd"
}
},
axisTick: { show: false },
nameTextStyle: {
color: "#f2f2f2"
......@@ -698,7 +1343,7 @@ export default {
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
name:dataname[0],
name: dataname[0],
smooth: true,
sampling: "average",
symbol: "circle",
......@@ -732,21 +1377,21 @@ export default {
.online_tool .el-scrollbar__wrap {
overflow-x: hidden;
}
.data_charts_left .el-input__inner{
.data_charts_left .el-input__inner {
width: 100px;
height: 28px;
line-height: 28px;
font-size: 12px;
}
.data_charts_left .el-input__icon{
.data_charts_left .el-input__icon {
line-height: 28px;
}
.data_charts_left .el-select{
.data_charts_left .el-select {
float: right;
}
</style>
<style scoped>
.contain{
.contain {
width: 1200px;
margin: 0 auto;
margin-top: -157px;
......@@ -799,7 +1444,8 @@ export default {
margin-top: 20px;
}
.menu_box0,
.menu_box1 {
.menu_box1,
.menu_box2 {
float: left;
width: calc((100% - 60px) / 3);
margin-right: 30px;
......@@ -809,10 +1455,12 @@ export default {
border-radius: 12px 12px 12px 46px;
}
.menu_box0:nth-last-of-type(1),
.menu_box1:nth-last-of-type(1) {
.menu_box1:nth-last-of-type(1),
.menu_box2:nth-last-of-type(1) {
margin-right: 0px;
}
.menu_box1 {
.menu_box1,
.menu_box2 {
width: calc((100% - 60px) / 4);
margin-right: 20px;
}
......
static/data.json
View file @ ef6665bc
......@@ -66,6 +66,224 @@
"address": "上海市普陀区金沙江路 1516 弄"
}
],
"creat_app":[
{
"id": 1,
"yymc": "地市GDP基础数据",
"yylx": "基础数据服务",
"yybb": "V1.1.1",
"yycjsj": "2016-05-02 12:20:35",
"yybscs":12
}
],
"check_app":[
{
"id": 1,
"yymc": "地市GDP基础数据",
"yylx": "基础数据服务",
"yybb": "V1.1.1",
"yyspsj": "2016-05-02 12:20:35",
"spzt":12
}
],
"nor_service_list":[
{
"id": 1,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"zcfbsj": "2016-05-02 12:20:35",
"bdycs": "12"
},
{
"id": 2,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"zcfbsj": "2016-05-02",
"bdycs": "12"
},
{
"id": 3,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"zcfbsj": "2016-05-02",
"bdycs": "12"
},
{
"id": 4,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"zcfbsj": "2016-05-02",
"bdycs": "12"
},
{
"id": 5,
"fwmc": "贵州行政区划要素",
"fwlx": "基础数据服务",
"zcfbsj": "2016-05-02",
"bdycs": "12"
}
],
"nor_apply_service":[
{
"id": 1,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"sqsj": "2016-05-02",
"sqspzt": "审批通过"
},
{
"id": 1,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"sqsj": "2016-05-02",
"sqspzt": "审批通过"
},
{
"id": 1,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"sqsj": "2016-05-02",
"sqspzt": "审批通过"
},
{
"id": 1,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"sqsj": "2016-05-02",
"sqspzt": "审批通过"
},
{
"id": 1,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"sqsj": "2016-05-02",
"sqspzt": "待审批"
}
],
"nor_service_sh":[
{
"id": 1,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"spsj": "2016-05-02",
"spzt": "待审批"
},
{
"id": 1,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"spsj": "2016-05-02",
"spzt": "待审批"
},
{
"id": 1,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"spsj": "2016-05-02",
"spzt": "待审批"
},
{
"id": 1,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"spsj": "2016-05-02",
"spzt": "待审批"
},
{
"id": 1,
"fwmc": "地市GDP基础数据",
"fwlx": "基础数据服务",
"spsj": "2016-05-02",
"spzt": "待审批"
}
],
"nor_cloud":[
{
"id": 1,
"gzqy": "地市GDP基础数据",
"wlhj": "互联网",
"cpu": "2",
"ncgb": "12",
"zyzlgb": "1024",
"sqzt": "审批通过"
},
{
"id": 1,
"gzqy": "地市GDP基础数据",
"wlhj": "互联网",
"cpu": "2",
"ncgb": "12",
"zyzlgb": "1024",
"sqzt": "审批通过"
},
{
"id": 1,
"gzqy": "地市GDP基础数据",
"wlhj": "互联网",
"cpu": "2",
"ncgb": "12",
"zyzlgb": "1024",
"sqzt": "审批通过"
},
{
"id": 1,
"gzqy": "地市GDP基础数据",
"wlhj": "互联网",
"cpu": "2",
"ncgb": "12",
"zyzlgb": "1024",
"sqzt": "审批通过"
},
{
"id": 1,
"gzqy": "地市GDP基础数据",
"wlhj": "互联网",
"cpu": "2",
"ncgb": "12",
"zyzlgb": "1024",
"sqzt": "审批通过"
}
],
"nor_cloud_manage":[
{
"id": 1,
"sszz": "地市GDP基础",
"cpu": "2",
"ncgb": "12",
"gzqysl": "10"
},
{
"id": 1,
"sszz": "地市GDP基础",
"cpu": "2",
"ncgb": "12",
"gzqysl": "10"
},
{
"id": 1,
"sszz": "地市GDP基础",
"cpu": "2",
"ncgb": "12",
"gzqysl": "10"
},
{
"id": 1,
"sszz": "地市GDP基础",
"cpu": "2",
"ncgb": "12",
"gzqysl": "10"
},
{
"id": 1,
"sszz": "地市GDP基础",
"cpu": "2",
"ncgb": "12",
"gzqysl": "10"
}
],
"fwzc_fwcs": [
{
"id": 1,
......
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