mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

更新

Browse Source
This commit is contained in:
朱文强
2025-02-19 14:13:47 +08:00
parent f143c5e2d9
commit b43876fe67
11 changed files with 2904 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/monitoring/equipmentAlarmLog/index.vue
View File

@@ -56,6 +56,7 @@ import Editor from '@/components/Editor';
import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import { getAccessToken } from '@/utils/auth';
import { getFactoryPage } from '@/api/core/base/factory';
import { publicFormatter } from '@/utils/dict';
export default {
@@ -67,6 +68,7 @@ export default {
data() {
return {
searchBarKeys: ['checkTime'],
optionArrUrl: [getFactoryPage],
tableBtn: [
this.$auth.hasPermi('base:equipment-alarm-log:update')
? {
@@ -82,6 +84,10 @@ export default {
: undefined,
].filter((v) => v),
tableProps: [
{
prop: 'factoryName',
label: '工厂',
},
{ prop: 'productionLine', label: '产线' },
{ prop: 'workshopSection', label: '工段' },
{ prop: 'equipment', label: '设备名称' },
@@ -128,6 +134,13 @@ export default {
// },
],
searchBarFormConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
onchange: true,
},
{
type: 'datePicker',
label: '时间段',
@@ -155,6 +168,7 @@ export default {
queryParams: {
pageNo: 1,
pageSize: 10,
factoryId: undefined,
createTime: [],
},
// 表单参数
@@ -164,12 +178,25 @@ export default {
};
},
created() {
this.getArr();
this.getList();
},
methods: {
getArr() {
const params = {
page: 1,
limit: 500,
};
this.optionArrUrl.forEach((item, index) => {
item(params).then((response) => {
this.searchBarFormConfig[index].selectOptions = response.data.list;
});
});
},
/** 重写 basicPageMixin 里的 handleSearchBarBtnClick */
handleSearchBarBtnClick(btn) {
// 仅查询一种情况
this.queryParams.factoryId = btn.factoryId;
this.queryParams.createTime = btn.createTime;
this.handleQuery();
},

106
src/views/monitoring/equipmentStatusAndParams/index.vue
View File

@@ -48,6 +48,9 @@
import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import { publicFormatter } from '@/utils/dict';
import { getPdList } from '@/api/core/monitoring/auto';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import { getFactoryPage } from '@/api/core/base/factory';
export default {
name: 'EquipmentStatusAndParams',
@@ -56,6 +59,7 @@ export default {
data() {
return {
searchBarKeys: ['equipmentId', 'productionLineId'],
optionArrUrl: [getFactoryPage, getProductionLinePage],
tableBtn: [
this.$auth.hasPermi('base:equipment-alarm-log:update')
? {
@@ -71,6 +75,10 @@ export default {
: undefined,
].filter((v) => v),
tableProps: [
{
prop: 'factoryName',
label: '工厂',
},
{
prop: 'lineName',
label: '产线名',
@@ -78,7 +86,7 @@ export default {
{
prop: 'workshopName',
label: '工段名',
showOverflowtooltip :true,
showOverflowtooltip: true,
},
{
width: 200,
@@ -87,7 +95,7 @@ export default {
},
{
width: 150,
showOverflowtooltip :true,
showOverflowtooltip: true,
prop: 'equipmentCode',
label: '设备编码',
},
@@ -106,24 +114,24 @@ export default {
filter: (val) =>
val != null ? ['正常', '计划停机', '故障'][val] : '-',
},
{
width: 128,
prop: 'error',
label: '是否故障',
filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
},
{
prop: 'quantityRecordTime',
label: '生产量记录时间',
width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
{
prop: 'statusRecordTime',
label: '状态记录时间',
width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
// {
// width: 128,
// prop: 'error',
// label: '是否故障',
// filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
// },
// {
// prop: 'quantityRecordTime',
// label: '生产量记录时间',
// width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// },
// {
// prop: 'statusRecordTime',
// label: '状态记录时间',
// width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// },
{
_action: 'params-monitor',
label: '操作',
@@ -154,20 +162,13 @@ export default {
},
],
searchBarFormConfig: [
// {
// type: 'datePicker',
// label: '时间段',
// dateType: 'daterange', // datetimerange
// // format: 'yyyy-MM-dd HH:mm:ss',
// format: 'yyyy-MM-dd',
// valueFormat: 'yyyy-MM-dd HH:mm:ss',
// rangeSeparator: '-',
// startPlaceholder: '开始日期',
// endPlaceholder: '结束日期',
// defaultTime: ['00:00:00', '23:59:59'],
// param: 'createTime',
// // width: 350,
// },
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
onchange: true,
},
{
type: 'select',
label: '产线',
@@ -196,6 +197,7 @@ export default {
queryParams: {
pageNo: 1,
pageSize: 10,
factoryId: null,
productionLineId: null,
equipmentId: null,
},
@@ -207,22 +209,21 @@ export default {
};
},
created() {
this.getLineList();
this.getArr();
this.getList();
},
methods: {
/** 获取产线 */
async getLineList() {
const { data } = await this.$axios({
url: '/base/production-line/listAll',
method: 'get',
getArr() {
const params = {
page: 1,
limit: 500,
};
this.optionArrUrl.forEach((item, index) => {
item(params).then((response) => {
this.searchBarFormConfig[index].selectOptions = response.data.list;
});
});
this.searchBarFormConfig[0].selectOptions = data.map((line) => ({
name: line.name,
id: line.id,
}));
},
/** 根据产线获取设备 */
async getEquipmentList(id) {
const { data } = await this.$axios({
@@ -238,14 +239,24 @@ export default {
if (param == 'productionLineId') {
if (id == '') {
// 清除设备选框里的选项
this.searchBarFormConfig[1].selectOptions = [];
this.searchBarFormConfig[2].selectOptions = [];
return;
}
const list = await this.getEquipmentList(id);
this.searchBarFormConfig[1].selectOptions = list.map((eq) => ({
this.searchBarFormConfig[2].selectOptions = list.map((eq) => ({
name: eq.name,
id: eq.id,
}));
} else if (param == 'factoryId') {
// 清除设备选框里的选项
this.searchBarFormConfig[2].selectOptions = [];
this.queryParams.equipmentId = undefined;
this.queryParams.productionLineId = undefined;
this.$refs['search-bar'].formInline.equipmentId = undefined;
this.$refs['search-bar'].formInline.productionLineId = undefined;
getPdList(id).then((res) => {
this.searchBarFormConfig[1].selectOptions = res.data || [];
});
}
},
@@ -256,6 +267,7 @@ export default {
if (productionLineId)
this.queryParams.productionLineId = productionLineId;
else this.queryParams.productionLineId = null;
this.queryParams.factoryId = btn.factoryId || null;
this.getList();
},

299
src/views/monitoring/equipmentVisualize/index.vue Normal file
View File

@@ -0,0 +1,299 @@
<!--
* @Author: zwq
* @Date: 2025-02-10 09:15:55
* @LastEditors: zwq
* @LastEditTime: 2025-02-19 09:41:10
* @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: 210px;
width: 100%;
"
@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,
},
{
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;
canvas.height = 210;
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, 210); //清空画布
},
//画长方形
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] + 20); //竖着
} else {
this.ctx.fillText(name, LArr[0][0] + 5, LArr[0][1] + 20);
}
},
setRect(item, index) {
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();
const identifier = 'line' + num + 'canvas';
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: '/equipment/analysis/timing-diagram/equipment-status',
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;
this.lineArr.forEach((item, index) => {
const num = [
'',
'1672847052717821953',
'1672847052717821954',
'1686260211054157825',
'1701892552632770122',
'1714562503683465331',
].indexOf(item.id);
if (num > 0) {
item.num = num;
item.name = item.lineName;
this.setRect(item, index);
} else {
this.$message.warning('没有对应的产线！');
}
});
});
},
},
};
</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: 1600px;
.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>

1810
src/views/monitoring/equipmentVisualize/line-pot.js Normal file
View File

File diff suppressed because it is too large Load Diff