~xuyonghao/flow_web.git

			@@ -3,174 +3,273 @@
			<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></agent>
			<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-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>-->
			<div
			class="card-wrap"
			v-for="(item, index) of agentList"
			:key="item.id"
			<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>
			<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 }}
			<!-- 智能体列表-->
			<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>
			<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="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">
			{{ item.prompt_config.prologue }}
			<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">
			<!-- {{ 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" >
			<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>
			</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, onBeforeMount, onMounted, onBeforeUnmount } from "vue";
			import addAgent from '@/views/dmx/IntelligentAgent/components/addAgent.vue';
			import editAgent from '@/views/dmx/IntelligentAgent/components/editAgent.vue';
			import agent from "@/views/dmx/IntelligentAgent/components/agentConfig.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, 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 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 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: '',
			});
			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);
			@@ -178,6 +277,25 @@
			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,
			@@ -206,23 +324,18 @@
			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',()=>{
			onMounted(() => {
			EventBus.on('queryList', () => {
			queryList();
			})
			})
			onBeforeUnmount(()=>{
			EventBus.off('queryList')
			})
			});
			});
			onBeforeUnmount(() => {
			EventBus.off('queryList');
			});
			</script>

			<script lang="ts">
			@@ -341,7 +454,7 @@
			text-align: center;
			}
			.arco-card-body-content-down {
			text-align: center;
			// text-align: center;
			margin-top: 10px;
			font-size: 12px;
			color: #999999;