openatc-components 0.4.3 → 0.4.5

package/package.json

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

package/src/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'
         }
       })
     },

package/src/utils/RingDataModel.js

@@ -195,8 +195,10 @@ export default class RingDataModel {
       let currPhaseid = ''
       let stageControType = 0
       let peddirections = []
+      let phasetype
       for (let stg of stage) {
         let phaseMode = data.phase.filter(item => item.id === stg)
+        phasetype = phaseMode[0].type
         let currPhase = this.phaseList.filter((item) => {
           return item.id === stg
         })[0]
@@ -235,7 +237,8 @@ export default class RingDataModel {
           color: '#606266',
           controltype: stageControType,
           peddirection: peddirections,
-          sidewalkPhaseData: sidewalkPhaseData
+          sidewalkPhaseData: sidewalkPhaseData,
+          type: phasetype
         }
         return temp
       })
@@ -246,7 +249,8 @@ export default class RingDataModel {
             color: '#606266',
             controltype: stageControType,
             peddirection: peddirections,
-            sidewalkPhaseData: sidewalkPhaseData
+            sidewalkPhaseData: sidewalkPhaseData,
+            type: phasetype
           }
         ]
       }

package/src/views/intersection.vue

@@ -167,7 +167,7 @@ export default {
       // agentId: '12007_390',
       // agentId: '12014',
       reqUrl: 'http://192.168.13.103:10003/openatc',
-      Token: 'eyJraWQiOiIxNzMwODU1NTQ1NzA3IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTczMDg1OTE0NSwiaWF0IjoxNzMwODUxOTQ1fQ.CBl61S3eRifl4qEtTmgVjOZGo2hqNSGQKPxG1bN-utU',
+      Token: 'eyJraWQiOiIxNzM1ODY3ODI0OTY0IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTczNTg3MTQyNCwiaWF0IjoxNzM1ODY0MjI0fQ.vgMCKzQK4Gt9y7LYCqo77JM4qk-lWazKzAajVKs8ugE',
       // agentId: '30003-352',
       // reqUrl: 'https://kints-dev.devdolphin.com/openatc',
       // Token: 'eyJraWQiOiIxNjUwNTA5MDI2ODk2IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJ4aWFvbWluZyIsImV4cCI6MTczNjkwOTAyNiwiaWF0IjoxNjUwNTA5MDI2fQ.-s4T-uMRmB2zf9yer87USKQXLY1a12Zq5lCOnqjNmfA',

package/src/views/overView.vue

@@ -10,7 +10,7 @@
         :Token="Token"></overview> -->
     <el-button @click="handleChangeOverview">切换overview组件</el-button>
     <overview-component
-        :AgentId="agentId2"
+        :AgentId="agentid2"
         :isShowInterval="isShowInterval"
         :isShowMessage ="isShowMessage"/>
   </div>
@@ -26,7 +26,7 @@ export default {
       controlName: '步进',
       agentId: '13013',
       agentid1: 'gjnlahql',
-      agentid2: '12007_390',
+      agentid2: '12007_001',
       isShowMessage: false,
       isShowInterval: true,
       sum: 0,