mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

update 设备状态时序图

Browse Source
This commit is contained in:
lb
2023-09-20 11:28:41 +08:00
parent a12530b835
commit 928258e509
4 changed files with 165 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
src/views/equipment/timing-diagram/status/index.vue
View File

@@ -6,29 +6,51 @@
-->
<template>
<div class="app-container">
<h1>设备状态时序图</h1>
<!-- 搜索工作栏 -->
<SearchBar
:formConfigs="searchBarFormConfig"
ref="search-bar"
@headBtnClick="handleSearchBarBtnClick" />
<div class="status-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="legend-row">
<div class="legend">
<div class="icon running"></div>
<div>运行中</div>
</div>
<!-- <div class="legend">
<el-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="icon running"></div>
<div>运行中</div>
</div>
<!-- <div class="legend">
<div class="icon waiting"></div>
<div>待机</div>
</div> -->
<div class="legend">
<div class="icon fault"></div>
<div>故障</div>
</div>
<!-- <div class="legend">
<div class="legend">
<div class="icon fault"></div>
<div>故障</div>
</div>
<!-- <div class="legend">
<div class="icon lack"></div>
<div>缺料</div>
</div>
@@ -36,83 +58,51 @@
<div class="icon full"></div>
<div>满料</div>
</div> -->
<div class="legend">
<div class="icon stop"></div>
<div>计划停机</div>
<div class="legend">
<div class="icon stop"></div>
<div>计划停机</div>
</div>
</el-col>
</el-row>
<div class="main-area">
<div class="graphs" v-if="graphList.length">
<div class="graph" v-for="eq in graphList" :key="eq.key">
<h2 class="graph-title">{{ eq.key }}</h2>
<div class="graph-content">
<el-popover
trigger="hover"
v-for="blc in eq"
: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="{
running: blc.status == 0,
fault: blc.status == 2,
stop: blc.status == 1,
}"
:style="{ height: '32px', width: blc.duration * 2 + 'px' }"
:data-time="
new Date(blc.startTime).toLocaleTimeString()
"></div>
</el-popover>
</div>
</div>
</div>
<h2 v-else>请添加设备</h2>
</div>
<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">
<h2 class="graph-title">{{ eq.key }}</h2>
<div
v-for="blc in eq"
:key="blc.startTime"
class="graph-item-fixed tick"
:class="{
running: blc.status == 0,
fault: blc.status == 2,
stop: blc.status == 1,
}"
:style="{ width: blc.duration * 2 + 'px' }"
:data-time="new Date(blc.startTime).toLocaleTimeString()"></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>
<h2 v-else>请添加设备</h2>
</div>
</el-row>
<!-- 对话框(添加 / 修改) -->
<base-dialog
@@ -185,9 +175,9 @@ export default {
},
{
type: 'button',
btnName: '设备对比',
btnName: '添加对比',
name: 'compare',
color: 'warning',
color: 'primary',
plain: true,
},
],
@@ -344,26 +334,52 @@ export default {
<style scoped lang="scss">
.graph {
border: 1px solid #ccc;
padding: 12px 12px 28px 12px;
margin: 64px 0;
// border: 1px solid #ccc;
// padding: 12px 12px 28px 12px;
// margin: 64px 0;
position: relative;
display: flex;
}
.graph-title {
position: absolute;
top: -64px;
left: -1px;
padding: 8px 18px;
background: #ccc;
font-size: 18px;
// position: absolute;
// top: -64px;
// left: -1px;
// padding: 8px 18px;
padding: 0 12px;
font-size: 14px;
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-fixed {
height: 88px;
// height: 88px;
// width: 24px;
flex: 1;
// border: 1px solid #ccc;
@@ -405,32 +421,40 @@ export default {
}
.running {
background-color: #84f04e;
background-color: #5ad8a6;
// background-color: #84f04e;
}
.waiting {
background-color: #409eff;
background-color: #5ad8a6;
// background-color: #409eff;
}
.fault {
background-color: #ea5b5b;
// background-color: #ea5b5b;
background-color: #fc9c91;
}
.full {
background-color: #e6a23c;
// background-color: #e6a23c;
background-color: #598fff;
}
.lack {
background-color: #a69c8d;
// background-color: #a69c8d;
background-color: #7585a2;
}
.stop {
background-color: #000c;
background-color: #000;
}
.legend-row {
margin: 12px 0;
margin: 6px 0;
padding-right: 12px;
display: flex;
justify-content: flex-end;
> .legend:not(:last-child) {
margin-right: 12px;
}
@@ -441,9 +465,32 @@ export default {
}
.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;
margin-right: 8px;
width: 4px;
border-radius: 1px;
background: #0b58ff;
}
}
</style>