mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-30 11:11:55 +08:00
refactor: IFrame
This commit is contained in:
xingyu
parent
d604c6c5fb
commit
557f2937f5
@ -1,13 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<ContentWrap title="数据库文档">
|
||||||
|
<!-- 操作工具栏 -->
|
||||||
|
<div class="mb-10px">
|
||||||
|
<XButton
|
||||||
|
type="primary"
|
||||||
|
preIcon="ep:download"
|
||||||
|
:title="t('action.export') + ' HTML'"
|
||||||
|
@click="handleExport('HTML')"
|
||||||
|
/>
|
||||||
|
<XButton
|
||||||
|
type="primary"
|
||||||
|
preIcon="ep:download"
|
||||||
|
:title="t('action.export') + ' Word'"
|
||||||
|
@click="handleExport('Word')"
|
||||||
|
/>
|
||||||
|
<XButton
|
||||||
|
type="primary"
|
||||||
|
preIcon="ep:download"
|
||||||
|
:title="t('action.export') + ' Markdown'"
|
||||||
|
@click="handleExport('Markdown')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<IFrame v-if="!loding" v-loading="loding" :src="src" />
|
||||||
|
</ContentWrap>
|
||||||
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { IFrame } from '@/components/IFrame'
|
|
||||||
import * as DbDocApi from '@/api/infra/dbDoc'
|
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import download from '@/utils/download'
|
import download from '@/utils/download'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
|
import { IFrame } from '@/components/IFrame'
|
||||||
|
import * as DbDocApi from '@/api/infra/dbDoc'
|
||||||
|
|
||||||
const { t } = useI18n() // 国际化
|
const { t } = useI18n() // 国际化
|
||||||
const loding = ref(true)
|
|
||||||
const src = ref('')
|
const src = ref('')
|
||||||
|
const loding = ref(true)
|
||||||
/** 页面加载 */
|
/** 页面加载 */
|
||||||
const init = async () => {
|
const init = async () => {
|
||||||
const res = await DbDocApi.exportHtmlApi()
|
const res = await DbDocApi.exportHtmlApi()
|
||||||
@ -16,40 +42,16 @@ const init = async () => {
|
|||||||
src.value = blobUrl
|
src.value = blobUrl
|
||||||
loding.value = false
|
loding.value = false
|
||||||
}
|
}
|
||||||
/** 处理导出 HTML */
|
/** 处理导出 */
|
||||||
const handleExportHtml = async () => {
|
const handleExport = async (type: string) => {
|
||||||
const res = await DbDocApi.exportHtmlApi()
|
const res = await DbDocApi.exportHtmlApi()
|
||||||
download.html(res, '数据库文档.html')
|
if (type === 'HTML') { download.html(res, '数据库文档.html') }
|
||||||
}
|
if (type === 'Word') { download.word(res, '数据库文档.doc') }
|
||||||
/** 处理导出 Word */
|
if(type === 'Markdown') {download.markdown(res, '数据库文档.md')}
|
||||||
const handleExportWord = async () => {
|
|
||||||
const res = await DbDocApi.exportHtmlApi()
|
|
||||||
download.word(res, '数据库文档.doc')
|
|
||||||
}
|
|
||||||
/** 处理导出 Markdown */
|
|
||||||
const handleExportMarkdown = async () => {
|
|
||||||
const res = await DbDocApi.exportHtmlApi()
|
|
||||||
download.markdown(res, '数据库文档.md')
|
|
||||||
}
|
}
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await init()
|
await init()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
|
||||||
<ContentWrap title="数据库文档" message="https://doc.iocoder.cn/db-doc/">
|
|
||||||
<!-- 操作工具栏 -->
|
|
||||||
<div class="mb-10px">
|
|
||||||
<el-button type="primary" @click="handleExportHtml">
|
|
||||||
<Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') + ' HTML' }}
|
|
||||||
</el-button>
|
|
||||||
<el-button type="primary" @click="handleExportWord">
|
|
||||||
<Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') + ' Word' }}
|
|
||||||
</el-button>
|
|
||||||
<el-button type="primary" @click="handleExportMarkdown">
|
|
||||||
<Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') + ' Markdown' }}
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<IFrame v-if="!loding" v-loading="loding" :src="src" />
|
|
||||||
</ContentWrap>
|
|
||||||
</template>
|
|
||||||
|
|||||||
@ -1,12 +1,13 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { IFrame } from '@/components/IFrame'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
const BASE_URL = import.meta.env.VITE_BASE_URL
|
|
||||||
const src = ref(BASE_URL + '/druid/index.html')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<IFrame :src="src" />
|
<IFrame :src="src" />
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
</template>
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { IFrame } from '@/components/IFrame'
|
||||||
|
|
||||||
|
const BASE_URL = import.meta.env.VITE_BASE_URL
|
||||||
|
const src = ref(BASE_URL + '/druid/index.html')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,157 +1,3 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { onBeforeMount, ref } from 'vue'
|
|
||||||
import * as RedisApi from '@/api/infra/redis'
|
|
||||||
import { DICT_TYPE } from '@/utils/dict'
|
|
||||||
import * as echarts from 'echarts'
|
|
||||||
import { RedisKeyInfo, RedisMonitorInfoVO } from '@/api/infra/redis/types'
|
|
||||||
import {
|
|
||||||
ElRow,
|
|
||||||
ElCard,
|
|
||||||
ElCol,
|
|
||||||
ElTable,
|
|
||||||
ElTableColumn,
|
|
||||||
ElScrollbar,
|
|
||||||
ElDescriptions,
|
|
||||||
ElDescriptionsItem,
|
|
||||||
ElMessage
|
|
||||||
} from 'element-plus'
|
|
||||||
const cache = ref<RedisMonitorInfoVO>()
|
|
||||||
const keyListLoad = ref(true)
|
|
||||||
const keyList = ref<RedisKeyInfo[]>([])
|
|
||||||
// 基本信息
|
|
||||||
const readRedisInfo = async () => {
|
|
||||||
const data = await RedisApi.getCacheApi()
|
|
||||||
cache.value = data
|
|
||||||
loadEchartOptions(data.commandStats)
|
|
||||||
const redisKeysInfo = await RedisApi.getKeyDefineListApi()
|
|
||||||
keyList.value = redisKeysInfo
|
|
||||||
keyListLoad.value = false //加载完成
|
|
||||||
}
|
|
||||||
// 图表
|
|
||||||
const commandStatsRef = ref<HTMLElement>()
|
|
||||||
|
|
||||||
const usedmemory = ref<HTMLDivElement>()
|
|
||||||
|
|
||||||
const loadEchartOptions = (stats) => {
|
|
||||||
const commandStats = [] as any[]
|
|
||||||
const nameList = [] as string[]
|
|
||||||
stats.forEach((row) => {
|
|
||||||
commandStats.push({
|
|
||||||
name: row.command,
|
|
||||||
value: row.calls
|
|
||||||
})
|
|
||||||
nameList.push(row.command)
|
|
||||||
})
|
|
||||||
|
|
||||||
const commandStatsInstance = echarts.init(commandStatsRef.value!, 'macarons')
|
|
||||||
|
|
||||||
commandStatsInstance.setOption({
|
|
||||||
title: {
|
|
||||||
text: '命令统计',
|
|
||||||
left: 'center'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
type: 'scroll',
|
|
||||||
orient: 'vertical',
|
|
||||||
right: 30,
|
|
||||||
top: 10,
|
|
||||||
bottom: 20,
|
|
||||||
data: nameList,
|
|
||||||
textStyle: {
|
|
||||||
color: '#a1a1a1'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '命令',
|
|
||||||
type: 'pie',
|
|
||||||
radius: [20, 120],
|
|
||||||
center: ['40%', '60%'],
|
|
||||||
data: commandStats,
|
|
||||||
roseType: 'radius',
|
|
||||||
label: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
const usedMemoryInstance = echarts.init(usedmemory.value!, 'macarons')
|
|
||||||
usedMemoryInstance.setOption({
|
|
||||||
title: {
|
|
||||||
text: '内存使用情况',
|
|
||||||
left: 'center'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
formatter: '{b} <br/>{a} : ' + cache.value!.info.used_memory_human
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '峰值',
|
|
||||||
type: 'gauge',
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
progress: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
detail: {
|
|
||||||
formatter: cache.value!.info.used_memory_human
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: parseFloat(cache.value!.info.used_memory_human),
|
|
||||||
name: '内存消耗'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const dialogVisible = ref(false)
|
|
||||||
const keyTemplate = ref('')
|
|
||||||
const cacheKeys = ref()
|
|
||||||
const cacheForm = ref<{
|
|
||||||
key: string
|
|
||||||
value: string
|
|
||||||
}>({
|
|
||||||
key: '',
|
|
||||||
value: ''
|
|
||||||
})
|
|
||||||
const openKeyTemplate = async (row: RedisKeyInfo) => {
|
|
||||||
keyTemplate.value = row.keyTemplate
|
|
||||||
cacheKeys.value = await RedisApi.getKeyListApi(row.keyTemplate)
|
|
||||||
dialogVisible.value = true
|
|
||||||
}
|
|
||||||
const handleDeleteKey = async (row) => {
|
|
||||||
RedisApi.deleteKeyApi(row)
|
|
||||||
ElMessage.success('删除成功')
|
|
||||||
}
|
|
||||||
const handleDeleteKeys = async (row) => {
|
|
||||||
RedisApi.deleteKeysApi(row)
|
|
||||||
ElMessage.success('删除成功')
|
|
||||||
}
|
|
||||||
const handleKeyValue = async (row) => {
|
|
||||||
const res = await RedisApi.getKeyValueApi(row)
|
|
||||||
cacheForm.value = res
|
|
||||||
}
|
|
||||||
onBeforeMount(() => {
|
|
||||||
readRedisInfo()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
|
<el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
|
||||||
<el-row>
|
<el-row>
|
||||||
@ -282,6 +128,163 @@ onBeforeMount(() => {
|
|||||||
</el-row>
|
</el-row>
|
||||||
</XModal>
|
</XModal>
|
||||||
</template>
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onBeforeMount, ref } from 'vue'
|
||||||
|
import {
|
||||||
|
ElRow,
|
||||||
|
ElCard,
|
||||||
|
ElCol,
|
||||||
|
ElTable,
|
||||||
|
ElTableColumn,
|
||||||
|
ElScrollbar,
|
||||||
|
ElDescriptions,
|
||||||
|
ElDescriptionsItem
|
||||||
|
} from 'element-plus'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { DICT_TYPE } from '@/utils/dict'
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage'
|
||||||
|
import * as RedisApi from '@/api/infra/redis'
|
||||||
|
import { RedisKeyInfo, RedisMonitorInfoVO } from '@/api/infra/redis/types'
|
||||||
|
|
||||||
|
const { t } = useI18n() // 国际化
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
const cache = ref<RedisMonitorInfoVO>()
|
||||||
|
const keyListLoad = ref(true)
|
||||||
|
const keyList = ref<RedisKeyInfo[]>([])
|
||||||
|
// 基本信息
|
||||||
|
const readRedisInfo = async () => {
|
||||||
|
const data = await RedisApi.getCacheApi()
|
||||||
|
cache.value = data
|
||||||
|
loadEchartOptions(data.commandStats)
|
||||||
|
const redisKeysInfo = await RedisApi.getKeyDefineListApi()
|
||||||
|
keyList.value = redisKeysInfo
|
||||||
|
keyListLoad.value = false //加载完成
|
||||||
|
}
|
||||||
|
// 图表
|
||||||
|
const commandStatsRef = ref<HTMLElement>()
|
||||||
|
const usedmemory = ref<HTMLDivElement>()
|
||||||
|
|
||||||
|
const loadEchartOptions = (stats) => {
|
||||||
|
const commandStats = [] as any[]
|
||||||
|
const nameList = [] as string[]
|
||||||
|
stats.forEach((row) => {
|
||||||
|
commandStats.push({
|
||||||
|
name: row.command,
|
||||||
|
value: row.calls
|
||||||
|
})
|
||||||
|
nameList.push(row.command)
|
||||||
|
})
|
||||||
|
|
||||||
|
const commandStatsInstance = echarts.init(commandStatsRef.value!, 'macarons')
|
||||||
|
|
||||||
|
commandStatsInstance.setOption({
|
||||||
|
title: {
|
||||||
|
text: '命令统计',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
type: 'scroll',
|
||||||
|
orient: 'vertical',
|
||||||
|
right: 30,
|
||||||
|
top: 10,
|
||||||
|
bottom: 20,
|
||||||
|
data: nameList,
|
||||||
|
textStyle: {
|
||||||
|
color: '#a1a1a1'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '命令',
|
||||||
|
type: 'pie',
|
||||||
|
radius: [20, 120],
|
||||||
|
center: ['40%', '60%'],
|
||||||
|
data: commandStats,
|
||||||
|
roseType: 'radius',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
const usedMemoryInstance = echarts.init(usedmemory.value!, 'macarons')
|
||||||
|
usedMemoryInstance.setOption({
|
||||||
|
title: {
|
||||||
|
text: '内存使用情况',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: '{b} <br/>{a} : ' + cache.value!.info.used_memory_human
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '峰值',
|
||||||
|
type: 'gauge',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
progress: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
formatter: cache.value!.info.used_memory_human
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: parseFloat(cache.value!.info.used_memory_human),
|
||||||
|
name: '内存消耗'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const keyTemplate = ref('')
|
||||||
|
const cacheKeys = ref()
|
||||||
|
const cacheForm = ref<{
|
||||||
|
key: string
|
||||||
|
value: string
|
||||||
|
}>({
|
||||||
|
key: '',
|
||||||
|
value: ''
|
||||||
|
})
|
||||||
|
const openKeyTemplate = async (row: RedisKeyInfo) => {
|
||||||
|
keyTemplate.value = row.keyTemplate
|
||||||
|
cacheKeys.value = await RedisApi.getKeyListApi(row.keyTemplate)
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
const handleDeleteKey = async (row) => {
|
||||||
|
RedisApi.deleteKeyApi(row)
|
||||||
|
message.success(t('common.delSuccess'))
|
||||||
|
}
|
||||||
|
const handleDeleteKeys = async (row) => {
|
||||||
|
RedisApi.deleteKeysApi(row)
|
||||||
|
message.success(t('common.delSuccess'))
|
||||||
|
}
|
||||||
|
const handleKeyValue = async (row) => {
|
||||||
|
const res = await RedisApi.getKeyValueApi(row)
|
||||||
|
cacheForm.value = res
|
||||||
|
}
|
||||||
|
onBeforeMount(() => {
|
||||||
|
readRedisInfo()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.redis {
|
.redis {
|
||||||
height: 600px;
|
height: 600px;
|
||||||
|
|||||||
@ -1,12 +1,12 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { IFrame } from '@/components/IFrame'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
const BASE_URL = import.meta.env.VITE_BASE_URL
|
|
||||||
const src = ref(BASE_URL + '/admin/applications')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<IFrame :src="src" />
|
<IFrame :src="src" />
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
</template>
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { IFrame } from '@/components/IFrame'
|
||||||
|
|
||||||
|
const BASE_URL = import.meta.env.VITE_BASE_URL
|
||||||
|
const src = ref(BASE_URL + '/admin/applications')
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,11 +1,12 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { IFrame } from '@/components/IFrame'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
const src = ref('http://skywalking.shop.iocoder.cn')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<IFrame :src="src" />
|
<IFrame :src="src" />
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
</template>
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { IFrame } from '@/components/IFrame'
|
||||||
|
|
||||||
|
const src = ref('http://skywalking.shop.iocoder.cn')
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,12 +1,13 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { IFrame } from '@/components/IFrame'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
const BASE_URL = import.meta.env.VITE_BASE_URL
|
|
||||||
const src = ref(BASE_URL + '/doc.html')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<IFrame :src="src" />
|
<IFrame :src="src" />
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
</template>
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { IFrame } from '@/components/IFrame'
|
||||||
|
|
||||||
|
const BASE_URL = import.meta.env.VITE_BASE_URL
|
||||||
|
const src = ref(BASE_URL + '/doc.html')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user