兴蜀来了平台业务数据大屏页面、三级劳务体系⼈员数据大屏页面、“产教评”融合培训平台大屏页面

This commit is contained in:
2025-10-16 09:16:42 +08:00
parent ff7d9b1f31
commit e1c7f5b209
81 changed files with 4102 additions and 0 deletions

View File

@ -0,0 +1,85 @@
<template>
<li class="mainBox">
<div class="title">
<span>重点人群</span>
</div>
<div class="contentBox">
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>帮扶就业困难人员</span></div>
<div class="count"><span class="numb">3539</span>()</div>
</div>
<ul>
<li>
<div class="liTitle">
<span>城镇零就业家庭成员</span>
</div>
<div class="count"><span class="numb">619</span>()</div>
</li>
<li>
<div class="liTitle">
<span>城镇低保家庭成员</span>
</div>
<div class="count"><span class="numb">597</span>()</div>
</li>
<li>
<div class="liTitle">
<span>残疾人</span>
</div>
<div class="count"><span class="numb">583</span>()</div>
</li>
<li>
<div class="liTitle">
<span>现役军人配偶</span>
</div>
<div class="count"><span class="numb">511</span>()</div>
</li>
<li>
<div class="liTitle">
<span>烈属</span>
</div>
<div class="count"><span class="numb">493</span>()</div>
</li>
<li>
<div class="liTitle">
<span>贫困劳动力</span>
</div>
<div class="count"><span class="numb">427</span>()</div>
</li>
<li>
<div class="liTitle">
<span>农村低收入劳动力</span>
</div>
<div class="count"><span class="numb">309</span>()</div>
</li>
</ul>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>高校毕业生</span></div>
<div class="count"><span class="numb">57962</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>退役军人</span></div>
<div class="count"><span class="numb">25173</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>长期失业人员</span></div>
<div class="count"><span class="numb">5426</span>()</div>
</div>
</div>
</div>
</li>
</template>
<script>
export default {};
</script>
<style>
@import "../index.scss";
</style>

View File

@ -0,0 +1,47 @@
<template>
<li class="mainBox">
<div class="title">
<span>创业撮合情况</span>
</div>
<div class="contentBox">
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>上架创业项目</span></div>
<div class="count"><span class="numb">73</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>撮合成功项目</span></div>
<div class="count"><span class="numb">59</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>创业导师提供</span></div>
<div class="count"><span class="numb">42</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>创业孵化企业</span></div>
<div class="count"><span class="numb">32</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>创业孵化就业人数</span></div>
<div class="count"><span class="numb">215</span>()</div>
</div>
</div>
</div>
</li>
</template>
<script>
export default {};
</script>
<style>
@import "../index.scss";
</style>

View File

@ -0,0 +1,81 @@
<template>
<li class="mainBox">
<div class="title">
<span>全职招聘情况</span>
</div>
<div class="contentBox">
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>用人单位数</span></div>
<div class="count"><span class="numb">34</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>发布岗位数</span></div>
<div class="count"><span class="numb">138</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>招聘热门岗位</span></div>
<!-- <div class="count"><span class="numb">230</span>()</div> -->
</div>
<ul>
<li>
<div class="liTitle">
<span class="rankNumb">01</span><span>普工</span>
</div>
<div class="count"><span class="numb">32</span>()</div>
</li>
<li>
<div class="liTitle">
<span class="rankNumb">02</span><span>技工</span>
</div>
<div class="count"><span class="numb">29</span>()</div>
</li>
<li>
<div class="liTitle">
<span class="rankNumb">03</span><span>操作工</span>
</div>
<div class="count"><span class="numb">17</span>()</div>
</li>
</ul>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>入职热门岗位</span></div>
<!-- <div class="count"><span class="numb">230</span>()</div> -->
</div>
<ul>
<li>
<div class="liTitle">
<span class="rankNumb">01</span><span>普工</span>
</div>
<div class="count"><span class="numb">32</span>()</div>
</li>
<li>
<div class="liTitle">
<span class="rankNumb">02</span><span>技工</span>
</div>
<div class="count"><span class="numb">29</span>()</div>
</li>
<li>
<div class="liTitle">
<span class="rankNumb">03</span><span>操作工</span>
</div>
<div class="count"><span class="numb">17</span>()</div>
</li>
</ul>
</div>
</div>
</li>
</template>
<script>
export default {};
</script>
<style>
@import "../index.scss";
</style>

View File

@ -0,0 +1,106 @@
<template>
<li class="mainBox">
<div class="title">
<span>技能培训</span>
</div>
<div class="contentBox">
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>平台培训机构数</span></div>
<div class="count"><span class="numb">32</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>上架课程</span></div>
<div class="count"><span class="numb">143</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>技能岗位需求增长</span></div>
<div class="count"><span class="numb">63</span>(%)</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>培训后就业成功率</span></div>
<div class="count"><span class="numb">79</span>(%)</div>
</div>
</div>
<ul class="list">
<li>
<div class="liTitle">
<span>报名人数</span>
</div>
<div class="count"><span class="numb">2658</span>()</div>
</li>
<li>
<div class="liTitle">
<span>培训期数</span>
</div>
<div class="count"><span class="numb">46</span>()</div>
</li>
<li>
<div class="liTitle">
<span>培训课程数</span>
</div>
<div class="count"><span class="numb">135</span>()</div>
</li>
<li>
<div class="liTitle">
<span>培训完结人数</span>
</div>
<div class="count"><span class="numb">2143</span>()</div>
</li>
<li>
<div class="liTitle">
<span>发证人数</span>
</div>
<div class="count"><span class="numb">2019</span>()</div>
</li>
</ul>
</div>
</li>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
@import "../index.scss";
ul.list {
width: 560px;
margin: 0 auto;
li {
height: 70px;
line-height: 70px;
display: flex;
justify-content: space-between;
.liTitle {
font-size: 32px;
span {
background: -webkit-linear-gradient(#ffffff, #75e8ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 500;
}
.rankNumb {
display: inline-block;
padding: 0 10px 0 0;
}
}
.count {
line-height: 70px;
font-size: 24px;
.numb {
font-size: 48px;
display: inline-block;
padding: 0 15px 0 0;
text-shadow: 0 0 5px #2ab9d6, 0 0 20px #2ab9d6, 0 0 30px #2ab9d6;
}
}
}
}
</style>

View File

@ -0,0 +1,47 @@
<template>
<li class="mainBox">
<div class="title">
<span>实习招聘情况</span>
</div>
<div class="contentBox">
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>实习合作企业</span></div>
<div class="count"><span class="numb">23</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>实习合作院校</span></div>
<div class="count"><span class="numb">9</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>校企联合实习基地</span></div>
<div class="count"><span class="numb">13</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>定向推送实习岗位</span></div>
<div class="count"><span class="numb">58</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>实习入职人员</span></div>
<div class="count"><span class="numb">324</span>()</div>
</div>
</div>
</div>
</li>
</template>
<script>
export default {};
</script>
<style>
@import "../index.scss";
</style>

View File

@ -0,0 +1,85 @@
<template>
<li class="mainBox">
<div class="title">
<span>零工招聘情况</span>
</div>
<div class="contentBox">
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>零工岗位</span></div>
<div class="count"><span class="numb">152</span>()</div>
</div>
<ul>
<li>
<div class="liTitle">
<span>外卖配送员</span>
</div>
<div class="count"><span class="numb">35</span>()</div>
</li>
<li>
<div class="liTitle">
<span>快递分拣员</span>
</div>
<div class="count"><span class="numb">28</span>()</div>
</li>
<li>
<div class="liTitle">
<span>家政保洁员</span>
</div>
<div class="count"><span class="numb">22</span>()</div>
</li>
<li>
<div class="liTitle">
<span>网约车司机</span>
</div>
<div class="count"><span class="numb">18</span>()</div>
</li>
<li>
<div class="liTitle">
<span>电商客服兼职</span>
</div>
<div class="count"><span class="numb">15</span>()</div>
</li>
<li>
<div class="liTitle">
<span>商超理货员</span>
</div>
<div class="count"><span class="numb">12</span>()</div>
</li>
<li>
<div class="liTitle">
<span>短视频剪辑师兼职</span>
</div>
<div class="count"><span class="numb">8</span>()</div>
</li>
<li>
<div class="liTitle">
<span>活动协助员</span>
</div>
<div class="count"><span class="numb">4</span>()</div>
</li>
</ul>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>零工人才库</span></div>
<div class="count"><span class="numb">237</span>()</div>
</div>
</div>
<div class="dataBox">
<div class="countBox">
<div class="countTitle"><span>就业人次</span></div>
<div class="count"><span class="numb">524</span>()</div>
</div>
</div>
</div>
</li>
</template>
<script>
export default {};
</script>
<style>
@import "../index.scss";
</style>

View File

@ -0,0 +1,115 @@
<template>
<ul class="topStatisticsBox">
<li
v-for="(item, index) in statisticsData"
:key="index"
:style="{ margin: item.margin }"
>
<img :src="item.imgURL" :alt="item.title" />
<div class="infoBox">
<div class="title">
<span>{{ item.title }}</span>
</div>
<div class="count">
<span class="numb">{{ item.value }}</span
>{{ item.unit }}
</div>
</div>
</li>
</ul>
</template>
<script setup>
import { ref } from "vue";
import topStatisticsJyfwz from "@/assets/images/largeScreen/topStatistics-jyfwz.png";
import topStatisticsRzqy from "@/assets/images/largeScreen/topStatistics-rzqy.png";
import topStatisticsWczpjh from "@/assets/images/largeScreen/topStatistics-wczpjh.png";
import topStatisticsZhytj from "@/assets/images/largeScreen/topStatistics-zhytj.png";
import topStatisticsZpgw from "@/assets/images/largeScreen/topStatistics-zpgw.png";
const statisticsData = ref([
{
title: "招聘岗位",
value: "325",
imgURL: topStatisticsZpgw,
unit: "个",
margin: "-326px 0 0 -685px"
},
{
title: "完成招聘计划",
value: "312",
imgURL: topStatisticsWczpjh,
unit: "个",
margin: "-467px 0px 0px -228px"
},
{
title: "入住企业",
value: "35",
imgURL: topStatisticsRzqy,
unit: "家",
margin: "-232px 0px 0px 306px"
},
{
title: "综合一体机",
value: "78",
imgURL: topStatisticsZhytj,
unit: "个",
margin: "-76px 0px 0px -500px"
},
{
title: "就业服务站",
value: "18",
imgURL: topStatisticsJyfwz,
unit: "家",
margin: "-48px 0px 0 9px"
}
]);
</script>
<style lang="scss" scoped>
ul.topStatisticsBox {
height: 1055px;
background: url("~@/assets/images/largeScreen/topStatistics-bg.png") no-repeat
center;
position: relative;
li {
position: absolute;
width: 450px;
height: 190px;
top: 50%;
left: 50%;
img {
display: block;
width: 190px;
height: 190px;
float: left;
}
.infoBox {
float: left;
padding: 0 0 0 10px;
.title {
height: 40px;
line-height: 40px;
margin-top: 36px;
span {
background: -webkit-linear-gradient(#ffffff, #75e8ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 32px;
font-weight: 500;
}
}
.count {
font-size: 24px;
padding: 18px 0 0 0;
span.numb {
font-size: 64px;
display: inline-block;
padding: 0 5px 0 0;
}
}
}
}
}
</style>

View File

@ -0,0 +1,111 @@
.allBox {
width: 1920px;
height: 3240px;
margin: 0 auto;
background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
background-size: 100%;
position: relative;
}
ul.bigBox {
display: flex;
justify-content: center;
flex-wrap: wrap;
li.mainBox {
width: 600px;
height: 1000px;
margin: 15px;
background: url("~@/assets/images/largeScreen/mainBox-bg.png") no-repeat;
background-size: auto 100%;
background-position: center bottom;
.title {
height: 34px;
line-height: 34px;
background: url("~@/assets/images/largeScreen/mainBox-title.png")
no-repeat;
background-size: 100% 100%;
padding: 0 0 0 20px;
span {
background: -webkit-linear-gradient(#dbf9ff, #a9f0ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 18px;
}
}
.contentBox {
height: 966px;
border: 1px solid transparent;
display: flex;
justify-content: space-evenly;
flex-direction: column;
.dataBox {
margin: 0 auto;
width: 560px;
min-height: 40px;
background: url("~@/assets/images/largeScreen/dataBox-line-bg.png")
no-repeat;
background-position: center bottom;
overflow: hidden;
padding: 0 0 15px;
.countBox {
display: flex;
justify-content: space-between;
height: 85px;
background: url("~@/assets/images/largeScreen/tongji3-jjrzs.png")
no-repeat left top;
.countTitle {
line-height: 70px;
font-size: 32px;
padding: 0 0 0 84px;
span {
background: -webkit-linear-gradient(#ffffff, #75e8ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 500;
}
}
.count {
line-height: 70px;
font-size: 24px;
.numb {
font-size: 48px;
display: inline-block;
padding: 0 15px 0 0;
text-shadow: 0 0 5px #2ab9d6, 0 0 20px #2ab9d6, 0 0 30px #2ab9d6;
}
}
}
ul {
li {
height: 70px;
line-height: 70px;
display: flex;
justify-content: space-between;
.liTitle {
font-size: 32px;
span {
background: -webkit-linear-gradient(#ffffff, #75e8ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 500;
}
.rankNumb {
display: inline-block;
padding: 0 10px 0 0;
}
}
.count {
line-height: 70px;
font-size: 24px;
.numb {
font-size: 48px;
display: inline-block;
padding: 0 15px 0 0;
text-shadow: 0 0 5px #2ab9d6, 0 0 20px #2ab9d6, 0 0 30px #2ab9d6;
}
}
}
}
}
}
}
}

View File

@ -0,0 +1,53 @@
<template>
<div class="allBox">
<!-- 头部 -->
<Head title="兴蜀来了平台业务数据"></Head>
<LeftBorder></LeftBorder>
<RightBorder></RightBorder>
<BottomBorder></BottomBorder>
<!-- 顶部统计 -->
<TopStatistics></TopStatistics>
<!-- 数据统计 -->
<ul class="bigBox">
<!-- 全职招聘情况 -->
<MainBoxOne></MainBoxOne>
<!-- 零工招聘情况 -->
<MainBoxTwo></MainBoxTwo>
<!-- 实习招聘情况 -->
<MainBoxThree></MainBoxThree>
<!-- 创业撮合情况 -->
<MainBoxFour></MainBoxFour>
<!-- 重点人群 -->
<MainBoxFive></MainBoxFive>
<!-- 技能培训 -->
<MainBoxSix></MainBoxSix>
</ul>
</div>
</template>
<script setup>
import { ref } from "vue";
import Head from "../../components/largeScreen/headHome.vue";
import LeftBorder from "../../components/largeScreen/leftBorder.vue";
import RightBorder from "../../components/largeScreen/rightBorder.vue";
import BottomBorder from "../../components/largeScreen/bottomBorder.vue";
import TopStatistics from "./components/topStatistics";
import MainBoxOne from "./components/mainBoxOne";
import MainBoxTwo from "./components/mainBoxTwo";
import MainBoxThree from "./components/mainBoxThree";
import MainBoxFour from "./components/mainBoxFour";
import MainBoxFive from "./components/mainBoxFive";
import MainBoxSix from "./components/mainBoxSix";
// 定义标题名称
const title = "三级劳务体系⼈员数据";
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
<style lang="scss">
#app {
overflow: auto !important;
}
</style>