充电样式完成

project/biaopin/dv/weiyang/AppDvWeiyang.vue

@@ -4,10 +4,11 @@ import SubHeader from "./comps/subHeader.vue";
 import IconStaPanel from "./comps/iconStaPanel.vue";
 import IconSmallPanel from "./comps/iconSmallPanel.vue";
 import ValueUnit from "./comps/valueUnit.vue";
+import ChargingPercent from "./comps/chargingPercent.vue";
 
 export default {
   name: "AppDvWeiyang",
-  components: {ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
+  components: {ChargingPercent, ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
   label: "未央最新定制大屏",
   props: {
     instance: Function,
@@ -85,7 +86,10 @@ export default {
         </div>
       </div>
       <div class="b2"></div>
-      <div class="c"></div>
+      <div class="c flex column center">
+        <div class="mar-b40" v-text="'工单处置率'"/>
+        <charging-percent label="已完成工单" :value="80"/>
+      </div>
       <div class="c1 grid">
         <icon-small-panel class="item row pad-h16" :label="getLabel('工单总数')" :value="0" unit="个"/>
         <div class="item pad-v12 flex column center" v-for="(e,i) in workorderSta" :key="i" :class="{isRed:e.isRed}">

project/biaopin/dv/weiyang/comps/chargingPercent.vue

@@ -0,0 +1,95 @@
+<script>
+import ValueUnit from "./valueUnit.vue";
+
+export default {
+  name: "chargingPercent",
+  components: {ValueUnit},
+  props: ["label", "value"],
+  computed: {
+    renderPosition() {
+      const offset = Math.round(120 * this.value / 100)
+      return {
+        '--offset-percent': `${offset}px`
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="chargingPercent">
+    {{ label }}
+    <value-unit :value="value" unit="%" color="#fff"/>
+    <div class="wave mar-8" :style="renderPosition"/>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.chargingPercent {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+
+  &:before {
+    display: block;
+    content: " ";
+    border: 3px solid #2CD4C8;
+    border-radius: 50%;
+    width: 128px;
+    height: 128px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 2px 2px 8px 0 #2CD4C833, -2px -2px 8px 0 #2CD4C833, 2px -2px 8px 0 #2CD4C833, -2px 2px 8px 0 #2CD4C833;
+  }
+
+  .wave {
+    position: absolute;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    z-index: -1;
+    --offset-percent: 0;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 360px;
+      height: 360px;
+      left: 50%;
+      bottom: calc(-620px + var(--offset-percent));
+      background-color: rgba(255, 255, 255, .1);
+      border-radius: 45%;
+      transform: translate(-50%, -70%) rotate(0);
+      animation: rotate 6s linear infinite;
+      z-index: 10;
+    }
+
+    &::after {
+      border-radius: 47%;
+      background: radial-gradient(circle at center, rgba(44, 212, 200, 0.9) 50%, #ffffff00 100%);
+      transform: translate(-50%, -70%) rotate(0);
+      animation: rotate 10s linear -5s infinite;
+      z-index: 20;
+    }
+  }
+}
+
+@keyframes rotate {
+  50% {
+    transform: translate(-50%, -73%) rotate(180deg);
+  }
+  100% {
+    transform: translate(-50%, -70%) rotate(360deg);
+  }
+}
+</style>

ui/lib/styles/common.scss

@@ -23,7 +23,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   }
 }
 
-@each $v in (6, 8, 10, 12, 14, 16, 20, 24, 27, 32, 48, 56, 64, 80) {
+@each $v in (6, 8, 10, 12, 14, 16, 20, 24, 27, 32, 40, 48, 56, 64, 80) {
   //gap
   .gap-#{$v} {
     gap: #{$v}px !important;