|
|
@@ -19,7 +19,6 @@
|
|
|
</div>
|
|
|
<div style="height: 100%;padding-bottom:10px">
|
|
|
<el-input v-model="value" type="textarea" :rows="34" ></el-input>
|
|
|
-
|
|
|
</div>
|
|
|
<div class="bottombtn" style="width:100%;height: 35px;padding: 10px 0 0">
|
|
|
<el-button v-no-more-click @click="save" type="primary" icon="el-icon-edit" style="float: right; height: 33px; line-height: 2px">保存</el-button>
|
|
|
@@ -36,6 +35,7 @@
|
|
|
<script>
|
|
|
import Konva from "konva";
|
|
|
import {getLotoMapInfo,getLotoInfo,updateLoto} from '@/api/mes/lotoStation/lotoStation'
|
|
|
+import { getIsIsolationPointPage } from '@/api/mes/spm/segregationPoint'
|
|
|
|
|
|
|
|
|
export default {
|
|
|
@@ -46,13 +46,16 @@ export default {
|
|
|
layer: null,
|
|
|
selectedStates: [], // 用于存储每个元素的选中状态
|
|
|
selectedText: [], // 用于存储未选中的元素文本
|
|
|
- rects: [], // 白色r ect合集
|
|
|
+ rects: [], // 白色rect合集
|
|
|
texts: [], // 白色text合集
|
|
|
redrects: [], // 红色rect合集
|
|
|
redtexts: [], // 白色text合集
|
|
|
value:'',
|
|
|
form:{},//拿到单个数据
|
|
|
- orignData:null,//原始数据
|
|
|
+ originData:null,//原始数据
|
|
|
+ filterData:null,//用来过滤掉已经渲染出来的隔离点
|
|
|
+ allPoints:[],
|
|
|
+ groups:[],//组移动数据
|
|
|
};
|
|
|
},
|
|
|
watch:{
|
|
|
@@ -66,6 +69,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
+ this.getIsIsolationPointPage()
|
|
|
this.$nextTick(()=>{
|
|
|
this.getLoToInfo()
|
|
|
})
|
|
|
@@ -87,19 +91,51 @@ export default {
|
|
|
getLotoMapInfo(lotoId,sopId,ticketId).then(response => {
|
|
|
console.log(response,'作业区域预览接口调用');
|
|
|
this.form.map=response.data;
|
|
|
-
|
|
|
+ this.filterData=response.data
|
|
|
if (response.data) {
|
|
|
try {
|
|
|
this.value = JSON.stringify(response.data, null, 4);
|
|
|
- this.orignData=this.value
|
|
|
+ this.originData=this.value
|
|
|
} catch (err) {}
|
|
|
}
|
|
|
this.initKonva();
|
|
|
})
|
|
|
},
|
|
|
+ // 获取所有隔离点
|
|
|
+ getIsIsolationPointPage(){
|
|
|
+ const data={
|
|
|
+ current: 1,
|
|
|
+ size: -1,
|
|
|
+ }
|
|
|
+ getIsIsolationPointPage(data).then(res=>{
|
|
|
+ console.log(res,'所有隔离点')
|
|
|
+ // 过滤掉 originData 中已经存在的数据
|
|
|
+ // const filter = res.data.records.filter(record => {
|
|
|
+ // // 判断 res.data.records 中的 record 是否不在 this.filterData 中
|
|
|
+ // return !this.filterData.some(item => item.pointId === record.pointId);
|
|
|
+ // });
|
|
|
+ this.allPoints = res.data.records.map(item => {
|
|
|
+ return {
|
|
|
+ pointId: item.pointId,
|
|
|
+ pointName: item.pointName,
|
|
|
+ remark: item.remark,
|
|
|
+ prePointId: item.prePointId,
|
|
|
+ pointType: item.pointType,
|
|
|
+ pointTypeName: item.pointTypeName,
|
|
|
+ powerType: item.powerType,
|
|
|
+ powerTypeName: item.powerTypeName,
|
|
|
+ pointIcon: item.pointIcon,
|
|
|
+ status: false,
|
|
|
+ pointPicture: item.pointPicture,
|
|
|
+ mapImg: null
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
// 重置
|
|
|
reset(){
|
|
|
- this.value = this.orignData;
|
|
|
+ this.value = this.originData;
|
|
|
this.initKonva(); // 重新初始化 Konva
|
|
|
},
|
|
|
// 预览
|
|
|
@@ -130,7 +166,7 @@ export default {
|
|
|
console.log( formData,'map')
|
|
|
updateLoto(formData).then(response => {
|
|
|
console.log(response, '修改车间区域地图');
|
|
|
- this.$router.push('/hw/information/lotoStation');
|
|
|
+ this.$router.push('/mes/dv/lotoStation');
|
|
|
this.$message({
|
|
|
type: 'success',
|
|
|
message: '保存成功!'
|
|
|
@@ -185,7 +221,21 @@ export default {
|
|
|
|
|
|
// 绘制无限网格
|
|
|
this.drawGrid(50, 50, "#e0e0e0"); // 每个单元格50x50，浅灰色网格
|
|
|
-
|
|
|
+ // 创建所有隔离点父盒子 放置于网格线上
|
|
|
+ const allPointsBox=new Konva.Rect({
|
|
|
+ x: 1000,
|
|
|
+ y: 10,
|
|
|
+ width: 200,
|
|
|
+ height: 800,
|
|
|
+ cornerRadius: 5,
|
|
|
+ stroke: 'black',
|
|
|
+ strokeWidth: 2,
|
|
|
+ fill: 'white'
|
|
|
+ })
|
|
|
+ this.layer.add(allPointsBox);
|
|
|
+ this.layer.draw();
|
|
|
+ // 调用函数将隔离点添加到 allPointsBox
|
|
|
+ this.addPointsToAllPointsBox(allPointsBox);
|
|
|
// 渲染数据
|
|
|
const imageSrc = require("@/assets/images/localSetIcon.jpg"); // 图片路径
|
|
|
this.renderGrid(imageSrc, 6, 3, 450, 100, 120, 100, 50, 50, 60, 25);
|
|
|
@@ -223,8 +273,149 @@ export default {
|
|
|
this.layer.add(horizontalLine);
|
|
|
}
|
|
|
|
|
|
+ // 添加网格坐标文本
|
|
|
+ // for (let row = 0; row < height / cellHeight; row++) {
|
|
|
+ // for (let col = 0; col < width / cellWidth; col++) {
|
|
|
+ // const text = new Konva.Text({
|
|
|
+ // x: col * cellWidth + 5, // 调整位置以适应网格
|
|
|
+ // y: row * cellHeight + 5, // 调整位置以适应网格
|
|
|
+ // text: `(${col},${row})`,
|
|
|
+ // fontSize: 10,
|
|
|
+ // fill: 'gray',
|
|
|
+ // });
|
|
|
+ // this.layer.add(text);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
this.layer.draw();
|
|
|
},
|
|
|
+ // 绘制所有隔离点列表
|
|
|
+ addPointsToAllPointsBox(allPointsBox) {
|
|
|
+ if (this.allPoints && this.allPoints.length > 0) {
|
|
|
+ const boxWidth = allPointsBox.width();
|
|
|
+ const boxHeight = allPointsBox.height();
|
|
|
+ const boxX = allPointsBox.x();
|
|
|
+ const boxY = allPointsBox.y();
|
|
|
+ const padding = 10; // 每个隔离点之间的间距
|
|
|
+ const pointWidth = 50; // 每个隔离点的宽度
|
|
|
+ const pointHeight = 70; // 每个隔离点的高度（包括图片和文字）
|
|
|
+
|
|
|
+ let currentX = boxX + padding;
|
|
|
+ let currentY = boxY + padding;
|
|
|
+
|
|
|
+ this.allPoints.forEach((point, index) => {
|
|
|
+ // 创建一个组来组合红色边框、图片和文字
|
|
|
+ const group = new Konva.Group({
|
|
|
+ x: currentX,
|
|
|
+ y: currentY,
|
|
|
+ draggable: true // 启用拖拽功能
|
|
|
+ });
|
|
|
+
|
|
|
+ // 创建红色边框
|
|
|
+ const borderRect = new Konva.Rect({
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ width: pointWidth,
|
|
|
+ height: pointHeight,
|
|
|
+ cornerRadius: 5,
|
|
|
+ stroke: 'red',
|
|
|
+ strokeWidth: 2,
|
|
|
+ fill: 'white'
|
|
|
+ });
|
|
|
+ group.add(borderRect);
|
|
|
+
|
|
|
+ // 创建图片
|
|
|
+ const image = new Image();
|
|
|
+ image.src = point.pointIcon;
|
|
|
+ image.onload = () => {
|
|
|
+ const knovaImage = new Konva.Image({
|
|
|
+ x: 1, // 图片在组内的位置
|
|
|
+ y: 5, // 图片在组内的位置
|
|
|
+ image: image,
|
|
|
+ width: 50, // 图片宽度
|
|
|
+ height: 50 // 图片高度
|
|
|
+ });
|
|
|
+ group.add(knovaImage);
|
|
|
+
|
|
|
+ // 创建文字
|
|
|
+ const pointText = new Konva.Text({
|
|
|
+ x: 12, // 文字在组内的位置
|
|
|
+ y: 53, // 文字在组内的位置
|
|
|
+ text: point.pointName,
|
|
|
+ fontSize: 12,
|
|
|
+ fill: 'red'
|
|
|
+ });
|
|
|
+ group.add(pointText);
|
|
|
+
|
|
|
+ // 将组添加到图层
|
|
|
+ this.layer.add(group);
|
|
|
+ this.groups[point.pointName] = group; // 用文字作为键存储
|
|
|
+
|
|
|
+ // 监听组的拖拽结束事件
|
|
|
+ group.on('dragend', () => {
|
|
|
+ const gridX = 50; // 网格单元格宽度
|
|
|
+ const gridY = 50; // 网格单元格高度
|
|
|
+
|
|
|
+ // 计算最近的网格点位置
|
|
|
+ const snappedX = Math.round(group.x() / gridX) * gridX;
|
|
|
+ const snappedY = Math.round(group.y() / gridY) * gridY;
|
|
|
+
|
|
|
+ // 设置组到最近的网格点位置
|
|
|
+ group.x(snappedX);
|
|
|
+ group.y(snappedY);
|
|
|
+ console.log(group,'组移动');
|
|
|
+ // 计算网格坐标
|
|
|
+ const row = Math.floor(snappedY / gridY);
|
|
|
+ const col = Math.floor(snappedX / gridX);
|
|
|
+
|
|
|
+ // 生成 JSON 数据
|
|
|
+ const pointData = {
|
|
|
+ row: row,
|
|
|
+ col: col,
|
|
|
+ pointId: point.pointId,
|
|
|
+ pointName: point.pointName,
|
|
|
+ remark: point.remark,
|
|
|
+ prePointId: point.prePointId,
|
|
|
+ pointType: point.pointType,
|
|
|
+ pointTypeName: point.pointTypeName,
|
|
|
+ powerType: point.powerType,
|
|
|
+ powerTypeName: point.powerTypeName,
|
|
|
+ state: point.status,
|
|
|
+ pointIcon: point.pointIcon,
|
|
|
+ pointPicture: point.pointPicture,
|
|
|
+ mapImg: null
|
|
|
+ };
|
|
|
+
|
|
|
+ // 将字符串转换为数组
|
|
|
+ let valueArray = [];
|
|
|
+ try {
|
|
|
+ valueArray = JSON.parse(this.value);
|
|
|
+ } catch (e) {
|
|
|
+ console.error("Failed to parse value:", e);
|
|
|
+ }
|
|
|
+ // 添加新数据到数组
|
|
|
+ valueArray.push(pointData);
|
|
|
+ console.log(valueArray);
|
|
|
+ // 将数组转换回字符串
|
|
|
+ this.value = JSON.stringify(valueArray, null, 4);
|
|
|
+
|
|
|
+ // 重新绘制图层
|
|
|
+ this.layer.draw();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 重新绘制图层
|
|
|
+ this.layer.draw();
|
|
|
+ };
|
|
|
+
|
|
|
+ // 更新下一个隔离点的位置
|
|
|
+ currentX += pointWidth + padding;
|
|
|
+ if (currentX + pointWidth > boxX + boxWidth) {
|
|
|
+ currentX = boxX + padding;
|
|
|
+ currentY += pointHeight + padding;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
renderGrid(imageSrc) {
|
|
|
this.selectedStates = []; // 用数组来存储选中状态
|
|
|
@@ -245,7 +436,7 @@ export default {
|
|
|
|
|
|
const point = new Image();
|
|
|
point.src=pos.pointIcon
|
|
|
- // point.src = imageSrc;
|
|
|
+
|
|
|
point.onload = () => {
|
|
|
const knovaImage = new Konva.Image({
|
|
|
x: x,
|
