<!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 relative">
<span>焦煤集团驾驶舱数字看板</span>
<span class="right">2023-1-16 10:23:00</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 justify-between">
<div class="flex items-center">
<img src="./images/arrow.png" alt="" class="arrow">
<span>入池、出池人数</span>
</div>
<div class="calendar flex items-center ">
<span>2023-01</span>
<img src="./images/down.png" style="width:10px;height:7px;margin-left: 5px;" alt="" class="arrow">
</div>
</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>
<div class="top-title absolute">
<div class="">入池人数<span style="color: #45DAD1;font-weight: bold;margin: 0 10px;">1000</span></div>
<div class="">出池人数<span style="color: #45DAD1;font-weight: bold;margin: 0 10px;">1800</span></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">
<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.gif') no-repeat center bottom;color:#6682F5;">2800
</div>
<span>终止合同人员</span>
</div>
<div>
<div style="background: url('./images/bottom-right2.gif') no-repeat center bottom;color:#40A9FF;">1308
</div>
<span>双创人员</span>
</div>
<div>
<div style="background: url('./images/bottom-right3.gif') no-repeat center bottom;color:#45DAD1;">1600
</div>
<span>待岗闲置人员</span>
</div>
<div>
<div style="background: url('./images/bottom-right4.gif') 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>