619 lines
14 KiB
Vue
619 lines
14 KiB
Vue
<template>
|
||
<div class="contentWrapper">
|
||
<div class="rowContent">
|
||
<div class="modelWrapper">
|
||
<div
|
||
class="modelContent"
|
||
v-for="(item, index) in modelContentList"
|
||
:key="index"
|
||
:class="isactive == index ? 'active' : ''"
|
||
@click="onacitve(index, item.label)"
|
||
>
|
||
<div class="num">{{ item.num }}</div>
|
||
<div class="label">{{ item.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="content"
|
||
v-show="isactive != 0 && isactive != 4 && isactive != 5"
|
||
>
|
||
<div class="num">81.1万</div>
|
||
<div class="label">人口总数</div>
|
||
</div>
|
||
<!-- <transition name="fade"> -->
|
||
<div class="hjrkDialogBox" v-show="isactive == 0">
|
||
<div class="titleBox">
|
||
<div class="title">户籍人口</div>
|
||
<div class="close" @click="isactive = -1"></div>
|
||
</div>
|
||
<ul class="tabsBox">
|
||
<!-- <li
|
||
v-for="(item, index) in tabsDate.tabs"
|
||
:key="index"
|
||
:class="tabsActive == index ? 'active' : ''"
|
||
@click="tabsActive = index"
|
||
>
|
||
{{ item }}
|
||
</li> -->
|
||
<li
|
||
v-for="(item, index) in tabsDate.tabs"
|
||
:key="index"
|
||
:class="tabsActive == index ? 'active' : ''"
|
||
@click="tabsActive = 0"
|
||
>
|
||
{{ item }}
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="barBox" ref="enterpriseTwoRef"></div>
|
||
</div>
|
||
<!-- </transition> -->
|
||
<div class="hjrkDialogBox" v-show="isactive == 5">
|
||
<div class="titleBox">
|
||
<div class="title">高中端人才</div>
|
||
<div class="close" @click="isactive = -1"></div>
|
||
</div>
|
||
<ul class="statisticOne">
|
||
<li v-for="(item, index) in statisticData" :key="index">
|
||
<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.count }}</span
|
||
>（{{ item.unit }}）
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="hjrkDialogBox" v-show="isactive == 4">
|
||
<div class="titleBox">
|
||
<div class="title">新增就业群体</div>
|
||
<div class="close" @click="isactive = -1"></div>
|
||
</div>
|
||
<div class="pieBigBox">
|
||
<div class="pieMain">
|
||
<div class="pieBox" ref="pieRef"></div>
|
||
<div class="pieTitle">新增就业群体</div>
|
||
</div>
|
||
<ul class="pieLsit">
|
||
<li>
|
||
<div><span class="blockOne"></span><span>城镇新增就业</span></div>
|
||
<div>
|
||
<span class="numb">目标7200人</span
|
||
><span class="proportion">完成5445人</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div><span class="blockTwo"></span><span>失业人员再就业</span></div>
|
||
<div>
|
||
<span class="numb">目标1900人</span
|
||
><span class="proportion">完成1528人</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<span class="blockThree"></span><span>就业困难人员再就业</span>
|
||
</div>
|
||
<div>
|
||
<span class="numb">目标190人</span
|
||
><span class="proportion">完成125人</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from "vue";
|
||
import tongjiPxrs from "@/assets/images/largeScreen/tongji-pxrs.png";
|
||
import tongjiPxkc from "@/assets/images/largeScreen/tongji-pxkc.png";
|
||
import tongjiPxjg from "@/assets/images/largeScreen/tongji-pxjg.png";
|
||
const isactive = ref(-1);
|
||
const tabsActive = ref(0);
|
||
const dialogTitle = ref("户籍人口");
|
||
const onacitve = (index, label) => {
|
||
console.log(index, "index");
|
||
//将点击的元素的索引赋值给isactive变量 , 每次点击都更改变量的值
|
||
isactive.value = index;
|
||
dialogTitle.value = label;
|
||
console.log(isactive.value, "isactive");
|
||
};
|
||
|
||
const modelContentList = ref([
|
||
{
|
||
num: "65.33万",
|
||
label: "户籍人口"
|
||
},
|
||
{
|
||
num: "8.91万",
|
||
label: "流动人口"
|
||
},
|
||
{
|
||
num: "约27万",
|
||
label: "就业人群"
|
||
},
|
||
// {
|
||
// num: "13000",
|
||
// label: "待就业人群"
|
||
// },
|
||
{
|
||
num: "10.06万",
|
||
label: "灵活就业群体"
|
||
},
|
||
{
|
||
num: "0.54万",
|
||
label: "新增就业群体"
|
||
},
|
||
{
|
||
num: "2.2万",
|
||
label: "高中端人才"
|
||
},
|
||
{
|
||
num: "0.76万",
|
||
label: "领金人员"
|
||
}
|
||
]);
|
||
const statisticData = ref([
|
||
{
|
||
imgURL: tongjiPxjg,
|
||
title: "国家级领军人才",
|
||
count: "18",
|
||
unit: "人"
|
||
},
|
||
{
|
||
imgURL: tongjiPxjg,
|
||
title: "地方级领军型人才",
|
||
count: "45",
|
||
unit: "人"
|
||
},
|
||
{
|
||
imgURL: tongjiPxjg,
|
||
title: "博士",
|
||
count: "133",
|
||
unit: "人"
|
||
},
|
||
{
|
||
imgURL: tongjiPxjg,
|
||
title: "硕士",
|
||
count: "1012",
|
||
unit: "人"
|
||
},
|
||
{
|
||
imgURL: tongjiPxjg,
|
||
title: "本科",
|
||
count: "20792",
|
||
unit: "人"
|
||
}
|
||
]);
|
||
const tabsDate = reactive({
|
||
tabs: [
|
||
"学历",
|
||
"工种",
|
||
"性别",
|
||
"年龄段",
|
||
"原户籍地",
|
||
"所在产业",
|
||
"所在行业",
|
||
"公司规模"
|
||
],
|
||
activeIndex: 0
|
||
});
|
||
|
||
import * as echarts from "echarts";
|
||
const enterpriseTwoRef = ref(null);
|
||
const option = {
|
||
// 设置图形位置
|
||
grid: {
|
||
top: "10%",
|
||
left: "8%",
|
||
right: "5%",
|
||
bottom: "11%"
|
||
},
|
||
// 设置图例
|
||
// legend: {
|
||
// itemWidth: 10, // 方块宽度
|
||
// itemHeight: 10, // 方块高度
|
||
// textStyle: {
|
||
// color: "#B2D9DF" // 文字颜色
|
||
// },
|
||
// x: "center", // 图例在左（left）、右（right）、居中（center）、100px
|
||
// y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
|
||
// padding: [15, 50, 0, 0] // 图例[距上右下左方距离
|
||
// },
|
||
xAxis: {
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#CBF2FA" // 文字颜色
|
||
}
|
||
},
|
||
|
||
type: "category",
|
||
data: ["大专及以上", "高中(含中专)", "初中", "小学"]
|
||
},
|
||
yAxis: {
|
||
//网格线
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: ["#A1C7CD"], // 线颜色
|
||
opacity: 0.2 // 透明度
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#CBF2FA" // 文字颜色
|
||
}
|
||
},
|
||
type: "value"
|
||
},
|
||
series: [
|
||
{
|
||
name: "岗位种类数",
|
||
type: "bar",
|
||
showBackground: true,
|
||
barWidth: 20,
|
||
data: [71013, 105716, 266225, 210356],
|
||
// 设置柱状图的数值
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
color: "#30DCFF"
|
||
},
|
||
itemStyle: {
|
||
//渐变色
|
||
color: {
|
||
type: "linear",
|
||
x: 1,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "rgba(48, 220, 255, 1)" },
|
||
{ offset: 1, color: "rgba(48, 220, 255, 0.06)" }
|
||
]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
const pieRef = ref(null);
|
||
const optionPie = {
|
||
// 设置图形位置
|
||
tooltip: {
|
||
trigger: "item"
|
||
},
|
||
|
||
series: [
|
||
{
|
||
name: "新增就业群里",
|
||
type: "pie",
|
||
radius: ["65%", "80%"],
|
||
avoidLabelOverlap: false,
|
||
padAngle: 5,
|
||
itemStyle: {
|
||
borderRadius: 1
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: "center"
|
||
},
|
||
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 5445, name: "城镇新增就业", itemStyle: { color: "#58A8FF" } },
|
||
{
|
||
value: 1528,
|
||
name: "失业人员再就业",
|
||
itemStyle: { color: "#30DCFF" }
|
||
},
|
||
{
|
||
value: 125,
|
||
name: "就业困难人员再就业",
|
||
itemStyle: { color: "#ffffff" }
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
// 生命周期钩子
|
||
onMounted(() => {
|
||
if (enterpriseTwoRef.value) {
|
||
const chart = echarts.init(enterpriseTwoRef.value);
|
||
// 设置option
|
||
chart.setOption(option);
|
||
}
|
||
if (pieRef.value) {
|
||
const chart = echarts.init(pieRef.value);
|
||
// 设置option
|
||
chart.setOption(optionPie);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.contentWrapper {
|
||
position: absolute;
|
||
top: 9.53125vw;
|
||
left: 23.58vw;
|
||
width: 52.46vw;
|
||
|
||
.rowContent {
|
||
position: absolute;
|
||
width: 100%;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding-bottom: 9.46875vw;
|
||
|
||
margin-top: 12.90625vw;
|
||
background: url("~@/assets/recruitment/content_bg.svg") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 52.46vw;
|
||
height: 31.667vw;
|
||
|
||
.num {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-size: 2.667vw;
|
||
color: #30dcff;
|
||
}
|
||
|
||
.label {
|
||
margin-top: 0.521vw;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 0.833vw;
|
||
color: #cbf2fa;
|
||
}
|
||
}
|
||
.modelWrapper {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
.modelContent {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
background: url("~@/assets/recruitment/model_bg.svg") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 10.729vw;
|
||
height: 6.667vw;
|
||
padding: 0.625vw 0;
|
||
margin: 0 1.1vw 1.2vw;
|
||
cursor: pointer;
|
||
.num {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-size: 1.667vw;
|
||
color: #30dcff;
|
||
}
|
||
|
||
.label {
|
||
margin-top: 0.521vw;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 0.833vw;
|
||
color: #cbf2fa;
|
||
}
|
||
|
||
// &:nth-last-child(1) {
|
||
// margin-right: 8vw;
|
||
// }
|
||
|
||
// &:nth-last-child(3) {
|
||
// margin-left: 8vw;
|
||
// }
|
||
&.active {
|
||
background: url("~@/assets/images/recruitment/model-active-bg.png")
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
.num {
|
||
background: -webkit-linear-gradient(#fff4b3, #ffd901);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.hjrkDialogBox {
|
||
top: 17vw;
|
||
left: 50%;
|
||
position: absolute;
|
||
width: 52.604vw;
|
||
height: 27.135vw;
|
||
background: url("~@/assets/images/recruitment/hjrk-dialog-bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-left: -26.302vw;
|
||
z-index: 9999;
|
||
.titleBox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 2.604vw;
|
||
.title {
|
||
font-size: 1vw;
|
||
height: 100%;
|
||
line-height: 2.604vw;
|
||
padding: 0 0 0 1.042vw;
|
||
font-weight: bold;
|
||
}
|
||
.close {
|
||
width: 1.5625vw;
|
||
height: 1.5625vw;
|
||
background: url("~@/assets/images/recruitment/hjrk-dialog-close.png")
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
margin: 0.5vw;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
ul.tabsBox {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 1vw 7vw;
|
||
li {
|
||
width: 3.958vw;
|
||
height: 1.354vw;
|
||
line-height: 1.354vw;
|
||
text-align: center;
|
||
font-size: 0.625vw;
|
||
background: url("~@/assets/images/recruitment/tabs-bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
li.active {
|
||
background: url("~@/assets/images/recruitment/tabs-active-bg.png")
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.barBox {
|
||
width: 40vw;
|
||
height: 20vw;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
ul.statisticOne {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
padding-top: 3vw;
|
||
li {
|
||
// width: 450px;
|
||
height: 9vw;
|
||
margin: 0 0;
|
||
// 第一排的前2个元素（第一排显示2个）
|
||
&:nth-child(-n + 2) {
|
||
width: 20vw; // 减去margin值
|
||
}
|
||
|
||
// // 第二排的第3-5个元素（第二排显示3个）
|
||
// &:nth-child(n + 3):nth-child(-n + 5) {
|
||
// width: calc(33.33% - 20px); // 减去margin值
|
||
// }
|
||
|
||
img {
|
||
display: block;
|
||
width: 7vw;
|
||
height: 7vw;
|
||
float: left;
|
||
}
|
||
.infoBox {
|
||
float: left;
|
||
padding: 0 0 0 0.5vw;
|
||
.title {
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
margin-top: 1vw;
|
||
span {
|
||
background: -webkit-linear-gradient(#ffffff, #75e8ff);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-size: 1.3vw;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
.count {
|
||
font-size: 1.4vw;
|
||
padding: 0.5vw 0 0 0;
|
||
span.numb {
|
||
font-size: 2.2vw;
|
||
display: inline-block;
|
||
padding: 0 0.5vw 0 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.pieBigBox {
|
||
width: 40vw;
|
||
margin: 1vw auto 0;
|
||
// height: 274px;
|
||
.pieMain {
|
||
position: relative;
|
||
border: 1px solid transparent;
|
||
float: left;
|
||
.pieBox {
|
||
margin: 0 auto;
|
||
margin-top: 3vw;
|
||
width: 15vw;
|
||
height: 15vw;
|
||
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
|
||
center;
|
||
background-size: 100%;
|
||
border: 1px solid transparent;
|
||
}
|
||
.pieTitle {
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 100%;
|
||
text-align: center;
|
||
z-index: 10;
|
||
margin-top: 1vw;
|
||
font-size: 1vw;
|
||
}
|
||
}
|
||
ul.pieLsit {
|
||
float: left;
|
||
margin: 2.6vw 0 0 2vw;
|
||
border: 1px solid transparent;
|
||
padding: 1vw 0 0 0;
|
||
width: 20vw;
|
||
li {
|
||
// font-size: 16px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 3vw;
|
||
padding: 0 1vw;
|
||
background: rgba(203, 242, 250, 0.2);
|
||
border-radius: 4px 4px 4px 4px;
|
||
border: 1px solid rgba(203, 242, 250, 0.2);
|
||
margin-top: 1vw;
|
||
font-size: 0.7vw;
|
||
> div {
|
||
height: 100%;
|
||
line-height: 3vw;
|
||
}
|
||
.blockOne,
|
||
.blockTwo,
|
||
.blockThree,
|
||
.blockFour {
|
||
display: inline-block;
|
||
width: 0.8vw;
|
||
height: 0.8vw;
|
||
margin-right: 1vw;
|
||
}
|
||
.blockOne {
|
||
background-color: #58a8ff;
|
||
}
|
||
.blockTwo {
|
||
background-color: #30dcff;
|
||
}
|
||
.blockThree {
|
||
background-color: #ffffff;
|
||
}
|
||
.blockFour {
|
||
background-color: #dd7d4d;
|
||
}
|
||
.proportion {
|
||
display: inline-block;
|
||
width: 4.5vw;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|