|
|
@@ -0,0 +1,494 @@
|
|
|
+<!-- e:\code\work\goaf-monitoring-system\src\components\Configurable\preset\BoardTable.vue -->
|
|
|
+<template>
|
|
|
+ <div class="board-table-container">
|
|
|
+ <!-- Table 区域 -->
|
|
|
+ <div class="table-section" v-if="tableConfig && tableData.length > 0">
|
|
|
+ <div class="table__content">
|
|
|
+ <!-- 表头 -->
|
|
|
+ <div class="table__content_label" :class="`table__content_label_${tableConfig.type}`">
|
|
|
+ <!-- 单选框列占位（固定宽度） -->
|
|
|
+ <div
|
|
|
+ v-if="showRadio"
|
|
|
+ :style="{ width: radioColumnWidth }"
|
|
|
+ class="label-t table__content__list_item_radio"
|
|
|
+ >
|
|
|
+ <!-- 表头单选框位置留空 -->
|
|
|
+ </div>
|
|
|
+ <!-- 数据列头 -->
|
|
|
+ <div
|
|
|
+ class="label-t"
|
|
|
+ v-for="(item, index) in tableColumns"
|
|
|
+ :key="`header-${index}`"
|
|
|
+ :style="{ flexBasis: dataColumnFlexBasis }"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 表格内容 -->
|
|
|
+ <div class="table__content_list" :class="`table__content_list_${tableConfig.type}`">
|
|
|
+ <div
|
|
|
+ class="table__content_list_row"
|
|
|
+ v-for="(row, rowIndex) in tableData"
|
|
|
+ :key="`row-${rowIndex}`"
|
|
|
+ :class="{ 'active-row': selectedRowIndex === rowIndex }"
|
|
|
+ @click="handleRowClick(rowIndex)"
|
|
|
+ >
|
|
|
+ <!-- 第一列：单选框（固定宽度） -->
|
|
|
+ <div
|
|
|
+ v-if="showRadio"
|
|
|
+ :style="{ width: radioColumnWidth }"
|
|
|
+ class="table__content__list_item_radio"
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ type="radio"
|
|
|
+ :name="radioGroupName"
|
|
|
+ :checked="selectedRowIndex === rowIndex"
|
|
|
+ @click.stop="handleRowClick(rowIndex)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- 其他列（平分剩余空间） -->
|
|
|
+ <div
|
|
|
+ v-for="(col, colIndex) in tableColumns"
|
|
|
+ :key="`cell-${rowIndex}-${colIndex}`"
|
|
|
+ :style="{ flexBasis: dataColumnFlexBasis }"
|
|
|
+ :class="`table__content__list_item_${tableConfig.type}`"
|
|
|
+ >
|
|
|
+ <slot :name="col.prop" :scope="row">
|
|
|
+ <span>{{ getter(row, col.prop) }}</span>
|
|
|
+ </slot>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Board 区域 - 支持多个 board 配置 -->
|
|
|
+ <div class="board-section">
|
|
|
+ <div
|
|
|
+ v-for="(boardCfg, boardIndex) in boardConfigList"
|
|
|
+ :key="`board-section-${boardIndex}`"
|
|
|
+ >
|
|
|
+ <div v-if="boardCfg.title" class="board-title">
|
|
|
+ <div class="board-title-text">{{boardCfg.title}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="board-list">
|
|
|
+ <MiniBoard
|
|
|
+ v-for="(item, itemIndex) in getBoardItems(boardCfg, boardIndex)"
|
|
|
+ :key="`board-${boardIndex}-${itemIndex}`"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :layout="boardCfg.layout || 'val-top'"
|
|
|
+ :type="boardCfg.type || 'D'"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { computed, ref, watch, onMounted } from 'vue';
|
|
|
+ import { get, isNil } from 'lodash-es';
|
|
|
+ import MiniBoard from '../detail/MiniBoard.vue';
|
|
|
+
|
|
|
+ interface BoardItem {
|
|
|
+ label: string;
|
|
|
+ value: string | number;
|
|
|
+ }
|
|
|
+
|
|
|
+ interface TableColumn {
|
|
|
+ name: string;
|
|
|
+ prop: string;
|
|
|
+ }
|
|
|
+
|
|
|
+ interface BoardConfig {
|
|
|
+ type?: string;
|
|
|
+ layout?: string;
|
|
|
+ title?: string;
|
|
|
+ readFrom?: string;
|
|
|
+ items?: BoardItem[];
|
|
|
+ }
|
|
|
+
|
|
|
+ interface TableConfig {
|
|
|
+ type?: string;
|
|
|
+ columns?: TableColumn[];
|
|
|
+ readFrom?: string;
|
|
|
+ }
|
|
|
+
|
|
|
+ const props = withDefaults(
|
|
|
+ defineProps<{
|
|
|
+ boardConfig?: BoardConfig;
|
|
|
+ boardConfigs?: BoardConfig[];
|
|
|
+ tableConfig?: TableConfig;
|
|
|
+ tableData?: any[];
|
|
|
+ showRadio?: boolean;
|
|
|
+ defaultValue?: string;
|
|
|
+ radioWidth?: number; // 单选框列宽度
|
|
|
+ }>(),
|
|
|
+ {
|
|
|
+ showRadio: true,
|
|
|
+ defaultValue: '-',
|
|
|
+ radioWidth: 40, // 默认 40px
|
|
|
+ tableData: () => [],
|
|
|
+ boardConfig: () => ({}),
|
|
|
+ boardConfigs: () => [],
|
|
|
+ tableConfig: () => ({}),
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ // 当前选中的行索引
|
|
|
+ const selectedRowIndex = ref<number>(0);
|
|
|
+ const uniqueId = ref(`bt-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`);
|
|
|
+ const radioGroupName = computed(() => `board-table-radio-${uniqueId.value}`);
|
|
|
+
|
|
|
+ // 处理后的 board 数据
|
|
|
+ const boardItemsList = ref<BoardItem[][]>([]);
|
|
|
+
|
|
|
+ // board 配置列表（兼容单个 boardConfig 和多个 boardConfigs）
|
|
|
+ const boardConfigList = computed(() => {
|
|
|
+ if (props.boardConfigs && props.boardConfigs.length > 0) {
|
|
|
+ return props.boardConfigs;
|
|
|
+ }
|
|
|
+ if (props.boardConfig && Object.keys(props.boardConfig).length > 0) {
|
|
|
+ return [props.boardConfig];
|
|
|
+ }
|
|
|
+ return [];
|
|
|
+ });
|
|
|
+
|
|
|
+ // 单选框列固定宽度
|
|
|
+ const radioColumnWidth = computed(() => {
|
|
|
+ return `${props.radioWidth}px`;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 数据列平分剩余空间
|
|
|
+ const dataColumnFlexBasis = computed(() => {
|
|
|
+ const columnCount = props.tableConfig?.columns?.length || 1;
|
|
|
+ return Math.fround(100 / columnCount) + '%';
|
|
|
+ });
|
|
|
+
|
|
|
+ // 表格列
|
|
|
+ const tableColumns = computed(() => {
|
|
|
+ return props.tableConfig?.columns || [];
|
|
|
+ });
|
|
|
+
|
|
|
+ // 获取表格数据值
|
|
|
+ function getter(o: any, p: string) {
|
|
|
+ const d = get(o, p);
|
|
|
+ return isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
|
|
|
+ }
|
|
|
+ // 获取指定 board 的 items
|
|
|
+ function getBoardItems(boardCfg: BoardConfig, boardIndex: number) {
|
|
|
+ return boardItemsList.value[boardIndex] || [];
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateBoardData(rowData: any) {
|
|
|
+ if (!rowData) return;
|
|
|
+
|
|
|
+ boardItemsList.value = boardConfigList.value.map(boardCfg => {
|
|
|
+ if (!boardCfg?.items) return [];
|
|
|
+
|
|
|
+ return boardCfg.items.map(item => {
|
|
|
+ const valueStr = String(item.value || '');
|
|
|
+ const match = valueStr.match(/\$\{(.+?)\}/);
|
|
|
+
|
|
|
+ let newValue = item.value;
|
|
|
+ if (match && match[1]) {
|
|
|
+ const fieldKey = match[1];
|
|
|
+ newValue = rowData[fieldKey] !== undefined ? rowData[fieldKey] : item.value;
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ label: item.label,
|
|
|
+ value: newValue,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } // 根据选中行更新 board 数据（内部自动处理联动）
|
|
|
+
|
|
|
+ // 处理行点击
|
|
|
+ function handleRowClick(index: number) {
|
|
|
+ if (selectedRowIndex.value === index) return;
|
|
|
+
|
|
|
+ selectedRowIndex.value = index;
|
|
|
+ const rowData = props.tableData[index];
|
|
|
+
|
|
|
+ // 自动更新 board 数据
|
|
|
+ updateBoardData(rowData);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 监听选中行变化，自动更新 board
|
|
|
+ watch(selectedRowIndex, (newIndex) => {
|
|
|
+ if (props.tableData[newIndex]) {
|
|
|
+ updateBoardData(props.tableData[newIndex]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 监听 tableData 变化，重置选中状态
|
|
|
+ watch(() => props.tableData, (newData) => {
|
|
|
+ if (newData && newData.length > 0) {
|
|
|
+ selectedRowIndex.value = 0;
|
|
|
+ updateBoardData(newData[0]);
|
|
|
+ }
|
|
|
+ }, { immediate: true });
|
|
|
+
|
|
|
+ // 初始化时加载第一行数据
|
|
|
+ onMounted(() => {
|
|
|
+ if (props.tableData && props.tableData.length > 0) {
|
|
|
+ updateBoardData(props.tableData[0]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import '/@/design/theme.less';
|
|
|
+
|
|
|
+ @font-face {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ src: url('/@/assets/font/douyuFont.otf');
|
|
|
+ }
|
|
|
+
|
|
|
+ .board-table-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow:hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .board-section {
|
|
|
+ height: 70%;
|
|
|
+ min-height: 450px;
|
|
|
+ flex: none;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 10px 0;
|
|
|
+ .board-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 25px;
|
|
|
+ background: var(--image-module-title) no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ padding-left: 10px;
|
|
|
+ .board-title-text {
|
|
|
+ color: #103d82;
|
|
|
+ font-size: 16px;
|
|
|
+ font-style: normal;
|
|
|
+ font-family: 'Microsoft YaHei';
|
|
|
+ font-weight: 700;
|
|
|
+ margin-top: -10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .board-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ :deep(.mini-board){
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-section {
|
|
|
+ height: 30%;
|
|
|
+ flex: none;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table__content {
|
|
|
+ --image-content-label-A: url('/@/assets/images/sealedGoaf/configurable/table/table-label-A.png');
|
|
|
+
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5px 0;
|
|
|
+
|
|
|
+ .table__content_label {
|
|
|
+ width: 400px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ .label-t {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table__content_list {
|
|
|
+ height: calc(100% - 32px);
|
|
|
+ width: 400px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 5px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: auto;
|
|
|
+ .table__content_list_row {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table__content_label_A {
|
|
|
+ background-image: var(--image-content-label-A);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ color: #000000;
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table__content_list_A {
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ /* 第一个子元素：黑色 */
|
|
|
+ .table__content_list_row .table__content__list_item_A:nth-child(1) {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: left;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 第二个子元素：蓝色 */
|
|
|
+ .table__content_list_row .table__content__list_item_A:nth-child(2) {
|
|
|
+ color: #0052cc;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 第三个子元素：黄色 */
|
|
|
+ .table__content_list_row .table__content__list_item_A:nth-child(3) {
|
|
|
+ color: #b39f01;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 第四个子元素：橙色 */
|
|
|
+ .table__content_list_row .table__content__list_item_A:nth-child(4) {
|
|
|
+ color: #e6a23d;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 第五个子元素：红色 */
|
|
|
+ .table__content_list_row .table__content__list_item_A:nth-child(5) {
|
|
|
+ color: #c45656;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table__content_label_B {
|
|
|
+ background-image: var(--image-content-label-A);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ color: #000000;
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table__content_list_B {
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ /* 第一个子元素：黑色 */
|
|
|
+ .table__content_list_row .table__content__list_item_B:nth-child(1) {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: left;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 第二个子元素：蓝色 */
|
|
|
+ .table__content_list_row .table__content__list_item_B:nth-child(2) {
|
|
|
+ color: #0052cc;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 第三个子元素：绿色 */
|
|
|
+ .table__content_list_row .table__content__list_item_B:nth-child(3) {
|
|
|
+ color: #4caf50;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 第四个子元素：橙色 */
|
|
|
+ .table__content_list_row .table__content__list_item_B:nth-child(4) {
|
|
|
+ color: #c97800;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 第五个子元素：红色 */
|
|
|
+ .table__content_list_row .table__content__list_item_B:nth-child(5) {
|
|
|
+ color: #c45656;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table__content_label_C {
|
|
|
+ background-image: var(--image-content-label-A);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ color: #000000;
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table__content_list_C {
|
|
|
+ width: 100% !important;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .table__content_list_row{
|
|
|
+ color: #000000 !important;
|
|
|
+ }
|
|
|
+ .table__content_list_row .table__content__list_item_C:nth-child(1) {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table__content_label_D {
|
|
|
+ background-image: var(--image-content-label-A);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ color: #000000;
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table__content_list_D {
|
|
|
+ width: 100% !important;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #000000;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .table__content_list_row{
|
|
|
+ color: #000000 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table__content_list_row .table__content__list_item_D:nth-child(1) {
|
|
|
+ width: 50px;
|
|
|
+ }
|
|
|
+ .table__content_list_row .table__content__list_item_D:nth-child(3) {
|
|
|
+ color: #2b6ff0;
|
|
|
+ }
|
|
|
+ .table__content_list_row .table__content__list_item_D:nth-child(4) {
|
|
|
+ color: #107f30;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 单选框列样式（固定宽度）
|
|
|
+ .table__content__list_item_radio {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0; // 防止被压缩
|
|
|
+
|
|
|
+ input[type='radio'] {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
