From 84adad2cc7c2c8285b6064d804039bfb24bef6ed Mon Sep 17 00:00:00 2001
From: wangzemei <wangzemei@easycorp.ltd>
Date: Tue, 18 Oct 2022 16:32:06 +0800
Subject: [PATCH] * task 72350

---
 module/report/css/annualdata.css       |  70 +++++++++
 module/report/js/annualdata.js         |   2 +
 module/report/js/processor.js          |  46 ++++++
 module/report/view/annualdata.html.php | 192 ++++++++++++++++++++++++-
 4 files changed, 308 insertions(+), 2 deletions(-)
 create mode 100644 module/report/js/processor.js

diff --git a/module/report/css/annualdata.css b/module/report/css/annualdata.css
index eca95154a2..f97e6720f1 100644
--- a/module/report/css/annualdata.css
+++ b/module/report/css/annualdata.css
@@ -82,3 +82,73 @@ section.active {border: 1px solid rgb(0, 166, 255);}
 .dataYearStat .canvas {float: left; height: 305px; padding-left: 30px;}
 .dataYearStat .canvas.left {width: 450px;}
 .dataYearStat .canvas.right {width: 810px; float: right;}
+
+#timeline {
+  display: inline-block;
+  width: 310px;
+  padding-top: 20px;
+  list-style: none;
+  text-align: center;
+  margin-left: 25px;
+ }
+ .scroll-shell {
+   position: relative;
+ }
+ #stopPlaying {
+  font-size: 18px;
+  position: absolute;
+  left: 0;
+  top: 8px;
+ }
+
+ #timeline li {
+  display: inline-block;
+  cursor: pointer;
+  color: #444;
+  padding: 0 5px;
+  margin: 0;
+  position: relative;
+ }
+
+ 
+ #timeline li::before{
+   content: '';
+   display: inline-block;
+   width: 8px;
+   height: 8px;
+   border-radius: 4px;
+   background: #fff;
+   position: absolute;
+   left: 20px;
+   top: -8px;
+   z-index: 2;
+ }
+ #timeline li::after{content: ''; display: block; width: 100%; height: 2px; border-radius: 1px; background: #fff; position: absolute; left: -20px; top: -5px;}
+
+ .biaoqian {
+  background-size: 60px 24px;
+ }
+
+ #timeline .selecteded {
+   color: #1a77a5;
+  /* background: url('img/tuoyuan2.png') 0 15px no-repeat;
+  background-size: 20px 20px; */
+ }
+ #timeline .selecteded::before {
+   background: #1a77a5;
+ }
+
+ .scroll-shell {
+  width: 100px;
+  height: 96%;
+  margin-top: 1.5%;
+  float: left;
+  overflow: hidden;
+ }
+.scroll-shell {width: 330px;}
+.scroll {
+  width: 330px;
+  height: 103%;
+  overflow: auto;
+  overflow-x: hidden;
+}
\ No newline at end of file
diff --git a/module/report/js/annualdata.js b/module/report/js/annualdata.js
index 67fa201cc7..31d654ce20 100644
--- a/module/report/js/annualdata.js
+++ b/module/report/js/annualdata.js
@@ -52,6 +52,7 @@ function drawStatusPieChart(id, title, data, callback)
             itemHeight: legendItemHeight,
             textStyle: legendTextStyle,
         },
+        saveAsImage: {},
         series: [
             {
                 name: title,
@@ -186,6 +187,7 @@ function exportAnnualImage(sucessCallback, errorCallback)
             if(sucessCallback) sucessCallback(imageUrl);
             afterFinish(canvas);
         });
+        console.log(imageUrl);
     });
 }
 
diff --git a/module/report/js/processor.js b/module/report/js/processor.js
new file mode 100644
index 0000000000..dd8093fed1
--- /dev/null
+++ b/module/report/js/processor.js
@@ -0,0 +1,46 @@
+let processor = {
+  timerCallback: function() {
+    if (this.video.paused || this.video.ended) {
+      return;
+    }
+    this.computeFrame();
+    let self = this;
+    setTimeout(function () {
+        self.timerCallback();
+      }, 0);
+  },
+
+  doLoad: function() {
+    this.video = document.getElementById("video");
+    this.c1 = document.getElementById("c1");
+    this.ctx1 = this.c1.getContext("2d");
+    this.c2 = document.getElementById("c2");
+    this.ctx2 = this.c2.getContext("2d");
+    let self = this;
+    this.video.addEventListener("play", function() {
+        self.width = self.video.videoWidth / 2;
+        self.height = self.video.videoHeight / 2;
+        self.timerCallback();
+      }, false);
+  },
+
+  computeFrame: function() {
+    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+        let l = frame.data.length / 4;
+
+    for (let i = 0; i < l; i++) {
+      let r = frame.data[i * 4 + 0];
+      let g = frame.data[i * 4 + 1];
+      let b = frame.data[i * 4 + 2];
+      if (g > 100 && r > 100 && b < 43)
+        frame.data[i * 4 + 3] = 0;
+    }
+    this.ctx2.putImageData(frame, 0, 0);
+    return;
+  }
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+processor.doLoad();
+});
\ No newline at end of file
diff --git a/module/report/view/annualdata.html.php b/module/report/view/annualdata.html.php
index 4cf774c9c2..bc932a46a6 100644
--- a/module/report/view/annualdata.html.php
+++ b/module/report/view/annualdata.html.php
@@ -5,6 +5,7 @@
 <?php $annualDataLang   = $lang->report->annualData;?>
 <?php $annualDataConfig = $config->report->annualData;?>
 <?php $soFar = sprintf($annualDataLang->soFar, $year);?>
+<?php js::set('totalYears', (array)($years)); ?>
 <div id='container' style='background-image: url(<?php echo $config->webRoot . 'theme/default/images/main/annual_data_bg.png'?>)'>
   <main id='main' style='background: url(<?php echo $config->webRoot . 'theme/default/images/main/annual_layout_header.png'?>) top no-repeat'>
     <header id='header'>
@@ -13,6 +14,7 @@
     <div id='toolbar'>
       <div class='pull-left'>
         <span><?php echo $annualDataLang->scope;?></span>
+        
         <?php echo html::select('year', $years, $year, "class='form-control'");?>
         <?php echo html::select('dept', $depts, $dept, "class='form-control chosen'");?>
         <?php echo html::select('userID', $users, $userID, "class='form-control chosen'");?>
@@ -136,7 +138,15 @@
     </section>
     <section id='radar'>
       <header><h2 class='text-holder'><?php echo $annualDataLang->radar . $soFar;?></h2></header>
-      <div id='radarCanvas'></div>
+      <div id='radarCanvas' style="display: none;"></div>
+      <canvas id="canvas" width="330" height="280" style="margin-top:-30px"></canvas>
+      <?php if(is_array($options) and !empty($options)):?>
+        <div class="scroll-shell">
+            <i class="icon icon-play" id="stopPlaying"></i>
+            <ul id="timeline" ref="timeline" onclick="timeline($event)" class="scroll"></ul>
+        </div>
+    <?php endif;?>
+        
     </section>
     <section id='executionData'>
       <header><h2 class='text-holder'><?php echo $annualDataLang->executions . $soFar;?></h2></header>
@@ -279,8 +289,185 @@ $(function()
           data: [{value: <?php echo json_encode(array_values($radarData));?>}]
       }]
     };
+    console.log(totalYears);
 
-    radarChart.setOption(radarOption);
+    radarChart && radarChart.setOption(radarOption);
+
+    function exportImg () 
+    {
+        var radarCanvasArr = echarts.getInstanceByDom(document.getElementById('radarCanvas'));
+        if(!radarCanvasArr)
+        {
+            radarCanvasArr = echarts.init(document.getElementById('radarCanvas'));
+        }
+        var radarCanvasimg = radarCanvasArr.getDataURL({
+            type: 'png',
+            PixelRatio: 1.5,
+        });
+        canvasImg = radarCanvasimg;
+        pngimages.push(canvasImg);
+        
+    }
+
+    
+    var canvasImg = '';
+    var pngimages = [];
+    exportImg();
+    setInterval(function(){exportImg();}, 1000);
+
+    var cStream, recorder, chunks = [];
+    function saveChunks(e)
+    {
+        chunks.push(e.data);
+    }
+    function stopRecording()
+    {
+        recorder.stop();
+    }
+
+    function exportStream(e)
+    {
+        var blob = new Blob(chunks);
+        var vidURL = URL.createObjectURL(blob);
+        var canvasVideo = document.createElement('video');
+        canvasVideo.controls = true;
+        canvasVideo.src = vidURL;
+        canvasVideo.onended = function() {
+            URL.revokeObjectURL(vidURL);
+        }
+        document.body.insertBefore(canvasVideo, canvas);
+    }
+
+    var x = 0;
+    var ctx = canvas.getContext('2d');
+
+    var left = 0;
+  
+    var animationCanvas = function() {
+        x = (x + 2) % (canvas.width + 100);
+        ctx.fillStyle = '#01061b';
+       
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        var img=document.createElement("img");
+        img.src = canvasImg;
+        ctx.drawImage(img, 10, 10);
+        ctx.fillStyle = 'red';
+        // ctx.fillRect(x - 50, 20, 50, 50);
+        
+        rafId = requestAnimationFrame(animationCanvas);
+       
+
+    };
+    animationCanvas();
+    var years = [];
+    for(var key in totalYears){
+        years.push(totalYears[key]);
+    }
+    var radarCanvasDom = document.getElementById('radarCanvas');
+    if(years.length > 1) {
+        radarCanvasDom.style.display = 'none';
+    }
+    
+    
+    // var years = [2016, 2017, 2018, 2019, 2020, 2021, 2022]
+    var index = 0
+    var timer=null
+    //创建时间轴对应的li
+    years.map(k => {
+        var createLi = document.createElement('li')
+        var createP = document.createElement('p')
+        createP.innerHTML = k
+        createLi.appendChild(createP)
+        timeline.appendChild(createLi)
+    })
+    //默认选中第一个
+    var timelines = document.querySelectorAll('#timeline li');
+    timelines[0].classList.add('selecteded');
+    var ps = document.querySelectorAll('#timeline li p');
+    ps[0].classList.add('biaoqian');
+ 
+    //点击事件,点击其中一个切换到相应的效果
+    var ulElement = document.querySelector('#timeline');
+    ulElement.onclick = function(e) {
+    var lis = document.querySelectorAll('#timeline li');
+    var ps = document.querySelectorAll('#timeline li p');
+    var event = e || window.event;
+    var target = event.target || event.srcElement;
+    if (target.tagName == 'P') {  
+        classChange(ps, lis, target);
+        for (var i = 0; i < lis.length; i++) {
+            if (lis[i].getAttribute('class') == 'selecteded') {
+                //记住此时被点击的索引,方便点击播放按钮时继续播放
+                index = i;
+                console.log(index);
+                break;
+            }
+    
+        }
+    }
+   }
+   
+   //公共部分,清除掉所有的样式,再给点击的添加相应的类名
+    function classChange(ps, lis, target) {
+        ps.forEach(k => {
+            k.classList.remove('biaoqian');
+        })
+        target.classList.add('biaoqian');
+        lis.forEach(v => {
+            v.classList.remove('selecteded');
+        })
+        target.parentNode.classList.add('selecteded');
+    }
+ 
+    //播放和暂停按钮
+    var stopPlaying = document.getElementById('stopPlaying');
+    if (stopPlaying)
+    {
+        stopPlaying.onclick = () => {
+            if (stopPlaying.className.indexOf('play') != -1)
+            {
+                stopPlaying.classList.remove('icon-play');
+                stopPlaying.classList.add('icon-pause');
+                if (!timer) {
+                    autoPlay();
+                }
+            }
+            else 
+            {
+                console.log('clearInterval');
+                stopPlaying.classList.remove('icon-pause');
+                stopPlaying.classList.add('icon-play');
+                if (timer)
+                {
+                    timer = clearInterval(timer)
+                }
+                else
+                {
+                    return
+                }
+            }
+        }
+    }
+ 
+   //自动播放
+   function autoPlay()
+   {
+        var lis = document.querySelectorAll('#timeline li');
+        var ps = document.querySelectorAll('#timeline li p');
+        timer = setInterval(() => {
+            if (index < ps.length - 1) {
+                classChange(ps, lis, ps[index + 1]);
+                index++;
+            } else {
+                //跳转到开始
+                index = 0;               
+                classChange(ps, lis, ps[index]);
+                stopPlaying.classList.remove('icon-pause');
+                stopPlaying.classList.add('icon-play');
+                clearInterval(timer);
+            }
+        }, 1000);
+   }
 
     var overviewCSS = {position: 'absolute', left: '172px', top: '160px'};
 
@@ -384,5 +571,6 @@ $(function()
     ?>
     <?php endforeach;?>
 })
+// <script type="text/javascript" src="./js/processor.js">
 </script>
 <?php include '../../common/view/footer.lite.html.php';?>