Skip to content

A
apaas-ui
Commit b206b935 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

Merge branch 'dev' of cloud.wodcloud.com:apaas/apaas-v3-ui into dev

parents 54ad2078 f08b4095
Hide whitespace changes
Inline Side-by-side
Showing with 644 additions and 93 deletions
src/components/e-charts/bar-chart.vue
View file @ b206b935
...@@ -12,7 +12,6 @@ export default { ...@@ -12,7 +12,6 @@ export default {
return { return {
xaxis: [], xaxis: [],
data: [] data: []
}; };
} }
}, },
...@@ -37,14 +36,19 @@ export default { ...@@ -37,14 +36,19 @@ export default {
default: false default: false
} }
}, },
data: () => ({ data: () => ({}),
navList: []
}),
mounted() {}, mounted() {},
methods: { methods: {
bar() { bar() {
let self = this; let self = this;
return { return {
grid: {
left: 10,
right: 10,
bottom: 25,
top: 25,
containLabel: true
},
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
...@@ -57,7 +61,7 @@ export default { ...@@ -57,7 +61,7 @@ export default {
}, },
interval: 0, interval: 0,
rotate: 30, rotate: 30,
formatter: function(value) { formatter: function(value) {
let valueTxt = ""; let valueTxt = "";
if (value.length > 6) { if (value.length > 6) {
valueTxt = value.substring(0, 5) + "..."; valueTxt = value.substring(0, 5) + "...";
......
src/components/e-charts/dashboard.vue
View file @ b206b935
...@@ -24,9 +24,7 @@ export default { ...@@ -24,9 +24,7 @@ export default {
default: false default: false
} }
}, },
data: () => ({ data: () => ({}),
navList: []
}),
mounted() {}, mounted() {},
methods: { methods: {
dashboard() { dashboard() {
...@@ -162,6 +160,10 @@ export default { ...@@ -162,6 +160,10 @@ export default {
? self.data.data >= 80 ? self.data.data >= 80
? "#f7f1d5" ? "#f7f1d5"
: "#d5f7e8" : "#d5f7e8"
:self.dangerousValue == "workplace"
? self.data.data >= 80
? "#f7f1d5"
: "#e6ebfe"
: self.data.data > 75 : self.data.data > 75
? "#d5f7e8" ? "#d5f7e8"
: self.data.data > 50 : self.data.data > 50
...@@ -177,6 +179,10 @@ export default { ...@@ -177,6 +179,10 @@ export default {
? self.data.data >= 80 ? self.data.data >= 80
? "#da4251" // red ? "#da4251" // red
: "#00beb2" //green : "#00beb2" //green
:self.dangerousValue == "workplace"
? self.data.data >= 80
? "#da4251"
: "#515fe7"
: self.data.data > 75 : self.data.data > 75
? "#00beb2" //green ? "#00beb2" //green
: self.data.data > 50 : self.data.data > 50
......
src/components/e-charts/graph.vue 0 → 100644
View file @ b206b935
<template>
<chart :options="graph()" class="graph" />
</template>
<script>
import { graphic } from "echarts/lib/export";
export default {
props: {
data: {
type: Object,
default: () => {
return {
xaxis: [],
data: [],
legend: []
};
}
}
},
data: () => ({
navList: []
}),
mounted() {},
methods: {
graph() {
let self = this;
return {
color: ["#274fee", "#ef9433"],
legend: {
bottom: 0,
left: "center",
icon: "roundRect",
itemWidth: 10,
itemHeight: 10,
data: self.data.legend,
orient: "horizontal",
backgroundColor: "#f4f7fc"
},
grid: {
left: 10,
right: 10,
bottom: 25,
top: 25,
containLabel: true
},
xAxis: [
{
type: "category",
data: self.data.xaxis,
axisLine: {
lineStyle: {
color: "#f2f2f2"
}
},
axisLabel: {
margin: 20,
color: "#0d1847",
textStyle: {
fontSize: 12
},
interval: 0
},
boundaryGap: false
}
],
yAxis: [
{
type: "value",
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(0, 0, 0, 0)"
}
},
axisLabel: {
color: "#a9aec0",
textStyle: {
fontSize: 12
}
}
}
],
series: [
{
name: self.data.legend[0],
type: "line",
data: self.data.data[0],
symbolSize: 1,
symbol: "circle",
smooth: true,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 2,
color: "#274fee",
shadowColor: "rgb(39, 79, 238, 0.3)",
shadowBlur: 5,
shadowOffsetY: 8
}
},
{
name: self.data.legend[1],
type: "line",
data: self.data.data[1],
symbolSize: 1,
symbol: "circle",
smooth: true,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 2,
color: "#ef9433",
shadowColor: "rgb(239, 148, 51, 0.3)",
shadowBlur: 5,
shadowOffsetY: 8
}
}
]
};
}
}
};
</script>
<style scoped>
.graph {
width: 100%;
height: calc(100% - 20px);
}
</style>
\ No newline at end of file
src/pages/data-analysis/my-application.vue
View file @ b206b935
...@@ -4,18 +4,265 @@ ...@@ -4,18 +4,265 @@
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t("lang.myApplicationDataAnalysis") }}</el-breadcrumb-item> <el-breadcrumb-item>{{ $t("lang.myApplicationDataAnalysis") }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<el-row class="in_analysis">
<!-- 可横向铺满 -->
<el-col :span="6" class="in_left">
<el-row>
<el-col :span="24" class="in_block">
<block-radius :show_header="true" title="服务总体概况" class="block">
<div class="left_1">
<div ref="left_1_l" class="left_1_l">
<img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
<div class="left_1_title">服务总数</div>
<div class="left_1_num">2222</div>
</div>
<dashboard ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></dashboard>
</div>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="服务调用次数分析"
:buttons_arr="['近7天', '近30天']"
@changeButton="changeServiceCellBtn"
class="block"
>
<Graph :data="graph_arr" />
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="服务类型分析"
:buttons_arr="['发布的服务', '调用的服务']"
@changeButton="changeServiceTypeBtn"
class="block"
>
<multiple-circle :data="mult_data" :text="text"></multiple-circle>
</block-radius>
</el-col>
</el-row>
</el-col>
<el-col :span="12" class="in_center">
<el-row>
<el-col :span="24" class="in_block">
<block-radius class="block"></block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block"></block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block">
<line-chart :data="line_data"></line-chart>
</block-radius>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="in_right">
<el-row>
<el-col :span="24" class="in_block">
<block-radius class="block">
<toplist></toplist>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block">
<starlist></starlist>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block">
<single-circle :data="single_data"></single-circle>
</block-radius>
</el-col>
</el-row>
</el-col>
<!-- 不可横向铺满，一般为最后一行 -->
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="服务来源机构分析" class="block">
<BarChart :data="bar_data_org" :colors="['#e56600', '#e56600']" />
</block-radius>
</el-col>
<el-col :span="18" class="in_block default">
<block-radius class="block">
<img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
</block-radius>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script> <script>
import BlockRadius from "@/components/general/block-radius";
import Dashboard from "@/components/e-charts/dashboard";
import multipleCircle from "@/components/e-charts/multiple_circle";
import singleCircle from "@/components/e-charts/single_circle";
import lineChart from "@/components/e-charts/line_chart";
import Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist";
import BarChart from "@/components/e-charts/bar-chart";
import Graph from "@/components/e-charts/graph";
export default { export default {
components: {}, components: {
BlockRadius,
Dashboard,
multipleCircle,
singleCircle,
Toplist,
Starlist,
lineChart,
BarChart,
Graph
},
data: () => ({ data: () => ({
navList: [] navList: [],
mult_data: [
{ name: "基础工具", value: 40 },
{ name: "通用应用", value: 0 },
{ name: "业务应用", value: 2 }
],
text: "应用总数",
single_data: {
num: 12,
color: "#515fe7",
text: "共享"
},
line_data: {
xaxis: [
"01-01",
"01-02",
"01-03",
"01-04",
"01-05",
"01-06",
"01-07",
"01-08"
],
data: [
{
name: "开发者应用",
arr: [100, 120, 130, 150, 160, 120, 110, 100]
},
{
name: "平台应用",
arr: [120, 130, 140, 130, 140, 120, 100, 90]
},
{
name: "未上架",
arr: [80, 90, 100, 110, 100, 70, 80, 90]
}
]
},
das_data: {
data: 40,
text: "健康占比"
},
bar_data_org: {
xaxis: [
"01-01",
"01-02",
"01-03",
"01-04",
"01-05",
"01-06",
"01-07",
"01-08"
],
data: [100, 120, 130, 150, 160, 120, 110, 100]
},
graph_arr: {
xaxis: [
"01-01",
"01-02",
"01-03",
"01-04",
"01-05",
"01-06",
"01-07",
"01-08"
],
data: [
[1010, 120, 130, 520, 160, 1120, 110, 100],
[100, 1210, 130, 1530, 160, 120, 110, 1200]
],
legend: ["aaa1", "bbb1"]
}
}), }),
mounted() {}, mounted() {},
methods: {} methods: {
changeServiceTypeBtn(index) {
console.log(index);
},
changeApplicationFieldBtn(index) {
console.log(index);
},
changeServiceCellBtn(index) {
console.log(index);
}
}
}; };
</script> </script>
<style scoped> <style scoped>
.in_analysis {
padding: 0 10px 10px;
height: 100%;
width: 100%;
min-width: 1700px;
}
.in_l {
}
.in_r {
}
.in_c {
}
.in_block {
height: 280px;
padding: 10px;
}
.height_2x {
height: 560px;
}
.block {
width: 100%;
height: 100%;
}
.left_1 {
height: 100%;
display: flex;
justify-content: space-between;
}
.left_1_l {
width: 40%;
height: 100%;
display: inline-block;
padding: 20px 0 0 0;
}
.left_1_title {
width: 100%;
text-align: center;
}
.left_1_num {
font-size: 32px;
color: #515fe7;
width: 100%;
text-align: center;
}
.left_1_img {
width: 120px;
display: block;
margin: 0 auto;
}
.left_1_r {
width: 50%;
height: 100%;
display: inline-block;
}
.default {
text-align: center;
}
.default_img {
width: 330px;
height: 230px;
}
</style> </style>
\ No newline at end of file
src/pages/data-analysis/my-service.vue
View file @ b206b935
<template> <template>
<div> <div>
<el-breadcrumb separator="/" class="bread_crumb1"> <el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ <el-breadcrumb-item :to="{ path: '/data_analysis' }">
{{
$t("lang.dataAnalysis") $t("lang.dataAnalysis")
}}</el-breadcrumb-item> }}
<el-breadcrumb-item>{{ </el-breadcrumb-item>
<el-breadcrumb-item>
{{
$t("lang.myServiceDataAnalysis") $t("lang.myServiceDataAnalysis")
}}</el-breadcrumb-item> }}
</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<el-row class="in_analysis"> <el-row class="in_analysis">
<!-- 可横向铺满 --> <!-- 可横向铺满 -->
<el-col :span="6" class="in_left"> <el-col :span="6" class="in_left">
<el-row> <el-row>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius <block-radius :show_header="true" title="服务总体概况" class="block">
:show_header="true"
title="服务总体概况"
class="block"
>
<div class="left_1"> <div class="left_1">
<div ref="left_1_l" class="left_1_l"> <div ref="left_1_l" class="left_1_l">
<img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" /> <img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
...@@ -118,7 +118,15 @@ ...@@ -118,7 +118,15 @@
</block-radius> </block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius class="block"></block-radius> <block-radius
:show_header="true"
title="服务调用次数分析"
:buttons_arr="['近7天', '近30天']"
@changeButton="changeServiceCellBtn"
class="block"
>
<Graph :data="graph_arr" />
</block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius class="block"> <block-radius class="block">
...@@ -138,11 +146,7 @@ ...@@ -138,11 +146,7 @@
class="block-radius-content" class="block-radius-content"
:data="commentlistData" :data="commentlistData"
></commentlist> ></commentlist>
<starlist <starlist v-else class="block-radius-content" :options="starlistData"></starlist>
v-else
class="block-radius-content"
:options="starlistData"
></starlist>
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -155,10 +159,7 @@ ...@@ -155,10 +159,7 @@
</el-col> </el-col>
<el-col :span="18" class="in_block default"> <el-col :span="18" class="in_block default">
<block-radius class="block"> <block-radius class="block">
<img <img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
:src="require('@/assets/imgs/data_img_default.gif')"
class="default_img"
/>
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -176,6 +177,7 @@ import Starlist from "@/components/e-charts/starlist"; ...@@ -176,6 +177,7 @@ import Starlist from "@/components/e-charts/starlist";
import commentlist from "@/components/e-charts/commentlist"; import commentlist from "@/components/e-charts/commentlist";
import BarChart from "@/components/e-charts/bar-chart"; import BarChart from "@/components/e-charts/bar-chart";
import ApassTable from "@/components/apass-table"; import ApassTable from "@/components/apass-table";
import Graph from "@/components/e-charts/graph";
export default { export default {
components: { components: {
BlockRadius, BlockRadius,
...@@ -188,19 +190,20 @@ export default { ...@@ -188,19 +190,20 @@ export default {
lineChart, lineChart,
BarChart, BarChart,
ApassTable, ApassTable,
Graph
}, },
data: () => ({ data: () => ({
navList: [], navList: [],
mult_data: [ mult_data: [
{ name: "基础工具", value: 40 }, { name: "基础工具", value: 40 },
{ name: "通用应用", value: 0 }, { name: "通用应用", value: 0 },
{ name: "业务应用", value: 2 }, { name: "业务应用", value: 2 }
], ],
text: "应用总数", text: "应用总数",
single_data: { single_data: {
num: 12, num: 12,
color: "#515fe7", color: "#515fe7",
text: "共享", text: "共享"
}, },
line_data: { line_data: {
xaxis: [ xaxis: [
...@@ -211,22 +214,22 @@ export default { ...@@ -211,22 +214,22 @@ export default {
"01-05", "01-05",
"01-06", "01-06",
"01-07", "01-07",
"01-08", "01-08"
], ],
data: [ data: [
{ {
name: "开发者应用", name: "开发者应用",
arr: [100, 120, 130, 150, 160, 120, 110, 100], arr: [100, 120, 130, 150, 160, 120, 110, 100]
}, },
{ {
name: "平台应用", name: "平台应用",
arr: [120, 130, 140, 130, 140, 120, 100, 90], arr: [120, 130, 140, 130, 140, 120, 100, 90]
}, },
{ {
name: "未上架", name: "未上架",
arr: [80, 90, 100, 110, 100, 70, 80, 90], arr: [80, 90, 100, 110, 100, 70, 80, 90]
}, }
], ]
}, },
das_data: { das_data: {
data: 40, data: 40,
...@@ -241,7 +244,7 @@ export default { ...@@ -241,7 +244,7 @@ export default {
"01-05", "01-05",
"01-06", "01-06",
"01-07", "01-07",
"01-08", "01-08"
], ],
data: [100, 120, 130, 150, 160, 120, 110, 100], data: [100, 120, 130, 150, 160, 120, 110, 100],
}, },
...@@ -264,36 +267,36 @@ export default { ...@@ -264,36 +267,36 @@ export default {
value: 2031, value: 2031,
logo: logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次", unit: "次"
}, },
{ {
name: "数据服务", name: "数据服务",
value: 2201, value: 2201,
logo: logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次", unit: "次"
}, },
{ {
name: "消息队列服务", name: "消息队列服务",
value: 1901, value: 1901,
logo: logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次", unit: "次"
}, },
{ {
name: "档案中心服务", name: "档案中心服务",
value: 1400, value: 1400,
logo: logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次", unit: "次"
}, },
{ {
name: "哈哈服务", name: "哈哈服务",
value: 1280, value: 1280,
logo: logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次", unit: "次"
}, }
], // 服务调用排名分析 ], // 服务调用排名分析
toplistTargetValue: 2400, // 服务调用排名分析 目标值 toplistTargetValue: 2400, // 服务调用排名分析 目标值
serveiceInfoBtnIndex: 0, serveiceInfoBtnIndex: 0,
...@@ -306,7 +309,7 @@ export default { ...@@ -306,7 +309,7 @@ export default {
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob", "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 5, score: 5,
service_id: 128, service_id: 128,
user_name: "普通用户lxy", user_name: "普通用户lxy"
}, },
{ {
add_time: "2020-07-14T16:35:40Z", add_time: "2020-07-14T16:35:40Z",
...@@ -316,7 +319,7 @@ export default { ...@@ -316,7 +319,7 @@ export default {
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob", "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 4, score: 4,
service_id: 128, service_id: 128,
user_name: "普通用户lxy", user_name: "普通用户lxy"
}, },
{ {
add_time: "2020-07-14T16:35:40Z", add_time: "2020-07-14T16:35:40Z",
...@@ -326,7 +329,7 @@ export default { ...@@ -326,7 +329,7 @@ export default {
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob", "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 3, score: 3,
service_id: 128, service_id: 128,
user_name: "普通用户lxy", user_name: "普通用户lxy"
}, },
{ {
add_time: "2020-07-14T16:35:40Z", add_time: "2020-07-14T16:35:40Z",
...@@ -336,35 +339,35 @@ export default { ...@@ -336,35 +339,35 @@ export default {
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob", "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 2, score: 2,
service_id: 128, service_id: 128,
user_name: "普通用户lxy", user_name: "普通用户lxy"
}, }
], // 服务评价 ], // 服务评价
starlistData: [ starlistData: [
{ {
star: 5, star: 5,
count: 5, count: 5,
unit: "个", unit: "个"
}, },
{ {
star: 4, star: 4,
count: 4, count: 4,
unit: "个", unit: "个"
}, },
{ {
star: 3, star: 3,
count: 3, count: 3,
unit: "个", unit: "个"
}, },
{ {
star: 2, star: 2,
count: 10002, count: 10002,
unit: "个", unit: "个"
}, },
{ {
star: 1, star: 1,
count: 1, count: 1,
unit: "个", unit: "个"
}, }
], // 服务评分 ], // 服务评分
hotSearchHeader: [], // 热门搜索 表头 hotSearchHeader: [], // 热门搜索 表头
hotSearchData: [ hotSearchData: [
...@@ -399,6 +402,23 @@ export default { ...@@ -399,6 +402,23 @@ export default {
increases: -0.58, increases: -0.58,
}, },
], // 热门搜索 数据 ], // 热门搜索 数据
graph_arr: {
xaxis: [
"01-01",
"01-02",
"01-03",
"01-04",
"01-05",
"01-06",
"01-07",
"01-08"
],
data: [
[1010, 120, 130, 520, 160, 1120, 110, 100],
[100, 1210, 130, 1530, 160, 120, 110, 1200]
],
legend: ["aaa1", "bbb1"]
}
}), }),
mounted() { mounted() {
this.hotSearchHeader = [ this.hotSearchHeader = [
...@@ -451,7 +471,10 @@ export default { ...@@ -451,7 +471,10 @@ export default {
console.log(index); console.log(index);
}, // 服务评价及评分 }, // 服务评价及评分
}, changeServiceCellBtn(index) {
console.log(index);
}
}
}; };
</script> </script>
<style scoped> <style scoped>
......
src/pages/workbench/workPlace.vue
View file @ b206b935
...@@ -61,35 +61,58 @@ ...@@ -61,35 +61,58 @@
<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>
<div class="data_charts"> <div class="data_charts">
<div class="data_charts_left" style="width:100%;"> <div class="charts_box" :style="now_chart==0?'':{marginLeft:'-720px'}">
<p> <div class="data_charts_left" style="width:calc(50% - 40px);">
<span></span> <p class="cloud_asy">
服务健康状态 <span></span>
<el-select style="float:right;" v-model="fw_value" placeholder="请选择"> 云资源概况分析
<el-option <el-select style="float:right;margin-top:-5px;" @change="get_resource" v-model="work_value" placeholder="请选择">
v-for="item in fw_options" <el-option
:key="item.value" v-for="item in work_options"
:label="item.label" :key="item.id"
:value="item.value" :label="item.workplace"
></el-option> :value="item.id"
</el-select> ></el-option>
</p> </el-select>
<!-- 仪表盘 --> </p>
<div class="health" style="width:calc(100% - 40px)"> <!-- 仪表盘 -->
<div style="width:25%;float:left;height:180px;"> <div class="health" style="width:calc(100%);margin-top:20px;">
<dash-board></dash-board> <div style="width:142px;float:left;height:180px;margin-right:30px;">
</div> <dash-board :data="cpu_data" dangerousValue='workplace' style="height:140px;"></dash-board>
<div style="width:25%;float:left;height:180px;"> <p><span>物理总量</span><span>{{cpu_data.all}}核</span></p>
<dash-board></dash-board> <p><span>剩余量</span><span>{{cpu_data.remaining}}核</span></p>
</div> </div>
<div style="width:25%;float:left;height:180px;"> <div style="width:142px;float:left;height:180px;margin-right:30px;">
<dash-board></dash-board> <dash-board :data="memory_data" dangerousValue='workplace' style="height:140px;"></dash-board>
</div> <p><span>物理总量</span><span>{{memory_data.all}}GB</span></p>
<div style="width:25%;float:left;height:180px;"> <p><span>剩余量</span><span>{{memory_data.remaining}}GB</span></p>
<dash-board></dash-board> </div>
<div style="width:142px;float:left;height:180px;margin-right:30px;">
<dash-board :data="pan_data" dangerousValue='workplace' style="height:140px;"></dash-board>
<p><span>物理总量</span><span>{{pan_data.all}}GB</span></p>
<p><span>剩余量</span><span v-if="pan_data.remaining!==-1">{{pan_data.remaining}}GB</span><span v-if="pan_data.remaining==-1">未知</span></p>
</div>
<div style="width:142px;float:left;height:180px;">
<dash-board :data="pod_data" dangerousValue='workplace' style="height:140px;"></dash-board>
<p><span>物理总量</span><span>{{pod_data.all}}</span></p>
<p><span>剩余量</span><span>{{pod_data.remaining}}</span></p>
</div>
</div> </div>
</div> </div>
<div class="data_charts_left" style="margin-left:40px;">
<p><span></span> 服务健康状态</p>
<div :id="health" class="health"></div>
</div>
<div class="data_charts_right">
<p><span></span> 服务运营分析</p>
<div :id="yy_asy" class="yy_asy"></div>
</div>
<div class="check_charts">
<div @click="now_chart=0" class="check_charts_btn" :style="now_chart==0?{backgroundColor:'#a9aec0'}:''"></div>
<div @click="now_chart=1" class="check_charts_btn" :style="now_chart==1?{backgroundColor:'#a9aec0'}:''"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="online_tool"> <div class="online_tool">
...@@ -161,6 +184,7 @@ ...@@ -161,6 +184,7 @@
</p> </p>
<div :id="yy_asy" class="yy_asy"></div> <div :id="yy_asy" class="yy_asy"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -347,6 +371,23 @@ export default { ...@@ -347,6 +371,23 @@ export default {
fwyy: uuidv1(), fwyy: uuidv1(),
fwlx_asy: uuidv1(), fwlx_asy: uuidv1(),
yylx_asy: uuidv1(), yylx_asy: uuidv1(),
now_chart:0,
cpu_data:{
data: 0,
text: "CPU已使用"
},
memory_data:{
data: 0,
text: "内存已使用"
},
pan_data:{
data: 0,
text: "数据盘已使用"
},
pod_data:{
data: 0,
text: "容器组已使用"
},
fw_options: [ fw_options: [
{ {
value: 0, value: 0,
...@@ -357,6 +398,8 @@ export default { ...@@ -357,6 +398,8 @@ export default {
label: "应用总数" label: "应用总数"
} }
], ],
work_options:[],
work_value:'',
app_url_arr: [ app_url_arr: [
["/apaas/hubApi/market/list", "/apaas/hubApi/market/deployList"], ["/apaas/hubApi/market/list", "/apaas/hubApi/market/deployList"],
["/apaas/hubApi/market/list", "/apaas/hubApi/market/applyList"], ["/apaas/hubApi/market/list", "/apaas/hubApi/market/applyList"],
...@@ -1166,7 +1209,8 @@ export default { ...@@ -1166,7 +1209,8 @@ export default {
this.getUserData(); this.getUserData();
if (this.now_user == 0 || this.now_user == 4) { if (this.now_user == 0 || this.now_user == 4) {
this.getHealth(); this.getHealth();
// this.getoperatingdata(); this.getoperatingdata();
this.get_work_place()
} else if (this.now_user == 1) { } else if (this.now_user == 1) {
this.getHealth(); this.getHealth();
this.getoperatingdata(); this.getoperatingdata();
...@@ -1177,6 +1221,49 @@ export default { ...@@ -1177,6 +1221,49 @@ export default {
this.getyylxdata(); this.getyylxdata();
} }
}, },
get_work_place(){
this.$http
.get("/apaas/service/v3/workplace/statistics/resource/workplace")
.then(response => {
if(response.data.success){
this.work_options=response.data.data
this.work_value=response.data.data[0].id
this.get_resource()
}
})
},
get_resource(){
this.$http
.get("/apaas/service/v3/workplace/statistics/resource/basic?work_id="+this.work_value)
.then(response => {
if(response.data.success){
this.cpu_data={
data: parseInt(response.data.data.cpu.used/response.data.data.cpu.total*100),
text: "CPU已使用",
all:response.data.data.cpu.total,
remaining:response.data.data.cpu.total-response.data.data.cpu.used
}
this.memory_data={
data: parseInt(response.data.data.memory.used/response.data.data.memory.total*100),
text: "内存已使用",
all:response.data.data.memory.total,
remaining:response.data.data.memory.total-response.data.data.memory.used
}
this.pan_data={
data: response.data.data.disk.used==-1?0:parseInt(response.data.data.disk.used/response.data.data.disk.total*100),
text: "数据盘已使用",
all:response.data.data.disk.total,
remaining:response.data.data.disk.used==-1?-1:response.data.data.disk.total-response.data.data.disk.used
}
this.pod_data={
data: parseInt(response.data.data.container.used/response.data.data.container.total*100),
text: "容器组已使用",
all:response.data.data.container.total,
remaining:response.data.data.container.total-response.data.data.container.used
}
}
})
},
getCurrentUser() { getCurrentUser() {
this.$api.user.getNowUser().then(({ data }) => { this.$api.user.getNowUser().then(({ data }) => {
if (data.success == 1) { if (data.success == 1) {
...@@ -1723,6 +1810,12 @@ export default { ...@@ -1723,6 +1810,12 @@ export default {
line-height: 28px; line-height: 28px;
font-size: 12px; font-size: 12px;
} }
.data_charts_left .cloud_asy .el-input__inner {
width: 150px;
height: 28px;
line-height: 28px;
font-size: 12px;
}
.data_charts_left .el-input__icon { .data_charts_left .el-input__icon {
line-height: 28px; line-height: 28px;
} }
...@@ -1834,6 +1927,26 @@ export default { ...@@ -1834,6 +1927,26 @@ export default {
box-shadow: 0px 3px 6px 0px #f4f7fc; box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
overflow: hidden;
position: relative;
}
.check_charts{
position: absolute;
bottom: 15px;
left: 50%;
width: 50px;
margin-left: -25px;
}
.check_charts_btn{
width: 20px;
height: 5px;
background-color: #e3e5ef;
border-radius: 3px;
cursor: pointer;
float: left;
}
.check_charts .check_charts_btn:nth-of-type(1){
margin-right: 10px;
} }
.data_charts_left { .data_charts_left {
height: 100%; height: 100%;
...@@ -1862,12 +1975,31 @@ export default { ...@@ -1862,12 +1975,31 @@ export default {
.health { .health {
width: 200px; width: 200px;
height: 200px; height: 200px;
margin: 20px 0 0 20px; margin: 10px 0 0 0px;
}
.health p{
width: 130px;
padding-left: 10px;
}
.health p:nth-of-type(1){
margin-top: -15px;
}
.health p span{
display: inline;
background-color: #fff;
width: auto;
height: auto;
font-size: 14px;
color: #8890a7;
}
.health p span:nth-of-type(2){
float: right;
color: #0d1847;
} }
.yy_asy { .yy_asy {
width: 400px; width: 400px;
height: 200px; height: 200px;
margin: 20px 0 0 0px; margin: 0px 0 0 0px;
} }
.fwyy { .fwyy {
width: 420px; width: 420px;
...@@ -2024,4 +2156,8 @@ export default { ...@@ -2024,4 +2156,8 @@ export default {
vertical-align: -5px; vertical-align: -5px;
margin-right: 10px; margin-right: 10px;
} }
.charts_box{
width: 1440px;
transition: all 0.2s;
}
</style> </style>
src/pages/workbench/yygl/app_debugger.vue
View file @ b206b935
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div class="search_header"> <div class="search_header">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="工作区域"> <el-form-item label="工作区域">
<el-select v-model="formInline.area" placeholder="工作区域"> <el-select v-model="formInline.area" @change="get_app_list(false)" placeholder="工作区域">
<el-option :label="item.text" :value="item.value" v-for="(item,index) in area_arr" :key="index+7800"></el-option> <el-option :label="item.text" :value="item.value" v-for="(item,index) in area_arr" :key="index+7800"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -108,12 +108,12 @@ export default { ...@@ -108,12 +108,12 @@ export default {
}, },
created() { created() {
console.log(json,yaml); console.log(json,yaml);
this.get_namespace_list()
this.get_app_list()
this.formInline={ this.formInline={
area:this.$route.query.namespace, area:this.$route.query.namespace,
name:this.$route.query.app name:this.$route.query.app
} }
this.get_namespace_list()
this.get_app_list()
this.get_list_pod() this.get_list_pod()
}, },
mounted() { mounted() {
...@@ -216,9 +216,12 @@ export default { ...@@ -216,9 +216,12 @@ export default {
} }
}) })
}, },
get_app_list(){ get_app_list(flag=true){
if(!flag){
this.$set(this.formInline,'name','')
}
this.$http this.$http
.get(`/apaas/hubApi/cloud/podApps/${this.$route.query.namespace}`) .get(`/apaas/hubApi/cloud/podApps/${this.formInline.area}`)
.then(response => { .then(response => {
if(response.data.success){ if(response.data.success){
this.app_arr = response.data.data this.app_arr = response.data.data
......
src/pages/workbench/yygl/deploy_app_detail.vue
View file @ b206b935
...@@ -566,6 +566,7 @@ export default { ...@@ -566,6 +566,7 @@ export default {
}, },
watch: {}, watch: {},
created() { created() {
console.log(this.$route);
if (this.userInfo) { if (this.userInfo) {
this.now_user = this.level; this.now_user = this.level;
} else { } else {
...@@ -679,7 +680,7 @@ export default { ...@@ -679,7 +680,7 @@ export default {
console.log(val); console.log(val);
}, },
debuggerfunc(){ debuggerfunc(){
this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/appdebugger?namespace=${this.header_data.namespace}&app=${this.header_data.deploy_name}`) this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/appdebugger/${this.$route.params.deploy_id}?namespace=${this.header_data.namespace}&app=${this.header_data.deploy_name}`)
}, },
get_app_generl(){ get_app_generl(){
this.$http this.$http
......
src/router/index.js
View file @ b206b935
...@@ -113,7 +113,7 @@ export default new Router({ ...@@ -113,7 +113,7 @@ export default new Router({
import("@/pages/workbench/yygl/deploy_app_detail"), import("@/pages/workbench/yygl/deploy_app_detail"),
}, },
{ {
path: "/yygl/:level/:type/appdebugger", // 我部署的应用详情-应用调试 path: "/yygl/:level/:type/appdebugger/:deploy_id", // 我部署的应用详情-应用调试
name: "app_debugger", name: "app_debugger",
component: () => component: () =>
import("@/pages/workbench/yygl/app_debugger"), import("@/pages/workbench/yygl/app_debugger"),
......
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