1、调整车间看板设备图片以及数据驱动 2、调整全局加载等待文字以及项目logo

zhaowei

2024-10-09 dc705861a89f6e92a6fb9208205166897ca5c3e0

 src/views/mdc/base/SubControlWorkshopSignage.vue

@@ -2,8 +2,8 @@
  <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>

    <table class="plan-table">
@@ -36,30 +36,45 @@

      <tbody>
      <tr v-for="(item,index) in todayProductionPlanList" :key="index">
        <td colspan="2">{{item.machineId}}</td>
        <td colspan="2">{{item.productionName}}</td>
        <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.partCode}}</span>
            <span style="font-size: 1vw">{{item.productNo}}</span>
          </template>
          <td colspan="2">{{item.partCode}}</td>
          <td colspan="2">{{item.productNo}}</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>
        <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>
      </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>
@@ -97,12 +112,18 @@

<script>
  import moment from 'moment'
  import api from '@/api/mdc'

  export default {
    name: 'SubControlWorkshopSignage',
    components: {},
    data() {
      return {
        currentProductionInfo: {
          productionId: '',
          productionName: '',
          productionOrder: ''
        },
        todayProductionPlanList: [
          {
            machineId: '5899-8060',
@@ -139,6 +160,24 @@
            processNum: '35',
            orderNum: '2407103501002',
            groupName: '80箱体班'
          }
        ],
        equipmentStatusList: [
          {
            oporation: 0,
            equipmentId: '5045-7076'
          },
          {
            oporation: 3,
            equipmentId: '5068-7005'
          },
          {
            oporation: 22,
            equipmentId: '5045-7157'
          },
          {
            oporation: 2,
            equipmentId: '5045-7815'
          }
        ],
        toolLife: {
@@ -296,40 +335,13 @@
        }
      }
    },
    created() {
      this.currentProductionInfo = Object.assign({}, this.$route.query)
      console.log('this.currentProductionInfo', this.currentProductionInfo)
      this.getTodayProductionPlanByApi()
      this.getEquipmentStatusByApi()
    },
    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 +352,23 @@
        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
          })
      },
      getEquipmentStatusByApi() {
        api.getEquipmentStatusApi(this.currentProductionInfo.productionId)
          .then(res => {
            if (res.success) this.equipmentStatusList = res.result
          })
      },
      getToolCurrentLifeDataBgColor(record) {
        if (record.currentLife / record.ratedLife > 0.8) {
          return '#FF9A10'
@@ -355,6 +380,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
        }
      }
    }
@@ -406,11 +442,39 @@
      }
    }

    .line-bg {
      height: 30%;
      background-image: url("../../../assets/1 Line.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    .device-container {
      height: 40%;
      /*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%;

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

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

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

      img {
        height: 100%;
      }
    }

    .bottom-container {