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-12 14:25:12 +08:00
parent 2ed80d527d
commit ff7d9b1f31
10 changed files with 171 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/recruitment/map-point1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/assets/images/recruitment/model-active-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/images/recruitment/network-tabs-active-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

3
src/assets/images/recruitment/network-tabs-arrow.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.124023 3.5L5.12402 4.44739e-08L5.12402 7L0.124023 3.5Z" fill="#31DBFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 184 B

BIN
src/assets/images/recruitment/network-tabs-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

18
src/router/index.js
View File

@ -20,15 +20,21 @@ export const privateRoutes = [];
* 公开路由表
*/
export const publicRoutes = [
// {
// path: "/",
// name: "/home",
// component: () => import("@/views/largeScreen/index"),
// meta: {}
// },
// {
// path: "/recruitment",
// name: "/recruitment",
// component: () => import("@/views/recruitment/index"),
// meta: {}
// },
{
path: "/",
name: "/home",
component: () => import("@/views/largeScreen/index"),
meta: {}
},
{
path: "/recruitment",
name: "/recruitment",
component: () => import("@/views/recruitment/index"),
meta: {}
},

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

@ -11,6 +11,8 @@ import { ref, reactive, computed, onMounted } from "vue";
import * as echarts from "echarts";
// 引入崇州市地图json数据
import chongzhouJSON from "@/assets/json/510184.json";
// 引入本地撒点图片
import pointImage from "@/assets/images/recruitment/map-point1.png";
// 获取地图DOM元素
let map = ref();
// 注册崇州地图
@ -54,11 +56,24 @@ let option = {
show: true,
color: "#fff",
fontSize: 12,
fontWeight: "bold"
fontWeight: "bold",
emphasis: {
show: true, // 确保悬停时标签显示
color: "#ffff00", // 鼠标悬停时的文字颜色
fontSize: 14, // 鼠标悬停时的文字大小
fontWeight: "bold" // 鼠标悬停时的文字粗细
}
},
itemStyle: {
normal: {
color: "#30DCFF"
color: "#121516",
borderColor: "#3a6c80", // 地图区域描边颜色
borderWidth: 1 // 地图区域描边宽度
},
emphasis: {
color: "#2d5565", // 鼠标悬停时的地图填充颜色
borderColor: "#30DCFF", // 地图区域描边颜色
borderWidth: 1 // 地图区域描边宽度
}
}
}
@ -71,13 +86,13 @@ let option = {
data: initialPoints,
symbolSize: function (val) {
// 根据数值大小动态调整点的大小
return val[2] / 10;
return val[2] / 6;
},
label: {
show: false,
formatter: "{b}"
},
symbol: function (params) {}
symbol: "image://" + pointImage // 使用本地图片作为标记
}
]
};

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

@ -8,6 +8,8 @@ import { ref, reactive, computed, onMounted } from "vue";
import * as echarts from "echarts";
// 引入崇州市地图json数据
import chongzhouJSON from "@/assets/json/510184.json";
// 引入本地撒点图片
import pointImage from "@/assets/images/recruitment/map-point1.png";
// 获取地图DOM元素
let map = ref();
// 注册崇州地图
@ -51,11 +53,24 @@ let option = {
show: true,
color: "#fff",
fontSize: 12,
fontWeight: "bold"
fontWeight: "bold",
emphasis: {
show: true, // 确保悬停时标签显示
color: "#ffff00", // 鼠标悬停时的文字颜色
fontSize: 14, // 鼠标悬停时的文字大小
fontWeight: "bold" // 鼠标悬停时的文字粗细
}
},
itemStyle: {
normal: {
color: "#30DCFF"
color: "#121516",
borderColor: "#3a6c80", // 地图区域描边颜色
borderWidth: 1 // 地图区域描边宽度
},
emphasis: {
color: "#2d5565", // 鼠标悬停时的地图填充颜色
borderColor: "#30DCFF", // 地图区域描边颜色
borderWidth: 1 // 地图区域描边宽度
}
}
}
@ -68,13 +83,13 @@ let option = {
data: initialPoints,
symbolSize: function (val) {
// 根据数值大小动态调整点的大小
return val[2] / 10;
return val[2] / 6;
},
label: {
show: false,
formatter: "{b}"
},
symbol: function (params) {}
symbol: "image://" + pointImage // 使用本地图片作为标记
}
]
};

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

@ -1,3 +1,46 @@
<template>
<div class="costomCaedWrapper">
<div class="horizontal-scroll-container">
<!-- 左侧滚动按钮 -->
<!-- <button-->
<!-- class="scroll-button left"-->
<!-- :class="{ visible: canScrollLeft }"-->
<!-- @click="scrollTo('left')"-->
<!-- >-->
<!-- <svg viewBox="0 0 24 24">-->
<!-- <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>-->
<!-- </svg>-->
<!-- </button>-->
<!-- 横向滚动区域 -->
<div ref="scrollContainer" class="scroll-area" @scroll="checkScroll">
<div
v-for="(tab, index) in state.tabs"
:key="index"
class="tab-item"
:class="{ active: state.activeIndex === index }"
@click="selectTab(index)"
>
{{ tab }}
</div>
</div>
<!-- 右侧滚动按钮 -->
<!-- <button-->
<!-- class="scroll-button right"-->
<!-- :class="{ visible: canScrollRight }"-->
<!-- @click="scrollTo('right')"-->
<!-- >-->
<!-- <svg viewBox="0 0 24 24">-->
<!-- <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>-->
<!-- </svg>-->
<!-- </button>-->
</div>
<NetworkMap />
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import NetworkMap from "../card/NetworkMap.vue";
@ -6,9 +49,10 @@ const state = reactive({
"公共服务站点 300",
"培训机构 130",
"咨询机构 220",
"教育中心 150",
"职业介绍所 180",
"就业服务中心 210"
"劳务公司 300",
"招聘与猎头机构 300",
"⼈⼒资源服务外包机构（HRO）300",
"职业中介与公共就业服务机构 300"
],
activeIndex: 0
});
@ -74,49 +118,6 @@ onMounted(() => {
});
</script>
<template>
<div class="costomCaedWrapper">
<div class="horizontal-scroll-container">
<!-- 左侧滚动按钮 -->
<!-- <button-->
<!-- class="scroll-button left"-->
<!-- :class="{ visible: canScrollLeft }"-->
<!-- @click="scrollTo('left')"-->
<!-- >-->
<!-- <svg viewBox="0 0 24 24">-->
<!-- <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>-->
<!-- </svg>-->
<!-- </button>-->
<!-- 横向滚动区域 -->
<div ref="scrollContainer" class="scroll-area" @scroll="checkScroll">
<div
v-for="(tab, index) in state.tabs"
:key="index"
class="tab-item"
:class="{ active: state.activeIndex === index }"
@click="selectTab(index)"
>
{{ tab }}
</div>
</div>
<!-- 右侧滚动按钮 -->
<!-- <button-->
<!-- class="scroll-button right"-->
<!-- :class="{ visible: canScrollRight }"-->
<!-- @click="scrollTo('right')"-->
<!-- >-->
<!-- <svg viewBox="0 0 24 24">-->
<!-- <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>-->
<!-- </svg>-->
<!-- </button>-->
</div>
<NetworkMap />
</div>
</template>
<style lang="scss" scoped>
.costomCaedWrapper {
.echart {
@ -150,22 +151,61 @@ onMounted(() => {
}
.tab-item {
position: relative;
flex: 0 0 auto;
margin: 0 8px;
width: 6.771vw;
padding: 0 0.5vw;
height: 1.875vw;
text-align: center;
font-size: 0.729vw;
line-height: 1.875vw;
background: url("~@/assets/recruitment/tabs_bg.svg") no-repeat center center;
background-size: 100% 100%;
border: 1px solid rgba(203, 242, 250, 0.2);
border-radius: 4px;
background: linear-gradient(
90deg,
rgba(203, 242, 250, 0) 0%,
rgba(203, 242, 250, 0.19) 51%,
rgba(203, 242, 250, 0) 100%
);
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
&.active::before {
transform: rotate(180deg);
position: absolute;
content: "";
background: url("~@/assets/images/recruitment/network-tabs-arrow.svg")
no-repeat;
background-size: auto 100%;
width: 0.6vw;
height: 0.6vw;
left: 0;
top: 50%;
margin: -0.3vw 0 0 -0.5vw;
}
&.active::after {
position: absolute;
content: "";
background: url("~@/assets/images/recruitment/network-tabs-arrow.svg")
no-repeat;
background-size: auto 100%;
width: 0.6vw;
height: 0.6vw;
right: 0;
top: 50%;
margin: -0.3vw -0.45vw 0 0;
}
}
.tab-item.active {
background-image: url("~@/assets/recruitment/tabs_bg_active.svg");
border: 1px solid rgba(203, 242, 250, 0.2);
border-radius: 4px;
background: linear-gradient(
90deg,
rgba(48, 220, 255, 0.12) 0%,
rgba(48, 220, 255, 0.84) 51%,
rgba(48, 220, 255, 0.12) 100%
);
color: white;
font-weight: 500;
}

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

@ -18,6 +18,7 @@
<div class="num">780,000</div>
<div class="label">人口总数</div>
</div>
<transition name="fade">
<div class="hjrkDialogBox" v-show="isactive != -1">
<div class="titleBox">
<div class="title">户籍人口</div>
@ -33,8 +34,10 @@
{{ item }}
</li>
</ul>
<div class="barBox" ref="enterpriseTwoRef"></div>
</div>
</transition>
</div>
</template>
@ -258,8 +261,15 @@ onMounted(() => {
&:nth-last-child(3) {
margin-left: 8vw;
}
&.active .num {
color: red;
&.active {
background: url("~@/assets/images/recruitment/model-active-bg.png")
no-repeat;
background-size: 100% 100%;
.num {
background: -webkit-linear-gradient(#fff4b3, #ffd901);
-webkit-background-clip: text;
color: transparent;
}
}
}
}