wujingjing
2024-12-31 7357a3709ebeb22f28c17a21f103d0c715213b34
src/views/project/yw/systemManage/metricMgr/MetricDetail.vue
@@ -5,41 +5,60 @@
            <div class="h100 relative">
               <div class="ml-6 h100">
                  <el-tabs v-model="state.activeMetricName" @tab-change="handleClick" class="h100">
                     <el-tab-pane label="基础信息" name="basicInformation">
                        <div class="h100">
                           <el-descriptions title="指标信息">
                              <el-descriptions-item label="指标名称:" :span="2">{{
                                 state.metricBasicInfo.descriptionQuotaItems.title ? state.metricBasicInfo.descriptionQuotaItems.title : '-'
                              }}</el-descriptions-item>
                              <el-descriptions-item label="指标全称:" :span="2">{{
                                 state.metricBasicInfo.descriptionQuotaItems.full_name
                                    ? state.metricBasicInfo.descriptionQuotaItems.full_name
                                    : '-'
                              }}</el-descriptions-item>
                              <el-descriptions-item label="指标定义:" :span="3">{{
                                 state.metricBasicInfo.descriptionQuotaItems.metrics_define
                                    ? state.metricBasicInfo.descriptionQuotaItems.metrics_define
                                    : '-'
                              }}</el-descriptions-item>
                              <el-descriptions-item label="类别:" :span="2">
                                 {{
                                    state.metricBasicInfo.descriptionQuotaItems.metrics_type
                                       ? state.metricBasicInfo.descriptionQuotaItems.metrics_type
                     <el-tab-pane label="基础信息" name="basicInformation" class="h-full">
                        <div class="h100 flex flex-col">
                           <div class="flex-0">
                              <el-descriptions title="指标信息">
                                 <el-descriptions-item label="指标编号:" :span="2">{{
                                    state.metricBasicInfo.descriptionQuotaItems.id ? state.metricBasicInfo.descriptionQuotaItems.id : '-'
                                 }}</el-descriptions-item>
                                 <el-descriptions-item label="指标名称:" :span="2">{{
                                    state.metricBasicInfo.descriptionQuotaItems.title ? state.metricBasicInfo.descriptionQuotaItems.title : '-'
                                 }}</el-descriptions-item>
                                 <el-descriptions-item label="主题域:" :span="2">{{
                                    state.metricBasicInfo.descriptionQuotaItems?.metrics_group
                                       ? themeDomainMap.value?.[state.metricBasicInfo.descriptionQuotaItems?.metrics_group]
                                       : '-'
                                 }}</el-descriptions-item
                              >
                              <el-descriptions-item label="重要性:" :span="2">
                                 {{ eMetrics_Ops[state.metricBasicInfo.descriptionQuotaItems.metrics_important] }}
                              </el-descriptions-item>
                              <el-descriptions-item label="计算方法:" :span="3">
                                 {{
                                    state.metricBasicInfo.descriptionQuotaItems.calcu_method
                                       ? state.metricBasicInfo.descriptionQuotaItems.calcu_method
                                 }}</el-descriptions-item>
                                 <el-descriptions-item label="单位:" :span="2">{{
                                    state.metricBasicInfo.descriptionQuotaItems.metrics_unit
                                       ? state.metricBasicInfo.descriptionQuotaItems.metrics_unit
                                       : '-'
                                 }}
                              </el-descriptions-item>
                           </el-descriptions>
                           <el-divider />
                                 }}</el-descriptions-item>
                                 <el-descriptions-item label="指标全称:" :span="2">{{
                                    state.metricBasicInfo.descriptionQuotaItems.full_name
                                       ? state.metricBasicInfo.descriptionQuotaItems.full_name
                                       : '-'
                                 }}</el-descriptions-item>
                                 <el-descriptions-item label="指标定义:" :span="3">{{
                                    state.metricBasicInfo.descriptionQuotaItems.metrics_define
                                       ? state.metricBasicInfo.descriptionQuotaItems.metrics_define
                                       : '-'
                                 }}</el-descriptions-item>
                                 <el-descriptions-item label="类别:" :span="2">
                                    {{
                                       state.metricBasicInfo.descriptionQuotaItems.metrics_type
                                          ? state.metricBasicInfo.descriptionQuotaItems.metrics_type
                                          : '-'
                                    }}</el-descriptions-item
                                 >
                                 <el-descriptions-item label="重要性:" :span="2">
                                    {{ eMetrics_Ops[state.metricBasicInfo.descriptionQuotaItems.metrics_important] }}
                                 </el-descriptions-item>
                                 <el-descriptions-item label="计算方法:" :span="3">
                                    {{
                                       state.metricBasicInfo.descriptionQuotaItems.calcu_method
                                          ? state.metricBasicInfo.descriptionQuotaItems.calcu_method
                                          : '-'
                                    }}
                                 </el-descriptions-item>
                              </el-descriptions>
                              <el-divider />
                           </div>
                           <div class="flex-auto flex flex-col">
                              <span class="flex-0 text-[16px] font-bold mb-[4px]">指标图谱</span>
                              <TreeGraph v-if="graphData" class="flex-auto" :data="graphData" :maxCount="maxCount" />
                           </div>
                        </div>
                     </el-tab-pane>
                     <el-tab-pane label="指标探索" name="indicatorExploration" class="h-full">
@@ -86,10 +105,7 @@
                           </div>
                        </div>
                     </el-tab-pane>
                     <el-tab-pane label="指标图谱" name="metricGraph" class="h-full">
                        <div class="h-full">
                           <TreeGraph v-if="graphData" :data="graphData" class="h-full" :maxCount="maxCount" /></div
                     ></el-tab-pane>
                     <!-- <el-tab-pane label="指标图谱" name="metricGraph" class="h-full"> <div class="h-full"></div></el-tab-pane> -->
                  </el-tabs>
               </div>
               <div class="list_btn" @click="handleExitFlow">
@@ -107,12 +123,16 @@
               <div class="mb-[5px]">
                  <div class="set-visit">
                     <i class="ywifont ywicon-fenshu_an w-[18px] h-[18px] text-yellow-300 !text-[20px]"></i>
                     <div>访问次数</div>
                     <div>关键信息</div>
                  </div>
               </div>
               <div class="set-detail">
                  <el-divider />
                  <div class="section___vePzi">
                     <div class="item___title">
                        <i class="ywifont ywicon-gongzuozongjie w-[18px] h-[18px] !text-[18px]"></i>
                        <span>指标名称</span>
                     </div>
                     <div class="item___txXyB">
                        <div class="item_name">重要性:</div>
                        <div class="item_value">{{ eMetrics_Ops[state.metricBasicInfo.descriptionQuotaItems.metrics_important] }}</div>
@@ -201,22 +221,31 @@
import { useRoute, useRouter } from 'vue-router';
import * as metricApi from '/@/api/metrics';
import TimeRange from '/@/components/chat/chatComponents/summaryCom/components/recordSet/components/TimeRange.vue';
import TreeGraph from '/@/components/graph/treeGraph/TreeGraph.vue';
import { formatTime, getDefaultPeriod } from '/@/utils/istation/common.js';
import { eMetrics_Ops } from '/@/views/types/metrics';
import TreeGraph from '/@/components/graph/treeGraph/TreeGraph.vue';
import { FormRules } from 'element-plus/es/components/form/src/types';
import type { FormRules } from 'element-plus/es/components/form/src/types';
import _, { debounce } from 'lodash';
import { computed } from 'vue';
import type { OrgTreeItem } from '../agentGraph/types';
import SummaryCom from './components/SummaryCom.vue';
import { chatMetricsJsonByPost } from '/@/api/metrics';
import { getSceneGroupTreeByPost } from '/@/api/scene';
import { useCompRef } from '/@/utils/types';
import { OrgTreeItem } from '../agentGraph/types';
import { getItemMap } from '/@/utils/util';
const defaultTime = ref<[Date, Date]>([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]);
const router = useRouter();
const route = useRoute();
// 定义变量内容
const themeDomainData = ref([]);
const initThemeDomainData = async () => {
   const res = await getSceneGroupTreeByPost();
   themeDomainData.value = res.groups || [];
};
const themeDomainMap = computed(() => {
   return getItemMap(themeDomainData.value, 'group_id');
});
const state = reactive({
   metricInfo: {
      name: '',
@@ -414,12 +443,8 @@
         state.chartStatus = true;
      });
   }
   state.activeMetricName = val;
   if (val === 'metricGraph') {
      if (!graphData.value) {
         getGraphTreeData();
      }
   }
};
//#endregion
@@ -464,7 +489,6 @@
   ).finally(() => {
      queryLoading.value = false;
   });
   querySummaryData.value = res?.summary ?? [];
   if (!isFirst) {
      nextTick(() => {
@@ -534,10 +558,14 @@
};
//#endregion
onMounted(() => {
onMounted(async () => {
   const { id } = route.query;
   query(true);
   getTableData(id);
   initThemeDomainData();
   await getTableData(id);
   if (!graphData.value) {
      getGraphTreeData();
   }
});
</script>
<style scoped lang="scss">