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

<template>
  <view>
    <view class="tab">
      <uni-data-checkbox
        mode="tag"
        selectedColor="#2bf"
        v-model="currentTab"
        :localdata="tabData"
      ></uni-data-checkbox>
    </view>
    
    <scroll-view scroll-y v-if="currentTab === 1">
      <view class="content-card">
        <view class="metric-container">
          <!-- 网络状态指标 -->
          <view class="metric-item">
            <view class="metric-value">
              正常
            </view>
            <view class="metric-label">
              网络状态
            </view>
          </view>

          <!-- 班组指标 -->
          <view class="metric-item">
            <view class="metric-value team-number">
              乙 / 中
            </view>
            <view class="metric-label">
              当前班组
            </view>
          </view>
        </view>
      </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 {
  // 3. 响应式数据（替代 Vue 3 的 ref）
  data() {
    return {
      currentTab: 1, // 当前激活的标签页（默认实时监控）
      tabData: [ // 标签页配置
        { text: "实时监控", value: 1 },
        { text: "生产统计", value: 2 },
        { text: "停机统计", value: 3 },
        { text: "班组绩效", value: 4 }
      ],
      chartData: {} // 图表数据（初始化空对象，后续加载）
    };
  },
  // 4. 生命周期钩子（替代 Vue 3 的 onMounted）
  mounted() {
    this.getServerData(); // 页面挂载后加载图表数据
  },
  // 5. 方法定义（所有数据处理与逻辑）
  methods: {
    // 模拟从服务器获取图表数据
    getServerData() {
      setTimeout(() => {
        // 模拟服务器返回的图表数据
        const serverRes = {
          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(serverRes));
      }, 500);
    }
  }
};
</script>

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

/* 滚动视图间隙（原代码选择器可能笔误，保留原逻辑） */
view-scroll {
  gap: 30rpx;
}

/* 标签页容器样式 */
.tab {
  margin: auto;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  top: 88rpx; /* 需配合 position: sticky 生效，原代码未加，可根据需求补充 */
  position: sticky; /* 补充粘性定位，确保标签页滚动时固定在顶部 */
  z-index: 999;
  background-color: #fff;
  padding: 10rpx 0; /* 补充内边距，优化点击体验 */
}

/* 内容卡片样式 */
.content-card {
  border-radius: 16rpx; /* 补充圆角，与设计风格统一 */
  overflow: hidden; /* 防止内部内容溢出卡片 */
}

/* 指标容器样式 */
.metric-container {
  display: flex;
  justify-content: space-around;
  background-color: white;
  padding: 20rpx 0;
}

/* 单个指标项样式 */
.metric-item {
  flex: 1;
  text-align: center;
  padding: 32rpx;
  border-radius: 12rpx;
  transition: all 0.3s;
  margin: 0 10rpx; /* 补充左右间距，避免指标过挤 */
  background-color: #f8f9fa; /* 补充背景色，区分指标区域 */
}

/* 指标数值样式 */
.metric-value {
  font-size: 48rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
  line-height: 1.2;
  color: #333;
}

/* 指标标签样式 */
.metric-label {
  font-size: 28rpx;
  color: #666;
  letter-spacing: 2rpx;
}

/* 机组跟踪信息容器 */
.info-container {
  padding: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  border-top: 1px solid #eee; /* 补充上边框，区分标题与内容 */
}

/* 信息行样式 */
.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;

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

/* 单个信息项样式 */
.info-item {
  flex: 0 0 48%; /* 留出4%的间隔，避免内容溢出 */
  display: flex;
  align-items: baseline; /* 文字基线对齐，排版更整齐 */
}

/* 信息标签样式 */
.info-label {
  color: #666;
  font-size: 28rpx;
  flex-shrink: 0;
  margin-right: 16rpx;
}

/* 信息数值样式 */
.info-value {
  color: #333;
  font-size: 30rpx;
  font-weight: 500;
  word-break: break-all; /* 长文本自动换行，防止超出容器 */
}
</style>