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
Hide whitespace changes
Inline Side-by-side
Showing with 1127 additions and 144 deletions
src/components/apass-table.vue
View file @ 3cab9fe3
<template> <template>
<div class="apass_table"> <div class="apass_table">
<el-table :data="data"> <el-table :data="data" @sort-change="sortChange">
<el-table-column v-if="paddingLeft > 10" :width="paddingLeft - 10"></el-table-column> <el-table-column
v-if="paddingLeft > 10"
:width="paddingLeft - 10"
></el-table-column>
<el-table-column <el-table-column
v-for="(item, index) in header" v-for="(item, index) in header"
:label="item.label" :label="item.label"
:align="item.align || 'left'" :align="item.align || 'left'"
:width="item.width" :width="item.width"
:key="'head_' + index" :key="'head_' + index"
:prop="item.prop"
:sortable="item.sortable ? 'custom' : false"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="item.type === 'buttons'" class="row_action"> <div v-if="item.type === 'buttons'" class="row_action">
...@@ -44,27 +49,73 @@ ...@@ -44,27 +49,73 @@
></a> ></a>
</div> </div>
<div v-else-if="item.type === 'icon'"> <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
<img src="../assets/imgs/ic_yiwancheng.png" alt="" v-if="scope.row[item.prop]==2" style="width:100%;height:100%;"> src="../assets/imgs/ic_true.png"
<img src="../assets/imgs/ic_restart.png" alt="" v-if="scope.row[item.prop]==3" style="width:100%;height:100%;"> alt=""
<img src="../assets/imgs/ic_failed.png" alt="" v-if="scope.row[item.prop]==4" style="width:100%;height:100%;"> 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>
<div v-else-if="item.type === 'tag'" class="table_tag"> <div v-else-if="item.type === 'tag'" class="table_tag">
<el-tag <el-tag
v-for="(item,index) in scope.row[item.prop]" v-if="index<=1||tag_flag_arr[scope.$index]==1" v-for="(item, index) in scope.row[item.prop]"
:key="index+5515"> v-if="index <= 1 || tag_flag_arr[scope.$index] == 1"
:key="index + 5515"
>
{{ item }} {{ item }}
</el-tag> </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
<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> 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>
<div v-else-if="item.type === 'chart'" class="charts"> <div v-else-if="item.type === 'chart'" class="charts">
<sparkline :indicatorStyles="spIndicatorStyles1"> <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> </sparkline>
<span class="use" v-if="item.prop=='cpu'">{{scope.row['cpu_use']}}.00mm</span> <span class="use" v-if="item.prop == 'cpu'"
<span class="use" v-if="item.prop=='mermoy'">{{scope.row['memory_use']}}Mi</span> >{{ scope.row["cpu_use"] }}.00mm</span
</div> >
<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"> <div v-else-if="item.type === 'image'" class="img_content">
<img <img
:src="item.getImage && item.getImage(scope.row)" :src="item.getImage && item.getImage(scope.row)"
...@@ -92,6 +143,22 @@ ...@@ -92,6 +143,22 @@
></span> ></span>
</el-tooltip> </el-tooltip>
</div> </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 <span
v-else v-else
v-text=" v-text="
...@@ -119,47 +186,55 @@ export default { ...@@ -119,47 +186,55 @@ export default {
type: [Number, String], type: [Number, String],
default: () => 50, default: () => 50,
}, },
height:{ height: {
type: Number, type: Number,
default: null, default: null,
}, },
}, },
data(){ data() {
return{ return {
tag_flag_arr:[], tag_flag_arr: [],
spCurveStyles2: { spCurveStyles2: {
stroke: '#515fe7', stroke: "#515fe7",
fill: '#515fe7' fill: "#515fe7",
// fill: '#d2d6f8' // fill: '#d2d6f8'
}, },
spCurveStyles3: { spCurveStyles3: {
stroke: '#37c299', stroke: "#37c299",
fill: '#37c299' fill: "#37c299",
// fill: '#c8ebe4' // fill: '#c8ebe4'
}, },
// 指示器样式 // 指示器样式
spIndicatorStyles1: false, spIndicatorStyles1: false,
spRefLineStyles3:{ spRefLineStyles3: {
stroke: '#d14', stroke: "#d14",
strokeOpacity: 0, strokeOpacity: 0,
strokeDasharray: '2, 2' strokeDasharray: "2, 2",
}, },
} };
}, },
mounted(){ mounted() {
this.tag_flag_arr = Array.from({length: this.data.length},(item,index)=>item = 0) 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> </script>
<style> <style>
.table_tag .el-tag{ .table_tag .el-tag {
background-color: #58617a; background-color: #58617a;
color: #fff; color: #fff;
display: inline-block; display: inline-block;
...@@ -171,7 +246,7 @@ export default { ...@@ -171,7 +246,7 @@ export default {
margin-right: 3px; margin-right: 3px;
margin-bottom: 3px; margin-bottom: 3px;
} }
.tagclo{ .tagclo {
display: inline-block; display: inline-block;
width: 22px; width: 22px;
height: 22px; height: 22px;
...@@ -182,18 +257,18 @@ export default { ...@@ -182,18 +257,18 @@ export default {
background-size: contain; background-size: contain;
margin-top: -3px; margin-top: -3px;
} }
.btn_down{ .btn_down {
background-image: url('../assets/imgs/btn_expand.png'); background-image: url("../assets/imgs/btn_expand.png");
} }
.btn_up{ .btn_up {
background-image: url('../assets/imgs/btn_fold.png'); background-image: url("../assets/imgs/btn_fold.png");
} }
.charts{ .charts {
position: relative; position: relative;
} }
.charts .use{ .charts .use {
position: absolute; position: absolute;
bottom:0; bottom: 0;
right: -10px; right: -10px;
font-size: 12px; font-size: 12px;
color: rgba(26, 34, 54, 1); color: rgba(26, 34, 54, 1);
...@@ -202,6 +277,39 @@ export default { ...@@ -202,6 +277,39 @@ export default {
font-size: 12px; font-size: 12px;
line-height: 20px; 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>
<style scoped> <style scoped>
......
src/components/e-charts/bar-chart.vue
View file @ 3cab9fe3
...@@ -12,7 +12,6 @@ export default { ...@@ -12,7 +12,6 @@ export default {
return { return {
xaxis: [], xaxis: [],
data: [] data: []
}; };
} }
}, },
...@@ -37,14 +36,19 @@ export default { ...@@ -37,14 +36,19 @@ export default {
default: false default: false
} }
}, },
data: () => ({ data: () => ({}),
navList: []
}),
mounted() {}, mounted() {},
methods: { methods: {
bar() { bar() {
let self = this; let self = this;
return { return {
grid: {
left: 10,
right: 10,
bottom: 25,
top: 25,
containLabel: true
},
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
...@@ -57,7 +61,7 @@ export default { ...@@ -57,7 +61,7 @@ export default {
}, },
interval: 0, interval: 0,
rotate: 30, rotate: 30,
formatter: function(value) { formatter: function(value) {
let valueTxt = ""; let valueTxt = "";
if (value.length > 6) { if (value.length > 6) {
valueTxt = value.substring(0, 5) + "..."; valueTxt = value.substring(0, 5) + "...";
......
src/components/e-charts/dashboard.vue
View file @ 3cab9fe3
...@@ -24,9 +24,7 @@ export default { ...@@ -24,9 +24,7 @@ export default {
default: false default: false
} }
}, },
data: () => ({ data: () => ({}),
navList: []
}),
mounted() {}, mounted() {},
methods: { methods: {
dashboard() { 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> <template>
<div> <ul class="star_list">
<ul class="star_list"> <li
<li class="item_list"
class="item_list" v-for="(option, index) in options"
v-for="(option, index) in options" :key="'star_info_' + index"
:key="'star_info_' + index" >
<el-rate
class="item-rate"
:colors="['#8890a7', '#8890a7', '#8890a7']"
:value="option.star"
disabled
disabled-void-color="transparent"
> >
<el-rate </el-rate>
class="item-rate" <el-progress
:colors="['#8890a7', '#8890a7', '#8890a7']" class="item-progress"
:value="option.star" :percentage="getPercent(option.count)"
disabled :show-text="false"
disabled-void-color="transparent" color="#e56600"
> ></el-progress>
</el-rate> <span class="item-text" v-text="option.count + '个'"></span>
<el-progress </li>
class="item-progress" </ul>
:percentage="getPercent(option.count)"
:show-text="false"
color="#e56600"
></el-progress>
<span class="item-text" v-text="option.count + '个'"></span>
</li>
</ul>
</div>
</template> </template>
<script> <script>
......
src/components/e-charts/toplist.vue
View file @ 3cab9fe3
...@@ -37,7 +37,7 @@ export default { ...@@ -37,7 +37,7 @@ export default {
}, },
targetValue: { targetValue: {
type: Number, type: Number,
default: () => 2400, default: () => 1000,
}, },
}, },
methods: { methods: {
......
src/pages/data-analysis/my-application.vue
View file @ 3cab9fe3
...@@ -4,18 +4,570 @@ ...@@ -4,18 +4,570 @@
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t("lang.myApplicationDataAnalysis") }}</el-breadcrumb-item> <el-breadcrumb-item>{{ $t("lang.myApplicationDataAnalysis") }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<el-row class="in_analysis">
<!-- 可横向铺满 -->
<el-col :span="6" class="in_left">
<el-row>
<el-col :span="24" class="in_block">
<block-radius :show_header="true" title="应用总体概况" class="block">
<div class="left_1">
<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_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>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="应用调用次数分析"
:buttons_arr="['近7天', '近30天']"
@changeButton="changeServiceCellBtn"
class="block"
>
<Graph :data="graph_arr" />
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="应用类型分析"
:buttons_arr="['发布的应用', '调用的应用']"
@changeButton="changeServiceTypeBtn"
class="block"
>
<multiple-circle class="block-radius-content" :data="mult_data" :text="text"></multiple-circle>
</block-radius>
</el-col>
</el-row>
</el-col>
<el-col :span="12" class="in_center">
<el-row>
<el-col :span="24" class="in_block">
<block-radius class="block"></block-radius>
</el-col>
<el-col :span="24" class="in_block">
<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"
:show_header="true"
title="应用总数变化趋势"
:buttons_arr="['近14天', '近30天']"
@changeButton="changeAppTotalChangeBtn"
>
<line-chart class="block-radius-content" :data="line_data"></line-chart>
</block-radius>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="in_right">
<el-row>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="应用部署排名分析"
:buttons_arr="['被部署次数', '被部署次数']"
@changeButton="changeServeiceApplyCountBtn"
class="block"
>
<toplist
class="block-radius-content"
:options="toplistData"
:target-value="toplistTargetValue"
></toplist>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="应用评价及评分"
:buttons_arr="['应用评价', '应用评分']"
@changeButton="changeAppInfoBtn"
class="block"
>
<commentlist
v-if="appInfoBtnIndex == 0"
class="block-radius-content"
:data="commentlistData"
></commentlist>
<starlist
v-else
class="block-radius-content"
:options="starlistData"
style="margin-top: 30px;height: calc(100% - 51px);"
></starlist>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
class="block"
:show_header="true"
title="应用在线区域统计"
>
<single-circle class="block-radius-content" :data="single_data"></single-circle>
</block-radius>
</el-col>
</el-row>
</el-col>
<!-- 不可横向铺满，一般为最后一行 -->
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="应用来源机构分析" class="block">
<BarChart :data="bar_data_org" :colors="['#e56600', '#e56600']" />
</block-radius>
</el-col>
<el-col :span="18" class="in_block default">
<block-radius class="block">
<img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
</block-radius>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script> <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";
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";
import Graph from "@/components/e-charts/graph";
export default { export default {
components: {}, components: {
BlockRadius,
Dashboard,
multipleCircle,
singleCircle,
Toplist,
Starlist,
Commentlist,
lineChart,
BarChart,
ApassTable,
Graph
},
data: () => ({ data: () => ({
navList: [] navList: [],
mult_data: [
{ name: "基础工具", value: 40 },
{ name: "通用应用", value: 0 },
{ name: "业务应用", value: 2 }
],
text: "应用总数",
single_data: {
num: 12,
color: "#515fe7",
text: "共享"
},
line_data: {
xaxis: [
"01-01",
"01-02",
"01-03",
"01-04",
"01-05",
"01-06",
"01-07",
"01-08"
],
data: [
{
name: "开发者应用",
arr: [100, 120, 130, 150, 160, 120, 110, 100]
},
{
name: "平台应用",
arr: [120, 130, 140, 130, 140, 120, 100, 90]
},
{
name: "未上架",
arr: [80, 90, 100, 110, 100, 70, 80, 90]
}
]
},
das_data: {
data: 40,
text: "健康占比"
},
bar_data_org: {
xaxis: [
"01-01",
"01-02",
"01-03",
"01-04",
"01-05",
"01-06",
"01-07",
"01-08"
],
data: [100, 120, 130, 150, 160, 120, 110, 100]
},
graph_arr: {
xaxis: [
"01-01",
"01-02",
"01-03",
"01-04",
"01-05",
"01-06",
"01-07",
"01-08"
],
data: [
[1010, 120, 130, 520, 160, 1120, 110, 100],
[100, 1210, 130, 1530, 160, 120, 110, 1200]
],
legend: ["aaa1", "bbb1"]
},
toplistData: [
{
name: "报警应用",
value: 2031,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "数据应用",
value: 2201,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "消息队列应用",
value: 1901,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "档案中心应用",
value: 1400,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "哈哈应用",
value: 1280,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
}
], // 应用部署排名分析
toplistTargetValue: 2400, // 应用部署排名分析 目标值
appInfoBtnIndex: 0,
commentlistData: [
{
add_time: "2020-07-14T16:35:40Z",
content: "1111111111111111",
id: 36,
picture_path:
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 5,
service_id: 128,
user_name: "普通用户lxy"
},
{
add_time: "2020-07-14T16:35:40Z",
content: "1111111111111111",
id: 36,
picture_path:
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 4,
service_id: 128,
user_name: "普通用户lxy"
},
{
add_time: "2020-07-14T16:35:40Z",
content: "1111111111111111",
id: 36,
picture_path:
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 3,
service_id: 128,
user_name: "普通用户lxy"
},
{
add_time: "2020-07-14T16:35:40Z",
content: "1111111111111111",
id: 36,
picture_path:
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 2,
service_id: 128,
user_name: "普通用户lxy"
}
], // 应用评价
starlistData: [
{
star: 5,
count: 5,
unit: "个"
},
{
star: 4,
count: 4,
unit: "个"
},
{
star: 3,
count: 3,
unit: "个"
},
{
star: 2,
count: 10002,
unit: "个"
},
{
star: 1,
count: 1,
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() {
methods: {} 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);
},
changeApplicationFieldBtn(index) {
console.log("xxx: " + index);
},
changeServiceCellBtn(index) {
console.log("应用调用次数分析: " + index);
},
changeServeiceApplyCountBtn(index) {
console.log("应用部署排名分析: " + index);
},
changeAppInfoBtn(index) {
this.appInfoBtnIndex = index;
console.log("应用评价及评分: " + index);
},
changeAppTotalChangeBtn(index) {
console.log("应用总数变化趋势: " + index);
}
}
}; };
</script> </script>
<style scoped> <style scoped>
.in_analysis {
padding: 0 10px 10px;
height: 100%;
width: 100%;
min-width: 1700px;
}
.in_l {
}
.in_r {
}
.in_c {
}
.in_block {
height: 280px;
padding: 10px;
}
.height_2x {
height: 560px;
}
.block {
width: 100%;
height: 100%;
}
.left_1 {
height: 100%;
display: flex;
justify-content: space-between;
}
.left_1_l {
width: 40%;
height: 100%;
display: inline-block;
padding: 20px 0 0 0;
}
.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;
}
.left_1_r {
width: 50%;
height: 100%;
display: inline-block;
}
.default {
text-align: center;
}
.default_img {
width: 330px;
height: 230px;
}
.block-radius-content {
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> </style>
\ No newline at end of file
src/pages/data-analysis/my-service.vue
View file @ 3cab9fe3
<template> <template>
<div> <div>
<el-breadcrumb separator="/" class="bread_crumb1"> <el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ <el-breadcrumb-item :to="{ path: '/data_analysis' }">
{{
$t("lang.dataAnalysis") $t("lang.dataAnalysis")
}}</el-breadcrumb-item> }}
<el-breadcrumb-item>{{ </el-breadcrumb-item>
<el-breadcrumb-item>
{{
$t("lang.myServiceDataAnalysis") $t("lang.myServiceDataAnalysis")
}}</el-breadcrumb-item> }}
</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<el-row class="in_analysis"> <el-row class="in_analysis">
<!-- 可横向铺满 --> <!-- 可横向铺满 -->
<el-col :span="6" class="in_left"> <el-col :span="6" class="in_left">
<el-row> <el-row>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius <block-radius :show_header="true" title="服务总体概况" class="block">
:show_header="true"
title="服务总体概况"
class="block"
>
<div class="left_1"> <div class="left_1">
<div ref="left_1_l" class="left_1_l"> <div ref="left_1_l" class="left_1_l">
<img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" /> <img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
@changeButton="changeServiceTypeBtn" @changeButton="changeServiceTypeBtn"
class="block" class="block"
> >
<multiple-circle :data="mult_data" :text="text"></multiple-circle> <multiple-circle class="block-radius-content" :data="mult_data" :text="text"></multiple-circle>
</block-radius> </block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
...@@ -61,11 +61,47 @@ ...@@ -61,11 +61,47 @@
<block-radius class="block"></block-radius> <block-radius class="block"></block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <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>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius class="block"> <block-radius
<line-chart :data="line_data"></line-chart> class="block"
:show_header="true"
title="服务总数变化趋势"
:buttons_arr="['近14天', '近30天']"
@changeButton="changeServeiceTotalChangeBtn"
>
<line-chart class="block-radius-content" :data="line_data"></line-chart>
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -83,15 +119,30 @@ ...@@ -83,15 +119,30 @@
<toplist <toplist
class="block-radius-content" class="block-radius-content"
:options="toplistData" :options="toplistData"
:target-value="toplistTargetValue"
></toplist> ></toplist>
</block-radius> </block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius class="block"></block-radius> <block-radius
:show_header="true"
title="服务调用次数分析"
:buttons_arr="['近7天', '近30天']"
@changeButton="changeServiceCellBtn"
class="block"
>
<Graph :data="graph_arr" />
</block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius class="block"> <block-radius
<single-circle :data="single_data"></single-circle> :show_header="true"
title="服务开放程度统计"
:buttons_arr="['发布的服务', '调用的服务']"
@changeButton="changeOpenessBtnindex"
class="block"
>
<single-circle class="block-radius-content" :data="single_data"></single-circle>
</block-radius> </block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
...@@ -107,10 +158,11 @@ ...@@ -107,10 +158,11 @@
class="block-radius-content" class="block-radius-content"
:data="commentlistData" :data="commentlistData"
></commentlist> ></commentlist>
<starlist <starlist
v-else v-else
class="block-radius-content" class="block-radius-content"
:options="starlistData" :options="starlistData"
style="margin-top: 30px;height: calc(100% - 51px);"
></starlist> ></starlist>
</block-radius> </block-radius>
</el-col> </el-col>
...@@ -124,10 +176,7 @@ ...@@ -124,10 +176,7 @@
</el-col> </el-col>
<el-col :span="18" class="in_block default"> <el-col :span="18" class="in_block default">
<block-radius class="block"> <block-radius class="block">
<img <img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
:src="require('@/assets/imgs/data_img_default.gif')"
class="default_img"
/>
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -142,8 +191,10 @@ import singleCircle from "@/components/e-charts/single_circle"; ...@@ -142,8 +191,10 @@ import singleCircle from "@/components/e-charts/single_circle";
import lineChart from "@/components/e-charts/line_chart"; import lineChart from "@/components/e-charts/line_chart";
import Toplist from "@/components/e-charts/toplist"; import Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist"; import Starlist from "@/components/e-charts/starlist";
import commentlist from "@/components/e-charts/commentlist"; import Commentlist from "@/components/e-charts/commentlist";
import BarChart from "@/components/e-charts/bar-chart"; import BarChart from "@/components/e-charts/bar-chart";
import ApassTable from "@/components/apass-table";
import Graph from "@/components/e-charts/graph";
export default { export default {
components: { components: {
BlockRadius, BlockRadius,
...@@ -151,23 +202,25 @@ export default { ...@@ -151,23 +202,25 @@ export default {
multipleCircle, multipleCircle,
singleCircle, singleCircle,
Toplist, Toplist,
commentlist, Commentlist,
Starlist, Starlist,
lineChart, lineChart,
BarChart, BarChart,
ApassTable,
Graph
}, },
data: () => ({ data: () => ({
navList: [], navList: [],
mult_data: [ mult_data: [
{ name: "基础工具", value: 40 }, { name: "基础工具", value: 40 },
{ name: "通用应用", value: 0 }, { name: "通用应用", value: 0 },
{ name: "业务应用", value: 2 }, { name: "业务应用", value: 2 }
], ],
text: "应用总数", text: "应用总数",
single_data: { single_data: {
num: 12, num: 12,
color: "#515fe7", color: "#515fe7",
text: "共享", text: "共享"
}, },
line_data: { line_data: {
xaxis: [ xaxis: [
...@@ -178,26 +231,26 @@ export default { ...@@ -178,26 +231,26 @@ export default {
"01-05", "01-05",
"01-06", "01-06",
"01-07", "01-07",
"01-08", "01-08"
], ],
data: [ data: [
{ {
name: "开发者应用", name: "开发者应用",
arr: [100, 120, 130, 150, 160, 120, 110, 100], arr: [100, 120, 130, 150, 160, 120, 110, 100]
}, },
{ {
name: "平台应用", name: "平台应用",
arr: [120, 130, 140, 130, 140, 120, 100, 90], arr: [120, 130, 140, 130, 140, 120, 100, 90]
}, },
{ {
name: "未上架", name: "未上架",
arr: [80, 90, 100, 110, 100, 70, 80, 90], arr: [80, 90, 100, 110, 100, 70, 80, 90]
}, }
], ]
}, },
das_data: { das_data: {
data: 40, data: 40,
text: "健康占比" text: "健康占比",
}, },
bar_data: { bar_data: {
xaxis: [ xaxis: [
...@@ -208,9 +261,9 @@ export default { ...@@ -208,9 +261,9 @@ export default {
"01-05", "01-05",
"01-06", "01-06",
"01-07", "01-07",
"01-08", "01-08"
], ],
data: [100, 120, 130, 150, 160, 120, 110, 100] data: [100, 120, 130, 150, 160, 120, 110, 100],
}, },
bar_data_org: { bar_data_org: {
xaxis: [ xaxis: [
...@@ -221,9 +274,9 @@ export default { ...@@ -221,9 +274,9 @@ export default {
"01-05", "01-05",
"01-06", "01-06",
"01-07", "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: [ toplistData: [
{ {
...@@ -231,37 +284,38 @@ export default { ...@@ -231,37 +284,38 @@ export default {
value: 2031, value: 2031,
logo: logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次", unit: "次"
}, },
{ {
name: "数据服务", name: "数据服务",
value: 2201, value: 2201,
logo: logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次", unit: "次"
}, },
{ {
name: "消息队列服务", name: "消息队列服务",
value: 1901, value: 1901,
logo: logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次", unit: "次"
}, },
{ {
name: "档案中心服务", name: "档案中心服务",
value: 1400, value: 1400,
logo: logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次", unit: "次"
}, },
{ {
name: "哈哈服务", name: "哈哈服务",
value: 1280, value: 1280,
logo: logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次", unit: "次"
}, }
], // 服务调用排名分析 ], // 服务调用排名分析
toplistTargetValue: 2400, // 服务调用排名分析 目标值
serveiceInfoBtnIndex: 0, serveiceInfoBtnIndex: 0,
commentlistData: [ commentlistData: [
{ {
...@@ -272,7 +326,7 @@ export default { ...@@ -272,7 +326,7 @@ export default {
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob", "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 5, score: 5,
service_id: 128, service_id: 128,
user_name: "普通用户lxy", user_name: "普通用户lxy"
}, },
{ {
add_time: "2020-07-14T16:35:40Z", add_time: "2020-07-14T16:35:40Z",
...@@ -282,7 +336,7 @@ export default { ...@@ -282,7 +336,7 @@ export default {
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob", "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 4, score: 4,
service_id: 128, service_id: 128,
user_name: "普通用户lxy", user_name: "普通用户lxy"
}, },
{ {
add_time: "2020-07-14T16:35:40Z", add_time: "2020-07-14T16:35:40Z",
...@@ -292,7 +346,7 @@ export default { ...@@ -292,7 +346,7 @@ export default {
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob", "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 3, score: 3,
service_id: 128, service_id: 128,
user_name: "普通用户lxy", user_name: "普通用户lxy"
}, },
{ {
add_time: "2020-07-14T16:35:40Z", add_time: "2020-07-14T16:35:40Z",
...@@ -302,54 +356,148 @@ export default { ...@@ -302,54 +356,148 @@ export default {
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob", "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 2, score: 2,
service_id: 128, service_id: 128,
user_name: "普通用户lxy", user_name: "普通用户lxy"
}, }
], // 服务评价 ], // 服务评价
starlistData: [ starlistData: [
{ {
star: 5, star: 5,
count: 5, count: 5,
unit: "个", unit: "个"
}, },
{ {
star: 4, star: 4,
count: 4, count: 4,
unit: "个", unit: "个"
}, },
{ {
star: 3, star: 3,
count: 3, count: 3,
unit: "个", unit: "个"
}, },
{ {
star: 2, star: 2,
count: 10002, count: 10002,
unit: "个", unit: "个"
}, },
{ {
star: 1, star: 1,
count: 1, count: 1,
unit: "个", 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,
},
], // 热门搜索 数据
graph_arr: {
xaxis: [
"01-01",
"01-02",
"01-03",
"01-04",
"01-05",
"01-06",
"01-07",
"01-08"
],
data: [
[1010, 120, 130, 520, 160, 1120, 110, 100],
[100, 1210, 130, 1530, 160, 120, 110, 1200]
],
legend: ["aaa1", "bbb1"]
}
}), }),
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: { methods: {
detailHotSearch(item) {
console.log("查看热搜详情");
},
hotSearchSortChange(sortInfo) {
console.log("服务热门搜索: " + sortInfo);
},
changeServiceTypeBtn(index) { changeServiceTypeBtn(index) {
console.log(index); console.log("服务类型分析:" + index);
}, },
changeApplicationFieldBtn(index) { changeApplicationFieldBtn(index) {
console.log(index); console.log("服务应用领域统计: " + index);
}, },
changeServeiceApplyCountBtn(index) { changeServeiceApplyCountBtn(index) {
console.log(index); console.log("服务调用排名分析: " + index);
}, // 服务调用排名分析 },
changeServeiceInfoBtn(index) { changeServeiceInfoBtn(index) {
this.serveiceInfoBtnIndex = index; this.serveiceInfoBtnIndex = index;
console.log(index); console.log("服务评价及评分: " + index);
}, // 服务评价及评分 },
}, changeOpenessBtnindex(index) {
console.log("服务开放程度统计: " + index);
},
changeServiceCellBtn(index) {
console.log("服务调用次数分析: " + index);
},
changeServeiceTotalChangeBtn(index) {
console.log("服务总数变化趋势: " + index);
}
}
}; };
</script> </script>
<style scoped> <style scoped>
...@@ -418,4 +566,48 @@ export default { ...@@ -418,4 +566,48 @@ export default {
height: calc(100% - 36px); height: calc(100% - 36px);
margin-top: 15px; 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>
<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