| | |
| | | <template> |
| | | <!-- 实时监测列表 --> |
| | | <div ref="containerRef" class="w-full flex justify-center" v-resize="resizeHandler"> |
| | | <div class="inline-block"> |
| | | <div |
| | |
| | | :restColWidth="restColWidth" |
| | | :title="firstRow.title" |
| | | :type="firstRow.id" |
| | | :row="firstRow" |
| | | :values="rowChunk" |
| | | @itemClick="valueClick" |
| | | /> |
| | |
| | | :restColWidth="restColWidth" |
| | | :title="row.title" |
| | | :type="row.id" |
| | | :row="row" |
| | | :values="rowChunk" |
| | | @itemClick="valueClick" |
| | | /> |
| | |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | </div> |
| | | <RecordSetDialog v-model="chartDlgIsShow" :otype="chartDlgMapRow?.OTYPE" :oname="chartDlgMapRow?.ONAME"/> |
| | | <RecordSetDialog v-model="chartDlgIsShow" :lastValueItem="chartDlgMapRow" :metricsInfo="chartDlgMapMetricsInfo"/> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import _ from 'lodash'; |
| | | import { computed, onActivated, onMounted, ref } from 'vue'; |
| | | import { computed, onMounted, ref } from 'vue'; |
| | | import MonitorContent from './MonitorContent.vue'; |
| | | import { debounce, getTextWidth } from '/@/utils/util'; |
| | | |
| | | import { chunk, fill } from 'lodash-es'; |
| | | import { chatComProps } from '../../../common'; |
| | | import RecordSetDialog from '../recordSet/RecordSetDialog.vue'; |
| | | import { |
| | | BORDER_COLOR, |
| | | CELL_HEIGHT, |
| | |
| | | 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); |
| | |
| | | } |
| | | } |
| | | let maxWidth = getTextWidth(maxTitle, { |
| | | size: '0.875rem', |
| | | // size: '0.875rem', |
| | | }); |
| | | |
| | | maxWidth += measureWidthOffset; |
| | |
| | | } |
| | | |
| | | let maxWidth = getTextWidth(maxTitle, { |
| | | size: '0.875rem', |
| | | // size: '0.875rem', |
| | | }); |
| | | maxWidth += measureWidthOffset; |
| | | |
| | |
| | | const firstRow = computed(() => props.data?.rows?.[0]); |
| | | const restRows = computed(() => props.data?.rows?.slice(1)); |
| | | const pageChunkList = computed(() => { |
| | | const chunkResult = _.chunk(props.data.values ?? [], pageSize.value); |
| | | const chunkResult = chunk(props.data.values ?? [], pageSize.value); |
| | | const last = chunkResult.at(-1); |
| | | if (last) { |
| | | const restNum = pageSize.value - last.length; |
| | | const emptyData = _.fill(Array(restNum), { |
| | | const emptyData = fill(Array(restNum), { |
| | | ONAME: '', |
| | | OTIME: '', |
| | | OTITLE: '', |
| | |
| | | |
| | | const currentRowChunkList = computed(() => { |
| | | if (!currentPageChunk.value || currentPageChunk.value.length === 0) return []; |
| | | const chunkResult = _.chunk(currentPageChunk.value, maxColsNum.value - 1); |
| | | const chunkResult = chunk(currentPageChunk.value, maxColsNum.value - 1); |
| | | return chunkResult; |
| | | }); |
| | | |
| | |
| | | |
| | | const chartDlgIsShow = ref(false); |
| | | const chartDlgMapRow = ref(null); |
| | | const valueClick = (item) => { |
| | | const chartDlgMapMetricsInfo = ref(null); |
| | | const valueClick = (item,row) => { |
| | | if (isSharePage.value) return; |
| | | if(!row.query_detail_id){ |
| | | return; |
| | | } |
| | | chartDlgMapRow.value = item; |
| | | chartDlgIsShow.value = true; |
| | | chartDlgMapMetricsInfo.value = row; |
| | | }; |
| | | //#endregion |
| | | |