指标管理；指标执行器

wujingjing

2024-09-23 1384c9745d48b0154ad325bd48bd622db2e5c6dd

 src/views/project/yw/systemManage/metricMgr/MetricMgr.vue

@@ -2,8 +2,8 @@
   <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 />
            <el-form-item label="名称" prop="title">
               <el-input v-model="queryParams.title" style="width: 226.4px" placeholder="名称" clearable />
            </el-form-item>

            <el-form-item>
@@ -16,6 +16,7 @@
      <template #main>
         <div class="h-full" ref="chatDragContainerRef">
            <el-table
               :span-method="objectSpanMethod"
               v-loading="tableLoading"
               ref="draggableTableRef"
               class="h100"
@@ -23,78 +24,19 @@
               :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
               :data="displayTableData"
               highlight-current-row
               :headerCellStyle="{backgroundColor:'var(--el-table-header-bg-color)'}"
            >
               <el-table-column type="expand" fixed="left">
                  <template #default="scope">
                     <div class="ml-16">
                        <h3 >指标页面</h3>
                        <div v-if="scope.row.supervisor">
                           <div class="py-3">页面提示词：<span class="">{{scope.row.supervisor.prompt}}</span></div>
                           <el-table class="w-2/3 " :data="scope.row.supervisor.args" border>
                              <el-table-column prop="name" label="名称" show-overflow-tooltip>
											
                              </el-table-column>
                              <el-table-column prop="prompt" label="参数提示词" show-overflow-tooltip>
											
                              </el-table-column>
                              <el-table-column prop="check" label="缺省值" show-overflow-tooltip>
											
                              </el-table-column>
										
                           </el-table>
                        </div>
                     </div>
                  </template>
               </el-table-column>
               -->
               <el-table-column prop="title" label="名称" width="300" fixed="left" show-overflow-tooltip> </el-table-column>
               <el-table-column prop="title" label="名称" width="120" 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 label="维度" prop="dimension" show-overflow-tooltip>
                  <el-table-column label="名称" prop="dimension.title" show-overflow-tooltip> </el-table-column>
                  <el-table-column label="类型" width="100" prop="dimension.type" show-overflow-tooltip> </el-table-column>
               </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>

                        <!-- <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">
                        <!-- <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">
@@ -114,70 +56,59 @@
                  </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>
      <!-- <MetricPrompt v-model="infoDlgIsShow" :metricItem="infoDlgMapRow"></MetricPrompt>
      <MetricName v-model="metricNameIsShow" :metricItem="metricNameMapRow"></MetricName> -->
   </HMContainer>
</template>

<script setup lang="ts">
import { useDraggable } from '@vueuse/core';
import { deleteCurrentRow } from '/@/utils/util';

import { onMounted, ref } from 'vue';
import { usePageDisplay } from '/@/hooks/usePageDisplay';
import { useQueryTable } from '/@/hooks/useQueryTable';
// import { useTableSort } from '/@/hooks/useTableSort';
// import { useValidateUniqueness } from '/@/hooks/useValidateUniqueness';
import { ElMessage } from 'element-plus';
import { nextTick } from 'vue';
import OptDlg from './optDlg/OptDlg.vue';
import * as metricApi from '/@/api/metric';
import { checkSupervisorValidate, updatePublishStatus } from '/@/api/supervisorAdmin';
import Chat from '/@/components/chat/Chat.vue';
import { gotoRoute } from '/@/utils/route';
import { useCompRef } from '/@/utils/types';

import axios, { CancelTokenSource } from 'axios';
import { SupervisorPublished } from '../../lowCode/sqlAmis/types';
import HMContainer from '/@/components/layout/HMContainer.vue';
import { useUpdateData } from '/@/hooks/useUpdateData';
import { SupervisorPublished, supervisorPublishedMap } from '../../lowCode/sqlAmis/types';
import MetricPrompt from './optDlg/MetricPrompt.vue';
import MetricName from './optDlg/MetricName.vue';
import _ from 'lodash';

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
   if (columnIndex === 0) {
      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;
};
//#region ====================== 表格数据，table init ======================
const tableLoading = ref(false);
const tableData = ref([]);
const isDragStatus = ref(false);
const allTableData = ref(null);
const getTableData = async () => {
   const res = await metricApi.getMetricAgentListByPost();
   allTableData.value = (res.values || []).map((item) => {
      item.create_time = item.create_time?.slice(0, 10);
		
      return item;
   });
   tableData.value = res?.values ?? [];
   const res = await metricApi.getMetricNameListByPost();

   tableData.value = parseData(res?.values ?? []);
};
//#endregion

@@ -239,79 +170,27 @@
   }
};
//#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;
   }
// 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;
//    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.metric_prompt);
      }, 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;
};
//    published === SupervisorPublished.Y ? ElMessage.success('发布成功') : ElMessage.info('已取消发布');
// };
//#endregion

//#region ====================== 更新发布状态 ======================
@@ -321,22 +200,6 @@
//       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(() => {
   getTableData();