forked from mt-fe-group/mt-yd-ui
Merge pull request ''修改数据分析/产品质量分析和产量分析'' (#25) from fzq into develop
Reviewed-on: mt-fe-group/mt-yd-ui#25
This commit is contained in:
commit
7ec1c5f3fc
@ -408,6 +408,7 @@ t.pl = {}
|
||||
t.pl.title = 'Product Line'
|
||||
t.pl.id = 'Product Line ID'
|
||||
t.pl.name = 'Product Line Name'
|
||||
t.pl.sum = 'Sum'
|
||||
t.pl.code = 'Product Line Code'
|
||||
t.pl.status = 'Product Line Status'
|
||||
t.pl.belong = 'Product Line'
|
||||
|
||||
@ -409,6 +409,7 @@ t.pl = {}
|
||||
t.pl.title = '产线'
|
||||
t.pl.id = '产线ID'
|
||||
t.pl.name = '产线名称'
|
||||
t.pl.sum = '合计'
|
||||
t.pl.code = '产线编码'
|
||||
t.pl.status = '产线状态'
|
||||
t.pl.belong = '所属产线'
|
||||
|
||||
@ -57,15 +57,10 @@
|
||||
<!-- style="margin-top: 12px" -->
|
||||
<el-row>
|
||||
<!-- v-if="!showGraph" -->
|
||||
<base-table
|
||||
:data="dataList"
|
||||
:table-head-configs="tableConfigDynamic"
|
||||
:max-height="500"
|
||||
@operate-event="handleOperations"
|
||||
@refreshDataList="getDataList" />
|
||||
<base-table :data="dataList" :table-head-configs="tableConfigDynamic" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
|
||||
</el-row>
|
||||
<!-- :series-data="echartsData" -->
|
||||
<!-- v-else -->
|
||||
<!-- :series-data="echartsData" -->
|
||||
<!-- v-else -->
|
||||
<el-row style="margin-top: 8px">
|
||||
<fake-chart
|
||||
:categories="echartCategories"
|
||||
@ -489,7 +484,8 @@ export default {
|
||||
this.tableConfigDynamic = [
|
||||
{ type: 'index', width: 100, name: i18n.t('index') },
|
||||
{ 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的语法，用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。例如
|
||||
@ -504,7 +500,8 @@ export default {
|
||||
7.要在getDataList() 中
|
||||
this.dataList = []
|
||||
this.count = 0
|
||||
初始化一下，否则连续按按钮会空
|
||||
初始化一下，否则连续按按钮会空一个
|
||||
8.因为后期加了个"合计"字段，所以++this.count + 1，右移一位
|
||||
*/
|
||||
]
|
||||
// console.log('this.tableConfigDynamic', this.tableConfigDynamic)
|
||||
@ -512,12 +509,14 @@ export default {
|
||||
// this.dataListDynamic = this.parseDynamicData(res.data.data) || []
|
||||
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].unshift(res.data.data[i].sum)
|
||||
this.dataListDynamic[i].unshift(res.data.data[i].records[i].lineName)
|
||||
var json = {}
|
||||
for (var j = 0; j < this.dataListDynamic[i].length; j++) {
|
||||
json[j] = this.dataListDynamic[i][j]
|
||||
}
|
||||
this.dataList.push(json)
|
||||
// console.log('this.dataList', this.dataList)
|
||||
// this.dataListDynamic[i] =JSON.stringify(this.dataListDynamic[i])
|
||||
}
|
||||
/** echarts related */
|
||||
@ -626,6 +625,11 @@ export default {
|
||||
// this.echartsData4 = this.dataListDynamic[3]
|
||||
// 不抛出老是报shift错误
|
||||
try {
|
||||
// 因为又加了“合计”字段，所以再多删除一次
|
||||
this.echartsData1.shift()
|
||||
this.echartsData2.shift()
|
||||
this.echartsData3.shift()
|
||||
this.echartsData4.shift()
|
||||
this.echartsData1.shift()
|
||||
this.echartsData2.shift()
|
||||
this.echartsData3.shift()
|
||||
|
||||
@ -55,6 +55,21 @@
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<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
|
||||
v-if="!showGraph"
|
||||
:data="dataListDynamic"
|
||||
@ -63,7 +78,7 @@
|
||||
@operate-event="handleOperations"
|
||||
@refreshDataList="getDataList" />
|
||||
<!-- :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-col>
|
||||
</el-row>
|
||||
@ -124,6 +139,7 @@ const FakeChart = {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// selectedBox: new Array(100).fill(true),
|
||||
calcMaxHeight,
|
||||
chart: null,
|
||||
// 新加
|
||||
@ -147,12 +163,19 @@ const FakeChart = {
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { show: true, readOnly: false },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true }
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
type: 'scroll',
|
||||
top: 10,
|
||||
right: 0,
|
||||
width: '12%',
|
||||
// orient: 'vertical',
|
||||
// type: 'scroll',
|
||||
// top: 10,
|
||||
// right: 0,
|
||||
// width: '12%',
|
||||
/** 修复文本太长时显示问题 */
|
||||
// formatter: function (name) {
|
||||
// return echarts.format.truncateText(name, 120, '14px Microsoft Yahei', '...')
|
||||
@ -165,6 +188,9 @@ const FakeChart = {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
data: [],
|
||||
// axisLine: {
|
||||
// show: true,
|
||||
@ -187,14 +213,59 @@ const FakeChart = {
|
||||
|
||||
// data: ['下片1', '上片1', '磨边机1', '设备13', '钢化炉2', '磨边机2', '设备15', '清洗机1', '钢化炉3']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
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: [
|
||||
// dynamic
|
||||
{
|
||||
name: i18n.t('eq.okNum'),
|
||||
type: 'line',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
label: {
|
||||
normal: {
|
||||
@ -207,7 +278,8 @@ const FakeChart = {
|
||||
},
|
||||
{
|
||||
name: i18n.t('eq.nokNum'),
|
||||
type: 'line',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
data: [],
|
||||
label: {
|
||||
normal: {
|
||||
@ -221,6 +293,7 @@ const FakeChart = {
|
||||
{
|
||||
name: i18n.t('eq.passRatePercent'),
|
||||
type: 'line',
|
||||
yAxisIndex: 2,
|
||||
data: [],
|
||||
label: {
|
||||
normal: {
|
||||
@ -243,7 +316,8 @@ const FakeChart = {
|
||||
categories: {
|
||||
handler: function (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
|
||||
@ -260,7 +334,8 @@ const FakeChart = {
|
||||
// this.defaultOpts.series[0].data.push 注意
|
||||
handler: function (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
|
||||
@ -268,7 +343,7 @@ const FakeChart = {
|
||||
seriesData2: {
|
||||
handler: function (val, oldVal) {
|
||||
if (val && val !== oldVal) {
|
||||
this.defaultOpts.series[1].data.push(...val)
|
||||
this.defaultOpts.series[1].data = val
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
@ -276,7 +351,7 @@ const FakeChart = {
|
||||
passRate: {
|
||||
handler: function (val, oldVal) {
|
||||
if (val && val !== oldVal) {
|
||||
this.defaultOpts.series[2].data.push(...val)
|
||||
this.defaultOpts.series[2].data = val
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
@ -329,6 +404,7 @@ export default {
|
||||
components: { BaseTable, SmallTitle, FakeChart },
|
||||
data() {
|
||||
return {
|
||||
selectedBox: new Array(100).fill(true),
|
||||
lineIds: [],
|
||||
lineList: [],
|
||||
// tableConfigStatic,
|
||||
@ -354,6 +430,7 @@ export default {
|
||||
// ]
|
||||
// },
|
||||
echartCategories: null,
|
||||
echartRealtime: [],
|
||||
echartCheckTypes: [],
|
||||
interval: null
|
||||
}
|
||||
@ -369,6 +446,9 @@ export default {
|
||||
this.getDataList()
|
||||
}, 1000 * 5 * 60)
|
||||
},
|
||||
beforeMount() {
|
||||
this.selectedBox = new Array(100).fill(true)
|
||||
},
|
||||
deactivated() {
|
||||
if (this.interval) {
|
||||
clearInterval(this.interval)
|
||||
@ -395,10 +475,16 @@ export default {
|
||||
this.showGraph = value === dict[0] ? false : true
|
||||
},
|
||||
getDataList() {
|
||||
// this.echartsData1 = []
|
||||
// this.echartsData2 = []
|
||||
// this.pass = []
|
||||
this.showGraph = false
|
||||
this.dataType = i18n.t('table2')
|
||||
this.echartCategories = null
|
||||
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 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) => {
|
||||
return item.equipmentName
|
||||
})
|
||||
this.echartRealtime = this.echartCategories
|
||||
// this.parseTableProps(res.data.nameData)
|
||||
|
||||
// console.log('this.dataListDynamic', this.dataListDynamic)
|
||||
@ -453,34 +540,34 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
parseTableProps(nameData) {
|
||||
const subProps = []
|
||||
const labelNameMap = new Map()
|
||||
// parseTableProps(nameData) {
|
||||
// const subProps = []
|
||||
// const labelNameMap = new Map()
|
||||
|
||||
// if (nameData.length) {
|
||||
// /** 处理 nameData */
|
||||
// nameData.forEach((item) => {
|
||||
// if (!labelNameMap.get(item.name)) {
|
||||
// labelNameMap.set(item.name, 1)
|
||||
// subProps.push({ name: item.name, prop: item.name })
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// // if (nameData.length) {
|
||||
// // /** 处理 nameData */
|
||||
// // nameData.forEach((item) => {
|
||||
// // if (!labelNameMap.get(item.name)) {
|
||||
// // labelNameMap.set(item.name, 1)
|
||||
// // subProps.push({ name: item.name, prop: item.name })
|
||||
// // }
|
||||
// // })
|
||||
// // }
|
||||
|
||||
this.tableConfigDynamic = [
|
||||
{ type: 'index', width: 100, name: i18n.t('index') },
|
||||
{ name: i18n.t('eq.sectionName'), prop: 'sectionName' },
|
||||
// ...subProps,
|
||||
{ name: i18n.t('eq.equipmentName'), prop: 'equipmentName' },
|
||||
{ name: i18n.t('eq.okNum'), prop: 'okNum' },
|
||||
{ name: i18n.t('eq.nokNum'), prop: 'nokNum' },
|
||||
{ name: i18n.t('eq.passRate'), prop: 'passRate', filter: (val) => (val || val === 0 ? `${val}%` : '-') }
|
||||
]
|
||||
// this.tableConfigDynamic = [
|
||||
// { type: 'index', width: 100, name: i18n.t('index') },
|
||||
// { name: i18n.t('eq.sectionName'), prop: 'sectionName' },
|
||||
// // ...subProps,
|
||||
// { name: i18n.t('eq.equipmentName'), prop: 'equipmentName' },
|
||||
// { name: i18n.t('eq.okNum'), prop: 'okNum' },
|
||||
// { name: i18n.t('eq.nokNum'), prop: 'nokNum' },
|
||||
// { name: i18n.t('eq.passRate'), prop: 'passRate', filter: (val) => (val || val === 0 ? `${val}%` : '-') }
|
||||
// ]
|
||||
|
||||
/** echarts related */
|
||||
// this.echartCategories = subProps.map((item) => item.name)
|
||||
this.echartCategories = this.dataListDynamic.map((item) => item.name)
|
||||
},
|
||||
// /** echarts related */
|
||||
// // this.echartCategories = subProps.map((item) => item.name)
|
||||
// this.echartCategories = this.dataListDynamic.map((item) => item.name)
|
||||
// },
|
||||
|
||||
// parseDynamicData(data) {
|
||||
// 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)
|
||||
this.pass = this.dataListDynamic.map((item) => item.passRate)
|
||||
|
||||
// 新建一个echartRealtime来保存修改checkbox后实时的横坐标数据
|
||||
// this.echartRealtime = this.echartCategories
|
||||
this.echartsData1 = []
|
||||
this.echartsData2 = []
|
||||
this.pass = []
|
||||
// 尝试写个改变checkbox时触发改变this.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
|
||||
// console.log('result', result)
|
||||
// [
|
||||
@ -539,6 +649,13 @@ export default {
|
||||
}).catch((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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user