Skip to content

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

组织运行概况调试

parent 88ee1399
Show 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 {
default: () => {
return {
legendData: [],
seriesData: []
seriesData: [],
};
}
},
},
bar_width: {
type: Number,
default: 12
default: 12,
},
colors: {
type: Array,
default: () => {
return ["#274fee", "#274fee"];
}
},
},
bar_border_radius: {
type: Array,
default: () => {
return [10, 10, 10, 10];
}
},
},
show_split: {
type: Boolean,
default: false
default: false,
},
x_router: {
type: Number,
default: 0
}
default: 0,
},
xAxis_text_length: {
type: Number,
default: 0,
},
},
data: () => ({}),
mounted() {},
methods: {
bar() {
let self = this;
return {
tooltip: {
trigger: "axis",
......@@ -55,14 +60,14 @@ export default {
htmlStr += params[i].value;
}
return htmlStr;
}
},
},
grid: {
left: 10,
right: 10,
bottom: 25,
top: 25,
containLabel: true
containLabel: true,
},
xAxis: [
{
......@@ -72,65 +77,71 @@ export default {
margin: 20,
color: "#0d1847",
textStyle: {
fontSize: 12
fontSize: 12,
},
interval: 0,
rotate: self.x_router,
/* formatter: function(value) {
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: {
color: "#f2f2f2"
}
color: "#f2f2f2",
},
},
axisTick: {
show: false
show: false,
},
splitArea: {
show: true,
areaStyle: {
color: ["#fff", "#f8f9fd"],
opacity: 0.5
opacity: 0.5,
},
interval: 0
interval: 0,
},
axisPointer: {
type: "shadow",
},
}
},
],
yAxis: [
{
axisLabel: {
color: "#a9aec0",
textStyle: {
fontSize: 12
}
fontSize: 12,
},
},
minInterval: 1,
axisLine: {
lineStyle: {
color: "rgba(0, 0, 0, 0)"
}
color: "rgba(0, 0, 0, 0)",
},
},
axisTick: {
show: false
show: false,
},
splitLine: {
lineStyle: {
color: "#f2f2f2",
type: "solid"
}
}
}
type: "solid",
},
},
},
],
series: [
{
......@@ -148,24 +159,24 @@ export default {
[
{
offset: 0,
color: self.colors[0] // 0% 处的颜色
color: self.colors[0], // 0% 处的颜色
},
{
offset: 1,
color: self.colors[1] // 100% 处的颜色
}
color: self.colors[1], // 100% 处的颜色
},
],
false
);
},
barBorderRadius: self.bar_border_radius
}
}
}
]
barBorderRadius: self.bar_border_radius,
},
},
},
],
};
}
}
},
},
};
</script>
<style scoped>
......
src/components/e-charts/commentlist.vue
View file @ 32d3c922
<template>
<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">
<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 class="comment-right">
<p class="comment-base">
<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>
<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>
<div class="commnet-rate">
<el-rate
......@@ -30,8 +44,16 @@ export default {
props: {
data: {
type: Array,
required: true
}
required: true,
},
},
watch: {
data: {
handler() {
this.autoScroll();
},
deep: true,
},
},
methods: {
getTimeText(time) {
......@@ -48,11 +70,17 @@ export default {
let itemHeight = 77;
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;
}
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);
},
mouseenter() {
......@@ -62,7 +90,7 @@ export default {
},
mouseleave() {
this.autoScroll();
}
},
},
mounted() {
this.autoScroll();
......@@ -74,7 +102,7 @@ export default {
if (this.timer) {
clearInterval(this.timer);
}
}
},
};
</script>
......
src/components/e-charts/the-list.vue
View file @ 32d3c922
......@@ -14,12 +14,12 @@
>
{{ idx + 1 }}.
</span>
<img :src="item.img" />
<img :src="item.PicturePath || require('../../assets/imgs/img_head.png')" />
<p class="text_clip">
<span class="name">{{ item.name }}</span><br>
<span class="init">{{ item.init }}</span>
<span class="name">{{ item.UserName }}</span><br>
<span class="init">{{ item.SystemName }}</span>
</p>
<span class="count">{{ getCount(item.count) }}次</span>
<span class="count">{{ getCount(item.Count) }}次</span>
</li>
</ul>
</div>
......@@ -35,8 +35,13 @@ export default {
},
},
},
data() {
return {};
watch: {
data: {
handler() {
this.autoScroll();
},
deep: true,
},
},
methods: {
getCount(val) {
......
src/components/e-charts/toplist.vue
View file @ 32d3c922
<template>
<div class="top_list apaas_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave">
<div
class="top_list apaas_scroll"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
>
<ul>
<li class="item_list" v-for="(option, index) in options" :key="index">
<div class="item_index">
<span v-text="'TOP' + (index + 1)"></span>
</div>
<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 class="item_detail">
<p class="item_info">
......@@ -20,7 +29,13 @@
</span>
<span v-else>{{ option.service_name }}</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>
</p>
<el-progress
......@@ -41,31 +56,34 @@ export default {
props: {
options: {
type: Array,
default: () => []
default: () => [],
},
targetValue: {
type: Number,
default: () => 0
default: () => 0,
},
isShowjt:{
type:Boolean,
default:true
isShowjt: {
type: Boolean,
default: true,
},
isPercent: {
type: Boolean,
default: false,
},
isPercent:{
type:Boolean,
default:false
}
},
data() {
return {
timer: null,
helper
helper,
};
},
watch: {
text() {
options: {
handler() {
this.autoScroll();
}
},
deep: true,
},
},
methods: {
getPercent(value) {
......@@ -85,10 +103,16 @@ export default {
this.timer = setInterval(() => {
let itemHeight = 50;
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;
}
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);
},
mouseenter() {
......@@ -116,11 +140,11 @@ export default {
default:
this.$message({
message: "查看详情失败",
type: "warning"
type: "warning",
});
break;
}
}
},
},
mounted() {
this.autoScroll();
......@@ -132,7 +156,7 @@ export default {
if (this.timer) {
clearInterval(this.timer);
}
}
},
};
</script>
......
src/pages/data-analysis/operation-overview.vue
View file @ 32d3c922
......@@ -53,12 +53,12 @@
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="服务状态统计"
title="组织服务及应用数量变化趋势"
class="block"
>
<line-chart
class="block-radius-content"
:data="line_data"
:data="servVolumeTrend"
:zzfw="true"
></line-chart>
</block-radius>
......@@ -83,11 +83,12 @@
title="应用构建数量排名"
>
<BarChart
:data="bar_data_area"
:data="buildNum"
:colors="['#1034eb', '#4274f8']"
:bar_border_radius="[20, 20, 0, 0]"
:bar_width="26"
:show_split="true"
:xAxis_text_length="5"
/>
</block-radius>
</el-col>
......@@ -106,7 +107,7 @@
<toplist
class="block-radius-content"
:options="servRequestRank"
:target-value="1000"
:target-value="servRequestRankMax"
:isShowjt="false"
></toplist>
</block-radius>
......@@ -119,7 +120,10 @@
:buttons_arr="['累计', '今日']"
@changeButton="changeActions"
>
<the-list :data="bsData" class="block-radius-content"></the-list>
<the-list
:data="deployedNum"
class="block-radius-content"
></the-list>
</block-radius>
</el-col>
</el-row>
......@@ -157,90 +161,38 @@ export default {
},
data() {
return {
baseinfo: {},
servRegRank: {},
line_data: {
xAxisData: [
"08-01",
"08-02",
"08-03",
"08-04",
"08-05",
"08-06",
"08-07",
],
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",
baseinfo: {}, // 组织用户概况
servRegRank: {}, // 服务注册发布数量排名
servVolumeTrend: {
xAxisData: [],
seriesData: [],
}, // 服务被调用次数排名
buildNum: {
legendData: [],
seriesData: [],
}, // 组织服务及应用数量变化趋势
servRequestRank: [], // 应用构建数量排名
deployedNum: [], // 应用被部署次数排名
};
},
{
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: {
init() {
this.getBaseInfo();
this.getServRegRank();
this.getServRequestRank();
this.getServVolumeTrend();
this.getBuildNum();
this.getDeployedNum();
},
getBaseInfo() {
this.$http
......@@ -253,10 +205,10 @@ export default {
}
})
.catch((error) => {
console.log("error");
console.log(error);
this.$message.error("获取组织用户概况失败");
});
},
}, // 获取 组织用户概况
getServRegRank() {
this.$http
.get("/apaas/service/v3/control/org/serv/reg/rank")
......@@ -268,10 +220,10 @@ export default {
}
})
.catch((error) => {
console.log("error");
console.log(error);
this.$message.error("获取服务注册发布数量排名失败");
});
},
}, // 获取 服务注册发布数量排名
getServRequestRank(tab = "all") {
this.$http
.get("/apaas/service/v3/control/org/serv/request/rank", {
......@@ -285,96 +237,76 @@ export default {
}
})
.catch((error) => {
console.log("error");
console.log(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) {
if (val === 0) {
this.getServRequestRank("all");
} else {
this.getServRequestRank("today");
}
},
}, // 切换 服务被调用次数排名
changeActions(val) {
if (val === 0) {
this.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",
},
];
this.getDeployedNum(1);
} else {
this.bsData = [
{
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",
},
];
this.getDeployedNum(2);
}
},
}, // 切换 应用被部署次数排名
},
created() {
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