From c02bff2911f720d54388f4abb6456ec1777f8a96 Mon Sep 17 00:00:00 2001 From: zhangxiao <898441624@qq.com> Date: 星期五, 30 八月 2024 10:40:02 +0800 Subject: [PATCH] fix: 修改bug --- src/views/dmx/model/index.vue | 514 ++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 330 insertions(+), 184 deletions(-) diff --git a/src/views/dmx/model/index.vue b/src/views/dmx/model/index.vue index ac7afd8..1653edb 100644 --- a/src/views/dmx/model/index.vue +++ b/src/views/dmx/model/index.vue @@ -1,6 +1,6 @@ <template> <div class="container"> - <Breadcrumb :items="['澶фā鍨�', '澶фā鍨嬬鐞�']" /> + <Breadcrumb :items="['澶фā鍨�', '妯″瀷绠$悊']" /> <a-row :gutter="20" align="stretch"> <a-col :span="24"> @@ -12,14 +12,14 @@ <a-row justify="space-between"> <a-col :span="24" class="table_add_clore" v-if="loading"> <a-tabs - :default-active-key="tabKey" type="line" + :default-active-key="tabKey" + v-model:activeKey="tabKey" :editable="true" @tab-click="changeTabs" @add="handleAdd" @delete="handleDelete" show-add-button - auto-switch > <a-tab-pane v-for="(item, index) in tabData" @@ -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" v-if="item.llm?.length > 0"> + <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> @@ -155,6 +181,7 @@ <addTableName v-model:tabShow="tabShow" :nameList="editList" + :title="title" @refresh-parent="refreshParentMethod" v-if="tabShow" ></addTableName> @@ -171,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([ { @@ -197,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 tabKey = ref(''); + const changeTabs = async (val) => { tabKey.value = val; + await getFactory(); }; + + const httpUrl = modelStore.hrefUrl; const show = ref(false); const tabShow = ref(false); const title = ref('娣诲姞妯″紡'); @@ -216,9 +251,10 @@ const modelType = ref(1); const handleAdd = () => { tabShow.value = true; + title.value = '娣诲姞妯″瀷'; editList.value.llm_factory = tabKey.value; }; - const editList = ref({ llm_factory: '' }); + const editList = ref<any>({ llm_factory: '' }); //澧炲姞妯″瀷瀛愮被 const handleAddModel = () => { modelType.value = 2; @@ -229,10 +265,10 @@ }; //缂栬緫妯″瀷瀛愮被 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; @@ -245,90 +281,134 @@ }; //鍒犻櫎妯″瀷 - 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) { + await queryModel(''); + } else { + } + }, + onCancel: () => {}, + }); + } }; //鐖剁骇妯″瀷 const handleDelete = async (key: any) => { - console.log(key, 45455); - // tabData.value = tabData.value.filter((item) => item.key !== key); - if (key !== 'key') { - Reflect.deleteProperty(tabData.value, key); - await deleteLlmFactory(key); - queryModel(); + if (tabData.value[key] && tabData.value[key].llm.length > 0) { + Message.error('璇峰厛鍒犻櫎瀛愭ā鍨�'); + return; + } + + const res = await deleteLlmFactory(tabKey.value); + if ((res as any).code == 200) { + // Reflect.deleteProperty(tabData.value, tabKey.value); + + await queryModel(null); + + Message.success('鍒犻櫎鎴愬姛'); } }; 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) => { - if (res) { - return; - } - data.value = data.value.concat({ - key: count, - title: `${form.name}`, - content: ``, - }); - visible.value = false; - activeKey.value = count; - }); - nextTick(() => { - visible.value = true; - }); - return false; + // count += 1; + // formRef.value?.validate().then((res) => { + // if (res) { + // return; + // } + // data.value = data.value.concat({ + // key: count, + // title: `${form.name}`, + // content: ``, + // }); + // visible.value = false; + // activeKey.value = count; + // }); + // nextTick(() => { + // visible.value = true; + // }); + // 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); - const queryModel = async () => { + const queryModel = async (name) => { const res = await modelmyLlms(); modalList.value = res.data; loading.value = true; - tabData.value = Object.assign({}, tabData.value, res.data); - }; - queryModel(); + // tabData.value = Object.assign({}, tabData.value, res.data); - const refreshParentMethod = () => { - queryModel(); + await filterObject(res.data, 1, name); + + await getFactory(); + }; + queryModel(null); + //杩斿洖婊¤冻鏉′欢鐨勫璞� + const filterObject = (obj, threshold, name) => { + tabData.value = ''; + tabKey.value = ''; + const objs = Object.keys(obj) + .filter((key) => obj[key].added == 1) + .reduce((result, key) => { + result[key] = obj[key]; + return result; + }, {}); + + tabData.value = objs; + if (name) { + tabKey.value = name; + } else { + tabKey.value = Object.keys(tabData.value)[0]; + } + console.log(tabKey.value, 6766); + }; + + const refreshParentMethod = async (name) => { + // console.log(name, 678776); + + await queryModel(name); + // 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; + } + + // if (!name) { + // tabKey.value = Object.keys(tabData.value)[0]; + // } else { + // tabKey.value = name; + // } + console.log(tabKey.value, 9787); }; </script> @@ -349,6 +429,7 @@ font-size: 14px; } } + :deep(.arco-list-col) { display: flex; flex-direction: row; @@ -412,6 +493,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; } @@ -433,13 +517,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; @@ -447,6 +609,14 @@ position: absolute; right: 10px; top: 87%; + .create_time { + text-align: left; + width: 155px; + } + .create_time_list { + text-align: left; + width: 223px; + } } } } @@ -454,19 +624,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; @@ -475,19 +633,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; -- Gitblit v1.8.0