1

project/package.json

@@ -8,8 +8,11 @@
     "tb": "spark build --type taobao"
   },
   "dependencies": {
+    "@spark/api-base": "^1.0.11",
+    "@spark/projectx": "^1.0.3",
     "axios": "^0.19.2",
     "css-loader": "^3.6.0",
+    "duiba-utils": "^1.0.2",
     "fyge-tbmini": "^1.3.1",
     "postcss-loader": "^3.0.0",
     "prettier": "^2.0.5",
@@ -19,11 +22,9 @@
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
-    "style-loader": "^1.2.1",
     "spark-utils": "^0.0.12",
-    "duiba-utils": "^1.0.2",
-    "@spark/api-base": "^1.0.11",
-    "@spark/projectx": "^1.0.3"
+    "style-loader": "^1.2.1",
+    "teddi": "file:../../work/teddi"
   },
   "devDependencies": {
     "mockjs": "^1.1.0"

project/src/pages/index/index.jsx

@@ -4,24 +4,37 @@ import React, { Component } from 'react';
 import resList from '../../resconfig/resList'; //import API from '../../api';
 
 import './index.less';
+import { Timer } from 'teddi';
 
 class Index extends Component {
   constructor(props) {
     super(props);
     this.state = {
       resList: resList,
-      progressStyle: {
-        width: '0rem',
-      },
+      progress: 0,
     };
   }
 
   componentDidMount() {
-    setInterval(() => {}, 1000);
+    this.timer = this.timer || new Timer(60 * 2, 1000 / 60);
+    this.timer.on('timer', this.onUpdate, this);
+    this.timer.on('complete', this.onComplete, this);
+    this.timer.start();
+  }
+
+  onUpdate() {
+    console.log(this.timer.currentCount);
+    this.setState({
+      progress: (5.63 * this.timer.currentCount) / this.timer.repeatCount,
+    });
+  }
+
+  onComplete() {
+    console.log('on complete');
   }
 
   render() {
-    const { progressStyle } = this.state;
+    const { progress } = this.state;
     return (
       <div className="index " uuid="8a4a4e6e-9823-43ee-ae40-a6308642d137">
         <img
@@ -47,7 +60,9 @@ class Index extends Component {
             src={this.state.resList['3b371680-825c-40ff-9828-28f78f4c4e32'].url}
           />
           <img
-            style={progressStyle}
+            style={{
+              width: `${progress}rem`,
+            }}
             className="progressfront"
             uuid="775c5ac9-6269-49aa-8db3-758d7f9d57a8"
             src={this.state.resList['57c1fb2b-f495-43ff-a215-61cf5f06cc53'].url}