HistoryTable.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551
  1. <template>
  2. <div class="history-table" v-if="loading">
  3. <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource">
  4. <template #bodyCell="{ column, record }">
  5. <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
  6. record.warnFlag == '0' ? '正常' : '报警'
  7. }}</a-tag>
  8. <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
  9. record.netStatus == '0' ? '断开' : '连接'
  10. }}</a-tag>
  11. <slot name="filterCell" v-bind="{ column, record }"></slot>
  12. </template>
  13. <template #form-submitBefore>
  14. <a-button type="primary" preIcon="ant-design:search-outlined" @click="getDataSource">查询</a-button>
  15. <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFn"> 导出</a-button>
  16. </template>
  17. </BasicTable>
  18. </div>
  19. </template>
  20. <script lang="ts" setup>
  21. //ts语法
  22. import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
  23. import { FormSchema } from '/@/components/Form/index';
  24. import { BasicTable } from '/@/components/Table';
  25. import { useListPage } from '/@/hooks/system/useListPage';
  26. import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  27. import { defHttp } from '/@/utils/http/axios';
  28. import dayjs from 'dayjs';
  29. import { getAutoScrollContainer } from '/@/utils/common/compUtils';
  30. const globalConfig = inject('globalConfig');
  31. const props = defineProps({
  32. columnsType: {
  33. type: String,
  34. },
  35. columns: {
  36. type: Array,
  37. // required: true,
  38. default: () => [],
  39. },
  40. deviceType: {
  41. type: String,
  42. required: true,
  43. },
  44. deviceListApi: {
  45. type: Function,
  46. },
  47. deviceArr: {
  48. type: Array,
  49. // required: true,
  50. default: () => [],
  51. },
  52. designScope: {
  53. type: String,
  54. },
  55. sysId: {
  56. type: String,
  57. },
  58. deviceId: {
  59. type: String,
  60. },
  61. scroll: {
  62. type: Object,
  63. default: { y: 0 },
  64. },
  65. formSchemas: {
  66. type: Array<FormSchema>,
  67. default: () => [],
  68. },
  69. });
  70. const getDeviceListApi = (params) => defHttp.post({ url: '/monitor/device', params });
  71. const historyTable = ref();
  72. const loading = ref(false);
  73. const stationType = ref('plc1');
  74. const dataSource = ref([]);
  75. const intervalMap = new Map([
  76. ['1', '1s'],
  77. ['2', '5s'],
  78. ['3', '10s'],
  79. ['4', '30s'],
  80. ['5', '1m'],
  81. ['6', '10m'],
  82. ['7', '30m'],
  83. ['8', '1h'],
  84. ]);
  85. const getExportXlsUrl = () => {
  86. if (stationType.value !== 'redis') {
  87. return '/safety/ventanalyMonitorData/export/historydata';
  88. } else {
  89. return '/monitor/history/exportHistoryData';
  90. }
  91. };
  92. const emit = defineEmits(['change']);
  93. const historyType = ref('');
  94. const deviceKide = ref('');
  95. const columns = ref([]);
  96. const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
  97. let deviceOptions = ref([]);
  98. const deviceTypeStr = ref('');
  99. loading.value = true;
  100. watch(
  101. () => {
  102. return props.columnsType;
  103. },
  104. async (newVal) => {
  105. debugger;
  106. if (!newVal) return;
  107. deviceKide.value = newVal;
  108. if (historyTable.value) {
  109. getForm().resetFields();
  110. // getForm().updateSchema();
  111. // getForm();
  112. }
  113. dataSource.value = [];
  114. // const column = getTableHeaderColumns(newVal.includes('_history') ? newVal : newVal + '_history');
  115. // if (column && column.length < 1) {
  116. // const arr = newVal.split('_');
  117. // console.log('历史记录列表表头------------>', arr[0] + '_monitor');
  118. // columns.value = getTableHeaderColumns(arr[0] + '_history');
  119. // if (columns.value.length < 1) {
  120. // if (historyType.value) {
  121. // columns.value = getTableHeaderColumns(historyType.value + '_history');
  122. // }
  123. // }
  124. // } else {
  125. // columns.value = column;
  126. // }
  127. await getDeviceList();
  128. nextTick(() => {
  129. getDataSource();
  130. });
  131. if (historyTable.value) reload();
  132. },
  133. {
  134. immediate: true,
  135. }
  136. );
  137. watch(historyType, (type) => {
  138. if (!type) return;
  139. // if (historyTable.value) getForm().resetFields()
  140. const column = getTableHeaderColumns(type.includes('_history') ? type : type + '_history');
  141. if (column && column.length < 1) {
  142. const arr = type.split('_');
  143. columns.value = getTableHeaderColumns(arr[0] + '_history');
  144. } else {
  145. columns.value = column;
  146. }
  147. setColumns(columns.value);
  148. });
  149. watch(
  150. () => props.scroll.y,
  151. (newVal) => {
  152. if (newVal) {
  153. tableScroll.value = { y: newVal - 100 };
  154. } else {
  155. tableScroll.value = {};
  156. }
  157. }
  158. );
  159. // watch(stationType, (type) => {
  160. // if (type) {
  161. // nextTick(() => {
  162. // getDataSource();
  163. // });
  164. // }
  165. // });
  166. watch(
  167. () => props.deviceId,
  168. async () => {
  169. await getForm().setFieldsValue({});
  170. await getDeviceList();
  171. }
  172. );
  173. async function getDeviceList() {
  174. // if (props.deviceType.split('_')[1] && props.deviceType.split('_')[1] === 'history') return;
  175. let result;
  176. if (!props.sysId) {
  177. if (props.deviceListApi) {
  178. const res = await props.deviceListApi();
  179. if (props.deviceType.startsWith('modelsensor')) {
  180. if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
  181. result = res['msgTxt'][0]['datalist'];
  182. }
  183. } else {
  184. if (res['records'] && res['records'].length > 0) result = res['records'];
  185. }
  186. } else {
  187. const res = await getDeviceListApi({ devicetype: props.deviceType, pageSize: 10000 });
  188. if (res['records'] && res['records'].length > 0) {
  189. result = res['records'];
  190. } else if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
  191. result = res['msgTxt'][0]['datalist'];
  192. }
  193. }
  194. } else {
  195. const res = await getDeviceListApi({
  196. sysId: props.sysId,
  197. devicetype: props.deviceType.startsWith('vehicle') ? 'location_normal' : props.deviceType,
  198. pageSize: 10000,
  199. });
  200. if (res['records'] && res['records'].length > 0) {
  201. result = res['records'];
  202. } else if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
  203. result = res['msgTxt'][0]['datalist'];
  204. }
  205. }
  206. if (result) {
  207. deviceOptions.value = [];
  208. deviceOptions.value = result.map((item, index) => {
  209. return {
  210. label: item['strinstallpos'],
  211. value: item['id'] || item['deviceID'],
  212. strtype: item['strtype'] || item['deviceType'],
  213. strinstallpos: item['strinstallpos'],
  214. devicekind: item['devicekind'],
  215. stationtype: item['stationtype'],
  216. };
  217. });
  218. stationType.value = deviceOptions.value[0]['stationtype'];
  219. historyType.value = deviceOptions.value[0]['strtype'] || deviceOptions.value[0]['devicekind'];
  220. }
  221. await getForm().setFieldsValue({ gdeviceid: props.deviceId ? props.deviceId : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '' });
  222. }
  223. function resetFormParam() {
  224. const stationTypeStr = stationType.value;
  225. const formData = getForm().getFieldsValue();
  226. const pagination = getPaginationRef();
  227. formData['pageNo'] = pagination['current'];
  228. formData['pageSize'] = pagination['pageSize'];
  229. formData['column'] = 'createTime';
  230. if (stationTypeStr !== 'redis') {
  231. formData['strtype'] = deviceTypeStr.value
  232. ? deviceTypeStr.value
  233. : deviceOptions.value[0]['strtype']
  234. ? deviceOptions.value[0]['strtype']
  235. : props.deviceType + '*';
  236. if (props.sysId) {
  237. formData['sysId'] = props.sysId;
  238. }
  239. return formData;
  240. } else {
  241. const params = {
  242. pageNum: pagination['current'],
  243. pageSize: pagination['pageSize'],
  244. column: pagination['createTime'],
  245. startTime: formData['ttime_begin'],
  246. endTime: formData['ttime_end'],
  247. deviceId: formData['gdeviceid'],
  248. strtype: props.deviceType + '*',
  249. sysId: props.sysId,
  250. interval: intervalMap.get(formData['skip']) ? intervalMap.get(formData['skip']) : '1h',
  251. isEmployee: props.deviceType.startsWith('vehicle') ? false : true,
  252. };
  253. return params;
  254. }
  255. }
  256. async function getDataSource() {
  257. const stationTypeStr = stationType.value;
  258. dataSource.value = [];
  259. setLoading(true);
  260. const params = await resetFormParam();
  261. if (stationTypeStr !== 'redis') {
  262. const result = await defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params: params });
  263. setPagination({ total: Math.abs(result['datalist']['total']) || 0 });
  264. if (result['datalist']['records'].length > 0) {
  265. dataSource.value = result['datalist']['records'].map((item: any) => {
  266. return Object.assign(item, item['readData']);
  267. });
  268. } else {
  269. dataSource.value = [];
  270. }
  271. } else {
  272. const result = await defHttp.post({ url: '/monitor/history/getHistoryData', params: params });
  273. setPagination({ total: Math.abs(result['total']) || 0 });
  274. dataSource.value = result['records'] || [];
  275. }
  276. setLoading(false);
  277. }
  278. // 列表页面公共参数、方法
  279. const { tableContext, onExportXls, onExportXlsPost } = useListPage({
  280. tableProps: {
  281. // api: list,
  282. columns: props.columnsType ? columns : (props.columns as any[]),
  283. canResize: true,
  284. showTableSetting: false,
  285. showActionColumn: false,
  286. bordered: false,
  287. size: 'small',
  288. scroll: tableScroll,
  289. showIndexColumn: true,
  290. tableLayout: 'auto',
  291. formConfig: {
  292. labelAlign: 'left',
  293. showAdvancedButton: false,
  294. showSubmitButton: false,
  295. showResetButton: false,
  296. baseColProps: {
  297. xs: 24,
  298. sm: 24,
  299. md: 24,
  300. lg: 9,
  301. xl: 7,
  302. xxl: 4,
  303. },
  304. schemas:
  305. props.formSchemas.length > 0
  306. ? props.formSchemas
  307. : [
  308. {
  309. field: 'ttime_begin',
  310. label: '开始时间',
  311. component: 'DatePicker',
  312. defaultValue: dayjs().startOf('date'),
  313. required: true,
  314. componentProps: {
  315. showTime: true,
  316. valueFormat: 'YYYY-MM-DD HH:mm:ss',
  317. getPopupContainer: getAutoScrollContainer,
  318. },
  319. colProps: {
  320. span: 4,
  321. },
  322. },
  323. {
  324. field: 'ttime_end',
  325. label: '结束时间',
  326. component: 'DatePicker',
  327. defaultValue: dayjs(),
  328. required: true,
  329. componentProps: {
  330. showTime: true,
  331. valueFormat: 'YYYY-MM-DD HH:mm:ss',
  332. getPopupContainer: getAutoScrollContainer,
  333. },
  334. colProps: {
  335. span: 4,
  336. },
  337. },
  338. {
  339. label: computed(() => `${deviceKide.value.startsWith('location') ? '查询人员' : '查询设备'}`),
  340. field: 'gdeviceid',
  341. component: 'Select',
  342. defaultValue: props.deviceId ? props.deviceId : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
  343. required: true,
  344. componentProps: {
  345. showSearch: true,
  346. filterOption: (input: string, option: any) => {
  347. return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  348. },
  349. options: deviceOptions,
  350. onChange: (e, option) => {
  351. if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind']))
  352. historyType.value = option['strtype'] || option['devicekind'];
  353. if (option['strtype']) deviceTypeStr.value = option['strtype'];
  354. stationType.value = option['stationtype'];
  355. nextTick(async () => {
  356. await getDataSource();
  357. });
  358. },
  359. },
  360. colProps: {
  361. span: 4,
  362. },
  363. },
  364. {
  365. label: '间隔时间',
  366. field: 'skip',
  367. component: 'Select',
  368. defaultValue: '8',
  369. componentProps: {
  370. options: [
  371. {
  372. label: '1秒',
  373. value: '1',
  374. },
  375. {
  376. label: '5秒',
  377. value: '2',
  378. },
  379. {
  380. label: '10秒',
  381. value: '3',
  382. },
  383. {
  384. label: '30秒',
  385. value: '4',
  386. },
  387. {
  388. label: '1分钟',
  389. value: '5',
  390. },
  391. {
  392. label: '10分钟',
  393. value: '6',
  394. },
  395. {
  396. label: '30分钟',
  397. value: '7',
  398. },
  399. {
  400. label: '1小时',
  401. value: '8',
  402. },
  403. ],
  404. },
  405. colProps: {
  406. span: 4,
  407. },
  408. },
  409. ],
  410. // fieldMapToTime: [['tickectDate', ['ttime_begin', 'ttime_end'], '']],
  411. },
  412. // fetchSetting: {
  413. // listField: 'datalist',
  414. // totalField: 'datalist.total',
  415. // },
  416. pagination: {
  417. current: 1,
  418. pageSize: 10,
  419. pageSizeOptions: ['10', '30', '50', '100'],
  420. showQuickJumper: false,
  421. },
  422. beforeFetch() {
  423. const newParams = { ...resetFormParam() };
  424. debugger;
  425. return newParams;
  426. },
  427. // afterFetch(result) {
  428. // const resultItems = result['records'];
  429. // resultItems.map((item) => {
  430. // Object.assign(item, item['readData']);
  431. // });
  432. // console.log('result---------------->', result);
  433. // return resultItems;
  434. // },
  435. },
  436. exportConfig: {
  437. name: '设备历史列表',
  438. url: getExportXlsUrl,
  439. },
  440. });
  441. //注册table数据
  442. const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;
  443. function onExportXlsFn() {
  444. const params = resetFormParam();
  445. // 判断时间间隔和查询时间区间,数据量下载大时进行提示
  446. if (stationType.value !== 'redis') {
  447. return onExportXls(params);
  448. } else {
  449. return onExportXlsPost(params);
  450. }
  451. }
  452. watchEffect(() => {
  453. if (historyTable.value && dataSource) {
  454. const data = dataSource.value || [];
  455. emit('change', data);
  456. }
  457. });
  458. onMounted(async () => {
  459. await getDeviceList();
  460. if (deviceOptions.value[0]) {
  461. stationType.value = deviceOptions.value[0]['stationtype'];
  462. historyType.value = deviceOptions.value[0]['strtype'] || deviceOptions.value[0]['devicekind'];
  463. nextTick(async () => {
  464. await getDataSource();
  465. });
  466. }
  467. watch([() => getPaginationRef()['current'], () => getPaginationRef()['pageSize']], async () => {
  468. if (deviceOptions.value[0]) {
  469. if (deviceOptions.value[0]) {
  470. await getDataSource();
  471. }
  472. }
  473. });
  474. });
  475. defineExpose({ setLoading });
  476. </script>
  477. <style scoped lang="less">
  478. @import '/@/design/theme.less';
  479. :deep(.@{ventSpace}-table-body) {
  480. height: auto !important;
  481. }
  482. :deep(.zxm-picker) {
  483. height: 30px !important;
  484. }
  485. .history-table {
  486. width: 100%;
  487. :deep(.jeecg-basic-table-form-container) {
  488. .@{ventSpace}-form {
  489. padding: 0 !important;
  490. border: none !important;
  491. margin-bottom: 0 !important;
  492. .@{ventSpace}-picker,
  493. .@{ventSpace}-select-selector {
  494. width: 100% !important;
  495. height: 100%;
  496. background: #00000017;
  497. border: 1px solid #b7b7b7;
  498. input,
  499. .@{ventSpace}-select-selection-item,
  500. .@{ventSpace}-picker-suffix {
  501. color: #fff;
  502. }
  503. .@{ventSpace}-select-selection-placeholder {
  504. color: #ffffffaa;
  505. }
  506. }
  507. }
  508. .@{ventSpace}-table-title {
  509. min-height: 0 !important;
  510. }
  511. }
  512. .pagination-box {
  513. display: flex;
  514. justify-content: flex-end;
  515. align-items: center;
  516. .page-num {
  517. border: 1px solid #0090d8;
  518. padding: 4px 8px;
  519. margin-right: 5px;
  520. color: #0090d8;
  521. }
  522. .btn {
  523. margin-right: 10px;
  524. }
  525. }
  526. }
  527. </style>