hwmom-ui/src/views/mes/wipTrackingReport/backup.vue

<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
         <el-form ref="queryFormRef" :model="queryParams" :inline="true">
           <!--        <el-form-item label="日期范围" style="width: 300px">
                    <el-date-picker
                      v-model="dateRange"
                      value-format="YYYY-MM-DD"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                  </el-form-item>

                  <el-form-item label="生产订单号" prop="orderCode">
                    <el-input
                      v-model="queryParams.orderCode"
                      placeholder="请输入生产订单号"
                      clearable
                      @keyup.enter="handleQuery"
                    />
                  </el-form-item>-->

<!--
            <el-form-item label="物料编号" prop="materialCode">
              <el-input
                v-model="queryParams.materialCode"
                placeholder="请输入物料编号"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
-->

            <el-form-item label="物料名称" prop="materialName">
              <el-input
                v-model="queryParams.materialName"
                placeholder="请输入物料名称"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
<!--
            <el-form-item label="进度状态" prop="progressStatus">
              <el-select v-model="queryParams.progressStatus" placeholder="请选择进度状态" clearable @keyup.enter="handleQuery">
                <el-option label="正常" value="正常" />
                <el-option label="延期" value="延期" />
              </el-select>
            </el-form-item>-->

            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <!-- 统计图表卡片 -->
    <!--    <el-row :gutter="10" class="mb-[10px]">
      <el-col :span="8">
        <el-card shadow="never">
          <template #header>
            <span class="font-bold">进度状态分布</span>
          </template>
          <div ref="statusChartRef" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <template #header>
            <span class="font-bold">整体进度分布</span>
          </template>
          <div ref="progressChartRef" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <template #header>
            <span class="font-bold">工序完成率统计</span>
          </template>
          <div ref="processStatsChartRef" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>-->
    <el-row :gutter="10" class="mb-[10px]">
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <span class="font-bold">进度状态分布</span>
          </template>
          <div ref="statusChartRef" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <span class="font-bold">整体进度分布</span>
          </template>
          <div ref="progressChartRef" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>


    <!-- 工序进度可视化 -->
    <el-card shadow="never" class="mb-[10px]">
      <template #header>
        <span class="font-bold">工序进度可视化</span>
      </template>
      <div ref="processChartRef" style="width: 100%; height: 400px"></div>
    </el-card>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
<!--          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['mes:prodReport:export']">导出</el-button>
          </el-col>-->
          <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList" />
        </el-row>
      </template>

      <el-table v-loading="loading" :data="reportList" border>
        <el-table-column label="生产订单号" align="center" prop="orderCode" v-if="columns[0].visible" width="140" />
        <el-table-column label="物料编号" align="center" prop="materialCode" v-if="columns[1].visible" width="120" />
        <el-table-column label="物料名称" align="center" prop="materialName" v-if="columns[2].visible" width="180" show-overflow-tooltip />
        <el-table-column label="规格型号" align="center" prop="materialSpec" v-if="columns[3].visible" width="120" show-overflow-tooltip />
        <el-table-column label="计划总数量" align="center" prop="planAmount" v-if="columns[4].visible" width="100" />
        <el-table-column label="在制数量" align="center" prop="wipAmount" v-if="columns[5].visible" width="100" />
        <el-table-column label="已完成数量" align="center" prop="completeAmount" v-if="columns[6].visible" width="100" />
        <el-table-column label="计划开工时间" align="center" prop="planBeginTime" v-if="columns[7].visible" width="150" />
        <el-table-column label="实际开工时间" align="center" prop="realBeginTime" v-if="columns[8].visible" width="150" />
        <el-table-column label="计划完工时间" align="center" prop="planEndTime" v-if="columns[9].visible" width="150" />
        <el-table-column label="当前时间" align="center" prop="currentTime" v-if="columns[10].visible" width="150" />
        <el-table-column label="总工序数" align="center" prop="totalProcessCount" v-if="columns[11].visible" width="100" />
        <el-table-column label="在制工序" align="center" prop="wipProcesses" v-if="columns[12].visible" width="150" show-overflow-tooltip />
        <el-table-column label="剩余工序" align="center" prop="remainingProcesses" v-if="columns[13].visible" width="150" show-overflow-tooltip />
        <el-table-column label="整体进度" align="center" prop="overallProgress" v-if="columns[14].visible" width="120">
          <template #default="scope">
            <el-progress
              :percentage="parseFloat(scope.row.overallProgress)"
              :color="getProgressColor(parseFloat(scope.row.overallProgress))"
              :stroke-width="8"
            />
          </template>
        </el-table-column>
        <el-table-column label="进度状态" align="center" prop="progressStatus" v-if="columns[15].visible" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.progressStatus === '正常' ? 'success' : 'danger'">
              {{ scope.row.progressStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="工序进度" align="center" v-if="columns[16].visible" width="350">
          <template #default="scope">
            <div class="process-progress-container">
<!--              <div
                v-for="process in scope.row.processProgressList"
                :key="process.processId"
                class="process-step"
                :class="{
                  'completed': process.isCompleted === 1,
                  'in-progress': process.isInProgress === 1,
                  'pending': process.isCompleted !== 1 && process.isInProgress !== 1
                }"
                :title="`${process.processName} - ${process.statusDesc}${process.processProgress ? ' (' + process.processProgress + '%)' : ''}`"
              >-->
              <div
                v-for="process in scope.row.processProgressList"
                :key="process.processId"
                class="process-step"
                :class="{
                  'completed': process.isCompleted === 1,
                  'in-progress': process.isInProgress === 1,
                  'pending': process.isCompleted !== 1 && process.isInProgress !== 1
                }"
                :title="`${process.processName}`"
              >
                <span class="process-name">{{ process.processName }}</span>
<!--                <span v-if="process.processProgress && process.processProgress > 0" class="process-percentage">
                  {{ process.processProgress }}%
                </span>-->
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
  </div>
</template>

<script setup name="WipTrackingReport" lang="ts">
import { getCurrentInstance, ref, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
import type { ComponentInternalInstance } from 'vue';
import type { ElFormInstance } from 'element-plus';
import * as echarts from 'echarts';
import { listWipTrackingReport, exportWipTrackingReport } from '@/api/mes/wipTrackingReport';
import { WipTrackingReportVO, WipTrackingReportQuery, ProcessProgressVO } from '@/api/mes/wipTrackingReport/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const reportList = ref<WipTrackingReportVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const dateRange = ref<string[]>(['', '']);

// 图表引用
const statusChartRef = ref<HTMLDivElement | null>(null);
const progressChartRef = ref<HTMLDivElement | null>(null);
const processChartRef = ref<HTMLDivElement | null>(null);
const processStatsChartRef = ref<HTMLDivElement | null>(null);
let statusChart: echarts.ECharts | null = null;
let progressChart: echarts.ECharts | null = null;
let processChart: echarts.ECharts | null = null;
let processStatsChart: echarts.ECharts | null = null;

// 列显隐信息
const columns = ref([
  { key: 0, label: '生产订单号', visible: true },
  { key: 1, label: '物料编号', visible: false },
  { key: 2, label: '物料名称', visible: true },
  { key: 3, label: '规格型号', visible: true },
  { key: 4, label: '计划总数量', visible: true },
  { key: 5, label: '在制数量', visible: false },
  { key: 6, label: '已完成数量', visible: true },
  { key: 7, label: '计划开工时间', visible: true },
  { key: 8, label: '实际开工时间', visible: true },
  { key: 9, label: '计划完工时间', visible: true },
  { key: 10, label: '当前时间', visible: false },
  { key: 11, label: '总工序数', visible: true },
  { key: 12, label: '在制工序', visible: true },
  { key: 13, label: '剩余工序', visible: true },
  { key: 14, label: '整体进度', visible: true },
  { key: 15, label: '进度状态', visible: true },
  { key: 16, label: '工序进度', visible: true }
]);

const queryParams = ref<WipTrackingReportQuery>({
  pageNum: 1,
  pageSize: 10,
  orderCode: '',
  materialCode: '',
  materialName: '',
  progressStatus: '',
  beginDate: '',
  endDate: ''
});

// 监听日期范围变化
watch(dateRange, (newVal) => {
  if (newVal && newVal.length === 2) {
    queryParams.value.beginDate = newVal[0];
    queryParams.value.endDate = newVal[1];
  } else {
    queryParams.value.beginDate = '';
    queryParams.value.endDate = '';
  }
});

/** 查询在制品跟踪报表列表 */
function getList() {
  loading.value = true;
  listWipTrackingReport(queryParams.value).then((response: any) => {
    reportList.value = response.rows;
    total.value = response.total;
    loading.value = false;

    // 更新图表
    nextTick(() => {
      updateCharts();
    });
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = ['', ''];
  queryFormRef.value?.resetFields();
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    orderCode: '',
    materialCode: '',
    materialName: '',
    progressStatus: '',
    beginDate: '',
    endDate: ''
  };
  handleQuery();
}

/** 导出按钮操作 */
function handleExport() {
  proxy?.$modal.confirm('是否确认导出所有在制品跟踪报表数据项？').then(() => {
    proxy?.$modal.loading('正在导出数据，请稍候...');
    return exportWipTrackingReport(queryParams.value);
  }).then((response: any) => {
    proxy?.$download.blob(response, '在制品跟踪报表.xlsx');
    proxy?.$modal.closeLoading();
  }).catch(() => {
    proxy?.$modal.closeLoading();
  });
}

/** 获取进度颜色 */
function getProgressColor(percentage: number) {
  if (percentage < 30) return '#f56c6c';
  if (percentage < 70) return '#e6a23c';
  return '#67c23a';
}

/** 初始化图表 */
function initCharts() {
  if (statusChartRef.value) {
    statusChart = echarts.init(statusChartRef.value);
  }
  if (progressChartRef.value) {
    progressChart = echarts.init(progressChartRef.value);
  }
  if (processChartRef.value) {
    processChart = echarts.init(processChartRef.value);
  }
  if (processStatsChartRef.value) {
    processStatsChart = echarts.init(processStatsChartRef.value);
  }
}

/** 更新图表数据 */
function updateCharts() {
  updateStatusChart();
  updateProgressChart();
  updateProcessChart();
  updateProcessStatsChart();
}

/** 更新进度状态分布图 */
function updateStatusChart() {
  if (!statusChart || !reportList.value.length) return;

  const statusData = reportList.value.reduce((acc: any, item) => {
    const status = item.progressStatus || '未知';
    acc[status] = (acc[status] || 0) + 1;
    return acc;
  }, {});

  const option = {
    title: {
      text: '进度状态分布',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '进度状态',
        type: 'pie',
        radius: '60%',
        data: Object.entries(statusData).map(([name, value]) => ({ name, value })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  statusChart.setOption(option);
}

/** 更新整体进度分布图 */
function updateProgressChart() {
  if (!progressChart || !reportList.value.length) return;

  const progressRanges = {
    '0-30%': 0,
    '30-60%': 0,
    '60-90%': 0,
    '90-100%': 0
  };

  reportList.value.forEach(item => {
    const progress = item.overallProgressNum || 0;
    if (progress < 30) progressRanges['0-30%']++;
    else if (progress < 60) progressRanges['30-60%']++;
    else if (progress < 90) progressRanges['60-90%']++;
    else progressRanges['90-100%']++;
  });

  const option = {
    title: {
      text: '整体进度分布',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: Object.keys(progressRanges)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '订单数量',
        type: 'bar',
        data: Object.values(progressRanges),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        }
      }
    ]
  };

  progressChart.setOption(option);
}

/** 更新工序完成率统计图 */
function updateProcessStatsChart() {
  if (!processStatsChart || !reportList.value.length) return;

  const processStats = {
    '已完成': 0,
    '进行中': 0,
    '未开始': 0
  };

  reportList.value.forEach(item => {
    if (item.processProgressList) {
      item.processProgressList.forEach(process => {
        if (process.isCompleted) {
          processStats['已完成']++;
        } else if (process.isInProgress) {
          processStats['进行中']++;
        } else {
          processStats['未开始']++;
        }
      });
    }
  });

  const option = {
    title: {
      text: '工序完成率统计',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '工序状态',
        type: 'pie',
        radius: ['40%', '70%'],
        data: Object.entries(processStats).map(([name, value]) => ({ name, value })),
        itemStyle: {
          color: function(params: any) {
            const colors = ['#722ed1', '#52c41a', '#d9d9d9'];
            return colors[params.dataIndex];
          }
        }
      }
    ]
  };

  processStatsChart.setOption(option);
}

/** 更新工序进度可视化图 */
function updateProcessChart() {
  if (!processChart || !reportList.value.length) return;

  const processData = reportList.value.slice(0, 10).map(item => ({
    name: item.orderCode,
    value: [
      item.orderCode,
      item.overallProgressNum || 0,
      item.progressStatus,
      item.wipProcesses || '',
      item.remainingProcesses || ''
    ]
  }));

  const option = {
    title: {
      text: '工序进度可视化（前10个订单）',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
/*    tooltip: {
      trigger: 'axis',
      formatter: function(params: any) {
        const data = params[0].data.value;
        return `
                进度: ${data[1]}%<br/>
                状态: ${data[2]}<br/>
                在制工序: ${data[3]}<br/>
                剩余工序: ${data[4]}`;
      }
    },*/
    xAxis: {
      type: 'category',
      data: processData.map(item => item.name),
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '进度(%)',
      max: 100
    },
    series: [
      {
        name: '整体进度',
        type: 'bar',
        data: processData.map(item => ({
          value: item.value[1],
          itemStyle: {
            color: item.value[2] === '延期' ? '#f56c6c' : '#67c23a'
          }
        })),
        markLine: {
          data: [
            { yAxis: 100, name: '完成线' }
          ]
        }
      }
    ]
  };

  processChart.setOption(option);
}

/** 窗口大小改变时重新调整图表 */
function handleResize() {
  statusChart?.resize();
  progressChart?.resize();
  processChart?.resize();
  processStatsChart?.resize();
}

onMounted(() => {
  getList();
  nextTick(() => {
    initCharts();
    window.addEventListener('resize', handleResize);
  });
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
  statusChart?.dispose();
  progressChart?.dispose();
  processChart?.dispose();
  processStatsChart?.dispose();
});
</script>

<style scoped>
.el-card {
  margin-bottom: 10px;
}

.el-progress {
  width: 100%;
}

/* 工序进度样式 */
.process-progress-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.process-step {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  position: relative;
}

.process-step.completed {
  background-color: #722ed1;
  color: white;
  border-color: #722ed1;
  box-shadow: 0 2px 8px rgba(114, 46, 209, 0.3);
}

.process-step.in-progress {
  background-color: #52c41a;
  color: white;
  border-color: #52c41a;
  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
  animation: pulse 2s infinite;
}

.process-step.pending {
  background-color: #f5f5f5;
  color: #666;
  border-color: #d9d9d9;
}

.process-step:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.process-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.process-percentage {
  font-size: 10px;
  opacity: 0.9;
  font-weight: 400;
}

/* 进行中工序的脉动动画 */
@keyframes pulse {
  0% {
    box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
  }
  50% {
    box-shadow: 0 2px 12px rgba(82, 196, 26, 0.6);
  }
  100% {
    box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
  }
}
</style>