From 17ebbc0486aa76ef86eb68da6bd88fe42d6de27b Mon Sep 17 00:00:00 2001
From: 王 垚 <1402714037@qq.com>
Date: 星期二, 06 九月 2022 15:38:43 +0800
Subject: [PATCH] 设备看板

---
 img/erro.png           |    0 
 css/ReportPlatform.css |  243 +++++++++++++++
 HDEquipment.html       |  666 +++++++++++++++++++++++++++++++++++++++++
 img/device.png         |    0 
 4 files changed, 909 insertions(+), 0 deletions(-)

diff --git a/HDEquipment.html b/HDEquipment.html
new file mode 100644
index 0000000..9c67b4d
--- /dev/null
+++ b/HDEquipment.html
@@ -0,0 +1,666 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+
+<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" type="text/css" href="css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
+    <link rel="stylesheet" type="text/css" href="css/index.css">
+    <link rel="stylesheet" type="text/css" href="css/ReportPlatform.css">
+    <script src="js/jquery.min.js"></script>
+    <script src='js/echarts.min.js'></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src='js/bootstrap-table.min.js'></script>
+    <script src='js/bootstrap-table-zh-CN.min.js'></script>
+    <script src="js/jquery.SuperSlide.2.1.3.js"></script>
+    <script src='js/template.js'></script>
+    <script src="js/jquery.qrcode.min.js"></script>
+    <style>
+        .clock {
+            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+            font-size: 20px;
+            width: 450px;
+            float: right;
+            color: #fff;
+            margin-top: -75px;
+            margin-right: 5px;
+            color: #09d1ea;
+
+        }
+
+        .clock #Date {
+            text-align: center;
+            text-shadow: 0 0 0px #00c6ff;
+
+
+        }
+
+        .clock ul {
+            width: 450px;
+            margin: 0 auto;
+            padding: 0px;
+            list-style: none;
+            text-align: right;
+            margin-left: 15px;
+            position: relative;
+        }
+
+        .clock ul li {
+            display: inline;
+            font-size: 24px;
+            text-align: left;
+            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+            text-shadow: 0 0 0px #00c6ff;
+        }
+
+        body {
+            padding-left: 50px;
+            padding-right: 50px;
+        }
+
+        .title {
+
+            font-size: 44px;
+            font-family: PingFangSC;
+            font-weight: 500;
+            color: rgba(9, 209, 234, 1);
+            text-align: center;
+            background: url(img/img_little_new.png) center no-repeat;
+            margin-bottom: 30px;
+        }
+
+        .col-sm-12 {
+            position: relative;
+            min-height: 1px;
+            padding-right: 0px;
+            padding-left: 0px;
+        }
+
+        .top {
+            /* border: 1px solid #00c6ff; */
+            height: 900px;
+        }
+
+        .left {
+            /* border: 1px solid #00c6ff; */
+            height: 300px;
+        }
+
+        .top1 {
+            /* border: 1px solid #00c6ff; */
+            height: 150px;
+        }
+
+        .ctn {
+            /* border: 1px solid #00c6ff; */
+            height: 450px;
+        }
+
+        .bottom {
+            /* border: 1px solid #00c6ff; */
+            height: 600px;
+        }
+
+        .bottom1 {
+            /* border: 1px solid #00c6ff; */
+            height: 750px;
+        }
+
+        .bottom_left {
+            /* border: 1px solid #00c6ff; */
+            height: 300px;
+        }
+
+        .col-sm-8,
+        .col-sm-6,
+        .col-sm-4,
+        .col-sm-3,
+        .col-sm-2 {
+            /* border: 1px solid #00c6ff; */
+            position: relative;
+            min-height: 1px;
+            padding-right: 0px;
+            padding-left: 0px;
+        }
+
+        #cTitle {
+            width: 50px;
+            height: 450px;
+            font-size: 25px;
+            line-height: 30px;
+            color: #00c6ff;
+            border: 1px solid #333
+        }
+
+        .col-sm-12,
+        .col-sm-2,
+        .col-sm-3,
+        .col-sm-4,
+        .col-sm-6,
+        .col-sm-8 {
+            position: relative;
+            min-height: 1px;
+            padding-right: 0px;
+            padding-left: 0px;
+        }
+
+        #mychart1,
+        #mychart2 {
+            width: 100%;
+            border: none;
+            height: 450px;
+        }
+
+        #cList0 {
+            height: 450px;
+            width: 3%;
+            /* border: 1px solid #00c6ff; */
+            float: left;
+        }
+
+        #cList1 {
+            float: left;
+        }
+
+        #cList1 li {
+            float: left;
+            height: 450px;
+            color: #00c6ff;
+            font-size: 20px;
+            /*鏂囧瓧灞呬腑*/
+            text-align: center;
+            /*display: flex;*/
+        }
+
+        #cList1 li span {
+            /*鏂囧瓧灞呬腑*/
+            display: inline-block;
+            height: 100%;
+            /*鏂囧瓧灞呬腑*/
+
+            /*鏂囧瓧绔栨帓*/
+            writing-mode: vertical-lr;
+            /*浠庡乏鍚戝彸 浠庡彸鍚戝乏鏄� writing-mode: vertical-rl;*/
+            writing-mode: tb-lr;
+            /*IE娴忚鍣ㄧ殑浠庡乏鍚戝彸 浠庡彸鍚戝乏鏄� writing-mode: tb-rl锛�*/
+        }
+
+        #cList2 {
+            height: 450px;
+            width: 97%;
+            /* border: 1px solid #00c6ff; */
+            float: left;
+        }
+
+        table tr td {
+            text-align: center;
+            vertical-align: middle !important;
+            /*border: 1px solid #464646;*/
+            border-right: 0px;
+            height: 40px;
+            font-size: 25px;
+            font-family: '榛戜綋';
+            font-family: Arial;
+            border: none;
+        }
+
+        .table>caption+thead>tr:first-child>td,
+        .table>caption+thead>tr:first-child>th,
+        .table>colgroup+thead>tr:first-child>td,
+        .table>colgroup+thead>tr:first-child>th,
+        .table>thead:first-child>tr:first-child>td,
+        .table>thead:first-child>tr:first-child>th {
+            background-color: #000;
+            color: #3bff72;
+
+        }
+
+        .fixed-table-container tbody td .th-inner,
+        .fixed-table-container thead th .th-inner {
+            font-size: 28px;
+            color: #09d1ea;
+            padding: 20px 0 15px 0;
+        }
+
+        #tb_order tr td {
+            text-align: center;
+            height: 32px;
+            line-height: 32px;
+            font-size: 25px;
+            /* font-family: '榛戜綋'; */
+            color: #a6a8ae;
+            font-family: Arial;
+            /* border: 1px solid #464646; */
+            border: none;
+        }
+
+        .bootstrap-table .table {
+            border-radius: none
+        }
+
+        th {
+            background-color: transparent !important;
+        }
+
+        td {
+            background-color: transparent;
+        }
+
+        tr {
+            background-color: transparent
+        }
+
+        #tb_order,
+        #tb_order1 tr:nth-child(even) {
+            background: #080c1c;
+        }
+
+        .fixed-table-container tbody td .th-inner,
+        .fixed-table-container thead th .th-inner {
+            text-align: left;
+        }
+
+        .progress {
+            background-color: darkblue;
+        }
+
+        #tb_order,
+        #tb_order1 tr:nth-child(even) {
+            background: #000000;
+        }
+
+        #tb_order1 tr th {
+            /*border: 1px solid #464646;*/
+            border: none;
+            font-size: 22px;
+        }
+
+        #tb_order1 tr td {
+            text-align: center;
+            height: 32px;
+            line-height: 32px;
+            font-size: 18px;
+            font-family: '榛戜綋';
+            font-family: Arial;
+            /*border:1px solid #464646;*/
+            border: none;
+        }
+
+        #tb_order1 tr:hover {
+            background: #000000;
+        }
+
+        .pull-right,
+        .fixed-table-pagination .pagination-detail,
+        .fixed-table-pagination div.pagination {
+            display: none;
+        }
+    </style>
+    <script type="text/javascript">
+        var CallHouseCode = '01';//鍙枡鐪嬫澘浠撳簱缂栫爜
+
+
+        var interval;//璁℃椂鍣�
+        var interval1;//璁℃椂鍣�
+        var interval2;//璁℃椂鍣�
+        var num = 0;
+        var num1 = 0;
+        var TLProgress = 0;  //閫�鏂欑巼
+        var CallData = [];  //杩戞棩閰嶉�佹椂闂存暟缁�
+        var CallPSQty = [];  //杩戞棩閰嶉�佹�绘暟鏁扮粍
+        var CAllQty = [];  //浠婃棩鍙枡鎬绘暟鏁扮粍
+        $(document).ready(function () {
+            // 鍒涘缓涓や釜鍙橀噺锛屼竴涓暟缁勪腑鐨勬湀鍜屾棩鐨勫悕绉�
+            var monthNames = ["1 鏈�", "2 鏈�", "3 鏈�", "4 鏈�", "5 鏈�", "6 鏈�", "7 鏈�", "8 鏈�", "9 鏈�", "10 鏈�", "11 鏈�", "12 鏈�"];
+            setInterval(function () {
+                var date1 = new Date;
+                var year = date1.getFullYear();
+                var month = date1.getMonth();
+                var day = date1.getDate();
+                var hh = date1.getHours();
+                var mm = date1.getMinutes();
+                var ss = date1.getSeconds();
+                var dayNames = new Array("鏄熸湡鏃�", "鏄熸湡涓�", "鏄熸湡浜�", "鏄熸湡涓�", "鏄熸湡鍥�", "鏄熸湡浜�", "鏄熸湡鍏�");
+                var Stamp = new Date();
+                $('#Date').html(year + "&nbsp;骞�" + " " + monthNames[month] + ' ' + day + "&nbsp;鏃�&nbsp;&nbsp;" + ' ' + dayNames[Stamp.getDay()]);
+                $("#hours").html((hh < 10 ? ("0" + hh) : hh));
+                $("#min").html((mm < 10 ? ("0" + mm) : mm));
+                $("#sec").html((ss < 10 ? ("0" + ss) : ss));
+            }, 1000);
+        });
+        $(function () {
+            var mychart1 = echarts.init(document.getElementById('mychart1'));
+            var mychart2 = echarts.init(document.getElementById('mychart2'));
+            TopData();
+            BottomData();
+            Chart(mychart1, mychart2);
+
+            // 瀹氭椂鍣�
+            interval = setInterval(function () {
+                $("#tb_order").bootstrapTable('refresh');
+            }, 10000);
+            // interval1 = setInterval(function () {
+            //     $("#tb_order1").bootstrapTable('refresh');
+            // }, 10000);
+            // interval2 = setInterval(function () {
+            //     TLProgress = 0;
+            //     CallData = [];
+            //     CallPSQty = [];
+            //     CAllQty = [];
+            //     Chart(mychart1, mychart2);
+            // }, 20000);
+            //鏍规嵁绐楀彛鐨勫ぇ灏忓彉鍔ㄥ浘琛� --- 閲嶇偣
+            // window.onresize = function () {
+            //     myChart1.resize();
+            //     myChart2.resize();
+            // }
+        })
+
+
+        function Chart(mychart1, mychart2) {
+            // $.ajax({
+            //     url: "http://localhost:12298/api/loaddata/CallData",
+            //     dataType: "JSON",
+            //     async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
+            //     type: "Get",
+            //     data: { "CallHouseCode": CallHouseCode },
+            //     success: function (data) {
+            //         TLProgress = parseFloat((data.data[1][1].qty / data.data[1][0].qty) * 100).toFixed(2);
+            //         if (isNaN(TLProgress)) {
+            //             TLProgress = 0;
+            //         }
+            //         //浠婃棩閰嶉�佺巼
+            //         $.each(data.data[0], function (index, val) {
+            //             CallData.push(val.hour);
+            //             CallPSQty.push(parseFloat(val.HSendQTY).toFixed(2));
+            //             CAllQty.push(parseFloat(val.HQty).toFixed(2));
+            //         });
+            //     },
+            //     error: function (data) {
+
+            //     }
+            // })
+
+            const colorList = ['#91CC75 ', '#5470C6', '#73C0DE', '#EE6666', '#FAC858']
+            option1 = {
+                title: [
+                    {
+                        show: true,
+                        text: '璁惧绋煎姩鐜�',
+                        textStyle: {
+                            color: '#00c6ff',
+                            fontSize: '16',
+                        },
+                        left: 'center',
+                    }
+                ],
+                tooltip: {
+                    trigger: 'item',
+                },
+                // legend: {
+                //     orient: 'vertical',
+                //     left: 'left'
+                // },
+                color: colorList,
+                series: [
+                    {
+                        name: '鍗犳瘮',
+                        type: 'pie',
+                        radius: '60 %',//鎵撳皬
+
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#000000'
+                        },
+                        data: [
+                            { value: 12, name: '杩愯' },
+                            { value: 4, name: '鍋滄満' },
+                            { value: 2, name: '鏈紑鏈�' },
+                            { value: 1, name: '缁翠慨涓�' },
+                            { value: 1, name: '淇濆吇涓�' }
+                        ],
+                    }
+                ]
+            };
+
+            CallData = ['08-28', '08-29', '08-30', '08-31', '09-01'];
+            option2 = {
+                title: {
+                    text: '鎬讳骇鍊�',
+                    left: '0',
+                    top: 2,
+                    textStyle: {
+                        fontSize: 20,
+                        color: '#00c6ff',
+                        fontFamily: "寰蒋闆呴粦"
+                    },
+                },
+                color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
+                tooltip: {
+
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '10%',
+                    containLabel: true
+                },
+                legend: {
+                    left: 'right',
+                    data: ['鍙枡鏁�', '閰嶉�佹暟'],
+                    textStyle: {
+                        color: '#00c6ff',
+                        fontSize: 16,
+                        fontFamily: "寰蒋闆呴粦"
+                    }
+
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: CallData,
+                        axisTick: {
+                            alignWithLabel: true
+                        },
+
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#00c6ff',
+                                type: 'solid', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾�   solid:瀹炵嚎
+                                width: 1, //闅愯棌y杞�
+                            }
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                                fontSize: '16'
+                            }
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        axisLine: {
+                            show: false,
+
+                        },
+                        splitLine: { //缃戞牸绾�
+                            lineStyle: {
+                                color: '#00c6ff',
+
+                            },
+                            show: true //闅愯棌鎴栨樉绀�
+                        },
+                        axisLabel: {
+                            textStyle: {
+                                color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
+                                fontSize: '16'
+                            }
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        data: [120, 200, 150, 80, 70],
+                        type: 'bar',
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: 'rgba(180, 180, 180, 0.2)'
+                        },
+                        label: {
+                            show: true,
+                            position: 'inside' //top
+                        }
+                    }
+
+                ]
+            };
+
+            mychart1.setOption(option1);
+            mychart2.setOption(option2);
+
+        }
+        function TopData() {
+            $('#tb_order').bootstrapTable({
+                url: 'http://localhost:12298/api/loaddata/EquipMentData',
+                //data: dataJson,
+                method: 'get',                      //璇锋眰鏂瑰紡锛�*锛�
+                dataType: "json",
+                queryParams: queryParams,
+                striped: false,                      //鏄惁鏄剧ず琛岄棿闅旇壊
+                cache: false,                       //鏄惁浣跨敤缂撳瓨锛岄粯璁や负true锛屾墍浠ヤ竴鑸儏鍐典笅闇�瑕佽缃竴涓嬭繖涓睘鎬э紙*锛�
+                pagination: true,                   //鏄惁鏄剧ず鍒嗛〉锛�*锛�
+                sortable: false,                     //鏄惁鍚敤鎺掑簭
+                sortable: false,                      //鏄惁鍚敤鎺掑簭
+                search: false,                       //鏄惁鍚敤鎼滅储妗�
+                sidePagination: "server",           //鍒嗛〉鏂瑰紡锛歝lient瀹㈡埛绔垎椤碉紝server鏈嶅姟绔垎椤碉紙*锛�
+                pageNumber: 1,                       //鍒濆鍖栧姞杞界涓�椤碉紝榛樿绗竴椤�
+                strictSearch: false,                //璁剧疆涓� true鍚敤 鍏ㄥ尮閰嶆悳绱紝鍚﹀垯涓烘ā绯婃悳绱�
+                clickToSelect: true,                //鏄惁鍚敤鐐瑰嚮閫変腑琛�
+                singleSelect: true,                  //璁剧疆True 灏嗙姝㈠閫�
+                uniqueId: "ID",                     //姣忎竴琛岀殑鍞竴鏍囪瘑锛屼竴鑸负涓婚敭鍒�
+                cardView: false,                    //鏄惁鏄剧ず璇︾粏瑙嗗浘
+                detailView: false,                   //鏄惁鏄剧ず鐖跺瓙琛�
+
+                columns: [
+                    { field: 'HICMOBillNO', title: '璁惧鏁伴噺', align: "left" },
+                    { field: 'HNUMBER', title: '寮�鏈虹巼', align: "left" },
+                    { field: 'HNAME', title: '杩愯', align: "left" },
+                    { field: 'HMODEL', title: '鍋滄満', align: "left" },
+                    { field: 'HQTY', title: '鏈紑鏈�', align: "left" },
+                    { field: 'HLEFT', title: '缁翠慨涓�', align: "left" },
+                    { field: 'HSTATUS', title: '淇濆吇涓�', align: "left" }
+                ],
+                onClickRow: function (row, $element) {
+
+                },
+                onCheck: function (row, $element) {
+
+                },
+                onLoadSuccess: function (row) {
+                    var num_total = (row.total) / 8
+                    if (num >= num_total) {
+                        num = 0
+                    }
+                }
+
+            })
+        }
+        function BottomData() {
+            for (var i = 0; i < 20; i++) {
+                var html1 = '';
+                html1 += '<div class="col-sm-12 col-md-2" >';
+                if (i == 2 || i == 4 || i == 6)
+                    html1 += '<div class="cns" id="bs' + (i + 1) + '" style="background:#91CC75"  onclick="CheckBtom(this,' + (i + 1) + ')">';
+                else if (i % 2 == 0)
+                    html1 += '<div class="cns" id="bs' + (i + 1) + '" style=""  onclick="CheckBtom(this,' + (i + 1) + ')">';
+                else
+                    html1 += '<div class="cns" id="bs' + (i + 1) + '" style="background:#EE6666; color:#FFF"  onclick="CheckBtom(this,' + (i + 1) + ')">';
+
+                html1 += '<dl>';
+                //html1 += '<img src="img/device.png">'
+                html1 += '<dd class="tcenter">';
+                html1 += '<h1><span>璁惧鍚嶇О锛�</span><span id="ptn' + (i + 1) + '">' + '娴嬭瘯璁惧鏈�' + i + '</span></h1>';
+                html1 += '<h1><span>宸ュ崟锛歁O20220901001' + i + '</span></h1>';
+                html1 += '<h1><span>浜у搧鍚嶇О锛氬簳澹崇粍浠�</span><span id="pts' + (i + 1) + '">' + '' + '</span></h1>';
+                html1 += '<h1><span>浜у搧瑙勬牸鍨嬪彿锛�645mm*320mm</span><span id="pts' + (i + 1) + '">' + '' + '</span></h1>';
+                html1 += '<h1><span>璁″垝鏁伴噺锛�</span><span>100' + i + '</span><span style="margin-left:20px;">姹囨姤鎬绘暟锛�</span><span>' + i + '</span></h1>';
+                html1 += '<h1><span>褰撳墠鐘舵�侊細</span><span class="gj_icon color_border1"></span>';
+                html1 += '</div > ';
+                html1 += '</div>';
+                html1 += '</dd>';
+                html1 += '</dl>';
+                html1 += '</div>';
+                html1 += '</div>';
+                $("#btomleft").append(html1);
+            }
+
+        }
+        //寰楀埌鏌ヨ鐨勫弬鏁�
+        function queryParams(params) {
+            num += 1;
+            var temp = {   //杩欓噷鐨勯敭鐨勫悕瀛楀拰鎺у埗鍣ㄧ殑鍙橀噺鍚嶅繀椤讳竴鐩达紝杩欒竟鏀瑰姩锛屾帶鍒跺櫒涔熼渶瑕佹敼鎴愪竴鏍风殑
+                CallHouseCode: CallHouseCode,
+                limit: params.limit,   //椤甸潰澶у皬
+                offset: num,  //椤电爜
+            };
+            return temp;
+        }
+        //寰楀埌鏌ヨ鐨勫弬鏁�
+        function queryParams1(params) {
+            num1 += 1;
+            var temp = {   //杩欓噷鐨勯敭鐨勫悕瀛楀拰鎺у埗鍣ㄧ殑鍙橀噺鍚嶅繀椤讳竴鐩达紝杩欒竟鏀瑰姩锛屾帶鍒跺櫒涔熼渶瑕佹敼鎴愪竴鏍风殑
+                CallHouseCode: CallHouseCode,
+                limit: params.limit,   //椤甸潰澶у皬
+                offset: num1,  //椤电爜
+            };
+            return temp;
+        }
+    </script>
+</head>
+
+<body>
+    <div class='title'>璁惧鐪嬫澘</div>
+    <div class="clock">
+        <ul>
+            <li id="Date"></li>
+            <li id="hours"> </li>
+            <li id="point">:</li>
+            <li id="min"> </li>
+            <li id="point">:</li>
+            <li id="sec"> </li>
+        </ul>
+
+    </div>
+    <div class="col-sm-9 top">
+        <div class="col-sm-12 top1">
+            <div id="cList2 top1">
+                <table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true">
+                </table>
+            </div>
+        </div>
+        <div class="col-sm-12 bottom1">
+            <div id="btomleft">
+
+            </div>
+        </div>
+
+    </div>
+    <div class="col-sm-3 top">
+        <div class="col-sm-12">
+            <div id="mychart1"></div>
+        </div>
+        <div class="col-sm-12">
+            <div id="mychart2"></div>
+        </div>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css/ReportPlatform.css b/css/ReportPlatform.css
new file mode 100644
index 0000000..4fb6ab2
--- /dev/null
+++ b/css/ReportPlatform.css
@@ -0,0 +1,243 @@
+锘�.layui-tab-card>.layui-tab-title {
+    background-color: #ffffff;
+}
+
+.layui-badge-rim,
+.layui-border,
+.layui-colla-content,
+.layui-colla-item,
+.layui-collapse,
+.layui-elem-field,
+.layui-form-pane .layui-form-item[pane],
+.layui-form-pane .layui-form-label,
+.layui-input,
+.layui-layedit,
+.layui-layedit-tool,
+.layui-panel,
+.layui-quote-nm,
+.layui-select,
+.layui-tab-bar,
+.layui-tab-card,
+.layui-tab-title,
+.layui-tab-title .layui-this:after,
+.layui-textarea {
+    border-color: #eee;
+}
+
+.layui-content {
+    height: 150px;
+}
+
+.content3 {
+    height: 595px;
+}
+
+.content4 {
+    height: 640px;
+}
+
+.cnt {
+    border: 1px solid #5FB878;
+    height: 150px;
+    border-radius: 5px;
+    /*background: -webkit-gradient(linear, 0% 0%, 0% 50%,from(#262525), to(#262525));*/
+    /*璋锋瓕*/
+}
+
+.ctop:hover {
+    cursor: pointer;
+    /*榧犳爣鍙樻垚鎵嬫寚鏍峰紡*/
+    /*  -webkit-transition: border linear .1s,-webkit-box-shadow linear .5s;
+    border-color: rgba(95,184, 120,.75);
+    -webkit-box-shadow: 0 0 18px rgba(95,184,120);*/
+}
+
+.check {
+    cursor: pointer;
+    /*榧犳爣鍙樻垚鎵嬫寚鏍峰紡*/
+    -webkit-transition: border linear .1s, -webkit-box-shadow linear .5s;
+    border-color: rgba(95, 184, 120, .75);
+    -webkit-box-shadow: 0 0 18px rgba(95, 184, 120);
+}
+
+.check1 {
+    cursor: pointer;
+    /*榧犳爣鍙樻垚鎵嬫寚鏍峰紡*/
+    -webkit-transition: border linear .1s, -webkit-box-shadow linear .5s;
+    border-color: rgba(0, 148, 255, .75);
+    -webkit-box-shadow: 0 0 18px rgba(0, 148, 255);
+}
+
+.cns {
+    border: 1px solid #5FB878;
+    height: 180px;
+    border-radius: 5px;
+}
+
+.topright dt img {
+    display: block;
+    height: 145px;
+    width: 100%;
+}
+
+dt {
+    height: 145px;
+    width: 20%;
+    border: 1px solid rgb(0 0 0 / 10%);
+}
+
+dl {
+    overflow: hidden;
+    margin: 2px 0px;
+}
+
+.topright>dd {
+    padding: 0px 10px;
+    width: 50%;
+}
+
+dt,
+dd {
+    float: left;
+}
+
+.cnt h1,
+.cns h1 {
+    line-height: 28px;
+    margin: 0 5px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+h1 span {
+    font-family: "寰蒋闆呴粦";
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 0.9;
+    font-size: 12px;
+}
+
+.cnt,
+.cns dl dd {
+    margin: 0 auto;
+    /*text-align:center;*/
+}
+
+.layui-show {
+    padding: 5px 10px;
+}
+
+.color_border1 {
+    border: 0.4em solid #ffd800;
+    background-color: #ffd800;
+}
+
+.color_border2 {
+    border: 0.4em solid #09d1ea;
+    background-color: #09d1ea;
+}
+
+.color_border3 {
+    border: 0.4em solid #808080;
+    background-color: #808080;
+}
+
+.color_border4 {
+    border: 0.4em solid #13ad4c;
+    background-color: #13ad4c;
+}
+
+.gj_icon {
+    border-radius: 0.4em;
+    width: 1px;
+    height: 1px;
+    display: inline-block;
+    vertical-align: 0px;
+    margin-right: 14px;
+}
+
+.imgicon {
+    height: 100px;
+    display: block;
+    text-align: center;
+}
+
+.imgtitle {
+    text-align: center;
+    display: block;
+    font-size: 20px;
+}
+
+.layui-icon {
+    font-size: 90px;
+}
+
+.imgicon0 {
+    height: 100px;
+    display: block;
+    text-align: center;
+    margin: 0.2em auto;
+    width: 100px;
+}
+
+.imgicon0:hover {
+    cursor: pointer;
+    /*榧犳爣鍙樻垚鎵嬫寚鏍峰紡*/
+    -webkit-transition: border linear .1s, -webkit-box-shadow linear .5s;
+    border-color: rgba(141, 39, 142, .75);
+    -webkit-box-shadow: 0 0 18px rgba(111, 1, 32, 3);
+}
+
+.bottomright {
+    cursor: pointer;
+    /*榧犳爣鍙樻垚鎵嬫寚鏍峰紡*/
+    transition: all 0.6s;
+    /*鎵�鏈夊睘鎬у彉鍖栧湪0.6绉掑唴鎵ц鍔ㄧ敾*/
+}
+
+.bottomright:hover {
+    transform: scale(1.3);
+    /*榧犳爣鏀句笂涔嬪悗鍏冪礌鍙樻垚1.4鍊嶅ぇ灏�*/
+}
+
+#mychart1,
+#mychart2 {
+    width: 100%;
+    height: 320px;
+}
+
+.delete {
+    width: 20px;
+    height: 20px;
+    border-radius: 60%;
+    position: absolute;
+    top: 5px;
+    right: 15px;
+    font-size: 30px;
+}
+
+.delete:hover {
+    cursor: pointer;
+    /*榧犳爣鍙樻垚鎵嬫寚鏍峰紡*/
+}
+
+.tcenter {
+    width: 100%;
+}
+
+.prs {
+    font-family: "寰蒋闆呴粦";
+    font-weight: bold;
+    line-height: 30px;
+    margin: 0 0px 0px 10px;
+    float: left;
+}
+
+.layui-progress {
+    width: 60%;
+    float: left;
+    top: 6px;
+}
\ No newline at end of file
diff --git a/img/device.png b/img/device.png
new file mode 100644
index 0000000..2f53547
--- /dev/null
+++ b/img/device.png
Binary files differ
diff --git a/img/erro.png b/img/erro.png
new file mode 100644
index 0000000..8b54e12
--- /dev/null
+++ b/img/erro.png
Binary files differ

--
Gitblit v1.9.1