2025-08-22 18:12:29 +08:00
|
|
|
<template>
|
|
|
|
|
<div class="bigScrenn">
|
|
|
|
|
<!-- 头部 -->
|
|
|
|
|
<Head title="兴蜀人力数据概览"></Head>
|
2025-09-18 15:58:57 +08:00
|
|
|
<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 />
|
2025-08-22 18:12:29 +08:00
|
|
|
</enterprise-employment-card>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 中间 -->
|
|
|
|
|
<CenterModel></CenterModel>
|
|
|
|
|
|
2025-09-18 15:58:57 +08:00
|
|
|
<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"
|
2025-09-23 09:02:40 +08:00
|
|
|
>
|
|
|
|
|
<el-carousel
|
|
|
|
|
:interval="4000"
|
|
|
|
|
type="card"
|
|
|
|
|
height="17vw"
|
|
|
|
|
indicator-position="none"
|
|
|
|
|
:autoplay="true"
|
|
|
|
|
>
|
|
|
|
|
<el-carousel-item><LaborSystemOne /></el-carousel-item>
|
|
|
|
|
<el-carousel-item><LaborSystemTwo /></el-carousel-item>
|
|
|
|
|
<el-carousel-item><LaborSystemThree /></el-carousel-item>
|
|
|
|
|
<el-carousel-item><LaborSystemFour /></el-carousel-item>
|
|
|
|
|
</el-carousel>
|
|
|
|
|
</enterprise-employment-card>
|
2025-08-22 18:12:29 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="last_icon"></div>
|
|
|
|
|
<!-- 弹窗 -->
|
|
|
|
|
<HomeDialogInfo v-model="dialogShow" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
2025-09-18 15:58:57 +08:00
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
EnterpriseEmploymentCard
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
2025-08-22 18:12:29 +08:00
|
|
|
<script setup>
|
2025-09-18 15:58:57 +08:00
|
|
|
import Head from "./layout/headHome.vue";
|
|
|
|
|
import CenterModel from "./layout/centerModel.vue";
|
2025-08-22 18:12:29 +08:00
|
|
|
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";
|
2025-09-18 15:58:57 +08:00
|
|
|
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";
|
2025-09-23 09:02:40 +08:00
|
|
|
import LaborSystemOne from "./card/LaborSystemOne.vue";
|
|
|
|
|
import LaborSystemTwo from "./card/LaborSystemTwo.vue";
|
|
|
|
|
import LaborSystemThree from "./card/LaborSystemThree.vue";
|
|
|
|
|
import LaborSystemFour from "./card/LaborSystemFour.vue";
|
2025-08-22 18:12:29 +08:00
|
|
|
|
|
|
|
|
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" },
|
2025-09-18 15:58:57 +08:00
|
|
|
{ mkMc: "缺口岗位TOP10", mkLydz: "zdqyqkxq_card" }
|
2025-08-22 18:12:29 +08:00
|
|
|
],
|
|
|
|
|
rightMeun: [
|
|
|
|
|
{ mkMc: "用工供需风险预警", mkLydz: "yggxfxyj_card" },
|
|
|
|
|
{ mkMc: "劳务市场异常预警", mkLydz: "lwscycyj_card" },
|
|
|
|
|
{ mkMc: "合规监管预警", mkLydz: "hgjgyj_card" },
|
|
|
|
|
{ mkMc: "服务质量预警", mkLydz: "fwzlyj_card" }
|
2025-09-18 15:58:57 +08:00
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
const cardOneInfo = {
|
|
|
|
|
title: "企业用工结构分布",
|
2025-10-21 10:19:24 +08:00
|
|
|
description: "7万 家企业注册",
|
2025-09-18 15:58:57 +08:00
|
|
|
type1: {
|
|
|
|
|
title: "岗位种类数",
|
2025-10-21 10:19:24 +08:00
|
|
|
count: "约2509",
|
2025-09-18 15:58:57 +08:00
|
|
|
class: "modelItem1"
|
|
|
|
|
},
|
|
|
|
|
type2: {
|
|
|
|
|
title: "岗位人员数",
|
2025-10-21 10:19:24 +08:00
|
|
|
count: "约12万",
|
2025-09-18 15:58:57 +08:00
|
|
|
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"
|
|
|
|
|
}
|
|
|
|
|
};
|
2025-08-22 18:12:29 +08:00
|
|
|
onMounted(() => {
|
2025-09-18 15:58:57 +08:00
|
|
|
getWebSocketData();
|
|
|
|
|
});
|
2025-08-22 18:12:29 +08:00
|
|
|
// 获取WebSocket数据
|
|
|
|
|
function getWebSocketData() {
|
|
|
|
|
let dws = openWebSocket.getInstance();
|
|
|
|
|
dws.connect((res) => {
|
|
|
|
|
// 接收发送消息
|
|
|
|
|
dws.ws.onmessage = (e) => {
|
|
|
|
|
let dataInfo = JSON.parse(e.data).data;
|
2025-09-18 15:58:57 +08:00
|
|
|
console.log(dataInfo, "dataInfo");
|
2025-08-22 18:12:29 +08:00
|
|
|
if (dataInfo == 1) {
|
|
|
|
|
dialogShow.value = true;
|
|
|
|
|
} else {
|
|
|
|
|
dialogShow.value = false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import "components/recruitment.scss";
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
2025-09-18 15:58:57 +08:00
|
|
|
.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;
|
|
|
|
|
}
|
2025-08-22 18:12:29 +08:00
|
|
|
</style>
|
