Skip to content

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

数据分析组件

parent 6d6037ba
Hide whitespace changes
Inline Side-by-side
Showing with 304 additions and 50 deletions
src/components/apass-table.vue
View file @ 54ad2078
<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/toplist.vue
View file @ 54ad2078
......@@ -37,7 +37,7 @@ export default {
},
targetValue: {
type: Number,
default: () => 2400,
default: () => 1000,
},
},
methods: {
......
src/pages/data-analysis/my-service.vue
View file @ 54ad2078
......@@ -61,7 +61,37 @@
<block-radius class="block"></block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block"></block-radius>
<block-radius
:show_header="true"
title="服务热门搜索"
class="block"
>
<div class="block-radius-content service-hot-search">
<div class="left-content">
<div class="hot-line">
<p class="hot-line-title">搜索用户数</p>
<div class="hot-line-chart">
<!-- 折线图 -->
</div>
</div>
<div class="hot-line">
<p class="hot-line-title">搜索用户数</p>
<div class="hot-line-chart">
<!-- 折线图 -->
</div>
</div>
</div>
<div class="right-content">
<apass-table
class="hot-search-table"
:header="hotSearchHeader"
:data="hotSearchData"
:padding-left="0"
@sort-change="hotSearchSortChange"
></apass-table>
</div>
</div>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block">
......@@ -83,6 +113,7 @@
<toplist
class="block-radius-content"
:options="toplistData"
:target-value="toplistTargetValue"
></toplist>
</block-radius>
</el-col>
......@@ -144,6 +175,7 @@ import Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist";
import commentlist from "@/components/e-charts/commentlist";
import BarChart from "@/components/e-charts/bar-chart";
import ApassTable from "@/components/apass-table";
export default {
components: {
BlockRadius,
......@@ -155,6 +187,7 @@ export default {
Starlist,
lineChart,
BarChart,
ApassTable,
},
data: () => ({
navList: [],
......@@ -197,7 +230,7 @@ export default {
},
das_data: {
data: 40,
text: "健康占比"
text: "健康占比",
},
bar_data: {
xaxis: [
......@@ -210,7 +243,7 @@ export default {
"01-07",
"01-08",
],
data: [100, 120, 130, 150, 160, 120, 110, 100]
data: [100, 120, 130, 150, 160, 120, 110, 100],
},
bar_data_org: {
xaxis: [
......@@ -221,9 +254,9 @@ export default {
"01-05",
"01-06",
"01-07",
"01-08"
"01-08",
],
data: [100, 120, 130, 150, 160, 120, 110, 100]
data: [100, 120, 130, 150, 160, 120, 110, 100],
},
toplistData: [
{
......@@ -262,6 +295,7 @@ export default {
unit: "次",
},
], // 服务调用排名分析
toplistTargetValue: 2400, // 服务调用排名分析 目标值
serveiceInfoBtnIndex: 0,
commentlistData: [
{
......@@ -332,9 +366,77 @@ export default {
unit: "个",
},
], // 服务评分
hotSearchHeader: [], // 热门搜索 表头
hotSearchData: [
{
hotIndex: 1,
name: "地图视频融合服务1",
count: 666,
increases: 1.28,
},
{
hotIndex: 2,
name: "地图视频融合服务2",
count: 666,
increases: 0.03,
},
{
hotIndex: 3,
name: "地图视频融合服务3",
count: 666,
increases: 0.58,
},
{
hotIndex: 4,
name: "地图视频融合服务4",
count: 666,
increases: -0.28,
},
{
hotIndex: 5,
name: "地图视频融合服务5",
count: 666,
increases: -0.58,
},
], // 热门搜索 数据
}),
mounted() {},
mounted() {
this.hotSearchHeader = [
{
label: "服务排名",
type: "hot-index",
width: 100,
align: "center",
},
{
label: "服务名称",
prop: "name",
type: "button",
callback: this.detailHotSearch,
},
{
label: "搜索次数",
prop: "count",
width: 100,
align: "center",
},
{
label: "日涨幅",
prop: "increases",
width: 100,
sortType: "0", // 0：升序 1：降序
sortable: true,
align: "center",
},
]
},
methods: {
detailHotSearch(item) {
console.log("查看热搜详情");
},
hotSearchSortChange(sortInfo) {
console.log(sortInfo);
},
changeServiceTypeBtn(index) {
console.log(index);
},
......@@ -418,4 +520,48 @@ export default {
height: calc(100% - 36px);
margin-top: 15px;
}
.service-hot-search {
display: flex;
justify-content: flex-start;
align-items: stretch;
height: calc(100% - 21px);
margin-top: 0;
}
.service-hot-search > .left-content {
width: 260px;
flex-shrink: 0;
padding: 0 20px;
box-sizing: border-box;
margin-right: 10px;
}
.service-hot-search > .right-content {
flex-grow: 1;
overflow-x: hidden;
overflow-y: auto;
}
.hot-line {
height: 50%;
}
.hot-line-title {
font-size: 14px;
line-height: 36px;
color: #8890a7;
}
.hot-line-chart {
height: calc(100% - 36px);
background-color: pink;
}
</style>
<style>
.hot-search-table .el-table td,
.hot-search-table .el-table th {
padding: 6px 0;
}
.hot-search-table .el-table div.row_action {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
}
</style>
\ No newline at end of file
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