综合管理大屏

src/api/screens/index.ts

@@ -122,3 +122,36 @@ export function top10UnqualifiedProduct() {
     method: "POST",
   });
 }
+
+// 班组出勤统计
+export function teamAttendance() {
+  return request({
+    url: `/data/attendance/statistics/list`, // 班组出勤统计
+    method: "get", // 请求方法
+  });
+}
+
+// 生产计划情况
+export function productionPlanList() {
+  return request({
+    url: `/data/production/plan/list`,
+    method: "get",
+  });
+}
+
+// 成品入库情况
+export function productStorageFinishedSituation() {
+  return request({
+    url: `/data/finishProductIn/list`,
+    method: "POST",
+    data: {},
+  });
+}
+
+// 微电子车间公告
+export function microelectronicWorkshopNotice() {
+  return request({
+    url: `/data/message/list`,
+    method: "get",
+  });
+}

src/store/modules/common.ts

@@ -20,6 +20,11 @@ export const useCommonStore = defineStore("commonStore", {
     mainS076: "DailyProductionS",
     mainS077: "ProductionSituation",
     mainS078: "EquipmentMonitoring",
+    mainLeftTop: "XiaFaGongDanJinDu",
+    BanZucqtj: "BanZuChuQinTongJi",
+    ShengChanJHQK: "ShengChanJiHuaQingKuang",
+    ChengPinRKQKJ: "ChengPinRuKuQingKuang",
+    WeiDianZCJGG: "WeiDianZiCheJianGongGao",
     // ====
     qualityTOP01: "DistributionOfUnqualifiedProducts",
     qualityTOP02: "ProductionPassThroughRate",

src/views/screens/configs/components.ts

@@ -16,6 +16,11 @@ import ChanLiangTongJi from "@/views/screens/screen-components/ChanLiangTongJi.v
 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";
+import XiaFaGongDanJinDu from "@/views/screens/screen-components/XiaFaGongDanJinDu.vue";
+import BanZuChuQinTongJi from "@/views/screens/screen-components/BanZuChuQinTongJi.vue";
+import ShengChanJiHuaQingKuang from "@/views/screens/screen-components/ShengChanJiHuaQingKuang.vue";
+import ChengPinRuKuQingKuang from "@/views/screens/screen-components/ChengPinRuKuQingKuang.vue";
+import WeiDianZiCheJianGongGao from "@/views/screens/screen-components/WeiDianZiCheJianGongGao.vue";
 
 export interface ScreenComponent {
   name: string;
@@ -139,6 +144,36 @@ export const componentsDicts: { [key: string]: ScreenComponent } = {
     key: "BadTop10",
     description: "This component shows the bad top 10.",
   },
+  XiaFaGongDanJinDu: {
+    name: "当月生产工单完成进度",
+    component: XiaFaGongDanJinDu,
+    key: "XiaFaGongDanJinDu",
+    description: "This component shows the progress of the dispatched bill.",
+  },
+  BanZuChuQinTongJi: {
+    name: "班组出勤统计",
+    component: BanZuChuQinTongJi,
+    key: "BanZuChuQinTongJi",
+    description: "This component shows the attendance statistics of the team.",
+  },
+  ShengChanJiHuaQingKuang: {
+    name: "生产计划情况",
+    component: ShengChanJiHuaQingKuang,
+    key: "ShengChanJiHuaQingKuang",
+    description: "This component shows the production plan situation.",
+  },
+  ChengPinRuKuQingKuang: {
+    name: "成品入库情况",
+    component: ChengPinRuKuQingKuang,
+    key: "ChengPinRuKuQingKuang",
+    description: "This component shows the incoming product situation.",
+  },
+  WeiDianZiCheJianGongGao: {
+    name: "微电子车间公告",
+    component: WeiDianZiCheJianGongGao,
+    key: "WeiDianZiCheJianGongGao",
+    description: "This component shows the monitoring of the assets.",
+  },
 };
 
 export const getComponetnByName = (name: string) => {

src/views/screens/mainScreen.vue

@@ -5,35 +5,30 @@
       <div class="screen-content">
         <dv-border-box-9 class="zhleft screen-common-box">
           <component
-            :is="mainSL001"
+            :is="ChengPinRKQKJ"
             moduleId="mainSL001"
             style="height: 32%; width: 100%"
           />
           <dv-decoration-2 style="height: 2%" />
           <component
-            :is="mainSL002"
-            moduleId="mainSL002"
+            :is="BanZucqtj"
+            moduleId="BanZucqtj"
             style="height: 32%; width: 100%"
           />
           <dv-decoration-2 style="height: 2%" />
           <component
-            :is="mainSL003"
-            moduleId="mainSL003"
+            :is="WeiDianZCJGG"
+            moduleId="WeiDianZCJGG"
             style="height: 32%; width: 100%"
           />
         </dv-border-box-9>
         <div class="spsace"></div>
         <div class="zhright">
-          <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 class="progress-bar">
+            <component :is="mainLeftTop" moduleId="mainLeftTop" />
           </div>
           <div class="vertical-space"></div>
-          <div class="column-item" style="justify-content: start">
+          <div class="column-item-middle" style="justify-content: start">
             <div
               style="
                 width: 80%;
@@ -44,7 +39,7 @@
               "
             >
               <component
-                :is="mainS076"
+                :is="ShengChanJHQK"
                 moduleId="mainS076"
                 style="
                   position: absolute;
@@ -57,17 +52,17 @@
             </div>
           </div>
           <div class="vertical-space"></div>
-          <div class="column-item">
-            <dv-border-box-12 class="item-left screen-common-box">
+          <div class="column-item-bottom">
+            <dv-border-box-12 class="screen-common-box">
               <component :is="mainS077" moduleId="mainS077" />
             </dv-border-box-12>
-            <dv-border-box-4
-              :color="['red', 'green']"
-              :reverse="true"
-              class="item-right screen-common-box"
-            >
-              <component :is="mainS078" moduleId="mainS078" />
-            </dv-border-box-4>
+            <!--            <dv-border-box-4-->
+            <!--              :color="['red', 'green']"-->
+            <!--              :reverse="true"-->
+            <!--              class="item-right screen-common-box"-->
+            <!--            >-->
+            <!--              <component :is="mainS078" moduleId="mainS078" />-->
+            <!--            </dv-border-box-4>-->
           </div>
         </div>
       </div>
@@ -87,33 +82,35 @@ const commonS = useCommonStore();
 const mainSL001 = computed(() => {
   return getComponetnByName(commonS.mainSL001);
 });
-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);
-});
 const mainS077 = computed(() => {
   return getComponetnByName(commonS.mainS077);
 });
-const mainS078 = computed(() => {
-  return getComponetnByName(commonS.mainS078);
+
+const mainLeftTop = computed(() => {
+  return getComponetnByName(commonS.mainLeftTop);
+});
+const BanZucqtj = computed(() => {
+  return getComponetnByName(commonS.BanZucqtj);
+});
+const ShengChanJHQK = computed(() => {
+  return getComponetnByName(commonS.ShengChanJHQK);
+});
+const ChengPinRKQKJ = computed(() => {
+  return getComponetnByName(commonS.ChengPinRKQKJ);
+});
+const WeiDianZCJGG = computed(() => {
+  return getComponetnByName(commonS.WeiDianZCJGG);
 });
 </script>
 
 <style lang="scss" scoped>
 .zhleft {
-  width: 550px;
+  width: 750px;
   height: 100%;
 }
 
@@ -131,9 +128,24 @@ const mainS078 = computed(() => {
     height: 2%;
   }
 
-  .column-item {
+  .progress-bar {
+    height: 100px;
+  }
+
+  .column-item-middle {
+    //flex: 1;
+    height: 60%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+
+    //height: 100%;
+    //border: 2px solid white;
+  }
+  .column-item-bottom {
     //flex: 1;
-    height: 32%;
+    height: 40%;
     display: flex;
     justify-content: center;
     align-items: center;

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="班组出勤统计" />
+    <dv-scroll-board
+      :config="config"
+      style="width: 100%; height: calc(100% - 32px)"
+      @mouseover="tableHover"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import { productionPlan, teamAttendance } from "@/api/screens";
+
+const config = ref({});
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+const bigScreenData: any = inject("bigScreenData");
+onMounted(async () => {
+  let res = await teamAttendance();
+  if (res.data.length > 0) {
+    let dicts = {
+      deptName: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>班组名称</span>`,
+      deptNum: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>班组人数</span>`,
+      answerNum: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>应出勤人数</span>`,
+      practicalNum: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>实际出勤人数</span>`,
+      attendanceRate: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>出勤率</span>`,
+    };
+
+    let bigData: any[] = [];
+    res.data.forEach((item: any) => {
+      let row = [
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.deptName}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.deptNum}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.answerNum}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.practicalNum}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.attendanceRate}</span>`,
+      ];
+      bigData.push(row);
+    });
+
+    config.value = {
+      header: Object.values(dicts),
+      data: bigData,
+      // index: true,
+      // columnWidth: [50],
+      align: ["left"],
+      carousel: "page",
+      click: (row: any, index: number) => {
+        console.log("mouseover", row, index);
+      },
+    };
+  }
+});
+
+const tableHover = (data: any) => {
+  // console.log("mouseover", data.row[data.columnIndex]);
+};
+</script>

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="成品入库情况" />
+    <dv-scroll-board
+      :config="config"
+      style="width: 100%; height: calc(100% - 32px)"
+      @mouseover="tableHover"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import { productionPlan, productStorageFinishedSituation } from "@/api/screens";
+
+const config = ref({});
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+const bigScreenData: any = inject("bigScreenData");
+onMounted(async () => {
+  let res = await productStorageFinishedSituation();
+  if (res.data.length > 0) {
+    let dicts = {
+      workOrderCode: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>批号</span>`,
+      materialModel: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>产品型号</span>`,
+      planNum: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>数量</span>`,
+      inventoryNum: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>入库数</span>`,
+    };
+
+    let bigData: any[] = [];
+    res.data.forEach((item: any) => {
+      let row = [
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.workOrderCode}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.materialModel}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.planNum}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.inventoryNum}</span>`,
+      ];
+      bigData.push(row);
+    });
+
+    config.value = {
+      header: Object.values(dicts),
+      data: bigData,
+      // index: true,
+      // columnWidth: [50],
+      align: ["left"],
+      carousel: "page",
+      click: (row: any, index: number) => {
+        console.log("mouseover", row, index);
+      },
+    };
+  }
+});
+
+const tableHover = (data: any) => {
+  // console.log("mouseover", data.row[data.columnIndex]);
+};
+</script>

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

@@ -54,6 +54,7 @@ onMounted(async () => {
       header: Object.values(dicts),
       data: bigData,
       index: true,
+      rowNum: 10,
       // columnWidth: [50],
       align: ["left"],
       carousel: "page",

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" align="start" title="生产计划情况" />
+    <dv-scroll-board
+      :config="config"
+      style="width: 100%; height: calc(100% - 32px)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import { productionPlan, productionPlanList } from "@/api/screens";
+import { useDictionaryStore } from "@/store";
+const bigScreenData: any = inject("bigScreenData");
+const config = ref({});
+const dictS = productionPlanList();
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+
+onMounted(async () => {
+  let res = await productionPlan();
+  if (res.data.length > 0) {
+    let dicts = {
+      workOrderCode: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>生产批号</span>`,
+      materialName: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>物料名称</span>`,
+      materialCode: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>物料编号</span>`,
+      operationName: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>工序名称</span>`,
+      stationName: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>工位名称</span>`,
+    };
+
+    let bigData: any[] = [];
+    res.data.forEach((item: any) => {
+      let row = [
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.workOrderCode}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.materialName}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.materialCode}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.operationName}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.stationName}</span>`,
+      ];
+      bigData.push(row);
+    });
+
+    config.value = {
+      header: Object.values(dicts),
+      data: bigData,
+      index: true,
+      rowNum: 10,
+      columnWidth: [50],
+      align: ["left"],
+      carousel: "page",
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(.ceil) {
+  .index {
+    background-color: red;
+  }
+}
+</style>

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

@@ -0,0 +1,80 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="微电子车间公告" />
+    <dv-scroll-board
+      :config="config"
+      style="width: 100%; height: calc(100% - 32px)"
+      @mouseover="tableHover"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import {
+  microelectronicWorkshopNotice,
+  productionPlan,
+  teamAttendance,
+} from "@/api/screens";
+
+const config = ref({});
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+const bigScreenData: any = inject("bigScreenData");
+onMounted(async () => {
+  let res = await microelectronicWorkshopNotice();
+  res.data = [
+    {
+      title: "微电子车间公告",
+      content: "多发点附近大方好 粉随爱豆阿飞是啊都非常啊说的非常是啊都非常",
+      updateTime: "2022-03-10 10:00:00",
+    },
+  ];
+  if (res.data.length > 0) {
+    let bigData: any[] = [];
+    res.data.forEach((item: any) => {
+      let row = [
+        `<div  style='font-size:${bigScreenData.value.fontSize * 2}px;width: 100%;height: 100%;border: 1px solid red;'>
+            <div style="display: flex;align-items: center;justify-content: space-between;height: 60px">
+                <span >${item.title}</span>
+                <span >${item.updateTime}</span>
+            </div>
+            <div style="display: flex;align-items: start;justify-content: start;border: 2px solid orange;width: 100%;height: 100%;overflow: hidden">
+                <div style="border: 1px solid deeppink">${item.content}</div>
+            </div>
+        </div>`,
+      ];
+      bigData.push(row);
+    });
+
+    config.value = {
+      data: bigData,
+      rowNum: 1,
+      // index: true,
+      // columnWidth: [50],
+      align: ["left"],
+      carousel: "page",
+      click: (row: any, index: number) => {
+        console.log("mouseover", row, index);
+      },
+    };
+  }
+});
+
+const tableHover = (data: any) => {
+  // console.log("mouseover", data.row[data.columnIndex]);
+};
+</script>
+
+<style lang="scss" scoped>
+.message-row {
+  width: 100%;
+  height: 60px;
+  border: 1px solid red;
+}
+</style>

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

@@ -0,0 +1,111 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader
+      :module-id="moduleId"
+      align="start"
+      title="当月生产工单完成进度"
+    />
+    <div class="bottom-progress">
+      <!--      <div-->
+      <!--        class="titleText"-->
+      <!--        :style="{ fontSize: bigScreenData.fontSize * 1.9 + 'px' }"-->
+      <!--      >-->
+      <!--        月进度-->
+      <!--      </div>-->
+      <dv-percent-pond
+        :config="progressOption"
+        style="width: 100%; height: 30px"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import * as echarts from "echarts";
+import { productionQuantity } from "@/api/screens";
+const bigScreenData: any = inject("bigScreenData");
+
+const progressOption = ref({
+  value: 66,
+  localGradient: true,
+  orderNum: 0,
+  comNum: 0,
+});
+
+onMounted(async () => {
+  let res: any = await productionQuantity();
+  let { data } = res;
+
+  progressOption.value = {
+    value: Number(data.rate) * 100,
+    localGradient: true,
+    orderNum: Number(data.orderNum),
+    comNum: Number(data.completeNum),
+  };
+});
+
+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: 50px;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  padding-top: 15px;
+  width: 100%;
+
+  .titleText {
+    color: white;
+
+    width: 80px;
+    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>