|
|
@@ -0,0 +1,239 @@
|
|
|
+<template>
|
|
|
+ <div class="alarm-history-table">
|
|
|
+ <BasicTable v-if="type == 'table'" @register="registerTable">
|
|
|
+ <template #form-submitBefore>
|
|
|
+ <a-button type="primary" preIcon="ant-design:search-outlined" @click="getDataSource">查询</a-button>
|
|
|
+ </template>
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <template v-if="column.dict">
|
|
|
+ <span>
|
|
|
+ {{ render.renderDictText(record[column.dataIndex], column.dict) || '-' }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ <BarAndLine
|
|
|
+ v-else
|
|
|
+ class="echarts-line"
|
|
|
+ xAxisPropType="createTime"
|
|
|
+ :dataSource="dataSource"
|
|
|
+ height="300px"
|
|
|
+ :chartsColumns="chartColumns"
|
|
|
+ :option="echatsOption"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" name="system-user" setup>
|
|
|
+ //ts语法
|
|
|
+ import { watch, ref, defineExpose, inject, onMounted } from 'vue';
|
|
|
+ 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';
|
|
|
+ import { render } from '/@/utils/common/renderUtils';
|
|
|
+ import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
+
|
|
|
+ const props = defineProps({
|
|
|
+ sysId: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ columnsType: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ list: {
|
|
|
+ type: Function,
|
|
|
+ default: (params) => defHttp.post({ url: '/ventanaly-device/safety/ventanalyDeviceInfo/getZrfyInfoLogList', params }),
|
|
|
+ },
|
|
|
+ scroll: {
|
|
|
+ type: Object,
|
|
|
+ default: { y: 0 },
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const echatsOption = {
|
|
|
+ grid: {
|
|
|
+ top: '35',
|
|
|
+ left: '30',
|
|
|
+ right: '45',
|
|
|
+ bottom: '25',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {},
|
|
|
+ },
|
|
|
+ };
|
|
|
+ const dataSource = ref();
|
|
|
+ const columns = ref([]);
|
|
|
+ const chartColumns = ref([]);
|
|
|
+ const deviceOptions = ref([]);
|
|
|
+ const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
|
|
|
+
|
|
|
+ async function getDataSource() {
|
|
|
+ const pagination = getPaginationRef();
|
|
|
+ const res = await defHttp.post({
|
|
|
+ url: '/ventanaly-device/safety/ventanalyDeviceInfo/getZrfyInfoLogList',
|
|
|
+ data: { sysId: props.sysId, pageNo: pagination['current'], pageSize: pagination['pageSize'] },
|
|
|
+ });
|
|
|
+ setPagination({
|
|
|
+ total: res['total'] || 0,
|
|
|
+ current: res['current'] || 1,
|
|
|
+ pageSize: res['size'] || 1,
|
|
|
+ size: res['pages'] || 1,
|
|
|
+ });
|
|
|
+ if (res.records && res.records.length > 0) {
|
|
|
+ dataSource.value = res.records;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ watch(
|
|
|
+ () => {
|
|
|
+ return props.columnsType;
|
|
|
+ },
|
|
|
+ async (newVal) => {
|
|
|
+ if (!newVal) return;
|
|
|
+
|
|
|
+ const column = getTableHeaderColumns(newVal + '_history');
|
|
|
+ const chartColumnList = getTableHeaderColumns(newVal + '_chart');
|
|
|
+ if (column && column.length < 1) {
|
|
|
+ const arr = newVal.split('_');
|
|
|
+ columns.value = getTableHeaderColumns(arr[0] + '_history');
|
|
|
+ chartColumns.value = getTableHeaderColumns(arr[0] + '_chart');
|
|
|
+ } else {
|
|
|
+ columns.value = column;
|
|
|
+ chartColumns.value = chartColumnList;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true,
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.scroll.y,
|
|
|
+ (newVal) => {
|
|
|
+ if (newVal) {
|
|
|
+ tableScroll.value = { y: newVal - 100 };
|
|
|
+ } else {
|
|
|
+ tableScroll.value = {};
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ // 列表页面公共参数、方法
|
|
|
+ const { tableContext } = useListPage({
|
|
|
+ tableProps: {
|
|
|
+ dataSource: dataSource,
|
|
|
+ columns: columns,
|
|
|
+ canResize: true,
|
|
|
+ showTableSetting: false,
|
|
|
+ showActionColumn: false,
|
|
|
+
|
|
|
+ bordered: false,
|
|
|
+ size: 'small',
|
|
|
+ scroll: tableScroll,
|
|
|
+ showIndexColumn: true,
|
|
|
+ formConfig: {
|
|
|
+ labelAlign: 'left',
|
|
|
+ showAdvancedButton: false,
|
|
|
+ showSubmitButton: false,
|
|
|
+ schemas: [
|
|
|
+ {
|
|
|
+ field: 'createTime_begin',
|
|
|
+ label: '开始时间',
|
|
|
+ component: 'DatePicker',
|
|
|
+ defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ required: true,
|
|
|
+ componentProps: {
|
|
|
+ showTime: true,
|
|
|
+ valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
+ getPopupContainer: getAutoScrollContainer,
|
|
|
+ },
|
|
|
+ colProps: {
|
|
|
+ span: 4,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'createTime_end',
|
|
|
+ label: '结束时间',
|
|
|
+ component: 'DatePicker',
|
|
|
+ defaultValue: dayjs(),
|
|
|
+ required: true,
|
|
|
+ componentProps: {
|
|
|
+ showTime: true,
|
|
|
+ valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
+ getPopupContainer: getAutoScrollContainer,
|
|
|
+ },
|
|
|
+ colProps: {
|
|
|
+ span: 4,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ fetchSetting: {
|
|
|
+ listField: 'records',
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ pageSizeOptions: ['10', '30', '50', '100'],
|
|
|
+ showQuickJumper: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ //注册table数据
|
|
|
+ const [registerTable, { reload, setLoading, setPagination, getPaginationRef }] = tableContext;
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ await getDataSource();
|
|
|
+ watch([() => getPaginationRef()['current'], () => getPaginationRef()['pageSize']], async () => {
|
|
|
+ await getDataSource();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ defineExpose({ setLoading });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ @ventSpace: zxm;
|
|
|
+
|
|
|
+ :deep(.ventSpace-table-body) {
|
|
|
+ height: auto !important;
|
|
|
+ }
|
|
|
+ :deep(.zxm-picker) {
|
|
|
+ height: 30px !important;
|
|
|
+ }
|
|
|
+ .alarm-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;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
