DEV_ZZ/rsxm-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

兴蜀大屏轮播组件部分提交

Browse Source
This commit is contained in:
王捷
2025-09-18 15:58:57 +08:00
parent e79759e000
commit dd19b3ee22
19 changed files with 1119 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
src/views/recruitment/index.vue
View File

@ -2,97 +2,103 @@
<div class="bigScrenn">
<!-- 头部 -->
<Head title="兴蜀人力数据概览"></Head>
<div class="asidemodel transition modelImgleft " :style="{ left: isOpen_L ? '1vw' : '-22.369vw' }">
<enterprise-employment-card title="企业用工结构分布" description="200.000 家企业注册">
<template #card>
<carousel>
<!-- 自定义slide内容 -->
<template #slide="{ slide, index }">
<div class="custom-slide">
<div class="custom-slide-inner">
<div class="custom-slide-content tc">
<div>第一产业需求</div>
<div class="flex just-between align-center col">
<div class="">
<div class="title">岗位种类数</div>
<div>480人</div>
</div>
<div class="">
<div class="title">岗位人员数</div>
<div>480人</div>
</div>
</div>
</div>
</div>
<div class="custom-slide-inner">
<div class="custom-slide-content tc">
<div>第二产业需求</div>
<div class="flex just-between align-center col">
<div class="">
<div class="title">岗位种类数</div>
<div>480人</div>
</div>
<div class="">
<div class="title">岗位人员数</div>
<div>480人</div>
</div>
</div>
</div>
</div>
<div class="custom-slide-inner">
<div class="custom-slide-content tc">
<div>第三产业需求</div>
<div class="flex just-between align-center col">
<div class="">
<div class="title">岗位种类数</div>
<div>480人</div>
</div>
<div class="">
<div class="title">岗位人员数</div>
<div>480人</div>
</div>
</div>
</div>
</div>
</div>
</template>
</carousel>
</template>
<div
class="asidemodel transition modelImgleft"
:style="{ left: isOpen_L ? '1vw' : '-22.369vw' }"
>
<!-- 左1 -->
<enterprise-employment-card
:title="cardOneInfo.title"
:description="cardOneInfo.description"
:type1="cardOneInfo.type1"
:type2="cardOneInfo.type2"
>
<el-carousel
:interval="4000"
type="card"
height="17vw"
indicator-position="none"
:autoplay="true"
>
<el-carousel-item><EnterpriseEmploymentOne /></el-carousel-item>
<el-carousel-item><EnterpriseEmploymentTwo /></el-carousel-item>
<el-carousel-item><EnterpriseEmploymentThree /></el-carousel-item>
</el-carousel>
</enterprise-employment-card>
<!-- 左2 -->
<enterprise-employment-card
:title="cardTwoInfo.title"
:description="cardTwoInfo.description"
:type1="cardTwoInfo.type1"
:type2="cardTwoInfo.type2"
style="margin-top: 0.625vw"
>
<costom-caed />
</enterprise-employment-card>
<div style="margin-top: 0.625vw">
<enterprise-employment-card title="服务网络覆盖情况" description="5000 家人力资源行业机构">
<template #card>
<costom-caed />
</template>
</enterprise-employment-card>
</div>
</div>
<!-- 中间 -->
<CenterModel></CenterModel>
<div class="asidemodel asidemodelR transition modelImgright" :style="{ right: isOpen_R ? '1vw' : '-22.369vw' }">
<enterprise-employment-card title="高校人才供给能力" description="10,000 毕业生" />
<div style="margin-top: 0.625vw">
<enterprise-employment-card title="三级劳务体系建设" description="10,000 名平台劳务经纪人" />
</div>
<div
class="asidemodel asidemodelR transition modelImgright"
:style="{ right: isOpen_R ? '1vw' : '-22.369vw' }"
>
<!-- 右1 -->
<enterprise-employment-card
:title="cardThreeInfo.title"
:description="cardThreeInfo.description"
:type1="cardThreeInfo.type1"
:type2="cardThreeInfo.type2"
>
<el-carousel
:interval="4000"
type="card"
height="17vw"
indicator-position="none"
:autoplay="true"
>
<el-carousel-item><CollegeTalentsOne /></el-carousel-item>
<el-carousel-item><CollegeTalentsTwo /></el-carousel-item>
<el-carousel-item><CollegeTalentsThree /></el-carousel-item>
</el-carousel>
</enterprise-employment-card>
<!-- 右2 -->
<enterprise-employment-card
:title="cardFourInfo.title"
:description="cardFourInfo.description"
:type1="cardFourInfo.type1"
:type2="cardFourInfo.type2"
style="margin-top: 0.625vw"
/>
</div>
<div class="last_icon"></div>
<!-- 弹窗 -->
<HomeDialogInfo v-model="dialogShow" />
</div>
</template>
<script>
export default {
components: {
EnterpriseEmploymentCard
}
};
</script>
<script setup>
import Head from './layout/headHome.vue'
import CenterModel from './layout/centerModel.vue'
import Head from "./layout/headHome.vue";
import CenterModel from "./layout/centerModel.vue";
import HomeDialogInfo from "@/components/homeDialogInfo/index.vue";
import openWebSocket from "@/utils/webSocket.js";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import EnterpriseEmploymentCard from "@/views/recruitment/components/enterpriseEmploymentCard.vue";
import CostomCaed from "@/views/recruitment/components/costomCaed.vue";
import Carousel from "@/views/recruitment/components/carousel.vue";
import EnterpriseEmploymentOne from "./card/EnterpriseEmploymentOne.vue";
import EnterpriseEmploymentTwo from "./card/EnterpriseEmploymentTwo.vue";
import EnterpriseEmploymentThree from "./card/EnterpriseEmploymentThree.vue";
import CollegeTalentsOne from "./card/CollegeTalentsOne.vue";
import CollegeTalentsTwo from "./card/CollegeTalentsTwo.vue";
import CollegeTalentsThree from "./card/CollegeTalentsThree.vue";
const { proxy } = getCurrentInstance();
const isOpen_L = ref(true); //展开菜单-左边
@ -102,18 +108,74 @@ const asideMeun = reactive({
leftMeun: [
{ mkMc: "产业产值、岗位缺口趋势", mkLydz: "cycz_gwqk_card" },
{ mkMc: "重点保供企业分布", mkLydz: "zdbgqy_card" },
{ mkMc: "缺口岗位TOP10", mkLydz: "zdqyqkxq_card" },
{ mkMc: "缺口岗位TOP10", mkLydz: "zdqyqkxq_card" }
],
rightMeun: [
{ mkMc: "用工供需风险预警", mkLydz: "yggxfxyj_card" },
{ mkMc: "劳务市场异常预警", mkLydz: "lwscycyj_card" },
{ mkMc: "合规监管预警", mkLydz: "hgjgyj_card" },
{ mkMc: "服务质量预警", mkLydz: "fwzlyj_card" }
],
})
]
});
const cardOneInfo = {
title: "企业用工结构分布",
description: "200.000 家企业注册",
type1: {
title: "岗位种类数",
count: "200",
class: "modelItem1"
},
type2: {
title: "岗位人员数",
count: "200",
class: "modelItem2"
}
};
const cardTwoInfo = {
title: "服务网络覆盖情况",
description: "5000 家人力资源行业机构",
type1: {
title: "公共服务站点",
count: "200",
class: "modelItem1"
},
type2: {
title: "其他服务机构",
count: "200",
class: "modelItem1"
}
};
const cardThreeInfo = {
title: "高校人才供给能力",
description: "10000 毕业生",
type1: {
title: "高校数",
count: "23",
class: "modelItem2"
},
type2: {
title: "促就业人数",
count: "100000",
class: "modelItem2"
}
};
const cardFourInfo = {
title: "三级劳务体系建设",
description: "10000 名平台劳务经纪人",
type1: {
title: "合作社",
count: "400",
class: "modelItem2"
},
type2: {
title: "劳务经纪人",
count: "100000",
class: "modelItem2"
}
};
onMounted(() => {
getWebSocketData()
})
getWebSocketData();
});
// 获取WebSocket数据
function getWebSocketData() {
let dws = openWebSocket.getInstance();
@ -121,7 +183,7 @@ function getWebSocketData() {
// 接收发送消息
dws.ws.onmessage = (e) => {
let dataInfo = JSON.parse(e.data).data;
console.log(dataInfo, 'dataInfo');
console.log(dataInfo, "dataInfo");
if (dataInfo == 1) {
dialogShow.value = true;
} else {
@ -135,37 +197,6 @@ function getWebSocketData() {
<style lang="scss" scoped>
@import "components/recruitment.scss";
.custom-slide {
padding: 0.521vw;
.custom-slide-inner {
width: 15.99vw;
height: 4.323vw;
background: url("~@/assets/recruitment/card_item_bg.svg") no-repeat center center;
background-size: cover;
margin-bottom: 1.042vw;
.custom-slide-content {
color: #CBF2FA;
font-size: 0.625vw;
height: 4.323vw;
padding: 0.417vw 1.25vw 0 5.677vw;
.title {
margin-bottom: 0.26vw;
}
.col {
margin-top: 0.78125vw;
}
}
&:last-child {
margin-bottom: 0;
}
}
}
.last_icon {
position: fixed;
left: 0;
@ -179,4 +210,19 @@ function getWebSocketData() {
.transition {
transition: all 0.5s;
}
.el-carousel {
margin-top: 0.5vw;
}
.el-carousel__item {
height: 100%;
background: url("~@/assets/images/recruitment/card-bg.png") no-repeat #000;
background-size: 100% 100%;
}
.el-carousel__item.is-active {
width: 17vw;
margin-left: -3.85vw;
}
:deep(.el-carousel__mask) {
display: none;
}
</style>