| | |
| | | </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-tabs> |
| | | </div> |
| | | <div class="list_btn" @click="handleExitFlow"> |
| | |
| | | import TimeRange from '/@/components/chat/chatComponents/summaryCom/components/recordSet/components/TimeRange.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 _, { debounce } from 'lodash'; |
| | | import { computed } from 'vue'; |
| | | import SummaryCom from './components/SummaryCom.vue'; |
| | | import { chatMetricsJsonByPost } from '/@/api/metrics'; |
| | | import _, { debounce } from 'lodash'; |
| | | import { useCompRef } from '/@/utils/types'; |
| | | import { OrgTreeItem } from '../agentGraph/types'; |
| | | 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(); |
| | |
| | | name: '', |
| | | id: '', |
| | | } as any, |
| | | activeMetricName: 'indicatorExploration', |
| | | activeMetricName: 'basicInformation', |
| | | metricBasicInfo: { |
| | | descriptionQuotaItems: {}, |
| | | } as any, |
| | |
| | | }); |
| | | }; |
| | | //#endregion |
| | | //#region ====================== 指标探索查询 ====================== |
| | | //#region ====================== 指标图谱查询 ====================== |
| | | // 时间限制 |
| | | const disablesDate = (time) => { |
| | | return time.getTime() > new Date().getTime(); |
| | |
| | | }); |
| | | } |
| | | state.activeMetricName = val; |
| | | if (val === 'metricGraph') { |
| | | if (!graphData.value) { |
| | | getGraphTreeData(); |
| | | } |
| | | } |
| | | }; |
| | | //#endregion |
| | | |
| | | //#region ====================== 指标探索 ====================== |
| | | //#region ====================== 指标图谱 ====================== |
| | | |
| | | const filterDimList = computed( |
| | | () => currentMetrics?.value?.dimensions ?? [].filter((item) => item.filter_type === 'str_eq' && item.type === '字符串') |
| | |
| | | groupDimList: [], |
| | | }); |
| | | |
| | | const currentMetricsId = computed(() => router.currentRoute.value.query.id); |
| | | const currentMetricsId = computed(() => router.currentRoute.value.query.id as string); |
| | | const querySummaryData = ref([]); |
| | | const queryLoading = ref(false); |
| | | /** |
| | |
| | | |
| | | //#endregion |
| | | |
| | | //#region ====================== 指标图谱 ====================== |
| | | |
| | | const maxCount = ref(null); |
| | | const graphData = ref(null); |
| | | const convertOrgTreeToTreeNode = (orgTreeData: OrgTreeItem) => { |
| | | const treeData = { |
| | | id: orgTreeData.treeId, |
| | | label: orgTreeData.label, |
| | | data: orgTreeData, |
| | | children: orgTreeData.children?.length > 0 ? orgTreeData.children.map((item) => convertOrgTreeToTreeNode(item)) : [], |
| | | }; |
| | | return treeData; |
| | | }; |
| | | const getGraphTreeData = () => { |
| | | if (!currentMetricsId.value) return; |
| | | /** @description 维度数量 */ |
| | | let dimensionCount = 0; |
| | | /** @description 指标数量 */ |
| | | let metricsCount = 1; |
| | | |
| | | const metricsTreeId = `metrics-${currentMetricsId.value}`; |
| | | const dimensionList = currentMetrics.value.dimensions ?? []; |
| | | dimensionCount = dimensionList.length; |
| | | let logicTree: OrgTreeItem = { |
| | | treeId: metricsTreeId, |
| | | logicId: currentMetricsId.value, |
| | | type: 'metrics', |
| | | |
| | | model: currentMetrics.value, |
| | | get label() { |
| | | return this.model.title; |
| | | }, |
| | | level: 0, |
| | | children: dimensionList.map((item) => { |
| | | const dimensionTreeId = `${metricsTreeId}-dimension-${item.id}`; |
| | | return { |
| | | treeId: dimensionTreeId, |
| | | logicId: item.id, |
| | | type: 'dimension', |
| | | model: item, |
| | | get label() { |
| | | return this.model.title; |
| | | }, |
| | | level: 1, |
| | | }; |
| | | }), |
| | | }; |
| | | const resData = logicTree; |
| | | maxCount.value = Math.max(dimensionCount, metricsCount); |
| | | graphData.value = convertOrgTreeToTreeNode(resData); |
| | | }; |
| | | //#endregion |
| | | |
| | | onMounted(() => { |
| | | const { id } = route.query; |
| | | query(true); |