车间正品率、工单进度统计、其他样式处理

yangfeng

2023-12-05 f5976f38c33048020de1b116ffa004b0d889a14d

车间正品率、工单进度统计、其他样式处理

 src/views/cockpitPage/components/BarChart.vue

@@ -15,42 +15,66 @@
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 {
          total: 0,
          rate: "0",
          datax: [],
          datay: [],
          datay2: [],
        };
      },
    },
  },
  data() {
    return {
      chartData: {
        total: 1000,
        rate: "99%",
        datax: [
          "第一车间",
          "第二车间",
          "第三车间",
          "第四车间",
          "第五车间",
          "第六车间",
          "第七车间",
          "第八车间",
          "第九车间",
        ],
        datay: [120, 200, 150, 180, 170, 150, 130, 180, 140],
        datay2: [20, 30, 50, 40, 70, 50, 30, 80, 40],
      },
      // chartData: {
      //   total: 1000,
      //   rate: "99%",
      //   datax: [
      //     "第一车间",
      //     "第二车间",
      //     "第三车间",
      //     "第四车间",
      //     "第五车间",
      //     "第六车间",
      //     "第七车间",
      //     "第八车间",
      //     "第九车间",
      //   ],
      //   datay: [120, 200, 150, 180, 170, 150, 130, 180, 140],
      //   datay2: [20, 30, 50, 40, 70, 50, 30, 80, 40],
      // },
      chartTimer: null,
    };
  },
  mounted() {
    this.pieChart("chart", this.chartData);
  watch: {
    "chartData.datay"(val) {
      this.pieChart("chart", this.chartData);
    },
  },
  watch: {},
  mounted() {
    // this.pieChart("chart", this.chartData);
  },
  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) {
@@ -145,11 +169,16 @@
                },
              },
              axisLabel: {
                // rotate:45,
                margin: 10,
                show: true,
                textStyle: {
                  color: "#00FFFF",
                },
                formatter: function (value) {
                  if (value.length > 5) {
                    return `${value.slice(0, 4)}...`;
                  }
                  return value;
                },
              },
              data: data.datax ? data.datax : [],
@@ -159,7 +188,6 @@
            {
              type: "value",
              name: "",
              // min: data.yAxis[0].min?data.yAxis.min:0,
              minInterval: 1, //坐标轴是整数
              max: Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5, //数据最大值加3
              interval:
@@ -254,7 +282,7 @@
            },
          ],
        };
        setInterval(function () {
        this.chartTimer = setInterval(function () {
          // 每次向左滑动一个，最后一个从头开始。
          if (option.dataZoom[0].endValue == that.chartData.datay.length) {
            option.dataZoom[0].startValue = 0;

 src/views/cockpitPage/components/CountView.vue

@@ -7,7 +7,10 @@
        </div>
        <div class="value-view">
          <div class="title-margin-left">
            {{ totalObject.InternalDeviceRunningAmount + "台" }}
            <span class="value-span">
              {{ totalObject.InternalDeviceRunningAmount + "" }}
            </span>
            <span class="unit-span">台</span>
          </div>
        </div>
      </div>
@@ -17,7 +20,10 @@
        </div>
        <div class="value-view">
          <div class="title-margin-left">
            {{ totalObject.ExternalDeviceRunningAmount + "台" }}
            <span class="value-span">{{
              totalObject.ExternalDeviceRunningAmount
            }}</span>
            <span>台</span>
          </div>
        </div>
      </div>
@@ -29,7 +35,10 @@
        </div>
        <div class="value-view">
          <div class="title-margin-left">
            {{ totalObject.OutPlanProductionAmount + "件" }}
            <span class="value-span">{{
              totalObject.OutPlanProductionAmount
            }}</span>
            <span>件</span>
          </div>
        </div>
      </div>
@@ -39,7 +48,10 @@
        </div>
        <div class="value-view">
          <div class="title-margin-left">
            {{ totalObject.PlanProductionAmount + "件" }}
            <span class="value-span">{{
              totalObject.PlanProductionAmount
            }}</span>
            <span>件</span>
          </div>
        </div>
      </div>
@@ -51,7 +63,10 @@
        </div>
        <div class="value-view">
          <div class="title-margin-left">
            {{ totalObject.RealExternalProductionAmount + "件" }}
            <span class="value-span">{{
              totalObject.RealExternalProductionAmount
            }}</span>
            <span>件</span>
          </div>
        </div>
      </div>
@@ -61,7 +76,10 @@
        </div>
        <div class="value-view">
          <div class="title-margin-left">
            {{ totalObject.RealProductionAmount + "件" }}
            <span class="value-span">{{
              totalObject.RealProductionAmount
            }}</span>
            <span>件</span>
          </div>
        </div>
      </div>
@@ -147,6 +165,17 @@
        border-radius: 5px;
        .title-margin-left {
          margin-left: 45px;
          // white-space: nowrap;
          display: flex;
          align-items: center;
          .value-span {
            margin-top: 5px;
            height: 100%;
            max-width: 3em;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }

 src/views/cockpitPage/components/MachineStartupRate.vue

@@ -16,6 +16,7 @@
<script>
//引入echart
import * as echarts from "echarts";
let myChart;
export default {
  components: {},
  props: {
@@ -27,20 +28,17 @@
  data() {
    return {};
  },
  mounted() {
    // let chartData = [
    //   { value: 20, name: "闲置" },
    //   { value: 20, name: "维修" },
    //   { value: 60, name: "工作" },
    // ];
    // this.pieChart("chart", chartData);
  },
  mounted() {},
  watch: {},
  methods: {
    //在职
    pieChart(chartName, data) {
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);

      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = echarts.init(chartDom);
      let img = "/cockpitPage/machine-chart-bg.png";
      let option;
      if (data) {

 src/views/cockpitPage/components/OrderCompleteRadio.vue

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

 src/views/cockpitPage/components/WorkOrderProgress.vue

@@ -5,7 +5,7 @@
        <img src="/cockpitPage/work-order-top.png" alt="" />
        <div class="top-title">
          <span>工单进度统计</span>
          <span class="top-rate">{{ "60%" }}</span>
          <span class="top-rate">{{ workOrderFinishRate + "%" }}</span>
        </div>
      </div>
      <div class="table-box">
@@ -101,6 +101,10 @@
      type: Array,
      default: () => [],
    },
    workOrderFinishRate: {
      type: String,
      default: "",
    },
  },
  data() {
    return {

 src/views/cockpitPage/index.vue

@@ -18,7 +18,10 @@
      ></OrderCompleteRadio>
    </template>
    <template #leftBlock5>
      <WorkOrderProgress :table-data="workOrderData"></WorkOrderProgress>
      <WorkOrderProgress
        :work-order-finish-rate="workOrderFinishRate"
        :table-data="workOrderData"
      ></WorkOrderProgress>
    </template>
    <template #leftBlock6>
      <PerSonnelProductivity
@@ -33,7 +36,7 @@
      <MaterialChart :chartData="materialChartData"></MaterialChart>
    </template>
    <template #rightBlock3>
      <BarChart></BarChart>
      <BarChart :chartData="barChartData"></BarChart>
    </template>
  </BackgroundBoardLayout>
</template>
@@ -91,6 +94,7 @@
      },
      // 工单进度统计
      workOrderData: [],
      workOrderFinishRate: "",
      // 人员生产效率
      perSonnelChartData: {
        datax: [],
@@ -106,13 +110,18 @@
        datax: [],
        datay: [],
      },
      // 车间正品率
      barChartData: {
        total: 0,
        rate: "0",
        datax: [],
        datay: [],
        datay2: [],
      },
    };
  },
  mounted() {
    this.getDashboard();
    // setInterval(() => {
    //   this.getDashboard();
    // }, 30000);
  },
  watch: {},
  methods: {
@@ -136,11 +145,13 @@
          this.setRightBlock1(res.data);
          // 物料需求统计
          this.setRightBlock2(res.data);
          // 车间正品率
          this.setRightBlock3(res.data);
        })
        .finally(() => {
          setTimeout(() => {
            this.getDashboard();
          }, 30000);
          }, 300000);
        });
    },
    // 处理左上数据
@@ -215,6 +226,7 @@
    },
    // 工单进度统计
    setLeftBlock5(data) {
      this.workOrderFinishRate = data?.WorkOrderFinishRate.toString() ?? "0";
      let list = data.WorkOrderStats.map((item) => {
        let completeProgerss = [];
        for (let i = 0; i < item.ProcedureNum; i++) {
@@ -246,7 +258,6 @@
        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) => {
@@ -275,6 +286,19 @@
        this.materialChartData.datay.push(parseFloat(item.Value));
      });
    },
    // 车间正品率
    setRightBlock3(data) {
      this.barChartData.total = data.TodayFinishAmount;
      this.barChartData.rate = data.TodayQualifiedRate;
      this.barChartData.datax = [];
      this.barChartData.datay = [];
      this.barChartData.datay2 = [];
      data.WorkshopStats.map((item) => {
        this.barChartData.datax.push(item.Name);
        this.barChartData.datay.push(parseFloat(item.Qualified));
        this.barChartData.datay2.push(parseFloat(item.Defective));
      });
    },
  },
};
</script>