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

lb #30

Merged
g7hoo merged 23 commits from lb into test 2023-09-22 09:57:16 +08:00
Conversation 0 Commits 23 Files Changed 41 +165 -118
4 changed files with 165 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 928258e509 - Show all commits

2
src/views/base/equipmentBindGroup/index.vue
View File

@@ -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);

2
src/views/base/equipmentGroup/index.vue
View File

@@ -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);

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

@@ -6,29 +6,51 @@
--> -->
<template> <template>
<div class="app-container"> <div class="status-timegraph-container" style="background: #f2f4f9; flex: 1">
<h1>设备状态时序图</h1> <el-row
<!-- 搜索工作栏 --> class=""
<SearchBar style="
:formConfigs="searchBarFormConfig" margin-bottom: 12px;
ref="search-bar" background: #fff;
@headBtnClick="handleSearchBarBtnClick" /> 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"> <el-row
<div class="legend-row"> class=""
<div class="legend"> style="
<div class="icon running"></div> margin-bottom: 12px;
<div>运行中</div> background: #fff;
</div> padding: 16px 16px 32px;
<!-- <div class="legend"> 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 class="icon waiting"></div>
<div>待机</div> <div>待机</div>
</div> --> </div> -->
<div class="legend"> <div class="legend">
<div class="icon fault"></div> <div class="icon fault"></div>
<div>故障</div> <div>故障</div>
</div> </div>
<!-- <div class="legend"> <!-- <div class="legend">
<div class="icon lack"></div> <div class="icon lack"></div>
<div>缺料</div> <div>缺料</div>
</div> </div>
@@ -36,83 +58,51 @@
<div class="icon full"></div> <div class="icon full"></div>
<div>满料</div> <div>满料</div>
</div> --> </div> -->
<div class="legend"> <div class="legend">
<div class="icon stop"></div> <div class="icon stop"></div>
<div>计划停机</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> </div>
<h2 v-else>请添加设备</h2>
</div> </div>
<div class="graphs" v-if="graphList.length"> </el-row>
<!-- <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>
<!-- 对话框(添加 / 修改) --> <!-- 对话框(添加 / 修改) -->
<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>

2
src/views/monitoring/equipmentStatusAndParams/index.vue
View File

@@ -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);