比赛流程树状图

angular.json

 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": "dbb4f25c-8303-4e40-bc39-cace4bc18f49"
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {

src/app/api/services/tournament.service.ts

@@ -14,14 +14,14 @@ import { CreateTournamentDto } from '../models/create-tournament-dto';
 import { TournamentPaginatedReturnMessageDto } from '../models/tournament-paginated-return-message-dto';
 import { TournamentReturnMessageDto } from '../models/tournament-return-message-dto';
 import { UpdateTournamentDto } from '../models/update-tournament-dto';
-
+import { MatchService } from "./match.service";
 @Injectable({
   providedIn: 'root',
 })
 export class TournamentService extends BaseService {
   constructor(
     config: ApiConfiguration,
-    http: HttpClient
+    http: HttpClient,
   ) {
     super(config, http);
   }

src/app/app.module.ts

@@ -9,9 +9,10 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { ApiModule } from './api/api.module';
 import { environment } from 'src/environments/environment';
 import { HttpClientModule } from '@angular/common/http';
+import { LittleMatchComponent } from './little-match/little-match.component';
 
 @NgModule({
-  declarations: [AppComponent, ToastComponent, TournamentComponent],
+  declarations: [AppComponent, ToastComponent, TournamentComponent, LittleMatchComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,

src/app/little-match/little-match.component.css

+
+.tree-diagram {
+  transform: rotateY(180deg)
+}
+
+.id {
+  transform: rotateY(180deg)
+}
+
+#matchInformation {
+  position: absolute;
+  width: 960px;
+  height: 540px;
+  /*background-color: pink;*/
+  margin-top: 6em;
+  margin-left: 8em;
+}
+
+.tree-diagram {
+  position: absolute;
+  background-color: #f2f3f4;
+  /*border: 1px solid gray;*/
+  /*border-radius: 8px ;*/
+  /*box-shadow: 0 20px 20px 20px rgba(0,0,0,0.1);*/
+  height: 100%;
+  width: 100%;
+  overflow: scroll;
+}
+::-webkit-scrollbar {
+  display: none;
+}
+
+.tree-diagram ul {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  /* Reset ul 样式*/
+  list-style-type: none;
+  margin: 0;
+  padding: 2px 0 2px 60px;
+
+}
+
+.tree-diagram ul ul::before {
+  border-top: 2px solid #a0a0a0;
+  content: '';
+
+  /* Position */
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  /* Size */
+  width: 60px;
+  height: 50%;
+}
+
+.tree-diagram li {
+  display: flex;
+  padding: 2px 0 2px 60px;
+  position: relative;
+
+  /* Center the content */
+  align-items: center;
+}
+
+.tree-diagram li::before {
+  border-left: 2px solid #a0a0a0;
+  border-bottom: 2px solid #a0a0a0;
+  content: '';
+
+  /* Position */
+  position: absolute;
+  left: 0;
+  bottom: 50%;
+
+
+  /* Size */
+  width: 60px;
+  height: 50%;
+}
+
+.tree-diagram li::after {
+  border-left: 2px solid #a0a0a0;
+  content: '';
+
+  /* Position */
+  position: absolute;
+  left: 0;
+  bottom: 0;
+
+  /* Size */
+  width: 60px;
+  height: 50%;
+}
+
+.tree-diagram li:first-child::before, .tree-diagram li:last-child::after {
+  /* Remove the top of border from the first and last items */
+  border-left: none;
+}
+
+.tree-diagram li:last-child::before {
+  /* Remove the top of border from the first and last items */
+  border-bottom-left-radius: 4px;
+}
+
+.tree-diagram li:first-child::before {
+  /* Remove the top of border from the first and last items */
+  border-bottom: none;
+}
+
+.tree-diagram li:not(.tree-diagram_root):first-child::after {
+  /* Remove the top of border from the first and last items */
+  border-top: 2px solid #a0a0a0;
+  border-top-left-radius: 4px;
+}

src/app/little-match/little-match.component.html

+<ul>
+  <li>
+    <div class="id">
+      {{date.player1.name}}
+    </div>
+    <app-little-match *ngIf="date.parentMatches[0]" [date]="date.parentMatches[0]"></app-little-match>
+  </li>
+  <li>
+    <div class="id">
+      {{date.player2.name}}
+    </div>
+    <app-little-match *ngIf="date.parentMatches[1]" [date]="date.parentMatches[1]"></app-little-match>
+
+  </li>
+</ul>
+

src/app/little-match/little-match.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LittleMatchComponent } from './little-match.component';
+
+describe('LittleMatchComponent', () => {
+  let component: LittleMatchComponent;
+  let fixture: ComponentFixture<LittleMatchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LittleMatchComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LittleMatchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/little-match/little-match.component.ts

+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-little-match',
+  templateUrl: './little-match.component.html',
+  styleUrls: ['./little-match.component.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class LittleMatchComponent implements OnInit {
+  @Input() date: any;
+
+  constructor() {}
+
+  ngOnInit(): void {
+
+  }
+}

src/app/tournament/tournament.component.css

+.tournament {
+  height: 0;
+  padding-top: 1%;
+  position: relative;
+}
+
+.tournament-control {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+}
+
+.button {
+  display: inline-block;
+  padding: 0 14px;
+  height: 44px;
+  /*margin-top: 2em;*/
+  /*margin-left: 0.5em;*/
+  line-height: 44px;
+  text-align: center;
+  border-radius: 5px;
+  color: white;
+  background-color: #2f6ff4;
+}
+.button:hover {
+  background: #285fb5;
+}
+
+form {
+
+  display: inline-block;
+}
+
+.searchBtnName {
+  position: relative;
+  left: -0.5em;
+  translate: -1em 0;
+  width: 5em;
+  border-radius: 0 ;
+}
+.searchBtnID{
+  position: relative;
+  left: -0.5em;
+  translate: -1.5em 0;
+  margin-right: -1em;
+  width: 5em;
+  border-radius: 0 5px  5px 0 ;
+}
+.search{
+  /*background-color: pink;*/
+  left: 0;
+  position: absolute;
+  width: 800px;
+  top:-2em;
+}
+#searchIntput {
+  margin-left: 8.5em;
+  margin-top: 3em;
+  /*translate: 5px 0;*/
+  color: gray;
+  font-size: inherit;
+  width: 200px;
+  outline: none;
+  display: inline-block;
+  font-weight: 400;
+  /*line-height: 1.6;*/
+  padding: 3px 30px 3px 10px;
+  border-radius: 5px 0 0 5px;
+  border: 1px solid #2f6ff4;
+  background-color: #f2f3f4;
+  height: 44px;
+}
+
+::placeholder {
+  font-size: 0.9em;
+  line-height: 44px;
+  color: gray;
+}
+
+.creat{
+  position: relative;
+  left: -0.5em;
+  margin-left: 2em;
+}
+
+.CupIcon{
+  width: 2em;
+  margin: 0;
+}
+
+.searchIcon{
+  position: relative;
+  left: -2em;
+  width: 1em;
+  display: inline;
+  margin: 0;
+  top:-0.1em
+;
+}

src/app/tournament/tournament.component.html

-<p>tournament works!</p>
+<div class="tournament">
+  <div class="tournament-content">
+    <form>
+      <div class="search">
+        <input type="text" id="searchIntput" name="searchInput" placeholder="搜索赛事" required>
+        <svg t="1673872683154" class="searchIcon" viewBox="0 0 1024 1024" version="1.1"
+             p-id="5187" width="200" height="200">
+          <path
+            d="M997.374066 1005.612975a62.540901 62.540901 0 0 1-88.464105 0l-209.512019-209.668371a438.630611 438.630611 0 1 1 90.527954-86.400255l207.604522 207.604521a62.540901 62.540901 0 0 1-0.156352 88.464105zM445.606965 111.278087a328.339731 328.339731 0 1 0 206.384974 583.60042 62.540901 62.540901 0 0 1 13.790268-20.888661 61.321354 61.321354 0 0 1 22.983781-14.165514A327.964486 327.964486 0 0 0 445.606965 111.278087z"
+            fill="#2f6ff4" p-id="5188"></path>
+        </svg>
+        <div class="button searchBtnName">按名称</div>
+        <div class="button searchBtnID">按ID</div>
+        <div class="button creat">创建赛事</div>
+      </div>
+    </form>
+
+  </div>
+  <div id="matchInformation" class="tournament-content">
+    <div class="tree-diagram">
+      <ul>
+        <li class="tree-diagram_root">
+          <div class="id">
+            <svg t="1673872497096" class="CupIcon" viewBox="0 0 1024 1024" version="1.1"
+                 p-id="4248" width="200" height="200">
+              <path d="M454.5 675.5l-32.4 107.9h181.8L574.5 678" fill="#FBBA22" p-id="4249"></path>
+              <path d="M510.1 682.3c215.1 0 215.1-165.2 215.1-165.2V197.4H300.9v319.7s0 165.2 215.1 165.2h-5.9z"
+                    fill="#FBBA22" p-id="4250"></path>
+              <path d="M515.4 783.4h91.1s89.5 2.3 89.5 80.8H332.4c0-78.6 89.5-80.8 89.5-80.8H513" fill="#C04931"
+                    p-id="4251"></path>
+              <path
+                d="M816.5 383.8V259.3c0-11.2-9-20.2-20.2-20.2h-50.9v-41.7c0-11.2-9-20.2-20.2-20.2H300.9c-11.2 0-20.2 9-20.2 20.2v41.7h-50.9c-11.2 0-20.2 9-20.2 20.2v124.5c0 1.2-0.7 42.2 27.2 70.9 11.7 12 26.5 19.9 43.9 23.8v38.6c0 1.6 2.1 135.7 147.8 174.7l-21.8 72.7c-39 5.7-94.5 31.2-94.5 99.7 0 11.2 9 20.2 20.2 20.2H696c11.2 0 20.2-9 20.2-20.2 0-69.6-57.2-94.7-96.6-99.9l-20.4-72.9c144.1-39.6 146.2-172.7 146.2-174.3v-38.6c17.4-3.9 32.1-11.8 43.9-23.8 27.9-28.7 27.2-69.7 27.2-70.9z m-550.8 42.7c-16-16.4-15.8-41.9-15.8-42.1V279.6h30.7v156.7c-5.7-2.4-10.8-5.6-14.9-9.8z m338.2 377.1c0.1 0 0.1 0 0 0h2c6.2 0.2 54 3 66.8 40.4h-317c12.8-37.4 60.5-40.2 66.2-40.4h182z m-154.6-40.4l19.1-63.6c12.5 1.6 25.9 2.5 40.1 2.8 0.5 0 1.1 0.1 1.6 0.1h5.9c0.5 0 1.1 0 1.6-0.1 14.9-0.3 28.8-1.3 41.9-3l17.9 63.9H449.3zM705 517c-0.1 5.9-3.5 143.6-191.9 145-17.6-0.1-33.6-1.4-48.1-3.7-1.5-0.9-3-1.7-4.7-2.2-3.2-0.9-6.3-1-9.4-0.4-127.1-27.3-129.7-133.5-129.8-138.6V217.6H705V517z m55.3-90.5c-4.1 4.2-9.1 7.4-15 9.8V279.5H776v104.8c0.1 0.3 0.3 25.8-15.7 42.2z"
+                fill="#211F1E" p-id="4252"></path>
+              <path
+                d="M446.7 449.5l-11.2 65.2c-1 5.7 1.4 11.4 6 14.8 4.7 3.4 10.8 3.8 16 1.1l58.5-30.8 58.5 30.8c2.2 1.2 4.6 1.7 7.1 1.7 3.1 0 6.3-1 8.9-2.9 4.7-3.4 7-9.1 6-14.8l-11.2-65.2 47.4-46.2c4.1-4 5.6-10.1 3.8-15.5-1.8-5.5-6.5-9.5-12.2-10.3L559 368l-29.3-59.3c-2.6-5.2-7.8-8.4-13.6-8.4s-11 3.3-13.6 8.4L473.2 368l-65.5 9.5c-5.7 0.8-10.4 4.8-12.2 10.3-1.8 5.5-0.3 11.5 3.8 15.5l47.4 46.2z m38.8-52.6c4.9-0.7 9.2-3.8 11.4-8.3l19.2-38.9 19.2 38.9c2.2 4.5 6.5 7.6 11.4 8.3l43 6.2-31.1 30.3c-3.6 3.5-5.2 8.5-4.4 13.4l7.3 42.8-38.4-20.2c-4.4-2.3-9.7-2.3-14.1 0l-38.4 20.2 7.3-42.8c0.8-4.9-0.8-9.9-4.4-13.4l-31.1-30.3 43.1-6.2z"
+                fill="#211F1E" p-id="4253"></path>
+            </svg>
+            {{date.winner.id}}{{date.winner.name}}
+          </div>
+          <app-little-match [date]="date"></app-little-match>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+

src/app/tournament/tournament.component.ts

 import { Component, OnInit } from '@angular/core';
+import { TournamentService } from '../api/services/tournament.service';
 
 @Component({
   selector: 'app-tournament',
   templateUrl: './tournament.component.html',
-  styleUrls: ['./tournament.component.css']
+  styleUrls: ['./tournament.component.css'],
 })
 export class TournamentComponent implements OnInit {
+  date: any = {
+    id: 11,
+    tournamentId: 1,
+    round: 3,
+    isThirdPlaceMatch: false,
+    status: 'Finished',
+    player1Id: 3,
+    player1Score: 1,
+    player2Id: 5,
+    player2Score: 2,
+    winnerId: 5,
+    childMatchId: null,
+    player1: {
+      id: 3,
+      name: 'Nanahira',
+      quit: false,
+      tournamentId: 1,
+    },
+    player2: {
+      id: 5,
+      name: 'Yuzurisa',
+      quit: false,
+      tournamentId: 1,
+    },
+    winner: {
+      id: 5,
+      name: 'Yuzurisa',
+      quit: false,
+      tournamentId: 1,
+    },
+    parentMatches: [
+      {
+        id: 12,
+        tournamentId: 1,
+        round: 2,
+        isThirdPlaceMatch: false,
+        status: 'Finished',
+        player1Id: 1,
+        player1Score: 1,
+        player2Id: 3,
+        player2Score: 2,
+        winnerId: 3,
+        childMatchId: 11,
+        player1: {
+          id: 1,
+          name: 'Clala',
+          quit: false,
+          tournamentId: 1,
+        },
+        player2: {
+          id: 3,
+          name: 'Nanahira',
+          quit: false,
+          tournamentId: 1,
+        },
+        winner: {
+          id: 3,
+          name: 'Nanahira',
+          quit: false,
+          tournamentId: 1,
+        },
+        parentMatches: [
+          {
+            id: 14,
+            tournamentId: 1,
+            round: 1,
+            isThirdPlaceMatch: false,
+            status: 'Finished',
+            player1Id: 1,
+            player1Score: 2,
+            player2Id: 2,
+            player2Score: 1,
+            winnerId: 1,
+            childMatchId: 12,
+            player1: {
+              id: 1,
+              name: 'Clala',
+              quit: false,
+              tournamentId: 1,
+            },
+            player2: {
+              id: 2,
+              name: 'Aris',
+              quit: false,
+              tournamentId: 1,
+            },
+            winner: {
+              id: 1,
+              name: 'Clala',
+              quit: false,
+              tournamentId: 1,
+            },
+            parentMatches: [],
+          },
+        ],
+      },
+      {
+        id: 13,
+        tournamentId: 1,
+        round: 2,
+        isThirdPlaceMatch: false,
+        status: 'Finished',
+        player1Id: 4,
+        player1Score: 1,
+        player2Id: 5,
+        player2Score: 2,
+        winnerId: 5,
+        childMatchId: 11,
+        player1: {
+          id: 4,
+          name: 'Momobako',
+          quit: false,
+          tournamentId: 1,
+        },
+        player2: {
+          id: 5,
+          name: 'Yuzurisa',
+          quit: false,
+          tournamentId: 1,
+        },
+        winner: {
+          id: 5,
+          name: 'Yuzurisa',
+          quit: false,
+          tournamentId: 1,
+        },
+        parentMatches: [],
+      },
+    ],
+  };
 
-  constructor() { }
+  constructor(private tournamentService: TournamentService) {}
 
   ngOnInit(): void {
-  }
 
+  }
 }