openatc-components 0.3.17 → 0.3.19

package/config/index.js

@@ -16,7 +16,7 @@ module.exports = {
         // target:  'http://192.168.14.2:8012/openatc',//'http://172.16.239.139:8080/',//设置你调用的接口域名和端口号
         // target:  'https://dolphin-test.kedacom.com/openatc',
         // target:  'http://192.168.13.105:11003/openatc',
-        target:  'http://192.168.14.51:8012/openatc',
+        target:  'http://192.168.13.103:10003/openatc',
         // target: 'http://192.168.15.11:8012/openatc',
         // target:  'http://192.168.13.103:10003/openatc',
         // target:  'http://192.168.13.103:9999',//'http://172.16.239.139:8080/',//设置你调用的接口域名和端口号

package/package/kisscomps/components/ChannelRealtimeIntersection/ChannelRealtimeIntersection.vue

@@ -19,12 +19,15 @@
       :crossStatusData="crossStatusData"
       :agentId="agentId"
       :graphicMode="true"
-      :roadDirection="roadDirection"/>
+      :roadDirection="roadDirection"
+      :isThirdSignal="isThirdSignal"/>
 </div>
 </template>
 
 <script>
 import IntersectionMap from '../IntersectionMap/intersectionmap'
+import { queryDevice } from '../../../api/control.js'
+import { getMessageByCode } from '../../../utils/responseMessage.js'
 
 export default {
   name: 'channel-realtime-intersection',
@@ -77,19 +80,35 @@ export default {
   data () {
     return {
       reset: true,
-      crossStatusData: {}
+      crossStatusData: {},
+      isThirdSignal: false
     }
   },
   methods: {
-
+    getPlatform () {
+      queryDevice(this.agentId).then(res => {
+        if (!res.data.success) {
+          let commomMsg = this.$t('openatc.overview.signalID') + ': ' + this.AgentId
+          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale) + ' - ' + commomMsg)
+          return
+        }
+        this.platform = res.data.data.platform
+        console.log(this.platform)
+        if (this.platform !== '' && this.platform !== 'OpenATC') {
+          this.isThirdSignal = true
+        } else {
+          this.isThirdSignal = false
+        }
+        if (this.thirdSignal) {
+          this.isThirdSignal = this.thirdSignal
+        }
+      })
+    }
   },
   created () {
   },
   mounted () {
-    // setTimeout(() => {
-    // 模拟
-    //   this.crossStatusData = JSON.parse(JSON.stringify(this.channelRealtimeStatusData))
-    // }, 3000)
+    this.getPlatform()
     this.crossStatusData = JSON.parse(JSON.stringify(this.channelRealtimeStatusData))
   },
   destroyed () {

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

@@ -287,64 +287,15 @@ export default {
         this.statusData = JSON.parse(JSON.stringify(val))
         // 默认显示相位数据（包括黄闪、全红、关灯状态下，或者匝道，均不做比对跟随相位的处理）
         this.drawDefaultPhaseIcon()
-
-        if (this.channelType) {
-          // 通道路口图状态数据
+        if (this.channelType && !this.isThirdSignal) {
+          // 通道路口图状态数据（实时通道展示排除第三方信号机，第三方信号机还是按模版路口一样展示相位状态）
           this.channelStatusList = val.channellamp
           this.createChannelStatusMap()
           this.getChannelPhaseStatus()
           this.getChannelPedStatus()
           return
         }
-
-        // 模版路口图状态数据
-        this.phaseStatusList = val.phase
-        this.overlapStatusList = val.overlap
-        if (val.control === 1 || val.control === 2 || val.control === 3) {
-          // 黄闪、全红、关灯属于特殊控制，优先级最高，直接改变灯色，不用判断phase里的type，也不需要考虑跟随相位的灯色优先级
-          if (val.control === 1) {
-            this.getYellowFlashColor()
-          } else {
-            this.SpecialControl(val)
-          }
-          this.isHasPhase = false
-          return
-        }
-        if (!val.phase && !this.overlapStatusList) {
-          // 非特殊控制，相位和跟随相位不存在的情况下，灯色恢复默认
-          this.handleSpecialControlStatus('默认')
-          this.isHasPhase = false
-          return
-        }
-        if (val.control === 16) {
-          // 方向锁定时，相位状态显示与通道无关，显示接口返回的红灯会有歧义，此处特殊处理显示默认白色
-          this.handleSpecialControlStatus('方向锁定')
-          this.isHasPhase = false
-          return
-        }
-        this.curPhase = val.current_phase
-        this.isHasPhase = true
-        this.createPhaseStatusMap()
-        // 正常情况下，获取车道相位、车道跟随相位、相位倒计时、行人相位、行人跟随相位 的状态
-        this.getPhaseStatus()
-        this.getOverlapPhaseStatus()
-        this.getCurPhaseCountdown()
-        this.getBusPhaseStatus()
-        if (this.mainType === '100' || this.mainType === '101' || this.mainType === '104') {
-          // 城市道路和路段行人过街才显示人行道状态
-          this.getpedStatus()
-          this.getOverlapPedStatus()
-          // 算法对比行人相位与行人跟随相位的状态
-          this.comparePedStatus()
-          // 算法对比车道相位与车道跟随相位的状态
-          this.comparePhaseStatus()
-        }
-        // console.log('this.phaseStatusMap 相位状态映射', this.phaseStatusMap)
-        // console.log('LanePhaseData 车道相位', this.LanePhaseData)
-        // console.log('sidewalkPhaseData 行人相位', this.sidewalkPhaseData)
-        // console.log('overlapPhaseStatusMap 跟随相位状态映射', this.overlapPhaseStatusMap)
-        // console.log('overlapLanePhaseData 车道跟随相位', this.overlapLanePhaseData)
-        // console.log('this.overlapsidewalkPhaseData 行人跟随相位', this.overlapsidewalkPhaseData)
+        this.handleTempCrossStatus(val)
       },
       // 深度观察监听
       deep: true
@@ -414,6 +365,56 @@ export default {
     }
   },
   methods: {
+    handleTempCrossStatus (val) {
+      // 模版路口图状态数据
+      this.phaseStatusList = val.phase
+      this.overlapStatusList = val.overlap
+      if (val.control === 1 || val.control === 2 || val.control === 3) {
+        // 黄闪、全红、关灯属于特殊控制，优先级最高，直接改变灯色，不用判断phase里的type，也不需要考虑跟随相位的灯色优先级
+        if (val.control === 1) {
+          this.getYellowFlashColor()
+        } else {
+          this.SpecialControl(val)
+        }
+        this.isHasPhase = false
+        return
+      }
+      if (!val.phase && !this.overlapStatusList) {
+        // 非特殊控制，相位和跟随相位不存在的情况下，灯色恢复默认
+        this.handleSpecialControlStatus('默认')
+        this.isHasPhase = false
+        return
+      }
+      if (val.control === 16) {
+        // 方向锁定时，相位状态显示与通道无关，显示接口返回的红灯会有歧义，此处特殊处理显示默认白色
+        this.handleSpecialControlStatus('方向锁定')
+        this.isHasPhase = false
+        return
+      }
+      this.curPhase = val.current_phase
+      this.isHasPhase = true
+      this.createPhaseStatusMap()
+      // 正常情况下，获取车道相位、车道跟随相位、相位倒计时、行人相位、行人跟随相位 的状态
+      this.getPhaseStatus()
+      this.getOverlapPhaseStatus()
+      this.getCurPhaseCountdown()
+      this.getBusPhaseStatus()
+      if (this.mainType === '100' || this.mainType === '101' || this.mainType === '104') {
+        // 城市道路和路段行人过街才显示人行道状态
+        this.getpedStatus()
+        this.getOverlapPedStatus()
+        // 算法对比行人相位与行人跟随相位的状态
+        this.comparePedStatus()
+        // 算法对比车道相位与车道跟随相位的状态
+        this.comparePhaseStatus()
+      }
+      // console.log('this.phaseStatusMap 相位状态映射', this.phaseStatusMap)
+      // console.log('LanePhaseData 车道相位', this.LanePhaseData)
+      // console.log('sidewalkPhaseData 行人相位', this.sidewalkPhaseData)
+      // console.log('overlapPhaseStatusMap 跟随相位状态映射', this.overlapPhaseStatusMap)
+      // console.log('overlapLanePhaseData 车道跟随相位', this.overlapLanePhaseData)
+      // console.log('this.overlapsidewalkPhaseData 行人跟随相位', this.overlapsidewalkPhaseData)
+    },
     init () {
       this.CrossDiagramMgr = new CrossDiagramMgr()
       this.getRoadDirection()
@@ -729,40 +730,43 @@ export default {
           this.getChannelInfo()
           return
         }
-        if (this.channelType) {
+        if (this.channelType && !this.isThirdSignal) {
           this.getChannelInfo()
           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()
-          this.getOverlapPhasePos()
-          this.getPedPhasePos()
-          this.getOverlapPedPhasePos()
-          if (!this.isVipRoute) {
-            this.getBusPos()
-          }
-        }
-        if (!this.isVipRoute && this.mainType === '103') {
-          // 获取匝道道路的主路和支路的相位坐标
-          this.getRampPhasePos()
-        }
+        this.getTempCrossInfo(res)
+      })
+    },
+    getTempCrossInfo (res) {
+      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()
+        this.getOverlapPhasePos()
+        this.getPedPhasePos()
+        this.getOverlapPedPhasePos()
         if (!this.isVipRoute) {
-          this.drawDefaultPhaseIcon()
+          this.getBusPos()
         }
-        if (this.isVipRoute && this.isThirdSignal) {
-          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')
-          let allDir = this.LanePhaseData.map(ele => ele.id)
-          let allPedDir = this.sidewalkPhaseData.map(ele => ele.id)
-          this.inneChoosedDirection = this.choosedDirection.filter(dir => allDir.indexOf(dir) !== -1)
-          this.inneChoosedPedDirection = this.choosedPedDirection.filter(dir => allPedDir.indexOf(dir) !== -1)
-          this.drawPhaseIcon()
-        }
-      })
+      }
+      if (!this.isVipRoute && this.mainType === '103') {
+        // 获取匝道道路的主路和支路的相位坐标
+        this.getRampPhasePos()
+      }
+      if (!this.isVipRoute) {
+        this.drawDefaultPhaseIcon()
+      }
+      if (this.isVipRoute && this.isThirdSignal) {
+        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')
+        let allDir = this.LanePhaseData.map(ele => ele.id)
+        let allPedDir = this.sidewalkPhaseData.map(ele => ele.id)
+        this.inneChoosedDirection = this.choosedDirection.filter(dir => allDir.indexOf(dir) !== -1)
+        this.inneChoosedPedDirection = this.choosedPedDirection.filter(dir => allPedDir.indexOf(dir) !== -1)
+        this.drawPhaseIcon()
+      }
     },
     getBusPos () {
       // 公交相位信息

package/package/kisscomps/components/PhaseLegend/PhaseLegend.vue

@@ -0,0 +1,290 @@
+/**
+ * Copyright (c) 2020 kedacom
+ * OpenATC is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ * http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ **/
+<template>
+  <div id="intersection-phases" class="intersection-phases" :style="PhaseStyle">
+      <div>
+        <div style="width: 100%; height: auto;">
+          <div class="control-model" v-for="(item, index) in PhaseList" :key="index">
+            <div style="position:relative;" :style="{...singleStyle, 'backgroundColor': item[0].bgcolor}" class="single-model" @click="selectLegend(index + 1)" :class="currentStage == index + 1 ? 'single-model-select' : ''">
+              <xdr-dir-selector :Width="dirWidth" :Height="dirHeight" :Widths="dirWidths" :Heights="dirHeights" :Data="showStyle" :Datas="showStyles" :showlist="dirListSetTheme(item)"></xdr-dir-selector>
+              <div style="display:flex;flex-direction:row;justify-content:center;align-items:end;" :style="{height: StageHeight}">
+                <div class="current-stage-num" style="width:25%;" :style="{color: themeColor, fontSize: numSize}">{{item[0].phaseid}}</div>
+                <div style="width:70%;">
+                  <i class="iconfont icon-feijidongche" :style="{color: themeColor, fontSize: iconSize}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 6"></i>
+                  <i class="iconfont icon-lukouzhilu" :style="{color: themeColor2, fontSize: iconSize2}" style="font-size:16PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 1"></i>
+                  <i class="iconfont icon-BRT" :style="{color: themeColor2, fontSize: iconSize}" style="font-size:11PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 4"></i>
+                  <div style="transform:scale(0.65);margin-left:10PX">
+                    <i class="iconfont icon-xuxiangwei-xin" :style="{color: themeColor2}" style="font-size:5PX;color:#454545;" v-if="item[item.length-1].controltype === 99"></i>
+                  </div>
+                  <i class="iconfont icon-gongjiaoche" :style="{color: themeColor, fontSize: iconSize}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 3"></i>
+                  <i class="iconfont icon-youguidianche" :style="{color: themeColor, fontSize: iconSize}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 5"></i>
+                  <div v-if="presetStageIndex === index + 1" style="color:red;width:50px;position:absolute;right:0px;bottom:5px;font-size:11px;">{{presetText}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import RingDataModel from '../../../utils/RingDataModel.js'
+import { getTheme } from '../../../utils/auth.js'
+
+export default {
+  name: 'PhaseLegend',
+  props: {
+    isShowCurrentStage: {
+      type: Boolean,
+      default: true
+    },
+    crossStatusData: {
+      type: Object,
+      default: () => {}
+    },
+    phaseList: {
+      type: Array,
+      default: () => []
+    },
+    presetText: {
+      type: String,
+      default: '预置'
+    },
+    presetIndex: {
+      type: Number,
+      default: -1
+    },
+    preselectStages:{
+      type: Number,
+      default: -1
+    },
+    preselectModel:{
+      type: Number,
+      default: -1
+    },
+    presetPhaseId: {
+      type: Number,
+      default: -1
+    },
+    zoom: {
+      type: Number,
+      default: 1
+    },
+    StageWidth: { // 图的大小样式
+      type: String,
+      default: '70px'
+    },
+    StageHeight: {
+      type: String,
+      default: '80px'
+    },
+    dirWidth: {
+      type: String,
+      default: '75PX'
+    },
+    dirHeight: {
+      type: String,
+      default: '75PX'
+    },
+    dirWidths: {
+      type: String,
+      default: '65PX'
+    },
+    dirHeights: {
+      type: String,
+      default: '65PX'
+    },
+    showStyle: { // 图内部方向的位置
+      type: Object,
+      default: () => ({
+        top:'7PX',
+        left:'13px'
+      })
+    },
+    showStyles: { // 图内部人行道的位置
+      type: Object,
+      default: () => ({
+        top:'5PX',
+        left:'12px'
+      })
+    },
+    noClick: { // 图是否可以点击
+      type: Boolean,
+      default: false
+    },
+    showDataType: { // 图展示的数据类型：默认按阶段展示，如果传phase则按相位维度展示
+      type: String
+    }
+  },
+  data () {
+    return {
+      presetStageIndex: -1,
+      side: {key: 'pedphase1653818707546719', phaseid: 1, id: 1, name: '东人行横道'},
+      // PhaseList: [],
+      currentStage: -1,
+      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
+      themeColor2: getTheme() === 'light' ? '#454545' : '#fff'
+    };
+  },
+  computed: {
+    singleStyle () {
+      return {
+        width: this.StageWidth,
+        height: this.StageHeight
+      }
+    },
+    PhaseList () {
+      let list = []
+      if (this.crossStatusData && this.crossStatusData.stages && this.phaseList && this.phaseList.length > 0) {
+        let ringDataModel = new RingDataModel(this.crossStatusData, this.phaseList)
+        if (this.showDataType === 'phase') {
+          list = ringDataModel.getStageData('phase')
+        } else {
+          list = ringDataModel.getStageData()
+        }
+        if (this.isShowCurrentStage) {
+          this.currentStage = this.crossStatusData.current_stage
+        }
+      }
+      console.log(list,'list')
+      this.clickType(list, this.currentStage)
+      console.log(this.phaseList,'this.phaseList')
+      return list
+    },
+    PhaseStyle () {
+      return {
+        zoom: this.zoom
+      }
+    },
+    iconSize () {
+      const fontsize = parseInt(this.dirWidth.replace(/px$/, ""));
+      return fontsize / 75 * 11 + 'px'
+    },
+    iconSize2 () {
+      const fontsize = parseInt(this.dirWidth.replace(/px$/, ""));
+      return fontsize / 75 * 16 + 'px'
+    },
+    numSize () {
+      const fontsize = parseInt(this.dirWidth.replace(/px$/, ""));
+      const newfontsize = fontsize / 75 * 12
+      if (newfontsize < 10) {
+        return 10 + 'px'
+      } else {
+        return newfontsize + 'px'
+      }
+    }
+  },
+  watch: {
+    preselectStages: { 
+      handler: function (val, oldVal) {
+        if(this.preselectStages === -1 && this.preselectModel !== -1) {
+          this.currentStage = -1
+        }
+      },
+      // 深度观察监听
+      deep: true
+    },
+    preselectModel: { 
+      handler: function (val, oldVal) {
+        if(this.preselectStages === -1 && this.preselectModel !== -1) {
+          this.currentStage = -1
+        }
+      },
+      // 深度观察监听
+      deep: true
+    },
+    PhaseList: {
+      handler: function (val, oldVal) {
+        if (this.presetPhaseId > -1) {
+          this.presetStageIndex = this.getComputedPresetIndex()
+        } else {
+          this.presetStageIndex = this.presetIndex
+        }
+      },
+      // 深度观察监听
+      deep: true
+    }
+  },
+  methods: {
+    getComputedPresetIndex() {
+      let res = -1
+      for (let i = 0; i < this.PhaseList.length; i++) {
+        let stage = this.PhaseList[i]
+        for (let phase of stage) {
+          let phaseId = phase.id
+          if (phaseId === this.presetPhaseId) {
+            res = i
+            break
+          }
+        }
+        if (res > -1) {
+          res = res + 1
+          break
+        }
+      }
+      return res
+    },
+    selectLegend (value) {
+      if (this.noClick) return
+      if (this.isShowCurrentStage) {
+        return false
+      }
+      this.currentStage = value
+      this.$emit('onSelectStages', value)
+      this.clickType(this.PhaseList, value)
+    },
+    resetToDefaultThemeColor (List) {
+      for (let i = 0; i < List.length; i++) {
+        if (List[i].length) {
+          if (List[i][0].clicked) {
+            delete List[i][0].clicked
+          }
+          List[i][0].bgcolor = getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        } 
+      }
+    },
+    highlightThemeColor (List, index) {
+      for (let i = 0; i < List.length; i++) {
+        if (i === index) {
+          List[i][0].clicked = true
+          List[i][0].bgcolor = getTheme() === 'light' ? '#c1e0ff' : '#0082ac'
+        }
+      }
+    },
+    clickType (stagelist, value) {
+      this.resetToDefaultThemeColor(stagelist)
+      this.highlightThemeColor(stagelist, value - 1)
+    },
+    dirListSetTheme (list) {
+      let dirArr = []
+      let color = getTheme() === 'light' ? '#606266' : '#F1F3F4'
+      let pedColor = getTheme() === 'light' ? '#606266' : 'rgba(255, 255, 255, 0.6)'
+      for (let rec of list) {
+        let recd = {
+          ...rec,
+          color: color
+        }
+        dirArr.push(recd)
+        for(let i=0;i<rec.peddirection.length;i++) {
+          rec.peddirection[i].color = pedColor
+        }
+      }
+      return dirArr
+    }
+  },
+  mounted () {
+    this.resetToDefaultThemeColor(this.PhaseList)
+  }
+};
+</script>

package/package/kisscomps/components/PhaseLegend/index.js

@@ -0,0 +1,2 @@
+import PhaseLegend from './PhaseLegend.vue'
+export default PhaseLegend

package/package/kisscomps/index.js

@@ -31,6 +31,7 @@ import patternConfig from './components/patternConfig/index.vue'
 import XiaoKanBan from './components/XiaoKanBan/index.vue'
 import DirectionListConfiguration from './components/DirectionListConfiguration/index.js'
 import IntersectionDirectionSelection from './components/IntersectionDirectionSelection/index.js'
+import PhaseLegend from './components/PhaseLegend/index.js'
 import { setToken, setHost, setIsCheckPermission, setUserRoles, setPermissions } from '../utils/auth.js'
 import componentsGlobalParam from '../store/modules/globalParam'
 
@@ -71,7 +72,8 @@ const components = {
   XiaoKanBan,
   PhaseDirectionSelect,
   DirectionListConfiguration,
-  IntersectionDirectionSelection
+  IntersectionDirectionSelection,
+  PhaseLegend
 }
 
 const language = {