From c29fb5b2bf86955b681c36b72b9c0891d47a0ad5 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 27 十一月 2024 11:12:35 +0800
Subject: [PATCH] 修改图片
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue | 202 +++++++++++++++++++++++++++++++-------------------
1 files changed, 125 insertions(+), 77 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
index 6a6d0e2..1a02bcc 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
+++ b/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,32 @@
: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"
+ :displayModeTypeMap="displayModeTypeMap"
+ @change="displayModeChange"
+ />
+ <div class="ml-auto space-x-2 flex-items-center">
+ <ColFilter v-if="!isTotalTable" :columnList="colList" @change="colFilterChange" />
+
+ <DisplayMode
+ v-if="isMap"
+ :order="modeChangeOrder2"
+ :displayModeTypeMap="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="(isTotalTable && showMode === DisplayModeType.List) || (isMap && showMode2 === DisplayModeType2.List)"
+ >
<div class="flex-auto" ref="containerRef" v-resize="resizeHandler" v-loading="queryLoading">
<el-table
ref="tableRef"
@@ -43,7 +66,7 @@
:type="item.type"
:label="item.label"
:width="item.width"
- :sortable="item.sortable?'custom':false"
+ :sortable="item.sortable ? 'custom' : false"
:key="item.prop"
:prop="item.prop"
@sortChange="sortChange"
@@ -59,10 +82,9 @@
:type="item.type"
:label="item.label"
:width="item.width"
- :sortable="item.sortable?'custom':false"
+ :sortable="item.sortable ? 'custom' : false"
:key="item.prop"
:prop="item.prop"
-
show-overflow-tooltip
/>
</template>
@@ -88,6 +110,10 @@
/>
</div>
+ <div class="flex-auto" v-if="showMode2 === DisplayModeType2.Map">
+ <MapView :data="data" />
+ </div>
+
<div class="flex-auto" v-resize="debounceResizeChart" v-show="showMode === DisplayModeType.Chart">
<div ref="chartRef" style="height: 25rem"></div>
</div>
@@ -98,26 +124,25 @@
<script setup lang="ts">
import { createReusableTemplate } from '@vueuse/core';
-import type { TableInstance } from 'element-plus';
-import _ from 'lodash';
-import type { CSSProperties } from 'vue';
-import { computed, nextTick, onMounted, reactive, ref, type PropType, watchEffect, shallowRef } from 'vue';
-import { BORDER_COLOR, COL_HEADER_CELL_BG_COLOR, THICK_BORDER_WIDTH } from '../deviceLastValue/constants';
-import ColFilter from '/@/components/table/colFilter/ColFilter.vue';
-import { TableCol } from '/@/components/table/colFilter/types';
-import { debounce, getTextWidth, toPercent } from '/@/utils/util';
-import InfoDetail from './infoDetail/InfoDetail.vue';
-import StringInput from './components/StringInput.vue';
-import { curveQuery } from '/@/api/ai/chat';
-import { RecordSetParamsType, recordSetMapCom } from '../recordSet/types';
-import { DisplayModeType } from '../recordSet/components/types';
-import DisplayMode from '../recordSet/components/DisplayMode.vue';
import * as echarts from 'echarts';
+import type { TableInstance } from 'element-plus';
+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 { RecordSetParamsType, recordSetMapCom } from '../recordSet/types';
+import MapView from './map/Map.vue';
+import InfoDetail from './infoDetail/InfoDetail.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 { af } from 'element-plus/es/locale';
+import { debounce, getTextWidth, toPercent } from '/@/utils/util';
+import { sortBy, chunk } from 'lodash-es';
const props = defineProps({
data: {
@@ -153,6 +178,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));
@@ -425,7 +454,7 @@
// 褰撳墠宸叉弧瓒冲搴�
let curWidth = 0;
// 鎺掑ソ搴忕殑瀹藉害鍒楄〃
- const sortedWidthList = _.sortBy(maxWidthList, 'maxWidth');
+ const sortedWidthList = sortBy(maxWidthList, 'maxWidth');
// 鍓╀綑瀹藉害
let restWidth = width;
let notFitStartIndex = 1;
@@ -554,7 +583,7 @@
tableRef.value.doLayout();
// pager.index = 1;
- chunkTableData.value = _.chunk(tableValues.value ?? [], pager.size);
+ chunkTableData.value = chunk(tableValues.value ?? [], pager.size);
};
//#endregion
@@ -594,61 +623,61 @@
});
//#region ====================== 琛ㄦ牸杩囨护鍙傛暟 ======================
-const getFilterList = () =>{
+const getFilterList = () => {
const curAgentKey = props.data.agent_key;
// 鐩稿悓 agent_key 涓嬫墍鏈� filter 璇锋眰鍙傛暟
const filterList = ((props as any).originData?.content?.origin?.summary ?? []).reduce((preVal, curVal) => {
- if (curVal.agent_key !== curAgentKey) return preVal;
+ if (curVal.agent_key !== curAgentKey) return preVal;
- const filter = (curVal.filter ?? []).reduce((subPreVal, subCurVal) => {
- if (subCurVal.type === RecordSetParamsType.StringInput) {
- subPreVal.push({
- update: subCurVal.update,
- value: subCurVal.value,
- path: subCurVal.path,
- });
- } else if (subCurVal.type === RecordSetParamsType.TimeRange) {
- subPreVal.push(
- ...[
- {
- update: subCurVal.update,
- value: subCurVal.start_value,
- path: subCurVal.start_path,
- },
- {
- update: subCurVal.update,
- value: subCurVal.end_value,
- path: subCurVal.end_path,
- },
- ]
- );
- } else if (subCurVal.type === RecordSetParamsType.Step) {
- subPreVal.push({
- update: subCurVal.update,
- value: subCurVal.step_value,
- path: subCurVal.step_path,
- });
- }
+ const filter = (curVal.filter ?? []).reduce((subPreVal, subCurVal) => {
+ if (subCurVal.type === RecordSetParamsType.StringInput) {
+ subPreVal.push({
+ update: subCurVal.update,
+ value: subCurVal.value,
+ path: subCurVal.path,
+ });
+ } else if (subCurVal.type === RecordSetParamsType.TimeRange) {
+ subPreVal.push(
+ ...[
+ {
+ update: subCurVal.update,
+ value: subCurVal.start_value,
+ path: subCurVal.start_path,
+ },
+ {
+ update: subCurVal.update,
+ value: subCurVal.end_value,
+ path: subCurVal.end_path,
+ },
+ ]
+ );
+ } else if (subCurVal.type === RecordSetParamsType.Step) {
+ subPreVal.push({
+ update: subCurVal.update,
+ value: subCurVal.step_value,
+ path: subCurVal.step_path,
+ });
+ }
- return subPreVal;
- }, []);
-
- preVal = preVal.concat(filter);
-
- return preVal;
+ return subPreVal;
}, []);
- return filterList;
-}
+ preVal = preVal.concat(filter);
+
+ 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) {
+ // 鏀瑰彉鍘熷鍊�
if (item.type === RecordSetParamsType.StringInput) {
item.origin.value = val;
} else if (item.type === RecordSetParamsType.TimeRange) {
@@ -659,16 +688,14 @@
}
}
-
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
+ order_dim_name: orderDimName,
};
res = await curveQuery(params);
queryLoading.value = true;
@@ -1072,21 +1099,42 @@
};
//#endregion
-const sortChange = ({column,prop,order}) =>{
- let sendOrder ;
- if(order==='descending'){
- sendOrder = 'desc'
- }else if(order==='ascending'){
- sendOrder = 'asc'
- }else{
+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';
+ } else if (order === 'ascending') {
+ sendOrder = 'asc';
+ } else {
sendOrder = '';
}
const colName = colList.value[prop].name;
- const sendOrderName = sendOrder ?`${colName},${sendOrder}`:'';
+ 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;
+ //}
+ }
+};
defineExpose({
updateAll,
updateCurrent,
--
Gitblit v1.9.3