Compare commits
5 Commits
ddea6d7c97
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| ae04a588a0 | |||
| 210231ada4 | |||
| 47ef3fcac8 | |||
| 89439528df | |||
| b9ad571738 |
BIN
src/assets/images/ms/quanGuo.png
Normal file
BIN
src/assets/images/ms/quanGuo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 MiB |
@ -76,7 +76,7 @@ export const publicRoutes = [
|
|||||||
name: "/platformBusinessData",
|
name: "/platformBusinessData",
|
||||||
component: () => import("@/views/platformBusinessData/index"),
|
component: () => import("@/views/platformBusinessData/index"),
|
||||||
meta: {}
|
meta: {}
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|||||||
@ -1,10 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="carcTitle">省内区域劳务协作撒点</div>
|
<div class="carcTitle">省内区域劳务协作撒点</div>
|
||||||
<!-- <div ref="map" style="width: 17vw; height: 14.5vw"></div> -->
|
<div ref="map" style="width: 19vw; height: 16vw"></div>
|
||||||
<div ref="map" style="width: 20vw; height: 17vw;left: -2vw;top: -2vw;"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -38,91 +36,138 @@ const calcResponsivePX = (pxValue) => {
|
|||||||
|
|
||||||
// 初始点位数据
|
// 初始点位数据
|
||||||
const initialPoints = [
|
const initialPoints = [
|
||||||
{ name: "攀枝花", value: [101.718, 26.582, 0], count: 0 },
|
{ name: "绵阳市", value: [104.69,31.47, 0], count: 0 },
|
||||||
{ name: "雅安", value: [103.009, 29.988, 0], count: 0 },
|
{ name: "广元市昭化区", value: [105.97,32.33, 0], count: 0 },
|
||||||
{ name: "眉山", value: [103.848, 30.082, 0], count: 0 },
|
{ name: "巴中市恩阳区", value: [106.64,31.80, 0], count: 0 },
|
||||||
{ name: "自贡", value: [104.777, 29.350, 0], count: 0 },
|
{ name: "达州市渠县", value: [106.98,30.84, 0], count: 0 },
|
||||||
{ name: "泸州", value: [105.442, 28.871, 0], count: 0 },
|
{ name: "达州市开江县", value: [107.88,31.09, 0], count: 0 },
|
||||||
{ name: "资阳", value: [104.628, 30.122, 0], count: 0 },
|
{ name: "达州市大竹县", value: [107.21,30.74, 0], count: 0 },
|
||||||
{ name: "遂宁", value: [105.576, 30.523, 0], count: 0 },
|
{ name: "广安市", value: [106.64,30.46, 0], count: 0 },
|
||||||
{ name: "广安", value: [106.636, 30.463, 0], count: 0 },
|
{ name: "广安市岳池县", value: [106.45,30.54, 0], count: 0 },
|
||||||
{ name: "德阳", value: [104.399, 31.130, 0], count: 0 },
|
{ name: "广安华蓥市", value: [106.79,30.40, 0], count: 0 },
|
||||||
{ name: "绵阳", value: [104.684185, 31.473263, 0], count: 0 },
|
{ name: "南充顺庆区", value: [106.10,30.80, 0], count: 0 },
|
||||||
{ name: "广元", value: [105.834, 32.435, 0], count: 0 },
|
{ name: "遂宁市大英县", value: [105.24,30.60, 0], count: 0 },
|
||||||
{ name: "巴中", value: [106.753, 31.857, 0], count: 0 },
|
{ name: "德阳市中江县", value: [104.69,31.04, 0], count: 0 },
|
||||||
{ name: "达州", value: [107.467, 31.209, 0], count: 0 },
|
{ name: "资阳市雁江区", value: [104.68,30.11, 0], count: 0 },
|
||||||
{ name: "南充", value: [106.110, 30.837, 0], count: 0 }
|
{ name: "雅安市荥经县", value: [102.85,29.80, 0], count: 0 },
|
||||||
|
{ name: "雅安市天全县", value: [102.76,30.07, 0], count: 0 },
|
||||||
|
{ name: "眉山市青神县", value: [103.85,29.84, 0], count: 0 },
|
||||||
|
{ name: "自贡贡井区", value: [104.72,29.35, 0], count: 0 },
|
||||||
|
{ name: "泸州市", value: [105.45,28.88, 0], count: 0 },
|
||||||
|
{ name: "攀枝花市", value: [101.73,26.59, 0], count: 0 },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// 生成随机高度值函数
|
||||||
|
const generateRandomHeights = (points, minHeight = 10, maxHeight = 25) => {
|
||||||
|
return points.map(point => ({
|
||||||
|
...point,
|
||||||
|
value: [point.value[0], point.value[1], Math.random() * (maxHeight - minHeight) + minHeight]
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
// 获取动态配置
|
// 获取动态配置
|
||||||
const getChartOption = () => ({
|
const getChartOption = () => {
|
||||||
tooltip: {
|
const pointsWithRandomHeights = generateRandomHeights(initialPoints);
|
||||||
trigger: "item",
|
|
||||||
formatter: (params) => {
|
return {
|
||||||
if (params.seriesType === "scatter3D") {
|
tooltip: {
|
||||||
return `${params.name}<br/>合作社数量:${params.data.count || 0}`;
|
trigger: "item",
|
||||||
|
formatter: (params) => {
|
||||||
|
if (params.seriesType === "scatter3D") {
|
||||||
|
return `${params.name}<br/>合作社数量:${params.data.count || 0}`;
|
||||||
|
}
|
||||||
|
return params.name;
|
||||||
|
},
|
||||||
|
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||||
|
borderColor: "#30DCFF",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 12
|
||||||
}
|
}
|
||||||
return params.name;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
geo3D: {
|
|
||||||
type: "map3D",
|
|
||||||
map: "sichuan",
|
|
||||||
regionHeight: 6,
|
|
||||||
boxHeight: 2,
|
|
||||||
roam: false,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
color: "#CBF2FA",
|
|
||||||
fontSize: calcResponsivePX(10),
|
|
||||||
fontWeight: "bold"
|
|
||||||
},
|
},
|
||||||
itemStyle: {
|
geo3D: {
|
||||||
color: "rgba(27, 129, 150, 0.4)",
|
type: "map3D",
|
||||||
borderColor: "#61cfff",
|
map: "sichuan",
|
||||||
borderWidth: 2,
|
regionHeight: 6,
|
||||||
opacity: 0.75
|
boxHeight: 2,
|
||||||
|
roam: true,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: "bold"
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(27,129,150,0.18)",
|
||||||
|
borderColor: "#61cfff",
|
||||||
|
borderWidth: 2,
|
||||||
|
opacity: 0.3
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(27, 129, 150, 0.3)",
|
||||||
|
opacity: 0.5
|
||||||
|
},
|
||||||
|
label: { show: false }
|
||||||
|
},
|
||||||
|
light: {
|
||||||
|
main: {
|
||||||
|
intensity: 1.6,
|
||||||
|
shadow: true,
|
||||||
|
shadowQuality: "high",
|
||||||
|
alpha: 35,
|
||||||
|
beta: 15
|
||||||
|
},
|
||||||
|
ambient: { intensity: 0.35 }
|
||||||
|
},
|
||||||
|
shading: "lambert",
|
||||||
|
viewControl: {
|
||||||
|
distance: 110,
|
||||||
|
alpha: 45,
|
||||||
|
beta: 10
|
||||||
|
},
|
||||||
|
groundPlane: { show: false }
|
||||||
},
|
},
|
||||||
emphasis: {
|
series: [
|
||||||
itemStyle: { color: "rgba(27, 129, 150, 0.65)", opacity: 0.85 },
|
|
||||||
label: { color: "#ffff00" }
|
|
||||||
},
|
|
||||||
light: {
|
|
||||||
main: { intensity: 1.6, shadow: true, shadowQuality: "high", alpha: 35, beta: 15 },
|
|
||||||
ambient: { intensity: 0.35 }
|
|
||||||
},
|
|
||||||
shading: "lambert",
|
|
||||||
viewControl: {
|
|
||||||
distance: 110,
|
|
||||||
alpha: 45,
|
|
||||||
beta: 10,
|
|
||||||
},
|
|
||||||
groundPlane: { show: false },
|
|
||||||
postEffect: {
|
|
||||||
enable: true,
|
|
||||||
bloom: {
|
|
||||||
enable: true,
|
|
||||||
bloomIntensity: 0.25
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
{
|
||||||
name: "城市点位(3D)",
|
name: "城市点位(3D)",
|
||||||
type: "scatter3D",
|
type: "scatter3D",
|
||||||
coordinateSystem: "geo3D",
|
coordinateSystem: "geo3D",
|
||||||
data: initialPoints.map(p => ({
|
data: pointsWithRandomHeights.map(p => ({
|
||||||
name: p.name,
|
name: p.name,
|
||||||
value: [p.value[0], p.value[1], 6],
|
value: p.value,
|
||||||
count: p.count
|
count: p.count,
|
||||||
|
// 关键:使用正确的 label 配置方式
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
formatter: p.name,
|
||||||
|
position: [p.value[2] + 5, p.value[2] + 5, p.value[2] + 5], // [x, y, z] - 在点上方固定偏移
|
||||||
|
distance: 0, // 重要:设置为0,使用绝对位置
|
||||||
|
textStyle: {
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#30dcff',
|
||||||
|
padding: [4, 8],
|
||||||
|
borderRadius: 4,
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 10
|
||||||
|
}
|
||||||
|
}
|
||||||
})),
|
})),
|
||||||
symbol: "triangle",
|
symbol: "triangle", // 改为圆形,更明显
|
||||||
symbolSize: calcResponsivePX(12),
|
symbolSize: calcResponsivePX(12), // 增大符号尺寸
|
||||||
itemStyle: { color: "#FFBE34" },
|
itemStyle: { color: "#FFBE34" },
|
||||||
label: { show: false }
|
label: {
|
||||||
|
textStyle: {
|
||||||
|
backgroundColor: 'rgba(255,190,52,0.9)',
|
||||||
|
color: '#000',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 处理图表重绘(防抖优化)
|
// 处理图表重绘(防抖优化)
|
||||||
const handleChartResize = debounce(() => {
|
const handleChartResize = debounce(() => {
|
||||||
@ -175,7 +220,7 @@ onUnmounted(() => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: #c4f3fe;
|
color: #c4f3fe;
|
||||||
background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat
|
background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat
|
||||||
center;
|
center;
|
||||||
background-size: auto 100%;
|
background-size: auto 100%;
|
||||||
margin-top: 0.7vw;
|
margin-top: 0.7vw;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -59,18 +59,18 @@
|
|||||||
:type1="cardFourInfo.type1"
|
:type1="cardFourInfo.type1"
|
||||||
:type2="cardFourInfo.type2"
|
:type2="cardFourInfo.type2"
|
||||||
>
|
>
|
||||||
<el-carousel
|
<!-- <el-carousel-->
|
||||||
:interval="8000"
|
<!-- :interval="8000"-->
|
||||||
type="card"
|
<!-- type="card"-->
|
||||||
height="17vw"
|
<!-- height="17vw"-->
|
||||||
indicator-position="none"
|
<!-- indicator-position="none"-->
|
||||||
:autoplay="true"
|
<!-- :autoplay="true"-->
|
||||||
>
|
<!-- >-->
|
||||||
<!-- <el-carousel-item><LaborSystemOne /></el-carousel-item> -->
|
<!-- <el-carousel-item><LaborSystemOne /></el-carousel-item> -->
|
||||||
<el-carousel-item class="isVisibleImg"><LaborSystemTwo /></el-carousel-item>
|
<div class="isVisibleImg"><LaborSystemTwo /></div>
|
||||||
<!-- <el-carousel-item><LaborSystemThree /></el-carousel-item> -->
|
<!-- <el-carousel-item><LaborSystemThree /></el-carousel-item> -->
|
||||||
<!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> -->
|
<!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> -->
|
||||||
</el-carousel>
|
<!-- </el-carousel>-->
|
||||||
</enterprise-employment-card>
|
</enterprise-employment-card>
|
||||||
<enterprise-employment-card
|
<enterprise-employment-card
|
||||||
style="margin-top: 0.625vw"
|
style="margin-top: 0.625vw"
|
||||||
@ -80,7 +80,7 @@
|
|||||||
:type2="cardThreeInfo.type2"
|
:type2="cardThreeInfo.type2"
|
||||||
>
|
>
|
||||||
<template v-slot:header>
|
<template v-slot:header>
|
||||||
<div class="header_bg" style="margin-top:1vw">近2个月保供比亚迪入职人员分析</div>
|
<div class="header_bg" style="margin-top:1vw">近2个月保供入职人员分析</div>
|
||||||
</template>
|
</template>
|
||||||
<ListView/>
|
<ListView/>
|
||||||
|
|
||||||
@ -173,7 +173,7 @@ const cardTwoInfo = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
const cardThreeInfo = {
|
const cardThreeInfo = {
|
||||||
title: "重点企业保供案例(比亚迪)",
|
title: "重点企业保供案例",
|
||||||
// description: "4000+毕业生",
|
// description: "4000+毕业生",
|
||||||
type1: {
|
type1: {
|
||||||
title: "招募总人数",
|
title: "招募总人数",
|
||||||
|
|||||||
Reference in New Issue
Block a user