openatc-components 0.2.37 → 0.2.38

package/src/kisscomps/components/SchemeConfig/manualControlModalNew/othersIcon.vue

@@ -0,0 +1,194 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<!-- eslint-disable no-mixed-spaces-and-tabs -->
+<!-- eslint-disable no-tabs -->
+/** * Copyright (c) 2020 kedacom * OpenATC is licensed under Mulan PSL v2. * You
+can use this software according to the terms and conditions of the Mulan PSL v2.
+* You may obtain a copy of Mulan PSL v2 at: *
+http://license.coscl.org.cn/MulanPSL2 * THIS SOFTWARE IS PROVIDED ON AN "AS IS"
+BASIS, WITHOUT WARRANTIES OF ANY KIND, * EITHER EXPRESS OR IMPLIED, INCLUDING
+BUT NOT LIMITED TO NON-INFRINGEMENT, * MERCHANTABILITY OR FIT FOR A PARTICULAR
+PURPOSE. * See the Mulan PSL v2 for more details. **/
+<template>
+  <span class="others-icon-svg">
+    <svg
+      v-if="type === '相位关断'"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 45.08 24.79"
+      :width="iconWidth"
+      :height="iconHeight"
+    >
+      <g id="图层_2" data-name="图层 2">
+        <g id="图层_3" data-name="图层 3" :class="themeColor">
+          <rect class="cls-1" y="13.52" width="27.08" height="7.46" />
+          <rect class="cls-2" x="27" y="13.52" width="18.08" height="7.46" />
+          <rect class="cls-2" x="27" y="9.71" width="1.38" height="15.08" />
+          <path class="cls-3" d="M24.35.35,31,7.05Z" />
+          <path class="cls-3" d="M31,.35l-6.69,6.7Z" />
+        </g>
+      </g>
+    </svg>
+    <svg
+      v-if="type === '临时方案'"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 54 9"
+      :width="iconWidth"
+      :height="iconHeight"
+    >
+      <g id="图层_2" data-name="图层 2" :class="themeColor">
+        <rect
+          id="矩形_683_拷贝_3"
+          data-name="矩形 683 拷贝 3"
+          class="cls-1"
+          width="39"
+          height="9"
+        />
+        <rect
+          id="矩形_683_拷贝_3-2"
+          data-name="矩形 683 拷贝 3"
+          class="cls-5"
+          x="39"
+          width="8"
+          height="9"
+        />
+        <rect
+          id="矩形_686_拷贝_4"
+          data-name="矩形 686 拷贝 4"
+          class="cls-6"
+          x="37"
+          width="1"
+          height="9"
+        />
+        <rect
+          id="矩形_686_拷贝_4-2"
+          data-name="矩形 686 拷贝 4"
+          class="cls-6"
+          x="35"
+          width="1"
+          height="9"
+        />
+        <rect
+          id="矩形_686_拷贝_4-3"
+          data-name="矩形 686 拷贝 4"
+          class="cls-6"
+          x="33"
+          width="1"
+          height="9"
+        />
+        <rect
+          id="矩形_686_拷贝_4-4"
+          data-name="矩形 686 拷贝 4"
+          class="cls-6"
+          x="31"
+          width="1"
+          height="9"
+        />
+        <rect
+          id="矩形_683_拷贝_3-3"
+          data-name="矩形 683 拷贝 3"
+          class="cls-2"
+          x="46"
+          width="8"
+          height="9"
+        />
+      </g>
+    </svg>
+    <svg
+      v-if="type === '优先控制'"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 54 29.12"
+      :width="iconWidth"
+      :height="iconHeight"
+    >
+      <g id="图层_2" data-name="图层 2">
+        <g id="图层_3" data-name="图层 3" :class="themeColor">
+          <rect
+            id="矩形_3708_拷贝_8"
+            data-name="矩形 3708 拷贝 8"
+            class="cls-1"
+            x="20.6"
+            y="15.81"
+            width="33.4"
+            height="9"
+          />
+          <rect
+            id="矩形_3708_拷贝_8-2"
+            data-name="矩形 3708 拷贝 8"
+            class="cls-2"
+            y="15.81"
+            width="20.78"
+            height="9"
+          />
+          <path
+            id="形状_3710_拷贝_4"
+            data-name="形状 3710 拷贝 4"
+            class="cls-4"
+            d="M2441.42,1012.4h1.8v17.71h-1.8V1012.4Z"
+            transform="translate(-2421.31 -1001)"
+          />
+          <path
+            id="形状_2767_拷贝_5"
+            data-name="形状 2767 拷贝 5"
+            class="cls-4"
+            d="M2434,1007.87a1.582,1.582,0,1,0,1.39,1.57A1.491,1.491,0,0,0,2434,1007.87Zm0,2.67a1.109,1.109,0,1,1,.97-1.1A1.037,1.037,0,0,1,2434,1010.54Zm13.69-2.67a1.58,1.58,0,1,0,1.4,1.57A1.491,1.491,0,0,0,2447.69,1007.87Zm0,2.67a1.107,1.107,0,1,1,.98-1.1A1.043,1.043,0,0,1,2447.69,1010.54Zm4.59-9.55h-22.21a1.517,1.517,0,0,0-1.42,1.6v2.77l-0.65.33v3.14a0.494,0.494,0,0,0,.46.52h3.67a1.876,1.876,0,1,1,3.74,0h9.95a1.88,1.88,0,1,1,3.75,0h1.24c1.19-.32,3.23-0.87,4.19-1.11v-4.2A2.9,2.9,0,0,0,2452.28,1000.99Zm-20.84,6.96a0.571,0.571,0,0,1-.53.6h-0.82a0.572,0.572,0,0,1-.54-0.6v-5.09a0.575,0.575,0,0,1,.54-0.61h0.82a0.574,0.574,0,0,1,.53.61v5.09Zm5.69-3.41a0.381,0.381,0,0,1-.36.4h-3.96a0.38,0.38,0,0,1-.35-0.4v-1.91a0.38,0.38,0,0,1,.35-0.4h3.96a0.381,0.381,0,0,1,.36.4v1.91Zm5.38,0a0.381,0.381,0,0,1-.36.4h-3.96a0.38,0.38,0,0,1-.35-0.4v-1.91a0.38,0.38,0,0,1,.35-0.4h3.96a0.381,0.381,0,0,1,.36.4v1.91Zm5.38,0a0.38,0.38,0,0,1-.35.4h-3.96a0.381,0.381,0,0,1-.36-0.4v-1.91a0.381,0.381,0,0,1,.36-0.4h3.96a0.38,0.38,0,0,1,.35.4v1.91Zm5.38,0a0.38,0.38,0,0,1-.35.4h-3.96a0.381,0.381,0,0,1-.36-0.4v-1.91a0.381,0.381,0,0,1,.36-0.4h3.96a0.38,0.38,0,0,1,.35.4v1.91Z"
+            transform="translate(-2421.31 -1001)"
+          />
+        </g>
+      </g>
+    </svg>
+  </span>
+</template>
+
+<script>
+import { getTheme } from '../../../../utils/auth.js'
+
+export default {
+  name: 'OthersIconSvg',
+  data () {
+    return {
+      themeColor: '',
+      iconWidth: '56',
+      iconHeight: '24'
+    }
+  },
+  components: {},
+  props: {
+    type: {
+      type: String
+    }
+  },
+  watch: {},
+  methods: {},
+  mounted () {
+    this.themeColor = getTheme() === 'dark' ? 'darkBorder' : 'lightBorder'
+  }
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.lightBorder {
+  fill: #515151;
+}
+.darkBorder {
+  fill: #e6f9ff;
+}
+.cls-1, .cls-4 {
+  fill: #7ccc66;
+}
+.cls-2 {
+  fill: #f27979;
+}
+.cls-3 {
+  fill: none;
+  stroke: #f27979;
+  stroke-miterlimit: 10;
+}
+.cls-4 {
+  fill-rule: evenodd;
+}
+.cls-5 {
+        fill: #f9dc6a;
+      }
+      .cls-6 {
+        fill: #fff;
+      }
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="priority-control">
-    <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.prioritycontrol')}}</div>
+    <!-- <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.prioritycontrol')}}</div> -->
     <el-row>
       <el-col :span="12">
          <el-form
@@ -11,8 +11,8 @@
             <el-form-item
                 :label="$t('openatccomponents.overview.delay') + ':'"
                 prop="intersection">
-                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.delay" size="mini"></el-input-number>
-               <!-- <el-input v-model="manualInfo.tempDelay" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.delay" size="small"></el-input-number>
+               <!-- <el-input v-model="manualInfo.tempDelay" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
             </el-form-item>
             <el-form-item
                 :label="$t('openatccomponents.overview.priorityType') + ':'"
@@ -25,7 +25,7 @@
                     :value="item.value">
                   </el-option>
                 </el-select>
-               <!-- <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+               <!-- <el-input v-model="manualInfo.tempDuration" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
             </el-form-item>
            </el-form>
       </el-col>
@@ -38,8 +38,8 @@
             <el-form-item
                 :label="$t('openatccomponents.overview.duration') + ':'"
                 prop="intersection">
-                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.duration" size="mini"></el-input-number>
-               <!-- <el-input v-model="manualInfo.duration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.duration" size="small"></el-input-number>
+               <!-- <el-input v-model="manualInfo.duration" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
             </el-form-item>
             <el-form-item
                 :label="$t('openatccomponents.overview.priorityPhase') + ':'"
@@ -56,7 +56,7 @@
                     </div>
                   </el-option>
                 </el-select>
-               <!-- <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+               <!-- <el-input v-model="manualInfo.tempDuration" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
             </el-form-item>
            </el-form>
       </el-col>
@@ -79,17 +79,19 @@
                     :value="item.value">
                   </el-option>
                 </el-select>
-               <!-- <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+               <!-- <el-input v-model="manualInfo.tempDuration" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
             </el-form-item>
            </el-form>
       </el-col>
     </el-row>
     <div class="footer" v-if="realtimeStatusModalvisible">
         <el-button @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
+        <el-button type="primary" plain @click="toAutoControl()" v-if="isHasPermission('configer:manual:renew')">{{$t('openatccomponents.overview.recovery')}}</el-button>
         <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.implement')}}</el-button>
     </div>
     <div class="footer" v-if="!realtimeStatusModalvisible">
         <el-button @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
+        <el-button type="primary" plain @click="toAutoControl()" v-if="isHasPermission('configer:manual:renew')">{{$t('openatccomponents.overview.recovery')}}</el-button>
         <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.comfirm')}}</el-button>
     </div>
   </div>
@@ -97,7 +99,7 @@
 
 <script>
 import xdrdirselector from '../../XRDDirSelector/XRDDirSelector'
-import { getTheme } from '../../../../utils/auth'
+import { getTheme, hasPermission } from '../../../../utils/auth'
 import { getDirName } from './utils'
 export default {
   name: 'prioritycontrol',
@@ -187,6 +189,13 @@ export default {
         level: this.manualInfo.level
       }
       this.$emit('closePhaseControl', submitdata)
+    },
+    toAutoControl () {
+      this.$emit('toAutoControl')
+    },
+    isHasPermission (path) {
+      let res = hasPermission(path)
+      return res
     }
   }
 }

package/src/kisscomps/components/SchemeConfig/realtimeStatusModal/index.vue

@@ -80,7 +80,7 @@
     >{{$t('openatccomponents.overview.controlmode')}}</div>
     <el-button
       type="primary"
-      style="float: right; margin-right: 20px;margin-top: 40px;font-size: 14px;"
+      style="float: right; margin-right: 20px;margin-top: 16px;font-size: 14px;"
       size="mini"
       v-if="isHasPermission('configer:manual') && isHasPermission('configer:manual:renew')"
       @click="changeStatus"

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

@@ -1,8 +1,8 @@
 <template>
   <div class="tentativeplan-control">
-    <div class="title" style="margin-bottom: 18px">
+    <!-- <div class="title" style="margin-bottom: 18px">
       {{ $t('openatccomponents.overview.tentativeplan') }}
-    </div>
+    </div> -->
     <el-row>
       <el-col :span="12">
         <el-form
@@ -30,7 +30,7 @@
               >
               </el-option>
             </el-select>
-            <!-- <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+            <!-- <el-input v-model="manualInfo.tempDuration" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
           </el-form-item>
           <el-form-item
             :label="$t('openatccomponents.overview.delay') + ':'"
@@ -44,9 +44,9 @@
               :step="1"
               :controls="false"
               v-model.number="manualInfo.tempDelay"
-              size="mini"
+              size="small"
             ></el-input-number>
-            <!-- <el-input v-model="manualInfo.tempDelay" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+            <!-- <el-input v-model="manualInfo.tempDelay" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
           </el-form-item>
         </el-form>
       </el-col>
@@ -69,9 +69,9 @@
               :step="1"
               :controls="false"
               v-model.number="manualInfo.offset"
-              size="mini"
+              size="small"
             ></el-input-number>
-            <!-- <el-input v-model="manualInfo.offset" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+            <!-- <el-input v-model="manualInfo.offset" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
           </el-form-item>
           <el-form-item
             :label="$t('openatccomponents.overview.duration') + ':'"
@@ -85,9 +85,9 @@
               :step="1"
               :controls="false"
               v-model.number="manualInfo.duration"
-              size="mini"
+              size="small"
             ></el-input-number>
-            <!-- <el-input v-model="manualInfo.duration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+            <!-- <el-input v-model="manualInfo.duration" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
           </el-form-item>
         </el-form>
       </el-col>
@@ -318,6 +318,7 @@
       <el-button @click="handleClose()">{{
         $t('openatccomponents.button.Back')
       }}</el-button>
+      <el-button type="primary" plain @click="toAutoControl()" v-if="isHasPermission('configer:manual:renew')">{{$t('openatccomponents.overview.recovery')}}</el-button>
       <el-button type="primary" @click="handleManualControl()">{{
         $t('openatccomponents.overview.implement')
       }}</el-button>
@@ -326,6 +327,7 @@
       <el-button @click="handleClose()">{{
         $t('openatccomponents.button.Back')
       }}</el-button>
+      <el-button type="primary" plain @click="toAutoControl()" v-if="isHasPermission('configer:manual:renew')">{{$t('openatccomponents.overview.recovery')}}</el-button>
       <el-button type="primary" @click="handleManualControl()">{{
         $t('openatccomponents.overview.comfirm')
       }}</el-button>
@@ -334,6 +336,8 @@
 </template>
 
 <script>
+import { hasPermission } from '../../../../utils/auth'
+
 export default {
   name: 'tentativeplancontrol',
   props: {
@@ -991,7 +995,7 @@ export default {
             stage.map(item => {
               for (let ring of rings) {
                 for (let ringItem of ring) {
-                  if (item === ringItem.id && (ringItem.mode !== 7 && ringItem.mode !== 8)) {
+                  if (item === ringItem.id && (ringItem.mode !== 7 && ringItem.mode !== 8 && ringItem.mode !== 9)) {
                     newStage.push(item)
                   }
                 }
@@ -1184,6 +1188,13 @@ export default {
       if (this.patternCycleEqual) {
         this.$emit('closePhaseControl', submitdata)
       }
+    },
+    toAutoControl () {
+      this.$emit('toAutoControl')
+    },
+    isHasPermission (path) {
+      let res = hasPermission(path)
+      return res
     }
   }
 }

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

@@ -15,7 +15,7 @@
       <div>
         <div style="width: 100%; height: auto;">
           <div class="control-model" v-for="(item, index) in stagesList" :key="index">
-            <div style="position:relative;" :style="singleStyle" class="single-model" @click="selectStages(index + 1)" :class="currentStage == index + 1 ? 'single-model-select' : ''">
+            <div style="position:relative;" :style="{...singleStyle, 'backgroundColor': item[0].bgcolor}" class="single-model" @click="selectStages(index + 1)" :class="currentStage == index + 1 ? 'single-model-select' : ''">
               <!-- <template v-for="(side, index) in item[0].sidewalkPhaseData" >
                 <PatternWalkSvg class="patternWalk"
                                 v-if="item[0].peddirection.includes(side.id)"
@@ -28,18 +28,18 @@
                           :showWalk="item[0].peddirection"
                           :Width="'40'"
                           :Height="'40'" /> -->
-              <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>
+              <xdr-dir-selector Width="75PX" Height="75PX" Widths="65px" Heights="65px" :Data="showStyle" :Datas="showStyles" :showlist="dirListSetTheme(item)"></xdr-dir-selector>
+              <div style="height:80px;display:flex;flex-direction:row;justify-content:center;align-items:end;">
+                <div class="current-stage-num" style="width:20%;" :style="{color: themeColor}">{{index + 1}}</div>
                 <div style="width:70%;">
-                  <i class="iconfont icon-feijidongche" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 6"></i>
-                  <i class="iconfont icon-lukouzhilu" style="font-size:16PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 1"></i>
-                  <i class="iconfont icon-BRT" style="font-size:11PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 4"></i>
+                  <i class="iconfont icon-feijidongche" :style="{color: themeColor}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 6"></i>
+                  <i class="iconfont icon-lukouzhilu" :style="{color: themeColor2}" style="font-size:16PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 1"></i>
+                  <i class="iconfont icon-BRT" :style="{color: themeColor2}" style="font-size:11PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 4"></i>
                   <div style="transform:scale(0.65);margin-left:10PX">
-                    <i class="iconfont icon-xuxiangwei-xin" style="font-size:5PX;color:#454545;" v-if="item[item.length-1].controltype === 99"></i>
+                    <i class="iconfont icon-xuxiangwei-xin" :style="{color: themeColor2}" style="font-size:5PX;color:#454545;" v-if="item[item.length-1].controltype === 99"></i>
                   </div>
-                  <i class="iconfont icon-gongjiaoche" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 3"></i>
-                  <i class="iconfont icon-youguidianche" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 5"></i>
+                  <i class="iconfont icon-gongjiaoche" :style="{color: themeColor}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 3"></i>
+                  <i class="iconfont icon-youguidianche" :style="{color: themeColor}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 5"></i>
                   <div v-if="presetStageIndex === index + 1" style="color:red;width:50px;position:absolute;right:0px;bottom:5px;font-size:11px;">{{presetText}}</div>
                 </div>
               </div>
@@ -54,6 +54,8 @@
 /* eslint-disable */
 import RingDataModel from '../../../utils/RingDataModel.js'
 // import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
+import { getTheme } from '../../../utils/auth.js'
+
 export default {
   name: 'Stages',
   components: {
@@ -102,7 +104,7 @@ export default {
     },
     StageHeight: {
       type: String,
-      default: '65px'
+      default: '80px'
     }
   },
   data () {
@@ -119,6 +121,8 @@ export default {
       side: {key: 'pedphase1653818707546719', phaseid: 1, id: 1, name: '东人行横道'},
       // stagesList: [],
       currentStage: -1,
+      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
+      themeColor2: getTheme() === 'light' ? '#454545' : '#fff'
     };
   },
   computed: {
@@ -138,6 +142,7 @@ export default {
         }
       }
       console.log(list,'list')
+      this.clickType(list, this.currentStage)
       console.log(this.phaseList,'this.phaseList')
       return list
     },
@@ -203,9 +208,45 @@ export default {
       }
       this.currentStage = value
       this.$emit('onSelectStages', value)
+      this.clickType(this.stagesList, value)
+    },
+    resetToDefaultThemeColor (List) {
+      for (let i = 0; i < List.length; i++) {
+        if (List[i].length) {
+          if (List[i][0].clicked) {
+            delete List[i][0].clicked
+          }
+          List[i][0].bgcolor = getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        } 
+      }
+    },
+    highlightThemeColor (List, index) {
+      for (let i = 0; i < List.length; i++) {
+        if (i === index) {
+          List[i][0].clicked = true
+          List[i][0].bgcolor = getTheme() === 'light' ? '#c1e0ff' : '#0082ac'
+        }
+      }
+    },
+    clickType (stagelist, value) {
+      this.resetToDefaultThemeColor(stagelist)
+      this.highlightThemeColor(stagelist, value - 1)
+    },
+    dirListSetTheme (list) {
+      let dirArr = []
+      let color = getTheme() === 'light' ? '#606266' : '#F1F3F4'
+      for (let rec of list) {
+        let recd = {
+          ...rec,
+          color: color
+        }
+        dirArr.push(recd)
+      }
+      return dirArr
     }
   },
   mounted () {
+    this.resetToDefaultThemeColor(this.stagesList)
   }
 };
 </script>