openatc-components 0.2.88 → 0.2.89

package/package/kisscomps/components/IntersectionMap/crossDirection/crossDiagram.vue

@@ -1,1358 +1,1358 @@
-/**
- * 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>
-  <div class="crossImg">
-    <div v-show="isShowState">
-      <div class="stateText">
-        <div style="border:0px solid red;float:right;">
-          {{stateName }}
-        </div>
-      </div>
-    </div>
-    <div v-show="isShowMode">
-      <div class="controlText">
-        <div style="border:0px solid red;float:right;">
-          {{controlName }}
-        </div>
-      </div>
-      <div class="modeText">
-        {{modeName }}
-      </div>
-    </div>
-    <!-- 右行道路 B-->
-    <div class="right-dir-road" v-if="roadDir === 'right'">
-      <div class="centerText" v-if="crossType !== 'Customroads' && isHasPhase">
-      <!-- 相位倒计时 -->
-      <div class="phaseCountdown" v-show="isShowInterval" v-if="isLoaded && isHasPhase && isHasCountdown" :class="{'countdownBg': isLoaded}">
-        <div v-for="curPhase in phaseCountdownList" :key="curPhase.id" :style="{color: curPhase.phaseCountdownColor}">
-          <div v-if="curPhase.phaseCountdown !== undefined && curPhase.phaseCountdown !== -1" style="overflow: hidden;margin-bottom: 4px;">
-            <span style="float: left;width: 42px;height: 42px;position: relative;border: 1px solid rgba(255, 255, 255, 0.1);margin-right: 5px;">
-              <xdr-dir-selector :Data="xdrData" :Datas="xdrpedData" Width="55px" Height="55px" Widths="55px" Heights="55px" :showlist="curPhase.showlist" :roadDirection="roadDirection"></xdr-dir-selector>
-            </span>
-            <span style="float: left;color: #fff;margin-right: 8px;width: 30px;">P{{curPhase.id}}:</span>
-            <span style="float: left;font-size: 25px;">{{curPhase.phaseCountdown}}</span>
-          </div>
-        </div>
-      </div>
-      <!-- 手动刷新 -->
-      <div v-if="!isLoaded">
-        <RefreshSvg @click.native="refresh"/>
-        <span class="text">{{$t('openatccomponents.overview.getintersectionmapagain')}}</span>
-      </div>
-    </div>
-      <!-- 路口底图 -->
-      <div class="baseImg">
-        <!-- 城市道路 -->
-        <CrossRoadsSvg v-if="crossType === 'Crossroads'"/>
-        <TShapeEastRoadsSvg v-if="crossType === 'TypeT-east'"/>
-        <TShapeWestRoadsSvg v-if="crossType === 'TypeT-west'"/>
-        <TShapeNorthRoadsSvg v-if="crossType === 'TypeT-north'"/>
-        <TShapeSouthRoadsSvg v-if="crossType === 'TypeT-south'"/>
-        <!-- 其他路口 -->
-        <CustomRoadsSvg v-if="crossType === 'Customroads'"/>
-        <!-- 匝道 -->
-        <RampEastRoadsSvg v-if="crossType === 'ramp-east' && !isVipRoute" />
-        <RampWestRoadsSvg v-if="crossType === 'ramp-west' && !isVipRoute" />
-        <RampNorthRoadsSvg v-if="crossType === 'ramp-north' && !isVipRoute" />
-        <RampSouthRoadsSvg v-if="crossType === 'ramp-south' && !isVipRoute" />
-        <!-- 路段行人过街 -->
-        <PedSectionSNSvg v-if="crossType === 'ped-section-south-north'" />
-        <PedSectionEWSvg v-if="crossType === 'ped-section-east-west'" />
-      </div>
-      <!-- 城市道路状态-->
-      <div v-if="mainType === '100' || mainType === '101' || mainType === '104'">
-        <!-- 人行道 -->
-        <div class="sidewalk" id="sidewalk" v-if="resetflag && isLoaded">
-          <SidewalkClickSvg v-if="isVipRoute && compSidewalkPhaseData.length" :Data="compSidewalkPhaseData" :clickMode="clickMode" @handleClickSidewalkIcon="handleClickSidewalkIcon" />
-          <SidewalkSvg v-else v-for="(side, index) in compSidewalkPhaseData" :key="side.key + '-' + index" :Data="side" :crossType="crossType" />
-        </div>
-        <!-- 车道相位 -->
-        <div v-if="resetflag" class="phaseIcon">
-          <PhaseIconSvg v-for="(item, index) in compLanePhaseData" :key="item.key + '-' + index" :Data="item" :isVipRoute="isVipRoute" :clickMode="clickMode" @handleClickPhaseIcon="handleClickPhaseIcon" />
-        </div>
-         <!-- 公交相位 -->
-        <div v-if="resetflag && !isVipRoute" class="busIcon">
-          <BusMapSvg v-for="(item, index) in comdireBusPhaseData" :key="'Busmap-' + item.key + '-' + index" :Data="item" />
-          <PhaseIconSvg v-for="(item, index) in comdireBusPhaseData" :key="item.key + '-' + index" :Data="item"/>
-        </div>
-      </div>
-      <!-- 匝道状态 -->
-        <!-- 车道相位 -->
-      <div v-if="resetflag && mainType === '103' && !isVipRoute">
-        <RampPhaseIconSvg v-for="(item, index) in LanePhaseData" :key="item.key + '-' + index" :Data="item" />
-      </div>
-    </div>
-    <!-- 右行道路 E-->
-
-    <!-- 左行道路 B-->
-    <div class="left-dir-road" v-if="roadDir === 'left'">
-      <div class="centerText" v-if="mainType === '100' || mainType === '101'" :class="{'countdownBg': isLoaded}">
-        <!-- 相位倒计时 -->
-        <div class="phaseCountdown" v-show="isShowInterval" v-if="isLoaded && isHasPhase && isHasCountdown" :class="{'countdownBg': isLoaded}">
-          <div v-for="curPhase in phaseCountdownList" :key="curPhase.id" :style="{color: curPhase.phaseCountdownColor}">
-            <div v-if="curPhase.phaseCountdown !== undefined && curPhase.phaseCountdown !== -1" style="overflow: hidden;margin-bottom: 4px;">
-              <span style="float: left;width: 42px;height: 42px;position: relative;border: 1px solid rgba(255, 255, 255, 0.1);margin-right: 5px;">
-                <xdr-dir-selector :Data="xdrData" :Datas="xdrpedData" Width="55px" Height="55px" Widths="55px" Heights="55px" :showlist="curPhase.showlist" :roadDirection="roadDirection"></xdr-dir-selector>
-              </span>
-              <span style="float: left;color: #fff;margin-right: 8px;width: 30px;">P{{curPhase.id}}:</span>
-              <span style="float: left;font-size: 25px;">{{curPhase.phaseCountdown}}</span>
-            </div>
-          </div>
-        </div>
-        <!-- 手动刷新 -->
-        <div v-if="!isLoaded">
-          <RefreshSvg @click.native="refresh"/>
-          <span class="text">{{$t('openatccomponents.overview.getintersectionmapagain')}}</span>
-        </div>
-      </div>
-      <!-- 路口底图 -->
-      <div class="baseImg">
-        <!-- 城市道路 -->
-        <LCrossRoadsSvg v-if="crossType === 'Crossroads'"/>
-        <LTShapeEastRoadsSvg v-if="crossType === 'TypeT-east'"/>
-        <LTShapeWestRoadsSvg v-if="crossType === 'TypeT-west'"/>
-        <LTShapeNorthRoadsSvg v-if="crossType === 'TypeT-north'"/>
-        <LTShapeSouthRoadsSvg v-if="crossType === 'TypeT-south'"/>
-        <!-- 其他路口 -->
-        <CustomRoadsSvg v-if="mainType !== '100' && mainType !== '101'"/>
-      </div>
-      <!-- 城市道路状态-->
-      <div v-if="mainType === '100' || mainType === '101'">
-        <!-- 人行道 -->
-        <div class="sidewalk" v-if="resetflag && isLoaded">
-          <SidewalkClickSvg v-if="isVipRoute && compSidewalkPhaseData.length" :Data="compSidewalkPhaseData" :clickMode="clickMode" @handleClickSidewalkIcon="handleClickSidewalkIcon" />
-          <SidewalkSvg v-else v-for="side in compSidewalkPhaseData" :key="side.key" :Data="side" :crossType="crossType" />
-        </div>
-        <!-- 车道相位 -->
-        <div v-if="resetflag" class="phaseIcon">
-          <LPhaseIconSvg v-for="item in compLanePhaseData" :key="item.key" :Data="item" :isVipRoute="isVipRoute" :clickMode="clickMode" @handleClickPhaseIcon="handleClickPhaseIcon"/>
-        </div>
-         <!-- 公交相位 -->
-        <div v-if="resetflag" class="busIcon">
-          <BusMapSvg v-for="(item, index) in comdireBusPhaseData" :key="'Busmap-' + item.key + '-' + index" :Data="item" />
-          <LPhaseIconSvg v-for="(item, index) in comdireBusPhaseData" :key="item.key + '-' + index" :Data="item"/>
-        </div>
-      </div>
-    </div>
-    <!-- 左行道路 E-->
-  </div>
-</template>
-<script>
-import PhaseIconSvg from './phaseIcon/phaseIconSvg'
-import PhaseDataModel from './utils.js'
-import { getIntersectionInfo } from '../../../../api/template.js'
-import { uploadSingleTscParam } from '../../../../api/param.js'
-import CrossRoadsSvg from './baseImg/CrossRoadsSvg'
-import TShapeEastRoadsSvg from './baseImg/TShapeEastRoadsSvg'
-import TShapeWestRoadsSvg from './baseImg/TShapeWestRoadsSvg.vue'
-import TShapeNorthRoadsSvg from './baseImg/TShapeNorthRoadsSvg.vue'
-import TShapeSouthRoadsSvg from './baseImg/TShapeSouthRoadsSvg.vue'
-import CustomRoadsSvg from './baseImg/CustomRoadsSvg.vue'
-import RefreshSvg from './baseImg/refreshSvg'
-import SidewalkSvg from './baseImg/SidewalkSvg'
-import SidewalkClickSvg from './baseImg/SidewalkClickSvg'
-import RampEastRoadsSvg from './baseImg/RampEastSvg'
-import RampWestRoadsSvg from './baseImg/RampWestSvg'
-import RampNorthRoadsSvg from './baseImg/RampNorthSvg'
-import RampSouthRoadsSvg from './baseImg/RampSouthSvg'
-import RampPhaseIconSvg from './phaseIcon/rampPhaseIconSvg'
-import PedSectionEWSvg from './baseImg/PedSectionEWSvg'
-import PedSectionSNSvg from './baseImg/PedSectionSNSvg'
-// import { mapState } from 'vuex'
-import LCrossRoadsSvg from './baseImg/leftroad/LCrossRoadsSvg'
-import LTShapeEastRoadsSvg from './baseImg/leftroad/LTShapeEastRoadsSvg'
-import LTShapeWestRoadsSvg from './baseImg/leftroad/LTShapeWestRoadsSvg.vue'
-import LTShapeNorthRoadsSvg from './baseImg/leftroad/LTShapeNorthRoadsSvg.vue'
-import LTShapeSouthRoadsSvg from './baseImg/leftroad/LTShapeSouthRoadsSvg.vue'
-import LPhaseIconSvg from './phaseIcon/LphaseIconSvg'
-import CrossDiagramMgr from '../../../../EdgeMgr/controller/crossDiagramMgr.js'
-import BusMapSvg from './busIcon/busMapSvg'
-import { getMessageByCode } from '../../../../utils/responseMessage.js'
-
-import CrossDirectionConflictList from '../../../../utils/conflictList.js'
-
-export default {
-  name: 'crossDiagram',
-  components: {
-    PhaseIconSvg,
-    CrossRoadsSvg,
-    TShapeEastRoadsSvg,
-    TShapeWestRoadsSvg,
-    TShapeNorthRoadsSvg,
-    TShapeSouthRoadsSvg,
-    CustomRoadsSvg,
-    RefreshSvg,
-    SidewalkSvg,
-    RampEastRoadsSvg,
-    RampWestRoadsSvg,
-    RampNorthRoadsSvg,
-    RampSouthRoadsSvg,
-    RampPhaseIconSvg,
-    PedSectionEWSvg,
-    PedSectionSNSvg,
-    LCrossRoadsSvg,
-    LTShapeEastRoadsSvg,
-    LTShapeWestRoadsSvg,
-    LTShapeNorthRoadsSvg,
-    LTShapeSouthRoadsSvg,
-    LPhaseIconSvg,
-    BusMapSvg,
-    SidewalkClickSvg
-  },
-  props: {
-    crossStatusData: {
-      type: Object
-    },
-    agentId: {
-      type: String
-    },
-    // devStatus: {
-    //   type: Number
-    // },
-    isShowInterval: {
-      type: Boolean,
-      devault: true
-    },
-    roadDirection: {
-      type: String
-    },
-    isShowState: {
-      type: Boolean,
-      devault: false
-    },
-    isShowMode: {
-      type: Boolean,
-      devault: false
-    },
-    modeName: {
-      type: String,
-      default: ''
-    },
-    controlName: {
-      type: String,
-      default: ''
-    },
-    stateName: {
-      type: String,
-      default: ''
-    },
-    choosedDirection: {
-      type: Array,
-      default: () => []
-    },
-    choosedPedDirection: {
-      type: Array,
-      default: () => []
-    },
-    isVipRoute: { // 区分普通路口和VIP路口，如果是vip路口（特勤路线和分组管控），才需要获取通道和处理通道冲突，并显示已选方向
-      type: Boolean,
-      default: false
-    },
-    clickMode: {
-      type: Boolean,
-      default: false
-    },
-    isThirdSignal: {
-      type: Boolean,
-      default: false
-    },
-    channelType: {
-      type: Boolean,
-      default: false
-    }
-  },
-  // computed: {
-  //   ...mapState({
-  //     roadDirection: state => state.globalParam.roadDirection
-  //   })
-  // },
-  watch: {
-    tempType: {
-      handler: function (val) {
-        this.getCrossType()
-      }
-    },
-    crossStatusData: {
-      handler: function (val, oldVal) {
-        // 路口状态数据
-        this.statusData = JSON.parse(JSON.stringify(val))
-        // 默认显示相位数据（包括黄闪、全红、关灯状态下，或者匝道，均不做比对跟随相位的处理）
-        this.drawDefaultPhaseIcon()
-
-        if (this.channelType) {
-          // 通道路口图状态数据
-          this.channelStatusList = val.channellamp
-          this.createChannelStatusMap()
-          this.getChannelPhaseStatus()
-          this.getChannelPedStatus()
-          return
-        }
-
-        // 模版路口图状态数据
-        this.phaseStatusList = val.phase
-        this.overlapStatusList = val.overlap
-        if (val.control === 1 || val.control === 2 || val.control === 3) {
-          // 黄闪、全红、关灯属于特殊控制，优先级最高，直接改变灯色，不用判断phase里的type，也不需要考虑跟随相位的灯色优先级
-          if (val.control === 1) {
-            this.getYellowFlashColor()
-          } else {
-            this.SpecialControl(val)
-          }
-          this.isHasPhase = false
-          return
-        }
-        if (!val.phase && !this.overlapStatusList) {
-          // 非特殊控制，相位和跟随相位不存在的情况下，灯色恢复默认
-          this.handleSpecialControlStatus('默认')
-          this.isHasPhase = false
-          return
-        }
-        if (val.control === 16) {
-          // 方向锁定时，相位状态显示与通道无关，显示接口返回的红灯会有歧义，此处特殊处理显示默认白色
-          this.handleSpecialControlStatus('方向锁定')
-          this.isHasPhase = false
-          return
-        }
-        this.curPhase = val.current_phase
-        this.isHasPhase = true
-        this.createPhaseStatusMap()
-        // 正常情况下，获取车道相位、车道跟随相位、相位倒计时、行人相位、行人跟随相位 的状态
-        this.getPhaseStatus()
-        this.getOverlapPhaseStatus()
-        this.getCurPhaseCountdown()
-        this.getBusPhaseStatus()
-        if (this.mainType === '100' || this.mainType === '101' || this.mainType === '104') {
-          // 城市道路和路段行人过街才显示人行道状态
-          this.getpedStatus()
-          this.getOverlapPedStatus()
-          // 算法对比行人相位与行人跟随相位的状态
-          this.comparePedStatus()
-          // 算法对比车道相位与车道跟随相位的状态
-          this.comparePhaseStatus()
-        }
-        // console.log('this.phaseStatusMap 相位状态映射', this.phaseStatusMap)
-        // console.log('LanePhaseData 车道相位', this.LanePhaseData)
-        // console.log('sidewalkPhaseData 行人相位', this.sidewalkPhaseData)
-        // console.log('overlapPhaseStatusMap 跟随相位状态映射', this.overlapPhaseStatusMap)
-        // console.log('overlapLanePhaseData 车道跟随相位', this.overlapLanePhaseData)
-        // console.log('this.overlapsidewalkPhaseData 行人跟随相位', this.overlapsidewalkPhaseData)
-      },
-      // 深度观察监听
-      deep: true
-    },
-    devStatus: {
-      handler: function (val) {
-        if (val === 3) return
-        this.handleDefaultStatus()
-      }
-    },
-    roadDirection: {
-      handler: function (val1, val2) {
-        if (val1 !== val2) {
-          this.init()
-        }
-      }
-    },
-    agentId: {
-      handler: function (val1, val2) {
-        if (val1 !== val2) {
-          this.init()
-        }
-      }
-    }
-  },
-  data () {
-    return {
-      roadDir: 'right', // 道路行车方向，默认右行
-      phaseCountdownList: [], // 相位倒计时列表
-      statusData: null, // 信号机状态
-      LanePhaseData: [], // 车道相位数据
-      overlapLanePhaseData: [], // 车道跟随相位数据
-      curPhase: [], // 当前相位列表
-      phaseStatusList: [], // 相位状态列表
-      phaseStatusMap: new Map(), // 相位状态映射
-      overlapPhaseStatusMap: new Map(), // 跟随相位状态映射
-      ColorMap: new Map([[0, '#828282'], [1, '#ff2828'], [2, '#f7b500'], [3, '#77fb65'], [4, '#77fb65'], [5, '#f7b500']]), // 当前相位状态 --- 0：关灯, 1：红, 2：黄,  3：绿, 4：绿闪, 5：黄闪
-      SidewalkColorMap: new Map([[0, '#828282'], [1, '#e24b4b'], [3, '#7bd66b']]),
-      tempType: '', // 模版类型
-      mainType: '101', // 路口形状
-      mainDirection: '000', // 路口方向
-      crossType: '', // 路口底图类型
-      isLoaded: false, // 是否成功加载底图
-      isHasPhase: true, // 是否有相位状态数据
-      phaseControlColorMap: new Map([['全红', '#ff2828'], ['关灯', '#828282'], ['默认', '#fff'], ['方向锁定', '#fff']]),
-      sidewalkPhaseData: [], // 行人相位
-      overlapsidewalkPhaseData: [], // 行人跟随相位
-      resetflag: true, // 离线后，控制行人相位、车道相位reset标识
-      compLanePhaseData: [], // 对比车道相位和车道跟随相位后，显示的数据
-      compSidewalkPhaseData: [], // // 对比行人相位和车道跟随相位后，显示的数据
-      comdirePhaseData: [], // 对比相同方向车道相位数据后，被删减的唯一direction的数组
-      comdireOverlapPhaseData: [], // 对比相同方向车道跟随相位数据后，被删减的唯一direction的数组
-      busPhaseData: [], // 公交相位数据
-      comdireBusPhaseData: [], //  对比相同方向公交车道数据后，被删减的唯一direction的数组
-      channelStatusMap: new Map(), // 通道实时状态映射
-      channelStatusList: [], // 通道实时状态列表
-      phaseDirMap: new Map(),
-      xdrData: {
-        left: '5px',
-        top: '4px'
-      },
-      xdrpedData: {
-        left: '1px',
-        top: '1px'
-      },
-      isHasCountdown: false
-    }
-  },
-  methods: {
-    init () {
-      this.CrossDiagramMgr = new CrossDiagramMgr()
-      this.getRoadDirection()
-      this.PhaseDataModel = new PhaseDataModel(this.roadDirection)
-      this.getIntersectionInfo() // 获取路口信息
-    },
-    drawDefaultPhaseIcon () {
-      this.compLanePhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compare(this.LanePhaseData, this.overlapLanePhaseData, 'type', 'nostatus')))
-      this.compSidewalkPhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compare(this.sidewalkPhaseData, this.overlapsidewalkPhaseData, 'pedtype', 'nostatus')))
-      this.comdireBusPhaseData = JSON.parse(JSON.stringify(this.busPhaseData))
-      console.log(this.LanePhaseData)
-      console.log(this.overlapLanePhaseData)
-      console.log('###################', this.compLanePhaseData)
-    },
-    comparePhaseStatus () {
-      // 对比车道： 跟随相位和相位的状态数据（此处判断是为了保证被比较的数据direction都是唯一的）
-      if (!this.comdirePhaseData && !this.comdireOverlapPhaseData) {
-        this.compLanePhaseData = this.CrossDiagramMgr.compare(this.LanePhaseData, this.overlapLanePhaseData, 'type')
-      } else if (!this.comdireOverlapPhaseData) {
-        this.compLanePhaseData = this.CrossDiagramMgr.compare(this.comdirePhaseData, this.overlapLanePhaseData, 'type')
-      } else if (!this.comdirePhaseData) {
-        this.compLanePhaseData = this.CrossDiagramMgr.compare(this.LanePhaseData, this.comdireOverlapPhaseData, 'type')
-      } else {
-        this.compLanePhaseData = this.CrossDiagramMgr.compare(this.comdirePhaseData, this.comdireOverlapPhaseData, 'type')
-      }
-    },
-    comparePedStatus () {
-      // 对比人行道： 跟随相位和相位的状态数据
-      this.compSidewalkPhaseData = this.CrossDiagramMgr.compare(this.sidewalkPhaseData, this.overlapsidewalkPhaseData, 'pedtype')
-    },
-    resetPhaseStatus () {
-      // 车道相位、行人相位恢复默认状态
-      this.resetflag = false
-      this.$nextTick(() => {
-        this.resetflag = true
-      })
-    },
-    SpecialControl (data) {
-      switch (data.control) {
-        case 2: this.handleSpecialControlStatus('全红')
-          break
-        case 3: this.handleSpecialControlStatus('关灯')
-          break
-        default: this.handleSpecialControlStatus('默认')
-      }
-    },
-    handleDefaultStatus () {
-      // 恢复默认状态
-      if (this.compLanePhaseData.length) {
-        this.phaseCountdown = ''
-        this.phaseCountdownColor = '#fff'
-        this.compLanePhaseData.forEach(data => {
-          data.color = '#fff'
-        })
-      }
-      if (this.compSidewalkPhaseData.length) {
-        this.compSidewalkPhaseData.forEach(data => {
-          data.color = '#fff'
-        })
-      }
-      if (this.comdireBusPhaseData.length) {
-        this.comdireBusPhaseData.forEach(data => {
-          data.color = '#fff'
-        })
-      }
-      this.phaseCountdownList = []
-      this.resetPhaseStatus()
-    },
-    handleSpecialControlStatus (Control) {
-      this.resetPhaseStatus()
-      // 控制黄闪、全红、关灯、默认情况下的车道相位颜色和倒计时颜色
-      if (Control === '默认') {
-        // 倒计时恢复默认颜色
-        this.phaseCountdownList.forEach(item => {
-          item.phaseCountdown = ''
-          item.id = ''
-          item.phaseCountdownColor = '#fff'
-        })
-      }
-      if (this.compLanePhaseData.length) {
-        const compLanePhaseData = this.compLanePhaseData.map(data => ({
-          ...data,
-          color: this.phaseControlColorMap.get(Control)
-        }))
-        this.compLanePhaseData = JSON.parse(JSON.stringify(compLanePhaseData))
-      }
-      if (this.compSidewalkPhaseData.length) {
-        const compSidewalkPhaseData = this.compSidewalkPhaseData.map(data => ({
-          ...data,
-          color: this.phaseControlColorMap.get(Control)
-        }))
-        this.compSidewalkPhaseData = JSON.parse(JSON.stringify(compSidewalkPhaseData))
-      }
-      if (this.comdireBusPhaseData.length) {
-        const comdireBusPhaseData = this.comdireBusPhaseData.map(data => ({
-          ...data,
-          color: this.phaseControlColorMap.get(Control)
-        }))
-        this.comdireBusPhaseData = JSON.parse(JSON.stringify(comdireBusPhaseData))
-      }
-      if (this.mainType === '103') {
-        if (this.LanePhaseData.length) {
-          const LanePhaseData = this.LanePhaseData.map(data => ({
-            ...data,
-            color: this.phaseControlColorMap.get(Control)
-          }))
-          this.LanePhaseData = JSON.parse(JSON.stringify(LanePhaseData))
-        }
-      }
-    },
-    createPhaseStatusMap () {
-      // 生成相位id和相位状态对应数据结构
-      this.phaseStatusList.map(phase => {
-        let phaseId = phase.id
-        let phaseInfo = {
-          type: phase.type,
-          phaseCountdown: phase.countdown,
-          pedtype: phase.pedtype
-        }
-        this.phaseStatusMap.set(phaseId, phaseInfo)
-      })
-    },
-    getYellowFlashColor () {
-      // 车道相位（左行右行）
-      let curLanePhaseData = []
-      for (let i = 0; i < this.compLanePhaseData.length; i++) {
-        const data = {
-          ...this.compLanePhaseData[i],
-          type: '黄闪',
-          control: 1
-        }
-        curLanePhaseData.push(data)
-      }
-      this.compLanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
-
-      // 行人相位
-      let curPedStatus = []
-      for (let i = 0; i < this.compSidewalkPhaseData.length; i++) {
-        const data = {
-          ...this.compSidewalkPhaseData[i],
-          pedtype: '黄闪',
-          control: 1
-        }
-        curPedStatus.push(data)
-      }
-      this.compSidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
-
-      // 公交相位
-      let curBusLanePhaseData = []
-      for (let i = 0; i < this.comdireBusPhaseData.length; i++) {
-        const data = {
-          ...this.comdireBusPhaseData[i],
-          type: '黄闪',
-          control: 1
-        }
-        curBusLanePhaseData.push(data)
-      }
-      this.comdireBusPhaseData = JSON.parse(JSON.stringify(curBusLanePhaseData))
-
-      if (this.mainType === '103') {
-        // 匝道相位
-        if (this.LanePhaseData.length) {
-          const LanePhaseData = this.LanePhaseData.map(data => ({
-            ...data,
-            type: '黄闪',
-            control: 1
-          }))
-          this.LanePhaseData = JSON.parse(JSON.stringify(LanePhaseData))
-        }
-      }
-    },
-    getPhaseStatus () {
-      // 得到车道相位状态（颜色）
-      this.comdirePhaseData = []
-      let curLanePhaseData = []
-      for (let i = 0; i < this.LanePhaseData.length; i++) {
-        let curPhaseStatus = this.phaseStatusMap.get(this.LanePhaseData[i].phaseid)
-        if (!curPhaseStatus) continue
-        const data = {
-          ...this.LanePhaseData[i],
-          type: curPhaseStatus.type,
-          color: this.ColorMap.get(curPhaseStatus.type),
-          phaseCountdown: curPhaseStatus.phaseCountdown,
-          flag: 'phase' // 车道相位数据标识
-        }
-        curLanePhaseData.push(data)
-      }
-      this.LanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
-      // 处理相位数据中，方向direction重复的情况：相同direction下，按照状态的优先级显示该方向的灯色：绿灯(3) > 绿闪(4) > 黄灯(2) > 红灯(1)
-      // 如果有相同direction，处理后会改变原数组长度，导致第二次无法正确比较状态，因此需要中间变量存储
-      this.comdirePhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compareRepeatDirection(this.LanePhaseData, 'type', 'phase')))
-    },
-    getOverlapPhaseStatus () {
-      // 得到车道跟随相位状态（颜色）
-      this.comdireOverlapPhaseData = []
-      if (this.overlapStatusList) {
-        this.overlapStatusList.map(phase => {
-          let phaseId = phase.id
-          let phaseInfo = {
-            type: phase.type,
-            phaseCountdown: phase.countdown,
-            pedtype: phase.pedtype
-          }
-          this.overlapPhaseStatusMap.set(phaseId, phaseInfo)
-        })
-      }
-      let curLanePhaseData = []
-      for (let i = 0; i < this.overlapLanePhaseData.length; i++) {
-        let curPhaseStatus = this.overlapPhaseStatusMap.get(this.overlapLanePhaseData[i].phaseid)
-        if (!curPhaseStatus) continue
-        const data = {
-          ...this.overlapLanePhaseData[i],
-          type: curPhaseStatus.type,
-          color: this.ColorMap.get(curPhaseStatus.type),
-          phaseCountdown: curPhaseStatus.phaseCountdown,
-          flag: 'overlapphase' // 车道跟随相位数据标识
-        }
-        curLanePhaseData.push(data)
-      }
-      this.overlapLanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
-      // 处理跟随相位数据中，方向direction重复的情况：相同direction下，按照状态的优先级显示该方向的灯色：绿灯(3) > 绿闪(4) > 黄灯(2) > 红灯(1)
-      // 如果有相同direction，处理后会改变原数组长度，导致第二次无法正确比较状态，因此需要中间变量存储
-      this.comdireOverlapPhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compareRepeatDirection(this.overlapLanePhaseData, 'type', 'overlapphase')))
-    },
-    getBusPhaseStatus () {
-      // 得到公交车道相位状态（颜色）
-      this.comdireBusPhaseData = []
-      let curLanePhaseData = []
-      for (let i = 0; i < this.busPhaseData.length; i++) {
-        let curPhaseStatus = this.phaseStatusMap.get(this.busPhaseData[i].phaseid)
-        if (!curPhaseStatus) continue
-        const data = {
-          ...this.busPhaseData[i],
-          type: curPhaseStatus.type,
-          color: this.ColorMap.get(curPhaseStatus.type),
-          phaseCountdown: curPhaseStatus.phaseCountdown,
-          flag: 'busphase' // 车道相位数据标识
-        }
-        curLanePhaseData.push(data)
-      }
-      this.busPhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
-      // 处理相位数据中，方向direction重复的情况：相同direction下，按照状态的优先级显示该方向的灯色：绿灯(3) > 绿闪(4) > 黄灯(2) > 红灯(1)
-      // 如果有相同direction，处理后会改变原数组长度，导致第二次无法正确比较状态，因此需要中间变量存储
-      this.comdireBusPhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compareRepeatDirection(this.busPhaseData, 'type', 'busphase')))
-    },
-    getCurPhaseCountdown () {
-      // 获取当前相位倒计时颜色
-      this.phaseCountdownList = []
-      this.isHasCountdown = false
-      this.curPhase.forEach(curP => {
-        this.phaseStatusList.forEach(phaseInfo => {
-          if (phaseInfo.id === curP) {
-            let countdownObj = {}
-            countdownObj.id = phaseInfo.id
-            countdownObj.phaseCountdown = phaseInfo.countdown
-            countdownObj.phaseCountdownColor = this.ColorMap.get(phaseInfo.type)
-            let curphasedir = this.phaseDirMap.get(phaseInfo.id)
-            if (curphasedir !== undefined) {
-              countdownObj.showlist = curphasedir.direction.map(dir => {
-                return {
-                  id: dir,
-                  peddirection: this.getshowped(curphasedir.peddirection),
-                  color: '#fff'
-                }
-              })
-            } else {
-              countdownObj.showlist = []
-            }
-
-            this.phaseCountdownList.push(countdownObj)
-            if (phaseInfo.countdown !== undefined && phaseInfo.countdown !== -1) {
-              this.isHasCountdown = true
-            }
-          }
-        })
-      })
-    },
-    getshowped (peddirection) {
-      let peddirarr = peddirection.map(peddir => ({
-        id: peddir,
-        name: this.PhaseDataModel.getSidePos(peddir).name,
-        color: 'rgba(255, 255, 255, 0.4)'
-      }))
-      return peddirarr
-    },
-    getIntersectionInfo () {
-      // 获取路口信息
-      const agentid = this.agentId || '0'
-      getIntersectionInfo(agentid).then(res => {
-        if (!res.data.success) {
-          this.isLoaded = false
-          let commomMsg = this.$t('openatccomponents.overview.signalID') + ' : ' + agentid
-          let msg = getMessageByCode(res.data.code, this.$i18n.locale)
-          if (res.data.data) {
-            // 子类型错误
-            let childErrorCode = res.data.data.errorCode
-            if (childErrorCode) {
-              let childerror = getMessageByCode(res.data.data.errorCode, this.$i18n.locale)
-              msg = msg + ' - ' + childerror
-            }
-          }
-          msg = msg + ' - ' + commomMsg
-          this.$message.error(msg)
-          return
-        }
-        this.isLoaded = true
-        this.tempType = res.data.data.type
-        // 获取车道相位、行人相位信息（坐标、名称）
-        this.mainType = this.tempType.split('-')[0]
-        this.mainDirection = this.tempType.split('-')[1]
-        if (this.isVipRoute && !this.isThirdSignal) {
-          // 特勤、分组管控下，非第三方设备，按通道显示相位方向；第三方设备还是按路口相位配置显示相位方向
-          this.getChannelInfo()
-          return
-        }
-        if (this.channelType) {
-          this.getChannelInfo()
-          return
-        }
-        this.crossInfo = res.data.data.param
-        this.crossInfo.phaseList.forEach(cross => this.phaseDirMap.set(cross.id, {direction: cross.direction, peddirection: cross.peddirection}))
-        if (this.mainType === '100' || this.mainType === '101' || this.mainType === '104') {
-          // 城市道路加载车道相位坐标和人行道坐标
-          this.getPhasePos()
-          this.getOverlapPhasePos()
-          this.getPedPhasePos()
-          this.getOverlapPedPhasePos()
-          if (!this.isVipRoute) {
-            this.getBusPos()
-          }
-        }
-        if (!this.isVipRoute && this.mainType === '103') {
-          // 获取匝道道路的主路和支路的相位坐标
-          this.getRampPhasePos()
-        }
-        if (!this.isVipRoute) {
-          this.drawDefaultPhaseIcon()
-        }
-        if (this.isVipRoute && this.isThirdSignal) {
-          this.LanePhaseData = this.CrossDiagramMgr.compare(this.LanePhaseData, this.overlapLanePhaseData, 'type', 'nostatus')
-          // console.log(this.LanePhaseData)
-          this.sidewalkPhaseData = this.CrossDiagramMgr.compare(this.sidewalkPhaseData, this.overlapsidewalkPhaseData, 'pedtype', 'nostatus')
-          let allDir = this.LanePhaseData.map(ele => ele.id)
-          let allPedDir = this.sidewalkPhaseData.map(ele => ele.id)
-          this.inneChoosedDirection = this.choosedDirection.filter(dir => allDir.indexOf(dir) !== -1)
-          this.inneChoosedPedDirection = this.choosedPedDirection.filter(dir => allPedDir.indexOf(dir) !== -1)
-          this.drawPhaseIcon()
-        }
-      })
-    },
-    getBusPos () {
-      // 公交相位信息
-      this.busPhaseData = []
-      this.crossInfo.phaseList.forEach((ele, i) => {
-        if (ele.controltype >= 3 && ele.controltype <= 6) {
-          ele.direction.forEach((dir, index) => {
-          // 车道相位
-            this.busPhaseData.push({
-              key: this.CrossDiagramMgr.getUniqueKey('busphase'),
-              phaseid: ele.id, // 相位id，用于对应相位状态
-              id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
-              name: this.PhaseDataModel.getBusPhasePos(dir).name,
-              left: this.PhaseDataModel.getBusPhasePos(dir).x,
-              top: this.PhaseDataModel.getBusPhasePos(dir).y,
-              busleft: this.PhaseDataModel.getBusMapPos(dir).x,
-              bustop: this.PhaseDataModel.getBusMapPos(dir).y,
-              controltype: ele.controltype
-            })
-          })
-        }
-      })
-      // 去掉重复方向的数据
-      this.busPhaseData = Array.from(new Set(this.busPhaseData.map(item => item.id)))
-        .map(id => this.busPhaseData.find(item => item.id === id))
-    },
-    createRandomType () {
-      for (var i = 3; i <= 5; i++) {
-        return Math.floor(Math.random() * (5 - 3)) + 3
-      }
-    },
-    getPhasePos () {
-      // 车道相位信息
-      this.LanePhaseData = []
-      this.crossInfo.phaseList.forEach((ele, i) => {
-        if (ele.controltype === undefined || ele.controltype <= 2) {
-          ele.direction.forEach((dir, index) => {
-          // 车道相位
-            this.LanePhaseData.push({
-              key: this.CrossDiagramMgr.getUniqueKey('phase'),
-              phaseid: ele.id, // 相位id，用于对应相位状态
-              id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
-              name: this.PhaseDataModel.getPhase(dir).name,
-              left: this.PhaseDataModel.getPhase(dir).x,
-              top: this.PhaseDataModel.getPhase(dir).y
-            })
-          })
-        }
-      })
-      // 去掉重复方向的数据
-      this.LanePhaseData = Array.from(new Set(this.LanePhaseData.map(item => item.id)))
-        .map(id => this.LanePhaseData.find(item => item.id === id))
-    },
-    getOverlapPhasePos () {
-      // 车道跟随相位信息
-      if (!this.crossInfo.overlaplList) return
-      this.overlapLanePhaseData = []
-      this.crossInfo.overlaplList.forEach((ele, i) => {
-        if (ele.direction) {
-          ele.direction.forEach((dir, index) => {
-            this.overlapLanePhaseData.push({
-              key: this.CrossDiagramMgr.getUniqueKey('overlapphase'),
-              phaseid: ele.id, // 相位id，用于对应相位状态
-              id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
-              name: this.PhaseDataModel.getPhase(dir).name,
-              left: this.PhaseDataModel.getPhase(dir).x,
-              top: this.PhaseDataModel.getPhase(dir).y
-            })
-          })
-        }
-      })
-      // 去掉重复方向的数据
-      this.overlapLanePhaseData = Array.from(new Set(this.overlapLanePhaseData.map(item => item.id)))
-        .map(id => this.overlapLanePhaseData.find(item => item.id === id))
-    },
-    getRampPhasePos () {
-      // 匝道车道相位信息
-      this.LanePhaseData = []
-      this.crossInfo.phaseList.forEach((ele, i) => {
-        ele.direction.forEach((dir, index) => {
-          if (ele.controltype === 0) {
-            this.handleRampPhasePosData(`${i}-${index}`, ele, dir, this.PhaseDataModel.getMainPhasePos)
-          }
-          if (ele.controltype === 1) {
-            this.handleRampPhasePosData(`${i}-${index}`, ele, dir, this.PhaseDataModel.getSidePhasePos)
-          }
-        })
-      })
-      // 去掉重复方向的数据
-      this.LanePhaseData = Array.from(new Set(this.LanePhaseData.map(item => item.id)))
-        .map(id => this.LanePhaseData.find(item => item.id === id))
-    },
-    handleRampPhasePosData (key, phase, dir) {
-      let posInfo = phase.controltype === 0 ? this.PhaseDataModel.getMainPhasePos(dir) : this.PhaseDataModel.getSidePhasePos(dir)
-      this.LanePhaseData.push({
-        key,
-        controlType: phase.controltype,
-        phaseid: phase.id, // 相位id，用于对应相位状态
-        id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
-        name: posInfo.name,
-        left: posInfo.x,
-        top: posInfo.y
-      })
-    },
-    getPedPhasePos () {
-      // 行人相位信息
-      this.sidewalkPhaseData = []
-      this.crossInfo.phaseList.forEach((ele, i) => {
-        if (ele.peddirection) {
-          ele.peddirection.forEach((dir, index) => {
-          // 行人相位
-            if (this.PhaseDataModel.getSidePos(dir)) {
-              let key = this.CrossDiagramMgr.getUniqueKey('pedphase')
-              if (this.isVipRoute && this.isThirdSignal) {
-                key = this.CrossDiagramMgr.getUniqueKey('pedphase') + `-${this.agentId}`
-              }
-              this.sidewalkPhaseData.push({
-                key,
-                phaseid: ele.id, // 相位id，用于对应相位状态
-                id: dir,
-                name: this.PhaseDataModel.getSidePos(dir).name,
-                left: this.PhaseDataModel.getSidePos(dir).x,
-                top: this.PhaseDataModel.getSidePos(dir).y
-              })
-            }
-          })
-        }
-      })
-      // 去掉重复方向的数据
-      this.sidewalkPhaseData = Array.from(new Set(this.sidewalkPhaseData.map(item => item.id)))
-        .map(id => this.sidewalkPhaseData.find(item => item.id === id))
-    },
-    getOverlapPedPhasePos () {
-      // 行人跟随相位信息
-      if (!this.crossInfo.overlaplList) return
-      this.overlapsidewalkPhaseData = []
-      this.crossInfo.overlaplList.forEach((ele, i) => {
-        if (ele.peddirection) {
-          ele.peddirection.forEach((dir, index) => {
-            if (this.PhaseDataModel.getSidePos(dir)) {
-              this.overlapsidewalkPhaseData.push({
-                key: this.CrossDiagramMgr.getUniqueKey('overlappedphase'),
-                phaseid: ele.id, // 相位id，用于对应相位状态
-                id: dir,
-                name: this.PhaseDataModel.getSidePos(dir).name,
-                left: this.PhaseDataModel.getSidePos(dir).x,
-                top: this.PhaseDataModel.getSidePos(dir).y
-              })
-            }
-          })
-        }
-      })
-      // 去掉重复方向的数据
-      this.overlapsidewalkPhaseData = Array.from(new Set(this.overlapsidewalkPhaseData.map(item => item.id)))
-        .map(id => this.overlapsidewalkPhaseData.find(item => item.id === id))
-    },
-    getCrossType () {
-      // 路口类型对应底图决策
-      if (this.mainType === '101') {
-        // 十字路口
-        this.crossType = 'Crossroads'
-      }
-      if (this.mainType === '100') {
-        // T型路口
-        switch (this.mainDirection) {
-          case '001': this.crossType = 'TypeT-east'
-            break
-          case '002': this.crossType = 'TypeT-south'
-            break
-          case '003': this.crossType = 'TypeT-west'
-            break
-          case '004': this.crossType = 'TypeT-north'
-            break
-        }
-      }
-      if (this.mainType === '103') {
-        // 匝道
-        switch (this.mainDirection) {
-          case '001': this.crossType = 'ramp-east'
-            break
-          case '002': this.crossType = 'ramp-south'
-            break
-          case '003': this.crossType = 'ramp-west'
-            break
-          case '004': this.crossType = 'ramp-north'
-            break
-        }
-      }
-      if (this.mainType === '104') {
-        // 路段行人过街
-        switch (this.mainDirection) {
-          case '006': this.crossType = 'ped-section-east-west'
-            break
-          case '005': this.crossType = 'ped-section-south-north'
-            break
-        }
-      }
-      if (this.mainType === '999') {
-        // 其他路口
-        this.crossType = 'Customroads'
-      }
-    },
-    refresh () {
-      this.getIntersectionInfo()
-    },
-    getpedStatus () {
-      // 行人相位状态
-      let curPedStatus = []
-      for (let i = 0; i < this.sidewalkPhaseData.length; i++) {
-        if (this.sidewalkPhaseData[i].phaseid) {
-          let curPhaseStatus = this.phaseStatusMap.get(this.sidewalkPhaseData[i].phaseid)
-          if (!curPhaseStatus) continue
-          const data = {
-            ...this.sidewalkPhaseData[i],
-            pedtype: curPhaseStatus.pedtype,
-            color: this.SidewalkColorMap.get(curPhaseStatus.pedtype),
-            flag: 'ped' // 行人相位数据标识
-          }
-          curPedStatus.push(data)
-        } else {
-          // 无状态的行人道
-          const data = {
-            ...this.sidewalkPhaseData[i],
-            pedtype: undefined
-          }
-          curPedStatus.push(data)
-        }
-      }
-      this.sidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
-    },
-    getOverlapPedStatus () {
-      // 行人跟随相位状态
-      let curPedStatus = []
-      for (let i = 0; i < this.overlapsidewalkPhaseData.length; i++) {
-        if (this.overlapsidewalkPhaseData[i].phaseid) {
-          let curPhaseStatus = this.overlapPhaseStatusMap.get(this.overlapsidewalkPhaseData[i].phaseid)
-          if (!curPhaseStatus) {
-            // 无状态的行人道,也显示出来
-            const data = {
-              ...this.overlapsidewalkPhaseData[i],
-              pedtype: undefined
-            }
-            curPedStatus.push(data)
-            continue
-          }
-          const data = {
-            ...this.overlapsidewalkPhaseData[i],
-            pedtype: curPhaseStatus.pedtype,
-            color: this.SidewalkColorMap.get(curPhaseStatus.pedtype),
-            flag: 'overlapped' // 行人跟随相位数据标识
-          }
-          curPedStatus.push(data)
-        } else {
-          // 无状态的行人道
-          const data = {
-            ...this.overlapsidewalkPhaseData[i],
-            pedtype: undefined
-          }
-          curPedStatus.push(data)
-        }
-      }
-      this.overlapsidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
-    },
-    getRoadDirection () {
-      // 获取行车方向（从平台或配置工具的配置文件中读取）
-      this.roadDir = this.roadDirection
-    },
-    getChannelInfo () {
-      uploadSingleTscParam('channel', this.agentId).then(data => {
-        let res = data.data
-        if (!res.success) {
-          if (res.code === '4003') {
-            this.$message.error(this.$t('openatccomponents.errorTip.devicenotonline'))
-            return
-          }
-          this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
-          return
-        }
-        let channelList = res.data.data.channelList.filter(ele => ele.type !== undefined)
-        this.channelList = this.handleRepeatRealdir(channelList)
-        console.log('this.channelList', this.channelList)
-        this.handleChannelDirection()
-      })
-    },
-    handleRepeatRealdir (channelList) {
-      // 按realdir去掉重复方向的数据
-      let dirChannelList = channelList.filter(ele => ele.type === 0 || ele.type === 1 || ele.type === 3)
-      let pedDirChannelList = channelList.filter(ele => ele.type === 2)
-      let map = new Map()
-      let map2 = new Map()
-      dirChannelList.forEach(ele => {
-        ele.realdir.forEach(dir => {
-          if (map.get(dir) === undefined) {
-            map.set(dir, ele)
-          }
-        })
-      })
-      pedDirChannelList.forEach(ele => {
-        ele.realdir.forEach(dir => {
-          if (map2.get(dir) === undefined) {
-            map2.set(dir, ele)
-          }
-        })
-      })
-      let arr = Array.from(map)
-      let pedarr = Array.from(map2)
-      let newarr = []
-      arr.forEach(ele => {
-        newarr.push(ele[1])
-      })
-      pedarr.forEach(ele => {
-        newarr.push(ele[1])
-      })
-      // console.log(newarr)
-      return newarr
-    },
-    handleChannelDirection () {
-      this.LanePhaseData = []
-      this.sidewalkPhaseData = []
-      this.sidewalkDir = []
-      let realphasedirarr = []
-      let realpeddirarr = []
-      this.channelList.forEach((ele, i) => {
-        if (ele.type === 0 || ele.type === 1 || ele.type === 3) {
-          if (ele.realdir) {
-            ele.realdir.forEach((dir, index) => {
-            // 车道相位（通道类型是机动车，非机动车，公交时，对应相位机动车）
-              this.LanePhaseData.push({
-                key: this.CrossDiagramMgr.getUniqueKey('phase'),
-                channelid: ele.id, // 通道id
-                id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
-                name: this.PhaseDataModel.getPhase(dir).name,
-                left: this.PhaseDataModel.getPhase(dir).x,
-                top: this.PhaseDataModel.getPhase(dir).y
-              })
-            })
-            realphasedirarr = Array.from(new Set(realphasedirarr.concat(ele.realdir)))
-          }
-        }
-        if (ele.type === 2) {
-          if (ele.realdir) {
-            ele.realdir.forEach((dir, index) => {
-              // 行人相位
-              if (this.sidewalkDir.indexOf(dir) === -1 && this.PhaseDataModel.getSidePos(dir)) {
-                let obj = {
-                  key: this.CrossDiagramMgr.getUniqueKey('pedphase') + `-${this.agentId}`,
-                  channelid: ele.id, // 通道id
-                  id: dir,
-                  name: this.PhaseDataModel.getSidePos(dir).name
-                }
-                if (this.channelType) {
-                  obj.left = this.PhaseDataModel.getSidePos(dir).x
-                  obj.top = this.PhaseDataModel.getSidePos(dir).y
-                }
-                this.sidewalkPhaseData.push(obj)
-              }
-            })
-            realpeddirarr = Array.from(new Set(realpeddirarr.concat(ele.realdir)))
-            this.sidewalkDir = Array.from(new Set([...this.sidewalkDir.concat(ele.realdir)]))
-          }
-        }
-      })
-      this.inneChoosedDirection = this.choosedDirection.filter(dir => realphasedirarr.indexOf(dir) !== -1)
-      this.inneChoosedPedDirection = this.choosedPedDirection.filter(dir => realpeddirarr.indexOf(dir) !== -1)
-      this.drawPhaseIcon()
-    },
-    async drawPhaseIcon () {
-      const targetIds = [4, 8, 12, 16] // 掉头相位后画
-      this.LanePhaseData = this.LanePhaseData.filter(item => !targetIds.includes(item.id)).concat(this.LanePhaseData.filter(item => targetIds.includes(item.id)))
-      if (!this.isThirdSignal && this.isVipRoute) {
-        await this.getConflictList()
-        this.handleClickedPhase()
-        this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
-        this.handleClickedPedPhase()
-        this.compSidewalkPhaseData = JSON.parse(JSON.stringify(this.sidewalkPhaseData))
-      } else {
-        // 第三方信号机不需要处理冲突关系
-        this.handleClickedPhase()
-        this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
-        this.handleClickedPedPhase()
-        this.compSidewalkPhaseData = JSON.parse(JSON.stringify(this.sidewalkPhaseData))
-      }
-    },
-    handleClickedPhase () {
-      if (!this.isThirdSignal) {
-        this.inneChoosedDirection = this.inneChoosedDirection.filter(dir => this.phaseConflictList.indexOf(dir) === -1)
-      }
-      for (let index = 0; index < this.LanePhaseData.length; index++) {
-        const element = this.LanePhaseData[index]
-        if (this.inneChoosedDirection.indexOf(element.id) !== -1) {
-          element.clicked = true
-        }
-      }
-    },
-
-    handleClickPhaseIcon (key, action) {
-      let curClickedPhase = {}
-      if (action === 'clicked') {
-        for (let index = 0; index < this.LanePhaseData.length; index++) {
-          const element = this.LanePhaseData[index]
-          if (element.key === key) {
-            element.clicked = true
-            curClickedPhase = JSON.parse(JSON.stringify(element))
-          }
-        }
-      }
-      if (action === 'cancle') {
-        for (let index = 0; index < this.LanePhaseData.length; index++) {
-          const element = this.LanePhaseData[index]
-          if (element.key === key) {
-            delete element.clicked
-          }
-        }
-      }
-      this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
-      let clickedDirection = this.compLanePhaseData.filter(ele => ele.clicked && !ele.disabled)
-      this.inneChoosedDirection = clickedDirection.map(ele => ele.id)
-      this.EmitAllChoosedDirection(curClickedPhase)
-    },
-    handleClickedPedPhase () {
-      if (!this.isThirdSignal) {
-        this.inneChoosedPedDirection = this.inneChoosedPedDirection.filter(dir => this.pedConflictList.indexOf(dir) === -1)
-      }
-      // 排他
-      for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
-        const element = this.sidewalkPhaseData[index]
-        delete element.clicked
-      }
-      for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
-        const element = this.sidewalkPhaseData[index]
-        if (this.inneChoosedPedDirection.indexOf(element.id) !== -1) {
-          element.clicked = true
-        }
-      }
-    },
-    handleClickSidewalkIcon (data, curChoosePed) {
-      this.clickedPedDirection = data.filter(ele => ele.clicked && !ele.disabled)
-      this.inneChoosedPedDirection = this.clickedPedDirection.map(ele => ele.id)
-      this.EmitAllChoosedDirection(curChoosePed)
-    },
-    EmitAllChoosedDirection (curClickedPhase) {
-      let allChoosedDir = {
-        direction: this.inneChoosedDirection,
-        peddirection: this.inneChoosedPedDirection
-      }
-      this.$emit('handleClickCrossIcon', allChoosedDir, curClickedPhase)
-      this.drawPhaseIcon()
-    },
-    async getConflictList () {
-      let ConflictList = new CrossDirectionConflictList(this.agentId)
-      return ConflictList.getConflictListByAgentid().then(res => {
-        if (res) {
-          let conflictList = ConflictList.getListDirConflict(this.inneChoosedDirection, this.inneChoosedPedDirection)
-          this.phaseConflictList = conflictList.allConflictDir
-          this.pedConflictList = conflictList.allPedConflictDir
-          // 排他
-          for (let index = 0; index < this.LanePhaseData.length; index++) {
-            const element = this.LanePhaseData[index]
-            delete element.disabled
-          }
-          for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
-            const element = this.sidewalkPhaseData[index]
-            delete element.disabled
-          }
-          for (let index = 0; index < this.LanePhaseData.length; index++) {
-            const element = this.LanePhaseData[index]
-            if (this.phaseConflictList.indexOf(element.id) !== -1) {
-              element.disabled = true
-            }
-          }
-          for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
-            const element = this.sidewalkPhaseData[index]
-            if (this.pedConflictList.indexOf(element.id) !== -1) {
-              element.disabled = true
-            }
-          }
-          // console.log(this.LanePhaseData)
-        }
-      })
-    },
-    createChannelStatusMap () {
-      // 生成相位id和相位状态对应数据结构
-      this.channelStatusList.map(channel => {
-        let channelId = channel.id
-        let channelInfo = {
-          light: channel.light
-        }
-        this.channelStatusMap.set(channelId, channelInfo)
-      })
-    },
-    getChannelPhaseStatus () {
-      // 通道相位机动车状态
-      this.comdirePhaseData = []
-      let curLanePhaseData = []
-      for (let i = 0; i < this.LanePhaseData.length; i++) {
-        let curPhaseStatus = this.channelStatusMap.get(this.LanePhaseData[i].channelid)
-        if (!curPhaseStatus) continue
-        const data = {
-          ...this.LanePhaseData[i],
-          type: curPhaseStatus.light,
-          color: this.ColorMap.get(curPhaseStatus.light),
-          flag: 'phasechannel' // 车道相位数据标识
-        }
-        curLanePhaseData.push(data)
-      }
-      this.LanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
-      this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
-    },
-    getChannelPedStatus () {
-      // 通道行人相位状态
-      let curPedStatus = []
-      for (let i = 0; i < this.sidewalkPhaseData.length; i++) {
-        console.log(this.sidewalkPhaseData[i])
-        if (this.sidewalkPhaseData[i].channelid) {
-          let curPhaseStatus = this.channelStatusMap.get(this.sidewalkPhaseData[i].channelid)
-          if (!curPhaseStatus) continue
-          const data = {
-            ...this.sidewalkPhaseData[i],
-            pedtype: curPhaseStatus.light,
-            color: this.ColorMap.get(curPhaseStatus.light),
-            flag: 'pedchannel' // 行人相位数据标识
-          }
-          curPedStatus.push(data)
-        } else {
-          // 无状态的行人道
-          const data = {
-            ...this.sidewalkPhaseData[i],
-            pedtype: undefined
-          }
-          curPedStatus.push(data)
-        }
-      }
-      this.compSidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
-    }
-  },
-  mounted () {
-    this.init()
-  }
-}
-</script>
-<style scoped>
-.invisible {
-  visibility: hidden;
-}
-.crossImg{
-    position: relative;
-    width: 870px;
-    height: 650px;
-    left: 50%;
-    transform: translateX(-50%);
-}
-.centerText {
-  position: absolute;
-  width: 140px;
-  height: 140px;
-  left: 50%;
-  top: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  /* text-align: center; */
-  z-index: 9;
-  display: flex;
-  align-items: center;
-  /* padding-left: 16px; */
-}
-.phaseCountdown {
-  line-height: 42PX;
-  font-size: 18px;
-  font-weight: normal;
-  font-stretch: normal;
-  letter-spacing: 0px;
-  color: #fff;
-  width: 150px;
-  margin: 0 auto;
-}
-.countdownBg {
-  border-radius: 10PX;
-  background-color: rgba(94, 90, 90, 0.8);
-  padding-left: 14PX;
-  padding-top: 10PX;
-  padding-bottom: 10PX;
-}
-.centerText .text {
-  display: inline-block;
-  color: #299BCC;
-  margin-top: 20PX;
-}
-
-.baseImg {
-    width: 100%;
-    height: 650px;
-    position: relative;
-}
-</style>
+/**
+ * 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>
+  <div class="crossImg">
+    <div v-show="isShowState">
+      <div class="stateText">
+        <div style="border:0px solid red;float:right;">
+          {{stateName }}
+        </div>
+      </div>
+    </div>
+    <div v-show="isShowMode">
+      <div class="controlText">
+        <div style="border:0px solid red;float:right;">
+          {{controlName }}
+        </div>
+      </div>
+      <div class="modeText">
+        {{modeName }}
+      </div>
+    </div>
+    <!-- 右行道路 B-->
+    <div class="right-dir-road" v-if="roadDir === 'right'">
+      <div class="centerText" v-if="crossType !== 'Customroads' && isHasPhase">
+      <!-- 相位倒计时 -->
+      <div class="phaseCountdown" v-show="isShowInterval" v-if="isLoaded && isHasPhase && isHasCountdown" :class="{'countdownBg': isLoaded}">
+        <div v-for="curPhase in phaseCountdownList" :key="curPhase.id" :style="{color: curPhase.phaseCountdownColor}">
+          <div v-if="curPhase.phaseCountdown !== undefined && curPhase.phaseCountdown !== -1" style="overflow: hidden;margin-bottom: 4px;">
+            <span style="float: left;width: 42px;height: 42px;position: relative;border: 1px solid rgba(255, 255, 255, 0.1);margin-right: 5px;">
+              <xdr-dir-selector :Data="xdrData" :Datas="xdrpedData" Width="55px" Height="55px" Widths="55px" Heights="55px" :showlist="curPhase.showlist" :roadDirection="roadDirection"></xdr-dir-selector>
+            </span>
+            <span style="float: left;color: #fff;margin-right: 8px;width: 30px;">P{{curPhase.id}}:</span>
+            <span style="float: left;font-size: 25px;">{{curPhase.phaseCountdown}}</span>
+          </div>
+        </div>
+      </div>
+      <!-- 手动刷新 -->
+      <div v-if="!isLoaded">
+        <RefreshSvg @click.native="refresh"/>
+        <span class="text">{{$t('openatccomponents.overview.getintersectionmapagain')}}</span>
+      </div>
+    </div>
+      <!-- 路口底图 -->
+      <div class="baseImg">
+        <!-- 城市道路 -->
+        <CrossRoadsSvg v-if="crossType === 'Crossroads'"/>
+        <TShapeEastRoadsSvg v-if="crossType === 'TypeT-east'"/>
+        <TShapeWestRoadsSvg v-if="crossType === 'TypeT-west'"/>
+        <TShapeNorthRoadsSvg v-if="crossType === 'TypeT-north'"/>
+        <TShapeSouthRoadsSvg v-if="crossType === 'TypeT-south'"/>
+        <!-- 其他路口 -->
+        <CustomRoadsSvg v-if="crossType === 'Customroads'"/>
+        <!-- 匝道 -->
+        <RampEastRoadsSvg v-if="crossType === 'ramp-east' && !isVipRoute" />
+        <RampWestRoadsSvg v-if="crossType === 'ramp-west' && !isVipRoute" />
+        <RampNorthRoadsSvg v-if="crossType === 'ramp-north' && !isVipRoute" />
+        <RampSouthRoadsSvg v-if="crossType === 'ramp-south' && !isVipRoute" />
+        <!-- 路段行人过街 -->
+        <PedSectionSNSvg v-if="crossType === 'ped-section-south-north'" />
+        <PedSectionEWSvg v-if="crossType === 'ped-section-east-west'" />
+      </div>
+      <!-- 城市道路状态-->
+      <div v-if="mainType === '100' || mainType === '101' || mainType === '104'">
+        <!-- 人行道 -->
+        <div class="sidewalk" id="sidewalk" v-if="resetflag && isLoaded">
+          <SidewalkClickSvg v-if="isVipRoute && compSidewalkPhaseData.length" :Data="compSidewalkPhaseData" :clickMode="clickMode" @handleClickSidewalkIcon="handleClickSidewalkIcon" />
+          <SidewalkSvg v-else v-for="(side, index) in compSidewalkPhaseData" :key="side.key + '-' + index" :Data="side" :crossType="crossType" />
+        </div>
+        <!-- 车道相位 -->
+        <div v-if="resetflag" class="phaseIcon">
+          <PhaseIconSvg v-for="(item, index) in compLanePhaseData" :key="item.key + '-' + index" :Data="item" :isVipRoute="isVipRoute" :clickMode="clickMode" @handleClickPhaseIcon="handleClickPhaseIcon" />
+        </div>
+         <!-- 公交相位 -->
+        <div v-if="resetflag && !isVipRoute" class="busIcon">
+          <BusMapSvg v-for="(item, index) in comdireBusPhaseData" :key="'Busmap-' + item.key + '-' + index" :Data="item" />
+          <PhaseIconSvg v-for="(item, index) in comdireBusPhaseData" :key="item.key + '-' + index" :Data="item"/>
+        </div>
+      </div>
+      <!-- 匝道状态 -->
+        <!-- 车道相位 -->
+      <div v-if="resetflag && mainType === '103' && !isVipRoute">
+        <RampPhaseIconSvg v-for="(item, index) in LanePhaseData" :key="item.key + '-' + index" :Data="item" />
+      </div>
+    </div>
+    <!-- 右行道路 E-->
+
+    <!-- 左行道路 B-->
+    <div class="left-dir-road" v-if="roadDir === 'left'">
+      <div class="centerText" v-if="mainType === '100' || mainType === '101'" :class="{'countdownBg': isLoaded}">
+        <!-- 相位倒计时 -->
+        <div class="phaseCountdown" v-show="isShowInterval" v-if="isLoaded && isHasPhase && isHasCountdown" :class="{'countdownBg': isLoaded}">
+          <div v-for="curPhase in phaseCountdownList" :key="curPhase.id" :style="{color: curPhase.phaseCountdownColor}">
+            <div v-if="curPhase.phaseCountdown !== undefined && curPhase.phaseCountdown !== -1" style="overflow: hidden;margin-bottom: 4px;">
+              <span style="float: left;width: 42px;height: 42px;position: relative;border: 1px solid rgba(255, 255, 255, 0.1);margin-right: 5px;">
+                <xdr-dir-selector :Data="xdrData" :Datas="xdrpedData" Width="55px" Height="55px" Widths="55px" Heights="55px" :showlist="curPhase.showlist" :roadDirection="roadDirection"></xdr-dir-selector>
+              </span>
+              <span style="float: left;color: #fff;margin-right: 8px;width: 30px;">P{{curPhase.id}}:</span>
+              <span style="float: left;font-size: 25px;">{{curPhase.phaseCountdown}}</span>
+            </div>
+          </div>
+        </div>
+        <!-- 手动刷新 -->
+        <div v-if="!isLoaded">
+          <RefreshSvg @click.native="refresh"/>
+          <span class="text">{{$t('openatccomponents.overview.getintersectionmapagain')}}</span>
+        </div>
+      </div>
+      <!-- 路口底图 -->
+      <div class="baseImg">
+        <!-- 城市道路 -->
+        <LCrossRoadsSvg v-if="crossType === 'Crossroads'"/>
+        <LTShapeEastRoadsSvg v-if="crossType === 'TypeT-east'"/>
+        <LTShapeWestRoadsSvg v-if="crossType === 'TypeT-west'"/>
+        <LTShapeNorthRoadsSvg v-if="crossType === 'TypeT-north'"/>
+        <LTShapeSouthRoadsSvg v-if="crossType === 'TypeT-south'"/>
+        <!-- 其他路口 -->
+        <CustomRoadsSvg v-if="mainType !== '100' && mainType !== '101'"/>
+      </div>
+      <!-- 城市道路状态-->
+      <div v-if="mainType === '100' || mainType === '101'">
+        <!-- 人行道 -->
+        <div class="sidewalk" v-if="resetflag && isLoaded">
+          <SidewalkClickSvg v-if="isVipRoute && compSidewalkPhaseData.length" :Data="compSidewalkPhaseData" :clickMode="clickMode" @handleClickSidewalkIcon="handleClickSidewalkIcon" />
+          <SidewalkSvg v-else v-for="side in compSidewalkPhaseData" :key="side.key" :Data="side" :crossType="crossType" />
+        </div>
+        <!-- 车道相位 -->
+        <div v-if="resetflag" class="phaseIcon">
+          <LPhaseIconSvg v-for="item in compLanePhaseData" :key="item.key" :Data="item" :isVipRoute="isVipRoute" :clickMode="clickMode" @handleClickPhaseIcon="handleClickPhaseIcon"/>
+        </div>
+         <!-- 公交相位 -->
+        <div v-if="resetflag" class="busIcon">
+          <BusMapSvg v-for="(item, index) in comdireBusPhaseData" :key="'Busmap-' + item.key + '-' + index" :Data="item" />
+          <LPhaseIconSvg v-for="(item, index) in comdireBusPhaseData" :key="item.key + '-' + index" :Data="item"/>
+        </div>
+      </div>
+    </div>
+    <!-- 左行道路 E-->
+  </div>
+</template>
+<script>
+import PhaseIconSvg from './phaseIcon/phaseIconSvg'
+import PhaseDataModel from './utils.js'
+import { getIntersectionInfo } from '../../../../api/template.js'
+import { uploadSingleTscParam } from '../../../../api/param.js'
+import CrossRoadsSvg from './baseImg/CrossRoadsSvg'
+import TShapeEastRoadsSvg from './baseImg/TShapeEastRoadsSvg'
+import TShapeWestRoadsSvg from './baseImg/TShapeWestRoadsSvg.vue'
+import TShapeNorthRoadsSvg from './baseImg/TShapeNorthRoadsSvg.vue'
+import TShapeSouthRoadsSvg from './baseImg/TShapeSouthRoadsSvg.vue'
+import CustomRoadsSvg from './baseImg/CustomRoadsSvg.vue'
+import RefreshSvg from './baseImg/refreshSvg'
+import SidewalkSvg from './baseImg/SidewalkSvg'
+import SidewalkClickSvg from './baseImg/SidewalkClickSvg'
+import RampEastRoadsSvg from './baseImg/RampEastSvg'
+import RampWestRoadsSvg from './baseImg/RampWestSvg'
+import RampNorthRoadsSvg from './baseImg/RampNorthSvg'
+import RampSouthRoadsSvg from './baseImg/RampSouthSvg'
+import RampPhaseIconSvg from './phaseIcon/rampPhaseIconSvg'
+import PedSectionEWSvg from './baseImg/PedSectionEWSvg'
+import PedSectionSNSvg from './baseImg/PedSectionSNSvg'
+// import { mapState } from 'vuex'
+import LCrossRoadsSvg from './baseImg/leftroad/LCrossRoadsSvg'
+import LTShapeEastRoadsSvg from './baseImg/leftroad/LTShapeEastRoadsSvg'
+import LTShapeWestRoadsSvg from './baseImg/leftroad/LTShapeWestRoadsSvg.vue'
+import LTShapeNorthRoadsSvg from './baseImg/leftroad/LTShapeNorthRoadsSvg.vue'
+import LTShapeSouthRoadsSvg from './baseImg/leftroad/LTShapeSouthRoadsSvg.vue'
+import LPhaseIconSvg from './phaseIcon/LphaseIconSvg'
+import CrossDiagramMgr from '../../../../EdgeMgr/controller/crossDiagramMgr.js'
+import BusMapSvg from './busIcon/busMapSvg'
+import { getMessageByCode } from '../../../../utils/responseMessage.js'
+
+import CrossDirectionConflictList from '../../../../utils/conflictList.js'
+
+export default {
+  name: 'crossDiagram',
+  components: {
+    PhaseIconSvg,
+    CrossRoadsSvg,
+    TShapeEastRoadsSvg,
+    TShapeWestRoadsSvg,
+    TShapeNorthRoadsSvg,
+    TShapeSouthRoadsSvg,
+    CustomRoadsSvg,
+    RefreshSvg,
+    SidewalkSvg,
+    RampEastRoadsSvg,
+    RampWestRoadsSvg,
+    RampNorthRoadsSvg,
+    RampSouthRoadsSvg,
+    RampPhaseIconSvg,
+    PedSectionEWSvg,
+    PedSectionSNSvg,
+    LCrossRoadsSvg,
+    LTShapeEastRoadsSvg,
+    LTShapeWestRoadsSvg,
+    LTShapeNorthRoadsSvg,
+    LTShapeSouthRoadsSvg,
+    LPhaseIconSvg,
+    BusMapSvg,
+    SidewalkClickSvg
+  },
+  props: {
+    crossStatusData: {
+      type: Object
+    },
+    agentId: {
+      type: String
+    },
+    // devStatus: {
+    //   type: Number
+    // },
+    isShowInterval: {
+      type: Boolean,
+      devault: true
+    },
+    roadDirection: {
+      type: String
+    },
+    isShowState: {
+      type: Boolean,
+      devault: false
+    },
+    isShowMode: {
+      type: Boolean,
+      devault: false
+    },
+    modeName: {
+      type: String,
+      default: ''
+    },
+    controlName: {
+      type: String,
+      default: ''
+    },
+    stateName: {
+      type: String,
+      default: ''
+    },
+    choosedDirection: {
+      type: Array,
+      default: () => []
+    },
+    choosedPedDirection: {
+      type: Array,
+      default: () => []
+    },
+    isVipRoute: { // 区分普通路口和VIP路口，如果是vip路口（特勤路线和分组管控），才需要获取通道和处理通道冲突，并显示已选方向
+      type: Boolean,
+      default: false
+    },
+    clickMode: {
+      type: Boolean,
+      default: false
+    },
+    isThirdSignal: {
+      type: Boolean,
+      default: false
+    },
+    channelType: {
+      type: Boolean,
+      default: false
+    }
+  },
+  // computed: {
+  //   ...mapState({
+  //     roadDirection: state => state.globalParam.roadDirection
+  //   })
+  // },
+  watch: {
+    tempType: {
+      handler: function (val) {
+        this.getCrossType()
+      }
+    },
+    crossStatusData: {
+      handler: function (val, oldVal) {
+        // 路口状态数据
+        this.statusData = JSON.parse(JSON.stringify(val))
+        // 默认显示相位数据（包括黄闪、全红、关灯状态下，或者匝道，均不做比对跟随相位的处理）
+        this.drawDefaultPhaseIcon()
+
+        if (this.channelType) {
+          // 通道路口图状态数据
+          this.channelStatusList = val.channellamp
+          this.createChannelStatusMap()
+          this.getChannelPhaseStatus()
+          this.getChannelPedStatus()
+          return
+        }
+
+        // 模版路口图状态数据
+        this.phaseStatusList = val.phase
+        this.overlapStatusList = val.overlap
+        if (val.control === 1 || val.control === 2 || val.control === 3) {
+          // 黄闪、全红、关灯属于特殊控制，优先级最高，直接改变灯色，不用判断phase里的type，也不需要考虑跟随相位的灯色优先级
+          if (val.control === 1) {
+            this.getYellowFlashColor()
+          } else {
+            this.SpecialControl(val)
+          }
+          this.isHasPhase = false
+          return
+        }
+        if (!val.phase && !this.overlapStatusList) {
+          // 非特殊控制，相位和跟随相位不存在的情况下，灯色恢复默认
+          this.handleSpecialControlStatus('默认')
+          this.isHasPhase = false
+          return
+        }
+        if (val.control === 16) {
+          // 方向锁定时，相位状态显示与通道无关，显示接口返回的红灯会有歧义，此处特殊处理显示默认白色
+          this.handleSpecialControlStatus('方向锁定')
+          this.isHasPhase = false
+          return
+        }
+        this.curPhase = val.current_phase
+        this.isHasPhase = true
+        this.createPhaseStatusMap()
+        // 正常情况下，获取车道相位、车道跟随相位、相位倒计时、行人相位、行人跟随相位 的状态
+        this.getPhaseStatus()
+        this.getOverlapPhaseStatus()
+        this.getCurPhaseCountdown()
+        this.getBusPhaseStatus()
+        if (this.mainType === '100' || this.mainType === '101' || this.mainType === '104') {
+          // 城市道路和路段行人过街才显示人行道状态
+          this.getpedStatus()
+          this.getOverlapPedStatus()
+          // 算法对比行人相位与行人跟随相位的状态
+          this.comparePedStatus()
+          // 算法对比车道相位与车道跟随相位的状态
+          this.comparePhaseStatus()
+        }
+        // console.log('this.phaseStatusMap 相位状态映射', this.phaseStatusMap)
+        // console.log('LanePhaseData 车道相位', this.LanePhaseData)
+        // console.log('sidewalkPhaseData 行人相位', this.sidewalkPhaseData)
+        // console.log('overlapPhaseStatusMap 跟随相位状态映射', this.overlapPhaseStatusMap)
+        // console.log('overlapLanePhaseData 车道跟随相位', this.overlapLanePhaseData)
+        // console.log('this.overlapsidewalkPhaseData 行人跟随相位', this.overlapsidewalkPhaseData)
+      },
+      // 深度观察监听
+      deep: true
+    },
+    devStatus: {
+      handler: function (val) {
+        if (val === 3) return
+        this.handleDefaultStatus()
+      }
+    },
+    roadDirection: {
+      handler: function (val1, val2) {
+        if (val1 !== val2) {
+          this.init()
+        }
+      }
+    },
+    agentId: {
+      handler: function (val1, val2) {
+        if (val1 !== val2) {
+          this.init()
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      roadDir: 'right', // 道路行车方向，默认右行
+      phaseCountdownList: [], // 相位倒计时列表
+      statusData: null, // 信号机状态
+      LanePhaseData: [], // 车道相位数据
+      overlapLanePhaseData: [], // 车道跟随相位数据
+      curPhase: [], // 当前相位列表
+      phaseStatusList: [], // 相位状态列表
+      phaseStatusMap: new Map(), // 相位状态映射
+      overlapPhaseStatusMap: new Map(), // 跟随相位状态映射
+      ColorMap: new Map([[0, '#828282'], [1, '#ff2828'], [2, '#f7b500'], [3, '#77fb65'], [4, '#77fb65'], [5, '#f7b500']]), // 当前相位状态 --- 0：关灯, 1：红, 2：黄,  3：绿, 4：绿闪, 5：黄闪
+      SidewalkColorMap: new Map([[0, '#828282'], [1, '#e24b4b'], [3, '#7bd66b']]),
+      tempType: '', // 模版类型
+      mainType: '101', // 路口形状
+      mainDirection: '000', // 路口方向
+      crossType: '', // 路口底图类型
+      isLoaded: false, // 是否成功加载底图
+      isHasPhase: true, // 是否有相位状态数据
+      phaseControlColorMap: new Map([['全红', '#ff2828'], ['关灯', '#828282'], ['默认', '#fff'], ['方向锁定', '#fff']]),
+      sidewalkPhaseData: [], // 行人相位
+      overlapsidewalkPhaseData: [], // 行人跟随相位
+      resetflag: true, // 离线后，控制行人相位、车道相位reset标识
+      compLanePhaseData: [], // 对比车道相位和车道跟随相位后，显示的数据
+      compSidewalkPhaseData: [], // // 对比行人相位和车道跟随相位后，显示的数据
+      comdirePhaseData: [], // 对比相同方向车道相位数据后，被删减的唯一direction的数组
+      comdireOverlapPhaseData: [], // 对比相同方向车道跟随相位数据后，被删减的唯一direction的数组
+      busPhaseData: [], // 公交相位数据
+      comdireBusPhaseData: [], //  对比相同方向公交车道数据后，被删减的唯一direction的数组
+      channelStatusMap: new Map(), // 通道实时状态映射
+      channelStatusList: [], // 通道实时状态列表
+      phaseDirMap: new Map(),
+      xdrData: {
+        left: '5px',
+        top: '4px'
+      },
+      xdrpedData: {
+        left: '1px',
+        top: '1px'
+      },
+      isHasCountdown: false
+    }
+  },
+  methods: {
+    init () {
+      this.CrossDiagramMgr = new CrossDiagramMgr()
+      this.getRoadDirection()
+      this.PhaseDataModel = new PhaseDataModel(this.roadDirection)
+      this.getIntersectionInfo() // 获取路口信息
+    },
+    drawDefaultPhaseIcon () {
+      this.compLanePhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compare(this.LanePhaseData, this.overlapLanePhaseData, 'type', 'nostatus')))
+      this.compSidewalkPhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compare(this.sidewalkPhaseData, this.overlapsidewalkPhaseData, 'pedtype', 'nostatus')))
+      this.comdireBusPhaseData = JSON.parse(JSON.stringify(this.busPhaseData))
+      console.log(this.LanePhaseData)
+      console.log(this.overlapLanePhaseData)
+      console.log('###################', this.compLanePhaseData)
+    },
+    comparePhaseStatus () {
+      // 对比车道： 跟随相位和相位的状态数据（此处判断是为了保证被比较的数据direction都是唯一的）
+      if (!this.comdirePhaseData && !this.comdireOverlapPhaseData) {
+        this.compLanePhaseData = this.CrossDiagramMgr.compare(this.LanePhaseData, this.overlapLanePhaseData, 'type')
+      } else if (!this.comdireOverlapPhaseData) {
+        this.compLanePhaseData = this.CrossDiagramMgr.compare(this.comdirePhaseData, this.overlapLanePhaseData, 'type')
+      } else if (!this.comdirePhaseData) {
+        this.compLanePhaseData = this.CrossDiagramMgr.compare(this.LanePhaseData, this.comdireOverlapPhaseData, 'type')
+      } else {
+        this.compLanePhaseData = this.CrossDiagramMgr.compare(this.comdirePhaseData, this.comdireOverlapPhaseData, 'type')
+      }
+    },
+    comparePedStatus () {
+      // 对比人行道： 跟随相位和相位的状态数据
+      this.compSidewalkPhaseData = this.CrossDiagramMgr.compare(this.sidewalkPhaseData, this.overlapsidewalkPhaseData, 'pedtype')
+    },
+    resetPhaseStatus () {
+      // 车道相位、行人相位恢复默认状态
+      this.resetflag = false
+      this.$nextTick(() => {
+        this.resetflag = true
+      })
+    },
+    SpecialControl (data) {
+      switch (data.control) {
+        case 2: this.handleSpecialControlStatus('全红')
+          break
+        case 3: this.handleSpecialControlStatus('关灯')
+          break
+        default: this.handleSpecialControlStatus('默认')
+      }
+    },
+    handleDefaultStatus () {
+      // 恢复默认状态
+      if (this.compLanePhaseData.length) {
+        this.phaseCountdown = ''
+        this.phaseCountdownColor = '#fff'
+        this.compLanePhaseData.forEach(data => {
+          data.color = '#fff'
+        })
+      }
+      if (this.compSidewalkPhaseData.length) {
+        this.compSidewalkPhaseData.forEach(data => {
+          data.color = '#fff'
+        })
+      }
+      if (this.comdireBusPhaseData.length) {
+        this.comdireBusPhaseData.forEach(data => {
+          data.color = '#fff'
+        })
+      }
+      this.phaseCountdownList = []
+      this.resetPhaseStatus()
+    },
+    handleSpecialControlStatus (Control) {
+      this.resetPhaseStatus()
+      // 控制黄闪、全红、关灯、默认情况下的车道相位颜色和倒计时颜色
+      if (Control === '默认') {
+        // 倒计时恢复默认颜色
+        this.phaseCountdownList.forEach(item => {
+          item.phaseCountdown = ''
+          item.id = ''
+          item.phaseCountdownColor = '#fff'
+        })
+      }
+      if (this.compLanePhaseData.length) {
+        const compLanePhaseData = this.compLanePhaseData.map(data => ({
+          ...data,
+          color: this.phaseControlColorMap.get(Control)
+        }))
+        this.compLanePhaseData = JSON.parse(JSON.stringify(compLanePhaseData))
+      }
+      if (this.compSidewalkPhaseData.length) {
+        const compSidewalkPhaseData = this.compSidewalkPhaseData.map(data => ({
+          ...data,
+          color: this.phaseControlColorMap.get(Control)
+        }))
+        this.compSidewalkPhaseData = JSON.parse(JSON.stringify(compSidewalkPhaseData))
+      }
+      if (this.comdireBusPhaseData.length) {
+        const comdireBusPhaseData = this.comdireBusPhaseData.map(data => ({
+          ...data,
+          color: this.phaseControlColorMap.get(Control)
+        }))
+        this.comdireBusPhaseData = JSON.parse(JSON.stringify(comdireBusPhaseData))
+      }
+      if (this.mainType === '103') {
+        if (this.LanePhaseData.length) {
+          const LanePhaseData = this.LanePhaseData.map(data => ({
+            ...data,
+            color: this.phaseControlColorMap.get(Control)
+          }))
+          this.LanePhaseData = JSON.parse(JSON.stringify(LanePhaseData))
+        }
+      }
+    },
+    createPhaseStatusMap () {
+      // 生成相位id和相位状态对应数据结构
+      this.phaseStatusList.map(phase => {
+        let phaseId = phase.id
+        let phaseInfo = {
+          type: phase.type,
+          phaseCountdown: phase.countdown,
+          pedtype: phase.pedtype
+        }
+        this.phaseStatusMap.set(phaseId, phaseInfo)
+      })
+    },
+    getYellowFlashColor () {
+      // 车道相位（左行右行）
+      let curLanePhaseData = []
+      for (let i = 0; i < this.compLanePhaseData.length; i++) {
+        const data = {
+          ...this.compLanePhaseData[i],
+          type: '黄闪',
+          control: 1
+        }
+        curLanePhaseData.push(data)
+      }
+      this.compLanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
+
+      // 行人相位
+      let curPedStatus = []
+      for (let i = 0; i < this.compSidewalkPhaseData.length; i++) {
+        const data = {
+          ...this.compSidewalkPhaseData[i],
+          pedtype: '黄闪',
+          control: 1
+        }
+        curPedStatus.push(data)
+      }
+      this.compSidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
+
+      // 公交相位
+      let curBusLanePhaseData = []
+      for (let i = 0; i < this.comdireBusPhaseData.length; i++) {
+        const data = {
+          ...this.comdireBusPhaseData[i],
+          type: '黄闪',
+          control: 1
+        }
+        curBusLanePhaseData.push(data)
+      }
+      this.comdireBusPhaseData = JSON.parse(JSON.stringify(curBusLanePhaseData))
+
+      if (this.mainType === '103') {
+        // 匝道相位
+        if (this.LanePhaseData.length) {
+          const LanePhaseData = this.LanePhaseData.map(data => ({
+            ...data,
+            type: '黄闪',
+            control: 1
+          }))
+          this.LanePhaseData = JSON.parse(JSON.stringify(LanePhaseData))
+        }
+      }
+    },
+    getPhaseStatus () {
+      // 得到车道相位状态（颜色）
+      this.comdirePhaseData = []
+      let curLanePhaseData = []
+      for (let i = 0; i < this.LanePhaseData.length; i++) {
+        let curPhaseStatus = this.phaseStatusMap.get(this.LanePhaseData[i].phaseid)
+        if (!curPhaseStatus) continue
+        const data = {
+          ...this.LanePhaseData[i],
+          type: curPhaseStatus.type,
+          color: this.ColorMap.get(curPhaseStatus.type),
+          phaseCountdown: curPhaseStatus.phaseCountdown,
+          flag: 'phase' // 车道相位数据标识
+        }
+        curLanePhaseData.push(data)
+      }
+      this.LanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
+      // 处理相位数据中，方向direction重复的情况：相同direction下，按照状态的优先级显示该方向的灯色：绿灯(3) > 绿闪(4) > 黄灯(2) > 红灯(1)
+      // 如果有相同direction，处理后会改变原数组长度，导致第二次无法正确比较状态，因此需要中间变量存储
+      this.comdirePhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compareRepeatDirection(this.LanePhaseData, 'type', 'phase')))
+    },
+    getOverlapPhaseStatus () {
+      // 得到车道跟随相位状态（颜色）
+      this.comdireOverlapPhaseData = []
+      if (this.overlapStatusList) {
+        this.overlapStatusList.map(phase => {
+          let phaseId = phase.id
+          let phaseInfo = {
+            type: phase.type,
+            phaseCountdown: phase.countdown,
+            pedtype: phase.pedtype
+          }
+          this.overlapPhaseStatusMap.set(phaseId, phaseInfo)
+        })
+      }
+      let curLanePhaseData = []
+      for (let i = 0; i < this.overlapLanePhaseData.length; i++) {
+        let curPhaseStatus = this.overlapPhaseStatusMap.get(this.overlapLanePhaseData[i].phaseid)
+        if (!curPhaseStatus) continue
+        const data = {
+          ...this.overlapLanePhaseData[i],
+          type: curPhaseStatus.type,
+          color: this.ColorMap.get(curPhaseStatus.type),
+          phaseCountdown: curPhaseStatus.phaseCountdown,
+          flag: 'overlapphase' // 车道跟随相位数据标识
+        }
+        curLanePhaseData.push(data)
+      }
+      this.overlapLanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
+      // 处理跟随相位数据中，方向direction重复的情况：相同direction下，按照状态的优先级显示该方向的灯色：绿灯(3) > 绿闪(4) > 黄灯(2) > 红灯(1)
+      // 如果有相同direction，处理后会改变原数组长度，导致第二次无法正确比较状态，因此需要中间变量存储
+      this.comdireOverlapPhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compareRepeatDirection(this.overlapLanePhaseData, 'type', 'overlapphase')))
+    },
+    getBusPhaseStatus () {
+      // 得到公交车道相位状态（颜色）
+      this.comdireBusPhaseData = []
+      let curLanePhaseData = []
+      for (let i = 0; i < this.busPhaseData.length; i++) {
+        let curPhaseStatus = this.phaseStatusMap.get(this.busPhaseData[i].phaseid)
+        if (!curPhaseStatus) continue
+        const data = {
+          ...this.busPhaseData[i],
+          type: curPhaseStatus.type,
+          color: this.ColorMap.get(curPhaseStatus.type),
+          phaseCountdown: curPhaseStatus.phaseCountdown,
+          flag: 'busphase' // 车道相位数据标识
+        }
+        curLanePhaseData.push(data)
+      }
+      this.busPhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
+      // 处理相位数据中，方向direction重复的情况：相同direction下，按照状态的优先级显示该方向的灯色：绿灯(3) > 绿闪(4) > 黄灯(2) > 红灯(1)
+      // 如果有相同direction，处理后会改变原数组长度，导致第二次无法正确比较状态，因此需要中间变量存储
+      this.comdireBusPhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compareRepeatDirection(this.busPhaseData, 'type', 'busphase')))
+    },
+    getCurPhaseCountdown () {
+      // 获取当前相位倒计时颜色
+      this.phaseCountdownList = []
+      this.isHasCountdown = false
+      this.curPhase.forEach(curP => {
+        this.phaseStatusList.forEach(phaseInfo => {
+          if (phaseInfo.id === curP) {
+            let countdownObj = {}
+            countdownObj.id = phaseInfo.id
+            countdownObj.phaseCountdown = phaseInfo.countdown
+            countdownObj.phaseCountdownColor = this.ColorMap.get(phaseInfo.type)
+            let curphasedir = this.phaseDirMap.get(phaseInfo.id)
+            if (curphasedir !== undefined) {
+              countdownObj.showlist = curphasedir.direction.map(dir => {
+                return {
+                  id: dir,
+                  peddirection: this.getshowped(curphasedir.peddirection),
+                  color: '#fff'
+                }
+              })
+            } else {
+              countdownObj.showlist = []
+            }
+
+            this.phaseCountdownList.push(countdownObj)
+            if (phaseInfo.countdown !== undefined && phaseInfo.countdown !== -1) {
+              this.isHasCountdown = true
+            }
+          }
+        })
+      })
+    },
+    getshowped (peddirection) {
+      let peddirarr = peddirection.map(peddir => ({
+        id: peddir,
+        name: this.PhaseDataModel.getSidePos(peddir).name,
+        color: 'rgba(255, 255, 255, 0.4)'
+      }))
+      return peddirarr
+    },
+    getIntersectionInfo () {
+      // 获取路口信息
+      const agentid = this.agentId || '0'
+      getIntersectionInfo(agentid).then(res => {
+        if (!res.data.success) {
+          this.isLoaded = false
+          let commomMsg = this.$t('openatccomponents.overview.signalID') + ' : ' + agentid
+          let msg = getMessageByCode(res.data.code, this.$i18n.locale)
+          if (res.data.data) {
+            // 子类型错误
+            let childErrorCode = res.data.data.errorCode
+            if (childErrorCode) {
+              let childerror = getMessageByCode(res.data.data.errorCode, this.$i18n.locale)
+              msg = msg + ' - ' + childerror
+            }
+          }
+          msg = msg + ' - ' + commomMsg
+          this.$message.error(msg)
+          return
+        }
+        this.isLoaded = true
+        this.tempType = res.data.data.type
+        // 获取车道相位、行人相位信息（坐标、名称）
+        this.mainType = this.tempType.split('-')[0]
+        this.mainDirection = this.tempType.split('-')[1]
+        if (this.isVipRoute && !this.isThirdSignal) {
+          // 特勤、分组管控下，非第三方设备，按通道显示相位方向；第三方设备还是按路口相位配置显示相位方向
+          this.getChannelInfo()
+          return
+        }
+        if (this.channelType) {
+          this.getChannelInfo()
+          return
+        }
+        this.crossInfo = res.data.data.param
+        this.crossInfo.phaseList.forEach(cross => this.phaseDirMap.set(cross.id, {direction: cross.direction, peddirection: cross.peddirection}))
+        if (this.mainType === '100' || this.mainType === '101' || this.mainType === '104') {
+          // 城市道路加载车道相位坐标和人行道坐标
+          this.getPhasePos()
+          this.getOverlapPhasePos()
+          this.getPedPhasePos()
+          this.getOverlapPedPhasePos()
+          if (!this.isVipRoute) {
+            this.getBusPos()
+          }
+        }
+        if (!this.isVipRoute && this.mainType === '103') {
+          // 获取匝道道路的主路和支路的相位坐标
+          this.getRampPhasePos()
+        }
+        if (!this.isVipRoute) {
+          this.drawDefaultPhaseIcon()
+        }
+        if (this.isVipRoute && this.isThirdSignal) {
+          this.LanePhaseData = this.CrossDiagramMgr.compare(this.LanePhaseData, this.overlapLanePhaseData, 'type', 'nostatus')
+          // console.log(this.LanePhaseData)
+          this.sidewalkPhaseData = this.CrossDiagramMgr.compare(this.sidewalkPhaseData, this.overlapsidewalkPhaseData, 'pedtype', 'nostatus')
+          let allDir = this.LanePhaseData.map(ele => ele.id)
+          let allPedDir = this.sidewalkPhaseData.map(ele => ele.id)
+          this.inneChoosedDirection = this.choosedDirection.filter(dir => allDir.indexOf(dir) !== -1)
+          this.inneChoosedPedDirection = this.choosedPedDirection.filter(dir => allPedDir.indexOf(dir) !== -1)
+          this.drawPhaseIcon()
+        }
+      })
+    },
+    getBusPos () {
+      // 公交相位信息
+      this.busPhaseData = []
+      this.crossInfo.phaseList.forEach((ele, i) => {
+        if (ele.controltype >= 3 && ele.controltype <= 6) {
+          ele.direction.forEach((dir, index) => {
+          // 车道相位
+            this.busPhaseData.push({
+              key: this.CrossDiagramMgr.getUniqueKey('busphase'),
+              phaseid: ele.id, // 相位id，用于对应相位状态
+              id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
+              name: this.PhaseDataModel.getBusPhasePos(dir).name,
+              left: this.PhaseDataModel.getBusPhasePos(dir).x,
+              top: this.PhaseDataModel.getBusPhasePos(dir).y,
+              busleft: this.PhaseDataModel.getBusMapPos(dir).x,
+              bustop: this.PhaseDataModel.getBusMapPos(dir).y,
+              controltype: ele.controltype
+            })
+          })
+        }
+      })
+      // 去掉重复方向的数据
+      this.busPhaseData = Array.from(new Set(this.busPhaseData.map(item => item.id)))
+        .map(id => this.busPhaseData.find(item => item.id === id))
+    },
+    createRandomType () {
+      for (var i = 3; i <= 5; i++) {
+        return Math.floor(Math.random() * (5 - 3)) + 3
+      }
+    },
+    getPhasePos () {
+      // 车道相位信息
+      this.LanePhaseData = []
+      this.crossInfo.phaseList.forEach((ele, i) => {
+        if (ele.controltype === undefined || ele.controltype <= 2) {
+          ele.direction.forEach((dir, index) => {
+          // 车道相位
+            this.LanePhaseData.push({
+              key: this.CrossDiagramMgr.getUniqueKey('phase'),
+              phaseid: ele.id, // 相位id，用于对应相位状态
+              id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
+              name: this.PhaseDataModel.getPhase(dir).name,
+              left: this.PhaseDataModel.getPhase(dir).x,
+              top: this.PhaseDataModel.getPhase(dir).y
+            })
+          })
+        }
+      })
+      // 去掉重复方向的数据
+      this.LanePhaseData = Array.from(new Set(this.LanePhaseData.map(item => item.id)))
+        .map(id => this.LanePhaseData.find(item => item.id === id))
+    },
+    getOverlapPhasePos () {
+      // 车道跟随相位信息
+      if (!this.crossInfo.overlaplList) return
+      this.overlapLanePhaseData = []
+      this.crossInfo.overlaplList.forEach((ele, i) => {
+        if (ele.direction) {
+          ele.direction.forEach((dir, index) => {
+            this.overlapLanePhaseData.push({
+              key: this.CrossDiagramMgr.getUniqueKey('overlapphase'),
+              phaseid: ele.id, // 相位id，用于对应相位状态
+              id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
+              name: this.PhaseDataModel.getPhase(dir).name,
+              left: this.PhaseDataModel.getPhase(dir).x,
+              top: this.PhaseDataModel.getPhase(dir).y
+            })
+          })
+        }
+      })
+      // 去掉重复方向的数据
+      this.overlapLanePhaseData = Array.from(new Set(this.overlapLanePhaseData.map(item => item.id)))
+        .map(id => this.overlapLanePhaseData.find(item => item.id === id))
+    },
+    getRampPhasePos () {
+      // 匝道车道相位信息
+      this.LanePhaseData = []
+      this.crossInfo.phaseList.forEach((ele, i) => {
+        ele.direction.forEach((dir, index) => {
+          if (ele.controltype === 0) {
+            this.handleRampPhasePosData(`${i}-${index}`, ele, dir, this.PhaseDataModel.getMainPhasePos)
+          }
+          if (ele.controltype === 1) {
+            this.handleRampPhasePosData(`${i}-${index}`, ele, dir, this.PhaseDataModel.getSidePhasePos)
+          }
+        })
+      })
+      // 去掉重复方向的数据
+      this.LanePhaseData = Array.from(new Set(this.LanePhaseData.map(item => item.id)))
+        .map(id => this.LanePhaseData.find(item => item.id === id))
+    },
+    handleRampPhasePosData (key, phase, dir) {
+      let posInfo = phase.controltype === 0 ? this.PhaseDataModel.getMainPhasePos(dir) : this.PhaseDataModel.getSidePhasePos(dir)
+      this.LanePhaseData.push({
+        key,
+        controlType: phase.controltype,
+        phaseid: phase.id, // 相位id，用于对应相位状态
+        id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
+        name: posInfo.name,
+        left: posInfo.x,
+        top: posInfo.y
+      })
+    },
+    getPedPhasePos () {
+      // 行人相位信息
+      this.sidewalkPhaseData = []
+      this.crossInfo.phaseList.forEach((ele, i) => {
+        if (ele.peddirection) {
+          ele.peddirection.forEach((dir, index) => {
+          // 行人相位
+            if (this.PhaseDataModel.getSidePos(dir)) {
+              let key = this.CrossDiagramMgr.getUniqueKey('pedphase')
+              if (this.isVipRoute && this.isThirdSignal) {
+                key = this.CrossDiagramMgr.getUniqueKey('pedphase') + `-${this.agentId}`
+              }
+              this.sidewalkPhaseData.push({
+                key,
+                phaseid: ele.id, // 相位id，用于对应相位状态
+                id: dir,
+                name: this.PhaseDataModel.getSidePos(dir).name,
+                left: this.PhaseDataModel.getSidePos(dir).x,
+                top: this.PhaseDataModel.getSidePos(dir).y
+              })
+            }
+          })
+        }
+      })
+      // 去掉重复方向的数据
+      this.sidewalkPhaseData = Array.from(new Set(this.sidewalkPhaseData.map(item => item.id)))
+        .map(id => this.sidewalkPhaseData.find(item => item.id === id))
+    },
+    getOverlapPedPhasePos () {
+      // 行人跟随相位信息
+      if (!this.crossInfo.overlaplList) return
+      this.overlapsidewalkPhaseData = []
+      this.crossInfo.overlaplList.forEach((ele, i) => {
+        if (ele.peddirection) {
+          ele.peddirection.forEach((dir, index) => {
+            if (this.PhaseDataModel.getSidePos(dir)) {
+              this.overlapsidewalkPhaseData.push({
+                key: this.CrossDiagramMgr.getUniqueKey('overlappedphase'),
+                phaseid: ele.id, // 相位id，用于对应相位状态
+                id: dir,
+                name: this.PhaseDataModel.getSidePos(dir).name,
+                left: this.PhaseDataModel.getSidePos(dir).x,
+                top: this.PhaseDataModel.getSidePos(dir).y
+              })
+            }
+          })
+        }
+      })
+      // 去掉重复方向的数据
+      this.overlapsidewalkPhaseData = Array.from(new Set(this.overlapsidewalkPhaseData.map(item => item.id)))
+        .map(id => this.overlapsidewalkPhaseData.find(item => item.id === id))
+    },
+    getCrossType () {
+      // 路口类型对应底图决策
+      if (this.mainType === '101') {
+        // 十字路口
+        this.crossType = 'Crossroads'
+      }
+      if (this.mainType === '100') {
+        // T型路口
+        switch (this.mainDirection) {
+          case '001': this.crossType = 'TypeT-east'
+            break
+          case '002': this.crossType = 'TypeT-south'
+            break
+          case '003': this.crossType = 'TypeT-west'
+            break
+          case '004': this.crossType = 'TypeT-north'
+            break
+        }
+      }
+      if (this.mainType === '103') {
+        // 匝道
+        switch (this.mainDirection) {
+          case '001': this.crossType = 'ramp-east'
+            break
+          case '002': this.crossType = 'ramp-south'
+            break
+          case '003': this.crossType = 'ramp-west'
+            break
+          case '004': this.crossType = 'ramp-north'
+            break
+        }
+      }
+      if (this.mainType === '104') {
+        // 路段行人过街
+        switch (this.mainDirection) {
+          case '006': this.crossType = 'ped-section-east-west'
+            break
+          case '005': this.crossType = 'ped-section-south-north'
+            break
+        }
+      }
+      if (this.mainType === '999') {
+        // 其他路口
+        this.crossType = 'Customroads'
+      }
+    },
+    refresh () {
+      this.getIntersectionInfo()
+    },
+    getpedStatus () {
+      // 行人相位状态
+      let curPedStatus = []
+      for (let i = 0; i < this.sidewalkPhaseData.length; i++) {
+        if (this.sidewalkPhaseData[i].phaseid) {
+          let curPhaseStatus = this.phaseStatusMap.get(this.sidewalkPhaseData[i].phaseid)
+          if (!curPhaseStatus) continue
+          const data = {
+            ...this.sidewalkPhaseData[i],
+            pedtype: curPhaseStatus.pedtype,
+            color: this.SidewalkColorMap.get(curPhaseStatus.pedtype),
+            flag: 'ped' // 行人相位数据标识
+          }
+          curPedStatus.push(data)
+        } else {
+          // 无状态的行人道
+          const data = {
+            ...this.sidewalkPhaseData[i],
+            pedtype: undefined
+          }
+          curPedStatus.push(data)
+        }
+      }
+      this.sidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
+    },
+    getOverlapPedStatus () {
+      // 行人跟随相位状态
+      let curPedStatus = []
+      for (let i = 0; i < this.overlapsidewalkPhaseData.length; i++) {
+        if (this.overlapsidewalkPhaseData[i].phaseid) {
+          let curPhaseStatus = this.overlapPhaseStatusMap.get(this.overlapsidewalkPhaseData[i].phaseid)
+          if (!curPhaseStatus) {
+            // 无状态的行人道,也显示出来
+            const data = {
+              ...this.overlapsidewalkPhaseData[i],
+              pedtype: undefined
+            }
+            curPedStatus.push(data)
+            continue
+          }
+          const data = {
+            ...this.overlapsidewalkPhaseData[i],
+            pedtype: curPhaseStatus.pedtype,
+            color: this.SidewalkColorMap.get(curPhaseStatus.pedtype),
+            flag: 'overlapped' // 行人跟随相位数据标识
+          }
+          curPedStatus.push(data)
+        } else {
+          // 无状态的行人道
+          const data = {
+            ...this.overlapsidewalkPhaseData[i],
+            pedtype: undefined
+          }
+          curPedStatus.push(data)
+        }
+      }
+      this.overlapsidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
+    },
+    getRoadDirection () {
+      // 获取行车方向（从平台或配置工具的配置文件中读取）
+      this.roadDir = this.roadDirection
+    },
+    getChannelInfo () {
+      uploadSingleTscParam('channel', this.agentId).then(data => {
+        let res = data.data
+        if (!res.success) {
+          if (res.code === '4003') {
+            this.$message.error(this.$t('openatccomponents.errorTip.devicenotonline'))
+            return
+          }
+          this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
+          return
+        }
+        let channelList = res.data.data.channelList.filter(ele => ele.type !== undefined)
+        this.channelList = this.handleRepeatRealdir(channelList)
+        console.log('this.channelList', this.channelList)
+        this.handleChannelDirection()
+      })
+    },
+    handleRepeatRealdir (channelList) {
+      // 按realdir去掉重复方向的数据
+      let dirChannelList = channelList.filter(ele => ele.type === 0 || ele.type === 1 || ele.type === 3)
+      let pedDirChannelList = channelList.filter(ele => ele.type === 2)
+      let map = new Map()
+      let map2 = new Map()
+      dirChannelList.forEach(ele => {
+        ele.realdir.forEach(dir => {
+          if (map.get(dir) === undefined) {
+            map.set(dir, ele)
+          }
+        })
+      })
+      pedDirChannelList.forEach(ele => {
+        ele.realdir.forEach(dir => {
+          if (map2.get(dir) === undefined) {
+            map2.set(dir, ele)
+          }
+        })
+      })
+      let arr = Array.from(map)
+      let pedarr = Array.from(map2)
+      let newarr = []
+      arr.forEach(ele => {
+        newarr.push(ele[1])
+      })
+      pedarr.forEach(ele => {
+        newarr.push(ele[1])
+      })
+      // console.log(newarr)
+      return newarr
+    },
+    handleChannelDirection () {
+      this.LanePhaseData = []
+      this.sidewalkPhaseData = []
+      this.sidewalkDir = []
+      let realphasedirarr = []
+      let realpeddirarr = []
+      this.channelList.forEach((ele, i) => {
+        if (ele.type === 0 || ele.type === 1 || ele.type === 3) {
+          if (ele.realdir) {
+            ele.realdir.forEach((dir, index) => {
+            // 车道相位（通道类型是机动车，非机动车，公交时，对应相位机动车）
+              this.LanePhaseData.push({
+                key: this.CrossDiagramMgr.getUniqueKey('phase'),
+                channelid: ele.id, // 通道id
+                id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
+                name: this.PhaseDataModel.getPhase(dir).name,
+                left: this.PhaseDataModel.getPhase(dir).x,
+                top: this.PhaseDataModel.getPhase(dir).y
+              })
+            })
+            realphasedirarr = Array.from(new Set(realphasedirarr.concat(ele.realdir)))
+          }
+        }
+        if (ele.type === 2) {
+          if (ele.realdir) {
+            ele.realdir.forEach((dir, index) => {
+              // 行人相位
+              if (this.sidewalkDir.indexOf(dir) === -1 && this.PhaseDataModel.getSidePos(dir)) {
+                let obj = {
+                  key: this.CrossDiagramMgr.getUniqueKey('pedphase') + `-${this.agentId}`,
+                  channelid: ele.id, // 通道id
+                  id: dir,
+                  name: this.PhaseDataModel.getSidePos(dir).name
+                }
+                if (this.channelType) {
+                  obj.left = this.PhaseDataModel.getSidePos(dir).x
+                  obj.top = this.PhaseDataModel.getSidePos(dir).y
+                }
+                this.sidewalkPhaseData.push(obj)
+              }
+            })
+            realpeddirarr = Array.from(new Set(realpeddirarr.concat(ele.realdir)))
+            this.sidewalkDir = Array.from(new Set([...this.sidewalkDir.concat(ele.realdir)]))
+          }
+        }
+      })
+      this.inneChoosedDirection = this.choosedDirection.filter(dir => realphasedirarr.indexOf(dir) !== -1)
+      this.inneChoosedPedDirection = this.choosedPedDirection.filter(dir => realpeddirarr.indexOf(dir) !== -1)
+      this.drawPhaseIcon()
+    },
+    async drawPhaseIcon () {
+      const targetIds = [4, 8, 12, 16] // 掉头相位后画
+      this.LanePhaseData = this.LanePhaseData.filter(item => !targetIds.includes(item.id)).concat(this.LanePhaseData.filter(item => targetIds.includes(item.id)))
+      if (!this.isThirdSignal && this.isVipRoute) {
+        await this.getConflictList()
+        this.handleClickedPhase()
+        this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
+        this.handleClickedPedPhase()
+        this.compSidewalkPhaseData = JSON.parse(JSON.stringify(this.sidewalkPhaseData))
+      } else {
+        // 第三方信号机不需要处理冲突关系
+        this.handleClickedPhase()
+        this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
+        this.handleClickedPedPhase()
+        this.compSidewalkPhaseData = JSON.parse(JSON.stringify(this.sidewalkPhaseData))
+      }
+    },
+    handleClickedPhase () {
+      if (!this.isThirdSignal) {
+        this.inneChoosedDirection = this.inneChoosedDirection.filter(dir => this.phaseConflictList.indexOf(dir) === -1)
+      }
+      for (let index = 0; index < this.LanePhaseData.length; index++) {
+        const element = this.LanePhaseData[index]
+        if (this.inneChoosedDirection.indexOf(element.id) !== -1) {
+          element.clicked = true
+        }
+      }
+    },
+
+    handleClickPhaseIcon (key, action) {
+      let curClickedPhase = {}
+      if (action === 'clicked') {
+        for (let index = 0; index < this.LanePhaseData.length; index++) {
+          const element = this.LanePhaseData[index]
+          if (element.key === key) {
+            element.clicked = true
+            curClickedPhase = JSON.parse(JSON.stringify(element))
+          }
+        }
+      }
+      if (action === 'cancle') {
+        for (let index = 0; index < this.LanePhaseData.length; index++) {
+          const element = this.LanePhaseData[index]
+          if (element.key === key) {
+            delete element.clicked
+          }
+        }
+      }
+      this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
+      let clickedDirection = this.compLanePhaseData.filter(ele => ele.clicked && !ele.disabled)
+      this.inneChoosedDirection = clickedDirection.map(ele => ele.id)
+      this.EmitAllChoosedDirection(curClickedPhase)
+    },
+    handleClickedPedPhase () {
+      if (!this.isThirdSignal) {
+        this.inneChoosedPedDirection = this.inneChoosedPedDirection.filter(dir => this.pedConflictList.indexOf(dir) === -1)
+      }
+      // 排他
+      for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
+        const element = this.sidewalkPhaseData[index]
+        delete element.clicked
+      }
+      for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
+        const element = this.sidewalkPhaseData[index]
+        if (this.inneChoosedPedDirection.indexOf(element.id) !== -1) {
+          element.clicked = true
+        }
+      }
+    },
+    handleClickSidewalkIcon (data, curChoosePed) {
+      this.clickedPedDirection = data.filter(ele => ele.clicked && !ele.disabled)
+      this.inneChoosedPedDirection = this.clickedPedDirection.map(ele => ele.id)
+      this.EmitAllChoosedDirection(curChoosePed)
+    },
+    EmitAllChoosedDirection (curClickedPhase) {
+      let allChoosedDir = {
+        direction: this.inneChoosedDirection,
+        peddirection: this.inneChoosedPedDirection
+      }
+      this.$emit('handleClickCrossIcon', allChoosedDir, curClickedPhase)
+      this.drawPhaseIcon()
+    },
+    async getConflictList () {
+      let ConflictList = new CrossDirectionConflictList(this.agentId)
+      return ConflictList.getConflictListByAgentid().then(res => {
+        if (res) {
+          let conflictList = ConflictList.getListDirConflict(this.inneChoosedDirection, this.inneChoosedPedDirection)
+          this.phaseConflictList = conflictList.allConflictDir
+          this.pedConflictList = conflictList.allPedConflictDir
+          // 排他
+          for (let index = 0; index < this.LanePhaseData.length; index++) {
+            const element = this.LanePhaseData[index]
+            delete element.disabled
+          }
+          for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
+            const element = this.sidewalkPhaseData[index]
+            delete element.disabled
+          }
+          for (let index = 0; index < this.LanePhaseData.length; index++) {
+            const element = this.LanePhaseData[index]
+            if (this.phaseConflictList.indexOf(element.id) !== -1) {
+              element.disabled = true
+            }
+          }
+          for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
+            const element = this.sidewalkPhaseData[index]
+            if (this.pedConflictList.indexOf(element.id) !== -1) {
+              element.disabled = true
+            }
+          }
+          // console.log(this.LanePhaseData)
+        }
+      })
+    },
+    createChannelStatusMap () {
+      // 生成相位id和相位状态对应数据结构
+      this.channelStatusList.map(channel => {
+        let channelId = channel.id
+        let channelInfo = {
+          light: channel.light
+        }
+        this.channelStatusMap.set(channelId, channelInfo)
+      })
+    },
+    getChannelPhaseStatus () {
+      // 通道相位机动车状态
+      this.comdirePhaseData = []
+      let curLanePhaseData = []
+      for (let i = 0; i < this.LanePhaseData.length; i++) {
+        let curPhaseStatus = this.channelStatusMap.get(this.LanePhaseData[i].channelid)
+        if (!curPhaseStatus) continue
+        const data = {
+          ...this.LanePhaseData[i],
+          type: curPhaseStatus.light,
+          color: this.ColorMap.get(curPhaseStatus.light),
+          flag: 'phasechannel' // 车道相位数据标识
+        }
+        curLanePhaseData.push(data)
+      }
+      this.LanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
+      this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
+    },
+    getChannelPedStatus () {
+      // 通道行人相位状态
+      let curPedStatus = []
+      for (let i = 0; i < this.sidewalkPhaseData.length; i++) {
+        console.log(this.sidewalkPhaseData[i])
+        if (this.sidewalkPhaseData[i].channelid) {
+          let curPhaseStatus = this.channelStatusMap.get(this.sidewalkPhaseData[i].channelid)
+          if (!curPhaseStatus) continue
+          const data = {
+            ...this.sidewalkPhaseData[i],
+            pedtype: curPhaseStatus.light,
+            color: this.ColorMap.get(curPhaseStatus.light),
+            flag: 'pedchannel' // 行人相位数据标识
+          }
+          curPedStatus.push(data)
+        } else {
+          // 无状态的行人道
+          const data = {
+            ...this.sidewalkPhaseData[i],
+            pedtype: undefined
+          }
+          curPedStatus.push(data)
+        }
+      }
+      this.compSidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
+    }
+  },
+  mounted () {
+    this.init()
+  }
+}
+</script>
+<style scoped>
+.invisible {
+  visibility: hidden;
+}
+.crossImg{
+    position: relative;
+    width: 870px;
+    height: 650px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.centerText {
+  position: absolute;
+  width: 140px;
+  height: 140px;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  /* text-align: center; */
+  z-index: 9;
+  display: flex;
+  align-items: center;
+  /* padding-left: 16px; */
+}
+.phaseCountdown {
+  line-height: 42PX;
+  font-size: 18px;
+  font-weight: normal;
+  font-stretch: normal;
+  letter-spacing: 0px;
+  color: #fff;
+  width: 150px;
+  margin: 0 auto;
+}
+.countdownBg {
+  border-radius: 10PX;
+  background-color: rgba(94, 90, 90, 0.8);
+  padding-left: 14PX;
+  padding-top: 10PX;
+  padding-bottom: 10PX;
+}
+.centerText .text {
+  display: inline-block;
+  color: #299BCC;
+  margin-top: 20PX;
+}
+
+.baseImg {
+    width: 100%;
+    height: 650px;
+    position: relative;
+}
+</style>