From 45f16bffeef4d72a0279c4178a85b0eeec50c4a3 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 07 八月 2024 14:51:15 +0800
Subject: [PATCH] question
---
src/components/chat/chatComponents/summaryCom/components/deviceLastValue/DeviceLastValueCom.vue | 173 +++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 149 insertions(+), 24 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/DeviceLastValueCom.vue b/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/DeviceLastValueCom.vue
index 69dbdcf..63c58e4 100644
--- a/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/DeviceLastValueCom.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/DeviceLastValueCom.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- 瀹炴椂鐩戞祴鍒楄〃 -->
<div ref="containerRef" class="w-full flex justify-center" v-resize="resizeHandler">
<div class="inline-block">
<div
@@ -8,6 +9,9 @@
backgroundColor: BORDER_COLOR,
}"
>
+ <div class="flex-center font-bold text-base bg-[#8db4e2]" :style="{ height: `${CELL_HEIGHT}px` }">
+ {{ data.title }}
+ </div>
<div
v-for="(rowChunk, index) in currentRowChunkList"
:key="index"
@@ -27,7 +31,7 @@
class="flex"
:class="`space-x-[${THICK_BORDER_WIDTH}px]`"
:style="{
- backgroundColor: COL_HEADER_CELL_BG_COLOR,
+ backgroundColor: BORDER_COLOR,
}"
>
<div
@@ -35,7 +39,7 @@
:key="item"
:class="COL_HEADER_CELL_CLASS"
:style="{
- width: `${CELL_WIDTH}px`,
+ width: `${index === 0 ? firstColWidth : restColWidth}px`,
height: `${CELL_HEIGHT}px`,
backgroundColor: COL_HEADER_CELL_BG_COLOR,
}"
@@ -43,13 +47,31 @@
{{ index === 0 ? '' : rowChunk[index - 1]?.OTITLE }}
</div>
</div>
- <MonitorContent v-if="firstRow" :title="firstRow.title" :type="firstRow.id" :values="rowChunk" />
+ <MonitorContent
+ v-if="firstRow"
+ :firstColWidth="firstColWidth"
+ :restColWidth="restColWidth"
+ :title="firstRow.title"
+ :type="firstRow.id"
+ :values="rowChunk"
+ @itemClick="valueClick"
+ />
</div>
<!-- 鍓╀綑琛� -->
- <MonitorContent v-for="(row, index) in restRows" :key="index" :title="row.title" :type="row.id" :values="rowChunk" />
+ <MonitorContent
+ v-for="(row, index) in restRows"
+ :key="index"
+ :firstColWidth="firstColWidth"
+ :restColWidth="restColWidth"
+ :title="row.title"
+ :type="row.id"
+ :values="rowChunk"
+ @itemClick="valueClick"
+ />
</div>
</div>
<el-pagination
+ style="margin-bottom: 0 !important"
small
hide-on-single-page
v-model:current-page="pageIndex"
@@ -59,27 +81,30 @@
@current-change="handleCurrentChange"
/>
</div>
+ <RecordSetDialog v-model="chartDlgIsShow" :otype="chartDlgMapRow?.OTYPE" :oname="chartDlgMapRow?.ONAME" :indexName="indexName"/>
</div>
</template>
<script setup lang="ts">
import _ from 'lodash';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onActivated, onMounted, ref } from 'vue';
import MonitorContent from './MonitorContent.vue';
-import { debounce } from '/@/utils/util';
+import { debounce, getTextWidth } from '/@/utils/util';
import { chatComProps } from '../../../common';
import {
BORDER_COLOR,
CELL_HEIGHT,
- CELL_WIDTH,
+ CELL_MAX_WIDTH,
COL_HEADER_CELL_BG_COLOR,
COL_HEADER_CELL_CLASS,
PAGE_HEIGHT,
+ ROW_HEADER_CELL_MAX_WIDTH,
THICK_BORDER_WIDTH,
THIN_BORDER_WIDTH,
} from './constants';
import type { Monitor, MonitorValue } from './types';
+import RecordSetDialog from '../recordSet/RecordSetDialog.vue';
const props = defineProps(chatComProps) as {
data: Monitor;
@@ -89,29 +114,116 @@
const pageSize = ref(null);
const containerRef = ref<HTMLDivElement>(null);
+const measureWidthOffset = 2;
+/** @description 娴嬮噺棣栧垪鍐呭瀹藉害 */
+const rowHeaderCellContentWidth = computed(() => {
+ if (!props.data.rows || props.data.rows.length === 0) return 0;
+ let maxLen = 0;
+ let maxTitle = '';
+ for (const item of props.data.rows) {
+ const { title } = item;
+ const len = title.gblen();
+ if (len > maxLen) {
+ maxLen = len;
+ maxTitle = title;
+ }
+ }
+ let maxWidth = getTextWidth(maxTitle, {
+ size: '0.875rem',
+ });
+ maxWidth += measureWidthOffset;
+
+ if (maxWidth > ROW_HEADER_CELL_MAX_WIDTH) {
+ maxWidth = ROW_HEADER_CELL_MAX_WIDTH;
+ }
+
+ return maxWidth;
+});
+/** @description 娴嬮噺鍏朵粬鍒楀唴瀹瑰搴� */
+const colHeaderCellContentWidth = computed(() => {
+ if (!props.data.values || props.data.values.length === 0) return 0;
+ let maxLen = 0;
+ let maxTitle = '';
+ for (const item of props.data.values) {
+ const { OTITLE } = item;
+ const len = OTITLE.gblen();
+ if (len > maxLen) {
+ maxLen = len;
+ maxTitle = OTITLE;
+ }
+ }
+
+ let maxWidth = getTextWidth(maxTitle, {
+ size: '0.875rem',
+ });
+ maxWidth += measureWidthOffset;
+
+ if (maxWidth > CELL_MAX_WIDTH) {
+ maxWidth = CELL_MAX_WIDTH;
+ }
+
+ return maxWidth;
+});
+
+const firstColWidth = ref(rowHeaderCellContentWidth.value);
+const restColWidth = ref(colHeaderCellContentWidth.value);
+const calcMaxRowsNum = (groupCount: number, height, extraHeight = 0) => {
+ return Math.floor(
+ (height - 2 * THICK_BORDER_WIDTH - CELL_HEIGHT - extraHeight) /
+ (CELL_HEIGHT * groupCount + 2 * THICK_BORDER_WIDTH + THIN_BORDER_WIDTH * (groupCount - 2))
+ );
+};
let maxColsNum = ref<number>(null);
const resizeEvent = ({ width, height }) => {
+ if (width === 0 || height === 0) {
+ return;
+ }
// 鎸夋渶澶у搴︾畻鏈�澶у垪鏁�
- maxColsNum.value = Math.floor((width - THICK_BORDER_WIDTH) / (CELL_WIDTH + THICK_BORDER_WIDTH));
+ maxColsNum.value = Math.floor(
+ (width - THICK_BORDER_WIDTH + colHeaderCellContentWidth.value - rowHeaderCellContentWidth.value) /
+ (colHeaderCellContentWidth.value + THICK_BORDER_WIDTH)
+ );
+
+ const currentWidth =
+ (maxColsNum.value - 1) * colHeaderCellContentWidth.value +
+ rowHeaderCellContentWidth.value +
+ THICK_BORDER_WIDTH * (maxColsNum.value - 1) +
+ THICK_BORDER_WIDTH * 2;
+ let restWidth = width - currentWidth;
+ if (restWidth > 0) {
+ // 灏藉彲鑳藉垎缁欑涓�鍒�
+ if (rowHeaderCellContentWidth.value + restWidth > ROW_HEADER_CELL_MAX_WIDTH) {
+ restWidth = rowHeaderCellContentWidth.value + restWidth - ROW_HEADER_CELL_MAX_WIDTH;
+ firstColWidth.value = ROW_HEADER_CELL_MAX_WIDTH;
+ } else {
+ firstColWidth.value = rowHeaderCellContentWidth.value + restWidth;
+ restWidth = 0;
+ }
+
+ // 鍏朵綑鍒嗙粰鍏朵粬鍒�
+ if (restWidth !== 0) {
+ const averageWidth = restWidth / (maxColsNum.value - 1);
+ const currentWidth = colHeaderCellContentWidth.value + averageWidth;
+ restColWidth.value = currentWidth > CELL_MAX_WIDTH ? CELL_MAX_WIDTH : currentWidth;
+ }
+ }
const groupCount = (props.data?.rows?.length ?? 0) + 1;
- const calcMaxRowsNum = (height, extraHeight = 0) => {
- return Math.floor(
- (height - THICK_BORDER_WIDTH - extraHeight) /
- (CELL_HEIGHT * groupCount + 2 * THICK_BORDER_WIDTH + THIN_BORDER_WIDTH * (groupCount - 2))
- );
- };
// 鎸夋渶澶ч珮搴︾畻鏈�澶ц鏁�
- let rowsNum = calcMaxRowsNum(height);
+ let rowsNum = calcMaxRowsNum(groupCount, height);
// 鎸夋渶澶у垪鏁伴摵
const maxColsRowsNum = Math.ceil(total / maxColsNum.value);
const isNeedPage = maxColsRowsNum > rowsNum;
- rowsNum = isNeedPage ? calcMaxRowsNum(height, PAGE_HEIGHT) : maxColsRowsNum;
+ rowsNum = isNeedPage ? calcMaxRowsNum(groupCount, height, PAGE_HEIGHT) : maxColsRowsNum;
// rowsNum 琛岋紝maxColsNum鍒楋紝绗竴鍒椾笉绠�
- pageSize.value = isNeedPage ? rowsNum * (maxColsNum.value - 1) : total;
+ pageSize.value = isNeedPage
+ ? rowsNum * (maxColsNum.value - 1)
+ : total % (maxColsNum.value - 1) === 0
+ ? total
+ : (Math.floor(total / (maxColsNum.value - 1)) + 1) * (maxColsNum.value - 1);
pageIndex.value = 1;
// isNeedPage 鏄惁鍒嗛〉锛宺owsNum 琛屾暟锛宮axColsNum 鍒楁暟锛�
};
@@ -152,24 +264,37 @@
return chunkResult;
});
-// 璁＄畻鏈�澶у垪鏁�
-// x* cellWidth+thickBorderWidth*(x-1)+thickBorderWidth*2 <= width;
+//#region ====================== 鐐瑰嚮鐪嬫洸绾� ======================
-// x*(cellWidth+thickBorderWidth)+thickBorderWidth<=width;
-// x<= (width-thickBorderWidth)/(cellWidth+thickBorderWidth);
+const chartDlgIsShow = ref(false);
+const chartDlgMapRow = ref(null);
+/** @description 鎸囨爣鍚嶇О */
+const indexName = ref(null);
+const valueClick = (item,type) => {
+ chartDlgMapRow.value = item;
+ chartDlgIsShow.value = true;
+ indexName.value = type;
+};
+//#endregion
+
+// 璁＄畻鏈�澶у垪鏁�
+// (x-1)* cellWidth + rowHeaderCellContentWidth.value+thickBorderWidth*(x-1)+thickBorderWidth*2 <= width;
+
+// x*(cellWidth+thickBorderWidth)+thickBorderWidth - cellWidth + rowHeaderCellContentWidth.value<=width;
+// x<= (width-thickBorderWidth + cellWidth-rowHeaderCellContentWidth.value)/(cellWidth+thickBorderWidth);
// const groupCount = (TEST_DATA?.rows?.length ?? 0) + 1;
// 璁＄畻鏈�澶ц鏁�
// y * (cellHeight * groupCount) +
-// (y - 1) * (2 * thickBorderWidth) +
+// (y - 1) * (2 * thickBorderWidth) +cellHeight+thickBorderWidth
// thickBorderWidth +
// thickBorderWidth * 2 +
// y * (groupCount - 2) * thinBorderWidth <=
// height;
-// (cellHeight * groupCount + 2 * thickBorderWidth + thinBorderWidth(groupCount - 2) * groupCount) * y + thickBorderWidth <=height;
+// (cellHeight * groupCount + 2 * thickBorderWidth + thinBorderWidth(groupCount - 2) * y + thickBorderWidth <=height;
-// y<= (height-thickBorderWidth)/(cellHeight * groupCount + 2 * thickBorderWidth + thinBorderWidth(groupCount - 2) * groupCount)
+// y<= (height-thickBorderWidth)/(cellHeight * groupCount + 2 * thickBorderWidth + thinBorderWidth(groupCount - 2) )
onMounted(() => {
resizeEvent({
--
Gitblit v1.9.3