大屏新增

package.json

@@ -59,6 +59,7 @@
     "jspdf": "^2.5.1",
     "lodash-es": "^4.17.21",
     "luckyexcel": "^1.0.1",
+    "moment": "^2.30.1",
     "net": "^1.0.2",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",

src/assets/font/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'Furore';
+  src: url('./Furore.otf');
+}

src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "@/router";
 import print from "vue3-print-nb";
+import "@/assets/font/font.css";
 import { setupStore } from "@/store";
 import { setupDirective } from "@/directive";
 import { setupElIcons, setupI18n, setupPermission } from "@/plugins";

src/router/index.ts

@@ -59,7 +59,10 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () =>
       import("@/views/report/statistics/screens/quality/index.vue"),
   },
-
+  {
+    path: "/lineScreen",
+    component: () => import("@/views/report/statistics/screens/line/index.vue"),
+  },
   // 外部链接
   // {
   //   path: "/external-link",

src/styles/reset.scss

@@ -27,7 +27,7 @@ body {
   margin: 0;
   overflow: hidden;
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
   line-height: inherit;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;

src/views/report/statistics/screens/common-header.vue

@@ -1,14 +1,45 @@
 <template>
-  <div class="screen-header">{{ title }}</div>
+  <div style="position: relative">
+    <div class="screen-header">{{ title }}</div>
+    <div class="right">
+      <div class="show-time">
+        <div class="time">
+          {{ times.time }}
+        </div>
+        <div class="date">
+          <span>
+            {{ times.date }}
+          </span>
+          <span>
+            {{ times.week }}
+          </span>
+        </div>
+      </div>
+      <div class="temperature">32<span style="font-size: 1vw">℃</span></div>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
+import moment from "moment";
 defineProps({
   title: {
     type: String,
     default: "",
   },
 });
+const times = ref({ time: "", date: "", week: "" });
+const timer = ref(null);
+const getTime = () => {
+  timer.value = setInterval(() => {
+    times.value.time = moment().format("HH:mm:ss");
+    times.value.date = moment().format("YYYY/MM/DD");
+    times.value.week = "星期" + "日一二三四五六".charAt(new Date().getDay());
+  }, 1000);
+};
+onMounted(() => {
+  getTime();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -25,4 +56,38 @@ defineProps({
   background-size: 100% 100%;
   background-position: center;
 }
+.right {
+  position: absolute;
+  right: 1.042vw;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  font-family: "Furore";
+  .temperature {
+    margin-right: 0.78125vw;
+    font-size: 1.25vw;
+    font-weight: 500;
+    color: white;
+    span {
+      color: #babebe;
+      font-size: 0.625vw;
+      vertical-align: super;
+    }
+  }
+  .show-time {
+    margin-right: 1vw;
+    .time {
+      font-size: 1.25vw;
+      font-weight: 500;
+      color: white;
+    }
+    .date {
+      color: #babebe;
+      & span:nth-child(1) {
+        margin-right: 0.26vw;
+      }
+    }
+  }
+}
 </style>

src/views/report/statistics/screens/common-headerB.vue

@@ -0,0 +1,94 @@
+<template>
+  <div style="position: relative">
+    <div class="screen-header">{{ title }}</div>
+    <div class="right">
+      <div class="show-time">
+        <div class="time">
+          {{ times.time }}
+        </div>
+        <div class="date">
+          <span>
+            {{ times.date }}
+          </span>
+          <span>
+            {{ times.week }}
+          </span>
+        </div>
+      </div>
+      <div class="temperature">32<span style="font-size: 1vw">℃</span></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import moment from "moment";
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+const times = ref({ time: "", date: "", week: "" });
+const timer = ref(null);
+const getTime = () => {
+  timer.value = setInterval(() => {
+    times.value.time = moment().format("HH:mm:ss");
+    times.value.date = moment().format("YYYY/MM/DD");
+    times.value.week = "星期" + "日一二三四五六".charAt(new Date().getDay());
+  }, 1000);
+};
+onMounted(() => {
+  getTime();
+});
+</script>
+
+<style lang="scss" scoped>
+.screen-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 8vh;
+  font-weight: 600;
+  font-size: 4vh;
+  color: #ffffff;
+  line-height: 4.6vh;
+  background-image: url("@/assets/images/top.png");
+  background-size: 100% 30%;
+  background-position: bottom;
+  background-repeat: no-repeat;
+}
+.right {
+  position: absolute;
+  right: 1.042vw;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  font-family: "Furore";
+  .temperature {
+    margin-right: 0.78125vw;
+    font-size: 1.25vw;
+    font-weight: 500;
+    color: white;
+    span {
+      color: #babebe;
+      font-size: 0.625vw;
+      vertical-align: super;
+    }
+  }
+  .show-time {
+    margin-right: 1vw;
+    .time {
+      font-size: 1.25vw;
+      font-weight: 500;
+      color: white;
+    }
+    .date {
+      color: #babebe;
+      & span:nth-child(1) {
+        margin-right: 0.26vw;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,188 @@
+<template>
+  <div :key="viewKey" class="screen-container">
+    <common-headerB title="装调一体式智能生产线仿真大屏" />
+    <div class="body">
+      <div class="left bg">
+        <TitleHeaderB title="工位状态" />
+        <div class="totalInfo"></div>
+        <div class="titleInfo"></div>
+        <el-scrollbar class="scrollbar">
+          <div class="info" v-for="item in 40"></div>
+        </el-scrollbar>
+      </div>
+      <div class="middle">
+        <div class="item"></div>
+        <div class="item">
+          <TitleHeaderB title="自动化设备状态" />
+          <el-scrollbar class="scrollbar">
+            <div class="infoContent">
+              <div class="deviceInfo">
+                <div class="img"></div>
+                <div class="info">
+                  <div class="info1">多媒体</div>
+                  <div class="info2">
+                    <div class="text2">
+                      今日稼动
+                      <span class="nums">70%</span>
+                    </div>
+                    |
+                    <div class="text2">
+                      总稼动
+                      <span class="nums" style="color: white">80%</span>
+                    </div>
+                  </div>
+                  <div class="info3">
+                    <div class="ip">IP:123.123.123.1</div>
+                    <div class="infoState">在线</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-scrollbar>
+        </div>
+        <div class="item">
+          <TitleHeaderB title="不合格情况" />
+          <el-scrollbar class="infoContent"> a </el-scrollbar>
+        </div>
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import CommonHeaderB from "@/views/report/statistics/screens/common-headerB.vue";
+import TitleHeaderB from "../titleHeaderB.vue";
+</script>
+
+<style lang="scss" scoped>
+.screen-container {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("@/assets/images/screen_bg_task.png");
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+}
+.bg {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.body {
+  padding-top: 1vh;
+  width: 100vw;
+  height: 90vh;
+  display: flex;
+  justify-content: space-evenly;
+  .left {
+    padding: 1vh;
+    width: 18vw;
+    height: 90vh;
+    .totalInfo {
+      height: 20vh;
+      padding: 1vh;
+    }
+    .titleInfo {
+      height: 3vh;
+    }
+    .scrollbar {
+      padding-top: 0.5vh;
+      height: 58vh;
+      .info {
+        height: 3vh;
+        margin-bottom: 0.5vh;
+      }
+    }
+  }
+  .middle {
+    width: 60vw;
+    height: 90vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .item {
+      height: 29vh;
+      padding: 1vh;
+      width: 100%;
+      background-color: rgba(0, 0, 0, 0.4);
+      .scrollbar {
+        height: 23.9vh;
+        width: 100%;
+        .infoContent {
+          width: 100%;
+          padding: 1vh;
+          display: grid;
+          gap: 0.6vw;
+          grid-template-columns: repeat(3, 1fr);
+          .deviceInfo {
+            width: 19vw;
+            height: 10vh;
+            display: flex;
+            background-color: rgba(255, 255, 255, 0.06);
+            clip-path: polygon(0% 0%, 85% 0%, 100% 25%, 100% 100%, 0% 100%);
+            .img {
+              height: 10vh;
+              width: 7vw;
+            }
+            .info {
+              height: 10vh;
+              width: 12vw;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              padding-top: 1vh;
+
+              .info1 {
+                padding-left: 0.5vw;
+                height: 2vh;
+                font-size: 2vh;
+                line-height: 2vh;
+                font-weight: 600;
+                color: white;
+              }
+              .info2 {
+                height: 2vh;
+                padding-left: 0.5vw;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                color: white;
+                padding-right: 1vw;
+                .text2 {
+                  font-size: 1.7vh;
+                  .nums {
+                    color: #0ae0ff;
+                    font-weight: 600;
+                  }
+                }
+              }
+              .info3 {
+                height: 2vh;
+                font-size: 2vh;
+                background-color: rgba(255, 255, 255, 0.1);
+                display: flex;
+                padding-left: 0.5vw;
+                padding-right: 1vw;
+                justify-content: space-between;
+                .ip {
+                  font-size: 1.6vh;
+                  line-height: 2vh;
+                  color: white;
+                }
+                .infoState {
+                  font-size: 1.6vh;
+                  line-height: 2vh;
+                  color: #06ffa5;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .right {
+    width: 18vw;
+    height: 90vh;
+  }
+}
+</style>

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

@@ -50,7 +50,7 @@ defineProps({
       align-items: center;
       justify-content: center;
       margin-right: 0.8vw;
-      border: 1px solid rgba(255, 255, 255, 0.3);
+      border: 0.1vh solid rgba(255, 255, 255, 0.3);
       .colorRound {
         height: 1.18vh;
         width: 1.18vh;

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

@@ -0,0 +1,125 @@
+<template>
+  <div class="bodys">
+    <div class="info">
+      <div class="round">
+        <div>[</div>
+        <div>]</div>
+        <div class="box"></div>
+      </div>
+      <div class="text">{{ title }}</div>
+    </div>
+    <div class="nextline">
+      <div class="dian1">
+        <div class="lines"></div>
+      </div>
+      <div class="line">
+        <div class="lines"></div>
+      </div>
+      <div class="dian2">
+        <div class="lines"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  color: {
+    type: String,
+    default: "#18FEFE",
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.bodys {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  height: 4.1vh;
+  width: 100%;
+  .nextline {
+    display: flex;
+    align-items: center;
+  }
+  .info {
+    display: flex;
+    align-items: center;
+    .text {
+      color: white;
+      font-size: 2.5vh;
+    }
+    .round {
+      height: 2.4vh;
+      width: 2vw;
+      font-size: 2.6vh;
+      line-height: 2.6vh;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 0.3vw;
+      color: white;
+      position: relative;
+      transform: translateY(-0.31vh);
+      div {
+        color: #18fefe;
+      }
+      .box {
+        width: 1vh;
+        height: 1vh;
+        background-color: #18fefe;
+        position: absolute;
+        left: 38%;
+        top: 35%;
+      }
+    }
+  }
+  .line {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0.5vw;
+    .lines {
+      width: 100%;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      height: 0vh;
+      border-top: 0;
+      border-right: 0;
+      border-left: 0;
+    }
+  }
+  .dian1 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2vw;
+    .lines {
+      width: 2vw;
+      border: 0.4vh solid rgba(255, 255, 255, 1);
+      height: 0vh;
+      border-top: 0;
+      border-right: 0;
+      border-left: 0;
+    }
+  }
+  .dian2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 0.5vw;
+    .lines {
+      width: 0.5vw;
+      border: 0.3vh solid rgb(24, 254, 254);
+      height: 0vh;
+      border-top: 0;
+      border-right: 0;
+      border-left: 0;
+    }
+  }
+}
+</style>