klp-mono/apps/hand-factory/components/klp-home/klp-home.vue

<template>
  <view class="production-dashboard">
    <!-- 可关闭欢迎条幅 -->
    <u-alert
      v-if="showWelcome"
      title="&#9406;欢迎使用智能生产监控平台"
      type="warning"
      :closable="true"
      @close="showWelcome = false"
      class="welcome-banner"
      icon="notification"
    />

    <!-- 操作工具栏 -->
    <view
      class="toolbar u-flex u-row-between u-p-20 u-m-b-20 bg-white shadow-sm"
    >
      <!-- 日期选择器 -->
      <uni-datetime-picker type="date" :clear-icon="false" v-model="value1" />
    </view>

    <!-- 数据可视化图表 -->
    <view class="chart-box u-m-20 u-p-20 bg-white u-radius-8 shadow-sm">
      <image
        src="/static/images/banner/banner03.jpg"
        mode="widthFix"
        class="chart-image"
        @error="handleChartError"
      />
    </view>

    <!-- 智能数据表格 -->
    <view class="data-table u-m-20 bg-white u-radius-8 shadow-sm">
      <k-table
        :columns="columns"
        :data="tableData"
        height="800rpx"
      ></k-table>
    </view>
  </view>
</template>

<script>
import klpTable from "../klp-table/klp-table.vue";

const STATUS_MAP = {
  运行中: { type: "success", icon: "checkmark-circle" },
  待机: { type: "warning", icon: "pause-circle" },
  故障: { type: "error", icon: "close-circle" },
};

export default {
  components: { klpTable },
  data() {
    return {
      // 欢迎条幅状态
      showWelcome: true,
      value1: '',
      show: false,
      // 日期相关
      selectedDate: Date.now(),
      datePickerVisible: false,

      // 表格配置
      tableLayout: "horizontal",
      columns: [
        { title: "设备编号", key: "id", width: "200rpx" },
        { title: "产量", key: "output", align: "center" },
        { title: "合格率", key: "rate", align: "right" },
        { title: "状态", key: "status", width: "150rpx" },
      ],
      tableData: [
        { id: "M-001", output: 2580, rate: "98.5%", status: "运行中" },
        { id: "M-002", output: 1820, rate: "97.2%", status: "待机" },
        { id: "M-003", output: 3050, rate: "99.1%", status: "故障" },
      ],

      // 图表错误状态
      chartError: false,
    };
  },

  computed: {
    // 格式化日期
    formattedDate() {
      return this.selectedDate;
    },

    // 布局提示文字
    layoutText() {
      return this.tableLayout === "horizontal" ? "表格视图" : "列表视图";
    },

    // 过滤后的数据（示例过滤逻辑）
    filteredData() {
      return this.productionData.filter((item) => {
        return this.selectedDate % 2 === 0 ? item[1] > 2000 : item;
      });
    },
  },

  mounted() {
    this.loadPreferences();
  },

  methods: {
    // 加载用户偏好设置
    loadPreferences() {
      const prefs = uni.getStorageSync("dashboardPrefs") || {};
      this.showWelcome = prefs.showWelcome !== false;
      this.tableLayout = prefs.tableLayout || "horizontal";
    },

    // 保存偏好设置
    savePreferences() {
      uni.setStorageSync("dashboardPrefs", {
        showWelcome: this.showWelcome,
        tableLayout: this.tableLayout,
      });
    },

    // 打开日期选择器
    openDatePicker() {
      this.datePickerVisible = true;
    },

    // 日期确认处理
    handleDateConfirm(e) {
      this.selectedDate = e.value;
      this.datePickerVisible = false;
      this.refreshData();
    },

    // 切换表格布局
    toggleTableLayout() {
      this.tableLayout =
        this.tableLayout === "horizontal" ? "vertical" : "horizontal";
      this.savePreferences();
    },

    // 获取状态样式
    getStatusStyle(status) {
      return STATUS_MAP[status]?.type || "info";
    },

    // 图表加载失败处理
    handleChartError() {
      this.chartError = true;
      this.$u.toast("图表加载失败，请稍后重试");
    },

    // 模拟数据刷新
    async refreshData() {
      try {
        // 这里可以添加真实的数据请求逻辑
        const mockData = await this.$u.mock.wait(500, [...this.productionData]);
        this.productionData = mockData;
      } catch (error) {
        this.$u.toast("数据更新失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.production-dashboard {
  background: #f8f9fa;
  min-height: 100vh;
}

.welcome-banner {
  margin: 20rpx;
  border-radius: 16rpx;
  border: 1rpx solid #ffe58f;
}

.toolbar {
  border-radius: 16rpx;

  .action-btn {
    padding: 12rpx 24rpx;
    background: #f8f9fa;
    border: 1rpx solid #eee;

    &::v-deep .u-button__text {
      color: #606266;
      font-size: 28rpx;
    }
  }
}

.chart-box {
  .chart-image {
    width: 100%;
    border-radius: 8rpx;
  }
}

.data-table {
  .table-header {
    background: #fafafa;

    .header-cell {
      color: #303133;
      font-weight: 500;
      padding: 24rpx;
    }
  }

  .data-row {
    &:nth-child(even) {
      background: #fafafa;
    }

    .body-cell {
      color: #606266;
      padding: 24rpx;
      text-align: center;
    }
  }

  // 响应式布局
  @media (max-width: 480px) {
    .header-cell,
    .body-cell {
      font-size: 24rpx;
      padding: 16rpx;
    }
  }
}
</style>