duoji-frontend/src/views/plcStatus.vue

<template>
    <div>
        <a-table
            :columns="columns"
            :row-key="record => record.id"
            :data-source="data"
            :pagination="pagination"
            @change="handleGetCameraIoList"
        >
          <span slot="status" slot-scope="text">
              {{text == false ? text ='连接异常':text ='没有PLC连接异常'}}
          </span>
            <span slot="action" slot-scope="text, record">
            <a @click="reconnection(record)">重新连接</a>
          </span>
        </a-table>
    </div>
</template>


<script>
const columns = [
    {
        title: '序号',
        // dataIndex: 'id',
        customRender: (text, record, index) => {
            return (
                (1 - 1) * 10 + index + 1
            )
        }
    },
    {
        title: 'PLCID',
        dataIndex: 'plcId',
    },
    {
        title: '状态',
        dataIndex: 'status',
        scopedSlots: {customRender: 'status'}
    },
    {
        title: '异常时间',
        dataIndex: 'time',
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: {customRender: 'action'}
    },
];
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            data: [],
            pagination: {
                total: 0,
                current: 1,
                defaultPageSize: 10, // 默认每页显示数量
                showTotal: total => `共 ${total} 条数据`, // 显示总数
                showSizeChanger: true, // 显示可改变每页数量
                pageSizeOptions: ['10', '20', '30'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize // 改变每页数量时更新显示
            },
            loading: false,
            columns,
            visible: false,
            modelType: '',
            modelData: [],
        };
    },
    computed: {},
    mounted() {
        this.handleGetCameraIoList()
    },
    methods: {
        handleGetCameraIoList(pagination) {
            console.log(pagination)
            if (pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.pageNum = pagination.current;
                this.pageSize = pagination.pageSize;
            }
            this.request();
        },
        request() {
            this.$api.httpApi.disPlcList({
                data: {
                    page: this.pageNum,
                    size: this.pageSize,
                }
            }).then(res => {
                const pagination = {...this.pagination};
                pagination.total = res.data.total;
                this.data = res.data;
                this.pagination = pagination;
                res.data.list.forEach((value, index) => {
                    value.pageNumber = this.pagination.current
                });
            }).catch(err => {

            });
        },
        reconnection(data) {
            console.log(data.streetId)
            var id = data.streetId
            this.$axios.get('/plc/tcp', {
                params: {id: id}
            }).then(res => {
                if (res.code == 200) {
                    this.$message.success('连接成功');
                    this.request()
                } else {
                    this.$message.error('连接失败');
                }
            }).catch(err => {

            })
        }
    },
    components: {}
};
</script>
<style lang="scss" scoped>
    .button-box {
        position: absolute;
        top: 0;
        right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;

        .add {
            margin-right: 20px;
        }
    }
</style>