<template>
<view>
<view class="loadc_a">
<view class="oper_aqq">
<view>开始日期: </view>
<picker mode="date" :value="startTime" :start="'2000-01-01'" :end="endDate"
@change="bindStartDateChange">
<view class="uni-input">{{ startTime }}</view>
</picker>
</view>
</view>
<view class="loadc_a">
<view class="oper_aqq">
<view>结束日期:</view>
<picker mode="date" :value="endTime" :start="startTime" :end="endDate" @change="bindEndDateChange">
<view class="uni-input">{{ endTime }}</view>
</picker>
</view>
</view>
<view class="loadc_a">
<th-table :column="column" :listData="data" :checkSort="checkSort" :st="st" :sr="sr" :tdClick="tdClick"
height="0.5" :stripe="true" :border="true" :loading="false">
<template #b="Props">
<span style="color: red;">{{ Props.item.b }}</span>
</template>
<template #c="Props">
<span style="color: green;" @click="log(Props.item)">{{ Props.item.c }}</span>
</template>
<template #a="Props">
<div style="color: pink;">{{ Props.item.a }}</div>
<div>{{ Props.item.e }}</div>
</template>
</th-table>
<view class="pagination">
<button @click="prevPage" :disabled="pageNo === 1">上一页</button>
<span>页码 {{ pageNo }}/{{ totalPages }}</span>
<button @click="nextPage" :disabled="pageNo === totalPages">下一页</button>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, defineProps, watch } from 'vue';
import { getcurveShi } from '@/src/api/api.js';
const props = defineProps({
siteId: {
type: String,
required: true
}
});
const currentDate = new Date();
currentDate.setDate(1);
const startTime = ref(currentDate.toISOString().split('T')[0]);
const endTime = ref(new Date().toISOString().split('T')[0]);
const siteId = ref(props.siteId);
const data = ref([]);
const pageNo = ref(1);
const column = ref([]);
// 开始日期
const bindStartDateChange = (e : { detail : { value : string } }) => {
startTime.value = e.detail.value;
fetchData();
};
// 结束日期
const bindEndDateChange = (e : { detail : { value : string } }) => {
endTime.value = e.detail.value;
fetchData();
};
// 自定义插槽单元格点击事件
const log = (item) => {
console.log(item);
};
// 计算总页数
const totalPages = ref(0);
// 分页操作
const nextPage = () => {
if (pageNo.value < totalPages.value) {
pageNo.value += 1;
fetchData();
}
};
const prevPage = () => {
if (pageNo.value > 1) {
pageNo.value -= 1;
fetchData();
}
};
// 排序字段
const st = ref('b');
// sr 排序 1降序 -1升序
const sr = ref(-1);
const checkSort = (name, type) => {
st.value = name;
sr.value = type;
};
// 行点击事件 可不传 默认参数: 整行数据
const tdClick = (item) => {
console.log(item);
};
// 获取数据
const fetchData = () => {
// 打印参数,调试信息
console.log("调用接口参数:", {
endTime: endTime.value,
pageNo: pageNo.value,
siteId: siteId.value,
startTime: startTime.value
});
// 检查参数是否为空
if (!endTime.value || !pageNo.value || !siteId.value || !startTime.value) {
console.error("参数不能为空");
return;
}
getcurveShi(endTime.value, pageNo.value, siteId.value, startTime.value).then(response => {
if (response.data && response.data.titles) {
column.value = response.data.titles.map(item => ({
title: item.title,
isSort: false,
isFixed: false,
key: item.key
}));
totalPages.value = response.data.pageTotal;
data.value = response.data.dataList;
} else {
console.error("接口返回数据格式错误", response);
}
}).catch(error => {
console.error("接口调用失败", error);
});
};
watch(() => props.siteId, (newVal) => {
siteId.value = newVal;
fetchData();
}, { immediate: true });
watch(startTime, () => {
fetchData();
});
watch(endTime, () => {
fetchData();
});
watch(pageNo, () => {
fetchData();
});
// 页面挂载时调用接口
onMounted(() => {
fetchData();
});
</script>
<style lang="scss" scoped>
@import "/static/css/Operation.css";
.loadc_a,
.freef_q {
margin-top: 10rpx;
padding: 10rpx;
background-color: #f5f6f8;
}
.freef_q {
display: flex;
white-space: nowrap;
}
.elec_q {
width: 300rpx;
display: inline-block;
margin-right: 10rpx;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.pagination button {
padding: 10px 20px;
margin: 0 10px;
}
.oper_aqq {
display: flex;
font-size: 36rpx;
}
</style>
<script setup lang="ts">
import { ref, computed, onMounted, defineProps, watch } from 'vue';
import { getcurveShi } from '@/src/api/api.js';
const props = defineProps({
siteId: {
type: String,
required: true
}
});
const currentDate = new Date();
currentDate.setDate(1);
const startTime = ref(currentDate.toISOString().split('T')[0]);
const endTime = ref(new Date().toISOString().split('T')[0]);
const siteId = ref(props.siteId);
const data = ref([]);
const pageNo = ref(1);
const column = ref([]);
// 开始日期
const bindStartDateChange = (e : { detail : { value : string } }) => {
startTime.value = e.detail.value;
fetchData();
};
// 结束日期
const bindEndDateChange = (e : { detail : { value : string } }) => {
endTime.value = e.detail.value;
fetchData();
};
// 自定义插槽单元格点击事件
const log = (item) => {
console.log(item);
};
// 计算总页数
const totalPages = ref(0);
// 分页操作
const nextPage = () => {
if (pageNo.value < totalPages.value) {
pageNo.value += 1;
fetchData();
}
};
const prevPage = () => {
if (pageNo.value > 1) {
pageNo.value -= 1;
fetchData();
}
};
// 排序字段
const st = ref('b');
// sr 排序 1降序 -1升序
const sr = ref(-1);
const checkSort = (name, type) => {
st.value = name;
sr.value = type;
};
// 行点击事件 可不传 默认参数: 整行数据
const tdClick = (item) => {
console.log(item);
};
// 获取数据
const fetchData = () => {
// 打印参数,调试信息
console.log("调用接口参数:", {
endTime: endTime.value,
pageNo: pageNo.value,
siteId: siteId.value,
startTime: startTime.value
});
// 检查参数是否为空
if (!endTime.value || !pageNo.value || !siteId.value || !startTime.value) {
console.error("参数不能为空");
return;
}
getcurveShi(endTime.value, pageNo.value, siteId.value, startTime.value).then(response => {
if (response.data && response.data.titles) {
column.value = response.data.titles.map(item => ({
title: item.title,
isSort: false,
isFixed: false,
key: item.key
}));
totalPages.value = response.data.pageTotal;
data.value = response.data.dataList;
} else {
console.error("接口返回数据格式错误", response);
}
}).catch(error => {
console.error("接口调用失败", error);
});
};
watch(() => props.siteId, (newVal) => {
siteId.value = newVal;
fetchData();
}, { immediate: true });
watch(startTime, () => {
fetchData();
});
watch(endTime, () => {
fetchData();
});
watch(pageNo, () => {
fetchData();
});
// 页面挂载时调用接口
onMounted(() => {
fetchData();
});
</script>
<style lang="scss" scoped>
@import "/static/css/Operation.css";
.loadc_a,
.freef_q {
margin-top: 10rpx;
padding: 10rpx;
background-color: #f5f6f8;
}
.freef_q {
display: flex;
white-space: nowrap;
}
.elec_q {
width: 300rpx;
display: inline-block;
margin-right: 10rpx;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.pagination button {
padding: 10px 20px;
margin: 0 10px;
}
.oper_aqq {
display: flex;
font-size: 36rpx;
}
</style>