HistoryTable.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
  1. <template>
  2. <div class="history-table" v-if="loading">
  3. <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource">
  4. <template #form-submitBefore>
  5. <a-button type="primary" preIcon="ant-design:search-outlined" @click="getDataSource">查询</a-button>
  6. </template>
  7. </BasicTable>
  8. </div>
  9. </template>
  10. <script lang="ts" setup>
  11. //ts语法
  12. import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
  13. import { FormSchema } from '/@/components/Form/index';
  14. import { BasicTable } from '/@/components/Table';
  15. import { useListPage } from '/@/hooks/system/useListPage';
  16. import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  17. import { defHttp } from '/@/utils/http/axios';
  18. import dayjs from 'dayjs';
  19. import { getAutoScrollContainer } from '/@/utils/common/compUtils';
  20. const props = defineProps({
  21. columnsType: {
  22. type: String,
  23. },
  24. columns: {
  25. type: Array,
  26. // required: true,
  27. default: () => [],
  28. },
  29. historyColumns: {
  30. type: Array,
  31. default: () => [],
  32. },
  33. id: {
  34. type: String,
  35. },
  36. scroll: {
  37. type: Object,
  38. default: { y: 0 },
  39. },
  40. formSchemas: {
  41. type: Array<FormSchema>,
  42. default: () => [],
  43. },
  44. });
  45. //获取分站数据
  46. const getDeviceListApi = (params) => defHttp.get({ url: '/safety/ventanalySubStation/alllist', params });
  47. const historyTable = ref();
  48. const loading = ref(false);
  49. const dataSource = ref([]);
  50. const emit = defineEmits(['change']);
  51. const historyType = ref('');
  52. const deviceKide = ref('');
  53. const columns = ref([]);
  54. const deviceList = ref([]);
  55. const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
  56. // let deviceList = ref([]);
  57. const deviceTypeStr = ref('');
  58. loading.value = true;
  59. watch(
  60. () => {
  61. return props.columnsType;
  62. },
  63. async (newVal) => {
  64. debugger;
  65. if (!newVal) return;
  66. deviceKide.value = newVal;
  67. if (historyTable.value) {
  68. getForm().resetFields();
  69. // getForm().updateSchema();
  70. // getForm();
  71. }
  72. dataSource.value = [];
  73. // const column = getTableHeaderColumns(newVal.includes('_history') ? newVal : newVal + '_history');
  74. // if (column && column.length < 1) {
  75. // const arr = newVal.split('_');
  76. // console.log('历史记录列表表头------------>', arr[0] + '_monitor');
  77. // columns.value = getTableHeaderColumns(arr[0] + '_history');
  78. // if (columns.value.length < 1) {
  79. // if (historyType.value) {
  80. // columns.value = getTableHeaderColumns(historyType.value + '_history');
  81. // }
  82. // }
  83. // } else {
  84. // columns.value = column;
  85. // }
  86. await getDeviceList();
  87. nextTick(() => {
  88. getDataSource();
  89. });
  90. if (historyTable.value) reload();
  91. },
  92. {
  93. immediate: true,
  94. }
  95. );
  96. // watch(historyType, (type) => {
  97. // if (!type) return;
  98. // // if (historyTable.value) getForm().resetFields()
  99. // const column = getTableHeaderColumns(type.includes('_history') ? type : type + '_history');
  100. // if (column && column.length < 1) {
  101. // // const arr = type.split('_');
  102. // // columns.value = getTableHeaderColumns(arr[0] + '_history');
  103. // } else {
  104. // // columns.value = column;
  105. // }
  106. // setColumns(columns.value);
  107. // });
  108. watch(
  109. () => props.scroll.y,
  110. (newVal) => {
  111. if (newVal) {
  112. tableScroll.value = { y: newVal - 100 };
  113. } else {
  114. tableScroll.value = {};
  115. }
  116. }
  117. );
  118. watch(
  119. () => props.deviceId,
  120. async () => {
  121. await getForm().setFieldsValue({});
  122. await getDeviceList();
  123. }
  124. );
  125. async function getDeviceList() {
  126. let result;
  127. const res = await getDeviceListApi({ column: 'createTime', pageNo: 1, pageSize: 10000 });
  128. console.log(res, 'ssssssssssssssssssssss');
  129. result = res.result;
  130. deviceList.value = result;
  131. }
  132. function resetFormParam() {
  133. const formData = getForm().getFieldsValue();
  134. const pagination = getPaginationRef();
  135. formData['pageNo'] = pagination['current'];
  136. formData['pageSize'] = pagination['pageSize'];
  137. formData['column'] = 'createTime';
  138. const params = {
  139. pageNum: pagination['current'],
  140. pageSize: pagination['pageSize'],
  141. column: pagination['createTime'],
  142. starttime_begin: formData['starttime_begin'],
  143. starttime_endtime: formData['starttime_endtime'],
  144. nsubstationid: formData['gdeviceid'],
  145. nwartype: 1001,
  146. };
  147. return params;
  148. }
  149. async function getDataSource() {
  150. dataSource.value = [];
  151. setLoading(true);
  152. const params = await resetFormParam();
  153. const result = await defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params: params });
  154. setPagination({ total: Math.abs(result['datalist']['total']) || 0 });
  155. if (result['datalist']['records'].length > 0) {
  156. dataSource.value = result['datalist']['records'].map((item: any) => {
  157. return Object.assign(item, item['readData']);
  158. });
  159. } else {
  160. dataSource.value = [];
  161. }
  162. setLoading(false);
  163. }
  164. // 列表页面公共参数、方法
  165. const { tableContext } = useListPage({
  166. tableProps: {
  167. // api: list,
  168. columns: props.historyColumns ? columns : (props.historyColumns as any[]),
  169. canResize: true,
  170. showTableSetting: false,
  171. showActionColumn: false,
  172. bordered: false,
  173. size: 'small',
  174. scroll: tableScroll,
  175. showIndexColumn: true,
  176. tableLayout: 'auto',
  177. formConfig: {
  178. labelAlign: 'left',
  179. showAdvancedButton: false,
  180. showSubmitButton: false,
  181. showResetButton: false,
  182. baseColProps: {
  183. xs: 24,
  184. sm: 24,
  185. md: 24,
  186. lg: 9,
  187. xl: 7,
  188. xxl: 4,
  189. },
  190. schemas:
  191. props.formSchemas.length > 0
  192. ? props.formSchemas
  193. : [
  194. {
  195. field: 'starttime_begin',
  196. label: '开始时间',
  197. component: 'DatePicker',
  198. defaultValue: dayjs().startOf('date'),
  199. required: true,
  200. componentProps: {
  201. showTime: true,
  202. valueFormat: 'YYYY-MM-DD HH:mm:ss',
  203. getPopupContainer: getAutoScrollContainer,
  204. },
  205. colProps: {
  206. span: 4,
  207. },
  208. },
  209. {
  210. field: 'starttime_endtime',
  211. label: '结束时间',
  212. component: 'DatePicker',
  213. defaultValue: dayjs(),
  214. required: true,
  215. componentProps: {
  216. showTime: true,
  217. valueFormat: 'YYYY-MM-DD HH:mm:ss',
  218. getPopupContainer: getAutoScrollContainer,
  219. },
  220. colProps: {
  221. span: 4,
  222. },
  223. },
  224. {
  225. label: '查询设备',
  226. field: 'nsubstationid',
  227. component: 'Select',
  228. defaultValue: props.id ? props.id : deviceList.value[0] ? deviceList.value[0]['strinstallpos'] : '',
  229. required: true,
  230. componentProps: {
  231. showSearch: true,
  232. filterOption: (input: string, option: any) => {
  233. return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  234. },
  235. options: deviceList,
  236. onChange: (e, option) => {
  237. if (option && (option['strinstallpos'] || option['id'])) historyType.value = option['strinstallpos'] || option['id'];
  238. },
  239. },
  240. colProps: {
  241. span: 4,
  242. },
  243. },
  244. {
  245. field: 'nwartype',
  246. required: true,
  247. componentProps: {
  248. valueFormat: '1001',
  249. },
  250. colProps: {
  251. span: 4,
  252. },
  253. },
  254. ],
  255. },
  256. // fetchSetting: {
  257. pagination: {
  258. current: 1,
  259. pageSize: 10,
  260. pageSizeOptions: ['10', '30', '50', '100'],
  261. showQuickJumper: false,
  262. },
  263. beforeFetch() {
  264. const newParams = { ...resetFormParam() };
  265. debugger;
  266. return newParams;
  267. },
  268. },
  269. });
  270. //注册table数据
  271. const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;
  272. watchEffect(() => {
  273. if (historyTable.value && dataSource) {
  274. const data = dataSource.value || [];
  275. emit('change', data);
  276. }
  277. });
  278. onMounted(async () => {
  279. await getDeviceList();
  280. if (deviceList.value[0]) {
  281. historyType.value = deviceList.value[0]['strinstallpos'] || deviceList.value[0]['id'];
  282. nextTick(async () => {
  283. await getDataSource();
  284. });
  285. }
  286. // watch([() => getPaginationRef()['current'], () => getPaginationRef()['pageSize']], async () => {
  287. // if (deviceList.value[0]) {
  288. // if (deviceList.value[0]) {
  289. // await getDataSource();
  290. // }
  291. // }
  292. // });
  293. });
  294. defineExpose({ setLoading });
  295. </script>
  296. <style scoped lang="less">
  297. @import '/@/design/vent/color.less';
  298. :deep(.@{ventSpace}-table-body) {
  299. height: auto !important;
  300. }
  301. :deep(.zxm-picker) {
  302. height: 30px !important;
  303. }
  304. .history-table {
  305. width: 100%;
  306. :deep(.jeecg-basic-table-form-container) {
  307. .@{ventSpace}-form {
  308. padding: 0 !important;
  309. border: none !important;
  310. margin-bottom: 0 !important;
  311. .@{ventSpace}-picker,
  312. .@{ventSpace}-select-selector {
  313. width: 100% !important;
  314. height: 100%;
  315. background: #00000017;
  316. border: 1px solid #b7b7b7;
  317. input,
  318. .@{ventSpace}-select-selection-item,
  319. .@{ventSpace}-picker-suffix {
  320. color: #fff;
  321. }
  322. .@{ventSpace}-select-selection-placeholder {
  323. color: #ffffffaa;
  324. }
  325. }
  326. }
  327. .@{ventSpace}-table-title {
  328. min-height: 0 !important;
  329. }
  330. }
  331. .pagination-box {
  332. display: flex;
  333. justify-content: flex-end;
  334. align-items: center;
  335. .page-num {
  336. border: 1px solid #0090d8;
  337. padding: 4px 8px;
  338. margin-right: 5px;
  339. color: #0090d8;
  340. }
  341. .btn {
  342. margin-right: 10px;
  343. }
  344. }
  345. }
  346. </style>