工艺模型 详情的前端开发

haoxuan

2023-09-28 546e94e3e89a6d60395e9690cf3eb67698105ee8

工艺模型 详情的前端开发

 public/process-model.png

 public/process-tip.png

 public/tank-two.png

 src/components/ProcessModel.vue

New file
@@ -0,0 +1,510 @@
<template>
  <!-- top="10vh" -->
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="islook"
    width="938px"
    class="add-event-dialog"
    :show-close="false"
  >
    <div class="tank-box">
      <div slot="title" class="tac drawerHeader">
        <span class="title-l">工艺模型库</span>
        <span class="title-r" @click="closeClick">
          <img src="../../public/close.png" />
        </span>
      </div>
      <div class="dialog-content-box">
        <div
          style="
            margin: 0 auto;
            width: 100%;
            height: 100%;
            overflow: hidden;
            text-align: left;
          "
        >
          <template>
            <div class="title-auto-box">
              <div class="title-box margin_bottom_20">
                <div class="title-item" v-for="(item,index) in processList" :key="index">
                   <div class="item-l-bng">
                      <img src="../../public/process-model.png" />
                   </div>
                   <div class="item-r" @click="processDetailsClick(item)">
                      <div class="item-r-t font_weight">{{ item.name }}</div>
                      <div class="item-r-b">当前工艺编号：{{ item.number }}</div>
                    </div>
                    <div class="tip-r">
                      <img src="../../public/process-tip.png" />
                    </div>
                    <div class="tip-current">当前使用</div>
                    <div class="btn">
                      <el-button
                      type="primary"
                      size="mini"
                      class="color_organge"
                      @click="finishClick(index, taskData)"
                    >
                      更新工艺</el-button
                    >
                    </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div slot="footer" class="dialog-footer tac" style="overflow: hidden">
        
            <el-button
                      type="primary"
                      size="mini"
                      class="color_blue margin_right_20px"
                      @click="onSubmit()"
                    >
                      上一页</el-button
                    >
          
          <el-button
                      type="primary"
                      size="mini"
                      disabled
                      class="color_blue"
                      v-prevent-re-click="3000"
                      @click="onSubmit()"
                    >
                      下一页</el-button
                    >
      </div>
      <!-- <ErrorIssue ref="error" :messageError="messageError" @shutdown="shutdown"/> -->
      <ProcessModelDetails
        ref="processDetails"
        :processObj="processObj"
      />
    </div>
    
  </el-dialog>
</template>

<script>
import {
  startTask,
  sendProcessParams,
} from "@/api/home/index"; // 产线
import ProcessModelDetails from "@/components/ProcessModelDetails";
export default {
  components: {ProcessModelDetails},
  props: {
    processList: {
      type: [Array],
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      islook: false,
      isLoading:false,
      processObj:{}
    };
  },
  mounted() {
    this.getInfo();
  },
  watch: {
    islook(){
    },
  },
  methods: {
    processDetailsClick(item){
      this.processObj=item;
      this.$refs.processDetails.islook=true;
    },
    closeClick() {
      this.shutdown();
    },
    getInfo() {
      // 1 未生产 2生产中 3生产完成
      // if (
      //   Object.keys(this.processList).length > 0
      // ) {
      //     this.islook = true;
      // } else {
      //   this.islook = false;
      // }
    },
    onSubmit() {
        if(this.isLoading){
          return true;
        }
        this.isLoading=true;
          // sendProcessParams({ procedureId: this.processList.Procedure.ID,position: Number(this.taskData.Position), }).then((res) => {
          //   if (res.code == 200) {
          //     this.resParams = res;
          //     this.isLoading=false;
          //   } else {
          //     this.isLoading=false;
          //     this.resParams = res;
          //   }
          // });
          setTimeout(()=>{
            this.isLoading=false;
          },30000)
    },
    shutdown() {
      this.islook = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.color_error{
  color:red;
}
.color_success{
  color:green;
}
.tank-box {
  width: 938px;
  height: 733px;
  background: url("../../public/tank-two.png") no-repeat center center / cover;
  position: relative;
  .dialog-footer {
    position: absolute;
    bottom: 45px;
    width:100%;
    text-align:center;
    
  }
  
}
.margin_right_20px{
      margin-right:20px;
}
.margin-top-10px{
  margin-top:10px;
}
.margin-top-40px{
  margin-top:40px;
}
.color_organge {
  background: #f76c0f;
  color:#fff;
  border:0!important;
  font-size:14px;
  padding:10px 15px!important;
}
.color_blue{
  background:#4343f5!important;
  border:0!important;
  font-size:16px;
  padding:10px 25px!important;
}
.color_4efefa {
  color: #4efefa !important;
}
.color_fff {
  color: #fff;
}
.font_size_20 {
  font-size: 20px !important;
}
.font_weight{
  font-weight: 700;
}
.margin_bottom_13 {
  margin-bottom: 13px;
}
.title-box {
  width: calc(100% - 140px);
  height: auto;
  overflow: hidden;
  padding:0 70px;
}
.error-t {
  width: 100px;
  margin: 100px auto 40px;
  font-size:98px;
  span {
    display: inline-block;
  }
}
.error-m {
  line-height: 35px;
  font-size: 28px;
  color: #fff;
  margin-bottom: 20px;
  text-align: center;
}
::v-deep .el-dialog {
  background: transparent;
}
::v-deep .el-dialog__header {
  padding: 0 !important;
}
::v-deep .el-dialog__body {
  padding: 0 !important;
}
.btn-error{
  bottom:80px!important;
}

::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: #fff;
  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%;
  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: calc(100% - 210px);
  // overflow: hidden;
  padding: 60px 0px 10px;
  .el-form {
    overflow: hidden;
  }
  .title-auto-box {
    height: calc(100% - 0px);
    overflow: auto;
    width:calc(100% - 140px);
    margin: 0 auto; 
    padding-top:20px;
    .title-box{
      padding:0 10px;
      overflow:hidden;
      width:calc(100% - 20px);
      .title-item{
        width:calc(50%  - 35px);
        height:70px;
        padding:23px 10px 10px;
        background:#31478f;
        border-radius: 8px;
        float:left;
        overflow:hidden;
        font-size:15px;
        position:relative;
        margin-bottom:30px;
        &:nth-of-type(odd){
          margin-right:30px;
        }
        .item-l-bng{
          width:40px;
          float:left;
          margin-right:20px;
          img{
            width:100%;
          }
        }
        .item-r{
          width:calc(100% - 60px);
          float:left;
          line-height:25px;
          color:#fff;
          font-size:16px;
          cursor:pointer;
          .item-r-t{
            font-size:16px;
          }
          .item-r-b{
            font-size:14px;
          }
        }
        .tip-r{
          position:absolute;
          top:5px;
          right:15px;
          width:20px;
          img{
            width:100%;
          }
        }
        .tip-current{
          background:green;
          color:#fff;
          position:absolute;
          top:0px;
          left:75px;
          width:auto;
          padding:2px 15px;
          font-size:12px;
          border-radius:0px 0px 6px 6px;
        }
        .btn{
          width:100px;
          position:absolute;
          right:0px;
          bottom:10px;
        }
      }
    }
  }
  .gif-box{
    width:230px;
    margin:0 auto;
    margin-bottom:5px;
    .gif-right{
      width:210px;
      font-size:14px;
      color:#fff;
      line-height:28px;
      span{
        font-weight: 700;
        font-size:18px;
      }
    }
  }
  .gif{
    width:55px;
    vertical-align: middle;
    float:left;
    margin-right:20px;
    img{
      width:100%;
    }
    .yuandian {
        width: 55px;
        height: 55px;
        float:left;
        // background: #15d815;
        background:red;
        border-radius: 50%;
        // margin-top:-5px;
        vertical-align: middle;
      }
  }
  .progress-item {
    width: 55%;
    padding: 2px 8px;
    height: 20px;
    background: #fff;
    border-radius: 30px;
    margin: 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 1px 5px 5px rgba(255, 255, 255, 0.5);
    span {
      float: left;
      font-weight: 700;
      color: #333;
      font-size: 15px;
    }
  }
}
.num-identify {
  padding: 5px 8px;
  background-color: rgba(255, 153, 0, 1);
  border-radius: 6px;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}
.drawerHeader {
  width:99%;
  margin:0 auto;
  overflow:hidden;
  .title-l{
    width:25%;
    float:left;
    margin-left:30px;
    font-size: 22px;
    color: #fff;
    height: 3.2vw;
    line-height: 4.5vw;
  }
  .title-r{
    width:60px;
    float:right;
    height: 50px;
    line-height: 5vw;
    cursor:pointer;
    img{
      display:inline-block;
      width:100%;
    }
  }
  .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/components/ProcessModelDetails.vue

New file
@@ -0,0 +1,523 @@
<template>
  <!-- top="10vh" -->
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="islook"
    width="758px"
    class="add-event-dialog"
    :show-close="false"
    append-to-body
  >
    <div class="tank-box">
      <div slot="title" class="tac drawerHeader">
        <span class="title-l">工艺详情</span>
        <span class="title-r" @click="closeClick">
          <img src="../../public/close.png" />
        </span>
      </div>
      <div class="dialog-content-box">
        <div
          style="
            margin: 0 auto;
            width: 100%;
            height: 100%;
            overflow: hidden;
            text-align: left;
          "
        >
          <template>
            <div class="title-auto-box">
              <div class="title-box-t margin_bottom_20">
                  <div class="item-l">
                    <div class="item-l-t">{{ processObj.name }}</div>
                    <div class="item-l-b">{{ processObj.name }}</div>
                  </div>
                  <div class="item-r">
                    工艺编号：{{ processObj.number }}
                  </div>
              </div>
              <div class="title-box-b">
                <div class="item-b-t">更新设置</div>
                <div class="item-b-m">
                  <div class="item-b-b-l"><span class="el-icon-refresh"></span></div>
                  <div class="item-b-b-r">
                    <span>已检查到新版本：H2131221</span>
                    <div class="item-b-btn">
                      更新工艺
                    </div>
                  </div>
                </div>
                <div class="item-b-b">
                  <div class="item-two-l">
                    <div class="item-two-t">{{ processObj.name }}</div>
                    <div class="item-two-b">{{ processObj.name }}</div>
                  </div>
                  <div class="item-two-r">
                    新版本：{{ processObj.number }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div slot="footer" class="dialog-footer tac" style="overflow: hidden">
      </div>
     
    </div>
    
  </el-dialog>
</template>

<script>
import {
  startTask,
  sendProcessParams,
} from "@/api/home/index"; // 产线
export default {
  components: {},
  props: {
    processObj: {
      type: [Object],
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      islook: false,
      isLoading:false,
    };
  },
  mounted() {
    this.getInfo();
  },
  watch: {
    islook(){
    },
  },
  methods: {
    processDetailsClick(item){

    },
    closeClick() {
      this.shutdown();
    },
    getInfo() {
      // 1 未生产 2生产中 3生产完成
      if (
        Object.keys(this.processObj).length > 0
      ) {
          this.islook = true;
      } else {
        this.islook = false;
      }
    },
    shutdown() {
      this.islook = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.color_error{
  color:red;
}
.color_success{
  color:green;
}
.tank-box {
  width:758px;
  height:593px;
  background: url("../../public/tank-two.png") no-repeat center center / cover;
  position: relative;
  .dialog-footer {
    position: absolute;
    bottom: 45px;
    width:100%;
    text-align:center;
    
  }
  
}
.margin_right_20px{
      margin-right:20px;
}
.margin-top-10px{
  margin-top:10px;
}
.margin-top-40px{
  margin-top:40px;
}
.color_organge {
  background: #f76c0f;
  color:#fff;
  border:0!important;
  font-size:14px;
  padding:10px 15px!important;
}
.color_blue{
  background:#4343f5!important;
  border:0!important;
  font-size:16px;
  padding:10px 25px!important;
}
.color_4efefa {
  color: #4efefa !important;
}
.color_fff {
  color: #fff;
}
.font_size_20 {
  font-size: 20px !important;
}
.font_weight{
  font-weight: 700;
}
.margin_bottom_13 {
  margin-bottom: 13px;
}
.title-box {
  width: calc(100% - 140px);
  height: auto;
  overflow: hidden;
  padding:0 70px;
}
.error-t {
  width: 100px;
  margin: 100px auto 40px;
  font-size:98px;
  span {
    display: inline-block;
  }
}
.error-m {
  line-height: 35px;
  font-size: 28px;
  color: #fff;
  margin-bottom: 20px;
  text-align: center;
}
::v-deep .el-dialog {
  background: transparent;
}
::v-deep .el-dialog__header {
  padding: 0 !important;
}
::v-deep .el-dialog__body {
  padding: 0 !important;
}
.btn-error{
  bottom:80px!important;
}

::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: #fff;
  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%;
  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: calc(100% - 140px);
  // overflow: hidden;
  padding: 60px 0px 10px;
  .el-form {
    overflow: hidden;
  }
  .title-auto-box {
    height: calc(100% - 0px);
    overflow: auto;
    width:calc(100% - 140px);
    margin: 0 auto; 
    padding-top:20px;
    .title-box-t{
      overflow:hidden;
      width:calc(100% - 80px);
      background:#0E246A;
      min-height:100px;
      height:auto;
      color:#fff;
      padding:15px 30px;
      border-radius: 6px;
      margin-bottom:20px;
      .item-auto-box{
        overflow:auto;
      }
      .item-l{
        width:calc(100% - 140px);
        height:100%;
        float:left;
        font-size:17px;
        .item-l-t{
          color:#4efefa;
          margin-bottom:20px;
        }
        .item-l-b{
          font-size:16px;
        }
      }
      .item-r{
        width:120px;
        padding:10px 10px;
        border-radius:10px;
        background:#4343f5;
        float:left;
        text-align:center;
      }
    }
    .title-box-b{
      overflow:hidden;
      width:calc(100% - 80px);
      background:#0E246A;
      min-height:250px;
      height:auto;
      color:#fff;
      padding:15px 30px;
      border-radius: 6px;
      .item-b-t{
        font-size:18px;
        margin-bottom:10px;
      }
      .item-b-m{
        width:100%;
        margin:0 auto;
        overflow:hidden;
        .item-b-b-l{
          float:left;
          width:calc(40%  - 5px);
          border-right:3px solid #fff;
          span{
            width:50px;
            height:50px;
            background:#fff;
            border-radius: 50%;
            color:blue;
            font-size:30px;
            line-height:50px;
            text-align:center;
            display:inline-block;
            font-weight: 700;
            float:right;
            margin-right:20px;
          }
        }
        .item-b-b-r{
          width:calc(60% - 20px);
          margin-left:20px;
          float:left;
          span{
            display:inline-block;
            width:100%;
            
          }
          .item-b-btn{
            width:90px;
            padding:8px 10px;
            border-radius:10px;
            background:#4343f5;
            float:left;
            text-align:center;
            margin-top:10px;
          }
        }
      }
      .item-b-b{
        width:calc(100% - 160px);
        margin:10px auto 0;
        border:1px dotted #fff;
        height:calc(100% - 40px);
        overflow:hidden;
        color:#fff;
        padding:10px 10px 10px 30px;
        .item-two-l{
          width:calc(100% - 140px);
          height:100%;
          float:left;
          font-size:14px;
          .item-two-t{
            margin-bottom:10px;
          }
          .item-two-b{
            font-size:14px;
          }
        }
        .item-two-r{
          width:120px;
          padding:10px 10px;
          border-radius:10px;
          float:left;
          text-align:right;
        }
      }
    }
  }
  .gif-box{
    width:230px;
    margin:0 auto;
    margin-bottom:5px;
    .gif-right{
      width:210px;
      font-size:14px;
      color:#fff;
      line-height:28px;
      span{
        font-weight: 700;
        font-size:18px;
      }
    }
  }
  .gif{
    width:55px;
    vertical-align: middle;
    float:left;
    margin-right:20px;
    img{
      width:100%;
    }
    .yuandian {
        width: 55px;
        height: 55px;
        float:left;
        // background: #15d815;
        background:red;
        border-radius: 50%;
        // margin-top:-5px;
        vertical-align: middle;
      }
  }
  .progress-item {
    width: 55%;
    padding: 2px 8px;
    height: 20px;
    background: #fff;
    border-radius: 30px;
    margin: 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 1px 5px 5px rgba(255, 255, 255, 0.5);
    span {
      float: left;
      font-weight: 700;
      color: #333;
      font-size: 15px;
    }
  }
}
.num-identify {
  padding: 5px 8px;
  background-color: rgba(255, 153, 0, 1);
  border-radius: 6px;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}
.drawerHeader {
  width:99%;
  margin:0 auto;
  overflow:hidden;
  .title-l{
    width:25%;
    float:left;
    margin-left:30px;
    font-size: 22px;
    color: #fff;
    height: 3.2vw;
    line-height: 4.5vw;
  }
  .title-r{
    width:60px;
    float:right;
    height: 50px;
    line-height: 5vw;
    cursor:pointer;
    img{
      display:inline-block;
      width:100%;
    }
  }
  .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

@@ -360,9 +360,9 @@
              ></p>
              <div class="right-small-btn bottom-box-btn">
                <el-button type="primary"> 打印</el-button>
                <el-button v-if="taskData.Procedure.Status==3" type="primary" class="huise"> 完成</el-button>
                
                <el-popover
                 v-else
                v-if="taskData.Procedure.Status!=3"
                  placement="top-end"
                  width="160"
                  class="button-finish"
@@ -385,6 +385,7 @@
                  </div>
                  <el-button type="primary" slot="reference"> 完成</el-button>
                </el-popover>
                <el-button  v-else type="primary" class="huise"> 完成</el-button>
              </div>
            </div>
            <i class="el-icon-arrow-right font-arrow-20 color_318583"></i>
@@ -603,6 +604,11 @@
      @getSetProductNumber="reloadPage"
      @isTip="isTip"
    />
    <!-- 工艺模型 -->
    <ProcessModel
      ref="processModel"
      :processList="processList"
    />
  </div>
</template>

@@ -621,12 +627,14 @@
import Knowledge from "../components/Knowledge.vue";
import AddControl from "../components/AddControl.vue";
import AddIssue from "../components/AddIssue.vue";
import ProcessModel from  "../components/ProcessModel.vue";
export default {
  components: {
    Card,
    Knowledge,
    AddControl,
    AddIssue,
    ProcessModel,
  },
  data() {
    return {
@@ -746,6 +754,16 @@
        outputMaterials: [],
        procedureList: [],
      },
      processList:[
        {
          name:'产品1+工艺2',
          number:'v1.0'
        },
        {
          name:'产品1+工艺2',
          number:'v2.0'
        }
      ]
    };
  },
  mounted() {