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 17:53:57 +08:00
parent 52535df2fb
commit 0f96d81ac0
12 changed files with 429 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,9 @@
<template> <template>
<div class="allBox"> <div class="scale-container">
<div
class="allBox"
:style="{ transform: `scale(${scale})`, transformOrigin: '0 0' }"
>
<!-- 头部 --> <!-- 头部 -->
<Head title="“产教评”融合培训平台"></Head> <Head title="“产教评”融合培训平台"></Head>
<LeftBorder></LeftBorder> <LeftBorder></LeftBorder>
@ -66,10 +70,11 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted, onUnmounted } from "vue";
import Head from "../../components/largeScreen/headHome.vue"; import Head from "../../components/largeScreen/headHome.vue";
import LeftBorder from "../../components/largeScreen/leftBorder.vue"; import LeftBorder from "../../components/largeScreen/leftBorder.vue";
import RightBorder from "../../components/largeScreen/rightBorder.vue"; import RightBorder from "../../components/largeScreen/rightBorder.vue";
@ -127,9 +132,38 @@ const zsfzTabData = ref([
unit: "个" unit: "个"
} }
]); ]);
// 缩放比例
const scale = ref(1);
// 计算缩放比例
const calculateScale = () => {
const windowWidth = window.innerWidth;
const designWidth = 1920;
scale.value = windowWidth / designWidth;
};
// 处理窗口大小变化
const handleResize = () => {
calculateScale();
};
// 生命周期钩子
onMounted(() => {
calculateScale();
window.addEventListener("resize", handleResize);
});
onUnmounted(() => {
window.removeEventListener("resize", handleResize);
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.scale-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.pubTitle { .pubTitle {
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
@ -144,7 +178,7 @@ const zsfzTabData = ref([
.allBox { .allBox {
width: 1920px; width: 1920px;
height: 3240px; height: 3240px;
margin: 0 auto;
background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat; background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
background-size: 100%; background-size: 100%;
position: relative; position: relative;
@ -220,4 +254,11 @@ const zsfzTabData = ref([
#app { #app {
overflow: auto !important; overflow: auto !important;
} }
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style> </style>

1
src/views/platformBusinessData/index.scss
View File

@ -1,7 +1,6 @@
.allBox { .allBox {
width: 1920px; width: 1920px;
height: 3240px; height: 3240px;
margin: 0 auto;
background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat; background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
background-size: 100%; background-size: 100%;
position: relative; position: relative;

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

@ -1,5 +1,9 @@
<template> <template>
<div class="allBox"> <div class="scale-container">
<div
class="allBox"
:style="{ transform: `scale(${scale})`, transformOrigin: '0 0' }"
>
<!-- 头部 --> <!-- 头部 -->
<Head title="兴蜀来了平台业务数据"></Head> <Head title="兴蜀来了平台业务数据"></Head>
<LeftBorder></LeftBorder> <LeftBorder></LeftBorder>
@ -23,10 +27,11 @@
<MainBoxSix></MainBoxSix> <MainBoxSix></MainBoxSix>
</ul> </ul>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted, onUnmounted } from "vue";
import Head from "../../components/largeScreen/headHome.vue"; import Head from "../../components/largeScreen/headHome.vue";
import LeftBorder from "../../components/largeScreen/leftBorder.vue"; import LeftBorder from "../../components/largeScreen/leftBorder.vue";
import RightBorder from "../../components/largeScreen/rightBorder.vue"; import RightBorder from "../../components/largeScreen/rightBorder.vue";
@ -41,13 +46,58 @@ import MainBoxSix from "./components/mainBoxSix";
// 定义标题名称 // 定义标题名称
const title = "三级劳务体系⼈员数据"; const title = "三级劳务体系⼈员数据";
// 缩放比例
const scale = ref(1);
// 计算缩放比例
const calculateScale = () => {
const windowWidth = window.innerWidth;
const designWidth = 1920;
scale.value = windowWidth / designWidth;
};
// 处理窗口大小变化
const handleResize = () => {
calculateScale();
};
// 生命周期钩子
onMounted(() => {
calculateScale();
window.addEventListener("resize", handleResize);
});
onUnmounted(() => {
window.removeEventListener("resize", handleResize);
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.scale-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.allBox {
width: 1920px;
height: 3240px;
// margin: 0 auto;
background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
background-size: 100%;
position: relative;
transition: transform 0.3s ease; // 添加过渡效果
}
@import "./index.scss"; @import "./index.scss";
</style> </style>
<style lang="scss"> <style lang="scss">
#app { #app {
overflow: auto !important; overflow: auto !important;
} }
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style> </style>

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

@ -14,7 +14,7 @@ const option = {
top: "17%", top: "17%",
left: "15%", left: "15%",
right: "5%", right: "5%",
bottom: "10%" bottom: "20%"
}, },
// 设置图例 // 设置图例
legend: { legend: {
@ -33,7 +33,12 @@ const option = {
color: "#CBF2FA" // 文字颜色 color: "#CBF2FA" // 文字颜色
} }
}, },
axisLabel: {
fontSize: 14, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 20, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离
},
type: "category", type: "category",
data: ["制造业", "服务业", "建筑业"] data: ["制造业", "服务业", "建筑业"]
}, },
@ -64,7 +69,8 @@ const option = {
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF" color: "#30DCFF",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色
@ -91,7 +97,8 @@ const option = {
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#CBF2FA" color: "#CBF2FA",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

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

@ -14,7 +14,7 @@ const option = {
top: "15%", top: "15%",
left: "15%", left: "15%",
right: "5%", right: "5%",
bottom: "10%" bottom: "20%"
}, },
// 设置图例 // 设置图例
legend: { legend: {
@ -33,7 +33,12 @@ const option = {
color: "#CBF2FA" // 文字颜色 color: "#CBF2FA" // 文字颜色
} }
}, },
axisLabel: {
fontSize: 14, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 20, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离
},
type: "category", type: "category",
data: ["微型企业", "小型企业", "中型企业", "大型企业"] data: ["微型企业", "小型企业", "中型企业", "大型企业"]
}, },
@ -64,7 +69,8 @@ const option = {
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF" color: "#30DCFF",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色
@ -91,7 +97,8 @@ const option = {
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#CBF2FA" color: "#CBF2FA",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

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

@ -17,7 +17,7 @@ const option = {
top: "17%", top: "17%",
left: "15%", left: "15%",
right: "5%", right: "5%",
bottom: "10%" bottom: "20%"
}, },
tooltip: { tooltip: {
trigger: "axis" trigger: "axis"
@ -28,7 +28,12 @@ const option = {
color: "#CBF2FA" // 文字颜色 color: "#CBF2FA" // 文字颜色
} }
}, },
axisLabel: {
fontSize: 14, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 30, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离
},
type: "category", type: "category",
data: [ data: [
"1月", "1月",
@ -67,12 +72,13 @@ const option = {
type: "line", type: "line",
showBackground: true, showBackground: true,
barWidth: 8, barWidth: 8,
data: [38, 62, 52, 41, 37, 62, 52, 41, 67, 62, 52, 41], data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
// 设置柱状图的数值 // 设置柱状图的数值
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF" color: "#30DCFF",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

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

@ -33,7 +33,9 @@ const option = {
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#CBF2FA" color: "#CBF2FA"
} },
fontSize: 14, // 设置 x 轴文字大小
color: "#CBF2FA" // 可以同时设置文字颜色
} }
}, },
yAxis: { yAxis: {
@ -62,7 +64,8 @@ const option = {
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF" color: "#30DCFF",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

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

@ -17,7 +17,7 @@ const option = {
top: "17%", top: "17%",
left: "15%", left: "15%",
right: "5%", right: "5%",
bottom: "10%" bottom: "20%"
}, },
tooltip: { tooltip: {
trigger: "axis" trigger: "axis"
@ -28,7 +28,12 @@ const option = {
color: "#CBF2FA" // 文字颜色 color: "#CBF2FA" // 文字颜色
} }
}, },
axisLabel: {
fontSize: 14, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 30, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离
},
type: "category", type: "category",
data: [ data: [
"1月", "1月",
@ -67,12 +72,13 @@ const option = {
type: "line", type: "line",
showBackground: true, showBackground: true,
barWidth: 8, barWidth: 8,
data: [38, 62, 52, 41, 37, 62, 52, 41, 67, 62, 52, 41], data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
// 设置柱状图的数值 // 设置柱状图的数值
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF" color: "#30DCFF",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

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

@ -94,8 +94,12 @@ let option = {
return 30; return 30;
}, },
label: { label: {
show: false, show: false, // 改为 true 显示标签
formatter: "{b}" formatter: "{b}", // 显示城市名称
position: "right", // 标签位置在点的上方
color: "#fff", // 标签颜色
fontSize: 16, // 字体大小
fontWeight: "bold" // 字体粗细
}, },
symbol: "image://" + pointImage // 使用本地图片作为标记 symbol: "image://" + pointImage // 使用本地图片作为标记
} }

8
src/views/recruitment/components/costomCaed.vue
View File

@ -49,10 +49,10 @@ const state = reactive({
"公共服务站点 40", "公共服务站点 40",
// "培训机构 130", // "培训机构 130",
// "咨询机构 220", // "咨询机构 220",
"劳务公司 13", "培训机构 5"
"招聘与猎头机构 5", // "招聘与猎头机构 5",
"⼈⼒资源服务外包机构（HRO）3", // "⼈⼒资源服务外包机构（HRO）3",
"职业中介与公共就业服务机构 8" // "职业中介与公共就业服务机构 8"
], ],
activeIndex: 0 activeIndex: 0
}); });

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

@ -14,14 +14,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="content" v-show="isactive == -1"> <div class="content" v-show="isactive != 0 && isactive != 5">
<div class="num">74.24万</div> <div class="num">81.1万</div>
<div class="label">人口总数</div> <div class="label">人口总数</div>
</div> </div>
<transition name="fade"> <!-- <transition name="fade"> -->
<div class="hjrkDialogBox" v-show="isactive != -1"> <div class="hjrkDialogBox" v-show="isactive == 0">
<div class="titleBox"> <div class="titleBox">
<div class="title">{{ dialogTitle }}</div> <div class="title">户籍人口</div>
<div class="close" @click="isactive = -1"></div> <div class="close" @click="isactive = -1"></div>
</div> </div>
<ul class="tabsBox"> <ul class="tabsBox">
@ -45,13 +45,35 @@
<div class="barBox" ref="enterpriseTwoRef"></div> <div class="barBox" ref="enterpriseTwoRef"></div>
</div> </div>
</transition> <!-- </transition> -->
<div class="hjrkDialogBox" v-show="isactive == 5">
<div class="titleBox">
<div class="title">高终端人才</div>
<div class="close" @click="isactive = -1"></div>
</div>
<ul class="statisticOne">
<li v-for="(item, index) in statisticData" :key="index">
<img :src="item.imgURL" :alt="item.title" />
<div class="infoBox">
<div class="title">
<span>{{ item.title }}</span>
</div>
<div class="count">
<span class="numb">{{ item.count }}</span
>（{{ item.unit }}）
</div>
</div>
</li>
</ul>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted } from "vue"; 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";
const isactive = ref(-1); const isactive = ref(-1);
const tabsActive = ref(0); const tabsActive = ref(0);
const dialogTitle = ref("户籍人口"); const dialogTitle = ref("户籍人口");
@ -88,12 +110,47 @@ const modelContentList = ref([
num: "0.54万", num: "0.54万",
label: "新增就业群体" label: "新增就业群体"
}, },
{
num: "2.2万",
label: "高中端人才"
},
{ {
num: "0.76万", num: "0.76万",
label: "领金人员" label: "领金人员"
} }
]); ]);
const statisticData = ref([
{
imgURL: tongjiPxjg,
title: "国家级领军人才",
count: "18",
unit: "人"
},
{
imgURL: tongjiPxjg,
title: "地方级领军型人才",
count: "45",
unit: "人"
},
{
imgURL: tongjiPxjg,
title: "博士",
count: "133",
unit: "人"
},
{
imgURL: tongjiPxjg,
title: "硕士",
count: "1012",
unit: "人"
},
{
imgURL: tongjiPxjg,
title: "本科",
count: "20792",
unit: "人"
}
]);
const tabsDate = reactive({ const tabsDate = reactive({
tabs: [ tabs: [
"学历", "学历",
@ -137,7 +194,7 @@ const option = {
}, },
type: "category", type: "category",
data: ["国家级领军人才", "地方级领军型人才", "博士", "硕士", "本科"] data: ["大专及以上", "高中(含中专)", "初中", "小学"]
}, },
yAxis: { yAxis: {
//网格线 //网格线
@ -161,7 +218,7 @@ const option = {
type: "bar", type: "bar",
showBackground: true, showBackground: true,
barWidth: 20, barWidth: 20,
data: [18, 45, 133, 1012, 20792], data: [71013, 105716, 266225, 210356],
// 设置柱状图的数值 // 设置柱状图的数值
label: { label: {
show: true, show: true,
@ -342,4 +399,56 @@ onMounted(() => {
} }
} }
} }
ul.statisticOne {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-top: 3vw;
li {
// width: 450px;
height: 190px;
margin: 0 10px;
// 第一排的前2个元素（第一排显示2个）
&:nth-child(-n + 2) {
width: 20vw; // 减去margin值
}
// // 第二排的第3-5个元素（第二排显示3个）
// &:nth-child(n + 3):nth-child(-n + 5) {
// width: calc(33.33% - 20px); // 减去margin值
// }
img {
display: block;
width: 7vw;
height: 7vw;
float: left;
}
.infoBox {
float: left;
padding: 0 0 0 10px;
.title {
height: 40px;
line-height: 40px;
margin-top: 36px;
span {
background: -webkit-linear-gradient(#ffffff, #75e8ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.3vw;
font-weight: 400;
}
}
.count {
font-size: 24px;
padding: 18px 0 0 0;
span.numb {
font-size: 2.1vw;
display: inline-block;
padding: 0 5px 0 0;
}
}
}
}
}
</style> </style>

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

@ -1,5 +1,9 @@
<template> <template>
<div class="allBox"> <div class="scale-container">
<div
class="allBox"
:style="{ transform: `scale(${scale})`, transformOrigin: '0 0' }"
>
<!-- 头部 --> <!-- 头部 -->
<Head title="三级劳务体系⼈员数据"></Head> <Head title="三级劳务体系⼈员数据"></Head>
<LeftBorder></LeftBorder> <LeftBorder></LeftBorder>
@ -14,9 +18,11 @@
<!-- 解决就业情况 --> <!-- 解决就业情况 -->
<SolveEmployment style="margin-top: 40px"></SolveEmployment> <SolveEmployment style="margin-top: 40px"></SolveEmployment>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onUnmounted } from "vue";
import Head from "../../components/largeScreen/headHome.vue"; import Head from "../../components/largeScreen/headHome.vue";
import Statistic from "./components/statistic.vue"; import Statistic from "./components/statistic.vue";
import Map from "./components/map.vue"; import Map from "./components/map.vue";
@ -27,20 +33,58 @@ import RightBorder from "../../components/largeScreen/rightBorder.vue";
import BottomBorder from "../../components/largeScreen/bottomBorder.vue"; import BottomBorder from "../../components/largeScreen/bottomBorder.vue";
// 定义标题名称 // 定义标题名称
const title = "三级劳务体系⼈员数据"; const title = "三级劳务体系⼈员数据";
// 缩放比例
const scale = ref(1);
// 计算缩放比例
const calculateScale = () => {
const windowWidth = window.innerWidth;
const designWidth = 1920;
scale.value = windowWidth / designWidth;
};
// 处理窗口大小变化
const handleResize = () => {
calculateScale();
};
// 生命周期钩子
onMounted(() => {
calculateScale();
window.addEventListener("resize", handleResize);
});
onUnmounted(() => {
window.removeEventListener("resize", handleResize);
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.scale-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.allBox { .allBox {
width: 1920px; width: 1920px;
height: 3240px; height: 3240px;
margin: 0 auto; // margin: 0 auto;
background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat; background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
background-size: 100%; background-size: 100%;
position: relative; position: relative;
transition: transform 0.3s ease; // 添加过渡效果
} }
</style> </style>
<style lang="scss"> <style lang="scss">
#app { #app {
overflow: auto !important; overflow: auto !important;
} }
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style> </style>