wujingjing
2024-12-18 e3f61a2057463cbf793c91837783289de7a84965
src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
@@ -4,8 +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="{ invisible: showMode2 === DisplayModeType2.Map }"
               class="flex-0 m-2 first-of-type:ml-0"
               :class="{ invisible: isMap && showMode2 === DisplayModeType2.Map }"
               v-model="visibleParams[index].value"
               v-for="(item, index) in visibleParams as any"
               :key="item.id"
@@ -61,8 +61,8 @@
               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">
@@ -116,17 +116,24 @@
      </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>
      <div class="mt-5 relative" v-if="chartDlgIsShow && metricsList.length > 0">
         <span
            class="absolute right-[10px] top-[5px] ywifont ywicon-guanbi text-[#528abe] font-bold cursor-pointer"
            style="z-index: 2"
            @click="closeChartDlg"
         ></span>
         <el-tabs v-model="activeTab" type="border-card">
            <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>
      </div>
      <InfoDetail class="text-base" v-model="infoDetailIsShow" :item="detailMapRow" :colList="colList" />
   </div>
@@ -144,16 +151,16 @@
import { BORDER_COLOR, COL_HEADER_CELL_BG_COLOR, THICK_BORDER_WIDTH } from '../deviceLastValue/constants';
import DisplayMode from '../recordSet/components/DisplayMode.vue';
import { DisplayModeType, DisplayModeType2, displayModeTypeMap, displayModeTypeMap2 } from '../recordSet/components/types';
import RecordSetDialog from '../recordSet/RecordSetDialog.vue';
import { RecordSetParamsType, recordSetMapCom } from '../recordSet/types';
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 RecordSetDialog from '../recordSet/RecordSetDialog.vue';
const props = defineProps({
   data: {
@@ -345,7 +352,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>();
@@ -380,28 +407,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)总宽小于容器宽:直接按比例分
@@ -409,6 +414,7 @@
 * 3)计算完的宽度放在 colList.value 的 width 属性上
 * @param width
 */
const calcColWidth = (width) => {
   // 返回所有标题字符串
   const maxStrList = tableCols.value.map((item, index) => {
@@ -534,7 +540,7 @@
      borderColor: BORDER_COLOR,
      borderWidth: `${THICK_BORDER_WIDTH}px`,
      color: '#7331a5',
      fontSize: '0.875rem',
      // fontSize: '0.875rem',
      ...extraStyle,
   };
};
@@ -553,7 +559,7 @@
      borderWidth: `${THICK_BORDER_WIDTH}px`,
      backgroundColor: COL_HEADER_CELL_BG_COLOR,
      fontWeight: 700,
      fontSize: '0.875rem',
      // fontSize: '0.875rem',
      color: '#000',
      ...extraStyle,
   };
@@ -707,6 +713,7 @@
         agent_key: props.data.agent_key,
         filter_json: JSON.stringify(filterList),
         order_dim_name: orderDimName,
         result_group_index: 0,
      };
      res = await curveQuery(params);
      queryLoading.value = true;
@@ -1148,7 +1155,7 @@
};
const chartDlgIsShow = ref(false);
const chartDlgKey= ref('');
const chartDlgKey = ref('');
const activeTab = ref(0);
const metricsList = ref([]);
const resetTab = () => {
@@ -1162,11 +1169,16 @@
      chartDlgKey.value = '';
      metricsList.value = [];
   } else {
      const str = row[quotaChartCol] ?? '[]'
      const str = row[quotaChartCol] ?? '[]';
      chartDlgKey.value = str;
      metricsList.value = JSON.parse(str);
   }
};
const closeInfoWindow = () => {
   closeChartDlg();
};
const closeChartDlg = () => {
   chartDlgIsShow.value = false;
};
const tableRowClick = (row) => {
@@ -1182,14 +1194,11 @@
   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>