yangyin
2024-10-12 a44b65a218b1fa69eb7658c02ecce2b0f0d084e1
src/views/project/yw/systemManage/metricMgr/MetricMgr.vue
@@ -3,26 +3,29 @@
      <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"
                  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="请选择主题域"
                  @change="selectThemeChange"
                  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: 226.4px" clearable>
               <el-select v-model="queryParams.metrics_important" style="width: 186.4px" clearable>
                  <el-option
                     v-for="item in Object.keys(eMetrics_Ops)"
                     :key="item"
@@ -47,16 +50,15 @@
               :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
               :data="displayTableData"
               highlight-current-row
               :cell-style="tableCellCenterExceptColumn()"
               :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="指标全称" show-overflow-tooltip> </el-table-column>
               <el-table-column label="重要性" prop="metrics_important" show-overflow-tooltip width="80">
               <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"
@@ -70,12 +72,12 @@
                  </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="120" show-overflow-tooltip> </el-table-column>
               <el-table-column prop="metrics_type" label="类别" show-overflow-tooltip width="120"> </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
                        <!-- <el-tooltip
                           effect="dark"
                           :content="scope.row.published === SupervisorPublished.Y ? '取消发布' : '发布'"
                           placement="top"
@@ -93,30 +95,50 @@
                                 )
                              "
                           ></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 { 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 { convertListToTree, tableCellCenterExceptColumn } from '/@/utils/util';
import { useCompRef } from '/@/utils/types';
import { convertListToTree } from '/@/utils/util';
import { eMetrics_Ops, eMetrics_Ops_Color } from '/@/views/types/metrics';
const router = useRouter();
//#region ====================== 表格数据,table init ======================
@@ -143,10 +165,12 @@
      ParentID: 'p_group_id',
   });
});
const selectThemeChange = (value) => {};
const selectMetricsChange = (val) => {
   queryParams.value.metrics_group = val;
};
const queryParams = ref({
   title: '',
   // themeDomainID: null,
   metrics_group: '',
   metrics_important: '',
});
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, () => {
@@ -178,8 +202,55 @@
   }
);
//#endregion
//#region ====================== 操作按钮 ======================
//#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();