This commit is contained in:
‘937886381’ 2024-06-03 16:42:28 +08:00
parent 38b278530c
commit 9d11f8b943
12 changed files with 132 additions and 108 deletions

View File

@ -1,8 +1,8 @@
### ###
# @Author: zhp # @Author: zhp
# @Date: 2024-04-28 13:42:51 # @Date: 2024-04-28 13:42:51
# @LastEditTime: 2024-06-03 08:50:41 # @LastEditTime: 2024-06-03 15:41:29
# @LastEditors: DY # @LastEditors: zhp
# @Description: # @Description:
### ###
# 开发环境配置 # 开发环境配置
@ -13,11 +13,11 @@ VUE_APP_TITLE = 芋道管理系统
# 芋道管理系统/开发环境 # 芋道管理系统/开发环境
# VUE_APP_BASE_API = 'http://192.168.1.70:30307' # VUE_APP_BASE_API = 'http://192.168.1.70:30307'
# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com' VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
# sara # sara
# VUE_APP_BASE_API = 'http://192.168.1.63:48080' # VUE_APP_BASE_API = 'http://192.168.1.63:48080'
# 张一丁 # 张一丁
VUE_APP_BASE_API = 'http://192.168.4.139:48080' # VUE_APP_BASE_API = 'http://192.168.4.139:48080'
# 路由懒加载 # 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true

View File

@ -4,16 +4,16 @@ function __resizeHandler(entries) {
console.log(entries) console.log(entries)
for (const entry of entries) { for (const entry of entries) {
if (entry.contentBoxSize) { if (entry.contentBoxSize) {
// const contentBoxSize = Array.isArray(entry.contentBoxSize) const contentBoxSize = Array.isArray(entry.contentBoxSize)
// ? entry.contentBoxSize[0] ? entry.contentBoxSize[0]
// : entry.contentBoxSize; : entry.contentBoxSize;
// this.chart_mixin_chartInstance.resize({ this.chart_mixin_chartInstance.resize({
// width: width:
// contentBoxSize.inlineSize < this.MIN_WIDTH contentBoxSize.inlineSize < this.MIN_WIDTH
// ? this.MIN_WIDTH ? this.MIN_WIDTH
// : contentBoxSize.inlineSize, : contentBoxSize.inlineSize,
// height: contentBoxSize.blockSize, height: contentBoxSize.blockSize,
// }); });
} else { } else {
// manipulate contentRect // manipulate contentRect
this.chart_mixin_chartInstance.resize({ this.chart_mixin_chartInstance.resize({

View File

@ -1,14 +1,14 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:25:10 * @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-31 16:38:29 * @LastEditTime: 2024-06-03 16:40:45
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
<template> <template>
<!-- <div class="order"> --> <!-- <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"> <!-- <div class="span-2">
<StdRateItem :period="period" :city="cities[5]" /> <StdRateItem :period="period" :city="cities[5]" />
</div> --> </div> -->
@ -106,12 +106,12 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.std-rate { .std-rate {
display: flex; display: flex;
// gap: 1px; gap: 16px;
// flex: 1 1 auto; // flex: 1 1 auto;
flex-direction: column;
// display: -webkit-box; // display: -webkit-box;
flex-wrap: wrap; // flex-wrap: wrap;
align-items: center; // align-items: center;
// grid-template-columns: repeat(2, 1fr); // grid-template-columns: repeat(2, 1fr);
// grid-template-rows: repeat(4, 1fr); // grid-template-rows: repeat(4, 1fr);
} }
@ -120,10 +120,10 @@ export default {
} }
.flex-item{ .flex-item{
// flex: 1 1 auto; // flex: 1 1 auto;
width: 50%; // width: 50%;
} }
.span-2 { .span-2 {
// flex: 1 1 auto; flex: 1 1 auto;
flex-basis: 100%; // flex-basis: 100%;
} }
</style> </style>

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 13:22:43 * @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-05-31 15:55:00 * @LastEditTime: 2024-06-03 16:13:52
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -11,7 +11,7 @@
<span v-for="(item,index) in legend" :key="index" class="legend-item" <span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div> </div>
<div ref="oeeChart" style="height:100%;width:100%"></div> <div ref="oeeChart" style="height:94%;width:100%"></div>
</chart-container> </chart-container>
</template> </template>
@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue";
import { debounce } from "@/utils/debounce"; import { debounce } from "@/utils/debounce";
import * as echarts from "echarts"; import * as echarts from "echarts";
export default { export default {
name: "BarChartBase", name: "barChartBaseoee",
components: { components: {
ChartContainer, ChartContainer,
}, },
@ -220,30 +220,30 @@ export default {
this.canvasReset() this.canvasReset()
}, },
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
// isFullscreen(val) { isFullscreen(val) {
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12; // item.barWidth = val ? 18 : 12;
// }); // });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// // if (val === false && this.isOpen === true) { // if (val === false && this.isOpen === true) {
// // console.log(val) // console.log(val)
// // this.width = 97 + '%' // 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() // 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) { series(val) {
if (!val) { if (!val) {
this.initChart(this.options); this.initChart(this.options);
@ -268,11 +268,11 @@ export default {
// this.isFullscreen = screenfull.isFullscreen; // this.isFullscreen = screenfull.isFullscreen;
// }); // });
// } // }
// if (screenfull.isEnabled) { if (screenfull.isEnabled) {
// screenfull.on("change", () => { screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen; this.isFullscreen = screenfull.isFullscreen;
// }); });
// } }
this.actualOptions = this.options this.actualOptions = this.options
this.canvasReset(); this.canvasReset();
window.addEventListener("resize", this.canvasReset); window.addEventListener("resize", this.canvasReset);

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-23 15:50:44 * @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-05-31 15:54:41 * @LastEditTime: 2024-06-03 16:14:03
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -11,7 +11,7 @@
<span v-for="(item,index) in legend" :key="index" class="legend-item" <span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div> </div>
<div ref="oeeChart" style="height:100%;width:100%"></div> <div ref="oeeChart" style="height:94%;width:100%"></div>
</chart-container> </chart-container>
</template> </template>
@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue";
import { debounce } from "@/utils/debounce"; import { debounce } from "@/utils/debounce";
import * as echarts from "echarts"; import * as echarts from "echarts";
export default { export default {
name: "BarChartBase", name: "barChartBaseoee",
components: { components: {
ChartContainer, ChartContainer,
}, },
@ -221,12 +221,12 @@ export default {
}, },
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) { isFullscreen(val) {
this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12; // item.barWidth = val ? 18 : 12;
}); // });
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// if (val === false && this.isOpen === true) { // if (val === false && this.isOpen === true) {
// console.log(val) // console.log(val)
// this.width = 97 + '%' // this.width = 97 + '%'
@ -241,8 +241,8 @@ export default {
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.initChart(this.actualOptions) this.initChart(this.actualOptions)
// this.canvasReset() this.canvasReset()
}, },
series(val) { series(val) {
if (!val) { if (!val) {
@ -267,11 +267,11 @@ export default {
// this.isFullscreen = screenfull.isFullscreen; // this.isFullscreen = screenfull.isFullscreen;
// }); // });
// } // }
// if (screenfull.isEnabled) { if (screenfull.isEnabled) {
// screenfull.on("change", () => { screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen; this.isFullscreen = screenfull.isFullscreen;
// }); });
// } }
this.actualOptions = this.options this.actualOptions = this.options
this.canvasReset(); this.canvasReset();
window.addEventListener("resize", this.canvasReset); window.addEventListener("resize", this.canvasReset);

View File

@ -270,7 +270,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; // justify-content: center;
gap: 3px; gap: 3px;
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
.cities { .cities {
@ -283,6 +283,7 @@ export default {
flex: 1 1 auto; flex: 1 1 auto;
padding: 0 15%; padding: 0 15%;
/* margin: 10%; */ /* margin: 10%; */
height: 16vh;
/* min-width: 300px; */ /* min-width: 300px; */
align-self: stretch; align-self: stretch;
} }

View File

@ -1,25 +1,31 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:04:53 * @Date: 2024-05-07 10:04:53
* @LastEditTime: 2024-05-31 13:19:34 * @LastEditTime: 2024-06-03 16:08:27
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
<template> <template>
<div class="efficiency-copilot"> <div class="efficiency-copilot">
<section class="top flex">
<Container title="芯片良率" icon="chip2"> <Container title="芯片良率" icon="chip2">
<ChipRate :period="period" :than="than" /> <ChipRate :period="period" :than="than" />
</Container> </Container>
<Container title="标准组件良率" icon="std"> <Container title="标准组件良率" icon="std">
<StdRate :period="period" :than="than" /> <StdRate :period="period" :than="than" />
</Container> </Container>
</section>
<section class="bottom flex">
<Container title="芯片OEE" icon="chip"> <Container title="芯片OEE" icon="chip">
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" /> <ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
</Container> </Container>
<Container title="转化效率" icon="cube"> <Container title="转化效率" icon="cube">
<TransformRate :transformRate="transformRate" :period="period" :than="than" /> <TransformRate :transformRate="transformRate" :period="period" :than="than" />
</Container> </Container>
</section>
</div> </div>
</template> </template>
@ -31,7 +37,7 @@ import StdRateVue from "./components/StdRate.vue";
import TransformRateVue from "./components/TransformRate.vue"; import TransformRateVue from "./components/TransformRate.vue";
export default { export default {
name: "EfficiencyCopilot", name: "efficiencyCopilot",
components: { components: {
Container, Container,
ChipOee: ChipOeeVue, ChipOee: ChipOeeVue,
@ -88,7 +94,30 @@ export default {
}; };
</script> </script>
<style scoped> <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 { .efficiency-copilot {
flex: 1; flex: 1;
display: grid; display: grid;
@ -100,4 +129,4 @@ export default {
.efficiency-copilot > div { .efficiency-copilot > div {
height: 100%; height: 100%;
} }
</style> </style> -->

View File

@ -22,7 +22,7 @@ export default ({
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
fontWeight: 600, fontWeight: 600,
fontSize: 32, fontSize: 26,
color: "#fffd", color: "#fffd",
}, },
subtext: `\u2002${subtitle}\u2002`, subtext: `\u2002${subtitle}\u2002`,

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-20 16:04:18 * @Date: 2024-05-20 16:04:18
* @LastEditTime: 2024-05-31 13:16:26 * @LastEditTime: 2024-06-03 15:45:58
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -95,13 +95,14 @@ export default {
</script> </script>
<style> <style>
.copilot-layout { .copilot-layout {
padding: 16px; padding: 16px;
background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat; background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
position: absolute; position: absolute;
left: -16px; left: -16px;
/* top: -8px; */ /* top: -8px; */
height: calc(100% + 240px); height: calc(100% + 30px);
width: calc(100% + 30px); width: calc(100% + 30px);
z-index: 1001; z-index: 1001;
color: #fff; color: #fff;
@ -110,12 +111,12 @@ export default {
gap: 8px; gap: 8px;
} }
.produce{ /* .produce{
height: calc(100% + 38px); height: calc(100% + 38px);
} } */
.other { /* .other { */
/* height: calc(100% + 240px); */ /* height: calc(100% + 240px); */
} /* } */
.copilot-footer { .copilot-footer {
/** position: absolute; /** position: absolute;
bottom: 10px; **/ bottom: 10px; **/

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-20 13:32:59 * @Date: 2024-05-20 13:32:59
* @LastEditTime: 2024-05-31 15:05:20 * @LastEditTime: 2024-06-03 16:26:24
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -151,7 +151,7 @@ export default {
]; ];
} }
let titleValue = let titleValue =
vt[1] != null && vt[2] !== 0 vt[1] != null && (vt[2] !== 0 && vt[2] !== undefined)
? this.formatNumber((vt[1] / vt[2] * 100)) + '%' ? this.formatNumber((vt[1] / vt[2] * 100)) + '%'
: (vt[1] != 0 && vt[1] != null) && vt[2] == 0 : (vt[1] != 0 && vt[1] != null) && vt[2] == 0
? "100%" : '0%', ? "100%" : '0%',

View File

@ -1,17 +1,10 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-30 16:00:50 * @Date: 2024-05-30 16:00:50
* @LastEditTime: 2024-05-31 16:15:51 * @LastEditTime: 2024-06-03 16:26:03
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
<!--
filename: DoubleRingWrapper.vue
author: liubin
date: 2024-04-17 09:55:12
description:
-->
<template> <template>
<div class="double-ring-wrapper"> <div class="double-ring-wrapper">
<template> <template>

View File

@ -22,7 +22,7 @@ export default ({
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
fontWeight: 600, fontWeight: 600,
fontSize: 32, fontSize: 20,
color: "#fffd", color: "#fffd",
}, },
subtext: `\u2002${subtitle}\u2002`, subtext: `\u2002${subtitle}\u2002`,
@ -38,7 +38,7 @@ export default ({
{ {
type: "pie", type: "pie",
name: "当前目标", name: "当前目标",
radius: ["70%", "85%"], radius: ["80%", "90%"],
center: ["45%", "52%"], center: ["45%", "52%"],
emptyCircleStyle: { emptyCircleStyle: {
color: "#042c5f33", color: "#042c5f33",
@ -47,7 +47,7 @@ export default ({
// 数据 series // 数据 series
{ {
type: "pie", type: "pie",
radius: ["70%", "85%"], radius: ["80%", "90%"],
center: ["45%", "52%"], center: ["45%", "52%"],
avoidLabelOvervlap: false, avoidLabelOvervlap: false,
label: { label: {
@ -92,7 +92,7 @@ export default ({
// 数据 series2 - 2023累计 // 数据 series2 - 2023累计
{ {
type: "pie", type: "pie",
radius: ["55%", "70%"], radius: ["70%", "80%"],
center: ["45%", "52%"], center: ["45%", "52%"],
avoidLabelOvervlap: false, avoidLabelOvervlap: false,
label: { label: {