修改
This commit is contained in:
@@ -1,14 +1,14 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:25:10
|
||||
* @LastEditTime: 2024-05-31 16:38:29
|
||||
* @LastEditTime: 2024-06-03 16:40:45
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<!-- <div class="order"> -->
|
||||
<div class="std-rate" style="width: 100%; overflow: hidden scroll; height: 400px">
|
||||
<div class="std-rate" style="width: 100%">
|
||||
<!-- <div class="span-2">
|
||||
<StdRateItem :period="period" :city="cities[5]" />
|
||||
</div> -->
|
||||
@@ -106,12 +106,12 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.std-rate {
|
||||
display: flex;
|
||||
// gap: 1px;
|
||||
gap: 16px;
|
||||
// flex: 1 1 auto;
|
||||
|
||||
flex-direction: column;
|
||||
// display: -webkit-box;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
// flex-wrap: wrap;
|
||||
// align-items: center;
|
||||
// grid-template-columns: repeat(2, 1fr);
|
||||
// grid-template-rows: repeat(4, 1fr);
|
||||
}
|
||||
@@ -120,10 +120,10 @@ export default {
|
||||
}
|
||||
.flex-item{
|
||||
// flex: 1 1 auto;
|
||||
width: 50%;
|
||||
// width: 50%;
|
||||
}
|
||||
.span-2 {
|
||||
// flex: 1 1 auto;
|
||||
flex-basis: 100%;
|
||||
flex: 1 1 auto;
|
||||
// flex-basis: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 13:22:43
|
||||
* @LastEditTime: 2024-05-31 15:55:00
|
||||
* @LastEditTime: 2024-06-03 16:13:52
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -11,7 +11,7 @@
|
||||
<span v-for="(item,index) in legend" :key="index" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="oeeChart" style="height:100%;width:100%"></div>
|
||||
<div ref="oeeChart" style="height:94%;width:100%"></div>
|
||||
</chart-container>
|
||||
</template>
|
||||
|
||||
@@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "BarChartBase",
|
||||
name: "barChartBaseoee",
|
||||
components: {
|
||||
ChartContainer,
|
||||
},
|
||||
@@ -220,30 +220,30 @@ export default {
|
||||
this.canvasReset()
|
||||
},
|
||||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
|
||||
// isFullscreen(val) {
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// // if (val === false && this.isOpen === true) {
|
||||
// // console.log(val)
|
||||
// // this.width = 97 + '%'
|
||||
// // this.canvasReset()
|
||||
// // } else if (val === false && this.isOpen === false) {
|
||||
// // this.width = 100 + '%'
|
||||
// // this.canvasReset()
|
||||
// // }
|
||||
// // this.actualOptions.series.map((item) => {
|
||||
// // item.barWidth = val ? 18 : 12;
|
||||
// // });
|
||||
// // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// this.initChart(this.actualOptions)
|
||||
// this.canvasReset()
|
||||
// },
|
||||
isFullscreen(val) {
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// if (val === false && this.isOpen === true) {
|
||||
// console.log(val)
|
||||
// this.width = 97 + '%'
|
||||
// this.canvasReset()
|
||||
// } else if (val === false && this.isOpen === false) {
|
||||
// this.width = 100 + '%'
|
||||
// this.canvasReset()
|
||||
// }
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions)
|
||||
this.canvasReset()
|
||||
},
|
||||
series(val) {
|
||||
if (!val) {
|
||||
this.initChart(this.options);
|
||||
@@ -268,11 +268,11 @@ export default {
|
||||
// this.isFullscreen = screenfull.isFullscreen;
|
||||
// });
|
||||
// }
|
||||
// if (screenfull.isEnabled) {
|
||||
// screenfull.on("change", () => {
|
||||
// this.isFullscreen = screenfull.isFullscreen;
|
||||
// });
|
||||
// }
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on("change", () => {
|
||||
this.isFullscreen = screenfull.isFullscreen;
|
||||
});
|
||||
}
|
||||
this.actualOptions = this.options
|
||||
this.canvasReset();
|
||||
window.addEventListener("resize", this.canvasReset);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-23 15:50:44
|
||||
* @LastEditTime: 2024-05-31 15:54:41
|
||||
* @LastEditTime: 2024-06-03 16:14:03
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -11,7 +11,7 @@
|
||||
<span v-for="(item,index) in legend" :key="index" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="oeeChart" style="height:100%;width:100%"></div>
|
||||
<div ref="oeeChart" style="height:94%;width:100%"></div>
|
||||
</chart-container>
|
||||
</template>
|
||||
|
||||
@@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "BarChartBase",
|
||||
name: "barChartBaseoee",
|
||||
components: {
|
||||
ChartContainer,
|
||||
},
|
||||
@@ -221,12 +221,12 @@ export default {
|
||||
},
|
||||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
|
||||
isFullscreen(val) {
|
||||
this.actualOptions.series.map((item) => {
|
||||
item.barWidth = val ? 18 : 12;
|
||||
});
|
||||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// if (val === false && this.isOpen === true) {
|
||||
// console.log(val)
|
||||
// this.width = 97 + '%'
|
||||
@@ -241,8 +241,8 @@ export default {
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// this.initChart(this.actualOptions)
|
||||
// this.canvasReset()
|
||||
this.initChart(this.actualOptions)
|
||||
this.canvasReset()
|
||||
},
|
||||
series(val) {
|
||||
if (!val) {
|
||||
@@ -267,11 +267,11 @@ export default {
|
||||
// this.isFullscreen = screenfull.isFullscreen;
|
||||
// });
|
||||
// }
|
||||
// if (screenfull.isEnabled) {
|
||||
// screenfull.on("change", () => {
|
||||
// this.isFullscreen = screenfull.isFullscreen;
|
||||
// });
|
||||
// }
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on("change", () => {
|
||||
this.isFullscreen = screenfull.isFullscreen;
|
||||
});
|
||||
}
|
||||
this.actualOptions = this.options
|
||||
this.canvasReset();
|
||||
window.addEventListener("resize", this.canvasReset);
|
||||
|
||||
@@ -270,7 +270,7 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// justify-content: center;
|
||||
gap: 3px;
|
||||
backdrop-filter: blur(24px);
|
||||
.cities {
|
||||
@@ -283,6 +283,7 @@ export default {
|
||||
flex: 1 1 auto;
|
||||
padding: 0 15%;
|
||||
/* margin: 10%; */
|
||||
height: 16vh;
|
||||
/* min-width: 300px; */
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
@@ -1,25 +1,31 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:04:53
|
||||
* @LastEditTime: 2024-05-31 13:19:34
|
||||
* @LastEditTime: 2024-06-03 16:08:27
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="efficiency-copilot">
|
||||
<Container title="芯片良率" icon="chip2">
|
||||
<ChipRate :period="period" :than="than" />
|
||||
</Container>
|
||||
<Container title="标准组件良率" icon="std">
|
||||
<StdRate :period="period" :than="than" />
|
||||
</Container>
|
||||
<Container title="芯片OEE" icon="chip">
|
||||
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
|
||||
</Container>
|
||||
<Container title="转化效率" icon="cube">
|
||||
<TransformRate :transformRate="transformRate" :period="period" :than="than" />
|
||||
</Container>
|
||||
<section class="top flex">
|
||||
<Container title="芯片良率" icon="chip2">
|
||||
<ChipRate :period="period" :than="than" />
|
||||
</Container>
|
||||
<Container title="标准组件良率" icon="std">
|
||||
<StdRate :period="period" :than="than" />
|
||||
</Container>
|
||||
</section>
|
||||
<section class="bottom flex">
|
||||
<Container title="芯片OEE" icon="chip">
|
||||
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
|
||||
</Container>
|
||||
<Container title="转化效率" icon="cube">
|
||||
<TransformRate :transformRate="transformRate" :period="period" :than="than" />
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -31,7 +37,7 @@ import StdRateVue from "./components/StdRate.vue";
|
||||
import TransformRateVue from "./components/TransformRate.vue";
|
||||
|
||||
export default {
|
||||
name: "EfficiencyCopilot",
|
||||
name: "efficiencyCopilot",
|
||||
components: {
|
||||
Container,
|
||||
ChipOee: ChipOeeVue,
|
||||
@@ -88,7 +94,30 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.efficiency-copilot {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- <style scoped>
|
||||
|
||||
.efficiency-copilot {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
@@ -100,4 +129,4 @@ export default {
|
||||
.efficiency-copilot > div {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</style> -->
|
||||
|
||||
@@ -22,7 +22,7 @@ export default ({
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontWeight: 600,
|
||||
fontSize: 32,
|
||||
fontSize: 26,
|
||||
color: "#fffd",
|
||||
},
|
||||
subtext: `\u2002${subtitle}\u2002`,
|
||||
|
||||
Reference in New Issue
Block a user