解决知识图谱构建配置的警告

src/components/SideMenu.vue

@@ -5,13 +5,17 @@
         <h3>工作台</h3>
         <el-menu-item index="/kmplatform/kgbuilder/home" :route="{ name: 'home' }">
           <template #title>
-            <!-- <el-icon></el-icon> -->
+            <el-icon>
+              <Monitor />
+            </el-icon>
             <span>工作台概览</span>
           </template>
         </el-menu-item>
         <el-menu-item index="/kmplatform/kgbuilder/config" :route="{ name: 'config' }">
           <template #title>
-            <!-- <el-icon></el-icon> -->
+            <el-icon>
+              <Setting />
+            </el-icon>
             <span>配置</span>
           </template>
         </el-menu-item>
@@ -20,6 +24,9 @@
         <el-menu-item v-for="queue in queues" :key="queue.id"
           :index="'/kmplatform/kgbuilder/workspace/queue/' + queue.id" @click="queueClicked(queue)">
           <template #title>
+            <el-icon>
+              <Briefcase />
+            </el-icon>
             <span>{{ queue.name }}</span>
             <el-tag v-if="queue.type == 'input'" effect="light" round>START</el-tag>
           </template>
@@ -27,10 +34,16 @@
 
         <h3>知识图谱</h3>
         <el-menu-item index="/kmplatform/kgbuilder/workspace/graph" @click="handleMenuClick('graph')">
+          <el-icon>
+            <Collection />
+          </el-icon>
           <span>全部图谱</span>
         </el-menu-item>
         <el-menu-item index="/kmplatform/kgbuilder/workspace/graph-std-schemas"
           @click="handleMenuClick('graph-std-schemas')">
+          <el-icon>
+            <Memo />
+          </el-icon>
           <span>图谱标准</span>
         </el-menu-item>
       </el-menu>

src/utils/http.js

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { ElMessage } from 'element-plus'
-import { getSessionVar, deleteSessionVar } from "@/utils/session";
+import { getSessionVar, clearSessionVar } from "@/utils/session";
+import { useRouter } from "vue-router"
 
 const NETWORK_ERROR = '网络错误，请稍后重试！'
 // 创建 axios 实例
@@ -35,8 +36,7 @@ http.interceptors.request.use(
 // 响应拦截器
 http.interceptors.response.use(
   (response) => {
-    // 对响应数据做些什么
-    // 可以在此处理响应数据
+    // 对响应数据做些什么，可以在此处理响应数据
     const { data, code, message } = response.data
     if (code === 200) {
       return data || response.data
@@ -50,11 +50,18 @@ http.interceptors.response.use(
     // return response.data;  // 这里直接返回 response.data，方便后续使用
   },
   (error) => {
-    // 响应错误时做些什么
-    // 根据错误类型做相应处理
+    // 处理未登录
+    if (error.response.status == 401) {
+      const router = useRouter();
+      clearSessionVar()
+      router.push("/login")
+      return null
+    }
+
+    // 响应错误时做些什么，根据错误类型做相应处理
+
     if (error.response) {
       // 请求已发出，服务器响应了状态码，但状态码超出了 2xx 的范围
-
       ElMessage({
         message: NETWORK_ERROR,
         type: "warning",
@@ -63,7 +70,6 @@ http.interceptors.response.use(
 
     } else if (error.request) {
       // 请求已经发出，但没有收到响应
-
       ElMessage({
         message: "没有收到响应",
         type: "warning"

src/utils/session.ts

@@ -12,6 +12,6 @@ export function deleteSessionVar(name: string) {
     return sessionStorage.removeItem(name);
 }
 
-export function clearSessionVar(name: string) {
+export function clearSessionVar() {
     return sessionStorage.clear();
 }

src/views/ConfigurationView.vue

@@ -39,7 +39,7 @@
                         }}<br />
                         当错误时，转到 {{ queue.queue_config?.error.queue_category }}_{{ queue.queue_config?.error.queue_name
                         }}<br />
-                        最大实例数：<el-select v-model="queue.queue_config.max_instance" style="width:50px;margin-right:5px;">
+                        最大实例数：<el-select v-model="queue.queue_config.max_instance" style="width:55px;margin-right:5px;">
                             <el-option v-for="item in [1, 2, 3, 4, 5]" :key="item" :label="item"
                                 :value="item"></el-option>
                         </el-select>
@@ -54,11 +54,11 @@
             </el-tab-pane>
             <el-tab-pane label="大模型配置" name="second">
 
-                <el-button type="text" @click="handleSaveLLMConfig" style="">保存</el-button>
+                <el-button link type="primary" @click="handleSaveLLMConfig" style="">保存</el-button>
                 <div style="width: 100%;display: flex; flex-direction: row; flex-wrap:wrap;">
                     <div
                         style="width: 300px;height:210px;border: 1px solid #CDCDCD; display: flex; flex-direction: column;justify-content:center;margin-right: 8px; margin-bottom: 8px;">
-                        <el-button type="text" @click="handleAddLLMConfig">添加</el-button>
+                        <el-button link type="primary" @click="handleAddLLMConfig">添加</el-button>
                     </div>
                     <template v-for="(item) in llmConfig.items" :key="item.id">
                         <div
@@ -89,13 +89,13 @@
                                     <el-input v-else v-model="item.api_key"></el-input>
                                 </el-form-item>
                                 <el-form-item style="display:grid;justify-items: right; height:25px;">
-                                    <el-button v-if="!item.is_default" type="text"
+                                    <el-button v-if="!item.is_default" link type="primary"
                                         @click="handleSetLLMConfigDefault(item)" style=" ">设为默认</el-button>
-                                    <el-button type="text" @click="handleDeleteLLMConfig(item)"
+                                    <el-button link type="danger" @click="handleDeleteLLMConfig(item)"
                                         v-if="getLLMConfigEditFlag(item) == false" style=" ">删除</el-button>
-                                    <el-button type="text" @click="handleEditLLMConfig(item)"
+                                    <el-button link type="primary" @click="handleEditLLMConfig(item)"
                                         v-if="getLLMConfigEditFlag(item) == false" style=" ">编辑</el-button>
-                                    <el-button type="text" @click="handleCancelEditLLMConfig(item)"
+                                    <el-button link type="primary" @click="handleCancelEditLLMConfig(item)"
                                         v-if="getLLMConfigEditFlag(item) == true" style=" ">取消</el-button>
 
                                 </el-form-item>
@@ -114,7 +114,7 @@
     </el-row>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, nextTick } from 'vue'
 import { getConfig, setConfig, getQueues } from '@/api/AgentApi'
 import { ElMessage } from 'element-plus'
 import { formatOverflowText } from '@/utils/misc'
@@ -235,9 +235,25 @@ function handleAddLLMConfig() {
     llmConfigEditFlag.value.set(item, true)
 }
 function loadQueues() {
-    getQueues().then((res) => {
-        queueData.value = res.records as QueueData[]
-        loadQueueConfigData()
+    getQueues().then(async (res) => {
+        queueData.value = []
+        let data = res.records as QueueData[]
+        // loadQueueConfigData()
+        await Promise.allSettled(data.map(async (queue, index) => {
+            var queue_code = data[index].queue_category + "_" + data[index].queue_name
+            await getConfig({ code: queue_code }).then((res) => {
+                var config: ConfigData = res.records[0] as ConfigData
+                var config_data: QueueConfig = JSON.parse(config.content) as QueueConfig
+                data[index].queue_config = config_data
+                if (data[index].queue_config != null) {
+                    if (data[index].queue_config.max_instance === undefined) {
+                        data[index].queue_config.max_instance = 1
+                    }
+                }
+            })
+            queueData.value.push(data[index])
+        }))
+        // queueData.value = data
     })
 }
 onMounted(() => {

src/views/JobView.vue

@@ -1,95 +1,118 @@
 <template>
 
-    <TextViewDialog ref="textViewDialog" :title="'查看文件'" :content="textViewData"></TextViewDialog>        
+    <TextViewDialog ref="textViewDialog" :title="'查看文件'" :content="textViewData"></TextViewDialog>
 
     <el-row>
         <el-page-header @back="handleGoBack" :content="jobData?.job_name" title="返回">
         </el-page-header>
         <el-divider></el-divider>
-    </el-row>    
+    </el-row>
     <el-row>
         <el-col :span="20">
-        <el-tabs type="border-card" v-model="activeTab">
-            <el-tab-pane label="基本信息" name="basic_info">
-                <el-row>
-                    <el-col :span="6">
-                        <div class="prop_header">任务ID</div>
-                    </el-col>
-                    <el-col :span="6"><div>{{ jobData?.id }}</div></el-col>
-                    <el-col :span="6"><div class="prop_header">任务类型</div></el-col>
-                    <el-col :span="6">
-                        <div>{{ getJobCategory(jobData?.start_category) }}</div>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="6">
-                        <div class="prop_header">当前工序</div>
-                    </el-col>
-                    <el-col :span="6"><div>{{ getJobCategory(jobData?.job_category) }}</div></el-col>
-                    <el-col :span="6"><div class="prop_header">任务名称</div></el-col>
-                    <el-col :span="6">
-                        <el-tooltip class="item" effect="dark" :content="jobData?.job_name" placement="top-end">                            
-                            <div>{{ formatFilename(jobData?.job_name,20) }}</div>
-                        </el-tooltip>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="6"><div class="prop_header">任务状态</div></el-col>
-                    <el-col :span="6">
-                        <div>{{ getJobStatus(jobData?.status) }}</div>
-                    </el-col>
-                    <el-col :span="6"><div class="prop_header">创建人</div></el-col>
-                    <el-col :span="6">
-                        <div>{{ jobData?.job_creator }}</div>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="6">
-                        <div class="prop_header">创建时间</div>
-                    </el-col>
-                    <el-col :span="6"><div>{{ jobData?.created }}</div></el-col>
-                    <el-col :span="6"><div class="prop_header">更新时间</div></el-col>
-                    <el-col :span="6"><div>{{ jobData?.updated }}</div>
-                    </el-col>
-                </el-row>
-                <el-row>
-                        <div class="prop_header" style="background-color: #EFEFEF; width: 100%;">日志</div><br/>
-                </el-row>
-                <el-row>
-                        <div style="white-space: pre-wrap; height:500px; width:100%; overflow-y: auto;">{{ jobData?.job_logs }}</div>
+            <el-tabs type="border-card" v-model="activeTab">
+                <el-tab-pane label="基本信息" name="basic_info">
+                    <el-row>
+                        <el-col :span="6">
+                            <div class="prop_header">任务ID</div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div>{{ jobData?.id }}</div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div class="prop_header">任务类型</div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div>{{ getJobCategory(jobData?.start_category) }}</div>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="6">
+                            <div class="prop_header">当前工序</div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div>{{ getJobCategory(jobData?.job_category) }}</div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div class="prop_header">任务名称</div>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-tooltip class="item" effect="dark" :content="jobData?.job_name" placement="top-end">
+                                <div>{{ formatFilename(jobData?.job_name, 20) }}</div>
+                            </el-tooltip>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="6">
+                            <div class="prop_header">任务状态</div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div>{{ getJobStatus(jobData?.status) }}</div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div class="prop_header">创建人</div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div>{{ jobData?.job_creator }}</div>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="6">
+                            <div class="prop_header">创建时间</div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div>{{ jobData?.created }}</div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div class="prop_header">更新时间</div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div>{{ jobData?.updated }}</div>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <div class="prop_header" style="background-color: #EFEFEF; width: 100%;">日志</div><br />
+                    </el-row>
+                    <el-row>
+                        <div style="white-space: pre-wrap; height:500px; width:100%; overflow-y: auto;">{{
+                            jobData?.job_logs }}</div>
 
-                </el-row>
+                    </el-row>
 
 
-            </el-tab-pane>
-            <el-tab-pane label="文件夹" name="file_browse">                
-                <el-row >
+                </el-tab-pane>
+                <el-tab-pane label="文件夹" name="file_browse">
+                    <el-row>
                         <el-col :span="4" style="border-right: 1px solid #CDCDCD;">
-                            <el-tree :data="jobFileData" :props="jobFileTree" @node-click="handleTreeNodeClick"></el-tree>             
+                            <el-tree :data="jobFileData" :props="jobFileTree"
+                                @node-click="handleTreeNodeClick"></el-tree>
                         </el-col>
-                        <el-col :span="20" style="display:flex;flex-direction: row; flex-wrap: wrap; height:500px; overflow: auto;">  
+                        <el-col :span="20"
+                            style="display:flex;flex-direction: row; flex-wrap: wrap; height:500px; overflow: auto;">
                             <template v-for="item in jobFileInDir">
                                 <el-card shadow="hover" style="width: 200px; height: 120px; margin: 10px;">
                                     <div class="card-header">
-                                    <span style="font-size:10px;">
-                                        <span v-if="item.type=='file'">文件</span>
-                                        <span v-if="item.type=='dir'">文件夹</span>
-                                    </span>
+                                        <span style="font-size:10px;">
+                                            <span v-if="item.type == 'file'">文件</span>
+                                            <span v-if="item.type == 'dir'">文件夹</span>
+                                        </span>
                                     </div>
                                     <div class="card-content">
-                                     <el-tooltip class="item" effect="dark" :content="item.name" placement="top-end">
-                                        <span style="font-size:12px;display: flex; flex-wrap: nowrap; height:25px;">{{ formatFilename(item.name, 20) }}</span>
-                                    </el-tooltip>
+                                        <el-tooltip class="item" effect="dark" :content="item.name" placement="top-end">
+                                            <span
+                                                style="font-size:12px;display: flex; flex-wrap: nowrap; height:25px;">{{
+                                                    formatFilename(item.name, 20) }}</span>
+                                        </el-tooltip>
                                     </div>
-                                
+
                                     <div class="bottom clearfix">
-                                        
-                                        <a :href="'/api/file/download/'+jobData?.id+'?path='+encodeURIComponent(item.path)">下载</a>
-                                        <a  @click="handleViewFile(jobData, item.path)">查看</a>
+
+                                        <a
+                                            :href="'/api/file/download/' + jobData?.id + '?path=' + encodeURIComponent(item.path)">下载</a>
+                                        <a @click="handleViewFile(jobData, item.path)">查看</a>
                                     </div>
                                 </el-card>
 
-                            </template>                  
+                            </template>
                             <!-- <el-table v-if="jobFileInDir.length > 0" :data="jobFileInDir" highlight-current-row style="width: 100%;">
                                 <el-table-column prop="type" label="类型" width="50">
      
@@ -105,36 +128,37 @@
                                 </el-table-column>
                             </el-table> -->
                         </el-col>
-                </el-row>
-            </el-tab-pane>
-        </el-tabs>
+                    </el-row>
+                </el-tab-pane>
+            </el-tabs>
         </el-col>
         <el-col :span="4">
-        <el-menu @select="handleMenuSelect" :default-active="activeTab" mode="vertical" class="el-menu-vertical-demo" menu-trigger="click" >
-            <el-menu-item-group index="CHANGE_CATEGORY">
-                <template #title>工序变更</template>
-                <el-menu-item :index="jobData.start_category">开始文字提取</el-menu-item>
-                <el-menu-item index="SYSTEM_CHUNKS">开始文本切片</el-menu-item>
-                <el-menu-item index="SYSTEM_KB_EXTRACT">开始抽取知识</el-menu-item>
-                <el-menu-item index="SYSTEM_KB_BUILD">开始构建图谱</el-menu-item>
-            </el-menu-item-group>
-        </el-menu>
+            <el-menu @select="handleMenuSelect" :default-active="activeTab" mode="vertical"
+                class="el-menu-vertical-demo" menu-trigger="click">
+                <el-menu-item-group index="CHANGE_CATEGORY">
+                    <template #title>工序变更</template>
+                    <el-menu-item :index="jobData.start_category">开始文字提取</el-menu-item>
+                    <el-menu-item index="SYSTEM_CHUNKS">开始文本切片</el-menu-item>
+                    <el-menu-item index="SYSTEM_KB_EXTRACT">开始抽取知识</el-menu-item>
+                    <el-menu-item index="SYSTEM_KB_BUILD">开始构建图谱</el-menu-item>
+                </el-menu-item-group>
+            </el-menu>
         </el-col>
-        </el-row>
+    </el-row>
 </template>
 <script lang="ts" setup>
-import {  onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { getJob,browseJobFile,getJobStatus,getFileContent,putQueueJob,getJobCategory } from '@/api/AgentApi'
+import { getJob, browseJobFile, getJobStatus, getFileContent, putQueueJob, getJobCategory } from '@/api/AgentApi'
 import { formatDate } from '@/utils/misc'
 import TextViewDialog from '@/dialogs/TextViewDialog.vue'
-import type { JobData  } from '@/api/AgentApi'
+import type { JobData } from '@/api/AgentApi'
 import { ElMessageBox, ElNotification } from 'element-plus'
 
 interface JobFile {
-    type:string
-    name:string
-    path:string
+    type: string
+    name: string
+    path: string
 }
 const router = useRouter()
 
@@ -145,57 +169,57 @@ var textViewContent = "hello"
 const textViewData = ref(textViewContent)
 const textViewDialog = ref()
 const jobFileTree = ref({
-          children: 'children',
-          label: 'display_name'
-        })
+    children: 'children',
+    label: 'display_name'
+})
 const jobFileData = ref([])
 const jobFileInDir = ref<JobFile[]>([])
 
 const activeTab = ref('basic_info')
-function formatFolderName(name: string){
+function formatFolderName(name: string) {
     let translate = new Map([
-        ["logs", "日志"], 
-        ["results", "结果"], 
-        ["chunks", "切片"], 
-        ["files", "文件"], 
-        ["ocr_output", "文本转换结果"], 
-        ["kb_extract", "知识抽取"], 
+        ["logs", "日志"],
+        ["results", "结果"],
+        ["chunks", "切片"],
+        ["files", "文件"],
+        ["ocr_output", "文本转换结果"],
+        ["kb_extract", "知识抽取"],
         ["kb_build", "知识构建"],
         ["upload", "文件上传"],
         ["output", "输出"]]
-    ) 
+    )
     if (translate.get(name) != undefined) {
         return translate.get(name)
     }
     return name
 }
 function handleTreeNodeClick(data: any, node: any, event: any) {
-        if (data.type=='dir'){
-        browseJobFile({ job_id:jobData.value.id, path:data.name}).then((res) => {
+    if (data.type == 'dir') {
+        browseJobFile({ job_id: jobData.value.id, path: data.name }).then((res) => {
             jobFileInDir.value = res.records
         })
     }
 }
-function handleViewFile(job:JobData, path:string) {
-    const url = '/api/file/view/'+job?.id+'?path='+encodeURIComponent(path)
+function handleViewFile(job: JobData, path: string) {
+    const url = '/api/file/view/' + job?.id + '?path=' + encodeURIComponent(path)
     console.log(url)
     getFileContent(url).then((res) => {
         console.log(res)
         textViewData.value = res.records[0].content
-        textViewDialog.value.showDialog(true) 
+        textViewDialog.value.showDialog(true)
     })
 }
 function handleGoBack() {
-    router.push("/workspace/queue/0")
+    router.push({ name: 'queue', params: { id: 0 } })
 }
 function loadJobData() {
     console.log(jobId.value)
     getJob(jobId.value).then((res) => {
         jobData.value = res.records[0] as JobData
-        
-        browseJobFile({ job_id:jobId.value, path:""}).then((res) => {        
+
+        browseJobFile({ job_id: jobId.value, path: "" }).then((res) => {
             for (let i = 0; i < res.records.length; i++) {
-                res.records[i]['label'] = res.records[i].name 
+                res.records[i]['label'] = res.records[i].name
                 res.records[i]['children'] = []
                 res.records[i]['display_name'] = formatFolderName(res.records[i].name)
             }
@@ -204,66 +228,67 @@ function loadJobData() {
         })
     })
 }
-function formatFilename(name:string, length:number) {
-    if (name == undefined){
+function formatFilename(name: string, length: number) {
+    if (name == undefined) {
         return ""
     }
     if (name.length > length) {
-        return name.substring(0, length/2) + "..." + name.substring(name.length - length/2)
-    } 
+        return name.substring(0, length / 2) + "..." + name.substring(name.length - length / 2)
+    }
     return name
 }
-function handleMenuSelect(key:string, keyPath:string){
+function handleMenuSelect(key: string, keyPath: string) {
     var category = getJobCategory(keyPath)
     ElMessageBox.confirm(
         `确定要转移任务到队列 "${category}" 吗？`,
-        '提示' , 
+        '提示',
     ).then(() => {
         let category = key.split("_")[0]
-        let name = key.split("_")[2] ?  key.split("_")[1] +'_' + key.split("_")[2] : key.split("_")[1]
+        let name = key.split("_")[2] ? key.split("_")[1] + '_' + key.split("_")[2] : key.split("_")[1]
         handleJobChangeCategory(category, name)
     })
 }
-function handleJobChangeCategory(category:string, name:string) {
+function handleJobChangeCategory(category: string, name: string) {
 
     var params = { job_id: jobId.value, queue_category: category, queue_name: name }
-    
-    putQueueJob(params).then((res:any) => {
+
+    putQueueJob(params).then((res: any) => {
         ElNotification({
             title: '提示',
             message: '任务已转移到队列',
-            type: 'success',            
+            type: 'success',
             duration: 3000
-          }) 
-        loadJobData()
         })
+        loadJobData()
+    })
 
 }
 onMounted(() => {
     var route = useRoute()
     console.log(route.params)
-    var id = Number.parseInt(route.params.id  as string)
+    var id = Number.parseInt(route.params.id as string)
     jobId.value = id
     loadJobData()
 })
 </script>
 <style lang="css" scoped>
-    .prop_header {
-        font-weight: bold;
-        margin-bottom: 5px;
-    }
-    
-  .bottom {
+.prop_header {
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.bottom {
     margin-top: 15px;
     line-height: 12px;
-  }
-  .clearfix:before,
-  .clearfix:after {
-      display: table;
-      content: "";
-  }
-  
-  .clearfix:after {
-      clear: both
-  }
+}
+
+.clearfix:before,
+.clearfix:after {
+    display: table;
+    content: "";
+}
+
+.clearfix:after {
+    clear: both
+}
 </style>

src/views/KMPlatform/KnowledgeBase/KBM/KnowledgeBaseManagement.vue

@@ -293,8 +293,8 @@ function handleAddKBTags(index) {
         type: 'success',
         message: `添加知识库标签成功！`,
       })
-      // KBData.value.splice(index, 1, data)
-      getKnowledgeBase()
+      KBData.value.splice(index, 1, data)
+      // getKnowledgeBase()
     })
     .catch((e) => {
       console.log(e)

src/views/QueueView.vue

@@ -13,7 +13,7 @@
     <el-row style="margin:15px;">
         <el-form :model="searchForm" :inline="true" label-position="right" :size="'medium'">
             <el-form-item label="任务名称" prop="job_name" :label-width="70" style="margin-left:0px;margin-right:0px;">
-                <el-input v-model="searchForm.job_name" :maxlength="32" :size="30"></el-input>
+                <el-input v-model="searchForm.job_name" placeholder="请输入任务名称" :maxlength="32" :size="30"></el-input>
             </el-form-item>
             <el-form-item label="任务类型" prop="start_category" :label-width="70"
                 style="margin-left:5px;margin-right:0px;">
@@ -59,7 +59,7 @@
         <el-table :data="pageData.records" height="650" style="width: 100%;" highlight-current-row
             @current-change="handleCurrentChange">
             <el-table-column prop="id" label="ID" width="50"></el-table-column>
-            <el-table-column prop="job_name" label="文件名称" width="200"></el-table-column>
+            <el-table-column prop="job_name" label="文件名称"></el-table-column>
             <el-table-column prop="start_category" label="任务类型" width="200">
                 <template v-slot="scope">
                     {{ formatJobCategory(scope.row.start_category) }}
@@ -76,7 +76,7 @@
                     <el-tag :type="getJobStatusTag(scope.row.status)">{{ formatStatus(scope.row.status) }}</el-tag>
                 </template>
             </el-table-column>
-            <el-table-column label="操作" width="500">
+            <el-table-column label="操作">
                 <template v-slot="scope">
                     <el-menu mode="horizontal">
                         <el-sub-menu index="1">
@@ -92,10 +92,12 @@
 
     </el-row>
     <el-row style="margin-top:30px;">
-        <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.page_size"
-            @current-change="handleCurrentPageChange" :current-page.sync="pageData.page">
-        </el-pagination>
-        <span style="margin-left: 20px;">{{ pageData.total }}条记录</span>
+        <div class="pagination">
+            <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.page_size"
+                @current-change="handleCurrentPageChange" :current-page.sync="pageData.page">
+            </el-pagination>
+            <span style="margin-right: 20px;">{{ pageData.total }}条记录</span>
+        </div>
     </el-row>
     <el-drawer title="工作详情" v-model="showDrawer" :direction="showDrawerDirection" size="45%">
         <el-tabs type="border-card" v-model="jobDetailsActivateTab">
@@ -543,4 +545,13 @@ onMounted(() => {
 .el-icon-arrow-down {
     font-size: 12px;
 }
+
+.pagination {
+    margin-left: auto;
+    display: flex;
+    /* text-align: right; */
+    justify-content: end;
+    align-items: center;
+    gap: 10px;
+}
 </style>