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

<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 :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
            :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
        </db-container>
        <left-container title="工单监控" icon="order">
          <order :prodOrder="prodOrder" />
        </left-container>
        <!-- <db-container title="" icon="store"> -->
        <!-- <store :stock="stock" /> -->
        <!-- </db-container> -->
      </section>
      <!-- <section class="bottom flex"> -->
      <!-- <db-container title="" icon="energy"> -->
      <!-- <energy :legend="energyLegend" :energyCockpits="energyCockpits" /> -->
      <!-- </db-container> -->
      <!-- </section> -->
    </div>
    <div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
  </div>
</template>
<script>
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue";
import { deepClone } from "@/utils";
// 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,
    LeftContainer: leftContainer,
    ProdMonitor,
    // Store,
    // Energy,
    Order,
  },
  data() {
    return {
      companyId: 4,
      companyName: "成都中建材光电材料有限公司",
      period: 1,
      show: false,
      than: '同比',
      data: {},
      // 接口获取的数据
      prodOutPut: [], //生产
      prodFto: [], //生产
      stock: {}, //仓库
      factoryData: {
        preDataDetail: [],
        currentDataDetail: {},
        targetDataDetail: [],
      },
      energyCockpits: [], //能源
      prodOrder: [], //订单
      energyLegend: [
        { label: "电", color: "#FFD160" },
        { label: "水", color: "#2760FF" },
        { label: "气", color: "#12FFF5" },
      ],
    };
  },
  mounted() {
    this.getMes();
  },
  methods: {
    updateCompany(obj) {
      this.companyId = obj.companyId;
      this.companyName = obj.companyName;
      this.getMes();
    },
    updateThan(val) {
      console.log(val);
      this.than = val;
      // this.getMes();
    },
    updatePeriod(val) {
      this.period = val;
      this.getMes();
    },
    getMes() {
      cockpitDataMonitor({
        factorys: [this.companyId],
        date: this.period,
        mode: this.than === '同比' ? 0 : 1
      }).then((res) => {
        console.log(res);
        this.prodOutPut = res.data.prodOutputMonitorShDO || [];
        this.prodFto = res.data.prodOutputFtoDO || [];
        this.prodOrder = res.data.prodWorkOrderDO || [];
        let prodOutputFtoListRes = res.data.prodOutputFtoDO || [];
        let preFtoData = res.data.previousProdOutputFtoDO || [];
        let preData = res.data.previousProdOutputMonitorShDO || [];
        let factoryListResponse = res.data.prodOutputMonitorShDO || [];
        let targetListResponse = res.data.prodTargetMonitorDO || [];
        let preDataDetail = []
        let currentDataDetail = []
        let targetDataDetail = []
        if (prodOutputFtoListRes) {
          for (const factory of prodOutputFtoListRes) {
            console.log(factory);
            currentDataDetail[0] = factory.chipInput
          }
        }
        if (preFtoData) {
          for (const factory of preFtoData) {
            console.log(factory);
            // const fId = this.getPreFactoryId(factory);
            // const preFId = getPreFactoryId(factory);
            // if (fId) {
            preDataDetail[0] = factory.previousYearChipInput
            // }
            // if (preFId) {
            // ftoInvest.previous[fId] = factory.previousYearChipInput;
            // }
          }
        }
        if (preData && preData[0] != null) {
          for (const factory of preData) {
            if (factory.previousGlassType === 0) {
              preDataDetail[1] = factory.previousYearOutputNumber
            } else if (factory.previousGlassType === 1) {
              preDataDetail[2] = factory.previousYearOutputNumber
            } else if (factory.previousYearOutputNumber === 2) {
              currentDataDetail[3] = factory.outputNumber
            }
          }
        }
        if (targetListResponse && targetListResponse[0] != null) {
          for (const factory of targetListResponse) {
            targetDataDetail[0] = factory.ftoInput
            // if (factory.previousGlassType === 0) {
            targetDataDetail[1] = factory.chipYield
            // } else if (factory.previousGlassType === 1) {
            targetDataDetail[2] = factory.componentYield
            targetDataDetail[3] = factory.bipvProductoutput
            // }
          }
        }
        // console.log('ftoInvest',ftoInvest)
        if (factoryListResponse && factoryListResponse[0] != null) {
          for (const factory of factoryListResponse) {
            // targetDataDetail[0] = factory.ftoInput
            if (factory.glassType === 0) {
              currentDataDetail[1] = factory.outputNumber
            } else if (factory.glassType === 1) {
              currentDataDetail[2] = factory.outputNumber
            } else if (factory.glassType === 2) {
              currentDataDetail[3] = factory.outputNumber
            }
          }
        }
        this.factoryData.preDataDetail = preDataDetail
        this.factoryData.currentDataDetail = currentDataDetail
        this.factoryData.targetDataDetail = targetDataDetail
      });
    },
  },
};
</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>