update 芯片良率

src/views/copilot/efficiency/components/sub/std/ProgressBar.vue

@@ -0,0 +1,113 @@
+<!-- 
+    filename: ProgressBar.vue
+    author: liubin
+    date: 2024-04-29 09:18:30
+    description: 
+-->
+
+<template>
+  <div class="progress-bar" :data-title="title" :data-rate="dataRate">
+    <div
+      class="progress-bar__rate"
+      :style="{ width: dataRate == '-' ? 0 : dataRate }"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProgressBar",
+  components: {},
+  props: {
+    value: {
+      type: Number,
+      default: 0,
+    },
+    total: {
+      type: Number,
+      default: 0,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    dataRate() {
+      return this.total == 0
+        ? "-"
+        : `${(parseFloat(this.value / this.total) * 100).toFixed(0)}%`;
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.progress-bar {
+  height: 10px;
+  background-color: #002f6b;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  position: relative;
+
+  &:before {
+    content: attr(data-title);
+    display: inline-block;
+    color: #fff;
+    position: absolute;
+    bottom: -200%;
+    font-size: 12px;
+  }
+
+  &:after {
+    content: attr(data-rate);
+    display: inline-block;
+    color: #fff;
+    position: absolute;
+    bottom: -200%;
+    right: 0;
+    font-size: 12px;
+  }
+
+  &:first-child {
+    &:after {
+      color: #11eae3;
+    }
+  }
+  &:nth-child(2) {
+    &:after {
+      color: #0e65fd;
+    }
+  }
+
+  .progress-bar__rate {
+    position: absolute;
+    display: inline-block;
+    height: 100%;
+    width: 0;
+    border-radius: 4px;
+  }
+
+  &:first-child {
+    .progress-bar__rate {
+      background: linear-gradient(
+        to right,
+        #004c5e11 10%,
+        #004c5e,
+        #0ac0c0,
+        #11eae3
+      );
+    }
+  }
+
+  &:nth-child(2) {
+    .progress-bar__rate {
+      background: linear-gradient(to right, #0048a811, #0048a8, #0e65fd);
+    }
+  }
+}
+</style>