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:
maojiacai
2025-08-22 18:12:29 +08:00
parent 4fc95516d6
commit 40d0b885af
25 changed files with 30088 additions and 4490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
src/views/recruitment/index.vue Normal file
View File

@ -0,0 +1,182 @@
<template>
<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>
</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>
<div class="last_icon"></div>
<!-- 弹窗 -->
<HomeDialogInfo v-model="dialogShow" />
</div>
</template>
<script setup>
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";
const { proxy } = getCurrentInstance();
const isOpen_L = ref(true); //展开菜单-左边
const isOpen_R = ref(true); //展开菜单 - 右边
const dialogShow = ref(false);
const asideMeun = reactive({
leftMeun: [
{ mkMc: "产业产值、岗位缺口趋势", mkLydz: "cycz_gwqk_card" },
{ mkMc: "重点保供企业分布", mkLydz: "zdbgqy_card" },
{ mkMc: "缺口岗位TOP10", mkLydz: "zdqyqkxq_card" },
],
rightMeun: [
{ mkMc: "用工供需风险预警", mkLydz: "yggxfxyj_card" },
{ mkMc: "劳务市场异常预警", mkLydz: "lwscycyj_card" },
{ mkMc: "合规监管预警", mkLydz: "hgjgyj_card" },
{ mkMc: "服务质量预警", mkLydz: "fwzlyj_card" }
],
})
onMounted(() => {
getWebSocketData()
})
// 获取WebSocket数据
function getWebSocketData() {
let dws = openWebSocket.getInstance();
dws.connect((res) => {
// 接收发送消息
dws.ws.onmessage = (e) => {
let dataInfo = JSON.parse(e.data).data;
console.log(dataInfo, 'dataInfo');
if (dataInfo == 1) {
dialogShow.value = true;
} else {
dialogShow.value = false;
}
};
});
}
</script>
<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;
right: 0;
height: 4.667vw;
bottom: 0;
background: url("~@/assets/recruitment/botton_bg.svg") no-repeat center center;
background-size: cover;
}
.transition {
transition: all 0.5s;
}
</style>