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-10-21 19:41:21 +08:00
parent 26878528b9
commit 4ba4878f8a
16 changed files with 251 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/integratedTrainingPlatform/index.vue
View File

@ -162,7 +162,7 @@ onUnmounted(() => {
.scale-container {
width: 100%;
height: 100%;
overflow: hidden;
// overflow: hidden;
}
.pubTitle {
height: 60px;

2
src/views/platformBusinessData/index.vue
View File

@ -76,7 +76,7 @@ onUnmounted(() => {
.scale-container {
width: 100%;
height: 100%;
overflow: hidden;
// overflow: hidden;
}
.allBox {
width: 1920px;

10
src/views/recruitment/card/CollegeTalentsOne.vue
View File

@ -4,7 +4,7 @@
<div class="carcTitle">促就业学历占比</div>
<div class="pieMain">
<div class="pieBox" ref="pieRef"></div>
<div class="pieTitle">学历占比</div>
<!-- <div class="pieTitle">学历占比</div> -->
</div>
<ul class="pieLsit">
<li>
@ -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: {

1
src/views/recruitment/card/CollegeTalentsTwo.vue
View File

@ -69,6 +69,7 @@ ul.schoolLsit {
}
.name {
color: #cbf2fa;
font-size: 0.7vw;
}
.numb {
color: #30dcff;

6
src/views/recruitment/card/EnterpriseEmploymentOne.vue
View File

@ -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;
}
}

16
src/views/recruitment/card/EnterpriseEmploymentThree.vue
View File

@ -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: {
//渐变色

12
src/views/recruitment/card/EnterpriseEmploymentTwo.vue
View File

@ -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: {
//渐变色

8
src/views/recruitment/card/LaborSystemFour.vue
View File

@ -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: {
//渐变色

11
src/views/recruitment/card/LaborSystemOne.vue
View File

@ -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: {
//渐变色

8
src/views/recruitment/card/LaborSystemThree.vue
View File

@ -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: {
//渐变色

8
src/views/recruitment/card/LaborSystemTwo.vue
View File

@ -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 显示标签

13
src/views/recruitment/card/NetworkMap.vue
View File

@ -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,

6
src/views/recruitment/index.vue
View File

@ -14,7 +14,7 @@
:type2="cardOneInfo.type2"
>
<el-carousel
:interval="4000"
:interval="8000"
type="card"
height="17vw"
indicator-position="none"
@ -52,7 +52,7 @@
:type2="cardThreeInfo.type2"
>
<el-carousel
:interval="4000"
:interval="8000"
type="card"
height="17vw"
indicator-position="none"
@ -72,7 +72,7 @@
style="margin-top: 0.625vw"
>
<el-carousel
:interval="4000"
:interval="8000"
type="card"
height="17vw"
indicator-position="none"

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

@ -14,7 +14,10 @@
</div>
</div>
</div>
<div class="content" v-show="isactive != 0 && isactive != 5">
<div
class="content"
v-show="isactive != 0 && isactive != 4 && isactive != 5"
>
<div class="num">81.1万</div>
<div class="label">人口总数</div>
</div>
@ -48,7 +51,7 @@
<!-- </transition> -->
<div class="hjrkDialogBox" v-show="isactive == 5">
<div class="titleBox">
<div class="title">高终端人才</div>
<div class="title">高中端人才</div>
<div class="close" @click="isactive = -1"></div>
</div>
<ul class="statisticOne">
@ -66,6 +69,43 @@
</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>
@ -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);
}
});
</script>
@ -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;
}
}
}
}
</style>

16
src/views/threeLaborService/components/map.vue
View File

@ -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
},
{

2
src/views/threeLaborService/index.vue
View File

@ -63,7 +63,7 @@ onUnmounted(() => {
.scale-container {
width: 100%;
height: 100%;
overflow: hidden;
// overflow: hidden;
}
.allBox {