Skip to content

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

数据分析组件

parent 0aa6a0df
Hide whitespace changes
Inline Side-by-side
Showing with 302 additions and 92 deletions
src/components/comments-list.vue
View file @ 6d6037ba
......@@ -20,13 +20,15 @@
</el-rate>
</div>
<p class="comment-description" v-text="item.content"></p>
<p class="comment-time" v-text="item.add_time"></p>
<p class="comment-time" v-text="getTimeText(item.add_time || '')"></p>
</div>
</li>
</ul>
</template>
<script>
import helper from "@/services/helper.js";
export default {
props: {
data: {
......@@ -34,9 +36,11 @@ export default {
required: true,
},
},
data: () => ({}),
methods: {},
created() {},
methods: {
getTimeText(time) {
return helper.dateStringTransform(time);
},
},
};
</script>
......
src/components/e-charts/commentlist.vue 0 → 100644
View file @ 6d6037ba
<template>
<ul class="comments_list">
<li
class="comment_card"
v-for="(item, index) in data"
:key="'comment_' + index"
>
<div class="comment-left">
<el-avatar :size="45" fit="cover" :src="item.picture_path" />
</div>
<div class="comment-right">
<p class="comment-base">
<span
class="comment-user_name text_clip"
v-text="item.user_name"
></span>
<span
class="comment-time text_clip"
v-text="getTimeText(item.add_time || '')"
></span>
</p>
<div class="commnet-rate">
<el-rate
:colors="['#e69232', '#e69232', '#e69232']"
:value="item.score"
disabled
score-template="{value}"
>
</el-rate>
</div>
<p class="comment-description" v-text="item.content"></p>
</div>
</li>
</ul>
</template>
<script>
import helper from "@/services/helper.js";
export default {
props: {
data: {
type: Array,
required: true,
},
},
methods: {
getTimeText(time) {
return helper.dateStringTransform(time);
},
},
};
</script>
<style scoped>
.comments_list {
overflow-x: hidden;
overflow-y: auto;
}
.comment_card {
margin-right: 10px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding: 10px 0;
border-top: 2px solid #f4f7fc;
}
.comment_card:nth-child(1) {
border-top: none;
}
.comment_card:last-child {
border-bottom: 2px solid #f4f7fc;
}
.comment-left {
flex-shrink: 0;
padding-top: 8px;
margin-right: 20px;
}
.comment-right {
flex-grow: 1;
line-height: 20px;
}
.comment-base {
padding-left: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: #58617a;
}
.comment-user_name {
flex-grow: 1;
color: #58617a;
margin-right: 10px;
}
.comment-time {
flex-shrink: 0;
color: #8890a7;
}
.comment-description {
padding-left: 3px;
color: #242c43;
}
</style>
<style>
.comment-right > .commnet-rate .el-rate {
height: 20px;
}
.comment-right > .commnet-rate .el-rate__icon {
font-size: 20px;
margin-right: 0;
}
</style>
src/components/e-charts/starlist.vue
View file @ 6d6037ba
......@@ -31,33 +31,7 @@ export default {
props: {
options: {
type: Array,
default: () => [
{
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: "个",
},
],
default: () => [],
},
total: {
type: Number,
......@@ -74,7 +48,6 @@ export default {
<style scoped>
.star_list {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
......
src/components/e-charts/toplist.vue
View file @ 6d6037ba
......@@ -33,43 +33,7 @@ export default {
props: {
options: {
type: Array,
default: () => [
{
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: "次",
},
],
default: () => [],
},
targetValue: {
type: Number,
......@@ -86,7 +50,6 @@ export default {
<style scoped>
.top_list {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
......
src/pages/data-analysis/my-service.vue
View file @ 6d6037ba
<template>
<div>
<el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t("lang.myServiceDataAnalysis") }}</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{
$t("lang.dataAnalysis")
}}</el-breadcrumb-item>
<el-breadcrumb-item>{{
$t("lang.myServiceDataAnalysis")
}}</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" />
......@@ -65,8 +73,17 @@
<el-col :span="6" class="in_right">
<el-row>
<el-col :span="24" class="in_block">
<block-radius class="block">
<toplist></toplist>
<block-radius
:show_header="true"
title="服务调用排名分析"
:buttons_arr="['被调用次数', '被调用次数']"
@changeButton="changeServeiceApplyCountBtn"
class="block"
>
<toplist
class="block-radius-content"
:options="toplistData"
></toplist>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
......@@ -78,8 +95,23 @@
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block">
<starlist></starlist>
<block-radius
:show_header="true"
title="服务评价及评分"
:buttons_arr="['服务评价', '服务评分']"
@changeButton="changeServeiceInfoBtn"
class="block"
>
<commentlist
v-if="serveiceInfoBtnIndex == 0"
class="block-radius-content"
:data="commentlistData"
></commentlist>
<starlist
v-else
class="block-radius-content"
:options="starlistData"
></starlist>
</block-radius>
</el-col>
</el-row>
......@@ -92,7 +124,10 @@
</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>
......@@ -107,6 +142,7 @@ 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";
export default {
components: {
......@@ -115,22 +151,23 @@ export default {
multipleCircle,
singleCircle,
Toplist,
commentlist,
Starlist,
lineChart,
BarChart
BarChart,
},
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: [
......@@ -141,22 +178,22 @@ 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,
......@@ -171,7 +208,7 @@ export default {
"01-05",
"01-06",
"01-07",
"01-08"
"01-08",
],
data: [100, 120, 130, 150, 160, 120, 110, 100]
},
......@@ -187,7 +224,114 @@ export default {
"01-08"
],
data: [100, 120, 130, 150, 160, 120, 110, 100]
}
},
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: "次",
},
], // 服务调用排名分析
serveiceInfoBtnIndex: 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: "个",
},
], // 服务评分
}),
mounted() {},
methods: {
......@@ -196,8 +340,16 @@ export default {
},
changeApplicationFieldBtn(index) {
console.log(index);
}
}
},
changeServeiceApplyCountBtn(index) {
console.log(index);
}, // 服务调用排名分析
changeServeiceInfoBtn(index) {
this.serveiceInfoBtnIndex = index;
console.log(index);
}, // 服务评价及评分
},
};
</script>
<style scoped>
......@@ -262,4 +414,8 @@ export default {
width: 330px;
height: 230px;
}
</style>
\ No newline at end of file
.block-radius-content {
height: calc(100% - 36px);
margin-top: 15px;
}
</style>
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