空桶入出扩展开发

zhanghonglin

2026-04-10 8f9b9411ca279670bd85fcfa7763987295ed9abf

 ÏîÄ¿´úÂë/´óÆÁ/src/views/index.vue

@@ -36,88 +36,100 @@

        <!--位置-->
        <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 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="taskk">
              <div class="taskxu">1</div>
              <div class="tasknum"></div>
              <div class="taskstaus"></div>
              <div class="tasktype"></div>
              <div class="taskgrade"></div>
            <div class="skuang">
              <div class="stu" id="kongtong"></div>
              <div class="sti">空桶</div>
              <div class="sxian"></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 class="skuang">
              <div class="stu" id="mantong"></div>
              <div class="sti">满桶</div>
              <div class="sxian"></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 id="zhong">
            <div class="zkuang" style="marginLeft: 0%;">
              <div class="taskkuang">库存分类占比</div>
              <div id="kuk">
                <div id="kuyuan"></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 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="zhuk">
              <div class="biaot" style="marginTop: 15%;">今日执行任务次数</div>
              <div class="xian" style="marginTop: 11%;">
                <div class="name">入库：</div>
                <div class="shu"></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 class="xian">
                <div class="name">出库：</div>
                <div class="shu"></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 id="zhu" style="opacity: 0.1;background: white;position: absolute;"></div>
      </div>
    </div>
  </div>
@@ -169,36 +181,41 @@
            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");
            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;
              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;
              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
@@ -207,22 +224,41 @@
          })
          .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;
              //头部数量显示
              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
        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;
              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);
@@ -266,102 +302,245 @@
<style lang="scss">
@import "../assets/scss/index.scss";

#zhu {
  width: 100%;
  height: 150vh;
.kutcolor {
  width: 30%;
  height: 60%;
  float: left;
  margin-top: 1%;
  position: relative;
  border-radius: 10px;
  background: #ff5733;
  margin-top: -6%;
}
.name{
  width: 40%;
  height: 100%;
.kutkw {
  width: 50%;
  height: 80%;
  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%;
  font-size: 20px;
}
.taskgrade {
  width: 35%;
.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: 30px;
  line-height: 400%;
  color: white;
  font-size: 20px;
}
.taskxu,
.tasknum,
.taskstaus,
.tasktype {
#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;
  text-align: center;
  font-size: 30px;
  line-height: 400%;
  margin: 0% 1%;
  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%;
}
.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%;
}
#taskzhu {
  width: 48%;
.stu {
  width: 25%;
  height: 80%;
  float: left;
  height: 100%;
  background: white;
  margin: 3% 3.5%;
  border-radius: 10px;
  overflow: hidden;
}
#materielzhu {
  width: 48%;
.zkuang {
  width: 49%;
  height: 100%;
  float: left;
  height: 100%;
  margin-left: 4%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin-left: 2%;
}
.zhuk {
.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;
  height: 30%;
  margin-top: 2%;
  border-radius: 5px;
  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>