<!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/cokingCoalD.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 relative">
        <span>焦煤集团驾驶舱数字看板</span>
        <span class="right">2023-1-16 10:23:00</span>
      </header>
      <div class="main">
        <dv-border-box-8 class="center-item relative">
          <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 id="budget" style="width: 100%; height: 100%;"></div>
          </div>
          <div class="top-title1 absolute">集团公司均衡预算使用<span
              style="color: #69C0FF;font-weight: bold;margin: 0 10px;">56%</span></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="center1-footer flex justify-center items-center  mx-auto">
            <div id="salary" style="width: 100%; height: 100%;"></div>
          </div>
          <div class="top-title1 absolute">集团公司月度平均工资<span style="color: #B889EA;font-weight: bold;margin: 0 10px;">4680
              元</span></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="center1-footer flex justify-center items-end  mx-auto">
            <dv-scroll-board :config="config5" style="width: 100%; height: 90%" />
          </div>
          <div class="top-title1 absolute">集团公司增幅<span
              style="color: #45DAD1;font-weight: bold;margin: 0 10px;">63%</span></div>
        </dv-border-box-8> <dv-border-box-8 class="center-item">
          <div class="center-title mx-auto flex flex-col justify-center " style="margin-bottom: 0 !important;">
            <div class="flex 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" style="height: 80%;">
            <ul class="list flex flex-col justify-between">
              <li class="list-item ">
                <div class="serial shrink-0">1</div>
                <div class="flex items-center justify-between">
                  <span style="color: #417FAE;width: 200px;">集团公司<span
                      style="margin-left: 10px;color: #fff;">完成:1000万元/人</span></span>
                  <el-progress class="flex1" style="margin: 0 10px;" percentage="80" color="#FBE139"></el-progress>
                </div>
              </li>
              <li class="list-item">
                <div class="serial shrink-0">2</div>
                <div class="flex items-center justify-between">
                  <span style="color: #417FAE;width: 200px;">山焦西山<span
                      style="margin-left: 10px;color: #fff;">完成:980万元/人</span></span>
                  <el-progress class="flex1" style="margin: 0 10px;" percentage="68" color="#FBE139"></el-progress>
                </div>
              </li>
              <li class="list-item">
                <div class="serial shrink-0">3</div>
                <div class="flex items-center justify-between">
                  <span style="color: #417FAE;width: 200px;">山焦汾西<span
                      style="margin-left: 10px;color: #fff;">完成:1000万元/人</span></span>
                  <el-progress class="flex1" style="margin: 0 10px;" percentage="35" color="#FBE139"></el-progress>
                </div>
              </li>
              <li class="list-item">
                <div class="serial shrink-0">4</div>
                <div class="flex items-center justify-between">
                  <span style="color: #417FAE;width: 200px;">山焦霍州<span
                      style="margin-left: 10px;color: #fff;">完成:1000万元/人</span></span>
                  <el-progress class="flex1" style="margin: 0 10px;" percentage="97" color="#FBE139"></el-progress>
                </div>
              </li>
              <li class="list-item">
                <div class="serial shrink-0">5</div>
                <div class="flex items-center justify-between">
                  <span style="color: #417FAE;width: 200px;">山焦山煤<span
                      style="margin-left: 10px;color: #fff;">完成:1000万元/人</span></span>
                  <el-progress class="flex1" style="margin: 0 10px;" percentage="45" color="#FBE139"></el-progress>
                </div>
              </li>
            </ul>
          </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="aiQuality dis-flex flex-dir-column ">
            <div id="aiQuality1" class="mx-auto" style="width: 100%; height: 100%"></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="aiQuality dis-flex flex-dir-column ">
            <div id="aiQuality2" class="mx-auto" style="width: 100%; height: 100%"></div>
          </div>
        </dv-border-box-8>
      </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/cokingCoalD.js"></script>
</body>

</html>