openatc-components 0.2.82 → 0.2.83

package/package.json

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

package/src/i18n/language/en.js

@@ -114,6 +114,8 @@ const en = {
       'maxFlow': 'The average lane flow is too large. Is it further optimized?',
       'typecycle-opt': 'Cycle Opt',
       'signalIP': 'Signal IP',
+      'stagecountdown': 'Stage Countdown',
+      'stageduration': 'Stage Duration',
       'currentphase': 'Current phase',
       'directionnull': 'Please select the import direction',
       'faultinfo': 'Fault Information',

package/src/i18n/language/zh.js

@@ -114,6 +114,8 @@ const zh = {
       'protocoltype': '协议类型',
       'signalID': '路口ID',
       'signalIP': '信号机IP',
+      'stagecountdown': '阶段倒计时',
+      'stageduration': '阶段时长',
       'faultinfo': '故障信息',
       'platform': '平台类型',
       'online': '在线',

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

@@ -32,11 +32,14 @@
     <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" :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 !== -1">
-            <span style="float: left;font-size: 20px;color: #fff;width: 70px;">{{$t('openatccomponents.overview.phase')}}{{curPhase.id}}:</span>
-            <span style="float: left;">{{curPhase.phaseCountdown}}</span>
+          <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>
@@ -94,11 +97,14 @@
     <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-if="isLoaded && 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 !== -1">
-              <span style="float: left;font-size: 20px;color: #fff;width: 70px;">{{$t('openatccomponents.overview.phase')}}{{curPhase.id}}:</span>
-              <span style="float: left;">{{curPhase.phaseCountdown}}</span>
+            <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>
@@ -394,7 +400,16 @@ export default {
       busPhaseData: [], // 公交相位数据
       comdireBusPhaseData: [], //  对比相同方向公交车道数据后，被删减的唯一direction的数组
       channelStatusMap: new Map(), // 通道实时状态映射
-      channelStatusList: [] // 通道实时状态列表
+      channelStatusList: [], // 通道实时状态列表
+      phaseDirMap: new Map(),
+      xdrData: {
+        left: '5px',
+        top: '4px'
+      },
+      xdrpedData: {
+        left: '1px',
+        top: '1px'
+      }
     }
   },
   methods: {
@@ -646,6 +661,7 @@ export default {
     getCurPhaseCountdown () {
       // 获取当前相位倒计时颜色
       this.phaseCountdownList = []
+      this.isHasCountdown = false
       this.curPhase.forEach(curP => {
         this.phaseStatusList.forEach(phaseInfo => {
           if (phaseInfo.id === curP) {
@@ -653,11 +669,35 @@ export default {
             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'
@@ -693,6 +733,7 @@ export default {
           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()
@@ -1268,8 +1309,8 @@ export default {
   /* padding-left: 16px; */
 }
 .phaseCountdown {
-  line-height: 40px;
-  font-size: 30px;
+  line-height: 42PX;
+  font-size: 18px;
   font-weight: normal;
   font-stretch: normal;
   letter-spacing: 0px;
@@ -1278,14 +1319,16 @@ export default {
   margin: 0 auto;
 }
 .countdownBg {
-  border-radius: 10px;
+  border-radius: 10PX;
   background-color: rgba(94, 90, 90, 0.8);
-  padding-left: 16px;
+  padding-left: 14PX;
+  padding-top: 10PX;
+  padding-bottom: 10PX;
 }
 .centerText .text {
   display: inline-block;
   color: #299BCC;
-  margin-top: 20px;
+  margin-top: 20PX;
 }
 
 .baseImg {

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

@@ -1495,7 +1495,7 @@ export default {
 .direction {
   filter: brightness(70%);
 }
-.masks {
+.mask {
   background: rgb(242, 121, 121) !important;
 }
 .yellowClass {

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

@@ -49,6 +49,14 @@
       <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.platform')}}:</div>
       <div style="margin-left: 85px;" class="cross-value">{{platform}}</div>
     </div>
+    <div class="cross-content" v-if="controlData.current_stagecd !== undefined">
+      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.stagecountdown')}}:</div>
+      <div style="margin-left: 85px;" class="cross-value">{{controlData.current_stagecd}}</div>
+    </div>
+    <div class="cross-content" v-if="controlData.stages_len">
+      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.stageduration')}}:</div>
+      <div style="margin-left: 85px;" class="cross-value">{{controlData.stages_len + ''}}</div>
+    </div>
     <div class="cross-content">
       <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.faultinfo')}}:</div>
       <div style="margin-left: 85px;" v-if="curFaultList.length">