分享页面

wujingjing

2024-11-08 57817b07cb31a3dd499d37ba3645fffb85ed2fd0

 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"
@@ -50,6 +54,7 @@
                     :title="firstRow.title"
                     :type="firstRow.id"
                     :values="rowChunk"
                     @itemClick="valueClick"
                  />
               </div>
               <!-- 剩余行 -->
@@ -61,6 +66,7 @@
                  :title="row.title"
                  :type="row.id"
                  :values="rowChunk"
                  @itemClick="valueClick"
               />
            </div>
         </div>
@@ -75,12 +81,13 @@
            @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, getTextWidth } from '/@/utils/util';

@@ -97,10 +104,20 @@
   THIN_BORDER_WIDTH,
} from './constants';
import type { Monitor, MonitorValue } from './types';
import RecordSetDialog from '../recordSet/RecordSetDialog.vue';
import { isSharePage } from '/@/stores/chatRoom';

const props = defineProps(chatComProps) as {
   data: Monitor;
};
if (!props.data?.rows || props.data?.rows?.length === 0) {
   // 为空时，随便加一列，防止出现 height 逐渐变短的问题
   props.data.rows.push({
      id: 'aaaaa',
      title: '',
   });
}

const total = props.data?.values?.length ?? 0;
const pageIndex = ref(null);
const pageSize = ref(null);
@@ -162,12 +179,15 @@
const restColWidth = ref(colHeaderCellContentWidth.value);
const calcMaxRowsNum = (groupCount: number, height, extraHeight = 0) => {
   return Math.floor(
      (height - THICK_BORDER_WIDTH - extraHeight) /
      (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 + colHeaderCellContentWidth.value - rowHeaderCellContentWidth.value) /
@@ -180,20 +200,22 @@
      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 (rowHeaderCellContentWidth.value + restWidth > ROW_HEADER_CELL_MAX_WIDTH) {
      restWidth = rowHeaderCellContentWidth.value - ROW_HEADER_CELL_MAX_WIDTH;
      firstColWidth.value = ROW_HEADER_CELL_MAX_WIDTH;
   } else {
      firstColWidth.value = rowHeaderCellContentWidth.value + restWidth;
      restWidth = 0;
   }

   // 其余分给其他列
   if (restWidth !== 0) {
      const currentWidth = colHeaderCellContentWidth.value + restWidth;
      restColWidth.value = currentWidth > CELL_MAX_WIDTH ? CELL_MAX_WIDTH : currentWidth;
      // 其余分给其他列
      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;
@@ -206,7 +228,11 @@
   const isNeedPage = maxColsRowsNum > rowsNum;
   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 是否分页，rowsNum 行数，maxColsNum 列数，
};
@@ -247,6 +273,20 @@
   return chunkResult;
});

//#region ====================== 点击看曲线 ======================

const chartDlgIsShow = ref(false);
const chartDlgMapRow = ref(null);
/** @description 指标名称 */
const indexName = ref(null);
const valueClick = (item, type) => {
   if (isSharePage.value) return;
   chartDlgMapRow.value = item;
   chartDlgIsShow.value = true;
   indexName.value = type;
};
//#endregion

// 计算最大列数
// (x-1)* cellWidth + rowHeaderCellContentWidth.value+thickBorderWidth*(x-1)+thickBorderWidth*2 <= width;

@@ -256,7 +296,7 @@
// 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 <=