MTP2.0_WEB/src/common/components/capitalInfo/index.vue

<template>
    <div class="capital-info">
        <!-- 资金信息 -->
        <a-select
            class="capitalSelect"
            style="width: 180px"
            v-if="false"
            @change="accountChange"
            v-model:value="selectedAccountId"
        >
            <a-select-option
                v-for="item in getAllTaAccount()"
                :value="item.accountid"
                :key="item.accountid"
            >{{ item.accountid }}</a-select-option>
        </a-select>
        <div class="numBlocks">
            <div class="capitalItem">
                <div class="firstLine">
                    <div>资金账号</div>
                    <div>
                        <i class="iconfont icon-zhengyan" @click="showAction"></i>
                    </div>
                </div>
                <div class="numBar">{{ showValue(getSelectedAccount().accountid) }}</div>
            </div>
            <div class="capitalItem">
                <div class="firstLine">
                    <div>余额</div>
                    <!-- <div>
                        <i class="iconfont icon-zhengyan" @click="showAction"></i>
                    </div>-->
                </div>
                <div class="numBar">{{ showValue(data.currentbalance) }}</div>
            </div>
            <!-- <div class="capitalItem">
        <div class="firstLine">
          <div>占用</div>
        </div>
        <div class="numBar green">128,000.00</div>
            </div>-->
            <div class="capitalItem">
                <div class="firstLine">
                    <div>冻结</div>
                </div>
                <div class="numBar red">{{ showValue(data.freeze) }}</div>
            </div>
            <div class="capitalItem">
                <div class="firstLine">
                    <div>可用</div>
                </div>
                <div class="numBar blue">{{ showValue(canUseMoney(getSelectedAccount())) }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { getAllTaAccount, getCanUseMoney, getFreeze, getSelectedAccount, setSelectedAccount } from '@/services/bus/account';
import { AccountListItem } from '@/services/dataCenter/interafce/account';
import Bus from '@/utils/eventBus/index';
import { getTaAccount } from '@/services/go/TaAccount';
import { useHazardRates } from '@/views/order/funding_information/components/funding_information_funding_summary/setup'
import { initData } from '@/common/methods';

export default defineComponent({
    name: 'capital-info',
    setup(props, context) {
        // 当前选中的资金账号
        const selectedAccount = getSelectedAccount();
        const selectedAccountId = ref<number>(selectedAccount.accountid);
        const data = reactive(getMoney(selectedAccount));
        const show = ref<boolean>(true);
        function showAction() {
            show.value = !show.value;
        }

        // 脱敏处理
        function showValue(value: number | string) {
            return show.value ? value : '******';
        }
        const loading = ref<boolean>(false)
        const { canUseMoney, getHoldsList } = useHazardRates();
        initData(() => {
            // 获取头寸
            getHoldsList(loading)
        })

        function getMoney(value: AccountListItem) {
            const { currentbalance } = value;
            return { currentbalance, freeze: getFreeze(value, true), canUse: getCanUseMoney(value) };
        }
        function accountChange(id: number) {
            const item = getAllTaAccount().find((e) => e.accountid === id) as AccountListItem;
            Object.assign(data, getMoney(item));
            setSelectedAccount(item);
        }
        // 资金变化，重新加载数据
        Bus.$on('moneyChangedNtf_UI', () => {
            getTaAccount().then(() => {
                accountChange(selectedAccountId.value);
            });
        });
        return {
            getAllTaAccount,
            selectedAccountId,
            accountChange,
            data,
            show,
            showValue,
            showAction,
            loading,
            canUseMoney,
            getSelectedAccount,
        };
    },
});
</script>

<style lang="less">
.capital-info {
    width: 100%;
    height: 100%;
    background: @m-grey6;
    .ant-select.capitalSelect {
        .ant-select-selector {
            width: 180px;
            height: 40px;
            line-height: 40px;
            background: @m-grey6;
            border: 1px solid @m-blue0;
            .ant-select-selection-item {
                font-size: 14px;
                color: @m-white0;
                line-height: 40px;
            }
        }
    }
    .numBlocks {
        padding: 10px 12px 18px 12px;
    }
    .capitalItem {
        width: 100%;
        padding-top: 10px;
        font-size: 14px;
        color: @m-grey1;
        .firstLine {
            width: 100%;
            .inlineflex;
            justify-content: space-between;
            height: 18px;
            line-height: 18px;
            .iconfont {
                font-size: 18px;
                color: @m-black3;
            }
        }
        .numBar {
            width: 100%;
            margin-top: 12px;
            height: 16px;
            line-height: 16px;
            font-size: 16px;
            text-align: left;
            color: @m-white0;
            margin-bottom: 8px;
        }
        .green {
            color: @m-green0;
        }
        .red {
            color: @m-red1;
        }
        .blue {
            color: @m-blue0;
        }
    }
    .capitalCollapse {
        height: 100%;
        background: transparent;
        .ant-collapse-item {
            height: 100%;
            border: 0;
            .ant-collapse-header {
                width: 100%;
                padding: 0 25px 0 12px;
                height: 40px;
                line-height: 40px;
                border: 1px solid @m-blue0;
                border-left: 0;
                font-size: 14px;
                font-family: Adobe Heiti Std;
                color: @m-white0;
                .ellipse;
                .ant-collapse-arrow {
                    right: 10px;
                }
            }
            .ant-collapse-content {
                height: calc(100% - 60px);
                overflow: auto;
                .ant-collapse-content-box {
                    padding: 10px 12px;
                    .flex();
                    flex-direction: column;
                }
            }
        }
    }
}
</style>;