兴蜀来了平台业务数据大屏页面、三级劳务体系⼈员数据大屏页面、“产教评”融合培训平台大屏页面
This commit is contained in:
592
src/views/threeLaborService/components/companyProfile.vue
Normal file
592
src/views/threeLaborService/components/companyProfile.vue
Normal file
@ -0,0 +1,592 @@
|
||||
<template>
|
||||
<div class="mainBox">
|
||||
<div class="title"><span>服务企业情况</span></div>
|
||||
<div class="content">
|
||||
<!-- tabs切换 -->
|
||||
<ul class="tabsBox">
|
||||
<li
|
||||
v-for="(item, index) in tabsData"
|
||||
:key="item.title"
|
||||
:class="{ active: activeIndex === index }"
|
||||
@click="handleTabClick(index)"
|
||||
>
|
||||
<div class="tabsMainBox">
|
||||
<div class="tabsTitle">{{ item.title }}</div>
|
||||
<div class="tabsContent">
|
||||
<div>
|
||||
<span>{{ item.content[0].title }}</span
|
||||
><br />
|
||||
<span class="num">{{ item.content[0].num }}</span
|
||||
><span>家</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.content[1].title }}</span
|
||||
><br />
|
||||
<span class="num">{{ item.content[1].num }}</span
|
||||
><span>个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 表格 -->
|
||||
<div class="tableBox">
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<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="street" label="所属街道" />
|
||||
<el-table-column prop="position" label="招聘岗位" />
|
||||
<el-table-column prop="recruitmentNum" label="招聘人数" />
|
||||
<el-table-column prop="broker" label="服务经济人" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { el } from "element-plus/es/locale.mjs";
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
const tabsData = ref([
|
||||
{
|
||||
title: "第一产业企业",
|
||||
content: [
|
||||
{
|
||||
title: "服务企业数",
|
||||
num: "25"
|
||||
},
|
||||
{
|
||||
title: "推荐岗位数",
|
||||
num: "67"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "第二产业企业",
|
||||
content: [
|
||||
{
|
||||
title: "服务企业数",
|
||||
num: "14"
|
||||
},
|
||||
{
|
||||
title: "推荐岗位数",
|
||||
num: "47"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "第三产业企业",
|
||||
content: [
|
||||
{
|
||||
title: "服务企业数",
|
||||
num: "34"
|
||||
},
|
||||
{
|
||||
title: "推荐岗位数",
|
||||
num: "135"
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
// 添加选中项状态
|
||||
const activeIndex = ref(0); // 默认选中第一项
|
||||
// 添加点击处理函数
|
||||
const handleTabClick = (index) => {
|
||||
activeIndex.value = index;
|
||||
if (index == 0) {
|
||||
tableData.value = table1Data.value;
|
||||
} else if (index == 1) {
|
||||
tableData.value = table2Data.value;
|
||||
} else if (index == 2) {
|
||||
tableData.value = table3Data.value;
|
||||
}
|
||||
};
|
||||
const tableData = ref([
|
||||
{
|
||||
name: "比亚迪电子科技 (崇州)有限公司",
|
||||
street: "大划街道",
|
||||
position: "检验员",
|
||||
recruitmentNum: "20",
|
||||
broker: "张强"
|
||||
},
|
||||
{
|
||||
name: "日东材料科技（成都）有限公司",
|
||||
street: "重阳街道",
|
||||
position: "检验员",
|
||||
recruitmentNum: "10",
|
||||
broker: "李强"
|
||||
},
|
||||
{
|
||||
name: "全友家私有限公司",
|
||||
street: "大划街道",
|
||||
position: "木工",
|
||||
recruitmentNum: "20",
|
||||
broker: "田伟"
|
||||
},
|
||||
{
|
||||
name: "融通农发牧原（崇州）有限责任公司",
|
||||
street: "三江街道",
|
||||
position: "普工",
|
||||
recruitmentNum: "80",
|
||||
broker: "张天爱"
|
||||
},
|
||||
{
|
||||
name: "成都领益科技有限公司",
|
||||
street: "江源街道",
|
||||
position: "科技研发员",
|
||||
recruitmentNum: "2",
|
||||
broker: "王艾伦"
|
||||
},
|
||||
{
|
||||
name: "四川福蓉科技股份公司",
|
||||
street: "重阳街道",
|
||||
position: "重阳街道",
|
||||
recruitmentNum: "80",
|
||||
broker: "周有方"
|
||||
},
|
||||
{
|
||||
name: "索菲亚家居（成都）有限公司",
|
||||
street: "大划街道",
|
||||
position: "车床操作员",
|
||||
recruitmentNum: "12",
|
||||
broker: "范俊明"
|
||||
},
|
||||
{
|
||||
name: "成都招安信息科技有限公司",
|
||||
street: "重阳街道",
|
||||
position: "操作员",
|
||||
recruitmentNum: "10",
|
||||
broker: "赵旭日"
|
||||
},
|
||||
{
|
||||
name: "比亚迪电子科技 (崇州)有限公司",
|
||||
street: "大划街道",
|
||||
position: "研发员",
|
||||
recruitmentNum: "3",
|
||||
broker: "李强"
|
||||
},
|
||||
{
|
||||
name: "比亚迪电子科技 (崇州)有限公司",
|
||||
street: "大划街道",
|
||||
position: "普工",
|
||||
recruitmentNum: "100",
|
||||
broker: "李强"
|
||||
},
|
||||
{
|
||||
name: "成都领益科技有限公司",
|
||||
street: "江源街道",
|
||||
position: "技术工",
|
||||
recruitmentNum: "3",
|
||||
broker: "王芳"
|
||||
},
|
||||
{
|
||||
name: "成都领益科技有限公司",
|
||||
street: "江源街道",
|
||||
position: "研发员",
|
||||
recruitmentNum: "10",
|
||||
broker: "王芳"
|
||||
}
|
||||
]);
|
||||
const table1Data = ref([
|
||||
{
|
||||
name: "捷普科技（成都）有限公司",
|
||||
street: "大划街道",
|
||||
position: "技术员",
|
||||
recruitmentNum: "5",
|
||||
broker: "田家强"
|
||||
},
|
||||
{
|
||||
name: "全友家私有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "科技员",
|
||||
recruitmentNum: "12",
|
||||
broker: "章尤为"
|
||||
},
|
||||
{
|
||||
name: "成都领益科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "开发员",
|
||||
recruitmentNum: "5",
|
||||
broker: "周雨薇"
|
||||
},
|
||||
{
|
||||
name: "四川福蓉科技股份公司",
|
||||
street: "崇阳街道",
|
||||
position: "普工",
|
||||
recruitmentNum: "30",
|
||||
broker: "张天爱"
|
||||
},
|
||||
{
|
||||
name: "成都市裕同印刷有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "印刷工",
|
||||
recruitmentNum: "8",
|
||||
broker: "周伟"
|
||||
},
|
||||
{
|
||||
name: "明珠家具股份有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "木工",
|
||||
recruitmentNum: "8",
|
||||
broker: "李伟芳"
|
||||
},
|
||||
{
|
||||
name: "康泰塑胶科技集团有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "普工",
|
||||
recruitmentNum: "30",
|
||||
broker: "赵德柱"
|
||||
},
|
||||
{
|
||||
name: "索菲亚家居（成都）有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "操作员",
|
||||
recruitmentNum: "17",
|
||||
broker: "田一鸣"
|
||||
},
|
||||
{
|
||||
name: "四川一宇钢结构工程有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "研发员",
|
||||
recruitmentNum: "7",
|
||||
broker: "胡江"
|
||||
},
|
||||
{
|
||||
name: "四川省川建管道有限公司",
|
||||
street: "元通镇",
|
||||
position: "普工",
|
||||
recruitmentNum: "20",
|
||||
broker: "王杰"
|
||||
},
|
||||
{
|
||||
name: "日东材料科技（成都）有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "普工",
|
||||
recruitmentNum: "12",
|
||||
broker: "李堃"
|
||||
},
|
||||
{
|
||||
name: "崇州君健塑胶有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "研发员",
|
||||
recruitmentNum: "6",
|
||||
broker: "范军"
|
||||
}
|
||||
]);
|
||||
const table2Data = ref([
|
||||
{
|
||||
name: "成都川西蓄电池（集团）有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "检验员",
|
||||
recruitmentNum: "20",
|
||||
broker: "张强"
|
||||
},
|
||||
{
|
||||
name: "四川省旺达饲料有限公司",
|
||||
street: "三江镇",
|
||||
position: "销售员",
|
||||
recruitmentNum: "10",
|
||||
broker: "周伟"
|
||||
},
|
||||
{
|
||||
name: "四川展新胶粘材料有限公司",
|
||||
street: "崇庆街道",
|
||||
position: "普工",
|
||||
recruitmentNum: "30",
|
||||
broker: "章尤为"
|
||||
},
|
||||
{
|
||||
name: "成都青洋电子材料有限公司",
|
||||
street: "崇庆街道",
|
||||
position: "质检员",
|
||||
recruitmentNum: "18",
|
||||
broker: "熊忠"
|
||||
},
|
||||
{
|
||||
name: "四川辉达管业科技有限公司",
|
||||
street: "观胜镇",
|
||||
position: "普工",
|
||||
recruitmentNum: "20",
|
||||
broker: "赵德钢"
|
||||
},
|
||||
{
|
||||
name: "四川聚力建材科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "销售员",
|
||||
recruitmentNum: "8",
|
||||
broker: "张强"
|
||||
},
|
||||
{
|
||||
name: "四川汇源塑料光纤有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "质检员",
|
||||
recruitmentNum: "9",
|
||||
broker: "王军辉"
|
||||
},
|
||||
{
|
||||
name: "四川雨嘉建筑科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "销售员",
|
||||
recruitmentNum: "10",
|
||||
broker: "田军"
|
||||
},
|
||||
{
|
||||
name: "成都智能美航空科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "研发员",
|
||||
recruitmentNum: "10",
|
||||
broker: "王安国"
|
||||
},
|
||||
{
|
||||
name: "四川金戈铁马钢结构有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "普工",
|
||||
recruitmentNum: "30",
|
||||
broker: "王维"
|
||||
},
|
||||
{
|
||||
name: "成都通发工程机械有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "技术工",
|
||||
recruitmentNum: "20",
|
||||
broker: "章维"
|
||||
},
|
||||
{
|
||||
name: "四川盛旭科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "研发员",
|
||||
recruitmentNum: "8",
|
||||
broker: "范俊茂"
|
||||
}
|
||||
]);
|
||||
const table3Data = ref([
|
||||
{
|
||||
name: "崇州市鸿立机械有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "检验员",
|
||||
recruitmentNum: "10",
|
||||
broker: "王刚"
|
||||
},
|
||||
{
|
||||
name: "四川铭扬电气设备有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "检验员",
|
||||
recruitmentNum: "10",
|
||||
broker: "赵德柱"
|
||||
},
|
||||
{
|
||||
name: "四川汇控机电设备有限公司",
|
||||
street: "羊马街道",
|
||||
position: "机床工",
|
||||
recruitmentNum: "10",
|
||||
broker: "周嘉"
|
||||
},
|
||||
{
|
||||
name: "四川省万国盛数控",
|
||||
street: "崇阳街道",
|
||||
position: "普工",
|
||||
recruitmentNum: "30",
|
||||
broker: "周伟"
|
||||
},
|
||||
{
|
||||
name: "成都天特模具科技有限公司",
|
||||
street: "羊马街道",
|
||||
position: "操作员",
|
||||
recruitmentNum: "20",
|
||||
broker: "田刚"
|
||||
},
|
||||
{
|
||||
name: "成都烨腾金属制品制造有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "普工",
|
||||
recruitmentNum: "50",
|
||||
broker: "赵旭日"
|
||||
},
|
||||
{
|
||||
name: "捷普科技（成都）有限公司",
|
||||
street: "大划街道",
|
||||
position: "技术员",
|
||||
recruitmentNum: "5",
|
||||
broker: "田家强"
|
||||
},
|
||||
{
|
||||
name: "全友家私有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "科技员",
|
||||
recruitmentNum: "12",
|
||||
broker: "章尤为"
|
||||
},
|
||||
{
|
||||
name: "成都领益科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "开发员",
|
||||
recruitmentNum: "5",
|
||||
broker: "周雨薇"
|
||||
},
|
||||
{
|
||||
name: "四川福蓉科技股份公司",
|
||||
street: "大划街道",
|
||||
position: "普工",
|
||||
recruitmentNum: "100",
|
||||
broker: "李强"
|
||||
},
|
||||
{
|
||||
name: "成都市裕同印刷有限公司",
|
||||
street: "江源街道",
|
||||
position: "技术工",
|
||||
recruitmentNum: "3",
|
||||
broker: "王芳"
|
||||
},
|
||||
{
|
||||
name: "明珠家具股份有限公司",
|
||||
street: "江源街道",
|
||||
position: "研发员",
|
||||
recruitmentNum: "10",
|
||||
broker: "王芳"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mainBox {
|
||||
width: 1862px;
|
||||
height: 1000px;
|
||||
margin: 0 auto;
|
||||
.title {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
background: url("~@/assets/images/largeScreen/bigBox-title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 0 0 20px;
|
||||
span {
|
||||
background: -webkit-linear-gradient(#dbf9ff, #a9f0ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 966px;
|
||||
background: url("~@/assets/images/largeScreen/bigBox-bg.png") no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: center bottom;
|
||||
ul.tabsBox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
padding: 30px 0 0 0;
|
||||
li {
|
||||
width: 308px;
|
||||
height: 95px;
|
||||
cursor: pointer;
|
||||
margin: 0 15px;
|
||||
&:nth-child(1) {
|
||||
background: url("~@/assets/images/largeScreen/tabs1.png") no-repeat
|
||||
center;
|
||||
background-size: 100%;
|
||||
&.active {
|
||||
background: url("~@/assets/images/largeScreen/tabs1-active.png")
|
||||
no-repeat center;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
background: url("~@/assets/images/largeScreen/tabs2.png") no-repeat
|
||||
center;
|
||||
background-size: 100%;
|
||||
&.active {
|
||||
background: url("~@/assets/images/largeScreen/tabs2-active.png")
|
||||
no-repeat center;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
background: url("~@/assets/images/largeScreen/tabs3.png") no-repeat
|
||||
center;
|
||||
background-size: 100%;
|
||||
&.active {
|
||||
background: url("~@/assets/images/largeScreen/tabs3-active.png")
|
||||
no-repeat center;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
.tabsMainBox {
|
||||
width: 213px;
|
||||
height: 73px;
|
||||
background: url("~@/assets/images/largeScreen/tabs-main-bg.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
margin: 14px 0 0 80px;
|
||||
.tabsTitle {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: #cbf2fa;
|
||||
}
|
||||
.tabsContent {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
& > div {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
padding: 7px 0 0 0;
|
||||
color: #cbf2fa;
|
||||
span.num {
|
||||
display: inline-block;
|
||||
padding: 0 5px 0 0;
|
||||
color: #d9e7ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
margin: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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: 17px 0;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background-color: #164155 !important;
|
||||
color: #c4f3fe;
|
||||
margin: 0 0 2px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
::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: 18px;
|
||||
}
|
||||
::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>
|
||||
317
src/views/threeLaborService/components/map.vue
Normal file
317
src/views/threeLaborService/components/map.vue
Normal file
@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div class="map-container">
|
||||
<div class="mapBox" ref="map"></div>
|
||||
<!-- 自定义数据展示面板 -->
|
||||
<div class="data-panel" v-if="selectedPoint">
|
||||
<div class="titleBox">
|
||||
<div class="title">崇州市{{ selectedPoint.name }}</div>
|
||||
<div class="close" @click="selectedPoint = false"></div>
|
||||
</div>
|
||||
<div class="dataBox">
|
||||
<div class="title">网点数</div>
|
||||
<div class="count">
|
||||
<span>{{ selectedPoint.branch }}</span
|
||||
>个
|
||||
</div>
|
||||
</div>
|
||||
<div class="dataBox">
|
||||
<div class="title">经纪人数</div>
|
||||
<div class="count">
|
||||
<span>{{ selectedPoint.broker }}</span
|
||||
>人
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="mapBox" ref="map"></div> -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
// 引入Echarts
|
||||
import * as echarts from "echarts";
|
||||
// 引入崇州市地图json数据
|
||||
import chongzhouJSON from "@/assets/json/510184.json";
|
||||
// 引入本地撒点图片
|
||||
import pointImage from "@/assets/images/largeScreen/map-dian.png";
|
||||
import pointImageActive from "@/assets/images/largeScreen/map-dian-active.png";
|
||||
// 获取地图DOM元素
|
||||
let map = ref();
|
||||
// 注册崇州地图
|
||||
echarts.registerMap("chongzhou", chongzhouJSON);
|
||||
// 添加选中状态管理
|
||||
const selectedPoint = ref(null);
|
||||
const initialPoints = [
|
||||
{
|
||||
name: "崇阳街道",
|
||||
value: [103.675571, 30.641527, 150],
|
||||
branch: 2,
|
||||
broker: 13
|
||||
},
|
||||
{
|
||||
name: "羊马街道",
|
||||
value: [103.752865, 30.661384, 200],
|
||||
branch: 1,
|
||||
broker: 8
|
||||
},
|
||||
{
|
||||
name: "三江街道",
|
||||
value: [103.791143, 30.548786, 180],
|
||||
branch: 3,
|
||||
broker: 17
|
||||
},
|
||||
{
|
||||
name: "江源街道",
|
||||
value: [103.78269, 30.595347, 160],
|
||||
branch: 2,
|
||||
broker: 9
|
||||
},
|
||||
{
|
||||
name: "大划街道",
|
||||
value: [103.742544, 30.566601, 140],
|
||||
branch: 1,
|
||||
broker: 5
|
||||
},
|
||||
{
|
||||
name: "崇庆街道",
|
||||
value: [103.701207, 30.609985, 140],
|
||||
branch: 2,
|
||||
broker: 21
|
||||
},
|
||||
{
|
||||
name: "廖家镇",
|
||||
value: [103.701822, 30.700901, 140],
|
||||
branch: 2,
|
||||
broker: 15
|
||||
},
|
||||
{
|
||||
name: "元通镇",
|
||||
value: [103.630513, 30.723679, 140],
|
||||
branch: 1,
|
||||
broker: 5
|
||||
},
|
||||
{
|
||||
name: "观胜镇",
|
||||
value: [103.6786, 30.747128, 140],
|
||||
branch: 1,
|
||||
broker: 8
|
||||
},
|
||||
{
|
||||
name: "怀远镇",
|
||||
value: [103.541274, 30.745512, 140],
|
||||
branch: 2,
|
||||
broker: 17
|
||||
},
|
||||
{
|
||||
name: "街子镇",
|
||||
value: [103.55634, 30.819587, 140],
|
||||
branch: 2,
|
||||
broker: 19
|
||||
},
|
||||
{
|
||||
name: "文井江镇",
|
||||
value: [103.41922, 30.771208, 140],
|
||||
branch: 1,
|
||||
broker: 11
|
||||
},
|
||||
{
|
||||
name: "白头镇",
|
||||
value: [103.617706, 30.621786, 140],
|
||||
branch: 2,
|
||||
broker: 9
|
||||
},
|
||||
{
|
||||
name: "道明镇",
|
||||
value: [103.612235, 30.667572, 140],
|
||||
branch: 2,
|
||||
broker: 21
|
||||
},
|
||||
{
|
||||
name: "隆兴镇",
|
||||
value: [103.635954, 30.584191, 140],
|
||||
branch: 2,
|
||||
broker: 18
|
||||
}
|
||||
];
|
||||
// 地图参数设置
|
||||
let option = {
|
||||
// tooltip: {},
|
||||
geo: [
|
||||
{
|
||||
type: "map",
|
||||
map: "chongzhou",
|
||||
roam: false, // 关键：禁用拖拽和缩放
|
||||
zoom: 1.2,
|
||||
scaleLimit: {
|
||||
// 额外限制缩放比例
|
||||
min: 1.2,
|
||||
max: 1.2
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
emphasis: {
|
||||
show: true, // 确保悬停时标签显示
|
||||
color: "#ffff00", // 鼠标悬停时的文字颜色
|
||||
fontSize: 14, // 鼠标悬停时的文字大小
|
||||
fontWeight: "bold" // 鼠标悬停时的文字粗细
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#121516",
|
||||
borderColor: "#3a6c80", // 地图区域描边颜色
|
||||
borderWidth: 1 // 地图区域描边宽度
|
||||
},
|
||||
emphasis: {
|
||||
color: "#2d5565", // 鼠标悬停时的地图填充颜色
|
||||
borderColor: "#30DCFF", // 地图区域描边颜色
|
||||
borderWidth: 1 // 地图区域描边宽度
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "城市点位",
|
||||
type: "scatter", // 散点图类型
|
||||
coordinateSystem: "geo", // 使用地理坐标系
|
||||
selectedMode: "single", // 启用选择模式
|
||||
data: initialPoints,
|
||||
symbolSize: function (val) {
|
||||
// 根据数值大小动态调整点的大小
|
||||
return [180, 54];
|
||||
},
|
||||
// 将点位向右偏移10px，向下偏移5px
|
||||
symbolOffset: [20, 0],
|
||||
label: {
|
||||
show: true,
|
||||
formatter: "{b}",
|
||||
position: "right", // 标签位置在右侧
|
||||
color: "#fff", // 标签文字颜色
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
offset: [-140, 0], // 相对于原来位置的偏移量
|
||||
emphasis: {
|
||||
show: true, // 高亮时也显示标签
|
||||
color: "#ffff00" // 高亮时的文字颜色
|
||||
}
|
||||
},
|
||||
// 动态设置图标
|
||||
symbol: function (value, params) {
|
||||
if (selectedPoint.value && selectedPoint.value.name === params.name) {
|
||||
return "image://" + pointImageActive;
|
||||
}
|
||||
return "image://" + pointImage;
|
||||
},
|
||||
// 选中状态样式
|
||||
select: {
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffff00"
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#ff0000" // 可以自定义选中时的样式
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
let myMap = echarts.init(map.value);
|
||||
// 设置配置项
|
||||
myMap.setOption(option);
|
||||
// 添加点击事件
|
||||
myMap.on("click", "series", function (params) {
|
||||
selectedPoint.value = params.data;
|
||||
myMap.setOption(option);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mapBox {
|
||||
width: 1400px;
|
||||
height: 780px;
|
||||
margin: 60px auto 0;
|
||||
}
|
||||
|
||||
.data-panel {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 300px;
|
||||
width: 243px;
|
||||
height: 146px;
|
||||
background: url("~@/assets/images/largeScreen/map-tip-box.png") no-repeat;
|
||||
background-size: 100%;
|
||||
color: #fff;
|
||||
z-index: 1000;
|
||||
.titleBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0 0 0 8px;
|
||||
background: -webkit-linear-gradient(#fff9db, #fff1a9);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: bold;
|
||||
}
|
||||
.close {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: url("~@/assets/images/largeScreen/close.png") no-repeat;
|
||||
background-size: 100%;
|
||||
margin: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.dataBox {
|
||||
width: 160px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid rgba(255, 220, 48, 0.2);
|
||||
margin: 10px 0 0 63px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
.count {
|
||||
span {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
padding: 0 5px 0 0;
|
||||
font-weight: bold;
|
||||
color: #ffdc30;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 42px;
|
||||
background: url("~@/assets/images/largeScreen/broker.png") no-repeat;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
left: -44px;
|
||||
top: -1px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
background: url("~@/assets/images/largeScreen/branch.png") no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
src/views/threeLaborService/components/solveEmployment-bhqs.vue
Normal file
142
src/views/threeLaborService/components/solveEmployment-bhqs.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="bhqsChart" ref="bhqsRef"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const bhqsRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: "50px",
|
||||
left: "60px",
|
||||
right: "40px",
|
||||
bottom: "50px"
|
||||
},
|
||||
// 设置图例
|
||||
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" // 文字颜色
|
||||
}
|
||||
},
|
||||
|
||||
type: "category",
|
||||
data: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月"
|
||||
]
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#A1C7CD"], // 线颜色
|
||||
opacity: 0.2 // 透明度
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "岗位需求数",
|
||||
type: "line",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [70, 62, 52, 41, 56, 83, 78, 65, 39, 67, 70, 64],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#30DCFF"
|
||||
},
|
||||
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)" }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "实际入职数",
|
||||
type: "line",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [54, 32, 45, 18, 30, 45, 34, 23, 45, 54, 32, 23],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#CBF2FA"
|
||||
},
|
||||
itemStyle: {
|
||||
//渐变色
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "rgba(178, 217, 223, 1)" }
|
||||
// { offset: 1, color: "rgba(203, 242, 250, 0.08)" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (bhqsRef.value) {
|
||||
const chart = echarts.init(bhqsRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bhqsChart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<!-- 页面的 HTML 模板部分 -->
|
||||
<div>
|
||||
<div class="pieMain">
|
||||
<div class="pieBox" ref="pieRef"></div>
|
||||
<div class="pieTitle">
|
||||
<span style="font-size: 24px">288</span><br />需求总数
|
||||
</div>
|
||||
</div>
|
||||
<ul class="pieLsit">
|
||||
<li>
|
||||
<div><span class="blockOne"></span><span>已满足需求岗位</span></div>
|
||||
<div>
|
||||
<span class="numb">230</span><span class="proportion">79.86%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockTwo"></span><span>未满足需求岗位</span></div>
|
||||
<div>
|
||||
<span class="numb">58</span><span class="proportion">20.14%</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const pieRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
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: 230, name: "已满足需求岗位", itemStyle: { color: "#58A8FF" } },
|
||||
{ value: 58, name: "未满足需求岗位", itemStyle: { color: "#30DCFF" } }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (pieRef.value) {
|
||||
const chart = echarts.init(pieRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pieMain {
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
.pieBox {
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
|
||||
center;
|
||||
background-size: 100%;
|
||||
}
|
||||
.pieTitle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
ul.pieLsit {
|
||||
margin: 0 20px;
|
||||
border: 1px solid transparent;
|
||||
padding: 10px 0 0 0;
|
||||
li {
|
||||
// font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
background: rgba(203, 242, 250, 0.2);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid rgba(203, 242, 250, 0.2);
|
||||
margin-top: 12px;
|
||||
> div {
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
}
|
||||
.blockOne,
|
||||
.blockTwo,
|
||||
.blockThree {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.blockOne {
|
||||
background-color: #58a8ff;
|
||||
}
|
||||
.blockTwo {
|
||||
background-color: #30dcff;
|
||||
}
|
||||
.blockThree {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.proportion {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<!-- 页面的 HTML 模板部分 -->
|
||||
|
||||
<ul class="schoolLsit">
|
||||
<li v-for="(item, index) in workList" :key="index">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div>
|
||||
<span class="numb">{{ item.num }}</span
|
||||
><span>人</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
const workList = ref([
|
||||
{
|
||||
name: "普工",
|
||||
num: 71
|
||||
},
|
||||
{
|
||||
name: "操作员",
|
||||
num: 45
|
||||
},
|
||||
{
|
||||
name: "厨师",
|
||||
num: 36
|
||||
},
|
||||
{
|
||||
name: "保洁员",
|
||||
num: 68
|
||||
},
|
||||
{
|
||||
name: "车床技工",
|
||||
num: 154
|
||||
},
|
||||
{
|
||||
name: "电工",
|
||||
num: 28
|
||||
},
|
||||
{
|
||||
name: "焊工",
|
||||
num: 34
|
||||
},
|
||||
{
|
||||
name: "钳工",
|
||||
num: 51
|
||||
},
|
||||
{
|
||||
name: "机修",
|
||||
num: 27
|
||||
},
|
||||
{
|
||||
name: "汽修",
|
||||
num: 49
|
||||
},
|
||||
{
|
||||
name: "车间主管",
|
||||
num: 15
|
||||
},
|
||||
{
|
||||
name: "技术研发员",
|
||||
num: 82
|
||||
}
|
||||
]);
|
||||
// 生命周期钩子
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
ul.schoolLsit {
|
||||
margin: 0 18px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
li {
|
||||
height: 42px;
|
||||
width: 220px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid rgba(48, 220, 255, 0.2);
|
||||
// box-sizing: border-box;
|
||||
margin: 20px 0 0 48px;
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background: url("~@/assets/images/recruitment/people@2x.png") no-repeat
|
||||
center;
|
||||
background-size: 100%;
|
||||
left: -48px;
|
||||
top: -1px;
|
||||
}
|
||||
> div {
|
||||
height: 100%;
|
||||
line-height: 42px;
|
||||
}
|
||||
.name {
|
||||
color: #cbf2fa;
|
||||
}
|
||||
.numb {
|
||||
color: #30dcff;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
padding: 0 0.3vw 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
129
src/views/threeLaborService/components/solveEmployment-rcgy.vue
Normal file
129
src/views/threeLaborService/components/solveEmployment-rcgy.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="rcgyBox" ref="rcgyRef"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const rcgyRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: "40px",
|
||||
left: "50px",
|
||||
right: "30px",
|
||||
bottom: "30px"
|
||||
},
|
||||
// 设置图例
|
||||
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" // 文字颜色
|
||||
}
|
||||
},
|
||||
|
||||
type: "category",
|
||||
data: ["成都", "德阳", "绵阳", "崇州", "广汉", "巴中", "省外"]
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#A1C7CD"], // 线颜色
|
||||
opacity: 0.2 // 透明度
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "岗位需求数",
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [76, 32, 87, 65, 34, 23, 12],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#30DCFF"
|
||||
},
|
||||
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)" }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "实际入职数",
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [34, 15, 45, 24, 12, 10, 5],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#CBF2FA"
|
||||
},
|
||||
itemStyle: {
|
||||
//渐变色
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "rgba(203, 242, 250, 1)" },
|
||||
{ offset: 1, color: "rgba(203, 242, 250, 0.08)" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (rcgyRef.value) {
|
||||
const chart = echarts.init(rcgyRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rcgyBox {
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
}
|
||||
</style>
|
||||
96
src/views/threeLaborService/components/solveEmployment.vue
Normal file
96
src/views/threeLaborService/components/solveEmployment.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="mainBox">
|
||||
<div class="title"><span>解决就业情况</span></div>
|
||||
<div class="content">
|
||||
<div class="bhqsBox">
|
||||
<div class="pubTitle">历史促就业变化趋势</div>
|
||||
<BHQS></BHQS>
|
||||
</div>
|
||||
<ul class="otherBox">
|
||||
<li>
|
||||
<div class="pubTitle">各个地区人才供需统计</div>
|
||||
<RCGY></RCGY>
|
||||
</li>
|
||||
<li>
|
||||
<div class="pubTitle">岗位需求对比</div>
|
||||
<GWXQDB></GWXQDB>
|
||||
</li>
|
||||
<li>
|
||||
<div class="pubTitle">岗位需求统计</div>
|
||||
<GWXQTJ></GWXQTJ>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import BHQS from "./solveEmployment-bhqs.vue";
|
||||
import RCGY from "./solveEmployment-rcgy.vue";
|
||||
import GWXQDB from "./solveEmployment-gwxqdb.vue";
|
||||
import GWXQTJ from "./solveEmployment-gwxqtj.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mainBox {
|
||||
width: 1862px;
|
||||
height: 1000px;
|
||||
margin: 0 auto;
|
||||
.title {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
background: url("~@/assets/images/largeScreen/bigBox-title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 0 0 20px;
|
||||
span {
|
||||
background: -webkit-linear-gradient(#dbf9ff, #a9f0ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 966px;
|
||||
background: url("~@/assets/images/largeScreen/bigBox-bg.png") no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: center bottom;
|
||||
border: 1px solid transparent;
|
||||
.pubTitle {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
color: #c4f3fe;
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
background: url("~@/assets/images/recruitment/card-title@2x.png")
|
||||
no-repeat center;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
.bhqsBox {
|
||||
width: 1802px;
|
||||
height: 442px;
|
||||
margin: 0 auto;
|
||||
margin-top: 29px;
|
||||
background: url("~@/assets/images/largeScreen/bhqs-bg.png") no-repeat 0 0;
|
||||
background-size: 100%;
|
||||
border-top: 1px solid transparent; /* 添加透明边框防止塌陷 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
ul.otherBox {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0 10px;
|
||||
margin-top: 20px;
|
||||
li {
|
||||
width: 588px;
|
||||
height: 442px;
|
||||
background: url("~@/assets/images/largeScreen/otherBox-li-bg.png")
|
||||
no-repeat 0 0;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
src/views/threeLaborService/components/statistic.vue
Normal file
79
src/views/threeLaborService/components/statistic.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<ul class="statisticsBox">
|
||||
<li v-for="item in statisticsData" :key="item.title">
|
||||
<div class="count">{{ item.value }}</div>
|
||||
<div class="title">{{ item.title }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const statisticsData = ref([
|
||||
{
|
||||
title: "合作社总数",
|
||||
value: 57
|
||||
},
|
||||
{
|
||||
title: "经纪⼈数",
|
||||
value: 74
|
||||
},
|
||||
{
|
||||
title: "服务企业数",
|
||||
value: 89
|
||||
},
|
||||
{
|
||||
title: "服务求职者数",
|
||||
value: 2754
|
||||
},
|
||||
{
|
||||
title: "挖掘岗位数",
|
||||
value: 348
|
||||
},
|
||||
{
|
||||
title: "网点数",
|
||||
value: 28
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
ul.statisticsBox {
|
||||
height: 116px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
margin: 58px 0 0 0;
|
||||
li {
|
||||
width: 206px;
|
||||
height: 128px;
|
||||
background: url("~@/assets/images/largeScreen/statistics-bg.png") no-repeat
|
||||
center;
|
||||
background-size: 100%;
|
||||
margin: 0 17.5px;
|
||||
.count {
|
||||
margin: 45px 0 0 0;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
background: -webkit-linear-gradient(#cbf2fa, #30dcff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.title {
|
||||
margin: 10px 0 0 0;
|
||||
height: 19px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
color: #cbf2fa;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gradient-text {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
46
src/views/threeLaborService/index.vue
Normal file
46
src/views/threeLaborService/index.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="allBox">
|
||||
<!-- 头部 -->
|
||||
<Head title="三级劳务体系⼈员数据"></Head>
|
||||
<LeftBorder></LeftBorder>
|
||||
<RightBorder></RightBorder>
|
||||
<BottomBorder></BottomBorder>
|
||||
<!-- 统计 -->
|
||||
<Statistic></Statistic>
|
||||
<!-- 地图 -->
|
||||
<Map></Map>
|
||||
<!-- 服务企业情况 -->
|
||||
<CompanyProfile style="margin-top: 50px"></CompanyProfile>
|
||||
<!-- 解决就业情况 -->
|
||||
<SolveEmployment style="margin-top: 40px"></SolveEmployment>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Head from "../../components/largeScreen/headHome.vue";
|
||||
import Statistic from "./components/statistic.vue";
|
||||
import Map from "./components/map.vue";
|
||||
import CompanyProfile from "./components/companyProfile.vue";
|
||||
import SolveEmployment from "./components/solveEmployment.vue";
|
||||
import LeftBorder from "../../components/largeScreen/leftBorder.vue";
|
||||
import RightBorder from "../../components/largeScreen/rightBorder.vue";
|
||||
import BottomBorder from "../../components/largeScreen/bottomBorder.vue";
|
||||
// 定义标题名称
|
||||
const title = "三级劳务体系⼈员数据";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.allBox {
|
||||
width: 1920px;
|
||||
height: 3240px;
|
||||
margin: 0 auto;
|
||||
background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
#app {
|
||||
overflow: auto !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user