网点自检代码提交

src/views/iot/dailycheck/index.vue

@@ -52,16 +52,37 @@
         <!--  日历和饼图  -->
         <el-col :xs="24" :sm="12" :md="9" :lg="9">
           <p class="card-title">统计</p>
-          <div>
-            <Calendar
-              :startDate="this.queryParams.range[0]"
-              :endDate="this.queryParams.range[1]"
-              :doDates="this.doDates"
-              :unDoDates="this.unDoDates"
-              :halfDoDates="this.halfDoDates"
-              @select="onSelectDate"
-            ></Calendar>
-          </div>
+          <el-card>
+            <div>
+              <Calendar
+                :startDate="this.queryParams.range[0]"
+                :endDate="this.queryParams.range[1]"
+                :doDates="this.doDates"
+                :unDoDates="this.unDoDates"
+                :halfDoDates="this.halfDoDates"
+                @select="onSelectDate"
+              ></Calendar>
+              <el-descriptions :column="1">
+                <el-descriptions-item label="丢失时段">
+                  <!--          <time-line></time-line>-->
+                  <ul class="legend-box">
+                    <li>
+                      <i class="legend" style="background-color: green"></i>
+                      <span>已检</span>
+                    </li>
+                    <li>
+                      <i class="legend" style="background-color: orange"></i>
+                      <span>未检查完全</span>
+                    </li>
+                    <li>
+                      <i class="legend" style="background-color: red"></i>
+                      <span>未检</span>
+                    </li>
+                  </ul>
+                </el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </el-card>
           <div style="height: 340px">
             <report
               :rateData="this.rateData"
@@ -370,6 +391,26 @@ export default {
     text-align: right;
   }
 }
-
-
+.legend-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  > li {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    margin-right: 20px;
+    i {
+      margin-right: 5px;
+    }
+  }
+}
+.legend {
+  display: block;
+  width: 10px;
+  height: 10px;
+  margin-right: 5px;
+}
 </style>