浏览代码

修改样式

yangg 8 月之前
父节点
当前提交
b3a4f78d6b

+ 1 - 1
.env.development

@@ -2,5 +2,5 @@
 ENV = 'development'
 port = 8080
 # base api
-VUE_APP_BASE_API = 'http://192.168.1.188:8084'
+VUE_APP_BASE_API = 'http://58.246.234.210:8084'
 #192.168.1.200

文件差异内容过多而无法显示
+ 0 - 0
dist/index.html


文件差异内容过多而无法显示
+ 0 - 0
dist/static/css/chunk-51fb63a4.e867c599.css


文件差异内容过多而无法显示
+ 0 - 0
dist/static/css/chunk-6ccd69af.38ae0502.css


文件差异内容过多而无法显示
+ 0 - 0
dist/static/js/app.d80e7b68.js


文件差异内容过多而无法显示
+ 0 - 0
dist/static/js/chunk-41b10f99.13e73ca8.js


文件差异内容过多而无法显示
+ 0 - 0
dist/static/js/chunk-51fb63a4.bed252e5.js


文件差异内容过多而无法显示
+ 0 - 0
dist/static/js/chunk-6ccd69af.2bd3a865.js


文件差异内容过多而无法显示
+ 0 - 0
dist/static/js/chunk-cbf68ff6.53b06e0d.js


+ 17 - 2
src/views/dashboard/admin/index.vue

@@ -4,7 +4,15 @@
 
     <!--  <panel-group @handleSetLineChartData="handleSetLineChartData" />-->
     <el-row :gutter="20">
-      <el-col style="margin-bottom: 20px;" :span="24">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfixs">
+            <span>cpu使用率</span>
+          </div>
+          <instruChart style="height: 350px" :percentage="currentPercentage" />
+        </el-card>
+      </el-col>
+      <el-col style="margin-bottom: 20px;" :span="16">
         <el-card class="box-card">
           <div slot="header" class="clearfixs">
             <span>GPU使用率</span>
@@ -79,7 +87,8 @@ import TodoList from "./components/TodoList";
 import BoxCard from "./components/BoxCard";
 import TagCloud from "./components/tagCloud.vue";
 import RecentFile from "./components/recentFile.vue";
-import { listBuckets, structure_count } from "@/api/knowledge";
+import instruChart from "./components/instruChart.vue";
+import { listBuckets, structure_count,gpu_info } from "@/api/knowledge";
 import { mapState } from 'vuex';
 
 const lineChartData = {
@@ -115,6 +124,7 @@ export default {
     BoxCard,
     TagCloud,
     RecentFile,
+    instruChart
   },
   data() {
     return {
@@ -197,6 +207,11 @@ export default {
           this.kenVal = this.kenList[0];
         }
       });
+      gpu_info().then((res) => {
+        const total = res.data.data.cpu.memory.total;
+        const used = res.data.data.cpu.memory.used;
+        this.currentPercentage = Number((used / total).toFixed(2));
+      });
     },
 
     init() {

+ 60 - 43
src/views/dataCenter/components/dataInfo.vue

@@ -1,9 +1,17 @@
 <template>
-  <div class="data-info">
+  <div
+    class="data-info"
+    v-loading="isLoading"
+    element-loading-text="Excel文件加载中..."
+  >
     <el-card>
       <el-form :model="dataForm" label-width="120px">
         <el-form-item label="数据表编码:">
-          <el-input v-model="dataForm.code"></el-input>
+          <el-input
+            v-model="dataForm.code"
+            style="width: 30%"
+            placeholder="请输入数据表编码"
+          ></el-input>
         </el-form-item>
         <el-form-item label="所属分类:">
           <el-select
@@ -11,7 +19,7 @@
             clearable
             placeholder="请选择所属分类"
             size="large"
-            style="width: 100%"
+            style="width: 30%"
           >
             <el-option
               v-for="item in categoryList"
@@ -22,11 +30,15 @@
           </el-select>
         </el-form-item>
         <el-form-item label="数据表名称:">
-          <el-input v-model="dataForm.name"></el-input>
+          <el-input
+            v-model="dataForm.name"
+            style="width: 30%"
+            placeholder="请输入数据表名称"
+          ></el-input>
         </el-form-item>
         <el-form-item label="选择文件:">
           <el-upload
-            v-model:file-list="fileList"
+            l:file-list="fileList"
             :limit="1"
             action=""
             :multiple="false"
@@ -56,7 +68,7 @@
             v-model="dataForm.status"
             placeholder="请选择状态"
             size="large"
-            style="width: 100%"
+            style="width: 30%"
           >
             <el-option
               v-for="item in statusOptions"
@@ -105,6 +117,7 @@ export default {
   data() {
     return {
       isMaskShow: false,
+      isLoading: false,
       dataForm: {
         id: 0,
         code: "",
@@ -141,18 +154,17 @@ export default {
   methods: {
     initCategory() {
       let _this = this;
-      searchSourceDataCategory({ page: 1, pageSize: 9999, status: 5 }).then(
-        (res) => {
-          if (res.status != 200) return;
-          _this.categoryList = res.data.sourcecategories.map((res) => {
-            return {
-              id: res.id,
-              value: res.id,
-              name: res.name,
-            };
-          });
-        }
-      );
+
+      searchSourceDataCategory({ page: 1, pageSize: 9999 }).then((res) => {
+        if (res.status != 200) return;
+        _this.categoryList = res.data.sourcecategories.map((res) => {
+          return {
+            id: res.id,
+            value: res.id,
+            name: res.name,
+          };
+        });
+      });
     },
 
     loadData(id) {
@@ -160,34 +172,39 @@ export default {
       let par = {
         id: id,
       };
-      getSourceData(par).then((res) => {
-        if (res.status != 200) {
-          this.dataForm.id = 0;
-          return;
-        }
-        _this.dataForm = res.data;
-        _this.dataForm.sourceData = JSON.parse(_this.dataForm.source_data);
-        if (res.data.category && res.data.category.id) {
-          _this.dataForm.category_id = res.data.category.category_id;
-        }
+      _this.isLoading = true;
+      getSourceData(par)
+        .then((res) => {
+          if (res.status != 200) {
+            this.dataForm.id = 0;
+            return;
+          }
+          _this.dataForm = res.data;
+          _this.dataForm.sourceData = JSON.parse(_this.dataForm.source_data);
+          if (res.data.category && res.data.category.id) {
+            _this.dataForm.category_id = res.data.category.category_id;
+          }
 
-        _this.fileLoadStatus = true;
-        _this.$nextTick(() => {
-          luckysheet.destroy();
-          luckysheet.create({
-            container: "luckysheet", //dom id
-            data: _this.dataForm.sourceData.exportJson.sheets, //excel数据
-            lang: "zh",
-            hook: {
-              cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
-                // console.log("oldVal",oldValue);
-                // console.log("newVal",newValue);
-                //   console.log('exportJson',_this.dataForm.source_data.exportJson)
+          _this.fileLoadStatus = true;
+          _this.$nextTick(() => {
+            luckysheet.destroy();
+            luckysheet.create({
+              container: "luckysheet", //dom id
+              data: _this.dataForm.sourceData.exportJson.sheets, //excel数据
+              lang: "zh",
+              hook: {
+                cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
+                  // console.log("oldVal",oldValue);
+                  // console.log("newVal",newValue);
+                  //   console.log('exportJson',_this.dataForm.source_data.exportJson)
+                },
               },
-            },
+            });
           });
+        })
+        .finally(() => {
+          _this.isLoading = false; // 结束加载
         });
-      });
     },
 
     btnSave(e) {
@@ -253,7 +270,7 @@ export default {
       _this.fileLoadStatus = false;
       if (
         e.type ===
-          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
       ) {
         _this.fileLoadStatus = true;
         _this.fileList = [e];

+ 129 - 99
src/views/dataCenter/dataView.vue

@@ -1,111 +1,146 @@
 <template>
-  <div class="com-data-view">
-    <div id="luckysheet" ref='luckysheet' style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top:0px;bottom:0px;">
+  <div
+    class="com-data-view"
+    v-loading="isInitShow"
+    element-loading-text="加载中..."
+  >
+    <div
+      id="luckysheet"
+      ref="luckysheet"
+      style="
+        margin: 0px;
+        padding: 0px;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0px;
+        top: 0px;
+        bottom: 0px;
+      "
+    ></div>
+
+    <div
+      v-show="isMaskShow"
+      style="
+        position: absolute;
+        z-index: 1000000;
+        left: 0px;
+        top: 0px;
+        bottom: 0px;
+        right: 0px;
+        background: rgba(255, 255, 255, 0.8);
+        text-align: center;
+        font-size: 40px;
+        align-items: center;
+        justify-content: center;
+        display: flex;
+      "
+    >
+      下载中
     </div>
 
-
-    <div v-show="isMaskShow"
-      style="position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px; background: rgba(255, 255, 255, 0.8); text-align: center;font-size: 40px;align-items:center;justify-content: center;display:flex;">
-      下载中</div>
-
     <div class="btn-save">
-    <!--     <el-button type="primary" @click="onSave">保存修改</el-button> -->
+      <!--     <el-button type="primary" @click="onSave">保存修改</el-button> -->
     </div>
   </div>
 </template>
 
 
 <script>
-  import LuckyExcel from 'luckyexcel'
-  import {getSourceData} from "@/api/sourceData";
-  export default {
-    data() {
-      return {
-        isMaskShow: false,
-        dataForm:{
-          id:0,
-          code:'',
-          name:'',
-          sourceData:{
-            exportJson:null,
-            luckysheetfile:''
-          },
-          status:'',
+import LuckyExcel from "luckyexcel";
+import { getSourceData } from "@/api/sourceData";
+export default {
+  data() {
+    return {
+      isMaskShow: false,
+      isInitShow: false,
+      dataForm: {
+        id: 0,
+        code: "",
+        name: "",
+        sourceData: {
+          exportJson: null,
+          luckysheetfile: "",
         },
-      }
-    },
-    // mounted生命周期
-    mounted() {
-      // this.initSheet();
-      let id=this.$route.query.id;
-      this.loadSourceData(id);
-    },
-    // methods方法
-    methods: {
-
-      loadSourceData(id){
-        let _this=this;
-        getSourceData({id:id}).then(res=>{
-          if(res.status!=200)return;
-         _this.dataForm=res.data;
-         _this.dataForm.sourceData=JSON.parse(_this.dataForm.source_data);
-         _this.fileLoadStatus=true;
-
-         _this.$nextTick(() => {
-
-           luckysheet.destroy();
-           luckysheet.create({
-             container: 'luckysheet', //dom id
-             data: _this.dataForm.sourceData.exportJson.sheets, //excel数据
-             lang: 'zh',
-             allowEdit: false, // 是否允许前台编辑
-             hook:{
-               cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
-                 console.log("r",r);
-                 console.log("c",c);
-                 // console.log("oldVal",oldValue);
-                 // console.log("newVal",newValue);
-                 //   console.log('exportJson',_this.dataForm.source_data.exportJson)
-               },
-             },
-           });
-
-
-         });
-
-        })
-      },
-
-      onSave(e){
-         // 导出Excel文件
-         console.log(this.$refs.luckysheet);
+        status: "",
       },
+    };
+  },
+  // mounted生命周期
+  mounted() {
+    // this.initSheet();
+    let id = this.$route.query.id;
+    this.loadSourceData(id);
+  },
+  // methods方法
+  methods: {
+    loadSourceData(id) {
+      let _this = this;
+      _this.isInitShow = true;
+      getSourceData({ id: id })
+        .then((res) => {
+          if (res.status != 200) return;
+          _this.dataForm = res.data;
+          _this.dataForm.sourceData = JSON.parse(_this.dataForm.source_data);
+          _this.fileLoadStatus = true;
+
+          _this.$nextTick(() => {
+            luckysheet.destroy();
+            luckysheet.create({
+              container: "luckysheet", //dom id
+              data: _this.dataForm.sourceData.exportJson.sheets, //excel数据
+              lang: "zh",
+              allowEdit: false, // 是否允许前台编辑
+              hook: {
+                cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
+                  console.log("r", r);
+                  console.log("c", c);
+                  // console.log("oldVal",oldValue);
+                  // console.log("newVal",newValue);
+                  //   console.log('exportJson',_this.dataForm.source_data.exportJson)
+                },
+              },
+            });
+          });
+        })
+        .finally(() => {
+          _this.isInitShow = false; // 结束加载
+        });
+    },
 
+    onSave(e) {
+      // 导出Excel文件
+      console.log(this.$refs.luckysheet);
+    },
 
-      //加载excel文件
-      loadExcel(fileObj) {
-        if (fileObj == null) {
-          this.$alert("请选择正确的文件");
-          return;
-        }
-        const value = fileObj.url;
-        const name = fileObj.name;
-        this.isMaskShow = true;
-        LuckyExcel.transformExcelToLuckyByUrl(value, name, (exportJson, luckysheetfile) => {
+    //加载excel文件
+    loadExcel(fileObj) {
+      if (fileObj == null) {
+        this.$alert("请选择正确的文件");
+        return;
+      }
+      const value = fileObj.url;
+      const name = fileObj.name;
+      this.isMaskShow = true;
+      LuckyExcel.transformExcelToLuckyByUrl(
+        value,
+        name,
+        (exportJson, luckysheetfile) => {
           if (exportJson.sheets == null || exportJson.sheets.length == 0) {
-              alert("Failed to read the content of the excel file, currently does not support xls files!");
-              return;
+            alert(
+              "Failed to read the content of the excel file, currently does not support xls files!"
+            );
+            return;
           }
 
-
           this.isMaskShow = false;
           window.luckysheet.destroy();
           window.luckysheet.create({
-            container: 'luckysheet', //luckysheet is the container id
-             data: exportJson.sheets,
+            container: "luckysheet", //luckysheet is the container id
+            data: exportJson.sheets,
             title: exportJson.info.name,
             userInfo: exportJson.info.name.creator,
-             lang: 'zh',
+            lang: "zh",
             showinfobar: false, // 是否显示顶部信息栏
             showstatisticBar: true, // 是否显示底部计数栏
             sheetBottomConfig: true, // sheet页下方的添加行按钮和回到顶部按钮配置
@@ -115,26 +150,21 @@
             sheetFormulaBar: false, // 是否显示公式栏
             enableAddBackTop: false, // 返回头部按钮
             showsheetbar: false, // 是否显示底部sheet页按钮
-            enableAddRow: false,//允许添加行
+            enableAddRow: false, //允许添加行
             // 自定义配置底部sheet页按钮
-            events:{
-            },
+            events: {},
             showsheetbarConfig: {
               add: false,
               menu: false,
             },
           });
-
-        });
-
-
-
-
-      },
-    }
-  }
+        }
+      );
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-  @import "./dataView.scss"
+@import "./dataView.scss";
 </style>

+ 575 - 379
src/views/middPage/list.vue

@@ -1,395 +1,591 @@
 <template>
-    <div class="gpu-list">
-      <!-- 顶部筛选区域 -->
-      <div class="filter-section">
-        <el-select
-          v-model="selectedBucket"
-          placeholder="请选择知识库"
-          @change="handleBucketChange"
-        >
-          <el-option
-            v-for="item in buckets"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-  
-        <el-select
-          v-model="selectedType"
-          placeholder="请选择目录"
-          :disabled="!selectedBucket"
-          class="ml-15"
-        >
-          <el-option
-            v-for="item in types"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-  
-        <el-button
-          type="primary"
-          :loading="isSyncing"
-          :disabled="!selectedType"
-          class="ml-15"
-          @click="handleSyncData"
-        >
-          {{ isSyncing ? "同步中..." : "同步数据" }}
-        </el-button>
-      </div>
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <!-- 原有的文献列表 tab -->
-        <el-tab-pane label="文献列表" name="first">
-          <!-- 添加搜索表单 -->
-          <div class="search-form">
-            <el-form :inline="true" :model="searchForm" class="demo-form-inline" label-width="100px">
-              <el-form-item label="创建时间:">
-                <el-date-picker
-                  v-model="searchForm.createTimeRange"
-                  type="daterange"
-                  range-separator="至"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  value-format="YYYY-MM-DD"
-                />
-              </el-form-item>
-              <el-form-item label="文本时间:">
-                <el-date-picker
-                  v-model="searchForm.textTimeRange"
-                  type="daterange"
-                  range-separator="至"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  value-format="YYYY-MM-DD"
-                />
-              </el-form-item>
-              <el-form-item label="标签:">
-                <el-input
-                  v-model="searchForm.tag"
-                  placeholder="请输入标签关键词"
-                  clearable
-                />
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="handleSearch">搜索</el-button>
-                <el-button @click="resetSearch">重置</el-button>
-              </el-form-item>
-            </el-form>
-          </div>
-          <!-- 数据表格区域 -->
-          <el-table v-loading="isLoading" :data="gpuList" style="width: 100%">
-            <el-table-column prop="id" label="ID" />
-            <el-table-column prop="name" label="名称">
-              <template #default="{ row }">
-                <el-link @click="handleNameClick(row)">{{ row.name }}</el-link>
-              </template>
-            </el-table-column>
-            <el-table-column prop="type" label="文档类型" />
-            <el-table-column prop="status" label="处理状态">
-              <template #default="{ row }">
-                <el-tag :type="getStatusType(row.status)">
-                  {{ getStatusText(row.status) }}
-                </el-tag>
-              </template>
-            </el-table-column>
-          </el-table>
-  
-          <!-- 分页器 -->
-          <el-pagination
-            class="pagination"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-sizes="[10, 20, 50, 100]"
-            :page-size="pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-          />
-        </el-tab-pane>
-  
-        <!-- 添加 SOTA详情 tab -->
-        <el-tab-pane label="SOTA详情" name="second">
-          <el-table :data="sotaDetailsList" style="width: 100%">
-            <el-table-column label="Identifier" prop="identifier" />
-            <el-table-column label="Device" prop="device" />
-            <el-table-column label="Outcomes" prop="outcomes" />
-            <el-table-column label="Unit for analysis" prop="unit" />
-            <el-table-column label="Mean" prop="mean" />
-            <!-- 操作列与原有类似 -->
-          </el-table>
-        </el-tab-pane>
-  
-        <!-- 添加 SOTA汇总表 tab -->
-        <el-tab-pane label="SOTA汇总表" name="third">
-          <el-table :data="sotaSummaryList" style="width: 100%">
-            <el-table-column label="Summary" prop="summary" />
-            <el-table-column label="EqMD" prop="eqmd" />
-            <el-table-column label="Pain:VAS" prop="painVas" />
-            <!-- 操作列与原有类似 -->
-          </el-table>
-        </el-tab-pane>
-      </el-tabs>
+  <div class="gpu-list">
+    <!-- 顶部筛选区域 -->
+    <div class="filter-section">
+      <el-select
+        v-model="selectedBucket"
+        placeholder="请选择知识库"
+        @change="handleBucketChange"
+      >
+        <el-option
+          v-for="item in buckets"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+
+      <el-select
+        v-model="selectedType"
+        placeholder="请选择目录"
+        :disabled="!selectedBucket"
+        class="ml-15"
+      >
+        <el-option
+          v-for="item in types"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+
+      <el-button
+        type="primary"
+        :loading="isSyncing"
+        :disabled="!selectedType"
+        class="ml-15"
+        @click="handleSyncData"
+      >
+        {{ isSyncing ? "同步中..." : "同步数据" }}
+      </el-button>
     </div>
-  </template>
-  
-  <script>
-  import { debounce } from "lodash-es";
-  import {
-    GET_list,
-    GET_sync,
-    listBuckets,
-    selectTypeList,
-    getDetail,
-  } from "@/api/knowledge";
-  
-  // 状态映射表
-  const STATUS_MAP = {
-    1: { text: "未处理", type: "info" },
-    2: { text: "已审核", type: "warning" },
-    3: { text: "已处理", type: "success" },
-    4: { text: "已作废", type: "danger" },
-    5: { text: "使用中", type: "primary" },
-  };
-  
-  export default {
-    name: "GpuList",
-  
-    data() {
-      return {
-        gpuList: [],
-        currentPage: 1,
-        pageSize: 10,
-        total: 0,
-        isLoading: false,
-        isSyncing: false,
-        buckets: [],
-        types: [],
-        selectedBucket: null,
-        selectedType: null,
-        activeName: "first", // 当前激活的tab
-        sotaDetailsList: [], // SOTA详情列表数据
-        sotaSummaryList: [], // SOTA汇总表数据
-        searchForm: {
-          createTimeRange: [],
-          textTimeRange: [],
-          tag: "",
-        },
-      };
-    },
-  
-    created() {
-      // 使用防抖处理数据加载
-      this.debouncedFetchGpuList = debounce(this.fetchGpuList, 300);
-    },
-  
-    mounted() {
-      this.initialize();
-    },
-  
-    methods: {
-      // 处理搜索
-      handleSearch() {
-        this.currentPage = 1; // 重置页码
-        this.fetchGpuList();
-      },
-  
-      // 重置搜索
-      resetSearch() {
-        this.searchForm = {
-          createTimeRange: [],
-          textTimeRange: [],
-          tag: "",
-        };
-        this.handleSearch();
-      },
-  
-      // 初始化数据
-      async initialize() {
-        try {
-          await this.fetchBuckets();
-          await this.fetchGpuList();
-        } catch (error) {
-          this.$message.error("初始化数据失败");
-          console.error("初始化失败:", error);
-        }
-      },
-  
-      // 获取状态文本
-      getStatusText(status) {
-        return STATUS_MAP[status]?.text || "未知状态";
-      },
-  
-      // 获取状态样式类型
-      getStatusType(status) {
-        return STATUS_MAP[status]?.type || "info";
-      },
-  
-      // 获取知识库列表
-      async fetchBuckets() {
-        try {
-          const { data } = await listBuckets();
-          this.buckets = data;
-        } catch (error) {
-          this.$message.error("获取知识库列表失败");
-          console.error("获取知识库失败:", error);
-        }
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <!-- 原有的文献列表 tab -->
+      <el-tab-pane label="文献列表" name="first">
+        <!-- 添加搜索表单 -->
+        <div class="search-form">
+          <el-form
+            :inline="true"
+            :model="searchForm"
+            class="demo-form-inline"
+            label-width="100px"
+            ><el-form-item label="名称:">
+              <el-input
+                v-model="searchForm.name"
+                clearable
+                placeholder="请输入文献名称"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="创建时间:">
+              <el-date-picker
+                v-model="searchForm.createTimeRange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+              />
+            </el-form-item>
+            <!-- <el-form-item label="文本时间:">
+              <el-date-picker
+                v-model="searchForm.textTimeRange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+              />
+            </el-form-item> -->
+            <el-form-item label="标签:">
+              <el-select
+                v-model="searchForm.id"
+                multiple
+                filterable
+                remote
+                reserve-keyword
+                :remote-method="searchFormTags"
+                :loading="searchTagsLoading"
+                placeholder="请输入标签关键词"
+                clearable
+              >
+                <el-option
+                  v-for="tag in searchTagOptions"
+                  :key="tag.id"
+                  :label="tag.name"
+                  :value="tag.name"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSearch">搜索</el-button>
+              <el-button @click="resetSearch">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="batch-operations">
+          <el-button
+            type="primary"
+            @click="handleBatchTag"
+            :disabled="selectedRows.length == 0"
+            >批量绑定标签</el-button
+          >
+        </div>
+        <!-- 数据表格区域 -->
+        <el-table
+          v-loading="isLoading"
+          :data="gpuList"
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column prop="name" label="名称">
+            <template #default="{ row }">
+              <el-link @click="handleNameClick(row)">{{ row.name }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column prop="tags" label="已绑定标签">
+            <template #default="{ row }">
+              <el-tag
+                v-for="(item, index) in row.tags"
+                :key="index"
+                type=""
+                :style="index !== 0 ? 'margin-left: 5px;' : ''"
+              >
+                {{ item }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="type" label="文档类型" width="100" />
+          <el-table-column prop="create_time" label="创建时间" width="200"/>
+          <el-table-column prop="status" label="处理状态" width="100">
+            <template #default="{ row }">
+              <el-tag :type="getStatusType(row.status)">
+                {{ getStatusText(row.status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页器 -->
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        />
+      </el-tab-pane>
+
+      <!-- 添加 SOTA详情 tab -->
+      <el-tab-pane label="SOTA详情" name="second">
+        <el-table :data="sotaDetailsList" style="width: 100%">
+          <el-table-column label="Identifier" prop="identifier" />
+          <el-table-column label="Device" prop="device" />
+          <el-table-column label="Outcomes" prop="outcomes" />
+          <el-table-column label="Unit for analysis" prop="unit" />
+          <el-table-column label="Mean" prop="mean" />
+          <!-- 操作列与原有类似 -->
+        </el-table>
+      </el-tab-pane>
+
+      <!-- 添加 SOTA汇总表 tab -->
+      <el-tab-pane label="SOTA汇总表" name="third">
+        <el-table :data="sotaSummaryList" style="width: 100%">
+          <el-table-column label="Summary" prop="summary" />
+          <el-table-column label="EqMD" prop="eqmd" />
+          <el-table-column label="Pain:VAS" prop="painVas" />
+          <!-- 操作列与原有类似 -->
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 添加标签对话框 -->
+    <el-dialog
+      title="批量绑定标签"
+      :visible.sync="tagDialogVisible"
+      width="800px"
+    >
+      <el-form :model="tagForm" label-width="150px">
+        <el-form-item label="标签:">
+          <el-select
+            style="width: 350px"
+            v-model="tagForm.tags"
+            multiple
+            filterable
+            remote
+            reserve-keyword
+            :remote-method="searchTags"
+            :loading="tagsLoading"
+            placeholder="请输入关键词搜索标签"
+          >
+            <el-option
+              v-for="tag in tagOptions"
+              :key="tag.id"
+              :label="tag.name"
+              :value="tag.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="tagDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitBatchTag">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { debounce } from "lodash-es";
+import {
+  GET_list,
+  GET_sync,
+  listBuckets,
+  selectTypeList,
+  getDetail,
+  search_tags,
+  edit_tags,
+  search,
+} from "@/api/knowledge";
+import axios from "axios";
+// 状态映射表
+const STATUS_MAP = {
+  1: { text: "未处理", type: "info" },
+  2: { text: "已审核", type: "warning" },
+  3: { text: "已处理", type: "success" },
+  4: { text: "已作废", type: "danger" },
+  5: { text: "使用中", type: "primary" },
+};
+
+export default {
+  name: "GpuList",
+
+  data() {
+    return {
+      gpuList: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      isLoading: false,
+      isSyncing: false,
+      buckets: [],
+      types: [],
+      selectedBucket: null,
+      selectedType: null,
+      activeName: "first", // 当前激活的tab
+      sotaDetailsList: [], // SOTA详情列表数据
+      sotaSummaryList: [], // SOTA汇总表数据
+      searchForm: {
+        name: "",
+        createTimeRange: [],
+        textTimeRange: [],
+        id: [],
       },
-  
-      // 处理知识库变更
-      async handleBucketChange(val) {
-        this.selectedType = null;
-        this.types = [];
-  
-        if (!val) return;
-  
-        try {
-          const { data } = await selectTypeList({ kb_id: val });
-          this.types = data.dataList;
-          this.debouncedFetchGpuList();
-        } catch (error) {
-          this.$message.error("获取目录列表失败");
-        }
+      selectedRows: [], // 选中的行
+      tagDialogVisible: false, // 标签对话框显示状态
+      tagForm: {
+        tags: [], // 选中的标签ID数组
       },
-  
-      // 同步数据处理
-      async handleSyncData() {
-        if (!this.selectedType) {
-          this.$message.warning("请先选择目录");
-          return;
-        }
-  
-        this.isSyncing = true;
+      tagOptions: [], // 标签选项
+      tagsLoading: false, // 标签加载状态
+
+      searchTagOptions: [], // 搜索表单的标签选项
+      searchTagsLoading: false, // 搜索表单的标签加载状态
+    };
+  },
+
+  created() {
+    // 使用防抖处理数据加载
+    this.debouncedFetchGpuList = debounce(this.fetchGpuList, 300);
+  },
+
+  mounted() {
+    this.initialize();
+  },
+
+  methods: {
+    /* 搜索栏模糊查找 */
+    /* 搜索表单的标签搜索 */
+    async searchFormTags(query) {
+      if (query !== "") {
+        this.searchTagsLoading = true;
         try {
-          await GET_sync({ doc_type_id: this.selectedType });
-          this.$message.success("同步成功");
-          await this.fetchGpuList();
+          const { data } = await search_tags({ keyword: query });
+          this.searchTagOptions = data.data.items;
         } catch (error) {
-          this.$message.error("同步失败");
+          this.$message.error("搜索标签失败");
+          console.error(error);
         } finally {
-          this.isSyncing = false;
+          this.searchTagsLoading = false;
         }
-      },
-  
-      // 获取GPU列表数据
-      async fetchGpuList() {
-        this.isLoading = true;
+      } else {
+        this.searchTagOptions = [];
+      }
+    },
+    // 处理表格选择变化
+    handleSelectionChange(rows) {
+      this.selectedRows = rows;
+    },
+
+    // 处理批量标签
+    handleBatchTag() {
+      this.tagDialogVisible = true;
+    },
+
+    /* 模糊搜索 */
+    async searchTags(query) {
+      if (query !== "") {
+        this.tagsLoading = true;
         try {
-          const params = {
-            page: this.currentPage,
-            page_size: this.pageSize,
-            doc_type_id: this.selectedType || 36,
-            // 添加搜索参数
-            create_time_start: this.searchForm.createTimeRange[0],
-            create_time_end: this.searchForm.createTimeRange[1],
-            text_time_start: this.searchForm.textTimeRange[0],
-            text_time_end: this.searchForm.textTimeRange[1],
-            tag: this.searchForm.tag,
-          };
-  
-          const { data } = await GET_list(params);
-          this.gpuList = data.list.map((item) => {
-            const nameParts = item.name.split(".");
-            return {
-              ...item,
-              name: nameParts[0],
-              type: nameParts.length > 1 ? nameParts.pop() : "未知",
-            };
+          const { data } = await search_tags({
+            keyword: query,
           });
-          console.log(this.gpuList);
-          this.total = data.total;
-          this.currentPage = data.current_page;
-          this.pageSize = data.page_size;
+          this.tagOptions = data.data.items;
         } catch (error) {
-          this.$message.error("获取列表数据失败");
+          this.$message.error("搜索标签失败");
+          console.error(error);
         } finally {
-          this.isLoading = false;
+          this.tagsLoading = false;
         }
-      },
-  
-      // 处理每页数量变化
-      handleSizeChange(val) {
-        this.pageSize = val;
-        this.debouncedFetchGpuList();
-      },
-  
-      // 处理页码变化
-      handleCurrentChange(val) {
-        this.currentPage = val;
+      } else {
+        this.tagOptions = []; // 当搜索词为空时清空选项
+      }
+    },
+
+    // 修改提交方法
+    async submitBatchTag() {
+      try {
+        const ids = this.selectedRows.map((row) => row.id);
+        // 这里需要添加实际的API调用
+        /* await edit_tags({
+          ids,
+          tagIds: this.tagForm.tags, // 现在传递的是标签ID数组
+        }); */
+        const idObject = { literature_ids: ids, tag_ids: this.tagForm.tags };
+        const response = await axios.post(
+          `${process.env.VUE_APP_BASE_API}/literature-tags/relation_tags/`,
+          idObject,
+          {
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (response.status !== 200) return;
+        console.log(this.tagForm.tags);
+        this.$message.success("标签更新成功");
+        this.tagDialogVisible = false;
+        this.fetchGpuList(); // 刷新列表
+      } catch (error) {
+        this.$message.error("标签更新失败");
+      }
+    },
+    // 处理搜索
+    handleSearch() {
+      this.currentPage = 1; // 重置页码
+      this.fetchGpuList();
+    },
+
+    // 重置搜索
+    resetSearch() {
+      this.searchForm = {
+        name: "",
+        createTimeRange: [],
+        textTimeRange: [],
+        id: [],
+      };
+      this.handleSearch();
+    },
+
+    // 初始化数据
+    async initialize() {
+      try {
+        await this.fetchBuckets();
+        await this.fetchGpuList();
+      } catch (error) {
+        this.$message.error("初始化数据失败");
+        console.error("初始化失败:", error);
+      }
+    },
+
+    // 获取状态文本
+    getStatusText(status) {
+      return STATUS_MAP[status]?.text || "未知状态";
+    },
+
+    // 获取状态样式类型
+    getStatusType(status) {
+      return STATUS_MAP[status]?.type || "info";
+    },
+
+    // 获取知识库列表
+    async fetchBuckets() {
+      try {
+        const { data } = await listBuckets();
+        this.buckets = data;
+      } catch (error) {
+        this.$message.error("获取知识库列表失败");
+        console.error("获取知识库失败:", error);
+      }
+    },
+
+    // 处理知识库变更
+    async handleBucketChange(val) {
+      this.selectedType = null;
+      this.types = [];
+
+      if (!val) return;
+
+      try {
+        const { data } = await selectTypeList({ kb_id: val });
+        this.types = data.dataList;
         this.debouncedFetchGpuList();
-      },
-  
-      // 处理名称点击
-      async handleNameClick(row) {
-        try {
-          /* const res = await getDetail({ id: row.id })
-          console.log('详情数据:', res) */
-          this.$router.push({
-            path: "/knowledge/middPage/index",
-            query: { id: row.id,name:row.name },
-          });
-          // 这里可以添加详情处理逻辑
-        } catch (error) {
-          this.$message.error("获取详情失败");
-        }
-      },
-      // Tab切换处理
-      handleClick(tab) {
-        // 根据tab加载相应数据
-        switch (tab.name) {
-          case "second":
-            this.loadSotaDetails();
-            break;
-          case "third":
-            this.loadSotaSummary();
-            break;
-        }
-      },
-  
-      // 加载SOTA详情数据
-      async loadSotaDetails() {
-        try {
-          // 这里调用API获取SOTA详情数据
-          const response = await getSotaDetails();
-          this.sotaDetailsList = response.data;
-        } catch (error) {
-          this.$message.error("获取SOTA详情失败");
-          console.error(error);
-        }
-      },
-  
-      // 加载SOTA汇总表数据
-      async loadSotaSummary() {
-        try {
-          // 这里调用API获取SOTA汇总数据
-          const response = await getSotaSummary();
-          this.sotaSummaryList = response.data;
-        } catch (error) {
-          this.$message.error("获取SOTA汇总数据失败");
-          console.error(error);
+      } catch (error) {
+        this.$message.error("获取目录列表失败");
+      }
+    },
+
+    // 同步数据处理
+    async handleSyncData() {
+      if (!this.selectedType) {
+        this.$message.warning("请先选择目录");
+        return;
+      }
+
+      this.isSyncing = true;
+      try {
+        await GET_sync({ doc_type_id: this.selectedType });
+        this.$message.success("同步成功");
+        await this.fetchGpuList();
+      } catch (error) {
+        this.$message.error("同步失败");
+      } finally {
+        this.isSyncing = false;
+      }
+    },
+
+    // 获取GPU列表数据
+    async fetchGpuList() {
+      this.isLoading = true;
+      try {
+        // 构建基础参数
+        const params = {
+          page: this.currentPage,
+          page_size: this.pageSize,
+          doc_type_id: this.selectedType || 36,
+          keyword: this.searchForm.name,
+          tag_names: this.searchForm.id,
+        };
+
+        // 只有当日期范围存在且有效时才添加日期参数
+        if (
+          this.searchForm.createTimeRange &&
+          this.searchForm.createTimeRange.length === 2
+        ) {
+          params.create_time_start = this.searchForm.createTimeRange[0];
+          params.create_time_end = this.searchForm.createTimeRange[1];
         }
-      },
+
+        const response = await axios.post(
+          `${process.env.VUE_APP_BASE_API}/literature-data/search/`,
+          params,
+          {
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        if (response.status !== 200) return;
+
+        this.gpuList = response.data.data.list.map((item) => {
+          const nameParts = item.name.split(".");
+          return {
+            ...item,
+            name: nameParts[0],
+            type: nameParts.length > 1 ? nameParts.pop() : "未知",
+          };
+        });
+
+        this.total = response.data.data.total;
+        this.currentPage = response.data.data.current_page;
+        this.pageSize = response.data.data.page_size;
+      } catch (error) {
+        console.error("获取列表数据失败:", error); // 添加错误日志输出
+        this.$message.error("获取列表数据失败");
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    // 处理每页数量变化
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.debouncedFetchGpuList();
+    },
+
+    // 处理页码变化
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.debouncedFetchGpuList();
+    },
+
+    // 处理名称点击
+    async handleNameClick(row) {
+      try {
+        /* const res = await getDetail({ id: row.id })
+        console.log('详情数据:', res) */
+        this.$router.push({
+          path: "/knowledge/middPage/index",
+          query: { id: row.id, name: row.name },
+        });
+        // 这里可以添加详情处理逻辑
+      } catch (error) {
+        this.$message.error("获取详情失败");
+      }
+    },
+    // Tab切换处理
+    handleClick(tab) {
+      // 根据tab加载相应数据
+      switch (tab.name) {
+        case "second":
+          this.loadSotaDetails();
+          break;
+        case "third":
+          this.loadSotaSummary();
+          break;
+      }
+    },
+
+    // 加载SOTA详情数据
+    async loadSotaDetails() {
+      try {
+        // 这里调用API获取SOTA详情数据
+        const response = await getSotaDetails();
+        this.sotaDetailsList = response.data;
+      } catch (error) {
+        this.$message.error("获取SOTA详情失败");
+        console.error(error);
+      }
+    },
+
+    // 加载SOTA汇总表数据
+    async loadSotaSummary() {
+      try {
+        // 这里调用API获取SOTA汇总数据
+        const response = await getSotaSummary();
+        this.sotaSummaryList = response.data;
+      } catch (error) {
+        this.$message.error("获取SOTA汇总数据失败");
+        console.error(error);
+      }
     },
-  };
-  </script>
-  
-  <style scoped>
-  .gpu-list {
-    padding: 20px;
-  }
-  
-  .filter-section {
-    margin-bottom: 20px;
-  }
-  
-  .ml-15 {
-    margin-left: 15px;
-  }
-  
-  .pagination {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 15px;
-  }
-  </style>
+  },
+};
+</script>
+
+<style scoped>
+.gpu-list {
+  padding: 20px;
+}
+
+.filter-section {
+  margin-bottom: 20px;
+}
+
+.ml-15 {
+  margin-left: 15px;
+}
+
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 15px;
+}
+</style>

部分文件因为文件数量过多而无法显示