update efficiency
This commit is contained in:
parent
417640dec1
commit
5ed4eed5de
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 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>
|
<template>
|
||||||
<div class="efficiency-copilot">
|
<div class="efficiency-copilot">
|
||||||
<Container title="芯片良率" icon="chip2"></Container>
|
<Container title="芯片良率" icon="chip2">
|
||||||
<Container title="标准组件良率" icon="std"></Container>
|
<ChipRate />
|
||||||
<Container title="芯片OEE" icon="chip"></Container>
|
</Container>
|
||||||
<Container title="转化效率" icon="cube"></Container>
|
<Container title="标准组件良率" icon="std">
|
||||||
|
<StdRate />
|
||||||
|
</Container>
|
||||||
|
<Container title="芯片OEE" icon="chip">
|
||||||
|
<ChipOee />
|
||||||
|
</Container>
|
||||||
|
<Container title="转化效率" icon="cube">
|
||||||
|
<TransformRate />
|
||||||
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Container from "@/views/copilot/components/Container.vue";
|
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 {
|
export default {
|
||||||
name: "EfficiencyCopilot",
|
name: "EfficiencyCopilot",
|
||||||
components: { Container },
|
components: {
|
||||||
|
Container,
|
||||||
|
ChipOee: ChipOeeVue,
|
||||||
|
ChipRate: ChipRateVue,
|
||||||
|
StdRate: StdRateVue,
|
||||||
|
TransformRate: TransformRateVue,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
period: {
|
period: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -39,7 +58,10 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
fetchData(period = "日") {
|
fetchData(period = "日") {
|
||||||
console.log(`效率驾驶舱,获取${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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Icon from "../../../assets/icon.png";
|
import Icon from "@/views/copilot/assets/icon.png";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "CityName",
|
name: "CityName",
|
||||||
|
Loading…
Reference in New Issue
Block a user