openatc-components 0.2.37 → 0.2.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openatc-components",
-  "version": "0.2.37",
+  "version": "0.2.38",
   "description": "A Vue.js project",
   "author": "openatc developer",
   "private": false,

package/src/i18n/language/en.js

@@ -193,6 +193,7 @@ const en = {
       'modelList2': 'Red Control',
       'modelList3': 'Dark Control',
       'modelList4': 'Step Control',
+      'modelList4-': 'Stage Control',
       'modelList5': 'Fixed_Cycle Control',
       'modelList6': 'Free Control',
       'modelList7': 'Coordinated Induction Control',
@@ -333,7 +334,11 @@ const en = {
       'ignored': 'ignored',
       'untreated': 'untreated',
       'item': 'item',
-      'noselectcontroltip': 'Please select a control method first!'
+      'noselectcontroltip': 'Please select a control method first!',
+      'residentcontrol': 'Resident Control',
+      'schemeselection': 'Pattern Select',
+      'others': 'Others',
+      'recovery': 'Recovery'
     },
     'phase': {
       'desc': 'LaneDirection',

package/src/i18n/language/zh.js

@@ -244,7 +244,8 @@ const zh = {
       'modelList1': '黄闪',
       'modelList2': '全红',
       'modelList3': '关灯',
-      'modelList4': '阶段锁定',
+      'modelList4': '步进',
+      'modelList4-': '阶段锁定',
       'modelList5': '定周期',
       'modelList6': '单点感应',
       'modelList7': '协调感应控制',
@@ -333,7 +334,11 @@ const zh = {
       'ignored': '已忽略',
       'untreated': '未处理',
       'item': '条',
-      'noselectcontroltip': '请先选择一种控制方式!'
+      'noselectcontroltip': '请先选择一种控制方式!',
+      'residentcontrol': '驻留控制',
+      'schemeselection': '方案选择',
+      'others': '其他',
+      'recovery': '恢复'
     },
     'phase': {
       'desc': '车道方向',

package/src/icons/svg/fangxiangsuoding.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1714021963787" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12286" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1023.606154 512l-267.815385-154.781538v111.852307h-200.467692v-200.861538h111.458461L512.393846 0.393846l-154.781538 267.815385h111.458461v200.861538H268.603077V357.218462L0.787692 512l267.815385 154.781538V555.323077h200.467692v200.467692H357.612308l154.781538 267.815385 154.387692-267.815385h-111.458461V555.323077h200.467692v111.458461z" p-id="12287"></path></svg>

package/src/icons/svg/jieduansuoding.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1714021956193" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12129" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M54.218328 0.002671h184.821636a52.882491 52.882491 0 0 1 53.416657 53.416658v916.09568a52.882491 52.882491 0 0 1-53.416657 53.416658H54.218328a53.416658 53.416658 0 0 1-53.416658-53.416658V53.419329a53.416658 53.416658 0 0 1 53.416658-53.416658z m438.016593 0h112.174982a53.416658 53.416658 0 0 1 53.416658 53.416658v916.09568a53.416658 53.416658 0 0 1-53.416658 53.416658H492.234921a52.882491 52.882491 0 0 1-53.416657-53.416658V53.419329a52.882491 52.882491 0 0 1 53.416657-53.416658z m364.835773 0h112.174981a53.416658 53.416658 0 0 1 53.416658 53.416658v916.09568a53.416658 53.416658 0 0 1-53.416658 53.416658h-112.174981a53.416658 53.416658 0 0 1-53.416658-53.416658V53.419329a53.416658 53.416658 0 0 1 53.416658-53.416658z" p-id="12130"></path></svg>

package/src/icons/svg/xiangweisuoding.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1714026084421" class="icon" viewBox="0 0 1180 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11864" xmlns:xlink="http://www.w3.org/1999/xlink" width="230.46875" height="200"><path d="M0.040891 1024V477.751546a302.998089 302.998089 0 0 1 298.163013-307.948286h397.166948V0L1179.454044 288.37774l-484.083192 288.377741V406.95222h-397.166948a71.777853 71.777853 0 0 0-70.223721 72.526139v544.521641H0.040891z" fill="#606266" p-id="11865"></path></svg>

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

@@ -15,7 +15,7 @@
       <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) + '%'}"  v-for="(item,index2) in list" :key="index2" :class="item.mode===7?'direction': ''">
-            <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) + '%').replace('%', ''))*100+'%','height':'34px','background':'#7ccc66'}">
+            <div class="first-1" :class="item.mode === 8 ? 'mask' : item.mode === 9 ? 'yellowClass' : ''" :style="{'width':Number(item.greenWidth.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100) + '%').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;">
@@ -38,9 +38,9 @@
                   <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?'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) + '%').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 class="first-1" :class="item.mode === 8 ? 'mask' : item.mode === 9 ? 'yellowClass' : ''" :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' : item.mode === 9 ? 'yellowClass' : ''" :style="{'width':Number(item.yellowWidth.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100) + '%').replace('%', ''))*100+'%','height':'34px','background':'#f9dc6a'}"></div>
+              <div class="first-1" :class="item.mode === 8 ? 'mask' : item.mode === 9 ? 'yellowClass' : ''" :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">
@@ -1471,6 +1471,9 @@ export default {
 .masks {
   background: rgb(242, 121, 121) !important;
 }
+.yellowClass {
+  background: #f9dc6a !important;
+}
 .first-1 {
   float: left;
   // text-align: center;

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

@@ -16,8 +16,36 @@
           <transition name="fade-right" mode="out-in"
           :enter-active-class="toPage === 1 ? 'animated fadeInRight' : 'animated fadeInLeft'"
           :leave-active-class="toPage === 1 ? 'animated fadeOutRight' : 'animated fadeOutLeft' ">
-            <div style="position: absolute;width: 100%;height:100%;"  v-show="(isOperation && !isClosePhase)">
-             <ManualControlModal
+            <div class="new" style="position: absolute;width: 100%;height:100%;"  v-show="(isOperation && !isClosePhase)">
+              <ManualControlModalNew
+              ref="ManualControlModalNew"
+              :residentControlList="residentControlList"
+              :specialControlList="specialControlList"
+              :patternChooseControlList="patternChooseControlList"
+              :othersControlList="othersControlList"
+              :controlData="controlData"
+              :patternAll="patternAll"
+              :crossStatusData="crossStatusData"
+              :preselectModel="preselectModel"
+              :preselectStages="preselectStages"
+              :realtimeStatusModalvisible="realtimeStatusModalvisible"
+              :roadDirection="roadDirection"
+              :closePhaseRings="phaseRings"
+              :sidewalkPhaseData="sidewalkPhaseData"
+              :phaseList="phaseList"
+              :statusData="statusData"
+              :lockPhaseBtnName="lockPhaseBtnName"
+              :overlap="overlap"
+              :patternSelect="patternSelect"
+              :allPatternList="allPatternList"
+              @closeManualModal="closeManualModal"
+              @selectModel="selectModel"
+              @selectStages="selectStages"
+              @patternCommit="patternCommit"
+              @closePhaseBack="closePhaseBack"
+              @closePhaseControl="closePhaseControl"
+              @selectSpecialModel="selectSpecialModelNew" />
+             <!-- <ManualControlModal
                :controlData="controlData"
                :modelList="modelList"
                :patternSelect="patternSelect"
@@ -35,10 +63,10 @@
                @selectModel="selectModel"
                @selectStages="selectStages"
                @patternCommit="patternCommit"
-               @selectSpecialModel="selectSpecialModel" />
+               @selectSpecialModel="selectSpecialModel" /> -->
             </div>
           </transition>
-          <transition name="fade-left" mode="out-in"
+          <!-- <transition name="fade-left" mode="out-in"
           enter-active-class="animated fadeInRight"
           leave-active-class="animated fadeOutRight">
             <div style="position: absolute;width: 100%;height:100%" v-show="(isOperation && isClosePhase)">
@@ -50,16 +78,16 @@
                 :realtimeStatusModalvisible="realtimeStatusModalvisible"
                 :roadDirection="roadDirection"
                 @closePhaseBack="closePhaseBack"
-                @closePhaseControl="closePhaseControl" />
-              <LockingPhaseControlModal
+                @closePhaseControl="closePhaseControl" /> -->
+              <!-- <LockingPhaseControlModal
                 v-if="specialPage === 'lockingphase'"
                 :roadDirection="roadDirection"
                 :phaseList="phaseList"
                 :patternStatus="statusData"
                 :lockPhaseBtnName="lockPhaseBtnName"
                 @closePhaseBack="closePhaseBack"
-                @closePhaseControl="closePhaseControl" />
-                <TentativePlanControlModal
+                @closePhaseControl="closePhaseControl" /> -->
+                <!-- <TentativePlanControlModal
                  v-if="specialPage === 'tentativeplan'"
                  :realtimeStatusModalvisible="realtimeStatusModalvisible"
                  :controlData="controlData"
@@ -76,17 +104,17 @@
                 :phaseList="phaseList"
                  @closePhaseBack="closePhaseBack"
                  @closePhaseControl="closePhaseControl"
-                />
-                <AzimuthLocking
+                /> -->
+                <!-- <AzimuthLocking
                 v-if="specialPage === 'azimuthlocking'"
                 :realtimeStatusModalvisible="realtimeStatusModalvisible"
                 :phaseList="phaseList"
                 :patternStatus="statusData"
                  @closePhaseBack="closePhaseBack"
                  @closePhaseControl="closePhaseControl"
-                />
-            </div>
-          </transition>
+                /> -->
+            <!-- </div>
+          </transition> -->
 
           <transition name="fade-left" mode="out-in"
           enter-active-class="animated fadeInLeft"
@@ -122,6 +150,7 @@ import { putTscControl } from '../../../api/control.js'
 import { uploadSingleTscParam } from '../../../api/param.js'
 import RealtimeStatusModal from './realtimeStatusModal'
 import ManualControlModal from './manualControlModal'
+import ManualControlModalNew from './manualControlModalNew'
 import ClosePhaseControlModal from './closePhaselControlModal'
 import LockingPhaseControlModal from './lockingPhaselControlModal'
 import TentativePlanControlModal from './tentativeplancontrolmodal'
@@ -132,9 +161,10 @@ import { getMessageByCode } from '../../../utils/responseMessage'
 import { GetAllFaultRange } from '../../../api/fault'
 import PhaseDataModel from '../IntersectionMap/crossDirection/utils.js'
 import CrossDiagramMgr from '../../../EdgeMgr/controller/crossDiagramMgr.js'
-import { setToken, setHost } from '../../../utils/auth.js'
+import { setToken, setHost, getTheme } from '../../../utils/auth.js'
 import RingDataModel from '../../../utils/RingDataModel.js'
 import { getIntersectionInfo } from '../../../api/template'
+
 export default {
   name: 'scheme-config',
   components: {
@@ -144,7 +174,8 @@ export default {
     LockingPhaseControlModal,
     priorityControl,
     AzimuthLocking,
-    TentativePlanControlModal
+    TentativePlanControlModal,
+    ManualControlModalNew
   },
   props: {
     phaseList: {
@@ -304,6 +335,132 @@ export default {
         permission: 'configer:manual:base',
         iconName: '感应式行人过街控制'
       }],
+      residentControlList: [
+        {
+          type: '步进',
+          id: 4,
+          iconClass: 'bujin',
+          permission: 'configer:manual:dwell',
+          iconName: this.$t('openatccomponents.overview.modelList4'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        },
+        {
+          type: '阶段锁定',
+          id: 4,
+          iconClass: 'jieduansuoding',
+          permission: 'configer:manual:dwell',
+          iconName: this.$t('openatccomponents.overview.modelList4-'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        },
+        {
+          type: '相位锁定',
+          id: 22,
+          iconClass: 'xiangweisuoding',
+          permission: 'configer:manual:dwell',
+          iconName: this.$t('openatccomponents.overview.modelList22'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        },
+        {
+          type: '方向锁定',
+          id: 25,
+          iconClass: 'fangxiangsuoding',
+          permission: 'configer:manual:dwell',
+          iconName: this.$t('openatccomponents.overview.modelList25'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        }
+      ],
+      specialControlList: [
+        {
+          type: '黄闪',
+          id: 1,
+          iconClass: 'huangshan',
+          permission: 'configer:manual:senior',
+          iconName: this.$t('openatccomponents.overview.modelList1'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        }, {
+          type: '全红',
+          id: 2,
+          iconClass: 'quanhong',
+          permission: 'configer:manual:senior',
+          iconName: this.$t('openatccomponents.overview.modelList2'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        }, {
+          type: '关灯',
+          id: 3,
+          iconClass: 'guandeng',
+          permission: 'configer:manual:senior',
+          iconName: this.$t('openatccomponents.overview.modelList3'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        }
+      ],
+      patternChooseControlList: [
+        {
+          type: '定周期',
+          id: 5,
+          iconClass: 'dingzhouqi',
+          permission: 'configer:manual:base',
+          iconName: this.$t('openatccomponents.overview.modelList5'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        }, {
+          type: '单点感应',
+          id: 6,
+          iconClass: 'ganyingkongzhi',
+          permission: 'configer:manual:base',
+          iconName: this.$t('openatccomponents.overview.modelList6'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        }, {
+          type: '自适应控制',
+          id: 9,
+          iconClass: 'zishiying',
+          permission: 'configer:manual:base',
+          iconName: this.$t('openatccomponents.overview.modelList9'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        }, {
+          type: '无电缆协调',
+          id: 10,
+          iconClass: 'wuxianlan',
+          permission: 'configer:manual:base',
+          iconName: this.$t('openatccomponents.overview.modelList10'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        }, {
+          type: '行人过街',
+          id: 12,
+          iconClass: 'xingrenguojie',
+          permission: 'configer:manual:base',
+          iconName: this.$t('openatccomponents.overview.modelList12'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        }, {
+          type: '感应式行人过街',
+          id: 19,
+          iconClass: 'ganyingshixingrenguojie',
+          permission: 'configer:manual:base',
+          iconName: this.$t('openatccomponents.overview.modelList19'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        }
+      ],
+      othersControlList: [
+        { // 特殊控制
+          type: '相位关断',
+          id: 23,
+          permission: 'configer:manual:optimize',
+          iconClass: 'closephase',
+          iconName: this.$t('openatccomponents.overview.modelList23'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        }, {
+          type: '临时方案',
+          id: 100,
+          permission: 'configer:manual:optimize',
+          iconClass: 'tentativeplan',
+          iconName: this.$t('openatccomponents.overview.modelList100'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        }, {
+          type: '优先控制',
+          id: 24,
+          permission: 'configer:manual:preempt',
+          iconClass: 'prioritycontrol',
+          iconName: this.$t('openatccomponents.overview.modelList24'),
+          bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        }],
       currModel: -1,
       preselectModel: -1, // 预选方案
       preselectStages: -1, // 预选阶段
@@ -482,15 +639,7 @@ export default {
     changeStatus () {
       this.toPage = 1
       this.isOperation = true
-      if (this.modelList.filter(ele => ele.id === 0).length === 0) {
-        let autonomyControl = {
-          id: 0,
-          iconClass: 'zizhukongzhi',
-          permission: 'configer:manual:renew',
-          iconName: '自主控制'
-        }
-        this.modelList.push(autonomyControl)
-      }
+      this.$refs.ManualControlModalNew.init()
     },
     handleGetData (data) {
       let that = this
@@ -567,7 +716,7 @@ export default {
       })
       control.control = that.preselectModel
       // control.terminal = isNaN(parseInt(manualInfo.tempPatternid)) ? Number(manualInfo.tempPatternid.replace(/[^0-9]/ig, '')) : manualInfo.tempPatternid
-      control.terminal = Number(manualInfo.tempPatternid)
+      control.terminal = manualInfo.tempPatternid === undefined ? null : Number(manualInfo.tempPatternid)
       // control.delay = Number(manualInfo.tempDelay)
       control.duration = Number(manualInfo.tempDuration)
       control.value = that.preselectStages === -1 ? 0 : that.preselectStages
@@ -676,6 +825,10 @@ export default {
         this.closePhase = []
       }
     },
+    selectSpecialModelNew () {
+      let ringDataModel = new RingDataModel(this.statusData, this.phaseList)
+      this.phaseRings = ringDataModel.initRingPhaseData()
+    },
     selectSpecialModel (id) {
       let ringDataModel = new RingDataModel(this.statusData, this.phaseList)
       if (id === 23) {

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

@@ -1,6 +1,6 @@
 <template>
     <div class="tentativeplan-control">
-      <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.azimuthlocking')}}</div>
+      <!-- <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.azimuthlocking')}}</div> -->
       <el-row>
         <el-col :span="12">
            <el-form
@@ -11,17 +11,17 @@
              <el-form-item
                   :label="$t('openatccomponents.overview.duration') + ':'"
                   prop="count">
-                  <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-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-form-item>
               <el-form-item
                   :label="$t('openatccomponents.overview.yellowflash') + ':'"
                   prop="intersection">
-                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.yellowflash" size="mini"></el-input-number>
+                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.yellowflash" size="small"></el-input-number>
               </el-form-item>
               <el-form-item
                   :label="$t('openatccomponents.overview.mingreen') + ':'"
                   prop="intersection">
-                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.mingreen" size="mini"></el-input-number>
+                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.mingreen" size="small"></el-input-number>
               </el-form-item>
              </el-form>
         </el-col>
@@ -34,12 +34,12 @@
              <el-form-item
                   :label="$t('openatccomponents.overview.greenclear') + ':'"
                   prop="count">
-                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.greenclear" size="mini"></el-input-number>
+                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.greenclear" size="small"></el-input-number>
               </el-form-item>
               <el-form-item
                   :label="$t('openatccomponents.overview.allred') + ':'"
                   prop="intersection">
-                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.allred" size="mini"></el-input-number>
+                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.allred" size="small"></el-input-number>
               </el-form-item>
              </el-form>
         </el-col>
@@ -50,27 +50,27 @@
         </el-col>
         <el-col :span="19">
             <div class="control-model" v-for="(item, index) in imgs" :key="index">
-                <div :class="{'single-model-select':spanIndex.indexOf(index)>-1}" class="single-model"  @click="boxShow(index,item)">
-                    <div v-if="item.class" :class="item.class" style="border:0px"></div>
-                    <div class="single-model-name">{{item.name}}</div>
+                <div :style="{'backgroundColor': item.bgcolor}" :class="{'single-model-select':spanIndex.indexOf(index)>-1}" class="single-model"  @click="boxShow(index,item)">
+                    <div v-if="item.class" :style="{color: themeColor}" :class="item.class" style="border:0px;font-size: 50px;"></div>
+                    <div class="single-model-name" :style="{color: themeColor}" style="margin-top: -4px;">{{item.name}}</div>
                 </div>
             </div>
             <div v-if="currentName !==''" style="width: 100%; height: auto;overflow: hidden;">
             <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="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="position:relative;"  class="single-model" :style="{'backgroundColor': item[0].bgcolor}">
+                <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="{color: themeColor}" style="width:20%;">{{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>
                 </div>
                 </div>
@@ -90,10 +90,12 @@
       </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.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>
@@ -101,7 +103,7 @@
 
 <script>
 import { getPhase } from './utils'
-import { getIframdevid } from '../../../../utils/auth'
+import { getIframdevid, hasPermission, getTheme } from '../../../../utils/auth'
 import { getlockPhase, lockPhase, getAllDerection } from '../../../../api/control'
 import Stages from '../../Stages/index'
 import RingDataModel from '../../../../utils/RingDataModel.js'
@@ -140,6 +142,7 @@ export default {
       images.forEach(v => {
         let obj = Object.assign({}, v)
         obj.name = this.$t(obj.name)
+        obj.bgcolor = getTheme() === 'light' ? '#edf6ff' : '#243d59'
         arrays.push(obj)
       })
       let arr1Ids = this.allDirection.map(item => item.id)
@@ -170,7 +173,9 @@ export default {
         mingreen: 15,
         duration: 600,
         yellowflash: 3
-      }
+      },
+      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
+      themeColor2: getTheme() === 'light' ? '#454545' : '#fff'
     }
   },
   created () {
@@ -243,7 +248,12 @@ export default {
         }
         this.lockList = res.data.data
         let ringDataModel = new RingDataModel({}, res.data.data)
-        this.sidewalkPhaseData = ringDataModel.getlockData()
+        this.sidewalkPhaseData = ringDataModel.getlockData().map(ele => {
+          return ele.map(item => ({
+            ...item,
+            bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+          }))
+        })
       })
     },
     boxShow (index, data) {
@@ -256,6 +266,27 @@ export default {
       }
       this.getLockPhase(data)
       this.currentName = data.name
+      this.clickType(index)
+    },
+    resetToDefaultThemeColor (List) {
+      for (let i = 0; i < List.length; i++) {
+        if (List[i].clicked) {
+          delete List[i].clicked
+        }
+        List[i].bgcolor = getTheme() === 'light' ? '#edf6ff' : '#243d59'
+      }
+    },
+    highlightThemeColor (List, index) {
+      for (let i = 0; i < List.length; i++) {
+        if (i === index) {
+          List[i].clicked = true
+          List[i].bgcolor = getTheme() === 'light' ? '#c1e0ff' : '#0082ac'
+        }
+      }
+    },
+    clickType (value) {
+      this.resetToDefaultThemeColor(this.imgs)
+      this.highlightThemeColor(this.imgs, value)
     },
     handleClose () {
       this.$emit('closePhaseBack')
@@ -294,6 +325,25 @@ export default {
         //   this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
         // }
       })
+    },
+    toAutoControl () {
+      this.$emit('toAutoControl')
+    },
+    isHasPermission (path) {
+      let res = hasPermission(path)
+      return res
+    },
+    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
     }
   }
 }
@@ -301,13 +351,6 @@ export default {
 
   <style lang="scss" scoped>
 .single-model-select {
-    margin-right: 10px;
-    text-align: center;
-    cursor:pointer;
-    width: 70px;
-    height: 65px;
     background-color: #a2cfff;
-    border-radius: 6px;
-    // border: solid 1PX #409eff;
   }
   </style>