添加掌上工厂应用

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-shutdown-statistic/klp-shutdown-statistic.vue
+++ b/apps/hand-factory/components/klp-shutdown-statistic/klp-shutdown-statistic.vue
@@ -0,0 +1,435 @@
+<template>
+  <view>
+    <!-- 日月年汇总单选 -->
+    <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 v-if="activeTab != 'day'">
+      <qiun-data-charts type="mix" :chartData="chartData" :opts="opts" />
+    </view>
+
+    <view>
+      <klp-collapse-panel :title="'汇总(' + displayDateRange + ')'">
+        <k-metric-card
+          :items="summaryData"
+        ></k-metric-card>
+      </klp-collapse-panel>
+    </view>
+
+    <view v-if="activeTab == 'day'">
+      <klp-collapse-panel title="详细信息">
+        <k-table :columns="columns" :data="tableData"></k-table>
+      </klp-collapse-panel>
+    </view>
+
+    <view style="margin-top: 30rpx;">
+      <qiun-data-charts type="pie" :chartData="pieChartData" :opts="pieOpts" />
+    </view>
+  </view>
+</template>
+
+<script>
+// 2. 独立工具函数（避免data初始化时调用this.methods的问题）
+/**
+ * 获取默认日期（根据视图类型）
+ * @param {string} type - 视图类型：day/month/year
+ * @returns {string} 格式化后的日期
+ */
+function getDefaultDate(type = "day") {
+  const date = new Date();
+  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}`;
+  }
+}
+
+/**
+ * 格式化日期
+ * @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" }
+      ],
+      // 混合图表数据
+      chartData: {
+        categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
+        series: [
+          {
+            name: "曲面",
+            type: "area",
+            style: "curve",
+            data: [70, 50, 85, 130, 64, 88]
+          },
+          {
+            name: "柱1",
+            index: 1,
+            type: "column",
+            data: [40, { value: 30, color: "#f04864" }, 55, 110, 24, 58]
+          },
+          {
+            name: "柱2",
+            index: 1,
+            type: "column",
+            data: [50, 20, 75, 60, 34, 38]
+          },
+          {
+            name: "曲线",
+            type: "line",
+            style: "curve",
+            color: "#1890ff",
+            disableLegend: true,
+            data: [70, 50, 85, 130, 64, 88]
+          },
+          {
+            name: "折线",
+            type: "line",
+            color: "#2fc25b",
+            data: [120, 140, 105, 170, 95, 160]
+          },
+          {
+            name: "点",
+            index: 2,
+            type: "point",
+            color: "#f04864",
+            data: [100, 80, 125, 150, 112, 132]
+          }
+        ]
+      },
+      // 混合图表配置
+      opts: {
+        color: [
+          "#1890FF",
+          "#91CB74",
+          "#FAC858",
+          "#EE6666",
+          "#73C0DE",
+          "#3CA272",
+          "#FC8452",
+          "#9A60B4",
+          "#ea7ccc"
+        ],
+        padding: [15, 15, 0, 15],
+        enableScroll: false,
+        legend: {},
+        xAxis: {
+          disableGrid: true,
+          title: "单位：年"
+        },
+        yAxis: {
+          disabled: false,
+          disableGrid: false,
+          splitNumber: 5,
+          gridType: "dash",
+          dashLength: 4,
+          gridColor: "#CCCCCC",
+          padding: 10,
+          showTitle: true,
+          data: [
+            { position: "left", title: "折线" },
+            { position: "right", min: 0, max: 200, title: "柱状图", textAlign: "left" },
+            { position: "right", min: 0, max: 200, title: "点", textAlign: "left" }
+          ]
+        },
+        extra: { mix: { column: { width: 20 } } }
+      },
+      // 汇总数据（供 k-metric-card 使用）
+      summaryData: [
+        { label: "停机时间", value: 730, unit: "min" },
+        { label: "停机次数", value: 9 },
+        { label: "作业率", value: 49.31, unit: "%" }
+      ],
+      // 表格列配置（日视图详细信息）
+      columns: [
+        { title: "起止时间", key: "time" },
+        { title: "持续时间", key: "duration" },
+        { title: "备注", key: "remark" },
+        { title: "机组", key: "machine" }
+      ],
+      // 表格数据（日视图详细信息）
+      tableData: [
+        {
+          time: "2022-01-01 08:00:00",
+          duration: "30min",
+          remark: "设备维护",
+          machine: "1号机"
+        },
+        {
+          time: "2022-01-01 10:00:00",
+          duration: "20min",
+          remark: "设备故障",
+          machine: "2号机"
+        },
+        {
+          time: "2022-01-01 12:00:00",
+          duration: "40min",
+          remark: "设备维护",
+          machine: "3号机"
+        }
+      ],
+      // 饼图数据
+      pieChartData: {
+        series: [
+          {
+            data: [
+              { name: "一班", value: 50 },
+              { name: "二班", value: 30 },
+              { name: "三班", value: 20 },
+              { name: "四班", value: 18, labelText: "四班:18人" },
+              { name: "五班", value: 8 }
+            ]
+          }
+        ]
+      },
+      // 饼图配置
+      pieOpts: {
+        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: true,
+            borderWidth: 3,
+            borderColor: "#FFFFFF"
+          }
+        }
+      }
+    };
+  },
+  // 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. 方法定义（所有交互逻辑放这里）
+  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;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.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;
+}
+</style>