update efficiency
This commit is contained in:
父節點
417640dec1
當前提交
5ed4eed5de
之前 寬度: | 高度: | 大小: 5.0 KiB 之後 寬度: | 高度: | 大小: 5.0 KiB |
25
src/views/copilot/efficiency/components/ChipOee.vue
Normal file
25
src/views/copilot/efficiency/components/ChipOee.vue
Normal file
@ -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>
|
27
src/views/copilot/efficiency/components/ChipRate.vue
Normal file
27
src/views/copilot/efficiency/components/ChipRate.vue
Normal file
@ -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>
|
65
src/views/copilot/efficiency/components/StdRate.vue
Normal file
65
src/views/copilot/efficiency/components/StdRate.vue
Normal file
@ -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>
|
25
src/views/copilot/efficiency/components/TransformRate.vue
Normal file
25
src/views/copilot/efficiency/components/TransformRate.vue
Normal file
@ -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>
|
68
src/views/copilot/efficiency/components/sub/CityName.vue
Normal file
68
src/views/copilot/efficiency/components/sub/CityName.vue
Normal file
@ -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>
|
82
src/views/copilot/efficiency/components/sub/ProgressBar.vue
Normal file
82
src/views/copilot/efficiency/components/sub/ProgressBar.vue
Normal file
@ -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>
|
65
src/views/copilot/efficiency/components/sub/StdRateItem.vue
Normal file
65
src/views/copilot/efficiency/components/sub/StdRateItem.vue
Normal file
@ -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",
|
||||
|
載入中…
新增問題並參考
Block a user