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

<template>
  <view>
    <!-- 简洁标签栏 -->
    <view class="tab-container">
      <view 
        v-for="item in tabData" 
        :key="item.value"
        @click="currentTab = item.value"
        class="tab-item"
        :class="{ 'tab-active': currentTab === item.value }"
      >
        <text class="tab-label">{{ item.text }}</text>
        <view class="tab-indicator" v-if="currentTab === item.value"></view>
      </view>
    </view>
    
    <scroll-view scroll-y v-if="currentTab === 1">
      <view class="content-card">
        <k-metric-card
          :items="status"
          :columns="2"
        ></k-metric-card>
      </view>

      <view class="content-card">
        <klp-collapse-panel title="状态统计">
          <qiun-data-charts type="line" :chartData="chartData" />
        </klp-collapse-panel>
      </view>

      <view class="content-card">
        <klp-collapse-panel title="轧机状态">
          <qiun-data-charts type="column" :chartData="chartData" />
        </klp-collapse-panel>
      </view>

      <view class="content-card">
        <klp-collapse-panel title="机组跟踪">
          <view style="padding: 30rpx; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 20rpx;">
            <view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border-radius: 10rpx;">
              <text>轧机</text>
              <text>6390000</text>
            </view>

            <view style="border-radius: 10rpx; overflow: hidden;">
              <view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border: 1px solid #d9edf6;">
                <text>圆剪盘</text>
                <text>6390000</text>
              </view>
              <view class="info-container">
                <view class="info-row">
                  <view class="info-item">
                    <text class="info-label">设备编号：</text>
                    <text class="info-value">M-001</text>
                  </view>
                  <view class="info-item">
                    <text class="info-label">运行状态：</text>
                    <text class="info-value">正常</text>
                  </view>
                </view>

                <view class="info-row">
                  <view class="info-item">
                    <text class="info-label">当前产量：</text>
                    <text class="info-value">2580 件</text>
                  </view>
                  <view class="info-item">
                    <text class="info-label">合格率：</text>
                    <text class="info-value">98.5%</text>
                  </view>
                </view>
              </view>
            </view>

            <view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border-radius: 10rpx;">
              <text>酸洗</text>
              <text>6390000</text>
            </view>

            <view style="border-radius: 10rpx; overflow: hidden;">
              <view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border: 1px solid #d9edf6;">
                <text>入口活套</text>
                <text>6390000</text>
              </view>
              <view class="info-container">
                <view class="info-row">
                  <view class="info-item">
                    <text class="info-label">设备编号：</text>
                    <text class="info-value">M-001</text>
                  </view>
                  <view class="info-item">
                    <text class="info-label">运行状态：</text>
                    <text class="info-value">正常</text>
                  </view>
                </view>

                <view class="info-row">
                  <view class="info-item">
                    <text class="info-label">当前产量：</text>
                    <text class="info-value">2580 件</text>
                  </view>
                  <view class="info-item">
                    <text class="info-label">合格率：</text>
                    <text class="info-value">98.5%</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </klp-collapse-panel>
      </view>

      <view class="content-card">
        <klp-collapse-panel title="能耗">
          <view class="metric-container">
            <!-- 网络状态指标 -->
            <view class="metric-item">
              <view class="metric-value">
                9.9
              </view>
              <view class="metric-label">
                工艺缎带钢线速度
              </view>
            </view>

            <!-- 班组指标 -->
            <view class="metric-item">
              <view class="metric-value team-number">
                126.0
              </view>
              <view class="metric-label">
                轧机出口带钢线速度
              </view>
            </view>
          </view>
        </klp-collapse-panel>
      </view>
    </scroll-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>
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: '乙 / 中' }
      ],
      chartData: {} // 图表数据（初始化空对象）
    }
  },
  // 生命周期钩子（替代 Vue 3 的 onMounted）
  mounted() {
    this.getServerData() // 页面挂载后加载数据
  },
  // 方法定义（所有函数需放在 methods 中）
  methods: {
    // 模拟从服务器获取数据
    getServerData() {
      setTimeout(() => {
        const res = {
          categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
          series: [
            { name: '目标值', data: [35, 36, 31, 33, 13, 34] },
            { name: '完成量', data: [18, 27, 21, 24, 6, 28] }
          ]
        }
        // 深拷贝避免引用问题（Vue 2 响应式兼容）
        this.chartData = JSON.parse(JSON.stringify(res))
      }, 500)
    }
  }
}
</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;
}

/* 指标容器 */
.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;
}

/* 信息容器 */
.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>