1.质量综合看板，不合格产品分布。

src/layout/components/header.vue

@@ -101,7 +101,7 @@ const handleCommand = (command: string | number | object) => {
   if (command === "b") {
     logoutApi().then(() => {
       localStorage.setItem("token", "");
-      location.reload();
+      router.replace("/login");
     });
   }
 };

src/router/index.ts

@@ -53,6 +53,12 @@ export const constantRoutes: RouteRecordRaw[] = [
     meta: { hidden: true },
   },
   {
+    path: "/qualityScreen",
+    component: () => import("@/views/screens/qualityScreen.vue"),
+    name: "qualityScreen",
+    meta: { hidden: true },
+  },
+  {
     path: "/users",
     component: () => import("@/views/sets/users.vue"),
     name: "users",

src/store/modules/common.ts

@@ -20,7 +20,10 @@ export const useCommonStore = defineStore("commonStore", {
     mainS076: "DailyProductionS",
     mainS077: "EquipmentMonitoring",
     mainS078: "ProductionSituation",
-    moduleKey: "mainS078", // 用于判断修改了哪个模块
+    // ====
+    qualityTOP01: "DistributionOfUnqualifiedProducts",
+
+    moduleKey: "", // 用于判断修改了哪个模块
     isShowSelectModule: false, // 是否显示选择模块中的组件弹窗
   }),
   persist: true,

src/styles/index.scss

@@ -94,6 +94,7 @@
   height: calc(100% - 80px);
   display: flex;
   padding: 15px;
+  border: 1px solid red;
 }
 
 .screen-common-box {

src/views/main/screenEntry.vue

@@ -19,13 +19,11 @@
 import TopTitle from "@/components/TopTitle.vue";
 
 const screenData = ref([
-  { name: "综合大屏", routeName: "totalScreen" },
-  {
-    name: "综合大屏",
-    routeName: "totalScreen",
-  },
+  { name: "综合监控大屏", routeName: "mainScreen" },
+  { name: "质量综合大屏", routeName: "qualityScreen" },
   { name: "综合大屏", routeName: "totalScreen" },
   { name: "综合大屏", routeName: "totalScreen" },
+  { name: "测试大屏", routeName: "totalScreen" },
 ]);
 
 const router = useRouter();

src/views/screens/configs/components.ts

@@ -6,6 +6,7 @@ import MaterialsCondition from "@/views/screens/screen-components/MaterialsCondi
 import ProductionScheduleOfHeavyParts from "@/views/screens/screen-components/ProductionScheduleOfHeavyParts.vue";
 import ProductionTaskStatistics from "@/views/screens/screen-components/ProductionTaskStatistics.vue";
 import ProductionCapacitySituation from "@/views/screens/screen-components/ProductionCapacitySituation.vue";
+import DistributionOfUnqualifiedProducts from "@/views/screens/screen-components/DistributionOfUnqualifiedProducts.vue";
 
 export interface ScreenComponent {
   name: string;
@@ -67,6 +68,13 @@ export const componentsDicts: { [key: string]: ScreenComponent } = {
     key: "ProductionCapacitySituation",
     description: "This component shows the production capacity situation.",
   },
+  DistributionOfUnqualifiedProducts: {
+    name: "不合格产品分布",
+    component: DistributionOfUnqualifiedProducts,
+    key: "DistributionOfUnqualifiedProducts",
+    description:
+      "This component shows the distribution of unqualified products.",
+  },
 };
 
 export const getComponetnByName = (name: string) => {

src/views/screens/qualityScreen.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="screen-window">
+    <dv-full-screen-container>
+      <ScreenHeader title="综合监控大屏" />
+      <div class="screen-content" style="flex-direction: column">
+        <div class="top-container">
+          <dv-border-box-3 class="top-container-box top-left">
+            <component :is="qualityTOP01" moduleId="qualityTOP01" />
+          </dv-border-box-3>
+          <div class="top-container-box top-middle"></div>
+          <div class="top-container-box top-right"></div>
+        </div>
+        <div class="vertical-space"></div>
+        <div class="bottom-container">
+          <div class="bottom-container-box bottom-left"></div>
+
+          <div class="bottom-container-box bottom-right"></div>
+        </div>
+      </div>
+    </dv-full-screen-container>
+    <SelectComponents />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenHeader from "@/views/screens/headers/screenHeader.vue";
+import { getComponetnByName } from "@/views/screens/configs/components";
+import SelectComponents from "@/views/screens/configs/SelectComponents.vue";
+import { useCommonStore } from "@/store";
+
+const commonS = useCommonStore();
+
+const qualityTOP01 = computed(() => {
+  return getComponetnByName(commonS.qualityTOP01);
+});
+</script>
+
+<style lang="scss" scoped>
+.top-container {
+  height: 45%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .top-container-box {
+    height: 100%;
+    border: 1px solid yellow;
+    padding: 25px;
+  }
+
+  .top-left {
+    width: 27%;
+  }
+
+  .top-middle {
+    width: 46%;
+  }
+
+  .top-right {
+    width: 27%;
+  }
+}
+
+.vertical-space {
+  height: 15px;
+  width: 100%;
+}
+
+.bottom-container {
+  height: calc(55% - 15px);
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .bottom-container-box {
+    height: 100%;
+    border: 1px solid yellow;
+  }
+
+  .bottom-left {
+    width: 50%;
+  }
+
+  .bottom-right {
+    width: 50%;
+  }
+}
+</style>

src/views/screens/screen-components/DistributionOfUnqualifiedProducts.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="不合格产品分布" />
+    <div ref="chartRef" class="charts-container"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import * as echarts from "echarts";
+import { allChartColors } from "@/views/screens/configs/chartsConfig";
+
+const chartRef = ref(null);
+const data = {
+  legendData: [
+    "沈蓝郎",
+    "何岑董",
+    "喻路孙尤·黄屈",
+    "殷祁岑鲁·齐",
+    "乐赵方",
+    "郎柳",
+    "苏尤",
+    "金邵茅",
+    "康姚汪",
+    "袁奚汪茅·孙",
+  ],
+  seriesData: [
+    {
+      name: "沈蓝郎",
+      value: 92046,
+    },
+    {
+      name: "何岑董",
+      value: 4647,
+    },
+    {
+      name: "喻路孙尤·黄屈",
+      value: 67173,
+    },
+    {
+      name: "殷祁岑鲁·齐",
+      value: 85032,
+    },
+    {
+      name: "乐赵方",
+      value: 42687,
+    },
+    {
+      name: "郎柳",
+      value: 39540,
+    },
+    {
+      name: "苏尤",
+      value: 43617,
+    },
+    {
+      name: "金邵茅",
+      value: 18320,
+    },
+    {
+      name: "康姚汪",
+      value: 30264,
+    },
+    {
+      name: "袁奚汪茅·孙",
+      value: 84637,
+    },
+  ],
+};
+
+const gernerateOptionsWithData = (
+  data: any,
+  centerText: string,
+  unitText: string,
+  titleText: string = "订单需求数"
+) => {
+  const option = {
+    color: allChartColors,
+    backgroundColor: "transparent",
+    title: {
+      show: false,
+    },
+    tooltip: {
+      trigger: "item",
+      formatter: "{a} <br/>{b} : {c} ({d}%)",
+    },
+    legend: {
+      type: "scroll",
+      orient: "vertical",
+      right: 10,
+      top: 20,
+      bottom: 20,
+      data: data.legendData,
+    },
+    series: [
+      {
+        name: "占比",
+        type: "pie",
+        radius: ["40%", "50%"],
+        center: ["40%", "50%"],
+        data: data.seriesData,
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)",
+          },
+        },
+      },
+    ],
+    graphic: [
+      {
+        type: "text",
+        left: "34%",
+        top: "45%",
+        style: {
+          text: centerText,
+          textAlign: "center",
+          fill: "#00BCD4", // 数值颜色
+          fontSize: 20, // 数值大小
+        },
+      },
+      {
+        type: "text",
+        left: "39%",
+        top: "52%",
+        style: {
+          text: unitText,
+          textAlign: "center",
+          fill: "#607D8B", // 单位颜色
+          fontSize: 14, // 单位大小
+        },
+      },
+    ],
+  };
+  return option;
+};
+onMounted(() => {
+  const chart = echarts.init(chartRef.value, "dark");
+  chart.setOption(gernerateOptionsWithData(data, "1000000", "个"));
+});
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+</script>