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

@@ -0,0 +1,25 @@
+<!-- 
+    filename: ChipOee.vue
+    author: liubin
+    date: 2024-04-29 08:51:04
+    description: 芯片OEE
+-->
+
+<template></template>
+
+<script>
+export default {
+    name: "ChipOEE",
+    components: {},
+    props: {},
+    data() {
+        return {}
+    },
+    computed: {},
+    methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,27 @@
+<!-- 
+    filename: ChipRate.vue
+    author: liubin
+    date: 2024-04-29 08:50:54
+    description: 芯片良率
+-->
+
+<template>
+
+</template>
+
+<script>
+export default {
+    name: "ChipRate",
+    components: {},
+    props: {},
+    data() {
+        return {}
+    },
+    computed: {},
+    methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,65 @@
+<!-- 
+    filename: StdRate.vue
+    author: liubin
+    date: 2024-04-29 08:50:43
+    description: 标准组件良率
+-->
+
+<template>
+  <div class="std-rate">
+    <div class="span-2">
+      <StdRateItem
+        :city="cities[5].name"
+        :target="cities[5].target"
+        :total="cities[5].total"
+      />
+    </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"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import StdRateItem from "./sub/StdRateItem.vue";
+export default {
+  name: "StdRate",
+  components: { StdRateItem },
+  props: {},
+  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 },
+      ],
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.std-rate {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+}
+
+.span-2 {
+  grid-column: span 2;
+}
+</style>

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

@@ -0,0 +1,25 @@
+<!-- 
+    filename: TransformRate.vue
+    author: liubin
+    date: 2024-04-29 08:50:34
+    description: 转化效率
+-->
+
+<template></template>
+
+<script>
+export default {
+    name: "TransformRate",
+    components: {},
+    props: {},
+    data() {
+        return {}
+    },
+    computed: {},
+    methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,68 @@
+<!-- 
+    filename: CityName.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <div class="city-name">
+    <img :src="Icon" alt="city icon" />
+    <span>{{ value }}</span>
+  </div>
+</template>
+
+<script>
+import Icon from "@/views/copilot/assets/icon.png";
+
+export default {
+  name: "CityName",
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return { Icon };
+  },
+};
+</script>
+
+<style scoped>
+.city-name {
+  min-width: 80px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  position: relative;
+}
+
+.city-name::after {
+  content: "";
+  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;
+  transform: translateY(-50%);
+}
+
+img {
+  /* width: 32px; */
+  width: 1.543vw;
+}
+
+span {
+  /* font-size: 12px;   */
+  font-size: 0.77vw;
+  letter-spacing: 2px;
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,82 @@
+<!-- 
+    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 ? "-" : `${parseInt(this.value / this.total)}%`;
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.progress-bar {
+  height: 8px;
+  background-color: #002f6b;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  position: relative;
+
+  &:before {
+    content: attr(data-title);
+    display: inline-block;
+    color: #fff;
+    position: absolute;
+    bottom: -18px;
+    font-size: 12px;
+  }
+
+  &:after {
+    content: attr(data-rate);
+    display: inline-block;
+    color: #fff;
+    position: absolute;
+    bottom: -18px;
+    right: 0;
+    font-size: 12px;
+  }
+
+  .progress-bar__rate {
+    display: inline-block;
+    height: 100%;
+    width: 0;
+    background-color: #11e8e2;
+    border-radius: 4px;
+  }
+}
+</style>

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

@@ -0,0 +1,65 @@
+<!-- 
+    filename: StdRateItem.vue
+    author: liubin
+    date: 2024-04-29 08:59:33
+    description: 
+-->
+
+<template>
+  <div class="std-rate-item">
+    <CityName :value="city" />
+    <div class="std-rate-item__value">
+      <ProgressBar title="24年目标" :total="100" :value="10" />
+      <ProgressBar title="24年目标" :total="100" :value="10" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CityName from "./CityName.vue";
+import ProgressBar from "./ProgressBar.vue";
+
+export default {
+  name: "StdRateItem",
+  components: { CityName, ProgressBar },
+  props: {
+    city: {
+      type: String,
+      default: "",
+    },
+    target: {
+      type: Number,
+      default: 0,
+    },
+    total: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.std-rate-item {
+  box-shadow: inset 0 0 12px 2px #fff3;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+}
+
+.std-rate-item__value {
+  flex: 1;
+  margin: 6px;
+  display: flex;
+  gap: 2px;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

src/views/copilot/efficiency/index.vue

@@ -7,18 +7,37 @@
 
 <template>
   <div class="efficiency-copilot">
-    <Container title="芯片良率" icon="chip2"></Container>
-    <Container title="标准组件良率" icon="std"></Container>
-    <Container title="芯片OEE" icon="chip"></Container>
-    <Container title="转化效率" icon="cube"></Container>
+    <Container title="芯片良率" icon="chip2">
+      <ChipRate />
+    </Container>
+    <Container title="标准组件良率" icon="std">
+      <StdRate />
+    </Container>
+    <Container title="芯片OEE" icon="chip">
+      <ChipOee />
+    </Container>
+    <Container title="转化效率" icon="cube">
+      <TransformRate />
+    </Container>
   </div>
 </template>
 
 <script>
 import Container from "@/views/copilot/components/Container.vue";
+import ChipOeeVue from "./components/ChipOee.vue";
+import ChipRateVue from "./components/ChipRate.vue";
+import StdRateVue from "./components/StdRate.vue";
+import TransformRateVue from "./components/TransformRate.vue";
+
 export default {
   name: "EfficiencyCopilot",
-  components: { Container },
+  components: {
+    Container,
+    ChipOee: ChipOeeVue,
+    ChipRate: ChipRateVue,
+    StdRate: StdRateVue,
+    TransformRate: TransformRateVue,
+  },
   props: {
     period: {
       type: String,
@@ -39,7 +58,10 @@ export default {
   methods: {
     fetchData(period = "日") {
       console.log(`效率驾驶舱，获取${period}数据`);
-      this.$store.dispatch("copilot/initCopilot", { period, source: "efficiency" });
+      this.$store.dispatch("copilot/initCopilot", {
+        period,
+        source: "efficiency",
+      });
     },
   },
 };

src/views/copilot/yield/components/sub/city/CityName.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import Icon from "../../../assets/icon.png";
+import Icon from "@/views/copilot/assets/icon.png";
 
 export default {
   name: "CityName",