<template>
|
<div id="app">
|
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="0">
|
<div class="layout">
|
|
<Head ref="head" />
|
<router-view ref="router-view" class="router-view" />
|
</div>
|
<Alert ref='alert'></Alert>
|
<Scan ref='scan'></Scan>
|
<!-- <input
|
autocomplete="off"
|
id="scanInput"
|
v-model="scanInput"
|
type="text"
|
ref="scanInput"
|
@keyup.enter="handleScanVal"
|
@blur="$event.target.focus()"
|
style="width: 0; height: 0; opacity: 0;"
|
> -->
|
<transition name="zoomAnimate">
|
<div v-show="showScheduleList" class="scheduleList">
|
<div class="top">
|
<div class="title">排班表</div>
|
<div class="close link" @click="showScheduleList = false"><i class="close iconfont icon-shanchu" /></div>
|
</div>
|
<div class="content scrollList">
|
<div class="row">
|
<div class="userName">姓名</div>
|
<div class="scheduleDate">排班日期</div>
|
<div class="relList">
|
<div class="relListItem">计划任务</div>
|
<div class="relListItem">流程节点</div>
|
<div class="relListItem">工作内容</div>
|
</div>
|
</div>
|
<div class="row" v-for="item, index in scheduleListData" :key="index">
|
<div class="userName">{{ item.userName }}</div>
|
<div class="scheduleDate">{{ item.scheduleDate }}</div>
|
<div class="relListRow">
|
<div class="relList even" v-for="i, j in item.relList" :key="j">
|
<div class="relListItem">{{ i.planName }}</div>
|
<div class="relListItem">{{ i.nodeName }}</div>
|
<div class="relListItem">{{ i.workDetails }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</transition>
|
</ScaleBox>
|
</div>
|
</template>
|
|
<script>
|
import Vue from 'vue';
|
import Alert from "@/components/Alert.vue";
|
import Scan from "@/components/Scan.vue";
|
import Head from "@/components/Head.vue";
|
import ScaleBox from "vue2-scale-box";
|
|
export default {
|
components: {
|
Head,
|
Alert,
|
Scan,
|
ScaleBox,
|
},
|
data() {
|
return {
|
scanInput: '',
|
keyupLastTime: null,
|
name: null,
|
showScheduleList: false,
|
scheduleListData: [],
|
};
|
},
|
computed: {
|
},
|
watch: {
|
},
|
mounted() {
|
// 注册事件总线
|
Vue.prototype.$alert = this.$refs.alert;
|
Vue.prototype.$scan = this.$refs.scan;
|
// this.$refs.scanInput.focus()
|
// 自动监听键盘事件
|
document.onkeyup = (e) => {
|
this.handleKeyUp(e)
|
}
|
},
|
methods: {
|
// 键盘事件处理
|
handleKeyUp: function (e) {
|
let gap = 0;
|
if (this.keyupLastTime) {
|
gap = new Date().getTime() - this.keyupLastTime
|
if (gap > 30) {
|
gap = 0
|
this.scanInput = ''
|
}
|
}
|
this.keyupLastTime = new Date().getTime()
|
if (e.key != "Process" && gap < 50) {
|
if (e.key.trim().length == 1) {
|
this.scanInput += e.key
|
} else if (e.key == "Enter") {
|
if (this.scanInput) {
|
this.handleScanVal()
|
}
|
}
|
}
|
},
|
// 处理扫描结果
|
handleScanVal: function () {
|
if (this.scanInput == '102009') {
|
location.reload()
|
return
|
}
|
if (this.scanInput == '102010') {
|
this.onShowScheduleList()
|
return
|
}
|
if (this.showScheduleList) {
|
return
|
}
|
console.log('[app] 事件总线发送 =>', this.scanInput)
|
this.$bus.$emit('scanResult', this.scanInput)
|
this.scanInput = ''
|
},
|
// 显示排班表
|
onShowScheduleList: function () {
|
this.showScheduleList = true
|
this.onGetScheduleListData()
|
},
|
// 获取排班表数据
|
onGetScheduleListData: function () {
|
var that = this;
|
that
|
.$axiosAdmin({
|
method: "post",
|
url: "production/schedule/selectAll",
|
data: JSON.stringify({}),
|
})
|
.then((res) => {
|
if (res.success) {
|
this.scheduleListData = res.content
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.icon,
|
.iconfont {
|
font-family: "iconfont" !important;
|
font-size: 16px;
|
font-style: normal;
|
-webkit-font-smoothing: antialiased;
|
-webkit-text-stroke: 0.2px;
|
-moz-osx-font-smoothing: grayscale;
|
}
|
|
* {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
}
|
|
body {
|
background-color: #000;
|
color: #fff;
|
}
|
|
.layout {
|
width: 100%;
|
height: 100%;
|
padding: 30px;
|
background-color: #002244;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
|
.router-view {
|
flex-grow: 1;
|
}
|
}
|
|
.scrollList {
|
overflow: scroll;
|
scrollbar-width: none;
|
/* Firefox */
|
-ms-overflow-style: none;
|
/* IE 10+ */
|
}
|
|
.scrollList::-webkit-scrollbar {
|
display: none;
|
/* Chrome Safari */
|
}
|
|
.light {
|
background-color: #0089ff !important;
|
}
|
|
.green {
|
background-color: #336666 !important;
|
}
|
|
.blue {
|
background-color: #10477e !important;
|
}
|
|
.red {
|
background-color: #663366 !important;
|
}
|
|
.yellow {
|
background-color: #999933 !important;
|
}
|
|
.link {
|
cursor: pointer
|
}
|
|
.scheduleList {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-color: #002244;
|
z-index: 999;
|
display: flex;
|
flex-direction: column;
|
|
.top {
|
height: 80px;
|
line-height: 80px;
|
padding-left: 30px;
|
background-color: #003366;
|
font-size: 30px;
|
|
.close {
|
position: absolute;
|
display: block;
|
width: 80px;
|
height: 80px;
|
line-height: 80px;
|
text-align: center;
|
font-size: 30px;
|
right: 0;
|
top: 0;
|
color: #fff;
|
}
|
}
|
|
.content {
|
box-sizing: border-box;
|
font-size: 24px;
|
overflow: scroll;
|
scrollbar-width: none;
|
/* Firefox */
|
-ms-overflow-style: none;
|
/* IE 10+ */
|
}
|
|
.row {
|
box-sizing: border-box;
|
line-height: 100px;
|
display: flex;
|
border-bottom: 1px solid #fff;
|
|
.userName {
|
padding-left: 30px;
|
box-sizing: border-box;
|
width: 200px;
|
border-right: 1px solid #fff;
|
}
|
|
.scheduleDate {
|
text-align: center;
|
width: 300px;
|
border-right: 1px solid #fff;
|
}
|
|
.relList {
|
flex-grow: 1;
|
display: flex;
|
justify-content: space-around;
|
border-bottom: 1px solid #fff;
|
|
.relListItem {
|
width: 100% / 3;
|
padding-left: 30px;
|
}
|
}
|
|
.relListRow {
|
flex-grow: 1;
|
}
|
|
.relList:last-child {
|
border-bottom: none;
|
}
|
}
|
}
|
|
.zoomAnimate-enter-active {
|
animation: bounceIn 0.5s;
|
}
|
|
.zoomAnimate-leave-active {
|
animation: bounceOut 0.2s;
|
}
|
</style>
|
