答题接口

front/src/views/competition/second.vue

@@ -9,16 +9,14 @@
                     <div class="haf_circle">
                         <div>
                             <b-img src="/static/image/tx80x80.png" />
-                            <div> 吴和静|西安培华学院</div>
+                            <div> {{userInfo.name}}|{{userInfo.school}}</div>
                         </div>
                     </div>
                     <div>
-                        吴和静的2021年全国高职金融模拟交易大赛账户
+                        {{userInfo.name}}的{{ competition.name}}
                     </div>
                     <div class="tz-tab">
-                        <div class="tz-tab-selected"><div>冠军邀请赛成绩</div></div>
+                        <div v-for="item in competition.stageList" :key="item.id" :class="stageId == item.id?'tz-tab-selected':''" @click="changeStage(item.id)"><div>{{ item.name}}</div></div>
-                        <div><div>决赛成绩</div></div>
-                        <div><div>初赛成绩</div></div>
                     </div>
                 </b-col>
                 <b-col sm>
@@ -160,7 +158,7 @@
                         名称
                     </div>
                     <div>
-                        数量
+                        数量(总/今)
                     </div>
                     <div>
                         可平
@@ -182,6 +180,19 @@
                     </div>
                 </div>
             </div>
+            <div class="table-content">
+               <div  v-for="item in positionList" :key="item.symbol"  :class="item.fpnl>0?'tz-table-row tz-table-row-raise':'tz-table-row tz-table-row-down'">
+                   <div>{{item.symbol}} </div>
+                   <div>{{item.sec_name}} </div>
+                   <div>{{item.available+ '/'+ (!item.available_today?'0':item.available_today) }}</div>
+                   <div>{{!item.available_now?'0':item.available_now}}</div>
+                   <div>{{ numberFixed(item.price)}}</div>
+                   <div>{{ numberFixed(item.last_price)}}</div>
+                   <div>{{ numberFixed(item.amount) }}</div>
+                   <div> {{ numberFixed(item.fpnl/item.amount)}}</div>
+                   <div>{{ numberFixed(item.fpnl)}}</div>
+               </div>
+            </div>
         </b-container>
 
     </div>
@@ -189,15 +200,35 @@
 </template>
 <script>
 import * as echarts from 'echarts'
+import * as competitionApi from '@/api/competition'
+import { getInfo } from '@/utils/auth'
 export default {
     data(){
         return {
             personalCharts:null,
             teamCharts: null,
             personalRankingCharts: null,
-            teamRankingCharts: null
+            teamRankingCharts: null,
+            compId: 0,
+            competition: {},
+            stageId: 0,
+            positionList:[],
+            userInfo:null
         }
     },
+    created(){
+        if(this.$route.query){
+            this.compId = this.$route.query.id
+        }
+        this.userInfo = getInfo()
+        competitionApi.get({compId: this.compId}).then(res=> {
+            if(res.code == 200 ){
+                this.competition = res.data
+                this.stageId = this.competition.stageList[0].id
+                this.listPosition()
+            }
+        })
+    },
     mounted(){
         this.draw("personalRatio")
         this.draw("teamRatio")
@@ -205,6 +236,25 @@ export default {
         this.drawRanking("teamRanking")
     },
     methods:{
+        listPosition(){
+            competitionApi.position({compId: this.compId,stageId: this.stageId }).then(res=>{
+                this.positionList = []
+                if(res.code == 200){
+                    this.positionList = res.data
+                }
+            })
+        },
+        changeStage(id){
+            this.stageId = id
+            this.listPosition()
+        },
+        numberFixed(num){           
+            if(typeof num == 'number'){
+                return num.toFixed(3)
+            }else{
+                return 0;
+            }
+        },
         draw(id){
             let base = +new Date(1968, 9, 3);
             let oneDay = 24 * 3600 * 1000;
@@ -352,6 +402,26 @@ export default {
     width: 100%;
     padding: 1rem;
 }
+.tz-table-row{
+    display: flex;
+    background-color: white;
+}
+.tz-table-row>div{
+    width: 100%;
+    padding: 1rem;
+    border-bottom: 1px solid #d9d9d9;
+    border-left: 1px solid #d9d9d9;
+    font-size: 80%;
+}
+.tz-table-row>div:nth-last-child(0){
+    border-left: none !important;
+}
+.tz-table-row-raise{
+    color: #ff0000;
+}
+.tz-table-row-down{
+    color: #008934;
+}
 .tz-title{
     margin-top: 1rem;
     margin-bottom: 1rem;
@@ -366,7 +436,6 @@ export default {
 }
 .tz-panel2{
   margin-top: 1rem;
-  margin-bottom: 1rem;
   background-color: white;
   border-radius: 10px;
   box-shadow: -1px -1px 20px 1px #c4c4c4 ;