openatc-components 0.4.3 → 0.4.5

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

@@ -32,7 +32,7 @@
     <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 class="phaseCountdown" v-show="isShowInterval" v-if="isLoaded && isHasPhase && isHasCountdown && contrloType === 'ring'" :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;">
@@ -45,15 +45,13 @@
       </div>
       <!-- 阶段倒计时 -->
       <div class="phaseCountdown" v-show="isShowInterval" v-if="isLoaded && contrloType === 'stage'" :class="{'countdownBg': isLoaded}">
-        <div v-for="curStage in stageCountdownList" :key="curStage.id" :style="{color: curStage.phaseCountdownColor}">
-          <div style="overflow: hidden;margin-bottom: 4px;">
+          <div style="overflow: hidden;margin-bottom: 4px;" :style="{color: stageCountdownList[0].phaseCountdownColor}">
             <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="curStage.showlist" :roadDirection="roadDirection"></xdr-dir-selector>
+              <xdr-dir-selector :Data="xdrData" :Datas="xdrpedData" Width="55px" Height="55px" Widths="55px" Heights="55px" :showlist="dirListSetTheme(stageCountdownList)" :roadDirection="roadDirection"></xdr-dir-selector>
             </span>
             <span style="float: left;color: #fff;margin-right: 8px;width: 30px;">S{{crossStatusData.current_stage}}:</span>
             <span style="float: left;font-size: 25px;">{{crossStatusData.current_stagecd}}</span>
           </div>
-        </div>
       </div>
       <!-- 手动刷新 -->
       <div v-if="!isLoaded">
@@ -109,7 +107,7 @@
     <div class="left-dir-road" v-if="roadDir === 'left'">
       <div class="centerText" v-if="crossType !== 'Customroads' && isHasPhase">
         <!-- 相位倒计时 -->
-        <div class="phaseCountdown" v-show="isShowInterval" v-if="isLoaded && isHasPhase && isHasCountdown" :class="{'countdownBg': isLoaded}">
+        <div class="phaseCountdown" v-show="isShowInterval" v-if="isLoaded && isHasPhase && isHasCountdown && contrloType === 'ring'" :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;">
@@ -117,20 +115,18 @@
               </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>
         <!-- 阶段倒计时 -->
       <div class="phaseCountdown" v-show="isShowInterval" v-if="isLoaded && contrloType === 'stage'" :class="{'countdownBg': isLoaded}">
-        <div v-for="curStage in stageCountdownList" :key="curStage.id" :style="{color: curStage.phaseCountdownColor}">
-          <div style="overflow: hidden;margin-bottom: 4px;">
+          <div style="overflow: hidden;margin-bottom: 4px;" :style="{color: stageCountdownList[0].phaseCountdownColor}">
             <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="curStage.showlist" :roadDirection="roadDirection"></xdr-dir-selector>
+              <xdr-dir-selector :Data="xdrData" :Datas="xdrpedData" Width="55px" Height="55px" Widths="55px" Heights="55px" :showlist="dirListSetTheme(stageCountdownList)" :roadDirection="roadDirection"></xdr-dir-selector>
             </span>
             <span style="float: left;color: #fff;margin-right: 8px;width: 30px;">S{{crossStatusData.current_stage}}:</span>
             <span style="float: left;font-size: 25px;">{{crossStatusData.current_stagecd}}</span>
           </div>
-        </div>
       </div>
         <!-- 手动刷新 -->
         <div v-if="!isLoaded">
@@ -203,6 +199,8 @@ import BusMapSvg from './busIcon/busMapSvg'
 import { getMessageByCode } from '../../../../utils/responseMessage.js'
 
 import CrossDirectionConflictList from '../../../../utils/conflictList.js'
+import RingDataModel from '../../../../utils/RingDataModel.js'
+import { getTheme } from '../../../../utils/auth.js'
 
 export default {
   name: 'crossDiagram',
@@ -391,7 +389,8 @@ export default {
         left: '1px',
         top: '1px'
       },
-      isHasCountdown: false
+      isHasCountdown: false,
+      contrloType: 'ring'
     }
   },
   methods: {
@@ -526,11 +525,6 @@ export default {
           item.id = ''
           item.phaseCountdownColor = '#fff'
         })
-        this.stageCountdownList.forEach(item => {
-          item.phaseCountdown = ''
-          item.id = ''
-          item.phaseCountdownColor = '#fff'
-        })
       }
       if (this.compLanePhaseData.length) {
         const compLanePhaseData = this.compLanePhaseData.map(data => ({
@@ -730,30 +724,45 @@ export default {
         })
       })
     },
+    stagesList () {
+      let list = []
+      if (this.crossStatusData && this.crossStatusData.stages && this.crossInfo.phaseList && this.crossInfo.phaseList.length > 0) {
+        let ringDataModel = new RingDataModel(this.crossStatusData, this.crossInfo.phaseList)
+        list = ringDataModel.getStageData()
+        if (this.isShowCurrentStage) {
+          this.currentStage = this.crossStatusData.current_stage
+        }
+      }
+      return list
+    },
+    dirListSetTheme (list) {
+      let dirArr = []
+      let color = getTheme() === 'light' ? '#606266' : '#fff'
+      let pedColor = getTheme() === 'light' ? '#606266' : 'rgba(255, 255, 255, 0.6)'
+      for (let rec of list) {
+        let recd = {
+          ...rec,
+          color: color
+        }
+        dirArr.push(recd)
+        for (let i = 0; i < rec.peddirection.length; i++) {
+          rec.peddirection[i].color = pedColor
+        }
+      }
+      return dirArr
+    },
     getCurStageCountdown () {
       // 获取当前相位倒计时颜色
       this.stageCountdownList = []
-      this.phaseStatusList.forEach(phaseInfo => {
-        if (phaseInfo.id === this.curStage) {
-          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.stageCountdownList.push(countdownObj)
+      let stagesList = this.stagesList()
+      this.stageCountdownList = stagesList[this.curStage - 1]
+      this.stageCountdownList = this.stageCountdownList.map(phaseInfo => {
+        return {
+          ...phaseInfo,
+          phaseCountdownColor: this.ColorMap.get(phaseInfo.type)
         }
       })
+      // console.log(this.stageCountdownList)
     },
     getshowped (peddirection) {
       let peddirarr = peddirection.map(peddir => ({
@@ -765,6 +774,7 @@ export default {
     },
     getIntersectionInfo () {
       // 获取路口信息
+      this.contrloType = 'ring'
       const agentid = this.agentId
       getIntersectionInfo(agentid).then(res => {
         if (!res.data.success) {
@@ -802,6 +812,10 @@ export default {
         this.allPatternList = res.data.data.param.patternList
         if (this.allPatternList[0].rings === undefined || this.allPatternList[0].rings.length === 0) {
           this.contrloType = 'stage'
+        } else if (this.allPatternList[0].contrloType === 'stage') {
+          this.contrloType = 'stage'
+        } else {
+          this.contrloType = 'ring'
         }
       })
     },