index.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. <template>
  2. <div class="alarm-history-table">
  3. <BasicTable ref="alarmHistory" @register="registerTable">
  4. <template #form-onExportXls>
  5. <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
  6. </template>
  7. </BasicTable>
  8. </div>
  9. </template>
  10. <script lang="ts" name="system-user" setup>
  11. //ts语法
  12. import { watch, ref, defineExpose, inject, onMounted } from 'vue';
  13. import { BasicTable } from '/@/components/Table';
  14. import { useListPage } from '/@/hooks/system/useListPage';
  15. import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  16. import { defHttp } from '/@/utils/http/axios';
  17. import dayjs from 'dayjs';
  18. import { getAutoScrollContainer } from '/@/utils/common/compUtils';
  19. import { safetyDeviceList, safetyList } from './safety.api';
  20. const props = defineProps({
  21. columns: {
  22. type: Array,
  23. // required: true,
  24. default: () => [],
  25. },
  26. deviceListApi: {
  27. type: Function,
  28. },
  29. designScope: {
  30. type: String,
  31. },
  32. sysId: {
  33. type: String,
  34. },
  35. scroll: {
  36. type: Object,
  37. default: { y: 0 },
  38. },
  39. list: {
  40. type: Function,
  41. default: (params) => defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params }),
  42. },
  43. });
  44. const getDeviceListApi = (params) => defHttp.post({ url: '/monitor/device', params });
  45. const globalConfig = inject('globalConfig');
  46. const alarmHistory = ref();
  47. const columns = getTableHeaderColumns('warnig_history');
  48. const deviceOptions = ref([]);
  49. const dataTypeName = ref('');
  50. const deviceType = ref('');
  51. const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
  52. async function getDeviceList() {
  53. let result;
  54. const res = await getDeviceListApi({ devicetype: deviceType.value, filterParams: { dataTypeName: dataTypeName.value }, pageSize: 10000 });
  55. if (res['records'] && res['records'].length > 0) {
  56. result = res['records'];
  57. } else if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
  58. result = res['msgTxt'][0]['datalist'];
  59. }
  60. if (result && result.length > 0) {
  61. deviceOptions.value = [];
  62. deviceOptions.value = result.map((item, index) => {
  63. return {
  64. label: item['strinstallpos'],
  65. value: item['id'] || item['deviceID'],
  66. strtype: item['strtype'] || item['deviceType'],
  67. strinstallpos: item['strinstallpos'],
  68. devicekind: item['devicekind'],
  69. stationtype: item['stationtype'],
  70. };
  71. });
  72. } else {
  73. deviceOptions.value = [];
  74. }
  75. await getForm().setFieldsValue({ deviceId: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '' });
  76. }
  77. // watch(
  78. // () => {
  79. // return deviceType.value;
  80. // },
  81. // async (newVal) => {
  82. // if (!newVal) return;
  83. // const column = getTableHeaderColumns(newVal + '_history');
  84. // if (column && column.length < 1) {
  85. // const arr = newVal.split('_');
  86. // const columnKey = arr.reduce((prev, cur, index) => {
  87. // if (index !== arr.length - 2) {
  88. // return prev + '_' + cur;
  89. // } else {
  90. // return prev;
  91. // }
  92. // });
  93. // columns.value = getTableHeaderColumns(arr[0] + '_history');
  94. // } else {
  95. // columns.value = column;
  96. // }
  97. // if (alarmHistory.value) reload();
  98. // },
  99. // {
  100. // immediate: true,
  101. // }
  102. // );
  103. watch(
  104. () => props.scroll.y,
  105. (newVal) => {
  106. if (newVal) {
  107. tableScroll.value = { y: newVal - 100 };
  108. } else {
  109. tableScroll.value = {};
  110. }
  111. }
  112. );
  113. // 列表页面公共参数、方法
  114. const { tableContext, onExportXls } = useListPage({
  115. tableProps: {
  116. api: safetyList,
  117. columns: props.columnsType ? columns : (props.columns as any[]),
  118. canResize: true,
  119. showTableSetting: false,
  120. showActionColumn: false,
  121. bordered: false,
  122. size: 'small',
  123. scroll: tableScroll,
  124. formConfig: {
  125. labelAlign: 'left',
  126. showAdvancedButton: false,
  127. // autoAdvancedCol: 2,
  128. schemas: [
  129. {
  130. label: '设备类型',
  131. field: 'devicetype',
  132. component: 'MTreeSelect',
  133. componentProps: {
  134. virtual: false,
  135. onChange: async (e: any) => {
  136. if (alarmHistory.value) getForm().resetFields();
  137. deviceType.value = e;
  138. await getDeviceList();
  139. },
  140. },
  141. colProps: { span: 6 },
  142. },
  143. {
  144. label: '查询设备',
  145. field: 'deviceId',
  146. component: 'Select',
  147. defaultValue: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
  148. componentProps: {
  149. showSearch: true,
  150. filterOption: (input: string, option: any) => {
  151. return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  152. },
  153. options: deviceOptions,
  154. },
  155. colProps: {
  156. span: 4,
  157. },
  158. },
  159. {
  160. field: 'startTime',
  161. label: '开始时间',
  162. component: 'DatePicker',
  163. defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
  164. required: true,
  165. componentProps: {
  166. showTime: true,
  167. valueFormat: 'YYYY-MM-DD HH:mm:ss',
  168. getPopupContainer: getAutoScrollContainer,
  169. },
  170. colProps: {
  171. span: 4,
  172. },
  173. },
  174. {
  175. field: 'endTime',
  176. label: '结束时间',
  177. component: 'DatePicker',
  178. defaultValue: dayjs(),
  179. required: true,
  180. componentProps: {
  181. showTime: true,
  182. valueFormat: 'YYYY-MM-DD HH:mm:ss',
  183. getPopupContainer: getAutoScrollContainer,
  184. },
  185. colProps: {
  186. span: 4,
  187. },
  188. },
  189. ],
  190. },
  191. fetchSetting: {
  192. listField: 'records',
  193. },
  194. pagination: {
  195. current: 1,
  196. pageSize: 10,
  197. pageSizeOptions: ['10', '30', '50', '100'],
  198. },
  199. },
  200. exportConfig: {
  201. name: '预警历史列表',
  202. url: '/safety/ventanalyAlarmLog/exportXls',
  203. },
  204. });
  205. //注册table数据
  206. const [registerTable, { reload, setLoading, getForm }] = tableContext;
  207. onMounted(async () => {});
  208. defineExpose({ setLoading });
  209. </script>
  210. <style scoped lang="less">
  211. @ventSpace: zxm;
  212. :deep(.ventSpace-table-body) {
  213. height: auto !important;
  214. }
  215. :deep(.zxm-picker) {
  216. height: 30px !important;
  217. }
  218. .alarm-history-table {
  219. width: 100%;
  220. :deep(.jeecg-basic-table-form-container) {
  221. .@{ventSpace}-form {
  222. padding: 0 !important;
  223. border: none !important;
  224. margin-bottom: 0 !important;
  225. .@{ventSpace}-picker,
  226. .@{ventSpace}-select-selector {
  227. width: 100% !important;
  228. background: #00000017;
  229. border: 1px solid #b7b7b7;
  230. input,
  231. .@{ventSpace}-select-selection-item,
  232. .@{ventSpace}-picker-suffix {
  233. color: #fff;
  234. }
  235. .@{ventSpace}-select-selection-placeholder {
  236. color: #ffffffaa;
  237. }
  238. }
  239. }
  240. .@{ventSpace}-table-title {
  241. min-height: 0 !important;
  242. }
  243. }
  244. }
  245. </style>