|
@@ -8,7 +8,7 @@
|
|
|
</div>
|
|
|
<div class="coord-labelY">
|
|
|
<div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10"
|
|
|
- :key="ind">{{ maxY - Math.floor(maxY / 10) * ind }}</div>
|
|
|
+ :key="ind">{{ ind == 0 ? maxY : '' }}</div>
|
|
|
</div>
|
|
|
<div class="coord-lineX">
|
|
|
<div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff', }"
|
|
@@ -16,7 +16,7 @@
|
|
|
</div>
|
|
|
<div class="coord-labelX">
|
|
|
<div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10"
|
|
|
- :key="ind">{{ Math.floor(maxX / 10) + Math.floor(maxX / 10) * ind }}</div>
|
|
|
+ :key="ind">{{ ind == 9 ? maxX : '' }}</div>
|
|
|
</div>
|
|
|
<div class="line-AB" :style="{ width: 'calc(100% - 15px)', height: 'calc(100% - 10px)' }">
|
|
|
<canvas id="myCanvas" width="250" height="245"></canvas>
|
|
@@ -47,6 +47,9 @@ let lengY = ref(0)
|
|
|
//与x,y轴相交最大值坐标
|
|
|
let maxY = ref(0)
|
|
|
let maxX = ref(0)
|
|
|
+let maxY1 = ref(0)
|
|
|
+let maxX1 = ref(0)
|
|
|
+
|
|
|
//A点坐标
|
|
|
let coordinateA = reactive({
|
|
|
x: 0,
|
|
@@ -89,8 +92,8 @@ function getAreas() {
|
|
|
}
|
|
|
|
|
|
}
|
|
|
-//根据A,B,E,G等点坐标绘制图形
|
|
|
-function getLIne() {
|
|
|
+//根据A,B,E,G等点坐标绘制爆炸三角形
|
|
|
+function getBlast() {
|
|
|
maxY.value = getCoordABY(0)
|
|
|
maxX.value = getCoordABX(0)
|
|
|
// 获取canvas元素
|
|
@@ -212,7 +215,7 @@ function getLIne() {
|
|
|
// 在点附近添加文字
|
|
|
ctx.font = "12px Arial";
|
|
|
ctx.fillStyle = "#fff";
|
|
|
- ctx.fillText("A", 20, 10); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
+ ctx.fillText("A", coordinateA.x * scalcX + 10, canvas.height - (coordinateA.y * scalcY)); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
|
|
|
//标记点B
|
|
|
ctx.beginPath();
|
|
@@ -222,7 +225,7 @@ function getLIne() {
|
|
|
// 在点附近添加文字
|
|
|
ctx.font = "12px Arial";
|
|
|
ctx.fillStyle = "#fff";
|
|
|
- ctx.fillText("B", 50, 40); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
+ ctx.fillText("B", coordinateB.x * scalcX + 10, canvas.height - (coordinateB.y * scalcY)); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
|
|
|
//标记点E
|
|
|
ctx.beginPath();
|
|
@@ -232,7 +235,7 @@ function getLIne() {
|
|
|
// 在点附近添加文字
|
|
|
ctx.font = "12px Arial";
|
|
|
ctx.fillStyle = "#fff";
|
|
|
- ctx.fillText("E", 20, 140); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
+ ctx.fillText("E", coordinateE.x * scalcX + 5, canvas.height - (coordinateE.y * scalcY) + 10); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
|
|
|
//标记点G
|
|
|
ctx.beginPath();
|
|
@@ -242,7 +245,7 @@ function getLIne() {
|
|
|
// 在点附近添加文字
|
|
|
ctx.font = "12px Arial";
|
|
|
ctx.fillStyle = "#fff";
|
|
|
- ctx.fillText("G", 0, 120); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
+ ctx.fillText("G", coordinateG.x * scalcX + 5, canvas.height - (coordinateG.y * scalcY)); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
//标记点F
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(coordinateF.x * scalcX, canvas.height - (coordinateF.y * scalcY), 1, 0, 2 * Math.PI);
|
|
@@ -251,19 +254,105 @@ function getLIne() {
|
|
|
// 在点附近添加文字
|
|
|
ctx.font = "12px Arial";
|
|
|
ctx.fillStyle = "#fff";
|
|
|
- ctx.fillText("F", 30, 240); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
+ ctx.fillText("F", coordinateF.x * scalcX + 10, canvas.height - (coordinateF.y * scalcY) - 10); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
+ //标记点
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(maxX1.value * scalcX, canvas.height - (maxY1.value * scalcY), 5, 0, 2 * Math.PI);
|
|
|
+ ctx.fillStyle = "blue";
|
|
|
+ ctx.fill();
|
|
|
+ // 在点附近添加文字
|
|
|
+ ctx.font = "12px Arial";
|
|
|
+ ctx.fillStyle = "#fff";
|
|
|
+ ctx.fillText("", maxX1.value * scalcX + 10, canvas.height - (maxY1.value * scalcY) - 10); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
+}
|
|
|
+//绘制不爆炸三角形
|
|
|
+function getUnblast() {
|
|
|
+ maxY.value = 21
|
|
|
+ maxX.value = 100
|
|
|
+ // 获取canvas元素
|
|
|
+ let canvas = document.getElementById('myCanvas');
|
|
|
+ let ctx = canvas.getContext('2d');
|
|
|
+ let scalcY = canvas.height / maxY.value
|
|
|
+ let scalcX = canvas.width / maxX.value
|
|
|
+
|
|
|
+ //绘制AB点线条
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(0, canvas.height - (maxY.value * scalcY)); // 开始绘制的点
|
|
|
+ ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
|
|
|
+ ctx.strokeStyle = '#000';
|
|
|
+ ctx.stroke(); // 进行绘制
|
|
|
+
|
|
|
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
+ let pointData = [
|
|
|
+ {
|
|
|
+ arr: [
|
|
|
+ { x: 0, y: canvas.height },//原点
|
|
|
+ { x: 0, y: canvas.height - (maxY.value * scalcY) },//A
|
|
|
+ { x: maxX.value * scalcX, y: canvas.height },//B
|
|
|
+ ],
|
|
|
+ color: 'rgb(127, 254, 2, .9)',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ pointData.forEach((item, index) => {
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(item.arr[0].x, item.arr[0].y);
|
|
|
+ item.arr.forEach((items, ind) => {
|
|
|
+ if (ind != 0) {
|
|
|
+ ctx.lineTo(item.arr[ind].x, item.arr[ind].y)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ ctx.closePath();
|
|
|
+ ctx.fillStyle = item.color;
|
|
|
+ ctx.fill();
|
|
|
+ ctx.strokeStyle = "transparent";
|
|
|
+ ctx.lineWidth = 1;
|
|
|
+ ctx.stroke();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 标记点A
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(0, canvas.height - (maxY.value * scalcY), 1, 0, 2 * Math.PI);
|
|
|
+ ctx.fillStyle = "#eee";
|
|
|
+ ctx.fill();
|
|
|
+ // 在点附近添加文字
|
|
|
+ ctx.font = "12px Arial";
|
|
|
+ ctx.fillStyle = "#fff";
|
|
|
+ ctx.fillText("A", 10, canvas.height - (maxY.value * scalcY) + 10); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
+ // 标记点B
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(maxX.value * scalcX, canvas.height, 1, 0, 2 * Math.PI);
|
|
|
+ ctx.fillStyle = "#eee";
|
|
|
+ ctx.fill();
|
|
|
+ // 在点附近添加文字
|
|
|
+ ctx.font = "12px Arial";
|
|
|
+ ctx.fillStyle = "#fff";
|
|
|
+ ctx.fillText("B", maxX.value * scalcX - 10, canvas.height - 10); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
+ //标记点
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(maxX1.value * scalcX, canvas.height - (maxY1.value * scalcY), 5, 0, 2 * Math.PI);
|
|
|
+ ctx.fillStyle = "blue";
|
|
|
+ ctx.fill();
|
|
|
+ // 在点附近添加文字
|
|
|
+ ctx.font = "12px Arial";
|
|
|
+ ctx.fillStyle = "#fff";
|
|
|
+ ctx.fillText("", maxX1.value * scalcX + 10, canvas.height - (maxY1.value * scalcY) - 10); // 文字位置略微偏上,以便于文字与点对齐
|
|
|
}
|
|
|
//根据横坐标获取直线AB纵坐标
|
|
|
function getCoordABY(params) {
|
|
|
- return Math.ceil(((coordinateB.y - coordinateA.y) * params - coordinateA.x * coordinateB.y + coordinateB.x * coordinateA.y) / (coordinateB.x - coordinateA.x))
|
|
|
+ return Math.ceil(((parseFloat(coordinateB.y) - parseFloat(coordinateA.y)) * params - parseFloat(coordinateA.x) * parseFloat(coordinateB.y) + parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) / (parseFloat(coordinateB.x) - parseFloat(coordinateA.x)))
|
|
|
}
|
|
|
//根据纵坐标获取直线AB横坐标
|
|
|
function getCoordABX(params1) {
|
|
|
- return Math.ceil(((coordinateB.x - coordinateA.x) * params1 + coordinateA.x * coordinateB.y - coordinateB.x * coordinateA.y) / (coordinateB.y - coordinateA.y))
|
|
|
+ return Math.ceil(((parseFloat(coordinateB.x) - parseFloat(coordinateA.x)) * params1 + parseFloat(coordinateA.x) * parseFloat(coordinateB.y) - parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) / (parseFloat(coordinateB.y) - parseFloat(coordinateA.y)))
|
|
|
}
|
|
|
|
|
|
watch(() => props.posMonitor, (newV, oldV) => {
|
|
|
- let btTriBlasts = JSON.parse(newV.btTriBlast)
|
|
|
+ maxY1.value = parseFloat(newV.coval) + parseFloat(newV.gasval) + parseFloat(newV.ch2val) + parseFloat(newV.chval)
|
|
|
+ maxX1.value = parseFloat(newV.o2val)
|
|
|
+
|
|
|
+ // let btTriBlasts = JSON.parse(newV.btTriBlast)
|
|
|
+ let btTriBlasts ={"G_y":0.0,"G_x":0,"F_y":0,"A_x":0.0,"B_x":0.0,"A_y":20.98,"B_y":20.98,"E_y":0.0,"F_x":0.0,"E_x":0.0}
|
|
|
coordinateA.x = btTriBlasts.A_x
|
|
|
coordinateA.y = btTriBlasts.A_y
|
|
|
coordinateB.x = btTriBlasts.B_x
|
|
@@ -274,8 +363,11 @@ watch(() => props.posMonitor, (newV, oldV) => {
|
|
|
coordinateF.y = btTriBlasts.F_y
|
|
|
coordinateG.x = btTriBlasts.G_x
|
|
|
coordinateG.y = btTriBlasts.G_y
|
|
|
- getLIne()
|
|
|
-
|
|
|
+ if (!((coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x)) || (coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x) == 1) {
|
|
|
+ getUnblast()
|
|
|
+ } else {
|
|
|
+ getBlast()
|
|
|
+ }
|
|
|
}, { deep: true })
|
|
|
|
|
|
onMounted(() => {
|
|
@@ -290,11 +382,12 @@ onMounted(() => {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- .blast-title{
|
|
|
+
|
|
|
+ .blast-title {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
top: 24px;
|
|
|
- transform: translate(-50%,0);
|
|
|
+ transform: translate(-50%, 0);
|
|
|
font-size: 12px;
|
|
|
color: #fff;
|
|
|
}
|
|
@@ -384,7 +477,8 @@ onMounted(() => {
|
|
|
right: 0;
|
|
|
top: 20px;
|
|
|
height: 80px;
|
|
|
- .item-name{
|
|
|
+
|
|
|
+ .item-name {
|
|
|
height: 20px;
|
|
|
line-height: 20px;
|
|
|
font-size: 10px;
|