Skip to content

A
apaas-ui
Commit f4066adb authored by 张俊's avatar 张俊
Browse files
Options

合并

parents cadee86a e5bfc0ea
Expand all Show whitespace changes
Inline Side-by-side
Showing with 309 additions and 182 deletions
package.json
View file @ f4066adb
......@@ -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 @ f4066adb
......@@ -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 = 0;
var color = ["#515fe7", "#36a5ec", "#da9f2a", "#23b2a7", "#d46002"];
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 @ f4066adb
<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: () => 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 @ f4066adb
......@@ -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 @ f4066adb
......@@ -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"
......@@ -194,6 +194,7 @@
v-else
class="block-radius-content"
:options="starlistData"
:total="starlistTotal"
style="margin-top: 30px;height: calc(100% - 51px);"
></starlist>
</block-radius>
......@@ -326,72 +327,74 @@ 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: ["被调用次数", "调用次数"]
},
toplistData: [
{
name: "报警应用",
value: 2031,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "数据应用",
value: 2201,
name: "mapvideos",
value: 130,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "消息队列应用",
value: 1901,
name: "语音识别",
value: 121,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "档案中心应用",
value: 1400,
name: "轨迹绘制",
value: 98,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "哈哈应用",
value: 1280,
name: "postgresql",
value: 55,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
}
], // 应用部署排名分析
toplistTargetValue: 2400, // 应用部署排名分析 目标值
toplistTargetValue: 150, // 应用部署排名分析 目标值
appInfoBtnIndex: 0,
commentlistData: [
{
......@@ -453,7 +456,7 @@ export default {
},
{
star: 2,
count: 10002,
count: 2,
unit: "个"
},
{
......@@ -462,38 +465,33 @@ export default {
unit: "个"
}
], // 应用评分
starlistTotal: 15,
hotSearchHeader: [], // 热门搜索 表头
hotSearchData: [
{
hotIndex: 1,
name: "地图视频融合应用1",
count: 666,
increases: 1.28
name: "mapvideos",
count: 89,
increases: 0.28
},
{
hotIndex: 2,
name: "地图视频融合应用2",
count: 666,
increases: 0.03
name: "语音识别",
count: 27,
increases: 0.24
},
{
hotIndex: 3,
name: "地图视频融合应用3",
count: 666,
increases: 0.58
name: "轨迹绘制",
count: 15,
increases: 0.12
},
{
hotIndex: 4,
name: "地图视频融合应用4",
name: "postgresql",
count: 666,
increases: -0.28
increases: -0.05
},
{
hotIndex: 5,
name: "地图视频融合应用5",
count: 666,
increases: -0.58
}
] // 热门搜索 数据
}),
mounted() {
......
src/pages/data-analysis/my-service.vue
View file @ f4066adb
This diff is collapsed.
src/pages/service_shop/services_shop.vue
View file @ f4066adb
......@@ -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