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

<!--
 * @Author: zhp
 * @Date: 2024-05-21 10:13:36
 * @LastEditTime: 2024-05-24 15:03:16
 * @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: 4,
      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>