数据大盘添加动效

src/views/dataBigManage/components/dataItem/index.vue

@@ -5,7 +5,7 @@
     <div class="textWord ellipsis">
       <div>
         <span :style="{color: item.labelColor ? item.labelColor : '#666'}">{{ item.label }}</span>
-        <span class="title">{{ item.title }}</span>
+        <span class="title isHove">{{ item.title }}</span>
         <span>{{ item.titleUnit }}</span>
         <span v-if="item.remark" class="remark">（{{ item.remark }}）</span>
       </div>
@@ -13,7 +13,7 @@
       <div class="subTitleName">
         <span v-if="item.subTitleUnit === 'rate'">
           <span>环比：</span>
-          <span :class="Number(item.subTitle) > 0 ? 'item-up' : 'item-down'">
+          <span :class="Number(item.subTitle) > 0 ? 'item-up isHove' : 'item-down isHove'">
             <i v-if="Number(item.subTitle) > 0" class="el-icon-caret-top" />
             <i v-else class="el-icon-caret-bottom" />
             {{ item.subTitle }}%

src/views/dataBigManage/components/efficiencyModule/index.vue

@@ -10,7 +10,7 @@
         <div class="content">
           <div class="item effic" style="color: #3F9DFE;">
             <span
-              class="num"
+              class="num isHove"
               @click.stop="$emit(
                 'checkDetialModal',
                 { ...mainData.requirementData, activeLabel: mainData.requirementData.label }
@@ -21,7 +21,7 @@
           <div class="item point">
             <span class="title">环比：</span>
             <span
-              :class="Number(mainData.requirementData.chainRatio) > 0 ? 'item-up num' : 'item-down num'"
+              :class="Number(mainData.requirementData.chainRatio) > 0 ? 'item-up num isHove' : 'item-down num isHove'"
               @click.stop="$emit(
                 'checkDetialModal',
                 { ...mainData.requirementData, activeLabel: mainData.requirementData.label }
@@ -43,7 +43,7 @@
               { ...mainData.requirementData, activeLabel: item.label }
             )"
           >
-            <span class="title">{{ item.label }}：</span><span class="value"><span class="num">{{ item.countStr }}</span>{{ item.unit }}</span>
+            <span class="title">{{ item.label }}：</span><span class="value"><span class="num isHove">{{ item.countStr }}</span>{{ item.unit }}</span>
           </div>
         </div>
       </div>
@@ -54,7 +54,7 @@
         <div class="content">
           <div class="item effic" style="color: #7ED321;">
             <span
-              class="num"
+              class="num isHove"
               @click.stop="$emit(
                 'checkDetialModal',
                 { ...mainData.requirementPeopleData, activeLabel: mainData.requirementPeopleData.label }
@@ -65,7 +65,7 @@
           <div class="item point" style="margin-bottom: 20px;">
             <span class="title">环比：</span>
             <span
-              :class="Number(mainData.requirementPeopleData.chainRatio) > 0 ? 'item-up num' : 'item-down num'"
+              :class="Number(mainData.requirementPeopleData.chainRatio) > 0 ? 'item-up num isHove' : 'item-down num isHove'"
               @click.stop="$emit(
                 'checkDetialModal',
                 { ...mainData.requirementPeopleData, activeLabel: mainData.requirementPeopleData.label }
@@ -87,7 +87,7 @@
               { ...mainData.requirementPeopleData, activeLabel: item.label }
             )"
           >
-            <span class="title">{{ item.label }}：</span><span class="value"><span class="num">{{ item.countStr }}</span>{{ item.unit }}</span>
+            <span class="title">{{ item.label }}：</span><span class="value"><span class="num isHove">{{ item.countStr }}</span>{{ item.unit }}</span>
           </div>
         </div>
       </div>
@@ -98,7 +98,7 @@
         <div class="content">
           <div class="item effic" style="color: #F5222D;">
             <span
-              class="num"
+              class="num isHove"
               @click.stop="$emit(
                 'checkDetialModal',
                 { ...mainData.bugAvgRepairData, activeLabel: mainData.bugAvgRepairData.label }
@@ -109,7 +109,7 @@
           <div class="item point">
             <span class="title">环比：</span>
             <span
-              :class="Number(mainData.bugAvgRepairData.chainRatio) > 0 ? 'item-up num' : 'item-down num'"
+              :class="Number(mainData.bugAvgRepairData.chainRatio) > 0 ? 'item-up num isHove' : 'item-down num isHove'"
               @click.stop="$emit(
                 'checkDetialModal',
                 { ...mainData.bugAvgRepairData, activeLabel: mainData.bugAvgRepairData.label }
@@ -131,7 +131,7 @@
               { ...mainData.bugAvgRepairData, activeLabel: item.label }
             )"
           >
-            <span class="title">{{ item.label }}：</span><span class="value"><span class="num">{{ item.countStr }}</span>{{ item.unit }}</span>
+            <span class="title">{{ item.label }}：</span><span class="value"><span class="num isHove">{{ item.countStr }}</span>{{ item.unit }}</span>
           </div>
         </div>
       </div>
@@ -149,7 +149,7 @@
                 'outColor': '#fff',
                 'label': item.label,
                 'labelColor': '#fff',
-                'subTitle': `<span style=color:#fff;> ${item.countStr}%（${item.remark || '--'}）</span>`,
+                'subTitle': `<span style='color:#fff;' class='isHove'> ${item.countStr}%（${item.remark || '--'}）</span>`,
                 'bgColor': 'transparent',
                 'padding': '8px 0px'
               }"
@@ -165,7 +165,7 @@
         <div class="content">
           <div class="item effic" style="color: #FAAD14;">
             <span
-              class="num"
+              class="num isHove"
               @click.stop="$emit(
                 'checkDetialModal',
                 { ...mainData.taskData, activeLabel: mainData.taskData.label }
@@ -176,7 +176,7 @@
           <div class="item point">
             <span class="title">环比：</span>
             <span
-              :class="Number(mainData.taskData.chainRatio) > 0 ? 'item-up num' : 'item-down num'"
+              :class="Number(mainData.taskData.chainRatio) > 0 ? 'item-up num isHove' : 'item-down num isHove'"
               @click.stop="$emit(
                 'checkDetialModal',
                 { ...mainData.taskData, activeLabel: mainData.taskData.label }
@@ -198,18 +198,18 @@
               { ...mainData.taskData, activeLabel: item.label }
             )"
           >
-            <span class="title">{{ item.label }}：</span><span class="value"><span class="num">{{ item.countStr }}</span>{{ item.unit }}</span>
+            <span class="title">{{ item.label }}：</span><span class="value"><span class="num isHove">{{ item.countStr }}</span>{{ item.unit }}</span>
           </div>
         </div>
       </div>
     </el-col>
     <el-col :span="7">
-      <div v-if="mainData.requirementPeopleData" class="itemBox" style="border-left-color: #999999; background: #F7FDF2">
-        <div class="titleLevel3" style="color: #999999;">平均任务使用人力</div>
+      <div v-if="mainData.requirementPeopleData" class="itemBox" style="border-left-color: #81D5AD; background: #F6FFFB">
+        <div class="titleLevel3" style="color: #81D5AD;">平均任务使用人力</div>
         <div class="content">
-          <div class="item effic" style="color: #999999;">
+          <div class="item effic" style="color: #81D5AD;">
             <span
-              class="num"
+              class="num isHove"
               @click.stop="$emit(
                 'checkDetialModal',
                 { ...mainData.taskPeopleData, activeLabel: mainData.taskPeopleData.label }
@@ -220,7 +220,7 @@
           <div class="item point" style="margin-bottom: 20px;">
             <span class="title">环比：</span>
             <span
-              :class="Number(mainData.taskPeopleData.chainRatio) > 0 ? 'item-up num' : 'item-down num'"
+              :class="Number(mainData.taskPeopleData.chainRatio) > 0 ? 'item-up num isHove' : 'item-down num isHove'"
               @click.stop="$emit(
                 'checkDetialModal',
                 { ...mainData.taskPeopleData, activeLabel: mainData.taskPeopleData.label }
@@ -242,7 +242,7 @@
               { ...mainData.taskPeopleData, activeLabel: item.label }
             )"
           >
-            <span class="title">{{ item.label }}：</span><span class="value"><span class="num">{{ item.countStr }}</span>{{ item.unit }}</span>
+            <span class="title">{{ item.label }}：</span><span class="value"><span class="num isHove">{{ item.countStr }}</span>{{ item.unit }}</span>
           </div>
         </div>
       </div>
@@ -262,7 +262,7 @@
         <div class="content">
           <div class="item effic" style="color: #C97DE9;">
             <span
-              class="num"
+              class="num isHove"
               @click.stop="$emit(
                 'checkDetialModal',
                 { ...mainData.bugAvgOneDataRepairData, activeLabel: mainData.bugAvgOneDataRepairData.label }
@@ -273,7 +273,7 @@
           <div class="item point">
             <span class="title">环比：</span>
             <span
-              :class="Number(mainData.bugAvgOneDataRepairData.chainRatio) > 0 ? 'item-up num' : 'item-down num'"
+              :class="Number(mainData.bugAvgOneDataRepairData.chainRatio) > 0 ? 'item-up num isHove' : 'item-down num isHove'"
               @click.stop="$emit(
                 'checkDetialModal',
                 { ...mainData.bugAvgOneDataRepairData, activeLabel: mainData.bugAvgOneDataRepairData.label }
@@ -295,7 +295,7 @@
               { ...mainData.bugAvgOneDataRepairData, activeLabel: item.label }
             )"
           >
-            <span class="title">{{ item.label }}：</span><span class="value"><span class="num">{{ item.countStr }}</span>{{ item.unit }}</span>
+            <span class="title">{{ item.label }}：</span><span class="value"><span class="num isHove">{{ item.countStr }}</span>{{ item.unit }}</span>
           </div>
         </div>
       </div>
@@ -308,7 +308,7 @@
             'outColor': '#fff',
             'label': mainData.testDevPeopleScale.label,
             'labelColor': '#fff',
-            'subTitle': `<span style=color:#fff;>${mainData.testDevPeopleScale.countStr}</span>`,
+            'subTitle': `<span style='color:#fff;' class='isHove'>${mainData.testDevPeopleScale.countStr}</span>`,
             'bgColor': 'transparent',
             'padding': '8px 0px'
           }"

src/views/dataBigManage/components/qualityModule/index.vue

@@ -102,7 +102,7 @@
             <span class="rollBackItem" :style="{ cursor: 'pointer'}" @click.stop="onDetial('上线过程', {...mainData.onlineProcessList.rollBack, itemKey: 'countStr', index: 0, label:'回滚次数', moduleName: '回滚次数'})">
               <span class="bigCircle" style="background: #7ED321" />
               回滚
-              <span class="numText" style="font-size: 20px">{{ mainData.onlineProcessList.rollBack.countStr.countStr }}</span>
+              <span class="numText isHove" style="font-size: 20px">{{ mainData.onlineProcessList.rollBack.countStr.countStr }}</span>
               次
             </span>
           </el-col>
@@ -110,19 +110,19 @@
             <div class="rollBackItem pointer" @click.stop="onDetial('上线过程', {...mainData.onlineProcessList.rollBack, itemKey: 'preCountStr', index: 1, label:'预发回滚', moduleName: '回滚次数'})">
               <span class="circle" style="background: #3F9DFE" />
               预发回滚
-              <span class="numText">{{ mainData.onlineProcessList.rollBack.preCountStr.countStr }}</span>
+              <span class="numText isHove">{{ mainData.onlineProcessList.rollBack.preCountStr.countStr }}</span>
               次
             </div>
             <div class="rollBackItem pointer" @click.stop="onDetial('上线过程', {...mainData.onlineProcessList.rollBack, itemKey: 'fullCountStr', index: 2, label:'全量回滚', moduleName: '回滚次数'})">
               <span class="circle" style="background: #3F9DFE" />
               全量回滚
-              <span class="numText">{{ mainData.onlineProcessList.rollBack.fullCountStr.countStr }}</span>
+              <span class="numText isHove">{{ mainData.onlineProcessList.rollBack.fullCountStr.countStr }}</span>
               次
             </div>
             <div class="rollBackItem pointer" @click.stop="onDetial('上线过程',{...mainData.onlineProcessList.rollBack, itemKey: 'lowCountStr', index: 3, label:'小流量回滚', moduleName: '回滚次数'})">
               <span class="circle" style="background: #3F9DFE" />
               小流量回滚
-              <span class="numText">{{ mainData.onlineProcessList.rollBack.lowCountStr.countStr }}</span>
+              <span class="numText isHove">{{ mainData.onlineProcessList.rollBack.lowCountStr.countStr }}</span>
               次
             </div>
           </el-col>

src/views/dataBigManage/components/throughputModule/index.vue

@@ -19,7 +19,7 @@
           <div
             v-for="item in mainData.throughputList"
             :key="item.pointer"
-            class="listItem flex-center-between"
+            class="listItem flex-center-between "
             @click.stop="item.label !== '人均吞吐量' && $emit(
               'checkDetialModal',
               { list: [...mainData.throughputList], activeLabel: item.label }
@@ -31,7 +31,7 @@
               {{ item.label }}
 <!--              <span :class="Number(item.chainRatio) > 0 ? 'textRed count' : 'textBlue count'">{{ item.countStr }}</span>-->
               <span
-                :class="isRed(item.label) ? 'textRed count' : 'textBlue count'"
+                :class="isRed(item.label) ? 'textRed count isHove' : 'textBlue count isHove'"
                 :style="{cursor: item.label === '人均吞吐量' ? 'inherit':'pointer'}"
               >{{ item.countStr }}</span>
               <span>
@@ -40,7 +40,7 @@
             </div>
             <div class="throughputRate">
               <span>环比：</span>
-              <span :class="Number(item.chainRatio) > 0 ? 'item-up' : 'item-down'">
+              <span :class="Number(item.chainRatio) > 0 ? 'item-up isHove' : 'item-down isHove'">
                 <i v-if="Number(item.chainRatio) > 0" class="el-icon-caret-top" />
                 <i v-else class="el-icon-caret-bottom" />
                 <span :style="{cursor: item.label === '人均吞吐量' ? 'inherit':'pointer'}">{{ item.chainRatio }}</span>%

src/views/dataBigManage/index.vue

@@ -728,6 +728,30 @@ export default {
   .deptCodesClass {
     display: inline-block;
   }
+  // 全局动效
+  .isHove{
+    &:hover{
+      cursor: pointer;
+      display: inline-block;
+      animation-name: example;
+      // animation-iteration-count:1;
+      animation-duration: 500ms;
+    }
+  }
+  @keyframes example {
+  0% {
+    transform: scale(1.2);
+    // transform: rotateX(60deg);
+  }
+  50%  {
+    transform: scale(1.3);
+    // transform: rotateX(90deg);
+  }
+  100% {
+    transform: scale(1);
+    // transform: rotateX(0);
+  }
+}
 }
 </style>