mt
This commit is contained in:
commit
c30bc48259
@ -52,6 +52,7 @@
|
|||||||
"crypto-js": "^4.0.0",
|
"crypto-js": "^4.0.0",
|
||||||
"diagram-js": "^12.3.0",
|
"diagram-js": "^12.3.0",
|
||||||
"echarts": "5.4.0",
|
"echarts": "5.4.0",
|
||||||
|
"el-tree-transfer": "^2.4.7",
|
||||||
"element-ui": "2.15.12",
|
"element-ui": "2.15.12",
|
||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
"fuse.js": "6.6.2",
|
"fuse.js": "6.6.2",
|
||||||
|
|||||||
@ -61,9 +61,9 @@ export function exportFactoryExcel(query) {
|
|||||||
// 获取产线设备状态
|
// 获取产线设备状态
|
||||||
export function getLineEqStatus(data) {
|
export function getLineEqStatus(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/base/production-line/getLineEqStatus',
|
url: '/monitoring/equipment-monitor/getLineEqStatus',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data
|
data: data,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
337
src/views/monitoring/qhdEquipmentVisualize/index.vue
Normal file
337
src/views/monitoring/qhdEquipmentVisualize/index.vue
Normal file
@ -0,0 +1,337 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2025-02-10 09:15:55
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @LastEditTime: 2025-02-25 15:48:59
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="app-container" style="overflow: auto">
|
||||||
|
<search-bar :formConfigs="formConfig" ref="searchBarForm" @select-changed="handleSearchBarChanged"
|
||||||
|
@headBtnClick="buttonClick" />
|
||||||
|
<div class="top-tip">
|
||||||
|
<div class="block" style="background: #5b8ff9" />
|
||||||
|
运行
|
||||||
|
<div class="block" style="background: #f4b183" />
|
||||||
|
停机
|
||||||
|
<div class="block" style="background: #ff4f3e" />
|
||||||
|
故障
|
||||||
|
</div>
|
||||||
|
<div class="canvas-line" v-for="(item, index) in lineArr" :key="index">
|
||||||
|
<div class="title">{{ item.name }}</div>
|
||||||
|
<canvas style="
|
||||||
|
box-shadow: 1px 1px 2px 2px #909399;
|
||||||
|
padding: 0;
|
||||||
|
height: 350px;
|
||||||
|
width: 2500px;
|
||||||
|
" @click="getclient($event, index + 1, item.num)" :id="'mycanvas' + (index + 1)"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getPdList } from '@/api/core/monitoring/auto';
|
||||||
|
import { getFactoryPage, getLineEqStatus } from '@/api/core/base/factory';
|
||||||
|
import linePot from './line-pot';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
listQuery: {
|
||||||
|
factoryId: null,
|
||||||
|
lineId: null,
|
||||||
|
},
|
||||||
|
ctx: '', //canvas
|
||||||
|
lineArr: [],
|
||||||
|
formConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '工厂',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'factoryId',
|
||||||
|
onchange: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '产线',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'lineId',
|
||||||
|
multiple: true,
|
||||||
|
width: 410
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '搜索',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
linePot,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {},
|
||||||
|
created() {
|
||||||
|
this.getPdLineList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initCanvas(name) {
|
||||||
|
let canvas = document.getElementById(name);
|
||||||
|
canvas.width = canvas.clientWidth;
|
||||||
|
canvas.width = canvas.clientWidth;
|
||||||
|
console.log(canvas.width);
|
||||||
|
|
||||||
|
canvas.height = 350;
|
||||||
|
this.ctx = canvas.getContext('2d');
|
||||||
|
this.ctx.lineWidth = 1;
|
||||||
|
this.ctx.strokeStyle = '#909399';
|
||||||
|
this.ctx.fillStyle = '#5b8ff9';
|
||||||
|
this.ctx.font = '12px 宋体'; //文字大小 字体样式
|
||||||
|
this.ctx.clearRect(0, 0, canvas.clientWidth, 350); //清空画布
|
||||||
|
},
|
||||||
|
//画长方形
|
||||||
|
fillRect(x, y, width, height, name, color) {
|
||||||
|
this.ctx.beginPath(); //开始
|
||||||
|
this.ctx.fillStyle = color ? color : '#5b8ff9'; //填充颜色
|
||||||
|
this.ctx.fillRect(x, y, width, height); //左上角点的坐标(x,y) 宽 高
|
||||||
|
this.ctx.strokeRect(x, y, width, height);
|
||||||
|
this.ctx.fillStyle = '#fff'; //填充颜色
|
||||||
|
if (height === 50) {
|
||||||
|
//判断是否特殊机器 机器文字y轴定位加10
|
||||||
|
this.ctx.fillText(name, x + 5, y + 30);
|
||||||
|
} else {
|
||||||
|
this.ctx.fillText(name, x + 5, y + 20);
|
||||||
|
}
|
||||||
|
this.ctx.closePath(); //结束
|
||||||
|
},
|
||||||
|
//画特殊形
|
||||||
|
fillLRect(LArr, name, color) {
|
||||||
|
this.ctx.beginPath(); //开始
|
||||||
|
LArr.forEach((item, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
this.ctx.moveTo(item[0], item[1]);
|
||||||
|
} else {
|
||||||
|
this.ctx.lineTo(item[0], item[1]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.ctx.closePath(); //结束 // 闭合路径
|
||||||
|
this.ctx.fillStyle = color ? color : '#5b8ff9'; //填充颜色
|
||||||
|
this.ctx.fill();
|
||||||
|
this.ctx.stroke();
|
||||||
|
this.ctx.fillStyle = '#fff'; //填充颜色
|
||||||
|
if (LArr[0][0] === LArr[1][0]) {
|
||||||
|
//判断L形第一截是竖着还是横着
|
||||||
|
this.ctx.fillText(name, LArr[1][0] + 5, LArr[1][1]-10); //竖着
|
||||||
|
} else {
|
||||||
|
this.ctx.fillText(name, LArr[0][0] + 25, LArr[0][1] + 20);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isEven(num) {
|
||||||
|
return (num & 1) === 0;
|
||||||
|
},
|
||||||
|
setRect(item, index) {
|
||||||
|
console.log(index)
|
||||||
|
let identifier = ''
|
||||||
|
if (this.isEven(index + 1)) {
|
||||||
|
identifier = 'line' + item.num + 'canvasSecondHalf';
|
||||||
|
} else {
|
||||||
|
identifier = 'line' + item.num + 'canvasFirstHalf';
|
||||||
|
}
|
||||||
|
// const identifier = 'line' + item.num + 'canvas';
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initCanvas('mycanvas' + (index + 1));
|
||||||
|
});
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.linePot[identifier].forEach((idItem) => {
|
||||||
|
item.children.forEach((eqItem) => {
|
||||||
|
if (eqItem.id === idItem.id) {
|
||||||
|
idItem.color = ['#5b8ff9', '#f4b183', '#ff4f3e'][
|
||||||
|
eqItem.equipmentStatus
|
||||||
|
];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (idItem.isL) {
|
||||||
|
this.fillLRect(idItem.line, idItem.name, idItem.color);
|
||||||
|
} else {
|
||||||
|
this.fillRect(
|
||||||
|
idItem.x,
|
||||||
|
idItem.y,
|
||||||
|
idItem.width,
|
||||||
|
idItem.height,
|
||||||
|
idItem.name,
|
||||||
|
idItem.color
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getclient(e, index, num) {
|
||||||
|
let canvas = document.getElementById('mycanvas' + index);
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
let identifier = ''
|
||||||
|
if (this.isEven(index + 1)) {
|
||||||
|
identifier = 'line' + num + 'canvasSecondHalf';
|
||||||
|
} else {
|
||||||
|
identifier = 'line' + num + 'canvasFirstHalf';
|
||||||
|
}
|
||||||
|
this.isEQ(e.clientX - rect.left, e.clientY - rect.top, identifier);
|
||||||
|
},
|
||||||
|
// 检查点击位置是否在设备内
|
||||||
|
isEQ(x, y, identifier) {
|
||||||
|
this.linePot[identifier].forEach((idItem) => {
|
||||||
|
if (idItem.isEQ) {
|
||||||
|
// 检查点击位置是否在矩形内
|
||||||
|
if (
|
||||||
|
x >= idItem.x &&
|
||||||
|
x <= idItem.x + idItem.width &&
|
||||||
|
y >= idItem.y &&
|
||||||
|
y <= idItem.y + idItem.height
|
||||||
|
) {
|
||||||
|
console.log(idItem.name, idItem.id);
|
||||||
|
this.$router.push({
|
||||||
|
path: '//base/production-line/getLineEqStatus',
|
||||||
|
query: { eqid: idItem.id },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getPdLineList() {
|
||||||
|
const params = {
|
||||||
|
pageSize: 100,
|
||||||
|
pageNo: 1,
|
||||||
|
};
|
||||||
|
getFactoryPage(params).then((res) => {
|
||||||
|
this.formConfig[0].selectOptions = res.data.list || [];
|
||||||
|
});
|
||||||
|
getPdList().then((res) => {
|
||||||
|
this.formConfig[1].selectOptions = res.data || [];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
buttonClick(val) {
|
||||||
|
switch (val.btnName) {
|
||||||
|
case 'search':
|
||||||
|
this.listQuery.pageNo = 1;
|
||||||
|
this.listQuery.pageSize = 100;
|
||||||
|
this.listQuery.factoryId = val.factoryId || undefined;
|
||||||
|
this.listQuery.lineId = val.lineId ? val.lineId : [];
|
||||||
|
this.getDataList();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSearchBarChanged({ param, value }) {
|
||||||
|
this.listQuery.lineId = [];
|
||||||
|
this.$refs.searchBarForm.formInline.lineId = undefined;
|
||||||
|
getPdList(value).then((res) => {
|
||||||
|
this.formConfig[1].selectOptions = res.data || [];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getDataList() {
|
||||||
|
// this.lineArr = [
|
||||||
|
// {
|
||||||
|
// num: 1,
|
||||||
|
// name: 'A1',
|
||||||
|
// children: [],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// num: 2,
|
||||||
|
// name: 'A2',
|
||||||
|
// children: [],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// num: 3,
|
||||||
|
// name: 'A3',
|
||||||
|
// children: [],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// num: 4,
|
||||||
|
// name: 'A4',
|
||||||
|
// children: [],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// num: 5,
|
||||||
|
// name: 'A5',
|
||||||
|
// children: [],
|
||||||
|
// },
|
||||||
|
// ];
|
||||||
|
getLineEqStatus(this.listQuery).then((response) => {
|
||||||
|
this.lineArr = response.data;
|
||||||
|
// Create a new array by duplicating each item
|
||||||
|
const duplicatedArr = [];
|
||||||
|
this.lineArr.forEach((item, index) => {
|
||||||
|
// Process original item
|
||||||
|
const num = [
|
||||||
|
'',
|
||||||
|
'1672847052717821953',
|
||||||
|
'1672847052717821954',
|
||||||
|
'1686260211054157825',
|
||||||
|
'1701892552632770122',
|
||||||
|
'1714562503683465331',
|
||||||
|
].indexOf(item.id);
|
||||||
|
if (num > 0) {
|
||||||
|
// Original item with copy=1
|
||||||
|
const originalItem = {
|
||||||
|
...item,
|
||||||
|
num: num,
|
||||||
|
name: item.lineName +'前半段',
|
||||||
|
copy: 1
|
||||||
|
};
|
||||||
|
duplicatedArr.push(originalItem);
|
||||||
|
this.setRect(originalItem, index * 2); // Adjust index for original
|
||||||
|
|
||||||
|
// Create copy with copy=2
|
||||||
|
const copiedItem = {
|
||||||
|
...item,
|
||||||
|
num: num,
|
||||||
|
name: item.lineName + '后半段',
|
||||||
|
copy: 2
|
||||||
|
};
|
||||||
|
duplicatedArr.push(copiedItem);
|
||||||
|
this.setRect(copiedItem, index * 2 + 1); // Adjust index for copy
|
||||||
|
} else {
|
||||||
|
this.$message.warning('没有对应的产线！');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log(duplicatedArr);
|
||||||
|
|
||||||
|
// Replace the original array with the duplicated one
|
||||||
|
this.lineArr = duplicatedArr;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.top-tip {
|
||||||
|
.block {
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.canvas-line {
|
||||||
|
margin-top: 20px;
|
||||||
|
min-width: 2000px;
|
||||||
|
overflow: auto;
|
||||||
|
// height: 300px;
|
||||||
|
// overflow-x: hidden;
|
||||||
|
.title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bolder;
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
background: rgb(39, 240, 17);
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 3px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
5090
src/views/monitoring/qhdEquipmentVisualize/line-pot.js
Normal file
5090
src/views/monitoring/qhdEquipmentVisualize/line-pot.js
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user