openatc-components 0.0.3 → 0.0.6

package/package.json

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

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

@@ -27,7 +27,7 @@
             <el-tooltip class="item" effect="dark" placement="left">
               <div slot="content">{{element.name}}</div>
               <div class="common-phase-description">
-                <xdrdirselector Width="40px" Height="40px" :showlist="element.desc" :ISActiveMask="ISActiveMask" :MaskColor="MaskColor"></xdrdirselector>
+                <xdrdirselector Width="40px" Height="40px" :showlist="element.desc" :ISActiveMask="ISActiveMask" :MaskColor="MaskColor" :roadDirection="roadDirection"></xdrdirselector>
               </div>
             </el-tooltip>
         </div>
@@ -43,7 +43,10 @@
             <el-tooltip class="item" effect="dark" placement="left">
               <div slot="content">{{element.name}}</div>
               <div class="common-phase-description">
-                <xdrdirselector Width="40px" Height="40px" :showlist="element.desc" :ISActiveMask="ISActiveMask" :MaskColor="MaskColor"></xdrdirselector>
+                <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>
+                <xdrdirselector Width="40px" Height="40px" :showlist="element.desc" :ISActiveMask="ISActiveMask" :MaskColor="MaskColor" :roadDirection="roadDirection"></xdrdirselector>
               </div>
             </el-tooltip>
         </div>
@@ -57,12 +60,14 @@
 <script>
 import xdrdirselector from '../XRDDirSelector/XRDDirSelector'
 import draggable from 'vuedraggable'
+import PatternWalkSvg from '../IntersectionMap/crossDirection/baseImg/PatternWalkSvg'
 
 export default {
   name: 'common-kanban',
   components: {
     draggable,
-    xdrdirselector
+    xdrdirselector,
+    PatternWalkSvg
   },
   props: {
     headerText: {
@@ -86,6 +91,12 @@ export default {
     Draggable: { // 是否开启拖动调整顺序
       type: Boolean,
       default: true
+    },
+    sidewalkPhaseData: {
+      type: Array
+    },
+    roadDirection: {
+      type: String
     }
   },
   methods: {

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

@@ -136,7 +136,7 @@ import RampSouthRoadsSvg from './baseImg/RampSouthSvg'
 import RampPhaseIconSvg from './phaseIcon/rampPhaseIconSvg'
 import PedSectionEWSvg from './baseImg/PedSectionEWSvg'
 import PedSectionSNSvg from './baseImg/PedSectionSNSvg'
-import { mapState } from 'vuex'
+// import { mapState } from 'vuex'
 import LCrossRoadsSvg from './baseImg/leftroad/LCrossRoadsSvg'
 import LTShapeEastRoadsSvg from './baseImg/leftroad/LTShapeEastRoadsSvg'
 import LTShapeWestRoadsSvg from './baseImg/leftroad/LTShapeWestRoadsSvg.vue'
@@ -186,13 +186,17 @@ export default {
     isShowInterval: {
       type: Boolean,
       devault: true
+    },
+    roadDirection: {
+      type: String,
+      default: 'right'
     }
   },
-  computed: {
-    ...mapState({
-      roadDirection: state => state.globalParam.roadDirection
-    })
-  },
+  // computed: {
+  //   ...mapState({
+  //     roadDirection: state => state.globalParam.roadDirection
+  //   })
+  // },
   watch: {
     tempType: {
       handler: function (val) {
@@ -296,7 +300,7 @@ export default {
     init () {
       this.CrossDiagramMgr = new CrossDiagramMgr()
       this.getRoadDirection()
-      this.PhaseDataModel = new PhaseDataModel()
+      this.PhaseDataModel = new PhaseDataModel(this.roadDirection)
       this.getIntersectionInfo() // 获取路口信息
     },
     comparePhaseStatus () {

package/src/kisscomps/components/IntersectionMap/crossDirection/utils.js

@@ -10,9 +10,9 @@
  * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  * See the Mulan PSL v2 for more details.
  **/
-import store from '../../../../store'
 export default class PhaseDataModel {
-  constructor () {
+  constructor (roadDirection = 'right') {
+    this.roadDirection = roadDirection
     this.PhasePosMap = new Map()
     this.SidePosMap = new Map()
     this.RampMainPosMap = new Map() // 匝道主路坐标
@@ -27,7 +27,7 @@ export default class PhaseDataModel {
     let rampJson = require('./posJson/rampPos.json')
     let busMapJson = require('./posJson/busPos.json').busMap
     let busPhaseJson = require('./posJson/busPos.json').busphases
-    if (store.getters.roadDirection === 'left') {
+    if (this.roadDirection === 'left') {
       phaseJson = require('./posJson/phasePos.left.json').phaseList
       busMapJson = require('./posJson/busPos.left.json').busMap
       busPhaseJson = require('./posJson/busPos.left.json').busphases

package/src/kisscomps/components/IntersectionMap/intersectionmap.vue

@@ -27,7 +27,8 @@
       :crossStatusData="crossStatusData"
       :agentId="agentId"
       :isShowInterval="isShowInterval"
-      :devStatus="devStatus"/>
+      :devStatus="devStatus"
+      :roadDirection="roadDirection" />
   </div>
 </div>
 </template>
@@ -75,6 +76,10 @@ export default {
       handler: function (val) {
         this.setPropsToken(val)
       }
+    },
+    roadDirection: {
+      type: String,
+      default: 'right'
     }
   },
   watch: {

package/src/kisscomps/components/IntersectionWithInterface/IntersectionWithInterface.vue

@@ -17,7 +17,8 @@
         :crossStatusData="crossStatusData"
         :devStatus="devStatus"
         :agentId="agentId"
-        :graphicMode="true"/>
+        :graphicMode="true"
+        :roadDirection="roadDirection" />
   </div>
 </template>
 <script>
@@ -51,6 +52,10 @@ export default {
     Token: {
       type: String,
       default: ''
+    },
+    roadDirection: {
+      type: String,
+      default: 'right'
     }
   },
   watch: {

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

@@ -27,6 +27,7 @@
                :currentStage="currentStage"
                :preselectStages="preselectStages"
                :realtimeStatusModalvisible="realtimeStatusModalvisible"
+               :roadDirection="roadDirection"
                @closeManualModal="closeManualModal"
                @selectModel="selectModel"
                @selectStages="selectStages"
@@ -42,14 +43,18 @@
                 v-if="specialPage === 'closephase'"
                 :controlData="controlData"
                 :closePhaseRings="phaseRings"
+                :sidewalkPhaseData="sidewalkPhaseData"
                 :realtimeStatusModalvisible="realtimeStatusModalvisible"
+                :roadDirection="roadDirection"
                 @closePhaseBack="closePhaseBack"
                 @closePhaseControl= "closePhaseControl" />
               <LockingPhaseControlModal
                 v-if="specialPage === 'lockingphase'"
                 :controlData="controlData"
                 :closePhaseRings="phaseRings"
+                :sidewalkPhaseData="sidewalkPhaseData"
                 :realtimeStatusModalvisible="realtimeStatusModalvisible"
+                :roadDirection="roadDirection"
                 @closePhaseBack="closePhaseBack"
                 @closePhaseControl= "closePhaseControl" />
             </div>
@@ -76,6 +81,7 @@
                 :agentId="agentId"
                 :stagesList="stagesList"
                 :sidewalkPhaseData="sidewalkPhaseData"
+                :roadDirection="roadDirection"
                 @changeStatus="changeStatus"
                 @showFaultDetail="showFaultDetail"/>
             </div>
@@ -139,6 +145,10 @@ export default {
     Token: {
       type: String,
       default: ''
+    },
+    roadDirection: {
+      type: String,
+      default: 'right'
     }
   },
   data () {
@@ -270,10 +280,17 @@ export default {
       handler: function (val) {
         this.setPropsToken(val)
       }
+    },
+    roadDirection: {
+      handler: function (val) {
+        if (val === 'left' || val === 'right') {
+          this.PhaseDataModel = new PhaseDataModel(val)
+        }
+      }
     }
   },
   created () {
-    this.PhaseDataModel = new PhaseDataModel()
+    this.PhaseDataModel = new PhaseDataModel(this.roadDirection)
     this.CrossDiagramMgr = new CrossDiagramMgr()
     if (this.realtimeStatusModalvisible === false) {
       this.changeStatus()

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

@@ -41,6 +41,8 @@
             :list="ring.phases"
             :header-text="$t('openatccomponents.pattern.ring') + ring.num"
             :Draggable="false"
+            :sidewalkPhaseData="sidewalkPhaseData"
+            :roadDirection="roadDirection"
             @handleSort="handleSort">
               <template v-slot:kanbantitle>
                 <div class="col-title" v-text="$t('openatccomponents.overview.closemode')"></div>
@@ -106,6 +108,12 @@ export default {
     realtimeStatusModalvisible: {
       type: Boolean,
       default: true
+    },
+    sidewalkPhaseData: {
+      type: Array
+    },
+    roadDirection: {
+      type: String
     }
   },
   computed: {

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

@@ -57,6 +57,8 @@
             :list="ring.phases"
             :header-text="$t('openatccomponents.pattern.ring') + ring.num"
             :Draggable="false"
+            :sidewalkPhaseData="sidewalkPhaseData"
+            :roadDirection="roadDirection"
             @handleSort="handleSort">
               <template v-slot:kanbantitle>
                 <div class="col-title" v-text="$t('openatccomponents.overview.closemode')"></div>
@@ -122,6 +124,12 @@ export default {
     realtimeStatusModalvisible: {
       type: Boolean,
       default: true
+    },
+    sidewalkPhaseData: {
+      type: Array
+    },
+    roadDirection: {
+      type: String
     }
   },
   data () {

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

@@ -54,7 +54,7 @@
         <div style="width: 100%; height: auto;overflow: hidden;">
           <div class="control-model" v-for="(item, index) in stagesList" :key="index">
             <div class="single-model" @click="selectStages(index + 1)" :class="preselectStages == index + 1 ? 'single-model-select' : ''">
-              <xdrdirselector Width="40px" Height="40px" :showlist="item"></xdrdirselector>
+              <xdrdirselector Width="40px" Height="40px" :showlist="item" :roadDirection="roadDirection"></xdrdirselector>
               <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%;">
@@ -126,6 +126,9 @@ export default {
     realtimeStatusModalvisible: {
       type: Boolean,
       default: true
+    },
+    roadDirection: {
+      type: String
     }
   },
   computed: {

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

@@ -161,7 +161,7 @@
                 :Width="'44'"
                 :Height="'44'"
               />
-              <xdrdirselector Width="40PX" Height="40PX" :showlist="item"></xdrdirselector>
+              <xdrdirselector Width="40PX" Height="40PX" :showlist="item" :roadDirection="roadDirection"></xdrdirselector>
               <div
                 style="display:flex;flex-direction:row;justify-content:center;align-items:center;"
               >
@@ -274,6 +274,9 @@ export default {
     },
     untreatedFault: {
       type: Array
+    },
+    roadDirection: {
+      type: String
     }
   },
   data () {

package/src/kisscomps/components/XRDDirSelector/XRDDirSelector.vue

@@ -306,7 +306,7 @@
   </svg>
 </template>
 <script>
-import { mapState } from 'vuex'
+// import { mapState } from 'vuex'
 export default {
   name: 'xdr-dir-selector',
   props: {
@@ -344,13 +344,17 @@ export default {
     MaskColor: {
       type: String,
       default: '#0096ba'
+    },
+    roadDirection: {
+      type: String,
+      default: 'right'
     }
   },
-  computed: {
-    ...mapState({
-      roadDirection: state => state.globalParam.roadDirection
-    })
-  },
+  // computed: {
+  //   ...mapState({
+  //     roadDirection: state => state.globalParam.roadDirection
+  //   })
+  // },
   data () {
     return {
       maskmark: false,

package/src/store/getters.js

@@ -23,7 +23,7 @@ const getters = {
   curPath: state => state.globalParam.curPath,
   globalParamModel: state => state.globalParamModel.GlobalParamModeObject,
   devParams: state => state.globalParamModel.devParams,
-  permissionRoutes: state => state.permissionRoutes.routers,
-  roadDirection: state => state.globalParam.roadDirection
+  permissionRoutes: state => state.permissionRoutes.routers
+  // roadDirection: state => state.globalParam.roadDirection
 }
 export default getters

package/src/store/modules/globalParam.js

@@ -66,7 +66,7 @@ const Global = {
     FuncSort: 'allFunc',
     hideMenu: false,
     graphicMode: false, // 为true时，切换到图形界面模式，只显示路口图部分
-    roadDirection: 'right', // 当前路口行车方向：默认右行
+    // roadDirection: 'right', // 当前路口行车方向：默认右行
     channelDescMap: new Map(), // 管理实时通道描述数据
     isShowGui: true, // 总览当前是否是图形界面
     isRefreshTankuang: 'norefresh' // 刷新某个页面的相位弹框组件
@@ -114,9 +114,9 @@ const Global = {
     SET_GRAPHIC_MODE: (state, isSwitchGraphicMode) => {
       state.graphicMode = isSwitchGraphicMode
     },
-    SET_ROAD_RIRECTION: (state, DIR) => {
-      state.roadDirection = DIR
-    },
+    // SET_ROAD_RIRECTION: (state, DIR) => {
+    //   state.roadDirection = DIR
+    // },
     SET_CHANNEL_DESC: (state, descmap) => {
       state.channelDescMap = descmap
     },
@@ -176,9 +176,9 @@ const Global = {
     SetGraphicMode ({ commit }, isSwitchGraphicMode) {
       commit('SET_GRAPHIC_MODE', isSwitchGraphicMode)
     },
-    SetRoadDirection ({ commit }, DIR) {
-      commit('SET_ROAD_RIRECTION', DIR)
-    },
+    // SetRoadDirection ({ commit }, DIR) {
+    //   commit('SET_ROAD_RIRECTION', DIR)
+    // },
     SetChannelDesc ({ commit }, descmap) {
       commit('SET_CHANNEL_DESC', descmap)
     },

package/src/views/intersection.vue

@@ -12,7 +12,8 @@
       <intersection-with-interface
         ref="intersectionWithInterface"
         :AgentId="agentId"
-        Token="eyJraWQiOiIxNjQ4NDMyMTY5NjExIiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTczNDgzMjE2OSwiaWF0IjoxNjQ4NDMyMTY5fQ.yNM6N0STwcNHE9tYi7fTfb0vqYLabjPntx7pQDS2zy4"
+        roadDirection="left"
+        Token="eyJraWQiOiIxNjQ4ODAyNTk2Nzc4IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTczNTIwMjU5NiwiaWF0IjoxNjQ4ODAyNTk2fQ.TMA7MaKDDwGxOrzyRIFbfrsH-_UyPGFz2Uqnnwsc8nk"
         ></intersection-with-interface>
     </el-dialog>
   </div>
@@ -24,7 +25,7 @@ export default {
     return {
       boxVisible: false,
       dialogWidth: '80%',
-      agentId: '1640244524086'
+      agentId: '10001-928'
     }
   },
   methods: {

package/src/views/schemeconfig.vue

@@ -22,7 +22,8 @@
       append-to-body>
       <scheme-config
         ref="rightpanel"
-        agentId="1640244524086"
+        agentId="10001-928"
+        roadDirection="right"
         :statusData="crossStatusData"
         :realtimeStatusModalvisible="false" />
     </el-dialog>

package/static/styles/common.scss

@@ -1,3 +1,18 @@
 @import './intersection.scss';
 @import './schemeconfig.scss';
-@import './commonkanban.scss';
+@import './commonkanban.scss';
+
+ // 全局滚动条样式
+ ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-thumb {
+  // 滚动条的滑块
+  border-radius: 4px;
+  background: rgba(144, 147, 153, 0.3);
+}
+::-webkit-scrollbar-corner{
+  // 横向滚动条和纵向滚动条同时出现，右下角有个小白方格
+  background: transparent;
+}