|
|
@@ -6,8 +6,7 @@
|
|
|
<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-option v-for="(item, index) in typeList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
|
|
|
</a-select>
|
|
|
</div>
|
|
|
</a-col>
|
|
|
@@ -18,148 +17,149 @@
|
|
|
<a-select-option v-for="(item, index) in typeList" :key="item.value" :value="item.value">{{
|
|
|
item.label }}</a-select-option>
|
|
|
</a-select> -->
|
|
|
- <a-date-picker v-model:value="startTime" style="width:240px" show-time
|
|
|
- valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" />
|
|
|
+ <a-date-picker v-model:value="startTime" style="width: 240px" show-time valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" />
|
|
|
</div>
|
|
|
</a-col>
|
|
|
- <a-col :span="5">
|
|
|
+ <a-col :span="5">
|
|
|
<div class="area-item">
|
|
|
<div class="item-text">结束时间：</div>
|
|
|
- <a-date-picker v-model:value="endTime" style="width:240px" show-time
|
|
|
- valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" />
|
|
|
+ <a-date-picker v-model:value="endTime" style="width: 240px" show-time valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" />
|
|
|
</div>
|
|
|
</a-col>
|
|
|
<a-col :span="5">
|
|
|
- <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-left: 10px"
|
|
|
- @click="getSearch">查询</a-button>
|
|
|
+ <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">
|
|
|
+ <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'">
|
|
|
+ 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 == '0' ? '正常开闭' : text == '1' ? '风门常开' : text == '2' ? '风门关闭不严' : text == '3' ? '疑似车辆撞击' : '--' }}
|
|
|
- </div>
|
|
|
+ <div>{{ text == '0' ? '正常开闭' : text == '1' ? '风门常开' : text == '2' ? '风门关闭不严' : text == '3' ? '疑似车辆撞击' : '--' }} </div>
|
|
|
</template>
|
|
|
<template v-if="column.dataIndex == 'photoC'">
|
|
|
- <img :src="text" alt="" class="photo_zp" @click="preViewImg(text)">
|
|
|
+ <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="">
|
|
|
+ <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 startTime=ref('')
|
|
|
-let endTime=ref('')
|
|
|
-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('')//抓拍图像路径
|
|
|
+ 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 startTime = ref('');
|
|
|
+ let endTime = ref('');
|
|
|
+ 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,startTime:startTime.value,endTime:endTime.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'
|
|
|
- startTime.value=''
|
|
|
- endTime.value=''
|
|
|
- pagination.current = 1
|
|
|
- getCarList()
|
|
|
-}
|
|
|
-//预览抓拍图像
|
|
|
-function preViewImg(img) {
|
|
|
- visiblePhoto.value = true
|
|
|
- imgSrc.value = img
|
|
|
-}
|
|
|
-onMounted(() => {
|
|
|
- getCarList()
|
|
|
-})
|
|
|
+ //查询列表
|
|
|
+ async function getCarList() {
|
|
|
+ let res = await props.deviceListApi({
|
|
|
+ gateIds: props.gateId,
|
|
|
+ type: type.value,
|
|
|
+ startTime: startTime.value,
|
|
|
+ endTime: endTime.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';
|
|
|
+ startTime.value = '';
|
|
|
+ endTime.value = '';
|
|
|
+ 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;
|
|
|
+ .car-damage {
|
|
|
+ .search-area {
|
|
|
+ margin: 15px;
|
|
|
|
|
|
- .area-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .area-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .item-text {
|
|
|
- color: #fff;
|
|
|
+ .item-text {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .zxm-picker,
|
|
|
- .zxm-input {
|
|
|
- border: 1px solid #3ad8ff77;
|
|
|
- background-color: #ffffff00;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ .zxm-picker,
|
|
|
+ .zxm-input {
|
|
|
+ border: 1px solid #3ad8ff77;
|
|
|
+ background-color: #ffffff00;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .photo_zp {
|
|
|
- width: 120px;
|
|
|
- cursor: pointer;
|
|
|
+ .photo_zp {
|
|
|
+ width: 120px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
hongrunxia