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

产量和效率

Browse Source
This commit is contained in:
‘937886381’
2024-05-29 17:05:55 +08:00
parent 5c05e6c2e4 ab4d7a8e4b
commit dc1667cdb7
83 changed files with 17006 additions and 10610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

399
src/views/copilot/factoryData/components/BarChartBase.vue Normal file
View File

@@ -0,0 +1,399 @@
<template>
<div class="left-chart-base">
<!-- <div class="legend">
<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";
export default {
name: "Energy",
props: {
// legend: {
// type: Array,
// required: true,
// },
energyCockpits: {
type: Array,
required: true,
},
},
data() {
return {
isFullscreen: false,
actualOptions: null,
chart: "",
options: {
color: ["#FFD160", "#2760FF", "#12FFF5"],
grid: {
left: "7%",
right: "7%",
bottom: "8%",
top: "15%",
},
tooltip: {
trigger: "axis",
},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#4561AE",
},
},
axisLabel: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
},
data: [],
},
yAxis: {
type: "value",
name: "单位/片",
nameTextStyle: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#4561AE",
},
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
},
series: [
// {
// name: "",
// data: [],
// type: "line",
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "#FFD160" + "80" },
// { offset: 0.5, color: "#FFD160" + "20" },
// { offset: 1, color: "#FFD160" + "00" },
// ]),
// },
// lineStyle: {
// width: 2,
// },
// symbol: "circle",
// symbolSize: 8,
// emphasis: {
// focus: "series",
// },
// },
// {
// name: "",
// data: [],
// type: "line",
// yAxisIndex: 1,
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "#2760FF" + "80" },
// { offset: 0.5, color: "#2760FF" + "20" },
// { offset: 1, color: "#2760FF" + "00" },
// ]),
// },
// lineStyle: {
// width: 2,
// },
// symbol: "circle",
// symbolSize: 8,
// emphasis: {
// focus: "series",
// },
// },
{
name: "",
data: [],
type: "bar",
// yAxisIndex: 1,
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "#12FFF5" + "80" },
// { offset: 0.5, color: "#12FFF5" + "20" },
// { offset: 1, color: "#12FFF5" + "00" },
// ]),
// },
barWidth: '18',
itemStyle: {
// barWidth: 2,
color: '#12FFF5'
},
symbol: "circle",
symbolSize: 8,
emphasis: {
focus: "series",
},
},
],
},
};
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
// 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.initOptions(this.actualOptions);
// },
// series(val) {
// if (!val) {
// this.initOptions(this.options);
// return;
// }
// const actualOptions = JSON.parse(JSON.stringify(this.options));
// actualOptions.series[0].data = val[0].data;
// actualOptions.series[0].name = val[0].name;
// actualOptions.series[1].data = val[1].data;
// actualOptions.series[1].name = val[1].name;
// actualOptions.series[2].data = val[2].data;
// actualOptions.series[2].name = val[2].name;
// this.actualOptions = actualOptions;
// this.initOptions(actualOptions);
// },
energyCockpits() {
this.initChart();
},
isOpen(val) {
this.canvasReset();
},
},
mounted() {
// if (screenfull.isEnabled) {
// screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen;
// });
// }
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
let orderXAxis = ['目标产量', '计划投入量', '实际投入量', '实际产出量', '废品数量', '待再加工数量'];
// let n = 0;
let seriesArr =[]
seriesArr[0] = this.energyCockpits[0].targetProduction ? this.energyCockpits[0].targetProduction :0
seriesArr[1] = this.energyCockpits[0].plannedInvestment ? this.energyCockpits[0].plannedInvestment : 0
seriesArr[2] = this.energyCockpits[0].actualInvestment ? this.energyCockpits[0].actualInvestment : 0
seriesArr[3] = this.energyCockpits[0].actualProduction ? this.energyCockpits[0].actualProduction : 0
seriesArr[4] = this.energyCockpits[0].wasteNum ? this.energyCockpits[0].wasteNum : 0
seriesArr[5] = this.energyCockpits[0].reworkNum ? this.energyCockpits[0].reworkNum : 0
console.log(seriesArr);
// let seriesArr = [
// {
// name: "水",
// energyType: 1,
// data: [],
// },
// {
// name: "电",
// energyType: 2,
// data: [],
// },
// {
// name: "气",
// energyType: 3,
// data: [],
// },
// ];
// if (this.energyCockpits.length > 0) {
// let dataArr = this.energyCockpits.map((item) => {
// return item.groupName;
// });
// energyxAxis = Array.from(new Set(dataArr));
// n = energyxAxis.length;
// seriesArr[0].data = Array.from({ length: n }, () => 0);
// seriesArr[1].data = Array.from({ length: n }, () => 0);
// seriesArr[2].data = Array.from({ length: n }, () => 0);
// for (let i = 0; i < this.energyCockpits.length; i++) {
// for (let j = 0; j < energyxAxis.length; j++) {
// if (this.energyCockpits[i].groupName === energyxAxis[j]) {
// if (this.energyCockpits[i].energyType === 1) {
// seriesArr[0].data[j] = this.energyCockpits[i].totalEnergyValue;
// } else if (this.energyCockpits[i].energyType === 2) {
// seriesArr[1].data[j] = this.energyCockpits[i].totalEnergyValue;
// } else if (this.energyCockpits[i].energyType === 3) {
// seriesArr[2].data[j] = this.energyCockpits[i].totalEnergyValue;
// }
// }
// }
// }
// }
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;
// actualOptions.series[2].data = seriesArr[2].data;
// actualOptions.series[2].name = seriesArr[2].name;
this.actualOptions = actualOptions;
this.chart.setOption(actualOptions);
},
},
};
</script>
<style scoped lang="scss">
.left-chart-base {
// position: relative;
height: 100%;
.legend {
position: absolute;
top: 5.2vh;
right: 4vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 1.34vw;
&::before {
content: "";
display: inline-block;
// width: 10px;
// height: 10px;
width: 0.531vw;
height: 0.531vw;
background-color: #ccc;
border-radius: 2px;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 0.638vw;
height: 0.1064vw;
background-color: #ffd160;
position: absolute;
top: 50%;
// left: -16px;
left: -0.851vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):after {
background-color: #ffd160;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(2):before {
// width: 12px;
// height: 2px;
width: 0.638vw;
height: 0.1064vw;
background-color: #2760ff;
position: absolute;
top: 50%;
// left: -16px;
left: -0.851vw;
transform: translateY(-50%);
}
.legend-item:nth-child(2):after {
background-color: #2760ff;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(3):before {
// width: 12px;
// height: 2px;
width: 0.638vw;
height: 0.1064vw;
background-color: #12fff5;
position: absolute;
top: 50%;
// left: -16px;
left: -0.851vw;
transform: translateY(-50%);
}
.legend-item:nth-child(3):after {
background-color: #12fff5;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
}
</style>