接口联调及人员饼图模块样式优化

yangfeng

2023-12-04 bb7f2e3ecbd47edfde477d742990bcbad3d601e1

接口联调及人员饼图模块样式优化

 src/api/cockpitPage/index.js

New file
@@ -0,0 +1,9 @@
import request from "@/utils/request";

// 获取网络配置
export const getDashboard = () => {
  return request({
    url: "/v1/dashboard/dashboard",
    method: "get",
  });
};

 src/views/cockpitPage/components/CountView.vue

@@ -3,10 +3,12 @@
    <div class="box">
      <div class="left">
        <div class="title-view">
          <div>开机台数</div>
          <div>自有开机台数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">200台</div>
          <div class="title-margin-left">
            {{ totalObject.InternalDeviceRunningAmount + "台" }}
          </div>
        </div>
      </div>
      <div class="right">
@@ -14,7 +16,9 @@
          <div>外加工台数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">500台</div>
          <div class="title-margin-left">
            {{ totalObject.ExternalDeviceRunningAmount + "台" }}
          </div>
        </div>
      </div>
    </div>
@@ -24,7 +28,9 @@
          <div>计划外加工数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">4000件</div>
          <div class="title-margin-left">
            {{ totalObject.OutPlanProductionAmount + "件" }}
          </div>
        </div>
      </div>
      <div class="right">
@@ -32,7 +38,9 @@
          <div>计划生产数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">2000件</div>
          <div class="title-margin-left">
            {{ totalObject.PlanProductionAmount + "件" }}
          </div>
        </div>
      </div>
    </div>
@@ -42,7 +50,9 @@
          <div>实际外加工数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">4000件</div>
          <div class="title-margin-left">
            {{ totalObject.RealExternalProductionAmount + "件" }}
          </div>
        </div>
      </div>
      <div class="right">
@@ -50,7 +60,9 @@
          <div>实际生产数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">2000件</div>
          <div class="title-margin-left">
            {{ totalObject.RealProductionAmount + "件" }}
          </div>
        </div>
      </div>
    </div>
@@ -60,7 +72,21 @@
<script>
export default {
  components: {},
  props: {},
  props: {
    totalObject: {
      type: Object,
      default: () => {
        return {
          InternalDeviceRunningAmount: 0,
          ExternalDeviceRunningAmount: 0,
          OutPlanProductionAmount: 0,
          PlanProductionAmount: 0,
          RealExternalProductionAmount: 0,
          RealProductionAmount: 0,
        };
      },
    },
  },
  data() {
    return {};
  },

 src/views/cockpitPage/components/PerSonnelProductivity.vue

@@ -212,8 +212,8 @@
                z: 3,
                style: {
                  image: img,
                  width: 248,
                  height: 248,
                  width: 238,
                  height: 238,
                },
                left: "center",
                top: "center",
@@ -240,8 +240,17 @@
                  borderWidth: 5,
                  borderRadius: 4,
                  formatter: function (params) {
                    let str = params.name + params.value + "%";
                    return str;
                    return `{a|${params.name}} {b|${params.value + "%"}}`;
                  },
                  rich: {
                    a: {
                      color: "#00ffff",
                      fontSize: 14,
                    },
                    b: {
                      color: "#fccd1d",
                      fontSize: 14,
                    },
                  },
                },
              },

 src/views/cockpitPage/components/StatisticalBox.vue

@@ -2,11 +2,11 @@
  <div class="statistical-box">
    <div v-for="item in allList" class="all-bg">
      <div class="box">
        <div class="commom-title">{{ item.title }}</div>
        <div class="commom-title">{{ item.label }}</div>
        <div
          class="commom-value"
          :class="
            item.title == '延期交付' || item.title == '物料不足'
            item.label == '延期交付' || item.label == '物料不足'
              ? 'redColor'
              : ''
          "
@@ -21,18 +21,39 @@
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      allList: [
        { title: "开机台数", value: 200 },
        { title: "总产量", value: 1200 },
        { title: "生产工单数", value: 200 },
        { title: "延期交付", value: 20 },
        { title: "物料不足", value: 10 },
        { title: "计划达成率", value: 2 },
  props: {
    allList: {
      type: Array,
      default: () => [
        {
          value: 200,
          label: "开机台数",
        },
        {
          value: 1200,
          label: "总产量",
        },
        {
          value: 200,
          label: "生产工单数",
        },
        {
          value: 20,
          label: "延期交付",
        },
        {
          value: 10,
          label: "物料不足",
        },
        {
          value: 2,
          label: "计划达成率",
        },
      ],
    };
    },
  },
  data() {
    return {};
  },
  mounted() {},
  watch: {},

 src/views/cockpitPage/index.vue

@@ -1,13 +1,13 @@
<template>
  <BackgroundBoardLayout>
    <template #leftBlock1>
      <StatisticalBox></StatisticalBox>
      <StatisticalBox :all-list="allList"></StatisticalBox>
    </template>
    <template #leftBlock2>
      <MachineStartupRate></MachineStartupRate>
    </template>
    <template #leftBlock3>
      <CountView></CountView>
      <CountView :total-object="totalObject"></CountView>
    </template>
    <template #leftBlock4>
      <OrderCompleteRadio></OrderCompleteRadio>
@@ -16,8 +16,7 @@
      <WorkOrderProgress></WorkOrderProgress>
    </template>
    <template #leftBlock6>
      <PerSonnelProductivity
      ></PerSonnelProductivity>
      <PerSonnelProductivity></PerSonnelProductivity>
    </template>
    <template #rightBlock1>
      <DeviceChart></DeviceChart>
@@ -42,6 +41,7 @@
import BarChart from "@/views/cockpitPage/components/BarChart.vue";
import OrderCompleteRadio from "@/views/cockpitPage/components/OrderCompleteRadio";
import WorkOrderProgress from "@/views/cockpitPage/components/WorkOrderProgress";
import { getDashboard } from "@/api/cockpitPage/index";
export default {
  components: {
    StatisticalBox,
@@ -57,11 +57,72 @@
  },
  props: {},
  data() {
    return {};
    return {
      allList: [
        { value: 0, label: "开机台数" },
        { value: 0, label: "总产量" },
        { value: 0, label: "生产工单数" },
        { value: 0, label: "延期交付" },
        { value: 0, label: "物料不足" },
        { value: 0, label: "计划达成率" },
      ],
      totalObject: {},
    };
  },
  mounted() {},
  mounted() {
    this.getDashboard();
    setInterval(() => {
      this.getDashboard();
    }, 300000);
  },
  watch: {},
  methods: {},
  methods: {
    async getDashboard() {
      await getDashboard().then((res) => {
        console.log(res);
        // 左上数值统计数据
        this.setLeftBlock1(res.data);
        //  左中数据统计值
        this.setLeftBlock3(res.data);
      });
    },
    // 处理左上数据
    setLeftBlock1(data) {
      this.allList.map((item) => {
        if (item.label === "开机台数") {
          item.value = data?.DeviceRunningAmount ?? 0;
        } else if (item.label === "总产量") {
          item.value = data?.TotalProductionAmount ?? 0;
        } else if (item.label === "生产工单数") {
          item.value = data?.WorkOrderAmount ?? 0;
        } else if (item.label === "延期交付") {
          item.value = data?.DelayWorkOrderAmount ?? 0;
        } else if (item.label === "物料不足") {
          item.value = data?.MaterialMissWorkOrderAmount ?? 0;
        } else if (item.label === "计划达成率") {
          item.value =
            typeof data?.PlanOrderFinishRate === "string"
              ? parseFloat(
                  data?.PlanOrderFinishRate.length > 0
                    ? data?.PlanOrderFinishRate
                    : "0"
                )
              : data?.PlanOrderFinishRate ?? 0;
        }
      });
    },
    // 左中数据统计值
    setLeftBlock3(data) {
      this.totalObject = {
        InternalDeviceRunningAmount: data?.InternalDeviceRunningAmount ?? 0,
        ExternalDeviceRunningAmount: data?.ExternalDeviceRunningAmount ?? 0,
        OutPlanProductionAmount: data?.OutPlanProductionAmount ?? 0,
        PlanProductionAmount: data?.PlanProductionAmount ?? 0,
        RealExternalProductionAmount: data?.RealExternalProductionAmount ?? 0,
        RealProductionAmount: data?.RealProductionAmount ?? 0,
      };
    },
  },
};
</script>