openatc-components 0.0.94 → 0.0.95

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

@@ -0,0 +1,109 @@
+/**
+ * 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="custom-cross-part draw-channelization">
+    <FirstImportCrossmap v-if="pageindex === 1"
+    @loadSvgString="loadSvgString" />
+    <CustomDraw v-show="pageindex === 2" ref="CustomDraw"
+      :AgentId="AgentId"
+      :loadedChannelizatonData="loadedChannelizatonData"
+      @saveCallback="saveCallback" />
+  </div>
+</template>
+<script>
+import FirstImportCrossmap from './firstImportCrossmap'
+import CustomDraw from './index.draw'
+// import { mapState } from 'vuex'
+// import { getIframdevid } from '../../../../utils/auth.js'
+import { getChannelizatonChart } from '../../../../api/cross'
+// import { getMessageByCode } from '../../../utils/responseMessage.js'
+
+export default {
+  name: 'custom-channelization',
+  components: {
+    FirstImportCrossmap,
+    CustomDraw
+  },
+  props: {
+    AgentId: {
+      type: String,
+      default: '0'
+    },
+    tscParam: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      pageindex: 1, // 渠化编辑显示： 1 代表首次导入 2 代表已有保存的渠化图
+      loadedChannelizatonData: {} // 接口返回的已保存路口渠化数据
+    }
+  },
+  watch: {
+    AgentId: {
+      handler: function (val) {
+        this.getChannelizatonChart()
+      },
+      deep: true
+    },
+    tscParam: {
+      handler: function (val) {
+        if (val) {
+          this.$store.dispatch('SetTscParam', val)
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    loadSvgString (type, imgstr) {
+      this.pageindex = 2
+      this.$nextTick(() => {
+        this.$refs.CustomDraw.loadSvgString(type, imgstr)
+      })
+    },
+    getChannelizatonChart () {
+      // let agentid = getIframdevid()
+      let _this = this
+      _this.pageindex = 1
+      getChannelizatonChart(this.AgentId).then(data => {
+        if (!data.data.success) {
+          // let parrenterror = getMessageByCode(data.data.code, _this.$i18n.locale)
+          // if (data.data.data) {
+          //   // 子类型错误
+          //   let childErrorCode = data.data.data.errorCode
+          //   if (childErrorCode) {
+          //     let childerror = getMessageByCode(data.data.data.errorCode, _this.$i18n.locale)
+          //     _this.$message.error(parrenterror + ',' + childerror)
+          //   }
+          // } else {
+          //   _this.$message.error(parrenterror)
+          // }
+          return
+        }
+        if (JSON.stringify(data.data.data) === '{}') return
+        _this.pageindex = 2
+        _this.loadedChannelizatonData = JSON.parse(JSON.stringify(data.data.data))
+      })
+    },
+    saveCallback (res) {
+      this.$emit('saveCallback', res)
+    }
+  },
+  mounted () {
+    this.getChannelizatonChart()
+  }
+}
+</script>
+<style scoped>
+</style>

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

@@ -0,0 +1,563 @@
+/**
+ * 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="lane-edit-panel">
+    <!-- 车道编辑面板 -->
+    <div class="vehile" v-if="Data.icontype === 'vehile'">
+      <div class="edit-id">
+        <span style="margin-right: 3px;">
+          {{$t('openatccomponents.channelizationmap.vehiclelane') + ':'}}
+        </span>
+        <span>{{Data.id}}</span>
+      </div>
+      <div class="directions">
+        <div class="tittle">{{$t('openatccomponents.channelizationmap.laneturn')}}</div>
+        <div class="each-icon" v-for="(item, index) in directionList" :key="index">
+          <div class="single-icon"
+          @click="selectDire(item.id)"
+          :class="preselectDirection.indexOf(item.id) !== -1 ? 'single-icon-select' : ''">
+            <svg-icon :icon-class="item.iconclass" className="direction-icon"></svg-icon>
+          </div>
+          <div class="single-icon-name">{{item.name}}</div>
+        </div>
+      </div>
+
+      <div class="position">
+        <div class="tittle">{{$t('openatccomponents.channelizationmap.position')}}</div>
+        <div class="position-options">
+          <el-radio-group v-model="lanePosition" @change="selectLanePos">
+            <el-radio :label="1">{{$t('openatccomponents.channelizationmap.eastward')}}</el-radio>
+            <el-radio :label="2">{{$t('openatccomponents.channelizationmap.westward')}}</el-radio>
+            <el-radio :label="3">{{$t('openatccomponents.channelizationmap.southward')}}</el-radio>
+            <el-radio :label="4">{{$t('openatccomponents.channelizationmap.northward')}}</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+
+      <div class="lane-types">
+        <div class="tittle">{{$t('openatccomponents.channelizationmap.lanetype')}}</div>
+        <div class="each-icon" v-for="(item, index) in lanetypeList" :key="index">
+          <div class="single-icon"
+          @click="selectLanetype(item.id)"
+          :class="preselectLanetype === item.id ? 'single-icon-select' : ''">
+            <svg-icon :icon-class="item.iconclass" className="type-icon"></svg-icon>
+          </div>
+          <div class="single-icon-name">{{item.name}}</div>
+        </div>
+        <div v-if="Data.controltype !== 0 && Data.controltype !== 1">
+          <el-switch
+          :value="flip"
+          @change="handleChangeFilp"
+          :active-text="$t('openatccomponents.channelizationmap.flipdisplay')">
+        </el-switch>
+        </div>
+      </div>
+
+      <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"
+          @selectPhaseNew="selectPhaseNew" />
+      </div>
+      <div class="overlap-associated">
+        <div class="tittle">{{$t('openatccomponents.channelizationmap.overlapassociated')}}</div>
+        <OverlapAssociatedComponent :editData="Data"
+          @selectPhaseNew="selectPhaseNew"/>
+      </div>
+    </div>
+
+    <!-- 行人编辑面板 -->
+    <div class="ped" v-if="Data.icontype === 'ped'">
+      <div class="edit-id">
+        <span style="margin-right: 3px;">
+          {{$t('openatccomponents.channelizationmap.sidewalk') + ':'}}
+        </span>
+        <span>{{Data.id}}</span>
+      </div>
+      <div class="ped-type">
+        <div class="tittle">{{$t('openatccomponents.channelizationmap.pedestriantype')}}</div>
+        <div class="each-icon" v-for="(item, index) in pedestriantypeList" :key="index">
+          <div class="single-icon"
+          @click="selectPedType(item.id)"
+          :class="Data.iconpedtypeid === item.id ? 'single-icon-select' : ''">
+            <svg-icon :icon-class="item.iconclass" className="ped-icon"></svg-icon>
+          </div>
+          <div class="single-icon-name">{{item.name}}</div>
+        </div>
+      </div>
+      <div class="ped-position">
+        <div class="tittle">{{$t('openatccomponents.channelizationmap.position')}}</div>
+        <div class="each-icon" v-for="(item, index) in pedPosList" :key="index">
+          <div class="single-icon"
+          @click="selectPedPos(item.id)"
+          :class="Data.iconpedposition === item.id ? 'single-icon-select' : ''">
+            <svg-icon :icon-class="item.iconclass" className="ped-icon"></svg-icon>
+          </div>
+          <div class="single-icon-name">{{item.name}}</div>
+        </div>
+      </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"
+          @selectPhaseNew="selectPhaseNew" />
+      </div>
+      <div class="overlap-associated">
+        <div class="tittle">{{$t('openatccomponents.channelizationmap.overlapassociated')}}</div>
+        <OverlapAssociatedComponent :editData="Data"
+          @selectPhaseNew="selectPhaseNew"/>
+      </div>
+    </div>
+
+    <!-- 检测器编辑面板 -->
+    <div class="detector" v-if="Data.icontype === 'detector' && Data.detailtype === 'detector'">
+      <div class="detector-type">
+        <div class="tittle">{{$t('openatccomponents.channelizationmap.detectortype')}}</div>
+        <div class="each-icon" v-for="(item, index) in detectortypeList" :key="index">
+          <div class="single-icon"
+          @click="selectDetectorType(item.id)"
+          :class="Data.detectortype === item.id ? 'single-icon-select' : ''">
+            <svg-icon :icon-class="item.iconclass" className="ped-icon"></svg-icon>
+          </div>
+          <div class="single-icon-name">{{item.name}}</div>
+        </div>
+      </div>
+      <div class="detector-associated">
+        <div class="tittle">{{$t('openatccomponents.channelizationmap.detectorassociated')}}</div>
+        <DetectorAssociatedComponent :editData="Data"
+          @selectAssociatedDetector="selectAssociatedDetector"/>
+      </div>
+      <div class="detector-threshold" v-if="Data.detectortype === 1">
+        <div class="tittle">{{$t('openatccomponents.channelizationmap.detectorthreshold')}}</div>
+        <el-form
+           ref="threshold"
+           label-position="left"
+           label-width="130px">
+           <el-form-item
+                :label="$t('openatccomponents.channelizationmap.occupancythreshold') + ':'"
+                prop="intersection">
+              <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-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"
+                :value="flowsaturationthreshold" size="mini"
+                @change="handleChangeFlowthreshold" />
+              <span class="detector-threshold-formtext">%</span>
+            </el-form-item>
+        </el-form>
+      </div>
+    </div>
+
+    <div class="delete-drawed-item" v-if="JSON.stringify(Data) !== '{}' && Data.detailtype !== 'detectorChart'">
+      <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'
+export default {
+  name: 'lane-edit-panel',
+  components: {
+    PhaseAssociatedComponent,
+    PhaseAssociatedComponentCheck,
+    OverlapAssociatedComponent,
+    DetectorAssociatedComponent
+  },
+  data () {
+    return {
+      iconObj: {},
+      preselectDirection: [1], // 预选方向
+      preselectPedType: [1], // 预选行人类型
+      directionList: [], // 业务下方向选择列表（非机动车没有掉头）
+      allDirectionsList: [{
+        id: 1,
+        key: 'straightahead',
+        iconclass: 'custom-straightahead',
+        name: this.$t('openatccomponents.channelizationmap.straightahead')
+      }, {
+        id: 2,
+        key: 'turnleft',
+        iconclass: 'custom-turnleft',
+        name: this.$t('openatccomponents.channelizationmap.turnleft')
+      }, {
+        id: 3,
+        key: 'turnright',
+        iconclass: 'custom-turnright',
+        name: this.$t('openatccomponents.channelizationmap.turnright')
+      }, {
+        id: 4,
+        key: 'turnaround',
+        iconclass: 'custom-turnaround',
+        name: this.$t('openatccomponents.channelizationmap.turnaround')
+      }],
+      pedestriantypeList: [{
+        id: 1,
+        key: 'pedestrian',
+        iconclass: 'custom-pedestrian',
+        name: this.$t('openatccomponents.channelizationmap.pedestrian')
+      }, {
+        id: 2,
+        key: 'secondcrossing',
+        iconclass: 'custom-secondcrossing',
+        name: this.$t('openatccomponents.channelizationmap.secondcrossing')
+      }, {
+        id: 3,
+        key: 'xpedestrian',
+        iconclass: 'custom-xpedestrian',
+        name: this.$t('openatccomponents.channelizationmap.xpedestrian')
+      }, {
+        id: 4,
+        key: 'sectionpedestrian',
+        iconclass: 'custom-sectionpedestrian',
+        name: this.$t('openatccomponents.channelizationmap.sectionpedestrian')
+      }],
+      preselectLanetype: 0,
+      flip: false, // 默认车道类型图标不反转，正向为西
+      lanetypeList: [{
+        id: 0, // id对于controltype
+        key: 'vehiclemainroad',
+        iconclass: 'custom-vehiclemainroad',
+        name: this.$t('openatccomponents.channelizationmap.vehiclemainroad')
+      }, {
+        id: 1,
+        key: 'vehiclebranch',
+        iconclass: 'custom-vehiclebranch',
+        name: this.$t('openatccomponents.channelizationmap.vehiclebranch')
+      }, {
+        id: 6,
+        key: 'nonmotorizedlane',
+        iconclass: 'custom-nonmotorizedlane',
+        name: this.$t('openatccomponents.channelizationmap.nonmotorizedlane')
+      }, {
+        id: 3,
+        key: 'buslane',
+        iconclass: 'custom-buslane',
+        name: this.$t('openatccomponents.channelizationmap.buslane')
+      }, {
+        id: 4,
+        key: 'BRTlane',
+        iconclass: 'custom-BRTlane',
+        name: this.$t('openatccomponents.channelizationmap.BRTlane')
+      }, {
+        id: 5,
+        key: 'tramlane',
+        iconclass: 'custom-tramlane',
+        name: this.$t('openatccomponents.channelizationmap.tramlane')
+      }],
+      lanePosition: 1, // 方位默认东向
+      pedPosList: [], // 当前显示的方位列表，由类型决定
+      pedCrossingPosList: [{
+        id: 1,
+        key: 'pedeastward',
+        iconclass: 'custom-pedeastward',
+        name: this.$t('openatccomponents.channelizationmap.eastward')
+      }, {
+        id: 2,
+        key: 'pedwestward',
+        iconclass: 'custom-pedwestward',
+        name: this.$t('openatccomponents.channelizationmap.westward')
+      }, {
+        id: 3,
+        key: 'pedsouthward',
+        iconclass: 'custom-pedsouthward',
+        name: this.$t('openatccomponents.channelizationmap.southward')
+      }, {
+        id: 4,
+        key: 'pednorthward',
+        iconclass: 'custom-pednorthward',
+        name: this.$t('openatccomponents.channelizationmap.northward')
+      }],
+      pedSecondCrossingPosList: [{
+        id: 5,
+        key: 'east-top',
+        iconclass: 'custom-east-top',
+        name: this.$t('openatccomponents.channelizationmap.etped')
+      }, {
+        id: 6,
+        key: 'east-bottom',
+        iconclass: 'custom-east-bottom',
+        name: this.$t('openatccomponents.channelizationmap.ebped')
+      }, {
+        id: 7,
+        key: 'west-top',
+        iconclass: 'custom-west-top',
+        name: this.$t('openatccomponents.channelizationmap.wtped')
+      }, {
+        id: 8,
+        key: 'west-bottom',
+        iconclass: 'custom-west-bottom',
+        name: this.$t('openatccomponents.channelizationmap.wbped')
+      }, {
+        id: 9,
+        key: 'south-left',
+        iconclass: 'custom-south-left',
+        name: this.$t('openatccomponents.channelizationmap.slped')
+      }, {
+        id: 10,
+        key: 'south-right',
+        iconclass: 'custom-south-right',
+        name: this.$t('openatccomponents.channelizationmap.srped')
+      }, {
+        id: 11,
+        key: 'north-left',
+        iconclass: 'custom-north-left',
+        name: this.$t('openatccomponents.channelizationmap.nlped')
+      }, {
+        id: 12,
+        key: 'north-right',
+        iconclass: 'custom-north-right',
+        name: this.$t('openatccomponents.channelizationmap.nrped')
+      }],
+      pedObliqueCrossingPosList: [{
+        id: 13,
+        key: 'xrped',
+        iconclass: 'custom-xrped',
+        name: this.$t('openatccomponents.channelizationmap.xrped')
+      }, {
+        id: 14,
+        key: 'xlped',
+        iconclass: 'custom-xlped',
+        name: this.$t('openatccomponents.channelizationmap.xlped')
+      }],
+      pedSectionCrossingPosList: [{
+        id: 15,
+        key: 'ewped',
+        iconclass: 'custom-ewped',
+        name: this.$t('openatccomponents.channelizationmap.ewped')
+      }, {
+        id: 16,
+        key: 'snped',
+        iconclass: 'custom-snped',
+        name: this.$t('openatccomponents.channelizationmap.snped')
+      }],
+      detectortypeList: [{
+        id: 1,
+        key: 'vehiclemainroad',
+        iconclass: 'custom-detector',
+        name: this.$t('openatccomponents.channelizationmap.vehicledetector')
+      }, {
+        id: 2,
+        key: 'vehiclebranch',
+        iconclass: 'custom-peddetector',
+        name: this.$t('openatccomponents.channelizationmap.pedestriandetector')
+      }],
+      occupancythreshold: 80,
+      flowsaturationthreshold: 20
+    }
+  },
+  watch: {
+    Data: {
+      handler: function (data) {
+        this.iconObj = JSON.parse(JSON.stringify(data))
+        this.initDirOptions()
+        if (data.icondireid !== undefined) {
+          this.preselectDirection = JSON.parse(JSON.stringify(data.icondireid))
+        }
+        if (data.controltype !== undefined) {
+          this.preselectLanetype = data.controltype
+        }
+        if (data.lanePosition !== undefined) {
+          this.lanePosition = data.lanePosition
+        }
+        if (data.occupancythreshold !== undefined) {
+          this.occupancythreshold = data.occupancythreshold
+        }
+        if (data.flowsaturationthreshold !== undefined) {
+          this.flowsaturationthreshold = data.flowsaturationthreshold
+        }
+        if (data.flip !== undefined) {
+          this.flip = data.flip
+        }
+        this.getCurPedPosList(data.iconpedtypeid)
+      },
+      deep: true
+    }
+  },
+  props: {
+    Data: {
+      type: Object
+    },
+    Motorways: {
+      type: Array
+    }
+  },
+  methods: {
+    initDirOptions () {
+      this.directionList = JSON.parse(JSON.stringify(this.allDirectionsList))
+    },
+    selectDire (value) {
+      let index = this.iconObj.icondireid.indexOf(value)
+      if (index === -1) {
+        this.iconObj.icondireid.push(value)
+      } else {
+        this.iconObj.icondireid.splice(index, 1)
+      }
+      this.$emit('handleChooseDire', this.iconObj)
+      // this.handleAssociatedPhase()
+    },
+    selectLanetype (id) {
+      this.iconObj.controltype = id
+      this.$emit('changeIconDataByType', this.iconObj, ['controltype'])
+    },
+    selectPedType (value) {
+      this.iconObj.iconpedtypeid = value
+      this.getCurPedPosList(value)
+      // 默认选择第一方位
+      this.iconObj.iconpedposition = this.pedPosList[0].id
+      this.$emit('handleChoosePed', this.iconObj)
+    },
+    selectDetectorType (value) {
+      if (this.iconObj.detectortype !== undefined && this.iconObj.detectortype !== value) {
+        this.iconObj.detectorid = undefined
+      }
+      this.iconObj.detectortype = value
+      this.$emit('changeIconDataByType', this.iconObj, ['detectortype', 'detectorid'])
+      if (value === 2) {
+        // 行人检测器没有阈值设置
+        this.iconObj.occupancythreshold = undefined
+        this.iconObj.flowsaturationthreshold = undefined
+        this.$emit('changeIconDataByType', this.iconObj, ['occupancythreshold', 'flowsaturationthreshold'])
+      }
+    },
+    selectPedPos (value) {
+      this.iconObj.iconpedposition = value
+      this.$emit('handleChoosePed', this.iconObj)
+    },
+    handledelete () {
+      this.$emit('deleteItem', this.iconObj)
+    },
+    selectLanePos (value) {
+      this.iconObj.lanePosition = value
+      this.$emit('changeIconDataByType', this.iconObj, ['lanePosition'])
+      // this.handleAssociatedPhase()
+    },
+    selectPhase (phaseid, direction) {
+      // 关联相位的同时，会修改相位方向
+      this.iconObj.phaseid = phaseid
+      this.iconObj.phaselabel = `P${phaseid}`
+      this.iconObj.direction = direction
+      this.$emit('changeIconDataByType', this.iconObj, ['phaseid', 'phaselabel', 'direction'])
+    },
+    selectPhaseNew (phaseid, phasetype) {
+      // 仅关联相位，不修改原相位
+      this.iconObj.phasetype = phasetype
+      this.iconObj.phaseid = phaseid
+      if (phasetype === 'phase') {
+        this.iconObj.phaselabel = `P${phaseid}`
+      }
+      if (phasetype === 'overlap') {
+        this.iconObj.phaselabel = `OP${phaseid}`
+      }
+      this.$emit('changeIconDataByType', this.iconObj, ['phaseid', 'phaselabel', 'phasetype'])
+    },
+    handleDisassociatePhase (deletePhaseid) {
+      this.$emit('handleDisassociatePhase', deletePhaseid)
+    },
+    // handleAssociatedPhase () {
+    //   // 如果已关联相位，再改变车道转向或者方位时，需要同步更新选中的关联相位
+    //   if (this.iconObj.phaseid !== undefined) {
+    //     this.$refs.phaseAssociated.changeDirection(this.iconObj)
+    //   }
+    // },
+    selectAssociatedDetector (detectorid) {
+      // 仅关联检测器，不修改
+      this.iconObj.detectorid = detectorid
+      this.$emit('changeIconDataByType', this.iconObj, ['detectorid'])
+    },
+    handleChangeOccuthreshold (occupancythreshold) {
+      if (occupancythreshold === undefined) {
+        this.$message.error(this.$t('openatccomponents.channelizationmap.checkthreshold'))
+        this.occupancythreshold = 80
+        return
+      }
+      this.occupancythreshold = occupancythreshold
+      this.iconObj.occupancythreshold = occupancythreshold
+      this.$emit('changeIconDataByType', this.iconObj, ['occupancythreshold'])
+    },
+    handleChangeFlowthreshold (flowsaturationthreshold) {
+      if (flowsaturationthreshold === undefined) {
+        this.$message.error(this.$t('openatccomponents.channelizationmap.checkthreshold'))
+        this.flowsaturationthreshold = 20
+        return
+      }
+      this.flowsaturationthreshold = flowsaturationthreshold
+      this.iconObj.flowsaturationthreshold = flowsaturationthreshold
+      this.$emit('changeIconDataByType', this.iconObj, ['flowsaturationthreshold'])
+    },
+    getCurPedPosList (iconpedtypeid) {
+      // 方位根据行人类型显示
+      switch (iconpedtypeid) {
+        case 1: this.pedPosList = JSON.parse(JSON.stringify(this.pedCrossingPosList))
+          break
+        case 2: this.pedPosList = JSON.parse(JSON.stringify(this.pedSecondCrossingPosList))
+          break
+        case 3: this.pedPosList = JSON.parse(JSON.stringify(this.pedObliqueCrossingPosList))
+          break
+        case 4: this.pedPosList = JSON.parse(JSON.stringify(this.pedSectionCrossingPosList))
+          break
+      }
+    },
+    handleChangeFilp (value) {
+      this.iconObj.flip = value
+      this.$emit('changeIconDataByType', this.iconObj, ['flip'])
+    }
+  },
+  mounted () {
+    if (JSON.stringify(this.Data) === '{}') return
+    this.iconObj = JSON.parse(JSON.stringify(this.Data))
+    if (this.Data.icondireid !== undefined) {
+      this.preselectDirection = JSON.parse(JSON.stringify(this.Data.icondireid))
+    }
+    if (this.Data.controltype !== undefined) {
+      this.preselectLanetype = this.Data.controltype
+    }
+    if (this.Data.lanePosition !== undefined) {
+      this.lanePosition = this.Data.lanePosition
+    }
+    if (this.Data.occupancythreshold !== undefined) {
+      this.occupancythreshold = this.Data.occupancythreshold
+    }
+    if (this.Data.flowsaturationthreshold !== undefined) {
+      this.flowsaturationthreshold = this.Data.flowsaturationthreshold
+    }
+    if (this.Data.flip !== undefined) {
+      this.flip = this.Data.flip
+    }
+    this.getCurPedPosList(this.Data.iconpedtypeid)
+  }
+}
+</script>
+<style scoped>
+</style>