Skip to content

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

组织运行概况调试

parent 88ee1399
Hide whitespace changes
Inline Side-by-side
Showing with 245 additions and 245 deletions
src/components/e-charts/bar-chart.vue
View file @ 32d3c922
...@@ -11,40 +11,45 @@ export default { ...@@ -11,40 +11,45 @@ export default {
default: () => { default: () => {
return { return {
legendData: [], legendData: [],
seriesData: [] seriesData: [],
}; };
} },
}, },
bar_width: { bar_width: {
type: Number, type: Number,
default: 12 default: 12,
}, },
colors: { colors: {
type: Array, type: Array,
default: () => { default: () => {
return ["#274fee", "#274fee"]; return ["#274fee", "#274fee"];
} },
}, },
bar_border_radius: { bar_border_radius: {
type: Array, type: Array,
default: () => { default: () => {
return [10, 10, 10, 10]; return [10, 10, 10, 10];
} },
}, },
show_split: { show_split: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
x_router: { x_router: {
type: Number, type: Number,
default: 0 default: 0,
} },
xAxis_text_length: {
type: Number,
default: 0,
},
}, },
data: () => ({}), data: () => ({}),
mounted() {}, mounted() {},
methods: { methods: {
bar() { bar() {
let self = this; let self = this;
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -55,14 +60,14 @@ export default { ...@@ -55,14 +60,14 @@ export default {
htmlStr += params[i].value; htmlStr += params[i].value;
} }
return htmlStr; return htmlStr;
} },
}, },
grid: { grid: {
left: 10, left: 10,
right: 10, right: 10,
bottom: 25, bottom: 25,
top: 25, top: 25,
containLabel: true containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
...@@ -72,65 +77,71 @@ export default { ...@@ -72,65 +77,71 @@ export default {
margin: 20, margin: 20,
color: "#0d1847", color: "#0d1847",
textStyle: { textStyle: {
fontSize: 12 fontSize: 12,
}, },
interval: 0, interval: 0,
rotate: self.x_router, rotate: self.x_router,
/* formatter: function(value) { formatter: function(value) {
let valueTxt = ""; let maxLen = self.xAxis_text_length;
if (value.length > 6) {
valueTxt = value.substring(0, 5) + "..."; if (maxLen > 1) {
let valueTxt = "";
if (value.length > maxLen) {
valueTxt = value.substring(0, maxLen - 1) + "...";
} else {
valueTxt = value;
}
return valueTxt;
} else { } else {
valueTxt = value; return value;
} }
return valueTxt; },
} */
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#f2f2f2" color: "#f2f2f2",
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
splitArea: { splitArea: {
show: true, show: true,
areaStyle: { areaStyle: {
color: ["#fff", "#f8f9fd"], color: ["#fff", "#f8f9fd"],
opacity: 0.5 opacity: 0.5,
}, },
interval: 0 interval: 0,
}, },
axisPointer: { axisPointer: {
type: "shadow", type: "shadow",
}, },
} },
], ],
yAxis: [ yAxis: [
{ {
axisLabel: { axisLabel: {
color: "#a9aec0", color: "#a9aec0",
textStyle: { textStyle: {
fontSize: 12 fontSize: 12,
} },
}, },
minInterval: 1, minInterval: 1,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(0, 0, 0, 0)" color: "rgba(0, 0, 0, 0)",
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#f2f2f2", color: "#f2f2f2",
type: "solid" type: "solid",
} },
} },
} },
], ],
series: [ series: [
{ {
...@@ -148,24 +159,24 @@ export default { ...@@ -148,24 +159,24 @@ export default {
[ [
{ {
offset: 0, offset: 0,
color: self.colors[0] // 0% 处的颜色 color: self.colors[0], // 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,
} },
} },
} },
] ],
}; };
} },
} },
}; };
</script> </script>
<style scoped> <style scoped>
...@@ -173,4 +184,4 @@ export default { ...@@ -173,4 +184,4 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
\ No newline at end of file
src/components/e-charts/commentlist.vue
View file @ 32d3c922
<template> <template>
<ul class="comments_list apaas_scroll"> <ul class="comments_list apaas_scroll">
<li class="comment_card" v-for="(item, index) in data" :key="'comment_' + index"> <li
class="comment_card"
v-for="(item, index) in data"
:key="'comment_' + index"
>
<div class="comment-left"> <div class="comment-left">
<el-avatar :size="45" fit="cover" :src="item.picture_path || require('../../assets/imgs/img_head.png')" /> <el-avatar
:size="45"
fit="cover"
:src="item.picture_path || require('../../assets/imgs/img_head.png')"
/>
</div> </div>
<div class="comment-right"> <div class="comment-right">
<p class="comment-base"> <p class="comment-base">
<span class="comment-user_name text_clip" v-text="item.user_name"></span> <span
<span class="comment-time text_clip" v-text="getTimeText(item.add_time || '')"></span> class="comment-user_name text_clip"
v-text="item.user_name"
></span>
<span
class="comment-time text_clip"
v-text="getTimeText(item.add_time || '')"
></span>
</p> </p>
<div class="commnet-rate"> <div class="commnet-rate">
<el-rate <el-rate
...@@ -30,8 +44,16 @@ export default { ...@@ -30,8 +44,16 @@ export default {
props: { props: {
data: { data: {
type: Array, type: Array,
required: true required: true,
} },
},
watch: {
data: {
handler() {
this.autoScroll();
},
deep: true,
},
}, },
methods: { methods: {
getTimeText(time) { getTimeText(time) {
...@@ -48,11 +70,17 @@ export default { ...@@ -48,11 +70,17 @@ export default {
let itemHeight = 77; let itemHeight = 77;
let curScrollTop = this.$el.scrollTop + itemHeight; let curScrollTop = this.$el.scrollTop + itemHeight;
if (curScrollTop >= this.$el.scrollHeight - this.$el.clientHeight + itemHeight) { if (
curScrollTop >=
this.$el.scrollHeight - this.$el.clientHeight + itemHeight
) {
curScrollTop = 0; curScrollTop = 0;
} }
this.$el.scrollTop = Math.min(curScrollTop, this.$el.scrollHeight - this.$el.clientHeight); this.$el.scrollTop = Math.min(
curScrollTop,
this.$el.scrollHeight - this.$el.clientHeight
);
}, 1500); }, 1500);
}, },
mouseenter() { mouseenter() {
...@@ -62,7 +90,7 @@ export default { ...@@ -62,7 +90,7 @@ export default {
}, },
mouseleave() { mouseleave() {
this.autoScroll(); this.autoScroll();
} },
}, },
mounted() { mounted() {
this.autoScroll(); this.autoScroll();
...@@ -74,7 +102,7 @@ export default { ...@@ -74,7 +102,7 @@ export default {
if (this.timer) { if (this.timer) {
clearInterval(this.timer); clearInterval(this.timer);
} }
} },
}; };
</script> </script>
......
src/components/e-charts/the-list.vue
View file @ 32d3c922
...@@ -14,12 +14,12 @@ ...@@ -14,12 +14,12 @@
> >
{{ idx + 1 }}. {{ idx + 1 }}.
</span> </span>
<img :src="item.img" /> <img :src="item.PicturePath || require('../../assets/imgs/img_head.png')" />
<p class="text_clip"> <p class="text_clip">
<span class="name">{{ item.name }}</span><br> <span class="name">{{ item.UserName }}</span><br>
<span class="init">{{ item.init }}</span> <span class="init">{{ item.SystemName }}</span>
</p> </p>
<span class="count">{{ getCount(item.count) }}次</span> <span class="count">{{ getCount(item.Count) }}次</span>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -35,8 +35,13 @@ export default { ...@@ -35,8 +35,13 @@ export default {
}, },
}, },
}, },
data() { watch: {
return {}; data: {
handler() {
this.autoScroll();
},
deep: true,
},
}, },
methods: { methods: {
getCount(val) { getCount(val) {
......
src/components/e-charts/toplist.vue
View file @ 32d3c922
<template> <template>
<div class="top_list apaas_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave"> <div
class="top_list apaas_scroll"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
>
<ul> <ul>
<li class="item_list" v-for="(option, index) in options" :key="index"> <li class="item_list" v-for="(option, index) in options" :key="index">
<div class="item_index"> <div class="item_index">
<span v-text="'TOP' + (index + 1)"></span> <span v-text="'TOP' + (index + 1)"></span>
</div> </div>
<div class="item_logo"> <div class="item_logo">
<el-avatar shape="square" :size="28" fit="cover" :src="option.cover" /> <el-avatar
shape="square"
:size="28"
fit="cover"
:src="option.cover"
/>
</div> </div>
<div class="item_detail"> <div class="item_detail">
<p class="item_info"> <p class="item_info">
...@@ -20,7 +29,13 @@ ...@@ -20,7 +29,13 @@
</span> </span>
<span v-else>{{ option.service_name }}</span> <span v-else>{{ option.service_name }}</span>
<span <span
v-text="isPercent?((option.request_count/targetValue)*100).toFixed(2)+'%':helper.numberFormat(option.request_count, 2) + (option.request_count > 10000 ? '万次' : '次')" v-text="
isPercent
? ((option.request_count / targetValue) * 100).toFixed(2) +
'%'
: helper.numberFormat(option.request_count, 2) +
(option.request_count > 10000 ? '万次' : '次')
"
></span> ></span>
</p> </p>
<el-progress <el-progress
...@@ -41,31 +56,34 @@ export default { ...@@ -41,31 +56,34 @@ export default {
props: { props: {
options: { options: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
targetValue: { targetValue: {
type: Number, type: Number,
default: () => 0 default: () => 0,
}, },
isShowjt:{ isShowjt: {
type:Boolean, type: Boolean,
default:true default: true,
},
isPercent: {
type: Boolean,
default: false,
}, },
isPercent:{
type:Boolean,
default:false
}
}, },
data() { data() {
return { return {
timer: null, timer: null,
helper helper,
}; };
}, },
watch: { watch: {
text() { options: {
this.autoScroll(); handler() {
} this.autoScroll();
},
deep: true,
},
}, },
methods: { methods: {
getPercent(value) { getPercent(value) {
...@@ -85,10 +103,16 @@ export default { ...@@ -85,10 +103,16 @@ export default {
this.timer = setInterval(() => { this.timer = setInterval(() => {
let itemHeight = 50; let itemHeight = 50;
let curScrollTop = this.$el.scrollTop + itemHeight; let curScrollTop = this.$el.scrollTop + itemHeight;
if (curScrollTop >= this.$el.scrollHeight - this.$el.clientHeight + itemHeight) { if (
curScrollTop >=
this.$el.scrollHeight - this.$el.clientHeight + itemHeight
) {
curScrollTop = 0; curScrollTop = 0;
} }
this.$el.scrollTop = Math.min(curScrollTop, this.$el.scrollHeight - this.$el.clientHeight); this.$el.scrollTop = Math.min(
curScrollTop,
this.$el.scrollHeight - this.$el.clientHeight
);
}, 1500); }, 1500);
}, },
mouseenter() { mouseenter() {
...@@ -116,11 +140,11 @@ export default { ...@@ -116,11 +140,11 @@ export default {
default: default:
this.$message({ this.$message({
message: "查看详情失败", message: "查看详情失败",
type: "warning" type: "warning",
}); });
break; break;
} }
} },
}, },
mounted() { mounted() {
this.autoScroll(); this.autoScroll();
...@@ -132,7 +156,7 @@ export default { ...@@ -132,7 +156,7 @@ export default {
if (this.timer) { if (this.timer) {
clearInterval(this.timer); clearInterval(this.timer);
} }
} },
}; };
</script> </script>
......
src/pages/data-analysis/operation-overview.vue
View file @ 32d3c922
...@@ -53,12 +53,12 @@ ...@@ -53,12 +53,12 @@
<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"
> >
<line-chart <line-chart
class="block-radius-content" class="block-radius-content"
:data="line_data" :data="servVolumeTrend"
:zzfw="true" :zzfw="true"
></line-chart> ></line-chart>
</block-radius> </block-radius>
...@@ -83,11 +83,12 @@ ...@@ -83,11 +83,12 @@
title="应用构建数量排名" title="应用构建数量排名"
> >
<BarChart <BarChart
:data="bar_data_area" :data="buildNum"
:colors="['#1034eb', '#4274f8']" :colors="['#1034eb', '#4274f8']"
:bar_border_radius="[20, 20, 0, 0]" :bar_border_radius="[20, 20, 0, 0]"
:bar_width="26" :bar_width="26"
:show_split="true" :show_split="true"
:xAxis_text_length="5"
/> />
</block-radius> </block-radius>
</el-col> </el-col>
...@@ -106,7 +107,7 @@ ...@@ -106,7 +107,7 @@
<toplist <toplist
class="block-radius-content" class="block-radius-content"
:options="servRequestRank" :options="servRequestRank"
:target-value="1000" :target-value="servRequestRankMax"
:isShowjt="false" :isShowjt="false"
></toplist> ></toplist>
</block-radius> </block-radius>
...@@ -119,7 +120,10 @@ ...@@ -119,7 +120,10 @@
:buttons_arr="['累计', '今日']" :buttons_arr="['累计', '今日']"
@changeButton="changeActions" @changeButton="changeActions"
> >
<the-list :data="bsData" class="block-radius-content"></the-list> <the-list
:data="deployedNum"
class="block-radius-content"
></the-list>
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -157,90 +161,38 @@ export default { ...@@ -157,90 +161,38 @@ export default {
}, },
data() { data() {
return { return {
baseinfo: {}, baseinfo: {}, // 组织用户概况
servRegRank: {}, servRegRank: {}, // 服务注册发布数量排名
line_data: { servVolumeTrend: {
xAxisData: [ xAxisData: [],
"08-01", seriesData: [],
"08-02", }, // 服务被调用次数排名
"08-03", buildNum: {
"08-04", legendData: [],
"08-05", seriesData: [],
"08-06", }, // 组织服务及应用数量变化趋势
"08-07", servRequestRank: [], // 应用构建数量排名
], deployedNum: [], // 应用被部署次数排名
seriesData: [
{
name: "服务数量",
data: [300, 400, 350, 280, 480, 520, 500, 460],
},
{
name: "应用数量",
data: [300, 350, 400, 280, 320, 450, 400, 350],
},
],
},
bar_data_area: {
legendData: [
"全程执法精细123",
"智能执法场所123",
"大数智能应用222",
"刑事案件智能1111",
],
seriesData: [50, 63, 48, 58],
},
servRequestRank: [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 300,
},
],
bsData: [
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 120,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 100,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 90,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 80,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 60,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
],
}; };
}, },
computed: {
servRequestRankMax() {
return (
(this.servRequestRank &&
this.servRequestRank[0] &&
this.servRequestRank[0].request_count) ||
100
);
},
},
methods: { methods: {
init() { init() {
this.getBaseInfo(); this.getBaseInfo();
this.getServRegRank(); this.getServRegRank();
this.getServRequestRank(); this.getServRequestRank();
this.getServVolumeTrend();
this.getBuildNum();
this.getDeployedNum();
}, },
getBaseInfo() { getBaseInfo() {
this.$http this.$http
...@@ -253,10 +205,10 @@ export default { ...@@ -253,10 +205,10 @@ export default {
} }
}) })
.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/org/serv/reg/rank")
...@@ -268,10 +220,10 @@ export default { ...@@ -268,10 +220,10 @@ export default {
} }
}) })
.catch((error) => { .catch((error) => {
console.log("error"); console.log(error);
this.$message.error("获取服务注册发布数量排名失败"); this.$message.error("获取服务注册发布数量排名失败");
}); });
}, }, // 获取 服务注册发布数量排名
getServRequestRank(tab = "all") { getServRequestRank(tab = "all") {
this.$http this.$http
.get("/apaas/service/v3/control/org/serv/request/rank", { .get("/apaas/service/v3/control/org/serv/request/rank", {
...@@ -285,96 +237,76 @@ export default { ...@@ -285,96 +237,76 @@ export default {
} }
}) })
.catch((error) => { .catch((error) => {
console.log("error"); console.log(error);
this.$message.error("获取服务被调用次数排名失败"); this.$message.error("获取服务被调用次数排名失败");
}); });
}, }, // 获取 服务被调用次数排名
getServVolumeTrend() {
Promise.all([
this.$http.get("/apaas/service/v3/control/org/serv/volume/trend"),
this.$http.get("/apaas/hubApi/operation/appNum?day=7"),
])
.then((response) => {
let datas = response.map((item) => item.data.data);
this.servVolumeTrend = {
xAxisData: datas[1].data,
seriesData: datas[0].series.concat(datas[1].series),
};
})
.catch((error) => {
this.$message.error("获取组织服务及应用数量变化趋势失败");
});
}, // 获取 组织服务及应用数量变化趋势
getBuildNum() {
this.$http
.get("/apaas/hubApi/operation/buildNum")
.then(({ data }) => {
if (data.success === 1) {
this.buildNum = {
legendData: data.data.xAxis.data,
seriesData: data.data.series[0].data,
};
} else {
this.$message.error(data.errMsg || "获取应用构建数量排名失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("获取应用构建数量排名失败");
});
}, // 获取 应用构建数量排名
getDeployedNum(style = 1) {
this.$http
.get("/apaas/hubApi/operation/deployedNum", {
params: { style },
})
.then(({ data }) => {
if (data.success === 1) {
this.deployedNum = data.data;
} 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");
} else { } else {
this.getServRequestRank("today"); this.getServRequestRank("today");
} }
}, }, // 切换 服务被调用次数排名
changeActions(val) { changeActions(val) {
if (val === 0) { if (val === 0) {
this.bsData = [ this.getDeployedNum(1);
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 120,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 100,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 90,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 80,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 60,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
];
} else { } else {
this.bsData = [ this.getDeployedNum(2);
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 12,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 10,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 9,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 8,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
{
name: "警综平台",
init: "贵州省公安厅警务综合系统",
count: 6,
img:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
},
];
} }
}, }, // 切换 应用被部署次数排名
}, },
created() { created() {
this.init(); this.init();
......
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