frontend/src/views/alarmHandling/index.vue

<template>
    <div class="alarmHandBox">
        <div class="alarmTop">
            <div class="alarmButtonGroup">
                <el-button type="primary">查询</el-button>
                <el-button type="primary">今日告警</el-button>
                <el-button type="primary">最近三日告警</el-button>
                <el-button type="primary">最近一周告警</el-button>
                <el-button type="primary">批量处理</el-button>
                <el-button type="primary">查看详情</el-button>
                <el-button type="primary">导出</el-button>
                <el-button type="primary">导出处理结果</el-button>
                <el-button type="primary">导出图片</el-button>
                <el-button type="primary">手动刷新</el-button>
            </div>
        </div>
        <div class="alarmContain">
            <div class="alarmTable">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    border
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                    height="calc(100% - 40px)"
                    @row-click="handleRowClick"
                >
                    <el-table-column min-width="35">
                        <template slot-scope="scope">
                            <span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column type="selection" min-width="25"> </el-table-column>
                    <el-table-column
                        prop="alarmTime"
                        label="告警时间"
                        min-width="135"
                        :show-overflow-tooltip="true"
                        :formatter="dateFormat"
                    >
                    </el-table-column>
                    <el-table-column prop="alarmLevel" label="告警级别" min-width="75"> </el-table-column>
                    <el-table-column prop="lineName" label="XL" min-width="105" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="meid" label="GT" min-width="115" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="orientationName" label="监拍朝向" min-width="95" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="companyName" label="单位" min-width="75" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="alarmInfo" label="告警原因" min-width="155" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="source" label="分析来源" min-width="105" :show-overflow-tooltip="true">
                        <template>后端分析</template></el-table-column
                    >
                    <el-table-column prop="clearDistace" label="净空距离" min-width="105" :show-overflow-tooltip="true"
                        ><template>未分析</template>
                    </el-table-column>
                    <el-table-column prop="distanceLevel" label="距离分级" min-width="85" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="isRead" label="是否已读" min-width="95" fixed="right">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isRead == 0">未读</span>
                            <span v-if="scope.row.isRead == 1">已读</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pageNation">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-size="pageSize"
                        layout=" prev, pager, next, jumper,total"
                        :total="total"
                    >
                    </el-pagination>
                </div>
            </div>
            <div class="alarmPic">
                <div class="imgshow"><img :src="photoPic" /></div>
                <div class="editorBtn">
                    <el-button type="primary">处理</el-button>
                    <el-button type="primary">查看操作详情</el-button>
                    <el-button type="primary">设置非警告区域</el-button>
                    <el-button type="primary">主动拍照</el-button>
                    <el-button type="primary">转向GT</el-button>
                    <el-button type="primary">复制</el-button>
                    <el-button type="primary">历史图</el-button>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import { list } from '@/utils/api/index';
import moment from 'moment';
export default {
    data() {
        return {
            photoPic: '',

            tableData: [],
            multipleSelection: [],
            page: 1, // 当前页数
            pageSize: 20, // 每页数量
            total: 0 //总条数
        };
    },
    methods: {
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val;
            this.getTableList();
        },
        getTableList() {
            list({
                companyIdSelect: '',
                timeStart: '2023-03-24 00:00:00',
                timeEnd: '2023-03-24 23:59:59',
                status: 0,
                lineId: '',
                voltageCode: '',
                logicTowerId: '',
                alarmInfo: '',
                page: this.page,
                rows: this.pageSize,
                sort: 'alarmTime',
                order: 'desc'
            }).then((res) => {
                console.log(res.data);
                this.tableData = res.data.rows;
                this.total = res.data.total;
                this.photoPic = 'http://180.166.218.222:8104/media' + res.data.rows[0].photoPath;
            });
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleRowClick(row) {
            //this.$refs.multipleTable.toggleRowSelection(row);
            console.log(row);
            this.photoPic = 'http://180.166.218.222:8104/media' + row.photoPath;
        },
        dateFormat(row, column) {
            var date = row[column.property];
            if (date == undefined) {
                return '';
            }
            return moment(date).format('YYYY-MM-DD HH:mm:ss');
        }
    },
    created() {
        this.getTableList();
    }
};
</script>
<style lang="less">
.alarmHandBox {
    width: 100%;
    height: 100%;
    background: @color-white;
    .alarmTop {
        padding: 16px 8px;
    }
    .alarmContain {
        display: flex;
        height: calc(100% - 72px);
        padding: 0px 8px;
        .alarmTable {
            width: 50%;
            height: 100%;
        }
        .pageNation {
            margin-top: 8px;
        }
        .alarmPic {
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .imgshow {
                width: 100%;
                height: 90%;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .editorBtn {
                margin-top: 8px;
                border: 1px solid @border-color-base;
                padding: 2%;
                border-radius: 4px;
            }
            .editorBtn {
                display: flex;
                justify-content: flex-start;
            }
        }
    }
}
</style>