feat: 工序添加工艺参数展示

songshankun

2023-10-08 3d3b89a84fd8c3aa524c013afe56c6949fc3a874

feat: 工序添加工艺参数展示

 src/views/visualization.vue

@@ -271,11 +271,12 @@
                  v-for="(item, index) in taskData.procedureList"
                >
                  <div
                    class="card"
                    :key="index2"
                    v-for="(list, index2) in item"
                  >
                    <template v-if="list.name == '工序'">
                    <div
                      class="card"
                      v-if="list.name == '工序'">
                      <div class="card_content">
                        <div class="card_contentLeft color_blue font_dian">
                          <!-- {{ list.deviceName }} -->
@@ -333,24 +334,34 @@
                        <!-- <span class="card-top-r-t">完成进度：50%</span>
                          <span class="card-top-r-b">12月28日 08:24</span> -->
                      </div>
                    </template>
                    <template v-else>
                      <!-- <div class="card_content">

                      </div> -->
                      <div :class="(activeName==1||activeName == 3)?'card_top-4 font_size_20px':'card_top-4'">
                        <div>工艺编号：<div >{{ list.number }}</div></div>
                        <!-- <div
                          style="
                            font-size: 14px;
                            color: #cfcfcf;
                            line-height: 20px;
                          "
                    </div>
                    <div v-else class="process-params">
                      <div class="process-params-title">
                        <el-popover
                          width="200"
                          :content="list.number"
                          placement="top-start"
                          trigger="click"
                        >
                          工艺的具体信息请点击控制查看！
                        </div> -->
                          <span slot="reference">工艺编号：{{ list.number }}</span>
                        </el-popover>

                      </div>
                    </template>
                      <div class="process-params-value">
                        <!-- 工艺参数-->
                        {{mergeProcessParams(taskData.Arr)}}
                      </div>

                      <!-- <div
                        style="
                          font-size: 14px;
                          color: #cfcfcf;
                          line-height: 20px;
                        "
                      >
                        工艺的具体信息请点击控制查看！
                      </div> -->
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
@@ -790,6 +801,13 @@
    // }
  },
  methods: {
    mergeProcessParams(params){
      if (params?.length){
        return params.map(ele=> `${ele.Key}: ${ele.Value}`).join(' ')
      }else{
        return ''
      }
    },
    taskClick(){
      if(this.TaskCount>0){
        // this.getStartArr()
@@ -1038,7 +1056,7 @@
                  this.TasksCopy[i].procedureList[0].push({
                    number: res.data.Number,
                  });
                  // this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : []
                  this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : []
                  // this.isFinsh=Number(i)+1
                }
              });
@@ -1459,8 +1477,7 @@
      overflow-y:auto;
    }
    .el-carousel__item{
    //  height:auto;
     min-height:160px;
      height:auto;
    }
  }
  .bottom-box-btn{
@@ -1969,4 +1986,23 @@
  font-weight: 700 !important;
  font-size: 16px;
}
.process-params{
  margin-top: 10px;
  border-radius: 5px;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  &-title{
    height: 25px;
    padding: 0 5px;
    background-color: #13235a;
    line-height: 25px;
  }
  &-value{
    background-color: #6b83ff;
    min-height: 45px;
    box-sizing: border-box;
    padding: 12px;
  }
}
</style>