各工厂数据

src/views/copilot/factoryData/index.vue

@@ -0,0 +1,173 @@
+<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";
+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,
+      //   },
+      // ];
+    },
+  },
+  methods: {
+    updateCompany(obj) {
+      this.companyId = obj.companyId;
+      this.companyName = obj.companyName;
+    },
+  },
+};
+</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>