面板的暂无数据页面开发

haoxuan

2023-08-21 d65d72bd341aa0c873b9bcbf3f01d504651657cc

面板的暂无数据页面开发

 .env

@@ -4,6 +4,8 @@
VUE_APP_TITLE=Basic
NODE_ENV=development
VUE_APP_BATH_PATH='http://127.0.0.1:8003'
# VUE_APP_BATH_PATH='http://192.168.20.120:8003'

# 网络请求公用地址
VUE_APP_API=/api/


 .env.development

@@ -5,4 +5,5 @@
# 页面 title 前缀
VUE_APP_TITLE=Basic
VUE_APP_BATH_PATH='http://127.0.0.1:8003'
# VUE_APP_BATH_PATH='http://192.168.20.120:8003'


 public/bg-title.png

 public/yuan.png

 src/views/set.vue

@@ -918,7 +918,7 @@
  margin-top: 100px;
}
.form-box {
  background: rgb(2, 10, 38);
  background: #12234A;
  width: 100%;
  height: 100%;
  overflow-y: hidden;

 src/views/visualization.vue

@@ -1,7 +1,7 @@

<template>
  <div class="home">
    <template v-if="Object.keys(taskData).length > 0">
    <template v-if="Object.keys(taskData).length > 0 && taskData.Procedure.ID">
      <div class="left">
        <p class="title">
          生产管理看板
@@ -34,13 +34,17 @@
          </span>
          <span class="title-item"
            >工作人数:
            <span class="color_4efefa"
            <span class="color_4efefa">
              <span
                v-if="
                  taskData.Procedure.procedure &&
                  taskData.Procedure.procedure.workers
                "
                >{{ taskData.Procedure.procedure.workers.length }}</span
              >
              <span v-if="taskData.Procedure.procedure&&taskData.Procedure.procedure.workers">{{ taskData.Procedure.procedure.workers.length }}</span>
                <span v-else>0</span>
                人
                </span
            >
              <span v-else>0</span>
              人
            </span>
          </span>
        </div>
        <div class="content">
@@ -82,11 +86,9 @@
                {{ taskData.Procedure.procedure.workHours || "" }}
              </el-descriptions-item>
              <el-descriptions-item label="起止时间"
                >{{ formatDate(taskData.Procedure.procedure.startTime) || "" }}
                >{{ formatDate(taskData.Order.startTime) || "" }}
                -
                {{
                  formatDate(taskData.Procedure.procedure.endTime)
                }}</el-descriptions-item
                {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item
              >
              <el-descriptions-item label="货物描述">{{
                taskData.Order.orderAttr || ""
@@ -106,9 +108,7 @@
                  color="#09E5ED"
                  :text-inside="true"
                  :stroke-width="30"
                  :percentage="
                    finishPercent
                  "
                  :percentage="finishPercent"
                ></el-progress>
              </el-descriptions-item>
              <!-- <el-descriptions-item label="合格率" style="width: 100%">
@@ -196,9 +196,7 @@
                    </div>
                    <div class="card_top-3">
                      <span class="card-top-r-t"
                        >完成进度：{{
                         finishPercent || 0
                        }}</span
                        >完成进度：{{ finishPercent || 0 }}</span
                      >
                      <span class="card-top-r-b">
                        <el-progress
@@ -206,9 +204,7 @@
                          color="#09E5ED"
                          :text-inside="true"
                          :stroke-width="10"
                          :percentage="
                            finishPercent
                          "
                          :percentage="finishPercent"
                          :show-text="false"
                        ></el-progress>
                      </span>
@@ -347,12 +343,12 @@
          <div class="right-top-l">作业状态</div>
          <div class="time">
            <dl>
              <dd><span style="font-size: 32px">17:50</span></dd>
              <dd><span style="font-size: 32px">{{ formatDate3() }}</span></dd>
              <dd>
                <span style="font-size: 12px; margin-right: 10px"
                  >2023/02/16</span
                <span style="font-size: 12px; "
                  >{{ formatDate2() }}</span
                >
                <span style="font-size: 14px">星期四</span>
                <!--margin-right: 10px <span style="font-size: 14px">星期四</span> -->
              </dd>
            </dl>
          </div>
@@ -369,7 +365,10 @@
        </div>
        <div class="right_dutyLst">
          <div class="right-small-title">当前值班</div>
          <div class="right-person-box" v-if="taskData.Procedure.procedure.workers">
          <div
            class="right-person-box"
            v-if="taskData.Procedure.procedure.workers"
          >
            <dl
              class="right-small-person"
              v-for="(item, index) in taskData.Procedure.procedure.workers"
@@ -389,7 +388,7 @@
                style="font-size: 20px; font-weight: 600; margin-right: 10px"
                >{{ item.workerName || "" }}</span
              >
              <span style="color: #666">{{ item.phoneNum || "" }}</span>
              <span>{{ item.phoneNum || "" }}</span>
            </dl>
          </div>
          <!-- <div
@@ -417,25 +416,24 @@
      </div>
    </template>
    <template v-else>
      <div
        style="
          width: 100%;
          height: 100%;
          font-size: 20px;
          text-align: center;
          line-height: 100px;
        "
      >
        <div
          style="
            width: 200px;
            height: 200px;
            margin: 0 auto;
            line-height: 200px;
            margin-top: calc(20% - 100px);
          "
        >
          暂无任务
      <div class="home-img-box">
        <div class="bg-title">
          <img src="../../public/bg-title.png" />
          <span class="bg-title-span">设备实时生产看板</span>
          <div class="bg-date"><span>{{ formatDate3() }}</span><br/>{{formatDate2()}}</div>
          <span
            class="font el-icon-setting set-title bg-set"
            @click="setUrl"
          ></span>
        </div>
        <div class="yuan">
          <img src="../../public/yuan.png" />
          <div class="btn-img">
            <div class="font_size_16" style="line-height: 5; margin-top: 18%">
              暂无任务，休息一下吧...
            </div>
            <el-button type="primary" @click="reloadPage">刷新任务</el-button>
          </div>
        </div>
      </div>
    </template>
@@ -468,16 +466,12 @@
      passrate: 30, //合格率
      production: 25, //生产中
      finishNumber: 0,
      finishPercent:0,
      finishPercent: 0,
      // 右侧完成
      finishShow: false,
      inputMaterials: [
        
      ],
      inputMaterials: [],
      outputMaterials: [],
      procedureList: [
       
      ],
      procedureList: [],
      taskData: {
        Order: {
          amount: "",
@@ -534,31 +528,66 @@
  },

  methods: {
    reloadPage() {
      window.location.reload();
    },
    getProgressInfo() {
      getProgress().then((res) => {
        if (res.code == 200) {
          this.finishNumber=res.data.finishNumber?res.data.finishNumber:0;
          this.finishPercent=res.data.finishPercent?res.data.finishPercent:0;
          this.finishNumber = res.data.finishNumber ? res.data.finishNumber : 0;
          this.finishPercent = res.data.finishPercent
            ? res.data.finishPercent
            : 0;
        }
      });
    },
    getDateObj(ms) {
      const now = ms ? new Date(ms) : new Date();
      const y = now.getFullYear();
      let m = now.getMonth() + 1;
      m = m > 9 ? m : "0" + m;
      let d = now.getDate();
      d = d > 9 ? d : "0" + d;
      return { y, m, d };
    getDateObj(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      let o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds(),
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : this.padLeftZero(str)
          );
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ("00" + str).substr(str.length);
    },
    // 格式化时间 ==> yyyy-mm-dd
    formatDate(value, str) {
    formatDate(value) {
      if (value) {
        const dateObj = this.getDateObj(value);
        return "" + dateObj.y + "-" + dateObj.m + "-" + dateObj.d;
        const now = value ? new Date(value * 1000) : new Date();
        let time = this.getDateObj(now, "yyyy-MM-dd hh:mm:ss");
        return time;
      } else {
        return "";
      }
    },
    formatDate3() {
        const now =  new Date();
        let time = this.getDateObj(now, "hh:mm");
        return time;
    },
    formatDate2(){
      const now =  new Date();
        let time = this.getDateObj(now, "yyyy年MM月dd日");
        return time;
    },
    setInterCard(value, name) {
      let height = 200;
@@ -596,8 +625,9 @@
    getTaskInfo() {
      this.taskData = {
        Order: {},
        Procedure: { procedure: { inputMaterials: [], outputMaterials: [],workers:[] } },
        
        Procedure: {
          procedure: { inputMaterials: [], outputMaterials: [], workers: [] },
        },
      };
      getTaskInfo().then((res) => {
        if (res.code == 200) {
@@ -606,10 +636,17 @@
            : {
                Order: {},
                Procedure: {
                  procedure: { inputMaterials: [], outputMaterials: [],workers:[]  },
                  procedure: {
                    inputMaterials: [],
                    outputMaterials: [],
                    workers: [],
                  },
                },
              };
          this.taskData.Procedure.procedure.workers=this.taskData.Procedure.procedure.workers?this.taskData.Procedure.procedure.workers:[]
          this.taskData.Procedure.procedure.workers = this.taskData.Procedure
            .procedure.workers
            ? this.taskData.Procedure.procedure.workers
            : [];
          this.procedureList.push([
            {
              name: "工序",
@@ -676,6 +713,77 @@
</script>

<style lang="scss">
.set-title{
  cursor:pointer;
}
.home-img-box {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  margin: 0 auto;
  overflow: hidden;
  padding: 20px;
  .bg-title {
    width: 90%;
    margin: 0 auto;
    position: absolute;
    img {
      width: 100%;
    }
    .bg-title-span {
      position: absolute;
      width: 400px;
      height: 100px;
      line-height: 100px;
      font-size: 26px;
      font-weight: 700;
      text-align: center;
      left: 39%;
      top: 5%;
      display: inline-block;
    }
    .bg-set{
      position:absolute;
      right:10%;
      height: 100px;
      line-height: 100px;
      font-size: 40px;
      font-weight: 700;
      top: 5%;
    }
    .bg-date{
      position:absolute;
      left:3%;
      height: 100px;
      line-height: 30px;
      font-size: 16px;
      top: 15%;
      span{
        font-size: 35px;
       font-weight: 700;
       line-height: 20px;
      }
    }
    
  }
  .yuan {
    width: 40%;
    height: 80%;
    margin: 0 auto;
    margin-top: 10%;
    position: relative;
    img {
      width: 100%;
    }
    .btn-img {
      width: 100%;
      height: 50%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      top: 21%;
    }
  }
}
.font-arrow-20 {
  font-size: 30px;
  font-weight: 700;
@@ -766,7 +874,6 @@

.small_title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}
.right-small-btn {
@@ -801,13 +908,13 @@
  width: 100%;
  height: 100%;
  color: #fff;
  background: rgb(19 35 90);
  background: #12234a;
  overflow: hidden;
  .left {
    width: calc(78% - 60px);
    height: 100%;
    min-height: 100%;
    background: rgb(19 35 90);
    background: #12234a;
    float: left;
    padding: 30px;
    padding-top: 20px;

 vue.config.js

@@ -68,6 +68,8 @@
      },
      "/v1/": {
        target: "http://127.0.0.1:8003",
       
        // target: "http://192.168.20.120:8003",
        ws: true,
        changeOrigin: true,
      },