切换主题，自身设置颜色、大小

wujingjing

2025-02-07 4c20089472b20319746649decbce3a11f16cb6a0

 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>