mes-ai-admin-backend-ui/src/view/performance/12-orderAccounting/componets/hjfpfb.vue

<template>
  <el-dialog
    :model-value="modelValue"
    title="核检废品日统计"
    fullscreen
    destroy-on-close
    :before-close="() => emits('update:modelValue', false )"
  >
    <el-container>
      <!-- 按钮部分 -->
      <el-header height="90px">
        <div>
          <el-button
            type="primary"
            size="large"
            @click="handleExcel"
          >导出到Excel
          </el-button>
          <el-button
            type="primary"
            size="large"
            @click="() => emits('update:modelValue', false )"
          >退出
          </el-button>
        </div>

        <div style="margin-top: 10px;">
          <el-form
            :inline="true"
            :model="form"
            @submit.prevent
          >
            <el-form-item label="工单编号">
              <el-input
                v-model="form.gdbh"
                style="width: 100px;"
              />
              <el-button
                type="primary"
                :loading="isLoading"
                style="margin-left: 1px;"
                @click="handleSearch"
              >刷新
              </el-button>
            </el-form-item>

            <el-form-item label="印件名称">
              <el-input
                v-model="form.yjmc"
                readonly
                style="width: 200px;"
              />
            </el-form-item>

            <el-form-item label="投料量">
              <el-input
                v-model="form.tll"
                readonly
                style="width: 100px;"
              />
            </el-form-item>

            <el-form-item label="总废品">
              <el-input
                v-model="form.zfp"
                readonly
                style="width: 100px;"
              />
            </el-form-item>

            <el-form-item label="实际合格率">
              <el-input
                v-model="form.sjhgl"
                readonly
                style="width:100px;"
              />
            </el-form-item>
          </el-form>

        </div>

      </el-header>

      <el-container>
        <el-aside width="400px">
          <el-table
            ref="multipleTable"
            height="70vh"
            :data="tableData"
            row-key="ID"
            highlight-current-row
            border
            show-overflow-tooltip
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '0px' }"
            :header-row-style="{ height: '20px' }"
            :header-cell-style="{ padding: '0px' }"
          >
            <!-- 循环渲染表格列 -->
            <el-table-column
              v-for="column in tableColumns"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
              :width="column.width"
            />
          </el-table>
        </el-aside>
        <el-main>
          <div
            ref="echart"
            style="height: 100%; width: 100%;"
          />
        </el-main>
      </el-container>

    </el-container>
  </el-dialog>
</template>

<script>
export default {
  name: 'Hjfpfb',
}

// 3.1工单核检废品分布
import service from '@/utils/request'
export const getWasteDistribution = (params) => {
  return service({
    url: '/mes_server/work_order_verification/wasteDistribution',
    method: 'get',
    params
  })
}
</script>

<script setup>
import * as echarts from 'echarts'
import { nextTick, onMounted, onUnmounted, ref, shallowRef, defineProps, defineEmits } from 'vue'

const props = defineProps(['modelValue', 'val'])
const emits = defineEmits(['update:modelValue'])
const form = ref({
  gdbh: props['val'],
})

const tableColumns = ref([
  { label: '废品分类', prop: 'fpfl', width: '130' },
  { label: '数量', prop: 'sl', width: '70' },
  { label: '报损率', prop: 'bsl', width: '100' },
  { label: '废品占比', prop: 'fpzb', width: '100' },
])
const tableData = ref([])
const isLoading = ref(false)

const handleExcel = () => {
}

const handleSearch = async() => {
  const order = form.value['gdbh']
  const res = await getWasteDistribution({ order })
  if (res['code'] === 0) {
    console.log(res['data'])
    form.value = {
      ...form.value,
      gdbh: res['data']['Gd_gdbh'],
      yjmc: res['data']['yj_yjmc'],
      tll: res['data']['实际投料'],
      zfp: res['data']['wasteTotal'],
      sjhgl: res['data']['passRate'],
    }
    tableData.value = res['data']['wasteData'].map(item => ({
      fpfl: item['type'],
      sl: item['num'],
      bsl: item['lossesRate'],
      fpzb: item['wasteRate'],
    }))

    const data = []
    res['data']['rightData'].forEach(element => {
      data.push({ name: element['type'], value: parseFloat(element['rate']) })
    })
    setOptions(data)
  }
}

const chart = shallowRef(null)
const echart = ref(null)
const initChart = () => {
  chart.value = echarts.init(echart.value /* 'macarons' */)
}
const setOptions = (data) => {
  chart.value.setOption({
    // title: {
    //   text: 'Weather Statistics',
    //   subtext: 'Fake Data',
    //   left: 'center'
    // },
    // tooltip: {
    //   trigger: 'item',
    //   formatter: '{a} <br/>{b} : {c} ({d}%)'
    // },
    legend: {
      orient: 'vertical',
      right: 20,
      top: 'center',
      textStyle: {
        fontSize: 14,
      },
      selectedMode: false, // 设置图例禁止点击
      data: data.map(item => item['name'])
    },
    series: [
      {
        type: 'pie',
        radius: '65%',
        center: ['40%', '50%'],
        data: data,
        label: {
          show: true,
          formatter: '{b}: {d}%',
          fontSize: 14,
        },
      },

    ]
  })
}

onMounted(async() => {
  await nextTick()
  initChart()
})

onUnmounted(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})

</script>

  <style scoped>

  :deep(.el-table td .cell) {
    line-height: 20px !important;
  }
  </style>