src/views/dashboard/components/CompanyInfo.vue

@@ -60,18 +60,22 @@ export default {
   background: #4443;
   position: absolute;
   z-index: 9999;
-  padding: 14px;
+  // padding: 14px;
+  padding: 0.745vw;
   backdrop-filter: blur(2px);
   border-radius: 4px;
   transform: translate(-50%, -100%);
   box-shadow: inset 0 0 12px 2px #fff3;
+  // 在这里设置一个总的字体大小 不失为一个好的选择
+  font-size: 1vw;
 }
 
 h2 {
   margin: 6px 0;
   font-family: 优设标题黑;
   color: #fff;
-  font-size: 24px;
+  // font-size: 24px;
+  font-size: 1.276em;
 }
 
 ul,
@@ -87,24 +91,34 @@ ul {
   gap: 6px;
 }
 
+li {
+  font-size: 0.851em;
+}
+
 .corner {
   position: absolute;
   bottom: 0;
-  width: 12px;
-  height: 12px;
+  // width: 12px;
+  // height: 12px;
+  width: 0.639vw;
+  height: 0.639vw;
   border-style: solid;
   border-color: transparent;
 }
 
 .bl {
   left: 0;
-  border-left: 3px solid #ffa600;
-  border-bottom: 3px solid #ffa600;
+  border-left: 0.1596vw solid #ffa600;
+  border-bottom: 0.1596vw solid #ffa600;
+  // border-left: 3px solid #ffa600;
+  // border-bottom: 3px solid #ffa600;
 }
 
 .br {
   right: 0;
-  border-right: 3px solid #ffa600;
-  border-bottom: 3px solid #ffa600;
+  // border-right: 3px solid #ffa600;
+  // border-bottom: 3px solid #ffa600;
+  border-right: 0.1596vw solid #ffa600;
+  border-bottom: 0.1596vw solid #ffa600;
 }
 </style>

src/views/dashboard/components/Container.vue

@@ -0,0 +1,163 @@
+<!-- 
+    filename: Container.vue
+    author: liubin
+    date: 2024-04-09 10:44:09
+    description: 
+-->
+
+<template>
+  <div class="dashboard-container">
+    <!-- decoration  -->
+    <div class="corner tl"></div>
+    <div class="corner tr"></div>
+    <div v-if="side == 'left'" class="corner bl"></div>
+    <div v-if="side == 'right'" class="corner br"></div>
+    <!-- content  -->
+    <div
+      class="container-head"
+      :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
+    >
+      <Icon :icon="icon"></Icon>
+      <h2 class="container-title">{{ title }}</h2>
+    </div>
+    <div
+      class="container-body"
+      :class="[
+        side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
+      ]"
+    ></div>
+  </div>
+</template>
+
+<script>
+import ContainerIconVue from "./ContainerIcon.vue";
+export default {
+  name: "DashboardContainer",
+  components: {
+    Icon: ContainerIconVue,
+  },
+  props: {
+    side: {
+      type: String,
+      default: "left",
+    },
+    icon: {
+      type: String,
+      default: "cube",
+    },
+    title: {
+      type: String,
+      default: "Default Title",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.dashboard-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1.18vw;
+      line-height: 1.39vw;
+      font-weight: normal;
+      letter-spacing: 2px;
+    }
+  }
+
+  .container-body {
+    padding: 8px;
+    display: flex;
+    flex: 1;
+  }
+
+  .corner {
+    z-index: 1;
+    position: absolute;
+    // width: 16px;
+    // height: 16px;
+    width: 0.95vw;
+    height: 0.95vw;
+  }
+
+  .corner.tl {
+    border-top: 2px solid #0175dc;
+    border-left: 2px solid #0175dc;
+    top: 0;
+    left: 0;
+  }
+
+  .corner.tr {
+    top: 0;
+    right: 0;
+    border-top: 2px solid #0175dc;
+    border-right: 2px solid #0175dc;
+  }
+
+  .corner.bl {
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    bottom: 0;
+    left: 0;
+    // border-left: 10px solid #0175dc;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid transparent;
+    border-left: 0.532vw solid #0175dc;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .corner.br {
+    bottom: 0;
+    right: 0;
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    // border-left: 10px solid transparent;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid #0175dc;
+    border-left: 0.532vw solid transparent;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid #0175dc;
+  }
+
+  .gradient-to-right {
+    background: linear-gradient(to right, #0c3f68cc, transparent);
+  }
+
+  .gradient-to-left {
+    background: linear-gradient(to left, #0c3f68cc, transparent);
+  }
+
+  .body-gradient-to-right {
+    background: linear-gradient(to right, #0003, transparent);
+  }
+
+  .body-gradient-to-left {
+    background: linear-gradient(to left, #0003, transparent);
+  }
+}
+</style>

src/views/dashboard/components/ContainerIcon.vue

@@ -0,0 +1,33 @@
+<!-- 
+    filename: ContainerIcon.vue
+    author: liubin
+    date: 2024-04-09 16:41:36
+    description: 
+-->
+
+<template>
+  <div class="container-icon"></div>
+</template>
+
+<script>
+export default {
+  name: "ContainerIcon",
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.container-icon {
+  //   width: 32px;
+  //   height: 32px;
+  width: 1.701vw;
+  height: 1.701vw;
+  background: #ccc2;
+}
+</style>

src/views/dashboard/components/Header.vue

@@ -0,0 +1,66 @@
+<!-- 
+    filename: Header.vue
+    author: liubin
+    date: 2024-04-09 09:04:12
+    description: 
+-->
+
+<template>
+  <header class="dashboard-header">
+    <h1>发电玻璃智能管控平台地图总览</h1>
+    <span class="side left">晴转多云 14℃</span>
+    <span class="side right">23:12|星期一|2023.12.13</span>
+  </header>
+</template>
+
+<script>
+export default {
+  name: "DashboardHeader",
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.dashboard-header {
+  height: 8vh;
+  background: url(../../../assets/images/homeindex/header-bg.png) no-repeat 0 0 /
+    100% 100%;
+  position: relative;
+  display: grid;
+  place-content: center;
+}
+
+h1 {
+  //   font-size: 32px;
+  font-size: 1.65vw;
+  //   line-height: 45px;
+  line-height: 1.25;
+  letter-spacing: 0.32vw;
+  user-select: none;
+  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
+}
+
+.side {
+  position: absolute;
+  font-size: 1.18vw;
+  line-height: 24px;
+  letter-spacing: 2px;
+  color: #69b4ff;
+}
+
+.left {
+  left: 22vw;
+  top: 4.65vh;
+}
+
+.right {
+  right: 15vw;
+  top: 4.65vh;
+}
+</style>

src/views/index.vue

@@ -2,10 +2,17 @@
   <div class="dashboard-factory-all">
     <div id="map-container">
       <div class="databoard">
-        <div class="db-header"></div>
+        <db-header class="db-header"></db-header>
         <div class="db-body">
-          <div class="db-left"></div>
-          <div class="db-right"></div>
+          <div class="db-left">
+            <db-container icon="cube" title="FTO投入"></db-container>
+            <db-container icon="chip" title="芯片投入"></db-container>
+          </div>
+          <div class="db-right">
+            <db-container side="right" icon="chip2" title="芯片产出"></db-container>
+            <db-container side="right" icon="std" title="标准组件产出"></db-container>
+            <db-container side="right" icon="stack" title="BIPV产出"></db-container>
+          </div>
         </div>
       </div>
     </div>
@@ -20,11 +27,17 @@
 
 <script>
 import store from "@/store";
+import DashboardHeader from "./dashboard/components/Header.vue";
 import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
+import Container from "./dashboard/components/Container.vue";
 
 export default {
   name: "Index",
-  components: { CompanyInfo },
+  components: {
+    CompanyInfo,
+    DbHeader: DashboardHeader,
+    DbContainer: Container,
+  },
   data() {
     return {
       visible: false,
@@ -34,6 +47,9 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.initPins();
+
+      // 调整 echarts 大小
+      window.onresize = () => {};
     });
   },
   beforeRouteEnter(to, from, next) {
@@ -104,9 +120,9 @@ export default {
   background: #151516;
   position: fixed;
   top: 0;
-  left: 0;
+  left: 54px;
   height: 100vh;
-  width: 100vw;
+  width: calc(100vw - 54px);
   z-index: 1000;
   color: #fff;
 }
@@ -128,23 +144,20 @@ export default {
     flex-direction: column;
   }
 
-  .db-header {
-    height: 88px;
-    background: #f001;
-  }
-
   .db-body {
     flex: 1;
-    background: #0f01;
     display: flex;
     justify-content: space-between;
   }
 
   .db-left,
   .db-right {
-    background: #00f2;
-    width: 420px;
+    // width: 420px;
+    width: 24vw;
     padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
   }
 }
 </style>
@@ -154,8 +167,12 @@ export default {
   display: inline-block;
   position: absolute;
   z-index: 9998;
+  width: 1.702vw;
+  height: 1.702vw;
+ /* 
   width: 32px;
-  height: 32px;
+  height: 32px; 
+  */
   background: url(../assets/pinicon.png) no-repeat 0 0 / 100% 100%;
   transition: transform 0.1s linear;
   cursor: pointer;