<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-04-26 09:36:18
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-11-08 16:34:22
|
* @FilePath: /smart-web/src/views/mdc/status-record.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<el-main style="height: 100%;">
|
<el-card shadow="never" style="height: 100%;" body-style="height: 100%;padding: 0;">
|
<el-container style="height: 100%;">
|
<el-aside width="300px" style="height: 100%;">
|
<el-container>
|
<!-- <div class="left-title">查询条件</div> -->
|
<el-main style="padding: 20px;">
|
<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 getAll v-model="treeChecked" show-checkbox class="MYTree-content"></MYTree>
|
</div>
|
</el-main>
|
<el-footer>
|
<el-button @click="query" type="primary">查询</el-button>
|
<el-button @click="exportData">导出</el-button>
|
</el-footer>
|
</el-container>
|
</el-aside>
|
<el-container>
|
<el-main>
|
<el-tabs tab-position="top" v-model="activeName" type="card" @tab-change="tabChange">
|
<el-tab-pane label="按日期查看" name="shift">
|
<el-button-group>
|
<el-button @click="changeTab(item)" :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="humanFeedback" label="人工反馈状态" size="large" @change="humanFeedbackChange" />
|
<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>
|
<!-- collectionstatus 反馈状态
|
date 日期
|
workstationInfoList 工位list -->
|
<record-charts-by-date :achievements="allwcs" :date="date" :workstationInfoList="workstationInfoList" v-if="date != ''" ref="chart01" :humanFeedback="humanFeedback"></record-charts-by-date>
|
</el-tab-pane>
|
<el-tab-pane label="按工位查看" name="time">
|
<div class="fact-analysis-realtim">
|
<div class="wimi-empty" style="background-color: rgb(255, 255, 255);" v-show="isshowempty">
|
<div class="empty-description">
|
<div>暂无数据</div>
|
</div>
|
</div>
|
<div v-show="!isshowempty">
|
<el-button-group>
|
<el-button @click="changeTabGongwei(item)" :type="btnGongweiListActive == item.id ? 'primary' : ''" v-for="item in btnGongweiList" :key="item.id" size="small">{{item.name }}</el-button>
|
</el-button-group>
|
<div class="status">
|
<div class="status-wrap align-left">
|
<div class="feed-button" @click="table_edit">状态反馈</div>
|
<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="humanFeedback" 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>
|
<!-- setWork 入参 -->
|
<record-charts-by-workstation :setWork="setWork" :select="workSelect" :achievements="allwcs" ref="chart02"></record-charts-by-workstation>
|
</div>
|
</div>
|
<save-dialog v-if="dialog.save" ref="saveDialog" @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog>
|
</el-tab-pane>
|
</el-tabs>
|
</el-main>
|
</el-container>
|
</el-container>
|
</el-card>
|
</el-main>
|
</template>
|
|
<script>
|
import saveDialog from './add-station-status'
|
import moment from 'moment';
|
import MYTree from './MYTree.vue';
|
import recordChartsByDate from './components/recordChartsByDate.vue';
|
import recordChartsByWorkstation from './components/recordChartsByWorkstation.vue';
|
export default {
|
components: {
|
MYTree,
|
recordChartsByDate,
|
recordChartsByWorkstation,
|
saveDialog
|
},
|
watch: {
|
treeChecked(select) {
|
console.log(select,111)
|
var arr = [];
|
select.forEach(item=> {
|
arr.push({id: item.id,name: item.code})
|
})
|
this.select = arr;
|
}
|
},
|
data() {
|
return {
|
isshowempty: true,
|
dialog: {
|
save: false
|
},
|
workSelect: [],
|
select: [],
|
workstationInfoList: [],
|
date: "",
|
humanFeedback: true,
|
btnListActive: '',
|
btnGongweiListActive: "",
|
btnList: [],
|
btnGongweiList: [],
|
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: [],
|
workstationId: "",
|
setWork: {},
|
allwcs: []
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
this.date = moment().format('YYYY-MM-DD');
|
this.init();
|
},
|
methods: {
|
humanFeedbackChange(falg) {
|
this.$refs.chart01.getCharts();
|
},
|
addfeedbackSuccess() {
|
var workstationName = "";
|
this.btnGongweiList.forEach(item=> {
|
if(item.id == this.btnGongweiListActive) {
|
workstationName = item.name;
|
}
|
})
|
this.setWork = {
|
endDate: this.time[1],
|
startDate: this.time[0],
|
humanFeedback: this.humanFeedback,
|
machineFeedback: true,
|
workstationId: this.lastLevelId,
|
workstationName: workstationName
|
}
|
},
|
table_edit(){
|
this.dialog.save = true
|
this.$nextTick(() => {
|
this.$refs.saveDialog.open('edit').setData(this.lastLevelId);
|
})
|
},
|
tabChange(val) {
|
if(val == "shift") { //按日期查看
|
this.$refs.chart01.getCharts();
|
}else if(val == "time") { //按工位查看
|
if(this.btnGongweiList.length != 0) { //有选工位才能展示工位
|
this.btnGongweiListActive = this.btnGongweiList[0].id; //工位
|
this.lastLevelId = this.btnGongweiListActive;
|
this.setWork = { //工位
|
endDate: this.time[1],
|
startDate: this.time[0],
|
humanFeedback: this.humanFeedback,
|
machineFeedback: true,
|
workstationId: this.select[0].id,
|
workstationName: this.btnGongweiList[0].name
|
}
|
this.workSelect = this.select;
|
this.$refs.chart02.getCharts();
|
}
|
}
|
},
|
exportData() { //导出
|
var obj = {
|
endTime: this.time[1],
|
startTime: this.time[0],
|
workstationInfoList: this.workstationInfoList
|
}
|
this.$HTTP.post(`/api/mdc/status-record/excel/export`,obj).then(res=> {
|
if(res.code == 200) {
|
window.open(res.data.link);
|
}
|
})
|
},
|
changeTab(item) {
|
this.btnListActive = item.id;
|
this.date = item.id;
|
this.$nextTick(()=> {
|
this.$refs.chart01.getCharts();
|
})
|
},
|
changeTabGongwei(item) { //按工位查询
|
this.btnGongweiListActive = item.id;
|
this.lastLevelId = this.btnGongweiListActive;
|
var workstationName = "";
|
this.btnGongweiList.forEach(item=> {
|
if(item.id == this.btnGongweiListActive) {
|
workstationName = item.name;
|
}
|
})
|
this.setWork = {
|
endDate: this.time[1],
|
startDate: this.time[0],
|
humanFeedback: this.humanFeedback,
|
machineFeedback: true,
|
workstationId: item.id,
|
workstationName: workstationName
|
}
|
this.$nextTick(()=> {
|
this.$refs.chart02.getCharts();
|
})
|
},
|
getachievements() { //班次状态记录采集状态
|
this.$HTTP.get(`/api/smis/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;
|
this.allwcs = res.data;
|
}
|
})
|
},
|
getTime(data) {
|
return new Promise(resolve=> {
|
this.$HTTP.post('/api/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
|
resolve();
|
}
|
})
|
})
|
},
|
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人工反馈状态
|
},
|
timeBtnChange() {
|
|
},
|
query() {
|
this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'}).then(()=> {
|
this.workstationInfoList = this.select;
|
this.btnGongweiList = this.select; //工位
|
this.date = this.btnList[0].id;
|
this.$nextTick(()=> { //按日期查看
|
this.$refs.chart01.getCharts();
|
})
|
//按工位查看
|
if(this.btnGongweiList.length != 0) { //有选工位才能展示工位
|
this.isshowempty = false;
|
this.btnGongweiListActive = this.btnGongweiList[0].id; //工位
|
this.lastLevelId = this.btnGongweiListActive;
|
this.setWork = { //工位
|
endDate: this.time[1],
|
startDate: this.time[0],
|
humanFeedback: this.humanFeedback,
|
machineFeedback: true,
|
workstationId: this.select[0].id,
|
workstationName: this.btnGongweiList[0].name
|
}
|
this.workSelect = this.select;
|
this.$nextTick(()=> {
|
this.$refs.chart02.getCharts();
|
})
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.aposcope-main {
|
display: flex;
|
min-height: 100%;
|
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: 600px;
|
}
|
.MYTree-content {
|
height: 100%;
|
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: #409eff;
|
}
|
.fact-analysis-realtim {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
justify-content: flex-start;
|
align-content: flex-start;
|
box-sizing: border-box;
|
background: #fff;
|
height: 500px;
|
}
|
.wimi-empty {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
border-radius: 2px;
|
flex-direction: column;
|
flex-wrap: nowrap;
|
align-content: center;
|
justify-content: center;
|
align-items: center;
|
}
|
.empty-description {
|
margin-bottom: 20px;
|
font-size: 14px;
|
color: #5e6d82;
|
margin-top: -16px;
|
line-height: 28px;
|
}
|
.feed-button {
|
position: absolute;
|
right: 10px;
|
top: -2px;
|
color: #409eff;
|
cursor: pointer;
|
}
|
.aposcope-right /deep/ .el-tabs__content {
|
overflow: visible;
|
}
|
</style>
|
