Skip to content

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

水球图，拓扑图、柱状图折线图修改，分配传参

parent f08b4095
Show whitespace changes
Inline Side-by-side
Showing with 330 additions and 41 deletions
src/components/allot-info-confirm.vue
View file @ cd75137d
......@@ -110,7 +110,7 @@ export default {
this.$http
.get("/apaas/service/v3/resource/apply/distributionDisplay", {
params: {
apply_id: apply_id,
apply_id: apply_id
},
})
.then(({ data }) => {
......@@ -146,6 +146,7 @@ export default {
params: {
id: this.detail.id,
user_id: this.detail.user_id,
namespace: this.detail.namespace
},
})
.then(({ data }) => {
......
src/components/e-charts/bar-chart.vue
View file @ cd75137d
......@@ -32,8 +32,12 @@ export default {
}
},
show_split: {
typr: Boolean,
type: Boolean,
default: false
},
x_router: {
type: Number,
default: 0
}
},
data: () => ({}),
......@@ -60,7 +64,7 @@ export default {
fontSize: 12
},
interval: 0,
rotate: 30,
rotate: self.x_router,
formatter: function(value) {
let valueTxt = "";
if (value.length > 6) {
......
src/components/e-charts/graph.vue
View file @ cd75137d
......@@ -17,9 +17,7 @@ export default {
}
}
},
data: () => ({
navList: []
}),
data: () => ({}),
mounted() {},
methods: {
graph() {
......@@ -95,7 +93,7 @@ export default {
lineStyle: {
width: 2,
color: "#274fee",
shadowColor: "rgb(39, 79, 238, 0.3)",
shadowColor: "rgb(39, 79, 238, 0.4)",
shadowBlur: 5,
shadowOffsetY: 8
}
......@@ -112,7 +110,7 @@ export default {
lineStyle: {
width: 2,
color: "#ef9433",
shadowColor: "rgb(239, 148, 51, 0.3)",
shadowColor: "rgb(239, 148, 51, 0.4)",
shadowBlur: 5,
shadowOffsetY: 8
}
......
src/components/e-charts/water-polo.vue 0 → 100644
View file @ cd75137d
<template>
<chart :options="water()" class="water" />
</template>
<script>
import { graphic } from "echarts/lib/export";
export default {
props: {
data: {
type: Object,
default: () => {
return {
xaxis: [],
data: [],
legend: []
};
}
}
},
data: () => ({}),
mounted() {},
methods: {
water() {
let self = this;
return {
title: [
{
text: "支持开发",
x: "center",
y: "40%",
textStyle: {
fontSize: 14,
fontWeight: "normal",
color: "#58617a"
}
},
{
text: "不支持开发",
x: "center",
y: "90%",
textStyle: {
fontSize: 14,
fontWeight: "normal",
color: "#58617a"
}
}
],
series: [
{
type: "liquidFill",
data: [
{
name: "A",
value: 0.67,
key: 77
}
],
radius: "50%",
center: ["50%", "25%"],
outline: {
borderDistance: 5,
itemStyle: {
borderWidth: 5,
borderColor: "#e56600",
shadowBlur: 0
}
},
backgroundStyle: {
color: "#fff",
opacity: 1
},
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: ["#e6ebfe"] // 0% 处的颜色
},
{
offset: 0,
color: ["#515fe7"] // 100% 处的颜色
}
],
global: false // 缺省为 false
},
opacity: 1,
shadowBlur: 0
},
label: {
normal: {
formatter: function(param) {
return "63%";
},
textStyle: {
color: "#000",
insideColor: "#000",
fontSize: 14
}
}
}
},
{
type: "liquidFill",
data: [
{
name: "A",
value: 0.67,
key: 77
}
],
radius: "50%",
center: ["50%", "75%"],
outline: {
borderDistance: 5,
itemStyle: {
borderWidth: 5,
borderColor: "#e56600",
shadowBlur: 0
}
},
backgroundStyle: {
color: "#fff",
opacity: 1
},
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: ["#e6ebfe"] // 0% 处的颜色
},
{
offset: 0,
color: ["#515fe7"] // 100% 处的颜色
}
],
global: false // 缺省为 false
},
opacity: 1,
shadowBlur: 0
},
label: {
normal: {
formatter: function(param) {
return "63%";
},
textStyle: {
color: "#000",
insideColor: "#000",
fontSize: 14
}
}
}
}
]
};
}
}
};
</script>
<style scoped>
.water {
width: 100%;
height: calc(100% - 20px);
}
</style>
\ No newline at end of file
src/components/topology.vue
View file @ cd75137d
......@@ -416,7 +416,7 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.canvas {
height: 600px;
height: 100%;
width: 100%;
margin: 0 auto;
position: relative;
......
src/main.js
View file @ cd75137d
......@@ -39,6 +39,9 @@ import 'echarts/lib/component/polar'; // 极坐标系
import 'echarts/lib/chart/scatter'; // 散点图
import 'echarts/lib/component/dataZoom'
import liquidfill from 'echarts-liquidfill'
Vue.use(liquidfill)
import Sparkline from 'vue-sparklines'
Vue.use(Sparkline)
......
src/pages/data-analysis/my-application.vue
View file @ cd75137d
......@@ -9,14 +9,37 @@
<el-col :span="6" class="in_left">
<el-row>
<el-col :span="24" class="in_block">
<block-radius :show_header="true" title="服务总体概况" class="block">
<block-radius :show_header="true" title="应用总体概况" class="block">
<div class="left_1">
<div class="left_block">
<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_num">2222</div>
</div>
<dashboard ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></dashboard>
</div>
<div class="chain">
月环比
<span class="chain_mid" :class="overview.month_chain >= 0 ? 'chain_up' : 'chain_down'">
{{ Math.abs(overview.month_chain) }}
<img
:src="overview.month_chain >= 0 ? require('@/assets/imgs/icon_up.png') : require('@/assets/imgs/icon_down.png')"
/>
</span>周环比
<span :class="overview.week_chain >= 0 ? 'chain_up' : 'chain_down'">
{{ Math.abs(overview.week_chain) }}
<img
:src="overview.week_chain >= 0 ? require('@/assets/imgs/icon_up.png') : require('@/assets/imgs/icon_down.png')"
/>
</span>
</div>
<div class="left_1_line"></div>
<div class="left_1_l_bottom">日均被部署次数<span class="left_1_l_bottom_msg">12432</span>（次）</div>
</div>
<div class="left_1_right">
<WaterPolo />
</div>
</div>
</block-radius>
</el-col>
......@@ -95,7 +118,6 @@
<script>
import BlockRadius from "@/components/general/block-radius";
import Dashboard from "@/components/e-charts/dashboard";
import multipleCircle from "@/components/e-charts/multiple_circle";
import singleCircle from "@/components/e-charts/single_circle";
import lineChart from "@/components/e-charts/line_chart";
......@@ -103,20 +125,24 @@ import Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist";
import BarChart from "@/components/e-charts/bar-chart";
import Graph from "@/components/e-charts/graph";
import WaterPolo from "@/components/e-charts/water-polo";
export default {
components: {
BlockRadius,
Dashboard,
multipleCircle,
singleCircle,
Toplist,
Starlist,
lineChart,
BarChart,
Graph
Graph,
WaterPolo
},
data: () => ({
navList: [],
overview: {
month_chain: 14.5,
week_chain: -14.2
},
mult_data: [
{ name: "基础工具", value: 40 },
{ name: "通用应用", value: 0 },
......@@ -154,10 +180,6 @@ export default {
}
]
},
das_data: {
data: 40,
text: "健康占比"
},
bar_data_org: {
xaxis: [
"01-01",
......@@ -232,29 +254,72 @@ export default {
display: flex;
justify-content: space-between;
}
.left_1_l {
width: 40%;
.left_block {
width: 70%;
height: 100%;
display: inline-block;
padding: 20px 0 0 0;
padding: 10px 0 0 0;
}
.left_1_l {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.left_1_title {
width: 100%;
text-align: center;
}
.left_1_num {
font-size: 32px;
color: #515fe7;
width: 100%;
text-align: center;
}
.left_1_img {
width: 120px;
display: block;
margin: 0 auto;
height: 120px;
display: inline-block;
}
.chain {
color: #58617a;
font-size: 14px;
padding: 10px 0;
text-align: center;
}
.chain_down {
background-color: #fbe8e8;
border-radius: 3px;
padding: 2px 4px;
font-size: 12px;
margin-left: 8px;
}
.chain_up {
background-color: #e7fdfc;
border-radius: 3px;
padding: 1px 4px;
font-size: 12px;
margin-left: 8px;
}
.chain_mid {
margin-right: 20px;
}
.left_1_l_bottom {
color: #58617a;
padding: 10px;
}
.left_1_l_bottom_msg {
margin-left: 20px;
}
.left_1_msg {
display: inline-block;
width: 120px;
padding-bottom: 10px;
}
.left_1_line {
width: 90%;
margin-left: 5%;
height: 1px;
background-color: #f2f2f2;
}
.left_1_r {
width: 50%;
.left_1_right {
width: 30%;
height: 100%;
display: inline-block;
}
......
src/pages/data-analysis/my-service.vue
View file @ cd75137d
......@@ -58,7 +58,9 @@
<el-col :span="12" class="in_center">
<el-row>
<el-col :span="24" class="in_block height_2x">
<block-radius class="block"></block-radius>
<block-radius :show_header="true" title="运行拓扑图" class="block">
<Topology class="topology" :datas="topology_datas" />
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block"></block-radius>
......@@ -120,7 +122,7 @@
<!-- 不可横向铺满，一般为最后一行 -->
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="服务来源机构分析" class="block">
<BarChart :data="bar_data_org" :colors="['#e56600', '#e56600']" />
<BarChart :data="bar_data_org" :x_router="30" :colors="['#e56600', '#e56600']" />
</block-radius>
</el-col>
<el-col :span="18" class="in_block default">
......@@ -143,6 +145,7 @@ import Starlist from "@/components/e-charts/starlist";
import commentlist from "@/components/e-charts/commentlist";
import BarChart from "@/components/e-charts/bar-chart";
import Graph from "@/components/e-charts/graph";
import Topology from "@/components/topology.vue";
export default {
components: {
BlockRadius,
......@@ -154,10 +157,10 @@ export default {
Starlist,
lineChart,
BarChart,
Graph
Graph,
Topology
},
data: () => ({
navList: [],
mult_data: [
{ name: "基础工具", value: 40 },
{ name: "通用应用", value: 0 },
......@@ -348,9 +351,12 @@ export default {
[100, 1210, 130, 1530, 160, 120, 110, 1200]
],
legend: ["aaa1", "bbb1"]
}
},
topology_datas: {}
}),
mounted() {},
mounted() {
this.getTopologyData();
},
methods: {
changeServiceTypeBtn(index) {
console.log(index);
......@@ -368,6 +374,11 @@ export default {
}, // 服务评价及评分
changeServiceCellBtn(index) {
console.log(index);
},
getTopologyData() {
this.$api.workbench.getServiceTopology().then(response => {
this.topology_datas = response.data.elements;
});
}
}
};
......@@ -405,7 +416,7 @@ export default {
width: 40%;
height: 100%;
display: inline-block;
padding: 20px 0 0 0;
padding: 10px 0 0 0;
}
.left_1_title {
width: 100%;
......@@ -438,4 +449,8 @@ export default {
height: calc(100% - 36px);
margin-top: 15px;
}
.topology {
width: 100%;
height: calc(100% - 20px);
}
</style>
src/pages/user/order/order_list.vue
View file @ cd75137d
......@@ -15,7 +15,6 @@ export default {
OrderList
},
data: () => ({
navList: []
}),
mounted() {},
methods: {}
......
yarn.lock
View file @ cd75137d
......@@ -2706,6 +2706,11 @@ duplexify@^3.4.2, duplexify@^3.6.0:
readable-stream "^2.0.0"
stream-shift "^1.0.0"
echarts-liquidfill@^2.0.6:
version "2.0.6"
resolved "https://registry.npm.taobao.org/echarts-liquidfill/download/echarts-liquidfill-2.0.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts-liquidfill%2Fdownload%2Fecharts-liquidfill-2.0.6.tgz#0668dc61d87a6262003090bd32c55aa8108c252e"
integrity sha1-BmjcYdh6YmIAMJC9MsVaqBCMJS4=
echarts@^4.8.0:
version "4.8.0"
resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.8.0.tgz#b2c1cfb9229b13d368ee104fc8eea600b574d4c4"
......@@ -7528,6 +7533,16 @@ xtend@^4.0.0, xtend@~4.0.1:
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
xterm-addon-fit@^0.4.0:
version "0.4.0"
resolved "https://registry.npm.taobao.org/xterm-addon-fit/download/xterm-addon-fit-0.4.0.tgz#06e0c5d0a6aaacfb009ef565efa1c81e93d90193"
integrity sha1-BuDF0KaqrPsAnvVl76HIHpPZAZM=
xterm@^4.7.0:
version "4.8.1"
resolved "https://registry.npm.taobao.org/xterm/download/xterm-4.8.1.tgz#155a1729a43e1a89b406524e22c5634339e39ca1"
integrity sha1-FVoXKaQ+Gom0BlJOIsVjQznjnKE=
xxhashjs@^0.2.1:
version "0.2.2"
resolved "https://registry.yarnpkg.com/xxhashjs/-/xxhashjs-0.2.2.tgz#8a6251567621a1c46a5ae204da0249c7f8caa9d8"
......@@ -7550,6 +7565,18 @@ yallist@^3.0.2:
resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
yaml2json@^1.0.2:
version "1.0.2"
resolved "https://registry.npm.taobao.org/yaml2json/download/yaml2json-1.0.2.tgz#3ab846deb87c062d9904e143c6947128d488c119"
integrity sha1-OrhG3rh8Bi2ZBOFDxpRxKNSIwRk=
dependencies:
yaml "0.2.x"
yaml@0.2.x:
version "0.2.3"
resolved "https://registry.npm.taobao.org/yaml/download/yaml-0.2.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyaml%2Fdownload%2Fyaml-0.2.3.tgz#b5450e92e76ef36b5dd24e3660091ebaeef3e5c7"
integrity sha1-tUUOkudu82td0k42YAkeuu7z5cc=
yargs-parser@^11.1.1:
version "11.1.1"
resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-11.1.1.tgz#879a0865973bca9f6bab5cbdf3b1c67ec7d3bcf4"
......
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