jquery动画(animate)

效果图：

(左侧信息实现动画切换)

动画原理：

 

 滚动起来，让container滚动起来，滚动距离可自行设置设置

将顶部移动到底部，设置定时器，循环滚动

代码实现：

<div class="usnboxbodylist usrtmfbodytree" id="roomdetaildiv">
   <ul class="ulrtmroom ulrtmroom_sm3" id="roomlist"></ul>
</div>

//通过layui遍历数据生成li

<!--教室显示模板3-->
<script id="tpltempletid3" type="text/html">
    {{#  layui.each(d.addmsg.roomdetaildata, function(index,item){ }}
    <li class="rtmroom rtmroom{{ item.roomid }}" id="room{{ item.roomid }}">
        <div class="us_rtm_box us_rtm_add us_rtm_box{{item.roomid}}">
            <div class="us_rtm_box_center"><h4 class="rtmroomname roomnavviewroom" roomid="{{ item.roomid }}">{{item.ifshowf=='1'?'':'F'+item.roomfloor+'_'}}{{ item.roomname }}</h4></div>
        </div>
        <div class="rtmroommaininfo">
            <div class="_usnrboxmain">
                {{#  if(item.roomstate==0){ }}
                <div class="usnrboxmain1">
                    <div class="usnrboxmain1_1"><span>{{item.dklusername}}</span></div>
                    <div class="usnrboxmain1_2"><span>{{item.dklcoursename}}</span></div>
                </div>
                <div class="usnrboxmain2"><span>{{item.pcount!='-'?item.pcount:'0'}}人</span>&nbsp;&nbsp;&nbsp;<span>座位数:{{item.seatNum}}人</span>&nbsp;&nbsp;&nbsp;<span>上座率：{{item.pcount!='-'?item.seatRate:'0'}}%</span></div>
                {{#  } }}
                {{#  if(item.roomstate==1){ }}
                <div class="usnrboxmain1"><span>自修</span></div>
                <div class="usnrboxmain2"><span>{{item.pcount!='-'?item.pcount:'0'}}人</span>&nbsp;&nbsp;&nbsp;<span>座位数:{{item.seatNum}}人</span>&nbsp;&nbsp;&nbsp;<span>上座率：{{item.pcount!='-'?item.seatRate:'0'}}%</span></div>
                {{#  } }}
                {{#  if(item.roomstate==2){ }}
                <div class="usnrboxmain1"><span>空闲教室</span></div>
                <div class="usnrboxmain2"><span>座位数:{{item.seatNum!=""?item.seatNum:'-'}}{{item.seatNum!=""?'人':''}}</span>&nbsp;&nbsp;&nbsp;<span>上座率：0%</span></div>
                {{#  } }}
            </div>
            <div class="rtmroomfoot rtmroomfoot{{item.roomid}}">
                @*&#176;*@
                <div class="rtmroomfoot_1">
                    <span class="us-span-gray cinfospan1">温度：{{item.collectdata.length>0?item.collectdata[1].valueitem.pvalue:'- '}}<em class="{{item.collectdata.length<=0?'emdisplay':''}}">&#8451;</em></span>
                    <span class="us-span-gray cinfospan2">湿度：{{item.collectdata.length>0?item.collectdata[2].valueitem.pvalue+'%RH':'- '}}</span>
                </div>
                <div class="rtmroomfoot_1">
                    <span class="us-span-gray cinfospan1">PM10：{{item.collectdata.length>0?item.collectdata[4].valueitem.pvalue+'ug/m3':'- '}}</span>
                    <span class="us-span-gray cinfospan2">PM2.5：{{item.collectdata.length>0?item.collectdata[3].valueitem.pvalue+'ug/m3':'- '}}</span>
                </div>
                <div class="rtmroomfoot_1">
                    <span class="us-span-gray cinfospan1">CO2：{{item.collectdata.length>0?item.collectdata[0].valueitem.pvalue+'ppm':'- '}}</span>
                </div>
            </div>
        </div>
    </li>
    {{#  }); }}
    {{#  if(d.addmsg.roomdetaildata.length === 0){ }}

    {{#  } }}
</script>
li

js编写动画

/**
 *
 * 教室采集信息动画
 */
function roomdetailanimate() {
    //获取ul元素
    var _scrollList = $('.ulrtmroom');
    //更新距离
    var ju = 0;
    //获取可视界面div
    var divinfo = document.getElementById("roomdetaildiv");
   //获取可视界面宽度
    var divw = divinfo.clientWidth;
    //可视界面放置li的水平个数(li固定宽度270)
    var licount = Math.floor(divw / 270);

    //获取li的高度
    var lih = $('#roomlist li').height();
    //获取配置行数(自定义配置的一页显示几行)
    var rowcount = blsconfigdata.sShowRCount;

    //是否显示采集器信息
    var ifshowc = blsconfigdata.sIfShowC;
    if (ifshowc == "0") {
        //显示采集详情信息
        ju = (parseInt(lih) + 10) * parseInt(blsconfigdata.sUpdRCount);
    }
    else {
        var divinfo = document.getElementById("roomdetaildiv");
        var divh = divinfo.clientHeight;
        //获取外边距
        var mh = parseInt((divh - (rowcount * 122)) / (parseInt(rowcount) + 1)) * 2;
        ju = (parseInt(lih) + mh) * parseInt(blsconfigdata.sUpdRCount);
    }
    //获取更新行数其高度
    ranimate = setInterval(function () {
        //获取li的外边距
        $('.ulrtmroom').animate({ top: '-' + ju + 'px' }, 'slow', function () {
            $('.ulrtmroom').css('top', 0);
            //将位于顶部的广告位(指定数量的li)移动到底部  --blsconfigdata.sUpdRcount为自定义配置的每次更新几行 
           （注意此处使用appendTO是将指定个数的li移动到尾部，会出现“如果最后一行有一个，那么第一个元素直接拼接在最后一个的后面，所以需要对最后一行元素个数小于每行元素个数添加空的li”）
            $(".ulrtmroom>li").slice(0, licount * parseInt(blsconfigdata.sUpdRCount)).appendTo(_scrollList);
        });
    }, blsconfigdata.sPageInterval * 1000);
}

解决“第一个元素直接拼接在最后一个的后面”问题

如图：

/**
 * 设置空的li 
 * @param {any} h li高
 * @param {any} m li的外边距
 */
function setkongli(h, m) {
    //获取左侧宽度
    var divinfo = document.getElementById("roomdetaildiv");
    var divw = divinfo.clientWidth;
    //放置li的个数
    var licount = Math.floor(divw / 270);
    //添加空li，确保动画时最后一个li不会连接上第一个li
    //获取li总数
    var lizcount = parseInt(blsdata.addmsg.roomdetaildata.length);
    //var lik = (lizcount / licount);
    //放置总行数
    var lirow = Math.floor(lizcount / licount);
    //行*行数后余几个
    var liy = lizcount - (lirow * licount);
    if (liy > 0 && liy < licount) {
        //需要放置空的li个数
        var kli = licount - liy;
        for (var lic = 0; lic < kli; lic++) {
            $("#roomlist").append('<li class="kongli" id="kong' + (lic + 1) + '"></li>');
        }
        for (var lic = 0; lic < kli; lic++) {
            document.getElementById("kong" + (lic + 1)).style.margin = "" + m + "px 5px " + m + "px 5px";
            $('.kongli').height(h);
        }
    }
}

灵活配置页面参数项参考：

完整代码：（不建议参考）

@{
    Layout = "~/areas/usrtm/Views/Shared/_LayoutCourse.cshtml";
    ViewBag.Title = this.ViewBag.titlename;
    this.ViewBag.sTpltempletid = "3";
    ViewBag.usdata = "{uspage:'0',uspagesize:'1000',usload:'1',ussurl:'/extbls/bls_basic/getblsdata?dtype=2',templetid:'tpltempletid" + this.ViewBag.sTpltempletid + "',viewid:'roomlist',usform:'us-form',pagerid:'pager',uscallback:'getroomdetailfinish'}";
    ViewBag.ulrtmroom_sm = "ulrtmroom_sm" + ViewBag.sTpltempletid;
}

@*时间*@
<script src="~/assets2/rtm/js/rtmindexdate.js?jsdate=@ViewBag.JSVersion"></script>
<script src="~/assets2/bls/js/bls_index.js?jsdate=@ViewBag.JSVersion"></script>
@*ehart*@
<script src="/assets2/echarts/echarts.min.js?jsdate=@ViewBag.JSVersion"></script>
@*<script src="~/assets2/bls/js/echartbls.js?jsdate=@ViewBag.JSVersion"></script>*@
<link href="@this.ViewBag.OSSURL/assets2/bls/css/bls_index.css?cssdate=@ViewBag.CssVersion" rel="stylesheet" />
@*模板css*@
@*<link href="@this.ViewBag.OSSURL/assets2/rtm/css/hc/rtmstyle.css?cssdate=@ViewBag.CssVersion" rel="stylesheet" />*@
<link href="@this.ViewBag.OSSURL/assets2/bls/css/bls_roomdetail.css?cssdate=@ViewBag.CssVersion" rel="stylesheet" />
<!--教室显示模板3-->
<script id="tpltempletid3" type="text/html">
    {{#  layui.each(d.addmsg.roomdetaildata, function(index,item){ }}
    <li class="rtmroom rtmroom{{ item.roomid }}" id="room{{ item.roomid }}">
        <div class="us_rtm_box us_rtm_add us_rtm_box{{item.roomid}}">
            <div class="us_rtm_box_center"><h4 class="rtmroomname roomnavviewroom" roomid="{{ item.roomid }}">{{item.ifshowf=='1'?'':'F'+item.roomfloor+'_'}}{{ item.roomname }}</h4></div>
        </div>
        <div class="rtmroommaininfo">
            <div class="_usnrboxmain">
                {{#  if(item.roomstate==0){ }}
                <div class="usnrboxmain1">
                    <div class="usnrboxmain1_1"><span>{{item.dklusername}}</span></div>
                    <div class="usnrboxmain1_2"><span>{{item.dklcoursename}}</span></div>
                </div>
                <div class="usnrboxmain2"><span>{{item.pcount!='-'?item.pcount:'0'}}人</span>&nbsp;&nbsp;&nbsp;<span>座位数:{{item.seatNum}}人</span>&nbsp;&nbsp;&nbsp;<span>上座率：{{item.pcount!='-'?item.seatRate:'0'}}%</span></div>
                {{#  } }}
                {{#  if(item.roomstate==1){ }}
                <div class="usnrboxmain1"><span>自修</span></div>
                <div class="usnrboxmain2"><span>{{item.pcount!='-'?item.pcount:'0'}}人</span>&nbsp;&nbsp;&nbsp;<span>座位数:{{item.seatNum}}人</span>&nbsp;&nbsp;&nbsp;<span>上座率：{{item.pcount!='-'?item.seatRate:'0'}}%</span></div>
                {{#  } }}
                {{#  if(item.roomstate==2){ }}
                <div class="usnrboxmain1"><span>空闲教室</span></div>
                <div class="usnrboxmain2"><span>座位数:{{item.seatNum!=""?item.seatNum:'-'}}{{item.seatNum!=""?'人':''}}</span>&nbsp;&nbsp;&nbsp;<span>上座率：0%</span></div>
                {{#  } }}
            </div>
            <div class="rtmroomfoot rtmroomfoot{{item.roomid}}">
                @*&#176;*@
                <div class="rtmroomfoot_1">
                    <span class="us-span-gray cinfospan1">温度：{{item.collectdata.length>0?item.collectdata[1].valueitem.pvalue:'- '}}<em class="{{item.collectdata.length<=0?'emdisplay':''}}">&#8451;</em></span>
                    <span class="us-span-gray cinfospan2">湿度：{{item.collectdata.length>0?item.collectdata[2].valueitem.pvalue+'%RH':'- '}}</span>
                </div>
                <div class="rtmroomfoot_1">
                    <span class="us-span-gray cinfospan1">PM10：{{item.collectdata.length>0?item.collectdata[4].valueitem.pvalue+'ug/m3':'- '}}</span>
                    <span class="us-span-gray cinfospan2">PM2.5：{{item.collectdata.length>0?item.collectdata[3].valueitem.pvalue+'ug/m3':'- '}}</span>
                </div>
                <div class="rtmroomfoot_1">
                    <span class="us-span-gray cinfospan1">CO2：{{item.collectdata.length>0?item.collectdata[0].valueitem.pvalue+'ppm':'- '}}</span>
                </div>
            </div>
        </div>
    </li>
    {{#  }); }}
    {{#  if(d.addmsg.roomdetaildata.length === 0){ }}

    {{#  } }}
</script>

<div class="container">
    <div class="t1">
        <div class="us_header usk_c_main_bg">
            <div class="us_header_left usiop"><img src="@Html.Raw(this.ViewBag.Organization.sOPic)" alt="@Html.Raw(this.ViewBag.Organization.sOName)" onerror="this.src = '/assets2/oem/images/logo.png'" width="150" height="42" /></div>
            <div class="us_header_right usrtmtime">
                <div class="clock textshadow">
                    <div id="date"></div>
                    <ul>
                        <li id="hours"> </li>
                        <li class="datepoint">:</li>
                        <li id="min"> </li>
                        <li class="datepoint">:</li>
                        <li id="sec"> </li>
                    </ul>
                </div>
            </div>
            <div class="us_header_center usiop">
                <h3>@this.ViewBag.Title</h3>
            </div>
        </div>
    </div>
    <div class="t2">
        <div class="t2_left" id="t2_left">
            <form id="us-form" class="layui-form layui-form-pane layui-form-item us-form ">
                <div class="usnboxbodylist usrtmfbodytree" id="roomdetaildiv">
                    <ul class="ulrtmroom @ViewBag.ulrtmroom_sm" id="roomlist"></ul>
                    <div class="usnbox usnboxnotopmargin" style="display:none">
                        <div class="ustplpage" id="ustplpageroom"
                             usdata="@Html.Raw(this.ViewBag.usdata)"></div>
                        <div id="pager" class="usboxcenter"></div>
                    </div>
                </div>
            </form>
        </div>
        <div class="t2_right">
            <div class="t2_right_main">
                <div class="t2_right_top">
                    <div class="t2_right_top1">
                        <i class="us-icon">&#xe764;</i><span>教室动态</span>
                    </div>
                    <div class="t2_right_top2" id="rstatetable">
                        @*<div id="classtable"></div>*@
                    </div>
                </div>
                <div class="t2_right_middle">
                    <div class="t2_right_middle1">
                        <i class="us-icon">&#xe75b;</i><span>数据统计</span>
                    </div>
                    <div class="t2_right_middle2">
                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                            <div id="uscontainer1" class="uscontainer1">
                            </div>
                            <div class="uscontainer2" id="uscontainer2">
                                <div class="uscontainer2one"><span id="b1" class="b"></span>总教室数：<span id="d1" class="d"></span></div>
                                <div class="uscontainer2two"><span id="b2" class="b"></span>上课教室：<span id="d2" class="d"></span></div>
                                <div class="uscontainer2three"><span id="b3" class="b"></span>自修教室：<span id="d3" class="d"></span></div>
                                <div class="uscontainer2four"><span id="b4" class="b"></span>空闲教室：<span id="d4" class="d"></span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="t2_right_bottom" id="t2_right_bottom">
                    <div class="t2_right_bottom1">
                        <i class="us-icon">&#xe664;</i><span>信息化办公室</span>
                    </div>
                    <div class="t2_right_bottom2" id="t2_right_bottom2">
                        <div class="bottom2one">人员：<span class="username"></span></div>
                        <div class="bottom2two">电话：<span class="phone"></span></div>
                        <div class="bottom2three">地址：<span class="address"></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="t3">
        <div id="wrapper" class="wrapper">
            <div id="marquee">
                <span id="marqueeContent"></span>
            </div>
        </div>
    </div>
</div>
<script>
    //获取教学楼
        var build = '@this.ViewBag.building';
</script>
cshtml
var blsdata;//大屏数据
var blsconfigdata;//大屏配置数据
var uscoursemain = "#rstatetable";//tableid
var ecc_table_body = "#ecc_table_body";
var _bls_setting = {
    bls_select_class: "ut_s",
    bls_select_text: "<i class='us-icon'>&#xe6fb;</i>",
    bls_select_oneheight: "ut_sonehight",
}
$(function () {
    blssys_init();
})

/**系统初始功能 */
function blssys_init() {
    //获取配置数据 1号楼
    getblsconfig(build);
    //获取大屏数据
    bls_data_main_in(build);
    //定时刷新
    reloadpagetime();
}

/**
 * 获取配置数据
 * @param {any} b 教学楼
 */
function getblsconfig(b) {
    var url = "/extbls/bls_basic/getblsconfig?building=" + b;
    ushttp.UsAjaxJSONV2(url, "", false, false, function (d) {
        blsconfigdata = d;
        //设置通知
        $("span[id=marqueeContent]").text(d.sMessage);
        $("span[class=username]").text(d.sUserName);
        $("span[class=phone]").text(d.sPhone);
        $("span[class=address]").text(d.sAddress);
        //设置文本滑动
        move(d.sMessageSpeed, d.sDirection);
    })
}

/**
 * 获取大屏显示数据
 * @param {any} b 教学楼
 */
function bls_data_main_in(b) {
    var url = "/extbls/bls_basic/getblsdata?building=" + b + "&dtype=1";
    ushttp.UsAjaxJSONV2(url, "", false, false, function (d) {
        blsdata = d;
        //console.error(blsdata);
        //console.error(blsdata);
        blsinithtml();//生成HTML的表格；
        tableinit();//表格填入数据
        createchart();//教室分析echart图
    });
    //console.error(blsconfigdata);
    //console.error(blsdata);
}

/**
 * 文本滑动
 * @param {any} speed 时间间隔  1000 毫秒= 1 秒。
 * @param {any} dic 方向
 */
function move(speed, dic) {
    let wrapper, wrapperWidth, marquee, marqueeContent, contentWidth;
    wrapper = document.getElementById('wrapper');
    marquee = document.getElementById('marquee');
    marqueeContent = document.getElementById('marqueeContent');
    contentWidth = marqueeContent.getBoundingClientRect().width;
    wrapperWidth = 0;
    if (dic == "left" || dic == "" || dic == null) {
        wrapperWidth = wrapper.getBoundingClientRect().width;
    }
    marquee.style.transform = 'translateX(' + wrapperWidth + 'px)';
    let distance = wrapperWidth;
    setInterval(() => {
        if (dic == "left" || dic == "" || dic == null) {
            //当文字移动超出wrapper的左侧时 则归位
            if (marquee.getBoundingClientRect().x + contentWidth < wrapper.getBoundingClientRect().x) {
                distance = wrapperWidth;
            }
            distance--;
            marquee.style.transform = 'translateX(' + distance + 'px)';
        }
        else if (dic == "right") {
            //当文字移动超出wrapper的右侧时 则归位
            if (marquee.getBoundingClientRect().x - contentWidth > wrapper.clientWidth) {
                var len = $("span[id=marqueeContent]").text().length;
                distance = -contentWidth / len;
                //console.error(distance);
            }
            distance++;
            marquee.style.transform = 'translateX(' + distance + 'px)';
        }
    }, speed);
}

/**定时刷新页面 */
function reloadpagetime() {
    // 设置定时器，时间即为滚动速度  --5秒判断一次
    repage = setInterval(function () {
        //获取当前时间
        var date = us_date_format(new Date(), "hh:mm:ss");
        //获取当前时间分
        var nowminute = Math.ceil(gettimesecond(date) / 60);
        var jiearr = blsdata.addmsg.roomstate_xydata.jie;
        var datajie = blsdata.addmsg.jieIndex;
        var jie = 0;//当前节
        //console.error(jiearr);
        for (var i = 0; i < jiearr.length; i++) {
            if (jiearr[0].js == "-3") {
                clearInterval(repage);
                reloadpagezitime();
            }
            else if ((nowminute >= parseInt(jiearr[i].s) && nowminute <= parseInt(jiearr[i].e))) {
                jie = jiearr[i].js;
                if (datajie != jie) {
                    //刷新页面
                    location.reload();
                    console.error("当前为第" + jie + "节次，重新刷新页面");
                }
            }
            else if (i >= jiearr.length - 1 && jiearr[0].js != "-2" && jie == "-1") {
                //刷新页面
                location.reload();
            }
        }
    }, 5000);
}
/**自习时间刷新页面 */ //1分钟刷新
function reloadpagezitime() {
    setInterval(function () {
        //刷新页面
        location.reload();
    }, 60000);
}

/**
 * 生成HTML的表格；
 * */
function blsinithtml() {
    var c = blsdata;
    var html = "";
    var table = "";
    table = '<div class="usdatetablediv" id="usdatetablediv">';
    table += '<table lay-even="" id="usdatetable" class="usdatetable usdatetablecss ushtablecss">';
    table += '<thead><tr id="ecc_table_header">';
    var theader = '<th usid="0" class="theadbgcss"></th>';
    for (var i = 0; i < 6; i++) {
        var usid = "99";
        if (i <= c.addmsg.roomstate_xydata.jie.length - 1) {
            usid = c.addmsg.roomstate_xydata.jie[i].js;
        }
        /* theader += '<th usid="' + (i + 1) + '"><span>' + '第' + c.jie[i].js + '</span><d>' + c.jie[i].s + '-' + c.jie[i].e+'</d></th>'*/
        //ssrdaytitleday方法中给span和d标签布局了样式 和上面的形式一样
        theader += '<th id="' + (i + 1) + '" usid="' + usid + '" class="theadbgcss"><span>/</span><d></d></th>'
    }
    table += theader;
    table += '</tr></thead>';
    table += '<tbody id="ecc_table_body">';
    table += tsrinithtmltdinfo(c);
    table += '</tbody></table>';
    table += "</div>";
    html += table;
    $(uscoursemain).html(html);
}

/**
 * 生成表格里面单元格
 */
function tsrinithtmltdinfo(c) {
    var tbodytr = "";
    for (var i = 0; i < c.addmsg.roomstate_xydata.roomInfo.length; i++) {

        var roominfo = c.addmsg.roomstate_xydata.roomInfo[i];
        //偶行
        var rowstyle = "";
        if (i % 2 != 0) {
            //颜色样色--隔行换色
            var rowstyle = " style='background-color:#f1f5f8'"
        }
        var trone = '<tr>';
        //2021-09-22 第1列;
        trone += '<td  class="notclick"><seat>' + roominfo.roomname + '</seat></td>';
        //后面几列，有几节就有几列
        //效果：<td usid="2节座位1"></td>
        var bigw = 0, bigw1 = 0; //补充空位
        for (var w = 0; w < 6; w++) {
            var dateone = c.addmsg.roomstate_xydata.jie[w];
            var t;
            if (dateone != null) {
                t = '<td' + rowstyle + ' usid="' + dateone.js + "_" + roominfo.roomid + '" class="usoneclick" s="' + (i + 1) + '" jk="' + dateone.jk + '" >' + "" + '</td>';
                bigw = dateone.js;
                bigw1 = dateone.jk;
            }
            else {
                bigw = Number(bigw) + 1;
                bigw1 = Number(bigw1) + 1;
                t = '<td' + rowstyle + ' usid="' + bigw + "_" + (i + 1) + '" class="usoneclick" s="' + (i + 1) + '" jk="' + bigw1 + '" >' + "" + '</td>';
            }
            trone += t;
        }
        trone += "</tr>";
        tbodytr += trone;
    }
    return tbodytr;
}

/**
 * 表格填入数据
 * */
function tableinit() {
    var cdayclass = "ustitlecday";
    //设置横坐标节次等信息---获取对应节次下教室的动态信息
    blsstatadetail(blsdata.addmsg.roomstate_xydata.jie);
}

/**
 * 设置th信息
 * @param {any} jielist
 */
function blsstatadetail(jielist) {
    var cdayclass = "ustitlecday";
    //把节放在横坐标 只是table的th表头  --这里设置了表的样式
    for (var i = 0; i < 6; i++) {
        var d = jielist[i];
        var skey = "", sshow = "", dspan = "", dhtml = "-";
        let dweek = $(ecc_table_header).find("span")[i];//第几节
        var dweekhtml = "-"; //横坐标头
        dspan = $(ecc_table_header).find("d")[i];
        if (d != null) {
            skey = d.s + "-" + d.e;
            sshow = d.s + "-" + d.e;

            dhtml = '<i class="us-icon">&#xe6ef;</i>';
            if (d.cd == 1) {
                $(dspan).parent().attr("class", cdayclass);
            }
            dweekhtml = d.js;
            if (d.js == "-2" || d.js == "-3") {
                dweekhtml = d.jk;
                dhtml = "";
            }
        }
        $(dweek).html(dweekhtml);
        $(dspan).html(dhtml).attr("day", skey).attr("title", skey);
        //$(dspan).parent().attr("class", "");
        if (d != null) {
            if (d.cd == 1) {
                $("th[usid=" + (d.js) + "]").attr("class", "thbgcss");
            }
        }
    }

    //这一天显示节次对应教室的动态信息blsdata
    blsinityydata(blsdata.addmsg.roomstate_itemList);
}

/**
 * 显示教室动态数据  相应教室这天的动态信息用样式显示出来
 * @param {any} db
 */
function blsinityydata(db) {
    var c = db;
    //$(ecc_table_body).html(tsrinithtmltdinfo(tsrconfig.config));
    sortarray = new Array();
    for (var i = 0; i < c.length; i++) {
        var one = c[i];
        var js = JSON.stringify(one);
        var ut_no = "ut_no";//是否显示小红点
        var html = uscoursedisplay(one);
        var usid = one.jie + "_" + one.rid;
        var _sel = ecc_table_body + " td[usid=" + usid + "]";
        var _bak = $(_sel).html();
        if (_bak != "") {
            html = _bak + html;
        }
        $(_sel).html(html);
    }
}

/**
 * 显示教室状态  课、自、闲
 * @param {any} one
 */
function uscoursedisplay(one) {
    var ut_no = "ut_no";
    var html = '<span style="background-color:' + one.bgcolor + ';color:' + one.color + '">'
        + one.un + '</span>';
    return html;
}

/**
 * 教室分析echart图
 * */
function createchart() {
    var usnewchart = usechart.iop_createchart('uscontainer1');
    var data1 = blsdata.addmsg.roomechart_data.dashsumlist;
    //console.log(data1);
    var legenddata = [];
    var seriesdata = [];

    $.each(data1, function (n, value) {
        legenddata.push(
            value.cname
        );
        seriesdata.push({
            value: value.count1,
            name: value.cname,
            rvalue: value.count1
        });
    });
    var option = {
        legend: {
            top: 'middle',
            bottom: 10,
            left: 'right',
            data: legenddata,
            orient: 'vertical',
            show: false,
        },
        color: usinitcolor(blsdata.addmsg.roomechart_data),
        /*      color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],*/
        series: [
            {
                name: '',
                type: 'pie',
                radius: '90%',
                data: seriesdata
                , label: {
                    normal: {
                        position: 'inner',
                        //position: 'outside',
                        show: true,
                        textStyle: {
                            color: '#fff'
                        },
                        formatter: '{d}%'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                minAngle: 10,
                left: "0%",
            }
        ]
    }
    usechartlegend("", option);
    usnewchart.setOption(option, true);
    usnewchart.hideLoading();
    $(window).resize(function () {
        usnewchart.resize();
    });

    //设置图例内边距
    var uscontainer = document.getElementById("uscontainer2");
    var uscontainerh = uscontainer.clientHeight;
    var paddingc = Math.floor((uscontainerh - 120) / 2);
    document.getElementById("uscontainer2").style.padding = "" + paddingc + "px 0px 0px 0px";
}

/**
 * 获取echart图扇形颜色
 * */
function usinitcolor(d) {
    var colorarr = ['#1E9FFF', '#5cb85c', '#009688', '#ee6666', '#fac858', '#009688', '#5470c6', '#fac858'];
    //var colorarr = ['#ff0000', '#1E9FFF','#009688','#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
    //绘制图例图标
    for (var i = 1; i < 4; i++) {
        var spanb = "b" + (i + 1);
        document.getElementById(spanb).style.background = colorarr[i - 1];
        var spand = "d" + (i + 1);
        $("span[id=" + spand + "]").text(d.dashsumlist[i - 1].count1 + "间");
    }
    document.getElementById("b1").style.background = colorarr[4];
    $("span[id=d1]").text(d.roomAllCount + "间");
    return colorarr;
}

/**
 * 获取教室详细信息成功
 * */
function getroomdetailfinish() {
    //设置分析数据滚动
    //collectinfoscroll();
    //根据信息设置样式
    setroomdetailcss();
    //教室详情信息滚动
    //roomdetailscroll();

    //教室详情信息动画
    roomdetailanimate();

    //console.error(blsdata);
    //教室状态信息滚动
    roomstatescroll();

    //根据配置设置页面显示教室详情行数
   var liset= setlirowCount();

    //设置教室详情信息ul边距
    setulmarginleft();

    //设置空的li
    setkongli(liset[0], liset[1]);
}

/**
 * 设置页面显示教室详情行数
 * */
function setlirowCount() {
    //获取显示高度
    var divinfo = document.getElementById("roomdetaildiv");
    var divh = divinfo.clientHeight;
    //获取配置行数
    var rowcount = parseInt(blsconfigdata.sShowRCount);
    //获取是否显示采集数据
    var ifshowc = blsconfigdata.sIfShowC;
    //显示采集详情信息
    if (ifshowc == "0") {
        //重新计算显示区域高度\
        divh = divh - (rowcount * 10);
        var h = Math.floor(divh / rowcount);
        //设置li的高度
        $('#roomlist li').height(h);
        return [h+2,5];
    }
    else {
        //不显示采集详情信息
        //设置li的高度
        $('#roomlist li').height(120);
        var infoh = parseInt($(".rtmroommaininfo").height());
        $("._usnrboxmain").height(infoh);
        $('.rtmroomfoot').attr("class", "rtmroomfootdisplay");
        //不显示采集信息时设置li的外边距
        var lih = parseInt(rowcount * 122);
        var mh = (divh - lih) / (parseInt(rowcount) * 2);
        var roomarr = blsdata.addmsg.roomstate_xydata.roomInfo;
        for (var ri = 0; ri < roomarr.length; ri++) {
            document.getElementById("room" + roomarr[ri].roomid).style.margin = "" + mh + "px 5px " + mh + "px 5px";
        }
        return [122,mh];
    }
}

/**
 * 设置左边教室详情ul外边距兼容浏览器/管理员信息外边距/设置ul高度
 * */
function setulmarginleft() {
    //获取左侧宽度
    var divinfo = document.getElementById("roomdetaildiv");
    var divw = divinfo.clientWidth;
    //放置li的个数
    var licount = Math.floor(divw / 270);
    var spx = divw - (licount * 270) - (licount * 10);
    var margind = Math.floor(spx / 2);
    //document.getElementById("roominfoul").style.margin = "" + margind +"px 0px 0px 0px";
    document.getElementById("roomlist").style.margin = "0px 0px 0px " + margind + "px";

    //楼宇管理员模块边距
    var binfo = document.getElementById("t2_right_bottom");
    var binfoh = binfo.clientHeight;
    var marginb = Math.floor((binfoh - 105) / 3);
    document.getElementById("t2_right_bottom2").style.margin = "" + marginb + "px 0px 0px 0px";
}
/**
 * 设置空的li 
 * @param {any} h li高
 * @param {any} m li的外边距
 */
function setkongli(h, m) {
    //获取左侧宽度
    var divinfo = document.getElementById("roomdetaildiv");
    var divw = divinfo.clientWidth;
    //放置li的个数
    var licount = Math.floor(divw / 270);
    //添加空li，确保动画时最后一个li不会连接上第一个li
    //获取li总数
    var lizcount = parseInt(blsdata.addmsg.roomdetaildata.length);
    //var lik = (lizcount / licount);
    //放置总行数
    var lirow = Math.floor(lizcount / licount);
    //行*行数后余几个
    var liy = lizcount - (lirow * licount);
    if (liy > 0 && liy < licount) {
        //需要放置空的li个数
        var kli = licount - liy;
        for (var lic = 0; lic < kli; lic++) {
            $("#roomlist").append('<li class="kongli" id="kong' + (lic + 1) + '"></li>');
        }
        for (var lic = 0; lic < kli; lic++) {
            document.getElementById("kong" + (lic + 1)).style.margin = "" + m + "px 5px " + m + "px 5px";
            $('.kongli').height(h);
        }
    }
}

//教室状态添加样式
function setroomdetailcss() {
    var xian = "xiancss";
    var ke = "kecss";
    var zi = "zicss";
    var xiant = "xiantcss";
    var ket = "ketcss";
    var zit = "zitcss";
    var xianf = "rtmroomfoot xianfootcss";
    var kef = "rtmroomfoot kefootcss";
    var zif = "rtmroomfoot zifootcss";
    var blsdatainfo = blsdata;
    var jieindex = blsdatainfo.addmsg.jieIndex;
    for (var i = 0; i < blsdatainfo.addmsg.roomstate_itemList.length; i++) {
        var rdiv = ".rtmroom" + blsdatainfo.addmsg.roomstate_itemList[i].rid;
        var uboxdiv = ".us_rtm_box" + blsdatainfo.addmsg.roomstate_itemList[i].rid;
        var rfootdiv = ".rtmroomfoot" + blsdatainfo.addmsg.roomstate_itemList[i].rid;
        if (jieindex != -1) {
            if (blsdatainfo.addmsg.roomstate_itemList[i].jie == jieindex) {
                if (blsdatainfo.addmsg.roomstate_itemList[i].un == "闲") {
                    $(rdiv).attr("class", xian);
                    $(uboxdiv).attr("class", xiant);
                    $(rfootdiv).attr("class", xianf);
                }
                if (blsdatainfo.addmsg.roomstate_itemList[i].un == "课") {
                    $(rdiv).attr("class", ke);
                    $(uboxdiv).attr("class", ket);
                    $(rfootdiv).attr("class", kef);
                }
                if (blsdatainfo.addmsg.roomstate_itemList[i].un == "自") {
                    $(rdiv).attr("class", zi);
                    $(uboxdiv).attr("class", zit);
                    $(rfootdiv).attr("class", zif);
                }
                //break;
            }
        }
        else {
            if (blsdatainfo.addmsg.roomstate_itemList[i].un == "闲") {
                $(rdiv).attr("class", xian);
                $(uboxdiv).attr("class", xiant);
                $(rfootdiv).attr("class", xianf);
            }
            if (blsdatainfo.addmsg.roomstate_itemList[i].un == "课") {
                $(rdiv).attr("class", ke);
                $(uboxdiv).attr("class", ket);
                $(rfootdiv).attr("class", kef);
            }
            if (blsdatainfo.addmsg.roomstate_itemList[i].un == "自") {
                $(rdiv).attr("class", zi);
                $(uboxdiv).attr("class", zit);
                $(rfootdiv).attr("class", zif);
            }
        }
    }
}

/**
 *
 * 教室采集信息动画
 */
function roomdetailanimate() {
    var _scrollList = $('.ulrtmroom');
    //更新距离
    var ju = 0;
    var divinfo = document.getElementById("roomdetaildiv");
    var divw = divinfo.clientWidth;
    //放置li的水平个数
    var licount = Math.floor(divw / 270);

    //获取li的高度
    var lih = $('#roomlist li').height();
    //获取配置行数
    var rowcount = blsconfigdata.sShowRCount;

    //是否显示采集器信息
    var ifshowc = blsconfigdata.sIfShowC;
    if (ifshowc == "0") {
        //显示采集详情信息
        ju = (parseInt(lih) + 10) * parseInt(blsconfigdata.sUpdRCount);
    }
    else {
        var divinfo = document.getElementById("roomdetaildiv");
        var divh = divinfo.clientHeight;
        //获取外边距
        var mh = parseInt((divh - (rowcount * 122)) / (parseInt(rowcount) + 1)) * 2;
        ju = (parseInt(lih) + mh) * parseInt(blsconfigdata.sUpdRCount);
    }
    //获取更新行数其高度
    ranimate = setInterval(function () {
        //获取li的外边距
        $('.ulrtmroom').animate({ top: '-' + ju + 'px' }, 'slow', function () {
            $('.ulrtmroom').css('top', 0);
            //将位于顶部的广告位移动到底部
            $(".ulrtmroom>li").slice(0, licount * parseInt(blsconfigdata.sUpdRCount)).appendTo(_scrollList);
        });
    }, blsconfigdata.sPageInterval * 1000);
}


/**教室采集信息滚动条滚动 */
function roomdetailscroll() {
    var parent, parent;
    // 获取父盒子（肯定有滚动条）
    parent = document.getElementById('roomdetaildiv');
    // 获取子盒子（高度肯定比父盒子大）
    child = document.getElementById('roomlist');
    //divh是可视区的高度
    var divh = $("#t2_left").height();

    var ju = 0;
    //获取li的高度
    var lih = $('#roomlist li').height();
    //获取每次滚动的距离
    var ifshowc = blsconfigdata.sIfShowC;
    /*    console.error(blsconfigdata);*/
    if (ifshowc == "0") {
        //显示采集详情信息
        ju = (parseInt(lih) + 10) * parseInt(blsconfigdata.sUpdRCount);
    }
    else {
        var divinfo = document.getElementById("roomdetaildiv");
        var divh = divinfo.clientHeight;
        //获取配置行数
        var rowcount = blsconfigdata.sShowRCount;
        var mh = parseInt((divh - (rowcount * 122)) / (parseInt(rowcount) + 1)) * 2;
        ju = (parseInt(lih) + mh) * parseInt(blsconfigdata.sUpdRCount);
    }

    // 设置定时器，时间即为滚动速度
    r = setInterval(function () {
        //滚动条距顶部高度+可视区高度 、parent.scrollHeight是滚动条的总高度
        if (Math.ceil(parent.scrollTop + divh) >= Math.ceil(parent.scrollHeight)) {
            parent.scrollTop = 0;
            clearInterval(r);
            roomdetailscroll();
        } else {
            ////scrollTop是滚动条滚动时，距离顶部的距离
            //parent.scrollTop = parent.scrollTop + 207;
            //parent.scrollTop = parent.scrollTop++;
            parent.scrollTop = parent.scrollTop + ju;
            //console.error(parent.scrollTop);
            //console.error(ju);
        }
    }, blsconfigdata.sPageInterval * 1000);
}

/**教室采集状态滚动条滚动 */
function roomstatescroll() {
    //child = document.getElementById('ecc_table_body');
    //divh是可视区的高度
    var divh = $("#usdatetablediv").height();
    // 设置定时器，时间即为滚动速度
    c = setInterval(function () {
        // 获取父盒子（肯定有滚动条）
        var parent = document.getElementById('usdatetablediv');
        // 获取子盒子（高度肯定比父盒子大）
        var child = $("#usdatetable").height();

        //滚动条距顶部高度
        if (Math.ceil(parent.scrollTop + divh) >= Math.ceil(child)) {
            parent.scrollTop = 0;
            clearInterval(c);
            roomstatescroll();
        } else {
            ////scrollTop是滚动条滚动时，距离顶部的距离
            parent.scrollTop++;
            //console.error(Math.ceil(child))
            //console.error(Math.ceil(parent.scrollTop + divh))
        }
    }, blsconfigdata.sStateInterval);
}

/**教室采集信息滚动条滚动 */
function collectinfoscroll() {
    var parent1, parent2, child1, child2;
    // 获取父盒子（肯定有滚动条）
    parent1 = document.getElementById('rtmroomfoot1');
    parent2 = document.getElementById('rtmroomfoot2');
    // 获取子盒子（高度肯定比父盒子大）
    child1 = document.getElementById('rtmroomfoot1son');
    child2 = document.getElementById('rtmroomfoot2son');
    // 第一个子盒子内容复制一遍给第二个子盒子，产生循环视觉，辅助作用
    // 可以注释下这条代码，看会出现什么情况
    // 设置定时器，时间即为滚动速度
    setInterval(function () {
        //parent1.scrollTop = se;
        if (parent1.scrollTop >= 70) {
            parent1.scrollTop = 0;
        } else {
            // 如果存在网页缩放，很有可能没有效果，但是else部分的代码会执行
            // 原因：刚才讲到的scrollTop三个注意中标黄的一条
            // 设置scrollTop的值小于0，即scrollTop被设为0
            // 可以缩放跑一下，然后不刷新的状态下恢复百分之百跑一下，再缩放，打印scrollTop的值
            // 你会发现正常尺寸执行时打印的第一个值不是加法，而是减法，即scrollTop++增加负值
            // 这样的话就对应上了scrollTop的注意点了，增加的值小于0，就被设为0
            parent1.scrollTop++;
            /*console.error(parent1.scrollTop);*/
        }
        if (parent2.scrollTop >= child2.scrollHeight) {
            parent2.scrollTop = 0;
        } else {
            // 如果存在网页缩放，很有可能没有效果，但是else部分的代码会执行
            // 原因：刚才讲到的scrollTop三个注意中标黄的一条
            // 设置scrollTop的值小于0，即scrollTop被设为0
            // 可以缩放跑一下，然后不刷新的状态下恢复百分之百跑一下，再缩放，打印scrollTop的值
            // 你会发现正常尺寸执行时打印的第一个值不是加法，而是减法，即scrollTop++增加负值
            // 这样的话就对应上了scrollTop的注意点了，增加的值小于0，就被设为0
            parent2.scrollTop++;
        }
    }, 20);
}

//#region 工具

//#region 1.当前时间格式化
/**
 * 当前时间格式化
 * @param {any} _date
 * @param {any} fmt
 */
function us_date_format(_date, fmt) {
    //console.log(_date);
    if (fmt == undefined) {
        fmt = "yyyy-MM-dd hh:mm:ss";
    }
    var o = {
        "M+": _date.getMonth() + 1, //月份
        "d+": _date.getDate(), //日
        "h+": _date.getHours(), //小时
        "m+": _date.getMinutes(), //分
        "s+": _date.getSeconds(), //秒
        "q+": Math.floor((_date.getMonth() + 3) / 3), //季度
        "S": _date.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (_date.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k])
                .length)));
        }
    }
    //console.log(fmt);
    return fmt;
}
//#endregion

//#region 2.获取时间秒
/**
 * 获取时间秒
 * @param {any} date 时间字符串 09:31:44
 */
function gettimesecond(date) {
    var darr = date.split(':');
    return parseInt(darr[0]) * 3600 + parseInt(darr[1]) * 60 + parseInt(darr[2]);
}
//#endregion

//#endregion
Js
.usrtmfbodytree {
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0px;
    /*overflow: auto;*/
    overflow: hidden;
    margin: 0 auto;
}

.rtmroom {
    border: solid 1px #808080;
    border-radius: 4px;
}

.us_rtm_box_center {
    margin: 0 50px;
    text-align: center;
    height: 30px;
}

.us_rtm_add {
    background-color: #F2F2F2;
}

.ulrtmroom_sm3 .rtmroomname {
    clear: none !important;
    line-height: 30px !important;
}

.ulrtmroom_sm3 > li {
    width: 268px !important;
    margin: 5px;
    float: left;
    /*height: 197px;*/
    /*min-height: 215px;*/
}

    .ulrtmroom_sm3 > li ._usnrboxmain {
        height: 50%;
        text-align: center;
        /*line-height: 45px;*/
        /*padding: 5px 0px 5px 0px;*/
    }

.rtmroomfoot {
    height: 49%;
}

.rtmroomfootdisplay {
    display: none;
}

.rtmroomfoot .rtmroomfoot_1 {
    width: 100%;
    /*background-color: seagreen;*/
    height: 25px;
    /*float: left;*/
}

.cinfospan1 {
    font-size: 12px !important;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    /*overflow: hidden;*/
    width: 110px;
    margin-left: 5px;
    margin-top: 5px;
    float: left;
}

.cinfospan2 {
    font-size: 12px !important;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    /*overflow: hidden;*/
    width: 110px;
    /*margin-left: 7px;*/
    margin-top: 5px;
    float: right;
    margin-right: 5px;
}

.emdisplay {
    display: none;
}

em {
    font-style: normal !important;
}

.us_rtm_box_center h4 {
    color: white !important;
    font-weight: bold !important;
}

.xiancss {
    border: solid 1px #009688;
    border-radius: 4px;
}

.kecss {
    border: solid 1px #1E9FFF;
    border-radius: 4px;
}

.zicss {
    border: solid 1px #5cb85c;
    border-radius: 4px;
}

.xiantcss {
    background-color: #009688;
}

.ketcss {
    background-color: #1E9FFF;
}

.zitcss {
    background-color: #5cb85c;
}

.xianfootcss {
    border-top: #009688 1px solid !important;
}

.kefootcss {
    border-top: #1E9FFF 1px solid !important;
}

.zifootcss {
    border-top: #5cb85c 1px solid !important;
}

.usnrboxmain1 {
    height: 70% !important;
}

    .usnrboxmain1 span {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.usnrboxmain1_1 {
    height: 50%;
}

.usnrboxmain1_2 {
    height: 50%;
}

.usnrboxmain2 {
    height: 30% !important;
}

.rtmroommaininfo {
    height: calc(100% - 30px);
}

.kongli {
    width: 270px;
    /*background: red;*/
    /*height:50px;*/
}
bls_roomdetail.css
.container {
    width: 100%;
    height: 100%;
}
/*-------------------------------t1--------------------------------------------*/
.t1 .usk_c_main_bg {
    background-color: #146AA2;
    color: #ffffff;
    /*position:absolute;*/
}

img {
    display: inline-block;
    border: 0;
    vertical-align: middle;
}

.usrtmtime {
    font-size: 16px;
    line-height: 25px !important;
}

.us_header_right {
    float: right;
    height: 78px;
    text-align: center;
    line-height: 78px;
    min-width: 260px;
}

.clock {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

    .clock #date {
        font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
        font-size: 20px;
        text-align: center;
        margin-top: 16px;
    }

    .clock ul li {
        display: inline;
        font-size: 20px;
        text-align: center;
        font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
    }

.usiop {
    font-size: 24px;
    margin-left: 20px;
}

.us_header_center {
    margin: 0 50px;
    height: 78px;
    text-align: center;
    line-height: 78px;
    /* text-shadow: 1px 1px 1px #666; */
}

.us_header_left {
    float: left;
    display: block;
    min-width: 260px;
    height: 78px;
    text-align: center;
    line-height: 78px;
    text-decoration: none;
    /* text-shadow: 1px 1px 1px #666; */
}
/*-------------------------------t2--------------------------------------------*/
.t2 {
    width: 100%;
    /*background-color: blueviolet;*/
    position: absolute;
    top: 82px;
    bottom: 54px;
}

    .t2 .t2_left {
        position: absolute;
        top: 0;
        left: 0;
        right: 355px;
        padding: 0px !important;
        background-color: #fff;
        height: 100%;
        border: 1px solid #d5d6d7;
    }

    .t2 .t2_right {
        float: right;
        width: 350px;
        height: 100%;
        background-color: #fff;
    }

        .t2 .t2_right .t2_right_top {
            position: absolute;
            width: 350px;
            height: 43%;
            border: 1px solid #d5d6d7;
        }

        .t2 .t2_right .t2_right_middle {
            width: 350px;
            height: 30%;
            position: absolute;
            bottom: 26%;
            border: 1px solid #d5d6d7;
        }

        .t2 .t2_right .t2_right_bottom {
            width: 350px;
            height: 25%;
            position: absolute;
            bottom: 0px;
            border: 1px solid #d5d6d7;
        }

.t2_right_top1 {
    background-color: #146AA2;
    color: #fff;
    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
    width: 85px;
    padding: 5px;
    line-height: 20px;
}

    .t2_right_top1 span {
        font-weight: bold;
    }

    .t2_right_top1 i {
        margin: 0px 5px 0px 0px;
        display: block;
        float: left;
    }

.t2_right_top2 {
    height: calc(100% - 40px);
    margin: 5px 0px 0px 0px;
    overflow: hidden;
    /*overflow: scroll;*/
}

.theadbgcss {
    background-color: #146AA2;
    color: #ffffff;
}

.thbgcss {
    background-color: red !important;
    color: #ffffff;
}

.t2_right_middle1 {
    background-color: #146AA2;
    color: #fff;
    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
    width: 85px;
    padding: 5px;
    line-height: 20px;
}

    .t2_right_middle1 span {
        font-weight: bold;
    }

    .t2_right_middle1 i {
        margin: 0px 5px 0px 0px;
        display: block;
        float: left;
    }

.t2_right_bottom1 {
    background-color: #146AA2;
    color: #fff;
    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
    width: 110px;
    padding: 5px;
    line-height: 20px;
}

    .t2_right_bottom1 span {
        font-weight: bold;
    }

    .t2_right_bottom1 i {
        margin: 0px 5px 0px 0px;
        display: block;
        float: left;
    }
.t2_right_bottom2 {
    height: calc(100% - 30px);
}
.t2_right_bottom2 div {
    font-weight: bold;
    color: #146AA2;
    margin: 0px 0px 15px 30px;
    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
}

    .t2_right_bottom2 div span {
        color: black;
        font-weight: normal;
        font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
    }

/*//表格加入滚动条*/
.usdatetablediv {
    margin: 5px 0px 0px 9px;
    max-height: calc(100% - 5px);
    overflow-y: hidden;
}

/*.usdatetable {
    max-height:100%;
    overflow: hidden;*/
/*overflow: hidden;*/
/*display: block;
}*/
/*表头固定*/
.usdatetable thead tr th {
    position: sticky;
    top: 0;
    z-index: 3;
}

.usdatetable thead tr {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 30px;
}

.usdatetable th {
    font-weight: normal;
}

.usdatetable tbody tr td {
    border-bottom: 1px solid #D2D2D2;
    border-left: 1px solid #D2D2D2;
    box-sizing: border-box;
    height: 20px;
    /*width:10px;*/
    background-color: #FAFAFA;
    word-break: break-all;
}

.usdatetable tbody td span {
    display: block;
    text-align: center;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    /*border-radius:20px;*/
}


table tr td:first-child {
    width: 90px;
    text-align: center;
    height: 30px;
}

table tr td:not(:first-child) {
    width: 40px;
    height: 30px;
}

.t2_right_middle2 {
    height: calc(100% - 31px);
    /*background-color:green;*/
}

.layui-col-xs12 {
    height: 100% !important;
    width: calc(100% - 150px);
}

.t2_right_middle2 .uscontainer1 {
    width: 100%;
    height: 100% !important;
    float: left;
}

.t2_right_middle2 canvas {
    /*width: 250px !important;*/
    height: 100% !important;
    /*left: -30px !important;*/
}

.t2_right_middle2 .uscontainer2 {
    width: 150px !important;
    height: 100% !important;
    /*float: left;*/
    position: absolute;
    left: 200px;
    /*margin: 40px 0px 0px 0px;*/
}
    .t2_right_middle2 .uscontainer2 div {
        margin-bottom: 10px;
    }

    .uscontainer2 .b {
        width: 20px;
        height: 10px;
        float: left;
        margin: 5px 5px 0px 0px;
    }

.uscontainer2 .d {
    font-weight: bold;
}

/*h4 {
    font-weight: bold !important;
    color: white !important;
}*/
/*-------------------------------t3--------------------------------------------*/
.t3 {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0px;
    background-color: #146AA2;
    color: #ffffff;
}

.wrapper {
    width: 100%;
    display: flex;
}

    .wrapper div {
        height: 20px;
        margin-top: 10px;
    }

    .wrapper span {
        font-size: 20px;
        font-weight: bold;
    }
.uscontainer2one {
    color: #fac858;
}
.uscontainer2two {
    color: #1E9FFF;
}
.uscontainer2three {
    color: #5cb85c;
}
.uscontainer2four {
    color: #009688;
}
bls_index.css

参考文献：

https://blog.csdn.net/cocoos/article/details/49306949

https://blog.csdn.net/u013350495/article/details/99661358

 

posted @ 2023-04-10 11:16  じ逐梦  阅读(40)  评论(0)    收藏  举报