From 4ba4878f8a75ef2b3853d22eed4503b88d6242fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=8D=B7?= <151292022@qq.com>
Date: Tue, 21 Oct 2025 19:41:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../integratedTrainingPlatform/index.vue | 2 +-
src/views/platformBusinessData/index.vue | 2 +-
.../recruitment/card/CollegeTalentsOne.vue | 10 +-
.../recruitment/card/CollegeTalentsTwo.vue | 1 +
.../card/EnterpriseEmploymentOne.vue | 6 +-
.../card/EnterpriseEmploymentThree.vue | 16 +-
.../card/EnterpriseEmploymentTwo.vue | 12 +-
.../recruitment/card/LaborSystemFour.vue | 8 +-
src/views/recruitment/card/LaborSystemOne.vue | 11 +-
.../recruitment/card/LaborSystemThree.vue | 8 +-
src/views/recruitment/card/LaborSystemTwo.vue | 8 +-
src/views/recruitment/card/NetworkMap.vue | 13 +-
src/views/recruitment/index.vue | 6 +-
src/views/recruitment/layout/centerModel.vue | 188 ++++++++++++++++--
.../threeLaborService/components/map.vue | 16 +-
src/views/threeLaborService/index.vue | 2 +-
16 files changed, 251 insertions(+), 58 deletions(-)
diff --git a/src/views/integratedTrainingPlatform/index.vue b/src/views/integratedTrainingPlatform/index.vue
index ea2d401..a525e73 100644
--- a/src/views/integratedTrainingPlatform/index.vue
+++ b/src/views/integratedTrainingPlatform/index.vue
@@ -162,7 +162,7 @@ onUnmounted(() => {
.scale-container {
width: 100%;
height: 100%;
- overflow: hidden;
+ // overflow: hidden;
}
.pubTitle {
height: 60px;
diff --git a/src/views/platformBusinessData/index.vue b/src/views/platformBusinessData/index.vue
index 93b8975..0d37aad 100644
--- a/src/views/platformBusinessData/index.vue
+++ b/src/views/platformBusinessData/index.vue
@@ -76,7 +76,7 @@ onUnmounted(() => {
.scale-container {
width: 100%;
height: 100%;
- overflow: hidden;
+ // overflow: hidden;
}
.allBox {
width: 1920px;
diff --git a/src/views/recruitment/card/CollegeTalentsOne.vue b/src/views/recruitment/card/CollegeTalentsOne.vue
index 517434a..caf75a6 100644
--- a/src/views/recruitment/card/CollegeTalentsOne.vue
+++ b/src/views/recruitment/card/CollegeTalentsOne.vue
@@ -4,7 +4,7 @@
促就业学历占比
-
@@ -54,8 +54,12 @@ const option = {
borderRadius: 1
},
label: {
- show: false,
- position: "center"
+ show: true,
+ position: "center",
+ fontSize: 24,
+ color: "#fff",
+ fontWeight: "bold",
+ formatter: "学历占比" // 固定显示"学历占比"文字
},
labelLine: {
diff --git a/src/views/recruitment/card/CollegeTalentsTwo.vue b/src/views/recruitment/card/CollegeTalentsTwo.vue
index df95c32..2787dd0 100644
--- a/src/views/recruitment/card/CollegeTalentsTwo.vue
+++ b/src/views/recruitment/card/CollegeTalentsTwo.vue
@@ -69,6 +69,7 @@ ul.schoolLsit {
}
.name {
color: #cbf2fa;
+ font-size: 0.7vw;
}
.numb {
color: #30dcff;
diff --git a/src/views/recruitment/card/EnterpriseEmploymentOne.vue b/src/views/recruitment/card/EnterpriseEmploymentOne.vue
index 34fd063..639b207 100644
--- a/src/views/recruitment/card/EnterpriseEmploymentOne.vue
+++ b/src/views/recruitment/card/EnterpriseEmploymentOne.vue
@@ -88,16 +88,16 @@ onMounted(() => {
.custom-slide-content {
color: #cbf2fa;
- font-size: 0.625vw;
+ font-size: 0.7vw;
height: 4.323vw;
- padding: 0.417vw 1.25vw 0 5.677vw;
+ padding: 0.317vw 1.25vw 0 5.677vw;
.title {
margin-bottom: 0.26vw;
}
.col {
- margin-top: 0.78125vw;
+ margin-top: 0.48125vw;
}
}
diff --git a/src/views/recruitment/card/EnterpriseEmploymentThree.vue b/src/views/recruitment/card/EnterpriseEmploymentThree.vue
index 3e52aab..9438f97 100644
--- a/src/views/recruitment/card/EnterpriseEmploymentThree.vue
+++ b/src/views/recruitment/card/EnterpriseEmploymentThree.vue
@@ -14,7 +14,7 @@ const option = {
top: "17%",
left: "15%",
right: "5%",
- bottom: "20%"
+ bottom: "15%"
},
// 设置图例
legend: {
@@ -34,7 +34,7 @@ const option = {
}
},
axisLabel: {
- fontSize: 14, // 设置 x 轴文字大小
+ fontSize: 22, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 20, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离
@@ -56,6 +56,10 @@ const option = {
color: "#CBF2FA" // 文字颜色
}
},
+ axisLabel: {
+ fontSize: 20, // 设置 x 轴文字大小
+ color: "#CBF2FA" // 可以同时设置文字颜色
+ },
type: "value"
},
series: [
@@ -63,14 +67,14 @@ const option = {
name: "岗位种类数",
type: "line",
showBackground: true,
- barWidth: 8,
+ barWidth: 16,
data: [42, 7, 15],
// 设置柱状图的数值
label: {
show: true,
position: "top",
color: "#30DCFF",
- fontSize: 16
+ fontSize: 22
},
itemStyle: {
//渐变色
@@ -91,14 +95,14 @@ const option = {
name: "岗位人员数",
type: "line",
showBackground: true,
- barWidth: 8,
+ barWidth: 16,
data: [10230, 4509, 3201],
// 设置柱状图的数值
label: {
show: true,
position: "top",
color: "#CBF2FA",
- fontSize: 16
+ fontSize: 22
},
itemStyle: {
//渐变色
diff --git a/src/views/recruitment/card/EnterpriseEmploymentTwo.vue b/src/views/recruitment/card/EnterpriseEmploymentTwo.vue
index a66ac41..d5faeb0 100644
--- a/src/views/recruitment/card/EnterpriseEmploymentTwo.vue
+++ b/src/views/recruitment/card/EnterpriseEmploymentTwo.vue
@@ -14,7 +14,7 @@ const option = {
top: "15%",
left: "15%",
right: "5%",
- bottom: "20%"
+ bottom: "15%"
},
// 设置图例
legend: {
@@ -34,7 +34,7 @@ const option = {
}
},
axisLabel: {
- fontSize: 14, // 设置 x 轴文字大小
+ fontSize: 22, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 20, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离
@@ -56,6 +56,10 @@ const option = {
color: "#CBF2FA" // 文字颜色
}
},
+ axisLabel: {
+ fontSize: 20, // 设置 x 轴文字大小
+ color: "#CBF2FA" // 可以同时设置文字颜色
+ },
type: "value"
},
series: [
@@ -70,7 +74,7 @@ const option = {
show: true,
position: "top",
color: "#30DCFF",
- fontSize: 16
+ fontSize: 22
},
itemStyle: {
//渐变色
@@ -98,7 +102,7 @@ const option = {
show: true,
position: "top",
color: "#CBF2FA",
- fontSize: 16
+ fontSize: 22
},
itemStyle: {
//渐变色
diff --git a/src/views/recruitment/card/LaborSystemFour.vue b/src/views/recruitment/card/LaborSystemFour.vue
index ff78cfb..fe180b7 100644
--- a/src/views/recruitment/card/LaborSystemFour.vue
+++ b/src/views/recruitment/card/LaborSystemFour.vue
@@ -29,7 +29,7 @@ const option = {
}
},
axisLabel: {
- fontSize: 14, // 设置 x 轴文字大小
+ fontSize: 22, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 30, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离
@@ -64,6 +64,10 @@ const option = {
color: "#CBF2FA" // 文字颜色
}
},
+ axisLabel: {
+ fontSize: 20, // 设置 x 轴文字大小
+ color: "#CBF2FA" // 可以同时设置文字颜色
+ },
type: "value"
},
series: [
@@ -78,7 +82,7 @@ const option = {
show: true,
position: "top",
color: "#30DCFF",
- fontSize: 16
+ fontSize: 22
},
itemStyle: {
//渐变色
diff --git a/src/views/recruitment/card/LaborSystemOne.vue b/src/views/recruitment/card/LaborSystemOne.vue
index 2ae43b8..0059191 100644
--- a/src/views/recruitment/card/LaborSystemOne.vue
+++ b/src/views/recruitment/card/LaborSystemOne.vue
@@ -34,7 +34,7 @@ const option = {
textStyle: {
color: "#CBF2FA"
},
- fontSize: 14, // 设置 x 轴文字大小
+ fontSize: 22, // 设置 x 轴文字大小
color: "#CBF2FA" // 可以同时设置文字颜色
}
},
@@ -51,6 +51,13 @@ const option = {
lineStyle: {
color: "#CBF2FA" // 文字颜色
}
+ },
+ axisLabel: {
+ textStyle: {
+ color: "#CBF2FA"
+ },
+ fontSize: 22, // 设置 x 轴文字大小
+ color: "#CBF2FA" // 可以同时设置文字颜色
}
},
// color: ["#fff"],
@@ -65,7 +72,7 @@ const option = {
show: true,
position: "top",
color: "#30DCFF",
- fontSize: 16
+ fontSize: 22
},
itemStyle: {
//渐变色
diff --git a/src/views/recruitment/card/LaborSystemThree.vue b/src/views/recruitment/card/LaborSystemThree.vue
index 2187042..3cd37d8 100644
--- a/src/views/recruitment/card/LaborSystemThree.vue
+++ b/src/views/recruitment/card/LaborSystemThree.vue
@@ -29,7 +29,7 @@ const option = {
}
},
axisLabel: {
- fontSize: 14, // 设置 x 轴文字大小
+ fontSize: 22, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 30, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离
@@ -64,6 +64,10 @@ const option = {
color: "#CBF2FA" // 文字颜色
}
},
+ axisLabel: {
+ fontSize: 20, // 设置 x 轴文字大小
+ color: "#CBF2FA" // 可以同时设置文字颜色
+ },
type: "value"
},
series: [
@@ -78,7 +82,7 @@ const option = {
show: true,
position: "top",
color: "#30DCFF",
- fontSize: 16
+ fontSize: 22
},
itemStyle: {
//渐变色
diff --git a/src/views/recruitment/card/LaborSystemTwo.vue b/src/views/recruitment/card/LaborSystemTwo.vue
index 42b429e..0febcd9 100644
--- a/src/views/recruitment/card/LaborSystemTwo.vue
+++ b/src/views/recruitment/card/LaborSystemTwo.vue
@@ -71,13 +71,13 @@ let option = {
itemStyle: {
normal: {
color: "#121516",
- borderColor: "#3a6c80", // 地图区域描边颜色
- borderWidth: 1 // 地图区域描边宽度
+ borderColor: "#30DCFF", // 地图区域描边颜色
+ borderWidth: 2 // 地图区域描边宽度
},
emphasis: {
color: "#2d5565", // 鼠标悬停时的地图填充颜色
borderColor: "#30DCFF", // 地图区域描边颜色
- borderWidth: 1 // 地图区域描边宽度
+ borderWidth: 2 // 地图区域描边宽度
}
}
}
@@ -91,7 +91,7 @@ let option = {
symbolSize: function (val) {
// 根据数值大小动态调整点的大小
// return val[2] / 6;
- return 30;
+ return 50;
},
label: {
show: false, // 改为 true 显示标签
diff --git a/src/views/recruitment/card/NetworkMap.vue b/src/views/recruitment/card/NetworkMap.vue
index 5954513..8d66e40 100644
--- a/src/views/recruitment/card/NetworkMap.vue
+++ b/src/views/recruitment/card/NetworkMap.vue
@@ -52,25 +52,25 @@ let option = {
label: {
show: true,
color: "#fff",
- fontSize: 12,
+ fontSize: 20,
fontWeight: "bold",
emphasis: {
show: true, // 确保悬停时标签显示
color: "#ffff00", // 鼠标悬停时的文字颜色
- fontSize: 14, // 鼠标悬停时的文字大小
+ fontSize: 20, // 鼠标悬停时的文字大小
fontWeight: "bold" // 鼠标悬停时的文字粗细
}
},
itemStyle: {
normal: {
color: "#121516",
- borderColor: "#3a6c80", // 地图区域描边颜色
- borderWidth: 1 // 地图区域描边宽度
+ borderColor: "#30DCFF", // 地图区域描边颜色
+ borderWidth: 2 // 地图区域描边宽度
},
emphasis: {
color: "#2d5565", // 鼠标悬停时的地图填充颜色
borderColor: "#30DCFF", // 地图区域描边颜色
- borderWidth: 1 // 地图区域描边宽度
+ borderWidth: 2 // 地图区域描边宽度
}
}
}
@@ -83,7 +83,8 @@ let option = {
data: initialPoints,
symbolSize: function (val) {
// 根据数值大小动态调整点的大小
- return val[2] / 6;
+ // return val[2] / 6;
+ return 50;
},
label: {
show: false,
diff --git a/src/views/recruitment/index.vue b/src/views/recruitment/index.vue
index 2d5ebc8..b234630 100644
--- a/src/views/recruitment/index.vue
+++ b/src/views/recruitment/index.vue
@@ -14,7 +14,7 @@
:type2="cardOneInfo.type2"
>
-
+
@@ -48,7 +51,7 @@
+
+
+
+
+
+ -
+
城镇新增就业
+
+ 目标7200人完成5445人
+
+
+ -
+
失业人员再就业
+
+ 目标1900人完成1528人
+
+
+ -
+
+ 就业困难人员再就业
+
+
+ 目标190人完成125人
+
+
+
+
+
@@ -242,7 +282,47 @@ const option = {
}
]
};
+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) {
@@ -250,6 +330,11 @@ onMounted(() => {
// 设置option
chart.setOption(option);
}
+ if (pieRef.value) {
+ const chart = echarts.init(pieRef.value);
+ // 设置option
+ chart.setOption(optionPie);
+ }
});
@@ -406,8 +491,8 @@ ul.statisticOne {
padding-top: 3vw;
li {
// width: 450px;
- height: 190px;
- margin: 0 10px;
+ height: 9vw;
+ margin: 0 0;
// 第一排的前2个元素(第一排显示2个)
&:nth-child(-n + 2) {
width: 20vw; // 减去margin值
@@ -426,11 +511,11 @@ ul.statisticOne {
}
.infoBox {
float: left;
- padding: 0 0 0 10px;
+ padding: 0 0 0 0.5vw;
.title {
- height: 40px;
- line-height: 40px;
- margin-top: 36px;
+ height: 2vw;
+ line-height: 2vw;
+ margin-top: 1vw;
span {
background: -webkit-linear-gradient(#ffffff, #75e8ff);
-webkit-background-clip: text;
@@ -440,15 +525,94 @@ ul.statisticOne {
}
}
.count {
- font-size: 24px;
- padding: 18px 0 0 0;
+ font-size: 1.4vw;
+ padding: 0.5vw 0 0 0;
span.numb {
- font-size: 2.1vw;
+ font-size: 2.2vw;
display: inline-block;
- padding: 0 5px 0 0;
+ 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;
+ }
+ }
+ }
+}
diff --git a/src/views/threeLaborService/components/map.vue b/src/views/threeLaborService/components/map.vue
index 20b9d00..202646e 100644
--- a/src/views/threeLaborService/components/map.vue
+++ b/src/views/threeLaborService/components/map.vue
@@ -45,31 +45,31 @@ const initialPoints = [
{
name: "崇阳街道",
value: [103.675571, 30.641527, 150],
- branch: 2,
- broker: 13
+ branch: 4,
+ broker: 15
},
{
name: "羊马街道",
value: [103.752865, 30.661384, 200],
- branch: 1,
- broker: 8
+ branch: 2,
+ broker: 12
},
{
name: "三江街道",
value: [103.791143, 30.548786, 180],
branch: 3,
- broker: 17
+ broker: 14
},
{
name: "江源街道",
value: [103.78269, 30.595347, 160],
- branch: 2,
- broker: 9
+ branch: 1,
+ broker: 10
},
{
name: "大划街道",
value: [103.742544, 30.566601, 140],
- branch: 1,
+ branch: 5,
broker: 5
},
{
diff --git a/src/views/threeLaborService/index.vue b/src/views/threeLaborService/index.vue
index 85b24f2..946c8d3 100644
--- a/src/views/threeLaborService/index.vue
+++ b/src/views/threeLaborService/index.vue
@@ -63,7 +63,7 @@ onUnmounted(() => {
.scale-container {
width: 100%;
height: 100%;
- overflow: hidden;
+ // overflow: hidden;
}
.allBox {