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/IntelligentAgent/index.vue | 432 ++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 305 insertions(+), 127 deletions(-) diff --git a/src/views/dmx/IntelligentAgent/index.vue b/src/views/dmx/IntelligentAgent/index.vue index 63a184b..3013586 100644 --- a/src/views/dmx/IntelligentAgent/index.vue +++ b/src/views/dmx/IntelligentAgent/index.vue @@ -3,161 +3,339 @@ <Breadcrumb :items="['澶фā鍨�', '鏅鸿兘浣撶鐞�']" /> <a-row :gutter="20" align="stretch"> <a-col :span="24"> - <a-card class="general-card" :title="$t('鏅鸿兘浣撶鐞�')"> - <div style="display: flex;justify-content: right;"> + <a-card class="general-card" :title="$t('')" style="padding-top: 50px"> + <div style="display: flex; justify-content: right"> <a-input-search :placeholder="$t('cardList.searchInput.placeholder')" - style="width: 240px;" + style="width: 240px" + @change="queryList" /> + <a-button + type="primary" + @click="handleClick" + style="margin-left: 10px" + > + <template #icon> + <icon-plus /> + </template> + 鏂板缓鏅鸿兘浣� + </a-button> </div> <a-divider style="margin: 10px 0" /> <a-row justify="space-between"> <a-col :span="24"> - <div style="display: flex; flex-wrap: wrap;"> - <div class="card-wrap" style="cursor: pointer;" @click="handleAdd"> - <a-card :bordered="false" hoverable > - <div style="margin-top: 30px;text-align: center"> - <a-avatar style="background: #3370ff;"> - <icon-plus /> + <a-spin :loading="loading" style="width: 100%"> + <a-scrollbar + style=" + display: flex; + flex-wrap: wrap; + align-content: flex-start; + overflow: auto; + height: calc(100vh - 300px); + " + :style="{ height: documentHeight + 'px' }" + > +<!-- 鏅鸿兘浣撳垪琛�--> + <div + class="card-wrap" + v-for="(item, index) of agentList" + :key="item.id" + > + <a-card :bordered="false" hoverable> + <a-avatar :style="{ backgroundColor: '#5b99da' }"> + <img + :style="{ width: '100%' }" + alt="dessert" + :src="item.icon || imgSrc" + /> </a-avatar> - </div> - <div class="arco-card-body-content"> - <div style="text-align: center;margin-top: 10px"> - 鏂板缓鏅鸿兘浣� + <a-switch + v-model="item.off" + style="position: absolute; top: 10px; right: 10px" + size="medium" + @change="handleChange(item)" + > + <template #checked> 涓婄嚎 </template> + <template #unchecked> 涓嬬嚎 </template> + </a-switch> + <div class="arco-card-body-content"> + <div class="arco-card-body-content-top"> + <span style="font-size: 18px; font-weight: 900"> + {{ item.name }} + </span> + </div> + <div class="arco-card-body-content-down"> + {{ item.prompt_config.prologue }} + </div> </div> - <div style="text-align:center;margin-top: 10px;font-size: 12px;color: #999999"> - 閫氳繃鎻忚堪瑙掕壊鍜屼换鍔℃潵鍒涘缓浣犵殑鏅鸿兘浣�<br> - 鏅鸿兘浣撳彲浠ヨ皟鐢ㄥ涓伐浣滄祦鍜屽伐鍏� - </div> - </div> - <add-agent ref="addAgents"></add-agent> -<!-- <div style="position: absolute; bottom: 1rem; right: 1rem;">--> -<!-- <a-space>--> -<!-- </a-space>--> -<!-- </div>--> - </a-card> - </div> - <div class="card-wrap" v-for="(item, index) of data" :key="index"> - <a-card :bordered="false" hoverable > - <a-avatar :style="{ backgroundColor: '#3370ff' }"> - <img - :style="{ width: '100%'}" - alt="dessert" - src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp" - /> - </a-avatar> - <a-switch style="position: absolute;top: 10px;right: 10px" size="medium"> - <template #checked> - 涓婄嚎 - </template> - <template #unchecked> - 涓嬬嚎 - </template> - </a-switch> - <div class="arco-card-body-content"> - <div class="arco-card-body-content-top"> - <span style="font-size: 18px;font-weight: 900"> - {{ item.title }} + <div + style="position: absolute; bottom: 1.4rem; left: 1rem" + > + <icon-user /> + <span style="font-size: 12px"> + <!-- {{ item.name }}--> </span> </div> - <div class="arco-card-body-content-down"> - 閫氳繃鎻忚堪瑙掕壊鍜屼换鍔℃潵鍒涘缓浣犵殑鏅鸿兘浣� - 鏅鸿兘浣撳彲浠ヨ皟鐢ㄥ涓伐浣滄祦鍜屽伐鍏� + <div + style="position: absolute; bottom: 1rem; right: 1rem" + > + <a-space> + <span v-show="!item.off"> + <a-button + type="text" + size="small" + @click="editClick(item)" + > + <template #icon> + <icon-tool /> + </template> + </a-button> + </span> + <a-popconfirm + :content="'纭畾鍒犻櫎鍚�'" + type="warning" + @ok="deleteItem(item)" + > + <a-button type="text"> + <template #icon> + <icon-delete /> + </template> + </a-button> + </a-popconfirm> + </a-space> </div> - - </div> - <div style="position: absolute; bottom: 1.4rem; left: 1rem;"> - <icon-user /> <span style="font-size: 12px">鐜嬫旦</span> - </div> - <div style="position: absolute; bottom: 1rem; right: 1rem;"> - <a-space> - <editAgent></editAgent> - <a-popconfirm :content="'纭畾鍒犻櫎鍚�'" type="warning" @ok="deleteItem(record)"> - <a-button type="text" size="small"> - <template #icon> - <icon-delete /> - </template> - </a-button> - </a-popconfirm> - </a-space> - </div> - </a-card> - </div> - </div> + </a-card> + </div> +<!-- agent鍒楄〃--> + <div + class="card-wrap" + v-for="(item, index) of agentNewList" + :key="item.id" + > + <a-card :bordered="false" hoverable> + <a-avatar :style="{ backgroundColor: '#5b99da' }"> + <img + :style="{ width: '100%' }" + alt="dessert" + :src="item.avatar || imgSrc" + /> + </a-avatar> +<!-- <a-switch--> +<!-- v-model="item.off"--> +<!-- style="position: absolute; top: 10px; right: 10px"--> +<!-- size="medium"--> +<!-- @change="handleChange(item)"--> +<!-- >--> +<!-- <template #checked> 涓婄嚎 </template>--> +<!-- <template #unchecked> 涓嬬嚎 </template>--> +<!-- </a-switch>--> + <div class="arco-card-body-content"> + <div class="arco-card-body-content-top"> + <span style="font-size: 18px; font-weight: 900"> + {{ item.title }} + </span> + </div> +<!-- <div class="arco-card-body-content-down">--> +<!-- {{ item.prompt_config.prologue }}--> +<!-- </div>--> + </div> + <div + style="position: absolute; bottom: 1.4rem; left: 1rem" + > + <icon-calendar-clock /> + <span style="font-size: 12px;margin-left: 10px"> + {{ moment(item.create_date).format('YYYY-MM-DD HH:mm:ss') }} + </span> + </div> +<!-- <div--> +<!-- style="position: absolute; bottom: 1rem; right: 1rem"--> +<!-- >--> +<!-- <a-space>--> +<!-- <a-popconfirm--> +<!-- :content="'纭畾鍒犻櫎鍚�'"--> +<!-- type="warning"--> +<!-- @ok="deleteItem(item)"--> +<!-- >--> +<!-- <a-button type="text">--> +<!-- <template #icon>--> +<!-- <icon-delete />--> +<!-- </template>--> +<!-- </a-button>--> +<!-- </a-popconfirm>--> +<!-- </a-space>--> +<!-- </div>--> + </a-card> + </div> + </a-scrollbar> + <!-- <div--> + <!-- class="card-wrap"--> + <!-- style="cursor: pointer"--> + <!-- @click="handleAdd"--> + <!-- >--> + <!-- <a-card :bordered="false" hoverable>--> + <!-- <div style="margin-top: 30px; text-align: center">--> + <!-- <a-avatar style="background: #3370ff">--> + <!-- <icon-plus />--> + <!-- </a-avatar>--> + <!-- </div>--> + <!-- <div class="arco-card-body-content">--> + <!-- <div style="text-align: center; margin-top: 10px">--> + <!-- 鏂板缓鏅鸿兘浣�--> + <!-- </div>--> + <!-- <div--> + <!-- style="--> + <!-- text-align: center;--> + <!-- margin-top: 10px;--> + <!-- font-size: 12px;--> + <!-- color: #999999;--> + <!-- "--> + <!-- >--> + <!-- 閫氳繃鎻忚堪瑙掕壊鍜屼换鍔℃潵鍒涘缓浣犵殑鏅鸿兘浣�<br />--> + <!-- 鏅鸿兘浣撳彲浠ヨ皟鐢ㄥ涓伐浣滄祦鍜屽伐鍏�--> + <!-- </div>--> + <!-- </div>--> + <!-- <add-agent ref="addAgents"></add-agent>--> + <!-- <!– <div style="position: absolute; bottom: 1rem; right: 1rem;">–>--> + <!-- <!– <a-space>–>--> + <!-- <!– </a-space>–>--> + <!-- <!– </div>–>--> + <!-- </a-card>--> + <!-- </div>--> + </a-spin> </a-col> </a-row> </a-card> </a-col> </a-row> + <agent-config + ref="editAgentKuai" + :typeAngint="addType" + :formData="itemObj" + @queryList="queryList" + ></agent-config> </div> </template> <script lang="ts" setup> - import { ref, reactive, nextTick } from 'vue'; - import addAgent from "@/views/dmx/IntelligentAgent/components/addAgent.vue"; - import editAgent from "@/views/dmx/IntelligentAgent/components/editAgent.vue"; - import { kbdocumentrm } from "@/api/kbList"; - import { Message } from "@arco-design/web-vue"; - + import { + ref, + reactive, + nextTick, + onBeforeMount, + onMounted, + onBeforeUnmount, + } from 'vue'; + import { Message } from '@arco-design/web-vue'; + import { deletedialog, queryCanvasList, querydialogdetail, querydialogList } from "@/api/Agent"; + import useLoading from '@/hooks/loading'; + const { loading, setLoading } = useLoading(true); + import EventBus from '@/utils/EventBus'; + import AgentConfig from '@/views/dmx/IntelligentAgent/components/agentConfig.vue'; + import logo from '../../../assets/images/model.png'; + import { documentHeight, parseTime } from "@/utils"; + import moment from "moment"; + // console.log(documentHeight,'楂樺害'); let count = 5; const activeKey = ref(1); const addAgents = ref(); - const data = ref([ - { - key: 2, - title: '鍐呭璐ㄦ', - content: 'Content of Tab Panel 2', - }, - { - key: 3, - title: '寮�閫氭湇鍔�', - content: 'Content of Tab Panel 3', - }, - { - key: 4, - title: '瑙勫垯棰勭疆', - content: 'Content of Tab Panel 4', - }, - ]); -const changeTabs = (val) => { - activeKey.value = val; -} + const editAgentKuai = ref(null); + const imgSrc = ref(logo); + const agentList = ref([]); + const agentNewList = ref([]); + const changeTabs = (val) => { + activeKey.value = val; + }; const handleAdd = () => { addAgents.value.handleClick(); - }; - const handleDelete = (key: any) => { - data.value = data.value.filter((item) => item.key !== key); }; const visible = ref(false); const formRef = ref(null); - const form = reactive({ - size: 'medium', - name: '', - }); - const deleteItem = async (row)=>{ - console.log(row); - let data = await kbdocumentrm({doc_id: row.id}) - if(data.code == 0){ - Message.success('鍒犻櫎鎴愬姛'); - console.log(kbobj, 'kbobj'); - fetchData({ - kb_id: kbobj.id, - page: 1, - page_size: 20 - }) + let addType = ref('add'); + let itemObj = reactive({}); + const form = reactive({}); + + + const handleClick = () => { + addType.value = 'add'; + editAgentKuai.value.handleClick(); + }; + + const editClick = async(data) => { + let res = await querydialogdetail({ + dialog_id: data.id + }) + Object.assign(itemObj, res.data); + addType.value = 'edit'; + editAgentKuai.value.editClick(); + }; + + + const queryList = async (params = {}) => { + setLoading(true); + try { + const { data } = await querydialogList(params); + console.log(data, 'data'); + agentList.value = data.map((item) => { + return { + ...item, + off: true, + }; + }); + } catch (err) { + // you can report use errorHandler or other + } finally { + setLoading(false); } - } + }; + + + const queryCanvas = async (params = {}) => { + setLoading(true); + try { + const { data } = await queryCanvasList(params); + console.log(data, 'agent'); + agentNewList.value = data.map((item) => { + return { + ...item, + off: true, + }; + }); + } catch (err) { + // you can report use errorHandler or other + } finally { + setLoading(false); + } + }; + + const deleteItem = async (row) => { + console.log(row); + let data = await deletedialog({ dialog_ids: [row.id] }); + if (data.code == 0) { + Message.success('鍒犻櫎鎴愬姛'); + queryList(); + } + }; + const handleChange = async (item) => { + if (item) { + Object.assign(form, item); + } + }; const handleCancel = () => { - formRef.value.resetFields(); - visible.value = false; + queryList(); }; - const handleSubmit = ({ values, errors }) => { - this.$refs.formRef.validate().then((res, a, b) => { - debugger; - console.log('values', values); + onBeforeMount(() => { + queryList(); + queryCanvas(); + }); + onMounted(() => { + EventBus.on('queryList', () => { + queryList(); }); - }; + }); + onBeforeUnmount(() => { + EventBus.off('queryList'); + }); </script> <script lang="ts"> @@ -210,9 +388,9 @@ } } .card-wrap { - width: 20%; + width: 23%; height: 200px; - margin: 10px; + margin: 1%; transition: all 0.3s; border: 1px solid var(--color-neutral-3); border-radius: 4px; @@ -270,13 +448,13 @@ } } } - .arco-card-body-content{ - .arco-card-body-content-top{ + .arco-card-body-content { + .arco-card-body-content-top { margin-top: 10px; text-align: center; } - .arco-card-body-content-down{ - text-align:center; + .arco-card-body-content-down { + // text-align: center; margin-top: 10px; font-size: 12px; color: #999999; -- Gitblit v1.8.0