yudao-dev/src/views/abnormalWarning/index.vue

<template>
	<div class="warning-page">
		<navbar />
		<div class="main-box">
			<div class="title">
				<span></span>
				异常警告
				<div class="return-home" @click="toHome">
					<svg-icon
						icon-class="alarm-home"
						style="font-size: 20px; position: relative; top: 2px" />
					返回首页
				</div>
			</div>
			<search-bar
				:formConfigs="formConfig"
				removeBlue
				ref="searchBarForm"
				@headBtnClick="buttonClick" />
			<base-table
				:page="1"
				:limit="100000"
				:table-props="tableProps"
				:table-data="list"
				:max-height="tableH" />
		</div>
		<div class="footer">
			<img src="../../assets/img/alarm-bg.png" alt="" />
			<div>&copy; 中建材智能自动化研究院有限公司</div>
		</div>
	</div>
</template>
<script>
import Navbar from './components/Navbar';
import moment from 'moment';
import tableHeightMixin from '@/mixins/tableHeightMixin';
import { listData } from '@/api/system/dict/data';
import alarmGrade from './alarmGrade.vue'
import {
	getHomeAlarmList
} from '@/api/home';

export default {
	name: 'AbnormalWarning',
	mixins: [tableHeightMixin],
	components: { Navbar },
	data() {
		return {
			formConfig: [
				{
					type: 'input',
					label: '报警来源',
					placeholder: '报警来源',
					param: 'alarmSource',
				},
				{
					type: 'datePicker',
					label: '时间段',
					dateType: 'daterange',
					format: 'yyyy-MM-dd',
					valueFormat: 'timestamp',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'alarmTime',
				},
				{
					type: 'select',
					label: '报警级别',
					selectOptions: [],
					param: 'alarmGrade',
					defaultSelect: '',
					filterable: true,
					labelField: 'label',
					valueField: 'value',
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
			],
			heightNum: 280,
			tableProps: [
				{
					prop: 'alarmTime',
					label: '报警时间',
					width: 180,
					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
				},
				{
					prop: 'alarmSource',
					label: '报警来源',
					showOverflowtooltip: true,
				},
				{
					prop: 'alarmType',
					label: '报警类型',
					showOverflowtooltip: true,
				},
				{
					prop: 'alarmGrade',
					label: '报警级别',
					showOverflowtooltip: true,
          subcomponent: alarmGrade
				},
				{
					prop: 'alarmReason',
					label: '报警原因',
					showOverflowtooltip: true,
				},
				{
					prop: 'alarmContent',
					label: '报警详情',
					showOverflowtooltip: true,
				},
			],
			list: [],
      listQuery: {
        alarmSource: undefined,
        alarmTime: undefined,
        alarmGrade: undefined,
      }
		};
	},
	created() {
		const queryParams = {
			pageNo: 1,
			pageSize: 99,
			dictType: 'equ_alarm_level',
		};
		listData(queryParams).then((response) => {
			this.formConfig[2].selectOptions = response.data.list;
		});
    this.getDataList()
  },
	methods: {
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.alarmSource = val.alarmSource;
					this.listQuery.alarmGrade = val.alarmGrade;
					this.listQuery.alarmTime = val.alarmTime ? val.alarmTime : null;
					this.getDataList();
					break;
				default:
					console.log(val);
			}
    },
    getDataList(){
      getHomeAlarmList(this.listQuery).then(response => {
        if(response.hasOwnProperty('data')){
          this.list = response.data;
        }else{
          this.list = []
        }
      });
    },
		toHome() {
			this.$router.push({ path: '/' });
		},
	},
};
</script>
<style lang="scss" scoped>
.warning-page {
	width: 100%;
	height: 100vh;
	.main-box {
		position: relative;
		width: 64.58%;
		height: calc(100vh - 160px);
		background-color: #fff;
		border-radius: 24px;
		margin: 16px auto 0;
		z-index: 10;
		padding: 24px 32px;
		.title {
			font-size: 16px;
			color: #000000;
			position: relative;
			cursor: pointer;
			span {
				display: inline-block;
				float: left;
				width: 4px;
				height: 16px;
				background-color: #0b58ff;
				border-radius: 1px;
				margin-right: 8px;
				margin-top: 4px;
			}
			.return-home {
				position: absolute;
				color: rgba(0, 0, 0, 0.3);
				font-size: 14px;
				right: 0px;
				top: 0px;
			}
		}
	}
	.footer {
		position: fixed;
		width: 100%;
		bottom: -3px;
		z-index: 8;
		img {
			width: 100%;
			height: 220px;
		}
		div {
			width: 100%;
			color: red;
			position: absolute;
			bottom: 10px;
			text-align: center;
			font-size: 12px;
			color: #c7c7c7;
			letter-spacing: 1px;
		}
	}
}
</style>