maotu-webtopo/src/components/vue-components/vue-table-fire-hydrant-info.vue

<template>
  <div class="table-container">
    <!-- 2号主变 -->
    <el-card class="card" shadow="hover" :body-style="{ padding: '10px' }">
      <h2 class="cardHead">消火栓信息</h2>
      <div class="table-wrapper" v-loading="arr.length === 0">
        <el-table
          :data="arr"
          style="width: 100%"
          class="full-height-table"
          @cell-click="handleCellClick"
        >
          <el-table-column prop="equipmentName" label="设备名称" />
          <el-table-column prop="equipmentModel" label="规格型号" />
          <el-table-column prop="equipmentPlace" label="设备位置" />
          <el-table-column prop="manufacturers" label="厂家" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, onUnmounted } from 'vue';
import emitter from '@/utils/emitter';

// 导入全局类型定义
/// <reference path="../../../global.d.ts" />

function handleCellClick(obj: any) {
  console.log('点击：', obj);
  emitter.emit('binding-obj-facility-move', obj.id);
}

emitter.on('binding-data-update', () => {
  console.log('@@binding-data-update');
  dataInit();
});

const props = defineProps({
  fontFamily: {
    type: String,
    default: '黑体'
  },
  fontSize: {
    type: Number,
    default: 12
  },
  testColor: {
    type: String,
    default: '#ffffff'
  },
  definitionItemJson: {
    type: Object,
    default: () => ({})
  }
});

console.log('父传子itemjson:', props.definitionItemJson);

// 计算属性——既读取又修改
let computedSize = computed({
  // 读取
  get() {
    return props.fontSize + 'px';
  }, // 修改
  set(val) {}
});

//数据初始化
async function dataInit() {}

// 在 onMounted 中
onMounted(async () => {
  await dataInit();
});

onUnmounted(() => {
  emitter.off('binding-data-update');
});

//node
interface EquipmentNode {
  equipmentName: string; //设备名称
  equipmentModel: string; //规格型号
  equipmentPlace: string; //设备位置
  manufacturers: string; //厂家
}

// 数据源头
// equipmentState  0正常 1故障
// currentState  0未动作 1报警 2动作 3分位  4关闭  5开启  6运行  7正常
// operation  true屏蔽  false取消屏蔽   null
const arr: EquipmentNode[] = [
  {
    equipmentName: '生产综合楼一楼消火栓1',
    equipmentModel: 'SN-65',
    equipmentPlace: '生产综合楼一楼东走廊',
    manufacturers: '宏达'
  },
  {
    equipmentName: '生产综合楼一楼消火栓2',
    equipmentModel: 'SN-65',
    equipmentPlace: '生产综合楼一楼西走廊',
    manufacturers: '宏达'
  },
  {
    equipmentName: '生产综合楼二楼消火栓1',
    equipmentModel: 'SN-65',
    equipmentPlace: '生产综合楼二楼东走廊',
    manufacturers: '宏达'
  },
  {
    equipmentName: '生产综合楼二楼消火栓2',
    equipmentModel: 'SN-65',
    equipmentPlace: '生产综合楼二楼西走廊',
    manufacturers: '宏达'
  },
  {
    equipmentName: '生产综合楼一楼消火栓1',
    equipmentModel: 'SN-65',
    equipmentPlace: '生产综合楼一楼东走廊',
    manufacturers: '宏达'
  },
  {
    equipmentName: '生产综合楼一楼消火栓2',
    equipmentModel: 'SN-65',
    equipmentPlace: '生产综合楼一楼西走廊',
    manufacturers: '宏达'
  },
  {
    equipmentName: '生产综合楼二楼消火栓1',
    equipmentModel: 'SN-65',
    equipmentPlace: '生产综合楼二楼东走廊',
    manufacturers: '宏达'
  },
  {
    equipmentName: '生产综合楼二楼消火栓2',
    equipmentModel: 'SN-65',
    equipmentPlace: '生产综合楼二楼西走廊',
    manufacturers: '宏达'
  }
];
</script>

<style scoped>
.table-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card :deep(.el-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px;
}

.table-wrapper {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.full-height-table {
  flex: 1;
  height: 100%;
}

.full-height-table :deep(.el-table__body-wrapper) {
  flex: 1;
  overflow-y: auto;
}

.cardHead {
  margin: 0 0 15px 0;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  flex-shrink: 0;
}

.operation-btn {
  width: 60px;
  min-width: 50px;
  padding: 8px 12px;
  height: 30px;
}

/* 控制表头文字大小 */
.full-height-table :deep(.el-table__header th) {
  font-size: 13px;
  font-weight: bold;
}

/* 控制表格内容文字大小 */
.full-height-table :deep(.el-table__body td) {
  font-size: v-bind('computedSize');
  color: v-bind('props.testColor');
}

/* 控制标签文字大小 */
.full-height-table :deep(.el-tag) {
  font-size: v-bind('computedSize'); /* 标签内的文字可以稍小一些 */
}

/* 控制按钮文字大小 */
.full-height-table :deep(.el-button) {
  font-size: v-bind('computedSize');
  color: v-bind('props.testColor');
}
</style>