移植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'
|
||||
Vue.use(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'
|
||||
Vue.use(followWorkShow)
|
||||
Vue.component('FollowWorkShow', followWorkShow) // 初始化组件
|
||||
|
|
|
|||
|
|
@ -38,6 +38,11 @@ const tableColumnData = [
|
|||
prop: 'createTime',
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remark',
|
||||
tooltip: true,
|
||||
},
|
||||
]
|
||||
const tableVersionColumn = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -115,8 +115,6 @@ export default {
|
|||
prop: "status",
|
||||
tag: "elSelect",
|
||||
options: [
|
||||
{id: "1", label: "待发送"},
|
||||
{id: "2", label: "发送中"},
|
||||
{id: "3", label: "发送成功"},
|
||||
{id: "4", label: "发送失败"},
|
||||
],
|
||||
|
|
@ -292,6 +290,11 @@ export default {
|
|||
this.$vmNews("请选择接受者api")
|
||||
return
|
||||
}
|
||||
if (!data.status) {
|
||||
this.$vmNews("请选择状态")
|
||||
return
|
||||
}
|
||||
|
||||
this.resetTable();
|
||||
},
|
||||
async initSelect() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="wrap">
|
||||
<!-- 右上功能按钮-->
|
||||
<div class="nextbtn">
|
||||
<el-button
|
||||
:disabled="active == 0"
|
||||
|
|
@ -29,7 +28,6 @@
|
|||
</el-button>
|
||||
|
||||
</div>
|
||||
<!-- 步骤条-->
|
||||
<div class="step">
|
||||
<el-steps :active="active" finish-status="success" simple>
|
||||
<el-step title="设置API基本信息"></el-step>
|
||||
|
|
@ -37,14 +35,12 @@
|
|||
<el-step title="添加参数映射关系"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
<!-- 第一步和第二步界面-->
|
||||
<div class="formdata" v-if="active === 0 || active === 1">
|
||||
<div class="title">
|
||||
<h1>API基本信息</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<!-- <router-view></router-view> -->
|
||||
<!-- 第一步界面-->
|
||||
<template v-if="active === 0">
|
||||
<div>
|
||||
<baseNewForm
|
||||
|
|
@ -60,7 +56,6 @@
|
|||
</baseNewForm>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 第二步界面-->
|
||||
<template v-if="active === 1">
|
||||
<div>
|
||||
<baseNewForm
|
||||
|
|
@ -71,13 +66,11 @@
|
|||
:ruleForm="stepOneForm"
|
||||
:isFunBtn="false"
|
||||
@onSubmit="onSubmitHandle"
|
||||
@onChangeRadio="stepOneChangeRadio"
|
||||
></baseNewForm>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第三部界面-->
|
||||
<div class="step3" v-if="active === 2">
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<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="4">Body出参</el-menu-item>
|
||||
<el-menu-item index="5">调试</el-menu-item>
|
||||
<el-menu-item index="6">返回值</el-menu-item>
|
||||
</el-menu>
|
||||
<template v-if="activeIndex === '1'">
|
||||
<div class="tableBox">
|
||||
|
|
@ -102,7 +96,7 @@
|
|||
<baseTableForm
|
||||
:showIndex="false"
|
||||
:indexOperate="false"
|
||||
:funWidth="80"
|
||||
:funWidth="150"
|
||||
:funData="[{text:'删除',type:'dele',color:'#e47470'}]"
|
||||
:tableInfo="headersTableInfo"
|
||||
@onFunc="tableButtonHandle"
|
||||
|
|
@ -195,7 +189,7 @@
|
|||
<baseTableForm
|
||||
:showIndex="false"
|
||||
:indexOperate="false"
|
||||
:funWidth="100"
|
||||
:funWidth="150"
|
||||
:funData="[{text:'删除',type:'dele',color:'#e47470'}]"
|
||||
:tableInfo="queryTableInfo"
|
||||
@newRow="queryTableAddHandle"
|
||||
|
|
@ -470,6 +464,20 @@
|
|||
:stepOneForm="stepOneForm" :headersTableInfo="headersTableInfo.tableData"
|
||||
></apiDebugging>
|
||||
</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>
|
||||
|
|
@ -677,152 +685,6 @@ export default {
|
|||
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表
|
||||
stepOneForm: {
|
||||
|
|
@ -898,7 +760,7 @@ export default {
|
|||
type: 'input',
|
||||
title: '描述',
|
||||
id: 'description',
|
||||
maxlength: 300
|
||||
maxlength: 50
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
|
|
@ -955,8 +817,7 @@ export default {
|
|||
{
|
||||
type: 'input',
|
||||
title: '描述',
|
||||
id: 'description',
|
||||
maxlength: 300
|
||||
id: 'description'
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
|
|
@ -1006,8 +867,7 @@ export default {
|
|||
{
|
||||
type: 'input',
|
||||
title: '描述',
|
||||
id: 'description',
|
||||
maxlength: 300
|
||||
id: 'description'
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
|
|
@ -1057,8 +917,7 @@ export default {
|
|||
{
|
||||
type: 'input',
|
||||
title: '描述',
|
||||
id: 'description',
|
||||
maxlength: 300
|
||||
id: 'description'
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
|
|
@ -1219,235 +1078,49 @@ export default {
|
|||
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: {
|
||||
//当步骤二中的是否拓展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) {
|
||||
this.activeIndex = key
|
||||
|
|
@ -1462,7 +1135,6 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
//JSON组件相关显示方法
|
||||
jsonImportSwitch(data, flag, body = false) {
|
||||
this.importFlag = flag
|
||||
this.importData = data
|
||||
|
|
@ -1651,233 +1323,11 @@ export default {
|
|||
obj1['requestMethod'] = res.attribute.requestMethod
|
||||
obj1['timeoutPeriod'] = res.attribute.timeoutPeriod
|
||||
obj1['currentLimiting'] = res.attribute.currentLimiting
|
||||
obj1['beanName'] = res.attribute.beanName
|
||||
obj1['funName'] = res.attribute.funName
|
||||
obj1['extensionApi'] = res.attribute.extensionApi
|
||||
this.stepZeroForm = obj0
|
||||
this.stepOneForm = obj1
|
||||
//这里和stepOneChangeRadio方法一个道理 需要判断是否必填
|
||||
if (this.stepOneForm.extensionApi == 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'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
// this.stepOneformRow[6].elCol[0].required = this.stepOneForm.extensionApi == 1
|
||||
// this.stepOneformRow[7].elCol[0].required = this.stepOneForm.extensionApi == 1
|
||||
this.$set(this.returnedForm, 'returnSuccessField', res.attribute.returnSuccessField)
|
||||
this.$set(this.returnedForm, 'returnSuccessValue', res.attribute.returnSuccessValue)
|
||||
this.$set(this.returnedForm, 'returnMsg', res.attribute.returnMsg)
|
||||
if (JSON.parse(res.attribute.queryIn) instanceof Array) {
|
||||
this.queryTableInfo.tableData = JSON.parse(res.attribute.queryIn)
|
||||
}
|
||||
|
|
@ -1937,12 +1387,28 @@ export default {
|
|||
// 点击提交数据处理
|
||||
async commit() {
|
||||
// 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 = {
|
||||
apiStatus: 1,
|
||||
appId: this.$route.query.id,
|
||||
catalogueId: this.$route.query.catalogueId,
|
||||
...this.stepZeroForm,
|
||||
...this.stepOneForm
|
||||
...this.stepOneForm,
|
||||
...this.returnedForm
|
||||
}
|
||||
console.log(this.$route.query, 'query')
|
||||
obj[this.queryTableInfo.id] = this.queryTableInfo.tableData
|
||||
|
|
@ -2074,7 +1540,6 @@ export default {
|
|||
},
|
||||
// 点击下一步
|
||||
onSubmitHandle(form) {
|
||||
console.log(this.active, 'active')
|
||||
if (this.active == 0) {
|
||||
if (this.stepZeroForm.needLogin == 1) {
|
||||
// 如果需要认证点击下一步
|
||||
|
|
@ -2239,13 +1704,12 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
funWidth() {
|
||||
return this.funData.length * 80
|
||||
return this.funData.length * 90
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initRequestCoding()
|
||||
this.initRequestMethod()
|
||||
//判断是否未编辑
|
||||
if (!this.$route.query.add) {
|
||||
this.getEditInfo()
|
||||
} else {
|
||||
|
|
@ -2253,7 +1717,6 @@ export default {
|
|||
this.$set(this.stepZeroForm, 'appName', this.$route.query.name)
|
||||
this.$set(this.stepZeroForm, 'catalogueId', this.$route.query.catalogueId)
|
||||
this.$set(this.stepZeroForm, 'catalogueName', this.$route.query.catalogueName)
|
||||
this.$set(this.stepOneForm, 'extensionApi', '2')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -239,6 +239,7 @@
|
|||
v-model="logDialog"
|
||||
@confirm="logConfirm"
|
||||
:width="'80%'"
|
||||
:footerShow="false"
|
||||
>
|
||||
<div>
|
||||
<logTableChunk v-if="logDialog" :receiveApi="receiveApi"></logTableChunk>
|
||||
|
|
@ -686,7 +687,8 @@ export default {
|
|||
}
|
||||
// 将表格数据转json
|
||||
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 headerObj = {};
|
||||
let bodyObj
|
||||
|
|
@ -704,6 +706,7 @@ export default {
|
|||
bodyObj[item.interfaceKey] = item.interfaceValue === null ? "" : item.interfaceValue;
|
||||
}
|
||||
})
|
||||
console.log(1,res.attribute.api)
|
||||
// 如果存在认证接口
|
||||
if (res.attribute.api.needLogin == 1) {
|
||||
this.getDebugInfoHandle(
|
||||
|
|
@ -731,7 +734,7 @@ export default {
|
|||
this.$set(json, "query", {});
|
||||
}
|
||||
if (
|
||||
JSON.parse(res.attribute.api.bodyIn)
|
||||
JSON.parse(res.attribute.api.bodyIn).length
|
||||
) {
|
||||
if (!bodyFlag) {
|
||||
this.DebugDataHandle(bodyObj, bodyIn[0].children)
|
||||
|
|
@ -986,7 +989,7 @@ export default {
|
|||
computed: {
|
||||
// 操作框的宽度
|
||||
funWidth() {
|
||||
return this.mainFunData.length * 70;
|
||||
return this.mainFunData.length * 90;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -250,6 +250,7 @@ export default {
|
|||
},
|
||||
authDataHandle(obj, arr) {
|
||||
arr.forEach((item) => {
|
||||
console.log(item, 'item')
|
||||
if (item.parameterType === "authport") {
|
||||
obj[item.parameterName] = this.authDataReturn(item.example);
|
||||
}
|
||||
|
|
@ -297,12 +298,16 @@ export default {
|
|||
//初始化
|
||||
async init() {
|
||||
//拼接url
|
||||
console.log(1)
|
||||
this.getApiModuleApiHanlde(0, false, this.stepOneForm.destinationAddress)
|
||||
console.log(222)
|
||||
if (this.stepZeroForm.needLogin === '1') {
|
||||
this.getApiModuleApiHanlde(this.stepZeroForm.authenticationPort, true)
|
||||
console.log(333)
|
||||
}
|
||||
},
|
||||
async getApiModuleApiHanlde(id, flag, address = {}) {
|
||||
console.log(11123)
|
||||
const res = await getApiModuleApi(
|
||||
{
|
||||
tl: "sysApplicationService",
|
||||
|
|
@ -311,12 +316,15 @@ export default {
|
|||
},
|
||||
{id: id, appId: this.$route.query.id}
|
||||
);
|
||||
console.log(77)
|
||||
let tempUrl = res.attribute.app.interfaceAddress ? res.attribute.app.interfaceAddress : ""
|
||||
if (flag) {
|
||||
console.log(tempUrl, 'tempUrl')
|
||||
this.authMethod = res.attribute.api.requestMethod == 1 ? 'post' : 'get';
|
||||
this.authInterfaceAddress = tempUrl + res.attribute.api.destinationAddress;
|
||||
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 bodyObj
|
||||
let queryObj = {}
|
||||
|
|
@ -343,7 +351,8 @@ export default {
|
|||
this.$set(this.authInfo, 'query', deepClone(queryObj))
|
||||
this.$set(this.authInfo, 'body', deepClone(bodyObj))
|
||||
} 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 bodyObj
|
||||
let queryObj = {}
|
||||
|
|
@ -362,19 +371,26 @@ export default {
|
|||
this.interfaceAddress = tempUrl + address;
|
||||
this.headerDisposeHandle(headerObj, this.headersTableInfo)
|
||||
this.queryDisposeHandle(queryObj, this.queryTableInfo)
|
||||
if (this.bodyEntTableInfo.length) {
|
||||
if (!bodyFlag) {
|
||||
this.bodyDisposeHandle(bodyObj, this.bodyEntTableInfo[0].children)
|
||||
} else {
|
||||
this.bodyDisposeHandle(bodyObj[0], this.bodyEntTableInfo[0].children)
|
||||
}
|
||||
} else {
|
||||
bodyObj = {}
|
||||
}
|
||||
|
||||
this.$set(this.resultInfo, 'headers', deepClone(headerObj))
|
||||
this.$set(this.resultInfo, 'query', deepClone(queryObj))
|
||||
this.$set(this.resultInfo, 'body', deepClone(bodyObj))
|
||||
console.log(33)
|
||||
}
|
||||
|
||||
},
|
||||
headerDisposeHandle(header, arr) {
|
||||
arr.forEach(item => {
|
||||
console.log(item, 'item3')
|
||||
if (item.parameterType === "authport") {
|
||||
header[item.parameterName] = "";
|
||||
} else {
|
||||
|
|
@ -441,6 +457,8 @@ export default {
|
|||
// });
|
||||
// },
|
||||
jsonParseHandle(parameterType, example, concreteType = false) {
|
||||
|
||||
console.log(parameterType, 'parameterType1')
|
||||
let parameterTypeDist = {
|
||||
authport: "",
|
||||
fundamentallist: [example],
|
||||
|
|
@ -458,6 +476,7 @@ export default {
|
|||
},
|
||||
bodyDisposeHandle(obj, arr) {
|
||||
arr.forEach((item) => {
|
||||
console.log(item, 'item2')
|
||||
const {parameterName, concreteType, parameterType, example, children} = item;
|
||||
if (parameterName && concreteType) {
|
||||
if (!["Object", "ObjectCom", "Map"].includes(concreteType)) {
|
||||
|
|
|
|||
|
|
@ -7,63 +7,70 @@ const tableColumnData = [
|
|||
{
|
||||
label: '发送者应用',
|
||||
prop: 'sendAppName',
|
||||
tooltip: true,
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
label: '源数据',
|
||||
prop: 'sourceData',
|
||||
tooltip: true,
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
label: '目标数据',
|
||||
prop: 'targetData',
|
||||
tooltip: true,
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'status',
|
||||
tooltip: true,
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
label: '错误状态',
|
||||
prop: 'errorStatus',
|
||||
tooltip: true,
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
label: '返回信息',
|
||||
prop: 'returnData',
|
||||
tooltip: true,
|
||||
}, {
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
tooltip: true,
|
||||
},
|
||||
]
|
||||
const tableVersionColumn = [
|
||||
{
|
||||
label: '接收者名称',
|
||||
prop: 'receiveName',
|
||||
},
|
||||
{
|
||||
label: '接收者编码',
|
||||
prop: 'receiveCode',
|
||||
},
|
||||
{
|
||||
label: '接收者应用',
|
||||
prop: 'receiveApp',
|
||||
},
|
||||
{
|
||||
label: '接收者',
|
||||
prop: 'receiveApi',
|
||||
},
|
||||
{
|
||||
label: '数据类型',
|
||||
prop: 'dataType',
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
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,
|
||||
options: [],
|
||||
optionValue: 'id',
|
||||
optionLabel: 'name',
|
||||
optionLabel: 'name'
|
||||
}, {
|
||||
label: '发送者',
|
||||
prop: 'sendApi',
|
||||
|
|
@ -93,7 +100,7 @@ const formRow = [
|
|||
disabled: true,
|
||||
options: [],
|
||||
optionValue: 'id',
|
||||
optionLabel: 'apiName',
|
||||
optionLabel: 'apiName'
|
||||
}]
|
||||
},
|
||||
{
|
||||
|
|
@ -104,7 +111,7 @@ const formRow = [
|
|||
disabled: true,
|
||||
options: [],
|
||||
optionValue: 'id',
|
||||
optionLabel: 'name',
|
||||
optionLabel: 'name'
|
||||
}, {
|
||||
label: '接收者',
|
||||
prop: 'receiveApi',
|
||||
|
|
@ -112,7 +119,7 @@ const formRow = [
|
|||
disabled: true,
|
||||
options: [],
|
||||
optionValue: 'id',
|
||||
optionLabel: 'apiName',
|
||||
optionLabel: 'apiName'
|
||||
}]
|
||||
},
|
||||
{
|
||||
|
|
@ -120,8 +127,8 @@ const formRow = [
|
|||
label: '源数据',
|
||||
prop: 'sourceData',
|
||||
tag: 'elSlot',
|
||||
slotName: "sourceData",
|
||||
span: 24,
|
||||
slotName: 'sourceData',
|
||||
span: 24
|
||||
}]
|
||||
},
|
||||
{
|
||||
|
|
@ -129,8 +136,8 @@ const formRow = [
|
|||
label: '目标数据',
|
||||
prop: 'targetData',
|
||||
tag: 'elSlot',
|
||||
slotName: "targetData",
|
||||
span: 24,
|
||||
slotName: 'targetData',
|
||||
span: 24
|
||||
}]
|
||||
},
|
||||
{
|
||||
|
|
@ -141,12 +148,12 @@ const formRow = [
|
|||
disabled: true,
|
||||
span: 24,
|
||||
options: [
|
||||
{value: "1", label: "待发送"},
|
||||
{value: "2", label: "发送中"},
|
||||
{value: "3", label: "发送成功"},
|
||||
{value: "4", label: "发送失败"},
|
||||
],
|
||||
},]
|
||||
{ value: '1', label: '待发送' },
|
||||
{ value: '2', label: '发送中' },
|
||||
{ value: '3', label: '发送成功' },
|
||||
{ value: '4', label: '发送失败' }
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
elCol: [{
|
||||
|
|
@ -156,10 +163,10 @@ const formRow = [
|
|||
disabled: true,
|
||||
span: 24,
|
||||
options: [
|
||||
{value: "1", label: "需要重新发送"},
|
||||
{value: "2", label: "不需要重新发送"},
|
||||
],
|
||||
},]
|
||||
{ value: '1', label: '需要重新发送' },
|
||||
{ value: '2', label: '不需要重新发送' }
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
elCol: [{
|
||||
|
|
@ -168,9 +175,9 @@ const formRow = [
|
|||
tag: 'elInput',
|
||||
type: 'textarea',
|
||||
disabled: true,
|
||||
span: 24,
|
||||
span: 24
|
||||
}]
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
const basicsRules = {
|
||||
|
|
@ -183,7 +190,7 @@ const basicsRules = {
|
|||
required: true,
|
||||
message: '请输入目标数据',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
}]
|
||||
}
|
||||
|
||||
// 查看
|
||||
|
|
@ -196,8 +203,8 @@ const formRowShow = [
|
|||
disabled: true,
|
||||
options: [],
|
||||
optionValue: 'id',
|
||||
optionLabel: 'name',
|
||||
},]
|
||||
optionLabel: 'name'
|
||||
}]
|
||||
},
|
||||
{
|
||||
elCol: [{
|
||||
|
|
@ -206,7 +213,7 @@ const formRowShow = [
|
|||
tag: 'elInput',
|
||||
disabled: true,
|
||||
type: 'textarea',
|
||||
span: 24,
|
||||
span: 24
|
||||
}]
|
||||
},
|
||||
{
|
||||
|
|
@ -216,7 +223,7 @@ const formRowShow = [
|
|||
tag: 'elInput',
|
||||
disabled: true,
|
||||
type: 'textarea',
|
||||
span: 24,
|
||||
span: 24
|
||||
}]
|
||||
},
|
||||
{
|
||||
|
|
@ -227,12 +234,12 @@ const formRowShow = [
|
|||
disabled: true,
|
||||
span: 24,
|
||||
options: [
|
||||
{value: "1", label: "待发送"},
|
||||
{value: "2", label: "发送中"},
|
||||
{value: "3", label: "发送成功"},
|
||||
{value: "4", label: "发送失败"},
|
||||
],
|
||||
},]
|
||||
{ value: '1', label: '待发送' },
|
||||
{ value: '2', label: '发送中' },
|
||||
{ value: '3', label: '发送成功' },
|
||||
{ value: '4', label: '发送失败' }
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
elCol: [{
|
||||
|
|
@ -242,10 +249,10 @@ const formRowShow = [
|
|||
disabled: true,
|
||||
span: 24,
|
||||
options: [
|
||||
{value: "1", label: "需要重新发送"},
|
||||
{value: "2", label: "不需要重新发送"},
|
||||
],
|
||||
},]
|
||||
{ value: '1', label: '需要重新发送' },
|
||||
{ value: '2', label: '不需要重新发送' }
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
elCol: [{
|
||||
|
|
@ -254,9 +261,9 @@ const formRowShow = [
|
|||
tag: 'elInput',
|
||||
type: 'textarea',
|
||||
disabled: true,
|
||||
span: 24,
|
||||
span: 24
|
||||
}]
|
||||
},
|
||||
}
|
||||
]
|
||||
export default {
|
||||
tableColumnData,
|
||||
|
|
|
|||
|
|
@ -2,12 +2,15 @@
|
|||
<div>
|
||||
<base-layout
|
||||
ref="baseLayout"
|
||||
:showTitle="false"
|
||||
:searchShow="false"
|
||||
@onFuncBtn="onFuncBtn"
|
||||
:querySwitch="true"
|
||||
:searchList="requirementList"
|
||||
@search="handleSearchEvent"
|
||||
:isPage="true"
|
||||
@pageChange="handlePageChange"
|
||||
@onElSelect="onElSelect"
|
||||
:bodyHight="''"
|
||||
>
|
||||
<div slot="main" slot-scope="{ tableHeight }">
|
||||
|
|
@ -18,7 +21,7 @@
|
|||
:funData="funData"
|
||||
@onFunc="onFunc"
|
||||
:tabLoading.sync="tabLoading"
|
||||
:tableHeight="'50vh'"
|
||||
:tableHeight="'40vh'"
|
||||
:tableData="tableData"
|
||||
:tableColumn="tableColumnData"
|
||||
>
|
||||
|
|
@ -83,13 +86,21 @@ export default {
|
|||
optionValue: "id",
|
||||
optionLabel: "name",
|
||||
},
|
||||
{
|
||||
placeholder: "开始日期",
|
||||
prop: "createTimeStart",
|
||||
tag: "elDatePicker",
|
||||
},
|
||||
{
|
||||
placeholder: "结束日期",
|
||||
prop: "createTimeEnd",
|
||||
tag: "elDatePicker",
|
||||
},
|
||||
{
|
||||
placeholder: "状态",
|
||||
prop: "status",
|
||||
tag: "elSelect",
|
||||
options: [
|
||||
{id: "1", label: "待发送"},
|
||||
{id: "2", label: "发送中"},
|
||||
{id: "3", label: "发送成功"},
|
||||
{id: "4", label: "发送失败"},
|
||||
],
|
||||
|
|
@ -100,6 +111,21 @@ export default {
|
|||
optionValue: "id",
|
||||
optionLabel: "label",
|
||||
},
|
||||
{
|
||||
placeholder: "源数据",
|
||||
prop: "sourceData",
|
||||
tag: "elInput",
|
||||
},
|
||||
{
|
||||
placeholder: "目标数据",
|
||||
prop: "targetData",
|
||||
tag: "elInput",
|
||||
},
|
||||
{
|
||||
placeholder: "返回信息",
|
||||
prop: "returnData",
|
||||
tag: "elInput",
|
||||
},
|
||||
], //查询模板list
|
||||
tabLoading: false,
|
||||
tableColumnData: configData.tableColumnData, //表头数据
|
||||
|
|
@ -112,7 +138,7 @@ export default {
|
|||
tableData: [], //表格数据
|
||||
pageModel: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
pageSize: 100,
|
||||
},
|
||||
queryModel: {
|
||||
theme: "",
|
||||
|
|
@ -121,27 +147,46 @@ export default {
|
|||
receiveApp: "",
|
||||
receiveApi: "",
|
||||
status: "",
|
||||
targetData: '',
|
||||
sourceData: '',
|
||||
returnData: ''
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.GetMessageLogTableData();
|
||||
// this.GetMessageLogTableData();
|
||||
this.initSelect()
|
||||
},
|
||||
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() {
|
||||
this.tabLoading = true;
|
||||
let param = {
|
||||
...this.pageModel,
|
||||
...this.queryModel,
|
||||
receiveApp: this.$route.query.id,
|
||||
receiveApi: this.receiveApi
|
||||
};
|
||||
let res = await authApi(
|
||||
"sysApplicationService",
|
||||
"application",
|
||||
"queryAppApiLog",
|
||||
"thirdInterfacequeryAppApiLog",
|
||||
"",
|
||||
param
|
||||
);
|
||||
|
|
@ -218,24 +263,40 @@ export default {
|
|||
// 搜索
|
||||
handleSearchEvent(form) {
|
||||
let data = this.$refs.baseLayout.ruleForm;
|
||||
this.queryModel.theme = data.theme;
|
||||
this.queryModel.sendApp = data.sendApp;
|
||||
this.queryModel.sendApi = data.sendApi;
|
||||
this.queryModel.receiveApp = data.receiveApp;
|
||||
this.queryModel.receiveApi = data.receiveApi;
|
||||
this.queryModel.status = data.status;
|
||||
data.receiveApp = this.$route.query.id;
|
||||
data.receiveApi = this.receiveApi;
|
||||
this.queryModel = {...data}
|
||||
// if (!data.sendApp) {
|
||||
// this.$vmNews("请选择发送者应用")
|
||||
// return
|
||||
// }
|
||||
// if (!data.receiveApp) {
|
||||
// this.$vmNews("请选择接受者应用")
|
||||
// return
|
||||
// }
|
||||
// if (!data.receiveApi) {
|
||||
// this.$vmNews("请选择接受者api")
|
||||
// return
|
||||
// }
|
||||
if (!data.status) {
|
||||
this.$vmNews("请选择状态")
|
||||
return
|
||||
}
|
||||
|
||||
this.resetTable();
|
||||
},
|
||||
async initSelect() {
|
||||
const res = await getApiModuleApi({
|
||||
tl: "sysApplicationService",
|
||||
as: "application",
|
||||
dj: "queryApp"
|
||||
dj: "thirdInterfacequeryApp"
|
||||
}, {
|
||||
"pageNum": 1,
|
||||
"pageSize": 999
|
||||
})
|
||||
console.log(res, 'res')
|
||||
this.requirementList[0].options = res.attribute.list
|
||||
this.requirementList[1].options = res.attribute.list
|
||||
},
|
||||
// async onElSelect(val, b, c, d, row) {
|
||||
// if (row.prop === 'sendApp') {
|
||||
|
|
@ -258,9 +319,12 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.clickTitle {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
::v-deep .el-dialog__body{
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export default {
|
|||
methods: {
|
||||
openDialog(type, row) {
|
||||
this.querysysAppService();
|
||||
this.querysysAppApiService();
|
||||
// this.querysysAppApiService();
|
||||
this.formRow = configData.formRow;
|
||||
this.submitShow = true;
|
||||
// 编辑
|
||||
|
|
@ -108,7 +108,7 @@ export default {
|
|||
let res = await authApi(
|
||||
"sysMessageManageLogService",
|
||||
"messageManage",
|
||||
"queryEntity",
|
||||
"thirdInterfacequeryEntity",
|
||||
"",
|
||||
params
|
||||
);
|
||||
|
|
@ -201,7 +201,7 @@ export default {
|
|||
const res = await getApiModuleApi({
|
||||
tl: "sysApplicationService",
|
||||
as: "application",
|
||||
dj: "queryApp"
|
||||
dj: "thirdInterfacequeryApp"
|
||||
}, {
|
||||
"pageNum": 1,
|
||||
"pageSize": 999
|
||||
|
|
|
|||
|
|
@ -1,99 +1,493 @@
|
|||
<template>
|
||||
<div class="app-container home">
|
||||
<div class="dashboard-editor-container">
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData" />
|
||||
</el-row>
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart />
|
||||
<div class="home">
|
||||
<!--上面块运行情况-->
|
||||
<div class="operationInfo">
|
||||
<!-- 异常日志-->
|
||||
<div class="errLogs">
|
||||
<div class="title">异常日志</div>
|
||||
<div class="errorInfo">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/index_v2_error.png"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart />
|
||||
<div class="num">{{ errorNum }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
<!-- 轮播图-->
|
||||
<div class="swiper">
|
||||
<el-carousel height="150px" arrow="never" :loop="true">
|
||||
<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>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 = {
|
||||
newVisitis: {
|
||||
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]
|
||||
}
|
||||
}
|
||||
import request from "@/utils/request";
|
||||
import {authApi} from "@/api/apis/auth";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart
|
||||
},
|
||||
components: {},
|
||||
data() {
|
||||
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() {
|
||||
|
||||
this.init()
|
||||
},
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: #FBFBFB;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
.home {
|
||||
//background: url(~@/assets/images/index_v2_bgc.png) no-repeat;
|
||||
padding: 1vh .5vw 1vh;
|
||||
background-color: #fcfcfc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//上半部分
|
||||
.operationInfo {
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
//异常日志
|
||||
.errLogs {
|
||||
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%;
|
||||
|
||||
|
||||
> .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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue