<template>
|
<AHMContainer type="card">
|
<template #aside>
|
<!-- 目录树 -->
|
<LeftTreeByMgr
|
v-loading="treeLoading"
|
class="h100"
|
ref="leftTreeRef"
|
:defaultProps="{
|
id: 'group_id',
|
label: 'group_name',
|
children: 'children',
|
}"
|
:treedata="listLeftData"
|
title-name="场景列表"
|
:show-more-operate="false"
|
:show-add="false"
|
:current-node-key="currentListID"
|
:node-icon="() => 'ele-Document'"
|
@click="handleClickNode"
|
defaultExpandAll
|
>
|
</LeftTreeByMgr>
|
</template>
|
<template #header>
|
<el-form ref="queryFormRef" :inline="true" :model="queryParams">
|
<el-form-item label="标题" prop="sample_title">
|
<el-input
|
v-model="queryParams.sample_title"
|
style="width: 226.4px"
|
placeholder="标题"
|
clearable
|
@input="() => terminologyQuery()"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button icon="ele-Refresh" @click="resetQuery">重置 </el-button>
|
</el-form-item>
|
</el-form>
|
</template>
|
<template #main>
|
<div class="w100 h100">
|
<div class="mt10 overflow-auto h100" v-show="finalTerminologyList.length > 0">
|
<div class="w100 pb-[20px]" v-for="item in finalTerminologyList" :key="item.sample_id">
|
<div
|
class="cursor-pointer flex box-border p-[12px] w-full rounded bg-[#f5f7fd] transition-[background-color .2s]"
|
@click="changeExample(item)"
|
>
|
<i
|
class="myiconfont icon-chazhaobiaodanliebiao pl-[2px] w-[16px] h-[16px] font12 text-[#fff] transform-[scale(.85)] rounded-[50%]"
|
:style="`background-color:${item.BgColor}`"
|
></i>
|
<div class="ml-6 flex-1 min-w-0">
|
<div class="text-sm text-[#000] m-0 p-0 font-bold">{{ item.sample_title }}</div>
|
<div class="mt-[6px] text-[13px] text-[#666] h-[20px] whitespace-nowrap text-ellipsis overflow-hidden">
|
{{ item.sample_question }}
|
</div>
|
</div>
|
<div class="ml-6 min-w-0 flex items-center">
|
<el-tooltip effect="dark" content="对话测试" placement="top">
|
<i class="ywifont ywicon-ceshi !text-[20px] text-blue-400 cursor-pointer" @click="openChatTest(item)"></i>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
v-if="chatTestIsShow"
|
ref="draggableChatRef"
|
:style="style"
|
class="fixed z-50 w-[700px] h-[800px] flex flex-col bg-[rgb(239,244,253)] right-0 bottom-0 rounded-lg"
|
>
|
<div ref="chatDragHandlerRef" class="flex-0">
|
<div class="flex items-center justify-between py-2 px-4">
|
<div class="font-bold cursor-move">
|
WI水务智能管家——【{{ chatTestMapRow?.sample_title }}】测试
|
<!-- <img src="/static/images/logo/logo-mini.svg" width="10" height="10" /> -->
|
</div>
|
<i class="ywifont ywicon-guanbi font-[10px] font-bold cursor-pointer" @click="closeChatTest"></i>
|
</div>
|
</div>
|
<Chat ref="chatRef" class="flex-auto px-2" :questionApi="questionAi"> </Chat>
|
</div>
|
<div class="w100 h100" v-show="finalTerminologyList.length == 0"><el-empty description="暂无数据" class="h100" /></div>
|
</div>
|
</template>
|
</AHMContainer>
|
</template>
|
|
<script setup lang="ts">
|
import { useDraggable } from '@vueuse/core';
|
import axios, { CancelTokenSource } from 'axios';
|
import { computed, nextTick, onMounted, ref, watch } from 'vue';
|
import * as agentGroupApi from '/@/api/ai/agentGroup';
|
import * as metricApi from '/@/api/metrics';
|
import { get_scene_group_sample } from '/@/api/scene/index';
|
import Chat from '/@/components/chat/Chat.vue';
|
import AHMContainer from '/@/components/layout/AHMContainer.vue';
|
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
import { useSearch } from '/@/hooks/useSearch';
|
import { useCompRef } from '/@/utils/types';
|
import { convertListToTree, debounce } from '/@/utils/util';
|
import { OptClassificationMap, classificationEnum } from '/@/views/types/metrics';
|
//#region ====================== 左侧树数据，tree init ======================
|
const leftTreeRef = useCompRef(LeftTreeByMgr);
|
const treeLoading = ref(false);
|
const listLeftData = ref([]);
|
const currentListID = computed(() => currentNode.value?.group_id);
|
const currentNode = ref(null);
|
const handleClickNode = (data) => {
|
nextTick(() => {
|
leftTreeRef.value?.treeRef.setCurrentKey(data.group_id);
|
});
|
currentNode.value = data;
|
terminologyData.value = data.sampleList;
|
};
|
|
//#endregion
|
//#region ====================== 推荐问题 ======================
|
const terminologyData = ref([]); //显示的数据源
|
//获取场景list
|
const initData = async () => {
|
const [treeData, sampleData] = await Promise.all([agentGroupApi.getSceneGroupTreeByPost(), get_scene_group_sample()]);
|
const tree_Data = treeData.groups ?? [];
|
const sample_Data = sampleData.samples ?? [];
|
let result = [];
|
let new_tree_Data = [];
|
tree_Data.forEach((node, index) => {
|
if (
|
node.group_type != OptClassificationMap[classificationEnum.Office] &&
|
node.group_type != OptClassificationMap[classificationEnum.Knowledge]
|
) {
|
new_tree_Data.push(node);
|
}
|
});
|
|
new_tree_Data.forEach((node, index) => {
|
node.sampleList = [];
|
sample_Data.forEach((sample, index) => {
|
sample.Icon = '/static/images/wave/ChatImg.png';
|
sample.BgColor = randomHexColor();
|
if (node.group_id == sample.group_id) {
|
node.sampleList.push(sample);
|
}
|
});
|
if (node.p_group_id) {
|
node.group_name = `${node.group_name} (${node.sampleList.length})`;
|
}
|
});
|
|
const byParentData = convertListToTree(new_tree_Data, {
|
ID: 'group_id',
|
ParentID: 'p_group_id',
|
Children: 'children',
|
});
|
byParentData.forEach((item) => {
|
if (item.children && item.children.length > 0) {
|
item.children.forEach((child_node) => {
|
item.sampleList = item.sampleList.concat(child_node.sampleList);
|
});
|
}
|
result.push(item);
|
|
item.group_name = `${item.group_name} (${item.sampleList.length})`;
|
});
|
listLeftData.value = byParentData;
|
const firstListTreeNode = byParentData[0];
|
terminologyData.value = firstListTreeNode.sampleList;
|
currentNode.value = firstListTreeNode;
|
};
|
|
//随机生成颜色
|
const randomHexColor = () => {
|
return `#${Math.floor(Math.random() * 16777215)
|
.toString(16)
|
.padEnd(6, '0')}`;
|
};
|
|
const changeExample = (item) => {
|
openChatTest(item);
|
};
|
|
//#endregion
|
//#region ====================== 表格查询、排序，search form init ======================
|
const queryParams = ref({
|
sample_title: '',
|
});
|
const { query: queryTerminology, queryData: showTerminologyList } = useSearch(terminologyData, queryParams);
|
const finalTerminologyList = computed(() => {
|
const result = showTerminologyList.value;
|
return result ?? [];
|
});
|
const terminologyQuery = debounce(queryTerminology);
|
watch(
|
() => queryParams.value.sample_title,
|
(val) => {
|
terminologyQuery();
|
}
|
);
|
const { resetQuery, displayTableData } = useQueryTable(terminologyData, queryParams, () => {
|
showTerminologyList.value = terminologyData.value;
|
});
|
//#endregion
|
//#region ====================== Chat 测试 ======================
|
const chatRef = useCompRef(Chat);
|
const chatTestMapRow = ref(null);
|
const chatTestIsShow = ref(false);
|
const openChatTest = (row) => {
|
chatTestMapRow.value = row;
|
chatTestIsShow.value = true;
|
nextTick(() => {
|
chatRef.value.clear();
|
});
|
};
|
|
const closeChatTest = () => {
|
chatTestMapRow.value = null;
|
chatTestIsShow.value = false;
|
};
|
|
const draggableChatRef = ref<HTMLElement | null>(null);
|
const chatDragHandlerRef = ref<HTMLDivElement>(null);
|
const { x, y, style } = useDraggable(draggableChatRef, {
|
handle: chatDragHandlerRef,
|
initialValue: {
|
x: document.body.clientWidth / 2 - 350,
|
y: document.body.clientHeight / 2 - 400,
|
},
|
});
|
|
const questionAi = async (text, sourceObj: { source: CancelTokenSource }) => {
|
const currentSource = axios.CancelToken.source();
|
sourceObj.source = currentSource;
|
const res = await metricApi.checkMetricAgentValidateByPost(
|
{
|
agent_id: chatTestMapRow.value.id,
|
question: text,
|
},
|
{
|
loading: false,
|
cancelToken: currentSource.token,
|
}
|
);
|
return res;
|
};
|
//#endregion
|
onMounted(async () => {
|
initData();
|
});
|
</script>
|
<style scoped lang="scss">
|
.set-permission {
|
padding-block: 16px;
|
padding-block-end: 0;
|
}
|
.set-form {
|
display: block;
|
box-sizing: border-box;
|
height: 100%;
|
padding-block: 16px;
|
.set-form-item {
|
font-weight: 500;
|
color: #667085;
|
font-size: 14px;
|
}
|
}
|
</style>
|
