From d65d72bd341aa0c873b9bcbf3f01d504651657cc Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期一, 21 八月 2023 18:37:23 +0800
Subject: [PATCH] 面板的暂无数据页面开发
---
src/views/visualization.vue | 251 +++++++++++++++++++++++++++++++++++--------------
1 files changed, 179 insertions(+), 72 deletions(-)
diff --git a/src/views/visualization.vue b/src/views/visualization.vue
index d52aa80..987af08 100644
--- a/src/views/visualization.vue
+++ b/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骞碝M鏈坉d鏃�");
+ 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;
--
Gitblit v1.8.0