<template>
|
<div>
|
<div id="record" style="width: 100%;height:500px;"></div>
|
<div class="pagination">
|
<el-pagination layout="prev, pager, next" @current-change="recordChange" :total="total" :default-page-size="6"/>
|
</div>
|
<save-dialog v-if="dialog.save" ref="saveDialog" @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog>
|
</div>
|
</template>
|
|
<script>
|
import saveDialog from '../add-station-status'
|
import moment from 'moment';
|
import * as echarts from 'echarts';
|
export default {
|
components: {saveDialog},
|
props: ['achievements','date','workstationInfoList'],
|
watch: {
|
},
|
data() {
|
return {
|
dialog: {
|
save: false
|
},
|
current: "1",
|
size: "6",
|
total: 0,
|
records: [],
|
lastLevelId: ""
|
}
|
},
|
mounted() {
|
this.getCharts();
|
},
|
methods: {
|
addfeedbackSuccess() {
|
this.current = "1";
|
this.getCharts();
|
},
|
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() {
|
console.log(this.workstationInfoList.length == 0,this.date == "",this.date,333)
|
if(this.date == "") return;
|
var obj = {
|
date: this.date,
|
humanFeedback: true,
|
machineFeedback: true,
|
workstationInfoList: this.workstationInfoList
|
}
|
this.$HTTP.post(`/api/blade-mdc/status-record/status-record-by-date?current=${this.current}&size=${this.size}`,obj).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.workstationInfo.name);
|
//计算开始时间，显示时间
|
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.workstationInfo.code;
|
item1.name = item.workstationInfo.name;
|
item1.id = item.workstationInfo.id;
|
})
|
newData.push(...item.statusRecordList);
|
})
|
this.total = res.data.total;
|
//渲染图表
|
this.setCharts(yAxisData,newData);
|
// 检查是否存在id为'parentNodeDom'的DOM元素,有就先删除
|
var parentNodeDom = document.getElementById('parentNodeDom');
|
if (parentNodeDom) {
|
parentNodeDom.parentNode.removeChild(parentNodeDom);
|
}
|
this.domlocation(yAxisData);
|
}
|
})
|
},
|
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)=> {
|
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 + "\n" + '{a|状态反馈}';
|
},
|
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 recordDom = document.getElementById('record');
|
var myChart = echarts.init(recordDom);
|
myChart.setOption(option);
|
},
|
domlocation(yAxisData) {
|
var recordDom = document.getElementById('record');
|
//添加dom，定位
|
var parentNodeDom = document.createElement('div');
|
parentNodeDom.id="parentNodeDom";
|
recordDom.appendChild(parentNodeDom);
|
for(var i=0;i<yAxisData.length;i++) {
|
var dom = document.createElement('span');
|
dom.className = "domSpan spanIndex" + i;
|
dom.dataset.id = this.records[i].workstationInfo.id;
|
dom.dataset.code = this.records[i].workstationInfo.code;
|
if(yAxisData.length == 1) {
|
dom.style.top = 196 + "px"; //定位top
|
}
|
if(yAxisData.length == 2) {
|
if(i==0){
|
dom.style.top = 287 + "px";
|
}else if(i==1){
|
dom.style.top = 102 + "px"; //定位top
|
}
|
}
|
if(yAxisData.length == 3) {
|
if(i==0){
|
dom.style.top = 317 + "px";
|
}else if(i==1){
|
dom.style.top = 193 + "px"; //定位top
|
}else if(i==2){
|
dom.style.top = 72 + "px"; //定位top
|
}
|
}
|
if(yAxisData.length == 4) {
|
if(i==0){
|
dom.style.top = 333 + "px";
|
}else if(i==1){
|
dom.style.top = 241 + "px"; //定位top
|
}else if(i==2){
|
dom.style.top = 148 + "px"; //定位top
|
}else if(i==3){
|
dom.style.top = 56 + "px"; //定位top
|
}
|
}
|
if(yAxisData.length == 5) {
|
if(i==0){
|
dom.style.top = 342 + "px";
|
}else if(i==1){
|
dom.style.top = 268 + "px"; //定位top
|
}else if(i==2){
|
dom.style.top = 194 + "px"; //定位top
|
}else if(i==3){
|
dom.style.top = 121 + "px"; //定位top
|
}else if(i==4){
|
dom.style.top = 46 + "px"; //定位top
|
}
|
}
|
if(yAxisData.length == 6) {
|
if(i==0){
|
dom.style.top = 348 + "px";
|
}else if(i==1){
|
dom.style.top = 287 + "px"; //定位top
|
}else if(i==2){
|
dom.style.top = 225 + "px"; //定位top
|
}else if(i==3){
|
dom.style.top = 163 + "px"; //定位top
|
}else if(i==4){
|
dom.style.top = 102 + "px"; //定位top
|
}else if(i==5){
|
dom.style.top = 40 + "px"; //定位top
|
}
|
}
|
dom.style.left = recordDom.offsetLeft + "px"; //定位left
|
var that = this;
|
dom.addEventListener('click', function (event) {
|
that.lastLevelId = event.target.dataset.id;
|
that.dialog.save = true
|
that.$nextTick(() => {
|
that.$refs.saveDialog.open('edit').setData(that.lastLevelId);
|
})
|
|
})
|
parentNodeDom.appendChild(dom);
|
}
|
},
|
recordChange(current) {
|
this.current = current;
|
this.getCharts();
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
#record {
|
position: relative;
|
}
|
#record /deep/ .domSpan {
|
display: inline-block;
|
width: 70px;
|
height: 20px;
|
/* background: green; */
|
position: absolute;
|
cursor: pointer;
|
}
|
#record /deep/ .tipstatus {
|
width: 100%;
|
display: inline-block;
|
border-bottom: 1px solid #eee;
|
}
|
.pagination {
|
text-align: right;
|
display: flex;
|
justify-content: end;
|
margin-top: -60px;
|
position: relative;
|
z-index: 99;
|
}
|
</style>
|
