道路监控摄像头列表 - 智能交通管理系统

<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"
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 => {
        console.log(res)
        this.cameraList = res.rows
        this.totalCamera = res.total
      })
    },
    changePage(page) {
      this.queryParamsCamera.pageNum = page
      this.currentPage = page
      this.getObtainListCamera()
    }
  }
}
</script>
<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;
    }
  }
}
</style>