add center widget

src/components/yx-dark/layout/Header.vue

@@ -0,0 +1,130 @@
+<template>
+  <header class="header">
+    <div>
+      <span class="header--logo">
+        <!-- <img src="../../assets/logo.png" alt="logo"> -->
+      </span>
+      <h1>宜兴三期生产线大数据指挥中心</h1>
+    </div>
+    <span class="header--wing absolute company"></span>
+    <span class="header--wing absolute datetime">
+      {{ moment(today).format("YYYY.M.D dddd HH:mm:ss") }}
+    </span>
+  </header>
+</template>
+
+<script>
+import moment from "moment";
+export default {
+  name: "Header",
+  data() {
+    return {
+      today: new Date(),
+      time: "00:00:00",
+      moment,
+    };
+  },
+  computed: {
+    date() {
+      return this.today.toLocaleDateString().replaceAll("/", ".");
+    },
+    week() {
+      return [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ][this.today.getDay()];
+    },
+  },
+  mounted() {
+    moment.locale("zh-cn");
+    // this.time = this.getTime().join(":");
+    setInterval(() => {
+      this.today = new Date();
+      // this.time = this.getTime().join(":");
+    }, 1000);
+  },
+  methods: {
+    getTime() {
+      const now = new Date();
+      return [
+        now.getHours() < 10 ? "0" + now.getHours() : now.getHours() + "",
+        now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes() + "",
+        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds() + "",
+      ];
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../../assets/styles/functions";
+@import "../../../assets/styles/variables";
+
+header {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  background: url(../../../assets/header.png) no-repeat;
+  background-position: center;
+  background-size: contain;
+  // background-size: 100%;
+  height: 146px;
+  display: grid;
+  place-content: center;
+
+  > div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0;
+
+    .header--logo {
+      margin-top: 12px;
+      width: 64px;
+      height: 94px;
+      background: url(../../../assets/logo.png) center/contain no-repeat;
+    }
+
+    h1 {
+      margin-left: 36px;
+      font-size: 72px;
+      user-select: none;
+      letter-spacing: 14px;
+      font-weight: 400;
+      color: $main-color;
+      font-family: "微软雅黑", sans-serif;
+    }
+  }
+}
+
+.header--wing {
+  left: 0;
+  bottom: -20px;
+  height: 72px;
+}
+
+.company {
+  margin-left: 1458px;
+  width: 768px;
+  height: 67px;
+  background: url("../../../assets/company.png") center/cover no-repeat;
+}
+
+.datetime {
+  color: $main-color;
+  font-size: 48px;
+  text-align: center;
+  // display: inline-block;
+  left: unset;
+  right: 1573px;
+  width: 646px;
+  height: 67px;
+  background: url("../../../assets/date.png") center/cover no-repeat;
+}
+</style>

src/components/yx-dark/widget/index.vue

@@ -0,0 +1,41 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-09-08 13:30:13
+    description: 放在这中间的小组件
+-->
+
+<template>
+  <div class="yx-dark-widget">
+    <YxDarkWidgetContainer icon="1" title="车间温度" value="27℃" />
+    <YxDarkWidgetContainer icon="2" title="当前火向" value="东火" />
+    <YxDarkWidgetContainer icon="3" title="换火时间" value="12:23:33" />
+    <YxDarkWidgetContainer icon="4" title="剩余时间" value="6h" />
+  </div>
+</template>
+
+<script>
+import YxDarkWidgetContainer from "@/components/yx-dark/widget/widgetContainer.vue";
+
+export default {
+  name: "YxDarkWidget",
+  components: { YxDarkWidgetContainer },
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-widget {
+    display: flex;
+    gap: 16px;
+    position: absolute;
+    top: 80px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+</style>

src/components/yx-dark/widget/widgetContainer.vue

@@ -0,0 +1,101 @@
+<!-- 
+    filename: widgetContainer.vue
+    author: liubin
+    date: 2023-09-08 13:31:18
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-widget-container">
+    <div class="icon" :class="iconClass"></div>
+    <div class="content">
+      <div class="title">{{ title }}</div>
+      <div class="value">{{ value }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "YxDarkWidgetContainer",
+  components: {},
+  props: ["title", "value", "icon"],
+  data() {
+    return {};
+  },
+  computed: {
+    iconClass() {
+      switch (this.icon) {
+        case "1":
+          return "icon-1";
+        case "2":
+          return "icon-2";
+        case "3":
+          return "icon-3";
+        case "4":
+          return "icon-4";
+      }
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-widget-container {
+  width: 200px;
+  height: 98px;
+  border-radius: 4px;
+  box-shadow: inset 0 0 17px 0 #fff8;
+  // background: url(../../../assets/) 100% / contain no-repeat;
+  display: flex;
+  padding: 4px;
+  align-items: flex-start;
+}
+
+.icon {
+  width: 58px;
+  height: 58px;
+  background: #cfcfff;
+  // background: url(../../../assets/) 100% / contain no-repeat;
+}
+
+.content {
+//   padding-left: 12px;
+  display: flex;
+  flex-direction: column;
+//   justify-content: center;
+  align-items: flex-start;
+  height: 100%;
+}
+
+.title {
+    padding-top: 14px;
+    font-size: 14px;
+    line-height: 1;
+    color: #fffa;
+}
+
+.value {
+    padding-top: 10px;
+    font-size: 32px;
+    line-height: 34px;
+    color: #fff;
+}
+
+.icon-1 {
+  background: url(../../../assets/icon-1.png) 100% / contain no-repeat;
+}
+
+.icon-2 {
+  background: url(../../../assets/icon-2.png) 100% / contain no-repeat;
+}
+
+.icon-3 {
+  background: url(../../../assets/icon-3.png) 100% / contain no-repeat;
+}
+
+.icon-4 {
+  background: url(../../../assets/icon-4.png) 100% / contain no-repeat;
+}
+</style>

src/views/HomeView.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import BigHeader from "../components/layout/Header.vue";
+import BigHeader from "../components/yx-dark/layout/Header.vue";
 import Main from "../components/layout/Main.vue";
 import LeftSide from "./LeftSide.vue";
 import RightSide from "./RightSide.vue";

src/views/MainArea.vue

@@ -0,0 +1,34 @@
+<!-- 
+    filename: MainArea.vue
+    author: liubin
+    date: 2023-09-08 13:23:03
+    description: 
+-->
+
+<template>
+  <div class="main-area">
+    <YxDarkWidget />
+  </div>
+</template>
+
+<script>
+import YxDarkWidget from "@/components/yx-dark/widget/index.vue";
+
+export default {
+  name: "MainArea",
+  components: { YxDarkWidget },
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.main-area {
+  position: relative;
+  background: url("../assets/main-area-bg.png") 35% 98% / 95% no-repeat;
+}
+</style>

src/views/MainPanel.vue

@@ -24,16 +24,17 @@
     <RectContainer class="rightMiddle" />
     <RectContainer class="rightBottom" />
 
-    <div class="main-area" style="background: #fff2;" />
+    <MainArea style="grid-area: main" />
   </div>
 </template>
 
 <script>
 import RectContainer from "@/components/yx-dark/containers/rect.vue";
+import MainArea from "./MainArea.vue";
 
 export default {
   name: "MainPanel",
-  components: { RectContainer },
+  components: { RectContainer, MainArea },
   props: {},
   data() {
     return {};