<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-treeview.css">
    <link rel="stylesheet" href="../css/index.css">
    <title>首页</title>
</head>
<body>
<div id="page-sy">
    <!--<div class="left-nav">-->
        <!--<div id="tree-ul"></div>-->
    <!--</div>-->
    <div class="right-nav">
        <!--<ul class="nav nav-tabs nav1" role="tablist" style="float: left;width: 100%;">-->
            <!--<li role="presentation" :class="(index==cur)?'active':''" v-for="(item,index) in data_ul"-->
                <!--@click="resize(item)">-->
                <!--<a :href=gethref(item.id) :aria-controls=item.id role="tab" data-toggle="tab" v-text="item.text"></a>-->
            <!--</li>-->
        <!--</ul>-->
        <div class="tab-content content-sjfx">
            <div role="tabpanel" class="tab-pane active" id="sy">
                <!--<div style="height: 35px;width: 100%;padding: 10px">-->
                    <!--<button class="btn btn-sm btn-info" @click="qhdw()">-->
                        <!--<span>切换监控点位</span>-->
                    <!--</button>-->
                    <!--<span style="margin-left: 10px;color: #368ff3;font-weight: 900;" v-text="dw_name"></span>-->
                <!--</div>-->
                <div class="div-pub">
                    <div class="jrll-pub">
                        <div class="title-pub">今日流量</div>
                        <div class="ech-pub" id="jrll"></div>
                    </div>
                    <div class="sjtj-pub">
                        <div class="title-pub">事件统计</div>
                        <div class="ech-pub" id="sjtj"></div>
                    </div>
                </div>
                <div class="div-pub">
                    <!--<div class="ydzs">-->
                    <!--<div class="title-pub">拥堵指数</div>-->
                    <!--<div class="ech-pub" id="ydzs"></div>-->
                    <!--</div>-->
                    <div class="ycsjfb">
                        <div class="title-pub">异常时段分布(今日事件)</div>
                        <div class="ech-pub" id="ycsdfb"></div>
                    </div>
                    <div class="cllxzb">
                        <div class="title-pub">车辆类型占比(今日车流量)</div>
                        <div class="ech-pub" id="cllxzb"></div>
                    </div>
                </div>
                <div class="div-pub">
                    <div class="jrll-pub"  style="width: calc(65% - 5px);">
                        <div class="title-pub">推送状态</div>
                        <div class="ech-pub" style="margin-left: 15px;margin-right: 15px;width: calc(100% - 30px);">
                            <ul class="nav nav-tabs nav2" role="tablist" style="float: left;width: 100%;">
                                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                                                          data-toggle="tab" v-text="'今日推送（'+count+'）'"></a></li>
                                <li role="presentation"><a href="#dts" aria-controls="dts" role="tab" data-toggle="tab">待推送</a>
                                </li>
                            </ul>
                            <div class="tab-content content-tszt">
                                <div role="tabpanel" class="tab-pane active" id="home">
                                    <div class="tszt-pub-div">
                                        <table class="table table-condensed" style="text-align: center;">
                                            <thead>
                                            <tr style="background-color: rgb(228, 228, 228);">
                                                <td style="width: 40px;">序号</td>
                                                <td>通道名称</td>
                                                <td style="width: 200px;">事件类型</td>
                                                <td style="width: 180px;">告警时间</td>
                                                <td style="width: 220px;">辖区名称</td>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(item,index) in data_sjlx">
                                                <td v-text="index+1" style="width: 40px;"></td>
                                                <td v-text="item.tdmc"></td>
                                                <td v-text="item.recordname" style="width: 200px;"></td>
                                                <td v-text="item.recordtime" style="width: 180px;"></td>
                                                <td v-text="item.xzmc" style="width: 220px;"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="dts">
                                    <div class="tszt-pub-div">
                                        <table class="table table-condensed" style="text-align: center;">
                                            <thead>
                                            <tr style="background-color: rgb(228, 228, 228);">
                                                <td style="width: 40px;">序号</td>
                                                <td>通道名称</td>
                                                <td style="width: 200px;">事件类型</td>
                                                <td style="width: 180px;">告警时间</td>
                                                <td style="width: 220px;">辖区名称</td>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(item,index) in data_sjlx1">
                                                <td v-text="index+1" style="width: 40px;"></td>
                                                <td v-text="item.tdmc"></td>
                                                <td v-text="item.recordname" style="width: 200px;"></td>
                                                <td v-text="item.recordtime" style="width: 180px;"></td>
                                                <td v-text="item.xzmc" style="width: 220px;"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sjtj-pub" style="width: calc(35% - 5px);">
                        <div class="title-pub">点位高发排行榜（top10）</div>
                        <div class="ech-pub">
                            <!--<div style="width: calc(100% - 30px);margin-left: 15px;height: 40px;">-->
                                <!--<input id="inpt_name" type="text" class="form-control input-pub" placeholder="请输入点位">-->
                                <!--<button type="button" class="btn btn-sm pub-btn">查询</button>-->
                            <!--</div>-->
                            <div class="dwgf-div">
                                <table class="table table-condensed" style="text-align: center;">
                                    <thead>
                                    <tr style="background-color: rgb(228, 228, 228);">
                                        <td style="width: 40px;">序号</td>
                                        <td>点位</td>
                                        <td style="width: 60px;">数量</td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in data_gfdw">
                                        <td v-text="index+1" style="width: 40px;"></td>
                                        <td v-text="item.videoname"></td>
                                        <td style="width: 60px;">
                                            <span v-text="item.data"></span>
                                            <img v-if="(item.data-item.lastdata)>0?true:false" src="../img/index/up.png" style="margin-bottom: 4px">
                                            <img v-if="(item.data-item.lastdata)<0?true:false" src="../img/index/down.png" style="margin-bottom: 2px">
                                            <span v-if="(item.data-item.lastdata)==0?true:false" class="glyphicon glyphicon-minus" style="margin-bottom: 4px"></span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 400px;">
        <div class="modal-content" style="color: #e6eaef;width: 400px;">
            <div class="modal-header" style="background-color: rgb(48, 53, 72);">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true" style="color: white;">&times;</span></button>
                <h6 class="modal-title">切换监控</h6>
            </div>
            <div class="modal-body" style="height:400px;">
                <div style="width: 100%;float:left;">
                    <input type="text" class="form-control input-pub" placeholder="请输入点位 回车搜索" v-model="searchText"
                           @keyup.enter="fastSearch" style="width: 100%;margin-top: 0px;">
                </div>
                <div class="div-xzml-div">
                    <img src="../img/sjcx/xzml.png">
                    <span>行政目录</span>
                </div>
                <div id="tree-xzxq"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm" data-dismiss="modal" style="color: #2f2f2f;">关闭</button>
                <button type="button" class="btn btn-sm btn-info" style="background-color: #368ff3" @click="define()">确定</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/bootstrap-treeview.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/util/http_util.js"></script>
<script src="../js/index/index.js"></script>
</html>