openatc-components 0.4.90 → 0.4.92

package/package.json

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

package/src/i18n/language/en.js

@@ -1045,7 +1045,9 @@ const en = {
         'tjunction': 'T-junction',
         'roundabout': 'Roundabout',
         'rampintersection': 'RampIntersection',
+        'rampintersection2': 'Auxiliary Road Inbound',
         'pedestriancrossing': 'PedestrianCrossing',
+        'pedestriancrossing2': 'Road Section Crossing',
         'otherIntersections': 'OtherIntersections',
         'customIntersection': 'CustomIntersection'
       },
@@ -1408,7 +1410,7 @@ const en = {
       'importtip': 'The picture format is SVG, PNG and JPG, and the size is no more than 10MB',
       'importsizeerror': 'Picture size exceeds 10MB, please re import!',
       'importtypeerror': 'Picture format error, please import again!',
-      'importcrosspicture': 'Import intersection picture',
+      'importcrosspicture': 'Intersection Map',
       'againimport': 'Re import',
       'motorway': 'Motorway',
       'bicyclelane': 'Non motorized Lane',

package/src/i18n/language/zh.js

@@ -1042,10 +1042,12 @@ const zh = {
       'annual': '全年',
       'crossShapes': {
         'crossroads': '十字路口',
-        'tjunction': '丁字路口',
+        'tjunction': 'T字路口',
         'roundabout': '环形路口',
         'rampintersection': '匝道路口',
+        'rampintersection2': '辅路汇入',
         'pedestriancrossing': '行人过街路口',
+        'pedestriancrossing2': '路段过街',
         'otherIntersections': '其他形状路口',
         'customIntersection': '自定义路口'
       },
@@ -1408,7 +1410,7 @@ const zh = {
       'importtip': '图片格式为svg、png、jpg，大小不超过10Mb',
       'importsizeerror': '图片大小超过10Mb，请重新导入!',
       'importtypeerror': '图片格式错误，请重新导入!',
-      'importcrosspicture': '导入路口图片',
+      'importcrosspicture': '路口底图',
       'againimport': '重新导入',
       'motorway': '机动车道',
       'bicyclelane': '非机动车道',

package/src/kisscomps/components/DrawChannelization/drawsvg/index.draw.vue

@@ -19,7 +19,17 @@
         <!-- 绘制功能 -->
         <div class="draw-function">
           <div class="again-import">
-            <span class="import-label">{{$t('openatccomponents.channelizationmap.importcrosspicture')}}</span>
+            <el-dropdown @command="handleChangeCrossShapes">
+              <el-button type="primary" class="cross-shapes-btn">
+                {{$t('openatccomponents.channelizationmap.importcrosspicture')}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="101">{{$t('openatccomponents.importTemp.crossShapes.crossroads')}}</el-dropdown-item>
+                <el-dropdown-item command="100">{{$t('openatccomponents.importTemp.crossShapes.tjunction')}}</el-dropdown-item>
+                <el-dropdown-item command="103">{{$t('openatccomponents.importTemp.crossShapes.rampintersection2')}}</el-dropdown-item>
+                <el-dropdown-item command="104">{{$t('openatccomponents.importTemp.crossShapes.pedestriancrossing2')}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
             <el-button
               class="again-import-btn"
               type="primary"
@@ -782,21 +792,7 @@ export default {
       // }
       this.index = 0
       this.curChooseIcon = {}
-      axios.get('./img/CrossRoadsSvg.svg').then((val) => {
-        if (!val.data || val.data === '') return
-        this.CrossMapData = {
-            index: -2,
-            icontype: 'crossmap',
-            x: 435,
-            y: 325,
-            w: 870,
-            h: 650,
-            angle: 0,
-            imgfilesrc: '',
-            svgstr: val.data,
-            type: 'vectorgraph'
-        }
-      })
+      this.reloadDefaultCrossMap('CrossRoad.svg')
     },
     // 取消
     cancledraw () {
@@ -1010,6 +1006,39 @@ export default {
       el.click()
       // 移除链接释放资源
       urlObject.revokeObjectURL(url)
+    },
+    handleChangeCrossShapes (shape) {
+      switch (shape) {
+        case '100':
+          this.reloadDefaultCrossMap('TCrossRoad.svg')
+          break
+        case '101':
+          this.reloadDefaultCrossMap('CrossRoad.svg')
+          break
+        case '103':
+          this.reloadDefaultCrossMap('RampRoad.svg')
+          break
+        case '104':
+          this.reloadDefaultCrossMap('PedCrossingRoad.svg')
+          break
+      }
+    },
+    reloadDefaultCrossMap (imgname) {
+      axios.get(`./img/${imgname}`).then((val) => {
+        if (!val.data || val.data === '') return
+        this.CrossMapData = {
+            index: -2,
+            icontype: 'crossmap',
+            x: 435,
+            y: 325,
+            w: 870,
+            h: 650,
+            angle: 0,
+            imgfilesrc: '',
+            svgstr: val.data,
+            type: 'vectorgraph'
+        }
+      })
     }
   },
   mounted () {
@@ -1018,5 +1047,11 @@ export default {
 }
 </script>
 
-<style lang="css" rel="stylesheet/scss">
+<style lang="css" rel="stylesheet/scss" scoped>
+.cross-shapes-btn {
+  height: 32PX;
+  width: 90PX;
+  line-height: 32PX;
+  padding: 0;
+}
 </style>

package/src/kisscomps/components/DrawChannelization/drawsvg/phaseAssociatedComponent.vue

@@ -112,7 +112,7 @@ export default {
         return data.direction.map(dir => {
           return {
             id: dir,
-            peddirection: this.getshowped(data.peddirection),
+            peddirection: data.peddirection ? this.getshowped(data.peddirection) : [],
             color: '#1E1E1E'
           }
         })
@@ -120,7 +120,7 @@ export default {
         return [
           {
             id: '',
-            peddirection: this.getshowped(data.peddirection),
+            peddirection: data.peddirection ? this.getshowped(data.peddirection) : [],
             color: '#1E1E1E'
           }
         ]

package/src/kisscomps/components/IntersectionDirectionSelection/IntersectionDirectionSelection.vue

@@ -148,6 +148,10 @@ export default {
     refresh () {
       // 刷新底图
       this.$refs.intersectionMap2.resetCrossDiagram()
+    },
+    refreshArrow () {
+      // 高亮箭头按最新数据刷新
+      this.$refs.intersectionMap2.refreshArrow()
     }
   },
   mounted () {

package/src/kisscomps/components/IntersectionMap/crossDirection/baseImg/SidewalkClickSvg.vue

@@ -1263,8 +1263,10 @@ export default {
     init () {
       this.sidewalkData = JSON.parse(JSON.stringify(this.Data))
       this.getPedDirection()
-      this.handleStatus()
-      this.IconAddEvent()
+      this.$nextTick(() => {
+        this.handleStatus()
+        this.IconAddEvent()
+      })
     }
   },
   mounted () {

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

@@ -879,7 +879,16 @@ export default {
           return
         }
         this.isLoaded = true
-        this.tempType = res.data.data.type
+        this.InfoRes = res
+        this.handleInfo(res)
+      })
+    },
+    refreshArrow () {
+      // 刷新所选方向箭头，不重新请求接口
+      this.handleInfo(this.InfoRes)
+    },
+    handleInfo (res) {
+      this.tempType = res.data.data.type
         // 获取车道相位、行人相位信息（坐标、名称）
         this.mainType = this.tempType.split('-')[0]
         this.mainDirection = this.tempType.split('-')[1]
@@ -888,13 +897,11 @@ export default {
           this.getMergeDirections()
         }
         if (this.isVipRoute && !this.isThirdSignal && !this.isRcp) {
-          alert('1')
           // 特勤、分组管控下，非第三方设备且不是rcp协议，按通道显示相位方向；第三方设备和rcp协议还是按路口相位配置显示相位方向
           this.getChannelInfo()
           return
         }
         if (this.channelType && !this.isThirdSignal) {
-          alert('2')
           this.getChannelInfo()
           return
         }
@@ -915,7 +922,6 @@ export default {
             this.contrloType = 'ring'
           }
         }
-      })
     },
     getTempCrossInfo (res) {
       this.crossInfo = res.data.data.param
@@ -938,7 +944,6 @@ export default {
         this.drawDefaultPhaseIcon()
       }
       if ((this.isVipRoute && this.isThirdSignal) || (this.isVipRoute && this.isRcp)) {
-        alert('3')
         this.LanePhaseData = this.CrossDiagramMgr.compare(this.LanePhaseData, this.overlapLanePhaseData, 'type', 'nostatus')
         // console.log(this.LanePhaseData)
         this.sidewalkPhaseData = this.CrossDiagramMgr.compare(this.sidewalkPhaseData, this.overlapsidewalkPhaseData, 'pedtype', 'nostatus')
@@ -1370,7 +1375,6 @@ export default {
       const targetIds = [4, 8, 12, 16] // 掉头相位后画
       this.LanePhaseData = this.LanePhaseData.filter(item => !targetIds.includes(item.id)).concat(this.LanePhaseData.filter(item => targetIds.includes(item.id)))
       if (!this.isThirdSignal && this.isVipRoute && !this.isRcp) {
-        alert('4')
         await this.getConflictList()
         this.handleClickedPhase()
         this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
@@ -1421,7 +1425,7 @@ export default {
       this.EmitAllChoosedDirection(curClickedPhase)
     },
     handleClickedPedPhase () {
-      if (!this.isThirdSignal) {
+      if (!this.isThirdSignal && !this.isRcp) {
         this.inneChoosedPedDirection = this.inneChoosedPedDirection.filter(dir => this.pedConflictList.indexOf(dir) === -1)
       }
       // 排他

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

@@ -191,6 +191,11 @@ export default {
         this.reset = true
       })
     },
+    refreshArrow () {
+      this.$nextTick(() => {
+        this.$refs.crossDiagram.refreshArrow()
+      })
+    },
     getParentSize () {
       // 获取最外层dom尺寸，适配准备
       var _this = this

package/src/views/customchannelization.vue

@@ -2,6 +2,7 @@
 <!-- 渠化绘制demo -->
   <div style="height: 100%;">
       <custom-channelization
+        :tscParam="tscParams"
         :AgentId="agentId" />
       <!-- <CustomChannelization
         :AgentId="agentId"
@@ -16,7 +17,7 @@ export default {
   name: 'custom-channelization-demo',
   data () {
     return {
-      agentId: '13000000000000000003',
+      agentId: '16005',
       tscParams: {}
     }
   },
@@ -39,7 +40,7 @@ export default {
   created () {
   },
   mounted () {
-    // this.getIntersectionInfo()
+    this.getIntersectionInfo()
   },
   destroyed () {
   }

package/src/views/intersection.vue

@@ -11,7 +11,7 @@
     <h2>基础路口图方向显示、选择组件</h2>
     <!-- channelType是按通道显示方向；不传按相位显示方向 -->
     <!-- clickMode是否开启方向选择功能 -->
-    <el-button @click="clear"></el-button>
+    <el-button @click="clear" style="color: #fff;">清空</el-button>
     <!-- <custom-intersection-base-map
       ref="intersectionMap3"
       clickMode
@@ -51,21 +51,15 @@
             :choosedPedDirection="[3,4]"
             :roadDirection="roadDirection" /> -->
       <el-button @click="refresh">刷新特勤路口底图</el-button>
+      <el-button @click="changeChoosedDir" style="color: #fff;">重置所选方向</el-button>
       <!-- <intersection-direction-selection
             ref="selectMap"
-            :agentId="16005"
+            agentId="16005"
             :clickMode="false"
-            :choosedDirection="[14,6,13,8]"
-            :choosedPedDirection="[1]"
+            :choosedDirection="choosedDirection"
+            :choosedPedDirection="choosedPedDirection"
             :roadDirection="roadDirection" /> -->
 
-      <intersection-direction-selection
-                  agentId="16005"
-                  :clickMode="false"
-                  roadDirection="right"
-                  :choosedDirection="[]"
-                  :choosedPedDirection="[]" />
-
       <!-- <button @click="lockPhase" >相位锁定</button><br/>
       <button @click="unlockPhase" >解锁相位</button><br/>
       <button @click="changeControlPattern" >改变控制方案</button><br/>
@@ -128,7 +122,7 @@
       <!-- <Stages :stagesList="stagesList"
               :currentStage="currentStage"
               @onSelectStages="onSelectStages"></Stages> -->
-          <div style="height: 100px;">
+          <!-- <div style="height: 100px;">
             <PhaseLegend :crossStatusData="tscControlData"
               :phaseList="phaseList"
               showDataType="phase"
@@ -143,18 +137,22 @@
               :showStyle="{top:'2PX',left:'9px'}"
               :showStyles="{top:'0PX',left:'7px'}"
               ></PhaseLegend>
-          </div>
+          </div> -->
 
-      <!-- <h2 style="color: #fff;">渠化图</h2>
-      <channelization-with-interface
+      <h2 style="color: #fff;">渠化图</h2>
+      <!-- <channelization-with-interface
         ref="channelization"
         :AgentId="agentId"
         :reqUrl="reqUrl"
         :Token="Token"
         @getTscControl="getTscControl"
-        @onPhaseChange="onPhaseChange"/>
+        @onPhaseChange="onPhaseChange"/> -->
+      <channelization
+            AgentId="16005"
+            :crossStatusData="crossStatusData2"
+            :detectorStatusData="{}" />
 
-    <h2 style="color: #fff;">流量统计渠化路口图</h2>
+    <!-- <h2 style="color: #fff;">流量统计渠化路口图</h2>
       <channelization-flow-statistic
       :AgentId="agentId"
       :phasesStatisticsList="phasesStatisticsList"
@@ -183,12 +181,12 @@ export default {
     return {
       roadDirection: 'right',
       // reqUrl: 'http://192.168.13.103:10003/openatc',
-      agentId: '1059',
+      agentId: '16005',
       // agentId: '13013',
       // agentId: '12007_390',
       // agentId: '12014',
       reqUrl: 'http://192.168.13.103:10003/openatc',
-      Token: 'eyJraWQiOiIxNzYwNjc3OTM3NjY2IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTc2MDY4MTUzNywiaWF0IjoxNzYwNjc0MzM3fQ.QaiAkg_IxWP9rvcmL22GrHU3BTjw9x8S8oMMpolKFZo',
+      Token: 'eyJraWQiOiIxNzYxMTgyODkxNDMzIiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTc2MTE4NjQ4OSwiaWF0IjoxNzYxMTc5Mjg5fQ.UHfHzNNby-Y-kee-83_4KEjESDIf4InAvmYSmVmLvk4',
       // agentId: '30003-352',
       // reqUrl: 'https://kints-dev.devdolphin.com/openatc',
       // Token: 'eyJraWQiOiIxNjUwNTA5MDI2ODk2IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJ4aWFvbWluZyIsImV4cCI6MTczNjkwOTAyNiwiaWF0IjoxNjUwNTA5MDI2fQ.-s4T-uMRmB2zf9yer87USKQXLY1a12Zq5lCOnqjNmfA',
@@ -348,7 +346,134 @@ export default {
       tscControlData: {},
       phaseList: [],
       choosedDirection: [1, 5],
-      choosedPedDirection: [3]
+      choosedPedDirection: [3],
+      crossStatusData2: {
+  'phase': [
+    {
+      'id': 1,
+      'type': 3,
+      'pedtype': 3
+    },
+    {
+      'id': 2,
+      'type': 1,
+      'pedtype': 1
+    },
+    {
+      'id': 3,
+      'type': 1,
+      'pedtype': 1
+    },
+    {
+      'id': 4,
+      'type': 1,
+      'pedtype': 1
+    }
+  ],
+  'mode': 0,
+  'control': 5,
+  'patternid': 2,
+  'cycle': 107,
+  'patternoffset': 0,
+  'stages': [
+    [
+      1
+    ],
+    [
+      2
+    ],
+    [
+      3
+    ],
+    [
+      4
+    ],
+    [
+      1
+    ],
+    [
+      2
+    ],
+    [
+      3
+    ],
+    [
+      4
+    ],
+    [
+      1
+    ],
+    [
+      2
+    ],
+    [
+      3
+    ],
+    [
+      4
+    ],
+    [
+      1
+    ],
+    [
+      2
+    ],
+    [
+      3
+    ],
+    [
+      4
+    ]
+  ],
+  'stages_len': [
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0
+  ],
+  'stages_seq': [
+    1,
+    2,
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    10,
+    11,
+    12,
+    13,
+    14,
+    15,
+    16
+  ],
+  'current_stage': 1,
+  'current_stagecd': 0,
+  'offset': 0,
+  'current_phase': [
+    1
+  ],
+  'next_phase': [
+    2
+  ],
+  'rings': [],
+  'curTime': 43,
+  'syncTime': 64
+}
     }
   },
   components: {
@@ -481,6 +606,11 @@ export default {
       this.choosedDirection = []
       this.choosedPedDirection = []
       this.$refs.intersectionMap3.resetCrossDiagram()
+    },
+    changeChoosedDir () {
+      this.choosedDirection = [2]
+      this.choosedPedDirection = [4]
+      this.$refs.selectMap.refreshArrow()
     }
   },
   created () {