Skip to content

A
apaas-ui
Commit e04a80c7 authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

调整组件

parent a0307d3d
Hide whitespace changes
Inline Side-by-side
Showing with 258 additions and 80 deletions
src/components/e-charts/multiple_circle.vue
View file @ e04a80c7
......@@ -126,7 +126,7 @@ export default {
name: "",
type: "pie",
clockWise: false,
radius: [60, 63],
radius: [50, 53],
center: ["50%", "46%"],
hoverAnimation: false,
avoidLabelOverlap: true,
......
src/pages/data-analysis/my-service.vue
View file @ e04a80c7
......@@ -49,7 +49,6 @@
class="block-radius-content"
:data="mult_data_state"
:show_center_data="false"
:bar_width="10"
></multiple-circle>
<starlist
v-else
......@@ -72,6 +71,15 @@
class="block-radius-content"
:data="mult_data"
:text="text"
:color="[
'#27bfee',
'#f56b4c',
'#435290',
'#597ec0',
'#e56600',
'#a5937b',
'#8210c5',
]"
></multiple-circle>
</block-radius>
</el-col>
......@@ -741,7 +749,7 @@ export default {
data.score3 +
data.score2 +
data.score1;
console.log(this.starlistData, this.starlistTotal)
console.log(this.starlistData, this.starlistTotal);
}
}
});
......
src/pages/data-analysis/org-service.vue
View file @ e04a80c7
......@@ -2,19 +2,13 @@
<div>
<el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">
{{
$t("lang.data_analysis")
}}
{{ $t("lang.data_analysis") }}
</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/data_analysis/org_service' }">
{{
$t("lang.operational_analysis")
}}
{{ $t("lang.operational_analysis") }}
</el-breadcrumb-item>
<el-breadcrumb-item>
{{
$t("lang.service_data_analysis")
}}
{{ $t("lang.service_data_analysis") }}
</el-breadcrumb-item>
</el-breadcrumb>
<el-row class="in_analysis">
......@@ -22,14 +16,26 @@
<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" />
<img
:src="require('@/assets/imgs/data_img_service.gif')"
class="left_1_img"
/>
<div class="left_1_title">服务总数</div>
<div class="left_1_num">{{ overview.serviceTotal }}</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>
</div>
</block-radius>
</el-col>
......@@ -47,14 +53,13 @@
:data="mult_data_state"
:isPercent="false"
:show_center_data="false"
:bar_width="10 "
></multiple-circle>
<starlist
v-else
class="block-radius-content"
:options="linelistData"
:show_star="false"
style="margin-top: 30px;height: calc(100% - 51px);"
style="margin-top: 30px; height: calc(100% - 51px)"
></starlist>
</block-radius>
</el-col>
......@@ -66,7 +71,20 @@
@changeButton="changeServiceTypeBtn"
class="block"
>
<multiple-circle class="block-radius-content" :data="mult_data" :text="text"></multiple-circle>
<multiple-circle
class="block-radius-content"
:data="mult_data"
:text="text"
:color="[
'#27bfee',
'#f56b4c',
'#435290',
'#597ec0',
'#e56600',
'#a5937b',
'#8210c5',
]"
></multiple-circle>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
......@@ -90,7 +108,11 @@
</block-radius>
</el-col>
<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="block-radius-content service-hot-search">
<div class="left-content">
<div class="hot-line">
......@@ -98,20 +120,36 @@
<div class="hot-line-chart">
<!-- 折线图 -->
<p class="sparkline-text">
<span>{{sparkline1.num}}</span>
<span>{{ sparkline1.num }}</span>
<span
:style="sparkline1.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
:style="
sparkline1.up > 0
? { backgroundColor: '#e7fdfc', color: '#25bdb1' }
: { backgroundColor: '#fbe8e8', color: '#e15260' }
"
>
{{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}%
{{
sparkline1.up > 0
? sparkline1.up
: 0 - sparkline1.up
}}%
<img
v-if="sparkline1.up>0"
v-if="sparkline1.up > 0"
src="../../assets/imgs/icon_up.png"
alt
/>
<img v-if="sparkline1.up<0" src="../../assets/imgs/icon_down.png" alt />
<img
v-if="sparkline1.up < 0"
src="../../assets/imgs/icon_down.png"
alt
/>
</span>
</p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparkline
:indicatorStyles="spIndicatorStyles1"
width="220"
height="42"
>
<sparklineCurve
:refLineStyles="spRefLineStyles3"
:refLineType="false"
......@@ -127,20 +165,36 @@
<div class="hot-line-chart">
<!-- 折线图 -->
<p class="sparkline-text sparkline-text-user">
<span>{{sparkline2.num}}</span>
<span>{{ sparkline2.num }}</span>
<span
:style="sparkline2.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
:style="
sparkline2.up > 0
? { backgroundColor: '#e7fdfc', color: '#25bdb1' }
: { backgroundColor: '#fbe8e8', color: '#e15260' }
"
>
{{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}%
{{
sparkline2.up > 0
? sparkline2.up
: 0 - sparkline2.up
}}%
<img
v-if="sparkline2.up>0"
v-if="sparkline2.up > 0"
src="../../assets/imgs/icon_up.png"
alt
/>
<img v-if="sparkline2.up<0" src="../../assets/imgs/icon_down.png" alt />
<img
v-if="sparkline2.up < 0"
src="../../assets/imgs/icon_down.png"
alt
/>
</span>
</p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparkline
:indicatorStyles="spIndicatorStyles1"
width="220"
height="42"
>
<sparklineCurve
:refLineStyles="spRefLineStyles3"
:refLineType="false"
......@@ -171,7 +225,11 @@
:buttons_arr="['近14天', '近30天']"
@changeButton="changeServeiceTotalChangeBtn"
>
<line-chart class="block-radius-content" :zzfw="true" :data="line_data"></line-chart>
<line-chart
class="block-radius-content"
:zzfw="true"
:data="line_data"
></line-chart>
</block-radius>
</el-col>
</el-row>
......@@ -212,9 +270,18 @@
@changeButton="changeOpenessBtnindex"
class="block"
>
<single-circle class="block-radius-content single-charts" :data="single_data"></single-circle>
<single-circle class="block-radius-content single-charts" :data="single_data1"></single-circle>
<single-circle class="block-radius-content single-charts" :data="single_data2"></single-circle>
<single-circle
class="block-radius-content single-charts"
:data="single_data"
></single-circle>
<single-circle
class="block-radius-content single-charts"
:data="single_data1"
></single-circle>
<single-circle
class="block-radius-content single-charts"
:data="single_data2"
></single-circle>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
......@@ -235,7 +302,7 @@
class="block-radius-content"
:options="starlistData"
:total="starlistTotal"
style="margin-top: 30px;height: calc(100% - 51px);"
style="margin-top: 30px; height: calc(100% - 51px)"
></starlist>
</block-radius>
</el-col>
......@@ -243,8 +310,16 @@
</el-col>
<!-- 不可横向铺满，一般为最后一行 -->
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="服务来源机构分析" class="block">
<BarChart :data="bar_data_org" :x_router="30" :colors="['#e56600', '#e56600']" />
<block-radius
:show_header="true"
title="服务来源机构分析"
class="block"
>
<BarChart
:data="bar_data_org"
:x_router="30"
:colors="['#e56600', '#e56600']"
/>
</block-radius>
</el-col>
<el-col :span="12" class="in_block">
......@@ -255,11 +330,19 @@
:buttons_arr="['近14天', '近30天']"
@changeButton="changeServeiceSpChangeBtn"
>
<line-chart class="block-radius-content" :zzfw="true" :data="serviceSpData"></line-chart>
<line-chart
class="block-radius-content"
:zzfw="true"
:data="serviceSpData"
></line-chart>
</block-radius>
</el-col>
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="服务审批状态分析" class="block">
<block-radius
:show_header="true"
title="服务审批状态分析"
class="block"
>
<multiple-circle
class="block-radius-content"
:data="fwsp_data"
......@@ -653,7 +736,7 @@ export default {
data.score3 +
data.score2 +
data.score1;
console.log(this.starlistData, this.starlistTotal)
console.log(this.starlistData, this.starlistTotal);
}
}
});
......
src/pages/data-analysis/super-service.vue
View file @ e04a80c7
......@@ -2,19 +2,13 @@
<div>
<el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">
{{
$t("lang.data_analysis")
}}
{{ $t("lang.data_analysis") }}
</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/data_analysis/super_service' }">
{{
$t("lang.operational_analysis")
}}
{{ $t("lang.operational_analysis") }}
</el-breadcrumb-item>
<el-breadcrumb-item>
{{
$t("lang.service_data_analysis")
}}
{{ $t("lang.service_data_analysis") }}
</el-breadcrumb-item>
</el-breadcrumb>
<el-row class="in_analysis">
......@@ -22,14 +16,26 @@
<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" />
<img
:src="require('@/assets/imgs/data_img_service.gif')"
class="left_1_img"
/>
<div class="left_1_title">服务总数</div>
<div class="left_1_num">{{ overview.serviceTotal }}</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>
</div>
</block-radius>
</el-col>
......@@ -47,14 +53,13 @@
:data="mult_data_state"
:isPercent="false"
:show_center_data="false"
:bar_width="10 "
></multiple-circle>
<starlist
v-else
class="block-radius-content"
:options="linelistData"
:show_star="false"
style="margin-top: 30px;height: calc(100% - 51px);"
style="margin-top: 30px; height: calc(100% - 51px)"
></starlist>
</block-radius>
</el-col>
......@@ -66,7 +71,20 @@
@changeButton="changeServiceTypeBtn"
class="block"
>
<multiple-circle class="block-radius-content" :data="mult_data" :text="text"></multiple-circle>
<multiple-circle
class="block-radius-content"
:data="mult_data"
:text="text"
:color="[
'#27bfee',
'#f56b4c',
'#435290',
'#597ec0',
'#e56600',
'#a5937b',
'#8210c5',
]"
></multiple-circle>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
......@@ -90,7 +108,11 @@
</block-radius>
</el-col>
<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="block-radius-content service-hot-search">
<div class="left-content">
<div class="hot-line">
......@@ -98,20 +120,36 @@
<div class="hot-line-chart">
<!-- 折线图 -->
<p class="sparkline-text">
<span>{{sparkline1.num}}</span>
<span>{{ sparkline1.num }}</span>
<span
:style="sparkline1.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
:style="
sparkline1.up > 0
? { backgroundColor: '#e7fdfc', color: '#25bdb1' }
: { backgroundColor: '#fbe8e8', color: '#e15260' }
"
>
{{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}%
{{
sparkline1.up > 0
? sparkline1.up
: 0 - sparkline1.up
}}%
<img
v-if="sparkline1.up>0"
v-if="sparkline1.up > 0"
src="../../assets/imgs/icon_up.png"
alt
/>
<img v-if="sparkline1.up<0" src="../../assets/imgs/icon_down.png" alt />
<img
v-if="sparkline1.up < 0"
src="../../assets/imgs/icon_down.png"
alt
/>
</span>
</p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparkline
:indicatorStyles="spIndicatorStyles1"
width="220"
height="42"
>
<sparklineCurve
:refLineStyles="spRefLineStyles3"
:refLineType="false"
......@@ -127,20 +165,36 @@
<div class="hot-line-chart">
<!-- 折线图 -->
<p class="sparkline-text sparkline-text-user">
<span>{{sparkline2.num}}</span>
<span>{{ sparkline2.num }}</span>
<span
:style="sparkline2.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
:style="
sparkline2.up > 0
? { backgroundColor: '#e7fdfc', color: '#25bdb1' }
: { backgroundColor: '#fbe8e8', color: '#e15260' }
"
>
{{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}%
{{
sparkline2.up > 0
? sparkline2.up
: 0 - sparkline2.up
}}%
<img
v-if="sparkline2.up>0"
v-if="sparkline2.up > 0"
src="../../assets/imgs/icon_up.png"
alt
/>
<img v-if="sparkline2.up<0" src="../../assets/imgs/icon_down.png" alt />
<img
v-if="sparkline2.up < 0"
src="../../assets/imgs/icon_down.png"
alt
/>
</span>
</p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparkline
:indicatorStyles="spIndicatorStyles1"
width="220"
height="42"
>
<sparklineCurve
:refLineStyles="spRefLineStyles3"
:refLineType="false"
......@@ -171,7 +225,11 @@
:buttons_arr="['近14天', '近30天']"
@changeButton="changeServeiceTotalChangeBtn"
>
<line-chart class="block-radius-content" :zzfw="true" :data="line_data"></line-chart>
<line-chart
class="block-radius-content"
:zzfw="true"
:data="line_data"
></line-chart>
</block-radius>
</el-col>
</el-row>
......@@ -179,7 +237,11 @@
<el-col :span="6" class="in_right">
<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"
>
<toplist
class="block-radius-content"
:options="toplistData"
......@@ -206,9 +268,18 @@
@changeButton="changeOpenessBtnindex"
class="block"
>
<single-circle class="block-radius-content single-charts" :data="single_data"></single-circle>
<single-circle class="block-radius-content single-charts" :data="single_data1"></single-circle>
<single-circle class="block-radius-content single-charts" :data="single_data2"></single-circle>
<single-circle
class="block-radius-content single-charts"
:data="single_data"
></single-circle>
<single-circle
class="block-radius-content single-charts"
:data="single_data1"
></single-circle>
<single-circle
class="block-radius-content single-charts"
:data="single_data2"
></single-circle>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
......@@ -229,7 +300,7 @@
class="block-radius-content"
:options="starlistData"
:total="starlistTotal"
style="margin-top: 30px;height: calc(100% - 51px);"
style="margin-top: 30px; height: calc(100% - 51px)"
></starlist>
</block-radius>
</el-col>
......@@ -237,8 +308,16 @@
</el-col>
<!-- 不可横向铺满，一般为最后一行 -->
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="服务来源机构分析" class="block">
<BarChart :data="bar_data_org" :x_router="30" :colors="['#e56600', '#e56600']" />
<block-radius
:show_header="true"
title="服务来源机构分析"
class="block"
>
<BarChart
:data="bar_data_org"
:x_router="30"
:colors="['#e56600', '#e56600']"
/>
</block-radius>
</el-col>
<el-col :span="12" class="in_block">
......@@ -249,11 +328,19 @@
:buttons_arr="['近14天', '近30天']"
@changeButton="changeServeiceSpChangeBtn"
>
<line-chart class="block-radius-content" :zzfw="true" :data="serviceSpData"></line-chart>
<line-chart
class="block-radius-content"
:zzfw="true"
:data="serviceSpData"
></line-chart>
</block-radius>
</el-col>
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="服务审批状态分析" class="block">
<block-radius
:show_header="true"
title="服务审批状态分析"
class="block"
>
<multiple-circle
class="block-radius-content"
:data="fwsp_data"
......@@ -647,7 +734,7 @@ export default {
data.score3 +
data.score2 +
data.score1;
console.log(this.starlistData, this.starlistTotal)
console.log(this.starlistData, this.starlistTotal);
}
}
});
......
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