openatc-components 0.0.102 → 0.0.103

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

@@ -64,6 +64,13 @@
 
       <div class="phase-associated">
         <div class="tittle">{{$t('openatccomponents.channelizationmap.phaseassociated')}}</div>
+        <!-- 相位可以编辑，增加，删除，校验 -->
+        <!-- <PhaseAssociatedComponentCheck
+          ref="phaseAssociated"
+          :editData="Data"
+          :Motorways="Motorways"
+          @selectPhase="selectPhase"
+          @handleDisassociatePhase="handleDisassociatePhase" /> -->
         <!-- 相位仅可以关联选择，不可修改 -->
         <PhaseAssociatedComponent
           :editData="Data"
@@ -108,6 +115,12 @@
       </div>
       <div class="phase-associated">
         <div class="tittle">{{$t('openatccomponents.channelizationmap.phaseassociated')}}</div>
+        <!-- 相位可以编辑，增加，删除，校验 -->
+        <!-- <PhaseAssociatedComponentCheck
+          ref="phaseAssociated"
+          :editData="Data"
+          @selectPhase="selectPhase"
+          @handleDisassociatePhase="handleDisassociatePhase" /> -->
         <!-- 相位仅可以关联选择，不可修改 -->
         <PhaseAssociatedComponent
           :editData="Data"
@@ -122,12 +135,6 @@
 
     <!-- 检测器编辑面板 -->
     <div class="detector" v-if="Data.icontype === 'detector' && Data.detailtype === 'detector'">
-      <div class="edit-id">
-        <span style="margin-right: 3px;">
-          {{$t('openatccomponents.channelizationmap.detector') + ':'}}
-        </span>
-        <span>{{Data.id}}</span>
-      </div>
       <div class="detector-type">
         <div class="tittle">{{$t('openatccomponents.channelizationmap.detectortype')}}</div>
         <div class="each-icon" v-for="(item, index) in detectortypeList" :key="index">
@@ -153,71 +160,40 @@
            <el-form-item
                 :label="$t('openatccomponents.channelizationmap.occupancythreshold') + ':'"
                 prop="intersection">
-              <!-- <el-input-number :min="0" :max="100" :precision="0" :step="1" :controls="false"
+              <el-input-number :min="0" :max="100" :precision="0" :step="1" :controls="false"
                 :value="occupancythreshold" size="mini"
                 @change="handleChangeOccuthreshold" />
-              <span class="detector-threshold-formtext">%</span> -->
-              <el-select :value="occupancythreshold" @change="handleChangeOccuthreshold">
-                <el-option
-                  v-for="item in occupResholdOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
+              <span class="detector-threshold-formtext">%</span>
             </el-form-item>
             <el-form-item
                 :label="$t('openatccomponents.channelizationmap.saturationthreshold') + ':'"
                 prop="count">
-              <!-- <el-input-number :min="0" :max="100" :precision="0" :step="1" :controls="false"
+              <el-input-number :min="0" :max="100" :precision="0" :step="1" :controls="false"
                 :value="flowsaturationthreshold" size="mini"
                 @change="handleChangeFlowthreshold" />
-              <span class="detector-threshold-formtext">%</span> -->
-              <el-select :value="minflowsaturationthreshold" @change="handleChangeMinFlowthreshold">
-                <el-option
-                  v-for="item in minflowResholdOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                  :disabled="item.disabled">
-                </el-option>
-              </el-select>
-              <span class="flow-separator">-</span>
-              <el-select :value="maxflowsaturationthreshold" @change="handleChangeMaxFlowthreshold">
-                <el-option
-                  v-for="item in maxflowResholdOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                  :disabled="item.disabled">
-                </el-option>
-              </el-select>
+              <span class="detector-threshold-formtext">%</span>
             </el-form-item>
         </el-form>
       </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>
-      <BasicCoordInfo :drawingObjInfo="Data" @handleChangeBasicCoord="handleChangeBasicCoord" />
-    </div>
+
     <div class="delete-drawed-item" v-if="JSON.stringify(Data) !== '{}' && Data.detailtype !== 'detectorChart'">
-      <el-button type="primary" @click="handledelete" v-if="Data.icontype !== 'crossmap'">{{$t('openatccomponents.channelizationmap.delete')}}</el-button>
-      <el-button type="primary" @click="handleClone" v-if="Data.icontype !== 'countdown' && Data.icontype !== 'crossmap'">{{$t('openatccomponents.channelizationmap.clone')}}</el-button>
+      <el-button type="primary" @click="handledelete">{{$t('openatccomponents.channelizationmap.delete')}}</el-button>
     </div>
   </div>
 </template>
 <script>
+import PhaseAssociatedComponentCheck from './phaseAssociatedComponent.check'
 import PhaseAssociatedComponent from './phaseAssociatedComponent.vue'
 import OverlapAssociatedComponent from './overlapAssociatedComponent'
 import DetectorAssociatedComponent from './detectorAssociatedComponent.vue'
-import BasicCoordInfo from './basicCoordInfo'
 export default {
   name: 'lane-edit-panel',
   components: {
     PhaseAssociatedComponent,
+    PhaseAssociatedComponentCheck,
     OverlapAssociatedComponent,
-    DetectorAssociatedComponent,
-    BasicCoordInfo
+    DetectorAssociatedComponent
   },
   data () {
     return {
@@ -397,12 +373,8 @@ export default {
         iconclass: 'custom-peddetector',
         name: this.$t('openatccomponents.channelizationmap.pedestriandetector')
       }],
-      occupResholdOptions: [],
-      minflowResholdOptions: [],
-      maxflowResholdOptions: [],
       occupancythreshold: 80,
-      minflowsaturationthreshold: 30,
-      maxflowsaturationthreshold: 70
+      flowsaturationthreshold: 20
     }
   },
   watch: {
@@ -422,11 +394,8 @@ export default {
         if (data.occupancythreshold !== undefined) {
           this.occupancythreshold = data.occupancythreshold
         }
-        if (data.minflowsaturationthreshold !== undefined) {
-          this.minflowsaturationthreshold = data.minflowsaturationthreshold
-        }
-        if (data.maxflowsaturationthreshold !== undefined) {
-          this.maxflowsaturationthreshold = data.maxflowsaturationthreshold
+        if (data.flowsaturationthreshold !== undefined) {
+          this.flowsaturationthreshold = data.flowsaturationthreshold
         }
         if (data.flip !== undefined) {
           this.flip = data.flip
@@ -456,6 +425,7 @@ export default {
         this.iconObj.icondireid.splice(index, 1)
       }
       this.$emit('handleChooseDire', this.iconObj)
+      // this.handleAssociatedPhase()
     },
     selectLanetype (id) {
       this.iconObj.controltype = id
@@ -477,9 +447,8 @@ export default {
       if (value === 2) {
         // 行人检测器没有阈值设置
         this.iconObj.occupancythreshold = undefined
-        this.iconObj.minflowsaturationthreshold = undefined
-        this.iconObj.maxflowsaturationthreshold = undefined
-        this.$emit('changeIconDataByType', this.iconObj, ['occupancythreshold', 'minflowsaturationthreshold', 'maxflowsaturationthreshold'])
+        this.iconObj.flowsaturationthreshold = undefined
+        this.$emit('changeIconDataByType', this.iconObj, ['occupancythreshold', 'flowsaturationthreshold'])
       }
     },
     selectPedPos (value) {
@@ -492,6 +461,7 @@ export default {
     selectLanePos (value) {
       this.iconObj.lanePosition = value
       this.$emit('changeIconDataByType', this.iconObj, ['lanePosition'])
+      // this.handleAssociatedPhase()
     },
     selectPhase (phaseid, direction) {
       // 关联相位的同时，会修改相位方向
@@ -515,6 +485,12 @@ export default {
     handleDisassociatePhase (deletePhaseid) {
       this.$emit('handleDisassociatePhase', deletePhaseid)
     },
+    // handleAssociatedPhase () {
+    //   // 如果已关联相位，再改变车道转向或者方位时，需要同步更新选中的关联相位
+    //   if (this.iconObj.phaseid !== undefined) {
+    //     this.$refs.phaseAssociated.changeDirection(this.iconObj)
+    //   }
+    // },
     selectAssociatedDetector (detectorid) {
       // 仅关联检测器，不修改
       this.iconObj.detectorid = detectorid
@@ -530,53 +506,15 @@ export default {
       this.iconObj.occupancythreshold = occupancythreshold
       this.$emit('changeIconDataByType', this.iconObj, ['occupancythreshold'])
     },
-    handleChangeMinFlowthreshold (minflowsaturationthreshold) {
-      if (minflowsaturationthreshold === undefined) {
+    handleChangeFlowthreshold (flowsaturationthreshold) {
+      if (flowsaturationthreshold === undefined) {
         this.$message.error(this.$t('openatccomponents.channelizationmap.checkthreshold'))
-        this.minflowsaturationthreshold = 30
+        this.flowsaturationthreshold = 20
         return
       }
-      this.minflowsaturationthreshold = minflowsaturationthreshold
-      this.iconObj.minflowsaturationthreshold = minflowsaturationthreshold
-      this.$emit('changeIconDataByType', this.iconObj, ['minflowsaturationthreshold'])
-      this.handleDisabledMaxflowOption()
-    },
-    handleDisabledMinflowOption () {
-      // 此处需要排他，恢复上次置灰到默认值
-      this.minflowResholdOptions = this.minflowResholdOptions.map(option => ({
-        label: option.label,
-        value: option.value
-      }))
-      // 控制流量饱和度最小阈值的禁用范围
-      for (let i = 0; i < this.minflowResholdOptions.length; i++) {
-        if (this.minflowResholdOptions[i].value >= this.maxflowsaturationthreshold) {
-          this.minflowResholdOptions[i].disabled = true
-        }
-      }
-    },
-    handleChangeMaxFlowthreshold (maxflowsaturationthreshold) {
-      if (maxflowsaturationthreshold === undefined) {
-        this.$message.error(this.$t('openatccomponents.channelizationmap.checkthreshold'))
-        this.maxflowsaturationthreshold = 70
-        return
-      }
-      this.maxflowsaturationthreshold = maxflowsaturationthreshold
-      this.iconObj.maxflowsaturationthreshold = maxflowsaturationthreshold
-      this.$emit('changeIconDataByType', this.iconObj, ['maxflowsaturationthreshold'])
-      this.handleDisabledMinflowOption()
-    },
-    handleDisabledMaxflowOption () {
-      // 此处需要排他，恢复上次置灰到默认值
-      this.maxflowResholdOptions = this.maxflowResholdOptions.map(option => ({
-        label: option.label,
-        value: option.value
-      }))
-      // 控制流量饱和度最大阈值的禁用范围
-      for (let i = 0; i < this.maxflowResholdOptions.length; i++) {
-        if (this.maxflowResholdOptions[i].value <= this.minflowsaturationthreshold) {
-          this.maxflowResholdOptions[i].disabled = true
-        }
-      }
+      this.flowsaturationthreshold = flowsaturationthreshold
+      this.iconObj.flowsaturationthreshold = flowsaturationthreshold
+      this.$emit('changeIconDataByType', this.iconObj, ['flowsaturationthreshold'])
     },
     getCurPedPosList (iconpedtypeid) {
       // 方位根据行人类型显示
@@ -594,44 +532,8 @@ export default {
     handleChangeFilp (value) {
       this.iconObj.flip = value
       this.$emit('changeIconDataByType', this.iconObj, ['flip'])
-    },
-    createResholdSelectOptions () {
-      for (let i = 5; i < 100; i = i + 5) {
-        let option = {
-          label: i + '%',
-          value: i
-        }
-        this.occupResholdOptions.push(option)
-        if (i <= this.minflowsaturationthreshold) {
-          option.disabled = true
-        }
-        this.maxflowResholdOptions.push(option)
-      }
-      for (let i = 5; i < 100; i = i + 5) {
-        let option = {
-          label: i + '%',
-          value: i
-        }
-        if (i >= this.maxflowsaturationthreshold) {
-          option.disabled = true
-        }
-        this.minflowResholdOptions.push(option)
-      }
-    },
-    handleChangeBasicCoord (basicCoord) {
-      // 基础信息面板修改
-      this.iconObj.x = basicCoord.x
-      this.iconObj.y = basicCoord.y
-      this.iconObj.angle = basicCoord.angle
-      this.$emit('changeIconDataByType', this.iconObj, ['x', 'y', 'angle'])
-    },
-    handleClone () {
-      this.$emit('cloneItem', this.iconObj)
     }
   },
-  created () {
-    this.createResholdSelectOptions()
-  },
   mounted () {
     if (JSON.stringify(this.Data) === '{}') return
     this.iconObj = JSON.parse(JSON.stringify(this.Data))
@@ -647,11 +549,8 @@ export default {
     if (this.Data.occupancythreshold !== undefined) {
       this.occupancythreshold = this.Data.occupancythreshold
     }
-    if (this.Data.minflowsaturationthreshold !== undefined) {
-      this.minflowsaturationthreshold = this.Data.minflowsaturationthreshold
-    }
-    if (this.Data.maxflowsaturationthreshold !== undefined) {
-      this.maxflowsaturationthreshold = this.Data.maxflowsaturationthreshold
+    if (this.Data.flowsaturationthreshold !== undefined) {
+      this.flowsaturationthreshold = this.Data.flowsaturationthreshold
     }
     if (this.Data.flip !== undefined) {
       this.flip = this.Data.flip

package/src/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>