修改页面布局

src/assets/styles/ruoyi.scss

@@ -135,7 +135,7 @@
 
 .pagination-container .el-pagination {
   right: 0;
-  position: absolute;
+  //position: absolute;
 }
 
 @media (max-width: 768px) {

src/components/TopNav/index.vue

@@ -6,7 +6,7 @@
     @select="handleSelect"
   >
     <template v-for="(item, index) in newTopNev">
-      <el-menu-item class="menuStyle" style="font-size: small;background-color: #F6F6FA;border-top-right-radius: 9%;border-top-left-radius: 9%;text-align: center;margin-left: 1px" :index="item.path" :key="index"
+      <el-menu-item class="menuStyle" style="font-size: small;background-color: #F6F6FA;border-top-right-radius: 15px;border-top-left-radius: 15px;text-align: center;margin-left: 1px" :index="item.path" :key="index"
       >
         <i :class="item.icon" style="width: 10px;height: 10px;margin-top: -12px"></i>
         {{ item.name }}</el-menu-item
@@ -49,12 +49,12 @@ export default {
           name: '首页',
         },
         {
-          path: '/',
+          path: '/employee/employee',
           icon: 'el-icon-user',
           name: '员工信息',
         },
         {
-          path: '/monitoringPlayback/video',
+          path: '/monitoringhistory/history',
           icon: 'el-icon-view',
           name: '历史记录',
         }
@@ -220,7 +220,7 @@ export default {
 //}
 .menuStyle{
   box-shadow: 0 0 8px #D4D9E5;
-  height: 30px;
+  height: 60px;
   border-bottom: transparent;
 }
 .menuStyle:hover{
@@ -231,15 +231,15 @@ export default {
   color: transparent;
 }
 ::v-deep .el-submenu{
-  height: 30px;
+  height: 60px;
 }
 .el-menu--horizontal > .el-menu-item{
-  margin-top: 30px;
-  height: 40px;
-  line-height: 30px;
+  margin-top: 19px;
+  height: 60px;
+  line-height: 35px;
 }
 .el-menu--horizontal > .el-menu-item.is-active{
-  margin-top: 23px;
+  margin-top: 12px;
 }
 //.el-menu--horizontal > .el-menu-item.is-active{
 //  //margin-top: 30px;
@@ -247,6 +247,8 @@ export default {
 //  line-height: 30px;
 //}
 .el-menu-item.is-active{
+  font-weight: bolder;
+  line-height: 45px;
   color: white !important;
   background-color: #0D8EEE !important;
 }

src/router/index.js

@@ -68,7 +68,7 @@ export const constantRoutes = [
     children: [
       {
         path: 'index',
-        component: () => import('@/views/index'),
+        component: () => import('@/views/video/index'),
         name: 'Index',
         meta: { title: '首页', icon: 'dashboard', affix: true }
       }
@@ -129,6 +129,20 @@ export const constantRoutes = [
         meta: { title: '历史记录', icon: 'user' }
       }
     ]
+  },
+  {
+    path: '/employee',
+    component: Layout,
+    hidden: false,
+    redirect: 'employee',
+    children: [
+      {
+        path: 'employee',
+        component: () => import('@/views/employee/index'),
+        name: 'employee',
+        meta: { title: '历史记录', icon: 'user' }
+      }
+    ]
   }
 ]
 

src/views/history/index.vue

@@ -18,13 +18,23 @@
                         placeholder="请选择监控时间">
         </el-date-picker>
       </el-form-item>
+<!--      <el-form-item label="监控状态" prop="monitorState">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.monitorState"-->
+<!--          placeholder="请输入监控状态"-->
+<!--          clearable-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
       <el-form-item label="监控状态" prop="monitorState">
-        <el-input
-          v-model="queryParams.monitorState"
-          placeholder="请输入监控状态"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-select v-model="queryParams.monitorState" placeholder="请选择监控状态" clearable>
+          <el-option
+            v-for="dict in dict.type.history_state"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -56,7 +66,11 @@
           <span>{{ parseTime(scope.row.monitorTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="监控状态" align="center" prop="monitorState" />
+      <el-table-column label="监控状态" align="center" prop="monitorState">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.history_state" :value="scope.row.monitorState"/>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -96,6 +110,7 @@ import {parseTime} from "../../utils/ruoyi";
 
 export default {
   name: "Histable",
+  dicts: ['history_state'],
   data() {
     return {
       // 遮罩层
@@ -144,6 +159,7 @@ export default {
         this.total = response.total;
         this.loading = false;
       });
+
     },
     // 取消按钮
     cancel() {

src/views/video/index.vue

 <template>
-  <div class="video-now">
+  <div class="video-now" style="margin-top: 20px">
 <!--    <div @click="setLayout('1x1')">1x1</div>
     <div @click="setLayout('2x2')">2x2</div>-->
     <!-- 创建一个用于显示视频的容器 -->
@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script>
+<script >
 import {getCameras} from "@/api/system/video";
 import videoParams from './videoParams'
 
@@ -208,16 +208,18 @@ export default {
 
 <style scoped>
 .video-watch {
+  margin-top: 20px;
   min-height: calc(80vh - 84px);
   width: 90%;
 }
 
 .video-now {
   width: 95vw;
-  height: 90vh;
+  height: 87vh;
   background: #fff;
   margin: 0 auto;
   display: flex;
   justify-content: center;
 }
+
 </style>