TV.kanbanUI.git

parent: 457e7684 | 补丁 | 提交 | ignore whitespace

王垚

2022-09-06 17ebbc0486aa76ef86eb68da6bd88fe42d6de27b

设备看板

4个文件已添加

	HDEquipment.html	666 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	css/ReportPlatform.css	243 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	img/device.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	img/erro.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史

 HDEquipment.html

New file
@@ -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",           //分页方式：client客户端分页，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>工单：MO20220901001' + 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>

 css/ReportPlatform.css

New file
@@ -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;
}

 img/device.png


 img/erro.png

New file
			@@ -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 + " 年" + " " + monthNames[month] + ' ' + day + " 日  " + ' ' + 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", //分页方式：client客户端分页，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>工单：MO20220901001' + 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>

New file
			@@ -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;
			}