Skip to content

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

修改健康传参，换logo，恢复侧边栏

parent cc16c44e
Hide whitespace changes
Inline Side-by-side
Showing with 354 additions and 76 deletions
index.html
View file @ fe11a6a9
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Beagle aPaaS Platform v3.0</title> <title>Beagle aPaaS Platform v3.0</title>
<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" /> <!-- <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" /> -->
<style> <style>
body{ body{
background-color: #f6f7fb; background-color: #f6f7fb;
......
src/components/menu.vue
View file @ fe11a6a9
<template> <template>
<div class="menu"> <div class="menu">
<img src="../assets/imgs/home_img_logo.png" alt class="logo" /> <img src="../assets/imgs/nav-logo.png" alt class="logo" />
<div <div
style="float: right; cursor: pointer; position: relative" style="float: right; cursor: pointer; position: relative"
class="user_hover" class="user_hover"
...@@ -320,7 +320,7 @@ export default { ...@@ -320,7 +320,7 @@ export default {
} }
.logo { .logo {
float: left; float: left;
margin: 15px 0 0 40px; margin: 22px 0 0 40px;
cursor: pointer; cursor: pointer;
} }
.user { .user {
......
src/components/service-list/service_shop_menu.vue
View file @ fe11a6a9
...@@ -65,32 +65,32 @@ export default { ...@@ -65,32 +65,32 @@ export default {
} }
switch (uri) { switch (uri) {
case "data_service_list": case "data_service_list":
item.active = "shop_tool_ic_sjfw_sel"; item.active = "tool_ic_shujufw_sel";
item.default = "shop_tool_ic_sjfw"; item.default = "tool_ic_shujufw";
break; break;
case "space_time_service_list": case "space_time_service_list":
item.active = "shop_tool_ic_skfw_sel"; item.active = "tool_ic_shikongfw_sel";
item.default = "shop_tool_ic_skfw"; item.default = "tool_ic_shikongfw";
break; break;
case "video_service_list": case "video_service_list":
item.active = "shop_tool_ic_spfw_sel"; item.active = "tool_ic_shipinfw_sel";
item.default = "shop_tool_ic_spfw"; item.default = "tool_ic_shipinfw";
break; break;
case "perception_service_list": case "perception_service_list":
item.active = "shop_tool_ic_ganzhifw_sel"; item.active = "tool_ic_ganzhifw_sel";
item.default = "shop_tool_ic_ganzhifw"; item.default = "tool_ic_ganzhifw";
break; break;
case "comprehensive_app_list": case "comprehensive_app_list":
item.active = "shop_tool_ic_zhyyfw_sel"; item.active = "tool_ic_zongheyyfw_sel";
item.default = "shop_tool_ic_zhyyfw"; item.default = "tool_ic_zongheyyfw";
break; break;
case "cloud": case "cloud":
item.active = "shop_tool_ic_yzyfw_sel"; item.active = "tool_ic_yunziyuanfw_sel";
item.default = "shop_tool_ic_yzyfw"; item.default = "tool_ic_yunziyuanfw";
break; break;
case "app_store_list": case "app_store_list":
item.active = "shop_ic_yysd_sel"; item.active = "tool_ic_yingyongsd_sel";
item.default = "shop_ic_yysd"; item.default = "tool_ic_yingyongsd";
break; break;
default: default:
item.active = "1"; item.active = "1";
...@@ -111,25 +111,24 @@ export default { ...@@ -111,25 +111,24 @@ export default {
.service_shop_menu { .service_shop_menu {
background-color: #0d1847; background-color: #0d1847;
position: fixed; position: fixed;
top: 76px; top: 58px;
left: calc(50% - 600px); left: 0;
width: 180px; width: 180px;
padding: 8px; height: 100%;
background-color: #ffffff; padding-top: 30px;
box-shadow: 0px 3px 6px 0px
rgba(15, 19, 65, 0.04);
border-radius: 8px;
} }
.service_shop_menu_list > li { .service_shop_menu_list > li {
padding: 16px 10px 8px 22px; padding: 16px 10px 8px 22px;
border-left: 5px solid #0d1847;
font-size: 15px; font-size: 15px;
line-height: 24px; line-height: 24px;
cursor: pointer; cursor: pointer;
} }
.service_shop_menu_list > li:hover, .service_shop_menu_list > li:hover,
.service_shop_menu_list > li.current { .service_shop_menu_list > li.current {
background-color: rgba(242, 246, 253, 0.4); border-left: 5px solid #e56600;
color: #515fe7; background-color: #182665;
color: #e6ebfe;
} }
.menu_img { .menu_img {
width: 25px; width: 25px;
...@@ -137,16 +136,12 @@ export default { ...@@ -137,16 +136,12 @@ export default {
} }
.menu_item { .menu_item {
position: relative; position: relative;
font-weight: bold; color: #6573ae;
font-size: 15px;
color: #96a0c5;
top: -6px; top: -6px;
} }
.menu_item_active { .menu_item_active {
position: relative; position: relative;
font-weight: bold; color: #e6ebfe;
font-size: 15px;
color: #515fe7;
top: -6px; top: -6px;
} }
</style> </style>
src/components/service-list/service_shop_menu_copy.vue 0 → 100644
View file @ fe11a6a9
<template>
<div class="service_shop_menu">
<ul class="service_shop_menu_list">
<li v-for="(item, index) in menuList" :key="index" @click="active(item.visit_url)">
<img
v-if="item.visit_url == actives"
:src="item.active != '' ? require('@/assets/imgs/' + item.active + '.png') : ''"
class="menu_img"
/>
<img v-else :src="require('@/assets/imgs/' + item.default + '.png')" class="menu_img" />
<span
:class="item.visit_url == actives ? 'menu_item_active':'menu_item'"
>{{ item.menu_name }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {},
data() {
return {
actives: "",
menuList: [],
};
},
computed: {
getActive() {
return this.$store.state.serviceShopMenu;
},
},
watch: {
getActive(newVal) {
this.getActiveMenu(newVal);
},
},
mounted() {
this.getShopMenu();
this.$store.commit("serviceShopMenuAct", this.$route.path);
this.actives = this.$store.state.serviceShopMenu;
},
methods: {
active(val) {
this.$store.commit("serviceShopMenuAct", val);
this.$router.push(val);
},
getActiveMenu(val) {
this.actives = val;
},
getShopMenu() {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
if (response.data.success == 1) {
let arr = response.data.data[0].Child;
let shopArr = [];
let asd = arr.find(item => {
return item.visit_url == "/services_shop"
})
shopArr = asd.Child;
if (shopArr && shopArr.length != 0) {
Array.from(shopArr).forEach((item) => {
let uri = item.visit_url.substring(6);
if (uri.indexOf("/") != -1) {
uri = uri.substring(0, uri.indexOf("/"));
}
switch (uri) {
case "data_service_list":
item.active = "shop_tool_ic_sjfw_sel";
item.default = "shop_tool_ic_sjfw";
break;
case "space_time_service_list":
item.active = "shop_tool_ic_skfw_sel";
item.default = "shop_tool_ic_skfw";
break;
case "video_service_list":
item.active = "shop_tool_ic_spfw_sel";
item.default = "shop_tool_ic_spfw";
break;
case "perception_service_list":
item.active = "shop_tool_ic_ganzhifw_sel";
item.default = "shop_tool_ic_ganzhifw";
break;
case "comprehensive_app_list":
item.active = "shop_tool_ic_zhyyfw_sel";
item.default = "shop_tool_ic_zhyyfw";
break;
case "cloud":
item.active = "shop_tool_ic_yzyfw_sel";
item.default = "shop_tool_ic_yzyfw";
break;
case "app_store_list":
item.active = "shop_ic_yysd_sel";
item.default = "shop_ic_yysd";
break;
default:
item.active = "1";
item.default = "1";
break;
}
});
}
this.menuList = shopArr;
}
});
},
},
};
</script>
<style scoped>
.service_shop_menu {
background-color: #0d1847;
position: fixed;
top: 76px;
left: calc(50% - 600px);
width: 180px;
padding: 8px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
rgba(15, 19, 65, 0.04);
border-radius: 8px;
}
.service_shop_menu_list > li {
padding: 16px 10px 8px 22px;
font-size: 15px;
line-height: 24px;
cursor: pointer;
}
.service_shop_menu_list > li:hover,
.service_shop_menu_list > li.current {
background-color: rgba(242, 246, 253, 0.4);
color: #515fe7;
}
.menu_img {
width: 25px;
margin-right: 6px;
}
.menu_item {
position: relative;
font-weight: bold;
font-size: 15px;
color: #96a0c5;
top: -6px;
}
.menu_item_active {
position: relative;
font-weight: bold;
font-size: 15px;
color: #515fe7;
top: -6px;
}
</style>
src/pages/data-analysis/my-service.vue
View file @ fe11a6a9
...@@ -2,14 +2,10 @@ ...@@ -2,14 +2,10 @@
<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.data_analysis") }}
$t("lang.data_analysis")
}}
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item> <el-breadcrumb-item>
{{ {{ $t("lang.service_data_analysis") }}
$t("lang.service_data_analysis")
}}
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<el-row v-if="is_general_user" class="in_analysis"> <el-row v-if="is_general_user" class="in_analysis">
...@@ -17,14 +13,26 @@ ...@@ -17,14 +13,26 @@
<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">{{ overview.serviceTotal }}</div> <div class="left_1_num">{{ overview.serviceTotal }}</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>
</div> </div>
</block-radius> </block-radius>
</el-col> </el-col>
...@@ -41,14 +49,14 @@ ...@@ -41,14 +49,14 @@
class="block-radius-content" class="block-radius-content"
:data="mult_data_state" :data="mult_data_state"
:show_center_data="false" :show_center_data="false"
:bar_width="10 " :bar_width="10"
></multiple-circle> ></multiple-circle>
<starlist <starlist
v-else v-else
class="block-radius-content" class="block-radius-content"
:options="linelistData" :options="linelistData"
:show_star="false" :show_star="false"
style="margin-top: 30px;height: calc(100% - 51px);" style="margin-top: 30px; height: calc(100% - 51px)"
></starlist> ></starlist>
</block-radius> </block-radius>
</el-col> </el-col>
...@@ -60,7 +68,11 @@ ...@@ -60,7 +68,11 @@
@changeButton="changeServiceTypeBtn" @changeButton="changeServiceTypeBtn"
class="block" 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"
></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 +96,11 @@ ...@@ -84,7 +96,11 @@
</block-radius> </block-radius>
</el-col> </el-col>
<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="block-radius-content service-hot-search"> <div class="block-radius-content service-hot-search">
<div class="left-content"> <div class="left-content">
<div class="hot-line"> <div class="hot-line">
...@@ -92,20 +108,36 @@ ...@@ -92,20 +108,36 @@
<div class="hot-line-chart"> <div class="hot-line-chart">
<!-- 折线图 --> <!-- 折线图 -->
<p class="sparkline-text"> <p class="sparkline-text">
<span>{{sparkline1.num}}</span> <span>{{ sparkline1.num }}</span>
<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 <img
v-if="sparkline1.up>0" v-if="sparkline1.up > 0"
src="../../assets/imgs/icon_up.png" src="../../assets/imgs/icon_up.png"
alt 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> </span>
</p> </p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42"> <sparkline
:indicatorStyles="spIndicatorStyles1"
width="220"
height="42"
>
<sparklineCurve <sparklineCurve
:refLineStyles="spRefLineStyles3" :refLineStyles="spRefLineStyles3"
:refLineType="false" :refLineType="false"
...@@ -121,20 +153,36 @@ ...@@ -121,20 +153,36 @@
<div class="hot-line-chart"> <div class="hot-line-chart">
<!-- 折线图 --> <!-- 折线图 -->
<p class="sparkline-text sparkline-text-user"> <p class="sparkline-text sparkline-text-user">
<span>{{sparkline2.num}}</span> <span>{{ sparkline2.num }}</span>
<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 <img
v-if="sparkline2.up>0" v-if="sparkline2.up > 0"
src="../../assets/imgs/icon_up.png" src="../../assets/imgs/icon_up.png"
alt 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> </span>
</p> </p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42"> <sparkline
:indicatorStyles="spIndicatorStyles1"
width="220"
height="42"
>
<sparklineCurve <sparklineCurve
:refLineStyles="spRefLineStyles3" :refLineStyles="spRefLineStyles3"
:refLineType="false" :refLineType="false"
...@@ -165,7 +213,10 @@ ...@@ -165,7 +213,10 @@
:buttons_arr="['近14天', '近30天']" :buttons_arr="['近14天', '近30天']"
@changeButton="changeServeiceTotalChangeBtn" @changeButton="changeServeiceTotalChangeBtn"
> >
<line-chart class="block-radius-content" :data="line_data"></line-chart> <line-chart
class="block-radius-content"
:data="line_data"
></line-chart>
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -206,9 +257,18 @@ ...@@ -206,9 +257,18 @@
@changeButton="changeOpenessBtnindex" @changeButton="changeOpenessBtnindex"
class="block" class="block"
> >
<single-circle class="block-radius-content single-charts" :data="single_data"></single-circle> <single-circle
<single-circle class="block-radius-content single-charts" :data="single_data1"></single-circle> class="block-radius-content single-charts"
<single-circle class="block-radius-content single-charts" :data="single_data2"></single-circle> :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> </block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
...@@ -229,7 +289,7 @@ ...@@ -229,7 +289,7 @@
class="block-radius-content" class="block-radius-content"
:options="starlistData" :options="starlistData"
:total="starlistTotal" :total="starlistTotal"
style="margin-top: 30px;height: calc(100% - 51px);" style="margin-top: 30px; height: calc(100% - 51px)"
></starlist> ></starlist>
</block-radius> </block-radius>
</el-col> </el-col>
...@@ -237,13 +297,24 @@ ...@@ -237,13 +297,24 @@
</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
<BarChart :data="bar_data_org" :x_router="30" :colors="['#e56600', '#e56600']" /> :show_header="true"
title="服务来源机构分析"
class="block"
>
<BarChart
:data="bar_data_org"
:x_router="30"
:colors="['#e56600', '#e56600']"
/>
</block-radius> </block-radius>
</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 :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> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -291,7 +362,12 @@ export default { ...@@ -291,7 +362,12 @@ export default {
right_2_state: 0, right_2_state: 0,
right_3_state: 0, right_3_state: 0,
last_id: 0, last_id: 0,
mult_data_state: [], mult_data_state: [
{ name: "健康", value: 0 },
{ name: "未使用", value: 0 },
{ name: "故障", value: 0 },
{ name: "警告", value: 0 },
],
mult_data: [], mult_data: [],
spIndicatorStyles1: false, spIndicatorStyles1: false,
spRefLineStyles3: { spRefLineStyles3: {
...@@ -547,7 +623,25 @@ export default { ...@@ -547,7 +623,25 @@ export default {
getServiceHealth() { getServiceHealth() {
this.$api.dataAnalysis.getServiceHealth().then((response) => { this.$api.dataAnalysis.getServiceHealth().then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.mult_data_state = response.data.data.seriesData; let data = response.data.data.seriesData;
let jk = data.find((item) => {
return item.name == "健康";
});
let wsy = data.find((item) => {
return item.name == "未使用";
});
let gz = data.find((item) => {
return item.name == "故障";
});
let jg = data.find((item) => {
return item.name == "警告";
});
this.mult_data_state = [
{ name: "健康", value: jk.value },
{ name: "未使用", value: wsy.value },
{ name: "故障", value: gz.value },
{ name: "警告", value: jg.value },
];
} }
}); });
}, },
......
src/pages/data-analysis/org-service.vue
View file @ fe11a6a9
...@@ -315,10 +315,10 @@ export default { ...@@ -315,10 +315,10 @@ export default {
right_3_state: 0, right_3_state: 0,
last_id: 0, last_id: 0,
mult_data_state: [ mult_data_state: [
{ name: "正常", value: 0 }, { name: "健康", value: 0 },
{ name: "警告", value: 0 },
{ name: "错误", value: 0 },
{ name: "未使用", value: 0 }, { name: "未使用", value: 0 },
{ name: "故障", value: 0 },
{ name: "警告", value: 0 },
], ],
mult_data: [ mult_data: [
{ name: "数据服务", value: 0 }, { name: "数据服务", value: 0 },
...@@ -535,7 +535,25 @@ export default { ...@@ -535,7 +535,25 @@ export default {
getServiceHealth() { getServiceHealth() {
this.$api.dataAnalysis.getServiceHealth().then((response) => { this.$api.dataAnalysis.getServiceHealth().then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.mult_data_state = response.data.data.seriesData; let data = response.data.data.seriesData;
let jk = data.find((item) => {
return item.name == "健康";
});
let wsy = data.find((item) => {
return item.name == "未使用";
});
let gz = data.find((item) => {
return item.name == "故障";
});
let jg = data.find((item) => {
return item.name == "警告";
});
this.mult_data_state = [
{ name: "健康", value: jk.value },
{ name: "未使用", value: wsy.value },
{ name: "故障", value: gz.value },
{ name: "警告", value: jg.value },
];
} }
}); });
}, },
......
src/pages/data-analysis/super-service.vue
View file @ fe11a6a9
...@@ -309,10 +309,10 @@ export default { ...@@ -309,10 +309,10 @@ export default {
right_3_state: 0, right_3_state: 0,
last_id: 0, last_id: 0,
mult_data_state: [ mult_data_state: [
{ name: "正常", value: 0 }, { name: "健康", value: 0 },
{ name: "警告", value: 0 },
{ name: "错误", value: 0 },
{ name: "未使用", value: 0 }, { name: "未使用", value: 0 },
{ name: "故障", value: 0 },
{ name: "警告", value: 0 },
], ],
mult_data: [ mult_data: [
{ name: "数据服务", value: 0 }, { name: "数据服务", value: 0 },
...@@ -529,7 +529,25 @@ export default { ...@@ -529,7 +529,25 @@ export default {
getServiceHealth() { getServiceHealth() {
this.$api.dataAnalysis.getServiceHealth().then((response) => { this.$api.dataAnalysis.getServiceHealth().then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.mult_data_state = response.data.data.seriesData; let data = response.data.data.seriesData;
let jk = data.find((item) => {
return item.name == "健康";
});
let wsy = data.find((item) => {
return item.name == "未使用";
});
let gz = data.find((item) => {
return item.name == "故障";
});
let jg = data.find((item) => {
return item.name == "警告";
});
this.mult_data_state = [
{ name: "健康", value: jk.value },
{ name: "未使用", value: wsy.value },
{ name: "故障", value: gz.value },
{ name: "警告", value: jg.value },
];
} }
}); });
}, },
......
src/pages/service_shop/shop_list.vue
View file @ fe11a6a9
<template> <template>
<div class="shop_list_cont"> <!-- <div class="shop_list_cont"> -->
<div>
<el-container> <el-container>
<el-aside width="180px"> <el-aside width="180px">
<service-shop-menu></service-shop-menu> <service-shop-menu></service-shop-menu>
......
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