Skip to content

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

超管运行管控

parent 5f3abebc
Show whitespace changes
Inline Side-by-side
Showing with 307 additions and 62 deletions
src/components/apass-table.vue
View file @ b6925bb8
......@@ -132,9 +132,9 @@
:styles="item.prop == 'cpu' ? spCurveStyles2 : spCurveStyles3"
/>
</sparkline>
<span class="use" v-if="item.prop == 'cpu' && scope.row.cpu_use"
>{{ scope.row["cpu_use"] }}.00mm</span
>
<span class="use" v-if="item.prop == 'cpu' && scope.row.cpu_use">
{{ scope.row["cpu_use"] }}.00mm
</span>
<span
class="use"
:style="
......@@ -143,13 +143,15 @@
: { right: '25px', bottom: '8px' }
"
v-if="item.prop == 'cpu' && !scope.row.cpu_use"
>0mm</span
>
0mm
</span>
<span
class="use"
v-if="item.prop == 'mermoy' && scope.row.memory_use"
>{{ (scope.row["memory_use"]/1024/1024).toFixed(2)}}Mi</span
>
{{ (scope.row["memory_use"] / 1024 / 1024).toFixed(2) }}Mi
</span>
<span
class="use"
:style="
......@@ -208,6 +210,12 @@
:class="'index_' + scope.row.hotIndex"
v-text="'TOP' + scope.row.hotIndex"
></span>
<span
v-else-if="item.type === 'hot-index-2'"
class="hot_index"
:class="'index_' + scope.row.hotIndex"
v-text="scope.row.hotIndex + '.'"
></span>
<span class="sort_table" v-else-if="item.sortable">
<span>{{ getPercent(scope.row[item.prop]) }}</span>
<span>
......@@ -218,6 +226,16 @@
<img v-else :src="require('../assets/imgs/icon_down.png')" />
</span>
</span>
<span class="sort_table" v-else-if="item.sortIcon">
<span>{{ scope.row[item.prop] + "%" }}</span>
<span>
<img
v-if="scope.row[item.prop] > 0"
:src="require('../assets/imgs/icon_up.png')"
/>
<img v-else :src="require('../assets/imgs/icon_down.png')" />
</span>
</span>
<span
v-else-if="item.type === 'selected-icon'"
class="selected_icon"
......
src/components/e-charts/bar-chart-two.vue
View file @ b6925bb8
......@@ -36,12 +36,16 @@ export default {
type: Number,
default: 0,
},
xAxis_text_length: {
type: Number,
default: 0,
},
},
methods: {
bar() {
let _self = this;
let xAxis = (_self.data && _self.data.xAxis) || [];
let series = (_self.data && _self.data.series) || [{}, {}];
let self = this;
let xAxis = (self.data && self.data.xAxis) || [];
let series = (self.data && self.data.series) || [{}, {}];
return {
grid: {
......@@ -71,16 +75,22 @@ export default {
fontSize: 12,
},
interval: 0,
rotate: _self.x_router,
/* formatter: function(value) {
rotate: self.x_router,
formatter: function(value) {
let maxLen = self.xAxis_text_length;
if (maxLen > 1) {
let valueTxt = "";
if (value.length > 6) {
valueTxt = value.substring(0, 5) + "...";
if (value.length > maxLen) {
valueTxt = value.substring(0, maxLen - 1) + "...";
} else {
valueTxt = value;
}
return valueTxt;
}, */
} else {
return value;
}
},
},
axisLine: {
lineStyle: {
......@@ -132,7 +142,7 @@ export default {
{
type: "bar",
type: "bar",
barWidth: _self.bar_width,
barWidth: self.bar_width,
itemStyle: {
normal: {
color: function(params) {
......@@ -144,17 +154,17 @@ export default {
[
{
offset: 0,
color: _self.colors[0], // 0% 处的颜色
color: self.colors[0], // 0% 处的颜色
},
{
offset: 1,
color: _self.colors[0], // 100% 处的颜色
color: self.colors[0], // 100% 处的颜色
},
],
false
);
},
barBorderRadius: _self.bar_border_radius,
barBorderRadius: self.bar_border_radius,
},
},
name: series[0].name,
......@@ -163,7 +173,7 @@ export default {
{
type: "bar",
type: "bar",
barWidth: _self.bar_width,
barWidth: self.bar_width,
itemStyle: {
normal: {
color: function(params) {
......@@ -175,17 +185,17 @@ export default {
[
{
offset: 0,
color: _self.colors[1], // 0% 处的颜色
color: self.colors[1], // 0% 处的颜色
},
{
offset: 1,
color: _self.colors[1], // 100% 处的颜色
color: self.colors[1], // 100% 处的颜色
},
],
false
);
},
barBorderRadius: _self.bar_border_radius,
barBorderRadius: self.bar_border_radius,
},
},
name: series[1].name,
......
src/pages/authority/organization/organizationdetail.vue
View file @ b6925bb8
......@@ -317,9 +317,14 @@ export default {
color: #242c43;
}
.organtable {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
margin-top: 20px;
margin-bottom: 40px;
width: 100%;
height: calc(100% - 210px);
min-height: calc(100% - 250px);
background-color: #fff;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
......@@ -345,4 +350,10 @@ export default {
.organtable .elinput {
float: right;
}
.organtable .apass_table {
flex-grow: 1;
}
.organtable .comments_pagination {
margin-top: 20px;
}
</style>
src/pages/data-analysis/my-service.vue
View file @ b6925bb8
......@@ -814,8 +814,10 @@ export default {
<style>
.hot-search-table .el-table td,
.hot-search-table .el-table th {
.hot-search-table .el-table th,
.hot-search-table .el-table .row_action .btn {
padding: 6px 0;
font-size: 12px;
}
.hot-search-table .el-table div.row_action {
overflow: hidden;
......
src/pages/data-analysis/org-overview.vue
View file @ b6925bb8
......@@ -73,7 +73,10 @@
title="服务注册发布数量排名"
class="block"
>
<bar-charttwo :data="servRegRank"></bar-charttwo>
<bar-chart-two
:data="servRegRank"
:xAxis_text_length="5"
></bar-chart-two>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
......@@ -145,7 +148,7 @@
<script>
import BlockRadius from "@/components/general/block-radius";
import lineChart from "@/components/e-charts/line_chart";
import BarCharttwo from "@/components/e-charts/bar-chart-two";
import BarChartTwo from "@/components/e-charts/bar-chart-two";
import BarChart from "@/components/e-charts/bar-chart";
import Toplist from "@/components/e-charts/toplist";
import theList from "@/components/e-charts/the-list";
......@@ -154,7 +157,7 @@ export default {
components: {
BlockRadius,
lineChart,
BarCharttwo,
BarChartTwo,
BarChart,
Toplist,
theList,
......
src/pages/data-analysis/super-overview.vue
View file @ b6925bb8
......@@ -9,29 +9,26 @@
</el-breadcrumb-item>
</el-breadcrumb>
<el-row>
<el-col :span="6">
<el-col :span="7">
<el-row>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="组织用户概况"
title="平台组织概况"
class="block"
>
<div class="part">
<img src="../../assets/imgs/yxgk_ic_zuzhiyh.png" alt />
<div class="part_right_1">
<p class="right_txt_1">组织用户数</p>
<p class="right_txt_2" v-text="baseinfo.user_num || 0"></p>
<p class="right_txt_1">组织数量</p>
<p class="right_txt_2" v-text="baseinfo.org_num || 0"></p>
</div>
</div>
<div class="part">
<img src="../../assets/imgs/yxgk_ic_zaixianyh.png" alt />
<div class="part_right_1">
<p class="right_txt_1">在线用户数</p>
<p
class="right_txt_2"
v-text="baseinfo.online_user_num || 0"
></p>
<p class="right_txt_1">用户数量</p>
<p class="right_txt_2" v-text="baseinfo.user_num || 0"></p>
</div>
</div>
<div class="part">
......@@ -53,19 +50,24 @@
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="组织服务及应用数量变化趋势"
title="服务注册发布组织贡献榜"
class="block"
:buttons_arr="['周排名', '月排名']"
@changeButton="changeAction4"
>
<line-chart
class="block-radius-content"
:data="servVolumeTrend"
:zzfw="true"
></line-chart>
<div class="block-radius-content apaas_scroll">
<apass-table
class="hot-search-table"
:header="hotSeviceHeader"
:data="hotSeviceData"
:padding-left="0"
></apass-table>
</div>
</block-radius>
</el-col>
</el-row>
</el-col>
<el-col :span="12">
<el-col :span="10">
<el-row>
<el-col :span="24" class="in_block">
<block-radius
......@@ -73,7 +75,10 @@
title="服务注册发布数量排名"
class="block"
>
<bar-charttwo :data="servRegRank"></bar-charttwo>
<bar-chart-two
:data="servRegRank"
:xAxis_text_length="5"
></bar-chart-two>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
......@@ -94,7 +99,7 @@
</el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-col :span="7">
<el-row>
<el-col :span="24" class="in_block">
<block-radius
......@@ -118,7 +123,7 @@
title="应用被部署次数排名"
class="block"
:buttons_arr="['累计', '今日']"
@changeButton="changeActions"
@changeButton="changeAction2"
>
<the-list
:data="deployedNum"
......@@ -130,7 +135,40 @@
</el-col>
</el-row>
<el-row>
<el-col :span="24" class="in_block default">
<el-col :span="7" class="in_block">
<block-radius
:show_header="true"
title="应用构建组织贡献榜"
class="block"
:buttons_arr="['周排名', '月排名']"
@changeButton="changeAction5"
>
<div class="block-radius-content apaas_scroll">
<apass-table
class="hot-search-table"
:header="hotAppHeader"
:data="hotAppData"
:padding-left="0"
></apass-table>
</div>
</block-radius>
</el-col>
<el-col :span="10" class="in_block">
<block-radius
:show_header="true"
title="组织服务及应用数量变化趋势"
class="block"
:buttons_arr="['近14天', '近30天']"
@changeButton="changeAction3"
>
<line-chart
class="block-radius-content"
:data="servVolumeTrend"
:zzfw="true"
></line-chart>
</block-radius>
</el-col>
<el-col :span="7" class="in_block default">
<block-radius class="block">
<img
:src="require('@/assets/imgs/data_img_default.gif')"
......@@ -145,23 +183,25 @@
<script>
import BlockRadius from "@/components/general/block-radius";
import lineChart from "@/components/e-charts/line_chart";
import BarCharttwo from "@/components/e-charts/bar-chart-two";
import BarChartTwo from "@/components/e-charts/bar-chart-two";
import BarChart from "@/components/e-charts/bar-chart";
import Toplist from "@/components/e-charts/toplist";
import theList from "@/components/e-charts/the-list";
import ApassTable from "@/components/apass-table";
export default {
components: {
BlockRadius,
lineChart,
BarCharttwo,
BarChartTwo,
BarChart,
Toplist,
theList,
ApassTable,
},
data() {
return {
baseinfo: {}, // 组织用户概况
baseinfo: {}, // 平台组织概况
servRegRank: {}, // 服务注册发布数量排名
servVolumeTrend: {
xAxisData: [],
......@@ -173,6 +213,10 @@ export default {
}, // 组织服务及应用数量变化趋势
servRequestRank: [], // 应用构建数量排名
deployedNum: [], // 应用被部署次数排名
hotSeviceHeader: [], // 服务注册发布组织贡献榜 表头
hotSeviceData: [], // 服务注册发布组织贡献榜 数据
hotAppHeader: [], // 应用构建组织贡献榜 表头
hotAppData: [], // 应用构建组织贡献榜 数据
};
},
computed: {
......@@ -193,25 +237,27 @@ export default {
this.getServVolumeTrend();
this.getBuildNum();
this.getDeployedNum();
this.getHotSevice();
this.getHotApp();
},
getBaseInfo() {
this.$http
.get("/apaas/service/v3/control/org/baseinfo")
.get("/apaas/service/v3/control/super/baseinfo")
.then(({ data }) => {
if (data.success === 1) {
this.baseinfo = data.data;
} else {
this.$message.error(data.errMsg || "获取组织用户概况失败");
this.$message.error(data.errMsg || "获取平台组织概况失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("获取组织用户概况失败");
this.$message.error("获取平台组织概况失败");
});
}, // 获取 组织用户概况
}, // 获取 平台组织概况
getServRegRank() {
this.$http
.get("/apaas/service/v3/control/org/serv/reg/rank")
.get("/apaas/service/v3/control/super/serv/reg/rank")
.then(({ data }) => {
if (data.success === 1) {
this.servRegRank = data.data;
......@@ -226,7 +272,7 @@ export default {
}, // 获取 服务注册发布数量排名
getServRequestRank(tab = "all") {
this.$http
.get("/apaas/service/v3/control/org/serv/request/rank", {
.get("/apaas/service/v3/control/super/serv/request/rank", {
params: { tab },
})
.then(({ data }) => {
......@@ -241,10 +287,12 @@ export default {
this.$message.error("获取服务被调用次数排名失败");
});
}, // 获取 服务被调用次数排名
getServVolumeTrend() {
getServVolumeTrend(day = 14) {
Promise.all([
this.$http.get("/apaas/service/v3/control/org/serv/volume/trend"),
this.$http.get("/apaas/hubApi/operation/appNum?day=7"),
this.$http.get(
`/apaas/service/v3/control/super/serv/volume/trend?tab=day${day}`
),
this.$http.get(`/apaas/hubApi/operation/appNum?day=${day}`),
])
.then((response) => {
let datas = response.map((item) => item.data.data);
......@@ -293,6 +341,48 @@ export default {
this.$message.error("获取应用被部署次数排名失败");
});
}, // 获取 应用被部署次数排名
getHotSevice(tab = "week") {
this.$http
.get("/apaas/service/v3/control/super/serv/org/volume/rank", {
params: { tab },
})
.then(({ data }) => {
if (data.success === 1) {
this.hotSeviceData = data.data.map((item, index) => ({
...item,
hotIndex: index + 1,
}));
} else {
this.$message.error(
data.errMsg || "获取服务注册发布组织贡献榜失败"
);
}
})
.catch((error) => {
console.log(error);
this.$message.error("获取服务注册发布组织贡献榜失败");
});
}, // 服务注册发布组织贡献榜
getHotApp(style = 1) {
this.$http
.get("/apaas/hubApi/operation/appContribution", {
params: { style },
})
.then(({ data }) => {
if (data.success === 1) {
this.hotAppData = data.data.map((item, index) => ({
...item,
hotIndex: index + 1,
}));
} else {
this.$message.error(data.errMsg || "获取应用构建组织贡献榜失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("获取应用构建组织贡献榜失败");
});
}, // 应用构建组织贡献榜
changeAction1(val) {
if (val === 0) {
this.getServRequestRank("all");
......@@ -300,20 +390,116 @@ export default {
this.getServRequestRank("today");
}
}, // 切换 服务被调用次数排名
changeActions(val) {
changeAction2(val) {
if (val === 0) {
this.getDeployedNum(1);
} else {
this.getDeployedNum(2);
}
}, // 切换 应用被部署次数排名
changeAction3(val) {
if (val === 0) {
this.getServVolumeTrend(14);
} else {
this.getServVolumeTrend(30);
}
}, // 切换 组织服务及应用数量变化趋势
changeAction4(val) {
if (val === 0) {
this.getHotSevice("week");
} else {
this.getHotSevice("month");
}
}, // 切换 服务注册发布组织贡献榜
changeAction5(val) {
if (val === 0) {
this.getHotApp(1);
} else {
this.getHotApp(2);
}
}, // 切换 应用构建组织贡献榜
detailHotService(item) {
// console.log(item);
},
detailHotApp(item) {
// console.log(item);
},
},
created() {
this.hotSeviceHeader = [
{
label: "排名",
type: "hot-index-2",
width: 50,
align: "center",
},
{
label: "组织名称",
prop: "department_name",
type: "button",
callback: this.detailHotService,
},
{
label: "服务注册/发布数量",
prop: "serv_total",
width: 130,
align: "center",
},
{
label: "普通用户数量",
prop: "user_num",
width: 100,
align: "center",
},
{
label: "较前一周",
prop: "rate",
align: "center",
sortIcon: true,
},
];
this.hotAppHeader = [
{
label: "排名",
type: "hot-index-2",
width: 50,
align: "center",
},
{
label: "组织名称",
prop: "department_name",
type: "button",
callback: this.detailHotApp,
},
{
label: "应用构建数量",
prop: "last_app",
width: 130,
align: "center",
},
{
label: "普通用户数量",
prop: "user_count",
width: 100,
align: "center",
},
{
label: "较前一周",
prop: "compare_last",
align: "right",
sortIcon: true,
},
];
this.init();
},
};
</script>
<style scoped>
.apaas_scroll {
overflow: auto;
}
.in_block {
height: 280px;
padding: 10px;
......@@ -358,3 +544,18 @@ export default {
height: 230px;
}
</style>
<style>
.hot-search-table .el-table td,
.hot-search-table .el-table th,
.hot-search-table .el-table .row_action .btn {
padding: 6px 0;
font-size: 12px;
}
.hot-search-table .el-table div.row_action {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
}
</style>
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