不合格产品分布,每日产量统计，缺陷分布图。

src/api/screens/index.ts

@@ -9,3 +9,28 @@ export function deviceMonitor() {
     method: "POST",
   });
 }
+
+// 每日产量统计 num为天数
+
+export function dailyProduction(num: number) {
+  return request({
+    url: `/data/everyDayProduction/${num}`,
+    method: "get",
+  });
+}
+
+// 不合格产品分布
+export function unqualifiedProduct() {
+  return request({
+    url: "/data/badProdtDis",
+    method: "POST",
+  });
+}
+
+//缺陷分布图
+export function defectDistribution() {
+  return request({
+    url: "/data/bug",
+    method: "POST",
+  });
+}

src/views/screens/configs/chartsConfig.ts

@@ -1,5 +1,4 @@
 export const allChartColors = [
-  "#FF6384",
   "#36A2EB",
   "#FFCE56",
   "#4BC0C0",
@@ -13,6 +12,7 @@ export const allChartColors = [
   "#FF9800",
   "#795548",
   "#9C27B0",
+  "#FF6384",
   "#673AB7",
   "#3F51B5",
   "#00BCD4",

src/views/screens/deviceScreen.vue

@@ -21,20 +21,13 @@
 </template>
 
 <script lang="ts" setup>
-import { getComponetnByName } from "@/views/screens/configs/components";
 import SelectComponents from "@/views/screens/configs/SelectComponents.vue";
-import { useCommonStore } from "@/store";
+
 import ScreenHeader from "@/views/screens/headers/screenHeader.vue";
 import DeviceStatus from "@/views/screens/screen-components/DeviceStatus.vue";
 import WorkshopList from "@/views/screens/screen-components/WorkshopList.vue";
 import { deviceMonitor } from "@/api/screens";
 
-const commonS = useCommonStore();
-
-const mainSL001 = computed(() => {
-  return getComponetnByName(commonS.mainSL001);
-});
-
 const data = ref<any>(null);
 
 onMounted(async () => {

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

@@ -8,96 +8,70 @@
 <script lang="ts" setup>
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
+import { defectDistribution } from "@/api/screens";
+import { allChartColors } from "@/views/screens/configs/chartsConfig";
 
 const chartRef = ref(null);
 
-const option = {
-  backgroundColor: "transparent",
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "cross",
-      crossStyle: {
-        color: "#999",
-      },
-    },
-  },
+onMounted(async () => {
+  const chart = echarts.init(chartRef.value, "dark");
 
-  legend: {
-    data: ["Evaporation", "Temperature"],
-  },
-  xAxis: [
-    {
-      type: "category",
-      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  let res = await defectDistribution();
+
+  let seriesData = [];
+  for (let i = 0; i < res?.data?.bugDetailList.length; i++) {
+    let item = res.data.bugDetailList[i];
+    seriesData.push({
+      type: "bar",
+      name: item.bugName,
+      // tooltip: {
+      //   valueFormatter: function (value) {
+      //     return value + " ml";
+      //   },
+      // },
+      data: item?.counts ?? [],
+    });
+  }
+
+  let option = {
+    color: allChartColors,
+    backgroundColor: "transparent",
+    tooltip: {
+      trigger: "axis",
       axisPointer: {
-        type: "shadow",
+        type: "cross",
+        // crossStyle: {
+        //   color: "#999",
+        // },
       },
     },
-  ],
-  yAxis: [
-    {
-      type: "value",
-      name: "Precipitation",
-      min: 0,
-      max: 250,
-      interval: 50,
-      axisLabel: {
-        formatter: "{value} ml",
-      },
-    },
-    {
-      type: "value",
-      name: "Temperature",
-      min: 0,
-      max: 25,
-      interval: 5,
-      axisLabel: {
-        formatter: "{value} °C",
-      },
+    legend: {
+      data: res?.data?.bugName ?? [],
     },
-  ],
-  series: [
-    {
-      name: "Evaporation",
-      type: "bar",
-      tooltip: {
-        valueFormatter: function (value) {
-          return value + " ml";
+    xAxis: [
+      {
+        type: "category",
+        data: res?.data?.weeks ?? [],
+        axisPointer: {
+          type: "shadow",
         },
       },
-      data: [
-        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
-      ],
-    },
-    // {
-    //   name: "Precipitation",
-    //   type: "bar",
-    //   tooltip: {
-    //     valueFormatter: function (value) {
-    //       return value + " ml";
-    //     },
-    //   },
-    //   data: [
-    //     2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
-    //   ],
-    // },
-    {
-      name: "Temperature",
-      type: "line",
-      yAxisIndex: 1,
-      tooltip: {
-        valueFormatter: function (value) {
-          return value + " °C";
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "数量",
+        // min: 0,
+        // max: 250,
+        // interval: 50,
+        axisLabel: {
+          formatter: "{value} ",
         },
       },
-      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
-    },
-  ],
-};
+    ],
+    series: seriesData,
+  };
 
-onMounted(() => {
-  const chart = echarts.init(chartRef.value, "dark");
   chart.setOption(option);
 });
 

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

@@ -40,7 +40,7 @@ const props = defineProps({
     required: true,
   },
   deviceData: {
-    type: Object,
+    type: Object || null,
     default: null,
     required: true,
   },

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

@@ -9,6 +9,7 @@
 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 chartRef = ref(null);
 const data = {
@@ -71,8 +72,7 @@ const data = {
 const gernerateOptionsWithData = (
   data: any,
   centerText: string,
-  unitText: string,
-  titleText: string = "订单需求数"
+  unitText: string
 ) => {
   const option = {
     color: allChartColors,
@@ -99,45 +99,46 @@ const gernerateOptionsWithData = (
         radius: ["40%", "50%"],
         center: ["40%", "50%"],
         data: data.seriesData,
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: "rgba(0, 0, 0, 0.5)",
+        // emphasis: {
+        //   itemStyle: {
+        //     shadowBlur: 10,
+        //     shadowOffsetX: 0,
+        //     shadowColor: "rgba(0, 0, 0, 0.5)",
+        //   },
+        // },
+        label: {
+          normal: {
+            formatter: centerText + "\n" + unitText, // 显示数据标签，格式化为：名称\n百分比
+            position: "center", // 标签的位置在饼图的中心
+            textStyle: {
+              fontSize: "16", // 标签字体大小
+              color: "#00BCD4", // 标签字体颜色
+            },
           },
         },
-      },
-    ],
-    graphic: [
-      {
-        type: "text",
-        left: "34%",
-        top: "45%",
-        style: {
-          text: centerText,
-          textAlign: "center",
-          fill: "#00BCD4", // 数值颜色
-          fontSize: 20, // 数值大小
-        },
-      },
-      {
-        type: "text",
-        left: "39%",
-        top: "52%",
-        style: {
-          text: unitText,
-          textAlign: "center",
-          fill: "#607D8B", // 单位颜色
-          fontSize: 14, // 单位大小
+        labelLine: {
+          normal: {
+            show: false, // 不显示标签线
+          },
         },
       },
     ],
   };
   return option;
 };
-onMounted(() => {
+onMounted(async () => {
   const chart = echarts.init(chartRef.value, "dark");
-  chart.setOption(gernerateOptionsWithData(data, "1000000", "个"));
+  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 props = defineProps({

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

@@ -8,36 +8,31 @@
 <script lang="ts" setup>
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
-import { chartLegend } from "@/views/screens/configs/chartsConfig";
+import { dailyProduction } from "@/api/screens";
+import { allChartColors } from "@/views/screens/configs/chartsConfig";
 
 const chartRef = ref(null);
 
-const option = {
-  backgroundColor: "transparent",
-  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(() => {
+onMounted(async () => {
   const chart = echarts.init(chartRef.value, "dark");
+  let res: any = await dailyProduction(7);
+  const option = {
+    color: allChartColors,
+    backgroundColor: "transparent",
+    xAxis: {
+      type: "category",
+      data: res?.data?.map((item: any) => item.dateStr),
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        data: res?.data?.map((item: any) => item.count),
+        type: "bar",
+      },
+    ],
+  };
   chart.setOption(option);
 });
 

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

@@ -2,7 +2,7 @@
   <div class="ws-container">
     <el-scrollbar style="height: 100%; width: 100%">
       <dv-decoration-2 style="width: 90%; height: 5px" />
-      <div v-for="key in Object.keys(deviceData)" :key="key">
+      <div v-for="key in Object.keys(deviceData ?? {})" :key="key">
         <div class="ws-title">
           {{ key }}
         </div>
@@ -32,7 +32,7 @@ const colors = ["#4caf50", "#ffc107", "#b61945", "#607d8b"];
 
 const props = defineProps({
   deviceData: {
-    type: Object,
+    type: Object || null,
     required: true,
   },
 });