1

2024-05-20 14:54:18 +08:00
parent 18e50722b0
commit aec811827d
16 changed files with 1826 additions and 910 deletions
--- a/src/views/copilot/factoryData/components/Energy.vue
+++ b/src/views/copilot/factoryData/components/Energy.vue
@@ -1,36 +1,37 @@
 <template>
-  <div class="left-chart-base">
-    <div class="legend">
-      <span
-        v-for="item in legend"
-        :key="item.label"
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }"
-        >{{ item.label }}</span
-      >
+  <div>
+    <div class="left-chart-base">
+      <NotMsg v-show="notMsg" />
+      <div class="legend" v-show="!notMsg">
+        <span
+          v-for="item in legend"
+          :key="item.label"
+          class="legend-item"
+          :style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }"
+          >{{ item.label }}</span
+        >
+      </div>
+      <div
+        id="factoryEnergyChart"
+        style="width: 100%; height: 100%"
+        v-show="!notMsg"
+      ></div>
    </div>
-    <div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
  </div>
 </template>
 <script>
 import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
+import NotMsg from "./../../components/NotMsg";
 export default {
  name: "Energy",
+  components: { NotMsg },
  props: {
-    vHeight: {
-      type: Number,
-      default: 34,
-    },
    legend: {
      type: Array,
      required: true,
    },
-    xAxis: {
-      type: Array,
-      required: true,
-    },
-    series: {
+    energyCockpits: {
      type: Array,
      required: true,
    },
@@ -39,6 +40,7 @@ export default {
    return {
      isFullscreen: false,
      actualOptions: null,
+      notMsg: false,
      chart: "",
      options: {
        color: ["#FFD160", "#2760FF", "#12FFF5"],
@@ -65,7 +67,7 @@ export default {
            color: "rgba(255, 255, 255, 0.7)",
            fontSize: 12,
          },
-          data: this.xAxis,
+          data: [],
        },
        yAxis: [
          {
@@ -190,6 +192,11 @@ export default {
      },
    };
  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
  watch: {
    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
    // isFullscreen(val) {
@@ -216,6 +223,12 @@ export default {
    //   this.actualOptions = actualOptions;
    //   this.initOptions(actualOptions);
    // },
+    energyCockpits() {
+      this.initChart();
+    },
+    isOpen(val) {
+      this.canvasReset();
+    },
  },
  mounted() {
    // if (screenfull.isEnabled) {
@@ -241,17 +254,63 @@ export default {
      }, 500)();
    },
    initChart() {
+      let energyxAxis = [];
+      let n = 0;
+      let seriesArr = [
+        {
+          name: "水",
+          energyType: 1,
+          data: [],
+        },
+        {
+          name: "电",
+          energyType: 2,
+          data: [],
+        },
+        {
+          name: "气",
+          energyType: 3,
+          data: [],
+        },
+      ];
+      if (this.energyCockpits.length > 0) {
+        this.notMsg = false;
+        let dataArr = this.energyCockpits.map((item) => {
+          return item.groupName;
+        });
+        energyxAxis = Array.from(new Set(dataArr));
+        n = energyxAxis.length;
+        seriesArr[0].data = Array.from({ length: n }, () => 0);
+        seriesArr[1].data = Array.from({ length: n }, () => 0);
+        seriesArr[2].data = Array.from({ length: n }, () => 0);
+        for (let i = 0; i < this.energyCockpits.length; i++) {
+          for (let j = 0; j < energyxAxis.length; j++) {
+            if (this.energyCockpits[i].groupName === energyxAxis[j]) {
+              if (this.energyCockpits[i].energyType === 1) {
+                seriesArr[0].data[j] = this.energyCockpits[i].totalEnergyValue;
+              } else if (this.energyCockpits[i].energyType === 2) {
+                seriesArr[1].data[j] = this.energyCockpits[i].totalEnergyValue;
+              } else if (this.energyCockpits[i].energyType === 3) {
+                seriesArr[2].data[j] = this.energyCockpits[i].totalEnergyValue;
+              }
+            }
+          }
+        }
+      } else {
+        this.notMsg = true;
+      }
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
      const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.series[0].data = this.series[0].data;
-      actualOptions.series[0].name = this.series[0].name;
-      actualOptions.series[1].data = this.series[1].data;
-      actualOptions.series[1].name = this.series[1].name;
-      actualOptions.series[2].data = this.series[2].data;
-      actualOptions.series[2].name = this.series[2].name;
+      actualOptions.xAxis.data = energyxAxis;
+      actualOptions.series[0].data = seriesArr[0].data;
+      actualOptions.series[0].name = seriesArr[0].name;
+      actualOptions.series[1].data = seriesArr[1].data;
+      actualOptions.series[1].name = seriesArr[1].name;
+      actualOptions.series[2].data = seriesArr[2].data;
+      actualOptions.series[2].name = seriesArr[2].name;
      this.actualOptions = actualOptions;
      this.chart.setOption(actualOptions);
    },
--- a/src/views/copilot/factoryData/components/Order.vue
+++ b/src/views/copilot/factoryData/components/Order.vue
@@ -1,8 +1,9 @@
 <template>
  <dv-scroll-board
-    v-if="aa"
+    v-if="showTable"
    :config="config"
    style="width: 100%; height: 100%"
+    ref="orderScrollBoard"
  />
 </template>
 <script>
@@ -11,7 +12,7 @@ export default {
  name: "Order",
  data() {
    return {
-      aa: true,
+      showTable: true,
      config: {
        header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
        headerBGC: "rgba(0, 106, 205, 0.22)",
@@ -26,51 +27,87 @@ export default {
      },
    };
  },
+  props: {
+    prodOrder: {
+      type: Array,
+      default: [],
+    },
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    isOpen(val) {
+      this.tableReset();
+    },
+    prodOrder() {
+      this.getTableList();
+    },
+  },
  mounted() {
-    this.getTableList();
-    this.tableReset();
    window.addEventListener("resize", this.tableReset);
  },
  methods: {
    tableReset() {
-      this.aa = false;
+      this.showTable = false;
      debounce(() => {
        this.initTable();
      }, 500)();
    },
    initTable() {
-      this.aa = true;
+      this.showTable = true;
    },
    getTableList() {
-      let _this = this;
-      setTimeout(
-        (function name() {
-          _this.config.data = [
-            ["1", "行1列1", "行1列2", "行1列3", "50%"],
-            ["2", "行2列1", "行2列2", "行2列3", "50%"],
-            ["3", "行3列1", "行3列2", "行3列3", "50%"],
-            ["4", "行4列1", "行4列2", "行4列3", "50%"],
-            ["5", "行5列1", "行5列2", "行5列3", "50%"],
-            ["6", "行6列1", "行6列2", "行6列3", "50%"],
-            ["7", "行7列1", "行7列2", "行7列3", "50%"],
-            ["8", "行8列1", "行8列2", "行8列3", "50%"],
-            ["9", "行9列1", "行9列2", "行9列3", "50%"],
-            ["10", "行10列1", "行10列2", "行10列3", "50%"],
-            ["11", "行11列1", "行11列2", "行11列3", "50%"],
-            ["12", "行12列1", "行12列2", "行12列3", "50%"],
-            ["13", "行13列1", "行13列2", "行13列3", "50%"],
-            ["14", "行14列1", "行14列2", "行14列3", "50%"],
-            ["15", "行15列1", "行15列2", "行15列3", "50%"],
-            ["16", "行16列1", "行16列2", "行16列3", "50%"],
-            ["17", "行17列1", "行17列2", "行17列3", "50%"],
-            ["18", "行18列1", "行18列2", "行18列3", "50%"],
-            ["19", "行19列1", "行19列2", "行19列3", "50%"],
-            ["20", "行20列1", "行20列2", "行20列3", "50%"],
-          ];
-        })(),
-        2000
-      );
-      this.initTable();
+      let outArr = [];
+      if (this.prodOrder.length > 0) {
+        for (let i = 0; i < this.prodOrder.length; i++) {
+          let arr = [];
+          arr.push(i + 1);
+          arr.push(
+            `<span title=${this.prodOrder[i].customerName || ""}>${
+              this.prodOrder[i].customerName || ""
+            }</span>`
+          );
+          arr.push(
+            `<span title=${this.prodOrder[i].productName || ""}>${
+              this.prodOrder[i].productName || ""
+            }</span>`
+          );
+          arr.push(
+            `<span title=${this.prodOrder[i].plannedProductionQuantity || ""}>${
+              this.prodOrder[i].plannedProductionQuantity || ""
+            }</span>`
+          );
+          arr.push(`<span style="display:inline-block;width:45px;">${
+            this.prodOrder[i].productionProgress
+              ? this.prodOrder[i].productionProgress.toFixed(0) + "%"
+              : "0%"
+          }</span>
+            <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
+            <svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
+              <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
+              <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${
+                this.prodOrder[i].productionProgress
+                  ? this.prodOrder[i].productionProgress.toFixed(0) *
+                      37.68 *
+                      0.01 +
+                    "," +
+                    (1 -
+                      this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
+                      37.68
+                  : 0 + "," + 37.68
+              }"/>
+            </svg>
+          </div>`);
+          outArr.push(arr);
+        }
+        this.config.data = outArr;
+      } else {
+        this.config.data = [];
+      }
+      this.$refs["orderScrollBoard"].updateRows(outArr);
    },
  },
 };
--- a/src/views/copilot/factoryData/components/ProdMonitor.vue
+++ b/src/views/copilot/factoryData/components/ProdMonitor.vue
@@ -14,7 +14,7 @@
      </div>
      <div class="right-box">
        <span class="type">投入数量</span>
-        <span class="num">8391222</span>
+        <span class="num">{{ prodFto[0] ? prodFto[0].chipInput : 0 }}</span>
      </div>
    </div>
    <div class="std-box">
@@ -33,7 +33,9 @@
          </div>
          <div>
            <span class="type">良品数量</span>
-            <span class="type-name">740</span>
+            <span class="type-name">{{
+              msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
+            }}</span>
          </div>
        </div>
      </div>
@@ -41,11 +43,15 @@
        <div class="separate">
          <div>
            <span class="type">生产数量</span>
-            <span class="num">783</span>
+            <span class="num">{{
+              msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
+            }}</span>
          </div>
          <div>
            <span class="type1">良品率</span>
-            <span class="num">96%</span>
+            <span class="num"
+              >{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span
+            >
          </div>
        </div>
      </div>
@@ -66,7 +72,9 @@
          </div>
          <div>
            <span class="type">良品数量</span>
-            <span class="type-name">740</span>
+            <span class="type-name">{{
+              msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
+            }}</span>
          </div>
        </div>
      </div>
@@ -74,11 +82,15 @@
        <div class="separate">
          <div>
            <span class="type">生产数量</span>
-            <span class="num">783</span>
+            <span class="num">{{
+              msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
+            }}</span>
          </div>
          <div>
            <span class="type1">良品率</span>
-            <span class="num">96%</span>
+            <span class="num"
+              >{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span
+            >
          </div>
        </div>
      </div>
@@ -99,7 +111,9 @@
          </div>
          <div>
            <span class="type">良品数量</span>
-            <span class="type-name">740</span>
+            <span class="type-name">{{
+              msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
+            }}</span>
          </div>
        </div>
      </div>
@@ -107,11 +121,15 @@
        <div class="separate">
          <div>
            <span class="type">生产数量</span>
-            <span class="num">783</span>
+            <span class="num">{{
+              msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
+            }}</span>
          </div>
          <div>
            <span class="type1">良品率</span>
-            <span class="num">96%</span>
+            <span class="num"
+              >{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span
+            >
          </div>
        </div>
      </div>
@@ -121,6 +139,51 @@
 <script>
 export default {
  name: "ProdMonitor",
+  data() {
+    return {
+      msgObj: {
+        stand: {},
+        chip: {},
+        bipv: {},
+      },
+    };
+  },
+  props: {
+    prodOutPut: {
+      type: Array,
+      default: [],
+    },
+    prodFto: {
+      type: Array,
+      default: [],
+    },
+  },
+  watch: {
+    prodOutPut() {
+      this.makeData();
+    },
+  },
+  mounted() {
+    this.makeData();
+  },
+  methods: {
+    makeData() {
+      this.msgObj.chip = {};
+      this.msgObj.stand = {};
+      this.msgObj.bipv = {};
+      if (this.prodOutPut.length > 0) {
+        this.prodOutPut.map((item) => {
+          if (item.glassType === 0) {
+            this.msgObj.chip = item;
+          } else if (item.glassType === 1) {
+            this.msgObj.stand = item;
+          } else if (item.glassType === 2) {
+            this.msgObj.bipv = item;
+          }
+        });
+      }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
--- a/src/views/copilot/factoryData/components/Store.vue
+++ b/src/views/copilot/factoryData/components/Store.vue
@@ -1,36 +1,43 @@
 <template>
-  <div id="factoryStoreChart" style="width: 100%; height: 100%"></div>
+  <div>
+    <NotMsg v-show="notMsg" />
+    <div
+      id="factoryStoreChart"
+      style="width: 100%; height: 100%"
+      v-show="!notMsg"
+    ></div>
+  </div>
 </template>
 <script>
 import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
+import NotMsg from "./../../components/NotMsg";
 export default {
  name: "Store",
+  components: { NotMsg },
  props: {
-    vHeight: {
-      type: Number,
-      default: 34,
-    },
-    xAxis: {
-      type: Array,
+    stock: {
+      type: Object,
      required: true,
    },
-    series: {
-      type: Array,
-      required: true,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
    },
  },
  data() {
    return {
      isFullscreen: false,
      actualOptions: null,
+      notMsg: false,
      chart: "",
      options: {
        grid: {
          left: "3%",
          right: "1%",
          bottom: "0",
-          top: "10%",
+          top: "15%",
          containLabel: true,
        },
        tooltip: {},
@@ -47,7 +54,7 @@ export default {
            color: "rgba(255, 255, 255, 0.7)",
            fontSize: 12,
          },
-          data: this.xAxis,
+          data: [],
        },
        yAxis: {
          name: "单位/片",
@@ -116,18 +123,11 @@ export default {
    };
  },
  watch: {
-    series(val) {
-      if (!val) {
-        this.initOptions(this.options);
-        return;
-      }
-      const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val[1].data;
-      actualOptions.series[1].name = val[1].name;
-      this.actualOptions = actualOptions;
-      this.initOptions(actualOptions);
+    stock(val) {
+      this.initChart();
+    },
+    isOpen(val) {
+      this.canvasReset();
    },
  },
  mounted() {
@@ -154,13 +154,23 @@ export default {
      }, 500)();
    },
    initChart() {
+      let xAxis = Object.keys(this.stock) || [];
+      let data = [];
+      if (xAxis.length > 0) {
+        this.notMsg = false;
+        data = xAxis.map((item) => {
+          return this.stock[item].total;
+        });
+      } else {
+        this.notMsg = true;
+      }
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(document.getElementById("factoryStoreChart"));
      const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.series[0].data = this.series[0].data;
-      actualOptions.series[0].name = this.series[0].name;
+      actualOptions.xAxis.data = xAxis;
+      actualOptions.series[0].data = data;
      this.actualOptions = actualOptions;
      this.chart.setOption(actualOptions);
    },
--- a/src/views/copilot/factoryData/index.vue
+++ b/src/views/copilot/factoryData/index.vue
@@ -5,27 +5,23 @@
      :companyId="companyId"
      :period="period"
      @updateCompany="updateCompany"
-      @update:period="period = $event"
+      @update:period="updatePeriod"
    />
    <div class="factory-section">
      <section class="top flex">
        <db-container title="生产监控" icon="prod">
-          <prod-monitor />
+          <prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" />
        </db-container>
        <db-container title="仓库监控.当前" icon="store">
-          <store :series="series" :xAxis="xAxis" />
+          <store :stock="stock" />
        </db-container>
      </section>
      <section class="bottom flex">
        <db-container title="能源监控" icon="energy">
-          <energy
-            :legend="energyLegend"
-            :series="energySeries"
-            :xAxis="energyxAxis"
-          />
+          <energy :legend="energyLegend" :energyCockpits="energyCockpits" />
        </db-container>
        <db-container title="订单监控" icon="order">
-          <order />
+          <order :prodOrder="prodOrder" />
        </db-container>
      </section>
    </div>
@@ -41,7 +37,7 @@ import Energy from "./components/Energy.vue";
 import Order from "./components/Order.vue";
 import { cockpitDataMonitor } from "@/api/produceData";
 export default {
-  name: "FactoryData",
+  name: "factoryData",
  components: {
    FactoryDataHeader,
    DbContainer: Container,
@@ -51,89 +47,47 @@ export default {
    Order,
  },
  data() {
-    const year = new Date().getFullYear();
-    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
    return {
-      companyId: "1",
+      companyId: 0,
      companyName: "瑞昌中建材光电材料有限公司",
-      period: "日",
-
+      period: 1,
+      // 接口获取的数据
+      prodOutPut: [], //生产
+      prodFto: [], //生产
+      stock: {}, //仓库
+      energyCockpits: [], //能源
+      prodOrder: [], //订单
      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();
+    this.getMes();
  },
  methods: {
    updateCompany(obj) {
      this.companyId = obj.companyId;
      this.companyName = obj.companyName;
+      this.getMes();
    },
-    getMes1() {
+    updatePeriod(val) {
+      this.period = val;
+      this.getMes();
+    },
+    getMes() {
      cockpitDataMonitor({
-        factorys: [1],
-        date: 4,
+        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 || [];
      });
    },
  },