haoxuan
2023-09-07 dc5472e5bda5f4c9b779977c691e8973e2a1a12c
src/views/visualization.vue
@@ -1,6 +1,7 @@
<template>
  <div class="home">
    <!--  -->
    <template v-if="Object.keys(taskData).length > 0 && taskData.Procedure.ID">
      <div class="left">
        <p class="title">
@@ -106,15 +107,17 @@
                <el-progress
                  define-back-color="#133EAF"
                  color="#09E5ED"
                  text-color="#fff"
                  :text-inside="true"
                  :stroke-width="30"
                  :percentage="finishPercent"
                  :percentage="taskData.Order?parseInt(finishNumber/taskData.Order.amount*100):0"
                ></el-progress>
              </el-descriptions-item>
              <!-- <el-descriptions-item label="合格率" style="width: 100%">
                  <el-progress
                    define-back-color="#007101"
                    color="#00CC66"
                    text-color="#fff"
                    :text-inside="true"
                    :stroke-width="30"
                    :percentage="passrate"
@@ -196,15 +199,16 @@
                    </div>
                    <div class="card_top-3">
                      <span class="card-top-r-t"
                        >完成进度:{{ finishPercent || 0 }}</span
                        >完成进度:{{ taskData.Order?parseInt(finishNumber/taskData.Order.amount*100):0}}</span
                      >
                      <span class="card-top-r-b">
                        <el-progress
                          define-back-color="#133EAF"
                          color="#09E5ED"
                          text-color="#fff"
                          :text-inside="true"
                          :stroke-width="10"
                          :percentage="finishPercent"
                          :percentage="taskData.Order?parseInt(finishNumber/taskData.Order.amount*100):0"
                          :show-text="false"
                        ></el-progress>
                      </span>
@@ -223,7 +227,7 @@
                    </div> -->
                    <div class="card_top-4">
                      <div>工艺编号:{{ list.number }}</div>
                      <div
                      <!-- <div
                        style="
                          font-size: 14px;
                          color: #cfcfcf;
@@ -231,7 +235,7 @@
                        "
                      >
                        工艺的具体信息请点击控制查看!
                      </div>
                      </div> -->
                    </div>
                  </template>
                </div>
@@ -361,7 +365,7 @@
          </span>
        </div>
        <div class="right-top-m-btn">
          <el-button type="primary" @click="controlClick"> 控制</el-button>
          <!-- <el-button type="primary" @click="controlClick"> 控制</el-button> -->
        </div>
        <div class="right_dutyLst">
          <div class="right-small-title">当前值班</div>
@@ -415,6 +419,7 @@
        </div>
      </div>
    </template>
    <!--  -->
    <template v-else>
      <div class="home-img-box">
        <div class="bg-title">
@@ -430,7 +435,8 @@
          <img src="../../public/yuan.png" />
          <div class="btn-img">
            <div class="font_size_16" style="line-height: 5; margin-top: 18%">
              暂无任务,休息一下吧...
              <span v-if="showCountDown">距离任务开始时间:{{countDownHour}}时 {{countDownMinute}}分</span>
              <span v-else>暂无任务,休息一下吧...</span>
            </div>
            <el-button type="primary" @click="reloadPage">刷新任务</el-button>
          </div>
@@ -438,11 +444,14 @@
      </div>
    </template>
    <!-- 控制的弹框 -->
    <AddControl ref="control" :id="taskData.Procedure.ID" />
    <AddControl ref="control" :Arr="Arr" />
    <!-- 控制的弹框 -->
    <AddIssue ref="control" :Arr="Arr" :taskData="taskData" :Order="taskData.Order" @getSetProductNumber="getTaskInfo" />
  </div>
</template>
<script>
import {
  getTaskInfo,
  finishTask,
@@ -450,15 +459,18 @@
  saveMiniDict,
  startTask,
  getProgress,
  countdown,
} from "@/api/home/index"; // 产线
import Card from "@/components/Card.vue";
import Knowledge from "../components/Knowledge.vue";
import AddControl from "../components/AddControl.vue";
import AddIssue from "../components/AddIssue.vue";
export default {
  components: {
    Card,
    Knowledge,
    AddControl,
    AddIssue,
  },
  data() {
    return {
@@ -466,7 +478,6 @@
      passrate: 30, //合格率
      production: 25, //生产中
      finishNumber: 0,
      finishPercent: 0,
      formatTime2:'',
      formatTime3:'',
      // 右侧完成
@@ -515,6 +526,14 @@
          },
        },
      },
      totalNumber:0,
      showCountDown:false,
      countDownHour:0,
      countDownMinute:0,
      Arr:[],
        // 记录定时器状态
        procInfoTimer:null,
       cutdownTimer: null
    };
  },
  mounted() {
@@ -523,27 +542,34 @@
    //   this.passrate = this.getRandomNumber(1, 100);
    //   this.production = this.getRandomNumber(1, 100);
    // }, 3000);
    this.getDate3()
    this.getDate2()
    setInterval(()=>{
       this.getDate3()
       this.getDate2()
    },5000)
    this.getTaskInfo();
    setInterval(() => {
      this.getProgressInfo();
    }, 60000);
  },
  methods: {
    reloadPage() {
      window.location.reload();
      // window.location.reload();
      this.getTaskInfo();
    },
    getcountdown(){
      countdown().then((res) => {
        if (res.code == 200) {
          this.showCountDown=res.data.ShowCountDown?res.data.ShowCountDown:false;
          this.countDownHour=res.data.CountDownHour?res.data.CountDownHour:0
          this.countDownMinute=res.data.CountDownMinute?res.data.CountDownMinute:0
        }
      });
    },
    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;
        }
      });
    },
@@ -635,6 +661,7 @@
      };
      getTaskInfo().then((res) => {
        if (res.code == 200) {
          this.procedureList=[]
          this.taskData = res.data
            ? res.data
            : {
@@ -657,16 +684,25 @@
              ...this.taskData.Procedure.procedure,
            },
          ]);
          if (this.taskData.Procedure.ID) {
            startTask({ id: this.taskData.Procedure.ID }).then((res) => {
              if (res.code == 200) {
                // res.data.number
                this.procedureList[0].push({
                  number: res.data.number,
                  number: res.data.Number,
                  name: "工艺",
                });
                this.Arr=res.data.Params?res.data.Params:[];
              }
            });
            this.getProgressInfo();
            if (!this.procInfoTimer) {
                this.procInfoTimer = setInterval(() => {
                  this.getProgressInfo();
                }, 6000);
            }
          }
          console.log(this.procedureList, "===1111procedureList");
          // setTimeout(() => {
@@ -675,14 +711,26 @@
          this.setInterCard("outputMaterials", "cardBox3");
          // }, 5000);
        }
        if(res.code!=200||!this.taskData.Procedure.ID){
          this.getcountdown();
          // 控制重新请求getTaskInfo, 只开启一个定时器
         if (!this.cutdownTimer) {
          this.cutdownTimer = setInterval(() => {
                 this.getcountdown();
              }, 60000);
          }
        }
      });
    },
    // 设置
    setUrl() {
      const { href } = this.$router.resolve({
      // const { href } = this.$router.resolve({
      //   path: "/set",
      // });
      // window.open(href, "_blank");
      this.$router.push({
        path: "/set",
      });
      window.open(href, "_blank");
    },
    // 右侧控制
    controlClick() {
@@ -690,6 +738,7 @@
        this.$refs.control.islook = true;
      } else {
        this.$message.error("当前设备没有工序!");
      }
    },
    // 右侧完成
@@ -735,24 +784,24 @@
    }
    .bg-title-span {
      position: absolute;
      width: 400px;
      height: 100px;
      line-height: 100px;
      width: 30%;
      height: 4rem;
      line-height:2.4;
      font-size: 26px;
      font-weight: 700;
      text-align: center;
      left: 39%;
      top: 5%;
      left: 36%;
      top: 1.5rem;
      display: inline-block;
    }
    .bg-set{
      position:absolute;
      right:10%;
      height: 100px;
      line-height: 100px;
      height: 4rem;
      line-height:2.4;
      font-size: 40px;
      font-weight: 700;
      top: 5%;
      top: 1rem;
    }
    .bg-date{
      position:absolute;
@@ -784,7 +833,7 @@
      margin: 0 auto;
      text-align: center;
      position: absolute;
      top: 21%;
      top: 9rem;
    }
  }
}
@@ -792,11 +841,7 @@
  font-size: 30px;
  font-weight: 700;
}
.el-button--primary {
  border: 0;
  font-weight: 700 !important;
  font-size: 16px !important;
}
.color_4efefa {
  color: #4efefa;
}
@@ -1107,7 +1152,7 @@
          padding: 0 10px;
          height: 70px;
          line-height: 40px;
          line-height: 70px;
          color: #fff;
          background: rgb(19, 35, 90);
          font-size: 20px;
@@ -1223,7 +1268,8 @@
    }
    .right_dutyLst {
      width: calc(100% - 20px);
      height: 270px;
      // height: 270px;
      height: 310px;
      border-radius: 4px;
      line-height: 30px;
      overflow: hidden;
@@ -1308,4 +1354,9 @@
    }
  }
}
.el-button--primary {
  border: 0;
  font-weight: 700 !important;
  font-size: 16px;
}
</style>