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

<template>
  <div class="capital-info">
    <!-- 资金信息 -->
    <a-select class="capitalSelect" style="width: 180px" @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(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(data.canUse)}}</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';

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) {
            return show.value ? value : '******';
        }
        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.$emit('taAccountChangedNtf');
        }
        // 资金变化，重新加载数据
        Bus.$on('moneyChangedNtf_UI', () => {
            getTaAccount().then(() => {
                accountChange(selectedAccountId.value);
            });
        });
        return {
            getAllTaAccount,
            selectedAccountId,
            accountChange,
            data,
            show,
            showValue,
            showAction,
        };
    },
});
</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>;