shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[完善]预案进度定时器

beijing
邵佳豪 2 years ago
parent
fd0821cf65
commit
60c491158a
2 changed files with 580 additions and 141 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 675
      src/app/pages/plan/plan.component.scss
  2. 44
      src/app/pages/plan/plan.component.ts

675
src/app/pages/plan/plan.component.scss
Unescape View File

@ -1,40 +1,62 @@
.content{
.content {
width: 100%;
height: 100%;
overflow: hidden;
padding: 0px 10px 10px 10px;
display: flex;
flex-direction: column;
.center { flex: 1; overflow: hidden; position: relative; border: 1px solid #2399FF; box-shadow: 0px 0px 16px #2399FF; }
canvas{ width: 100%; height: 100%; border: none; outline: none; }
.center {
flex: 1;
overflow: hidden;
position: relative;
border: 1px solid #2399FF;
box-shadow: 0px 0px 16px #2399FF;
}
canvas {
width: 100%;
height: 100%;
border: none;
outline: none;
}
}
.loading{ //loading
.loading {
//loading
position: fixed;
left: 0;
top: 0;
z-index: 99999;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.anticon{ font-size: 16px; cursor: pointer; } //字体图标
.anticon {
font-size: 16px;
cursor: pointer;
}
//字体图标
//文本溢出
.overflowText{
.overflowText {
overflow: hidden;
text-overflow:ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
//头部 功能栏
.header{
.header {
width: 100%;
height: 50px;
text-align: center;
overflow: hidden;
position: relative;
button {
box-sizing: border-box;
width: 120px;
@ -48,44 +70,75 @@
cursor: pointer;
margin: 7px 10px 0px;
padding: 0;
label{ display: block; width: 100%; height: 100%; cursor: pointer; .anticon{ font-size: 14px; margin-left: 1px; } }
label {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
.anticon {
font-size: 14px;
margin-left: 1px;
}
}
}
.selectFence { background: linear-gradient(180deg, #000D21 0%, #00404D 49%, #23D9FF 100%); } //选种样式
.rightFence{
.selectFence {
background: linear-gradient(180deg, #000D21 0%, #00404D 49%, #23D9FF 100%);
}
//选种样式
.rightFence {
position: absolute;
top: 0px;
right: 0px;
width: 230px;
height: 50px;
line-height: 50px;
img { cursor: pointer; box-sizing: border-box; width: 36px; height: 36px; margin-left: 10px; }
img {
cursor: pointer;
box-sizing: border-box;
width: 36px;
height: 36px;
margin-left: 10px;
}
}
.selectRightTopFast { border: 1px solid #fff; } //选种样式
.selectRightTopFast {
border: 1px solid #fff;
}
//选种样式
}
//左侧子组件
.leftChildComponent{
.leftChildComponent {
width: 300px;
height: 90%;
position: absolute;
left: 3%;
top: 0;
bottom: 0;
margin: auto;/*这行代码是关键*/
margin: auto;
/*这行代码是关键*/
z-index: 10;
color: #fff;
transition: left 0.5s;
background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%);
display: flex;
flex-direction: column;
.leftChildHeader{
.leftChildHeader {
display: flex;
width: 95%;
height: 30px;
line-height: 30px;
margin: 15px auto;
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%);
div:first-child{
div:first-child {
width: 30px;
height: 30px;
border: 1px solid #2399FF;
@ -93,7 +146,8 @@
border-radius: 50%;
text-align: center;
}
div:nth-child(2){
div:nth-child(2) {
box-sizing: border-box;
margin: 0 10px;
font-weight: 900;
@ -101,25 +155,41 @@
letter-spacing: 3px;
font-style: italic;
flex: 1;
.anticon{ margin-left: 65px; font-size: 18px; color: #23D9FF; vertical-align: -4px; }
.anticon:last-child { margin-left: 10px; }
.anticon {
margin-left: 65px;
font-size: 18px;
color: #23D9FF;
vertical-align: -4px;
}
.anticon:last-child {
margin-left: 10px;
}
}
div:last-child{
div:last-child {
width: 30px;
height: 30px;
text-align: center;
cursor: pointer;
.anticon{ color: #91CCFF; } //字体图标
.anticon {
color: #91CCFF;
}
//字体图标
}
}
.leftChildCenter{
.leftChildCenter {
flex: 1;
overflow: hidden;
}
}
//左侧建筑
.showLeftBuilding{
.showLeftBuilding {
width: 30px;
height: 30px;
line-height: 30px;
@ -129,35 +199,54 @@
top: 50%;
margin-top: -15px;
color: #48A5FF;
background: rgba(0,17,33,0.7);
background: rgba(0, 17, 33, 0.7);
border-radius: 0px 50% 50% 0px;
}
.leftBuilding{
.leftBuilding {
width: 230px;
height: 70%;
position: absolute;
left: 0px;
top: 0;
bottom: 0;
margin: auto;/*这行代码是关键*/
background: rgba(0,17,33,0.7);
margin: auto;
/*这行代码是关键*/
background: rgba(0, 17, 33, 0.7);
border-radius: 0px 10px 10px 0px;
margin-left: 0;
transition: margin-left 0.5s;
display: flex;
flex-direction: column;
.hideLeft { text-align: right; color: #fff; padding: 3px 5px; z-index: 1; }
.hideLeft {
text-align: right;
color: #fff;
padding: 3px 5px;
z-index: 1;
}
.leftHeader {
overflow: hidden;
text-align: center;
margin-top: -15px;
h1 { font-size: 18px; color: #fff; margin-bottom: 10px; }
button { width: 90%; }
h1 {
font-size: 18px;
color: #fff;
margin-bottom: 10px;
}
button {
width: 90%;
}
}
.leftCenter{
.leftCenter {
flex: 1;
overflow-x: hidden;
overflow-y: auto;
.everyBuilding {
height: 30px;
line-height: 30px;
@ -168,19 +257,32 @@
font-size: 16px;
display: flex;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
.modelTitle { font-size: 14px; }
label { display: block; }
.modelTitle {
font-size: 14px;
}
label {
display: block;
}
}
.selectLeftBuilding {
background-color: #2196f3;
}
.selectLeftBuilding { background-color: #2196f3; } //选中样式
//选中样式
}
}
.isShowLeftBuilding{ //隐藏 动态效果
.isShowLeftBuilding {
//隐藏 动态效果
margin-left: -300px;
transition: margin-left 0.5s;
}
//右侧属性栏
.tankFarm{
.tankFarm {
position: absolute;
top: 1%;
left: 3%;
@ -189,14 +291,28 @@
font-size: 14px;
background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%);
display: flex;
div{
div {
height: 32px;
line-height: 32px;
}
.tankFarmLeft{ margin: 0 10px; }
input{ width: 100%; height: 100%; background: transparent; border: none; padding: 0; resize: none; outline: none; }
.tankFarmLeft {
margin: 0 10px;
}
input {
width: 100%;
height: 100%;
background: transparent;
border: none;
padding: 0;
resize: none;
outline: none;
}
}
.nature{
.nature {
width: 230px;
position: absolute;
top: 1%;
@ -205,51 +321,188 @@
font-size: 14px;
border: 1px solid rgba(54, 162, 255, 0.47843137254901963);
background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%);
.natureHeader{ text-align: right; height: 10px; .anticon{ font-size: 18px; margin: 5px 5px 0 0; } }
.natureContent{
.natureHeader {
text-align: right;
height: 10px;
.anticon {
font-size: 18px;
margin: 5px 5px 0 0;
}
}
.natureContent {
box-sizing: border-box;
padding: 0 20px;
margin: 5px 0;
.natureTitle{ margin-bottom: 5px; height: 20px; line-height: 20px; .ant-checkbox-wrapper{ color: #fff; } }
input{ width: 100%; height: 28px; background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; padding: 0; resize: none; outline: none; }
textarea{ width: 100%; height: 75px; background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; padding: 0; resize: none; outline: none; }
.natureImg{ margin-bottom: 5px; position: relative; img{ width: 120px; height: auto; max-height: 100px; } }
.natureUpload{ margin: 0; text-align: center; width: 50px; height: 50px; line-height: 50px; }
.natureTitle {
margin-bottom: 5px;
height: 20px;
line-height: 20px;
.ant-checkbox-wrapper {
color: #fff;
}
}
input {
width: 100%;
height: 28px;
background: rgba(145, 204, 255, 0.41);
border: 1px solid #91CCFF;
padding: 0;
resize: none;
outline: none;
}
textarea {
width: 100%;
height: 75px;
background: rgba(145, 204, 255, 0.41);
border: 1px solid #91CCFF;
padding: 0;
resize: none;
outline: none;
}
.natureImg {
margin-bottom: 5px;
position: relative;
img {
width: 120px;
height: auto;
max-height: 100px;
}
}
.natureUpload {
margin: 0;
text-align: center;
width: 50px;
height: 50px;
line-height: 50px;
}
}
}
.natureLook{
.natureLook {
color: #fff;
.naturePosition{
.naturePosition {
padding: 20px;
position: relative;
.positionLeftTop { position: absolute; width: 10px; height: 10px; left: -1px; top: -1px; border-left: 2px solid #2399FF; border-top: 2px solid #2399FF; } //左上角
.positionLeftBottom { position: absolute; width: 10px; height: 10px; left: -1px; bottom: -1px; border-left: 2px solid #2399FF; border-bottom: 2px solid #2399FF; } //左下角
.positionRightTop { position: absolute; width: 10px; height: 10px; right: -1px; top: -1px; border-right: 2px solid #2399FF; border-top: 2px solid #2399FF; } //右上角
.positionRightBottom { position: absolute; width: 10px; height: 10px; right: -1px; bottom: -1px; border-right: 2px solid #2399FF; border-bottom: 2px solid #2399FF; } //右下角
.positionLeftTop {
position: absolute;
width: 10px;
height: 10px;
left: -1px;
top: -1px;
border-left: 2px solid #2399FF;
border-top: 2px solid #2399FF;
}
//左上角
.positionLeftBottom {
position: absolute;
width: 10px;
height: 10px;
left: -1px;
bottom: -1px;
border-left: 2px solid #2399FF;
border-bottom: 2px solid #2399FF;
}
//左下角
.positionRightTop {
position: absolute;
width: 10px;
height: 10px;
right: -1px;
top: -1px;
border-right: 2px solid #2399FF;
border-top: 2px solid #2399FF;
}
//右上角
.positionRightBottom {
position: absolute;
width: 10px;
height: 10px;
right: -1px;
bottom: -1px;
border-right: 2px solid #2399FF;
border-bottom: 2px solid #2399FF;
}
//右下角
}
input{ border: none; outline: none; background-color: transparent; width: 100%; height: 100%; }
.flowPower{
input {
border: none;
outline: none;
background-color: transparent;
width: 100%;
height: 100%;
}
.flowPower {
width: 200px;
height: 50px;
display: flex;
font-size: 12px;
margin-bottom: 8px;
div{ flex: 1; line-height: 50px; margin-left: -10px; }
img { width: 40%; height: auto; vertical-align: top; }
label { display: inline-block; width: 60%; height: 100%; overflow: hidden; }
p{ width: 100%; height: 25px; line-height: 25px; margin: 0; }
div {
flex: 1;
line-height: 50px;
margin-left: -10px;
}
img {
width: 40%;
height: auto;
vertical-align: top;
}
label {
display: inline-block;
width: 60%;
height: 100%;
overflow: hidden;
}
p {
width: 100%;
height: 25px;
line-height: 25px;
margin: 0;
}
}
.everyNature{
.everyNature {
margin-bottom: 8px;
font-size: 12px;
display: flex;
label{ display: block; flex: 1; }
span{ display: block; width: 60px; height: 100%; }
label {
display: block;
flex: 1;
}
span {
display: block;
width: 60px;
height: 100%;
}
}
}
//右侧图标栏
.rightIcons{
.rightIcons {
width: 60px;
height: 260px;
position: absolute;
@ -258,41 +511,74 @@
color: #fff;
background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%);
overflow: hidden;
.autoScroll{ width: 30px; text-align: center; }
.bottomCenter::-webkit-scrollbar { display: none; }
.autoScroll {
width: 30px;
text-align: center;
}
.bottomCenter::-webkit-scrollbar {
display: none;
}
.bottomCenter {
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
scrollbar-width: none;
/* firefox */
-ms-overflow-style: none;
/* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
}
.bottomCenter{
.bottomCenter {
width: 100%;
height: 100%;
text-align: center;
overflow-x: hidden;
overflow-y: auto;
.everyIcon {
width: 60px;
line-height: normal;
text-align: center;
display: inline-block;
img { width: 40px; height: 40px; margin-top: 3px; cursor: pointer; }
p { margin-bottom: 3px; font-size: 12px; word-break: break-all; }
img {
width: 40px;
height: 40px;
margin-top: 3px;
cursor: pointer;
}
p {
margin-bottom: 3px;
font-size: 12px;
word-break: break-all;
}
}
}
.selectLeftIcon { background: rgb(0,128,255,0.5); } //选中样式
.selectLeftIcon {
background: rgb(0, 128, 255, 0.5);
}
//选中样式
}
//右上角快捷栏
.rightTopFast{
.rightTopFast {
max-width: 400px;
height: 38px;
position: absolute;
right: 1px;
top: 1%;
display: flex;
>div { height: 38px; border-radius: 5px; }
>div {
height: 38px;
border-radius: 5px;
}
button {
width: 38px;
height: 38px;
@ -303,75 +589,183 @@
cursor: pointer;
padding: 0;
}
.save{
.save {
margin: 0 10px;
button{ background-color: #0080FF; border-radius: 5px; }
button:first-child{ margin-right: 10px; }
.anticon{ font-size: 20px; line-height: 40px; } //字体图标
img { cursor: pointer; width: 38px; height: 38px; vertical-align: top; }
button {
background-color: #0080FF;
border-radius: 5px;
}
button:first-child {
margin-right: 10px;
}
.anticon {
font-size: 20px;
line-height: 40px;
}
//字体图标
img {
cursor: pointer;
width: 38px;
height: 38px;
vertical-align: top;
}
}
.publicFast {
padding: 0px 3px;
background-color: rgba(0,0,0,0.5);
background-color: rgba(0, 0, 0, 0.5);
}
.leftFast {
:first-child{ background: url(../../../assets/images/translationThree.png) no-repeat center; }
:nth-child(2){ background: url(../../../assets/images/revolveThree.png) no-repeat center; }
:nth-child(3){ background: url(../../../assets/images/scaleThree.png) no-repeat center; }
:nth-child(4){ background: url(../../../assets/images/adsorb.png) no-repeat center; }
:nth-child(5){ background: url(../../../assets/images/verticalView.png) no-repeat center; }
.leftFastIsTure { border: 1px solid #fff; } //吸附样式
:first-child {
background: url(../../../assets/images/translationThree.png) no-repeat center;
}
:nth-child(2) {
background: url(../../../assets/images/revolveThree.png) no-repeat center;
}
:nth-child(3) {
background: url(../../../assets/images/scaleThree.png) no-repeat center;
}
:nth-child(4) {
background: url(../../../assets/images/adsorb.png) no-repeat center;
}
:nth-child(5) {
background: url(../../../assets/images/verticalView.png) no-repeat center;
}
.leftFastIsTure {
border: 1px solid #fff;
}
//吸附样式
}
.leftFunction {
margin-right: 10px;
}
.selectRightTopFast { border: 1px solid #fff; } //选种样式
.selectRightTopFast {
border: 1px solid #fff;
}
//选种样式
}
//左右侧栏 上移
.publicMoveUp{
.publicMoveUp {
height: 70%;
top: 10%;
bottom: auto;
}
//底部处置预案
.bottomPlan{
.bottomPlan {
width: 95%;
position: absolute;
left: 0;
right: 0;
bottom: 1%;
margin: auto;/*这行代码是关键*/
margin: auto;
/*这行代码是关键*/
color: #fff;
.pulicPlanDiv{ width: 100%; padding: 0 15px; overflow: hidden; background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%); }
.bottomPlanHeader{
.pulicPlanDiv {
width: 100%;
padding: 0 15px;
overflow: hidden;
background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%);
}
.bottomPlanHeader {
height: 80px;
display: flex;
align-items: center;
box-shadow: 0px 0px 6px #2399FF;
.planHeaderText{
.planHeaderText {
flex: 1;
font-size: 14px;
p{ margin: 0; height: 20px; line-height: 18px; }
input{ border: none; outline: none; background-color: transparent; width: 100%; height: 100%; }
textarea{ width: 100%; height: 50px; background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; padding: 0; resize: none; outline: none; }
.lookModelTextarea{ background: transparent; border: none; }
p {
margin: 0;
height: 20px;
line-height: 18px;
}
input {
border: none;
outline: none;
background-color: transparent;
width: 100%;
height: 100%;
}
textarea {
width: 100%;
height: 50px;
background: rgba(145, 204, 255, 0.41);
border: 1px solid #91CCFF;
padding: 0;
resize: none;
outline: none;
}
.lookModelTextarea {
background: transparent;
border: none;
}
}
.planHeaderImg {
width: 100px;
height: 100%;
text-align: center;
position: relative;
margin: 0 30px;
.imgSrc {
width: 100%;
height: 100%;
}
}
.planHeaderVideo {
width: 120px;
height: 100%;
text-align: center;
position: relative;
video {
width: 100%;
height: 100%;
}
}
.planHeaderImg{ width: 100px; height: 100%; text-align: center; position: relative; margin: 0 30px; .imgSrc{ width: 100%; height: 100%; } }
.planHeaderVideo{ width: 120px; height: 100%; text-align: center; position: relative; video{ width: 100%; height: 100%; } }
}
.bottomPlanCenter{
.bottomPlanCenter {
height: 35px;
line-height: 38px;
display: flex;
overflow: hidden;
label{
label {
display: block;
}
label:first-child{
label:first-child {
width: 15%;
height: 100%;
text-align: center;
button {
width: 60%;
height: 30px;
@ -382,22 +776,38 @@
border: 1px solid rgba(35, 217, 255, 0.4);
}
}
label:nth-child(2){
label:nth-child(2) {
flex: 1;
display: flex;
overflow: hidden;
.progress{
.progress {
display: flex;
div { flex: 1; line-height: 30px; }
img{ width: 27px; height: 35px; display: block; cursor: pointer; }
div {
flex: 1;
line-height: 30px;
}
img {
width: 27px;
height: 35px;
display: block;
cursor: pointer;
}
}
}
label:last-child{
label:last-child {
width: 15%;
height: 100%;
text-align: center;
color: #fff;
.anticon{ font-size: 20px; margin: 0 10px; }
.anticon {
font-size: 20px;
margin: 0 10px;
}
}
}
}
@ -405,29 +815,52 @@
// 媒体查询
// 适配125%
@media screen and (max-height: 750px) {
.header{
button{ width: 80px; margin: 7px 5px 0px; }
.rightFence{
img{ width: 30px; height: 30px; }
.header {
button {
width: 80px;
margin: 7px 5px 0px;
}
.rightFence {
img {
width: 30px;
height: 30px;
}
}
}
.nature{ right: 7% !important; }
.publicMoveUp{
.nature {
right: 7% !important;
}
.publicMoveUp {
height: 70%;
top: 3%;
bottom: auto;
}
}
// 适配150%
@media screen and (max-height: 600px) {
.header{
button{ width: 80px; margin: 7px 5px 0px; }
.rightFence{
img{ width: 30px; height: 30px; }
.header {
button {
width: 80px;
margin: 7px 5px 0px;
}
.rightFence {
img {
width: 30px;
height: 30px;
}
}
}
.nature{ right: 8% !important; }
.publicMoveUp{
.nature {
right: 8% !important;
}
.publicMoveUp {
height: 70%;
top: 1%;
bottom: auto;

44
src/app/pages/plan/plan.component.ts
Unescape View File

@ -547,7 +547,7 @@ export class PlanComponent implements OnInit {
this.beforePlanNode = new MarkNodeData(-99, "请选择应急预案")
this.isSuspend = false //初始化暂停状态
this.progressList = []
window.clearTimeout(this.updateTimer) //清除定时器
window.clearInterval(this.updateTimer) //清除定时器
}
//公用 切换选中节点
@ -573,7 +573,7 @@ export class PlanComponent implements OnInit {
//选中 底部一级节点 开启自动播放
selectChildNode(item: MarkPlanData) {
if (item.nodes.length) {
this.updateTimer ? window.clearTimeout(this.updateTimer) : null //清除定时器
this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
this.isSuspend = false
this.nzCurrent = 0
this.beforeEmergencyPlan = item
@ -595,24 +595,28 @@ export class PlanComponent implements OnInit {
}
//更新进度条 值
xxx = 0
updateProgress() {
window.clearInterval(this.updateTimer) //清除定时器
if (this.isShowLoading) { //当前为loading状态
window.setTimeout(() => {
this.updateProgress()
}, 500);
return
}
if (this.progressList[this.nzCurrent] >= 100) {
this.progressList[this.nzCurrent] = 100
window.clearTimeout(this.updateTimer) //清除定时器
!this.isSuspend ? this.autoPlay() : null
}, 0);
return
}
let time: number = this.beforePlanNode.getShowTime() || 1
this.updateTimer = window.setTimeout(() => {
this.progressList[this.nzCurrent] = this.progressList[this.nzCurrent] + Number((100 / time).toFixed(2)) / 10
this.updateProgress()
}, 100)
this.updateTimer = window.setInterval(() => {
this.progressList[this.nzCurrent] = Math.ceil(this.progressList[this.nzCurrent] + Number((1000 / time).toFixed(2)) / 10)
console.log('进度百分比', this.progressList[this.nzCurrent], new Date().getTime() - this.xxx)
this.xxx = new Date().getTime()
if (this.progressList[this.nzCurrent] >= 100) {
this.progressList[this.nzCurrent] = 100
window.clearInterval(this.updateTimer) //清除定时器
!this.isSuspend ? this.autoPlay() : null
return
}
}, 1000)
}
@ -631,7 +635,7 @@ export class PlanComponent implements OnInit {
if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) {
this.updateProgressList()
}
this.updateTimer ? window.clearTimeout(this.updateTimer) : null //清除定时器
this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
this.isSuspend = false //取消暂停
this.nzCurrent = event
this.progressList.forEach((item, index) => { index >= this.nzCurrent ? this.progressList[index] = 0 : this.progressList[index] = 100 })
@ -651,7 +655,7 @@ export class PlanComponent implements OnInit {
if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) {
this.updateProgressList()
}
this.updateTimer ? window.clearTimeout(this.updateTimer) : null //清除定时器
this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
this.nzCurrent = this.nzCurrent - 1
this.progressList.forEach((item, index) => { index >= this.nzCurrent ? this.progressList[index] = 0 : this.progressList[index] = 100 })
this.publicToggleNode()
@ -670,10 +674,10 @@ export class PlanComponent implements OnInit {
let msg: string = this.isSuspend ? "目前已暂停" : "目前已开始播放"
this.message.info(msg);
if (this.isSuspend) { //暂停
window.clearTimeout(this.updateTimer) //清除定时器
window.clearInterval(this.updateTimer) //清除定时器
SpeakingTool.Instance.pause()
} else { //开启
this.updateTimer ? window.clearTimeout(this.updateTimer) : null //清除定时器
this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
SpeakingTool.Instance.resume()
this.progressList.forEach((item, index) => { index > this.nzCurrent ? this.progressList[index] = 0 : null })
if (this.progressList[this.nzCurrent] === 0) { MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id, false, true) }
@ -687,7 +691,7 @@ export class PlanComponent implements OnInit {
this.message.info('请选择节点');
return
}
this.updateTimer ? window.clearTimeout(this.updateTimer) : null //清除定时器
this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
this.updateProgressList().then(res => {
this.isSuspend = false
this.nzCurrent = 0
@ -708,7 +712,7 @@ export class PlanComponent implements OnInit {
if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) {
this.updateProgressList()
}
this.updateTimer ? window.clearTimeout(this.updateTimer) : null //清除定时器
this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
this.nzCurrent = this.nzCurrent + 1
this.progressList.forEach((item, index) => { index >= this.nzCurrent ? this.progressList[index] = 0 : this.progressList[index] = 100 })
this.publicToggleNode()
@ -716,6 +720,8 @@ export class PlanComponent implements OnInit {
//获取进度条 flex分布
getProgressFlex(e: MarkNodeData): string {
// console.log(111, e)
// console.log(222, this.beforeEmergencyPlan.nodes)
let length: number = 0
this.beforeEmergencyPlan.nodes.forEach(item => {
length = length + (item.getShowTime() || 1)

Write Preview
Loading…
Cancel
Save