移植apilogs，新增备注字段
This commit is contained in:
hyt
parent
9e65c2808e
commit
a7e9dbce9f
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
|
|
@ -0,0 +1,242 @@
|
||||||
|
<!-- 柱状图，折线图 -->
|
||||||
|
<template>
|
||||||
|
<div style="width: 100%">
|
||||||
|
<span class="Breadcrumbs" v-if="Breadcrumbs">
|
||||||
|
<div v-for="(item, index) in breadcrumbsList" :key="index">
|
||||||
|
<span class="title">{{ item.title }}</span>
|
||||||
|
<span class="Separator" v-show="index + 1 != breadcrumbsList.length"
|
||||||
|
>/</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<div :style="proportion" ref="echarts" id="echarts"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
myEcharts: null,
|
||||||
|
option: {},
|
||||||
|
sidebarRetract: null,
|
||||||
|
breadcrumbsList: [
|
||||||
|
{
|
||||||
|
title: "首页",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "活动管理",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.myEcharts = echarts.init(this.$refs.echarts);
|
||||||
|
this.getEcharts();
|
||||||
|
window.addEventListener("resize", this.change);
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
"$store.getters.sidebarRetract": {
|
||||||
|
deep: true,
|
||||||
|
handler(val) {
|
||||||
|
this.change();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
DataCollection: {
|
||||||
|
deep: true,
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
this.getEcharts();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
props: {
|
||||||
|
// 面包屑的显示与隐藏
|
||||||
|
Breadcrumbs: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 尺寸
|
||||||
|
proportion: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
width: "700px",
|
||||||
|
height: "700px",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 标题
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
// 数据集合
|
||||||
|
DataCollection: {
|
||||||
|
type: Object,
|
||||||
|
require: true,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// // 列标题 ['蒸发量', '渲染']
|
||||||
|
// columnHeader: {
|
||||||
|
// type: Array,
|
||||||
|
// required: true,
|
||||||
|
// default: () => {
|
||||||
|
// return []
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// // 维度 ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||||
|
// Dimension: {
|
||||||
|
// type: Array,
|
||||||
|
// required: true,
|
||||||
|
// default: () => {
|
||||||
|
// return []
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// series: {
|
||||||
|
// type: Array,
|
||||||
|
// required: true,
|
||||||
|
// default: () => {
|
||||||
|
// return []
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
change() {
|
||||||
|
this.myEcharts.resize();
|
||||||
|
},
|
||||||
|
getEcharts() {
|
||||||
|
let _this = this;
|
||||||
|
const colors = [
|
||||||
|
"#224ef5",
|
||||||
|
"#e33722",
|
||||||
|
"#ffcc2c",
|
||||||
|
"#C1232B",
|
||||||
|
"#B5C334",
|
||||||
|
"#FCCE10",
|
||||||
|
"#E87C25",
|
||||||
|
"#27727B",
|
||||||
|
"#FE8463",
|
||||||
|
"#9BCA63",
|
||||||
|
"#FAD860",
|
||||||
|
"#F3A43B",
|
||||||
|
"#60C0DD",
|
||||||
|
"#D7504B",
|
||||||
|
"#C6E579",
|
||||||
|
"#F4E001",
|
||||||
|
"#F0805A",
|
||||||
|
"#26C0C0",
|
||||||
|
"#FAD860",
|
||||||
|
"#F3A43B",
|
||||||
|
"#60C0DD",
|
||||||
|
"#D7504B",
|
||||||
|
"#C6E579",
|
||||||
|
"#F4E001",
|
||||||
|
"#F0805A",
|
||||||
|
"#26C0C0",
|
||||||
|
];
|
||||||
|
this.option = {
|
||||||
|
color: colors,
|
||||||
|
title: {
|
||||||
|
text: "", //标题
|
||||||
|
subtext: "",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "2%",
|
||||||
|
right: "2%",
|
||||||
|
bottom: "10%",
|
||||||
|
top: "2%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: this.DataCollection.title,
|
||||||
|
align: "right",
|
||||||
|
right: 5,
|
||||||
|
textStyle: {
|
||||||
|
color: "#000",
|
||||||
|
},
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 35,
|
||||||
|
x: "center",
|
||||||
|
y: "bottom",
|
||||||
|
padding: [20, 0, 0, 0],
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: false,
|
||||||
|
feature: {
|
||||||
|
mark: { show: true }, //数据视图
|
||||||
|
dataView: { show: true, readOnly: false }, //折线视图
|
||||||
|
magicType: { show: true, type: ["line", "bar"] }, //柱状视图
|
||||||
|
restore: { show: true }, //刷新
|
||||||
|
saveAsImage: { show: true }, //保存为图片
|
||||||
|
},
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
axisLabel: { interval: 0, rotate: 60 },
|
||||||
|
data: this.DataCollection.parameter,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#000",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"lineStyle": {
|
||||||
|
"type": "dashed", // 设置为虚线
|
||||||
|
"color": "#ccc", // 设置分隔线颜色
|
||||||
|
"length": 10, // 虚线的长度
|
||||||
|
"interval": 5 // 虚线的间隔
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: this.DataCollection.series,
|
||||||
|
};
|
||||||
|
this.myEcharts.setOption(this.option);
|
||||||
|
this.myEcharts.on("click", function (params) {
|
||||||
|
_this.echartsClick(params);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
echartsClick(e) {
|
||||||
|
console.log("点击", e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.Breadcrumbs {
|
||||||
|
margin: 10px 0 10px 10px;
|
||||||
|
display: flex;
|
||||||
|
font-size: 13px;
|
||||||
|
.title {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.Separator {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 9px;
|
||||||
|
color: #c0c4cc;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,252 @@
|
||||||
|
<!-- 柱状图，折线图 -->
|
||||||
|
<template>
|
||||||
|
<div style="width: 100%">
|
||||||
|
<span class="Breadcrumbs" v-if="Breadcrumbs">
|
||||||
|
<div v-for="(item, index) in breadcrumbsList" :key="index">
|
||||||
|
<span class="title">{{ item.title }}</span>
|
||||||
|
<span class="Separator" v-show="index + 1 != breadcrumbsList.length"
|
||||||
|
>/</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<div :style="proportion" ref="echarts" id="echarts"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
myEcharts: null,
|
||||||
|
option: {},
|
||||||
|
sidebarRetract: null,
|
||||||
|
breadcrumbsList: [
|
||||||
|
{
|
||||||
|
title: "首页",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "活动管理",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.myEcharts = echarts.init(this.$refs.echarts);
|
||||||
|
this.getEcharts();
|
||||||
|
window.addEventListener("resize", this.change);
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
"$store.getters.sidebarRetract": {
|
||||||
|
deep: true,
|
||||||
|
handler(val) {
|
||||||
|
this.change();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
DataCollection: {
|
||||||
|
deep: true,
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
this.getEcharts();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
props: {
|
||||||
|
// 面包屑的显示与隐藏
|
||||||
|
Breadcrumbs: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 尺寸
|
||||||
|
proportion: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
width: "700px",
|
||||||
|
height: "700px",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 标题
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
// 数据集合
|
||||||
|
DataCollection: {
|
||||||
|
type: Object,
|
||||||
|
require: true,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// // 列标题 ['蒸发量', '渲染']
|
||||||
|
// columnHeader: {
|
||||||
|
// type: Array,
|
||||||
|
// required: true,
|
||||||
|
// default: () => {
|
||||||
|
// return []
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// // 维度 ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||||
|
// Dimension: {
|
||||||
|
// type: Array,
|
||||||
|
// required: true,
|
||||||
|
// default: () => {
|
||||||
|
// return []
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// series: {
|
||||||
|
// type: Array,
|
||||||
|
// required: true,
|
||||||
|
// default: () => {
|
||||||
|
// return []
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
change() {
|
||||||
|
this.myEcharts.resize();
|
||||||
|
},
|
||||||
|
getEcharts() {
|
||||||
|
let _this = this;
|
||||||
|
const colors = [
|
||||||
|
"#224ef5",
|
||||||
|
"#e33722",
|
||||||
|
"#ffcc2c",
|
||||||
|
"#C1232B",
|
||||||
|
"#B5C334",
|
||||||
|
"#FCCE10",
|
||||||
|
"#E87C25",
|
||||||
|
"#27727B",
|
||||||
|
"#FE8463",
|
||||||
|
"#9BCA63",
|
||||||
|
"#FAD860",
|
||||||
|
"#F3A43B",
|
||||||
|
"#60C0DD",
|
||||||
|
"#D7504B",
|
||||||
|
"#C6E579",
|
||||||
|
"#F4E001",
|
||||||
|
"#F0805A",
|
||||||
|
"#26C0C0",
|
||||||
|
"#FAD860",
|
||||||
|
"#F3A43B",
|
||||||
|
"#60C0DD",
|
||||||
|
"#D7504B",
|
||||||
|
"#C6E579",
|
||||||
|
"#F4E001",
|
||||||
|
"#F0805A",
|
||||||
|
"#26C0C0",
|
||||||
|
];
|
||||||
|
this.option = {
|
||||||
|
color: colors,
|
||||||
|
title: {
|
||||||
|
text: "", //标题
|
||||||
|
subtext: "",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "2%",
|
||||||
|
right: "2%",
|
||||||
|
bottom: "10%",
|
||||||
|
top: "2%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: this.DataCollection.title,
|
||||||
|
align: "right",
|
||||||
|
right: 5,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 35,
|
||||||
|
x: "center",
|
||||||
|
y: "bottom",
|
||||||
|
padding: [20, 0, 0, 0],
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: false,
|
||||||
|
feature: {
|
||||||
|
mark: { show: true }, //数据视图
|
||||||
|
dataView: { show: true, readOnly: false }, //折线视图
|
||||||
|
magicType: { show: true, type: ["line", "bar"] }, //柱状视图
|
||||||
|
restore: { show: true }, //刷新
|
||||||
|
saveAsImage: { show: true }, //保存为图片
|
||||||
|
},
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
axisLabel: { interval: 0, rotate: 60,color:'#01E5EB' },
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#01E5EB",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.DataCollection.parameter,
|
||||||
|
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#01E5EB",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel:{
|
||||||
|
color:'#01E5EB'
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"lineStyle": {
|
||||||
|
"type": "dashed", // 设置为虚线
|
||||||
|
"color": "#5679ac", // 设置分隔线颜色
|
||||||
|
"length": 10, // 虚线的长度
|
||||||
|
"interval": 5 // 虚线的间隔
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: this.DataCollection.series,
|
||||||
|
};
|
||||||
|
this.myEcharts.setOption(this.option);
|
||||||
|
this.myEcharts.on("click", function (params) {
|
||||||
|
_this.echartsClick(params);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
echartsClick(e) {
|
||||||
|
console.log("点击", e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.Breadcrumbs {
|
||||||
|
margin: 10px 0 10px 10px;
|
||||||
|
display: flex;
|
||||||
|
font-size: 13px;
|
||||||
|
.title {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.Separator {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 9px;
|
||||||
|
color: #c0c4cc;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -38,7 +38,11 @@ import nodeWrap from '@/components/nodeWrap'
|
||||||
import { delTreeChildren } from '@/utils/util'
|
import { delTreeChildren } from '@/utils/util'
|
||||||
Vue.use(nodeWrap)
|
Vue.use(nodeWrap)
|
||||||
Vue.component('NodeWrap', nodeWrap) // 初始化组件
|
Vue.component('NodeWrap', nodeWrap) // 初始化组件
|
||||||
|
// 柱状图、折线图组件
|
||||||
|
import BarChart from "@/components/Echarts/BarChart";
|
||||||
|
import BarChartBlack from "@/components/Echarts/BarChartBlack.vue";
|
||||||
|
Vue.component("BarChart", BarChart);
|
||||||
|
Vue.component("BarChartBlack", BarChartBlack);
|
||||||
import followWorkShow from '@/components/nodeWrapShow'
|
import followWorkShow from '@/components/nodeWrapShow'
|
||||||
Vue.use(followWorkShow)
|
Vue.use(followWorkShow)
|
||||||
Vue.component('FollowWorkShow', followWorkShow) // 初始化组件
|
Vue.component('FollowWorkShow', followWorkShow) // 初始化组件
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,11 @@ const tableColumnData = [
|
||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
tooltip: true,
|
tooltip: true,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: '备注',
|
||||||
|
prop: 'remark',
|
||||||
|
tooltip: true,
|
||||||
|
},
|
||||||
]
|
]
|
||||||
const tableVersionColumn = [
|
const tableVersionColumn = [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -115,8 +115,6 @@ export default {
|
||||||
prop: "status",
|
prop: "status",
|
||||||
tag: "elSelect",
|
tag: "elSelect",
|
||||||
options: [
|
options: [
|
||||||
{id: "1", label: "待发送"},
|
|
||||||
{id: "2", label: "发送中"},
|
|
||||||
{id: "3", label: "发送成功"},
|
{id: "3", label: "发送成功"},
|
||||||
{id: "4", label: "发送失败"},
|
{id: "4", label: "发送失败"},
|
||||||
],
|
],
|
||||||
|
|
@ -292,6 +290,11 @@ export default {
|
||||||
this.$vmNews("请选择接受者api")
|
this.$vmNews("请选择接受者api")
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
if (!data.status) {
|
||||||
|
this.$vmNews("请选择状态")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
this.resetTable();
|
this.resetTable();
|
||||||
},
|
},
|
||||||
async initSelect() {
|
async initSelect() {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<!-- 右上功能按钮-->
|
|
||||||
<div class="nextbtn">
|
<div class="nextbtn">
|
||||||
<el-button
|
<el-button
|
||||||
:disabled="active == 0"
|
:disabled="active == 0"
|
||||||
|
|
@ -29,7 +28,6 @@
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 步骤条-->
|
|
||||||
<div class="step">
|
<div class="step">
|
||||||
<el-steps :active="active" finish-status="success" simple>
|
<el-steps :active="active" finish-status="success" simple>
|
||||||
<el-step title="设置API基本信息"></el-step>
|
<el-step title="设置API基本信息"></el-step>
|
||||||
|
|
@ -37,14 +35,12 @@
|
||||||
<el-step title="添加参数映射关系"></el-step>
|
<el-step title="添加参数映射关系"></el-step>
|
||||||
</el-steps>
|
</el-steps>
|
||||||
</div>
|
</div>
|
||||||
<!-- 第一步和第二步界面-->
|
|
||||||
<div class="formdata" v-if="active === 0 || active === 1">
|
<div class="formdata" v-if="active === 0 || active === 1">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<h1>API基本信息</h1>
|
<h1>API基本信息</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- <router-view></router-view> -->
|
<!-- <router-view></router-view> -->
|
||||||
<!-- 第一步界面-->
|
|
||||||
<template v-if="active === 0">
|
<template v-if="active === 0">
|
||||||
<div>
|
<div>
|
||||||
<baseNewForm
|
<baseNewForm
|
||||||
|
|
@ -60,7 +56,6 @@
|
||||||
</baseNewForm>
|
</baseNewForm>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<!-- 第二步界面-->
|
|
||||||
<template v-if="active === 1">
|
<template v-if="active === 1">
|
||||||
<div>
|
<div>
|
||||||
<baseNewForm
|
<baseNewForm
|
||||||
|
|
@ -71,13 +66,11 @@
|
||||||
:ruleForm="stepOneForm"
|
:ruleForm="stepOneForm"
|
||||||
:isFunBtn="false"
|
:isFunBtn="false"
|
||||||
@onSubmit="onSubmitHandle"
|
@onSubmit="onSubmitHandle"
|
||||||
@onChangeRadio="stepOneChangeRadio"
|
|
||||||
></baseNewForm>
|
></baseNewForm>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 第三部界面-->
|
|
||||||
<div class="step3" v-if="active === 2">
|
<div class="step3" v-if="active === 2">
|
||||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||||
<el-menu-item index="1">Headers入参</el-menu-item>
|
<el-menu-item index="1">Headers入参</el-menu-item>
|
||||||
|
|
@ -85,6 +78,7 @@
|
||||||
<el-menu-item index="3">Body入参</el-menu-item>
|
<el-menu-item index="3">Body入参</el-menu-item>
|
||||||
<el-menu-item index="4">Body出参</el-menu-item>
|
<el-menu-item index="4">Body出参</el-menu-item>
|
||||||
<el-menu-item index="5">调试</el-menu-item>
|
<el-menu-item index="5">调试</el-menu-item>
|
||||||
|
<el-menu-item index="6">返回值</el-menu-item>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
<template v-if="activeIndex === '1'">
|
<template v-if="activeIndex === '1'">
|
||||||
<div class="tableBox">
|
<div class="tableBox">
|
||||||
|
|
@ -102,7 +96,7 @@
|
||||||
<baseTableForm
|
<baseTableForm
|
||||||
:showIndex="false"
|
:showIndex="false"
|
||||||
:indexOperate="false"
|
:indexOperate="false"
|
||||||
:funWidth="80"
|
:funWidth="150"
|
||||||
:funData="[{text:'删除',type:'dele',color:'#e47470'}]"
|
:funData="[{text:'删除',type:'dele',color:'#e47470'}]"
|
||||||
:tableInfo="headersTableInfo"
|
:tableInfo="headersTableInfo"
|
||||||
@onFunc="tableButtonHandle"
|
@onFunc="tableButtonHandle"
|
||||||
|
|
@ -195,7 +189,7 @@
|
||||||
<baseTableForm
|
<baseTableForm
|
||||||
:showIndex="false"
|
:showIndex="false"
|
||||||
:indexOperate="false"
|
:indexOperate="false"
|
||||||
:funWidth="100"
|
:funWidth="150"
|
||||||
:funData="[{text:'删除',type:'dele',color:'#e47470'}]"
|
:funData="[{text:'删除',type:'dele',color:'#e47470'}]"
|
||||||
:tableInfo="queryTableInfo"
|
:tableInfo="queryTableInfo"
|
||||||
@newRow="queryTableAddHandle"
|
@newRow="queryTableAddHandle"
|
||||||
|
|
@ -470,6 +464,20 @@
|
||||||
:stepOneForm="stepOneForm" :headersTableInfo="headersTableInfo.tableData"
|
:stepOneForm="stepOneForm" :headersTableInfo="headersTableInfo.tableData"
|
||||||
></apiDebugging>
|
></apiDebugging>
|
||||||
</template>
|
</template>
|
||||||
|
<template v-if="activeIndex === '6'">
|
||||||
|
<div style="margin-top: 30px">
|
||||||
|
<baseNewForm
|
||||||
|
refName="returnedFormName"
|
||||||
|
ref="returnedFormName"
|
||||||
|
:spanNumber="24"
|
||||||
|
:formRow="returnedFormRow"
|
||||||
|
:ruleForm="returnedForm"
|
||||||
|
:isFunBtn="false"
|
||||||
|
>
|
||||||
|
</baseNewForm>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -677,152 +685,6 @@ export default {
|
||||||
message: 'TPS'
|
message: 'TPS'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'radio',
|
|
||||||
title: '是否扩展API',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'extensionApi',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '是',
|
|
||||||
id: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '否',
|
|
||||||
id: '2'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
],//步骤2表
|
|
||||||
stepOneformRowCopy: [
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
title: '目标地址',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'destinationAddress',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
title: '请求编码',
|
|
||||||
id: 'requestCoding',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
title: '请求方法',
|
|
||||||
id: 'requestMethod',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'num',
|
|
||||||
title: '超出时间',
|
|
||||||
id: 'timeoutPeriod',
|
|
||||||
row: 24,
|
|
||||||
min: 1,
|
|
||||||
max: 600000,
|
|
||||||
maxlength: 50,
|
|
||||||
required: true,
|
|
||||||
message: 'ms'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'num',
|
|
||||||
title: '限流',
|
|
||||||
maxlength: 50,
|
|
||||||
id: 'currentLimiting',
|
|
||||||
min: 1,
|
|
||||||
row: 24,
|
|
||||||
max: 1000,
|
|
||||||
required: true,
|
|
||||||
message: 'TPS'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'radio',
|
|
||||||
title: '是否扩展API',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'extensionApi',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '是',
|
|
||||||
id: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '否',
|
|
||||||
id: '2'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
title: '内部bean名称',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'beanName',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
title: '方法名称',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'funName',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
],//步骤2表
|
],//步骤2表
|
||||||
stepOneForm: {
|
stepOneForm: {
|
||||||
|
|
@ -898,7 +760,7 @@ export default {
|
||||||
type: 'input',
|
type: 'input',
|
||||||
title: '描述',
|
title: '描述',
|
||||||
id: 'description',
|
id: 'description',
|
||||||
maxlength: 300
|
maxlength: 50
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'number',
|
type: 'number',
|
||||||
|
|
@ -955,8 +817,7 @@ export default {
|
||||||
{
|
{
|
||||||
type: 'input',
|
type: 'input',
|
||||||
title: '描述',
|
title: '描述',
|
||||||
id: 'description',
|
id: 'description'
|
||||||
maxlength: 300
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'number',
|
type: 'number',
|
||||||
|
|
@ -1006,8 +867,7 @@ export default {
|
||||||
{
|
{
|
||||||
type: 'input',
|
type: 'input',
|
||||||
title: '描述',
|
title: '描述',
|
||||||
id: 'description',
|
id: 'description'
|
||||||
maxlength: 300
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'number',
|
type: 'number',
|
||||||
|
|
@ -1057,8 +917,7 @@ export default {
|
||||||
{
|
{
|
||||||
type: 'input',
|
type: 'input',
|
||||||
title: '描述',
|
title: '描述',
|
||||||
id: 'description',
|
id: 'description'
|
||||||
maxlength: 300
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'number',
|
type: 'number',
|
||||||
|
|
@ -1219,235 +1078,49 @@ export default {
|
||||||
id: 'complexlist'
|
id: 'complexlist'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
bodyImport: false//导入JSON是否为body
|
bodyImport: false,//导入JSON是否为body
|
||||||
|
returnedForm: {},//返回值
|
||||||
|
returnedFormRow: [
|
||||||
|
{
|
||||||
|
elCol: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
title: '返回成功字段',
|
||||||
|
maxlength: 200,
|
||||||
|
id: 'returnSuccessField',
|
||||||
|
row: 24,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elCol: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
title: '返回成功值',
|
||||||
|
maxlength: 200,
|
||||||
|
id: 'returnSuccessValue',
|
||||||
|
row: 24,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elCol: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
title: '返回描述字段',
|
||||||
|
maxlength: 200,
|
||||||
|
id: 'returnMsg',
|
||||||
|
row: 24,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]//
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//当步骤二中的是否拓展api改变时如果为1则内部名称和方法名称需必填
|
|
||||||
stepOneChangeRadio(val, index, indexRow, row) {
|
|
||||||
console.log(row)
|
|
||||||
if (row.id === 'extensionApi') {
|
|
||||||
if (val == 1) {
|
|
||||||
this.stepOneformRow = [
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
title: '目标地址',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'destinationAddress',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
title: '请求编码',
|
|
||||||
id: 'requestCoding',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
title: '请求方法',
|
|
||||||
id: 'requestMethod',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'num',
|
|
||||||
title: '超出时间',
|
|
||||||
id: 'timeoutPeriod',
|
|
||||||
row: 24,
|
|
||||||
min: 1,
|
|
||||||
max: 600000,
|
|
||||||
maxlength: 50,
|
|
||||||
required: true,
|
|
||||||
message: 'ms'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'num',
|
|
||||||
title: '限流',
|
|
||||||
maxlength: 50,
|
|
||||||
id: 'currentLimiting',
|
|
||||||
min: 1,
|
|
||||||
row: 24,
|
|
||||||
max: 1000,
|
|
||||||
required: true,
|
|
||||||
message: 'TPS'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'radio',
|
|
||||||
title: '是否扩展API',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'extensionApi',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '是',
|
|
||||||
id: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '否',
|
|
||||||
id: '2'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
title: '内部bean名称',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'beanName',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
title: '方法名称',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'funName',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
} else {
|
|
||||||
this.stepOneformRow = [
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
title: '目标地址',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'destinationAddress',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
title: '请求编码',
|
|
||||||
id: 'requestCoding',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
title: '请求方法',
|
|
||||||
id: 'requestMethod',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'num',
|
|
||||||
title: '超出时间',
|
|
||||||
id: 'timeoutPeriod',
|
|
||||||
row: 24,
|
|
||||||
min: 1,
|
|
||||||
max: 600000,
|
|
||||||
maxlength: 50,
|
|
||||||
required: true,
|
|
||||||
message: 'ms'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'num',
|
|
||||||
title: '限流',
|
|
||||||
maxlength: 50,
|
|
||||||
id: 'currentLimiting',
|
|
||||||
min: 1,
|
|
||||||
row: 24,
|
|
||||||
max: 1000,
|
|
||||||
required: true,
|
|
||||||
message: 'TPS'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'radio',
|
|
||||||
title: '是否扩展API',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'extensionApi',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '是',
|
|
||||||
id: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '否',
|
|
||||||
id: '2'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 选项卡点击事件
|
// 选项卡点击事件
|
||||||
handleSelect(key, keyPath) {
|
handleSelect(key, keyPath) {
|
||||||
this.activeIndex = key
|
this.activeIndex = key
|
||||||
|
|
@ -1462,7 +1135,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//JSON组件相关显示方法
|
|
||||||
jsonImportSwitch(data, flag, body = false) {
|
jsonImportSwitch(data, flag, body = false) {
|
||||||
this.importFlag = flag
|
this.importFlag = flag
|
||||||
this.importData = data
|
this.importData = data
|
||||||
|
|
@ -1651,233 +1323,11 @@ export default {
|
||||||
obj1['requestMethod'] = res.attribute.requestMethod
|
obj1['requestMethod'] = res.attribute.requestMethod
|
||||||
obj1['timeoutPeriod'] = res.attribute.timeoutPeriod
|
obj1['timeoutPeriod'] = res.attribute.timeoutPeriod
|
||||||
obj1['currentLimiting'] = res.attribute.currentLimiting
|
obj1['currentLimiting'] = res.attribute.currentLimiting
|
||||||
obj1['beanName'] = res.attribute.beanName
|
|
||||||
obj1['funName'] = res.attribute.funName
|
|
||||||
obj1['extensionApi'] = res.attribute.extensionApi
|
|
||||||
this.stepZeroForm = obj0
|
this.stepZeroForm = obj0
|
||||||
this.stepOneForm = obj1
|
this.stepOneForm = obj1
|
||||||
//这里和stepOneChangeRadio方法一个道理 需要判断是否必填
|
this.$set(this.returnedForm, 'returnSuccessField', res.attribute.returnSuccessField)
|
||||||
if (this.stepOneForm.extensionApi == 1) {
|
this.$set(this.returnedForm, 'returnSuccessValue', res.attribute.returnSuccessValue)
|
||||||
this.stepOneformRow = [
|
this.$set(this.returnedForm, 'returnMsg', res.attribute.returnMsg)
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
title: '目标地址',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'destinationAddress',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
title: '请求编码',
|
|
||||||
id: 'requestCoding',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
title: '请求方法',
|
|
||||||
id: 'requestMethod',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'num',
|
|
||||||
title: '超出时间',
|
|
||||||
id: 'timeoutPeriod',
|
|
||||||
row: 24,
|
|
||||||
min: 1,
|
|
||||||
max: 600000,
|
|
||||||
maxlength: 50,
|
|
||||||
required: true,
|
|
||||||
message: 'ms'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'num',
|
|
||||||
title: '限流',
|
|
||||||
maxlength: 50,
|
|
||||||
id: 'currentLimiting',
|
|
||||||
min: 1,
|
|
||||||
row: 24,
|
|
||||||
max: 1000,
|
|
||||||
required: true,
|
|
||||||
message: 'TPS'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'radio',
|
|
||||||
title: '是否扩展API',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'extensionApi',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '是',
|
|
||||||
id: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '否',
|
|
||||||
id: '2'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
title: '内部bean名称',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'beanName',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
title: '方法名称',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'funName',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
} else {
|
|
||||||
this.stepOneformRow = [
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
title: '目标地址',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'destinationAddress',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
title: '请求编码',
|
|
||||||
id: 'requestCoding',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
title: '请求方法',
|
|
||||||
id: 'requestMethod',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'num',
|
|
||||||
title: '超出时间',
|
|
||||||
id: 'timeoutPeriod',
|
|
||||||
row: 24,
|
|
||||||
min: 1,
|
|
||||||
max: 600000,
|
|
||||||
maxlength: 50,
|
|
||||||
required: true,
|
|
||||||
message: 'ms'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'num',
|
|
||||||
title: '限流',
|
|
||||||
maxlength: 50,
|
|
||||||
id: 'currentLimiting',
|
|
||||||
min: 1,
|
|
||||||
row: 24,
|
|
||||||
max: 1000,
|
|
||||||
required: true,
|
|
||||||
message: 'TPS'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
elCol: [
|
|
||||||
{
|
|
||||||
type: 'radio',
|
|
||||||
title: '是否扩展API',
|
|
||||||
maxlength: 200,
|
|
||||||
id: 'extensionApi',
|
|
||||||
pattern: '',
|
|
||||||
message: 'URL或协议不合法',
|
|
||||||
row: 24,
|
|
||||||
required: true,
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '是',
|
|
||||||
id: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '否',
|
|
||||||
id: '2'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
// this.stepOneformRow[6].elCol[0].required = this.stepOneForm.extensionApi == 1
|
|
||||||
// this.stepOneformRow[7].elCol[0].required = this.stepOneForm.extensionApi == 1
|
|
||||||
if (JSON.parse(res.attribute.queryIn) instanceof Array) {
|
if (JSON.parse(res.attribute.queryIn) instanceof Array) {
|
||||||
this.queryTableInfo.tableData = JSON.parse(res.attribute.queryIn)
|
this.queryTableInfo.tableData = JSON.parse(res.attribute.queryIn)
|
||||||
}
|
}
|
||||||
|
|
@ -1937,12 +1387,28 @@ export default {
|
||||||
// 点击提交数据处理
|
// 点击提交数据处理
|
||||||
async commit() {
|
async commit() {
|
||||||
// this.commitLoading = true;
|
// this.commitLoading = true;
|
||||||
|
if (!this.returnedForm.returnSuccessField) {
|
||||||
|
this.$vmNews('请输入返回成功字段')
|
||||||
|
this.activeIndex = '6'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!this.returnedForm.returnSuccessValue) {
|
||||||
|
this.$vmNews('请输入返回成功值')
|
||||||
|
this.activeIndex = 6
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!this.returnedForm.returnMsg) {
|
||||||
|
this.$vmNews('请输入返回成功值')
|
||||||
|
this.activeIndex = 6
|
||||||
|
return
|
||||||
|
}
|
||||||
let obj = {
|
let obj = {
|
||||||
apiStatus: 1,
|
apiStatus: 1,
|
||||||
appId: this.$route.query.id,
|
appId: this.$route.query.id,
|
||||||
catalogueId: this.$route.query.catalogueId,
|
catalogueId: this.$route.query.catalogueId,
|
||||||
...this.stepZeroForm,
|
...this.stepZeroForm,
|
||||||
...this.stepOneForm
|
...this.stepOneForm,
|
||||||
|
...this.returnedForm
|
||||||
}
|
}
|
||||||
console.log(this.$route.query, 'query')
|
console.log(this.$route.query, 'query')
|
||||||
obj[this.queryTableInfo.id] = this.queryTableInfo.tableData
|
obj[this.queryTableInfo.id] = this.queryTableInfo.tableData
|
||||||
|
|
@ -2074,7 +1540,6 @@ export default {
|
||||||
},
|
},
|
||||||
// 点击下一步
|
// 点击下一步
|
||||||
onSubmitHandle(form) {
|
onSubmitHandle(form) {
|
||||||
console.log(this.active, 'active')
|
|
||||||
if (this.active == 0) {
|
if (this.active == 0) {
|
||||||
if (this.stepZeroForm.needLogin == 1) {
|
if (this.stepZeroForm.needLogin == 1) {
|
||||||
// 如果需要认证点击下一步
|
// 如果需要认证点击下一步
|
||||||
|
|
@ -2239,13 +1704,12 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
funWidth() {
|
funWidth() {
|
||||||
return this.funData.length * 80
|
return this.funData.length * 90
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initRequestCoding()
|
this.initRequestCoding()
|
||||||
this.initRequestMethod()
|
this.initRequestMethod()
|
||||||
//判断是否未编辑
|
|
||||||
if (!this.$route.query.add) {
|
if (!this.$route.query.add) {
|
||||||
this.getEditInfo()
|
this.getEditInfo()
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -2253,7 +1717,6 @@ export default {
|
||||||
this.$set(this.stepZeroForm, 'appName', this.$route.query.name)
|
this.$set(this.stepZeroForm, 'appName', this.$route.query.name)
|
||||||
this.$set(this.stepZeroForm, 'catalogueId', this.$route.query.catalogueId)
|
this.$set(this.stepZeroForm, 'catalogueId', this.$route.query.catalogueId)
|
||||||
this.$set(this.stepZeroForm, 'catalogueName', this.$route.query.catalogueName)
|
this.$set(this.stepZeroForm, 'catalogueName', this.$route.query.catalogueName)
|
||||||
this.$set(this.stepOneForm, 'extensionApi', '2')
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -239,6 +239,7 @@
|
||||||
v-model="logDialog"
|
v-model="logDialog"
|
||||||
@confirm="logConfirm"
|
@confirm="logConfirm"
|
||||||
:width="'80%'"
|
:width="'80%'"
|
||||||
|
:footerShow="false"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<logTableChunk v-if="logDialog" :receiveApi="receiveApi"></logTableChunk>
|
<logTableChunk v-if="logDialog" :receiveApi="receiveApi"></logTableChunk>
|
||||||
|
|
@ -686,7 +687,8 @@ export default {
|
||||||
}
|
}
|
||||||
// 将表格数据转json
|
// 将表格数据转json
|
||||||
let bodyIn = JSON.parse(res.attribute.api.bodyIn)
|
let bodyIn = JSON.parse(res.attribute.api.bodyIn)
|
||||||
let bodyFlag = bodyIn[0].parameterType !== "complex"
|
console.log(bodyIn, 'bodyIn')
|
||||||
|
let bodyFlag = bodyIn[0] && bodyIn[0].parameterType !== "complex"
|
||||||
let queryObj = {};
|
let queryObj = {};
|
||||||
let headerObj = {};
|
let headerObj = {};
|
||||||
let bodyObj
|
let bodyObj
|
||||||
|
|
@ -704,6 +706,7 @@ export default {
|
||||||
bodyObj[item.interfaceKey] = item.interfaceValue === null ? "" : item.interfaceValue;
|
bodyObj[item.interfaceKey] = item.interfaceValue === null ? "" : item.interfaceValue;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
console.log(1,res.attribute.api)
|
||||||
// 如果存在认证接口
|
// 如果存在认证接口
|
||||||
if (res.attribute.api.needLogin == 1) {
|
if (res.attribute.api.needLogin == 1) {
|
||||||
this.getDebugInfoHandle(
|
this.getDebugInfoHandle(
|
||||||
|
|
@ -731,7 +734,7 @@ export default {
|
||||||
this.$set(json, "query", {});
|
this.$set(json, "query", {});
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
JSON.parse(res.attribute.api.bodyIn)
|
JSON.parse(res.attribute.api.bodyIn).length
|
||||||
) {
|
) {
|
||||||
if (!bodyFlag) {
|
if (!bodyFlag) {
|
||||||
this.DebugDataHandle(bodyObj, bodyIn[0].children)
|
this.DebugDataHandle(bodyObj, bodyIn[0].children)
|
||||||
|
|
@ -986,7 +989,7 @@ export default {
|
||||||
computed: {
|
computed: {
|
||||||
// 操作框的宽度
|
// 操作框的宽度
|
||||||
funWidth() {
|
funWidth() {
|
||||||
return this.mainFunData.length * 70;
|
return this.mainFunData.length * 90;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
|
||||||
|
|
@ -250,6 +250,7 @@ export default {
|
||||||
},
|
},
|
||||||
authDataHandle(obj, arr) {
|
authDataHandle(obj, arr) {
|
||||||
arr.forEach((item) => {
|
arr.forEach((item) => {
|
||||||
|
console.log(item, 'item')
|
||||||
if (item.parameterType === "authport") {
|
if (item.parameterType === "authport") {
|
||||||
obj[item.parameterName] = this.authDataReturn(item.example);
|
obj[item.parameterName] = this.authDataReturn(item.example);
|
||||||
}
|
}
|
||||||
|
|
@ -297,12 +298,16 @@ export default {
|
||||||
//初始化
|
//初始化
|
||||||
async init() {
|
async init() {
|
||||||
//拼接url
|
//拼接url
|
||||||
|
console.log(1)
|
||||||
this.getApiModuleApiHanlde(0, false, this.stepOneForm.destinationAddress)
|
this.getApiModuleApiHanlde(0, false, this.stepOneForm.destinationAddress)
|
||||||
|
console.log(222)
|
||||||
if (this.stepZeroForm.needLogin === '1') {
|
if (this.stepZeroForm.needLogin === '1') {
|
||||||
this.getApiModuleApiHanlde(this.stepZeroForm.authenticationPort, true)
|
this.getApiModuleApiHanlde(this.stepZeroForm.authenticationPort, true)
|
||||||
|
console.log(333)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async getApiModuleApiHanlde(id, flag, address = {}) {
|
async getApiModuleApiHanlde(id, flag, address = {}) {
|
||||||
|
console.log(11123)
|
||||||
const res = await getApiModuleApi(
|
const res = await getApiModuleApi(
|
||||||
{
|
{
|
||||||
tl: "sysApplicationService",
|
tl: "sysApplicationService",
|
||||||
|
|
@ -311,12 +316,15 @@ export default {
|
||||||
},
|
},
|
||||||
{id: id, appId: this.$route.query.id}
|
{id: id, appId: this.$route.query.id}
|
||||||
);
|
);
|
||||||
|
console.log(77)
|
||||||
let tempUrl = res.attribute.app.interfaceAddress ? res.attribute.app.interfaceAddress : ""
|
let tempUrl = res.attribute.app.interfaceAddress ? res.attribute.app.interfaceAddress : ""
|
||||||
if (flag) {
|
if (flag) {
|
||||||
|
console.log(tempUrl, 'tempUrl')
|
||||||
this.authMethod = res.attribute.api.requestMethod == 1 ? 'post' : 'get';
|
this.authMethod = res.attribute.api.requestMethod == 1 ? 'post' : 'get';
|
||||||
this.authInterfaceAddress = tempUrl + res.attribute.api.destinationAddress;
|
this.authInterfaceAddress = tempUrl + res.attribute.api.destinationAddress;
|
||||||
let bodyIn = JSON.parse(res.attribute.api.bodyIn)
|
let bodyIn = JSON.parse(res.attribute.api.bodyIn)
|
||||||
let bodyFlag = bodyIn[0].parameterType !== "complex"
|
console.log(bodyIn, '1')
|
||||||
|
let bodyFlag = bodyIn[0] && bodyIn[0].parameterType !== "complex"
|
||||||
let headerObj = {}
|
let headerObj = {}
|
||||||
let bodyObj
|
let bodyObj
|
||||||
let queryObj = {}
|
let queryObj = {}
|
||||||
|
|
@ -343,7 +351,8 @@ export default {
|
||||||
this.$set(this.authInfo, 'query', deepClone(queryObj))
|
this.$set(this.authInfo, 'query', deepClone(queryObj))
|
||||||
this.$set(this.authInfo, 'body', deepClone(bodyObj))
|
this.$set(this.authInfo, 'body', deepClone(bodyObj))
|
||||||
} else {
|
} else {
|
||||||
let bodyFlag = this.bodyEntTableInfo[0].parameterType !== "complex"
|
console.log(88, this.bodyEntTableInfo)
|
||||||
|
let bodyFlag = this.bodyEntTableInfo.length && this.bodyEntTableInfo[0].parameterType !== "complex"
|
||||||
let headerObj = {}
|
let headerObj = {}
|
||||||
let bodyObj
|
let bodyObj
|
||||||
let queryObj = {}
|
let queryObj = {}
|
||||||
|
|
@ -362,19 +371,26 @@ export default {
|
||||||
this.interfaceAddress = tempUrl + address;
|
this.interfaceAddress = tempUrl + address;
|
||||||
this.headerDisposeHandle(headerObj, this.headersTableInfo)
|
this.headerDisposeHandle(headerObj, this.headersTableInfo)
|
||||||
this.queryDisposeHandle(queryObj, this.queryTableInfo)
|
this.queryDisposeHandle(queryObj, this.queryTableInfo)
|
||||||
|
if (this.bodyEntTableInfo.length) {
|
||||||
if (!bodyFlag) {
|
if (!bodyFlag) {
|
||||||
this.bodyDisposeHandle(bodyObj, this.bodyEntTableInfo[0].children)
|
this.bodyDisposeHandle(bodyObj, this.bodyEntTableInfo[0].children)
|
||||||
} else {
|
} else {
|
||||||
this.bodyDisposeHandle(bodyObj[0], this.bodyEntTableInfo[0].children)
|
this.bodyDisposeHandle(bodyObj[0], this.bodyEntTableInfo[0].children)
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
bodyObj = {}
|
||||||
|
}
|
||||||
|
|
||||||
this.$set(this.resultInfo, 'headers', deepClone(headerObj))
|
this.$set(this.resultInfo, 'headers', deepClone(headerObj))
|
||||||
this.$set(this.resultInfo, 'query', deepClone(queryObj))
|
this.$set(this.resultInfo, 'query', deepClone(queryObj))
|
||||||
this.$set(this.resultInfo, 'body', deepClone(bodyObj))
|
this.$set(this.resultInfo, 'body', deepClone(bodyObj))
|
||||||
|
console.log(33)
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
headerDisposeHandle(header, arr) {
|
headerDisposeHandle(header, arr) {
|
||||||
arr.forEach(item => {
|
arr.forEach(item => {
|
||||||
|
console.log(item, 'item3')
|
||||||
if (item.parameterType === "authport") {
|
if (item.parameterType === "authport") {
|
||||||
header[item.parameterName] = "";
|
header[item.parameterName] = "";
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -441,6 +457,8 @@ export default {
|
||||||
// });
|
// });
|
||||||
// },
|
// },
|
||||||
jsonParseHandle(parameterType, example, concreteType = false) {
|
jsonParseHandle(parameterType, example, concreteType = false) {
|
||||||
|
|
||||||
|
console.log(parameterType, 'parameterType1')
|
||||||
let parameterTypeDist = {
|
let parameterTypeDist = {
|
||||||
authport: "",
|
authport: "",
|
||||||
fundamentallist: [example],
|
fundamentallist: [example],
|
||||||
|
|
@ -458,6 +476,7 @@ export default {
|
||||||
},
|
},
|
||||||
bodyDisposeHandle(obj, arr) {
|
bodyDisposeHandle(obj, arr) {
|
||||||
arr.forEach((item) => {
|
arr.forEach((item) => {
|
||||||
|
console.log(item, 'item2')
|
||||||
const {parameterName, concreteType, parameterType, example, children} = item;
|
const {parameterName, concreteType, parameterType, example, children} = item;
|
||||||
if (parameterName && concreteType) {
|
if (parameterName && concreteType) {
|
||||||
if (!["Object", "ObjectCom", "Map"].includes(concreteType)) {
|
if (!["Object", "ObjectCom", "Map"].includes(concreteType)) {
|
||||||
|
|
|
||||||
|
|
@ -7,63 +7,70 @@ const tableColumnData = [
|
||||||
{
|
{
|
||||||
label: '发送者应用',
|
label: '发送者应用',
|
||||||
prop: 'sendAppName',
|
prop: 'sendAppName',
|
||||||
tooltip: true,
|
tooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '源数据',
|
label: '源数据',
|
||||||
prop: 'sourceData',
|
prop: 'sourceData',
|
||||||
tooltip: true,
|
tooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '目标数据',
|
label: '目标数据',
|
||||||
prop: 'targetData',
|
prop: 'targetData',
|
||||||
tooltip: true,
|
tooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '状态',
|
label: '状态',
|
||||||
prop: 'status',
|
prop: 'status',
|
||||||
tooltip: true,
|
tooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '错误状态',
|
label: '错误状态',
|
||||||
prop: 'errorStatus',
|
prop: 'errorStatus',
|
||||||
tooltip: true,
|
tooltip: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '返回信息',
|
label: '返回信息',
|
||||||
prop: 'returnData',
|
prop: 'returnData',
|
||||||
tooltip: true,
|
tooltip: true
|
||||||
}, {
|
|
||||||
label: '创建时间',
|
|
||||||
prop: 'createTime',
|
|
||||||
tooltip: true,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
const tableVersionColumn = [
|
|
||||||
{
|
|
||||||
label: '接收者名称',
|
|
||||||
prop: 'receiveName',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '接收者编码',
|
|
||||||
prop: 'receiveCode',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '接收者应用',
|
|
||||||
prop: 'receiveApp',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '接收者',
|
|
||||||
prop: 'receiveApi',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '数据类型',
|
|
||||||
prop: 'dataType',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '备注',
|
label: '备注',
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
|
tooltip: true
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: '创建时间',
|
||||||
|
prop: 'createTime',
|
||||||
|
tooltip: true
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
const tableVersionColumn = [
|
||||||
|
{
|
||||||
|
label: '接收者名称',
|
||||||
|
prop: 'receiveName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '接收者编码',
|
||||||
|
prop: 'receiveCode'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '接收者应用',
|
||||||
|
prop: 'receiveApp'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '接收者',
|
||||||
|
prop: 'receiveApi'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数据类型',
|
||||||
|
prop: 'dataType'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '备注',
|
||||||
|
prop: 'remark'
|
||||||
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
// 基本信息内容
|
// 基本信息内容
|
||||||
|
|
@ -85,7 +92,7 @@ const formRow = [
|
||||||
disabled: true,
|
disabled: true,
|
||||||
options: [],
|
options: [],
|
||||||
optionValue: 'id',
|
optionValue: 'id',
|
||||||
optionLabel: 'name',
|
optionLabel: 'name'
|
||||||
}, {
|
}, {
|
||||||
label: '发送者',
|
label: '发送者',
|
||||||
prop: 'sendApi',
|
prop: 'sendApi',
|
||||||
|
|
@ -93,7 +100,7 @@ const formRow = [
|
||||||
disabled: true,
|
disabled: true,
|
||||||
options: [],
|
options: [],
|
||||||
optionValue: 'id',
|
optionValue: 'id',
|
||||||
optionLabel: 'apiName',
|
optionLabel: 'apiName'
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -104,7 +111,7 @@ const formRow = [
|
||||||
disabled: true,
|
disabled: true,
|
||||||
options: [],
|
options: [],
|
||||||
optionValue: 'id',
|
optionValue: 'id',
|
||||||
optionLabel: 'name',
|
optionLabel: 'name'
|
||||||
}, {
|
}, {
|
||||||
label: '接收者',
|
label: '接收者',
|
||||||
prop: 'receiveApi',
|
prop: 'receiveApi',
|
||||||
|
|
@ -112,7 +119,7 @@ const formRow = [
|
||||||
disabled: true,
|
disabled: true,
|
||||||
options: [],
|
options: [],
|
||||||
optionValue: 'id',
|
optionValue: 'id',
|
||||||
optionLabel: 'apiName',
|
optionLabel: 'apiName'
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -120,8 +127,8 @@ const formRow = [
|
||||||
label: '源数据',
|
label: '源数据',
|
||||||
prop: 'sourceData',
|
prop: 'sourceData',
|
||||||
tag: 'elSlot',
|
tag: 'elSlot',
|
||||||
slotName: "sourceData",
|
slotName: 'sourceData',
|
||||||
span: 24,
|
span: 24
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -129,8 +136,8 @@ const formRow = [
|
||||||
label: '目标数据',
|
label: '目标数据',
|
||||||
prop: 'targetData',
|
prop: 'targetData',
|
||||||
tag: 'elSlot',
|
tag: 'elSlot',
|
||||||
slotName: "targetData",
|
slotName: 'targetData',
|
||||||
span: 24,
|
span: 24
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -141,12 +148,12 @@ const formRow = [
|
||||||
disabled: true,
|
disabled: true,
|
||||||
span: 24,
|
span: 24,
|
||||||
options: [
|
options: [
|
||||||
{value: "1", label: "待发送"},
|
{ value: '1', label: '待发送' },
|
||||||
{value: "2", label: "发送中"},
|
{ value: '2', label: '发送中' },
|
||||||
{value: "3", label: "发送成功"},
|
{ value: '3', label: '发送成功' },
|
||||||
{value: "4", label: "发送失败"},
|
{ value: '4', label: '发送失败' }
|
||||||
],
|
]
|
||||||
},]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
elCol: [{
|
elCol: [{
|
||||||
|
|
@ -156,10 +163,10 @@ const formRow = [
|
||||||
disabled: true,
|
disabled: true,
|
||||||
span: 24,
|
span: 24,
|
||||||
options: [
|
options: [
|
||||||
{value: "1", label: "需要重新发送"},
|
{ value: '1', label: '需要重新发送' },
|
||||||
{value: "2", label: "不需要重新发送"},
|
{ value: '2', label: '不需要重新发送' }
|
||||||
],
|
]
|
||||||
},]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
elCol: [{
|
elCol: [{
|
||||||
|
|
@ -168,9 +175,9 @@ const formRow = [
|
||||||
tag: 'elInput',
|
tag: 'elInput',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
disabled: true,
|
disabled: true,
|
||||||
span: 24,
|
span: 24
|
||||||
}]
|
}]
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
const basicsRules = {
|
const basicsRules = {
|
||||||
|
|
@ -183,7 +190,7 @@ const basicsRules = {
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入目标数据',
|
message: '请输入目标数据',
|
||||||
trigger: 'blur'
|
trigger: 'blur'
|
||||||
}],
|
}]
|
||||||
}
|
}
|
||||||
|
|
||||||
// 查看
|
// 查看
|
||||||
|
|
@ -196,8 +203,8 @@ const formRowShow = [
|
||||||
disabled: true,
|
disabled: true,
|
||||||
options: [],
|
options: [],
|
||||||
optionValue: 'id',
|
optionValue: 'id',
|
||||||
optionLabel: 'name',
|
optionLabel: 'name'
|
||||||
},]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
elCol: [{
|
elCol: [{
|
||||||
|
|
@ -206,7 +213,7 @@ const formRowShow = [
|
||||||
tag: 'elInput',
|
tag: 'elInput',
|
||||||
disabled: true,
|
disabled: true,
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
span: 24,
|
span: 24
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -216,7 +223,7 @@ const formRowShow = [
|
||||||
tag: 'elInput',
|
tag: 'elInput',
|
||||||
disabled: true,
|
disabled: true,
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
span: 24,
|
span: 24
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -227,12 +234,12 @@ const formRowShow = [
|
||||||
disabled: true,
|
disabled: true,
|
||||||
span: 24,
|
span: 24,
|
||||||
options: [
|
options: [
|
||||||
{value: "1", label: "待发送"},
|
{ value: '1', label: '待发送' },
|
||||||
{value: "2", label: "发送中"},
|
{ value: '2', label: '发送中' },
|
||||||
{value: "3", label: "发送成功"},
|
{ value: '3', label: '发送成功' },
|
||||||
{value: "4", label: "发送失败"},
|
{ value: '4', label: '发送失败' }
|
||||||
],
|
]
|
||||||
},]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
elCol: [{
|
elCol: [{
|
||||||
|
|
@ -242,10 +249,10 @@ const formRowShow = [
|
||||||
disabled: true,
|
disabled: true,
|
||||||
span: 24,
|
span: 24,
|
||||||
options: [
|
options: [
|
||||||
{value: "1", label: "需要重新发送"},
|
{ value: '1', label: '需要重新发送' },
|
||||||
{value: "2", label: "不需要重新发送"},
|
{ value: '2', label: '不需要重新发送' }
|
||||||
],
|
]
|
||||||
},]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
elCol: [{
|
elCol: [{
|
||||||
|
|
@ -254,9 +261,9 @@ const formRowShow = [
|
||||||
tag: 'elInput',
|
tag: 'elInput',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
disabled: true,
|
disabled: true,
|
||||||
span: 24,
|
span: 24
|
||||||
}]
|
}]
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
export default {
|
export default {
|
||||||
tableColumnData,
|
tableColumnData,
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,15 @@
|
||||||
<div>
|
<div>
|
||||||
<base-layout
|
<base-layout
|
||||||
ref="baseLayout"
|
ref="baseLayout"
|
||||||
|
:showTitle="false"
|
||||||
|
:searchShow="false"
|
||||||
@onFuncBtn="onFuncBtn"
|
@onFuncBtn="onFuncBtn"
|
||||||
:querySwitch="true"
|
:querySwitch="true"
|
||||||
:searchList="requirementList"
|
:searchList="requirementList"
|
||||||
@search="handleSearchEvent"
|
@search="handleSearchEvent"
|
||||||
:isPage="true"
|
:isPage="true"
|
||||||
@pageChange="handlePageChange"
|
@pageChange="handlePageChange"
|
||||||
|
@onElSelect="onElSelect"
|
||||||
:bodyHight="''"
|
:bodyHight="''"
|
||||||
>
|
>
|
||||||
<div slot="main" slot-scope="{ tableHeight }">
|
<div slot="main" slot-scope="{ tableHeight }">
|
||||||
|
|
@ -18,7 +21,7 @@
|
||||||
:funData="funData"
|
:funData="funData"
|
||||||
@onFunc="onFunc"
|
@onFunc="onFunc"
|
||||||
:tabLoading.sync="tabLoading"
|
:tabLoading.sync="tabLoading"
|
||||||
:tableHeight="'50vh'"
|
:tableHeight="'40vh'"
|
||||||
:tableData="tableData"
|
:tableData="tableData"
|
||||||
:tableColumn="tableColumnData"
|
:tableColumn="tableColumnData"
|
||||||
>
|
>
|
||||||
|
|
@ -83,13 +86,21 @@ export default {
|
||||||
optionValue: "id",
|
optionValue: "id",
|
||||||
optionLabel: "name",
|
optionLabel: "name",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
placeholder: "开始日期",
|
||||||
|
prop: "createTimeStart",
|
||||||
|
tag: "elDatePicker",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
placeholder: "结束日期",
|
||||||
|
prop: "createTimeEnd",
|
||||||
|
tag: "elDatePicker",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
placeholder: "状态",
|
placeholder: "状态",
|
||||||
prop: "status",
|
prop: "status",
|
||||||
tag: "elSelect",
|
tag: "elSelect",
|
||||||
options: [
|
options: [
|
||||||
{id: "1", label: "待发送"},
|
|
||||||
{id: "2", label: "发送中"},
|
|
||||||
{id: "3", label: "发送成功"},
|
{id: "3", label: "发送成功"},
|
||||||
{id: "4", label: "发送失败"},
|
{id: "4", label: "发送失败"},
|
||||||
],
|
],
|
||||||
|
|
@ -100,6 +111,21 @@ export default {
|
||||||
optionValue: "id",
|
optionValue: "id",
|
||||||
optionLabel: "label",
|
optionLabel: "label",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
placeholder: "源数据",
|
||||||
|
prop: "sourceData",
|
||||||
|
tag: "elInput",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
placeholder: "目标数据",
|
||||||
|
prop: "targetData",
|
||||||
|
tag: "elInput",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
placeholder: "返回信息",
|
||||||
|
prop: "returnData",
|
||||||
|
tag: "elInput",
|
||||||
|
},
|
||||||
], //查询模板list
|
], //查询模板list
|
||||||
tabLoading: false,
|
tabLoading: false,
|
||||||
tableColumnData: configData.tableColumnData, //表头数据
|
tableColumnData: configData.tableColumnData, //表头数据
|
||||||
|
|
@ -112,7 +138,7 @@ export default {
|
||||||
tableData: [], //表格数据
|
tableData: [], //表格数据
|
||||||
pageModel: {
|
pageModel: {
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 100,
|
||||||
},
|
},
|
||||||
queryModel: {
|
queryModel: {
|
||||||
theme: "",
|
theme: "",
|
||||||
|
|
@ -121,27 +147,46 @@ export default {
|
||||||
receiveApp: "",
|
receiveApp: "",
|
||||||
receiveApi: "",
|
receiveApi: "",
|
||||||
status: "",
|
status: "",
|
||||||
|
targetData: '',
|
||||||
|
sourceData: '',
|
||||||
|
returnData: ''
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.GetMessageLogTableData();
|
// this.GetMessageLogTableData();
|
||||||
this.initSelect()
|
this.initSelect()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
async onElSelect(event, index, indexItem, model, row) {
|
||||||
|
console.log(event, index, indexItem, model, row)
|
||||||
|
|
||||||
|
if (row.placeholder === '接受者应用') {
|
||||||
|
this.$set(this.queryModel, 'receiveApi', '')
|
||||||
|
this.$set(this.$refs.baseLayout.ruleForm, 'receiveApi', "")
|
||||||
|
if (event) {
|
||||||
|
const res = await authApi('sysApplicationService', 'application', 'thirdInterfacequeryAppApi', '', {
|
||||||
|
appId: event
|
||||||
|
})
|
||||||
|
if (res.status == 200) {
|
||||||
|
this.requirementList[2].options = res.attribute
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.requirementList[2].options = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
// 表格数据
|
// 表格数据
|
||||||
async GetMessageLogTableData() {
|
async GetMessageLogTableData() {
|
||||||
this.tabLoading = true;
|
this.tabLoading = true;
|
||||||
let param = {
|
let param = {
|
||||||
...this.pageModel,
|
...this.pageModel,
|
||||||
...this.queryModel,
|
...this.queryModel,
|
||||||
receiveApp: this.$route.query.id,
|
|
||||||
receiveApi: this.receiveApi
|
|
||||||
};
|
};
|
||||||
let res = await authApi(
|
let res = await authApi(
|
||||||
"sysApplicationService",
|
"sysApplicationService",
|
||||||
"application",
|
"application",
|
||||||
"queryAppApiLog",
|
"thirdInterfacequeryAppApiLog",
|
||||||
"",
|
"",
|
||||||
param
|
param
|
||||||
);
|
);
|
||||||
|
|
@ -218,24 +263,40 @@ export default {
|
||||||
// 搜索
|
// 搜索
|
||||||
handleSearchEvent(form) {
|
handleSearchEvent(form) {
|
||||||
let data = this.$refs.baseLayout.ruleForm;
|
let data = this.$refs.baseLayout.ruleForm;
|
||||||
this.queryModel.theme = data.theme;
|
data.receiveApp = this.$route.query.id;
|
||||||
this.queryModel.sendApp = data.sendApp;
|
data.receiveApi = this.receiveApi;
|
||||||
this.queryModel.sendApi = data.sendApi;
|
this.queryModel = {...data}
|
||||||
this.queryModel.receiveApp = data.receiveApp;
|
// if (!data.sendApp) {
|
||||||
this.queryModel.receiveApi = data.receiveApi;
|
// this.$vmNews("请选择发送者应用")
|
||||||
this.queryModel.status = data.status;
|
// return
|
||||||
|
// }
|
||||||
|
// if (!data.receiveApp) {
|
||||||
|
// this.$vmNews("请选择接受者应用")
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
// if (!data.receiveApi) {
|
||||||
|
// this.$vmNews("请选择接受者api")
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
if (!data.status) {
|
||||||
|
this.$vmNews("请选择状态")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
this.resetTable();
|
this.resetTable();
|
||||||
},
|
},
|
||||||
async initSelect() {
|
async initSelect() {
|
||||||
const res = await getApiModuleApi({
|
const res = await getApiModuleApi({
|
||||||
tl: "sysApplicationService",
|
tl: "sysApplicationService",
|
||||||
as: "application",
|
as: "application",
|
||||||
dj: "queryApp"
|
dj: "thirdInterfacequeryApp"
|
||||||
}, {
|
}, {
|
||||||
"pageNum": 1,
|
"pageNum": 1,
|
||||||
"pageSize": 999
|
"pageSize": 999
|
||||||
})
|
})
|
||||||
|
console.log(res, 'res')
|
||||||
this.requirementList[0].options = res.attribute.list
|
this.requirementList[0].options = res.attribute.list
|
||||||
|
this.requirementList[1].options = res.attribute.list
|
||||||
},
|
},
|
||||||
// async onElSelect(val, b, c, d, row) {
|
// async onElSelect(val, b, c, d, row) {
|
||||||
// if (row.prop === 'sendApp') {
|
// if (row.prop === 'sendApp') {
|
||||||
|
|
@ -258,9 +319,12 @@ export default {
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.clickTitle {
|
.clickTitle {
|
||||||
color: #409eff;
|
color: #409eff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
::v-deep .el-dialog__body{
|
||||||
|
padding: 0px !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -81,7 +81,7 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
openDialog(type, row) {
|
openDialog(type, row) {
|
||||||
this.querysysAppService();
|
this.querysysAppService();
|
||||||
this.querysysAppApiService();
|
// this.querysysAppApiService();
|
||||||
this.formRow = configData.formRow;
|
this.formRow = configData.formRow;
|
||||||
this.submitShow = true;
|
this.submitShow = true;
|
||||||
// 编辑
|
// 编辑
|
||||||
|
|
@ -108,7 +108,7 @@ export default {
|
||||||
let res = await authApi(
|
let res = await authApi(
|
||||||
"sysMessageManageLogService",
|
"sysMessageManageLogService",
|
||||||
"messageManage",
|
"messageManage",
|
||||||
"queryEntity",
|
"thirdInterfacequeryEntity",
|
||||||
"",
|
"",
|
||||||
params
|
params
|
||||||
);
|
);
|
||||||
|
|
@ -201,7 +201,7 @@ export default {
|
||||||
const res = await getApiModuleApi({
|
const res = await getApiModuleApi({
|
||||||
tl: "sysApplicationService",
|
tl: "sysApplicationService",
|
||||||
as: "application",
|
as: "application",
|
||||||
dj: "queryApp"
|
dj: "thirdInterfacequeryApp"
|
||||||
}, {
|
}, {
|
||||||
"pageNum": 1,
|
"pageNum": 1,
|
||||||
"pageSize": 999
|
"pageSize": 999
|
||||||
|
|
|
||||||
|
|
@ -1,99 +1,493 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container home">
|
<div class="home">
|
||||||
<div class="dashboard-editor-container">
|
<!--上面块运行情况-->
|
||||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
<div class="operationInfo">
|
||||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
<!-- 异常日志-->
|
||||||
<line-chart :chart-data="lineChartData" />
|
<div class="errLogs">
|
||||||
</el-row>
|
<div class="title">异常日志</div>
|
||||||
<el-row :gutter="32">
|
<div class="errorInfo">
|
||||||
<el-col :xs="24" :sm="24" :lg="8">
|
<div class="img">
|
||||||
<div class="chart-wrapper">
|
<img src="@/assets/images/index_v2_error.png"/>
|
||||||
<raddar-chart />
|
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
<div class="num">{{ errorNum }}</div>
|
||||||
<el-col :xs="24" :sm="24" :lg="8">
|
|
||||||
<div class="chart-wrapper">
|
|
||||||
<pie-chart />
|
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
<!-- 轮播图-->
|
||||||
<el-col :xs="24" :sm="24" :lg="8">
|
<div class="swiper">
|
||||||
<div class="chart-wrapper">
|
<el-carousel height="150px" arrow="never" :loop="true">
|
||||||
<bar-chart />
|
<el-carousel-item v-for="(item,index) in errList" :key="index">
|
||||||
|
<div class="errList">
|
||||||
|
<div class="errItem" v-for="row in errList[index]">
|
||||||
|
<div class="img">
|
||||||
|
<img :src="row.imgUrl" alt="" @error="handleImageError(row)"/>
|
||||||
|
</div>
|
||||||
|
<div class="num">
|
||||||
|
{{ row.num }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 接口运行情况-->
|
||||||
|
<div class="apiInfo">
|
||||||
|
<div class="title">接口运行情况</div>
|
||||||
|
<div class="table">
|
||||||
|
<div class="tableTitle">
|
||||||
|
<div class="app">应用</div>
|
||||||
|
<div class="total">总数</div>
|
||||||
|
<div class="start">启动</div>
|
||||||
|
<div class="stop">停用</div>
|
||||||
|
</div>
|
||||||
|
<div class="content" @mouseenter="mouseenterHandle" @mouseleave="mouseleaveHandle">
|
||||||
|
<div class="tableContent" ref="refcontent">
|
||||||
|
<div class="line" v-for="(row,index) in this.apiInfoTableData" :key="index">
|
||||||
|
<div class="app">
|
||||||
|
<img :src="row.imgUrl" alt="" @error="handleImageError(row)"/>
|
||||||
|
</div>
|
||||||
|
<div class="total">{{ row.num ? row.num : 0 }}</div>
|
||||||
|
<div class="start">{{ row.normalNum ? row.normalNum : 0 }}</div>
|
||||||
|
<div class="stop">{{ row.abnormalNum ? row.abnormalNum : 0 }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 任务运行情况-->
|
||||||
|
<div class="taskInfo">
|
||||||
|
<div class="title">任务运行情况</div>
|
||||||
|
<div class="taskInfoList">
|
||||||
|
<div class="total">
|
||||||
|
<div class="text">总任务</div>
|
||||||
|
<div class="num">{{ taskTotal }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="start">
|
||||||
|
<div class="text">运行中</div>
|
||||||
|
<div class="num">{{ taskStart }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stop">
|
||||||
|
<div class="text">停止</div>
|
||||||
|
<div class="num">{{ taskStop }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 柱状图-->
|
||||||
|
<div class="echarts">
|
||||||
|
<div class="title">数据接入</div>
|
||||||
|
<div class="form">
|
||||||
|
<BarChart :proportion="proportion" :DataCollection="echartsData"></BarChart>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import PanelGroup from './dashboard/PanelGroup'
|
|
||||||
import LineChart from './dashboard/LineChart'
|
|
||||||
import RaddarChart from './dashboard/RaddarChart'
|
|
||||||
import PieChart from './dashboard/PieChart'
|
|
||||||
import BarChart from './dashboard/BarChart'
|
|
||||||
|
|
||||||
const lineChartData = {
|
import request from "@/utils/request";
|
||||||
newVisitis: {
|
import {authApi} from "@/api/apis/auth";
|
||||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
|
||||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
|
||||||
},
|
|
||||||
messages: {
|
|
||||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
|
||||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
|
||||||
},
|
|
||||||
purchases: {
|
|
||||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
|
||||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
|
||||||
},
|
|
||||||
shoppings: {
|
|
||||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
|
||||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Index',
|
name: 'Index',
|
||||||
components: {
|
components: {},
|
||||||
PanelGroup,
|
|
||||||
LineChart,
|
|
||||||
RaddarChart,
|
|
||||||
PieChart,
|
|
||||||
BarChart
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
lineChartData: lineChartData.newVisitis
|
//echats尺寸控制
|
||||||
|
proportion: {
|
||||||
|
width: "100%",
|
||||||
|
height: "40vh",
|
||||||
|
},
|
||||||
|
//echarts数据
|
||||||
|
echartsData: {
|
||||||
|
"title": [
|
||||||
|
"正常",
|
||||||
|
"异常",
|
||||||
|
],
|
||||||
|
"parameter": [],
|
||||||
|
"series": [
|
||||||
|
{
|
||||||
|
"name": "正常",
|
||||||
|
"type": "bar",
|
||||||
|
"data": [],
|
||||||
|
"barWidth": "10%",
|
||||||
|
"barGap": "0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "异常",
|
||||||
|
"type": "bar",
|
||||||
|
"data": [],
|
||||||
|
"barWidth": "10%",
|
||||||
|
"barGap": "0"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
errorNum: 4,//异常日志数量
|
||||||
|
errList: [],//异常日志轮播图
|
||||||
|
apiInfoTableData: [],//接口运行情况表单数据
|
||||||
|
taskTotal: 19,//任务总数
|
||||||
|
taskStart: 20,//任务运行
|
||||||
|
taskStop: 21,//任务停止
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
|
this.init()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleSetLineChartData(type) {
|
// 初始化各个表单
|
||||||
this.lineChartData = lineChartData[type]
|
async init() {
|
||||||
|
this.getErrorLogs()
|
||||||
|
this.getApiInfo()
|
||||||
|
this.getTaskInfo()
|
||||||
|
this.getTableData()
|
||||||
|
},
|
||||||
|
//图片处理
|
||||||
|
imgHandle(arr = []) {
|
||||||
|
arr.map(el => {
|
||||||
|
return request({
|
||||||
|
url: "/kangarooDataCenterV3/entranceController/fileDownloadNew?id=" + el.path,
|
||||||
|
method: "get",
|
||||||
|
responseType: 'arraybuffer'
|
||||||
|
}).then((res) => {
|
||||||
|
let tempImgUrl =
|
||||||
|
"data:image/png/jpg;base64," + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ""));
|
||||||
|
this.$set(el, 'imgUrl', tempImgUrl)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//图片发生错误时 使用默认图片
|
||||||
|
handleImageError(row = {}) {
|
||||||
|
row.imgUrl = require('@/assets/images/defaultIcon.png')
|
||||||
|
},
|
||||||
|
//接口运行情况鼠标移入移出动画开始停止效果
|
||||||
|
mouseenterHandle() {
|
||||||
|
this.$refs.refcontent.style.animationPlayState = 'paused'
|
||||||
|
},
|
||||||
|
mouseleaveHandle() {
|
||||||
|
this.$refs.refcontent.style.animationPlayState = ''
|
||||||
|
},
|
||||||
|
// 异常日志
|
||||||
|
async getErrorLogs() {
|
||||||
|
const res = await authApi('homeService', 'app', 'appErrorNum', '', {})
|
||||||
|
if (res.status === '200') {
|
||||||
|
this.errList = []
|
||||||
|
//图片处理
|
||||||
|
this.imgHandle(res.attribute)
|
||||||
|
let tempIndex = 0 //计数器要三个一组
|
||||||
|
let tempArr = [] //临时数组
|
||||||
|
|
||||||
|
console.log(res.attribute, '异常日志')
|
||||||
|
this.errorNum = 0
|
||||||
|
res.attribute.some((item, index) => {
|
||||||
|
this.errorNum += item.num * 1
|
||||||
|
tempArr.push(item)
|
||||||
|
tempIndex++
|
||||||
|
if (tempIndex === 3) {
|
||||||
|
this.errList.push(tempArr)
|
||||||
|
tempIndex = 0
|
||||||
|
tempArr = []
|
||||||
|
}
|
||||||
|
if (index === res.attribute.length - 1 && tempIndex !== 0) {
|
||||||
|
this.errList.push(tempArr)
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
console.log(this.errList, 'errList')
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
//接口运行情况
|
||||||
|
async getApiInfo() {
|
||||||
|
const res = await authApi('homeService', 'app', 'appApiNum', '', {})
|
||||||
|
if (res.status === '200') {
|
||||||
|
this.apiInfoTableData = []
|
||||||
|
this.imgHandle(res.attribute)
|
||||||
|
this.apiInfoTableData = res.attribute
|
||||||
|
|
||||||
|
if (this.apiInfoTableData.length >= 4) {
|
||||||
|
this.apiInfoTableData = [...this.apiInfoTableData, ...this.apiInfoTableData]
|
||||||
|
//接口运行情况加入动画
|
||||||
|
this.$refs.refcontent.classList.add('movego')
|
||||||
|
this.$refs.refcontent.style.animationDuration = `${this.apiInfoTableData.length}s`
|
||||||
|
}
|
||||||
|
console.log(this.apiInfoTableData, 'this.apiInfoTableData')
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
//任务运行情况
|
||||||
|
async getTaskInfo() {
|
||||||
|
const res = await authApi('homeService', 'app', 'taskNum', '', {})
|
||||||
|
console.log(res, '任务运行情况')
|
||||||
|
this.taskTotal = res.attribute.num ? res.attribute.num : 0
|
||||||
|
this.taskStart = res.attribute.normalNum ? res.attribute.normalNum : 0
|
||||||
|
this.taskStop = res.attribute.abnormalNum ? res.attribute.abnormalNum : 0
|
||||||
|
},
|
||||||
|
//数据接入
|
||||||
|
async getTableData() {
|
||||||
|
let tempDate = []
|
||||||
|
let normalNumData = []
|
||||||
|
let abnormalNumData = []
|
||||||
|
const res = await authApi('homeService', 'app', 'sevenNum', '', {})
|
||||||
|
res.attribute.forEach(item => {
|
||||||
|
tempDate.push(item.name)
|
||||||
|
normalNumData.push(item.normalNum ? item.normalNum : 0)
|
||||||
|
abnormalNumData.push(item.abnormalNum ? item.abnormalNum : 0)
|
||||||
|
})
|
||||||
|
//录用数据到echarts
|
||||||
|
//日期
|
||||||
|
this.echartsData.parameter = tempDate
|
||||||
|
//正常数据
|
||||||
|
this.echartsData.series[0].data = normalNumData
|
||||||
|
//异常数据
|
||||||
|
this.echartsData.series[1].data = abnormalNumData
|
||||||
|
|
||||||
|
console.log(res, '数据接入')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.dashboard-editor-container {
|
.home {
|
||||||
padding: 32px;
|
//background: url(~@/assets/images/index_v2_bgc.png) no-repeat;
|
||||||
background-color: #FBFBFB;
|
padding: 1vh .5vw 1vh;
|
||||||
position: relative;
|
background-color: #fcfcfc;
|
||||||
height: 100%;
|
display: flex;
|
||||||
overflow: auto;
|
flex-direction: column;
|
||||||
|
//上半部分
|
||||||
|
.operationInfo {
|
||||||
|
|
||||||
.chart-wrapper {
|
flex: 1;
|
||||||
background: #fff;
|
display: flex;
|
||||||
padding: 16px 16px 0;
|
//异常日志
|
||||||
margin-bottom: 32px;
|
.errLogs {
|
||||||
}
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 轻盈的阴影效果 */
|
||||||
}
|
background-color: #fff;
|
||||||
|
|
||||||
@media (max-width:1024px) {
|
|
||||||
.chart-wrapper {
|
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
|
//background: url(~@/assets/images/index_v2_border.png) no-repeat;
|
||||||
|
//background-size: 100% 100%;
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
|
||||||
|
> .errorInfo {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 7vh;
|
||||||
|
|
||||||
|
> .img {
|
||||||
|
margin-right: 20px;
|
||||||
|
width: 5vw;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 5vw;
|
||||||
|
height: 7vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .num {
|
||||||
|
width: 5vw;
|
||||||
|
font-size: 3vw;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
> .swiper {
|
||||||
|
margin-top: 3vh;
|
||||||
|
|
||||||
|
.errList {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
> .errItem {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-right: .5px #ccc solid;
|
||||||
|
|
||||||
|
> .img {
|
||||||
|
width: 3vw;
|
||||||
|
height: 3vw;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .num {
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 4vw;
|
||||||
|
text-align: center;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-last-child(1) {
|
||||||
|
border-right: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//接口运行情况
|
||||||
|
.apiInfo {
|
||||||
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 轻盈的阴影效果 */
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 8px;
|
||||||
|
//background: url(~@/assets/images/index_v2_border.png) no-repeat;
|
||||||
|
//background-size: 100% 100%;
|
||||||
|
flex: 1;
|
||||||
|
margin: 0 10px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
> .table {
|
||||||
|
padding: 0 15px;
|
||||||
|
|
||||||
|
> .tableTitle {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: #ccc 1px solid;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
height: 22vh;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
> .tableContent {
|
||||||
|
|
||||||
|
> .line {
|
||||||
|
padding: 15px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px #ccc dashed;
|
||||||
|
> div {
|
||||||
|
color: #000;
|
||||||
|
font-size: 32px;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 700;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
img {
|
||||||
|
width: 3vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.taskInfo {
|
||||||
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 轻盈的阴影效果 */
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 8px;
|
||||||
|
//background: url(~@/assets/images/index_v2_border.png) no-repeat;
|
||||||
|
//background-size: 100% 100%;
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
> .taskInfoList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
> div {
|
||||||
|
border-radius: 16px;
|
||||||
|
width: 28%;
|
||||||
|
height: 23vh;
|
||||||
|
display: flex;
|
||||||
|
font-weight: 700;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 34px;
|
||||||
|
color: #fff;
|
||||||
|
.text{
|
||||||
|
margin-top: 5vh;
|
||||||
|
}
|
||||||
|
.num{
|
||||||
|
margin-top: 5vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .total {
|
||||||
|
background-color: #1d46ee;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .start {
|
||||||
|
background-color: #7ad756;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .stop {
|
||||||
|
background-color: #e76e3e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//所有标题统一样式
|
||||||
|
.title {
|
||||||
|
//background: url(~@/assets/images/index_v2_title.png) no-repeat;
|
||||||
|
//background-size: 100% 100%;
|
||||||
|
width: 20vw;
|
||||||
|
height: 6vh;
|
||||||
|
color: #000;
|
||||||
|
line-height: 6vh;
|
||||||
|
padding-left: 1vw;
|
||||||
|
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.echarts {
|
||||||
|
flex: 2;
|
||||||
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 轻盈的阴影效果 */
|
||||||
|
margin-top: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
.form{
|
||||||
|
margin-top: 5vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//接口运行情况
|
||||||
|
@keyframes move {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(-51%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.movego {
|
||||||
|
animation: move 80s linear infinite;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue