@@ -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 : {
: ,
type : ,
top : 10 ,
: 0 ,
: ,
// 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 . . xAxis . data . push ( )
// 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 . . [ 0 ] . data . push ( )
// 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 {
} )
} ,
( ) {
= [ ]
= 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 . = [
{ type : 'index' , width : 100 , name : i18n . t ( 'index' ) } ,
{ name : i18n . t ( 'eq.sectionName' ) , prop : } ,
{ name : i18n . t ( 'eq.equipmentName' ) , prop : } ,
{ 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}%` : '-') }
// ]
this . = 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)
}
}
}