<template>
|
<div id="warehose">
|
<div class="title pointer margin-bottom" @click="clickFullscreen">
|
<div class="bg1"></div>
|
<div class="bg2"></div>
|
<p class="headline">智能仓库入库看板</p>
|
</div>
|
<div class="width98 height-calc140 flex justify-between margin-auto margin-top2 overflow">
|
<div class="width45 height overflowy-auto">
|
<board :boardtitlebg="boardtitlebg" :boardbg="boardbg" :boardlist="boardlist" />
|
</div>
|
<div class="width45 backgroundrgba borderradius" style="height:84vh">
|
<div class="board-title flex align-center">
|
<p class="PrintTitleInfo relative padding-left">入库任务</p>
|
<p class="padding-left">
|
<count-to :startVal="startVal" :endVal="pagesize" :duration="3000"></count-to>
|
条
|
</p>
|
</div>
|
<div class="table-height">
|
<warehouse-table :tableHead="tableHead" :tableData="tableData" @paging="paging" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import screenfull from "screenfull";
|
import { getDate, GetDateStr, GetTimeStr } from "@/utils/date";
|
import board from "./largeborard";
|
import WarehouseTable from "./warehousetable.vue";
|
import countTo from "vue-count-to";
|
const { enterLook } = require("./boardtable");
|
export default {
|
data() {
|
return {
|
boardtitlebg: "rgba(0,0,0,0.8);box-shadow:0px 0px 4px #345;color:#fff",
|
boardbg: "rgba(0,0,0,0.3);box-shadow:0px 0px 4px #345;color:#fff",
|
startVal: 0,
|
boardlist: {},
|
tableData: [
|
{
|
userTrueName: "20201023005",
|
deptName: "3",
|
roleName: "1分钟"
|
},
|
{
|
userTrueName: "20201023005",
|
deptName: "3",
|
roleName: "1分钟"
|
},
|
{
|
userTrueName: "20201023005",
|
deptName: "3",
|
roleName: "1分钟"
|
},
|
{
|
userTrueName: "20201023005",
|
deptName: "3",
|
roleName: "1分钟"
|
},
|
{
|
userTrueName: "20201023005",
|
deptName: "3",
|
roleName: "1分钟"
|
}
|
],
|
pagesize: 20, //每页多少条
|
clearInervaltim: null
|
};
|
},
|
computed: {
|
tableHead() {
|
return enterLook;
|
}
|
},
|
components: { board, WarehouseTable, countTo },
|
mounted() {
|
this.getIntTaskList();
|
this.clearInervaltim = setInterval(() => {
|
this.getIntTaskList();
|
}, 5000);
|
},
|
methods: {
|
clickFullscreen() {
|
screenfull.toggle();
|
},
|
//滚动分页
|
paging() {
|
console.log("滚动条，滚动到底后触发，可调节滚动距离触发");
|
},
|
getIntTaskList() {
|
const url = "/api/task/getEnterTaskList";
|
const params = "";
|
// this.boardlist = [];
|
var callback = res => {
|
if (res.result !== true) {
|
return; //this.$message.error("获取设备信息失败");
|
}
|
// this.boardlist = res.data.boardlist;
|
let data = res.data.boardlist;
|
this.boardlist = [
|
{
|
title: data.bigInStock.title,
|
dataList: data.bigInStock.dataList
|
},
|
{
|
title: data.smallInStock.title,
|
dataList: data.smallInStock.dataList
|
}
|
];
|
|
this.tableData = res.data.inTaskListInfo;
|
this.pagesize = this.tableData.length;
|
};
|
this.common.ajax(url, params, callback, false);
|
}
|
///
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
// @import url("../../styles/didproject.scss");
|
#warehose {
|
width: 100%;
|
height: 100vh;
|
margin-bottom: 2%;
|
overflow: hidden;
|
background: linear-gradient(165deg, #294f80, #3d256b, #1c1636);
|
.title {
|
position: relative;
|
width: 100%;
|
height: 80px;
|
color: #fff;
|
text-align: center;
|
font-size: 2rem;
|
.bg1 {
|
position: absolute;
|
top: 0;
|
width: 100%;
|
height: 40px;
|
background: rgba(0, 0, 0, 0.3);
|
}
|
.bg2 {
|
position: absolute;
|
left: 50%;
|
bottom: 0;
|
width: 50%;
|
// height: 40px;
|
transform: translateX(-50%);
|
border-right: 40px solid rgba(0, 0, 0, 0);
|
border-top: 40px solid rgba(0, 0, 0, 0.3);
|
border-left: 40px solid rgba(0, 0, 0, 0);
|
}
|
.headline {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
}
|
.board-title {
|
width: 100%;
|
height: 45px;
|
color: #fff;
|
border-bottom: 1px solid #345;
|
box-shadow: 0 1px 3px 0 #345;
|
background: rgba(0, 0, 0, 0.8);
|
.PrintTitleInfo {
|
margin-left: 10px;
|
&::after {
|
content: "";
|
position: absolute;
|
top: 0;
|
left: 0;
|
height: 20px;
|
width: 4px;
|
background: #2a33ff;
|
}
|
}
|
.board-button {
|
padding: 10px 30px;
|
border-radius: 8px;
|
}
|
.passbg {
|
color: #fff;
|
background: #409eff;
|
}
|
.notgobg {
|
color: #fff;
|
background: #e6a23c;
|
}
|
}
|
.table-height {
|
height: calc(100% - 80px);
|
width: 98%;
|
margin: 2% auto;
|
}
|
::-webkit-scrollbar-track {
|
background: unset !important;
|
}
|
}
|
</style>
|
