fix: 添加车道划分,添加面积计算

src/components/drawing.vue

@@ -133,6 +133,17 @@
                 </el-option>
               </el-select>
             </el-form-item>
+            <el-form-item label="所属车道" prop="laneNum">
+              <el-select v-model="diseaseForm.laneNum" placeholder="请选择">
+                <el-option
+                  v-for="item in laneNumOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
             <el-form-item label="病害类型" prop="diseaseType">
               <el-select v-model="diseaseForm.diseaseType" placeholder="请选择">
                 <el-option
@@ -186,6 +197,7 @@
 <script>
 import paper from "paper";
 import { Point } from "paper/dist/paper-core";
+import { Arabia_To_SimplifiedChinese } from "@/utils/numberUtils";
 export default {
   data() {
     return {
@@ -217,6 +229,8 @@ export default {
         direction: "上行",
         startStake: "615.700",
         endStake: "615.800",
+        laneCount: 4,
+        laneNum: 1,
         roadLength: 1000,
         roadWidth: 7,
         roadType: 1,
@@ -398,6 +412,17 @@ export default {
     roadHalfWidth() {
       return this.boxHeight / 2 + this.rulerHeight;
     },
+    // 车道option
+    laneNumOptions() {
+      let laneNumOptions = [];
+      for (let i = 1; i <= this.diseaseForm.laneCount; i++) {
+        laneNumOptions.push({
+          label: `${Arabia_To_SimplifiedChinese(i)}车道`,
+          value: i,
+        });
+      }
+      return laneNumOptions;
+    },
     // 病害校验
     diseaseRules() {
       return {
@@ -458,7 +483,6 @@ export default {
               } else {
                 const actualWidth =
                   this.diseaseForm.roadWidth / 2 - this.diseaseForm.distance;
-                console.log(actualWidth);
                 if (actualWidth >= value) {
                   callback();
                 } else {
@@ -482,6 +506,8 @@ export default {
     initCanvas() {
       this.createCanvas();
       paper.setup(this.canvas);
+      // 绘制车道
+      this.drawLane();
       // 绘制边框
       this.drawCanvasBorder();
       // 绘制中间线
@@ -501,6 +527,7 @@ export default {
     drawCanvasBorder() {
       let path = new paper.Path();
       path.strokeColor = "black";
+      path.strokeWidth = 2;
       path.add(new Point(0, 0));
       path.add(new Point(this.boxWidth, 0));
       path.add(new Point(this.boxWidth, this.boxHeight + this.rulerHeight));
@@ -553,7 +580,7 @@ export default {
         ],
       });
       centerLine.strokeColor = "#ff0000";
-      centerLine.strokeWidth = 1;
+      centerLine.strokeWidth = 2;
       centerLine.strokeCap = "round";
       centerLine.dashArray = [10, 12];
     },
@@ -601,7 +628,6 @@ export default {
      * 绘制病害
      */
     drawDisease(form) {
-      console.log(form);
       if (!form) {
         return false;
       }
@@ -621,9 +647,6 @@ export default {
       const width = diseaseLength * 10;
       const height = diseaseWidth * this.scale;
       if (form.direction == "上行") {
-        console.log(this.roadHalfWidth - distance * 100);
-        console.log(this.roadHalfWidth);
-        console.log(distance);
         if (this.scale === 10) {
           y = this.roadHalfWidth - distance * 100 - height;
         } else {
@@ -656,6 +679,15 @@ export default {
         fontFamily: "Courier New",
         fontSize: 14,
       });
+      // 等边病害面积
+      new paper.PointText({
+        point: rectangle.leftCenter,
+        content: `${diseaseWidth * diseaseLength}㎡`,
+        fillColor: "black",
+        fontFamily: "Courier New",
+        fontSize: 14,
+      });
+
       // 病害距离中间距离
       if (form.direction == "上行") {
         new paper.PointText({
@@ -753,6 +785,29 @@ export default {
       let stakeString = "K" + stake;
       return stakeString.replace(".", "+");
     },
+    /** 绘制车道 */
+    drawLane() {
+      for (let i = 1; i <= this.diseaseForm.laneCount; i++) {
+        var centerLine = new paper.Path({
+          segments: [
+            [
+              0,
+              (this.boxHeight / this.diseaseForm.laneCount) * i +
+                this.rulerHeight,
+            ],
+            [
+              this.boxWidth,
+              (this.boxHeight / this.diseaseForm.laneCount) * i +
+                this.rulerHeight,
+            ],
+          ],
+        });
+        centerLine.strokeColor = "#7f8c8d";
+        centerLine.strokeWidth = 1;
+        centerLine.strokeCap = "round";
+        centerLine.dashArray = [10, 12];
+      }
+    },
   },
 };
 </script>

src/utils/numberUtils.js

+/*
+ * @Descripttion:
+ * @Author: xuyanqi
+ * @Date: 2022-01-04 10:11:22
+ */
+
+//阿拉伯数字转换为简写汉字
+export function Arabia_To_SimplifiedChinese(Num) {
+  for (let i = Num.length - 1; i >= 0; i--) {
+    Num = Num.replace(",", ""); //替换Num中的“,”
+    Num = Num.replace(" ", ""); //替换Num中的空格
+  }
+  if (isNaN(Num)) {
+    //验证输入的字符是否为数字
+    //alert("请检查小写金额是否正确");
+    return;
+  }
+  //字符处理完毕后开始转换，采用前后两部分分别转换
+  let part = String(Num).split(".");
+  let newchar = "";
+  //小数点前进行转化
+  for (let i = part[0].length - 1; i >= 0; i--) {
+    if (part[0].length > 10) {
+      //alert("位数过大，无法计算");
+      return "";
+    } //若数量超过拾亿单位，提示
+    let tmpnewchar = "";
+    let perchar = part[0].charAt(i);
+    switch (perchar) {
+      case "0":
+        tmpnewchar = "零" + tmpnewchar;
+        break;
+      case "1":
+        tmpnewchar = "一" + tmpnewchar;
+        break;
+      case "2":
+        tmpnewchar = "二" + tmpnewchar;
+        break;
+      case "3":
+        tmpnewchar = "三" + tmpnewchar;
+        break;
+      case "4":
+        tmpnewchar = "四" + tmpnewchar;
+        break;
+      case "5":
+        tmpnewchar = "五" + tmpnewchar;
+        break;
+      case "6":
+        tmpnewchar = "六" + tmpnewchar;
+        break;
+      case "7":
+        tmpnewchar = "七" + tmpnewchar;
+        break;
+      case "8":
+        tmpnewchar = "八" + tmpnewchar;
+        break;
+      case "9":
+        tmpnewchar = "九" + tmpnewchar;
+        break;
+    }
+    switch (part[0].length - i - 1) {
+      case 0:
+        // eslint-disable-next-line no-self-assign
+        tmpnewchar = tmpnewchar;
+        break;
+      case 1:
+        if (perchar != 0) tmpnewchar = tmpnewchar + "十";
+        break;
+      case 2:
+        if (perchar != 0) tmpnewchar = tmpnewchar + "百";
+        break;
+      case 3:
+        if (perchar != 0) tmpnewchar = tmpnewchar + "千";
+        break;
+      case 4:
+        tmpnewchar = tmpnewchar + "万";
+        break;
+      case 5:
+        if (perchar != 0) tmpnewchar = tmpnewchar + "十";
+        break;
+      case 6:
+        if (perchar != 0) tmpnewchar = tmpnewchar + "百";
+        break;
+      case 7:
+        if (perchar != 0) tmpnewchar = tmpnewchar + "千";
+        break;
+      case 8:
+        tmpnewchar = tmpnewchar + "亿";
+        break;
+      case 9:
+        tmpnewchar = tmpnewchar + "十";
+        break;
+    }
+    newchar = tmpnewchar + newchar;
+  }
+  //替换所有无用汉字，直到没有此类无用的数字为止
+  while (
+    newchar.search("零零") != -1 ||
+    newchar.search("零亿") != -1 ||
+    newchar.search("亿万") != -1 ||
+    newchar.search("零万") != -1
+  ) {
+    newchar = newchar.replace("零亿", "亿");
+    newchar = newchar.replace("亿万", "亿");
+    newchar = newchar.replace("零万", "万");
+    newchar = newchar.replace("零零", "零");
+  }
+  //替换以“一十”开头的，为“十”
+  if (newchar.indexOf("一十") == 0) {
+    newchar = newchar.substr(1);
+  }
+  //替换以“零”结尾的，为“”
+  if (newchar.lastIndexOf("零") == newchar.length - 1) {
+    newchar = newchar.substr(0, newchar.length - 1);
+  }
+  return newchar;
+}