| | |
| | | * @Author: lzhe lzhe@example.com |
| | | * @Date: 2024-03-26 10:28:33 |
| | | * @LastEditors: lzhe lzhe@example.com |
| | | * @LastEditTime: 2024-05-15 16:25:52 |
| | | * @LastEditTime: 2024-06-05 11:37:17 |
| | | * @FilePath: /smart-web/src/views/master/person/main/index.vue |
| | | * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
| | | --> |
| | |
| | | <div class="collect-info-panel"> |
| | | <div class="fact-analysis-realtim"> |
| | | <div class="wimi-empty" style="background-color: rgb(255, 255, 255);" v-if="dmpList.length == 0"> |
| | | <div class="wimi-empty-img" style="width: 150px; height: 150px;"> |
| | | <!-- <div class="wimi-empty-img" style="width: 150px; height: 150px;"> |
| | | <img src="./quesheng.bd026700.png" style="height: auto; width: 100%;"> |
| | | </div> |
| | | </div> --> |
| | | <div class="empty-description"> |
| | | <div>暂无数据</div> |
| | | </div> |
| | | </div> |
| | | <div class="fact-analysis-card" v-for="item in dmpList" v-if="dmpList.length != 0"> |
| | | <div class="card-name" style="background-color: rgb(127, 192, 192);">{{item.description}}</div> |
| | | <div class="card-value" style="background-color: rgba(127, 192, 192, 0.14);"></div> |
| | | <div class="card-name" :style="{'background-color': item.color}">{{item.description}}</div> |
| | | <div :class="{'card-value': true,'card-value-bg1':item.name != 'Alarm','card-value-bg2':item.name == 'Alarm'}">{{item.codeName}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | tooltip: { |
| | | trigger: 'item', |
| | | //formatter: '{a} <br/>{b} : {c} ({d}%)' |
| | | formatter: '{a} 0分钟' |
| | | formatter: '{a} {c}分钟' |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | |
| | | }, |
| | | getlogcart() { //班次状态记录chart |
| | | var obj = { |
| | | //date: this.wcsDate, |
| | | date : "2024-05-15", |
| | | date: this.wcsDate, |
| | | //date : "2024-05-15", |
| | | humanFeedback: true, |
| | | workstationId: this.lastLevelId |
| | | } |
| | |
| | | var yAxisData = []; |
| | | var newData = []; |
| | | this.records = res.data.reverse(); |
| | | res.data.forEach(item=> { |
| | | if(item.statusRecordList == null) item.statusRecordList = []; |
| | | var filterRecordList = []; |
| | | item.statusRecordList.forEach(item1=> { |
| | | if(item1.endTime.startsWith(this.wcsDate)) { //只返回当前结束日期的 |
| | | filterRecordList.push(item1) |
| | | } |
| | | }) |
| | | item.statusRecordList = filterRecordList; |
| | | }) |
| | | res.data.forEach((item,index)=> { |
| | | yAxisData.push(item.shiftIndex); |
| | | //计算开始时间,显示时间 |
| | |
| | | |
| | | var nowTime = moment().format("HH:mm:ss"); //11:37:54 |
| | | var spaceTime = moment(obj.date + " " + nowTime).diff(moment(obj.date + " 00:00:00"), 'hours'); //离当天00:00:00过了多少小时 |
| | | console.log(spaceTime,obj.date + " " + nowTime,234) |
| | | //console.log(spaceTime,obj.date + " " + nowTime,234) |
| | | return; |
| | | //计算时间 |
| | | var startOfDay = moment().startOf('day'); //00:00:00 |
| | |
| | | interval: 1440/6, //每隔多少分钟显示一个刻度 |
| | | axisLabel: { |
| | | formatter: (value)=> { |
| | | console.log(value,111) |
| | | if(value == 0) { |
| | | return "00:00:00"; |
| | | }else if(value == 240) { |
| | |
| | | var wcsOption = JSON.parse(JSON.stringify(this.wcsBeginOption)); |
| | | if(res.data.length == 0) { |
| | | wcsOption.forEach(item=> { |
| | | item.value = 20; |
| | | item.value = 0; |
| | | }) |
| | | }else { |
| | | wcsOption.forEach(item=> { |
| | |
| | | if(res.code == 200) { |
| | | this.stationForm = res.data; |
| | | this.getdmp(this.lastLevelId,this.stationForm.machineId); |
| | | this.newDate(); //获取当前日期 |
| | | //this.newDate(); //获取当前日期 |
| | | this.getwcsR(); |
| | | this.getwscLvalue(); //左侧图表 |
| | | this.alarmsearchBtn(); //机器履历 |
| | |
| | | } |
| | | }, |
| | | getdmp(lastLevelId,machineId) { |
| | | console.log(lastLevelId,machineId) |
| | | this.$HTTP.get(`/api/blade-cps/workstation/get-dmp-variables?machineId=${machineId}&workstationId=${lastLevelId}`).then(res=> { |
| | | if(res.code == 200) { |
| | | this.dmpList = res.data; |
| | | console.log(this.dmpList,111) |
| | | this.dmpList = []; |
| | | var that = this; |
| | | //发送websocket |
| | | var obj = { |
| | | type: "realTimeData", |
| | | workstationIdList: [lastLevelId] |
| | | } |
| | | if(this.$TOOL.socket.websocket == null) { //没有建立先建立 |
| | | this.$TOOL.socket.connectToWebSocket(this.$TOOL.cookie.get("TOKEN")); |
| | | } |
| | | this.$TOOL.socket.sendDataToWebSocket(obj); //发送 |
| | | this.$TOOL.socket.websocket.onmessage = function(event) { |
| | | if(res.data.length == 0) return; //没值不用循环 |
| | | res.data.forEach(item=> { //第一步把v放到code里 |
| | | var eventData = JSON.parse(event.data); |
| | | if(item.name == "DeviceStatus") { //机器状态 |
| | | item.code = eventData.data[item.name].v; |
| | | that.allwcs.forEach(item1=> { |
| | | if(item.code == item1.code) { |
| | | item.codeName = item1.name; //第二步把v的code和运行对应 |
| | | if(item.code == "2") { |
| | | item.color = "#73D13D"; |
| | | }else { |
| | | item.color = "#75C0C0"; |
| | | } |
| | | } |
| | | }) |
| | | }else { |
| | | if(item.name == 'Alarm') { //报警 |
| | | var v = JSON.parse(eventData.data[item.name].v); |
| | | item.description = v.code; |
| | | item.codeName = v.msg; |
| | | item.color = "#370C0D"; |
| | | }else { |
| | | item.codeName = eventData.data[item.name].v; |
| | | item.color = "#75C0C0"; |
| | | } |
| | | } |
| | | }); |
| | | that.dmpList = res.data; |
| | | }; |
| | | } |
| | | }) |
| | | }, |
| | |
| | | padding: 0 8px; |
| | | overflow: hidden; |
| | | word-break: break-all; |
| | | line-height: 68px; |
| | | } |
| | | .card-value-bg1 { |
| | | background-color: rgba(115, 209, 61, 0.14); |
| | | } |
| | | .card-value-bg2 { |
| | | background-color: rgba(55, 12, 13, 0.14); |
| | | } |
| | | .wcs-main { |
| | | display: flex; |