加个弹窗展示综合利润

web/apps/web-antd/src/views/match/solutions/index.vue

@@ -2,7 +2,10 @@
 import { requestClient } from '#/api/request';
 import { Button, message, Form, InputNumber, Select, SelectOption, RadioGroup, Radio, Checkbox, Drawer, Input, Switch } from 'ant-design-vue';
 import { ref, reactive, computed, watch, onMounted, onUnmounted } from 'vue';
+
 import dayjs from 'dayjs';
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
 
 // import MatchCard from '../components/match_card.vue';
 import SolutionItem from '../components/solution_item.vue';
@@ -13,7 +16,7 @@ const contentsPositionStore = useContentsPositionStore();
 const solutions = ref([]);
 const markCount = ref({ all: 0, rollball: 0, today: 0, early: 0 });
 const selectedSolutions = reactive([]);
-const totalProfit = ref({});
+const totalProfit = ref(null);
 const loopActive = ref(false);
 const loopTimer = ref(null);
 const updateTimer = ref(null);
@@ -27,10 +30,19 @@ const updateLoaderHide = ref(null);
 
 const totalProfitVisible = ref(false);
 
+const prettyKey = ref(Date.now());
+
 const fixFloat = (number, x = 2) => {
   return parseFloat(number.toFixed(x));
 }
 
+const formattedTotalProfit = computed(() => {
+  if (!totalProfit.value || Object.keys(totalProfit.value).length === 0) {
+    return '暂无数据';
+  }
+  return JSON.stringify(totalProfit.value, null, 2);
+})
+
 const headerStyle = computed(() => {
   return {
     position: contentsPositionStore.position,
@@ -108,10 +120,22 @@ const updateSolutions = async (showLoading=false) => {
 }
 
 const showTotalProfit = async () => {
-  totalProfit.value = await calcTotalProfit();
-  totalProfitVisible.value = true;
-  const { profit } = totalProfit.value;
-  console.log('profit', profit);
+  try {
+    const data = await calcTotalProfit();
+    totalProfit.value = data || {};
+    prettyKey.value = Date.now();
+    totalProfitVisible.value = true;
+  } catch (error) {
+    console.error('Failed to show total profit:', error);
+    message.error('显示综合利润失败');
+  }
+};
+
+const closeTotalProfit = () => {
+  totalProfit.value = null;
+  prettyKey.value = Date.now();
+  totalProfitVisible.value = false;
+  selectedSolutions.splice(0);
 };
 
 
@@ -283,6 +307,16 @@ onUnmounted(() => {
     </div>
     <div class="list-empty" v-else>暂无数据</div>
 
+    <Drawer
+      title="综合利润详情"
+      :open="totalProfitVisible"
+      :width="600"
+      placement="right"
+      @close="closeTotalProfit"
+    >
+      <vue-json-pretty :data="totalProfit" :indent="2" :deep="4" :key="prettyKey" :showDoubleQuotes="false"></vue-json-pretty>
+    </Drawer>
+
   </div>
 </template>