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