人员生产效率、物料需求统计

yangfeng

2023-12-05 27fa305bf0c3a4405366a966c28b4d32203106b8

人员生产效率、物料需求统计

 src/views/cockpitPage/components/DeviceChart.vue

@@ -29,57 +29,35 @@
        };
      },
    },
    // xdata: {
    //   type: Array,
    //   require: true,
    // },
    // ydata: {
    //   type: Array,
    //   require: true,
    // },
  },
  data() {
    return {
      // chartData: {
      //   datax: [],
      //   datay: [],
      // },
      startValue: 0,
      endValue: 5,
      chartTimer:null,
      chartTimer: null,
    };
  },
  watch: {
    "chartData.datay"(val) {
      console.log(val, "设备变更数据");
      this.ydata = val;
      this.startValue = 0;
      this.endValue = 5;
      this.pieChart("chart", this.chartData);
    },
  },
  mounted() {
    // this.pieChart("chart", this.chartData);
  },
  mounted() {},
  methods: {
    //在职
    pieChart(chartName, data) {
      let that = this;
      clearInterval(this.chartTimer);
      let chartDomTwo = this.$refs[chartName];
      let myChartTwo = echarts.init(chartDomTwo)
      myChartTwo.dispose()
      let chartDom = this.$refs[chartName];
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = echarts.init(chartDom);
      // if (myChart != null && myChart != "" && myChart != undefined) {
      //   console.log("222222222");
      //   myChart.dispose(); //销毁
      //   myChart.resize();
      // }
      // console.log(myChart, "ssssssss");
      let option;
      let lineColor = "#35ddc74d";
      if (this.ydata) {
      if (data) {
        option = {
          color: ["#00FFFF", "#dcb018"],
          tooltip: {
@@ -136,12 +114,12 @@
                    }
                  },
                },
                formatter:function(value){
                  if(value.length>6){
                    return `${value.slice(0,4)}...`
                formatter: function (value) {
                  if (value.length > 6) {
                    return `${value.slice(0, 4)}...`;
                  }
                  return value;
                }
                },
              },
              data: data.datax ? data.datax : [],
            },
@@ -213,7 +191,7 @@
          ],
        };

        this.chartTimer=setInterval(function () {
        this.chartTimer = setInterval(function () {
          if (option.dataZoom[0].endValue == data.datay.length) {
            option.dataZoom[0].startValue = that.startValue;
            option.dataZoom[0].endValue = that.endValue;

 src/views/cockpitPage/components/MaterialChart.vue

@@ -11,40 +11,48 @@
import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue";
//引入echart
import * as echarts from "echarts";
let myChart;
export default {
  components: {
    ChartTitle,
  },
  props: {},
  props: {
    chartData: {
      type: Object,
      require: true,
      default: () => {
        return {
          datax: [],
          datay: [],
        };
      },
    },
  },
  data() {
    return {
      chartData: {
        datax: [
          "产品1",
          "产品2",
          "产品3",
          "产品4",
          "产品5",
          "产品6",
          "产品7",
          "产品8",
          "产品9",
          "产品10",
        ],
        datay: [120, 200, 150, 380, 470, 150, 230, 130, 210, 145, 330],
      },
      startValue: 0,
      endValue: 5,
      chartTimer: null,
    };
  },
  mounted() {
    this.pieChart("chart", this.chartData);
  watch: {
    "chartData.datay"(val) {
      this.startValue = 0;
      this.endValue = 5;
      this.pieChart("chart", this.chartData);
    },
  },
  watch: {},
  mounted() {},
  methods: {
    //在职
    pieChart(chartName, data) {
      let that = this;
      clearInterval(this.chartTimer);
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = echarts.init(chartDom);
      let option;
      let lineColor = "#35ddc74d";
      if (data) {
@@ -67,8 +75,8 @@
              type: "inside",
              yAxisIndex: 0,
              show: false,
              startValue: 0, // 从头开始
              endValue: 5, // 一次性展示几个
              startValue: that.startValue, // 从头开始
              endValue: that.endValue, // 一次性展示几个
            },
          ],
          legend: {
@@ -168,8 +176,7 @@
            },
          ],
        };
        setInterval(function () {
          // 每次向左滑动一个，最后一个从头开始。
        this.chartTimer = setInterval(function () {
          if (option.dataZoom[0].endValue == that.chartData.datay.length) {
            option.dataZoom[0].startValue = 0;
            option.dataZoom[0].endValue = 5;

 src/views/cockpitPage/components/PerSonnelProductivity.vue

@@ -16,46 +16,49 @@
import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue";
//引入echart
import * as echarts from "echarts";
let myChart;
export default {
  components: {
    ChartTitle,
  },
  props: {},
  props: {
    chartData: {
      type: Object,
      require: true,
      default: () => {
        return {
          datax: [],
          datay: [],
        };
      },
    },
  },
  data() {
    return {
      chartData: {
        datax: [
          "人员1",
          "人员2",
          "人员3",
          "人员4",
          "人员5",
          "人员6",
          "人员7",
          "人员8",
          "人员9",
        ],
        datay: [120, 200, 150, 380, 470, 150, 230, 330, 190, 440],
      },
      startValue: 0,
      endValue: 5,
      chartTimer: null,
    };
  },
  mounted() {
    this.pieChart("chart", this.chartData);
    let chartData2 = [
      { value: 10, name: "一类" },
      { value: 20, name: "二类" },
      { value: 60, name: "三类" },
      { value: 10, name: "四类" },
    ];
    this.getChartRight("chart2", chartData2);
  watch: {
    "chartData.datay"(val) {
      this.startValue = 0;
      this.endValue = 5;
      this.pieChart("chart", this.chartData);
    },
  },
  watch: {},
  mounted() {},
  methods: {
    //在职
    pieChart(chartName, data) {
      let that = this;
      clearInterval(this.chartTimer);
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);
      // let myChart = echarts.init(chartDom);
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = echarts.init(chartDom);
      let option;
      let lineColor = "#35ddc74d";
      if (data) {
@@ -78,8 +81,8 @@
              type: "inside",
              yAxisIndex: 0,
              show: false,
              startValue: 0, // 从头开始
              endValue: 5, // 一次性展示几个
              startValue: this.startValue, // 从头开始
              endValue: this.endValue, // 一次性展示几个
            },
          ],
          legend: {
@@ -183,10 +186,8 @@
            },
          ],
        };

        setInterval(function () {
          // 每次向左滑动一个，最后一个从头开始。
          if (option.dataZoom[0].endValue == that.chartData.datay.length) {
        this.chartTimer = setInterval(function () {
          if (option.dataZoom[0].endValue == data.datay.length) {
            option.dataZoom[0].startValue = 0;
            option.dataZoom[0].endValue = 5;
          } else {

 src/views/cockpitPage/index.vue

@@ -21,13 +21,16 @@
      <WorkOrderProgress :table-data="workOrderData"></WorkOrderProgress>
    </template>
    <template #leftBlock6>
      <PerSonnelProductivity></PerSonnelProductivity>
      <PerSonnelProductivity
        ref="leftBlock6"
        :chartData="perSonnelChartData"
      ></PerSonnelProductivity>
    </template>
    <template #rightBlock1>
      <DeviceChart ref="rightBlock1" :chartData="deviceChartData"></DeviceChart>
    </template>
    <template #rightBlock2>
      <MaterialChart></MaterialChart>
      <MaterialChart :chartData="materialChartData"></MaterialChart>
    </template>
    <template #rightBlock3>
      <BarChart></BarChart>
@@ -88,12 +91,21 @@
      },
      // 工单进度统计
      workOrderData: [],
      // 人员生产效率
      perSonnelChartData: {
        datax: [],
        datay: [],
      },
      // 设备负荷对比
      deviceChartData: {
        datax: [],
        datay: [],
      },
      dataindex: 0,
      // 物料需求统计
      materialChartData: {
        datax: [],
        datay: [],
      },
    };
  },
  mounted() {
@@ -105,25 +117,31 @@
  watch: {},
  methods: {
    async getDashboard() {
      await getDashboard().then((res) => {
        console.log(res);
        // 左上数值统计数据
        this.setLeftBlock1(res.data);
        // 机器开机率数据
        this.setleftBlock2(res.data);
        //  左中数据统计值
        this.setLeftBlock3(res.data);
        // 订单完成比率
        this.setLeftBlock4(res.data);
        // 工单进度统计
        this.setLeftBlock5(res.data);
        // 设备负荷对比
        this.setRightBlock1(res.data);
      }).finally(()=>{
        setTimeout(()=>{
          this.getDashboard()
        },30000)
      });
      await getDashboard()
        .then((res) => {
          console.log(res);
          // 左上数值统计数据
          this.setLeftBlock1(res.data);
          // 机器开机率数据
          this.setleftBlock2(res.data);
          //  左中数据统计值
          this.setLeftBlock3(res.data);
          // 订单完成比率
          this.setLeftBlock4(res.data);
          // 工单进度统计
          this.setLeftBlock5(res.data);
          // 人员生效效率比 人员技能
          this.setLeftBlock6(res.data);
          // 设备负荷对比
          this.setRightBlock1(res.data);
          // 物料需求统计
          this.setRightBlock2(res.data);
        })
        .finally(() => {
          setTimeout(() => {
            this.getDashboard();
          }, 30000);
        });
    },
    // 处理左上数据
    setLeftBlock1(data) {
@@ -220,6 +238,25 @@
      });
      this.workOrderData = list;
    },
    // 人员生效效率比 人员技能
    setLeftBlock6(data) {
      this.perSonnelChartData.datax = [];
      this.perSonnelChartData.datay = [];
      data.PersonnelProductivity.map((item) => {
        this.perSonnelChartData.datax.push(item.Name);
        this.perSonnelChartData.datay.push(parseFloat(item.Value));
      });
      console.log(this.perSonnelChartData.datay);
      // 人员技能饼图
      let chartData2 = [];
      chartData2 = data.WorkerTypeStats.map((item) => {
        return {
          name: item.Name,
          value: parseFloat(item.Value),
        };
      });
      this.$refs.leftBlock6.getChartRight("chart2", chartData2);
    },
    // 设备负荷对比
    setRightBlock1(data) {
      this.deviceChartData.datax = [];
@@ -228,7 +265,15 @@
        this.deviceChartData.datax.push(item.Name);
        this.deviceChartData.datay.push(parseFloat(item.Value));
      });
      // this.$refs.rightBlock1.pieChart("chart", this.deviceChartData);
    },
    // 物料需求统计
    setRightBlock2(data) {
      this.materialChartData.datax = [];
      this.materialChartData.datay = [];
      data.MaterialRequirement.map((item) => {
        this.materialChartData.datax.push(item.Name);
        this.materialChartData.datay.push(parseFloat(item.Value));
      });
    },
  },
};