openatc-components 0.0.91 → 0.0.94

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

@@ -1,939 +0,0 @@
-/**
- * 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" v-if="visible">
-    <ImportDialog ref="importDialog" @loadSvgString="loadSvgString"/>
-    <Messagebox :visible="canclesettingvisible" :text="$t('openatccomponents.channelizationmap.canclesetting')" @cancle="cancleSetting" @ok="completeSetting"/>
-    <div class="custom-main" ref="custommain">
-      <div class="custom-group drawPanelAnimation" ref="customGroup">
-        <!-- 绘制功能 -->
-        <div class="draw-function">
-          <div class="again-import">
-            <span class="import-label">{{$t('openatccomponents.channelizationmap.importcrosspicture')}}</span>
-            <el-button
-              class="again-import-btn"
-              type="primary"
-              :disabled="!isSeletable"
-              @click="clickOpen"
-            >{{$t('openatccomponents.channelizationmap.againimport')}}</el-button>
-          </div>
-
-          <div class="draw-to-sketchpad">
-            <div class="drawtip">{{$t('openatccomponents.channelizationmap.drawtips')}}</div>
-            <div class="draw-operation">
-              <!-- <el-button
-                type="primary"
-                :disabled="!isSeletable"
-                @click="addText"
-              >添加text</el-button>-->
-              <el-button
-                v-for="editbtn in editBtnGroup"
-                :key="editbtn.type"
-                class="edit-icon-btn"
-                @click="handleAddIcon(editbtn)"
-              >
-                <LaneIconSvg :laneicon="editbtn"/>
-                <div
-                  class="btn-label"
-                  :class="{'highlightColor': editbtn.active === true, 'defaultColor': editbtn.active === false}"
-                >{{editbtn.label}}</div>
-              </el-button>
-            </div>
-          </div>
-        </div>
-        <!-- 画板区域 -->
-        <div class="sketchpad-area" id="sketchpadgroup" ref="sketchpadgroup">
-          <!-- <drr
-            id="sketchpadArea"
-            :resizable="false"
-            :x="allitem.x"
-            :y="allitem.y"
-            :w="allitem.w"
-            :h="allitem.h"
-            :angle="allitem.angle"
-            :selectable="false"
-            :aspectRatio="true"
-          > -->
-            <ChannelizationElements
-              id="channelizationElements"
-              :allitem="allitem"
-              :CrossMapVisible="CrossMapVisible"
-              :CrossMapData="CrossMapData"
-              :isSeletable="isSeletable"
-              :pointchange="pointchange"
-              @changeCrossMap="changeCrossMap"
-              :Motorways="Motorways"
-              :curChooseIconIndex="curChooseIconIndex"
-              @changeMotorwayItem="changeMotorwayItem"
-              @handleSelectIcon="handleSelectIcon"
-              :Countdown="Countdown"
-              :CountdownList="phaseCountdownMock"
-              @changeTimeItem="changeTimeItem"
-              :Pedwalk="Pedwalk"
-              @changePedItem="changePedItem"
-              :Detector="Detector"
-              @changeDetectorItem="changeDetectorItem"
-              :DetectorChart="DetectorChart"
-              :CurChooseIcon="curChooseIcon"
-              @changeDetectorChartItem="changeDetectorChartItem"
-            />
-          <!-- </drr> -->
-        </div>
-        <div class="draw-end-function">
-          <el-button type="primary" @click="handleReset()">{{$t('openatccomponents.button.reset')}}</el-button>
-          <!-- <el-button type="primary" @click="cancledraw()">{{$t('openatccomponents.button.Cancel')}}</el-button> -->
-          <el-button type="primary" @click="savedraw()">{{$t('openatccomponents.button.save')}}</el-button>
-        </div>
-      </div>
-      <div class="custom-edit" ref="customEdit">
-        <LaneEditPanel
-          :Data="curChooseIcon"
-          :choosedirections="curChooseIcon.direction"
-          :Motorways="Motorways"
-          @handleChooseDire="handleChooseDire"
-          @handleChoosePed="handleChoosePed"
-          @deleteItem="deleteItem"
-          @changeIconDataByType="changeIconDataByType"
-          @handleDisassociatePhase="handleDisassociatePhase"
-        />
-      </div>
-    </div>
-    <!-- <el-row>
-      <div class="phase-table">
-        <PhaseTable
-          :customlist="customlist"
-          @changeText="changeText"
-          @deleteItem="deleteItem"
-          @changeMotorwayItem="changeMotorwayItem"
-          @changeIconDataByType="changeIconDataByType"
-        />
-      </div>
-    </el-row> -->
-  </div>
-</template>
-
-<script>
-import ChannelizationElements from './channelizationElements'
-
-import LaneEditPanel from './laneEditPanel'
-
-import PhaseTable from './table'
-import PhaseDataModel from './utils/phaseDataModel.js'
-import LaneIconSvg from './iconSvg/laneIcon'
-
-import ImportDialog from './importDialog'
-import Messagebox from '../../MessageBox/index'
-
-import { mapState } from 'vuex'
-import PhaseDataMgr from '../phaseDataMgr.js'
-
-// import { getIframdevid } from '../../../../utils/auth.js'
-import { saveChannelizatonChart } from '../../../../api/cross'
-import { getMessageByCode } from '../../../../utils/responseMessage.js'
-
-export default {
-  name: 'draw-channelization',
-  components: {
-    Messagebox,
-    ImportDialog,
-    ChannelizationElements,
-    PhaseTable,
-    LaneIconSvg,
-    LaneEditPanel
-  },
-  computed: {
-    ...mapState({
-      phaseList: state => state.globalParam.tscParam.phaseList,
-      PhaseDataMgr: state => state.globalParam.PhaseDataMgr
-      // ,curBodyWidth: state => state.globalParam.curBodyWidth
-      // ,curOpenatcAgentid: state => state.globalParam.curOpenatcAgentid
-    })
-  },
-  props: {
-    loadedChannelizatonData: {
-      type: Object
-    },
-    AgentId: {
-      type: String,
-      default: '0'
-    }
-  },
-  watch: {
-    // curBodyWidth: {
-    //   handler: function (oldval, newval) {
-    //     if (newval !== oldval) {
-    //       this.resizePanelWidth(newval)
-    //     }
-    //   }
-    // },
-    // sidebar: {
-    //   handler: function (oldval, newval) {
-    //     setTimeout(() => {
-    //       this.resizePanelWidth(this.curBodyWidth)
-    //     }, 200)
-    //   },
-    //   deep: true
-    // },
-    AgentId: {
-      handler: function (val) {
-        // 平台设备切换时，清空上一个渠化配置
-        this.handleReset()
-      },
-      deep: true
-    },
-    loadedChannelizatonData: {
-      handler: function (val) {
-        // 平台设备切换时，重载当前路口保存的渠化配置
-        this.load('all')
-      },
-      deep: true
-    }
-  },
-  data () {
-    return {
-      visible: true,
-      canclesettingvisible: false,
-
-      isSeletable: true, // 元素是否可以编辑
-      index: 0,
-      motorid: 1, // 车道id
-      pedid: 1, // 人行道id
-      Motorways: [], // 管理所有自定义机动车图标数据
-      // Bicyclelanes: [], // 非机动车图标数据
-      customlist: [], // 所有自定义的图标列表
-      Texts: [], // 管理所有自定义文字数据
-      Pedwalk: [], // 管理所有人行横道
-      Detector: [], // 管理所有检测器
-      DetectorChart: [], // 管理所有检测器统计图
-      motorwayicon: '',
-      IconLengh: 45,
-      IconWdith: 100,
-      textareaW: 200,
-      textareaH: 100,
-      pedW: 206,
-      pedH: 22,
-      MapW: 800,
-      MapH: 200,
-      detectorW: 30,
-      detectorH: 30,
-      detectorchartW: 70,
-      detectorchartH: 100,
-      CrossMapData: {
-        svgstr: '',
-        imgfilesrc: ''
-      }, // 管理底图数据
-      allitem: {
-        x: 435,
-        y: 325,
-        w: 870,
-        h: 650,
-        angle: 0
-      },
-      countdownW: 140,
-      countdownH: 140,
-      Countdown: [], // 管理倒计时图标
-      phaseCountdownMock: [
-        {
-          id: 2,
-          phaseCountdown: 59,
-          phaseCountdownColor: '#fff'
-        },
-        {
-          id: 5,
-          phaseCountdown: 32,
-          phaseCountdownColor: '#fff'
-        }
-      ], // 倒计时动态数据模拟
-      svgvisible: false,
-      pointchange: false, // 控制选中时光标样式
-      CrossMapVisible: true, // 控制底图显示隐藏
-
-      curChooseIconIndex: -1,
-      curChooseIcon: {},
-      editBtnGroup: [
-        {
-          label: this.$t('openatccomponents.channelizationmap.motorway'),
-          type: 'motorway',
-          active: false,
-          width: '16px',
-          height: '16px'
-        },
-        // {
-        //   label: this.$t('openatccomponents.channelizationmap.bicyclelane'),
-        //   type: 'bicyclelane',
-        //   active: false,
-        //   width: '7px',
-        //   height: '16px'
-        // },
-        {
-          label: this.$t('openatccomponents.channelizationmap.pedcrossing'),
-          type: 'pedcrossing',
-          active: false,
-          width: '16px',
-          height: '16px'
-        },
-        {
-          label: this.$t('openatccomponents.channelizationmap.countdown'),
-          type: 'countdown',
-          active: false,
-          width: '16px',
-          height: '16px'
-        },
-        {
-          label: this.$t('openatccomponents.channelizationmap.detector'),
-          type: 'detector',
-          active: false,
-          width: '16px',
-          height: '16px'
-        }
-      ],
-      AddType: '', // 正在添加的图标类型
-
-      dirNameMap: new Map([
-        [1, '直行'],
-        [2, '左转'],
-        [3, '右转'],
-        [4, '掉头']
-      ]),
-      phaseAssociatedMap: new Map() // 关联相位Map: key 是相位ID， value 是车道数据包含direction
-    }
-  },
-  methods: {
-    clickOpen () {
-      this.$refs.importDialog.clickOpen()
-    },
-
-    // 改变鼠标样式
-    changeMouse () {
-      if (!this.isSeletable) return
-      // document.getElementById('sketchpadArea').style.cursor = 'url(resource/pic/icons/magnifier3.cur) 12 12,crosshair'
-      document.getElementById('sketchpadArea').style.cursor =
-        'url(resource/pic/icons/magnifier3.cur) 12 12,pointer'
-      this.pointchange = true
-    },
-
-    // 根据类型，表格编辑后，修改数据策略
-    changeIconDataByType (iconObj, changefield) {
-      this.curChooseIcon = JSON.parse(JSON.stringify(iconObj))
-      // 根据数据类型改变数据
-      switch (iconObj.icontype) {
-        case 'text':
-          this.changeText(iconObj, changefield)
-          break
-        case 'vehile':
-          this.changeMotorwayItem(iconObj, changefield)
-          if (changefield.indexOf('phaseid') !== -1) {
-            // 相位关联成功后，生成最新的相位关联map数据
-            this.PhaseDataMgr.updateLanePhaseAssociatedMap(this.Motorways)
-          }
-          break
-        case 'ped':
-          this.changePedItem(iconObj, changefield)
-          break
-        case 'countdown':
-          this.changeTimeItem(iconObj, changefield)
-          break
-        case 'detector':
-          this.changeDetectorItem(iconObj, changefield)
-          break
-      }
-      console.log('this.customlist', this.customlist)
-    },
-
-    // 被删除的相位所关联的车道，解除相位关联
-    handleDisassociatePhase (deletePhaseid) {
-      for (let i = 0; i < this.Motorways.length; i++) {
-        if (this.Motorways[i].phaseid === deletePhaseid) {
-          this.Motorways[i].phaseid = undefined
-          this.Motorways[i].phaselabel = ''
-          this.Motorways[i].phasetype = undefined
-        }
-      }
-      for (let i = 0; i < this.Pedwalk.length; i++) {
-        if (this.Pedwalk[i].phaseid === deletePhaseid) {
-          this.Pedwalk[i].phaseid = undefined
-          this.Pedwalk[i].phaselabel = ''
-          this.Pedwalk[i].phasetype = undefined
-        }
-      }
-      // 更新模型内初始相位列表数据
-      this.PhaseDataMgr.updateLanePhaseAssociatedMap(this.Motorways)
-    },
-
-    // 添加不同类型的车道图标
-    handleAddIcon (editbtn) {
-      // 按钮及图标高亮效果实现
-      this.editBtnGroup = this.editBtnGroup.map(btn => {
-        btn.active = false
-        return btn
-      })
-      for (let i = 0; i < this.editBtnGroup.length; i++) {
-        if (this.editBtnGroup[i].type === editbtn.type) {
-          this.editBtnGroup[i].active = true
-        }
-      }
-      this.changeMouse()
-      this.AddType = editbtn.type
-    },
-
-    addMotorwayIcon () {
-      this.PhaseDataModel = new PhaseDataModel()
-      let defaultMotorwayParam = {
-        x: this.setLeft,
-        y: this.setTop,
-        w: this.IconLengh,
-        h: this.IconWdith,
-        angle: 0
-      }
-      this.IconLengh = 45
-      this.IconWdith = 100
-      let Motorwaysitem = {
-        index: this.index,
-        id: this.motorid,
-        icontype: 'vehile',
-        icondireid: [1], // 前端区分箭头方向的标识
-        icondirename: [this.PhaseDataModel.getPhase(1).name],
-        lanePosition: 1,
-        controltype: 0,
-        phasetype: undefined,
-        phaseid: undefined,
-        phaselabel: '',
-        direction: [], // 值为1-16，对应16个方向
-        flip: false, // 车道类型是否翻转显示
-        ...defaultMotorwayParam
-      }
-      this.curChooseIconIndex = Motorwaysitem.index
-      this.curChooseIcon = JSON.parse(JSON.stringify(Motorwaysitem))
-      this.Motorways.push(Motorwaysitem)
-      this.customlist.push(Motorwaysitem)
-      this.index = this.increaseId(this.customlist, 'index')
-      this.motorid = this.increaseId(this.Motorways, 'id')
-    },
-    changeMotorwayItem (MotorwayItem, fields) {
-      this.changeItem(MotorwayItem, fields, this.Motorways)
-      this.changeCustomItem(MotorwayItem, fields)
-    },
-
-    // 选中图标
-    handleSelectIcon (iconobj) {
-      // console.log('选中的图标', iconobj)
-      this.curChooseIconIndex = iconobj.index
-      this.curChooseIcon = JSON.parse(JSON.stringify(iconobj))
-    },
-    // 根据多选的车道，修改车道图标
-    handleChooseDire (iconObj) {
-      this.curChooseIcon = JSON.parse(JSON.stringify(iconObj))
-      let editDirections = iconObj.icondireid
-      if (
-        this.curChooseIcon.icontype === 'vehile'
-      ) {
-        this.curChooseIcon.icondireid = editDirections
-        this.curChooseIcon.icondirename = editDirections.map(dir =>
-          this.dirNameMap.get(dir)
-        )
-        this.changeMotorwayItem(this.curChooseIcon, [
-          'icondireid',
-          'icondirename'
-        ])
-      }
-      console.log(this.curChooseIcon)
-    },
-
-    addPedwalkIcon () {
-      let defaulPedParam = {
-        x: this.setLeft,
-        y: this.setTop,
-        w: this.pedW,
-        h: this.pedH,
-        angle: 0,
-        viewbox: [0, 0, 206, 22]
-      }
-      this.pedW = 206
-      this.pedH = 22
-      let peditem = {
-        index: this.index,
-        id: this.pedid,
-        icontype: 'ped',
-        iconpedtypeid: 1,
-        iconpedposition: 1,
-        phasetype: undefined,
-        phaseid: undefined,
-        phaselabel: '',
-        ...defaulPedParam
-      }
-      this.curChooseIconIndex = peditem.index
-      this.curChooseIcon = JSON.parse(JSON.stringify(peditem))
-      this.Pedwalk.push(peditem)
-      this.customlist.push(peditem)
-      this.index = this.increaseId(this.customlist, 'index')
-      this.pedid = this.increaseId(this.Pedwalk, 'id')
-    },
-    changePedItem (PedItem, fields) {
-      this.changeItem(PedItem, fields, this.Pedwalk)
-      this.changeCustomItem(PedItem, fields)
-    },
-
-    handleChoosePed (pediconobj) {
-      this.curChooseIcon = JSON.parse(JSON.stringify(pediconobj))
-      if (this.curChooseIcon.icontype === 'ped') {
-        this.curChooseIcon.iconpedtypeid = pediconobj.iconpedtypeid
-        this.curChooseIcon.iconpedposition = pediconobj.iconpedposition
-        this.changePedItem(this.curChooseIcon, ['iconpedtypeid', 'iconpedposition'])
-      }
-      console.log(this.curChooseIcon)
-    },
-
-    addTimer () {
-      let defaultCountParam = {
-        x: this.setLeft,
-        y: this.setTop,
-        w: this.countdownW,
-        h: this.countdownH,
-        angle: 0
-      }
-      this.countdownW = 140
-      this.countdownH = 140
-      let countdownitem = {
-        index: this.index,
-        icontype: 'countdown',
-        ...defaultCountParam
-      }
-      this.curChooseIconIndex = countdownitem.index
-      this.curChooseIcon = JSON.parse(JSON.stringify(countdownitem))
-      this.Countdown.push(countdownitem)
-      this.customlist.push(countdownitem)
-      this.index = this.increaseId(this.customlist, 'index')
-    },
-    changeTimeItem (timeItem, fields) {
-      this.changeItem(timeItem, fields, this.Countdown)
-      this.changeCustomItem(timeItem, fields)
-    },
-
-    addAllDetector () {
-      // 统计图暂留
-      // this.addDetectorChart()
-      this.addDetector()
-    },
-    addDetector () {
-      let defaultDetectorParam = {
-        x: this.setLeft,
-        y: this.setTop,
-        w: this.detectorW,
-        h: this.detectorH,
-        angle: 0
-      }
-      this.detectorW = 30
-      this.detectorH = 30
-      let detectoritem = {
-        index: this.index,
-        icontype: 'detector',
-        detailtype: 'detector',
-        detectortype: 1, // 检测器类型： 1 车辆检测器 2 行人检测器
-        detectorid: undefined,
-        occupancythreshold: 80,
-        flowsaturationthreshold: 20,
-        ...defaultDetectorParam
-      }
-      this.curChooseIconIndex = detectoritem.index
-      this.curChooseIcon = JSON.parse(JSON.stringify(detectoritem))
-      this.Detector.push(detectoritem)
-      this.customlist.push(detectoritem)
-      this.index = this.increaseId(this.customlist, 'index')
-    },
-    changeDetectorItem (detectorItem, fields) {
-      this.changeItem(detectorItem, fields, this.Detector)
-      this.changeCustomItem(detectorItem, fields)
-    },
-    addDetectorChart () {
-      let defaultDetectorParam = {
-        x: this.setLeft,
-        y: this.setTop - 100, // 偏移到检测器正上方150
-        w: this.detectorchartW,
-        h: this.detectorchartH,
-        angle: 0
-      }
-      this.detectorchartW = 70
-      this.detectorchartH = 100
-      let detectoritem = {
-        index: this.index,
-        icontype: 'detector',
-        detailtype: 'detectorChart',
-        ...defaultDetectorParam
-      }
-      this.curChooseIconIndex = detectoritem.index
-      this.curChooseIcon = JSON.parse(JSON.stringify(detectoritem))
-      this.DetectorChart.push(detectoritem)
-      this.customlist.push(detectoritem)
-      this.index = this.increaseId(this.customlist, 'index')
-    },
-    changeDetectorChartItem (detectorItem, fields) {
-      this.changeItem(detectorItem, fields, this.DetectorChart)
-      this.changeCustomItem(detectorItem, fields)
-    },
-
-    // 添加文字
-    addText () {
-      let defaultTextParam = {
-        x: this.textareaW / 2,
-        y: this.textareaH / 2,
-        w: this.textareaW,
-        h: this.textareaH,
-        angle: 0
-      }
-      this.textareaW = 200
-      this.textareaH = 100
-      let textitem = {
-        index: this.index,
-        icontype: 'text',
-        text: '',
-        ...defaultTextParam
-      }
-      this.Texts.push(textitem)
-      this.customlist.push(textitem)
-      this.index = this.increaseId(this.customlist, 'index')
-    },
-    changeText (textobj, fields) {
-      this.changeItem(textobj, fields, this.Texts)
-      this.changeCustomItem(textobj, fields)
-    },
-
-    changeCustomItem (row, fields) {
-      this.changeItem(row, fields, this.customlist)
-    },
-    changeItem (row, fieldarr, data) {
-      for (let item of data) {
-        if (item.index === row.index) {
-          for (let field of fieldarr) {
-            item[field] = row[field]
-          }
-        }
-      }
-    },
-    deleteItem (row) {
-      let index = row.index
-      this.customlist = this.customlist.filter(ele => ele.index !== index)
-      switch (row.icontype) {
-        case 'text':
-          this.Texts = this.Texts.filter(ele => ele.index !== index)
-          break
-        case 'vehile':
-          this.Motorways = this.Motorways.filter(ele => ele.index !== index)
-          break
-        case 'ped':
-          this.Pedwalk = this.Pedwalk.filter(ele => ele.index !== index)
-          break
-        case 'countdown':
-          this.Countdown = this.Countdown.filter(ele => ele.index !== index)
-          break
-        case 'detector':
-          this.Detector = this.Detector.filter(ele => ele.index !== index)
-          this.DetectorChart = this.DetectorChart.filter(ele => ele.index !== index)
-      }
-      this.curChooseIconIndex = -1
-      this.curChooseIcon = {}
-    },
-
-    loadSvgString (type, imgstr) {
-      // 加载用户上传的底图svg字符串
-      if (type === 'vectorgraph') {
-        // 导入矢量图
-        this.getCrossMapViewbox(imgstr)
-        let defaultCrossMapParam = {
-          x: this.MapW / 2,
-          y: this.MapH / 2,
-          w: this.MapW,
-          h: this.MapH,
-          angle: 0
-        }
-        // （由于底图采用定位，导致脱离标准流，父元素高度塌陷，此处需要重新设置父元素高度，以防底图超出弹窗边界）
-        // this.$refs.crossmap.style.height = this.MapH
-        // this.$refs.crossmap.style.width = this.MapW
-        this.CrossMapData = {
-          type,
-          svgstr: imgstr,
-          ...defaultCrossMapParam
-        }
-      }
-      if (type === 'picture') {
-        // 导入图片
-        this.CrossMapData = {
-          type,
-          imgfilesrc: imgstr
-        }
-      }
-    },
-    getCrossMapViewbox (svgstr) {
-      // 获取户上传svg的viewBox属性的大小
-      let arr = svgstr.split('"')
-      let index, viewBox
-      for (let i = 0; i < arr.length - 1; i++) {
-        if (arr[i].indexOf('viewBox') !== -1) {
-          index = i
-        }
-      }
-      if (index) {
-        viewBox = arr[index + 1]
-      }
-      this.MapW = Number(viewBox.split(' ')[2])
-      this.MapH = Number(viewBox.split(' ')[3])
-    },
-    changeCrossMap (mapdata, fields) {
-      this.changeItem(mapdata, fields, [this.CrossMapData])
-    },
-
-    // 重置
-    handleReset () {
-      this.customlist = []
-      this.Texts = []
-      this.Motorways = []
-      this.Countdown = []
-      this.Pedwalk = []
-      this.Detector = []
-      this.DetectorChart = []
-      this.CrossMapData = {
-        svgstr: '',
-        imgfilesrc: ''
-      }
-      this.index = 0
-      this.curChooseIcon = {}
-    },
-    // 取消
-    cancledraw () {
-      this.canclesettingvisible = true
-    },
-    completeSetting () {
-      this.canclesettingvisible = false
-      this.$router.push('/overview/index')
-    },
-    cancleSetting () {
-      this.canclesettingvisible = false
-    },
-    // 保存
-    savedraw () {
-      let temp = {}
-      console.log(this.customlist)
-      for (const item of this.customlist) {
-        if (temp.hasOwnProperty(item.icontype)) {
-          temp[item.icontype].push(item)
-        } else {
-          temp[item.icontype] = [item]
-        }
-      }
-      if (this.CrossMapData.svgstr !== '') {
-        temp.crossMap = this.CrossMapData
-      }
-      this.saveChannelizatonChart(temp)
-    },
-    // 加载
-    load (type) {
-      this.curChooseIconIndex = -1
-      // this.getChannelizatonChart().then((channelizatondata) => {
-      // let savedTemp = JSON.parse(localStorage.getItem('savedTemp'))
-      let savedTemp = JSON.parse(JSON.stringify(this.loadedChannelizatonData))
-      let arr = []
-      for (const [key, value] of Object.entries(savedTemp)) {
-        if (key === 'vehile') {
-          this.Motorways = value
-        }
-        if (key === 'text') {
-          this.Texts = value
-        }
-        if (key === 'ped') {
-          this.Pedwalk = value
-        }
-        if (key === 'countdown') {
-          this.Countdown = value
-        }
-        if (key === 'detector') {
-          this.Detector = value.filter(ele => ele.detailtype === 'detector')
-          this.DetectorChart = value.filter(ele => ele.detailtype === 'detectorChart')
-        }
-        if (key === 'crossMap') {
-          this.CrossMapData = JSON.parse(JSON.stringify(value))
-          // if (value.type === 'vectorgraph') {
-          //   // svg底图，只加载底图区域870*650范围内的元素
-          //   let { svgstr, ...allitem } = value
-          //   this.allitem = allitem
-          // }
-        } else {
-          if (value.length > 1) {
-            arr = [...arr, ...value]
-          } else {
-            arr.push(value[0])
-          }
-        }
-      }
-      this.customlist = JSON.parse(JSON.stringify(arr))
-      this.index = this.increaseId(this.customlist, 'index')
-      this.motorid = this.increaseId(this.Motorways, 'id')
-      this.pedid = this.increaseId(this.Pedwalk, 'id')
-      // if (type === 'all') {
-      //   // 加载整体模版后，默认切换到元素不可编辑状态，但整体可编辑
-      //   this.isSeletable = false
-      // } else {
-      //   this.isSeletable = true
-      // }
-      // })
-    },
-    increaseId (arr, field) { // 实现field对应的index或者id, 在arr的基础上寻找最小的
-      let List = arr.map(ele => ele[field])
-      let i = List.length - 1
-      if (i >= 0) {
-        for (let j = 1; j <= 200; j++) {
-          if (!List.includes(j)) {
-            return j
-          }
-        }
-      }
-    },
-
-    exitEdit () {
-      this.isSeletable = !this.isSeletable
-    },
-
-    resetAddParams () {
-      this.AddType = ''
-      this.editBtnGroup = this.editBtnGroup.map(btn => {
-        btn.active = false
-        return btn
-      })
-    },
-    resizePanelWidth (bodywidth) {
-      // 根据1920适配，右侧过宽
-      // this.drawpartWidth = ((1089 / 1980) * bodywidth).toFixed(0)
-      // this.mainWidth = this.$refs.custommain.offsetWidth
-      // this.editpartWidth = Number(this.mainWidth) - Number(this.drawpartWidth) - 20
-      // this.$refs.customGroup.style.width = this.drawpartWidth + 'px'
-      // this.$refs.customEdit.style.width = this.editpartWidth + 'px'
-      // this.allitem.w = this.drawpartWidth
-      // this.allitem.x = this.drawpartWidth / 2
-      // 编辑面板固定宽度600，左侧适配
-      this.mainWidth = this.$refs.custommain.offsetWidth
-      this.drawpartWidth = this.mainWidth - 545
-      this.$refs.customGroup.style.width = this.drawpartWidth + 'px'
-      this.$refs.customGroup.style.transition = 'width 0.5s ease-in-out'
-      if (this.mainWidth && this.drawpartWidth) {
-        this.allitem.w = this.drawpartWidth
-        this.allitem.x = this.drawpartWidth / 2
-      }
-    },
-    saveChannelizatonChart (ChannelizatonData) {
-      // let agentid = getIframdevid()
-      let params = {
-        agentid: this.AgentId,
-        data: ChannelizatonData
-      }
-      saveChannelizatonChart(params).then(data => {
-        this.$emit('saveCallback', 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
-        }
-        let msg = this.$t('openatccomponents.common.savesucess')
-        this.$message({
-          message: msg,
-          type: 'success',
-          duration: 1 * 1000
-        })
-      })
-    },
-    // getChannelizatonChart () {
-    //   let agentid = getIframdevid()
-    //   return new Promise((resolve, reject) => {
-    //     getChannelizatonChart(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)
-    //         }
-    //         this.handleReset()
-    //         return
-    //       }
-    //       this.handleReset()
-    //       let channelizatondata = data.data.data
-    //       resolve(channelizatondata)
-    //     })
-    //   })
-    // },
-    handleClickSketchpad () {
-      // 监听画板区域点击事件，改变图标放置的位置
-      let sketchpadArea = document.getElementById('sketchpadArea')
-      let _this = this
-      sketchpadArea.addEventListener('click', function (e) {
-        if (_this.pointchange) {
-          document.getElementById('sketchpadArea').style.cursor =
-          'url(resource/pic/icons/magnifier3.cur) 12 12,default'
-          _this.pointchange = false
-          _this.setLeft =
-          e.clientX -
-          document.getElementById('channelizationElements').getBoundingClientRect().left
-          _this.setTop =
-          e.clientY -
-          document.getElementById('channelizationElements').getBoundingClientRect().top
-          if (_this.AddType === '') return
-          switch (_this.AddType) {
-            case 'motorway':
-              _this.addMotorwayIcon()
-              break
-            case 'pedcrossing':
-              _this.addPedwalkIcon()
-              break
-            case 'countdown':
-              _this.addTimer()
-              break
-            case 'detector':
-              _this.addAllDetector()
-          }
-          _this.resetAddParams()
-        }
-      })
-    }
-  },
-  created () {},
-  mounted () {
-    // this.resizePanelWidth(this.curBodyWidth)
-    let PhaseData = new PhaseDataMgr(this.phaseList)
-    this.$store.dispatch('InitPhaseDataMgr', PhaseData)
-    this.handleClickSketchpad()
-    // 初始加载已保存的渠化图
-    // this.load('all')
-  }
-  // updated () {
-  //   if (this.$refs.sketchpadgroup.offsetWidth) {
-  //     this.allitem.w = this.$refs.sketchpadgroup.offsetWidth
-  //     this.allitem.x = this.$refs.sketchpadgroup.offsetWidth / 2
-  //     this.allitem.h = this.$refs.sketchpadgroup.offsetHeight
-  //     this.allitem.y = this.$refs.sketchpadgroup.offsetHeight / 2
-  //   }
-  // }
-}
-</script>
-
-<style lang="css" rel="stylesheet/scss">
-</style>