Home Explore Help
Register Sign In
caner
/
plantool
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

移除test ,增加旋转中心
Signed-off-by: caner <5658514@qq.com>

caner 3 years ago
parent
a8e87dc698
commit
de1797210d
5 changed files with 197 additions and 99 deletions
Unified View Show Diff Stats
  1. 2 1
      .eslintrc.js
  2. 4 2
      README.md
  3. 1 1
      index.html
  4. 165 81
      src/pages/index/App.vue
  5. 25 14
      vite.config.js

+ 2 - 1
.eslintrc.js
View File 

@@ -45,6 +45,7 @@ module.exports = {
 
     'vue/no-v-html': 0,
 
     'vue/no-v-html': 0,
 
     'vue/order-in-components': 0,
 
     'vue/order-in-components': 0,
 
     'no-unused-vars': 1,
 
     'no-unused-vars': 1,
 
-    'vue/no-reserved-component-names': 0
 
+    'vue/no-reserved-component-names': 0,
 
+    'vue/max-attributes-per-line': 0
 
   }
 
   }
 
 }
 
 }

+ 4 - 2
README.md
View File 

@@ -1,8 +1,10 @@
 
 # 平纵断面比例调试工具
 
 # 平纵断面比例调试工具
 
 ```
 
 ```
 
 1. 平纵断面图缩放比例调整工具
 
 1. 平纵断面图缩放比例调整工具
 
-2. 自行替换pulic/CAD_1/*/**.JPG
 
+2. 自行替换pulic/CAD_1/***.JPG
 
 3. 自动计算CAD宽度高度
 
 3. 自动计算CAD宽度高度
 
 4. 隧道比例默认SVG宽度
 
 4. 隧道比例默认SVG宽度
 
 5. UI画path按64倍进行
 
 5. UI画path按64倍进行
 
-```
 
+```
 
+
 
+## test 为测试

+ 1 - 1
index.html
View File 

@@ -5,7 +5,7 @@
 
   <meta charset="UTF-8" />
 
   <meta charset="UTF-8" />
 
   <link rel="icon" href="/favicon.ico" />
 
   <link rel="icon" href="/favicon.ico" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-  <title>Plan Tool</title>
 
+  <title>Vite App</title>
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>

+ 165 - 81
src/pages/index/App.vue
View File 

@@ -5,30 +5,21 @@
 
     <!-- 参数调试 -->
 
     <!-- 参数调试 -->
 
     <div class="params">
 
     <div class="params">
 
       <label>
 
       <label>
 
-        <Input
 
-          v-model="Width"
 
-          readonly
 
-        >
 
+        <Input v-model="Width" readonly>
 
           <template #prepend>
 
           <template #prepend>
 
             <span>CAD宽度</span>
 
             <span>CAD宽度</span>
 
           </template>
 
           </template>
 
         </Input>
 
         </Input>
 
       </label>
 
       </label>
 
       <label>
 
       <label>
 
-        <Input
 
-          v-model="Height"
 
-          readonly
 
-        >
 
+        <Input v-model="Height" readonly>
 
           <template #prepend>
 
           <template #prepend>
 
             <span>CAD高度</span>
 
             <span>CAD高度</span>
 
           </template>
 
           </template>
 
         </Input>
 
         </Input>
 
       </label>
 
       </label>
 
       <label>
 
       <label>
 
-        <Input
 
-          v-model="scale"
 
-          @on-blur="initViewer"
 
-        >
 
+        <Input v-model="scale" @on-blur="initViewer">
 
           <template #prepend>
 
           <template #prepend>
 
             <span>隧道比例</span>
 
             <span>隧道比例</span>
 
           </template>
 
           </template>
 
@@ -36,7 +27,7 @@
 
       </label>
 
       </label>
 
     </div>
 
     </div>
 
     <div class="text">
 
     <div class="text">
 
-      <p style="font-size:17px;">
 
+      <p style="font-size: 17px">
 
         注：
 
         注：
 
       </p>
 
       </p>
 
       <p>1. CAD宽高 = 切图宽高 * X_Y.JPG,自动计算</p>
 
       <p>1. CAD宽高 = 切图宽高 * X_Y.JPG,自动计算</p>
 
@@ -64,11 +55,32 @@ const SVGPATH = 'tunnel/1.svg'
 
 const RINGWIDTH = 70
 
 const RINGWIDTH = 70
 
 const STARTRing = 1
 
 const STARTRing = 1
 
 const TOTALRING = 8000
 
 const TOTALRING = 8000
 
-const currentRing = 3797
 
+const currentRing = 4500
 
 const MAXZOOM = process.env.imgSize.M
 
 const MAXZOOM = process.env.imgSize.M
 
 let tunnelPath = null
 
 let tunnelPath = null
 
 
 
-// 获取角度
 
+// 获取svg路径
 
+const getTunnelPath = async () => {
 
+  const txt = await axios.get(SVGPATH)
 
+  const objE = document.createElement('div')
 
+  objE.innerHTML = txt
 
+  let svg = objE.lastElementChild
 
+  svg = document.importNode(svg, true)
 
+  const path = svg.getElementsByTagName('path')
 
+  // 隧道比例默认SVG宽度
 
+  const num = +svg.getAttribute('width').replace(/[^0-9]/gi, '')
 
+  scale.value = num
 
+  tunnelPath = path
 
+}
 
+
 
+/**
 
+ * 获取角度
 
+ * @params x0 上一环x
 
+ * @params y0 上一环y
 
+ * @params x1 当前环x
 
+ * @params y2 当前环y
 
+ * @returns [角度，x,y]
 
+ */
 
 const getDeg = (x0, y0, x1, y1) => {
 
 const getDeg = (x0, y0, x1, y1) => {
 
   const x = (x0 + x1) / 2
 
   const x = (x0 + x1) / 2
 
   const y = (y0 + y1) / 2
 
   const y = (y0 + y1) / 2
 
@@ -85,43 +97,138 @@ const getDeg = (x0, y0, x1, y1) => {
 
   return [ MyAngle, x, y ]
 
   return [ MyAngle, x, y ]
 
 }
 
 }
 
 
 
-// 获取svg路径
 
-const getTunnelPath = async () => {
 
-  const txt = await axios.get(SVGPATH)
 
-  const objE = document.createElement('div')
 
-  objE.innerHTML = txt
 
-  let svg = objE.lastElementChild
 
-  svg = document.importNode(svg, true)
 
-  const path = svg.getElementsByTagName('path')
 
-  // 隧道比例默认SVG宽度
 
-  const num = +svg.getAttribute('width').replace(/[^0-9]/ig, '')
 
-  scale.value = num
 
-  tunnelPath = path
 
+/**
 
+ * 根据环号获取点位
 
+ * @params sRing 开始环
 
+ * @params eRing 结束环
 
+ * @params path  隧道路径 默认上路径
 
+ * @returns [{x,y}]
 
+ */
 
+const getPoint = (sRing, eRing, path = tunnelPath[0]) => {
 
+  if (!path) return []
 
+  const StartRingPnt = [] // 通风里程点位
 
+  const length = path.getTotalLength()
 
+  for (let k = sRing; k < eRing; k++) {
 
+    const Pnts = path.getPointAtLength(length * (k / TOTALRING))
 
+    StartRingPnt.push(Pnts)
 
+  }
 
+  return StartRingPnt
 
 }
 
 }
 
 
 
 /**
 
 /**
 
  * 画通风管道
 
  * 画通风管道
 
- * @params StartRingPnt 通风管道点位
 
+ * @params sRing 开始环
 
+ * @params eRing 结束环
 
+ * @params type 类型 1 直通道 | 2 转弯通道 默认转弯通道
 
+ * @returns dom-line
 
  */
 
  */
 
-const drawLines = (StartRingPnt) => {
 
+const drawLines = (sRing, eRing, type = 2, sRing2 = '22715.705078125,11780.609375', eRing2 = '23547.28515625,11636.23828125') => {
 
+  // 通风里程点位
 
+  const StartRingPnt = getPoint(sRing, eRing)
 
   // 添加通风管道=>转弯里程一定要是车行道开始里程
 
   // 添加通风管道=>转弯里程一定要是车行道开始里程
 
   const line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline')
 
   const line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline')
 
   line.setAttributeNS(null, 'fill', 'none')
 
   line.setAttributeNS(null, 'fill', 'none')
 
-  line.setAttributeNS(null, 'stroke', 'red')
 
-  line.setAttributeNS(null, 'stroke-width', 20)
 
+  line.setAttributeNS(null, 'stroke', '#B0C4DE')
 
+  line.setAttributeNS(null, 'stroke-width', 25)
 
   let txt2 = ''
 
   let txt2 = ''
 
   for (let k = 0; k < StartRingPnt.length; k++) {
 
   for (let k = 0; k < StartRingPnt.length; k++) {
 
     const el = StartRingPnt[k]
 
     const el = StartRingPnt[k]
 
-    if (k < StartRingPnt.length) {
 
-      txt2 += `${el.x + RINGWIDTH / 2 - 20},${el.y + RINGWIDTH / 2 - 20} `
 
-    } else {
 
-      txt2 += `${el.x},${el.y} `
 
+    if (type === 2) {
 
+      if (k < StartRingPnt.length) {
 
+        txt2 += `${el.x + RINGWIDTH / 2 - 20},${el.y + RINGWIDTH / 2 - 20} `
 
+      } else {
 
+        txt2 += `${el.x},${el.y} `
 
+      }
 
+    }
 
+    if (type === 1) {
 
+      txt2 += `${el.x - RINGWIDTH / 2},${el.y - RINGWIDTH / 2} `
 
     }
 
     }
 
   }
 
   }
 
-  txt2 += '22715.705078125,11790.609375' // 另一个隧道开始点位
 
+  if (type === 2) txt2 += `${sRing2} ${eRing2}` // 另一个隧道开始点位
 
   line.setAttributeNS(null, 'transform', `translate(0 0) scale(${1 / scale.value})`)
 
   line.setAttributeNS(null, 'transform', `translate(0 0) scale(${1 / scale.value})`)
 
   line.setAttributeNS(null, 'points', txt2)
 
   line.setAttributeNS(null, 'points', txt2)
 
-  overlay.append(line)
 
+  return line
 
+}
 
+
 
+/**
 
+ * 画隧道
 
+ * @params sRing 开始环
 
+ * @params eRing 结束环
 
+ * @params path 隧道路径
 
+ * @returns obj-dom
 
+ */
 
+const drawTunnel = (sRing, eRing, path = tunnelPath[0]) => {
 
+  // 未挖段->根据开始结束区分开挖和未开挖
 
+  const StartRingPnt = getPoint(sRing, eRing)
 
+  const line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline')
 
+  line.setAttributeNS(null, 'fill', 'none')
 
+  line.setAttributeNS(null, 'stroke', '#696969')
 
+  line.setAttributeNS(null, 'stroke-width', RINGWIDTH)
 
+  let txt = ''
 
+  for (let k = 0; k < StartRingPnt.length; k++) {
 
+    const el = StartRingPnt[k]
 
+    txt += `${el.x},${el.y} `
 
+  }
 
+  line.setAttributeNS(null, 'transform', `translate(0 0) scale(${1 / scale.value})`)
 
+  line.setAttributeNS(null, 'points', txt)
 
+  // 当前环
 
+  const cRing = sRing >= 0 ? sRing : eRing
 
+  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
 
+  const length = path.getTotalLength()
 
+  const PrePnt = path.getPointAtLength(length * ((cRing - 1) / TOTALRING))
 
+  const Pnt = path.getPointAtLength(length * (cRing / TOTALRING))
 
+  const deg = getDeg(PrePnt.x, PrePnt.y, Pnt.x, Pnt.y)
 
+  const ringWidth = (1 / TOTALRING) * length * STARTRing
 
+  rect.setAttributeNS(null, 'x', deg[1] - ringWidth / 2)
 
+  rect.setAttributeNS(null, 'y', deg[2] - RINGWIDTH / 2)
 
+  rect.setAttributeNS(null, 'height', RINGWIDTH)
 
+  rect.setAttributeNS(null, 'width', ringWidth)
 
+  rect.setAttributeNS(null, 'fill', '#87CEFA')
 
+  rect.setAttributeNS(null, 'transform', `translate(0 0) scale(${1 / scale.value}) rotate(${deg[0]} ${deg[1]} ${deg[2]})`)
 
+  // 点击事件
 
+  viewer.svgOverlay().onClick(rect, (e) => {
 
+    console.log(666, e)
 
+  })
 
+  return { line, rect }
 
+}
 
+
 
+/**
 
+ * 文字
 
+ * @params cRing 当前环
 
+ * @params path 隧道路径
 
+ * @returns dom-text
 
+ */
 
+const drawText = (cRing, path = tunnelPath[0]) => {
 
+  const length = path.getTotalLength()
 
+  const PrePnt = path.getPointAtLength(length * ((cRing - 1) / TOTALRING))
 
+  const Pnt = path.getPointAtLength(length * (cRing / TOTALRING))
 
+  const deg = getDeg(PrePnt.x, PrePnt.y, Pnt.x, Pnt.y)
 
+  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
 
+  text.innerHTML = '666666'
 
+  text.setAttributeNS(null, 'x', Pnt.x)
 
+  text.setAttributeNS(null, 'y', Pnt.y)
 
+  text.setAttributeNS(null, 'fill', 'red')
 
+  text.setAttribute('transform', `scale(${1 / scale.value}) rotate(${deg[0]} ${deg[1]} ${deg[2]}) `)
 
+  return text
 
+}
 
+
 
+/**
 
+ * 文字自身旋转
 
+ * @params cRing 当前环
 
+ * @params path 隧道路径
 
+ * @returns dom-text
 
+ */
 
+const drawText2 = (cRing, path = tunnelPath[0]) => {
 
+  const length = path.getTotalLength()
 
+  const Pnt = path.getPointAtLength(length * (cRing / TOTALRING))
 
+  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
 
+  text.innerHTML = '555555'
 
+  text.setAttributeNS(null, 'x', Pnt.x)
 
+  text.setAttributeNS(null, 'y', Pnt.y)
 
+  text.setAttributeNS(null, 'fill', 'red')
 
+  // 测试自身旋转
 
+  text.setAttribute('transform', `scale(${1 / scale.value}) rotate(${80} ${Pnt.x} ${Pnt.y}) `)
 
+  return text
 
 }
 
 }
 
 
 
 // 初始化
 
 // 初始化
 
@@ -162,50 +269,27 @@ const initViewer = async () => {
 
       getTileUrl(level, x, y) {
 
       getTileUrl(level, x, y) {
 
         level -= 9
 
         level -= 9
 
         level = 2 ** level
 
         level = 2 ** level
 
+        // return `http://cp.caner.top:9080/public/admin/cad_config/CAD_1/${level}/${x}_${y}.jpg`
 
         return `${CADPATH + level}/${x}_${y}.jpg`
 
         return `${CADPATH + level}/${x}_${y}.jpg`
 
-      },
 
-      tileExists(level, x, y) {
 
-        level -= 9
 
-        level = 2 ** level
 
-        return y < level * Math.max(Height.value / Width.value, 1) && x < level * Math.max(Width.value / Height.value, 1)
 
       }
 
       }
 
     }
 
     }
 
   })
 
   })
 
   overlay = viewer.svgOverlay().node()
 
   overlay = viewer.svgOverlay().node()
 
-
 
-  // 路径添加到overlay
 
-  let PrePnt = tunnelPath[0].getPointAtLength(0)
 
-  const length = tunnelPath[0].getTotalLength()
 
-  const ringWidth = (1 / TOTALRING) * length * STARTRing
 
-  const StartRingPnt = []// 通风管理开始里程点位
 
-
 
-  for (let i = STARTRing; i < TOTALRING; i++) {
 
-    if (currentRing >= i) {
 
-      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
 
-      const Pnt = tunnelPath[0].getPointAtLength(length * (i / TOTALRING))
 
-      const deg = getDeg(PrePnt.x, PrePnt.y, Pnt.x, Pnt.y)
 
-      rect.setAttributeNS(null, 'x', deg[1] - ringWidth / 2)
 
-      rect.setAttributeNS(null, 'y', deg[2] - RINGWIDTH / 2)
 
-      rect.setAttributeNS(null, 'height', RINGWIDTH)
 
-      rect.setAttributeNS(null, 'width', ringWidth)
 
-      rect.setAttributeNS(null, 'fill', '#1CAD31')
 
-      rect.setAttributeNS(null, 'transform', `translate(0 0) scale(${1 / scale.value}) rotate(${deg[0]} ${deg[1]} ${deg[2]})`)
 
-      rect.setAttributeNS(null, 'data-type', i)
 
-      PrePnt = Pnt
 
-      // 点击事件
 
-      viewer.svgOverlay().onClick(rect, (e) => {
 
-        console.log(666, e)
 
-      })
 
-      overlay.append(rect)
 
-    }
 
-    // 找出通风管开始结束里程点位=>模拟当前里程-150环
 
-    if (i >= (currentRing - 150) && i <= currentRing) {
 
-      const Pnts = tunnelPath[0].getPointAtLength(length * (i / TOTALRING))
 
-      StartRingPnt.push(Pnts)
 
-    }
 
-  }
 
-  // 画管道
 
-  drawLines(StartRingPnt)
 
+  // 添加隧道
 
+  const { line, rect } = drawTunnel(currentRing, TOTALRING)
 
+  overlay.append(line)
 
+  overlay.append(rect)
 
+  // 添加通风管道
 
+  const line2 = drawLines(3798.5 - 150, 3798.5)
 
+  overlay.append(line2)
 
+  // 添加直通隧道
 
+  const line3 = drawLines(150, 1500, 1)
 
+  overlay.append(line3)
 
+  // 添加wenz
 
+  const txt = drawText(currentRing)
 
+  const txt2 = drawText2(currentRing)
 
+  overlay.append(txt)
 
+  overlay.append(txt2)
 
 }
 
 }
 
 
 
 // 监听缩放
 
 // 监听缩放
 
@@ -227,26 +311,26 @@ onMounted(async () => {
 
   text-align: center;
 
   text-align: center;
 
   color: #2c3e50;
 
   color: #2c3e50;
 
   user-select: none;
 
   user-select: none;
 
-  #openseadragon{
 
+  #openseadragon {
 
     width: 1000px;
 
     width: 1000px;
 
     height: 600px;
 
     height: 600px;
 
     border: solid 1px #ccc;
 
     border: solid 1px #ccc;
 
   }
 
   }
 
-  .params{
 
+  .params {
 
     width: 100%;
 
     width: 100%;
 
     display: flex;
 
     display: flex;
 
     margin-top: 10px;
 
     margin-top: 10px;
 
     // justify-content: center;
 
     // justify-content: center;
 
-    &>label{
 
+    & > label {
 
       margin-right: 10px;
 
       margin-right: 10px;
 
     }
 
     }
 
   }
 
   }
 
-  .text{
 
+  .text {
 
     color: red;
 
     color: red;
 
     font-size: 13px;
 
     font-size: 13px;
 
     margin-top: 10px;
 
     margin-top: 10px;
 
     text-align: left;
 
     text-align: left;
 
-    &>p:not(:first-child){
 
+    & > p:not(:first-child) {
 
       text-indent: 20px;
 
       text-indent: 20px;
 
     }
 
     }
 
   }
 
   }

+ 25 - 14
vite.config.js
View File 

@@ -1,11 +1,15 @@
 
-import { defineConfig } from 'vite'
 
+import {
 
+  defineConfig
 
+} from 'vite'
 
 import vue from '@vitejs/plugin-vue'
 
 import vue from '@vitejs/plugin-vue'
 
 import viteCompression from 'vite-plugin-compression'
 
 import viteCompression from 'vite-plugin-compression'
 
 import eslint from 'vite-plugin-eslint'
 
 import eslint from 'vite-plugin-eslint'
 
 import path from 'path'
 
 import path from 'path'
 
 import glob from 'glob'
 
 import glob from 'glob'
 
-import fs, { fstat } from 'fs'
 
-const sizeOf = require('image-size');
 
+import fs, {
 
+  fstat
 
+} from 'fs'
 
+const sizeOf = require('image-size')
 
 // 多页面入口配置
 
 // 多页面入口配置
 
 const entryConfig = function () {
 
 const entryConfig = function () {
 
   const viteconfig = {}
 
   const viteconfig = {}
 
@@ -36,19 +40,20 @@ const getImgSize = function () {
 
     const fileName = fs.readdirSync(divs)
 
     const fileName = fs.readdirSync(divs)
 
     if (!fileName || !fileName.length) return {}
 
     if (!fileName || !fileName.length) return {}
 
     const max = Math.max(...fileName)
 
     const max = Math.max(...fileName)
 
-    const filePath = divs + '/' + max
 
+    const filePath = `${divs}/${max}`
 
     const filesPath = fs.readdirSync(filePath)
 
     const filesPath = fs.readdirSync(filePath)
 
-    let maxName = []
 
+    const maxName = []
 
     for (let k = 0; k < filesPath.length; k++) {
 
     for (let k = 0; k < filesPath.length; k++) {
 
-      const el = filesPath[k];
 
+      const el = filesPath[k]
 
       const id = el.indexOf('_')
 
       const id = el.indexOf('_')
 
       const num = el.substring(0, id)
 
       const num = el.substring(0, id)
 
-      maxName.push({ num: num, name: el })
 
+      maxName.push({
 
+        num,
 
+        name: el
 
+      })
 
     }
 
     }
 
-    maxName.sort((a, b) => {
 
-      return +b.num - +a.num
 
-    })
 
-    const txt = divs + '/' + max + '/' + maxName[0].name
 
+    maxName.sort((a, b) => +b.num - +a.num)
 
+    const txt = `${divs}/${max}/${maxName[0].name}`
 
     const fileSize = sizeOf(txt)
 
     const fileSize = sizeOf(txt)
 
     const obj = {
 
     const obj = {
 
       W: fileSize.width * (+maxName[0].num+1),
 
       W: fileSize.width * (+maxName[0].num+1),
 
@@ -61,7 +66,9 @@ const getImgSize = function () {
 
     return {}
 
     return {}
 
   }
 
   }
 
 }
 
 }
 
-export default ({ mode }) => defineConfig({
 
+export default ({
 
+  mode
 
+}) => defineConfig({
 
   base: './',
 
   base: './',
 
   resolve: {
 
   resolve: {
 
     alias: {
 
     alias: {
 
@@ -72,7 +79,11 @@ export default ({ mode }) => defineConfig({
 
       '@': path.resolve(__dirname, './src')
 
       '@': path.resolve(__dirname, './src')
 
     }
 
     }
 
   },
 
   },
 
-  plugins: [vue(), viteCompression({ disable: true }), eslint({ fix: true })],
 
+  plugins: [ vue(), viteCompression({
 
+    disable: true
 
+  }), eslint({
 
+    fix: true
 
+  }) ],
 
   server: {
 
   server: {
 
     host: 'localhost',
 
     host: 'localhost',
 
     port: 6547,
 
     port: 6547,
 
@@ -110,4 +121,4 @@ export default ({ mode }) => defineConfig({
 
       imgSize: getImgSize()
 
       imgSize: getImgSize()
 
     }
 
     }
 
   }
 
   }
 
-})
 
+})