1.综合大屏产品生产情况，物料情况，生产计划完成情况，订单信息等数据展示。

src/store/modules/common.ts

@@ -12,6 +12,9 @@ export const useCommonStore = defineStore("commonStore", {
     tableType: 1,
     tableTitle: "",
     //   大屏显示的组件key值，包含默认值
+    mainSL001: "OrderInformation",
+    mainSL002: "MaterialsCondition",
+    mainS076: "DailyProductionS",
     mainS077: "EquipmentMonitoring",
     mainS078: "ProductionSituation",
     moduleKey: "mainS078", // 用于判断修改了哪个模块

src/styles/index.scss

@@ -107,6 +107,7 @@
   width: 100%;
   height: 100%;
   //background-color: #00a680;
+  //border: 2px solid red;
 }
 
 .screen-common-component-header {

src/views/screens/configs/chartsConfig.ts

@@ -24,3 +24,11 @@ export const allChartColors = [
   "#607D8B",
   "#009688",
 ];
+
+export const chartLegend = {
+  top: "5%",
+  left: "center",
+  textStyle: {
+    color: "#fff",
+  },
+};

src/views/screens/configs/components.ts

@@ -1,5 +1,8 @@
 import EquipmentMonitoring from "@/views/screens/screen-components/EquipmentMonitoring.vue";
 import ProductionSituation from "@/views/screens/screen-components/ProductionSituation.vue";
+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";
 
 export interface ScreenComponent {
   name: string;
@@ -8,6 +11,7 @@ export interface ScreenComponent {
   description: string;
 }
 
+// 每添加一个组件，都需要在这里添加一个键值对
 export const componentsDicts: { [key: string]: ScreenComponent } = {
   // Add your components here
   EquipmentMonitoring: {
@@ -24,6 +28,24 @@ export const componentsDicts: { [key: string]: ScreenComponent } = {
     description:
       "This component shows the production situation of the company.",
   },
+  DailyProductionS: {
+    name: "生产计划完成情况",
+    component: CompletionProductionPlan,
+    key: "DailyProductionS",
+    description: " This component shows the daily production statistics.",
+  },
+  OrderInformation: {
+    name: "订单信息",
+    component: OrderInformation,
+    key: "OrderInformation",
+    description: "This component shows the order information.",
+  },
+  MaterialsCondition: {
+    name: "物料情况",
+    component: MaterialsCondition,
+    key: "MaterialsCondition",
+    description: "This component shows the materials condition.",
+  },
 };
 
 export const getComponetnByName = (name: string) => {

src/views/screens/mainScreen.vue

@@ -4,12 +4,30 @@
       <ScreenHeader title="综合监控大屏" />
       <div class="screen-content">
         <dv-border-box-9 class="zhleft screen-common-box">
-          dv-border-box-9
+          <component
+            :is="mainSL001"
+            moduleId="mainSL001"
+            style="height: 34%; width: 100%"
+          />
+          <dv-decoration-2 style="height: 10px" />
+          <component
+            :is="mainSL002"
+            moduleId="mainSL002"
+            style="height: 33%; width: 100%"
+          />
+          <dv-decoration-2 style="height: 10px" />
+          <component
+            :is="mainSL002"
+            moduleId="mainSL002"
+            style="height: 33%; 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>
+          <div class="middle column-item">
+            <component :is="mainS076" moduleId="mainS076" />
+          </div>
           <div class="bottom column-item">
             <dv-border-box-12 class="item-left screen-common-box">
               <component :is="mainS077" moduleId="mainS077" />
@@ -37,6 +55,15 @@ import { useCommonStore } from "@/store";
 
 const commonS = useCommonStore();
 
+const mainSL001 = computed(() => {
+  return getComponetnByName(commonS.mainSL001);
+});
+const mainSL002 = computed(() => {
+  return getComponetnByName(commonS.mainSL002);
+});
+const mainS076 = computed(() => {
+  return getComponetnByName(commonS.mainS076);
+});
 const mainS077 = computed(() => {
   return getComponetnByName(commonS.mainS077);
 });

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="生产计划完成情况" />
+    <dv-scroll-board :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 = {
+    header: ["列1", "列2", "列3"],
+    data: [
+      ["行1列1", "行1列2", "行1列3"],
+      ["行2列1", "行2列2", "行2列3"],
+      ["行3列1", "行3列2", "行3列3"],
+      ["行4列1", "行4列2", "行4列3"],
+      ["行5列1", "行5列2", "行5列3"],
+      ["行6列1", "行6列2", "行6列3"],
+      ["行7列1", "行7列2", "行7列3"],
+      ["行8列1", "行8列2", "行8列3"],
+      ["行9列1", "行9列2", "行9列3"],
+      ["行10列1", "行10列2", "行10列3"],
+    ],
+    index: true,
+    columnWidth: [50],
+    align: ["center"],
+    carousel: "page",
+  };
+});
+</script>

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

@@ -8,7 +8,10 @@
 <script lang="ts" setup>
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
-import { allChartColors } from "@/views/screens/configs/chartsConfig";
+import {
+  allChartColors,
+  chartLegend,
+} from "@/views/screens/configs/chartsConfig";
 
 const props = defineProps({
   moduleId: {
@@ -24,13 +27,7 @@ const options = {
   tooltip: {
     trigger: "item",
   },
-  legend: {
-    top: "5%",
-    left: "center",
-    textStyle: {
-      color: "#fff",
-    },
-  },
+  legend: chartLegend,
   series: [
     {
       name: "设备监控",

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

@@ -0,0 +1,46 @@
+<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: "南阳",
+        value: 167,
+      },
+      {
+        name: "周口",
+        value: 67,
+      },
+      {
+        name: "漯河",
+        value: 123,
+      },
+      {
+        name: "郑州",
+        value: 55,
+      },
+      {
+        name: "西峡",
+        value: 98,
+      },
+    ],
+  };
+});
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="订单信息" />
+    <dv-scroll-board
+      :config="config"
+      style="width: 100%; height: calc(100% - 30px)"
+    />
+  </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 = {
+    header: ["订单编号", "产品名称", "数量", "单位", "交期时间"],
+    data: [
+      ["行1列1", "行1列2", "行1列3", "行1列2", "行1列3"],
+      ["行2列1", "行2列2", "行2列3"],
+      ["行3列1", "行3列2", "行3列3"],
+      ["行4列1", "行4列2", "行4列3"],
+      ["行5列1", "行5列2", "行5列3"],
+      ["行6列1", "行6列2", "行6列3"],
+      ["行7列1", "行7列2", "行7列3"],
+      ["行8列1", "行8列2", "行8列3"],
+      ["行9列1", "行9列2", "行9列3"],
+      ["行10列1", "行10列2", "行10列3"],
+    ],
+    index: false,
+    // columnWidth: [50],
+    align: ["left"],
+    carousel: "page",
+  };
+});
+</script>

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

@@ -1,14 +1,44 @@
 <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 { useCommonStore } from "@/store";
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import * as echarts from "echarts";
+import { chartLegend } from "@/views/screens/configs/chartsConfig";
 
-const commonS = useCommonStore();
+const chartRef = ref(null);
+
+const option = {
+  legend: chartLegend,
+  tooltip: {},
+  dataset: {
+    dimensions: ["product", "2015", "2016", "2017"],
+    source: [
+      { product: "Matcha Latte", 2015: 43.3, 2016: 85.8, 2017: 93.7 },
+      { product: "Milk Tea", 2015: 83.1, 2016: 73.4, 2017: 55.1 },
+      { product: "Cheese Cocoa", 2015: 86.4, 2016: 65.2, 2017: 82.5 },
+      { product: "Walnut Brownie", 2015: 72.4, 2016: 53.9, 2017: 39.1 },
+    ],
+  },
+  xAxis: { type: "category" },
+  yAxis: {
+    // axisLine: { show: false },
+    // axisTick: { show: false },
+    splitLine: { show: false },
+  },
+  // Declare several bar series, each will be mapped
+  // to a column of dataset.source by default.
+  series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
+};
+
+onMounted(() => {
+  const chart = echarts.init(chartRef.value);
+  chart.setOption(option);
+});
 
 const props = defineProps({
   moduleId: {
@@ -16,11 +46,6 @@ const props = defineProps({
     required: true,
   },
 });
-
-const selectComponents = () => {
-  commonS.isShowSelectModule = true;
-  commonS.moduleKey = props.moduleId;
-};
 </script>
 
 <style lang="scss" scoped></style>