1.综合大屏布局修改，完成生产任务统计模块，产品生产模块，关重件生产进度模块。

src/store/modules/common.ts

@@ -14,6 +14,9 @@ export const useCommonStore = defineStore("commonStore", {
     //   大屏显示的组件key值，包含默认值
     mainSL001: "OrderInformation",
     mainSL002: "MaterialsCondition",
+    mainSL003: "ProductionScheduleOfHeavyParts",
+    mainSRT12: "ProductionTaskStatistics",
+    mainSRT13: "ProductionCapacitySituation",
     mainS076: "DailyProductionS",
     mainS077: "EquipmentMonitoring",
     mainS078: "ProductionSituation",

src/views/screens/configs/components.ts

@@ -3,6 +3,9 @@ import ProductionSituation from "@/views/screens/screen-components/ProductionSit
 import CompletionProductionPlan from "@/views/screens/screen-components/CompletionProductionPlan.vue";
 import OrderInformation from "@/views/screens/screen-components/OrderInformation.vue";
 import MaterialsCondition from "@/views/screens/screen-components/MaterialsCondition.vue";
+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";
 
 export interface ScreenComponent {
   name: string;
@@ -22,7 +25,7 @@ export const componentsDicts: { [key: string]: ScreenComponent } = {
       "This component shows the status of the equipment in real-time.",
   },
   ProductionSituation: {
-    name: "生产量情况",
+    name: "每日产量统计",
     component: ProductionSituation,
     key: "ProductionSituation",
     description:
@@ -46,6 +49,24 @@ export const componentsDicts: { [key: string]: ScreenComponent } = {
     key: "MaterialsCondition",
     description: "This component shows the materials condition.",
   },
+  ProductionScheduleOfHeavyParts: {
+    name: "关重件生产进度",
+    component: ProductionScheduleOfHeavyParts,
+    key: "ProductionScheduleOfHeavyParts",
+    description: "This component shows the production schedule of heavy parts.",
+  },
+  ProductionTaskStatistics: {
+    name: "生产任务统计",
+    component: ProductionTaskStatistics,
+    key: "ProductionTaskStatistics",
+    description: "This component shows the production task statistics.",
+  },
+  ProductionCapacitySituation: {
+    name: "生产量情况",
+    component: ProductionCapacitySituation,
+    key: "ProductionCapacitySituation",
+    description: "This component shows the production capacity situation.",
+  },
 };
 
 export const getComponetnByName = (name: string) => {

src/views/screens/configs/screenComHeader.vue

@@ -38,8 +38,8 @@ const selectComponents = () => {
 .screen-common-component-header {
   width: 100%;
   display: flex;
-  justify-content: center;
-  align-items: v-bind(align);
+  justify-content: v-bind(align);
+  align-items: center;
   font-size: v-bind(titleSize);
   color: #fff;
 }

src/views/screens/mainScreen.vue

@@ -7,28 +7,37 @@
           <component
             :is="mainSL001"
             moduleId="mainSL001"
-            style="height: 34%; width: 100%"
+            style="height: 32%; width: 100%"
           />
-          <dv-decoration-2 style="height: 10px" />
+          <dv-decoration-2 style="height: 2%" />
           <component
             :is="mainSL002"
             moduleId="mainSL002"
-            style="height: 33%; width: 100%"
+            style="height: 32%; width: 100%"
           />
-          <dv-decoration-2 style="height: 10px" />
+          <dv-decoration-2 style="height: 2%" />
           <component
-            :is="mainSL002"
-            moduleId="mainSL002"
-            style="height: 33%; width: 100%"
+            :is="mainSL003"
+            moduleId="mainSL003"
+            style="height: 32%; width: 100%"
           />
         </dv-border-box-9>
         <div class="spsace"></div>
         <div class="zhright">
-          <div class="top column-item">dddd</div>
-          <div class="middle column-item">
+          <div class="column-item">
+            <div class="item-left">
+              <component :is="mainSRT12" moduleId="mainSRT12" />
+            </div>
+            <div class="item-right">
+              <component :is="mainSRT13" moduleId="mainSRT13" />
+            </div>
+          </div>
+          <div class="vertical-space"></div>
+          <div class="column-item">
             <component :is="mainS076" moduleId="mainS076" />
           </div>
-          <div class="bottom column-item">
+          <div class="vertical-space"></div>
+          <div class="column-item">
             <dv-border-box-12 class="item-left screen-common-box">
               <component :is="mainS077" moduleId="mainS077" />
             </dv-border-box-12>
@@ -61,6 +70,16 @@ const mainSL001 = computed(() => {
 const mainSL002 = computed(() => {
   return getComponetnByName(commonS.mainSL002);
 });
+const mainSL003 = computed(() => {
+  return getComponetnByName(commonS.mainSL003);
+});
+const mainSRT12 = computed(() => {
+  return getComponetnByName(commonS.mainSRT12);
+});
+const mainSRT13 = computed(() => {
+  return getComponetnByName(commonS.mainSRT13);
+});
+
 const mainS076 = computed(() => {
   return getComponetnByName(commonS.mainS076);
 });
@@ -74,7 +93,7 @@ const mainS078 = computed(() => {
 
 <style lang="scss" scoped>
 .zhleft {
-  width: 500px;
+  width: 550px;
   height: calc(100% - 120px);
 }
 
@@ -88,12 +107,17 @@ const mainS078 = computed(() => {
   display: flex;
   flex-direction: column;
 
+  .vertical-space {
+    height: 2%;
+  }
+
   .column-item {
-    flex: 1;
+    //flex: 1;
+    height: 32%;
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100%;
+    //height: 100%;
   }
 
   .item-left {

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

@@ -1,7 +1,14 @@
 <template>
   <div class="screen-common-component">
-    <ScreenComHeader :module-id="moduleId" title="生产计划完成情况" />
-    <dv-scroll-board :config="config" class="charts-container" />
+    <ScreenComHeader
+      :module-id="moduleId"
+      align="start"
+      title="生产计划完成情况"
+    />
+    <dv-scroll-board
+      :config="config"
+      style="width: 100%; height: calc(100% - 32px)"
+    />
   </div>
 </template>
 

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

@@ -3,7 +3,7 @@
     <ScreenComHeader :module-id="moduleId" title="订单信息" />
     <dv-scroll-board
       :config="config"
-      style="width: 100%; height: calc(100% - 30px)"
+      style="width: 100%; height: calc(100% - 32px)"
     />
   </div>
 </template>

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

@@ -0,0 +1,164 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" align="start" title="产品生产情况" />
+    <div class="container">
+      <div ref="chartRef" class="charts-container"></div>
+      <div class="describe-container">
+        <div>
+          <span class="typeText">生产目标</span>
+          <span class="valueText">70</span>
+          <span class="unitText">件</span>
+        </div>
+        <div>
+          <span class="typeText">实际生产量</span>
+          <span class="valueText">80</span>
+          <span class="unitText">件</span>
+        </div>
+      </div>
+    </div>
+    <div class="bottom-progress">
+      <div class="titleText">月进度</div>
+      <dv-percent-pond
+        :config="progressOption"
+        style="width: 100%; height: 20px"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import * as echarts from "echarts";
+
+const chartRef = ref(null);
+
+const option = {
+  series: [
+    {
+      type: "gauge",
+      progress: {
+        show: true,
+        width: 12,
+      },
+      axisLine: {
+        lineStyle: {
+          width: 12,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        distance: 2,
+        length: 4,
+        lineStyle: {
+          width: 2,
+          color: "#999",
+        },
+      },
+      axisLabel: {
+        distance: 12,
+        color: "#999",
+        fontSize: 14,
+      },
+      anchor: {
+        show: true,
+        showAbove: true,
+        size: 16,
+        itemStyle: {
+          borderWidth: 10,
+        },
+      },
+      title: {
+        show: false,
+      },
+      detail: {
+        valueAnimation: true,
+        fontSize: 16,
+        offsetCenter: [0, "70%"],
+        formatter: "{value}%",
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      data: [
+        {
+          value: 70,
+        },
+      ],
+    },
+  ],
+};
+
+const progressOption = ref({
+  value: 66,
+  localGradient: true,
+});
+
+onMounted(() => {
+  const chart = echarts.init(chartRef.value);
+  chart.setOption(option);
+});
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100% - 60px);
+  //border: 1px solid red;
+}
+
+.bottom-progress {
+  height: 30px;
+  display: flex;
+  padding: 0 20px;
+  width: calc(100% - 60px);
+
+  .titleText {
+    color: white;
+    font-size: 14px;
+    width: 60px;
+    margin-right: 10px;
+  }
+}
+
+.charts-container {
+  width: 60%;
+  height: 100%;
+  //border: 1px solid blue;
+}
+
+.describe-container {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+  width: 40%;
+}
+
+.typeText {
+  font-size: 14px;
+  color: #009688;
+}
+
+.valueText {
+  font-size: 16px;
+  color: #4caf50;
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+.unitText {
+  font-size: 12px;
+  color: #009688;
+}
+</style>

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="关重件生产进度" />
+    <dv-capsule-chart :config="config" class="charts-container" />
+  </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 = {
+    data: [
+      {
+        name: "关重件1",
+        value: 167,
+      },
+      {
+        name: "关重件2",
+        value: 67,
+      },
+      {
+        name: "关重件3",
+        value: 123,
+      },
+    ],
+  };
+});
+</script>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="screen-common-component">
-    <ScreenComHeader :module-id="moduleId" title="产品生产情况" />
+    <ScreenComHeader :module-id="moduleId" title="每日产量统计" />
     <div ref="chartRef" class="charts-container"></div>
   </div>
 </template>
@@ -13,6 +13,7 @@ import { chartLegend } from "@/views/screens/configs/chartsConfig";
 const chartRef = ref(null);
 
 const option = {
+  backgroundColor: "transparent",
   legend: chartLegend,
   tooltip: {},
   dataset: {
@@ -36,7 +37,7 @@ const option = {
 };
 
 onMounted(() => {
-  const chart = echarts.init(chartRef.value);
+  const chart = echarts.init(chartRef.value, "dark");
   chart.setOption(option);
 });
 

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

@@ -0,0 +1,118 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" align="start" title="生产任务统计" />
+    <div class="container">
+      <div ref="chartLeftRef" class="item"></div>
+      <dv-decoration-2 :reverse="true" style="width: 5px; height: 100%" />
+      <div ref="chartMiddleRef" class="item"></div>
+      <dv-decoration-2 :reverse="true" style="width: 5px; height: 100%" />
+      <div ref="chartRightRef" class="item"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import * as echarts from "echarts";
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+
+const chartLeftRef = ref(null);
+const chartMiddleRef = ref(null);
+const chartRightRef = ref(null);
+
+onMounted(() => {
+  const chartl = echarts.init(chartLeftRef.value, "dark");
+  const chartm = echarts.init(chartMiddleRef.value, "dark");
+  const chartr = echarts.init(chartRightRef.value, "dark");
+
+  chartl.setOption(gernerateOptionsWithData([40, 4], "1000", "件"));
+  chartm.setOption(
+    gernerateOptionsWithData([40, 50], "1000", "件", "实际生产数")
+  );
+  chartr.setOption(gernerateOptionsWithData([40, 50], "57", "%", "合格率"));
+});
+
+const gernerateOptionsWithData = (
+  data: number[],
+  centerText: string,
+  unitText: string,
+  titleText: string = "订单需求数"
+) => {
+  const option = {
+    color: ["#2196F3", "#fff"],
+    backgroundColor: "transparent",
+    title: {
+      text: titleText,
+      left: "center",
+      bottom: "20",
+      textStyle: {
+        fontSize: 14,
+      },
+    },
+
+    legend: {
+      show: false,
+    },
+    series: [
+      {
+        name: "订单需求数",
+        type: "pie",
+        radius: ["40%", "60%"],
+        center: ["50%", "50%"],
+        data: data,
+        label: {
+          show: false,
+          position: "center",
+        },
+      },
+    ],
+    graphic: [
+      {
+        type: "text",
+        left: "center",
+        top: "45%",
+        style: {
+          text: centerText,
+          textAlign: "center",
+          fill: "#00BCD4", // 数值颜色
+          fontSize: 20, // 数值大小
+        },
+      },
+      {
+        type: "text",
+        left: "center",
+        top: "52%",
+        style: {
+          text: unitText,
+          textAlign: "center",
+          fill: "#607D8B", // 单位颜色
+          fontSize: 14, // 单位大小
+        },
+      },
+    ],
+  };
+  return option;
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: calc(100% - 20px);
+}
+
+.item {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+</style>