TabFour.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <n-space>
  3. <n-input
  4. v-model:value="queryData.T_sn"
  5. type="text"
  6. placeholder="请输入SN搜索"
  7. />
  8. <n-input
  9. v-model:value="queryData.T_id"
  10. type="text"
  11. placeholder="请输入设备编号搜索"
  12. />
  13. <n-date-picker
  14. type="datetimerange"
  15. format="yyyy-MM-dd HH:mm"
  16. :time-picker-props="{ format: 'HH:mm' }"
  17. @update:formatted-value="packFun"
  18. clearable
  19. />
  20. <n-button type="primary" @click="extractTask">搜索</n-button>
  21. </n-space>
  22. <n-data-table
  23. remote
  24. :loading="loading"
  25. :columns="columns"
  26. :data="dataList"
  27. :pagination="pagination"
  28. :bordered="false"
  29. flex-height
  30. class="flex-1"
  31. />
  32. </template>
  33. <script setup>
  34. import { getTaskDataList } from '@/api';
  35. const props = defineProps({
  36. task: {
  37. required: true,
  38. default: {},
  39. },
  40. });
  41. const packFun = (value)=>{
  42. if(value){
  43. queryData.Time_start = value[0];
  44. queryData.Time_end = value[1];
  45. }else{
  46. queryData.Time_start = null;
  47. queryData.Time_end = null;
  48. }
  49. }
  50. // 查询参数
  51. const queryData = reactive({
  52. T_task_id: props.task.T_task_id,
  53. T_id:'',
  54. T_sn:'',
  55. Time_start: null,
  56. Time_end: null,
  57. page: 1,
  58. page_z: 10
  59. });
  60. // 列表
  61. const dataList = ref([]);
  62. const loading = ref(false);
  63. // 需要展示的列
  64. const columns = [
  65. {
  66. title: '设备编号',
  67. key: 'T_id',
  68. },
  69. {
  70. title: 'SN',
  71. key: 'T_sn',
  72. },{
  73. title: '温度℃',
  74. key: 'T_t',
  75. },
  76. {
  77. title: '湿度%',
  78. key: 'T_rh',
  79. },
  80. {
  81. title: '记录时间',
  82. key: 'T_time',
  83. },
  84. ];
  85. // 分页数据源
  86. const pagination = reactive({
  87. page: queryData.page,
  88. pageSize: queryData.page_z,
  89. itemCount: 0,
  90. onChange: (page) => {
  91. pagination.page = page
  92. queryData.page = page;
  93. extractTask()
  94. },
  95. });
  96. // 获取列表
  97. const extractTask = async () => {
  98. try {
  99. loading.value = true;
  100. const { data: res } = await getTaskDataList(queryData);
  101. console.log('数据',res)
  102. dataList.value = res.Data.List || [];
  103. pagination.itemCount = res.Data.Num
  104. } catch (error) {
  105. console.log(error);
  106. } finally {
  107. loading.value = false;
  108. }
  109. };
  110. extractTask();
  111. </script>
  112. <style scoped></style>