openatc-components 0.0.102 → 0.0.103

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

@@ -0,0 +1,331 @@
+/**
+ * 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">
+          <div v-for="(side, index) in item.peddirection" :key="'peddir-' + index">
+            <PatternWalkSvg :Data="getshowped(side)" Width="42" Height="44" />
+          </div>
+        </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 class="delete-phase-icon" @click="handleDeletePhase(index, item)">
+          <i class="el-icon-close"></i>
+        </div>
+      </div>
+      <div class="single-phase-name">{{$t('openatccomponents.channelizationmap.phase') + item.id}}</div>
+    </div>
+    <div class="phase-box">
+      <div class="single-phase add-phase" @click="handleAddPhase()">
+        <i class="iconfont icon-fangda" :class="{'add-disabled': !isCanAdd}"></i>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+import PhaseDataModel from '../../IntersectionMap/crossDirection/utils.js'
+// import PatternWalkSvg from 'openatc-components/package/kisscomps/components/PatternWalkSvg'
+export default {
+  name: 'phase-associated-component',
+  data () {
+    return {
+      preselectPhase: -1,
+      id: 1,
+      isCanAdd: true
+    }
+  },
+  components: {
+    // PatternWalkSvg
+  },
+  props: {
+    editData: {
+      type: Object
+    },
+    phaseAssociatedMap: {
+      type: Map
+    }
+  },
+  computed: {
+    ...mapState({
+      phaseList: state => state.globalParam.tscParam.phaseList,
+      roadDirection: state => state.globalParam.roadDirection
+    })
+  },
+  watch: {
+    phaseList: {
+      handler: function (list) {
+        if (list.length >= 40) {
+          this.isCanAdd = false
+        } else {
+          this.isCanAdd = true
+        }
+      },
+      deep: true
+    },
+    editData: {
+      handler: function (editobj) {
+        // console.log('editobj', editobj)
+        if (editobj.phaseid !== undefined) {
+          this.preselectPhase = editobj.phaseid
+        } else {
+          this.preselectPhase = -1
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    selectPhase (index, item) {
+      let direction = this.editDirPosToPhaseDireaciton(this.editData.icondireid, this.editData.lanePosition)
+      // 校验同方位车道不能关联不同相位
+      if (this.checkSameDirectionPhase(item.id, direction) === false) return
+      // 关联相位
+      this.preselectPhase = item.id
+      // 组合现有和之前的相位 direction，并去重
+      item.direction = Array.from(new Set([...item.direction, ...direction]))
+      this.$emit('selectPhase', this.preselectPhase, direction)
+    },
+    changeDirection (choosedicon) {
+      for (let i = 0; i < this.phaseList.length; i++) {
+        if (this.phaseList[i].id === choosedicon.phaseid) {
+          let direction = this.editDirPosToPhaseDireaciton(choosedicon.icondireid, choosedicon.lanePosition)
+          // 校验同方位车道不能关联不同相位
+          if (this.checkSameDirectionPhase(choosedicon.phaseid, direction) === false) return
+          // 组合现有和之前的相位 direction，并去重
+          this.phaseList[i].direction = Array.from(new Set([...this.phaseList[i].direction, ...direction]))
+          this.$emit('selectPhase', this.preselectPhase, direction)
+        }
+      }
+    },
+    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) {
+      return {
+        id: peddirection,
+        name: this.PhaseDataModel.getSidePos(peddirection).name
+      }
+    },
+    handleDeletePhase (index, row) {
+      this.$confirm(this.$t('openatccomponents.phase.deletetip'),
+        this.$t('openatccomponents.common.alarm'), {
+          confirmButtonText: this.$t('openatccomponents.common.confirm'),
+          cancelButtonText: this.$t('openatccomponents.common.cancel'),
+          type: 'warning'
+        }).then(() => {
+        this.globalParamModel.deleteParamsByType('phaseList', index, 1)
+        this.deleteRing(row)
+        this.$message({
+          type: 'success',
+          message: this.$t('openatccomponents.common.deletesucess')
+        })
+        // 删除关联此行的并发相位
+        this.handleDeleteConcurrent(row.id, [], row.concurrent)
+        // 删除关联此相位的所有车道相位id
+        this.handleDisassociatePhase(row.id)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: this.$t('openatccomponents.common.deletecancel')
+        })
+      })
+    },
+    handleDisassociatePhase (deletePhaseid) {
+      // 删除相位后，解除相位关联
+      this.$emit('handleDisassociatePhase', deletePhaseid)
+    },
+    handleAddPhase () {
+      this.increaseId()
+      if (this.globalParamModel.getParamLength('phaseList') >= 40) {
+        this.$message.error(
+          this.$t('openatccomponents.phase.mostdata')
+        )
+        return
+      }
+      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.globalParamModel.addParamsByType('phaseList', phaseInitData)
+      // this.id++
+      this.editRing(phaseInitData)
+      // 重新排序相位数组
+      let phaseList = this.globalParamModel.getParamsByType('phaseList')
+      phaseList.sort(this.compareProperty('id'))
+    },
+    compareProperty (property) {
+      return function (a, b) {
+        var value1 = a[property]
+        var value2 = b[property]
+        return value1 - value2
+      }
+    },
+    increaseId () { // 实现id在之前的基础上寻找最小的
+      let phaseList = this.globalParamModel.getParamsByType('phaseList')
+      let phaseIdList = phaseList.map(ele => ele.id)
+      let i = phaseList.length - 1
+      if (i >= 0) {
+        for (let j = 1; j <= 40; j++) {
+          if (!phaseIdList.includes(j)) {
+            this.id = j
+            return
+          }
+        }
+      }
+    },
+    deleteRing (row) {
+      let patternList = this.globalParamModel.getParamsByType('patternList')
+      let id = row.id
+      let ring = row.ring - 1
+      for (let pattern of patternList) {
+        for (let i = 0; i < pattern.rings[ring].length; i++) {
+          if (pattern.rings[ring][i].id === id) {
+            pattern.rings[ring].splice(i, 1)
+            pattern.cycle = pattern.cycle - 30
+          }
+        }
+      }
+    },
+    editRing (value) {
+      let patternList = this.globalParamModel.getParamsByType('patternList')
+      let id = value.id
+      for (let pattern of patternList) {
+        let ring = {}
+        ring.name = 'Phase ' + id
+        ring.id = id
+        ring.value = 30
+        pattern.rings[0].push(ring)
+        pattern.cycle = pattern.cycle + 30
+      }
+    },
+    handleDeleteConcurrent (curid, curVal, oldVal) {
+      // 删除关联的并发相位
+      let phaseList = this.globalParamModel.getParamsByType('phaseList')
+      for (let i = 0; i < oldVal.length; i++) {
+        if (curVal.indexOf(oldVal[i]) === -1) {
+          // 此项已被删除
+          for (let j = 0; j < phaseList.length; j++) {
+            if (phaseList[j].id === oldVal[i]) {
+              let index = phaseList[j].concurrent.indexOf(curid)
+              if (index !== -1) {
+                phaseList[j].concurrent.splice(index, 1)
+              }
+            }
+          }
+        }
+      }
+    },
+    checkSameDirectionPhase (curphaseid, curdirection) {
+      // 校验同方向车道关联相位
+      // console.log('phaseAssociatedMap', this.phaseAssociatedMap)
+      let checkSame = true
+      for (let [key, value] of this.phaseAssociatedMap) {
+        if (curphaseid !== key) {
+          for (let i = 0; i < value.length; i++) {
+            if (value[i].index === this.editData.index) continue
+            if (!value[i].direction || !value[i].direction.length) continue
+            for (let j = 0; j < curdirection.length; j++) {
+              if (value[i].direction.indexOf(curdirection[j]) !== -1) {
+                checkSame = false
+                this.$message.error(this.$t('openatccomponents.channelizationmap.associatedphaseerror'))
+                break
+              }
+            }
+          }
+        }
+      }
+      return checkSame
+    },
+    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.globalParamModel = this.$store.getters.globalParamModel
+    this.PhaseDataModel = new PhaseDataModel()
+    this.increaseId()
+  },
+  mounted () {
+  },
+  destroyed () {
+  }
+}
+</script>
+<style lang="scss">
+</style>

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

@@ -10,11 +10,10 @@
  * See the Mulan PSL v2 for more details.
  **/
 export default class Svgmethods {
-  clickOpen (call, call2) {
+  clickOpen (call) {
     const file = document.getElementById('importimg').files[0]
     const filetype = file.type
     const reader = new FileReader()
-    const reader2 = new FileReader()
     const filesize = file.size
     if (filetype !== 'image/svg+xml' && filetype !== 'image/png' && filetype !== 'image/jpeg') {
       call('error', 'type')
@@ -25,63 +24,20 @@ export default class Svgmethods {
       return
     }
     if (filetype === 'image/svg+xml') {
-      reader2.readAsDataURL(file)
-      reader2.addEventListener('load', async (readerEvent) => {
-        const imageSrc = readerEvent.target.result
-        // 调用计算图片大小的方法
-        calculateImageSize(imageSrc).then(function ({width, height}) {
-          // 通过ES6的结构赋值来得到图片的宽和高
-          let svgsize = {
-            width,
-            height
-          }
-          call2('vectorgraph', svgsize)
-          reader.readAsText(file, 'UTF-8')
-          reader.addEventListener('load', async (readerEvent) => {
-            const content = readerEvent.target.result
-            call('vectorgraph', content)
-          })
-        })
+      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 imageSrc = readerEvent.target.result
-        // 调用计算图片大小的方法
-        calculateImageSize(imageSrc).then(function ({width, height}) {
-          // 通过ES6的结构赋值来得到图片的宽和高
-          let pngsize = {
-            width,
-            height
-          }
-          call2('picture', pngsize)
-          const _base64 = reader.result
-          const content = _base64
-          call('picture', content)
-        })
+        const _base64 = reader.result
+        const content = _base64
+        call('picture', content)
       })
     }
   }
 }
-
-// 根据图片地址获取图片的宽和高
-const calculateImageSize = function (url) {
-  return new Promise(function (resolve, reject) {
-    const image = document.createElement('img')
-    image.addEventListener('load', function (e) {
-      resolve({
-        width: e.target.width,
-        height: e.target.height
-      })
-    })
-
-    image.addEventListener('error', function () {
-      console.log('error')
-    })
-
-    // 将图片的url地址添加到图片地址中
-    image.src = url
-  })
-}

package/src/kisscomps/components/KanBan/kanban.vue

@@ -180,7 +180,7 @@ export default {
         ls.minSplit = temp1 > temp2 ? temp1 : temp2
         if (ls.mode !== 7 && ls.value < ls.minSplit) {
           ls.value = ls.minSplit
-          this.$message.error(this.$t('openatccomponents.pattern.splitCheckMsg'))
+          // this.$message.error(this.$t('openatccomponents.pattern.splitCheckMsg'))
         }
       }
     },
@@ -202,12 +202,12 @@ export default {
       }
       return maxCycle
     },
-    doChange (val) {
-      // if (val.mode === 7) {
-      //   val.value = 0
-      // } else {
-      //   val.value = 30
-      // }
+    doChange (e) {
+      if (e) {
+        let n = this.index
+        this.$emit('handleMode', n)
+        this.$forceUpdate()
+      }
     }
   }
 }

package/src/kisscomps/components/PatternStatus/PatternStatus.vue

@@ -43,7 +43,7 @@
               <div class="first-1" :style="{'width':item.redWidth,'height':'34px','background':'#f27979'}"></div>
               </div>
           </div>
-        <div v-for="(item, index) in barrierList" :key="index + '1'">
+        <div v-if="showBarrier" v-for="(item, index) in barrierList" :key="index + '1'">
           <div class="divider" :style="{'left':item, 'height':barrierHeight}"></div>
         </div>
         <div v-show="(syncTime && cycle && cycle>0) || (syncTime && newCycle && newCycle>0)">
@@ -123,6 +123,10 @@ export default {
     patternList: {
       type: Array
     },
+    showBarrier: {
+      type: Boolean,
+      default: false
+    },
     localPatternList: {
       type: Array
     },
@@ -162,10 +166,10 @@ export default {
       return res
     },
     timeNumDevide () {
-      if (this.newCycle && this.newCycle > 0) {
-        let res = (this.newCycle - this.syncTime) + '/' + this.newCycle
-        return res
-      }
+      // if (this.newCycle && this.newCycle > 0) {
+      //   let res = (this.newCycle - this.syncTime) + '/' + this.newCycle
+      //   return res
+      // }
       if (this.cycle && this.cycle > 0) {
         let res = (this.cycle - this.syncTime) + '/' + this.cycle
         return res
@@ -191,7 +195,7 @@ export default {
         this.getPedPhasePos()
         this.getBusPos()
         this.getStage()
-        this.handlePatternData()
+        // this.handlePatternData()
       },
       // 深度观察监听
       deep: true
@@ -407,63 +411,174 @@ export default {
       this.newList = []
       if (Object.keys(this.controlData).length === 0 || this.phaseList.length === 0) return
       if (!this.controlData.phase) return
-      let cycle = this.controlData.cycle
+      // let cycle = this.controlData.cycle
       if (!this.controlData.rings) return
+      let newValue = []
       for (let rings of this.controlData.rings) {
         let phase = this.controlData.phase
-        let list = []
+        // let list = []
+        let obj = {}
+        for (let key in rings.sequence) {
+          obj[key] = rings.sequence[key]
+        }
+        let newObj = Object.keys(obj).map(val => ({
+          id: obj[val]
+        }))
+        newValue.push(newObj)
         for (let sequ of rings.sequence) {
           let obj = {}
           obj.id = sequ
           let split = phase.filter((item) => {
             return item.id === sequ
           })[0].split
+          newValue.map(d => {
+            d.map(r => {
+              if (r.id === sequ) {
+                r.value = split
+              }
+            })
+          })
+          // let currPhase = this.phaseList.filter((item) => {
+          //   if (item.id === sequ && item.controltype === 99) {
+          //     obj.controltype = item.controltype
+          //   }
+          //   return item.id === sequ
+          // })[0]
+          // if (currPhase) {
+          //   obj.redWidth = (currPhase.redclear / cycle * 100).toFixed(3) + '%'
+          //   obj.yellowWidth = (currPhase.yellow / cycle * 100).toFixed(3) + '%'
+          //   obj.greenWidth = ((split - currPhase.redclear - currPhase.yellow - currPhase.flashgreen) / cycle * 100).toFixed(3) + '%'
+          //   obj.flashgreen = (currPhase.flashgreen / cycle * 100).toFixed(3) + '%'
+          //   // obj.peddirection = currPhase.peddirection
+          //   let peddirections = []
+          //   for (let walk of this.sidewalkPhaseData) {
+          //     for (let ped of currPhase.peddirection) {
+          //       // if (stg === walk.phaseid) {
+          //       let objs = {}
+          //       objs.name = walk.name
+          //       objs.id = walk.id
+          //       if (ped === walk.id) {
+          //         peddirections.push(objs)
+          //         peddirections = Array.from(new Set(peddirections))
+          //       }
+          //       // }
+          //     }
+          //   }
+          //   obj.peddirection = peddirections
+          //   obj.split = split
+          //   obj.direction = currPhase.direction.map(item => {
+          //     return {
+          //       id: item,
+          //       color: '#454545'
+          //     }
+          //   })
+          //   list.push(obj)
+          // }
+        }
+        // this.newList.push(list)
+        // this.patternInfo = [...this.newList]
+      }
+      this.handleOverViewChange(newValue)
+    },
+    handleBarrierHeight () { // 屏障高度
+      if (!this.patternInfo) return
+      let patternLength = this.patternInfo.length
+      this.barrierHeight = (patternLength * 35 + 21) + 'px'
+    },
+    handleOverViewChange (val) {
+      if (val === null || val.length === 0) return
+      this.patternInfo = []
+      let currentArr = []
+      let newPattern = []
+      val.map(i => {
+        newPattern.push(...i)
+      })
+      if (this.phaseList.length === 0) return
+      for (let patternStatus of val[0]) {
+        if (patternStatus.mode !== 7) {
+          let concurrent = this.phaseList.filter((item) => {
+            return item.id === patternStatus.id // patternStatus.id当前相位id concurrent当前相位的并发相位
+          })[0].concurrent// 当前相位的并发相位
+          if (concurrent) {
+            let obj = {
+              id: patternStatus.id,
+              current: concurrent.sort()
+            }
+            currentArr.push(obj)
+          }
+        }
+      }
+      if (currentArr.length !== 0) {
+        let newCurrent = this.tranform(currentArr)
+        let ringTeam = this.step1(this.phaseList, newCurrent)
+        this.fillGap(ringTeam, val)
+      }
+      let cycle = this.controlData.cycle
+      for (let rings of val) {
+        if (rings.length === 0) continue
+        let list = []
+        for (let ring of rings) {
+          if (ring.value === 0) continue
+          let obj = {}
+          let split = ring.value
+          obj.id = ring.id
+          // obj.split = split
           let currPhase = this.phaseList.filter((item) => {
-            if (item.id === sequ && item.controltype === 99) {
+            if (item.id === ring.id && item.controltype === 99) {
               obj.controltype = item.controltype
             }
-            return item.id === sequ
+            return item.id === ring.id
           })[0]
-          if (currPhase) {
-            obj.redWidth = (currPhase.redclear / cycle * 100).toFixed(3) + '%'
-            obj.yellowWidth = (currPhase.yellow / cycle * 100).toFixed(3) + '%'
-            obj.greenWidth = ((split - currPhase.redclear - currPhase.yellow - currPhase.flashgreen) / cycle * 100).toFixed(3) + '%'
-            obj.flashgreen = (currPhase.flashgreen / cycle * 100).toFixed(3) + '%'
-            // obj.peddirection = currPhase.peddirection
-            let peddirections = []
-            for (let walk of this.sidewalkPhaseData) {
-              for (let ped of currPhase.peddirection) {
-                // if (stg === walk.phaseid) {
-                let objs = {}
-                objs.name = walk.name
-                objs.id = walk.id
-                if (ped === walk.id) {
-                  peddirections.push(objs)
-                  peddirections = Array.from(new Set(peddirections))
-                }
-                // }
+          if (ring.desc) {
+            obj.direction = ring.desc.map(item => { // 虚相位desc为空
+              return {
+                id: item.id,
+                color: '#454545'
               }
-            }
-            obj.peddirection = peddirections
-            obj.split = split
+            })
+          } else {
             obj.direction = currPhase.direction.map(item => {
               return {
                 id: item,
                 color: '#454545'
               }
             })
+          }
+          if (ring.sum) {
+            obj.split = split
+            obj.redWidth = (currPhase.redclear + ring.sum / (this.max ? this.max : cycle) * 100).toFixed(3) + '%'
+          } else {
+            obj.split = split
+            obj.redWidth = (currPhase.redclear / (this.max ? this.max : cycle) * 100).toFixed(3) + '%'
+          }
+          obj.flashgreen = (currPhase.flashgreen / (this.max ? this.max : cycle) * 100).toFixed(3) + '%'
+          obj.yellowWidth = (currPhase.yellow / (this.max ? this.max : cycle) * 100).toFixed(3) + '%'
+          obj.greenWidth = ((split - currPhase.redclear - currPhase.yellow - currPhase.flashgreen) / (this.max ? this.max : cycle) * 100).toFixed(3) + '%'
+          // obj.peddirection = currPhase.peddirection
+          let peddirections = []
+          for (let walk of this.sidewalkPhaseData) {
+            for (let ped of currPhase.peddirection) {
+            // if (stg === walk.phaseid) {
+              let objs = {}
+              objs.name = walk.name
+              objs.id = walk.id
+              if (ped === walk.id) {
+                peddirections.push(objs)
+                peddirections = Array.from(new Set(peddirections))
+              }
+            // }
+            }
+          }
+          obj.peddirection = peddirections
+          // 忽略相位不显示
+          let mode = ring.mode
+          if (mode !== 7) { // 忽略相位不显示
             list.push(obj)
           }
         }
-        this.newList.push(list)
-        this.patternInfo = [...this.newList]
+        this.patternInfo.push(list)
       }
     },
-    handleBarrierHeight () { // 屏障高度
-      if (!this.patternInfo) return
-      let patternLength = this.patternInfo.length
-      this.barrierHeight = (patternLength * 35 + 21) + 'px'
-    },
     handleCurrentChange (val) { // 两个ring的数据
       if (val === null || val.length === 0) return
       this.patternInfo = []