openatc-components 0.0.88 → 0.0.91

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

@@ -0,0 +1,157 @@
+/**
+ * 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 class="phase-associated-component">
+    <div class="phase-box" v-for="(item, index) in phaseList" :key="index">
+      <div class="single-phase" @click="selectPhase(index, item)" :class="preselectPhase == item.id ? 'single-phase-select' : ''">
+        <div class="ped-icon">
+          <PatternWalkSvg v-if="item.peddirection && item.peddirection.length" :showWalk="getshowped(item.peddirection)" Width="42" Height="44" />
+        </div>
+
+        <div class="phase-icon" v-if="item.direction">
+          <xdr-dir-selector Width="44px" Height="44px" :showlist="getShowlist(item.direction)" :roadDirection="roadDirection"></xdr-dir-selector>
+        </div>
+      </div>
+      <div class="single-phase-name">{{$t('openatccomponents.channelizationmap.phase') + item.id}}</div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+import PatternWalkSvg from '../../PatternWalkSvg/PatternWalkSvg'
+import PhaseDataModel from '../../IntersectionMap/crossDirection/utils.js'
+export default {
+  name: 'phase-associated-component',
+  components: {
+    PatternWalkSvg
+  },
+  data () {
+    return {
+      preselectPhase: -1,
+      id: 1,
+      isCanAdd: true
+    }
+  },
+  props: {
+    editData: {
+      type: Object
+    }
+  },
+  computed: {
+    ...mapState({
+      phaseList: state => state.globalParam.tscParam.phaseList,
+      roadDirection: state => state.globalParam.roadDirection
+    })
+  },
+  watch: {
+    phaseList: {
+      handler: function (list) {
+      },
+      deep: true
+    },
+    editData: {
+      handler: function (editobj) {
+        this.initChoosedPhase(editobj)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    initChoosedPhase (editobj) {
+      if (editobj.phaseid !== undefined && editobj.phasetype === 'phase') {
+        this.preselectPhase = editobj.phaseid
+      } else {
+        this.preselectPhase = -1
+      }
+    },
+    selectPhase (index, item) {
+      // 关联相位
+      this.preselectPhase = item.id
+      this.$emit('selectPhaseNew', this.preselectPhase, 'phase')
+    },
+    changeDirection (choosedicon) {
+
+    },
+    editDirPosToPhaseDireaciton (laneDirArr, lanePos) {
+      // 编辑的车道转向和方位，转化成相位的direction
+      let phaseDireacitonArr = laneDirArr.map(lanedir => {
+        if (lanePos === 1) {
+          // 东
+          return lanedir
+        }
+        if (lanePos === 2) {
+          // 西
+          return 4 * 1 + lanedir
+        }
+        if (lanePos === 3) {
+          // 南
+          return 4 * 3 + lanedir
+        }
+        if (lanePos === 4) {
+          // 北
+          return 4 * 2 + lanedir
+        }
+      })
+      return phaseDireacitonArr
+    },
+    getShowlist (direction) {
+      return direction.map(dir => {
+        return {
+          id: dir,
+          color: '#606266'
+        }
+      })
+    },
+    getshowped (peddirection) {
+      let peddirarr = peddirection.map(peddir => ({
+        id: peddir,
+        name: this.PhaseDataModel.getSidePos(peddir).name
+      }))
+      return peddirarr
+    },
+    handleDisassociatePhase (deletePhaseid) {
+      // 删除相位后，解除相位关联
+      this.$emit('handleDisassociatePhase', deletePhaseid)
+    },
+    getPedPhasePos () {
+    // 行人相位信息
+      this.sidewalkPhaseData = []
+      this.phaseList.forEach((ele, i) => {
+        if (ele.peddirection) {
+          ele.peddirection.forEach((dir, index) => {
+            // 行人相位
+            if (this.PhaseDataModel.getSidePos(dir)) {
+              this.sidewalkPhaseData.push({
+                key: this.CrossDiagramMgr.getUniqueKey('pedphase'),
+                phaseid: ele.id, // 相位id，用于对应相位状态
+                id: dir,
+                name: this.PhaseDataModel.getSidePos(dir).name
+              })
+            }
+          })
+        }
+      })
+      return this.sidewalkPhaseData
+    }
+  },
+  created () {
+    this.PhaseDataModel = new PhaseDataModel()
+  },
+  mounted () {
+    this.initChoosedPhase(this.editData)
+  },
+  destroyed () {
+  }
+}
+</script>
+<style lang="scss">
+</style>

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

@@ -0,0 +1,99 @@
+/**
+ * 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>
+<el-table :data="list" :max-height="tableHeight" id="footerBtn">
+      <el-table-column align="center" label='No' min-width="30">
+        <template slot-scope="scope">
+          <span>{{scope.$index+1}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label='类型' min-width="60">
+        <template slot-scope="scope">
+          <span>{{scope.row.icontype}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="相位">
+        <template slot-scope="scope">
+            <el-select v-if="scope.row.icontype === 'vehile' || scope.row.icontype === 'ped'" v-model="scope.row.phaseid" :placeholder="$t('openatccomponents.common.select')" size="small" @change="handleChangePhase(scope.row)">
+              <el-option
+                v-for="item in phaseoptions"
+                :key="item.id"
+                :label="item.label"
+                :value="item.id">
+              </el-option>
+            </el-select>
+            <el-input v-if="scope.row.icontype === 'text'" v-model="scope.row.text" @change="handleChanngeText(scope.row)">{{scope.row.content}}</el-input>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" :label="$t('openatccomponents.overlap.operation')">
+        <template slot-scope="scope">
+          <el-button type="text"  @click="handleDelete(scope.row)">{{$t('openatccomponents.common.delete')}}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      list: [],
+      tableHeight: 400,
+      phaseoptions: [{
+        id: 1,
+        label: 'P1'
+      }, {
+        id: 2,
+        label: 'P2'
+      }, {
+        id: 3,
+        label: 'P3'
+      }
+      ]
+    }
+  },
+  props: {
+    customlist: {
+      type: Array
+    }
+  },
+  watch: {
+    customlist: {
+      handler: function (val) {
+        this.list = JSON.parse(JSON.stringify(val))
+      },
+      deep: true
+    }
+  },
+  components: {
+  },
+  mounted () {
+  },
+  methods: {
+    handleDelete (row) {
+      this.$emit('deleteItem', row)
+    },
+    handleChanngeText (row) {
+      this.$emit('changeText', row, ['text'])
+    },
+    handleChangePhase (row) {
+      row.phaselabel = this.phaseoptions.filter(ele => ele.id === row.phaseid)[0].label
+      this.$emit('changeIconDataByType', row, ['phaseid', 'phaselabel'])
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/kisscomps/components/DrawChannelization/drawsvg/utils/loadutils.js

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ **/
+export default class Svgmethods {
+  clickOpen (call) {
+    const file = document.getElementById('importimg').files[0]
+    const filetype = file.type
+    const reader = new FileReader()
+    const filesize = file.size
+    if (filetype !== 'image/svg+xml' && filetype !== 'image/png' && filetype !== 'image/jpeg') {
+      call('error', 'type')
+      return
+    }
+    if (filesize > 1024 * 1024 * 10) { // 10M换算字节
+      call('error', 'size')
+      return
+    }
+    if (filetype === 'image/svg+xml') {
+      reader.readAsText(file, 'UTF-8')
+      reader.addEventListener('load', async (readerEvent) => {
+        const content = readerEvent.target.result
+        call('vectorgraph', content)
+      })
+    }
+    if (filetype === 'image/png' || filetype === 'image/jpeg') {
+      reader.readAsDataURL(file)
+      reader.addEventListener('load', async (readerEvent) => {
+        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
+        const _base64 = reader.result
+        const content = _base64
+        call('picture', content)
+      })
+    }
+  }
+}

package/src/kisscomps/components/DrawChannelization/drawsvg/utils/phaseDataModel.js

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ **/
+export default class PhaseDataModel {
+  constructor () {
+    this.PhasePosMap = new Map()
+    this.Init()
+  }
+  Init () {
+    const phaseJson = require('./phasePos.json')
+    phaseJson.phaseList.forEach(phase => {
+      let value = {
+        name: phase.name,
+        x: phase.x,
+        y: phase.y
+      }
+      this.PhasePosMap.set(phase.id, value)
+    })
+  }
+
+  getPhase (id) {
+    return this.PhasePosMap.get(id)
+  }
+}

package/src/kisscomps/components/DrawChannelization/drawsvg/utils/phasePos.json

@@ -0,0 +1,20 @@
+{
+  "phaseList": [
+    {
+      "id": 1,
+      "name": "直行"
+    },
+    {
+      "id": 2,
+      "name": "左转"
+    },
+    {
+      "id": 3,
+      "name": "右转"
+    },
+    {
+      "id": 4,
+      "name": "掉头"
+    }
+  ]
+}

package/src/kisscomps/components/DrawChannelization/index.js

@@ -0,0 +1,2 @@
+import DrawChannelization from './drawsvg/index.vue'
+export default DrawChannelization

package/src/kisscomps/components/DrawChannelization/phaseDataMgr.js

@@ -0,0 +1,278 @@
+/**
+ * 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 store from '../../../store/index'
+export default class PhaseDataMgr {
+  constructor (originphaselist) {
+    this.globalParamModel = store.getters.globalParamModel
+    this.id = 1
+    this.originphaselist = originphaselist // 初始上载的相位数组
+    this.originphaseMap = new Map()
+    this.lanecommonphaseMap = new Map() // 关联了相位的渠化车道数据（实时变化）
+    this.lastLanecommonphaseMap = new Map()
+    this.associatedphaselist = [] // 相位关联列表显示的相位方向（初始上载相位数据被关联了相位的渠化车道覆盖）
+    this.associatedphaseMap = new Map()
+    this.createOriginPhaseData()
+  }
+  createOriginPhaseData () {
+    // 根据渠化变化前的上载的相位数据，生成初始数据，后续如果有相位的增加、删除，会变化，或者离开渠化再进来才会再次更新
+    let originphaselist = JSON.parse(JSON.stringify(this.originphaselist))
+    this.originphaseMap = new Map()
+    for (let i = 0; i < originphaselist.length; i++) {
+      this.originphaseMap.set(originphaselist[i].id, originphaselist[i])
+    }
+    console.log('originphasemap', this.originphaseMap)
+    this.updateAssophaseList()
+  }
+  createTempLanePhase (Motorways, editobj, choosephaseid) {
+    let TempLaneMap = new Map()
+    let curMotorways = JSON.parse(JSON.stringify(Motorways))
+    let tempeditobj = JSON.parse(JSON.stringify(editobj))
+    tempeditobj.phaseid = choosephaseid
+    tempeditobj.phaselabel = `P${choosephaseid}`
+    this.changeItem(tempeditobj, ['phaseid', 'phaselabel'], curMotorways)
+    for (let i = 0; i < curMotorways.length; i++) {
+      let motorobj = curMotorways[i]
+      let motorphaseid = motorobj.phaseid
+      if (motorphaseid !== undefined) {
+        // 处理已经关联了相位的渠化车道
+        // motorphaseid !== undefined 证明已经关联相位，以此生成关联列表，数据驱动就不用处理删除修改等情况
+        let lanephasedir = {}
+        if (motorobj.direction) {
+          lanephasedir.direction = motorobj.direction
+        }
+        if (motorobj.peddirection) {
+          lanephasedir.peddirection = motorobj.peddirection
+        }
+        if (TempLaneMap.get(motorphaseid) === undefined) {
+          TempLaneMap.set(motorphaseid, lanephasedir)
+        } else {
+          // 若有别的渠化车道关联了此相位，需要和当前渠化车道的方向叠加
+          let laneassociatedphase = TempLaneMap.get(motorphaseid)
+          if (motorobj.direction) {
+            laneassociatedphase.direction = Array.from(new Set([...laneassociatedphase.direction, ...motorobj.direction]))
+          }
+          if (motorobj.peddirection) {
+            laneassociatedphase.peddirection = Array.from(new Set([...laneassociatedphase.peddirection, ...motorobj.peddirection]))
+          }
+          TempLaneMap.set(motorphaseid, laneassociatedphase)
+        }
+      }
+    }
+    console.log(TempLaneMap)
+    return this.createTempAssophaseList(TempLaneMap)
+  }
+  updateLanePhaseAssociatedMap (Motorways) {
+    // 渠化图车道数据，更新key为phaseid的Map
+    this.lanecommonphaseMap = new Map()
+    let curMotorways = JSON.parse(JSON.stringify(Motorways))
+    for (let i = 0; i < curMotorways.length; i++) {
+      let motorobj = curMotorways[i]
+      let motorphaseid = motorobj.phaseid
+      if (motorphaseid !== undefined) {
+        // 处理已经关联了相位的渠化车道
+        // motorphaseid !== undefined 证明已经关联相位，以此生成关联列表，数据驱动就不用处理删除修改等情况
+        let lanephasedir = {}
+        if (motorobj.direction) {
+          lanephasedir.direction = motorobj.direction
+        }
+        if (motorobj.peddirection) {
+          lanephasedir.peddirection = motorobj.peddirection
+        }
+        if (this.lanecommonphaseMap.get(motorphaseid) === undefined) {
+          this.lanecommonphaseMap.set(motorphaseid, lanephasedir)
+        } else {
+          // 若有别的渠化车道关联了此相位，需要和当前渠化车道的方向叠加
+          let laneassociatedphase = this.lanecommonphaseMap.get(motorphaseid)
+          if (motorobj.direction) {
+            laneassociatedphase.direction = Array.from(new Set([...laneassociatedphase.direction, ...motorobj.direction]))
+          }
+          if (motorobj.peddirection) {
+            laneassociatedphase.peddirection = Array.from(new Set([...laneassociatedphase.peddirection, ...motorobj.peddirection]))
+          }
+          this.lanecommonphaseMap.set(motorphaseid, laneassociatedphase)
+        }
+      }
+    }
+    console.log('lanecommonphaseMap', this.lanecommonphaseMap)
+    this.updateAssophaseList()
+  }
+  checkSameDirectionPhase (curlanedirection, choosephaseid, lastchoosephaseid, tempMotorways, editobj) {
+    // 校验同方向车道关联相位
+    // 1. lastchoosephaseid不存在，说明是车道首次关联相位：
+    // 仅需判断当前相位列表AssophaseList中，相位id !== choosephaseid的相位数据中，direction若包含curlanedirection其中一个方向，则校验不通过
+    // 2. lastchoosephaseid存在，说明车道是切换相位关联:
+    // 情况稍微复杂一些，需要创建一个临时车道关联数据，保存把当前车道方向关联当前选择的相位后，临时生成tempAssophaseList
+    // 再判断tempAssophaseList中，相位id !== choosephaseid的相位数据，direction是否包含车道所选择的方向
+    let checkSame = true
+    if (!lastchoosephaseid) {
+      for (let i = 0; i < this.associatedphaselist.length; i++) {
+        let phaseid = this.associatedphaselist[i].id
+        let direction = this.associatedphaselist[i].direction
+        if (phaseid !== choosephaseid) {
+          for (let j = 0; j < curlanedirection.length; j++) {
+            if (direction.indexOf(curlanedirection[j]) !== -1) {
+              checkSame = false
+            }
+          }
+        }
+      }
+    } else {
+      let TempAssociatedphaselist = this.createTempLanePhase(tempMotorways, editobj, choosephaseid)
+      console.log('TempAssociatedphaselist', TempAssociatedphaselist)
+      for (let i = 0; i < TempAssociatedphaselist.length; i++) {
+        let phaseid = TempAssociatedphaselist[i].id
+        let direction = TempAssociatedphaselist[i].direction
+        if (phaseid !== choosephaseid) {
+          for (let j = 0; j < curlanedirection.length; j++) {
+            if (direction.indexOf(curlanedirection[j]) !== -1) {
+              checkSame = false
+            }
+          }
+        }
+      }
+    }
+    return checkSame
+  }
+  changeItem (row, fieldarr, data) {
+    for (let item of data) {
+      if (item.index === row.index) {
+        for (let field of fieldarr) {
+          item[field] = row[field]
+        }
+      }
+    }
+  }
+  ArrToMap (Arr) {
+    let phaseMap = new Map()
+    for (let i = 0; i < Arr.length; i++) {
+      phaseMap.set(Arr[i].id, Arr[i])
+    }
+    return phaseMap
+  }
+  createTempAssophaseList (TempLaneMap) {
+    let TempAssociatedphaselist = []
+    let TempAssociatedphaseMap = new Map()
+    TempAssociatedphaseMap = this.ArrToMap(JSON.parse(JSON.stringify(this.originphaselist)))
+    for (let [key, value] of TempAssociatedphaseMap) {
+      if (TempLaneMap.get(key)) {
+        // 渠化车道如果关联此相位，要把渠化车道的方向覆盖初始相位的方向
+        let lanevalue = TempLaneMap.get(key)
+        value.direction = lanevalue.direction
+      }
+    }
+    TempAssociatedphaselist = this.MapToArray(TempAssociatedphaseMap)
+    return TempAssociatedphaselist
+  }
+  updateAssophaseList () {
+    // 根据动态变化的渠化车道关联列表+初始上载的相位列表(包含处理后续相位的增删操作，也是变化的)，
+    // 被渠化关联的相位direction被渠化组合方向替换，
+    // 未被关联的相位direction还是初始相位方向
+    this.associatedphaselist = []
+    this.associatedphaseMap = this.ArrToMap(JSON.parse(JSON.stringify(this.originphaselist)))
+    for (let [key, value] of this.associatedphaseMap) {
+      if (this.lanecommonphaseMap.get(key)) {
+        // 渠化车道如果关联此相位，要把渠化车道的方向覆盖初始相位的方向
+        let lanevalue = this.lanecommonphaseMap.get(key)
+        value.direction = lanevalue.direction
+      }
+    }
+    console.log('associatedphaseMap', this.associatedphaseMap)
+    this.associatedphaselist = this.MapToArray(this.associatedphaseMap)
+    console.log('associatedphaselist', this.associatedphaselist)
+    store.dispatch('SetAssociatedPhaseList', this.associatedphaselist)
+  }
+  MapToArray (Map) {
+    let arr = []
+    for (let [key, value] of Map) {
+      let phaseinfo = {
+        id: key,
+        ...value
+      }
+      arr.push(phaseinfo)
+    }
+    return arr
+  }
+  increaseId () { // 实现id在之前的基础上寻找最小的
+    let phaseIdList = this.originphaselist.map(ele => ele.id)
+    let i = this.originphaselist.length - 1
+    if (i >= 0) {
+      for (let j = 1; j <= 40; j++) {
+        if (!phaseIdList.includes(j)) {
+          this.id = j
+          return
+        }
+      }
+    }
+  }
+  addOriginPhase () {
+    this.increaseId()
+    var phaseInitData = {
+      id: this.id,
+      direction: [],
+      peddirection: [], // 行人方向
+      mingreen: 0,
+      max1: 120,
+      max2: 180,
+      passage: 3,
+      phasewalk: 0,
+      pedclear: 0,
+      yellow: 3,
+      redclear: 2,
+      flashgreen: 0,
+      redyellow: 0,
+      ring: 1,
+      greenpulse: 5,
+      redpulse: 10,
+      vehiclethresh: 30,
+      pedestrianthresh: 30,
+      controltype: 0, // 控制类型
+      concurrent: []
+    }
+    this.originphaselist.push(phaseInitData)
+    // 重新排序相位数组
+    this.originphaselist.sort(this.compareProperty('id'))
+    this.updateAssophaseList()
+  }
+  compareProperty (property) {
+    return function (a, b) {
+      var value1 = a[property]
+      var value2 = b[property]
+      return value1 - value2
+    }
+  }
+  deleteOriginPhase (index) {
+    this.originphaselist.splice(index, 1)
+  }
+  editDirPosToPhaseDireaciton (laneDirArr, lanePos) {
+    // 编辑的车道转向和方位，转化成相位的direction
+    let phaseDireacitonArr = laneDirArr.map(lanedir => {
+      if (lanePos === 1) {
+        // 东
+        return lanedir
+      }
+      if (lanePos === 2) {
+        // 西
+        return 4 * 1 + lanedir
+      }
+      if (lanePos === 3) {
+        // 南
+        return 4 * 3 + lanedir
+      }
+      if (lanePos === 4) {
+        // 北
+        return 4 * 2 + lanedir
+      }
+    })
+    return phaseDireacitonArr
+  }
+}