第2张图Echarts-html

于 2022-04-23 22:07:27 发布
阅读量1k 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_63701007/article/details/124371391
版权

 content.html

------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="css/swiper.min.css">

  <link rel="stylesheet" href="css/reset.css">

  <link rel="stylesheet" href="css/style.css">

  <title>大屏展示</title>

</head>

<body>

<div class="swiper-container">

  <div class="swiper-wrapper">

    <div class="swiper-slide page-one">

      <p class="top-title">运营指标看板第一屏</p>

      <div class="oh content-wrap">

        <div class="left-content">

          <div class="item-top-content">

            <p class="content-title">业务监控与预警</p>

            <div class="block-item">

              <p>当日线上业务量</p>

              <span>118</span>

            </div>

            <div class="block-item">

              <p>当日线上业务量</p>

              <span>16</span>

            </div>

          </div>

          <div class="left-bottom-content">

            <ul class="head-nav">

              <li class="active">待受理排队单</li>

              <li>已受理排队单</li>

              <li>待上门排队单</li>

              <li>受理中</li>

              <li>受理未关闭</li>

            </ul>

            <div class="nav-content-wrap">

              <div class="nav-content showActive">

                <p class="head"><span class="name">预警状态1</span><span class="order-number">工单号1</span><span class="order-type">受理通道1</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

              </div>

              <div class="nav-content">

                <p class="head"><span class="name">预警状态2</span><span class="order-number">工单号2</span><span class="order-type">受理通道2</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

              </div>

              <div class="nav-content">

                <p class="head"><span class="name">预警状态3</span><span class="order-number">工单号3</span><span class="order-type">受理通道3</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

              </div>

              <div class="nav-content">

                <p class="head"><span class="name">预警状态4</span><span class="order-number">工单号4</span><span class="order-type">受理通道4</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

              </div>

              <div class="nav-content">

                <p class="head"><span class="name">预警状态5</span><span class="order-number">工单号5</span><span class="order-type">受理通道5</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

                <p class="list"><span class="name">待完工</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-type">热线</span></p>

              </div>

            </div>

          </div>

        </div>

        <div class="right-content">

          <div class="item-top-content">

            <p class="content-title">业务调度</p>

            <div class="list-item">

              <p class="title">调度池</p>

              <p class="item"><span class="item-name">派单失败</span><span class="item-num">1</span></p>

              <p class="item"><span class="item-name">异常关单审批</span><span class="item-num">2</span></p>

              <p class="item"><span class="item-name">SLA延期</span><span class="item-num">1</span></p>

            </div>

            <div class="list-item">

              <p class="title">调度员处理</p>

              <p class="item"><span class="item-name">待派单</span><span class="item-num">1</span></p>

              <p class="item"><span class="item-name">撤单</span><span class="item-num">2</span></p>

            </div>

          </div>

          <div class="cl"></div>

          <div class="right-bottom-content">

            <p class="head"><span class="order-number">任务单号</span><span class="order-number">SR单号</span><span class="order-times">催单底数</span><span class="order-type">业务大类</span></p>

            <p class="list"><span class="order-number">RN429049320385320809890707ye</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-times">1</span><span class="order-type">安装业务</span></p>

            <p class="list"><span class="order-number">RN429049320385320809890707ye</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-times">1</span><span class="order-type">安装业务</span></p>

            <p class="list"><span class="order-number">RN429049320385320809890707ye</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-times">1</span><span class="order-type">安装业务</span></p>

            <p class="list"><span class="order-number">RN429049320385320809890707ye</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-times">1</span><span class="order-type">安装业务</span></p>

            <p class="list"><span class="order-number">RN429049320385320809890707ye</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-times">1</span><span class="order-type">安装业务</span></p>

            <p class="list"><span class="order-number">RN4290493</span><span class="order-number">RN429049320385320809890707ye</span><span class="order-times">1</span><span class="order-type">安装业务</span></p>

          </div>

        </div>

        <div class="center-content">

          <div class="water-item-wrap">

            <div class="title">

              <p>当日满意度</p>

              <span>89.0%</span>

            </div>

            <div class="water_wrap">

              <div class="water"></div>

            </div>

          </div>

          <div class="water-item-wrap">

            <div class="title">

              <p>当日满意度</p>

              <span>89.0%</span>

            </div>

            <div class="water_wrap">

              <div class="water"></div>

            </div>

          </div>

          <div class="water-item-wrap">

            <div class="title">

              <p>当日满意度</p>

              <span>89.0%</span>

            </div>

            <div class="water_wrap">

              <div class="water"></div>

            </div>

          </div>

        </div>

      </div>

    </div>

    <div class="swiper-slide page-second">

      <p class="top-title">运营指标看板第二屏</p>

      <div class="oh">

        <div class="table-content-l">

          <p class="title">线上</p>

        </div>

        <div class="table-content-r">

          <p class="title">线下</p>

        </div>

      </div>

    </div>

  </div>

</div>

<script src="js/swiper.min.js"></script>

<script src="js/jquery.min.js"></script>

<script>

  var swiper = new Swiper('.swiper-container')

  //左下角工单选项卡切换效果

  $('.head-nav li').hover(function(){

    $(this).addClass("active").siblings().removeClass("active")

    //获取选中元素的下标

    var index = $(this).index()

    $('.nav-content').eq(index).addClass("showActive").siblings().removeClass("showActive")

  })

</script>

<script>

  $(".water").get(0).style.cssText = "left:44%;top:6px;border-radius:45%;width:340%;height:340%;"

  $(".water").get(1).style.cssText = "left:44%;top:6px;border-radius:45%;width:340%;height:340%;"

  $(".water").get(2).style.cssText = "left:44%;top:-66px;border-radius:45%;width:240%;height:340%;"

</script>

</body>

</html>

m0_63701007
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值