添加游戏日志查询
This commit is contained in:
zpc
parent
5ca0ae9b19
commit
85d7953634
2
admin-client/src/components.d.ts
vendored
2
admin-client/src/components.d.ts
vendored
|
|
@ -82,6 +82,7 @@ declare module 'vue' {
|
|||
BarChartTransverse: typeof import('./core/components/charts/BarChartTransverse.vue')['default']
|
||||
ColumnSetting: typeof import('./core/components/curd/components/ColumnSetting.vue')['default']
|
||||
ElAside: typeof import('element-plus/es')['ElAside']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
|
||||
|
|
@ -91,6 +92,7 @@ declare module 'vue' {
|
|||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElMain: typeof import('element-plus/es')['ElMain']
|
||||
ElSpace: typeof import('element-plus/es')['ElSpace']
|
||||
ElText: typeof import('element-plus/es')['ElText']
|
||||
ElTimeline: typeof import('element-plus/es')['ElTimeline']
|
||||
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
|
||||
ExternalJump: typeof import('./core/components/ExternalJump.vue')['default']
|
||||
|
|
|
|||
|
|
@ -1,10 +1,20 @@
|
|||
<script lang="ts" setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import { FormInstance } from "ant-design-vue";
|
||||
import Tools from "@/core/utils/Tools";
|
||||
import { MoreFilled } from "@element-plus/icons-vue";
|
||||
//定义组件事件
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
nextTick,
|
||||
watch,
|
||||
} from "vue";
|
||||
import * as monaco from "monaco-editor";
|
||||
import "monaco-editor/min/vs/editor/editor.main.css";
|
||||
|
||||
const props = defineProps<{ onSuccess: () => void }>();
|
||||
let editorContainer = ref<HTMLElement>();
|
||||
let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
|
||||
let responseEditorContainer = ref<HTMLElement>();
|
||||
let responseEditorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
|
||||
|
||||
const state = reactive({
|
||||
vm: {
|
||||
|
|
@ -15,32 +25,112 @@ const state = reactive({
|
|||
loading: false,
|
||||
});
|
||||
let jsonData = ref([]);
|
||||
//向父级导出 函数
|
||||
|
||||
// 初始化编辑器
|
||||
function initializeEditor(container: HTMLElement, value: string = "") {
|
||||
const editor = monaco.editor.create(container, {
|
||||
value,
|
||||
language: "json",
|
||||
theme: "vs-dark", // 主题
|
||||
automaticLayout: true, // 自动布局
|
||||
wordWrap: "on", // 自动换行
|
||||
minimap: {
|
||||
enabled: false, // 隐藏右侧缩略图
|
||||
},
|
||||
lineNumbers: "on", // 显示行号
|
||||
});
|
||||
|
||||
// 每次修改内容后滚动到顶部
|
||||
editor.onDidChangeModelContent(() => {
|
||||
editor.setScrollTop(0); // 将滚动条滚动到顶部
|
||||
});
|
||||
return editor;
|
||||
}
|
||||
|
||||
// 监听弹窗可见性，初始化编辑器
|
||||
watch(
|
||||
() => state.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
nextTick(() => {
|
||||
if (editorContainer.value && !editorInstance) {
|
||||
editorInstance = initializeEditor(
|
||||
editorContainer.value,
|
||||
"// 请求消息"
|
||||
);
|
||||
}
|
||||
if (responseEditorContainer.value && !responseEditorInstance) {
|
||||
responseEditorInstance = initializeEditor(
|
||||
responseEditorContainer.value,
|
||||
"// 返回消息"
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
let totalMilliseconds = ref(0);
|
||||
onBeforeUnmount(() => {
|
||||
if (editorInstance) editorInstance.dispose();
|
||||
if (responseEditorInstance) responseEditorInstance.dispose();
|
||||
});
|
||||
|
||||
// 打开编辑器
|
||||
defineExpose({
|
||||
/**
|
||||
* 打开表单初始化
|
||||
* @param jsonstr
|
||||
*/
|
||||
open: (jsonstr: string = "") => {
|
||||
state.visible = true;
|
||||
if (state.visible) {
|
||||
state.vm.id = jsonstr;
|
||||
var data = JSON.parse(jsonstr);
|
||||
console.log(data);
|
||||
totalMilliseconds.value = 0;
|
||||
nextTick(() => {
|
||||
const data = JSON.parse(jsonstr || "{}");
|
||||
jsonData.value.slice(0, jsonData.value.length);
|
||||
jsonData.value.push(...data);
|
||||
console.log(jsonData.value);
|
||||
}
|
||||
|
||||
//初始化表单数据
|
||||
state.loading = true;
|
||||
state.loading = false;
|
||||
setTimeout(() => {
|
||||
if (editorInstance) {
|
||||
editorInstance.setValue(JSON.stringify(data, null, 2));
|
||||
}
|
||||
if (responseEditorInstance) {
|
||||
responseEditorInstance.setValue(
|
||||
JSON.stringify(data.response || {}, null, 2)
|
||||
);
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
*保存数据
|
||||
*/
|
||||
function save() {}
|
||||
// 保存数据
|
||||
function save() {
|
||||
if (editorInstance) {
|
||||
const requestContent = editorInstance.getValue();
|
||||
console.log("请求内容:", requestContent);
|
||||
}
|
||||
if (responseEditorInstance) {
|
||||
const responseContent = responseEditorInstance.getValue();
|
||||
console.log("返回内容:", responseContent);
|
||||
}
|
||||
}
|
||||
|
||||
function showJyRequestData(t: any) {
|
||||
if (editorInstance) {
|
||||
if (t.RequestContent == null) {
|
||||
editorInstance.setValue("");
|
||||
} else {
|
||||
editorInstance.setValue(
|
||||
JSON.stringify(JSON.parse(t.RequestContent), null, 2)
|
||||
);
|
||||
}
|
||||
totalMilliseconds.value = t.TotalMilliseconds;
|
||||
}
|
||||
if (responseEditorInstance) {
|
||||
if (t.ResponseContent == null) {
|
||||
responseEditorInstance.setValue("");
|
||||
} else {
|
||||
responseEditorInstance.setValue(
|
||||
JSON.stringify(JSON.parse(t.ResponseContent), null, 2)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -50,35 +140,69 @@ function save() {}
|
|||
centered
|
||||
@ok="state.visible = false"
|
||||
:maskClosable="false"
|
||||
:width="900"
|
||||
width="80%"
|
||||
>
|
||||
<template #footer>
|
||||
<a-button type="primary" :loading="state.loading" @click="save()">
|
||||
提交</a-button
|
||||
>
|
||||
提交
|
||||
</a-button>
|
||||
<a-button @click="state.visible = false">关闭</a-button>
|
||||
</template>
|
||||
<a-spin :spinning="state.loading">
|
||||
<el-container>
|
||||
<el-aside width="550px">
|
||||
<el-timeline style="max-width: 500px; max-height: 500px">
|
||||
<el-timeline style="max-width: 500px; max-height: 80vh">
|
||||
<el-timeline-item
|
||||
@click="() => showJyRequestData(t)"
|
||||
v-for="t in jsonData"
|
||||
:key="t.OperationDateTime"
|
||||
:timestamp="t.OperationDateTime"
|
||||
placement="top"
|
||||
:hide-timestamp="true"
|
||||
>
|
||||
{{ t.Content }}
|
||||
<div v-if="t.RequestContent != null" style="cursor: pointer">
|
||||
<div>
|
||||
<el-text class="mx-1" type="primary">
|
||||
{{ t.OperationDateTime }}</el-text
|
||||
>
|
||||
</div>
|
||||
<div style="">
|
||||
<el-text class="mx-1" type="primary">
|
||||
{{ t.Content }}</el-text
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
<el-text class="mx-1" type="info">
|
||||
{{ t.OperationDateTime }}</el-text
|
||||
>
|
||||
</div>
|
||||
<div style="">
|
||||
<el-text class="mx-1" type="info"> {{ t.Content }}</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
|
||||
请求耗时：
|
||||
<el-text v-if="totalMilliseconds > 0" class="mx-1" type="success"
|
||||
>{{ totalMilliseconds }} 毫秒</el-text
|
||||
><el-text v-else class="mx-1" type="warning">无</el-text><br />
|
||||
请求信息：
|
||||
<div class="monaco-editor" ref="editorContainer"></div>
|
||||
返回消息：
|
||||
<div class="monaco-editor" ref="responseEditorContainer"></div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
<!-- aaaa -->
|
||||
|
||||
<!-- {{ state.vm.id }} -->
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.monaco-editor {
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import vueJsx from "@vitejs/plugin-vue-jsx";
|
|||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite';
|
||||
import { AntDesignVueResolver,ElementPlusResolver } from 'unplugin-vue-components/resolvers';
|
||||
// import monacoEditorPlugin from "vite-plugin-monaco-editor";
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user