Skip to content

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

我的服务接口，差俩，云服务升级id，感觉应用的字段名和服务不一样。。。。

parent a47b2b59
Hide whitespace changes
Inline Side-by-side
Showing with 512 additions and 366 deletions
src/components/e-charts/bar-chart.vue
View file @ 69ff4a9c
...@@ -10,8 +10,8 @@ export default { ...@@ -10,8 +10,8 @@ export default {
type: Object, type: Object,
default: () => { default: () => {
return { return {
xaxis: [], legendData: [],
data: [] seriesData: []
}; };
} }
}, },
...@@ -56,7 +56,7 @@ export default { ...@@ -56,7 +56,7 @@ export default {
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
data: self.data.xaxis, data: self.data.legendData,
axisLabel: { axisLabel: {
margin: 20, margin: 20,
color: "#0d1847", color: "#0d1847",
...@@ -84,13 +84,13 @@ export default { ...@@ -84,13 +84,13 @@ export default {
show: false show: false
}, },
splitArea: { splitArea: {
show: self.show_split, show: true,
interval: 0,
areaStyle: { areaStyle: {
color: ["#f4f5fd", "#fff"], color: ["#fff", "#f8f9fd"],
opacity: 0.5 opacity: 0.5
} },
} interval: 0
},
} }
], ],
yAxis: [ yAxis: [
...@@ -101,6 +101,7 @@ export default { ...@@ -101,6 +101,7 @@ export default {
fontSize: 12 fontSize: 12
} }
}, },
minInterval: 1,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(0, 0, 0, 0)" color: "rgba(0, 0, 0, 0)"
...@@ -120,7 +121,7 @@ export default { ...@@ -120,7 +121,7 @@ export default {
series: [ series: [
{ {
type: "bar", type: "bar",
data: self.data.data, data: self.data.seriesData,
barWidth: self.bar_width, barWidth: self.bar_width,
itemStyle: { itemStyle: {
normal: { normal: {
......
src/components/e-charts/commentlist.vue
View file @ 69ff4a9c
<template> <template>
<ul class="comments_list apass_scroll"> <ul class="comments_list apass_scroll">
<li <li class="comment_card" v-for="(item, index) in data" :key="'comment_' + index">
class="comment_card"
v-for="(item, index) in data"
:key="'comment_' + index"
>
<div class="comment-left"> <div class="comment-left">
<el-avatar :size="45" fit="cover" :src="item.picture_path" /> <el-avatar :size="45" fit="cover" :src="item.message" />
</div> </div>
<div class="comment-right"> <div class="comment-right">
<p class="comment-base"> <p class="comment-base">
<span <span class="comment-user_name text_clip" v-text="item.message"></span>
class="comment-user_name text_clip" <span class="comment-time text_clip" v-text="getTimeText(item.add_time || '')"></span>
v-text="item.user_name"
></span>
<span
class="comment-time text_clip"
v-text="getTimeText(item.add_time || '')"
></span>
</p> </p>
<div class="commnet-rate"> <div class="commnet-rate">
<el-rate <el-rate
...@@ -25,10 +15,9 @@ ...@@ -25,10 +15,9 @@
:value="item.score" :value="item.score"
disabled disabled
score-template="{value}" score-template="{value}"
> ></el-rate>
</el-rate>
</div> </div>
<p class="comment-description" v-text="item.content"></p> <p class="comment-description" v-text="item.message"></p>
</div> </div>
</li> </li>
</ul> </ul>
...@@ -41,14 +30,48 @@ export default { ...@@ -41,14 +30,48 @@ export default {
props: { props: {
data: { data: {
type: Array, type: Array,
required: true, required: true
}, }
}, },
methods: { methods: {
getTimeText(time) { getTimeText(time) {
return helper.dateStringTransform(time); return helper.dateStringTransform(time);
}, },
autoScroll() {
if (this.timer) {
clearInterval(this.timer);
}
this.$el.scrollTop = 0;
this.timer = setInterval(() => {
let curScrollTop = this.$el.scrollTop + 50;
if (curScrollTop > this.$el.scrollHeight - this.$el.clientHeight) {
curScrollTop = 0;
}
this.$el.scrollTop = curScrollTop;
}, 1500);
},
mouseenter() {
if (this.timer) {
clearInterval(this.timer);
}
},
mouseleave() {
this.autoScroll();
}
},
mounted() {
this.autoScroll();
window.addEventListener("resize", () => {
this.autoScroll();
});
}, },
destroyed() {
if (this.timer) {
clearInterval(this.timer);
}
}
}; };
</script> </script>
......
src/components/e-charts/graph.vue
View file @ 69ff4a9c
...@@ -10,13 +10,16 @@ export default { ...@@ -10,13 +10,16 @@ export default {
type: Object, type: Object,
default: () => { default: () => {
return { return {
xaxis: [], legend: {
data: []
},
data: [], data: [],
legend: [] series: [{ data: [] }, { data: [] }]
}; };
} }
} }
}, },
watch: {},
data: () => ({}), data: () => ({}),
mounted() {}, mounted() {},
methods: { methods: {
...@@ -30,7 +33,7 @@ export default { ...@@ -30,7 +33,7 @@ export default {
icon: "roundRect", icon: "roundRect",
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
data: self.data.legend, data: self.data.legend.data,
orient: "horizontal", orient: "horizontal",
backgroundColor: "#f4f7fc" backgroundColor: "#f4f7fc"
}, },
...@@ -44,7 +47,7 @@ export default { ...@@ -44,7 +47,7 @@ export default {
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
data: self.data.xaxis, data: self.data.data,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#f2f2f2" color: "#f2f2f2"
...@@ -55,8 +58,7 @@ export default { ...@@ -55,8 +58,7 @@ export default {
color: "#0d1847", color: "#0d1847",
textStyle: { textStyle: {
fontSize: 12 fontSize: 12
}, }
interval: 0
}, },
boundaryGap: false boundaryGap: false
} }
...@@ -67,6 +69,7 @@ export default { ...@@ -67,6 +69,7 @@ export default {
axisTick: { axisTick: {
show: false show: false
}, },
minInterval: 1,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(0, 0, 0, 0)" color: "rgba(0, 0, 0, 0)"
...@@ -88,9 +91,9 @@ export default { ...@@ -88,9 +91,9 @@ export default {
], ],
series: [ series: [
{ {
name: self.data.legend[0], name: self.data.legend.data[0],
type: "line", type: "line",
data: self.data.data[0], data: self.data.series[0].data,
symbolSize: 1, symbolSize: 1,
symbol: "circle", symbol: "circle",
smooth: true, smooth: true,
...@@ -105,9 +108,9 @@ export default { ...@@ -105,9 +108,9 @@ export default {
} }
}, },
{ {
name: self.data.legend[1], name: self.data.legend.data[1],
type: "line", type: "line",
data: self.data.data[1], data: self.data.series[1].data,
symbolSize: 1, symbolSize: 1,
symbol: "circle", symbol: "circle",
smooth: true, smooth: true,
......
src/components/e-charts/histogramScroll.vue
View file @ 69ff4a9c
...@@ -80,7 +80,7 @@ export default { ...@@ -80,7 +80,7 @@ export default {
show: true, show: true,
interval: 0, interval: 0,
areaStyle: { areaStyle: {
color: ["#f4f5fd", "#fff"], color: ["#fff", "#f8f9fd"],
opacity: 0.5, opacity: 0.5,
}, },
}, },
......
src/components/e-charts/line_chart.vue
View file @ 69ff4a9c
...@@ -6,21 +6,48 @@ ...@@ -6,21 +6,48 @@
import uuidv1 from "uuid/v1"; import uuidv1 from "uuid/v1";
var echarts = require("echarts"); var echarts = require("echarts");
export default { export default {
props: ['data'], props: {
data: {
type: Object,
default: () => {
return {
xAxisData: [],
seriesData: [
{
name: "",
data: []
},
{
name: "",
data: []
}
]
};
}
},
targetValue: {
type: Number,
default: () => 0
}
},
components: {}, components: {},
data() { data() {
return { return {
line: uuidv1(), line: uuidv1()
}; };
}, },
watch: {}, watch: {
data() {
this.init_line_charts(this.data.xAxisData, this.data.seriesData);
}
},
computed: {}, computed: {},
created() {}, created() {},
mounted() { mounted() {
this.init_line_charts(this.data.xaxis,this.data.data) this.init_line_charts(this.data.xAxisData, this.data.seriesData);
}, },
methods: { methods: {
init_line_charts(xAxisData,yarr) { init_line_charts(xAxisData, yarr) {
let bgColor = "#fff"; let bgColor = "#fff";
let color = [ let color = [
"#0090FF", "#0090FF",
...@@ -28,7 +55,7 @@ export default { ...@@ -28,7 +55,7 @@ export default {
"#FFC005", "#FFC005",
"#FF515A", "#FF515A",
"#8B5CFF", "#8B5CFF",
"#00CA69", "#00CA69"
]; ];
const hexToRgba = (hex, opacity) => { const hexToRgba = (hex, opacity) => {
let rgbaColor = ""; let rgbaColor = "";
...@@ -41,56 +68,54 @@ export default { ...@@ -41,56 +68,54 @@ export default {
return rgbaColor; return rgbaColor;
}; };
var series = [] var series = [];
yarr.forEach((e,idx) => { yarr.forEach((e, idx) => {
series.push( series.push({
{ name: e.name,
name: e.name, type: "line",
type: "line", smooth: true,
smooth: true, showSymbol: false,
showSymbol: false, // symbolSize: 8,
// symbolSize: 8, zlevel: 3,
zlevel: 3, lineStyle: {
lineStyle: { normal: {
normal: { color: color[idx],
color: color[idx], shadowBlur: 5,
shadowBlur: 5, shadowColor: hexToRgba(color[idx], 0.5),
shadowColor: hexToRgba(color[idx], 0.5), shadowOffsetY: 10
shadowOffsetY: 10, }
}, },
}, areaStyle: {
areaStyle: { normal: {
normal: { color: new echarts.graphic.LinearGradient(
color: new echarts.graphic.LinearGradient( 0,
0, 0,
0, 0,
0, 1,
1, [
[ {
{ offset: 0,
offset: 0, color: hexToRgba(color[idx], 0.3)
color: hexToRgba(color[idx], 0.3), },
}, {
{ offset: 1,
offset: 1, color: hexToRgba(color[idx], 0.1)
color: hexToRgba(color[idx], 0.1), }
}, ],
], false
false ),
), shadowColor: hexToRgba(color[idx], 0.1),
shadowColor: hexToRgba(color[idx], 0.1), shadowBlur: 10
shadowBlur: 10, }
}, },
}, emphasis: {
emphasis: { itemStyle: {
itemStyle: { borderWidth: 5
borderWidth: 5, }
},
},
data: e.arr,
}, },
) data: e.data
});
}); });
var option = { var option = {
...@@ -104,23 +129,23 @@ export default { ...@@ -104,23 +129,23 @@ export default {
itemHeight: 10, itemHeight: 10,
icon: "roundRect", icon: "roundRect",
orient: "horizontal", orient: "horizontal",
backgroundColor: "#f4f7fc", backgroundColor: "#f4f7fc"
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
lineStyle: { lineStyle: {
color: "#c3caf8", color: "#c3caf8",
width: 2, width: 2
}, }
}, }
}, },
grid: { grid: {
top: 10, top: 10,
left:10, left: 10,
right:30, right: 30,
bottom:30, bottom: 30,
containLabel: true, containLabel: true
}, },
xAxis: [ xAxis: [
{ {
...@@ -128,22 +153,24 @@ export default { ...@@ -128,22 +153,24 @@ export default {
boundaryGap: false, //是否从起点开始画 boundaryGap: false, //是否从起点开始画
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#0d1847", color: "#0d1847"
}, }
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#D9D9D9", color: "#D9D9D9"
}, }
}, },
splitArea: { splitArea: {
show: true, show: true,
areaStyle: { areaStyle: {
color: ["#fff", "#f8f9fd"], color: ["#fff", "#f8f9fd"],
opacity: 0.5
}, },
interval: 0
}, },
data: xAxisData, data: xAxisData
}, }
], ],
yAxis: [ yAxis: [
{ {
...@@ -151,36 +178,37 @@ export default { ...@@ -151,36 +178,37 @@ export default {
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#a9aec0", color: "#a9aec0",
fontSize: 16, fontSize: 16
}, }
}, },
nameTextStyle: { nameTextStyle: {
color: "#666", color: "#666",
fontSize: 12, fontSize: 12,
lineHeight: 40, lineHeight: 40
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#f2f2f2", color: "#f2f2f2"
}, }
}, },
minInterval: 1,
axisLine: { axisLine: {
// show: false, // show: false,
lineStyle: { lineStyle: {
color: "#e3e5ef", color: "#e3e5ef"
}, }
}, },
axisTick: { axisTick: {
show: false, show: false
}, }
}, }
], ],
series: series, series: series
}; };
window[this.line] = echarts.init(document.getElementById(this.line)); window[this.line] = echarts.init(document.getElementById(this.line));
window[this.line].setOption(option, true); window[this.line].setOption(option, true);
}, }
}, }
}; };
</script> </script>
......
src/components/e-charts/multiple_circle.vue
View file @ 69ff4a9c
...@@ -32,7 +32,13 @@ export default { ...@@ -32,7 +32,13 @@ export default {
yylx_asy: uuidv1() yylx_asy: uuidv1()
}; };
}, },
watch: {}, watch: {
data: {
handler() {
this.init_yylx_asy(this.data, this.text);
}
}
},
computed: {}, computed: {},
created() {}, created() {},
mounted() { mounted() {
...@@ -107,7 +113,7 @@ export default { ...@@ -107,7 +113,7 @@ export default {
type: "pie", type: "pie",
clockWise: false, clockWise: false,
radius: [65, 68], radius: [65, 68],
center: ["51%", "50%"], center: ["50%", "50%"],
hoverAnimation: false, hoverAnimation: false,
itemStyle: { itemStyle: {
normal: { normal: {
...@@ -117,8 +123,7 @@ export default { ...@@ -117,8 +123,7 @@ export default {
color: "#58617a", color: "#58617a",
formatter: params => { formatter: params => {
var percent = 0; var percent = 0;
percent = total != 0 ? ((params.value / total) * 100).toFixed(2) : 0;
percent = ((params.value / total) * 100).toFixed(2);
if (params.name !== "") { if (params.name !== "") {
return percent + "%"; return percent + "%";
} else { } else {
......
src/components/e-charts/single_circle.vue
View file @ 69ff4a9c
...@@ -6,37 +6,55 @@ ...@@ -6,37 +6,55 @@
import uuidv1 from "uuid/v1"; import uuidv1 from "uuid/v1";
var echarts = require("echarts"); var echarts = require("echarts");
export default { export default {
props: ['data'], props: {
data: {
type: Object,
default: () => {
return {
num: 0,
color: "#e15260",
text: "敏感"
};
}
}
},
components: {}, components: {},
data() { data() {
return { return {
health: uuidv1(), health: uuidv1()
}; };
}, },
watch: {}, watch: {
data: {
handler(val) {
console.log(val);
this.init_health(this.data.num, this.data.color, this.data.text);
}
}
},
computed: {}, computed: {},
created() {}, created() {},
mounted() { mounted() {
this.init_health(this.data.num,this.data.color,this.data.text); this.init_health(this.data.num, this.data.color, this.data.text);
}, },
methods: { methods: {
init_health(num,color,text) { init_health(num, color, text) {
var options = { var options = {
title: { title: {
text: num + "%", text: num + "%",
textStyle: { textStyle: {
color: "#000", color: "#000",
fontSize: 26, fontSize: 26,
fontWeight: 200, fontWeight: 200
}, },
subtext: text, subtext: text,
subtextStyle: { subtextStyle: {
color: "#707693", color: "#707693",
fontSize: 12, fontSize: 12
}, },
itemGap: 0, // 主副标题距离 itemGap: 0, // 主副标题距离
left: "center", left: "center",
top: "center", top: "center"
}, },
angleAxis: { angleAxis: {
max: 100, // 满分 max: 100, // 满分
...@@ -44,37 +62,37 @@ export default { ...@@ -44,37 +62,37 @@ export default {
startAngle: 90, startAngle: 90,
// 隐藏刻度线 // 隐藏刻度线
axisLine: { axisLine: {
show: false, show: false
}, },
axisTick: { axisTick: {
show: false, show: false
}, },
axisLabel: { axisLabel: {
show: false, show: false
}, },
splitLine: { splitLine: {
show: false, show: false
}, }
}, },
radiusAxis: { radiusAxis: {
type: "category", type: "category",
// 隐藏刻度线 // 隐藏刻度线
axisLine: { axisLine: {
show: false, show: false
}, },
axisTick: { axisTick: {
show: false, show: false
}, },
axisLabel: { axisLabel: {
show: false, show: false
}, },
splitLine: { splitLine: {
show: false, show: false
}, }
}, },
polar: { polar: {
center: ["50%", "50%"], center: ["50%", "50%"],
radius: "140%", //图形大小 radius: "140%" //图形大小
}, },
series: [ series: [
{ {
...@@ -88,17 +106,17 @@ export default { ...@@ -88,17 +106,17 @@ export default {
normal: { normal: {
color: color, color: color,
shadowColor: "rgba(0, 0, 0, 0.2)", shadowColor: "rgba(0, 0, 0, 0.2)",
shadowBlur: 20, shadowBlur: 20
}, }
}, }
}, }
], ],
coordinateSystem: "polar", coordinateSystem: "polar",
roundCap: true, roundCap: true,
barWidth: 8, barWidth: 8,
barGap: "-100%", // 两环重叠 barGap: "-100%", // 两环重叠
z: 2, z: 2
}, },
{ {
// 灰色环 // 灰色环
...@@ -110,22 +128,22 @@ export default { ...@@ -110,22 +128,22 @@ export default {
itemStyle: { itemStyle: {
color: "#c9cedd", color: "#c9cedd",
shadowColor: "rgba(0, 0, 0, 0.2)", shadowColor: "rgba(0, 0, 0, 0.2)",
shadowBlur: 20, shadowBlur: 20
}, }
}, }
], ],
coordinateSystem: "polar", coordinateSystem: "polar",
roundCap: true, roundCap: true,
barWidth: 8, barWidth: 8,
barGap: "-100%", // 两环重叠 barGap: "-100%", // 两环重叠
z: 1, z: 1
}, }
], ]
}; };
window[this.health] = echarts.init(document.getElementById(this.health)); window[this.health] = echarts.init(document.getElementById(this.health));
window[this.health].setOption(options, true); window[this.health].setOption(options, true);
}, }
}, }
}; };
</script> </script>
......
src/components/e-charts/toplist.vue
View file @ 69ff4a9c
<template> <template>
<div <div class="top_list apass_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave">
class="top_list apass_scroll"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
>
<ul> <ul>
<li class="item_list" v-for="(option, index) in options" :key="index"> <li class="item_list" v-for="(option, index) in options" :key="index">
<div class="item_index"> <div class="item_index">
<span v-text="'TOP' + (index + 1)"></span> <span v-text="'TOP' + (index + 1)"></span>
</div> </div>
<div class="item_logo"> <div class="item_logo">
<el-avatar shape="square" :size="28" fit="cover" :src="option.logo" /> <el-avatar shape="square" :size="28" fit="cover" :src="option.cover" />
</div> </div>
<div class="item_detail"> <div class="item_detail">
<p class="item_info"> <p class="item_info">
<span class="text_clip"> <span
{{ option.name }} class="text_clip is_link"
@click="getDetail(option.service_id, option.data_service_type1)"
>
{{ option.service_name }}
<i class="el-icon-arrow-right"></i> <i class="el-icon-arrow-right"></i>
</span> </span>
<span v-text="option.value + (option.unit || '次')"></span> <span
v-text="helper.numberFormat(option.request_count, 2) + (option.request_count > 10000 ? '万次' : '次')"
></span>
</p> </p>
<el-progress <el-progress
class="item_progress" class="item_progress"
:percentage="getPercent(option.value)" :percentage="getPercent(option.request_count)"
:show-text="false" :show-text="false"
color="#e56600" color="#e56600"
></el-progress> ></el-progress>
...@@ -33,30 +34,36 @@ ...@@ -33,30 +34,36 @@
</template> </template>
<script> <script>
import helper from "@/services/helper";
export default { export default {
props: { props: {
options: { options: {
type: Array, type: Array,
default: () => [], default: () => []
}, },
targetValue: { targetValue: {
type: Number, type: Number,
default: () => 1000, default: () => 0
}, }
}, },
data() { data() {
return { return {
timer: null, timer: null,
helper
}; };
}, },
watch: { watch: {
text() { text() {
this.autoScroll(); this.autoScroll();
}, }
}, },
methods: { methods: {
getPercent(value) { getPercent(value) {
return Math.min((value / this.targetValue) * 100, 100); if (value == 0) {
return 0;
} else {
return Math.min((value / this.targetValue) * 100, 100);
}
}, },
autoScroll() { autoScroll() {
if (this.timer) { if (this.timer) {
...@@ -81,10 +88,28 @@ export default { ...@@ -81,10 +88,28 @@ export default {
mouseleave() { mouseleave() {
this.autoScroll(); this.autoScroll();
}, },
getDetail(id, type) {
switch (type) {
case 5:
this.$router.push(`/shop/sjfwDetail/${id}`);
break;
case 6:
this.$router.push(`/shop/skfwDetail/${id}`);
break;
case 21:
this.$router.push(`/shop/zhfwDetail/${id}`);
break;
default:
this.$message({
message: "查看详情失败",
type: "warning"
});
break;
}
}
}, },
mounted() { mounted() {
this.autoScroll(); this.autoScroll();
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
this.autoScroll(); this.autoScroll();
}); });
...@@ -93,7 +118,7 @@ export default { ...@@ -93,7 +118,7 @@ export default {
if (this.timer) { if (this.timer) {
clearInterval(this.timer); clearInterval(this.timer);
} }
}, }
}; };
</script> </script>
...@@ -151,4 +176,7 @@ export default { ...@@ -151,4 +176,7 @@ export default {
.item_progress { .item_progress {
margin-top: 6px; margin-top: 6px;
} }
.is_link {
cursor: pointer;
}
</style> </style>
src/components/infoList.vue
View file @ 69ff4a9c
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
访问地址: 访问地址:
<a :href="item.info" target="_blank">{{ item.info }}</a> <a :href="item.info" target="_blank">{{ item.info }}</a>
</span> </span>
<span v-else-if="item.type == 'time'">{{ helper.dateStringTransform(item.info) }}</span>
<span v-else v-html="item.info" style="white-space:pre-wrap;"></span> <span v-else v-html="item.info" style="white-space:pre-wrap;"></span>
<span <span
v-if="item.type && item.type == 'down' && item.url != ''" v-if="item.type && item.type == 'down' && item.url != ''"
......
src/components/service_shop_menu.vue → src/components/service-list/service_shop_menu.vue
View file @ 69ff4a9c
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
<li v-for="(item, index) in menuList" :key="index" @click="active(item.visit_url)"> <li v-for="(item, index) in menuList" :key="index" @click="active(item.visit_url)">
<img <img
v-if="item.visit_url == actives" v-if="item.visit_url == actives"
:src="item.active != '' ? require('../assets/imgs/' + item.active + '.png') : ''" :src="item.active != '' ? require('@/assets/imgs/' + item.active + '.png') : ''"
class="menu_img" class="menu_img"
/> />
<img v-else :src="require('../assets/imgs/' + item.default + '.png')" class="menu_img" /> <img v-else :src="require('@/assets/imgs/' + item.default + '.png')" class="menu_img" />
<span <span
:class="item.visit_url == actives ? 'menu_item_active':'menu_item'" :class="item.visit_url == actives ? 'menu_item_active':'menu_item'"
>{{ item.menu_name }}</span> >{{ item.menu_name }}</span>
......
src/components/shop-cloud/shop-cloud.vue
View file @ 69ff4a9c
...@@ -255,7 +255,7 @@ ...@@ -255,7 +255,7 @@
v-for="(item, index) in workSpaceOptions" v-for="(item, index) in workSpaceOptions"
:key="index" :key="index"
:label="item.namespace" :label="item.namespace"
:value="index" :value="id"
></el-option> ></el-option>
</el-select> </el-select>
</div> </div>
...@@ -1046,7 +1046,7 @@ export default { ...@@ -1046,7 +1046,7 @@ export default {
}); });
} else { } else {
let query = { let query = {
resource_id: this.paramsOld.id, resource_id: this.workSpace,
resource_apply: { resource_apply: {
apply_file: this.formOld.apply_file, apply_file: this.formOld.apply_file,
cpu: Number(this.formOld.cpu), cpu: Number(this.formOld.cpu),
......
src/components/topology.vue
View file @ 69ff4a9c
...@@ -280,7 +280,7 @@ export default { ...@@ -280,7 +280,7 @@ export default {
label: "时空服务" label: "时空服务"
}, },
{ {
id: "level2", id: "level3",
x: legendX, x: legendX,
y: legendBeginY + legendYPadding * 2, y: legendBeginY + legendYPadding * 2,
type: "image", type: "image",
...@@ -289,7 +289,7 @@ export default { ...@@ -289,7 +289,7 @@ export default {
label: "视频服务" label: "视频服务"
}, },
{ {
id: "level2", id: "level4",
x: legendX, x: legendX,
y: legendBeginY + legendYPadding * 3, y: legendBeginY + legendYPadding * 3,
type: "image", type: "image",
...@@ -298,7 +298,7 @@ export default { ...@@ -298,7 +298,7 @@ export default {
label: "感知服务" label: "感知服务"
}, },
{ {
id: "level2", id: "level5",
x: legendX, x: legendX,
y: legendBeginY + legendYPadding * 4, y: legendBeginY + legendYPadding * 4,
type: "image", type: "image",
......
src/pages/data-analysis/my-service.vue
View file @ 69ff4a9c
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<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">8</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>
...@@ -97,7 +97,11 @@ ...@@ -97,7 +97,11 @@
: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" src="../../assets/imgs/icon_up.png" alt /> <img
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> </span>
</p> </p>
...@@ -122,7 +126,11 @@ ...@@ -122,7 +126,11 @@
: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" src="../../assets/imgs/icon_up.png" alt /> <img
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> </span>
</p> </p>
...@@ -169,7 +177,7 @@ ...@@ -169,7 +177,7 @@
<block-radius <block-radius
:show_header="true" :show_header="true"
title="服务调用排名分析" title="服务调用排名分析"
:buttons_arr="['被调用次数', '被调用次数']" :buttons_arr="['被调用次数', '调用次数']"
@changeButton="changeServeiceApplyCountBtn" @changeButton="changeServeiceApplyCountBtn"
class="block" class="block"
> >
...@@ -213,7 +221,7 @@ ...@@ -213,7 +221,7 @@
class="block" class="block"
> >
<commentlist <commentlist
v-if="serveiceInfoBtnIndex == 0" v-if="right_3_state == 0"
class="block-radius-content" class="block-radius-content"
:data="commentlistData" :data="commentlistData"
></commentlist> ></commentlist>
...@@ -272,20 +280,20 @@ export default { ...@@ -272,20 +280,20 @@ export default {
Topology Topology
}, },
data: () => ({ data: () => ({
overview: {
serviceTotal: 0
},
left_1_state: 0, left_1_state: 0,
mult_data_state: [ left_2_state: 0,
{ name: "正常", value: 4 }, left_3_state: 0,
{ name: "警告", value: 2 }, center_3_state: 0,
{ name: "错误", value: 0 }, right_0_state: 0,
{ name: "未使用", value: 2 } right_1_state: 0,
], right_2_state: 0,
mult_data: [ right_3_state: 0,
{ name: "数据服务", value: 4 }, last_id: 0,
{ name: "时空服务", value: 2 }, mult_data_state: [],
{ name: "视频服务", value: 0 }, mult_data: [],
{ name: "感知服务", value: 0 },
{ name: "综合服务", value: 2 }
],
spIndicatorStyles1: false, spIndicatorStyles1: false,
spRefLineStyles3: { spRefLineStyles3: {
stroke: "#d14", stroke: "#d14",
...@@ -312,45 +320,30 @@ export default { ...@@ -312,45 +320,30 @@ export default {
}, },
text: "服务总数", text: "服务总数",
single_data: { single_data: {
num: 50, num: 0,
color: "#25bdb1", color: "#25bdb1",
text: "共享" text: "共享"
}, },
single_data1: { single_data1: {
num: 30, num: 0,
color: "#f5ab4c", color: "#f5ab4c",
text: "受限" text: "受限"
}, },
single_data2: { single_data2: {
num: 20, num: 0,
color: "#e15260", color: "#e15260",
text: "敏感" text: "敏感"
}, },
line_data: { line_data: {
xaxis: [ xAxisData: [],
"07/03", seriesData: [
"07/04",
"07/05",
"07/06",
"07/07",
"07/08",
"07/09",
"07/10",
"07/11",
"07/12",
"07/13",
"07/14",
"07/15",
"07/16"
],
data: [
{ {
name: "上架中", name: "",
arr: [5, 6, 7, 8, 5, 6, 7, 5,6,8,5,3,2,4] data: []
}, },
{ {
name: "已下架", name: "",
arr: [6, 5, 7, 6, 7, 6, 4, 3,5,7,8,6,7,4] data: []
} }
] ]
}, },
...@@ -359,122 +352,16 @@ export default { ...@@ -359,122 +352,16 @@ export default {
text: "健康占比" text: "健康占比"
}, },
bar_data: { bar_data: {
xaxis: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"], legendData: [],
data: [4, 1, 2, 1] seriesData: []
}, },
bar_data_org: { bar_data_org: {
xaxis: [ legendData: [],
"省公安厅", seriesData: []
"省发改委", },
"贵州省公安厅", toplistData: [], // 服务调用排名分析
"大数据中心", toplistTargetValue: 0, // 服务调用排名分析 目标值
"省资源局", commentlistData: [], // 服务评价
"js机构"
],
data: [2, 1, 2, 1, 1, 1]
},
toplistData: [
{
name: "报警服务",
value: 15,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "数据服务",
value: 13,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "消息队列服务",
value: 11,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "档案中心服务",
value: 7,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "按键中心服务",
value: 6,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "通用API服务",
value: 3,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "案件中心服务",
value: 1,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
},
{
name: "数据中心服务",
value: 1,
logo:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
unit: "次"
}
], // 服务调用排名分析
toplistTargetValue: 180, // 服务调用排名分析 目标值
serveiceInfoBtnIndex: 0,
commentlistData: [
{
add_time: "2020-07-14T16:35:40Z",
content: "good!!! its good",
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: "太好了",
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: "33333",
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: "4444",
id: 36,
picture_path:
"/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
score: 2,
service_id: 128,
user_name: "普通用户lxy"
}
], // 服务评价
linelistData: [ linelistData: [
{ {
count: 6, count: 6,
...@@ -569,25 +456,25 @@ export default { ...@@ -569,25 +456,25 @@ export default {
} }
], // 热门搜索 数据 ], // 热门搜索 数据
graph_arr: { graph_arr: {
xaxis: [ legend: {
"07/09", data: []
"07/10", },
"07/11", data: [],
"07/12", series: [{ data: [] }, { data: [] }]
"07/13",
"07/14",
"07/15",
"07/16"
],
data: [
[34, 30, 13, 52, 23, 80, 48, 52],
[24, 17, 12, 17, 23, 71, 18, 45],
],
legend: ["被调用次数", "调用次数"]
}, },
topology_datas: {} topology_datas: {}
}), }),
mounted() { mounted() {
this.getServiceOverview();
this.getServiceHealth();
this.getServiceTrend();
this.getServiceType();
this.getServiceSectorse();
this.getServiceOrg();
this.getServiceOpenness();
this.getServiceRequest();
this.getServiceOnlineState();
this.getServiceEstimated();
this.hotSearchHeader = [ this.hotSearchHeader = [
{ {
label: "服务排名", label: "服务排名",
...@@ -619,6 +506,106 @@ export default { ...@@ -619,6 +506,106 @@ export default {
this.getTopologyData(); this.getTopologyData();
}, },
methods: { methods: {
getServiceOverview() {
this.$api.dataAnalysis.getServiceOverview().then(response => {
if (response.data.success == 1) {
this.overview = response.data.data;
this.das_data.data = Math.round(
(response.data.data.seriesData[0].value /
(response.data.data.seriesData[0].value +
response.data.data.seriesData[1].value)) *
100
);
}
});
},
getServiceHealth() {
this.$api.dataAnalysis.getServiceHealth().then(response => {
if (response.data.success == 1) {
this.mult_data_state = response.data.data.seriesData;
}
});
},
getServiceTrend() {
this.$api.dataAnalysis
.getServiceTrend({ type: this.right_1_state })
.then(response => {
if (response.data.success == 1) {
this.graph_arr = response.data.data;
}
});
},
getServiceType() {
this.$api.dataAnalysis
.getServiceType({ type: this.left_2_state })
.then(response => {
if (response.data.success == 1) {
this.mult_data = response.data.data.seriesData;
}
});
},
getServiceSectorse() {
this.$api.dataAnalysis
.getServiceSectorse({ type: this.left_3_state })
.then(response => {
if (response.data.success == 1) {
this.bar_data = response.data.data;
}
});
},
getServiceOrg() {
this.$api.dataAnalysis
.getServiceOrg({ type: this.left_3_state })
.then(response => {
if (response.data.success == 1) {
this.bar_data_org = response.data.data;
}
});
},
getServiceOpenness() {
this.$api.dataAnalysis
.getServiceOpenness({ type: this.right_2_state })
.then(response => {
if (response.data.success == 1) {
this.single_data.num = response.data.data.shared;
this.single_data1.num = response.data.data.privacy;
this.single_data2.num = response.data.data.sensitive;
}
});
},
getServiceRequest() {
this.$api.dataAnalysis
.getServiceRequest({ type: this.right_0_state })
.then(response => {
if (response.data.success == 1) {
this.toplistData = response.data.data;
this.toplistTargetValue = this.toplistData[0].request_count;
}
});
},
getServiceOnlineState() {
this.$api.dataAnalysis
.getServiceOnlineState({ type: this.center_3_state })
.then(response => {
if (response.data.success == 1) {
this.line_data = response.data.data;
console.log(this.line_data);
}
});
},
getServiceEstimated() {
this.$api.dataAnalysis
.getServiceEstimated({
type: this.right_3_state,
last_id: this.last_id
})
.then(response => {
if (response.data.success == 1) {
this.commentlistData = response.data.data;
this.last_id = this.commentlistData[0].last_id;
}
});
},
detailHotSearch(item) { detailHotSearch(item) {
console.log("查看热搜详情"); console.log("查看热搜详情");
}, },
...@@ -626,28 +613,32 @@ export default { ...@@ -626,28 +613,32 @@ export default {
console.log("服务热门搜索: " + sortInfo); console.log("服务热门搜索: " + sortInfo);
}, },
changeServiceTypeBtn(index) { changeServiceTypeBtn(index) {
console.log("服务类型分析:" + index); this.left_2_state = index;
this.getServiceType();
}, },
changeApplicationFieldBtn(index) { changeApplicationFieldBtn(index) {
console.log("服务应用领域统计: " + index); this.left_3_state = index;
this.getServiceSectorse();
}, },
changeServeiceApplyCountBtn(index) { changeServeiceApplyCountBtn(index) {
console.log("服务调用排名分析: " + index); this.right_0_state = index;
this.getServiceRequest();
}, },
changeServeiceInfoBtn(index) { changeServeiceInfoBtn(index) {
this.serveiceInfoBtnIndex = index; this.right_3_state = index;
this.getServiceEstimated();
console.log("服务评价及评分: " + index);
}, },
changeOpenessBtnindex(index) { changeOpenessBtnindex(index) {
console.log("服务开放程度统计: " + index); this.right_2_state = index;
this.getServiceOpenness();
}, },
changeServiceCellBtn(index) { changeServiceCellBtn(index) {
console.log("服务调用次数分析: " + index); this.right_1_state = index;
this.getServiceTrend();
}, },
changeServeiceTotalChangeBtn(index) { changeServeiceTotalChangeBtn(index) {
console.log("服务总数变化趋势: " + index); this.center_3_state = index;
console.log(index); this.getServiceOnlineState();
}, },
getTopologyData() { getTopologyData() {
this.$api.workbench.getServiceTopology().then(response => { this.$api.workbench.getServiceTopology().then(response => {
...@@ -655,8 +646,12 @@ export default { ...@@ -655,8 +646,12 @@ export default {
}); });
}, },
changeServiceStateBtn(index) { changeServiceStateBtn(index) {
console.log(index);
this.left_1_state = index; this.left_1_state = index;
if (index == 0) {
this.getServiceHealth();
} else {
this.a();
}
} }
} }
}; };
......
src/pages/service_shop/shop_cloud.vue
View file @ 69ff4a9c
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</template> </template>
<script> <script>
import ServiceShopMenu from "@/components/service_shop_menu"; import ServiceShopMenu from "@/components/service-list/service_shop_menu";
import ShopCloud from "@/components/shop-cloud/shop-cloud"; import ShopCloud from "@/components/shop-cloud/shop-cloud";
export default { export default {
components: { components: {
......
src/pages/service_shop/shop_list.vue
View file @ 69ff4a9c
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</template> </template>
<script> <script>
import ServiceShopMenu from "@/components/service_shop_menu"; import ServiceShopMenu from "@/components/service-list/service_shop_menu";
import ServiceList from "@/components/service-list/service_list"; import ServiceList from "@/components/service-list/service_list";
export default { export default {
components: { components: {
......
src/pages/user/order/order_detail.vue
View file @ 69ff4a9c
...@@ -258,6 +258,7 @@ export default { ...@@ -258,6 +258,7 @@ export default {
arr: [ arr: [
{ {
title: "审批时间：", title: "审批时间：",
type: "time",
info: "" info: ""
}, },
{ {
...@@ -280,6 +281,7 @@ export default { ...@@ -280,6 +281,7 @@ export default {
arr: [ arr: [
{ {
title: "审批时间：", title: "审批时间：",
type: "time",
info: "" info: ""
}, },
{ {
...@@ -302,6 +304,7 @@ export default { ...@@ -302,6 +304,7 @@ export default {
arr: [ arr: [
{ {
title: "审批时间：", title: "审批时间：",
type: "time",
info: "" info: ""
}, },
{ {
......
src/request/api.js
View file @ 69ff4a9c
import workbench from '@/request/api/workbench'; import workbench from '@/request/api/workbench';
import serviceShop from '@/request/api/service_shop'; import serviceShop from '@/request/api/service-shop';
import user from '@/request/api/user'; import user from '@/request/api/user';
import authority from '@/request/api/authority'; import authority from '@/request/api/authority';
import general from '@/request/api/general'; import general from '@/request/api/general';
import dataAnalysis from '@/request/api/data-analysis';
export default { export default {
workbench, workbench,
serviceShop, serviceShop,
user, user,
authority, authority,
general general,
dataAnalysis
} }
\ No newline at end of file
src/request/api/data-analysis.js 0 → 100644
View file @ 69ff4a9c
import axios from '@/request/http'; // 导入http中创建的axios实例
import qs from 'qs'; // 根据需求是否导入qs模块
const dataAnalysis = {
// Data Analysis
// service
getServiceOverview() {
return axios.get(`/apaas/service/v3/statistics/normal/service/basic`);
},
getServiceHealth() {
return axios.get(`/apaas/service/v3/statistics/normal/service/health`);
},
getServiceTrend(params) {
return axios.get(`/apaas/service/v3/statistics/normal/service/trend?type=${params.type == 0 ? 'week' : 'mon'}`);
},
getServiceType(params) {
return axios.get(`/apaas/service/v3/statistics/normal/service/type/${params.type == 0 ? 'register' : 'apply'}`);
},
getServiceSectorse(params) {
return axios.get(`/apaas/service/v3/statistics/normal/service/sectors/${params.type == 0 ? 'register' : 'apply'}`);
},
getServiceOrg() {
return axios.get(`/apaas/service/v3/statistics/normal/service/org`);
},
getServiceOpenness(params) {
return axios.get(`/apaas/service/v3/statistics/normal/service/openness/${params.type == 0 ? 'register' : 'apply'}`);
},
getServiceRequest(params) {
return axios.get(`/apaas/service/v3/statistics/normal/service/request/${params.type == 0 ? 'register' : 'apply'}`);
},
getServiceOnlineState(params) {
return axios.get(`/apaas/service/v3/statistics/normal/service/onlinestate/${params.type == 0 ? 'day14' : 'day30'}`);
},
getServiceEstimated(params) {
return axios.get(`/apaas/service/v3/statistics/normal/service/estimated/${params.type == 0 ? 'all' : 'scoremap'}?last_id=${params.last_id}`);
},
}
export default dataAnalysis;
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