openatc-components 0.2.6 → 0.2.8

package/package/kisscomps/components/OverLap/OverLap.vue

@@ -47,7 +47,8 @@ export default {
   },
   data () {
     return {
-      overlapDatas: []
+      overlapDatas: [],
+      max: ''
     }
   },
   props: {
@@ -67,6 +68,10 @@ export default {
       type: Boolean,
       default: false
     },
+    cycleChange: {
+      type: Boolean,
+      default: true
+    },
     cycle: {
       type: Number
     },
@@ -82,6 +87,13 @@ export default {
       // 深度观察监听
       deep: true
     },
+    cycleChange: {
+      handler: function (val, oldVal) {
+        this.doAdd(this.stageList, this.overlap)
+      },
+      // 深度观察监听
+      deep: true
+    },
     stageList: {
       handler: function (val, oldVal) {
         this.doAdd(this.stageList, this.overlap)
@@ -140,6 +152,15 @@ export default {
           if (findItems.length) findIndexs.push(...findItems.map(m => m.key))
         })
         findIndexs = Array.from(new Set(findIndexs))
+        if (this.cycleChange) {
+          const globalParamModel = this.$store.getters.globalParamModel
+          let pattern = globalParamModel.getParamsByType('patternList')
+          const allCycle = pattern.map(item => item.cycle)
+          let cycle = Math.max(...allCycle)
+          this.max = cycle
+        } else {
+          this.max = ''
+        }
         return {
           ...item,
           peddirection: this.getPedPhasePos(item.peddirection),
@@ -150,8 +171,8 @@ export default {
               ...sta,
               direction: this.getRoad(item),
               // peddirection: this.getPedPhasePos(item.peddirection),
-              greenWidth: find ? (sta.split / this.cycle * 100).toFixed(3) + '%' : '0%',
-              redWidth: !find ? (sta.split / this.cycle * 100).toFixed(3) + '%' : '0%'
+              greenWidth: find ? (sta.split / (this.max ? this.max : this.cycle) * 100).toFixed(3) + '%' : '0%',
+              redWidth: !find ? (sta.split / (this.max ? this.max : this.cycle) * 100).toFixed(3) + '%' : '0%'
             }
           })
         }

package/package/kisscomps/components/SelectCrossPhase/index.vue

@@ -0,0 +1,417 @@
+<template>
+  <div>
+    <el-select
+      v-model="valuess"
+      :multiple="multiple"
+      :disabled="disabled"
+      @visible-change="visibleChange($event)"
+      :clearable="clearable"
+      :filterable="filterable"
+      :placeholder="$t('openatccomponents.common.select')"
+      @change="onChange"
+      @focus="onFocus"
+    >
+      <el-option
+        id="aaa"
+        v-for="(item, index) in Options"
+        :key="index"
+        :label="getLable(item.label)"
+        :value="item.value"
+      >
+        <div class="single-model" @click="selectStages(item.value)">
+          <xdrdirselector
+            Width="60px"
+            Height="60px"
+            :showlist="item.item"
+          ></xdrdirselector>
+          <span
+            style="
+              float: right;
+              margin-left: 10px;
+              color: #8492a6;
+              font-size: 13px;
+            "
+            >{{ item.label }}</span
+          >
+        </div>
+      </el-option>
+    </el-select>
+    <span v-if="pattern">{{ getIncludedPhasesDesc(valuess) }}</span>
+    <!-- <span id="xrd"></span> -->
+    <!-- <xdrdirselector :Data="Data" :Datas="Datas" Width="60px" Height="60px" :showlist="dirArr"></xdrdirselector> -->
+  </div>
+</template>
+<script>
+import { getTscControl } from '../../../api/control'
+import { getPhaseDesc } from '../../../utils/phasedesc.js'
+// import { uploadSingleTscParam } from '../../api/param'
+import { getMessageByCode } from '../../../utils/responseMessage'
+import xdrdirselector from '../XRDDirSelector/XRDDirSelector.vue'
+import PhaseDataModel from '../IntersectionMap/crossDirection/utils'
+// import CrossDiagramMgr from '@/EdgeMgr/controller/crossDiagramMgr'
+// import { getDirName } from './utils.js'
+import { getTheme } from '../../../utils/auth'
+export default {
+  name: 'SelectCrossPhase',
+  components: {
+    xdrdirselector
+  },
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    pattern: {
+      type: Boolean,
+      default: false
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    row: {
+      type: Object
+    },
+    valueModel: {
+      type: Array
+    },
+    type: {
+      type: String || Array
+    },
+    phaseOption: {
+      type: Array,
+      default: () => []
+    },
+    // placeholder: {
+    //   type: String,
+    //   default: ''
+    // },
+    bizType: {
+      type: String,
+      default: ''
+    },
+    agentid: {
+      type: String,
+      default: '10501'
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      list: [],
+      valuess: [],
+      Data: {
+        left: '60px',
+        top: '10px'
+      },
+      Datas: {
+        left: '60px',
+        top: '10px'
+      },
+      Options: [],
+      phaseList: [],
+      dirArr: [],
+      sidewalkPhaseData: []
+    }
+  },
+  watch: {
+    phaseOption: {
+      handler (val) {
+        this.phaseOption = val
+        this.getPhase()
+        this.showxdr(this.valuess)
+      },
+      deep: true
+    },
+    agentid (val) {
+      // this.value = ''
+      this.Options = []
+      // this.onLoad()
+    }
+  },
+  created () {
+    this.PhaseDataModel = new PhaseDataModel()
+    this.onLoad()
+  },
+  methods: {
+    getLable (str) {
+      const match = str.match(/\d+/)
+      if (match) {
+        return this.getPhaseDescs(Number(match[0]))
+      }
+    },
+    // getXrd (data) {
+    //   let Profile = Vue.extend({
+    //     // template: 'xdrdirselector',
+    //     components: {
+    //       xdrdirselector
+    //     },
+    //     render (h) {
+    //       return h('xdrdirselector', {
+    //         props: {
+    //           Width: '60px',
+    //           Height: '60px',
+    //           showlist: data,
+    //           Data: {
+    //             left: '60px',
+    //             top: '10px'
+    //           },
+    //           Datas: {
+    //             left: '60px',
+    //             top: '10px'
+    //           }
+    //         }
+    //       })
+    //     }
+    //   })
+    //   let profile = new Profile()
+    //   profile.$mount('#xrd')
+    // },
+    getPhaseDescs (id) {
+      let phasedesc = this.phaseOption.filter((item) => {
+        return item.id === id
+      })[0].direction
+      if (phasedesc.length === 0) return id
+      let description = getPhaseDesc(phasedesc, this.$i18n.locale)
+      return id + '-' + description
+    },
+    showxdr (data) {
+      let color = getTheme() === 'light' ? '#1E1E1E' : '#F1F3F4'
+      this.dirArr = []
+      this.phaseOption.filter((item) => {
+        if (item.id === data) {
+          if (item.direction.length === 0) {
+            let recd = {
+              id: 0,
+              peddirection: this.getPed(item.peddirection),
+              color: color
+            }
+            this.dirArr.push(recd)
+          } else {
+            for (let rec of item.direction) {
+              let recd = {
+                id: rec,
+                peddirection: this.getPed(item.peddirection),
+                color: color
+              }
+              this.dirArr.push(recd)
+            }
+          }
+        }
+      })
+    },
+    onFocus () {
+      if (!this.Options || this.Options.length === 0) {
+        this.onLoad()
+      }
+    },
+    onLoad () {
+      this.getPhase()
+      // this.initData()
+    },
+    setOption (list) {
+      if (this.row.callphase) {
+        this.valuess = this.row.callphase
+        this.showxdr(this.valuess)
+      }
+      if (this.row.phases) {
+        this.valuess = this.row.phases
+      }
+      if (this.row.linkphase) {
+        this.valuess = this.row.linkphase
+        this.showxdr(this.valuess)
+      }
+      if (this.row.includedphases) {
+        this.valuess = this.row.includedphases
+      }
+      if (this.row.data && this.row.data.phase) {
+        this.valuess = this.row.data.phase
+        this.showxdr(this.valuess)
+      }
+      let color = getTheme() === 'light' ? '#1E1E1E' : '#F1F3F4'
+      this.Options = list.map((item, index) => {
+        let dirArr = []
+        if (item.direction.length === 0) {
+          let recd = {
+            id: 0,
+            peddirection: this.getPed(item.peddirection),
+            color: color
+          }
+          dirArr.push(recd)
+        } else {
+          for (let rec of item.direction) {
+            let recd = {
+              id: rec,
+              peddirection: this.getPed(item.peddirection),
+              color: color
+            }
+            dirArr.push(recd)
+          }
+        }
+        let name = ''
+        name = this.$t('openatccomponents.pattern.phase') + item.id
+        // name = this.getPhaseDescs(item.id)
+        return {
+          label: name,
+          item: dirArr,
+          value: item.id
+        }
+      })
+    },
+    visibleChange (status) {
+      if (!status) {
+        this.showxdr(this.valuess)
+      }
+    },
+    onChange (value) {
+      if (this.type === 'callphase') {
+        this.row.callphase = this.valuess
+      } else if (this.type === 'linkphase') {
+        this.row.linkphase = this.valuess
+      } else if (this.type === 'phase') {
+        this.row.data.phase = this.valuess
+      } else if (this.multiple && this.type === 'phases') {
+        this.row.phases = this.valuess
+      } else if (this.multiple && this.type === 'includedphases') {
+        this.row.includedphases = this.valuess
+      }
+      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)
+    },
+    getPhase () {
+      this.getPedPhasePos(this.phaseOption)
+      this.setOption(this.phaseOption)
+    },
+    initData () {
+      let agentId = this.agentid
+      getTscControl(agentId).then((data) => {
+        if (!data.data.success) {
+          if (data.data.code === '4003') {
+            this.devStatus = 2
+            this.$message.error(this.$t('openatccomponents.errorTip.devicenotonline'))
+            return
+          }
+          this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
+          return
+        }
+        let TscData = JSON.parse(JSON.stringify(data.data.data.data))
+        this.handleStageData(TscData) // 处理阶段（驻留）stage数据
+      }).catch(error => {
+        this.$message.error(error)
+        console.log(error)
+      })
+    },
+    getPed (data) {
+      let ped = []
+      let peddirections = []
+      let color = getTheme() === 'light' ? '#1E1E1E' : '#F1F3F4'
+      for (let walk of this.sidewalkPhaseData) {
+        for (let ped of data) {
+          let objs = {}
+          objs.name = walk.name
+          objs.id = walk.id
+          objs.color = color
+          if (ped === walk.id) {
+            peddirections.push(objs)
+            peddirections = Array.from(new Set(peddirections))
+          }
+        }
+      }
+      ped.push(...peddirections)
+      return ped
+    },
+    getPedPhasePos (phaseList) {
+      // 行人相位信息
+      this.sidewalkPhaseData = []
+      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
+    },
+    handleStageData (data) {
+      this.stagesList = []
+      let stages = data.stages
+      for (let stage of stages) {
+        let tempList = []
+        let directionList = []
+        for (let stg of stage) {
+          let currPhase = this.phaseList.filter((item) => {
+            return item.id === stg
+          })[0]
+          if (currPhase !== undefined) {
+            directionList = [...currPhase.direction, ...directionList]
+          }
+          // directionList = [...currPhase.direction, ...directionList]
+        }
+        directionList = [...new Set(directionList)]
+        tempList = directionList.map(dir => ({
+          id: dir,
+          color: '#606266'
+        }))
+        this.stagesList.push(tempList)
+      }
+      this.list = this.stagesList
+      // this.setOption()
+    },
+    // 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
+    },
+    getIncludedPhasesDesc (ids) {
+      let str = ''
+      for (let id of ids) {
+        str = str + this.getPhaseDescs(id) + ' '
+      }
+      return str
+    }
+  }
+}
+</script>
+<style lang="scss">
+
+.el-select-dropdown__wrap {
+  max-height: 500px !important;
+}
+
+#aaa{
+  // :deep(.el-select-dropdown__item){
+    margin: 10px 0 !important;
+  // }
+}
+
+</style>

package/package/kisscomps/components/SelectCrossPhase/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: 'edge.phase.es',
+  // img: require('./images/East-Straight.svg'),
+  class: 'iconfont icon-icon-test2'
+},
+{
+  id: 2,
+  // name: 'East-Left',
+  name: 'edge.phase.el',
+  // img: require('./images/East-Left.svg'),
+  class: 'iconfont icon-icon-test4'
+},
+{
+  id: 3,
+  // name: 'East-Right',
+  name: 'edge.phase.er',
+  // img: require('./images/East-Right.svg'),
+  class: 'iconfont icon-icon-test3'
+},
+{
+  id: 4,
+  // name: 'East-Back',
+  name: 'edge.phase.eb',
+  // img: require('./images/East-Back.svg'),
+  class: 'iconfont icon-icon-test6'
+},
+{
+  id: 5,
+  // name: 'West-Straight',
+  name: 'edge.phase.ws',
+  // img: require('./images/West-Straight.svg'),
+  class: 'iconfont icon-icon-test5'
+},
+{
+  id: 6,
+  // name: 'West-Left',
+  name: 'edge.phase.wl',
+  // img: require('./images/West-Left.svg'),
+  class: 'iconfont icon-icon-test7'
+},
+{
+  id: 7,
+  // name: 'West-Right',
+  name: 'edge.phase.wr',
+  // img: require('./images/West-Right.svg'),
+  class: 'iconfont icon-icon-test9'
+},
+{
+  id: 8,
+  // name: 'West-Back',
+  name: 'edge.phase.wb',
+  // img: require('./images/West-Back.svg'),
+  class: 'iconfont icon-icon-test8'
+},
+{
+  id: 9,
+  // name: 'North-Straight',
+  name: 'edge.phase.ns',
+  // img: require('./images/North-Straight.svg'),
+  class: 'iconfont icon-icon-test10'
+},
+{
+  id: 10,
+  // name: 'North-Left',
+  name: 'edge.phase.nl',
+  // img: require('./images/North-Left.svg'),
+  class: 'iconfont icon-icon-test12'
+},
+{
+  id: 11,
+  // name: 'North-Right',
+  name: 'edge.phase.nr',
+  // img: require('./images/North-Right.svg'),
+  class: 'iconfont icon-icon-test13'
+},
+{
+  id: 12,
+  // name: 'North-Back',
+  name: 'edge.phase.nb',
+  // img: require('./images/North-Back.svg'),
+  class: 'iconfont icon-icon-test11'
+},
+{
+  id: 13,
+  // name: 'South-Straight',
+  name: 'edge.phase.ss',
+  // img: require('./images/South-Straight.svg'),
+  class: 'iconfont icon-icon-test15'
+},
+{
+  id: 14,
+  // name: 'South-Left',
+  name: 'edge.phase.sl',
+  // img: require('./images/South-Left.svg'),
+  class: 'iconfont icon-icon-test14'
+},
+{
+  id: 15,
+  // name: 'South-Right',
+  name: 'edge.phase.sr',
+  // img: require('./images/South-Right.svg'),
+  class: 'iconfont icon-icon-test'
+},
+{
+  id: 16,
+  // name: 'South-Back',
+  name: 'edge.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}