zhangxiao
2024-08-16 6f0f218b25c73aefb0017bcfab22ecef355d9b37
src/views/dmx/model/index.vue
@@ -27,108 +27,134 @@
                  :title="index"
                  :closable="Object.keys(tabData).length >= 4"
                >
                  <div
                    style="display: flex; flex-wrap: wrap"
                    class="card_content"
                  <a-scrollbar
                    style="height: calc(100vh - 320px); overflow: auto"
                  >
                    <div class="card-wrap">
                      <div class="card_wrap_box">
                        <div class="card_wrap_box_img">
                          <img
                            :style="{
                              width: '100%',
                            }"
                            alt="暂无图片"
                            :src="item.logo"
                          />
                        </div>
                        <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> -->
                    <div class="card_content">
                      <div class="content_top">
                        <div class="card_wrap_box">
                          <!-- <div class="wrap_box_add">
                            <a-button
                              type="primary"
                              @click="handleEditModel(item, 1)"
                              @click="handleAddModel"
                              :disabled="addBtn"
                            >
                              编辑
                              <template #icon>
                                <icon-plus />
                              </template>
                              添加
                            </a-button>
                          </a-space>
                        </div>
                      </div>
                    </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"
                          />
                          <!--   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>
                          </div> -->
                          <div class="box_user_content">
                            <div class="box_usr_img">
                              <div class="card_wrap_box_img">
                                <img
                                  alt="暂无图片"
                                  :src="
                                    item.logo ? httpUrl + item.logo : pdfImg
                                  "
                                />
                              </div>
                              <div class="arco-content-title">
                                <div class="title_name"> {{ item.tags }}</div>
                            <!-- <editModel></editModel> -->
                          </a-space>
                                <div class="create_time">
                                  创建时间:
                                  <span> {{ item.create_date }} </span>
                                </div>
                              </div>
                            </div>
                            <div class="box_user_btn">
                              <a-space class="btn-group">
                                <!-- <editModel></editModel> -->
                                <a-button
                                  type="primary"
                                  @click="handleAddModel"
                                  :disabled="addBtn"
                                >
                                  <template #icon>
                                    <icon-plus />
                                  </template>
                                  添加
                                </a-button>
                                <a-button
                                  type="outline"
                                  @click="handleEditModel(item, 1)"
                                >
                                  编辑
                                </a-button>
                                <a-button
                                  @click="handleDeleteModel(item, 1)"
                                  class="btn_delete"
                                >
                                  删除
                                </a-button>
                              </a-space>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-if="item.llm.length > 0" class="no_data"></div>
                      <div class="subset_list">
                        <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"
                              />
                            </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">
                                <div class="create_time_list">
                                  创建时间:
                                  <span> {{ list.create_date }} </span>
                                </div>
                                <a-button @click="handleDeleteModel(list)">
                                  删除
                                </a-button>
                                <!-- <a-button
                                type="primary"
                                @click="handleEditModel(list)"
                              >
                                编辑
                              </a-button> -->
                                <!-- <editModel></editModel> -->
                              </a-space>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  </a-scrollbar>
                </a-tab-pane>
              </a-tabs>
            </a-col>
            <div> </div>
            <div class="box_right">
              <!-- <div class="search_input">
                <a-input-search
                  :placeholder="$t('cardList.searchInput.placeholder')"
                  style="width: 240px"
                />
              </div> -->
            <!-- <div class="box_right" v-if="Object.keys(tabData).length > 0">
              <div>
                <!-- <addModel></addModel> -->
                <a-button
                  type="primary"
                  :loading="loading2"
                  @click="handleAddModel"
                  :disabled="addBtn"
                >
                  <template #icon>
                    <icon-plus />
@@ -136,7 +162,7 @@
                  添加
                </a-button>
              </div>
            </div>
            </div> -->
          </a-row>
        </a-card>
      </a-col>
@@ -172,10 +198,16 @@
    modelmyLlms,
    deleteLlm,
    deleteLlmFactory,
    getFactoryDetail,
  } from '@/api/model';
  import { Modal, Message } from '@arco-design/web-vue';
  import { userModelState } from '@/store';
  import pdfImg from '@/assets/images/icon-chart.png';
  const modelStore = userModelState();
  let count = 5;
  const addBtn = ref(false);
  const activeKey = ref(1);
  const data = ref([
    {
@@ -198,18 +230,20 @@
    key: {
      tags: '添加key',
      id: 1,
      live: 1,
    },
  });
  const isDeleteDialogVisible = ref(false); //删除提醒
  const apiUrl = ref('http://127.0.0.1:5173');
  // const httpUrl = import.meta.env.VITE_API_BASE_URL;
  // console.log(apiUrl.value, 777);
  const modalList = ref({});
  const tabKey = ref('key');
  const changeTabs = (val) => {
  const changeTabs = async (val) => {
    tabKey.value = val;
    await getFactory();
  };
  const httpUrl = modelStore.hrefUrl;
  const show = ref(false);
  const tabShow = ref(false);
  const title = ref('添加模式');
@@ -220,7 +254,7 @@
    title.value = '添加模型';
    editList.value.llm_factory = tabKey.value;
  };
  const editList = ref({ llm_factory: '' });
  const editList = ref<any>({ llm_factory: '' });
  //增加模型子类
  const handleAddModel = () => {
    modelType.value = 2;
@@ -231,7 +265,6 @@
  };
  //编辑模型子类
  const handleEditModel = (val, type) => {
    console.log(val, 6766);
    if (type == 1) {
      tabShow.value = true;
      editList.value = val;
@@ -248,47 +281,53 @@
  };
  //删除模型
  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,
        });
  const handleDeleteModel = (val, type) => {
    const factory = tabKey.value;
    if (type == 1) {
      handleDelete(val);
    } else {
      Modal.confirm({
        title: '警告',
        content: '确认删除吗',
        okText: '确定',
        cancelText: '取消',
        onOk: async () => {
          const res = await deleteLlm({
            llm_factory: tabKey.value,
            llm_name: val.name,
          });
        if ((res as any).code == 0) {
          queryModel();
          tabKey.value = factory;
        } else {
        }
      },
      onCancel: () => {},
    });
          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) {
    if (tabData.value[key] && tabData.value[key].llm.length > 0) {
      Message.error('请先删除子模型');
      return;
    }
    if (key !== 'key') {
      const res = await deleteLlmFactory(key);
      if (res.code == 200) {
        Reflect.deleteProperty(tabData.value, key);
        queryModel();
      }
    const res = await deleteLlmFactory(tabKey.value);
    if ((res as any).code == 200) {
      // Reflect.deleteProperty(tabData.value, tabKey.value);
      queryModel();
      console.log(tabKey.value, 99998);
      Message.success('删除成功');
    }
  };
  const visible = ref(false);
  const formRef = ref(null);
  const formRef = ref();
  const form = reactive({
    size: 'medium',
@@ -313,16 +352,6 @@
    });
    return false;
  };
  // const handleCancel = () => {
  //   formRef.value.resetFields();
  //   visible.value = false;
  // };
  // const handleSubmit = ({ values, errors }) => {
  //   this.$refs.formRef.validate().then((res, a, b) => {
  //     debugger;
  //     console.log('values', values);
  //   });
  // };
  //获取模型列表
  const loading = ref(false);
@@ -330,13 +359,41 @@
    const res = await modelmyLlms();
    modalList.value = res.data;
    loading.value = true;
    tabData.value = Object.assign({}, tabData.value, res.data);
    // tabData.value = Object.assign({}, tabData.value, res.data);
    tabData.value = filterObject(res.data, 1);
    tabKey.value = Object.keys(tabData.value)[0];
    await getFactory();
  };
  queryModel();
  //返回满足条件的对象
  const filterObject = (obj, threshold) => {
    return Object.keys(obj)
      .filter((key) => obj[key].added == 1)
      .reduce((result, key) => {
        result[key] = obj[key];
        return result;
      }, {});
  };
  const refreshParentMethod = () => {
    queryModel();
  const refreshParentMethod = async (name) => {
    // console.log(name, 678776);
    await queryModel();
    // tabKey.value = name;
    // 这里执行需要的操作
  };
  const getFactory = async () => {
    const { data } = await getFactoryDetail({
      factory_name: tabKey.value,
    });
    if (data.set_type == 2) {
      addBtn.value = true;
    } else {
      addBtn.value = false;
    }
    tabKey.value = Object.keys(tabData.value)[0];
  };
</script>
@@ -357,6 +414,7 @@
      font-size: 14px;
    }
  }
  :deep(.arco-list-col) {
    display: flex;
    flex-direction: row;
@@ -420,6 +478,9 @@
      // border-radius: 0;
      // background-color: #eee;
    }
    :deep(.arco-tabs-tab-close-btn) {
      display: none;
    }
    :deep(.arco-tabs-tab-close-btn .arco-icon) {
      color: #666;
    }
@@ -441,13 +502,91 @@
      font-weight: 400;
    }
  }
  .content_top {
    border-radius: 18px;
    border: 1px solid #eaecf0;
    background: #e6e7eb;
    box-shadow: 0 1px 2px #1018280d;
    .card_wrap_box {
      padding: 10px 20px;
      .wrap_box_add {
        // text-align: right;
      }
      .card_wrap_box_img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .box_user_content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .box_usr_img {
          display: flex;
          align-items: center;
          .arco-content-title {
            line-height: 34px;
            margin-left: 20px;
            .title_name {
              font-size: 16px;
              color: #333;
            }
          }
        }
        .box_user_btn {
          text-align: right;
          // .btn_delete {
          //   margin-left: 10px;
          // }
        }
      }
    }
  }
  .content_bottom {
    margin-top: 20px;
    .card_content {
      .card_wrap_box {
        padding: 20px;
        .card_wrap_box_img {
          width: 80px;
          height: 80px;
        }
      }
    }
  }
  .card_content {
    .card_wrap_box_img {
      min-height: 200px;
      // min-height: 200px;
      height: 200px;
      width: 100%;
      img {
        max-height: 190px;
        width: 100%; /* 或者其他固定宽度 */
        height: 100%; /* 或者其他固定高度 */
        object-fit: cover; /* 不会变形,但可能裁剪图片 */
      }
    }
    .subset_list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      // border-top: 1px solid #f0f0f0;
    }
    .no_data {
      border-top: 1px solid #f0f0f0;
      height: 30px;
      line-height: 30px;
      margin-top: 10px;
      font-size: 16px;
      color: #333;
    }
    .card_wrap_box {
      // position: relative;
@@ -455,6 +594,14 @@
        position: absolute;
        right: 10px;
        top: 87%;
        .create_time {
          text-align: left;
          width: 155px;
        }
        .create_time_list {
          text-align: left;
          width: 223px;
        }
      }
    }
  }
@@ -462,19 +609,7 @@
  .card-wrap {
    width: 320px;
    height: 350px;
    margin: 30px;
    transition: all 0.3s;
    border: 1px solid var(--color-neutral-3);
    border-radius: 4px;
    &:hover {
      transform: translateY(-4px);
      // box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
    }
  }
  .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;
@@ -483,19 +618,7 @@
      transform: translateY(-4px);
      // box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
    }
  }
  .card-wrap {
    width: 320px;
    height: 350px;
    margin: 30px;
    transition: all 0.3s;
    border: 1px solid var(--color-neutral-3);
    border-radius: 4px;
    position: relative;
    &:hover {
      transform: translateY(-4px);
      // box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
    }
    :deep(.arco-card) {
      height: 100%;
      border-radius: 4px;