Initial commit
This commit is contained in:
2987
src/views/mapCount/components/510184.json
Normal file
2987
src/views/mapCount/components/510184.json
Normal file
File diff suppressed because it is too large
Load Diff
107
src/views/mapCount/components/cych.vue
Normal file
107
src/views/mapCount/components/cych.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="box-container">
|
||||
<div class="data-item"
|
||||
v-for="(item, index) in dataItems"
|
||||
:key="index">
|
||||
<div class="mr15">
|
||||
<img class="imgs"
|
||||
:src="item.icon"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="data-content">
|
||||
<div class="label">{{ item.label }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
<div class="value">{{ item.dw }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const dataItems = ref([
|
||||
{
|
||||
label: '上架创业项目',
|
||||
value: 6,
|
||||
dw: '个',
|
||||
icon: require('@/assets/images/1.png')
|
||||
},
|
||||
{
|
||||
label: '撮合成功项目',
|
||||
value: 2,
|
||||
dw: '个',
|
||||
icon: require('@/assets/images/2.png')
|
||||
},
|
||||
{
|
||||
label: '创业导师提供项目',
|
||||
value: 3,
|
||||
icon: require('@/assets/images/27.png'),
|
||||
dw: '个'
|
||||
},
|
||||
{
|
||||
label: '累计孵化企业',
|
||||
value: 1,
|
||||
icon: require('@/assets/images/28.png'),
|
||||
dw: '家'
|
||||
},
|
||||
{
|
||||
label: '孵化企业就业人数',
|
||||
icon: require('@/assets/images/1.png'),
|
||||
value: 8,
|
||||
dw: '人'
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.box-container {
|
||||
padding: 2vw 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 2vw 15px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.data-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
font-size: 2vw;
|
||||
margin-left: 40px;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#8cc8ff, #ffffff);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: 2.5vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#03aaf7, #ffffff);
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.imgs {
|
||||
width: 6vw;
|
||||
}
|
||||
</style>
|
||||
413
src/views/mapCount/components/echartsMap copy.vue
Normal file
413
src/views/mapCount/components/echartsMap copy.vue
Normal file
@ -0,0 +1,413 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2024-12-27 11:12:25
|
||||
* @LastEditTime: 2025-02-20 15:59:28
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit%
|
||||
* @FilePath: \tq_web_gd\src\views\navigationModel\echartsMap.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="mapBpx relative">
|
||||
<ul class="topbox">
|
||||
<li v-for="it in list"
|
||||
:key="it"
|
||||
class="flex align-center">
|
||||
<span class="lebel">{{ it.label }} :</span>
|
||||
<span class="value">{{ it.value }}</span>
|
||||
<span class="dw">{{ it.dw }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 弹窗 -->
|
||||
<div class="infoMessage">
|
||||
<div class="tipTitle">{{ dataForm.fwmc }}</div>
|
||||
<div class="gapLine"></div>
|
||||
<div class=" text flex just-between align-center pl10 pr10 mt10 mb10">
|
||||
<span>组长：<span class="itexs">{{ dataForm.zzmc }}</span></span>
|
||||
|
||||
<span>经纪人：<span class="itexs">{{ dataForm.jjr }}</span> 人</span>
|
||||
</div>
|
||||
<div class=" text flex just-between align-center pl10 pr10 mt10 mb10">
|
||||
<span>合作用人单位 ：<span class="itexs">{{ dataForm.hzr }}</span> 家</span>
|
||||
<span>上架岗位：<span class="itexs">{{ dataForm.sjgw }}</span> 个</span>
|
||||
</div>
|
||||
<div class=" text pl10 pr10 mt10 mb10">搓配就业人数：<span class="itexs">{{ dataForm.cpsl }}</span> 人</div>
|
||||
<div class=" text pl10 pr10 mt10 mb10">求职社群人数：<span class="itexs">{{ dataForm.qzsl }}</span> 人</div>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
<div class="map">
|
||||
<div ref="myMap"
|
||||
style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts-gl'
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue';
|
||||
const list = ref([
|
||||
{ label: '就业服务站', value: 40, dw: '个' },
|
||||
{ label: '服务一体机', value: 40, dw: '个' },
|
||||
{ label: '劳务经纪人', value: 118, dw: '人' },
|
||||
{ label: '招聘岗位', value: 9637, dw: '个' },
|
||||
{ label: '成功入职', value: 1305, dw: '个' },
|
||||
])
|
||||
const dataForm = ref({})
|
||||
const baseList = ref([])
|
||||
const myMap = ref()
|
||||
const mapSource = ref([])
|
||||
const timer = ref(null)
|
||||
|
||||
// 地图上显示的数据
|
||||
const mapData = ref({})
|
||||
const myChart = ref(null)
|
||||
onMounted(() => {
|
||||
let num = 0;
|
||||
timer.value = setInterval(() => {
|
||||
let len = baseList.value.length;
|
||||
num++;
|
||||
if (num > len) num = 0;
|
||||
dataForm.value = baseList.value[num];
|
||||
if (myChart.value) {
|
||||
myChart.value.clear();
|
||||
initMap()
|
||||
} else {
|
||||
initMap()
|
||||
}
|
||||
}, 5000)
|
||||
getList();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer.value)
|
||||
})
|
||||
|
||||
function getList() {
|
||||
let peoJson = require('./jd.json');
|
||||
baseList.value = peoJson;
|
||||
dataForm.value = peoJson[0]
|
||||
mapSource.value = peoJson.map(v => {
|
||||
return {
|
||||
coords: [
|
||||
[103.691049, 30.631478],
|
||||
[v.jd, v.wd]
|
||||
],
|
||||
value: 100,// 数据值
|
||||
name: v.fwmc,// 数据名
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "#01d3f3",
|
||||
width: 2, // 线条宽度
|
||||
opacity: 0.1, // 尾迹线条透明度
|
||||
curveness: 0.1, // 尾迹线条曲直度
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
let geoCoordMap = {}
|
||||
let projectData = []
|
||||
peoJson.map(v => {
|
||||
geoCoordMap[v.fwmc] = [v.jd, v.wd, 50];
|
||||
let obj = { name: v.fwmc, value: (Math.random() * 300).toFixed(2), projectName: v.fwmc }
|
||||
projectData.push(obj)
|
||||
})
|
||||
mapData.value = { geoCoordMap, projectData }
|
||||
|
||||
setTimeout(() => {
|
||||
initMap()
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
if (myChart.value) myChart.value.clear();
|
||||
// json地图数据-需要根据需求下载引入对应名称文件
|
||||
let mapJson = require('./510184.json')
|
||||
myChart.value = echarts.init(myMap.value)
|
||||
myChart.value.showLoading()
|
||||
myChart.value.hideLoading()
|
||||
echarts.registerMap('myMap', mapJson)
|
||||
var option = {
|
||||
tooltip: {},
|
||||
geo3D: {
|
||||
type: 'map3D',
|
||||
name: '地图',
|
||||
// center: ['40%', '90%'],// 相对于父容器比例
|
||||
top: '-20%',
|
||||
right: '0%',
|
||||
left: '0%',
|
||||
bottom: '8%',
|
||||
selectedMode: 'single', // 地图高亮单选
|
||||
regionHeight: 6, // 地图高度
|
||||
map: 'myMap',
|
||||
viewControl: {
|
||||
distance: 100,// 缩放大小，数值越大，地图越小
|
||||
alpha: 50,// 上下倾斜角度
|
||||
// rotateSensitivity: [1, 1],
|
||||
beta: 15 // 左右倾斜角度
|
||||
},
|
||||
label: {
|
||||
show: true, // 是否显示名字
|
||||
color: '#fff', // 文字颜色
|
||||
fontSize: 16, // 文字大小
|
||||
fontWeight: 'bold' // 文字大小
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(1,59,110,0.2)', // 地图背景颜色
|
||||
borderWidth: 1, // 分界线wdith
|
||||
borderColor: '#61CFF8', // 分界线颜色
|
||||
opacity: 0.92
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true, // 是否显示高亮
|
||||
textStyle: {
|
||||
color: '#fff' // 高亮文字颜色
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(1,59,110,0.5)', // 地图高亮颜色
|
||||
borderWidth: 10, // 分界线wdith
|
||||
borderColor: 'rgba(10,148,184,1)' // 分界线颜色
|
||||
}
|
||||
},
|
||||
light: {
|
||||
main: {
|
||||
color: '#fff',
|
||||
intensity: 1,
|
||||
shadow: true,
|
||||
shadowQuality: 'high',
|
||||
alpha: 25,
|
||||
beta: 20
|
||||
},
|
||||
ambient: {
|
||||
color: '#fff',
|
||||
intensity: 0.6
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
//配置路径
|
||||
type: 'lines3D',
|
||||
coordinateSystem: 'geo3D',
|
||||
blendMode: 'lighter',
|
||||
zlevel: 10,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 8,// 箭头指向速度，值越小速度越快
|
||||
trailLength: 0.1,//[0,1] // 尾迹的长度，范围从 0 到 1，为线条长度的百分比。特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
opacity: 12, // 尾迹线条透明度
|
||||
trailWidth: 10, //宽度
|
||||
trailColor: "#d80cfc",
|
||||
color: "#38bd98",//移动点的颜色
|
||||
constantSpeed: 5,//速度
|
||||
trailOpacity: 0.5,
|
||||
},
|
||||
data: mapSource.value
|
||||
},
|
||||
// 叠加地图上需要显示的数据，插牌
|
||||
{
|
||||
type: 'scatter3D',
|
||||
name: 'scatter3D',
|
||||
coordinateSystem: 'geo3D',
|
||||
symbol: 'path://M262.775253 0m64 0l0 0q64 0 64 64l0 896q0 64-64 64l0 0q-64 0-64-64l0-896q0-64 64-64Z',
|
||||
symbolSize: [4, 28],
|
||||
itemStyle: {
|
||||
color: '#FF771A',
|
||||
opacity: 1,
|
||||
},
|
||||
data: convertData(mapData.value.projectData),
|
||||
},
|
||||
]
|
||||
}
|
||||
myChart.value.setOption(option);
|
||||
|
||||
setTimeout(() => {
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.value.resize()
|
||||
initMap();
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 转化已有数据到地图上显示的配置数据
|
||||
function convertData(data) {
|
||||
const res = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const geoCoord = mapData.value.geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value),
|
||||
projectName: data[i].projectName,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
distance: -5,
|
||||
formatter(param) {
|
||||
return `{sty1|${param.data.projectName}}`;
|
||||
},
|
||||
rich: {
|
||||
sty1: {
|
||||
padding: getSize(0.07),
|
||||
backgroundColor: 'rgba(7, 28, 38, 0.7)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#FF771A',
|
||||
borderRadius: 2,
|
||||
fontSize: getSize(0.14),
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
distance: 0,
|
||||
formatter(param) {
|
||||
return `{sty1|${param.data.projectName}}`;
|
||||
},
|
||||
rich: {
|
||||
sty1: {
|
||||
padding: 7,
|
||||
backgroundColor: 'rgba(7, 28, 38, 0.7)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#FF771A',
|
||||
borderRadius: 2,
|
||||
fontSize: getSize(0.14),
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
// 适配不同尺寸浏览器，避免地图上的字号过小或过大
|
||||
function getSize(res) {
|
||||
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
||||
if (!clientWidth) return;
|
||||
const fontSize = 100 * (clientWidth / 1920);
|
||||
return res * fontSize;
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(0deg, $color1 0%, $color2 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.mapBpx {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.topbox {
|
||||
height: 120px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.lebel {
|
||||
font-size: 2.5vw;
|
||||
font-family: "YSBTH";
|
||||
font-weight: 600;
|
||||
@include textColor(#07c5f5, #ffffff);
|
||||
}
|
||||
|
||||
.value {
|
||||
margin: 0 10px;
|
||||
font-size: 2.5vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#e2480c, #ffffff);
|
||||
}
|
||||
|
||||
.dw {
|
||||
font-size: 20px;
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
}
|
||||
|
||||
.infoMessage {
|
||||
position: absolute;
|
||||
top: 5vw;
|
||||
left: 37px;
|
||||
min-width: 4vw;
|
||||
min-height: 4vw;
|
||||
padding: 0 1vw;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #07c5f5;
|
||||
border-bottom: 1px dashed #07c5f5;
|
||||
border-radius: 10px;
|
||||
background: url("~@/assets/images/bg_04.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
z-index: 99;
|
||||
.tipTitle {
|
||||
text-align: center;
|
||||
font-size: 2vw;
|
||||
line-height: 4vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#026ed3, #ffffff);
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.gapLine {
|
||||
position: relative;
|
||||
width: calc(100% - 20px);
|
||||
height: 3px;
|
||||
background: #026ed3;
|
||||
border-radius: 10px;
|
||||
margin: 0 10px 10px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
height: 3px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
text-shadow: 0 0 10px #ffffff;
|
||||
background: linear-gradient(to right, #e2480c 0%, #07c5f5 50%);
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
height: 3px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
text-shadow: 0 0 10px #ffffff;
|
||||
background: linear-gradient(to right, #07c5f5 0%, #e2480c 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.itexs {
|
||||
font-weight: 600;
|
||||
@include textColor(#22e9e0, #ffffff);
|
||||
}
|
||||
.text {
|
||||
font-size: 1.5vw;
|
||||
line-height: 2.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: calc(100% - 120px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
</style>
|
||||
471
src/views/mapCount/components/echartsMap.vue
Normal file
471
src/views/mapCount/components/echartsMap.vue
Normal file
@ -0,0 +1,471 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2024-12-27 11:12:25
|
||||
* @LastEditTime: 2025-02-20 15:59:28
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit%
|
||||
* @FilePath: \tq_web_gd\src\views\navigationModel\echartsMap.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="mapBpx relative">
|
||||
<ul class="topbox">
|
||||
<li v-for="(it,idx) in list"
|
||||
:key="it"
|
||||
class="flex align-center">
|
||||
<span class="lebel">{{ it.label }} :</span>
|
||||
<span class="value"
|
||||
:class="'value_'+idx">{{ it.value }}</span>
|
||||
<span class="value"
|
||||
:class="'value_'+idx">{{ it.dw }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 弹窗 -->
|
||||
<div class="infoMessage">
|
||||
<div class="tipTitle">{{ dataForm.fwmc }}</div>
|
||||
<div class="gapLine"></div>
|
||||
<div class=" text flex just-between align-center pl10 pr10 mt10 mb10">
|
||||
<span>组长：<span class="itexs">{{ dataForm.zzmc }}</span></span>
|
||||
<span>经纪人：<span class="itexs">{{ dataForm.jjr }}</span> 人</span>
|
||||
</div>
|
||||
<div class=" text flex just-between align-center pl10 pr10 mt10 mb10">
|
||||
<span>合作用人单位 ：<span class="itexs">{{ dataForm.hzr }}</span> 家</span>
|
||||
<span>上架岗位：<span class="itexs">{{ dataForm.sjgw }}</span> 个</span>
|
||||
</div>
|
||||
<div class=" text pl10 pr10 mt10 mb10">搓配就业人数：<span class="itexs">{{ dataForm.cpsl }}</span> 人</div>
|
||||
<div class=" text pl10 pr10 mt10 mb10">求职社群人数：<span class="itexs">{{ dataForm.qzsl }}</span> 人</div>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
<div class="map">
|
||||
<div ref="myMap"
|
||||
style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts-gl'
|
||||
import { onMounted, onUnmounted, nextTick , ref } from 'vue';
|
||||
const list = ref([
|
||||
{ label: '就业服务站', value: 40, dw: '个' },
|
||||
{ label: '服务一体机', value: 40, dw: '个' },
|
||||
{ label: '劳务经纪人', value: 118, dw: '人' },
|
||||
{ label: '招聘岗位', value: 9637, dw: '个' },
|
||||
{ label: '成功入职', value: 1305, dw: '人' },
|
||||
])
|
||||
const dataForm = ref({})
|
||||
const baseList = ref([])
|
||||
const myMap = ref()
|
||||
const mapSource = ref([])
|
||||
const timer = ref(null)
|
||||
|
||||
// 地图上显示的数据
|
||||
const mapData = ref({})
|
||||
const myChart = ref(null)
|
||||
onMounted(() => {
|
||||
getList();
|
||||
let num = 0;
|
||||
timer.value = setInterval(() => {
|
||||
let len = baseList.value.length;
|
||||
num++;
|
||||
// console.log(num)
|
||||
if (num >= len) num = 0;
|
||||
dataForm.value = baseList.value[num];
|
||||
if (myChart.value) {
|
||||
// echatsPoint(num);
|
||||
myChart.value.setOption({
|
||||
series: [
|
||||
{
|
||||
data: mapSource.value
|
||||
},
|
||||
{
|
||||
data: convertData(mapData.value.projectData)
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (myChart.value) {
|
||||
myChart.value.resize();
|
||||
}
|
||||
});
|
||||
|
||||
// 确保在组件挂载后初始化地图
|
||||
nextTick(() => {
|
||||
initMap();
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
onUnmounted(() => {
|
||||
// 清理定时器
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value);
|
||||
timer.value = null;
|
||||
}
|
||||
// 销毁echarts实例
|
||||
if (myChart.value) {
|
||||
myChart.value.dispose();
|
||||
myChart.value = null;
|
||||
}
|
||||
// 移除resize事件监听
|
||||
window.removeEventListener('resize', () => {
|
||||
if (myChart.value) {
|
||||
myChart.value.resize();
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
function getList() {
|
||||
let peoJson = require('./jd.json');
|
||||
baseList.value = peoJson;
|
||||
dataForm.value = peoJson[0]
|
||||
mapSource.value = peoJson.map(v => {
|
||||
return {
|
||||
coords: [
|
||||
[103.691049, 30.631478],
|
||||
[v.jd, v.wd]
|
||||
],
|
||||
value: 100,// 数据值
|
||||
name: v.fwmc,// 数据名
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "#01d3f3",
|
||||
width: 2, // 线条宽度
|
||||
opacity: 0.1, // 尾迹线条透明度
|
||||
curveness: 0.1, // 尾迹线条曲直度
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
echatsPoint(0)
|
||||
|
||||
setTimeout(() => {
|
||||
initMap()
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function echatsPoint(idx) {
|
||||
let peoJson = require('./jd.json');
|
||||
let geoCoordMap = {}
|
||||
let projectData = []
|
||||
// let arrNew = [peoJson[idx]]
|
||||
let arrNew = peoJson
|
||||
|
||||
arrNew.forEach(v => {
|
||||
geoCoordMap[v.fwmc] = [v.jd, v.wd, 50];
|
||||
let obj = { name: v.fwmc, value: (Math.random() * 300).toFixed(2), projectName: v.fwmc }
|
||||
projectData.push(obj)
|
||||
});
|
||||
mapData.value = { geoCoordMap, projectData }
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
if (myChart.value) myChart.value.clear();
|
||||
// json地图数据-需要根据需求下载引入对应名称文件
|
||||
let mapJson = require('./510184.json')
|
||||
myChart.value = echarts.init(myMap.value)
|
||||
myChart.value.showLoading()
|
||||
myChart.value.hideLoading()
|
||||
echarts.registerMap('myMap', mapJson)
|
||||
var option = {
|
||||
tooltip: {},
|
||||
geo3D: {
|
||||
type: 'map3D',
|
||||
name: '地图',
|
||||
// center: ['40%', '90%'],// 相对于父容器比例
|
||||
top: '4%',
|
||||
right: '0%',
|
||||
left: '0%',
|
||||
bottom: '6%',
|
||||
selectedMode: 'single', // 地图高亮单选
|
||||
regionHeight: 10, // 地图高度
|
||||
map: 'myMap',
|
||||
viewControl: {
|
||||
distance: 105,// 缩放大小，数值越大，地图越小
|
||||
alpha: 50,// 上下倾斜角度
|
||||
// rotateSensitivity: [1, 1],
|
||||
beta: 15 // 左右倾斜角度
|
||||
},
|
||||
label: {
|
||||
show: true, // 是否显示名字
|
||||
color: '#fff', // 文字颜色
|
||||
fontSize: 16, // 文字大小
|
||||
fontWeight: 'bold' // 文字大小
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(5,75,189,0.8)', // 地图背景颜色
|
||||
borderWidth: 1, // 分界线wdith
|
||||
borderColor: '#61CFF8', // 分界线颜色
|
||||
opacity: 0.92
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true, // 是否显示高亮
|
||||
textStyle: {
|
||||
color: '#fff' // 高亮文字颜色
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(1,59,110,0.5)', // 地图高亮颜色
|
||||
borderWidth: 10, // 分界线wdith
|
||||
borderColor: 'rgba(10,148,184,1)' // 分界线颜色
|
||||
}
|
||||
},
|
||||
light: {
|
||||
main: {
|
||||
color: '#fff',
|
||||
intensity: 1,
|
||||
shadow: true,
|
||||
shadowQuality: 'high',
|
||||
alpha: 25,
|
||||
beta: 20
|
||||
},
|
||||
ambient: {
|
||||
color: '#fff',
|
||||
intensity: 0.6
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
//配置路径
|
||||
type: 'lines3D',
|
||||
coordinateSystem: 'geo3D',
|
||||
blendMode: 'lighter',
|
||||
zlevel: 10,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 8,// 箭头指向速度，值越小速度越快
|
||||
trailLength: 0.1,//[0,1] // 尾迹的长度，范围从 0 到 1，为线条长度的百分比。特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
opacity: 12, // 尾迹线条透明度
|
||||
trailWidth: 10, //宽度
|
||||
trailColor: "#d80cfc",
|
||||
color: "#38bd98",//移动点的颜色
|
||||
constantSpeed: 5,//速度
|
||||
trailOpacity: 0.5,
|
||||
},
|
||||
data: mapSource.value
|
||||
},
|
||||
// 叠加地图上需要显示的数据，插牌
|
||||
{
|
||||
type: 'scatter3D',
|
||||
name: 'scatter3D',
|
||||
coordinateSystem: 'geo3D',
|
||||
symbol: 'path://M262.775253 0m64 0l0 0q64 0 64 64l0 896q0 64-64 64l0 0q-64 0-64-64l0-896q0-64 64-64Z',
|
||||
symbolSize: [4, 28],
|
||||
itemStyle: {
|
||||
color: '#FF771A',
|
||||
opacity: 1,
|
||||
},
|
||||
data: convertData(mapData.value.projectData),
|
||||
},
|
||||
]
|
||||
}
|
||||
myChart.value.setOption(option);
|
||||
|
||||
setTimeout(() => {
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.value.resize()
|
||||
initMap();
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 转化已有数据到地图上显示的配置数据
|
||||
function convertData(data) {
|
||||
const res = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const geoCoord = mapData.value.geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value),
|
||||
projectName: data[i].projectName,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
distance: -5,
|
||||
formatter(param) {
|
||||
return `{sty1|${param.data.projectName}}`;
|
||||
},
|
||||
rich: {
|
||||
sty1: {
|
||||
padding: getSize(0.07),
|
||||
backgroundColor: 'rgba(7, 28, 38, 0.7)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#FF771A',
|
||||
borderRadius: 2,
|
||||
fontSize: getSize(0.14),
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
distance: 0,
|
||||
formatter(param) {
|
||||
return `{sty1|${param.data.projectName}}`;
|
||||
},
|
||||
rich: {
|
||||
sty1: {
|
||||
padding: 7,
|
||||
backgroundColor: 'rgba(7, 28, 38, 0.7)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#FF771A',
|
||||
borderRadius: 2,
|
||||
fontSize: getSize(0.14),
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
// 适配不同尺寸浏览器，避免地图上的字号过小或过大
|
||||
function getSize(res) {
|
||||
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
||||
if (!clientWidth) return;
|
||||
const fontSize = 100 * (clientWidth / 1920);
|
||||
return res * fontSize;
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(0deg, $color1 0%, $color2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.mapBpx {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.topbox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
top: 20px;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border: 2px solid #07c5f5;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 40px#0072ff;
|
||||
|
||||
.lebel {
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
font-weight: 600;
|
||||
@include textColor(#07c5f5, #ffffff);
|
||||
}
|
||||
|
||||
.value {
|
||||
margin: 0 10px;
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
.value_0 {
|
||||
@include textColor(#d59a26, #fcfbf8);
|
||||
}
|
||||
.value_1 {
|
||||
@include textColor(#28f1e2, #fcfbf8);
|
||||
}
|
||||
.value_2 {
|
||||
@include textColor(#4094dd, #fcfbf8);
|
||||
}
|
||||
.value_3 {
|
||||
@include textColor(#d59a26, #fcfbf8);
|
||||
}
|
||||
.value_4 {
|
||||
@include textColor(#28f1e2, #fcfbf8);
|
||||
}
|
||||
}
|
||||
|
||||
.infoMessage {
|
||||
position: absolute;
|
||||
top: 22vw;
|
||||
left: 37px;
|
||||
min-width: 4vw;
|
||||
min-height: 4vw;
|
||||
padding: 0 1.5vw;
|
||||
box-sizing: border-box;
|
||||
// border: 1px solid #07c5f5;
|
||||
border-radius: 10px;
|
||||
background: url("~@/assets/images/dialig.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
z-index: 99;
|
||||
.tipTitle {
|
||||
text-align: center;
|
||||
font-size: 2vw;
|
||||
line-height: 4vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#026ed3, #ffffff);
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.gapLine {
|
||||
position: relative;
|
||||
width: calc(100% - 20px);
|
||||
height: 3px;
|
||||
background: #026ed3;
|
||||
border-radius: 10px;
|
||||
margin: 0 10px 10px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
height: 3px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
text-shadow: 0 0 10px #ffffff;
|
||||
background: linear-gradient(to right, #e2480c 0%, #07c5f5 50%);
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
height: 3px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
text-shadow: 0 0 10px #ffffff;
|
||||
background: linear-gradient(to right, #07c5f5 0%, #e2480c 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.itexs {
|
||||
font-weight: 600;
|
||||
@include textColor(#22e9e0, #ffffff);
|
||||
}
|
||||
.text {
|
||||
font-size: 1.5vw;
|
||||
line-height: 2.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: calc(100% - 120px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
</style>
|
||||
545
src/views/mapCount/components/echartsMap2.vue
Normal file
545
src/views/mapCount/components/echartsMap2.vue
Normal file
@ -0,0 +1,545 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2024-12-27 11:12:25
|
||||
* @LastEditTime: 2025-02-20 15:59:28
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit%
|
||||
* @FilePath: \tq_web_gd\src\views\navigationModel\echartsMap.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="mapBpx relative">
|
||||
<ul class="topbox">
|
||||
<li v-for="(it,idx) in list"
|
||||
:key="it"
|
||||
class="flex align-center">
|
||||
<span class="lebel">{{ it.label }} :</span>
|
||||
<span class="value"
|
||||
:class="'value_'+idx">{{ it.value }}</span>
|
||||
<span class="value"
|
||||
:class="'value_'+idx">{{ it.dw }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 弹窗 -->
|
||||
<div class="infoMessage">
|
||||
<div class="tipTitle">{{ dataForm.fwmc }}</div>
|
||||
<div class="gapLine"></div>
|
||||
<div class=" text flex just-between align-center pl10 pr10 mt10 mb10">
|
||||
<span v-if="dataForm.zz">站长：<span class="itexs">{{ dataForm.zz }}</span></span>
|
||||
<span>组长：<span class="itexs">{{dataForm.zz?dataForm.zd :dataForm.zzmc}}</span></span>
|
||||
|
||||
<span>经纪人：<span class="itexs">{{ dataForm.jjr }}</span> 人</span>
|
||||
</div>
|
||||
<div class=" text flex just-between align-center pl10 pr10 mt10 mb10">
|
||||
<span>合作用人单位 ：<span class="itexs">{{ dataForm.hzr }}</span> 家</span>
|
||||
<span>上架岗位：<span class="itexs">{{ dataForm.sjgw }}</span> 个</span>
|
||||
</div>
|
||||
<div class=" text pl10 pr10 mt10 mb10">搓配就业人数：<span class="itexs">{{ dataForm.cpsl }}</span> 人</div>
|
||||
<div class=" text pl10 pr10 mt10 mb10">求职社群人数：<span class="itexs">{{ dataForm.qzsl }}</span> 人</div>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
<div class="map" style="margin-top: 2.7vh;margin-left: 7vw;">
|
||||
<div ref="myMap"
|
||||
style="width: 100%; height: 100%;transform: scale(0.85);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
// import 'echarts-gl'
|
||||
import { onMounted, onUnmounted, nextTick, ref } from 'vue';
|
||||
const list = ref([
|
||||
{ label: '就业服务站', value: 40, dw: '个' },
|
||||
{ label: '服务一体机', value: 40, dw: '个' },
|
||||
{ label: '劳务经纪人', value: 118, dw: '人' },
|
||||
{ label: '招聘岗位', value: 9637, dw: '个' },
|
||||
{ label: '成功入职', value: 1305, dw: '人' },
|
||||
])
|
||||
const dataForm = ref({})
|
||||
const baseList = ref([])
|
||||
const myMap = ref()
|
||||
const mapSource = ref([])
|
||||
const mapSource1 = ref([])
|
||||
const timer = ref(null)
|
||||
|
||||
// 地图上显示的数据
|
||||
const mapData = ref({})
|
||||
const myChart = ref(null)
|
||||
const newdataForm = ref({})
|
||||
const cyyName = {
|
||||
name: "崇州市人力资源服务产业园",
|
||||
value: [103.782722,30.545252]}
|
||||
onMounted(() => {
|
||||
getList();
|
||||
valueFrom();
|
||||
let num = 0;
|
||||
timer.value = setInterval(() => {
|
||||
let len = baseList.value.length;
|
||||
num++;
|
||||
if (num >= len) num = 0;
|
||||
dataForm.value = baseList.value[num];
|
||||
newdataForm.value = {
|
||||
name: dataForm.value.fwmc,
|
||||
value: [
|
||||
dataForm.value.jd,
|
||||
dataForm.value.wd
|
||||
]
|
||||
}
|
||||
initMap()
|
||||
}, 5000);
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (myChart.value) {
|
||||
myChart.value.resize();
|
||||
}
|
||||
});
|
||||
|
||||
// 确保在组件挂载后初始化地图
|
||||
nextTick(() => {
|
||||
initMap();
|
||||
});
|
||||
})
|
||||
const dataValue = ref()
|
||||
const valueFrom = () => {
|
||||
let jjr = 0
|
||||
let hzr = 0
|
||||
let sjgw = 0
|
||||
let cpsl = 0
|
||||
let qzsl = 0
|
||||
baseList.value.forEach(item => {
|
||||
dataValue.value = {
|
||||
jjr: jjr += parseInt(item.jjr),
|
||||
hzr: hzr += parseInt(item.hzr),
|
||||
sjgw: sjgw += parseInt(item.sjgw),
|
||||
cpsl: cpsl += parseInt(item.cpsl),
|
||||
qzsl: qzsl += parseInt(item.qzsl),
|
||||
}
|
||||
if (item.jdmc == "崇州市人力资源服务产业园") {
|
||||
dataForm.value = { ...item, ...dataValue.value }
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
// 清理定时器
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value);
|
||||
timer.value = null;
|
||||
}
|
||||
// 销毁echarts实例
|
||||
if (myChart.value) {
|
||||
myChart.value.dispose();
|
||||
myChart.value = null;
|
||||
}
|
||||
// 移除resize事件监听
|
||||
window.removeEventListener('resize', () => {
|
||||
if (myChart.value) {
|
||||
myChart.value.resize();
|
||||
}
|
||||
});
|
||||
})
|
||||
// 转化已有数据到地图上显示的配置数据
|
||||
function convertData(data) {
|
||||
const res = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const geoCoord = mapData.value.geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value),
|
||||
projectName: data[i].projectName,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
distance: -5,
|
||||
formatter(param) {
|
||||
return `{sty1|${param.data.projectName}}`;
|
||||
},
|
||||
rich: {
|
||||
sty1: {
|
||||
padding: getSize(0.07),
|
||||
backgroundColor: 'rgba(7, 28, 38, 0.7)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#FF771A',
|
||||
borderRadius: 2,
|
||||
fontSize: getSize(0.14),
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
distance: 0,
|
||||
formatter(param) {
|
||||
return `{sty1|${param.data.projectName}}`;
|
||||
},
|
||||
rich: {
|
||||
sty1: {
|
||||
padding: 7,
|
||||
backgroundColor: 'rgba(7, 28, 38, 0.7)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#FF771A',
|
||||
borderRadius: 2,
|
||||
fontSize: getSize(0.14),
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}
|
||||
function getList() {
|
||||
let peoJson = require('./jd.json');
|
||||
baseList.value = peoJson;
|
||||
dataForm.value = peoJson[0]
|
||||
|
||||
mapSource.value = peoJson.map(v => {
|
||||
return {
|
||||
coords: [
|
||||
[103.782722,
|
||||
30.545252],
|
||||
[v.jd, v.wd]
|
||||
],
|
||||
value: 100,// 数据值
|
||||
name: v.fwmc,// 数据名
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "#01d3f3",
|
||||
width: 2, // 线条宽度
|
||||
opacity: 0.1, // 尾迹线条透明度
|
||||
curveness: 0.1, // 尾迹线条曲直度
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
mapSource1.value = peoJson.map(v => {
|
||||
return {
|
||||
name: v.fwmc,
|
||||
value: [v.jd, v.wd],
|
||||
}
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
initMap()
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
|
||||
function initMap() {
|
||||
if (myChart.value) myChart.value.clear();
|
||||
// json地图数据-需要根据需求下载引入对应名称文件
|
||||
let mapJson = require('./510184.json')
|
||||
myChart.value = echarts.init(myMap.value)
|
||||
myChart.value.showLoading()
|
||||
myChart.value.hideLoading()
|
||||
echarts.registerMap('myMap', mapJson)
|
||||
|
||||
var option = {
|
||||
tooltip: {},
|
||||
geo: [{
|
||||
type: 'map',
|
||||
name: '地图',
|
||||
top: '4%',
|
||||
right: '0%',
|
||||
left: '0%',
|
||||
bottom: '6%',
|
||||
selectedMode: 'single',
|
||||
regionHeight: 10,
|
||||
map: 'myMap',
|
||||
viewControl: {
|
||||
distance: 105,
|
||||
alpha: 50,
|
||||
beta: 15,
|
||||
autoRotate: true,
|
||||
autoRotateSpeed: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(1,59,110,0.8)',
|
||||
opacity: 0.8
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(5,75,189,0.8)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#61CFF8',
|
||||
opacity: 0.92
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(1,59,110,0.5)',
|
||||
borderWidth: 10,
|
||||
borderColor: 'rgba(10,148,184,1)'
|
||||
}
|
||||
},
|
||||
light: {
|
||||
main: {
|
||||
color: '#fff',
|
||||
intensity: 1,
|
||||
shadow: true,
|
||||
shadowQuality: 'high',
|
||||
alpha: 25,
|
||||
beta: 20
|
||||
},
|
||||
ambient: {
|
||||
color: '#fff',
|
||||
intensity: 0.6
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'lines',
|
||||
coordinateSystem: 'geo',
|
||||
blendMode: 'lighter',
|
||||
zlevel: 10,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 8,
|
||||
trailLength: 0.1,
|
||||
opacity: 12,
|
||||
trailWidth: 10,
|
||||
symbolSize: 4,
|
||||
// symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
|
||||
trailColor: "#d80cfc",
|
||||
color: "#38bd98",
|
||||
constantSpeed: 100,
|
||||
trailOpacity: 0.9,
|
||||
},
|
||||
data: mapSource.value
|
||||
},
|
||||
|
||||
{
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
rippleEffect: {
|
||||
brushType: "stroke",
|
||||
},
|
||||
showEffectOn: "render",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.5,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0,255,246,0.1)",
|
||||
},
|
||||
{
|
||||
offset: 0.6,
|
||||
color: "rgba(0,255,246,0.4)",
|
||||
},
|
||||
{
|
||||
offset: 0.85,
|
||||
color: "transparent",
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
symbol: "circle",
|
||||
symbolSize: 18,
|
||||
data: mapSource1.value,
|
||||
zlevel: 1,
|
||||
},
|
||||
{
|
||||
type: 'scatter',
|
||||
name: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
symbol: 'image://' + require('@/assets/images/34.png'),
|
||||
// symbol: 'path://M262.775253 0m64 0l0 0q64 0 64 64l0 896q0 64-64 64l0 0q-64 0-64-64l0-896q0-64 64-64Z',
|
||||
symbolSize: [100, 100],
|
||||
itemStyle: {
|
||||
color: 'red',
|
||||
opacity: 1,
|
||||
z:10
|
||||
},
|
||||
data: [cyyName,newdataForm.value],
|
||||
},
|
||||
]
|
||||
}
|
||||
myChart.value.setOption(option);
|
||||
|
||||
setTimeout(() => {
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.value.resize()
|
||||
initMap();
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 适配不同尺寸浏览器，避免地图上的字号过小或过大
|
||||
function getSize(res) {
|
||||
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
||||
if (!clientWidth) return;
|
||||
const fontSize = 100 * (clientWidth / 1920);
|
||||
return res * fontSize;
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(0deg, $color1 0%, $color2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.mapBpx {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.topbox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
top: 20px;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border: 2px solid #07c5f5;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 40px#0072ff;
|
||||
|
||||
.lebel {
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
font-weight: 600;
|
||||
@include textColor(#07c5f5, #ffffff);
|
||||
}
|
||||
|
||||
.value {
|
||||
margin: 0 10px;
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
.value_0 {
|
||||
@include textColor(#d59a26, #fcfbf8);
|
||||
}
|
||||
.value_1 {
|
||||
@include textColor(#28f1e2, #fcfbf8);
|
||||
}
|
||||
.value_2 {
|
||||
@include textColor(#4094dd, #fcfbf8);
|
||||
}
|
||||
.value_3 {
|
||||
@include textColor(#d59a26, #fcfbf8);
|
||||
}
|
||||
.value_4 {
|
||||
@include textColor(#28f1e2, #fcfbf8);
|
||||
}
|
||||
}
|
||||
|
||||
.infoMessage {
|
||||
position: absolute;
|
||||
top: 26vw;
|
||||
left: 37px;
|
||||
min-width: 4vw;
|
||||
min-height: 4vw;
|
||||
padding: 0 1.5vw;
|
||||
box-sizing: border-box;
|
||||
// border: 1px solid #07c5f5;
|
||||
border-radius: 10px;
|
||||
background: url("~@/assets/images/dialig.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
z-index: 99;
|
||||
.tipTitle {
|
||||
text-align: center;
|
||||
font-size: 2vw;
|
||||
line-height: 4vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#026ed3, #ffffff);
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.gapLine {
|
||||
position: relative;
|
||||
width: calc(100% - 20px);
|
||||
height: 3px;
|
||||
background: #026ed3;
|
||||
border-radius: 10px;
|
||||
margin: 0 10px 10px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
height: 3px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
text-shadow: 0 0 10px #ffffff;
|
||||
background: linear-gradient(to right, #e2480c 0%, #07c5f5 50%);
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
height: 3px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
text-shadow: 0 0 10px #ffffff;
|
||||
background: linear-gradient(to right, #07c5f5 0%, #e2480c 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.itexs {
|
||||
font-weight: 600;
|
||||
@include textColor(#22e9e0, #ffffff);
|
||||
}
|
||||
.text {
|
||||
font-size: 1.5vw;
|
||||
line-height: 2.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: calc(100% - 120px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
</style>
|
||||
482
src/views/mapCount/components/jd - 副本.json
Normal file
482
src/views/mapCount/components/jd - 副本.json
Normal file
@ -0,0 +1,482 @@
|
||||
[
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道办事处（党群服务中心）",
|
||||
"zzmc": "李建强",
|
||||
"jjr": "2",
|
||||
"hzr": "6",
|
||||
"sjgw": "12",
|
||||
"cpsl": "11",
|
||||
"qzsl": "1027",
|
||||
"jd": "103.709593",
|
||||
"wd": "30.642669"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道金鸡社区党群服务中心",
|
||||
"zzmc": "张卫东",
|
||||
"jjr": "4",
|
||||
"hzr": "3",
|
||||
"sjgw": "34",
|
||||
"cpsl": "27",
|
||||
"qzsl": "2143",
|
||||
"jd": "103.699256",
|
||||
"wd": "30.610056"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道彭庙社区党群服务中心",
|
||||
"zzmc": "陈俊峰",
|
||||
"jjr": "3",
|
||||
"hzr": "8",
|
||||
"sjgw": "27",
|
||||
"cpsl": "23",
|
||||
"qzsl": "886",
|
||||
"jd": "103.681954",
|
||||
"wd": "30.613231"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道三和社区党群服务中心",
|
||||
"zzmc": "王刚",
|
||||
"jjr": "1",
|
||||
"hzr": "2",
|
||||
"sjgw": "46",
|
||||
"cpsl": "33",
|
||||
"qzsl": "1765",
|
||||
"jd": "103.714911",
|
||||
"wd": "30.629494"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道西江社区党群服务中心",
|
||||
"zzmc": "陈丽娟",
|
||||
"jjr": "5",
|
||||
"hzr": "7",
|
||||
"sjgw": "18",
|
||||
"cpsl": "15",
|
||||
"qzsl": "2532",
|
||||
"jd": "103.657393",
|
||||
"wd": "30.641023"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道毛桥社区党群服务中心",
|
||||
"zzmc": "李红梅",
|
||||
"jjr": "3",
|
||||
"hzr": "4",
|
||||
"sjgw": "41",
|
||||
"cpsl": "30",
|
||||
"qzsl": "941",
|
||||
"jd": "103.690241",
|
||||
"wd": "30.640704"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道永安社区党群服务中心",
|
||||
"zzmc": "赵志勇",
|
||||
"jjr": "2",
|
||||
"hzr": "5",
|
||||
"sjgw": "23",
|
||||
"cpsl": "17",
|
||||
"qzsl": "1478",
|
||||
"jd": "103.701054",
|
||||
"wd": "30.655325"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道办事处（综合便民服务中心）",
|
||||
"zzmc": "刘庆",
|
||||
"jjr": "4",
|
||||
"hzr": "9",
|
||||
"sjgw": "38",
|
||||
"cpsl": "24",
|
||||
"qzsl": "2890",
|
||||
"jd": "103.675986",
|
||||
"wd": "30.648424"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道石羊社区党群服务中心",
|
||||
"zzmc": "周伟",
|
||||
"jjr": "1",
|
||||
"hzr": "1",
|
||||
"sjgw": "15",
|
||||
"cpsl": "11",
|
||||
"qzsl": "1136",
|
||||
"jd": "103.695859",
|
||||
"wd": "30.635775"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道明湖社区党群服务中心",
|
||||
"zzmc": "吴海平",
|
||||
"jjr": "5",
|
||||
"hzr": "6",
|
||||
"sjgw": "49",
|
||||
"cpsl": "27",
|
||||
"qzsl": "2011",
|
||||
"jd": "103.728995",
|
||||
"wd": "30.617806"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道成都市跨企业培训中心",
|
||||
"zzmc": "张秀兰",
|
||||
"jjr": "4",
|
||||
"hzr": "3",
|
||||
"sjgw": "29",
|
||||
"cpsl": "12",
|
||||
"qzsl": "1344",
|
||||
"jd": "103.724047",
|
||||
"wd": "30.629753"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇州市人社局人力资源服务市场",
|
||||
"zzmc": "赵晓燕",
|
||||
"jjr": "10",
|
||||
"hzr": "2",
|
||||
"sjgw": "32",
|
||||
"cpsl": "30",
|
||||
"qzsl": "2357",
|
||||
"jd": "103.697652",
|
||||
"wd": "30.629184"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "天府青年城就业创业驿站",
|
||||
"zzmc": "孙晓军",
|
||||
"jjr": "2",
|
||||
"hzr": "8",
|
||||
"sjgw": "11",
|
||||
"cpsl": "7",
|
||||
"qzsl": "798",
|
||||
"jd": "103.69337",
|
||||
"wd": "30.619366"
|
||||
},
|
||||
{
|
||||
"jdmc": "大划街道",
|
||||
"fwmc": "大划街道崇州市公共就业服务站（大划站）",
|
||||
"zzmc": "郑学兵",
|
||||
"jjr": "4",
|
||||
"hzr": "7",
|
||||
"sjgw": "43",
|
||||
"cpsl": "34",
|
||||
"qzsl": "1660",
|
||||
"jd": "103.733269",
|
||||
"wd": "30.58804"
|
||||
},
|
||||
{
|
||||
"jdmc": "大划街道",
|
||||
"fwmc": "大划街道办事处（党群服务中心）",
|
||||
"zzmc": "杨德明",
|
||||
"jjr": "1",
|
||||
"hzr": "4",
|
||||
"sjgw": "25",
|
||||
"cpsl": "16",
|
||||
"qzsl": "2671",
|
||||
"jd": "103.74272",
|
||||
"wd": "30.586272"
|
||||
},
|
||||
{
|
||||
"jdmc": "羊马街道",
|
||||
"fwmc": "羊马街道办事处（党群服务中心)",
|
||||
"zzmc": "刘芳",
|
||||
"jjr": "3",
|
||||
"hzr": "5",
|
||||
"sjgw": "37",
|
||||
"cpsl": "30",
|
||||
"qzsl": "1854",
|
||||
"jd": "103.752865",
|
||||
"wd": "30.661384"
|
||||
},
|
||||
{
|
||||
"jdmc": "羊马街道",
|
||||
"fwmc": "羊马街道安阜社区党群服务中心",
|
||||
"zzmc": "周雅琴",
|
||||
"jjr": "4",
|
||||
"hzr": "1",
|
||||
"sjgw": "17",
|
||||
"cpsl": "13",
|
||||
"qzsl": "2288",
|
||||
"jd": "103.755043",
|
||||
"wd": "30.613517"
|
||||
},
|
||||
{
|
||||
"jdmc": "江源街道",
|
||||
"fwmc": "江源街道红土社区党群服务中心",
|
||||
"zzmc": "吴静怡",
|
||||
"jjr": "2",
|
||||
"hzr": "9",
|
||||
"sjgw": "44",
|
||||
"cpsl": "33",
|
||||
"qzsl": "1593",
|
||||
"jd": "103.788962",
|
||||
"wd": "30.636562"
|
||||
},
|
||||
{
|
||||
"jdmc": "江源街道",
|
||||
"fwmc": "江源街道唐兴社区党群服务中心",
|
||||
"zzmc": "徐国栋",
|
||||
"jjr": "3",
|
||||
"hzr": "6",
|
||||
"sjgw": "26",
|
||||
"cpsl": "18",
|
||||
"qzsl": "2766",
|
||||
"jd": "103.782691",
|
||||
"wd": "30.595346"
|
||||
},
|
||||
{
|
||||
"jdmc": "江源街道",
|
||||
"fwmc": "江源街道办事处（综合便民服务中心）",
|
||||
"zzmc": "郭斌",
|
||||
"jjr": "1",
|
||||
"hzr": "3",
|
||||
"sjgw": "31",
|
||||
"cpsl": "23",
|
||||
"qzsl": "1240",
|
||||
"jd": "103.782381",
|
||||
"wd": "30.594802"
|
||||
},
|
||||
{
|
||||
"jdmc": "三江街道",
|
||||
"fwmc": "三江街道皂角社区党群服务中心",
|
||||
"zzmc": "马晓辉",
|
||||
"jjr": "3",
|
||||
"hzr": "8",
|
||||
"sjgw": "13",
|
||||
"cpsl": "10",
|
||||
"qzsl": "1939",
|
||||
"jd": "103.81626",
|
||||
"wd": "30.582133"
|
||||
},
|
||||
{
|
||||
"jdmc": "三江街道",
|
||||
"fwmc": "三江街道办事处（党群服务中心）",
|
||||
"zzmc": "朱志华",
|
||||
"jjr": "2",
|
||||
"hzr": "2",
|
||||
"sjgw": "47",
|
||||
"cpsl": "37",
|
||||
"qzsl": "832",
|
||||
"jd": "103.775139",
|
||||
"wd": "30.550747"
|
||||
},
|
||||
{
|
||||
"jdmc": "白头镇",
|
||||
"fwmc": "白头镇五星村党群服务中心",
|
||||
"zzmc": "胡家辉",
|
||||
"jjr": "4",
|
||||
"hzr": "7",
|
||||
"sjgw": "22",
|
||||
"cpsl": "13",
|
||||
"qzsl": "1707",
|
||||
"jd": "103.617672",
|
||||
"wd": "30.62182"
|
||||
},
|
||||
{
|
||||
"jdmc": "白头镇",
|
||||
"fwmc": "白头镇和乐社区党群服务中心",
|
||||
"zzmc": "黄波",
|
||||
"jjr": "5",
|
||||
"hzr": "4",
|
||||
"sjgw": "35",
|
||||
"cpsl": "31",
|
||||
"qzsl": "2483",
|
||||
"jd": "103.617672",
|
||||
"wd": "30.62182"
|
||||
},
|
||||
{
|
||||
"jdmc": "白头镇",
|
||||
"fwmc": "白头镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "林国平",
|
||||
"jjr": "1",
|
||||
"hzr": "5",
|
||||
"sjgw": "19",
|
||||
"cpsl": "16",
|
||||
"qzsl": "2955",
|
||||
"jd": "103.620409",
|
||||
"wd": "30.599988"
|
||||
},
|
||||
{
|
||||
"jdmc": "道明镇",
|
||||
"fwmc": "道明镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "许军",
|
||||
"jjr": "4",
|
||||
"hzr": "9",
|
||||
"sjgw": "40",
|
||||
"cpsl": "31",
|
||||
"qzsl": "1098",
|
||||
"jd": "103.607164",
|
||||
"wd": "30.677037"
|
||||
},
|
||||
{
|
||||
"jdmc": "道明镇",
|
||||
"fwmc": "道明镇白马社区党群服务中心",
|
||||
"zzmc": "董志强",
|
||||
"jjr": "3",
|
||||
"hzr": "1",
|
||||
"sjgw": "28",
|
||||
"cpsl": "19",
|
||||
"qzsl": "2186",
|
||||
"jd": "103.666775",
|
||||
"wd": "30.684182"
|
||||
},
|
||||
{
|
||||
"jdmc": "观胜镇",
|
||||
"fwmc": "观胜镇便民服务中心(党群服务中心）",
|
||||
"zzmc": "孙慧敏",
|
||||
"jjr": "2",
|
||||
"hzr": "6",
|
||||
"sjgw": "33",
|
||||
"cpsl": "32",
|
||||
"qzsl": "977",
|
||||
"jd": "103.679284",
|
||||
"wd": "30.746676"
|
||||
},
|
||||
{
|
||||
"jdmc": "怀远镇",
|
||||
"fwmc": "怀远镇泉水社区党群服务中心（党群活动中心）",
|
||||
"zzmc": "郑丽萍",
|
||||
"jjr": "3",
|
||||
"hzr": "3",
|
||||
"sjgw": "14",
|
||||
"cpsl": "12",
|
||||
"qzsl": "1618",
|
||||
"jd": "103.539942",
|
||||
"wd": "30.743908"
|
||||
},
|
||||
{
|
||||
"jdmc": "怀远镇",
|
||||
"fwmc": "怀远镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "杨晓",
|
||||
"jjr": "3",
|
||||
"hzr": "2",
|
||||
"sjgw": "48",
|
||||
"cpsl": "45",
|
||||
"qzsl": "2304",
|
||||
"jd": "103.541238",
|
||||
"wd": "30.746072"
|
||||
},
|
||||
{
|
||||
"jdmc": "街子镇",
|
||||
"fwmc": "街子镇便民服务中心（崇州市街子镇综合便民服务和智慧蓉城运行中心）",
|
||||
"zzmc": "郭雪梅",
|
||||
"jjr": "1",
|
||||
"hzr": "8",
|
||||
"sjgw": "21",
|
||||
"cpsl": "15",
|
||||
"qzsl": "1421",
|
||||
"jd": "103.573014",
|
||||
"wd": "30.816296"
|
||||
},
|
||||
{
|
||||
"jdmc": "街子镇",
|
||||
"fwmc": "街子镇唐公社区党群服务中心",
|
||||
"zzmc": "马玉玲",
|
||||
"jjr": "4",
|
||||
"hzr": "7",
|
||||
"sjgw": "36",
|
||||
"cpsl": "34",
|
||||
"qzsl": "2069",
|
||||
"jd": "103.564798",
|
||||
"wd": "30.816778"
|
||||
},
|
||||
{
|
||||
"jdmc": "廖家镇",
|
||||
"fwmc": "廖家镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "朱晓红",
|
||||
"jjr": "2",
|
||||
"hzr": "4",
|
||||
"sjgw": "16",
|
||||
"cpsl": "13",
|
||||
"qzsl": "1182",
|
||||
"jd": "103.592506",
|
||||
"wd": "30.830493"
|
||||
},
|
||||
{
|
||||
"jdmc": "廖家镇",
|
||||
"fwmc": "廖家镇明珠社区党群服务中心",
|
||||
"zzmc": "胡彩莲",
|
||||
"jjr": "5",
|
||||
"hzr": "5",
|
||||
"sjgw": "42",
|
||||
"cpsl": "41",
|
||||
"qzsl": "2578",
|
||||
"jd": "103.704745",
|
||||
"wd": "30.715253"
|
||||
},
|
||||
{
|
||||
"jdmc": "廖家镇",
|
||||
"fwmc": "隆兴镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "黄丽君",
|
||||
"jjr": "3",
|
||||
"hzr": "1",
|
||||
"sjgw": "24",
|
||||
"cpsl": "11",
|
||||
"qzsl": "873",
|
||||
"jd": "103.636015",
|
||||
"wd": "30.584103"
|
||||
},
|
||||
{
|
||||
"jdmc": "隆兴镇",
|
||||
"fwmc": "隆兴镇中和社区党群服务中心",
|
||||
"zzmc": "林小芳",
|
||||
"jjr": "1",
|
||||
"hzr": "9",
|
||||
"sjgw": "30",
|
||||
"cpsl": "23",
|
||||
"qzsl": "1810",
|
||||
"jd": "103.640649",
|
||||
"wd": "30.592925"
|
||||
},
|
||||
{
|
||||
"jdmc": "文井江镇",
|
||||
"fwmc": "文井江镇综合便民服务中心（党群服务中心）",
|
||||
"zzmc": "许娟",
|
||||
"jjr": "2",
|
||||
"hzr": "6",
|
||||
"sjgw": "20",
|
||||
"cpsl": "16",
|
||||
"qzsl": "2231",
|
||||
"jd": "103.669377",
|
||||
"wd": "30.639533"
|
||||
},
|
||||
{
|
||||
"jdmc": "文井江镇",
|
||||
"fwmc": "文井江镇劳务合作社（文井江镇就业服务站）",
|
||||
"zzmc": "董艳华",
|
||||
"jjr": "2",
|
||||
"hzr": "3",
|
||||
"sjgw": "45",
|
||||
"cpsl": "30",
|
||||
"qzsl": "1396",
|
||||
"jd": "103.675213",
|
||||
"wd": "30.626786"
|
||||
},
|
||||
{
|
||||
"jdmc": "元通镇",
|
||||
"fwmc": "元通镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "孙斐",
|
||||
"jjr": "3",
|
||||
"hzr": "8",
|
||||
"sjgw": "27",
|
||||
"cpsl": "10",
|
||||
"qzsl": "2823",
|
||||
"jd": "103.630886",
|
||||
"wd": "30.739136"
|
||||
},
|
||||
{
|
||||
"jdmc": "元通镇",
|
||||
"fwmc": "元通镇花果山社区党群服务中心",
|
||||
"zzmc": "张建国",
|
||||
"jjr": "1",
|
||||
"hzr": "2",
|
||||
"sjgw": "39",
|
||||
"cpsl": "37",
|
||||
"qzsl": "1555",
|
||||
"jd": "103.630807",
|
||||
"wd": "30.743803"
|
||||
}
|
||||
]
|
||||
482
src/views/mapCount/components/jd copy.json
Normal file
482
src/views/mapCount/components/jd copy.json
Normal file
@ -0,0 +1,482 @@
|
||||
[
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道办事处（党群服务中心）",
|
||||
"zzmc": "李建强",
|
||||
"jjr": "2",
|
||||
"hzr": "6",
|
||||
"sjgw": "12",
|
||||
"cpsl": "11",
|
||||
"qzsl": "1027",
|
||||
"jd": "103.709593",
|
||||
"wd": "30.642669"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道金鸡社区党群服务中心",
|
||||
"zzmc": "张卫东",
|
||||
"jjr": "4",
|
||||
"hzr": "3",
|
||||
"sjgw": "34",
|
||||
"cpsl": "27",
|
||||
"qzsl": "2143",
|
||||
"jd": "103.699256",
|
||||
"wd": "30.610056"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道彭庙社区党群服务中心",
|
||||
"zzmc": "陈俊峰",
|
||||
"jjr": "3",
|
||||
"hzr": "8",
|
||||
"sjgw": "27",
|
||||
"cpsl": "23",
|
||||
"qzsl": "886",
|
||||
"jd": "103.681954",
|
||||
"wd": "30.613231"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道三和社区党群服务中心",
|
||||
"zzmc": "王刚",
|
||||
"jjr": "1",
|
||||
"hzr": "2",
|
||||
"sjgw": "46",
|
||||
"cpsl": "33",
|
||||
"qzsl": "1765",
|
||||
"jd": "103.714911",
|
||||
"wd": "30.629494"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道西江社区党群服务中心",
|
||||
"zzmc": "陈丽娟",
|
||||
"jjr": "5",
|
||||
"hzr": "7",
|
||||
"sjgw": "18",
|
||||
"cpsl": "15",
|
||||
"qzsl": "2532",
|
||||
"jd": "103.657393",
|
||||
"wd": "30.641023"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道毛桥社区党群服务中心",
|
||||
"zzmc": "李红梅",
|
||||
"jjr": "3",
|
||||
"hzr": "4",
|
||||
"sjgw": "41",
|
||||
"cpsl": "30",
|
||||
"qzsl": "941",
|
||||
"jd": "103.690241",
|
||||
"wd": "30.640704"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道永安社区党群服务中心",
|
||||
"zzmc": "赵志勇",
|
||||
"jjr": "2",
|
||||
"hzr": "5",
|
||||
"sjgw": "23",
|
||||
"cpsl": "17",
|
||||
"qzsl": "1478",
|
||||
"jd": "103.701054",
|
||||
"wd": "30.655325"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道办事处（综合便民服务中心）",
|
||||
"zzmc": "刘庆",
|
||||
"jjr": "4",
|
||||
"hzr": "9",
|
||||
"sjgw": "38",
|
||||
"cpsl": "24",
|
||||
"qzsl": "2890",
|
||||
"jd": "103.675986",
|
||||
"wd": "30.648424"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道石羊社区党群服务中心",
|
||||
"zzmc": "周伟",
|
||||
"jjr": "1",
|
||||
"hzr": "1",
|
||||
"sjgw": "15",
|
||||
"cpsl": "11",
|
||||
"qzsl": "1136",
|
||||
"jd": "103.695859",
|
||||
"wd": "30.635775"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道明湖社区党群服务中心",
|
||||
"zzmc": "吴海平",
|
||||
"jjr": "5",
|
||||
"hzr": "6",
|
||||
"sjgw": "49",
|
||||
"cpsl": "27",
|
||||
"qzsl": "2011",
|
||||
"jd": "103.728995",
|
||||
"wd": "30.617806"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道成都市跨企业培训中心",
|
||||
"zzmc": "张秀兰",
|
||||
"jjr": "4",
|
||||
"hzr": "3",
|
||||
"sjgw": "29",
|
||||
"cpsl": "12",
|
||||
"qzsl": "1344",
|
||||
"jd": "103.724047",
|
||||
"wd": "30.629753"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇州市人社局人力资源服务市场",
|
||||
"zzmc": "赵晓燕",
|
||||
"jjr": "10",
|
||||
"hzr": "2",
|
||||
"sjgw": "32",
|
||||
"cpsl": "30",
|
||||
"qzsl": "2357",
|
||||
"jd": "103.697652",
|
||||
"wd": "30.629184"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "天府青年城就业创业驿站",
|
||||
"zzmc": "孙晓军",
|
||||
"jjr": "2",
|
||||
"hzr": "8",
|
||||
"sjgw": "11",
|
||||
"cpsl": "7",
|
||||
"qzsl": "798",
|
||||
"jd": "103.69337",
|
||||
"wd": "30.619366"
|
||||
},
|
||||
{
|
||||
"jdmc": "大划街道",
|
||||
"fwmc": "大划街道崇州市公共就业服务站（大划站）",
|
||||
"zzmc": "郑学兵",
|
||||
"jjr": "4",
|
||||
"hzr": "7",
|
||||
"sjgw": "43",
|
||||
"cpsl": "34",
|
||||
"qzsl": "1660",
|
||||
"jd": "103.733269",
|
||||
"wd": "30.58804"
|
||||
},
|
||||
{
|
||||
"jdmc": "大划街道",
|
||||
"fwmc": "大划街道办事处（党群服务中心）",
|
||||
"zzmc": "杨德明",
|
||||
"jjr": "1",
|
||||
"hzr": "4",
|
||||
"sjgw": "25",
|
||||
"cpsl": "16",
|
||||
"qzsl": "2671",
|
||||
"jd": "103.74272",
|
||||
"wd": "30.586272"
|
||||
},
|
||||
{
|
||||
"jdmc": "羊马街道",
|
||||
"fwmc": "羊马街道办事处（党群服务中心)",
|
||||
"zzmc": "刘芳",
|
||||
"jjr": "3",
|
||||
"hzr": "5",
|
||||
"sjgw": "37",
|
||||
"cpsl": "30",
|
||||
"qzsl": "1854",
|
||||
"jd": "103.752865",
|
||||
"wd": "30.661384"
|
||||
},
|
||||
{
|
||||
"jdmc": "羊马街道",
|
||||
"fwmc": "羊马街道安阜社区党群服务中心",
|
||||
"zzmc": "周雅琴",
|
||||
"jjr": "4",
|
||||
"hzr": "1",
|
||||
"sjgw": "17",
|
||||
"cpsl": "13",
|
||||
"qzsl": "2288",
|
||||
"jd": "103.755043",
|
||||
"wd": "30.613517"
|
||||
},
|
||||
{
|
||||
"jdmc": "江源街道",
|
||||
"fwmc": "江源街道红土社区党群服务中心",
|
||||
"zzmc": "吴静怡",
|
||||
"jjr": "2",
|
||||
"hzr": "9",
|
||||
"sjgw": "44",
|
||||
"cpsl": "33",
|
||||
"qzsl": "1593",
|
||||
"jd": "103.773983",
|
||||
"wd": "30.591875"
|
||||
},
|
||||
{
|
||||
"jdmc": "江源街道",
|
||||
"fwmc": "江源街道唐兴社区党群服务中心",
|
||||
"zzmc": "徐国栋",
|
||||
"jjr": "3",
|
||||
"hzr": "6",
|
||||
"sjgw": "26",
|
||||
"cpsl": "18",
|
||||
"qzsl": "2766",
|
||||
"jd": "103.782691",
|
||||
"wd": "30.595346"
|
||||
},
|
||||
{
|
||||
"jdmc": "江源街道",
|
||||
"fwmc": "江源街道办事处（综合便民服务中心）",
|
||||
"zzmc": "郭斌",
|
||||
"jjr": "1",
|
||||
"hzr": "3",
|
||||
"sjgw": "31",
|
||||
"cpsl": "23",
|
||||
"qzsl": "1240",
|
||||
"jd": "103.782381",
|
||||
"wd": "30.594802"
|
||||
},
|
||||
{
|
||||
"jdmc": "三江街道",
|
||||
"fwmc": "三江街道皂角社区党群服务中心",
|
||||
"zzmc": "马晓辉",
|
||||
"jjr": "3",
|
||||
"hzr": "8",
|
||||
"sjgw": "13",
|
||||
"cpsl": "10",
|
||||
"qzsl": "1939",
|
||||
"jd": "103.782722",
|
||||
"wd": "30.545252"
|
||||
},
|
||||
{
|
||||
"jdmc": "三江街道",
|
||||
"fwmc": "三江街道办事处（党群服务中心）",
|
||||
"zzmc": "朱志华",
|
||||
"jjr": "2",
|
||||
"hzr": "2",
|
||||
"sjgw": "47",
|
||||
"cpsl": "37",
|
||||
"qzsl": "832",
|
||||
"jd": "103.775139",
|
||||
"wd": "30.550747"
|
||||
},
|
||||
{
|
||||
"jdmc": "白头镇",
|
||||
"fwmc": "白头镇五星村党群服务中心",
|
||||
"zzmc": "胡家辉",
|
||||
"jjr": "4",
|
||||
"hzr": "7",
|
||||
"sjgw": "22",
|
||||
"cpsl": "13",
|
||||
"qzsl": "1707",
|
||||
"jd": "103.617672",
|
||||
"wd": "30.62182"
|
||||
},
|
||||
{
|
||||
"jdmc": "白头镇",
|
||||
"fwmc": "白头镇和乐社区党群服务中心",
|
||||
"zzmc": "黄波",
|
||||
"jjr": "5",
|
||||
"hzr": "4",
|
||||
"sjgw": "35",
|
||||
"cpsl": "31",
|
||||
"qzsl": "2483",
|
||||
"jd": "103.617672",
|
||||
"wd": "30.62182"
|
||||
},
|
||||
{
|
||||
"jdmc": "白头镇",
|
||||
"fwmc": "白头镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "林国平",
|
||||
"jjr": "1",
|
||||
"hzr": "5",
|
||||
"sjgw": "19",
|
||||
"cpsl": "16",
|
||||
"qzsl": "2955",
|
||||
"jd": "103.620409",
|
||||
"wd": "30.599988"
|
||||
},
|
||||
{
|
||||
"jdmc": "道明镇",
|
||||
"fwmc": "道明镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "许军",
|
||||
"jjr": "4",
|
||||
"hzr": "9",
|
||||
"sjgw": "40",
|
||||
"cpsl": "31",
|
||||
"qzsl": "1098",
|
||||
"jd": "103.607164",
|
||||
"wd": "30.677037"
|
||||
},
|
||||
{
|
||||
"jdmc": "道明镇",
|
||||
"fwmc": "道明镇白马社区党群服务中心",
|
||||
"zzmc": "董志强",
|
||||
"jjr": "3",
|
||||
"hzr": "1",
|
||||
"sjgw": "28",
|
||||
"cpsl": "19",
|
||||
"qzsl": "2186",
|
||||
"jd": "103.666775",
|
||||
"wd": "30.684182"
|
||||
},
|
||||
{
|
||||
"jdmc": "观胜镇",
|
||||
"fwmc": "观胜镇便民服务中心(党群服务中心）",
|
||||
"zzmc": "孙慧敏",
|
||||
"jjr": "2",
|
||||
"hzr": "6",
|
||||
"sjgw": "33",
|
||||
"cpsl": "32",
|
||||
"qzsl": "977",
|
||||
"jd": "103.679284",
|
||||
"wd": "30.746676"
|
||||
},
|
||||
{
|
||||
"jdmc": "怀远镇",
|
||||
"fwmc": "怀远镇泉水社区党群服务中心（党群活动中心）",
|
||||
"zzmc": "郑丽萍",
|
||||
"jjr": "3",
|
||||
"hzr": "3",
|
||||
"sjgw": "14",
|
||||
"cpsl": "12",
|
||||
"qzsl": "1618",
|
||||
"jd": "103.539942",
|
||||
"wd": "30.743908"
|
||||
},
|
||||
{
|
||||
"jdmc": "怀远镇",
|
||||
"fwmc": "怀远镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "杨晓",
|
||||
"jjr": "3",
|
||||
"hzr": "2",
|
||||
"sjgw": "48",
|
||||
"cpsl": "45",
|
||||
"qzsl": "2304",
|
||||
"jd": "103.541238",
|
||||
"wd": "30.746072"
|
||||
},
|
||||
{
|
||||
"jdmc": "街子镇",
|
||||
"fwmc": "街子镇便民服务中心（崇州市街子镇综合便民服务和智慧蓉城运行中心）",
|
||||
"zzmc": "郭雪梅",
|
||||
"jjr": "1",
|
||||
"hzr": "8",
|
||||
"sjgw": "21",
|
||||
"cpsl": "15",
|
||||
"qzsl": "1421",
|
||||
"jd": "103.573014",
|
||||
"wd": "30.816296"
|
||||
},
|
||||
{
|
||||
"jdmc": "街子镇",
|
||||
"fwmc": "街子镇唐公社区党群服务中心",
|
||||
"zzmc": "马玉玲",
|
||||
"jjr": "4",
|
||||
"hzr": "7",
|
||||
"sjgw": "36",
|
||||
"cpsl": "34",
|
||||
"qzsl": "2069",
|
||||
"jd": "103.564798",
|
||||
"wd": "30.816778"
|
||||
},
|
||||
{
|
||||
"jdmc": "廖家镇",
|
||||
"fwmc": "廖家镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "朱晓红",
|
||||
"jjr": "2",
|
||||
"hzr": "4",
|
||||
"sjgw": "16",
|
||||
"cpsl": "13",
|
||||
"qzsl": "1182",
|
||||
"jd": "103.692861",
|
||||
"wd": "30.707592"
|
||||
},
|
||||
{
|
||||
"jdmc": "廖家镇",
|
||||
"fwmc": "廖家镇明珠社区党群服务中心",
|
||||
"zzmc": "胡彩莲",
|
||||
"jjr": "5",
|
||||
"hzr": "5",
|
||||
"sjgw": "42",
|
||||
"cpsl": "41",
|
||||
"qzsl": "2578",
|
||||
"jd": "103.704745",
|
||||
"wd": "30.715253"
|
||||
},
|
||||
{
|
||||
"jdmc": "廖家镇",
|
||||
"fwmc": "隆兴镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "黄丽君",
|
||||
"jjr": "3",
|
||||
"hzr": "1",
|
||||
"sjgw": "24",
|
||||
"cpsl": "11",
|
||||
"qzsl": "873",
|
||||
"jd": "103.636015",
|
||||
"wd": "30.584103"
|
||||
},
|
||||
{
|
||||
"jdmc": "隆兴镇",
|
||||
"fwmc": "隆兴镇中和社区党群服务中心",
|
||||
"zzmc": "林小芳",
|
||||
"jjr": "1",
|
||||
"hzr": "9",
|
||||
"sjgw": "30",
|
||||
"cpsl": "23",
|
||||
"qzsl": "1810",
|
||||
"jd": "103.640649",
|
||||
"wd": "30.592925"
|
||||
},
|
||||
{
|
||||
"jdmc": "文井江镇",
|
||||
"fwmc": "文井江镇综合便民服务中心（党群服务中心）",
|
||||
"zzmc": "许娟",
|
||||
"jjr": "2",
|
||||
"hzr": "6",
|
||||
"sjgw": "20",
|
||||
"cpsl": "16",
|
||||
"qzsl": "2231",
|
||||
"jd": "103.669377",
|
||||
"wd": "30.639533"
|
||||
},
|
||||
{
|
||||
"jdmc": "文井江镇",
|
||||
"fwmc": "文井江镇劳务合作社（文井江镇就业服务站）",
|
||||
"zzmc": "董艳华",
|
||||
"jjr": "2",
|
||||
"hzr": "3",
|
||||
"sjgw": "45",
|
||||
"cpsl": "30",
|
||||
"qzsl": "1396",
|
||||
"jd": "103.675213",
|
||||
"wd": "30.626786"
|
||||
},
|
||||
{
|
||||
"jdmc": "元通镇",
|
||||
"fwmc": "元通镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "孙斐",
|
||||
"jjr": "3",
|
||||
"hzr": "8",
|
||||
"sjgw": "27",
|
||||
"cpsl": "10",
|
||||
"qzsl": "2823",
|
||||
"jd": "103.630886",
|
||||
"wd": "30.739136"
|
||||
},
|
||||
{
|
||||
"jdmc": "元通镇",
|
||||
"fwmc": "元通镇花果山社区党群服务中心",
|
||||
"zzmc": "张建国",
|
||||
"jjr": "1",
|
||||
"hzr": "2",
|
||||
"sjgw": "39",
|
||||
"cpsl": "37",
|
||||
"qzsl": "1555",
|
||||
"jd": "103.630807",
|
||||
"wd": "30.743803"
|
||||
}
|
||||
]
|
||||
495
src/views/mapCount/components/jd.json
Normal file
495
src/views/mapCount/components/jd.json
Normal file
@ -0,0 +1,495 @@
|
||||
[
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道办事处（党群服务中心）",
|
||||
"zzmc": "李建强",
|
||||
"jjr": "2",
|
||||
"hzr": "6",
|
||||
"sjgw": "12",
|
||||
"cpsl": "11",
|
||||
"qzsl": "1027",
|
||||
"jd": "103.709593",
|
||||
"wd": "30.642669"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道金鸡社区党群服务中心",
|
||||
"zzmc": "张卫东",
|
||||
"jjr": "4",
|
||||
"hzr": "3",
|
||||
"sjgw": "34",
|
||||
"cpsl": "27",
|
||||
"qzsl": "2143",
|
||||
"jd": "103.699256",
|
||||
"wd": "30.610056"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道彭庙社区党群服务中心",
|
||||
"zzmc": "陈俊峰",
|
||||
"jjr": "3",
|
||||
"hzr": "8",
|
||||
"sjgw": "27",
|
||||
"cpsl": "23",
|
||||
"qzsl": "886",
|
||||
"jd": "103.681954",
|
||||
"wd": "30.613231"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道三和社区党群服务中心",
|
||||
"zzmc": "王刚",
|
||||
"jjr": "1",
|
||||
"hzr": "2",
|
||||
"sjgw": "46",
|
||||
"cpsl": "33",
|
||||
"qzsl": "1765",
|
||||
"jd": "103.714911",
|
||||
"wd": "30.629494"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇庆街道",
|
||||
"fwmc": "崇庆街道西江社区党群服务中心",
|
||||
"zzmc": "陈丽娟",
|
||||
"jjr": "5",
|
||||
"hzr": "7",
|
||||
"sjgw": "18",
|
||||
"cpsl": "15",
|
||||
"qzsl": "2532",
|
||||
"jd": "103.657393",
|
||||
"wd": "30.641023"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道毛桥社区党群服务中心",
|
||||
"zzmc": "李红梅",
|
||||
"jjr": "3",
|
||||
"hzr": "4",
|
||||
"sjgw": "41",
|
||||
"cpsl": "30",
|
||||
"qzsl": "941",
|
||||
"jd": "103.690241",
|
||||
"wd": "30.640704"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道永安社区党群服务中心",
|
||||
"zzmc": "赵志勇",
|
||||
"jjr": "2",
|
||||
"hzr": "5",
|
||||
"sjgw": "23",
|
||||
"cpsl": "17",
|
||||
"qzsl": "1478",
|
||||
"jd": "103.701054",
|
||||
"wd": "30.655325"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道办事处（综合便民服务中心）",
|
||||
"zzmc": "刘庆",
|
||||
"jjr": "4",
|
||||
"hzr": "9",
|
||||
"sjgw": "38",
|
||||
"cpsl": "24",
|
||||
"qzsl": "2890",
|
||||
"jd": "103.675986",
|
||||
"wd": "30.648424"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道石羊社区党群服务中心",
|
||||
"zzmc": "周伟",
|
||||
"jjr": "1",
|
||||
"hzr": "1",
|
||||
"sjgw": "15",
|
||||
"cpsl": "11",
|
||||
"qzsl": "1136",
|
||||
"jd": "103.695859",
|
||||
"wd": "30.635775"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道明湖社区党群服务中心",
|
||||
"zzmc": "吴海平",
|
||||
"jjr": "5",
|
||||
"hzr": "6",
|
||||
"sjgw": "49",
|
||||
"cpsl": "27",
|
||||
"qzsl": "2011",
|
||||
"jd": "103.728995",
|
||||
"wd": "30.617806"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇阳街道成都市跨企业培训中心",
|
||||
"zzmc": "张秀兰",
|
||||
"jjr": "4",
|
||||
"hzr": "3",
|
||||
"sjgw": "29",
|
||||
"cpsl": "12",
|
||||
"qzsl": "1344",
|
||||
"jd": "103.724047",
|
||||
"wd": "30.629753"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "崇州市人社局人力资源服务市场",
|
||||
"zzmc": "赵晓燕",
|
||||
"jjr": "10",
|
||||
"hzr": "2",
|
||||
"sjgw": "32",
|
||||
"cpsl": "30",
|
||||
"qzsl": "2357",
|
||||
"jd": "103.697652",
|
||||
"wd": "30.629184"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇阳街道",
|
||||
"fwmc": "天府青年城就业创业驿站",
|
||||
"zzmc": "孙晓军",
|
||||
"jjr": "2",
|
||||
"hzr": "8",
|
||||
"sjgw": "11",
|
||||
"cpsl": "7",
|
||||
"qzsl": "798",
|
||||
"jd": "103.69337",
|
||||
"wd": "30.619366"
|
||||
},
|
||||
{
|
||||
"jdmc": "大划街道",
|
||||
"fwmc": "大划街道崇州市公共就业服务站（大划站）",
|
||||
"zzmc": "郑学兵",
|
||||
"jjr": "4",
|
||||
"hzr": "7",
|
||||
"sjgw": "43",
|
||||
"cpsl": "34",
|
||||
"qzsl": "1660",
|
||||
"jd": "103.733269",
|
||||
"wd": "30.58804"
|
||||
},
|
||||
{
|
||||
"jdmc": "大划街道",
|
||||
"fwmc": "大划街道办事处（党群服务中心）",
|
||||
"zzmc": "杨德明",
|
||||
"jjr": "1",
|
||||
"hzr": "4",
|
||||
"sjgw": "25",
|
||||
"cpsl": "16",
|
||||
"qzsl": "2671",
|
||||
"jd": "103.74272",
|
||||
"wd": "30.586272"
|
||||
},
|
||||
{
|
||||
"jdmc": "羊马街道",
|
||||
"fwmc": "羊马街道办事处（党群服务中心)",
|
||||
"zzmc": "刘芳",
|
||||
"jjr": "3",
|
||||
"hzr": "5",
|
||||
"sjgw": "37",
|
||||
"cpsl": "30",
|
||||
"qzsl": "1854",
|
||||
"jd": "103.752865",
|
||||
"wd": "30.661384"
|
||||
},
|
||||
{
|
||||
"jdmc": "羊马街道",
|
||||
"fwmc": "羊马街道安阜社区党群服务中心",
|
||||
"zzmc": "周雅琴",
|
||||
"jjr": "4",
|
||||
"hzr": "1",
|
||||
"sjgw": "17",
|
||||
"cpsl": "13",
|
||||
"qzsl": "2288",
|
||||
"jd": "103.755043",
|
||||
"wd": "30.613517"
|
||||
},
|
||||
{
|
||||
"jdmc": "江源街道",
|
||||
"fwmc": "江源街道红土社区党群服务中心",
|
||||
"zzmc": "吴静怡",
|
||||
"jjr": "2",
|
||||
"hzr": "9",
|
||||
"sjgw": "44",
|
||||
"cpsl": "33",
|
||||
"qzsl": "1593",
|
||||
"jd": "103.773983",
|
||||
"wd": "30.591875"
|
||||
},
|
||||
{
|
||||
"jdmc": "江源街道",
|
||||
"fwmc": "江源街道唐兴社区党群服务中心",
|
||||
"zzmc": "徐国栋",
|
||||
"jjr": "3",
|
||||
"hzr": "6",
|
||||
"sjgw": "26",
|
||||
"cpsl": "18",
|
||||
"qzsl": "2766",
|
||||
"jd": "103.782691",
|
||||
"wd": "30.595346"
|
||||
},
|
||||
{
|
||||
"jdmc": "江源街道",
|
||||
"fwmc": "江源街道办事处（综合便民服务中心）",
|
||||
"zzmc": "郭斌",
|
||||
"jjr": "1",
|
||||
"hzr": "3",
|
||||
"sjgw": "31",
|
||||
"cpsl": "23",
|
||||
"qzsl": "1240",
|
||||
"jd": "103.782381",
|
||||
"wd": "30.594802"
|
||||
},
|
||||
{
|
||||
"jdmc": "三江街道",
|
||||
"fwmc": "三江街道皂角社区党群服务中心",
|
||||
"zzmc": "马晓辉",
|
||||
"jjr": "3",
|
||||
"hzr": "8",
|
||||
"sjgw": "13",
|
||||
"cpsl": "10",
|
||||
"qzsl": "1939",
|
||||
"jd": "103.782722",
|
||||
"wd": "30.545252"
|
||||
},
|
||||
{
|
||||
"jdmc": "三江街道",
|
||||
"fwmc": "三江街道办事处（党群服务中心）",
|
||||
"zzmc": "朱志华",
|
||||
"jjr": "2",
|
||||
"hzr": "2",
|
||||
"sjgw": "47",
|
||||
"cpsl": "37",
|
||||
"qzsl": "832",
|
||||
"jd": "103.775139",
|
||||
"wd": "30.550747"
|
||||
},
|
||||
{
|
||||
"jdmc": "白头镇",
|
||||
"fwmc": "白头镇五星村党群服务中心",
|
||||
"zzmc": "胡家辉",
|
||||
"jjr": "4",
|
||||
"hzr": "7",
|
||||
"sjgw": "22",
|
||||
"cpsl": "13",
|
||||
"qzsl": "1707",
|
||||
"jd": "103.617672",
|
||||
"wd": "30.62182"
|
||||
},
|
||||
{
|
||||
"jdmc": "白头镇",
|
||||
"fwmc": "白头镇和乐社区党群服务中心",
|
||||
"zzmc": "黄波",
|
||||
"jjr": "5",
|
||||
"hzr": "4",
|
||||
"sjgw": "35",
|
||||
"cpsl": "31",
|
||||
"qzsl": "2483",
|
||||
"jd": "103.617672",
|
||||
"wd": "30.62182"
|
||||
},
|
||||
{
|
||||
"jdmc": "白头镇",
|
||||
"fwmc": "白头镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "林国平",
|
||||
"jjr": "1",
|
||||
"hzr": "5",
|
||||
"sjgw": "19",
|
||||
"cpsl": "16",
|
||||
"qzsl": "2955",
|
||||
"jd": "103.620409",
|
||||
"wd": "30.599988"
|
||||
},
|
||||
{
|
||||
"jdmc": "道明镇",
|
||||
"fwmc": "道明镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "许军",
|
||||
"jjr": "4",
|
||||
"hzr": "9",
|
||||
"sjgw": "40",
|
||||
"cpsl": "31",
|
||||
"qzsl": "1098",
|
||||
"jd": "103.607164",
|
||||
"wd": "30.677037"
|
||||
},
|
||||
{
|
||||
"jdmc": "道明镇",
|
||||
"fwmc": "道明镇白马社区党群服务中心",
|
||||
"zzmc": "董志强",
|
||||
"jjr": "3",
|
||||
"hzr": "1",
|
||||
"sjgw": "28",
|
||||
"cpsl": "19",
|
||||
"qzsl": "2186",
|
||||
"jd": "103.666775",
|
||||
"wd": "30.684182"
|
||||
},
|
||||
{
|
||||
"jdmc": "观胜镇",
|
||||
"fwmc": "观胜镇便民服务中心(党群服务中心）",
|
||||
"zzmc": "孙慧敏",
|
||||
"jjr": "2",
|
||||
"hzr": "6",
|
||||
"sjgw": "33",
|
||||
"cpsl": "32",
|
||||
"qzsl": "977",
|
||||
"jd": "103.679284",
|
||||
"wd": "30.746676"
|
||||
},
|
||||
{
|
||||
"jdmc": "怀远镇",
|
||||
"fwmc": "怀远镇泉水社区党群服务中心（党群活动中心）",
|
||||
"zzmc": "郑丽萍",
|
||||
"jjr": "3",
|
||||
"hzr": "3",
|
||||
"sjgw": "14",
|
||||
"cpsl": "12",
|
||||
"qzsl": "1618",
|
||||
"jd": "103.539942",
|
||||
"wd": "30.743908"
|
||||
},
|
||||
{
|
||||
"jdmc": "怀远镇",
|
||||
"fwmc": "怀远镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "杨晓",
|
||||
"jjr": "3",
|
||||
"hzr": "2",
|
||||
"sjgw": "48",
|
||||
"cpsl": "45",
|
||||
"qzsl": "2304",
|
||||
"jd": "103.541238",
|
||||
"wd": "30.746072"
|
||||
},
|
||||
{
|
||||
"jdmc": "街子镇",
|
||||
"fwmc": "街子镇便民服务中心（崇州市街子镇综合便民服务和智慧蓉城运行中心）",
|
||||
"zzmc": "郭雪梅",
|
||||
"jjr": "1",
|
||||
"hzr": "8",
|
||||
"sjgw": "21",
|
||||
"cpsl": "15",
|
||||
"qzsl": "1421",
|
||||
"jd": "103.573014",
|
||||
"wd": "30.816296"
|
||||
},
|
||||
{
|
||||
"jdmc": "街子镇",
|
||||
"fwmc": "街子镇唐公社区党群服务中心",
|
||||
"zzmc": "马玉玲",
|
||||
"jjr": "4",
|
||||
"hzr": "7",
|
||||
"sjgw": "36",
|
||||
"cpsl": "34",
|
||||
"qzsl": "2069",
|
||||
"jd": "103.564798",
|
||||
"wd": "30.816778"
|
||||
},
|
||||
{
|
||||
"jdmc": "廖家镇",
|
||||
"fwmc": "廖家镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "朱晓红",
|
||||
"jjr": "2",
|
||||
"hzr": "4",
|
||||
"sjgw": "16",
|
||||
"cpsl": "13",
|
||||
"qzsl": "1182",
|
||||
"jd": "103.692861",
|
||||
"wd": "30.707592"
|
||||
},
|
||||
{
|
||||
"jdmc": "廖家镇",
|
||||
"fwmc": "廖家镇明珠社区党群服务中心",
|
||||
"zzmc": "胡彩莲",
|
||||
"jjr": "5",
|
||||
"hzr": "5",
|
||||
"sjgw": "42",
|
||||
"cpsl": "41",
|
||||
"qzsl": "2578",
|
||||
"jd": "103.704745",
|
||||
"wd": "30.715253"
|
||||
},
|
||||
{
|
||||
"jdmc": "廖家镇",
|
||||
"fwmc": "隆兴镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "黄丽君",
|
||||
"jjr": "3",
|
||||
"hzr": "1",
|
||||
"sjgw": "24",
|
||||
"cpsl": "11",
|
||||
"qzsl": "873",
|
||||
"jd": "103.636015",
|
||||
"wd": "30.584103"
|
||||
},
|
||||
{
|
||||
"jdmc": "隆兴镇",
|
||||
"fwmc": "隆兴镇中和社区党群服务中心",
|
||||
"zzmc": "林小芳",
|
||||
"jjr": "1",
|
||||
"hzr": "9",
|
||||
"sjgw": "30",
|
||||
"cpsl": "23",
|
||||
"qzsl": "1810",
|
||||
"jd": "103.640649",
|
||||
"wd": "30.592925"
|
||||
},
|
||||
{
|
||||
"jdmc": "文井江镇",
|
||||
"fwmc": "文井江镇综合便民服务中心（党群服务中心）",
|
||||
"zzmc": "许娟",
|
||||
"jjr": "2",
|
||||
"hzr": "6",
|
||||
"sjgw": "20",
|
||||
"cpsl": "16",
|
||||
"qzsl": "2231",
|
||||
"jd": "103.669377",
|
||||
"wd": "30.639533"
|
||||
},
|
||||
{
|
||||
"jdmc": "文井江镇",
|
||||
"fwmc": "文井江镇劳务合作社（文井江镇就业服务站）",
|
||||
"zzmc": "董艳华",
|
||||
"jjr": "2",
|
||||
"hzr": "3",
|
||||
"sjgw": "45",
|
||||
"cpsl": "30",
|
||||
"qzsl": "1396",
|
||||
"jd": "103.675213",
|
||||
"wd": "30.626786"
|
||||
},
|
||||
{
|
||||
"jdmc": "元通镇",
|
||||
"fwmc": "元通镇便民服务中心（党群服务中心）",
|
||||
"zzmc": "孙斐",
|
||||
"jjr": "3",
|
||||
"hzr": "8",
|
||||
"sjgw": "27",
|
||||
"cpsl": "10",
|
||||
"qzsl": "2823",
|
||||
"jd": "103.630886",
|
||||
"wd": "30.739136"
|
||||
},
|
||||
{
|
||||
"jdmc": "元通镇",
|
||||
"fwmc": "元通镇花果山社区党群服务中心",
|
||||
"zzmc": "张建国",
|
||||
"jjr": "1",
|
||||
"hzr": "2",
|
||||
"sjgw": "39",
|
||||
"cpsl": "37",
|
||||
"qzsl": "1555",
|
||||
"jd": "103.630807",
|
||||
"wd": "30.743803"
|
||||
},
|
||||
{
|
||||
"jdmc": "崇州市人力资源服务产业园",
|
||||
"fwmc": "江源街道红土社区党群服务中心",
|
||||
"zz": "赵皓盈",
|
||||
"jjr": "2",
|
||||
"hzr": "9",
|
||||
"zd":"40",
|
||||
"sjgw": "44",
|
||||
"cpsl": "33",
|
||||
"qzsl": "1593",
|
||||
"jd": "103.782722",
|
||||
"wd": "30.545252"
|
||||
}
|
||||
]
|
||||
144
src/views/mapCount/components/jnpx.vue
Normal file
144
src/views/mapCount/components/jnpx.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="box-container">
|
||||
<div class="data-item"
|
||||
v-for="(item, index) in dataItems"
|
||||
:key="index">
|
||||
<div class="mr15">
|
||||
<img class="imgs"
|
||||
:src="item.icon"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="data-content">
|
||||
<div class="label">{{ item.label }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
<div class="value">{{ item.dw }}</div>
|
||||
</div>
|
||||
<div style="width:100%;"
|
||||
class="mt20 flex flex-warp"
|
||||
v-if="item.data">
|
||||
<div class="data-content-item"
|
||||
v-for="(itemchild, iex) in item.data"
|
||||
:key="iex">
|
||||
<div class="label">{{ itemchild.label }}</div>
|
||||
<div class="value">{{ itemchild.value }} {{ itemchild.dw }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const dataItems = ref([
|
||||
{
|
||||
label: '岗位需求数',
|
||||
value: 120000,
|
||||
icon: require('@/assets/images/30.png'),
|
||||
dw: '个'
|
||||
},
|
||||
{
|
||||
label: '培训机构',
|
||||
value: 5,
|
||||
icon: require('@/assets/images/31.png'),
|
||||
dw: '家'
|
||||
},
|
||||
{
|
||||
label: '上架培训项目数',
|
||||
value: 23,
|
||||
icon: require('@/assets/images/32.png'),
|
||||
dw: '个'
|
||||
},
|
||||
{
|
||||
label: '学员入职率',
|
||||
value: 93.80,
|
||||
icon: require('@/assets/images/33.png'),
|
||||
dw: '%'
|
||||
},
|
||||
{
|
||||
label: '培训成效',
|
||||
icon: require('@/assets/images/34.png'),
|
||||
value: 3727,
|
||||
dw: '次',
|
||||
data: [
|
||||
{ label: '培训项目', value: 53, dw: '个' },
|
||||
{ label: '培训课程数', value: 114, dw: '个' },
|
||||
{ label: '报名人次', value: 925, dw: '次' },
|
||||
{ label: '签到人数', value: 886, dw: '人' },
|
||||
{ label: '培训完结', value: 879, dw: '人' },
|
||||
{ label: '证书颁发', value: 870, dw: '人' },
|
||||
]
|
||||
},
|
||||
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.box-container {
|
||||
padding: 2vw 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 15px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.data-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
margin-left: 10px;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#0deb0d, #ffffff);
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.data-content-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
line-height: 4vw;
|
||||
align-content: center;
|
||||
.label {
|
||||
margin-left: 80px;
|
||||
font-size: 1.5vw;
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: 1.5vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#0deb0d, #ffffff);
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.imgs {
|
||||
width: 6vw;
|
||||
}
|
||||
</style>
|
||||
125
src/views/mapCount/components/lgzp.vue
Normal file
125
src/views/mapCount/components/lgzp.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="box-container">
|
||||
<div class="data-item" v-for="(item, index) in dataItems" :key="index">
|
||||
<div class="mr15">
|
||||
<img class="imds" :src="item.icon" alt="" />
|
||||
</div>
|
||||
<div class="data-content">
|
||||
<div class="label">{{ item.label }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
</div>
|
||||
<div style="width:100%;" class="mt20 flex flex-warp" v-if="item.data">
|
||||
<div class="data-content-item" v-for="(itemchild, iex) in item.data" :key="iex">
|
||||
<div class="label">{{ itemchild.label }}</div>
|
||||
<div class="value">{{ itemchild.value }} {{ itemchild.dw }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const dataItems = ref([
|
||||
{
|
||||
label: '零工岗位',
|
||||
icon:require('@/assets/images/4.png'),
|
||||
value: '',
|
||||
data: [
|
||||
{label:'养老陪护',value:41,dw:'个'},
|
||||
{label:'保洁家教',value:188,dw:'个'},
|
||||
{label:'三嫂服务',value:103,dw:'个'},
|
||||
{label:'家电清洗',value:18,dw:'个'},
|
||||
{label:'家电维修',value:7,dw:'个'},
|
||||
{label:'安装服务',value:5,dw:'个'},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '零工人才库',
|
||||
icon:require('@/assets/images/5.png'),
|
||||
value: 219,
|
||||
},
|
||||
{
|
||||
label: '就业人次',
|
||||
icon:require('@/assets/images/6.png'),
|
||||
value: 271,
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.box-container {
|
||||
padding: 2vw 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 2vw 15px;
|
||||
// background: rgba(4, 24, 48, 0.8);
|
||||
// border: 1px solid rgba(0, 157, 255, 0.3);
|
||||
border-radius: 6px;
|
||||
// box-shadow: 0 0 10px rgba(0, 157, 255, 0.1);
|
||||
// transition: all 0.3s ease;
|
||||
margin-bottom: 30px;
|
||||
&:hover {
|
||||
// transform: translateY(-2px);
|
||||
// box-shadow: 0 0 15px rgba(0, 157, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.data-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
margin-left: 40px;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
// @include textColor(#8cc8ff, #ffffff);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#0deb0d, #ffffff);
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
.data-content-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
line-height: 3vw;
|
||||
.label {
|
||||
margin-left: 100px;
|
||||
margin-right: 30px;
|
||||
font-size: 1.5vw;
|
||||
font-family: "YSBTH";
|
||||
// @include textColor(#ffa38c, #ffffff);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.5vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#0deb0d, #ffffff);
|
||||
}
|
||||
}
|
||||
.imds{
|
||||
width: 6vw;
|
||||
}
|
||||
</style>
|
||||
135
src/views/mapCount/components/qzzp.vue
Normal file
135
src/views/mapCount/components/qzzp.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="box-container">
|
||||
<div class="data-item" v-for="(item, index) in dataItems" :key="index">
|
||||
<div class="mr15">
|
||||
<img class="imds" :src="item.icon" />
|
||||
</div>
|
||||
<div class="data-content">
|
||||
<div class="label">{{ item.label }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
<div class="value">{{ item.dw }}</div>
|
||||
</div>
|
||||
<div style="width:100%;" class="mt20" v-if="item.data">
|
||||
<div class="flex">
|
||||
<div class="mr15">
|
||||
<img class="imds" :src="item.data.icon" />
|
||||
</div>
|
||||
<div class="data-content">
|
||||
<div class="label">{{ item.data.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="child-Box" v-for="(itemchild, iex) in item.data.list" :key="iex">
|
||||
<li class="child-item flex align-center">
|
||||
<span class="mr20 ml50">0{{ iex + 1 }}、{{ itemchild.mc }}</span>
|
||||
<span class="nums">{{ itemchild.num }} <span>{{ itemchild.dw }}</span></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const dataItems = ref([
|
||||
{
|
||||
label: '用人单位数',
|
||||
value: 233,
|
||||
dw:'家',
|
||||
icon:require('@/assets/images/1.png')
|
||||
},
|
||||
{
|
||||
label: '发布岗位数',
|
||||
dw:'个',
|
||||
icon:require('@/assets/images/2.png'),
|
||||
value: 9637,
|
||||
data: {
|
||||
label: '招聘热门岗位',
|
||||
icon:require('@/assets/images/35.png'),
|
||||
list: [
|
||||
{ mc: '制造业普工', num: 4000, dw: '岗位' },
|
||||
{ mc: '光伏业务员', num: 1400, dw: '岗位'},
|
||||
{ mc: '软件开发', num: 800, dw: '岗位' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '匹配入职人数',
|
||||
value: 1300,
|
||||
icon: require('@/assets/images/3.png'),
|
||||
dw:'人',
|
||||
data: {
|
||||
label: '入职热门岗位',
|
||||
icon:require('@/assets/images/36.png'),
|
||||
list: [
|
||||
{ mc: '普工', num: 680, dw: '岗位', },
|
||||
{ mc: '销售', num: 230, dw: '岗位' },
|
||||
{ mc: '操作工', num: 103, dw: '岗位' },
|
||||
]
|
||||
}
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 60%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.box-container {
|
||||
padding: 2vw 20px;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.data-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
font-size: 2vw;
|
||||
margin-left: 40px;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#8cc8ff, #ffffff);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#03aaec, #ffffff);
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.child-item {
|
||||
padding: 6px 30px;
|
||||
box-sizing: border-box;
|
||||
font-size: 1.5vw;
|
||||
font-family: "YSBTH";
|
||||
// line-height: 4vw;
|
||||
.nums{
|
||||
@include textColor(#03aaec, #ffffff);
|
||||
}
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.imds{
|
||||
width: 6vw;
|
||||
}
|
||||
</style>
|
||||
108
src/views/mapCount/components/sszp.vue
Normal file
108
src/views/mapCount/components/sszp.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="box-container">
|
||||
<div class="data-item"
|
||||
v-for="(item, index) in dataItems"
|
||||
:key="index">
|
||||
<div class="mr15">
|
||||
<img class="imds"
|
||||
:src="item.icon"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="data-content">
|
||||
<div class="label">{{ item.label }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
<div class="value">{{ item.dw }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const dataItems = ref([
|
||||
|
||||
{
|
||||
label: '实习合作企业',
|
||||
value: 43,
|
||||
icon: require('@/assets/images/11.png'),
|
||||
dw: '家'
|
||||
},
|
||||
{
|
||||
label: '实习合作院校',
|
||||
icon: require('@/assets/images/12.png'),
|
||||
value: 28,
|
||||
dw: '个'
|
||||
},
|
||||
{
|
||||
label: '校企联合实习基地',
|
||||
icon: require('@/assets/images/38.png'),
|
||||
value: 3,
|
||||
dw: '个'
|
||||
},
|
||||
{
|
||||
label: '定向推送实习岗位',
|
||||
icon: require('@/assets/images/37.png'),
|
||||
value: 64,
|
||||
dw: '个'
|
||||
},
|
||||
{
|
||||
label: '实习入职人员',
|
||||
icon: require('@/assets/images/14.png'),
|
||||
value: 2780,
|
||||
dw: '人'
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.box-container {
|
||||
padding: 2vw 10px;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 2vw 15px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.data-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
// margin-left: 40px;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#8cc8ff, #ffffff);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#e6f703, #ffffff);
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.imds {
|
||||
width: 6vw;
|
||||
}
|
||||
</style>
|
||||
142
src/views/mapCount/components/zdrq.vue
Normal file
142
src/views/mapCount/components/zdrq.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="box-container">
|
||||
<div class="data-item"
|
||||
v-for="(item, index) in dataItems"
|
||||
:key="index">
|
||||
<div class="mr15">
|
||||
<img class="imgs"
|
||||
:src="item.icon"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="data-content">
|
||||
<div class="label">{{ item.label }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
<div class="numbe">{{ item.dw }}</div>
|
||||
</div>
|
||||
<div style="width:100%;"
|
||||
class="mt20 flex flex-warp"
|
||||
v-if="item.data">
|
||||
<div class="data-content-item pl50"
|
||||
v-for="(itemchild, iex) in item.data"
|
||||
:key="iex">
|
||||
<div class="label">{{ itemchild.label }}</div>
|
||||
<div class="value">{{ itemchild.value }} {{ itemchild.dw }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const dataItems = ref([
|
||||
{
|
||||
label: '帮扶就业困难人员',
|
||||
value: 55,
|
||||
icon: require('@/assets/images/41.png'),
|
||||
dw: '人',
|
||||
data: [
|
||||
{ label: '城镇零就业家庭成员', value: 0, dw: '人' },
|
||||
{ label: '城镇低保家庭', value: 5175, dw: '人' },
|
||||
{ label: '残疾人', value: 18000, dw: '人' },
|
||||
{ label: '现役军人配偶', value: 8970, dw: '人' },
|
||||
{ label: '烈士家属', value: 48, dw: '人' },
|
||||
{ label: '脱贫劳动力', value: 119000, dw: '人' },
|
||||
{ label: '农村低收入群体', value: 11200, dw: '人' },
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '困难毕业生',
|
||||
icon: require('@/assets/images/29.png'),
|
||||
value: 1434,
|
||||
dw: '人'
|
||||
},
|
||||
{
|
||||
label: '退役军人',
|
||||
value: 25700,
|
||||
icon: require('@/assets/images/39.png'),
|
||||
dw: '人'
|
||||
},
|
||||
{
|
||||
label: '长期失业人员',
|
||||
icon: require('@/assets/images/40.png'),
|
||||
value: 2208,
|
||||
dw: '人'
|
||||
},
|
||||
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.box-container {
|
||||
padding: 2vw 10px 3vw;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.data-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
margin-left: 40px;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#8cc8ff, #ffffff);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#07c5f5, #ffffff);
|
||||
margin-left: 40px;
|
||||
}
|
||||
.numbe{
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
}
|
||||
|
||||
.data-content-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
line-height: 4vw;
|
||||
align-content: center;
|
||||
|
||||
.label {
|
||||
margin-left: 20px;
|
||||
font-size: 1.5vw;
|
||||
margin-right: 40px;
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.5vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#8cc8ff, #ffffff);
|
||||
}
|
||||
}
|
||||
|
||||
.imgs {
|
||||
width: 6vw;
|
||||
}
|
||||
</style>
|
||||
177
src/views/mapCount/index.vue
Normal file
177
src/views/mapCount/index.vue
Normal file
@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="bigScrenn cppBox">
|
||||
<!-- 第一部分 -->
|
||||
<div class="none-Cont" >
|
||||
<Head title='兴蜀来了人力资源搓配服务平台'></Head>
|
||||
<div class="conttent">
|
||||
<echartsMap></echartsMap>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二个部分 -->
|
||||
<div class="two-cont">
|
||||
<ul class="cntBoxcpp flex">
|
||||
<li class="childOne">
|
||||
<div class="title-small">全职招聘</div>
|
||||
<div class="childCnt">
|
||||
<qzzp></qzzp>
|
||||
</div>
|
||||
</li>
|
||||
<li class="childOne">
|
||||
<div class="title-small">零工招聘</div>
|
||||
<div class="childCnt">
|
||||
<lgzp></lgzp>
|
||||
</div>
|
||||
</li>
|
||||
<li class="childOne">
|
||||
<div class="title-small">实习招聘</div>
|
||||
<div class="childCnt">
|
||||
<sszp></sszp>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 第三部分-->
|
||||
<div class="two-cont">
|
||||
<ul class="cntBoxcpp flex">
|
||||
<li class="childOne">
|
||||
<div class="title-small">创业撮合</div>
|
||||
<div class="childCnt">
|
||||
<cych></cych>
|
||||
</div>
|
||||
</li>
|
||||
<li class="childOne">
|
||||
<div class="title-small">技能培训</div>
|
||||
<div class="childCnt">
|
||||
<jnpx></jnpx>
|
||||
</div>
|
||||
</li>
|
||||
<li class="childOne">
|
||||
<div class="title-small">重点人群</div>
|
||||
<div class="childCnt">
|
||||
<zdrq></zdrq>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import echartsMap from './components/echartsMap.vue';
|
||||
import qzzp from './components/qzzp.vue';
|
||||
import lgzp from './components/lgzp.vue';
|
||||
import sszp from './components/sszp.vue';
|
||||
import cych from './components/cych.vue';
|
||||
import jnpx from './components/jnpx.vue';
|
||||
import zdrq from './components/zdrq.vue';
|
||||
import Head from "@/views/largeScreen/layout/head.vue";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
onBeforeUnmount
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const data = reactive({
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(0deg, $color1 0%, $color2 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.cppBox {
|
||||
width: 100%;
|
||||
background: url("~@/assets/images/bigHome.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 60px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 第一部分
|
||||
.none-Cont {
|
||||
height: calc(100% / 3);
|
||||
// height: 900px;
|
||||
position: relative;
|
||||
.conttent {
|
||||
position: absolute;
|
||||
height: calc(100% - 120px);
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
top: 9vw;
|
||||
padding: 0 10px 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.conttentOne {
|
||||
width: 100%;
|
||||
height: calc(100% - 286px);
|
||||
padding-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 第二三不部分
|
||||
.two-cont {
|
||||
height: calc(100% / 3);
|
||||
padding-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
.cntBoxcpp {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
.childOne {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/bg_16.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.childCnt {
|
||||
height: calc(100% - 80px);
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chartsBox {
|
||||
height: calc(100% - 125px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.title-small {
|
||||
line-height: 130px;
|
||||
padding-left: 150px;
|
||||
box-sizing: border-box;
|
||||
font-size: 2.2vw;
|
||||
font-family: "icrosoft YaHei";
|
||||
position: relative;
|
||||
background: url("~@/assets/images/ttt.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 50px;
|
||||
top: 38px;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
background: url("~@/assets/images/icon_20.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user