|
|
|
|
@ -1,10 +1,10 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<el-drawer title=" "
|
|
|
|
|
<el-drawer title="已完成调令"
|
|
|
|
|
:modal="false"
|
|
|
|
|
:visible.sync="drawer"
|
|
|
|
|
direction="rtl"
|
|
|
|
|
size="74%">
|
|
|
|
|
size="76%">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<p>已完成</p>
|
|
|
|
|
@ -12,44 +12,54 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-scrollbar ref="elScrollbar" class="scrollbar-wrapper">
|
|
|
|
|
<div class="list">
|
|
|
|
|
<div v-for="(item, index) in done" :key="item.id" ref="listItem" class="list-item">
|
|
|
|
|
<!-- <div class="list-item__status">-->
|
|
|
|
|
<!-- <template v-if="timeStatusFormat(item) === 2">-->
|
|
|
|
|
<!-- <div class="list-item__status-2"></div>-->
|
|
|
|
|
<!-- <p>【存在执行中指令】</p>-->
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- <template v-else-if="timeStatusFormat(item) === 3">-->
|
|
|
|
|
<!-- <div class="list-item__status-3"></div>-->
|
|
|
|
|
<!-- <p>【倒计时{{ $moment(item.start_time).diff($moment(time),'minutes') }}分钟】</p>-->
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- <template v-else-if="timeStatusFormat(item) === 4">-->
|
|
|
|
|
<!-- <div class="list-item__status-4"></div>-->
|
|
|
|
|
<!-- <p>【超时未执行】</p>-->
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- <template v-else>-->
|
|
|
|
|
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<div class="list-item__name">
|
|
|
|
|
{{ item.equipment_id_equipments_id_relation ? item.equipment_id_equipments_id_relation.name : '' }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list-item__time">
|
|
|
|
|
实际执行时间:{{ timeFormat(item.act_start_time) }}至{{ timeFormat(item.act_end_time,'HH:mm') }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list-item__last">预计时长 {{ $moment(item.end_time).diff($moment(item.start_time),'hours') }}时</div>
|
|
|
|
|
<div class="list-item__operate">
|
|
|
|
|
<div v-for="(s, si) in status" class="step">
|
|
|
|
|
<div class="step-icon">
|
|
|
|
|
<div class="step-icon__cir" :class="`step-icon__cir-${stepFormat(item.status,s.value)}`"></div>
|
|
|
|
|
<div class="step-icon__line" :class="`step-icon__line-${stepFormat(item.status,s.value)}`" v-if="si < status.length-1"></div>
|
|
|
|
|
<template v-if="done && done.length > 0">
|
|
|
|
|
<div class="list">
|
|
|
|
|
<div v-for="(item, index) in done" :key="item.id" ref="listItem" class="list-item">
|
|
|
|
|
<!-- <div class="list-item__status">-->
|
|
|
|
|
<!-- <template v-if="timeStatusFormat(item) === 2">-->
|
|
|
|
|
<!-- <div class="list-item__status-2"></div>-->
|
|
|
|
|
<!-- <p>【存在执行中指令】</p>-->
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- <template v-else-if="timeStatusFormat(item) === 3">-->
|
|
|
|
|
<!-- <div class="list-item__status-3"></div>-->
|
|
|
|
|
<!-- <p>【倒计时{{ $moment(item.start_time).diff($moment(time),'minutes') }}分钟】</p>-->
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- <template v-else-if="timeStatusFormat(item) === 4">-->
|
|
|
|
|
<!-- <div class="list-item__status-4"></div>-->
|
|
|
|
|
<!-- <p>【超时未执行】</p>-->
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- <template v-else>-->
|
|
|
|
|
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<div class="list-item__name">
|
|
|
|
|
{{ item.equipment_id_equipments_id_relation ? item.equipment_id_equipments_id_relation.name : '' }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list-item__content">
|
|
|
|
|
<el-tooltip class="item" effect="dark" :content="item.content" placement="top-start">
|
|
|
|
|
<span>{{ item.content }}</span>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list-item__time">
|
|
|
|
|
实际执行时间:{{ timeFormat(item.act_start_time) }}至{{ timeFormat(item.act_end_time,'HH:mm') }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list-item__last">预计时长 {{ $moment(item.end_time).diff($moment(item.start_time),'hours') }}时</div>
|
|
|
|
|
<div class="list-item__operate">
|
|
|
|
|
<div v-for="(s, si) in status" class="step">
|
|
|
|
|
<div class="step-icon">
|
|
|
|
|
<div class="step-icon__cir" :class="`step-icon__cir-${stepFormat(item.status,s.value)}`"></div>
|
|
|
|
|
<div class="step-icon__line" :class="`step-icon__line-${stepFormat(item.status,s.value)}`" v-if="si < status.length-1"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="step-label">{{ s.label }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="step-label">{{ s.label }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<Button type="primary" size="small" class="list-item__btn" @click="stepClick(item,{},true)">查看</Button>
|
|
|
|
|
</div>
|
|
|
|
|
<Button type="primary" size="small" class="list-item__btn" @click="stepClick(item,{},true)">查看</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<el-empty description="暂无完成调令"></el-empty>
|
|
|
|
|
</template>
|
|
|
|
|
</el-scrollbar>
|
|
|
|
|
</div>
|
|
|
|
|
</el-drawer>
|
|
|
|
|
@ -182,7 +192,13 @@ $list-height: calc(#{$container-height} - 5.33rem);
|
|
|
|
|
border-radius: 0.67rem;
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 4rem 3.62rem 0 3.62rem;
|
|
|
|
|
margin: 3rem 3.62rem 0 3.62rem;
|
|
|
|
|
}
|
|
|
|
|
.list-item {
|
|
|
|
|
transition: all .4s;
|
|
|
|
|
}
|
|
|
|
|
.list-item-enter-from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
.header {
|
|
|
|
|
font-size: 1.15rem;
|
|
|
|
|
@ -221,7 +237,7 @@ $list-height: calc(#{$container-height} - 5.33rem);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.list {
|
|
|
|
|
max-height: $list-height;
|
|
|
|
|
height: $list-height;
|
|
|
|
|
|
|
|
|
|
&-item {
|
|
|
|
|
font-size: 1.15rem;
|
|
|
|
|
@ -244,7 +260,6 @@ $list-height: calc(#{$container-height} - 5.33rem);
|
|
|
|
|
@if $i == 3 {
|
|
|
|
|
border: 1px solid #d15d52aa;
|
|
|
|
|
border-bottom: 1px solid #d15d52aa !important;
|
|
|
|
|
animation: shine 2s infinite ease-out;
|
|
|
|
|
|
|
|
|
|
& + & {
|
|
|
|
|
border-top: none;
|
|
|
|
|
@ -252,14 +267,6 @@ $list-height: calc(#{$container-height} - 5.33rem);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@keyframes shine {
|
|
|
|
|
from {
|
|
|
|
|
filter: drop-shadow(0 0 1px rgba(227, 92, 79, 0.67));
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
filter: drop-shadow(0 0 4px #d15d52aa);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&__status {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
@ -285,22 +292,28 @@ $list-height: calc(#{$container-height} - 5.33rem);
|
|
|
|
|
font-size: 1.34rem;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
&__content {
|
|
|
|
|
flex-basis: 14%;
|
|
|
|
|
word-break: keep-all;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
&__time {
|
|
|
|
|
flex-basis: 26%;
|
|
|
|
|
flex-basis: 26.6%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
&__last {
|
|
|
|
|
flex-basis: 9%;
|
|
|
|
|
flex-basis: 7.8%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
&__operate {
|
|
|
|
|
flex-basis: 31%;
|
|
|
|
|
flex-basis: 30%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
.step {
|
|
|
|
|
width: 6.6rem;
|
|
|
|
|
width: 5rem;
|
|
|
|
|
|
|
|
|
|
&-icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -309,6 +322,8 @@ $list-height: calc(#{$container-height} - 5.33rem);
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
$done-color: #ec6a5e;
|
|
|
|
|
$doing-color: #7ccac8;
|
|
|
|
|
&__cir {
|
|
|
|
|
width: 2.2rem;
|
|
|
|
|
height: 2.2rem;
|
|
|
|
|
@ -320,7 +335,7 @@ $list-height: calc(#{$container-height} - 5.33rem);
|
|
|
|
|
&-doing {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transform: scale(.9, .9);
|
|
|
|
|
background: #6fc0af;
|
|
|
|
|
background: $doing-color;
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
@ -329,10 +344,10 @@ $list-height: calc(#{$container-height} - 5.33rem);
|
|
|
|
|
width: 132%;
|
|
|
|
|
height: 132%;
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
background: #6fc0af65;
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
background: $doing-color;
|
|
|
|
|
transform: translate(-50%,-50%);
|
|
|
|
|
animation: scale infinite ease-out 4s;
|
|
|
|
|
transform-origin: 50% 50%;
|
|
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
@ -343,12 +358,12 @@ $list-height: calc(#{$container-height} - 5.33rem);
|
|
|
|
|
transform: translate(-50%,-50%);
|
|
|
|
|
}
|
|
|
|
|
50% {
|
|
|
|
|
transform: translate(-50%,-50%) scale(1.08, 1.08);
|
|
|
|
|
transform: translate(-50%,-50%) scale(1.1,1.1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&-done {
|
|
|
|
|
background: #7ccac8;
|
|
|
|
|
background: $done-color;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&__line {
|
|
|
|
|
@ -360,7 +375,7 @@ $list-height: calc(#{$container-height} - 5.33rem);
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
|
|
|
|
&-done {
|
|
|
|
|
background: #7ccac8;
|
|
|
|
|
background: $done-color;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|