装调大屏静态

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

@@ -37,7 +37,7 @@
         </div>
         <el-scrollbar class="scrollbar">
           <div class="infoItem" v-for="(item, index) in 40" :key="index">
-            <div class="leftItem itembg">dadwadwa</div>
+            <div class="leftItem textComent itembg">dadwadwa</div>
             <div class="rightItem itembg">123</div>
           </div>
         </el-scrollbar>
@@ -84,14 +84,18 @@
           <TitleHeaderB title="今日排产" />
           <div class="titleInfo">
             <div class="infoItem">
-              <div class="leftItem">工位名称</div>
-              <div class="rightItem">完成率</div>
+              <div class="leftItem1">产品名称</div>
+              <div class="midItem1">今日排产</div>
+              <div class="rightItem1">完成率</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 class="leftItem1 textComent itembg">
+                dadw味哒哒带娃打完阿达的啊我adwa
+              </div>
+              <div class="midItem1 itembg">今日排产</div>
+              <div class="rightItem1 itembg">123</div>
             </div>
           </el-scrollbar>
         </div>
@@ -105,7 +109,7 @@
           </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="leftItem textComent itembg">dadwadwa</div>
               <div class="rightItem itembg">123</div>
             </div>
           </el-scrollbar>
@@ -121,6 +125,7 @@ import TitleHeaderB from "../titleHeaderB.vue";
 import * as echarts from "echarts";
 import { getCensusNonconforming } from "@/api/bigScreen";
 import Middle3D from "./middle3D.vue";
+import moment from "moment";
 const fontSize = ref(0);
 const setFontSize = () => {
   fontSize.value = (window.innerHeight / 100) * 1.55;
@@ -131,7 +136,35 @@ const getData4 = async () => {
   //不合格品统计
   const { data } = await getCensusNonconforming();
   chartsData2.value = data;
+  chartsData2.value.list = [
+    [
+      { name: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", num: "00" },
+      { name: "aaaa", num: "01" },
+      { name: "aaaa", num: "02" },
+    ],
+    [
+      { name: "bb", num: "20" },
+      { name: "bb", num: "20" },
+      { name: "bb", num: "20" },
+    ],
+    [
+      ({ name: "cc", num: "20" },
+      { name: "cc", num: "20" },
+      { name: "cc", num: "20" }),
+    ],
+    [
+      ({ name: "dd", num: "20" },
+      { name: "ff", num: "20" },
+      { name: "cc", num: "20" }),
+    ],
+    [
+      ({ name: "ff", num: "20" },
+      { name: "ff", num: "20" },
+      { name: "ff", num: "20" }),
+    ],
+  ];
 };
+
 const option1 = {
   xAxis: {
     type: "category",
@@ -147,11 +180,18 @@ const option1 = {
       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("");
+      const array = [moment().year() + "年" + param[0].name + "<br/>"];
+      for (
+        let i = 0;
+        i < chartsData2.value.list[param[0].dataIndex].length;
+        i++
+      ) {
+        array.push(
+          ` <span style='width: 10vw'>${chartsData2.value.list[param[0].dataIndex][i].name}</span><span style='color:#D75656;'>&nbsp;&nbsp;${chartsData2.value.list[param[0].dataIndex][i].num}</span>` +
+            "<br/>"
+        );
+      }
+      return array.join("");
     },
   },
   grid: {
@@ -181,7 +221,6 @@ const option1 = {
       itemStyle: {
         color: "#D7565680",
       },
-
       areaStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
@@ -421,6 +460,11 @@ onMounted(async () => {
     }
   }
 }
+.textComent {
+  white-space: nowrap; /* 不允许换行 */
+  overflow: hidden; /* 超出长度时隐藏 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
 .infoItem {
   height: 4vh;
   margin-bottom: 0.4vh;
@@ -442,6 +486,32 @@ onMounted(async () => {
     color: white;
     text-align: center;
   }
+  .leftItem1 {
+    flex: 1;
+    height: 4vh;
+    font-size: 1.8vh;
+    line-height: 4vh;
+    color: white;
+    text-align: center;
+  }
+  .midItem1 {
+    width: 20%;
+    height: 4vh;
+    line-height: 4vh;
+    margin-left: 0.3vw;
+    font-size: 1.8vh;
+    color: white;
+    text-align: center;
+  }
+  .rightItem1 {
+    width: 20%;
+    height: 4vh;
+    line-height: 4vh;
+    margin-left: 0.3vw;
+    font-size: 1.8vh;
+    color: white;
+    text-align: center;
+  }
 }
 .itembg {
   background-color: #46464635;