update

commpents/pagesMatchs/achieve/achieve-2.js

@@ -1,23 +1,208 @@
 // commpents/pagesMatchs/achieve/achieve-2.js
+const app = getApp();
+const nodeSetting = function (node) {
+    node.label = node.name
+    return node;
+};
+const edgeSetting = function (edge) {
+    return edge;
+}
 Component({
+    options: { multipleSlots: true },
     /**
      * 组件的属性列表
      */
     properties: {
+        options: { type: Object }
+    },
+
+    lifetimes: {
+        attached: async function () {
+            // 在组件实例进入页面节点树时执行
+            await this.search()
+            await this.searchUser();
+            this.setData({ loadChart: true })
+        },
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+        },
+    },
 
+    pageLifetimes: {
+        // 组件所在页面的生命周期函数
+        show: function () {
+            console.log(this.data.loadChart);
+            this.search()
+            this.searchUser();
+            this.setData({ loadChart: true })
+        },
+        hide: function () { },
+        resize: function () { },
     },
 
     /**
      * 组件的初始数据
      */
     data: {
-
+        loadChart: false,
+        winData: {},
+        loseData: {},
+        schList: [],
+        canvasWidth: 375,
+        canvasHeight: 600,
+        pixelRatio: 2,
+        edgeSetting,
+        nodeSetting,
+        tabs: {
+            active: 'a',
+            menu: [
+                { title: '比赛流程', active: 'a' },
+                { title: '败者组流程', active: 'b' },
+            ],
+        },
     },
 
     /**
      * 组件的方法列表
      */
     methods: {
+        /**
+    * 查询函数
+    */
+        search: async function () {
+            const query = this.properties.options;
+            let arr;
+            arr = await app.$get(`/eliminate/graphData`, query, 'race');
+            if (arr.errcode == '0') {
+                const { winData, loseData } = this.groupData(arr.data);
+                // const schList = this.schData(arr.data)
+                this.setData({ winData, loseData })
+            }
+            arr = await app.$get(`/eliminate/playerList`, query, 'race');
+            if (arr.errcode == '0' && arr.data.length > 0) {
+                this.setData({ playerList: arr.data })
+            }
+        },
+        // 查询赛事赛程
+        searchUser: async function () {
+            const query = this.properties.options;
+            let arr;
+            arr = await app.$get(`/eliminate`, query, 'race');
+            if (arr.errcode == '0' && arr.total > 0) {
+                for (const val of arr.data) {
+                    this.setNodeInfo(val)
+                    // 状态
+                }
+                this.setData({ schList: arr.data });
+                this.setTopPlayerName();
+            }
+        },
+        /**
+         * 给所有顶点去找到选手
+         */
+        setTopPlayerName() {
+            const func = type => {
+                const { nodes, edges } = this.data[`${type}Data`];
+                // 顶点:是其他的target且不是任何节点的source
+                const tops = nodes.filter(f => {
+                    const { id } = f;
+                    const r = edges.find(f => f.source === id)
+                    if (!r) return true
+                })
+                if (tops.length <= 0) return;
+                for (const t of tops) {
+                    const { id } = t;
+                    const es = edges.filter(f => f.target === id)
+                    const ns = nodes.filter(f => es.find(ef => ef.source === f.id))
+                    const headNodeId = ns[0]?.id;
+                    const lastNodeId = ns[ns.length - 1]?.id
+                    const r = this.data.schList.find(f => (f.player_one_node === headNodeId && f.player_two_node === lastNodeId) || (f.player_one_node === lastNodeId && f.player_two_node === headNodeId))
+                    if (!r) continue;
+                    const { player_one_score, player_one_name, player_two_score, player_two_name, status } = r
+                    // 未结束不查
+                    if (status !== '2') continue;
+                    if (player_one_score > player_two_score) t.name = player_one_name
+                    else t.name = player_two_name
+                    const ri = nodes.findIndex(f => f.id === t.id)
+                    nodes[ri] = t;
+                }
+                this.setData({ [`${type}Data.nodes`]: nodes })
+            }
+            func('win')
+            func('lose')
+        },
+
+        /**
+         * 给流程图数据分组
+         * @param {Array} data 流程图数据
+         */
+        groupData(data) {
+            const { nodes, edges } = data;
+            // 按胜/败进行分组,显示在2个选项卡中
+            const winNodes = nodes.filter(f => !f.mark || f.mark.includes('w'))
+            const winEdges = this.getNodesEdges(winNodes, edges);
+            const loseNodes = nodes.filter(f => f.mark && !f.mark.includes('w'))
+            const loseEdges = this.getNodesEdges(loseNodes, edges);
+            return { winData: { nodes: winNodes, edges: winEdges }, loseData: { nodes: loseNodes, edges: loseEdges } }
+        },
+
+        /**
+         * 同步图与赛程的人名
+         * @param {Object} data 赛程数据
+         */
+        setNodeInfo(data) {
+            const { player_one, player_one_node, player_one_name, player_two, player_two_node, player_two_name } = data
+            const setNode = (node_id, name) => {
+                let data = this.data.winData;
+                let r = data.nodes.find(f => f.id === node_id)
+                if (r) {
+                    const ri = data.nodes.findIndex(f => f.id === node_id)
+                    r.name = name;
+                    data.nodes[ri] = r;
+                    this.setData({ winData: data })
+                    return;
+                }
+                data = this.data.loseData;
+                r = data.nodes.find(f => f.id === node_id)
+                if (r) {
+                    const ri = data.nodes.findIndex(f => f.id === node_id)
+                    r.name = name;
+                    data.nodes[ri] = r;
+                    this.setData({ loseData: data })
+                    return;
+                }
+
+            }
+            if (player_one && player_one_node) setNode(player_one_node, player_one_name)
+            if (player_two && player_two_node) setNode(player_two_node, player_two_name)
+        },
+
+        /**
+         * 找到这些节点的边关系
+         * @param {Array} list 节点数据
+         * @param {Array} edges 所有的辺数据
+         */
+        getNodesEdges(list, edges) {
+            const fedges = [];
+            for (let i = 0; i < list.length; i += 2) {
+                const n1 = list[i];
+                const n2 = list[i + 1]
+                const n1id = n1.id;
+                const n2id = n2.id
+                if (!n1id || !n2id) continue;
+                const n1e = edges.find(f => f.source === n1id)
+                const n2e = edges.find(f => f.source === n2id)
+                if (!n1e || !n2e) continue;
+                const n1et = n1e.target;
+                const n2et = n2e.target;
+                if (n1et === n2et) fedges.push(n1e, n2e)
+            }
+            return fedges;
+        },
 
+        tabsChange: function (e) {
+            let { active } = e.detail;
+            this.setData({ 'tabs.active': active });
+        },
     }
 })

commpents/pagesMatchs/achieve/achieve-2.json

@@ -1,4 +1,7 @@
 {
     "component": true,
-    "usingComponents": {}
+    "usingComponents": {
+        "s-tab": "/commpents/tabs/index",
+        "f6-darge": "/commpents/f6darge/index"
+    }
 }

commpents/pagesMatchs/achieve/achieve-2.wxml

@@ -2,7 +2,17 @@
     <scroll-view scroll-y="true" class="scroll-view">
         <view class="list-scroll-view">
             <view class="one">
-                淘汰赛
+                <view class="one">
+                    <s-tab tabs="{{tabs}}" bind:tabsChange="tabsChange"></s-tab>
+                </view>
+                <view class="two">
+                    <view wx:if="{{tabs.active=='a'}}">
+                        <f6-darge wx:if="{{loadChart}}" width="{{canvasWidth}}" height="{{canvasHeight}}" pixelRatio="{{pixelRatio}}" data="{{winData}}" nodeSetting="{{nodeSetting}}" edgeSetting="{{edgeSetting}}" />
+                    </view>
+                    <view wx:elif="{{tabs.active=='b'}}">
+                        <f6-darge wx:if="{{loadChart}}" width="{{canvasWidth}}" height="{{canvasHeight}}" pixelRatio="{{pixelRatio}}" data="{{loseData}}" nodeSetting="{{nodeSetting}}" edgeSetting="{{edgeSetting}}" />
+                    </view>
+                </view>
             </view>
         </view>
     </scroll-view>

pagesMatch/match/achieve.js

@@ -20,7 +20,8 @@ Page({
             { num: 2, name: '顾红伟' },
             { num: 3, name: '顾红伟' },
             { num: 4, name: '顾红伟' },
-        ]
+        ],
+        
     },
     // 返回
     back: function () { wx.navigateBack({ delta: 1 }) },
@@ -56,6 +57,8 @@ Page({
             }
         })
     },
+
+    
     /**
      * 生命周期函数--监听页面初次渲染完成
      */

pagesMatch/match/achieve.wxml

@@ -8,7 +8,7 @@
                 <achieve-1></achieve-1>
             </view>
             <view wx:elif="{{tabs.active=='b'}}" class="a b">
-                <achieve-2></achieve-2>
+                <achieve-2 options="{{options}}"></achieve-2>
             </view>
             <view wx:elif="{{tabs.active=='c'}}" class="a c">
                 <achieve-3 cList="{{cList}}"></achieve-3>

pagesMatch/matchAdmin/elimmatch/add.js

@@ -6,7 +6,9 @@ const nodeSetting = function (node) {
 const edgeSetting = function (edge) {
     return edge;
 }
-const prefix = 'http://192.168.1.197:15001/newCourt/race/v2/api'
+//调试用
+// const prefix = 'http://192.168.1.197:15001/newCourt/race/v2/api'
+const prefix = ''
 Page({
     data: {
         frameStyle: { useTop: true, name: '添加赛程', leftArrow: true, useBar: false },