机器开机率、工单进度统计、设备负荷比接口联调

yangfeng

2023-12-05 8d1a8a22ff13bab740ff3c427eb531fd6ce97844

机器开机率、工单进度统计、设备负荷比接口联调

 src/views/cockpitPage/components/DeviceChart.vue

@@ -15,40 +15,66 @@
<script>
//引入echart
import * as echarts from "echarts";
let myChart;
export default {
  components: {},
  props: {},
  data() {
    return {
  props: {
      chartData: {
        datax: [
          "设备1",
          "设备2",
          "设备3",
          "设备4",
          "设备5",
          "设备6",
          "设备7",
          "设备8",
          "设备9",
        ],
        datay: [10, 20, 15, 38, 47, 50, 20, 33, 25, 48],
      },
      type: Object,
      require: true,
      default: () => {
        return {
          datax: [],
          datay: [],
    };
  },
  mounted() {
    },
    // xdata: {
    //   type: Array,
    //   require: true,
    // },
    // ydata: {
    //   type: Array,
    //   require: true,
    // },
  },
  data() {
    return {
      // chartData: {
      //   datax: [],
      //   datay: [],
      // },
      startValue: 0,
      endValue: 5,
    };
  },
  watch: {
    "chartData.datay"(val) {
      console.log(val, "ddddddddddddddd");
      this.ydata = val;
      this.startValue = 0;
      this.endValue = 5;
    this.pieChart("chart", this.chartData);
  },
  watch: {},
  },
  mounted() {
    // this.pieChart("chart", this.chartData);
  },
  methods: {
    //在职
    pieChart(chartName, data) {
      let that = this;
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);
      if (myChart != null && myChart != "" && myChart != undefined) {
        console.log("222222222");
        myChart.dispose(); //销毁
        myChart.resize();
      }
      console.log(myChart, "ssssssss");
      myChart = echarts.init(chartDom);
      let option;
      let lineColor = "#35ddc74d";
      if (data) {
      if (this.ydata) {
        option = {
          color: ["#00FFFF", "#dcb018"],
          tooltip: {
@@ -68,8 +94,8 @@
              type: "inside",
              yAxisIndex: 0,
              show: false,
              startValue: 0, // 从头开始
              endValue: 5, // 一次性展示几个
              startValue: that.startValue, // 从头开始
              endValue: that.endValue, // 一次性展示几个
            },
          ],
          legend: {
@@ -177,10 +203,9 @@
        };

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

 src/views/cockpitPage/components/MachineStartupRate.vue

@@ -5,7 +5,7 @@
        <img src="/cockpitPage/machine-top.png" alt="" />
        <div class="top-title">
          <span>机器开机率</span>
          <span class="top-rate">{{ "60%" }}</span>
          <span class="top-rate">{{ startupRate + "%" }}</span>
        </div>
      </div>
      <div class="chart" ref="chart"></div>
@@ -18,17 +18,22 @@
import * as echarts from "echarts";
export default {
  components: {},
  props: {},
  props: {
    startupRate: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  mounted() {
    let chartData = [
      { value: 20, name: "闲置" },
      { value: 20, name: "维修" },
      { value: 60, name: "工作" },
    ];
    this.pieChart("chart", chartData);
    // let chartData = [
    //   { value: 20, name: "闲置" },
    //   { value: 20, name: "维修" },
    //   { value: 60, name: "工作" },
    // ];
    // this.pieChart("chart", chartData);
  },
  watch: {},
  methods: {

 src/views/cockpitPage/components/OrderCompleteRadio.vue

@@ -64,14 +64,14 @@
          this.startIndex + 4
        );
      },
      set(val) {
        console.log(val);
      },
      // set(val) {
      //   console.log(val);
      // },
    },
  },
  watch: {
    "orderCompleteObject.orderCompleteList"(val) {
      console.log(val, "ssssssssss");
      // console.log(val, "ssssssssss");
      this.startIndex = this.orderCompleteObject.startIndex;
    },
  },

 src/views/cockpitPage/components/WorkOrderProgress.vue

@@ -16,35 +16,35 @@
          height="100%"
        >
          <el-table-column
            prop="workOrderId"
            prop="Number"
            label="工单编号"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="product"
            prop="Product"
            label="产品"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="productSpecs"
            prop="Scale"
            label="产品规格"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="amount"
            prop="Amount"
            label="生产数量"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="planTime"
            prop="PlanTime"
            label="计划时间"
            align="center"
            min-width="100"
@@ -55,7 +55,7 @@
            <template slot-scope="scope">
              <div class="progerss-bg">
                <div
                  v-for="item in scope.row.completeProgerss"
                  v-for="(item, index) in scope.row.completeProgerss"
                  class="progerss"
                  :class="
                    item.status == 1
@@ -73,16 +73,16 @@
          </el-table-column>
          <el-table-column label="延期预警" align="center">
            <template slot-scope="scope">
              <div v-show="scope.row.delayWarning > 0" class="round-view">
              <div v-show="scope.row.DelayDays > 0" class="round-view">
                <div class="round red-bg"></div>
                <div class="title red-color">
                  {{ scope.row.delayWarning + "天" }}
                  {{ scope.row.DelayDays + "天" }}
                </div>
              </div>
              <div v-show="scope.row.delayWarning < 0" class="round-view">
              <div v-show="scope.row.DelayDays < 0" class="round-view">
                <div class="round green-bg"></div>
                <div class="title green-color">
                  {{ scope.row.delayWarning + "天" }}
                  {{ scope.row.DelayDays + "天" }}
                </div>
              </div>
            </template>
@@ -96,171 +96,176 @@
<script>
export default {
  components: {},
  props: {},
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tableData: [
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 3,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 1 },
            { status: 1 },
            { status: 1 },
            { status: 1 },
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 2,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: -2,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "BA5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "BA5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
      ],
      // tableData: [
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 3,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 2,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: -2,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "BA5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "BA5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      // ],
    };
  },
  mounted() {

 src/views/cockpitPage/index.vue

@@ -4,7 +4,10 @@
      <StatisticalBox :all-list="allList"></StatisticalBox>
    </template>
    <template #leftBlock2>
      <MachineStartupRate></MachineStartupRate>
      <MachineStartupRate
        ref="leftBlock2"
        :startup-rate="startupRateString"
      ></MachineStartupRate>
    </template>
    <template #leftBlock3>
      <CountView :total-object="totalObject"></CountView>
@@ -15,13 +18,13 @@
      ></OrderCompleteRadio>
    </template>
    <template #leftBlock5>
      <WorkOrderProgress></WorkOrderProgress>
      <WorkOrderProgress :table-data="workOrderData"></WorkOrderProgress>
    </template>
    <template #leftBlock6>
      <PerSonnelProductivity></PerSonnelProductivity>
    </template>
    <template #rightBlock1>
      <DeviceChart></DeviceChart>
      <DeviceChart ref="rightBlock1" :chartData="deviceChartData"></DeviceChart>
    </template>
    <template #rightBlock2>
      <MaterialChart></MaterialChart>
@@ -69,12 +72,26 @@
        { value: 0, label: "物料不足" },
        { value: 0, label: "计划达成率" },
      ],
      // 机器开机率
      startupRate: {
        Total: 0, // 总机器数
        Running: 0, // 开机台数
        Maintenance: 0, // 维修中设备数
      },
      startupRateString: "0", // 开机率
      // 左中数据统计对象
      totalObject: {},
      // 订单完成比率
      orderCompleteObject: {
        startIndex: 0,
        orderCompleteList: [],
      },
      // 工单进度统计
      workOrderData: [],
      // 设备负荷对比
      deviceChartData: {
        datax: [],
        datay: [],
      },
      dataindex: 0,
    };
@@ -83,7 +100,7 @@
    this.getDashboard();
    setInterval(() => {
      this.getDashboard();
    }, 300000);
    }, 30000);
  },
  watch: {},
  methods: {
@@ -92,10 +109,16 @@
        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);
      });
    },
    // 处理左上数据
@@ -123,6 +146,28 @@
        }
      });
    },
    // 机器开机率数据
    setleftBlock2(data) {
      this.startupRate = {
        Total: data?.TotalDeviceAmount ?? 0,
        Running: data?.DeviceRunningAmount ?? 0,
        Maintenance: data?.InMaintenanceDeviceAmount ?? 0,
      };
      // 开机率
      let setsInUse = (this.startupRate.Running / this.startupRate.Total) * 100;
      this.startupRateString = setsInUse.toFixed(1).toString();
      // 维修率
      let maintenanceRate =
        (this.startupRate.Maintenance / this.startupRate.Total) * 100;
      // 闲置率
      let idle = 100 - setsInUse - maintenanceRate;
      let chartData = [
        { value: idle.toFixed(1), name: "闲置" },
        { value: maintenanceRate.toFixed(1), name: "维修" },
        { value: setsInUse.toFixed(1), name: "工作" },
      ];
      this.$refs.leftBlock2.pieChart("chart", chartData);
    },
    // 左中数据统计值
    setLeftBlock3(data) {
      this.totalObject = {
@@ -137,44 +182,49 @@
    // 订单完成比率
    setLeftBlock4(data) {
      this.orderCompleteObject.startIndex = 0;
      // 此处后面会替换成真实后端返回数据
      if (this.dataindex == 1) {
        this.orderCompleteObject.orderCompleteList = [
          { title: "SSSSDD19070047", radio: 20.6 },
          { title: "SDD19070048", radio: 79 },
          { title: "SDD19070049", radio: 100 },
          { title: "SDD19070050", radio: 30 },
          { title: "DD19070047", radio: 20.6 },
          { title: "DD19070048", radio: 49 },
          { title: "DD19070049", radio: 60 },
          { title: "SSDD19070050", radio: 10 },
          { title: "SDD19070047", radio: 33.6 },
          { title: "DD19070048", radio: 69 },
          { title: "SDD19070049", radio: 70 },
          { title: "DD19070050", radio: 20 },
          { title: "SDD19070047", radio: 66.6 },
          { title: "DD19070048", radio: 46 },
        ];
        this.dataindex = 0;
      this.orderCompleteObject.orderCompleteList = [];
      let list = data.OrderFinishRate.map((item) => {
        return {
          title: item.Name,
          radio: parseFloat(item.Value),
        };
      });
      this.orderCompleteObject.orderCompleteList = list;
    },
    // 工单进度统计
    setLeftBlock5(data) {
      let list = data.WorkOrderStats.map((item) => {
        let completeProgerss = [];
        for (let i = 0; i < item.ProcedureNum; i++) {
          let status = 0;
          if (i < item.FinishProcedureNum) {
            status = 1;
          } else if (
            i >= item.FinishProcedureNum &&
            i < item.FinishProcedureNum + item.ProcessingProcedureNum
          ) {
            status = 2;
      } else {
        this.orderCompleteObject.orderCompleteList = [
          { title: "fffffDD19070047", radio: 50.6 },
          { title: "DD19070043", radio: 89 },
          { title: "DD15566649", radio: 100 },
          { title: "ASD5555550", radio: 30 },
          { title: "DD19070047", radio: 30.6 },
          { title: "DD19070048", radio: 49 },
          { title: "DD19070049", radio: 60 },
          { title: "DD19070050", radio: 10 },
          { title: "DD19070047", radio: 33.6 },
          { title: "DD19070048", radio: 69 },
          { title: "DD19070049", radio: 70 },
          { title: "DD19070050", radio: 20 },
          { title: "DD19070047", radio: 66.6 },
          { title: "DD19070048", radio: 96 },
        ];
        this.dataindex = 1;
            status = 0;
      }
          completeProgerss.push({ status: status });
        }
        return {
          ...item,
          completeProgerss: completeProgerss,
        };
      });
      this.workOrderData = list;
    },
    // 设备负荷对比
    setRightBlock1(data) {
      this.deviceChartData.datax = [];
      this.deviceChartData.datay = [];
      data.DeviceLoad.map((item) => {
        this.deviceChartData.datax.push(item.Name);
        this.deviceChartData.datay.push(parseFloat(item.Value));
      });
      // this.$refs.rightBlock1.pieChart("chart", this.deviceChartData);
    },
  },
};