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 {
data: {
type: Object,
default: () => {
return {
title:[],
dataOne:[],
dataTwo:[]
};
}
return null;
},
},
bar_width: {
type: Number,
default: 12
default: 12,
},
colors: {
type: Array,
default: () => {
return [ "#1034eb", "#e56600"];
}
return ["#1034eb", "#e56600"];
},
},
bar_border_radius: {
type: Array,
default: () => {
return [10, 0, 0, 10];
}
},
},
bar_border_radius_two: {
type: Array,
default: () => {
return [0, 10, 10, 0];
}
},
},
show_split: {
type: Boolean,
default: false
default: false,
},
x_router: {
type: Number,
default: 0
}
default: 0,
},
},
data: () => ({}),
mounted() {},
methods: {
bar() {
let self = this;
let yAxis = (self.data && self.data.yAxis) || [];
let series = (self.data && self.data.series) || [{}, {}];
return {
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
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...";
}
type: "shadow",
},
},
legend: {
data: ["设置警告值", "实际访问值"],
data: series.map((item) => item.name),
left: "right",
itemWidth: 10,
itemHeight: 10,
orient: "horizontal",
// backgroundColor: "#f4f7fc"
},
color:self.colors,
color: self.colors,
grid: {
top: 35,
left: 10,
right: 30,
bottom: 0,
containLabel: true
containLabel: true,
},
xAxis: [
{
axisLabel: {
formatter: function(value) {
return Math.abs(value); //显示的数值都取绝对值
}
return Math.abs(value);
},
},
type: "value",
axisTick: {
show: false
},
// splitLine: {
// show: false
// }
// splitArea: {
// show: true,
// areaStyle: {
// color: ["#fff", "#f8f9fd"],
// opacity: 0.5
// },
// interval: 0
// }
}
show: false,
},
},
],
yAxis: [
{
......@@ -123,31 +93,27 @@ export default {
axisLabel: {
color: "#333",
textStyle: {
fontSize: 12
}
fontSize: 12,
},
},
minInterval: 1,
data: self.data.title,
// splitLine: {
// show: false
// },
axisLine:{
show:false
}
}
data: yAxis,
axisLine: {
show: false,
},
},
],
series: [
{
name: "设置警告值",
type: "bar",
stack: "总量",
label: {
normal: {
show: false,
position: "right"
}
position: "right",
},
},
barWidth : 10,//柱图宽度
barWidth: 10,
itemStyle: {
normal: {
color: function(params) {
......@@ -159,23 +125,23 @@ export default {
[
{
offset: 0,
color: self.colors[1] // 0% 处的颜色
color: self.colors[1], // 0% 处的颜色
},
{
offset: 1,
color: self.colors[1] // 100% 处的颜色
}
color: self.colors[1], // 100% 处的颜色
},
],
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",
stack: "总量",
label: {
......@@ -184,10 +150,10 @@ export default {
position: "left",
formatter: function(v) {
return Math.abs(v.data);
}
}
},
barWidth : 10,//柱图宽度
},
},
barWidth: 10,
itemStyle: {
normal: {
color: function(params) {
......@@ -199,25 +165,26 @@ export default {
[
{
offset: 0,
color: self.colors[0] // 0% 处的颜色
color: self.colors[0], // 0% 处的颜色
},
{
offset: 1,
color: self.colors[0] // 100% 处的颜色
}
color: self.colors[0], // 100% 处的颜色
},
],
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>
<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