|
|
@@ -1,146 +1,140 @@
|
|
|
<template>
|
|
|
- <div class="account-status">
|
|
|
- <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>
|
|
|
+ <div class="account-status">
|
|
|
+ <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';
|
|
|
+ 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 '@/services/go/ermcp/outaccount-status/index';
|
|
|
+ import { GetErmcpOutAccountStatus as GetErmcpOutAccountStatusType } from '@/services/go/ermcp/outaccount-status/interface';
|
|
|
+ import TimerUtils from '@/utils/timer/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) };
|
|
|
+ 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);
|
|
|
});
|
|
|
- updatedTime.value = getTime();
|
|
|
- return 'ok';
|
|
|
- })
|
|
|
- .catch((e) => {
|
|
|
- message.error(e.message);
|
|
|
- });
|
|
|
- }
|
|
|
- // 定时轮询
|
|
|
- function setLoop() {
|
|
|
- TimerUtils.setInterval(getAccountStatusList, 10000, 'accountStauts');
|
|
|
+ }
|
|
|
+ // 定时轮询
|
|
|
+ function setLoop() {
|
|
|
+ TimerUtils.setInterval(getAccountStatusList, 10000, 'accountStauts');
|
|
|
+ }
|
|
|
+ return { columns, list, getAccountStatusList, setLoop, updatedTime };
|
|
|
}
|
|
|
- return { columns, list, getAccountStatusList, setLoop, updatedTime };
|
|
|
-}
|
|
|
|
|
|
-function handleMenu() {
|
|
|
- const menulist = [{ key: '1', value: '账号状态' }];
|
|
|
- function selectMenu(item: any) {
|
|
|
- console.log(item);
|
|
|
+ function handleMenu() {
|
|
|
+ const menulist = [{ key: '1', value: '账号状态' }];
|
|
|
+ function selectMenu(item: any) {
|
|
|
+ console.log(item);
|
|
|
+ }
|
|
|
+ return { menulist, selectMenu };
|
|
|
}
|
|
|
- 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 };
|
|
|
- },
|
|
|
-});
|
|
|
+ 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;
|
|
|
+ .account-status {
|
|
|
+ height: 100%;
|
|
|
+ .ant-table-wrapper {
|
|
|
+ margin-left: 1px;
|
|
|
+ .ant-table-body > table {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .ant-table {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
- .ant-table {
|
|
|
- width: 100%;
|
|
|
+ .success-satus {
|
|
|
+ color: #1ff195;
|
|
|
}
|
|
|
- }
|
|
|
- .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>;
|
|
|
+ .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
|
|
|
+>;
|