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