<template>
|
<div class="aposcope-main">
|
<div class="aposcope-left">
|
<div class="left-title">查询条件</div>
|
<div class="left-title-col">日期</div>
|
<el-date-picker v-model="time" type="daterange" :shortcuts="shortcuts" range-separator="-" size="small" style="width: 100%;" value-format="YYYY-MM-DD"/>
|
<div class="left-title-col">工位</div>
|
<div class="MYTree">
|
<MYTree v-model="treeChecked" show-checkbox class="MYTree-content"></MYTree>
|
</div>
|
<div class="footer">
|
<el-button @click="query" type="primary">查询</el-button>
|
<el-button>导出</el-button>
|
</div>
|
</div>
|
<div class="aposcope-right">
|
<el-tabs tab-position="top" v-model="activeName" type="card">
|
<el-tab-pane label="按日期查看" name="shift">
|
<el-button-group>
|
<el-button @click="btnListActive = item.id" :type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id" size="small">{{item.title }}</el-button>
|
</el-button-group>
|
<div class="status">
|
<div class="status-wrap align-left">
|
<div class="collect-status">采集状态</div>
|
<div class="status-box" v-for="item in achievements"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div>
|
</div>
|
<div class="status-wrap">
|
<el-checkbox v-model="checked1" label="人工反馈状态" size="large" />
|
<div class="status-con">
|
<div class="status-box" v-for="item in collectionstatus"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div id="record" style="width: 100%;height:500px;"></div>
|
</div>
|
<div class="pagination">
|
<el-pagination layout="prev, pager, next" :total="total" :default-page-size="6"/>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="按工位查看" name="time">
|
按工位查看
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment';
|
import MYTree from './MYTree.vue'
|
import Shift from './components/Shift.vue'
|
import Time from './components/Time.vue'
|
import * as echarts from 'echarts';
|
export default {
|
components: {
|
time: "",
|
MYTree,
|
Shift,
|
Time
|
},
|
watch: {
|
activeName() {
|
// this.$nextTick(() => {
|
// this.query()
|
// })
|
},
|
btnListActive(val) {
|
// this.query({
|
// ...this.params,
|
// startDate: val,
|
// endDate: val
|
// })
|
// this.queryChart({
|
// ...this.params,
|
// startDate: val,
|
// endDate: val
|
// })
|
}
|
},
|
data() {
|
return {
|
workstationInfoList: [],
|
checked1: true,
|
btnListActive: '',
|
btnList: [],
|
timeBtn: "",
|
shortcuts: [
|
{
|
text: '最近3天',
|
value: () => {
|
const end = new Date()
|
const start = new Date()
|
start.setDate(start.getDate() - 3)
|
return [start, end]
|
},
|
},
|
{
|
text: '最近7天',
|
value: () => {
|
const end = new Date()
|
const start = new Date()
|
start.setMonth(start.getDate() - 7)
|
return [start, end]
|
},
|
},
|
{
|
text: '最近一个月',
|
value: () => {
|
const end = new Date()
|
const start = new Date()
|
start.setMonth(start.getMonth() - 1)
|
return [start, end]
|
},
|
},
|
],
|
activeName: 'shift',
|
time: [],
|
treeChecked: [],
|
achievements: [],
|
collectionstatus: [],
|
current: "1",
|
size: "6",
|
total: 0,
|
recordOptionLog: {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
},
|
formatter: function (params) {
|
var tar;
|
if (params[1].value != '-') {
|
tar = params[1];
|
}
|
else {
|
tar = params[0];
|
}
|
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
|
}
|
},
|
grid: {
|
top: 10,
|
left: 70,
|
bottom: 120
|
},
|
yAxis: {
|
type: 'category',
|
axisLabel: {
|
formatter: function (value) {
|
return value + "\n" + '{a|状态反馈}';
|
},
|
rich: {
|
a: {
|
color: '#409eff',
|
cursor: 'pointer',
|
fontSize: '12px'
|
}
|
}
|
},
|
data: ['123','345','789','888','666','222']
|
},
|
xAxis: {
|
type: 'value',
|
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";
|
}
|
}
|
}
|
},
|
series: [
|
{
|
name: '辅助',
|
type: 'bar',
|
stack: 'grouup',
|
itemStyle: {
|
borderColor: 'transparent',
|
color: 'transparent'
|
},
|
emphasis: {
|
itemStyle: {
|
borderColor: 'transparent',
|
color: 'transparent'
|
}
|
},
|
data: [{value:100}, {value:0}, {value:0}, {value:240}, {value:360}, {value:540}] //从什么时候开始的
|
//data: []
|
},
|
{
|
name: 'time',
|
type: 'bar',
|
stack: 'grouup',
|
data: [{value: 200}, {value: null}, {value: null}, {value:1200}, {value:240}, {value:900}] //数值是几，如(20，就是从4开始，20格数据)
|
//data: []
|
},
|
{
|
name: '辅助',
|
type: 'bar',
|
stack: 'grouup',
|
itemStyle: {
|
borderColor: 'transparent',
|
color: 'transparent'
|
},
|
emphasis: {
|
itemStyle: {
|
borderColor: 'transparent',
|
color: 'transparent'
|
}
|
},
|
data: [{value:400}, {value:null}, {value:null}, {value:null}, {value:10}, {value:null}] //从什么时候开始的
|
//data: []
|
},
|
{
|
name: 'time',
|
type: 'bar',
|
stack: 'grouup',
|
data: [{value: 45}, {value: null}, {value: null}, {value:null}, {value:32}, {value:null}] //数值是几，如(20，就是从4开始，20格数据)
|
//data: []
|
}
|
]
|
}
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
this.getCharts();
|
//this.init();
|
},
|
methods: {
|
getachievements() { //班次状态记录采集状态
|
this.$HTTP.get(`/api/blade-cps/global_wcs/wcs-achievements`).then(res=> {
|
if(res.code == 200) {
|
var achievements = [];//采集状态
|
var collectionstatus = []; //人工反馈状态
|
res.data.forEach(item=> {
|
if(item.type == 1) {
|
achievements.push(item);
|
}
|
if(item.type == 4) {
|
collectionstatus.push(item);
|
}
|
})
|
this.achievements = achievements;
|
this.collectionstatus = collectionstatus;
|
}
|
})
|
},
|
getTime(data) {
|
this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', {
|
...data
|
}).then(res => {
|
if (res.code === 200) {
|
var today = moment().format('YYYY-MM-DD');
|
var yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD');
|
res.data.forEach(item=> {
|
if(item.title == today) {
|
item.title = "今天";
|
}
|
if(item.title == yesterday) {
|
item.title = "昨天";
|
}
|
})
|
this.btnList = res.data.reverse();
|
this.btnListActive = res?.data?.[0]?.id
|
}
|
})
|
},
|
getCharts() {
|
var obj = {
|
//date: this.time[1],
|
date: "2024-04-24",
|
humanFeedback: true,
|
machineFeedback: true,
|
workstationInfoList: this.workstationInfoList
|
}
|
// var recordDom = document.getElementById('record');
|
// var myChart = echarts.init(recordDom);
|
// myChart.setOption(this.recordOptionLog);
|
// return;
|
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 yAxis = []; //计算y轴数据
|
var seriesData = []; //显示的数据
|
res.data.records.forEach(item=> {
|
yAxis.push(item.workstationInfo.name);
|
//计算开始时间，显示时间
|
item.statusRecordList.forEach(item1=> {
|
var endTime = item1.endTime;
|
var startTime = item1.startTime;
|
var initstart = item1.startTime.split(" ")[0];
|
item1.startMinutes = moment(item1.startTime).diff(moment(initstart + " 00:00:00"), 'minutes') //从什么时候开始
|
item1.diff = moment(item1.endTime).diff(moment(item1.startTime), 'minutes') //开始了多久
|
})
|
// var data1 = [];
|
// var data2 = [];
|
//计算显示的数据
|
// item.statusRecordList.forEach(item2=> {
|
// seriesData.push({
|
// name: '辅助',
|
// type: 'bar',
|
// stack: 'grouup',
|
// itemStyle: {
|
// borderColor: 'transparent',
|
// color: 'transparent'
|
// },
|
// emphasis: {
|
// itemStyle: {
|
// borderColor: 'transparent',
|
// color: 'transparent'
|
// }
|
// },
|
// data: [{value:item.startMinutes}, {value:0}, {value:0}, {value:240}, {value:360}, {value:540}] //从什么时候开始的
|
// })
|
// arr.push({
|
// name: 'time',
|
// type: 'bar',
|
// stack: 'grouup',
|
// data: [{value: item.diff}, {value: null}, {value: null}, {value:1200}, {value:240}, {value:900}] //数值是几，如(20，就是从4开始，20格数据)
|
// })
|
//})
|
})
|
//demo
|
// var data = [];
|
// var vb = a[0].statusRecordList;
|
// vb.forEach((item,index)=> {
|
// if(index == 0) {
|
// data.push({value: item.startMinutes}); //幕布
|
// }else {
|
// data.push({value: item.startMinutes - (vb[index-1].startMinutes+vb[index-1].diff)}); //幕布
|
// }
|
// data.push({value: item.diff}); //内容
|
// })
|
// data;
|
//end
|
|
var recordDom = document.getElementById('record');
|
var myChart = echarts.init(recordDom);
|
this.recordOptionLog.yAxis.data = yAxis; //y轴数据
|
var series0data = []; //从什么时候开始的
|
var series1data = []; //数值是几，如(20，就是从4开始，20格数据)
|
console.log(JSON.stringify(res.data.records))
|
// res.data.records.forEach(item=> {
|
// item.statusRecordList.forEach(item1=> {
|
|
// })
|
// })
|
|
myChart.setOption(this.recordOptionLog);
|
// 检查是否存在id为'parentNodeDom'的DOM元素,有就先删除
|
var parentNodeDom = document.getElementById('parentNodeDom');
|
if (parentNodeDom) {
|
parentNodeDom.parentNode.removeChild(parentNodeDom);
|
}
|
this.domlocation(); //重新添加，计算位置
|
this.total = res.data.total;
|
}
|
})
|
},
|
domlocation() {
|
var recordDom = document.getElementById('record');
|
//添加dom，定位
|
var parentNodeDom = document.createElement('div');
|
parentNodeDom.id="parentNodeDom";
|
recordDom.appendChild(parentNodeDom);
|
for(var i=0;i<this.recordOptionLog.yAxis.data.length;i++) {
|
var dom = document.createElement('span');
|
dom.className = "domSpan spanIndex" + i;
|
if(this.recordOptionLog.yAxis.data.length == 1) {
|
dom.style.top = 220 + "px"; //定位top
|
}
|
if(this.recordOptionLog.yAxis.data.length == 2) {
|
if(i==0){
|
dom.style.top = 325 + "px";
|
}else if(i==1){
|
dom.style.top = 116 + "px"; //定位top
|
}
|
}
|
if(this.recordOptionLog.yAxis.data.length == 3) {
|
if(i==0){
|
dom.style.top = 360 + "px";
|
}else if(i==1){
|
dom.style.top = 220 + "px"; //定位top
|
}else if(i==2){
|
dom.style.top = 80 + "px"; //定位top
|
}
|
}
|
if(this.recordOptionLog.yAxis.data.length == 4) {
|
if(i==0){
|
dom.style.top = 377 + "px";
|
}else if(i==1){
|
dom.style.top = 272 + "px"; //定位top
|
}else if(i==2){
|
dom.style.top = 168 + "px"; //定位top
|
}else if(i==3){
|
dom.style.top = 62 + "px"; //定位top
|
}
|
}
|
if(this.recordOptionLog.yAxis.data.length == 5) {
|
if(i==0){
|
dom.style.top = 387 + "px";
|
}else if(i==1){
|
dom.style.top = 303 + "px"; //定位top
|
}else if(i==2){
|
dom.style.top = 220 + "px"; //定位top
|
}else if(i==3){
|
dom.style.top = 135 + "px"; //定位top
|
}else if(i==4){
|
dom.style.top = 51 + "px"; //定位top
|
}
|
}
|
if(this.recordOptionLog.yAxis.data.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
|
parentNodeDom.appendChild(dom);
|
}
|
},
|
init() {
|
this.time = [moment().subtract(2, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')];
|
this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'}); //日期sort
|
this.getachievements(); //采集状态or人工反馈状态
|
this.getCharts();
|
},
|
timeBtnChange() {
|
|
},
|
query() {
|
this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'});
|
//this.getCharts();
|
console.log(this.treeChecked,2)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.aposcope-main {
|
display: flex;
|
min-height: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 8px;
|
}
|
.aposcope-left {
|
position: relative;
|
width: 240px;
|
margin-right: 8px;
|
padding: 4px;
|
height: 100%;
|
background-color: #fff;
|
border-radius: 2px;
|
overflow: hidden;
|
}
|
.aposcope-right {
|
flex: 1;
|
padding: 8px;
|
background-color: #fff;
|
}
|
.left-title {
|
font-size: 16px;
|
text-align: center;
|
height: 38px;
|
line-height: 38px;
|
border-bottom: 1px solid #e2e2e2;
|
background-color: #409eff;
|
color: #fff;
|
border-radius: 2px 2px 0 0;
|
}
|
.left-title-col {
|
margin-bottom: 8px;
|
font-size: 14px;
|
margin-top: 8px;
|
}
|
.footer {
|
padding: 0px 32px;
|
border-radius: 0 0 2px 2px;
|
background: #fff;
|
box-shadow: -1px 0 3px rgba(92, 92, 92, .16);
|
height: 48px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
padding: 0 10px;
|
box-sizing: border-box;
|
z-index: 99;
|
}
|
.MYTree {
|
height: calc(100% - 200px);
|
overflow: hidden;
|
overflow-y: auto;
|
}
|
.status {
|
display: flex;
|
align-items: start;
|
flex-direction: column;
|
justify-content: start;
|
margin: 20px 0 8px;
|
position: relative;
|
width: 100%;
|
font-size: 16px;
|
cursor: pointer;
|
}
|
.status-wrap.align-left, .status-wrap:first-child {
|
padding-left: 24px;
|
}
|
.status-wrap {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: start;
|
}
|
.collect-status {
|
color: #409eff;
|
margin-right: 16px;
|
font-size: 14px;
|
}
|
.status-box {
|
margin: 0 8px;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
}
|
.status-color {
|
width: 40px;
|
height: 15px;
|
border-radius: 2px;
|
margin-right: 8px;
|
}
|
.status-wrap .status-con {
|
display: flex;
|
flex: 1;
|
flex-wrap: wrap;
|
}
|
.status-wrap /deep/ .el-checkbox.el-checkbox--large {
|
color: #3b8e8e;
|
}
|
.pagination {
|
text-align: right;
|
display: flex;
|
justify-content: end;
|
}
|
#record {
|
position: relative;
|
}
|
#record /deep/ .domSpan {
|
display: inline-block;
|
width: 70px;
|
height: 20px;
|
background: green;
|
position: absolute;
|
cursor: pointer;
|
}
|
</style>
|
