添加掌上工厂应用

2025-10-27 13:21:43 +08:00
parent f5c313421a
commit 718f0efc76
408 changed files with 64677 additions and 1 deletions
--- a/apps/hand-factory/components/klp-product-statistic/klp-product-statistic.vue
+++ b/apps/hand-factory/components/klp-product-statistic/klp-product-statistic.vue
@@ -0,0 +1,442 @@
+<template>
+  <view class="container">
+    <!-- 日月年汇总单选 -->
+    <view class="tab-container">
+      <view 
+        v-for="item in timeTabs" 
+        :key="item.value"
+        class="tab-item"
+        :class="{ active: activeTab === item.value }"
+        @click="handleTabChange(item.value)"
+      >
+        {{ item.label }}
+      </view>
+    </view>
+
+    <!-- 日期选择器 -->
+    <view class="date-picker">
+      <!-- 日模式 -->
+      <view v-if="activeTab === 'day'" class="date-item">
+        <picker 
+          mode="date" 
+          :value="startDate" 
+          @change="handleDateChange"
+        >
+          <view class="picker-text">选择日期：{{ startDate }}</view>
+        </picker>
+      </view>
+
+      <!-- 月模式 -->
+      <view v-else-if="activeTab === 'month'" class="date-range">
+        <view class="date-item">
+          <picker
+            mode="date"
+            fields="month"
+            :value="startDate"
+            @change="handleStartMonthChange"
+          >
+            <view class="picker-text">开始月份：{{ startDate }}</view>
+          </picker>
+        </view>
+        <view class="date-item">
+          <picker
+            mode="date"
+            fields="month"
+            :value="endDate"
+            :start="startDate"
+            :end="maxMonthEnd"
+            @change="handleEndMonthChange"
+          >
+            <view class="picker-text">结束月份：{{ endDate }}</view>
+          </picker>
+        </view>
+      </view>
+
+      <!-- 年模式 -->
+      <view v-else class="date-range">
+        <view class="date-item">
+          <picker
+            mode="date"
+            fields="year"
+            :value="startDate"
+            @change="handleStartYearChange"
+          >
+            <view class="picker-text">开始年份：{{ startDate }}</view>
+          </picker>
+        </view>
+        <view class="date-item">
+          <picker
+            mode="date"
+            fields="year"
+            :value="endDate"
+            @change="handleEndYearChange"
+          >
+            <view class="picker-text">结束年份：{{ endDate }}</view>
+          </picker>
+        </view>
+      </view>
+    </view>
+
+    <!-- 统计图轮播（产量相关） -->
+    <view class="chart-container">
+      <swiper 
+        class="chart-swiper"
+        :current="currentSwiperIndex"
+        @change="onSwiperChange"
+        :autoplay="false"
+        :circular="false"
+        :indicator-dots="true"
+        indicator-active-color="#2bf"
+        indicator-color="#e5e5e5"
+      >
+        <swiper-item v-for="(item, index) in chanLiangChartConfig" :key="index">
+          <qiun-data-charts :type="item.type" :chartData="item.chartData" :title="item.title"/>
+        </swiper-item>
+      </swiper>
+    </view>
+
+    <!-- 日期范围汇总 -->
+    <klp-collapse-panel :title="'汇总（' + displayDateRange + '）'">
+      <k-metric-card
+        :items="summaryData"
+        :columns="3"
+      />
+
+      <!-- 汇总饼图轮播 -->
+      <swiper 
+        class="chart-swiper"
+        :autoplay="false"
+        :circular="false"
+        :indicator-dots="true"
+        indicator-active-color="#2bf"
+        indicator-color="#e5e5e5"
+      >
+        <swiper-item v-for="(item, index) in summaryChartConfig" :key="index">
+          <qiun-data-charts type="pie" :opts="item.opts" :chartData="item.chartData" :title="item.title"/>
+        </swiper-item>
+      </swiper>
+    </klp-collapse-panel>
+  </view>
+</template>
+
+<script>
+// 2. 独立工具函数（避免Vue2 data初始化时调用this.methods的问题）
+/**
+ * 获取默认日期（根据视图类型）
+ * @param {string} type - 视图类型：day/month/year
+ * @returns {string} 格式化后的日期
+ */
+function getDefaultDate(type = "day") {
+  const date = new Date();
+  return formatDate(date, type);
+}
+
+/**
+ * 格式化日期
+ * @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" }
+      ],
+      // 产量相关图表配置（轮播）
+      chanLiangChartConfig: [
+        { 
+          title: "规格曲线",
+          type: "column", 
+          chartData: {} // 初始空对象，后续加载数据
+        },
+        {
+          title: "超产-欠产统计",
+          type: "line",
+          chartData: {} // 初始空对象，后续加载数据
+        },
+        {
+          title: "产量-成材率统计",
+          type: "column",
+          chartData: {
+            categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
+            series: [
+              { name: "目标值", data: [35, 36, 31, 33, 13, 34] },
+              { name: "完成量", data: [18, 27, 21, 24, 6, 28] }
+            ]
+          } // 固定初始数据
+        }
+      ],
+      // 汇总饼图配置（轮播）
+      summaryChartConfig: [
+        {
+          title: "成品厚度统计(mm)",
+          opts: {
+            color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+            padding: [5,5,5,5],
+            enableScroll: false,
+            position: "left",
+            float: "left",
+            extra: {
+              pie: {
+                activeOpacity: 0.5,
+                activeRadius: 10,
+                offsetAngle: 0,
+                labelWidth: 15,
+                border: false,
+                borderWidth: 3,
+                borderColor: "#FFFFFF"
+              }
+            }
+          },
+          chartData: JSON.parse(JSON.stringify({
+            series: [{ data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}] }]
+          }))
+        },
+        {
+          title: "钢种统计",
+          opts: {
+            color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+            padding: [5,5,5,5],
+            enableScroll: false,
+            extra: {
+              pie: {
+                activeOpacity: 0.5,
+                activeRadius: 10,
+                offsetAngle: 0,
+                labelWidth: 15,
+                border: false,
+                borderWidth: 3,
+                borderColor: "#FFFFFF"
+              }
+            }
+          },
+          chartData: JSON.parse(JSON.stringify({
+            series: [{ data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}] }]
+          }))
+        },
+        {
+          title: "班组统计",
+          opts: {
+            color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+            padding: [5,5,5,5],
+            enableScroll: false,
+            extra: {
+              pie: {
+                activeOpacity: 0.5,
+                activeRadius: 10,
+                offsetAngle: 0,
+                labelWidth: 15,
+                border: false,
+                borderWidth: 3,
+                borderColor: "#FFFFFF"
+              }
+            }
+          },
+          chartData: JSON.parse(JSON.stringify({
+            series: [{ data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}] }]
+          }))
+        }
+      ],
+      // 轮播图当前索引
+      currentSwiperIndex: 0,
+      // 服务器加载的图表基础数据
+      chartData: {},
+      // 汇总指标卡数据
+      summaryData: [
+        { label: "生产钢卷数", value: 186 },
+        { label: "平均宽度", value: 1054, unit: "mm" },
+        { label: "平均厚度", value: 0.93, unit: "mm" },
+        { label: "原料总量", value: 3396.47, unit: "t" },
+        { label: "成品总量", value: 4360.18, unit: "t" },
+        { label: "成材率", value: 95.99, unit: "%" } // 原代码unit写t，推测是笔误，修正为%
+      ]
+    };
+  },
+  // 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. 生命周期钩子（替代 Vue3 的 onMounted）
+  mounted() {
+    this.getServerData(); // 页面挂载后加载图表数据
+  },
+  // 7. 方法定义（所有交互逻辑与数据处理）
+  methods: {
+    // 切换视图（日/月/年）
+    handleTabChange(tab) {
+      this.activeTab = tab;
+      // 重置日期：日视图首尾一致，月/年视图首尾默认当前
+      const defaultDate = getDefaultDate();
+      this.startDate = defaultDate;
+      this.endDate = tab === "day" ? defaultDate : getDefaultDate(tab);
+    },
+    // 日模式：日期选择器变更
+    handleDateChange(e) {
+      this.startDate = e.detail.value;
+      this.endDate = e.detail.value; // 日视图首尾日期同步
+    },
+    // 月模式：开始月份变更
+    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;
+      }
+    },
+    // 月模式：结束月份变更
+    handleEndMonthChange(e) {
+      this.endDate = e.detail.value;
+    },
+    // 年模式：开始年份变更
+    handleStartYearChange(e) {
+      this.startDate = e.detail.value;
+    },
+    // 年模式：结束年份变更
+    handleEndYearChange(e) {
+      this.endDate = e.detail.value;
+    },
+    // 轮播图切换回调（更新当前索引）
+    onSwiperChange(e) {
+      this.currentSwiperIndex = e.detail.current;
+    },
+    // 模拟从服务器加载图表数据
+    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] }
+          ]
+        };
+        // 深拷贝避免引用问题，确保Vue2响应式
+        this.chartData = JSON.parse(JSON.stringify(serverRes));
+        
+        // 更新产量图表配置的前两个图表数据（第三个固定）
+        this.chanLiangChartConfig.forEach((item, index) => {
+          if (index < 2) { // 仅前两个图表用服务器数据
+            item.chartData = JSON.parse(JSON.stringify(this.chartData));
+          }
+        });
+      }, 500);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  /* padding: 20rpx; */
+}
+
+.tab-container {
+  display: flex;
+  box-sizing: border-box;
+  padding: 20rpx 0;
+  justify-content: space-evenly;
+  background-color: #2bf; /* 修正原代码笔误（2bf → #2bf） */
+  margin-bottom: 30rpx;
+  overflow: hidden;
+}
+
+.tab-item {
+  text-align: center;
+  padding: 20rpx;
+  color: white;
+  transition: all 0.3s;
+  border: 2rpx solid transparent;
+}
+
+.tab-item.active {
+  color: white;
+  border-color: white;
+  border-radius: 20rpx;
+}
+
+.date-picker {
+  padding: 15rpx;
+  background-color: #fff;
+  border-radius: 10rpx;
+}
+
+.date-range {
+  display: flex;
+  gap: 20rpx;
+}
+
+.date-item {
+  flex: 1;
+}
+
+.picker-text {
+  padding: 15rpx;
+  background-color: #f8f8f8;
+  border-radius: 8rpx;
+  color: #666;
+}
+
+/* 图表轮播容器样式 */
+.chart-container {
+  margin: 30rpx 0;
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
+}
+
+.chart-swiper {
+  height: 500rpx;
+  box-sizing: border-box;
+}
+
+/* 图表项标题样式（原代码未生效，保留备用） */
+.chart-item-title {
+  font-weight: 900;
+}
+</style>