<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="shang">
|
<div class="skuang" style="marginLeft: 0%;">
|
<div class="stu" id="kongwei"></div>
|
<div class="sti">空位</div>
|
<div class="sxian"></div>
|
</div>
|
<div class="skuang">
|
<div class="stu" id="kongtong"></div>
|
<div class="sti">空桶</div>
|
<div class="sxian"></div>
|
</div>
|
<div class="skuang">
|
<div class="stu" id="mantong"></div>
|
<div class="sti">满桶</div>
|
<div class="sxian"></div>
|
</div>
|
</div>
|
<div id="zhong">
|
<div class="zkuang" style="marginLeft: 0%;">
|
<div class="taskkuang">库存分类占比</div>
|
<div id="kuk">
|
<div id="kuyuan"></div>
|
</div>
|
<div id="kut">
|
<div class="kutk">
|
<div class="kutkw">空位</div>
|
<div class="kutcolor"></div>
|
</div>
|
<div class="kutk">
|
<div class="kutkw">空桶</div>
|
<div class="kutcolor" style="background: #33FF57;"></div>
|
</div>
|
<div class="kutk">
|
<div class="kutkw">满桶</div>
|
<div class="kutcolor" style="background: #3399FF;"></div>
|
</div>
|
</div>
|
</div>
|
<div class="zkuang">
|
<div class="taskkuang">今日满桶任务统计</div>
|
<div id="tongk">
|
<div class="tongtiao" id="tongout"></div>
|
<div class="tongtiao" id="tongin" style="left: 70%;"></div>
|
<div class="tongtxian"></div>
|
<div class="tongtxian" style="top:50%"></div>
|
<p class="tongtwen">100%</p>
|
<p class="tongtwen" style="top: 46%;">50%</p>
|
<div id="tongxian"></div>
|
<div id="tongtk">
|
<div class="tongtw">出库任务</div>
|
<div class="tongtw" style="margin-left: 20%;">入库任务</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div id="xia">
|
<div class="taskkuang">实时作业任务</div>
|
<div class="taskkuang" style="background: rgba(255, 255, 255, 0.2);">
|
<div class="tnum">任务号</div>
|
<div class="tstatus">任务状态</div>
|
<div class="ttype">任务类型</div>
|
<div class="tpriority">优先级</div>
|
<div class="ttime">时间</div>
|
</div>
|
<div class="taskkuang">
|
<div class="tnum"></div>
|
<div class="tstatus"></div>
|
<div class="ttype"></div>
|
<div class="tpriority"></div>
|
<div class="ttime"></div>
|
</div>
|
<div class="taskkuang">
|
<div class="tnum"></div>
|
<div class="tstatus"></div>
|
<div class="ttype"></div>
|
<div class="tpriority"></div>
|
<div class="ttime"></div>
|
</div>
|
<div class="taskkuang">
|
<div class="tnum"></div>
|
<div class="tstatus"></div>
|
<div class="ttype"></div>
|
<div class="tpriority"></div>
|
<div class="ttime"></div>
|
</div>
|
<div class="taskkuang">
|
<div class="tnum"></div>
|
<div class="tstatus"></div>
|
<div class="ttype"></div>
|
<div class="tpriority"></div>
|
<div class="ttime"></div>
|
</div>
|
</div>
|
</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 && x.data.length != 0) {
|
//console.log(x);
|
|
let tasknum = document.getElementsByClassName("tnum");
|
let taskstaus = document.getElementsByClassName("tstatus");
|
let tasktype = document.getElementsByClassName("ttype");
|
let taskgrade = document.getElementsByClassName("ttime");
|
let taskpriority = document.getElementsByClassName("tpriority");
|
|
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);
|
taskpriority[1].innerHTML = x.data[0].grade;
|
taskgrade[1].innerHTML = x.data[0].createDate;
|
if (x.data.length >= 2) {
|
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);
|
taskpriority[2].innerHTML = x.data[1].grade;
|
taskgrade[2].innerHTML = x.data[1].createDate;
|
}
|
if (x.data.length >= 3) {
|
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);
|
taskpriority[3].innerHTML = x.data[2].grade;
|
taskgrade[3].innerHTML = x.data[2].createDate;
|
}
|
if (x.data.length >= 4) {
|
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);
|
taskpriority[4].innerHTML = x.data[3].grade;
|
taskgrade[4].innerHTML = x.data[3].createDate;
|
}
|
}
|
});
|
this.$http
|
.post("api/LocationInfo/LocationNum/", {
|
rows: 6
|
})
|
.then(x => {
|
if (x.status == 200) {
|
//头部数量显示
|
let shu = document.getElementsByClassName("sxian");
|
shu[0].innerHTML = x.data.vacancy;
|
shu[1].innerHTML = x.data.empty;
|
shu[2].innerHTML = x.data.available;
|
|
//中部百分比
|
//计算占比
|
let zong = 506;
|
let wei = ((x.data.vacancy / zong) * 100).toFixed(2) + "%";
|
let kong =
|
(((x.data.empty + x.data.available) / zong) * 100).toFixed(2) +
|
"%";
|
//显示
|
let yuan = document.getElementById("kuyuan");
|
yuan.style.background = `conic-gradient(#ff5733 0% ${wei}, #33ff57 ${wei} ${kong}, #3399ff ${kong} 100%)`;
|
}
|
});
|
this.$http
|
.post("api/TaskHty/selectTaskNum/", {
|
rows: 6
|
})
|
.then(x => {
|
if (x.status == 200) {
|
let tongout = document.getElementById("tongout");
|
let tongin = document.getElementById("tongin");
|
|
//计算占比
|
let zong = x.data.inNum + x.data.outNum;
|
let out = ((x.data.outNum / zong) * 100).toFixed(2) + "%";
|
let ins = ((x.data.inNum / zong) * 100).toFixed(2) + "%";
|
//向上拉伸
|
//tongout.style.transform = `translateY(-100%)`;
|
tongout.style.height = out;
|
tongin.style.height = ins;
|
}
|
});
|
}, 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";
|
|
.kutcolor {
|
width: 30%;
|
height: 60%;
|
float: left;
|
background: #ff5733;
|
margin-top: -6%;
|
}
|
.kutkw {
|
width: 50%;
|
height: 80%;
|
float: left;
|
font-weight: 600;
|
font-size: 20px;
|
}
|
.kutk {
|
width: 80%;
|
height: 25%;
|
float: left;
|
margin-top: 10%;
|
}
|
#kuyuan {
|
width: 87%;
|
height: 100%;
|
border-radius: 50%;
|
background: conic-gradient(#ff5733 0% 20%, #33ff57 20% 60%, #3399ff 60% 100%);
|
clip-path: circle(50% at 50% 50%);
|
}
|
#kuyuan::before {
|
content: "";
|
position: absolute;
|
top: 50%;
|
left: 44%;
|
width: 62%;
|
height: 70%;
|
border-radius: 50%;
|
background: rgb(255, 255, 255);
|
transform: translate(-50%, -50%);
|
}
|
#kut {
|
width: 20%;
|
height: 80%;
|
float: left;
|
}
|
#kuk {
|
width: 32%;
|
height: 80%;
|
margin: 0% 10% 0% 30%;
|
float: left;
|
position: relative;
|
}
|
.tongtwen {
|
width: 100%;
|
height: 10%;
|
position: absolute;
|
left: -14%;
|
top: -4%;
|
}
|
.tongtxian {
|
width: 100%;
|
height: 1px;
|
position: absolute;
|
background: rgba(255, 255, 255, 0.1);
|
}
|
.tongtw {
|
width: 30%;
|
height: 100%;
|
float: left;
|
margin-left: 10%;
|
text-align: center;
|
font-size: 20px;
|
}
|
#tongtk {
|
width: 100%;
|
height: 20%;
|
float: left;
|
position: absolute;
|
top: 110%;
|
}
|
#tongxian {
|
width: 100%;
|
height: 2px;
|
float: left;
|
background: white;
|
position: absolute;
|
top: 100%;
|
}
|
.tongtiao {
|
width: 10%;
|
height: 1px;
|
float: left;
|
background: rgba(0, 0, 255, 0.7);
|
position: absolute;
|
top: 99%;
|
left: 20%;
|
transform: translateY(-100%);
|
}
|
#tongk {
|
width: 40%;
|
float: left;
|
height: 60%;
|
margin: 1% 30%;
|
position: relative;
|
}
|
.tpriority {
|
width: 15%;
|
height: 100%;
|
float: left;
|
margin: 0% 1%;
|
color: white;
|
text-align: center;
|
}
|
.tstatus {
|
width: 20%;
|
height: 100%;
|
float: left;
|
margin: 0% 1%;
|
color: white;
|
text-align: center;
|
}
|
.ttype {
|
width: 15%;
|
height: 100%;
|
float: left;
|
margin: 0% 0%;
|
color: white;
|
text-align: center;
|
}
|
.ttime {
|
width: 30%;
|
height: 100%;
|
float: left;
|
margin: 0% 0%;
|
color: white;
|
text-align: center;
|
}
|
.tnum {
|
width: 15%;
|
height: 100%;
|
float: left;
|
margin: 0% 0%;
|
color: white;
|
text-align: center;
|
}
|
.taskkuang {
|
width: 90%;
|
height: 15%;
|
float: left;
|
margin: 0.1% 5%;
|
border-radius: 5px;
|
font-size: 20px;
|
color: rgba(0, 0, 255, 0.7);
|
font-weight: 600;
|
line-height: 240%;
|
}
|
#kongwei {
|
background-image: url("../imgs/kongwei.jpg");
|
background-size: 85%;
|
background-repeat: no-repeat;
|
background-position: 50% 50%;
|
opacity: 0.8;
|
}
|
#mantong {
|
background-image: url("../imgs/mantong.jpg");
|
background-size: 70%;
|
background-repeat: no-repeat;
|
background-position: 50% 50%;
|
opacity: 0.8;
|
}
|
#kongtong {
|
background-image: url("../imgs/kongtong.jpg");
|
background-size: 70%;
|
background-repeat: no-repeat;
|
background-position: 50% 50%;
|
opacity: 0.8;
|
}
|
.sxian {
|
width: 40%;
|
height: 20%;
|
float: left;
|
font-size: 60px;
|
font-weight: 600;
|
margin-top: 6%;
|
}
|
.sti {
|
width: 40%;
|
height: 20%;
|
float: left;
|
font-size: 30px;
|
margin-top: 5%;
|
}
|
.stu {
|
width: 25%;
|
height: 80%;
|
float: left;
|
background: white;
|
margin: 3% 3.5%;
|
border-radius: 10px;
|
overflow: hidden;
|
}
|
.zkuang {
|
width: 49%;
|
height: 100%;
|
float: left;
|
background: rgba(255, 255, 255, 0.1);
|
border-radius: 10px;
|
margin-left: 2%;
|
}
|
.skuang {
|
width: 32%;
|
height: 100%;
|
float: left;
|
background: rgba(255, 255, 255, 0.1);
|
margin-left: 2%;
|
border-radius: 10px;
|
}
|
#zhu {
|
width: 100%;
|
height: 200vh;
|
float: left;
|
margin-top: 1%;
|
position: relative;
|
}
|
#shang {
|
width: 100%;
|
height: 20%;
|
float: left;
|
}
|
#zhong {
|
width: 100%;
|
height: 40%;
|
float: left;
|
margin-top: 1%;
|
}
|
#xia {
|
width: 100%;
|
height: 35%;
|
float: left;
|
background: rgba(255, 255, 255, 0.1);
|
margin-top: 1%;
|
border-radius: 10px;
|
}
|
</style>
|
