| | |
| | | |
| | | <template> |
| | | <div class="home"> |
| | | <!-- --> |
| | | <template v-if="Object.keys(taskData).length > 0 && taskData.Procedure.ID"> |
| | | <div class="left"> |
| | | <p class="title"> |
| | |
| | | <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" |
| | |
| | | </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> |
| | |
| | | </div> --> |
| | | <div class="card_top-4"> |
| | | <div>工艺编号:{{ list.number }}</div> |
| | | <div |
| | | <!-- <div |
| | | style=" |
| | | font-size: 14px; |
| | | color: #cfcfcf; |
| | |
| | | " |
| | | > |
| | | 工艺的具体信息请点击控制查看! |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </template> |
| | | </div> |
| | |
| | | </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> |
| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <!-- --> |
| | | <template v-else> |
| | | <div class="home-img-box"> |
| | | <div class="bg-title"> |
| | |
| | | <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> |
| | |
| | | </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, |
| | |
| | | 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 { |
| | |
| | | passrate: 30, //合格率 |
| | | production: 25, //生产中 |
| | | finishNumber: 0, |
| | | finishPercent: 0, |
| | | formatTime2:'', |
| | | formatTime3:'', |
| | | // 右侧完成 |
| | |
| | | }, |
| | | }, |
| | | }, |
| | | totalNumber:0, |
| | | showCountDown:false, |
| | | countDownHour:0, |
| | | countDownMinute:0, |
| | | Arr:[], |
| | | // 记录定时器状态 |
| | | procInfoTimer:null, |
| | | cutdownTimer: null |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | // 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; |
| | | |
| | | } |
| | | }); |
| | | }, |
| | |
| | | }; |
| | | getTaskInfo().then((res) => { |
| | | if (res.code == 200) { |
| | | this.procedureList=[] |
| | | this.taskData = res.data |
| | | ? res.data |
| | | : { |
| | |
| | | ...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(() => { |
| | |
| | | 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() { |
| | |
| | | this.$refs.control.islook = true; |
| | | } else { |
| | | this.$message.error("当前设备没有工序!"); |
| | | |
| | | } |
| | | }, |
| | | // 右侧完成 |
| | |
| | | } |
| | | .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; |
| | |
| | | margin: 0 auto; |
| | | text-align: center; |
| | | position: absolute; |
| | | top: 21%; |
| | | top: 9rem; |
| | | } |
| | | } |
| | | } |
| | |
| | | font-size: 30px; |
| | | font-weight: 700; |
| | | } |
| | | .el-button--primary { |
| | | border: 0; |
| | | font-weight: 700 !important; |
| | | font-size: 16px !important; |
| | | } |
| | | |
| | | .color_4efefa { |
| | | color: #4efefa; |
| | | } |
| | |
| | | padding: 0 10px; |
| | | height: 70px; |
| | | |
| | | line-height: 40px; |
| | | line-height: 70px; |
| | | color: #fff; |
| | | background: rgb(19, 35, 90); |
| | | font-size: 20px; |
| | |
| | | } |
| | | .right_dutyLst { |
| | | width: calc(100% - 20px); |
| | | height: 270px; |
| | | // height: 270px; |
| | | height: 310px; |
| | | border-radius: 4px; |
| | | line-height: 30px; |
| | | overflow: hidden; |
| | |
| | | } |
| | | } |
| | | } |
| | | .el-button--primary { |
| | | border: 0; |
| | | font-weight: 700 !important; |
| | | font-size: 16px; |
| | | } |
| | | </style> |