123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256 |
- <!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/normalize.css" /> -->
- <link rel="stylesheet" href="./styles/investHome4.css" />
- <!-- 引入js -->
- <script src="./libs/vue@2.7.10.js"></script>
- <script src="./libs/datav.min2.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>
- <span class="right">{{time}}</span>
- </header>
- <div class="main">
- <dv-border-box-8>
- <div class="overflow-hidden w-full h-full tl">
- <div class="panel-title">
- <span class="text">“四化”</span>
- </div>
- <div class="lt-bottom overflow-hidden w-full">
- <div class="overflow-hidden w-full h-full lt-bottom-left">
- <div class=" w-full h-full flex justify-center items-center">业务归核化</div>
- <div class=" w-full h-full flex justify-center items-center">治理规范化</div>
- <div class=" w-full h-full flex justify-center items-center">管理数智化</div>
- <div class=" w-full h-full flex justify-center items-center">资产证券化</div>
- </div>
- <div class="lt-bottom-right overflow-hidden w-full h-full commonBack">
- <div class="flex items-center justify-center w-full h-full overflow-hidden">
- <img class="lt-img" src="./images4/lt-1.png" alt="">
- <div class="flex flex-col " style="width:calc( 100% - 76px )">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">4000</span>户</span>
- <span>总范围总户数</span>
- </div>
- </div>
- <div class="flex items-center justify-center w-full h-full overflow-hidden">
- <img class="lt-img" src="./images4/lt-2.png" alt="">
- <div class="flex flex-col" style="width:calc( 100% - 76px )">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">3890</span>户</span>
- <span>已核定主业户数</span>
- </div>
- </div>
- <div class="flex items-center justify-center w-full h-full overflow-hidden">
- <img class="lt-img" src="./images4/lt-3.png" alt="">
- <div class="flex flex-col " style="width:calc( 100% - 76px )">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">97.25</span>%</span>
- <span>完成比例</span>
- </div>
- </div>
- <div class="flex items-center justify-center w-full h-full overflow-hidden">
- <img class="lt-img" src="./images4/lt-4.png" alt="">
- <div class="flex flex-col " style="width:calc( 100% - 76px )">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">872.15</span>%</span>
- <span>主业项目投资总额</span>
- </div>
- </div>
- <div class="flex items-center justify-center w-full h-full overflow-hidden">
- <img class="lt-img" src="./images4/lt-5.png" alt="">
- <div class="flex flex-col " style="width:calc( 100% - 76px )">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">83.79</span>%</span>
- <span>“两非”剥离完成率</span>
- </div>
- </div>
- <div class="flex items-center justify-center w-full h-full overflow-hidden">
- <img class="lt-img" src="./images4/lt-6.png" alt="">
- <div class="flex flex-col " style="width:calc( 100% - 76px )">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">76.12</span>%</span>
- <span>“两资”清退完成率</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </dv-border-box-8>
- <dv-border-box-8>
- <div class="overflow-hidden w-full h-full bl">
- <div class="panel-title">
- <span class="text">煤炭保供/转型</span>
- </div>
- <div class="rt-bottom overflow-hidden w-full">
- <div class="rt-bottom-top overflow-hidden w-full h-full commonBack">
- <div class="overflow-hidden w-full h-full flex items-center justify-center">
- <img class="tr-img" src="./images4/tr-1.png" alt="">
- <div class="flex flex-col " style="width:calc( 100% - 50px )">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">13.07</span>亿吨</span>
- <span>全年产量</span>
- </div>
- </div>
- <div class="overflow-hidden w-full h-full flex items-center justify-center">
- <img class="tr-img" src="./images4/tr-1.png" alt="">
- <div class="flex flex-col " style="width:calc( 100% - 50px )">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">8.7</span>%</span>
- <span>增长比例</span>
- </div>
- </div>
- <div class="overflow-hidden w-full h-full flex items-center justify-center">
- <img class="tr-img" src="./images4/tr-1.png" alt="">
- <div class="flex flex-col " style="width:calc( 100% - 50px )">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">6.2</span>亿吨</span>
- <span>保供产能</span>
- </div>
- </div>
- <div class="overflow-hidden w-full h-full flex items-center justify-center">
- <img class="tr-img" src="./images4/tr-1.png" alt="">
- <div class="flex flex-col " style="width:calc( 100% - 50px )">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">4000</span>户</span>
- <span>总范围总户数</span>
- </div>
- </div>
- </div>
- <div class="rt-bottom-bottom overflow-hidden w-full h-full">
- <div class="overflow-hidden w-full h-full commonBack">
- <div ref="echart1" class="w-full h-full"></div>
- </div>
- <div class="rt-bottom-bottom-c overflow-hidden w-full h-full commonBack">
- <div class="flex items-center justify-center overflow-hidden w-full h-full relative">
- <img class="tr-img" src="./images4/tr-1.png" alt="">
- <div class="flex flex-col " style="width:calc( 100% - 50px )">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">37</span>座</span>
- <span>智能化煤矿累计值</span>
- <div class="arrow absolute flex items-center justify-center">
- <img src="./images4/arrow-g.png" alt="">
- <span>17.2%</span>
- </div>
- </div>
- </div>
- <div class="flex items-center justify-center overflow-hidden w-full h-full relative">
- <img class="tr-img" src="./images4/tr-1.png" alt="">
- <div class="flex flex-col " style="width:calc( 100% - 50px )">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">993</span>处</span>
- <span>智能化采掘工作面</span>
- <div class="arrow absolute flex items-center justify-center">
- <img src="./images4/arrow-r.png" alt="">
- <span>5.78%</span>
- </div>
- </div>
- </div>
- </div>
- <div class="overflow-hidden w-full h-full commonBack">
- <div ref="echart2" class="w-full h-full" style="width:100%;height: 100%;"></div>
- </div>
- </div>
- </div>
- </div>
- </dv-border-box-8>
- <dv-border-box-8>
- <div class="overflow-hidden w-full h-full bl">
- <div class="panel-title relative">
- <span class="text">两个转型</span>
- <div class="right-title absolute">2023年度投资计划</div>
- </div>
- <div class="bl-bottom overflow-hidden w-full">
- <div class="bl-bottom-top overflow-hidden w-full w-full">
- <div class="commonBack flex items-center justify-center">
- <div class="flex flex-col " style="width:30%;margin-right: 10%;">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">680.29</span>亿</span>
- <span>产业转型总投资额</span>
- </div>
- <div class="flex flex-col " style="width:15%">
- <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">260</span>个</span>
- <span>项目数量</span>
- </div>
- </div>
- <div class="commonBack flex items-center justify-center">
- <div class="flex flex-col " style="width:30%;margin-right: 10%;">
- <span style="color: #45DAD1;"><span style="font-size:22px;font-weight: bold;">28.11</span>亿</span>
- <span>数字化转型总投资额</span>
- </div>
- <div class="flex flex-col " style="width:15%">
- <span style="color: #45DAD1;"><span style="font-size:22px;font-weight: bold;">57</span>个</span>
- <span>项目数量</span>
- </div>
- </div>
- </div>
- <div class="commonBack bl-bottom-bottom">
- <div ref="echart4" class="w-full h-full" style="width:100%;height: 100%;"></div>
- <div ref="echart5" class="w-full h-full" style="width:100%;height: 100%;"></div>
- </div>
- </div>
- </div>
- </dv-border-box-8>
- <dv-border-box-8>
- <div class="overflow-hidden w-full h-full br">
- <div class="panel-title">
- <span class="text">五个一体化</span>
- </div>
- <div class=" overflow-hidden w-full rb-bottom">
- <div class="overflow-hidden w-full h-full commonBack">
- <div ref="echart3" class="w-full h-full"></div>
- </div>
- <div class="overflow-hidden w-full h-full commonBack">
- <div class="rank text-right">
- <span>按进度排序</span>
- </div>
- <div class="schedule overflow-hidden w-full">
- <div class="flex justify-center flex-col">
- <div class="flex justify-between item" style="padding-right: 20px;">
- <span>煤炭和煤电一体化</span>
- <span>项目数:27个</span>
- </div>
- <el-progress percentage="80" color="#FBE139" :format="format"></el-progress>
- </div>
- <div class="flex justify-center flex-col">
- <div class="flex justify-between item" style="padding-right: 20px;">
- <span>煤炭和煤电一体化</span>
- <span>项目数:27个</span>
- </div>
- <el-progress percentage="80" color="#FBE139" :format="format"></el-progress>
- </div>
- <div class="flex justify-center flex-col">
- <div class="flex justify-between item" style="padding-right: 20px;">
- <span>煤炭和煤电一体化</span>
- <span>项目数:27个</span>
- </div>
- <el-progress percentage="80" color="#FBE139" :format="format"></el-progress>
- </div>
- <div class="flex justify-center flex-col">
- <div class="flex justify-between item" style="padding-right: 20px;">
- <span>煤炭和煤电一体化</span>
- <span>项目数:27个</span>
- </div>
- <el-progress percentage="80" color="#FBE139" :format="format"></el-progress>
- </div>
- <div class="flex justify-center flex-col">
- <div class="flex justify-between item" style="padding-right: 20px;">
- <span>煤炭和煤电一体化</span>
- <span>项目数:27个</span>
- </div>
- <el-progress percentage="80" color="#FBE139" :format="format"></el-progress>
- </div>
- </div>
- </div>
- </div>
- </div>
- </dv-border-box-8>
- </div>
- </dv-full-screen-container>
- </div>
- <script src="./js/investHome4.js"></script>
- </body>
- </html>
|