yangyin
2024-10-12 a44b65a218b1fa69eb7658c02ecce2b0f0d084e1
src/views/project/yw/systemManage/metricMgr/MetricMgr.vue
@@ -2,14 +2,41 @@
   <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 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
                  :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>
                  <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 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>
@@ -23,58 +50,33 @@
               :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="expand" fixed="left">
               <el-table-column prop="title" label="指标名称" width="150" fixed="left" show-overflow-tooltip>
                  <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>
                     <div class="text-[#1677ff]" @click="handleClickTitleRow(scope.row)">{{ scope.row.title }}</div>
                  </template>
               </el-table-column>
               -->
               <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>
               <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 :type="scope.row.published === SupervisorPublished.Y ? 'primary' : 'info'">{{
                        supervisorPublishedMap[scope.row.published]
                     }}</el-tag>
                     <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 label="备注" prop="note" show-overflow-tooltip> </el-table-column>
               <el-table-column label="操作" width="200" fixed="right" show-overflow-tooltip>
               <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-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 ? '取消发布' : '发布'"
@@ -93,23 +95,10 @@
                                 )
                              "
                           ></i>
                        </el-tooltip>
                        <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 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>
@@ -133,63 +122,68 @@
            </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 { useDraggable } from '@vueuse/core';
import { deleteCurrentRow } from '/@/utils/util';
import { onMounted, ref } from 'vue';
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 { 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 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 { convertListToTree } from '/@/utils/util';
import { 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 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();
   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 listTreeData = computed(() => {
   return convertListToTree(themeDomainData.value, {
      ID: 'group_id',
      Children: 'Children',
      ParentID: 'p_group_id',
   });
});
const selectMetricsChange = (val) => {
   queryParams.value.metrics_group = val;
};
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 ====================== 查询快捷键 ======================
@@ -208,74 +202,19 @@
   }
);
//#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 测试 ======================
//#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.metric_prompt);
      }, 30);
      // setTimeout(() => {
      //    chatRef.value.autoSend(row.title);
      // }, 30);
   });
};
@@ -313,32 +252,8 @@
   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(() => {
   initThemeDomainData();
   getTableData();
});
</script>