对接地图指标

wujingjing

2024-11-28 340d40b4d4243c0f3bf82d40b8f570246e39119d

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue

@@ -5,6 +5,7 @@
         <template v-if="visibleParams && visibleParams.length > 0 && showFilter">
            <component
               class="flex-0 m-2"
               :class="{ invisible: showMode2 === DisplayModeType2.Map }"
               v-model="visibleParams[index].value"
               v-for="(item, index) in visibleParams as any"
               :key="item.id"
@@ -16,10 +17,36 @@
               :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" />

         <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"
               :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">
      <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"
@@ -27,7 +54,8 @@
               :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"
@@ -87,9 +115,18 @@
         />
      </div>

      <div class="flex-auto" v-if="isMap && showMode2 === DisplayModeType2.Map">
         <MapView :data="data" @equipClick="showCurve" />
      </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>

      <InfoDetail class="text-base" v-model="infoDetailIsShow" :item="detailMapRow" :colList="colList" />
   </div>
@@ -99,22 +136,24 @@
import { createReusableTemplate } from '@vueuse/core';
import * as echarts from 'echarts';
import type { TableInstance } from 'element-plus';
import { chunk, sortBy } from 'lodash-es';
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 } from '../recordSet/components/types';
import { DisplayModeType, DisplayModeType2, displayModeTypeMap, displayModeTypeMap2 } from '../recordSet/components/types';
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 { axisLabelFormatter } from '/@/utils/chart';
import { LocalPlus } from '/@/utils/storage';
import { debounce, getTextWidth, toPercent } from '/@/utils/util';
import { sortBy, chunk } from 'lodash-es';
import RecordSetDialog from '../recordSet/RecordSetDialog.vue';

const props = defineProps({
   data: {
@@ -150,6 +189,10 @@
const checkIsTotalTable = (propsData) => {
   return propsData?.hasOwnProperty('agg_count_col') ?? false;
};

const isMap = computed(() => {
   return props.data?.hasOwnProperty('map') ?? false;
});

const isTotalTable = computed(() => checkIsTotalTable(props.data));

@@ -577,7 +620,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;
@@ -1067,7 +1110,12 @@
};
//#endregion

const orderMap = new Map();
const sortChange = ({ column, prop, order }) => {
   // 恢复原状，更新后再显示排序状态
   const curOrder = orderMap.get(prop) ?? null;
   column.order = curOrder;

   let sendOrder;
   if (order === 'descending') {
      sendOrder = 'desc';
@@ -1079,9 +1127,61 @@
   const colName = colList.value[prop].name;
   const sendOrderName = sendOrder ? `${colName},${sendOrder}` : '';
   orderDimName = sendOrderName;
   queryUpdate();

   queryUpdate().then(() => {
      orderMap.set(prop, order);
      column.order = order;
   });
};

// 地图模式展示
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;
      //}
   }
};

const chartDlgIsShow = ref(false);
const chartDlgKey= ref('');
const activeTab = ref(0);
const metricsList = ref([]);
const resetTab = () => {
   activeTab.value = 0;
};
const showCurve = (row) => {
   resetTab();
   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 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,