Skip to content

A
apaas-ui
Commit 7538e0be authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

Merge branch 'ldx' into dev

parents a50042f9 da2229fb
Show whitespace changes
Inline Side-by-side
Showing with 243 additions and 128 deletions
package.json
View file @ 7538e0be
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
"build": "node build/build.js" "build": "node build/build.js"
}, },
"dependencies": { "dependencies": {
"@antv/g6": "^3.4.8", "@antv/g6": "^3.5.1",
"@fortawesome/fontawesome-free": "^5.8.0", "@fortawesome/fontawesome-free": "^5.8.0",
"ace-builds": "^1.4.11", "ace-builds": "^1.4.11",
"axios": "^0.19.2", "axios": "^0.19.2",
......
src/components/e-charts/multiple_circle.vue
View file @ 7538e0be
...@@ -6,55 +6,74 @@ ...@@ -6,55 +6,74 @@
import uuidv1 from "uuid/v1"; import uuidv1 from "uuid/v1";
var echarts = require("echarts"); var echarts = require("echarts");
export default { export default {
props: ['data','text'], props: {
data: {
type: Array,
default: () => {
return [];
}
},
text: {
type: String,
default: ""
},
show_center_data: {
type: Boolean,
default: true
},
bar_width: {
type: Number,
default: 5
}
},
components: {}, components: {},
data() { data() {
return { return {
yylx_asy: uuidv1(), yylx_asy: uuidv1()
}; };
}, },
watch: {}, watch: {},
computed: {}, computed: {},
created() {}, created() {},
mounted() { mounted() {
this.init_yylx_asy(this.data,this.text) this.init_yylx_asy(this.data, this.text);
}, },
methods: { methods: {
init_yylx_asy(data,text) { init_yylx_asy(data, text) {
var options = this.init_circle(data,text); var options = this.init_circle(data, text);
window[this.yylx_asy] = echarts.init( window[this.yylx_asy] = echarts.init(
document.getElementById(this.yylx_asy) document.getElementById(this.yylx_asy)
); );
window[this.yylx_asy].setOption(options, true); window[this.yylx_asy].setOption(options, true);
}, },
init_circle(data_val,text) { init_circle(data_val, text) {
// var data_val = data_val; // var data_val = data_val;
var rich = { var rich = {
white: { white: {
color: "#ddd", color: "#ddd",
align: "center", align: "center",
padding: [3, 0], padding: [3, 0]
}, }
}; };
var placeHolderStyle = { var placeHolderStyle = {
normal: { normal: {
label: { label: {
show: false, show: false
}, },
labelLine: { labelLine: {
show: false, show: false
}, },
color: "rgba(0, 0, 0, 0)", color: "rgba(0, 0, 0, 0)",
borderColor: "rgba(0, 0, 0, 0)", borderColor: "rgba(0, 0, 0, 0)",
borderWidth: 0, borderWidth: 0
}, }
}; };
var data = []; var data = [];
var total = 4; var total = 0;
var color = ["#515fe7", "#36a5ec", "#da9f2a", "#23b2a7", "#d46002"]; var color = ["#274fee", "#25bdb1", "#ffc95c", "#e56600", "#e15260"];
var legendarr = []; var legendarr = [];
var temp2_data = 0; var temp2_data = 0;
data_val.forEach((e) => { data_val.forEach(e => {
temp2_data = temp2_data + e.value; temp2_data = temp2_data + e.value;
}); });
for (var i = 0; i < data_val.length; i++) { for (var i = 0; i < data_val.length; i++) {
...@@ -64,17 +83,17 @@ export default { ...@@ -64,17 +83,17 @@ export default {
name: data_val[i].name, name: data_val[i].name,
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 5, borderWidth: this.bar_width,
// shadowBlur: 20, // shadowBlur: 20,
borderColor: color[i], borderColor: color[i]
// shadowColor: color[i], // shadowColor: color[i],
}, }
}, }
}, },
{ {
value: temp2_data / 30, value: temp2_data / 30,
name: "", name: "",
itemStyle: placeHolderStyle, itemStyle: placeHolderStyle
} }
); );
legendarr.push(data_val[i].name); legendarr.push(data_val[i].name);
...@@ -96,43 +115,43 @@ export default { ...@@ -96,43 +115,43 @@ export default {
show: true, show: true,
position: "outside", position: "outside",
color: "#58617a", color: "#58617a",
formatter: (params)=> { formatter: params => {
var percent = 0; var percent = 0;
percent = ((params.value / total) * 100).toFixed(2); percent = ((params.value / total) * 100).toFixed(2);
if (params.name !== "") { if (params.name !== "") {
return percent+"%"; return percent + "%";
} else { } else {
return ""; return "";
} }
}, },
rich: rich, rich: rich
}, }
}, }
},
data: data,
}, },
data: data
}
]; ];
var options = { var options = {
title: { title: {
text: total, text: this.show_center_data ? total : "",
textStyle: { textStyle: {
color: "#000", color: "#000",
fontSize: 40, fontSize: 40,
fontWeight: 200, fontWeight: 200
}, },
subtext: text, subtext: text,
subtextStyle: { subtextStyle: {
color: "#c9cedd", color: "#c9cedd"
}, },
itemGap: -10, // 主副标题距离 itemGap: -10, // 主副标题距离
left: "center", left: "center",
top: "center", top: "center"
}, },
color: color, color: color,
tooltip: { tooltip: {
show: false, show: false
}, },
legend: { legend: {
bottom: -5, bottom: -5,
...@@ -141,17 +160,17 @@ export default { ...@@ -141,17 +160,17 @@ export default {
itemHeight: 10, itemHeight: 10,
orient: "horizontal", orient: "horizontal",
data: legendarr, data: legendarr,
backgroundColor: "#f4f7fc", backgroundColor: "#f4f7fc"
}, },
toolbox: { toolbox: {
show: false, show: false
}, },
series: seriesObj, series: seriesObj
}; };
return options; return options;
}, }
}, }
}; };
</script> </script>
......
src/components/e-charts/starlist.vue
View file @ 7538e0be
<template> <template>
<ul class="star_list apass_scroll"> <ul class="star_list apass_scroll">
<li <li class="item_list" v-for="(option, index) in options" :key="'star_info_' + index">
class="item_list"
v-for="(option, index) in options"
:key="'star_info_' + index"
>
<el-rate <el-rate
v-if="show_star"
class="item-rate" class="item-rate"
:colors="['#8890a7', '#8890a7', '#8890a7']" :colors="['#8890a7', '#8890a7', '#8890a7']"
:value="option.star" :value="option.star"
disabled disabled
disabled-void-color="transparent" disabled-void-color="transparent"
> ></el-rate>
</el-rate> <span v-else class="data_title">{{ option.title }}</span>
<el-progress <el-progress
class="item-progress" class="item-progress"
:percentage="getPercent(option.count)" :percentage="getPercent(option.count)"
:show-text="false" :show-text="false"
color="#e56600" :color="show_star ? color : colors[index]"
></el-progress> ></el-progress>
<span v-if="!show_star" class="item_text_1" v-text="option.percent + '%'"></span>
<span class="item-text" v-text="option.count + '个'"></span> <span class="item-text" v-text="option.count + '个'"></span>
</li> </li>
</ul> </ul>
...@@ -29,18 +27,28 @@ export default { ...@@ -29,18 +27,28 @@ export default {
props: { props: {
options: { options: {
type: Array, type: Array,
default: () => [], default: () => []
}, },
total: { total: {
type: Number, type: Number,
default: () => 10, default: () => 10
}, },
show_star: {
type: Boolean,
default: true
}
},
data() {
return {
color: "#e56600",
colors: ["#25bdb1", "#f5ab4c", "#e15260", "#274fee", "#58617a"]
};
}, },
methods: { methods: {
getPercent(value) { getPercent(value) {
return Math.min((value / this.total) * 100, 100); return Math.min((value / this.total) * 100, 100);
}, }
}, }
}; };
</script> </script>
...@@ -65,7 +73,6 @@ export default { ...@@ -65,7 +73,6 @@ export default {
} }
.item-progress { .item-progress {
flex-grow: 1; flex-grow: 1;
max-width: 200px;
margin-right: 10px; margin-right: 10px;
} }
.item-text { .item-text {
...@@ -76,6 +83,20 @@ export default { ...@@ -76,6 +83,20 @@ export default {
color: #242c43; color: #242c43;
text-align: right; text-align: right;
} }
.item_text_1 {
flex-shrink: 0;
width: 40px;
font-size: 14px;
line-height: 20px;
color: #8890a7;
text-align: left;
}
.data_title {
display: inline-block;
margin-right: 10px;
width: 100px;
text-align: right;
}
</style> </style>
<style> <style>
......
src/components/topology.vue
View file @ 7538e0be
...@@ -159,7 +159,8 @@ export default { ...@@ -159,7 +159,8 @@ export default {
container: "container", container: "container",
width, width,
height, height,
fitView: true, fitView: false,
fitCenter: true,
layout: { layout: {
// 流程图布局 // 流程图布局
type: "dagre", type: "dagre",
......
src/pages/data-analysis/my-application.vue
View file @ 7538e0be
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<div ref="left_1_l" class="left_1_l"> <div ref="left_1_l" class="left_1_l">
<img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" /> <img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
<div class="left_1_msg"> <div class="left_1_msg">
<div class="left_1_title">服务总数</div> <div class="left_1_title">应用总数</div>
<div class="left_1_num">4</div> <div class="left_1_num">4</div>
</div> </div>
</div> </div>
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
class="block" class="block"
> >
<BarChart <BarChart
:data="bar_data_org" :data="bar_data_area"
: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"
...@@ -254,7 +254,7 @@ export default { ...@@ -254,7 +254,7 @@ export default {
week_chain: -14.2 week_chain: -14.2
}, },
mult_data: [ mult_data: [
{ name: "基础工具", value: 40 }, { name: "基础工具", value: 2 },
{ name: "通用应用", value: 0 }, { name: "通用应用", value: 0 },
{ name: "业务应用", value: 2 } { name: "业务应用", value: 2 }
], ],
...@@ -321,31 +321,40 @@ export default { ...@@ -321,31 +321,40 @@ export default {
}, },
bar_data_org: { bar_data_org: {
xaxis: [ xaxis: [
"01-01", "省公安厅",
"01-02", "省发改委",
"01-03", "贵州省公安厅",
"01-04", "大数据中心",
"01-05", "省资源局",
"01-06", "js机构",
"01-07",
"01-08"
], ],
data: [100, 120, 130, 150, 160, 120, 110, 100] data: [2, 1, 2, 1, 1, 1]
},
bar_data_area: {
xaxis: [
"经济建设",
"环境资源",
"道路交通",
"教育科技",
"文化休闲",
"城市管理",
],
data: [2, 0, 0, 1, 0, 2]
}, },
graph_arr: { graph_arr: {
xaxis: [ xaxis: [
"01-01", "07/09",
"01-02", "07/10",
"01-03", "07/11",
"01-04", "07/12",
"01-05", "07/13",
"01-06", "07/14",
"01-07", "07/15",
"01-08" "07/16"
], ],
data: [ data: [
[1010, 120, 130, 520, 160, 1120, 110, 100], [1, 1, 0, 1, 0, 2, 1, 2],
[100, 1210, 130, 1530, 160, 120, 110, 1200] [0, 1, 1, 2, 1, 1, 0, 2],
], ],
legend: ["被调用次数", "调用次数"] legend: ["被调用次数", "调用次数"]
}, },
......
src/pages/data-analysis/my-service.vue
View file @ 7538e0be
...@@ -29,7 +29,28 @@ ...@@ -29,7 +29,28 @@
</block-radius> </block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius class="block"></block-radius> <block-radius
:show_header="true"
title="服务状态统计"
:buttons_arr="['健康状态', '调用状态']"
@changeButton="changeServiceStateBtn"
class="block"
>
<multiple-circle
v-if="left_1_state == 0"
class="block-radius-content"
:data="mult_data_state"
:show_center_data="false"
:bar_width="10 "
></multiple-circle>
<starlist
v-else
class="block-radius-content"
:options="linelistData"
:show_star="false"
style="margin-top: 30px;height: calc(100% - 51px);"
></starlist>
</block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius <block-radius
...@@ -72,7 +93,13 @@ ...@@ -72,7 +93,13 @@
<!-- 折线图 --> <!-- 折线图 -->
<p class="sparkline-text"> <p class="sparkline-text">
<span>{{sparkline1.num}}</span> <span>{{sparkline1.num}}</span>
<span :style="sparkline1.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}">{{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}% <img v-if="sparkline1.up>0" src="../../assets/imgs/icon_up.png" alt=""> <img v-if="sparkline1.up<0" src="../../assets/imgs/icon_down.png" alt=""></span> <span
:style="sparkline1.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
>
{{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}%
<img v-if="sparkline1.up>0" src="../../assets/imgs/icon_up.png" alt />
<img v-if="sparkline1.up<0" src="../../assets/imgs/icon_down.png" alt />
</span>
</p> </p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42"> <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparklineCurve <sparklineCurve
...@@ -83,7 +110,6 @@ ...@@ -83,7 +110,6 @@
:styles="spCurveStyles2" :styles="spCurveStyles2"
/> />
</sparkline> </sparkline>
</div> </div>
</div> </div>
<div class="hot-line"> <div class="hot-line">
...@@ -92,7 +118,13 @@ ...@@ -92,7 +118,13 @@
<!-- 折线图 --> <!-- 折线图 -->
<p class="sparkline-text sparkline-text-user"> <p class="sparkline-text sparkline-text-user">
<span>{{sparkline2.num}}</span> <span>{{sparkline2.num}}</span>
<span :style="sparkline2.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}">{{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}% <img v-if="sparkline2.up>0" src="../../assets/imgs/icon_up.png" alt=""> <img v-if="sparkline2.up<0" src="../../assets/imgs/icon_down.png" alt=""></span> <span
:style="sparkline2.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
>
{{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}%
<img v-if="sparkline2.up>0" src="../../assets/imgs/icon_up.png" alt />
<img v-if="sparkline2.up<0" src="../../assets/imgs/icon_down.png" alt />
</span>
</p> </p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42"> <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparklineCurve <sparklineCurve
...@@ -240,36 +272,45 @@ export default { ...@@ -240,36 +272,45 @@ export default {
Topology Topology
}, },
data: () => ({ data: () => ({
left_1_state: 0,
mult_data_state: [
{ name: "正常", value: 4 },
{ name: "警告", value: 2 },
{ name: "错误", value: 0 },
{ name: "未使用", value: 2 }
],
mult_data: [ mult_data: [
{ name: "基础工具", value: 40 }, { name: "数据服务", value: 4 },
{ name: "通用应用", value: 0 }, { name: "时空服务", value: 2 },
{ name: "业务应用", value: 2 } { name: "视频服务", value: 0 },
{ name: "感知服务", value: 0 },
{ name: "综合服务", value: 2 }
], ],
spIndicatorStyles1: false, spIndicatorStyles1: false,
spRefLineStyles3: { spRefLineStyles3: {
stroke: "#d14", stroke: "#d14",
strokeOpacity: 0, strokeOpacity: 0,
strokeDasharray: "2, 2", strokeDasharray: "2, 2"
}, },
spCurveStyles2: { spCurveStyles2: {
stroke: "#274fee", stroke: "#274fee",
fill: "#274fee", fill: "#274fee"
}, },
spCurveStyles3: { spCurveStyles3: {
stroke: "#e56600", stroke: "#e56600",
fill: "#e56600", fill: "#e56600"
}, },
sparkline1:{ sparkline1: {
arr:[1,2,3,4,8,9,10,21], arr: [1, 2, 3, 4, 8, 9, 10, 21],
num:1231, num: 1231,
up:15.3 up: 15.3
}, },
sparkline2:{ sparkline2: {
arr:[1,2,3,4,8,9,10,21], arr: [1, 2, 3, 4, 8, 9, 10, 21],
num:182, num: 182,
up:-19.3 up: -19.3
}, },
text: "应用总数", text: "服务总数",
single_data: { single_data: {
num: 50, num: 50,
color: "#25bdb1", color: "#25bdb1",
...@@ -300,20 +341,20 @@ export default { ...@@ -300,20 +341,20 @@ export default {
"01-11", "01-11",
"01-12", "01-12",
"01-13", "01-13",
"01-14", "01-14"
], ],
data: [ data: [
{ {
name: "开发者应用", name: "开发者应用",
arr: [10, 12, 13, 15, 16, 12, 11, 10,15,16,19,20,22,15,18] arr: [10, 12, 13, 15, 16, 12, 11, 10, 15, 16, 19, 20, 22, 15, 18]
}, },
{ {
name: "平台应用", name: "平台应用",
arr: [12, 13, 14, 13, 14, 12, 10, 9,11,10,9,12,13,10,9] arr: [12, 13, 14, 13, 14, 12, 10, 9, 11, 10, 9, 12, 13, 10, 9]
}, },
{ {
name: "未上架", name: "未上架",
arr: [8, 9, 10, 11, 10, 7, 8, 9 ,7,6,5,8,6,7,5] arr: [8, 9, 10, 11, 10, 7, 8, 9, 7, 6, 5, 8, 6, 7, 5]
} }
] ]
}, },
...@@ -322,30 +363,19 @@ export default { ...@@ -322,30 +363,19 @@ export default {
text: "健康占比" text: "健康占比"
}, },
bar_data: { bar_data: {
xaxis: [ xaxis: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
"01-01", data: [4, 1, 2, 1]
"01-02",
"01-03",
"01-04",
"01-05",
"01-06",
"01-07",
"01-08"
],
data: [100, 120, 130, 150, 160, 120, 110, 100]
}, },
bar_data_org: { bar_data_org: {
xaxis: [ xaxis: [
"01-01", "省公安厅",
"01-02", "省发改委",
"01-03", "贵州省公安厅",
"01-04", "大数据中心",
"01-05", "省资源局",
"01-06", "js机构"
"01-07",
"01-08"
], ],
data: [100, 120, 130, 150, 160, 120, 110, 100] data: [2, 1, 2, 1, 1, 1]
}, },
toplistData: [ toplistData: [
{ {
...@@ -417,7 +447,7 @@ export default { ...@@ -417,7 +447,7 @@ export default {
logo: logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次" unit: "次"
}, }
], // 服务调用排名分析 ], // 服务调用排名分析
toplistTargetValue: 2400, // 服务调用排名分析 目标值 toplistTargetValue: 2400, // 服务调用排名分析 目标值
serveiceInfoBtnIndex: 0, serveiceInfoBtnIndex: 0,
...@@ -463,6 +493,38 @@ export default { ...@@ -463,6 +493,38 @@ export default {
user_name: "普通用户lxy" user_name: "普通用户lxy"
} }
], // 服务评价 ], // 服务评价
linelistData: [
{
count: 6,
percent: 75,
title: "0.1% 错误",
unit: "个"
},
{
count: 2,
percent: 25,
title: "0.1 - 20% 错误",
unit: "个"
},
{
count: 0,
percent: 0,
title: "20% 错误",
unit: "个"
},
{
count: 0,
percent: 0,
title: "TCP连接",
unit: "个"
},
{
count: 0,
percent: 0,
title: "Idle",
unit: "个"
}
], // 服务状态统计
starlistData: [ starlistData: [
{ {
star: 5, star: 5,
...@@ -609,6 +671,10 @@ export default { ...@@ -609,6 +671,10 @@ export default {
this.$api.workbench.getServiceTopology().then(response => { this.$api.workbench.getServiceTopology().then(response => {
this.topology_datas = response.data.elements; this.topology_datas = response.data.elements;
}); });
},
changeServiceStateBtn(index) {
console.log(index);
this.left_1_state = index;
} }
} }
}; };
...@@ -710,15 +776,15 @@ export default { ...@@ -710,15 +776,15 @@ export default {
height: calc(100% - 36px); height: calc(100% - 36px);
position: relative; position: relative;
} }
.sparkline-text{ .sparkline-text {
width: 100%; width: 100%;
line-height: 20px; line-height: 20px;
} }
.sparkline-text span:nth-of-type(1){ .sparkline-text span:nth-of-type(1) {
font-size: 20px; font-size: 20px;
color: #274fee; color: #274fee;
} }
.sparkline-text span:nth-of-type(2){ .sparkline-text span:nth-of-type(2) {
font-size: 12px; font-size: 12px;
width: 62px; width: 62px;
float: right; float: right;
...@@ -729,7 +795,7 @@ export default { ...@@ -729,7 +795,7 @@ export default {
margin-top: 3px; margin-top: 3px;
margin-right: 2px; margin-right: 2px;
} }
.sparkline-text-user span:nth-of-type(1){ .sparkline-text-user span:nth-of-type(1) {
font-size: 20px; font-size: 20px;
color: #e56600; color: #e56600;
} }
...@@ -737,11 +803,10 @@ export default { ...@@ -737,11 +803,10 @@ export default {
width: 100%; width: 100%;
height: calc(100% - 20px); height: calc(100% - 20px);
} }
.single-charts{ .single-charts {
float: left; float: left;
width: 33.3%; width: 33.3%;
} }
</style> </style>
<style> <style>
......
src/pages/service_shop/services_shop.vue
View file @ 7538e0be
...@@ -81,7 +81,7 @@ export default { ...@@ -81,7 +81,7 @@ export default {
icon: require("@/assets/imgs/shop_ic_jierujg.png") icon: require("@/assets/imgs/shop_ic_jierujg.png")
}, },
{ {
name: "接入系统", name: "应用总数",
value: 0, value: 0,
icon: require("@/assets/imgs/shop_ic_jieruxt.png") icon: require("@/assets/imgs/shop_ic_jieruxt.png")
}, },
...@@ -119,7 +119,7 @@ export default { ...@@ -119,7 +119,7 @@ export default {
this.servicesShopInfo[0].value = data.service_num; this.servicesShopInfo[0].value = data.service_num;
this.servicesShopInfo[1].value = data.person_num; this.servicesShopInfo[1].value = data.person_num;
this.servicesShopInfo[2].value = data.org_num; this.servicesShopInfo[2].value = data.org_num;
this.servicesShopInfo[3].value = data.system_num; this.servicesShopInfo[3].value = data.app_num;
this.servicesShopInfo[4].value = data.request_num; this.servicesShopInfo[4].value = data.request_num;
}); });
}, },
......
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