Skip to content

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

运行管控调试

parent 47dfc3d7
Hide 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"; ...@@ -7,73 +7,72 @@ import { graphic } from "echarts/lib/export";
export default { export default {
props: { props: {
data: { data: {
type: Array, type: Object,
default: () => { default: () => {
return []; return null;
} },
}, },
bar_width: { bar_width: {
type: Number, type: Number,
default: 12 default: 12,
}, },
colors: { colors: {
type: Array, type: Array,
default: () => { default: () => {
return ["#515fe7", "#e56600"]; return ["#515fe7", "#e56600"];
} },
}, },
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,
} },
}, },
data: () => ({}),
mounted() {},
methods: { methods: {
bar() { bar() {
let self = this; let _self = this;
let xAxis = (_self.data && _self.data.xAxis) || [];
let series = (_self.data && _self.data.series) || [{}, {}];
return { return {
grid: { grid: {
left: 10, left: 10,
right: 10, right: 10,
bottom: 25, bottom: 25,
top: 25, top: 25,
containLabel: true containLabel: true,
}, },
legend: { legend: {
left: "right", left: "right",
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
orient: "horizontal", orient: "horizontal",
backgroundColor: "#f4f7fc" backgroundColor: "#f4f7fc",
data: series.map((item) => item.name),
}, },
color: this.colors, tooltip: {
tooltip: {}, trigger: "axis",
dataset: {
source: self.data
}, },
xAxis: { xAxis: {
type: "category", type: "category",
// data: self.data.legendData,
axisLabel: { axisLabel: {
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 valueTxt = "";
if (value.length > 6) { if (value.length > 6) {
valueTxt = value.substring(0, 5) + "..."; valueTxt = value.substring(0, 5) + "...";
...@@ -81,57 +80,59 @@ export default { ...@@ -81,57 +80,59 @@ export default {
valueTxt = value; valueTxt = value;
} }
return valueTxt; 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: {
type: "shadow",
},
data: xAxis,
}, },
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",
} },
} },
} },
], ],
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [ series: [
{ {
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) {
...@@ -143,24 +144,26 @@ export default { ...@@ -143,24 +144,26 @@ 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,
data: series[0].data,
}, },
{ {
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) {
...@@ -172,24 +175,26 @@ export default { ...@@ -172,24 +175,26 @@ 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,
] data: series[1].data,
},
],
}; };
} },
} },
}; };
</script> </script>
<style scoped> <style scoped>
...@@ -197,4 +202,4 @@ export default { ...@@ -197,4 +202,4 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
\ No newline at end of file
src/components/e-charts/bar-chart.vue
View file @ 88ee1399
...@@ -46,6 +46,17 @@ export default { ...@@ -46,6 +46,17 @@ export default {
bar() { bar() {
let self = this; let self = this;
return { 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: { grid: {
left: 10, left: 10,
right: 10, right: 10,
...@@ -65,7 +76,7 @@ export default { ...@@ -65,7 +76,7 @@ export default {
}, },
interval: 0, interval: 0,
rotate: self.x_router, rotate: self.x_router,
formatter: function(value) { /* formatter: function(value) {
let valueTxt = ""; let valueTxt = "";
if (value.length > 6) { if (value.length > 6) {
valueTxt = value.substring(0, 5) + "..."; valueTxt = value.substring(0, 5) + "...";
...@@ -73,7 +84,7 @@ export default { ...@@ -73,7 +84,7 @@ export default {
valueTxt = value; valueTxt = value;
} }
return valueTxt; return valueTxt;
} } */
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
...@@ -91,6 +102,9 @@ export default { ...@@ -91,6 +102,9 @@ export default {
}, },
interval: 0 interval: 0
}, },
axisPointer: {
type: "shadow",
},
} }
], ],
yAxis: [ yAxis: [
......
src/components/e-charts/the-list.vue
View file @ 88ee1399
...@@ -56,7 +56,7 @@ export default { ...@@ -56,7 +56,7 @@ export default {
this.$el.scrollTop = 0; this.$el.scrollTop = 0;
this.timer = setInterval(() => { this.timer = setInterval(() => {
let itemHeight = 50; let itemHeight = 60;
let curScrollTop = this.$el.scrollTop + itemHeight; let curScrollTop = this.$el.scrollTop + itemHeight;
if ( if (
curScrollTop >= curScrollTop >=
......
src/pages/data-analysis/operation-overview.vue
View file @ 88ee1399
...@@ -21,28 +21,31 @@ ...@@ -21,28 +21,31 @@
<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">58</p> <p class="right_txt_2" v-text="baseinfo.user_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 class="right_txt_2">24</p> <p
class="right_txt_2"
v-text="baseinfo.online_user_num || 0"
></p>
</div> </div>
</div> </div>
<div class="part"> <div class="part">
<img src="../../assets/imgs/yxgk_ic_fuwuzs.png" alt /> <img src="../../assets/imgs/yxgk_ic_fuwuzs.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">268</p> <p class="right_txt_2" v-text="baseinfo.serv_num || 0"></p>
</div> </div>
</div> </div>
<div class="part"> <div class="part">
<img src="../../assets/imgs/yxgk_ic_yingyongzs.png" alt /> <img src="../../assets/imgs/yxgk_ic_yingyongzs.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">78</p> <p class="right_txt_2" v-text="baseinfo.app_num || 0"></p>
</div> </div>
</div> </div>
</block-radius> </block-radius>
...@@ -53,7 +56,11 @@ ...@@ -53,7 +56,11 @@
title="服务状态统计" title="服务状态统计"
class="block" 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> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -66,7 +73,7 @@ ...@@ -66,7 +73,7 @@
title="服务注册发布数量排名" title="服务注册发布数量排名"
class="block" class="block"
> >
<bar-charttwo :data="barData"></bar-charttwo> <bar-charttwo :data="servRegRank"></bar-charttwo>
</block-radius> </block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
...@@ -94,12 +101,12 @@ ...@@ -94,12 +101,12 @@
title="服务被调用次数排名" title="服务被调用次数排名"
class="block" class="block"
:buttons_arr="['累计', '今日']" :buttons_arr="['累计', '今日']"
@changeButton="changeServeiceNumBtn" @changeButton="changeAction1"
> >
<toplist <toplist
class="block-radius-content" class="block-radius-content"
:options="toplistData" :options="servRequestRank"
:target-value="toplistTargetValue" :target-value="1000"
:isShowjt="false" :isShowjt="false"
></toplist> ></toplist>
</block-radius> </block-radius>
...@@ -110,7 +117,7 @@ ...@@ -110,7 +117,7 @@
title="应用被部署次数排名" title="应用被部署次数排名"
class="block" class="block"
:buttons_arr="['累计', '今日']" :buttons_arr="['累计', '今日']"
@changeButton="changeBsNumBtn" @changeButton="changeActions"
> >
<the-list :data="bsData" class="block-radius-content"></the-list> <the-list :data="bsData" class="block-radius-content"></the-list>
</block-radius> </block-radius>
...@@ -134,21 +141,24 @@ ...@@ -134,21 +141,24 @@
<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-chartTwo"; 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";
export default { export default {
components: {
BlockRadius,
lineChart,
BarCharttwo,
BarChart,
Toplist,
theList,
},
data() { data() {
return { return {
barData: [ baseinfo: {},
["product", "服务注册数量", "服务发布数量"], servRegRank: {},
["全程执法精细123", 43.3, 85.8],
["智能执法场所123", 83.1, 73.4],
["大数智能应用222", 86.4, 65.2],
["刑事案件智能1111", 72.4, 53.9],
],
line_data: { line_data: {
xAxisData: [ xAxisData: [
"08-01", "08-01",
...@@ -179,83 +189,14 @@ export default { ...@@ -179,83 +189,14 @@ export default {
], ],
seriesData: [50, 63, 48, 58], seriesData: [50, 63, 48, 58],
}, },
toplistData: [ servRequestRank: [
{ {
cover: cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1", service_name: "postgresql V11.1",
request_count: 300, 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: [ bsData: [
{ {
name: "警综平台", name: "警综平台",
...@@ -295,172 +236,67 @@ export default { ...@@ -295,172 +236,67 @@ export default {
], ],
}; };
}, },
components: {
BlockRadius,
lineChart,
BarCharttwo,
BarChart,
Toplist,
theList,
},
methods: { methods: {
getData() {}, init() {
//服务调用排名切换 this.getBaseInfo();
changeServeiceNumBtn(val) { 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.$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) { if (val === 0) {
this.toplistData = [ this.getServRequestRank("all");
{
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,
},
];
} else { } else {
this.toplistData = [ this.getServRequestRank("today");
{
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,
},
];
} }
}, },
//部署次数排名 changeActions(val) {
changeBsNumBtn(val) {
if (val === 0) { if (val === 0) {
this.bsData = [ this.bsData = [
{ {
...@@ -540,6 +376,9 @@ export default { ...@@ -540,6 +376,9 @@ export default {
} }
}, },
}, },
created() {
this.init();
},
}; };
</script> </script>
<style scoped> <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