1.新增剔除详情组件

2.质量大屏页面调整

src/api/screens/index.ts

@@ -36,6 +36,14 @@ export function unqualifiedProduct(type: number) {
   });
 }
 
+// 剔除详情
+export function unqualifiedProductDetail(type: number) {
+  return request({
+    url: `/data/badProdtDetails/${type}`,
+    method: "get",
+  });
+}
+
 //缺陷分布图
 export function defectDistribution() {
   return request({

src/store/modules/common.ts

@@ -29,8 +29,10 @@ export const useCommonStore = defineStore("commonStore", {
     qualityTOP01: "InspectionTaskOfToday",
     qualityTOP02: "ProductionPassThroughRate",
     qualityTOP03: "QualityAnomaly",
-    qualityBottom01: "DistributionOfUnqualifiedProducts",
-    qualityBottom02: "DefectDistributionDiagram",
+    qualityBottom01: "DistributionOfUnqualifiedProductsMsg",
+    // qualityBottom02: "DefectDistributionDiagram",
+    qualityBottom02: "QualityAnomaly",
+
     // ====
     workTOP01: "ManagementPersons",
     workTOP02: "ChanLiangTongJi",

src/views/screens/configs/components.ts

@@ -21,6 +21,7 @@ import BanZuChuQinTongJi from "@/views/screens/screen-components/BanZuChuQinTong
 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";
+import DistributionOfUnqualifiedProductsMsg from "@/views/screens/screen-components/DistributionOfUnqualifiedProductsMsg.vue";
 
 export interface ScreenComponent {
   name: string;
@@ -89,6 +90,13 @@ export const componentsDicts: { [key: string]: ScreenComponent } = {
     description:
       "This component shows the distribution of unqualified products.",
   },
+  DistributionOfUnqualifiedProductsMsg: {
+    name: "不合格产品分布详情",
+    component: DistributionOfUnqualifiedProductsMsg,
+    key: "DistributionOfUnqualifiedProductsMsg",
+    description:
+      "This component shows the distribution of unqualified products.",
+  },
   QualityAnomaly: {
     name: "质量异常",
     component: QualityAnomaly,

src/views/screens/qualityScreen.vue

@@ -16,11 +16,10 @@
         </div>
         <div class="vertical-space"></div>
         <div class="bottom-container">
-          <dv-border-box-8 class="bottom-container-box bottom-left">
+          <dv-border-box-8 class="bottom-container-box bottom-right">
             <component :is="qualityBottom01" moduleId="qualityBottom01" />
           </dv-border-box-8>
-
-          <div class="bottom-container-box bottom-right">
+          <div class="bottom-container-box bottom-left">
             <component :is="qualityBottom02" moduleId="qualityBottom02" />
           </div>
         </div>
@@ -71,7 +70,7 @@ const qualityBottom02 = computed(() => {
   }
 
   .top-left {
-    width: 73%;
+    width: 65%;
   }
 
   // .top-middle {
@@ -79,7 +78,7 @@ const qualityBottom02 = computed(() => {
   // }
 
   .top-right {
-    width: 27%;
+    width: 35%;
   }
 }
 
@@ -102,11 +101,11 @@ const qualityBottom02 = computed(() => {
   }
 
   .bottom-left {
-    width: 50%;
+    width: 35%;
   }
 
   .bottom-right {
-    width: 50%;
+    width: 65%;
   }
 }
 </style>

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

@@ -0,0 +1,129 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="剔除列表" />
+    <ShowScroll
+      ref="ShowScrollRef1"
+      :scrollRef="scrollbarRef1"
+      :innerRef="innerRef1"
+      class="message-container"
+    >
+      <el-scrollbar ref="scrollbarRef1" class="message-scroll">
+        <div ref="innerRef1" class="message-scroll">
+          <div
+            class="message-row"
+            v-for="(item, index) in taskRateArray"
+            :key="index"
+          >
+            <div class="message-title">
+              <span v-text="'批号:' + item.workOrderCode"></span>
+              <span v-text="'型号:' + item.materialModel"></span>
+              <span v-text="item.stage"></span>
+              <span v-text="item.updated"></span>
+            </div>
+            <div v-html="'管号:' + item.seqNo"></div>
+            <div
+              id="m-g-g-content-box"
+              v-html="'问题描述:\t' + JSON.parse(item.remark1).content"
+            ></div>
+          </div>
+        </div>
+      </el-scrollbar>
+    </ShowScroll>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import { unqualifiedProductDetail } from "@/api/screens";
+
+const config = ref({});
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+const bigScreenData: any = inject("bigScreenData");
+const bsFS = bigScreenData.value.fontSize * 2;
+const bsFSLH = bigScreenData.value.fontSize * 2 + 5 + "px";
+
+const taskRateArray = ref<any[]>([]);
+const loadData = async () => {
+  let res = await unqualifiedProductDetail(5);
+  taskRateArray.value = res.data;
+
+  nextTick(() => {
+    ShowScrollRef1.value.setActive(3);
+  });
+};
+onMounted(async () => {
+  loadData();
+  const timer = setInterval(loadData, 60 * 5 * 1000); // 60秒 = 60000毫秒
+  // 组件卸载时清除定时器
+  onUnmounted(() => clearInterval(timer));
+});
+
+const tableHover = (data: any) => {
+  // console.log("mouseover", data.row[data.columnIndex]);
+};
+
+const scrollbarRef1 = ref(null);
+const ShowScrollRef1 = ref(null);
+const innerRef1 = ref(null);
+</script>
+
+<style lang="scss" scoped>
+.message-container {
+  width: 100%;
+  height: calc(100% - 25px);
+}
+.message-scroll {
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
+.message-row {
+  width: 100%;
+  overflow: hidden;
+
+  color: white;
+  font-size: v-bind("bsFS");
+  word-break: break-all;
+  margin-bottom: 15px;
+  border-bottom: 1px solid gray;
+  .message-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    line-height: v-bind("bsFSLH");
+    span {
+      line-height: v-bind("bsFSLH");
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+#m-g-g-content-box {
+  display: flex;
+  justify-content: start;
+  align-items: start;
+  width: 100%;
+  overflow: hidden;
+  line-height: v-bind("bsFSLH");
+  word-break: break-all;
+  font-size: v-bind("bsFS");
+  flex-direction: column;
+}
+
+#m-g-g-content-box * {
+  font-size: inherit;
+  line-height: inherit; /* 强制继承 */
+  padding: 0 !important;
+  margin: 0 !important;
+  word-break: break-all;
+  overflow: hidden;
+}
+</style>

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

@@ -27,11 +27,10 @@ const loadData = async () => {
   if (res.data.length > 0) {
     let dicts = {
       workOrderCode: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>生产批号</span>`,
-      materialName: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>物料名称</span>`,
+      materialModel: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>物料型号</span>`,
       isDestruction: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>是否破坏性检验</span>`,
       checkType: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>检验类型</span>`,
       total: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>数量</span>`,
-      updated: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>时间</span>`,
     };
     let bigData: any[] = [];
     res.data.forEach((item: any) => {
@@ -39,11 +38,10 @@ const loadData = async () => {
           ${item.isDestruction ? "color: yellow;" : ""} `;
       let row = [
         `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px; ${rowStyle}'>${item.workOrderCode}</span>`,
-        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px; ${rowStyle}'>${item.materialName}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px; ${rowStyle}'>${item.materialModel}</span>`,
         `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px; ${rowStyle}'>${item.isDestruction === 0 ? "否" : "是"}</span>`,
-        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px; ${rowStyle}'>${item.checkType === 1 ? "首件检验" : "过程检验"}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px; ${rowStyle}'>${item.checkType === "1" ? "首件检验" : "过程检验"}</span>`,
         `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px; ${rowStyle}'>${item.total}</span>`,
-        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px; ${rowStyle}'>${item.updated}</span>`,
       ];
       bigData.push(row);
     });