|
|
@ -1,6 +1,6 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="sys-role-container"> |
|
|
<div class="sys-role-container full-table" style="height: 100%;" v-loading="state.loading"> |
|
|
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> |
|
|
<!-- <el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> |
|
|
<el-form :model="state.queryParams" ref="queryForm" :inline="true"> |
|
|
<el-form :model="state.queryParams" ref="queryForm" :inline="true"> |
|
|
<el-form-item> |
|
|
<el-form-item> |
|
|
<el-button-group> |
|
|
<el-button-group> |
|
|
@ -8,23 +8,30 @@ |
|
|
</el-button-group> |
|
|
</el-button-group> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</el-form> |
|
|
</el-card> |
|
|
</el-card> --> |
|
|
|
|
|
|
|
|
<el-card class="full-table" shadow="hover" style="margin-top: 5px" v-loading="state.loading" element-loading-text="Loading..."> |
|
|
<!-- <el-card class="full-table" shadow="hover" style="margin-top: 5px" v-loading="state.loading" element-loading-text="Loading..."> --> |
|
|
<div id="container" class="container" /> |
|
|
<div id="container" class="container" /> |
|
|
</el-card> |
|
|
<!-- </el-card> --> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script lang="ts" setup name="sysRole"> |
|
|
<script lang="ts" setup name="sysRole"> |
|
|
import { onMounted, reactive, ref } from 'vue'; |
|
|
import { onMounted, reactive, ref } from 'vue'; |
|
|
import Konva from 'konva'; |
|
|
import Konva from 'konva'; |
|
|
import { ElMessageBox, ElMessage } from 'element-plus'; |
|
|
// import { ElMessageBox, ElMessage } from 'element-plus'; |
|
|
import mapData from './map/lab0522xiezuo(1).json'; |
|
|
import mapData from './map/lab0522xiezuo(1).json'; |
|
|
|
|
|
import accessAGV from './map/accessAGV.json'; |
|
|
|
|
|
import platform from '../../laboratory/img/platform.png' |
|
|
|
|
|
import SafetyCabinet from '../../laboratory/img/SafetyCabinet.png' |
|
|
import agv from '../../laboratory/img/AGV01.png' |
|
|
import agv from '../../laboratory/img/AGV01.png' |
|
|
|
|
|
import agv02 from '../../laboratory/img/AGV02.png' |
|
|
import m9 from './m9.png' |
|
|
import m9 from './m9.png' |
|
|
|
|
|
import centrifugal from './centrifugal.png' |
|
|
|
|
|
import incubator from './incubator.png' |
|
|
const state = reactive({ |
|
|
const state = reactive({ |
|
|
loading: false, |
|
|
loading: false, |
|
|
|
|
|
isBeginning: true, |
|
|
advancedPointObj: {}, |
|
|
advancedPointObj: {}, |
|
|
queryParams: { |
|
|
queryParams: { |
|
|
name: undefined, |
|
|
name: undefined, |
|
|
@ -37,6 +44,34 @@ const state = reactive({ |
|
|
height: 3, |
|
|
height: 3, |
|
|
src: m9 |
|
|
src: m9 |
|
|
}, |
|
|
}, |
|
|
|
|
|
platform: { |
|
|
|
|
|
x: -7.037, |
|
|
|
|
|
y:-0.8, |
|
|
|
|
|
width: 1.5, |
|
|
|
|
|
height: 5, |
|
|
|
|
|
src: platform |
|
|
|
|
|
}, |
|
|
|
|
|
incubator: { |
|
|
|
|
|
x: -4.247, |
|
|
|
|
|
y:-3.3, |
|
|
|
|
|
width: 1.1, |
|
|
|
|
|
height: 4.9, |
|
|
|
|
|
src: incubator |
|
|
|
|
|
}, |
|
|
|
|
|
SafetyCabinet: { |
|
|
|
|
|
x: -4.237, |
|
|
|
|
|
y:-3.3, |
|
|
|
|
|
width: 1.7, |
|
|
|
|
|
height: 1.2, |
|
|
|
|
|
src: SafetyCabinet |
|
|
|
|
|
}, |
|
|
|
|
|
centrifugal: { |
|
|
|
|
|
x: -2.537, |
|
|
|
|
|
y:-3.3, |
|
|
|
|
|
width: 2, |
|
|
|
|
|
height: 1.2, |
|
|
|
|
|
src: centrifugal |
|
|
|
|
|
}, |
|
|
}); |
|
|
}); |
|
|
const mapCanvas = reactive<Record<string, any>>({ |
|
|
const mapCanvas = reactive<Record<string, any>>({ |
|
|
// 地图JSON |
|
|
// 地图JSON |
|
|
@ -50,6 +85,8 @@ const mapCanvas = reactive<Record<string, any>>({ |
|
|
text: null, |
|
|
text: null, |
|
|
// 页面canvas舞台 |
|
|
// 页面canvas舞台 |
|
|
stage: null, |
|
|
stage: null, |
|
|
|
|
|
width: 0, |
|
|
|
|
|
height: 0, |
|
|
//根据页面宽高以及实际地图计算出来的缩放比例 |
|
|
//根据页面宽高以及实际地图计算出来的缩放比例 |
|
|
widthScale: 0, |
|
|
widthScale: 0, |
|
|
heightScale: 0, |
|
|
heightScale: 0, |
|
|
@ -76,7 +113,7 @@ const mapCanvas = reactive<Record<string, any>>({ |
|
|
// 开始绘制 |
|
|
// 开始绘制 |
|
|
const draw = () => { |
|
|
const draw = () => { |
|
|
const { normalPosList, advancedPointList, advancedCurveList } = mapCanvas.mapData; |
|
|
const { normalPosList, advancedPointList, advancedCurveList } = mapCanvas.mapData; |
|
|
|
|
|
console.log(77777, advancedPointList, normalPosList?.length) |
|
|
// 绘制普通点 |
|
|
// 绘制普通点 |
|
|
if (normalPosList?.length) { |
|
|
if (normalPosList?.length) { |
|
|
for (let i = 0; i < normalPosList.length; i += 3) { |
|
|
for (let i = 0; i < normalPosList.length; i += 3) { |
|
|
@ -109,8 +146,8 @@ const draw = () => { |
|
|
let rotation = (list.dir / Math.PI) * 180; |
|
|
let rotation = (list.dir / Math.PI) * 180; |
|
|
rotation = isNaN(rotation) ? 0 : rotation; |
|
|
rotation = isNaN(rotation) ? 0 : rotation; |
|
|
const color = list?.enable ? 'blue' : '#303133'; |
|
|
const color = list?.enable ? 'blue' : '#303133'; |
|
|
const width = 50; |
|
|
const width = 40; |
|
|
const height = 37; |
|
|
const height = 27; |
|
|
mapCanvas.rect = new Konva.Rect({ |
|
|
mapCanvas.rect = new Konva.Rect({ |
|
|
opacity: 0.5, |
|
|
opacity: 0.5, |
|
|
x, |
|
|
x, |
|
|
@ -145,96 +182,260 @@ const draw = () => { |
|
|
mapCanvas.layer.add(group); |
|
|
mapCanvas.layer.add(group); |
|
|
} |
|
|
} |
|
|
console.log(888, state.advancedPointObj) |
|
|
console.log(888, state.advancedPointObj) |
|
|
|
|
|
let width = (mapCanvas.widthScale < 50 ? 1.9 : 1.3) * mapCanvas.widthScale; |
|
|
var coAgv = new Image(); |
|
|
var coAgv = new Image(); |
|
|
coAgv.src = mapCanvas.agvImg; |
|
|
coAgv.src = mapCanvas.agvImg; |
|
|
coAgv.onload = function () { |
|
|
coAgv.onload = function () { |
|
|
let list = state.advancedPointObj.LM7; |
|
|
let list = state.advancedPointObj.LM7; |
|
|
if (list.dir) list.dir = parseFloat(list.dir).toFixed(3); |
|
|
if (list.dir) list.dir = parseFloat(list.dir).toFixed(3); |
|
|
console.log(9999, list.pos?.x * mapCanvas.widthScale, list.pos?.y * mapCanvas.heightScale) |
|
|
// console.log(9999, list.pos?.x * mapCanvas.widthScale, list.pos?.y * mapCanvas.heightScale) |
|
|
let rotation = (list.dir / Math.PI) * 180; |
|
|
let rotation = (list.dir / Math.PI) * 180 || 0; |
|
|
var kImage = new Konva.Image({ |
|
|
var kImage = new Konva.Image({ |
|
|
image:coAgv, |
|
|
image:coAgv, |
|
|
x: list.pos?.x * mapCanvas.widthScale, |
|
|
x: list.pos?.x * mapCanvas.widthScale, |
|
|
y: list.pos?.y * mapCanvas.heightScale, |
|
|
y: list.pos?.y * mapCanvas.heightScale, |
|
|
width: 100, |
|
|
width: width, |
|
|
height: 100, |
|
|
height: width, |
|
|
rotation, |
|
|
rotation, |
|
|
offset: { x: 50, y: 50}, |
|
|
offset: { x: width/2, y: width/2}, |
|
|
}); |
|
|
}); |
|
|
console.log(999, kImage) |
|
|
|
|
|
//添加到组 |
|
|
//添加到组 |
|
|
mapCanvas.layer.add(kImage); |
|
|
mapCanvas.layer.add(kImage); |
|
|
var velocity = 5; |
|
|
var arr = ['LM13', 'LM12', 'LM15', 'LM1', 'LM15', 'LM2', 'LM16', 'LM3', 'LM4', 'LM6', 'LM5', 'LM3', 'LM4', 'LM6', 'LM5', |
|
|
var arr = ['LM13', 'LM12', 'LM15']; |
|
|
'LM10', 'LM2', 'LM15', 'LM1', 'LM15', 'LM12', 'LM13', 'LM7' |
|
|
|
|
|
]; |
|
|
let i = 0; |
|
|
let i = 0; |
|
|
|
|
|
let stepX = -105; |
|
|
|
|
|
let stepY = 0; |
|
|
|
|
|
let timeOut = 0; |
|
|
|
|
|
let starTime = 0; |
|
|
|
|
|
|
|
|
var anim = new Konva.Animation(function (frame) { |
|
|
var anim = new Konva.Animation(function (frame) { |
|
|
//上一帧到当前帧的时间差 ms -->s |
|
|
//上一帧到当前帧的时间差 ms -->s |
|
|
var timeDiff = frame.timeDiff /1000;//距离上一帧的时间差 |
|
|
var timeDiff = frame.timeDiff /2000;//距离上一帧的时间差 |
|
|
let now = state.advancedPointObj[arr[i]]; |
|
|
let now = state.advancedPointObj[arr[i]]; |
|
|
if (!now) return false; |
|
|
if (!now) return false; |
|
|
let distX = now.pos.x - kImage.getAttr('x'); |
|
|
let distX = now.pos.x * mapCanvas.widthScale - kImage.getAttr('x'); |
|
|
let distY = now.pos.y - kImage.getAttr('y'); |
|
|
let distY = now.pos.y * mapCanvas.heightScale - kImage.getAttr('y'); |
|
|
if (Math.abs(distX) < 0.5 && Math.abs(distY) < 0.5) { |
|
|
if (frame.time - starTime < timeOut){ |
|
|
|
|
|
return false; |
|
|
|
|
|
} |
|
|
|
|
|
starTime = frame.time; |
|
|
|
|
|
timeOut = 0; |
|
|
|
|
|
|
|
|
|
|
|
if (Math.abs(distX) < 5 && Math.abs(distY) < 5) { |
|
|
|
|
|
switch (arr[i]){ |
|
|
|
|
|
case 'LM1': timeOut = 8600; break; |
|
|
|
|
|
case 'LM2': timeOut = 5000; break; |
|
|
|
|
|
case 'LM3': timeOut = 5000; break; |
|
|
|
|
|
case 'LM4': timeOut = 5000; break; |
|
|
|
|
|
case 'LM5': timeOut = 5000; break; |
|
|
|
|
|
case 'LM6': timeOut = 5000; break; |
|
|
|
|
|
case 'LM7': timeOut = 5000; break; |
|
|
|
|
|
default: break; |
|
|
|
|
|
} |
|
|
i++; |
|
|
i++; |
|
|
if (i >= arr.length) i = 0; |
|
|
if (i >= arr.length) i = 0; |
|
|
|
|
|
state.isBeginning = i == 0 || i == 1; |
|
|
|
|
|
let next = state.advancedPointObj[arr[i]]; |
|
|
|
|
|
const distance = Math.sqrt( |
|
|
|
|
|
Math.pow(next.pos.x* mapCanvas.widthScale - now.pos.x* mapCanvas.widthScale, 2) + |
|
|
|
|
|
Math.pow(next.pos.y* mapCanvas.heightScale - now.pos.y* mapCanvas.heightScale, 2) |
|
|
|
|
|
); |
|
|
|
|
|
const time = distance / 105; |
|
|
|
|
|
stepX = (next.pos.x * mapCanvas.widthScale - now.pos.x * mapCanvas.widthScale) / time; |
|
|
|
|
|
stepY = (next.pos.y * mapCanvas.heightScale - now.pos.y * mapCanvas.heightScale) / time; |
|
|
|
|
|
// console.log(2333, stepX, stepY, distance); |
|
|
} |
|
|
} |
|
|
var dist = timeDiff * velocity; |
|
|
// console.log(9999, kImage.getAttr('x'), now.pos.x * mapCanvas.widthScale , kImage.getAttr('y'), now.pos.y* mapCanvas.heightScale) |
|
|
console.log(9999, kImage.getAttr('x')) |
|
|
kImage.move({x: stepX * timeDiff, y: stepY * timeDiff}); |
|
|
kImage.move({x: distX > 0 ? dist : (dist * -1), y: distY > 0 ? dist : (dist * -1)}); |
|
|
|
|
|
}, mapCanvas.layer); |
|
|
}, mapCanvas.layer); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//开启动画 |
|
|
//开启动画 |
|
|
anim.start(); |
|
|
anim.start(); |
|
|
} |
|
|
} |
|
|
// Konva.Image.fromURL(mapCanvas.agvImg, function(darthNode) { |
|
|
|
|
|
// let list = state.advancedPointObj.LM1; |
|
|
|
|
|
// if (list.dir) list.dir = parseFloat(list.dir).toFixed(3); |
|
|
|
|
|
// let rotation = (list.dir / Math.PI) * 180; |
|
|
|
|
|
// darthNode.setAttrs({ |
|
|
|
|
|
// x: list.pos?.x * mapCanvas.widthScale, |
|
|
|
|
|
// y: list.pos?.y * mapCanvas.heightScale, |
|
|
|
|
|
// width: 100, |
|
|
|
|
|
// height: 100, |
|
|
|
|
|
// rotation, |
|
|
|
|
|
// offset: { x: 50, y: 50}, |
|
|
|
|
|
// }); |
|
|
|
|
|
// mapCanvas.layer.add(darthNode); |
|
|
|
|
|
// mapCanvas.layer.batchDraw(); |
|
|
|
|
|
// }); |
|
|
|
|
|
|
|
|
|
|
|
var img = new Image(); |
|
|
var img = new Image(); |
|
|
img.src = state.m9.src; |
|
|
img.src = state.m9.src; |
|
|
|
|
|
let textColor = '#f25f33' |
|
|
|
|
|
let labelTextColor = '#666' |
|
|
|
|
|
let fontTitleSize1 = (mapCanvas.widthScale < 50 ? 0.3 : 0.25) * mapCanvas.widthScale; |
|
|
|
|
|
let fontContentSize1 = (mapCanvas.widthScale < 50 ? 0.25 : 0.2) * mapCanvas.widthScale; |
|
|
|
|
|
let fontContentSize14 = (mapCanvas.widthScale < 50 ? 0.2 : 0.17) * mapCanvas.widthScale; |
|
|
|
|
|
let offsetWidth10 = 0.13 * mapCanvas.widthScale; |
|
|
|
|
|
let offsetHeight10 = 0.23 * mapCanvas.heightScale; |
|
|
img.onload = function () { |
|
|
img.onload = function () { |
|
|
|
|
|
let x = state.m9.x * mapCanvas.widthScale; |
|
|
|
|
|
let y = state.m9.y * mapCanvas.heightScale; |
|
|
|
|
|
const text1_1 = new Konva.Text({x: x+2*offsetWidth10,y: y-offsetHeight10,text: 'M9_01',fontSize: fontTitleSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_2 = new Konva.Text({x: x+2*offsetWidth10,y: y-3.5*offsetHeight10,text: '温度：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_3 = new Konva.Text({x: x+6*offsetWidth10,y: y-3.5*offsetHeight10,text: '-195.2',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text1_4 = new Konva.Text({x: x+2*offsetWidth10,y: y-5.5*offsetHeight10,text: '湿度：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_5 = new Konva.Text({x: x+6*offsetWidth10,y: y-5.5*offsetHeight10,text: '12.1%',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text1_6 = new Konva.Text({x: x+2*offsetWidth10,y: y-7.5*offsetHeight10,text: '液氮：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_7 = new Konva.Text({x: x+6*offsetWidth10,y: y-7.5*offsetHeight10,text: '26',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text2_1 = new Konva.Text({x: x+16*offsetWidth10,y: y-offsetHeight10,text: 'M9_02',fontSize: fontTitleSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text2_2 = new Konva.Text({x: x+16*offsetWidth10,y: y-3.5*offsetHeight10,text: '温度：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text2_3 = new Konva.Text({x: x+20*offsetWidth10,y: y-3.5*offsetHeight10,text: '-195.2',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text2_4 = new Konva.Text({x: x+16*offsetWidth10,y: y-5.5*offsetHeight10,text: '湿度：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text2_5 = new Konva.Text({x: x+20*offsetWidth10,y: y-5.5*offsetHeight10,text: '12.1%',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text2_6 = new Konva.Text({x: x+16*offsetWidth10,y: y-7.5*offsetHeight10,text: '液氮：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text2_7 = new Konva.Text({x: x+20*offsetWidth10,y: y-7.5*offsetHeight10,text: '26',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text3_1 = new Konva.Text({x: x+30*offsetWidth10,y: y-offsetHeight10,text: 'M9_03',fontSize: fontTitleSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text3_2 = new Konva.Text({x: x+30*offsetWidth10,y: y-3.5*offsetHeight10,text: '温度：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text3_3 = new Konva.Text({x: x+34*offsetWidth10,y: y-3.5*offsetHeight10,text: '-195.2',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text3_4 = new Konva.Text({x: x+30*offsetWidth10,y: y-5.5*offsetHeight10,text: '湿度：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text3_5 = new Konva.Text({x: x+34*offsetWidth10,y: y-5.5*offsetHeight10,text: '12.1%',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text3_6 = new Konva.Text({x: x+30*offsetWidth10,y: y-7.5*offsetHeight10,text: '液氮：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text3_7 = new Konva.Text({x: x+34*offsetWidth10,y: y-7.5*offsetHeight10,text: '26',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text4_1 = new Konva.Text({x: x+44*offsetWidth10,y: y-offsetHeight10,text: 'M9_04',fontSize: fontTitleSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text4_2 = new Konva.Text({x: x+44*offsetWidth10,y: y-3.5*offsetHeight10,text: '温度：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text4_3 = new Konva.Text({x: x+48*offsetWidth10,y: y-3.5*offsetHeight10,text: '-195.2',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text4_4 = new Konva.Text({x: x+44*offsetWidth10,y: y-5.5*offsetHeight10,text: '湿度：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text4_5 = new Konva.Text({x: x+48*offsetWidth10,y: y-5.5*offsetHeight10,text: '12.1%',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text4_6 = new Konva.Text({x: x+44*offsetWidth10,y: y-7.5*offsetHeight10,text: '液氮：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text4_7 = new Konva.Text({x: x+48*offsetWidth10,y: y-7.5*offsetHeight10,text: '26',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text5_1 = new Konva.Text({x: x+57.5*offsetWidth10,y: y-offsetHeight10,text: 'M9_05',fontSize: fontTitleSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text5_2 = new Konva.Text({x: x+57.5*offsetWidth10,y: y-3.5*offsetHeight10,text: '温度：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text5_3 = new Konva.Text({x: x+61.5*offsetWidth10,y: y-3.5*offsetHeight10,text: '-195.2',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text5_4 = new Konva.Text({x: x+57.5*offsetWidth10,y: y-5.5*offsetHeight10,text: '湿度：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text5_5 = new Konva.Text({x: x+61.5*offsetWidth10,y: y-5.5*offsetHeight10,text: '12.1%',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text5_6 = new Konva.Text({x: x+57.5*offsetWidth10,y: y-7.5*offsetHeight10,text: '液氮：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text5_7 = new Konva.Text({x: x+61.5*offsetWidth10,y: y-7.5*offsetHeight10,text: '26',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text6_1 = new Konva.Text({x: x+71.5*offsetWidth10,y: y-offsetHeight10,text: 'M9_06',fontSize: fontTitleSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text6_2 = new Konva.Text({x: x+71.5*offsetWidth10,y: y-3.5*offsetHeight10,text: '温度：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text6_3 = new Konva.Text({x: x+75.5*offsetWidth10,y: y-3.5*offsetHeight10,text: '-195.2',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text6_4 = new Konva.Text({x: x+71.5*offsetWidth10,y: y-5.5*offsetHeight10,text: '湿度：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text6_5 = new Konva.Text({x: x+75.5*offsetWidth10,y: y-5.5*offsetHeight10,text: '12.1%',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text6_6 = new Konva.Text({x: x+71.5*offsetWidth10,y: y-7.5*offsetHeight10,text: '液氮：',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text6_7 = new Konva.Text({x: x+75.5*offsetWidth10,y: y-7.5*offsetHeight10,text: '26',fontSize: fontContentSize1,fill: textColor,scaleY: -1,}); |
|
|
var kImage = new Konva.Image({ |
|
|
var kImage = new Konva.Image({ |
|
|
image:img, |
|
|
image:img, |
|
|
x: state.m9.x * mapCanvas.widthScale, |
|
|
x: x, |
|
|
y: state.m9.y * mapCanvas.heightScale, |
|
|
y: y, |
|
|
width: state.m9.width * mapCanvas.widthScale, |
|
|
width: state.m9.width * mapCanvas.widthScale, |
|
|
height: state.m9.height * mapCanvas.heightScale, |
|
|
height: state.m9.height * mapCanvas.heightScale, |
|
|
scale: {x:1, y: -1} |
|
|
scale: {x:1, y: -1} |
|
|
}); |
|
|
}); |
|
|
//添加到组 |
|
|
//添加到组 |
|
|
mapCanvas.layer.add(kImage); |
|
|
mapCanvas.layer.add(kImage, text1_1, text1_2, text1_3, text1_4, text1_5, text1_6, text1_7, |
|
|
|
|
|
text2_1, text2_2, text2_3, text2_4, text2_5, text2_6, text2_7, |
|
|
|
|
|
text3_1, text3_2, text3_3, text3_4, text3_5, text3_6, text3_7, |
|
|
|
|
|
text4_1, text4_2, text4_3, text4_4, text4_5, text4_6, text4_7, |
|
|
|
|
|
text5_1, text5_2, text5_3, text5_4, text5_5, text5_6, text5_7, |
|
|
|
|
|
text6_1, text6_2, text6_3, text6_4, text6_5, text6_6, text6_7 |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
// 原代培养平台 |
|
|
|
|
|
var platformImg = new Image(); |
|
|
|
|
|
platformImg.src = state.platform.src; |
|
|
|
|
|
platformImg.onload = function () { |
|
|
|
|
|
let x = state.platform.x * mapCanvas.widthScale; |
|
|
|
|
|
let y = state.platform.y * mapCanvas.heightScale; |
|
|
|
|
|
let width = state.platform.width * mapCanvas.widthScale; |
|
|
|
|
|
let height = state.platform.height * mapCanvas.heightScale; |
|
|
|
|
|
const text1_1 = new Konva.Text({x: x-width+1*offsetWidth10,y: y+height-offsetHeight10,text: '原代培养平台',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_2 = new Konva.Text({x: x-width+1*offsetWidth10,y: y+height-3.5*offsetHeight10,text: '血清类型：',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_3 = new Konva.Text({x: x-width+7.5*offsetWidth10,y: y+height-3.5*offsetHeight10,text: 'FBS',fontSize: fontContentSize14,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text1_4 = new Konva.Text({x: x-width+1*offsetWidth10,y: y+height-6*offsetHeight10,text: '温度：',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_5 = new Konva.Text({x: x-width+5*offsetWidth10,y: y+height-6*offsetHeight10,text: '37.3',fontSize: fontContentSize14,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text1_6 = new Konva.Text({x: x-width+1*offsetWidth10,y: y+height-8.5*offsetHeight10,text: 'CO2：',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_7 = new Konva.Text({x: x-width+5*offsetWidth10,y: y+height-8.5*offsetHeight10,text: '5.1%',fontSize: fontContentSize14,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text1_8 = new Konva.Text({x: x-width+1*offsetWidth10,y: y+height-11*offsetHeight10,text: 'PH：',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_9 = new Konva.Text({x: x-width+4*offsetWidth10,y: y+height-11*offsetHeight10,text: '7.3',fontSize: fontContentSize14,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
var kImage2 = new Konva.Image({ |
|
|
|
|
|
image:platformImg, |
|
|
|
|
|
x: x, |
|
|
|
|
|
y: y, |
|
|
|
|
|
width: width, |
|
|
|
|
|
height: height, |
|
|
|
|
|
scale: {x:1, y: -1}, |
|
|
|
|
|
rotation: 180, |
|
|
|
|
|
}); |
|
|
|
|
|
//添加到组 |
|
|
|
|
|
mapCanvas.layer.add(kImage2, text1_1, text1_2, text1_3, text1_4, text1_5, text1_6, text1_7, text1_8, text1_9, ); |
|
|
|
|
|
} |
|
|
|
|
|
// 培养箱 |
|
|
|
|
|
let incubator = new Image(); |
|
|
|
|
|
incubator.src = state.incubator.src; |
|
|
|
|
|
incubator.onload = function () { |
|
|
|
|
|
let x = state.incubator.x * mapCanvas.widthScale; |
|
|
|
|
|
let y = state.incubator.y * mapCanvas.heightScale; |
|
|
|
|
|
let width = state.incubator.width * mapCanvas.widthScale; |
|
|
|
|
|
let height = state.incubator.height * mapCanvas.heightScale; |
|
|
|
|
|
const text1_2 = new Konva.Text({x: x-width-12*offsetWidth10,y: y-1*offsetHeight10,text: '1号培养箱：',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_3 = new Konva.Text({x: x-width-4*offsetWidth10,y: y-1*offsetHeight10,text: '正常，温度37.1',fontSize: fontContentSize14,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text1_4 = new Konva.Text({x: x-width-12*offsetWidth10,y: y-3*offsetHeight10,text: '2号培养箱：',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_5 = new Konva.Text({x: x-width-4*offsetWidth10,y: y-3*offsetHeight10,text: '正常，温度37.2',fontSize: fontContentSize14,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text1_6 = new Konva.Text({x: x-width-12*offsetWidth10,y: y-5*offsetHeight10,text: '3号培养箱：',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_7 = new Konva.Text({x: x-width-4*offsetWidth10,y: y-5*offsetHeight10,text: '正常，温度37.1',fontSize: fontContentSize14,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
var kImage2 = new Konva.Image({ |
|
|
|
|
|
image:incubator, |
|
|
|
|
|
x: x, |
|
|
|
|
|
y: y, |
|
|
|
|
|
width: width, |
|
|
|
|
|
height: height, |
|
|
|
|
|
scale: {x:1, y: -1}, |
|
|
|
|
|
rotation: -90, |
|
|
|
|
|
}); |
|
|
|
|
|
//添加到组 |
|
|
|
|
|
mapCanvas.layer.add(kImage2, text1_2, text1_3, text1_4, text1_5, text1_6, text1_7, ); |
|
|
|
|
|
} |
|
|
|
|
|
let centrifugal = new Image(); |
|
|
|
|
|
centrifugal.src = state.centrifugal.src; |
|
|
|
|
|
centrifugal.onload = function () { |
|
|
|
|
|
let x = state.centrifugal.x * mapCanvas.widthScale; |
|
|
|
|
|
let y = state.centrifugal.y * mapCanvas.heightScale; |
|
|
|
|
|
let width = state.centrifugal.width * mapCanvas.widthScale; |
|
|
|
|
|
let height = state.centrifugal.height * mapCanvas.heightScale; |
|
|
|
|
|
const text1_1 = new Konva.Text({x: x-width+4*offsetWidth10,y: y,text: '生物安全柜',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_2 = new Konva.Text({x: x-width+4*offsetWidth10,y: y-2*offsetHeight10,text: '血清类型：',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_3 = new Konva.Text({x: x-width+10.5*offsetWidth10,y: y-2*offsetHeight10,text: 'FBS',fontSize: fontContentSize14,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text1_4 = new Konva.Text({x: x-width+4*offsetWidth10,y: y-4*offsetHeight10,text: '温度：',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,}); |
|
|
|
|
|
const text1_5 = new Konva.Text({x: x-width+8*offsetWidth10,y: y-4*offsetHeight10,text: '37.3',fontSize: fontContentSize14,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
var kImage2 = new Konva.Image({ |
|
|
|
|
|
image:centrifugal, |
|
|
|
|
|
x: x, |
|
|
|
|
|
y: y, |
|
|
|
|
|
width: width, |
|
|
|
|
|
height: height, |
|
|
|
|
|
scale: {x:1, y: -1}, |
|
|
|
|
|
}); |
|
|
|
|
|
//添加到组 |
|
|
|
|
|
mapCanvas.layer.add(kImage2, text1_1, text1_2, text1_3, text1_4, text1_5,); |
|
|
|
|
|
} |
|
|
|
|
|
let SafetyCabinet = new Image(); |
|
|
|
|
|
SafetyCabinet.src = state.SafetyCabinet.src; |
|
|
|
|
|
SafetyCabinet.onload = function () { |
|
|
|
|
|
let x = state.SafetyCabinet.x * mapCanvas.widthScale; |
|
|
|
|
|
let y = state.SafetyCabinet.y * mapCanvas.heightScale; |
|
|
|
|
|
let width = state.SafetyCabinet.width * mapCanvas.widthScale; |
|
|
|
|
|
let height = state.SafetyCabinet.height * mapCanvas.heightScale; |
|
|
|
|
|
const text1_1 = new Konva.Text({x: -33*offsetWidth10,y: 10*offsetHeight10,text: '协作机器人交接区',fontSize: fontContentSize1,fill: '#999',scaleY: -1,}); |
|
|
|
|
|
const text1_2 = new Konva.Text({x: -33*offsetWidth10,y: 7.5*offsetHeight10,text: '交接细胞：',fontSize: fontContentSize14,fill: '#999',scaleY: -1,}); |
|
|
|
|
|
const text1_3 = new Konva.Text({x: -26*offsetWidth10,y: 7.5*offsetHeight10,text: 'FBS',fontSize: fontContentSize14,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text1_4 = new Konva.Text({x: -33*offsetWidth10,y: 5*offsetHeight10,text: '交接状态：',fontSize: fontContentSize14,fill: '#999',scaleY: -1,}); |
|
|
|
|
|
const text1_5 = new Konva.Text({x: -26*offsetWidth10,y: 5*offsetHeight10,text: '正常',fontSize: fontContentSize14,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
const text1_6 = new Konva.Text({x: -33*offsetWidth10,y: 2.5*offsetHeight10,text: '转运桶温度：',fontSize: fontContentSize14,fill: '#999',scaleY: -1,}); |
|
|
|
|
|
const text1_7 = new Konva.Text({x: -25*offsetWidth10,y: 2.5*offsetHeight10,text: '-120',fontSize: fontContentSize14,fill: textColor,scaleY: -1,}); |
|
|
|
|
|
var kImage2 = new Konva.Image({ |
|
|
|
|
|
image:SafetyCabinet, |
|
|
|
|
|
x: x, |
|
|
|
|
|
y: y, |
|
|
|
|
|
width: width, |
|
|
|
|
|
height: height, |
|
|
|
|
|
scale: {x:1, y: -1}, |
|
|
|
|
|
// rotation: 180, |
|
|
|
|
|
}); |
|
|
|
|
|
//添加到组 |
|
|
|
|
|
mapCanvas.layer.add(kImage2, text1_1, text1_2, text1_3, text1_4, text1_5, text1_6, text1_7, ); |
|
|
} |
|
|
} |
|
|
// Konva.Image.fromURL(state.m9.src, function(darthNode) { |
|
|
|
|
|
// mapCanvas.layer.add(darthNode); |
|
|
|
|
|
// darthNode.setAttrs({ |
|
|
|
|
|
// x: state.m9.x * mapCanvas.widthScale, |
|
|
|
|
|
// y: state.m9.y * mapCanvas.heightScale, |
|
|
|
|
|
// width: state.m9.width, |
|
|
|
|
|
// height: state.m9.height, |
|
|
|
|
|
// // rotation: 180, |
|
|
|
|
|
// // offset: { x: 50, y: 50}, |
|
|
|
|
|
// }); |
|
|
|
|
|
// mapCanvas.layer.add(darthNode); |
|
|
|
|
|
// mapCanvas.layer.draw(); |
|
|
|
|
|
// }); |
|
|
|
|
|
// 绘制贝塞尔曲线 或 直线 |
|
|
// 绘制贝塞尔曲线 或 直线 |
|
|
for (let i = 0; i < advancedCurveList.length; i += 2) { |
|
|
for (let i = 0; i < advancedCurveList.length; i += 2) { |
|
|
const list = advancedCurveList[i]; |
|
|
const list = advancedCurveList[i]; |
|
|
|
|
|
|
|
|
const color = list?.enable ? '#c5b8af' : '#E6A23C'; |
|
|
const color = list?.enable ? '#c5b8af' : '#fff'; |
|
|
// mapCanvas.tableData[1].Interference.push({ name: list.instanceName, type: 'bezier', i: i / 2 }); |
|
|
// mapCanvas.tableData[1].Interference.push({ name: list.instanceName, type: 'bezier', i: i / 2 }); |
|
|
let arr = []; |
|
|
let arr = []; |
|
|
arr[i] = {}; |
|
|
arr[i] = {}; |
|
|
@ -251,9 +452,10 @@ const draw = () => { |
|
|
/* 绘制贝塞尔控制点 */ |
|
|
/* 绘制贝塞尔控制点 */ |
|
|
const bezierLine = new Konva.Shape({ |
|
|
const bezierLine = new Konva.Shape({ |
|
|
stroke: color, |
|
|
stroke: color, |
|
|
strokeWidth: 2, |
|
|
strokeWidth: mapCanvas.widthScale < 50 ? 0.5 : 0.5, |
|
|
perfectDrawEnabled: false, //启用或禁用完美绘制，以提高性能 |
|
|
perfectDrawEnabled: false, //启用或禁用完美绘制，以提高性能 |
|
|
name: list.instanceName, |
|
|
name: list.instanceName, |
|
|
|
|
|
dash: [7, 1, 0.001, 1], |
|
|
draggable: false, |
|
|
draggable: false, |
|
|
sceneFunc: (ctx, shape) => { |
|
|
sceneFunc: (ctx, shape) => { |
|
|
ctx.globalCompositeOperation = 'destination-over'; //设置或返回如何将一个新的图像绘制到目标或已有的图像上，解决冲突的问题 |
|
|
ctx.globalCompositeOperation = 'destination-over'; //设置或返回如何将一个新的图像绘制到目标或已有的图像上，解决冲突的问题 |
|
|
@ -321,9 +523,10 @@ const draw = () => { |
|
|
const line = new Konva.Line({ |
|
|
const line = new Konva.Line({ |
|
|
points: [startPos.x, startPos.y, endPos.x, endPos.y], |
|
|
points: [startPos.x, startPos.y, endPos.x, endPos.y], |
|
|
stroke: color, |
|
|
stroke: color, |
|
|
strokeWidth: 2, |
|
|
strokeWidth: mapCanvas.widthScale < 50 ? 0.5 : 0.5, |
|
|
perfectDrawEnabled: false, |
|
|
perfectDrawEnabled: false, |
|
|
name: list.instanceName, |
|
|
name: list.instanceName, |
|
|
|
|
|
dash: [7, 1, 0.001, 1], |
|
|
draggable: false, |
|
|
draggable: false, |
|
|
listening: false, |
|
|
listening: false, |
|
|
}); |
|
|
}); |
|
|
@ -331,8 +534,43 @@ const draw = () => { |
|
|
break; |
|
|
break; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const drawBackground = () => {// 创建一个临时画布，用于创建斜杆图案 |
|
|
|
|
|
var tempCanvas = document.createElement('canvas'); |
|
|
|
|
|
tempCanvas.width = 100; // 图案的宽度 |
|
|
|
|
|
tempCanvas.height = 100; // 图案的高度 |
|
|
|
|
|
var tempContext = tempCanvas.getContext('2d'); |
|
|
|
|
|
|
|
|
|
|
|
// 绘制斜杆图案 |
|
|
|
|
|
tempContext.strokeStyle = '#000000'; // 斜杆颜色 |
|
|
|
|
|
tempContext.lineWidth = 2; // 斜杆宽度 |
|
|
|
|
|
tempContext.beginPath(); |
|
|
|
|
|
tempContext.moveTo(0, 20); |
|
|
|
|
|
tempContext.lineTo(20, 0); |
|
|
|
|
|
tempContext.stroke(); |
|
|
|
|
|
|
|
|
|
|
|
// 创建图案填充 |
|
|
|
|
|
var pattern = tempContext.createPattern(tempCanvas, 'repeat'); |
|
|
|
|
|
|
|
|
|
|
|
// 创建背景矩形并应用图案填充 |
|
|
|
|
|
var backgroundRect = new Konva.Rect({ |
|
|
|
|
|
x: 0, |
|
|
|
|
|
y: 0, |
|
|
|
|
|
width: mapCanvas.width, |
|
|
|
|
|
height: mapCanvas.width, |
|
|
|
|
|
fillPatternImage: tempCanvas, |
|
|
|
|
|
fillPatternRepeat: 'repeat', |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// 添加背景矩形到图层 |
|
|
|
|
|
mapCanvas.layer.add(backgroundRect); |
|
|
|
|
|
|
|
|
|
|
|
// // 绘制图层 |
|
|
|
|
|
// layer.draw(); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const drawCircle = (x, y, radius, fill) => { |
|
|
const drawCircle = (x, y, radius, fill) => { |
|
|
if (!mapCanvas.circle) { |
|
|
if (!mapCanvas.circle) { |
|
|
mapCanvas.circle = new Konva.Circle({ |
|
|
mapCanvas.circle = new Konva.Circle({ |
|
|
@ -364,10 +602,10 @@ const drawArrow = (x, y, width, rotation) => { |
|
|
y, |
|
|
y, |
|
|
points: [0, 0, width, 0], |
|
|
points: [0, 0, width, 0], |
|
|
stroke: '#FFFFF0', |
|
|
stroke: '#FFFFF0', |
|
|
strokeWidth: 2, |
|
|
strokeWidth: mapCanvas.widthScale < 50 ? 1 : 0.5, |
|
|
perfectDrawEnabled: false, |
|
|
perfectDrawEnabled: false, |
|
|
pointerLength: 10, |
|
|
pointerLength: mapCanvas.widthScale < 50 ? 5 : 10, |
|
|
pointerWidth: 15, |
|
|
pointerWidth: mapCanvas.widthScale < 50 ? 8 : 15, |
|
|
offset: { |
|
|
offset: { |
|
|
x: width / 2, |
|
|
x: width / 2, |
|
|
y: 0, |
|
|
y: 0, |
|
|
@ -387,7 +625,7 @@ const drawText = (x, y, width, height, text, verticalAlign, rotation) => { |
|
|
x, |
|
|
x, |
|
|
y, |
|
|
y, |
|
|
text, |
|
|
text, |
|
|
fontSize: 12, |
|
|
fontSize: 10, |
|
|
fill: '#fff', |
|
|
fill: '#fff', |
|
|
align: 'center', |
|
|
align: 'center', |
|
|
verticalAlign, |
|
|
verticalAlign, |
|
|
@ -456,6 +694,178 @@ const buildAnchor = (x, y, type, index) => { |
|
|
return anchor; |
|
|
return anchor; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const drawAccess = () => { |
|
|
|
|
|
const {advancedPointList, advancedCurveList} = accessAGV; |
|
|
|
|
|
console.log(8998, advancedPointList) |
|
|
|
|
|
const offsetX = 4.56; |
|
|
|
|
|
const offsetY = 6.5; |
|
|
|
|
|
let advancedPointObj ={}; |
|
|
|
|
|
for (let i = 0; i < advancedPointList.length; i++) { |
|
|
|
|
|
const list = advancedPointList[i]; |
|
|
|
|
|
list.pos.x+=offsetX; |
|
|
|
|
|
list.pos.y+=offsetY; |
|
|
|
|
|
advancedPointObj[list.instanceName] = list; |
|
|
|
|
|
const x = list.pos.x * mapCanvas.widthScale; |
|
|
|
|
|
const y = list.pos.y * mapCanvas.heightScale; |
|
|
|
|
|
const number = list.instanceName.substring(2); |
|
|
|
|
|
const name = list.instanceName.substring(0, 2); |
|
|
|
|
|
if (list.dir) list.dir = parseFloat(list.dir).toFixed(3); |
|
|
|
|
|
let rotation = (list.dir / Math.PI) * 180; |
|
|
|
|
|
rotation = isNaN(rotation) ? 0 : rotation; |
|
|
|
|
|
const color = list?.enable ? 'blue' : '#303133'; |
|
|
|
|
|
const width = 50; |
|
|
|
|
|
const height = 37; |
|
|
|
|
|
mapCanvas.rect = new Konva.Rect({ |
|
|
|
|
|
opacity: 0.5, |
|
|
|
|
|
x, |
|
|
|
|
|
y, |
|
|
|
|
|
width, |
|
|
|
|
|
height, |
|
|
|
|
|
color, |
|
|
|
|
|
offset: { x: width / 2, y: height / 2 }, |
|
|
|
|
|
rotation, |
|
|
|
|
|
draggable: false, |
|
|
|
|
|
}); |
|
|
|
|
|
mapCanvas.rect.cache(); |
|
|
|
|
|
const group = new Konva.Group({ name: list.instanceName }); |
|
|
|
|
|
const rect = drawRect(x, y, rotation, color); |
|
|
|
|
|
const circle = drawCircle(x, y, 3, 'red'); |
|
|
|
|
|
const arrow = drawArrow(x, y, width, rotation); |
|
|
|
|
|
const text1 = drawText(x, y, width, height, name, 'top', rotation); |
|
|
|
|
|
const text2 = drawText(x, y, width, height, number, 'bottom', rotation); |
|
|
|
|
|
group.on('mouseover', () => (document.body.style.cursor = 'pointer')); |
|
|
|
|
|
group.on('mouseout', () => (document.body.style.cursor = 'default')); |
|
|
|
|
|
group.add(rect, circle, arrow, text1, text2); |
|
|
|
|
|
mapCanvas.allGroup.push(group); |
|
|
|
|
|
mapCanvas.layer.add(group); |
|
|
|
|
|
} |
|
|
|
|
|
var accessAgv = new Image(); |
|
|
|
|
|
accessAgv.src = agv02; |
|
|
|
|
|
accessAgv.onload = function () { |
|
|
|
|
|
let list = advancedPointObj.LM13; |
|
|
|
|
|
if (list.dir) list.dir = parseFloat(list.dir).toFixed(3); |
|
|
|
|
|
let rotation = (list.dir / Math.PI) * 180 || 0; |
|
|
|
|
|
let width = (mapCanvas.widthScale < 50 ? 1.45 : 1) * mapCanvas.widthScale; |
|
|
|
|
|
var kImage = new Konva.Image({ |
|
|
|
|
|
image:accessAgv, |
|
|
|
|
|
x: list.pos?.x * mapCanvas.widthScale, |
|
|
|
|
|
y: list.pos?.y * mapCanvas.heightScale, |
|
|
|
|
|
width: width, |
|
|
|
|
|
height: width, |
|
|
|
|
|
rotation, |
|
|
|
|
|
offset: { x: width/2, y: width/2}, |
|
|
|
|
|
}); |
|
|
|
|
|
//添加到组 |
|
|
|
|
|
mapCanvas.layer.add(kImage); |
|
|
|
|
|
var arr = ['LM2', 'LM1', 'LM2', 'LM3', 'LM4', 'LM3', 'LM5', 'CP7', 'LM5', 'LM3', 'LM4', 'LM3','LM13']; |
|
|
|
|
|
let i = 0; |
|
|
|
|
|
let stepX = -105; |
|
|
|
|
|
let stepY = 0; |
|
|
|
|
|
let timeOut = 0; |
|
|
|
|
|
let starTime = 0; |
|
|
|
|
|
|
|
|
|
|
|
var anim = new Konva.Animation(function (frame) { |
|
|
|
|
|
//上一帧到当前帧的时间差 ms -->s |
|
|
|
|
|
var timeDiff = frame.timeDiff /2000;//距离上一帧的时间差 |
|
|
|
|
|
let now = advancedPointObj[arr[i]]; |
|
|
|
|
|
if (!now) return false; |
|
|
|
|
|
let distX = now.pos.x * mapCanvas.widthScale - kImage.getAttr('x'); |
|
|
|
|
|
let distY = now.pos.y * mapCanvas.heightScale - kImage.getAttr('y'); |
|
|
|
|
|
if (!state.isBeginning && i == 0) { |
|
|
|
|
|
starTime = frame.time; |
|
|
|
|
|
return false; |
|
|
|
|
|
} |
|
|
|
|
|
if (frame.time - starTime < timeOut){ |
|
|
|
|
|
return false; |
|
|
|
|
|
} |
|
|
|
|
|
starTime = frame.time; |
|
|
|
|
|
timeOut = 0; |
|
|
|
|
|
|
|
|
|
|
|
if (Math.abs(distX) < 5 && Math.abs(distY) < 5) { |
|
|
|
|
|
switch (arr[i]){ |
|
|
|
|
|
case 'LM1': timeOut = 5000; break; |
|
|
|
|
|
case 'LM4': timeOut = 5000; break; |
|
|
|
|
|
case 'LM13': timeOut = 5000; break; |
|
|
|
|
|
case 'CP7': timeOut = 76000; break; |
|
|
|
|
|
default: break; |
|
|
|
|
|
} |
|
|
|
|
|
// state.isBeginning = arr[i] == 'LM13'; |
|
|
|
|
|
i++; |
|
|
|
|
|
if (i >= arr.length) i = 0; |
|
|
|
|
|
let next = advancedPointObj[arr[i]]; |
|
|
|
|
|
const distance = Math.sqrt( |
|
|
|
|
|
Math.pow(next.pos.x* mapCanvas.widthScale - now.pos.x* mapCanvas.widthScale, 2) + |
|
|
|
|
|
Math.pow(next.pos.y* mapCanvas.heightScale - now.pos.y* mapCanvas.heightScale, 2) |
|
|
|
|
|
); |
|
|
|
|
|
const time = distance / 105; |
|
|
|
|
|
stepX = (next.pos.x * mapCanvas.widthScale - now.pos.x * mapCanvas.widthScale) / time; |
|
|
|
|
|
stepY = (next.pos.y * mapCanvas.heightScale - now.pos.y * mapCanvas.heightScale) / time; |
|
|
|
|
|
// console.log(2333, stepX, stepY, distance); |
|
|
|
|
|
} |
|
|
|
|
|
// console.log(9999, kImage.getAttr('x'), now.pos.x * mapCanvas.widthScale , kImage.getAttr('y'), now.pos.y* mapCanvas.heightScale) |
|
|
|
|
|
kImage.move({x: stepX * timeDiff, y: stepY * timeDiff}); |
|
|
|
|
|
}, mapCanvas.layer); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//开启动画 |
|
|
|
|
|
anim.start(); |
|
|
|
|
|
} |
|
|
|
|
|
// 绘制贝塞尔曲线 或 直线 |
|
|
|
|
|
for (let i = 0; i < advancedCurveList.length; i += 2) { |
|
|
|
|
|
const list = advancedCurveList[i]; |
|
|
|
|
|
|
|
|
|
|
|
const color = list?.enable ? '#c5b8af' : '#fff'; |
|
|
|
|
|
// mapCanvas.tableData[1].Interference.push({ name: list.instanceName, type: 'bezier', i: i / 2 }); |
|
|
|
|
|
let arr = []; |
|
|
|
|
|
arr[i] = {}; |
|
|
|
|
|
const startPos = { x: (list.startPos.pos.x+offsetX) * mapCanvas.widthScale, y: (list.startPos.pos.y+offsetY) * mapCanvas.heightScale }; |
|
|
|
|
|
const endPos = { x: (list.endPos.pos.x+offsetX) * mapCanvas.widthScale, y: (list.endPos.pos.y+offsetY) * mapCanvas.heightScale }; |
|
|
|
|
|
|
|
|
|
|
|
switch (list.className) { |
|
|
|
|
|
case 'BezierPath': |
|
|
|
|
|
let control1 = { x: (list.controlPos1?.x+offsetX) * mapCanvas.widthScale, y: (list.controlPos1.y+offsetY) * mapCanvas.heightScale }; |
|
|
|
|
|
let control2 = { x: (list.controlPos2?.x+offsetX) * mapCanvas.widthScale, y: (list.controlPos2.y+offsetY) * mapCanvas.heightScale }; |
|
|
|
|
|
arr[i].control1 = buildAnchor(control1.x, control1.y, 1, i); |
|
|
|
|
|
arr[i].control2 = buildAnchor(control2.x, control2.y, 2, i); |
|
|
|
|
|
mapCanvas.anchorPoints.push({ startPos, control1, control2, endPos, instanceName: list.instanceName }); |
|
|
|
|
|
/* 绘制贝塞尔控制点 */ |
|
|
|
|
|
const bezierLine = new Konva.Shape({ |
|
|
|
|
|
stroke: color, |
|
|
|
|
|
strokeWidth: mapCanvas.widthScale < 50 ? 0.5 : 0.5, |
|
|
|
|
|
perfectDrawEnabled: false, //启用或禁用完美绘制，以提高性能 |
|
|
|
|
|
name: list.instanceName, |
|
|
|
|
|
draggable: false, |
|
|
|
|
|
dash: [7, 1, 0.001, 1], |
|
|
|
|
|
sceneFunc: (ctx, shape) => { |
|
|
|
|
|
ctx.globalCompositeOperation = 'destination-over'; //设置或返回如何将一个新的图像绘制到目标或已有的图像上，解决冲突的问题 |
|
|
|
|
|
ctx.beginPath(); |
|
|
|
|
|
ctx.moveTo(startPos.x, startPos.y); |
|
|
|
|
|
ctx.bezierCurveTo(arr[i].control1.x(), arr[i].control1.y(), arr[i].control2.x(), arr[i].control2.y(), endPos.x, endPos.y); |
|
|
|
|
|
ctx.fillStrokeShape(shape); |
|
|
|
|
|
}, |
|
|
|
|
|
}) as any; |
|
|
|
|
|
bezierLine.startPos = startPos; |
|
|
|
|
|
bezierLine.endPos = endPos; |
|
|
|
|
|
mapCanvas.layer.add(bezierLine); |
|
|
|
|
|
//mapCanvas.layer.add(bezierLine, updateDottedLines);//暂时不用绘制贝塞尔曲线可拖动，所以辅助线不需要绘制 |
|
|
|
|
|
break; |
|
|
|
|
|
case 'StraightPath': |
|
|
|
|
|
// 绘制直线 |
|
|
|
|
|
const line = new Konva.Line({ |
|
|
|
|
|
points: [startPos.x, startPos.y, endPos.x, endPos.y], |
|
|
|
|
|
stroke: color, |
|
|
|
|
|
strokeWidth: mapCanvas.widthScale < 50 ? 1 : 0.5, |
|
|
|
|
|
perfectDrawEnabled: false, |
|
|
|
|
|
name: list.instanceName, |
|
|
|
|
|
draggable: false, |
|
|
|
|
|
listening: false, |
|
|
|
|
|
}); |
|
|
|
|
|
mapCanvas.layer.add(line); |
|
|
|
|
|
break; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const initMap = () => { |
|
|
const initMap = () => { |
|
|
state.loading = true; |
|
|
state.loading = true; |
|
|
// this.mapData = await this.getMapInfos(); |
|
|
// this.mapData = await this.getMapInfos(); |
|
|
@ -469,14 +879,16 @@ const initMap = () => { |
|
|
let xMax = parseFloat(Math.abs(header.maxPos.x).toFixed(3)); |
|
|
let xMax = parseFloat(Math.abs(header.maxPos.x).toFixed(3)); |
|
|
let yMax = parseFloat(Math.abs(header.maxPos.y).toFixed(3)); |
|
|
let yMax = parseFloat(Math.abs(header.maxPos.y).toFixed(3)); |
|
|
const Xlength = xMin + xMax; |
|
|
const Xlength = xMin + xMax; |
|
|
const Ylength = yMin + yMax; |
|
|
const Ylength = yMin + yMax + 1; |
|
|
mapCanvas.widthScale = Number(map.offsetWidth / Xlength); |
|
|
mapCanvas.widthScale = Number(map.offsetWidth / Xlength); |
|
|
mapCanvas.heightScale = Number(map.offsetHeight / Ylength); |
|
|
mapCanvas.heightScale = Number(map.offsetHeight / Ylength); |
|
|
|
|
|
mapCanvas.width = map.offsetWidth; |
|
|
|
|
|
mapCanvas.height = map.offsetHeight; |
|
|
|
|
|
console.log('scale', mapCanvas.widthScale, mapCanvas.heightScale) |
|
|
mapCanvas.stage = new Konva.Stage({ |
|
|
mapCanvas.stage = new Konva.Stage({ |
|
|
container: '#container', |
|
|
container: '#container', |
|
|
width: map.offsetWidth, |
|
|
width: map.offsetWidth, |
|
|
height: map.offsetHeight - 70, |
|
|
height: map.offsetHeight, |
|
|
x: xMin * mapCanvas.widthScale, |
|
|
x: xMin * mapCanvas.widthScale, |
|
|
y: yMax * mapCanvas.heightScale, |
|
|
y: yMax * mapCanvas.heightScale, |
|
|
scaleY: -1, |
|
|
scaleY: -1, |
|
|
@ -525,6 +937,7 @@ const initMap = () => { |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
draw(); |
|
|
draw(); |
|
|
|
|
|
drawAccess(); |
|
|
state.loading = false; |
|
|
state.loading = false; |
|
|
}, 1200); |
|
|
}, 1200); |
|
|
}; |
|
|
}; |
|
|
@ -547,26 +960,34 @@ const resetMap = () => { |
|
|
mapCanvas.stage.add(mapCanvas.layer); |
|
|
mapCanvas.stage.add(mapCanvas.layer); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
|
|
|
drawAccess(); |
|
|
draw(); |
|
|
draw(); |
|
|
state.loading = false; |
|
|
state.loading = false; |
|
|
}, 1200); |
|
|
}, 1200); |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
<style> |
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
<style scoped lang="scss"> |
|
|
<style scoped lang="scss"> |
|
|
.full-table { |
|
|
.full-table { |
|
|
.container { |
|
|
.container { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
|
|
|
|
|
|
background-color: #000; |
|
|
//background-color: #111; |
|
|
background-image: linear-gradient(to right, #222 1px, transparent 1px), |
|
|
background-image: linear-gradient(to right, #333 1px, transparent 1px), |
|
|
linear-gradient(to bottom, #222 1px, transparent 1px); |
|
|
linear-gradient(to bottom, #333 1px, transparent 1px); |
|
|
|
|
|
//background: linear-gradient( |
|
|
|
|
|
// 45deg, |
|
|
|
|
|
// rgba(153, 153, 153, .5) 0, rgba(153, 153, 153, .5) 25%, transparent 25%, transparent 50%, |
|
|
|
|
|
// rgba(153, 153, 153, .5) 50%, rgba(153, 153, 153, .5) 75%, transparent 75%, transparent |
|
|
|
|
|
//); |
|
|
background-size: 20px 20px; /* 网格的大小，根据需要调整 */ |
|
|
background-size: 20px 20px; /* 网格的大小，根据需要调整 */ |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
z-index: 99; |
|
|
z-index: 99; |
|
|
border: 1px solid #666; |
|
|
border: 1px solid #666; |
|
|
border-radius: 15px; |
|
|
//border-radius: 15px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
肖正
4 months ago
