kingdee_large_screen
/
pc_kingdee_large_screen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
							<!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" />
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
  <link rel="stylesheet" href="./styles/cokingCoalC.css" />
  <!-- 引入js -->
  <script src="./libs/vue@2.7.10.js"></script>
  <script src="./libs/datav.min.js"></script>
  <script src="./libs/echarts.min.js"></script>
  <script src="./libs/element-ui@2.15.9.js"></script>
  <script src="./libs/axios.min.js"></script>
  <script src="./js/request.js"></script>
  <script src="./libs/echarts-tooltip-carousel.js"></script>
</head>

<body>
  <div id="app">
    <dv-full-screen-container>
      <header class="my-header"><span>焦煤集团驾驶舱数字看板</span></header>
      <div class="main">
        <div class="top flex justify-between">
          <div class="flex items-center justify-center">
            <img class="top-img" src="./images/top-1.png" alt="">
            <div>优化<span class="top-text">1308</span>人</div>
          </div>
          <div class="flex items-center justify-center">
            <img class="top-img" src="./images/top-2.png" alt="">
            <div>共享<span class="top-text">2000</span>人</div>
          </div>
          <div class="flex items-center justify-center">
            <img class="top-img" src="./images/top-3.png" alt="">
            <div>缓存<span class="top-text">1460</span>人</div>
          </div>
          <div class="flex items-center justify-center">
            <img class="top-img" src="./images/top-4.png" alt="">
            <div>待岗<span class="top-text">4080</span>人</div>
          </div>
        </div>
        <div class="center flex justify-between">
          <dv-border-box-8 class="center-item">
            <div class="center-title mx-auto flex flex-col justify-center">
              <div class="flex items-center items-center">
                <img src="./images/arrow.png" alt="" class="arrow">
                <span>优化池</span>
              </div>
              <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
            </div>
            <div class="center1-footer flex justify-center items-center  mx-auto">
              <div class="annular text-center"><span style="position: absolute;left: 40%;top: 0;">80%</span>
                <img src="./images/annular.png" style="width: 100%;height:100%;" alt="">
              </div>
              <div class="list  flex flex-col justify-around ">
                <div class="flex items-center ">
                  <img src="./images/center-left1.png" alt="">
                  <div>流程中人数<span>1068</span>人</div>
                </div>
                <div class="flex items-center ">
                  <img src="./images/center-left2.png" alt="">
                  <div>已出池人数<span>2000</span>人</div>
                </div>
                <div class="flex items-center ">
                  <img src="./images/center-left3.png" alt="">
                  <div>流程中人数<span>3116</span>人</div>
                </div>
              </div>
            </div>
          </dv-border-box-8>
          <dv-border-box-8 class="center-item">
            <div class="center-title mx-auto flex flex-col justify-center">
              <div class="flex items-center items-center">
                <img src="./images/arrow.png" alt="" class="arrow">
                <span>共享池</span>
              </div>
              <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
            </div>
            <div class="center2-footer mx-auto">
              <div class="flex items-center justify-around">
                <div class="flex flex-col justify-center items-center text-center">
                  <div class="center2-footer-back">106</div>
                  <span>未共享</span>
                </div>
                <div class="flex flex-col justify-center items-center text-center">
                  <div class="center2-footer-back">220</div>
                  <span>共享中</span>
                </div>
                <div class="flex flex-col justify-center items-center text-center">
                  <div class="center2-footer-back">300</div>
                  <span>已出池</span>
                </div>
              </div>
              <div class="flex items-center justify-around">
                <div class="flex flex-col justify-center items-center text-center">
                  <div class="center2-footer-back">106</div>
                  <span>共享次数</span>
                </div>
                <div class="flex flex-col justify-center items-center text-center">
                  <div class="center2-footer-back">220</div>
                  <span>共享人次</span>
                </div>
              </div>
            </div>
          </dv-border-box-8>
          <dv-border-box-8 class="center-item">
            <div class="center-title mx-auto flex flex-col justify-center">
              <div class="flex items-center items-center">
                <img src="./images/arrow.png" alt="" class="arrow">
                <span>缓冲池</span>
              </div>
              <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
            </div>
            <div class="flex center3-footer mx-auto">
              <ul class="list">
                <li class="list-item">
                  <img src="./images/center-right1.png" alt="">
                  <span>山西焦煤</span>
                  <el-progress class="flex1" style="margin: 0 10px;" percentage="80" color="#FBE139"
                    :show-text="false"></el-progress>
                  <span><i class="num" style="color: #40A9FF;">106</i>人</span>
                </li>
                <li class="list-item">
                  <img src="./images/center-right2.png" alt="">
                  <p>晋能控股</p>
                  <el-progress class="flex1" style="margin: 0 10px;" percentage="70" color="#45DAD1"
                    :show-text="false"></el-progress>
                  <span><i class="num" style="color: #627EEE;">100</i>人</span>
                </li>
                <li class="list-item">
                  <img src="./images/center-right3.png" alt="">
                  <p>潞安化工</p>
                  <el-progress class="flex1" style="margin: 0 10px;" percentage="60" color="#6682F5"
                    :show-text="false"></el-progress>
                  <span><i class="num" style="color: #41CEC6;">120</i>人</span>
                </li>
              </ul>
            </div>
          </dv-border-box-8>
        </div>
        <div class="bottom flex justify-between">
          <dv-border-box-8 class="bottom-item">
            <div class="center-title mx-auto flex flex-col justify-center">
              <div class="flex items-center items-center">
                <img src="./images/arrow.png" alt="" class="arrow">
                <span>入池、出池人数</span>
              </div>
              <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
            </div>
            <div class="aiQuality dis-flex flex-dir-column ">
              <div id="aiQuality" class="mx-auto" style="width: 100%; height: 100%"></div>
            </div>
          </dv-border-box-8>
          <dv-border-box-8 class="bottom-item">
            <div class="center-title mx-auto flex flex-col justify-center">
              <div class="flex items-center items-center">
                <img src="./images/arrow.png" alt="" class="arrow">
                <span>待岗池</span>
              </div>
              <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
            </div>
            <div class="center4-footer flex items-center justify-around mx-auto">
              <div>
                <div style="background: url('./images/bottom-right1.png') no-repeat center bottom;color:#6682F5;">2800
                </div>
                <span>终止合同人员</span>
              </div>
              <div>
                <div style="background: url('./images/bottom-right2.png') no-repeat center bottom;color:#40A9FF;">1308
                </div>
                <span>双创人员</span>
              </div>
              <div>
                <div style="background: url('./images/bottom-right3.png') no-repeat center bottom;color:#45DAD1;">1600
                </div>
                <span>待岗闲置人员</span>
              </div>
              <div>
                <div style="background: url('./images/bottom-right4.png') no-repeat center bottom;color:#B889EA;">1220
                </div>
                <span>解除合同人员</span>
              </div>
            </div>
          </dv-border-box-8>
        </div>
      </div>
      <div class="footer justify-center">
        <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
      </div>
    </dv-full-screen-container>
  </div>
  <script src="./js/cokingCoalC.js"></script>
</body>

</html>