update 设备状态时序图
This commit is contained in:
parent
a12530b835
commit
928258e509
@ -98,7 +98,7 @@ export default {
|
|||||||
return h(
|
return h(
|
||||||
'el-button',
|
'el-button',
|
||||||
{
|
{
|
||||||
props: { type: 'text', size: 'mini' },
|
props: { type: 'text' },
|
||||||
on: {
|
on: {
|
||||||
click: function () {
|
click: function () {
|
||||||
console.log('inejctdata', _this.injectData);
|
console.log('inejctdata', _this.injectData);
|
||||||
|
|||||||
@ -98,7 +98,7 @@ export default {
|
|||||||
return h(
|
return h(
|
||||||
'el-button',
|
'el-button',
|
||||||
{
|
{
|
||||||
props: { type: 'text', size: 'mini' },
|
props: { type: 'text' },
|
||||||
on: {
|
on: {
|
||||||
click: function () {
|
click: function () {
|
||||||
console.log('inejctdata', _this.injectData);
|
console.log('inejctdata', _this.injectData);
|
||||||
|
|||||||
@ -6,16 +6,38 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="status-timegraph-container" style="background: #f2f4f9; flex: 1">
|
||||||
<h1>设备状态时序图</h1>
|
<el-row
|
||||||
|
class=""
|
||||||
|
style="
|
||||||
|
margin-bottom: 12px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px 16px 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
">
|
||||||
|
<div class="blue-title">生产节拍时序图</div>
|
||||||
|
<!-- <h1>设备状态时序图</h1> -->
|
||||||
<!-- 搜索工作栏 -->
|
<!-- 搜索工作栏 -->
|
||||||
<SearchBar
|
<SearchBar
|
||||||
:formConfigs="searchBarFormConfig"
|
:formConfigs="searchBarFormConfig"
|
||||||
ref="search-bar"
|
ref="search-bar"
|
||||||
|
:remove-blue="true"
|
||||||
@headBtnClick="handleSearchBarBtnClick" />
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<div class="main-area">
|
<el-row
|
||||||
<div class="legend-row">
|
class=""
|
||||||
|
style="
|
||||||
|
margin-bottom: 12px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px 16px 32px;
|
||||||
|
border-radius: 8px;
|
||||||
|
">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="6">
|
||||||
|
<div class="blue-title">设备状态时序图</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="18" class="legend-row">
|
||||||
<div class="legend">
|
<div class="legend">
|
||||||
<div class="icon running"></div>
|
<div class="icon running"></div>
|
||||||
<div>运行中</div>
|
<div>运行中</div>
|
||||||
@ -40,79 +62,47 @@
|
|||||||
<div class="icon stop"></div>
|
<div class="icon stop"></div>
|
||||||
<div>计划停机</div>
|
<div>计划停机</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div class="main-area">
|
||||||
<div class="graphs" v-if="graphList.length">
|
<div class="graphs" v-if="graphList.length">
|
||||||
<!-- <div class="graph">
|
|
||||||
<h2 class="graph-title">设备1</h2>
|
|
||||||
<div class="graph-item running tick" data-time="00:00"></div>
|
|
||||||
<div class="graph-item running"></div>
|
|
||||||
<div class="graph-item running"></div>
|
|
||||||
<div class="graph-item lack tick" data-time="03:00"></div>
|
|
||||||
<div class="graph-item full tick" data-time="04:00"></div>
|
|
||||||
<div class="graph-item waiting tick" data-time="05:00"></div>
|
|
||||||
<div class="graph-item running tick" data-time="06:00"></div>
|
|
||||||
<div class="graph-item running"></div>
|
|
||||||
<div class="graph-item fault tick" data-time="08:00"></div>
|
|
||||||
<div class="graph-item waiting tick" data-time="09:00"></div>
|
|
||||||
<div class="graph-item running tick" data-time="10:00"></div>
|
|
||||||
<div class="graph-item running"></div>
|
|
||||||
<div class="graph-item running"></div>
|
|
||||||
<div class="graph-item lack tick" data-time="13:00"></div>
|
|
||||||
<div class="graph-item full tick" data-time="14:00"></div>
|
|
||||||
<div class="graph-item running tick" data-time="15:00"></div>
|
|
||||||
<div class="graph-item running"></div>
|
|
||||||
<div class="graph-item running"></div>
|
|
||||||
<div class="graph-item fault tick" data-time="18:00"></div>
|
|
||||||
<div class="graph-item running tick" data-time="19:00"></div>
|
|
||||||
<div class="graph-item running"></div>
|
|
||||||
<div class="graph-item running"></div>
|
|
||||||
<div class="graph-item running"></div>
|
|
||||||
<div class="graph-item stop tick" data-time="23:00"></div>
|
|
||||||
</div> -->
|
|
||||||
<div class="graph" v-for="eq in graphList" :key="eq.key">
|
<div class="graph" v-for="eq in graphList" :key="eq.key">
|
||||||
<h2 class="graph-title">{{ eq.key }}</h2>
|
<h2 class="graph-title">{{ eq.key }}</h2>
|
||||||
<div
|
|
||||||
|
<div class="graph-content">
|
||||||
|
<el-popover
|
||||||
|
trigger="hover"
|
||||||
v-for="blc in eq"
|
v-for="blc in eq"
|
||||||
:key="blc.startTime"
|
:key="blc.startTime"
|
||||||
|
:title="
|
||||||
|
blc.status == 0
|
||||||
|
? '运行'
|
||||||
|
: blc.status == 2
|
||||||
|
? '故障'
|
||||||
|
: '计划停机'
|
||||||
|
"
|
||||||
|
placement="top"
|
||||||
|
:content="new Date(blc.startTime).toLocaleTimeString()">
|
||||||
|
<div
|
||||||
|
slot="reference"
|
||||||
|
:key="blc.startTime + '__div'"
|
||||||
class="graph-item-fixed tick"
|
class="graph-item-fixed tick"
|
||||||
:class="{
|
:class="{
|
||||||
running: blc.status == 0,
|
running: blc.status == 0,
|
||||||
fault: blc.status == 2,
|
fault: blc.status == 2,
|
||||||
stop: blc.status == 1,
|
stop: blc.status == 1,
|
||||||
}"
|
}"
|
||||||
:style="{ width: blc.duration * 2 + 'px' }"
|
:style="{ height: '32px', width: blc.duration * 2 + 'px' }"
|
||||||
:data-time="new Date(blc.startTime).toLocaleTimeString()"></div>
|
:data-time="
|
||||||
|
new Date(blc.startTime).toLocaleTimeString()
|
||||||
|
"></div>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="graph">
|
|
||||||
<h2 class="graph-title">设备3</h2>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
<div class="graph-item"></div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
<h2 v-else>请添加设备</h2>
|
<h2 v-else>请添加设备</h2>
|
||||||
</div>
|
</div>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<!-- 对话框(添加 / 修改) -->
|
<!-- 对话框(添加 / 修改) -->
|
||||||
<base-dialog
|
<base-dialog
|
||||||
@ -185,9 +175,9 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
btnName: '设备对比',
|
btnName: '添加对比',
|
||||||
name: 'compare',
|
name: 'compare',
|
||||||
color: 'warning',
|
color: 'primary',
|
||||||
plain: true,
|
plain: true,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@ -344,26 +334,52 @@ export default {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.graph {
|
.graph {
|
||||||
border: 1px solid #ccc;
|
// border: 1px solid #ccc;
|
||||||
padding: 12px 12px 28px 12px;
|
// padding: 12px 12px 28px 12px;
|
||||||
margin: 64px 0;
|
// margin: 64px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graph-title {
|
.graph-title {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: -64px;
|
// top: -64px;
|
||||||
left: -1px;
|
// left: -1px;
|
||||||
padding: 8px 18px;
|
// padding: 8px 18px;
|
||||||
background: #ccc;
|
padding: 0 12px;
|
||||||
font-size: 18px;
|
font-size: 14px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.graph-content {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
padding: 22px 12px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
border-top: none;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-content::after,
|
||||||
|
.graph-content::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 3px;
|
||||||
|
height: 80%;
|
||||||
|
background: #fff;
|
||||||
|
right: -1px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-content::before {
|
||||||
|
right: unset;
|
||||||
|
left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
.graph-item,
|
.graph-item,
|
||||||
.graph-item-fixed {
|
.graph-item-fixed {
|
||||||
height: 88px;
|
// height: 88px;
|
||||||
// width: 24px;
|
// width: 24px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
// border: 1px solid #ccc;
|
// border: 1px solid #ccc;
|
||||||
@ -405,32 +421,40 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.running {
|
.running {
|
||||||
background-color: #84f04e;
|
background-color: #5ad8a6;
|
||||||
|
// background-color: #84f04e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.waiting {
|
.waiting {
|
||||||
background-color: #409eff;
|
background-color: #5ad8a6;
|
||||||
|
// background-color: #409eff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fault {
|
.fault {
|
||||||
background-color: #ea5b5b;
|
// background-color: #ea5b5b;
|
||||||
|
background-color: #fc9c91;
|
||||||
}
|
}
|
||||||
|
|
||||||
.full {
|
.full {
|
||||||
background-color: #e6a23c;
|
// background-color: #e6a23c;
|
||||||
|
background-color: #598fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lack {
|
.lack {
|
||||||
background-color: #a69c8d;
|
// background-color: #a69c8d;
|
||||||
|
background-color: #7585a2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stop {
|
.stop {
|
||||||
background-color: #000c;
|
background-color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-row {
|
.legend-row {
|
||||||
margin: 12px 0;
|
margin: 6px 0;
|
||||||
|
padding-right: 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
> .legend:not(:last-child) {
|
> .legend:not(:last-child) {
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
@ -441,9 +465,32 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
width: 16px;
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-right: 4px;
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
height: 16px;
|
||||||
margin-right: 8px;
|
width: 4px;
|
||||||
|
border-radius: 1px;
|
||||||
|
background: #0b58ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -124,7 +124,7 @@ export default {
|
|||||||
return h(
|
return h(
|
||||||
'el-button',
|
'el-button',
|
||||||
{
|
{
|
||||||
props: { type: 'text', size: 'mini' },
|
props: { type: 'text' },
|
||||||
on: {
|
on: {
|
||||||
click: function () {
|
click: function () {
|
||||||
console.log('inejctdata', _this.injectData);
|
console.log('inejctdata', _this.injectData);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user