内容提交

longyvfengyun

2023-11-20 a3b4356b688544bf578ae4754bd66f58ffaec764

 src/views/user/videoList.vue

@@ -1,11 +1,169 @@
<script setup>
import {onMounted, ref} from "vue";

const tableData = ref([
   {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
   },
   {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
   },
   {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
   },
   {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
   },
   {
      date: '2016-05-08',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
   },
   {
      date: '2016-05-06',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
   },
   {
      date: '2016-05-07',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
   },
]);

const carName = ref(null);

import {
   driveInfModule
} from "@/views/moudle/driveInf/driveInf";

const {
   page,
   pageSize,
   driveList,
   getDriveList
} = driveInfModule();

const searchDriveList = async ()=>{
   let rs = await getDriveList();
   console.log(rs);
}

onMounted(()=>{
   searchDriveList();
});
</script>

<template>
   <div>摄像头列表</div>
   <div class="page-container">
      <div class="page-content">
         <div class="page-header">
            <div class="input-list">
               <div class="input-item">
                  <div class="input-wrapper">
                     <div class="input-label">车辆名称</div>
                     <div class="input-content">
                        <el-input
                           v-model="carName"
                           size="large"
                           placeholder="Please Input"/>
                     </div>
                  </div>
               </div>
               <div class="input-item">
                  <div class="input-wrapper">
                     <div class="input-label">在线状态</div>
                     <div class="input-content">
                        <el-input
                           v-model="carName"
                           size="large"
                           placeholder="Please Input"/>
                     </div>
                  </div>
               </div>
               <div class="input-item">
                  <div class="input-wrapper">
                     <div class="input-label">国标设备编码</div>
                     <div class="input-content">
                        <el-input
                           v-model="carName"
                           size="large"
                           placeholder="Please Input"/>
                     </div>
                  </div>
               </div>
               <div class="input-item">
                  <el-button type="primary" plain>查询</el-button>
               </div>
            </div>
         </div>
         <div class="page-content">
            <el-table :data="tableData" height="100%">
               <el-table-column prop="date" label="Date" />
               <el-table-column prop="name" label="Name" />
               <el-table-column prop="address" label="Address" />
            </el-table>
         </div>
         <div class="page-footer">
            <div class="el-pagination-container">
               <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
            </div>
         </div>
      </div>
   </div>
</template>

<style scoped lang="less">
.page-container {
   height: 100%;
   padding: 12px;
   .page-content {
      display: flex;
      height: 100%;
      border-radius: 4px;
      box-shadow: 0 0 12px rgba(0, 0, 0, .16);
      flex-direction: column;
      .page-header {
         padding: 8px;
      }
      .page-content {
         flex: 1;
         overflow-y: auto;
      }
      .page-footer {
         padding: 8px 0;
         text-align: center;
         .el-pagination-container {
            display: inline-block;
         }
      }
   }
}

.input-list {
   .input-item {
      display: inline-block;
      margin-left: 8px;
   }
}
.input-wrapper {
   display: flex;
   .input-content {
      width: 160px;
   }
   .input-label {
      font-size: 14px;
      line-height: 40px;
      vertical-align: bottom;
      margin-right: 8px;
   }
}
</style>