兴蜀来了平台业务数据大屏页面、三级劳务体系⼈员数据大屏页面、“产教评”融合培训平台大屏页面
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>
|
||||
Reference in New Issue
Block a user