161 lines
3.9 KiB
Vue
161 lines
3.9 KiB
Vue
<template>
|
|
<div class="content">
|
|
<div class="topFilter">
|
|
<el-form :inline="true" :model="filter" class="demo-form-inline">
|
|
<el-form-item label="操作时间">
|
|
<el-date-picker
|
|
v-model="filter.Date"
|
|
type="daterange"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="YYYY-MM-DD"
|
|
:size="'default'"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="getRecordList">查询</el-button>
|
|
<el-button link type="primary" @click="filter.Date = []">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="grid" v-loading="Status.loading">
|
|
<el-table ref="grid" v-loading="Status.loading" border :data="List" height="calc(100vh - 320px)">
|
|
<el-table-column label="创建时间" align="center" prop="createTime" />
|
|
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
|
<el-table-column label="数据来源" align="center" prop="dataSource" />
|
|
<el-table-column label="内容" align="center" prop="content" />
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="pagin.total > 0"
|
|
v-model:page="pagin.pageIndex"
|
|
v-model:limit="pagin.pageSize"
|
|
:total="pagin.total"
|
|
@pagination="getRecordList"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import request from '@/utils/request';
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
acIndex: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
});
|
|
var filter = ref({
|
|
Date: []
|
|
});
|
|
var Status = ref({
|
|
loading: false
|
|
});
|
|
|
|
var data = ref({});
|
|
var grid = ref(null);
|
|
var List = ref([]);
|
|
var pagin = ref({
|
|
total: 0,
|
|
pageIndex: 1,
|
|
pageSize: 10
|
|
});
|
|
function getRecordList() {
|
|
Status.value.loading = true;
|
|
|
|
|
|
setTimeout(() => {
|
|
initData(props.data,true);
|
|
}, 0);
|
|
}
|
|
|
|
var deviceid = null;
|
|
function initData(item,Refresh) {
|
|
if (deviceid == item.data.deviceId && !Refresh) {
|
|
Status.value.loading = false;
|
|
return;
|
|
}
|
|
List.value = [];
|
|
deviceid = item.data.deviceId;
|
|
|
|
let params = {
|
|
startTime: '',
|
|
endTime: '',
|
|
deviceId:deviceid,
|
|
pageNum:pagin.value.pageIndex,
|
|
pageSize:pagin.value.pageSize,
|
|
orderByColumn:"updatedAt",
|
|
isAsc:"descending"
|
|
};
|
|
if (filter.value.Date && filter.value.Date.length) {
|
|
params.startTime = filter.value.Date[0];
|
|
params.endTime = filter.value.Date.length > 1 ? filter.value.Date[1] : '';
|
|
}
|
|
|
|
request({
|
|
url: '/equipment/chargeDischarge/list' ,
|
|
method: 'get',
|
|
params: params
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
if (res.rows) {
|
|
if (res.rows.length) {
|
|
List.value = res.rows;
|
|
}
|
|
}
|
|
pagin.value.total= res.total;
|
|
}
|
|
})
|
|
.finally(() => {
|
|
data.value = item.data;
|
|
Status.value.loading = false;
|
|
});
|
|
}
|
|
|
|
watch(
|
|
() => props.acIndex, // 监听的属性
|
|
(newVal) => {
|
|
|
|
|
|
if (newVal === 3) {
|
|
// 确保参数有效
|
|
debugger;
|
|
console.log('newVal=', newVal);
|
|
getRecordList(); // 调用回调
|
|
}
|
|
},
|
|
{ immediate: true } // 关键：组件初始化时立即执行一次
|
|
);
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 30px 12px 12px 12px;
|
|
}
|
|
|
|
.pickerContent {
|
|
box-sizing: border-box;
|
|
border: 1px solid rgba(189, 198, 215, 0.8);
|
|
border-radius: 2px;
|
|
}
|
|
.topFilter {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
:deep .pickerContent .el-date-editor {
|
|
border: none !important;
|
|
}
|
|
</style>
|