Skip to content

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

坑洞

上级 8b3599b6
显示空白字符变更
内嵌 并排
正在显示 包含 173 行增加 和 63 行删除
src/App.vue
浏览文件 @ 3bdc6855
...@@ -8,10 +8,34 @@ ...@@ -8,10 +8,34 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>施工日志</span> <span>施工日志</span>
</div> </div>
<el-form ref="ruleForm" label-width="150px" class="demo-ruleForm"> <el-form
ref="ruleForm"
label-width="150px"
class="demo-ruleForm"
size="mini"
>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="单车道宽度" prop="lineHeightm"> <el-form-item label="单车道宽度" prop="lineHeightm">
<el-input v-model="lineHeightm"></el-input> <el-input v-model="lineHeightm"></el-input>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="起点桩号" prop="startStake">
<el-input v-model="startStake"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="界面长度" prop="roadLength">
<el-select v-model="roadLength" placeholder="界面长度">
<el-option label="50" value="50"></el-option>
<el-option label="100" value="100"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="横宽比" prop="ratio"> <el-form-item label="横宽比" prop="ratio">
<el-input-number <el-input-number
v-model="ratio" v-model="ratio"
...@@ -20,6 +44,10 @@ ...@@ -20,6 +44,10 @@
:max="50" :max="50"
></el-input-number> ></el-input-number>
</el-form-item> </el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="车道数（双向）" prop="lineNumber"> <el-form-item label="车道数（双向）" prop="lineNumber">
<el-select <el-select
v-model="lineNumber" v-model="lineNumber"
...@@ -30,12 +58,19 @@ ...@@ -30,12 +58,19 @@
<el-option label="4车道" value="4"></el-option> <el-option label="4车道" value="4"></el-option>
<el-option label="6车道" value="6"></el-option> <el-option label="6车道" value="6"></el-option>
<el-option label="8车道" value="8"></el-option> <el-option label="8车道" value="8"></el-option>
<el-option label="10车道" value="10"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="16">
<el-form-item> <el-form-item>
<el-button type="primary" @click="submitForm()">立即创建</el-button> <el-button type="primary" @click="submitForm()"
>立即创建</el-button
>
</el-form-item> </el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<el-divider></el-divider> <el-divider></el-divider>
<el-table :data="tableData" style="width: 100%"> <el-table :data="tableData" style="width: 100%">
...@@ -48,7 +83,7 @@ ...@@ -48,7 +83,7 @@
<el-table-column prop="endStake" label="终点桩号"> </el-table-column> <el-table-column prop="endStake" label="终点桩号"> </el-table-column>
<el-table-column prop="endStakeCenter" label="中心线"> <el-table-column prop="endStakeCenter" label="中心线">
</el-table-column> </el-table-column>
<el-table-column prop="dataHeight" label="长度"> </el-table-column> <el-table-column prop="dataHeight" label="高度"> </el-table-column>
<el-table-column prop="dataWidth" label="宽度"> </el-table-column> <el-table-column prop="dataWidth" label="宽度"> </el-table-column>
</el-table> </el-table>
</el-card> </el-card>
...@@ -63,15 +98,16 @@ export default { ...@@ -63,15 +98,16 @@ export default {
data() { data() {
return { return {
ctx: null, ctx: null,
boxWidth: 1000, boxWidth: 1200,
boxHeight: 800, boxHeight: 714,
center: 400, center: 357,
lineHeightm: 3.75, lineHeightm: 3.75,
lineHeight: 18.75, lineHeight: 18.75,
lineNumber: 2, lineNumber: 6,
startStake: 236000, startStake: 236000,
endStake: 236200, ratio: 18,
ratio: 5, roadLength: 50,
step: 0,
tableData: [ tableData: [
{ {
dataType: "裂缝", dataType: "裂缝",
...@@ -84,25 +120,65 @@ export default { ...@@ -84,25 +120,65 @@ export default {
}, },
{ {
dataType: "坑洞", dataType: "坑洞",
startStake: "236100", startStake: "236010",
startStakeCenter: "2.75", startStakeCenter: "1",
endStake: "",
endStakeCenter: "",
dataHeight: "1",
dataWidth: "3.75",
},
{
dataType: "坑洞",
startStake: "236020",
startStakeCenter: "3.75",
endStake: "",
endStakeCenter: "",
dataHeight: "3.8",
dataWidth: "1",
},
{
dataType: "坑洞",
startStake: "236040",
startStakeCenter: "7.5",
endStake: "", endStake: "",
endStakeCenter: "", endStakeCenter: "",
dataHeight: "2", dataHeight: "2",
dataWidth: "2", dataWidth: "2",
}, },
{
dataType: "坑洞",
startStake: "236030",
startStakeCenter: "1",
endStake: "",
endStakeCenter: "",
dataHeight: "0.5",
dataWidth: "1.2",
},
], ],
}; };
}, },
mounted() { mounted() {
// 重新计算一下车道宽
this.lineHeight = this.lineHeightm * this.ratio;
this.init(); this.init();
this.drawWaterRipple(); this.loop();
}, },
watch: { watch: {
lineHeightm(val) { lineHeightm(val) {
this.lineHeight = val * this.ratio; this.lineHeight = val * this.ratio;
}, },
}, },
computed: {
endStake() {
return Number(this.startStake) + Number(this.roadLength);
},
boxStartx() {
return this.boxWidth / 2 - (this.roadLength * this.ratio) / 2;
},
boxEndx() {
return this.boxWidth / 2 + (this.roadLength * this.ratio) / 2;
},
},
methods: { methods: {
updateCanvas() { updateCanvas() {
this.ctx.clearRect(0, 0, this.boxWidth, this.boxHeight); this.ctx.clearRect(0, 0, this.boxWidth, this.boxHeight);
...@@ -111,11 +187,8 @@ export default { ...@@ -111,11 +187,8 @@ export default {
}, },
handleRatioChange() { handleRatioChange() {
this.lineHeight = this.lineHeightm * this.ratio; this.lineHeight = this.lineHeightm * this.ratio;
this.updateCanvas();
},
changeLineNumber() {
this.updateCanvas();
}, },
changeLineNumber() {},
init() { init() {
this.ctx = this.$refs.road.getContext("2d"); this.ctx = this.$refs.road.getContext("2d");
this.drowFillRect({ this.drowFillRect({
...@@ -123,17 +196,18 @@ export default { ...@@ -123,17 +196,18 @@ export default {
starty: 0, starty: 0,
width: this.boxWidth, width: this.boxWidth,
height: this.boxHeight, height: this.boxHeight,
fillStyle: "#bdc3c7", fillStyle: "#fff",
}); });
this.drowCenterLine(); this.drowCenterLine();
let upCounter = 1; let upCounter = 1;
let downCounter = 1; let downCounter = 1;
for (let i = 0; i < this.lineNumber - 2; i++) { for (let i = 0; i < this.lineNumber - 2; i++) {
if (i % 2 == 0) { if (i % 2 == 0) {
this.drowDashedLine({ this.drowDashedLine({
startx: 0, startx: this.boxStartx,
starty: this.center - this.lineHeight * upCounter, starty: this.center - this.lineHeight * upCounter,
endx: this.boxWidth, endx: this.boxEndx,
endy: this.center - this.lineHeight * upCounter, endy: this.center - this.lineHeight * upCounter,
lineWidth: 1, lineWidth: 1,
strokeStyle: "#000", strokeStyle: "#000",
...@@ -141,9 +215,9 @@ export default { ...@@ -141,9 +215,9 @@ export default {
upCounter++; upCounter++;
} else { } else {
this.drowDashedLine({ this.drowDashedLine({
startx: 0, startx: this.boxStartx,
starty: this.center + this.lineHeight * downCounter, starty: this.center + this.lineHeight * downCounter,
endx: this.boxWidth, endx: this.boxEndx,
endy: this.center + this.lineHeight * downCounter, endy: this.center + this.lineHeight * downCounter,
lineWidth: 1, lineWidth: 1,
strokeStyle: "#000", strokeStyle: "#000",
...@@ -151,65 +225,81 @@ export default { ...@@ -151,65 +225,81 @@ export default {
downCounter++; downCounter++;
} }
} }
this.drowLine({ this.drowLine({
startx: 0, startx: this.boxStartx,
starty: this.center - this.lineHeight * (this.lineNumber / 2), starty: this.center - this.lineHeight * (this.lineNumber / 2),
endx: this.boxWidth, endx: this.boxEndx,
endy: this.center - this.lineHeight * (this.lineNumber / 2), endy: this.center - this.lineHeight * (this.lineNumber / 2),
lineWidth: 2, lineWidth: 1,
strokeStyle: "#000", strokeStyle: "#000",
}); });
this.drowLine({ this.drowLine({
startx: 0, startx: this.boxStartx,
starty: this.center + this.lineHeight * (this.lineNumber / 2), starty: this.center + this.lineHeight * (this.lineNumber / 2),
endx: this.boxWidth, endx: this.boxEndx,
endy: this.center + this.lineHeight * (this.lineNumber / 2), endy: this.center + this.lineHeight * (this.lineNumber / 2),
lineWidth: 2, lineWidth: 1,
strokeStyle: "#000", strokeStyle: "#000",
}); });
this.drowText(); this.drowText();
this.tableData.forEach((data) => { this.tableData.forEach((data) => {
const x = (data.startStake - this.startStake) * this.ratio;
const y = this.center - data.startStakeCenter * this.ratio;
if (data.dataType === "坑洞") { if (data.dataType === "坑洞") {
this.drowRect({ const startx =
startx: x, this.boxStartx +
starty: y, (data.startStake - this.startStake - data.dataHeight / 2) *
width: data.dataWidth * this.ratio, this.ratio;
height: data.dataHeight * this.ratio, const starty =
strokeStyle: "#000", this.center -
(Number(data.startStakeCenter) + Number(data.dataWidth)) *
this.ratio;
const width = data.dataHeight * this.ratio;
const height = data.dataWidth * this.ratio;
const fillStyle = this.getRandomColor();
this.drowFillRect({
startx,
starty,
width,
height,
fillStyle,
}); });
// this.drowRect({
// startx,
// starty,
// width,
// height,
// strokeStyle,
// });
} else if (data.dataType === "裂缝") { } else if (data.dataType === "裂缝") {
this.drowLine({ // this.drowLine({
startx: 0, // startx: 0,
starty: this.center - this.lineHeight * (this.lineNumber / 2), // starty: this.center - this.lineHeight * (this.lineNumber / 2),
endx: this.boxWidth, // endx: this.boxWidth,
endy: this.center - this.lineHeight * (this.lineNumber / 2), // endy: this.center - this.lineHeight * (this.lineNumber / 2),
lineWidth: 2, // lineWidth: 1,
strokeStyle: "#000", // strokeStyle: "#000",
}); // });
} }
}); });
}, },
drowCenterLine() { drowCenterLine() {
if (this.lineNumber == 2) { if (this.lineNumber == 2) {
this.drowDashedLine({ this.drowDashedLine({
startx: 0, startx: this.boxWidth / 2 - (this.roadLength * this.ratio) / 2,
starty: this.center, starty: this.center,
endx: this.boxWidth, endx: this.boxWidth / 2 + (this.roadLength * this.ratio) / 2,
endy: this.center, endy: this.center,
lineWidth: 5, lineWidth: 2,
strokeStyle: "#000", strokeStyle: "#000",
}); });
} else { } else {
this.drowLine({ this.drowLine({
startx: 0, startx: this.boxWidth / 2 - (this.roadLength * this.ratio) / 2,
starty: this.center, starty: this.center,
endx: this.boxWidth, endx: this.boxWidth / 2 + (this.roadLength * this.ratio) / 2,
endy: this.center, endy: this.center,
lineWidth: 5, lineWidth: 2,
strokeStyle: "#000", strokeStyle: "#000",
}); });
} }
...@@ -218,7 +308,7 @@ export default { ...@@ -218,7 +308,7 @@ export default {
const { startx, starty, width, height, strokeStyle } = rect; const { startx, starty, width, height, strokeStyle } = rect;
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.strokeStyle = strokeStyle; this.ctx.strokeStyle = strokeStyle;
this.ctx.lineWidth = "3"; this.ctx.lineWidth = "1";
this.ctx.rect(startx, starty, width, height); this.ctx.rect(startx, starty, width, height);
this.ctx.stroke(); this.ctx.stroke();
this.ctx.closePath(); this.ctx.closePath();
...@@ -236,7 +326,7 @@ export default { ...@@ -236,7 +326,7 @@ export default {
starty, starty,
endx, endx,
endy, endy,
lineWidth = 3, lineWidth = 1,
strokeStyle = "#000", strokeStyle = "#000",
} = line; } = line;
this.ctx.save(); this.ctx.save();
...@@ -268,24 +358,42 @@ export default { ...@@ -268,24 +358,42 @@ export default {
this.ctx.stroke(); this.ctx.stroke();
this.ctx.closePath(); this.ctx.closePath();
}, },
drawWaterRipple() {},
drowText() { drowText() {
this.ctx.font = "22px 微软雅黑"; this.ctx.font = "12px 微软雅黑";
this.ctx.fillStyle = "#000"; this.ctx.fillStyle = "#000";
this.ctx.fillText( this.ctx.fillText(
"K236", this.startStake,
10, this.boxStartx,
this.center - this.lineHeight * (this.lineNumber / 2 + 0.5) this.center - this.lineHeight * (this.lineNumber / 2) - 2
); );
this.ctx.fillText( this.ctx.fillText(
"K236+200", this.endStake,
this.boxWidth - 120, this.boxEndx - 40,
this.center - this.lineHeight * (this.lineNumber / 2 + 0.5) this.center - this.lineHeight * (this.lineNumber / 2) - 2
); );
}, },
submitForm() { submitForm() {
this.updateCanvas(); this.updateCanvas();
}, },
getRandomColor() {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
return "rgba(" + r + "," + g + "," + b + ",0.8)";
},
loop() {
this.ctx.beginPath();
this.ctx.moveTo(1, 100);
for (var i = 1; i < 10; i += 0.1) {
// x 应该等于canvas的 width/10
var x = i * 10;
var y = Math.sin(i) * 5 + 100;
this.ctx.lineTo(x, y);
console.log(x, y);
}
this.ctx.stroke();
this.ctx.closePath();
},
}, },
}; };
</script> </script>
...@@ -293,14 +401,16 @@ export default { ...@@ -293,14 +401,16 @@ export default {
<style> <style>
#app { #app {
display: flex; display: flex;
flex-direction: column;
align-items: center;
} }
.canvas { .canvas {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 10px;
} }
.plan { .plan {
background: antiquewhite; background: #fff;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论