界面优化

src/components/PeopleRecord.vue

@@ -8,9 +8,8 @@
       <div class="head-info">门禁记录</div>
     </div>
 
-    <!-- 左侧区域 -->
+    <!-- 左侧实时监测区域区域 -->
     <div class="left">
-      <!-- 实时监测区域 -->
       <div class="left-watch">
         <!-- 实时监测标题区域 -->
         <div class="watch-title">
@@ -19,107 +18,100 @@
           </div>
           <div class="watch-info">实时监测</div>
         </div>
+        <!-- 实时监测筛选区域 -->
+        <div class="watch_search">
+          <div class="search_time">
+            时间：
+            <el-date-picker
+              type="date"
+              size="small"
+              placeholder="选择日期"
+              v-model="timeValue"
+              @change="handleChange"
+              value-format="yyyy-MM-dd"
+            >
+            </el-date-picker>
+          </div>
+          <div class="search_keyword">
+            关键字：
+            <el-input
+              style="width: 200px"
+              placeholder="请输入关键字"
+              size="small"
+              clearable
+              v-model="keyword"
+              @change="handleChange"
+            >
+            </el-input>
+          </div>
+        </div>
         <!-- 实时监测表格区域 -->
         <div class="watch-form">
           <el-table
+            v-loading="loading"
+            element-loading-text="加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
             :data="tableData"
-            border
             style="width: 100%"
-            height="517"
+            height="467"
             v-moretable="moretable"
           >
-            <el-table-column label="捕获" header-align="center" width="100">
+            <el-table-column label="捕获" align="center" width="93">
               <template slot-scope="{ row }">
                 <img
                   :src="row.pictureScene"
                   style="width: 82px; height: 82px"
+                  @click="handleBigImg(row.pictureScene)"
                 />
               </template>
             </el-table-column>
-            <el-table-column label="识别" header-align="center">
+            <el-table-column label="识别照片" align="center" width="93">
               <template slot-scope="{ row }">
-                <div class="watch-form-list">
-                  <div class="table_left">
-                    <img
-                      :src="row.pictureTemplate"
-                      style="width: 82px; height: 82px"
-                    />
-                  </div>
-                  <div class="table_center">
-                    <div>识别ID：{{ row.recognitionId }}</div>
-                    <div>姓名：{{ row.personName }}</div>
-                    <div>身份：{{ row.identity }}</div>
-                  </div>
-                  <div class="table_right">
-                    <div>时间：{{ row.dateTime }}</div>
-                    <div>位置：{{ row.address }}</div>
-                  </div>
-                </div>
+                <img
+                  :src="row.pictureTemplate"
+                  style="width: 82px; height: 82px"
+                  @click="handleBigImg(row.pictureTemplate)"
+                />
               </template>
             </el-table-column>
-          </el-table>
-        </div>
-      </div>
-      <!-- 历史记录区域 -->
-      <div class="left-record">
-        <!-- 历史记录标题区域 -->
-        <div class="record-title">
-          <div class="record-img">
-            <img src="@/assets/jiantou.png" />
-          </div>
-          <div class="record-info">历史记录</div>
-        </div>
-        <!-- 历史记录表格区域 -->
-        <div class="record-form">
-          <!-- 标题 -->
-          <div class="record-form-title">历史记录</div>
-          <!-- 时间选择器 -->
-          <div class="record-form-time">
-            <div class="time">
-              <el-date-picker
-                type="date"
-                size="mini"
-                :editable="false"
-                placeholder="选择日期"
-                value-format="yyyy-MM-dd"
-                v-model="dateTime"
-                @change="handleChangeTime"
-              >
-              </el-date-picker>
-            </div>
-          </div>
-          <!-- 表格数据 -->
-          <div class="record-form-list">
-            <el-table
-              :data="recordList"
-              style="width: 100%"
-              height="428"
-              v-moretable="moretable_record"
+            <el-table-column
+              prop="recognitionId"
+              label="识别ID"
+              align="center"
+              width="93"
             >
-              <el-table-column
-                prop="name"
-                label="姓名"
-                align="center"
-                width="76"
-              >
-              </el-table-column>
-              <el-table-column
-                prop="address"
-                label="地址"
-                align="center"
-                width="89"
-                show-overflow-tooltip
-              >
-              </el-table-column>
-              <el-table-column
-                prop="time"
-                label="时间"
-                align="center"
-                width="76"
-              >
-              </el-table-column>
-            </el-table>
-          </div>
+            </el-table-column>
+            <el-table-column
+              prop="personName"
+              label="姓名"
+              align="center"
+              width="100"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="identity"
+              label="身份"
+              align="center"
+              width="100"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="dateTime"
+              label="时间"
+              align="center"
+              width="160"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="address"
+              label="位置"
+              align="center"
+              width="117"
+              show-overflow-tooltip
+            >
+            </el-table-column>
+          </el-table>
         </div>
       </div>
     </div>
@@ -151,6 +143,11 @@
         <div class="right-pie-body" id="pie"></div>
       </div>
     </div>
+
+    <!-- 点击图片放大区域弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" width="500px">
+      <div class="dialog"><img :src="pop_imgurl" /></div>
+    </el-dialog>
   </div>
 </template>
 
@@ -166,12 +163,10 @@ export default {
       tableData: [],
       // 实时监测人员列表当前页
       page: 1,
-      // 历史记录人员列表数据
-      recordList: [],
-      // 历史记录人员列表当前页
-      record_page: 1,
-      // 时间选择框选择的时间值
-      dateTime: null,
+      // 时间筛选框绑定值
+      timeValue: "",
+      // 关键字搜索框绑定值
+      keyword: "",
       // 折线图数据
       dateTimeList: [], // 最近7小时的时间数组
       alumniList: [], // 校友数组
@@ -182,11 +177,16 @@ export default {
       visitorList: [], // 访客数组
       // 饼形图数据
       pieData: [],
+      // 图片放大弹窗控制属性
+      dialogVisible: false,
+      // 弹窗图片路径
+      pop_imgurl: null,
+      // 实时监测表格加载中效果
+      loading: false,
     };
   },
   created() {
     this.getData();
-    this.getRecordData();
     this.getRatioData();
     this.getTrafficData();
   },
@@ -200,14 +200,23 @@ export default {
     },
   },
   methods: {
+    // 筛选回调
+    handleChange() {
+      this.tableData = [];
+      this.page = 1;
+      this.getData();
+    },
     // 获取实时监测列表数据
     async getData() {
+      this.loading = true;
       let res = await this.$axios({
         url: "/accessRecord/access/record/realTime",
         method: "get",
         params: {
           page: this.page,
-          size: null,
+          // size: null,
+          dateTime: this.timeValue,
+          keyWord: this.keyword,
         },
       });
       // console.log(res);
@@ -216,24 +225,7 @@ export default {
       } else {
         this.$message.error(res.data.desc);
       }
-    },
-    // 获取历史记录列表数据
-    async getRecordData() {
-      let res = await this.$axios({
-        url: "/accessRecord/access/record/history",
-        method: "get",
-        params: {
-          dateTime: this.dateTime,
-          page: this.record_page,
-          size: null,
-        },
-      });
-      // console.log(res);
-      if (res.data.status == 20001) {
-        this.recordList = [...this.recordList, ...res.data.data];
-      } else {
-        this.$message.error(res.data.desc);
-      }
+      this.loading = false;
     },
     // 获取人员比例数据
     async getRatioData() {
@@ -267,22 +259,16 @@ export default {
         this.$message.error(res.data.desc);
       }
     },
-    // 历史记录表格时间选择框改变时间回调
-    handleChangeTime() {
-      this.recordList = [];
-      this.record_page = 1;
-      this.getRecordData();
+    // 点击图片回调
+    handleBigImg(imgUrl) {
+      this.pop_imgurl = imgUrl;
+      this.dialogVisible = true;
     },
     // 实时监测表格滑动到底部加载更多回调
     moretable() {
       this.page += 1;
       this.getData();
     },
-    // 历史记录表格滑动到底部加载更多回调
-    moretable_record() {
-      this.record_page += 1;
-      this.getRecordData();
-    },
     // 创建折线图
     getLineChart() {
       let chartLineDom = document.getElementById("line");
@@ -395,6 +381,9 @@ export default {
       let myPieChart = echarts.init(chartPieDom);
       // 饼形图表配置
       let pieOption = {
+        tooltip: {
+          trigger: "item",
+        },
         legend: {
           orient: "vertical",
           align: "left",
@@ -443,16 +432,18 @@ export default {
   margin: auto;
   width: 1161px;
   height: 642px;
+  background-image: url(../assets/backImg.png);
+  background-size: 100% 100%;
   background-color: #24578c;
   .head {
     display: flex;
     width: 1161px;
-    height: 55px;
-    border-bottom: 1px solid #58beff;
+    height: 60px;
     .head-msg {
       display: flex;
       justify-content: center;
       align-items: center;
+      margin-top: 5px;
       width: 58px;
       height: 55px;
       img {
@@ -460,6 +451,7 @@ export default {
       }
     }
     .head-info {
+      margin-top: 5px;
       line-height: 55px;
       font-size: 25px;
       font-weight: bold;
@@ -474,12 +466,12 @@ export default {
     height: 586px;
     .left-watch {
       margin: 0 11px 0 17px;
-      width: 487px;
+      width: 756px;
       height: 571px;
       .watch-title {
         display: flex;
         align-items: center;
-        width: 487px;
+        width: 756px;
         height: 54px;
         .watch-img {
           width: 26px;
@@ -497,86 +489,28 @@ export default {
           color: #0febff;
         }
       }
-      .watch-form {
-        width: 487px;
-        height: 517px;
-        // border: 1px solid #58beff;
-        .watch-form-list {
-          display: flex;
-          justify-content: space-evenly;
-
-          .table_left {
-            flex: 1;
-          }
-          .table_center {
-            flex: 2;
-            display: flex;
-            flex-direction: column;
-            margin-left: 10px;
-            div {
-              flex: 1;
-            }
-          }
-          .table_right {
-            flex: 2;
-          }
-        }
-      }
-    }
-    .left-record {
-      width: 254px;
-      height: 571px;
-      .record-title {
+      .watch_search {
         display: flex;
-        align-items: center;
-        width: 254px;
-        height: 54px;
-        .record-img {
-          width: 26px;
-          height: 16px;
-          img {
-            width: 100%;
-          }
+        margin-top: -10px;
+        width: 756px;
+        height: 60px;
+        color: #fff;
+
+        .search_time {
+          flex: 1;
+          display: flex;
+          align-items: center;
         }
-        .record-info {
-          margin-left: 10px;
-          width: 79px;
-          height: 25px;
-          font-size: 19px;
-          font-weight: bold;
-          color: #0febff;
+        .search_keyword {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          margin-left: -165px;
         }
       }
-      .record-form {
-        width: 254px;
-        height: 517px;
-        border: 1px solid #fff;
-        .record-form-title {
-          width: 254px;
-          height: 48px;
-          line-height: 48px;
-          font-size: 19px;
-          font-weight: 600;
-          color: #ffffff;
-          text-align: center;
-          border-bottom: 1px solid #fff;
-        }
-        .record-form-time {
-          width: 254px;
-          height: 40px;
-          .time {
-            margin: auto;
-            width: 160px;
-            line-height: 40px;
-            .el-date-editor.el-input {
-              width: 100%;
-            }
-          }
-        }
-        .record-form-list {
-          width: 254px;
-          height: 429px;
-        }
+      .watch-form {
+        width: 756px;
+        height: 467px;
       }
     }
   }
@@ -643,12 +577,23 @@ export default {
       }
     }
   }
+  .dialog {
+    width: 100%;
+    img {
+      width: 100%;
+    }
+  }
   ::v-deep .el-table,
   ::v-deep .el-table__expanded-cell {
     background-color: transparent;
     background-color: #24578c;
   }
 
+  ::v-deep .el-dialog__header,
+  ::v-deep .el-dialog__body {
+    padding: 0;
+  }
+
   ::v-deep .el-table th,
   ::v-deep .el-table tr,
   ::v-deep .el-table td {
@@ -661,16 +606,19 @@ export default {
   }
 
   ::v-deep .el-table__header-wrapper {
-    font-size: 19px;
+    background-color: transparent;
+    background-color: #25608f;
   }
-  // 滚动条背景色
+  // 滚动条隐藏
   ::-webkit-scrollbar {
-    background: #24578c;
+    height: 0;
+    width: 0;
+    color: transparent;
   }
 
   /*定义滑块 样式*/
   ::-webkit-scrollbar-thumb {
-    border-radius: 3px;
+    border-radius: 18px;
     background-color: rgba($color: #063568, $alpha: 0.5);
   }
 }