openatc-components 0.4.7 → 0.4.9

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

@@ -1,364 +1,364 @@
-<template>
-    <div class="tentativeplan-control manual-common-content">
-      <!-- <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.azimuthlocking')}}</div> -->
-      <el-row>
-        <el-col :span="12">
-           <el-form
-             ref="manual"
-             label-position="left"
-             :model="manualInfo"
-             label-width="90px">
-             <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="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="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="small"></el-input-number>
-              </el-form-item>
-             </el-form>
-        </el-col>
-        <el-col :span="12">
-           <el-form
-             ref="manual"
-             label-position="left"
-             :model="manualInfo"
-             label-width="90px">
-             <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="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="small"></el-input-number>
-              </el-form-item>
-             </el-form>
-        </el-col>
-      </el-row>
-      <el-row style="margin-top: 6px;">
-        <el-col :span="24">
-            <span class="model-label-title">{{$t('openatccomponents.overview.indirection')}}</span>
-        </el-col>
-        <el-col :span="24">
-            <div class="control-model" v-for="(item, index) in imgs" :key="index">
-                <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" :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="{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="{color: themeColor2}" style="font-size:5PX;color:#454545;" v-if="item[item.length-1].controltype === 99"></i>
-                        </div>
-                        <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>
-            </div>
-        </div>
-        <!-- </div> -->
-        </el-col>
-      </el-row>
-      <!-- <div class="model-label" style="width: auto;overflow: hidden;">
-        <span class="intitle">{{$t('openatccomponents.overview.indirection')}}</span>
-        <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>
-        </div>
-      </div> -->
-      <div class="footer">
-          <el-button v-if="isShowBack" @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
-          <el-button v-if="isShowRecovery && isHasPermission('configer:manual:renew')" @click="toAutoControl()">{{$t('openatccomponents.overview.recovery')}}</el-button>
-          <el-button v-if="isShowImplement" type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.implement')}}</el-button>
-          <el-button v-if="!isShowImplement" type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.comfirm')}}</el-button>
-      </div>
-    </div>
-  </template>
-
-<script>
-import { getPhase } from './utils'
-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'
-import { getMessageByCode } from '../../../../utils/responseMessage'
-export default {
-  name: 'tentativeplancontrol',
-  components: {
-    Stages
-  },
-  props: {
-    realtimeStatusModalvisible: {
-      type: Boolean,
-      default: true
-    },
-    isShowBack: {
-      type: Boolean,
-      default: true
-    },
-    isShowRecovery: {
-      type: Boolean,
-      default: true
-    },
-    isShowImplement: {
-      type: Boolean,
-      default: true
-    }
-  },
-  watch: {
-    sidewalkPhaseData: {
-      handler: function (val, oldVal) {
-        this.sidewalkPhaseData = val
-      },
-      // 深度观察监听
-      deep: true
-    }
-  },
-  computed: {
-    tankuangSize () {
-      let widths = ((100 / 2) - 2) + '%'
-      let styleObj = {
-        width: widths
-      }
-      return styleObj
-    },
-    imgs () {
-      let arrays = []
-      let images = getPhase()
-      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)
-      const result = arrays.filter(item => arr1Ids.includes(item.id))
-      return result
-    }
-  },
-  data () {
-    return {
-      showStyle: {
-        top: '7PX',
-        left: '13px'
-      },
-      showStyles: {
-        top: '5PX',
-        left: '12px'
-      },
-      sidewalkPhaseData: [],
-      currentName: '',
-      lockList: [],
-      allDirection: [],
-      patternCycleEqual: true,
-      spanIndex: [],
-      directions: [],
-      manualInfo: {
-        allred: 2,
-        greenclear: 6,
-        mingreen: 15,
-        duration: 600,
-        yellowflash: 3
-      },
-      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
-      themeColor2: getTheme() === 'light' ? '#454545' : '#fff'
-    }
-  },
-  created () {
-    this.getAllDerection()
-  },
-  methods: {
-    checkId (val) {
-      if (val.id === 1) {
-        return 1
-      } else if (val.id === 5) {
-        return 2
-      } else if (val.id === 13) {
-        return 3
-      } else if (val.id === 9) {
-        return 4
-      } else if (val.id === 17) {
-        return 6
-      } else if (val.id === 21) {
-        return 7
-      } else if (val.id === 25) {
-        return 5
-      } else if (val.id === 29) {
-        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) {
-      this.directions = [this.checkId(val)]
-      let iframdevid = getIframdevid()
-      let param = {
-        'agentid': iframdevid,
-        'direction': this.directions
-      }
-      getlockPhase(param).then(res => {
-        if (res.data.success !== true) {
-          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
-          return
-        }
-        this.lockList = res.data.data
-        let ringDataModel = new RingDataModel({}, res.data.data)
-        this.sidewalkPhaseData = ringDataModel.getlockData().map(ele => {
-          return ele.map(item => ({
-            ...item,
-            bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
-          }))
-        })
-      })
-    },
-    boxShow (index, data) {
-      this.spanIndex = []
-      let arrIndex = this.spanIndex.indexOf(index)
-      if (arrIndex > -1) {
-        this.spanIndex.splice(arrIndex, 1)
-      } else {
-        this.spanIndex.push(index)
-      }
-      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')
-    },
-    handleManualControl () {
-      if (this.directions.length === 0) {
-        this.$message.error(this.$t('openatccomponents.overview.directionnull'))
-        return
-      }
-      let iframdevid = getIframdevid()
-      let submitdata = {
-        agentid: iframdevid,
-        direction: this.directions,
-        greenflash: this.manualInfo.greenclear,
-        duration: this.manualInfo.duration,
-        yellow: this.manualInfo.yellowflash,
-        redclear: this.manualInfo.allred,
-        mingreen: this.manualInfo.mingreen
-
-      }
-      lockPhase(submitdata).then(res => {
-        if (!res.data.success) {
-          if (res.data.code === '4002' && res.data.data.errorCode === '4209') {
-            let success = res.data.data.content.success
-            if (success !== 0) {
-              let errormsg = 'openatccomponents.overview.putTscControlError' + success
-              this.$message.error(this.$t(errormsg))
-              return
-            }
-          }
-          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
-          return
-        }
-        this.$message.success(this.$t('openatccomponents.common.download'))
-        // if (res.data.success !== true) {
-        //   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
-    }
-  }
-}
-</script>
-
-  <style lang="scss" scoped>
-.single-model-select {
-    background-color: #a2cfff;
-  }
-  </style>
+<template>
+    <div class="tentativeplan-control manual-common-content">
+      <!-- <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.azimuthlocking')}}</div> -->
+      <el-row>
+        <el-col :span="12">
+           <el-form
+             ref="manual"
+             label-position="left"
+             :model="manualInfo"
+             label-width="90px">
+             <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="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="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="small"></el-input-number>
+              </el-form-item>
+             </el-form>
+        </el-col>
+        <el-col :span="12">
+           <el-form
+             ref="manual"
+             label-position="left"
+             :model="manualInfo"
+             label-width="90px">
+             <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="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="small"></el-input-number>
+              </el-form-item>
+             </el-form>
+        </el-col>
+      </el-row>
+      <el-row style="margin-top: 6px;">
+        <el-col :span="24">
+            <span class="model-label-title">{{$t('openatccomponents.overview.indirection')}}</span>
+        </el-col>
+        <el-col :span="24">
+            <div class="control-model" v-for="(item, index) in imgs" :key="index">
+                <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" :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="{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="{color: themeColor2}" style="font-size:5PX;color:#454545;" v-if="item[item.length-1].controltype === 99"></i>
+                        </div>
+                        <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>
+            </div>
+        </div>
+        <!-- </div> -->
+        </el-col>
+      </el-row>
+      <!-- <div class="model-label" style="width: auto;overflow: hidden;">
+        <span class="intitle">{{$t('openatccomponents.overview.indirection')}}</span>
+        <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>
+        </div>
+      </div> -->
+      <div class="footer">
+          <el-button v-if="isShowBack" @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
+          <el-button v-if="isShowRecovery && isHasPermission('configer:manual:renew')" @click="toAutoControl()">{{$t('openatccomponents.overview.recovery')}}</el-button>
+          <el-button v-if="isShowImplement" type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.implement')}}</el-button>
+          <el-button v-if="!isShowImplement" type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.comfirm')}}</el-button>
+      </div>
+    </div>
+  </template>
+
+<script>
+import { getPhase } from './utils'
+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'
+import { getMessageByCode } from '../../../../utils/responseMessage'
+export default {
+  name: 'tentativeplancontrol',
+  components: {
+    Stages
+  },
+  props: {
+    realtimeStatusModalvisible: {
+      type: Boolean,
+      default: true
+    },
+    isShowBack: {
+      type: Boolean,
+      default: true
+    },
+    isShowRecovery: {
+      type: Boolean,
+      default: true
+    },
+    isShowImplement: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    sidewalkPhaseData: {
+      handler: function (val, oldVal) {
+        this.sidewalkPhaseData = val
+      },
+      // 深度观察监听
+      deep: true
+    }
+  },
+  computed: {
+    tankuangSize () {
+      let widths = ((100 / 2) - 2) + '%'
+      let styleObj = {
+        width: widths
+      }
+      return styleObj
+    },
+    imgs () {
+      let arrays = []
+      let images = getPhase()
+      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)
+      const result = arrays.filter(item => arr1Ids.includes(item.id))
+      return result
+    }
+  },
+  data () {
+    return {
+      showStyle: {
+        top: '7PX',
+        left: '13px'
+      },
+      showStyles: {
+        top: '5PX',
+        left: '12px'
+      },
+      sidewalkPhaseData: [],
+      currentName: '',
+      lockList: [],
+      allDirection: [],
+      patternCycleEqual: true,
+      spanIndex: [],
+      directions: [],
+      manualInfo: {
+        allred: 2,
+        greenclear: 6,
+        mingreen: 15,
+        duration: 600,
+        yellowflash: 3
+      },
+      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
+      themeColor2: getTheme() === 'light' ? '#454545' : '#fff'
+    }
+  },
+  created () {
+    this.getAllDerection()
+  },
+  methods: {
+    checkId (val) {
+      if (val.id === 1) {
+        return 1
+      } else if (val.id === 5) {
+        return 2
+      } else if (val.id === 13) {
+        return 3
+      } else if (val.id === 9) {
+        return 4
+      } else if (val.id === 17) {
+        return 6
+      } else if (val.id === 21) {
+        return 7
+      } else if (val.id === 25) {
+        return 5
+      } else if (val.id === 29) {
+        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) {
+      this.directions = [this.checkId(val)]
+      let iframdevid = getIframdevid()
+      let param = {
+        'agentid': iframdevid,
+        'direction': this.directions
+      }
+      getlockPhase(param).then(res => {
+        if (res.data.success !== true) {
+          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
+          return
+        }
+        this.lockList = res.data.data
+        let ringDataModel = new RingDataModel({}, res.data.data)
+        this.sidewalkPhaseData = ringDataModel.getlockData().map(ele => {
+          return ele.map(item => ({
+            ...item,
+            bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
+          }))
+        })
+      })
+    },
+    boxShow (index, data) {
+      this.spanIndex = []
+      let arrIndex = this.spanIndex.indexOf(index)
+      if (arrIndex > -1) {
+        this.spanIndex.splice(arrIndex, 1)
+      } else {
+        this.spanIndex.push(index)
+      }
+      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')
+    },
+    handleManualControl () {
+      if (this.directions.length === 0) {
+        this.$message.error(this.$t('openatccomponents.overview.directionnull'))
+        return
+      }
+      let iframdevid = getIframdevid()
+      let submitdata = {
+        agentid: iframdevid,
+        direction: this.directions,
+        greenflash: this.manualInfo.greenclear,
+        duration: this.manualInfo.duration,
+        yellow: this.manualInfo.yellowflash,
+        redclear: this.manualInfo.allred,
+        mingreen: this.manualInfo.mingreen
+
+      }
+      lockPhase(submitdata).then(res => {
+        if (!res.data.success) {
+          if (res.data.code === '4002' && res.data.data.errorCode === '4209') {
+            let success = res.data.data.content.success
+            if (success !== 0) {
+              let errormsg = 'openatccomponents.overview.putTscControlError' + success
+              this.$message.error(this.$t(errormsg))
+              return
+            }
+          }
+          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
+          return
+        }
+        this.$message.success(this.$t('openatccomponents.common.download'))
+        // if (res.data.success !== true) {
+        //   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
+    }
+  }
+}
+</script>
+
+  <style lang="scss" scoped>
+.single-model-select {
+    background-color: #a2cfff;
+  }
+  </style>