openatc-components 0.1.3 → 0.1.5

package/package/kisscomps/components/DrawChannelization/drawsvg/basicCoordInfo.vue

@@ -1,59 +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.
- **/
+* 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="basic-coodinfo-component">
-    <el-form
-      :inline="true"
-      :model="basicCoodInfo"
-       label-position="left">
-       <el-form-item
-            label="X:"
-            prop="intersection">
-          <el-input-number :min="0" :controls="false"
-            ref="refNumber-x"
-            v-model="basicCoodInfo.x"
-            @change="handleChangePosX"
-            @input.native="eventChange('x')" />
-        </el-form-item>
-        <el-form-item
-            label="Y:"
-            prop="count">
-          <el-input-number :min="0" :controls="false"
-            ref="refNumber-y"
-            v-model="basicCoodInfo.y"
-            @change="handleChangePosY"
-            @input.native="eventChange('y')" />
-        </el-form-item>
-        <el-form-item
-            v-if="showAngle"
-            :label="$t('openatccomponents.channelizationmap.angle') + ':'"
-            prop="count">
-          <el-input-number :min="0" :max="360" :controls="false"
-            ref="refNumber-angle"
-            v-model="basicCoodInfo.angle"
-            @change="handleChangeAngle"
-            @input.native="eventChange('angle')" />
-        </el-form-item>
+    <el-form :inline="true" :model="basicCoodInfo" label-position="left">
+      <el-form-item label="X:">
+        <el-input-number :min="0" :controls="false" ref="refNumber-x" v-model="basicCoodInfo.x"
+          @change="handleChangePosX" @input.native="eventChange('x')" />
+      </el-form-item>
+      <el-form-item label="Y:">
+        <el-input-number :min="0" :controls="false" ref="refNumber-y" v-model="basicCoodInfo.y"
+          @change="handleChangePosY" @input.native="eventChange('y')" />
+      </el-form-item>
+      <el-form-item v-if="showAngle" :label="$t('openatccomponents.channelizationmap.angle') + ':'">
+        <el-input-number :min="0" :max="360" :controls="false" ref="refNumber-angle" v-model="basicCoodInfo.angle"
+          @change="handleChangeAngle" @input.native="eventChange('angle')" />
+      </el-form-item>
+      <el-form-item v-if="showKeyId" label="ID:">
+        <el-input v-model="basicCoodInfo.keyid" ref="keyid" @input="handleChangeKeyID" />
+      </el-form-item>
     </el-form>
   </div>
 </template>
 <script>
 export default {
   name: 'basic-coodinfo-component',
-  components: {
-  },
+  components: {},
   data () {
     return {
       showAngle: true,
+      showKeyId: true,
       basicCoodInfo: {
         x: 0,
         y: 0,
@@ -66,8 +50,7 @@ export default {
       type: Object
     }
   },
-  computed: {
-  },
+  computed: {},
   watch: {
     drawingObjInfo: {
       handler: function (obj) {
@@ -76,7 +59,11 @@ export default {
           y: obj.y,
           angle: obj.angle
         }
+        if (obj.keyid !== undefined) {
+          this.basicCoodInfo.keyid = obj.keyid
+        }
         this.isShowAngleSetting()
+        this.isShowKeyIdSetting()
       },
       deep: true
     }
@@ -111,6 +98,10 @@ export default {
         this.$emit('handleChangeBasicCoord', this.basicCoodInfo)
       }
     },
+    handleChangeKeyID (value) {
+      this.basicCoodInfo.keyid = value
+      this.$emit('handleChangeBasicCoord', this.basicCoodInfo)
+    },
     checkOnlyNum (numString) {
       // eslint-disable-next-line no-new-wrappers
       let num = new Number(numString)
@@ -140,6 +131,15 @@ export default {
       if (this.drawingObjInfo.icontype === 'detector' && this.drawingObjInfo.detailtype === 'detectorChart') {
         this.showAngle = false
       }
+    },
+    isShowKeyIdSetting () {
+      this.showKeyId = false
+      if (this.drawingObjInfo.icontype === 'vehile') {
+        this.showKeyId = true
+      }
+      if (this.drawingObjInfo.icontype === 'ped') {
+        this.showKeyId = true
+      }
     }
   },
   mounted () {
@@ -150,12 +150,16 @@ export default {
         y: this.drawingObjInfo.y,
         angle: this.drawingObjInfo.angle
       }
+      if (this.drawingObjInfo.keyid !== undefined) {
+        this.basicCoodInfo.keyid = this.drawingObjInfo.keyid
+      }
       this.isShowAngleSetting()
+      this.isShowKeyIdSetting()
     }
   },
-  destroyed () {
-  }
+  destroyed () {}
 }
+
 </script>
 <style lang="scss">
 </style>

package/package/kisscomps/components/DrawChannelization/drawsvg/index.draw.vue

@@ -343,7 +343,7 @@ export default {
         case 'crossmap':
           this.changeCrossMap(iconObj, changefield)
       }
-      console.log('this.customlist', this.customlist)
+      // console.log('this.customlist', this.customlist)
     },
 
     // 被删除的相位所关联的车道，解除相位关联
@@ -394,6 +394,7 @@ export default {
       let Motorwaysitem = {
         index: this.index,
         id: this.motorid,
+        keyid: this.motorid, // 后端需要的id，默认指取索引，可修改
         icontype: 'vehile',
         icondireid: [1], // 前端区分箭头方向的标识
         icondirename: [this.PhaseDataModel.getPhase(1).name],
@@ -460,6 +461,7 @@ export default {
       let peditem = {
         index: this.index,
         id: this.pedid,
+        keyid: this.pedid, // 后端需要的id，默认指取索引，可修改
         icontype: 'ped',
         iconpedtypeid: 1,
         iconpedposition: 1,
@@ -542,6 +544,7 @@ export default {
         occupancythreshold: 80,
         minflowsaturationthreshold: 30,
         maxflowsaturationthreshold: 70,
+        associatedlaneid: '', // 检测器关联的车道索引
         ...defaultDetectorParam
       }
       this.curChooseIconIndex = detectoritem.index

package/package/kisscomps/components/DrawChannelization/drawsvg/laneEditPanel.vue

@@ -151,8 +151,7 @@
            label-position="left"
            label-width="130px">
            <el-form-item
-                :label="$t('openatccomponents.channelizationmap.occupancythreshold') + ':'"
-                prop="intersection">
+                :label="$t('openatccomponents.channelizationmap.occupancythreshold') + ':'">
               <!-- <el-input-number :min="0" :max="100" :precision="0" :step="1" :controls="false"
                 :value="occupancythreshold" size="mini"
                 @change="handleChangeOccuthreshold" />
@@ -167,8 +166,7 @@
               </el-select>
             </el-form-item>
             <el-form-item
-                :label="$t('openatccomponents.channelizationmap.saturationthreshold') + ':'"
-                prop="count">
+                :label="$t('openatccomponents.channelizationmap.saturationthreshold') + ':'">
               <!-- <el-input-number :min="0" :max="100" :precision="0" :step="1" :controls="false"
                 :value="flowsaturationthreshold" size="mini"
                 @change="handleChangeFlowthreshold" />
@@ -195,6 +193,17 @@
             </el-form-item>
         </el-form>
       </div>
+      <div class="detector-associated">
+        <div class="tittle">{{$t('openatccomponents.channelizationmap.laneassociated')}}</div>
+        <el-select filterable clearable :value="Data.associatedlaneid" @change="handleAssociatedLaneid">
+          <el-option
+            v-for="id in AssociatedLaneidOptions"
+            :key="'Laneid' + id"
+            :label="id"
+            :value="id">
+          </el-option>
+        </el-select>
+      </div>
     </div>
     <div class="basic-coord" v-if="JSON.stringify(Data) !== '{}' && Data.icontype !== 'countdown' && Data.icontype !== 'crossmap'">
       <div class="tittle">{{$t('openatccomponents.channelizationmap.basicinfo')}}</div>
@@ -402,7 +411,8 @@ export default {
       maxflowResholdOptions: [],
       occupancythreshold: 80,
       minflowsaturationthreshold: 30,
-      maxflowsaturationthreshold: 70
+      maxflowsaturationthreshold: 70,
+      AssociatedLaneidOptions: []
     }
   },
   watch: {
@@ -428,11 +438,12 @@ export default {
         if (data.maxflowsaturationthreshold !== undefined) {
           this.maxflowsaturationthreshold = data.maxflowsaturationthreshold
         }
-        this.handleDisabledMinflowOption(data.minflowsaturationthreshold)
-        this.handleDisabledMaxflowOption(data.maxflowsaturationthreshold)
         if (data.flip !== undefined) {
           this.flip = data.flip
         }
+        if (this.Data.icontype === 'detector' && this.Data.detailtype === 'detector') {
+          this.handleDetectorSettings()
+        }
         this.getCurPedPosList(data.iconpedtypeid)
       },
       deep: true
@@ -626,9 +637,31 @@ export default {
       this.iconObj.y = basicCoord.y
       this.iconObj.angle = basicCoord.angle
       this.$emit('changeIconDataByType', this.iconObj, ['x', 'y', 'angle'])
+      if (basicCoord.keyid !== undefined) {
+        this.iconObj.keyid = basicCoord.keyid
+        this.$emit('changeIconDataByType', this.iconObj, ['keyid'])
+      }
     },
     handleClone () {
       this.$emit('cloneItem', this.iconObj)
+    },
+    handleDetectorSettings () {
+      this.handleDisabledMinflowOption()
+      this.handleDisabledMaxflowOption()
+      this.getAssociatedLaneidOptions()
+    },
+    handleAssociatedLaneid (value) {
+      // 检测器关联车道索引
+      this.iconObj.associatedlaneid = value
+      this.$emit('changeIconDataByType', this.iconObj, ['associatedlaneid'])
+    },
+    getAssociatedLaneidOptions () {
+      // 获取当前所有车道的id（即索引）
+      let ids = this.Motorways.map(ele => ele.id)
+      ids.sort(function (a, b) {
+        return a - b
+      })
+      this.AssociatedLaneidOptions = ids
     }
   },
   created () {

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

@@ -0,0 +1,191 @@
+/**
+ * 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 assophaseList" :key="index">
+      <div class="single-phase" :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" @click="selectPhase(index, item)" 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'
+export default {
+  name: 'phase-associated-component',
+  data () {
+    return {
+      assophaseList: [], // 渠化界面的相位列表
+      preselectPhase: -1,
+      id: 1,
+      isCanAdd: true
+    }
+  },
+  props: {
+    editData: {
+      type: Object
+    },
+    Motorways: {
+      type: Array
+    }
+  },
+  computed: {
+    ...mapState({
+      associatedphaselist: state => state.globalParam.associatedPhaseList,
+      roadDirection: state => state.globalParam.roadDirection,
+      PhaseDataMgr: state => state.globalParam.PhaseDataMgr
+    })
+  },
+  watch: {
+    associatedphaselist: {
+      handler: function (list) {
+        this.assophaseList = JSON.parse(JSON.stringify(list))
+      },
+      deep: true
+    },
+    assophaseList: {
+      handler: function (list) {
+        if (list.length >= 40) {
+          this.isCanAdd = false
+        } else {
+          this.isCanAdd = true
+        }
+      },
+      deep: true
+    },
+    editData: {
+      handler: function (editobj) {
+        if (editobj.phaseid !== undefined) {
+          this.preselectPhase = editobj.phaseid
+        } else {
+          this.preselectPhase = -1
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    selectPhase (index, item) {
+      let direction = this.PhaseDataMgr.editDirPosToPhaseDireaciton(this.editData.icondireid, this.editData.lanePosition)
+      // 校验同方位车道不能关联不同相位
+      if (this.PhaseDataMgr.checkSameDirectionPhase(direction, item.id, this.editData.phaseid, this.Motorways, this.editData) === false) {
+        this.$message.error(this.$t('openatccomponents.channelizationmap.associatedphaseerror'))
+        return
+      }
+      // 关联相位
+      this.preselectPhase = item.id
+      let alldirection = direction
+      this.$emit('selectPhase', this.preselectPhase, alldirection)
+    },
+    changeDirection (choosedicon) {
+      for (let i = 0; i < this.assophaseList.length; i++) {
+        if (this.assophaseList[i].id === choosedicon.phaseid) {
+          let direction = this.PhaseDataMgr.editDirPosToPhaseDireaciton(choosedicon.icondireid, choosedicon.lanePosition, this.preselectPhase)
+          // 校验同方位车道不能关联不同相位
+          if (this.PhaseDataMgr.checkSameDirectionPhase(direction, choosedicon.phaseid) === false) {
+            this.$message.error(this.$t('openatccomponents.channelizationmap.associatedphaseerror'))
+            return
+          }
+          let alldirection = direction
+          this.$emit('selectPhase', this.preselectPhase, alldirection)
+        }
+      }
+    },
+    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.PhaseDataMgr.deleteOriginPhase(index)
+      // 删除关联此相位的所有车道相位id
+      this.handleDisassociatePhase(row.id)
+      if (row.id === this.preselectPhase) {
+        this.preselectPhase = -1
+      }
+    },
+    handleDisassociatePhase (deletePhaseid) {
+      // 删除相位后，解除相位关联
+      this.$emit('handleDisassociatePhase', deletePhaseid)
+    },
+    handleAddPhase () {
+      if (this.assophaseList.length >= 40) {
+        this.$message.error(
+          this.$t('openatccomponents.phase.mostdata')
+        )
+        return
+      }
+      // 更新模型内初始相位列表数据
+      this.PhaseDataMgr.addOriginPhase()
+    },
+    getPedPhasePos () {
+    // 行人相位信息
+      this.sidewalkPhaseData = []
+      this.assophaseList.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()
+  },
+  mounted () {
+    this.assophaseList = JSON.parse(JSON.stringify(this.associatedphaselist))
+  },
+  destroyed () {
+  }
+}
+</script>
+<style lang="scss">
+</style>