mky-vent-base/src/views/vent/monitorManager/comment/stationTable.vue

<template>
  <div class="stationTable">
    <div class="content-area">
      <a-table :columns="stationColumns" size="small" :data-source="stationTableData" class="tableW" :pagination="false" :scroll="{ y: 620 }">
        <template #action="{ record }">
          <a class="table-action-link" @click="handlerDetail(record)">详情</a>
          <a class="table-action-link" @click="handlerLocation(record)">定位</a>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, watch, defineExpose } from 'vue';
  import { stationColumns } from './comment.data';
  import { getListAll } from '../deviceMonitor/components/device/device.api';

  let stationTableData = ref<any[]>([]);
  let $emit = defineEmits(['locate', 'stationDetail']);
  //定位
  function handlerLocation(record) {
    $emit('locate', record);
  }
  //查看详情
  function handlerDetail(record) {
    $emit('stationDetail', record);
  }
  //查询分站列表
  async function getStationList() {
    let res = await getListAll();
    res.forEach((el) => {
      el.key = el.id;
      el.linkstatusC = el.linkstatus ? '连接' : '断开';
      el.gdmsC = el.gdms == '1' ? '直流供电' : el.gdms == '0' ? '交流供电' : '';
    });
    stationTableData.value = res;
  }
  defineExpose({ getStationList });
  onMounted(() => {});
</script>

<style lang="less" scoped>
  @ventSpace: zxm;

  .stationTable {
    .zxm-picker,
    .zxm-input {
      border: 1px solid #3ad8ff77;
      background-color: #ffffff00;
      color: #fff;
    }
  }

  :deep(.@{ventSpace}-table-body) {
    height: auto !important;

    tr > td {
      background: #ffffff00 !important;
    }

    tr.@{ventSpace}-table-row-selected {
      td {
        background: #007cc415 !important;
      }
    }
  }

  :deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
    min-height: 0;
  }

  :deep(.@{ventSpace}-pagination) {
    margin-right: 20px !important;
  }

  :deep(.zxm-table-thead > tr > th:last-child) {
    border-right: 1px solid #91e9fe55 !important;
  }
</style>