yudao-init/src/views/copilot/factoryData/index.vue

<template>
  <div class="factory-layout">
    <FactoryDataHeader
      :companyName="companyName"
      :companyId="companyId"
      :period="period"
      @updateCompany="updateCompany"
      @update:period="period = $event"
    />
    <div class="factory-section">
      <section class="top flex">
        <db-container title="生产监控" icon="prod">
          <prod-monitor />
        </db-container>
        <db-container title="仓库监控.当前" icon="store">
          <store :series="series" :xAxis="xAxis" />
        </db-container>
      </section>
      <section class="bottom flex">
        <db-container title="能源监控" icon="energy">
          <energy
            :legend="energyLegend"
            :series="energySeries"
            :xAxis="energyxAxis"
          />
        </db-container>
        <db-container title="订单监控" icon="order">
          <order />
        </db-container>
      </section>
    </div>
    <div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
  </div>
</template>
<script>
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/Container.vue";
import ProdMonitor from "./components/ProdMonitor.vue";
import Store from "./components/Store.vue";
import Energy from "./components/Energy.vue";
import Order from "./components/Order.vue";
import { cockpitDataMonitor } from "@/api/produceData";
export default {
  name: "FactoryData",
  components: {
    FactoryDataHeader,
    DbContainer: Container,
    ProdMonitor,
    Store,
    Energy,
    Order,
  },
  data() {
    const year = new Date().getFullYear();
    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
    return {
      companyId: "1",
      companyName: "瑞昌中建材光电材料有限公司",
      period: "日",

      energyLegend: [
        { label: "电", color: "#FFD160" },
        { label: "水", color: "#2760FF" },
        { label: "气", color: "#12FFF5" },
      ],
      energyxAxis: [3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7],

      legend: [
        { label: `${year - 1}年`, color: "#12f7f1" },
        // { label: `${year}年`, color: "#58adfa" },
      ],
      xAxis: cities,
    };
  },
  computed: {
    energySeries() {
      return [
        {
          name: "电",
          data: Array.from({ length: 7 }, () =>
            Math.floor(Math.random() * 1000)
          ),
        },
        {
          name: "水",
          data: Array.from({ length: 7 }, () =>
            Math.floor(Math.random() * 1000)
          ),
        },
        {
          name: "气",
          data: Array.from({ length: 7 }, () =>
            Math.floor(Math.random() * 1000)
          ),
        },
      ];
    },
    series() {
      // const ftoInvest = this.$store.getters.home.ftoInvest;
      // if (!ftoInvest || !ftoInvest.current || !ftoInvest.previous) {
      return [
        {
          name: "2023年",
          data: Array.from({ length: 7 }, () =>
            Math.floor(Math.random() * 1000)
          ),
        },
      ];
      // }

      // return [
      //   {
      //     name: `${new Date().getFullYear() - 1}年`,
      //     data: ftoInvest.previous,
      //   },
      //   {
      //     name: `${new Date().getFullYear()}年`,
      //     data: ftoInvest.current,
      //   },
      // ];
    },
  },
  mounted() {
    this.getMes1();
  },
  methods: {
    updateCompany(obj) {
      this.companyId = obj.companyId;
      this.companyName = obj.companyName;
    },
    getMes1() {
      // cockpitDataMonitor({
      //   factorys: ["1"],
      //   date: 4,
      // }).then((res) => {
      //   console.log(res);
      // });
      cockpitDataMonitor().then((res) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.factory-layout {
  padding: 16px;
  background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
    no-repeat;
  position: absolute;
  height: calc(100% + 38px);
  left: -16px;
  top: -8px;
  width: calc(100% + 30px);
  z-index: 1001;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  .factory-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    .flex {
      display: flex;
      gap: 16px;
      flex: 1;
    }
    .top > div,
    .bottom > div {
      height: 100%;
    }
  }
  .factory-footer {
    /** position: absolute;
  bottom: 10px; **/
    height: 10px;
    width: 100%;
    color: rgb(80, 80, 80);
    user-select: none;
    font-size: 14px;
    letter-spacing: 1px;
    display: grid;
    place-content: center;
  }
}
</style>