实现分控车间看板刀具寿命管理数据由后台驱动

zhaowei

2024-10-09 43dfca98067a8699d482aa562e039613061f77eb

 src/views/mdc/base/SubControlWorkshopSignage.vue

@@ -67,7 +67,8 @@
        </div>
        <div class="device-image-container">
          <img :src="require('@/assets/page/subControlWorkshopSignage/'+item.equipmentId+'.png')">
        </div>1
        </div>
        1
        <div class="device-name">
          {{item.equipmentName}}
        </div>
@@ -80,32 +81,45 @@
        <div class="alarm-content"></div>
      </div>

      <table class="manage-table">
        <tr class="table-head">
          <td rowspan="9" style="width: 3vw">
            <div class="table-title">刀具寿命管理</div>
          </td>
          <td></td>
          <td v-for="(item,index) in toolLife.brandList" :key="index" colspan="2">{{item}}</td>
        </tr>
      <div class="table-container">
        <div class="table-title">
          <div>刀具寿命管理</div>
        </div>
        <div class="table-body-container">
          <table class="manage-table">
            <tr class="table-head">
              <!--<td :rowspan="maxBrandToolLifeListLength*2+1" style="width: 3vw"></td>-->
              <td></td>
              <td v-for="(item,index) in toolLife.brandList" :key="index" colspan="2">{{item}}</td>
            </tr>

        <template v-for="(listItem,listIndex) in toolLife.lifeList">
          <tr>
            <td style="width: 7vw">额定寿命</td>
            <template v-for="(item,index) in listItem">
              <td rowspan="2" style="width: 2.5vw">{{item.period}}</td>
              <td style="width: 5vw">{{item.ratedLife}}</td>
            </template>
          </tr>
            <template v-for="(listItem,listIndex) in maxBrandToolLifeListLength">
              <template>
                <tr>
                  <td style="width: 7vw">额定寿命</td>
                  <template v-for="(item,index) in toolLife.brandList">
                    <td rowspan="2" style="width: 2.5vw">
                      {{toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex].tid:'':''}}
                    </td>
                    <td style="width: 5vw">
                      {{toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex].initLife:'':''}}
                    </td>
                  </template>
                </tr>

          <tr>
            <td>当前寿命</td>
            <template v-for="(item,index) in listItem">
              <td :style="{backgroundColor:getToolCurrentLifeDataBgColor(item)}">{{item.currentLife}}</td>
                <tr>
                  <td>当前寿命</td>
                  <template v-for="(item,index) in toolLife.brandList">
                    <td :style="{backgroundColor:getToolCurrentLifeDataBgColor(item)}">
                      {{toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex].currentLife:'':''}}
                    </td>
                  </template>
                </tr>
              </template>
            </template>
          </tr>
        </template>
      </table>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
@@ -124,44 +138,45 @@
          productionName: '',
          productionOrder: ''
        },
        todayProductionPlanList: [
          {
            machineId: '5899-8060',
            productionName: '桁架',
            partCode: '1204-1.38d.185-1-5351-SD',
            partName: '后传动箱壳体',
            planQuantity: 9,
            finishedQuantity: 7,
            qualifiedQuantity: 7,
            processNum: '35',
            orderNum: '2407093503002',
            groupName: '80箱体班'
          },
          {
            machineId: '5899-8060',
            productionName: '桁架',
            partCode: 'LY1104-3-38C-105',
            partName: '传动箱壳体',
            planQuantity: 21,
            finishedQuantity: 13,
            qualifiedQuantity: 13,
            processNum: '35',
            orderNum: '2407093503003',
            groupName: '80箱体班'
          },
          {
            machineId: '5899-8060',
            productionName: '桁架',
            partCode: '1204-1.38D.185-1',
            partName: '后传动箱壳体',
            planQuantity: 9,
            finishedQuantity: 0,
            qualifiedQuantity: 0,
            processNum: '35',
            orderNum: '2407103501002',
            groupName: '80箱体班'
          }
        ],
        // todayProductionPlanList: [
        //   {
        //     machineId: '5899-8060',
        //     productionName: '桁架',
        //     partCode: '1204-1.38d.185-1-5351-SD',
        //     partName: '后传动箱壳体',
        //     planQuantity: 9,
        //     finishedQuantity: 7,
        //     qualifiedQuantity: 7,
        //     processNum: '35',
        //     orderNum: '2407093503002',
        //     groupName: '80箱体班'
        //   },
        //   {
        //     machineId: '5899-8060',
        //     productionName: '桁架',
        //     partCode: 'LY1104-3-38C-105',
        //     partName: '传动箱壳体',
        //     planQuantity: 21,
        //     finishedQuantity: 13,
        //     qualifiedQuantity: 13,
        //     processNum: '35',
        //     orderNum: '2407093503003',
        //     groupName: '80箱体班'
        //   },
        //   {
        //     machineId: '5899-8060',
        //     productionName: '桁架',
        //     partCode: '1204-1.38D.185-1',
        //     partName: '后传动箱壳体',
        //     planQuantity: 9,
        //     finishedQuantity: 0,
        //     qualifiedQuantity: 0,
        //     processNum: '35',
        //     orderNum: '2407103501002',
        //     groupName: '80箱体班'
        //   }
        // ],
        todayProductionPlanList: [],
        equipmentStatusList: [
          {
            oporation: 0,
@@ -180,159 +195,164 @@
            equipmentId: '5045-7815'
          }
        ],
        // toolLife: {
        //   brandList: ['北齐二', '铱 镏', '森 五', '东 曼', '西 曼', '西 德', '东 德'],
        //   lifeList: [
        //     [
        //       {
        //         period: 'T3',
        //         ratedLife: 987,
        //         currentLife: 976
        //       },
        //       {
        //         period: 'T3',
        //         ratedLife: 999,
        //         currentLife: 864
        //       },
        //       {
        //         period: 'T5',
        //         ratedLife: 879,
        //         currentLife: 657
        //       },
        //       {
        //         period: 'T10',
        //         ratedLife: 984,
        //         currentLife: 795
        //       },
        //       {
        //         period: 'T7',
        //         ratedLife: 954,
        //         currentLife: 756
        //       },
        //       {
        //         period: 'T4',
        //         ratedLife: 1080,
        //         currentLife: 785
        //       },
        //       {
        //         period: 'T7',
        //         ratedLife: 1504,
        //         currentLife: 1274
        //       }
        //     ],
        //     [
        //       {
        //         period: 'T1',
        //         ratedLife: 786,
        //         currentLife: 686
        //       },
        //       {
        //         period: 'T1',
        //         ratedLife: 934,
        //         currentLife: 854
        //       },
        //       {
        //         period: 'T8',
        //         ratedLife: 799,
        //         currentLife: 486
        //       },
        //       {
        //         period: 'T2',
        //         ratedLife: 982,
        //         currentLife: 765
        //       },
        //       {
        //         period: 'T4',
        //         ratedLife: 982,
        //         currentLife: 752
        //       },
        //       {
        //         period: 'T8',
        //         ratedLife: 1020,
        //         currentLife: 580
        //       },
        //       {
        //         period: 'T8',
        //         ratedLife: 1086,
        //         currentLife: 1075
        //       }
        //     ],
        //     [
        //       {
        //         period: 'T2',
        //         ratedLife: 654,
        //         currentLife: 465
        //       },
        //       {
        //         period: 'T5',
        //         ratedLife: 1087,
        //         currentLife: 796
        //       },
        //       {
        //         period: 'T4',
        //         ratedLife: 764,
        //         currentLife: 423
        //       },
        //       {
        //         period: 'T3',
        //         ratedLife: 1090,
        //         currentLife: 756
        //       },
        //       {
        //         period: 'T8',
        //         ratedLife: 954,
        //         currentLife: 513
        //       },
        //       {
        //         period: 'T2',
        //         ratedLife: 775,
        //         currentLife: 575
        //       },
        //       {
        //         period: 'T5',
        //         ratedLife: 1216,
        //         currentLife: 752
        //       }
        //     ],
        //     [
        //       {
        //         period: 'T6',
        //         ratedLife: 756,
        //         currentLife: 355
        //       },
        //       {
        //         period: 'T9',
        //         ratedLife: 984,
        //         currentLife: 763
        //       },
        //       {
        //         period: 'T3',
        //         ratedLife: 385,
        //         currentLife: 264
        //       },
        //       {
        //         period: 'T4',
        //         ratedLife: 952,
        //         currentLife: 752
        //       },
        //       {
        //         period: 'T3',
        //         ratedLife: 454,
        //         currentLife: 246
        //       },
        //       {
        //         period: 'T9',
        //         ratedLife: 635,
        //         currentLife: 255
        //       },
        //       {
        //         period: 'T9',
        //         ratedLife: 1300,
        //         currentLife: 670
        //       }
        //     ]
        //   ]
        // },
        toolLife: {
          brandList: ['北齐二', '铱 镏', '森 五', '东 曼', '西 曼', '西 德', '东 德'],
          lifeList: [
            [
              {
                period: 'T3',
                ratedLife: 987,
                currentLife: 976
              },
              {
                period: 'T3',
                ratedLife: 999,
                currentLife: 864
              },
              {
                period: 'T5',
                ratedLife: 879,
                currentLife: 657
              },
              {
                period: 'T10',
                ratedLife: 984,
                currentLife: 795
              },
              {
                period: 'T7',
                ratedLife: 954,
                currentLife: 756
              },
              {
                period: 'T4',
                ratedLife: 1080,
                currentLife: 785
              },
              {
                period: 'T7',
                ratedLife: 1504,
                currentLife: 1274
              }
            ],
            [
              {
                period: 'T1',
                ratedLife: 786,
                currentLife: 686
              },
              {
                period: 'T1',
                ratedLife: 934,
                currentLife: 854
              },
              {
                period: 'T8',
                ratedLife: 799,
                currentLife: 486
              },
              {
                period: 'T2',
                ratedLife: 982,
                currentLife: 765
              },
              {
                period: 'T4',
                ratedLife: 982,
                currentLife: 752
              },
              {
                period: 'T8',
                ratedLife: 1020,
                currentLife: 580
              },
              {
                period: 'T8',
                ratedLife: 1086,
                currentLife: 1075
              }
            ],
            [
              {
                period: 'T2',
                ratedLife: 654,
                currentLife: 465
              },
              {
                period: 'T5',
                ratedLife: 1087,
                currentLife: 796
              },
              {
                period: 'T4',
                ratedLife: 764,
                currentLife: 423
              },
              {
                period: 'T3',
                ratedLife: 1090,
                currentLife: 756
              },
              {
                period: 'T8',
                ratedLife: 954,
                currentLife: 513
              },
              {
                period: 'T2',
                ratedLife: 775,
                currentLife: 575
              },
              {
                period: 'T5',
                ratedLife: 1216,
                currentLife: 752
              }
            ],
            [
              {
                period: 'T6',
                ratedLife: 756,
                currentLife: 355
              },
              {
                period: 'T9',
                ratedLife: 984,
                currentLife: 763
              },
              {
                period: 'T3',
                ratedLife: 385,
                currentLife: 264
              },
              {
                period: 'T4',
                ratedLife: 952,
                currentLife: 752
              },
              {
                period: 'T3',
                ratedLife: 454,
                currentLife: 246
              },
              {
                period: 'T9',
                ratedLife: 635,
                currentLife: 255
              },
              {
                period: 'T9',
                ratedLife: 1300,
                currentLife: 670
              }
            ]
          ]
        }
          brandList: [],
          lifeList: []
        },
        maxBrandToolLifeListLength: null
      }
    },
    created() {
@@ -340,6 +360,7 @@
      console.log('this.currentProductionInfo', this.currentProductionInfo)
      this.getTodayProductionPlanByApi()
      this.getEquipmentStatusByApi()
      this.getToolLifeListByApi()
    },
    computed: {
      getCurrentYear() {
@@ -367,6 +388,30 @@
        api.getEquipmentStatusApi(this.currentProductionInfo.productionId)
          .then(res => {
            if (res.success) this.equipmentStatusList = res.result
          })
      },
      getToolLifeListByApi() {
        api.getToolLifeListApi(this.currentProductionInfo.productionId)
          .then(res => {
            console.log('res', res)
            if (res.success && res.result.length > 0) {
              const brandList = []
              let lifeList = []
              res.result.forEach(item => {
                if (!brandList.includes(item.equipmentName)) {
                  brandList.push(item.equipmentName)
                }
              })
              brandList.forEach(brand => {
                const currentBrandLifeList = res.result.filter(item => item.equipmentName === brand)
                lifeList.push(currentBrandLifeList)
              })
              this.maxBrandToolLifeListLength = Object.assign([], lifeList).sort((a, b) => b.length - a.length)[0].length
              console.log('brandList', brandList)
              console.log('lifeList', lifeList)
              console.log('maxBrandToolLifeListLength', this.maxBrandToolLifeListLength)
              this.toolLife = { brandList, lifeList }
            }
          })
      },
      getToolCurrentLifeDataBgColor(record) {
@@ -409,12 +454,7 @@
    flex-direction: column;
    justify-content: space-between;
    cursor: default;

    table {
      td {
        border: 0.1vw solid #fff;
      }
    }
    overflow: hidden;

    .page-title {
      display: flex;
@@ -422,8 +462,15 @@
      font-size: 2.5vw;
    }

    table {
      td {
        border: 0.1vw solid #fff;
      }
    }

    .plan-table {
      width: 100%;
      flex: 1;
      font-size: 1.2vw;
      table-layout: fixed;

@@ -443,7 +490,7 @@
    }

    .device-container {
      height: 40%;
      height: 30%;
      /*background-image: url("../../../assets/1 Line.jpg");*/
      /*background-repeat: no-repeat;*/
      /*background-size: 100% 100%;*/
@@ -456,6 +503,7 @@
        flex-direction: column;
        align-items: center;
        padding-top: 2%;
        font-size: 1vw;

        .status-image-container {
          height: 20%;
@@ -468,7 +516,6 @@

        .device-name {
          height: 10%;
          font-size: 1vw;
        }
      }

@@ -478,7 +525,7 @@
    }

    .bottom-container {
      flex: 1;
      height: 35%;
      display: flex;
      justify-content: space-between;

@@ -498,22 +545,44 @@
        }
      }

      .manage-table {
      .table-container {
        width: 64%;
        font-size: 1vw;
        text-align: center;
        height: 100%;
        display: flex;

        .table-head {
          height: 3vw;
        .table-title {
          height: 100%;
          background-color: #639AFF;
          writing-mode: vertical-lr;
          font-size: 2.2vw;
          display: flex;
          justify-content: center;
          border: 0.1vw solid #fff;
          border-right: none;
        }

          .table-title {
            writing-mode: vertical-lr;
            font-size: 1.8vw;
        .table-body-container {
          flex: 1;
          overflow: auto;

          .manage-table {
            width: 100%;
            font-size: 1vw;
            text-align: center;
            border-collapse: separate;
            border-spacing: 0;
            position: relative;

            .table-head {
              height: 3vw;
              background-color: #639AFF;
              position: sticky;
              position: -webkit-sticky;
              top: 0;
            }
          }
        }
      }

    }
  }
</style>