1
81041
2019-06-20 ab3c4acf83f54f8449ca8664c4a2bb79bd30f297
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!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">
    <title>机房信息</title>
    <link rel="stylesheet" href="../css/basic.css">
    <link rel="stylesheet" href="../src/css/layui.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../pages/css/mylayui.css">
    <style>
        body.homeinfo-tab .layui-tab {
            margin: 0;
        }
        body.homeinfo-tab .layui-tab-card{
            border: none;
        }
        body.homeinfo-tab .layui-tab-content {
            padding: 0;
        }
    </style>
</head>
<body class="homeinfo-tab">
    <div class="abs">
        <div class="layui-tab layui-tab-card" lay-filter="homeInfoTab" id="homeInfoTab" style="height: 100%;">
            <ul class="layui-tab-title">
                <li class="layui-this">可升级设备<span class="layui-badge layui-bg-blue" id="updateBadge">0</span></li>
                <li>不可升级设备<span class="layui-badge" id="errorUpdateBadge">0</span></li>
            </ul>
            <div class="layui-tab-content abs abs-top41 abs-overflow-y">
                <div class="layui-tab-item layui-show" id="update"></div>
                <div class="layui-tab-item" id="errorUpdate"></div>
            </div>
        </div>        
    </div>
    <script type="text/html" id="updateTpl">
        <table class="layui-table" id="updateTbl" lay-filter="update">
            <thead>
                <tr>
                    <th lay-data="{type:'checkbox', LAY_CHECKED:true}">
                    <th lay-data="{field:'fbsid', width:120, align:'center'}">设备ID</th>
                    <th lay-data="{field:'stationname', align:'center'}">机房名称</th>
                    <th lay-data="{field:'version', width:180, align:'center'}">版本号</th>
                    <th lay-data="{field:'filename', width:180, align:'center'}">升级文件名</th>
                </tr>
            </thead>
            <tbody>
                {{# layui.each(d, function(index, item){ }}
                    <tr>
                        <td></td>
                        <td>{{ item.fbsid }}</td>
                        <td>{{ item.stationname }}</td>
                        <td>{{ item.version }}</td>
                        <td>{{ item.filename }}</td>
                    </tr>
                {{# }); }}
            </tbody>
        </table>
    </script>
    <script type="text/html" id="errorUpdateTpl">
        {{# if(d.length == 0){ }}
            <div style="text-align: center; font-size:18px;margin-top: 8px">暂无数据</div>
        {{# }else{ }}
            <table class="hdw-tbl">
                <thead>
                    <tr>
                        <th style="width:120px">设备ID</th>
                        <th>机房名称</th>
                        <th>版本号</th>
                        <th>升级文件名</th>
                    </tr>
                </thead>
                <tbody>
                    {{# layui.each(d, function(index, item){ }}
                        <tr>
                            <td>{{ item.fbsid }}</td>
                            <td>{{ item.stationname }}</td>
                            <td>{{ item.version }}</td>
                            <td>{{ item.filename }}</td>
                        </tr>
                    {{# }); }}
                </tbody>
            </table>
        {{# } }}
    </script>
    <script src="../js/jquery-1.8.3.js"></script>
    <script src="../src/layui.js"></script>
    <script>
        layui.use(['element', 'laytpl', 'table'], function() {
            var element = layui.element;
            var laytpl = layui.laytpl;
            var table = layui.table;
            
            var updateTpl = $('#updateTpl').html();
            var errorUpdateTpl = $('#errorUpdateTpl').html();
            
            // 获取数据
            var updateData = parent.$('#updateIframeData').data('update');
            var errorUpdateData = parent.$('#updateIframeData').data('errorUpdate');
            updateData = updateData?updateData: [];
            errorUpdateData= errorUpdateData?errorUpdateData:[];
            
            // 更新徽标
            $('#updateBadge').text(updateData.length);
            $('#errorUpdateBadge').text(errorUpdateData.length);
            
            // console.log(updateData);
            // 渲染可升级设备的表格
            laytpl(updateTpl).render(updateData, function(html) {
                $('#update').html(html);
                table.init('update',{
                    height: "full-45" //设置高度
                    ,limit: updateData.length+1
                });
                
            });
            
            // 渲染不可升级设备的表格
            laytpl(errorUpdateTpl).render(errorUpdateData, function(html) {
                $('#errorUpdate').html(html);
            });
            
            // 点击复选框触发选中需要升级的内容
            table.on('checkbox(update)', function(obj){
                var checkStatus = table.checkStatus('updateTbl'); //update
                parent.$('#updateIframeData').data('update', checkStatus.data);
            });
        });
    </script>
</body>
</html>