cokingCoalD.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1" />
  7. <!-- 引入样式 -->
  8. <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
  9. <link rel="stylesheet" href="./styles/cokingCoalD.css" />
  10. <!-- 引入js -->
  11. <script src="./libs/vue@2.7.10.js"></script>
  12. <script src="./libs/datav.min.js"></script>
  13. <script src="./libs/echarts.min.js"></script>
  14. <script src="./libs/element-ui@2.15.9.js"></script>
  15. <script src="./libs/axios.min.js"></script>
  16. <script src="./js/request.js"></script>
  17. <script src="./libs/echarts-tooltip-carousel.js"></script>
  18. </head>
  19. <body>
  20. <div id="app">
  21. <dv-full-screen-container>
  22. <header class="my-header relative">
  23. <span>焦煤集团驾驶舱数字看板</span>
  24. <span class="right">2023-1-16 10:23:00</span>
  25. </header>
  26. <div class="main">
  27. <dv-border-box-8 class="center-item relative">
  28. <div class="center-title mx-auto flex flex-col justify-center">
  29. <div class="flex items-center items-center">
  30. <img src="./images/arrow.png" alt="" class="arrow">
  31. <span>工资总额均衡预算使用情况</span>
  32. </div>
  33. <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
  34. </div>
  35. <div class="center1-footer flex justify-center items-center mx-auto">
  36. <div id="budget" style="width: 100%; height: 100%;"></div>
  37. </div>
  38. <div class="top-title1 absolute">集团公司均衡预算使用<span
  39. style="color: #69C0FF;font-weight: bold;margin: 0 10px;">56%</span></div>
  40. </dv-border-box-8>
  41. <dv-border-box-8 class="center-item">
  42. <div class="center-title mx-auto flex flex-col justify-center">
  43. <div class="flex items-center items-center">
  44. <img src="./images/arrow.png" alt="" class="arrow">
  45. <span>月度平均工资</span>
  46. </div>
  47. <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
  48. </div>
  49. <div class="center1-footer flex justify-center items-center mx-auto">
  50. <div id="salary" style="width: 100%; height: 100%;"></div>
  51. </div>
  52. <div class="top-title1 absolute">集团公司月度平均工资<span style="color: #B889EA;font-weight: bold;margin: 0 10px;">4680
  53. 元</span></div>
  54. </dv-border-box-8> <dv-border-box-8 class="center-item">
  55. <div class="center-title mx-auto flex flex-col justify-center">
  56. <div class="flex items-center items-center">
  57. <img src="./images/arrow.png" alt="" class="arrow">
  58. <span>月度平均工资涨幅</span>
  59. </div>
  60. <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
  61. </div>
  62. <div class="center1-footer flex justify-center items-end mx-auto">
  63. <dv-scroll-board :config="config5" style="width: 100%; height: 90%" />
  64. </div>
  65. <div class="top-title1 absolute">集团公司增幅<span
  66. style="color: #45DAD1;font-weight: bold;margin: 0 10px;">63%</span></div>
  67. </dv-border-box-8> <dv-border-box-8 class="center-item">
  68. <div class="center-title mx-auto flex flex-col justify-center " style="margin-bottom: 0 !important;">
  69. <div class="flex items-center">
  70. <img src="./images/arrow.png" alt="" class="arrow">
  71. <span>全员劳动生产率</span>
  72. </div>
  73. <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
  74. </div>
  75. <div class="center1-footer flex justify-center items-center mx-auto" style="height: 80%;">
  76. <ul class="list flex flex-col justify-between">
  77. <li class="list-item ">
  78. <div class="serial shrink-0">1</div>
  79. <div class="flex items-center justify-between">
  80. <span style="color: #417FAE;width: 200px;">集团公司<span
  81. style="margin-left: 10px;color: #fff;">完成:1000万元/人</span></span>
  82. <el-progress class="flex1" style="margin: 0 10px;" percentage="80" color="#FBE139"></el-progress>
  83. </div>
  84. </li>
  85. <li class="list-item">
  86. <div class="serial shrink-0">2</div>
  87. <div class="flex items-center justify-between">
  88. <span style="color: #417FAE;width: 200px;">山焦西山<span
  89. style="margin-left: 10px;color: #fff;">完成:980万元/人</span></span>
  90. <el-progress class="flex1" style="margin: 0 10px;" percentage="68" color="#FBE139"></el-progress>
  91. </div>
  92. </li>
  93. <li class="list-item">
  94. <div class="serial shrink-0">3</div>
  95. <div class="flex items-center justify-between">
  96. <span style="color: #417FAE;width: 200px;">山焦汾西<span
  97. style="margin-left: 10px;color: #fff;">完成:1000万元/人</span></span>
  98. <el-progress class="flex1" style="margin: 0 10px;" percentage="35" color="#FBE139"></el-progress>
  99. </div>
  100. </li>
  101. <li class="list-item">
  102. <div class="serial shrink-0">4</div>
  103. <div class="flex items-center justify-between">
  104. <span style="color: #417FAE;width: 200px;">山焦霍州<span
  105. style="margin-left: 10px;color: #fff;">完成:1000万元/人</span></span>
  106. <el-progress class="flex1" style="margin: 0 10px;" percentage="97" color="#FBE139"></el-progress>
  107. </div>
  108. </li>
  109. <li class="list-item">
  110. <div class="serial shrink-0">5</div>
  111. <div class="flex items-center justify-between">
  112. <span style="color: #417FAE;width: 200px;">山焦山煤<span
  113. style="margin-left: 10px;color: #fff;">完成:1000万元/人</span></span>
  114. <el-progress class="flex1" style="margin: 0 10px;" percentage="45" color="#FBE139"></el-progress>
  115. </div>
  116. </li>
  117. </ul>
  118. </div>
  119. </dv-border-box-8> <dv-border-box-8 class="center-item">
  120. <div class="center-title mx-auto flex flex-col justify-center">
  121. <div class="flex items-center items-center">
  122. <img src="./images/arrow.png" alt="" class="arrow">
  123. <span>原煤生产人员效率</span>
  124. </div>
  125. <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
  126. </div>
  127. <div class="aiQuality dis-flex flex-dir-column ">
  128. <div id="aiQuality1" class="mx-auto" style="width: 100%; height: 100%"></div>
  129. </div>
  130. </dv-border-box-8> <dv-border-box-8 class="center-item">
  131. <div class="center-title mx-auto flex flex-col justify-center">
  132. <div class="flex items-center items-center">
  133. <img src="./images/arrow.png" alt="" class="arrow">
  134. <span>原煤在岗人员效率</span>
  135. </div>
  136. <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
  137. </div>
  138. <div class="aiQuality dis-flex flex-dir-column ">
  139. <div id="aiQuality2" class="mx-auto" style="width: 100%; height: 100%"></div>
  140. </div>
  141. </dv-border-box-8>
  142. </div>
  143. <div class="footer justify-center">
  144. <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
  145. </div>
  146. </dv-full-screen-container>
  147. </div>
  148. <script src="./js/cokingCoalD.js"></script>
  149. </body>
  150. </html>