183 lines
5.8 KiB
Vue
183 lines
5.8 KiB
Vue
|
<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>
|