mky-vent-base/src/views/vent/monitorManager/gateMonitor/components/CarDamageTable.vue

<template>
  <div class="car-damage">
    <div class="search-area">
      <a-row>
        <a-col :span="4">
          <div class="area-item">
            <div class="item-text">风门状态：</div>
            <a-select ref="select" v-model:value="type" style="width: 240px" placeholder="请选择风门状态">
              <a-select-option v-for="(item, index) in typeList" :key="item.value" :value="item.value">{{
                item.label }}</a-select-option>
            </a-select>
          </div>
        </a-col>
        <a-col :span="4">
          <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-left: 10px"
            @click="getSearch">查询</a-button>
          <a-button preIcon="ant-design:sync-outlined" style="margin: 0px 15px" @click="getReset">重置</a-button>
        </a-col>
      </a-row>
    </div>
    <div class="content-area">
      <a-table size="small" :dataSource="dataSource" :columns="carColumns" :pagination="pagination"
        :scroll="{ y: 200, }" @change="pageChange">
        <template #bodyCell="{ column, text }">
          <template
            v-if="column.dataIndex == 'carNo' || column.dataIndex == 'distance' || column.dataIndex == 'photo' || column.dataIndex == 'captureTime'">
            <div>{{ text ? text : '-' }}</div>
          </template>
          <template v-if="column.dataIndex == 'type'">
            <div>{{ text == '1' ? '风门损坏' : '正常开闭' }}</div>
          </template>
          <template v-if="column.dataIndex == 'photoC'">
            <img :src="text" alt="" class="photo_zp" @click="preViewImg(text)">
          </template>
        </template>
      </a-table>
    </div>
    <!-- 预览抓拍图像 -->
    <a-modal v-model:visible="visiblePhoto" width="850px" :title="titlePhoto" :footer="null" centered destroyOnClose>
      <img :src="imgSrc" alt="">
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { carColumns, typeList } from '../gate.data'

let props = defineProps({
  deviceListApi: {
    type: Function,
    required: true,
  },
  gateId: {
    type: String,
    default: ''
  }
})

let type = ref('0')
let dataSource = ref<any[]>([])
//分页参数配置
let pagination = reactive({
  current: 1, // 当前页码
  pageSize: 10, // 每页显示条数
  total: 0, // 总条目数，后端返回
  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
  showSizeChanger: true, // 是否可改变每页显示条数
  pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
});
let visiblePhoto = ref(false)
let titlePhoto = ref('抓拍图像预览')
let imgSrc = ref('')//抓拍图像路径



//查询列表
async function getCarList() {
  let res = await props.deviceListApi({ gateIds: props.gateId, type: type.value, pageNo: pagination.current, pageSize: pagination.pageSize })
  const remoteUrl = import.meta.env.DEV ? 'http://182.92.126.35' : 'http://' + window.location.hostname;
  dataSource.value = res.records.map(el => {
    return {
      photoC: `${remoteUrl}:9999/sys/common/static/${el.photo.substring(el.photo.indexOf('/gate_monitor'))}`,
      ...el
    }
  })
  pagination.total = res.total
}
function pageChange(val) {
  pagination.current = val.current;
  pagination.pageSize = val.pageSize;
  getCarList()
}
//查询
function getSearch() {
  pagination.current = 1
  getCarList()
}
//重置
function getReset() {
  type.value = '0'
  pagination.current = 1
  getCarList()
}
//预览抓拍图像
function preViewImg(img) {
  visiblePhoto.value = true
  imgSrc.value = img
}
onMounted(() => {
  getCarList()
})
</script>

<style lang="less" scoped>
.car-damage {
  .search-area {
    margin: 15px;

    .area-item {
      display: flex;
      align-items: center;

      .item-text {
        color: #fff;
      }
    }
  }

  .zxm-picker,
  .zxm-input {
    border: 1px solid #3ad8ff77;
    background-color: #ffffff00;
    color: #fff;
  }

  .photo_zp {
    width: 120px;
    cursor: pointer;
  }
}
</style>