src/views/copilot/efficiency/components/StdRate.vue

@@ -8,21 +8,13 @@
 <template>
   <div class="std-rate">
     <div class="span-2">
-      <StdRateItem
-        :city="cities[5].name"
-        :target="cities[5].target"
-        :total="cities[5].total"
-      />
+      <StdRateItem :city="cities[5]" />
     </div>
     <div
       v-for="item in cities.filter((val, index) => index != 5)"
       :key="item.name"
     >
-      <StdRateItem
-        :city="item.name"
-        :target="item.target"
-        :total="item.total"
-      />
+      <StdRateItem :city="item" />
     </div>
   </div>
 </template>
@@ -36,13 +28,13 @@ export default {
   data() {
     return {
       cities: [
-        { name: "A", target: 100, total: 200 },
-        { name: "B", target: 200, total: 300 },
-        { name: "C", target: 300, total: 400 },
-        { name: "D", target: 400, total: 500 },
-        { name: "E", target: 500, total: 600 },
-        { name: "F", target: 400, total: 500 },
-        { name: "G", target: 500, total: 600 },
+        { name: "瑞昌", target: 100, total: 200, thisYear: 20 },
+        { name: "邯郸", target: 200, total: 300, thisYear: 20 },
+        { name: "株洲", target: 300, total: 400, thisYear: 20 },
+        { name: "佳木斯", target: 400, total: 500, thisYear: 20 },
+        { name: "成都", target: 500, total: 600, thisYear: 20 },
+        { name: "凯盛光伏", target: 400, total: 500, thisYear: 20 },
+        { name: "蚌埠", target: 500, total: 600, thisYear: 20 },
       ],
     };
   },

src/views/copilot/efficiency/components/sub/CityName.vue

@@ -46,11 +46,9 @@ export default {
   position: absolute;
   top: 50%;
   right: 0;
-  width: 0;
-  height: 0;
-  border-top: 8px solid transparent;
-  border-bottom: 8px solid transparent;
-  border-left: 8px solid #002f6b;
+  width: 2px;
+  background: linear-gradient(to top, transparent, #0b5be1ee, transparent);
+  height: 100%;
   transform: translateY(-50%);
 }
 

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

@@ -37,7 +37,9 @@ export default {
   },
   computed: {
     dataRate() {
-      return this.total == 0 ? "-" : `${parseInt(this.value / this.total)}%`;
+      return this.total == 0
+        ? "-"
+        : `${(parseFloat(this.value / this.total) * 100).toFixed(0)}%`;
     },
   },
   methods: {},
@@ -46,10 +48,10 @@ export default {
 
 <style scoped lang="scss">
 .progress-bar {
-  height: 8px;
+  height: 10px;
   background-color: #002f6b;
   border-radius: 4px;
-  margin-bottom: 20px;
+  margin-bottom: 12px;
   position: relative;
 
   &:before {
@@ -57,7 +59,7 @@ export default {
     display: inline-block;
     color: #fff;
     position: absolute;
-    bottom: -18px;
+    bottom: -200%;
     font-size: 12px;
   }
 
@@ -66,17 +68,46 @@ export default {
     display: inline-block;
     color: #fff;
     position: absolute;
-    bottom: -18px;
+    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;
-    background-color: #11e8e2;
     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>

src/views/copilot/efficiency/components/sub/StdRateItem.vue

@@ -7,10 +7,14 @@
 
 <template>
   <div class="std-rate-item">
-    <CityName :value="city" />
+    <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar title="24年目标" :total="100" :value="10" />
-      <ProgressBar title="24年目标" :total="100" :value="10" />
+      <ProgressBar title="24年目标" :total="city.target" :value="city.target" />
+      <ProgressBar
+        title="24年累计"
+        :total="city.target"
+        :value="city.thisYear"
+      />
     </div>
   </div>
 </template>
@@ -24,23 +28,13 @@ export default {
   components: { CityName, ProgressBar },
   props: {
     city: {
-      type: String,
-      default: "",
-    },
-    target: {
-      type: Number,
-      default: 0,
-    },
-    total: {
-      type: Number,
-      default: 0,
+      type: Object,
+      required: true,
     },
   },
   data() {
     return {};
   },
-  computed: {},
-  methods: {},
 };
 </script>
 
@@ -58,7 +52,8 @@ export default {
   flex: 1;
   margin: 6px;
   display: flex;
-  gap: 2px;
+  gap: 12px;
+  height: 60px;
   flex-direction: column;
   justify-content: center;
 }