'修改数据分析/产品质量分析和产量分析'

This commit is contained in:
Fanzink 2023-03-18 13:58:14 +05:30
parent 683fc9169a
commit 3da95fed21
4 changed files with 176 additions and 53 deletions

View File

@ -408,6 +408,7 @@ t.pl = {}
t.pl.title = 'Product Line' t.pl.title = 'Product Line'
t.pl.id = 'Product Line ID' t.pl.id = 'Product Line ID'
t.pl.name = 'Product Line Name' t.pl.name = 'Product Line Name'
t.pl.sum = 'Sum'
t.pl.code = 'Product Line Code' t.pl.code = 'Product Line Code'
t.pl.status = 'Product Line Status' t.pl.status = 'Product Line Status'
t.pl.belong = 'Product Line' t.pl.belong = 'Product Line'

View File

@ -409,6 +409,7 @@ t.pl = {}
t.pl.title = '产线' t.pl.title = '产线'
t.pl.id = '产线ID' t.pl.id = '产线ID'
t.pl.name = '产线名称' t.pl.name = '产线名称'
t.pl.sum = '合计'
t.pl.code = '产线编码' t.pl.code = '产线编码'
t.pl.status = '产线状态' t.pl.status = '产线状态'
t.pl.belong = '所属产线' t.pl.belong = '所属产线'

View File

@ -57,15 +57,10 @@
<!-- style="margin-top: 12px" --> <!-- style="margin-top: 12px" -->
<el-row> <el-row>
<!-- v-if="!showGraph" --> <!-- v-if="!showGraph" -->
<base-table <base-table :data="dataList" :table-head-configs="tableConfigDynamic" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
:data="dataList"
:table-head-configs="tableConfigDynamic"
:max-height="500"
@operate-event="handleOperations"
@refreshDataList="getDataList" />
</el-row> </el-row>
<!-- :series-data="echartsData" --> <!-- :series-data="echartsData" -->
<!-- v-else --> <!-- v-else -->
<el-row style="margin-top: 8px"> <el-row style="margin-top: 8px">
<fake-chart <fake-chart
:categories="echartCategories" :categories="echartCategories"
@ -489,7 +484,8 @@ export default {
this.tableConfigDynamic = [ this.tableConfigDynamic = [
{ type: 'index', width: 100, name: i18n.t('index') }, { type: 'index', width: 100, name: i18n.t('index') },
{ name: i18n.t('pl.name'), prop: '0' }, { name: i18n.t('pl.name'), prop: '0' },
...Array.from(new Set(res.data.data[0].records.map((item) => moment(item.recordTime).format('MM-DD')))).map((name) => ({ prop: String(++this.count), name })) { name: i18n.t('pl.sum'), prop: '1' },
...Array.from(new Set(res.data.data[0].records.map((item) => moment(item.recordTime).format('MM-DD')))).map((name) => ({ prop: String(++this.count + 1), name }))
/** /**
这一行无敌的记一下 这一行无敌的记一下
1. '...'是扩展运算符是ES6的语法用于取出参数对象的所有可遍历属性然后拷贝到当前对象之中例如 1. '...'是扩展运算符是ES6的语法用于取出参数对象的所有可遍历属性然后拷贝到当前对象之中例如
@ -504,7 +500,8 @@ export default {
7.要在getDataList() 7.要在getDataList()
this.dataList = [] this.dataList = []
this.count = 0 this.count = 0
初始化一下否则连续按按钮会空 初始化一下否则连续按按钮会空一个
8.因为后期加了个"合计"字段所以++this.count + 1右移一位
*/ */
] ]
// console.log('this.tableConfigDynamic', this.tableConfigDynamic) // console.log('this.tableConfigDynamic', this.tableConfigDynamic)
@ -512,12 +509,14 @@ export default {
// this.dataListDynamic = this.parseDynamicData(res.data.data) || [] // this.dataListDynamic = this.parseDynamicData(res.data.data) || []
for (let i = 0; i < res.data.data.length; i++) { for (let i = 0; i < res.data.data.length; i++) {
this.dataListDynamic[i] = res.data.data[i].records.map((item) => item.outputNum) || [] this.dataListDynamic[i] = res.data.data[i].records.map((item) => item.outputNum) || []
this.dataListDynamic[i].unshift(res.data.data[i].sum)
this.dataListDynamic[i].unshift(res.data.data[i].records[i].lineName) this.dataListDynamic[i].unshift(res.data.data[i].records[i].lineName)
var json = {} var json = {}
for (var j = 0; j < this.dataListDynamic[i].length; j++) { for (var j = 0; j < this.dataListDynamic[i].length; j++) {
json[j] = this.dataListDynamic[i][j] json[j] = this.dataListDynamic[i][j]
} }
this.dataList.push(json) this.dataList.push(json)
// console.log('this.dataList', this.dataList)
// this.dataListDynamic[i] =JSON.stringify(this.dataListDynamic[i]) // this.dataListDynamic[i] =JSON.stringify(this.dataListDynamic[i])
} }
/** echarts related */ /** echarts related */
@ -626,6 +625,11 @@ export default {
// this.echartsData4 = this.dataListDynamic[3] // this.echartsData4 = this.dataListDynamic[3]
// shift // shift
try { try {
//
this.echartsData1.shift()
this.echartsData2.shift()
this.echartsData3.shift()
this.echartsData4.shift()
this.echartsData1.shift() this.echartsData1.shift()
this.echartsData2.shift() this.echartsData2.shift()
this.echartsData3.shift() this.echartsData3.shift()

View File

@ -55,6 +55,21 @@
</el-radio-group> </el-radio-group>
</el-row> </el-row>
<el-row style="margin-top: 12px"> <el-row style="margin-top: 12px">
<div style="text-align: right">
<!-- 设置设备名称小齿轮table列的图标 -->
<el-popover width="200" trigger="click" v-if="showGraph">
<div class="box">
<!-- :label="item.name ? item.name : item.label" 三元判别就可以让厂务的实时数据可以显示 -->
<el-checkbox
v-for="(item, index) in echartCategories"
:key="'cb' + index"
v-model="selectedBox[index]"
:label="item"
@change="checkboxChange(echartCategories)" />
</div>
<i slot="reference" class="el-icon-s-tools" style="color: #0b58ff">{{ $t('pl.choose') }}</i>
</el-popover>
</div>
<base-table <base-table
v-if="!showGraph" v-if="!showGraph"
:data="dataListDynamic" :data="dataListDynamic"
@ -63,7 +78,7 @@
@operate-event="handleOperations" @operate-event="handleOperations"
@refreshDataList="getDataList" /> @refreshDataList="getDataList" />
<!-- :series-data="echartsData" --> <!-- :series-data="echartsData" -->
<fake-chart v-else :categories="echartCategories" :type-list="echartCheckTypes" :series-data1="echartsData1" :series-data2="echartsData2" :pass-rate="pass" /> <fake-chart v-else :categories="echartRealtime" :type-list="echartCheckTypes" :series-data1="echartsData1" :series-data2="echartsData2" :pass-rate="pass" />
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
@ -124,6 +139,7 @@ const FakeChart = {
}, },
data() { data() {
return { return {
// selectedBox: new Array(100).fill(true),
calcMaxHeight, calcMaxHeight,
chart: null, chart: null,
// //
@ -147,12 +163,19 @@ const FakeChart = {
type: 'shadow' // 线'line' | 'shadow' type: 'shadow' // 线'line' | 'shadow'
} }
}, },
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: { legend: {
orient: 'vertical', // orient: 'vertical',
type: 'scroll', // type: 'scroll',
top: 10, // top: 10,
right: 0, // right: 0,
width: '12%', // width: '12%',
/** 修复文本太长时显示问题 */ /** 修复文本太长时显示问题 */
// formatter: function (name) { // formatter: function (name) {
// return echarts.format.truncateText(name, 120, '14px Microsoft Yahei', '...') // return echarts.format.truncateText(name, 120, '14px Microsoft Yahei', '...')
@ -165,6 +188,9 @@ const FakeChart = {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
axisTick: {
alignWithLabel: true
},
data: [], data: [],
// axisLine: { // axisLine: {
// show: true, // show: true,
@ -187,14 +213,59 @@ const FakeChart = {
// data: ['1', '1', '1', '13', '2', '2', '15', '1', '3'] // data: ['1', '1', '1', '13', '2', '2', '15', '1', '3']
}, },
yAxis: { yAxis: [
type: 'value' {
}, type: 'value',
name: i18n.t('eq.okNum'),
position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#5470C6'
}
},
axisLabel: {
// formatter: '{value} pcs'
}
},
{
type: 'value',
name: i18n.t('eq.nokNum'),
position: 'right',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#91CC75'
}
},
axisLabel: {
// formatter: '{value} pcs'
}
},
{
type: 'value',
name: i18n.t('eq.passRatePercent'),
position: 'right',
offset: 80,
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#FAC857'
}
},
axisLabel: {
formatter: '{value} %'
}
}
],
series: [ series: [
// dynamic // dynamic
{ {
name: i18n.t('eq.okNum'), name: i18n.t('eq.okNum'),
type: 'line', type: 'bar',
data: [], data: [],
label: { label: {
normal: { normal: {
@ -207,7 +278,8 @@ const FakeChart = {
}, },
{ {
name: i18n.t('eq.nokNum'), name: i18n.t('eq.nokNum'),
type: 'line', type: 'bar',
yAxisIndex: 1,
data: [], data: [],
label: { label: {
normal: { normal: {
@ -221,6 +293,7 @@ const FakeChart = {
{ {
name: i18n.t('eq.passRatePercent'), name: i18n.t('eq.passRatePercent'),
type: 'line', type: 'line',
yAxisIndex: 2,
data: [], data: [],
label: { label: {
normal: { normal: {
@ -243,7 +316,8 @@ const FakeChart = {
categories: { categories: {
handler: function (val, oldVal) { handler: function (val, oldVal) {
if (val && val !== oldVal) { if (val && val !== oldVal) {
this.defaultOpts.xAxis.data.push(...val) // this.defaultOpts.xAxis.data.push(...val)
this.defaultOpts.xAxis.data = val
} }
}, },
immediate: true immediate: true
@ -260,7 +334,8 @@ const FakeChart = {
// this.defaultOpts.series[0].data.push // this.defaultOpts.series[0].data.push
handler: function (val, oldVal) { handler: function (val, oldVal) {
if (val && val !== oldVal) { if (val && val !== oldVal) {
this.defaultOpts.series[0].data.push(...val) // this.defaultOpts.series[0].data.push(...val)
this.defaultOpts.series[0].data = val
} }
}, },
immediate: true immediate: true
@ -268,7 +343,7 @@ const FakeChart = {
seriesData2: { seriesData2: {
handler: function (val, oldVal) { handler: function (val, oldVal) {
if (val && val !== oldVal) { if (val && val !== oldVal) {
this.defaultOpts.series[1].data.push(...val) this.defaultOpts.series[1].data = val
} }
}, },
immediate: true immediate: true
@ -276,7 +351,7 @@ const FakeChart = {
passRate: { passRate: {
handler: function (val, oldVal) { handler: function (val, oldVal) {
if (val && val !== oldVal) { if (val && val !== oldVal) {
this.defaultOpts.series[2].data.push(...val) this.defaultOpts.series[2].data = val
} }
}, },
immediate: true immediate: true
@ -329,6 +404,7 @@ export default {
components: { BaseTable, SmallTitle, FakeChart }, components: { BaseTable, SmallTitle, FakeChart },
data() { data() {
return { return {
selectedBox: new Array(100).fill(true),
lineIds: [], lineIds: [],
lineList: [], lineList: [],
// tableConfigStatic, // tableConfigStatic,
@ -354,6 +430,7 @@ export default {
// ] // ]
// }, // },
echartCategories: null, echartCategories: null,
echartRealtime: [],
echartCheckTypes: [], echartCheckTypes: [],
interval: null interval: null
} }
@ -369,6 +446,9 @@ export default {
this.getDataList() this.getDataList()
}, 1000 * 5 * 60) }, 1000 * 5 * 60)
}, },
beforeMount() {
this.selectedBox = new Array(100).fill(true)
},
deactivated() { deactivated() {
if (this.interval) { if (this.interval) {
clearInterval(this.interval) clearInterval(this.interval)
@ -395,10 +475,16 @@ export default {
this.showGraph = value === dict[0] ? false : true this.showGraph = value === dict[0] ? false : true
}, },
getDataList() { getDataList() {
// this.echartsData1 = []
// this.echartsData2 = []
// this.pass = []
this.showGraph = false this.showGraph = false
this.dataType = i18n.t('table2') this.dataType = i18n.t('table2')
this.echartCategories = null this.echartCategories = null
this.echartCheckTypes.splice(0) this.echartCheckTypes.splice(0)
this.echartRealtime = []
// checkbox
this.selectedBox = new Array(100).fill(true)
/** 设置默认日期 */ /** 设置默认日期 */
// const startTime = this.datetime[0] || moment().set({ hour: 0, minute: 0, second: 0 }).format('yyyy-MM-DDTHH:mm:ss') // const startTime = this.datetime[0] || moment().set({ hour: 0, minute: 0, second: 0 }).format('yyyy-MM-DDTHH:mm:ss')
// const endTime = this.datetime[1] || moment().set({ hour: 23, minute: 59, second: 59 }).format('yyyy-MM-DDTHH:mm:ss') // const endTime = this.datetime[1] || moment().set({ hour: 23, minute: 59, second: 59 }).format('yyyy-MM-DDTHH:mm:ss')
@ -442,6 +528,7 @@ export default {
this.echartCategories = this.dataListDynamic.map((item) => { this.echartCategories = this.dataListDynamic.map((item) => {
return item.equipmentName return item.equipmentName
}) })
this.echartRealtime = this.echartCategories
// this.parseTableProps(res.data.nameData) // this.parseTableProps(res.data.nameData)
// console.log('this.dataListDynamic', this.dataListDynamic) // console.log('this.dataListDynamic', this.dataListDynamic)
@ -453,34 +540,34 @@ export default {
}) })
}, },
parseTableProps(nameData) { // parseTableProps(nameData) {
const subProps = [] // const subProps = []
const labelNameMap = new Map() // const labelNameMap = new Map()
// if (nameData.length) { // // if (nameData.length) {
// /** nameData */ // // /** nameData */
// nameData.forEach((item) => { // // nameData.forEach((item) => {
// if (!labelNameMap.get(item.name)) { // // if (!labelNameMap.get(item.name)) {
// labelNameMap.set(item.name, 1) // // labelNameMap.set(item.name, 1)
// subProps.push({ name: item.name, prop: item.name }) // // subProps.push({ name: item.name, prop: item.name })
// } // // }
// }) // // })
// } // // }
this.tableConfigDynamic = [ // this.tableConfigDynamic = [
{ type: 'index', width: 100, name: i18n.t('index') }, // { type: 'index', width: 100, name: i18n.t('index') },
{ name: i18n.t('eq.sectionName'), prop: 'sectionName' }, // { name: i18n.t('eq.sectionName'), prop: 'sectionName' },
// ...subProps, // // ...subProps,
{ name: i18n.t('eq.equipmentName'), prop: 'equipmentName' }, // { name: i18n.t('eq.equipmentName'), prop: 'equipmentName' },
{ name: i18n.t('eq.okNum'), prop: 'okNum' }, // { name: i18n.t('eq.okNum'), prop: 'okNum' },
{ name: i18n.t('eq.nokNum'), prop: 'nokNum' }, // { name: i18n.t('eq.nokNum'), prop: 'nokNum' },
{ name: i18n.t('eq.passRate'), prop: 'passRate', filter: (val) => (val || val === 0 ? `${val}%` : '-') } // { name: i18n.t('eq.passRate'), prop: 'passRate', filter: (val) => (val || val === 0 ? `${val}%` : '-') }
] // ]
/** echarts related */ // /** echarts related */
// this.echartCategories = subProps.map((item) => item.name) // // this.echartCategories = subProps.map((item) => item.name)
this.echartCategories = this.dataListDynamic.map((item) => item.name) // this.echartCategories = this.dataListDynamic.map((item) => item.name)
}, // },
// parseDynamicData(data) { // parseDynamicData(data) {
// this.echartCheckTypes.splice(0) // this.echartCheckTypes.splice(0)
@ -516,9 +603,32 @@ export default {
// } // }
// }) // })
// }) // })
this.echartsData1 = this.dataListDynamic.map((item) => item.okNum)
this.echartsData2 = this.dataListDynamic.map((item) => item.nokNum) // echartRealtimecheckbox
this.pass = this.dataListDynamic.map((item) => item.passRate) // this.echartRealtime = this.echartCategories
this.echartsData1 = []
this.echartsData2 = []
this.pass = []
// checkboxthis.echartCategories
// console.log('this.echartRealtime1', this.echartRealtime)
//
this.echartRealtime = []
// selectedBox
for (let i = 0; i < this.echartCategories.length; i++) {
if (this.selectedBox[i] == true) {
// console.log('this.echartCategories.slice(i)',this.echartCategories.slice(i))
// console.log(
// 'this.dataListDynamic.map((item) => item.okNum)',
// this.dataListDynamic.map((item) => item.okNum)
// )
this.echartRealtime = [...this.echartRealtime, ...this.echartCategories.slice(i, i + 1)]
this.echartsData1 = [...this.echartsData1, this.dataListDynamic.map((item) => item.okNum)[i]]
this.echartsData2 = [...this.echartsData2, this.dataListDynamic.map((item) => item.nokNum)[i]]
this.pass = [...this.pass, this.dataListDynamic.map((item) => item.passRate)[i]]
}
}
// console.log('this.echartRealtime2', this.echartRealtime)
// console.log('this.echartsData1', this.echartsData1)
// this.echartsData = result // this.echartsData = result
// console.log('result', result) // console.log('result', result)
// [ // [
@ -539,6 +649,13 @@ export default {
}).catch((err) => { }).catch((err) => {
console.error(err) console.error(err)
}) })
},
checkboxChange(val) {
// console.log('val', val)
// console.log('this.selectedBox', this.selectedBox)
this.buildGraphData()
// console.log('this.echartCategories', this.echartCategories)
// console.log('val',val)
} }
} }
} }