fix:质量大屏修改

src/api/screens/index.ts

@@ -29,10 +29,10 @@ export function stationProduction() {
 }
 
 // 不合格产品分布
-export function unqualifiedProduct() {
+export function unqualifiedProduct(type: number) {
   return request({
-    url: "/data/badProdtDis",
-    method: "POST",
+    url: `/data/badProdtDis/${type}`,
+    method: "get",
   });
 }
 
@@ -93,10 +93,10 @@ export function qualityException() {
 }
 
 // 今日检验任务
-export function todayInspectionDetail() {
+export function todayInspectionDetail(type: number) {
   return request({
-    url: `/data/check`,
-    method: "POST",
+    url: `/data/check/${type}`,
+    method: "GET",
   });
 }
 

src/store/modules/common.ts

@@ -26,10 +26,10 @@ export const useCommonStore = defineStore("commonStore", {
     ChengPinRKQKJ: "ChengPinRuKuQingKuang",
     WeiDianZCJGG: "WeiDianZiCheJianGongGao",
     // ====
-    qualityTOP01: "DistributionOfUnqualifiedProducts",
+    qualityTOP01: "InspectionTaskOfToday",
     qualityTOP02: "ProductionPassThroughRate",
     qualityTOP03: "QualityAnomaly",
-    qualityBottom01: "InspectionTaskOfToday",
+    qualityBottom01: "DistributionOfUnqualifiedProducts",
     qualityBottom02: "DefectDistributionDiagram",
     // ====
     workTOP01: "ManagementPersons",

src/views/screens/qualityScreen.vue

@@ -7,18 +7,18 @@
           <dv-border-box-3 class="top-container-box top-left">
             <component :is="qualityTOP01" moduleId="qualityTOP01" />
           </dv-border-box-3>
-          <div class="top-container-box top-middle">
+          <!-- <div class="top-container-box top-middle">
             <component :is="qualityTOP02" moduleId="qualityTOP02" />
-          </div>
+          </div> -->
           <dv-border-box-3 class="top-container-box top-right">
             <component :is="qualityTOP03" moduleId="qualityTOP03" />
           </dv-border-box-3>
         </div>
         <div class="vertical-space"></div>
         <div class="bottom-container">
-          <div class="bottom-container-box bottom-left">
+          <dv-border-box-8 class="bottom-container-box bottom-left">
             <component :is="qualityBottom01" moduleId="qualityBottom01" />
-          </div>
+          </dv-border-box-8>
 
           <div class="bottom-container-box bottom-right">
             <component :is="qualityBottom02" moduleId="qualityBottom02" />
@@ -71,12 +71,12 @@ const qualityBottom02 = computed(() => {
   }
 
   .top-left {
-    width: 27%;
+    width: 73%;
   }
 
-  .top-middle {
-    width: 46%;
-  }
+  // .top-middle {
+  //   width: 46%;
+  // }
 
   .top-right {
     width: 27%;
@@ -97,6 +97,7 @@ const qualityBottom02 = computed(() => {
 
   .bottom-container-box {
     height: 100%;
+    padding: 25px;
     //border: 1px solid yellow;
   }
 

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

@@ -1,95 +1,19 @@
 <template>
   <div class="screen-common-component">
-    <ScreenComHeader :module-id="moduleId" title="不合格产品分布" />
-    <div ref="chartRef" class="charts-container"></div>
+    <ScreenComHeader :module-id="moduleId" 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 * as echarts from "echarts";
-import { allChartColors } from "@/views/screens/configs/chartsConfig";
 import { unqualifiedProduct } from "@/api/screens";
 const bigScreenData: any = inject("bigScreenData");
-const chartRef = ref(null);
 
-const gernerateOptionsWithData = (
-  data: any,
-  centerText: string,
-  unitText: string
-) => {
-  const option = {
-    color: allChartColors,
-    backgroundColor: "transparent",
-    title: {
-      show: false,
-    },
-    textStyle: {
-      fontSize: bigScreenData.value.fontSize * 1.8,
-    },
-    tooltip: {
-      trigger: "item",
-      formatter: "{a} <br/>{b} : {c} ({d}%)",
-      textStyle: {
-        fontSize: bigScreenData.value.fontSize * 1.8,
-      },
-    },
-    legend: {
-      type: "scroll",
-      orient: "vertical",
-      right: 10,
-      top: 20,
-      bottom: 20,
-      data: data.legendData,
-    },
-    series: [
-      {
-        name: "占比",
-        type: "pie",
-        radius: ["40%", "50%"],
-        center: ["40%", "50%"],
-        data: data.seriesData,
-        // emphasis: {
-        //   itemStyle: {
-        //     shadowBlur: 10,
-        //     shadowOffsetX: 0,
-        //     shadowColor: "rgba(0, 0, 0, 0.5)",
-        //   },
-        // },
-        label: {
-          normal: {
-            formatter: centerText + "\n" + unitText, // 显示数据标签，格式化为：名称\n百分比
-            position: "center", // 标签的位置在饼图的中心
-            textStyle: {
-              fontSize: bigScreenData.value.fontSize * 2.5, // 标签字体大小
-              color: "#00BCD4", // 标签字体颜色
-            },
-          },
-        },
-        labelLine: {
-          normal: {
-            show: false, // 不显示标签线
-          },
-        },
-      },
-    ],
-  };
-  return option;
-};
-onMounted(async () => {
-  const chart = echarts.init(chartRef.value, "dark");
-  let res = await unqualifiedProduct();
-  let data = {
-    legendData: res?.data?.list.map((item: any) => item.name) ?? [],
-    seriesData: res?.data?.list ?? [],
-  };
-
-  if (res?.data?.list?.length > 0) {
-    chart.setOption(
-      gernerateOptionsWithData(data, res?.data?.total ?? 0, "件", "个")
-    );
-  }
-});
+const config = ref({});
 
 const props = defineProps({
   moduleId: {
@@ -97,4 +21,48 @@ const props = defineProps({
     required: true,
   },
 });
+
+const loadData = async () => {
+  let res = await unqualifiedProduct(4);
+  if (res.data.length > 0) {
+    let dicts = {
+      workOrderCode: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>生产批号</span>`,
+      materialModel: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>物料型号</span>`,
+      stage: `<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) => {
+      const rowStyle = `
+          ${item.state === "0" ? "color: yellow;" : ""} `;
+      let row = [
+        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px;'>${item.workOrderCode}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px;'>${item.materialModel}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px;'>${item.stage}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px;'>${item.total}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px;'>${item.updated}</span>`,
+      ];
+      bigData.push(row);
+    });
+
+    config.value = {
+      header: Object.values(dicts),
+      data: bigData,
+      index: true,
+      rowNum: 10,
+      // columnWidth: [50, 130, 160, 160, 120, 160, 120],
+      columnWidth: [50],
+      align: ["center"],
+      carousel: "single",
+    };
+  }
+};
+
+onMounted(async () => {
+  loadData();
+  const timer = setInterval(loadData, 60 * 5 * 1000);
+  // 组件卸载时清除定时器
+  onUnmounted(() => clearInterval(timer));
+});
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="screen-common-component">
-    <ScreenComHeader :module-id="moduleId" title="今日检验任务" />
+    <ScreenComHeader :module-id="moduleId" title="检验任务" />
     <dv-scroll-board
       :config="config"
       style="width: 100%; height: calc(100% - 32px)"
@@ -11,6 +11,7 @@
 <script lang="ts" setup>
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import { todayInspectionDetail } from "@/api/screens";
+const bigScreenData: any = inject("bigScreenData");
 
 const config = ref({});
 
@@ -21,39 +22,49 @@ const props = defineProps({
   },
 });
 
-onMounted(async () => {
-  let res = await todayInspectionDetail();
+const loadData = async () => {
+  let res = await todayInspectionDetail(4);
   if (res.data.length > 0) {
     let dicts = {
-      formName: "检验名称",
-      materialCode: "产品编号",
-      materialName: "产品名称",
-      passNum: "合格数量",
-      unPassNum: "不合格数量",
-      workOrderCode: "工单编号",
+      workOrderCode: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>生产批号</span>`,
+      materialName: `<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) => {
-      let row: any[] = [];
-      Object.keys(dicts).forEach((key) => {
-        row.push(item[key]);
-      });
-
+      const rowStyle = `
+          ${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.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.total}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px; ${rowStyle}'>${item.updated}</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);
-      },
+      index: true,
+      rowNum: 10,
+      // columnWidth: [50, 130, 160, 160, 120, 160, 120],
+      columnWidth: [50],
+      align: ["center"],
+      carousel: "single",
     };
   }
+};
+
+onMounted(async () => {
+  loadData();
+  const timer = setInterval(loadData, 60 * 5 * 1000);
+  // 组件卸载时清除定时器
+  onUnmounted(() => clearInterval(timer));
 });
 </script>