mt-fe-group/yudao-init
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改bug

Browse Source
This commit is contained in:
‘937886381’
2024-06-07 11:13:59 +08:00
parent 1e8d60696b
commit ef618a4abb
27 changed files with 643 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/views/copilot/factoryData/components/BarChartBase.vue
View File

@@ -4,19 +4,28 @@
<span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }">{{ item.label }}</span>
</div> -->
<div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
</div>
</template>
<script>
import { debounce } from "@/utils/debounce";
import * as echarts from "echarts";
// import CopilotButton from "./chartButton"
export default {
components: {
// CopilotButton,
},
name: "Energy",
props: {
// legend: {
// type: Array,
// required: true,
// },
type: {
type: String,
default:'目标产量'
},
energyCockpits: {
type: Array,
required: true,
@@ -27,6 +36,15 @@ export default {
isFullscreen: false,
actualOptions: null,
chart: "",
// obj:{
// seriesArr: [],
// targetProduceArr: [],
// planIn: [],
// acIn: [],
// acProduceArr: [],
// scrapNum: [],
// processNum: [],
// },
options: {
color: ["#FFD160", "#2760FF", "#12FFF5"],
grid: {
@@ -172,6 +190,9 @@ export default {
},
},
watch: {
type(val) {
},
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
// isFullscreen(val) {
// this.actualOptions.series.map((item) => {
@@ -228,23 +249,80 @@ export default {
}, 500)();
},
initChart() {
console.log("this.energyCockpits", this.energyCockpits);
let orderXAxis = ['目标产量', '计划投入量', '实际投入量', '实际产出量', '废品数量', '待再加工数量'];
// let n = 0;
let seriesArr = []
// let arr = []
// if (this.energyCockpits) {
// this.energyCockpits.forEach(ele => {
// arr.push()
// });
// }
seriesArr[0] = this.energyCockpits.length != 0 && this.energyCockpits[0].targetProduction ? this.energyCockpits[0].targetProduction :0
seriesArr[1] = this.energyCockpits.length != 0 && this.energyCockpits[0].plannedInvestment ? this.energyCockpits[0].plannedInvestment : 0
seriesArr[2] = this.energyCockpits.length != 0 && this.energyCockpits[0].actualInvestment ? this.energyCockpits[0].actualInvestment : 0
seriesArr[3] = this.energyCockpits.length != 0 && this.energyCockpits[0].actualProduction ? this.energyCockpits[0].actualProduction : 0
seriesArr[4] = this.energyCockpits.length != 0 && this.energyCockpits[0].wasteNum ? this.energyCockpits[0].wasteNum : 0
seriesArr[5] = this.energyCockpits.length != 0 && this.energyCockpits[0].reworkNum ? this.energyCockpits[0].reworkNum : 0
console.log(seriesArr);
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
const actualOptions = JSON.parse(JSON.stringify(this.options));
if (this.type === '目标产量') {
let orderXAxis = []
let targetProduceArr = []
if (this.energyCockpits) {
this.energyCockpits.forEach(ele => {
targetProduceArr.push(ele.targetProduction)
orderXAxis.push(ele.workOrderNumber)
});
}
actualOptions.xAxis.data = orderXAxis;
actualOptions.series[0].data = targetProduceArr;
// this.initChart(targetProduceArr, orderXAxis)
} else if (this.type === '计划投入') {
let orderXAxis = []
let planIn = []
if (this.energyCockpits) {
this.energyCockpits.forEach(ele => {
planIn.push(ele.plannedInvestment)
orderXAxis.push(ele.workOrderNumber)
});
}
actualOptions.xAxis.data = orderXAxis;
actualOptions.series[0].data = planIn;
} else if (this.type === '实际投入') {
let orderXAxis = []
let acIn = []
if (this.energyCockpits) {
this.energyCockpits.forEach(ele => {
acIn.push(ele.actualInvestment)
orderXAxis.push(ele.workOrderNumber)
});
}
actualOptions.xAxis.data = orderXAxis;
actualOptions.series[0].data = acIn;
} else if (this.type === '实际产出') {
let orderXAxis = []
let acProduceArr = []
if (this.energyCockpits) {
this.energyCockpits.forEach(ele => {
acProduceArr.push(ele.actualProduction)
orderXAxis.push(ele.workOrderNumber)
});
}
actualOptions.xAxis.data = orderXAxis;
actualOptions.series[0].data = acProduceArr;
} else if (this.type === '废品数量') {
let orderXAxis = []
let scrapNum = []
if (this.energyCockpits) {
this.energyCockpits.forEach(ele => {
scrapNum.push(ele.wasteNum)
orderXAxis.push(ele.workOrderNumber)
});
}
actualOptions.xAxis.data = orderXAxis;
actualOptions.series[0].data = scrapNum;
} else if (this.type === '待再加工') {
let orderXAxis = []
let processNum = []
if (this.energyCockpits) {
this.energyCockpits.forEach(ele => {
console.log(ele.reworkNum);
processNum.push(ele.reworkNum)
orderXAxis.push(ele.workOrderNumber)
});
}
actualOptions.xAxis.data = orderXAxis;
actualOptions.series[0].data = processNum;
}
// let seriesArr = [
// {
@@ -286,13 +364,7 @@ export default {
// }
// }
// }
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.xAxis.data = orderXAxis;
actualOptions.series[0].data = seriesArr;
// actualOptions.series[0].name = seriesArr[0].name;
// actualOptions.series[1].data = seriesArr[1].data;
// actualOptions.series[1].name = seriesArr[1].name;

10
src/views/copilot/factoryData/components/BarChartChipOEE.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-30 08:58:39
* @LastEditTime: 2024-06-05 09:15:03
* @LastEditTime: 2024-06-07 09:29:45
* @LastEditors: zhp
* @Description:
-->
@@ -106,7 +106,7 @@ export default {
},
series: [
{
name: "fto", // this.series[0].name,
name: "FTO", // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
@@ -296,7 +296,7 @@ export default {
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 1.3vw;
margin-right:1.2vw;
&::before {
content: "";
@@ -308,7 +308,9 @@ export default {
margin-right: 0.22vw;
}
}
.legend-item:nth-child(3) {
margin-left: 1vw;
}
.legend-item:nth-child(1):before {
background-color: #12f7f1;
}

16
src/views/copilot/factoryData/components/ChipOee.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-29 14:48:06
* @LastEditTime: 2024-05-30 10:54:00
* @LastEditTime: 2024-06-07 09:30:17
* @LastEditors: zhp
* @Description:
-->
@@ -41,7 +41,7 @@ export default {
},
data() {
// 城市数组的顺序必须是固定的
const cities = ["fto投入", "芯片产量", "标准组件产量"];
const cities = ["FTO投入", "芯片产量", "标准组件产量"];
return {
// xAxis: cities,
};
@@ -67,7 +67,7 @@ export default {
const year = new Date().getFullYear();
if (this.period === 1 && this.than === '同比') {
items = [
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
{ label: `${year-1}年${month}月${today}日`, color: "#12f7f1" },
{ label: `${month}月${today}日`, color: "#58adfa" },
];
} else if (this.period ===1 && this.than === '环比') {
@@ -77,7 +77,7 @@ export default {
];
} else if (this.period === 2 && this.than === '同比') {
items = [
{ label: `去年本周`, color: "#12f7f1" },
{ label: `${year-1}年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
];
} else if (this.period === 2 && this.than === '环比') {
@@ -87,7 +87,7 @@ export default {
];
} else if (this.period === 3 && this.than === '同比') {
items = [
{ label: `去年${month}月`, color: "#12f7f1" },
{ label: `${year-1}年${month}月`, color: "#12f7f1" },
{ label: `${month}月`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
@@ -172,7 +172,7 @@ function getTemplate(period, dataList, than) {
if (period === 1 && than === '同比') {
items = [
{
name: `去年${month}月${today}日`,
name: `${year-1}年${month}月${today}日`,
data: dataList ? dataList[0] : [],
},
{
@@ -196,7 +196,7 @@ function getTemplate(period, dataList, than) {
} else if (period === 2 && than === '同比') {
items = [
{
name: `去年本周`,
name: `${year-1}年本周`,
data: dataList ? dataList[0] : [],
},
{
@@ -220,7 +220,7 @@ function getTemplate(period, dataList, than) {
} else if (period === 3 && than === '同比') {
items = [
{
name: `去年${month}月`,
name: `${year-1}年${month}月`,
data: dataList ? dataList[0] : [],
},
{

26
src/views/copilot/factoryData/components/Order.vue
View File

@@ -8,7 +8,12 @@
<span class="title">工单情况</span>
<span class="line"></span>
</div>
<barChartBase :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase>
<div class="button-type" style="margin-left: auto;position: absolute;right: 1%;top: 57%;z-index: 999;">
<CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i"
:active="i === type" @click="() => $emit('update:type', i)" />
</div>
<barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart"
style="height: 0;flex:1"></barChartBase>
</div>
</div>
@@ -16,14 +21,18 @@
<script>
import { debounce } from "@/utils/debounce";
import barChartBase from './BarChartBase'
// import barChartBase from './BarChartBase'
import CopilotButton from "./chartButton"
export default {
name: "Order",
components: {
barChartBase,
CopilotButton,
},
data() {
return {
showTable: true,
// type: '目标产量',
config: {
header: ["工单号", "工单状态", "计划投入", "实际投入", "目标产量", "实际产量", "生产进度"],
headerBGC: "rgba(0, 106, 205, 0.22)",
@@ -39,6 +48,10 @@ export default {
};
},
props: {
type: {
type: String,
default: "目标产量",
},
prodOrder: {
type: Array,
default: [],
@@ -58,9 +71,18 @@ export default {
},
},
mounted() {
window.addEventListener("resize", this.tableReset);
window.addEventListener("resize", this.tableReset)
this.$nextTick(() => {
let button = document.getElementsByClassName('button-type')
console.log(button);
button[0].children[0].style.borderRadius = '4px 0 0 4px'
button[0].children[5].style.borderRadius = '0px 4px 4px 0px'
// children[5].classList.add('skate')
// console.log(button[0].children[5].classList);
});
},
methods: {
tableReset() {
this.showTable = false;
debounce(() => {

29
src/views/copilot/factoryData/components/ProdMonitor.vue
View File

@@ -8,11 +8,11 @@
</div>
<div class="middle-box">
<span class="type">玻璃类型</span>
<span class="type-name">FTO投入</span>
<span class="type-name">FTO</span>
</div>
<div class="right-box">
<span class="type">投入数量</span>
<span class="num">{{ prodFto[0] ? prodFto[0].chipInput : 0 }}</span>
<span class="num">{{ prodFto[0] ? prodFto[0].chipInput.toLocaleString() : 0 }}</span>
</div>
</div>
<div class="std-box">
@@ -23,12 +23,12 @@
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">标准组件产量</span>
<span class="type-name">标准组件</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
@@ -38,12 +38,12 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span>
<span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate.toFixed(2) : 0 }}%</span>
</div>
</div>
</div>
@@ -56,12 +56,12 @@
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">芯片产量</span>
<span class="type-name">芯片</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
@@ -71,12 +71,12 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span>
<span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate.toFixed(2) : 0 }}%</span>
</div>
</div>
</div>
@@ -89,12 +89,12 @@
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">BIPV产量</span>
<span class="type-name">BIPV</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
@@ -104,12 +104,12 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span>
<span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate.toFixed(2) : 0 }}%</span>
</div>
</div>
</div>
@@ -129,7 +129,6 @@
<script>
import { number } from 'echarts';
import barChartBase from './ChipOee'
export default {
name: "ProdMonitor",
components: {

99
src/views/copilot/factoryData/components/button.vue Normal file
View File

@@ -0,0 +1,99 @@
<!--
* @Author: zhp
* @Date: 2024-06-06 14:22:56
* @LastEditTime: 2024-06-07 10:53:39
* @LastEditors: zhp
* @Description:
-->
<template>
<button
class="copilot-btn"
:class="[active ? 'active' : '']"
@click="$emit('click', label)"
>
{{ label }}
</button>
</template>
<script>
export default {
name: "CopilotButton",
props: {
label: {
type: String,
required: true,
},
active: {
type: Boolean,
default: false,
},
},
};
</script>
<style>
button {
appearance: none;
outline: none;
border: none;
background: none;
}
</style>
<style scoped>
.copilot-btn {
/* flex: 1; */
/* position: relative; */
width: 88px;
height: 32px;
background: #01306C;
/* border-radius: 4px 0px 0px 4px; */
backdrop-filter: blur(3px);
/* text-align: center;
padding: 12px;
padding-left: 20px;
color: #fff;
font-size: 18px; */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;
text-align: center;
font-style: normal;
letter-spacing: 10px;
cursor: pointer;
}
.copilot-btn.active {
background: #1D74D8;
/* border-radius: 4px;; */
}
/* .copilot-btn::before,
.copilot-btn::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
background: transparent;
border-style: solid;
border-width: 2px;
border-color: transparent;
border-top-color: #007be4;
}
.copilot-btn::before {
left: 0;
border-left-color: #007be4;
}
.copilot-btn::after {
right: 0;
border-right-color: #007be4;
} */
</style>

148
src/views/copilot/factoryData/components/chartButton.vue Normal file
View File

@@ -0,0 +1,148 @@
<!--
* @Author: zhp
* @Date: 2024-06-07 08:37:17
* @LastEditTime: 2024-06-07 11:04:41
* @LastEditors: zhp
* @Description:
-->
<template>
<button
class="chart-btn"
:class="[active ? 'active' : '']"
@click="$emit('click', label)"
>
{{ label }}
</button>
</template>
<script>
export default {
name: "CopilotButton",
props: {
label: {
type: String,
required: true,
},
active: {
type: Boolean,
default: false,
},
},
mounted() {
},
};
</script>
<style>
button {
appearance: none;
outline: none;
border: none;
background: none;
}
</style>
<style scoped>
.skate {
/* flex: 1; */
position: relative;
width: 88px;
height: 32px;
background: #01306C;
/* border-radius: 4px 0px 0px 4px; */
backdrop-filter: blur(3px);
/* text-align: center;
padding: 12px;
padding-left: 20px;
color: #fff;
font-size: 18px; */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;
text-align: center;
font-style: normal;
/* margin-right: 1px; */
/* letter-spacing: 10px; */
cursor: pointer;
}
.chart-btn:nth-child(6)::after {
content: '';
width: 0;
height: 0;
display: none;
}
.chart-btn {
/* flex: 1; */
position: relative;
width: 88px;
height: 32px;
background: #01306C;
/* border-radius: 4px 0px 0px 4px; */
backdrop-filter: blur(3px);
/* text-align: center;
padding: 12px;
padding-left: 20px;
color: #fff;
font-size: 18px; */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;
text-align: center;
font-style: normal;
/* margin-right: 1px; */
/* letter-spacing: 10px; */
cursor: pointer;
}
.chart-btn::after {
/* flex: 1; */
/* position: relative; */
content: "";
position: absolute;
/* width: 16px; */
/* height: 16px; */
top: px;
right: -1px;
width: 1px;
height: 23px;
border: 1px solid #010D18;
}
.chart-btn.active {
background: #1D74D8;
/* border-radius: 4px;; */
}
.chart-btn.active::after {
display: none;
/* border-radius: 4px;; */
}
/* .copilot-btn::before,
.copilot-btn::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
background: transparent;
border-style: solid;
border-width: 2px;
border-color: transparent;
border-top-color: #007be4;
}
.copilot-btn::before {
left: 0;
border-left-color: #007be4;
}
.copilot-btn::after {
right: 0;
border-right-color: #007be4;
} */
</style>

67
src/views/copilot/factoryData/components/rightContainer.vue
View File

@@ -8,9 +8,7 @@
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button
v-if="false"
style="
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
@@ -20,54 +18,44 @@
position: absolute;
top: 8px;
right: 8px;
"
@click="$emit('refresh')"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 24px; height: 24px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div
class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<div class="container-head" ref="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
<div class="button-than" style="margin-left: auto;">
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
@click="() => $emit('update:than', i)" />
</div>
</div>
<div
class="container-body"
:class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]"
>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
import ContainerIconVue from "./ContainerIcon.vue"
import CopilotButton from "./button.vue"
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
CopilotButton
},
props: {
side: {
@@ -78,15 +66,28 @@ export default {
type: String,
default: "cube",
},
than: {
type: String,
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
return {
};
},
computed: {},
mounted() {
this.$nextTick(() => {
let button = document.getElementsByClassName('button-than')
console.log(button);
button[0].children[0].style.borderRadius = '4px 0 0 4px'
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
console.log(button[0].children[0].style);
})
},
methods: {},
};
</script>