1
This commit is contained in:
		@@ -9,11 +9,11 @@
 | 
			
		||||
    </section>
 | 
			
		||||
    <section class="menu2">
 | 
			
		||||
      <CopilotButton
 | 
			
		||||
        v-for="i in ['日', '周', '月', '年']"
 | 
			
		||||
        :key="i"
 | 
			
		||||
        :label="i"
 | 
			
		||||
        :active="i === period"
 | 
			
		||||
        @click="() => $emit('update:period', i)"
 | 
			
		||||
        v-for="i in dataList"
 | 
			
		||||
        :key="i.id"
 | 
			
		||||
        :label="i.name"
 | 
			
		||||
        :active="i.id === period"
 | 
			
		||||
        @click="() => $emit('update:period', i.id)"
 | 
			
		||||
      />
 | 
			
		||||
      <div class="btn-group">
 | 
			
		||||
        <button type="button" class="export-btn" />
 | 
			
		||||
@@ -42,15 +42,21 @@ export default {
 | 
			
		||||
      type: String,
 | 
			
		||||
    },
 | 
			
		||||
    companyId: {
 | 
			
		||||
      type: String,
 | 
			
		||||
      type: Number,
 | 
			
		||||
    },
 | 
			
		||||
    period: {
 | 
			
		||||
      type: String,
 | 
			
		||||
      type: Number,
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      isFullscreen: false,
 | 
			
		||||
      dataList: [
 | 
			
		||||
        { id: 1, name: "日" },
 | 
			
		||||
        { id: 2, name: "周" },
 | 
			
		||||
        { id: 3, name: "月" },
 | 
			
		||||
        { id: 4, name: "年" },
 | 
			
		||||
      ],
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
  computed: {},
 | 
			
		||||
 
 | 
			
		||||
@@ -26,20 +26,20 @@ export default {
 | 
			
		||||
      type: String,
 | 
			
		||||
    },
 | 
			
		||||
    companyId: {
 | 
			
		||||
      type: String,
 | 
			
		||||
      type: Number,
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      isOpen: false,
 | 
			
		||||
      company: [
 | 
			
		||||
        { id: "1", name: "瑞昌中建材光电材料有限公司" },
 | 
			
		||||
        { id: "2", name: "邯郸中建材光电材料有限公司" },
 | 
			
		||||
        { id: "3", name: "株洲中建材光电材料有限公司" },
 | 
			
		||||
        { id: "4", name: "佳木斯中建材光电材料有限公司" },
 | 
			
		||||
        { id: "5", name: "成都中建材光电材料有限公司" },
 | 
			
		||||
        { id: "6", name: "凯盛中建材光电材料有限公司" },
 | 
			
		||||
        { id: "7", name: "蚌埠中建材光电材料有限公司" },
 | 
			
		||||
        { id: 0, name: "瑞昌中建材光电材料有限公司" },
 | 
			
		||||
        { id: 1, name: "邯郸中建材光电材料有限公司" },
 | 
			
		||||
        { id: 2, name: "株洲中建材光电材料有限公司" },
 | 
			
		||||
        { id: 3, name: "佳木斯中建材光电材料有限公司" },
 | 
			
		||||
        { id: 4, name: "成都中建材光电材料有限公司" },
 | 
			
		||||
        { id: 5, name: "凯盛中建材光电材料有限公司" },
 | 
			
		||||
        { id: 6, name: "蚌埠中建材光电材料有限公司" },
 | 
			
		||||
      ],
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										27
									
								
								src/views/copilot/components/NotMsg.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										27
									
								
								src/views/copilot/components/NotMsg.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,27 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="notmsg">暂无数据</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'NotMsg',
 | 
			
		||||
	components: {},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	computed: {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.notmsg {
 | 
			
		||||
	padding-top: 72px;
 | 
			
		||||
	color: rgba(255, 255, 255, 0.4);
 | 
			
		||||
	text-align: center;
 | 
			
		||||
	font-size: 24px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
@@ -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);
 | 
			
		||||
    },
 | 
			
		||||
 
 | 
			
		||||
@@ -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);
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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);
 | 
			
		||||
    },
 | 
			
		||||
 
 | 
			
		||||
@@ -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 || [];
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user