Home Explore Help
Register Sign In
xiuli.gao
/
youhuiquan
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 899 Releases 0 Wiki
Browse Source

员工绩效反馈

houxiaohua 1 day ago
parent
b8a2df567c
commit
690c8bf611
1 changed files with 432 additions and 0 deletions
Split View Show Diff Stats
  1. 432 0
      performance.html

+ 432 - 0
performance.html
View File 

@@ -0,0 +1,432 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+  <meta charset="UTF-8">
6 
+  <meta content="yes" name="apple-mobile-web-app-capable">
7 
+  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /> -->
8 
+  <title>绩效反馈</title>
9 
+  <link rel="stylesheet" type="text/css" href="public/public_css.css" />
10 
+  <script type="text/javascript" src="public/jquery-2.1.0.js"></script>
11 
+  <style type="text/css">
12 
+    .alert-info {
13 
+      position: absolute;
14 
+      top: 150px;
15 
+      right: 0;
16 
+      left: 0;
17 
+      bottom: 0;
18 
+      text-align: center;
19 
+    }
20 
+
21 
+    .alert-info p {
22 
+      display: inline-block;
23 
+      color: #fff;
24 
+      font-size: 14px;
25 
+      line-height: 40px;
26 
+      padding: 0 10px;
27 
+      background-color: rgba(0, 0, 0, 0.7);
28 
+      border-radius: 40px;
29 
+    }
30 
+
31 
+    .loading {
32 
+      position: fixed;
33 
+      top: 0;
34 
+      left: 0;
35 
+      display: none;
36 
+      width: 100%;
37 
+      height: 100vh;
38 
+      background: rgba(255, 255, 255, 0.4)
39 
+    }
40 
+
41 
+    .loading img {
42 
+      position: absolute;
43 
+      top: 0;
44 
+      bottom: 0;
45 
+      left: 0;
46 
+      right: 0;
47 
+      margin: auto;
48 
+      width: 60px;
49 
+      height: 60px;
50 
+    }
51 
+  </style>
52 
+  <style type="text/css">
53 
+    .contaniner_box {
54 
+      background: #F7F7F7;
55 
+      width: 100%;
56 
+      height: 100vh;
57 
+      display: flex;
58 
+    }
59 
+    .con_left{
60 
+      width: 400px;
61 
+      height: 100%;
62 
+      background-color: #fff;
63 
+      display: flex;
64 
+      flex-direction: column;
65 
+      align-items: center;
66 
+      justify-content: center;
67 
+    }
68 
+    .inputDiv {
69 
+      width: 200px;
70 
+    }
71 
+
72 
+    .inputDiv input {
73 
+      display: block;
74 
+      width: 100%;
75 
+      height: 50px;
76 
+      font-size: 20px;
77 
+      background: transparent;
78 
+      border: none;
79 
+      border-radius: 50px;
80 
+      outline: none;
81 
+      border: 1px solid #3173FF;
82 
+      cursor: pointer;
83 
+      color: #3173FF;
84 
+    }
85 
+
86 
+    /* .inputDiv input:hover {
87 
+      border-color: #3173FF;
88 
+      color: #3173FF;
89 
+    } */
90 
+    .submission {
91 
+      width: 300px;
92 
+      height: 60px;
93 
+      border-radius: 60px;
94 
+      background: #3173FF;
95 
+      border: none;
96 
+      font-size: 18px;
97 
+      color: #fff;
98 
+      display: block;
99 
+      margin-top: 40px;
100 
+      cursor: pointer;
101 
+    }
102 
+    .fileDiv {
103 
+      font-size: 20px;
104 
+      line-height: 50px;
105 
+    }
106 
+
107 
+    .upload_success {
108 
+      flex: 1;
109 
+      background: #fff;
110 
+      height: 100vh;
111 
+      padding: 40px 20px;
112 
+      padding-bottom: 0;
113 
+      box-sizing: border-box;
114 
+      overflow-y: auto;
115 
+      margin-left: 15px;
116 
+    }
117 
+
118 
+    .upload_success h3 {
119 
+      color: #3173FF;
120 
+      font-size: 14px;
121 
+      font-weight: bold;
122 
+      margin-bottom: 10px;
123 
+      background: rgba(49, 115, 255, 0.15);
124 
+      padding: 10px 20px;
125 
+      box-sizing: border-box;
126 
+    }
127 
+
128 
+    .upload_success li {
129 
+      font-size: 14px;
130 
+      line-height: 30px;
131 
+      color: #fff;
132 
+    }
133 
+
134 
+    .upload_success li span:nth-of-type(1) {
135 
+      padding-right: 20px;
136 
+      width: 40%;
137 
+      display: inline-block;
138 
+    }
139 
+    .table{
140 
+      width: 100%;
141 
+      font-size: 14px;
142 
+      border-collapse: collapse;
143 
+      border: 1px solid #ebeef5;
144 
+      margin-top: 10px;
145 
+    }
146 
+    .table .thead{
147 
+      background-color: #fafafa;
148 
+    }
149 
+    .table .thead .th{
150 
+      font-weight: bold;
151 
+    }
152 
+    .table .tr .th:nth-child(1), .table .tr .td:nth-child(1){
153 
+      width: 20%;
154 
+    }
155 
+    .table .tr .th:nth-child(2), .table .tr .td:nth-child(2){
156 
+      width: 30%;
157 
+    }
158 
+    .table .tr .th:nth-child(3), .table .tr .td:nth-child(3){
159 
+      width: 30%;
160 
+    }
161 
+    .table .tr .th:nth-child(4), .table .tr .td:nth-child(4){
162 
+      width: 20%;
163 
+    }
164 
+
165 
+    .table .tr{
166 
+      color: rgb(22, 30, 70);
167 
+      height: 44px;
168 
+      display: flex;
169 
+    }
170 
+     .table .th, .table .td{
171 
+      border-right: 1px solid #ebeef5;
172 
+      border-bottom: 1px solid #ebeef5;
173 
+      text-align: center;
174 
+      display: flex;
175 
+      align-items: center;
176 
+      justify-content: center;
177 
+      flex-wrap: wrap;
178 
+    }
179 
+    .tbody{
180 
+      height: calc(100vh - 190px);
181 
+      box-sizing: border-box;
182 
+      overflow-y: auto;
183 
+    }
184 
+    .table .td{
185 
+      color: #333;
186 
+    }
187 
+    .fail_c{
188 
+      color: red !important;
189 
+    }
190 
+    .select_box{
191 
+      width: 160px;
192 
+      height: 32px;
193 
+      border: 1px solid #ddd;
194 
+      padding: 0 10px;
195 
+      border-radius: 4px;
196 
+      color: #333;
197 
+    }
198 
+    .noDataBox{
199 
+      display: flex;
200 
+      flex-direction: column;
201 
+      justify-content: center;
202 
+      align-items: center;
203 
+      padding-top: 16vh;
204 
+    }
205 
+    .noDataBox img{
206 
+      width: 300px;
207 
+    }
208 
+    .noDataBox p{
209 
+      color: #aaa;
210 
+    }
211 
+    .refresh{
212 
+      color: #3173FF;
213 
+      cursor: pointer;
214 
+      font-size: 14px;
215 
+      margin-left: 20px;
216 
+    }
217 
+    .hint{
218 
+      color: #999;
219 
+      font-size: 12px;
220 
+    }
221 
+    .flex{
222 
+      display: flex;
223 
+      align-items: center;
224 
+    }
225 
+    .allComplete{
226 
+      display: none;
227 
+    }
228 
+  </style>
229 
+</head>
230 
+
231 
+<body>
232 
+  <div class="contaniner_box">
233 
+    <div class="con_left">
234 
+      <ul class="fileDiv"></ul>
235 
+      <div class="inputDiv">
236 
+        <input type="file" id="files" style="display: none" onchange="fileImport();">
237 
+        <input type="button" id="fileImport" value="导入文件">
238 
+      </div>
239 
+      <button class="submission" onclick="submissionEvent()">提交</button>
240 
+    </div>
241 
+    <div class="upload_success">
242 
+      <h3><span style="color:#23c23f" class="allComplete">✅ 全部发送完成。</span>已发送酷炫成员（<span class="total">-</span>）人，发送成功（<span class="succ_n">-</span>）人，失败（<span class="fail_n">-</span>）人。</h3>
243 
+      <div class="flex">
244 
+        <select class="select_box" id="status_select">
245 
+          <option value="all">全部</option>
246 
+          <option value="success">发送成功</option>
247 
+          <option value="fail">发送失败</option>
248 
+        </select>
249 
+        <div class="refresh" onclick="performanceEmailDetail()">刷新</div>
250 
+        <div class="hint">（点击刷新邮件发送详情）</div>
251 
+      </div>
252 
+
253 
+      <div class="table">
254 
+        <div class="thead">
255 
+          <div class="tr">
256 
+            <div class="th">姓名</div>
257 
+            <div class="th">邮箱</div>
258 
+            <div class="th">发送时间</div>
259 
+            <div class="th">发送状态</div>
260 
+          </div>
261 
+        </div>
262 
+        <div class="tbody">
263 
+          <!-- 员工列表 -->
264 
+          <div class="noDataBox">
265 
+            <img src="./common/nodata.png" alt="" srcset="">
266 
+            <p>暂无数据</p>
267 
+          </div>
268 
+        </div>
269 
+      </div>
270 
+    </div>
271 
+  </div>
272 
+  <div class="alert-info" style="display: none;">
273 
+    <!-- tip提示,3s后消失 -->
274 
+    <p></p>
275 
+  </div>
276 
+  <div class="loading">
277 
+    <img src="common/loading.gif" />
278 
+  </div>
279 
+</body>
280 
+
281 
+</html>
282 
+<script type="text/javascript">
283 
+  $().ready(function() {
284 
+		performanceEmailDetail();
285 
+	})
286 
+
287 
+  let staffList = [];//员工列表
288 
+  var performance = '';
289 
+  //点击导入按钮,使files触发点击事件,然后完成读取文件的操作
290 
+  $("#fileImport").click(function () {
291 
+    $("#files").click();
292 
+  })
293 
+  function fileImport () {
294 
+    //获取读取我文件的File对象
295 
+    var selectedFile = document.getElementById('files').files[0];
296 
+    var name = selectedFile.name;//读取选中文件的文件名
297 
+    var size = selectedFile.size;//读取选中文件的大小
298 
+    // console.log("文件名:"+name+"大小:"+size);
299 
+    $(".fileDiv").html("<li>文件名:" + name + "</li>")
300 
+    var reader = new FileReader();//这是核心,读取操作就是由它完成.
301 
+    reader.readAsDataURL(selectedFile);//读取文件的内容,也可以读取文件的URL
302 
+    reader.onload = function () {
303 
+      //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
304 
+      console.log(this)
305 
+      // console.log('onload')
306 
+      // console.log(this.result);
307 
+      performance = this.result;
308 
+    }
309 
+  }
310 
+  //提交
311 
+  function submissionEvent () {
312 
+    if ($('.fileDiv li').length == 0) {
313 
+      alert('请选择要上传的文件')
314 
+      return;
315 
+    }
316 
+    $('.loading').show();
317 
+    $.ajax({
318 
+      type: 'post',
319 
+      url: '/api/v2/sendPerformance',
320 
+      data: {
321 
+        performance: performance,
322 
+      },
323 
+      dataType: 'json',
324 
+      success: function (res) {
325 
+        console.log(res)
326 
+        $('.loading').hide();
327 
+        performanceEmailDetail()
328 
+        showMsg(res.rst.msg)
329 
+      },
330 
+      error: function (err) {
331 
+        $('.loading').hide();
332 
+        alert('服务器错误，请稍后再试！')
333 
+      }
334 
+    })
335 
+  }
336 
+
337 
+  //发送状态接口
338 
+  function performanceEmailDetail () {
339 
+    $('.loading').show();
340 
+    $.ajax({
341 
+      type: 'post',
342 
+      url: '/api/v2/performanceEmailDetail',
343 
+      data: {},
344 
+      dataType: 'json',
345 
+      success: function (res) {
346 
+        console.log(res)
347 
+        $('.loading').hide();
348 
+        if(!res || !res.rst) {
349 
+          $(".total").html('-')
350 
+          $(".succ_n").html('-')
351 
+          $(".fail_n").html('-')
352 
+          $(".allComplete").hide()
353 
+          $(".tbody").html(`<div class="noDataBox">
354 
+            <img src="./common/nodata.png" alt="" srcset="">
355 
+            <p>暂无数据</p>
356 
+          </div>`)
357 
+          return
358 
+        }
359 
+        if(res.rst && res.rst.detail &&  Array.isArray(res.rst.detail)){
360 
+          staffList = res.rst.detail;
361 
+          statusSelectChange('all')
362 
+        }
363 
+        $(".total").html(res.rst.total)
364 
+        $(".succ_n").html(res.rst.success_total)
365 
+        $(".fail_n").html(res.rst.fail_total)
366 
+        if(res.rst.is_end == 1) {
367 
+          $(".allComplete").show()
368 
+        }else{
369 
+          $(".allComplete").hide()
370 
+        }
371 
+      },
372 
+      error: function (err) {
373 
+        $('.loading').hide();
374 
+        alert('服务器错误，请稍后再试！')
375 
+      }
376 
+    })
377 
+  }
378 
+
379 
+  // 发送状态变化
380 
+  $('#status_select').change(function(){
381 
+    let selectedValue = $(this).val()
382 
+    statusSelectChange(selectedValue)
383 
+    console.log(selectedValue)
384 
+  })
385 
+  function statusSelectChange (type) {
386 
+    let list = []
387 
+    if(type == 'all'){
388 
+      list = staffList
389 
+    }
390 
+    if(type == 'success') {
391 
+      staffList.forEach((item)=>{
392 
+        if(item.code == 0) {
393 
+          list.push(item)
394 
+        }
395 
+      })
396 
+    }
397 
+    if(type == 'fail') {
398 
+      staffList.forEach((item)=>{
399 
+        if(item.code == 500) {
400 
+          list.push(item)
401 
+        }
402 
+      })
403 
+    }
404 
+    let tbody_html = '';
405 
+    if(list.length == 0) {
406 
+      tbody_html = `<div class="noDataBox">
407 
+            <img src="./common/nodata.png" alt="" srcset="">
408 
+            <p>暂无数据</p>
409 
+          </div>`
410 
+    }else{
411 
+      list.forEach((item)=>{
412 
+        tbody_html += `<div class="tr">
413 
+          <div class="td">${item.name}</div>
414 
+          <div class="td">${item.email}</div>
415 
+          <div class="td">${item.time}</div>
416 
+          <div class="td ${item.code == 500 ? 'fail_total' : ''}">${item.code == 500 ? '失败' : '成功'}</div>
417 
+        </div>`
418 
+      })
419 
+    }
420 
+    $(".tbody").html(tbody_html)
421 
+  }
422 
+  //  toast
423 
+  function showMsg (msg) {
424 
+    var msgBox = $('.alert-info');
425 
+    msgBox.children('p').html(msg);
426 
+    msgBox.show();
427 
+
428 
+    setTimeout(function () {
429 
+      msgBox.hide();
430 
+    }, 2500);
431 
+  }
432 
+</script>