self-constructing_graph/src/views/GraphView.vue

<template>
    <el-row>
        <span style="text-align: right;">
            <h2>知识图谱</h2>
        </span>
    </el-row>
    <el-row style="margin:15px;">
        <el-button @click="handleRefreshTable">刷新</el-button>
        <el-button @click="handleStreamTest">Stream</el-button>
    </el-row>

    <el-row>
        <template v-for="(index) in pageData.records" :key="index">
            <el-card shadow="hover" style="width: 300px; margin: 10px;">
                <div slot="header" style="border-bottom: 1px solid #EFEFEF; height: 50px; clear: both;">
                    <span>#{{ index.graph_id }}</span>
                    <el-button @click="handleViewGraph(index)" style="float: right; width:75px; padding: 3px 0"
                        type="">查看</el-button>
                </div>
                <div class="card-content">
                    <div style="margin-top:15px;font-size:16px; clear: both;">
                        {{ index.name }}
                        <el-button @click="handleApply(index)" type="primary"
                            style="float: right; width:75px; padding: 3px 0;">应用</el-button>
                    </div>
                </div>
            </el-card>
        </template>


    </el-row>
    <el-row style="margin-top:30px;">
        <el-pagination style="margin-left: auto;" background layout="prev, pager, next" :total="pageData.total"
            :page-size="pageData.page_size" @current-change="handleCurrentPageChange"
            :current-page.sync="pageData.page">
        </el-pagination>
    </el-row>

</template>


<script setup lang="ts">

import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
    getJob,
    getJobs,
    getQueue,
    browseJobFile,
    getJobStatus,
    getJobStatusTag,
    JobSatus,
    deleteJob,
    updateJob,
    updateJobStatus,
    serverStreamRequest,
} from '@/api/AgentApi'
import type { JobData, RequestBody, GraphData } from '@/api/AgentApi'
import { getGraphs } from '@/api/GraphApi'

import { getSessionVar } from '@/utils/session'
//从路由参数中获取队列ID

interface PageData {
    page: number;
    pages: number;
    page_size: number;
    total: number;
    records: GraphData[];
}
const pageData = ref<PageData>({ page: 1, pages: 1, page_size: 10, total: 0, records: [] })
const route = useRoute()
const router = useRouter()

const handleRefreshTable = () => {
    pageData.value.page = 1
    loadGraphs()
}
function handleStreamTest() {
    var data: RequestBody = {
        id: "1",
        action: 'search_nodes',
        params: [
        ]
    }
    serverStreamRequest("/kb/stream", data)
}
function formatStatus(status: number) {
    return getJobStatus(status)
}

function handleViewGraph(graph: GraphData) {

    if (graph == null) {
        return
    }
    router.push({ name: `graph-mgr`, params: { id: graph.graph_id } })
}
function loadGraphs() {
    getGraphs({ page: pageData.value.page, page_size: pageData.value.page_size }).then((res: any) => {
        pageData.value.page = res.meta.page
        pageData.value.pages = res.meta.pages
        pageData.value.total = res.meta.total
        pageData.value.records = res.records
    })
}
function handleCurrentPageChange(page: number) {
    pageData.value.page = page
    loadGraphs()
}
function handleApply(record: GraphData) {
    // console.log("handleApply", record, record.name)
    loadGraphs()
}
onMounted(() => {
    loadGraphs()
})
</script>

<style lang="less" scoped>
.prop_header {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
}
</style>