openatc-components 0.1.27 → 0.1.29

package/package.json

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

package/src/kisscomps/components/OverLap/OverLap.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="overLap" v-if="checked" :style="{'margin':this.controlData ? '20px 0 0 0' :tentative ? '0' : '0 40px 0 417px'}">
+<div class="overLap" v-if="checked" :style="{'margin':this.controlData ? '20px 0 0 0' :tentative ? '0' : '0 87px 0 468px'}">
     <div class="ring-first" v-for="(list, index1) in this.overlapDatas" :key="index1">
         <div v-for="(item,index2) in list.stageLists" :key="index2" >
           <!-- {{list.peddirection}} -->
@@ -13,7 +13,7 @@
                 </div>
                 <div style="cursor:pointer;">
                     <div class="ring-phase">
-                        <patternwalksvg :showWalk="list.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg>
+                        <!-- <patternwalksvg :showWalk="list.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg> -->
                         <xdrdirselector  Width="36px" Height="34px" :showlist="item.direction"></xdrdirselector>
                     </div>
                     <div class="box">
@@ -38,11 +38,11 @@
 import PhaseDataModel from '../IntersectionMap/crossDirection/utils.js'
 import CrossDiagramMgr from '../../../EdgeMgr/controller/crossDiagramMgr.js'
 import xdrdirselector from '../XRDDirSelector/XRDDirSelector'
-import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
+// import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
 export default {
   name: 'over-lap',
   components: {
-    patternwalksvg,
+    // patternwalksvg,
     xdrdirselector
   },
   data () {
@@ -98,13 +98,19 @@ export default {
   methods: {
     getRoad (i) {
       let direction = []
-      if (i) {
-        i.map(item => {
+      if (i.direction && i.direction.length > 0) {
+        i.direction.map(item => {
           direction.push({
             id: item,
+            peddirection: this.getPedPhasePos(i.peddirection),
             color: '#454545'
           })
         })
+      } else {
+        direction.push({
+          id: '',
+          peddirection: this.getPedPhasePos(i.peddirection)
+        })
       }
       return direction
     },
@@ -142,8 +148,8 @@ export default {
             const find = findIndexs.includes(sta.key)
             return {
               ...sta,
-              direction: this.getRoad(item.direction),
-              peddirection: this.getPedPhasePos(item.peddirection),
+              direction: this.getRoad(item),
+              // peddirection: this.getPedPhasePos(item.peddirection),
               greenWidth: find ? (sta.split / this.cycle * 100).toFixed(3) + '%' : '0%',
               redWidth: !find ? (sta.split / this.cycle * 100).toFixed(3) + '%' : '0%'
             }
@@ -188,6 +194,7 @@ export default {
     float: left;
     // margin-left: 5px;
     height: 34px;
+    width: 36px;
     z-index: 999;
     background: rgba(30, 96, 12, 0.07);
     // margin-top:1px;

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

@@ -20,7 +20,7 @@
                   <div slot="content">P{{item.id}}:{{item.split}}</div>
                   <div style="cursor:pointer;">
                     <div class="ring-phase">
-                      <patternwalksvg :showWalk="item.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg>
+                      <!-- <patternwalksvg :showWalk="item.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg> -->
                       <xdrdirselector  Width="36px" Height="34px" :showlist="item.direction"></xdrdirselector>
                     </div>
                     <div class="box">
@@ -43,8 +43,10 @@
               <div class="first-1" :style="{'width':item.redWidth,'height':'34px','background':'#f27979'}"></div>
               </div>
           </div>
-        <div v-if="showBarrier" v-for="(item, index) in barrierList" :key="index + '1'">
-          <div class="divider" :style="{'left':item, 'height':barrierHeight}"></div>
+        <div v-if="showBarrier">
+          <div v-for="(item, index) in barrierList" :key="index + '1'">
+            <div class="divider" :style="{'left':item, 'height':barrierHeight}"></div>
+          </div>
         </div>
         <div v-show="(syncTime && cycle && cycle>0) || (syncTime && newCycle && newCycle>0)">
           <div class="curTimeDiv" :style="{'left':paddingLeft, 'background-color': '#409EFF'}">{{ timeNumDevide }}</div>
@@ -63,7 +65,7 @@
                   </div>
                   <div style="cursor:pointer;">
                     <div class="ring-phase">
-                      <patternwalksvg :showWalk="list.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg>
+                      <!-- <patternwalksvg :showWalk="list.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg> -->
                       <xdrdirselector  Width="36px" Height="34px" :showlist="list.direction"></xdrdirselector>
                     </div>
                     <div class="box" style="line-height:28px">
@@ -83,7 +85,7 @@
       </div>
 </template>
 <script>
-import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
+// import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
 import xdrdirselector from '../XRDDirSelector/XRDDirSelector'
 // import PatternWalkSvg from '../IntersectionMap/crossDirection/baseImg/PatternWalkSvg'
 import PhaseDataModel from '../IntersectionMap/crossDirection/utils.js'
@@ -91,7 +93,7 @@ import CrossDiagramMgr from '../../../EdgeMgr/controller/crossDiagramMgr.js'
 export default {
   name: 'pattern-list',
   components: {
-    patternwalksvg,
+    // patternwalksvg,
     xdrdirselector
   },
   data () {
@@ -298,6 +300,7 @@ export default {
     },
     handleStageData (data) {
       if (!data) return
+      let peddirections = this.getPed(data)
       let stagesTemp = []
       let tempList = []
       for (let stg of data) {
@@ -309,11 +312,19 @@ export default {
           directionList.push(...currPhase.direction)
           directionList = Array.from(new Set(directionList))
         }
-        // if (directionList.length === 0) return
-        tempList = directionList.map(dir => ({
-          id: dir,
-          color: '#606266'
-        }))
+        if (directionList.length === 0) {
+          tempList.push({
+            id: '',
+            color: '#606266',
+            peddirection: peddirections
+          })
+        } else {
+          tempList = directionList.map(dir => ({
+            id: dir,
+            color: '#606266',
+            peddirection: peddirections
+          }))
+        }
         stagesTemp.push(...tempList)
       }
       return stagesTemp
@@ -332,7 +343,7 @@ export default {
           this.stageLists = this.localPatternList[i].stagesList.map(item => {
             return {
               ...item,
-              peddirection: this.getPed(item.phases ? item.phases : item.stages),
+              // peddirection: this.getPed(item.phases ? item.phases : item.stages),
               direction: this.handleStageData(item.phases ? item.phases : item.stages),
               greenWidth: (item.green / stageMaxCyle * 100).toFixed(3) + '%',
               yellowWidth: (item.yellow / stageMaxCyle * 100).toFixed(3) + '%',
@@ -353,7 +364,7 @@ export default {
       this.stageLists = this.stagesChange.map(item => {
         return {
           ...item,
-          peddirection: this.getPed(item.phases ? item.phases : item.stages),
+          // peddirection: this.getPed(item.phases ? item.phases : item.stages),
           direction: this.handleStageData(item.phases ? item.phases : item.stages),
           greenWidth: (item.green / stageMaxCyle * 100).toFixed(3) + '%',
           yellowWidth: (item.yellow / stageMaxCyle * 100).toFixed(3) + '%',
@@ -590,20 +601,46 @@ export default {
             }
             return item.id === ring.id
           })[0]
-          if (ring.desc) {
+          let peddirections = []
+          for (let walk of this.sidewalkPhaseData) {
+            for (let ped of currPhase.peddirection) {
+            // if (stg === walk.phaseid) {
+              let objs = {}
+              objs.name = walk.name
+              objs.id = walk.id
+              if (ped === walk.id) {
+                peddirections.push(objs)
+                peddirections = Array.from(new Set(peddirections))
+              }
+            // }
+            }
+          }
+          if (ring.desc && ring.desc.length > 0) {
             obj.direction = ring.desc.map(item => { // 虚相位desc为空
               return {
                 id: item.id,
-                color: '#454545'
+                color: '#454545',
+                peddirection: peddirections
               }
             })
           } else {
-            obj.direction = currPhase.direction.map(item => {
-              return {
-                id: item,
-                color: '#454545'
-              }
-            })
+            if (obj.direction && obj.direction > 0) {
+              obj.direction = currPhase.direction.map(item => {
+                return {
+                  id: item,
+                  color: '#454545',
+                  peddirection: peddirections
+                }
+              })
+            } else {
+              obj.direction = [
+                {
+                  id: '',
+                  color: '#454545',
+                  peddirection: peddirections
+                }
+              ]
+            }
           }
           if (ring.sum) {
             obj.split = split + ring.sum
@@ -615,22 +652,22 @@ export default {
           obj.flashgreen = (currPhase.flashgreen / (this.max ? this.max : this.newCycle) * 100).toFixed(3) + '%'
           obj.redWidth = (currPhase.redclear / (this.max ? this.max : this.newCycle) * 100).toFixed(3) + '%'
           obj.yellowWidth = (currPhase.yellow / (this.max ? this.max : this.newCycle) * 100).toFixed(3) + '%'
-          // obj.peddirection = currPhase.peddirection
-          let peddirections = []
-          for (let walk of this.sidewalkPhaseData) {
-            for (let ped of currPhase.peddirection) {
-            // if (stg === walk.phaseid) {
-              let objs = {}
-              objs.name = walk.name
-              objs.id = walk.id
-              if (ped === walk.id) {
-                peddirections.push(objs)
-                peddirections = Array.from(new Set(peddirections))
-              }
-            // }
-            }
-          }
-          obj.peddirection = peddirections
+          // // obj.peddirection = currPhase.peddirection
+          // let peddirections = []
+          // for (let walk of this.sidewalkPhaseData) {
+          //   for (let ped of currPhase.peddirection) {
+          //   // if (stg === walk.phaseid) {
+          //     let objs = {}
+          //     objs.name = walk.name
+          //     objs.id = walk.id
+          //     if (ped === walk.id) {
+          //       peddirections.push(objs)
+          //       peddirections = Array.from(new Set(peddirections))
+          //     }
+          //   // }
+          //   }
+          // }
+          // obj.peddirection = peddirections
           // 忽略相位不显示
           let mode = ring.mode
           if (mode !== 7) { // 忽略相位不显示
@@ -904,6 +941,7 @@ export default {
     float: left;
     // margin-left: 5px;
     height: 34px;
+    width: 36px;
     z-index: 999;
     background: rgba(30, 96, 12, 0.2);
     // margin-top:1px;

package/src/kisscomps/components/Stages/index.vue

@@ -24,11 +24,11 @@
                                 :Width="'55'"
                                 :Height="'55'" />
               </template> -->
-                <patternwalksvg class="patternWalk"
+                <!-- <patternwalksvg class="patternWalk"
                           :showWalk="item[0].peddirection"
                           :Width="'40'"
-                          :Height="'40'" />
-              <xdr-dir-selector Width="40PX" Height="40PX" :showlist="item"></xdr-dir-selector>
+                          :Height="'40'" /> -->
+              <xdr-dir-selector Width="40PX" Height="40PX" :Data="showStyle" :showlist="item"></xdr-dir-selector>
               <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;">
                 <div class="current-stage-num" style="width:20%;">{{index + 1}}</div>
                 <div style="width:70%;">
@@ -99,6 +99,10 @@ export default {
   },
   data () {
     return {
+      showStyle:{
+        top:'5PX',
+        left:'14px'
+      },
       presetStageIndex: -1,
       side: {key: 'pedphase1653818707546719', phaseid: 1, id: 1, name: '东人行横道'},
       // stagesList: [],