Skip to content

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

Merge branch 'dev' of https://cloud.wodcloud.com/git/apaas/apaas-v3-ui into dev

parents fe16a102 9d64c73f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1127 additions and 144 deletions
src/components/apass-table.vue
View file @ 3cab9fe3
<template>
<div class="apass_table">
<el-table :data="data">
<el-table-column v-if="paddingLeft > 10" :width="paddingLeft - 10"></el-table-column>
<el-table :data="data" @sort-change="sortChange">
<el-table-column
v-if="paddingLeft > 10"
:width="paddingLeft - 10"
></el-table-column>
<el-table-column
v-for="(item, index) in header"
:label="item.label"
:align="item.align || 'left'"
:width="item.width"
:key="'head_' + index"
:prop="item.prop"
:sortable="item.sortable ? 'custom' : false"
>
<template slot-scope="scope">
<div v-if="item.type === 'buttons'" class="row_action">
......@@ -44,27 +49,73 @@
></a>
</div>
<div v-else-if="item.type === 'icon'">
<img src="../assets/imgs/ic_true.png" alt="" v-if="scope.row[item.prop]==1" style="width:100%;height:100%;">
<img src="../assets/imgs/ic_yiwancheng.png" alt="" v-if="scope.row[item.prop]==2" style="width:100%;height:100%;">
<img src="../assets/imgs/ic_restart.png" alt="" v-if="scope.row[item.prop]==3" style="width:100%;height:100%;">
<img src="../assets/imgs/ic_failed.png" alt="" v-if="scope.row[item.prop]==4" style="width:100%;height:100%;">
<img
src="../assets/imgs/ic_true.png"
alt=""
v-if="scope.row[item.prop] == 1"
style="width:100%;height:100%;"
/>
<img
src="../assets/imgs/ic_yiwancheng.png"
alt=""
v-if="scope.row[item.prop] == 2"
style="width:100%;height:100%;"
/>
<img
src="../assets/imgs/ic_restart.png"
alt=""
v-if="scope.row[item.prop] == 3"
style="width:100%;height:100%;"
/>
<img
src="../assets/imgs/ic_failed.png"
alt=""
v-if="scope.row[item.prop] == 4"
style="width:100%;height:100%;"
/>
</div>
<div v-else-if="item.type === 'tag'" class="table_tag">
<el-tag
v-for="(item,index) in scope.row[item.prop]" v-if="index<=1||tag_flag_arr[scope.$index]==1"
:key="index+5515">
v-for="(item, index) in scope.row[item.prop]"
v-if="index <= 1 || tag_flag_arr[scope.$index] == 1"
:key="index + 5515"
>
{{ item }}
</el-tag>
<div class="tagclo btn_down" v-if="tag_flag_arr[scope.$index]==0&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,1)"></div>
<div class="tagclo btn_up" v-if="tag_flag_arr[scope.$index]==1&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,0)"></div>
<div
class="tagclo btn_down"
v-if="
tag_flag_arr[scope.$index] == 0 &&
scope.row[item.prop].length > 2
"
@click="change_tag(scope.$index, 1)"
></div>
<div
class="tagclo btn_up"
v-if="
tag_flag_arr[scope.$index] == 1 &&
scope.row[item.prop].length > 2
"
@click="change_tag(scope.$index, 0)"
></div>
</div>
<div v-else-if="item.type === 'chart'" class="charts">
<sparkline :indicatorStyles="spIndicatorStyles1">
<sparklineCurve :refLineStyles="spRefLineStyles3" :refLineType="false" :data="scope.row[item.prop]" :limit="scope.row[item.prop].length" :styles="item.prop=='cpu'?spCurveStyles2:spCurveStyles3" />
<sparklineCurve
:refLineStyles="spRefLineStyles3"
:refLineType="false"
:data="scope.row[item.prop]"
:limit="scope.row[item.prop].length"
:styles="item.prop == 'cpu' ? spCurveStyles2 : spCurveStyles3"
/>
</sparkline>
<span class="use" v-if="item.prop=='cpu'">{{scope.row['cpu_use']}}.00mm</span>
<span class="use" v-if="item.prop=='mermoy'">{{scope.row['memory_use']}}Mi</span>
</div>
<span class="use" v-if="item.prop == 'cpu'"
>{{ scope.row["cpu_use"] }}.00mm</span
>
<span class="use" v-if="item.prop == 'mermoy'"
>{{ scope.row["memory_use"] }}Mi</span
>
</div>
<div v-else-if="item.type === 'image'" class="img_content">
<img
:src="item.getImage && item.getImage(scope.row)"
......@@ -92,6 +143,22 @@
></span>
</el-tooltip>
</div>
<span
v-else-if="item.type === 'hot-index'"
class="hot_index"
:class="'index_' + scope.row.hotIndex"
v-text="'TOP' + scope.row.hotIndex"
></span>
<span class="sort_table" v-else-if="item.sortable">
<span>{{ getPercent(scope.row[item.prop]) }}</span>
<span>
<img
v-if="scope.row[item.prop] >= 0"
:src="require('../assets/imgs/icon_up.png')"
/>
<img v-else :src="require('../assets/imgs/icon_down.png')" />
</span>
</span>
<span
v-else
v-text="
......@@ -119,47 +186,55 @@ export default {
type: [Number, String],
default: () => 50,
},
height:{
height: {
type: Number,
default: null,
},
},
data(){
return{
tag_flag_arr:[],
data() {
return {
tag_flag_arr: [],
spCurveStyles2: {
stroke: '#515fe7',
fill: '#515fe7'
stroke: "#515fe7",
fill: "#515fe7",
// fill: '#d2d6f8'
},
spCurveStyles3: {
stroke: '#37c299',
fill: '#37c299'
stroke: "#37c299",
fill: "#37c299",
// fill: '#c8ebe4'
},
// 指示器样式
spIndicatorStyles1: false,
spRefLineStyles3:{
stroke: '#d14',
spRefLineStyles3: {
stroke: "#d14",
strokeOpacity: 0,
strokeDasharray: '2, 2'
strokeDasharray: "2, 2",
},
}
};
},
mounted(){
this.tag_flag_arr = Array.from({length: this.data.length},(item,index)=>item = 0)
mounted() {
this.tag_flag_arr = Array.from(
{ length: this.data.length },
(item, index) => (item = 0)
);
},
methods: {
change_tag(index, val) {
this.$set(this.tag_flag_arr, index, val);
},
sortChange(value) {
this.$emit("sort-change", value);
},
getPercent(num) {
return Math.round(num * 100) + "%";
},
},
methods:{
change_tag(index,val){
this.$set(this.tag_flag_arr,index,val)
}
}
};
</script>
<style>
.table_tag .el-tag{
.table_tag .el-tag {
background-color: #58617a;
color: #fff;
display: inline-block;
......@@ -171,7 +246,7 @@ export default {
margin-right: 3px;
margin-bottom: 3px;
}
.tagclo{
.tagclo {
display: inline-block;
width: 22px;
height: 22px;
......@@ -182,18 +257,18 @@ export default {
background-size: contain;
margin-top: -3px;
}
.btn_down{
background-image: url('../assets/imgs/btn_expand.png');
.btn_down {
background-image: url("../assets/imgs/btn_expand.png");
}
.btn_up{
background-image: url('../assets/imgs/btn_fold.png');
.btn_up {
background-image: url("../assets/imgs/btn_fold.png");
}
.charts{
.charts {
position: relative;
}
.charts .use{
.charts .use {
position: absolute;
bottom:0;
bottom: 0;
right: -10px;
font-size: 12px;
color: rgba(26, 34, 54, 1);
......@@ -202,6 +277,39 @@ export default {
font-size: 12px;
line-height: 20px;
}
.hot_index {
font-family: "Arial";
font-style: italic;
font-weight: 800;
font-size: 16px;
color: #b9bab5;
}
.hot_index.index_1 {
color: #d9ac64;
}
.hot_index.index_2 {
color: #c3c4c0;
}
.hot_index.index_3 {
color: #ba6e40;
}
.sort_table {
display: flex;
justify-content: center;
align-items: center;
}
.sort_table > span {
flex-shrink: 0;
}
.sort_table > span:nth-child(1) {
flex-grow: 1;
text-align: right;
}
.sort_table > span:nth-child(2) {
width: 30%;
margin-left: 5px;
text-align: left;
}
</style>
<style scoped>
......
src/components/e-charts/bar-chart.vue
View file @ 3cab9fe3
......@@ -12,7 +12,6 @@ export default {
return {
xaxis: [],
data: []
};
}
},
......@@ -37,14 +36,19 @@ export default {
default: false
}
},
data: () => ({
navList: []
}),
data: () => ({}),
mounted() {},
methods: {
bar() {
let self = this;
return {
grid: {
left: 10,
right: 10,
bottom: 25,
top: 25,
containLabel: true
},
xAxis: [
{
type: "category",
......@@ -57,7 +61,7 @@ export default {
},
interval: 0,
rotate: 30,
formatter: function(value) {
formatter: function(value) {
let valueTxt = "";
if (value.length > 6) {
valueTxt = value.substring(0, 5) + "...";
......
src/components/e-charts/dashboard.vue
View file @ 3cab9fe3
......@@ -24,9 +24,7 @@ export default {
default: false
}
},
data: () => ({
navList: []
}),
data: () => ({}),
mounted() {},
methods: {
dashboard() {
......
src/components/e-charts/graph.vue 0 → 100644
View file @ 3cab9fe3
<template>
<chart :options="graph()" class="graph" />
</template>
<script>
import { graphic } from "echarts/lib/export";
export default {
props: {
data: {
type: Object,
default: () => {
return {
xaxis: [],
data: [],
legend: []
};
}
}
},
data: () => ({
navList: []
}),
mounted() {},
methods: {
graph() {
let self = this;
return {
color: ["#274fee", "#ef9433"],
legend: {
bottom: 0,
left: "center",
icon: "roundRect",
itemWidth: 10,
itemHeight: 10,
data: self.data.legend,
orient: "horizontal",
backgroundColor: "#f4f7fc"
},
grid: {
left: 10,
right: 10,
bottom: 25,
top: 25,
containLabel: true
},
xAxis: [
{
type: "category",
data: self.data.xaxis,
axisLine: {
lineStyle: {
color: "#f2f2f2"
}
},
axisLabel: {
margin: 20,
color: "#0d1847",
textStyle: {
fontSize: 12
},
interval: 0
},
boundaryGap: false
}
],
yAxis: [
{
type: "value",
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(0, 0, 0, 0)"
}
},
axisLabel: {
color: "#a9aec0",
textStyle: {
fontSize: 12
}
}
}
],
series: [
{
name: self.data.legend[0],
type: "line",
data: self.data.data[0],
symbolSize: 1,
symbol: "circle",
smooth: true,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 2,
color: "#274fee",
shadowColor: "rgb(39, 79, 238, 0.3)",
shadowBlur: 5,
shadowOffsetY: 8
}
},
{
name: self.data.legend[1],
type: "line",
data: self.data.data[1],
symbolSize: 1,
symbol: "circle",
smooth: true,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 2,
color: "#ef9433",
shadowColor: "rgb(239, 148, 51, 0.3)",
shadowBlur: 5,
shadowOffsetY: 8
}
}
]
};
}
}
};
</script>
<style scoped>
.graph {
width: 100%;
height: calc(100% - 20px);
}
</style>
\ No newline at end of file
src/components/e-charts/starlist.vue
View file @ 3cab9fe3
<template>
<div>
<ul class="star_list">
<li
class="item_list"
v-for="(option, index) in options"
:key="'star_info_' + index"
<ul class="star_list">
<li
class="item_list"
v-for="(option, index) in options"
:key="'star_info_' + index"
>
<el-rate
class="item-rate"
:colors="['#8890a7', '#8890a7', '#8890a7']"
:value="option.star"
disabled
disabled-void-color="transparent"
>
<el-rate
class="item-rate"
:colors="['#8890a7', '#8890a7', '#8890a7']"
:value="option.star"
disabled
disabled-void-color="transparent"
>
</el-rate>
<el-progress
class="item-progress"
:percentage="getPercent(option.count)"
:show-text="false"
color="#e56600"
></el-progress>
<span class="item-text" v-text="option.count + '个'"></span>
</li>
</ul>
</div>
</el-rate>
<el-progress
class="item-progress"
:percentage="getPercent(option.count)"
:show-text="false"
color="#e56600"
></el-progress>
<span class="item-text" v-text="option.count + '个'"></span>
</li>
</ul>
</template>
<script>
......
src/components/e-charts/toplist.vue
View file @ 3cab9fe3
......@@ -37,7 +37,7 @@ export default {
},
targetValue: {
type: Number,
default: () => 2400,
default: () => 1000,
},
},
methods: {
......
src/pages/data-analysis/my-application.vue
View file @ 3cab9fe3
This diff is collapsed.
src/pages/data-analysis/my-service.vue
View file @ 3cab9fe3
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