| | |
| | | <!-- 查询最新警告信息 --> |
| | | <template> |
| | | <div class="w-full flex-column"> |
| | | <div class="flex-0 flex-items-center mb-1 h-[38px]"> |
| | | <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" |
| | |
| | | :data="item" |
| | | @change="(val) => handleQueryChange(val, item)" |
| | | :originData="originData" |
| | | :disabled="disabled" |
| | | ></component> |
| | | </template> |
| | | |
| | | <ColFilter v-if="!isTotalTable" class="ml-auto" :columnList="colList" @change="colFilterChange" /> |
| | | <DisplayMode v-if="isTotalTable" class="ml-auto" :order="modeChangeOrder" v-model="showMode" @change="displayModeChange" /> |
| | | </div> |
| | |
| | | :maxHeight="tableHeight" |
| | | :cell-style="tableCellStyle" |
| | | :header-cell-style="tableHeaderCellStyle" |
| | | :data="chunkTableData[pager.index - 1]" |
| | | :data="tableData" |
| | | @row-click="recordSelectChange" |
| | | @sort-change="sortChange" |
| | | :spanMethod="objectSpanMethod" |
| | | class="w-full h-full" |
| | | highlightCurrentRow |
| | |
| | | :type="item.type" |
| | | :label="item.label" |
| | | :width="item.width" |
| | | :sortable="item.sortable" |
| | | :sortable="item.sortable?'custom':false" |
| | | :key="item.prop" |
| | | :prop="item.prop" |
| | | @sortChange="sortChange" |
| | | show-overflow-tooltip |
| | | /> |
| | | </template> |
| | |
| | | :type="item.type" |
| | | :label="item.label" |
| | | :width="item.width" |
| | | :sortable="item.sortable" |
| | | :sortable="item.sortable?'custom':false" |
| | | :key="item.prop" |
| | | :prop="item.prop" |
| | | |
| | | show-overflow-tooltip |
| | | /> |
| | | </template> |
| | |
| | | import { PATH_ICON } from '../../../common'; |
| | | import { ChartTypeEnum } from '../../../types'; |
| | | import { axisLabelFormatter } from '/@/utils/chart'; |
| | | import { LocalPlus } from '/@/utils/storage'; |
| | | import { af } from 'element-plus/es/locale'; |
| | | |
| | | const props = defineProps({ |
| | | data: { |
| | |
| | | type: Boolean, |
| | | default: true, |
| | | }, |
| | | disabled: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | }); |
| | | |
| | | const [DefineColumns, ReuseColumns] = createReusableTemplate<{ |
| | |
| | | }; |
| | | |
| | | const isTotalTable = computed(() => checkIsTotalTable(props.data)); |
| | | |
| | | const getTableCols = (propsData) => { |
| | | const current = propsData?.cols ?? []; |
| | | |
| | | if (checkIsTotalTable(propsData)) { |
| | | current.push({ |
| | | title: '比例', |
| | |
| | | // 添加合计行 |
| | | if (last?.length > 0) { |
| | | const totalRow = new Array(last.length); |
| | | totalRow[0] = '合计'; |
| | | |
| | | let lastGroupIndex = tableCols.value.findLastIndex((item, index) => index !== rateColIndex && index !== valueColIndex); |
| | | lastGroupIndex = lastGroupIndex === -1 ? 0 : lastGroupIndex; |
| | | totalRow[lastGroupIndex] = '合计'; |
| | | // 比例列 |
| | | totalRow[rateColIndex] = '100%'; |
| | | // 合计总数 |
| | |
| | | }; |
| | | // 统计表格,需要增加累计值行,以及比例列 |
| | | const tableValues = ref(getTableValues(props.data)); |
| | | |
| | | const storeCols = (colList: any[]) => { |
| | | const key = colList.map((item) => item.label).join(','); |
| | | if (!key) return; |
| | | LocalPlus.set(key, colList, 7); |
| | | }; |
| | | const colList = ref([]); |
| | | const getStoreCols = (colList: any[]) => { |
| | | if (colList.length === 0) return colList; |
| | | const key = colList.map((item) => item.label).join(','); |
| | | if (!key) return colList; |
| | | const storeValue = LocalPlus.get(key); |
| | | |
| | | if (!storeValue) { |
| | | return colList; |
| | | } else { |
| | | return storeValue; |
| | | } |
| | | }; |
| | | |
| | | watchEffect(() => { |
| | | colList.value = |
| | | const originData = |
| | | tableCols.value?.map((item, index) => { |
| | | let isShow = true; |
| | | if (props.data.max_cols != null) { |
| | |
| | | ...item, |
| | | width: 0, |
| | | label: item.title, |
| | | // sortable: item.type === 'time', |
| | | sortable: !!item.name, |
| | | prop: index + '', |
| | | isShow: isShow, |
| | | } as TableCol; |
| | | }) ?? []; |
| | | |
| | | const storeCols = getStoreCols(originData); |
| | | colList.value = storeCols; |
| | | }); |
| | | |
| | | // 所有显示的 prop |
| | |
| | | return values; |
| | | } |
| | | |
| | | const groupData = _.groupBy(values, (item, index) => { |
| | | const groupValue = item[curGroupIndex]; |
| | | return groupValue; |
| | | }); |
| | | const groupData = getItemMap(values, curGroupIndex, true); |
| | | // 顺延下一个分组 |
| | | i++; |
| | | // 重新排布一下位置,保证 group 相邻,同时打上 rowspan |
| | | const result = Object.values(groupData).reduce((preVal, curVal) => { |
| | | const result = Object.values(Array.from(groupData.values())).reduce((preVal, curVal) => { |
| | | curVal.map((item, index) => { |
| | | // 行列作为 key |
| | | const key = `${j + index},${curGroupIndex}`; |
| | |
| | | j += curVal.length; |
| | | return preVal; |
| | | }, []); |
| | | 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; |
| | | }; |
| | | |
| | |
| | | // 计算每一列最长的标题字符串和标题字符串长度 |
| | | for (const item of tableValues.value) { |
| | | item.map((subItem, index) => { |
| | | const subItemLen = subItem?.gblen(); |
| | | // subItem 可能是 数字 |
| | | const subItemLen = (subItem + '')?.gblen(); |
| | | if (maxLenList[index] < subItemLen) { |
| | | maxLenList[index] = subItemLen; |
| | | maxStrList[index] = subItem; |
| | |
| | | } |
| | | if (tableCols.value.length > 0) { |
| | | cellRowSpanMap.clear(); |
| | | tableValues.value = buildGroupData(tableValues.value); |
| | | // tableValues.value = buildGroupData(tableValues.value); |
| | | calcColWidth(width); |
| | | nextTick(() => { |
| | | calcPagerHeight(); |
| | |
| | | |
| | | //#endregion |
| | | |
| | | const tableData = computed(() => buildGroupData(chunkTableData.value[pager.index - 1])); |
| | | |
| | | const reloadTable = () => { |
| | | // 重新计算宽度 |
| | | |
| | | resizeEvent({ width: containerRef.value.clientWidth, height: containerRef.value.clientHeight }); |
| | | }; |
| | | |
| | | const colFilterChange = () => { |
| | | // 重新计算宽度 |
| | | reloadTable(); |
| | | storeCols(colList.value); |
| | | }; |
| | | |
| | | const tableHeight = ref(0.7 * document.body.clientHeight); |
| | |
| | | }); |
| | | |
| | | //#region ====================== 表格过滤参数 ====================== |
| | | |
| | | const queryLoading = ref(false); |
| | | const queryUpdate = async (val: any, item: any) => { |
| | | const historyId = (props as any).originData.historyId; |
| | | const getFilterList = () =>{ |
| | | const curAgentKey = props.data.agent_key; |
| | | let res = null; |
| | | |
| | | // 改变原始值 |
| | | if (item.type === RecordSetParamsType.StringInput) { |
| | | item.origin.value = val; |
| | | } else if (item.type === RecordSetParamsType.TimeRange) { |
| | | item.origin.start_value = val[0]; |
| | | item.origin.end_value = val[1]; |
| | | } else if (item.type === RecordSetParamsType.Step) { |
| | | item.origin.step_value = val; |
| | | } |
| | | try { |
| | | // 相同 agent_key 下所有 filter 请求参数 |
| | | const filterList = ((props as any).originData?.content?.origin?.summary ?? []).reduce((preVal, curVal) => { |
| | | // 相同 agent_key 下所有 filter 请求参数 |
| | | const filterList = ((props as any).originData?.content?.origin?.summary ?? []).reduce((preVal, curVal) => { |
| | | if (curVal.agent_key !== curAgentKey) return preVal; |
| | | |
| | | const filter = (curVal.filter ?? []).reduce((subPreVal, subCurVal) => { |
| | |
| | | |
| | | return preVal; |
| | | }, []); |
| | | |
| | | return filterList; |
| | | } |
| | | const queryLoading = ref(false); |
| | | let orderDimName = ''; |
| | | const queryUpdate = async (val?: any, item?: any) => { |
| | | const historyId = (props as any).originData.historyId; |
| | | let res = null; |
| | | |
| | | if(item){ |
| | | // 改变原始值 |
| | | if (item.type === RecordSetParamsType.StringInput) { |
| | | item.origin.value = val; |
| | | } else if (item.type === RecordSetParamsType.TimeRange) { |
| | | item.origin.start_value = val[0]; |
| | | item.origin.end_value = val[1]; |
| | | } else if (item.type === RecordSetParamsType.Step) { |
| | | item.origin.step_value = val; |
| | | } |
| | | } |
| | | |
| | | |
| | | const filterList = getFilterList(); |
| | | try { |
| | | |
| | | const params = { |
| | | history_id: historyId, |
| | | // 查询前后 agent_key 不会变 |
| | | agent_key: props.data.agent_key, |
| | | filter_json: JSON.stringify(filterList), |
| | | order_dim_name:orderDimName |
| | | }; |
| | | res = await curveQuery(params); |
| | | queryLoading.value = true; |
| | |
| | | |
| | | return data; |
| | | }; |
| | | |
| | | |
| | | const getCommonOption = () => { |
| | | return { |
| | |
| | | }; |
| | | //#endregion |
| | | |
| | | const sortChange = ({column,prop,order}) =>{ |
| | | let sendOrder ; |
| | | if(order==='descending'){ |
| | | sendOrder = 'desc' |
| | | }else if(order==='ascending'){ |
| | | sendOrder = 'asc' |
| | | }else{ |
| | | sendOrder = ''; |
| | | } |
| | | const colName = colList.value[prop].name; |
| | | const sendOrderName = sendOrder ?`${colName},${sendOrder}`:''; |
| | | orderDimName = sendOrderName; |
| | | queryUpdate() |
| | | } |
| | | |
| | | defineExpose({ |
| | | updateAll, |
| | | updateCurrent, |