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-12-10 11:05:40
 * @FilePath: \znxjxt-ui\src\views\big-screen\overview-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="getTableDataByCar"
          ></el-button
        ></template>
      </el-input>
      <!-- 列表 -->
      <el-table
        :data="inspectionTableData"
        header-row-class-name="headerRow"
        row-class-name="bodayRow"
        style="width: 100%; background: none"
        height="80%"
      >
        <el-table-column prop="plateNo" show-overflow-tooltip label="车牌号码">
        </el-table-column>
        <el-table-column
          width="50"
          show-overflow-tooltip
          prop="status"
          label="状态"
        >
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="companyName" label="所属">
        </el-table-column>
        <el-table-column width="120" 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.extId }}</span>
                </div>
                <div>
                  <span class="name">车辆状态:</span>
                  <span class="value">{{ scope.row.status }}</span>
                </div>
                <div>
                  <span class="name">网络状态:</span>
                  <span class="value">{{ scope.row.serverStatus }}</span>
                </div>
                <div>
                  <span class="name">设备状态:</span>
                  <span class="value">{{ scope.row.aiotStatus }}</span>
                </div>
              </div>
              <el-button
                slot="reference"
                size="mini"
                type="text"
                style="margin-right: 0.5rem"
                >详情
              </el-button>
            </el-popover>

            <el-button
              :disabled="scope.row.status !== '在线'"
              size="mini"
              type="text"
              @click="followCar(scope.row)"
              >跟车
            </el-button>
            <el-button
              :disabled="scope.row.status !== '在线'"
              size="mini"
              type="text"
              @click="videoDelete(scope.row)"
              >视频
            </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>
    <!-- 跟车弹窗 -->
    <el-dialog
      :title="followTitle"
      :visible.sync="showCarVisible"
      width="85rem"
      append-to-body
      :close-on-click-modal="false"
      destroy-on-close
      @close="followCancel"
    >
      <inspection-follow
        v-if="followTitle === '跟车详情'"
        :dialogItem="dialogItem"
      ></inspection-follow>
    </el-dialog>

    <!-- 视频弹窗 -->
    <el-dialog
      :title="viewTitle"
      :visible.sync="showViewVisible"
      width="90rem"
      append-to-body
      :close-on-click-modal="false"
      destroy-on-close
      @close="viewCancel"
    >
      <inspection-view
        v-if="viewTitle === '视频查看'"
        :dialogItem="dialogItem"
      ></inspection-view>
    </el-dialog>
  </div>
</template>

<script>
import { getCarList, closeVideoUrl } from "@/api/xj/screen/disease-screen";
import InspectionFollow from "./components/inspection-follow.vue";
import InspectionView from "./components/inspection-view.vue";
export default {
  name: "InspectionVehicles",
  components: {
    InspectionFollow,
    InspectionView,
  },
  data() {
    return {
      // 车辆总数
      carNum: 0,
      // 在线车辆数
      onlineNum: 0,
      // 车牌号输入绑定
      tableInput: "",
      // 定时器标识
      timer: null,
      // 下方列表数据
      inspectionTableData: [],
      // 分页数据绑定
      // pagination: {
      //   page: 1,
      //   size: 10,
      // },
      // 分页总数
      tableTotal: 0,
      // 传弹窗数据
      dialogItem: {},
      // 跟车弹窗显隐控制
      showCarVisible: false,
      // 跟车弹窗标题
      followTitle: "",
      // 视频弹窗显隐控制
      showViewVisible: false,
      // 视频弹窗标题
      viewTitle: "",
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    /**
     * @description: 获取表格数据
     * @param {*} val
     * @return {*}
     */
    getTableData() {
      this.timer = setInterval(() => {
        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;
          }
        });
      }, 5000);
      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;
        }
      });
    },

    /**
     * @description: 根据车牌号获取表格数据
     * @param {*}
     * @return {*}
     */
    getTableDataByCar() {
      clearInterval(this.timer);
      this.getTableData();
    },

    /**
     * @description: 表格跟车事件
     * @param {*} val
     * @return {*}
     */
    followCar(val) {
      this.followTitle = "跟车详情";
      this.showCarVisible = true;
      this.dialogItem = val;
      const carData = { type: "carLocation", status: true };
      const defectData = { type: "defect", status: true };
      this.$ws.send(carData);
      this.$ws.send(defectData);
    },

    /**
     * @description: 表格视频事件
     * @param {*} val
     * @return {*}
     */
    videoDelete(val) {
      this.dialogItem = val;
      this.viewTitle = "视频查看";
      this.showViewVisible = true;
    },

    /**
     * @description: 关闭跟车弹窗事件
     * @param {*}
     * @return {*}
     */
    followCancel() {
      this.followTitle = "";
      this.showCarVisible = false;
      this.dialogItem = {};
      // 停止接收病害信息
      const carData = { type: "carLocation", status: false };
      const defectData = { type: "defect", status: false };
      this.$ws.send(carData);
      this.$ws.send(defectData);
    },

    /**
     * @description: 关闭视频弹窗事件
     * @param {*}
     * @return {*}
     */
    viewCancel() {
      this.viewTitle = "";
      this.showViewVisible = false;
      closeVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
        if (code === 200) {
          this.dialogItem = {};
        }
      });
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

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

  .inspection-top {
    width: 100%;
    height: 6rem;
    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: 1.5rem;
        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;
  }
}

/* 修改弹窗样式 */
::v-deep .el-dialog__header {
  padding: 10px;
  background-color: #113463;

  span,
  i {
    color: #ffffff;
  }
}

::v-deep .el-dialog__body {
  padding: 0;
  background-color: #113463;
}
</style>
<style lang="scss">
/* 弹出层样式 */
.scope-popover {
  color: #ffffff;
  background-color: #000000;
  border-color: transparent;
}
</style>