openatc-components 0.0.100 → 0.0.103

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" @loadMapSize="loadMapSize" />
+    <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">
@@ -26,8 +26,6 @@
               :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">
@@ -55,6 +53,17 @@
         </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"
@@ -77,8 +86,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>
@@ -94,7 +103,6 @@
           @handleChooseDire="handleChooseDire"
           @handleChoosePed="handleChoosePed"
           @deleteItem="deleteItem"
-          @cloneItem="cloneItem"
           @changeIconDataByType="changeIconDataByType"
           @handleDisassociatePhase="handleDisassociatePhase"
         />
@@ -147,6 +155,8 @@ 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: {
@@ -159,6 +169,21 @@ 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) {
         // 平台设备切换时，清空上一个渠化配置
@@ -183,8 +208,8 @@ export default {
       index: 0,
       motorid: 1, // 车道id
       pedid: 1, // 人行道id
-      detectorcoilid: 1, // 检测器线圈id（非关联检测器id）
       Motorways: [], // 管理所有自定义机动车图标数据
+      // Bicyclelanes: [], // 非机动车图标数据
       customlist: [], // 所有自定义的图标列表
       Texts: [], // 管理所有自定义文字数据
       Pedwalk: [], // 管理所有人行横道
@@ -199,19 +224,11 @@ export default {
       pedH: 22,
       MapW: 800,
       MapH: 200,
-      detectorW: 20,
-      detectorH: 20,
+      detectorW: 30,
+      detectorH: 30,
       detectorchartW: 70,
       detectorchartH: 100,
-      isLockedCrossMap: true, // 底图是否是锁定状态
       CrossMapData: {
-        index: -2,
-        icontype: 'crossmap',
-        x: 400,
-        y: 100,
-        w: 800,
-        h: 200,
-        angle: 0,
         svgstr: '',
         imgfilesrc: ''
       }, // 管理底图数据
@@ -241,7 +258,7 @@ export default {
       pointchange: false, // 控制选中时光标样式
       CrossMapVisible: true, // 控制底图显示隐藏
 
-      curChooseIconIndex: -1, // 底图暂用-2代替，别的图标与递增的index相关
+      curChooseIconIndex: -1,
       curChooseIcon: {},
       editBtnGroup: [
         {
@@ -251,6 +268,13 @@ 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',
@@ -292,6 +316,7 @@ 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
@@ -321,8 +346,6 @@ export default {
         case 'detector':
           this.changeDetectorItem(iconObj, changefield)
           break
-        case 'crossmap':
-          this.changeCrossMap(iconObj, changefield)
       }
       console.log('this.customlist', this.customlist)
     },
@@ -402,13 +425,9 @@ export default {
     },
 
     // 选中图标
-    handleSelectIcon (iconobj, isCrossMap) {
+    handleSelectIcon (iconobj) {
       // console.log('选中的图标', iconobj)
-      if (isCrossMap === 'crossmap') {
-        this.curChooseIconIndex = -2
-      } else {
-        this.curChooseIconIndex = iconobj.index
-      }
+      this.curChooseIconIndex = iconobj.index
       this.curChooseIcon = JSON.parse(JSON.stringify(iconobj))
     },
     // 根据多选的车道，修改车道图标
@@ -427,6 +446,7 @@ export default {
           'icondirename'
         ])
       }
+      console.log(this.curChooseIcon)
     },
 
     addPedwalkIcon () {
@@ -501,9 +521,8 @@ export default {
 
     addAllDetector () {
       // 统计图暂留
-      this.addDetector()
       // this.addDetectorChart()
-      this.detectorcoilid = this.increaseId(this.Detector, 'id')
+      this.addDetector()
     },
     addDetector () {
       let defaultDetectorParam = {
@@ -513,18 +532,16 @@ export default {
         h: this.detectorH,
         angle: 0
       }
-      this.detectorW = 20
-      this.detectorH = 20
+      this.detectorW = 30
+      this.detectorH = 30
       let detectoritem = {
         index: this.index,
-        id: this.detectorcoilid,
         icontype: 'detector',
         detailtype: 'detector',
         detectortype: 1, // 检测器类型： 1 车辆检测器 2 行人检测器
         detectorid: undefined,
         occupancythreshold: 80,
-        minflowsaturationthreshold: 30,
-        maxflowsaturationthreshold: 70,
+        flowsaturationthreshold: 20,
         ...defaultDetectorParam
       }
       this.curChooseIconIndex = detectoritem.index
@@ -549,7 +566,6 @@ export default {
       this.detectorchartH = 100
       let detectoritem = {
         index: this.index,
-        id: this.detectorcoilid,
         icontype: 'detector',
         detailtype: 'detectorChart',
         ...defaultDetectorParam
@@ -605,109 +621,57 @@ 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.id !== id)
-          this.detectorcoilid = this.increaseId(this.Detector, 'id')
+          this.DetectorChart = this.DetectorChart.filter(ele => ele.index !== index)
       }
       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)
+        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 = {
-          ...this.CrossMapData,
           type,
-          svgstr: imgstr
+          svgstr: imgstr,
+          ...defaultCrossMapParam
         }
       }
       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('"')
@@ -737,13 +701,6 @@ 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: ''
       }
@@ -772,7 +729,7 @@ export default {
           temp[item.icontype] = [item]
         }
       }
-      if (this.CrossMapData.svgstr !== '' || this.CrossMapData.imgfilesrc !== '') {
+      if (this.CrossMapData.svgstr !== '') {
         temp.crossMap = this.CrossMapData
       }
       this.saveChannelizatonChart(temp)
@@ -780,6 +737,8 @@ 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)) {
@@ -797,10 +756,15 @@ 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]
@@ -810,18 +774,16 @@ export default {
         }
       }
       this.customlist = JSON.parse(JSON.stringify(arr))
-      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')
-      }
+      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])
@@ -846,6 +808,25 @@ 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 = {
@@ -876,6 +857,31 @@ 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')
@@ -885,10 +891,12 @@ export default {
           document.getElementById('sketchpadArea').style.cursor =
           'url(resource/pic/icons/magnifier3.cur) 12 12,default'
           _this.pointchange = false
-          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)
+          _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':
@@ -906,16 +914,25 @@ 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" @loadMapSize="loadMapSize" />
+    @loadSvgString="loadSvgString" />
     <CustomDraw v-show="pageindex === 2" ref="CustomDraw"
       :AgentId="AgentId"
       :loadedChannelizatonData="loadedChannelizatonData"
@@ -23,7 +23,10 @@
 <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',
@@ -69,12 +72,8 @@ 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 => {