Ver código fonte

大屏新增

fengxu 2 anos atrás
pai
commit
8ac050c156
31 arquivos alterados com 1392 adições e 87 exclusões
  1. BIN
      JMshujudaping23-08-03.zip
  2. 317 0
      cokingCoal/humanResources.html
  3. BIN
      cokingCoal/images/humanResources/bg.png
  4. BIN
      cokingCoal/images/humanResources/btn_off.png
  5. BIN
      cokingCoal/images/humanResources/btn_on.png
  6. BIN
      cokingCoal/images/humanResources/cc67b0bf-2240-4095-be9d-5f3def394b8a.png
  7. BIN
      cokingCoal/images/humanResources/examination.png
  8. BIN
      cokingCoal/images/humanResources/icon.png
  9. BIN
      cokingCoal/images/humanResources/icon1.png
  10. BIN
      cokingCoal/images/humanResources/icon2.png
  11. BIN
      cokingCoal/images/humanResources/icon3.png
  12. BIN
      cokingCoal/images/humanResources/icon4.png
  13. BIN
      cokingCoal/images/humanResources/icon5.png
  14. BIN
      cokingCoal/images/humanResources/s_title_bg.png
  15. BIN
      cokingCoal/images/humanResources/time.png
  16. BIN
      cokingCoal/images/humanResources/times.png
  17. BIN
      cokingCoal/images/humanResources/title.png
  18. BIN
      cokingCoal/images/humanResources/tree.png
  19. BIN
      cokingCoal/images/humanResources/user.png
  20. BIN
      cokingCoal/images/newImage/5c6d9f2b-2325-4824-9c77-57c99bef749e.png
  21. BIN
      cokingCoal/images/newImage/c905a4b1-a8ed-4542-ba65-7825534708ff.png
  22. BIN
      cokingCoal/images/newImage/cycle.png
  23. BIN
      cokingCoal/images/newImage/s_title.png
  24. 98 40
      cokingCoal/index.html
  25. 7 2
      cokingCoal/js/dataA.js
  26. 419 0
      cokingCoal/js/humanResources.js
  27. 44 32
      cokingCoal/js/newIndex.js
  28. 0 0
      cokingCoal/libs/datav.min.js
  29. 0 0
      cokingCoal/libs/vue-seamless-scroll.min.js
  30. 460 0
      cokingCoal/styles/humanResources.css
  31. 47 13
      cokingCoal/styles/newIndex.css

BIN
JMshujudaping23-08-01.zip → JMshujudaping23-08-03.zip


+ 317 - 0
cokingCoal/humanResources.html

@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <!-- 引入样式 -->
+    <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
+    <link rel="stylesheet" href="./styles/humanResources.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="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.common.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>
+    <script src="./js/dataA.js"></script>
+    <script src="./js/mapData.js"></script>
+    <script src="./libs/vue-seamless-scroll.min.js"></script>
+    <!-- highchair -->
+    <script src="./libs/highcharts.js"></script>
+    <script src="./libs/highcharts3d.js"></script>
+</head>
+
+<body>
+    <div id="app" class="app_box">
+        <div class="page_title">{{ title }}</div>
+        <div class="page_main">
+            <div class="page_main_left flex_column">
+                <div class="left_top">
+                    <div class="title">Ⅰ.岗位发布</div>
+                    <div class="main flex_sp">
+                        <div class="main_item">
+                            <vue-seamless-scroll :data="listData" class="warp" :classOption="classOption">
+                                <ul class="item">
+                                    <li>Vuescroll 一个功能强大,有多种模式的基于Vue.js的滚动条插件,它的原理是创建 div
+                                        用于包裹要滚动的内容,操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。
+
+                                        设计它的目的是用来美化和增强你的滚动条。
+
+                                        你可以通过更改配置来选择不同的模式:
+
+                                        native 模式: 类似于原生的滚动条,但是可以自定义滚动条样式,使用于 PC 端用户。
+                                        slide 模式: 允许你用手指或鼠标滑动内容, 可以滑动超出边界范围,适用于移动端端用户。
+                                        你也可以通过更改配置滚动条的样式,包括:
+
+                                        透明度
+                                        高度/宽度
+                                        位置
+                                        背景色
+                                        是否保持显示
+                                        想了解更多请访问官方网站指南页面
+                                        如果你不满足上述特性,想要扩展特性的话,请考虑贡献代码。
+
+                                        总的来说,Vuescroll 不仅仅只一个滚动条,
+                                        你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。下面是部分预览效果。Vuescroll
+                                        一个功能强大,有多种模式的基于Vue.js的滚动条插件,它的原理是创建 div
+                                        用于包裹要滚动的内容,操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。
+
+                                        设计它的目的是用来美化和增强你的滚动条。
+
+                                        你可以通过更改配置来选择不同的模式:
+
+                                        native 模式: 类似于原生的滚动条,但是可以自定义滚动条样式,使用于 PC 端用户。
+                                        slide 模式: 允许你用手指或鼠标滑动内容, 可以滑动超出边界范围,适用于移动端端用户。
+                                        你也可以通过更改配置滚动条的样式,包括:
+
+                                        透明度
+                                        高度/宽度
+                                        位置
+                                        背景色
+                                        是否保持显示
+                                        想了解更多请访问官方网站指南页面
+                                        如果你不满足上述特性,想要扩展特性的话,请考虑贡献代码。
+
+                                        总的来说,Vuescroll 不仅仅只一个滚动条,
+                                        你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。下面是部分预览效果。Vuescroll
+                                        一个功能强大,有多种模式的基于Vue.js的滚动条插件,它的原理是创建 div
+                                        用于包裹要滚动的内容,操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。
+
+                                        设计它的目的是用来美化和增强你的滚动条。
+
+                                        你可以通过更改配置来选择不同的模式:
+
+                                        native 模式: 类似于原生的滚动条,但是可以自定义滚动条样式,使用于 PC 端用户。
+                                        slide 模式: 允许你用手指或鼠标滑动内容, 可以滑动超出边界范围,适用于移动端端用户。
+                                        你也可以通过更改配置滚动条的样式,包括:
+
+                                        透明度
+                                        高度/宽度
+                                        位置
+                                        背景色
+                                        是否保持显示
+                                        想了解更多请访问官方网站指南页面
+                                        如果你不满足上述特性,想要扩展特性的话,请考虑贡献代码。
+
+                                        总的来说,Vuescroll 不仅仅只一个滚动条,
+                                        你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。下面是部分预览效果。Vuescroll
+                                        一个功能强大,有多种模式的基于Vue.js的滚动条插件,它的原理是创建 div
+                                        用于包裹要滚动的内容,操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。
+
+                                        设计它的目的是用来美化和增强你的滚动条。
+
+                                        你可以通过更改配置来选择不同的模式:
+
+                                        native 模式: 类似于原生的滚动条,但是可以自定义滚动条样式,使用于 PC 端用户。
+                                        slide 模式: 允许你用手指或鼠标滑动内容, 可以滑动超出边界范围,适用于移动端端用户。
+                                        你也可以通过更改配置滚动条的样式,包括:
+
+                                        透明度
+                                        高度/宽度
+                                        位置
+                                        背景色
+                                        是否保持显示
+                                        想了解更多请访问官方网站指南页面
+                                        如果你不满足上述特性,想要扩展特性的话,请考虑贡献代码。
+
+                                        总的来说,Vuescroll 不仅仅只一个滚动条,
+                                        你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。下面是部分预览效果。Vuescroll
+                                        一个功能强大,有多种模式的基于Vue.js的滚动条插件,它的原理是创建 div
+                                        用于包裹要滚动的内容,操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。
+
+                                        设计它的目的是用来美化和增强你的滚动条。
+
+                                        你可以通过更改配置来选择不同的模式:
+
+                                        native 模式: 类似于原生的滚动条,但是可以自定义滚动条样式,使用于 PC 端用户。
+                                        slide 模式: 允许你用手指或鼠标滑动内容, 可以滑动超出边界范围,适用于移动端端用户。
+                                        你也可以通过更改配置滚动条的样式,包括:
+
+                                        透明度
+                                        高度/宽度
+                                        位置
+                                        背景色
+                                        是否保持显示
+                                        想了解更多请访问官方网站指南页面
+                                        如果你不满足上述特性,想要扩展特性的话,请考虑贡献代码。
+
+                                        总的来说,Vuescroll 不仅仅只一个滚动条,
+                                        你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。下面是部分预览效果。Vuescroll
+                                        一个功能强大,有多种模式的基于Vue.js的滚动条插件,它的原理是创建 div
+                                        用于包裹要滚动的内容,操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。
+
+                                        设计它的目的是用来美化和增强你的滚动条。
+
+                                        你可以通过更改配置来选择不同的模式:
+
+                                        native 模式: 类似于原生的滚动条,但是可以自定义滚动条样式,使用于 PC 端用户。
+                                        slide 模式: 允许你用手指或鼠标滑动内容, 可以滑动超出边界范围,适用于移动端端用户。
+                                        你也可以通过更改配置滚动条的样式,包括:
+
+                                        透明度
+                                        高度/宽度
+                                        位置
+                                        背景色
+                                        是否保持显示
+                                        想了解更多请访问官方网站指南页面
+                                        如果你不满足上述特性,想要扩展特性的话,请考虑贡献代码。
+
+                                        总的来说,Vuescroll 不仅仅只一个滚动条,
+                                        你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。下面是部分预览效果。Vuescroll
+                                        一个功能强大,有多种模式的基于Vue.js的滚动条插件,它的原理是创建 div
+                                        用于包裹要滚动的内容,操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。
+
+                                        设计它的目的是用来美化和增强你的滚动条。
+
+                                        你可以通过更改配置来选择不同的模式:
+
+                                        native 模式: 类似于原生的滚动条,但是可以自定义滚动条样式,使用于 PC 端用户。
+                                        slide 模式: 允许你用手指或鼠标滑动内容, 可以滑动超出边界范围,适用于移动端端用户。
+                                        你也可以通过更改配置滚动条的样式,包括:
+
+                                        透明度
+                                        高度/宽度
+                                        位置
+                                        背景色
+                                        是否保持显示
+                                        想了解更多请访问官方网站指南页面
+                                        如果你不满足上述特性,想要扩展特性的话,请考虑贡献代码。
+
+                                        总的来说,Vuescroll 不仅仅只一个滚动条,
+                                        你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。下面是部分预览效果。Vuescroll
+                                        一个功能强大,有多种模式的基于Vue.js的滚动条插件,它的原理是创建 div
+                                        用于包裹要滚动的内容,操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。
+
+                                        设计它的目的是用来美化和增强你的滚动条。
+
+                                        你可以通过更改配置来选择不同的模式:
+
+                                        native 模式: 类似于原生的滚动条,但是可以自定义滚动条样式,使用于 PC 端用户。
+                                        slide 模式: 允许你用手指或鼠标滑动内容, 可以滑动超出边界范围,适用于移动端端用户。
+                                        你也可以通过更改配置滚动条的样式,包括:
+
+                                        透明度
+                                        高度/宽度
+                                        位置
+                                        背景色
+                                        是否保持显示
+                                        想了解更多请访问官方网站指南页面
+                                        如果你不满足上述特性,想要扩展特性的话,请考虑贡献代码。
+
+                                        总的来说,Vuescroll 不仅仅只一个滚动条, 你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。下面是部分预览效果。</li>
+                                </ul>
+                            </vue-seamless-scroll>
+                        </div>
+                        <div class="main_item flex_column">
+                            <div :class="classChange?'item_content_6':'item_content_6_false'">
+                                <dv-scroll-board id="itemContent" :config="config1" style="width: 100%; height: 100%" />
+                            </div>
+                            <div class="item_content_4 flex_column">
+                                <div class="content_4_top flex_column">
+                                    <div class="content_4_title flex">
+                                        <div class="btn_on">招聘岗位</div>
+                                        <div class="btn_off">招聘岗位种类</div>
+                                    </div>
+                                    <div class="content_4_time flex">
+                                        <div class="time flex">
+                                            <span>2022-07</span>
+                                            <span class="img_class">
+                                                <img src="./images/humanResources/icon.png" alt="">
+                                            </span>
+                                        </div>
+                                        <div style="margin: 0 10px;">~</div>
+                                        <div class="time flex">
+                                            <span>2022-07</span>
+                                            <span class="img_class">
+                                                <img src="./images/humanResources/icon.png" alt="">
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="content_4_btm">
+                                    <dv-scroll-board @scroll-change="scrollChange" :config="config2"
+                                        style="width: 100%; height: 100%" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="left_btm">
+                    <div class="title">Ⅱ.简历投递</div>
+                    <div class="main flex_sp">
+                        <div class="main_item">
+                            <dv-scroll-board :config="configMark" style="width: 100%; height: 100%" />
+                        </div>
+                        <div class="main_item"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="page_main_center">
+                <img class="page_main_center_image" src="./images/humanResources/cc67b0bf-2240-4095-be9d-5f3def394b8a.png" alt="">
+                <div class="center_top flex_sp">
+                    <div class="center_top_item flex" v-for="(item, index) in mainList" :key="index">
+                        <div class="center_top_image">
+                            <img :src="item.icon" alt="">
+                        </div>
+                        <div class="center_top_info flex_column">
+                            <span class="num">{{ item.value }} <span>{{ item.unit }}</span> </span>
+                            <span class="name">{{ item.name }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="center_main">
+                    <div class="center_main_item" v-for="(item, index) in treeList" :key="index" :style="item.flag?item.onStyle:item.style">
+                        <span>{{ item.name }}</span>
+                    </div>
+
+                </div>
+            </div>
+            <div class="page_main_right flex_column">
+                <div class="right_top">
+                    <div class="title">Ⅲ.资格审查</div>
+                    <div class="main flex_sp">
+                        <div class="main_item" style="background: none;">
+
+                        </div>
+                        <div class="main_item" style="background: none;"></div>
+                    </div>
+                </div>
+                <div class="right_main">
+                    <div class="title">Ⅳ.综合测评</div>
+                    <div class="main flex_sp">
+                        <div class="main_item flex_column" style="background: none;">
+                            <div class="main_item_title">笔试安排</div>
+                            <div class="main_item_main">
+                                <dv-scroll-board :config="configInterview" style="width: 100%; height: 100%" />
+                            </div>
+                        </div>
+                        <div class="main_item flex_column" style="background: none;">
+                            <div class="main_item_title">面试安排</div>
+                            <div class="main_item_main">
+                                <dv-scroll-board :config="configWritten" style="width: 100%; height: 100%" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="right_btm">
+                    <div class="title">Ⅴ.录用公示</div>
+                    <div class="main flex_column">
+                        <div class="main_item_top"></div>
+                        <div class="main_item_btm"></div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class="page_btm">
+            <div class="echarts_dom" ref="pageBtm"></div>
+        </div>
+    </div>
+    <script src="./js/humanResources.js"></script>
+</body>
+
+</html>

BIN
cokingCoal/images/humanResources/bg.png


BIN
cokingCoal/images/humanResources/btn_off.png


BIN
cokingCoal/images/humanResources/btn_on.png


BIN
cokingCoal/images/humanResources/cc67b0bf-2240-4095-be9d-5f3def394b8a.png


BIN
cokingCoal/images/humanResources/examination.png


BIN
cokingCoal/images/humanResources/icon.png


BIN
cokingCoal/images/humanResources/icon1.png


BIN
cokingCoal/images/humanResources/icon2.png


BIN
cokingCoal/images/humanResources/icon3.png


BIN
cokingCoal/images/humanResources/icon4.png


BIN
cokingCoal/images/humanResources/icon5.png


BIN
cokingCoal/images/humanResources/s_title_bg.png


BIN
cokingCoal/images/humanResources/time.png


BIN
cokingCoal/images/humanResources/times.png


BIN
cokingCoal/images/humanResources/title.png


BIN
cokingCoal/images/humanResources/tree.png


BIN
cokingCoal/images/humanResources/user.png


BIN
cokingCoal/images/newImage/5c6d9f2b-2325-4824-9c77-57c99bef749e.png


BIN
cokingCoal/images/newImage/c905a4b1-a8ed-4542-ba65-7825534708ff.png


BIN
cokingCoal/images/newImage/cycle.png


BIN
cokingCoal/images/newImage/s_title.png


+ 98 - 40
cokingCoal/index.html

@@ -32,9 +32,9 @@
         <div class="box_item_main">
             <div class="box_left">
                 <div class="left_item" style="padding: 0;">
-                    <dv-border-box-6 :color="['#2169a3','#277099']"
+                    <dv-border-box-12 :color="['#2169a3','#277099']"
                         style="padding: 10px 40px 30px;box-sizing: border-box;">
-                        <div class="title_else" style="margin-bottom: 0;"><span>组织架构</span></div>
+                        <div class="title_else flex_sb" style="margin-bottom: 0;"><span>组织架构</span></div>
                         <div class="left_main">
                             <div class="left_main_top">
                                 <div class="left_main_top_left flex_column">
@@ -46,7 +46,10 @@
                                             <div class="title" style="line-height: 57px;">组织分布</div>
                                         </div>
                                         <div class="line">
-                                            <img src="./images/line.png" alt="">
+                                            <!-- <img src="./images/line.png" alt=""> -->
+                                            <dv-decoration-2 style="width:100%;height:10px;margin-top: 10px;"
+                                                :color="['#1275ba','green']" :dur="8" />
+
                                         </div>
                                     </div>
                                     <div class="echarts_6">
@@ -79,7 +82,10 @@
                                             <div class="title">产业分布</div>
                                         </div>
                                         <div class="line">
-                                            <img src="./images/line.png" alt="">
+                                            <!-- <img src="./images/line.png" alt=""> -->
+                                            <dv-decoration-2 style="width:100%;height:10px;margin-top: 10px;"
+                                                :color="['#1275ba','green']" :dur="8" />
+
                                         </div>
                                     </div>
                                     <div class="echarts" style="height: calc(100% - 65px);" ref="industry"></div>
@@ -89,10 +95,10 @@
                                 <dv-scroll-board :config="configOrg" style="width: 100%; height: 100%" />
                             </div>
                         </div>
-                    </dv-border-box-6>
+                    </dv-border-box-12>
                 </div>
                 <div class="left_item" style="height: calc(50% - 15px);">
-                    <dv-border-box-6 :color="['#2169a3','#277099']"
+                    <dv-border-box-12 :color="['#2169a3','#277099']"
                         style="padding: 10px 40px 30px;box-sizing: border-box;">
                         <div class="title_else"><span>人员结构</span></div>
                         <div class="left_main_else">
@@ -129,7 +135,10 @@
                                             <div class="title">从业人员类别</div>
                                         </div>
                                         <div class="line">
-                                            <img src="./images/line.png" alt="">
+                                            <!-- <img src="./images/line.png" alt=""> -->
+                                            <dv-decoration-2 style="width:100%;height:10px;margin-top: 10px;"
+                                                :color="['#1275ba','green']" :dur="8" />
+
                                         </div>
                                     </div>
                                     <div class="echarts_else flex_column">
@@ -169,7 +178,10 @@
                                             <div class="title">三序列人员</div>
                                         </div>
                                         <div class="line">
-                                            <img src="./images/line.png" alt="">
+                                            <!-- <img src="./images/line.png" alt=""> -->
+                                            <dv-decoration-2 style="width:100%;height:10px;margin-top: 10px;"
+                                                :color="['#1275ba','green']" :dur="8" />
+
                                         </div>
                                     </div>
                                     <div class="echarts_else" ref="sequence"></div>
@@ -183,7 +195,10 @@
                                             <div class="title">年龄和工龄</div>
                                         </div>
                                         <div class="line">
-                                            <img src="./images/line.png" alt="">
+                                            <!-- <img src="./images/line.png" alt=""> -->
+                                            <dv-decoration-2 style="width:100%;height:10px;margin-top: 10px;"
+                                                :color="['#1275ba','green']" :dur="8" />
+
                                         </div>
                                     </div>
                                     <div class="echarts_else flex_column" style="position: relative;">
@@ -203,7 +218,7 @@
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="echarts_else_btm">
+                                        <div class="echarts_else_btm" style="pointer-events: none;">
                                             <div class="echarts" ref="serviceAge"></div>
                                         </div>
                                         <div class="maek_none"></div>
@@ -221,7 +236,10 @@
                                             <div class="title">学历结构</div>
                                         </div>
                                         <div class="line">
-                                            <img src="./images/line.png" alt="">
+                                            <!-- <img src="./images/line.png" alt=""> -->
+                                            <dv-decoration-2 style="width:100%;height:10px;margin-top: 10px;"
+                                                :color="['#1275ba','green']" :dur="8" />
+
                                         </div>
                                     </div>
                                     <div class="echarts_else" id="echartL2" ref="echartL2"></div>
@@ -235,7 +253,10 @@
                                             <div class="title">技术职称</div>
                                         </div>
                                         <div class="line">
-                                            <img src="./images/line.png" alt="">
+                                            <!-- <img src="./images/line.png" alt=""> -->
+                                            <dv-decoration-2 style="width:100%;height:10px;margin-top: 10px;"
+                                                :color="['#1275ba','green']" :dur="8" />
+
                                         </div>
                                     </div>
                                     <div class="echarts_else">
@@ -243,7 +264,7 @@
                                         <img class="img" src="./images/newImage/cycleBg.png" alt="">
                                     </div>
                                 </div>
-                                <div class="left_user_main_item">
+                                <div class="left_user_main_item" style="pointer-events: none;">
                                     <div class="left_user_title">
                                         <div class="icon_title">
                                             <div class="icon">
@@ -252,7 +273,10 @@
                                             <div class="title">技能等级</div>
                                         </div>
                                         <div class="line">
-                                            <img src="./images/line.png" alt="">
+                                            <!-- <img src="./images/line.png" alt=""> -->
+                                            <dv-decoration-2 style="width:100%;height:10px;margin-top: 10px;"
+                                                :color="['#1275ba','green']" :dur="8" />
+
                                         </div>
                                     </div>
                                     <div class="echarts_else" ref="level"></div>
@@ -261,10 +285,10 @@
                                 </div>
                             </div>
                         </div>
-                    </dv-border-box-6>
+                    </dv-border-box-12>
                 </div>
                 <div class="flex_column right_user_box">
-                    <dv-border-box-6 :color="['#2169a3','#277099']"
+                    <dv-border-box-12 :color="['#2169a3','#277099']"
                         style="padding: 10px 40px 15px;box-sizing: border-box;">
                         <div class="right_item_else flex_column">
                             <div class="title_else"><span>人才市场</span></div>
@@ -334,7 +358,7 @@
                                 </div>
                             </div>
                         </div>
-                    </dv-border-box-6>
+                    </dv-border-box-12>
                     <!-- <div class="right_item_else flex_sb" style="height: calc(50% - 20px);">
                         <div class="right_echarts_else_bg flex_column">
                             <div class="left_user_title">
@@ -410,7 +434,7 @@
                             </div>
                         </div>
                     </div>
-                    <img src="./images/buttom.png" alt="">
+                    <img src="./images/newImage/cycle.png" alt="">
                     <div class="svg_box">
                         <div class="svg_box_item">
                             <svg width="100%" height="100%">
@@ -447,7 +471,7 @@
                                 </circle>
                             </svg>
                         </div>
-                        <div class="svg_box_item_else">
+                        <!-- <div class="svg_box_item_else">
                             <svg width="100%" height="100%">
                                 <defs>
                                     <linearGradient id="gradient-test">
@@ -461,24 +485,28 @@
                                         from="360 350 350" to="0 350 350" dur="3" />
                                 </circle>
                             </svg>
-                        </div>
+                        </div> -->
                     </div>
                     <div ref="container" class="echarts_map"></div>
                 </div>
 
                 <div class="main_item flex_column">
-                    <dv-border-box-6 :color="['#2169a3','#277099']"
+                    <dv-border-box-12 :color="['#2169a3','#277099']"
                         style="padding: 10px 40px 30px;box-sizing: border-box;">
-                        <div class="title_else" style="text-indent: 80px;width: 100%;background-size: 80% 100%;">
+                        <div class="title_else_s">
                             <span>人员流动</span>
+                            <span class="icon_box" style="top: -5px;right: 40px;" @click="handleUserChange()">
+                                <img src="./images/blue.png" alt="">
+                            </span>
                         </div>
+
                         <div class="main_item_echarts" ref="mobilize"></div>
-                    </dv-border-box-6>
+                    </dv-border-box-12>
                 </div>
             </div>
             <div class="box_right">
-                <div class="left_item" style="height: calc(40% - 20px);padding: 0;">
-                    <dv-border-box-6 :color="['#2169a3','#277099']"
+                <div class="left_item" style="height: calc(40% - 10px);padding: 0;">
+                    <dv-border-box-12 :color="['#2169a3','#277099']"
                         style="padding: 10px 40px 30px;box-sizing: border-box;">
                         <div class="title_else flex_sb">
                             <span>薪酬分配</span>
@@ -503,7 +531,10 @@
                                             </div>
                                         </div>
                                         <div class="line">
-                                            <img src="./images/line.png" alt="">
+                                            <!-- <img src="./images/line.png" alt=""> -->
+                                            <dv-decoration-2 style="width:100%;height:10px;margin-top: 10px;"
+                                                :color="['#1275ba','green']" :dur="8" />
+
                                         </div>
                                     </div>
                                     <div class="w_100" style="position: relative; pointer-events: none;">
@@ -525,7 +556,10 @@
                                             <div class="title">算薪进度</div>
                                         </div>
                                         <div class="line">
-                                            <img src="./images/line.png" alt="">
+                                            <!-- <img src="./images/line.png" alt=""> -->
+                                            <dv-decoration-2 style="width:100%;height:10px;margin-top: 10px;"
+                                                :color="['#1275ba','green']" :dur="8" />
+
                                         </div>
                                     </div>
                                     <div class="w_100">
@@ -551,7 +585,10 @@
                                         </div>
                                     </div>
                                     <div class="line">
-                                        <img src="./images/line.png" alt="">
+                                        <!-- <img src="./images/line.png" alt=""> -->
+                                        <dv-decoration-2 style="width:100%;height:10px;margin-top: 13px;"
+                                            :color="['#1275ba','green']" :dur="8" />
+
                                     </div>
                                 </div>
                                 <div class="w_100">
@@ -559,10 +596,10 @@
                                 </div>
                             </div>
                         </div>
-                    </dv-border-box-6>
+                    </dv-border-box-12>
                 </div>
-                <div class="right_item flex_column" style="height: calc(60% - 20px);padding: 0;">
-                    <dv-border-box-6 :color="['#2169a3','#277099']"
+                <div class="right_item flex_column" style="height: calc(60% - 10px);padding: 0;">
+                    <dv-border-box-12 :color="['#2169a3','#277099']"
                         style="padding: 10px 40px 30px;box-sizing: border-box;">
                         <!-- <div class="title_else"><span>人才管理区块</span></div> -->
                         <div class="title_else"><span>人才管理</span></div>
@@ -643,7 +680,10 @@
                                             <div class="title" style="line-height: 80px;">技能大师工作室</div>
                                         </div>
                                         <div class="line">
-                                            <img src="./images/line.png" alt="">
+                                            <!-- <img src="./images/line.png" alt=""> -->
+                                            <dv-decoration-2 style="width:100%;height:10px;margin-top: 5px;"
+                                                :color="['#1275ba','green']" :dur="8" />
+
                                         </div>
                                     </div>
                                     <div class="right_item_main flex_center"
@@ -681,13 +721,16 @@
                                             </div>
                                         </div>
                                         <div class="line">
-                                            <img src="./images/line.png" alt="">
+                                            <!-- <img src="./images/line.png" alt=""> -->
+                                            <dv-decoration-2 style="width:100%;height:10px;margin-top: 5px;"
+                                                :color="['#1275ba','green']" :dur="8" />
+
                                         </div>
                                     </div>
                                     <div class="right_item_main" style="height: calc(100% - 100px);">
                                         <div class="right_item_main_header">
                                             <img src="./images/newImage/asdasdbg.png" alt="">
-                                            <span class="right_text">集团公司 <span> {{ 39919 }} </span>人</span>
+                                            <span class="right_text">集团公司 <span> {{ 15396 }} </span>人</span>
                                         </div>
                                         <div style="width: 100%; height: calc(100% - 80px);" ref="efficiency"></div>
                                     </div>
@@ -727,7 +770,10 @@
                                                 </div>
                                             </div>
                                             <div class="line">
-                                                <img src="./images/line.png" alt="">
+                                                <!-- <img src="./images/line.png" alt=""> -->
+                                                <dv-decoration-2 style="width:100%;height:10px;margin-top: 10px;"
+                                                    :color="['#1275ba','green']" :dur="8" />
+
                                             </div>
                                         </div>
                                         <div class="echarts" style="height: calc(100% - 65px);" ref="student"></div>
@@ -764,7 +810,10 @@
                                                 <div class="title">产学研成果</div>
                                             </div>
                                             <div class="line">
-                                                <img src="./images/line.png" alt="">
+                                                <!-- <img src="./images/line.png" alt=""> -->
+                                                <dv-decoration-2 style="width:100%;height:10px;margin-top: 10px;"
+                                                    :color="['#1275ba','green']" :dur="8" />
+
                                             </div>
                                         </div>
                                         <div class="f_box">
@@ -789,7 +838,7 @@
                                 </div>
                             </div>
                         </div>
-                    </dv-border-box-6>
+                    </dv-border-box-12>
                 </div>
                 <!-- <div class="right_item flex_column">
                     <div class="title_else"><span>校企合作</span></div>
@@ -835,7 +884,10 @@
                                 <div class="title">全员劳动生产率</div>
                             </div>
                             <div class="line">
-                                <img src="./images/line.png" alt="">
+                                <!-- <img src="./images/line.png" alt=""> -->
+                                <dv-decoration-2 style="width:100%;height:10px;margin-top: -1px;"
+                                    :color="['#1275ba','green']" :dur="8" />
+
                             </div>
                         </div>
                         <div class="echarts_main" ref="works"></div>
@@ -849,7 +901,10 @@
                                 <div class="title">原煤效率</div>
                             </div>
                             <div class="line">
-                                <img src="./images/line.png" alt="">
+                                <!-- <img src="./images/line.png" alt=""> -->
+                                <dv-decoration-2 style="width:100%;height:10px;margin-top: -1px;"
+                                    :color="['#1275ba','green']" :dur="8" />
+
                             </div>
                         </div>
                         <div class="echarts_main" ref="efficiencyElse"></div>
@@ -863,7 +918,10 @@
                                 <div class="title">员工效率</div>
                             </div>
                             <div class="line">
-                                <img src="./images/line.png" alt="">
+                                <!-- <img src="./images/line.png" alt=""> -->
+                                <dv-decoration-2 style="width:100%;height:10px;margin-top: -1px;"
+                                    :color="['#1275ba','green']" :dur="8" />
+
                             </div>
                         </div>
                         <div class="echarts_main" ref="whole"></div>

+ 7 - 2
cokingCoal/js/dataA.js

@@ -142,12 +142,17 @@ let left5 = [{
 }
 ]
 
+// let downhole = {
+//   x: ["西山煤电", "汾西矿业", "霍州煤电", "山煤国际", "华晋焦煤"],
+//   y: [[46, 22, 19, 0, 8], [49, 18, 19, 1, 10], [20, 30, 35, 30, 20], [4981, 3195, 5016, 2117, 782], [9309, 5732, 4589, 2586, 1285]]
+// }
+
+
 let downhole = {
   x: ["西山煤电", "汾西矿业", "霍州煤电", "山煤国际", "华晋焦煤"],
-  y: [[46, 22, 19, 0, 8], [49, 18, 19, 1, 10], [20, 30, 35, 30, 20], [4981, 3195, 5016, 2117, 782], [9309, 5732, 4589, 2586, 1285]]
+  y: [[11, 2, 1, 7, 0], [26, 16, 3, 20, 2], [1565, 1569, 823, 433, 177], [5206, 2899, 1163, 1057, 416]]
 }
 
-
 let skillList = [{
   name: "国家级",
   blue: 3,

+ 419 - 0
cokingCoal/js/humanResources.js

@@ -0,0 +1,419 @@
+Vue.use(scroll)
+let app = new Vue({
+    el: "#app",
+    data() {
+        return {
+            title: "内部人才市场双选服务平台",
+            treeList: [
+                {
+                    name: "岗位发布",
+                    flag: false,
+                    style: {
+                        top: "60%",
+                        left: "20%",
+                        background: "url(./images/humanResources/icon1.png)"
+                    },
+                    onStyle: {
+                        top: "60%",
+                        left: "20%",
+                        background: "url(./images/humanResources/icon3.png)"
+                    }
+                },
+                {
+                    name: "简历投递",
+                    flag: false,
+                    style: {
+                        top: "22%",
+                        left: "28%",
+                        background: "url(./images/humanResources/icon2.png)"
+                    },
+                    onStyle: {
+                        top: "22%",
+                        left: "28%",
+                        background: "url(./images/humanResources/icon3.png)"
+                    }
+                },
+
+                {
+                    name: "资格审查",
+                    flag: true,
+                    style: {
+                        top: "-80px",
+                        left: "calc(50% - 202px)",
+                        background: "url(./images/humanResources/icon1.png)"
+                    },
+                    onStyle: {
+                        top: "-80px",
+                        left: "calc(50% - 202px)",
+                        background: "url(./images/humanResources/icon3.png)"
+                    }
+                },
+                {
+                    name: "综合测评",
+                    flag: false,
+                    style: {
+                        top: "22%",
+                        right: "28%",
+                        background: "url(./images/humanResources/icon4.png)"
+                    },
+                    onStyle: {
+                        top: "22%",
+                        right: "28%",
+                        background: "url(./images/humanResources/icon3.png)"
+                    }
+                },
+                {
+                    name: "资格审查",
+                    flag: false,
+                    style: {
+                        top: "60%",
+                        right: "20%",
+                        background: "url(./images/humanResources/icon5.png)"
+                    },
+                    onStyle: {
+                        top: "60%",
+                        right: "20%",
+                        background: "url(./images/humanResources/icon3.png)"
+                    }
+                },
+            ],
+            treeIndex: 0,
+            config1: {
+                waitTime: 2000,
+                header: ["招聘单位", "招聘岗位", "招聘人数", "投递人数", "发布时间"],
+                headerHeight: 55,
+                columnWidth: [230, 170, 100, 100],
+                rowNum: 10,
+                data: [
+                    ["西山煤电屯兰矿", '井下普工', '30', '100', "2023.07.01"],
+                    ["西山煤电斜沟煤矿", '井下钻探工', '10', '30', "2023.07.01"],
+                    ["汾西矿业高阳煤矿", '井下安全检查员', '5', '10', "2023.07.01"],
+                    ["汾西矿业柳湾煤矿", '井下设备管理员', '10', '50', "2023.07.01"],
+                    ["霍州煤电辛置煤矿", '矿井维修电工', '10', '30', "2023.07.01"],
+
+                    ["霍州煤电恒兴煤业", '生产调度员', '4', '10', "2023.07.01"],
+                    ["霍州煤电吕梁山煤电公司", '汽车驾驶员', '5', '10', "2023.07.01"],
+                    ["山煤国际凌志达煤业", '电工', '5', '16', "2023.07.01"],
+                    ["华晋焦煤沙曲一号煤矿", '井下普工', '40', '120', "2023.07.01"],
+                    ["山西焦化", '技术员', '2', '12', "2023.07.01"],
+                    ["汾西矿业高阳煤矿", '井下安全检查员', '5', '10', "2023.07.01"],
+                ],
+                align: ["center", "center", "center", "center", "center"],
+                headerBGC: "#69c1ff2d",
+                oddRowBGC: "rgba(105, 193, 255, 0)",
+                evenRowBGC: "#69c1ff21",
+            },
+            config2: {
+                waitTime: 2000,
+                header: ["序号", "单位名称", "招聘岗位数"],
+                headerHeight: 55,
+                rowNum: 5,
+                data: [
+                    ["<span class='yellow'>01</span>", "<span class='yellow'>西山煤电</span>", "<span class='yellow'>30个</span>"],
+                    ["<span class='red'>02</span>", "<span class='red'>山煤国际</span>", "<span class='red'>25个</span>"],
+                    ["<span class='green'>03</span>", "<span class='green'>汾西矿业</span>", "<span class='green'>20个</span>"],
+                    ["04", "汾西矿业", "10个"],
+                    ["05", "汾西矿业", "8个"],
+
+                    ["06", "汾西矿业", "4个"],
+                ],
+                align: ["center", "center", "center", "center", "center"],
+                headerBGC: "#69c1ff2d",
+                oddRowBGC: "rgba(105, 193, 255, 0)",
+                evenRowBGC: "#69c1ff21",
+            },
+            targetIndex: 0,
+            classChange: false,
+            listData: [{
+                'title': '无缝滚动第一行无缝滚动第一行',
+                'date': '2017-12-16'
+            }, {
+                'title': '无缝滚动第二行无缝滚动第二行',
+                'date': '2017-12-16'
+            }, {
+                'title': '无缝滚动第三行无缝滚动第三行',
+                'date': '2017-12-16'
+            }, {
+                'title': '无缝滚动第四行无缝滚动第四行',
+                'date': '2017-12-16'
+            }, {
+                'title': '无缝滚动第五行无缝滚动第五行',
+                'date': '2017-12-16'
+            }, {
+                'title': '无缝滚动第六行无缝滚动第六行',
+                'date': '2017-12-16'
+            }, {
+                'title': '无缝滚动第七行无缝滚动第七行',
+                'date': '2017-12-16'
+            }, {
+                'title': '无缝滚动第八行无缝滚动第八行',
+                'date': '2017-12-16'
+            }, {
+                'title': '无缝滚动第九行无缝滚动第九行',
+                'date': '2017-12-16'
+            }],
+            classOption: {
+                step: 2
+            },
+            configMark: {
+                waitTime: 2000,
+                header: ["头像", "姓名", "投递岗位", "时间"],
+                rowNum: 6,
+                headerHeight: 55,
+                // columnWidth: [90, 170, 200, ],
+                data: [
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>西山煤电</span>", "<span class=''>71</span>", "<span class=''>3月</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>汾西矿业</span>", "<span class=''>1896</span>", "<span class=''>3月</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>霍州煤电</span>", "<span class=''>847</span>", "<span class=''>3月</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>山煤国际</span>", "<span class=''>514</span>", "<span class=''>3月</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>华晋焦煤</span>", "<span class=''>13</span>", "<span class=''>3月</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>西山煤电</span>", "<span class=''>71</span>", "<span class=''>3月</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>汾西矿业</span>", "<span class=''>1896</span>", "<span class=''>3月</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>霍州煤电</span>", "<span class=''>847</span>", "<span class=''>3月</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>山煤国际</span>", "<span class=''>514</span>", "<span class=''>3月</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>华晋焦煤</span>", "<span class=''>13</span>", "<span class=''>3月</span>"],
+                ],
+                align: ["center", "center", "center", "center", "center"],
+                headerBGC: "#69c1ff2d",
+                oddRowBGC: "rgba(105, 193, 255, 0)",
+                evenRowBGC: "#69c1ff21",
+            },
+            configInterview: {
+                waitTime: 2000,
+                header: ["序号", "姓名", "会议厅", "场次", "时间"],
+                headerHeight: 55,
+                columnWidth: [70, 120, 170, 100],
+                rowNum: 5,
+                data: [
+                    ["01", '陈英', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                    ["02", '李小曼', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                    ["03", '王亮', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                    ["04", '李鑫', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                    ["05", '王伟', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                    ["06", '陈英', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                ],
+                align: ["center", "center", "center", "center", "center"],
+                headerBGC: "#69c1ff2d",
+                oddRowBGC: "rgba(105, 193, 255, 0)",
+                evenRowBGC: "#69c1ff21",
+            },
+            configWritten: {
+                waitTime: 2000,
+                header: ["序号", "姓名", "会议厅", "场次", "时间"],
+                headerHeight: 55,
+                columnWidth: [70, 120, 170, 100],
+                rowNum: 5,
+                data: [
+                    ["01", '陈英', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                    ["02", '李小曼', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                    ["03", '王亮', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                    ["04", '李鑫', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                    ["05", '王伟', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                    ["06", '陈英', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                ],
+                align: ["center", "center", "center", "center", "center"],
+                headerBGC: "#69c1ff2d",
+                oddRowBGC: "rgba(105, 193, 255, 0)",
+                evenRowBGC: "#69c1ff21",
+            },
+            mainList: [
+                {
+                    name: "双选场次",
+                    value: 30,
+                    unit: "场",
+                    icon: "../images/humanResources/times.png"
+                },
+                {
+                    name: "参与人数",
+                    value: 3000,
+                    unit: "人",
+                    icon: "../images/humanResources/user.png"
+                }
+            ]
+        }
+    },
+    mounted() {
+        let that = this;
+        this.$nextTick(() => {
+            let pageBtm = this.$refs.pageBtm
+            this.initDownholeEcharts(pageBtm, { x: downhole.x, y: [downhole.y[0], downhole.y[2], downhole.y[3]] })
+            setTimeout(() => {
+                let itemContent = document.getElementById("itemContent")
+                let target = itemContent.getElementsByClassName("row-item")
+                let targetList = target.item(0)
+                targetList.style.background = "brown"
+            }, 0)
+            setTimeout(() => {
+                that.classChange = true
+            }, 2000);
+            setInterval(() => {
+                let that = this
+                that.treeList.forEach(item => {
+                    item.flag = false
+                })
+                
+                if (that.treeIndex > that.treeList.length - 1) {
+                    that.treeIndex = 0
+                    that.treeList[that.treeIndex].flag = true
+                } else {
+                    that.treeList[that.treeIndex].flag = true
+                    that.treeIndex = that.treeIndex + 1
+
+                }
+            }, 2000)
+        })
+    },
+    methods: {
+        initDownholeEcharts(el, data) {
+            this.downhole = echarts.init(el);
+            let series = []
+            let grid = {
+                top: "15%",
+                bottom: 50,//也可设置left和right设置距离来控制图表的大小
+                left: "3%",
+                right: "1%"
+            }
+            data.y.forEach(item => {
+                series.push()
+            });
+
+
+            option = {
+                tooltip: {
+                    show: true,
+                    trigger: 'axis',
+                    textStyle: {
+                        fontSize: 30,
+                        color: '#A3E2F4'
+                    },
+                    axisPointer: { // 坐标轴指示器,坐标轴触发有效
+                        type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
+                    }
+                },
+                grid,
+                legend: {
+                    data: ["招聘人数", "报名人数", "录用人数"],
+                    align: 'left',
+                    itemGap: 50,
+                    right: '1%',
+                    y: '1%',
+                    icon: 'rect',
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 30
+                    }
+                },
+                xAxis: {
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        interval: 0,
+                        show: true,
+                        fontSize: 30,
+                        textStyle: {
+                            color: "#fff" //X轴文字颜色
+                        },
+                    },
+                    data: data.x,
+                },
+                yAxis: {
+                    type: "value",
+                    name: "人",
+                    gridIndex: 0,
+                    // splitNumber: 4,
+                    splitLine: {
+                        show: false,
+                        lineStyle: {
+                            color: '#A3C0DF',
+                            width: 1
+                        },
+                    },
+                    nameTextStyle: {
+                        fontSize: 30,
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: false,
+                        lineStyle: {
+                            color: '#A3C0DF'
+                        }
+                    },
+                    axisLabel: {
+                        show: true,
+                        margin: 14,
+                        fontSize: 28,
+                        textStyle: {
+                            color: "#fff" //X轴文字颜色
+                        }
+                    },
+                },
+                series: [{
+                    type: 'bar',
+                    name: "招聘人数",
+                    barWidth: 26,
+                    itemStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                            {
+                                offset: 0,
+                                color: '#40A9FF',
+                            },
+                            {
+                                offset: 1,
+                                color: '#082049',
+                            },
+                        ]),
+                    },
+                    data: data.y[0],
+                }, {
+                    type: 'bar',
+                    name: "报名人数",
+                    barWidth: 26,
+                    itemStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                            {
+                                offset: 0,
+                                color: '#EAE179',
+                            },
+                            {
+                                offset: 1,
+                                color: '#082049',
+                            },
+                        ]),
+                    },
+                    data: data.y[1],
+                }, {
+                    type: 'bar',
+                    name: "录用人数",
+                    barWidth: 26,
+                    itemStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                            {
+                                offset: 0,
+                                color: '#6A83FF',
+                            },
+                            {
+                                offset: 1,
+                                color: '#082049',
+                            },
+                        ]),
+                    },
+                    data: data.y[2],
+                }]
+            };
+            this.downhole.setOption(option);
+            tools.loopShowTooltip(this.downhole, option, {
+                nterval: 2000,
+                loopSeries: true,
+            });
+        },
+        scrollChange(index) {
+            // console.log(index);
+        },
+    },
+})

+ 44 - 32
cokingCoal/js/newIndex.js

@@ -115,7 +115,7 @@ let app = new Vue({
         waitTime: 2000,
         rowNum: 2,
         data: [
-          ["金融资本公司", '山焦担保', '组织合并', '2023-06-01'],
+          // ["金融资本公司", '山焦担保', '组织合并', '2023-06-01'],
           ["山焦统配", '山焦统配', '组织新设', '2023-05-01'],
           ["汾西矿业集团", '灵石县富威橡胶', '组织更名', '2023-05-01'],
           ["焦煤置业", '海南科思实业有限公司', '组织停用', '2023-04-04'],
@@ -168,11 +168,11 @@ let app = new Vue({
         header: ["单位名称", "已算薪组织", "未算薪组织", "算薪进度百分比", ""],
         rowNum: 4,
         data: [
-          ["西山煤电", '290', '46', '86%'],
-          ["汾西矿业", '10', '38', '21%'],
-          ["霍州煤电", '314', '3', '99%'],
-          ["山煤国际", '16', '35', '31%'],
-          ["华晋焦煤", '7', '1', '87%'],
+          ["山焦西山", '84', '0', '100%'],
+          ["山焦汾西", '47', '4', '90 %'],
+          ["山焦霍州", '93', '2', '98%'],
+          ["山焦山煤", '53', '0', '100%'],
+          ["山焦华晋", '8', '0', '100%'],
         ],
         align: ["center", "center", "center", "center", "center"],
         headerBGC: "#153A62",
@@ -245,7 +245,7 @@ let app = new Vue({
       leftEcharts5: undefined,
       mobilizeFL: undefined,
       industry: {
-        x: ["矿井", "选煤厂", "火电厂", "清洁能源厂", "焦化厂"],
+        x: ["矿井", "选煤厂", "火电厂", "清洁能源厂", "焦化厂"],
         y: [151, 50, 6, 32, 4]
       },
       twoBar: undefined,
@@ -317,7 +317,7 @@ let app = new Vue({
       fy5: [],
       intervalL: undefined,
       intervalR: undefined,
-      titleList: ["高校实习实训", "单位实习实训"],
+      titleList: ["高校分布", "单位分布"],
       titleIndex: 0,
       timeTitle: null,
       efficiency: null,
@@ -362,7 +362,7 @@ let app = new Vue({
     }
   },
   beforeCreate() {
-
+    
 
   },
   mounted() {
@@ -478,6 +478,7 @@ let app = new Vue({
       })
     })
 
+
     setInterval(() => {
       this.getAccumulatedLogin()
       this.getMauInfo()
@@ -542,7 +543,7 @@ let app = new Vue({
         let efficiency = this.$refs.efficiency
         this.downhole.dispose()
         if (that.downholeIndex == 1) {
-          this.initDownholeEcharts(efficiency, { x: downhole.x, y: [downhole.y[3], downhole.y[4]] }, 2)
+          this.initDownholeEcharts(efficiency, { x: downhole.x, y: [downhole.y[2], downhole.y[3]] }, 2)
           that.downholeIndex = 2
         } else if (that.downholeIndex == 2) {
           this.initDownholeEcharts(efficiency, { x: downhole.x, y: [downhole.y[0], downhole.y[1]] }, 1)
@@ -958,6 +959,7 @@ let app = new Vue({
             color: '#A3E2F4'
           },
           axisPointer: {
+            type: "none",
             lineStyle: {
               color: "#ddd",
             },
@@ -1311,6 +1313,7 @@ let app = new Vue({
             color: '#A3E2F4'
           },
           axisPointer: {
+            type: "none",
             lineStyle: {
               color: "#ddd",
             },
@@ -1466,7 +1469,7 @@ let app = new Vue({
       let option = {
         title: {
           text: sum,
-          subtext: '   总数',
+          subtext: '  总数',
           left: '15%',
           top: '39%',
           textStyle: {
@@ -2368,10 +2371,10 @@ let app = new Vue({
       var singleData = data.y1;
       let max = 0
       var multipleData = []
-      data.y1.forEach(item=>{
+      data.y1.forEach(item => {
         max = max + item
       })
-      data.y1.forEach(item=>{
+      data.y1.forEach(item => {
         let num = ((item / max) * 100).toFixed(2)
         multipleData.push(num)
       })
@@ -2450,7 +2453,7 @@ let app = new Vue({
         }],
         yAxis: [{
           type: 'value',
-          name:"当前数",
+          name: "当前数",
           axisLabel: {
             // inside: true,
             padding: [0, 15, 0, 0],
@@ -2483,9 +2486,9 @@ let app = new Vue({
             fontSize: 16 * scale,
             padding: [0, 0, 10, 0]
           }
-        },{
+        }, {
           type: 'value',
-          name:"占比",
+          name: "占比",
           min: 0,
           max: 100,
 
@@ -2533,21 +2536,21 @@ let app = new Vue({
           },
           data: singleData
         },
-          {
-            name: "占比",
-            yAxisIndex: 1,
-            type: 'line',
-            barWidth: '15%',
-            barGap: '40%',
+        {
+          name: "占比",
+          yAxisIndex: 1,
+          type: 'line',
+          barWidth: '15%',
+          barGap: '40%',
 
-            itemStyle: {
-              normal: {
-                color: '#ffc72b',
+          itemStyle: {
+            normal: {
+              color: '#ffc72b',
 
-              }
-            },
-            data: multipleData
-          }
+            }
+          },
+          data: multipleData
+        }
         ]
       };
       chart.setOption(option);
@@ -4191,6 +4194,7 @@ let app = new Vue({
             show: false,
           },
           axisLabel: {
+            interval: 0,
             show: true,
             fontSize: 30,
             textStyle: {
@@ -4333,17 +4337,24 @@ let app = new Vue({
       }
       this.studentEcharts.dispose()
       let student = this.$refs.student
-      if (item == "高校实习实训") {
-        that.titleList = ["高校实习实训", "单位实习实训"]
+      if (item == "高校分布") {
+        that.titleList = ["高校分布", "单位分布"]
         this.initEchartsBar(student, schoolList, "#07ecd9")
 
       } else {
-        that.titleList = ["单位实习实训", "高校实习实训"]
+        that.titleList = ["单位分布", "高校分布"]
         this.initEchartsBar(student, rightList, "#21D4FD")
 
       }
     },
 
+    handleUserChange() {
+      this.isShowMark = true
+      this.salaryFlag = false
+      this.pdfFlag = false
+      this.mobilizeFlag = true
+    },
+
     handleMore() {
       this.isShowMark = true
       this.salaryFlag = false
@@ -4374,6 +4385,7 @@ let app = new Vue({
         that.mauInfo.unit = res.unit
       })
     },
+
   },
 
 })

Diferenças do arquivo suprimidas por serem muito extensas
+ 0 - 0
cokingCoal/libs/datav.min.js


Diferenças do arquivo suprimidas por serem muito extensas
+ 0 - 0
cokingCoal/libs/vue-seamless-scroll.min.js


+ 460 - 0
cokingCoal/styles/humanResources.css

@@ -0,0 +1,460 @@
+html,
+body {
+    width: 100% !important;
+    /* width: 4874px !important; */
+    /* min-height: 2743px; */
+    height: 100%;
+    font-size: 20px;
+    color: #fff;
+    font-family: 'Microsoft YaHei';
+    /* background-image: url("../images/indexBg.png"); */
+    /* background-image: url("../images/newImage/4ca24a27-c946-4f59-90a5-af00530ddb59.png"); */
+    background-image: url("../images/humanResources/bg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    overflow-y: hidden;
+}
+
+:root {
+    /* --bg: #dcf0fc0c; */
+    --bgc: #63b6ff11;
+}
+
+
+/* 强制去掉滚动条 */
+/* html {
+  overflow-x: hidden !important;    
+} */
+* {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+img *,
+*,
+*:before,
+*:after {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+a {
+    text-decoration: none;
+    cursor: pointer;
+}
+
+[v-cloak] {
+    display: none;
+}
+
+.app_box {
+    width: 100%;
+    height: 100%;
+}
+
+.app_box {
+    width: 100%;
+    height: 100%;
+    padding: 40px 30px 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.page_title {
+    width: 100%;
+    height: 6%;
+    font-size: 90px;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    text-align: center;
+    background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.page_main {
+    width: 100%;
+    height: calc(74% - 100px);
+    margin-top: 1%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.page_btm {
+    width: 100%;
+    height: 20%;
+    background-color: var(--bgc);
+}
+
+.flex_column {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.flex_sp {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.page_main_left,
+.page_main_right {
+    width: 35%;
+    height: 100%;
+}
+
+
+
+
+img {
+    width: 100%;
+    height: 100%;
+}
+
+.page_main_center {
+    width: calc(50% - 30px);
+    height: 100%;
+    position: relative;
+
+}
+
+.page_main_center .page_main_center_image {
+    width: 100%;
+    height: 115%;
+    transform: scale(1.15) translateY(0.5%);
+}
+
+.center_top {
+    width: 100%;
+    height: 210px;
+    padding: 0 15%;
+    box-sizing: border-box;
+    /* background-color: #ffffff; */
+    position: absolute;
+    top: 0;
+}
+
+.center_main {
+    width: 100%;
+    height: 55%;
+    position: absolute;
+    top: 13.5%;
+}
+
+.center_main_item {
+    width: 405px;
+    height: 405px;
+    background-color: azure;
+    position: absolute;
+    background: url("../images/humanResources/icon2.png");
+    font-size: 30px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 500px;
+    animation: remove 2s steps(60) infinite;
+}
+
+.left_top {
+    width: 100%;
+    height: calc(65% - 15px);
+    background-color: var(--bgc);
+}
+
+.left_btm {
+    width: 100%;
+    height: calc(35% - 15px);
+    background-color: var(--bgc);
+}
+
+.title {
+    width: 70%;
+    height: 75px;
+    background: url("../images/humanResources/title.png") no-repeat;
+    background-size: 100% 100%;
+    font-size: 36px;
+    font-family: Source Han Sans CN;
+    font-weight: bolder;
+    color: #FFFFFF;
+    text-indent: 8%;
+    line-height: 65px;
+}
+
+.main {
+    width: 100%;
+    height: calc(100% - 75px);
+    padding: 40px 40px 10px;
+    box-sizing: border-box;
+}
+
+.main_item {
+    width: calc(50% - 10px);
+    height: 100%;
+    background-color: #69c1ff09;
+}
+
+.right_top {
+    width: 100%;
+    height: calc(32% - 15px);
+    background-color: var(--bgc);
+}
+
+.right_main {
+    width: 100%;
+    height: calc(28% - 15px);
+    background-color: var(--bgc);
+}
+
+.right_btm {
+    width: 100%;
+    height: calc(40% - 15px);
+    background-color: var(--bgc);
+}
+
+
+.main_item_top {
+    width: 100%;
+    height: calc(40% - 15px);
+    background-color: var(--bgc);
+}
+
+.main_item_btm {
+    width: 100%;
+    height: calc(60% - 15px);
+    background-color: var(--bgc);
+}
+
+.echarts_dom {
+    width: 100%;
+    height: 100%;
+}
+
+
+.item_content_6,
+.item_content_6_false {
+    width: 100%;
+    height: calc(60% - 10px);
+}
+
+.item_content_4 {
+    width: 100%;
+    height: calc(40% - 10px);
+}
+
+.header-item {
+    font-size: 20px;
+    color: #69C0FF;
+}
+
+.row-item {
+    font-size: 23px !important;
+}
+
+.content_4_top {
+    width: 100%;
+    height: 90px;
+    align-items: flex-end;
+}
+
+.content_4_title {
+    width: 100%;
+    height: 42px;
+}
+
+.content_4_time {
+    width: 45%;
+    height: 32px;
+}
+
+.btn_on {
+    width: 186px;
+    height: 100%;
+    background: url("../images/humanResources/btn_on.png") no-repeat;
+    background-size: 100% 100%;
+    margin: 0 20px;
+    font-size: 18px;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    color: #ECE278;
+    text-align: center;
+    line-height: 42px;
+}
+
+.btn_off {
+    width: 186px;
+    height: 100%;
+    background: url("../images/humanResources/btn_off.png") no-repeat;
+    background-size: 100% 100%;
+    margin: 0 20px;
+    font-size: 18px;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    color: #47C0FF;
+    text-align: center;
+    line-height: 42px;
+}
+
+.time {
+    width: 49%;
+    height: 100%;
+    background: rgba(75, 172, 255, 0.2);
+}
+
+.img_class {
+    width: 22px;
+    /* height: 16px; */
+    margin-left: 10px;
+}
+
+img {
+    width: 100%;
+    height: 100%;
+}
+
+.content_4_btm {
+    width: 100%;
+    height: calc(100% - 90px);
+    margin-top: 5px;
+}
+
+.yellow {
+    color: yellow;
+}
+
+.red {
+    color: red;
+}
+
+.green {
+    color: green;
+}
+
+.item_content_6 .rows .row-item:nth-child(2) {
+    background-color: brown !important;
+}
+
+@keyframes remove {
+    0% {
+        transform: translateY(0);
+    }
+
+    25% {
+        transform: translateY(-5%);
+    }
+
+    50% {
+        transform: translateY(0);
+    }
+
+    75% {
+        transform: translateY(5%);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+
+.warp {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.item {
+    width: 100%;
+    height: 100%;
+    padding: 10px 30px;
+    box-sizing: border-box;
+}
+
+li {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    font-size: 27px;
+}
+
+.list_img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-top: 15px;
+}
+
+.main_item_title {
+    width: 270px;
+    height: 70px;
+    background: url("../images/humanResources/btn_on.png") no-repeat;
+    background-size: 100% 100%;
+    font-size: 24px;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    color: #FFFFFF;
+    text-align: center;
+    line-height: 70px;
+    margin-top: -20px;
+}
+
+.main_item_main {
+    width: 100%;
+    height: calc(100% - 70px);
+}
+
+.center_top_item {
+    width: 38%;
+    height: 210px;
+}
+
+.center_top_image {
+    width: 350px;
+    height: 210px;
+    margin-right: 30px;
+}
+
+.center_top_image img {
+    width: 100% !important;
+    height: 100% !important;
+}
+
+.center_top_info {
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.num {
+    font-size: 72px;
+    font-family: Helvetica Neue Extra Black Cond;
+    font-weight: bolder;
+    color: #5BCBFF;
+}
+
+.num span {
+    font-size: 30px;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+}
+
+.name {
+    font-size: 36px;
+    font-family: Source Han Sans CN;
+    font-weight: bolder;
+    color: #FFFFFF;
+}

+ 47 - 13
cokingCoal/styles/newIndex.css

@@ -2,7 +2,7 @@ html,
 body {
     width: 100% !important;
     /* width: 6145px !important; */
-    /* min-height: 2592px; */
+    min-height: 2572px;
     height: 100%;
     font-size: 20px;
     color: #fff;
@@ -121,11 +121,11 @@ a {
 }
 
 .main_item_one img {
-    width: 250%;
+    width: 140%;
     height: 100%;
     position: absolute;
-    bottom: -10%;
-    left: -72%;
+    bottom: -8%;
+    left: -19.5%;
     z-index: 0;
 }
 
@@ -146,7 +146,7 @@ a {
     transform: rotateX(65deg) scale(1.6);
     text-align: center;
     position: absolute;
-    bottom: -345px;
+    bottom: -325px;
     left: 19%;
 
 }
@@ -186,21 +186,38 @@ a {
 }
 
 .title_else {
-    width: 70%;
+    width: 100%;
     height: 85px;
     font-size: 50px;
     font-weight: bolder;
     line-height: 75px;
-    text-indent: 95px;
+    text-indent: 50px;
     box-sizing: border-box;
     color: #3699ff;
     border-radius: 10px;
     margin-bottom: 10px;
     position: relative;
     /* background: url("../images/newImage/tit_bg.png") no-repeat; */
-    background: url("../images/s_title.png") no-repeat;
-    background-size: 55% 100%;
+    background: url("../images/newImage/c905a4b1-a8ed-4542-ba65-7825534708ff.png") no-repeat;
+    background-size: 100% 100%;
+
+}
 
+.title_else_s{
+    width: 100%;
+    height: 85px;
+    font-size: 50px;
+    font-weight: bolder;
+    line-height: 75px;
+    text-indent: 50px;
+    box-sizing: border-box;
+    color: #3699ff;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    position: relative;
+    /* background: url("../images/newImage/tit_bg.png") no-repeat; */
+    background: url("../images/newImage/5c6d9f2b-2325-4824-9c77-57c99bef749e.png") no-repeat;
+    background-size: 100% 100%;
 }
 
 .title_else span:nth-child(1) {
@@ -209,13 +226,20 @@ a {
     -webkit-text-fill-color: transparent;
 }
 
+
+.title_else_s span:nth-child(1) {
+    background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
 .icon_tit {
     width: 80px;
     height: 80px;
     z-index: 9999;
     position: absolute;
-    top: -10px;
-    right: -35%;
+    top: 1px;
+    right: 100px;
 }
 
 .left_main {
@@ -332,6 +356,7 @@ a {
     justify-content: space-between;
     align-items: center;
     position: relative;
+    
 }
 
 .mark_none {
@@ -1387,7 +1412,14 @@ img {
     box-sizing: border-box;
 }
 
-
+.am_else{
+    width: 90px;
+    height: 100%;
+    background-color: #3699ff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 
 
 
@@ -1399,7 +1431,9 @@ img {
 }
 
 
-
+rect{
+    height: 10px;
+}
 
 polyline {
     stroke-width: 5px !important;

Alguns arquivos não foram mostrados porque muitos arquivos mudaram nesse diff