klp-mono/apps/hand-factory/components/lines/paint.vue

<template>
  <view>

    <scroll-view scroll-y v-if="currentTab == 2">
      <klp-product-statistic></klp-product-statistic>
    </scroll-view>

    <scroll-view scroll-y v-if="currentTab == 3">
      <klp-shutdown-statistic></klp-shutdown-statistic>
    </scroll-view>

    <scroll-view scroll-y v-if="currentTab == 4">
      <klp-team-performance></klp-team-performance>
    </scroll-view>
  </view>
</template>

<script>
import { getAllPlantStateDefines, listPlantStateHistory } from '@/api/pocket/plantState'
import config from '@/config'

export default {
  // 响应式数据（替代 Vue 3 的 ref）
  data() {
    return {
      currentTab: 1, // 当前选中的标签页
      tabData: [
        { text: "实时监控", value: 1 },
        { text: "生产统计", value: 2 },
        { text: "停机统计", value: 3 },
        { text: "班组绩效", value: 4 }
      ],
      status: [ // 状态指标数据（供 k-metric-card 使用）
        { label: '网络状态', value: '检测中...' },
        { label: '当前班组', value: '—' }
      ],
      plantStateDefines: [] // 缓存所有的状态定义
    }
  },
  // 生命周期钩子（替代 Vue 3 的 onMounted）
  mounted() {
    this.checkNetworkStatus() // 检测网络状态
    this.initPlantStateDefines() // 先加载所有定义
  },
  // 方法定义（所有函数需放在 methods 中）
  methods: {
    // 检测网络状态
    checkNetworkStatus() {
      const startTime = Date.now()

      // 使用uni.request测试网络连接速度
      uni.request({
        url: config.baseUrl + '/pocket/proPlantStateDefine/allWithValues',
        method: 'GET',
        timeout: 5000,
        success: (res) => {
          const responseTime = Date.now() - startTime

          // 根据响应时间判断网络状态
          if (responseTime < 500) {
            this.status[0].value = '通畅'
          } else if (responseTime < 2000) {
            this.status[0].value = '卡顿'
          } else {
            this.status[0].value = '异常'
          }
        },
        fail: () => {
          this.status[0].value = '异常'
        }
      })
    },

    // 初始化：加载所有状态定义及其当前值
    initPlantStateDefines() {
      uni.showLoading({ title: '加载中' })

      getAllPlantStateDefines().then(response => {
        if (response.code === 200 && response.data) {
          // 缓存所有定义
          this.plantStateDefines = response.data
          console.log('状态定义已加载:', this.plantStateDefines)

          uni.hideLoading()

          // 这里可以根据 plantStateDefines 来处理首页数据
          // 例如：this.initHomePageData()
        } else {
          uni.hideLoading()
        }
      }).catch(error => {
        uni.hideLoading()
        console.error('加载状态定义失败:', error)
      })
    },


    // 根据define ID获取对应的值（工具方法）
    getValueByDefineId(dataRow, defineId) {
      const fieldName = `value${defineId}`
      return dataRow[fieldName] || null
    },

    // 格式化日期（工具方法）
    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      return `${date.getMonth() + 1}/${date.getDate()}`
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background-color: #b2b2b2;
  height: 100vh;
  overflow: auto;
}

/* 简洁标签栏 */
.tab-container {
  display: flex;
  width: 100%;
  background: #fff;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #e8e8e8;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 30rpx 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  .tab-label {
    font-size: 28rpx;
    color: #666;
    font-weight: 400;
    transition: all 0.3s ease;
  }

  &.tab-active {
    .tab-label {
      color: #1a73e8;
      font-weight: 600;
    }
  }

  .tab-indicator {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50rpx;
    height: 4rpx;
    background: #1a73e8;
    border-radius: 2rpx;
  }
}

/* 内容卡片 */
.content-card {
  background: #fff;
  margin-bottom: 20rpx;
}

/* 空状态占位 */
.empty-placeholder {
  padding: 100rpx 40rpx;
  text-align: center;

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

/* 指标容器 */
.metric-container {
  display: flex;
  justify-content: space-around;
  background: #fff;
  padding: 0;
}

/* 指标项 */
.metric-item {
  flex: 1;
  text-align: center;
  padding: 32rpx;
  border-radius: 12rpx;
  transition: all 0.2s;
}

.metric-value {
  font-size: 48rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
  line-height: 1.2;
}

.metric-label {
  font-size: 28rpx;
  color: #666;
  letter-spacing: 1rpx;

  .metric-unit {
    font-size: 24rpx;
    color: #999;
    margin-left: 4rpx;
  }
}

/* 信息容器 */
.info-container {
  padding: 20rpx;
  background: #fff;
  border-radius: 12rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;

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

/* 信息项 */
.info-item {
  flex: 0 0 48%;
  display: flex;
  align-items: baseline;
  padding: 16rpx 20rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
  border: 1rpx solid #e8e8e8;
  transition: all 0.2s ease;

  &:active {
    background: #f0f2f5;
  }
}

.info-label {
  color: #666;
  font-size: 26rpx;
  flex-shrink: 0;
  margin-right: 16rpx;
}

.info-value {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
  word-break: break-all;
}
</style>