Skip to content

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

运行管控调试

parent 47dfc3d7
Show whitespace changes
Inline Side-by-side
Showing with 170 additions and 312 deletions
src/components/e-charts/bar-chartTwo.vue → src/components/e-charts/bar-chart-two.vue
View file @ 88ee1399
......@@ -7,73 +7,72 @@ import { graphic } from "echarts/lib/export";
export default {
props: {
data: {
type: Array,
type: Object,
default: () => {
return [];
}
return null;
},
},
bar_width: {
type: Number,
default: 12
default: 12,
},
colors: {
type: Array,
default: () => {
return ["#515fe7", "#e56600"];
}
},
},
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,
},
},
data: () => ({}),
mounted() {},
methods: {
bar() {
let self = this;
let _self = this;
let xAxis = (_self.data && _self.data.xAxis) || [];
let series = (_self.data && _self.data.series) || [{}, {}];
return {
grid: {
left: 10,
right: 10,
bottom: 25,
top: 25,
containLabel: true
containLabel: true,
},
legend: {
left: "right",
itemWidth: 10,
itemHeight: 10,
orient: "horizontal",
backgroundColor: "#f4f7fc"
backgroundColor: "#f4f7fc",
data: series.map((item) => item.name),
},
color: this.colors,
tooltip: {},
dataset: {
source: self.data
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
// data: self.data.legendData,
axisLabel: {
margin: 20,
color: "#0d1847",
textStyle: {
fontSize: 12
fontSize: 12,
},
interval: 0,
rotate: self.x_router,
formatter: function(value) {
rotate: _self.x_router,
/* formatter: function(value) {
let valueTxt = "";
if (value.length > 6) {
valueTxt = value.substring(0, 5) + "...";
......@@ -81,57 +80,59 @@ export default {
valueTxt = value;
}
return valueTxt;
}
}, */
},
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",
},
data: xAxis,
},
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",
},
},
},
],
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: "bar",
type: "bar",
barWidth: self.bar_width,
barWidth: _self.bar_width,
itemStyle: {
normal: {
color: function(params) {
......@@ -143,24 +144,26 @@ 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,
data: series[0].data,
},
{
type: "bar",
type: "bar",
barWidth: self.bar_width,
barWidth: _self.bar_width,
itemStyle: {
normal: {
color: function(params) {
......@@ -172,24 +175,26 @@ 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,
data: series[1].data,
},
],
};
}
}
},
},
};
</script>
<style scoped>
......
src/components/e-charts/bar-chart.vue
View file @ 88ee1399
......@@ -46,6 +46,17 @@ export default {
bar() {
let self = this;
return {
tooltip: {
trigger: "axis",
formatter: function(params) {
var htmlStr = "";
for (var i = 0; i < params.length; i++) {
htmlStr += params[i].name + " : ";
htmlStr += params[i].value;
}
return htmlStr;
}
},
grid: {
left: 10,
right: 10,
......@@ -65,7 +76,7 @@ export default {
},
interval: 0,
rotate: self.x_router,
formatter: function(value) {
/* formatter: function(value) {
let valueTxt = "";
if (value.length > 6) {
valueTxt = value.substring(0, 5) + "...";
......@@ -73,7 +84,7 @@ export default {
valueTxt = value;
}
return valueTxt;
}
} */
},
axisLine: {
lineStyle: {
......@@ -91,6 +102,9 @@ export default {
},
interval: 0
},
axisPointer: {
type: "shadow",
},
}
],
yAxis: [
......
src/components/e-charts/the-list.vue
View file @ 88ee1399
......@@ -56,7 +56,7 @@ export default {
this.$el.scrollTop = 0;
this.timer = setInterval(() => {
let itemHeight = 50;
let itemHeight = 60;
let curScrollTop = this.$el.scrollTop + itemHeight;
if (
curScrollTop >=
......
src/pages/data-analysis/operation-overview.vue
View file @ 88ee1399
......@@ -21,28 +21,31 @@
<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">58</p>
<p class="right_txt_2" v-text="baseinfo.user_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">24</p>
<p
class="right_txt_2"
v-text="baseinfo.online_user_num || 0"
></p>
</div>
</div>
<div class="part">
<img src="../../assets/imgs/yxgk_ic_fuwuzs.png" alt />
<div class="part_right_1">
<p class="right_txt_1">服务总数</p>
<p class="right_txt_2">268</p>
<p class="right_txt_2" v-text="baseinfo.serv_num || 0"></p>
</div>
</div>
<div class="part">
<img src="../../assets/imgs/yxgk_ic_yingyongzs.png" alt />
<div class="part_right_1">
<p class="right_txt_1">应用总数</p>
<p class="right_txt_2">78</p>
<p class="right_txt_2" v-text="baseinfo.app_num || 0"></p>
</div>
</div>
</block-radius>
......@@ -53,7 +56,11 @@
title="服务状态统计"
class="block"
>
<line-chart :data="line_data" :zzfw="true"></line-chart>
<line-chart
class="block-radius-content"
:data="line_data"
:zzfw="true"
></line-chart>
</block-radius>
</el-col>
</el-row>
......@@ -66,7 +73,7 @@
title="服务注册发布数量排名"
class="block"
>
<bar-charttwo :data="barData"></bar-charttwo>
<bar-charttwo :data="servRegRank"></bar-charttwo>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
......@@ -94,12 +101,12 @@
title="服务被调用次数排名"
class="block"
:buttons_arr="['累计', '今日']"
@changeButton="changeServeiceNumBtn"
@changeButton="changeAction1"
>
<toplist
class="block-radius-content"
:options="toplistData"
:target-value="toplistTargetValue"
:options="servRequestRank"
:target-value="1000"
:isShowjt="false"
></toplist>
</block-radius>
......@@ -110,7 +117,7 @@
title="应用被部署次数排名"
class="block"
:buttons_arr="['累计', '今日']"
@changeButton="changeBsNumBtn"
@changeButton="changeActions"
>
<the-list :data="bsData" class="block-radius-content"></the-list>
</block-radius>
......@@ -134,21 +141,24 @@
<script>
import BlockRadius from "@/components/general/block-radius";
import lineChart from "@/components/e-charts/line_chart";
import BarCharttwo from "@/components/e-charts/bar-chartTwo";
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";
export default {
components: {
BlockRadius,
lineChart,
BarCharttwo,
BarChart,
Toplist,
theList,
},
data() {
return {
barData: [
["product", "服务注册数量", "服务发布数量"],
["全程执法精细123", 43.3, 85.8],
["智能执法场所123", 83.1, 73.4],
["大数智能应用222", 86.4, 65.2],
["刑事案件智能1111", 72.4, 53.9],
],
baseinfo: {},
servRegRank: {},
line_data: {
xAxisData: [
"08-01",
......@@ -179,83 +189,14 @@ export default {
],
seriesData: [50, 63, 48, 58],
},
toplistData: [
servRequestRank: [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 300,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 220,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 210,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 180,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 150,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 120,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 100,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 80,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 60,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 50,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 40,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 20,
},
], // 服务调用次数排名
toplistTargetValue: 400, // 服务调用次数排名 目标值
serveiceNum: "",
bsNum: "",
],
bsData: [
{
name: "警综平台",
......@@ -295,172 +236,67 @@ export default {
],
};
},
components: {
BlockRadius,
lineChart,
BarCharttwo,
BarChart,
Toplist,
theList,
},
methods: {
getData() {},
//服务调用排名切换
changeServeiceNumBtn(val) {
if (val === 0) {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 300,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 220,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 210,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 180,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 150,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 120,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 100,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 80,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 60,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 50,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 40,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 20,
},
];
init() {
this.getBaseInfo();
this.getServRegRank();
this.getServRequestRank();
},
getBaseInfo() {
this.$http
.get("/apaas/service/v3/control/org/baseinfo")
.then(({ data }) => {
if (data.success === 1) {
this.baseinfo = data.data;
} else {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 35,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 30,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 27,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 25,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 11,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 10,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2,
this.$message.error(data.errMsg || "获取组织用户概况失败");
}
})
.catch((error) => {
console.log("error");
this.$message.error("获取组织用户概况失败");
});
},
getServRegRank() {
this.$http
.get("/apaas/service/v3/control/org/serv/reg/rank")
.then(({ data }) => {
if (data.success === 1) {
this.servRegRank = data.data;
} else {
this.$message.error(data.errMsg || "获取服务注册发布数量排名失败");
}
})
.catch((error) => {
console.log("error");
this.$message.error("获取服务注册发布数量排名失败");
});
},
getServRequestRank(tab = "all") {
this.$http
.get("/apaas/service/v3/control/org/serv/request/rank", {
params: { tab },
})
.then(({ data }) => {
if (data.success === 1) {
this.servRequestRank = 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");
}
},
//部署次数排名
changeBsNumBtn(val) {
changeActions(val) {
if (val === 0) {
this.bsData = [
{
......@@ -540,6 +376,9 @@ export default {
}
},
},
created() {
this.init();
},
};
</script>
<style scoped>
......
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