MTP2.0_WEB/src/views/search/outaccount_status/index.vue

<template>
  <div class="account-status"
       @contextmenu.prevent>
    <firstMenu :list="menulist"
               :value="'value'"
               @selectMenu="selectMenu" />
    <div class="tip">最新更新时间：{{updatedTime}}</div>
    <a-table :columns="columns"
             :data-source="list"
             :pagination="false"
             :locale="{emptyText: '暂无数据'}"
             bordered>
      <template #handlestatus="{ text }">
        <span :class="[text === 1 ? 'success-satus' : 'error-status']">{{ text === 1 ? '正常' : '断开' }}</span>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onUnmounted } from 'vue';
import { initData } from '@/setup/methods/index';
import { message } from 'ant-design-vue';
import firstMenu from '@/components/firstMenu/index.vue';
import { GetErmcpOutAccountStatus } from '@/goServiceAPI/ermcp/outaccount-status/index';
import { GetErmcpOutAccountStatus as GetErmcpOutAccountStatusType } from '@/goServiceAPI/ermcp/outaccount-status/interface';
import TimerUtils from '@/utils/tool/timerUtil';
import moment from 'moment';

function getAccountList() {
    interface ListType extends GetErmcpOutAccountStatusType {
        index: number;
        key: string;
    }
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            align: 'center',
            width: 200,
        },
        {
            title: '资金账号',
            align: 'center',
            dataIndex: 'accountid',
            width: 400,
        },
        {
            title: '期货公司',
            align: 'center',
            dataIndex: 'fcname',
            width: 500,
        },
        {
            title: '连接状态',
            align: 'center',
            dataIndex: 'handlestatus',
            width: 340,
            slots: { customRender: 'handlestatus' },
        },
    ];
    const list = ref<ListType[]>([]);
    // 更新时间
    function getTime(): string {
        return moment().format('YYYY-MM-DD HH:mm:ss');
    }
    const updatedTime = ref<string>(getTime());
    // 获取列表
    function getAccountStatusList() {
        return GetErmcpOutAccountStatus()
            .then((res) => {
                list.value = res.map((e: GetErmcpOutAccountStatusType, index: number) => {
                    return { ...e, index: index + 1, key: String(index) };
                });
                updatedTime.value = getTime();
                return 'ok';
            })
            .catch((e) => {
                message.error(e.message);
            });
    }
    // 定时轮询
    function setLoop() {
        TimerUtils.setInterval(getAccountStatusList, 10000, 'accountStauts');
    }
    return { columns, list, getAccountStatusList, setLoop, updatedTime };
}

function handleMenu() {
    const menulist = [{ key: '1', value: '账号状态' }];
    function selectMenu(item: any) {
        console.log(item);
    }
    return { menulist, selectMenu };
}

export default defineComponent({
    name: 'account-status',
    components: {
        firstMenu,
    },
    setup() {
        const { columns, list, getAccountStatusList, setLoop, updatedTime } = getAccountList();
        const { menulist, selectMenu } = handleMenu();
        initData(async () => {
            await getAccountStatusList();
            setLoop();
        });
        onUnmounted(() => {
            TimerUtils.clearInterval('accountStauts');
        });
        return { columns, list, menulist, selectMenu, updatedTime };
    },
});
</script>

<style lang="less">
.account-status {
    height: 100%;
    .ant-table-wrapper {
        margin-left: 1px;
        .ant-table-body > table {
            border: none;
        }
        .ant-table {
            width: 100%;
        }
    }
    .success-satus {
        color: #1ff195;
    }
    .error-status {
        color: #ff2b2b;
    }
    .tip {
        padding: 10px 0;
        color: #364048;
    }
    .ant-table-placeholder {
        height: 100px;
        line-height: 70px;
        background: @m-grey9;
        border: none;
        border-radius: 0px;
    }
}
</style>;