兴蜀大屏调整
This commit is contained in:
@ -23,16 +23,16 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
const rankData = ref([
|
const rankData = ref([
|
||||||
{ name: "省级劳务经纪人证书培训", count: "120" },
|
{ name: "电工培训", count: "120" },
|
||||||
{ name: "市级劳务经纪人证书培训", count: "100" },
|
{ name: "焊工培训", count: "100" },
|
||||||
{ name: "平台劳务经纪人证书培训", count: "95" },
|
{ name: "食品安全管理师培训", count: "95" },
|
||||||
{ name: "电工证书培训", count: "78" },
|
{ name: "手工木工", count: "78" },
|
||||||
{ name: "焊工证书培训", count: "72" },
|
{ name: "公共营养师培训", count: "72" },
|
||||||
{ name: "厨师证书培训", count: "63" },
|
{ name: "医疗护理员培训", count: "63" },
|
||||||
{ name: "英语四六级考试培训", count: "48" },
|
{ name: "人工智能训练师培训", count: "48" },
|
||||||
{ name: "雅思托福集训", count: "40" },
|
{ name: "无人机驾驶员培训", count: "40" },
|
||||||
{ name: "会计从业资格证培训", count: "32" },
|
{ name: "高处安装维护拆除作业培训", count: "32" },
|
||||||
{ name: "Java开发培训", count: "29" }
|
{ name: "登高架设培训", count: "29" }
|
||||||
]);
|
]);
|
||||||
const computeProportion = (num) => {
|
const computeProportion = (num) => {
|
||||||
const counts = rankData.value.map((item) => parseInt(item.count));
|
const counts = rankData.value.map((item) => parseInt(item.count));
|
||||||
|
|||||||
@ -20,51 +20,57 @@ import { ref } from "vue";
|
|||||||
|
|
||||||
const tableData = ref([
|
const tableData = ref([
|
||||||
{
|
{
|
||||||
name: "会计学",
|
name: "电工",
|
||||||
startTime: "2025-05-22",
|
startTime: "2025-05-12",
|
||||||
endTime: "2025-05-25",
|
endTime: "2025-06-06",
|
||||||
address: "崇州重阳街道"
|
address: "崇州重阳街道"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "电工培训",
|
name: "焊工",
|
||||||
startTime: "2025-05-23",
|
startTime: "2025-05-19",
|
||||||
endTime: "2025-05-24",
|
endTime: "2025-06-13",
|
||||||
address: "崇州重阳街道"
|
address: "崇州重阳街道"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "焊工培训",
|
name: "钳工",
|
||||||
startTime: "2025-05-23",
|
startTime: "2025-05-26",
|
||||||
endTime: "2025-05-25",
|
endTime: "2025-06-20",
|
||||||
address: "崇州重阳街道"
|
address: "崇州重阳街道"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "钳工培训",
|
name: "人工智能训练师",
|
||||||
startTime: "2025-05-24",
|
startTime: "2025-06-02",
|
||||||
endTime: "2025-05-27",
|
endTime: "2025-06-27",
|
||||||
address: "崇州重阳街道"
|
address: "崇州重阳街道"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "厨师培训",
|
name: "公共营养师",
|
||||||
startTime: "2025-06-08",
|
startTime: "2025-06-09",
|
||||||
endTime: "2025-06-10",
|
endTime: "2025-07-04",
|
||||||
address: "崇州重阳街道"
|
address: "崇州重阳街道"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "会计学",
|
name: "无人机飞手",
|
||||||
startTime: "2025-06-10",
|
startTime: "2025-06-16",
|
||||||
endTime: "2025-06-11",
|
endTime: "2025-07-11",
|
||||||
address: "崇州重阳街道"
|
address: "崇州重阳街道"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "管理学",
|
name: "手工木工",
|
||||||
startTime: "2025-06-14",
|
startTime: "2025-07-14",
|
||||||
endTime: "2025-06-17",
|
endTime: "2025-08-08",
|
||||||
address: "崇州重阳街道"
|
address: "崇州重阳街道"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "成功学",
|
name: "高空作业",
|
||||||
startTime: "2025-06-22",
|
startTime: "2025-08-18",
|
||||||
endTime: "2025-06-25",
|
endTime: "2025-09-12",
|
||||||
|
address: "崇州重阳街道"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "学生就业指导",
|
||||||
|
startTime: "2025-09-01",
|
||||||
|
endTime: "2025-09-01",
|
||||||
address: "崇州重阳街道"
|
address: "崇州重阳街道"
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
@ -82,7 +88,7 @@ const tableData = ref([
|
|||||||
margin: 0 0 1px 0;
|
margin: 0 0 1px 0;
|
||||||
}
|
}
|
||||||
::v-deep .el-table .el-table__cell {
|
::v-deep .el-table .el-table__cell {
|
||||||
padding: 17px 0;
|
padding: 14px 0;
|
||||||
}
|
}
|
||||||
::v-deep .el-table th.el-table__cell {
|
::v-deep .el-table th.el-table__cell {
|
||||||
background-color: #164155 !important;
|
background-color: #164155 !important;
|
||||||
|
|||||||
@ -7,27 +7,31 @@
|
|||||||
</div>
|
</div>
|
||||||
<ul class="pieLsit">
|
<ul class="pieLsit">
|
||||||
<li>
|
<li>
|
||||||
<div><span class="blockOne"></span><span>劳务经纪人证书</span></div>
|
<div><span class="blockOne"></span><span>初级证书</span></div>
|
||||||
<div>
|
<div>
|
||||||
<span class="numb">47</span><span class="proportion">34.55%</span>
|
<!-- <span class="numb">58</span> -->
|
||||||
|
<span class="proportion">68%</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div><span class="blockTwo"></span><span>初级证书</span></div>
|
<div><span class="blockTwo"></span><span>中级证书</span></div>
|
||||||
<div>
|
<div>
|
||||||
<span class="numb">58</span><span class="proportion">42.02%</span>
|
<!-- <span class="numb">23</span> -->
|
||||||
|
<span class="proportion">13%</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div><span class="blockThree"></span><span>中级证书</span></div>
|
<div><span class="blockThree"></span><span>高级证书</span></div>
|
||||||
<div>
|
<div>
|
||||||
<span class="numb">23</span><span class="proportion">16.66%</span>
|
<!-- <span class="numb">8</span> -->
|
||||||
|
<span class="proportion">0%</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div><span class="blockFour"></span><span>高级证书</span></div>
|
<div><span class="blockFour"></span><span>资格证书</span></div>
|
||||||
<div>
|
<div>
|
||||||
<span class="numb">8</span><span class="proportion">5.79%</span>
|
<!-- <span class="numb">47</span> -->
|
||||||
|
<span class="proportion">19%</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -63,10 +67,10 @@ const option = {
|
|||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
data: [
|
data: [
|
||||||
{ value: 47, name: "劳务经纪人证书", itemStyle: { color: "#58A8FF" } },
|
{ value: 68, name: "初级证书", itemStyle: { color: "#58A8FF" } },
|
||||||
{ value: 58, name: "初级证书", itemStyle: { color: "#30DCFF" } },
|
{ value: 13, name: "中级证书", itemStyle: { color: "#30DCFF" } },
|
||||||
{ value: 23, name: "中级证书", itemStyle: { color: "#ffffff" } },
|
{ value: 0, name: "高级证书", itemStyle: { color: "#ffffff" } },
|
||||||
{ value: 8, name: "高级证书", itemStyle: { color: "#dd7d4d" } }
|
{ value: 19, name: "资格证书", itemStyle: { color: "#dd7d4d" } }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@ -72,7 +72,7 @@ const option = {
|
|||||||
type: "bar",
|
type: "bar",
|
||||||
showBackground: true,
|
showBackground: true,
|
||||||
barWidth: 8,
|
barWidth: 8,
|
||||||
data: [76, 32, 87, 65, 34, 23, 52, 60, 75, 53, 62, 41],
|
data: [230, 250, 400, 350, 320, 450, 380, 351, 400, 0, 0, 0],
|
||||||
// 设置柱状图的数值
|
// 设置柱状图的数值
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
@ -99,7 +99,7 @@ const option = {
|
|||||||
type: "bar",
|
type: "bar",
|
||||||
showBackground: true,
|
showBackground: true,
|
||||||
barWidth: 8,
|
barWidth: 8,
|
||||||
data: [34, 15, 45, 24, 12, 10, 35, 23, 42, 31, 33, 25],
|
data: [210, 190, 320, 280, 256, 382, 304, 285, 320, 0, 0, 0],
|
||||||
// 设置柱状图的数值
|
// 设置柱状图的数值
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
|
|||||||
@ -24,19 +24,19 @@ const statisticData = ref([
|
|||||||
{
|
{
|
||||||
imgURL: tongjiPxjg,
|
imgURL: tongjiPxjg,
|
||||||
title: "培训机构数",
|
title: "培训机构数",
|
||||||
count: "46",
|
count: "1",
|
||||||
unit: "家"
|
unit: "家"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
imgURL: tongjiPxkc,
|
imgURL: tongjiPxkc,
|
||||||
title: "培训课程数",
|
title: "培训课程数",
|
||||||
count: "236",
|
count: "15+",
|
||||||
unit: "节"
|
unit: "门"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
imgURL: tongjiPxrs,
|
imgURL: tongjiPxrs,
|
||||||
title: "培训⼈数",
|
title: "培训⼈数",
|
||||||
count: "5623",
|
count: "9000+",
|
||||||
unit: "人"
|
unit: "人"
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
@ -48,7 +48,7 @@ ul.statisticOne {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
li {
|
li {
|
||||||
width: 450px;
|
width: 480px;
|
||||||
height: 190px;
|
height: 190px;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
img {
|
img {
|
||||||
|
|||||||
@ -122,13 +122,13 @@ const zsfzTabData = ref([
|
|||||||
{
|
{
|
||||||
imgURL: tongji3Jjrzs,
|
imgURL: tongji3Jjrzs,
|
||||||
title: "劳务经纪人证书总数",
|
title: "劳务经纪人证书总数",
|
||||||
count: "243",
|
count: "198",
|
||||||
unit: "个"
|
unit: "个"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
imgURL: tongji3Jgzgz,
|
imgURL: tongji3Jgzgz,
|
||||||
title: "技工资格证总数",
|
title: "技工资格证总数",
|
||||||
count: "1315",
|
count: "91",
|
||||||
unit: "个"
|
unit: "个"
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|||||||
@ -6,10 +6,10 @@
|
|||||||
<div class="contentBox">
|
<div class="contentBox">
|
||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>帮扶就业困难人员</span></div>
|
<div class="countTitle"><span>高校毕业生</span></div>
|
||||||
<div class="count"><span class="numb">3539</span>(人)</div>
|
<div class="count"><span class="numb">2378</span>(人)</div>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<!-- <ul>
|
||||||
<li>
|
<li>
|
||||||
<div class="liTitle">
|
<div class="liTitle">
|
||||||
<span>城镇零就业家庭成员</span>
|
<span>城镇零就业家庭成员</span>
|
||||||
@ -52,24 +52,30 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="count"><span class="numb">309</span>(人)</div>
|
<div class="count"><span class="numb">309</span>(人)</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>高校毕业生</span></div>
|
<div class="countTitle"><span>失业人员帮扶</span></div>
|
||||||
<div class="count"><span class="numb">57962</span>(人)</div>
|
<div class="count"><span class="numb">4600</span>(人次)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>退役军人</span></div>
|
<div class="countTitle"><span>退役军人</span></div>
|
||||||
<div class="count"><span class="numb">25173</span>(人)</div>
|
<div class="count"><span class="numb">230</span>(人)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>长期失业人员</span></div>
|
<div class="countTitle"><span>长期失业人员</span></div>
|
||||||
<div class="count"><span class="numb">5426</span>(人)</div>
|
<div class="count"><span class="numb">0</span>(人)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dataBox">
|
||||||
|
<div class="countBox">
|
||||||
|
<div class="countTitle"><span>就业困难人员再就业</span></div>
|
||||||
|
<div class="count"><span class="numb">125</span>(人)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,13 +7,13 @@
|
|||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>用人单位数</span></div>
|
<div class="countTitle"><span>用人单位数</span></div>
|
||||||
<div class="count"><span class="numb">34</span>(家)</div>
|
<div class="count"><span class="numb">60</span>(家)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>发布岗位数</span></div>
|
<div class="countTitle"><span>发布岗位数</span></div>
|
||||||
<div class="count"><span class="numb">138</span>(个)</div>
|
<div class="count"><span class="numb">506</span>(个)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
@ -30,13 +30,13 @@
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="liTitle">
|
<div class="liTitle">
|
||||||
<span class="rankNumb">02</span><span>技工</span>
|
<span class="rankNumb">02</span><span>电工</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="count"><span class="numb">29</span>(个)</div>
|
<div class="count"><span class="numb">29</span>(个)</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="liTitle">
|
<div class="liTitle">
|
||||||
<span class="rankNumb">03</span><span>操作工</span>
|
<span class="rankNumb">03</span><span>机修工</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="count"><span class="numb">17</span>(个)</div>
|
<div class="count"><span class="numb">17</span>(个)</div>
|
||||||
</li>
|
</li>
|
||||||
@ -56,13 +56,13 @@
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="liTitle">
|
<div class="liTitle">
|
||||||
<span class="rankNumb">02</span><span>技工</span>
|
<span class="rankNumb">02</span><span>焊工</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="count"><span class="numb">29</span>(个)</div>
|
<div class="count"><span class="numb">29</span>(个)</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="liTitle">
|
<div class="liTitle">
|
||||||
<span class="rankNumb">03</span><span>操作工</span>
|
<span class="rankNumb">03</span><span>保洁</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="count"><span class="numb">17</span>(个)</div>
|
<div class="count"><span class="numb">17</span>(个)</div>
|
||||||
</li>
|
</li>
|
||||||
@ -79,4 +79,3 @@ export default {};
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "../index.scss";
|
@import "../index.scss";
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@ -7,25 +7,25 @@
|
|||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>平台培训机构数</span></div>
|
<div class="countTitle"><span>平台培训机构数</span></div>
|
||||||
<div class="count"><span class="numb">32</span>(家)</div>
|
<div class="count"><span class="numb">1</span>(家)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>上架课程</span></div>
|
<div class="countTitle"><span>上架课程</span></div>
|
||||||
<div class="count"><span class="numb">143</span>(门)</div>
|
<div class="count"><span class="numb">15</span>(门)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>技能岗位需求增长</span></div>
|
<div class="countTitle"><span>技能岗位需求增长</span></div>
|
||||||
<div class="count"><span class="numb">63</span>(%)</div>
|
<div class="count"><span class="numb">200</span>(%)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>培训后就业成功率</span></div>
|
<div class="countTitle"><span>培训后就业成功率</span></div>
|
||||||
<div class="count"><span class="numb">79</span>(%)</div>
|
<div class="count"><span class="numb">60</span>(%)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="list">
|
<ul class="list">
|
||||||
@ -33,31 +33,31 @@
|
|||||||
<div class="liTitle">
|
<div class="liTitle">
|
||||||
<span>报名人数</span>
|
<span>报名人数</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="count"><span class="numb">2658</span>(人)</div>
|
<div class="count"><span class="numb">3181</span>(人)</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="liTitle">
|
<div class="liTitle">
|
||||||
<span>培训期数</span>
|
<span>培训期数</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="count"><span class="numb">46</span>(期)</div>
|
<div class="count"><span class="numb">24</span>(期)</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="liTitle">
|
<div class="liTitle">
|
||||||
<span>培训课程数</span>
|
<span>培训课程数</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="count"><span class="numb">135</span>(门)</div>
|
<div class="count"><span class="numb">46</span>(门)</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="liTitle">
|
<div class="liTitle">
|
||||||
<span>培训完结人数</span>
|
<span>培训完结人数</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="count"><span class="numb">2143</span>(人)</div>
|
<div class="count"><span class="numb">2547</span>(人)</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="liTitle">
|
<div class="liTitle">
|
||||||
<span>发证人数</span>
|
<span>发证人数</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="count"><span class="numb">2019</span>(人)</div>
|
<div class="count"><span class="numb">289</span>(人)</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,31 +7,31 @@
|
|||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>实习合作企业</span></div>
|
<div class="countTitle"><span>实习合作企业</span></div>
|
||||||
<div class="count"><span class="numb">23</span>(家)</div>
|
<div class="count"><span class="numb">32</span>(家)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>实习合作院校</span></div>
|
<div class="countTitle"><span>实习合作院校</span></div>
|
||||||
<div class="count"><span class="numb">9</span>(家)</div>
|
<div class="count"><span class="numb">25</span>(家)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>校企联合实习基地</span></div>
|
<div class="countTitle"><span>校企联合实习基地</span></div>
|
||||||
<div class="count"><span class="numb">13</span>(个)</div>
|
<div class="count"><span class="numb">20</span>(个)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>定向推送实习岗位</span></div>
|
<div class="countTitle"><span>定向推送实习岗位</span></div>
|
||||||
<div class="count"><span class="numb">58</span>(个)</div>
|
<div class="count"><span class="numb">749</span>(个)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>实习入职人员</span></div>
|
<div class="countTitle"><span>实习入职人员</span></div>
|
||||||
<div class="count"><span class="numb">324</span>(人)</div>
|
<div class="count"><span class="numb">680</span>(人)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -45,4 +45,3 @@ export default {};
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "../index.scss";
|
@import "../index.scss";
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
<div class="dataBox">
|
<div class="dataBox">
|
||||||
<div class="countBox">
|
<div class="countBox">
|
||||||
<div class="countTitle"><span>零工岗位</span></div>
|
<div class="countTitle"><span>零工岗位</span></div>
|
||||||
<div class="count"><span class="numb">152</span>(个)</div>
|
<div class="count"><span class="numb">309</span>(个)</div>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
@ -30,35 +30,35 @@ import topStatisticsZpgw from "@/assets/images/largeScreen/topStatistics-zpgw.pn
|
|||||||
const statisticsData = ref([
|
const statisticsData = ref([
|
||||||
{
|
{
|
||||||
title: "招聘岗位",
|
title: "招聘岗位",
|
||||||
value: "325",
|
value: "75091",
|
||||||
imgURL: topStatisticsZpgw,
|
imgURL: topStatisticsZpgw,
|
||||||
unit: "个",
|
unit: "个",
|
||||||
margin: "-326px 0 0 -685px"
|
margin: "-326px 0 0 -685px"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "完成招聘计划",
|
title: "完成招聘计划",
|
||||||
value: "312",
|
value: "57918",
|
||||||
imgURL: topStatisticsWczpjh,
|
imgURL: topStatisticsWczpjh,
|
||||||
unit: "个",
|
unit: "个",
|
||||||
margin: "-467px 0px 0px -228px"
|
margin: "-467px 0px 0px -228px"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "入住企业",
|
title: "入住企业",
|
||||||
value: "35",
|
value: "89",
|
||||||
imgURL: topStatisticsRzqy,
|
imgURL: topStatisticsRzqy,
|
||||||
unit: "家",
|
unit: "家",
|
||||||
margin: "-232px 0px 0px 306px"
|
margin: "-232px 0px 0px 306px"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "综合一体机",
|
title: "综合一体机",
|
||||||
value: "78",
|
value: "40",
|
||||||
imgURL: topStatisticsZhytj,
|
imgURL: topStatisticsZhytj,
|
||||||
unit: "个",
|
unit: "个",
|
||||||
margin: "-76px 0px 0px -500px"
|
margin: "-76px 0px 0px -500px"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "就业服务站",
|
title: "就业服务站",
|
||||||
value: "18",
|
value: "40",
|
||||||
imgURL: topStatisticsJyfwz,
|
imgURL: topStatisticsJyfwz,
|
||||||
unit: "家",
|
unit: "家",
|
||||||
margin: "-48px 0px 0 9px"
|
margin: "-48px 0px 0 9px"
|
||||||
|
|||||||
@ -3,6 +3,10 @@
|
|||||||
<div>
|
<div>
|
||||||
<div class="carcTitle">促就业⼈数清单</div>
|
<div class="carcTitle">促就业⼈数清单</div>
|
||||||
<ul class="schoolLsit">
|
<ul class="schoolLsit">
|
||||||
|
<li>
|
||||||
|
<div class="name">四川育英医养科技技工学校</div>
|
||||||
|
<div><span class="numb">523</span><span>人</span></div>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="name">四川矿产机电技师学院</div>
|
<div class="name">四川矿产机电技师学院</div>
|
||||||
<div><span class="numb">1593</span><span>人</span></div>
|
<div><span class="numb">1593</span><span>人</span></div>
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
<div class="flex just-between align-center col">
|
<div class="flex just-between align-center col">
|
||||||
<div class="">
|
<div class="">
|
||||||
<div class="title">岗位种类数</div>
|
<div class="title">岗位种类数</div>
|
||||||
<div>9人</div>
|
<div>60个</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
<div class="title">岗位人员数</div>
|
<div class="title">岗位人员数</div>
|
||||||
@ -22,11 +22,11 @@
|
|||||||
<div class="flex just-between align-center col">
|
<div class="flex just-between align-center col">
|
||||||
<div class="">
|
<div class="">
|
||||||
<div class="title">岗位种类数</div>
|
<div class="title">岗位种类数</div>
|
||||||
<div>34人</div>
|
<div>559个</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
<div class="title">岗位人员数</div>
|
<div class="title">岗位人员数</div>
|
||||||
<div>18920人</div>
|
<div>70742人</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -37,11 +37,11 @@
|
|||||||
<div class="flex just-between align-center col">
|
<div class="flex just-between align-center col">
|
||||||
<div class="">
|
<div class="">
|
||||||
<div class="title">岗位种类数</div>
|
<div class="title">岗位种类数</div>
|
||||||
<div>14人</div>
|
<div>146个</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
<div class="title">岗位人员数</div>
|
<div class="title">岗位人员数</div>
|
||||||
<div>5037人</div>
|
<div>6162人</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -14,7 +14,7 @@ const option = {
|
|||||||
top: "17%",
|
top: "17%",
|
||||||
left: "15%",
|
left: "15%",
|
||||||
right: "5%",
|
right: "5%",
|
||||||
bottom: "15%"
|
bottom: "20%"
|
||||||
},
|
},
|
||||||
// 设置图例
|
// 设置图例
|
||||||
legend: {
|
legend: {
|
||||||
@ -68,7 +68,7 @@ const option = {
|
|||||||
type: "line",
|
type: "line",
|
||||||
showBackground: true,
|
showBackground: true,
|
||||||
barWidth: 16,
|
barWidth: 16,
|
||||||
data: [42, 7, 15],
|
data: [269, 158, 20],
|
||||||
// 设置柱状图的数值
|
// 设置柱状图的数值
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
@ -96,7 +96,7 @@ const option = {
|
|||||||
type: "line",
|
type: "line",
|
||||||
showBackground: true,
|
showBackground: true,
|
||||||
barWidth: 16,
|
barWidth: 16,
|
||||||
data: [10230, 4509, 3201],
|
data: [64911, 4509, 3201],
|
||||||
// 设置柱状图的数值
|
// 设置柱状图的数值
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
|
|||||||
@ -14,7 +14,7 @@ const option = {
|
|||||||
top: "15%",
|
top: "15%",
|
||||||
left: "15%",
|
left: "15%",
|
||||||
right: "5%",
|
right: "5%",
|
||||||
bottom: "15%"
|
bottom: "20%"
|
||||||
},
|
},
|
||||||
// 设置图例
|
// 设置图例
|
||||||
legend: {
|
legend: {
|
||||||
@ -68,7 +68,7 @@ const option = {
|
|||||||
type: "bar",
|
type: "bar",
|
||||||
showBackground: true,
|
showBackground: true,
|
||||||
barWidth: 8,
|
barWidth: 8,
|
||||||
data: [31, 37, 45, 46],
|
data: [93, 231, 413, 451],
|
||||||
// 设置柱状图的数值
|
// 设置柱状图的数值
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
@ -96,7 +96,7 @@ const option = {
|
|||||||
type: "bar",
|
type: "bar",
|
||||||
showBackground: true,
|
showBackground: true,
|
||||||
barWidth: 8,
|
barWidth: 8,
|
||||||
data: [190, 2106, 8910, 13431],
|
data: [451, 2110, 19356, 57083],
|
||||||
// 设置柱状图的数值
|
// 设置柱状图的数值
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
|
|||||||
130
src/views/recruitment/components/jyknryzjy/juzhudi.vue
Normal file
130
src/views/recruitment/components/jyknryzjy/juzhudi.vue
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tableBox">
|
||||||
|
<el-table
|
||||||
|
:data="tableData"
|
||||||
|
style="width: 100%; height: 19.5vw; overflow: auto"
|
||||||
|
>
|
||||||
|
<el-table-column label="序号" width="80">
|
||||||
|
<template #default="scope">
|
||||||
|
{{ scope.$index + 1 }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="name" label="人员所属街道分布" />
|
||||||
|
<el-table-column prop="count" label="人员数量" />
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
const tableData = ref([
|
||||||
|
{
|
||||||
|
name: "重阳街道",
|
||||||
|
count: "130人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "崇庆街道",
|
||||||
|
count: "37人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "积马街道",
|
||||||
|
count: "41人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "大划街道",
|
||||||
|
count: "22人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "三江街道",
|
||||||
|
count: "39人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "江源街道",
|
||||||
|
count: "22人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "白头镇",
|
||||||
|
count: "40人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "隆兴镇",
|
||||||
|
count: "31人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "道明镇",
|
||||||
|
count: "30人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "街子镇",
|
||||||
|
count: "37人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "文井江镇",
|
||||||
|
count: "4人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "怀远镇",
|
||||||
|
count: "54人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "元通镇",
|
||||||
|
count: "20人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "廖家镇",
|
||||||
|
count: "29人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "观胜镇",
|
||||||
|
count: "24人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "待核实",
|
||||||
|
count: "95人"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tableBox {
|
||||||
|
margin: 0 2vw;
|
||||||
|
}
|
||||||
|
.el-table {
|
||||||
|
background-color: transparent;
|
||||||
|
--el-table-border-color: rgba(22, 65, 85, 0.9);
|
||||||
|
}
|
||||||
|
::v-deep .el-table__header-wrapper {
|
||||||
|
margin: 0 0 1px 0;
|
||||||
|
}
|
||||||
|
::v-deep .el-table .el-table__cell {
|
||||||
|
padding: 0.6vw 0;
|
||||||
|
}
|
||||||
|
::v-deep .el-table th.el-table__cell {
|
||||||
|
background-color: #164155 !important;
|
||||||
|
color: #c4f3fe;
|
||||||
|
margin: 0 0 2px 0;
|
||||||
|
font-size: 0.7vw;
|
||||||
|
}
|
||||||
|
::v-deep .el-table tr {
|
||||||
|
background-color: rgba(22, 65, 85, 0.5);
|
||||||
|
}
|
||||||
|
::v-deep .el-table tr:nth-child(even) {
|
||||||
|
background-color: rgba(22, 65, 85, 0.9);
|
||||||
|
}
|
||||||
|
::v-deep .el-table td.el-table__cell,
|
||||||
|
.el-table th.el-table__cell.is-leaf {
|
||||||
|
border-bottom: 1px solid rgba(22, 65, 85, 0.5);
|
||||||
|
font-size: 0.7vw;
|
||||||
|
}
|
||||||
|
::v-deep .el-table th.el-table__cell.is-leaf {
|
||||||
|
border-bottom: 1px solid rgba(22, 65, 85, 0.9);
|
||||||
|
}
|
||||||
|
::v-deep
|
||||||
|
.el-table--enable-row-hover
|
||||||
|
.el-table__body
|
||||||
|
tr:hover
|
||||||
|
> td.el-table__cell {
|
||||||
|
background-color: rgb(16, 104, 171);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
174
src/views/recruitment/components/jyknryzjy/kunnan.vue
Normal file
174
src/views/recruitment/components/jyknryzjy/kunnan.vue
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<div class="pieBigBox">
|
||||||
|
<div class="pieMain">
|
||||||
|
<div class="pieBox" ref="pieRef"></div>
|
||||||
|
<div class="pieTitle">
|
||||||
|
<span style="font-size: 30px">20</span>人<br />困难大学生
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="pieLsit">
|
||||||
|
<li>
|
||||||
|
<div><span class="blockOne"></span><span>脱贫家庭</span></div>
|
||||||
|
<div>
|
||||||
|
<span class="numb">14人</span>
|
||||||
|
<!-- <span class="proportion">49.2%</span> -->
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div><span class="blockTwo"></span><span>低保家庭</span></div>
|
||||||
|
<div>
|
||||||
|
<span class="numb">4人</span>
|
||||||
|
<!-- <span class="proportion">36.8%</span> -->
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div><span class="blockThree"></span><span>残疾毕业生</span></div>
|
||||||
|
<div>
|
||||||
|
<span class="numb">2人</span>
|
||||||
|
<!-- <span class="proportion">7.33%</span> -->
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
const pieRef = ref(null);
|
||||||
|
const optionPie = {
|
||||||
|
// 设置图形位置
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item"
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "困难大学生",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["65%", "80%"],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
padAngle: 5,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 1
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "center"
|
||||||
|
},
|
||||||
|
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 14, name: "脱贫家庭", itemStyle: { color: "#58A8FF" } },
|
||||||
|
{
|
||||||
|
value: 4,
|
||||||
|
name: "低保家庭",
|
||||||
|
itemStyle: { color: "#30DCFF" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
name: "残疾毕业生",
|
||||||
|
itemStyle: { color: "#ffffff" }
|
||||||
|
}
|
||||||
|
// {
|
||||||
|
// value: 44,
|
||||||
|
// name: "博士研究生学历",
|
||||||
|
// itemStyle: { color: "#dd7d4d" }
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
// 生命周期钩子
|
||||||
|
onMounted(() => {
|
||||||
|
if (pieRef.value) {
|
||||||
|
const chart = echarts.init(pieRef.value);
|
||||||
|
// 设置option
|
||||||
|
chart.setOption(optionPie);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.pieBigBox {
|
||||||
|
width: 40vw;
|
||||||
|
// margin: 0.5vw auto 0;
|
||||||
|
// height: 274px;
|
||||||
|
.pieMain {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
float: left;
|
||||||
|
.pieBox {
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 1.5vw;
|
||||||
|
width: 15vw;
|
||||||
|
height: 15vw;
|
||||||
|
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
|
||||||
|
center;
|
||||||
|
background-size: 100%;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
.pieTitle {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: -1vw;
|
||||||
|
font-size: 1vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul.pieLsit {
|
||||||
|
float: left;
|
||||||
|
margin: 0vw 0 0 2vw;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 2.5vw 0 0 0;
|
||||||
|
width: 20vw;
|
||||||
|
li {
|
||||||
|
// font-size: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 3vw;
|
||||||
|
padding: 0 1vw;
|
||||||
|
background: rgba(203, 242, 250, 0.2);
|
||||||
|
border-radius: 4px 4px 4px 4px;
|
||||||
|
border: 1px solid rgba(203, 242, 250, 0.2);
|
||||||
|
margin-top: 1vw;
|
||||||
|
font-size: 0.7vw;
|
||||||
|
> div {
|
||||||
|
height: 100%;
|
||||||
|
line-height: 3vw;
|
||||||
|
}
|
||||||
|
.blockOne,
|
||||||
|
.blockTwo,
|
||||||
|
.blockThree,
|
||||||
|
.blockFour {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.8vw;
|
||||||
|
height: 0.8vw;
|
||||||
|
margin-right: 1vw;
|
||||||
|
}
|
||||||
|
.blockOne {
|
||||||
|
background-color: #58a8ff;
|
||||||
|
}
|
||||||
|
.blockTwo {
|
||||||
|
background-color: #30dcff;
|
||||||
|
}
|
||||||
|
.blockThree {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
.blockFour {
|
||||||
|
background-color: #dd7d4d;
|
||||||
|
}
|
||||||
|
.proportion {
|
||||||
|
display: inline-block;
|
||||||
|
width: 4.5vw;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
163
src/views/recruitment/components/jyknryzjy/xingbie.vue
Normal file
163
src/views/recruitment/components/jyknryzjy/xingbie.vue
Normal file
@ -0,0 +1,163 @@
|
|||||||
|
<template>
|
||||||
|
<div class="pieBigBox">
|
||||||
|
<div class="pieMain">
|
||||||
|
<div class="pieBox" ref="pieRef"></div>
|
||||||
|
<div class="pieTitle">性别占比</div>
|
||||||
|
</div>
|
||||||
|
<ul class="pieLsit">
|
||||||
|
<li>
|
||||||
|
<div><span class="blockOne"></span><span>男性</span></div>
|
||||||
|
<div>
|
||||||
|
<span class="numb">349人</span><span class="proportion">53.3%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div><span class="blockTwo"></span><span>女性</span></div>
|
||||||
|
<div>
|
||||||
|
<span class="numb">306人</span><span class="proportion">46.7%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
const pieRef = ref(null);
|
||||||
|
const optionPie = {
|
||||||
|
// 设置图形位置
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item"
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "性别占比",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["65%", "80%"],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
padAngle: 5,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 1
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "center"
|
||||||
|
},
|
||||||
|
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 349, name: "男性", itemStyle: { color: "#58A8FF" } },
|
||||||
|
{
|
||||||
|
value: 306,
|
||||||
|
name: "女性",
|
||||||
|
itemStyle: { color: "#30DCFF" }
|
||||||
|
}
|
||||||
|
// {
|
||||||
|
// value: 48,
|
||||||
|
// name: "硕士研究生学历",
|
||||||
|
// itemStyle: { color: "#ffffff" }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// value: 44,
|
||||||
|
// name: "博士研究生学历",
|
||||||
|
// itemStyle: { color: "#dd7d4d" }
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
// 生命周期钩子
|
||||||
|
onMounted(() => {
|
||||||
|
if (pieRef.value) {
|
||||||
|
const chart = echarts.init(pieRef.value);
|
||||||
|
// 设置option
|
||||||
|
chart.setOption(optionPie);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.pieBigBox {
|
||||||
|
width: 40vw;
|
||||||
|
// margin: 0.5vw auto 0;
|
||||||
|
// height: 274px;
|
||||||
|
.pieMain {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
float: left;
|
||||||
|
.pieBox {
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 1.5vw;
|
||||||
|
width: 15vw;
|
||||||
|
height: 15vw;
|
||||||
|
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
|
||||||
|
center;
|
||||||
|
background-size: 100%;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
.pieTitle {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 0vw;
|
||||||
|
font-size: 1vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul.pieLsit {
|
||||||
|
float: left;
|
||||||
|
margin: 4vw 0 0 2vw;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.5vw 0 0 0;
|
||||||
|
width: 20vw;
|
||||||
|
li {
|
||||||
|
// font-size: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 3vw;
|
||||||
|
padding: 0 1vw;
|
||||||
|
background: rgba(203, 242, 250, 0.2);
|
||||||
|
border-radius: 4px 4px 4px 4px;
|
||||||
|
border: 1px solid rgba(203, 242, 250, 0.2);
|
||||||
|
margin-top: 1vw;
|
||||||
|
font-size: 0.7vw;
|
||||||
|
> div {
|
||||||
|
height: 100%;
|
||||||
|
line-height: 3vw;
|
||||||
|
}
|
||||||
|
.blockOne,
|
||||||
|
.blockTwo,
|
||||||
|
.blockThree,
|
||||||
|
.blockFour {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.8vw;
|
||||||
|
height: 0.8vw;
|
||||||
|
margin-right: 1vw;
|
||||||
|
}
|
||||||
|
.blockOne {
|
||||||
|
background-color: #58a8ff;
|
||||||
|
}
|
||||||
|
.blockTwo {
|
||||||
|
background-color: #30dcff;
|
||||||
|
}
|
||||||
|
.blockThree {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
.blockFour {
|
||||||
|
background-color: #dd7d4d;
|
||||||
|
}
|
||||||
|
.proportion {
|
||||||
|
display: inline-block;
|
||||||
|
width: 4.5vw;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
176
src/views/recruitment/components/jyknryzjy/xueli.vue
Normal file
176
src/views/recruitment/components/jyknryzjy/xueli.vue
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
<template>
|
||||||
|
<div class="pieBigBox">
|
||||||
|
<div class="pieMain">
|
||||||
|
<div class="pieBox" ref="pieRef"></div>
|
||||||
|
<div class="pieTitle">学历占比</div>
|
||||||
|
</div>
|
||||||
|
<ul class="pieLsit">
|
||||||
|
<li>
|
||||||
|
<div><span class="blockOne"></span><span>大学学历</span></div>
|
||||||
|
<div>
|
||||||
|
<span class="numb">322人</span><span class="proportion">49.2%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div><span class="blockTwo"></span><span>大专学历</span></div>
|
||||||
|
<div>
|
||||||
|
<span class="numb">241人</span><span class="proportion">36.8%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div><span class="blockThree"></span><span>硕士研究生学历</span></div>
|
||||||
|
<div>
|
||||||
|
<span class="numb">48人</span><span class="proportion">7.33%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<div><span class="blockFour"></span><span>博士研究生学历</span></div>
|
||||||
|
<div>
|
||||||
|
<span class="numb">44人</span><span class="proportion">6.72%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
const pieRef = ref(null);
|
||||||
|
const optionPie = {
|
||||||
|
// 设置图形位置
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item"
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "学历占比",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["65%", "80%"],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
padAngle: 5,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 1
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "center"
|
||||||
|
},
|
||||||
|
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 322, name: "大学学历", itemStyle: { color: "#58A8FF" } },
|
||||||
|
{
|
||||||
|
value: 241,
|
||||||
|
name: "大专学历",
|
||||||
|
itemStyle: { color: "#30DCFF" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 48,
|
||||||
|
name: "硕士研究生学历",
|
||||||
|
itemStyle: { color: "#ffffff" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 44,
|
||||||
|
name: "博士研究生学历",
|
||||||
|
itemStyle: { color: "#dd7d4d" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
// 生命周期钩子
|
||||||
|
onMounted(() => {
|
||||||
|
if (pieRef.value) {
|
||||||
|
const chart = echarts.init(pieRef.value);
|
||||||
|
// 设置option
|
||||||
|
chart.setOption(optionPie);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.pieBigBox {
|
||||||
|
width: 40vw;
|
||||||
|
// margin: 0.5vw auto 0;
|
||||||
|
// height: 274px;
|
||||||
|
.pieMain {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
float: left;
|
||||||
|
.pieBox {
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 1.5vw;
|
||||||
|
width: 15vw;
|
||||||
|
height: 15vw;
|
||||||
|
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
|
||||||
|
center;
|
||||||
|
background-size: 100%;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
.pieTitle {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 0vw;
|
||||||
|
font-size: 1vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul.pieLsit {
|
||||||
|
float: left;
|
||||||
|
margin: 0vw 0 0 2vw;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.5vw 0 0 0;
|
||||||
|
width: 20vw;
|
||||||
|
li {
|
||||||
|
// font-size: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 3vw;
|
||||||
|
padding: 0 1vw;
|
||||||
|
background: rgba(203, 242, 250, 0.2);
|
||||||
|
border-radius: 4px 4px 4px 4px;
|
||||||
|
border: 1px solid rgba(203, 242, 250, 0.2);
|
||||||
|
margin-top: 1vw;
|
||||||
|
font-size: 0.7vw;
|
||||||
|
> div {
|
||||||
|
height: 100%;
|
||||||
|
line-height: 3vw;
|
||||||
|
}
|
||||||
|
.blockOne,
|
||||||
|
.blockTwo,
|
||||||
|
.blockThree,
|
||||||
|
.blockFour {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.8vw;
|
||||||
|
height: 0.8vw;
|
||||||
|
margin-right: 1vw;
|
||||||
|
}
|
||||||
|
.blockOne {
|
||||||
|
background-color: #58a8ff;
|
||||||
|
}
|
||||||
|
.blockTwo {
|
||||||
|
background-color: #30dcff;
|
||||||
|
}
|
||||||
|
.blockThree {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
.blockFour {
|
||||||
|
background-color: #dd7d4d;
|
||||||
|
}
|
||||||
|
.proportion {
|
||||||
|
display: inline-block;
|
||||||
|
width: 4.5vw;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
115
src/views/recruitment/components/jyknryzjy/zhuanye.vue
Normal file
115
src/views/recruitment/components/jyknryzjy/zhuanye.vue
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
<template>
|
||||||
|
<div class="barBox" ref="enterpriseTwoRef"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
const enterpriseTwoRef = ref(null);
|
||||||
|
const option = {
|
||||||
|
// 设置图形位置
|
||||||
|
grid: {
|
||||||
|
top: "10%",
|
||||||
|
left: "8%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "11%"
|
||||||
|
},
|
||||||
|
// 设置图例
|
||||||
|
// legend: {
|
||||||
|
// itemWidth: 10, // 方块宽度
|
||||||
|
// itemHeight: 10, // 方块高度
|
||||||
|
// textStyle: {
|
||||||
|
// color: "#B2D9DF" // 文字颜色
|
||||||
|
// },
|
||||||
|
// x: "center", // 图例在左（left）、右（right）、居中（center）、100px
|
||||||
|
// y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
|
||||||
|
// padding: [15, 50, 0, 0] // 图例[距上右下左方距离
|
||||||
|
// },
|
||||||
|
xAxis: {
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#CBF2FA" // 文字颜色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 22, // 设置 x 轴文字大小
|
||||||
|
color: "#CBF2FA" // 可以同时设置文字颜色
|
||||||
|
},
|
||||||
|
type: "category",
|
||||||
|
data: [
|
||||||
|
"护理专业",
|
||||||
|
"语言及法学类专业",
|
||||||
|
"工程类专业",
|
||||||
|
"管理及新媒体类专业",
|
||||||
|
"其他"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
//网格线
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: ["#A1C7CD"], // 线颜色
|
||||||
|
opacity: 0.2 // 透明度
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#CBF2FA" // 文字颜色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 20, // 设置 x 轴文字大小
|
||||||
|
color: "#CBF2FA" // 可以同时设置文字颜色
|
||||||
|
},
|
||||||
|
type: "value"
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "专业人数",
|
||||||
|
type: "bar",
|
||||||
|
showBackground: true,
|
||||||
|
barWidth: 20,
|
||||||
|
data: [56, 41, 39, 25, 494],
|
||||||
|
// 设置柱状图的数值
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "top",
|
||||||
|
color: "#30DCFF",
|
||||||
|
|
||||||
|
fontSize: 22
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
//渐变色
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
x: 1,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{ offset: 0, color: "rgba(48, 220, 255, 1)" },
|
||||||
|
{ offset: 1, color: "rgba(48, 220, 255, 0.06)" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
// 生命周期钩子
|
||||||
|
onMounted(() => {
|
||||||
|
if (enterpriseTwoRef.value) {
|
||||||
|
const chart = echarts.init(enterpriseTwoRef.value);
|
||||||
|
// 设置option
|
||||||
|
chart.setOption(option);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.barBox {
|
||||||
|
width: 40vw;
|
||||||
|
height: 20vw;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -139,12 +139,12 @@ const cardOneInfo = {
|
|||||||
description: "7万家企业(含个体工商户)",
|
description: "7万家企业(含个体工商户)",
|
||||||
type1: {
|
type1: {
|
||||||
title: "岗位种类数",
|
title: "岗位种类数",
|
||||||
count: "57",
|
count: "765个",
|
||||||
class: "modelItem1"
|
class: "modelItem1"
|
||||||
},
|
},
|
||||||
type2: {
|
type2: {
|
||||||
title: "岗位人数",
|
title: "岗位人数",
|
||||||
count: "24637",
|
count: "79000人",
|
||||||
class: "modelItem2"
|
class: "modelItem2"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="content"
|
class="content"
|
||||||
v-show="isactive != 0 && isactive != 4 && isactive != 5"
|
v-show="isactive != 0 && isactive != 1 && isactive != 2 && isactive != 3"
|
||||||
>
|
>
|
||||||
<div class="num">81.1万</div>
|
<div class="num">81.1万</div>
|
||||||
<div class="label">人口总数</div>
|
<div class="label">人口总数</div>
|
||||||
@ -49,7 +49,7 @@
|
|||||||
<div class="barBox" ref="enterpriseTwoRef"></div>
|
<div class="barBox" ref="enterpriseTwoRef"></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- </transition> -->
|
<!-- </transition> -->
|
||||||
<div class="hjrkDialogBox" v-show="isactive == 5">
|
<div class="hjrkDialogBox" v-show="isactive == 1">
|
||||||
<div class="titleBox">
|
<div class="titleBox">
|
||||||
<div class="title">高中端人才</div>
|
<div class="title">高中端人才</div>
|
||||||
<div class="close" @click="isactive = -1"></div>
|
<div class="close" @click="isactive = -1"></div>
|
||||||
@ -69,7 +69,7 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="hjrkDialogBox" v-show="isactive == 4">
|
<div class="hjrkDialogBox" v-show="isactive == 3">
|
||||||
<div class="titleBox">
|
<div class="titleBox">
|
||||||
<div class="title">新增就业群体</div>
|
<div class="title">新增就业群体</div>
|
||||||
<div class="close" @click="isactive = -1"></div>
|
<div class="close" @click="isactive = -1"></div>
|
||||||
@ -106,6 +106,38 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hjrkDialogBox" v-show="isactive == 2">
|
||||||
|
<div class="titleBox">
|
||||||
|
<div class="title">高校毕业未就业情况</div>
|
||||||
|
<div class="close" @click="isactive = -1"></div>
|
||||||
|
</div>
|
||||||
|
<ul class="tabsBox">
|
||||||
|
<!-- <li
|
||||||
|
v-for="(item, index) in tabsDate.tabs"
|
||||||
|
:key="index"
|
||||||
|
:class="tabsActive == index ? 'active' : ''"
|
||||||
|
@click="tabsActive = index"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</li> -->
|
||||||
|
<li
|
||||||
|
v-for="(item, index) in tabsDate2.tabs"
|
||||||
|
:key="index"
|
||||||
|
:class="tabsActive == index ? 'active' : ''"
|
||||||
|
@click="
|
||||||
|
tabsDate2.activeIndex = index;
|
||||||
|
tabsActive = index;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<Xueli v-if="tabsDate2.activeIndex == 0"></Xueli>
|
||||||
|
<Zhuanye v-if="tabsDate2.activeIndex == 1"></Zhuanye>
|
||||||
|
<Xingbie v-if="tabsDate2.activeIndex == 2"></Xingbie>
|
||||||
|
<Juzhudi v-if="tabsDate2.activeIndex == 3"></Juzhudi>
|
||||||
|
<Kunnan v-if="tabsDate2.activeIndex == 4"></Kunnan>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -114,6 +146,11 @@ import { ref, reactive, onMounted } from "vue";
|
|||||||
import tongjiPxrs from "@/assets/images/largeScreen/tongji-pxrs.png";
|
import tongjiPxrs from "@/assets/images/largeScreen/tongji-pxrs.png";
|
||||||
import tongjiPxkc from "@/assets/images/largeScreen/tongji-pxkc.png";
|
import tongjiPxkc from "@/assets/images/largeScreen/tongji-pxkc.png";
|
||||||
import tongjiPxjg from "@/assets/images/largeScreen/tongji-pxjg.png";
|
import tongjiPxjg from "@/assets/images/largeScreen/tongji-pxjg.png";
|
||||||
|
import Xueli from "../components/jyknryzjy/xueli.vue";
|
||||||
|
import Zhuanye from "../components/jyknryzjy/zhuanye.vue";
|
||||||
|
import Xingbie from "../components/jyknryzjy/xingbie.vue";
|
||||||
|
import Juzhudi from "../components/jyknryzjy/juzhudi.vue";
|
||||||
|
import Kunnan from "../components/jyknryzjy/kunnan.vue";
|
||||||
const isactive = ref(-1);
|
const isactive = ref(-1);
|
||||||
const tabsActive = ref(0);
|
const tabsActive = ref(0);
|
||||||
const dialogTitle = ref("户籍人口");
|
const dialogTitle = ref("户籍人口");
|
||||||
@ -131,33 +168,37 @@ const modelContentList = ref([
|
|||||||
label: "户籍人口"
|
label: "户籍人口"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
num: "8.91万",
|
num: "2.2万",
|
||||||
label: "流动人口"
|
label: "高中端人才"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
num: "约27万",
|
num: "655",
|
||||||
label: "就业人群"
|
label: "高校毕业未就业"
|
||||||
},
|
|
||||||
// {
|
|
||||||
// num: "13000",
|
|
||||||
// label: "待就业人群"
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
num: "10.06万",
|
|
||||||
label: "灵活就业群体"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
num: "0.54万",
|
num: "0.54万",
|
||||||
label: "新增就业群体"
|
label: "新增就业群体"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
num: "2.2万",
|
num: "10.06万",
|
||||||
label: "高中端人才"
|
label: "灵活就业群体"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
num: "0.76万",
|
num: "4608",
|
||||||
label: "领金人员"
|
label: "领金人员"
|
||||||
}
|
}
|
||||||
|
// {
|
||||||
|
// num: "8.91万",
|
||||||
|
// label: "流动人口"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// num: "约27万",
|
||||||
|
// label: "就业人群"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// num: "13000",
|
||||||
|
// label: "待就业人群"
|
||||||
|
// },
|
||||||
]);
|
]);
|
||||||
const statisticData = ref([
|
const statisticData = ref([
|
||||||
{
|
{
|
||||||
@ -204,7 +245,10 @@ const tabsDate = reactive({
|
|||||||
],
|
],
|
||||||
activeIndex: 0
|
activeIndex: 0
|
||||||
});
|
});
|
||||||
|
const tabsDate2 = reactive({
|
||||||
|
tabs: ["学历", "专业", "性别", "居住地址", "困难大学生"],
|
||||||
|
activeIndex: 0
|
||||||
|
});
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
const enterpriseTwoRef = ref(null);
|
const enterpriseTwoRef = ref(null);
|
||||||
const option = {
|
const option = {
|
||||||
@ -232,7 +276,10 @@ const option = {
|
|||||||
color: "#CBF2FA" // 文字颜色
|
color: "#CBF2FA" // 文字颜色
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 22, // 设置 x 轴文字大小
|
||||||
|
color: "#CBF2FA" // 可以同时设置文字颜色
|
||||||
|
},
|
||||||
type: "category",
|
type: "category",
|
||||||
data: ["大专及以上", "高中(含中专)", "初中", "小学"]
|
data: ["大专及以上", "高中(含中专)", "初中", "小学"]
|
||||||
},
|
},
|
||||||
@ -250,6 +297,10 @@ const option = {
|
|||||||
color: "#CBF2FA" // 文字颜色
|
color: "#CBF2FA" // 文字颜色
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 20, // 设置 x 轴文字大小
|
||||||
|
color: "#CBF2FA" // 可以同时设置文字颜色
|
||||||
|
},
|
||||||
type: "value"
|
type: "value"
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
@ -263,7 +314,8 @@ const option = {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: "top",
|
position: "top",
|
||||||
color: "#30DCFF"
|
color: "#30DCFF",
|
||||||
|
fontSize: 22
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
//渐变色
|
//渐变色
|
||||||
@ -391,7 +443,7 @@ onMounted(() => {
|
|||||||
width: 10.729vw;
|
width: 10.729vw;
|
||||||
height: 6.667vw;
|
height: 6.667vw;
|
||||||
padding: 0.625vw 0;
|
padding: 0.625vw 0;
|
||||||
margin: 0 1.1vw 1.2vw;
|
margin: 0 1.5vw 1.2vw;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
.num {
|
.num {
|
||||||
font-family: PingFang SC, PingFang SC;
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
|||||||
@ -4,12 +4,13 @@
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- tabs切换 -->
|
<!-- tabs切换 -->
|
||||||
<ul class="tabsBox">
|
<ul class="tabsBox">
|
||||||
<li
|
<!-- <li
|
||||||
v-for="(item, index) in tabsData"
|
v-for="(item, index) in tabsData"
|
||||||
:key="item.title"
|
:key="item.title"
|
||||||
:class="{ active: activeIndex === index }"
|
:class="{ active: activeIndex === index }"
|
||||||
@click="handleTabClick(index)"
|
@click="handleTabClick(index)"
|
||||||
>
|
> -->
|
||||||
|
<li v-for="(item, index) in tabsData" :key="index">
|
||||||
<div class="tabsMainBox">
|
<div class="tabsMainBox">
|
||||||
<div class="tabsTitle">{{ item.title }}</div>
|
<div class="tabsTitle">{{ item.title }}</div>
|
||||||
<div class="tabsContent">
|
<div class="tabsContent">
|
||||||
@ -41,10 +42,10 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="name" label="企业名称" />
|
<el-table-column prop="name" label="企业名称" />
|
||||||
<el-table-column prop="street" label="地址" />
|
<el-table-column prop="street" label="所在街道" />
|
||||||
<el-table-column prop="position" label="招聘岗位" />
|
<el-table-column prop="position" label="招聘岗位" />
|
||||||
<el-table-column prop="recruitmentNum" label="招聘人数" />
|
<el-table-column prop="recruitmentNum" label="招聘人数" />
|
||||||
<el-table-column prop="broker" label="服务经纪人" />
|
<!-- <el-table-column prop="broker" label="服务经纪人" /> -->
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -60,7 +61,7 @@ const tabsData = ref([
|
|||||||
content: [
|
content: [
|
||||||
{
|
{
|
||||||
title: "服务企业数",
|
title: "服务企业数",
|
||||||
num: "3"
|
num: "23"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "推荐岗位数",
|
title: "推荐岗位数",
|
||||||
@ -73,11 +74,11 @@ const tabsData = ref([
|
|||||||
content: [
|
content: [
|
||||||
{
|
{
|
||||||
title: "服务企业数",
|
title: "服务企业数",
|
||||||
num: "80"
|
num: "461"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "推荐岗位数",
|
title: "推荐岗位数",
|
||||||
num: "8459"
|
num: "54918"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -86,11 +87,11 @@ const tabsData = ref([
|
|||||||
content: [
|
content: [
|
||||||
{
|
{
|
||||||
title: "服务企业数",
|
title: "服务企业数",
|
||||||
num: "11"
|
num: "93"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "推荐岗位数",
|
title: "推荐岗位数",
|
||||||
num: "112"
|
num: "2310"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -110,171 +111,220 @@ const handleTabClick = (index) => {
|
|||||||
};
|
};
|
||||||
const tableData = ref([
|
const tableData = ref([
|
||||||
{
|
{
|
||||||
name: "全友家私有限公司",
|
name: "比亚迪电子科技 (崇州) 有限公司",
|
||||||
street: "崇州市经济开发区崇阳大道333号",
|
street: "大划街道",
|
||||||
position: "警卫",
|
position: "操作工（正式工）",
|
||||||
recruitmentNum: "20",
|
recruitmentNum: "150",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "全友家私有限公司",
|
name: "成都领益科技有限公司",
|
||||||
street: "崇州市经济开发区崇阳大道333号",
|
street: "崇阳街道",
|
||||||
position: "文员统计",
|
position: "电子设备维修师",
|
||||||
recruitmentNum: "5",
|
recruitmentNum: "5",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "全友家私有限公司",
|
name: "日东材料科技 (成都) 有限公司",
|
||||||
street: "崇州市经济开发区崇阳大道333号",
|
street: "崇阳街道",
|
||||||
position: "消防",
|
position: "材料研发工程师",
|
||||||
recruitmentNum: "10",
|
recruitmentNum: "10",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "全友家私有限公司",
|
name: "日东材料科技 (成都) 有限公司",
|
||||||
street: "崇州市经济开发区崇阳大道333号",
|
street: "崇阳街道",
|
||||||
position: "清洁工",
|
position: "设备操作员",
|
||||||
recruitmentNum: "1",
|
recruitmentNum: "8",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "全友家私有限公司",
|
name: "日东材料科技 (成都) 有限公司",
|
||||||
street: "崇州市经济开发区崇阳大道333号",
|
street: "崇阳街道",
|
||||||
position: "兑油工",
|
position: "品保",
|
||||||
recruitmentNum: "1",
|
|
||||||
broker: "张强"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "全友家私有限公司",
|
|
||||||
street: "崇州市经济开发区崇阳大道333号",
|
|
||||||
position: "质检员",
|
|
||||||
recruitmentNum: "10",
|
|
||||||
broker: "张强"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "全友家私有限公司",
|
|
||||||
street: "崇州市经济开发区崇阳大道333号",
|
|
||||||
position: "行政专员",
|
|
||||||
recruitmentNum: "2",
|
|
||||||
broker: "张强"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "全友家私有限公司",
|
|
||||||
street: "崇州市经济开发区崇阳大道333号",
|
|
||||||
position: "巡店专员",
|
|
||||||
recruitmentNum: "10",
|
|
||||||
broker: "张强"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "全友家私有限公司",
|
|
||||||
street: "崇州市经济开发区崇阳大道333号",
|
|
||||||
position: "设备主管",
|
|
||||||
recruitmentNum: "1",
|
|
||||||
broker: "张强"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "四川福蓉科技股份公司",
|
|
||||||
street: "成都崇州市崇双大道518号",
|
|
||||||
position: "电气技术员",
|
|
||||||
recruitmentNum: "10",
|
|
||||||
broker: "张强"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "四川福蓉科技股份公司",
|
|
||||||
street: "成都崇州市崇双大道518号",
|
|
||||||
position: "机械技术员",
|
|
||||||
recruitmentNum: "10",
|
|
||||||
broker: "张强"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "四川福蓉科技股份公司",
|
|
||||||
street: "成都崇州市崇双大道518号",
|
|
||||||
position: "送样员",
|
|
||||||
recruitmentNum: "1",
|
|
||||||
broker: "张强"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "四川福蓉科技股份公司",
|
|
||||||
street: "成都崇州市崇双大道518号",
|
|
||||||
position: "电工",
|
|
||||||
recruitmentNum: "30",
|
|
||||||
broker: "张强"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "四川福蓉科技股份公司",
|
|
||||||
street: "成都崇州市崇双大道518号",
|
|
||||||
position: "钳工",
|
|
||||||
recruitmentNum: "1",
|
|
||||||
broker: "张强"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "四川福蓉科技股份公司",
|
|
||||||
street: "成都崇州市崇双大道518号",
|
|
||||||
position: "修磨工",
|
|
||||||
recruitmentNum: "2",
|
recruitmentNum: "2",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "四川福蓉科技股份公司",
|
name: "四川福蓉科技股份公司",
|
||||||
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
street: "崇双路街道",
|
||||||
position: "操作工（短期工）",
|
position: "铝合金加工技师",
|
||||||
recruitmentNum: "3000",
|
recruitmentNum: "6",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "四川福蓉科技股份公司",
|
name: "索菲亚家居（成都）有限公司",
|
||||||
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
street: "崇阳街道",
|
||||||
position: "作业员",
|
position: "安装售后专员",
|
||||||
recruitmentNum: "1500",
|
recruitmentNum: "10",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "四川福蓉科技股份公司",
|
name: "四川中源智慧电缆有限公司",
|
||||||
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
street: "崇阳街道",
|
||||||
position: "检验员",
|
position: "编织工",
|
||||||
recruitmentNum: "200",
|
recruitmentNum: "3",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "四川福蓉科技股份公司",
|
name: "四川中源智慧电缆有限公司",
|
||||||
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
street: "崇阳街道",
|
||||||
position: "厨工",
|
position: "挤塑工",
|
||||||
recruitmentNum: "50",
|
recruitmentNum: "6",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "四川福蓉科技股份公司",
|
name: "四川中源智慧电缆有限公司",
|
||||||
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
street: "崇阳街道",
|
||||||
position: "厨师",
|
position: "拉丝工",
|
||||||
|
recruitmentNum: "3",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "四川中源智慧电缆有限公司",
|
||||||
|
street: "崇阳街道",
|
||||||
|
position: "成缆工",
|
||||||
|
recruitmentNum: "5",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "四川中源智慧电缆有限公司",
|
||||||
|
street: "崇阳街道",
|
||||||
|
position: "绞线工",
|
||||||
|
recruitmentNum: "5",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "四川展新胶粘材料有限公司",
|
||||||
|
street: "崇阳街道",
|
||||||
|
position: "QC主管",
|
||||||
|
recruitmentNum: "5",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "四川展新胶粘材料有限公司",
|
||||||
|
street: "崇阳街道",
|
||||||
|
position: "销售经理",
|
||||||
|
recruitmentNum: "2",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "四川展新胶粘材料有限公司",
|
||||||
|
street: "崇阳街道",
|
||||||
|
position: "SQE工程师",
|
||||||
|
recruitmentNum: "2",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "四川展新胶粘材料有限公司",
|
||||||
|
street: "崇阳街道",
|
||||||
|
position: "研发工程师",
|
||||||
|
recruitmentNum: "4",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "全友家私有限公司",
|
||||||
|
street: "崇阳街道",
|
||||||
|
position: "组装操作工",
|
||||||
|
recruitmentNum: "8",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "融通农发牧原（崇州）有限责任公司",
|
||||||
|
street: "隆兴镇",
|
||||||
|
position: "养殖技术员",
|
||||||
recruitmentNum: "9",
|
recruitmentNum: "9",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "四川福蓉科技股份公司",
|
name: "四川蜀玻（集团）有限责任公司",
|
||||||
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
street: "崇阳街道",
|
||||||
position: "面点师",
|
position: "制瓶工",
|
||||||
|
recruitmentNum: "5",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "四川蜀玻（集团）有限责任公司",
|
||||||
|
street: "崇阳街道",
|
||||||
|
position: "包装工",
|
||||||
|
recruitmentNum: "10",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "四川蜀玻（集团）有限责任公司",
|
||||||
|
street: "崇阳街道",
|
||||||
|
position: "配料工",
|
||||||
|
recruitmentNum: "5",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "四川蜀玻（集团）有限责任公司",
|
||||||
|
street: "崇阳街道",
|
||||||
|
position: "磨口工",
|
||||||
|
recruitmentNum: "3",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "四川蜀玻（集团）有限责任公司",
|
||||||
|
street: "崇阳街道",
|
||||||
|
position: "灯工",
|
||||||
|
recruitmentNum: "3",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "成都达旺膜结构工程公司",
|
||||||
|
street: "青霞街道",
|
||||||
|
position: "膜结构业务员",
|
||||||
recruitmentNum: "2",
|
recruitmentNum: "2",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "四川福蓉科技股份公司",
|
name: "成都兴兴蓉通信科技有限公司",
|
||||||
street: "崇州市经济开发区创新路三段一号",
|
street: "崇阳街道",
|
||||||
position: "第四事业部操作工",
|
position: "通信设备调试员",
|
||||||
recruitmentNum: "1500",
|
recruitmentNum: "8",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "四川福蓉科技股份公司",
|
name: "四川合丰运维科技有限公司",
|
||||||
street: "成都市崇州市经济开发区创新路三段一号",
|
street: "崇阳街道",
|
||||||
position: "第八事业部操作工",
|
position: "信息化平台值班专员",
|
||||||
recruitmentNum: "1000",
|
recruitmentNum: "2",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "四川福蓉科技股份公司",
|
name: "成都市艾家食品有限公司",
|
||||||
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
street: "街子古镇",
|
||||||
position: "第八事业部技术员",
|
position: "标签打码员",
|
||||||
recruitmentNum: "300",
|
recruitmentNum: "2",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "成都市艾家食品有限公司",
|
||||||
|
street: "街子古镇",
|
||||||
|
position: "销售",
|
||||||
|
recruitmentNum: "2",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "成都市艾家食品有限公司",
|
||||||
|
street: "街子古镇",
|
||||||
|
position: "香料粉碎工",
|
||||||
|
recruitmentNum: "1",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "成都市艾家食品有限公司",
|
||||||
|
street: "街子古镇",
|
||||||
|
position: "生产普工",
|
||||||
|
recruitmentNum: "10",
|
||||||
|
broker: "张强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "成都市艾家食品有限公司",
|
||||||
|
street: "街子古镇",
|
||||||
|
position: "选香料临时工",
|
||||||
|
recruitmentNum: "2",
|
||||||
broker: "张强"
|
broker: "张强"
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
@ -652,7 +702,7 @@ const table3Data = ref([
|
|||||||
background-color: #164155 !important;
|
background-color: #164155 !important;
|
||||||
color: #c4f3fe;
|
color: #c4f3fe;
|
||||||
margin: 0 0 2px 0;
|
margin: 0 0 2px 0;
|
||||||
font-size: 16px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
::v-deep .el-table tr {
|
::v-deep .el-table tr {
|
||||||
background-color: rgba(22, 65, 85, 0.5);
|
background-color: rgba(22, 65, 85, 0.5);
|
||||||
@ -663,7 +713,7 @@ const table3Data = ref([
|
|||||||
::v-deep .el-table td.el-table__cell,
|
::v-deep .el-table td.el-table__cell,
|
||||||
.el-table th.el-table__cell.is-leaf {
|
.el-table th.el-table__cell.is-leaf {
|
||||||
border-bottom: 1px solid rgba(22, 65, 85, 0.5);
|
border-bottom: 1px solid rgba(22, 65, 85, 0.5);
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
::v-deep .el-table th.el-table__cell.is-leaf {
|
::v-deep .el-table th.el-table__cell.is-leaf {
|
||||||
border-bottom: 1px solid rgba(22, 65, 85, 0.9);
|
border-bottom: 1px solid rgba(22, 65, 85, 0.9);
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<div class="map-container">
|
<div class="map-container">
|
||||||
<div class="mapBox" ref="map"></div>
|
<div class="mapBox" ref="map"></div>
|
||||||
<!-- 自定义数据展示面板 -->
|
<!-- 自定义数据展示面板 -->
|
||||||
<div class="data-panel" v-if="selectedPoint">
|
<div class="data-panel" v-if="selectedPoint" style="zoom: 1.5">
|
||||||
<div class="titleBox">
|
<div class="titleBox">
|
||||||
<div class="title">崇州市{{ selectedPoint.name }}</div>
|
<div class="title">崇州市{{ selectedPoint.name }}</div>
|
||||||
<div class="close" @click="selectedPoint = false"></div>
|
<div class="close" @click="selectedPoint = false"></div>
|
||||||
@ -162,13 +162,13 @@ let option = {
|
|||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: "#121516",
|
color: "#121516",
|
||||||
borderColor: "#3a6c80", // 地图区域描边颜色
|
borderColor: "#30DCFF", // 地图区域描边颜色
|
||||||
borderWidth: 1 // 地图区域描边宽度
|
borderWidth: 2 // 地图区域描边宽度
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
color: "#2d5565", // 鼠标悬停时的地图填充颜色
|
color: "#2d5565", // 鼠标悬停时的地图填充颜色
|
||||||
borderColor: "#30DCFF", // 地图区域描边颜色
|
borderColor: "#30DCFF", // 地图区域描边颜色
|
||||||
borderWidth: 1 // 地图区域描边宽度
|
borderWidth: 2 // 地图区域描边宽度
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -191,7 +191,7 @@ let option = {
|
|||||||
formatter: "{b}",
|
formatter: "{b}",
|
||||||
position: "right", // 标签位置在右侧
|
position: "right", // 标签位置在右侧
|
||||||
color: "#fff", // 标签文字颜色
|
color: "#fff", // 标签文字颜色
|
||||||
fontSize: 14,
|
fontSize: 20,
|
||||||
fontWeight: "bold",
|
fontWeight: "bold",
|
||||||
offset: [-140, 0], // 相对于原来位置的偏移量
|
offset: [-140, 0], // 相对于原来位置的偏移量
|
||||||
emphasis: {
|
emphasis: {
|
||||||
@ -246,8 +246,8 @@ onMounted(() => {
|
|||||||
|
|
||||||
.data-panel {
|
.data-panel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 0px;
|
||||||
right: 300px;
|
right: 170px;
|
||||||
width: 243px;
|
width: 243px;
|
||||||
height: 146px;
|
height: 146px;
|
||||||
background: url("~@/assets/images/largeScreen/map-tip-box.png") no-repeat;
|
background: url("~@/assets/images/largeScreen/map-tip-box.png") no-repeat;
|
||||||
|
|||||||
@ -12,7 +12,7 @@ const option = {
|
|||||||
// 设置图形位置
|
// 设置图形位置
|
||||||
grid: {
|
grid: {
|
||||||
top: "50px",
|
top: "50px",
|
||||||
left: "60px",
|
left: "100px",
|
||||||
right: "40px",
|
right: "40px",
|
||||||
bottom: "50px"
|
bottom: "50px"
|
||||||
},
|
},
|
||||||
@ -33,7 +33,9 @@ const option = {
|
|||||||
color: "#CBF2FA" // 文字颜色
|
color: "#CBF2FA" // 文字颜色
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 18 // 设置y轴字体大小
|
||||||
|
},
|
||||||
type: "category",
|
type: "category",
|
||||||
data: [
|
data: [
|
||||||
"1月",
|
"1月",
|
||||||
@ -64,6 +66,9 @@ const option = {
|
|||||||
color: "#CBF2FA" // 文字颜色
|
color: "#CBF2FA" // 文字颜色
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 18 // 设置y轴字体大小
|
||||||
|
},
|
||||||
type: "value"
|
type: "value"
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
@ -72,12 +77,14 @@ const option = {
|
|||||||
type: "line",
|
type: "line",
|
||||||
showBackground: true,
|
showBackground: true,
|
||||||
barWidth: 8,
|
barWidth: 8,
|
||||||
data: [70, 62, 52, 41, 56, 83, 78, 65, 39, 67, 70, 64],
|
data: [7054, 8978, 10261, 8016, 6734, 9299, 7375, 8658, 12625, 0, 0, 0],
|
||||||
|
|
||||||
// 设置柱状图的数值
|
// 设置柱状图的数值
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: "top",
|
position: "top",
|
||||||
color: "#30DCFF"
|
color: "#30DCFF",
|
||||||
|
fontSize: 20
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
//渐变色
|
//渐变色
|
||||||
@ -99,12 +106,13 @@ const option = {
|
|||||||
type: "line",
|
type: "line",
|
||||||
showBackground: true,
|
showBackground: true,
|
||||||
barWidth: 8,
|
barWidth: 8,
|
||||||
data: [54, 32, 45, 18, 30, 45, 34, 23, 45, 54, 32, 23],
|
data: [4370, 5513, 7059, 5244, 4168, 6589, 4773, 5984, 14300, 0, 0, 0],
|
||||||
// 设置柱状图的数值
|
// 设置柱状图的数值
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: "top",
|
position: "top",
|
||||||
color: "#CBF2FA"
|
color: "#CBF2FA",
|
||||||
|
fontSize: 20
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
//渐变色
|
//渐变色
|
||||||
|
|||||||
@ -4,20 +4,20 @@
|
|||||||
<div class="pieMain">
|
<div class="pieMain">
|
||||||
<div class="pieBox" ref="pieRef"></div>
|
<div class="pieBox" ref="pieRef"></div>
|
||||||
<div class="pieTitle">
|
<div class="pieTitle">
|
||||||
<span style="font-size: 24px">288</span><br />需求总数
|
<span style="font-size: 24px">24637</span><br />需求总数
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="pieLsit">
|
<ul class="pieLsit">
|
||||||
<li>
|
<li>
|
||||||
<div><span class="blockOne"></span><span>已满足需求岗位</span></div>
|
<div><span class="blockOne"></span><span>已满足需求岗位</span></div>
|
||||||
<div>
|
<div>
|
||||||
<span class="numb">230</span><span class="proportion">79.86%</span>
|
<span class="numb">8627</span><span class="proportion">35.01%</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div><span class="blockTwo"></span><span>未满足需求岗位</span></div>
|
<div><span class="blockTwo"></span><span>未满足需求岗位</span></div>
|
||||||
<div>
|
<div>
|
||||||
<span class="numb">58</span><span class="proportion">20.14%</span>
|
<span class="numb">16010</span><span class="proportion">64.99%</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -53,8 +53,16 @@ const option = {
|
|||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
data: [
|
data: [
|
||||||
{ value: 230, name: "已满足需求岗位", itemStyle: { color: "#58A8FF" } },
|
{
|
||||||
{ value: 58, name: "未满足需求岗位", itemStyle: { color: "#30DCFF" } }
|
value: 8627,
|
||||||
|
name: "已满足需求岗位",
|
||||||
|
itemStyle: { color: "#58A8FF" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 16010,
|
||||||
|
name: "未满足需求岗位",
|
||||||
|
itemStyle: { color: "#30DCFF" }
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@ -90,6 +98,7 @@ onMounted(() => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
margin-top: -10px;
|
margin-top: -10px;
|
||||||
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ul.pieLsit {
|
ul.pieLsit {
|
||||||
@ -107,6 +116,7 @@ ul.pieLsit {
|
|||||||
border-radius: 4px 4px 4px 4px;
|
border-radius: 4px 4px 4px 4px;
|
||||||
border: 1px solid rgba(203, 242, 250, 0.2);
|
border: 1px solid rgba(203, 242, 250, 0.2);
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
|
font-size: 18px;
|
||||||
> div {
|
> div {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
|
|||||||
@ -17,51 +17,56 @@ import { ref, reactive, computed, onMounted } from "vue";
|
|||||||
const workList = ref([
|
const workList = ref([
|
||||||
{
|
{
|
||||||
name: "普工",
|
name: "普工",
|
||||||
num: 71
|
num: 45700
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "操作员",
|
|
||||||
num: 45
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "厨师",
|
name: "厨师",
|
||||||
num: 36
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "保洁员",
|
|
||||||
num: 68
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "车床技工",
|
|
||||||
num: 154
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "电工",
|
|
||||||
num: 28
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "焊工",
|
|
||||||
num: 34
|
num: 34
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "钳工",
|
name: "车床技工",
|
||||||
num: 51
|
num: 220
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "焊工",
|
||||||
|
num: 149
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "机修",
|
name: "机修",
|
||||||
num: 27
|
num: 83
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "汽修",
|
|
||||||
num: 49
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "车间主管",
|
name: "车间主管",
|
||||||
num: 15
|
num: 23
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "操作员",
|
||||||
|
num: 670
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "保洁员",
|
||||||
|
num: 123
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "电工",
|
||||||
|
num: 149
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "钳工",
|
||||||
|
num: 91
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "汽修",
|
||||||
|
num: 60
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "技术研发员",
|
name: "技术研发员",
|
||||||
num: 82
|
num: 28
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
// 生命周期钩子
|
// 生命周期钩子
|
||||||
@ -85,6 +90,7 @@ ul.schoolLsit {
|
|||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
font-size: 18px;
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@ -33,7 +33,9 @@ const option = {
|
|||||||
color: "#CBF2FA" // 文字颜色
|
color: "#CBF2FA" // 文字颜色
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 18 // 设置y轴字体大小
|
||||||
|
},
|
||||||
type: "category",
|
type: "category",
|
||||||
data: ["成都", "德阳", "绵阳", "崇州", "广汉", "巴中", "省外"]
|
data: ["成都", "德阳", "绵阳", "崇州", "广汉", "巴中", "省外"]
|
||||||
},
|
},
|
||||||
@ -51,6 +53,9 @@ const option = {
|
|||||||
color: "#CBF2FA" // 文字颜色
|
color: "#CBF2FA" // 文字颜色
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 18 // 设置y轴字体大小
|
||||||
|
},
|
||||||
type: "value"
|
type: "value"
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
|
|||||||
@ -24,11 +24,11 @@ const statisticsData = ref([
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "服务求职者数",
|
title: "服务求职者数",
|
||||||
value: "20000+"
|
value: "58000"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "挖掘岗位数",
|
title: "挖掘岗位数",
|
||||||
value: 24637
|
value: 79000
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "网点数",
|
title: "网点数",
|
||||||
@ -56,7 +56,7 @@ ul.statisticsBox {
|
|||||||
height: 38px;
|
height: 38px;
|
||||||
line-height: 38px;
|
line-height: 38px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 32px;
|
font-size: 40px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
background: -webkit-linear-gradient(#cbf2fa, #30dcff);
|
background: -webkit-linear-gradient(#cbf2fa, #30dcff);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
@ -68,7 +68,7 @@ ul.statisticsBox {
|
|||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #cbf2fa;
|
color: #cbf2fa;
|
||||||
font-size: 16px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user