openatc-components 0.0.103 → 0.0.106

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

@@ -12,7 +12,7 @@
 <!--渠化绘制功能-->
 <template>
   <div class="custom-cross" v-if="visible">
-    <ImportDialog ref="importDialog" @loadSvgString="loadSvgString"/>
+    <ImportDialog ref="importDialog" @loadSvgString="loadSvgString" @loadMapSize="loadMapSize" />
     <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">
@@ -26,6 +26,8 @@
               :disabled="!isSeletable"
               @click="clickOpen"
             >{{$t('openatccomponents.channelizationmap.againimport')}}</el-button>
+            <i class="lock-map el-icon-unlock" v-if="isLockedCrossMap" @click="handleLockCrossMap()"></i>
+            <i class="lock-map el-icon-lock" v-if="!isLockedCrossMap" @click="handleLockCrossMap()"></i>
           </div>
 
           <div class="draw-to-sketchpad">
@@ -53,17 +55,6 @@
         </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"
@@ -86,13 +77,15 @@
               :DetectorChart="DetectorChart"
               :CurChooseIcon="curChooseIcon"
               @changeDetectorChartItem="changeDetectorChartItem"
+              :isLockedCrossMap="isLockedCrossMap"
             />
-          <!-- </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>
+          <el-button type="primary" @click="importFromFile()">{{$t('openatccomponents.main.import')}}</el-button>
+          <el-button type="primary" @click="exportToFile()">{{$t('openatccomponents.main.export')}}</el-button>
         </div>
       </div>
       <div class="custom-edit" ref="customEdit">
@@ -103,6 +96,7 @@
           @handleChooseDire="handleChooseDire"
           @handleChoosePed="handleChoosePed"
           @deleteItem="deleteItem"
+          @cloneItem="cloneItem"
           @changeIconDataByType="changeIconDataByType"
           @handleDisassociatePhase="handleDisassociatePhase"
         />
@@ -119,7 +113,28 @@
         />
       </div>
     </el-row> -->
-  </div>
+    <!-- 从文件导入弹窗 -->
+    <el-dialog
+      :title="$t('openatccomponents.main.tip')"
+      :visible.sync="dialogVisible"
+      width="30%"
+    >
+      <input
+        type="file"
+        id="file"
+      />
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button @click="dialogVisible = false">{{$t('openatccomponents.common.cancel')}}</el-button>
+        <el-button
+          type="primary"
+          @click="readAsText"
+        >{{$t('openatccomponents.common.confirm')}}</el-button>
+      </span>
+    </el-dialog>
+    </div>
 </template>
 
 <script>
@@ -135,9 +150,7 @@ 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'
 
@@ -153,10 +166,7 @@ export default {
   },
   computed: {
     ...mapState({
-      phaseList: state => state.globalParam.tscParam.phaseList,
-      PhaseDataMgr: state => state.globalParam.PhaseDataMgr
-      // ,curBodyWidth: state => state.globalParam.curBodyWidth
-      // ,curOpenatcAgentid: state => state.globalParam.curOpenatcAgentid
+      phaseList: state => state.globalParam.tscParam.phaseList
     })
   },
   props: {
@@ -169,21 +179,6 @@ export default {
     }
   },
   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) {
         // 平台设备切换时，清空上一个渠化配置
@@ -194,6 +189,7 @@ export default {
     loadedChannelizatonData: {
       handler: function (val) {
         // 平台设备切换时，重载当前路口保存的渠化配置
+        this.LoadedChannelizatonData = JSON.parse(JSON.stringify(val))
         this.load('all')
       },
       deep: true
@@ -208,8 +204,8 @@ export default {
       index: 0,
       motorid: 1, // 车道id
       pedid: 1, // 人行道id
+      detectorcoilid: 1, // 检测器线圈id（非关联检测器id）
       Motorways: [], // 管理所有自定义机动车图标数据
-      // Bicyclelanes: [], // 非机动车图标数据
       customlist: [], // 所有自定义的图标列表
       Texts: [], // 管理所有自定义文字数据
       Pedwalk: [], // 管理所有人行横道
@@ -224,11 +220,19 @@ export default {
       pedH: 22,
       MapW: 800,
       MapH: 200,
-      detectorW: 30,
-      detectorH: 30,
+      detectorW: 20,
+      detectorH: 20,
       detectorchartW: 70,
       detectorchartH: 100,
+      isLockedCrossMap: true, // 底图是否是锁定状态
       CrossMapData: {
+        index: -2,
+        icontype: 'crossmap',
+        x: 400,
+        y: 100,
+        w: 800,
+        h: 200,
+        angle: 0,
         svgstr: '',
         imgfilesrc: ''
       }, // 管理底图数据
@@ -258,7 +262,7 @@ export default {
       pointchange: false, // 控制选中时光标样式
       CrossMapVisible: true, // 控制底图显示隐藏
 
-      curChooseIconIndex: -1,
+      curChooseIconIndex: -1, // 底图暂用-2代替，别的图标与递增的index相关
       curChooseIcon: {},
       editBtnGroup: [
         {
@@ -268,13 +272,6 @@ export default {
           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',
@@ -305,7 +302,9 @@ export default {
         [3, '右转'],
         [4, '掉头']
       ]),
-      phaseAssociatedMap: new Map() // 关联相位Map: key 是相位ID， value 是车道数据包含direction
+      phaseAssociatedMap: new Map(), // 关联相位Map: key 是相位ID， value 是车道数据包含direction
+      dialogVisible: false,
+      LoadedChannelizatonData: {} // 从接口获取到的渠化参数，用于作为加载数据，从文件导入可修改
     }
   },
   methods: {
@@ -316,7 +315,6 @@ export default {
     // 改变鼠标样式
     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
@@ -332,10 +330,6 @@ export default {
           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)
@@ -346,6 +340,8 @@ export default {
         case 'detector':
           this.changeDetectorItem(iconObj, changefield)
           break
+        case 'crossmap':
+          this.changeCrossMap(iconObj, changefield)
       }
       console.log('this.customlist', this.customlist)
     },
@@ -366,8 +362,6 @@ export default {
           this.Pedwalk[i].phasetype = undefined
         }
       }
-      // 更新模型内初始相位列表数据
-      this.PhaseDataMgr.updateLanePhaseAssociatedMap(this.Motorways)
     },
 
     // 添加不同类型的车道图标
@@ -425,9 +419,13 @@ export default {
     },
 
     // 选中图标
-    handleSelectIcon (iconobj) {
+    handleSelectIcon (iconobj, isCrossMap) {
       // console.log('选中的图标', iconobj)
-      this.curChooseIconIndex = iconobj.index
+      if (isCrossMap === 'crossmap') {
+        this.curChooseIconIndex = -2
+      } else {
+        this.curChooseIconIndex = iconobj.index
+      }
       this.curChooseIcon = JSON.parse(JSON.stringify(iconobj))
     },
     // 根据多选的车道，修改车道图标
@@ -446,7 +444,6 @@ export default {
           'icondirename'
         ])
       }
-      console.log(this.curChooseIcon)
     },
 
     addPedwalkIcon () {
@@ -521,8 +518,9 @@ export default {
 
     addAllDetector () {
       // 统计图暂留
-      // this.addDetectorChart()
       this.addDetector()
+      // this.addDetectorChart()
+      this.detectorcoilid = this.increaseId(this.Detector, 'id')
     },
     addDetector () {
       let defaultDetectorParam = {
@@ -532,16 +530,18 @@ export default {
         h: this.detectorH,
         angle: 0
       }
-      this.detectorW = 30
-      this.detectorH = 30
+      this.detectorW = 20
+      this.detectorH = 20
       let detectoritem = {
         index: this.index,
+        id: this.detectorcoilid,
         icontype: 'detector',
         detailtype: 'detector',
         detectortype: 1, // 检测器类型： 1 车辆检测器 2 行人检测器
         detectorid: undefined,
         occupancythreshold: 80,
-        flowsaturationthreshold: 20,
+        minflowsaturationthreshold: 30,
+        maxflowsaturationthreshold: 70,
         ...defaultDetectorParam
       }
       this.curChooseIconIndex = detectoritem.index
@@ -566,6 +566,7 @@ export default {
       this.detectorchartH = 100
       let detectoritem = {
         index: this.index,
+        id: this.detectorcoilid,
         icontype: 'detector',
         detailtype: 'detectorChart',
         ...defaultDetectorParam
@@ -621,57 +622,109 @@ export default {
     },
     deleteItem (row) {
       let index = row.index
+      // let id = row.id
       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 'text':
+        //   this.Texts = this.Texts.filter(ele => ele.index !== index)
+        //   break
         case 'vehile':
           this.Motorways = this.Motorways.filter(ele => ele.index !== index)
+          this.motorid = this.increaseId(this.Motorways, 'id')
           break
         case 'ped':
           this.Pedwalk = this.Pedwalk.filter(ele => ele.index !== index)
+          this.pedid = this.increaseId(this.Pedwalk, 'id')
           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.DetectorChart = this.DetectorChart.filter(ele => ele.id !== id)
+          this.detectorcoilid = this.increaseId(this.Detector, 'id')
       }
       this.curChooseIconIndex = -1
       this.curChooseIcon = {}
     },
+    cloneItem (row) {
+      // 克隆元素
+      let cloneObj = {
+        ...row,
+        index: this.index,
+        x: 435,
+        y: 325
+      }
+      switch (row.icontype) {
+        case 'vehile':
+          cloneObj.id = this.motorid
+          this.Motorways.push(cloneObj)
+          this.motorid = this.increaseId(this.Motorways, 'id')
+          this.customlist.push(cloneObj)
+          break
+        case 'ped':
+          cloneObj.id = this.pedid
+          this.Pedwalk.push(cloneObj)
+          this.pedid = this.increaseId(this.Pedwalk, 'id')
+          this.customlist.push(cloneObj)
+          break
+        // case 'countdown':
+        //   this.Countdown.push(cloneObj)
+        //   this.customlist.push(cloneObj)
+        //   break
+        case 'detector':
+          cloneObj.id = this.detectorcoilid
+          this.Detector.push(cloneObj)
+          this.customlist.push(cloneObj)
+          // 同时克隆统计图
+          // this.index = this.increaseId(this.customlist, 'index')
+          // let curchartobj = JSON.parse(JSON.stringify(this.DetectorChart)).filter(ele => ele.id === row.id)[0]
+          // curchartobj.index = this.index
+          // curchartobj.id = this.detectorcoilid
+          // curchartobj.x = 435
+          // curchartobj.y = 325 - 100
+          // this.DetectorChart.push(curchartobj)
+          // this.customlist.push(curchartobj)
+          this.detectorcoilid = this.increaseId(this.Detector, 'id')
+      }
+      this.curChooseIconIndex = this.index
+      this.curChooseIcon = JSON.parse(JSON.stringify(cloneObj))
+      this.index = this.increaseId(this.customlist, 'index')
+    },
 
     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.getCrossMapViewbox(imgstr)
         this.CrossMapData = {
+          ...this.CrossMapData,
           type,
-          svgstr: imgstr,
-          ...defaultCrossMapParam
+          svgstr: imgstr
         }
       }
       if (type === 'picture') {
         // 导入图片
         this.CrossMapData = {
+          ...this.CrossMapData,
           type,
           imgfilesrc: imgstr
         }
       }
     },
+    loadMapSize (type, mapsize) {
+      this.CrossMapData = {
+        ...this.CrossMapData,
+        angle: 0,
+        x: Math.round(mapsize.width / 2),
+        y: Math.round(mapsize.height / 2),
+        w: Math.round(mapsize.width),
+        h: Math.round(mapsize.height)
+      }
+      this.MapW = mapsize.width
+      this.MapH = mapsize.height
+    },
+
     getCrossMapViewbox (svgstr) {
       // 获取户上传svg的viewBox属性的大小
       let arr = svgstr.split('"')
@@ -701,6 +754,13 @@ export default {
       this.Detector = []
       this.DetectorChart = []
       this.CrossMapData = {
+        index: -2, // 暂定为-2，用于复用图标判断逻辑
+        icontype: 'crossmap',
+        x: this.MapW / 2,
+        y: this.MapH / 2,
+        w: this.MapW,
+        h: this.MapH,
+        angle: 0,
         svgstr: '',
         imgfilesrc: ''
       }
@@ -718,8 +778,7 @@ export default {
     cancleSetting () {
       this.canclesettingvisible = false
     },
-    // 保存
-    savedraw () {
+    handleSaveParams () {
       let temp = {}
       console.log(this.customlist)
       for (const item of this.customlist) {
@@ -729,17 +788,21 @@ export default {
           temp[item.icontype] = [item]
         }
       }
-      if (this.CrossMapData.svgstr !== '') {
+      if (this.CrossMapData.svgstr !== '' || this.CrossMapData.imgfilesrc !== '') {
         temp.crossMap = this.CrossMapData
       }
+      return temp
+    },
+    // 保存
+    savedraw () {
+      let temp = {}
+      temp = this.handleSaveParams()
       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 savedTemp = JSON.parse(JSON.stringify(this.LoadedChannelizatonData))
       let arr = []
       for (const [key, value] of Object.entries(savedTemp)) {
         if (key === 'vehile') {
@@ -756,15 +819,13 @@ export default {
         }
         if (key === 'detector') {
           this.Detector = value.filter(ele => ele.detailtype === 'detector')
-          this.DetectorChart = value.filter(ele => ele.detailtype === 'detectorChart')
+          // 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
-          // }
+          if (value.icontype === undefined) {
+            this.CrossMapData.icontype = 'crossmap'
+          }
         } else {
           if (value.length > 1) {
             arr = [...arr, ...value]
@@ -774,16 +835,18 @@ export default {
         }
       }
       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
-      // }
-      // })
+      if (this.customlist.length > 0) {
+        this.index = this.increaseId(this.customlist, 'index')
+      }
+      if (this.Motorways.length > 0) {
+        this.motorid = this.increaseId(this.Motorways, 'id')
+      }
+      if (this.Pedwalk.length > 0) {
+        this.pedid = this.increaseId(this.Pedwalk, 'id')
+      }
+      if (this.Detector.length > 0) {
+        this.detectorcoilid = this.increaseId(this.Detector, 'id')
+      }
     },
     increaseId (arr, field) { // 实现field对应的index或者id, 在arr的基础上寻找最小的
       let List = arr.map(ele => ele[field])
@@ -808,31 +871,18 @@ export default {
         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
       }
+      if (ChannelizatonData.crossMap.type === 'vectorgraph') {
+        ChannelizatonData.crossMap.imgfilesrc = ''
+      }
+      if (ChannelizatonData.crossMap.type === 'picture') {
+        ChannelizatonData.crossMap.svgstr = ''
+      }
       saveChannelizatonChart(params).then(data => {
         this.$emit('saveCallback', data)
         if (!data.data.success) {
@@ -857,31 +907,6 @@ export default {
         })
       })
     },
-    // 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')
@@ -891,12 +916,10 @@ export default {
           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
+          let boundingClientLeft = document.getElementById('channelizationElements').getBoundingClientRect().left
+          let boundingClientTop = document.getElementById('channelizationElements').getBoundingClientRect().top
+          _this.setLeft = Math.round(e.clientX - boundingClientLeft) // 四舍五入
+          _this.setTop = Math.round(e.clientY - boundingClientTop)
           if (_this.AddType === '') return
           switch (_this.AddType) {
             case 'motorway':
@@ -914,25 +937,51 @@ export default {
           _this.resetAddParams()
         }
       })
+    },
+    handleLockCrossMap () {
+      this.isLockedCrossMap = !this.isLockedCrossMap
+    },
+    importFromFile () {
+      this.dialogVisible = true
+    },
+    readAsText () {
+      let _this = this
+      var file = document.getElementById('file').files[0]
+      var reader = new FileReader()
+      reader.async = true
+      // 将文件以文本形式读入页面
+      reader.readAsText(file)
+      reader.onload = function (f) {
+        setTimeout(() => {
+          _this.LoadedChannelizatonData = {}
+          _this.handleReset()
+          _this.dialogVisible = false
+          _this.LoadedChannelizatonData = JSON.parse(this.result)
+          _this.load()
+          _this.$alert(_this.$t('openatccomponents.channelizationmap.importfilesuccess'), { type: 'success' })
+        }, 50)
+      }
+    },
+    async exportToFile () {
+      let tscParam = this.handleSaveParams()
+      let content = new Blob([JSON.stringify(tscParam)])
+      // 生成url对象
+      let urlObject = window.URL || window.webkitURL || window
+      let url = urlObject.createObjectURL(content)
+      // 生成<a></a>DOM元素
+      let el = document.createElement('a')
+      // 链接赋值
+      el.href = url
+      el.download = 'ChanelizationParam.json'
+      // 必须点击否则不会下载
+      el.click()
+      // 移除链接释放资源
+      urlObject.revokeObjectURL(url)
     }
   },
-  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>