Skip to content

R
road-demo
提交 8b3599b6 authored 作者: 王健's avatar 王健
浏览文件
操作

init

上级 fab74774
显示空白字符变更
内嵌 并排
正在显示 包含 354 行增加 和 127 行删除
package.json
浏览文件 @ 8b3599b6
......@@ -9,6 +9,7 @@
},
"dependencies": {
"core-js": "^3.6.5",
"element-ui": "^2.15.6",
"vue": "^2.6.11"
},
"devDependencies": {
......
src/App.vue
浏览文件 @ 8b3599b6
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
<div class="canvas">
<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: {
HelloWorld,
props: {},
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;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
display: flex;
}
.canvas {
display: block;
box-sizing: border-box;
padding: 20px;
}
.plan {
background: antiquewhite;
width: 100%;
box-sizing: border-box;
padding: 20px;
}
</style>
src/components/HelloWorld.vue deleted 100644 → 0
浏览文件 @ fab74774
<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>
src/main.js
浏览文件 @ 8b3599b6
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),
......
yarn.lock
浏览文件 @ 8b3599b6
......@@ -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"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论