Reviewed-on: http://git.picaiba.com/mt-fe-group/yudao-init/pulls/29pull/40/head
@@ -1,8 +1,8 @@ | |||
### | |||
# @Author: zhp | |||
# @Date: 2024-04-28 13:42:51 | |||
# @LastEditTime: 2024-06-03 08:50:41 | |||
# @LastEditors: DY | |||
# @LastEditTime: 2024-06-03 15:41:29 | |||
# @LastEditors: zhp | |||
# @Description: | |||
### | |||
# 开发环境配置 | |||
@@ -13,11 +13,11 @@ VUE_APP_TITLE = 芋道管理系统 | |||
# 芋道管理系统/开发环境 | |||
# 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 | |||
# 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 | |||
@@ -4,16 +4,16 @@ function __resizeHandler(entries) { | |||
console.log(entries) | |||
for (const entry of entries) { | |||
if (entry.contentBoxSize) { | |||
// const contentBoxSize = Array.isArray(entry.contentBoxSize) | |||
// ? entry.contentBoxSize[0] | |||
// : entry.contentBoxSize; | |||
// this.chart_mixin_chartInstance.resize({ | |||
// width: | |||
// contentBoxSize.inlineSize < this.MIN_WIDTH | |||
// ? this.MIN_WIDTH | |||
// : contentBoxSize.inlineSize, | |||
// height: contentBoxSize.blockSize, | |||
// }); | |||
const contentBoxSize = Array.isArray(entry.contentBoxSize) | |||
? entry.contentBoxSize[0] | |||
: entry.contentBoxSize; | |||
this.chart_mixin_chartInstance.resize({ | |||
width: | |||
contentBoxSize.inlineSize < this.MIN_WIDTH | |||
? this.MIN_WIDTH | |||
: contentBoxSize.inlineSize, | |||
height: contentBoxSize.blockSize, | |||
}); | |||
} else { | |||
// manipulate contentRect | |||
this.chart_mixin_chartInstance.resize({ | |||
@@ -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`, | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-20 16:04:18 | |||
* @LastEditTime: 2024-05-31 13:16:26 | |||
* @LastEditTime: 2024-06-03 15:45:58 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -95,13 +95,14 @@ export default { | |||
</script> | |||
<style> | |||
.copilot-layout { | |||
padding: 16px; | |||
background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat; | |||
position: absolute; | |||
left: -16px; | |||
/* top: -8px; */ | |||
height: calc(100% + 240px); | |||
height: calc(100% + 30px); | |||
width: calc(100% + 30px); | |||
z-index: 1001; | |||
color: #fff; | |||
@@ -110,12 +111,12 @@ export default { | |||
gap: 8px; | |||
} | |||
.produce{ | |||
/* .produce{ | |||
height: calc(100% + 38px); | |||
} | |||
.other { | |||
} */ | |||
/* .other { */ | |||
/* height: calc(100% + 240px); */ | |||
} | |||
/* } */ | |||
.copilot-footer { | |||
/** position: absolute; | |||
bottom: 10px; **/ | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-20 13:32:59 | |||
* @LastEditTime: 2024-05-31 15:05:20 | |||
* @LastEditTime: 2024-06-03 16:26:24 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -151,7 +151,7 @@ export default { | |||
]; | |||
} | |||
let titleValue = | |||
vt[1] != null && vt[2] !== 0 | |||
vt[1] != null && (vt[2] !== 0 && vt[2] !== undefined) | |||
? this.formatNumber((vt[1] / vt[2] * 100)) + '%' | |||
: (vt[1] != 0 && vt[1] != null) && vt[2] == 0 | |||
? "100%" : '0%', | |||
@@ -1,17 +1,10 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-30 16:00:50 | |||
* @LastEditTime: 2024-05-31 16:15:51 | |||
* @LastEditTime: 2024-06-03 16:26:03 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<!-- | |||
filename: DoubleRingWrapper.vue | |||
author: liubin | |||
date: 2024-04-17 09:55:12 | |||
description: | |||
--> | |||
<template> | |||
<div class="double-ring-wrapper"> | |||
<template> | |||
@@ -22,7 +22,7 @@ export default ({ | |||
textAlign: "center", | |||
textStyle: { | |||
fontWeight: 600, | |||
fontSize: 32, | |||
fontSize: 20, | |||
color: "#fffd", | |||
}, | |||
subtext: `\u2002${subtitle}\u2002`, | |||
@@ -38,7 +38,7 @@ export default ({ | |||
{ | |||
type: "pie", | |||
name: "当前目标", | |||
radius: ["70%", "85%"], | |||
radius: ["80%", "90%"], | |||
center: ["45%", "52%"], | |||
emptyCircleStyle: { | |||
color: "#042c5f33", | |||
@@ -47,7 +47,7 @@ export default ({ | |||
// 数据 series | |||
{ | |||
type: "pie", | |||
radius: ["70%", "85%"], | |||
radius: ["80%", "90%"], | |||
center: ["45%", "52%"], | |||
avoidLabelOvervlap: false, | |||
label: { | |||
@@ -92,7 +92,7 @@ export default ({ | |||
// 数据 series2 - 2023累计 | |||
{ | |||
type: "pie", | |||
radius: ["55%", "70%"], | |||
radius: ["70%", "80%"], | |||
center: ["45%", "52%"], | |||
avoidLabelOvervlap: false, | |||
label: { | |||