1、调整总控车间看板右侧图表标题 2、调整分控车间看板刀具寿命管理中的当前寿命颜色标识

zhaowei

2024-11-07 964ab96fa41fc3f465d3d274fb2121dffd11dc79

 src/views/mdc/base/SubControlWorkshopSignage.vue

@@ -6,6 +6,10 @@
      <div>{{currentProductionInfo.productionName}}</div>
    </div>

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

    <table class="plan-table">
      <thead>
      <tr style="position: relative">
@@ -36,39 +40,59 @@

      <tbody>
      <tr v-for="(item,index) in todayProductionPlanList" :key="index">
        <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 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>
      <template v-if="todayProductionPlanList.length<=3">
        <tr v-for="(item,index) in 3-todayProductionPlanList.length"
            :key="index">
          <td colspan="2"></td>
          <td colspan="2"></td>
          <td colspan="2"></td>
          <td colspan="2"></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td colspan="2"></td>
          <td colspan="2"></td>
          <td></td>
        </tr>
      </template>
      </tbody>
    </table>

    <div class="device-container">
      <div class="single-device-container" v-for="item in equipmentStatusList" :key="item.id"
           :style="{marginRight:isDeviceContinuous(currentProductionInfo.productionOrder)?'':'5%'}">
           :style="{marginRight:isDeviceContinuous(currentProductionInfo.productionOrder)?'':'5%'}"
           @click="openDetail(item)">
        <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/yellow.png" v-if="item.oporation===1">
          <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
        {{item.equipmentId}}
        <div class="device-name">
          {{item.equipmentName}}
        </div>
@@ -96,7 +120,7 @@
            <template v-for="(listItem,listIndex) in maxBrandToolLifeListLength">
              <template>
                <tr>
                  <td style="width: 7vw">额定寿命</td>
                  <td style="width: 5vw;min-width: 5vw">额定寿命</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:'':''}}
@@ -110,7 +134,7 @@
                <tr>
                  <td>当前寿命</td>
                  <template v-for="(item,index) in toolLife.brandList">
                    <td :style="{backgroundColor:getToolCurrentLifeDataBgColor(item)}">
                    <td :style="{backgroundColor:getToolCurrentLifeDataBgColor(toolLife.lifeList[index][listIndex])}">
                      {{toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex].currentLife:'':''}}
                    </td>
                  </template>
@@ -121,16 +145,23 @@
        </div>
      </div>
    </div>

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

    <EquipmentDetailModal ref="equipmentDetailModal"/>
  </div>
</template>

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

  export default {
    name: 'SubControlWorkshopSignage',
    components: {},
    components: { EquipmentDetailModal, SignageModal },
    data() {
      return {
        currentProductionInfo: {
@@ -178,22 +209,22 @@
        // ],
        todayProductionPlanList: [],
        equipmentStatusList: [
          {
            oporation: 0,
            equipmentId: '5045-7076'
          },
          {
            oporation: 3,
            equipmentId: '5068-7005'
          },
          {
            oporation: 22,
            equipmentId: '5045-7157'
          },
          {
            oporation: 2,
            equipmentId: '5045-7815'
          }
          // {
          //   oporation: 0,
          //   equipmentId: '5045-7076'
          // },
          // {
          //   oporation: 3,
          //   equipmentId: '5068-7005'
          // },
          // {
          //   oporation: 22,
          //   equipmentId: '5045-7157'
          // },
          // {
          //   oporation: 2,
          //   equipmentId: '5045-7815'
          // }
        ],
        // toolLife: {
        //   brandList: ['北齐二', '铱 镏', '森 五', '东 曼', '西 曼', '西 德', '东 德'],
@@ -352,7 +383,8 @@
          brandList: [],
          lifeList: []
        },
        maxBrandToolLifeListLength: null
        maxBrandToolLifeListLength: null,
        modalVisible: false
      }
    },
    created() {
@@ -384,12 +416,28 @@
            if (res.success) this.todayProductionPlanList = res.result
          })
      },


      openDetail(item) {
        if (item.oporation == 0) {
          this.$notification.warning({
            message: '消息',
            description: '设备处于关机状态！'
          })
          return false
        }
        console.log(item)
        this.$refs.equipmentDetailModal.initData(item.equipmentId)
        this.$refs.equipmentDetailModal.timerModel(item.equipmentId)
      },

      getEquipmentStatusByApi() {
        api.getEquipmentStatusApi(this.currentProductionInfo.productionId)
          .then(res => {
            if (res.success) this.equipmentStatusList = res.result
          })
      },

      getToolLifeListByApi() {
        api.getToolLifeListApi(this.currentProductionInfo.productionId)
          .then(res => {
@@ -407,19 +455,30 @@
                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)
              // 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'
        } else {
          return '#218A21'
        if (record && record.currentLife) {
          if (record.currentLife > 10) {
            return '#218A21'
          } else if (record.currentLife >= 5 && record.currentLife <= 10) {
            return '#FF9A10'
          } else {
            return '#f00'
          }
        }

        // if (record.currentLife / record.ratedLife > 0.8) {
        //   return '#FF9A10'
        // } else {
        //   return '#218A21'
        // }
      },

      mouseEnterItem(e) {
@@ -460,6 +519,20 @@
      display: flex;
      justify-content: center;
      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 {
@@ -504,6 +577,7 @@
        align-items: center;
        padding-top: 2%;
        font-size: 1vw;
        cursor: pointer;

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