| | |
| | | <div class="flex-0 flex-items-center mb-1 flex-wrap"> |
| | | <template v-if="visibleParams && visibleParams.length > 0 && showFilter"> |
| | | <component |
| | | class="flex-0 m-2" |
| | | :class="{ invisible: showMode2 === DisplayModeType2.Map }" |
| | | class="flex-0 m-2 first-of-type:ml-0" |
| | | :class="{ hidden: isMap && showMode2 === DisplayModeType2.Map }" |
| | | v-model="visibleParams[index].value" |
| | | v-for="(item, index) in visibleParams as any" |
| | | :key="item.id" |
| | |
| | | class="w-full h-full" |
| | | highlightCurrentRow |
| | | :rowClassName="tableRowClassName" |
| | | cellClassName="text-sm" |
| | | headerCellClassName="text-sm" |
| | | cellClassName="" |
| | | headerCellClassName="" |
| | | > |
| | | <DefineColumns v-slot="{ cols }"> |
| | | <template v-for="item in colList" :key="item.prop"> |
| | |
| | | </div> |
| | | |
| | | <div class="flex-auto" v-if="isMap && showMode2 === DisplayModeType2.Map"> |
| | | <MapView :data="data" @equipClick="showCurve" /> |
| | | <MapView :data="data" @equipClick="showCurve" @closeInfoWindow="closeInfoWindow" /> |
| | | </div> |
| | | |
| | | <div class="flex-auto" v-resize="debounceResizeChart" v-show="showMode === DisplayModeType.Chart"> |
| | | <div ref="chartRef" style="height: 25rem"></div> |
| | | </div> |
| | | <el-tabs v-if="chartDlgIsShow&& metricsList.length>0" v-model="activeTab" type="border-card" class="mt-5"> |
| | | <el-tab-pane lazy v-for="(item, index) in metricsList" :key="`${chartDlgKey}_${index}`" :label="item.title" :name="index" |
| | | ><RecordSetDialog :modelValue="true" :isDialog="false" height="20rem" :metrics="item" |
| | | /></el-tab-pane> |
| | | </el-tabs> |
| | | |
| | | <EquipCurve v-model:isShow="chartDlgIsShow" class="mt-5" :data="equipCurveMapRow" :quotaChartCol="data?.quota_chart?.col" /> |
| | | |
| | | <InfoDetail class="text-base" v-model="infoDetailIsShow" :item="detailMapRow" :colList="colList" /> |
| | | </div> |
| | |
| | | import * as echarts from 'echarts'; |
| | | import type { TableInstance } from 'element-plus'; |
| | | import { chunk, sortBy } from 'lodash-es'; |
| | | import EquipCurve from './components/EquipCurve.vue'; |
| | | import type { CSSProperties } from 'vue'; |
| | | import { computed, nextTick, onMounted, reactive, ref, shallowRef, watchEffect, type PropType } from 'vue'; |
| | | import { PATH_ICON } from '../../../common'; |
| | |
| | | import MapView from './map/Map.vue'; |
| | | import { curveQuery } from '/@/api/ai/chat'; |
| | | import ColFilter from '/@/components/table/colFilter/ColFilter.vue'; |
| | | import { TableCol } from '/@/components/table/colFilter/types'; |
| | | import type { TableCol } from '/@/components/table/colFilter/types'; |
| | | import { axisLabelFormatter } from '/@/utils/chart'; |
| | | import { LocalPlus } from '/@/utils/storage'; |
| | | import { debounce, getTextWidth, toPercent } from '/@/utils/util'; |
| | | import RecordSetDialog from '../recordSet/RecordSetDialog.vue'; |
| | | import { isSharePage } from '/@/stores/chatRoom'; |
| | | |
| | | const props = defineProps({ |
| | | data: { |
| | |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | reportIndex: { |
| | | type: Number, |
| | | default: 0, |
| | | }, |
| | | historyId: { |
| | | type: String, |
| | | }, |
| | | }); |
| | | |
| | | const [DefineColumns, ReuseColumns] = createReusableTemplate<{ |
| | |
| | | |
| | | const isTotalTable = computed(() => checkIsTotalTable(props.data)); |
| | | |
| | | const checkHasAddRateCol = (current) => { |
| | | return current.find((item) => item.title === '比例' && item.type === 'text'); |
| | | }; |
| | | const getTableCols = (propsData) => { |
| | | const current = propsData?.cols ?? []; |
| | | |
| | | if (checkIsTotalTable(propsData)) { |
| | | if (checkIsTotalTable(propsData) && !checkHasAddRateCol(current)) { |
| | | current.push({ |
| | | title: '比例', |
| | | type: 'text', |
| | |
| | | const getTableValues = (propsData) => { |
| | | const agg_count_col = propsData?.agg_count_col; |
| | | const current = (propsData?.values ?? []) as Array<any[]>; |
| | | if (checkIsTotalTable(propsData)) { |
| | | |
| | | if (checkIsTotalTable(propsData)&& !current.find(item=>item[0]==='合计') ) { |
| | | const last = current[current.length - 1]; |
| | | const lastItemIndex = last?.length > 0 ? last.length - 1 : 0; |
| | | valueColIndex = agg_count_col ?? lastItemIndex; |
| | |
| | | }; |
| | | } |
| | | }; |
| | | const getItemMap = (arr: any[], defaultProps = 'ID', isMultiple = false) => { |
| | | if (!arr || arr.length === 0) return {}; |
| | | |
| | | const result = arr.reduce((acc, curr) => { |
| | | if (isMultiple) { |
| | | if (!acc.get(curr[defaultProps])) { |
| | | acc.set(curr[defaultProps], [curr]); |
| | | } else { |
| | | { |
| | | /* acc[curr[defaultProps]].push(curr); */ |
| | | } |
| | | acc.get(curr[defaultProps]).push(curr); |
| | | } |
| | | } else { |
| | | acc.set(curr[defaultProps], curr); |
| | | } |
| | | return acc; |
| | | }, new Map()); |
| | | |
| | | return result; |
| | | }; |
| | | // 单元格行合并情况 |
| | | const cellRowSpanMap = new Map<string, number | undefined>(); |
| | | |
| | |
| | | return result; |
| | | }; |
| | | |
| | | const getItemMap = <T>(arr: T[], defaultProps = 'ID', isMultiple = false) => { |
| | | if (!arr || arr.length === 0) return {}; |
| | | |
| | | const result = arr.reduce((acc, curr) => { |
| | | if (isMultiple) { |
| | | if (!acc.get(curr[defaultProps])) { |
| | | acc.set(curr[defaultProps], [curr]); |
| | | } else { |
| | | { |
| | | /* acc[curr[defaultProps]].push(curr); */ |
| | | } |
| | | acc.get(curr[defaultProps]).push(curr); |
| | | } |
| | | } else { |
| | | acc.set(curr[defaultProps], curr); |
| | | } |
| | | return acc; |
| | | }, new Map()) as Map<string, T | T[]>; |
| | | |
| | | return result; |
| | | }; |
| | | |
| | | /** |
| | | * 计算每一列的宽度 |
| | | * 1)总宽小于容器宽:直接按比例分 |
| | |
| | | * 3)计算完的宽度放在 colList.value 的 width 属性上 |
| | | * @param width |
| | | */ |
| | | |
| | | const calcColWidth = (width) => { |
| | | // 返回所有标题字符串 |
| | | const maxStrList = tableCols.value.map((item, index) => { |
| | |
| | | borderColor: BORDER_COLOR, |
| | | borderWidth: `${THICK_BORDER_WIDTH}px`, |
| | | color: '#7331a5', |
| | | fontSize: '0.875rem', |
| | | // fontSize: '0.875rem', |
| | | ...extraStyle, |
| | | }; |
| | | }; |
| | |
| | | borderWidth: `${THICK_BORDER_WIDTH}px`, |
| | | backgroundColor: COL_HEADER_CELL_BG_COLOR, |
| | | fontWeight: 700, |
| | | fontSize: '0.875rem', |
| | | // fontSize: '0.875rem', |
| | | color: '#000', |
| | | ...extraStyle, |
| | | }; |
| | |
| | | const queryLoading = ref(false); |
| | | let orderDimName = ''; |
| | | const queryUpdate = async (val?: any, item?: any) => { |
| | | const historyId = (props as any).originData.historyId; |
| | | const historyId = props.historyId; |
| | | let res = null; |
| | | |
| | | if (item) { |
| | |
| | | agent_key: props.data.agent_key, |
| | | filter_json: JSON.stringify(filterList), |
| | | order_dim_name: orderDimName, |
| | | result_group_index: props.reportIndex, |
| | | }; |
| | | res = await curveQuery(params); |
| | | queryLoading.value = true; |
| | |
| | | }; |
| | | |
| | | const chartDlgIsShow = ref(false); |
| | | const chartDlgKey= ref(''); |
| | | const activeTab = ref(0); |
| | | const metricsList = ref([]); |
| | | const resetTab = () => { |
| | | activeTab.value = 0; |
| | | }; |
| | | const equipCurveMapRow = ref(null); |
| | | const showCurve = (row) => { |
| | | resetTab(); |
| | | if (isSharePage.value) return; |
| | | if (!row) return; |
| | | equipCurveMapRow.value = row; |
| | | chartDlgIsShow.value = true; |
| | | const quotaChartCol = props.data?.quota_chart?.col; |
| | | if (!quotaChartCol) { |
| | | chartDlgKey.value = ''; |
| | | metricsList.value = []; |
| | | } else { |
| | | const str = row[quotaChartCol] ?? '[]' |
| | | chartDlgKey.value = str; |
| | | metricsList.value = JSON.parse(str); |
| | | |
| | | } |
| | | }; |
| | | const closeInfoWindow = () => { |
| | | closeChartDlg(); |
| | | }; |
| | | const closeChartDlg = () => { |
| | | chartDlgIsShow.value = false; |
| | | equipCurveMapRow.value = null; |
| | | }; |
| | | |
| | | const tableRowClick = (row) => { |
| | |
| | | if (!isMap.value) return; |
| | | showInfoDetail(row); |
| | | }; |
| | | |
| | | defineExpose({ |
| | | updateAll, |
| | | updateCurrent, |
| | | updateIndexSummary, |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | // :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){ |
| | | // background-color: v-bind(stripedBgColor); |
| | | // } |
| | | </style> |
| | | <style scoped lang="scss"></style> |