<%inherit file="/base_index.html"/>
<%block name='content'>
<style>

</style>
<div class="tab-content mb20">
    <div id="errorAlarm">
        <div class="errorAlarm" v-cloak>
            <div class="tab-pane fade active in">
                <div class="panel panel-default table7_demo king-table7-demo3" style="border:none;">
                    <div class="panel-body">
                        <div class="king-wrapper clearfix">
                            <el-form>
                                <el-form-item label="">
                                    <el-row style="border-bottom: 2px dashed darkgray;padding: 10px">
                                        <el-col align="left">
                                            <span style="font-weight:600;font-size:15.6px;">预警新建:</span>
                                            <el-button type="primary" size="medium" style="float:right"
                                                       @click="createNewTask()">通过告警新建
                                            </el-button>
                                            <el-button type="primary" size="medium"
                                                       @click="createNewAlarm()" style=" float:right;margin-right:12px">
                                                新建
                                            </el-button>
                                        </el-col>
                                    </el-row>
                                    <el-row style="padding: 10px">
                                        <el-col align="left">
                                            <span style="font-weight:600;font-size:15.6px;">预警查询:</span>
                                        </el-col>
                                    </el-row>
                                    <el-row style="padding: 10px;">
                                        <el-col :span="8">
                                            <el-form-item label="查询时间:" style="display:inline-block;width:100%;"
                                                          label-width="100px">
                                                <el-date-picker
                                                        v-model="formLine.dateoutinfo"
                                                        type="daterange"
                                                        style="width:80%;min-width:150px;"
                                                        start-placeholder="开始日期"
                                                        end-placeholder="结束日期">
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="故障预警级别:" style="display:inline-block;width:100%;"
                                                          label-width="100px">
                                                <el-select style="min-width:150px;width:80%;" clearable
                                                           v-model="formLine.priority">
                                                    <el-option v-for="item in priorityOp"
                                                               :key="item.value"
                                                               :label="item.label"
                                                               :value="item.label">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="预警系统:" label-width="100px"
                                                          style="display:inline-block;width:100%;">
                                                <el-select style="min-width:150px;width:80%;" clearable
                                                           v-model="formLine.alarm_system">
                                                    <el-option v-for="item in systemList"
                                                               :key="item.value"
                                                               :label="item.label"
                                                               :value="item.label"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row style="padding: 10px;">
                                        <el-col :span="8">

                                            <el-form-item label="预警编号:" style="display:inline-block;width:100%;"
                                                          label-width="100px">
                                                <el-input style="min-width:150px;width:80%;"
                                                          v-model="formLine.alarm_number">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-button size="medium" id="search" type="primary"
                                                       @click="emptySearch()" plain
                                                       style="float: right;">清空条件
                                            </el-button>
                                            <el-button size="medium" id="search" type="primary"
                                                       @click="searchList()"
                                                       style="float: right;margin-right:12px">查询
                                            </el-button>

                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <div style="height:100%;min-height: 500px;padding:0 15px;">
                        <el-table :data="taskData" border
                                  style="width: 100%" v-loading="loading"
                                  element-loading-text="拼命加载中"
                                  element-loading-spinner="el-icon-loading"
                                  element-loading-background="rgba(0, 0, 0, 0.8)"
                                  ref="table" @select="handleSelectionChange"
                                  @select-all="handleSelectionChange"
                                  stripe.2
                                  :header-cell-style="{background:'#409EFF',color:'white'}">

                            <el-table-column type="selection" width="50"></el-table-column>
                            <el-table-column width="300" prop="alarm_number" label="预警编号" header-align="center"
                                             align="left"></el-table-column>
                            <el-table-column prop="alarm_summary" label="故障预警摘要" header-align="center" align="left"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column width="130" prop="alarm_level" label="预警级别"
                                             align="center"></el-table-column>
                            <el-table-column width="130" prop="alarm_system" label="预警系统"
                                             align="center"></el-table-column>
                            <el-table-column width="130" prop="user" label="处理人"
                                             align="center"></el-table-column>
                            <el-table-column width="130" label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button v-if="user!=scope.row.user" @click="readRow(scope.row)" type="text"
                                               size="small">查看
                                    </el-button>
                                    <el-button v-if="user==scope.row.user" @click="readRow(scope.row)" type="text"
                                               size="small">编辑
                                    </el-button>
                                    <el-button v-if="user==scope.row.user" @click="delAlarm(scope.row)" type="text"
                                               size="small">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="block" style="height: 50px; margin-top: 15px">
                        <el-pagination
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-size="pageSize"
                                layout="total,->, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                    <el-dialog
                            title="批量新建"
                            :visible.sync="batchNewVisible"
                            width="70%">
                        <el-form>
                            <el-row>
                                <el-form-item label="系统编码" label-width="100px"
                                              style="display:inline-block">
                                    <el-row>
                                        <el-select style="width:300px;" clearable
                                                   v-model="formLine.failure_analysis.system_code"
                                                   clearable filterable placeholder="">
                                            <el-option v-for="item in systemList"
                                                       :key="item.value"
                                                       :label="item.label"
                                                       :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-row>

                                </el-form-item>

                                <el-form-item label="告警类型" label-width="100px"
                                              style="display:inline-block" placeholder="必选">
                                    <el-row>
                                        <el-select v-model="formLine.failure_analysis.alarm_type"
                                                   clearable placeholder="" style="width: 300px">
                                            <el-option v-for="item in alarmTypeOp"
                                                       :key="item.value"
                                                       :label="item.label"
                                                       :value="item.value"></el-option>
                                        </el-select>
                                    </el-row>
                                </el-form-item>


                                <el-form-item label="主机名称" label-width="100px"
                                              style="display:inline-block">
                                    <el-row>
                                        <el-input style="width:300px;"
                                                  v-model="formLine.failure_analysis.host_computer"
                                                  placeholder="请输入主机名称"></el-input>
                                    </el-row>
                                </el-form-item>


                                <el-form-item style="display:inline-block" label="开始时间"
                                              label-width="100px">
                                    <el-row>
                                        <el-date-picker style="width:300px"
                                                        v-model="formLine.failure_analysis.start_time"
                                                        type="datetime"
                                                        placeholder="选择日期时间"
                                                        value-format="yyyy-MM-dd HH:mm:ss"
                                                        format="yyyy-MM-dd HH:mm:ss">
                                        </el-date-picker>
                                    </el-row>
                                </el-form-item>
                                <el-form-item style="display:inline-block" label="结束时间"
                                              label-width="100px">
                                    <el-row>
                                        <el-date-picker style="width:300px"
                                                        v-model="formLine.failure_analysis.end_time"
                                                        type="datetime"
                                                        placeholder="选择日期时间"
                                                        value-format="yyyy-MM-dd HH:mm:ss"
                                                        format="yyyy-MM-dd HH:mm:ss">
                                        </el-date-picker>
                                    </el-row>
                                </el-form-item>
                                <el-form-item style="display:inline-block" label=""
                                              label-width="325px">
                                    <el-row>
                                        <el-button type="primary" @click="searchAlarm()">查 询</el-button>
                                    </el-row>
                                </el-form-item>
                                <el-form-item label="" label-width="30px"
                                              style="display:inline-block">
                                    <el-row>
                                        <el-input style="width:400px; " suffix-icon="el-icon-search"
                                                  v-model="formLine.failure_analysis.key_word"
                                                  placeholder="请输入关键字名称"></el-input>
                                    </el-row>
                                </el-form-item>
                            </el-row>
                        </el-form>

                        <el-row>
                            <div style="line-height: 50px ;">
                                <template>
                                    <el-table :data="gridData" style="width:100%"
                                              @select="handleSelectionChange"
                                              max-height="300">
                                        <el-table-column type="selection" width="30"></el-table-column>
                                        <el-table-column fixed prop="alarm_title" label="告警标题" width="300"
                                                         align="center"></el-table-column>
                                        <el-table-column fixed prop="alarm_info" label="告警内容" width="300"
                                                         align="center"></el-table-column>
                                        <el-table-column fixed prop="alarm_time" label="告警时间" width="300"
                                                         align="center"></el-table-column>
                                    </el-table>
                                </template>
                            </div>
                        </el-row>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="batchNewVisible = false">取 消</el-button>
                            <el-button type="primary" @click=createAlarmByIcube()>确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">


    var keyArray = {

        relateJudge: [
            {
                label: '选择',
                value: '1',
            },
            {
                label: '不选',
                value: '2',
            }

        ],
//影响程度
        eventState: [
            {
                label: '已分析',
                value: '1',

            },
            {
                label: '未分析',
                value: '2',

            },

        ],
        hardwareop: [
            {
                label: '是',
                value: '1',

            },
            {
                label: '否',
                value: '2',

            },

        ],
        //优先级
        priority: [
            {label: '严重', value: '1',},
            {label: '主要', value: '2',},
            {label: '次要', value: '3',},
        ],
        alarmType: [
            {label: '日志告警', value: '2'},
            {label: '指标告警', value: '1'},
            {label: '日志和指标告警', value: '0'},
        ],
    };
    var formatToId = function (item, itemArray) {
        for (let i of itemArray) {
            if (item == i.label) {
                return i.value;
                break;
            }
        }
    };
    var formatToText = function (item, itemArray) {
        for (let i of itemArray) {
            if (item == i.value) {
                return i.label
                break;
            }
        }
    };

    var vm = new Vue({
        el: "#errorAlarm",
        data() {
            return {
                dateoutflag: false,

                user: '',
                gridData: [],
                priorityOp: keyArray.priority,
                eventStateOp: keyArray.eventState,
                relateOp: keyArray.relateJudge,
                systemList: [],
                hardwareop: keyArray.hardwareop,
                formLine: {
                    dateoutinfo: "",
                    priority: "",//优先级
                    relate_me: '',//与我相关
                    alarm_system: "",
                    event_hap_time: "",
                    hardware: '',
                    alarm_number: '',
                    all_fields: '',
                    event_label: "",
                    failure_analysis: {
                        system_code: '',
                        host_computer: '',
                        alarm_type: '',
                        key_word: '',
                        start_time: '',
                        end_time: '',
                        alarm_info: '',
                        alarm_title: '',
                        alarm_time: '',
                        program: '',//根据相关程序生成监控
                        alarm_total_type: '',//告警总类型指标
                        detail_alarm: '',//具体告警指标
                    },
                },
                displayStatus: '',
                taskData: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                storage: '',
                deleteState: '',
                editData: [],
                loading: false,
                selectData: [],
                batchNewVisible: false,
                alarmTypeOp: keyArray.alarmType,
                alarmDisplay: [],
                systemList: [],
            }
        },
        mounted() {
            this.setmainuser();
            this.getAlarmList();
            this.getSystem()
        },


        methods: {
            getSystem() {
                axios.get('${SITE_URL}system/').then(res => {
                    res = res.data;
                    this.systemList = res
                })
            },
            handleSelectionChange(selection) {
                    //this.selectData[this.currentPage] = [];
                    selection.map((item, index) => {
                        this.selectData.push(item.alarm_title)
                    })
                },
            createAlarmByIcube(){
                let alarmList = [];
                    let vm = this;
                    //for (let i in this.selectData) {
                     //   alarmList = alarmList.concat(this.selectData[i])
                    //}
                    console.log(this.selectData);
                    if (this.selectData.length == 0) {
                        vm.$message({
                            type: 'error',
                            message: '请选择告警！'
                        });
                    } else {
                        axios.post('${SITE_URL}create_alarm_by_icube/', alarmList).then(res => {
                        if (res.code==0) {
                            this.$message({
                                type: "success",
                                message: '查询成功'
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: '查询失败' + res.message
                            });
                            this.formLine = data
                        }
                    })
                        vm.$message({
                                    type: 'success',
                                    message: '下载成功'
                                });

                    }
            },
            searchAlarm() {
                if (this.formLine.failure_analysis.alarm_type && this.formLine.failure_analysis.start_time
                    && this.formLine.failure_analysis.end_time) {
                    let vm = this;
                    let data = this.formLine;
                    vm.popshow = true;
                    axios.post('${SITE_URL}search/', data).then(res => {
                        vm.gridData = [];
                        vm.gridData = res.data;
                        if (res.result) {
                            this.$message({
                                type: "success",
                                message: '查询成功'
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: '查询失败' + res.message
                            });
                            this.formLine = data
                        }
                    })
                } else {
                    vm.$message({
                        type: 'error',
                        message: '查询失败，请完善必填项'
                    });
                }
            },
            createNewAlarm() {
                window.location.href = "${SITE_URL}alarm_edit"
            },
            createNewTask() {
                //              window.localStorage.removeItem("event_number")
                //             window.location.href = "${SITE_URL}event_edit"
                this.batchNewVisible = true
            },
            delAlarm(row) {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let id = row.alarm_number;
                    this.sureDelete(id)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
    },
    //查询
    searchList()
    {
        this.currentPage = 1;
        this.count = 0;
        this.getAlarmList()
        console.log(111)
    }
    ,

    //获取任务列表
    getAlarmList(fn)
    {
        this.loading = true;
        let vm = this;
        let newdata = {
            currentPage: vm.currentPage,
            pageSize: vm.pageSize,
            data: vm.formLine
        };
        console.log(newdata)
        console.log(222)
        axios.post('${SITE_URL}search_alarm/', newdata).then(res => {
                vm.total = res.results.count;
                vm.taskData = res.results.results;
                vm.loading = false;
                if (!!fn) {
                    fn()
                }
            }, err => {
                vm.loading = false;
                vm.$message(
                    {
                        type: 'error',
                        message: "数据显示失败!"
                    }
                )
            },
            storage = this.formLine.priority)
    }
    ,

    setmainuser()
    {
        axios.get('${SITE_URL}getuser/').then(res => {
            res = res.data;
            this.user = res
        })
    }
    ,

    //编辑模板
    readRow(row)
    {
        let data = {event_number: row.event_number};
        axios.post("${SITE_URL}event_edit_display/", data).then(res => {
            window.localStorage.setItem("event_number", JSON.stringify(res.results));
            window.location.href = "${SITE_URL}event_edit"
        })
    }
    ,


    handleSelectionChange(selection)
    {
        this.selectData[this.currentPage] = [];
        selection.map((item, index) => {
            this.selectData[this.currentPage].push(item.event_number)
        })
    }
    ,

    handleCurPageChange()
    {
        let arr = [];
        if (!!this.selectData[this.currentPage]) {
            this.selectData[this.currentPage].map(item => {
                arr = arr.concat(this.taskData.filter(item2 => {
                    return item2.event_number == item
                }))
            })
        }
        this.toggleSelection(arr)
    }
    ,

    toggleSelection(rows)
    {
        this.$nextTick(() => {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.table.toggleRowSelection(row)
                })
            } else {
                this.$refs.table.clearSelection();
            }
        })
    }
    ,

    sureDelete(id)
    {
        let vm = this;
        let data = {alarm_number: id};
        axios.post('${SITE_URL}del_alarm/', data).then(res => {
            if (res.code == 0) {
                this.$message({
                    type: 'success',
                    message: res.message
                });
                this.getAlarmList()
            } else {
                this.$message({
                    type: 'error',
                    message: res.message
                });
                this.dellabelshow = false
            }
        }, err => {
            vm.$message({
                type: 'error',
                message: '删除失败!'
            });
        })

    }
    ,

    //清除事件搜索条件
    emptySearch()
    {
        this.formLine.alarm_number = '';
        this.formLine.priority = '';
        this.formLine.alarm_system = '';
        this.formLine.dateoutinfo = '';
        this.formLine.event_state = '';
        this.formLine.hardware = '';
        this.formLine.event_number = '';
        this.formLine.all_fields = '';
        this.formLine.event_label = '';
    }
    ,

    //选择事件导出文件
    async checkedColums()
    {
        let eventList = [];
        let vm = this;
        for (let i in this.selectData) {
            eventList = eventList.concat(this.selectData[i])
        }
        if (eventList.length == 0) {
            vm.$message({
                type: 'error',
                message: '请选择需要导出的事件'
            });
        } else {
            await
            this.check(eventList);
            vm.$message({
                type: 'success',
                message: '下载成功'
            });
            this.download()

        }
    }
    ,
    check(eventList)
    {
        return new Promise((resolve, reject) => {
            axios.post("${SITE_URL}event_out/", {eventList: eventList}).then(res => {
                if (res.data == 1) {
                    resolve('ok')
                }
            });
        })
    }
    ,

    // 选择日期导出文件
    async dateout()
    {
        if (this.dateoutinfo == null || this.dateoutinfo.length == 0) {
            vm.$message({
                type: 'error',
                message: '请选择时间'
            });
        } else {
            console.log('进入按时间导出1')
            await
            this.checkk();
            console.log(this.dateoutflag)
            if (this.dateoutflag == true) {
                vm.$message({
                    type: 'success',
                    message: '下载成功'
                });
                this.download()
            } else {
                vm.$message({
                    type: 'error',
                    message: '该时间段内没有事件发生'
                });
            }

        }
    }
    ,
    checkk()
    {
        return new Promise((resolve, reject) => {
            axios.post("${SITE_URL}event_out/", this.dateoutinfo).then(res => {
                if (res.data == 1) {
                    resolve('ok')
                    console.log('时间段内有事件2');
                    this.dateoutflag = true
                } else {
                    resolve('ok')
                    console.log('时间段内无事件2');
                    this.dateoutflag = false
                }
            })
        })
    }
    ,

    download()
    {
        window.location.href = "${SITE_URL}download";
    }
    ,

    handleCurrentChange(val)
    {
        console.log("当前页" + val);
        if (this.currentPage != val) {
            this.currentPage = val;
            this.getTaskList(() => {
                this.handleCurPageChange()
            })
        }
    }
    ,


    },

    })


</script>
</%block>
