Skip to content

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

为演示准备假数据，首页应用总数，环状图组件，评分栏

parent 4e4151e1
Hide whitespace changes
Inline Side-by-side
Showing with 212 additions and 101 deletions
package.json
View file @ da2229fb
......@@ -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 @ da2229fb
......@@ -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 / 20,
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,
},
},
rich: rich
}
}
},
data: data,
},
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 @ da2229fb
<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: () => 10015,
default: () => 4
},
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 @ da2229fb
......@@ -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 @ da2229fb
......@@ -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"
......@@ -226,7 +226,7 @@ export default {
week_chain: -14.2
},
mult_data: [
{ name: "基础工具", value: 40 },
{ name: "基础工具", value: 2 },
{ name: "通用应用", value: 0 },
{ name: "业务应用", value: 2 }
],
......@@ -264,31 +264,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 @ da2229fb
......@@ -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
......@@ -210,12 +231,21 @@ 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 },
],
text: "应用总数",
text: "服务总数",
single_data: {
num: 12,
color: "#515fe7",
......@@ -253,29 +283,24 @@ export default {
},
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]
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: [
{
......@@ -358,6 +383,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,
......@@ -376,7 +433,7 @@ export default {
},
{
star: 2,
count: 10002,
count: 2,
unit: "个"
},
{
......@@ -503,6 +560,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;
}
}
};
......
src/pages/service_shop/services_shop.vue
View file @ da2229fb
......@@ -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