Skip to content

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

坑洞

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