crm_pc/src/views/productManagement/productionCompletedSummary/index.vue

<template>
  <div class="app-container">
    <!-- 顶部标题栏 -->
    <div class="page-header">
      <div class="page-title">生产汇总</div>
      <div class="page-time">时间：{{ currentTime }}</div>
    </div>

    <!-- 已安装统计表格 -->
    <production-statistics :update-time.sync="updateTime" />
  </div>
</template>

<script>
import productionStatistics from "./components/productionStatistics.vue";
import { GetDataByName, GetDataByNames } from "@/api/common";

export default {
  name: "ProductionSummary",
  components: {
    productionStatistics,
  },
  data() {
    return {
      currentTime: "",
      updateTime: "",
      dialogVisible: false,
      tableData: [],
      unassignedOrders: [],
      chartData: {
        labels: [
          "智能膜环",
          "智能喷淋",
          "精准阉割",
          "奶牛称重",
          "车载控制器",
          "大屏",
        ],
        datasets: [
          {
            label: "计划量",
            data: [900, 850, 900, 700, 500, 30],
            backgroundColor: "#409EFF",
            order: 2,
          },
          {
            label: "完成量",
            data: [800, 820, 850, 680, 200, 20],
            backgroundColor: "#FF9F43",
            order: 2,
          },
          {
            label: "完成率",
            data: [88.9, 96.5, 94.4, 97.1, 40.0, 66.7],
            type: "line",
            borderColor: "#67C23A",
            borderWidth: 2,
            fill: false,
            yAxisID: "percentage",
            order: 1,
          },
        ],
      },
    };
  },
  created() {
    this.updateCurrentTime();
    setInterval(this.updateCurrentTime, 1000);
    this.getUpdateTime();
  },
  methods: {
    updateCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, "0");
      const day = now.getDate().toString().padStart(2, "0");
      const hours = now.getHours().toString().padStart(2, "0");
      const minutes = now.getMinutes().toString().padStart(2, "0");
      const seconds = now.getSeconds().toString().padStart(2, "0");
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    async getUpdateTime() {
      try {
        const now = new Date();
        const month = (now.getMonth() + 1).toString().padStart(2, "0");
        const day = now.getDate().toString().padStart(2, "0");
        const hours = now.getHours().toString().padStart(2, "0");
        const minutes = now.getMinutes().toString().padStart(2, "0");
        const seconds = now.getSeconds().toString().padStart(2, "0");

        this.updateTime = `${month}/${day} ${hours}:${minutes}:${seconds}更新`;
      } catch (error) {
        console.error("获取更新时间失败:", error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  border-radius: 8px;
  transition: all 0.3s ease;

  .page-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2d3d;
    position: relative;
    padding-left: 16px;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 22px;
      background: #409eff;
      border-radius: 4px;
    }
  }

  .page-time {
    color: #606266;
    font-size: 14px;
  }
}
</style>