面板的需求更改 下方的弹框+倒计时

haoxuan

2023-08-25 6d9b6320e57ae787bfcfc56f4f34923166ea1a9b

面板的需求更改  下方的弹框+倒计时

 src/api/home/index.js

@@ -102,5 +102,21 @@
  });
};

// 生产总量
export const setProductNumber = (data) => {
  return request({
    url: 'v1/plc/setProductNumber',
    method: "post",
    data,
  });
};
// 倒计时
export const countdown = (data) => {
  return request({
    url: 'v1/task/countdown',
    method: "get",
    data,
  });
};



 src/components/AddIssue.vue

New file
@@ -0,0 +1,203 @@
<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="islook"
    width="250px"
    top="50vh"
    class="add-event-dialog"
    :show-close="false"
  >
    <div slot="title" class="tac drawerHeader">下发生产数据</div>
    <div class="dialog-content-box">
      <div style=" margin:0 auto; width:100%;overflow:hidden;margin-bottom:30px;text-align:left;">
        
        <div class="circel-text">
         <div class="circel-text-b">
          生产数量：<span>{{ Order.amount||0 }}</span>{{ Order.unit||'' }}
         </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer tac">
      <el-button type="primary" @click="onSubmit()">下发</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {
  startTask,
  setProductNumber,
} from "@/api/home/index"; // 产线
export default {
  components: {},
  props: {
    Order:{
      type: [Object],
      default: () => {
        return {
          amount:0,
          unit:''
        };
      },
    },
    taskData:{
      type: [Object],
    }
  },
  data() {
    return {
      islook: false,
    };
  },
  mounted() {
    this.getInfo()
  },
  watch: {
    taskData(val) {
      this.getInfo()
    },
  },
  methods: {
    getInfo(){
      if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID) {
        this.islook=true
      }else{
        this.islook=false;
      }
    },
    onSubmit() {
      setProductNumber().then(res=>{
          if(res.code==200){
            this.$message.success("下发成功！");
            this.$emit('getSetProductNumber')
            this.shutdown();
          }
        }) 
    },
    shutdown() {
      this.islook = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content {
  height: calc(100% - 55px);
  overflow-y: auto;
}
.circel {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(12, 79, 218, 1);
  position: relative;
  float:left;
  .circel-two {
    width: 75px;
    height: 75px;
    position: absolute;
    top: 11px;
    left: 11px;
    border-radius: 50%;
    border: 2px solid rgba(12, 79, 218, 1);
  }
}
.circel-text{
  color:#333;
  margin-left:20px;
  .circel-text-t{
    font-size:18px;
    line-height:40px;
  }
  .circel-text-b{
    font-weight: 700;
    font-size:14px;
    
    span{
      color:rgba(12, 79, 218, 1);
      font-size:38px;
      margin-right:10px;
    }
  }
}
.color_red{
  width:100%;
  color:red;
  margin:0 auto;
  text-align:center;
  font-size:14px;
  margin-bottom:25px;
}
.form-item {
  width: calc(50% - 20px);
  float: left;
  &:nth-child(odd) {
    margin-right: 20px;
  }
}
.form-item-two {
  width: calc(50% - 20px);
  float: left;
  &:nth-of-type(odd) {
    margin-right: 20px;
  }
}
.form-item-three {
  width: calc(100% - 20px);
  float: left;
}
.form-item-check {
  width: calc(33% - 40px);
  float: left;
  &:nth-of-type(odd) {
    margin-right: 20px;
  }
}
.title {
  width: 100%;
}
.dialog-content-box {
  height: 100px;
  padding-bottom: 50px;
  overflow-y: auto;
  padding: 0 10px;
  .el-form {
    overflow: hidden;
  }
}
.num-identify {
  padding: 5px 8px;
  background-color: rgba(255, 153, 0, 1);
  border-radius: 6px;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}
.drawerHeader {
  // position:relative;
  border-bottom: 1px solid #eee;
  height: 40px;
  line-height: 30px;
  color: #333;
  font-weight: 700;
  font-size: 18px;
  .identify {
    width: 80px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border: 1px solid rgba(255, 153, 0, 1);
    border-radius: 6px;
    font-size: 16px;
    color: rgba(255, 153, 0, 1);
    transform: rotate(15deg);
    font-weight: 600;
    margin-right: 100px;
    margin-top: 12px;
    float: right;
  }
}
</style>

 src/views/visualization.vue

@@ -108,7 +108,7 @@
                  color="#09E5ED"
                  :text-inside="true"
                  :stroke-width="30"
                  :percentage="finishPercent"
                  :percentage="taskData.Order?parseInt(finishNumber/taskData.Order.amount):0"
                ></el-progress>
              </el-descriptions-item>
              <!-- <el-descriptions-item label="合格率" style="width: 100%">
@@ -196,7 +196,7 @@
                    </div>
                    <div class="card_top-3">
                      <span class="card-top-r-t"
                        >完成进度：{{ finishPercent || 0 }}</span
                        >完成进度：{{ taskData.Order?parseInt(finishNumber/taskData.Order.amount):0}}</span
                      >
                      <span class="card-top-r-b">
                        <el-progress
@@ -204,7 +204,7 @@
                          color="#09E5ED"
                          :text-inside="true"
                          :stroke-width="10"
                          :percentage="finishPercent"
                          :percentage="taskData.Order?parseInt(finishNumber/taskData.Order.amount):0"
                          :show-text="false"
                        ></el-progress>
                      </span>
@@ -430,7 +430,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>
@@ -439,10 +440,13 @@
    </template>
    <!-- 控制的弹框 -->
    <AddControl ref="control" :id="taskData.Procedure.ID" />
    <!-- 控制的弹框 -->
    <AddIssue ref="control" :taskData="taskData" :Order="taskData.Order" @getSetProductNumber="getTaskInfo" />
  </div>
</template>

<script>

import {
  getTaskInfo,
  finishTask,
@@ -450,15 +454,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 +473,6 @@
      passrate: 30, //合格率
      production: 25, //生产中
      finishNumber: 0,
      finishPercent: 0,
      formatTime2:'',
      formatTime3:'',
      // 右侧完成
@@ -515,6 +521,10 @@
          },
        },
      },
      totalNumber:0,
      showCountDown:false,
      countDownHour:0,
      countDownMinute:0,
    };
  },
  mounted() {
@@ -523,28 +533,33 @@
    //   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();
      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;
          
        }
      });
    },
@@ -658,6 +673,8 @@
              ...this.taskData.Procedure.procedure,
            },
          ]);
          
   
          if (this.taskData.Procedure.ID) {
            startTask({ id: this.taskData.Procedure.ID }).then((res) => {
              if (res.code == 200) {
@@ -668,6 +685,10 @@
                });
              }
            });
            this.getProgressInfo();
            setInterval(() => {
              this.getProgressInfo();
            }, 6000);
          }
          console.log(this.procedureList, "===1111procedureList");
          // setTimeout(() => {
@@ -676,6 +697,12 @@
          this.setInterCard("outputMaterials", "cardBox3");
          // }, 5000);
        }
        if(res.code!=200||!this.taskData.Procedure.ID){
          this.getcountdown();
            setInterval(() => {
              this.getcountdown();
            }, 60000);
        }
      });
    },
    // 设置