总装车间看板产量统计，周订单完成情况，当前订单进度，周不良top组件。

src/store/modules/common.ts

@@ -26,6 +26,12 @@ export const useCommonStore = defineStore("commonStore", {
     qualityTOP03: "QualityAnomaly",
     qualityBottom01: "InspectionTaskOfToday",
     qualityBottom02: "DefectDistributionDiagram",
+    // ====
+    workTOP01: "ManagementPersons",
+    workTOP02: "ChanLiangTongJi",
+    workTOP03: "WeeklyFulfillmentOfProductionOrders",
+    workBottom01: "CurrentProductionOrderProgress",
+    workBottom02: "BadTop10",
 
     moduleKey: "", // 用于判断修改了哪个模块
     isShowSelectModule: false, // 是否显示选择模块中的组件弹窗

src/views/screens/configs/components.ts

@@ -11,6 +11,11 @@ import QualityAnomaly from "@/views/screens/screen-components/QualityAnomaly.vue
 import ProductionPassThroughRate from "@/views/screens/screen-components/ProductionPassThroughRate.vue";
 import InspectionTaskOfToday from "@/views/screens/screen-components/InspectionTaskOfToday.vue";
 import DefectDistributionDiagram from "@/views/screens/screen-components/DefectDistributionDiagram.vue";
+import ManagementPersons from "@/views/screens/screen-components/ManagementPersons.vue";
+import ChanLiangTongJi from "@/views/screens/screen-components/ChanLiangTongJi.vue";
+import CurrentProductionOrderProgress from "@/views/screens/screen-components/CurrentProductionOrderProgress.vue";
+import WeeklyFulfillmentOfProductionOrders from "@/views/screens/screen-components/WeeklyFulfillmentOfProductionOrders.vue";
+import BadTop10 from "@/views/screens/screen-components/BadTop10.vue";
 
 export interface ScreenComponent {
   name: string;
@@ -103,6 +108,37 @@ export const componentsDicts: { [key: string]: ScreenComponent } = {
     key: "DefectDistributionDiagram",
     description: "This component shows the defect distribution diagram.",
   },
+  ManagementPersons: {
+    name: "管理人员",
+    component: ManagementPersons,
+    key: "ManagementPersons",
+    description: "This component shows the management persons.",
+  },
+  ChanLiangTongJi: {
+    name: "产量统计",
+    component: ChanLiangTongJi,
+    key: "ChanLiangTongJi",
+    description: " shows the production situation of the company.",
+  },
+  CurrentProductionOrderProgress: {
+    name: "当前生产订单进度",
+    component: CurrentProductionOrderProgress,
+    key: "CurrentProductionOrderProgress",
+    description: "This component shows the current production order progress.",
+  },
+  WeeklyFulfillmentOfProductionOrders: {
+    name: "周生产订单完成情况",
+    component: WeeklyFulfillmentOfProductionOrders,
+    key: "WeeklyFulfillmentOfProductionOrders",
+    description:
+      "This component shows the weekly fulfillment of production orders.",
+  },
+  BadTop10: {
+    name: "不良TOP10",
+    component: BadTop10,
+    key: "BadTop10",
+    description: "This component shows the bad top 10.",
+  },
 };
 
 export const getComponetnByName = (name: string) => {

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="screen-common-component" style="padding: 8px 25px">
+    <ScreenComHeader :module-id="moduleId" title="第那周不良10" />
+    <dv-scroll-ranking-board
+      :config="config"
+      style="width: 100%; height: calc(100% - 32px)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+
+const config = ref({});
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+
+onMounted(() => {
+  config.value = {
+    rowNum: 10,
+    data: [
+      {
+        name: "南阳",
+        value: 167,
+      },
+      {
+        name: "周口",
+        value: 67,
+      },
+      {
+        name: "漯河",
+        value: 123,
+      },
+      {
+        name: "郑州",
+        value: 55,
+      },
+      {
+        name: "西峡",
+        value: 98,
+      },
+      {
+        name: "南阳",
+        value: 167,
+      },
+      {
+        name: "周口",
+        value: 67,
+      },
+      {
+        name: "漯河",
+        value: 123,
+      },
+      {
+        name: "郑州",
+        value: 55,
+      },
+      {
+        name: "西峡",
+        value: 98,
+      },
+    ],
+  };
+});
+</script>

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

@@ -0,0 +1,103 @@
+<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 { chartLegend } from "@/views/screens/configs/chartsConfig";
+
+const chartRef = ref(null);
+
+const option = {
+  backgroundColor: "transparent",
+
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "cross",
+      crossStyle: {
+        color: "#999",
+      },
+    },
+  },
+  legend: {
+    data: ["Evaporation", "Precipitation", "Temperature"],
+    ...chartLegend,
+  },
+  xAxis: [
+    {
+      type: "category",
+      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      name: "数量",
+      min: 0,
+      max: 250,
+      interval: 50,
+      axisLabel: {
+        formatter: "{value} 个",
+      },
+    },
+  ],
+  series: [
+    {
+      name: "Evaporation",
+      type: "bar",
+      tooltip: {
+        valueFormatter: function (value) {
+          return value + " ml";
+        },
+      },
+      data: [
+        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
+      ],
+    },
+    {
+      name: "Precipitation",
+      type: "bar",
+      tooltip: {
+        valueFormatter: function (value) {
+          return value + " ml";
+        },
+      },
+      data: [
+        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
+      ],
+    },
+    {
+      name: "Temperature",
+      type: "line",
+      tooltip: {
+        valueFormatter: function (value) {
+          return value + " °C";
+        },
+      },
+      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
+    },
+  ],
+};
+
+onMounted(() => {
+  const chart = echarts.init(chartRef.value, "dark");
+  chart.setOption(option);
+});
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,90 @@
+<template>
+  <div id="cpop" class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="当前生产订单进度" />
+    <div class="charts-container">
+      <el-table
+        :cell-style="{
+          textAlign: 'center',
+          background: '#2d3748',
+        }"
+        :data="tableData"
+        :header-cell-style="{
+          textAlign: 'center',
+          background: '#2d3748',
+          color: '#fff8',
+        }"
+        size="large"
+        style="width: 100%; height: 100%"
+      >
+        <el-table-column label="订单编号" prop="date" />
+        <el-table-column label="产品型号" prop="date" />
+        <el-table-column label="计划数量" prop="date" />
+        <el-table-column label="各班次实际生产数量">
+          <el-table-column label="8:00-12:00" prop="state" />
+          <el-table-column label="12:00-16:00" prop="city" />
+          <el-table-column label="16:00-20:00" prop="address" />
+        </el-table-column>
+        <el-table-column label="未完成数量" prop="date" />
+        <el-table-column label="完成进度" prop="date" />
+        <el-table-column label="状态" prop="date" />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+];
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.count-cell-common {
+  background-color: #2d3748;
+  color: #fff8;
+  text-align: center;
+}
+
+/* 使用深度选择器确保样式生效 或者设置row-class-name 也没有高亮效果 */
+//row-class-name="table-row"
+:deep(.table-row:hover) {
+  background-color: transparent; /* 取消悬浮高亮 */
+}
+
+:deep(
+    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
+  ) {
+  background-color: transparent !important;
+}
+
+:deep(.el-table) {
+  --el-table-border-color: transparent;
+  //--el-table-border: none;
+  --el-table-text-color: #bdbdbe;
+  //--el-table-header-text-color: #bdbdbe;
+  --el-table-row-hover-bg-color: transparent;
+  //--el-table-current-row-bg-color: transparent;
+  //--el-table-header-bg-color: #2d3748;
+  --el-table-bg-color: transparent;
+  //--el-table-tr-bg-color: #2d3748;
+  //--el-table-expanded-cell-bg-color: transparent;
+}
+</style>

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

@@ -0,0 +1,32 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="管理人员" />
+    <div class="charts-container"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+
+onMounted(() => {});
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<!--<style scoped>-->
+<!--/* 使用深度选择器确保样式生效 */-->
+<!--:deep(.table-row:hover) {-->
+<!--  background-color: transparent; /* 取消悬浮高亮 */-->
+<!--}-->
+
+<!--:deep(-->
+<!--    .el-table&#45;&#45;enable-row-hover .el-table__body tr:hover > td.el-table__cell-->
+<!--  ) {-->
+<!--  background-color: transparent !important;-->
+<!--}-->
+<!--</style>-->

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

@@ -0,0 +1,129 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="第n周生产订单完成情况" />
+    <div ref="chartRef" class="charts-container"></div>
+    <dv-decoration-2 style="width: 100%; height: 5px" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import * as echarts from "echarts";
+
+const chartRef = ref(null);
+
+var data = [220, 182, 191, 234, 290, 120, 65, 444];
+var barWidth = 20;
+var maxNum = 0;
+for (var i = 0; i < data.length; i++) {
+  if (data[i] > maxNum) {
+    maxNum = data[i];
+  }
+}
+
+const option = {
+  backgroundColor: "transparent",
+  // grid: {
+  //   top: "0%",
+  //   left: "0%",
+  //   right: "0%",
+  //   bottom: "0%",
+  // },
+
+  title: {
+    text: "百分比柱子",
+    show: false,
+  },
+  xAxis: {
+    show: false,
+  },
+  yAxis: {
+    data: data.map((item, index) => `data ${index}`),
+    splitLine: {
+      show: false,
+    },
+    axisLabel: {
+      textStyle: { fontSize: "80%", color: "#02afff" },
+    },
+    axisLine: {
+      show: false,
+    },
+    axisTick: false,
+  },
+  series: [
+    {
+      type: "bar",
+      barWidth: barWidth,
+      zlevel: 2,
+      data: data.map(function (item) {
+        return {
+          value: item,
+          maxNum: maxNum,
+        };
+      }),
+      label: {
+        show: true,
+        position: "inside",
+        // distance: 80,
+        align: "center",
+        formatter: function (params) {
+          // return params.data.realValue;
+          var percent =
+            Number((params.data.value / params.data.maxNum) * 100).toFixed(2) +
+            "%";
+          return percent;
+        },
+        color: "#fff",
+        fontSize: 12,
+      },
+      itemStyle: {
+        borderRadius: 10,
+        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+          { offset: 0, color: "#395CFE" },
+          { offset: 1, color: "#2EC7CF" },
+        ]),
+      },
+    },
+    {
+      type: "bar",
+      barWidth: barWidth,
+      barGap: "-100%",
+      data: data.map(function (item) {
+        return {
+          realValue: item,
+          value: maxNum,
+        };
+      }),
+      label: {
+        show: true,
+        position: "right",
+        distance: 80,
+        align: "right",
+        formatter: function (params) {
+          return params.data.realValue + " 件";
+        },
+        color: "#02afff",
+        fontSize: 18,
+      },
+      itemStyle: {
+        borderRadius: 10,
+        color: "rgba(3,169,244, 0.5)",
+      },
+    },
+  ],
+};
+
+onMounted(() => {
+  const chart = echarts.init(chartRef.value, "dark");
+  chart.setOption(option);
+});
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/screens/workScreen.vue

@@ -1,27 +1,27 @@
 <template>
   <div class="screen-window">
     <dv-full-screen-container id="dv-full-screen">
-      <ScreenHeader title="质量综合大屏" />
+      <ScreenHeader title="总装车间看板" />
       <div class="screen-content" style="flex-direction: column">
         <div class="top-container">
           <dv-border-box-8 class="top-container-box top-left">
-            <component :is="qualityTOP01" moduleId="qualityTOP01" />
+            <component :is="workTOP01" moduleId="workTOP01" />
           </dv-border-box-8>
           <dv-border-box-12 class="top-container-box top-middle">
-            <component :is="qualityTOP02" moduleId="qualityTOP02" />
+            <component :is="workTOP02" moduleId="workTOP02" />
           </dv-border-box-12>
           <div class="top-container-box top-right">
-            <component :is="qualityTOP03" moduleId="qualityTOP03" />
+            <component :is="workTOP03" moduleId="workTOP03" />
           </div>
         </div>
         <div class="vertical-space"></div>
         <div class="bottom-container">
-          <dv-border-box-13 class="bottom-container-box bottom-left">
-            <!--            <component :is="qualityBottom01" moduleId="qualityBottom01" />-->
-          </dv-border-box-13>
+          <div class="bottom-container-box bottom-left">
+            <component :is="workBottom01" moduleId="workBottom01" />
+          </div>
 
           <div class="bottom-container-box bottom-right">
-            <component :is="qualityBottom02" moduleId="qualityBottom02" />
+            <component :is="workBottom02" moduleId="workBottom02" />
           </div>
         </div>
       </div>
@@ -38,21 +38,21 @@ import ScreenHeader from "@/views/screens/headers/screenHeader.vue";
 
 const commonS = useCommonStore();
 
-const qualityTOP01 = computed(() => {
-  return getComponetnByName(commonS.qualityTOP01);
+const workTOP01 = computed(() => {
+  return getComponetnByName(commonS.workTOP01);
 });
-const qualityTOP02 = computed(() => {
-  return getComponetnByName(commonS.qualityTOP02);
+const workTOP02 = computed(() => {
+  return getComponetnByName(commonS.workTOP02);
 });
 
-const qualityTOP03 = computed(() => {
-  return getComponetnByName(commonS.qualityTOP03);
+const workTOP03 = computed(() => {
+  return getComponetnByName(commonS.workTOP03);
 });
-const qualityBottom01 = computed(() => {
-  return getComponetnByName(commonS.qualityBottom01);
+const workBottom01 = computed(() => {
+  return getComponetnByName(commonS.workBottom01);
 });
-const qualityBottom02 = computed(() => {
-  return getComponetnByName(commonS.qualityBottom02);
+const workBottom02 = computed(() => {
+  return getComponetnByName(commonS.workBottom02);
 });
 </script>
 
@@ -67,7 +67,8 @@ const qualityBottom02 = computed(() => {
   .top-container-box {
     height: 100%;
     //border: 1px solid yellow;
-    padding: 25px;
+    //padding: 25px;
+    padding: 8px;
   }
 
   .top-left {