|
|
@@ -3,20 +3,16 @@
|
|
|
<!-- <div class="blast-title">爆炸三角形</div> -->
|
|
|
<div ref="coord" class="coords">
|
|
|
<div class="coord-lineY">
|
|
|
- <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10"
|
|
|
- :key="item"></div>
|
|
|
+ <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10" :key="item"></div>
|
|
|
</div>
|
|
|
<div class="coord-labelY">
|
|
|
- <div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10" :key="ind">{{ ind
|
|
|
- == 0 ? maxY : '' }}</div>
|
|
|
+ <div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10" :key="ind">{{ ind == 0 ? maxY : '' }}</div>
|
|
|
</div>
|
|
|
<div class="coord-lineX">
|
|
|
- <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff' }" v-for="item in 15"
|
|
|
- :key="item"></div>
|
|
|
+ <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff' }" v-for="item in 15" :key="item"></div>
|
|
|
</div>
|
|
|
<div class="coord-labelX">
|
|
|
- <div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 15" :key="ind">{{ ind
|
|
|
- == 14 ? maxX : '' }}</div>
|
|
|
+ <div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 15" :key="ind">{{ ind == 14 ? maxX : '' }}</div>
|
|
|
</div>
|
|
|
<div class="line-AB" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)' }">
|
|
|
<canvas id="myCanvas" :width="canvasSize.width" :height="canvasSize.height"></canvas>
|
|
|
@@ -38,333 +34,236 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, reactive, onMounted, watch } from 'vue';
|
|
|
-
|
|
|
-let props = defineProps({
|
|
|
- posMonitor: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {};
|
|
|
+ import { ref, reactive, onMounted, watch } from 'vue';
|
|
|
+
|
|
|
+ let props = defineProps({
|
|
|
+ posMonitor: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- canvasSize: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return { width: 348, height: 245 };
|
|
|
+ canvasSize: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return { width: 348, height: 245 };
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
-});
|
|
|
-let coord = ref(null);
|
|
|
-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,
|
|
|
- y: 0,
|
|
|
-});
|
|
|
-//B点坐标
|
|
|
-let coordinateB = reactive({
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
-});
|
|
|
-//E点坐标
|
|
|
-let coordinateE = reactive({
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
-});
|
|
|
-//F点坐标
|
|
|
-let coordinateF = reactive({
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
-});
|
|
|
-//G点坐标
|
|
|
-let coordinateG = reactive({
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
-});
|
|
|
-
|
|
|
-let legendList = ref<any[]>([{ name: '不爆炸' }, { name: '可燃气体不足' }, { name: '可爆炸' }, { name: '氧气不足' }]);
|
|
|
-
|
|
|
-function getAreas() {
|
|
|
- if (coord.value) {
|
|
|
- let width = coord.value.offsetWidth;
|
|
|
- let height = coord.value.offsetHeight;
|
|
|
- lengY.value = Math.ceil((height - 10) / 10);
|
|
|
+ });
|
|
|
+ let coord = ref(null);
|
|
|
+ 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,
|
|
|
+ y: 0,
|
|
|
+ });
|
|
|
+ //B点坐标
|
|
|
+ let coordinateB = reactive({
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ });
|
|
|
+ //E点坐标
|
|
|
+ let coordinateE = reactive({
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ });
|
|
|
+ //F点坐标
|
|
|
+ let coordinateF = reactive({
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ });
|
|
|
+ //G点坐标
|
|
|
+ let coordinateG = reactive({
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ });
|
|
|
+
|
|
|
+ let legendList = ref<any[]>([{ name: '不爆炸' }, { name: '可燃气体不足' }, { name: '可爆炸' }, { name: '氧气不足' }]);
|
|
|
+
|
|
|
+ function getAreas() {
|
|
|
+ if (coord.value) {
|
|
|
+ let width = coord.value.offsetWidth;
|
|
|
+ let height = coord.value.offsetHeight;
|
|
|
+ lengY.value = Math.ceil((height - 10) / 10);
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-//根据A,B,E,G等点坐标绘制爆炸三角形
|
|
|
-function getBlast() {
|
|
|
- maxY.value = getCoordABY(0);
|
|
|
- // maxX.value = getCoordABX(0);
|
|
|
- maxX.value = 50;
|
|
|
- // 获取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(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
|
|
|
- ctx.lineTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 结束绘制的点
|
|
|
- ctx.strokeStyle = '#000';
|
|
|
- ctx.stroke(); // 进行绘制
|
|
|
-
|
|
|
- //绘制AE线条
|
|
|
- ctx.beginPath();
|
|
|
- ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
|
|
|
- ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
|
|
|
- ctx.strokeStyle = '#000';
|
|
|
- ctx.stroke(); // 进行绘制
|
|
|
-
|
|
|
- //绘制BE线条
|
|
|
- ctx.beginPath();
|
|
|
- ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
|
|
|
- ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
|
|
|
- ctx.strokeStyle = '#000';
|
|
|
- ctx.stroke(); // 进行绘制
|
|
|
-
|
|
|
- //绘制A点与坐标轴连线
|
|
|
- ctx.beginPath();
|
|
|
- ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
|
|
|
- ctx.lineTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 结束绘制的点
|
|
|
- ctx.strokeStyle = '#000';
|
|
|
- ctx.stroke(); // 进行绘制
|
|
|
-
|
|
|
- //绘制B点与坐标轴连线
|
|
|
- ctx.beginPath();
|
|
|
- ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
|
|
|
- ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
|
|
|
- ctx.strokeStyle = '#000';
|
|
|
- ctx.stroke(); // 进行绘制
|
|
|
-
|
|
|
- //绘制E,F线条
|
|
|
- ctx.beginPath();
|
|
|
- ctx.moveTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 开始绘制的点
|
|
|
- ctx.lineTo(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY); // 结束绘制的点
|
|
|
- ctx.strokeStyle = '#000';
|
|
|
- ctx.stroke(); // 进行绘制
|
|
|
-
|
|
|
- //绘制GE线条
|
|
|
- ctx.beginPath();
|
|
|
- ctx.moveTo(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY); // 开始绘制的点
|
|
|
- ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
|
|
|
- ctx.strokeStyle = '#000';
|
|
|
- ctx.stroke(); // 进行绘制
|
|
|
-
|
|
|
- ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
- let pointData = [
|
|
|
- {
|
|
|
- arr: [
|
|
|
- { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
|
|
|
- { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
|
|
|
- { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
|
|
|
- { x: 0, y: canvas.height - maxY.value * scalcY },
|
|
|
- ],
|
|
|
- color: 'rgb(1, 127, 2, .9)',
|
|
|
- },
|
|
|
- {
|
|
|
- arr: [
|
|
|
- { x: 0, y: canvas.height }, //原点
|
|
|
- { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
|
|
|
- { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
|
|
|
- { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
|
|
|
- ],
|
|
|
- color: 'rgb(127, 254, 2, .9)',
|
|
|
- },
|
|
|
- {
|
|
|
- arr: [
|
|
|
- { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
|
|
|
- { x: maxX.value * scalcX, y: canvas.height },
|
|
|
- { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
|
|
|
- { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
|
|
|
- ],
|
|
|
- color: 'rgb(255, 255, 0, .9)',
|
|
|
- },
|
|
|
- {
|
|
|
- arr: [
|
|
|
- { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
|
|
|
- { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
|
|
|
- { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
|
|
|
- ],
|
|
|
- color: 'rgb(255, 0, 0, .9)',
|
|
|
- },
|
|
|
- ];
|
|
|
+ //根据A,B,E,G等点坐标绘制爆炸三角形
|
|
|
+ function getBlast() {
|
|
|
+ maxY.value = getCoordABY(0);
|
|
|
+ // maxX.value = getCoordABX(0);
|
|
|
+ maxX.value = 50;
|
|
|
+ // 获取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(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
|
|
|
+ ctx.lineTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 结束绘制的点
|
|
|
+ ctx.strokeStyle = '#000';
|
|
|
+ ctx.stroke(); // 进行绘制
|
|
|
|
|
|
- pointData.forEach((item, index) => {
|
|
|
+ // 标记点A
|
|
|
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.arc(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY, 1, 0, 2 * Math.PI);
|
|
|
+ ctx.fillStyle = '#eee';
|
|
|
ctx.fill();
|
|
|
- ctx.strokeStyle = 'transparent';
|
|
|
- ctx.lineWidth = 1;
|
|
|
- ctx.stroke();
|
|
|
- });
|
|
|
+ // 在点附近添加文字
|
|
|
+ ctx.font = '12px Arial';
|
|
|
+ ctx.fillStyle = '#fff';
|
|
|
+ ctx.fillText('A', coordinateA.x * scalcX + 10, canvas.height - coordinateA.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
|
|
|
|
|
|
- // 标记点A
|
|
|
- ctx.beginPath();
|
|
|
- ctx.arc(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY, 1, 0, 2 * Math.PI);
|
|
|
- ctx.fillStyle = '#eee';
|
|
|
- ctx.fill();
|
|
|
- // 在点附近添加文字
|
|
|
- ctx.font = '12px Arial';
|
|
|
- ctx.fillStyle = '#fff';
|
|
|
- ctx.fillText('A', coordinateA.x * scalcX + 10, canvas.height - coordinateA.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
|
|
|
-
|
|
|
- //标记点B
|
|
|
- ctx.beginPath();
|
|
|
- ctx.arc(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY, 1, 0, 2 * Math.PI);
|
|
|
- ctx.fillStyle = '#eee';
|
|
|
- ctx.fill();
|
|
|
- // 在点附近添加文字
|
|
|
- ctx.font = '12px Arial';
|
|
|
- ctx.fillStyle = '#fff';
|
|
|
- ctx.fillText('B', coordinateB.x * scalcX + 10, canvas.height - coordinateB.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
|
|
|
-
|
|
|
- //标记点E
|
|
|
- ctx.beginPath();
|
|
|
- ctx.arc(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY, 1, 0, 2 * Math.PI);
|
|
|
- ctx.fillStyle = '#eee';
|
|
|
- ctx.fill();
|
|
|
- // 在点附近添加文字
|
|
|
- ctx.font = '12px Arial';
|
|
|
- ctx.fillStyle = '#fff';
|
|
|
- ctx.fillText('E', coordinateE.x * scalcX + 5, canvas.height - coordinateE.y * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
|
|
|
-
|
|
|
- //标记点G
|
|
|
- ctx.beginPath();
|
|
|
- ctx.arc(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY, 1, 0, 2 * Math.PI);
|
|
|
- ctx.fillStyle = '#eee';
|
|
|
- ctx.fill();
|
|
|
- // 在点附近添加文字
|
|
|
- ctx.font = '12px Arial';
|
|
|
- ctx.fillStyle = '#fff';
|
|
|
- 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);
|
|
|
- ctx.fillStyle = '#eee';
|
|
|
- ctx.fill();
|
|
|
- // 在点附近添加文字
|
|
|
- ctx.font = '12px Arial';
|
|
|
- ctx.fillStyle = '#fff';
|
|
|
- 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 = 50;
|
|
|
- // 获取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)',
|
|
|
- },
|
|
|
- ];
|
|
|
+ //标记点B
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY, 1, 0, 2 * Math.PI);
|
|
|
+ ctx.fillStyle = '#eee';
|
|
|
+ ctx.fill();
|
|
|
+ // 在点附近添加文字
|
|
|
+ ctx.font = '12px Arial';
|
|
|
+ ctx.fillStyle = '#fff';
|
|
|
+ ctx.fillText('B', coordinateB.x * scalcX + 10, canvas.height - coordinateB.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
|
|
|
|
|
|
- pointData.forEach((item, index) => {
|
|
|
+ //标记点E
|
|
|
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.arc(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY, 1, 0, 2 * Math.PI);
|
|
|
+ ctx.fillStyle = '#eee';
|
|
|
+ ctx.fill();
|
|
|
+ // 在点附近添加文字
|
|
|
+ ctx.font = '12px Arial';
|
|
|
+ ctx.fillStyle = '#fff';
|
|
|
+ ctx.fillText('E', coordinateE.x * scalcX + 5, canvas.height - coordinateE.y * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
|
|
|
+
|
|
|
+ //标记点G
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY, 1, 0, 2 * Math.PI);
|
|
|
+ ctx.fillStyle = '#eee';
|
|
|
+ ctx.fill();
|
|
|
+ // 在点附近添加文字
|
|
|
+ ctx.font = '12px Arial';
|
|
|
+ ctx.fillStyle = '#fff';
|
|
|
+ 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);
|
|
|
+ ctx.fillStyle = '#eee';
|
|
|
+ ctx.fill();
|
|
|
+ // 在点附近添加文字
|
|
|
+ ctx.font = '12px Arial';
|
|
|
+ ctx.fillStyle = '#fff';
|
|
|
+ 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();
|
|
|
});
|
|
|
- ctx.closePath();
|
|
|
- ctx.fillStyle = item.color;
|
|
|
+
|
|
|
+ // 标记点A
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(0, canvas.height - maxY.value * scalcY, 1, 0, 2 * Math.PI);
|
|
|
+ ctx.fillStyle = '#eee';
|
|
|
ctx.fill();
|
|
|
- ctx.strokeStyle = 'transparent';
|
|
|
- ctx.lineWidth = 1;
|
|
|
- ctx.stroke();
|
|
|
- });
|
|
|
+ // 在点附近添加文字
|
|
|
+ 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(
|
|
|
+ ((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.floor(
|
|
|
+ ((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))
|
|
|
+ );
|
|
|
+ }
|
|
|
|
|
|
- // 标记点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(
|
|
|
- ((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.floor(
|
|
|
- ((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) => {
|
|
|
+ // 单独写为一个方法是为了兼容未初始化时已经有数据的情况下也能正确显示三角形
|
|
|
+ function watchHandler(newV) {
|
|
|
if (newV.btTriBlast) {
|
|
|
maxY1.value = parseFloat(newV.o2val);
|
|
|
maxX1.value = parseFloat(newV.coval) * 0.0001 + parseFloat(newV.gasval) + parseFloat(newV.ch2val) * 0.0001 + parseFloat(newV.chval) * 0.0001;
|
|
|
@@ -388,157 +287,156 @@ watch(
|
|
|
getBlast();
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- { deep: true }
|
|
|
-);
|
|
|
+ }
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- getAreas();
|
|
|
-});
|
|
|
+ watch(() => props.posMonitor, watchHandler, { deep: true });
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getAreas();
|
|
|
+ watchHandler(props.posMonitor);
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.blastDelta {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- // .blast-title {
|
|
|
- // position: absolute;
|
|
|
- // left: 50%;
|
|
|
- // top: 24px;
|
|
|
- // transform: translate(-50%, 0);
|
|
|
- // font-size: 12px;
|
|
|
- // color: #fff;
|
|
|
- // }
|
|
|
-
|
|
|
- .line-legend {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 20px;
|
|
|
- width: 75%;
|
|
|
- height: 20px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- .legend-box {
|
|
|
+ .blastDelta {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ // .blast-title {
|
|
|
+ // position: absolute;
|
|
|
+ // left: 50%;
|
|
|
+ // top: 24px;
|
|
|
+ // transform: translate(-50%, 0);
|
|
|
+ // font-size: 12px;
|
|
|
+ // color: #fff;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .line-legend {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 20px;
|
|
|
+ width: 75%;
|
|
|
+ height: 20px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
display: flex;
|
|
|
-
|
|
|
- height: 100%;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 12px;
|
|
|
-
|
|
|
- &:nth-child(1) {
|
|
|
- flex: 1;
|
|
|
- .legend-icon {
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- background-color: #7ffe02;
|
|
|
- margin-right: 5px;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .legend-box {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ height: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ flex: 1;
|
|
|
+ .legend-icon {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ background-color: #7ffe02;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
- flex: 1.5;
|
|
|
- .legend-icon {
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- background-color: #017f02;
|
|
|
- margin-right: 5px;
|
|
|
+ &:nth-child(2) {
|
|
|
+ flex: 1.5;
|
|
|
+ .legend-icon {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ background-color: #017f02;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- &:nth-child(3) {
|
|
|
- flex:1;
|
|
|
- .legend-icon {
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- background-color: #ff0000;
|
|
|
- margin-right: 5px;
|
|
|
+ &:nth-child(3) {
|
|
|
+ flex: 1;
|
|
|
+ .legend-icon {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ background-color: #ff0000;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- &:nth-child(4) {
|
|
|
- flex:1;
|
|
|
- .legend-icon {
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- background-color: #ffff00;
|
|
|
- margin-right: 5px;
|
|
|
+ &:nth-child(4) {
|
|
|
+ flex: 1;
|
|
|
+ .legend-icon {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ background-color: #ffff00;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .coords {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- width: 90%;
|
|
|
- height: 80%;
|
|
|
- border-left: 1px solid #006c9d;
|
|
|
- border-bottom: 1px solid #006c9d;
|
|
|
- transform: translate(-45%, -46%);
|
|
|
-
|
|
|
- .coord-lineY {
|
|
|
- position: absolute;
|
|
|
- left: -5px;
|
|
|
- top: 10px;
|
|
|
- width: 5px;
|
|
|
- height: calc(100% - 10px);
|
|
|
- }
|
|
|
|
|
|
- .coord-labelY {
|
|
|
+ .coords {
|
|
|
position: absolute;
|
|
|
- left: -25px;
|
|
|
- top: -5px;
|
|
|
- width: 20px;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ width: 90%;
|
|
|
+ height: 80%;
|
|
|
+ border-left: 1px solid #006c9d;
|
|
|
+ border-bottom: 1px solid #006c9d;
|
|
|
+ transform: translate(-45%, -46%);
|
|
|
+
|
|
|
+ .coord-lineY {
|
|
|
+ position: absolute;
|
|
|
+ left: -5px;
|
|
|
+ top: 10px;
|
|
|
+ width: 5px;
|
|
|
+ height: calc(100% - 10px);
|
|
|
+ }
|
|
|
|
|
|
- .coord-lineX {
|
|
|
- display: flex;
|
|
|
- position: absolute;
|
|
|
- bottom: -5px;
|
|
|
- right: 10px;
|
|
|
- width: calc(100% - 10px);
|
|
|
- height: 5px;
|
|
|
- }
|
|
|
+ .coord-labelY {
|
|
|
+ position: absolute;
|
|
|
+ left: -25px;
|
|
|
+ top: -5px;
|
|
|
+ width: 20px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
|
|
|
- .coord-labelX {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- position: absolute;
|
|
|
- bottom: -25px;
|
|
|
- left: -5px;
|
|
|
- width: 100%;
|
|
|
- height: 20px;
|
|
|
- }
|
|
|
+ .coord-lineX {
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -5px;
|
|
|
+ right: 10px;
|
|
|
+ width: calc(100% - 10px);
|
|
|
+ height: 5px;
|
|
|
+ }
|
|
|
|
|
|
- .line-AB {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 10px;
|
|
|
- }
|
|
|
+ .coord-labelX {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -25px;
|
|
|
+ left: -5px;
|
|
|
+ width: 100%;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
|
|
|
+ .line-AB {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 10px;
|
|
|
+ }
|
|
|
|
|
|
- // .legend-name {
|
|
|
- // position: absolute;
|
|
|
- // right: 0;
|
|
|
- // top: 20px;
|
|
|
- // height: 80px;
|
|
|
-
|
|
|
- // .item-name {
|
|
|
- // height: 20px;
|
|
|
- // line-height: 20px;
|
|
|
- // font-size: 10px;
|
|
|
- // color: #fff;
|
|
|
- // letter-spacing: 2px;
|
|
|
- // }
|
|
|
- // }
|
|
|
+ // .legend-name {
|
|
|
+ // position: absolute;
|
|
|
+ // right: 0;
|
|
|
+ // top: 20px;
|
|
|
+ // height: 80px;
|
|
|
+
|
|
|
+ // .item-name {
|
|
|
+ // height: 20px;
|
|
|
+ // line-height: 20px;
|
|
|
+ // font-size: 10px;
|
|
|
+ // color: #fff;
|
|
|
+ // letter-spacing: 2px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
