| | |
| | | <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 /> |
| | | <el-input v-model="queryParams.title" style="width: 226.4px" placeholder="指标名称" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="主题域" prop="themeDomainID"> |
| | | <el-form-item label="主题域" prop="metrics_group"> |
| | | <el-tree-select |
| | | filterable |
| | | style="width: 256.4px" |
| | | v-model="queryParams.themeDomainID" |
| | | :data="listTreeData" |
| | | style="width: 206.4px" |
| | | :props="{ |
| | | id: 'id', |
| | | label: 'name', |
| | | id: 'group_id', |
| | | label: 'group_name', |
| | | children: 'Children', |
| | | }" |
| | | multiple |
| | | node-key="id" |
| | | :clearable="true" |
| | | :accordion="true" |
| | | :expandNode="false" |
| | | default-expand-all |
| | | :check-strictly="true" |
| | | v-model="queryParams.metrics_group" |
| | | node-key="group_id" |
| | | clearable |
| | | :data="listTreeData" |
| | | placeholder="请选择主题域" |
| | | @change="selectThemeChange" |
| | | check-strictly |
| | | @change="selectMetricsChange" |
| | | > |
| | | </el-tree-select> |
| | | </el-form-item> |
| | | <el-form-item label="敏感度" prop="sensitivity"> |
| | | <el-select v-model="queryParams.sensitivity" style="width: 226.4px" clearable> |
| | | <el-form-item label="重要性" prop="metrics_important"> |
| | | <el-select v-model="queryParams.metrics_important" style="width: 186.4px" clearable> |
| | | <el-option |
| | | v-for="item in Object.keys(eMetrics_Ops)" |
| | | :key="item" |
| | |
| | | <el-form-item> |
| | | <el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 查询 </el-button> |
| | | <el-button icon="ele-Refresh" @click="resetQuery">重置 </el-button> |
| | | <!-- <el-button icon="ele-Plus" @click="openOptDlg()"> 添加 </el-button> --> |
| | | </el-form-item> |
| | | </el-form> |
| | | </template> |
| | | <template #main> |
| | | <div class="h-full" ref="chatDragContainerRef"> |
| | | <el-table |
| | | :span-method="objectSpanMethod" |
| | | v-loading="tableLoading" |
| | | ref="draggableTableRef" |
| | | class="h100" |
| | |
| | | :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'" |
| | | :data="displayTableData" |
| | | highlight-current-row |
| | | :headerCellStyle="{ backgroundColor: 'var(--el-table-header-bg-color)' }" |
| | | :headerCellStyle="{ backgroundColor: 'var(--el-table-header-bg-color)', textAlign: 'center' }" |
| | | > |
| | | <el-table-column prop="title" label="名称" width="120" fixed="left" show-overflow-tooltip> |
| | | <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="全称" width="170" show-overflow-tooltip> </el-table-column> |
| | | <el-table-column prop="metrics_define" label="定义" show-overflow-tooltip> </el-table-column> |
| | | <el-table-column prop="calcu_method" label="计算方法" width="120" show-overflow-tooltip> </el-table-column> |
| | | |
| | | <el-table-column label="维度" prop="dimension" show-overflow-tooltip> |
| | | <el-table-column label="名称" width="100" prop="dimension.title" show-overflow-tooltip> </el-table-column> |
| | | <el-table-column label="类型" width="95" prop="dimension.type" show-overflow-tooltip> </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_define" 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="编辑" placement="top"> |
| | | <i class="ywifont ywicon-bianji !text-[15px] text-blue-400 cursor-pointer" @click="openOptDlg(scope.row)"></i> |
| | | </el-tooltip> |
| | | <el-tooltip effect="dark" content="删除" placement="top"> |
| | | <i |
| | | class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer" |
| | | @click=" |
| | | () => { |
| | | deleteCurrentRow(scope.row, '页面', metricApi.deleteSupervisor, () => { |
| | | const foundIndex = tableData.findIndex((item) => item === scope.row); |
| | | foundIndex > -1 && tableData.splice(foundIndex, 1); |
| | | }); |
| | | } |
| | | " |
| | | ></i> |
| | | </el-tooltip> --> |
| | | <el-tooltip |
| | | <!-- <el-tooltip |
| | | effect="dark" |
| | | :content="scope.row.published === SupervisorPublished.Y ? '取消发布' : '发布'" |
| | | placement="top" |
| | |
| | | ) |
| | | " |
| | | ></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> |
| | | |
| | | <!-- <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> --> |
| | | </HMContainer> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import _ from 'lodash'; |
| | | import { computed, onMounted, ref } from 'vue'; |
| | | import { useDraggable } from '@vueuse/core'; |
| | | import axios, { CancelTokenSource } from 'axios'; |
| | | import { computed, nextTick, onMounted, ref } from 'vue'; |
| | | import { useRouter } from 'vue-router'; |
| | | import { 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 } from '/@/utils/util'; |
| | | import { eMetrics_Ops } from '/@/views/types/metrics'; |
| | | import { eMetrics_Ops, eMetrics_Ops_Color } from '/@/views/types/metrics'; |
| | | const router = useRouter(); |
| | | //#region ====================== 合并单元格 ====================== |
| | | // 需要合并单元格的 prop |
| | | const GROUP_PROP = ['title', 'full_name', 'metrics_define', 'calcu_method']; |
| | | const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => { |
| | | if (GROUP_PROP.includes(column.property)) { |
| | | return { |
| | | rowspan: row.rowspan, |
| | | colspan: 1, |
| | | }; |
| | | } |
| | | }; |
| | | |
| | | const parseData = (data: any[]) => { |
| | | const finalData = (data ?? []).reduce((pre, cur) => { |
| | | const dimensions = cur.dimensions; |
| | | pre.push( |
| | | ...dimensions.map((item, index) => ({ |
| | | ..._.omit(cur, 'dimensions'), |
| | | id: cur.id + '_dimension_' + item.id, |
| | | dimension: item, |
| | | rowspan: index === 0 ? dimensions.length : undefined, |
| | | })) |
| | | ); |
| | | return pre; |
| | | }, []); |
| | | return finalData; |
| | | }; |
| | | //#endregion |
| | | //#region ====================== 表格数据,table init ====================== |
| | | const tableLoading = ref(false); |
| | | const tableData = ref([]); |
| | | const isDragStatus = ref(false); |
| | | const getTableData = async () => { |
| | | const res = await metricApi.getMetricNameListByPost(); |
| | | tableData.value = parseData(res?.values ?? []); |
| | | const data = res?.values ?? []; |
| | | tableData.value = data; |
| | | }; |
| | | //#endregion |
| | | |
| | | //#region ====================== 表格查询、排序,search form init ====================== |
| | | const themeDomainData = ref([ |
| | | { |
| | | createdBy: 'admin', |
| | | updatedBy: 'admin', |
| | | createdAt: '2024-10-08T02:03:38.901+00:00', |
| | | updatedAt: '2024-10-08T02:03:38.901+00:00', |
| | | id: 1, |
| | | name: '超音数', |
| | | bizName: 'supersonic', |
| | | description: null, |
| | | status: 1, |
| | | typeEnum: null, |
| | | sensitiveLevel: 0, |
| | | parentId: 0, |
| | | fullPath: 'supersonic/', |
| | | viewers: ['admin', 'tom'], |
| | | viewOrgs: [], |
| | | admins: ['admin', 'jack'], |
| | | adminOrgs: [], |
| | | isOpen: 0, |
| | | hasEditPermission: true, |
| | | hasModel: false, |
| | | }, |
| | | { |
| | | createdBy: 'admin', |
| | | updatedBy: 'admin', |
| | | createdAt: '2024-10-08T02:03:38.913+00:00', |
| | | updatedAt: '2024-10-08T02:03:38.913+00:00', |
| | | id: 2, |
| | | name: '埋点模型集', |
| | | bizName: 'visit_info', |
| | | description: null, |
| | | status: 1, |
| | | typeEnum: null, |
| | | sensitiveLevel: 0, |
| | | parentId: 1, |
| | | fullPath: 'supersonic/visit_info/', |
| | | viewers: [], |
| | | viewOrgs: [], |
| | | admins: [], |
| | | adminOrgs: [], |
| | | isOpen: 0, |
| | | hasEditPermission: true, |
| | | hasModel: true, |
| | | }, |
| | | { |
| | | createdBy: 'admin', |
| | | updatedBy: 'admin', |
| | | createdAt: '2024-10-08T02:03:52.593+00:00', |
| | | updatedAt: '2024-10-08T02:03:52.593+00:00', |
| | | id: 3, |
| | | name: '艺人库', |
| | | bizName: 'singer', |
| | | description: null, |
| | | status: 1, |
| | | typeEnum: null, |
| | | sensitiveLevel: 0, |
| | | parentId: 0, |
| | | fullPath: 'singer/', |
| | | viewers: ['admin', 'tom', 'jack'], |
| | | viewOrgs: ['1'], |
| | | admins: ['admin', 'alice'], |
| | | adminOrgs: [], |
| | | isOpen: 0, |
| | | hasEditPermission: true, |
| | | hasModel: false, |
| | | }, |
| | | { |
| | | createdBy: 'admin', |
| | | updatedBy: 'admin', |
| | | createdAt: '2024-10-08T02:03:52.594+00:00', |
| | | updatedAt: '2024-10-08T02:03:52.594+00:00', |
| | | id: 4, |
| | | name: '标签模型集', |
| | | bizName: 'singer_info', |
| | | description: null, |
| | | status: 1, |
| | | typeEnum: null, |
| | | sensitiveLevel: 0, |
| | | parentId: 3, |
| | | fullPath: 'singer/singer_info/', |
| | | viewers: [], |
| | | viewOrgs: [], |
| | | admins: [], |
| | | adminOrgs: [], |
| | | isOpen: 0, |
| | | hasEditPermission: true, |
| | | hasModel: true, |
| | | }, |
| | | ]); // 主题域数据 |
| | | const themeDomainData = ref([]); // 主题域数据 |
| | | const initThemeDomainData = async () => { |
| | | const res = await agentGroupApi.getSceneGroupTreeByPost(); |
| | | themeDomainData.value = res.groups || []; |
| | | }; |
| | | const listTreeData = computed(() => { |
| | | return convertListToTree(themeDomainData.value, { |
| | | ID: 'id', |
| | | ID: 'group_id', |
| | | Children: 'Children', |
| | | ParentID: 'parentId', |
| | | ParentID: 'p_group_id', |
| | | }); |
| | | }); |
| | | const selectThemeChange = async (value: string) => { |
| | | return; |
| | | const res = await metricApi.getThemeDomainByPost({ |
| | | equipmentLocationID: value, |
| | | }); |
| | | themeDomainData.value = res.values; |
| | | const selectMetricsChange = (val) => { |
| | | queryParams.value.metrics_group = val; |
| | | }; |
| | | const queryParams = ref({ |
| | | title: '', |
| | | // themeDomainID: null, |
| | | sensitivity: '', |
| | | metrics_group: '', |
| | | metrics_important: '', |
| | | }); |
| | | const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, () => { |
| | | displayTableData.value = tableData.value; |
| | | }); |
| | | const handleClickTitleRow = (row: any) => { |
| | | console.log('🚀 ~ row:', row); |
| | | router.push({ |
| | | name: 'MetricDetail', |
| | | query: { |
| | | id: row.id, |
| | | name: row.title, |
| | | }, |
| | | }); |
| | | }; |
| | |
| | | } |
| | | ); |
| | | //#endregion |
| | | |
| | | //#region ====================== 添加修改操作 ====================== |
| | | const optDlgIsShow = ref(false); |
| | | const optDlgMapRow = ref(null); |
| | | const openOptDlg = (row?: any) => { |
| | | optDlgMapRow.value = row; |
| | | optDlgIsShow.value = true; |
| | | //#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 updateOpt = (formValue) => { |
| | | const foundIndex = tableData.value.findIndex((item) => item.id === formValue.id); |
| | | if (foundIndex > -1) { |
| | | tableData.value[foundIndex] = { |
| | | ...tableData.value[foundIndex], |
| | | ...formValue, |
| | | }; |
| | | } |
| | | const closeChatTest = () => { |
| | | chatTestMapRow.value = null; |
| | | chatTestIsShow.value = false; |
| | | }; |
| | | |
| | | const insertOpt = (newData) => { |
| | | tableData.value.unshift({ ...newData, published: SupervisorPublished.N }); |
| | | }; |
| | | //#endregion |
| | | const draggableChatRef = ref<HTMLElement | null>(null); |
| | | const chatDragHandlerRef = ref<HTMLDivElement>(null); |
| | | const chatDragContainerRef = ref<HTMLDivElement>(null); |
| | | |
| | | 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) => { |
| | | return; |
| | | const res = await updatePublishStatus( |
| | | // `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( |
| | | { |
| | | id: id, |
| | | publish: published, |
| | | agent_id: chatTestMapRow.value.id, |
| | | question: text, |
| | | }, |
| | | { |
| | | loading: false, |
| | | cancelToken: currentSource.token, |
| | | } |
| | | ); |
| | | 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('已取消发布'); |
| | | return res; |
| | | }; |
| | | //#endregion |
| | | |
| | | //#region ====================== 更新发布状态 ====================== |
| | | // useUpdateData({ |
| | | // event: 'supervisor.publish', |
| | | // updateFun({ id, published }) { |
| | | // updatePublishedById(id, published); |
| | | // }, |
| | | // }); |
| | | //#endregion |
| | | onMounted(() => { |
| | | initThemeDomainData(); |
| | | getTableData(); |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"></style> |
| | | import { ElMessage } from 'element-plus'; import { updatePublishStatus } from '/@/api/supervisorAdmin';import { ElMessage } from |
| | | 'element-plus'; import { updatePublishStatus } from '/@/api/supervisorAdmin';import { ElMessage } from 'element-plus'; import { |
| | | updatePublishStatus } from '/@/api/supervisorAdmin';import { ElMessage } from 'element-plus'; import { updatePublishStatus } from |
| | | '/@/api/supervisorAdmin'; |