<template>
|
<div id="recordworkParse">
|
<div id="recordwork" style="height:400px;"></div>
|
<div class="paginationwork">
|
<el-pagination layout="prev, pager, next" @current-change="recordChange" :total="total" :default-page-size="6"/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment';
|
import * as echarts from 'echarts';
|
export default {
|
props: ['setWork','achievements',"select"],
|
watch: {
|
// setWork(val) {
|
// this.current = "1";
|
// this.getCharts();
|
// },
|
// select(val) {
|
// this.current = "1";
|
// this.getCharts();
|
// }
|
},
|
data() {
|
return {
|
dialog: {
|
save: false
|
},
|
current: "1",
|
size: "6",
|
total: 0,
|
records: []
|
}
|
},
|
mounted() {
|
this.getCharts();
|
},
|
methods: {
|
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.achievements.forEach(item=> {
|
if(item.code == name) {
|
stauts.name= item.name;
|
stauts.type= item.type;
|
}
|
})
|
return stauts;
|
},
|
getCharts() {
|
if(!this.setWork) return;
|
if(this.select.length == 0) return;
|
this.$HTTP.post(`/api/blade-mdc/status-record/status-record-by-workstation?current=${this.current}&size=${this.size}`,this.setWork).then(res => {
|
if (res.code === 200) {
|
var yAxisData = [];
|
var newData = [];
|
this.records = res.data.records;
|
res.data.records.reverse();
|
res.data.records.forEach((item,index)=> {
|
yAxisData.push(item.date);
|
//计算开始时间，显示时间
|
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;
|
item1.code = item.date;
|
item1.name = item.date;
|
item1.id = item.date;
|
})
|
newData.push(...item.statusRecordList);
|
})
|
this.total = res.data.total;
|
//渲染图表
|
this.setCharts(yAxisData,newData);
|
}
|
})
|
},
|
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: 100,
|
bottom: 30,
|
right: 30
|
},
|
xAxis: {
|
min: 0,
|
max: 1440, // 单位分钟
|
interval: 1440/6, //每隔多少分钟显示一个刻度
|
axisLabel: {
|
formatter: (value)=> {
|
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',
|
data: yAxisData
|
},
|
series: [
|
{
|
type: 'custom',
|
renderItem: this.renderItem,
|
itemStyle: {
|
opacity: 0.8
|
},
|
encode: {
|
x: [1, 2],
|
y: 0
|
},
|
data: data
|
}
|
]
|
};
|
var recordDom = document.getElementById('recordwork');
|
var recordworkParse = document.getElementById('recordworkParse');
|
var myChart = echarts.init(recordDom);
|
myChart.resize({
|
width: document.documentElement.clientWidth - 340 + "px"
|
});
|
myChart.setOption(option);
|
},
|
recordChange(current) {
|
this.current = current;
|
this.getCharts();
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
#recordwork {
|
position: relative;
|
}
|
#recordwork /deep/ .domSpan {
|
display: inline-block;
|
width: 70px;
|
height: 20px;
|
/* background: green; */
|
position: absolute;
|
cursor: pointer;
|
}
|
#recordwork /deep/ .tipdesc {
|
display: inline-block;
|
width: 80px;
|
}
|
.paginationwork {
|
text-align: right;
|
display: flex;
|
justify-content: end;
|
margin-top: 20px;
|
position: relative;
|
}
|
</style>
|
