openatc-components 0.0.88 → 0.0.91

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

@@ -0,0 +1,939 @@
+/**
+ * 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>