Merge branch 'master' of https://git.caner.top/Caner/Blog

src/pages/views/planTool/index.vue

@@ -233,11 +233,62 @@ const drawText2 = (cRing, path = tunnelPath[0]) => {
   text.setAttribute('transform', `scale(${1 / scale.value}) rotate(${80} ${Pnt.x} ${Pnt.y}) `)
   return text
 }
+  
+/**
+ * 自定义每环
+ * @params i 当前环
+ * @params c 颜色
+ * @params y 位置Y
+ * @params w 位置宽度
+ * @params t 位置是否空心
+ * @returns dom-text
+ */
+const drawRing=(i: number, c: string, y: number, w = 1, t = false)=> {
+  const length = tunnelPath.value[0].getTotalLength()
+  const Pnt = tunnelPath.value[0].getPointAtLength(length * (1 / cadConfig.value.totalRing) * i) // 每环位置
+  const ringWidth = (1 / cadConfig.value.totalRing) * length * w // 每环宽度
+  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
+  rect.setAttributeNS(null, 'x', `${Pnt.x}`)
+  rect.setAttributeNS(null, 'y', `${y}`)
+  rect.setAttributeNS(null, 'height', `${cadConfig.value.tunnelWidth}`)
+  rect.setAttributeNS(null, 'width', `${ringWidth}`)
+  rect.setAttributeNS(null, 'data-user', `${123}`)
+  rect.setAttributeNS(null, 'transform', `translate(0 0) scale(${1 / cadConfig.value.tunnelScale})`)
+  if (t) {
+    rect.setAttributeNS(null, 'fill', 'none')
+    rect.setAttributeNS(null, 'stroke', c || '#87CEFA')
+    rect.setAttributeNS(null, 'stroke-width', '10')
+  } else {
+    rect.setAttributeNS(null, 'fill', c || '#87CEFA')
+  }
+  return rect
+}
+
+//  格式化掌子面里程
+const mileageFormat = (num: any, type = '') => {
+  if (type && (typeof num === 'number')) {
+    const a = Math.floor((num as number) / 1000).toString()
+    const ab = parseFloat(((num as number) % 1000).toFixed(1))
+    const b = Math.floor((num as number) % 1000).toString()
+    const c = b.length === 1 ? `00${ab}` : b.length === 2 ? `0${ab}` : ab
+    return `${type || ''}${a}+${c}`
+  }
+
+  if (!type && (typeof num === 'string')) {
+    const list = num.split('+')
+    const a = Number(list[0].replace(/[^0-9]/ig, '')) * 1000
+    const b = Number(list[1]) || 0
+    return a + b
+  }
+
+  return num
+}
 
 // 初始化
 svgOverlay(OpenSeadragon)
 const initViewer = async () => {
   if (viewer) {
+    viewer.removeAllHandlers()
     viewer.destroy()
     viewer = null
     overlay = null
@@ -276,6 +327,11 @@ const initViewer = async () => {
       }
     }
   })
+  //open,animation
+  viewe.addHandler('zoom',()=>{
+  	console.log(1)
+  })
+  //
   overlay = viewer.svgOverlay().node()
   // 添加隧道
   const { line, rect } = drawTunnel(currentRing, TOTALRING)
@@ -299,6 +355,15 @@ onMounted(() => {
   document.title = '瓦片图缩放'
   getTunnelPath()
 })
+  
+onUnmounted(() => {
+  if (viewer) {
+    viewer.removeAllHandlers()
+    viewer.destroy()
+    viewer = null
+    overlay = null
+  }
+}) 
 </script>
 <style lang="scss" scoped>
 #apps {