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-23 09:02:40 +08:00
parent dd19b3ee22
commit 2ed80d527d
18 changed files with 1082 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
src/views/recruitment/layout/centerModel.vue
View File

@ -2,24 +2,53 @@
<div class="contentWrapper">
<div class="rowContent">
<div class="modelWrapper">
<template v-for="(item, index) in modelContentList" :key="index">
<div class="modelContent">
<div class="num">{{ item.num }}</div>
<div class="label">{{ item.label }}</div>
</div>
</template>
<div
class="modelContent"
v-for="(item, index) in modelContentList"
:key="index"
:class="isactive == index ? 'active' : ''"
@click="onacitve(index)"
>
<div class="num">{{ item.num }}</div>
<div class="label">{{ item.label }}</div>
</div>
</div>
</div>
<div class="content">
<div class="content" v-show="isactive == -1">
<div class="num">780,000</div>
<div class="label">人口总数</div>
</div>
<div class="hjrkDialogBox" v-show="isactive != -1">
<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>
</ul>
<div class="barBox" ref="enterpriseTwoRef"></div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { ref, reactive, onMounted } from "vue";
const isactive = ref(-1);
const tabsActive = ref(0);
const onacitve = (index) => {
console.log(index, "index");
//将点击的元素的索引赋值给isactive变量 , 每次点击都更改变量的值
isactive.value = index;
console.log(isactive.value, "isactive");
};
const modelContentList = ref([
{
@ -51,6 +80,106 @@ const modelContentList = ref([
label: "领金人员"
}
]);
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: [480, 340, 570, 230, 340, 120, 90],
// 设置柱状图的数值
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)" }
]
}
}
}
]
};
// 生命周期钩子
onMounted(() => {
if (enterpriseTwoRef.value) {
const chart = echarts.init(enterpriseTwoRef.value);
// 设置option
chart.setOption(option);
}
});
</script>
<style lang="scss" scoped>
@ -72,7 +201,7 @@ const modelContentList = ref([
align-items: center;
padding-bottom: 9.46875vw;
margin-top: 10.90625vw;
margin-top: 12.90625vw;
background: url("~@/assets/recruitment/content_bg.svg") no-repeat;
background-size: 100% 100%;
width: 52.46vw;
@ -92,7 +221,6 @@ const modelContentList = ref([
color: #cbf2fa;
}
}
.modelWrapper {
display: flex;
flex-wrap: wrap;
@ -108,7 +236,7 @@ const modelContentList = ref([
height: 6.667vw;
padding: 0.625vw 0;
margin: 0 0.7vw 1.2vw;
cursor: pointer;
.num {
font-family: PingFang SC, PingFang SC;
font-size: 1.667vw;
@ -130,6 +258,66 @@ const modelContentList = ref([
&:nth-last-child(3) {
margin-left: 8vw;
}
&.active .num {
color: red;
}
}
}
.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;
}
}
}