HistoryTable.vue 16 KB

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