statistics2.html 9.45 KB
Newer Older
1
2
3
4
5
<!DOCTYPE html>

<head>
    <title>公会战 - 数据分析</title>
    <meta name='viewport' content='width=1485' charset="utf-8" />
6
   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css">
    <style>
        .el-table td,
        .el-table th {
          text-align: center;
        }
        .el-popover {
          white-space: pre-wrap;
        }
        .digit6{
          color:blue;
        }
        .digit7{
          color:green;
        }
        .digit8{
          color:orange;
        }
        .digit9{
          color:red;
        }
    </style>    
</head>

<body>
    <div id="app" style="margin: 10px">
        <el-page-header @back="location='..'" content="数据分析"></el-page-header>
        <h1 style="text-align:center">数据分析</h1>
37
38
39
40
41
42
43
44
45
46
47
        <!--以后有用-->
        <el-date-picker
          v-model="range"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
Diving-Fish's avatar
Diving-Fish committed
48
        <el-tabs v-model="selectingTab">
49
50
51
            <el-tab-pane label="整体数据" name="total">
                <div>
                    <p>
Diving-Fish's avatar
Diving-Fish committed
52
53
                        <a>共[[ members.length ]]人,[[ challengeCount(totalDamage, true) ]]刀</a>
                        <el-checkbox style="margin-left: 20px;" v-model="containTailAndContinue"></el-checkbox>
54
55
56
57
                        <a>刀均伤害中计入尾刀和剩余刀</a>
                        <a style="margin-left: 20px">&nbsp;</a>
                        <a class="digit6">十万</a> <a class="digit7">百万</a> <a class="digit8">千万</a> <a class="digit9">亿</a>
                    </p>
Diving-Fish's avatar
Diving-Fish committed
58
                    <el-table v-loading="isLoading" :data="globalTableData" style="width: 100%" stripe border :default-sort = "{prop: 'sumDmg', order: 'descending'}">
59
60
61
62
63
64
65
66
                        <el-table-column prop="qqid" label="QQ号" width="125" sortable ></el-table-column>
                        <el-table-column prop="nickname" label="昵称" width="200" sortable ></el-table-column>
                        <el-table-column prop="count" width="120" sortable >
                            <template slot="header" slot-scope="scope">
                                <a>刀数</a>
                                <el-popover placement="top" effect="light" trigger="hover">刀数=正常刀+(补偿刀+尾刀)/2<i class="el-icon-question" slot="reference"></i></el-popover>
                            </template>
                        </el-table-column>
Diving-Fish's avatar
Diving-Fish committed
67
68
69
                        <el-table-column prop="countTail" label="尾刀" width="120" sortable ></el-table-column>
                        <el-table-column prop="countContinue" label="补偿刀" width="120" sortable ></el-table-column>
                        <el-table-column prop="avgDmg" width="270" sortable sort-by="avgDmg" >
70
71
                            <template slot="header" slot-scope="scope">
                                <a>刀均伤害</a>
Diving-Fish's avatar
Diving-Fish committed
72
73
                                <el-popover v-if="!containTailAndContinue" placement="top" effect="light" trigger="hover">当前刀均伤害未计入尾刀和补偿刀<i class="el-icon-question" slot="reference"></i></el-popover>
                                <el-popover v-if="containTailAndContinue" placement="top" effect="light" trigger="hover">当前刀均伤害已计入尾刀和补偿刀<i class="el-icon-question" slot="reference"></i></el-popover>
74
75
                            </template>
                            <template slot-scope="scope">
Diving-Fish's avatar
Diving-Fish committed
76
                                <a :class='"digit" + scope.row.avgDmg.toString().length'>[[scope.row.avgDmg]]</a>
77
78
                            </template>
                        </el-table-column>
Diving-Fish's avatar
Diving-Fish committed
79
                        <el-table-column prop="sumDmg" label="总伤害" width="270" sortable sort-by="sumDmg" >
80
                            <template slot-scope="scope">
Diving-Fish's avatar
Diving-Fish committed
81
                                <a :class='"digit" + scope.row.sumDmg.toString().length'>[[scope.row.sumDmg]]</a>
82
83
                            </template>
                        </el-table-column>
Diving-Fish's avatar
Diving-Fish committed
84
                        <el-table-column prop="sumDmgRate" label="总伤害占比" min-width="150" sortable ></el-table-column>
85
86
87
                    </el-table>
                </div>
            </el-tab-pane>
88
89
90
91
            <el-tab-pane label="公会图表" name="channel">
                <div>
                    <div style="display: flex; height: 450px">
                        <div style="width: 100%">
Diving-Fish's avatar
Diving-Fish committed
92
                            <div style="margin: 10px; padding: 20px; border: 1px solid #EBEEF5; height: 400px;" id="missChart"></div>
93
94
95
96
                        </div>
                    </div>
                    <div style="display: flex; height: 450px">
                        <div style="width: 50%">
Diving-Fish's avatar
Diving-Fish committed
97
                            <div style="margin: 10px; padding: 20px; border: 1px solid #EBEEF5; height: 400px;" id="lastChart"></div>
98
99
                        </div>
                        <div style="width: 50%">
Diving-Fish's avatar
Diving-Fish committed
100
                            <div style="margin: 10px; padding: 20px; border: 1px solid #EBEEF5; height: 400px;" id="totalTimeChart"></div>
101
102
103
104
                        </div>
                    </div>
                    <div style="display: flex; height: 450px">
                        <div style="width: 100%">
Diving-Fish's avatar
Diving-Fish committed
105
                            <div style="margin: 10px; padding: 20px; border: 1px solid #EBEEF5; height: 400px;" id="bossBloodChart"></div>
106
107
108
109
                        </div>
                    </div>
                    <div style="display: flex; height: 450px">
                        <div style="width: 100%">
Diving-Fish's avatar
Diving-Fish committed
110
                            <div style="margin: 10px; padding: 20px; border: 1px solid #EBEEF5; height: 400px;" id="bossHitChart"></div>
111
112
                        </div>
                    </div>
113
114
                    <div style="display: flex; height: 450px">
                        <div style="width: 100%">
Diving-Fish's avatar
Diving-Fish committed
115
                            <div style="margin: 10px; padding: 20px; border: 1px solid #EBEEF5; height: 400px;" id="totalDamageChart"></div>
116
117
                        </div>
                    </div>
118
119
                </div>
            </el-tab-pane>
120
121
122
123
124
125
            <el-tab-pane label="玩家数据" name="player">
                <div>
                    <div style="display: flex; height: 450px">
                        <div style="width: 50%;">
                            <p>
                                <a>选择玩家:</a>
Diving-Fish's avatar
Diving-Fish committed
126
                                <el-select v-model="selectingQQid" placeholder="请选择">
127
128
129
130
131
132
133
                                    <el-option
                                        v-for="member in members"
                                        :key="member.qqid"
                                        :label="member.nickname"
                                        :value="member.qqid">
                                    </el-option>
                                </el-select>
Diving-Fish's avatar
Diving-Fish committed
134
                                <el-checkbox style="margin-left: 20px;" v-model="containTailAndContinue"></el-checkbox>
135
136
137
                                <a>刀均伤害中计入尾刀和剩余刀</a>
                            </p>
                            <div style="width: 80%;">
Diving-Fish's avatar
Diving-Fish committed
138
                                <el-table :data="playerData.damage" :show-header="false">
139
140
141
142
143
                                    <el-table-column prop="label" label=""></el-table-column>
                                    <el-table-column prop="value" label=""></el-table-column>
                                </el-table>
                            </div>
                        </div>
Diving-Fish's avatar
Diving-Fish committed
144
145
                        <div v-show="selectingTab != 'total'" style="width: 50%">
                            <div style="margin: 10px; padding: 20px; border: 1px solid #EBEEF5; height: 400px;" id="sumDmgChart"></div>
146
147
                        </div>
                    </div>
148
149
                    <div style="display: flex; height: 450px">
                        <div style="width: 50%">
Diving-Fish's avatar
Diving-Fish committed
150
                            <div style="margin: 10px; padding: 20px; border: 1px solid #EBEEF5; height: 400px;" id="personalProgressChart"></div>
151
152
                        </div>
                        <div style="width: 50%">
Diving-Fish's avatar
Diving-Fish committed
153
                            <div style="margin: 10px; padding: 20px; border: 1px solid #EBEEF5; height: 400px;" id="personalTimeChart"></div>
154
155
                        </div>
                    </div>
156
157
158
159
160
                </div>
            </el-tab-pane>
        </el-tabs>
        <div style="display: flex; height: 400px">
            <div style="width: 50%">
Diving-Fish's avatar
Diving-Fish committed
161
                <div style="margin: 10px; padding: 20px; border: 1px solid #EBEEF5; height: 100%;" id="bossDmgChart"></div>
162
163
            </div>
            <div style="width: 50%">
Diving-Fish's avatar
Diving-Fish committed
164
                <div style="margin: 10px; padding: 20px; border: 1px solid #EBEEF5; height: 100%;" id="challengeChart"></div>
165
166
167
168
169
170
171
            </div>
        </div>
    </div>
    
    
</body>

Diving-Fish's avatar
Diving-Fish committed
172
<script>var csrfToken = "{{ session['csrf_token'] }}"; var qqid = "{{ session['yobot_user'] }}"</script>
173
174
175
176
177
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
<script src="{{ url_for('yobot_static', filename='clan/statistics/statistics2.js') }}"></script>


</html>