<template>
|
<HMContainer type="card">
|
<template #header>
|
<el-form ref="queryFormRef" :inline="true" :model="queryParams">
|
<el-form-item label="名称" prop="title">
|
<el-input v-model="queryParams.title" style="width: 226.4px" placeholder="指标名称" clearable @input="selectTitleChange" />
|
</el-form-item>
|
<el-form-item label="主题域" prop="metrics_group">
|
<el-tree-select
|
filterable
|
style="width: 206.4px"
|
:props="{
|
id: 'group_id',
|
label: 'group_name',
|
children: 'Children',
|
}"
|
v-model="queryParams.metrics_group"
|
node-key="group_id"
|
clearable
|
defaultExpandAll
|
:data="listTreeData"
|
placeholder="请选择主题域"
|
check-strictly
|
@change="selectMetricsChange"
|
>
|
</el-tree-select>
|
</el-form-item>
|
<el-form-item label="重要性" prop="metrics_important">
|
<el-select v-model="queryParams.metrics_important" style="width: 186.4px" clearable @change="selectImportantChange">
|
<el-option
|
v-for="item in Object.keys(eMetrics_Ops)"
|
:key="item"
|
:value="parseInt(item)"
|
:label="eMetrics_Ops[item]"
|
></el-option>
|
</el-select>
|
</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="h-full" ref="chatDragContainerRef">
|
<el-table
|
v-loading="tableLoading"
|
ref="draggableTableRef"
|
class="h100"
|
border
|
:row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
|
:data="displayTableData"
|
highlight-current-row
|
:headerCellStyle="{ backgroundColor: 'var(--el-table-header-bg-color)', textAlign: 'center' }"
|
>
|
<el-table-column type="index" label="序号" width="55" fixed="left" align="center"></el-table-column>
|
<el-table-column prop="id" label="指标编号" width="225" fixed="left"></el-table-column>
|
<el-table-column prop="title" label="指标名称" width="150" fixed="left" show-overflow-tooltip>
|
<template #default="scope">
|
<div class="text-[#1677ff]" @click="handleClickTitleRow(scope.row)">{{ scope.row.title }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="full_name" label="指标全称" show-overflow-tooltip width="280"> </el-table-column>
|
<el-table-column label="重要性" prop="metrics_important" show-overflow-tooltip width="80" align="center">
|
<template #default="scope">
|
<el-tag
|
size="small"
|
:style="{
|
backgroundColor: eMetrics_Ops_Color[scope.row.metrics_important].bgColor,
|
color: eMetrics_Ops_Color[scope.row.metrics_important].fontColor,
|
borderColor: eMetrics_Ops_Color[scope.row.metrics_important].borderColor,
|
}"
|
>{{ eMetrics_Ops[scope.row.metrics_important] }}</el-tag
|
>
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="metrics_group" label="主题域" width="130" show-overflow-tooltip>
|
<template #default="scope">
|
{{ themeDomainMap[scope.row.metrics_group]?.group_name }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="metrics_unit" label="单位" width="70" show-overflow-tooltip> </el-table-column>
|
|
<el-table-column prop="metrics_define" width="180" label="指标定义" show-overflow-tooltip> </el-table-column>
|
<el-table-column prop="calcu_method" label="指标计算公式" width="180" show-overflow-tooltip> </el-table-column>
|
<el-table-column prop="metrics_type" label="类别" show-overflow-tooltip width="120" align="center"> </el-table-column>
|
<el-table-column label="操作" width="80" fixed="right" show-overflow-tooltip>
|
<template #default="scope">
|
<div class="space-x-3 items-center flex">
|
<!-- <el-tooltip
|
effect="dark"
|
:content="scope.row.published === SupervisorPublished.Y ? '取消发布' : '发布'"
|
placement="top"
|
>
|
<i
|
class="ywifont !text-[20px] cursor-pointer"
|
:class="[
|
scope.row.published === SupervisorPublished.Y ? 'ywicon-quxiaofabu text-red-400' : 'ywicon-fabu text-blue-400',
|
]"
|
@click="
|
publishStatusChange(
|
scope.row.published === SupervisorPublished.Y ? SupervisorPublished.N : SupervisorPublished.Y,
|
scope.row.id,
|
scope.$index
|
)
|
"
|
></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>
|
</template>
|
</HMContainer>
|
</template>
|
|
<script setup lang="ts">
|
import { useDraggable } from '@vueuse/core';
|
import type { CancelTokenSource } from 'axios';
|
import axios from 'axios';
|
import { debounce } from 'lodash';
|
import { computed, nextTick, onMounted, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
import type { SupervisorPublished } from '../../lowCode/sqlAmis/types';
|
import * as agentGroupApi from '/@/api/ai/agentGroup';
|
import * as metricApi from '/@/api/metrics';
|
import Chat from '/@/components/chat/Chat.vue';
|
import HMContainer from '/@/components/layout/HMContainer.vue';
|
import { usePageDisplay } from '/@/hooks/usePageDisplay';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
import { useCompRef } from '/@/utils/types';
|
import { convertListToTree, getItemMap } from '/@/utils/util';
|
import { OptClassificationMap, classificationEnum, eMetrics_Ops, eMetrics_Ops_Color } from '/@/views/types/metrics';
|
const router = useRouter();
|
|
//#region ====================== 表格数据，table init ======================
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
const isDragStatus = ref(false);
|
const getTableData = async () => {
|
const res = await metricApi.getMetricNameListByPost();
|
const data = res?.values ?? [];
|
tableData.value = data;
|
};
|
//#endregion
|
|
//#region ====================== 表格查询、排序，search form init ======================
|
const themeDomainData = ref([]); // 主题域数据
|
const initThemeDomainData = async () => {
|
const res = await agentGroupApi.getSceneGroupTreeByPost();
|
themeDomainData.value = res.groups || [];
|
};
|
|
const themeDomainMap = computed(() => {
|
return getItemMap(themeDomainData.value, 'group_id');
|
});
|
const listTreeData = computed(() => {
|
const byParentData = convertListToTree(themeDomainData.value, {
|
ID: 'group_id',
|
Children: 'Children',
|
ParentID: 'p_group_id',
|
});
|
const result = [];
|
byParentData.forEach((item) => {
|
if (
|
item.group_type != OptClassificationMap[classificationEnum.Office] &&
|
item.group_type != OptClassificationMap[classificationEnum.Knowledge]
|
) {
|
result.push(item);
|
}
|
});
|
return result;
|
});
|
const debounceQuery = debounce(() => handleQueryTable(), 500);
|
//按指标名称查询
|
const selectTitleChange = (val) => {
|
debounceQuery();
|
};
|
//按主题域查询
|
const selectMetricsChange = (val) => {
|
queryParams.value.metrics_group = val;
|
handleQueryTable();
|
};
|
//按重要性查询
|
const selectImportantChange = (val) => {
|
queryParams.value.metrics_important = val;
|
handleQueryTable();
|
};
|
|
const queryParams = ref({
|
title: '',
|
metrics_group: '',
|
metrics_important: '',
|
});
|
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, () => {
|
displayTableData.value = tableData.value;
|
});
|
const handleClickTitleRow = (row: any) => {
|
router.push({
|
name: 'MetricDetail',
|
query: {
|
id: row.id,
|
},
|
});
|
};
|
//#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 publishStatusChange = async (status: SupervisorPublished, id: number, index: number) => {};
|
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 chatDragContainerRef = ref<HTMLDivElement>(null);
|
|
// `style` will be a helper computed for `left: ?px; top: ?px;`
|
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(() => {
|
initThemeDomainData();
|
getTableData();
|
});
|
</script>
|
<style scoped lang="scss"></style>
|
