init

8b3599b6 · 王健 · fab74774 · 8b3599b6 · 8b3599b6 · fab74774
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
  },
  "dependencies": {
    "core-js": "^3.6.5",
+    "element-ui": "^2.15.6",
    "vue": "^2.6.11"
  },
  "devDependencies": {

--- a/src/App.vue
+++ b/src/App.vue
 <template>
  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
+    <div class="canvas">
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+      <canvas ref="road" :width="boxWidth" :height="boxHeight"></canvas>
+    </div>
+    <div class="plan">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>施工日志</span>
+        </div>
+        <el-form ref="ruleForm" label-width="150px" class="demo-ruleForm">
+          <el-form-item label="单车道宽度" prop="lineHeightm">
+            <el-input v-model="lineHeightm"></el-input>
+          </el-form-item>
+          <el-form-item label="横宽比" prop="ratio">
+            <el-input-number
+              v-model="ratio"
+              @change="handleRatioChange"
+              :min="5"
+              :max="50"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item label="车道数（双向）" prop="lineNumber">
+            <el-select
+              v-model="lineNumber"
+              placeholder="车道数"
+              @change="changeLineNumber"
+            >
+              <el-option label="2车道" value="2"></el-option>
+              <el-option label="4车道" value="4"></el-option>
+              <el-option label="6车道" value="6"></el-option>
+              <el-option label="8车道" value="8"></el-option>
+              <el-option label="10车道" value="10"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="submitForm()">立即创建</el-button>
+          </el-form-item>
+        </el-form>
+        <el-divider></el-divider>
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column fixed prop="dataType" label="类型">
+          </el-table-column>
+          <el-table-column prop="startStake" label="起点桩号">
+          </el-table-column>
+          <el-table-column prop="startStakeCenter" label="中心线">
+          </el-table-column>
+          <el-table-column prop="endStake" label="终点桩号"> </el-table-column>
+          <el-table-column prop="endStakeCenter" label="中心线">
+          </el-table-column>
+          <el-table-column prop="dataHeight" label="长度"> </el-table-column>
+          <el-table-column prop="dataWidth" label="宽度"> </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
  </div>
 </template>
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
 export default {
  name: "App",
-  components: {
+  props: {},
-    HelloWorld,
+  data() {
+    return {
+      ctx: null,
+      boxWidth: 1000,
+      boxHeight: 800,
+      center: 400,
+      lineHeightm: 3.75,
+      lineHeight: 18.75,
+      lineNumber: 2,
+      startStake: 236000,
+      endStake: 236200,
+      ratio: 5,
+      tableData: [
+        {
+          dataType: "裂缝",
+          startStake: "236512",
+          startStakeCenter: "10",
+          endStake: "237512",
+          endStakeCenter: "30",
+          dataHeight: "10",
+          dataWidth: "0",
+        },
+        {
+          dataType: "坑洞",
+          startStake: "236100",
+          startStakeCenter: "2.75",
+          endStake: "",
+          endStakeCenter: "",
+          dataHeight: "2",
+          dataWidth: "2",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.init();
+    this.drawWaterRipple();
+  },
+  watch: {
+    lineHeightm(val) {
+      this.lineHeight = val * this.ratio;
+    },
+  },
+  methods: {
+    updateCanvas() {
+      this.ctx.clearRect(0, 0, this.boxWidth, this.boxHeight);
+      this.ctx.save();
+      this.init();
+    },
+    handleRatioChange() {
+      this.lineHeight = this.lineHeightm * this.ratio;
+      this.updateCanvas();
+    },
+    changeLineNumber() {
+      this.updateCanvas();
+    },
+    init() {
+      this.ctx = this.$refs.road.getContext("2d");
+      this.drowFillRect({
+        startx: 0,
+        starty: 0,
+        width: this.boxWidth,
+        height: this.boxHeight,
+        fillStyle: "#bdc3c7",
+      });
+      this.drowCenterLine();
+      let upCounter = 1;
+      let downCounter = 1;
+      for (let i = 0; i < this.lineNumber - 2; i++) {
+        if (i % 2 == 0) {
+          this.drowDashedLine({
+            startx: 0,
+            starty: this.center - this.lineHeight * upCounter,
+            endx: this.boxWidth,
+            endy: this.center - this.lineHeight * upCounter,
+            lineWidth: 1,
+            strokeStyle: "#000",
+          });
+          upCounter++;
+        } else {
+          this.drowDashedLine({
+            startx: 0,
+            starty: this.center + this.lineHeight * downCounter,
+            endx: this.boxWidth,
+            endy: this.center + this.lineHeight * downCounter,
+            lineWidth: 1,
+            strokeStyle: "#000",
+          });
+          downCounter++;
+        }
+      }
+      this.drowLine({
+        startx: 0,
+        starty: this.center - this.lineHeight * (this.lineNumber / 2),
+        endx: this.boxWidth,
+        endy: this.center - this.lineHeight * (this.lineNumber / 2),
+        lineWidth: 2,
+        strokeStyle: "#000",
+      });
+      this.drowLine({
+        startx: 0,
+        starty: this.center + this.lineHeight * (this.lineNumber / 2),
+        endx: this.boxWidth,
+        endy: this.center + this.lineHeight * (this.lineNumber / 2),
+        lineWidth: 2,
+        strokeStyle: "#000",
+      });
+      this.drowText();
+      this.tableData.forEach((data) => {
+        const x = (data.startStake - this.startStake) * this.ratio;
+        const y = this.center - data.startStakeCenter * this.ratio;
+        if (data.dataType === "坑洞") {
+          this.drowRect({
+            startx: x,
+            starty: y,
+            width: data.dataWidth * this.ratio,
+            height: data.dataHeight * this.ratio,
+            strokeStyle: "#000",
+          });
+        } else if (data.dataType === "裂缝") {
+          this.drowLine({
+            startx: 0,
+            starty: this.center - this.lineHeight * (this.lineNumber / 2),
+            endx: this.boxWidth,
+            endy: this.center - this.lineHeight * (this.lineNumber / 2),
+            lineWidth: 2,
+            strokeStyle: "#000",
+          });
+        }
+      });
+    },
+    drowCenterLine() {
+      if (this.lineNumber == 2) {
+        this.drowDashedLine({
+          startx: 0,
+          starty: this.center,
+          endx: this.boxWidth,
+          endy: this.center,
+          lineWidth: 5,
+          strokeStyle: "#000",
+        });
+      } else {
+        this.drowLine({
+          startx: 0,
+          starty: this.center,
+          endx: this.boxWidth,
+          endy: this.center,
+          lineWidth: 5,
+          strokeStyle: "#000",
+        });
+      }
+    },
+    drowRect(rect) {
+      const { startx, starty, width, height, strokeStyle } = rect;
+      this.ctx.beginPath();
+      this.ctx.strokeStyle = strokeStyle;
+      this.ctx.lineWidth = "3";
+      this.ctx.rect(startx, starty, width, height);
+      this.ctx.stroke();
+      this.ctx.closePath();
+    },
+    drowFillRect(rect) {
+      const { startx, starty, width, height, fillStyle = "#000" } = rect;
+      this.ctx.beginPath();
+      this.ctx.fillStyle = fillStyle;
+      this.ctx.fillRect(startx, starty, width, height);
+      this.ctx.closePath();
+    },
+    drowLine(line) {
+      const {
+        startx,
+        starty,
+        endx,
+        endy,
+        lineWidth = 3,
+        strokeStyle = "#000",
+      } = line;
+      this.ctx.save();
+      this.ctx.setLineDash([]);
+      this.ctx.beginPath();
+      this.ctx.moveTo(startx, starty);
+      this.ctx.lineTo(endx, endy);
+      this.ctx.lineWidth = lineWidth;
+      this.ctx.strokeStyle = strokeStyle;
+      this.ctx.stroke();
+      this.ctx.closePath();
+    },
+    drowDashedLine(dashedLine) {
+      const {
+        startx,
+        starty,
+        endx,
+        endy,
+        lineWidth = 1,
+        strokeStyle = "#000",
+      } = dashedLine;
+      this.ctx.save();
+      this.ctx.beginPath();
+      this.ctx.lineWidth = lineWidth;
+      this.ctx.strokeStyle = strokeStyle;
+      this.ctx.setLineDash([15, 12]);
+      this.ctx.moveTo(startx, starty);
+      this.ctx.lineTo(endx, endy);
+      this.ctx.stroke();
+      this.ctx.closePath();
+    },
+    drawWaterRipple() {},
+    drowText() {
+      this.ctx.font = "22px 微软雅黑";
+      this.ctx.fillStyle = "#000";
+      this.ctx.fillText(
+        "K236",
+        10,
+        this.center - this.lineHeight * (this.lineNumber / 2 + 0.5)
+      );
+      this.ctx.fillText(
+        "K236+200",
+        this.boxWidth - 120,
+        this.center - this.lineHeight * (this.lineNumber / 2 + 0.5)
+      );
+    },
+    submitForm() {
+      this.updateCanvas();
+    },
  },
 };
 </script>
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  display: flex;
-  -webkit-font-smoothing: antialiased;
+}
-  -moz-osx-font-smoothing: grayscale;
+.canvas {
-  text-align: center;
+  display: block;
-  color: #2c3e50;
+  box-sizing: border-box;
-  margin-top: 60px;
+  padding: 20px;
+}
+.plan {
+  background: antiquewhite;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px;
 }
 </style>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    msg: String,
-  },
-};
-</script>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
--- a/src/main.js
+++ b/src/main.js
 import Vue from "vue";
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
 import App from "./App.vue";
 Vue.config.productionTip = false;
+Vue.use(ElementUI);
 new Vue({
  render: (h) => h(App),

--- a/yarn.lock
+++ b/yarn.lock
@@ -1806,6 +1806,13 @@ async-limiter@~1.0.0:
  resolved "https://registry.nlark.com/async-limiter/download/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
  integrity sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=
+async-validator@~1.8.1:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  integrity sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==
+  dependencies:
+    babel-runtime "6.x"
 async@^2.6.2:
  version "2.6.3"
  resolved "https://registry.npmmirror.com/async/download/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -1858,6 +1865,11 @@ babel-eslint@^10.1.0:
    eslint-visitor-keys "^1.0.0"
    resolve "^1.12.0"
+babel-helper-vue-jsx-merge-props@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
+  integrity sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==
 babel-loader@^8.1.0:
  version "8.2.3"
  resolved "https://registry.npmmirror.com/babel-loader/download/babel-loader-8.2.3.tgz?cache=0&sync_timestamp=1634769717079&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.2.3.tgz#8986b40f1a64cacfcb4b8429320085ef68b1342d"
@@ -1899,6 +1911,14 @@ babel-plugin-polyfill-regenerator@^0.3.0:
  dependencies:
    "@babel/helper-define-polyfill-provider" "^0.3.0"
+babel-runtime@6.x:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
 balanced-match@^1.0.0:
  version "1.0.2"
  resolved "https://registry.nlark.com/balanced-match/download/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -2703,6 +2723,11 @@ core-js-compat@^3.18.0, core-js-compat@^3.19.1, core-js-compat@^3.6.5:
    browserslist "^4.17.6"
    semver "7.0.0"
+core-js@^2.4.0:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 core-js@^3.6.5:
  version "3.19.1"
  resolved "https://registry.npmmirror.com/core-js/download/core-js-3.19.1.tgz#f6f173cae23e73a7d88fa23b6e9da329276c6641"
@@ -3034,7 +3059,7 @@ deep-is@~0.1.3:
  resolved "https://registry.nlark.com/deep-is/download/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
  integrity sha1-pvLc5hL63S7x9Rm3NVHxfoUZmDE=
-deepmerge@^1.5.2:
+deepmerge@^1.2.0, deepmerge@^1.5.2:
  version "1.5.2"
  resolved "https://registry.nlark.com/deepmerge/download/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
  integrity sha1-EEmdhohEza1P7ghC34x/bwyVp1M=
@@ -3297,6 +3322,18 @@ electron-to-chromium@^1.3.896:
  resolved "https://registry.npmmirror.com/electron-to-chromium/download/electron-to-chromium-1.4.1.tgz#623f8fa6ee416e016d93f00efc34fbc73f9f59ed"
  integrity sha512-9ldvb6QMHiDpUNF1iSwBTiTT0qXEN+xIO5WlCJrC5gt0z74ofOiqR698vaJqYWnri0XZiF0YmnrFmGq/EmpGAA==
+element-ui@^2.15.6:
+  version "2.15.6"
+  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.15.6.tgz#c9609add35af5a686a4b7685dc1d757c75e01df3"
+  integrity sha512-rcYXEKd/j2G0AgficAOk1Zd1AsnHRkhmrK4yLHmNOiimU2JfsywgfKUjMoFuT6pQx0luhovj8lFjpE4Fnt58Iw==
+  dependencies:
+    async-validator "~1.8.1"
+    babel-helper-vue-jsx-merge-props "^2.0.0"
+    deepmerge "^1.2.0"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.0"
+    throttle-debounce "^1.0.1"
 elliptic@^6.5.3:
  version "6.5.4"
  resolved "https://registry.nlark.com/elliptic/download/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -5747,6 +5784,11 @@ normalize-url@^3.0.0:
  resolved "https://registry.nlark.com/normalize-url/download/normalize-url-3.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fnormalize-url%2Fdownload%2Fnormalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
  integrity sha1-suHE3E98bVd0PfczpPWXjRhlBVk=
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=
 npm-run-path@^2.0.0:
  version "2.0.2"
  resolved "https://registry.npmmirror.com/npm-run-path/download/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -6843,6 +6885,11 @@ regenerate@^1.4.2:
  resolved "https://registry.nlark.com/regenerate/download/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
  integrity sha1-uTRtiCfo9aMve6KWN9OYtpAUhIo=
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 regenerator-runtime@^0.13.4:
  version "0.13.9"
  resolved "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
@@ -6972,6 +7019,11 @@ requires-port@^1.0.0:
  resolved "https://registry.nlark.com/requires-port/download/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
 resolve-cwd@^2.0.0:
  version "2.0.0"
  resolved "https://registry.nlark.com/resolve-cwd/download/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -7769,6 +7821,11 @@ thread-loader@^2.1.3:
    loader-utils "^1.1.0"
    neo-async "^2.6.0"
+throttle-debounce@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+  integrity sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==
 through2@^2.0.0:
  version "2.0.5"
  resolved "https://registry.nlark.com/through2/download/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"