兴蜀大屏调整
This commit is contained in:
@ -3,6 +3,10 @@
|
||||
<div>
|
||||
<div class="carcTitle">促就业⼈数清单</div>
|
||||
<ul class="schoolLsit">
|
||||
<li>
|
||||
<div class="name">四川育英医养科技技工学校</div>
|
||||
<div><span class="numb">523</span><span>人</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="name">四川矿产机电技师学院</div>
|
||||
<div><span class="numb">1593</span><span>人</span></div>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>9人</div>
|
||||
<div>60个</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
@ -22,11 +22,11 @@
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>34人</div>
|
||||
<div>559个</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>18920人</div>
|
||||
<div>70742人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37,11 +37,11 @@
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>14人</div>
|
||||
<div>146个</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>5037人</div>
|
||||
<div>6162人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,7 +14,7 @@ const option = {
|
||||
top: "17%",
|
||||
left: "15%",
|
||||
right: "5%",
|
||||
bottom: "15%"
|
||||
bottom: "20%"
|
||||
},
|
||||
// 设置图例
|
||||
legend: {
|
||||
@ -68,7 +68,7 @@ const option = {
|
||||
type: "line",
|
||||
showBackground: true,
|
||||
barWidth: 16,
|
||||
data: [42, 7, 15],
|
||||
data: [269, 158, 20],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
@ -96,7 +96,7 @@ const option = {
|
||||
type: "line",
|
||||
showBackground: true,
|
||||
barWidth: 16,
|
||||
data: [10230, 4509, 3201],
|
||||
data: [64911, 4509, 3201],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
|
||||
@ -14,7 +14,7 @@ const option = {
|
||||
top: "15%",
|
||||
left: "15%",
|
||||
right: "5%",
|
||||
bottom: "15%"
|
||||
bottom: "20%"
|
||||
},
|
||||
// 设置图例
|
||||
legend: {
|
||||
@ -68,7 +68,7 @@ const option = {
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [31, 37, 45, 46],
|
||||
data: [93, 231, 413, 451],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
@ -96,7 +96,7 @@ const option = {
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [190, 2106, 8910, 13431],
|
||||
data: [451, 2110, 19356, 57083],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
|
||||
130
src/views/recruitment/components/jyknryzjy/juzhudi.vue
Normal file
130
src/views/recruitment/components/jyknryzjy/juzhudi.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="tableBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%; height: 19.5vw; overflow: auto"
|
||||
>
|
||||
<el-table-column label="序号" width="80">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="人员所属街道分布" />
|
||||
<el-table-column prop="count" label="人员数量" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
const tableData = ref([
|
||||
{
|
||||
name: "重阳街道",
|
||||
count: "130人"
|
||||
},
|
||||
{
|
||||
name: "崇庆街道",
|
||||
count: "37人"
|
||||
},
|
||||
{
|
||||
name: "积马街道",
|
||||
count: "41人"
|
||||
},
|
||||
{
|
||||
name: "大划街道",
|
||||
count: "22人"
|
||||
},
|
||||
{
|
||||
name: "三江街道",
|
||||
count: "39人"
|
||||
},
|
||||
{
|
||||
name: "江源街道",
|
||||
count: "22人"
|
||||
},
|
||||
{
|
||||
name: "白头镇",
|
||||
count: "40人"
|
||||
},
|
||||
{
|
||||
name: "隆兴镇",
|
||||
count: "31人"
|
||||
},
|
||||
{
|
||||
name: "道明镇",
|
||||
count: "30人"
|
||||
},
|
||||
{
|
||||
name: "街子镇",
|
||||
count: "37人"
|
||||
},
|
||||
{
|
||||
name: "文井江镇",
|
||||
count: "4人"
|
||||
},
|
||||
{
|
||||
name: "怀远镇",
|
||||
count: "54人"
|
||||
},
|
||||
{
|
||||
name: "元通镇",
|
||||
count: "20人"
|
||||
},
|
||||
{
|
||||
name: "廖家镇",
|
||||
count: "29人"
|
||||
},
|
||||
{
|
||||
name: "观胜镇",
|
||||
count: "24人"
|
||||
},
|
||||
{
|
||||
name: "待核实",
|
||||
count: "95人"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tableBox {
|
||||
margin: 0 2vw;
|
||||
}
|
||||
.el-table {
|
||||
background-color: transparent;
|
||||
--el-table-border-color: rgba(22, 65, 85, 0.9);
|
||||
}
|
||||
::v-deep .el-table__header-wrapper {
|
||||
margin: 0 0 1px 0;
|
||||
}
|
||||
::v-deep .el-table .el-table__cell {
|
||||
padding: 0.6vw 0;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background-color: #164155 !important;
|
||||
color: #c4f3fe;
|
||||
margin: 0 0 2px 0;
|
||||
font-size: 0.7vw;
|
||||
}
|
||||
::v-deep .el-table tr {
|
||||
background-color: rgba(22, 65, 85, 0.5);
|
||||
}
|
||||
::v-deep .el-table tr:nth-child(even) {
|
||||
background-color: rgba(22, 65, 85, 0.9);
|
||||
}
|
||||
::v-deep .el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(22, 65, 85, 0.5);
|
||||
font-size: 0.7vw;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(22, 65, 85, 0.9);
|
||||
}
|
||||
::v-deep
|
||||
.el-table--enable-row-hover
|
||||
.el-table__body
|
||||
tr:hover
|
||||
> td.el-table__cell {
|
||||
background-color: rgb(16, 104, 171);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
174
src/views/recruitment/components/jyknryzjy/kunnan.vue
Normal file
174
src/views/recruitment/components/jyknryzjy/kunnan.vue
Normal file
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="pieBigBox">
|
||||
<div class="pieMain">
|
||||
<div class="pieBox" ref="pieRef"></div>
|
||||
<div class="pieTitle">
|
||||
<span style="font-size: 30px">20</span>人<br />困难大学生
|
||||
</div>
|
||||
</div>
|
||||
<ul class="pieLsit">
|
||||
<li>
|
||||
<div><span class="blockOne"></span><span>脱贫家庭</span></div>
|
||||
<div>
|
||||
<span class="numb">14人</span>
|
||||
<!-- <span class="proportion">49.2%</span> -->
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockTwo"></span><span>低保家庭</span></div>
|
||||
<div>
|
||||
<span class="numb">4人</span>
|
||||
<!-- <span class="proportion">36.8%</span> -->
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockThree"></span><span>残疾毕业生</span></div>
|
||||
<div>
|
||||
<span class="numb">2人</span>
|
||||
<!-- <span class="proportion">7.33%</span> -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
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: 14, name: "脱贫家庭", itemStyle: { color: "#58A8FF" } },
|
||||
{
|
||||
value: 4,
|
||||
name: "低保家庭",
|
||||
itemStyle: { color: "#30DCFF" }
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
name: "残疾毕业生",
|
||||
itemStyle: { color: "#ffffff" }
|
||||
}
|
||||
// {
|
||||
// value: 44,
|
||||
// name: "博士研究生学历",
|
||||
// itemStyle: { color: "#dd7d4d" }
|
||||
// }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (pieRef.value) {
|
||||
const chart = echarts.init(pieRef.value);
|
||||
// 设置option
|
||||
chart.setOption(optionPie);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pieBigBox {
|
||||
width: 40vw;
|
||||
// margin: 0.5vw auto 0;
|
||||
// height: 274px;
|
||||
.pieMain {
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
float: left;
|
||||
.pieBox {
|
||||
margin: 0 auto;
|
||||
margin-top: 1.5vw;
|
||||
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: 0vw 0 0 2vw;
|
||||
border: 1px solid transparent;
|
||||
padding: 2.5vw 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>
|
||||
163
src/views/recruitment/components/jyknryzjy/xingbie.vue
Normal file
163
src/views/recruitment/components/jyknryzjy/xingbie.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<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">349人</span><span class="proportion">53.3%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockTwo"></span><span>女性</span></div>
|
||||
<div>
|
||||
<span class="numb">306人</span><span class="proportion">46.7%</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
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: 349, name: "男性", itemStyle: { color: "#58A8FF" } },
|
||||
{
|
||||
value: 306,
|
||||
name: "女性",
|
||||
itemStyle: { color: "#30DCFF" }
|
||||
}
|
||||
// {
|
||||
// value: 48,
|
||||
// name: "硕士研究生学历",
|
||||
// itemStyle: { color: "#ffffff" }
|
||||
// },
|
||||
// {
|
||||
// value: 44,
|
||||
// name: "博士研究生学历",
|
||||
// itemStyle: { color: "#dd7d4d" }
|
||||
// }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (pieRef.value) {
|
||||
const chart = echarts.init(pieRef.value);
|
||||
// 设置option
|
||||
chart.setOption(optionPie);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pieBigBox {
|
||||
width: 40vw;
|
||||
// margin: 0.5vw auto 0;
|
||||
// height: 274px;
|
||||
.pieMain {
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
float: left;
|
||||
.pieBox {
|
||||
margin: 0 auto;
|
||||
margin-top: 1.5vw;
|
||||
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: 0vw;
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
ul.pieLsit {
|
||||
float: left;
|
||||
margin: 4vw 0 0 2vw;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.5vw 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>
|
||||
176
src/views/recruitment/components/jyknryzjy/xueli.vue
Normal file
176
src/views/recruitment/components/jyknryzjy/xueli.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<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">322人</span><span class="proportion">49.2%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockTwo"></span><span>大专学历</span></div>
|
||||
<div>
|
||||
<span class="numb">241人</span><span class="proportion">36.8%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockThree"></span><span>硕士研究生学历</span></div>
|
||||
<div>
|
||||
<span class="numb">48人</span><span class="proportion">7.33%</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div><span class="blockFour"></span><span>博士研究生学历</span></div>
|
||||
<div>
|
||||
<span class="numb">44人</span><span class="proportion">6.72%</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
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: 322, name: "大学学历", itemStyle: { color: "#58A8FF" } },
|
||||
{
|
||||
value: 241,
|
||||
name: "大专学历",
|
||||
itemStyle: { color: "#30DCFF" }
|
||||
},
|
||||
{
|
||||
value: 48,
|
||||
name: "硕士研究生学历",
|
||||
itemStyle: { color: "#ffffff" }
|
||||
},
|
||||
{
|
||||
value: 44,
|
||||
name: "博士研究生学历",
|
||||
itemStyle: { color: "#dd7d4d" }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (pieRef.value) {
|
||||
const chart = echarts.init(pieRef.value);
|
||||
// 设置option
|
||||
chart.setOption(optionPie);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pieBigBox {
|
||||
width: 40vw;
|
||||
// margin: 0.5vw auto 0;
|
||||
// height: 274px;
|
||||
.pieMain {
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
float: left;
|
||||
.pieBox {
|
||||
margin: 0 auto;
|
||||
margin-top: 1.5vw;
|
||||
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: 0vw;
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
ul.pieLsit {
|
||||
float: left;
|
||||
margin: 0vw 0 0 2vw;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.5vw 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>
|
||||
115
src/views/recruitment/components/jyknryzjy/zhuanye.vue
Normal file
115
src/views/recruitment/components/jyknryzjy/zhuanye.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="barBox" ref="enterpriseTwoRef"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
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" // 文字颜色
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 22, // 设置 x 轴文字大小
|
||||
color: "#CBF2FA" // 可以同时设置文字颜色
|
||||
},
|
||||
type: "category",
|
||||
data: [
|
||||
"护理专业",
|
||||
"语言及法学类专业",
|
||||
"工程类专业",
|
||||
"管理及新媒体类专业",
|
||||
"其他"
|
||||
]
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#A1C7CD"], // 线颜色
|
||||
opacity: 0.2 // 透明度
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 20, // 设置 x 轴文字大小
|
||||
color: "#CBF2FA" // 可以同时设置文字颜色
|
||||
},
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "专业人数",
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 20,
|
||||
data: [56, 41, 39, 25, 494],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#30DCFF",
|
||||
|
||||
fontSize: 22
|
||||
},
|
||||
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>
|
||||
.barBox {
|
||||
width: 40vw;
|
||||
height: 20vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
@ -139,12 +139,12 @@ const cardOneInfo = {
|
||||
description: "7万家企业(含个体工商户)",
|
||||
type1: {
|
||||
title: "岗位种类数",
|
||||
count: "57",
|
||||
count: "765个",
|
||||
class: "modelItem1"
|
||||
},
|
||||
type2: {
|
||||
title: "岗位人数",
|
||||
count: "24637",
|
||||
count: "79000人",
|
||||
class: "modelItem2"
|
||||
}
|
||||
};
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
v-show="isactive != 0 && isactive != 4 && isactive != 5"
|
||||
v-show="isactive != 0 && isactive != 1 && isactive != 2 && isactive != 3"
|
||||
>
|
||||
<div class="num">81.1万</div>
|
||||
<div class="label">人口总数</div>
|
||||
@ -49,7 +49,7 @@
|
||||
<div class="barBox" ref="enterpriseTwoRef"></div>
|
||||
</div>
|
||||
<!-- </transition> -->
|
||||
<div class="hjrkDialogBox" v-show="isactive == 5">
|
||||
<div class="hjrkDialogBox" v-show="isactive == 1">
|
||||
<div class="titleBox">
|
||||
<div class="title">高中端人才</div>
|
||||
<div class="close" @click="isactive = -1"></div>
|
||||
@ -69,7 +69,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hjrkDialogBox" v-show="isactive == 4">
|
||||
<div class="hjrkDialogBox" v-show="isactive == 3">
|
||||
<div class="titleBox">
|
||||
<div class="title">新增就业群体</div>
|
||||
<div class="close" @click="isactive = -1"></div>
|
||||
@ -106,6 +106,38 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hjrkDialogBox" v-show="isactive == 2">
|
||||
<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 tabsDate2.tabs"
|
||||
:key="index"
|
||||
:class="tabsActive == index ? 'active' : ''"
|
||||
@click="
|
||||
tabsDate2.activeIndex = index;
|
||||
tabsActive = index;
|
||||
"
|
||||
>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
<Xueli v-if="tabsDate2.activeIndex == 0"></Xueli>
|
||||
<Zhuanye v-if="tabsDate2.activeIndex == 1"></Zhuanye>
|
||||
<Xingbie v-if="tabsDate2.activeIndex == 2"></Xingbie>
|
||||
<Juzhudi v-if="tabsDate2.activeIndex == 3"></Juzhudi>
|
||||
<Kunnan v-if="tabsDate2.activeIndex == 4"></Kunnan>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -114,6 +146,11 @@ 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";
|
||||
import Xueli from "../components/jyknryzjy/xueli.vue";
|
||||
import Zhuanye from "../components/jyknryzjy/zhuanye.vue";
|
||||
import Xingbie from "../components/jyknryzjy/xingbie.vue";
|
||||
import Juzhudi from "../components/jyknryzjy/juzhudi.vue";
|
||||
import Kunnan from "../components/jyknryzjy/kunnan.vue";
|
||||
const isactive = ref(-1);
|
||||
const tabsActive = ref(0);
|
||||
const dialogTitle = ref("户籍人口");
|
||||
@ -131,33 +168,37 @@ const modelContentList = ref([
|
||||
label: "户籍人口"
|
||||
},
|
||||
{
|
||||
num: "8.91万",
|
||||
label: "流动人口"
|
||||
num: "2.2万",
|
||||
label: "高中端人才"
|
||||
},
|
||||
{
|
||||
num: "约27万",
|
||||
label: "就业人群"
|
||||
},
|
||||
// {
|
||||
// num: "13000",
|
||||
// label: "待就业人群"
|
||||
// },
|
||||
{
|
||||
num: "10.06万",
|
||||
label: "灵活就业群体"
|
||||
num: "655",
|
||||
label: "高校毕业未就业"
|
||||
},
|
||||
{
|
||||
num: "0.54万",
|
||||
label: "新增就业群体"
|
||||
},
|
||||
{
|
||||
num: "2.2万",
|
||||
label: "高中端人才"
|
||||
num: "10.06万",
|
||||
label: "灵活就业群体"
|
||||
},
|
||||
{
|
||||
num: "0.76万",
|
||||
num: "4608",
|
||||
label: "领金人员"
|
||||
}
|
||||
// {
|
||||
// num: "8.91万",
|
||||
// label: "流动人口"
|
||||
// },
|
||||
// {
|
||||
// num: "约27万",
|
||||
// label: "就业人群"
|
||||
// },
|
||||
// {
|
||||
// num: "13000",
|
||||
// label: "待就业人群"
|
||||
// },
|
||||
]);
|
||||
const statisticData = ref([
|
||||
{
|
||||
@ -204,7 +245,10 @@ const tabsDate = reactive({
|
||||
],
|
||||
activeIndex: 0
|
||||
});
|
||||
|
||||
const tabsDate2 = reactive({
|
||||
tabs: ["学历", "专业", "性别", "居住地址", "困难大学生"],
|
||||
activeIndex: 0
|
||||
});
|
||||
import * as echarts from "echarts";
|
||||
const enterpriseTwoRef = ref(null);
|
||||
const option = {
|
||||
@ -232,7 +276,10 @@ const option = {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
fontSize: 22, // 设置 x 轴文字大小
|
||||
color: "#CBF2FA" // 可以同时设置文字颜色
|
||||
},
|
||||
type: "category",
|
||||
data: ["大专及以上", "高中(含中专)", "初中", "小学"]
|
||||
},
|
||||
@ -250,6 +297,10 @@ const option = {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 20, // 设置 x 轴文字大小
|
||||
color: "#CBF2FA" // 可以同时设置文字颜色
|
||||
},
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
@ -263,7 +314,8 @@ const option = {
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#30DCFF"
|
||||
color: "#30DCFF",
|
||||
fontSize: 22
|
||||
},
|
||||
itemStyle: {
|
||||
//渐变色
|
||||
@ -391,7 +443,7 @@ onMounted(() => {
|
||||
width: 10.729vw;
|
||||
height: 6.667vw;
|
||||
padding: 0.625vw 0;
|
||||
margin: 0 1.1vw 1.2vw;
|
||||
margin: 0 1.5vw 1.2vw;
|
||||
cursor: pointer;
|
||||
.num {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
Reference in New Issue
Block a user