本月
-
+
@@ -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) => [
+ `
${index + 1 || ''}
+ `,
+ `
${item.name || ''}
+ `,
+ // formatDate(item.planStartTime) || '',
+ `
+
${item.inputNum || ''}
+ `,
+ `
${item.outputNum || ''}`,
+ `
+
+
${item.inputOutputRate}%
+
`,
+ ]) : []
+ this.monthConfig.data = this.nowMonth
+ this.$refs['month'].updateRows(this.nowMonth)
+ this.nowWeek = newVal.nowWeek ? newVal.nowWeek.map((item, index) => [
+ `
${index + 1 || ''}
+ `,
+ `
${item.name || ''}
+ `,
+ // formatDate(item.planStartTime) || '',
+ `
+
${item.inputNum || ''}
+ `,
+ `
${item.outputNum || ''}`,
+ `
+
+
${item.inputOutputRate}%
+
`,
+ ]) : []
+ this.weekConfig.data = this.nowWeek
+ this.$refs['week'].updateRows(this.nowWeek)
+ this.oneDay = newVal.oneDay ? newVal.oneDay.map((item, index) => [
+ `
${index + 1 || ''}
+ `,
+ `
${item.name || ''}
+ `,
+ // formatDate(item.planStartTime) || '',
+ `
+
${item.inputNum || ''}
+ `,
+ `
${item.outputNum || ''}`,
+ `
+
+
${item.inputOutputRate}%
+
`,
+ ]) : []
+ this.dayConfig.data = this.oneDay
+ this.$refs['day'].updateRows(this.oneDay)
+ this.todayClass = newVal.todayClass ? newVal.todayClass.map((item, index) => [
+ `
${index + 1 || ''}
+ `,
+ `
${item.name || ''}
+ `,
+ // formatDate(item.planStartTime) || '',
+ `
+
${item.inputNum || ''}
+ `,
+ `
${item.outputNum || ''}`,
+ `
+
+
${item.inputOutputRate}%
+
`,
+ ]) : []
+ this.classConfig.data = this.todayClass
+ this.$refs['classToday'].updateRows(this.todayClass)
+ }
+ },
+ deep: true // 深度监听
+ }
+ },
data() {
return {
- config:{
+ nowMonth: [],
+ nowWeek: [],
+ oneDay: [],
+ todayClass: [],
+ classConfig:{
header: ['
序号', '
工段', '
投入数量/片', '
产出数量/片','
产出率/%'],
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: ['
序号', '
工段', '
投入数量/片', '
产出数量/片', '
产出率/%'],
+ 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: ['
序号', '
工段', '
投入数量/片', '
产出数量/片', '
产出率/%'],
+ 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: ['
序号', '
工段', '
投入数量/片', '
产出数量/片', '
产出率/%'],
+ 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(`
${data[i][0]}`)
- arr1.push(`
${data[i][1]}`)
- arr1.push(`
${data[i][2]}`)
- arr1.push(`
${data[i][3]}`)
- arr1.push(`
`)
- 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(`
${data[i][0]}`)
+ // arr1.push(`
${data[i][1]}`)
+ // arr1.push(`
${data[i][2]}`)
+ // arr1.push(`
${data[i][3]}`)
+ // arr1.push(`
+ //
+ //
${data[i][4]}%
+ //
`)
+ // arr2.push(arr1)
+ // arr1 = []
+ // }
+ // this.config.data = arr2
}
}
}
@@ -127,4 +257,4 @@ export default {
}
}
}
-
\ No newline at end of file
+
diff --git a/src/views/home/components/LineRate.vue b/src/views/home/components/LineRate.vue
index 7e7193ea..7d383a49 100644
--- a/src/views/home/components/LineRate.vue
+++ b/src/views/home/components/LineRate.vue
@@ -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 {
}
}
}
-
\ No newline at end of file
+
diff --git a/src/views/home/components/LossSum.vue b/src/views/home/components/LossSum.vue
index 7adf5a72..b9992924 100644
--- a/src/views/home/components/LossSum.vue
+++ b/src/views/home/components/LossSum.vue
@@ -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;
}
}
-
\ No newline at end of file
+
diff --git a/src/views/home/components/SectionInputAndOutput.vue b/src/views/home/components/SectionInputAndOutput.vue
index 9e8e8fe0..c223c14a 100644
--- a/src/views/home/components/SectionInputAndOutput.vue
+++ b/src/views/home/components/SectionInputAndOutput.vue
@@ -1,17 +1,12 @@
-
+
-
{{item.name}}
+
{{item.name}}
-
+
@@ -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: ['
序号', '
工段', '
投入数量/片', '
产出数量/片','
产出率/%'],
@@ -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(`
${data[i][0]}`)
- arr1.push(`
${data[i][1]}`)
- arr1.push(`
${data[i][2]}`)
- arr1.push(`
${data[i][3]}`)
- arr1.push(`
`)
- 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) => [
+ // `
${index + 1 || ''}
+ // `,
+ `
${index + 1 }`,
+ // `
${item.sectionName || ''}
+ // `,
+ `
${item.sectionName}`,
+ // formatDate(item.planStartTime) || '',
+ `
${item.inputNum || ''}
+ `,
+ // `
${data[i][3]}`
+ `
${item.outputNum || ''}`,
+ `
+
+
${item.inputOutputRate }%
+
`,
+ ]) : []
+
+ 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;
}
}
-
\ No newline at end of file
+
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 016d86c7..3cddf087 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,32 +1,25 @@