<template>
|
<div id="index" ref="appRef">
|
<div class="bg">
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
<div v-else class="host-body">
|
<!--头部-->
|
<div class="d-flex jc-center">
|
<dv-decoration-10 class="dv-dec-10" />
|
<div class="d-flex jc-center">
|
<dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
|
<div class="title">
|
<span class="title-text">大数据可视化平台</span>
|
<dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
|
</div>
|
<dv-decoration-8 class="dv-dec-8" :reverse="true" :color="['#568aea', '#000000']" />
|
</div>
|
<dv-decoration-10 class="dv-dec-10-s" />
|
</div>
|
|
<!-- 时间 -->
|
<div class="d-flex jc-between px-2">
|
<div class="d-flex aside-width">
|
<div class="react-left ml-4 react-l-s">
|
<span class="react-before"></span>
|
</div>
|
<div class="react-right ml-3"></div>
|
</div>
|
<div class="d-flex aside-width">
|
<div class="react-right bg-color-blue mr-3"></div>
|
<div class="react-right mr-4 react-l-s">
|
<span class="react-after"></span>
|
<span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
|
</div>
|
</div>
|
</div>
|
|
<!--位置-->
|
<div id="zhu">
|
<div id="taskzhu">
|
<div id="biao">任务</div>
|
<div class="taskk">
|
<div class="taskxu">序号</div>
|
<div class="tasknum">任务号</div>
|
<div class="taskstaus">任务类型</div>
|
<div class="tasktype">任务状态</div>
|
<div class="taskgrade">时间</div>
|
</div>
|
<div class="taskk">
|
<div class="taskxu">1</div>
|
<div class="tasknum"></div>
|
<div class="taskstaus"></div>
|
<div class="tasktype"></div>
|
<div class="taskgrade"></div>
|
</div>
|
<div class="taskk">
|
<div class="taskxu">2</div>
|
<div class="tasknum"></div>
|
<div class="taskstaus"></div>
|
<div class="tasktype"></div>
|
<div class="taskgrade"></div>
|
</div>
|
<div class="taskk">
|
<div class="taskxu">3</div>
|
<div class="tasknum"></div>
|
<div class="taskstaus"></div>
|
<div class="tasktype"></div>
|
<div class="taskgrade"></div>
|
</div>
|
<div class="taskk">
|
<div class="taskxu">4</div>
|
<div class="tasknum"></div>
|
<div class="taskstaus"></div>
|
<div class="tasktype"></div>
|
<div class="taskgrade"></div>
|
</div>
|
<div class="taskk">
|
<div class="taskxu">5</div>
|
<div class="tasknum"></div>
|
<div class="taskstaus"></div>
|
<div class="tasktype"></div>
|
<div class="taskgrade"></div>
|
</div>
|
<div class="taskk">
|
<div class="taskxu">6</div>
|
<div class="tasknum"></div>
|
<div class="taskstaus"></div>
|
<div class="tasktype"></div>
|
<div class="taskgrade"></div>
|
</div>
|
</div>
|
<div id="materielzhu">
|
<div class="zhuk">
|
<div class="biaot">库位信息</div>
|
<div class="xian" style="marginTop: 8%;">
|
<div class="name">空位：</div>
|
<div class="shu"></div>
|
</div>
|
<div class="xian">
|
<div class="name">空桶：</div>
|
<div class="shu"></div>
|
</div>
|
<div class="xian">
|
<div class="name">有货：</div>
|
<div class="shu"></div>
|
</div>
|
</div>
|
<div class="zhuk">
|
<div class="biaot" style="marginTop: 15%;">今日执行任务次数</div>
|
<div class="xian" style="marginTop: 11%;">
|
<div class="name">入库：</div>
|
<div class="shu"></div>
|
</div>
|
<div class="xian">
|
<div class="name">出库：</div>
|
<div class="shu"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div id="zhu" style="opacity: 0.1;background: white;position: absolute;"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import drawMixin from "../utils/drawMixin";
|
import { formatTime } from "../utils/index.js";
|
|
export default {
|
mixins: [drawMixin],
|
data() {
|
return {
|
timing: null,
|
loading: true,
|
dateDay: null,
|
dateYear: null,
|
dateWeek: null,
|
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
|
};
|
},
|
components: {},
|
mounted() {
|
this.timeFn();
|
this.cancelLoading();
|
this.selecttask();
|
},
|
beforeDestroy() {
|
clearInterval(this.timing);
|
},
|
methods: {
|
timeFn() {
|
this.timing = setInterval(() => {
|
this.dateDay = formatTime(new Date(), "HH: mm: ss");
|
this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
|
this.dateWeek = this.weekday[new Date().getDay()];
|
}, 1000);
|
},
|
cancelLoading() {
|
setTimeout(() => {
|
this.loading = false;
|
}, 500);
|
},
|
selecttask() {
|
setInterval(() => {
|
//查询任务
|
this.$http
|
.post("api/Task/selectTask/", {
|
rows: 6
|
})
|
.then(x => {
|
if (x.status == 200) {
|
let tasknum = document.getElementsByClassName("tasknum");
|
let taskstaus = document.getElementsByClassName("taskstaus");
|
let tasktype = document.getElementsByClassName("tasktype");
|
let taskgrade = document.getElementsByClassName("taskgrade");
|
|
tasknum[1].innerHTML = x.data[0].taskNum;
|
taskstaus[1].innerHTML = this.taskstaus(x.data[0].taskState);
|
tasktype[1].innerHTML = this.taskType(x.data[0].taskType);
|
taskgrade[1].innerHTML = x.data[0].createDate;
|
tasknum[2].innerHTML = x.data[1].taskNum;
|
taskstaus[2].innerHTML = this.taskstaus(x.data[1].taskState);
|
tasktype[2].innerHTML = this.taskType(x.data[1].taskType);
|
taskgrade[2].innerHTML = x.data[1].createDate;
|
tasknum[3].innerHTML = x.data[2].taskNum;
|
taskstaus[3].innerHTML = this.taskstaus(x.data[2].taskState);
|
tasktype[3].innerHTML = this.taskType(x.data[2].taskType);
|
taskgrade[3].innerHTML = x.data[2].createDate;
|
tasknum[4].innerHTML = x.data[3].taskNum;
|
taskstaus[4].innerHTML = this.taskstaus(x.data[3].taskState);
|
tasktype[4].innerHTML = this.taskType(x.data[3].taskType);
|
taskgrade[4].innerHTML = x.data[3].createDate;
|
tasknum[5].innerHTML = x.data[4].taskNum;
|
taskstaus[5].innerHTML = this.taskstaus(x.data[4].taskState);
|
tasktype[5].innerHTML = this.taskType(x.data[4].taskType);
|
taskgrade[5].innerHTML = x.data[4].createDate;
|
tasknum[6].innerHTML = x.data[5].taskNum;
|
taskstaus[6].innerHTML = this.taskstaus(x.data[5].taskState);
|
tasktype[6].innerHTML = this.taskType(x.data[5].taskType);
|
taskgrade[6].innerHTML = x.data[5].createDate;
|
}
|
});
|
this.$http
|
.post("api/LocationInfo/LocationNum/", {
|
rows: 6
|
})
|
.then(x => {
|
if (x.status == 200) {
|
let shu=document.getElementsByClassName("shu");
|
shu[0].innerHTML=x.data.vacancy;
|
shu[1].innerHTML=x.data.empty;
|
shu[2].innerHTML=x.data.available;
|
}
|
});
|
this.$http
|
.post("api/TaskHty/selectTaskNum/", {
|
rows: 6
|
})
|
.then(x => {
|
console.log(x);
|
if (x.status == 200) {
|
let shu=document.getElementsByClassName("shu");
|
shu[3].innerHTML=x.data.outNum;
|
shu[4].innerHTML=x.data.inNum;
|
}
|
});
|
}, 10000);
|
},
|
taskType(taskType) {
|
let k = "显示异常";
|
if (taskType == 100) {
|
k = "空桶入库";
|
} else if (taskType == 101) {
|
k = "空桶出库";
|
} else if (taskType == 200) {
|
k = "满桶入库";
|
} else if (taskType == 201) {
|
k = "满桶出库";
|
} else if (taskType == 202) {
|
k = "直接出库";
|
}
|
return k;
|
},
|
taskstaus(taskstaus) {
|
let k = "显示异常";
|
if (taskstaus == 100) {
|
k = "新建入库";
|
} else if (taskstaus == 101) {
|
k = "新建出库";
|
} else if (taskstaus == 500) {
|
k = "任务执行中";
|
} else if (taskstaus == 501) {
|
k = "入库放货执行中";
|
} else if (taskstaus == 502) {
|
k = "出库取货执行中";
|
} else if (taskstaus == 1000) {
|
k = "任务完成";
|
}
|
return k;
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
@import "../assets/scss/index.scss";
|
|
#zhu {
|
width: 100%;
|
height: 150vh;
|
float: left;
|
margin-top: 1%;
|
position: relative;
|
border-radius: 10px;
|
}
|
.name{
|
width: 40%;
|
height: 100%;
|
float: left;
|
color: white;
|
font-size: 35px;
|
text-align: right;
|
}
|
.shu {
|
width: 40%;
|
height: 100%;
|
float: left;
|
color: white;
|
font-size: 35px;
|
text-align: center;
|
}
|
.xian {
|
width: 90%;
|
height: 20%;
|
float: left;
|
margin: 2.5% 5%;
|
}
|
.biaot {
|
width: 100%;
|
height: 20%;
|
float: left;
|
text-align: center;
|
line-height: 300%;
|
color: white;
|
font-size: 50px;
|
font-weight: 600;
|
margin-top: 3%;
|
}
|
.taskgrade {
|
width: 35%;
|
height: 100%;
|
float: left;
|
text-align: center;
|
font-size: 30px;
|
line-height: 400%;
|
color: white;
|
}
|
.taskxu,
|
.tasknum,
|
.taskstaus,
|
.tasktype {
|
width: 15%;
|
height: 100%;
|
float: left;
|
text-align: center;
|
font-size: 30px;
|
line-height: 400%;
|
color: white;
|
}
|
.taskk {
|
width: 95%;
|
height: 6.5%;
|
float: left;
|
//background: white;
|
margin: 2% 2.5%;
|
border-radius: 5px;
|
}
|
#biao {
|
width: 100%;
|
height: 7%;
|
float: left;
|
font-size: 50px;
|
text-align: center;
|
line-height: 300%;
|
font-weight: 600;
|
margin-top: 5%;
|
}
|
#taskzhu {
|
width: 48%;
|
float: left;
|
height: 100%;
|
}
|
#materielzhu {
|
width: 48%;
|
float: left;
|
height: 100%;
|
margin-left: 4%;
|
}
|
.zhuk {
|
width: 100%;
|
float: left;
|
height: 30%;
|
margin-top: 2%;
|
border-radius: 5px;
|
}
|
</style>
|
