xjsaas-ui/src/views/big-screen/overview-components/inspection-vehicles.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-08 09:40:18
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-11-08 11:59:06
 * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\inspection-vehicles.vue
 * @Description: 总览大屏-巡检车辆
-->

<template>
  <div class="content">
    <div class="inspection-top">
      <div class="top-div">
        <span>车辆总数</span>
        <div>{{ carNum }}<span>辆</span></div>
      </div>
      <div class="top-div">
        <span>在线车辆数</span>
        <div>{{ onlineNum }}<span>辆</span></div>
      </div>
    </div>
    <div class="inspection-bottom">
      <el-input placeholder="请输入车牌号" v-model="tableInput">
        <template slot="append"
          ><el-button slot="append" icon="el-icon-search"></el-button
        ></template>
      </el-input>
      <!-- 列表 -->
      <el-table :data="inspectionTableData" style="width: 100%" height="210">
        <el-table-column prop="date" label="车牌号码"> </el-table-column>
        <el-table-column prop="name" label="状态"> </el-table-column>
        <el-table-column prop="pci" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="detailDefect(scope.row)"
              >详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="followCar(scope.row)"
              v-hasPermi="['system:defect:edit']"
              >跟车
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="videoDelete(scope.row)"
              v-hasPermi="['system:defect:remove']"
              >视频
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="pagination-part">
        <el-pagination
          background
          :pager-count="5"
          :current-page.sync="pagination.page"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="pagination.size"
          layout="prev, pager, next"
          :total="tableTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "InspectionVehicles",
  data() {
    return {
      // 车辆总数
      carNum: 11,
      // 在线车辆数
      onlineNum: 60,
      // 车牌号输入绑定
      tableInput: "",
      // 下方列表数据
      inspectionTableData: [],
      // 分页数据绑定
      pagination: {
        page: 1,
        size: 10,
      },
      // 分页总数
      tableTotal: 100,
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    /* 获取表格数据 */
    getTableData() {
      this.inspectionTableData = [
        {
          date: "S225",
          name: "99.52",
          pci: "优",
        },
        {
          date: "G107",
          name: "98.6",
          pci: "优",
        },
        {
          date: "G105",
          name: "100",
          pci: "优",
        },
        {
          date: "S225",
          name: "99.52",
          pci: "优",
        },
        {
          date: "G107",
          name: "98.6",
          pci: "优",
        },
        {
          date: "G105",
          name: "100",
          pci: "优",
        },
      ];
    },

    /* 表格详情事件 */
    detailDefect(val) {},

    /* 表格跟车事件 */
    followCar(val) {},

    /* 表格视频事件 */
    videoDelete(val) {},

    /* 页码修改事件 */
    handleCurrentChange(arg) {
      this.pagination.page = arg;
      this.getTableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  color: #ffffff;

  .inspection-top {
    width: 100%;
    height: 30%;
    padding: 0.5rem;
    display: flex;
    justify-content: space-around;

    .top-div {
      width: 45%;
      height: 100%;
      padding-bottom: 2rem;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
      border:1px solid red;
    }
  }

  .inspection-bottom {
    width: 100%;
    height: 70%;
    padding: 1rem 0.5rem;

    ::v-deep .el-input {
      margin-bottom: 0.5rem;
      .el-input__inner {
        color: #ffffff;
        background-color: transparent;
        border-color: rgb(69, 109, 211);
      }

      .el-input-group__append {
        background-color: transparent;
        color: #ffffff;
        border-color: rgb(69, 109, 211);

        &:hover {
          background-color: #3c5a8a;
        }
      }
    }

    ::v-deep .el-table {
      th {
        color: #ffffff;
        background-color: #214175;
      }

      tr {
        color: #ffffff;
        background-color: #16395a;

        &:hover > td {
          background-color: transparent;
        }
      }
    }

    ::v-deep .el-table td.el-table__cell {
      border-color: rgb(82, 141, 229);
    }
    ::v-deep .el-table th.el-table__cell {
      border-color: rgb(0, 102, 255);
    }
  }
}

/* 分页样式 */
.pagination-part {
  width: 100%;
  display: flex;
  padding-top: 0.5rem;
  justify-content: flex-end;

  ::v-deep .el-pagination {
    color: #ffffff;
    .btn-prev,
    .btn-next {
      background-color: #6481aa;
    }
  }

  ::v-deep .el-pager li {
    background: transparent;
  }
}
</style>