sqlflow优化

vue-fastapi-frontend/src/api/meta/metaInfo.js

@@ -17,6 +17,15 @@ export function runBloodAnalysis(query) {
     headers: {dashUserName:query.userName,dashPassword:query.password}
   })
 }
+export function runBloodAnalysisBySql(query) {
+  return request({
+    url: '/blood-analysis-api/bloodAnalysis/sql/analysis',
+    method: 'get',
+    params: query,
+    headers: {dashUserName:query.userName,dashPassword:query.password}
+  })
+}
+
 // 查询参数列表
 export function getMetaDataList(query) {
   return request({

vue-fastapi-frontend/src/views/sqlFlow/index.vue

@@ -4,18 +4,45 @@
     <div class="sql-container" :style="{ width: leftWidth + 'px' }">
       <!-- 工具栏 -->
       <div class="toolbar">
+
+
+        <!-- 数据库类型 -->
         <el-select
           v-model="dbType"
           placeholder="选择数据库类型"
           size="small"
-          style="width: 160px"
+          style="width: 140px; margin-left: 10px;"
         >
           <el-option label="MySQL" value="MYSQL" />
           <el-option label="PostgreSQL" value="PG" />
           <el-option label="SQL Server" value="MSSQL" />
           <el-option label="Oracle" value="ORACLE" />
+          <el-option label="DB2" value="DB2" />
         </el-select>
+        <!-- 系统选择 -->
+        <el-select
+          v-model="selectedSystem"
+          placeholder="选择系统"
+          size="small"
+          style="width: 160px"
+        >
+          <el-option
+            v-for="sys in dsSysList"
+            :key="sys.id"
+            :label="sys.name"
+            :value="sys.id"
+          />
+        </el-select>
+        <!-- 模式 -->
+        <el-input
+          v-model="defaultModel"
+          placeholder="输入模式名"
+          size="small"
+          style="width: 140px; margin-left: 10px;"
+          clearable
+        />
 
+        <!-- 执行按钮 -->
         <el-button
           type="primary"
           size="small"
@@ -29,7 +56,7 @@
       <!-- SQL 编辑器 -->
       <SQLCodeMirror
         v-if="activeColumnTab === 'proc'"
-        :data="procStr"
+        v-model:data="procStr"
         :dbType="dbType"
       />
     </div>
@@ -47,9 +74,14 @@
 <script setup>
 import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
 import { ElMessage } from 'element-plus'
-import { getMetaDataBloodRelship } from '@/api/meta/metaInfo'
+import { getMetaDataBloodRelship, runBloodAnalysisBySql } from '@/api/meta/metaInfo'
 import BloodRelation from '@/views/meta/metaInfo/bloodRelationSql.vue'
 import SQLCodeMirror from '@/components/codemirror/SQLCodeMirrorSqlFlow.vue'
+import useUserStore from '@/store/modules/user'
+import cache from "@/plugins/cache";
+
+const userStore = useUserStore()
+const dsSysList = userStore.dsSysList
 
 // ========================= 数据定义 =========================
 const activeColumnTab = ref('proc')
@@ -57,6 +89,11 @@ const procStr = ref('SELECT * FROM users LIMIT 100;')
 const dbType = ref('MYSQL')
 const containerRef = ref(null)
 
+// 当前选中系统
+const selectedSystem = ref(dsSysList?.[0]?.id || null)
+// 模式（可手动输入）
+const defaultModel = ref('')
+
 // 当前元数据信息
 const currentMetaData = reactive({
   tabEngName: 't_dim_comp',
@@ -80,48 +117,79 @@ const isDragging = ref(false)
 let startX = 0
 let startWidth = 0
 
-const startDragging = e => {
+const startDragging = (e) => {
   isDragging.value = true
   startX = e.clientX
   startWidth = leftWidth.value
-  document.body.style.userSelect = 'none' // 禁止文字选中
+  document.body.style.userSelect = 'none'
   document.addEventListener('mousemove', handleDragging)
   document.addEventListener('mouseup', stopDragging)
 }
 
-const handleDragging = e => {
+const handleDragging = (e) => {
   if (!isDragging.value) return
-  const containerLeft = containerRef.value?.getBoundingClientRect().left || 0
   const delta = e.clientX - startX
   const newWidth = startWidth + delta
   const minWidth = 300
-  const maxWidth = window.innerWidth - 400 // 保证右侧至少有空间
+  const maxWidth = window.innerWidth - 400
   leftWidth.value = Math.min(Math.max(newWidth, minWidth), maxWidth)
 }
 
 const stopDragging = () => {
   isDragging.value = false
-  document.body.style.userSelect = '' // 恢复文字选中
+  document.body.style.userSelect = ''
   document.removeEventListener('mousemove', handleDragging)
   document.removeEventListener('mouseup', stopDragging)
 }
 
 // ========================= 方法 =========================
 const changeBloodOption = () => {
-  getMetaDataBloodRelship(currentMetaData.ssysId).then(res => {
+  getMetaDataBloodRelship(currentMetaData.ssysId).then((res) => {
     bloodRelation.value = res.data
   })
 }
 
-const executeSql = () => {
+/**
-  console.log('执行 SQL：', procStr.value)
+ * 执行 SQL 并生成血缘分析图
-  console.log('数据库类型：', dbType.value)
+ */
-  ElMessage.success(`已在 ${dbType.value} 数据库中执行 SQL`)
+const executeSql = async () => {
+  if (!selectedSystem.value) {
+    ElMessage.warning('请选择系统')
+    return
+  }
+
+  if (!procStr.value.trim()) {
+    ElMessage.warning('请输入 SQL 语句')
+    return
+  }
+
+  const params = {
+    sqlType: dbType.value,
+    defaultSystem: selectedSystem.value,
+    defaultModel: defaultModel.value || '',
+    sql: procStr.value,
+    userName: cache.local.get("username"),
+    password: cache.local.get("password")
+  }
+console.log(params)
+  try {
+    ElMessage.info('正在执行血缘分析，请稍候...')
+    const res = await runBloodAnalysisBySql(params)
+    if (res?.data) {
+      bloodRelation.value = res.data
+      ElMessage.success('血缘分析执行成功')
+    } else {
+      ElMessage.warning('未返回血缘数据')
+    }
+  } catch (err) {
+    console.error(err)
+    ElMessage.error('执行血缘分析失败')
+  }
 }
 
 // ========================= 生命周期 =========================
 onMounted(() => {
-  changeBloodOption()
+  changeBloodOption() // 初始化时仅加载血缘，不执行SQL
 })
 
 onBeforeUnmount(() => {