openatc-components 0.0.98 → 0.0.101

package/src/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,8 +77,8 @@
               :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>
@@ -103,6 +94,7 @@
           @handleChooseDire="handleChooseDire"
           @handleChoosePed="handleChoosePed"
           @deleteItem="deleteItem"
+          @cloneItem="cloneItem"
           @changeIconDataByType="changeIconDataByType"
           @handleDisassociatePhase="handleDisassociatePhase"
         />
@@ -155,8 +147,6 @@ export default {
     ...mapState({
       phaseList: state => state.globalParam.tscParam.phaseList,
       PhaseDataMgr: state => state.globalParam.PhaseDataMgr
-      // ,curBodyWidth: state => state.globalParam.curBodyWidth
-      // ,curOpenatcAgentid: state => state.globalParam.curOpenatcAgentid
     })
   },
   props: {
@@ -169,21 +159,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) {
         // 平台设备切换时，清空上一个渠化配置
@@ -208,8 +183,8 @@ export default {
       index: 0,
       motorid: 1, // 车道id
       pedid: 1, // 人行道id
+      detectorcoilid: 1, // 检测器线圈id（非关联检测器id）
       Motorways: [], // 管理所有自定义机动车图标数据
-      // Bicyclelanes: [], // 非机动车图标数据
       customlist: [], // 所有自定义的图标列表
       Texts: [], // 管理所有自定义文字数据
       Pedwalk: [], // 管理所有人行横道
@@ -224,11 +199,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 +241,7 @@ export default {
       pointchange: false, // 控制选中时光标样式
       CrossMapVisible: true, // 控制底图显示隐藏
 
-      curChooseIconIndex: -1,
+      curChooseIconIndex: -1, // 底图暂用-2代替，别的图标与递增的index相关
       curChooseIcon: {},
       editBtnGroup: [
         {
@@ -268,13 +251,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',
@@ -316,7 +292,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
@@ -346,6 +321,8 @@ export default {
         case 'detector':
           this.changeDetectorItem(iconObj, changefield)
           break
+        case 'crossmap':
+          this.changeCrossMap(iconObj, changefield)
       }
       console.log('this.customlist', this.customlist)
     },
@@ -425,9 +402,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 +427,6 @@ export default {
           'icondirename'
         ])
       }
-      console.log(this.curChooseIcon)
     },
 
     addPedwalkIcon () {
@@ -521,8 +501,9 @@ export default {
 
     addAllDetector () {
       // 统计图暂留
-      // this.addDetectorChart()
       this.addDetector()
+      // this.addDetectorChart()
+      this.detectorcoilid = this.increaseId(this.Detector, 'id')
     },
     addDetector () {
       let defaultDetectorParam = {
@@ -532,16 +513,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 +549,7 @@ export default {
       this.detectorchartH = 100
       let detectoritem = {
         index: this.index,
+        id: this.detectorcoilid,
         icontype: 'detector',
         detailtype: 'detectorChart',
         ...defaultDetectorParam
@@ -621,57 +605,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 +737,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: ''
       }
@@ -729,7 +772,7 @@ export default {
           temp[item.icontype] = [item]
         }
       }
-      if (this.CrossMapData.svgstr !== '') {
+      if (this.CrossMapData.svgstr !== '' || this.CrossMapData.imgfilesrc !== '') {
         temp.crossMap = this.CrossMapData
       }
       this.saveChannelizatonChart(temp)
@@ -737,8 +780,6 @@ export default {
     // 加载
     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)) {
@@ -756,15 +797,10 @@ 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
-          // }
         } else {
           if (value.length > 1) {
             arr = [...arr, ...value]
@@ -774,16 +810,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,25 +846,6 @@ 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 = {
@@ -857,31 +876,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 +885,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 +906,16 @@ export default {
           _this.resetAddParams()
         }
       })
+    },
+    handleLockCrossMap () {
+      this.isLockedCrossMap = !this.isLockedCrossMap
     }
   },
-  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>
 

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

@@ -13,7 +13,7 @@
 <template>
   <div class="custom-cross-part draw-channelization">
     <FirstImportCrossmap v-if="pageindex === 1"
-    @loadSvgString="loadSvgString" />
+    @loadSvgString="loadSvgString" @loadMapSize="loadMapSize" />
     <CustomDraw v-show="pageindex === 2" ref="CustomDraw"
       :AgentId="AgentId"
       :loadedChannelizatonData="loadedChannelizatonData"
@@ -23,10 +23,7 @@
 <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',
@@ -72,8 +69,12 @@ export default {
         this.$refs.CustomDraw.loadSvgString(type, imgstr)
       })
     },
+    loadMapSize (type, mapsize) {
+      this.$nextTick(() => {
+        this.$refs.CustomDraw.loadMapSize(type, mapsize)
+      })
+    },
     getChannelizatonChart () {
-      // let agentid = getIframdevid()
       let _this = this
       _this.pageindex = 1
       getChannelizatonChart(this.AgentId).then(data => {