1、车间看板饼图调整参数值字段为任务量和完成量 2、设备管理页面列表调整设备属性展示字段

zhaowei

2025-05-20 7fbe94c8a2e818290fdd6a084b778b46c25ed036

 src/views/mdc/base/modules/WorkshopSignage/WorkshopDeviceOverview.vue

@@ -1,6 +1,20 @@
<template>
  <div style="flex:1;display: flex;">
    <div class="chart-container" :id="chartContainerId"></div>
    <!--<div style="height: 100%">-->
    <!--<div class="chart-container" :id="chartContainerId"></div>-->

    <!--</div>-->
    <div style="flex: 1;display: flex;flex-direction: column">
      <div class="chart-container" :id="chartContainerId" style="flex: 1"></div>
      <div class="pie-value-container">
        <div>
          <span class="color-square" style="background-color: #00923f"></span>完成量 {{equipmentStatusCountObj.qualifiedQty}}
        </div>
        <div>
          <span class="color-square" style="background-color: #e67817"></span>任务量 {{equipmentStatusCountObj.planQty}}
        </div>
      </div>
    </div>
    <div class="equipment-state-container">
      <div>设备总数：{{equipmentStatusCountObj.equipmentCount}}台</div>
      <div>大修、项修数量：{{equipmentStatusCountObj.repairCount}}台</div>
@@ -18,16 +32,22 @@

      </div>
    </div>

    <SignageModal ref="signageModalRef" :modalTitle="modalTitle" :productionId="currentProductionId"/>
  </div>
</template>

<script>
  import signageApi from '@/api/signage'
  import SignageModal from './SignageModal'

  export default {
    name: 'WorkshopDeviceOverview',
    components: {},
    components: { SignageModal },
    props: {
      workshopName: {
        type: String
      },
      currentProductionId: {
        type: String
      },
@@ -42,7 +62,8 @@
      return {
        chartContainer: null,
        chartContainerId: 'left-col-chart1',
        equipmentStatusCountObj: {}
        equipmentStatusCountObj: {},
        modalTitle: ''
      }
    },
    mounted() {
@@ -70,9 +91,9 @@
      },

      initChart() {
        const yAxisData1 = this.toDecimal2NoZero((this.equipmentStatusCountObj.runCount / this.equipmentStatusCountObj.equipmentCount) * 100)
        const yAxisData1 = this.toDecimal2NoZero((this.equipmentStatusCountObj.qualifiedQty / this.equipmentStatusCountObj.planQty) * 100)
        const yAxisData2 = 100 - yAxisData1
        const runNum = yAxisData1
        const finishedNum = yAxisData1
        const option = {
          legend: {
            show: false
@@ -81,13 +102,13 @@
            {
              name: '类目',
              type: 'pie',
              radius: '60%',
              radius: '90%',
              center: ['50%', '50%'],
              hoverAnimation: false,
              data: [
                {
                  value: 0,
                  name: '运行量',
                  name: '完成量',
                  itemStyle: { color: '#00923f' },
                  label: {
                    show: true,
@@ -96,13 +117,13 @@
                    position: 'inside',
                    textBorderWidth: 0,
                    formatter: function() {
                      return runNum + '%'
                      return finishedNum + '%'
                    }
                  }
                },
                {
                  value: 100,
                  name: '设备量',
                  name: '任务量',
                  itemStyle: { color: '#e67817' },
                  label: {
                    show: false
@@ -124,6 +145,12 @@
        }
        option.series[0].data[0].value = yAxisData1
        option.series[0].data[1].value = yAxisData2

        this.chartContainer.on('click', () => {
          this.modalTitle = this.workshopName + '当月任务完成百分比'
          this.$refs.signageModalRef.visible = true
        })

        this.chartContainer.setOption(option, true)
      },

@@ -155,6 +182,22 @@
</script>

<style lang="less">
  .pie-value-container {
    > div {
      text-align: center;
      margin-bottom: 5px;
    }

    .color-square {
      display: inline-block;
      width: 0.625vw;
      height: 0.45vw;
      border-radius: 0.1vw;
      background-color: #00ff80;
      margin-right: 0.4vw;
    }
  }

  .equipment-state-container {
    display: flex;
    flex-direction: column;