1

PC-20250623MANY\Administrator

2025-09-17 cdd46caef517696298e394579d6819fa0ca8388d

 src/views/account/components/Position.vue

@@ -1,34 +1,61 @@
<template>
  <el-drawer
    :title="$t('hj2')"
    :visible.sync="dialogVisible"
    direction="rtl"
    :before-close="onClose"
    size="980px"
  >
  <el-drawer :title="$t('hj2')" :visible.sync="dialogVisible" direction="rtl" :before-close="onClose" size="980px">
    <div class="drawer-content">
      <el-table
        :data="tableData"
        style="width: 100%; flex: 1"
        empty-text="No Data"
      >
      <div class="card sb_b">
        <div class="card_1 flex-center">
          <div>{{ $t("浮動盈虧") }}</div>
          <div style="font-size: 24px" :style="`color:${thisMoneyData.profitAndLoss > 0
            ? 'red'
            : thisMoneyData.profitAndLoss < 0
              ? 'green'
              : ''
            }`">
            {{ thisMoneyData.symbol }} {{ thisMoneyData.profitAndLoss }}
          </div>
        </div>
        <div class="card_2 flex-between">
          <div class="card_2_item flex-center" style="align-items: start">
            <div>{{ $t("總資產") }}</div>
            <div>{{ thisMoneyData.symbol }}{{ thisMoneyData.totalMoney }}</div>
          </div>
          <div class="card_2_item flex-center">
            <div>{{ $t("hj48") }}</div>
            <div>
              {{ thisMoneyData.symbol }}{{ thisMoneyData.availableBalance }}
            </div>
          </div>
          <div class="card_2_item flex-center" style="align-items: end">
            <div>{{ $t("平仓盈亏") }}</div>
            <div>
              {{ thisMoneyData.symbol
              }}{{ thisMoneyData.cumulativeProfitAndLoss }}
            </div>
          </div>
        </div>
        <div class="card_2 flex-between" style="border-top: #aaa solid 1px">
          <el-button type="primary" size="medium" @click="$router.push('/home')">
            {{ $t("buy") }}
          </el-button>
          <el-button type="primary" size="medium" @click="$router.push('/home')">
            {{ $t("hj78") }}
          </el-button>
          <el-button type="primary" size="medium" @click="pc">
            {{ $t("hj121") }}
          </el-button>
        </div>
      </div>

      <el-table :data="tableData" style="width: 100%; flex: 1" height="100%" empty-text="No Data">
        <el-table-column prop="stockSpell" :label="$t('hj313')">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.stockGid != $mc ? 'success' : ''"
              size="small"
              style="margin-right: 8px"
            >
            <el-tag :type="scope.row.stockGid != $mc ? 'success' : ''" size="small" style="margin-right: 8px">
              {{ scope.row.stockGid }}
            </el-tag>
            <span>{{ scope.row.stockName }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="positionType"
          :label="`${$t('hj313')} ${$t('類型')}`"
        >
        <el-table-column prop="positionType" :label="`${$t('hj313')} ${$t('類型')}`">
          <template slot-scope="scope">
            <el-tag type="warning">
              {{ dictionary.gplx[scope.row.positionType] }}
@@ -48,15 +75,12 @@

        <el-table-column prop="profitAndLoseParent" :label="$t('Profit')">
          <template slot-scope="scope">
            <span
              :class="`${
                scope.row.profitAndLose < 0
                  ? 'r_c'
                  : scope.row.profitAndLose > 0
                  ? 'lc_c'
                  : ''
              }`"
            >
            <span :class="`${scope.row.profitAndLose < 0
              ? 'r_c'
              : scope.row.profitAndLose > 0
                ? 'lc_c'
                : ''
              }`">
              {{ scope.row.profitAndLose }} ({{
                scope.row.profitAndLoseParent
              }})
@@ -86,21 +110,16 @@
              {{ scope.row.now_price }}
            </span>
            <div v-if="scope.row.stockGid != $mc">
              ≈ $ {{ (scope.row.now_price * rate(scope.row.stockGid)).toFixed(2) }}
              ≈ $
              {{ (scope.row.now_price * rate(scope.row.stockGid)).toFixed(2) }}
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination flex-end">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="pageNum"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        >
        <el-pagination background layout="prev, pager, next" :total="total" :current-page="pageNum"
          :page-size="pageSize" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
@@ -108,12 +127,16 @@
</template>

<script>

let teimss2 = null; // 轮询获取持仓数据计时器
import mixins from "@/mixins/myMixins"; // 混入
import * as api from "@/axios/api";
export default {
  data() {
    return {
      opt: {}, // 列表参数,必须是opt和myMixins混入配合使用
      opt: {
        state: 0,
      }, // 列表参数,必须是opt和myMixins混入配合使用
    };
  },
  mixins: [mixins],
@@ -126,19 +149,39 @@
      type: String,
      default: "",
    },
    moneyData: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    thisMoneyData() {
      return this.moneyData.find((item) => item.accectType == this.type) || {};
    },
  },
  watch: {},
  async created() {
    await this.getExchangeRate(); // 获取汇率
    // await this.getExchangeRate(); // 获取汇率
    this.opt.stockType = this.type;
    this.apiInterface = api.getchicang; // 赋值接口
    this.init(); // 获取记录列表

    teimss2 = setInterval(() => {
      this.getList();
    }, 3000);
  },
  beforeDestroy() {
    clearInterval(teimss2);
  },
  methods: {
    // 关闭弹窗
    onClose() {
      this.$emit("update:dialogVisible", false);
      this.$emit("onClose"); // 关闭弹窗时，通知父组件
    },
    // 打开平仓弹窗
    pc() {
      this.$emit("pc");
    },
  },
};
@@ -151,6 +194,32 @@
  display: flex;
  flex-direction: column;

  .card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #777;

    .card_1 {
      padding: 20px;
      font-size: 18px;
      flex-direction: column;
    }

    .card_2 {
      width: 100%;
      padding: 10px 30px 10px;

      .card_2_item {
        width: 33%;
        flex-direction: column;

        &>div {
          padding: 3px 0;
        }
      }
    }
  }

  .pagination {
    margin-top: 20px;
    text-align: center;