vent-template/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>