产量和效率

src/views/copilot/factoryData/jmsIndex.vue

@@ -0,0 +1,143 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-21 10:13:30
+ * @LastEditTime: 2024-05-24 15:03:26
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div class="factory-layout">
+    <FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
+      @update:than="updateThan" @update:period="updatePeriod" />
+    <div class="factory-section">
+      <section class="top flex">
+        <db-container title="生产监控" icon="prod">
+          <prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
+        </db-container>
+        <db-container title="订单监控" icon="order">
+          <order :prodOrder="prodOrder" />
+        </db-container>
+        <!-- <db-container title="" icon="store"> -->
+        <!-- <store :stock="stock" /> -->
+        <!-- </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() {
+    return {
+      companyId: 3,
+      companyName: "佳木斯中建材光电材料有限公司",
+      period: 1,
+      than: '同比',
+      show: true,
+      // 接口获取的数据
+      prodOutPut: [], //生产
+      prodFto: [], //生产
+      stock: {}, //仓库
+      energyCockpits: [], //能源
+      prodOrder: [], //订单
+      energyLegend: [
+        { label: "电", color: "#FFD160" },
+        { label: "水", color: "#2760FF" },
+        { label: "气", color: "#12FFF5" },
+      ],
+    };
+  },
+  mounted() {
+    this.getMes();
+  },
+  methods: {
+    updateThan(val) {
+      console.log(val);
+      this.than = val;
+      // this.getMes();
+    },
+    updateCompany(obj) {
+      this.companyId = obj.companyId;
+      this.companyName = obj.companyName;
+      this.getMes();
+    },
+    updatePeriod(val) {
+      this.period = val;
+      this.getMes();
+    },
+    getMes() {
+      cockpitDataMonitor({
+        factorys: [this.companyId],
+        date: this.period,
+      }).then((res) => {
+        console.log(res);
+        this.prodOutPut = res.data.prodOutputMonitorShDO || [];
+        this.prodFto = res.data.prodOutputFtoDO || [];
+        this.stock = res.data.stockDO || {};
+        this.energyCockpits = res.data.energyCockpitsDO || [];
+        this.prodOrder = res.data.prodOrderMonitorDO || [];
+      });
+    },
+  },
+};
+</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>