<%inherit file="/base_index.html"/>
<%block name='content'>
<style>
</style>
<div class="tab-content mb20">
    <div id="alarmCount">
        <div class="alarmCount" 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-select style="width:300px;margin-right: 100px" clearable
                                       v-model="userGroup">
                                <el-option v-for="item in userGroupOp"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.label">
                                </el-option>
                            </el-select>
                            查询时间:
                            <el-date-picker
                                    v-model="time"
                                    type="daterange"
                                    style="width:250px;"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                            <el-button size="medium" id="search" type="primary"
                                       @click="searchList()"
                                       style="float: right;margin-right:12px">查询
                            </el-button>

                        </div>
                    </div>
                    <div style="height:100%;min-height: 500px;padding:0 15px;">
                        <el-table :data="AlarmCountData" 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"
                                  stripe.2
                                  :header-cell-style="{background:'#409EFF',color:'white'}">
                            <el-table-column width="200" prop="event_number" label="系统"
                                             align="center"></el-table-column>
                            <el-table-column prop="summary" label="有效故障预警数" align="center"></el-table-column>
                            <el-table-column prop="priority" label="严重故障预警数（交易日）"
                                             align="center"></el-table-column>
                            <el-table-column prop="analy_state" label="主要故障预警数（交易日）"
                                             align="center"></el-table-column>
                            <el-table-column prop="analy_state" label="次要故障预警数（交易日）"
                                             align="center"></el-table-column>
                            <el-table-column prop="analy_state" label="严重故障预警数（非交易日）"
                                             align="center"></el-table-column>
                            <el-table-column prop="analy_state" label="主要故障预警数（非交易日）"
                                             align="center"></el-table-column>
                            <el-table-column prop="analy_state" label="次要故障预警数（非交易日）"
                                             align="center"></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>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#alarmCount",
        data() {
            return {
                userGroupOp: [],
                userGroup: '',
                keyword: "",
                AlarmCountData: [],
                loading: false,
                currentPage: 1,
                pageSize: 10,
                time: ''
            }
        },
        mounted() {
            this.getUserGroup()
        },


        methods: {
            searchList(){

            },
            getUserGroup() {
                axios.get('${SITE_URL}search_user_group/').then(res => {
                    res = res.data['group_list'];
                    this.userGroupOp = res
                })
            },
            handleCurrentChange(val) {
                console.log("当前页" + val);
                if (this.currentPage != val) {
                    this.currentPage = val
                    this.getTaskList(() => {
                        this.handleCurPageChange()
                    })
                }
            },
        },

    })


</script>
</%block>
