兴蜀人力数据概览大屏
This commit is contained in:
64
package-lock.json
generated
64
package-lock.json
generated
@ -17,7 +17,7 @@
|
||||
"@types/video.js": "^7.3.42",
|
||||
"axios": "^0.26.0",
|
||||
"core-js": "^3.6.5",
|
||||
"echarts": "^5.3.3",
|
||||
"echarts": "^5.6.0",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"element-plus": "2.0.2",
|
||||
"file-saver": "^2.0.5",
|
||||
@ -30,6 +30,7 @@
|
||||
"videojs-contrib-hls": "^5.15.0",
|
||||
"vue": "^3.2.8",
|
||||
"vue-draggable-plus": "^0.5.3",
|
||||
"vue-echarts": "^7.0.3",
|
||||
"vue-router": "^4.0.11",
|
||||
"vuex": "^4.0.2",
|
||||
"xlsx": "^0.18.5"
|
||||
@ -7298,7 +7299,7 @@
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
|
||||
"integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
@ -19230,6 +19231,31 @@
|
||||
"deprecated": "Since Vue CLI is now in maintenance mode, this plugin is no longer supported.",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/vue-demi": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-draggable-plus": {
|
||||
"version": "0.5.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-draggable-plus/-/vue-draggable-plus-0.5.6.tgz",
|
||||
@ -19246,6 +19272,24 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-echarts": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-7.0.3.tgz",
|
||||
"integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
|
||||
"dependencies": {
|
||||
"vue-demi": "^0.13.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/runtime-core": "^3.0.0",
|
||||
"echarts": "^5.5.1",
|
||||
"vue": "^2.7.0 || ^3.1.1"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/runtime-core": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-eslint-parser": {
|
||||
"version": "7.11.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
|
||||
@ -26396,7 +26440,7 @@
|
||||
},
|
||||
"echarts": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
|
||||
"integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
|
||||
"requires": {
|
||||
"tslib": "2.3.0",
|
||||
@ -35879,6 +35923,12 @@
|
||||
"integrity": "sha512-ctG5mynJIyGLFBhS2JpzXmBWT3JRXwzMm5AoANUmBlbZHTruct1xQF2OKM/mfJv6tSfqCcEfgH8rGCAY5ca83Q==",
|
||||
"dev": true
|
||||
},
|
||||
"vue-demi": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||
"requires": {}
|
||||
},
|
||||
"vue-draggable-plus": {
|
||||
"version": "0.5.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-draggable-plus/-/vue-draggable-plus-0.5.6.tgz",
|
||||
@ -35887,6 +35937,14 @@
|
||||
"@types/sortablejs": "^1.15.8"
|
||||
}
|
||||
},
|
||||
"vue-echarts": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-7.0.3.tgz",
|
||||
"integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
|
||||
"requires": {
|
||||
"vue-demi": "^0.13.11"
|
||||
}
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "7.11.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
"@types/video.js": "^7.3.42",
|
||||
"axios": "^0.26.0",
|
||||
"core-js": "^3.6.5",
|
||||
"echarts": "^5.3.3",
|
||||
"echarts": "^5.6.0",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"element-plus": "2.0.2",
|
||||
"file-saver": "^2.0.5",
|
||||
@ -31,6 +31,7 @@
|
||||
"videojs-contrib-hls": "^5.15.0",
|
||||
"vue": "^3.2.8",
|
||||
"vue-draggable-plus": "^0.5.3",
|
||||
"vue-echarts": "^7.0.3",
|
||||
"vue-router": "^4.0.11",
|
||||
"vuex": "^4.0.2",
|
||||
"xlsx": "^0.18.5"
|
||||
|
||||
BIN
src/assets/images/recruitment/hjrk-dialog-bg.png
Normal file
BIN
src/assets/images/recruitment/hjrk-dialog-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
src/assets/images/recruitment/hjrk-dialog-close.png
Normal file
BIN
src/assets/images/recruitment/hjrk-dialog-close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 882 B |
BIN
src/assets/images/recruitment/tabs-active-bg.png
Normal file
BIN
src/assets/images/recruitment/tabs-active-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/images/recruitment/tabs-bg.png
Normal file
BIN
src/assets/images/recruitment/tabs-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
1
src/assets/json/510184.json
Normal file
1
src/assets/json/510184.json
Normal file
File diff suppressed because one or more lines are too long
@ -1,108 +1,152 @@
|
||||
<template>
|
||||
<!-- 页面的 HTML 模板部分 -->
|
||||
<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 class="carcTitle">促就业学历占比</div>
|
||||
<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">5230</span><span class="proportion">50%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockTwo"></span><span>高职</span></div>
|
||||
<div>
|
||||
<span class="numb">4230</span><span class="proportion">30%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockThree"></span><span>高校</span></div>
|
||||
<div>
|
||||
<span class="numb">3230</span><span class="proportion">20%</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const pieRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
|
||||
// 响应式数据
|
||||
const count = ref(0);
|
||||
const state = reactive({
|
||||
name: "Vue 3"
|
||||
});
|
||||
series: [
|
||||
{
|
||||
name: "学历占比",
|
||||
type: "pie",
|
||||
radius: ["65%", "80%"],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 1
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
|
||||
// 计算属性
|
||||
const doubledCount = computed(() => count.value * 2);
|
||||
|
||||
// 方法
|
||||
const increment = () => {
|
||||
count.value++;
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 5230, name: "中职", itemStyle: { color: "#58A8FF" } },
|
||||
{ value: 4230, name: "高职", itemStyle: { color: "#30DCFF" } },
|
||||
{ value: 3230, name: "高校", itemStyle: { color: "#FFFFFF" } }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
console.log("组件已挂载");
|
||||
if (pieRef.value) {
|
||||
const chart = echarts.init(pieRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-slide {
|
||||
padding: 0.9vw 0.521vw;
|
||||
|
||||
.custom-slide-inner {
|
||||
width: 15.99vw;
|
||||
height: 4.323vw;
|
||||
background: url("~@/assets/recruitment/card_item_bg.svg") no-repeat center
|
||||
.carcTitle {
|
||||
height: 1.4vw;
|
||||
line-height: 1.4vw;
|
||||
font-size: 0.8vw;
|
||||
text-align: center;
|
||||
color: #c4f3fe;
|
||||
background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat
|
||||
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;
|
||||
background-size: auto 100%;
|
||||
margin-top: 0.7vw;
|
||||
}
|
||||
|
||||
.col {
|
||||
margin-top: 0.78125vw;
|
||||
.pieMain {
|
||||
position: relative;
|
||||
.pieBox {
|
||||
margin: 0 auto;
|
||||
width: 7.6vw;
|
||||
height: 7.6vw;
|
||||
// border: 1px solid #fff;
|
||||
margin-top: 0.5vw;
|
||||
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
|
||||
center;
|
||||
background-size: 100%;
|
||||
}
|
||||
.pieTitle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
margin-top: -0.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
ul.pieLsit {
|
||||
margin: 0 2vw;
|
||||
li {
|
||||
font-size: 0.65vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 1.5vw;
|
||||
padding: 0 0.5vw;
|
||||
background: rgba(203, 242, 250, 0.2);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid rgba(203, 242, 250, 0.2);
|
||||
margin-top: 0.5vw;
|
||||
> div {
|
||||
height: 100%;
|
||||
line-height: 1.5vw;
|
||||
}
|
||||
.blockOne,
|
||||
.blockTwo,
|
||||
.blockThree {
|
||||
display: inline-block;
|
||||
width: 0.5vw;
|
||||
height: 0.5vw;
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
.blockOne {
|
||||
background-color: #58a8ff;
|
||||
}
|
||||
.blockTwo {
|
||||
background-color: #30dcff;
|
||||
}
|
||||
.blockThree {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.proportion {
|
||||
display: inline-block;
|
||||
width: 2.5vw;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div ref="enterpriseThreeRef" style="width: 17vw; height: 17vw"></div>
|
||||
<div>
|
||||
<div class="carcTitle">促就业⼈数清单</div>
|
||||
<div ref="collageTalentsThreeRef" style="width: 17vw; height: 14.5vw"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -7,11 +10,11 @@
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const enterpriseThreeRef = ref(null);
|
||||
const collageTalentsThreeRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: "17%",
|
||||
top: "15%",
|
||||
left: "15%",
|
||||
right: "5%",
|
||||
bottom: "10%"
|
||||
@ -35,7 +38,7 @@ const option = {
|
||||
},
|
||||
|
||||
type: "category",
|
||||
data: ["制造业", "服务业", "建筑业", "批发和零售业"]
|
||||
data: ["专业A", "专业B", "专业C", "专业D"]
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
@ -55,11 +58,11 @@ const option = {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "岗位种类数",
|
||||
type: "line",
|
||||
name: "高校数",
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [70, 62, 52, 41],
|
||||
data: [76, 32, 87, 65],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
@ -75,18 +78,18 @@ const option = {
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "rgba(48, 220, 255, 1)" }
|
||||
// { offset: 1, color: "rgba(48, 220, 255, 0.06)" }
|
||||
{ offset: 0, color: "rgba(48, 220, 255, 1)" },
|
||||
{ offset: 1, color: "rgba(48, 220, 255, 0.06)" }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "岗位人员数",
|
||||
type: "line",
|
||||
name: "促就业人数",
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [54, 32, 45, 18],
|
||||
data: [34, 15, 45, 24],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
@ -102,8 +105,8 @@ const option = {
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "rgba(178, 217, 223, 1)" }
|
||||
// { offset: 1, color: "rgba(203, 242, 250, 0.08)" }
|
||||
{ offset: 0, color: "rgba(203, 242, 250, 1)" },
|
||||
{ offset: 1, color: "rgba(203, 242, 250, 0.08)" }
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -113,12 +116,24 @@ const option = {
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (enterpriseThreeRef.value) {
|
||||
const chart = echarts.init(enterpriseThreeRef.value);
|
||||
if (collageTalentsThreeRef.value) {
|
||||
const chart = echarts.init(collageTalentsThreeRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.carcTitle {
|
||||
height: 1.4vw;
|
||||
line-height: 1.4vw;
|
||||
font-size: 0.8vw;
|
||||
text-align: center;
|
||||
color: #c4f3fe;
|
||||
background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat
|
||||
center;
|
||||
background-size: auto 100%;
|
||||
margin-top: 0.7vw;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,124 +1,90 @@
|
||||
<template>
|
||||
<div ref="enterpriseTwoRef" style="width: 17vw; height: 17vw"></div>
|
||||
<!-- 页面的 HTML 模板部分 -->
|
||||
<div>
|
||||
<div class="carcTitle">促就业⼈数清单</div>
|
||||
<ul class="schoolLsit">
|
||||
<li>
|
||||
<div class="name">学校名称</div>
|
||||
<div><span class="numb">71</span><span>人</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="name">学校名称</div>
|
||||
<div><span class="numb">71</span><span>人</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="name">学校名称</div>
|
||||
<div><span class="numb">71</span><span>人</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="name">学校名称</div>
|
||||
<div><span class="numb">71</span><span>人</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="name">学校名称</div>
|
||||
<div><span class="numb">71</span><span>人</span></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const enterpriseTwoRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "15%",
|
||||
right: "5%",
|
||||
bottom: "10%"
|
||||
},
|
||||
// 设置图例
|
||||
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: 8,
|
||||
data: [76, 32, 87, 65],
|
||||
// 设置柱状图的数值
|
||||
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)" }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "岗位人员数",
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [34, 15, 45, 24],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#CBF2FA"
|
||||
},
|
||||
itemStyle: {
|
||||
//渐变色
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "rgba(203, 242, 250, 1)" },
|
||||
{ offset: 1, color: "rgba(203, 242, 250, 0.08)" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (enterpriseTwoRef.value) {
|
||||
const chart = echarts.init(enterpriseTwoRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.carcTitle {
|
||||
height: 1.4vw;
|
||||
line-height: 1.4vw;
|
||||
font-size: 0.8vw;
|
||||
text-align: center;
|
||||
color: #c4f3fe;
|
||||
background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat
|
||||
center;
|
||||
background-size: auto 100%;
|
||||
margin-top: 0.7vw;
|
||||
}
|
||||
ul.schoolLsit {
|
||||
margin: 0 0.5vw;
|
||||
padding: 0.1vw 0 0 0;
|
||||
li {
|
||||
height: 2.2vw;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid rgba(48, 220, 255, 0.2);
|
||||
// box-sizing: border-box;
|
||||
margin: 0.6vw 0 0 2.3vw;
|
||||
position: relative;
|
||||
padding: 0 0.5vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 2.1vw;
|
||||
height: 2.2vw;
|
||||
background: url("~@/assets/images/recruitment/people@2x.png") no-repeat
|
||||
center;
|
||||
background-size: 100%;
|
||||
left: -2.3vw;
|
||||
top: -1px;
|
||||
}
|
||||
> div {
|
||||
height: 100%;
|
||||
line-height: 2.2vw;
|
||||
}
|
||||
.name {
|
||||
color: #cbf2fa;
|
||||
}
|
||||
.numb {
|
||||
color: #30dcff;
|
||||
font-size: 1vw;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
padding: 0 0.3vw 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
117
src/views/recruitment/card/LaborSystemFour.vue
Normal file
117
src/views/recruitment/card/LaborSystemFour.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="carcTitle">服务求职者变化趋势</div>
|
||||
<div ref="laborSystemFourRef" style="width: 17vw; height: 14.5vw"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const laborSystemFourRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: "17%",
|
||||
left: "15%",
|
||||
right: "5%",
|
||||
bottom: "10%"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
xAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
|
||||
type: "category",
|
||||
data: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月"
|
||||
]
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#A1C7CD"], // 线颜色
|
||||
opacity: 0.2 // 透明度
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "求职者",
|
||||
type: "line",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [38, 62, 52, 41, 37, 62, 52, 41, 67, 62, 52, 41],
|
||||
// 设置柱状图的数值
|
||||
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 (laborSystemFourRef.value) {
|
||||
const chart = echarts.init(laborSystemFourRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carcTitle {
|
||||
height: 1.4vw;
|
||||
line-height: 1.4vw;
|
||||
font-size: 0.8vw;
|
||||
text-align: center;
|
||||
color: #c4f3fe;
|
||||
background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat
|
||||
center;
|
||||
background-size: auto 100%;
|
||||
margin-top: 0.7vw;
|
||||
}
|
||||
</style>
|
||||
117
src/views/recruitment/card/LaborSystemOne.vue
Normal file
117
src/views/recruitment/card/LaborSystemOne.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="carcTitle">各个地区挖掘用工需求统计</div>
|
||||
<div ref="laborSystemOneRef" style="width: 17vw; height: 14.5vw"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const laborSystemOneRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "15%",
|
||||
right: "5%",
|
||||
bottom: "10%"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "none"
|
||||
},
|
||||
formatter: function (params) {
|
||||
return params[0].name + ": " + params[0].value;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
data: ["成都", "德阳", "绵阳", "省外"],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#CBF2FA"
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#A1C7CD"], // 线颜色
|
||||
opacity: 0.2 // 透明度
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
// color: ["#fff"],
|
||||
series: [
|
||||
{
|
||||
name: "hill",
|
||||
type: "pictorialBar",
|
||||
barCategoryGap: "30%",
|
||||
symbol: "triangle",
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#30DCFF"
|
||||
},
|
||||
itemStyle: {
|
||||
//渐变色
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "rgba(48, 220, 255, 1)" },
|
||||
{ offset: 1, color: "rgba(48, 220, 255, 0.06)" }
|
||||
]
|
||||
}
|
||||
},
|
||||
data: [123, 60, 125, 80],
|
||||
z: 10
|
||||
},
|
||||
{
|
||||
name: "glyph",
|
||||
type: "pictorialBar",
|
||||
barGap: "-100%",
|
||||
symbolPosition: "end",
|
||||
symbolSize: 50,
|
||||
symbolOffset: [0, "-120%"]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (laborSystemOneRef.value) {
|
||||
const chart = echarts.init(laborSystemOneRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carcTitle {
|
||||
height: 1.4vw;
|
||||
line-height: 1.4vw;
|
||||
font-size: 0.8vw;
|
||||
text-align: center;
|
||||
color: #c4f3fe;
|
||||
background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat
|
||||
center;
|
||||
background-size: auto 100%;
|
||||
margin-top: 0.7vw;
|
||||
}
|
||||
</style>
|
||||
117
src/views/recruitment/card/LaborSystemThree.vue
Normal file
117
src/views/recruitment/card/LaborSystemThree.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="carcTitle">服务企业变化趋势</div>
|
||||
<div ref="laborSystemThreeRef" style="width: 17vw; height: 14.5vw"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const laborSystemThreeRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: "17%",
|
||||
left: "15%",
|
||||
right: "5%",
|
||||
bottom: "10%"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
xAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
|
||||
type: "category",
|
||||
data: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月"
|
||||
]
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#A1C7CD"], // 线颜色
|
||||
opacity: 0.2 // 透明度
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "企业数量",
|
||||
type: "line",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [38, 62, 52, 41, 37, 62, 52, 41, 67, 62, 52, 41],
|
||||
// 设置柱状图的数值
|
||||
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 (laborSystemThreeRef.value) {
|
||||
const chart = echarts.init(laborSystemThreeRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carcTitle {
|
||||
height: 1.4vw;
|
||||
line-height: 1.4vw;
|
||||
font-size: 0.8vw;
|
||||
text-align: center;
|
||||
color: #c4f3fe;
|
||||
background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat
|
||||
center;
|
||||
background-size: auto 100%;
|
||||
margin-top: 0.7vw;
|
||||
}
|
||||
</style>
|
||||
105
src/views/recruitment/card/LaborSystemTwo.vue
Normal file
105
src/views/recruitment/card/LaborSystemTwo.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="carcTitle">合作社位置撒点</div>
|
||||
<div ref="map" style="width: 17vw; height: 14.5vw"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
// 引入Echarts
|
||||
import * as echarts from "echarts";
|
||||
// 引入崇州市地图json数据
|
||||
import chongzhouJSON from "@/assets/json/510184.json";
|
||||
// 获取地图DOM元素
|
||||
let map = ref();
|
||||
// 注册崇州地图
|
||||
echarts.registerMap("chongzhou", chongzhouJSON);
|
||||
const initialPoints = [
|
||||
{
|
||||
name: "崇州市政府",
|
||||
value: [103.679548, 30.63669, 150],
|
||||
address: "北京市朝阳区"
|
||||
},
|
||||
{
|
||||
name: "万达广场",
|
||||
value: [103.692545, 30.629371, 200],
|
||||
address: "上海市浦东新区"
|
||||
},
|
||||
{
|
||||
name: "北溪湿地",
|
||||
value: [103.696859, 30.663888, 180],
|
||||
address: "广州市天河区"
|
||||
},
|
||||
{
|
||||
name: "白塔湖景区",
|
||||
value: [103.591696, 30.671858, 160],
|
||||
address: "深圳市南山区"
|
||||
},
|
||||
{
|
||||
name: "崇州市公安局",
|
||||
value: [103.674729, 30.649677, 140],
|
||||
address: "成都市锦江区"
|
||||
}
|
||||
];
|
||||
// 地图参数设置
|
||||
let option = {
|
||||
geo: [
|
||||
{
|
||||
type: "map",
|
||||
map: "chongzhou",
|
||||
roam: true,
|
||||
zoom: 1,
|
||||
label: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontWeight: "bold"
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#30DCFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "城市点位",
|
||||
type: "scatter", // 散点图类型
|
||||
coordinateSystem: "geo", // 使用地理坐标系
|
||||
data: initialPoints,
|
||||
symbolSize: function (val) {
|
||||
// 根据数值大小动态调整点的大小
|
||||
return val[2] / 10;
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
formatter: "{b}"
|
||||
},
|
||||
symbol: function (params) {}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
let myMap = echarts.init(map.value);
|
||||
// 设置配置项
|
||||
myMap.setOption(option);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carcTitle {
|
||||
height: 1.4vw;
|
||||
line-height: 1.4vw;
|
||||
font-size: 0.8vw;
|
||||
text-align: center;
|
||||
color: #c4f3fe;
|
||||
background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat
|
||||
center;
|
||||
background-size: auto 100%;
|
||||
margin-top: 0.7vw;
|
||||
}
|
||||
</style>
|
||||
102
src/views/recruitment/card/NetworkMap.vue
Normal file
102
src/views/recruitment/card/NetworkMap.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div ref="map" style="width: 18vw; height: 16.5vw; margin: 0 auto"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
// 引入Echarts
|
||||
import * as echarts from "echarts";
|
||||
// 引入崇州市地图json数据
|
||||
import chongzhouJSON from "@/assets/json/510184.json";
|
||||
// 获取地图DOM元素
|
||||
let map = ref();
|
||||
// 注册崇州地图
|
||||
echarts.registerMap("chongzhou", chongzhouJSON);
|
||||
const initialPoints = [
|
||||
{
|
||||
name: "崇州市政府",
|
||||
value: [103.679548, 30.63669, 150],
|
||||
address: "北京市朝阳区"
|
||||
},
|
||||
{
|
||||
name: "万达广场",
|
||||
value: [103.692545, 30.629371, 200],
|
||||
address: "上海市浦东新区"
|
||||
},
|
||||
{
|
||||
name: "北溪湿地",
|
||||
value: [103.696859, 30.663888, 180],
|
||||
address: "广州市天河区"
|
||||
},
|
||||
{
|
||||
name: "白塔湖景区",
|
||||
value: [103.591696, 30.671858, 160],
|
||||
address: "深圳市南山区"
|
||||
},
|
||||
{
|
||||
name: "崇州市公安局",
|
||||
value: [103.674729, 30.649677, 140],
|
||||
address: "成都市锦江区"
|
||||
}
|
||||
];
|
||||
// 地图参数设置
|
||||
let option = {
|
||||
geo: [
|
||||
{
|
||||
type: "map",
|
||||
map: "chongzhou",
|
||||
roam: true,
|
||||
zoom: 1.2,
|
||||
label: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontWeight: "bold"
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#30DCFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "城市点位",
|
||||
type: "scatter", // 散点图类型
|
||||
coordinateSystem: "geo", // 使用地理坐标系
|
||||
data: initialPoints,
|
||||
symbolSize: function (val) {
|
||||
// 根据数值大小动态调整点的大小
|
||||
return val[2] / 10;
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
formatter: "{b}"
|
||||
},
|
||||
symbol: function (params) {}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
let myMap = echarts.init(map.value);
|
||||
// 设置配置项
|
||||
myMap.setOption(option);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carcTitle {
|
||||
height: 1.4vw;
|
||||
line-height: 1.4vw;
|
||||
font-size: 0.8vw;
|
||||
text-align: center;
|
||||
color: #c4f3fe;
|
||||
background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat
|
||||
center;
|
||||
background-size: auto 100%;
|
||||
margin-top: 0.7vw;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
|
||||
import NetworkMap from "../card/NetworkMap.vue";
|
||||
const state = reactive({
|
||||
tabs: [
|
||||
"公共服务站点 300",
|
||||
@ -113,7 +113,7 @@ onMounted(() => {
|
||||
<!-- </button>-->
|
||||
</div>
|
||||
|
||||
<img class="echart" src="~@/assets/recruitment/echart.svg" alt="" />
|
||||
<NetworkMap />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -70,7 +70,20 @@
|
||||
:type1="cardFourInfo.type1"
|
||||
:type2="cardFourInfo.type2"
|
||||
style="margin-top: 0.625vw"
|
||||
/>
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<div class="last_icon"></div>
|
||||
<!-- 弹窗 -->
|
||||
@ -99,6 +112,10 @@ import EnterpriseEmploymentThree from "./card/EnterpriseEmploymentThree.vue";
|
||||
import CollegeTalentsOne from "./card/CollegeTalentsOne.vue";
|
||||
import CollegeTalentsTwo from "./card/CollegeTalentsTwo.vue";
|
||||
import CollegeTalentsThree from "./card/CollegeTalentsThree.vue";
|
||||
import LaborSystemOne from "./card/LaborSystemOne.vue";
|
||||
import LaborSystemTwo from "./card/LaborSystemTwo.vue";
|
||||
import LaborSystemThree from "./card/LaborSystemThree.vue";
|
||||
import LaborSystemFour from "./card/LaborSystemFour.vue";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const isOpen_L = ref(true); //展开菜单-左边
|
||||
|
||||
@ -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="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>
|
||||
</template>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user