| | |
| | | <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"> |
| | |
| | | </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"> |
| | |
| | | <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> |
| | |
| | | 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: '', |
| | |
| | | state.chartStatus = true; |
| | | }); |
| | | } |
| | | |
| | | state.activeMetricName = val; |
| | | if (val === 'metricGraph') { |
| | | if (!graphData.value) { |
| | | getGraphTreeData(); |
| | | } |
| | | } |
| | | }; |
| | | //#endregion |
| | | |
| | |
| | | ).finally(() => { |
| | | queryLoading.value = false; |
| | | }); |
| | | |
| | | querySummaryData.value = res?.summary ?? []; |
| | | if (!isFirst) { |
| | | nextTick(() => { |
| | |
| | | }; |
| | | //#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"> |