摄像头列表分页展示 - 路口摄像头管理系统

<template>
  <div class='addAcciendt'>
    <div class='addAcciendt-left'>
      <div class='tabHead'>
        <ul>
          <li v-for='(tab, index) in tabs' :key='index' id='tabbox' :class='{ active: activeTab === tab.tabName }'
            @click='activeTab = tab.tabName'>
            <i :class='tab.tabIcon' id='tabIcon'></i>
            <p class='tabName'> {{ tab.tabName }}</p>
          </li>
        </ul>
      </div>
      <div v-for='(tab, index) in tabs' :key='index' v-show='activeTab === tab.tabName' class='tabList'>
        <div class='cameraList' v-if='activeTab == '摄像头''>
          <template v-for='item of cameraList'>
            <div class='cameraBox' :key='item.id'>
              <img class='cameraQiu' src='../../../assets/images/accident/img_camera-qiu.png' alt='' :key='item.id'>
              <p class='itemName'>{{ item.name }}</p>
            </div>
          </template>
        </div>
        <el-pagination class='page' size='small' :total='totalCamera' :current-page='currentPage' :page-size='queryParamsCamera.pageSize'
          @current-change='changePage'></el-pagination>
      </div>
    </div>
    <div class='addAcciendt-right'>
      <img src='../../../assets/images/accident/img_chalu.png' alt=''>
    </div>
  </div>
</template>
<script>
import { zngkTableRoadCamera } from '@/api/accidentManage/accidentScreen'
<p>export default {
data() {
return {
queryParamsCamera: {
pageNum: 1,
pageSize: 6
},
cameraList: [],
tabs: [{
tabName: '摄像头',
tabIcon: 'el-icon-video-camera'
}, {
tabName: '大屏',
tabIcon: 'el-icon-s-platform'
}],
activeTab: '摄像头',
totalCamera: 0,
currentPage: 1
}
},
created() {
this.getObtainListCamera()
},
methods: {
getObtainListCamera() {
zngkTableRoadCamera(this.queryParamsCamera).then(res =&gt; {
console.log(res)
this.cameraList = res.rows
this.totalCamera = res.total
})
},
changePage(page) {
this.queryParamsCamera.pageNum = page
this.currentPage = page
this.getObtainListCamera()
}
}
}
</script></p>
<style lang='less' scoped>
.addAcciendt {
  height: 100%;
  display: flex;
  .addAcciendt-left {
    position: absolute;
    left: 0;
    width: 250px;
    height: 100%;
    background: #132d39;
    display: flex;
    z-index: 111;
    .tabHead {
      display: flex;
      justify-content: space-around;
      // margin-bottom: 20px;
      width: 100px;
      border-right: 1px solid #000000;
    }
    .tabList {
      width: 100%;
    }
    .tabHead ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    .tabHead li {
      cursor: pointer;
      font: normal 16px/20px '微软雅黑';
      color: #fff;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      // font-weight: bold;
      // padding: 10px 20px;
    }
    #tabbox {
      display: flex;
      flex-direction: column;
      align-items: center;
      #tabIcon {
        font-size: 40px;
      }
      .tabName {
        margin: 5px 0;
      }
    }
    .tabHead li.active {
      font: normal 16px/20px '微软雅黑';
      // background-color: #ddd;
      color: #06c0c4;
    }
    .cameraList {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      height: 100%;
      // margin-left: -10px !important;
      .cameraBox {
        display: flex;
        height: 150px;
        flex-direction: column;
        align-items: center;
        .cameraQiu {
          width: 50px;
          height: 50px;
          margin-top: 15px;
        }
        .itemName {
          margin: 20px 0;
          font: normal 13px/22px '微软雅黑';
          color: #fff;
        }
      }
    }
  }
  .addAcciendt-right {
    position: fixed;
    img {
      //   width: 1920px;
      // height: 1080px;
    }
  }
}
</styl