update efficiency

This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-04-29 13:26:38 +08:00
父節點 417640dec1
當前提交 5ed4eed5de
共有 10 個檔案被更改,包括 386 行新增7 行删除

查看文件

之前

寬度:  |  高度:  |  大小: 5.0 KiB

之後

寬度:  |  高度:  |  大小: 5.0 KiB

查看文件

@ -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>

查看文件

@ -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>

查看文件

@ -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>

查看文件

@ -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>

查看文件

@ -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>

查看文件

@ -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>

查看文件

@ -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>

查看文件

@ -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",
});
},
},
};

查看文件

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