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>
<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
......@@ -4,18 +4,570 @@
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t("lang.myApplicationDataAnalysis") }}</el-breadcrumb-item>
</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>
</template>
<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 {
components: {},
components: {
BlockRadius,
Dashboard,
multipleCircle,
singleCircle,
Toplist,
Starlist,
Commentlist,
lineChart,
BarChart,
ApassTable,
Graph
},
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() {},
methods: {}
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);
},
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>
<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>
\ No newline at end of file
src/pages/data-analysis/my-service.vue
View file @ 3cab9fe3
<template>
<div>
<el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{
<el-breadcrumb-item :to="{ path: '/data_analysis' }">
{{
$t("lang.dataAnalysis")
}}</el-breadcrumb-item>
<el-breadcrumb-item>{{
}}
</el-breadcrumb-item>
<el-breadcrumb-item>
{{
$t("lang.myServiceDataAnalysis")
}}</el-breadcrumb-item>
}}
</el-breadcrumb-item>
</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"
>
<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" />
......@@ -39,7 +39,7 @@
@changeButton="changeServiceTypeBtn"
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>
</el-col>
<el-col :span="24" class="in_block">
......@@ -61,11 +61,47 @@
<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">
<line-chart :data="line_data"></line-chart>
<block-radius
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>
</el-col>
</el-row>
......@@ -83,15 +119,30 @@
<toplist
class="block-radius-content"
:options="toplistData"
:target-value="toplistTargetValue"
></toplist>
</block-radius>
</el-col>
<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 :span="24" class="in_block">
<block-radius class="block">
<single-circle :data="single_data"></single-circle>
<block-radius
:show_header="true"
title="服务开放程度统计"
:buttons_arr="['发布的服务', '调用的服务']"
@changeButton="changeOpenessBtnindex"
class="block"
>
<single-circle class="block-radius-content" :data="single_data"></single-circle>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
......@@ -107,10 +158,11 @@
class="block-radius-content"
:data="commentlistData"
></commentlist>
<starlist
v-else
class="block-radius-content"
:options="starlistData"
<starlist
v-else
class="block-radius-content"
:options="starlistData"
style="margin-top: 30px;height: calc(100% - 51px);"
></starlist>
</block-radius>
</el-col>
......@@ -124,10 +176,7 @@
</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"
/>
<img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
</block-radius>
</el-col>
</el-row>
......@@ -142,8 +191,10 @@ 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 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 {
components: {
BlockRadius,
......@@ -151,23 +202,25 @@ export default {
multipleCircle,
singleCircle,
Toplist,
commentlist,
Commentlist,
Starlist,
lineChart,
BarChart,
ApassTable,
Graph
},
data: () => ({
navList: [],
mult_data: [
{ name: "基础工具", value: 40 },
{ name: "通用应用", value: 0 },
{ name: "业务应用", value: 2 },
{ name: "业务应用", value: 2 }
],
text: "应用总数",
single_data: {
num: 12,
color: "#515fe7",
text: "共享",
text: "共享"
},
line_data: {
xaxis: [
......@@ -178,26 +231,26 @@ export default {
"01-05",
"01-06",
"01-07",
"01-08",
"01-08"
],
data: [
{
name: "开发者应用",
arr: [100, 120, 130, 150, 160, 120, 110, 100],
arr: [100, 120, 130, 150, 160, 120, 110, 100]
},
{
name: "平台应用",
arr: [120, 130, 140, 130, 140, 120, 100, 90],
arr: [120, 130, 140, 130, 140, 120, 100, 90]
},
{
name: "未上架",
arr: [80, 90, 100, 110, 100, 70, 80, 90],
},
],
arr: [80, 90, 100, 110, 100, 70, 80, 90]
}
]
},
das_data: {
data: 40,
text: "健康占比"
text: "健康占比",
},
bar_data: {
xaxis: [
......@@ -208,9 +261,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],
},
bar_data_org: {
xaxis: [
......@@ -221,9 +274,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: [
{
......@@ -231,37 +284,38 @@ export default {
value: 2031,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次",
unit: "次"
},
{
name: "数据服务",
value: 2201,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次",
unit: "次"
},
{
name: "消息队列服务",
value: 1901,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次",
unit: "次"
},
{
name: "档案中心服务",
value: 1400,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次",
unit: "次"
},
{
name: "哈哈服务",
value: 1280,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次",
},
unit: "次"
}
], // 服务调用排名分析
toplistTargetValue: 2400, // 服务调用排名分析 目标值
serveiceInfoBtnIndex: 0,
commentlistData: [
{
......@@ -272,7 +326,7 @@ export default {
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 5,
service_id: 128,
user_name: "普通用户lxy",
user_name: "普通用户lxy"
},
{
add_time: "2020-07-14T16:35:40Z",
......@@ -282,7 +336,7 @@ export default {
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 4,
service_id: 128,
user_name: "普通用户lxy",
user_name: "普通用户lxy"
},
{
add_time: "2020-07-14T16:35:40Z",
......@@ -292,7 +346,7 @@ export default {
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 3,
service_id: 128,
user_name: "普通用户lxy",
user_name: "普通用户lxy"
},
{
add_time: "2020-07-14T16:35:40Z",
......@@ -302,54 +356,148 @@ export default {
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 2,
service_id: 128,
user_name: "普通用户lxy",
},
user_name: "普通用户lxy"
}
], // 服务评价
starlistData: [
{
star: 5,
count: 5,
unit: "个",
unit: "个"
},
{
star: 4,
count: 4,
unit: "个",
unit: "个"
},
{
star: 3,
count: 3,
unit: "个",
unit: "个"
},
{
star: 2,
count: 10002,
unit: "个",
unit: "个"
},
{
star: 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: {
detailHotSearch(item) {
console.log("查看热搜详情");
},
hotSearchSortChange(sortInfo) {
console.log("服务热门搜索: " + sortInfo);
},
changeServiceTypeBtn(index) {
console.log(index);
console.log("服务类型分析:" + index);
},
changeApplicationFieldBtn(index) {
console.log(index);
console.log("服务应用领域统计: " + index);
},
changeServeiceApplyCountBtn(index) {
console.log(index);
}, // 服务调用排名分析
console.log("服务调用排名分析: " + index);
},
changeServeiceInfoBtn(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>
<style scoped>
......@@ -418,4 +566,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