@ -55,6 +55,21 @@
< / e l - r a d i o - g r o u p >
< / e l - r o w >
< 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 >
< / e l - p o p o v e r >
< / 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 ="echart Categories " :type-list ="echartCheckTypes" :series-data1 ="echartsData1" :series-data2 ="echartsData2" :pass-rate ="pass" / >
< fake -chart v -else :categories ="echart Realtime " :type-list ="echartCheckTypes" :series-data1 ="echartsData1" :series-data2 ="echartsData2" :pass-rate ="pass" / >
< / e l - r o w >
< / e l - c o l >
< / e l - r o w >
@ -124,6 +139,7 @@ const FakeChart = {
} ,
data ( ) {
return {
/ / s e l e c t e d B o x : n e w A r r a y ( 1 0 0 ) . f i l l ( t r u e ) ,
calcMaxHeight ,
chart : null ,
/ / 新 加
@ -147,12 +163,19 @@ const FakeChart = {
type : 'shadow' / / 默 认 为 直 线 ， 可 选 为 ： ' l i n e ' | ' s h a d o w '
}
} ,
toolbox : {
feature : {
dataView : { show : true , readOnly : false } ,
restore : { show : true } ,
saveAsImage : { show : true }
}
} ,
legend : {
orient : 'vertical' ,
type : 'scroll' ,
top : 10 ,
right : 0 ,
width : '12%' ,
/ / o r i e n t : ' v e r t i c a l '
/ / t y p e : ' s c r o l l '
/ / t o p : 1 0
/ / r i g h t : 0
/ / w i d t h : ' 1 2 % '
/** 修复文本太长时显示问题 */
/ / f o r m a t t e r : f u n c t i o n ( n a m e ) {
/ / r e t u r n e c h a r t s . f o r m a t . t r u n c a t e T e x t ( n a m e , 1 2 0 , ' 1 4 p x M i c r o s o f t Y a h e i ' , ' . . . ' )
@ -165,6 +188,9 @@ const FakeChart = {
} ,
xAxis : {
type : 'category' ,
axisTick : {
alignWithLabel : true
} ,
data : [ ] ,
/ / a x i s L i n e : {
/ / s h o w : t r u e ,
@ -187,14 +213,59 @@ const FakeChart = {
/ / d a t a : [ ' 下 片 1 ' , ' 上 片 1 ' , ' 磨 边 机 1 ' , ' 设 备 1 3 ' , ' 钢 化 炉 2 ' , ' 磨 边 机 2 ' , ' 设 备 1 5 ' , ' 清 洗 机 1 ' , ' 钢 化 炉 3 ' ]
} ,
yAxis : {
type : 'value'
} ,
yAxis : [
{
type : 'value' ,
name : i18n . t ( 'eq.okNum' ) ,
position : 'left' ,
alignTicks : true ,
axisLine : {
show : true ,
lineStyle : {
color : '#5470C6'
}
} ,
axisLabel : {
/ / f o r m a t t e r : ' { v a l u e } p c s '
}
} ,
{
type : 'value' ,
name : i18n . t ( 'eq.nokNum' ) ,
position : 'right' ,
alignTicks : true ,
axisLine : {
show : true ,
lineStyle : {
color : '#91CC75'
}
} ,
axisLabel : {
/ / f o r m a t t e r : ' { v a l u e } p c s '
}
} ,
{
type : 'value' ,
name : i18n . t ( 'eq.passRatePercent' ) ,
position : 'right' ,
offset : 80 ,
alignTicks : true ,
axisLine : {
show : true ,
lineStyle : {
color : '#FAC857'
}
} ,
axisLabel : {
formatter : '{value} %'
}
}
] ,
series : [
/ / d y n a m i c
{
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 )
/ / t h i s . d e f a u l t O p t s . x A x i s . d a t a . p u s h ( . . . v a l )
this . defaultOpts . xAxis . data = val
}
} ,
immediate : true
@ -260,7 +334,8 @@ const FakeChart = {
/ / t h i s . d e f a u l t O p t s . s e r i e s [ 0 ] . d a t a . p u s h 注 意
handler : function ( val , oldVal ) {
if ( val && val !== oldVal ) {
this . defaultOpts . series [ 0 ] . data . push ( ... val )
/ / t h i s . d e f a u l t O p t s . s e r i e s [ 0 ] . d a t a . p u s h ( . . . v a l )
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 : [ ] ,
/ / t a b l e C o n f i g S t a t i c ,
@ -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 ( ) {
/ / t h i s . e c h a r t s D a t a 1 = [ ]
/ / t h i s . e c h a r t s D a t a 2 = [ ]
/ / t h i s . p a s s = [ ]
this . showGraph = false
this . dataType = i18n . t ( 'table2' )
this . echartCategories = null
this . echartCheckTypes . splice ( 0 )
this . echartRealtime = [ ]
/ / 更 新 下 c h e c k b o x 全 选
this . selectedBox = new Array ( 100 ) . fill ( true )
/** 设置默认日期 */
/ / c o n s t s t a r t T i m e = t h i s . d a t e t i m e [ 0 ] | | m o m e n t ( ) . s e t ( { h o u r : 0 , m i n u t e : 0 , s e c o n d : 0 } ) . f o r m a t ( ' y y y y - M M - D D T H H : m m : s s ' )
/ / c o n s t e n d T i m e = t h i s . d a t e t i m e [ 1 ] | | m o m e n t ( ) . s e t ( { h o u r : 2 3 , m i n u t e : 5 9 , s e c o n d : 5 9 } ) . f o r m a t ( ' y y y y - M M - D D T H H : m m : s s ' )
@ -442,6 +528,7 @@ export default {
this . echartCategories = this . dataListDynamic . map ( ( item ) => {
return item . equipmentName
} )
this . echartRealtime = this . echartCategories
/ / t h i s . p a r s e T a b l e P r o p s ( r e s . d a t a . n a m e D a t a )
/ / c o n s o l e . l o g ( ' t h i s . d a t a L i s t D y n a m i c ' , t h i s . d a t a L i s t D y n a m i c )
@ -453,34 +540,34 @@ export default {
} )
} ,
parseTableProps ( nameData )
const subProps = [ ]
const labelNameMap = new Map ( )
/ / p a r s e T a b l e P r o p s ( n a m e D a t a )
/ / c o n s t s u b P r o p s = [
/ / c o n s t l a b e l N a m e M a p = n e w M a p (
/ / i f ( n a m e D a t a . l e n g t h ) {
/ / / * * 处 理 n a m e D a t a * /
/ / n a m e D a t a . f o r E a c h ( ( i t e m ) = > {
/ / i f ( ! l a b e l N a m e M a p . g e t ( i t e m . n a m e ) ) {
/ / l a b e l N a m e M a p . s e t ( i t e m . n a m e , 1 )
/ / s u b P r o p s . p u s h ( { n a m e : i t e m . n a m e , p r o p : i t e m . n a m e } )
/ / }
/ / } )
/ / }
/ / / / i f ( n a m e D a t a . l e n g t h ) {
/ / / / / * * 处 理 n a m e D a t a * /
/ / / / n a m e D a t a . f o r E a c h ( ( i t e m ) = > {
/ / / / i f ( ! l a b e l N a m e M a p . g e t ( i t e m . n a m e ) ) {
/ / / / l a b e l N a m e M a p . s e t ( i t e m . n a m e , 1 )
/ / / / s u b P r o p s . p u s h ( { n a m e : i t e m . n a m e , p r o p : i t e m . n a m e } )
/ / / / }
/ / / / } )
/ / / / }
this . tableConfigDynamic = [
{ type : 'index' , width : 100 , name : i18n . t ( 'index' ) } ,
{ name : i18n . t ( 'eq.sectionName' ) , prop : 'sectionName' } ,
/ / . . . s u b P r o p s ,
{ 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 } % ` : '-' ) }
]
/ / t h i s . t a b l e C o n f i g D y n a m i c =
/ / { t y p e : ' i n d e x ' , w i d t h : 1 0 0 , n a m e : i 1 8 n . t ( ' i n d e x ' ) }
/ / { n a m e : i 1 8 n . t ( ' e q . s e c t i o n N a m e ' ) , p r o p : ' s e c t i o n N a m e ' }
/ / / / . . . s u b P r o p s ,
/ / { n a m e : i 1 8 n . t ( ' e q . e q u i p m e n t N a m e ' ) , p r o p : ' e q u i p m e n t N a m e ' }
/ / { n a m e : i 1 8 n . t ( ' e q . o k N u m ' ) , p r o p : ' o k N u m ' }
/ / { n a m e : i 1 8 n . t ( ' e q . n o k N u m ' ) , p r o p : ' n o k N u m ' }
/ / { n a m e : i 1 8 n . t ( ' e q . p a s s R a t e ' ) , p r o p : ' p a s s R a t e ' , f i l t e r : ( v a l ) = > ( v a l | | v a l = = = 0 ? ` $ { v a l } % ` : ' - ' )
/ /
/** echarts related * /
/ / t h i s . e c h a r t C a t e g o r i e s = s u b P r o p s . m a p ( ( i t e m ) = > i t e m . n a m e )
this . echartCategories = this . dataListDynamic . map ( ( item ) => item . name )
}
/ / / * * e c h a r t s r e l a t e d *
/ / / / t h i s . e c h a r t C a t e g o r i e s = s u b P r o p s . m a p ( ( i t e m ) = > i t e m . n a m e )
/ / t h i s . e c h a r t C a t e g o r i e s = t h i s . d a t a L i s t D y n a m i c . m a p ( ( i t e m ) = > i t e m . n a m e
/ / }
/ / p a r s e D y n a m i c D a t a ( d a t a ) {
/ / t h i s . e c h a r t C h e c k T y p e s . s p l i c e ( 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 )
/ / 新 建 一 个 e c h a r t R e a l t i m e 来 保 存 修 改 c h e c k b o x 后 实 时 的 横 坐 标 数 据
/ / t h i s . e c h a r t R e a l t i m e = t h i s . e c h a r t C a t e g o r i e s
this . echartsData1 = [ ]
this . echartsData2 = [ ]
this . pass = [ ]
/ / 尝 试 写 个 改 变 c h e c k b o x 时 触 发 改 变 t h i s . e c h a r t C a t e g o r i e s
/ / c o n s o l e . l o g ( ' t h i s . e c h a r t R e a l t i m e 1 ' , t h i s . e c h a r t R e a l t i m e )
/ / 初 始 化
this . echartRealtime = [ ]
/ / 根 据 s e l e c t e d B o x 的 真 假 ， 动 态 生 成 横 坐 标 和 数 值 ， 运 用 了 数 组 与 元 素 合 并
for ( let i = 0 ; i < this . echartCategories . length ; i ++ ) {
if ( this . selectedBox [ i ] == true ) {
/ / c o n s o l e . l o g ( ' t h i s . e c h a r t C a t e g o r i e s . s l i c e ( i ) ' , t h i s . e c h a r t C a t e g o r i e s . s l i c e ( i ) )
/ / c o n s o l e . l o g (
/ / ' t h i s . d a t a L i s t D y n a m i c . m a p ( ( i t e m ) = > i t e m . o k N u m ) ' ,
/ / t h i s . d a t a L i s t D y n a m i c . m a p ( ( i t e m ) = > i t e m . o k N u m )
/ / )
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 ] ]
}
}
/ / c o n s o l e . l o g ( ' t h i s . e c h a r t R e a l t i m e 2 ' , t h i s . e c h a r t R e a l t i m e )
/ / c o n s o l e . l o g ( ' t h i s . e c h a r t s D a t a 1 ' , t h i s . e c h a r t s D a t a 1 )
/ / t h i s . e c h a r t s D a t a = r e s u l t
/ / c o n s o l e . l o g ( ' r e s u l t ' , r e s u l t )
/ / [
@ -539,6 +649,13 @@ export default {
} ) . catch ( ( err ) => {
console . error ( err )
} )
} ,
checkboxChange ( val ) {
/ / c o n s o l e . l o g ( ' v a l ' , v a l )
/ / c o n s o l e . l o g ( ' t h i s . s e l e c t e d B o x ' , t h i s . s e l e c t e d B o x )
this . buildGraphData ( )
/ / c o n s o l e . l o g ( ' t h i s . e c h a r t C a t e g o r i e s ' , t h i s . e c h a r t C a t e g o r i e s )
/ / c o n s o l e . l o g ( ' v a l ' , v a l )
}
}
}