mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

生产管理

Browse Source
This commit is contained in:
‘937886381’
2025-10-24 11:19:34 +08:00
parent 463706663a
commit f11dfe04d5
29 changed files with 5927 additions and 1303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/views/home/components/Count.vue
View File

@@ -3,16 +3,17 @@
<div class='count-box'>
<div class='count-tip-box'>
<div class='item'>
<p class='num'>2,344</p>
<p class='num'> {{ totalDownLoadNumClass ? totalDownLoadNumClass : 0}}</p>
<p class='title'>本班合计</p>
</div>
<div class='split'></div>
<div class='item'>
<p class='num'>2,344</p>
<p class='num'>{{ totalDownLoadNumDay ? totalDownLoadNumDay : 0 }} </p>
<p class='title'>本日合计</p>
</div>
</div>
<dv-scroll-board :config="config" style="width:580px;height:180px;margin-top: 10px;" class='count-table'/>
<dv-scroll-board ref="locationScrollBoardTable" :config="config" style="width:580px;height:180px;margin-top: 10px;"
class='count-table' />
<span class='split-line' style='left: 70px;'></span>
<span class='split-line' style='left: 195px;'></span>
<span class='split-line' style='left: 320px;'></span>
@@ -26,9 +27,64 @@ export default {
name: 'Count',
components: {
ModelBox
},
props: {
dataObj: {
type: Array,
default: () => []
}
},
watch: {
dataObj: {
handler(newVal, oldVal) {
console.log(newVal, 'newVal');
if (newVal) {
this.totalGlassNum = 0;
this.tableData = [];
// 累加所有项目的downLoadNumDay
this.totalDownLoadNumDay = 0;
this.totalDownLoadNumClass = 0
// 遍历每条产线数据
newVal.forEach(item => {
// 计算当前项目的glassNum总和
const glassArray = JSON.parse(item.glassNum);
const itemGlassSum = glassArray.reduce((sum, num) => sum + num, 0);
this.tableData.push({
lineName: item.lineName,
glassSum: itemGlassSum,
downLoadNumDay:item.downLoadNumDay,
downLoadNumClass: item.downLoadNumClass
});
// 累加downLoadNumDay
this.totalDownLoadNumDay += item.downLoadNumDay;
this.totalDownLoadNumClass += item.downLoadNumClass;
});
let eqArr = this.tableData.map((item, index) => [
`<span style="color:#000;" >${index+1 || ''}
</span>`,
`<span style="color:#000;" >${item.lineName || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:#000;" >${item.downLoadNumClass || ''}
</span>`,
`<span style="color:#000;">${item.downLoadNumDay || ''}</span>`,
`<span style="color:#000;">${item.glassSum || ''}</span>`,
])
this.config.data = eqArr
this.$refs['locationScrollBoardTable'].updateRows(eqArr)
}
// this.getChart(this.todayClass)
},
deep: true // 深度监听
}
},
data() {
return {
totalDownLoadNumDay: 0,
totalDownLoadNumClass:0,
config:{
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">产线</span>', '<span style="color:#000;">本班</span>', '<span style="color:#000;">本日</span>', '<span style="color:#000;">一托玻璃数量</span>'],
headerHeight: 30,
@@ -39,11 +95,6 @@ export default {
columnWidth: [70, 125, 125, 125, 130],
align : ['center', 'center', 'center', 'center', 'center'],
data: [
['<span style="color:#000;">1</span>', '<span style="color:#000;">A1</span>', '<span style="color:#000;">23</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>'],
['<span style="color:#000;">2</span>', '<span style="color:#000;">A2</span>', '<span style="color:#000;">13</span>', '<span style="color:#000;">234</span>','<span style="color:#000;">234</span>'],
['<span style="color:#000;">3</span>', '<span style="color:#000;">A3</span>', '<span style="color:#000;">24</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>'],
['<span style="color:#000;">4</span>', '<span style="color:#000;">A4</span>', '<span style="color:#000;">45</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>'],
['<span style="color:#000;">5</span>', '<span style="color:#000;">A5</span>', '<span style="color:#000;">55</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>']
]
}
}
@@ -98,4 +149,4 @@ export default {
}
}
</style>
</style>

62
src/views/home/components/EqAlarm.vue
View File

@@ -1,7 +1,7 @@
<template>
<ModelBox name='1-2'>
<div class='eq-alarm'>
<dv-scroll-board :config="config" style="width:580px;height:250px;margin-top: 10px;" />
<dv-scroll-board ref='locationScrollBoard' :config="config" style="width:580px;height:250px;margin-top: 10px;" />
<span class='split-line' style='left: 66px;'></span>
<span class='split-line' style='left: 226px;'></span>
<span class='split-line' style='left: 366px;'></span>
@@ -15,8 +15,39 @@ export default {
components: {
ModelBox
},
props: {
dataObj: {
type: Array,
default: () => []
}
},
watch: {
dataObj: {
handler(newVal, oldVal) {
console.log(newVal, 'newVal');
if (newVal) {
this.tableData = newVal
let eqArr = this.tableData.map((item, index) => [
`<span style="color:#000;" >${index + 1 || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:#000;" >${this.formatDate(item.time) || ''}
</span>`,
`<span style="color:#000;">${item.equipmentName || ''}</span>`,
`<span style="color:#000;">${item.content || ''}</span>`,
])
this.config.data = eqArr
this.$refs['locationScrollBoard'].updateRows(eqArr)
}
// this.getChart(this.todayClass)
},
deep: true // 深度监听
}
},
data() {
return {
tableData:[],
config:{
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">报警时间</span>', '<span style="color:#000;">报警设备</span>', '<span style="color:#000;">报警内容</span>'],
headerHeight: 25,
@@ -27,14 +58,6 @@ export default {
columnWidth: [66, 160, 140, 214],
align : ['center', 'center', 'center', 'center'],
data: [
['<span style="color:#000;">1</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-1打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
['<span style="color:#000;">2</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
['<span style="color:#000;">3</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
['<span style="color:#000;">4</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
['<span style="color:#000;">5</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
['<span style="color:#000;">6</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
['<span style="color:#000;">7</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
['<span style="color:#000;">8</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>']
]
}
}
@@ -42,6 +65,25 @@ export default {
methods: {
init() {
},
formatDate(time) {
if (!time) return '';
// 如果是时间戳格式
if (typeof time === 'number' || !isNaN(time)) {
const date = new Date(parseInt(time));
return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
}
// 如果是ISO字符串格式
if (typeof time === 'string') {
const date = new Date(time);
if (!isNaN(date.getTime())) {
return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
}
}
return time;
}
}
}
@@ -57,4 +99,4 @@ export default {
background: #CDD3DF;
}
}
</style>
</style>

198
src/views/home/components/LineInpurAndOutput.vue
View File

@@ -3,7 +3,7 @@
<div class='line-container'>
<div class='table-box'>
<div class='title'>本班次</div>
<dv-scroll-board :config="config" style="width:600px;height:242px;margin-top: 10px;"/>
<dv-scroll-board ref="classToday" :config="classConfig" style="width:600px;height:242px;margin-top: 10px;" />
<span class='split-line' style='left: 66px;'></span>
<span class='split-line' style='left: 186px;'></span>
<span class='split-line' style='left: 311px;'></span>
@@ -11,7 +11,7 @@
</div>
<div class='table-box'>
<div class='title'>本日</div>
<dv-scroll-board :config="config" style="width:600px;height:242px;margin-top: 10px;"/>
<dv-scroll-board ref="day" :config="dayConfig" style="width:600px;height:242px;margin-top: 10px;" />
<span class='split-line' style='left: 66px;'></span>
<span class='split-line' style='left: 186px;'></span>
<span class='split-line' style='left: 311px;'></span>
@@ -19,7 +19,7 @@
</div>
<div class='table-box'>
<div class='title'>本周</div>
<dv-scroll-board :config="config" style="width:600px;height:242px;margin-top: 10px;"/>
<dv-scroll-board ref="week" :config="weekConfig" style="width:600px;height:242px;margin-top: 10px;" />
<span class='split-line' style='left: 66px;'></span>
<span class='split-line' style='left: 186px;'></span>
<span class='split-line' style='left: 311px;'></span>
@@ -27,7 +27,7 @@
</div>
<div class='table-box'>
<div class='title'>本月</div>
<dv-scroll-board :config="config" style="width:600px;height:242px;margin-top: 10px;"/>
<dv-scroll-board ref="month" :config="monthConfig" style="width:600px;height:242px;margin-top: 10px;" />
<span class='split-line' style='left: 66px;'></span>
<span class='split-line' style='left: 186px;'></span>
<span class='split-line' style='left: 311px;'></span>
@@ -43,9 +43,105 @@ export default {
components: {
ModelBox
},
props: {
dataObj: {
type: Object,
default: () => {}
}
},
watch: {
dataObj: {
handler(newVal, oldVal) {
console.log(newVal, 'newVal');
if (newVal) {
this.nowMonth = newVal.todayClass ? newVal.nowMonth.map((item, index) => [
`<span style="color:#000;" >${index + 1 || ''}
</span>`,
`<span style="color:#000;" >${item.name || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:#000;" >${item.inputNum || ''}
</span>`,
`<span style="color:#000;">${item.outputNum || ''}</span>`,
`<div style="width:136px; margin:0px;">
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
</div>
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
</div>`,
]) : []
this.monthConfig.data = this.nowMonth
this.$refs['month'].updateRows(this.nowMonth)
this.nowWeek = newVal.nowWeek ? newVal.nowWeek.map((item, index) => [
`<span style="color:#000;" >${index + 1 || ''}
</span>`,
`<span style="color:#000;" >${item.name || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:#000;" >${item.inputNum || ''}
</span>`,
`<span style="color:#000;">${item.outputNum || ''}</span>`,
`<div style="width:136px; margin:0px;">
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
</div>
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
</div>`,
]) : []
this.weekConfig.data = this.nowWeek
this.$refs['week'].updateRows(this.nowWeek)
this.oneDay = newVal.oneDay ? newVal.oneDay.map((item, index) => [
`<span style="color:#000;" >${index + 1 || ''}
</span>`,
`<span style="color:#000;" >${item.name || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:#000;" >${item.inputNum || ''}
</span>`,
`<span style="color:#000;">${item.outputNum || ''}</span>`,
`<div style="width:136px; margin:0px;">
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
</div>
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
</div>`,
]) : []
this.dayConfig.data = this.oneDay
this.$refs['day'].updateRows(this.oneDay)
this.todayClass = newVal.todayClass ? newVal.todayClass.map((item, index) => [
`<span style="color:#000;" >${index + 1 || ''}
</span>`,
`<span style="color:#000;" >${item.name || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:#000;" >${item.inputNum || ''}
</span>`,
`<span style="color:#000;">${item.outputNum || ''}</span>`,
`<div style="width:136px; margin:0px;">
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
</div>
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
</div>`,
]) : []
this.classConfig.data = this.todayClass
this.$refs['classToday'].updateRows(this.todayClass)
}
},
deep: true // 深度监听
}
},
data() {
return {
config:{
nowMonth: [],
nowWeek: [],
oneDay: [],
todayClass: [],
classConfig:{
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>','<span style="color:#000;">产出率/%</span>'],
headerHeight: 25,
headerBGC: '#E8EDF8',
@@ -55,41 +151,75 @@ export default {
columnWidth: [66, 120, 125, 126, 174],
align : ['center', 'center', 'center', 'center', 'center'],
data: []
},
monthConfig: {
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>', '<span style="color:#000;">产出率/%</span>'],
headerHeight: 25,
headerBGC: '#E8EDF8',
oddRowBGC: '#E8EDF8',
evenRowBGC: '#fff',
rowNum: 8,
columnWidth: [66, 120, 125, 126, 174],
align: ['center', 'center', 'center', 'center', 'center'],
data: []
},
dayConfig: {
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>', '<span style="color:#000;">产出率/%</span>'],
headerHeight: 25,
headerBGC: '#E8EDF8',
oddRowBGC: '#E8EDF8',
evenRowBGC: '#fff',
rowNum: 8,
columnWidth: [66, 120, 125, 126, 174],
align: ['center', 'center', 'center', 'center', 'center'],
data: []
},
weekConfig: {
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>', '<span style="color:#000;">产出率/%</span>'],
headerHeight: 25,
headerBGC: '#E8EDF8',
oddRowBGC: '#E8EDF8',
evenRowBGC: '#fff',
rowNum: 8,
columnWidth: [66, 120, 125, 126, 174],
align: ['center', 'center', 'center', 'center', 'center'],
data: []
}
}
},
mounted() {
this.getData()
this.getData()
},
methods: {
getData() {
let arr1 = []
let arr2 = []
let data = [
[1,'A1-磨边',234344,234333,100],
[2,'A1-磨边',234344,234333,10],
[3,'A1-磨边',234344,234333,96],
[4,'A1-磨边',234344,234333,20],
[5,'A1-磨边',234344,234333,40],
[6,'A1-磨边',234344,234333,90],
[7,'A1-磨边',234344,234333,80],
[8,'A1-磨边',234344,234333,80],
]
for (let i =0; i < data.length; i++) {
arr1.push(`<span style="color:#000;">${data[i][0]}</span>`)
arr1.push(`<span style="color:#000;">${data[i][1]}</span>`)
arr1.push(`<span style="color:#000;">${data[i][2]}</span>`)
arr1.push(`<span style="color:#000;">${data[i][3]}</span>`)
arr1.push(`<div style="width:136px; margin:0px;">
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
<div style="width:${data[i][4]}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
</div>
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${data[i][4]}%</span>
</div>`)
arr2.push(arr1)
arr1 = []
}
this.config.data = arr2
// let arr1 = []
// let arr2 = []
// let data = [
// [1,'A1-磨边',234344,234333,100],
// [2,'A1-磨边',234344,234333,10],
// [3,'A1-磨边',234344,234333,96],
// [4,'A1-磨边',234344,234333,20],
// [5,'A1-磨边',234344,234333,40],
// [6,'A1-磨边',234344,234333,90],
// [7,'A1-磨边',234344,234333,80],
// [8,'A1-磨边',234344,234333,80],
// ]
// for (let i =0; i < data.length; i++) {
// arr1.push(`<span style="color:#000;">${data[i][0]}</span>`)
// arr1.push(`<span style="color:#000;">${data[i][1]}</span>`)
// arr1.push(`<span style="color:#000;">${data[i][2]}</span>`)
// arr1.push(`<span style="color:#000;">${data[i][3]}</span>`)
// arr1.push(`<div style="width:136px; margin:0px;">
// <div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
// <div style="width:${data[i][4]}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
// </div>
// <span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${data[i][4]}%</span>
// </div>`)
// arr2.push(arr1)
// arr1 = []
// }
// this.config.data = arr2
}
}
}
@@ -127,4 +257,4 @@ export default {
}
}
}
</style>
</style>

149
src/views/home/components/LineRate.vue
View File

@@ -22,19 +22,38 @@ export default {
data() {
return {
legendArr:[
{color:'#FFCE6A', name:'A1'},
{color:'#21CECD', name:'A2'},
{color:'#77B4FD', name:'A3'},
{color:'#29BDFA', name:'A4'},
{color:'#5A7DDA', name:'A5'},
{color:'#FFB49D', name:'A6'},
{color:'#C5A6FC', name:'A7'},
{color:'#7164FF', name:'A8'},
{color:'#98B0C7', name:'A9'},
{color:'#5D7092', name:'A10'}
]
}
},
watch: {
dataObj: {
handler(newVal, oldVal) {
console.log(newVal, 'newVal');
if (newVal) {
let xData = []
newVal.forEach(ele => {
xData.push(this.formatDate(ele.time))
});
// console.log(, 'xData');
const series = this.convertToSeries(newVal)
this.getChart([...new Set(xData)], series)
// this.nowMonth = newVal.nowMonth ? newVal.nowMonth : []
// this.nowWeek = newVal.nowWeek ? newVal.nowWeek : []
// this.oneDay = newVal.oneDay ? newVal.oneDay : []
// this.todayClass = newVal.todayClass ? newVal.todayClass : []
}
// this.getChart(this.todayClass)
},
deep: true, // 深度监听
immediate: true
},
},
props: {
dataObj: {
type: Array,
default: () => []
}
},
mounted() {
this.getChart()
},
@@ -42,7 +61,69 @@ export default {
init() {
},
getChart() {
formatDate(time) {
if (!time) return '';
// 如果是时间戳格式
if (typeof time === 'number' || !isNaN(time)) {
const date = new Date(parseInt(time));
return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
}
// 如果是ISO字符串格式
if (typeof time === 'string') {
const date = new Date(time);
if (!isNaN(date.getTime())) {
return `$${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
}
}
return time;
},
convertToSeries(data) {
this.legendArr = []
// 1. 按产线ID分组
const colorArr = ['#FFCE6A', '#21CECD', '#77B4FD', '#29BDFA', '#5A7DDA', '#FFB49D', '#C5A6FC', '#7164FF', '#98B0C7', '#5D7092']
const grouped = {};
data.forEach(item => {
if (!grouped[item.id]) {
grouped[item.id] = {
id: item.id,
name: item.name,
data: []
};
}
// 将数据存入对应产线，并保留时间信息用于排序
grouped[item.id].data.push({
value: item.inputOutputRate,
time: item.time
});
});
// 2. 转换为series格式，并按时间排序数据点
// let legendArr= []
return Object.values(grouped)
.sort((a, b) => a.id - b.id) // 按产线ID排序
.map((line,index) => {
// 按时间排序每个产线的数据点
line.data.sort((a, b) => a.time - b.time);
this.legendArr.push({
name: line.name, // 产线名称（与series.name一致）
color: colorArr[index] // 匹配colorArr中对应索引的颜色
});
// 提取value作为数据，保持ECharts series格式
return {
name: line.name,
type: 'line',
symbol: 'circle',
symbolSize: 6,
data: line.data.map(item => item.value)
};
});
},
getChart(xData, series) {
var chartDom = document.getElementById('lineRate');
var myChart = echarts.init(chartDom);
var option;
@@ -67,7 +148,7 @@ export default {
color: 'rgba(0,0,0,0.45)'
}
},
data: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
data: xData ? xData: [],
},
yAxis: {
type: 'value',
@@ -81,43 +162,7 @@ export default {
}
}
},
series: [
{
name: 'A1',
type: 'line',
symbol: 'circle',
symbolSize: 6,
data: [82, 13, 10, 33, 90, 23, 71]
},
{
name: 'A2',
type: 'line',
symbol: 'circle',
symbolSize: 6,
data: [22, 38, 59, 23, 99, 33, 31]
},
{
name: 'A3',
type: 'line',
symbol: 'circle',
symbolSize: 6,
data: [15, 43, 20, 95, 89, 33, 41]
},
{
name: 'A4',
type: 'line',
symbol: 'circle',
symbolSize: 6,
data: [32, 33, 30, 33, 39, 33, 32]
},
{
name: 'A5',
type: 'line',
symbol: 'circle',
symbolSize: 6,
data: [82, 93, 90, 93, 29, 33, 32]
}
]
series: series ? series: []
};
option && myChart.setOption(option);
}
@@ -128,7 +173,7 @@ export default {
.line-rate {
position: relative;
.legend-box {
width: 280px;
width: 340px;
height: 35px;
position: absolute;
right: 0;
@@ -136,7 +181,7 @@ export default {
display: flex;
flex-flow: row wrap;
.legend-item {
width: 55px;
width: 100px;
.dot {
display: inline-block;
width: 8px;
@@ -162,4 +207,4 @@ export default {
}
}
}
</style>
</style>

176
src/views/home/components/LossSum.vue
View File

@@ -18,14 +18,115 @@ export default {
},
data() {
return {
nowMonth:[],
nowWeek: [],
oneDay: [],
todayClass: []
}
},
props: {
dataObj: {
type: Object,
default: () => {}
}
},
mounted() {
this.getChart()
// this.getChart()
},
watch: {
dataObj: {
handler(newVal, oldVal) {
console.log(newVal,'newVal');
if (newVal) {
this.nowMonth = newVal.nowMonth ? newVal.nowMonth : []
this.nowWeek = newVal.nowWeek ? newVal.nowWeek : []
this.oneDay = newVal.oneDay ? newVal.oneDay :[]
this.todayClass = newVal.todayClass ? newVal.todayClass : []
}
this.getChart(this.todayClass)
},
deep: true // 深度监听
}
},
methods: {
getChart() {
getChart(val) {
console.log(val, 'val');
let series = []
const lineNames = [...new Set(val.map(item => item.lineName))].sort();
// const types = [...new Set(val.map(item => item.type))].sort();
// lineNames.forEach(lineName => {
// series.push({
// name: lineName,
// type: 'bar',
// barGap: '30%',
// barWidth: 15,
// data: []
// });
// });
const types = ['上片', '磨边', '打孔', '丝印', '镀膜', '钢化', '包装']
const typeMap = { 1: '上片', 2: '磨边', 3: '打孔',4:'丝印', 5: '镀膜', 6: '钢化', 7: '包装' };
types.forEach(typeName => {
series.push({
name: typeName,
type: 'bar',
barGap: '30%',
barWidth: 15,
data: []
});
});
types.forEach((type, index) => {
const typeValue = parseInt(Object.keys(typeMap).find(key => typeMap[key] === type));
console.log(typeValue,'typeValue');
const itemSeries = series.find(s => s.name === type);
lineNames.forEach(lineName => {
const item = val.find(d => d.lineName === lineName && d.type === typeValue);
if (item) {
itemSeries.data.push(item.lossNum);
} else {
// 如果没有数据，添加0
itemSeries.data.push(0);
}
});
// lineSeries.data.push(lineSeries.lossNum)
// types.forEach(type => {
// // 查找对应产线和工序类型的数据
// const item = oneDay.find(d => d.lineName === lineName && d.type === type);
// if (item) {
// // 将lossNum添加到对应的系列中
// lineSeries.data.push(item.lossNum);
// } else {
// // 如果没有数据，添加0
// lineSeries.data.push(0);
// }
// });
});
console.log('series', series);
// const lineNames = [...new Set(val.map(item => item.lineName))].sort();
// // let xData = []
// lineNames.forEach(line => {
// // sectionNames.forEach(section => {
// // 查找对应产线和工段的数据
// const item = val.find(d => d.lineName === line);
// if (item) {
// // 将lossNum添加到对应的系列中
// this.series[item.type - 1].data.push(item.lossNum);
// } else {
// // 如果没有数据，添加0
// this.series.forEach(s => s.data.push(0));
// }
// // });
// });
// val.forEach((ele) => {
// console.log(ele.lineName,ele.type);
// if (!xData.includes(ele.lineName)) {
// xData.push(ele.lineName)
// }
// })
// console.log('xData', xData);
var chartDom = document.getElementById('lossSum');
var myChart = echarts.init(chartDom);
var option;
@@ -35,7 +136,8 @@ export default {
top:18,
right:5,
itemWidth:8,
itemHeight:8,
itemHeight: 8,
// data: [ '上片', '磨边','打孔','镀膜','钢化','包装'],
textStyle:{
color: '#8C8C8C',
fontSize: '14px'
@@ -76,7 +178,7 @@ export default {
axisTick: {
show:false
},
data:['A1', 'A2', 'A3', 'A4', 'A5']
data: lineNames
},
yAxis: {
name:'单位/片',
@@ -91,62 +193,20 @@ export default {
}
}
},
series: [
{
name: '包装',
type: 'bar',
barGap: '30%',
barWidth: 8,
data: [433, 858, 937, 926, 928]
},
{
name: '上片',
type: 'bar',
barGap: '30%',
barWidth: 8,
data: [831, 734, 551, 864, 810]
},
{
name: '磨边',
type: 'bar',
barGap: '30%',
barWidth: 8,
data: [864, 652, 825, 810, 810]
},
{
name: '打孔',
type: 'bar',
barGap: '30%',
barWidth: 8,
data: [724, 539, 391, 810, 810]
},
{
name: '丝印',
type: 'bar',
barGap: '30%',
barWidth: 8,
data: [831, 734, 551, 864, 810]
},
{
name: '镀膜',
type: 'bar',
barGap: '30%',
barWidth: 8,
data: [864, 652, 825, 810, 810]
},
{
name: '钢化',
type: 'bar',
barGap: '30%',
barWidth: 8,
data: [433, 858, 937, 926, 928]
},
]
series: series
};
option && myChart.setOption(option);
},
chooseBtn(val) {
console.log(val)
if (val ===3) {
this.getChart(this.nowMonth)
} else if (val === 2) {
this.getChart(this.nowWeek)
} else if (val === 1) {
this.getChart(this.oneDay)
} else if (val === 0) {
this.getChart(this.todayClass)
}
}
}
}
@@ -160,4 +220,4 @@ export default {
top: -27px;
}
}
</style>
</style>

187
src/views/home/components/SectionInputAndOutput.vue
View File

@@ -1,17 +1,12 @@
<template>
<ModelBox name='2-1'>
<div class='section-content'>
<SwitchBtn class='switch-btn' @chooseBtn='chooseBtn'/>
<SwitchBtn class='switch-btn' @chooseBtn='chooseBtn' />
<div class='section-list'>
<div
v-for='item in sectionArr'
:key='item.id'
class='section-item'
:class='{acvtive: sectionActive === item.id}'
@click='sectionActive = item.id'
>{{item.name}}</div>
<div v-for='item in sectionArr' :key='item.id' class='section-item'
:class='{active: sectionActive === item.id}' @click='sectionActive = item.id'>{{item.name}}</div>
</div>
<dv-scroll-board :config="config" style="width:583px;height:220px;" class='section-table'/>
<dv-scroll-board ref="showTable" :config="config" style="width:583px;height:220px;" class='section-table' />
<span class='split-line' style='left: 66px;'></span>
<span class='split-line' style='left: 186px;'></span>
<span class='split-line' style='left: 306px;'></span>
@@ -30,17 +25,67 @@ export default {
ModelBox,
SwitchBtn
},
watch: {
dataObj: {
handler(newVal, oldVal) {
console.log(newVal, 'newVal');
if (newVal) {
this.nowMonth = newVal.nowMonth ? newVal.nowMonth : []
this.nowWeek = newVal.nowWeek ? newVal.nowWeek : []
this.oneDay = newVal.oneDay ? newVal.oneDay : []
this.todayClass = newVal.todayClass ? newVal.todayClass : []
}
// this.getChart(this.todayClass)
},
deep: true, // 深度监听
immediate: true
},
sectionActive: {
handler(newVal) {
if (newVal) {
console.log(newVal, 'sectionActive');
this.updateChartData();
}
// this.updateChartData();
},
deep: true,
immediate: true
},
time: {
handler(newVal) {
if (newVal) {
console.log(newVal, 'sectionActive');
this.updateChartData();
}
// this.updateChartData();
},
deep: true,
immediate: true
},
},
props: {
dataObj: {
type: Object,
default: () => {}
}
},
data() {
return {
sectionArr:[
{id:'1', name:'上片'},
{id:'2', name:'磨边'},
{id:'3', name:'打孔'},
{id:'4', name:'丝印'},
{id:'5', name:'镀膜'},
{id:'6', name:'钢化'},
{id:'7', name:'包装'}
{id:1, name:'上片'},
{id:2, name:'磨边'},
{id:3, name:'打孔'},
{id:4, name:'丝印'},
{id:5, name:'镀膜'},
{id:6, name:'钢化'},
{id:7, name:'包装'}
],
nowMonth: [],
nowWeek: [],
oneDay: [],
todayClass: [],
time: 0,
showData: [],
sectionActive: '1',
config:{
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>','<span style="color:#000;">产出率/%</span>'],
@@ -56,40 +101,90 @@ export default {
}
},
mounted() {
this.getData()
this.updateChartData()
},
methods: {
getData() {
let arr1 = []
let arr2 = []
let data = [
[1,'A1-磨边',234344,234333,100],
[2,'A1-磨边',234344,234333,10],
[3,'A1-磨边',234344,234333,96],
[4,'A1-磨边',234344,234333,20],
[5,'A1-磨边',234344,234333,40],
[6,'A1-磨边',234344,234333,90],
[7,'A1-磨边',234344,234333,80],
]
for (let i =0; i < data.length; i++) {
arr1.push(`<span style="color:#000;">${data[i][0]}</span>`)
arr1.push(`<img src=${arrowRed} width=12 style="margin-right:2px" /><span style="color:#000;">${data[i][1]}</span>`)
arr1.push(`<span style="color:#000;">${data[i][2]}</span>`)
arr1.push(`<span style="color:#000;">${data[i][3]}</span>`)
arr1.push(`<div style="width:136px; margin:0px;">
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
<div style="width:${data[i][4]}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
</div>
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${data[i][4]}%</span>
</div>`)
arr2.push(arr1)
arr1 = []
updateChartData() {
const data = this.getDataByTimeAndType();
this.getData(data);
},
getDataByTimeAndType() {
// console.log(this.time,'time');
console.log(this.sectionActive, this.time, 'sectionActive');
// 确定当前时间范围的数据源
let dataSource;
switch (this.time) {
case 3: // 本月
dataSource = this.nowMonth;
break;
case 2: // 本周
dataSource = this.nowWeek;
break;
case 1: // 今日
dataSource = this.oneDay;
break;
case 0: // 今日班次
default:
dataSource = this.todayClass;
break;
}
this.config.data = arr2
console.log(dataSource,'dataSource');
// 如果没有数据，返回空数组
if (!dataSource || dataSource.length === 0) {
return [];
}
// 根据sectionActive（对应type）筛选数据
const filteredData = dataSource.filter(item => item.type === parseInt(this.sectionActive));
// 按产出率排序
return filteredData
},
getData(data) {
console.log(data,'ryf');
this.showData = data ? data.map((item, index) => [
// `<span style="color:#000;" >${index + 1 || ''}
// </span>`,
`<span style="color:#000;">${index + 1 }</span>`,
// `<span style="color:#000;" >${item.sectionName || ''}
// </span>`,
`<span style="color:#000;">${item.sectionName}</span>`,
// formatDate(item.planStartTime) || '',
`<span style="color:#000;" >${item.inputNum || ''}
</span>`,
// `<span style="color:#000;">${data[i][3]}</span>`
`<span style="color:#000;">${item.outputNum || ''}</span>`,
`<div style="width:136px; margin:0px;">
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
</div>
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate }%</span>
</div>`,
]) : []
this.config = {
...this.config,
data: this.showData
};
console.log(this.showData, 'arr', this.config.data);
// console.log(this.$refs['showTable'])
this.$nextTick(() => {
if (this.$refs.showTable) {
this.$refs.showTable.updateRows(this.showData);
}
});
// this.$forceUpdate()
// this.config.data = arr2
},
chooseBtn(val) {
console.log(val)
this.time = val
console.log(this.time,' this.time');
this.updateChartData()
}
}
}
@@ -116,7 +211,7 @@ export default {
letter-spacing: 4px;
background-color: #E8EDF8;
}
.acvtive {
.active {
background-color: #0B58FF;
color: #fff;
}
@@ -133,4 +228,4 @@ export default {
background: #CDD3DF;
}
}
</style>
</style>