zhgdyun/src/views/projectFront/rainfallMonitor/alarmWarning.vue

<template>
    <div class="fullHeight">
        <div class="searchBox whiteBlock">
            <!-- <el-select v-model="queryInfo.alarmTypeId" size="medium"
                       :placeholder="$t('message.alarmWarning.alarmTypeId')">
                <el-option
                        v-for="item in alarmTypeIdArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select> -->
            <!-- <el-select v-model="queryInfo.type" size="medium"
                       :placeholder="$t('message.alarmWarning.alarmTypeId')">
                <el-option
                        v-for="(item,index) in $t('message.alarmWarning.typeArr')"
                        :key="index"
                        :label="item"
                        :value="index">
                </el-option>
            </el-select> -->
            <el-select v-model="queryInfo.deviceId" size="medium"
                       :placeholder="$t('message.alarmWarning.deviceId')">
                <el-option
                        v-for="item in deviceIdArr"
                        :key="item.id"
                        :label="item.devName"
                        :value="item.devSn">
                </el-option>
            </el-select>
            <el-date-picker
                    v-model="time" size="medium"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    :start-placeholder="$t('message.alarmWarning.startTime')"
                    :end-placeholder="$t('message.alarmWarning.endTime')">
            </el-date-picker>
            <el-button type="primary" plain size="medium" @click="query">{{$t('message.alarmWarning.query')}}</el-button>
            <el-button type="warning" plain size="medium" @click="refresh">{{$t('message.alarmWarning.refresh')}}</el-button>
            <!-- <el-button type="primary" size="medium">{{$t('message.alarmWarning.dc')}}</el-button> -->
        </div>
        <div class="table_wrap whiteBlock">
            <el-table class="tables" :data="List">
                <el-table-column prop="type" :label="$t('message.alarmWarning.typeLabel')" align="center" width="100">
                    <template slot-scope="scope">{{$t('message.alarmWarning.typeArr')[scope.row.type]}}</template>
                </el-table-column>
                <!-- 报警名称 -->
                <el-table-column prop="alarmTypeName" :label="$t('message.projectInfo.alarmName')"
                                 align="center"></el-table-column>
                <el-table-column width="200" prop="deviceName" align="center"
                                 :label="$t('message.alarmWarning.deviceName')"
                ></el-table-column>
                <el-table-column prop="avgData" :label="$t('message.alarmWarning.avgData')"
                                 align="center"></el-table-column>
                <el-table-column prop="alarmValue" :label="$t('message.alarmWarning.alarmValue')"
                                 align="center"></el-table-column>
                <el-table-column prop="tempAlarmTime" :label="$t('message.alarmWarning.alarmTime')" align="center">
                    <!-- <template slot-scope="scope">{{new Date(scope.row.alarmTime).toLocaleDateString().replace(/\//g,
                        '-')}}
                    </template> -->
                </el-table-column>
                <el-table-column prop="exceedVal" :label="$t('message.alarmWarning.exceed')"
                                 align="center"></el-table-column>
            </el-table>
            <el-pagination
                    class="pagerBox"
                    @size-change="SizeChange"
                    @current-change="CurrentChange"
                    :current-page="pagInfo.pageNo"
                    :page-sizes="$store.state.PAGESIZRS"
                    :page-size="pagInfo.pageSize"
                    layout="total, sizes, prev, pager, next"
                    :total="Number(pagInfo.total)"
                    background
            ></el-pagination>
        </div>
    </div>
</template>
<script>
    import {
        rainDevList,
        rainAlarmList,
    } from '../../../assets/js/api/rainfallManage'

    export default {
        mounted() {
            this.selectNowDate()
            this.getList();
            this.getDevice();
        },
        data() {
            return {
                time: [],
                alarmTypeIdArr: [{
                value: 0,
                label: '报警'
                }, {
                value: 1,
                label: '预警'
                },],
                deviceIdArr: [],
                queryInfo: {},
                pagInfo: {
                    pageNo: 1,//页数
                    pageSize: 10,//条数
                    total: 0,//总条数
                },
                List: []
            }
        },
        methods: {
               // 获取当前时间 返回YYYY-MM-DD HH:mm:ss
        selectNowDate(){
			var date = new Date(),
			year = date.getFullYear(),
			month = date.getMonth() + 1,
			day = date.getDate(),
            hours = date.getHours(), //获取当前小时数(0-23)
            minutes = date.getMinutes(),//获取当前分钟数(0-59)
            seconds = date.getSeconds()
			month >= 1 && month <= 9 ? (month = "0" + month) : "";
			day >= 0 && day <= 9 ? (day = "0" + day) : "";
            hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
            minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
            seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
			var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
            var timer = year + '-' + month + '-' + day
            this.time = [timer,timer]
			console.log(timer)
			// return timer;
		},
            refresh() {
                this.queryInfo = {};
                this.time = [];
                this.pagInfo.pageNo = 1;//页数
                this.pagInfo.pageSize = 10;//条数
                this.selectNowDate()
                this.getList();
            },
            query() {
                this.getList();
                this.queryInfo.startTime = this.time[0];
                this.queryInfo.endTime = this.time[1];
                this.pagInfo.pageNo = 1;
                console.log('query', this.queryInfo);
            },
            getDevice() {
                rainDevList({projectSn: this.$store.state.projectSn}).then(result => {
                    if (result.success) {
                        this.deviceIdArr = result.result;
                        console.log('get设备列表', this.deviceIdArr);
                    }
                })
            },
            getList() {
                let timeObj={
                    startTime: this.time?this.time[0]:'',
                    endTime: this.time?this.time[1]:''
                }
                rainAlarmList(Object.assign(this.queryInfo, this.pagInfo, {projectSn: this.$store.state.projectSn},timeObj)).then(result => {
                    if (result.success) {
                        this.List = result.result.records;
                        this.pagInfo.total = result.result.total;
                        console.log('列表', result);
                    }
                })
            },
            SizeChange(val) {
                this.pagInfo.pageSize = val;
                this.getList();
            },
            CurrentChange(val) {
                this.pagInfo.pageNo = val;
                this.getList();
            },
        }
    }
</script>
<style lang="less">
    .searchBox > div {
        margin-right: 15px;
    }
</style>