Skip to content

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

应用数据分析

parent 542089ec
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 35 deletions
src/pages/data-analysis/my-application.vue
View file @ 0a6d623c
...@@ -9,11 +9,11 @@ ...@@ -9,11 +9,11 @@
<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 :show_header="true" title="服务总体概况" class="block"> <block-radius :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" />
<div class="left_1_title">服务总数</div> <div class="left_1_title">应用总数</div>
<div class="left_1_num">2222</div> <div class="left_1_num">2222</div>
</div> </div>
<dashboard ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></dashboard> <dashboard ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></dashboard>
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius <block-radius
:show_header="true" :show_header="true"
title="服务调用次数分析" title="应用调用次数分析"
:buttons_arr="['近7天', '近30天']" :buttons_arr="['近7天', '近30天']"
@changeButton="changeServiceCellBtn" @changeButton="changeServiceCellBtn"
class="block" class="block"
...@@ -34,12 +34,12 @@ ...@@ -34,12 +34,12 @@
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius <block-radius
:show_header="true" :show_header="true"
title="服务类型分析" title="应用类型分析"
:buttons_arr="['发布的服务', '调用的服务']" :buttons_arr="['发布的应用', '调用的应用']"
@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-row> </el-row>
...@@ -53,8 +53,14 @@ ...@@ -53,8 +53,14 @@
<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
<line-chart :data="line_data"></line-chart> 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> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -62,25 +68,55 @@ ...@@ -62,25 +68,55 @@
<el-col :span="6" class="in_right"> <el-col :span="6" class="in_right">
<el-row> <el-row>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius class="block"> <block-radius
<toplist></toplist> :show_header="true"
title="应用部署排名分析"
:buttons_arr="['被部署次数', '被部署次数']"
@changeButton="changeServeiceApplyCountBtn"
class="block"
>
<toplist
class="block-radius-content"
:options="toplistData"
:target-value="toplistTargetValue"
></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
<starlist></starlist> :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> </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> class="block"
:show_header="true"
title="应用在线区域统计"
>
<single-circle class="block-radius-content" :data="single_data"></single-circle>
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<!-- 不可横向铺满，一般为最后一行 --> <!-- 不可横向铺满，一般为最后一行 -->
<el-col :span="6" class="in_block"> <el-col :span="6" class="in_block">
<block-radius :show_header="true" title="服务来源机构分析" class="block"> <block-radius :show_header="true" title="应用来源机构分析" class="block">
<BarChart :data="bar_data_org" :colors="['#e56600', '#e56600']" /> <BarChart :data="bar_data_org" :colors="['#e56600', '#e56600']" />
</block-radius> </block-radius>
</el-col> </el-col>
...@@ -101,6 +137,7 @@ import singleCircle from "@/components/e-charts/single_circle"; ...@@ -101,6 +137,7 @@ 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 BarChart from "@/components/e-charts/bar-chart"; import BarChart from "@/components/e-charts/bar-chart";
import Graph from "@/components/e-charts/graph"; import Graph from "@/components/e-charts/graph";
export default { export default {
...@@ -111,6 +148,7 @@ export default { ...@@ -111,6 +148,7 @@ export default {
singleCircle, singleCircle,
Toplist, Toplist,
Starlist, Starlist,
Commentlist,
lineChart, lineChart,
BarChart, BarChart,
Graph Graph
...@@ -187,18 +225,137 @@ export default { ...@@ -187,18 +225,137 @@ export default {
[100, 1210, 130, 1530, 160, 120, 110, 1200] [100, 1210, 130, 1530, 160, 120, 110, 1200]
], ],
legend: ["aaa1", "bbb1"] 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: "个"
}
], // 应用评分
}), }),
mounted() {}, mounted() {},
methods: { methods: {
changeServiceTypeBtn(index) { changeServiceTypeBtn(index) {
console.log(index); console.log("应用类型分析: " + index);
}, },
changeApplicationFieldBtn(index) { changeApplicationFieldBtn(index) {
console.log(index); console.log("xxx: " + index);
}, },
changeServiceCellBtn(index) { changeServiceCellBtn(index) {
console.log(index); console.log("应用调用次数分析: " + index);
},
changeServeiceApplyCountBtn(index) {
console.log("应用部署排名分析: " + index);
},
changeAppInfoBtn(index) {
this.appInfoBtnIndex = index;
console.log("应用评价及评分: " + index);
},
changeAppTotalChangeBtn(index) {
console.log("应用总数变化趋势: " + index);
} }
} }
}; };
...@@ -265,4 +422,8 @@ export default { ...@@ -265,4 +422,8 @@ export default {
width: 330px; width: 330px;
height: 230px; height: 230px;
} }
.block-radius-content {
height: calc(100% - 36px);
margin-top: 15px;
}
</style> </style>
\ No newline at end of file
src/pages/data-analysis/my-service.vue
View file @ 0a6d623c
...@@ -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">
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
<div class="right-content"> <div class="right-content">
<apass-table <apass-table
class="hot-search-table" class="hot-search-table"
:header="hotSearchHeader" :header="hotSearchHeader"
:data="hotSearchData" :data="hotSearchData"
:padding-left="0" :padding-left="0"
@sort-change="hotSearchSortChange" @sort-change="hotSearchSortChange"
...@@ -94,8 +94,14 @@ ...@@ -94,8 +94,14 @@
</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
<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>
...@@ -129,8 +135,14 @@ ...@@ -129,8 +135,14 @@
</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
<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">
...@@ -179,7 +191,7 @@ import singleCircle from "@/components/e-charts/single_circle"; ...@@ -179,7 +191,7 @@ 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 ApassTable from "@/components/apass-table";
import Graph from "@/components/e-charts/graph"; import Graph from "@/components/e-charts/graph";
...@@ -190,7 +202,7 @@ export default { ...@@ -190,7 +202,7 @@ export default {
multipleCircle, multipleCircle,
singleCircle, singleCircle,
Toplist, Toplist,
commentlist, Commentlist,
Starlist, Starlist,
lineChart, lineChart,
BarChart, BarChart,
...@@ -460,24 +472,30 @@ export default { ...@@ -460,24 +472,30 @@ export default {
console.log("查看热搜详情"); console.log("查看热搜详情");
}, },
hotSearchSortChange(sortInfo) { hotSearchSortChange(sortInfo) {
console.log(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) { changeServiceCellBtn(index) {
console.log(index); console.log("服务调用次数分析: " + index);
},
changeServeiceTotalChangeBtn(index) {
console.log("服务总数变化趋势: " + index);
} }
} }
}; };
......
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