openatc-components 0.5.9 → 0.5.11

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

@@ -0,0 +1,323 @@
+<template>
+  <el-select
+    v-model="value"
+    :multiple="multiple"
+    :disabled="disabled"
+    :size="size"
+    collapse-tags
+    :clearable="clearable"
+    filterable
+    :placeholder="placeholder"
+    @change="onChange"
+    @focus="onFocus"
+  >
+    <el-option
+      v-for="(item, index) in Options"
+      :key="index"
+      :label="item.label"
+      :value="item.value"
+    >
+      <div class="single-model" @click="selectStages(item.value)" >
+        <div>
+          <xdrdirselector Width="60px" Height="60px" :showlist="item.item"></xdrdirselector>
+        </div>
+        <div>
+          <span style="float: right; color: #8492a6; font-size: 13px">{{ formatLabel(item.label) }}</span>
+        </div>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+<script>
+import { getIntersectionInfo } from '../../../api/template'
+// import { uploadGBTscParams } from '../../api/paramGB'
+import { getMessageByCode } from '../../../utils/responseMessage'
+import xdrdirselector from '../../components/XRDDirSelector'
+import PhaseDataModel from '../../components/IntersectionMap/crossDirection/utils.js'
+import { getDirName } from './utils.js'
+import { getTheme } from '../../../utils/auth'
+
+export default {
+  name: 'SelectCrossPhase',
+  components: {
+    xdrdirselector
+  },
+  props: {
+    size: {
+      type: String,
+      default: ''
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    bizType: {
+      type: String,
+      default: ''
+    },
+    agentid: {
+      type: String,
+      default: '10501'
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    defaultValue: {
+      type: Number,
+      default: -1
+    }
+  },
+  data () {
+    return {
+      isMock: false,
+      list: [],
+      value: [],
+      Options: [],
+      phaseList: [],
+      sidewalkPhaseData: []
+    }
+  },
+  watch: {
+    agentid (val) {
+      this.value = ''
+      this.Options = []
+      // this.onLoad()
+    }
+  },
+  created () {
+    this.onLoad()
+    this.PhaseDataModel = new PhaseDataModel()
+    // this.CrossDiagramMgr = new CrossDiagramMgr()
+    if (!this.placeholder) {
+      this.placeholder = this.$t('openatccomponents.phase.stage')
+    }
+  },
+  methods: {
+    formatLabel (label) {
+      let res = label
+      if (label && label.length > 11) {
+        res = label.substring(0, 8) + '...'
+      }
+      return res
+    },
+    onFocus () {
+      if (!this.Options || this.Options.length === 0) {
+        this.onLoad()
+      }
+    },
+    onLoad () {
+      this.initData()
+    },
+    setOption (list) {
+      let color = getTheme() === 'light' ? '#1E1E1E' : '#F1F3F4'
+      this.Options = list.map((item, index) => {
+        let dirArr = []
+        for (let rec of item) {
+          const peddirection = (rec.peddirection && this.getPed(rec.peddirection)) || []
+          let recd = {
+            id: rec.id,
+            peddirection: peddirection,
+            color: color
+          }
+          dirArr.push(recd)
+        }
+        let nameArr = getDirName(dirArr)
+        let name = ''
+        nameArr = nameArr.map(record => this.$t(record))
+        name = nameArr.join(',')
+        const _index = index + 1
+        name = this.$t('openatccomponents.phase.stage') + _index + ' ' + name
+        // console.log(nameArr, 'nameArr')
+        const res = {
+          label: name,
+          item: dirArr,
+          value: _index
+        }
+        return res
+      })
+    },
+    onChange (value) {
+      let option = this.Options.filter(item => item.value === value)[0]
+      this.$emit('onChange', value, option, this.agentid, this.bizType)
+    },
+    selectStages (value) {
+      this.$emit('selectStages', value)
+    },
+    async initData () {
+      let agentId = this.agentid
+      let phaseList = []
+      let stageList = []
+      await getIntersectionInfo(agentId).then(data => {
+        let res = data.data
+        if (this.isMock) {
+          // mockData
+          // let mockData = require('./mock/gb_features.json')
+          // console.log('mockData', mockData)
+          // res = mockData
+        }
+        if (!res.success) {
+          let parrenterror = getMessageByCode(data.data.code, this.$i18n.locale)
+          if (data.data.data) {
+            // 子类型错误
+            let childErrorCode = data.data.data.errorCode
+            if (childErrorCode) {
+              let childerror = getMessageByCode(data.data.data.errorCode, this.$i18n.locale)
+              this.$message.error(parrenterror + ',' + childerror)
+            }
+          } else {
+            this.$message.error(parrenterror)
+          }
+          return
+        }
+        phaseList = res.data.param.Phase.PhaseConfig.filter(item => item.direction && item.direction.length > 0)
+        stageList = res.data.param.Stage.StageConfig.filter(item => item.IncludedPhase && item.IncludedPhase.length > 0)
+        this.phaseList = phaseList
+        this.$emit('getRcpTscParams', res.data.param)
+        this.handleStageData(stageList, phaseList) // 处理阶段（驻留）stage数据
+      })
+    },
+    // handleStageData (data) {
+    //   if (!data) return
+    //   let peddirections = this.getPed(data)
+    //   let stagesTemp = []
+    //   let tempList = []
+    //   for (let stg of data) {
+    //     let directionList = []
+    //     let currPhase = this.phaseList.filter((item) => {
+    //       return item.id === stg
+    //     })[0]
+    //     if (currPhase !== undefined) {
+    //       directionList.push(...currPhase.direction)
+    //       directionList = Array.from(new Set(directionList))
+    //     }
+    //     if (directionList.length === 0) {
+    //       tempList.push({
+    //         id: '',
+    //         color: '#454545',
+    //         peddirection: peddirections
+    //       })
+    //     } else {
+    //       tempList = directionList.map(dir => ({
+    //         id: dir,
+    //         color: '#454545',
+    //         peddirection: peddirections
+    //       }))
+    //     }
+    //     let newTemp = tempList.filter(item => item.id !== '')
+    //     stagesTemp.push(...newTemp)
+    //   }
+    //   return stagesTemp
+    // },
+    getPed (data) {
+      let ped = []
+      let peddirections = []
+      for (let walk of this.sidewalkPhaseData) {
+        for (let ped of data) {
+          let objs = {}
+          objs.name = walk.name
+          objs.id = walk.id
+          if (ped === walk.id) {
+            peddirections.push(objs)
+            peddirections = Array.from(new Set(peddirections))
+          }
+        }
+      }
+      ped.push(...peddirections)
+      return ped
+    },
+    getPedPhasePos (phaseList) {
+      // 行人相位信息
+      this.sidewalkPhaseData = []
+      console.log(phaseList, 'this.this.phaseList')
+      phaseList.forEach((ele, i) => {
+        if (ele.peddirection) {
+          ele.peddirection.forEach((dir, index) => {
+          // 行人相位
+            if (this.PhaseDataModel.getSidePos(dir)) {
+              const spd = {
+                // key: this.CrossDiagramMgr.getUniqueKey('pedphase'),
+                phaseid: ele.Index, // 相位id，用于对应相位状态
+                id: dir,
+                name: this.PhaseDataModel.getSidePos(dir).name
+              }
+              this.sidewalkPhaseData.push(spd)
+            }
+          })
+        }
+      })
+      return this.sidewalkPhaseData
+    },
+    handleStageData (_stageList, _phaseList) {
+      console.log('handleStageData', _stageList, _phaseList)
+      this.stagesList = []
+      let stages = _stageList
+      for (let stageItem of stages) {
+        const stage = stageItem.IncludedPhase
+        let tempList = []
+        let directionList = []
+        let pedestrianList = []
+        for (let stg of stage) {
+          let currPhase = _phaseList.filter((item) => {
+            return item.Index === stg
+          })[0]
+          if (!currPhase || !currPhase.direction) {
+            continue
+          } else {
+            directionList = [...(currPhase.direction || []), ...directionList]
+            pedestrianList = [...(currPhase.peddirection || []), ...pedestrianList]
+          }
+          // directionList = [...currPhase.direction, ...directionList]
+        }
+        directionList = [...new Set(directionList)]
+        pedestrianList = [...new Set(pedestrianList)]
+        tempList = directionList.map((dir, _index) => ({
+          id: dir,
+          color: '#606266',
+          peddirection: pedestrianList || []
+        }))
+        this.stagesList.push(tempList)
+      }
+      this.list = this.stagesList
+      this.getPedPhasePos(_phaseList)
+      this.setOption(this.list)
+      if (this.defaultValue !== -1) {
+        this.init(this.defaultValue)
+      }
+    },
+    init (val) {
+      let target = val
+      if (this.multiple) {
+        target = [val]
+      }
+      this.value = target
+    },
+    getNameById (id) {
+      let res = ''
+      for (const item of this.Options) {
+        if (id === item.agentid) {
+          res = item.name
+          break
+        }
+      }
+      return res
+    }
+  }
+}
+</script>
+<style scoped>
+.single-model {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

package/src/kisscomps/components/SelectGBCrossStage/mock/gb_features.json

@@ -0,0 +1,212 @@
+{
+  "data": {
+    "agentid": "15005",
+    "thirdpartyid": "0",
+    "operation": "get-response",
+    "infotype": "rcp/message",
+    "data": {
+      "Phase": {
+        "PhaseConfig": [
+          {
+            "Index": 1,
+            "ChannelIncluded": [
+              1
+            ],
+			"direction": [1],
+			"peddirection": [1,2]
+          },
+          {
+            "Index": 2,
+            "ChannelIncluded": [
+              2
+            ],
+			"direction": [2],
+			"peddirection": [1,2]
+          },
+          {
+            "Index": 3,
+            "ChannelIncluded": [
+              3
+            ],
+			"direction": [1],
+			"peddirection": [1,2]
+          },
+          {
+            "Index": 4,
+            "ChannelIncluded": [
+              4
+            ],
+			"direction": [3],
+			"peddirection": [1,2]
+          },
+          {
+            "Index": 5,
+            "ChannelIncluded": [
+              5
+            ],
+			"direction": [5],
+			"peddirection": [1,2]
+          },
+          {
+            "Index": 6,
+            "ChannelIncluded": [
+              6
+            ],
+			"direction": [6],
+			"peddirection": [1,2]
+          },
+          {
+            "Index": 7,
+            "ChannelIncluded": [
+              7
+            ],
+			"direction": [7],
+			"peddirection": [1,2]
+          },
+          {
+            "Index": 8,
+            "ChannelIncluded": [],
+            "PhaseRequest": []
+          },
+          {
+            "Index": 9,
+            "ChannelIncluded": [],
+			"direction": [9],
+			"peddirection": [1,2]
+          },
+          {
+            "Index": 10,
+            "ChannelIncluded": [],
+			"direction": [13],
+			"peddirection": [8]
+          },
+          {
+            "Index": 11,
+            "ChannelIncluded": [],
+			"direction": [11],
+			"peddirection": [1,2]
+          },
+          {
+            "Index": 12,
+            "ChannelIncluded": [],
+			"direction": [12],
+			"peddirection": [7]
+          },
+          {
+            "Index": 13,
+            "ChannelIncluded": [],
+			"direction": [13],
+			"peddirection": [1,2]
+          },
+          {
+            "Index": 14,
+            "ChannelIncluded": [],
+			"direction": [14],
+			"peddirection": [1,2]
+          },
+          {
+            "Index": 15,
+            "ChannelIncluded": [],
+			"direction": [16],
+			"peddirection": [1,2]
+          },
+          {
+            "Index": 16,
+            "ChannelIncluded": [],
+			"direction": [16],
+			"peddirection": [1,2]
+          }
+        ]
+      },
+      "Stage": {
+        "StageConfig": [
+          {
+            "Index": 1,
+            "IncludedPhase": [
+              4,
+              9
+            ]
+			},
+          {
+            "Index": 2,
+            "IncludedPhase": [
+              1,
+              2
+            ]
+			},
+          {
+            "Index": 3,
+            "IncludedPhase": [
+              4,
+              9
+            ]
+			},
+          {
+            "Index": 4,
+            "IncludedPhase": [
+              4
+            ]
+			},
+          {
+            "Index": 5,
+            "IncludedPhase": [
+              1,
+              3
+            ]}
+        ]
+      },
+      "StagePattern": {
+        "StagePatternConfig": [
+          {
+            "Index": 1,
+            "IntersectionIndex": 133,
+            "Cycle": 120,
+            "CoordinationStageIndex": 0,
+            "Offset": 0,
+            "StageChain": [
+              1,
+              2,
+              3,
+              4,
+              5
+            ],
+            "StageTimeChain": [
+              20,
+              20,
+              20,
+              30,
+              30
+            ],
+            "StageTypeChain": [
+              [
+                1,
+                "Type_Fix"
+              ],
+              [
+                2,
+                "Type_Fix"
+              ],
+              [
+                3,
+                "Type_Fix"
+              ],
+              [
+                4,
+                "Type_Fix"
+              ],
+              [
+                5,
+                "Type_Fix"
+              ]
+            ]
+          }
+        ]
+      }
+    },
+    "FrameID": 25
+  },
+  "success": true,
+  "code": "0",
+  "message": "Success",
+  "timestamp": 1759049616980
+}

package/src/kisscomps/components/SelectGBCrossStage/utils.js

@@ -0,0 +1,142 @@
+/**
+ * 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.
+ **/
+// import Edgebase from '@openatc/edgebase-front'
+let images = [{
+  id: 1,
+  // name: 'East-Straight',
+  name: 'openatccomponents.phase.es',
+  // img: require('./images/East-Straight.svg'),
+  class: 'iconfont icon-icon-test2'
+},
+{
+  id: 2,
+  // name: 'East-Left',
+  name: 'openatccomponents.phase.el',
+  // img: require('./images/East-Left.svg'),
+  class: 'iconfont icon-icon-test4'
+},
+{
+  id: 3,
+  // name: 'East-Right',
+  name: 'openatccomponents.phase.er',
+  // img: require('./images/East-Right.svg'),
+  class: 'iconfont icon-icon-test3'
+},
+{
+  id: 4,
+  // name: 'East-Back',
+  name: 'openatccomponents.phase.eb',
+  // img: require('./images/East-Back.svg'),
+  class: 'iconfont icon-icon-test6'
+},
+{
+  id: 5,
+  // name: 'West-Straight',
+  name: 'openatccomponents.phase.ws',
+  // img: require('./images/West-Straight.svg'),
+  class: 'iconfont icon-icon-test5'
+},
+{
+  id: 6,
+  // name: 'West-Left',
+  name: 'openatccomponents.phase.wl',
+  // img: require('./images/West-Left.svg'),
+  class: 'iconfont icon-icon-test7'
+},
+{
+  id: 7,
+  // name: 'West-Right',
+  name: 'openatccomponents.phase.wr',
+  // img: require('./images/West-Right.svg'),
+  class: 'iconfont icon-icon-test9'
+},
+{
+  id: 8,
+  // name: 'West-Back',
+  name: 'openatccomponents.phase.wb',
+  // img: require('./images/West-Back.svg'),
+  class: 'iconfont icon-icon-test8'
+},
+{
+  id: 9,
+  // name: 'North-Straight',
+  name: 'openatccomponents.phase.ns',
+  // img: require('./images/North-Straight.svg'),
+  class: 'iconfont icon-icon-test10'
+},
+{
+  id: 10,
+  // name: 'North-Left',
+  name: 'openatccomponents.phase.nl',
+  // img: require('./images/North-Left.svg'),
+  class: 'iconfont icon-icon-test12'
+},
+{
+  id: 11,
+  // name: 'North-Right',
+  name: 'openatccomponents.phase.nr',
+  // img: require('./images/North-Right.svg'),
+  class: 'iconfont icon-icon-test13'
+},
+{
+  id: 12,
+  // name: 'North-Back',
+  name: 'openatccomponents.phase.nb',
+  // img: require('./images/North-Back.svg'),
+  class: 'iconfont icon-icon-test11'
+},
+{
+  id: 13,
+  // name: 'South-Straight',
+  name: 'openatccomponents.phase.ss',
+  // img: require('./images/South-Straight.svg'),
+  class: 'iconfont icon-icon-test15'
+},
+{
+  id: 14,
+  // name: 'South-Left',
+  name: 'openatccomponents.phase.sl',
+  // img: require('./images/South-Left.svg'),
+  class: 'iconfont icon-icon-test14'
+},
+{
+  id: 15,
+  // name: 'South-Right',
+  name: 'openatccomponents.phase.sr',
+  // img: require('./images/South-Right.svg'),
+  class: 'iconfont icon-icon-test'
+},
+{
+  id: 16,
+  // name: 'South-Back',
+  name: 'openatccomponents.phase.sb',
+  // img: require('./images/South-Back.svg'),
+  class: 'iconfont icon-icon-test1'
+}]
+
+const getDirName = (arr) => {
+  let res = ''
+  let nameArr = []
+  for (let item of arr) {
+    let id = item.id
+    for (let img of images) {
+      if (id === img.id) {
+        let name = img.name
+        nameArr.push(name)
+      }
+    }
+  }
+  res = nameArr
+  return res
+}
+
+export { getDirName }