1.质量综合看板

src/store/modules/common.ts

@@ -22,6 +22,10 @@ export const useCommonStore = defineStore("commonStore", {
     mainS078: "ProductionSituation",
     // ====
     qualityTOP01: "DistributionOfUnqualifiedProducts",
+    qualityTOP02: "ProductionPassThroughRate",
+    qualityTOP03: "QualityAnomaly",
+    qualityBottom01: "InspectionTaskOfToday",
+    qualityBottom02: "DefectDistributionDiagram",
 
     moduleKey: "", // 用于判断修改了哪个模块
     isShowSelectModule: false, // 是否显示选择模块中的组件弹窗

src/styles/index.scss

@@ -91,10 +91,10 @@
 
 .screen-content {
   width: 100%;
-  height: calc(100% - 80px);
+  height: calc(100% - 120px);
   display: flex;
   padding: 15px;
-  border: 1px solid red;
+  border: 3px solid red;
 }
 
 .screen-common-box {
@@ -120,3 +120,11 @@
   height: calc(100% - 30px);
   //background-color: yellow;
 }
+
+#dv-full-screen-container {
+  //background-image: url("./img/bg.png");
+  background-size: 100% 100%;
+  box-shadow: 0 0 3px blue;
+  //display: flex;
+  //flex-direction: column;
+}

src/views/big-screens/datav/index.vue

@@ -88,91 +88,91 @@ export default {
 </script>
 
 <style lang="less">
-#data-view {
-  width: 100%;
-  height: 100%;
-  background-color: #030409;
-  color: #fff;
-
-  #dv-full-screen-container {
-    background-image: url("./img/bg.png");
-    background-size: 100% 100%;
-    box-shadow: 0 0 3px blue;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .main-header {
-    height: 80px;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-
-    .mh-left {
-      font-size: 20px;
-      color: rgb(1, 134, 187);
-
-      a:visited {
-        color: rgb(1, 134, 187);
-      }
-    }
-
-    .mh-middle {
-      font-size: 30px;
-    }
-
-    .mh-left,
-    .mh-right {
-      width: 450px;
-    }
-  }
-
-  .main-container {
-    height: calc(100% - 160px);
-
-    .border-box-content {
-      padding: 20px;
-      box-sizing: border-box;
-      display: flex;
-    }
-  }
-
-  .left-chart-container {
-    width: 22%;
-    padding: 10px;
-    box-sizing: border-box;
-
-    .border-box-content {
-      flex-direction: column;
-    }
-  }
-
-  .right-main-container {
-    width: 78%;
-    padding-left: 5px;
-    box-sizing: border-box;
-  }
-
-  .rmc-top-container {
-    height: 65%;
-    display: flex;
-  }
-
-  .rmctc-left-container {
-    width: 65%;
-  }
-
-  .rmctc-right-container {
-    width: 35%;
-  }
-
-  .rmc-bottom-container {
-    height: 35%;
-  }
-
-  .rmctc-chart-1,
-  .rmctc-chart-2 {
-    height: 50%;
-  }
-}
+//#data-view {
+//  width: 100%;
+//  height: 100%;
+//  background-color: #030409;
+//  color: #fff;
+//
+//  #dv-full-screen-container {
+//    background-image: url("./img/bg.png");
+//    background-size: 100% 100%;
+//    box-shadow: 0 0 3px blue;
+//    display: flex;
+//    flex-direction: column;
+//  }
+//
+//  .main-header {
+//    height: 80px;
+//    display: flex;
+//    justify-content: space-between;
+//    align-items: flex-end;
+//
+//    .mh-left {
+//      font-size: 20px;
+//      color: rgb(1, 134, 187);
+//
+//      a:visited {
+//        color: rgb(1, 134, 187);
+//      }
+//    }
+//
+//    .mh-middle {
+//      font-size: 30px;
+//    }
+//
+//    .mh-left,
+//    .mh-right {
+//      width: 450px;
+//    }
+//  }
+//
+//  .main-container {
+//    height: calc(100% - 160px);
+//
+//    .border-box-content {
+//      padding: 20px;
+//      box-sizing: border-box;
+//      display: flex;
+//    }
+//  }
+//
+//  .left-chart-container {
+//    width: 22%;
+//    padding: 10px;
+//    box-sizing: border-box;
+//
+//    .border-box-content {
+//      flex-direction: column;
+//    }
+//  }
+//
+//  .right-main-container {
+//    width: 78%;
+//    padding-left: 5px;
+//    box-sizing: border-box;
+//  }
+//
+//  .rmc-top-container {
+//    height: 65%;
+//    display: flex;
+//  }
+//
+//  .rmctc-left-container {
+//    width: 65%;
+//  }
+//
+//  .rmctc-right-container {
+//    width: 35%;
+//  }
+//
+//  .rmc-bottom-container {
+//    height: 35%;
+//  }
+//
+//  .rmctc-chart-1,
+//  .rmctc-chart-2 {
+//    height: 50%;
+//  }
+//}
 </style>

src/views/screens/configs/components.ts

@@ -7,6 +7,10 @@ import ProductionScheduleOfHeavyParts from "@/views/screens/screen-components/Pr
 import ProductionTaskStatistics from "@/views/screens/screen-components/ProductionTaskStatistics.vue";
 import ProductionCapacitySituation from "@/views/screens/screen-components/ProductionCapacitySituation.vue";
 import DistributionOfUnqualifiedProducts from "@/views/screens/screen-components/DistributionOfUnqualifiedProducts.vue";
+import QualityAnomaly from "@/views/screens/screen-components/QualityAnomaly.vue";
+import ProductionPassThroughRate from "@/views/screens/screen-components/ProductionPassThroughRate.vue";
+import InspectionTaskOfToday from "@/views/screens/screen-components/InspectionTaskOfToday.vue";
+import DefectDistributionDiagram from "@/views/screens/screen-components/DefectDistributionDiagram.vue";
 
 export interface ScreenComponent {
   name: string;
@@ -75,6 +79,30 @@ export const componentsDicts: { [key: string]: ScreenComponent } = {
     description:
       "This component shows the distribution of unqualified products.",
   },
+  QualityAnomaly: {
+    name: "质量异常",
+    component: QualityAnomaly,
+    key: "QualityAnomaly",
+    description: "This component shows the quality anomaly.",
+  },
+  ProductionPassThroughRate: {
+    name: "生产直通率",
+    component: ProductionPassThroughRate,
+    key: "ProductionPassThroughRate",
+    description: "This component shows the production pass-through rate.",
+  },
+  InspectionTaskOfToday: {
+    name: "今日检验任务",
+    component: InspectionTaskOfToday,
+    key: "InspectionTaskOfToday",
+    description: "This component shows the inspection task of today.",
+  },
+  DefectDistributionDiagram: {
+    name: "缺陷分布图",
+    component: DefectDistributionDiagram,
+    key: "DefectDistributionDiagram",
+    description: "This component shows the defect distribution diagram.",
+  },
 };
 
 export const getComponetnByName = (name: string) => {

src/views/screens/qualityScreen.vue

@@ -7,14 +7,22 @@
           <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>
-          <div class="top-container-box top-right"></div>
+          <div class="top-container-box top-middle">
+            <component :is="qualityTOP02" moduleId="qualityTOP02" />
+          </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"></div>
+          <div class="bottom-container-box bottom-left">
+            <component :is="qualityBottom01" moduleId="qualityBottom01" />
+          </div>
 
-          <div class="bottom-container-box bottom-right"></div>
+          <div class="bottom-container-box bottom-right">
+            <component :is="qualityBottom02" moduleId="qualityBottom02" />
+          </div>
         </div>
       </div>
     </dv-full-screen-container>
@@ -33,6 +41,19 @@ const commonS = useCommonStore();
 const qualityTOP01 = computed(() => {
   return getComponetnByName(commonS.qualityTOP01);
 });
+const qualityTOP02 = computed(() => {
+  return getComponetnByName(commonS.qualityTOP02);
+});
+
+const qualityTOP03 = computed(() => {
+  return getComponetnByName(commonS.qualityTOP03);
+});
+const qualityBottom01 = computed(() => {
+  return getComponetnByName(commonS.qualityBottom01);
+});
+const qualityBottom02 = computed(() => {
+  return getComponetnByName(commonS.qualityBottom02);
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,52 @@
+<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 ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import * as echarts from "echarts";
+import { chartLegend } 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(() => {
+  const chart = echarts.init(chartRef.value, "dark");
+  chart.setOption(option);
+});
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,7 @@
+<template>
+  <div>src/views/screens/screen-components /InspectionTaskOfToday</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" align="start" title="生产直通率" />
+    <div class="container">
+      <div ref="chartLeftRef" class="item"></div>
+      <dv-decoration-2 :reverse="true" style="width: 5px; height: 100%" />
+      <div ref="chartMiddleRef" class="item"></div>
+      <dv-decoration-2 :reverse="true" style="width: 5px; height: 100%" />
+      <div ref="chartRightRef" class="item"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import * as echarts from "echarts";
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+
+const chartLeftRef = ref(null);
+const chartMiddleRef = ref(null);
+const chartRightRef = ref(null);
+
+onMounted(() => {
+  const chartl = echarts.init(chartLeftRef.value, "dark");
+  const chartm = echarts.init(chartMiddleRef.value, "dark");
+  const chartr = echarts.init(chartRightRef.value, "dark");
+
+  chartl.setOption(gernerateOptionsWithData([40, 4], "1000", "%", "产品名称"));
+  chartm.setOption(gernerateOptionsWithData([40, 50], "1000", "%", "产品名称"));
+  chartr.setOption(gernerateOptionsWithData([40, 50], "57", "%", "产品名称"));
+});
+
+const gernerateOptionsWithData = (
+  data: number[],
+  centerText: string,
+  unitText: string,
+  titleText: string
+) => {
+  const option = {
+    color: ["#2196F3", "#fff"],
+    backgroundColor: "transparent",
+    title: {
+      text: titleText,
+      left: "center",
+      top: "10%",
+      textStyle: {
+        fontSize: 14,
+      },
+    },
+
+    legend: {
+      show: false,
+    },
+    series: [
+      {
+        name: "订单需求数",
+        type: "pie",
+        radius: ["40%", "60%"],
+        center: ["50%", "50%"],
+        data: data,
+        label: {
+          show: false,
+          position: "center",
+        },
+      },
+    ],
+    graphic: [
+      {
+        type: "text",
+        left: "center",
+        top: "center",
+        style: {
+          text: centerText + unitText,
+          textAlign: "center",
+          fill: "#00BCD4", // 数值颜色
+          fontSize: 20, // 数值大小
+        },
+      },
+    ],
+  };
+  return option;
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: calc(100% - 20px);
+}
+
+.item {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/screens/screen-components/QualityAnomaly.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% - 32px)"
+    />
+  </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>