<%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 filterable
                                       v-model="Group">
                                <el-option v-for="item in GroupOp"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.label">
                                </el-option>
                            </el-select>
                            <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="system" label="系统" align="center"></el-table-column>
                            <el-table-column prop="total" label="有效故障预警数" align="center"></el-table-column>
                            <el-table-column prop="bad_work" label="严重故障预警数（交易日）" align="center"></el-table-column>
                            <el-table-column prop="main_work" label="主要故障预警数（交易日）" align="center"></el-table-column>
                            <el-table-column prop="normal_work" label="次要故障预警数（交易日）" align="center"></el-table-column>
                            <el-table-column prop="bad_weekend" label="严重故障预警数（非交易日）" align="center"></el-table-column>
                            <el-table-column prop="main_weekend" label="主要故障预警数（非交易日）" align="center"></el-table-column>
                            <el-table-column prop="normal_weekend" 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 {
                GroupOp: [],
                Group: '',
                keyword: "",
                AlarmCountData: [],
                loading: false,
                currentPage: 1,
                pageSize: 10,
                time: '',
                total: 0,
                sysGroup: {}
            }
        },
        mounted() {
            this.getUserGroup();
            this.searchList()
        },


        methods: {
            searchList() {
                let finallist = []
                if(this.sysGroup && this.Group){
                    for (let temp of this.sysGroup) {
                    if (temp.group_name == this.Group) {
                        finallist = temp.group_system
                    }
                }
                }

                let newdata = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    syslist: finallist
                };
                axios.post('${SITE_URL}alarm_count_info/', newdata).then(res => {
                    this.AlarmCountData = res.data.results;
                    this.total = res.data.count
                })
            },
            getUserGroup() {
                axios.get('${SITE_URL}search_user_group/').then(res => {
                    this.GroupOp = res.data['group_list'];
                    this.sysGroup = res.data['group_system_list']
                })
            },
            handleCurrentChange(val) {
                console.log("当前页" + val);
                if (this.currentPage != val) {
                    this.currentPage = val
                    this.getTaskList(() => {
                        this.handleCurPageChange()
                    })
                }
            },
        },

    })


</script>
</%block>
