<template>
|
<AMContainer type="card">
|
<template #aside>
|
<!-- 目录树 -->
|
<LeftTreeByMgr
|
v-loading="treeLoading"
|
class="h100"
|
ref="leftTreeRef"
|
:defaultProps="{
|
id: 'group_id',
|
label: 'group_name',
|
children: 'children',
|
}"
|
defaultExpandAll
|
:treedata="listTreeData"
|
title-name="分组列表"
|
:show-more-operate="false"
|
:show-add="false"
|
:current-node-key="currentListID"
|
:node-icon="() => 'ele-Document'"
|
@click="handleClickNode"
|
>
|
</LeftTreeByMgr>
|
</template>
|
<template #main>
|
<div class="w100 h100" v-show="tableHasChildren">
|
<el-tabs v-model="activeTabName" class="h-full" @tab-change="handleClick">
|
<el-tab-pane label="指标管理" name="dataset" class="h-full">
|
<div class="h-full">
|
<el-table
|
v-loading="tableLoading"
|
ref="draggableTableRef"
|
class="h100"
|
border
|
:row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
|
:data="displayTableData"
|
highlight-current-row
|
>
|
<el-table-column prop="title" label="名称" width="300" fixed="left" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="创建人" prop="creator" width="100" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="创建时间" prop="create_time" width="105" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="发布状态" prop="published" width="85" show-overflow-tooltip>
|
<template #default="scope">
|
<el-tag :type="scope.row.published === SupervisorPublished.Y ? 'primary' : 'info'">{{
|
supervisorPublishedMap[scope.row.published]
|
}}</el-tag>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="备注" prop="note" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="操作" width="200" fixed="right" show-overflow-tooltip>
|
<template #default="scope">
|
<div class="space-x-3 items-center flex">
|
<el-tooltip effect="dark" content="查看提示词" placement="top">
|
<i
|
class="ywifont ywicon-tishici !text-[21px] text-blue-400 cursor-pointer"
|
@click="openCopyPrompt(scope.row)"
|
></i>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="查看指标名称" placement="top">
|
<i
|
class="ywifont ywicon-zhibiao !text-[17px] text-blue-400 cursor-pointer"
|
@click="openMetricNameDlg(scope.row)"
|
></i>
|
</el-tooltip>
|
|
<el-tooltip effect="dark" content="对话测试" placement="top">
|
<i class="ywifont ywicon-ceshi !text-[20px] text-blue-400 cursor-pointer" @click="openChatTest(scope.row)"></i>
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<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?.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>
|
</el-tab-pane>
|
<el-tab-pane label="权限管理" name="permission" class="h-full">
|
<div class="h-full">
|
<div class="flex items-center justify-between set-permission box-border">
|
<div class="font-500 text-[16px] text-[#000000e0]">邀请成员</div>
|
</div>
|
<el-form label-position="top" label-width="auto" :model="permissionForm" class="set-form">
|
<el-form-item label="管理员将拥有主题域下所有编辑及访问权限" class="set-form-item">
|
<el-select v-model="permissionForm.accessPermissions" autocomplete="off" clearable>
|
<el-option v-for="item in accessPermissionsData" :key="item" :value="parseInt(item)" :label="item.label">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="按组织">
|
<el-select v-model="permissionForm.byOrganization" autocomplete="off" clearable>
|
<el-option v-for="item in byOrganizationData" :key="item" :value="parseInt(item)" :label="item.label"> </el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="按个人">
|
<el-select v-model="permissionForm.byIndividual" autocomplete="off" clearable>
|
<el-option v-for="item in byIndividualData" :key="item" :value="parseInt(item)" :label="item.label"> </el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<div class="w100 h100 relative" v-show="!tableHasChildren && activeTabName === 'dataset'">
|
<div class="absolute top-0 right-0 w-[112px] h-[24[x]] bg-white z-50 leading-3 pt-2">
|
<el-radio-group v-model="canvasRadio" size="small">
|
<el-radio-button label="列表" value="canvas_list" />
|
<el-radio-button label="画布" value="canvas_tu" />
|
</el-radio-group>
|
</div>
|
<el-tabs v-model="activeModelName" class="h-full" @tab-change="handleClick">
|
<el-tab-pane label="模型管理" name="modelName" class="h-full">
|
<div class="h-full" v-show="canvasRadio === 'canvas_list'">
|
<el-table
|
v-loading="tableLoading"
|
ref="draggableTableRef"
|
class="h100"
|
border
|
:row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
|
:data="modelTableData"
|
highlight-current-row
|
>
|
<el-table-column prop="title" label="模型名称" width="300" fixed="left" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="英文名称" prop="creator" width="100" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="更新时间" prop="create_time" width="105" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="发布状态" prop="published" width="85" show-overflow-tooltip>
|
<template #default="scope">
|
<el-tag :type="scope.row.published === SupervisorPublished.Y ? 'primary' : 'info'">{{
|
supervisorPublishedMap[scope.row.published]
|
}}</el-tag>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="创建人" prop="note" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="描述" prop="note" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="操作" width="200" fixed="right" show-overflow-tooltip>
|
<template #default="scope">
|
<div class="space-x-3 items-center flex">
|
<el-tooltip effect="dark" content="删除" placement="top">
|
<i
|
class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer"
|
@click="deleteModelData(scope.row)"
|
></i>
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<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?.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>
|
<div class="h-full" v-show="canvasRadio === 'canvas_tu'"></div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
<!-- <OptDlg v-model="optDlgIsShow" :item="optDlgMapRow" @insert="insertOpt" @update="updateOpt" :groupId="currentListID"></OptDlg> -->
|
<MetricPrompt v-model="infoDlgIsShow" :metricItem="infoDlgMapRow"></MetricPrompt>
|
<MetricName v-model="metricNameIsShow" :metricItem="metricNameMapRow"></MetricName>
|
</AMContainer>
|
</template>
|
|
<script setup lang="ts">
|
import { useDraggable } from '@vueuse/core';
|
import axios, { CancelTokenSource } from 'axios';
|
import { ElMessage } from 'element-plus';
|
import { computed, nextTick, onMounted, ref } from 'vue';
|
import { SupervisorPublished, supervisorPublishedMap } from '../../lowCode/sqlAmis/types';
|
import MetricName from './optDlg/MetricName.vue';
|
import MetricPrompt from './optDlg/MetricPrompt.vue';
|
import * as agentGroupApi from '/@/api/ai/agentGroup';
|
import * as metricApi from '/@/api/metrics';
|
import { updatePublishStatus } from '/@/api/supervisorAdmin';
|
import Chat from '/@/components/chat/Chat.vue';
|
import AMContainer from '/@/components/layout/AMContainer.vue';
|
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
|
import { usePageDisplay } from '/@/hooks/usePageDisplay';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
import { useCompRef } from '/@/utils/types';
|
import { convertListToTree } from '/@/utils/util';
|
import { OptClassificationMap, classificationEnum } from '/@/views/types/metrics';
|
//#region ====================== 左侧树数据，tree init ======================
|
const leftTreeRef = useCompRef(LeftTreeByMgr);
|
const treeLoading = ref(false);
|
const listData = ref([]);
|
const currentListID = computed(() => currentNode.value?.group_id);
|
const currentNode = ref(null);
|
const listTreeData = computed(() => {
|
const byParentData = convertListToTree(listData.value, {
|
ID: 'group_id',
|
ParentID: 'p_group_id',
|
Children: 'children',
|
});
|
const result = [];
|
byParentData.forEach((item) => {
|
if (
|
item.group_type != OptClassificationMap[classificationEnum.Office] &&
|
item.group_type != OptClassificationMap[classificationEnum.Knowledge]
|
) {
|
result.push(item);
|
}
|
});
|
return result;
|
});
|
const handleClickNode = (data) => {
|
nextTick(() => {
|
leftTreeRef.value?.treeRef.setCurrentKey(data.id);
|
});
|
currentNode.value = data;
|
if (data.children.length > 0) {
|
// 如果是父节点，跳转到父节点页面
|
tableHasChildren.value = true;
|
getTableData();
|
} else {
|
// 如果是子节点，跳转到子节点页面
|
tableHasChildren.value = false;
|
getNodeTableData();
|
}
|
};
|
const getListTreeData = async () => {
|
const res = await agentGroupApi.getSceneGroupTreeByPost();
|
listData.value = res.groups || [];
|
const firstListTreeNode = listTreeData.value[0];
|
if (firstListTreeNode) {
|
handleClickNode(firstListTreeNode);
|
} else {
|
tableData.value = [];
|
currentNode.value = null;
|
}
|
};
|
//#endregion
|
//#region ====================== 指标管理表格数据，table init ======================
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
const isDragStatus = ref(false);
|
const metricStatus = ref(false);
|
const allTableData = ref(null);
|
const getTableData = async () => {
|
if (!allTableData.value) {
|
const res = await metricApi.getMetricAgentListByPost();
|
allTableData.value = (res.values || []).map((item) => {
|
item.create_time = item.create_time?.slice(0, 10);
|
return item;
|
});
|
}
|
tableData.value = allTableData.value.filter((item) => item.agent_group === currentListID.value);
|
};
|
//#endregion
|
//#region ====================== 表格查询、排序，search form init ======================
|
const queryParams = ref({
|
title: '',
|
});
|
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, () => {
|
displayTableData.value = tableData.value;
|
});
|
|
//#endregion
|
//#region ====================== tab切换数据源 ======================
|
const activeTabName = ref('dataset');
|
const tableHasChildren = ref(false);
|
const handleClick = (tabName) => {
|
activeTabName.value = tabName;
|
switch (tabName) {
|
case 'dataset':
|
if (metricStatus.value) return;
|
getTableData();
|
metricStatus.value = true;
|
break;
|
case 'permission':
|
break;
|
}
|
};
|
//#endregion
|
//#region ====================== 权限管理 ======================
|
const permissionForm = ref({
|
accessPermissions: '',
|
byOrganization: '',
|
byIndividual: '',
|
});
|
const accessPermissionsData = ref([]);
|
const byOrganizationData = ref([]);
|
const byIndividualData = ref([]);
|
//#endregion
|
//#region ====================== 模型管理(没有父节点) ======================
|
const activeModelName = ref('modelName');
|
const canvasRadio = ref('canvas_list');
|
const modelTableData = ref([]);
|
const deleteModelData = (row) => {};
|
const getNodeTableData = () => {};
|
//#endregion
|
//#region ====================== 查询快捷键 ======================
|
const queryFormRef = ref(null);
|
const pressEnterSearch = (ev: KeyboardEvent) => {
|
if (ev.key === 'Enter') {
|
handleQueryTable();
|
}
|
};
|
usePageDisplay(
|
() => {
|
queryFormRef.value?.$el?.addEventListener('keypress', pressEnterSearch);
|
},
|
() => {
|
queryFormRef.value?.$el?.removeEventListener('keypress', pressEnterSearch);
|
}
|
);
|
//#endregion
|
|
//#region ====================== 添加修改操作 ======================
|
const optDlgIsShow = ref(false);
|
const optDlgMapRow = ref(null);
|
const openOptDlg = (row?: any) => {
|
optDlgMapRow.value = row;
|
optDlgIsShow.value = true;
|
};
|
|
const updateOpt = (formValue) => {
|
const foundIndex = tableData.value.findIndex((item) => item.id === formValue.id);
|
if (foundIndex > -1) {
|
tableData.value[foundIndex] = {
|
...tableData.value[foundIndex],
|
...formValue,
|
};
|
}
|
};
|
|
const insertOpt = (newData) => {
|
tableData.value.unshift({ ...newData, published: SupervisorPublished.N });
|
};
|
//#endregion
|
|
const updatePublishedById = (id: string, published: SupervisorPublished) => {
|
const row = tableData.value.find((item) => item.id === id);
|
if (row) {
|
row.published = published;
|
}
|
};
|
//#region ====================== 改变发布状态 ======================
|
const publishStatusChange = async (published: SupervisorPublished, id, index) => {
|
const res = await updatePublishStatus(
|
{
|
id: id,
|
publish: published,
|
},
|
{
|
loading: false,
|
}
|
);
|
const origin = published === SupervisorPublished.Y ? SupervisorPublished.N : SupervisorPublished.Y;
|
const final = res.publish ?? origin;
|
if (final === origin) {
|
ElMessage.warning('操作失败' + (res.fail_msg ? `：${res.fail_msg}` : ''));
|
return;
|
}
|
|
tableData.value[index].published = final;
|
|
published === SupervisorPublished.Y ? ElMessage.success('发布成功') : ElMessage.info('已取消发布');
|
};
|
//#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();
|
// setTimeout(() => {
|
// chatRef.value.autoSend(row.title);
|
// }, 30);
|
});
|
};
|
|
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
|
|
//#region ====================== 更新发布状态 ======================
|
// useUpdateData({
|
// event: 'supervisor.publish',
|
// updateFun({ id, published }) {
|
// updatePublishedById(id, published);
|
// },
|
// });
|
//#endregion
|
//#region ====================== prompt查看 ======================
|
const infoDlgIsShow = ref(false);
|
const infoDlgMapRow = ref([]);
|
const openCopyPrompt = (row) => {
|
infoDlgMapRow.value = row;
|
infoDlgIsShow.value = true;
|
};
|
//#endregion
|
//#region ====================== 指标名称列表查看 ======================
|
const metricNameIsShow = ref(false);
|
const metricNameMapRow = ref([]);
|
const openMetricNameDlg = (row) => {
|
metricNameMapRow.value = row;
|
metricNameIsShow.value = true;
|
};
|
//#endregion
|
|
onMounted(() => {
|
getListTreeData();
|
});
|
</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>
|
