This commit is contained in:
‘937886381’
2026-06-25 09:31:33 +08:00
parent eb92a37c54
commit 1d84c84d43
22 changed files with 2546 additions and 1510 deletions

View File

@@ -1,49 +1,39 @@
<template>
<div id="dayReport" class="dayReport" :style="styles">
<ReportHeader top-title="车间生产看板" />
<div
class="main-body"
style="
<div id="dayReport" class="dayReport" :style="styles">
<ReportHeader top-title="车间生产看板" />
<div class="main-body" style="
flex: 1;
display: flex;
padding: 16px 20px 22px 24px;
flex-direction: column;
">
<div class="top" style="display: flex; gap: 16px">
<div
class="top-three"
style="display: grid; gap: 12px; grid-template-columns: 367px 1493px">
<agvStatus />
<threeDimensionalChart :dataList="dataList" />
</div>
</div>
<div class="top" style="display: flex; gap: 16px; margin-top: 6px">
<div
class="bottom-three"
style="
<div class="top" style="display: flex; gap: 16px">
<div class="top-three" style="display: grid; gap: 12px; grid-template-columns: 367px 1493px">
<agvStatus :agvList='agvAlarmListData' />
<threeDimensionalChart :dataList="dataList" />
</div>
</div>
<div class="top" style="display: flex; gap: 16px; margin-top: 6px">
<div class="bottom-three" style="
display: grid;
gap: 12px;
grid-template-columns: 512px 930px 402px;
grid-template-columns: 1344px 512px;
">
<div
class="left-three"
style="display: grid; gap: 16px; grid-template-rows: 213px 213px">
<taskType />
<taskStatus />
</div>
<div
class="center-three"
style="display: grid; gap: 16px; grid-template-rows: 330px 92px">
<realTask />
<alarm />
<!-- <taskStatus /> -->
</div>
<alarmTop />
</div>
</div>
</div>
</div>
<div class="center-three" style="">
<!-- <realTask /> -->
<alarmInfo :agvList='agvAlarmInfo' />
<!-- <taskStatus /> -->
</div>
<div class="left-three" style="display: grid; gap: 16px; grid-template-rows: 213px 213px">
<taskType :data="taskTypeToday" />
<taskStatus :data="taskStatusToday" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ReportHeader from './components/Header.vue';
@@ -52,12 +42,12 @@ import agvStatus from './components/agvStatus.vue';
import taskType from './components/taskType.vue';
import realTask from './components/realTask.vue';
import alarm from './components/alarm.vue';
import alarmTop from './components/alarmTop.vue';
import alarmInfo from './components/alarmInfo.vue';
import taskStatus from './components/taskStatus.vue';
import threeDimensionalChart from './components/threeDimensionalChart.vue';
import { getLineEdgeLibraryList } from '../../../api/visualization/visualization';
import { getLineEdgeLibraryList, getAgvAlarmInfo, getTaskTypeToday, getTaskStatusToday, getAgvExample } from '../../../api/visualization/visualization';
// import financeCosts from './components/financeCosts.vue'
// import keyProductionIndicators from './components/keyProductionIndicators.vue'
@@ -75,21 +65,28 @@ export default {
taskStatus,
realTask,
alarm,
alarmTop,
alarmInfo,
},
data() {
return {
// isFullScreen: false,
timer: null,
beilv: 1,
value: 100,
value: 100,
taskTypeToday: [],
taskStatusToday: [],
agvAlarmInfo: [],
agvAlarmListData: [],
agvAlarmInfoData:[],
timer: null, // 存储定时器
dataList: [],
};
},
created() {
// this.init()
this.windowWidth(document.documentElement.clientWidth);
// this.init()
this.windowWidth(document.documentElement.clientWidth);
localStorage.removeItem('agv_carousel_position');
},
computed: {
// ...mapGetters(['sidebar']),
@@ -109,7 +106,7 @@ export default {
this.beilv2 = this.clientWidth / 1920;
this.timer = true;
let _this = this;
setTimeout(function () {
setTimeout(function () {·
_this.timer = false;
}, 500);
}
@@ -133,89 +130,224 @@ export default {
_this.clientWidth = `${document.documentElement.clientWidth}`;
this.beilv = _this.clientWidth / baseWidth;
})();
};
this.getData();
},
methods: {
getData(data) {
console.log(data);
getLineEdgeLibraryList().then((res) => {
console.log('res', res);
};
this.getData();
this.loadAgvExampleData()
this.timer = setInterval(() => {
this.getData();
}, 30000);
this.dataList = res.data;
});
},
},
beforeDestroy() {
// 组件销毁前清除定时器
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
methods: {
async getData(data) {
console.log(data);
const [lineEdgeRes, taskTypeRes, taskStatusRes, agvAlarmRes] = await Promise.all([
getLineEdgeLibraryList(),
getTaskTypeToday(),
getTaskStatusToday(),
getAgvAlarmInfo()
]);
this.dataList = lineEdgeRes.data;
this.taskTypeToday = taskTypeRes.data;
this.taskStatusToday = taskStatusRes.data;
this.agvAlarmListData = agvAlarmRes;
// this.agvAlarmListData = [
// {
// "deviceName": "AGV-01",
// "alarmTrigger": false,
// "data": [
// {
// "createTime": "2024-01-15 08:30:25",
// "updateTime": "2024-01-15 09:15:30",
// "creator": "admin",
// "updater": "operator1",
// "deleted": false,
// "id": 1001,
// "type": 1,
// "code": "ERR-001",
// "name": "电机过载保护",
// "solutionContent": "检查电机负载,清理轨道障碍物",
// "warnName": "电机异常",
// "faultComponent": "驱动电机",
// "faultEventName": "电机电流过高",
// "eventCause": "轨道异物卡滞",
// "troubleshootStep": "1.停止AGV运行 2.检查轨道 3.清理异物 4.重启设备",
// "classification": 2,
// "remark": "需要及时处理,避免电机损坏",
// "status": 1,
// "sort": 1,
// "version": 1
// },
// {
// "createTime": "2024-01-15 08:30:25",
// "updateTime": "2024-01-15 09:15:30",
// "creator": "admin",
// "updater": "operator1",
// "deleted": false,
// "id": 1001,
// "type": 1,
// "code": "ERR-001",
// "name": "电机过载保护",
// "solutionContent": "检查电机负载,清理轨道障碍物",
// "warnName": "电机异常",
// "faultComponent": "驱动电机",
// "faultEventName": "电机电流过高",
// "eventCause": "轨道异物卡滞",
// "troubleshootStep": "1.停止AGV运行 2.检查轨道 3.清理异物 4.重启设备",
// "classification": 2,
// "remark": "需要及时处理,避免电机损坏",
// "status": 1,
// "sort": 1,
// "version": 1
// }
// ]
// },
// {
// "deviceName": "AGV-02",
// "alarmTrigger": false,
// "data": [
// {
// "createTime": "2024-01-15 10:20:15",
// "updateTime": "2024-01-15 10:45:22",
// "creator": "admin",
// "updater": "operator2",
// "deleted": false,
// "id": 1002,
// "type": 2,
// "code": "ERR-002",
// "name": "电池电量过低",
// "solutionContent": "AGV已自动返回充电桩充电",
// "warnName": "电量告警",
// "faultComponent": "锂电池组",
// "faultEventName": "电压低于阈值",
// "eventCause": "连续运行时间过长,未及时充电",
// "troubleshootStep": "1.等待AGV自动充电 2.检查充电桩连接 3.手动更换电池",
// "classification": 1,
// "remark": "电量剩余15%,需关注充电状态",
// "status": 2,
// "sort": 2,
// "version": 1
// }
// ]
// },
// {
// "deviceName": "AGV-03",
// "alarmTrigger": false,
// "data": [
// {
// "createTime": "2024-01-15 14:35:42",
// "updateTime": "2024-01-15 15:00:18",
// "creator": "admin",
// "updater": "operator3",
// "deleted": false,
// "id": 1003,
// "type": 3,
// "code": "ERR-003",
// "name": "激光雷达通讯故障",
// "solutionContent": "检查雷达连接线,重启雷达驱动",
// "warnName": "传感器异常",
// "faultComponent": "激光雷达",
// "faultEventName": "通讯超时",
// "eventCause": "线束松动或电磁干扰",
// "troubleshootStep": "1.检查雷达指示灯 2.重新插拔连接线 3.重启系统 4.更换雷达",
// "classification": 3,
// "remark": "影响导航定位功能",
// "status": 1,
// "sort": 3,
// "version": 2
// }
// ]
// },
// {
// "deviceName": "AGV-04",
// "alarmTrigger": false,
// "data": [
// {
// "createTime": "2024-01-15 09:45:33",
// "updateTime": "2024-01-15 10:30:45",
// "creator": "admin",
// "updater": "operator1",
// "deleted": false,
// "id": 1004,
// "type": 1,
// "code": "ERR-004",
// "name": "举升机构异常",
// "solutionContent": "检查液压系统,补充液压油",
// "warnName": "机械故障",
// "faultComponent": "举升液压缸",
// "faultEventName": "压力不足",
// "eventCause": "液压油泄漏或油泵故障",
// "troubleshootStep": "1.检查液压油位 2.排查泄漏点 3.更换密封圈 4.测试压力",
// "classification": 2,
// "remark": "举升高度不达标,需紧急处理",
// "status": 1,
// "sort": 4,
// "version": 1
// }
// ]
// },
// {
// "deviceName": "AGV-05",
// "alarmTrigger": false,
// "data": [
// {
// "createTime": "2024-01-15 16:20:55",
// "updateTime": "2024-01-15 17:05:33",
// "creator": "admin",
// "updater": "operator2",
// "deleted": false,
// "id": 1005,
// "type": 2,
// "code": "ERR-005",
// "name": "导航定位偏移",
// "solutionContent": "重新标定导航路径,更新地图",
// "warnName": "定位异常",
// "faultComponent": "导航系统",
// "faultEventName": "定位精度超差",
// "eventCause": "地面二维码磨损或反光柱被遮挡",
// "troubleshootStep": "1.清洁二维码/反光柱 2.重新标定 3.更新导航地图 4.校准传感器",
// "classification": 3,
// "remark": "偏差超过5cm需重新校准",
// "status": 2,
// "sort": 5,
// "version": 1
// }
// ]
// }
// ];
// 根据告警状态决定显示内容
if (this.isAllAlarmTriggered()) {
console.log('无告警,加载示例数据');
// await this.loadAgvExampleData();
this.agvAlarmInfo = this.agvAlarmInfoData
} else {
console.log('有告警,使用真实数据');
this.agvAlarmInfo = agvAlarmRes;
// this.agvAlarmInfo = this.agvAlarmListData;
}
},
async loadAgvExampleData() {
const res = await getAgvExample()
console.log('getAgvExample 接口返回:', res);
this.agvAlarmInfoData = res
},
isAllAlarmTriggered() {
if (!this.agvAlarmListData || this.agvAlarmListData.length === 0) return false;
return this.agvAlarmListData.every(agv => agv.alarmTrigger === false);
},
windowWidth(value) {
this.clientWidth = value;
this.beilv2 = this.clientWidth / 1920;
},
// change() {
// this.isFullScreen = screenfull.isFullscreen
// },
// init() {
// if (!screenfull.isEnabled) {
// this.$message({
// message: 'you browser can not work',
// type: 'warning'
// })
// return false
// }
// screenfull.on('change', this.change)
// },
// destroy() {
// if (!screenfull.isEnabled) {
// this.$message({
// message: 'you browser can not work',
// type: 'warning'
// })
// return false
// }
// screenfull.off('change', this.change)
// },
// // 全屏
// screenfullChange() {
// console.log('screenfull.enabled', screenfull.isEnabled);
// if (!screenfull.isEnabled) {
// this.$message({
// message: 'you browser can not work',
// type: 'warning'
// })
// return false
// }
// screenfull.toggle(this.$refs.dayReportB)
// },
// changeDate(val) {
// this.date = val
// // this.weekDay = this.weekArr[moment(this.date).format('e')]
// // this.getData()
// if (this.date === moment().format('yyyy-MM-DD')) {
// this.loopTime()
// } else {
// clearInterval(this.timer)
// }
// },
// 导出
// exportPDF() {
// this.$message.success('正在导出,请稍等!')
// const element = document.getElementById('dayRepDom')
// element.style.display = 'block'
// const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
// html2canvas(element, {
// dpi: 300, // Set to 300 DPI
// scale: 3 // Adjusts your resolution
// }).then(function(canvas) {
// const imgWidth = 595.28
// const imgHeight = 841.89
// const pageData = canvas.toDataURL('image/jpeg', 1.0)
// const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
// PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
// setTimeout(() => {
// PDF.save(fileName) // 导出文件名
// }, 1000)
// })
// element.style.display = 'none'
// }
},
};
</script>