Skip to content

A
apaas-ui
Commit a978d92c authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

服务管控

parent 7a87dd1e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 525 additions and 956 deletions
src/components/e-charts/doubleLine.vue → src/components/e-charts/doubleBar.vue
View file @ a978d92c
...@@ -9,112 +9,82 @@ export default { ...@@ -9,112 +9,82 @@ export default {
data: { data: {
type: Object, type: Object,
default: () => { default: () => {
return { return null;
title:[], },
dataOne:[],
dataTwo:[]
};
}
}, },
bar_width: { bar_width: {
type: Number, type: Number,
default: 12 default: 12,
}, },
colors: { colors: {
type: Array, type: Array,
default: () => { default: () => {
return [ "#1034eb", "#e56600"]; return ["#1034eb", "#e56600"];
} },
}, },
bar_border_radius: { bar_border_radius: {
type: Array, type: Array,
default: () => { default: () => {
return [10, 0, 0, 10]; return [10, 0, 0, 10];
} },
}, },
bar_border_radius_two: { bar_border_radius_two: {
type: Array, type: Array,
default: () => { default: () => {
return [0, 10, 10, 0]; return [0, 10, 10, 0];
} },
}, },
show_split: { show_split: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
x_router: { x_router: {
type: Number, type: Number,
default: 0 default: 0,
} },
}, },
data: () => ({}), data: () => ({}),
mounted() {}, mounted() {},
methods: { methods: {
bar() { bar() {
let self = this; let self = this;
let yAxis = (self.data && self.data.yAxis) || [];
let series = (self.data && self.data.series) || [{}, {}];
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
// 坐标轴指示器，坐标轴触发有效 type: "shadow",
type: "shadow" // 默认为直线，可选为：'line' | 'shadow' },
},
formatter: function(params, ticket, callback) {
// console.log(params);
var res = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res +=
"<br/>" +
params[i].seriesName +
" : " +
Math.abs(params[i].value);
}
setTimeout(function() {
// 仅为了模拟异步回调
callback(ticket, res);
}, 500);
return "loading...";
}
}, },
legend: { legend: {
data: ["设置警告值", "实际访问值"], data: series.map((item) => item.name),
left: "right", left: "right",
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
orient: "horizontal", orient: "horizontal",
// backgroundColor: "#f4f7fc"
}, },
color:self.colors, color: self.colors,
grid: { grid: {
top: 35, top: 35,
left: 10, left: 10,
right: 30, right: 30,
bottom: 0, bottom: 0,
containLabel: true containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
axisLabel: { axisLabel: {
formatter: function(value) { formatter: function(value) {
return Math.abs(value); //显示的数值都取绝对值 return Math.abs(value);
} },
}, },
type: "value", type: "value",
axisTick: { axisTick: {
show: false show: false,
}, },
// splitLine: { },
// show: false
// }
// splitArea: {
// show: true,
// areaStyle: {
// color: ["#fff", "#f8f9fd"],
// opacity: 0.5
// },
// interval: 0
// }
}
], ],
yAxis: [ yAxis: [
{ {
...@@ -123,31 +93,27 @@ export default { ...@@ -123,31 +93,27 @@ export default {
axisLabel: { axisLabel: {
color: "#333", color: "#333",
textStyle: { textStyle: {
fontSize: 12 fontSize: 12,
} },
}, },
minInterval: 1, minInterval: 1,
data: self.data.title, data: yAxis,
// splitLine: { axisLine: {
// show: false show: false,
// }, },
axisLine:{ },
show:false
}
}
], ],
series: [ series: [
{ {
name: "设置警告值",
type: "bar", type: "bar",
stack: "总量", stack: "总量",
label: { label: {
normal: { normal: {
show: false, show: false,
position: "right" position: "right",
} },
}, },
barWidth : 10,//柱图宽度 barWidth: 10,
itemStyle: { itemStyle: {
normal: { normal: {
color: function(params) { color: function(params) {
...@@ -159,23 +125,23 @@ export default { ...@@ -159,23 +125,23 @@ export default {
[ [
{ {
offset: 0, offset: 0,
color: self.colors[1] // 0% 处的颜色 color: self.colors[1], // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: self.colors[1] // 100% 处的颜色 color: self.colors[1], // 100% 处的颜色
} },
], ],
false false
); );
}, },
barBorderRadius: self.bar_border_radius_two barBorderRadius: self.bar_border_radius_two,
} },
}, },
data: self.data.dataOne name: series[0].name,
data: series[0].data,
}, },
{ {
name: "实际访问值",
type: "bar", type: "bar",
stack: "总量", stack: "总量",
label: { label: {
...@@ -184,10 +150,10 @@ export default { ...@@ -184,10 +150,10 @@ export default {
position: "left", position: "left",
formatter: function(v) { formatter: function(v) {
return Math.abs(v.data); return Math.abs(v.data);
}
}
}, },
barWidth : 10,//柱图宽度 },
},
barWidth: 10,
itemStyle: { itemStyle: {
normal: { normal: {
color: function(params) { color: function(params) {
...@@ -199,25 +165,26 @@ export default { ...@@ -199,25 +165,26 @@ export default {
[ [
{ {
offset: 0, offset: 0,
color: self.colors[0] // 0% 处的颜色 color: self.colors[0], // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: self.colors[0] // 100% 处的颜色 color: self.colors[0], // 100% 处的颜色
} },
], ],
false false
); );
}, },
barBorderRadius: self.bar_border_radius barBorderRadius: self.bar_border_radius,
} },
},
name: series[1].name,
data: series[1].data.map((v) => v * -1),
}, },
data: self.data.dataTwo ],
}
]
}; };
} },
} },
}; };
</script> </script>
<style scoped> <style scoped>
......
src/components/e-charts/rankList.vue 0 → 100644
View file @ a978d92c
<template>
<div
class="top_list apaas_scroll"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
>
<ul>
<li class="rank_list" v-for="(option, index) in options" :key="index">
<div class="item_index">
<span v-text="'TOP' + (index + 1)"></span>
</div>
<div class="item_logo">
<el-avatar
shape="square"
:size="28"
:src="option.cover"
fit="cover"
/>
</div>
<div class="item_detail">
<p class="item_info">
<span>{{ option.name }}</span>
<span v-text="option.percentage + '%'"></span>
</p>
<el-progress
class="item_progress"
:percentage="option.percentage"
:show-text="false"
color="#e56600"
></el-progress>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
options: {
type: Array,
default: () => [],
},
},
data() {
return {
timer: null,
};
},
watch: {
options: {
handler() {
this.autoScroll();
},
deep: true,
},
},
methods: {
autoScroll() {
if (this.timer) {
clearInterval(this.timer);
}
this.$el.scrollTop = 0;
this.timer = setInterval(() => {
let itemHeight = 50;
let curScrollTop = this.$el.scrollTop + itemHeight;
if (
curScrollTop >=
this.$el.scrollHeight - this.$el.clientHeight + itemHeight
) {
curScrollTop = 0;
}
this.$el.scrollTop = Math.min(
curScrollTop,
this.$el.scrollHeight - this.$el.clientHeight
);
}, 1500);
},
mouseenter() {
if (this.timer) {
clearInterval(this.timer);
}
},
mouseleave() {
this.autoScroll();
},
},
mounted() {
this.autoScroll();
window.addEventListener("resize", () => {
this.autoScroll();
});
},
destroyed() {
if (this.timer) {
clearInterval(this.timer);
}
},
};
</script>
<style scoped>
.top_list {
overflow-x: hidden;
overflow-y: auto;
}
.rank_list {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 18px;
}
.item_index {
width: 35px;
flex-shrink: 0;
margin-right: 10px;
font-size: 12px;
color: #58617a;
}
.item_logo {
margin-right: 10px;
flex-shrink: 0;
font-size: 0;
border: 2px solid #e3e5ef;
border-radius: 6px;
overflow: hidden;
}
.item_info {
flex-grow: 1;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 14px;
line-height: 20px;
color: #58617a;
}
.item_detail {
flex-grow: 1;
}
.item_info > span:first-child {
width: 100px;
flex-grow: 1;
margin-right: 10px;
}
.item_info > span:first-child > i {
font-weight: bold;
font-size: 12px;
color: #8e96ab;
}
.item_info > span:nth-child(2) {
flex-shrink: 0;
white-space: nowrap;
color: #0d1847;
}
.item_progress {
margin-top: 6px;
}
.is_link {
cursor: pointer;
}
</style>
src/pages/data-analysis/org-control.vue
View file @ a978d92c
This diff is collapsed.
src/pages/data-analysis/super-control.vue
View file @ a978d92c
This diff is collapsed.
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