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-14 15:54:12
 * @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 inspection-div-car">
        <div>
          <span>{{ carNum }}</span
          >辆
        </div>
      </div>
      <div class="top-div inspection-div-online">
        <div>
          <span>{{ onlineNum }}</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"
            clearable
            @click="getTableData"
          ></el-button
        ></template>
      </el-input>
      <!-- 列表 -->
      <el-table
        :data="inspectionTableData"
        header-row-class-name="headerRow"
        row-class-name="bodayRow"
        style="width: 100%; background: none"
        height="285"
      >
        <el-table-column prop="plateNo" label="车牌号码"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="pci" label="操作">
          <template slot-scope="scope">
            <el-popover
              popper-class="scope-popover"
              placement="left"
              width="auto"
              trigger="click"
            >
              <div class="table-detail">
                <div>
                  <span class="name">车牌号码:</span>
                  <span class="value">{{ scope.row.plateNo }}</span>
                </div>
                <div>
                  <span class="name">设备编号:</span>
                  <span class="value">{{ scope.row.appid }}</span>
                </div>
                <div>
                  <span class="name">车辆状态:</span>
                  <span class="value">{{ scope.row.status }}</span>
                </div>
                <div>
                  <span class="name">网络连接:</span>
                  <span class="value"></span>
                </div>
                <div>
                  <span class="name">设备状态:</span>
                  <span class="value"></span>
                </div>
              </div>
              <el-button
                slot="reference"
                size="mini"
                type="text"
                style="margin-right: 0.6rem"
                @click="detailDefect(scope.row)"
                >详情
              </el-button>
            </el-popover>

            <el-button
              disabled
              size="mini"
              type="text"
              @click="followCar(scope.row)"
              v-hasPermi="['system:defect:edit']"
              >跟车
            </el-button>
            <el-button
              disabled
              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>
import { getCarList } from "@/api/xj/screen/disease-screen";
export default {
  name: "InspectionVehicles",
  data() {
    return {
      // 车辆总数
      carNum: 0,
      // 在线车辆数
      onlineNum: 0,
      // 车牌号输入绑定
      tableInput: "",
      // 下方列表数据
      inspectionTableData: [],
      // 分页数据绑定
      // pagination: {
      //   page: 1,
      //   size: 10,
      // },
      // 分页总数
      tableTotal: 0,
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    /* 获取表格数据 */
    getTableData() {
      getCarList({ no: this.tableInput }).then(({ code, data }) => {
        if (code === 200) {
          this.carNum = data.total;
          this.tableTotal = data.total;
          this.onlineNum = data.online;
          this.inspectionTableData = data.rows;
        }
      });
    },

    /* 表格详情事件 */
    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: 20%;
    padding: 0.5rem;
    display: flex;
    justify-content: space-around;

    .top-div {
      width: 45%;
      height: 100%;
      line-height: 6rem;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
      font-size: 0.6rem;

      span {
        font-size: 1rem;
        font-family: "DouYu";
      }
    }

    .inspection-div-car {
      background-image: url("~@/assets/screen/index/inspection-div-car.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .inspection-div-online {
      background-image: url("~@/assets/screen/index/inspection-div-online.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }

  ::v-deep .inspection-bottom {
    width: 100%;
    height: 80%;
    padding: 1rem 0.5rem;

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

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

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

    // 表格最下方border
    .el-table::before {
      background-color: transparent;
    }

    // 隐藏滚动条
    .el-table__body-wrapper::-webkit-scrollbar {
      /*width: 0;宽度为0隐藏*/
      width: 0;
    }

    // 表头行
    .headerRow {
      background: url("~@/assets/screen/traffic/emergency-top.png") no-repeat;
      background-size: 100%;

      th {
        color: #ffffff;
        background: none;
        border-color: transparent;
      }
    }

    // 表格行
    .bodayRow {
      color: #ffffff;
      background: none;

      &:nth-child(2n) {
        background: #113463;
      }

      // 表格内下划线
      td {
        // border-color: transparent;
        border-bottom: 1px dashed rgb(115, 115, 116);
      }

      // 去除鼠标移动高亮
      &:hover > td {
        background-color: transparent;
      }

      .el-table__cell {
        padding: 0.2rem 0;
      }
    }
  }
}

/* 分页样式 */
.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>
<style lang="scss">
/* 弹出层样式 */
.scope-popover {
  color: #ffffff;
  background-color: #000000;
  border-color: transparent;
}
</style>