From fae941098d1cb83ee48b94c7af403244bbd76a6b Mon Sep 17 00:00:00 2001
From: lzhe <lzhe@example.com>
Date: 星期五, 17 五月 2024 16:42:04 +0800
Subject: [PATCH] 1
---
src/views/mdc/station-live.vue | 265 ++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 224 insertions(+), 41 deletions(-)
diff --git a/src/views/mdc/station-live.vue b/src/views/mdc/station-live.vue
index c94dd47..70027b6 100644
--- a/src/views/mdc/station-live.vue
+++ b/src/views/mdc/station-live.vue
@@ -2,7 +2,7 @@
* @Author: lzhe lzhe@example.com
* @Date: 2024-03-26 10:28:33
* @LastEditors: lzhe lzhe@example.com
- * @LastEditTime: 2024-04-19 18:26:26
+ * @LastEditTime: 2024-05-15 16:25:52
* @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
-->
@@ -81,13 +81,21 @@
<div id="wcs-log" style="width: 100%;height:200px;"></div>
<el-table ref="multipleTableRef1" :data="recordData" border style="width: 100%;">
<el-table-column prop="shiftIndexName" label="鐝"></el-table-column>
- <el-table-column prop="temdata" label="璋冭瘯"></el-table-column>
- <el-table-column prop="temdata" label="绂荤嚎"></el-table-column>
- <el-table-column prop="temdata" label="寰呮満"></el-table-column>
- <el-table-column prop="temdata" label="鎶ヨ"></el-table-column>
- <el-table-column prop="temdata" label="杩愯"></el-table-column>
- <el-table-column prop="perdata" label="绋煎姩鐜�%"></el-table-column>
- <el-table-column prop="perdata" label="鎶ヨ鐜�%"></el-table-column>
+ <el-table-column prop="5" label="璋冭瘯"></el-table-column>
+ <el-table-column prop="4" label="绂荤嚎"></el-table-column>
+ <el-table-column prop="3" label="寰呮満"></el-table-column>
+ <el-table-column prop="1" label="鎶ヨ"></el-table-column>
+ <el-table-column prop="2" label="杩愯"></el-table-column>
+ <el-table-column prop="oee" label="绋煎姩鐜�%">
+ <template #default="scope">
+ <span>{{(Number(scope.row.oee) * 100).toFixed(2)}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="perdata" label="鎶ヨ鐜�%">
+ <template #default="scope">
+ <span>{{(Number(scope.row.fault) * 100).toFixed(2)}}</span>
+ </template>
+ </el-table-column>
</el-table>
</div>
</div>
@@ -116,6 +124,7 @@
<save-dialog v-if="dialog.save" ref="saveDialog" @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog>
</template>
<script>
+ import moment from 'moment'
import * as echarts from 'echarts';
import saveDialog from './add-station-status'
export default {
@@ -233,26 +242,13 @@
},
xAxis: {
type: 'category',
- data: ['00:00:00', '02:00:00', '04:00:00', '06:00:00', '08:00:00', '10:00:00', '12:00:00', '14:00:00', '18:00:00'],
+ data: [],
},
yAxis: {
type: 'category',
data: ['1', '2']
},
- series: [
- {
- name: 'wcsLog',
- type: 'bar',
- data: [],
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }
- ]
+ series: []
},
dmpList: [],
stationForm: {
@@ -289,7 +285,9 @@
current: "1",
size: "15"
},
- recordData: [] // 鐝鐘舵�佽褰晅able
+ records: [],
+ recordData: [], // 鐝鐘舵�佽褰晅able
+ allwcs: []
}
},
created(){
@@ -343,30 +341,212 @@
}
this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
if(res.code == 200) {
- res.data.forEach(item=> {
- item.temdata = "00:00:00";
- item.perdata = "0";
- })
+ var defaultValues = {
+ oee: 0,
+ fault: 0,
+ '1': "00:00:00",
+ '2': "00:00:00",
+ '3': "00:00:00",
+ '4': "00:00:00",
+ '5': "00:00:00"
+ };
+ res.data.forEach(item => {
+ Object.keys(defaultValues).forEach(key => {
+ if (!item[key]) {
+ item[key] = defaultValues[key];
+ }
+ });
+ });
this.recordData = res.data;
}
})
},
+ renderItem(params, api) {
+ var categoryIndex = api.value(0);
+ var start = api.coord([api.value(1), categoryIndex]);
+ var end = api.coord([api.value(2), categoryIndex]);
+ var height = api.size([0, 1])[1] * 0.6;
+ var rectShape = echarts.graphic.clipRectByRect(
+ {
+ x: start[0],
+ y: start[1] - height / 2,
+ width: end[0] - start[0],
+ height: height
+ },
+ {
+ x: params.coordSys.x,
+ y: params.coordSys.y,
+ width: params.coordSys.width,
+ height: params.coordSys.height
+ }
+ );
+ return (
+ rectShape && {
+ type: 'rect',
+ transition: ['shape'],
+ shape: rectShape,
+ style: api.style()
+ }
+ );
+ },
+ getColor(name) {
+ var color = '';
+ this.achievements.forEach(item=> {
+ if(item.code == name) {
+ color = item.color;
+ }
+ })
+ return color;
+ },
+ getStatus(name) {
+ var stauts = {};
+ this.allwcs.forEach(item=> {
+ if(item.code == name) {
+ stauts.name= item.name;
+ stauts.type= item.type;
+ }
+ })
+ return stauts;
+ },
getlogcart() { //鐝鐘舵�佽褰昪hart
var obj = {
- date: this.wcsDate,
+ //date: this.wcsDate,
+ date : "2024-05-15",
humanFeedback: true,
workstationId: this.lastLevelId
}
- this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
+ this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-chart`,obj).then(res=> {
if(res.code == 200) {
- var myChart = echarts.init(document.getElementById('wcs-log'));
- res.data.forEach(item => {
- item.value = 0;
+ var yAxisData = [];
+ var newData = [];
+ this.records = res.data.reverse();
+ res.data.forEach((item,index)=> {
+ yAxisData.push(item.shiftIndex);
+ //璁＄畻寮�濮嬫椂闂达紝鏄剧ず鏃堕棿
+ if(item.statusRecordList == null) item.statusRecordList = [];
+ item.statusRecordList.forEach(item1=> {
+ var initstart = item1.startTime.split(" ")[0]; //鏍规嵁鏃ユ湡璁＄畻宸��
+ var startTime = moment(item1.startTime).diff(moment(initstart + " 00:00:00"), 'minutes');
+ var endTime = moment(item1.endTime).diff(moment(initstart + " 00:00:00"), 'minutes');
+ var diff = moment(item1.endTime).diff(moment(item1.startTime), 'minutes') //寮�濮嬩簡澶氫箙
+ var color = this.getColor(item1.wcs);
+ item1.value = [index,startTime,endTime,diff];
+ item1.itemStyle = {"normal": {"color": color}};
+ item1.statusName = this.getStatus(item1.wcs).name;
+ item1.statusType = this.getStatus(item1.wcs).type;
+ })
+ newData.push(...item.statusRecordList);
})
- this.wcsOptionLog.series[0].data = res.data;
+ //娓叉煋鍥捐〃
+ this.setCharts(yAxisData,newData);
+
+ 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)
+ return;
+ //璁＄畻鏃堕棿
+ var startOfDay = moment().startOf('day'); //00:00:00
+ var now = moment(); //褰撳墠鏃堕棿
+ var diffInMilliseconds = now.diff(startOfDay); //鏃堕棿宸�
+ var diffInHours = Math.floor(diffInMilliseconds / (1000 * 60 * 60)); //鏃堕棿宸浆鎹㈡垚灏忔椂
+ //鍒嗗壊
+ var everTime = Math.ceil(diffInHours/8);
+ var arrData = [];
+ for(var i=0;i<=diffInHours;i+=everTime) {
+ if(i<=10) {
+ var num = '0' + i;
+ }else {
+ var num = i;
+ }
+ arrData.push(num + ':00:00');
+ }
+ //璁＄畻鏃堕棿缁撴潫
+ this.wcsOptionLog.xAxis.data = [...arrData,moment().format("HH:mm:ss")];
myChart.setOption(this.wcsOptionLog);
}
})
+ },
+ setCharts(yAxisData,data) {
+ var option = {
+ tooltip: {
+ formatter: function (params) {
+ if(params.data.statusType == 4) {
+ var dom = `<span class="tipdesc">宸ヤ綅:</span>${params.data.name}</br>
+ <span class="tipdesc">鐘舵��:</span>${params.data.wcsDesc}</br>
+ <span class="tipdesc">鎻忚堪:</span>${params.data.feedbackDesc}</br>
+ <span class="tipdesc">鐘舵�佹椂闂�:</span>${params.data.startTime} 锝� ${params.data.endTime}</br>
+ <span class="tipdesc">鍙嶉鏃堕棿:</span>${params.data.feedbackTime}</br>
+ <span class="tipdesc">鍙嶉浜�:</span>${params.data.feedUser}</br>`
+ }else {
+ var dom = `<span class="tipstatus">${params.data.statusName}</span></br>
+ <span class="tipdesc">鏃舵:</span><span>${params.data.startTime.split(" ")[1]} 锝� ${params.data.endTime.split(" ")[1]}</span></br>`
+ }
+ return dom;
+ }
+ },
+ grid: {
+ top: 10,
+ left: 70,
+ bottom: 120
+ },
+ xAxis: {
+ min: 0,
+ max: 1440, // 鍗曚綅鍒嗛挓
+ interval: 1440/6, //姣忛殧澶氬皯鍒嗛挓鏄剧ず涓�涓埢搴�
+ axisLabel: {
+ formatter: (value)=> {
+ console.log(value,111)
+ if(value == 0) {
+ return "00:00:00";
+ }else if(value == 240) {
+ return "04:00:00";
+ }else if(value == 480) {
+ return "08:00:00";
+ }else if(value == 720) {
+ return "12:00:00";
+ }else if(value == 960) {
+ return "16:00:00";
+ }else if(value == 1200) {
+ return "18:00:00";
+ }else if(value == 1440) {
+ return "00:00:00";
+ }
+ }
+ }
+ },
+ yAxis: {
+ type: 'category',
+ axisLabel: {
+ formatter: function (value) {
+ return value;
+ },
+ rich: {
+ a: {
+ color: '#409eff',
+ cursor: 'pointer',
+ fontSize: '12px'
+ }
+ }
+ },
+ data: yAxisData
+ },
+ series: [
+ {
+ type: 'custom',
+ renderItem: this.renderItem,
+ itemStyle: {
+ opacity: 0.8
+ },
+ encode: {
+ x: [1, 2],
+ y: 0
+ },
+ data: data
+ }
+ ]
+ };
+ var myChart = echarts.init(document.getElementById('wcs-log'));
+ myChart.setOption(option);
},
getwscLvalue() {
var obj = {
@@ -458,7 +638,7 @@
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,1)
+ console.log(this.dmpList,111)
}
})
},
@@ -562,6 +742,7 @@
})
this.achievements = achievements;
this.collectionstatus = collectionstatus;
+ this.allwcs = res.data;
}
})
},
@@ -763,7 +944,7 @@
position: absolute;
right: 10px;
top: -2px;
- color: #3b8e8e;
+ color: #409eff;
cursor: pointer;
}
.status-wrap.align-left, .status-wrap:first-child {
@@ -776,7 +957,7 @@
justify-content: start;
}
.collect-status {
- color: #3b8e8e;
+ color: #409eff;
margin-right: 16px;
font-size: 14px;
}
@@ -794,10 +975,7 @@
}
.status-wrap {
display: flex;
- -ms-flex-wrap: wrap;
flex-wrap: wrap;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
justify-content: start;
}
.status-wrap .status-con {
@@ -806,6 +984,11 @@
flex-wrap: wrap;
}
.status-wrap /deep/ .el-checkbox.el-checkbox--large {
- color: #3b8e8e;
+ color: #409eff;
+}
+#record /deep/ .tipstatus {
+ width: 100%;
+ display: inline-block;
+ border-bottom: 1px solid #eee;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3