From a53981aea70d2247120954a96f9f462c6bad936b Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期一, 12 八月 2024 16:52:54 +0800
Subject: [PATCH] 修改智能体的bug问题

---
 src/views/dmx/model/index.vue |  400 +++++++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 329 insertions(+), 71 deletions(-)

diff --git a/src/views/dmx/model/index.vue b/src/views/dmx/model/index.vue
index 7965e45..bf2602d 100644
--- a/src/views/dmx/model/index.vue
+++ b/src/views/dmx/model/index.vue
@@ -1,126 +1,306 @@
 <template>
   <div class="container">
-    <Breadcrumb :items="['澶фā鍨�', '澶фā鍨嬬鐞�']" />
+    <Breadcrumb :items="['澶фā鍨�', '妯″瀷绠$悊']" />
+
     <a-row :gutter="20" align="stretch">
       <a-col :span="24">
-        <a-card class="general-card" :title="$t('澶фā鍨嬬鐞�')">
+        <a-card
+          class="general-card"
+          style="min-height: 130px"
+          :title="$t('澶фā鍨嬬鐞�')"
+        >
           <a-row justify="space-between">
-            <a-col :span="24">
+            <a-col :span="24" class="table_add_clore" v-if="loading">
               <a-tabs
-                :active-key="activeKey"
+                :default-active-key="tabKey"
                 type="line"
                 :editable="true"
                 @tab-click="changeTabs"
                 @add="handleAdd"
                 @delete="handleDelete"
+                show-add-button
+                auto-switch
               >
                 <a-tab-pane
-                  v-for="(item, index) of data"
-                  :key="item.key"
-                  :title="item.title"
-                  :closable="index >= 4"
+                  v-for="(item, index) in tabData"
+                  :key="index"
+                  :title="index"
+                  :closable="Object.keys(tabData).length >= 4"
                 >
-                  <div style="display: flex; flex-wrap: wrap;justify-content: space-between;">
-                    <div class="card-wrap"    v-for="(item, index) of data" :key="index">
-                      <a-card :bordered="false" hoverable >
-                        <template #cover>
-                          <div
-                          >
+                  <a-scrollbar
+                    style="height: calc(100vh - 320px); overflow: auto"
+                  >
+                    <div
+                      style="display: flex; flex-wrap: wrap"
+                      class="card_content"
+                    >
+                      <div class="card-wrap">
+                        <div class="card_wrap_box">
+                          <div class="card_wrap_box_img">
                             <img
-                              :style="{ width: '100%', transform: 'translateY(-20px)' }"
-                              alt="dessert"
-                              src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
+                              :style="{
+                                width: '100%',
+                              }"
+                              alt="鏆傛棤鍥剧墖"
+                              :src="item.logo ? httpUrl + item.logo : pdfImg"
                             />
                           </div>
-                        </template>
-                        <div class="arco-card-body-content">
-                          <div class="arco-card-body-content-title">
-                            {{ item.title }}
+                          <a-card :bordered="false" hoverable>
+                            <div class="arco-card-body-content">
+                              <div
+                                class="arco-card-body-content-title"
+                                style="word-wrap: break-word"
+                              >
+                                {{ item.tags }}
+                              </div>
+                              <!-- <div class="arco-card-body-content-dec">{{
+                            list.type
+                          }}</div> -->
+                            </div>
+                          </a-card>
+                          <div class="arco-btn-group">
+                            <a-space class="btn-group">
+                              <!-- <editModel></editModel> -->
+                              <a-button
+                                type="primary"
+                                @click="handleEditModel(item, 1)"
+                              >
+                                缂栬緫
+                              </a-button>
+                            </a-space>
                           </div>
                         </div>
-                        <div style="position: absolute; bottom: 1rem; right: 1rem;">
-                          <a-space>
-                            <a-button>
-                              鍒犻櫎
-                            </a-button>
-                            <editModel></editModel>
-                          </a-space>
+                      </div>
+                      <div
+                        class="card-wrap"
+                        v-for="(list, index) of item.llm"
+                        :key="index"
+                      >
+                        <div class="card_wrap_box">
+                          <div class="card_wrap_box_img">
+                            <img
+                              :style="{
+                                width: '100%',
+                              }"
+                              alt="鏆傛棤鍥剧墖"
+                              :src="list.logo ? httpUrl + list.logo : pdfImg"
+                            />
+                            <!--   src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp" -->
+                          </div>
+                          <a-card :bordered="false" hoverable>
+                            <div class="arco-card-body-content">
+                              <div class="arco-card-body-content-title">
+                                {{ list.name }}
+                              </div>
+                              <div class="arco-card-body-content-dec">{{
+                                list.type
+                              }}</div>
+                            </div>
+                          </a-card>
+                          <div class="arco-btn-group">
+                            <a-space class="btn-group">
+                              <a-button @click="handleDeleteModel(list)">
+                                鍒犻櫎
+                              </a-button>
+                              <a-button
+                                type="primary"
+                                @click="handleEditModel(list)"
+                              >
+                                缂栬緫
+                              </a-button>
+
+                              <!-- <editModel></editModel> -->
+                            </a-space>
+                          </div>
                         </div>
-                      </a-card>
+                      </div>
                     </div>
-                  </div>
+                  </a-scrollbar>
                 </a-tab-pane>
               </a-tabs>
             </a-col>
             <div> </div>
-            <a-input-search
-              :placeholder="$t('cardList.searchInput.placeholder')"
-              style="width: 240px; position: absolute; top: 60px; right: 60px"
-            />
-            <div style="position: absolute; top: 60px; right: 20px">
-              <addModel></addModel>
+            <div class="box_right">
+              <!-- <div class="search_input">
+                <a-input-search
+                  :placeholder="$t('cardList.searchInput.placeholder')"
+                  style="width: 240px"
+                />
+              </div> -->
+              <div>
+                <!-- <addModel></addModel> -->
+                <a-button type="primary" @click="handleAddModel">
+                  <template #icon>
+                    <icon-plus />
+                  </template>
+                  娣诲姞
+                </a-button>
+              </div>
             </div>
-
           </a-row>
         </a-card>
       </a-col>
     </a-row>
+    <!-- 娣诲姞妯″瀷 -->
+    <addPageModel
+      v-model:show="show"
+      :task_id="task_id"
+      :type="modelType"
+      :title="title"
+      :editList="editList"
+      @refresh-parent="refreshParentMethod"
+      v-if="show"
+    ></addPageModel>
+    <!-- 娣诲姞tab妯″紡 -->
+    <addTableName
+      v-model:tabShow="tabShow"
+      :nameList="editList"
+      :title="title"
+      @refresh-parent="refreshParentMethod"
+      v-if="tabShow"
+    ></addTableName>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { ref, reactive, nextTick } from 'vue';
+  import editModel from '@/views/dmx/model/components/editModel.vue';
+  import addPageModel from './components/addPageModel.vue';
+  import addTableName from './components/addTableName.vue';
+  import {
+    modelList,
+    modelmyLlms,
+    deleteLlm,
+    deleteLlmFactory,
+  } from '@/api/model';
+  import { Modal, Message } from '@arco-design/web-vue';
+  import { userModelState } from '@/store';
 
-  import QualityInspection from './components/quality-inspection.vue';
-  import TheService from './components/the-service.vue';
-  import RulesPreset from './components/rules-preset.vue';
-  import CustomSettings from './components/custom-settings.vue';
-  import addModel from "@/views/dmx/model/components/addModel.vue";
-  import editModel from "@/views/dmx/model/components/editModel.vue";
+  import pdfImg from '@/assets/images/icon-chart.png';
 
+  const modelStore = userModelState();
   let count = 5;
   const activeKey = ref(1);
   const data = ref([
     {
       key: 1,
-      title: '鍏ㄩ儴',
+      title: 'key',
       content: 'Content of Tab Panel 1',
     },
     {
       key: 2,
-      title: '鍐呭璐ㄦ',
+      title: 'Ollama',
       content: 'Content of Tab Panel 2',
     },
     {
       key: 3,
-      title: '寮�閫氭湇鍔�',
+      title: 'Xinference',
       content: 'Content of Tab Panel 3',
     },
-    {
-      key: 4,
-      title: '瑙勫垯棰勭疆',
-      content: 'Content of Tab Panel 4',
-    },
   ]);
-const changeTabs = (val) => {
-  activeKey.value = val;
-}
-  const handleAdd = () => {
-    visible.value = true;
+  const tabData = ref({
+    key: {
+      tags: '娣诲姞key',
+      id: 1,
+    },
+  });
+
+  const isDeleteDialogVisible = ref(false); //鍒犻櫎鎻愰啋
+
+  const modalList = ref({});
+  const tabKey = ref('key');
+  const changeTabs = (val) => {
+    tabKey.value = val;
   };
-  const handleDelete = (key: any) => {
-    data.value = data.value.filter((item) => item.key !== key);
+
+  const httpUrl = modelStore.hrefUrl;
+  const show = ref(false);
+  const tabShow = ref(false);
+  const title = ref('娣诲姞妯″紡');
+  const task_id = ref(1);
+  const modelType = ref(1);
+  const handleAdd = () => {
+    tabShow.value = true;
+    title.value = '娣诲姞妯″瀷';
+    editList.value.llm_factory = tabKey.value;
+  };
+  const editList = ref<any>({ llm_factory: '' });
+  //澧炲姞妯″瀷瀛愮被
+  const handleAddModel = () => {
+    modelType.value = 2;
+    editList.value = [{ llm_factory: '' }];
+    editList.value.llm_factory = tabKey.value;
+    show.value = true;
+    title.value = '娣诲姞妯″紡';
+  };
+  //缂栬緫妯″瀷瀛愮被
+  const handleEditModel = (val, type) => {
+    console.log(val, 6766);
+    if (type == 1) {
+      tabShow.value = true;
+      editList.value = val;
+      title.value = '缂栬緫妯″瀷';
+      editList.value.llm_factory = tabKey.value;
+    } else {
+      modelType.value = 2;
+      task_id.value = val.id;
+      show.value = true;
+      title.value = '缂栬緫';
+      editList.value = val;
+      editList.value.llm_factory = tabKey.value;
+    }
+  };
+
+  //鍒犻櫎妯″瀷
+  const handleDeleteModel = (val) => {
+    Modal.confirm({
+      title: '璀﹀憡',
+      content: '纭鍒犻櫎鍚�',
+      okText: '纭畾',
+      cancelText: '鍙栨秷',
+      onOk: async () => {
+        const factory = tabKey.value;
+        const res = await deleteLlm({
+          llm_factory: tabKey.value,
+          llm_name: val.name,
+        });
+
+        if ((res as any).code == 0) {
+          queryModel();
+          tabKey.value = factory;
+        } else {
+        }
+      },
+      onCancel: () => {},
+    });
+  };
+
+  //鐖剁骇妯″瀷
+  const handleDelete = async (key: any) => {
+    console.log(tabData.value[key]);
+    if (tabData.value[key].llm.length > 0) {
+      Message.error('璇峰厛鍒犻櫎瀛愭ā鍨�');
+      return;
+    }
+    if (key !== 'key') {
+      const res = await deleteLlmFactory(key);
+      if ((res as any).code == 200) {
+        Reflect.deleteProperty(tabData.value, key);
+        queryModel();
+      }
+    }
   };
 
   const visible = ref(false);
-  const formRef = ref(null);
+  const formRef = ref();
+
   const form = reactive({
     size: 'medium',
     name: '',
   });
   const handleOk = () => {
     count += 1;
-    formRef.value.validate().then((res) => {
+    formRef.value?.validate().then((res) => {
       if (res) {
         return;
       }
@@ -134,19 +314,23 @@
     });
     nextTick(() => {
       visible.value = true;
-
-    })
+    });
     return false;
   };
-  const handleCancel = () => {
-    formRef.value.resetFields();
-    visible.value = false;
+
+  //鑾峰彇妯″瀷鍒楄〃
+  const loading = ref(false);
+  const queryModel = async () => {
+    const res = await modelmyLlms();
+    modalList.value = res.data;
+    loading.value = true;
+    tabData.value = Object.assign({}, tabData.value, res.data);
   };
-  const handleSubmit = ({ values, errors }) => {
-    this.$refs.formRef.validate().then((res, a, b) => {
-      debugger;
-      console.log('values', values);
-    });
+  queryModel();
+
+  const refreshParentMethod = () => {
+    queryModel();
+    // 杩欓噷鎵ц闇�瑕佺殑鎿嶄綔
   };
 </script>
 
@@ -167,6 +351,7 @@
       font-size: 14px;
     }
   }
+
   :deep(.arco-list-col) {
     display: flex;
     flex-direction: row;
@@ -199,10 +384,83 @@
       }
     }
   }
+  :deep(.arco-tabs-nav-tab) {
+    flex: none;
+    width: 60%;
+  }
+  .table_add_clore {
+    :deep(.arco-tabs-nav-add-btn .arco-icon-hover::before) {
+      top: 50%;
+      left: 50%;
+      width: 20px;
+      height: 20px;
+      transform: translate(-50%, -50%);
+      border-radius: 0;
+      background-color: #165dff;
+    }
+
+    :deep(.arco-tabs-nav-add-btn .arco-icon-hover .arco-icon) {
+      color: #fff;
+    }
+    // :deep(.arco-tabs-nav) {
+    //   max-width: 60%;
+    // }
+
+    :deep(.arco-icon-hover::before) {
+      top: 50%;
+      left: 50%;
+      width: 20px;
+      height: 20px;
+      transform: translate(-50%, -50%);
+      // border-radius: 0;
+      // background-color: #eee;
+    }
+    :deep(.arco-tabs-tab-close-btn .arco-icon) {
+      color: #666;
+    }
+  }
+  .box_right {
+    position: absolute;
+    top: 60px;
+    right: 20px;
+    display: flex;
+    .search_input {
+      margin-right: 10px;
+    }
+  }
+  .arco-card-body-content {
+    .arco-card-body-content-title {
+      font-size: 16px;
+      color: #333;
+      margin-bottom: 10px;
+      font-weight: 400;
+    }
+  }
+  .card_content {
+    .card_wrap_box_img {
+      // min-height: 200px;
+      height: 200px;
+      width: 100%;
+      img {
+        width: 100%; /* 鎴栬�呭叾浠栧浐瀹氬搴� */
+        height: 100%; /* 鎴栬�呭叾浠栧浐瀹氶珮搴� */
+        object-fit: cover; /* 涓嶄細鍙樺舰锛屼絾鍙兘瑁佸壀鍥剧墖 */
+      }
+    }
+    .card_wrap_box {
+      // position: relative;
+      .arco-btn-group {
+        position: absolute;
+        right: 10px;
+        top: 87%;
+      }
+    }
+  }
+
   .card-wrap {
     width: 320px;
     height: 350px;
-    margin: 30px;
+    margin: 20px 30px;
     transition: all 0.3s;
     border: 1px solid var(--color-neutral-3);
     border-radius: 4px;

--
Gitblit v1.8.0