防止冲突

src/views/report/statistics/screens/line/index.vue

@@ -1,17 +1,49 @@
 <template>
-  <div :key="viewKey" class="screen-container">
+  <div class="screen-container">
     <common-headerB title="装调一体式智能生产线仿真大屏" />
     <div class="body">
       <div class="left bg">
         <TitleHeaderB title="工位状态" />
-        <div class="totalInfo"></div>
-        <div class="titleInfo"></div>
+        <div class="totalInfo">
+          <div class="left">
+            <div class="text">100</div>
+          </div>
+          <div class="right">
+            <div class="big">
+              <div class="leftBox">
+                <div class="num">56000</div>
+                <div class="title">今日计划</div>
+              </div>
+              <div class="rightBox">
+                <div class="num">56000</div>
+                <div class="title">今日完成</div>
+              </div>
+            </div>
+            <div class="small">
+              <div class="title">本周进度</div>
+              <div class="title">400/ <span class="num">2000</span></div>
+            </div>
+            <div class="small">
+              <div class="title">本月进度</div>
+              <div class="title">400/ <span class="num">2000</span></div>
+            </div>
+          </div>
+        </div>
+        <div class="titleInfo">
+          <div class="infoItem">
+            <div class="leftItem">工位名称</div>
+            <div class="rightItem">完成率</div>
+          </div>
+        </div>
         <el-scrollbar class="scrollbar">
-          <div class="info" v-for="item in 40"></div>
+          <div class="infoItem" v-for="(item, index) in 40" :key="index">
+            <div class="leftItem itembg">dadwadwa</div>
+            <div class="rightItem itembg">123</div>
+          </div>
         </el-scrollbar>
       </div>
       <div class="middle">
-        <div class="item"></div>
+        <Middle3D class="item" />
         <div class="item">
           <TitleHeaderB title="自动化设备状态" />
           <el-scrollbar class="scrollbar">
@@ -42,10 +74,43 @@
         </div>
         <div class="item">
           <TitleHeaderB title="不合格情况" />
-          <el-scrollbar class="infoContent"> a </el-scrollbar>
+          <div class="scrollbar" style="position: relative">
+            <div id="charts2"></div>
+          </div>
+        </div>
+      </div>
+      <div class="right bg">
+        <div class="top">
+          <TitleHeaderB title="今日排产" />
+          <div class="titleInfo">
+            <div class="infoItem">
+              <div class="leftItem">工位名称</div>
+              <div class="rightItem">完成率</div>
+            </div>
+          </div>
+          <el-scrollbar class="scrollbar" style="height: 53vh">
+            <div class="infoItem" v-for="(item, index) in 40" :key="index">
+              <div class="leftItem itembg">dadwadwa</div>
+              <div class="rightItem itembg">123</div>
+            </div>
+          </el-scrollbar>
+        </div>
+        <div class="bottom">
+          <TitleHeaderB title="今日报故" />
+          <div class="titleInfo">
+            <div class="infoItem">
+              <div class="leftItem">工位名称</div>
+              <div class="rightItem">完成率</div>
+            </div>
+          </div>
+          <el-scrollbar class="scrollbar" style="height: 20vh">
+            <div class="infoItem" v-for="(item, index) in 40" :key="index">
+              <div class="leftItem itembg">dadwadwa</div>
+              <div class="rightItem itembg">123</div>
+            </div>
+          </el-scrollbar>
         </div>
       </div>
-      <div class="right"></div>
     </div>
   </div>
 </template>
@@ -53,9 +118,120 @@
 <script setup>
 import CommonHeaderB from "@/views/report/statistics/screens/common-headerB.vue";
 import TitleHeaderB from "../titleHeaderB.vue";
+import * as echarts from "echarts";
+import { getCensusNonconforming } from "@/api/bigScreen";
+import Middle3D from "./middle3D.vue";
+const fontSize = ref(0);
+const setFontSize = () => {
+  fontSize.value = (window.innerHeight / 100) * 1.55;
+};
+const charts2 = shallowRef(null);
+const chartsData2 = ref([]);
+const getData4 = async () => {
+  //不合格品统计
+  const { data } = await getCensusNonconforming();
+  chartsData2.value = data;
+};
+const option1 = {
+  xAxis: {
+    type: "category",
+    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    axisLabel: {
+      fontSize: 12,
+    },
+  },
+  tooltip: {
+    trigger: "axis",
+    backgroundColor: "#00000030",
+    textStyle: {
+      color: "#fff",
+    },
+    formatter: function (param) {
+      return [
+        param.name + "<br/>",
+        `<div style='display:flex;justify-content:space-between;width:10vw'><span>FST</span><span style='color:#D75656;text-align:right'>${param.name}</span><div/>` +
+          "<br/>",
+      ].join("");
+    },
+  },
+  grid: {
+    left: "3%",
+    right: "3%",
+    top: "10%",
+    bottom: "15%",
+  },
+  yAxis: {
+    type: "value",
+    axisLabel: {
+      fontSize: 12,
+    },
+    minInterval: 1,
+  },
+  series: [
+    {
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      type: "line",
+      stack: "Total",
+      label: {
+        show: true,
+        position: "top",
+        fontSize: 20,
+        color: "white",
+      },
+      itemStyle: {
+        color: "#D7565680",
+      },
+
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "#D7565680",
+          },
+          {
+            offset: 1,
+            color: "#D7565680",
+          },
+        ]),
+      },
+    },
+  ],
+  textStyle: {
+    fontSize: fontSize.value,
+  },
+};
+const setChart1Option = () => {
+  const op1 = { ...option1 };
+  if (chartsData2.value && charts2.value) {
+    op1.series[0].data = chartsData2.value.countList;
+    op1.series[0].label.fontSize = fontSize.value;
+    op1.xAxis.data = chartsData2.value.monthList;
+    op1.yAxis.axisLabel.fontSize = fontSize.value;
+    op1.xAxis.axisLabel.fontSize = fontSize.value;
+    charts2.value.setOption(op1, true);
+  }
+};
+onMounted(async () => {
+  setFontSize();
+  await getData4();
+  charts2.value = echarts.init(document.getElementById("charts2"));
+  setChart1Option();
+});
 </script>
 
 <style lang="scss" scoped>
+.titleInfo {
+  height: 3vh;
+}
+.scrollbar {
+  padding-top: 0.5vh;
+  height: 58vh;
+}
+#charts2 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
 .screen-container {
   width: 100vw;
   height: 100vh;
@@ -79,17 +255,67 @@ import TitleHeaderB from "../titleHeaderB.vue";
     height: 90vh;
     .totalInfo {
       height: 20vh;
+      display: flex;
       padding: 1vh;
-    }
-    .titleInfo {
-      height: 3vh;
-    }
-    .scrollbar {
-      padding-top: 0.5vh;
-      height: 58vh;
-      .info {
-        height: 3vh;
-        margin-bottom: 0.5vh;
+      .left {
+        width: 7vw;
+        height: 7vw;
+        background-image: url("@/assets/images/cel.png");
+        background-size: 100% 100%;
+        background-position: center;
+        position: relative;
+        .text {
+          width: 7vw;
+          height: 7vw;
+          top: 0;
+          left: 0;
+          color: white;
+          text-align: center;
+          line-height: 6vw;
+          font-size: 2.3vh;
+          padding-right: 1vw;
+        }
+      }
+      .right {
+        width: 9vw;
+        height: 20vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        .title {
+          font-size: 1.5vh;
+          color: white;
+          text-align: center;
+        }
+        .big {
+          height: 8vh;
+          width: 9vw;
+          display: flex;
+          .num {
+            font-size: 3vh;
+            font-weight: bolder;
+            color: white;
+            text-align: center;
+          }
+
+          .leftBox {
+            width: 4.5vw;
+            height: 8vh;
+            border-right: 0.1vw solid white;
+          }
+          .rightBox {
+            width: 4.5vw;
+            height: 8vh;
+          }
+        }
+        .small {
+          height: 4vh;
+          display: flex;
+          justify-content: space-between;
+          .num {
+            color: rgb(8, 174, 199);
+          }
+        }
       }
     }
   }
@@ -183,6 +409,41 @@ import TitleHeaderB from "../titleHeaderB.vue";
   .right {
     width: 18vw;
     height: 90vh;
+    display: flex;
+    flex-direction: column;
+    .top {
+      height: 61vh;
+      padding: 1vh;
+    }
+    .bottom {
+      height: 29vh;
+      padding: 1vh;
+    }
   }
 }
+.infoItem {
+  height: 4vh;
+  margin-bottom: 0.4vh;
+  display: flex;
+  .leftItem {
+    flex: 1;
+    height: 4vh;
+    font-size: 1.8vh;
+    line-height: 4vh;
+    color: white;
+    text-align: center;
+  }
+  .rightItem {
+    width: 25%;
+    height: 4vh;
+    line-height: 4vh;
+    margin-left: 0.3vw;
+    font-size: 1.8vh;
+    color: white;
+    text-align: center;
+  }
+}
+.itembg {
+  background-color: #46464635;
+}
 </style>

src/views/report/statistics/screens/titleHeaderB.vue

@@ -2,8 +2,8 @@
   <div class="bodys">
     <div class="info">
       <div class="round">
-        <div>[</div>
-        <div>]</div>
+        <div style="left: 0">[</div>
+        <div style="right: 0">]</div>
         <div class="box"></div>
       </div>
       <div class="text">{{ title }}</div>
@@ -52,6 +52,7 @@ defineProps({
     .text {
       color: white;
       font-size: 2.5vh;
+      margin-left: 0.3vw;
     }
     .round {
       height: 2.4vh;
@@ -60,21 +61,19 @@ defineProps({
       line-height: 2.6vh;
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      justify-content: center;
       padding: 0 0.3vw;
       color: white;
       position: relative;
       transform: translateY(-0.31vh);
       div {
         color: #18fefe;
+        position: absolute;
       }
       .box {
-        width: 1vh;
-        height: 1vh;
+        width: 0.5vw;
+        height: 0.5vw;
         background-color: #18fefe;
-        position: absolute;
-        left: 38%;
-        top: 35%;
       }
     }
   }