Initial commit
This commit is contained in:
108
src/views/cpp/components/bfzs.vue
Normal file
108
src/views/cpp/components/bfzs.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="jnrcBox">
|
||||
<div class="top flex">
|
||||
<div class="imgItem">
|
||||
<img src="@/assets/images/46.png" alt="" />
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<img src="@/assets/images/47.png" alt="" />
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<img src="@/assets/images/48.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mb30 mt30">
|
||||
<div class="imgItem btText"><span>第一产业</span></div>
|
||||
<div class="imgItem btText"><span>第二产业</span></div>
|
||||
<div class="imgItem btText"><span>第三产业</span></div>
|
||||
</div>
|
||||
<div class="flex mb30 mt20">
|
||||
<div class="imgItem">
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mb40 mt40">
|
||||
<div class="imgItem btText"><span>技能认证数量</span></div>
|
||||
<div class="imgItem btText"><span>技能认证数量</span></div>
|
||||
<div class="imgItem btText"><span>技能认证数量</span></div>
|
||||
</div>
|
||||
|
||||
<div class="flex mt20">
|
||||
<div class="imgItem">
|
||||
<div class="kkk">7 <span>个</span></div>
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<div class="kkk">659 <span>个</span></div>
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<div class="kkk">207 <span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
</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;
|
||||
}
|
||||
|
||||
.jnrcBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2vw;
|
||||
box-sizing: border-box;
|
||||
|
||||
.top {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.imgItem {
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 25px;
|
||||
font-size: 1.5vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#026ed3, #ffffff);
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 0 auto;
|
||||
width: 214px;
|
||||
height: 11px;
|
||||
background: url('~@/assets/images/icon_40.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.kkk {
|
||||
margin-top: 10px;
|
||||
line-height: 40px;
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
.btText {
|
||||
span {
|
||||
font-size: 3vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
126
src/views/cpp/components/czjjnrcdb.vue
Normal file
126
src/views/cpp/components/czjjnrcdb.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="jnrcBox">
|
||||
<div class="top flex mt40">
|
||||
<div class="imgItem">
|
||||
<img width="200" src="@/assets/images/icon_37.png" alt="" />
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<img width="200" src="@/assets/images/icon_38.png" alt="" />
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<img width="200" src="@/assets/images/icon_39.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mb40 mt70">
|
||||
<div class="imgItem"><span>第一产业</span></div>
|
||||
<div class="imgItem"><span>第二产业</span></div>
|
||||
<div class="imgItem"><span>第三产业</span></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="imgItem"><div class="line"></div></div>
|
||||
<div class="imgItem"><div class="line"></div></div>
|
||||
<div class="imgItem"><div class="line"></div></div>
|
||||
</div>
|
||||
<ul class="meaasgeBox">
|
||||
<li class="meaasgeItem" v-for="(it,idx) in list" :key="idx">
|
||||
<div class="messageTile"><span>{{it.label}}</span></div>
|
||||
<ul class="flex">
|
||||
<li v-for="(iv,idx) in it.list" :key="idx" class="childid">
|
||||
<div class="kkk" v-for="(ig,idxx) in iv" :key="idxx">{{idxx+1}}、{{ig}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
const list = reactive([
|
||||
{
|
||||
label: "各产业新兴行业分析",
|
||||
list:[
|
||||
['精准农业','农业科技服务','智慧养殖'],
|
||||
['智能制造装备','新能源汽车制造'],
|
||||
['数字创意产业','养老服务产业','共享经济'],
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "各产业新兴行岗位分析",
|
||||
list:[
|
||||
['农业数据分析师','农业无人机操作员','智慧养殖工程师'],
|
||||
['工业互联网工程师','3D打印工程师'],
|
||||
['数字媒体设计师','养老规划师','共享经济运营专员'],
|
||||
]
|
||||
},
|
||||
]);
|
||||
</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;
|
||||
}
|
||||
.jnrcBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2vw;
|
||||
box-sizing: border-box;
|
||||
.top {
|
||||
flex: 1 0 0;
|
||||
height: 105px;
|
||||
}
|
||||
.imgItem {
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
span{
|
||||
margin-top: 25px;
|
||||
font-size: 60px;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#026ed3,#ffffff);
|
||||
}
|
||||
.line{
|
||||
margin: 0 auto;
|
||||
width: 220px;
|
||||
height: 6px;
|
||||
background: url('~@/assets/images/icon_40.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
.meaasgeBox{
|
||||
margin-top: 30px;
|
||||
height: calc(100% - 410px);
|
||||
overflow: hidden;
|
||||
.meaasgeItem{
|
||||
height: 48%;
|
||||
margin-top: 2%;
|
||||
background: rgba(0,0,0,0.12);
|
||||
border-radius: 4%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
.messageTile{
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
font-family: "YSBTH";
|
||||
font-size: 50px;
|
||||
margin-bottom: 25px;
|
||||
span{
|
||||
@include textColor(#026ed3,#ffffff);
|
||||
}
|
||||
}
|
||||
.childid{
|
||||
flex: 1 0 0;
|
||||
padding-left: 60px;
|
||||
box-sizing: border-box;
|
||||
font-family: "YSBTH";
|
||||
.kkk{
|
||||
line-height: 70px;
|
||||
font-size: 1.2vw;
|
||||
@include textColor(#f68e06,#ffffff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
116
src/views/cpp/components/czjjnrcdd.vue
Normal file
116
src/views/cpp/components/czjjnrcdd.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<ul class="jnrcBox">
|
||||
<li class="jnrcItem" v-for="it in list" :key="it">
|
||||
<img :src="it.img" width="200" alt="" />
|
||||
<div class="line"></div>
|
||||
<div class="message flex just-around ">
|
||||
<div class="top">
|
||||
<div class="label">{{ it.label }}</div>
|
||||
<div class="cz">产值：<span class="num mr10">{{ it.cz }}</span>亿</div>
|
||||
<div class="cz">同比：<span class="num">{{ it.tb }}</span></div>
|
||||
<!-- <div class="cz">环比：<span class="num">{{ it.hb }}</span></div> -->
|
||||
</div>
|
||||
<div class="top">
|
||||
<div class="label">{{ it.label2 }}</div>
|
||||
<div class="cz">需求岗位数：<span class="num mr10">{{ it.gws }}</span>个</div>
|
||||
<div class="cz">需求人数：<span class="num">{{ it.xqrs }}</span>人</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
const list = reactive([
|
||||
{
|
||||
label: "第一产业产值及趋势",
|
||||
label2: '第一产业技能人才需求',
|
||||
cz: 36.75,
|
||||
czdw: '亿',
|
||||
hb: "-1.6%",
|
||||
tb: "+2%",
|
||||
gws: 3000,
|
||||
xqrs: 2565,
|
||||
img: require("@/assets/images/icon_32.png")
|
||||
},
|
||||
{
|
||||
label: "第二产业产值及趋势",
|
||||
label2: '第二产业技能人才需求',
|
||||
cz: 240.9,
|
||||
hb: "-1.6%",
|
||||
tb: "-1%",
|
||||
gws: 3000,
|
||||
xqrs: 2565,
|
||||
img: require("@/assets/images/icon_34.png")
|
||||
},
|
||||
{
|
||||
label: "第三产业产值及趋势",
|
||||
label2: '第三产业技能人才需求',
|
||||
cz: 232.79,
|
||||
hb: "-1.6%",
|
||||
tb: "+2%",
|
||||
gws: 3000,
|
||||
xqrs: 2565,
|
||||
img: require("@/assets/images/icon_35.png")
|
||||
}
|
||||
]);
|
||||
</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;
|
||||
}
|
||||
|
||||
.jnrcBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.jnrcItem {
|
||||
height: 33.33%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1vw;
|
||||
box-sizing: border-box;
|
||||
|
||||
.line {
|
||||
width: 12px;
|
||||
height: 188px;
|
||||
background: url("~@/assets/images/icon_33.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
.message {
|
||||
flex: 1 0 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding-top: 100px;
|
||||
.top {
|
||||
.label {
|
||||
font-family: "YSBTH";
|
||||
font-size: 55px;
|
||||
letter-spacing: 2px;
|
||||
@include textColor(#499ff2, #ffffff);
|
||||
}
|
||||
|
||||
.cz {
|
||||
font-size: 1.5vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#06f682,#ffffff);
|
||||
display: flex;
|
||||
font-weight: 600;
|
||||
align-items: center;
|
||||
letter-spacing: 2px;
|
||||
|
||||
.num {
|
||||
font-size: 1.3vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
138
src/views/cpp/components/pfjgfb.vue
Normal file
138
src/views/cpp/components/pfjgfb.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="training-products-container">
|
||||
<div class="products-section">
|
||||
<div class="products-grid">
|
||||
<div class="product-card" v-for="(item, index) in products" :key="index">
|
||||
<div class="icon">
|
||||
<img :src="item.icon" :alt="item.name" />
|
||||
</div>
|
||||
<div class="info flex">
|
||||
<div class="label">{{ item.name }}</div>
|
||||
<div class="value">{{ animatedValues.products[index] }}<span class="ge ml10">个</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const products = ref([
|
||||
{
|
||||
name: '培训机构：',
|
||||
count: 5,
|
||||
icon: require('@/assets/images/2.png')
|
||||
},
|
||||
{
|
||||
name: '企业：',
|
||||
count: 23,
|
||||
icon: require('@/assets/images/1.png')
|
||||
},
|
||||
{
|
||||
name: '高校：',
|
||||
count: 7,
|
||||
icon: require('@/assets/images/3.png')
|
||||
},
|
||||
|
||||
]);
|
||||
|
||||
const animatedValues = ref({
|
||||
products: [0, 0, 0, 0]
|
||||
});
|
||||
|
||||
const animateNumber = (startValue, endValue, duration, updateCallback) => {
|
||||
const startTime = Date.now();
|
||||
const endTime = startTime + duration;
|
||||
|
||||
const animate = () => {
|
||||
const currentTime = Date.now();
|
||||
const progress = Math.min((currentTime - startTime) / duration, 1);
|
||||
const currentValue = Math.floor(startValue + (endValue - startValue) * progress);
|
||||
|
||||
updateCallback(currentValue);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
products.value.forEach((item, index) => {
|
||||
animateNumber(0, item.count, 2000, (value) => animatedValues.value.products[index] = value);
|
||||
});
|
||||
});
|
||||
</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;
|
||||
}
|
||||
.training-products-container {
|
||||
padding: 0 24px;
|
||||
min-height: 100vh;
|
||||
color: #fff;
|
||||
font-family: "YSBTH";
|
||||
.products-section {
|
||||
border-radius: 12px;
|
||||
.products-grid {
|
||||
.product-card {
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 30px;
|
||||
height: 180px;
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(24, 144, 255, 0.6);
|
||||
box-shadow: 0 0 30px rgba(24, 144, 255, 0.25);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 188px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.label {
|
||||
font-size: 3vw;
|
||||
color: #8cc8ff;
|
||||
letter-spacing: 4px;
|
||||
@include textColor(#003D63,#ffffff);
|
||||
margin-right: 30px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.value {
|
||||
letter-spacing: 4px;
|
||||
font-size: 2.5vw;
|
||||
font-weight: bold;
|
||||
@include textColor(#8cc8ff,#ffffff);
|
||||
}
|
||||
.ge{
|
||||
font-size: 2.2vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
148
src/views/cpp/components/pxcg.vue
Normal file
148
src/views/cpp/components/pxcg.vue
Normal file
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="training-products-container">
|
||||
<div class="products-section">
|
||||
<div class="products-grid">
|
||||
<div class="product-card" v-for="(item, index) in products" :key="index">
|
||||
<div class="icon">
|
||||
<img :src="item.icon" :alt="item.name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="label">{{ item.name }}</div>
|
||||
<div class="value">{{ animatedValues.products[index] }}<span>人</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const products = ref([
|
||||
{
|
||||
name: '报名人数',
|
||||
count: 925,
|
||||
icon: require('@/assets/images/ic1.png')
|
||||
},
|
||||
{
|
||||
name: '签到人数',
|
||||
count: 886,
|
||||
icon: require('@/assets/images/ic2.png')
|
||||
},
|
||||
{
|
||||
name: '结业人数',
|
||||
count: 879,
|
||||
icon: require('@/assets/images/ic3.png')
|
||||
},
|
||||
{
|
||||
name: '领证人数',
|
||||
count: 870,
|
||||
icon: require('@/assets/images/ic4.png')
|
||||
}
|
||||
]);
|
||||
|
||||
const animatedValues = ref({
|
||||
products: [0, 0, 0, 0]
|
||||
});
|
||||
|
||||
const animateNumber = (startValue, endValue, duration, updateCallback) => {
|
||||
const startTime = Date.now();
|
||||
const endTime = startTime + duration;
|
||||
|
||||
const animate = () => {
|
||||
const currentTime = Date.now();
|
||||
const progress = Math.min((currentTime - startTime) / duration, 1);
|
||||
const currentValue = Math.floor(startValue + (endValue - startValue) * progress);
|
||||
|
||||
updateCallback(currentValue);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
products.value.forEach((item, index) => {
|
||||
animateNumber(0, item.count, 2000, (value) => animatedValues.value.products[index] = value);
|
||||
});
|
||||
});
|
||||
</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;
|
||||
}
|
||||
.training-products-container {
|
||||
padding: 24px 40px;
|
||||
min-height: 100vh;
|
||||
color: #fff;
|
||||
|
||||
.products-section {
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 60px;
|
||||
.product-card {
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 280px;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(24, 144, 255, 0.6);
|
||||
box-shadow: 0 0 30px rgba(24, 144, 255, 0.25);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 201px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(24, 144, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
.label {
|
||||
font-size: 1.5vw;
|
||||
color: #8cc8ff;
|
||||
margin-bottom: 8px;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#003D63,#ffffff);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 2vw;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
@include textColor(#FFD11B,#ffffff);
|
||||
span {
|
||||
font-size: 1.5vw;
|
||||
margin-left: 4px;
|
||||
opacity: 0.8;
|
||||
@include textColor(#FFD11B,#ffffff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
src/views/cpp/components/pxxm.vue
Normal file
101
src/views/cpp/components/pxxm.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="jnrcBox">
|
||||
<div class="top flex">
|
||||
<div class="imgItem">
|
||||
<img src="@/assets/images/icon_37.png" alt="" />
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<img src="@/assets/images/icon_38.png" alt="" />
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<img src="@/assets/images/icon_39.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mb20 mt20">
|
||||
<div class="imgItem btText"><span>第一产业</span></div>
|
||||
<div class="imgItem btText"><span>第二产业</span></div>
|
||||
<div class="imgItem btText"><span>第三产业</span></div>
|
||||
</div>
|
||||
<div class="flex mb20 mt20">
|
||||
<div class="imgItem">
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="imgItem">
|
||||
<div class="kkk">2</div>
|
||||
<div class="dw mt20">(个)</div>
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<div class="kkk">22</div>
|
||||
<div class="dw mt20">(个)</div>
|
||||
</div>
|
||||
<div class="imgItem">
|
||||
<div class="kkk">15</div>
|
||||
<div class="dw mt20">（个）</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
</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;
|
||||
}
|
||||
|
||||
.jnrcBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2vw;
|
||||
box-sizing: border-box;
|
||||
|
||||
.top {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.imgItem {
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
margin-top: 25px;
|
||||
font-size: 2.2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#026ed3, #ffffff);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 0 auto;
|
||||
width: 214px;
|
||||
height: 11px;
|
||||
background: url('~@/assets/images/icon_40.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.kkk {
|
||||
margin-top: 20px;
|
||||
font-size: 2.4vw;
|
||||
}
|
||||
|
||||
.dw {
|
||||
font-size: 2.2vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/views/cpp/components/qyzdpxb.vue
Normal file
66
src/views/cpp/components/qyzdpxb.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="jnrcBox ">
|
||||
<div class="flex align-center mb20 mt10">
|
||||
<div class="left"><img src="@/assets/images/ic41.png" alt=""></div>
|
||||
<div class="right ml30">
|
||||
<div class="label">开班期数</div>
|
||||
<div class="num">17 <span>期</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex align-center">
|
||||
<div class="left mb20"><img src="@/assets/images/ic422.png" alt=""></div>
|
||||
<div class="right ml30">
|
||||
<div class="label">培养人数</div>
|
||||
<div class="num">2620 <span>人</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
</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;
|
||||
}
|
||||
|
||||
.jnrcBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2vw;
|
||||
box-sizing: border-box;
|
||||
padding-top: 30px;
|
||||
|
||||
>div {
|
||||
height: 300px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
img {
|
||||
width: 179px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 2.5vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#003D63, #ffffff);
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 2.5vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#499FE2, #ffffff);
|
||||
|
||||
span {
|
||||
font-size: 2.2vw;
|
||||
@include textColor(#ffffff, #ffffff);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
154
src/views/cpp/components/sjpx.vue
Normal file
154
src/views/cpp/components/sjpx.vue
Normal file
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="training-products-container">
|
||||
<div class="products-section">
|
||||
<div class="products-grid">
|
||||
<div class="product-card" v-for="(item, index) in products" :key="index">
|
||||
<div class="icon">
|
||||
<img :src="item.icon" :alt="item.name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="label">{{ item.name }}</div>
|
||||
<div class="value">{{ animatedValues.products[index] }}<span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const products = ref([
|
||||
{
|
||||
name: '管理类',
|
||||
count: 2,
|
||||
icon: require('@/assets/images/52.png')
|
||||
},
|
||||
{
|
||||
name: '技能认证类',
|
||||
count: 42,
|
||||
icon: require('@/assets/images/53.png')
|
||||
},
|
||||
{
|
||||
name: '安全类',
|
||||
count: 4,
|
||||
icon: require('@/assets/images/49.png')
|
||||
},
|
||||
{
|
||||
name: '文化类',
|
||||
count: 3,
|
||||
icon: require('@/assets/images/50.png')
|
||||
},
|
||||
{
|
||||
name: '创新创业类',
|
||||
count: 7,
|
||||
icon: require('@/assets/images/51.png')
|
||||
}
|
||||
]);
|
||||
|
||||
const animatedValues = ref({
|
||||
products: [0, 0, 0, 0]
|
||||
});
|
||||
|
||||
const animateNumber = (startValue, endValue, duration, updateCallback) => {
|
||||
const startTime = Date.now();
|
||||
const endTime = startTime + duration;
|
||||
|
||||
const animate = () => {
|
||||
const currentTime = Date.now();
|
||||
const progress = Math.min((currentTime - startTime) / duration, 1);
|
||||
const currentValue = Math.floor(startValue + (endValue - startValue) * progress);
|
||||
|
||||
updateCallback(currentValue);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
products.value.forEach((item, index) => {
|
||||
animateNumber(0, item.count, 2000, (value) => animatedValues.value.products[index] = value);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.training-products-container {
|
||||
padding: 24px;
|
||||
// background: linear-gradient(to bottom, #001529, #002140);
|
||||
min-height: 100vh;
|
||||
color: #fff;
|
||||
|
||||
.products-section {
|
||||
// background: rgba(0, 21, 41, 0.7);
|
||||
border-radius: 12px;
|
||||
padding: 2px 32px;
|
||||
// border: 1px solid rgba(24, 144, 255, 0.5);
|
||||
// box-shadow: 0 0 15px rgba(24, 144, 255, 0.3);
|
||||
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
|
||||
.product-card {
|
||||
// background: rgba(0, 21, 41, 0.7);
|
||||
border-radius: 8px;
|
||||
padding: 2px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// border: 1px solid rgba(24, 144, 255, 0.3);
|
||||
// transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(24, 144, 255, 0.6);
|
||||
box-shadow: 0 0 30px rgba(24, 144, 255, 0.25);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 201px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
.label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.4vw;
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(25deg, #8cc8ff, #ffffff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 2.2vw;
|
||||
font-weight: bold;
|
||||
color: #fff;;
|
||||
|
||||
span {
|
||||
font-size: 2.2vw;
|
||||
margin-left: 4px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
166
src/views/cpp/components/trainingInstitutions.vue
Normal file
166
src/views/cpp/components/trainingInstitutions.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="overview-section">
|
||||
<div class="total-institutions">
|
||||
<div class="number-display">
|
||||
<span>{{ animatedValues.totalInstitutions }}</span>
|
||||
<span class="f16 ml10">家</span>
|
||||
</div>
|
||||
<div class="label">入驻培训机构</div>
|
||||
</div>
|
||||
<div class="institution-types">
|
||||
<div class="type-card">
|
||||
<div class="icon">
|
||||
<img :src="require('@/assets/images/ic344.png')"/>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="label">本地机构</div>
|
||||
<div class="value">{{ animatedValues.localInstitutions }}<span>家</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type-card">
|
||||
<div class="icon">
|
||||
<img :src="require('@/assets/images/icon_42.png')" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="label">线上机构</div>
|
||||
<div class="value">{{ animatedValues.onlineInstitutions }}<span>家</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const animatedValues = ref({
|
||||
totalInstitutions: 0,
|
||||
localInstitutions: 0,
|
||||
onlineInstitutions: 0
|
||||
});
|
||||
|
||||
const animateNumber = (startValue, endValue, duration, updateCallback) => {
|
||||
const startTime = Date.now();
|
||||
const endTime = startTime + duration;
|
||||
|
||||
const animate = () => {
|
||||
const currentTime = Date.now();
|
||||
const progress = Math.min((currentTime - startTime) / duration, 1);
|
||||
const currentValue = Math.floor(startValue + (endValue - startValue) * progress);
|
||||
|
||||
updateCallback(currentValue);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化数据动画
|
||||
animateNumber(0, 12, 2000, (value) => animatedValues.value.totalInstitutions = value);
|
||||
animateNumber(0, 5, 2000, (value) => animatedValues.value.localInstitutions = value);
|
||||
animateNumber(0, 7, 2000, (value) => animatedValues.value.onlineInstitutions = value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.overview-section {
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
padding: 0px 32px;
|
||||
.total-institutions {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 2.5vw;
|
||||
background: url("~@/assets/images/bg1111.png") no-repeat center bottom;
|
||||
background-size: 100% 100%;
|
||||
padding-bottom: 34px;
|
||||
|
||||
.number-display {
|
||||
font-size: 130px;
|
||||
font-weight: bold;
|
||||
span {
|
||||
background: linear-gradient(25deg, #05ee8d, #ffffff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 2.2vw;
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(25deg, #8cc8ff, #ffffff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.institution-types {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
|
||||
.type-card {
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(24, 144, 255, 0.6);
|
||||
box-shadow: 0 0 30px rgba(24, 144, 255, 0.25);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 169px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
.label {
|
||||
font-size: 2.2vw;
|
||||
margin-bottom: 8px;
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(25deg, #8cc8ff, #ffffff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 2.2vw;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(25deg, #8cc8ff, #ffffff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
span {
|
||||
font-size: 1.8vw;
|
||||
margin-left: 4px;
|
||||
opacity: 0.8;
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(25deg, #8cc8ff, #ffffff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
src/views/cpp/components/zdpxqt.vue
Normal file
152
src/views/cpp/components/zdpxqt.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="training-products-container">
|
||||
<div class="products-section">
|
||||
<div class="products-grid">
|
||||
<div class="product-card" v-for="(item, index) in products" :key="index">
|
||||
<div class="icon">
|
||||
<img :src="item.icon" :alt="item.name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="label">{{ item.name }}</div>
|
||||
<div class="value">{{ animatedValues.products[index] }}<span>人</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const products = ref([
|
||||
{
|
||||
name: '退役军人',
|
||||
count: 54,
|
||||
icon: require('@/assets/images/42.png')
|
||||
},
|
||||
{
|
||||
name: '困难毕业生',
|
||||
count: 570,
|
||||
icon: require('@/assets/images/43.png')
|
||||
},
|
||||
{
|
||||
name: '领金人员',
|
||||
count: 11,
|
||||
icon: require('@/assets/images/44.png')
|
||||
},
|
||||
{
|
||||
name: '长期失业人员',
|
||||
count: 7,
|
||||
icon: require('@/assets/images/45.png')
|
||||
}
|
||||
]);
|
||||
|
||||
const animatedValues = ref({
|
||||
products: [0, 0, 0, 0]
|
||||
});
|
||||
|
||||
const animateNumber = (startValue, endValue, duration, updateCallback) => {
|
||||
const startTime = Date.now();
|
||||
const endTime = startTime + duration;
|
||||
|
||||
const animate = () => {
|
||||
const currentTime = Date.now();
|
||||
const progress = Math.min((currentTime - startTime) / duration, 1);
|
||||
const currentValue = Math.floor(startValue + (endValue - startValue) * progress);
|
||||
|
||||
updateCallback(currentValue);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
products.value.forEach((item, index) => {
|
||||
animateNumber(0, item.count, 2000, (value) => animatedValues.value.products[index] = value);
|
||||
});
|
||||
});
|
||||
</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;
|
||||
}
|
||||
|
||||
.training-products-container {
|
||||
padding: 24px;
|
||||
min-height: 100vh;
|
||||
color: #fff;
|
||||
|
||||
.products-section {
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 60px;
|
||||
|
||||
.product-card {
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 280px;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(24, 144, 255, 0.6);
|
||||
box-shadow: 0 0 30px rgba(24, 144, 255, 0.25);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 201px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(24, 144, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
.label {
|
||||
font-size: 1.5vw;
|
||||
color: #8cc8ff;
|
||||
margin-bottom: 8px;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#003D63, #ffffff);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 2.2vw;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
@include textColor(#8cc8ff, #ffffff);
|
||||
|
||||
span {
|
||||
font-size: 1.5vw;
|
||||
margin-left: 4px;
|
||||
opacity: 0.8;
|
||||
@include textColor(#8cc8ff, #ffffff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
134
src/views/cpp/components/zyzgzs.vue
Normal file
134
src/views/cpp/components/zyzgzs.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<!-- 供需技能匹配分析 -->
|
||||
<div id="zdqycxEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick } from "vue";
|
||||
import { rotate } from "ol/transform";
|
||||
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
const lineChartFn = (val) => {
|
||||
var myChart = echarts.init(document.getElementById("zdqycxEcharts"));
|
||||
var option = {
|
||||
legend: {
|
||||
show: true,
|
||||
right: 10,
|
||||
top: 10,
|
||||
textStyle: { color: "#fff" },
|
||||
},
|
||||
legend: {
|
||||
textStyle: { color: "#fff", fontSize: 40 },
|
||||
selectedMode: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: { type: "shadow" }
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
right: "1%",
|
||||
left: "5%",
|
||||
bottom: "30%"
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show:true,
|
||||
rotate: 20,
|
||||
fontSize: 40,
|
||||
interval: 0
|
||||
},
|
||||
data: ["电工证", "焊工证", '数控机床操作证书', '叉车证', '起重机械操作证', '钳工证', 'CAD 认证', '注册质量工程师', '安全生产管理人员证书', 'CAM认证', '注册安全工程师', '物流管理师证书'],
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 40,
|
||||
interval: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,54,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "bar",
|
||||
stack: 'total',
|
||||
data: [36, 33, 29, 28, 24, 19, 18, 14, 8, 6, 5, 4],
|
||||
barWidth: 60,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top', // 将标签显示在柱状图的顶部
|
||||
color: "#fff",
|
||||
fontSize:40
|
||||
// formatter: '{c} %' // {c}表示数据值，{d}%表示百分比，计算方式为 (c / 总和) * 100%
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#7d792e" },
|
||||
{ offset: 1, color: "#f1c515" }
|
||||
], false),
|
||||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 1, color: '#f1c515' },
|
||||
{ offset: 1, color: '#f1c515' }
|
||||
], false),
|
||||
shadowColor: "#f1c515",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
myChart.on("click", function (params) { });
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
260
src/views/cpp/index.vue
Normal file
260
src/views/cpp/index.vue
Normal file
@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<div class="bigScrenn cppBox">
|
||||
<!-- 第一部分 -->
|
||||
<div class="none-Cont">
|
||||
|
||||
<Head title='"产教评"融合培训平台'></Head>
|
||||
<div class="conttent">
|
||||
<div class="bt-Title tc"><span>三产技能人才分析</span></div>
|
||||
<ul class="conttentOne flex just-between">
|
||||
<li class="childOne">
|
||||
<div class="title-small">产值及技能人才比对</div>
|
||||
<div class="childCnt">
|
||||
<Czjjnrcdd></Czjjnrcdd>
|
||||
</div>
|
||||
</li>
|
||||
<li class="childOne">
|
||||
<div class="title-small">各产业新兴行业分析</div>
|
||||
<div class="childCnt">
|
||||
<Czjjnrcdb></Czjjnrcdb>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二个部分 -->
|
||||
<div class="two-cont itemsBox">
|
||||
<div class="bt-Title tc"><span>技术培训体系</span></div>
|
||||
<ul class="cntBoxcpp flex">
|
||||
<li class="childOne">
|
||||
<div class="title-small">培训机构集群</div>
|
||||
<div class="childCnt">
|
||||
<TrainingInstitutions></TrainingInstitutions>
|
||||
</div>
|
||||
</li>
|
||||
<li class="childOne">
|
||||
<div class="title-small">培训项目分布</div>
|
||||
<div class="childCnt">
|
||||
<Pxxm></Pxxm>
|
||||
</div>
|
||||
</li>
|
||||
<li class="childOne">
|
||||
<div class="title-small">培训课程分类</div>
|
||||
<div class="childCnt">
|
||||
<sjpx></sjpx>
|
||||
</div>
|
||||
</li>
|
||||
<li class="childOne">
|
||||
<div class="title-small">企业定制培训班</div>
|
||||
<div class="childCnt">
|
||||
<Qyzdpxb></Qyzdpxb>
|
||||
</div>
|
||||
</li>
|
||||
<li class="childOne">
|
||||
<div class="title-small">培训成果</div>
|
||||
<div class="childCnt">
|
||||
<pxcg></pxcg>
|
||||
</div>
|
||||
</li>
|
||||
<li class="childOne">
|
||||
<div class="title-small">重点培训群体</div>
|
||||
<div class="childCnt">
|
||||
<zdpxqt></zdpxqt>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 第三部分-->
|
||||
<div class="two-cont">
|
||||
<div class="bt-Title tc"><span>三方评价体系</span></div>
|
||||
<ul class="cntBoxcpp cntBoxcpp2 flex">
|
||||
<li class="childOne">
|
||||
<div class="title-small">三方评价机构构成</div>
|
||||
<div class="childCnt">
|
||||
<pfjgfb></pfjgfb>
|
||||
</div>
|
||||
</li>
|
||||
<li class="childOne">
|
||||
<div class="title-small">三产技能认证数量</div>
|
||||
<div class="childCnt">
|
||||
<bfzs></bfzs>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="cntBoxcpp cntBoxcpp2 cntbox555">
|
||||
<div class="title-small">职业资格证书颁发情况</div>
|
||||
<!-- <div class="chartsBox"> -->
|
||||
<Zyzgzs />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Czjjnrcdd from './components/czjjnrcdd.vue';
|
||||
import Czjjnrcdb from './components/czjjnrcdb.vue';
|
||||
import TrainingInstitutions from './components/trainingInstitutions.vue';
|
||||
import Pxxm from './components/pxxm.vue';
|
||||
import Qyzdpxb from './components/qyzdpxb.vue';
|
||||
import sjpx from './components/sjpx.vue';
|
||||
import Zyzgzs from './components/zyzgzs.vue';
|
||||
import zdpxqt from './components/zdpxqt.vue';
|
||||
import pxcg from './components/pxcg.vue';
|
||||
import bfzs from './components/bfzs.vue';
|
||||
import pfjgfb from './components/pfjgfb.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/par_bg.jpg") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 60px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 第一部分
|
||||
.none-Cont {
|
||||
// height: calc(100% / 3);
|
||||
height: 1800px;
|
||||
position: relative;
|
||||
|
||||
.conttent {
|
||||
position: absolute;
|
||||
height: calc(100% - 310px);
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
top: 9vw;
|
||||
padding: 0 10px 10px;
|
||||
box-sizing: border-box;
|
||||
background: url("~@/assets/images/mb.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.conttentOne {
|
||||
width: 100%;
|
||||
height: calc(100% - 150px);
|
||||
padding-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 60px;
|
||||
padding-left: 20px;
|
||||
padding-right: 30px;
|
||||
|
||||
.childOne {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/bg_16.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.childCnt {
|
||||
height: calc(100% - 80px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 第二三不部分
|
||||
.two-cont {
|
||||
// height: calc(100% / 3);
|
||||
height: 1800px;
|
||||
// background: url("~@/assets/images/bg_13.png") no-repeat center center;
|
||||
background: url("~@/assets/images/mb.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.cntBoxcpp {
|
||||
height: calc(100% - 160px);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 60px 10px 10px 10px;
|
||||
box-sizing: border-box;
|
||||
.childOne {
|
||||
width: 33%;
|
||||
height: 50%;
|
||||
background: url("~@/assets/images/bg_16.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.childCnt {
|
||||
height: calc(100% - 80px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cntBoxcpp2 {
|
||||
height: calc((100% - 160px) / 2);
|
||||
|
||||
.childOne {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.cntbox555{
|
||||
background: url("~@/assets/images/999999.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bt-Title {
|
||||
height: 140px;
|
||||
line-height: 200px;
|
||||
|
||||
// background: url("~@/assets/images/bg_14.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
span {
|
||||
font-size: 2.8vw;
|
||||
@include textColor(#499fe2, #ffffff);
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
}
|
||||
|
||||
.title-small {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
padding-left: 150px;
|
||||
margin: 10px 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 2.2vw;
|
||||
font-family: "YSBTH";
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 50px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
background: url("~@/assets/images/icon_20.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
109
src/views/largeScreen/cards/bgyj_card.vue
Normal file
109
src/views/largeScreen/cards/bgyj_card.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<!-- 保供预警 -->
|
||||
<div class="bgyjBox">
|
||||
<ul class="bgyj-top flex mt4 mb8 pl10 pr10">
|
||||
<li class="bgyj-top-item flex align-center" v-for="(it,idx) in dataInfo.qyData" :key="idx">
|
||||
<div class="left"></div>
|
||||
<div class="gapline"></div>
|
||||
<div class="right f20">{{it.num}} <span class="ml4">次</span></div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="bgyj-bottom flex pl20 pr20">
|
||||
<li class="bgyj-bottom-item flex mr4" v-for="(it,idx) in dataInfo.ryData" :key="idx">
|
||||
<div class="mr8"><img :src="it.icon" alt=""></div>
|
||||
<div class="">
|
||||
<div class="num f20" :class="'num'+idx">{{it.num}}</div>
|
||||
<div class="text f14">{{it.mc}}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, reactive,defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
data:Object,
|
||||
})
|
||||
const dataInfo = reactive({
|
||||
qyData:[
|
||||
{ lx:'yjzs',num:300},
|
||||
{ lx:'qtyj',num:300},
|
||||
],
|
||||
ryData:[
|
||||
{ mc:'重点岗位缺口预警', num:5, icon:require('@/assets/images/icon12.png')},
|
||||
{ mc:'经纪人分配预警', num:5, icon:require('@/assets/images/icon13.png')},
|
||||
{ mc:'领金分配预警', num:1500, icon:require('@/assets/images/icon14.png')},
|
||||
]
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 70%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.bgyjBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.bgyj-top{
|
||||
width: 100%;
|
||||
height: 74px;
|
||||
.bgyj-top-item{
|
||||
width: 50%;
|
||||
height: 74px;
|
||||
.left{
|
||||
width: 50%;
|
||||
height: 60px;
|
||||
background: url('~@/assets/images/bg08.png') no-repeat left bottom;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.gapline{
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
margin-right: 6px;
|
||||
background: linear-gradient(to top, #d88f25 0%, #ffffff 70%);
|
||||
}
|
||||
.right{
|
||||
font-weight: 600;
|
||||
@include textColor(#d88f25,#ffffff)
|
||||
}
|
||||
}
|
||||
.bgyj-top-item:nth-child(2){
|
||||
.left{
|
||||
background: url('~@/assets/images/bg09.png') no-repeat left bottom;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.gapline{
|
||||
background: linear-gradient(to top, #5cb2f7 0%, #ffffff 70%);
|
||||
}
|
||||
.right{
|
||||
@include textColor(#5cb2f7,#ffffff)
|
||||
}
|
||||
}
|
||||
}
|
||||
.bgyj-bottom-item{
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.text{
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
.num{
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#0936ff,#ffffff);
|
||||
}
|
||||
.num1{
|
||||
@include textColor(#5cb2f7,#ffffff);
|
||||
}
|
||||
.num2{
|
||||
@include textColor(#31eafb,#ffffff);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
98
src/views/largeScreen/cards/cycz_gwqk_card.vue
Normal file
98
src/views/largeScreen/cards/cycz_gwqk_card.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<!-- 产业 产值、岗位缺口趋势 -->
|
||||
<ul class="flex align-center" style="width: 100%; height: 100%;align-items: center;">
|
||||
<li class="itemQs" v-for="it in list" :key="it">
|
||||
<!-- class="ml14" -->
|
||||
<div style="text-align: center;"><img :src="it.icon" class="imgs" alt=""></div>
|
||||
<!-- lh24 -->
|
||||
<div class="ml14 text "><span>{{it.label}}</span></div>
|
||||
<div class="line ml14"></div>
|
||||
<div class="flex mt14">
|
||||
<span class="info">产值：</span>
|
||||
<span class="num">{{it.cz}}亿
|
||||
<span class="ml2"><img width="10" src="@/assets/images/up.png" alt=""> <span class="dwww">{{it.cyqs}}</span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex align-center mt10">
|
||||
<span class="info">岗位缺口：</span>
|
||||
<span class="num num1">{{it.gwqk}}<span class="ml2"><img width="10" src="@/assets/images/up.png" alt=""><span class="dwww">{{it.zzl}}</span></span></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick, reactive } from "vue";
|
||||
const list = reactive([
|
||||
{label:'第一产业',cyqs:'3%',gwqk:1879,cz:'36.75',zzl:'1%',icon:require('@/assets/images/icon_32.png')},
|
||||
{label:'第二产业',cyqs:'6%',gwqk:6358,cz:'240.9',zzl:'3%',icon:require('@/assets/images/icon_41.png')},
|
||||
{label:'第三产业',cyqs:'7%',gwqk:4924,cz:'232.79',zzl:'4%',icon:require('@/assets/images/icon_25.png')},
|
||||
])
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
</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;
|
||||
}
|
||||
.itemQs{
|
||||
flex: 1 0 0;
|
||||
// padding: 0 4px;
|
||||
box-sizing: border-box;
|
||||
.imgs{
|
||||
width: 2.567vw;
|
||||
}
|
||||
.text{
|
||||
font-size: 1.2vw;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-weight: bolder;
|
||||
@include textColor(#0072FF, #ffffff);
|
||||
}
|
||||
.line{
|
||||
height: 1vw;
|
||||
margin:6px auto;
|
||||
width: 50%;
|
||||
// width: 3.542vw;
|
||||
height: 0.208vw;
|
||||
// margin-top: 6px;
|
||||
// margin-bottom: 6px;
|
||||
// margin-left: 20px;
|
||||
background: url('~@/assets/images//icon_27.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.info{
|
||||
display: inline-block;
|
||||
// width: 43%;
|
||||
text-align: right;
|
||||
// font-size: 14px;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5vw;
|
||||
font-family: "icrosoft YaHei";
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.num{
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
white-space: nowrap;
|
||||
font-size: 2rem;
|
||||
margin-top: 6px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
.num1{
|
||||
margin-top: 2px !important;
|
||||
margin-left: 4px !important;
|
||||
}
|
||||
}
|
||||
.dwww{
|
||||
@include textColor(#03c087, #ffffff);
|
||||
}
|
||||
</style>
|
||||
139
src/views/largeScreen/cards/cygwqkqs_card.vue
Normal file
139
src/views/largeScreen/cards/cygwqkqs_card.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<!-- 产业岗位缺口趋势 -->
|
||||
<div id="zcsbEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick } from "vue";
|
||||
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
const lineChartFn = (val) => {
|
||||
var myChart = echarts.init(document.getElementById("zcsbEcharts"));
|
||||
var option = {
|
||||
legend: {
|
||||
show: true,
|
||||
right: 10,
|
||||
top: 10,
|
||||
textStyle: { color: "#fff" },
|
||||
data: ["第一产业", "第二产业",'第三产业']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: { type: "shadow" }
|
||||
},
|
||||
grid: {
|
||||
top: "24%",
|
||||
right: "4%",
|
||||
left: "10%",
|
||||
bottom: "12%"
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLabel: { interval: 0, rotate: 0 },
|
||||
axisLine: { lineStyle: { color: "#fff" } },
|
||||
axisTick:{
|
||||
show:false,
|
||||
},
|
||||
data: ["一月", "二月", "三月", "四月", "五月", "六月"]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisLabel: { formatter: "{value}", color: "#fff" },
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: { color: "rgba(255,255,255,1)" }
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: { color: "rgba(255,255,255,0.2)" }
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "第一产业",
|
||||
type: "bar",
|
||||
data: [20, 30, 40, 12, 50, 20],
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#7d792e" },
|
||||
{ offset: 1, color: "#f1c515" }
|
||||
],false),
|
||||
borderColor:new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset:1,color:'#f1c515'},
|
||||
{ offset:1, color:'#f1c515'}
|
||||
],false),
|
||||
shadowColor: "#f1c515",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "第二产业",
|
||||
type: "bar",
|
||||
data: [10, 10, 10, 20, 30, 40],
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#0488cf" },
|
||||
{ offset: 1, color: "#01a3f7" }
|
||||
],false),
|
||||
borderColor:new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset:1, color:'#01a3f7' },
|
||||
{ offset:0.8, color:'#01a3f7'}
|
||||
],false),
|
||||
shadowColor: "#01a3f7",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "第三产业",
|
||||
type: "bar",
|
||||
data: [10, 20, 30, 20, 40, 20],
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#13a2a1" },
|
||||
{ offset: 1, color: "#16dacd" }
|
||||
],false),
|
||||
borderColor:new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset:1, color:'#16dacd' },
|
||||
{ offset:0.8, color:'#16dacd'}
|
||||
],false),
|
||||
shadowColor: "#16dacd",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
myChart.on("click", function (params) {});
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
84
src/views/largeScreen/cards/fwzlyj_card.vue
Normal file
84
src/views/largeScreen/cards/fwzlyj_card.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<!-- 服务质量预警 -->
|
||||
<div class="zdwdcdBox flex align-center">
|
||||
<div><img src="~@/assets/images/icon_31.png" alt=""></div>
|
||||
<ul class="cntbox ml5 mr20">
|
||||
<li class="cntItem flex just-between align-center" v-for="it in dataInfo" :key="it">
|
||||
<span class="text">{{it.label}}</span>
|
||||
<span class="num">{{it.num}} <span>次</span></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, reactive,defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
data:Object,
|
||||
})
|
||||
const dataInfo = reactive([
|
||||
{ label:'劳务经纪人差评聚集',num:2 },
|
||||
{ label:'培训差评聚集',num:0 },
|
||||
{ label:'入园机构差评聚集',num:0 },
|
||||
])
|
||||
|
||||
let timer = ref(null)
|
||||
onMounted(()=>{
|
||||
// timer.value = setInterval(()=>{
|
||||
// if(dataInfo[0].num > 300) dataInfo[0].num = 100;
|
||||
// else dataInfo[0].num = dataInfo[0].num + 12;
|
||||
|
||||
// if(dataInfo[1].num < 10) dataInfo[1].num = 50;
|
||||
// else dataInfo[1].num -= 4;
|
||||
|
||||
// if(dataInfo[2].num > 100) dataInfo[2].num = 20;
|
||||
// else dataInfo[2].num += 4;
|
||||
|
||||
// },3000)
|
||||
})
|
||||
|
||||
onUnmounted(()=>{
|
||||
clearInterval(timer.value)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 70%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.zdwdcdBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 4.567vw;
|
||||
}
|
||||
.cntbox{
|
||||
flex: 1 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
.text{
|
||||
font-size: 1vw;
|
||||
font-family: "icrosoft YaHei";
|
||||
}
|
||||
.num{
|
||||
font-size: 1.4vw;
|
||||
@include textColor(#05fc64,#ffffff);
|
||||
span{
|
||||
@include textColor(#ffffff,#ffffff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
129
src/views/largeScreen/cards/gwqkxq_card.vue
Normal file
129
src/views/largeScreen/cards/gwqkxq_card.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<!-- 岗位缺口需求 -->
|
||||
<div class="cardCnt relative flex align-center">
|
||||
<div class="bottom-item-left">
|
||||
<div class="leftImg">
|
||||
<div class="sirxle" ></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="bottom-item-right noScollLine">
|
||||
<li class="itemChild" v-for="item in dataObj.countList" :key="item">
|
||||
<div class="label">
|
||||
<span class="imgicon mr10" :style="{background:item.color}"></span>
|
||||
{{item.label}}
|
||||
</div>
|
||||
<div class="num">{{item.num}}</div>
|
||||
<div class="per" :style="{color:item.color}">{{item.persont}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, reactive,defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
data:Object,
|
||||
})
|
||||
const dataObj = reactive({
|
||||
countList:[
|
||||
{color:'#1AB1F0',label:'普工',num:0,persont:'0%'},
|
||||
{color:'#1EE7E7',label:'车工',num:0,persont:'0%'},
|
||||
{color:'#F9F05E',label:'叉车司机',num:0,persont:'0%'},
|
||||
{color:'#FFAC26',label:'家政保洁',num:0,persont:'0%'},
|
||||
{color:'#00FFA2',label:'搬运工',num:0,persont:'0%'},
|
||||
{color:'#5C49E9',label:'其他',num:0,persont:'0%'},
|
||||
]
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cardCnt{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.bottom-item-left{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.leftImg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: url('~@/assets/images/sircleOut.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&::after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 36px;
|
||||
top: 37px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: url('~@/assets/images/bg_05.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.sirxle{
|
||||
position: absolute;
|
||||
width: 91px;
|
||||
height: 91px;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
background: url('~@/assets/images/sircleIn.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-item-right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: calc(100% - 150px);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
margin-left: 30px;
|
||||
position: absolute;
|
||||
left: 116px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.itemChild {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 26px;
|
||||
border-bottom: 1px dashed #0072FF;
|
||||
|
||||
}
|
||||
.label{
|
||||
width: 60%;
|
||||
.imgicon{
|
||||
display: inline-block;
|
||||
width: 13px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
transform: rotate(-3deg) skew(6deg,6deg);
|
||||
}
|
||||
}
|
||||
.num{
|
||||
width: 20%;
|
||||
}
|
||||
.per{
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
80
src/views/largeScreen/cards/hgjgyj_card.vue
Normal file
80
src/views/largeScreen/cards/hgjgyj_card.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<!-- 合规监管预警 -->
|
||||
<div class="zdwdcdBox flex align-center">
|
||||
<div><img src="~@/assets/images/icon_30.png" alt=""></div>
|
||||
<ul class="cntbox ml10 mr30">
|
||||
<li class="cntItem flex just-between align-center" v-for="it in dataInfo" :key="it">
|
||||
<span class="text">{{it.label}}</span>
|
||||
<span class="num">{{it.num}} <span>次</span></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, reactive,defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
data:Object,
|
||||
})
|
||||
const dataInfo = reactive([
|
||||
{ label:'劳动用工安全指标',num:7 },
|
||||
{ label:'劳动纠纷风险异常',num:1 },
|
||||
])
|
||||
|
||||
let timer = ref(null)
|
||||
onMounted(()=>{
|
||||
// timer.value = setInterval(()=>{
|
||||
// if(dataInfo[0].num > 300) dataInfo[0].num = 100;
|
||||
// else dataInfo[0].num = dataInfo[0].num + 12;
|
||||
|
||||
// if(dataInfo[1].num < 10) dataInfo[1].num = 50;
|
||||
// else dataInfo[1].num -= 4;
|
||||
|
||||
// },3000)
|
||||
})
|
||||
|
||||
onUnmounted(()=>{
|
||||
clearInterval(timer.value)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 70%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.zdwdcdBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 4.567vw;
|
||||
}
|
||||
.cntbox{
|
||||
flex: 1 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
.text{
|
||||
font-size: 1vw;
|
||||
font-family: "icrosoft YaHei";
|
||||
}
|
||||
.num{
|
||||
font-size: 1.4vw;
|
||||
@include textColor(#0568fc,#ffffff);
|
||||
span{
|
||||
@include textColor(#ffffff,#ffffff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
80
src/views/largeScreen/cards/lwscycyj_card.vue
Normal file
80
src/views/largeScreen/cards/lwscycyj_card.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<!-- 劳务市场异常预警 -->
|
||||
<div class="zdwdcdBox flex align-center">
|
||||
<div><img src="~@/assets/images/icon_29.png" alt=""></div>
|
||||
<ul class="cntbox ml10 mr30">
|
||||
<li class="cntItem flex just-between align-center" v-for="it in dataInfo" :key="it">
|
||||
<span class="text f18">{{it.label}}</span>
|
||||
<span class="num f20">{{it.num}} <span>次</span></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, reactive,defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
data:Object,
|
||||
})
|
||||
const dataInfo = reactive([
|
||||
{ label:'劳务中介活跃预警',num:2 },
|
||||
{ label:'用工风险预警',num:5 },
|
||||
])
|
||||
|
||||
let timer = ref(null)
|
||||
onMounted(()=>{
|
||||
// timer.value = setInterval(()=>{
|
||||
// if(dataInfo[0].num > 300) dataInfo[0].num = 100;
|
||||
// else dataInfo[0].num = dataInfo[0].num + 15;
|
||||
|
||||
// if(dataInfo[1].num < 100) dataInfo[1].num = 500;
|
||||
// else dataInfo[1].num -= 15;
|
||||
|
||||
// },3000)
|
||||
})
|
||||
|
||||
onUnmounted(()=>{
|
||||
clearInterval(timer.value)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 70%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.zdwdcdBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 4.567vw;
|
||||
}
|
||||
.cntbox{
|
||||
flex: 1 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
.text{
|
||||
font-size: 1vw;
|
||||
font-family: "icrosoft YaHei";
|
||||
}
|
||||
.num{
|
||||
font-size: 1.4vw;
|
||||
@include textColor(#fca505,#ffffff);
|
||||
span{
|
||||
@include textColor(#ffffff,#ffffff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
85
src/views/largeScreen/cards/yggxfxyj_card.vue
Normal file
85
src/views/largeScreen/cards/yggxfxyj_card.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<!-- 用工供需风险预警 -->
|
||||
<div class="zdwdcdBox flex align-center">
|
||||
<div><img src="~@/assets/images/icon_28.png" alt=""></div>
|
||||
<ul class="cntbox ml10 mr30">
|
||||
<li class="cntItem flex just-between align-center" v-for="it in dataInfo" :key="it">
|
||||
<span class="text">{{ it.label }}</span>
|
||||
<span class="num">{{ it.num }} <span>次</span></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Statis from "@/components/statis.vue";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, reactive, defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
})
|
||||
const dataInfo = reactive([
|
||||
{ label: '企业用工缺口率', num: 8 },
|
||||
{ label: '技能错配指数', num: 3 },
|
||||
{ label: '离职潮预警', num: 4 },
|
||||
])
|
||||
|
||||
let timer = ref(null)
|
||||
onMounted(() => {
|
||||
// timer.value = setInterval(()=>{
|
||||
// if(dataInfo[0].num > 300) dataInfo[0].num = 100;
|
||||
// else dataInfo[0].num = dataInfo[0].num + 15;
|
||||
|
||||
// if(dataInfo[1].num < 100) dataInfo[1].num = 500;
|
||||
// else dataInfo[1].num -= 15;
|
||||
|
||||
// if(dataInfo[2].num >200) dataInfo[2].num = 200;
|
||||
// else dataInfo[2].num += 5;
|
||||
// },3000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 70%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.zdwdcdBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 4.567vw;
|
||||
}
|
||||
|
||||
.cntbox {
|
||||
flex: 1 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
|
||||
.text {
|
||||
font-size: 1vw;
|
||||
color: #fff;
|
||||
font-family: "icrosoft YaHei";
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 1.4vw;
|
||||
@include textColor(#f70404, #ffffff);
|
||||
|
||||
span {
|
||||
@include textColor(#ffffff, #ffffff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
87
src/views/largeScreen/cards/zdbgqy_card.vue
Normal file
87
src/views/largeScreen/cards/zdbgqy_card.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<!-- 重点保供企业分布 -->
|
||||
<ul class="flex align-center"
|
||||
style="width: 100%; height: 100%">
|
||||
<li class="itemQs tc"
|
||||
v-for="it in list"
|
||||
:key="it">
|
||||
<div><img :src="it.icon"></div>
|
||||
<div class="text">{{ it.label }}</div>
|
||||
<div class="line"></div>
|
||||
<div class="info">
|
||||
<Statis :count="it.gwqk" :height="4"
|
||||
:len="3" danw="rem"/>
|
||||
</div>
|
||||
<div class="num">（{{ it.dw }}）</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Statis from "@/components/statis.vue";
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick, reactive, ref } from "vue";
|
||||
const list = ref([
|
||||
{ label: '第一产业', gwqk: 3, dw: '家', icon: require('@/assets/images/icon_37.png') },
|
||||
{ label: '第二产业', gwqk: 93, dw: '家', icon: require('@/assets/images/icon_38.png') },
|
||||
{ label: '第三产业', gwqk: 32, dw: '家', icon: require('@/assets/images/icon_39.png') },
|
||||
])
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
.itemQs {
|
||||
flex: 1 0 0;
|
||||
img {
|
||||
width: 2.567vw;
|
||||
}
|
||||
.text {
|
||||
font-size: 1.2vw;
|
||||
font-weight: 600;
|
||||
font-weight: bolder;
|
||||
@include textColor(#03c087, #ffffff);
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 0.208vw auto 0.313vw;
|
||||
width: 3.542vw;
|
||||
height: 0.208vw;
|
||||
background: url("~@/assets/images/icon_27.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 1.042vw;
|
||||
line-height: 1.563vw;
|
||||
font-family: "DigifaceWide";
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: center;
|
||||
font-size: 1.9rem;
|
||||
line-height: 1.25vw;
|
||||
font-family: "DigifaceWide";
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .fp-box li {
|
||||
width: 0.729vw;
|
||||
margin-right: 0.3vw;
|
||||
height: 4rem;
|
||||
span{
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
143
src/views/largeScreen/cards/zdqyqkxq_card copy.vue
Normal file
143
src/views/largeScreen/cards/zdqyqkxq_card copy.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<!-- 重点企业缺口需求 -->
|
||||
<div class="review_box" id="review_box" style="width:100%;height:100%;overflow: hidden" @mouseover="rollStop()" @mouseout="rollStart(60)">
|
||||
<ul id="comment1" class="zdqyqkxqBox noScollLine">
|
||||
<li v-for="(it,indx) in list" :key="indx" class="lineItem flex align-center mb4">
|
||||
<div class="label">
|
||||
<span class="order mr4" :style="{color:indx < 3 ? '#01d0db' : ''}">TOP.{{indx+1}}</span>
|
||||
<img src="@/assets/images/icon_03.png" alt="">
|
||||
<span class="ml4 text one_text_detail" :style="{color:indx < 3 ? '#01d0db' : ''}">{{it.mc}}</span>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="lineOut">
|
||||
<div class="persont" :style="{width:it.persont}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="num">{{it.num}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="comment2" class="zdqyqkxqBox noScollLine"></ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref,defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
data:Object,
|
||||
})
|
||||
const list = ref([
|
||||
{mc:'数控操作技师',persont:'90%',num:1079},
|
||||
{mc:'车工（服装制造）',persont:'80%',num:867},
|
||||
{mc:'应用工程师',persont:'70%',num:804},
|
||||
{mc:'交易业务专员',persont:'60%',num:778},
|
||||
{mc:'产品实施顾问',persont:'50%',num:352},
|
||||
{mc:'印后机长',persont:'40%',num:254},
|
||||
{mc:'研发工程师（电子/机械）',persont:'30%',num:89},
|
||||
{mc:'质量技术员/检验员',persont:'20%',num:73},
|
||||
{mc:'电商运营负责人',persont:'10%',num:51},
|
||||
{mc:'消防运维技术员',persont:'5%',num:17},
|
||||
])
|
||||
const timer = ref(null)
|
||||
onMounted(()=>{
|
||||
roll(60)
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
if(timer.value) clearInterval(timer.value)
|
||||
})
|
||||
// 滚动
|
||||
function roll(t){
|
||||
var ul1 = document.getElementById("comment1");
|
||||
var ul2 = document.getElementById("comment2");
|
||||
var ulbox = document.getElementById("review_box");
|
||||
ul2.innerHTML = ul1.innerHTML;
|
||||
ulbox.scrollTop = 0;
|
||||
rollStart(t);
|
||||
}
|
||||
|
||||
// 开始滚动
|
||||
function rollStart (t){
|
||||
var ul1 = document.getElementById("comment1");
|
||||
var ul2 = document.getElementById("comment2");
|
||||
var ulbox = document.getElementById("review_box");
|
||||
rollStop();
|
||||
timer.value = setInterval(()=>{
|
||||
// 当滚动高度大于列表内容高度时恢复为0
|
||||
if (ulbox.scrollTop >= 204) {
|
||||
ulbox.scrollTop = 0;
|
||||
} else {
|
||||
ulbox.scrollTop++;
|
||||
}
|
||||
}, t);
|
||||
|
||||
}
|
||||
|
||||
// 停止滚动
|
||||
function rollStop (){
|
||||
clearInterval(timer.value);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zdqyqkxqBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 6px 0;
|
||||
box-sizing: border-box;
|
||||
.lineItem{
|
||||
.label{
|
||||
width: 36%;
|
||||
font-family: "DigifaceWide";
|
||||
font-size: 12px;
|
||||
.order{
|
||||
display: inline-block;
|
||||
width: 46px;
|
||||
}
|
||||
.text{
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 54%;
|
||||
height: 12px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid #1e3a44;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.lineOut{
|
||||
width: 100%;
|
||||
height:5px;
|
||||
background: rgba(32, 74, 111, 0.5);
|
||||
.persont {
|
||||
height: 5px;
|
||||
background: linear-gradient(60deg, #187593 0%, #aff1f4 100%);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
&::after{
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: -6px;
|
||||
top: -7px;
|
||||
width: 18px;
|
||||
height: 19px;
|
||||
background: url('~@/assets/images/icon_04.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.num{
|
||||
width: 10%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
153
src/views/largeScreen/cards/zdqyqkxq_card.vue
Normal file
153
src/views/largeScreen/cards/zdqyqkxq_card.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<!-- 重点企业缺口需求 -->
|
||||
<div class="review_box" id="review_box" style="width:100%;height:100%;overflow: hidden" @mouseover="rollStop()"
|
||||
@mouseout="rollStart(60)">
|
||||
<ul id="comment1" class="zdqyqkxqBox noScollLine">
|
||||
<li v-for="(it, indx) in list" :key="indx" class="lineItem flex align-center mb4">
|
||||
<div class="label">
|
||||
<span class="order mr4" :style="{ color: indx < 3 ? '#01d0db' : '' }">TOP.{{ indx + 1 }}</span>
|
||||
<img src="@/assets/images/icon_03.png" alt="">
|
||||
<span class="ml4 text one_text_detail" :style="{ color: indx < 3 ? '#01d0db' : '' }">{{ it.mc }}</span>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="lineOut">
|
||||
<div class="persont" :style="{ width: it.persont }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="num">{{ it.num }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="comment2" class="zdqyqkxqBox noScollLine"></ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
})
|
||||
const list = ref([
|
||||
{ mc: '数控操作技师', persont: '90%', num: 1079 },
|
||||
{ mc: '车工（服装制造）', persont: '80%', num: 867 },
|
||||
{ mc: '应用工程师', persont: '70%', num: 804 },
|
||||
{ mc: '交易业务专员', persont: '60%', num: 778 },
|
||||
{ mc: '产品实施顾问', persont: '50%', num: 352 },
|
||||
{ mc: '印后机长', persont: '40%', num: 254 },
|
||||
{ mc: '研发工程师（电子/机械）', persont: '30%', num: 89 },
|
||||
{ mc: '质量技术员/检验员', persont: '20%', num: 73 },
|
||||
{ mc: '电商运营负责人', persont: '10%', num: 51 },
|
||||
{ mc: '消防运维技术员', persont: '5%', num: 17 },
|
||||
])
|
||||
const timer = ref(null)
|
||||
onMounted(() => {
|
||||
roll(60)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if (timer.value) clearInterval(timer.value)
|
||||
})
|
||||
// 滚动
|
||||
function roll(t) {
|
||||
var ul1 = document.getElementById("comment1");
|
||||
var ul2 = document.getElementById("comment2");
|
||||
var ulbox = document.getElementById("review_box");
|
||||
ul2.innerHTML = ul1.innerHTML;
|
||||
ulbox.scrollTop = 0;
|
||||
rollStart(t);
|
||||
}
|
||||
|
||||
// 开始滚动
|
||||
function rollStart(t) {
|
||||
var ul1 = document.getElementById("comment1");
|
||||
var ul2 = document.getElementById("comment2");
|
||||
var ulbox = document.getElementById("review_box");
|
||||
rollStop();
|
||||
timer.value = setInterval(() => {
|
||||
// 计算滚动临界值
|
||||
const maxScroll = ul1.offsetHeight;
|
||||
if (ulbox.scrollTop >= maxScroll) {
|
||||
ulbox.scrollTop = 0;
|
||||
} else {
|
||||
ulbox.scrollTop++;
|
||||
}
|
||||
}, t);
|
||||
}
|
||||
|
||||
// 停止滚动
|
||||
function rollStop() {
|
||||
clearInterval(timer.value);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zdqyqkxqBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: .375rem 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.lineItem {
|
||||
|
||||
.label {
|
||||
width: 38%;
|
||||
font-size: 0.625vw;
|
||||
|
||||
.order {
|
||||
display: inline-block;
|
||||
width: 2.396vw;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
width: 4.167vw;
|
||||
white-space: nowrap;
|
||||
// font-weight: 600;
|
||||
font-family: "icrosoft YaHei";
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 54%;
|
||||
height: 0.625vw;
|
||||
padding: 0 0.208vw;
|
||||
border: 1px solid #1e3a44;
|
||||
border-radius: 0.208vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.lineOut {
|
||||
width: 100%;
|
||||
height: 0.26vw;
|
||||
background: rgba(32, 74, 111, 0.5);
|
||||
|
||||
.persont {
|
||||
height: 0.26vw;
|
||||
background: linear-gradient(0deg, #187593 0%, #aff1f4 100%);
|
||||
border-radius: 0.521vw;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: -0.313vw;
|
||||
top: -0.365vw;
|
||||
width: 0.938vw;
|
||||
height: 0.99vw;
|
||||
background: url('~@/assets/images/icon_04.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 10%;
|
||||
margin-left: 0.521vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
114
src/views/largeScreen/index.vue
Normal file
114
src/views/largeScreen/index.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="bigScrenn">
|
||||
<!-- 头部 -->
|
||||
|
||||
<Head title="兴蜀数智化驾驶舱"></Head>
|
||||
<!-- 左边展开-关闭按钮 -->
|
||||
<div class="showNeun transition" @click="isOpen_L = !isOpen_L" :style="{ left: isOpen_L ? '23vw' : '0' }"></div>
|
||||
<!-- 左边 -->
|
||||
<div class="asidemodel transition modelImgleft " :style="{ left: isOpen_L ? '1vw' : '-22.369vw' }">
|
||||
<div class="asideHead">
|
||||
<span>产业岗位需求</span>
|
||||
</div>
|
||||
<div class="modelBox ">
|
||||
<Module v-for="(item, idx) in asideMeun.leftMeun" :key="idx" :data="item" :len="asideMeun.leftMeun.length" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中间 -->
|
||||
<CenterModel></CenterModel>
|
||||
|
||||
<!-- 右边展开 - 关闭按钮 -->
|
||||
<div class="showNeun showNeunR transition" @click="isOpen_R = !isOpen_R"
|
||||
:style="{ right: isOpen_R ? '23vw' : '0' }">
|
||||
</div>
|
||||
<!-- 右边 -->
|
||||
<div class="asidemodel asidemodelR transition modelImgright" :style="{ right: isOpen_R ? '1vw' : '-22.369vw' }">
|
||||
<div class="asideHead asideHeadR tr">
|
||||
<span>保供预警体系</span>
|
||||
</div>
|
||||
<div class="modelBox ">
|
||||
<Module v-for="(item, idx) in asideMeun.rightMeun" :key="idx" :data="item" :len="asideMeun.rightMeun.length" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
<HomeDialogInfo v-model="dialogShow" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Head from './layout/headHome.vue'
|
||||
import CenterModel from './layout/centerModel.vue'
|
||||
import Module from "./layout/module.vue";
|
||||
import HomeDialogInfo from "@/components/homeDialogInfo/index.vue";
|
||||
import openWebSocket from "@/utils/webSocket.js";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, onBeforeUnmount } from "vue";
|
||||
import { fa } from 'element-plus/es/locale.mjs';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const isOpen_L = ref(true); //展开菜单-左边
|
||||
const isOpen_R = ref(true); //展开菜单 - 右边
|
||||
const dialogShow = ref(false);
|
||||
const asideMeun = reactive({
|
||||
leftMeun: [
|
||||
{ mkMc: "产业产值、岗位缺口趋势", mkLydz: "cycz_gwqk_card" },
|
||||
{ mkMc: "重点保供企业分布", mkLydz: "zdbgqy_card" },
|
||||
{ mkMc: "缺口岗位TOP10", mkLydz: "zdqyqkxq_card" },
|
||||
],
|
||||
rightMeun: [
|
||||
{ mkMc: "用工供需风险预警", mkLydz: "yggxfxyj_card" },
|
||||
{ mkMc: "劳务市场异常预警", mkLydz: "lwscycyj_card" },
|
||||
{ mkMc: "合规监管预警", mkLydz: "hgjgyj_card" },
|
||||
{ mkMc: "服务质量预警", mkLydz: "fwzlyj_card" }
|
||||
],
|
||||
})
|
||||
onMounted(() => {
|
||||
getWebSocketData()
|
||||
})
|
||||
// 获取WebSocket数据
|
||||
function getWebSocketData() {
|
||||
let dws = openWebSocket.getInstance();
|
||||
dws.connect((res) => {
|
||||
// 接收发送消息
|
||||
dws.ws.onmessage = (e) => {
|
||||
let dataInfo = JSON.parse(e.data).data;
|
||||
console.log(dataInfo, 'dataInfo');
|
||||
if (dataInfo == 1) {
|
||||
dialogShow.value = true;
|
||||
} else {
|
||||
dialogShow.value = false;
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.transition {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
// .modelImgleft{
|
||||
// background: url('~@/assets/images/left.png') no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
// .modelImgright{
|
||||
// background: url('~@/assets/images/right.png') no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
// .modelCopy{
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// position: relative;
|
||||
// .thewe{
|
||||
// transform: perspective(7.25vw) rotateY(-2deg) rotate(-5deg);
|
||||
// position: absolute;
|
||||
// left: -6px;
|
||||
// width: 100%;
|
||||
// bottom: 16px;
|
||||
// height: calc((100% / 3) - 60px);
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
348
src/views/largeScreen/layout/centerModel.vue
Normal file
348
src/views/largeScreen/layout/centerModel.vue
Normal file
@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<div class="contantHome">
|
||||
<div class="countTop">
|
||||
<!-- 中间统计 -->
|
||||
<ul class="centerBox">
|
||||
<li class="center-item" v-for="(it,idx) in centerList" :key="idx">
|
||||
<div class="label">{{it.label}}</div>
|
||||
<div class="count">
|
||||
<Statis :count="it.num" :height="86" :len="2" bg="countBg" />
|
||||
<span class="num">( {{it.dw}} )</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 边缘统计 -->
|
||||
<div class="num_bj" :class="'num_bj'+idx" v-for="(it,idx) in list" :key="idx">
|
||||
<div class="by_title">{{it.label}}</div>
|
||||
<div class="by_num">{{it.num}}</div>
|
||||
<div class="by_dw">{{it.dw}}</div>
|
||||
</div>
|
||||
<!-- 按钮 -->
|
||||
<div class="btn-home"></div>
|
||||
<!-- 评语 -->
|
||||
<div class="home-py">
|
||||
<div class="tc"><img src="@/assets/images/icon_02.png" alt=""></div>
|
||||
<div class="tc text-one"><span>2023年获评</span></div>
|
||||
<div class="tc text-two"><span>成都市级产业园</span></div>
|
||||
<div class="tc text-three"><span>崇州市人力资源</span></div>
|
||||
<div class="tc text-three"><span>服务产业园</span></div>
|
||||
</div>
|
||||
<!-- 底部按钮 -->
|
||||
<ul class="homeFoot">
|
||||
<li v-for="(it,idx) in footBtn" :key="idx" class="absolute homeFootItem" :class="'homeFootItem'+idx">
|
||||
<img class="footImg" :src="it.icon" alt="">
|
||||
<div class="tc footlabel f16">{{it.label}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import Statis from "@/components/statis.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance ,onBeforeUnmount} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const list = reactive([
|
||||
{ label:'重点企业',num:128,dw:'家' },
|
||||
{ label:'入驻机构',num:17,dw:'家' },
|
||||
{ label:'合作区县数量',num:19,dw:'个' },
|
||||
{ label:'经纪人数量',num:118,dw:'个' },
|
||||
{ label:'岗位',num:13,dw:'万个' },
|
||||
{ label:'用户总数',num:28,dw:'万人' },
|
||||
{ label:'合作院校',num:36,dw:'家' },
|
||||
{ label:'链主企业',num:8,dw:'家' },
|
||||
{ label:'培训课程',num:17,dw:'期' },
|
||||
{ label:'技能认证',num:711,dw:'个' },
|
||||
|
||||
])
|
||||
const centerList = reactive([
|
||||
{label:'岗位总数',num:13,dw:'万个'},
|
||||
{label:'就业人员',num:10,dw:'万人'},
|
||||
])
|
||||
|
||||
const footBtn = reactive([
|
||||
{label:'智能客服呼叫中心',width:120,icon:require('@/assets/images/icon_12.png') },
|
||||
// {label:'区域合作',width:130,icon:require('@/assets/images/icon_13.png') },
|
||||
{label:'蓝领直招中心',width:130,icon:require('@/assets/images/icon_14.png') },
|
||||
{label:'综合服务一体机',width:130,icon:require('@/assets/images/icon_15.png') },
|
||||
{label:'人力资源共享中心',width:140,icon:require('@/assets/images/icon_16.png') },
|
||||
{label:'兴蜀来了APP',width:130,icon:require('@/assets/images/icon_17.png') },
|
||||
{label:'跨企业培训中心',width:130,icon:require('@/assets/images/icon_18.png') },
|
||||
{label:'智库平台',width:120,icon:require('@/assets/images/icon_19.png') },
|
||||
])
|
||||
onMounted(()=>{
|
||||
// setInterval(()=>{
|
||||
// centerList[0].num +=2;
|
||||
// centerList[1].num +=1;
|
||||
// },5000)
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(0, $color1 0%, $color2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
// 中间
|
||||
.contantHome{
|
||||
position: relative;
|
||||
top: 5.208vw;
|
||||
left: 50%;
|
||||
width: 43.958vw;
|
||||
transform: translateX(-50%);
|
||||
height: calc(100vh - 6.25vw);
|
||||
z-index: 99;
|
||||
.countTop{
|
||||
position: relative;
|
||||
width: 43.958vw;
|
||||
height: 43.75vw;
|
||||
top: -3.906vw;
|
||||
background: url('~@/assets/images/home_center_new.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.centerBox{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-58%);
|
||||
.center-item{
|
||||
.label{
|
||||
text-align: center;
|
||||
font-size: 1.042vw;
|
||||
// font-family: "HANYILINGXINTIJIAN";
|
||||
line-height: 2.604vw;
|
||||
@include textColor(#00ccff,#ffffff)
|
||||
}
|
||||
.count{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.num{
|
||||
font-size: 0.938vw;
|
||||
// font-family: "DigifaceRegular";
|
||||
margin-left: 0.208vw;
|
||||
@include textColor(rgba(0 ,61 ,99,0.2),#ffffff)
|
||||
}
|
||||
}
|
||||
::v-deep .countBg{
|
||||
width: 1.563vw;
|
||||
height: 2.396vw;
|
||||
& > span {
|
||||
font-size: 1.563vw;
|
||||
width: 1.458vw;
|
||||
height: 2.24vw;
|
||||
line-height: 2.24vw;
|
||||
background: url('~@/assets/images/bg_01.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
color: #0DE0FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-home{
|
||||
position: absolute;
|
||||
top: 26.042vw;
|
||||
left: 54%;
|
||||
transform: translateX(-50%);
|
||||
width: 20.313vw;
|
||||
height: 2.448vw;
|
||||
background: url('~@/assets/images/bg_02.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.home-py{
|
||||
position: absolute;
|
||||
top: 28.646vw;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.tc{
|
||||
margin: 0 auto;
|
||||
img{
|
||||
width: 2.865vw;
|
||||
}
|
||||
}
|
||||
.text-one{
|
||||
font-size: 1.563vw;
|
||||
font-family: "YSBTH";
|
||||
letter-spacing: 0.104vw;
|
||||
span{
|
||||
background: linear-gradient(0deg,#ffae01 10%,#ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.text-two{
|
||||
font-size: 1.927vw;
|
||||
font-family: "YSBTH";
|
||||
letter-spacing: 0.104vw;
|
||||
span{
|
||||
background: linear-gradient(0deg,#fd7c03 0%,#FFFFFF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.text-three{
|
||||
font-size: 1.198vw;
|
||||
line-height: 1.979vw;
|
||||
letter-spacing: 0.104vw;
|
||||
font-family: "YSBTH";
|
||||
span{
|
||||
background: linear-gradient(0deg,#00ccff 0%,#FFFFFF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.num_bj{
|
||||
position: absolute;
|
||||
.by_title{
|
||||
font-size: 0.938vw;
|
||||
font-family: "icrosoft YaHei";
|
||||
}
|
||||
.by_num{
|
||||
text-align: center;
|
||||
margin-top: 1.563vw;
|
||||
color: #00FFA2;
|
||||
font-size: 1.354vw;
|
||||
}
|
||||
.by_dw{
|
||||
text-align: center;
|
||||
font-size: 0.625vw;
|
||||
margin-top: 0.208vw;
|
||||
color: #0DE0FF;
|
||||
font-family: "icrosoft YaHei";
|
||||
}
|
||||
}
|
||||
.num_bj0{
|
||||
top: 25.313vw;
|
||||
left: 7.969vw;
|
||||
}
|
||||
.num_bj1{
|
||||
top: 18.49vw;
|
||||
left: 2.708vw;
|
||||
}
|
||||
.num_bj2{
|
||||
top: 8.646vw;
|
||||
left: 2.24vw;
|
||||
}
|
||||
.num_bj3{
|
||||
top: 2.76vw;
|
||||
left: 8.125vw;
|
||||
}
|
||||
.num_bj4{
|
||||
top: -0.469vw;
|
||||
left: 16.771vw;
|
||||
}
|
||||
.num_bj5{
|
||||
top: -0.156vw;
|
||||
left: 24.271vw;
|
||||
}
|
||||
.num_bj6{
|
||||
top: 3.438vw;
|
||||
left: 31.615vw;
|
||||
}
|
||||
.num_bj7{
|
||||
top: 9.479vw;
|
||||
left: 36.667vw;
|
||||
}
|
||||
.num_bj8{
|
||||
top: 17.708vw;
|
||||
left: 37.344vw;
|
||||
}
|
||||
.num_bj9{
|
||||
top: 25.26vw;
|
||||
left: 33.594vw;
|
||||
}
|
||||
// 底部
|
||||
.homeFoot{
|
||||
position:absolute ;
|
||||
bottom: 0;
|
||||
.footlabel{
|
||||
font-size: 1.042vw;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
@include textColor(#00ccff,#ffffff)
|
||||
}
|
||||
.homeFootItem{
|
||||
font-family: "icrosoft YaHei";
|
||||
font-size: 0.625vw;
|
||||
.footImg{
|
||||
width: 6.25vw;
|
||||
}
|
||||
.footlabel{
|
||||
width: 4.688vw;
|
||||
white-space: pre-wrap;
|
||||
margin-left: 0.521vw;
|
||||
}
|
||||
}
|
||||
.homeFootItem0{
|
||||
bottom: 3.49vw;
|
||||
left: -6.25vw;
|
||||
.footlabel{
|
||||
width: 10.417vw;
|
||||
white-space: pre-wrap;
|
||||
margin-left: -2.083vw;
|
||||
}
|
||||
}
|
||||
.homeFootItem1{
|
||||
bottom: 6.406vw;
|
||||
left: 1.823vw;
|
||||
.footlabel{
|
||||
font-size: 1.25vw;
|
||||
width: 8.125vw;
|
||||
margin-left: -0.729vw;
|
||||
white-space: nowrap;
|
||||
@include textColor(#ED860B,#ffffff);
|
||||
}
|
||||
}
|
||||
.homeFootItem2{
|
||||
bottom: 0.573vw;
|
||||
left: 10vw;
|
||||
.footlabel{
|
||||
width: 8.125vw;
|
||||
font-size: 1.042vw;
|
||||
margin-left: -1.458vw;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.homeFootItem3{
|
||||
bottom: -0.521vw;
|
||||
left: 18.49vw;
|
||||
.footlabel{
|
||||
font-size: 1.25vw;
|
||||
width: 10.02vw;
|
||||
margin-left: -1.421vw;
|
||||
@include textColor(#ff8c00,#ffffff);
|
||||
}
|
||||
}
|
||||
.homeFootItem4{
|
||||
bottom: 0.573vw;
|
||||
left: 29.115vw;
|
||||
.footlabel{
|
||||
width: 6.771vw;
|
||||
margin-left: -0.521vw;
|
||||
}
|
||||
}
|
||||
.homeFootItem5{
|
||||
bottom: 6.25vw;
|
||||
left: 35.885vw;
|
||||
.footlabel{
|
||||
width: 7.813vw;
|
||||
margin-left: -0.521vw;
|
||||
@include textColor(#ff8c00,#ffffff);
|
||||
}
|
||||
}
|
||||
.homeFootItem6{
|
||||
bottom: 4.844vw;
|
||||
left: 44.323vw;
|
||||
.footlabel{
|
||||
margin-left: 0.521vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/views/largeScreen/layout/head.vue
Normal file
66
src/views/largeScreen/layout/head.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="homeHead">
|
||||
<!-- <div class="left_Head">
|
||||
<el-icon style="top:5px" color="#0DE7EE" :size="20"><Cloudy/></el-icon>
|
||||
<span class="head_text ml5 mr5">阴</span>
|
||||
<span class="head_text ml5 mr5">空气质量：良</span>
|
||||
<span class="head_text ml5">8 ~ 13°C</span>
|
||||
</div> -->
|
||||
<div class="center_head" :text="props.title">
|
||||
<span>{{props.title}}</span>
|
||||
</div>
|
||||
<!-- <div class="right_head">
|
||||
<img src="@/assets/images/icon_01.png" alt="" class="setting">
|
||||
<span class="head_text ml5 mr5">{{ hour + ":" + minute + ":" + second }}</span>
|
||||
<span class="head_text ml5 mr5">{{weekenday}} </span>
|
||||
<span class="head_text ml5">{{ datatime }}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { timeValidate ,weekValidate} from "@/utils/tools.js";
|
||||
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 minute = ref("00"); //分
|
||||
const second = ref("00"); //秒
|
||||
const hour = ref("00"); //时
|
||||
const day = ref();
|
||||
const weekenday = weekValidate() //星期几
|
||||
const datatime = ref(timeValidate(null,'ymd'));
|
||||
const timersfm = ref(null);
|
||||
const props = defineProps({
|
||||
title:{
|
||||
type:String,
|
||||
default:'兴蜀数智化驾驶舱'
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
timersfm.value = setInterval(() => {
|
||||
CurrentTime();
|
||||
}, 1000);
|
||||
});
|
||||
// 获取时分秒
|
||||
function CurrentTime() {
|
||||
const date = new Date();
|
||||
hour.value = date.getHours();
|
||||
minute.value = date.getMinutes();
|
||||
second.value = date.getSeconds();
|
||||
day.value = day.value < 10 ? "0" + day.value : day.value;
|
||||
hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
|
||||
minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
|
||||
second.value = second.value < 10 ? "0" + second.value : second.value;
|
||||
}
|
||||
onUnmounted(() => {
|
||||
clearInterval(timersfm.value)
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.head_text{
|
||||
font-size: 1.8vw;
|
||||
}
|
||||
</style>
|
||||
66
src/views/largeScreen/layout/headHome.vue
Normal file
66
src/views/largeScreen/layout/headHome.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="homeHeadsmall">
|
||||
<div class="left_Head">
|
||||
<el-icon style="top:5px" color="#0DE7EE" :size="20"><Cloudy/></el-icon>
|
||||
<span class="head_text ml5 mr5">阴</span>
|
||||
<span class="head_text ml5 mr5">空气质量：良</span>
|
||||
<span class="head_text ml5">8 ~ 13°C</span>
|
||||
</div>
|
||||
<div class="center_head" :text="props.title">
|
||||
<span>{{props.title}}</span>
|
||||
</div>
|
||||
<div class="right_head">
|
||||
<img src="@/assets/images/icon_01.png" alt="" class="setting">
|
||||
<span class="head_text ml5 mr5">{{ hour + ":" + minute + ":" + second }}</span>
|
||||
<span class="head_text ml5 mr5">{{weekenday}} </span>
|
||||
<span class="head_text ml5">{{ datatime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { timeValidate ,weekValidate} from "@/utils/tools.js";
|
||||
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 minute = ref("00"); //分
|
||||
const second = ref("00"); //秒
|
||||
const hour = ref("00"); //时
|
||||
const day = ref();
|
||||
const weekenday = weekValidate() //星期几
|
||||
const datatime = ref(timeValidate(null,'ymd'));
|
||||
const timersfm = ref(null);
|
||||
const props = defineProps({
|
||||
title:{
|
||||
type:String,
|
||||
default:'兴蜀数智化驾驶舱'
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
timersfm.value = setInterval(() => {
|
||||
CurrentTime();
|
||||
}, 1000);
|
||||
});
|
||||
// 获取时分秒
|
||||
function CurrentTime() {
|
||||
const date = new Date();
|
||||
hour.value = date.getHours();
|
||||
minute.value = date.getMinutes();
|
||||
second.value = date.getSeconds();
|
||||
day.value = day.value < 10 ? "0" + day.value : day.value;
|
||||
hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
|
||||
minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
|
||||
second.value = second.value < 10 ? "0" + second.value : second.value;
|
||||
}
|
||||
onUnmounted(() => {
|
||||
clearInterval(timersfm.value)
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.head_text{
|
||||
font-size: 2rem;
|
||||
}
|
||||
</style>
|
||||
73
src/views/largeScreen/layout/module.vue
Normal file
73
src/views/largeScreen/layout/module.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2024-12-04 17:01:59
|
||||
* @LastEditTime: 2024-12-09 18:36:37
|
||||
* @LastEditors: your name
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \tq_web_gd\src\views\largeScreen\layout\module.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="asideItem" :class="props.data.class" :style="changeHeight()">
|
||||
<div class="topFlex">
|
||||
<span class="title">{{ props.data.mkMc}}</span>
|
||||
</div>
|
||||
<div class="aside-content-all">
|
||||
<component :is="mkModel" :data="props.data"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, defineProps, watch, defineAsyncComponent } from "vue";
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
len: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
});
|
||||
const mkModel = ref(null)
|
||||
const modelList = ref([]);
|
||||
watch(() => props.data,(val) => {
|
||||
|
||||
if(!val.mkLydz) return;
|
||||
mkModel.value = defineAsyncComponent(() => import(`@/views/largeScreen/cards/${val.mkLydz}.vue`));
|
||||
},{ immediate: true });
|
||||
|
||||
// 自适应高度
|
||||
const changeHeight = () => {
|
||||
if (props.len) {
|
||||
let num = 100 / props.len;
|
||||
return `height:calc(${num}% - 5px)`;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.topFlex {
|
||||
width: 100%;
|
||||
height: 1.823vw;
|
||||
line-height: 2.083vw;
|
||||
padding-left: 1.719vw;
|
||||
background: url('~@/assets/images/bg_10.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.title {
|
||||
font-family: "icrosoft YaHei";
|
||||
font-size: 1.2vw;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
background: linear-gradient(0deg, #21a5e1 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.aside-content-all {
|
||||
height: calc(100% - 1.823vw);
|
||||
padding: 0 6px 0 4px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
background: #082f74;
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
213
src/views/portraitScreen/components/Jgrzcgl.vue
Normal file
213
src/views/portraitScreen/components/Jgrzcgl.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<!-- 技能岗位薪资酬对比 -->
|
||||
<div ref="gwxcdbEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const gwxcdbEcharts = ref()
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
color: ["#00DFE3", "#00ABFB", "#21F9A3", "#F9C521"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ["技能岗位需求数", '非技能岗位需求数'],
|
||||
show: true,
|
||||
right: 10,
|
||||
top: 10,
|
||||
textStyle: { color: "#fff", fontSize: 32 },
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
right: "10%",
|
||||
left: "10%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
show: true,
|
||||
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 30,
|
||||
interval: 0
|
||||
},
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 30,
|
||||
interval: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,36,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "技能岗位需求数",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [6700, 7800, 10100, 11010, 13200]
|
||||
},
|
||||
{
|
||||
name: "非技能岗位需求数",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [18600, 17100, 14200, 13100, 13200]
|
||||
},
|
||||
{
|
||||
name: "增幅",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [20, 20, 20]
|
||||
},
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(gwxcdbEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
66
src/views/portraitScreen/components/Jgsl.vue
Normal file
66
src/views/portraitScreen/components/Jgsl.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<!-- 机构数量 -->
|
||||
<ul>
|
||||
<li v-for="item in dataList" :key="item">
|
||||
<div class="name_text">{{ item.name }}</div>
|
||||
<div class="num">{{ item.num }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jgslEcharts = ref();
|
||||
const dataList = ref([
|
||||
{
|
||||
name: '招聘机构',
|
||||
num: 17
|
||||
},
|
||||
{
|
||||
name: '猎头公司',
|
||||
num: 0
|
||||
},
|
||||
{
|
||||
name: '培训机构',
|
||||
num: 5
|
||||
},
|
||||
{
|
||||
name: '劳务派遣',
|
||||
num: 2
|
||||
}
|
||||
])
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
height: 450px;
|
||||
display: flex;
|
||||
font-family: "YSBTH";
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.name_text {
|
||||
font-size: 2.2vw;
|
||||
width: 100%;
|
||||
color: aqua;
|
||||
}
|
||||
.num{
|
||||
font-size: 2vw;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
src/views/portraitScreen/components/csgf.vue
Normal file
115
src/views/portraitScreen/components/csgf.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<!-- 失业率 -->
|
||||
<div ref="sylEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const sylEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "20px",
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
fontSize: 40,
|
||||
interval: 0
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["招聘机构", "猎头公司", "培训机构", "劳务派遣公司"],
|
||||
axisLine: { show: true, lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: "#21343e" }
|
||||
},
|
||||
axisLabel: {
|
||||
// rotate: 20,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 40,
|
||||
interval: 0
|
||||
},
|
||||
axisTick: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [25, 60, 75, 87],
|
||||
type: "bar",
|
||||
barWidth: 60,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top', // 将标签显示在柱状图的顶部
|
||||
color: "#fff",
|
||||
formatter: '{c} %' // {c}表示数据值，{d}%表示百分比，计算方式为 (c / 总和) * 100%
|
||||
},
|
||||
itemStyle: {
|
||||
type: "bar",
|
||||
color: function (params) {
|
||||
switch (params.dataIndex) {
|
||||
case 0:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#eb2b2b" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 1:
|
||||
case 2:
|
||||
case 3:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#ff9500" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(sylEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
210
src/views/portraitScreen/components/cygjbl.vue
Normal file
210
src/views/portraitScreen/components/cygjbl.vue
Normal file
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="seconent">
|
||||
<div class="inbox flex space-between">
|
||||
<ul class="inLeft items">
|
||||
<li class="child left_child" v-for="it in data.left" :key="it">
|
||||
<div class="text">{{ it.label }}</div>
|
||||
<div v-if="it.label == '人才供需比例'">
|
||||
<div class="num">需求人力:2452人</div>
|
||||
<div class="num">供应人力:4752人</div>
|
||||
</div>
|
||||
<div v-else class="num">{{ it.per }}</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="inright items tc">
|
||||
<li class="child relative right_child" v-for="it in data.right" :key="it">
|
||||
<div class="text">{{ it.label }}</div>
|
||||
<div class="num">{{ it.per }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="incenter items">
|
||||
<div class="hedbt"><span class="text">产业求人倍率</span></div>
|
||||
<ul class="ctbox flex">
|
||||
<li>第一产业：1.2</li>
|
||||
<li>第二产业：1.6</li>
|
||||
<li>第三产业：1.4</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
const data = reactive({
|
||||
left: [
|
||||
{ label: "人才供需比例", per: "12%" },
|
||||
{ label: "技能岗位占比", per: "80%" },
|
||||
{ label: "行业需求增幅", per: "5.6%" }
|
||||
],
|
||||
right: [
|
||||
{ label: "总体就业率", per: "78.3%" },
|
||||
{ label: "总体失业率", per: "23.1%" },
|
||||
{ label: "人才流失比例", per: "34.2%" }
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 70%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.seconent {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 2vw;
|
||||
|
||||
|
||||
.items {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
|
||||
.child {
|
||||
height: 170px;
|
||||
background-size: 100% 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.left_child {
|
||||
// width: 439px;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.text {
|
||||
margin-left: 5vw;
|
||||
margin-top: -24px;
|
||||
white-space: nowrap;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
|
||||
.num {
|
||||
margin-left: 5vw;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
font-size: 1.6vw;
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-left: 12vw;
|
||||
background: url("~@/assets/images/ztjyl.png") no-repeat;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
background: url("~@/assets/images/rclsl.png") no-repeat;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
margin-left: 12vw;
|
||||
background: url("~@/assets/images/ztsyl.png") no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.right_child {
|
||||
width: 500px;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.text {
|
||||
margin-right: 4vw;
|
||||
margin-top: -24px;
|
||||
white-space: nowrap;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
|
||||
.num {
|
||||
margin-right: 5vw;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
font-size: 1.6vw;
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-right: 12vw;
|
||||
background: url("~@/assets/images/hyxqzf.png") no-repeat right center;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
background: url("~@/assets/images/jngw.png") no-repeat right center;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
margin-right: 12vw;
|
||||
background: url("~@/assets/images/rcxq.png") no-repeat right center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inLeft,
|
||||
.inright {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inLeft {
|
||||
// margin-left: -2vw;
|
||||
}
|
||||
|
||||
.inright {
|
||||
margin-left: 25vw;
|
||||
|
||||
.num {
|
||||
margin-left: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ohher {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 162px;
|
||||
font-family: "YSBTH";
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.incenter {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 73%;
|
||||
left: 50%;
|
||||
transform: translateX(-54%);
|
||||
width: 60%;
|
||||
|
||||
.hedbt {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.text {
|
||||
white-space: nowrap;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
margin-left: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.ctbox {
|
||||
justify-content: space-around;
|
||||
padding-left: 30px;
|
||||
font-size: 3vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
83
src/views/portraitScreen/components/cygxfx.vue
Normal file
83
src/views/portraitScreen/components/cygxfx.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<!-- 产业供需分析 -->
|
||||
<ul>
|
||||
<li v-for="item in dataList" :key="item">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="name_text">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="cont_text">
|
||||
生产总值<br />{{ item.sczz }}亿
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="cont_text">
|
||||
岗位需求<br />{{ item.gwxq }}个
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="cont_text">
|
||||
供给人数<br />{{ item.gjrs }}人
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick, ref } from "vue";
|
||||
const dataList = ref([
|
||||
{
|
||||
name: '第一产业',
|
||||
sczz: 36.75,
|
||||
gwxq: 5477,
|
||||
gjrs: 5525
|
||||
},
|
||||
{
|
||||
name: '第二产业',
|
||||
sczz: 240.9,
|
||||
gwxq: 3176,
|
||||
gjrs: 5525
|
||||
},
|
||||
{
|
||||
name: '第三产业',
|
||||
sczz: 232.79,
|
||||
gwxq: 3050,
|
||||
gjrs: 5525
|
||||
}
|
||||
])
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
font-family: "YSBTH";
|
||||
|
||||
li {
|
||||
height: 4.1vw;
|
||||
|
||||
.cont_text {
|
||||
font-size: 1.6vw;
|
||||
}
|
||||
}
|
||||
|
||||
.name_text {
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-row {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
206
src/views/portraitScreen/components/ghyxqzf.vue
Normal file
206
src/views/portraitScreen/components/ghyxqzf.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<!-- 供需技能匹配分析 -->
|
||||
<div ref="ghyxqEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted,ref , nextTick } from "vue";
|
||||
const ghyxqEcharts = ref()
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
color: ["#00DFE3", "#00ABFB", "#21F9A3", "#F9C521"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ["去年同期",'今年年同期','增幅'],
|
||||
show: true,
|
||||
right: 10,
|
||||
top: 10,
|
||||
textStyle: { color: "#fff" },
|
||||
},
|
||||
grid: {
|
||||
top: "24%",
|
||||
right: "10%",
|
||||
left: "10%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
show: true,
|
||||
data: ['制造业','信息技术业','建筑业'],
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick:{
|
||||
show:false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,36,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "去年同期",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [20,40,53]
|
||||
},
|
||||
{
|
||||
name: "今年年同期",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [30,50,53]
|
||||
},
|
||||
{
|
||||
name: "增幅",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [20,20,20]
|
||||
},
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(ghyxqEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
118
src/views/portraitScreen/components/gjgrzmyd copy.vue
Normal file
118
src/views/portraitScreen/components/gjgrzmyd copy.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<!-- 供需技能匹配分析 -->
|
||||
<div id="gjgrzmydEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick } from "vue";
|
||||
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
const lineChartFn = (val) => {
|
||||
var myChart = echarts.init(document.getElementById("gjgrzmydEcharts"));
|
||||
var option = {
|
||||
// legend: {
|
||||
// show: true,
|
||||
// right: 10,
|
||||
// top: 10,
|
||||
// textStyle: { color: "#fff" },
|
||||
// data: ["总岗位数量", "需求技能岗位数量"]
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: { type: "shadow" }
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
right: "10%",
|
||||
left: "14%",
|
||||
bottom: "12%"
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 40,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
data: ["装备制造业", "电子信息产业",'航空航天产业','新能源产业','生物科技与医疗健康产业'],
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,36,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "总岗位数量",
|
||||
type: "bar",
|
||||
stack:'total',
|
||||
data: [10000, 6500, 3000,2500,1500],
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#7d792e" },
|
||||
{ offset: 1, color: "#f1c515" }
|
||||
],false),
|
||||
borderColor:new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset:1,color:'#f1c515'},
|
||||
{ offset:1, color:'#f1c515'}
|
||||
],false),
|
||||
shadowColor: "#f1c515",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
myChart.on("click", function (params) {});
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
118
src/views/portraitScreen/components/gjgrzmyd.vue
Normal file
118
src/views/portraitScreen/components/gjgrzmyd.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<!-- 供需技能匹配分析 -->
|
||||
<div id="gjgrzmydEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick } from "vue";
|
||||
import { rotate } from "ol/transform";
|
||||
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
const lineChartFn = (val) => {
|
||||
var myChart = echarts.init(document.getElementById("gjgrzmydEcharts"));
|
||||
var option = {
|
||||
// legend: {
|
||||
// show: true,
|
||||
// right: 10,
|
||||
// top: 10,
|
||||
// textStyle: { color: "#fff" },
|
||||
// data: ["总岗位数量", "需求技能岗位数量"]
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: { type: "shadow" }
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
right: "10%",
|
||||
left: "35%",
|
||||
bottom: "12%"
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
rotate:0,
|
||||
fontSize: 51,
|
||||
interval: 0
|
||||
},
|
||||
data: ["装备制造业", "电子信息产业", '航空航天产业', '新能源产业', '生物科技与医疗健康'],
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,36,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "总岗位数量",
|
||||
type: "bar",
|
||||
stack: 'total',
|
||||
data: [10000, 6500, 3000, 2500, 1500],
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#7d792e" },
|
||||
{ offset: 1, color: "#f1c515" }
|
||||
], false),
|
||||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 1, color: '#f1c515' },
|
||||
{ offset: 1, color: '#f1c515' }
|
||||
], false),
|
||||
shadowColor: "#f1c515",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
myChart.on("click", function (params) { });
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
75
src/views/portraitScreen/components/glrq.vue
Normal file
75
src/views/portraitScreen/components/glrq.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<!-- 机构数量 -->
|
||||
<ul class="mr40">
|
||||
<li v-for="item in dataList" :key="item">
|
||||
<div class="name_text">{{ item.name }}</div>
|
||||
<div class="num">{{ item.num }}%</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jgslEcharts = ref();
|
||||
const dataList = ref([
|
||||
{
|
||||
name: '院校毕业生',
|
||||
num: 78
|
||||
},
|
||||
{
|
||||
name: '就业困难人群',
|
||||
num: 45
|
||||
},
|
||||
|
||||
{
|
||||
name: '退役军人',
|
||||
num: 78
|
||||
},
|
||||
{
|
||||
name: '失业人群',
|
||||
num: 72
|
||||
},
|
||||
{
|
||||
name: '残疾人',
|
||||
num: 34
|
||||
},
|
||||
{
|
||||
name: '其他人群',
|
||||
num: 65
|
||||
}
|
||||
])
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
font-size: 36px;
|
||||
height: 320px;
|
||||
display: flex;
|
||||
font-family: "YSBTH";
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.name_text {
|
||||
font-size: 2vw;
|
||||
width: 100%;
|
||||
color: skyblue;
|
||||
}
|
||||
.num{
|
||||
width: 100%;
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
206
src/views/portraitScreen/components/gwxzdb.vue
Normal file
206
src/views/portraitScreen/components/gwxzdb.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<!-- 技能岗位薪资酬对比 -->
|
||||
<div ref="gwxcdbEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted,ref , nextTick } from "vue";
|
||||
const gwxcdbEcharts = ref()
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
color: ["#00DFE3", "#00ABFB", "#21F9A3", "#F9C521"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ["技能岗位",'非技能岗位'],
|
||||
show: true,
|
||||
right: 10,
|
||||
top: 10,
|
||||
textStyle: { color: "#fff" },
|
||||
},
|
||||
grid: {
|
||||
top: "24%",
|
||||
right: "10%",
|
||||
left: "10%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
show: true,
|
||||
data: ['A岗位','B岗位','C岗位'],
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick:{
|
||||
show:false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,36,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "技能岗位",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [20,40,53]
|
||||
},
|
||||
{
|
||||
name: "非技能岗位",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [30,50,53]
|
||||
},
|
||||
{
|
||||
name: "增幅",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [20,20,20]
|
||||
},
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(gwxcdbEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
158
src/views/portraitScreen/components/gxjnppfx.vue
Normal file
158
src/views/portraitScreen/components/gxjnppfx.vue
Normal file
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<!-- 重点企业缺口需求 -->
|
||||
<div class="review_box" id="review" @mouseover="rollStop()" @mouseout="rollStart(60)">
|
||||
<ul id="comment1" class="zdqyqkxqBox noScollLine">
|
||||
<li v-for="(it, indx) in list" :key="indx" class="lineItem flex align-center mb4">
|
||||
<div class="label">
|
||||
<span class="order mr4" :style="{ color: indx < 3 ? '#01d0db' : '' }">TOP.{{ indx + 1 }}</span>
|
||||
<img class="ml20 mr10" src="@/assets/images/icon_03.png" alt="">
|
||||
<span class="ml4 text one_text_detail" :style="{ color: indx < 3 ? '#01d0db' : '' }">{{ it.mc }}</span>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="lineOut">
|
||||
<div class="persont" :style="{ width: it.persont }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="num">{{ it.num }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="comment2" class="zdqyqkxqBox noScollLine"></ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
})
|
||||
const list = ref([
|
||||
{ mc: '数控操作技师', persont: '90%', num: 1079 },
|
||||
{ mc: '车工（服装制造）', persont: '80%', num: 867 },
|
||||
{ mc: '应用工程师', persont: '70%', num: 804 },
|
||||
{ mc: '交易业务专员', persont: '60%', num: 778 },
|
||||
{ mc: '产品实施顾问', persont: '50%', num: 352 },
|
||||
])
|
||||
const timer = ref(null)
|
||||
onMounted(() => {
|
||||
// roll(60)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if (timer.value) clearInterval(timer.value)
|
||||
})
|
||||
// 滚动
|
||||
function roll(t) {
|
||||
var ul1 = document.getElementById("comment1");
|
||||
var ul2 = document.getElementById("comment2");
|
||||
var ulbox = document.getElementById("review");
|
||||
ul2.innerHTML = ul1.innerHTML;
|
||||
ulbox.scrollTop = 0;
|
||||
rollStart(t);
|
||||
}
|
||||
|
||||
// 开始滚动
|
||||
function rollStart(t) {
|
||||
var ul1 = document.getElementById("comment1");
|
||||
var ul2 = document.getElementById("comment2");
|
||||
var ulbox = document.getElementById("review");
|
||||
rollStop();
|
||||
timer.value = setInterval(() => {
|
||||
// 当滚动高度大于列表内容高度时恢复为0
|
||||
if (ulbox.scrollTop >= 204) {
|
||||
ulbox.scrollTop = 0;
|
||||
} else {
|
||||
ulbox.scrollTop++;
|
||||
}
|
||||
}, t);
|
||||
|
||||
}
|
||||
|
||||
// 停止滚动
|
||||
function rollStop() {
|
||||
clearInterval(timer.value);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.review_box {
|
||||
// padding: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zdqyqkxqBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// overflow-y: auto;
|
||||
// padding: 6px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.lineItem {
|
||||
margin: 1px 0;
|
||||
|
||||
.label {
|
||||
width: 36%;
|
||||
font-size: 1.6vw;
|
||||
font-family: "DigifaceWide";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.order {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
width: 280px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 54%;
|
||||
height: 12px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid #1e3a44;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.lineOut {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: rgba(32, 74, 111, 0.5);
|
||||
|
||||
.persont {
|
||||
height: 5px;
|
||||
background: linear-gradient(60deg, #187593 0%, #aff1f4 100%);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: -6px;
|
||||
top: -7px;
|
||||
width: 18px;
|
||||
height: 19px;
|
||||
background: url('~@/assets/images/icon_04.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 10%;
|
||||
font-size: 1.3vw;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
src/views/portraitScreen/components/hyjyl.vue
Normal file
107
src/views/portraitScreen/components/hyjyl.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<!-- 行业就业率 -->
|
||||
<div ref="jgrzcglEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jgrzcglEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "20px",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis : {
|
||||
type: "category",
|
||||
data: ["制造业","金融业",'房地产业'],
|
||||
axisLine: { show: false, lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: "#21343e" }
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 20,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
axisTick: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20,30],
|
||||
type: "bar",
|
||||
barWidth: "14px",
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "#fff"
|
||||
},
|
||||
itemStyle: {
|
||||
type: "bar",
|
||||
color: function (params) {
|
||||
switch (params.dataIndex) {
|
||||
case 0:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
||||
[
|
||||
{ offset: 0, color: "#eb2b2b" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 1:
|
||||
case 2:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{ offset: 0, color: "#ff9500" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(jgrzcglEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
132
src/views/portraitScreen/components/jgmyd.vue
Normal file
132
src/views/portraitScreen/components/jgmyd.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<!-- 各类机构入职满意度 -->
|
||||
<div ref="jgmydEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jgmydEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "20px",
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["招聘公司", "猎头公司", "培训机构", "劳动派遣公司"],
|
||||
axisLine: { show: false, lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: "#21343e" }
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 20,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
axisTick: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20, 30, 20, 15],
|
||||
type: "bar",
|
||||
barWidth: "14px",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff"
|
||||
},
|
||||
itemStyle: {
|
||||
type: "bar",
|
||||
color: function (params) {
|
||||
switch (params.dataIndex) {
|
||||
case 0:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#eb2b2b" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 1:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#ff9500" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 2:
|
||||
case 3:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "rgb(24, 245, 157)" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 4:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#7d792e" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(jgmydEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
91
src/views/portraitScreen/components/jgpxfb.vue
Normal file
91
src/views/portraitScreen/components/jgpxfb.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<!-- 技能培训机构分布 -->
|
||||
<div ref="jsjgpxfbEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jsjgpxfbEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
// legend: {
|
||||
// icon: "circle",
|
||||
// bottom: 0,
|
||||
// left: 0,
|
||||
// itemWidth: 16,
|
||||
// itemGap: 10,
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "0%"],
|
||||
center: ["48%", "48%"],
|
||||
// avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
formatter: (param) => {
|
||||
return `{a|${param.name}}\n{c|${param.value}}`;
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 12,
|
||||
color: "#fff",
|
||||
},
|
||||
b: {
|
||||
color: "#accdff"
|
||||
},
|
||||
c: {
|
||||
fontSize: 14,
|
||||
color: "#2682ff",
|
||||
lineHeight: 30
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20
|
||||
},
|
||||
data: [
|
||||
{name:'A区域',value:50},
|
||||
{name:'B区域',value:50},
|
||||
{name:'C区域',value:50},
|
||||
{name:'D区域',value:50},
|
||||
],
|
||||
animationType: "scale",
|
||||
animationEasing: "elasticOut",
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(jsjgpxfbEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
142
src/views/portraitScreen/components/jndqzpnd.vue
Normal file
142
src/views/portraitScreen/components/jndqzpnd.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<!-- 重点企业技能短缺招聘难度 -->
|
||||
<div id="jnzpndEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick } from "vue";
|
||||
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
const lineChartFn = (val) => {
|
||||
var myChart = echarts.init(document.getElementById("jnzpndEcharts"));
|
||||
var option = {
|
||||
legend: {
|
||||
show: true,
|
||||
right: 10,
|
||||
top: 10,
|
||||
textStyle: { color: "#fff" },
|
||||
data: ["无技能要求", "技能要求"]
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: { type: "shadow" }
|
||||
},
|
||||
grid: {
|
||||
top: "14%",
|
||||
right: "4%",
|
||||
left: "10%",
|
||||
bottom: "12%"
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
// rotate: 50,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
data: ["A企业", "B企业",'C企业','D企业','E企业'],
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,36,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "无技能要求",
|
||||
type: "bar",
|
||||
stack:'total',
|
||||
data: [12, 50, 20,10,10],
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#7d792e" },
|
||||
{ offset: 1, color: "#f1c515" }
|
||||
],false),
|
||||
borderColor:new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset:1,color:'#f1c515'},
|
||||
{ offset:1, color:'#f1c515'}
|
||||
],false),
|
||||
shadowColor: "#f1c515",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "技能要求",
|
||||
type: "bar",
|
||||
stack:'total',
|
||||
data: [ 20, 30, 40,10,10],
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#0488cf" },
|
||||
{ offset: 1, color: "#01a3f7" }
|
||||
],false),
|
||||
borderColor:new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset:1, color:'#01a3f7' },
|
||||
{ offset:0.8, color:'#01a3f7'}
|
||||
],false),
|
||||
shadowColor: "#01a3f7",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
myChart.on("click", function (params) {});
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
109
src/views/portraitScreen/components/jngwtop.vue
Normal file
109
src/views/portraitScreen/components/jngwtop.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<!-- 短缺技能岗位TOP -->
|
||||
<div ref="jngwtopEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jngwtopEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "20px",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis : {
|
||||
type: "category",
|
||||
data: ["A岗位","B岗位",'C岗位','D岗位','E岗位'],
|
||||
axisLine: { show: false, lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: "#21343e" }
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 20,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
axisTick: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20,30,40,50],
|
||||
type: "bar",
|
||||
barWidth: "14px",
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "#fff"
|
||||
},
|
||||
itemStyle: {
|
||||
type: "bar",
|
||||
color: function (params) {
|
||||
switch (params.dataIndex) {
|
||||
case 0:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
||||
[
|
||||
{ offset: 0, color: "#eb2b2b" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 1:
|
||||
case 2:
|
||||
case 3:
|
||||
case 4:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{ offset: 0, color: "#ff9500" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(jngwtopEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
76
src/views/portraitScreen/components/jnxgwxq.vue
Normal file
76
src/views/portraitScreen/components/jnxgwxq.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<!-- 技术型岗位需求 -->
|
||||
<div ref="jsxgwEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jsxgwEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "0%"],
|
||||
center: ["48%", "48%"],
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
formatter: (param) => {
|
||||
return `{c|${param.value}}`;
|
||||
},
|
||||
rich: {
|
||||
c: {
|
||||
fontSize: 14,
|
||||
color: "#ffffff",
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20
|
||||
},
|
||||
data: [
|
||||
{name:'司机',value:50},
|
||||
{name:'炊事员',value:50},
|
||||
{name:'保管员',value:50},
|
||||
{name:'修理工程师',value:50},
|
||||
{name:'高空作业员',value:50},
|
||||
],
|
||||
animationType: "scale",
|
||||
animationEasing: "elasticOut",
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(jsxgwEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
76
src/views/portraitScreen/components/jsxrcfb.vue
Normal file
76
src/views/portraitScreen/components/jsxrcfb.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<!-- 技能型人才分布 -->
|
||||
<div ref="jsxrcfbEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jsxrcfbEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "0%"],
|
||||
center: ["48%", "48%"],
|
||||
// avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
formatter: (param) => {
|
||||
return `{c|${param.value}}`;
|
||||
},
|
||||
rich: {
|
||||
c: {
|
||||
fontSize: 14,
|
||||
color: "#2682ff",
|
||||
lineHeight: 30
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20
|
||||
},
|
||||
data: [
|
||||
{name:'技术性人才',value:50},
|
||||
{name:'复合型人才',value:50},
|
||||
{name:'知识型人才',value:50},
|
||||
],
|
||||
animationType: "scale",
|
||||
animationEasing: "elasticOut",
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(jsxrcfbEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
70
src/views/portraitScreen/components/lsyyfx.vue
Normal file
70
src/views/portraitScreen/components/lsyyfx.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<!-- 机构数量 -->
|
||||
<ul>
|
||||
<li v-for="item in dataList" :key="item">
|
||||
<div class="name_text">{{ item.name }}</div>
|
||||
<div class="num">{{ item.num }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jgslEcharts = ref();
|
||||
const dataList = ref([
|
||||
{
|
||||
name: '职业规划',
|
||||
num: 7000
|
||||
},
|
||||
{
|
||||
name: '就业环境',
|
||||
num: 2000
|
||||
},
|
||||
{
|
||||
name: '薪酬',
|
||||
num: 4000
|
||||
},
|
||||
{
|
||||
name: '政策因素',
|
||||
num: 6000
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
num: 2000
|
||||
}
|
||||
])
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
font-family: "YSBTH";
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.name_text {
|
||||
font-size: 2vw;
|
||||
width: 100%;
|
||||
color: rgb(3, 239, 207);
|
||||
}
|
||||
.num{
|
||||
font-size: 1.8vw;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
88
src/views/portraitScreen/components/lxfx.vue
Normal file
88
src/views/portraitScreen/components/lxfx.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<!-- 失业率 -->
|
||||
<div ref="lxfxEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const lxfxEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
show:false,
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
// avoidLabelOverlap: false,
|
||||
// itemStyle: {
|
||||
// borderRadius: 10,
|
||||
// borderColor: '#fff',
|
||||
// borderWidth: 2
|
||||
// },
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 24,
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 40,
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: false
|
||||
// },
|
||||
data: [
|
||||
{ value: 3100, name: '成都其他县区' },
|
||||
{ value: 1600, name: '绵阳市' },
|
||||
{ value: 500, name: '自贡市' },
|
||||
{ value: 300, name: '攀枝花市' },
|
||||
{ value: 1000, name: '泸州市' },
|
||||
{ value: 1500, name: '德阳市' },
|
||||
{ value: 400, name: '广元市' },
|
||||
{ value: 700, name: '遂宁市' },
|
||||
{ value: 700, name: '内江市' },
|
||||
{ value: 600, name: '乐山市' },
|
||||
{ value: 500, name: '资阳市' },
|
||||
{ value: 2100, name: '宜宾市' },
|
||||
{ value: 900, name: '南充市' },
|
||||
{ value: 500, name: '达州市' },
|
||||
{ value: 400, name: '雅安市' },
|
||||
{ value: 200, name: '巴中市' },
|
||||
{ value: 1000, name: '眉山市' },
|
||||
{ value: 400, name: '广安市' },
|
||||
{ value: 100, name: '阿坝州' },
|
||||
{ value: 150, name: '甘孜州' },
|
||||
{ value: 250, name: '凉山州' },
|
||||
{ value: 4000, name: '其他省' },
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(lxfxEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
90
src/views/portraitScreen/components/qylsry.vue
Normal file
90
src/views/portraitScreen/components/qylsry.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<!-- 机构数量 -->
|
||||
<ul>
|
||||
<li v-for="item in dataList" :key="item">
|
||||
<div class="name_text">{{ item.name }}</div>
|
||||
<div class="num">{{ item.num }}</div>
|
||||
<div class="num">人</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jgslEcharts = ref();
|
||||
const dataList = ref([
|
||||
// {
|
||||
// name: '捷普科技',
|
||||
// num: 19808
|
||||
// },
|
||||
{
|
||||
name: '比亚迪电子',
|
||||
num: 3500
|
||||
},
|
||||
{
|
||||
name: '全友家私',
|
||||
num: 320
|
||||
},
|
||||
{
|
||||
name: '成都领益科技',
|
||||
num: 86
|
||||
},
|
||||
{
|
||||
name: '掌上明珠',
|
||||
num: 68
|
||||
},
|
||||
{
|
||||
name: '裕同印刷',
|
||||
num: 62
|
||||
},
|
||||
{
|
||||
name: '四川福蓉科技',
|
||||
num: 45
|
||||
},
|
||||
|
||||
{
|
||||
name: '四川一宇钢结构',
|
||||
num: 28
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
name: '索菲亚',
|
||||
num: 25
|
||||
}
|
||||
])
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
height: 230px;
|
||||
display: flex;
|
||||
font-family: "YSBTH";
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.name_text {
|
||||
font-size: 2vw;
|
||||
width: 100%;
|
||||
color: rgb(3, 239, 207);
|
||||
}
|
||||
.num{
|
||||
font-size: 1.8vw;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
src/views/portraitScreen/components/rcldyy.vue
Normal file
76
src/views/portraitScreen/components/rcldyy.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<!-- 人才流动原因 -->
|
||||
<div ref="rcldyyEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const rcldyyEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "0%"],
|
||||
center: ["48%", "48%"],
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
formatter: (param) => {
|
||||
return `{c|${param.value}}`;
|
||||
},
|
||||
rich: {
|
||||
c: {
|
||||
fontSize: 14,
|
||||
color: "#ffffff",
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20
|
||||
},
|
||||
data: [
|
||||
{name:'职业发展机会',value:50},
|
||||
{name:'薪资待遇流动',value:50},
|
||||
{name:'工作环境流动',value:50},
|
||||
{name:'政策因素流动',value:50},
|
||||
{name:'其他',value:50},
|
||||
],
|
||||
animationType: "scale",
|
||||
animationEasing: "elasticOut",
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(rcldyyEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
107
src/views/portraitScreen/components/syl.vue
Normal file
107
src/views/portraitScreen/components/syl.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<!-- 失业率 -->
|
||||
<div ref="sylEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const sylEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "20px",
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["成都","绵阳","资阳","简阳"],
|
||||
axisLine: { show: false, lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: "#21343e" }
|
||||
},
|
||||
axisLabel: {
|
||||
// rotate: 20,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
axisTick: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20,30,40],
|
||||
type: "bar",
|
||||
barWidth: "14px",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff"
|
||||
},
|
||||
itemStyle: {
|
||||
type: "bar",
|
||||
color: function (params) {
|
||||
switch (params.dataIndex) {
|
||||
case 0:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#eb2b2b" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 1:
|
||||
case 2:
|
||||
case 3:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#ff9500" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(sylEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
109
src/views/portraitScreen/components/xlccjyl.vue
Normal file
109
src/views/portraitScreen/components/xlccjyl.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<!-- 学历层次就业率 -->
|
||||
<div ref="xlccjyEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const xlccjyEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "20px",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis : {
|
||||
type: "category",
|
||||
data: ["小学","中学",'高中','专科','本科'],
|
||||
axisLine: { show: false, lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: "#21343e" }
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 20,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
axisTick: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20,30,40,50],
|
||||
type: "bar",
|
||||
barWidth: "14px",
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "#fff"
|
||||
},
|
||||
itemStyle: {
|
||||
type: "bar",
|
||||
color: function (params) {
|
||||
switch (params.dataIndex) {
|
||||
case 0:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
||||
[
|
||||
{ offset: 0, color: "#eb2b2b" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 1:
|
||||
case 2:
|
||||
case 3:
|
||||
case 4:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{ offset: 0, color: "#ff9500" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(xlccjyEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
76
src/views/portraitScreen/components/xxgwxq.vue
Normal file
76
src/views/portraitScreen/components/xxgwxq.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<!-- 新型岗位需求 -->
|
||||
<div ref="xxgwxqEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const xxgwxqEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "0%"],
|
||||
center: ["48%", "48%"],
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
formatter: (param) => {
|
||||
return `{c|${param.value}}`;
|
||||
},
|
||||
rich: {
|
||||
c: {
|
||||
fontSize: 14,
|
||||
color: "#ffffff",
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20
|
||||
},
|
||||
data: [
|
||||
{name:'司机',value:50},
|
||||
{name:'炊事员',value:50},
|
||||
{name:'保管员',value:50},
|
||||
{name:'修理工程师',value:50},
|
||||
{name:'高空作业员',value:50},
|
||||
],
|
||||
animationType: "scale",
|
||||
animationEasing: "elasticOut",
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(xxgwxqEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
124
src/views/portraitScreen/components/xxrcgw.vue
Normal file
124
src/views/portraitScreen/components/xxrcgw.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<!-- 重点企业缺口需求 -->
|
||||
<div class="review_box" id="review_box" style="width:100%;overflow: hidden" @mouseover="rollStop()"
|
||||
@mouseout="rollStart(60)">
|
||||
<ul id="comment1" class="zdqyqkxqBox noScollLine">
|
||||
<li v-for="(it, indx) in list" :key="indx" class="lineItem align-center mb4">
|
||||
<div class="label">
|
||||
<span class="order mr4" :style="{ color: indx < 3 ? '#01d0db' : '' }">TOP.{{ indx + 1 }}</span>
|
||||
<img src="@/assets/images/icon_03.png" alt="">
|
||||
<span class="ml4 text one_text_detail" :style="{ color: indx < 3 ? '#01d0db' : '' }">{{ it.mc }}</span>
|
||||
</div>
|
||||
<div class="flex align-center just-around">
|
||||
<div class="line">
|
||||
<div class="lineOut">
|
||||
<div class="persont" :style="{ width: it.persont }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="num">{{ it.num }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="comment2" class="zdqyqkxqBox noScollLine"></ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
})
|
||||
const list = ref([
|
||||
{ mc: '工业机器人操作工程师', persont: '90%', num: 456 },
|
||||
{ mc: '智能生产线调试工程师', persont: '80%', num: 355 },
|
||||
{ mc: '精密仪器装配工程师', persont: '70%', num: 322 },
|
||||
{ mc: '人工智能算法工程师', persont: '60%', num: 189 },
|
||||
{ mc: '数字孪生工程师。', persont: '50%', num: 67 },
|
||||
])
|
||||
const timer = ref(null)
|
||||
onMounted(() => {
|
||||
})
|
||||
onUnmounted(() => {
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.review_box {
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.zdqyqkxqBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 6px 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 20px;
|
||||
|
||||
.lineItem {
|
||||
height: 190px;
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
font-family: "YSBTH";
|
||||
display: flex;
|
||||
font-size: 1.8vw;
|
||||
margin: 10px 0 20px 0;
|
||||
|
||||
.order {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 80%;
|
||||
height: 12px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid #1e3a44;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.lineOut {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: rgba(32, 74, 111, 0.5);
|
||||
|
||||
.persont {
|
||||
height: 5px;
|
||||
background: linear-gradient(60deg, #187593 0%, #aff1f4 100%);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: -6px;
|
||||
top: -7px;
|
||||
width: 18px;
|
||||
height: 19px;
|
||||
background: url('~@/assets/images/icon_04.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 10%;
|
||||
margin-left: 10px;
|
||||
font-size: 1.6vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
src/views/portraitScreen/components/zdrc.vue
Normal file
163
src/views/portraitScreen/components/zdrc.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<!-- 供需技能匹配分析 -->
|
||||
<div id="zdqycxEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick } from "vue";
|
||||
import { rotate } from "ol/transform";
|
||||
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
const lineChartFn = (val) => {
|
||||
var myChart = echarts.init(document.getElementById("zdqycxEcharts"));
|
||||
var option = {
|
||||
legend: {
|
||||
show: true,
|
||||
right: 10,
|
||||
top: 10,
|
||||
textStyle: { color: "#fff" },
|
||||
data: ['总岗位数量', '需求技能岗位数量']
|
||||
},
|
||||
legend: {
|
||||
textStyle: { color: "#fff", fontSize: 46 },
|
||||
selectedMode: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: { type: "shadow" }
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
right: "10%",
|
||||
left: "14%",
|
||||
bottom: "12%"
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 20,
|
||||
fontSize: 40,
|
||||
interval: 0
|
||||
},
|
||||
data: ["比亚迪电子", '全友家私','成都领益科技','四川福蓉科技', '掌上明珠', '裕同印刷'],
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 40,
|
||||
interval: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,54,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "无技能要求",
|
||||
type: "bar",
|
||||
stack: 'total',
|
||||
data: [78, 81, 45, 37, 72, 79, 85, 81],
|
||||
barWidth: 60,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top', // 将标签显示在柱状图的顶部
|
||||
color: "#fff",
|
||||
formatter: '{c} %' // {c}表示数据值，{d}%表示百分比，计算方式为 (c / 总和) * 100%
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#7d792e" },
|
||||
{ offset: 1, color: "#f1c515" }
|
||||
], false),
|
||||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 1, color: '#f1c515' },
|
||||
{ offset: 1, color: '#f1c515' }
|
||||
], false),
|
||||
shadowColor: "#f1c515",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "技能要求",
|
||||
type: "bar",
|
||||
stack: 'total',
|
||||
data: [87, 85, 67, 59, 79, 84, 82, 83],
|
||||
barWidth: 60,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top', // 将标签显示在柱状图的顶部
|
||||
color: "#fff",
|
||||
formatter: '{c} %' // {c}表示数据值，{d}%表示百分比，计算方式为 (c / 总和) * 100%
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: "#052521" },
|
||||
{ offset: 0.5, color: "#0488cf" },
|
||||
{ offset: 1, color: "#01a3f7" }
|
||||
], false),
|
||||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 1, color: '#01a3f7' },
|
||||
{ offset: 0.8, color: '#01a3f7' }
|
||||
], false),
|
||||
shadowColor: "#01a3f7",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
myChart.on("click", function (params) { });
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
336
src/views/portraitScreen/index.vue
Normal file
336
src/views/portraitScreen/index.vue
Normal file
@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<div class="bigScrenn portraitBox">
|
||||
<!-- 头部 -->
|
||||
<div class="portratCnt noScollLine">
|
||||
<!-- 头部 -->
|
||||
<div class="port-head">
|
||||
<Head title="崇州市就业生态链数据"></Head>
|
||||
<div class="bg-bbb">
|
||||
<Cygjbl></Cygjbl>
|
||||
</div>
|
||||
<!-- <ul class="ul-bbb">
|
||||
<li class="bbb-item" v-for="(it, idx) in data.twoList" :key="idx">
|
||||
<div class="top">{{ it.label }}</div>
|
||||
<div class="cntBox">
|
||||
<Gxjnppfx v-if="it.label == '技能岗位缺口TOP5'"></Gxjnppfx>
|
||||
<Cygxfx v-if="it.label == '产业供需分析'"></Cygxfx>
|
||||
<Gjgrzmyd v-if="it.label == '各行业需求TOP5'"></Gjgrzmyd>
|
||||
</div>
|
||||
</li>
|
||||
</ul> -->
|
||||
</div>
|
||||
<!-- 第二部分 -->
|
||||
<ul class="port-three">
|
||||
<li class="port-three-item" v-for="(it, idx) in data.threeList" :key="idx">
|
||||
<div class="bt-Title tc">
|
||||
<span>{{ it.title }}</span>
|
||||
</div>
|
||||
<ul class="childBox flex">
|
||||
<li v-for="(iv, ix) in it.list" :key="ix" class="childItem">
|
||||
<div class="info tc">{{ iv.label }}</div>
|
||||
<div class="chartsBox">
|
||||
<Jgsl v-if="iv.label == '服务机构分类与数量'"></Jgsl>
|
||||
<Glrq v-if="iv.label == '各类人群就业率'"></Glrq>
|
||||
<Csgf v-if="iv.label == '服务机构入职成功率'"></Csgf>
|
||||
<Jgrzcgl v-if="iv.label == '技能型岗位需求'"></Jgrzcgl>
|
||||
<Xxrcgw v-if="iv.label == '新兴人才岗位需求'" />
|
||||
<Zdrc v-if="iv.label == '重点企业人才招聘技能要求'" />
|
||||
<Jgmyd v-if="iv.label == '各类机构入职满意度'"></Jgmyd>
|
||||
<Hyjyl v-if="iv.label == '行业就业率'"></Hyjyl>
|
||||
<Xlccjyl v-if="iv.label == '学历层次就业率'"></Xlccjyl>
|
||||
<Qylsry v-if="iv.label == '企业流失人员分析'"></Qylsry>
|
||||
<Lsyyfx v-if="iv.label == '流失原因分析'"></Lsyyfx>
|
||||
<Lxfx v-if="iv.label == '流向分析'"></Lxfx>
|
||||
<Xxgwxq v-if="iv.label == '新型岗位需求'"></Xxgwxq>
|
||||
<Rcldyy v-if="iv.label == '人才流动原因'"></Rcldyy>
|
||||
<Jgpxfb v-if="iv.label == '技能培训机构分布'"></Jgpxfb>
|
||||
<Jngwtop v-if="iv.label == '短缺技能岗位TOP'"></Jngwtop>
|
||||
<Jndqzpnd v-if="iv.label == '重点企业技能短缺招聘难度'"></Jndqzpnd>
|
||||
<Gwxzdb v-if="iv.label == '技能岗位薪资酬对比'"></Gwxzdb>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <ul class="port-four">
|
||||
<li class="port-four-item" :key="idx">
|
||||
<div class="bt-Title tc">
|
||||
<span>人才流失趋势分析</span>
|
||||
</div>
|
||||
<div class="bottom_box">
|
||||
<img src="@/assets/images/sjt.png" alt="">
|
||||
</div>
|
||||
</li>
|
||||
</ul> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Head from "@/views/largeScreen/layout/head.vue";
|
||||
import Cygjbl from "./components/cygjbl.vue";
|
||||
import Gxjnppfx from "./components/gxjnppfx.vue";
|
||||
import Cygxfx from "./components/cygxfx.vue";
|
||||
import Ghyxqzf from "./components/ghyxqzf.vue";
|
||||
import Gjgrzmyd from "./components/gjgrzmyd.vue";
|
||||
import Jsxrcfb from "./components/jsxrcfb.vue";
|
||||
import Jgsl from "./components/Jgsl.vue";
|
||||
import Qylsry from "./components/qylsry.vue";
|
||||
import Lsyyfx from "./components/lsyyfx.vue";
|
||||
import Lxfx from "./components/lxfx.vue";
|
||||
import Xxrcgw from "./components/xxrcgw.vue";
|
||||
import Zdrc from "./components/zdrc.vue";
|
||||
import Glrq from "./components/glrq.vue";
|
||||
import Jgrzcgl from "./components/Jgrzcgl.vue";
|
||||
import Jgmyd from "./components/jgmyd.vue";
|
||||
import Csgf from "./components/csgf.vue";
|
||||
import Hyjyl from "./components/hyjyl.vue";
|
||||
import Xlccjyl from "./components/xlccjyl.vue";
|
||||
import Syl from "./components/syl.vue";
|
||||
import Jgpxfb from "./components/jgpxfb.vue";
|
||||
import Jnxgwxq from "./components/jnxgwxq.vue";
|
||||
import Xxgwxq from "./components/xxgwxq.vue";
|
||||
import Rcldyy from "./components/rcldyy.vue";
|
||||
import Jngwtop from "./components/jngwtop.vue";
|
||||
import Jndqzpnd from "./components/jndqzpnd.vue";
|
||||
import Gwxzdb from "./components/gwxzdb.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({
|
||||
twoList: [
|
||||
{ label: "产业供需分析" },
|
||||
{ label: "各行业需求TOP5" },
|
||||
{ label: "技能岗位缺口TOP5" },
|
||||
],
|
||||
threeList: [
|
||||
{
|
||||
title: "人力资源服务市场",
|
||||
list: [
|
||||
{ label: "服务机构分类与数量" },
|
||||
{ label: "服务机构入职成功率" },
|
||||
{ label: "各类人群就业率" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "人才结构分析",
|
||||
list: [
|
||||
{ label: "技能型岗位需求" },
|
||||
{ label: "新兴人才岗位需求" },
|
||||
{ label: "重点企业人才招聘技能要求" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "人才流失趋势分析",
|
||||
list: [
|
||||
{ label: "企业流失人员分析" },
|
||||
{ label: "流失原因分析" },
|
||||
{ label: "流向分析" },
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.portraitBox {
|
||||
width: 100%;
|
||||
background: url("~@/assets/images/0000.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 40px;
|
||||
|
||||
.portratCnt {
|
||||
width: 100%;
|
||||
height: calc(100vh - 90px);
|
||||
overflow: hidden;
|
||||
.port-head {
|
||||
height: calc(1800px - 190px);
|
||||
// height: 1800px ;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
margin-right: 4px;
|
||||
margin-left: 4px;
|
||||
margin-top: 190px;
|
||||
position: relative;
|
||||
background: url("~@/assets/images/top_bg.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.bg-bbb {
|
||||
// height: 1300px;
|
||||
height: 100%;
|
||||
padding-top: 260px;
|
||||
}
|
||||
|
||||
.ul-bbb {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: absolute;
|
||||
bottom: 34px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.bbb-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
margin: 0 4px;
|
||||
border-radius: 10px;
|
||||
// background: url("~@/assets/images/fff.png") no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
|
||||
.top {
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding-left: 40px;
|
||||
box-sizing: border-box;
|
||||
font-size: 2.2vw;
|
||||
font-family: "YSBTH";
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
background: url("~@/assets/images/icon_20.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cntBox {
|
||||
height: calc(100% - 120px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.port-three {
|
||||
height: 2400px;
|
||||
|
||||
// background: url("~@/assets/images/bg_13.png") no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
|
||||
.port-three-item {
|
||||
height: 50%;
|
||||
min-height: 350px;
|
||||
margin: 0 4px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.bt-Title {
|
||||
font-size: 2.8vw;
|
||||
background: url("~@/assets/images/bg_14.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 120px;
|
||||
|
||||
span {
|
||||
@include textColor(#499fe2, #ffffff);
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
}
|
||||
|
||||
.childBox {
|
||||
height: calc(100% - 120px);
|
||||
background: url('~@/assets/images/ggg.png') no-repeat center center;
|
||||
.childItem {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
|
||||
.info {
|
||||
font-size: 2.2vw;
|
||||
@include textColor(#09b8cf, #ffffff);
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
|
||||
.chartsBox {
|
||||
height: calc(100% - 125px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 10px;
|
||||
right: 0;
|
||||
width: 3px;
|
||||
height: 90%;
|
||||
background: url("~@/assets/images/lien.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&:nth-last-child(1) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_box {
|
||||
height: calc(100% - 56px);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.port-four {
|
||||
height: 1200px;
|
||||
|
||||
.port-four-item {
|
||||
height: 100%;
|
||||
background: none;
|
||||
|
||||
.bt-Title {
|
||||
font-size: 2.8vw;
|
||||
background: url("~@/assets/images/bg_14.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 120px;
|
||||
|
||||
span {
|
||||
@include textColor(#499fe2, #ffffff);
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_box {
|
||||
height: calc(100% - 120px);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user