Commit 3d4c6d44 authored by 徐一鸣's avatar 徐一鸣

Merge branch 'dev' of cloud.wodcloud.com:apaas/apaas-v3-ui into dev

parents fd8cfe06 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;
......
<template> <template>
<div class="card" :style="flag?{borderRadius: '0px 12px 0px 0px'}:{}"> <div class="card" :style="flag?{borderRadius: '0px 12px 0px 0px'}:{}">
<div class="card_title"><div class="circle"></div>{{title}}</div> <div class="card_title" :style="{backgroundColor:bgc}"><div class="circle"></div>{{title}}</div>
<div class="card_contain"> <div class="card_contain">
<slot></slot> <slot></slot>
</div> </div>
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<script> <script>
export default { export default {
props: ['title','flag'], props: ['title','flag','bgc'],
components: { components: {
}, },
......
<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 {
......
<template> <template>
<div class="service_info apaas_button" v-if="data"> <div class="service_info apaas_button" v-if="data && showItem">
<div class="service_title"> <div class="service_title">
<span class="service_name" v-text="data.name"></span> <span class="service_name" v-text="data.name"></span>
<span class="service_type" v-if="data.type" v-text="data.type"></span> <span class="service_type" v-if="data.type" v-text="data.type"></span>
...@@ -89,7 +89,13 @@ ...@@ -89,7 +89,13 @@
class="commodity_text" class="commodity_text"
>暂无</span >暂无</span
> >
<div v-else class="btn_container"> <div
v-else-if="
data.serviceRequestSpcs.spcs_type_1 &&
data.serviceRequestSpcs.spcs_type_1.length != 0
"
class="btn_container"
>
<el-button <el-button
v-for="(item, index) in data.serviceRequestSpcs.spcs_type_1" v-for="(item, index) in data.serviceRequestSpcs.spcs_type_1"
:key="'spcs_' + index" :key="'spcs_' + index"
...@@ -191,6 +197,7 @@ export default { ...@@ -191,6 +197,7 @@ export default {
specification: {}, // 规格 specification: {}, // 规格
duration: 1, // 时长 duration: 1, // 时长
showTime: false, showTime: false,
showItem: false,
}), }),
computed: { computed: {
actionDisabled() { actionDisabled() {
...@@ -268,10 +275,15 @@ export default { ...@@ -268,10 +275,15 @@ export default {
mounted() { mounted() {
// 初始化购买方式 // 初始化购买方式
if (this.data.serviceRequestSpcs && this.data.serviceRequestSpcs.length) { if (this.data.serviceRequestSpcs && this.data.serviceRequestSpcs.length) {
if (!this.data.serviceRequestSpcs.spcs_type_1) {
this.data.serviceRequestSpcs.spcs_type_1 = [];
}
if (!this.data.serviceRequestSpcs.spcs_type_2) {
this.data.serviceRequestSpcs.spcs_type_2 = [];
}
let types = Array.from( let types = Array.from(
new Set(this.data.serviceRequestSpcs.map((item) => item.type)) new Set(this.data.serviceRequestSpcs.map((item) => item.type))
); );
if (types.indexOf(3) > -1) { if (types.indexOf(3) > -1) {
this.types = [ this.types = [
{ {
...@@ -316,6 +328,7 @@ export default { ...@@ -316,6 +328,7 @@ export default {
) { ) {
this.specification = this.data.serviceRequestSpcs.spcs_type_2[0]; this.specification = this.data.serviceRequestSpcs.spcs_type_2[0];
} }
this.showItem = true;
}, },
}; };
</script> </script>
......
<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>
...@@ -1062,11 +1062,13 @@ export default { ...@@ -1062,11 +1062,13 @@ export default {
let priceObj = this.cpu_memory.find((item) => { let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 8 && item.memory == 16; return item.cpu == 8 && item.memory == 16;
}); });
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price); sumCM += Number(priceObj.price);
} else if (this.formNew.memory == "32") { } else if (this.formNew.memory == "32") {
let priceObj = this.cpu_memory.find((item) => { let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 8 && item.memory == 32; return item.cpu == 8 && item.memory == 32;
}); });
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price); sumCM += Number(priceObj.price);
} }
} else if (this.formNew.cpu == "16") { } else if (this.formNew.cpu == "16") {
...@@ -1074,11 +1076,13 @@ export default { ...@@ -1074,11 +1076,13 @@ export default {
let priceObj = this.cpu_memory.find((item) => { let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 16 && item.memory == 32; return item.cpu == 16 && item.memory == 32;
}); });
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price); sumCM += Number(priceObj.price);
} else if (this.formNew.memory == "64") { } else if (this.formNew.memory == "64") {
let priceObj = this.cpu_memory.find((item) => { let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 16 && item.memory == 64; return item.cpu == 16 && item.memory == 64;
}); });
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price); sumCM += Number(priceObj.price);
} }
} }
...@@ -1090,6 +1094,7 @@ export default { ...@@ -1090,6 +1094,7 @@ export default {
this.formNew.appDuration >= 1 this.formNew.appDuration >= 1
) { ) {
if (this.hard_disk && this.hard_disk.length != 0) { if (this.hard_disk && this.hard_disk.length != 0) {
this.disk_single_money = Number(this.hard_disk[0].price);
sumDisk += sumDisk +=
Number(this.formNew.dataDisk) * Number(this.formNew.dataDisk) *
Number(this.formNew.perDataDisk) * Number(this.formNew.perDataDisk) *
...@@ -1126,11 +1131,13 @@ export default { ...@@ -1126,11 +1131,13 @@ export default {
let priceObj = this.cpu_memory.find((item) => { let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 8 && item.memory == 16; return item.cpu == 8 && item.memory == 16;
}); });
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price); sumCM += Number(priceObj.price);
} else if (this.formOld.memory == "32") { } else if (this.formOld.memory == "32") {
let priceObj = this.cpu_memory.find((item) => { let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 8 && item.memory == 32; return item.cpu == 8 && item.memory == 32;
}); });
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price); sumCM += Number(priceObj.price);
} }
} else if (this.formOld.cpu == "16") { } else if (this.formOld.cpu == "16") {
...@@ -1138,11 +1145,13 @@ export default { ...@@ -1138,11 +1145,13 @@ export default {
let priceObj = this.cpu_memory.find((item) => { let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 16 && item.memory == 32; return item.cpu == 16 && item.memory == 32;
}); });
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price); sumCM += Number(priceObj.price);
} else if (this.formOld.memory == "64") { } else if (this.formOld.memory == "64") {
let priceObj = this.cpu_memory.find((item) => { let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 16 && item.memory == 64; return item.cpu == 16 && item.memory == 64;
}); });
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price); sumCM += Number(priceObj.price);
} }
} }
...@@ -1154,6 +1163,7 @@ export default { ...@@ -1154,6 +1163,7 @@ export default {
this.formOld.appDuration >= 1 this.formOld.appDuration >= 1
) { ) {
if (this.hard_disk && this.hard_disk.length != 0) { if (this.hard_disk && this.hard_disk.length != 0) {
this.disk_single_money = Number(this.hard_disk[0].price);
sumDisk += sumDisk +=
Number(this.formOld.dataDisk) * Number(this.formOld.dataDisk) *
Number(this.formOld.perDataDisk) * Number(this.formOld.perDataDisk) *
......
...@@ -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 },
];
} }
}); });
}, },
......
...@@ -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 },
];
} }
}); });
}, },
......
...@@ -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 },
];
} }
}); });
}, },
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item> <el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
<el-breadcrumb-item to="/shop/data_service_list/5"> <el-breadcrumb-item to="/shop/data_service_list/5">
数据服务 感知服务
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item>服务详情信息</el-breadcrumb-item> <el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
...@@ -14,7 +14,6 @@ ...@@ -14,7 +14,6 @@
<service-tabs <service-tabs
:detail-data="detailData" :detail-data="detailData"
:specification-data="specificationData"
:provider-data="providerData" :provider-data="providerData"
:comments-data="commentsData" :comments-data="commentsData"
:comments-url="commentsUrl" :comments-url="commentsUrl"
...@@ -34,7 +33,6 @@ export default { ...@@ -34,7 +33,6 @@ export default {
data: () => ({ data: () => ({
baseInfo: null, baseInfo: null,
detailData: null, detailData: null,
specificationData: null,
providerData: null, providerData: null,
commentsData: null, commentsData: null,
}), }),
...@@ -56,18 +54,6 @@ export default { ...@@ -56,18 +54,6 @@ export default {
}) })
.then(({ data }) => { .then(({ data }) => {
let datas = data.data; let datas = data.data;
let specificationData =
(datas.serviceRequestSpcs &&
datas.serviceRequestSpcs.map((item) => ({
id: item.id,
type: item.type,
pv: item.pv,
count: item.count,
name: `访问次数:${item.pv}次/日 访问量:${item.count}次/日`,
descript: item.des,
}))) ||
[];
this.baseInfo = { this.baseInfo = {
service_id: this.id, service_id: this.id,
app_id: 0, app_id: 0,
...@@ -87,7 +73,7 @@ export default { ...@@ -87,7 +73,7 @@ export default {
datas.data_service_type3_name, datas.data_service_type3_name,
], ],
descript: datas.descript, descript: datas.descript,
serviceRequestSpcs: specificationData, serviceRequestSpcs: datas.serviceRequestSpcs,
scoreDetail: datas.scoreDetail, scoreDetail: datas.scoreDetail,
month_sale: data.month_sale, month_sale: data.month_sale,
}; };
...@@ -186,7 +172,6 @@ export default { ...@@ -186,7 +172,6 @@ export default {
}, },
}, },
]; ];
this.specificationData = specificationData;
this.providerData = { this.providerData = {
organization_name: datas.organization_name, organization_name: datas.organization_name,
picture_path: datas.organization_picture, picture_path: datas.organization_picture,
......
<template> <template>
<!-- <div class="shop_list_cont"> -->
<div> <div>
<el-container> <el-container>
<el-aside width="180px"> <el-aside width="180px">
...@@ -55,7 +56,7 @@ export default { ...@@ -55,7 +56,7 @@ export default {
case "video_service_list": case "video_service_list":
this.name = "视频服务"; this.name = "视频服务";
this.urlFilter = "7"; this.urlFilter = "7";
this.url = ""; this.url = "/shop/spfwDetail";
this.filterNames = ["", "服务领域", "服务来源组织"]; this.filterNames = ["", "服务领域", "服务来源组织"];
break; break;
case "perception_service_list": case "perception_service_list":
...@@ -123,4 +124,9 @@ export default { ...@@ -123,4 +124,9 @@ export default {
background: url("~@/assets/imgs/img_default_quesheng.png") no-repeat center background: url("~@/assets/imgs/img_default_quesheng.png") no-repeat center
center; center;
} }
.shop_list_cont {
width: 1200px;
margin: 0 auto;
position: relative;
}
</style> </style>
\ No newline at end of file
...@@ -14,7 +14,6 @@ ...@@ -14,7 +14,6 @@
<service-tabs <service-tabs
:detail-data="detailData" :detail-data="detailData"
:specification-data="specificationData"
:provider-data="providerData" :provider-data="providerData"
:comments-data="commentsData" :comments-data="commentsData"
:comments-url="commentsUrl" :comments-url="commentsUrl"
...@@ -34,7 +33,6 @@ export default { ...@@ -34,7 +33,6 @@ export default {
data: () => ({ data: () => ({
baseInfo: null, baseInfo: null,
detailData: null, detailData: null,
specificationData: null,
providerData: null, providerData: null,
commentsData: null, commentsData: null,
}), }),
...@@ -61,17 +59,6 @@ export default { ...@@ -61,17 +59,6 @@ export default {
}) })
.then(({ data }) => { .then(({ data }) => {
let datas = data.data; let datas = data.data;
let specificationData =
(datas.serviceRequestSpcs &&
datas.serviceRequestSpcs.map((item) => ({
id: item.id,
type: item.type,
pv: item.pv,
count: item.count,
name: `访问次数:${item.pv}次/日 访问量:${item.count}次/日`,
descript: item.des,
}))) ||
[];
this.baseInfo = { this.baseInfo = {
portal_id: datas.portal_id || "", // 时空服务id portal_id: datas.portal_id || "", // 时空服务id
...@@ -93,9 +80,9 @@ export default { ...@@ -93,9 +80,9 @@ export default {
datas.data_service_type3_name, datas.data_service_type3_name,
], ],
descript: datas.descript, descript: datas.descript,
serviceRequestSpcs: specificationData,
scoreDetail: datas.scoreDetail, scoreDetail: datas.scoreDetail,
month_sale: data.month_sale, month_sale: data.month_sale,
serviceRequestSpcs: datas.serviceRequestSpcs,
}; };
this.detailData = [ this.detailData = [
...@@ -145,7 +132,6 @@ export default { ...@@ -145,7 +132,6 @@ export default {
], ],
}, */ }, */
]; ];
this.specificationData = specificationData;
this.providerData = { this.providerData = {
organization_name: datas.organization_name, organization_name: datas.organization_name,
picture_path: datas.organization_picture, picture_path: datas.organization_picture,
......
<template>
<div class="sevice_detail">
<div class="apass_breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
<el-breadcrumb-item to="/shop/data_service_list/5">
视频服务
</el-breadcrumb-item>
<el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
</el-breadcrumb>
</div>
<service-info :data="baseInfo" v-if="baseInfo"></service-info>
<service-tabs
:detail-data="detailData"
:provider-data="providerData"
:comments-data="commentsData"
:comments-url="commentsUrl"
></service-tabs>
</div>
</template>
<script>
import serviceInfo from "@/components/service-info/service-info";
import serviceTabs from "@/components/service-tabs/service-tabs";
export default {
components: {
serviceInfo,
serviceTabs,
},
data: () => ({
baseInfo: null,
detailData: null,
providerData: null,
commentsData: null,
}),
computed: {
id() {
return this.$route.params.id;
},
commentsUrl() {
return `/apaas/serviceapp/v3/servicemarket/estimates?serviceId=${this.id}`;
},
},
methods: {
init() {
this.$http
.get("/apaas/serviceapp/v3/servicemarket/detail", {
params: {
serviceId: this.id,
},
})
.then(({ data }) => {
let datas = data.data;
this.baseInfo = {
service_id: this.id,
app_id: 0,
name: datas.name,
// type: "",
openness: datas.openness,
view_count: datas.view_count,
apply_count: datas.apply_count,
cover: datas.cover,
organization_name: datas.organization_name,
create_time: datas.create_time,
update_date: datas.update_date,
sectors_name: datas.sectors_name,
data_service_type: [
datas.data_service_type1_name,
datas.data_service_type2_name,
datas.data_service_type3_name,
],
descript: datas.descript,
serviceRequestSpcs: datas.serviceRequestSpcs,
scoreDetail: datas.scoreDetail,
month_sale: data.month_sale,
};
this.detailData = [
{
name: "获取流程",
type: "step",
value: ["服务申请", "信息填写", "审核确认", "服务获取"],
},
{
name: "服务描述",
type: "text",
value: datas.descript,
},
{
name: "请求方式",
type: "text",
value: ["-", "GET", "POST", "PUT", "DELETE"][datas.req_type || 0],
},
{
name: "编码格式",
type: "text",
value: datas.encode_method,
},
{
name: "请求参数",
type: "table",
value: {
datas: this.getTableData(datas.req_fields),
columns: [
{
prop: "name",
label: "字段编码",
width: 240,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 180,
},
{
prop: "field_type",
label: "字段类型",
align: "center",
width: 180,
},
{
prop: "descript",
label: "字段说明",
},
{
prop: "is_must",
label: "是否必须",
align: "center",
width: 180,
},
{
prop: "example",
label: "示例值",
align: "center",
width: 180,
},
],
},
},
{
name: "响应参数",
type: "table",
value: {
datas: this.getTableData(datas.res_fields),
columns: [
{
prop: "name",
label: "字段编码",
width: 240,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 180,
},
{
prop: "field_type",
label: "字段类型",
align: "center",
width: 180,
},
{
prop: "descript",
label: "字段说明",
},
],
},
},
];
this.providerData = {
organization_name: datas.organization_name,
picture_path: datas.organization_picture,
user_name: datas.register_user_info.user_name,
phone: datas.register_user_info.phone,
};
this.commentsData = datas.scoreDetail;
})
.catch(function(error) {
console.log(error);
});
},
getTableData(tableStr) {
let tabledata = (tableStr && JSON.parse(tableStr)) || [];
let addRowId = (data, baseId = "") => {
data.forEach((item, index) => {
let rowId = baseId + (index + 1) + "";
item.rowId = rowId;
if (item.children && item.children.length) {
addRowId(item.children, rowId);
}
});
};
addRowId(tabledata);
return tabledata;
},
},
mounted() {
this.init();
},
};
</script>
...@@ -14,7 +14,6 @@ ...@@ -14,7 +14,6 @@
<service-tabs <service-tabs
:detail-data="detailData" :detail-data="detailData"
:specification-data="specificationData"
:provider-data="providerData" :provider-data="providerData"
:comments-data="commentsData" :comments-data="commentsData"
:comments-url="commentsUrl" :comments-url="commentsUrl"
...@@ -34,7 +33,6 @@ export default { ...@@ -34,7 +33,6 @@ export default {
data: () => ({ data: () => ({
baseInfo: null, baseInfo: null,
detailData: null, detailData: null,
specificationData: null,
providerData: null, providerData: null,
commentsData: null, commentsData: null,
}), }),
...@@ -56,18 +54,6 @@ export default { ...@@ -56,18 +54,6 @@ export default {
}) })
.then(({ data }) => { .then(({ data }) => {
let datas = data.data; let datas = data.data;
let specificationData =
(datas.serviceRequestSpcs &&
datas.serviceRequestSpcs.map((item) => ({
id: item.id,
type: item.type,
pv: item.pv,
count: item.count,
name: `访问次数:${item.pv}次/日 访问量:${item.count}次/日`,
descript: item.des,
}))) ||
[];
this.baseInfo = { this.baseInfo = {
service_id: this.id, service_id: this.id,
app_id: 0, app_id: 0,
...@@ -88,7 +74,7 @@ export default { ...@@ -88,7 +74,7 @@ export default {
datas.data_service_type3_name, datas.data_service_type3_name,
], ],
descript: datas.descript, descript: datas.descript,
serviceRequestSpcs: specificationData, serviceRequestSpcs: datas.serviceRequestSpcs,
scoreDetail: datas.scoreDetail, scoreDetail: datas.scoreDetail,
month_sale: data.month_sale, month_sale: data.month_sale,
}; };
...@@ -141,7 +127,6 @@ export default { ...@@ -141,7 +127,6 @@ export default {
value: datas.workflows_id, value: datas.workflows_id,
}); });
} }
this.specificationData = specificationData;
this.providerData = { this.providerData = {
organization_name: datas.organization_name, organization_name: datas.organization_name,
picture_path: datas.organization_picture, picture_path: datas.organization_picture,
......
...@@ -226,12 +226,19 @@ export default { ...@@ -226,12 +226,19 @@ export default {
this.diaDel = true; this.diaDel = true;
}, },
getQList() { getQList() {
console.log(this.search_date);
let query = { let query = {
search: this.search_ask, search: this.search_ask,
style: 3, style: 3,
create_user: this.search_user, create_user: this.search_user,
start: this.search_date.length != 0 ? this.search_date[0] : "", start:
end: this.search_date.length != 0 ? this.search_date[1] : "", this.search_date && this.search_date.length != 0
? this.search_date[0]
: "",
end:
this.search_date && this.search_date.length != 0
? this.search_date[1]
: "",
limit: this.currentlimit, limit: this.currentlimit,
page: this.currentPage, page: this.currentPage,
order: "created", order: "created",
...@@ -244,12 +251,19 @@ export default { ...@@ -244,12 +251,19 @@ export default {
}); });
}, },
getAList() { getAList() {
console.log(this.search_date);
let query = { let query = {
search: this.search_ask, search: this.search_ask,
style: 3, style: 3,
create_user: this.search_user, create_user: this.search_user,
start: this.search_date.length != 0 ? this.search_date[0] : "", start:
end: this.search_date.length != 0 ? this.search_date[1] : "", this.search_date && this.search_date.length != 0
? this.search_date[0]
: "",
end:
this.search_date && this.search_date.length != 0
? this.search_date[1]
: "",
limit: this.currentlimit, limit: this.currentlimit,
page: this.currentPage, page: this.currentPage,
}; };
......
...@@ -727,7 +727,7 @@ export default { ...@@ -727,7 +727,7 @@ export default {
: "#e15260" : "#e15260"
); );
this.$set(this.service_header_arr["second"][0], "text", data.req_url); this.$set(this.service_header_arr["second"][0], "text", data.service_apply_info.urls[0].req_url);
this.$set(this.service_header_arr, "url", data.cover); this.$set(this.service_header_arr, "url", data.cover);
//判断是否是服务注册出来的流程服务 //判断是否是服务注册出来的流程服务
......
...@@ -1146,7 +1146,7 @@ export default { ...@@ -1146,7 +1146,7 @@ export default {
}, },
iconChange (val) { iconChange (val) {
// el-select实际上是两层div包裹的input // el-select实际上是两层div包裹的input
this.port_select = val; this.port_select_server = val;
// 获取当前el-select标签第一层div // 获取当前el-select标签第一层div
const dom = this.$refs['select_icon'].$el; const dom = this.$refs['select_icon'].$el;
if(dom.children[0].children[0].tagName == 'SPAN'){ if(dom.children[0].children[0].tagName == 'SPAN'){
...@@ -1308,7 +1308,7 @@ export default { ...@@ -1308,7 +1308,7 @@ export default {
this.$set( this.$set(
this.service_header_arr["second"][0], this.service_header_arr["second"][0],
"text", "text",
data.req_url data.urls[0].req_url
); );
this.$set(this.service_header_arr, "url", data.cover); this.$set(this.service_header_arr, "url", data.cover);
if (this.now_user == 1) { if (this.now_user == 1) {
...@@ -1467,6 +1467,7 @@ export default { ...@@ -1467,6 +1467,7 @@ export default {
e.descript = '每月不限调用次数' e.descript = '每月不限调用次数'
} }
}); });
this.size_arr_down = val; this.size_arr_down = val;
}, },
...@@ -1482,16 +1483,30 @@ export default { ...@@ -1482,16 +1483,30 @@ export default {
var temp = data.data||[] var temp = data.data||[]
temp.forEach((e,idx) => { temp.forEach((e,idx) => {
e.index = idx+1 e.index = idx+1
// if(e.spcs_type==1){
// e.gg = e.money+'/'+e.spcs_count
// e.time = '不限时长'
// e.pv = e.spcs_count
// e.d_price = ''
// }else if(e.spcs_type==1){
// e.gg = e.money+'/月'
// e.time = '1个月'
// e.pv = '不限次数'
// e.d_price = '-'
// }
if(e.spcs_type==1){ if(e.spcs_type==1){
e.gg = e.money+'/'+e.spcs_count e.gg = e.money+'金币/'+e.spcs_count+''
e.time = '不限时长' e.time = '不限时长'
e.pv = e.spcs_count e.pv = e.spcs_count
e.d_price = '' e.d_price = e.money/e.spcs_count+'金币/次'
}else if(e.spcs_type==1){ e.spcs_type_name = '计次收费'
e.gg = e.money+'/月' }else if(e.spcs_type==2){
e.gg = e.money+'金币/月'
e.time = '1个月' e.time = '1个月'
e.pv = '不限次数' e.pv = '不限次数'
e.d_price = '-' e.d_price = '-'
e.spcs_type_name = '计时收费'
} }
}); });
this.service_size_data = temp; this.service_size_data = temp;
......
...@@ -636,8 +636,9 @@ ...@@ -636,8 +636,9 @@
" "
class="next_one" class="next_one"
@click="nextOne" @click="nextOne"
>下一步</el-button
> >
下一步
</el-button>
</div> </div>
</div> </div>
</block-radius> </block-radius>
...@@ -719,20 +720,20 @@ ...@@ -719,20 +720,20 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item v-if="is_map != 0" class="btn_footer"> <el-form-item v-if="is_map != 0" class="btn_footer">
<el-button class="previous" @click="goBack('map')">{{ <el-button class="previous" @click="goBack('map')">
is_map == 1 ? "返回智能制图" : "返回Web应用程序" {{ is_map == 1 ? "返回智能制图" : "返回Web应用程序" }}
}}</el-button> </el-button>
<el-button class="registe" @click="registeMap" <el-button class="registe" @click="registeMap">
>服务发布</el-button 服务发布
> </el-button>
</el-form-item> </el-form-item>
<el-form-item v-else-if="process_id != ''" class="btn_footer"> <el-form-item v-else-if="process_id != ''" class="btn_footer">
<el-button class="previous" @click="goBack('process')" <el-button class="previous" @click="goBack('process')">
>返回流程管理</el-button 返回流程管理
> </el-button>
<el-button class="registe" @click="registeProcess" <el-button class="registe" @click="registeProcess">
>服务发布</el-button 服务发布
> </el-button>
</el-form-item> </el-form-item>
<el-form-item v-else class="btn_footer"> <el-form-item v-else class="btn_footer">
<el-button class="previous" @click="previous">上一步</el-button> <el-button class="previous" @click="previous">上一步</el-button>
...@@ -1428,7 +1429,7 @@ export default { ...@@ -1428,7 +1429,7 @@ export default {
registePt() { registePt() {
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
if (valid) { if (valid) {
if (this.activeBtn == 3 && this.jkwds.length == 0) { if ((this.activeBtn == 2 && this.jkwds.length == 0) || (this.activeBtn == 3 && this.jkwds.length == 0)) {
this.$message.error("请上传接口文档"); this.$message.error("请上传接口文档");
} else { } else {
if (this.cover.length != 0) { if (this.cover.length != 0) {
...@@ -1436,7 +1437,7 @@ export default { ...@@ -1436,7 +1437,7 @@ export default {
if (this.activeBtn == 1 && !this.is_portal) { if (this.activeBtn == 1 && !this.is_portal) {
this.addPortalItem(); this.addPortalItem();
} else { } else {
if (this.activeBtn == 0 || this.activeBtn == 3) { if (this.activeBtn == 0 || this.activeBtn == 2 || this.activeBtn == 3) {
contentType = this.sjfwQqt; contentType = this.sjfwQqt;
} else if (this.activeBtn == 4) { } else if (this.activeBtn == 4) {
if (this.activeZh == "1") { if (this.activeZh == "1") {
......
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
</div> </div>
<!-- <div v-if="now_service == 1&&image_arr.length"> --> <!-- <div v-if="now_service == 1&&image_arr.length"> -->
<div v-if="now_service == 1"> <div v-show="now_service == 1">
<p class="service_title"> <p class="service_title">
<span></span>应用概况 <span></span>应用概况
</p> </p>
...@@ -107,51 +107,68 @@ ...@@ -107,51 +107,68 @@
</div> </div>
<p class="service_title" style="margin-top:20px;"> <p class="service_title" style="margin-top:20px;">
<span></span>微服务 <span></span>微服务
<el-select v-model="now_micor_service" ref="select_icon" @change="iconChange" placeholder="请选择">
<el-option v-for="item in service_list_arr" :key="item.service" :label="item.service" :value="item.index">
<span v-if="item.is_unhealth" :style="{display:'inline-block',marginRight:'8px',width:'36px',height:'18px',marginLeft:'-10px',borderRadius:'4px',backgroundColor:'#e15260',lineHeight:'18px',textAlign:'center'}">故障</span>
<span v-else :style="{display:'inline-block',marginRight:'8px',width:'36px',height:'18px',borderRadius:'4px',marginLeft:'-10px',}"></span>
{{item.service}}
</el-option>
</el-select>
</p> </p>
<div style="overflow:hidden;height:700px;" class="limit-elscroll"> <div style="overflow:hidden;height:700px;" class="limit-elscroll">
<el-scrollbar class="service_list"> <!-- <el-scrollbar class="service_list">
<div class="service_box" @click="change_micor(index)" :style="now_micor_service==index?{paddingLeft:'30px',borderLeft:'8px solid #515fe7',backgroundColor:'#fbfcfe'}:''" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}} <div class="service_box" @click="change_micor(index)" :style="now_micor_service==index?{paddingLeft:'30px',borderLeft:'8px solid #515fe7',backgroundColor:'#fbfcfe'}:''" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}}
<span v-if="item.is_unhealth" class="service_tips">故障</span> <span v-if="item.is_unhealth" class="service_tips">故障</span>
</div> </div>
</el-scrollbar> </el-scrollbar> -->
<div class="service_type_ab">
<div v-for="item in mesh_options" @click="mesh_value=item.value" :key="item.value" :style="mesh_value==item.value?{backgroundColor:'#515fe7',color:'#f4f7fc',}:''">
{{item.label}}
</div>
</div>
<div class="service_detail"> <div class="service_detail">
<nor-card title="服务概况" flag="true"> <div class="service_title_card">
<nor-card title="服务状态" class="service_card" bgc="#e4f4fb">
<template> <template>
<div style="overflow:hidden;height:160px;padding-top:10px;"> <div style="height:125px;padding-top:10px;">
<div style="height:115px;padding-top:10px;" class="service_card_box">
<p style="color: #707693;font-size: 16px;text-align:center;">服务状态</p>
<waveIcon :state="micor_state.state=='running'?'运行中':'停止'" style="margin:10px auto;"></waveIcon> <waveIcon :state="micor_state.state=='running'?'运行中':'停止'" style="margin:10px auto;"></waveIcon>
<p style="color: #58617a;font-size: 16px;text-align:center;">{{ micor_state.state=='running'?'运行中':'停止' }}</p> <p style="color: #58617a;font-size: 16px;text-align:center;">{{ micor_state.state=='running'?'运行中':'停止' }}</p>
</div> </div>
</template>
<div style="height:115px;" class="service_num service_card_box"> </nor-card>
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">服务平均响应时间</span> <nor-card title="服务平均响应时间" class="service_card" bgc="#e4f4fb">
<template>
<div style="height:125px;padding-top:20px;" class="service_num">
<p>{{ micor_state.averageTime }}ms</p> <p>{{ micor_state.averageTime }}ms</p>
<p>最大响应时间:{{ micor_state.maxTime }}ms</p> <p>最大响应时间:{{ micor_state.maxTime }}ms</p>
</div> </div>
</template>
<div style="height:115px;" class="service_num service_card_box"> </nor-card>
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">吞吐率</span> <nor-card title="吞吐率" class="service_card" bgc="#e4f4fb">
<template>
<div style="height:125px;padding-top:20px;" class="service_num">
<p>{{ micor_state.averageTraffic }}dps</p> <p>{{ micor_state.averageTraffic }}dps</p>
<p>最大吞吐率:{{ micor_state.maxTraffic }}dps</p> <p>最大吞吐率:{{ micor_state.maxTraffic }}dps</p>
</div> </div>
</template>
<div style="height:115px;padding-top:30px;" class="service_num service_card_box"> </nor-card>
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">内存使用</span> <nor-card title="内存使用" class="service_card" bgc="#e4f4fb">
<template>
<div style="height:125px;padding-top:40px;" class="service_num">
<p>{{ micor_state.memory }}MB</p> <p>{{ micor_state.memory }}MB</p>
</div> </div>
</div>
</template> </template>
</nor-card> </nor-card>
</div>
<nor-card title="服务设置" flag="true" v-show="is_current_user"> <!-- <nor-card title="服务设置" flag="true" v-show="is_current_user"> -->
<div class="addimage"> <!-- <div class="addimage">
<el-select v-model="mesh_value" placeholder="请选择"> <el-select v-model="mesh_value" placeholder="请选择">
<el-option v-for="item in mesh_options" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in mesh_options" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</div> </div> -->
<div v-show="is_current_user" class="tag_ox">
<p class="imagebox"> <p class="imagebox">
<span @click="image_select = index;getImageInfo()" :style=" <span @click="image_select = index;getImageInfo()" :style="
image_select == index image_select == index
...@@ -175,7 +192,8 @@ ...@@ -175,7 +192,8 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</nor-card> </div>
<!-- </nor-card> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -292,7 +310,7 @@ export default { ...@@ -292,7 +310,7 @@ export default {
memory: "" memory: ""
}, },
public_flag: false, public_flag: false,
now_micor_service: 0, now_micor_service: '',
image_arr: [], image_arr: [],
area_arr: [], area_arr: [],
now_image_version: [], now_image_version: [],
...@@ -499,6 +517,30 @@ export default { ...@@ -499,6 +517,30 @@ export default {
}, },
mounted() {}, mounted() {},
methods: { methods: {
iconChange(val){
this.now_micor_service = val
// 获取当前el-select标签第一层div
const dom = this.$refs['select_icon'].$el;
if(dom.children[0].children[0].tagName == 'SPAN'){
dom.children[0].children[0].remove()
}
// 创建需要添加到其中的标签 并填充内容
const svgDom = document.createElement('span'); // ('<svg-icon ref="iconRef" icon-class="' + val + '" style="float: left;width: 3%;height: 30px;border: 1px solid #dcdfe6;border-right:none;" />');
svgDom.setAttribute('class', 'el-input__prefix');
if(this.service_list_arr[val].is_unhealth==0){
svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:15px;margin-left:10px;display:inline-block;width:0px;height:18px;border-radius:4px;"></span>';
}else{
svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:10px;margin-left:10px;display:inline-block;width:36px;color:#fff;height:18px;line-height:18px;border-radius:4px;background-color:#e15260;">故障</span>';
}
// 将创建的标签添加到父节点(第二层div)
dom.children[0].appendChild(svgDom);
// 得到el-select中的input标签
const inputDom = dom.children[0].children[0];
inputDom.setAttribute('style', 'padding-left: 60px;');
// 将添加的标签放到input前面
dom.children[0].insertBefore(svgDom, inputDom);
this.get_micro_service();
},
get_service_arae() { get_service_arae() {
this.$http this.$http
.get("/apaas/service/v3/service/manager/servarea") .get("/apaas/service/v3/service/manager/servarea")
...@@ -938,10 +980,20 @@ export default { ...@@ -938,10 +980,20 @@ export default {
.get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`) .get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`)
.then(response => { .then(response => {
if (response.data.success) { if (response.data.success) {
this.service_list_arr = response.data.data; var temp = []
if (this.service_list_arr && this.service_list_arr.length) { response.data.data.forEach((e,idx) => {
this.get_micro_service(); temp.push({
} ...e,
index:idx
})
});
this.service_list_arr = temp;
setTimeout(()=>{
this.iconChange(0)
},2000)
// if (this.service_list_arr && this.service_list_arr.length) {
// this.get_micro_service();
// }
} }
}); });
} }
...@@ -1016,8 +1068,19 @@ export default { ...@@ -1016,8 +1068,19 @@ export default {
.addimage .el-input__icon { .addimage .el-input__icon {
line-height: 28px; line-height: 28px;
} }
.service_title .el-input__inner{
background-color: #f7f8f9;
height: 32px;
line-height: 32px;
}
.tag_ox .el-table thead{
color: #1a2236;
}
</style> </style>
<style scoped> <style scoped>
.service_title .el-select{
margin-left: 10px;
}
.info_contain >>> .apass_dialog .el-dialog__footer { .info_contain >>> .apass_dialog .el-dialog__footer {
padding-top: 0; padding-top: 0;
} }
...@@ -1189,6 +1252,7 @@ export default { ...@@ -1189,6 +1252,7 @@ export default {
overflow: hidden; overflow: hidden;
margin-bottom: 20px; margin-bottom: 20px;
padding-left: 40px; padding-left: 40px;
margin-top: 20px;
} }
.imagebox span { .imagebox span {
height: 34px; height: 34px;
...@@ -1244,7 +1308,8 @@ export default { ...@@ -1244,7 +1308,8 @@ export default {
.service_detail { .service_detail {
float: left; float: left;
height: 270px; height: 270px;
width: calc(100% - 425px); width: 100%;
/* width: calc(100% - 425px); */
} }
.service_card_box { .service_card_box {
float: left; float: left;
...@@ -1265,4 +1330,25 @@ export default { ...@@ -1265,4 +1330,25 @@ export default {
.dialog-content .formname:nth-of-type(1) { .dialog-content .formname:nth-of-type(1) {
margin-top: 0px; margin-top: 0px;
} }
.service_type_ab{
height: 48px;
width: 300px;
background-color: #f6f7fb;
border-radius: 8px;
overflow: hidden;
margin: 0px 0 10px 0px;
padding: 6px;
box-sizing: border-box;
}
.service_type_ab div{
float: left;
height: 36px;
width: 33.3%;
line-height: 36px;
text-align: center;
color: #58617a;
cursor: pointer;
font-weight: 600;
border-radius: 6px;
}
</style> </style>
...@@ -338,6 +338,16 @@ export default new Router({ ...@@ -338,6 +338,16 @@ export default new Router({
name: "skfwDetail", name: "skfwDetail",
component: () => import("@/pages/service_shop/skfwDetail"), component: () => import("@/pages/service_shop/skfwDetail"),
}, // 服务超市 - 时空服务详情 }, // 服务超市 - 时空服务详情
{
path: "/shop/spfwDetail/:id",
name: "spfwDetail",
component: () => import("@/pages/service_shop/spfwDetail"),
}, // 服务超市 - 视频服务详情
{
path: "/shop/gzfwDetail/:id",
name: "sjfwDetail",
component: () => import("@/pages/service_shop/gzfwDetail"),
}, // 服务超市 - 感知服务详情
{ {
path: "/shop/zhfwDetail/:id", path: "/shop/zhfwDetail/:id",
name: "zhfwDetail", name: "zhfwDetail",
......
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