转圈代码提交

src/views/dataBoard/overview/components/EventAndFollowUp.vue

@@ -36,7 +36,7 @@ import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
 
 export default {
   name: "EventAndFollowUp",
-  components: {Tabs},
+  components: { Tabs },
   props: {
     date: {
       type: String,
@@ -86,27 +86,25 @@ export default {
   methods: {
     getData(item) {
       this.$http
-          .get(
-              "/actual/base/streetOverview/eventAndFollowGroup?month=" +
-              this.date +
-              "&level=" +
-              item.orgLevel +
-              "&orgId=" +
-              item.orgId +
-              "&queryType=" +
-              this.type
-          )
-          .then(({data: {data}}) => {
-            if (data) {
-
-              this.sumNum = data.sumNum;
-              this.lastSumNum = data.lastSumNum;
-              this.processNum = data.processNum;
-              this.closedNum = data.closedNum;
-              this.closedRatio = data.closedRatio;
-            }
-
-          });
+        .get(
+          "/actual/base/streetOverview/eventAndFollowGroup?month=" +
+            this.date +
+            "&level=" +
+            item.orgLevel +
+            "&orgId=" +
+            item.orgId +
+            "&queryType=" +
+            this.type
+        )
+        .then(({ data: { data } }) => {
+          if (data) {
+            this.sumNum = data.sumNum;
+            this.lastSumNum = data.lastSumNum;
+            this.processNum = data.processNum;
+            this.closedNum = data.closedNum;
+            this.closedRatio = data.closedRatio;
+          }
+        });
     },
     typeChange(val) {
       this.type = val;
@@ -127,10 +125,10 @@ export default {
 
 .content {
   background: linear-gradient(
-          90deg,
-          rgba(1, 94, 234, 0.1) 0%,
-          rgba(16, 50, 103, 0) 50%,
-          rgba(1, 94, 234, 0.1) 100%
+    90deg,
+    rgba(1, 94, 234, 0.1) 0%,
+    rgba(16, 50, 103, 0) 50%,
+    rgba(1, 94, 234, 0.1) 100%
   );
   padding: 20px 19px;
   display: flex;
@@ -180,12 +178,29 @@ export default {
   }
 }
 
+@keyframes roate {
+  0% {
+    transform: rotateZ(0);
+    -ms-transform: rotateZ(0);
+    -moz-transform: rotateZ(0);
+    -webkit-transform: rotateZ(0);
+    -o-transform: rotateZ(0);
+  }
+  100% {
+    transform: rotateZ(360deg);
+    -ms-transform: rotateZ(360deg);
+    -moz-transform: rotateZ(360deg);
+    -webkit-transform: rotateZ(360deg);
+    -o-transform: rotateZ(360deg);
+  }
+}
 .processing {
   .bg {
     background: url("@/assets/images/gailan/yuan_bg.png") no-repeat center;
     flex: 0 0 150px;
     width: 150px;
     height: 150px;
+    background-size: 150px 150px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -193,11 +208,13 @@ export default {
 
     .bg-1 {
       background: url("@/assets/images/gailan/zq_bg.png") no-repeat center;
-      width: 146px;
-      height: 136px;
+      width: 158px;
+      height: 158px;
+      background-size: 158px 158px;
       position: absolute;
-      left: 9px;
-      top: 9px;
+      left: -3px;
+      top: -3px;
+      animation: roate 5s infinite linear; //这是重点，给它一个旋转的属性
     }
 
     .num {