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 @@ ...@@ -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 @ da2229fb
...@@ -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 / 20, value: temp2_data / 20,
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 @ da2229fb
<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: () => 10015, default: () => 4
}, },
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 @ da2229fb
...@@ -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 @ da2229fb
...@@ -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"
...@@ -226,7 +226,7 @@ export default { ...@@ -226,7 +226,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 }
], ],
...@@ -264,31 +264,40 @@ export default { ...@@ -264,31 +264,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 @ da2229fb
...@@ -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
...@@ -210,12 +231,21 @@ export default { ...@@ -210,12 +231,21 @@ 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 },
], ],
text: "应用总数", text: "服务总数",
single_data: { single_data: {
num: 12, num: 12,
color: "#515fe7", color: "#515fe7",
...@@ -253,29 +283,24 @@ export default { ...@@ -253,29 +283,24 @@ export default {
}, },
bar_data: { bar_data: {
xaxis: [ 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: { 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: [
{ {
...@@ -358,6 +383,38 @@ export default { ...@@ -358,6 +383,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,
...@@ -376,7 +433,7 @@ export default { ...@@ -376,7 +433,7 @@ export default {
}, },
{ {
star: 2, star: 2,
count: 10002, count: 2,
unit: "个" unit: "个"
}, },
{ {
...@@ -503,6 +560,10 @@ export default { ...@@ -503,6 +560,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;
} }
} }
}; };
......
src/pages/service_shop/services_shop.vue
View file @ da2229fb
...@@ -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