|
|
@@ -6,25 +6,49 @@ |
|
|
|
--> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<h1>设备产量时序图</h1> |
|
|
|
<!-- 搜索工作栏 --> |
|
|
|
<SearchBar |
|
|
|
:formConfigs="searchBarFormConfig" |
|
|
|
ref="search-bar" |
|
|
|
@headBtnClick="handleSearchBarBtnClick" /> |
|
|
|
<div |
|
|
|
class="production-timegraph-container" |
|
|
|
style="background: #f2f4f9; flex: 1"> |
|
|
|
<el-row |
|
|
|
class="" |
|
|
|
style=" |
|
|
|
margin-bottom: 12px; |
|
|
|
background: #fff; |
|
|
|
padding: 16px 16px 0; |
|
|
|
border-radius: 8px; |
|
|
|
"> |
|
|
|
<div class="blue-title">生产节拍时序图</div> |
|
|
|
<!-- <h1>设备状态时序图</h1> --> |
|
|
|
<!-- 搜索工作栏 --> |
|
|
|
<SearchBar |
|
|
|
:formConfigs="searchBarFormConfig" |
|
|
|
ref="search-bar" |
|
|
|
:remove-blue="true" |
|
|
|
@headBtnClick="handleSearchBarBtnClick" /> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<div class="main-area"> |
|
|
|
<div class="graphs" v-if="graphList.length"> |
|
|
|
<div class="graph" v-for="(eq, index) in graphList" :key="eq.key"> |
|
|
|
<h2 class="graph-title">{{ eq.key }}</h2> |
|
|
|
<LineChart |
|
|
|
:key="eq.key + '__linechart'" |
|
|
|
:config="getRealConfig(index)" /> |
|
|
|
<el-row |
|
|
|
class="" |
|
|
|
style=" |
|
|
|
margin-bottom: 12px; |
|
|
|
background: #fff; |
|
|
|
padding: 16px 16px 32px; |
|
|
|
border-radius: 8px; |
|
|
|
"> |
|
|
|
<div class="blue-title">设备产量时序图</div> |
|
|
|
|
|
|
|
<div class="main-area"> |
|
|
|
<div class="graphs" v-if="graphList.length"> |
|
|
|
<div class="graph" v-for="(eq, index) in graphList" :key="eq.key"> |
|
|
|
<h2 class="graph-title">{{ eq.key }}</h2> |
|
|
|
<LineChart |
|
|
|
:key="eq.key + '__linechart'" |
|
|
|
:config="getRealConfig(index)" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<h2 v-else>请添加设备</h2> |
|
|
|
</div> |
|
|
|
<h2 v-else>请添加设备</h2> |
|
|
|
</div> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<!-- 对话框(添加 / 修改) --> |
|
|
|
<base-dialog |
|
|
@@ -99,9 +123,9 @@ export default { |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'button', |
|
|
|
btnName: '设备对比', |
|
|
|
btnName: '添加对比', |
|
|
|
name: 'compare', |
|
|
|
color: 'warning', |
|
|
|
color: 'primary', |
|
|
|
plain: true, |
|
|
|
}, |
|
|
|
], |
|
|
@@ -322,9 +346,30 @@ export default { |
|
|
|
this.graphList.push(newEqlist[0]); |
|
|
|
} |
|
|
|
this.open = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"></style> |
|
|
|
<style scoped lang="scss"> |
|
|
|
.blue-title { |
|
|
|
position: relative; |
|
|
|
padding: 4px 0; |
|
|
|
padding-left: 12px; |
|
|
|
font-size: 14px; |
|
|
|
color: #606266; |
|
|
|
font-weight: 700; |
|
|
|
margin-bottom: 12px; |
|
|
|
|
|
|
|
&::before { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 6px; |
|
|
|
height: 16px; |
|
|
|
width: 4px; |
|
|
|
border-radius: 1px; |
|
|
|
background: #0b58ff; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |