!58 图片组件增加旋转速度控制

Merge pull request !58 from 时间煮酸菜鱼/dev

report-ui/src/assets/styles/anji.scss

@@ -77,3 +77,21 @@
 .el-table td {
   padding: 6px 0;
 }
+
+@keyframes turn {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  25% {
+    -webkit-transform: rotate(90deg);
+  }
+  50% {
+    -webkit-transform: rotate(180deg);
+  }
+  75% {
+    -webkit-transform: rotate(270deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}

report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-image.js

@@ -30,6 +30,14 @@ export const widgetImage = {
           placeholder: '',
           value: false,
         },
+        {
+          type: 'el-slider',
+          label: '旋转速度',
+          name: 'rotationSpeed',
+          required: false,
+          placeholder: '',
+          value: 70
+        },
         {
           type: 'el-slider',
           label: '透明度',

report-ui/src/views/bigscreenDesigner/designer/widget/widgetImage.vue

@@ -41,7 +41,8 @@ export default {
       return {
         imageAdress: this.transStyle.imageAdress,
         "border-radius": this.transStyle.borderRadius + "px",
-        opacity: this.transStyle.transparency / 100
+        opacity: this.transStyle.transparency / 100,
+        animation: this.transStyle.startRotate? "turn "+(101-this.transStyle.rotationSpeed)/10+"s linear infinite":"none"
       };
     }
   },
@@ -74,21 +75,5 @@ export default {
 .startImg {
   animation: turn 1s linear infinite;
 }
-@keyframes turn {
-  0% {
-    -webkit-transform: rotate(0deg);
-  }
-  25% {
-    -webkit-transform: rotate(90deg);
-  }
-  50% {
-    -webkit-transform: rotate(180deg);
-  }
-  75% {
-    -webkit-transform: rotate(270deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
+
 </style>