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

zhaowei

2024-10-09 dc705861a89f6e92a6fb9208205166897ca5c3e0

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

 public/index.html

@@ -249,7 +249,7 @@
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
    <div class="load_title">正在加载 JeecgBoot 低代码平台,请耐心等待
    <div class="load_title">正在加载中国一拖管理系统,请耐心等待

    </div>
  </div>

 public/logo.png

 src/api/mdc.js

@@ -16,5 +16,25 @@
  // 删除设备参数阈值
  deleteParamThresholdApi: id => deleteAction('/mdc/mdcEquipmentThreshold/delete', { id }),
  // 删除设备参数阈值
  deleteBatchParamThresholdApi: ids => deleteAction('/mdc/mdcEquipmentThreshold/deleteBatch', { ids })
  deleteBatchParamThresholdApi: ids => deleteAction('/mdc/mdcEquipmentThreshold/deleteBatch', { ids }),
  // -------------------------------------总控车间看板页面--------------------------------------------
  // 获取昨日概况
  getYesterdayOverviewApi: () => getAction('/mdc/largeScreen/yesterdayOverview'),
  // 获取今日生产进度
  getTodayProductionProgressApi: () => getAction('/mdc/largeScreen/todayProductionSchedule'),
  // 获取今日产品合格率
  getTodayProductPassRateApi: () => getAction('/mdc/largeScreen/todayProductionPassRate'),
  // 获取今日班组完成量
  getTeamCompletionCountApi: () => getAction('/mdc/largeScreen/todayClazzCompletionCount'),
  // 获取今日设备工作效率
  getTodayEquipmentWorkEfficiencyApi: () => getAction('/mdc/largeScreen/todayEquipmentRate'),
  // 获取月设备利用率
  getMonthEquipmentUtilizationRateApi: () => getAction('/mdc/largeScreen/monthEquipmentUtilizationRate'),
  // 获取产线列表
  getProductionLineListApi: () => getAction('/mdc/largeScreen/productionList'),
  // -------------------------------------分控车间看板页面--------------------------------------------
  // 获取设备状态
  getEquipmentStatusApi: productionId => getAction('/mdc/subLargeScreen/equipmentStatus', { productionId }),
  // 获取当日生产进度
  getTodayProductionPlanApi: productionId => getAction('/mdc/subLargeScreen/todayProductionProgress', { productionId })
}

 src/assets/page/subControlWorkshopSignage/5016-7433.png

 src/assets/page/subControlWorkshopSignage/5016-7434.png

 src/assets/page/subControlWorkshopSignage/5016-7435.png

 src/assets/page/subControlWorkshopSignage/5016-7436.png

 src/assets/page/subControlWorkshopSignage/5016-7437.png

 src/assets/page/subControlWorkshopSignage/5016-7438.png

 src/assets/page/subControlWorkshopSignage/5029-7010.png

 src/assets/page/subControlWorkshopSignage/5045-7016.png

 src/assets/page/subControlWorkshopSignage/5045-7018.png

 src/assets/page/subControlWorkshopSignage/5045-7025.png

 src/assets/page/subControlWorkshopSignage/5045-7026.png

 src/assets/page/subControlWorkshopSignage/5045-7027.png

 src/assets/page/subControlWorkshopSignage/5045-7028.png

 src/assets/page/subControlWorkshopSignage/5045-7029.png

 src/assets/page/subControlWorkshopSignage/5045-7030.png

 src/assets/page/subControlWorkshopSignage/5045-7071.png

 src/assets/page/subControlWorkshopSignage/5045-7072.png

 src/assets/page/subControlWorkshopSignage/5045-7076.png

 src/assets/page/subControlWorkshopSignage/5045-7101.png

 src/assets/page/subControlWorkshopSignage/5045-7102.png

 src/assets/page/subControlWorkshopSignage/5045-7104.png

 src/assets/page/subControlWorkshopSignage/5045-7105.png

 src/assets/page/subControlWorkshopSignage/5045-7108.png

 src/assets/page/subControlWorkshopSignage/5045-7109.png

 src/assets/page/subControlWorkshopSignage/5045-7110.png

 src/assets/page/subControlWorkshopSignage/5045-7111.png

 src/assets/page/subControlWorkshopSignage/5045-7112.png

 src/assets/page/subControlWorkshopSignage/5045-7113.png

 src/assets/page/subControlWorkshopSignage/5045-7114.png

 src/assets/page/subControlWorkshopSignage/5045-7115.png

 src/assets/page/subControlWorkshopSignage/5045-7116.png

 src/assets/page/subControlWorkshopSignage/5045-7117.png

 src/assets/page/subControlWorkshopSignage/5045-7118.png

 src/assets/page/subControlWorkshopSignage/5045-7119.png

 src/assets/page/subControlWorkshopSignage/5045-7120.png

 src/assets/page/subControlWorkshopSignage/5045-7121.png

 src/assets/page/subControlWorkshopSignage/5045-7122.png

 src/assets/page/subControlWorkshopSignage/5045-7123.png

 src/assets/page/subControlWorkshopSignage/5045-7124.png

 src/assets/page/subControlWorkshopSignage/5045-7125.png

 src/assets/page/subControlWorkshopSignage/5045-7157.png

 src/assets/page/subControlWorkshopSignage/5045-7815.png

 src/assets/page/subControlWorkshopSignage/5068-7005.png

 src/assets/page/subControlWorkshopSignage/green.png

 src/assets/page/subControlWorkshopSignage/grey.png

 src/assets/page/subControlWorkshopSignage/red.png

 src/assets/page/subControlWorkshopSignage/yellow.png

 src/assets/yt_background.png

 src/config/router.config.js

@@ -49,7 +49,7 @@
        path: 'alteration',
        name: 'alteration',
        component: () => import(/* webpackChunkName: "user" */ '@/views/user/alteration/Alteration')
      },
      }
    ]
  },
  {
@@ -63,7 +63,7 @@
        path: 'login',
        name: 'oauth2-app-login',
        component: () => import(/* webpackChunkName: "oauth2-app.login" */ '@/views/user/oauth2/OAuth2Login')
      },
      }
    ]
  },

@@ -80,16 +80,16 @@
    ]
  },
  {
    path:'/MasterControlWorkshopSignage',
    component:()=>import('@/views/mdc/base/MasterControlWorkshopSignage.vue')
    path: '/MasterControlWorkshopSignage',
    component: () => import('@/views/mdc/base/MasterControlWorkshopSignage.vue')
  },
  {
    path:'/SubControlWorkshopSignage/:id',
    component:()=>import('@/views/mdc/base/SubControlWorkshopSignage.vue')
    path: '/SubControlWorkshopSignage',
    component: () => import('@/views/mdc/base/SubControlWorkshopSignage.vue')
  },
  {
    path: '/404',
    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
  },
  }

]

 src/views/mdc/base/MasterControlWorkshopSignage.vue

@@ -29,22 +29,32 @@
          <div>数字化车间智能管理系统</div>
        </div>
        <div class="workshop-bg">
          <div class="navigate-container" style="left: 5%;">
            <div @click="navigateTo(item)" v-for="(item,index) in navigateList" :key="index" class="navigate-item">
              <template v-if="index<5">
                <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-index">{{index+1}}</div>
                <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-label">
                  {{item.label}}
          <div class="navigate-container" style="top:0;left: 5%;">
            <div @click="navigateTo(item)" v-for="item in productionLineList" :key="item.id"
                 class="navigate-item">
              <template v-if="item.productionOrder<5">
                <div :style="{backgroundColor:productionLineBackgroundColorList[item.productionOrder%4]}"
                     class="navigate-item-index">
                  {{item.productionOrder+1}}
                </div>
                <div :style="{backgroundColor:productionLineBackgroundColorList[item.productionOrder%4]}"
                     class="navigate-item-label">
                  {{item.productionName}}
                </div>
              </template>
            </div>
          </div>
          <div class="navigate-container" style="bottom:5%;right: 5%;">
            <div @click="navigateTo(item)" v-for="(item,index) in navigateList" :key="index" class="navigate-item">
              <template v-if="index>=5">
                <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-index">{{index+1}}</div>
                <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-label">
                  {{item.label}}
          <div class="navigate-container" style="bottom:0;right: 5%;">
            <div @click="navigateTo(item)" v-for="item in productionLineList" :key="item.id"
                 class="navigate-item">
              <template v-if="item.productionOrder>=5">
                <div :style="{backgroundColor:productionLineBackgroundColorList[item.productionOrder%4]}"
                     class="navigate-item-index">
                  {{item.productionOrder+1}}
                </div>
                <div :style="{backgroundColor:productionLineBackgroundColorList[item.productionOrder%4]}"
                     class="navigate-item-label">
                  {{item.productionName}}
                </div>
              </template>
            </div>
@@ -80,6 +90,7 @@

<script>
  import * as echarts from 'echarts'
  import api from '@/api/mdc'

  export default {
    name: 'MasterControlWorkshopSignage',
@@ -90,56 +101,15 @@
        firstEnterDevicePixelRatio: null,
        currentDevicePixelRatio: null,
        leftColChart1: '',
        leftColChart1Data: '',
        leftColChart2: '',
        leftColChart2Data: '',
        leftColChart3: '',
        leftColChart3Data: '',
        leftColChart4: '',
        navigateList: [
          {
            label: '1024后箱加工线',
            id: '1',
            backgroundColor: '#0000FF'
          },
          {
            label: '1024前箱加工线',
            id: '2',
            backgroundColor: '#FF8E00'
          },
          {
            label: '前托架加工线',
            id: '3',
            backgroundColor: '#DE1439'
          },
          {
            label: '80传动壳体加工线',
            id: '4',
            backgroundColor: '#006500'
          },
          {
            label: '80减速器壳体加工线',
            id: '5',
            backgroundColor: '#0000FF'
          },
          {
            label: '箱体加工线',
            id: '6',
            backgroundColor: '#FF8E00'
          },
          {
            label: '差速器轴承座加工线',
            id: '7',
            backgroundColor: '#DE1439'
          },
          {
            label: '制动器活塞加工线',
            id: '8',
            backgroundColor: '#006500'
          },
          {
            label: '中小件加工线',
            id: '9',
            backgroundColor: '#0000FF'
          }
        ],
        leftColChart4Data: '',
        productionLineList: [],
        productionLineBackgroundColorList: ['#0000FF', '#FF8E00', '#DE1439', '#006500'],
        switchList: [
          {
            label: 'MES',
@@ -165,13 +135,16 @@
        rightColChart1: '',
        rightColChart2: '',
        rightColChart3: '',
        rightColChart2And3Data: '',
        rightColChart4: '',
        rightColChart4Data: '',
        rightColChart4CarouselTime: null
      }
    },
    mounted() {
      this.firstEnterDevicePixelRatio = window.devicePixelRatio
      window.addEventListener('resize', this.handleWindowResize)
      this.getProductionListByApi()
      this.getChartDataByApi()
    },
    beforeDestroy() {
@@ -179,35 +152,82 @@
      if (this.rightColChart4CarouselTime) clearInterval(this.rightColChart4CarouselTime)
    },
    methods: {
      getProductionListByApi() {
        api.getProductionLineListApi()
          .then(res => {
            if (res.success) this.productionLineList = res.result
          })
      },

      getChartDataByApi() {
        this.getLeftColChart1DataByApi()
        this.getLeftColChart2DataByApi()
        this.getLeftColChart3DataByApi()
        this.getLeftColChart4DataByApi()
        // this.getRightColChart1DataByApi()
        this.getRightColChart2DataByApi()
        this.getRightColChart3DataByApi()
        this.getRightColChart2And3DataByApi()
        this.getRightColChart4DataByApi()
      },

      getLeftColChart1DataByApi() {
        this.leftColChart1 = this.$echarts.init(document.getElementById('left-col-chart1'))
        this.drawLeftColChart1()
        api.getYesterdayOverviewApi()
          .then(res => {
            // console.log('res', res)
            if (res.success) {
              this.leftColChart1Data = [
                {
                  'name': '产品合格率',
                  'count': res.result.passRate ? res.result.passRate : 0
                },
                {
                  'name': '设备利用率',
                  'count': res.result.utilizationRate ? res.result.utilizationRate : 0
                },
                {
                  'name': '计划完成率',
                  'count': res.result.planCompleteRate ? res.result.planCompleteRate : 0
                }
              ]
              this.drawLeftColChart1()
            }
          })
      },

      getLeftColChart2DataByApi() {
        this.leftColChart2 = this.$echarts.init(document.getElementById('left-col-chart2'))
        this.drawLeftColChart2()
        api.getTodayProductionProgressApi()
          .then(res => {
            // console.log('res', res)
            if (res.success) {
              this.leftColChart2Data = res.result
              this.drawLeftColChart2()
            }
          })
      },

      getLeftColChart3DataByApi() {
        this.leftColChart3 = this.$echarts.init(document.getElementById('left-col-chart3'))
        this.drawLeftColChart3()
        api.getTodayProductPassRateApi()
          .then(res => {
            // console.log('res', res)
            if (res.success) {
              this.leftColChart3Data = res.result
              this.drawLeftColChart3()
            }
          })
      },

      getLeftColChart4DataByApi() {
        this.leftColChart4 = this.$echarts.init(document.getElementById('left-col-chart4'))
        this.drawLeftColChart4()
        api.getTeamCompletionCountApi()
          .then(res => {
            // console.log('res', res)
            if (res.success) {
              this.leftColChart4Data = res.result
              this.drawLeftColChart4()
            }
          })
      },

      getRightColChart1DataByApi() {
@@ -215,46 +235,34 @@
        this.drawRightColChart1()
      },

      getRightColChart2DataByApi() {
      getRightColChart2And3DataByApi() {
        this.rightColChart2 = this.$echarts.init(document.getElementById('right-col-chart2'))
        this.drawRightColChart2()
      },

      getRightColChart3DataByApi() {
        this.rightColChart3 = this.$echarts.init(document.getElementById('right-col-chart3'))
        this.drawRightColChart3()
        api.getTodayEquipmentWorkEfficiencyApi()
          .then(res => {
            // console.log('res', res)
            if (res.success) {
              this.rightColChart2And3Data = res.result
              this.drawRightColChart2()
              this.drawRightColChart3()
            }
          })
      },

      getRightColChart4DataByApi() {
        this.rightColChart4 = this.$echarts.init(document.getElementById('right-col-chart4'))
        this.drawRightColChart4()
        api.getMonthEquipmentUtilizationRateApi()
          .then(res => {
            // console.log('res', res)
            if (res.success) {
              this.rightColChart4Data = res.result
              this.drawRightColChart4()
            }
          })
      },

      /* 绘制左侧第一个图表 */
      drawLeftColChart1() {
        const data = [
          {
            'number': null,
            'name': '产品合格率',
            'count': 1,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': null,
            'name': '设备利用率',
            'count': 0.89,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': null,
            'name': '计划完成率',
            'count': 0.95,
            'planCount': null,
            'rateCount': null
          }
        ]
        const yAxisData = []
        const option = {
          radar: [
@@ -373,7 +381,7 @@

          ]
        }
        data.forEach((item, index) => {
        this.leftColChart1Data.forEach((item, index) => {
          yAxisData.push(parseFloat(item.count * 100 > 100 ? 100 : item.count * 100))
          option.radar[1].indicator[index].num = item.count * 100 > 100 ? 100 : item.count * 100
        })
@@ -383,101 +391,22 @@

      /* 绘制左侧第二个图表 */
      drawLeftColChart2() {
        const data1 = [
          {
            'number': 'A_1',
            'name': '前箱前',
            'count': 190
          },
          {
            'number': 'A_2',
            'name': '1024后箱',
            'count': 180
          },
          {
            'number': 'A_3',
            'name': '差速器',
            'count': 200
          },
          {
            'number': 'A_4',
            'name': '轴承座',
            'count': 100
          },
          {
            'number': 'A_5',
            'name': '80减',
            'count': 200
          },
          {
            'number': 'A_6',
            'name': '80传',
            'count': 90
          },
          {
            'number': 'A_7',
            'name': '1024前',
            'count': 200
          }
        ]
        const data2 = [
          {
            'number': 'A_1',
            'name': '前箱前',
            'count': 165
          },
          {
            'number': 'A_2',
            'name': '1024后箱',
            'count': 166
          },
          {
            'number': 'A_3',
            'name': '差速器',
            'count': 167
          },
          {
            'number': 'A_4',
            'name': '轴承座',
            'count': 90
          },
          {
            'number': 'A_5',
            'name': '80减',
            'count': 100
          },
          {
            'number': 'A_6',
            'name': '80传',
            'count': 55
          },
          {
            'number': 'A_7',
            'name': '1024前',
            'count': 171
          }
        ]
        const xAxisData = []
        const seriesData1 = []
        const seriesData2 = []
        data1.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          seriesData1.push({
            value: item.count == null ? '' : item.count,
            hostType: (item.number == null ? '' : item.number)
          })
        })
        data2.forEach(item => {
          seriesData2.push({
            value: item.count == null ? '' : item.count,
            hostType: (item.number == null ? '' : item.number)
          })
        this.leftColChart2Data.forEach(item => {
          xAxisData.push(item.productName == null ? '' : item.productName)
          seriesData1.push({ value: item.planCount == null ? '' : item.planCount })
          seriesData2.push({ value: item.completionCount == null ? '' : item.completionCount })
        })
        const option = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: params => `${params.name}：${params.value}件`
            trigger: 'axis',
            formatter: params => {
              // console.log('params', params)
              return params[0].name + '<br>' + `${params[0].seriesName}：${params[0].value}件` + '<br>' + `${params[1].seriesName}：${params[1].value}件`
            }
          },
          legend: {
            show: false,
@@ -544,7 +473,7 @@
          },
          series: [
            {
              name: '利用率',
              name: '计划量',
              type: 'bar',
              barWidth: '35%',//柱图宽度
              data: [],
@@ -579,7 +508,7 @@
              }
            },
            {
              name: '利用率',
              name: '完成量',
              type: 'bar',
              barWidth: '35%',//柱图宽度
              data: [],
@@ -675,11 +604,10 @@
        ]
        const xAxisData = []
        const seriesData = []
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
        this.leftColChart3Data.forEach(item => {
          xAxisData.push(item.productionName == null ? '' : item.productionName)
          seriesData.push({
            value: this.toDecimal2NoZero(((item.count == null ? '' : item.count) * 100) > 100 ? 100 : (((item.count == null ? '' : item.count) * 100))),
            hostType: (item.number == null ? '' : item.number)
            value: this.toDecimal2NoZero(((item.passRate == null ? '' : item.passRate) * 100) > 100 ? 100 : (((item.passRate == null ? '' : item.passRate) * 100)))
          })
        })
        const option = {
@@ -884,65 +812,11 @@

      /* 绘制左侧第四个图表 */
      drawLeftColChart4() {
        const data = [
          {
            'number': 'A_1',
            'name': '前箱班',
            'count': 54,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_2',
            'name': '后箱班',
            'count': 55,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_3',
            'name': '80传班',
            'count': 56,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_4',
            'name': '80减班',
            'count': 57,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_5',
            'name': '托架班',
            'count': 58,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_6',
            'name': '轴承底座班',
            'count': 59,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_7',
            'name': '差速器班',
            'count': 90,
            'planCount': null,
            'rateCount': null
          }
        ]
        const xAxisData = []
        const seriesData = []
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          seriesData.push({
            value: item.count == null ? '' : item.count,
            hostType: (item.number == null ? '' : item.number)
          })
        this.leftColChart4Data.forEach(item => {
          xAxisData.push(item.clazz == null ? '' : item.clazz)
          seriesData.push({ value: item.completionCount == null ? '' : item.completionCount })
        })
        const option = {
          tooltip: {
@@ -1376,12 +1250,9 @@
        ]
        const xAxisData = []
        const seriesData = []
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          seriesData.push({
            value: this.toDecimal2NoZero(((item.count == null ? '' : item.count) * 100) > 100 ? 100 : (((item.count == null ? '' : item.count) * 100))),
            hostType: (item.number == null ? '' : item.number)
          })
        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.openRate })
        })
        const option = {
          tooltip: {
@@ -1659,12 +1530,9 @@
        ]
        const xAxisData = []
        const seriesData = []
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          seriesData.push({
            value: this.toDecimal2NoZero(((item.count == null ? '' : item.count) * 100) > 100 ? 100 : (((item.count == null ? '' : item.count) * 100))),
            hostType: (item.number == null ? '' : item.number)
          })
        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.utilizationRate })
        })
        const option = {
          tooltip: {
@@ -2111,12 +1979,9 @@
            ]
          )
        ]
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          seriesData.push({
            value: this.toDecimal2NoZero(((item.count == null ? '' : item.count) * 100) > 100 ? 100 : (((item.count == null ? '' : item.count) * 100))),
            hostType: (item.number == null ? '' : item.number)
          })
        this.rightColChart4Data.forEach(item => {
          xAxisData.push(item.date == null ? '' : item.date)
          seriesData.push({ value: item.utilizationRate })
        })
        const option = {
          tooltip: {
@@ -2246,7 +2111,14 @@
      },

      navigateTo(record) {
        const url = this.$router.resolve(`/SubControlWorkshopSignage/${record.id}`).href
        const url = this.$router.resolve({
          path: '/SubControlWorkshopSignage',
          query: {
            productionId: record.id,
            productionName: record.productionName,
            productionOrder: record.productionOrder + 1
          }
        }).href
        window.open(url, '_blank')
      },

@@ -2321,7 +2193,7 @@
        .workshop-bg {
          position: relative;
          height: 60%;
          background-image: url("../../../assets/yt_background.jpg");
          background-image: url("../../../assets/yt_background.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;


 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 {

 vue.config.js

@@ -1,5 +1,5 @@
const path = require('path')
const CompressionPlugin = require("compression-webpack-plugin")
const CompressionPlugin = require('compression-webpack-plugin')

function resolve(dir) {
  return path.join(__dirname, dir)
@@ -42,11 +42,11 @@

    //生产环境，开启js\css压缩
    if (process.env.NODE_ENV === 'production') {
        config.plugin('compressionPlugin').use(new CompressionPlugin({
          test: /\.(js|css|less)$/, // 匹配文件名
          threshold: 10240, // 对超过10k的数据压缩
          deleteOriginalAssets: false // 不删除源文件
        }))
      config.plugin('compressionPlugin').use(new CompressionPlugin({
        test: /\.(js|css|less)$/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false // 不删除源文件
      }))
    }

    // 配置 webpack 识别 markdown 为普通的文件
@@ -62,9 +62,9 @@
      .rule('vxe')
      .test(/\.js$/)
      .include
        .add(resolve('node_modules/vxe-table'))
        .add(resolve('node_modules/vxe-table-plugin-antd'))
        .end()
      .add(resolve('node_modules/vxe-table'))
      .add(resolve('node_modules/vxe-table-plugin-antd'))
      .end()
      .use()
      .loader('babel-loader')
      .end()
@@ -78,15 +78,16 @@
          /* less 变量覆盖，用于自定义 ant design 主题 */
          'primary-color': '#1890FF',
          'link-color': '#1890FF',
          'border-radius-base': '4px',
          'border-radius-base': '4px'
        },
        javascriptEnabled: true,
        javascriptEnabled: true
      }
    }
  },

  devServer: {
    port: 3000,
    open: true,
    // hot: true,
    // disableHostCheck: true,
    // overlay: {
@@ -97,21 +98,21 @@
    //     'Access-Control-Allow-Origin': '*',
    // },
    proxy: {
     /* '/api': {
        target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', //mock API接口系统
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '/jeecg-boot': ''  //默认所有请求都加了jeecg-boot前缀，需要去掉
        }
      },*/
      /* '/api': {
         target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', //mock API接口系统
         ws: false,
         changeOrigin: true,
         pathRewrite: {
           '/jeecg-boot': ''  //默认所有请求都加了jeecg-boot前缀，需要去掉
         }
       },*/
      /* 注意：jeecgboot前端做了改造，此处不需要配置跨域和后台接口（只需要改.env相关配置文件即可）
          issues/3462 很多人此处做了配置，导致刷新前端404问题，请一定注意*/
      '/jeecg-boot': {
        target: 'http://localhost:8080',
        ws: false,
        changeOrigin: true
      },
      }
    }
  },