openatc-components 0.0.33 → 0.0.36

package/package/kisscomps/components/CommonKanban/CommonKanban.vue

@@ -48,9 +48,7 @@
             <el-tooltip class="item" effect="dark" placement="left">
               <div slot="content">{{element.name}}</div>
               <div class="common-phase-description">
-                <div v-for="(side, index) in sidewalkPhaseData" :key="side.key + '-' + index">
-                  <PatternWalkSvg v-if="element.peddirection.includes(side.id)" :Data="side" Width="38" Height="40" />
-                </div>
+                <patternwalksvg :sidewalkPhaseData="sidewalkPhaseData" :showWalk="element.peddirection" Width="38" Height="40"></patternwalksvg>
                 <xdrdirselector Width="40px"
                   Height="40px"
                   :showlist="element.desc"
@@ -70,14 +68,15 @@
 <script>
 import xdrdirselector from '../XRDDirSelector/XRDDirSelector'
 import draggable from 'vuedraggable'
-import PatternWalkSvg from '../IntersectionMap/crossDirection/baseImg/PatternWalkSvg'
+// import PatternWalkSvg from '../IntersectionMap/crossDirection/baseImg/PatternWalkSvg'
+import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
 
 export default {
   name: 'common-kanban',
   components: {
     draggable,
     xdrdirselector,
-    PatternWalkSvg
+    patternwalksvg
   },
   props: {
     headerText: {

package/package/kisscomps/components/IntersectionMap/crossDirection/baseImg/PatternWalkSvg.vue

@@ -11,7 +11,8 @@
  * See the Mulan PSL v2 for more details.
  **/
 <template>
-  <div :style="{position: 'absolute', left: Data.left?Data.left:'2px', top: Data.top}">
+  <div :style="{position: 'absolute'}">
+    <!-- , left: Data.left?Data.left:'2px', top: Data.top -->
     <svg
        :width="Width"
        :height="Height"
@@ -22,8 +23,7 @@
         style="enable-background:new 0 0 34 34;"
         xml:space="preserve">
     <g id="路段行人过街-东西"
-    :class="Data.name === '东西路段人行横道' ? '' : 'invisible'"
-    class="st0">
+    :class="status[0].isshow? '' : 'invisible'">
     <rect x="19.9" y="14.2" class="st1" width="1.6" height="5.6"/>
     <rect x="17.4" y="14.2" class="st1" width="1.6" height="5.6"/>
     <rect x="22.4" y="14.2" class="st1" width="1.6" height="5.6"/>
@@ -40,7 +40,7 @@
     <rect x="14.9" y="14.2" class="st1" width="1.6" height="5.6"/>
     </g>
     <g id="路段行人过街-南北" class="st0"
-    :class="Data.name === '南北路段人行横道' ? '' : 'invisible'"
+    :class="status[1].isshow? '' : 'invisible'">
     >
     <rect x="14.2" y="19.9" class="st1" width="5.6" height="1.6"/>
     <rect x="14.2" y="17.4" class="st1" width="5.6" height="1.6"/>
@@ -58,7 +58,7 @@
     <rect x="14.2" y="14.9" class="st1" width="5.6" height="1.6"/>
     </g>
     <g id="斜向行人1" class="st0"
-    :class="Data.name === 'X人行横道-\\' ? '' : 'invisible'"
+    :class="status[2].isshow? '' : 'invisible'">
     >
     <rect x="14.2" y="16.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.0438 17.0053)" class="st1" width="5.6" height="1.6"/>
     <rect x="12.4" y="14.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.3149 15.2456)" class="st1" width="5.6" height="1.6"/>
@@ -79,7 +79,7 @@
     <rect x="10.7" y="12.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.586 13.4859)" class="st1" width="5.6" height="1.6"/>
     </g>
     <g id="斜向行人2" class="st0"
-    :class="Data.name === 'X人行横道-/' ? '' : 'invisible'"
+    :class="status[3].isshow? '' : 'invisible'"
     >
     <rect x="16.2" y="14.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.047 16.9978)" class="st1" width="1.6" height="5.6"/>
     <rect x="17.9" y="12.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.2872 17.7267)" class="st1" width="1.6" height="5.6"/>
@@ -102,7 +102,7 @@
     <rect x="19.7" y="10.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.5275 18.4556)" class="st1" width="1.6" height="5.6"/>
     </g>
     <g id="北行人"
-    :class="Data.name === '北人行横道' ? '' : 'invisible'"
+    :class="status[4].isshow? '' : 'invisible'"
     class="st0">
     <rect x="19.9" class="st1" width="1.6" height="5.6"/>
     <rect x="17.4" class="st1" width="1.6" height="5.6"/>
@@ -120,7 +120,7 @@
     <rect x="14.9" class="st1" width="1.6" height="5.6"/>
     </g>
     <g id="南行人"
-    :class="Data.name === '南人行横道' ? '' : 'invisible'"
+    :class="status[5].isshow? '' : 'invisible'"
     class="st0">
     <rect x="19.9" y="28.4" class="st1" width="1.6" height="5.6"/>
     <rect x="17.4" y="28.4" class="st1" width="1.6" height="5.6"/>
@@ -138,7 +138,7 @@
     <rect x="14.9" y="28.4" class="st1" width="1.6" height="5.6"/>
     </g>
     <g id="东行人"
-    :class="Data.name === '东人行横道' ? '' : 'invisible'"
+    :class="status[6].isshow? '' : 'invisible'"
     class="st0">
     <rect x="28.4" y="19.9" class="st1" width="5.6" height="1.6"/>
     <rect x="28.4" y="17.4" class="st1" width="5.6" height="1.6"/>
@@ -156,7 +156,7 @@
     <rect x="28.4" y="14.9" class="st1" width="5.6" height="1.6"/>
     </g>
     <g id="西行人"
-    :class="Data.name === '西人行横道' ? '' : 'invisible'"
+    :class="status[7].isshow? '' : 'invisible'"
     class="st0">
     <rect y="19.9" class="st1" width="5.6" height="1.6"/>
     <rect y="17.4" class="st1" width="5.6" height="1.6"/>
@@ -175,7 +175,7 @@
     </g>
     <g id="二次过街-西" class="st0">
     <g id="西下"
-    :class="Data.name === '西人行横道-下' ? '' : 'invisible'"
+    :class="status[8].isshow? '' : 'invisible'"
     >
         <rect y="19.9" class="st1" width="5.6" height="1.6"/>
         <rect y="22.4" class="st1" width="5.6" height="1.6"/>
@@ -185,7 +185,7 @@
         <rect y="32.4" class="st1" width="5.6" height="1.6"/>
     </g>
     <g id="西上"
-    :class="Data.name === '西人行横道-上' ? '' : 'invisible'"
+    :class="status[9].isshow? '' : 'invisible'"
     >
         <rect y="7.5" class="st1" width="5.6" height="1.6"/>
         <rect y="5" class="st1" width="5.6" height="1.6"/>
@@ -197,7 +197,7 @@
     </g>
     <g id="二次过街-东" class="st0">
     <g id="东上"
-     :class="Data.name === '东人行横道-上' ? '' : 'invisible'"
+    :class="status[10].isshow? '' : 'invisible'"
     >
         <rect x="28.4" y="12.5" class="st1" width="5.6" height="1.6"/>
         <rect x="28.4" y="10" class="st1" width="5.6" height="1.6"/>
@@ -207,7 +207,7 @@
         <rect x="28.4" y="0" class="st1" width="5.6" height="1.6"/>
     </g>
     <g id="东下"
-    :class="Data.name === '东人行横道-下' ? '' : 'invisible'"
+    :class="status[11].isshow? '' : 'invisible'"
     >
         <rect x="28.4" y="24.9" class="st1" width="5.6" height="1.6"/>
         <rect x="28.4" y="27.4" class="st1" width="5.6" height="1.6"/>
@@ -219,7 +219,7 @@
     </g>
     <g id="二次过街-南" class="st0">
     <g id="南右"
-    :class="Data.name === '南人行横道-右' ? '' : 'invisible'"
+    :class="status[12].isshow? '' : 'invisible'"
     >
         <rect x="19.9" y="28.4" class="st1" width="1.6" height="5.6"/>
         <rect x="22.4" y="28.4" class="st1" width="1.6" height="5.6"/>
@@ -229,7 +229,7 @@
         <rect x="32.4" y="28.4" class="st1" width="1.6" height="5.6"/>
     </g>
         <g id="南左"
-        :class="Data.name === '南人行横道-左' ? '' : 'invisible'"
+        :class="status[13].isshow? '' : 'invisible'"
         >
             <rect x="7.5" y="28.4" class="st1" width="1.6" height="5.6"/>
             <rect x="5" y="28.4" class="st1" width="1.6" height="5.6"/>
@@ -241,7 +241,7 @@
     </g>
         <g id="二次过街-北_1_" class="st0">
         <g id="北右_1_"
-        :class="Data.name === '北人行横道-右' ? '' : 'invisible'"
+        :class="status[14].isshow? '' : 'invisible'"
         >
             <rect x="19.9" class="st1" width="1.6" height="5.6"/>
             <rect x="22.4" class="st1" width="1.6" height="5.6"/>
@@ -251,7 +251,7 @@
             <rect x="32.4" class="st1" width="1.6" height="5.6"/>
         </g>
         <g id="北左_1_"
-        :class="Data.name === '北人行横道-左' ? '' : 'invisible'"
+        :class="status[15].isshow? '' : 'invisible'"
         >
             <rect x="7.5" class="st1" width="1.6" height="5.6"/>
             <rect x="5" class="st1" width="1.6" height="5.6"/>
@@ -269,9 +269,113 @@ export default {
   name: 'PatternWalkSvg',
   data () {
     return {
+      status: [
+        {
+          id: 1,
+          name: '东西路段人行横道',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 2,
+          name: '南北路段人行横道',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 3,
+          name: 'X人行横道-\\',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 4,
+          name: 'X人行横道-/',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 5,
+          name: '北人行横道',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 6,
+          name: '南人行横道',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 7,
+          name: '东人行横道',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 8,
+          name: '西人行横道',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 9,
+          name: '西人行横道-下',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 10,
+          name: '西人行横道-上',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 11,
+          name: '东人行横道-上',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 12,
+          name: '东人行横道-下',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 13,
+          name: '南人行横道-右',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 14,
+          name: '南人行横道-左',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 15,
+          name: '北人行横道-右',
+          isshow: false,
+          color: '#0096ba'
+        },
+        {
+          id: 16,
+          name: '北人行横道-左',
+          isshow: false,
+          color: '#0096ba'
+        }
+      ]
     }
   },
   props: {
+    sidewalkPhaseData: {
+      type: Array
+    },
+    showWalk: {
+      type: Array
+    },
     Width: {
       type: String,
       default: '34px'
@@ -283,6 +387,36 @@ export default {
     Data: {
       type: Object
     }
+  },
+  watch: {
+    sidewalkPhaseData: {
+      handler: function () {
+        this.getShow()
+      },
+      deep: true // 深度监听
+    },
+    showWalk: {
+      handler: function () {
+        this.getShow()
+      },
+      deep: true // 深度监听
+    }
+  },
+  created () {
+    this.getShow()
+  },
+  methods: {
+    getShow () {
+      console.log(this.sidewalkPhaseData, this.showWalk)
+      if (!this.sidewalkPhaseData) return
+      for (let i = 0; i < this.sidewalkPhaseData.length; i++) {
+        for (let j = 0; j < this.status.length; j++) {
+          if (this.sidewalkPhaseData[i].name === this.status[j].name && this.showWalk.includes(this.sidewalkPhaseData[i].id)) {
+            this.status[j].isshow = true
+          }
+        }
+      }
+    }
   }
 }
 </script>

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

@@ -12,7 +12,7 @@
                 </div>
                 <div style="cursor:pointer;">
                     <div class="ring-phase">
-                        <PatternWalkSvg v-if="item.peddirection"  :Data="item.peddirection[0]" :Width="'32'" :Height="'34'" />
+                        <patternwalksvg :sidewalkPhaseData="list.sidewalkPhaseData" :showWalk="list.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg>
                         <xdrdirselector  Width="36px" Height="34px" :showlist="item.direction"></xdrdirselector>
                     </div>
                     <div class="box">
@@ -37,11 +37,11 @@
 import PhaseDataModel from '../IntersectionMap/crossDirection/utils.js'
 import CrossDiagramMgr from '../../../EdgeMgr/controller/crossDiagramMgr.js'
 import xdrdirselector from '../XRDDirSelector/XRDDirSelector'
-import PatternWalkSvg from '../IntersectionMap/crossDirection/baseImg/PatternWalkSvg'
+import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
 export default {
   name: 'over-lap',
   components: {
-    PatternWalkSvg,
+    patternwalksvg,
     xdrdirselector
   },
   data () {
@@ -134,6 +134,7 @@ export default {
         findIndexs = Array.from(new Set(findIndexs))
         return {
           ...item,
+          sidewalkPhaseData: this.getPedPhasePos(item.peddirection),
           stageLists: stageList.map(sta => {
             const find = findIndexs.includes(sta.key)
             return {

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

@@ -20,9 +20,7 @@
                   <div slot="content">P{{item.id}}:{{item.split}}</div>
                   <div style="cursor:pointer;">
                     <div class="ring-phase">
-                      <div v-for="(side, index) in sidewalkPhaseData" :key="side.key + '-' + index">
-                        <PatternWalkSvg v-if="item.peddirection.includes(side.id)"  :Data="side" :Width="'32'" :Height="'34'" />
-                      </div>
+                      <patternwalksvg :sidewalkPhaseData="sidewalkPhaseData" :showWalk="item.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg>
                       <xdrdirselector  Width="36px" Height="34px" :showlist="item.direction"></xdrdirselector>
                     </div>
                     <div class="box">
@@ -46,7 +44,7 @@
         <div v-for="(item, index) in barrierList" :key="index + '1'">
           <div class="divider" :style="{'left':item, 'height':barrierHeight}"></div>
         </div>
-        <div v-show="syncTime && cycle && cycle > 0">
+        <div v-show="(syncTime && cycle && cycle>0) || (syncTime && newCycle && newCycle>0)">
           <div class="curTimeDiv" :style="{'left':paddingLeft, 'background-color': '#409EFF'}">{{ timeNumDevide }}</div>
           <div class="curTimeLine" :style="{'left':paddingLeft, 'height':barrierHeight}"></div>
         </div>
@@ -63,9 +61,7 @@
                   </div>
                   <div style="cursor:pointer;">
                     <div class="ring-phase">
-                      <div v-for="(side, index) in sidewalkPhaseData" :key="side.key + '-' + index">
-                        <PatternWalkSvg v-if="list.peddirection.includes(side.id)"  :Data="side" :Width="'32'" :Height="'34'" />
-                      </div>
+                      <patternwalksvg :sidewalkPhaseData="sidewalkPhaseData" :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">
@@ -85,14 +81,15 @@
       </div>
 </template>
 <script>
+import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
 import xdrdirselector from '../XRDDirSelector/XRDDirSelector'
-import PatternWalkSvg from '../IntersectionMap/crossDirection/baseImg/PatternWalkSvg'
+// import PatternWalkSvg from '../IntersectionMap/crossDirection/baseImg/PatternWalkSvg'
 import PhaseDataModel from '../IntersectionMap/crossDirection/utils.js'
 import CrossDiagramMgr from '../../../EdgeMgr/controller/crossDiagramMgr.js'
 export default {
   name: 'pattern-list',
   components: {
-    PatternWalkSvg,
+    patternwalksvg,
     xdrdirselector
   },
   data () {
@@ -152,6 +149,10 @@ export default {
   computed: {
     paddingLeft () {
       let res = '0%'
+      if (this.newCycle && this.newCycle > 0) {
+        let curPercent = (this.newCycle - this.syncTime) / this.newCycle
+        res = curPercent * 100 + '%'
+      }
       if (this.cycle && this.cycle > 0) {
         let curPercent = (this.cycle - this.syncTime) / this.cycle
         res = curPercent * 100 + '%'
@@ -159,8 +160,14 @@ export default {
       return res
     },
     timeNumDevide () {
-      let res = (this.cycle - this.syncTime) + '/' + this.cycle
-      return res
+      if (this.newCycle && this.newCycle > 0) {
+        let res = (this.newCycle - this.syncTime) + '/' + this.newCycle
+        return res
+      }
+      if (this.cycle && this.cycle > 0) {
+        let res = (this.cycle - this.syncTime) + '/' + this.cycle
+        return res
+      }
     }
   },
   watch: {
@@ -171,6 +178,7 @@ export default {
         }
         // this.controlDatas = this.controlData
         this.handlePatternData()
+        this.handleBarrierHeight()
       },
       // 深度观察监听
       deep: true
@@ -243,7 +251,7 @@ export default {
       setTimeout(() => {
         this.handleCurrentChange(this.patternStatusList)
         this.handleBarrierHeight()
-      }, 200)
+      }, 400)
     } else {
       this.handlePatternData()
     }