From 4c20089472b20319746649decbce3a11f16cb6a0 Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期五, 07 二月 2025 18:43:24 +0800 Subject: [PATCH] 切换主题,自身设置颜色、大小 --- src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue | 175 ++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 120 insertions(+), 55 deletions(-) diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue index b235c91..23cd988 100644 --- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue +++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue @@ -4,7 +4,8 @@ <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="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" @@ -17,12 +18,35 @@ ></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" :displayModeTypeMap="displayModeTypeMap" @change="displayModeChange" /> + <DisplayMode + v-if="isTotalTable" + class="ml-auto" + :order="modeChangeOrder" + v-model="showMode" + :modeTypeMap="displayModeTypeMap" + @change="displayModeChange" + /> + <div class="ml-auto space-x-2 flex-items-center" v-if="isMap || !isTotalTable"> + <ColFilter + v-if="(!isMap && !isTotalTable) || (isMap && showMode2 === DisplayModeType2.List && !isTotalTable)" + :columnList="colList" + @change="colFilterChange" + /> - <DisplayMode v-if="isMap" class="ml-auto" :order="modeChangeOrder2" :displayModeTypeMap="displayModeTypeMap2" v-model="showMode2" @change="displayModeChange2" /> + <DisplayMode + v-if="isMap" + :order="modeChangeOrder2" + :modeTypeMap="displayModeTypeMap2" + v-model="showMode2" + @change="displayModeChange2" + /> + </div> </div> - <div class="flex-auto flex-col" style="display: flex" v-show="showMode === DisplayModeType.List && showMode2===DisplayModeType2.List"> + <div + class="flex-auto flex-col" + style="display: flex" + v-show="(!isMap && showMode === DisplayModeType.List) || (isMap && showMode2 === DisplayModeType2.List)" + > <div class="flex-auto" ref="containerRef" v-resize="resizeHandler" v-loading="queryLoading"> <el-table ref="tableRef" @@ -30,14 +54,15 @@ :cell-style="tableCellStyle" :header-cell-style="tableHeaderCellStyle" :data="tableData" - @row-click="recordSelectChange" + @row-dblclick="tableDblClick" + @row-click="tableRowClick" @sort-change="sortChange" :spanMethod="objectSpanMethod" 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"> @@ -90,13 +115,15 @@ /> </div> - <div class="flex-auto" v-if="showMode2 === DisplayModeType2.Map"> - <MapView :data="data"/> + <div class="flex-auto" v-if="isMap && showMode2 === DisplayModeType2.Map"> + <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> + + <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> @@ -106,23 +133,25 @@ import { createReusableTemplate } from '@vueuse/core'; 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 { ChartTypeEnum } from '../../../types'; import { BORDER_COLOR, COL_HEADER_CELL_BG_COLOR, THICK_BORDER_WIDTH } from '../deviceLastValue/constants'; import DisplayMode from '../recordSet/components/DisplayMode.vue'; -import { DisplayModeType, DisplayModeType2,displayModeTypeMap2,displayModeTypeMap } from '../recordSet/components/types'; +import { DisplayModeType, DisplayModeType2, displayModeTypeMap, displayModeTypeMap2 } from '../recordSet/components/types'; import { RecordSetParamsType, recordSetMapCom } from '../recordSet/types'; -import MapView from './map/Map.vue' import InfoDetail from './infoDetail/InfoDetail.vue'; +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 { sortBy, chunk } from 'lodash-es'; +import { isSharePage } from '/@/stores/chatRoom'; const props = defineProps({ data: { @@ -146,6 +175,13 @@ type: Boolean, default: false, }, + reportIndex: { + type: Number, + default: 0, + }, + historyId: { + type: String, + }, }); const [DefineColumns, ReuseColumns] = createReusableTemplate<{ @@ -161,15 +197,17 @@ const isMap = computed(() => { return props.data?.hasOwnProperty('map') ?? false; - }); 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', @@ -190,7 +228,8 @@ 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; @@ -315,7 +354,27 @@ }; } }; +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>(); @@ -350,28 +409,6 @@ 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锛夋�诲灏忎簬瀹瑰櫒瀹斤細鐩存帴鎸夋瘮渚嬪垎 @@ -379,6 +416,7 @@ * 3锛夎绠楀畬鐨勫搴︽斁鍦� colList.value 鐨� width 灞炴�т笂 * @param width */ + const calcColWidth = (width) => { // 杩斿洖鎵�鏈夋爣棰樺瓧绗︿覆 const maxStrList = tableCols.value.map((item, index) => { @@ -504,7 +542,7 @@ borderColor: BORDER_COLOR, borderWidth: `${THICK_BORDER_WIDTH}px`, color: '#7331a5', - fontSize: '0.875rem', + // fontSize: '0.875rem', ...extraStyle, }; }; @@ -523,7 +561,7 @@ borderWidth: `${THICK_BORDER_WIDTH}px`, backgroundColor: COL_HEADER_CELL_BG_COLOR, fontWeight: 700, - fontSize: '0.875rem', + // fontSize: '0.875rem', color: '#000', ...extraStyle, }; @@ -590,7 +628,7 @@ // 鏄惁宸茬粡鏄剧ず鎵�鏈夊垪浜� const haveShowAll = computed(() => visibleColProp.value.length === colList.value.length); -const recordSelectChange = (row) => { +const showInfoDetail = (row) => { if (haveShowAll.value) return; detailMapRow.value = row; infoDetailIsShow.value = true; @@ -654,7 +692,7 @@ 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) { @@ -677,6 +715,7 @@ 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; @@ -1098,33 +1137,59 @@ const sendOrderName = sendOrder ? `${colName},${sendOrder}` : ''; orderDimName = sendOrderName; - - queryUpdate().then(()=>{ - orderMap.set(prop,order); + queryUpdate().then(() => { + orderMap.set(prop, order); column.order = order; }); }; // 鍦板浘妯″紡灞曠ず -const showMode2 = ref(DisplayModeType2.List); -const modeChangeOrder2 = [DisplayModeType2.List, DisplayModeType2.Map]; +const showMode2 = ref(DisplayModeType2.Map); +const modeChangeOrder2 = [DisplayModeType2.Map, DisplayModeType2.List]; const displayModeChange2 = (val: DisplayModeType2) => { if (val === DisplayModeType2.Map) { //if (!chartInstance.value || needUpdateChart) { - //updateChart(); - //needUpdateChart = false; + //updateChart(); + //needUpdateChart = false; //} } }; + +const chartDlgIsShow = ref(false); +const equipCurveMapRow = ref(null); +const showCurve = (row) => { + if (isSharePage.value) return; + if (!row) return; + equipCurveMapRow.value = row; + chartDlgIsShow.value = true; +}; +const closeInfoWindow = () => { + closeChartDlg(); +}; +const closeChartDlg = () => { + chartDlgIsShow.value = false; + equipCurveMapRow.value = null; +}; + +const tableRowClick = (row) => { + if (isMap.value) { + showCurve(row); + } else { + showInfoDetail(row); + } + chartDlgIsShow.value = true; +}; + +const tableDblClick = (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> -- Gitblit v1.9.3