面板需求

haoxuan

2023-08-19 4336b6e9141f2544363f4880fbd0d67f095e7074

 src/views/visualization.vue

@@ -15,20 +15,24 @@
            <span class="title-item"
              >订单编号:
              <span class="color_4efefa">{{
                taskData.order.orderId || ""
                taskData.Order.orderId || ""
              }}</span>
            </span>
            <span class="title-item"
              >当前工序:
              <span class="color_4efefa">{{
                taskData.procedure.procedure.procedureName || ""
                taskData.Procedure.procedure.procedureName || ""
              }}</span>
            </span>
            <span class="title-item"
              >后道工序: <span class="color_4efefa">Q-22038</span>
              >后道工序: <span class="color_4efefa">
                <!-- {{
                taskData.NextProcedure.procedure.procedureName || "--"
              }} -->
              </span>
            </span>
            <span class="title-item"
              >工作人数: <span class="color_4efefa">6人</span>
              >工作人数: <span class="color_4efefa">{{ taskData.Procedure.procedure.workers.length || 0}}人</span>
            </span>
          </div>
          <div class="content">
@@ -37,7 +41,7 @@
                <div class="small_title">当前完成</div>
                <div class="content_leftBttom">
                  <dl>
                    <dd style="font-size: 26px; font-weight: 600">0m</dd>
                    <dd style="font-size: 26px; font-weight: 600">{{ finishNumber }}{{  taskData.Order.unit }}</dd>
                  </dl>
                </div>
              </div>
@@ -45,7 +49,9 @@
                <div class="small_title">正品生产</div>
                <div class="content_leftBttom">
                  <dl>
                    <dd style="font-size: 26px; font-weight: 600">400m</dd>
                    <dd style="font-size: 26px; font-weight: 600">{{
                  taskData.Order.amount || 0
                }}{{  taskData.Order.unit }}</dd> 
                  </dl>
                </div>
              </div>
@@ -53,44 +59,50 @@
            <div class="content_right">
              <el-descriptions :column="2" :colon="true">
                <el-descriptions-item label="产品名称">{{
                  taskData.order.productName || ""
                  taskData.Order.productName || ""
                }}</el-descriptions-item>
                <el-descriptions-item label="数量:">{{
                  taskData.order.amount || ""
                <el-descriptions-item label="数量">{{
                  taskData.Order.amount || 0
                }}{{  taskData.Order.unit }}</el-descriptions-item>
                <el-descriptions-item label="交货日期">{{
                  taskData.Order.deliverDate || ""
                }}</el-descriptions-item>
                <el-descriptions-item label="交货日期:">{{
                  taskData.order.deliverDate || ""
                }}</el-descriptions-item>
                <el-descriptions-item label="工时:">
                  {{ taskData.order.deliverDate || "" }}
                <el-descriptions-item label="工时">
                  {{ taskData.Procedure.procedure.workHours || "" }}
                </el-descriptions-item>
                <el-descriptions-item label="起止时间">{{
                  taskData.order.startTime || ""
                }}</el-descriptions-item>
                  formatDate(taskData.Procedure.procedure.startTime)  || ""
                }}  - {{ formatDate(taskData.Procedure.procedure.endTime) }}</el-descriptions-item>
                <el-descriptions-item label="货物描述"
                  >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
                  >{{
                  taskData.Order.orderAttr || ""
                }}</el-descriptions-item
                >
                <el-descriptions-item label="客户名称"
                  >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
                  >{{
                  taskData.Order.customer || ""
                }}</el-descriptions-item
                >
                <el-descriptions-item label="参数要求"
                  >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
                  >{{
                  taskData.Order.parameter || ""
                }}</el-descriptions-item
                >
              </el-descriptions>
              <el-descriptions :column="1" :colon="true">
                <el-descriptions-item label="完成度" style="width: 100%">
                  <!--  -->
                  <!--:text-format="format"  -->
                  <el-progress
                    define-back-color="#007101"
                    color="#00CC66"
                    :text-inside="true"
                    :stroke-width="30"
                    :percentage="progress"
                    :text-format="format"
                    >完成率50%</el-progress
                    :percentage="parseInt(finishNumber/taskData.Order.amount)"
                    
                    ></el-progress
                  >
                </el-descriptions-item>
                <el-descriptions-item label="合格率" style="width: 100%">
                <!-- <el-descriptions-item label="合格率" style="width: 100%">
                  <el-progress
                    define-back-color="#007101"
                    color="#00CC66"
@@ -98,7 +110,7 @@
                    :stroke-width="30"
                    :percentage="passrate"
                  ></el-progress>
                </el-descriptions-item>
                </el-descriptions-item> -->
              </el-descriptions>
            </div>
          </div>
@@ -117,8 +129,8 @@
                class="card-box"
                ref="cardBox1"
                v-if="
                  taskData.procedure.procedure &&
                  taskData.procedure.procedure.inputMaterials
                  taskData.Procedure.procedure &&
                  taskData.Procedure.procedure.inputMaterials
                "
              >
                <el-carousel-item
@@ -132,21 +144,24 @@
                  >
                    <div class="card_content">
                      <div class="card_contentLeft">
                        包号:G22122304 100吨{{ index }}
                        {{ list.materialId}}
                      </div>
                    </div>
                    <div class="card_top">
                      <div>
                        设备12<i
                        <!-- 设备12<i
                          style="font-size: 14px"
                          class="el-icon-right font-arrow-20"
                        ></i>
                        设备13
                        设备13 -->
                        {{  list.materialName}} 
                      </div>
                    </div>
                    <div class="card_top-2">
                      <span class="card-top-r-t">生产完成</span>
                      <span class="card-top-r-b">12月28日 08:24</span>
                    <div class="card_top2">
                      <div style="line-height:45px;text-align:center;">
                      {{  list.amount}} {{ list.unit }}</div>
                      <!-- <span class="card-top-r-t">生产完成</span>
                      <span class="card-top-r-b">12月28日 08:24</span> -->
                    </div>
                  </div>
                </el-carousel-item>
@@ -154,61 +169,68 @@
            </div>
            <i class="el-icon-arrow-right font-arrow-20 color_4efefa"></i>
            <div class="bottom_list">
              <div class="bottom-title">当前工序:前纺(QF)</div>
              <div class="bottom-title">当前工序:{{
                taskData.Procedure.procedure.procedureName || ""
              }}</div>
              <el-carousel
                direction="vertical"
                height="calc(100% -  0px)"
                :interval="500"
                class="card-box"
                ref="cardBox2"
                v-if="
                  taskData.procedure.procedure &&
                  taskData.procedure.procedure.inputMaterials
                  taskData.Procedure.procedure &&
                  procedureList
                "
              >
                <el-carousel-item
                  :key="index"
                  v-for="(item, index) in inputMaterials"
                  v-for="(item, index) in procedureList"
                >
                  <div class="card" 
                  :key="index2"
                    v-for="(list, index2) in item">
                    <div class="card_content">
                      <div class="card_contentLeft color_blue">
                        包号:G22122304 100吨
                        <span style="float: right">6m/s</span>
                    <template v-if="list.name=='工序'">
                      <div class="card_content">
                        <div class="card_contentLeft color_blue">
                          {{ list.deviceName }}
                          <!-- <span style="float: right">6m/s</span> -->
                        </div>
                      </div>
                    </div>
                    <div class="card_top-3">
                      <span class="card-top-r-t">完成进度：50%</span>
                      <span class="card-top-r-b">
                        <el-progress
                          define-back-color="#007101"
                          color="#00CC66"
                          :text-inside="true"
                          :stroke-width="10"
                          :percentage="50"
                          :show-text="false"
                        ></el-progress>
                      </span>
                    </div>
                    <div class="card_top-2">
                      <span class="card-top-r-t">完成进度：50%</span>
                      <span class="card-top-r-b">12月28日 08:24</span>
                    </div>
                      <div class="card_top-3">
                        <span class="card-top-r-t">完成进度：{{ parseInt(finishNumber/taskData.Order.amount)||0 }}</span>
                        <span class="card-top-r-b">
                          <el-progress
                            define-back-color="#007101"
                            color="#00CC66"
                            :text-inside="true"
                            :stroke-width="10"
                            :percentage="parseInt(finishNumber/taskData.Order.amount)"
                            :show-text="false"
                          ></el-progress>
                        </span>
                      </div>
                      <div class="card_top-2">
                        <div style="line-height:45px;text-align:center;">
                        生产中</div>
                        <!-- <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 class="card_contentLeft color_blue">
                            工艺编号：{{ list.number }}
                          </div>
                        </div>
                        <div class="card_top-4">
                         工艺的具体信息请点击控制查看！
                        </div>
                    </template>
                  </div>
                </el-carousel-item>
              </el-carousel>
              <div class="card">
                <div class="card_content">
                  <div class="card_contentLeft color_blue">
                    包号:G22122304 100吨
                  </div>
                </div>
                <div class="card_top-4">
                  此模型用于数值检测，精准检测相关生产数据。
                  此模型用于数值检测，精准检测相关生产数据
                </div>
              </div>
              
              <p
                style="font-size: 22px; margin-left: 12px; margin-top: 50px"
              ></p>
@@ -228,8 +250,8 @@
                ref="cardBox3"
                class="card-box"
                v-if="
                  taskData.procedure.procedure &&
                  taskData.procedure.procedure.outputMaterials
                  taskData.Procedure.procedure &&
                  taskData.Procedure.procedure.outputMaterials
                "
              >
                <el-carousel-item
@@ -245,24 +267,28 @@
                    class="card"
                  >
                    <div class="card_content">
                      <div class="card_contentLeft">包号:G22122304 100吨</div>
                      <div class="card_contentLeft">{{  list.materialId}}</div>
                    </div>
                    <div class="card_top">
                      <div>
                        设备12<i
                        {{  list.materialName}}
                        <!-- 设备12<i
                          style="font-size: 14px"
                          class="el-icon-right font-arrow-20"
                        ></i>
                        设备13
                        设备13 -->
                      </div>
                    </div>
                    <div class="card_top-2">
                      <span class="card-top-r-t">生产完成</span>
                      <span class="card-top-r-b">12月28日 08:24</span>
                    <div class="card_top2">
                      <div style="line-height:45px;text-align:center;">
                      {{  list.amount}} {{ list.unit }}</div>
                      <!-- <span class="card-top-r-t">生产完成</span>
                      <span class="card-top-r-b">12月28日 08:24</span> -->
                      
                    </div>
                    <div class="card-info-box">预计10分钟送达</div>
                    <!-- <div class="card-info-box">预计10分钟送达</div> -->
                  </div>
                  <div class="card">
                  <!-- <div class="card">
                    <div class="card_content">
                      <div class="card_contentLeft color_green">
                        包号:G22122304 100吨
@@ -281,7 +307,7 @@
                      <span class="card-top-r-t">生产完成</span>
                      <span class="card-top-r-b">12月28日 08:24</span>
                    </div>
                  </div>
                  </div> -->
                </div>
                </el-carousel-item>
                </el-carousel>
@@ -315,22 +341,25 @@
        </div>
        <div class="right_dutyLst">
          <div class="right-small-title">当前值班</div>
          <dl class="right-small-person">
          <div class='right-person-box'>
          <dl class="right-small-person" v-for="(item,index) in taskData.Procedure.procedure.workers" :key="index">
            <dt>
              <el-avatar
              <!-- <el-avatar
                class="img-class"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              ></el-avatar> -->
              <i class="el-icon-s-custom color_green" style='margin:10px;font-size:40px; '/>
            </dt>
            <span
              style="font-size: 20px; font-weight: 600; margin-right: 10px"
              >{{ taskData.procedure.procedure.workers.workerName || "" }}</span
              >{{ item.workerName || "" }}</span
            >
            <span style="color: #666">{{
              taskData.procedure.procedure.workers.phoneNum || ""
              item.phoneNum || ""
            }}</span>
          </dl>
          <div
          </div>
          <!-- <div
            style="
              width: 100%;
              font-size: 18px;
@@ -340,8 +369,8 @@
              line-height: 50px;
            "
          >
            编号：{{ taskData.procedure.procedure.workers.workerId || "" }}
          </div>
            编号：{{ taskData.Procedure.procedure.workers.workerId || "" }}
          </div> -->
          <div class="right-small-btn">
            <el-button type="primary"> 打印</el-button>
            <el-popover
@@ -396,7 +425,7 @@
      </div>
    </template>
    <!-- 控制的弹框 -->
    <AddControl ref="control" :id="taskData.procedure.id" />
    <AddControl ref="control" :id="taskData.Procedure.ID" />
  </div>
</template>

@@ -406,6 +435,8 @@
  finishTask,
  getMiniDictList,
  saveMiniDict,
  startTask,
  getProgress,
} from "@/api/home/index"; // 产线
import Card from "@/components/Card.vue";
import Knowledge from "../components/Knowledge.vue";
@@ -421,12 +452,14 @@
      progress: 70, //进度
      passrate: 30, //合格率
      production: 25, //生产中
      finishNumber:0,
      // 右侧完成
      finishShow: false,
      inputMaterials: [],
      outputMaterials:[],
      procedureList:[],
      taskData: {
        order: {
        Order: {
          amount: "",
          customer: "",
          deliverDate: "",
@@ -439,57 +472,13 @@
          startTime: "",
          unit: "",
        },
        procedure: {
        Procedure: {
          id: 1,
          procedure: {
            deviceId: "",
            endTime: "",
            inputMaterials: [
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
            ],
            outputMaterials: [
              {
                amount: "",
                materialId: "",
                materialName: "",
                unit: "",
              },
            ],
            inputMaterials: [],
            outputMaterials: [],
            procedureId: "",
            procedureName: "",
            startTime: "",
@@ -513,9 +502,37 @@
    //   this.production = this.getRandomNumber(1, 100);
    // }, 3000);
    this.getTaskInfo();
    setInterval(() => {
      this.getProgressInfo()
    }, 60000);
  },

  methods: {
    getProgressInfo(){
      getProgress().then(res=>{
              if(res.code==200){
               
              }
            })
    },
    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 }
  },
    // 格式化时间 ==> yyyy-mm-dd
  formatDate (value, str) {
    if (value) {
      const dateObj = this.getDateObj(value)
       return '' + dateObj.y + '-' + dateObj.m + '-' + dateObj.d
    } else {
      return ''
    }
  },
    setInterCard(value, name) {
      let height = 200;
      let num = 1;
@@ -524,7 +541,7 @@
        num = Math.floor(height / 80);
      }
      let inputMaterials = JSON.parse(
        JSON.stringify(this.taskData.procedure.procedure[value])
        JSON.stringify(this.taskData.Procedure.procedure[value])
      );
      let newDataList = [];
      let current = 0;
@@ -552,8 +569,23 @@
    getTaskInfo() {
      getTaskInfo().then((res) => {
        if (res.code == 200) {
          this.taskData=res.data;
          this.procedureList.push([{
            name:'工序',
            ...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,name:'工艺'})
              }
            })
          }
          console.log(this.procedureList,'===1111procedureList')
          // setTimeout(() => {
            this.setInterCard("inputMaterials", "cardBox1");
            // this.setInterCard('procedureList','cardBox2')
            this.setInterCard('outputMaterials','cardBox3')
          // }, 5000);
        }
@@ -572,9 +604,12 @@
    },
    // 右侧完成
    finishClick() {
      finishTask({ id: this.taskData.procedure.id }).then((res) => {
      finishTask({ id: this.taskData.Procedure.ID }).then((res) => {
        if (res.code == 200) {
          this.finishShow=false;
          this.getTaskInfo()
          this.$message.success("操作成功！");
         
        }
      });
    },
@@ -977,6 +1012,7 @@
      background: #00cc66;
      margin-top: 10px;
      padding: 5px 10px;
      position:relative;
      .right-small-title {
        width: auto;
        padding: 5px;
@@ -985,22 +1021,29 @@
        border-radius: 8px;
        background: #007101;
      }
      .right-person-box{
        width:100%;
        height:calc(100% - 100px);
        overflow:auto;
        margin-top:20px;
      }
      .right-small-person {
        width: 100%;
        height: 60px;
        line-height: 60px;
        margin-top: 50px;
        margin-bottom:10px;
        border-radius: 10px;
        background: #fff;
        color: #333;
       

        dt {
          float: left;
          padding: 5px;
          
          margin-right: 10px;
          .img-class {
            height: 50px;
            padding: 0 !important;
            margin: 5px !important;
          }
        }
        span {
@@ -1011,6 +1054,9 @@
      .right-small-btn {
        margin-top: 10px;
        width: 100%;
        position:absolute;
        bottom:10px;
        left:0;
        overflow: hidden;
        .el-button--primary {
          width: 46%;