362 lines
12 KiB
Vue
362 lines
12 KiB
Vue
<template>
|
||
<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 :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: 1344px 512px;
|
||
">
|
||
|
||
<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';
|
||
// import screenfull from 'screenfull'
|
||
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 alarmInfo from './components/alarmInfo.vue';
|
||
|
||
import taskStatus from './components/taskStatus.vue';
|
||
|
||
import threeDimensionalChart from './components/threeDimensionalChart.vue';
|
||
import { getLineEdgeLibraryList, getAgvAlarmInfo, getTaskTypeToday, getTaskStatusToday, getAgvExample } from '../../../api/visualization/visualization';
|
||
|
||
// import financeCosts from './components/financeCosts.vue'
|
||
// import keyProductionIndicators from './components/keyProductionIndicators.vue'
|
||
// import coreBottomLeft from './components/coreBottomLeft.vue'
|
||
// import orderProgress from './components/orderProgress.vue'
|
||
// import keyWork from './components/keyWork.vue'
|
||
// import moment from 'moment'
|
||
export default {
|
||
name: 'DayReport',
|
||
components: {
|
||
ReportHeader,
|
||
agvStatus,
|
||
threeDimensionalChart,
|
||
taskType,
|
||
taskStatus,
|
||
realTask,
|
||
alarm,
|
||
alarmInfo,
|
||
},
|
||
data() {
|
||
return {
|
||
// isFullScreen: false,
|
||
timer: null,
|
||
beilv: 1,
|
||
value: 100,
|
||
taskTypeToday: [],
|
||
taskStatusToday: [],
|
||
agvAlarmInfo: [],
|
||
agvAlarmListData: [],
|
||
agvAlarmInfoData:[],
|
||
timer: null, // 存储定时器
|
||
dataList: [],
|
||
};
|
||
},
|
||
|
||
created() {
|
||
// this.init()
|
||
this.windowWidth(document.documentElement.clientWidth);
|
||
localStorage.removeItem('agv_carousel_position');
|
||
},
|
||
computed: {
|
||
// ...mapGetters(['sidebar']),
|
||
styles() {
|
||
const v = Math.floor(this.value * this.beilv * 100) / 10000;
|
||
return {
|
||
transform: `scale(${v})`,
|
||
transformOrigin: 'left top',
|
||
// overflow: hidden;
|
||
};
|
||
},
|
||
},
|
||
watch: {
|
||
clientWidth(val) {
|
||
if (!this.timer) {
|
||
this.clientWidth = val;
|
||
this.beilv2 = this.clientWidth / 1920;
|
||
this.timer = true;
|
||
let _this = this;
|
||
setTimeout(function () {·
|
||
_this.timer = false;
|
||
}, 500);
|
||
}
|
||
// 这里可以添加修改时的方法
|
||
this.windowWidth(val);
|
||
},
|
||
},
|
||
// beforeDestroy() {
|
||
// clearInterval(this.timer)
|
||
// this.destroy()
|
||
// },
|
||
mounted() {
|
||
const _this = this;
|
||
let baseWidth = 1920;
|
||
if (this.$route.query.keyword == 'home') {
|
||
baseWidth = 2180;
|
||
}
|
||
_this.beilv = document.documentElement.clientWidth / baseWidth;
|
||
window.onresize = () => {
|
||
return (() => {
|
||
_this.clientWidth = `${document.documentElement.clientWidth}`;
|
||
this.beilv = _this.clientWidth / baseWidth;
|
||
})();
|
||
};
|
||
this.getData();
|
||
this.loadAgvExampleData()
|
||
this.timer = setInterval(() => {
|
||
this.getData();
|
||
}, 30000);
|
||
|
||
},
|
||
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;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.dayReport {
|
||
width: 1920px;
|
||
height: 1080px;
|
||
background: #f2f4f9;
|
||
// background-size: cover;
|
||
}
|
||
</style>
|