klp-mono/apps/hand-factory/components/klp-shutdown-statistic/klp-shutdown-statistic.vue

<template>
  <view class="page-container">
    <!-- 时间维度切换 -->
    <view class="time-tab-bar">
      <view
        v-for="item in timeTabs"
        :key="item.value"
        class="time-tab-item"
        :class="{ 'time-tab-active': activeTab === item.value }"
        @click="handleTabChange(item.value)"
      >
        {{ item.label }}
      </view>
    </view>

    <!-- 日期选择区 -->
    <view class="date-selector">
      <!-- 日模式 -->
      <picker v-if="activeTab === 'day'" mode="date" :value="startDate" @change="handleDateChange">
        <view class="date-input">
          <text class="date-label">日期</text>
          <text class="date-value">{{ startDate }}</text>
        </view>
      </picker>

      <!-- 月模式 -->
      <view v-else-if="activeTab === 'month'" class="date-range-group">
        <picker mode="date" fields="month" :value="startDate" @change="handleStartMonthChange">
          <view class="date-input">
            <text class="date-label">起</text>
            <text class="date-value">{{ startDate }}</text>
          </view>
        </picker>
        <view class="date-separator">至</view>
        <picker mode="date" fields="month" :value="endDate" :start="startDate" :end="maxMonthEnd" @change="handleEndMonthChange">
          <view class="date-input">
            <text class="date-label">止</text>
            <text class="date-value">{{ endDate }}</text>
          </view>
        </picker>
      </view>

      <!-- 年模式 -->
      <view v-else class="date-range-group">
        <picker mode="date" fields="year" :value="startDate" @change="handleStartYearChange">
          <view class="date-input">
            <text class="date-label">起</text>
            <text class="date-value">{{ startDate }}</text>
          </view>
          </picker>
        <view class="date-separator">至</view>
        <picker mode="date" fields="year" :value="endDate" @change="handleEndYearChange">
          <view class="date-input">
            <text class="date-label">止</text>
            <text class="date-value">{{ endDate }}</text>
        </view>
          </picker>
        </view>
      </view>

    <!-- 停机汇总 -->
    <view class="summary-section">
      <view class="section-header">
        <text class="section-title">停机汇总</text>
        <text class="section-date">{{ displayDateRange }}</text>
      </view>
      <view class="summary-grid">
        <view class="summary-card" v-for="(item, index) in summaryData" :key="index">
          <text class="summary-label">{{ item.label }}</text>
          <view class="summary-value-box">
            <text class="summary-value">{{ item.value }}</text>
            <text v-if="item.unit" class="summary-unit">{{ item.unit }}</text>
        </view>
        </view>
      </view>
    </view>

    <!-- 停机趋势图（月/年视图） -->
    <view class="chart-section" v-if="activeTab !== 'day' && trendChartData.categories && trendChartData.categories.length > 0">
      <view class="section-header">
        <text class="section-title">停机趋势</text>
      </view>
      <view class="chart-wrapper trend-chart">
        <qiun-data-charts type="mix" :chartData="trendChartData" :opts="trendChartOpts"/>
      </view>
    </view>

    <!-- 停机分布 - 班组 -->
    <view class="chart-section">
      <view class="section-header">
        <text class="section-title">班组停机分布</text>
      </view>
      <view class="pie-chart-single" v-if="crewPieData.series[0].data.length > 0">
        <qiun-data-charts type="pie" :chartData="crewPieData" :opts="pieChartOpts"/>
      </view>
      <view class="empty-chart" v-else>
        <text class="empty-icon">📊</text>
        <text class="empty-text">此时间段未发生停机</text>
      </view>
    </view>

    <!-- 停机分布 - 类型 -->
    <view class="chart-section">
      <view class="section-header">
        <text class="section-title">停机类型分布</text>
      </view>
      <view class="pie-chart-single" v-if="typePieData.series[0].data.length > 0">
        <qiun-data-charts type="pie" :chartData="typePieData" :opts="pieChartOpts"/>
      </view>
      <view class="empty-chart" v-else>
        <text class="empty-icon">📊</text>
        <text class="empty-text">此时间段未发生停机</text>
      </view>
    </view>

    <!-- 停机详细列表（日视图） -->
    <view class="detail-section" v-if="activeTab === 'day'">
      <view class="section-header">
        <text class="section-title">停机详情</text>
      </view>
      <view class="detail-list">
        <view class="detail-item" v-for="(item, index) in tableData" :key="index">
          <view class="detail-header">
            <text class="detail-time">{{ item.time }}</text>
            <text class="detail-duration">{{ item.duration }}</text>
          </view>
          <view class="detail-info">
            <text class="detail-label">机组：</text>
            <text class="detail-text">{{ item.machine }}</text>
          </view>
          <view class="detail-info">
            <text class="detail-label">备注：</text>
            <text class="detail-text">{{ item.remark }}</text>
          </view>
        </view>
        <view v-if="tableData.length === 0" class="empty-state">
          <text class="empty-text">暂无停机记录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { listStoppage } from '@/api/pocket/plantState'

// 2. 独立工具函数（避免data初始化时调用this.methods的问题）
/**
 * 获取默认日期（根据视图类型）
 * @param {string} type - 视图类型：day/month/year
 * @returns {string} 格式化后的日期
 */
function getDefaultDate(type = "day") {
  const date = new Date();
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");

  switch (type) {
    case "day":
      return `${year}-${month}-${day}`;
    case "month":
      return `${year}-${month}`;
    case "year":
      return `${year}`;
    default:
      return `${year}-${month}-${day}`;
  }
}

// 获取上个月的年月
function getLastMonth() {
  const date = new Date();
  date.setMonth(date.getMonth() - 1);  // 减1个月
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  return `${year}-${month}`;
}

/**
 * 格式化日期
 * @param {Date} date - 日期对象
 * @param {string} type - 视图类型：day/month/year
 * @returns {string} 格式化后的日期
 */
function formatDate(date, type) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");

  switch (type) {
    case "day":
      return `${year}-${month}-${day}`;
    case "month":
      return `${year}-${month}`;
    case "year":
      return `${year}`;
    default:
      return `${year}-${month}-${day}`;
  }
}

export default {
  // 4. 响应式数据（替代 Vue3 的 ref）
  data() {
    return {
      // 激活的视图类型（日/月/年）
      activeTab: "day",
      // 开始日期/月份/年份
      startDate: getDefaultDate(),
      // 结束日期/月份/年份（默认）
      endDate: getDefaultDate(),
      // 视图切换选项
      timeTabs: [
        { label: "日", value: "day" },
        { label: "月", value: "month" },
        { label: "年", value: "year" }
      ],
      // 汇总数据
      summaryData: [
        { label: "停机时间", value: 0, unit: "min" },
        { label: "停机次数", value: 0, unit: "次" },
        { label: "作业率", value: 0, unit: "%" }
      ],
      // 停机趋势图（月/年视图）
      trendChartData: {
        categories: [],
        series: []
      },
      trendChartOpts: {
        color: ["#0066cc", "#f56c6c"],
        padding: [15, 15, 0, 15],
        enableScroll: false,
        legend: { position: "top" },
        xAxis: { disableGrid: true },
        yAxis: {
          gridType: "dash",
          dashLength: 4,
          gridColor: "#e4e7ed",
          data: [
            { position: "left", title: "停机时间(min)" },
            { position: "right", title: "作业率(%)" }
          ]
        },
        extra: {
          mix: {
            column: { width: 20 }
          }
        }
      },
      // 饼图配置
      pieChartOpts: {
        color: ["#0066cc", "#409eff", "#66b1ff", "#a0cfff", "#d9ecff"],
        padding: [15, 15, 15, 15],
        enableScroll: false,
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 16,
          fontSize: 10,
          fontColor: "#666",
          margin: 5,
          itemGap: 8
        },
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            labelWidth: 15,
            border: false,
            ringWidth: 0,
            offsetAngle: 0,
            disablePieStroke: true
          }
        }
      },
      // 班组停机分布
      crewPieData: {
        series: [{ data: [] }]
      },
      // 停机类型分布
      typePieData: {
        series: [{ data: [] }]
      },
      // 停机详细列表
      tableData: []
    };
  },
  // 5. 计算属性（替代 Vue3 的 computed 函数）
  computed: {
    // 月模式：最大结束月份（开始月份+1年）
    maxMonthEnd() {
      if (!this.startDate) return "";
      const date = new Date(this.startDate);
      date.setFullYear(date.getFullYear() + 1);
      return formatDate(date, "month");
    },
    // 日期范围展示文本（汇总标题用）
    displayDateRange() {
      switch (this.activeTab) {
        case "day":
          return this.startDate;
        case "month":
          return `${this.startDate} 至 ${this.endDate}`;
        case "year":
          return `${this.startDate} 至 ${this.endDate}`;
        default:
          return "";
      }
    }
  },
  // 6. 方法定义（所有交互逻辑放这里）
  methods: {
    // 切换视图（日/月/年）
    handleTabChange(tab) {
      this.activeTab = tab;

      // 重置日期
      if (tab === "day") {
        // 日视图：首尾日期相同（今天）
        const today = getDefaultDate();
        this.startDate = today;
        this.endDate = today;
      } else if (tab === "month") {
        // 月视图：上个月到这个月
        this.startDate = getLastMonth();
        this.endDate = getDefaultDate("month");
      } else {
        // 年视图：今年
        const currentYear = getDefaultDate("year");
        this.startDate = currentYear;
        this.endDate = currentYear;
      }

      // 切换视图时重新加载数据
      this.loadStoppageData();
    },
    // 日模式：日期选择器变更
    handleDateChange(e) {
      this.startDate = e.detail.value;
      this.endDate = e.detail.value; // 日模式首尾日期一致
      this.loadStoppageData();
    },
    // 月模式：开始月份变更
    handleStartMonthChange(e) {
      this.startDate = e.detail.value;
      // 自动调整结束月份：不超过开始月份+1年
      const maxEndDate = new Date(this.startDate);
      maxEndDate.setFullYear(maxEndDate.getFullYear() + 1);
      const maxEndStr = formatDate(maxEndDate, "month");
      if (new Date(this.endDate) > maxEndDate) {
        this.endDate = maxEndStr;
      }
      this.loadStoppageData();
    },
    // 月模式：结束月份变更
    handleEndMonthChange(e) {
      this.endDate = e.detail.value;
      this.loadStoppageData();
    },
    // 年模式：开始年份变更
    handleStartYearChange(e) {
      this.startDate = e.detail.value;
      this.loadStoppageData();
    },
    // 年模式：结束年份变更
    handleEndYearChange(e) {
      this.endDate = e.detail.value;
      this.loadStoppageData();
    },
    // 加载停机数据
    loadStoppageData() {
      uni.showLoading({ title: '加载中' })

      // 转换为完整日期格式
      const start = this.formatFullDate(this.startDate, true)
      const end = this.formatFullDate(this.endDate, false)

      const queryParams = {
        pageNum: 1,
        pageSize: 100,
        startDate: start,
        endDate: end
      }

      console.log('停机查询参数:', queryParams)

      listStoppage(queryParams).then(response => {
        uni.hideLoading()

        console.log('停机统计响应:', response)

        if (response.code === 200 && response.rows && response.rows.length > 0) {
          // 处理停机数据
          console.log('停机数据:', response.rows)

          // 更新表格数据（日视图）
          this.tableData = response.rows.map(item => ({
            time: this.formatDateTime(item.startDate) + ' - ' + this.formatDateTime(item.endDate),
            duration: this.secondsToMinutes(item.duration) + 'min',
            remark: item.remark || '-',
            machine: item.unit || '-'
          }))

          // 计算汇总数据（秒转分钟）
          const totalDurationSeconds = response.rows.reduce((sum, item) => sum + (Number(item.duration) || 0), 0)
          const totalDurationMinutes = this.secondsToMinutes(totalDurationSeconds)
          const totalCount = response.rows.length

          // 计算作业率（需要知道总可用时间）
          const totalAvailableMinutes = this.getTotalAvailableMinutes()
          const workRate = this.calculateWorkRate(totalDurationMinutes, totalAvailableMinutes)

          this.summaryData = [
            { label: '停机时间', value: totalDurationMinutes, unit: 'min' },
            { label: '停机次数', value: totalCount, unit: '次' },
            { label: '作业率', value: workRate, unit: '%' }
          ]

          // 更新饼图数据（按班组统计）
          const crewMap = {}
          const typeMap = {}

          response.rows.forEach(item => {
            const crew = item.crew || '未知班组'
            const type = item.stopType || '未知类型'
            const durationMinutes = this.secondsToMinutes(item.duration)
            crewMap[crew] = (crewMap[crew] || 0) + durationMinutes
            typeMap[type] = (typeMap[type] || 0) + durationMinutes
          })

          this.crewPieData = {
            series: [{
              data: Object.keys(crewMap).map(crew => ({
                name: crew,
                value: crewMap[crew]
              }))
            }]
          }

          this.typePieData = {
            series: [{
              data: Object.keys(typeMap).map(type => ({
                name: type,
                value: typeMap[type]
              }))
            }]
          }

          // 如果是月/年视图，构建趋势图
          if (this.activeTab !== 'day' && response.rows.length > 0) {
            this.buildTrendChart(response.rows)
          }
        } else {
          // 没有数据时使用默认值
          console.log('暂无停机数据')
          // 清空数据
          this.tableData = []
          this.summaryData = [
            { label: '停机时间', value: 0, unit: 'min' },
            { label: '停机次数', value: 0, unit: '次' },
            { label: '作业率', value: 100, unit: '%' }
          ]
          this.crewPieData = { series: [{ data: [] }] }
          this.typePieData = { series: [{ data: [] }] }
          // 清空趋势图
          this.trendChartData = {
            categories: [],
            series: []
          }
        }
      }).catch(error => {
        uni.hideLoading()
        console.error('加载停机数据失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      })
    },
    // 格式化日期时间
    formatDateTime(dateStr) {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    // 获取总可用时间（分钟）
    getTotalAvailableMinutes() {
      const start = new Date(this.formatFullDate(this.startDate, true))
      const end = new Date(this.formatFullDate(this.endDate, false))

      // 计算天数差
      const diffTime = end - start
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1  // 包含结束日期

      // 每天1440分钟（24小时）
      return diffDays * 1440
    },

    // 计算作业率
    calculateWorkRate(stopDuration, totalAvailableMinutes) {
      if (!totalAvailableMinutes || totalAvailableMinutes === 0) {
        return 100
      }
      const workRate = ((totalAvailableMinutes - stopDuration) / totalAvailableMinutes) * 100
      return Math.max(0, Math.min(100, workRate)).toFixed(2)
    },

    // 构建趋势图（月/年视图）
    buildTrendChart(stoppageData) {
      if (!stoppageData || stoppageData.length === 0) {
        console.log('无法构建趋势图：数据为空')
        this.trendChartData = {
          categories: [],
          series: []
        }
        return
      }

      // 按日期分组统计
      const dateMap = {}
      stoppageData.forEach(item => {
        if (!item.startDate) return
        const date = this.formatDate(item.startDate)
        if (!dateMap[date]) {
          dateMap[date] = { duration: 0, count: 0 }
        }
        const durationMinutes = this.secondsToMinutes(item.duration)
        dateMap[date].duration += durationMinutes
        dateMap[date].count += 1
      })

      const categories = Object.keys(dateMap).sort()

      if (categories.length === 0) {
        console.log('无法构建趋势图：无有效日期')
        this.trendChartData = {
          categories: [],
          series: []
        }
        return
      }

      const durationData = []
      const rateData = []

      categories.forEach(date => {
        durationData.push(dateMap[date].duration)
        // 趋势图中每个点是单天的作业率，所以总时间是1440分钟
        const rate = this.calculateWorkRate(dateMap[date].duration, 1440)
        rateData.push(Number(rate))
      })

      console.log('趋势图数据构建成功:', { categories, durationData, rateData })

      this.trendChartData = {
        categories: categories,
        series: [
          {
            name: "停机时间",
            type: "column",
            index: 0,
            data: durationData
          },
          {
            name: "作业率",
            type: "line",
            index: 1,
            style: "curve",
            data: rateData
          }
        ]
      }
    },

    // 格式化日期（简短格式）
    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${month}/${day}`
    },

    // 秒转分钟（保留整数）
    secondsToMinutes(seconds) {
      if (!seconds || seconds === 0) return 0
      return Math.round(Number(seconds) / 60)
    },

    // 格式化为完整日期（用于查询）
    formatFullDate(dateStr, isStart) {
      if (!dateStr) return ''

      // 如果已经是完整日期格式 yyyy-MM-dd，直接返回
      if (dateStr.length === 10) {
        return dateStr
      }

      // 月份格式 yyyy-MM
      if (dateStr.length === 7) {
        if (isStart) {
          return `${dateStr}-01`
        } else {
          const [year, month] = dateStr.split('-')
          const lastDay = new Date(year, month, 0).getDate()
          return `${dateStr}-${String(lastDay).padStart(2, '0')}`
        }
      }

      // 年份格式 yyyy
      if (dateStr.length === 4) {
        if (isStart) {
          return `${dateStr}-01-01`
        } else {
          return `${dateStr}-12-31`
        }
      }

      return dateStr
    }
  },
  // 生命周期钩子
  mounted() {
    this.loadStoppageData()
  }
};
</script>

<style scoped lang="scss">
/* 页面容器 */
.page-container {
  background: #f5f7fa;
  padding: 24rpx;
}

/* 时间维度切换 */
.time-tab-bar {
  display: flex;
  background: #fff;
  border-radius: 8rpx;
  padding: 8rpx;
  margin-bottom: 24rpx;
  border: 1rpx solid #e4e7ed;
}

.time-tab-item {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  font-size: 26rpx;
  color: #606266;
  border-radius: 6rpx;
  transition: all 0.2s;
}

.time-tab-active {
  background: #0066cc;
  color: #fff;
  font-weight: 500;
}

/* 日期选择区 */
.date-selector {
  background: #fff;
  border-radius: 8rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  border: 1rpx solid #e4e7ed;
}

.date-range-group {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.date-input {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background: #f5f7fa;
  border: 1rpx solid #e4e7ed;

  &:first-child {
    border-radius: 6rpx 0 0 6rpx;
    border-right: none;
  }

  &:last-child {
    border-radius: 0 6rpx 6rpx 0;
    border-left: none;
  }
}

.date-label {
  font-size: 26rpx;
  color: #909399;
  margin-right: 16rpx;
}

.date-value {
  font-size: 28rpx;
  color: #303133;
  font-weight: 500;
  flex: 1;
  text-align: right;
}

.date-separator {
  font-size: 28rpx;
  color: #fff;
  background: #0066cc;
  padding: 24rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80rpx;
}

/* 区块样式 */
.summary-section,
.chart-section,
.detail-section {
  margin-bottom: 24rpx;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding-left: 16rpx;
  border-left: 4rpx solid #0066cc;
}

.section-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #303133;
}

.section-date {
  font-size: 24rpx;
  color: #909399;
}

/* 汇总卡片网格 */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
}

.summary-card {
  background: #fff;
  border: 1rpx solid #e4e7ed;
  border-radius: 8rpx;
  padding: 28rpx 20rpx;
  text-align: center;
}

.summary-label {
  display: block;
  font-size: 24rpx;
  color: #909399;
  margin-bottom: 16rpx;
}

.summary-value-box {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.summary-value {
  font-size: 40rpx;
  font-weight: 600;
  color: #0066cc;
  line-height: 1;
}

.summary-unit {
  font-size: 22rpx;
  color: #909399;
  margin-left: 6rpx;
}

/* 图表容器 */
.chart-wrapper {
  background: #fff;
  border: 1rpx solid #e4e7ed;
  border-radius: 8rpx;
  padding: 24rpx 16rpx;
  min-height: 450rpx;
}

/* 趋势图固定高度 */
.trend-chart {
  height: 500rpx;
  min-height: 500rpx;
}

/* 单个饼图容器 */
.pie-chart-single {
  background: #fff;
  border: 1rpx solid #e4e7ed;
  border-radius: 8rpx;
  padding: 32rpx 0;
  min-height: 480rpx;
}

/* 空状态图表占位 */
.empty-chart {
  background: #fff;
  border: 1rpx solid #e4e7ed;
  border-radius: 8rpx;
  padding: 100rpx 0;
  min-height: 480rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
}

.empty-icon {
  font-size: 80rpx;
  opacity: 0.3;
}

.empty-text {
  font-size: 28rpx;
  color: #909399;
}

/* 停机详情列表 */
.detail-list {
  background: #fff;
  border-radius: 8rpx;
  border: 1rpx solid #e4e7ed;
  overflow: hidden;
}

.detail-item {
  padding: 24rpx;
  border-bottom: 1rpx solid #f5f7fa;

  &:last-child {
    border-bottom: none;
  }
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.detail-time {
  font-size: 26rpx;
  color: #606266;
}

.detail-duration {
  font-size: 28rpx;
  color: #0066cc;
  font-weight: 600;
}

.detail-info {
  display: flex;
  align-items: baseline;
  margin-bottom: 8rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.detail-label {
  font-size: 24rpx;
  color: #909399;
  min-width: 120rpx;
}

.detail-text {
  font-size: 26rpx;
  color: #303133;
  flex: 1;
}

/* 空状态 */
.empty-state {
  padding: 100rpx 0;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #909399;
}
</style>