<template>
|
<div
|
id="dataease-v2-embedded-sqlbot"
|
v-loading="loading"
|
class="dataease-v2-embedded-sqlbot"
|
></div>
|
</template>
|
|
<script lang="ts" setup>
|
import { onMounted, onUnmounted, reactive, ref } from 'vue'
|
import request from '@/config/axios'
|
import { useUserStoreWithOut } from '@/store/modules/user'
|
|
const userStore = useUserStoreWithOut()
|
const loading = ref(true)
|
const state = reactive({
|
domain: '',
|
id: '',
|
enabled: false,
|
valid: false
|
})
|
const sqlbotExist = ref(false)
|
const timer = ref()
|
|
const loadSqlbotInfo = () => {
|
const url = '/sysParameter/sqlbot'
|
request.get({ url }).then(res => {
|
if (res && res.data) {
|
const { domain, id, enabled, valid } = res.data
|
if (!enabled) {
|
console.error('sqlbot embedded disabled')
|
}
|
if (!valid) {
|
console.error('sqlbot embedded invalid')
|
}
|
state.domain = domain
|
state.id = id
|
state.enabled = enabled
|
state.valid = valid
|
loadSqlbotPage()
|
}
|
})
|
}
|
|
const loadSqlbotPage = () => {
|
const scriptId = 'dataease-v2-embedded-sqlbot-script'
|
const exitsScript = document.getElementById(scriptId)
|
if (exitsScript && window['sqlbot_embedded_handler']) {
|
mountedEmbeddedPage()
|
return
|
}
|
const script = document.createElement('script')
|
script.defer = true
|
script.async = true
|
script.id = scriptId
|
let sqlbotDomain = state.domain
|
if (sqlbotDomain.endsWith('/')) {
|
sqlbotDomain = sqlbotDomain.slice(0, -1)
|
}
|
script.src = `${sqlbotDomain}/xpack_static/sqlbot-embedded-dynamic.umd.js?t=${new Date().getTime()}`
|
script.onload = () => {
|
mountedEmbeddedPage()
|
}
|
document.head.appendChild(script)
|
}
|
|
const mountedEmbeddedPage = () => {
|
if (sqlbotExist.value) {
|
return
|
}
|
const tempTimer = setTimeout(() => {
|
if (window['sqlbot_embedded_handler']) {
|
window['sqlbot_embedded_handler'].mounted('#dataease-v2-embedded-sqlbot', {
|
embeddedId: state.id,
|
online: true,
|
userFlag: userStore.getUid
|
})
|
loading.value = false
|
sqlbotExist.value = true
|
if (tempTimer) {
|
clearTimeout(tempTimer)
|
}
|
}
|
}, 2000)
|
}
|
|
onMounted(() => {
|
loadSqlbotInfo()
|
timer.value = setInterval(() => {
|
loadSqlbotInfo()
|
}, 30000)
|
})
|
|
onUnmounted(() => {
|
if (timer.value) {
|
clearInterval(timer.value)
|
timer.value = null
|
}
|
})
|
</script>
|
|
<style lang="less" scoped>
|
.dataease-v2-embedded-sqlbot {
|
width: 100vw;
|
height: calc(100vh - 56px);
|
overflow: hidden;
|
display: flex;
|
}
|
</style>
|
