openatc-components 0.1.139 → 0.1.142

package/package/kisscomps/components/CommonKanban/CommonKanban.vue

@@ -27,8 +27,10 @@
             <el-tooltip class="item" effect="dark" placement="left">
               <div slot="content">{{element.name}}</div>
               <div class="common-phase-description">
-                <xdrdirselector Width="40px"
-                  Height="40px"
+                <xdrdirselector Width="70px"
+                  Height="70px"
+                  Widths="60px"
+                  Heights="60px"
                   :showlist="element.desc"
                   :ISActiveMask="ISActiveMask"
                   :MaskColor="MaskColor"
@@ -50,8 +52,10 @@
               <div slot="content">{{element.name}}</div>
               <div class="common-phase-description">
                 <!-- <patternwalksvg :sidewalkPhaseData="sidewalkPhaseData" :showWalk="element.peddirection" Width="38" Height="40"></patternwalksvg> -->
-                <xdrdirselector Width="40px"
-                  Height="40px"
+                <xdrdirselector Width="70px"
+                  Height="70px"
+                  Widths="60px"
+                  Heights="60px"
                   :showlist="element.desc"
                   :ISActiveMask="ISActiveMask"
                   :MaskColor="MaskColor"

package/package/kisscomps/components/DrawChannelization/drawsvg/overlapAssociatedComponent.vue

@@ -18,7 +18,7 @@
         </div>
 
         <div class="phase-icon" v-if="item.direction">
-          <xdr-dir-selector Width="44px" Height="44px" :showlist="getShowlist(item)" :roadDirection="roadDirection"></xdr-dir-selector>
+          <xdr-dir-selector Width="60px" Height="60px" Widths="50px" Heights="50px" :showlist="getShowlist(item)" :roadDirection="roadDirection"></xdr-dir-selector>
         </div>
       </div>
       <div class="single-phase-name">{{$t('openatccomponents.channelizationmap.phase') + item.id}}</div>

package/package/kisscomps/components/DrawChannelization/drawsvg/phaseAssociatedComponent.vue

@@ -18,7 +18,7 @@
         </div>
 
         <div class="phase-icon" v-if="item.direction">
-          <xdr-dir-selector Width="44px" Height="44px" :showlist="getShowlist(item)" :roadDirection="roadDirection"></xdr-dir-selector>
+          <xdr-dir-selector Width="50px" Height="50px" Widths="60px" Heights="60px" :showlist="getShowlist(item)" :roadDirection="roadDirection"></xdr-dir-selector>
         </div>
       </div>
       <div class="single-phase-name">{{$t('openatccomponents.channelizationmap.phase') + item.id}}</div>

package/package/kisscomps/components/ExpendConfig/ExpendConfig.vue

@@ -26,7 +26,7 @@
             <el-tooltip class="item" effect="dark" placement="left">
               <div slot="content">{{element.name}}</div>
               <div class="common-phase-description">
-                <xdrdirselector Width="40px" Height="40px" :showlist="element.desc" :ISActiveMask="ISActiveMask" :MaskColor="MaskColor"></xdrdirselector>
+                <xdrdirselector  Width="60px" Height="60px" Widths="50px" Heights="50px" :showlist="element.desc" :ISActiveMask="ISActiveMask" :MaskColor="MaskColor"></xdrdirselector>
               </div>
             </el-tooltip>
         </el-col>

package/package/kisscomps/components/KanBan/kanban.vue

@@ -23,7 +23,7 @@
             <el-tooltip class="item" effect="dark" placement="left">
               <div slot="content">{{element.name}}</div>
               <div class="common-phase-description">
-                <xdrdirselector Width="40px" Height="40px" :showlist="element.desc" :ISActiveMask="ISActiveMask" :MaskColor="MaskColor"></xdrdirselector>
+                <xdrdirselector  Width="60px" Height="60px" Widths="50px" Heights="50px" :showlist="element.desc" :ISActiveMask="ISActiveMask" :MaskColor="MaskColor"></xdrdirselector>
               </div>
             </el-tooltip>
         </el-col>

package/package/kisscomps/components/OverLap/OverLap.vue

@@ -14,7 +14,7 @@
                 <div style="cursor:pointer;">
                     <div class="ring-phase">
                         <!-- <patternwalksvg :showWalk="list.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg> -->
-                        <xdrdirselector  Width="36px" Height="34px" :showlist="item.direction"></xdrdirselector>
+                        <xdrdirselector  Width="60px" Height="60px" Widths="50px" Heights="50px" :showlist="item.direction"></xdrdirselector>
                     </div>
                     <div class="box">
                         <div class="ring-nums">
@@ -136,7 +136,7 @@ export default {
       let overlapData = overlap.map(item => {
         let findIndexs = []
         item.includedphases.forEach(i => {
-          const findItems = stageList.filter(j => j.stages.includes(i))
+          const findItems = stageList.filter(j => j.phases.includes(i))
           if (findItems.length) findIndexs.push(...findItems.map(m => m.key))
         })
         findIndexs = Array.from(new Set(findIndexs))

package/package/kisscomps/components/PatternOptimize/PatternOptimize.vue

@@ -50,7 +50,7 @@
             <el-tooltip class="item" effect="dark" placement="left">
               <div slot="content">{{element.name}}</div>
               <div class="common-phase-description">
-                <xdrdirselector Width="40px" Height="40px" :Data="showStyle" :showlist="element.desc" :ISActiveMask="ISActiveMask" :MaskColor="MaskColor"></xdrdirselector>
+                <xdrdirselector Width="60px" Height="60px" Widths="50px" Heights="50px" :Data="showStyle" :Datas="showStyle" :showlist="element.desc" :ISActiveMask="ISActiveMask" :MaskColor="MaskColor"></xdrdirselector>
               </div>
             </el-tooltip>
         </el-col>

package/package/kisscomps/components/PatternStatus/PatternStatus.vue

@@ -15,32 +15,32 @@
       <div v-if="this.contrloType === 'ring' || !this.contrloType">
         <div class="ring-first" v-for="(list, index1) in patternInfo" :key="index1">
           <div style="position: relative;" :style="{'height': '34px','float':'left','width':((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100).toFixed(3) + '%'}"  v-for="(item,index2) in list" :key="index2" :class="item.mode===7?'direction': ''">
-            <div class="first-1" :class="item.mode===8?'mask': ''" :style="{'width':Number(item.greenWidth.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100).toFixed(3) + '%').replace('%', ''))*100+'%','height':'34px','background':'#7ccc66'}">
+            <div class="first-1" :class="item.mode===8?'masks': ''" :style="{'width':Number(item.greenWidth.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100).toFixed(3) + '%').replace('%', ''))*100+'%','height':'34px','background':'#7ccc66'}">
                 <el-tooltip placement="top-start" effect="light">
                   <div slot="content">P{{item.id}}:{{item.split}}</div>
                   <div style="cursor:pointer;">
                     <div class="ring-phase">
                       <!-- <patternwalksvg :showWalk="item.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg> -->
-                      <xdrdirselector  Width="38px" Height="36px" :showlist="item.direction"></xdrdirselector>
+                      <xdrdirselector  Width="60px" Height="60px" Widths="50px" Heights="50px" :showlist="item.direction"></xdrdirselector>
                     </div>
-                    <div class="box" style="position: absolute; left:40px;top: 2px;">
+                    <div class="box" style="position: absolute; left:40px;top: -1px;">
                       <div class="ring-nums">P{{item.id}}</div>
                       <div class="ring-nums">{{item.split}}</div>
                     </div>
                   </div>
                 </el-tooltip>
                 <div style="width:50px;" v-for="(bus,index3) in busPhaseData" :key="index3">
-                  <i class="iconfont icon-lukouzhilu" style="position: absolute;top: 8px;left:60px;font-size:12px;color:#454545;" v-if="bus.controltype === 1 && bus.phaseid===item.id"></i>
-                  <i class="iconfont icon-BRT" style="position: absolute;top: 8px;left:60px;font-size:12px;color:#454545;" v-if="bus.controltype === 4 && bus.phaseid===item.id"></i>
-                  <i class="iconfont icon-xuxiangwei-xin" style="position: absolute;top: 8px;left:60px;font-size:12px;color:#454545;" v-if="bus.controltype === 99 && bus.phaseid===item.id"></i>
-                  <i class="iconfont icon-feijidongche" style="position: absolute;top: 8px;left:60px;font-size:12px;color:#454545;" v-if="bus.controltype === 6 && bus.phaseid===item.id"></i>
-                  <i class="iconfont icon-gongjiaoche" style="position: absolute;top: 8px;left:60px;font-size:12px;color:#454545;" v-if="bus.controltype === 3 && bus.phaseid===item.id"></i>
-                  <i class="iconfont icon-youguidianche" style="position: absolute;top: 8px;left:60px;font-size:12px;color:#454545;" v-if="bus.controltype === 5 && bus.phaseid===item.id"></i>
+                  <i class="iconfont icon-lukouzhilu" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 1 && bus.phaseid===item.id"></i>
+                  <i class="iconfont icon-BRT" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 4 && bus.phaseid===item.id"></i>
+                  <i class="iconfont icon-xuxiangwei-xin" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 99 && bus.phaseid===item.id"></i>
+                  <i class="iconfont icon-feijidongche" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 6 && bus.phaseid===item.id"></i>
+                  <i class="iconfont icon-gongjiaoche" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 3 && bus.phaseid===item.id"></i>
+                  <i class="iconfont icon-youguidianche" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 5 && bus.phaseid===item.id"></i>
                 </div>
               </div>
-              <div class="first-1" :class="item.mode===8?'mask': ''" :style="{'width':Number(item.flashgreen.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100).toFixed(3) + '%').replace('%', ''))*100+'%','height':'34px','float':'left','background': 'linear-gradient(to right, #ffffff 50%, #7ccc66 0)','background-size': '4px 100%'}"></div>
-              <div class="first-1" :class="item.mode===8?'mask': ''" :style="{'width':Number(item.yellowWidth.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100).toFixed(3) + '%').replace('%', ''))*100+'%','height':'34px','background':'#f9dc6a'}"></div>
-              <div class="first-1" :class="item.mode===8?'mask': ''" :style="{'width':Number(item.redWidth.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100).toFixed(3) + '%').replace('%', ''))*100+'%','height':'34px','background':'#f27979'}"></div>
+              <div class="first-1" :class="item.mode===8?'masks': ''" :style="{'width':Number(item.flashgreen.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100).toFixed(3) + '%').replace('%', ''))*100+'%','height':'34px','float':'left','background': 'linear-gradient(to right, #ffffff 50%, #7ccc66 0)','background-size': '4px 100%'}"></div>
+              <div class="first-1" :class="item.mode===8?'masks': ''" :style="{'width':Number(item.yellowWidth.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100).toFixed(3) + '%').replace('%', ''))*100+'%','height':'34px','background':'#f9dc6a'}"></div>
+              <div class="first-1" :class="item.mode===8?'masks': ''" :style="{'width':Number(item.redWidth.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100).toFixed(3) + '%').replace('%', ''))*100+'%','height':'34px','background':'#f27979'}"></div>
               </div>
           </div>
         <div v-if="showBarrier">
@@ -60,19 +60,19 @@
                 <el-tooltip placement="top-start" effect="light">
                   <div slot="content">
                     <span class="ring-nums" v-for="(pha,index) in list.phases" :key="index">
-                      P:{{pha}}
+                      P{{pha}}
                       </span>
                   </div>
                   <div style="cursor:pointer;">
                     <div class="ring-phase">
                       <!-- <patternwalksvg :showWalk="list.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg> -->
-                      <xdrdirselector  Width="36px" Height="34px" :showlist="list.direction"></xdrdirselector>
+                      <xdrdirselector  Width="60px" Height="60px" Widths="50px" Heights="50px" :showlist="list.direction"></xdrdirselector>
                     </div>
-                    <div class="box" style="line-height:28px">
+                    <!-- <div class="box" style="line-height:28px">
                       <span class="ring-nums" v-for="(pha,index) in list.phases" :key="index">
                     P:{{pha}}
                       </span>
-                    </div>
+                    </div> -->
                   </div>
                 </el-tooltip>
               </div>
@@ -323,17 +323,18 @@ export default {
         if (directionList.length === 0) {
           tempList.push({
             id: '',
-            color: '#606266',
+            color: '#454545',
             peddirection: peddirections
           })
         } else {
           tempList = directionList.map(dir => ({
             id: dir,
-            color: '#606266',
+            color: '#454545',
             peddirection: peddirections
           }))
         }
-        stagesTemp.push(...tempList)
+        let newTemp = tempList.filter(item => item.id !== '')
+        stagesTemp.push(...newTemp)
       }
       return stagesTemp
     },
@@ -1355,7 +1356,7 @@ export default {
 .direction {
   filter: brightness(70%);
 }
-.mask {
+.masks {
   background: rgb(242, 121, 121) !important;
 }
 .first-1 {

package/package/kisscomps/components/PhaseMarker/phasemarker.vue

@@ -7,7 +7,7 @@
     <phaseCountCycle v-if="showLevel === 3"></phaseCountCycle>
     <div class="dirwrap">
       <xdrdirselector
-        Width="40px" Height="40px"
+        Width="60px" Height="60px" Widths="50px" Heights="50px"
         :showlist="dirshow">
       </xdrdirselector>
     </div>

package/package/kisscomps/components/SchemeConfig/SchemeConfig.vue

@@ -731,7 +731,7 @@ export default {
             return
           }
         }
-        this.$alert(this.$t('openatccomponents.common.download'), { type: 'success' })
+        this.$message.success(this.$t('openatccomponents.common.download'))
       }).catch(error => {
         this.unlockScreen()
         console.log(error)

package/package/kisscomps/components/SchemeConfig/azimuthlocking/index.vue

@@ -59,7 +59,7 @@
             <div style="margin-top:20px" class="model-label-title">{{currentName}}{{$t('openatccomponents.overview.currentphase')}}:</div>
             <div class="control-model" v-for="(item, index) in sidewalkPhaseData" :key="index">
                 <div style="position:relative;"  class="single-model">
-                <xdr-dir-selector Width="40PX" Height="40PX" :Data="showStyle" :showlist="item"></xdr-dir-selector>
+                <xdr-dir-selector Width="75PX" Height="75PX"  Widths="65PX" Heights="65PX" :Data="showStyle" :Datas="showStyles" :showlist="item"></xdr-dir-selector>
                 <div style="height:65px;display:flex;flex-direction:row;justify-content:center;align-items:end;">
                     <div class="current-stage-num" style="width:20%;">{{index + 1}}</div>
                     <div style="width:70%;">
@@ -102,7 +102,7 @@
 <script>
 import { getPhase } from './utils'
 import { getIframdevid } from '../../../../utils/auth'
-import { getlockPhase, lockPhase } from '../../../../api/control'
+import { getlockPhase, lockPhase, getAllDerection } from '../../../../api/control'
 import Stages from '../../Stages/index'
 import RingDataModel from '../../../../utils/RingDataModel.js'
 import { getMessageByCode } from '../../../../utils/responseMessage'
@@ -142,18 +142,25 @@ export default {
         obj.name = this.$t(obj.name)
         arrays.push(obj)
       })
-      return arrays
+      let arr1Ids = this.allDirection.map(item => item.id)
+      const result = arrays.filter(item => arr1Ids.includes(item.id))
+      return result
     }
   },
   data () {
     return {
       showStyle: {
+        top: '7PX',
+        left: '13px'
+      },
+      showStyles: {
         top: '5PX',
-        left: '14px'
+        left: '12px'
       },
       sidewalkPhaseData: [],
       currentName: '',
       lockList: [],
+      allDirection: [],
       patternCycleEqual: true,
       spanIndex: [],
       directions: [],
@@ -167,25 +174,59 @@ export default {
     }
   },
   created () {
+    this.getAllDerection()
   },
   methods: {
     checkId (val) {
       if (val.id === 1) {
-        return 2
-      } else if (val.id === 5) {
         return 1
+      } else if (val.id === 5) {
+        return 2
       } else if (val.id === 13) {
-        return 4
-      } else if (val.id === 9) {
         return 3
+      } else if (val.id === 9) {
+        return 4
       } else if (val.id === 17) {
-        return 8
+        return 6
       } else if (val.id === 21) {
-        return 5
-      } else if (val.id === 25) {
         return 7
+      } else if (val.id === 25) {
+        return 5
       } else if (val.id === 29) {
-        return 6
+        return 8
+      }
+    },
+    getAllDerection () {
+      let iframdevid = getIframdevid()
+      getAllDerection(iframdevid).then((res) => {
+        if (res.data.success !== true) {
+          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
+          return
+        }
+        this.allDirection = res.data.data.map(item => {
+          return {
+            id: this.checkDirection(item.direction)
+          }
+        })
+      })
+    },
+    checkDirection (id) {
+      if (id === 1) {
+        return 1
+      } else if (id === 2) {
+        return 5
+      } else if (id === 3) {
+        return 13
+      } else if (id === 4) {
+        return 9
+      } else if (id === 5) {
+        return 25
+      } else if (id === 6) {
+        return 17
+      } else if (id === 7) {
+        return 21
+      } else if (id === 8) {
+        return 29
       }
     },
     getLockPhase (val) {
@@ -248,7 +289,7 @@ export default {
           this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
           return
         }
-        this.$alert(this.$t('openatccomponents.common.download'), { type: 'success' })
+        this.$message.success(this.$t('openatccomponents.common.download'))
         // if (res.data.success !== true) {
         //   this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
         // }

package/package/kisscomps/components/SchemeConfig/azimuthlocking/utils.js

@@ -14,56 +14,56 @@ let images = [
   {
     id: 1,
     // name: 'East-Straight',
-    name: 'openatccomponents.overview.es',
+    name: 'openatccomponents.overview.dong',
     // img: require('./images/East-Straight.svg'),
     class: 'iconfont icon-dongzhihang'
   },
   {
     id: 5,
     // name: 'West-Straight',
-    name: 'openatccomponents.overview.ws',
+    name: 'openatccomponents.overview.xi',
     // img: require('./images/West-Straight.svg'),
     class: 'iconfont icon-xizhihang'
   },
   {
     id: 13,
     // name: 'South-Straight',
-    name: 'openatccomponents.overview.ss',
+    name: 'openatccomponents.overview.nan',
     // img: require('./images/South-Straight.svg'),
     class: 'iconfont icon-nanzhihang'
   },
   {
     id: 9,
     // name: 'North-Straight',
-    name: 'openatccomponents.overview.ns',
+    name: 'openatccomponents.overview.bei',
     // img: require('./images/North-Straight.svg'),
     class: 'iconfont icon-beizhihang'
   },
   {
     id: 17,
     // name: 'South-Back',
-    name: 'openatccomponents.overview.ses',
+    name: 'openatccomponents.overview.dongnan',
     // img: require('./images/South-Back.svg'),
     class: 'iconfont icon-dongnanzhihang'
   },
   {
     id: 21,
     // name: 'South-Back',
-    name: 'openatccomponents.overview.sws',
+    name: 'openatccomponents.overview.xinan',
     // img: require('./images/South-Back.svg'),
     class: 'iconfont icon-xinanzhihang'
   },
   {
     id: 25,
     // name: 'South-Back',
-    name: 'openatccomponents.overview.nes',
+    name: 'openatccomponents.overview.dongbei',
     // img: require('./images/South-Back.svg'),
     class: 'iconfont icon-dongbeizhihang'
   },
   {
     id: 29,
     // name: 'South-Back',
-    name: 'openatccomponents.overview.nws',
+    name: 'openatccomponents.overview.xibei',
     // img: require('./images/South-Back.svg'),
     class: 'iconfont icon-xibeizhihang'
   }

package/package/kisscomps/components/SchemeConfig/manualControlModal/index.vue

@@ -62,6 +62,8 @@
         <div style="width: 100%; height: auto;overflow: hidden;" v-if="isHasPermission('configer:manual:dwell')">
           <Stages :crossStatusData="manuals?manualsStage:realtimeStage"
                   :phaseList="phaseList"
+                  :preselectStages="preselectStages"
+                  :preselectModel="preselectModel"
                   :isShowCurrentStage="false"
                   @onSelectStages="selectStages"></Stages>
         </div>

package/package/kisscomps/components/SchemeConfig/priorityControl/index.vue

@@ -51,7 +51,7 @@
                     :label="item.label"
                     :value="item.value">
                     <div class="single-model">
-                        <xdrdirselector Width="40px" Height="40px" :showlist="item.item"></xdrdirselector>
+                        <xdrdirselector Width="60px" Height="60px" Widths="50px" Heights="50px" :showlist="item.item"></xdrdirselector>
                         <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
                     </div>
                   </el-option>

package/package/kisscomps/components/SchemeConfig/tentativeplancontrolmodal/index.vue

@@ -691,7 +691,7 @@ export default {
       let res = {
         key: i,
         split: this.narr[i], // 阶段绿性比
-        stages: stageArr,
+        phases: stageArr,
         stageKanban: stage,
         delaystart: 0,
         advanceend: 0

package/package/kisscomps/components/Stages/index.vue

@@ -28,7 +28,7 @@
                           :showWalk="item[0].peddirection"
                           :Width="'40'"
                           :Height="'40'" /> -->
-              <xdr-dir-selector Width="40PX" Height="40PX" :Data="showStyle" :showlist="item"></xdr-dir-selector>
+              <xdr-dir-selector Width="75PX" Height="75PX" Widths="65px" Heights="65px" :Data="showStyle" :Datas="showStyles" :showlist="item"></xdr-dir-selector>
               <div style="height:65px;display:flex;flex-direction:row;justify-content:center;align-items:end;">
                 <div class="current-stage-num" style="width:20%;">{{index + 1}}</div>
                 <div style="width:70%;">
@@ -80,6 +80,14 @@ export default {
       type: Number,
       default: -1
     },
+    preselectStages:{
+      type: Number,
+      default: -1
+    },
+    preselectModel:{
+      type: Number,
+      default: -1
+    },
     presetPhaseId: {
       type: Number,
       default: -1
@@ -100,8 +108,12 @@ export default {
   data () {
     return {
       showStyle:{
+        top:'7PX',
+        left:'13px'
+      },
+      showStyles:{
         top:'5PX',
-        left:'14px'
+        left:'12px'
       },
       presetStageIndex: -1,
       side: {key: 'pedphase1653818707546719', phaseid: 1, id: 1, name: '东人行横道'},
@@ -136,6 +148,24 @@ export default {
     }
   },
   watch: {
+    preselectStages: { 
+      handler: function (val, oldVal) {
+        if(this.preselectStages === -1 && this.preselectModel !== -1) {
+          this.currentStage = -1
+        }
+      },
+      // 深度观察监听
+      deep: true
+    },
+    preselectModel: { 
+      handler: function (val, oldVal) {
+        if(this.preselectStages === -1 && this.preselectModel !== -1) {
+          this.currentStage = -1
+        }
+      },
+      // 深度观察监听
+      deep: true
+    },
     stagesList: {
       handler: function (val, oldVal) {
         if (this.presetPhaseId > -1) {