1、调整导航栏为侧边模式时的项目标题 2、调整页面顶部栏颜色 3、解决设备报警页面由于缩放引起的组件遮挡文字问题 4、总控车间看板右侧图表调整为自动轮...

zhaowei

2024-10-12 f7cc97f27910c7d570f07df5d0dbd29d3f06049c

 src/views/mdc/base/SubControlWorkshopSignage.vue

@@ -2,8 +2,12 @@
  <div class="full-screen">

    <div class="page-title">
      <div style="margin-right: 10vw">{{$route.params.id}}#</div>
      <div>{{getSubControlSignageName}}</div>
      <div style="margin-right: 10vw">{{currentProductionInfo.productionOrder}}#</div>
      <div>{{currentProductionInfo.productionName}}</div>
    </div>

    <div class="load-more">
      <div @click="modalVisible=true">点击查看更多>></div>
    </div>

    <table class="plan-table">
@@ -36,300 +40,340 @@

      <tbody>
      <tr v-for="(item,index) in todayProductionPlanList" :key="index">
        <td colspan="2">{{item.machineId}}</td>
        <td colspan="2">{{item.productionName}}</td>
        <a-tooltip :destroyTooltipOnHide="true" placement="topRight" @mouseenter="mouseEnterItem">
          <template slot="title">
            <span style="font-size: 1vw">{{item.partCode}}</span>
          </template>
          <td colspan="2">{{item.partCode}}</td>
        </a-tooltip>
        <td colspan="2">{{item.partName}}</td>
        <td>{{item.planQuantity}}</td>
        <td>{{item.finishedQuantity}}</td>
        <td>{{item.qualifiedQuantity}}</td>
        <td>{{item.finishedQuantity?(item.qualifiedQuantity/item.finishedQuantity)*100+'%':''}}</td>
        <td colspan="2">{{item.processNum}}</td>
        <td colspan="2">{{item.orderNum}}</td>
        <td>{{item.groupName}}</td>
        <template v-if="index<3">
          <td colspan="2">{{item.equipmentId}}</td>
          <td colspan="2">{{item.equipmentName}}</td>
          <a-tooltip :destroyTooltipOnHide="true" placement="topRight" @mouseenter="mouseEnterItem">
            <template slot="title">
              <span style="font-size: 1vw">{{item.productNo}}</span>
            </template>
            <td colspan="2">{{item.productNo}}</td>
          </a-tooltip>
          <td colspan="2">{{item.productName}}</td>
          <td>{{item.planCount}}</td>
          <td>{{item.completionCount}}</td>
          <td>{{item.qualifiedCount}}</td>
          <td>{{item.passRate+'%'}}</td>
          <td colspan="2">{{item.processRoute}}</td>
          <td colspan="2">{{item.orderId}}</td>
          <td>{{item.clazz}}</td>
        </template>
      </tr>
      </tbody>
    </table>

    <div class="line-bg"></div>
    <div class="device-container">
      <div class="single-device-container" v-for="item in equipmentStatusList" :key="item.id"
           :style="{marginRight:isDeviceContinuous(currentProductionInfo.productionOrder)?'':'5%'}">
        <div class="status-image-container">
          <img src="@/assets/page/subControlWorkshopSignage/grey.png" v-if="item.oporation===0">
          <img src="@/assets/page/subControlWorkshopSignage/green.png" v-if="item.oporation===3">
          <img src="@/assets/page/subControlWorkshopSignage/yellow.png" v-if="item.oporation===2">
          <img src="@/assets/page/subControlWorkshopSignage/red.png" v-if="item.oporation===22">
        </div>
        <div class="device-image-container">
          <img :src="require('@/assets/page/subControlWorkshopSignage/'+item.equipmentId+'.png')">
        </div>
        1
        <div class="device-name">
          {{item.equipmentName}}
        </div>
      </div>
    </div>

    <div class="bottom-container">

      <div class="alarm-container">
        <div class="alarm-title">报警信息</div>
        <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>

    <SignageModal :todayProductionPlanList="todayProductionPlanList" :modalVisible="modalVisible"
                  @closeModal="modalVisible=false"/>
  </div>
</template>

<script>
  import moment from 'moment'
  import api from '@/api/mdc'
  import SignageModal from './modules/SubControlWorkshopSignage/SignageModal'

  export default {
    name: 'SubControlWorkshopSignage',
    components: {},
    components: { SignageModal },
    data() {
      return {
        todayProductionPlanList: [
        currentProductionInfo: {
          productionId: '',
          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: [],
        equipmentStatusList: [
          {
            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箱体班'
            oporation: 0,
            equipmentId: '5045-7076'
          },
          {
            machineId: '5899-8060',
            productionName: '桁架',
            partCode: 'LY1104-3-38C-105',
            partName: '传动箱壳体',
            planQuantity: 21,
            finishedQuantity: 13,
            qualifiedQuantity: 13,
            processNum: '35',
            orderNum: '2407093503003',
            groupName: '80箱体班'
            oporation: 3,
            equipmentId: '5068-7005'
          },
          {
            machineId: '5899-8060',
            productionName: '桁架',
            partCode: '1204-1.38D.185-1',
            partName: '后传动箱壳体',
            planQuantity: 9,
            finishedQuantity: 0,
            qualifiedQuantity: 0,
            processNum: '35',
            orderNum: '2407103501002',
            groupName: '80箱体班'
            oporation: 22,
            equipmentId: '5045-7157'
          },
          {
            oporation: 2,
            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,
        modalVisible: false
      }
    },
    created() {
      this.currentProductionInfo = Object.assign({}, this.$route.query)
      console.log('this.currentProductionInfo', this.currentProductionInfo)
      this.getTodayProductionPlanByApi()
      this.getEquipmentStatusByApi()
      this.getToolLifeListByApi()
    },
    computed: {
      getSubControlSignageName() {
        let subControlSignageName = ''
        switch (+this.$route.params.id) {
          case 1:
            subControlSignageName = '1024后箱加工线'
            break
          case 2:
            subControlSignageName = '1024前箱加工线'
            break
          case 3:
            subControlSignageName = '前托架加工线'
            break
          case 4:
            subControlSignageName = '80传动壳加工线'
            break
          case 5:
            subControlSignageName = '80减速器壳体加工线'
            break
          case 6:
            subControlSignageName = '箱体加工线'
            break
          case 7:
            subControlSignageName = '差速器轴承座加工线'
            break
          case 8:
            subControlSignageName = '制动器活塞加工线'
            break
          case 9:
            subControlSignageName = '中小件加工线'
            break
        }
        return subControlSignageName
      },
      getCurrentYear() {
        return moment().format('YYYY')
      },
@@ -340,10 +384,54 @@
        return moment().format('DD')
      },
      getTotalPlanQuantity() {
        return this.todayProductionPlanList.reduce((sum, item) => sum + item.planQuantity, 0)
        if (this.todayProductionPlanList.length > 0) return this.todayProductionPlanList.reduce((sum, item) => sum + item.planCount, 0)
        else return 0
      }
    },
    methods: {
      getTodayProductionPlanByApi() {
        api.getTodayProductionPlanApi(this.currentProductionInfo.productionId)
          .then(res => {
            if (res.success) this.todayProductionPlanList = res.result
          })
      },

      clickToLoadMore() {

      },

      getEquipmentStatusByApi() {
        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) {
        if (record.currentLife / record.ratedLife > 0.8) {
          return '#FF9A10'
@@ -355,6 +443,17 @@
      mouseEnterItem(e) {
        if (e.target.clientWidth >= e.target.scrollWidth) {
          e.target.style.pointerEvents = 'none' // 阻止鼠标事件    pointer-events 属性用于设置元素是否对鼠标事件做出反应。
        }
      },

      isDeviceContinuous(productionOrder) {
        switch (+productionOrder) {
          case 4:
            return true
          case 5:
            return true
          default:
            return false
        }
      }
    }
@@ -373,12 +472,7 @@
    flex-direction: column;
    justify-content: space-between;
    cursor: default;

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

    .page-title {
      display: flex;
@@ -386,8 +480,29 @@
      font-size: 2.5vw;
    }

    .load-more {
      display: flex;
      justify-content: flex-end;
      -webkit-justify-content: flex-end;
      font-size: 1vw;

      div {
        background-color: #83BF31;
        margin: 0 0.5% 0.5% 0;
        padding: 0 0.3%;
        cursor: pointer;
      }
    }

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

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

@@ -406,15 +521,43 @@
      }
    }

    .line-bg {
    .device-container {
      height: 30%;
      background-image: url("../../../assets/1 Line.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      /*background-image: url("../../../assets/1 Line.jpg");*/
      /*background-repeat: no-repeat;*/
      /*background-size: 100% 100%;*/
      display: flex;
      justify-content: center;

      .single-device-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 2%;
        font-size: 1vw;

        .status-image-container {
          height: 20%;
        }

        .device-image-container {
          height: 50%;
          margin-bottom: 5%;
        }

        .device-name {
          height: 10%;
        }
      }

      img {
        height: 100%;
      }
    }

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

@@ -434,22 +577,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>