update

src/components/yx-dark/containers/rect.vue

@@ -7,7 +7,13 @@
 
 <template>
   <div class="rect-container">
-    <slot />
+    <section class="title" v-if="title">
+      <span class="icon" v-if="icon" :class="icon"></span>
+      <span class="title__value">{{ title }}</span>
+    </section>
+    <section class="content">
+      <slot />
+    </section>
   </div>
 </template>
 
@@ -15,7 +21,7 @@
 export default {
   name: "RectContainer",
   components: {},
-  props: {},
+  props: ["icon", "title"],
   data() {
     return {};
   },
@@ -25,10 +31,70 @@ export default {
 </script>
 
 <style scoped lang="scss">
+span {
+  display: inline-block;
+}
+
 .rect-container {
   // background: url(../../../assets/rect-bg.png) no-repeat 100% / contain; // rgba(45, 230, 196, 0.8);
   padding: 24px;
   // width: 624px;
   // height: 304px;
+  display: flex;
+  flex-direction: column;
+}
+
+section.title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.title__value {
+  font-size: 24px;
+  letter-spacing: 1px;
+  line-height: 1;
+  color: #7ffff5;
+}
+
+section.content {
+  height: 1px;
+  flex: 1;
+  overflow: visible;
+}
+
+.icon {
+  width: 28px;
+  height: 28px;
+  margin-right: 8px;
+}
+
+.icon-left-middle {
+  background: url(../../../assets/icon-left-middle.png) no-repeat 100% / contain;
+}
+
+.icon-left-bottom {
+  background: url(../../../assets/icon-left-bottom.png) no-repeat 100% / contain;
+}
+
+.icon-gas {
+  background: url(../../../assets/icon-gas.png) no-repeat 100% / contain;
+}
+
+.icon-kiln-top {
+  background: url(../../../assets/icon-kiln-top.png) no-repeat 100% / contain;
+}
+
+.icon-kiln-bottom {
+  background: url(../../../assets/icon-kiln-bottom.png) no-repeat 100% / contain;
+}
+
+.icon-right-bottom {
+  background: url(../../../assets/icon-right-bottom.png) no-repeat 100% /
+    contain;
+}
+
+.icon-right-top {
+  background: url(../../../assets/icon-right-top.png) no-repeat 100% / contain;
 }
 </style>

src/views/MainPanel.vue

@@ -10,26 +10,26 @@
     <RectContainer class="leftTop">
       <WaterTemp />
     </RectContainer>
-    <RectContainer class="leftMiddle">
+    <RectContainer class="leftMiddle" title="窑炉进口水温历史" icon="icon-left-middle">
       <GradientChart />
     </RectContainer>
     <!-- <RectContainer class="leftBottom">
       <ChartContainer />
     </RectContainer> -->
 
-    <RectContainer class="bottom-1 bg-bottom">
+    <RectContainer class="bottom-1 bg-bottom" title="油流量" icon="icon-left-bottom">
       <ChartContainer />
     </RectContainer>
-    <RectContainer class="bottom-2 bg-bottom">
+    <RectContainer class="bottom-2 bg-bottom" title="天然气流量" icon="icon-gas">
       <ChartContainer />
     </RectContainer>
-    <RectContainer class="bottom-3 bg-bottom">
+    <RectContainer class="bottom-3 bg-bottom" title="窑顶温度" icon="icon-kiln-top">
       <ChartContainer />
     </RectContainer>
-    <RectContainer class="bottom-4 bg-bottom">
+    <RectContainer class="bottom-4 bg-bottom" title="窑底温度" icon="icon-kiln-bottom">
       <ChartContainer />
     </RectContainer>
-    <RectContainer class="bottom-5 bg-bottom">
+    <RectContainer class="bottom-5 bg-bottom" title="锡槽温度" icon="icon-right-bottom">
       <ChartContainer />
     </RectContainer>
     <!-- <RectContainer class="bottom-6">
@@ -42,7 +42,7 @@
       <ChartContainer />
     </RectContainer> -->
 
-    <RectContainer class="rightTop">
+    <RectContainer class="rightTop" title="风机运行情况" icon="icon-right-top">
       <TablesContainer />
     </RectContainer>
     <!-- <RectContainer class="rightMiddle">