123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551 |
- <template>
- <div class="history-table" v-if="loading">
- <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource">
- <template #bodyCell="{ column, record }">
- <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
- record.warnFlag == '0' ? '正常' : '报警'
- }}</a-tag>
- <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
- record.netStatus == '0' ? '断开' : '连接'
- }}</a-tag>
- <slot name="filterCell" v-bind="{ column, record }"></slot>
- </template>
- <template #form-submitBefore>
- <a-button type="primary" preIcon="ant-design:search-outlined" @click="getDataSource">查询</a-button>
- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFn"> 导出</a-button>
- </template>
- </BasicTable>
- </div>
- </template>
- <script lang="ts" setup>
- //ts语法
- import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
- import { FormSchema } from '/@/components/Form/index';
- import { BasicTable } from '/@/components/Table';
- import { useListPage } from '/@/hooks/system/useListPage';
- import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
- import { defHttp } from '/@/utils/http/axios';
- import dayjs from 'dayjs';
- import { getAutoScrollContainer } from '/@/utils/common/compUtils';
- const globalConfig = inject('globalConfig');
- const props = defineProps({
- columnsType: {
- type: String,
- },
- columns: {
- type: Array,
- // required: true,
- default: () => [],
- },
- deviceType: {
- type: String,
- required: true,
- },
- deviceListApi: {
- type: Function,
- },
- deviceArr: {
- type: Array,
- // required: true,
- default: () => [],
- },
- designScope: {
- type: String,
- },
- sysId: {
- type: String,
- },
- deviceId: {
- type: String,
- },
- scroll: {
- type: Object,
- default: { y: 0 },
- },
- formSchemas: {
- type: Array<FormSchema>,
- default: () => [],
- },
- });
- const getDeviceListApi = (params) => defHttp.post({ url: '/monitor/device', params });
- const historyTable = ref();
- const loading = ref(false);
- const stationType = ref('plc1');
- const dataSource = ref([]);
- const intervalMap = new Map([
- ['1', '1s'],
- ['2', '5s'],
- ['3', '10s'],
- ['4', '30s'],
- ['5', '1m'],
- ['6', '10m'],
- ['7', '30m'],
- ['8', '1h'],
- ]);
- const getExportXlsUrl = () => {
- if (stationType.value !== 'redis') {
- return '/safety/ventanalyMonitorData/export/historydata';
- } else {
- return '/monitor/history/exportHistoryData';
- }
- };
- const emit = defineEmits(['change']);
- const historyType = ref('');
- const deviceKide = ref('');
- const columns = ref([]);
- const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
- let deviceOptions = ref([]);
- const deviceTypeStr = ref('');
- loading.value = true;
- watch(
- () => {
- return props.columnsType;
- },
- async (newVal) => {
- debugger;
- if (!newVal) return;
- deviceKide.value = newVal;
- if (historyTable.value) {
- getForm().resetFields();
- // getForm().updateSchema();
- // getForm();
- }
- dataSource.value = [];
- // const column = getTableHeaderColumns(newVal.includes('_history') ? newVal : newVal + '_history');
- // if (column && column.length < 1) {
- // const arr = newVal.split('_');
- // console.log('历史记录列表表头------------>', arr[0] + '_monitor');
- // columns.value = getTableHeaderColumns(arr[0] + '_history');
- // if (columns.value.length < 1) {
- // if (historyType.value) {
- // columns.value = getTableHeaderColumns(historyType.value + '_history');
- // }
- // }
- // } else {
- // columns.value = column;
- // }
- await getDeviceList();
- nextTick(() => {
- getDataSource();
- });
- if (historyTable.value) reload();
- },
- {
- immediate: true,
- }
- );
- watch(historyType, (type) => {
- if (!type) return;
- // if (historyTable.value) getForm().resetFields()
- const column = getTableHeaderColumns(type.includes('_history') ? type : type + '_history');
- if (column && column.length < 1) {
- const arr = type.split('_');
- columns.value = getTableHeaderColumns(arr[0] + '_history');
- } else {
- columns.value = column;
- }
- setColumns(columns.value);
- });
- watch(
- () => props.scroll.y,
- (newVal) => {
- if (newVal) {
- tableScroll.value = { y: newVal - 100 };
- } else {
- tableScroll.value = {};
- }
- }
- );
- // watch(stationType, (type) => {
- // if (type) {
- // nextTick(() => {
- // getDataSource();
- // });
- // }
- // });
- watch(
- () => props.deviceId,
- async () => {
- await getForm().setFieldsValue({});
- await getDeviceList();
- }
- );
- async function getDeviceList() {
- // if (props.deviceType.split('_')[1] && props.deviceType.split('_')[1] === 'history') return;
- let result;
- if (!props.sysId) {
- if (props.deviceListApi) {
- const res = await props.deviceListApi();
- if (props.deviceType.startsWith('modelsensor')) {
- if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
- result = res['msgTxt'][0]['datalist'];
- }
- } else {
- if (res['records'] && res['records'].length > 0) result = res['records'];
- }
- } else {
- const res = await getDeviceListApi({ devicetype: props.deviceType, pageSize: 10000 });
- if (res['records'] && res['records'].length > 0) {
- result = res['records'];
- } else if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
- result = res['msgTxt'][0]['datalist'];
- }
- }
- } else {
- const res = await getDeviceListApi({
- sysId: props.sysId,
- devicetype: props.deviceType.startsWith('vehicle') ? 'location_normal' : props.deviceType,
- pageSize: 10000,
- });
- if (res['records'] && res['records'].length > 0) {
- result = res['records'];
- } else if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
- result = res['msgTxt'][0]['datalist'];
- }
- }
- if (result) {
- deviceOptions.value = [];
- deviceOptions.value = result.map((item, index) => {
- return {
- label: item['strinstallpos'],
- value: item['id'] || item['deviceID'],
- strtype: item['strtype'] || item['deviceType'],
- strinstallpos: item['strinstallpos'],
- devicekind: item['devicekind'],
- stationtype: item['stationtype'],
- };
- });
- stationType.value = deviceOptions.value[0]['stationtype'];
- historyType.value = deviceOptions.value[0]['strtype'] || deviceOptions.value[0]['devicekind'];
- }
- await getForm().setFieldsValue({ gdeviceid: props.deviceId ? props.deviceId : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '' });
- }
- function resetFormParam() {
- const stationTypeStr = stationType.value;
- const formData = getForm().getFieldsValue();
- const pagination = getPaginationRef();
- formData['pageNo'] = pagination['current'];
- formData['pageSize'] = pagination['pageSize'];
- formData['column'] = 'createTime';
- if (stationTypeStr !== 'redis') {
- formData['strtype'] = deviceTypeStr.value
- ? deviceTypeStr.value
- : deviceOptions.value[0]['strtype']
- ? deviceOptions.value[0]['strtype']
- : props.deviceType + '*';
- if (props.sysId) {
- formData['sysId'] = props.sysId;
- }
- return formData;
- } else {
- const params = {
- pageNum: pagination['current'],
- pageSize: pagination['pageSize'],
- column: pagination['createTime'],
- startTime: formData['ttime_begin'],
- endTime: formData['ttime_end'],
- deviceId: formData['gdeviceid'],
- strtype: props.deviceType + '*',
- sysId: props.sysId,
- interval: intervalMap.get(formData['skip']) ? intervalMap.get(formData['skip']) : '1h',
- isEmployee: props.deviceType.startsWith('vehicle') ? false : true,
- };
- return params;
- }
- }
- async function getDataSource() {
- const stationTypeStr = stationType.value;
- dataSource.value = [];
- setLoading(true);
- const params = await resetFormParam();
- if (stationTypeStr !== 'redis') {
- const result = await defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params: params });
- setPagination({ total: Math.abs(result['datalist']['total']) || 0 });
- if (result['datalist']['records'].length > 0) {
- dataSource.value = result['datalist']['records'].map((item: any) => {
- return Object.assign(item, item['readData']);
- });
- } else {
- dataSource.value = [];
- }
- } else {
- const result = await defHttp.post({ url: '/monitor/history/getHistoryData', params: params });
- setPagination({ total: Math.abs(result['total']) || 0 });
- dataSource.value = result['records'] || [];
- }
- setLoading(false);
- }
- // 列表页面公共参数、方法
- const { tableContext, onExportXls, onExportXlsPost } = useListPage({
- tableProps: {
- // api: list,
- columns: props.columnsType ? columns : (props.columns as any[]),
- canResize: true,
- showTableSetting: false,
- showActionColumn: false,
- bordered: false,
- size: 'small',
- scroll: tableScroll,
- showIndexColumn: true,
- tableLayout: 'auto',
- formConfig: {
- labelAlign: 'left',
- showAdvancedButton: false,
- showSubmitButton: false,
- showResetButton: false,
- baseColProps: {
- xs: 24,
- sm: 24,
- md: 24,
- lg: 9,
- xl: 7,
- xxl: 4,
- },
- schemas:
- props.formSchemas.length > 0
- ? props.formSchemas
- : [
- {
- field: 'ttime_begin',
- label: '开始时间',
- component: 'DatePicker',
- defaultValue: dayjs().startOf('date'),
- required: true,
- componentProps: {
- showTime: true,
- valueFormat: 'YYYY-MM-DD HH:mm:ss',
- getPopupContainer: getAutoScrollContainer,
- },
- colProps: {
- span: 4,
- },
- },
- {
- field: 'ttime_end',
- label: '结束时间',
- component: 'DatePicker',
- defaultValue: dayjs(),
- required: true,
- componentProps: {
- showTime: true,
- valueFormat: 'YYYY-MM-DD HH:mm:ss',
- getPopupContainer: getAutoScrollContainer,
- },
- colProps: {
- span: 4,
- },
- },
- {
- label: computed(() => `${deviceKide.value.startsWith('location') ? '查询人员' : '查询设备'}`),
- field: 'gdeviceid',
- component: 'Select',
- defaultValue: props.deviceId ? props.deviceId : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
- required: true,
- componentProps: {
- showSearch: true,
- filterOption: (input: string, option: any) => {
- return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
- },
- options: deviceOptions,
- onChange: (e, option) => {
- if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind']))
- historyType.value = option['strtype'] || option['devicekind'];
- if (option['strtype']) deviceTypeStr.value = option['strtype'];
- stationType.value = option['stationtype'];
- nextTick(async () => {
- await getDataSource();
- });
- },
- },
- colProps: {
- span: 4,
- },
- },
- {
- label: '间隔时间',
- field: 'skip',
- component: 'Select',
- defaultValue: '8',
- componentProps: {
- options: [
- {
- label: '1秒',
- value: '1',
- },
- {
- label: '5秒',
- value: '2',
- },
- {
- label: '10秒',
- value: '3',
- },
- {
- label: '30秒',
- value: '4',
- },
- {
- label: '1分钟',
- value: '5',
- },
- {
- label: '10分钟',
- value: '6',
- },
- {
- label: '30分钟',
- value: '7',
- },
- {
- label: '1小时',
- value: '8',
- },
- ],
- },
- colProps: {
- span: 4,
- },
- },
- ],
- // fieldMapToTime: [['tickectDate', ['ttime_begin', 'ttime_end'], '']],
- },
- // fetchSetting: {
- // listField: 'datalist',
- // totalField: 'datalist.total',
- // },
- pagination: {
- current: 1,
- pageSize: 10,
- pageSizeOptions: ['10', '30', '50', '100'],
- showQuickJumper: false,
- },
- beforeFetch() {
- const newParams = { ...resetFormParam() };
- debugger;
- return newParams;
- },
- // afterFetch(result) {
- // const resultItems = result['records'];
- // resultItems.map((item) => {
- // Object.assign(item, item['readData']);
- // });
- // console.log('result---------------->', result);
- // return resultItems;
- // },
- },
- exportConfig: {
- name: '设备历史列表',
- url: getExportXlsUrl,
- },
- });
- //注册table数据
- const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;
- function onExportXlsFn() {
- const params = resetFormParam();
- // 判断时间间隔和查询时间区间,数据量下载大时进行提示
- if (stationType.value !== 'redis') {
- return onExportXls(params);
- } else {
- return onExportXlsPost(params);
- }
- }
- watchEffect(() => {
- if (historyTable.value && dataSource) {
- const data = dataSource.value || [];
- emit('change', data);
- }
- });
- onMounted(async () => {
- await getDeviceList();
- if (deviceOptions.value[0]) {
- stationType.value = deviceOptions.value[0]['stationtype'];
- historyType.value = deviceOptions.value[0]['strtype'] || deviceOptions.value[0]['devicekind'];
- nextTick(async () => {
- await getDataSource();
- });
- }
- watch([() => getPaginationRef()['current'], () => getPaginationRef()['pageSize']], async () => {
- if (deviceOptions.value[0]) {
- if (deviceOptions.value[0]) {
- await getDataSource();
- }
- }
- });
- });
- defineExpose({ setLoading });
- </script>
- <style scoped lang="less">
- @import '/@/design/theme.less';
- :deep(.@{ventSpace}-table-body) {
- height: auto !important;
- }
- :deep(.zxm-picker) {
- height: 30px !important;
- }
- .history-table {
- width: 100%;
- :deep(.jeecg-basic-table-form-container) {
- .@{ventSpace}-form {
- padding: 0 !important;
- border: none !important;
- margin-bottom: 0 !important;
- .@{ventSpace}-picker,
- .@{ventSpace}-select-selector {
- width: 100% !important;
- height: 100%;
- background: #00000017;
- border: 1px solid #b7b7b7;
- input,
- .@{ventSpace}-select-selection-item,
- .@{ventSpace}-picker-suffix {
- color: #fff;
- }
- .@{ventSpace}-select-selection-placeholder {
- color: #ffffffaa;
- }
- }
- }
- .@{ventSpace}-table-title {
- min-height: 0 !important;
- }
- }
- .pagination-box {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- .page-num {
- border: 1px solid #0090d8;
- padding: 4px 8px;
- margin-right: 5px;
- color: #0090d8;
- }
- .btn {
- margin-right: 10px;
- }
- }
- }
- </style>
|