Skip to content

B
bigDataSystem
Commit 73a8da4f authored by liangjingpeng's avatar liangjingpeng
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 1a9f0aaa 21272514
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2373 additions and 16 deletions
src/router/routes/index.ts
View file @ 73a8da4f
...@@ -733,6 +733,42 @@ export const serviceDevelopmentRoute: AppRouteRecordRaw = { ...@@ -733,6 +733,42 @@ export const serviceDevelopmentRoute: AppRouteRecordRaw = {
icon: '', icon: '',
}, },
}, },
{
path: 'serviceDevelopment/trusteeshipApiTest',
name: 'trusteeshipApiTest',
component: () => import('@/views/dataService/serviceDevelopment/trusteeshipApiTest.vue'),
meta: {
title: 'API测试',
icon: '',
},
},
{
path: 'serviceDevelopment/trusteeshipApiTestResult',
name: 'trusteeshipApiTestResult',
component: () => import('@/views/dataService/serviceDevelopment/trusteeshipApiTestResult.vue'),
meta: {
title: '测试结果',
icon: '',
},
},
{
path: 'serviceMonitor/useLog',
name: 'useLog',
component: () => import('@/views/dataService/serviceMonitor/logMangae.vue'),
meta: {
title: '日志管理',
icon: '',
},
},
{
path: 'serviceDevelopment/apiDetail',
name: 'apiDetail',
component: () => import('@/views/dataService/serviceDevelopment/apiDetail.vue'),
meta: {
title: 'API详情',
icon: '',
},
},
], ],
}; };
......
src/views/dataService/Overview/index.vue 0 → 100644
View file @ 73a8da4f
<template>
<PageWrapper>
</PageWrapper>
</template>
<script lang="ts" setup>
import PageWrapper from "@/components/Page/src/PageWrapper.vue";
</script>
<style scoped>
</style>
src/views/dataService/serviceDevelopment/ApiTree.vue
View file @ 73a8da4f
...@@ -11,8 +11,6 @@ ...@@ -11,8 +11,6 @@
:treeData="treeData" :treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'apiName' }" :fieldNames="{ key: 'businessId', title: 'apiName' }"
@select="handleSelect" @select="handleSelect"
:beforeRightClick="getRightMenuList"
:actionList="actionList"
/> />
</div> </div>
<!-- 移动 弹窗--> <!-- 移动 弹窗-->
......
src/views/dataService/serviceDevelopment/DataPreviewDrawer.vue 0 → 100644
View file @ 73a8da4f
<template>
<BasicDrawer
v-bind="$attrs"
@register="registerDrawer"
showFooter
:title="getTitle"
width="50%"
@ok="handleSubmit"
>
<BasicTable @register="registerTable1" />
<div style="display: flex;justify-content: center;margin-top: 20px;margin-bottom: 20px">
<a-button type="primary" @click="testButton" style="width: 100px">测试</a-button>
</div>
<div style="font-weight: bold;font-size: 16px;margin-bottom: 10px">返回参数</div>
<div style="display: flex;width: 100%">
<div style="width: 40%;border: 1px solid #ccc;">
<List :pagination="pagination">
<template v-for="item in executionList1" :key="item.id">
<List.Item @click="clickButton(item)" :class="{ 'listItemClass': selectedItem === item }">
<List.Item.Meta style="display: flex !important; align-items: center !important">
<template #avatar>
<Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
</template>
<template #title>
<span v-if="item.title.includes('执行')" style="font-weight: bold;height: 20px">{{ item.title }}</span>
<span v-else>{{ item.title }}</span>
</template>
<template #description>
<div class="info">
<div v-if="item.time">{{ item.time }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
{{ item.result }}</div>
</div>
</template>
</List.Item.Meta>
</List.Item>
</template>
</List>
</div>
<div style="width: 60%;border: 1px solid #ccc;">
<div v-if="show === 2 && test === 'success'">
<BasicTable @register="registerTable2" class="tableClass"/>
</div>
<div v-else-if="show === 5 && test === 'success'">
<BasicTable @register="registerTable3" class="tableClass"/>
</div>
<div v-else>
<BasicTable @register="registerTable4" class="tableClass"/>
</div>
</div>
</div>
</BasicDrawer>
</template>
<script lang="ts" setup>
import {h, nextTick, onMounted, ref, unref} from 'vue';
import { BasicForm, useForm } from '@/components/Form';
import { guideModeTableColumns7,guideModeTableColumns8 } from './api.data';
import { guideModelTableData7,guideModelTableData8,guideModelTableData9,guideModelTableData10 } from './apiData'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import {BasicTree, ContextMenuItem, TreeActionType, TreeItem} from '@/components/Tree';
import {useMessage} from "@/hooks/web/useMessage";
import { List } from 'ant-design-vue';
import { cardList1,cardList2 } from './apiData';
import Icon from '@/components/Icon/Icon.vue';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { useTable } from '@/components/Table';
const selectedItem = ref('')
const show = ref('')
const test = ref('')
const executionList1 = ref(cardList1);
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const treeRef = ref<Nullable<TreeActionType>>(null);
const isUpdate = ref(true);
const roleId = ref('');
const getTitle = ref('数据预览');
const treeData = ref<TreeItem[]>([]);
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
setDrawerProps({ confirmLoading: false,showCancelBtn: false,showOkBtn:false });
});
const [registerTable1] = useTable({
api: async () => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: guideModelTableData7.length,
code: '',
message: '',
data: guideModelTableData7,
};
return { ...response };
},
rowKey: 'key',
columns:guideModeTableColumns7,
pagination:false,
showIndexColumn: false,
showTableSetting: false,
scroll: { y: 300 },
});
const [registerTable2] = useTable({
api: async () => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: guideModelTableData9.length,
code: '',
message: '',
data: guideModelTableData9,
};
return { ...response };
},
rowKey: 'key',
columns:guideModeTableColumns8,
pagination:true,
showIndexColumn: false,
showTableSetting: false,
scroll: { y: 300 },
});
const [registerTable3] = useTable({
api: async () => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: guideModelTableData8.length,
code: '',
message: '',
data: guideModelTableData8,
};
return { ...response };
},
rowKey: 'key',
columns:guideModeTableColumns8,
pagination:true,
showIndexColumn: false,
showTableSetting: false,
scroll: { y: 300 },
});
const [registerTable4] = useTable({
api: async () => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: guideModelTableData10.length,
code: '',
message: '',
data: guideModelTableData10,
};
return { ...response };
},
rowKey: 'key',
columns:guideModeTableColumns8,
pagination:true,
showIndexColumn: false,
showTableSetting: false,
scroll: { y: 300 },
});
async function handleSubmit() {
}
/**测试*/
function testButton() {
createMessage.success('测试成功');
test.value = 'success'
executionList1.value = cardList2
console.log(executionList1.value)
}
/**点击事件*/
function clickButton(item) {
show.value = item.id
selectedItem.value = item; // 更新选中的项
}
</script>
<style lang="scss" scoped>
.icon {
font-size: 30px !important;
}
.tableClass{
::v-deep(.ant-table){
height: 300px;
}
}
.listItemClass{
background-color: #badeee;
}
</style>
src/views/dataService/serviceDevelopment/MetadataPreviewDrawer.vue 0 → 100644
View file @ 73a8da4f
<template>
<BasicDrawer
v-bind="$attrs"
@register="registerDrawer"
showFooter
:title="getTitle"
width="50%"
@ok="handleSubmit"
>
<BasicTree
ref="treeRef"
toolbar
search
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="false"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'apiName' }"
@select="handleSelect"
:beforeRightClick="getRightMenuList"
:actionList="actionList"
/>
<List :pagination="pagination">
<template v-for="item in executionList" :key="item.id">
<List.Item class="list">
<List.Item.Meta style="display: flex !important; align-items: center !important">
<template #avatar>
<Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
</template>
<template #title>
<span>{{ item.executionDate }}</span>
</template>
<template #description>
<div class="info">
<div>{{ item.sensitiveState }}</div>
</div>
</template>
</List.Item.Meta>
</List.Item>
</template>
</List>
</BasicDrawer>
</template>
<script lang="ts" setup>
import {h, nextTick, onMounted, ref, unref} from 'vue';
import { BasicForm, useForm } from '@/components/Form';
import { } from './api.data';
import { metadataTreeData } from './apiData'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import {BasicTree, ContextMenuItem, TreeActionType, TreeItem} from '@/components/Tree';
import {useMessage} from "@/hooks/web/useMessage";
import { List } from 'ant-design-vue';
import { cardList1 } from './apiData';
import Icon from '@/components/Icon/Icon.vue';
const executionList = ref(cardList1);
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const treeRef = ref<Nullable<TreeActionType>>(null);
const isUpdate = ref(true);
const roleId = ref('');
const getTitle = ref('元数据预览');
const treeData = ref<TreeItem[]>([]);
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
setDrawerProps({ confirmLoading: false });
treeData.value = handleTree(metadataTreeData, 'businessId',undefined,undefined,undefined)
await nextTick(() => {
getTree().expandAll(true)
})
});
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
async function handleSubmit() {
}
/** 转成树 */
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
</script>
src/views/dataService/serviceDevelopment/VersionModal.vue
View file @ 73a8da4f
...@@ -123,7 +123,7 @@ function returnButton() { ...@@ -123,7 +123,7 @@ function returnButton() {
function detailButton(record) { function detailButton(record) {
closeModal(); closeModal();
router.push({ router.push({
path: '/serviceDevelopment/detailApi', path: '/dataService/serviceDevelopment/apiDetail',
query: { query: {
businessId:route.query.businessId, businessId:route.query.businessId,
}, },
......
src/views/dataService/serviceDevelopment/apiContrast.vue
View file @ 73a8da4f
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<div style="font-size: 15px;padding-left: 10px;padding-left: 50px"> <div style="font-size: 15px;padding-left: 10px;padding-left: 50px">
<div> <div>
版本<Select 版本<Select
v-model:value="optionValue" v-model:value="optionValue1"
show-search show-search
placeholder="请选择版本" placeholder="请选择版本"
style="width: 200px;margin-left: 10px" style="width: 200px;margin-left: 10px"
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<div style="font-size: 15px;padding-left: 10px;padding-left: 50px"> <div style="font-size: 15px;padding-left: 10px;padding-left: 50px">
<div> <div>
版本<Select 版本<Select
v-model:value="optionValue" v-model:value="optionValue2"
show-search show-search
placeholder="请选择版本" placeholder="请选择版本"
style="width: 200px;margin-left: 10px" style="width: 200px;margin-left: 10px"
...@@ -86,7 +86,8 @@ ...@@ -86,7 +86,8 @@
defineOptions({ name: 'Metadata' }); defineOptions({ name: 'Metadata' });
const route = useRoute(); const route = useRoute();
const optionValue = ref('') const optionValue1= ref('')
const optionValue2 = ref('')
const startContrastFlag = ref(false) const startContrastFlag = ref(false)
const title = ref('员工薪资查询-向导模式') const title = ref('员工薪资查询-向导模式')
const options = ref<any>([ const options = ref<any>([
...@@ -94,6 +95,7 @@ ...@@ -94,6 +95,7 @@
{ value: 'V2', label: 'V2 2022-10-25 14:52:50' }, { value: 'V2', label: 'V2 2022-10-25 14:52:50' },
{ value: 'V3', label: 'V3 2022-10-25 14:52:50' }, { value: 'V3', label: 'V3 2022-10-25 14:52:50' },
]); ]);
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({ const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100, labelWidth: 100,
...@@ -260,6 +262,7 @@ ...@@ -260,6 +262,7 @@
} }
onMounted(() => { onMounted(() => {
optionValue.value = 'V3' optionValue1.value = 'V3'
optionValue2.value = 'V1'
}); });
</script> </script>
src/views/dataService/serviceDevelopment/apiData.ts
View file @ 73a8da4f
...@@ -219,6 +219,74 @@ export const guideModelTableData6: any[] = [ ...@@ -219,6 +219,74 @@ export const guideModelTableData6: any[] = [
parameterType: 'timestamp', parameterType: 'timestamp',
comment: '', comment: '',
}, },
];
/**向导模式 列表 数据7*/
export const guideModelTableData7: any[] = [
{
param1: 'birthday',
param2: 'birthday',
param3: '_01 set birthday=#{birthday},name=#{name}where id=#{id}',
param4: 'String',
param5: '-',
param6: '否',
param7: '2023-09-27',
},
{
param1: 'name',
param2: 'name',
param3: '_01 set birthday=#{birthday},name=#{name}where id=#{id}',
param4: 'String',
param5: '-',
param6: '否',
param7: 'yi-update',
},
{
param1: 'id',
param2: 'id',
param3: '_01 set birthday=#{birthday},name=#{name}where id=#{id}',
param4: 'Number',
param5: '-',
param6: '否',
param7: '10',
},
{
param1: 'id',
param2: 'id',
param3: '_01 set birthday=#{birthday},name=#{name}where id=#{id}',
param4: 'Number',
param5: '-',
param6: '否',
param7: '1000',
},
];
/**向导模式 列表 数据8*/
export const guideModelTableData8: any[] = [
{
value: 'sdfs',
},
{
value: 'yi-update',
},
{
value: 'yi1',
},
{
value: 'yi2',
},
{
value: 'yi3',
},
];
/**向导模式 列表 数据9*/
export const guideModelTableData9: any[] = [
{
value: 'sdfs',
},
];
/**向导模式 列表 数据10*/
export const guideModelTableData10: any[] = [
]; ];
/**版本管理列表 数据*/ /**版本管理列表 数据*/
export const versionData: any[] = [ export const versionData: any[] = [
...@@ -353,6 +421,87 @@ export const step1TableData4: any[] = [ ...@@ -353,6 +421,87 @@ export const step1TableData4: any[] = [
returnRecordCount:'-' returnRecordCount:'-'
}, },
];
/**元数据树/列表 数据*/
export const metadataTreeData: any[] = [
{
"businessId": 101,
"apiName": "@!&test@&",
"anotherName": "@!&test@&",
"parentId": 0,
icon: "material-symbols:database-outline",
},
{
"businessId": 102,
"apiName": "@!&data@&!",
"anotherName": "@!&data@&!",
"parentId": 0,
icon: "material-symbols:database-outline",
},
{
"businessId": 103,
"apiName": "@sxf_db",
"anotherName": "@sxf_db",
"parentId": 0,
icon: "material-symbols:database-outline",
},
{
"businessId": 104,
"apiName": "bc_test",
"anotherName": "bc_test",
"parentId": 0,
icon: "material-symbols:database-outline",
},
{
"businessId": 105,
"apiName": "yi_test",
"anotherName": "yi_test",
"parentId": 0,
icon: "material-symbols:database-outline",
},
{
"businessId": 201,
"apiName": "demo",
"anotherName": "demo",
"parentId": 101,
icon:'uiw:table'
},
{
"businessId": 202,
"apiName": "demo",
"anotherName": "demo",
"parentId": 102,
icon:'uiw:table'
},
{
"businessId": 203,
"apiName": "demo",
"anotherName": "demo",
"parentId": 103,
icon:'uiw:table'
},
{
"businessId": 204,
"apiName": "demo",
"anotherName": "demo",
"parentId": 104,
icon:'uiw:table'
},
{
"businessId": 205,
"apiName": "yi_test",
"anotherName": "yi_table_01",
"parentId": 105,
icon:'uiw:table'
},
{
"businessId": 206,
"apiName": "yi_test",
"anotherName": "yi_table_02",
"parentId": 105,
icon:'uiw:table'
},
]; ];
/**SQL模式-步骤2 列表数据1*/ /**SQL模式-步骤2 列表数据1*/
export const step2TableData1: any[] = [ export const step2TableData1: any[] = [
...@@ -712,8 +861,140 @@ export const trusteeshipTableData4: any[] = [ ...@@ -712,8 +861,140 @@ export const trusteeshipTableData4: any[] = [
}, },
]; ];
/**托管模式 列表数据5*/
export const trusteeshipTableData5: any[] = [
{
parameterCode:'size',
parameterLocation:'Body',
Xpath:'^.size',
dataType:'String',
comment:'size',
isNeed:'否',
parameterValue:'size',
},
{
parameterCode:'sortRules',
parameterLocation:'Body',
Xpath:'^.sortRules[]',
dataType:'String',
comment:'sortRules',
isNeed:'否',
parameterValue:'sortRules',
},
{
parameterCode:'category',
parameterLocation:'Body',
Xpath:'^.category',
dataType:'String',
comment:'category',
isNeed:'否',
parameterValue:'category',
},
{
parameterCode:'filterRules',
parameterLocation:'Body',
Xpath:'^.filterRules[]',
dataType:'String',
comment:'filterRules',
isNeed:'否',
parameterValue:'filterRules',
},
{
parameterCode:'page',
parameterLocation:'Body',
Xpath:'^.page',
dataType:'String',
comment:'page',
isNeed:'否',
parameterValue:'page',
},
{
parameterCode:'childrenRequest',
parameterLocation:'Body',
Xpath:'^.childrenRequest',
dataType:'String',
comment:'childrenRequest',
isNeed:'否',
parameterValue:'childrenRequest',
},
];
export const cardList1:any[] = [
{
id: 1,
title: '执行(0/4)',
},
{
id: 2,
time: '13:57:33 2毫秒',
result:'1行结果',
title: 'Insert into yi_test.yi_table_01(id,na...',
icon: 'ant-design:check-circle-outlined',
color: '#e2dfe0',
},
{
id: 3,
time: '13:57:33 2毫秒',
result:'0行结果',
title: 'SELECT name,birthday,sum(weig...',
icon: 'ant-design:check-circle-outlined',
color: '#e2dfe0',
},
{
id: 4,
time: '13:57:33 2毫秒',
title: 'update yl_test.yl_table_01 set birth...',
result:'0行结果',
icon: 'ant-design:check-circle-outlined',
color: '#e2dfe0',
},
{
id: 5,
time: '13:57:33 2毫秒',
result:'5行结果',
title: 'SELECT * FROM(SELECT a.name AS...',
icon: 'ant-design:check-circle-outlined',
color: '#e2dfe0',
},
]
export const cardList2:any[] = [
{
id: 1,
title: '执行(4/4)',
},
{
id: 2,
time: '13:57:33 2毫秒',
result:'1行结果',
title: 'Insert into yi_test.yi_table_01(id,na...',
icon: 'ant-design:check-circle-outlined',
color: '#2f9d59',
},
{
id: 3,
time: '13:57:33 2毫秒',
result:'0行结果',
title: 'SELECT name,birthday,sum(weig...',
icon: 'ant-design:check-circle-outlined',
color: '#2f9d59',
},
{
id: 4,
time: '13:57:33 2毫秒',
title: 'update yl_test.yl_table_01 set birth...',
result:'0行结果',
icon: 'ant-design:check-circle-outlined',
color: '#2f9d59',
},
{
id: 5,
time: '13:57:33 2毫秒',
result:'5行结果',
title: 'SELECT * FROM(SELECT a.name AS...',
icon: 'ant-design:check-circle-outlined',
color: '#2f9d59',
},
]
/**对比左侧列表 数据1*/ /**对比左侧列表 数据1*/
......
src/views/dataService/serviceDevelopment/apiDetail.vue 0 → 100644
View file @ 73a8da4f
<template>
<PageWrapper title="版本管理" contentFullHeight contentBackground contentClass="flex">
<div>
<div style="display: flex;justify-content: space-between; align-items: center;margin-bottom: 10px;margin-left: 12px">
<div style="margin-top: 10px;display: flex;font-weight: bold;font-size: 20px;margin-left: 10px">
<Icon icon="ion:layers-outline" :size="25" :color="'#1091FE'" />
{{title}}
<div style="font-size: 15px;padding-left: 10px;padding-left: 50px">
<div>
版本<Select
v-model:value="optionValue1"
show-search
placeholder="请选择版本"
style="width: 200px;margin-left: 10px"
:options="options"
@change="handleChange"
></Select>
</div>
</div>
</div>
</div>
<Divider />
<div>
<BasicForm @register="registerForm" />
</div>
<Divider />
<div>
<BasicTable @register="registerTable1"/>
<BasicTable @register="registerTable2"/>
<BasicTable @register="registerTable3"/>
</div>
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import {
addValueSearchSchema,
contrastSchema,
contrastTableColumns1,
contrastTableColumns2,
contrastTableColumns3,
resetNameFormSchema
} from './api.data';
import { leftContrastTableData1,leftContrastTableData2,leftContrastTableData3,rightContrastTableData1,rightContrastTableData2,rightContrastTableData3} from './apiData';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicForm, useForm } from '@/components/Form';
import {onMounted,ref} from "vue";
import { Select } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import {router} from "@/router";
import { useRoute,onBeforeRouteLeave } from 'vue-router';
import { Divider } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
defineOptions({ name: 'Metadata' });
const route = useRoute();
const optionValue1= ref('')
const optionValue2 = ref('')
const startContrastFlag = ref(false)
const title = ref('员工薪资查询-向导模式')
const options = ref<any>([
{ value: 'V1', label: 'V1 2022-10-25 14:52:50' },
{ value: 'V2', label: 'V2 2022-10-25 14:52:50' },
{ value: 'V3', label: 'V3 2022-10-25 14:52:50' },
]);
const { createMessage } = useMessage();
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: contrastSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerTable1] = useTable({
title: '请求参数',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: leftContrastTableData1.length,
code:'',
message:'',
data: [],
};
//过滤data中的数据，取出等于params.deptId的数据
return { ...response,data: leftContrastTableData1 };
},
columns:contrastTableColumns1,
useSearchForm: false,
showTableSetting: false,
showIndexColumn:false,
pagination:false,
bordered: true,
scroll: { y: 300 },
});
const [registerTable2] = useTable({
title: '分页参数',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: rightContrastTableData2.length,
code:'',
message:'',
data: [],
};
//过滤data中的数据，取出等于params.deptId的数据
return { ...response,data: rightContrastTableData2 };
},
columns:contrastTableColumns2,
useSearchForm: false,
showTableSetting: false,
showIndexColumn:false,
pagination:false,
bordered: true,
scroll: { y: 300 },
});
const [registerTable3] = useTable({
title: '返回参数',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: leftContrastTableData3.length,
code:'',
message:'',
data: [],
};
//过滤data中的数据，取出等于params.deptId的数据
return { ...response,data: leftContrastTableData3 };
},
columns:contrastTableColumns3,
useSearchForm: false,
showTableSetting: false,
showIndexColumn:false,
pagination:false,
bordered: true,
scroll: { y: 300 },
});
onMounted(() => {
optionValue1.value = 'V3'
});
</script>
src/views/dataService/serviceDevelopment/guideModeApi.vue
View file @ 73a8da4f
...@@ -118,6 +118,10 @@ ...@@ -118,6 +118,10 @@
<BasicInfoDrawer @register="registerDrawer" @success="handleSuccess" /> <BasicInfoDrawer @register="registerDrawer" @success="handleSuccess" />
<!-- api测试 抽屉--> <!-- api测试 抽屉-->
<ApiTestDrawer @register="registerApiTestDrawer" @success="handleSuccess" /> <ApiTestDrawer @register="registerApiTestDrawer" @success="handleSuccess" />
<!-- 数据预览 抽屉-->
<DataPreviewDrawer @register="registerDataPreviewDrawer" @success="handleSuccess" />
<!-- 版本发布申请 弹窗-->
<PublishApplicationModal @register="registerPublishApplicationModal" @success="handleSuccess" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -151,6 +155,9 @@ ...@@ -151,6 +155,9 @@
import { useDrawer } from '@/components/Drawer'; import { useDrawer } from '@/components/Drawer';
import BasicInfoDrawer from './BasicInfoDrawer.vue' import BasicInfoDrawer from './BasicInfoDrawer.vue'
import ApiTestDrawer from './ApiTestDrawer.vue' import ApiTestDrawer from './ApiTestDrawer.vue'
import DataPreviewDrawer from './DataPreviewDrawer.vue'
import { useModal } from '@/components/Modal';
import PublishApplicationModal from './PublishApplicationModal.vue'
defineOptions({ name: 'Metadata' }); defineOptions({ name: 'Metadata' });
const route = useRoute(); const route = useRoute();
...@@ -164,6 +171,8 @@ ...@@ -164,6 +171,8 @@
]); ]);
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const [registerDrawer, { openDrawer }] = useDrawer(); const [registerDrawer, { openDrawer }] = useDrawer();
const [registerPublishApplicationModal, { openModal: openPublishApplicationModal }] = useModal();
const [registerDataPreviewDrawer, { openDrawer:openDataPreviewDrawer }] = useDrawer();
const [registerApiTestDrawer, { openDrawer:openApiTestDrawer }] = useDrawer(); const [registerApiTestDrawer, { openDrawer:openApiTestDrawer }] = useDrawer();
const [registerGuideModeForm] = useForm({ const [registerGuideModeForm] = useForm({
labelWidth: 100, labelWidth: 100,
...@@ -363,7 +372,9 @@ ...@@ -363,7 +372,9 @@
/**数据预览*/ /**数据预览*/
function dataPreviewButton() { function dataPreviewButton() {
openDataPreviewDrawer(true,{
})
} }
/**API测试*/ /**API测试*/
...@@ -371,9 +382,14 @@ ...@@ -371,9 +382,14 @@
openApiTestDrawer(true,{}) openApiTestDrawer(true,{})
} }
/**发布*/ /**发布 按钮*/
function publishButton() { function publishButton() {
const data = {
apiName:'test01'
}
openPublishApplicationModal(true,{
record:data
})
} }
/**保存*/ /**保存*/
......
src/views/dataService/serviceDevelopment/sqlModeApi.vue
View file @ 73a8da4f
...@@ -20,6 +20,12 @@ ...@@ -20,6 +20,12 @@
<!-- 基本信息 抽屉--> <!-- 基本信息 抽屉-->
<BasicInfoDrawer @register="registerDrawer" @success="handleSuccess" /> <BasicInfoDrawer @register="registerDrawer" @success="handleSuccess" />
<!-- api测试 抽屉-->
<ApiTestDrawer @register="registerApiTestDrawer" @success="handleSuccess" />
<!-- 数据预览 抽屉-->
<DataPreviewDrawer @register="registerDataPreviewDrawer" @success="handleSuccess" />
<!-- 版本发布申请 弹窗-->
<PublishApplicationModal @register="registerPublishApplicationModal" @success="handleSuccess" />
</PageWrapper> </PageWrapper>
</template> </template>
...@@ -33,8 +39,16 @@ ...@@ -33,8 +39,16 @@
import { useGo } from '@/hooks/web/usePage'; import { useGo } from '@/hooks/web/usePage';
import { useDrawer } from '@/components/Drawer'; import { useDrawer } from '@/components/Drawer';
import BasicInfoDrawer from './BasicInfoDrawer.vue' import BasicInfoDrawer from './BasicInfoDrawer.vue'
import ApiTestDrawer from './ApiTestDrawer.vue'
import DataPreviewDrawer from './DataPreviewDrawer.vue'
import PublishApplicationModal from './PublishApplicationModal.vue'
import { useModal } from '@/components/Modal';
defineOptions({ name: 'AccountDetail' }); defineOptions({ name: 'AccountDetail' });
const [registerDrawer, { openDrawer }] = useDrawer(); const [registerDrawer, { openDrawer }] = useDrawer();
const [registerPublishApplicationModal, { openModal: openPublishApplicationModal }] = useModal();
const [registerDataPreviewDrawer, { openDrawer:openDataPreviewDrawer }] = useDrawer();
const [registerApiTestDrawer, { openDrawer:openApiTestDrawer }] = useDrawer();
const current = ref(0); const current = ref(0);
const go = useGo(); const go = useGo();
...@@ -53,6 +67,28 @@ ...@@ -53,6 +67,28 @@
}); });
} }
/**API测试*/
function apiTestButton() {
openApiTestDrawer(true,{})
}
/**数据预览*/
function dataPreviewButton() {
openDataPreviewDrawer(true,{
})
}
/**发布 按钮*/
function publishButton() {
const data = {
apiName:'test02'
}
openPublishApplicationModal(true,{
record:data
})
}
// 页面左侧点击返回链接时的操作 // 页面左侧点击返回链接时的操作
function goBack() { function goBack() {
// 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页 // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
......
src/views/dataService/serviceDevelopment/sqlModeStep1.vue
View file @ 73a8da4f
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
/> />
</div> </div>
<div> <div>
<a-button type="primary" @click="">元数据预览</a-button> <a-button type="primary" @click="previewButton">元数据预览</a-button>
</div> </div>
</div> </div>
<div> <div>
...@@ -48,6 +48,8 @@ ...@@ -48,6 +48,8 @@
</div> </div>
<!-- SQL设置 弹窗--> <!-- SQL设置 弹窗-->
<SqlSettingModal @register="registerSqlSettingModal" @success="handleSuccess" /> <SqlSettingModal @register="registerSqlSettingModal" @success="handleSuccess" />
<!-- 元数据预览 抽屉-->
<MetadataPreviewDrawer @register="registerMetadataPreviewDrawer" @success="handleSuccess" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -65,7 +67,10 @@ ...@@ -65,7 +67,10 @@
import { Alert, Space } from 'ant-design-vue'; import { Alert, Space } from 'ant-design-vue';
import { Select } from 'ant-design-vue'; import { Select } from 'ant-design-vue';
import SqlSettingModal from './sqlSettingModal.vue' import SqlSettingModal from './sqlSettingModal.vue'
import MetadataPreviewDrawer from './MetadataPreviewDrawer.vue'
import { useDrawer } from '@/components/Drawer';
const [registerMetadataPreviewDrawer, { openDrawer:openMetadataPreviewDrawer }] = useDrawer();
const [registerRunModal, { openModal: openRunModal }] = useModal(); const [registerRunModal, { openModal: openRunModal }] = useModal();
const [registerSqlSettingModal, { openModal: openSqlSettingModal }] = useModal(); const [registerSqlSettingModal, { openModal: openSqlSettingModal }] = useModal();
const [registerSelectDatasourceModal, { openModal: openSelectDatasourceModal }] = useModal(); const [registerSelectDatasourceModal, { openModal: openSelectDatasourceModal }] = useModal();
...@@ -161,6 +166,15 @@ ...@@ -161,6 +166,15 @@
}) })
} }
/**元数据预览*/
function previewButton() {
openMetadataPreviewDrawer(true, {
});
}
/**初始化*/ /**初始化*/
onMounted(() => { onMounted(() => {
optionValue.value = '1' optionValue.value = '1'
......
src/views/dataService/serviceDevelopment/trusteeshipApiTest.vue 0 → 100644
View file @ 73a8da4f
<template>
<PageWrapper title="API测试" class="content-padding" contentBackground @back="goBack">
<div style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px;display: flex">
<div style="font-weight: bold;align-items: center;display: flex">参数输入模式</div>
<Select
style="margin-left: 20px"
class="selectCss"
v-model:value="optionValue"
show-search
placeholder="input search text"
:options="options"
@search="handleSearch"
/>
</div>
<div v-if="optionValue === '参数模式'">
<BasicTable @register="registerTable"/>
</div>
<div v-if="optionValue === '报文模式'">
<BasicForm @register="registerForm"/>
</div>
<a-button type="primary" @click="testButton(optionValue)">测试</a-button>
</PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import { BasicForm, useForm } from '@/components/Form';
import { Description } from '@/components/Description';
import { useMessage } from '@/hooks/web/useMessage';
import { step2TableData1,step2TableData2,trusteeshipTableData5 } from './apiData';
import { ref, reactive, onMounted } from 'vue';
import { Select,Textarea } from 'ant-design-vue';
import CodeEditor from "@/components/CodeEditor/src/CodeEditor.vue";
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { trusteeshipTableColumns7,trusteeshipFormSchema3 } from './api.data';
import {router} from "@/router";
const { createMessage } = useMessage();
const emit = defineEmits(['next']);
const optionValue = ref('')
const options = ref([
{
label: '参数模式',
value: '参数模式'
},
{
label: '报文模式',
value: '报文模式'
},
])
const show = ref(false)
const [registerTable] = useTable({
title: '请求参数',
api: async (params) => {
var data = [];
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: trusteeshipTableData5.length,
code:'',
message:'',
data: [],
};
//过滤data中的数据，取出等于params.deptId的数据
return { ...response,data: trusteeshipTableData5 };
},
columns:trusteeshipTableColumns7,
useSearchForm: false,
showTableSetting: false,
showIndexColumn:false,
bordered: true,
scroll: { y: 300 },
});
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: trusteeshipFormSchema3,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
/**测试按钮*/
function testButton(){
router.push({
path: '/dataService/serviceDevelopment/trusteeshipApiTestResult',
query: {
optionValue:optionValue.value
},
});
}
/**初始化*/
onMounted(() => {
optionValue.value = '参数模式'
});
</script>
<style lang="less" scoped>
.selectCss{
::v-deep(.ant-select-selector){
width:200px!important;
}
}
</style>
src/views/dataService/serviceDevelopment/trusteeshipApiTestResult.vue 0 → 100644
View file @ 73a8da4f
<template>
<PageWrapper title="" contentFullHeight contentBackground>
<div class="inputClass" v-if="optionValue === '参数模式'">
<BasicForm @register="registerForm1"/>
</div>
<div class="inputClass" v-else>
<BasicForm @register="registerForm2"/>
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import {
trusteeshipFormSchema2,trusteeshipFormSchema4
} from './api.data';
import {
} from './apiData';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicForm, useForm } from '@/components/Form';
import {onMounted,ref} from "vue";
import { Select } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import {router} from "@/router";
import { useRoute,onBeforeRouteLeave } from 'vue-router';
import { Divider } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { useDrawer } from '@/components/Drawer';
defineOptions({ name: 'Metadata' });
const optionValue = ref('')
const route = useRoute();
const { createMessage } = useMessage();
const header1 = ref('Accept: application/json, text/plain, */*\n' +
'Accept-Encoding: gzip, deflate\n' +
'Accept-Language: zh-CN,zh;q=0.9,en;q=0.8\n'+
'Authorization:\n'+
'Content-Length: 218\n' +
'Content-Type: application/json;charset=UTF-8\n' +
'Host: 172.26.2.22:28180\n' +
'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36\n' +
'x-requested-with: XMLHttpRequest');
const body1 = ref('{\n'+
'"category": "SERVICE",\n'+
'"page": 1,\n'+
'"size": 10,\n'+
'"searchText": "",\n'+
'"size": 10,\n'+
'"timeRangeFilters": [],\n'+
'"fieldFuzzySearch": [],\n'+
'"childrenRequest": null,\n'+
'"catalogFlag": false\n'+
'}')
const header2 = ref('Cache-Control: no-cache, no-store, max-age=0, must-revalidate\n' +
'Content-Type: application/json\n' +
'Date: Wed, 01 Feb 2023 08:51:06 GMT\n'+
'Expires: Thu, 01 Feb 2023 08:51:06 GMT\n'+
'Pragma: 0\n'+
'Referrer-Policy: no-referrer\n' +
'Transfer-Encoding: chunked\n' +
'X-Content-Type-Options: nosniff\n' +
'X-Frame-Options: DENY\n' +
'X-XSS-Protection: 1; mode=block');
const body2 = ref('{\n'+
'"category": "SERVICE",\n'+
'"page": 1,\n'+
'"size": 10,\n'+
'"searchText": "",\n'+
'"size": 10,\n'+
'"timeRangeFilters": [],\n'+
'"fieldFuzzySearch": [],\n'+
'"childrenRequest": null,\n'+
'"catalogFlag": false\n'+
'}')
//初始化表单
const [registerForm1, { setFieldsValue:setFieldsValue1 }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: trusteeshipFormSchema2,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化表单
const [registerForm2, { setFieldsValue:setFieldsValue2 }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: trusteeshipFormSchema4,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
onMounted(() => {
optionValue.value = route.query.optionValue;
});
</script>
<style lang="less" scoped>
.inputClass{
::v-deep(.ant-input){
background-color: rgb(244, 246, 251);
}
}
</style>
src/views/dataService/serviceDevelopment/trusteeshipModeApi.vue
View file @ 73a8da4f
<template> <template>
<PageWrapper title="托管模式" contentFullHeight contentBackground> <PageWrapper title="托管模式" contentFullHeight contentBackground>
<div style="display: flex; justify-content: flex-end;margin-bottom: 10px"> <div style="display: flex; justify-content: flex-end;margin-bottom: 10px;margin-top: 10px">
<a-button type="primary" @click="basicInfoButton" style="margin-right: 10px">基本信息</a-button> <a-button type="primary" @click="basicInfoButton" style="margin-right: 10px">基本信息</a-button>
<a-button type="primary" @click="apiTestButton" style="margin-right: 10px">API测试</a-button> <a-button type="primary" @click="apiTestButton" style="margin-right: 10px">API测试</a-button>
<a-button type="primary" @click="publishButton" style="margin-right: 10px">发布</a-button> <a-button type="primary" @click="publishButton" style="margin-right: 10px">发布</a-button>
...@@ -200,6 +200,8 @@ ...@@ -200,6 +200,8 @@
<DebugModal @register="registerDebugModal" @success="handleSuccess" /> <DebugModal @register="registerDebugModal" @success="handleSuccess" />
<!-- 基本信息 抽屉--> <!-- 基本信息 抽屉-->
<BasicInfoDrawer @register="registerDrawer" @success="handleSuccess" /> <BasicInfoDrawer @register="registerDrawer" @success="handleSuccess" />
<!-- 版本发布申请 弹窗-->
<PublishApplicationModal @register="registerPublishApplicationModal" @success="handleSuccess" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -219,6 +221,9 @@ ...@@ -219,6 +221,9 @@
import { useModal } from '@/components/Modal'; import { useModal } from '@/components/Modal';
import { useDrawer } from '@/components/Drawer'; import { useDrawer } from '@/components/Drawer';
import BasicInfoDrawer from './BasicInfoDrawer.vue' import BasicInfoDrawer from './BasicInfoDrawer.vue'
import {router} from "@/router";
import PublishApplicationModal from './PublishApplicationModal.vue'
defineOptions({ name: 'AccountModal' }); defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
...@@ -250,6 +255,7 @@ ...@@ -250,6 +255,7 @@
}, },
]) ])
const [registerDrawer, { openDrawer }] = useDrawer(); const [registerDrawer, { openDrawer }] = useDrawer();
const [registerPublishApplicationModal, { openModal: openPublishApplicationModal }] = useModal();
const [registerDebugModal, { openModal: openDebugModal }] = useModal(); const [registerDebugModal, { openModal: openDebugModal }] = useModal();
//初始化弹框 //初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
...@@ -445,6 +451,24 @@ ...@@ -445,6 +451,24 @@
} }
/**发布 按钮*/
function publishButton() {
const data = {
apiName:'test03'
}
openPublishApplicationModal(true,{
record:data
})
}
/**API测试 按钮*/
function apiTestButton() {
router.push({
path: '/dataService/serviceDevelopment/trusteeshipApiTest',
query: {},
});
}
function handleChangeTab(key: string) { function handleChangeTab(key: string) {
// 处理标签页切换逻辑... // 处理标签页切换逻辑...
} }
......
src/views/dataService/serviceMonitor/ModelTree.vue 0 → 100644
View file @ 73a8da4f
<template>
<div class="m-4 mr-0 overflow-hidden bg-white">
<BasicTree
ref="treeRef"
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:defaultExpandAll="true"
:fieldNames="{ key: 'key', title: 'title' }"
:treeData="TreeData"
@select="handleSelect"
/>
</div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, unref } from 'vue';
import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
import { Nullable } from '@vben/types';
import { TreeData } from './monitorData';
defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const treeRef = ref<Nullable<TreeActionType>>(null);
function handleSelect(keys) {
emit('select', keys[0]);
}
</script>
src/views/dataService/serviceMonitor/index.vue 0 → 100644
View file @ 73a8da4f
<template>
<PageWrapper title="供电单位用电量" contentFullHeight fixedHeight >
<template #extra>
<a-button type="primary" @click="handleLog">调用日志</a-button>
</template>
<template #footer>
<div style="display: flex">
<ModelTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
<div class="w-3/4 xl:w-4/5">
<div style="display: flex; flex-direction: column">
<BasicTable @register="registerTable" :searchInfo="searchInfo" :rowSelection="rowSelection">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'ant-design:stop-outlined',
onClick: handleEdit.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
<div>
<div style="margin-left: 20px; font-weight: bold; font-size: 16px">流量统计</div>
<div style="display: flex">
<div class="w-1/3" style="margin-left: 20px">
<div style="border-left: 3px solid #1396e9; margin-top: 20px; font-size: 15px"
>实时总流量</div
>
<div style="margin-top: 10px; width: 100%; height: 100%; text-align: center">
<img src="../../../assets/images/serviceMinotor.png" style="width: 68%" />
<div style="font-size: 18px">SLB</div>
<div
><span style="font-size: 23px; font-weight: bold">{{ APIRate }}</span
><span style="font-size: 18px; margin-left: 5px">MB/S</span></div
>
</div>
</div>
<div class="w-2/3">
<div style="border-left: 3px solid #1396e9; font-size: 15px; margin-top: 20px"
>流量统计</div
>
<div id="echarts2" style="width: 100%; height: 300px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import { columns, searchFormSchema } from './monitor.data';
import { tableList } from './monitorData';
import { router } from '@/router';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { Alert } from 'ant-design-vue';
import * as echarts from 'echarts';
import ModelTree from './ModelTree.vue';
type EChartsOption = echarts.EChartsOption;
defineOptions({ name: 'SafetyLevelManage' });
const { createMessage, createConfirm } = useMessage();
const route = useRoute();
const [registerModal, { openModal }] = useModal();
const [registerImport, { openModal: openImportModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const APIRate = ref('375');
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
title: '执行中请求',
scroll: { y: 500 },
titleHelpMessage: '执行中请求',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableList.length,
code: '',
message: '',
data: tableList,
};
return { ...response };
},
rowKey: 'businessId',
rowSelection: false,
showIndexColumn: false,
columns,
formConfig: {
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
resetFunc: () => {
searchInfo.deptId = '';
},
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
function handleImport() {
openImportModal(true, {});
}
function handleLog() {
router.push({
path: '/dataService/serviceMonitor/useLog',
});
}
function handleDeleteIds() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认批量删除选中数据吗？',
onOk() {
createMessage.success('批量删除成功!');
},
});
}
/** 部门树的select*/
function handleSelect(key) {
if (key !== null && key !== undefined) {
modelLevel.value = key.split('-').length - 1;
} else {
modelLevel.value = 0;
}
if (modelLevel.value > 1) {
const regex = new RegExp(key, 'i');
const data = tableList.value.filter(
(item) => item.type === 'model' && regex.test(item.themeId),
);
setTableData(data);
} else {
const regex = new RegExp(key, 'i');
const data = tableData.value.filter(
(item) => item.type === 'theme' && regex.test(item.themeId),
);
setTableData(data);
}
}
/** 新增按钮*/
function handleCreate() {
openModal(true, {
isUpdate: false,
});
}
/** 编辑按钮*/
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
}
/** 重置密码弹窗确定按钮*/
/** 删除按钮*/
function handleDelete(record: Recordable) {
const rowSelection = getRowSelection().selectedRowKeys;
console.log('11111111111', rowSelection);
createMessage.success('删除成功!');
reload();
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 演示不刷新表格直接更新内部数据。
// 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values);
console.log(result);
reload();
} else {
reload();
}
}
function getEcharts2() {
const chartDom = document.getElementById('echarts2')!;
const myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
grid: {
left: '5%',
right: '5%',
top: '10%',
bottom: '7%',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07'],
},
yAxis: {
type: 'value',
min: 0,
max: 2500000,
interval: 500000,
axisLabel: {
formatter: function (value, index) {
var value;
if (value >= 1000 && value < 1000000) {
value = value / 1000 + 'k';
} else if (value >= 1000000) {
value = value / 1000000 + 'Mil';
} else if (value < 1000) {
value = value;
}
return value;
},
},
},
series: [
{
data: [1500000, 2000000, 1700000, 2300000, 1100000, 2300000, 1700000],
type: 'line',
areaStyle: {},
},
],
};
option && myChart.setOption(option);
}
onMounted(() => {
getEcharts2();
});
</script>
src/views/dataService/serviceMonitor/logMangae.vue 0 → 100644
View file @ 73a8da4f
<template>
<PageWrapper title="调用日志管理" contentFullHeight fixedHeight contentClass="flex">
<template #footer>
<BasicTable @register="registerTable" :searchInfo="searchInfo" :rowSelection="rowSelection">
<template #toolbar>
<a-button type="link" :disabled="getRowSelection().selectedRowKeys <= 0"
>下载日志</a-button
>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看日志',
disabled: record.isAPI,
onClick: handleView.bind(null, record),
},
{
label: '下载日志',
disabled: record.isAPI,
onClick: handleDownLoad.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
</template>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import { logColumns, logSearchFormSchema } from './monitor.data';
import { logTableList } from './monitorData';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { Alert } from 'ant-design-vue';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
defineOptions({ name: 'SafetyLevelManage' });
const { createMessage, createConfirm } = useMessage();
const route = useRoute();
const [registerModal, { openModal }] = useModal();
const [registerImport, { openModal: openImportModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const APIRate = ref('375');
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
scroll: { y: 500 },
titleHelpMessage: '执行中请求',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: logTableList.length,
code: '',
message: '',
data: logTableList,
};
return { ...response };
},
rowKey: 'businessId',
rowSelection: true,
showIndexColumn: false,
columns: logColumns,
formConfig: {
labelWidth: 60,
schemas: logSearchFormSchema,
autoSubmitOnEnter: true,
resetFunc: () => {
searchInfo.deptId = '';
},
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 150,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
function handleDownLoad() {}
function handleView() {}
function handleDeleteIds() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认批量删除选中数据吗？',
onOk() {
createMessage.success('批量删除成功!');
},
});
}
/** 重置密码弹窗确定按钮*/
/** 删除按钮*/
function handleDelete(record: Recordable) {
const rowSelection = getRowSelection().selectedRowKeys;
console.log('11111111111', rowSelection);
createMessage.success('删除成功!');
reload();
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 演示不刷新表格直接更新内部数据。
// 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values);
console.log(result);
reload();
} else {
reload();
}
}
onMounted(() => {});
</script>
src/views/dataService/serviceMonitor/monitor.data.ts 0 → 100644
View file @ 73a8da4f
import { FormSchema } from '@/components/Form';
import { BasicColumn } from '@/components/Table';
import moment from "moment";
export const searchFormSchema: FormSchema[] = [
{
field: 'APIName',
label: '调用方',
component: 'Select',
colProps: { span: 4 },
componentProps: {
options: [
{ value: 'admin', label: 'admin' },
{ value: '个人', label: '个人' },
{ value: 'user', label: 'user' },
],
defaultValue: 'admin',
},
},
{
field: 'callTime',
label: '调用时间',
component: 'RangePicker',
colProps: { span: 4 },
defaultValue: [moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
componentProps: {
},
},
{
field: 'callUseTime',
label: '调用有效期',
component: 'DatePicker',
colProps: { span: 4 },
},
];
export const logSearchFormSchema: FormSchema[] = [
{
field: 'callTime',
label: '调用时间',
component: 'RangePicker',
colProps: { span: 4 },
// defaultValue: [moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
},
];
export const columns: BasicColumn[] = [
{
title: 'gateway',
dataIndex: 'gateway',
width: 120,
},
{
title: 'executor',
dataIndex: 'executor',
width: 120,
},
{
title: '数据源',
dataIndex: 'dataSource',
width: 120,
},
{
title: '调用方',
dataIndex: 'useBy',
width: 140,
},
{
title: '开始时间',
dataIndex: 'startTime',
width: 140,
},
{
title: '已耗时',
dataIndex: 'consumeTime',
width: 180,
},
];
export const logColumns: BasicColumn[] = [
{
title: '路由名称',
dataIndex: 'routerName',
width: 120,
},
{
title: 'IP',
dataIndex: 'ipName',
width: 120,
},
{
title: '调用时间',
dataIndex: 'useTime',
width: 120,
},
{
title: '调用状态',
dataIndex: 'useStatus',
width: 140,
},
{
title: '调用时长',
dataIndex: 'useTimeLength',
width: 140,
},
{
title: 'Http错误码',
dataIndex: 'herrorNum',
width: 180,
},
{
title: '业务错误码',
dataIndex: 'taskErrorNum',
width: 180,
},
{
title: '调用方',
dataIndex: 'useBy',
width: 180,
},
];
src/views/dataService/serviceMonitor/monitorData.ts 0 → 100644
View file @ 73a8da4f
export const tableList: any[] = [
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021-02-21 15:55:16',
consumeTime: '2s',
themeId: '1-1-1',
},
{
gateway: '168.19.18.19',
businessId: 309,
executor: '19.10.189.10',
dataSource: 'dataset_meta',
useBy: '李丽',
startTime: '2021-02-21 15:55:16',
consumeTime: '3s',
themeId: '1-1-1',
},
{
gateway: '179.18.100.18',
businessId: 309,
executor: '190.187.10.10',
dataSource: 'inceptor数据源',
useBy: '崔大山',
startTime: '2021-02-21 15:55:16',
consumeTime: '15',
themeId: '1-1-2',
},
{
gateway: '172.190.187.178',
businessId: 309,
executor: '183.180.190.190',
dataSource: 'postgres',
useBy: '张小北',
startTime: '20210221 15:55:16',
consumeTime: '4s',
themeId: '1-1-2',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
{
gateway: '172.179.90.19',
businessId: 309,
executor: '156.190.189.10',
dataSource: 'mysql',
useBy: '张三',
startTime: '2021022115:55:16',
consumeTime: '2s',
},
];
export const logTableList = [
{
routerName: 'employee',
businessId: 309,
isAPI: true,
ipName: '172.22.204.228',
useTime: '2023/01/12 16:40:35',
useStatus: '成功',
useTimeLength: '663.0 ms',
herrorNum: '-',
taskErrorNum: '-',
useBy: 'apiuser',
},
{
routerName: 'employee',
businessId: 310,
isAPI: false,
ipName: '172.22.204.228',
useTime: '2023/01/12 16:40:35',
useStatus: '成功',
useTimeLength: '663.0 ms',
herrorNum: '-',
taskErrorNum: '-',
useBy: 'apiuser',
},
];
export const TreeData = [
{
key: '1',
title: 'API监控',
level: '0',
children: [
{
key: '1-1',
title: '三方API-ip-urlpath',
level: '1',
children: [
{ key: '1-1-1', title: 'test01_1', level: '2' },
{ key: '1-1-2', title: 'test', level: '2' },
],
},
{
key: '1-2',
title: '三方托管',
level: '1',
children: [
{ key: '1-2-1', title: 'test01_2', level: '2' },
{ key: '1-2-2', title: 'test01', level: '2' },
],
},
{
key: '1-3',
title: '三方API',
level: '1',
children: [
{ key: '1-3-1', title: 'test01_3', level: '2' },
{ key: '1-3-2', title: 'TEST', level: '2' },
],
},
],
},
{
key: '2',
title: 'admin-个人工作区',
level: '0',
children: [
{
key: '2-1',
title: '三方API-ip-urlpath',
level: '2',
children: [
{ key: '2-1-1', title: 'test01_1', level: '2' },
{ key: '2-1-2', title: 'test', level: '2' },
],
},
{
key: '2-2',
title: '三方托管',
level: '2',
children: [
{ key: '2-2-1', title: 'test01_2', level: '2' },
{ key: '2-2-2', title: 'test01', level: '2' },
],
},
{
key: '2-3',
title: '三方API',
level: '2',
children: [
{ key: '2-3-1', title: 'test01_3', level: '2' },
{ key: '2-3-2', title: 'TEST', level: '2' },
],
},
],
},
{
key: '3',
title: '共享工作区',
level: '3',
children: [
{
key: '3-1',
title: '三方API-ip-urlpath',
level: '3',
children: [
{ key: '3-1-1', title: 'test01_1', level: '2' },
{ key: '3-1-2', title: 'test', level: '2' },
],
},
{
key: '3-2',
title: '三方托管',
level: '3',
children: [
{ key: '3-2-1', title: 'test01_2', level: '2' },
{ key: '3-2-2', title: 'test01', level: '2' },
],
},
{
key: '3-3',
title: '三方API',
level: '3',
children: [
{ key: '3-3-1', title: 'test01_3', level: '2' },
{ key: '3-3-2', title: 'TEST', level: '2' },
],
},
],
},
];
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment