|  |  |  | 
|---|
|  |  |  | <Breadcrumb :items="['大模型', '智能体管理']" /> | 
|---|
|  |  |  | <a-row :gutter="20" align="stretch"> | 
|---|
|  |  |  | <a-col :span="24"> | 
|---|
|  |  |  | <a-card class="general-card" :title="$t('智能体管理')"> | 
|---|
|  |  |  | <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" | 
|---|
|  |  |  | @change="queryList" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <agent-config typeAngint="add"></agent-config> | 
|---|
|  |  |  | </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-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' }" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <a-card :bordered="false" hoverable> | 
|---|
|  |  |  | <div style="margin-top: 30px; text-align: center"> | 
|---|
|  |  |  | <a-avatar style="background: #3370ff"> | 
|---|
|  |  |  | <icon-plus /> | 
|---|
|  |  |  | <!--                  智能体列表--> | 
|---|
|  |  |  | <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; | 
|---|
|  |  |  | " | 
|---|
|  |  |  | style="position: absolute; bottom: 1.4rem; left: 1rem" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | 通过描述角色和任务来创建你的智能体<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 agentList" | 
|---|
|  |  |  | :key="item.id" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <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 | 
|---|
|  |  |  | 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 }} | 
|---|
|  |  |  | <icon-user /> | 
|---|
|  |  |  | <span style="font-size: 12px"> | 
|---|
|  |  |  | <!--                      {{ item.name }}--> | 
|---|
|  |  |  | </span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="arco-card-body-content-down"> | 
|---|
|  |  |  | {{ item.prompt_config.prologue }} | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | style="position: absolute; bottom: 1rem; right: 1rem" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <a-space> | 
|---|
|  |  |  | <span v-show="!item.off"> | 
|---|
|  |  |  | <agent-config | 
|---|
|  |  |  | ref="editAgentKuai" | 
|---|
|  |  |  | typeAngint="edit" | 
|---|
|  |  |  | :formData="item" | 
|---|
|  |  |  | @queryList="queryList" | 
|---|
|  |  |  | ></agent-config> | 
|---|
|  |  |  | </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"> | 
|---|
|  |  |  | <!--                      {{ item.name }}--> | 
|---|
|  |  |  | </span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="position: absolute; bottom: 1rem; right: 1rem"> | 
|---|
|  |  |  | <a-space> | 
|---|
|  |  |  | <span v-show="!item.off"> | 
|---|
|  |  |  | <editAgent | 
|---|
|  |  |  | ref="editAgentKuai" | 
|---|
|  |  |  | typeAngint="edit" | 
|---|
|  |  |  | :formData="form" | 
|---|
|  |  |  | @cancelModal="handleCancel" | 
|---|
|  |  |  | ></editAgent> | 
|---|
|  |  |  | </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> | 
|---|
|  |  |  | <a-popconfirm | 
|---|
|  |  |  | :content="'确定删除吗'" | 
|---|
|  |  |  | type="warning" | 
|---|
|  |  |  | @ok="deleteItem(item)" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <a-button type="text" size="small"> | 
|---|
|  |  |  | <template #icon> | 
|---|
|  |  |  | <icon-delete /> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </a-button> | 
|---|
|  |  |  | </a-popconfirm> | 
|---|
|  |  |  | </a-space> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </a-card> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </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> | 
|---|
|  |  |  | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script lang="ts" setup> | 
|---|
|  |  |  | import { ref, reactive, nextTick, onBeforeMount } from 'vue'; | 
|---|
|  |  |  | import addAgent from '@/views/dmx/IntelligentAgent/components/addAgent.vue'; | 
|---|
|  |  |  | import editAgent from '@/views/dmx/IntelligentAgent/components/editAgent.vue'; | 
|---|
|  |  |  | import { kbdocumentrm, queryKbList } from '@/api/kbList'; | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | ref, | 
|---|
|  |  |  | reactive, | 
|---|
|  |  |  | nextTick, | 
|---|
|  |  |  | onBeforeMount, | 
|---|
|  |  |  | onMounted, | 
|---|
|  |  |  | onBeforeUnmount, | 
|---|
|  |  |  | } from 'vue'; | 
|---|
|  |  |  | import { Message } from '@arco-design/web-vue'; | 
|---|
|  |  |  | import { deletedialog, querydialogList } from '@/api/Agent'; | 
|---|
|  |  |  | import { deletedialog, queryCanvasList, 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 editAgentKuai = ref(); | 
|---|
|  |  |  | const agentList = 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 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 { 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, | 
|---|
|  |  |  | 
|---|
|  |  |  | const handleCancel = () => { | 
|---|
|  |  |  | 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> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .arco-card-body-content-down { | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | // text-align: center; | 
|---|
|  |  |  | margin-top: 10px; | 
|---|
|  |  |  | font-size: 12px; | 
|---|
|  |  |  | color: #999999; | 
|---|